@concretecms/bedrock 1.3.6 → 1.4.0

package/assets/cms/components/form/ConcreteGroupInput.vue

@@ -0,0 +1,134 @@
+<template>
+    <div class="ccm-item-selector-group">
+        <input type="hidden" :name="inputName" :value="selectedGroup ? selectedGroup.gID : ''" v-if="inputName !== ''" />
+
+        <div v-if="isLoading">
+            <div class="btn-group">
+                <div class="btn btn-secondary"><svg class="ccm-loader-dots"><use xlink:href="#icon-loader-circles" /></svg></div>
+                <button type="button" @click="reset" :disabled="readonly" class="ccm-item-selector-reset btn btn-secondary">
+                    <i class="fa fa-times-circle"></i>
+                </button>
+            </div>
+        </div>
+
+        <div v-else-if="selectedGroup === null" class="ccm-item-selector-choose">
+            <button type="button" @click="openChooser" :disabled="readonly" class="btn btn-secondary">
+                {{chooseText}}
+            </button>
+        </div>
+
+        <div v-else class="ccm-item-selector-loaded">
+            <div class="btn-group">
+                <div class="btn btn-secondary" :class="{disabled: readonly}" @click="openChooser">
+                    <span class="ccm-item-selector-title" v-bind:title="`ID: ${selectedGroup.gID}`">{{selectedGroup.gDisplayName}}</span>
+                </div>
+                <button type="button" @click="reset" :disabled="readonly" class="ccm-item-selector-reset btn btn-secondary">
+                    <i class="fa fa-times-circle"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            isLoadingGroupId: 0 /* integer */,
+            selectedGroup: null, /* json object */
+            mounted: false
+        }
+    },
+    computed: {
+        isLoading() {
+            return this.isLoadingGroupId !== 0
+        }
+    },
+    props: {
+        inputName: {
+            type: String,
+            default: ''
+        },
+        groupId: {
+            type: Number,
+            default: 0
+        },
+        chooseText: {
+            type: String,
+            default: 'Choose a Group'
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        }
+    },
+    watch: {
+        groupId: {
+            immediate: true,
+            handler(value) {
+                if (this.mounted) {
+                    this.loadGroup()
+                }
+            }
+        }
+    },
+    beforeMount() {
+        this.mounted = true
+    },
+    mounted() {
+        this.loadGroup(true)
+    },
+    beforeUnmount() {
+        this.mounted = false
+    },
+    methods: {
+        setSelectedGroup(group, triggerChange) {
+            const currentlySelectedGroupID = parseInt(this.selectedGroup?.gID) || 0
+            const newlySelectedGroupID = parseInt(group?.gID) || 0
+            this.isLoadingGroupId = 0
+            this.selectedGroup = group
+            if (triggerChange && currentlySelectedGroupID !== newlySelectedGroupID) {
+                this.$emit('change', this.selectedGroup)
+            }
+        },
+        openChooser: function() {
+            window.ConcreteUserGroupManager.launchDialog((group) => {
+                this.setSelectedGroup(group, true)
+            })
+        },
+        loadGroup(initial) {
+            const wantedGroupId = Math.max(parseInt(this.groupId) || 0)
+            if (wantedGroupId === 0) {
+                this.setSelectedGroup(null, !initial)
+                return
+            }
+            const currentGroupId = parseInt(this.selectedGroup?.gID) || 0
+            if (wantedGroupId === currentGroupId) {
+                this.isLoadingGroupId = 0
+                return
+            }
+            this.isLoadingGroupId = wantedGroupId
+            window.ConcreteUserGroupManager.getGroupDetails(
+                wantedGroupId,
+                (r) => {
+                    if (this.isLoadingGroupId !== wantedGroupId) {
+                        return
+                    }
+                    this.setSelectedGroup(r.groups[0], !initial)
+                },
+                (r) => {
+                    if (this.isLoadingGroupId !== wantedGroupId) {
+                        return
+                    }
+                    this.setSelectedGroup(null, !initial)
+                    window.ConcreteAlert.dialog(ccmi18n.error, ConcreteAjaxRequest.renderJsonError(r, true))
+                }
+            )
+        },
+        reset() {
+            this.setSelectedGroup(null, true)
+        }
+    }
+}
+</script>

package/assets/cms/components/form/ConcreteLocaleSelect.vue

