fix #2

Add Heading Management

.gitignore

@@ -8,3 +8,4 @@ phpunit.xml
 .phpunit.result.cache
 .DS_Store
 Thumbs.db
+.idea/

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/tool.js": "/js/tool.js?id=bcd7e6a6a2ff074dbf60",
+    "/js/tool.js": "/js/tool.js?id=687e9887184b43f4934f",
     "/css/tool.css": "/css/tool.css?id=d41d8cd98f00b204e980"
 }

resources/js/components/Detail/HeadingField.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="bg-20 flex border-b border-t border-40 -mx-6 -my-px px-2">
+    <div class="w-full py-4 px-4">
+      <slot name="value">
+        <p v-if="fieldValue && !shouldDisplayAsHtml" class="text-90">
+          {{ fieldValue }}
+        </p>
+        <div
+          v-else-if="fieldValue && shouldDisplayAsHtml"
+          v-html="field.value"
+        ></div>
+        <p v-else>&mdash;</p>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['resource', 'resourceName', 'resourceId', 'field'],
+
+  mounted() {
+    this.$el.classList.add('w-full')
+  },
+
+  computed: {
+    fieldValue() {
+      if (
+        this.field.value === '' ||
+        this.field.value === null ||
+        this.field.value === undefined
+      ) {
+        return false
+      }
+
+      return String(this.field.value)
+    },
+
+    shouldDisplayAsHtml() {
+      return this.field.asHtml
+    },
+
+  },
+}
+</script>

resources/js/components/Form/HeadingField.vue

@@ -0,0 +1,45 @@
+<template>
+  <field-wrapper>
+    <div v-if="shouldDisplayAsHtml" v-html="field.value" :class="classes" />
+    <div v-else :class="classes">
+      <p>{{ field.value }}</p>
+    </div>
+  </field-wrapper>
+</template>
+<script>
+export default {
+  props: {
+    resourceName: {
+      type: String,
+      require: true,
+    },
+    field: {
+      type: Object,
+      require: true,
+    },
+  },
+
+  created() {
+    this.field.fill = () => {}
+  },
+
+  mounted() {
+    this.$el.classList.add('w-full')
+  },
+
+  computed: {
+    classes: () => [
+      'bg-20',
+      'remove-last-margin-bottom',
+      'leading-normal',
+      'w-full',
+      'py-4',
+      'px-8',
+    ],
+
+    shouldDisplayAsHtml() {
+      return this.field.asHtml || false
+    },
+  },
+}
+</script>

resources/js/components/PanelItem.vue

@@ -2,7 +2,7 @@
     <div :class="elementSize">
         <field-wrapper :stacked="field.stacked">
             <div class="" :class="field.stacked ? 'pt-6 w-full' : 'py-4 w-1/4'">
-                <slot>
+                <slot>ssss
                     <h4 class="font-normal text-80">{{ label }}</h4>
                 </slot>
             </div>

resources/js/tool.js

@@ -1,7 +1,12 @@
 import DefaultField from './components/DefaultField'
 import PanelItem from './components/PanelItem'
+import DetailHeadingField from './components/Detail/HeadingField'
+import FormHeadingField from './components/Form/HeadingField'
+
 
 Nova.booting((Vue, router, store) => {
   Vue.component('default-field', DefaultField)
   Vue.component('panel-item', PanelItem)
+  Vue.component('detail-heading-field', DetailHeadingField)
+  Vue.component('form-heading-field', FormHeadingField)
 })