[5.x] Dictionaries

resources/css/components/fieldtypes/dictionary-fields.css

@@ -0,0 +1,20 @@
+.dictionary_fields-fieldtype {
+    @apply p-0;
+
+    .publish-fields {
+        @apply w-full;
+    }
+
+    .config-field {
+        @apply md:flex flex-wrap border-b border-gray-400 dark:border-dark-900 w-full;
+        @apply p-3 @sm:p-4 m-0;
+
+        .field-inner {
+            @apply w-full md:w-1/2 rtl:md:pl-8 ltr:md:pr-8;
+        }
+
+        .field-inner + div {
+            @apply w-full md:w-1/2;
+        }
+    }
+}

resources/css/cp.css

@@ -58,6 +58,7 @@
 @import "components/fieldtypes/checkboxes";
 @import "components/fieldtypes/code";
 @import "components/fieldtypes/datetime";
+@import "components/fieldtypes/dictionary-fields";
 @import "components/fieldtypes/environment";
 @import "components/fieldtypes/grid";
 @import "components/fieldtypes/hidden";

resources/css/vendors/vue-select.css

@@ -173,6 +173,12 @@
 
     &.sortable-item { @apply !cursor-grab; }
 
+    &.invalid {
+        @apply border-red-300 dark:border-dark-red bg-red-100 dark:bg-red-400 text-red-500 dark:text-red-950;
+        background-image: none;
+
+        .vs__deselect { @apply text-red-500 dark:text-red-950 }
+    }
 }
 
 .vs__deselect {

resources/js/bootstrap/fieldtypes.js

@@ -24,6 +24,8 @@ import Routes from '../components/collections/Routes.vue';
 import TitleFormats from '../components/collections/TitleFormats.vue';
 import ColorFieldtype from '../components/fieldtypes/ColorFieldtype.vue';
 import DateFieldtype from '../components/fieldtypes/DateFieldtype.vue';
+import DictionaryFieldtype from "../components/fieldtypes/DictionaryFieldtype.vue";
+import DictionaryFields from "../components/fieldtypes/DictionaryFields.vue";
 import FieldDisplayFieldtype from '../components/fieldtypes/FieldDisplayFieldtype.vue';
 import FieldsFieldtype from '../components/fieldtypes/grid/FieldsFieldtype.vue';
 import FilesFieldtype from '../components/fieldtypes/FilesFieldtype.vue';
@@ -86,6 +88,8 @@ Vue.component('collection_routes-fieldtype', Routes);
 Vue.component('collection_title_formats-fieldtype', TitleFormats);
 Vue.component('color-fieldtype', ColorFieldtype);
 Vue.component('date-fieldtype', DateFieldtype);
+Vue.component('dictionary-fieldtype', DictionaryFieldtype);
+Vue.component('dictionary_fields-fieldtype', DictionaryFields);
 Vue.component('field_display-fieldtype', FieldDisplayFieldtype);
 Vue.component('fields-fieldtype', FieldsFieldtype);
 Vue.component('files-fieldtype', FilesFieldtype);

resources/js/components/fieldtypes/DictionaryFields.vue

@@ -0,0 +1,82 @@
+<template>
+    <publish-container
+        name="dictionary-fields"
+        :blueprint="blueprint"
+        :values="value"
+        :meta="publishMeta"
+        :is-config="true"
+        :errors="errors"
+        @updated="update"
+    >
+        <publish-fields
+            slot-scope="{ setFieldValue, setFieldMeta }"
+            :fields="fields"
+            @updated="setFieldValue"
+            @meta-updated="setFieldMeta"
+        />
+    </publish-container>
+</template>
+
+<script>
+import Fieldtype from "./Fieldtype.vue";
+
+export default {
+    mixins: [Fieldtype],
+
+    inject: ['storeName'],
+
+    computed: {
+        dictionary() {
+            return this.value?.type;
+        },
+
+        fields() {
+            return this.meta.type.fields.concat(this.meta.dictionaries[this.dictionary]?.fields || [])
+        },
+
+        blueprint() {
+            return {
+                tabs: [{
+                    fields: this.fields
+                }]
+            }
+        },
+
+        publishMeta() {
+            return {
+                ...this.meta.type.meta,
+                ...this.meta.dictionaries[this.dictionary]?.meta
+            }
+        },
+
+        errors() {
+            const state = this.$store.state.publish[this.storeName];
+
+            if (! state) {
+                return {};
+            }
+
+            let errors = {}
+
+            // Filter errors to only include those for this field, and remove the field path prefix
+            // if there is one, then append it to the errors object.
+            Object.entries(state.errors)
+                .filter(([key, value]) => key.startsWith(this.fieldPathPrefix || this.handle))
+                .forEach(([key, value]) => {
+                    errors[key.split('.').pop()] = value
+                })
+
+            return errors
+        },
+    },
+
+    watch: {
+        dictionary() {
+            this.update({
+                type: dictionary,
+                ...this.meta.dictionaries[this.dictionary]?.defaults
+            })
+        },
+    },
+}
+</script>

resources/js/components/fieldtypes/DictionaryFieldtype.vue

@@ -0,0 +1,200 @@
+<template>
+    <div class="flex">
+        <v-select
+            ref="input"
+            :input-id="fieldId"
+            class="flex-1"
+            append-to-body
+            searchable
+            close-on-select
+            :calculate-position="positionOptions"
+            :name="name"
+            :disabled="config.disabled || isReadOnly || (multiple && limitReached)"
+            :options="normalizeInputOptions(options)"
+            :placeholder="__(config.placeholder)"
+            :multiple="multiple"
+            :value="selectedOptions"
+            @input="vueSelectUpdated"
+            @focus="$emit('focus')"
+            @search="search"
+            @search:focus="$emit('focus')"
+            @search:blur="$emit('blur')">
+            <template #selected-option-container v-if="multiple"><i class="hidden"></i></template>
+            <template #search="{ events, attributes }" v-if="multiple">
+                <input
+                    :placeholder="__(config.placeholder)"
+                    class="vs__search"
+                    type="search"
+                    v-on="events"
+                    v-bind="attributes"
+                >
+            </template>
+            <template #option="{ label }">
+                <div v-html="label" />
+            </template>
+            <template #selected-option="{ label }">
+                <div v-html="label" />
+            </template>
+            <template #no-options>
+                <div class="text-sm text-gray-700 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
+            </template>
+            <template #footer="{ deselect }" v-if="multiple">
+                <sortable-list
+                    item-class="sortable-item"
+                    handle-class="sortable-item"
+                    :value="value"
+                    :distance="5"
+                    :mirror="false"
+                    @input="update"
+                >
+                    <div class="vs__selected-options-outside flex flex-wrap">
+                        <span v-for="option in selectedOptions" :key="option.value" class="vs__selected mt-2 sortable-item" :class="{'invalid': option.invalid}">
+                            <div v-html="option.label" />
+                            <button v-if="!readOnly" @click="deselect(option)" type="button" :aria-label="__('Deselect option')" class="vs__deselect">
+                                <span>×</span>
+                            </button>
+                            <button v-else type="button" class="vs__deselect">
+                                <span class="text-gray-500">×</span>
+                            </button>
+                        </span>
+                    </div>
+                </sortable-list>
+            </template>
+        </v-select>
+        <div class="text-xs rtl:mr-2 ltr:ml-2 mt-3" :class="limitIndicatorColor" v-if="config.max_items > 1">
+            <span v-text="currentLength"></span>/<span v-text="config.max_items"></span>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.draggable-source--is-dragging {
+    @apply opacity-75 bg-transparent border-dashed
+}
+</style>
+
+<script>
+import HasInputOptions from './HasInputOptions.js'
+import { SortableList } from '../sortable/Sortable';
+import PositionsSelectOptions from '../../mixins/PositionsSelectOptions';
+
+export default {
+
+    mixins: [Fieldtype, HasInputOptions, PositionsSelectOptions],
+
+    components: {
+        SortableList
+    },
+
+    data() {
+        return {
+            options: {},
+            selectedOptionData: this.meta.selectedOptions,
+        }
+    },
+
+    computed: {
+        multiple() {
+            return this.config.max_items !== 1;
+        },
+
+        selectedOptions() {
+            let selections = this.value || [];
+
+            if (typeof selections === 'string' || typeof selections === 'number') {
+                selections = [selections];
+            }
+
+            return selections.map(value => {
+                let option = this.selectedOptionData.find(option => option.value === value);
+
+                if (! option) return {value, label: value};
+
+                return {value: option.value, label: option.label, invalid: option.invalid};
+            });
+        },
+
+        replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
+            return this.selectedOptions.map(option => option.label).join(', ');
+        },
+
+        limitReached() {
+            if (!this.config.max_items) return false;
+
+            return this.currentLength >= this.config.max_items;
+        },
+
+        limitExceeded() {
+            if (!this.config.max_items) return false;
+
+            return this.currentLength > this.config.max_items;
+        },
+
+        currentLength() {
+            if (this.value) {
+                return (typeof this.value == 'string') ? 1 : this.value.length;
+            }
+
+            return 0;
+        },
+
+        limitIndicatorColor() {
+            if (this.limitExceeded) {
+                return 'text-red-500';
+            } else if (this.limitReached) {
+                return 'text-green-600';
+            }
+
+            return 'text-gray';
+        },
+
+        configParameter() {
+            return utf8btoa(JSON.stringify(this.config));
+        },
+    },
+
+    mounted() {
+        this.request();
+    },
+
+    methods: {
+        focus() {
+            this.$refs.input.focus();
+        },
+
+        vueSelectUpdated(value) {
+            if (this.multiple) {
+                this.update(value.map(v => v.value));
+                value.forEach((option) => this.selectedOptionData.push(option));
+            } else {
+                if (value) {
+                    this.update(value.value)
+                    this.selectedOptionData.push(value)
+                } else {
+                    this.update(null);
+                }
+            }
+        },
+
+        request(params = {}) {
+            params = {
+                config: this.configParameter,
+                ...params,
+            }
+
+            return this.$axios.get(this.meta.url, { params }).then(response => {
+                this.options = response.data.data;
+                return Promise.resolve(response);
+            });
+        },
+
+        search: _.debounce(function (search, loading) {
+            loading(true);
+
+            this.request({ search }).then(response => loading(false));
+        }, 300),
+    }
+};
+</script>

