[2.x] UI Updates (#116)

* Require alpha 15

* Update npm dependencies, vite config and make a build work

* Wrap component registration in `Statamic.booting()` callback

* Move icon into resources/svg

* Imports listing

* Create import form

* edit page

* wip

* wip

* New icon

* Fix styling

* Only show blueprint dropdown when type & collection/taxonomy have been selected

* Add icons to listing actions

* Setup TailwindCSS build

To ensure any classes we're using in the importer addon don't disapper with updates to core.

* Re-work destination fields

- The group fieldtype no longer uses the config layout, which we want in our context.
- We also don't need its additional padding, borders, full screen mode.

So... I've created a new import_destination fieldtype which extends the Group fieldtype, just with a custom Vue component.

* Remove unused dependencies

* Fix styling

---------

Co-authored-by: duncanmcclean <[email protected]>

Author: duncanmcclean

package-lock.json

@@ -4,16 +4,13 @@
         "build": "vite build"
     },
     "dependencies": {
-        "axios": "^1.12.0",
-        "cross-env": "^7.0.2",
-        "marked": "^14.1.3",
-        "underscore": "^1.13.7",
-        "uniqid": "^5.4.0",
-        "vue": "^2.6.11"
+        "@tailwindcss/vite": "^4.1.16",
+        "tailwindcss": "^4.1.16",
+        "uniqid": "^5.4.0"
     },
     "devDependencies": {
-        "@vitejs/plugin-vue2": "^2.2.0",
-        "laravel-vite-plugin": "^0.7.4",
-        "vite": "^4.5.9"
+        "@statamic/cms": "file:./vendor/statamic/cms/resources/dist-package",
+        "laravel-vite-plugin": "^1.3.0",
+        "vite": "^6.4.1"
     }
 }

package.json

@@ -0,0 +1,11 @@
+@import "@statamic/cms/tailwind.css";
+
+@source "../js";
+
+/**
+    Borders & padding will be added by the individual destination fields.
+    We don't want them on the parent destination fieldtype. It just acts as a container.
+ */
+.import_destination-fieldtype {
+    @apply border-b-0 !px-0 !py-0;
+}

resources/css/cp.css

@@ -1,63 +1,50 @@
-<template>
-    <v-select
-        searchable
-        :options="options"
-        :get-option-label="(option) => option.title"
-        :get-option-key="(option) => option.handle"
-        :value="value"
-        :reduce="opt => opt.handle"
-        @input="update($event)"
-    />
-</template>
-
-<script>
-export default {
-    mixins: [Fieldtype],
-
-    inject: ['storeName'],
-
-    mounted() {
-        if (! this.value && this.type && (this.collection || this.taxonomy)) {
-            this.$emit('input', this.options[0].handle);
-        }
-    },
-
-    computed: {
-        type() {
-            return this.$store.state.publish[this.storeName].values.destination.type;
-        },
-
-        collection() {
-            return this.$store.state.publish[this.storeName].values.destination.collection[0];
-        },
-
-        taxonomy() {
-            return this.$store.state.publish[this.storeName].values.destination.taxonomy[0];
-        },
-
-        options() {
-            if (this.type === 'entries') {
-                return this.meta.collectionBlueprints[this.collection];
-            }
-
-            if (this.type === 'terms') {
-                return this.meta.taxonomyBlueprints[this.taxonomy];
-            }
-        },
-    },
-
-    watch: {
-        type() {
-            this.$emit('input', null);
-        },
-
-        collection() {
-            this.$emit('input', this.options[0].handle);
-        },
-
-        taxonomy() {
-            this.$emit('input', this.options[0].handle);
-        },
-    }
-}
+<script setup>
+import { Fieldtype } from '@statamic/cms';
+import { injectPublishContext, Select } from '@statamic/cms/ui';
+import { computed, watch, onMounted } from 'vue';
+
+const { values: publishValues } = injectPublishContext();
+
+const emit = defineEmits(Fieldtype.emits);
+const props = defineProps(Fieldtype.props);
+const { expose, update } = Fieldtype.use(emit, props);
+defineExpose(expose);
+
+const type = computed(() => publishValues.value.destination?.type);
+const collection = computed(() => publishValues.value.destination?.collection[0]);
+const taxonomy = computed(() => publishValues.value.destination?.taxonomy[0]);
+
+const options = computed(() => {
+	if (type.value === 'entries') {
+		return props.meta.collectionBlueprints[collection.value] ?? [];
+	}
+
+	if (type.value === 'terms') {
+		return props.meta.taxonomyBlueprints[taxonomy.value] ?? [];
+	}
+
+	return [];
+});
+
+watch(() => type.value, () => update(null));
+watch(() => collection.value, () => update(options.value[0].handle));
+watch(() => taxonomy.value, () => update(options.value[0].handle));
+
+onMounted(() => {
+	if (! props.value && type.value && (collection.value || taxonomy.value)) {
+		update(options.value[0].handle);
+	}
+});
 </script>
+
+<template>
+	<Select
+		v-if="options.length > 0"
+		class="w-full"
+		:options
+		option-label="title"
+		option-value="handle"
+		:model-value="value"
+		@update:model-value="update($event)"
+	/>
+</template>