tomhatzer · jmverges · Feb 7, 2023
diff --git a/dist/css/field.css b/dist/css/field.css
@@ -0,0 +1 @@
+
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/dist/js/field.js.LICENSE.txt b/dist/js/field.js.LICENSE.txt
@@ -1,15 +1,5 @@
 /*!
- * Determine if an object is a Buffer
- *
- * @author   Feross Aboukhadijeh <https://feross.org>
- * @license  MIT
- */
-
-/**
- * @license
- * Lodash <https://lodash.com/>
- * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ * vuex v4.0.2
+ * (c) 2021 Evan You
+ * @license MIT
  */
diff --git a/package.json b/package.json
@@ -1,21 +1,30 @@
 {
-    "private": true,
-    "scripts": {
-        "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
-    },
-    "devDependencies": {
-        "cross-env": "^7.0.3",
-        "laravel-mix": "^5.0.9",
-        "laravel-nova": "^1.6.0"
-    },
-    "dependencies": {
-        "speakingurl": "^14.0.1",
-        "vue": "^2.5.0"
-    }
+  "private": true,
+  "scripts": {
+    "dev": "npm run development",
+    "development": "mix",
+    "hot": "mix watch --hot",
+    "prod": "npm run production",
+    "production": "mix --production",
+    "watch": "mix watch",
+    "watch-poll": "mix watch -- --watch-options-poll=1000"
+  },
+  "devDependencies": {
+    "@inertiajs/inertia": "^0.11.0",
+    "@vue/babel-plugin-jsx": "^1.1.1",
+    "axios": "^0.26.1",
+    "form-backend-validation": "^2.4.0",
+    "js-beautify": "^1.14.3",
+    "laravel-mix": "^6.0.41",
+    "postcss": "^8.3.11",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.51.0",
+    "sass-loader": "^12.1.0",
+    "vue-loader": "^16.8.3",
+    "vuex": "^4.0.2"
+  },
+  "dependencies": {
+    "vue": "^3.2.33",
+    "speakingurl": "^14.0.1"
+  }
 }
diff --git a/resources/js/components/Slug/DetailField.vue b/resources/js/components/Slug/DetailField.vue
@@ -1,9 +1,9 @@
 <template>
-    <panel-item :field="field" />
+  <PanelItem :index="index" :field="field" />
 </template>
 
 <script>
 export default {
-    props: ['resource', 'resourceName', 'resourceId', 'field'],
+    props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
 }
 </script>
diff --git a/resources/js/components/Slug/FormField.vue b/resources/js/components/Slug/FormField.vue
@@ -1,59 +1,58 @@
 <template>
-    <default-field :field="field" :errors="errors">
-        <template slot="field">
-            <input
-                class="w-full form-control form-input form-input-bordered"
-                :id="field.attribute"
-                :dusk="field.attribute"
-                v-model="value"
-                v-bind="extraAttributes"
-                :disabled="isReadonly"
-            />
-            <div v-if="field.showPreviewUrl !== null" class="mt-6">
-                <a :href=previewUrl target="_blank">{{ previewUrl }}</a>
-            </div>
-        </template>
-    </default-field>
+  <DefaultField :field="currentField" :errors="errors">
+    <template #field>
+      <div class="space-y-1">
+        <input
+            v-bind="extraAttributes"
+            class="w-full form-control form-input form-input-bordered"
+            v-model="value"
+            :id="currentField.uniqueKey"
+            :dusk="field.attribute"
+            :disabled="currentlyIsReadonly"
+        />
+        <div v-if="currentField.showPreviewUrl !== null" class="mt-6">
+            <a :href=previewUrl target="_blank">{{ previewUrl }}</a>
+        </div>
+      </div>
+    </template>
+  </DefaultField>
 </template>
 
 <script>
