New Fieldtype Picker UI and Icons (#4929)

Co-authored-by: Jason Varga <jason@pixelfear.com>
statamic · Dec 17, 2021 · 202821b · 202821b
1 parent 2c45ce6
commit 202821b
Show file tree

Hide file tree

Showing 82 changed files with 249 additions and 142 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
     "laravel-mix": "^5.0.9",
     "sass": "^1.26.2",
     "sass-loader": "^8.0.2",
-    "tailwindcss": "^1.2.0",
+    "tailwindcss": "^1.9.0",
     "vue-template-compiler": "^2.6.11"
   },
   "jest": {

diff --git a/resources/js/components/SvgIcon.vue b/resources/js/components/SvgIcon.vue
@@ -2,6 +2,7 @@
 export default {
     props: {
         name: String,
+        default: String,
         inline: {
             type: Boolean,
             default: true
@@ -16,7 +17,15 @@ export default {
     },
     methods: {
         getInlineIcon() {
-            return require(`!!html-loader!./../../svg/${this.name}.svg`);
+            try {
+                return require(`!!html-loader!./../../svg/${this.name}.svg`);
+            } catch (error) {
+                if (this.default) {
+                    return require(`!!html-loader!./../../svg/${this.default}.svg`);
+                }
+
+                return '';
+            }
         }
     }
 }

diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
@@ -5,7 +5,7 @@
             <div class="blueprint-drag-handle w-4 border-r"></div>
             <div class="flex flex-1 items-center justify-between">
                 <div class="flex items-center flex-1 pr-2 py-1 pl-1">
-                    <svg-icon class="text-grey-70 mr-1 h-4 w-4 flex-none" :name="field.icon" v-tooltip="tooltipText" />
+                    <svg-icon class="text-grey-80 mr-1 h-4 w-4 flex-none" :name="field.icon" v-tooltip="tooltipText" default="generic-field" />
                     <a class="break-all" v-text="labelText" @click="$emit('edit')" />
                     <svg-icon name="hyperlink" v-if="isReferenceField" class="text-grey-60 text-3xs ml-1 h-4 w-4" v-tooltip="__('Imported from fieldset') + ': ' + field.field_reference" />
                 </div>