resources/lang/en/fieldtypes.php

@@ -72,6 +72,10 @@
     'date.config.time_enabled' => 'Enable the timepicker.',
     'date.config.time_seconds_enabled' => 'Show seconds in the timepicker.',
     'date.title' => 'Date',
+    'dictionary.config.dictionary' => 'The dictionary you wish to pull options from.',
+    'dictionary.file.config.filename' => 'The filename containing your options, relative to the `resources/dictionaries` directory.',
+    'dictionary.file.config.label' => "The key containing the options' labels. By default it's `label`. Alternatively, you may use Antlers.",
+    'dictionary.file.config.value' => "The key containing the options' values. By default it's `value`.",
     'entries.config.create' => 'Allow creation of new entries.',
     'entries.config.collections' => 'Choose which collections the user can select from.',
     'entries.config.query_scopes' => 'Choose which query scopes should be applied when retrieving selectable entries.',

resources/lang/en/messages.php

@@ -69,6 +69,7 @@
     'collections_sort_direction_instructions' => 'The default sort direction.',
     'collections_preview_target_refresh_instructions' => 'Automatically refresh the preview while editing. Disabling this will use postMessage.',
     'collections_taxonomies_instructions' => 'Connect entries in this collection to taxonomies. Fields will be automatically added to publish forms.',