-import { FormField, HandlesValidationErrors } from 'laravel-nova'
+import { DependentFormField, FormField, HandlesValidationErrors } from 'laravel-nova'
 const slugify = require('speakingurl');
 
 export default {
-    mixins: [FormField, HandlesValidationErrors],
-
-    props: ['resourceName', 'resourceId', 'field'],
-
+    mixins: [DependentFormField, FormField, HandlesValidationErrors],
     /**
      * Mount the component.
      */
     mounted() {
-        Nova.$on('field-update-' + this.field.attribute, ({value}) => {
-            if (this.field.disableAutoUpdateWhenUpdating === true && this.$router.currentRoute.name !== 'create') {
+        Nova.$on('field-update-' + this.currentField.attribute, ({value}) => {
+            if (this.currentField.disableAutoUpdateWhenUpdating === true && this.editMode !== 'create') {
                 return;
             }
-            this.value = slugify(value, this.field.slugifyOptions || {});
+            this.value = slugify(value, this.currentField.slugifyOptions || {});
             this.appendSlugPrefix(this.value);
         })
     },
 
     computed: {
         defaultAttributes() {
             return {
-                type: this.field.type || 'text',
-                min: this.field.min,
-                max: this.field.max,
-                step: this.field.step,
-                pattern: this.field.pattern,
-                showPreviewUrl: this.field.showPreviewUrl,
-                placeholder: this.field.placeholder || this.field.name,
+                type: this.currentField.type || 'text',
+                min: this.currentField.min,
+                max: this.currentField.max,
+                step: this.currentField.step,
+                pattern: this.currentField.pattern,
+                showPreviewUrl: this.currentField.showPreviewUrl,
+                placeholder: this.currentField.placeholder || this.currentField.name,
                 class: this.errorClasses,
             }
         },
 
         extraAttributes() {
-            const attrs = this.field.extraAttributes
+            const attrs = this.currentField.extraAttributes
 
             return {
                 // Leave the default attributes even though we can now specify
@@ -65,7 +64,7 @@ export default {
         },
 
         previewUrl() {
-            return this.field.showPreviewUrl + '/' + this.value;
+            return this.currentField.showPreviewUrl + '/' + this.value;
         }
     },
 
@@ -75,8 +74,8 @@ export default {
          * Set the initial, internal value for the field.
          */
         setInitialValue() {
-          this.value = this.field.value || ''
-          if(this.$router.currentRoute.name === 'create') {
+          this.value = this.currentField.value || ''
+          if(this.editMode === 'create') {
             this.appendSlugPrefix() 
           }
         },
@@ -85,16 +84,16 @@ export default {
          * Add slug prefix to slug if it is set
          */
         appendSlugPrefix() {
-          if(this.field.slugPrefix) {
-            this.value = this.field.slugPrefix + '/' + this.value
+          if(this.currentField.slugPrefix) {
+            this.value = this.currentField.slugPrefix + '/' + this.value
           }
         },
 
         /**
          * Fill the given FormData object with the field's internal value.
          */
         fill(formData) {
-          formData.append(this.field.attribute, this.value || '')
+          formData.append(this.currentField.attribute, this.value || '')
         },
 
         /**

diff --git a/resources/js/components/Slug/IndexField.vue b/resources/js/components/Slug/IndexField.vue
@@ -1,10 +1,45 @@
 <template>
-    <div v-if="field.asHtml" v-html="field.value"></div>
-    <span v-else class="whitespace-no-wrap">{{ field.value }}</span>
+  <div :class="`text-${field.textAlign}`">
+    <template v-if="fieldValue">
+      <CopyButton
+          v-if="fieldValue && field.copyable && !shouldDisplayAsHtml"
+          @click.prevent.stop="copy"
+          v-tooltip="__('Copy to clipboard')"
+      >
+        <span ref="theFieldValue">
+          {{ fieldValue }}
+        </span>
+      </CopyButton>
+
+      <span
+          v-else-if="fieldValue && !field.copyable && !shouldDisplayAsHtml"
+          class="whitespace-nowrap"
+      >
+        {{ fieldValue }}
+      </span>
+      <div
+          @click.stop
+          v-else-if="fieldValue && !field.copyable && shouldDisplayAsHtml"
+          v-html="fieldValue"
+      />
+      <p v-else>&mdash;</p>
+    </template>
+    <p v-else>&mdash;</p>
+  </div>
 </template>
 
 <script>
+import { CopiesToClipboard, FieldValue } from 'laravel-nova'
+
 export default {
-    props: ['resourceName', 'field'],
+  mixins: [CopiesToClipboard, FieldValue],
+
+  props: ['resourceName', 'field'],
+
+  methods: {
+    copy() {
+      this.copyValueToClipboard(this.field.value)
+    },
+  },
 }
 </script>
diff --git a/resources/js/components/TextWithSlug/DetailField.vue b/resources/js/components/TextWithSlug/DetailField.vue
@@ -1,9 +1,9 @@
 <template>
-    <panel-item :field="field" />
+  <PanelItem :index="index" :field="field" />
 </template>
 
 <script>
 export default {
-    props: ['resource', 'resourceName', 'resourceId', 'field'],
+    props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
 }
 </script>
diff --git a/resources/js/components/TextWithSlug/FormField.vue b/resources/js/components/TextWithSlug/FormField.vue
@@ -1,39 +1,42 @@
 <template>
-    <default-field :field="field" :errors="errors">
-        <template slot="field">
+  <DefaultField
+      :field="currentField"
+      :errors="errors"
+  >
+    <template #field>
             <input
                 class="w-full form-control form-input form-input-bordered"
-                :id="field.attribute"
-                :dusk="field.attribute"
+                :id="currentField.uniqueKey"
+                :dusk="currentField.attribute"
                 v-model="value"
                 @keyup="handleKeydown"
                 v-bind="extraAttributes"
-                :disabled="isReadonly"
+                :disabled="currentlyIsReadonly"
             />
         </template>
-    </default-field>
+  </DefaultField>
 </template>
 <script>
-    import { FormField, HandlesValidationErrors } from 'laravel-nova'
+    import { DependentFormField, FormField, HandlesValidationErrors } from 'laravel-nova'
 
     export default {
-        mixins: [HandlesValidationErrors, FormField],
+        mixins: [DependentFormField, HandlesValidationErrors, FormField],
 
         computed: {
             defaultAttributes() {
                 return {
-                    type: this.field.type || 'text',
-                    min: this.field.min,
-                    max: this.field.max,
-                    step: this.field.step,
-                    pattern: this.field.pattern,
-                    placeholder: this.field.placeholder || this.field.name,
+                    type: this.currentField.type || 'text',
+                    min: this.currentField.min,
+                    max: this.currentField.max,
+                    step: this.currentField.step,
+                    pattern: this.currentField.pattern,
+                    placeholder: this.currentField.placeholder || this.currentField.name,
                     class: this.errorClasses,
                 }
             },
 
             extraAttributes() {
-                const attrs = this.field.extraAttributes
+                const attrs = this.currentField.extraAttributes
 
                 return {
                     // Leave the default attributes even though we can now specify
@@ -47,7 +50,7 @@
 
         methods: {
             handleKeydown(event) {
-                Nova.$emit('field-update-' + this.field.slug, {
+                Nova.$emit('field-update-' + this.currentField.slug, {
                     value: event.target.value
                 })
             },

diff --git a/resources/js/components/TextWithSlug/IndexField.vue b/resources/js/components/TextWithSlug/IndexField.vue
@@ -1,10 +1,45 @@
 <template>
-    <div v-if="field.asHtml" v-html="field.value"></div>
-    <span v-else class="whitespace-no-wrap">{{ field.value }}</span>
+  <div :class="`text-${field.textAlign}`">
+    <template v-if="fieldValue">
+      <CopyButton
+          v-if="fieldValue && field.copyable && !shouldDisplayAsHtml"
+          @click.prevent.stop="copy"
+          v-tooltip="__('Copy to clipboard')"
+      >
+        <span ref="theFieldValue">
+          {{ fieldValue }}
+        </span>
+      </CopyButton>
+
+      <span
+          v-else-if="fieldValue && !field.copyable && !shouldDisplayAsHtml"
+          class="whitespace-nowrap"
+      >
+        {{ fieldValue }}
+      </span>
+      <div
+          @click.stop
+          v-else-if="fieldValue && !field.copyable && shouldDisplayAsHtml"
+          v-html="fieldValue"
+      />
+      <p v-else>&mdash;</p>
+    </template>
+    <p v-else>&mdash;</p>
+  </div>
 </template>
 
 <script>
+import { CopiesToClipboard, FieldValue } from 'laravel-nova'
+
 export default {
-    props: ['resourceName', 'field'],
+  mixins: [CopiesToClipboard, FieldValue],
+
+  props: ['resourceName', 'field'],
+
+  methods: {
+    copy() {
+      this.copyValueToClipboard(this.field.value)
+    },
+  },
 }
 </script>
diff --git a/src/Slug.php b/src/Slug.php
@@ -101,7 +101,7 @@ public function asHtml()
         return $this->withMeta(['asHtml' => true]);
     }
 
-    public function jsonSerialize()
+    public function jsonSerialize() : array
     {
         return array_merge([
             'disableAutoUpdateWhenUpdating' => $this->disableAutoUpdateWhenUpdating,