wip

nova-components/NovaCustomHtml/resources/css/field.css

@@ -0,0 +1 @@
+/* Nova Field CSS */

nova-components/NovaCustomHtml/resources/js/components/DetailField.vue

@@ -0,0 +1,44 @@
+<template>
+  <FieldWrapper
+      :class="{'hidden': hidden, 'w-full': fullWidth}"
+      v-if="field.visible"
+    >
+      <div
+        v-html="field.html"
+        :class="classes"
+      />
+    </FieldWrapper>
+</template>
+
+<script>
+export default {
+  props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
+
+    /*
+     * Set the initial, internal value for the field.
+     */
+    setInitialValue() {
+      this.fullWidth = this.field.fullWidth || true;
+      this.value = this.field.value || ''
+      this.html = this.field.html || ''
+      this.alert_message = this.field.alert_message || null
+      this.hidden = this.field.hidden || false
+    },
+
+      computed: {
+        classes: () => [
+          'remove-last-margin-bottom',
+          'leading-normal',
+          'w-full',
+          'py-4',
+          'px-8',
+        ],
+      },
+
+    mounted() {
+        if (this.alert_message) {
+            alert(this.alert_message)
+        }
+    }
+}
+</script>

nova-components/NovaCustomHtml/resources/js/components/FormField.vue

@@ -0,0 +1,57 @@
+<template>
+    <FieldWrapper
+      :class="{'hidden': hidden, 'w-full': fullWidth}"
+      v-if="currentField.visible"
+    >
+      <div
+        v-html="currentField.html"
+        :class="classes"
+      />
+    </FieldWrapper>
+</template>
+
+<script>
+import { DependentFormField, HandlesValidationErrors } from 'laravel-nova'
+
+export default {
+  mixins: [DependentFormField, HandlesValidationErrors],
+
+  props: ['resourceName', 'resourceId', 'field'],
+
+  methods: {
+    /*
+     * Set the initial, internal value for the field.
+     */
+    setInitialValue() {
+      this.fullWidth = this.field.fullWidth || true;
+      this.value = this.field.value || ''
+      this.html = this.field.html || ''
+      this.alert_message = this.field.alert_message || null
+      this.hidden = this.field.hidden || false
+    },
+
+    /**
+     * Fill the given FormData object with the field's internal value.
+     */
+    fill(formData) {
+      formData.append(this.field.attribute, this.value || '')
+    },
+  },
+
+  computed: {
+    classes: () => [
+      'remove-last-margin-bottom',
+      'leading-normal',
+      'w-full',
+      'py-4',
+      'px-8',
+    ],
+  },
+
+  mounted() {
+    if (this.alert_message) {
+        alert(this.alert_message)
+    }
+  }
+}
+</script>

nova-components/NovaCustomHtml/resources/js/components/IndexField.vue

@@ -0,0 +1,15 @@
+<template>
+  <span>{{ fieldValue }}</span>
+</template>
+
+<script>
+export default {
+  props: ['resourceName', 'field'],
+
+  computed: {
+    fieldValue() {
+      return this.field.displayedAs || this.field.value
+    },
+  }
+}
+</script>

nova-components/NovaCustomHtml/resources/js/field.js

@@ -0,0 +1,9 @@
+import IndexField from './components/IndexField'
+import DetailField from './components/DetailField'
+import FormField from './components/FormField'
+
+Nova.booting((app, store) => {
+  app.component('index-nova-custom-html', IndexField)
+  app.component('detail-nova-custom-html', DetailField)
+  app.component('form-nova-custom-html', FormField)
+})