+    'dictionaries_countries_region_instructions' => 'Optionally filter the countries by region.',
     'duplicate_action_warning_localization' => 'This entry is a localization. The origin entry will be duplicated.',
     'duplicate_action_warning_localizations' => 'One or more selected entries are localizations. In those cases, the origin entry will be duplicated instead.',
     'duplicate_action_localizations_confirmation' => 'Are you sure you want to run this action? Localizations will also be duplicated.',

resources/views/extend/forms/fields/dictionary.antlers.html

@@ -0,0 +1,21 @@
+<select
+    name="{{ handle }}{{ multiple ?= "[]" }}"
+    {{ if js_driver }}{{ js_attributes }}{{ /if }}
+    {{ if multiple }}multiple{{ /if }}
+    {{ if validate|contains:required }}required{{ /if }}
+>
+    {{ unless multiple }}
+        <option value>
+            {{ if placeholder }}
+                {{ placeholder }}
+            {{ else }}
+                {{ trans key="Please select..." }}
+            {{ /if }}
+        </option>
+    {{ /unless }}
+    {{ foreach:options as="option|label" }}
+        <option value="{{ option }}"{{ if multiple }}{{ if value|in_array:option }} selected{{ /if }}{{ else }}{{ if option == value }} selected{{ /if }}{{ /if }}>
+            {{ label !== null ? label : option }}
+        </option>
+    {{ /foreach:options }}
+</select>

resources/views/forms/automagic-email.antlers.html

@@ -12,7 +12,7 @@
         {{ elseif fieldtype == "radio" }}
             {{ value:label ?? value }}
 
-        {{ elseif fieldtype == "select" || fieldtype == "checkboxes" }}
+        {{ elseif fieldtype == "select" || fieldtype == "checkboxes" || fieldtype == "dictionary" }}
             {{ value }}{{ label ?? value }}{{ if !last }}, {{ /if }}{{ /value }}
 
         {{ elseif value|is_iterable }}