@concretecms/bedrock 1.3.7 → 1.4.1

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,5 +1,5 @@
 <template>
-    <div class="ccm-item-selector-group">
+    <div :class="cssClasses">
         <input type="hidden" :name="inputName" :value="selectedUserID" v-if="inputName !== ''" />
 
         <div v-if="isLoading">
@@ -43,9 +43,21 @@ export default {
     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,
             default: ''
@@ -63,7 +75,18 @@ export default {
             default: false
         }
     },
+    prop: ['userId'],
+    model: {
+        prop: 'userId',
+        event: 'change'
+    },
     watch: {
+        userId: {
+            immediate: true,
+            handler(value) {
+                this.selectedUserID = this.userId
+            }
+        },
         selectedUserID: {
             immediate: true,
             handler(value) {
@@ -77,9 +100,6 @@ export default {
         }
     },
     mounted() {
-        if (this.userId) {
-            this.selectedUserID = this.userId
-        }
     },
     methods: {
         chooseFile: function(selectedUsers) {

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

@@ -0,0 +1,126 @@
+<template>
+    <concrete-ajax-select
+        :name="inputName"
+        :access-token="accessToken"
+        :css-classes="['ccm-form-select-user']"
+        :data-source-url="dataSourceUrl"
+        :selected-options-url="selectedOptionsUrl"
+        :value="userId"
+        @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: ['userId'],
+    model: {
+        prop: 'userId',
+        event: 'change'
+    },
+    props: {
+        includeAvatar: {
+            type: Boolean,
+            default: false
+        },
+        labelFormat: {
+            type: String,
+            default: 'auto'
+        },
+        accessToken: {
+            type: String,
+            required: true
+        },
+        inputName: {
+            type: String
+        },
+        userId: {
+            type: [Number, String, Array],
+            required: false
+        }
+    },
+    computed: {
+        formData() {
+            return {
+                labelFormat: this.labelFormat,
+                includeAvatar: this.includeAvatar,
+                userId: this.userId
+            }
+        }
+    },
+    data() {
+        return {
+            dataSourceUrl: CCM_DISPATCHER_FILENAME + '/ccm/system/user/autocomplete',
+            selectedOptionsUrl: CCM_DISPATCHER_FILENAME + '/ccm/system/user/autocomplete/get_selected',
+            selectedUserId: null
+        }
+    },
+    watch: {
+        userId: {
+            immediate: true,
+            handler: function(userId) {
+                this.selectedUserId = userId
+            }
+        }
+    },
+    methods: {
+        updateSelected(value) {
+            this.selectedUserId = value
+            this.$emit('change', this.selectedUserId)
+        },
+        renderOption(item) {
+            var option = '<div>'
+
+            if (item.avatar) {
+                option += `<div class="ccm-form-select-user-avatar">
+                                <img src="${item.avatar}"/>
+                           </div>`
+            }
+
+            option += '<div>'
+            option += `<div class="ccm-form-select-user-label-primary">
+                            ${escape(item.primary_label)}
+                       </div>`
+
+            if (item.secondary_label) {
+                option += `<div class="ccm-form-select-user-label-secondary text-secondary">
+                               ${escape(item.secondary_label)}
+                           </div>`
+            }
+
+            option += '</div>'
+            option += '</div>'
+            return option
+        }
+    }
+}
+</script>
+<style lang="scss">
+.ccm-form-select-user {
+  .item,
+  .option {
+    align-items: center;
+    display: flex;
+  }
+
+  .ccm-form-select-user-label-secondary {
+    font-size: 0.8rem;
+  }
+
+  .ccm-form-select-user-avatar {
+    flex: 0 0 20px; // Ensure this is at least 30px wide
+    margin-right: 12px;
+
+    img {
+      border-radius: 50%;
+      height: auto;
+      max-width: 100%;
+    }
+  }
+}
+</style>

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

@@ -1,10 +1,12 @@
 <template>
-    <select class="form-control" :name="name" :title="title" v-model="selectedOption" ref="iconSelector">
-        <option v-for="icon in icons" :value="icon.value" :data-icon="icon.value + ' fa-fw'">{{ icon.label }}</option>
+    <select :name="name" :title="title" v-model="selectedOption" ref="iconSelector">
+        <option v-for="icon in icons" :value="icon.value">{{ icon.label }}</option>
     </select>
 </template>
 
 <script>
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect */
 import { icons } from '../iconlist'
 
 // Export our component definition
@@ -58,9 +60,16 @@ export default {
         }
     },
     mounted() {
-        $(this.$refs.iconSelector).selectpicker({
-            liveSearch: true,
-            width: 'fit'
+        new TomSelect(this.$el, {
+            maxOptions: null,
+            render: {
+                option: function (data, escape) {
+                    return '<div class="d-flex align-items-center"><span class="d-flex align-items-center justify-content-center me-2" style="width: 32px"><i class="' + data.value + '"></i></span><span>' + data.text + '</span></div>'
+                },
+                item: function (item, escape) {
+                    return '<div class="d-flex  align-items-center"><span class="d-flex align-items-center justify-content-center me-2" style="width: 32px"><i class="' + item.value + '"></i></span><span>' + item.text + '</span></div>'
+                }
+            }
         })
     }
 }

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

@@ -1,26 +1,56 @@
 <template>
+  <div class="password-widget">
     <div class="input-group">
-        <input
-            class="form-control"
-            autocomplete="off"
-            value=""
-            :name="name"
-            :id="name"
-            :type="inputType"
-        />
-        <button v-if="toggler" type="button" class="input-group-icon" @click="toggle()">
-            <i :class="`fas fa-${iconName}`" aria-hidden="true"></i>
-        </button>
+      <input
+        class="form-control"
+        autocomplete="off"
+        value=""
+        :name="name"
+        :id="name"
+        :type="inputType"
+        v-model="enteredPassword"
+      />
+      <button
+        v-if="toggler"
+        type="button"
+        class="input-group-icon"
+        @click="passwordVisible = !passwordVisible"
+      >
+        <i aria-hidden="true" class="fas" :class="iconClasses"></i>
+      </button>
     </div>
+
+    <ul
+      v-if="strengthMeter"
+      class="d-flex align-items-center mt-2 password-strength-meter"
+    >
+      <li
+        v-for="bar in bars"
+        class="flex-grow-1 rounded h-100 me-2 bg-light bar"
+        :class="strength.id >= bar.id ? 'active' : ''"
+        :title="bar.value"
+      ></li>
+    </ul>
+  </div>
 </template>
 
 <script>
+import { passwordStrength } from 'check-password-strength'
+
 export default {
-    data() {
+    data: () => {
         return {
+            i18n: {
+                invalid: 'Invalid',
+                tooWeak: 'Too Weak',
+                weak: 'Weak',
+                medium: 'Medium',
+                strong: 'Strong',
+                veryStrong: 'Very Strong'
+            },
+            enteredPassword: '',
             passwordVisible: false,
-            inputType: 'password',
-            iconName: 'eye'
+            passwordStrengthOptions: []
         }
     },
     props: {
@@ -30,20 +60,107 @@ export default {
         toggler: {
             type: Boolean,
             default: true
+        },
+        strengthMeter: {
+            type: Boolean,
+            default: false
         }
     },
-    methods: {
-        toggle() {
-            this.passwordVisible = !this.passwordVisible
-
-            if (this.passwordVisible === true) {
-                this.inputType = 'text'
-                this.iconName = 'eye-slash'
-            } else {
-                this.inputType = 'password'
-                this.iconName = 'eye'
+    computed: {
+        inputType() {
+            return this.passwordVisible ? 'text' : 'password'
+        },
+        iconClasses() {
+            return {
+                'fa-eye': !this.passwordVisible,
+                'fa-eye-slash': this.passwordVisible
             }
+        },
+        strength() {
+            return passwordStrength(
+                this.enteredPassword,
+                this.passwordStrengthOptions
+            )
+        },
+        bars() {
+            return this.passwordStrengthOptions.filter(
+                (option) => option.id >= 0
+            )
         }
+    },
+    mounted() {
+        if (window.ccmi18n_passwordInput) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_passwordInput[key]) {
+                    this.i18n[key] = window.ccmi18n_passwordInput[key]
+                }
+            }
+        }
+
+        this.passwordStrengthOptions = [
+            {
+                id: -1,
+                value: this.i18n.invalid, // concretecms requirement: min 5 character
+                minDiversity: 0,
+                minLength: 0
+            },
+            {
+                id: 0,
+                value: this.i18n.tooWeak,
+                minDiversity: 1,
+                minLength: 5
+            },
+            {
+                id: 1,
+                value: this.i18n.weak,
+                minDiversity: 2,
+                minLength: 6
+            },
+            {
+                id: 2,
+                value: this.i18n.medium,
+                minDiversity: 4,
+                minLength: 8
+            },
+            {
+                id: 3,
+                value: this.i18n.strong,
+                minDiversity: 4,
+                minLength: 12
+            },
+            {
+                id: 4,
+                value: this.i18n.veryStrong,
+                minDiversity: 4,
+                minLength: 16
+            }
+        ]
     }
 }
 </script>
+
+<style lang="scss" scoped>
+* {
+  --var-active-color: #b8d935;
+}
+
+.password-strength-meter {
+  height: 3px;
+  list-style: none;
+  padding: 0;
+
+  .bar {
+    box-shadow: 0 0 0 0 var(--var-active-color) inset;
+    cursor: help;
+    transition: all ease-in 200ms;
+
+    &.active {
+      box-shadow: 1000px 0 0 0 var(--var-active-color) inset;
+    }
+
+    &:last-child {
+      margin-right: 0 !important;
+    }
+  }
+}
+</style>