@@ -0,0 +1,58 @@
+<template>
+    <input :name="name" v-model="selectedValue" />
+</template>
+
+<script>
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect, WebFont */
+export default {
+    data() {
+        return {
+            selectedValue: this.value
+        }
+    },
+    props: {
+        value: {
+        },
+        name: {
+            type: String,
+            required: true
+        },
+        selectedLocale: {
+            required: false
+        },
+        locales: {
+            type: Array,
+            required: true
+        }
+    },
+    watch: {
+    },
+    mounted() {
+        var config = {}
+        config.maxOptions = null
+        config.maxItems = 1
+        config.items = [this.selectedLocale]
+        config.options = this.locales
+        config.valueField = 'id'
+        config.render = {
+            option: function (data, escape) {
+                return `<div><img class="me-2" src="${data.flag}">${data.language.text}</div>`
+            },
+            item: function (item, escape) {
+                return `<div><img class="me-2" src="${item.flag}">${item.language.text}</div>`
+            }
+        }
+        this.$nextTick(() => {
+            const select = new TomSelect(this.$el, config)
+            select.on('change', (option) => {
+                this.selectedValue = option
+            })
+            select.sync()
+        })
+    },
+    methods: {
+
+    }
+}
+</script>

package/assets/cms/components/form/ConcreteOptionSelect.vue

@@ -0,0 +1,92 @@
+<template>
+    <concrete-ajax-select
+        :name="inputName"
+        :access-token="accessToken"
+        :data-source-url="dataSourceUrl"
+        :selected-options-url="selectedOptionsUrl"
+        :value="value"
+        @change="updateSelected"
+        :form-data="formData"
+        :max-items="maxItems"
+        :remove-button="maxItems != 1"
+        :allow-create="true"
+    >
+    </concrete-ajax-select>
+</template>
+
+<script>
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect */
+import ConcreteAjaxSelect from './ConcreteAjaxSelect'
+export default {
+    components: { ConcreteAjaxSelect },
+    prop: ['value'],
+    model: {
+        prop: 'value',
+        event: 'change'
+    },
+    props: {
+        dataSourceUrl: {
+            type: String,
+            required: true
+        },
+        selectedOptionsUrl: {
+            type: String,
+            required: true
+        },
+        allowMultipleValues: {
+            type: Boolean,
+            default: false
+        },
+        attributeKeyId: {
+            type: [String, Number],
+            required: true
+        },
+        accessToken: {
+            type: String,
+            required: true
+        },
+        inputName: {
+            type: String
+        },
+        value: {
+            type: Array,
+            required: false
+        }
+    },
+    computed: {
+        maxItems() {
+            if (this.allowMultipleValues) {
+                return null
+            } else {
+                return 1
+            }
+        },
+        formData() {
+            return {
+                akID: this.attributeKeyId,
+                optionId: this.value
+            }
+        }
+    },
+    data() {
+        return {
+            selectedValue: null
+        }
+    },
+    watch: {
+        entryId: {
+            immediate: true,
+            handler: function(value) {
+                this.selectedValue = value
+            }
+        }
+    },
+    methods: {
+        updateSelected(value) {
+            this.selectedValue = value
+            this.$emit('change', this.selectedValue)
+        }
+    }
+}
+</script>

package/assets/cms/components/form/ConcretePageSelect.vue

@@ -0,0 +1,67 @@
+<template>
+    <concrete-ajax-select
+        :name="inputName"
+        :access-token="accessToken"
+        :data-source-url="dataSourceUrl"
+        :selected-options-url="selectedOptionsUrl"
+        :value="pageId"
+        @change="updateSelected"
+        :form-data="formData"
+    >
+    </concrete-ajax-select>
+</template>
+
+<script>
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect */
+import ConcreteAjaxSelect from './ConcreteAjaxSelect'
+export default {
+    components: { ConcreteAjaxSelect },
+    prop: ['pageId'],
+    model: {
+        prop: 'pageId',
+        event: 'change'
+    },
+    props: {
+        accessToken: {
+            type: String,
+            required: true
+        },
+        inputName: {
+            type: String
+        },
+        pageId: {
+            type: [Number, String, Array],
+            required: false
+        }
+    },
+    computed: {
+        formData() {
+            return {
+                pageId: this.pageId
+            }
+        }
+    },
+    data() {
+        return {
+            dataSourceUrl: CCM_DISPATCHER_FILENAME + '/ccm/system/page/autocomplete',
+            selectedOptionsUrl: CCM_DISPATCHER_FILENAME + '/ccm/system/page/autocomplete/get_selected',
+            selectedPageId: null
+        }
+    },
+    watch: {
+        pageId: {
+            immediate: true,
+            handler: function(pageId) {
+                this.selectedPageId = pageId
+            }
+        }
+    },
+    methods: {
+        updateSelected(value) {
+            this.selectedPageId = value
+            this.$emit('change', this.selectedPageId)
+        }
+    }
+}
+</script>

package/assets/cms/components/form/ConcreteSelect.vue

@@ -0,0 +1,75 @@
+<template>
+    <select :name="name" :multiple="multiple" v-model="selectedValue">
+        <template v-if="hasOptGroups">
+            <optgroup v-for="(optgroupOptions, optgroupLabel) in options" :label="optgroupLabel">
+                <option v-for="(label, value) in optgroupOptions" :value="value">
+                    {{label}}
+                </option>
+            </optgroup>
+        </template>
+        <template v-else>
+            <option v-for="(label, value) in options" :value="value" :key="value">
+                {{label}}
+            </option>
+        </template>
+    </select>
+</template>
+
+<script>
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect */
+export default {
+    data() {
+        return {
+            selectedValue: this.value
+        }
+    },
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+        value: {
+            required: false
+        },
+        multiple: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        options: {
+            type: Object,
+            required: true
+        }
+    },
+    watch: {
+
+    },
+    mounted() {
+        var options = {}
+        options.maxOptions = null
+        if (this.multiple) {
+            options.plugins = {
+                remove_button: {
+
+                }
+            }
+        }
+        this.$nextTick(() => {
+            new TomSelect(this.$el, options)
+        })
+    },
+    computed: {
+        hasOptGroups: function() {
+            if (this.options && Object.keys(this.options).length > 0) {
+                if (typeof (this.options[Object.keys(this.options)[0]]) === 'object') {
+                    return true
+                }
+            }
+            return false
+        }
+    },
+    methods: {
+    }
+}
+</script>

package/assets/cms/components/form/ConcreteThemeColorInput.vue

@@ -1,16 +1,18 @@
 <template>
-    <div class="mb-3 ccm-context-theme">
-        <select :name="inputName" data-select="theme-colors" data-width="100%">
-            <option v-for="color in colorCollection.colors" :selected="selectedColor == color.variable" :data-content="dataContentAttribute(color)" :value="color.variable">{{ color.name }}</option>
+    <div class="ccm-context-theme">
+        <select :name="inputName" v-model="selectedColor">
+            <option v-for="color in colorCollection.colors" :selected="selectedColor == color.variable" :value="color.variable">{{ color.name }}</option>
         </select>
     </div>
 </template>
 
 <script>
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect */
 export default {
     data() {
         return {
-            selectedColor: ''
+            selectedColor: this.color
         }
     },
     props: {
@@ -35,18 +37,21 @@ export default {
         }
     },
     mounted() {
-        if (this.color) {
-            this.selectedColor = this.color
-        }
-
-        var $el = this.$el
-        setTimeout(function() {
-            $($el.querySelector('select[data-select=theme-colors]')).selectpicker()
-        }, 5)
+        var my = this
+        new TomSelect(this.$el.querySelector('select'), {
+            render: {
+                option: function (data, escape) {
+                    return my.dataContentAttribute(data)
+                },
+                item: function (item, escape) {
+                    return my.dataContentAttribute(item)
+                }
+            }
+        })
     },
     methods: {
-        dataContentAttribute: function(color) {
-            return "<span style='background-color: var(--bs-" + color.variable + ")' class='btn me-2 p-2'></span> " + color.name
+        dataContentAttribute: function(item) {
+            return '<div><span style="background-color: var(--bs-' + item.value + ')" class="btn me-2 p-2"></span> ' + item.text + '</div>'
         }
     }
 }

package/assets/cms/components/form/ConcreteUserInput.vue

@@ -1,29 +1,29 @@
 <template>
-    <div class="ccm-item-selector-group">
-        <input type="hidden" :name="inputName" :value="selectedUserID" />
-
-        <div class="ccm-item-selector-choose" v-if="!selectedUser && !isLoading">
-            <button type="button" @click="openChooser" class="btn btn-secondary">
-                {{chooseText}}
-            </button>
-        </div>
+    <div :class="cssClasses">
+        <input type="hidden" :name="inputName" :value="selectedUserID" v-if="inputName !== ''" />
 
         <div v-if="isLoading">
             <div class="btn-group">
                 <div class="btn btn-secondary"><svg class="ccm-loader-dots"><use xlink:href="#icon-loader-circles" /></svg></div>
-                <button type="button" @click="reset" class="ccm-item-selector-reset btn btn-secondary">
+                <button type="button" @click="reset" :disabled="readonly" class="ccm-item-selector-reset btn btn-secondary">
                     <i class="fa fa-times-circle"></i>
                 </button>
             </div>
         </div>
 
-        <div class="ccm-item-selector-loaded" v-if="selectedUser !== null">
+        <div class="ccm-item-selector-choose" v-else-if="!selectedUser">
+            <button type="button" @click="openChooser" :disabled="readonly" class="btn btn-secondary">
+                {{chooseText}}
+            </button>
+        </div>
+
+        <div class="ccm-item-selector-loaded" v-else="selectedUser !== null">
             <div class="btn-group">
-                <div class="btn btn-secondary">
+                <div class="btn btn-secondary" :class="{disabled: readonly}">
                     <span v-html="selectedUser.avatar"></span>
                     <span class="ccm-item-selector-title">{{selectedUser.displayName}}</span>
                 </div>
-                <button type="button" @click="reset" class="ccm-item-selector-reset btn btn-secondary">
+                <button type="button" @click="reset" :disabled="readonly" class="ccm-item-selector-reset btn btn-secondary">
                     <i class="fa fa-times-circle"></i>
                 </button>
             </div>
@@ -35,24 +35,58 @@
 export default {
     data() {
         return {
-            isLoading: false,
+            isLoadingUserID: 0 /* integer */,
             selectedUser: null /* json object */,
             selectedUserID: 0 /* integer */
         }
     },
+    computed: {
+        isLoading() {
+            return this.isLoadingUserID > 0
+        },
+        cssClasses() {
+            let classes = ['ccm-item-selector-group']
+            if (this.cssClass) {
+                classes = [...classes, this.cssClass]
+            }
+            return classes
+        }
+    },
     props: {
+        cssClass: {
+            type: String,
+            default: '',
+            required: false
+        },
         inputName: {
             type: String,
-            required: true
+            default: ''
         },
         userId: {
-            type: Number
+            type: Number,
+            default: 0
         },
         chooseText: {
-            type: String
+            type: String,
+            default: 'Choose a User'
+        },
+        readonly: {
+            type: Boolean,
+            default: false
         }
     },
+    prop: ['userId'],
+    model: {
+        prop: 'userId',
+        event: 'change'
+    },
     watch: {
+        userId: {
+            immediate: true,
+            handler(value) {
+                this.selectedUserID = this.userId
+            }
+        },
         selectedUserID: {
             immediate: true,
             handler(value) {
@@ -66,31 +100,37 @@ export default {
         }
     },
     mounted() {
-        if (this.userId) {
-            this.selectedUserID = this.userId
-        }
     },
     methods: {
         chooseFile: function(selectedUsers) {
             this.selectedUserID = selectedUsers[0]
         },
         openChooser: function() {
-            var my = this
-            window.ConcreteUserManager.launchDialog(function(r) {
-                my.loadUser(r.id)
+            window.ConcreteUserManager.launchDialog((r) => {
+                this.loadUser(r.id)
             })
         },
         loadUser(userId) {
-            var my = this
-            my.isLoading = true
-            window.ConcreteUserManager.getUserDetails(userId, function(r) {
-                my.isLoading = false
-                my.selectedUser = r.users[0]
-                my.selectedUserID = userId
+            userId = parseInt(userId)
+            if (this.isLoadingUserID === userId) {
+                return
+            }
+            this.isLoadingUserID = userId
+            window.ConcreteUserManager.getUserDetails(userId, (r) => {
+                if (this.isLoadingUserID !== userId) {
+                    return
+                }
+                this.selectedUserID = userId
+                this.selectedUser = r.users[0]
+                this.$nextTick(() => {
+                    if (this.isLoadingUserID === userId) {
+                        this.isLoadingUserID = 0
+                    }
+                })
             })
         },
         reset() {
-            this.isLoading = false
+            this.isLoadingUserID = 0
             this.selectedUserID = null
         }
     }