@concretecms/bedrock 1.0.2 → 1.1.2

package/assets/cms/components/customizer/ThemeCustomizer.vue

@@ -21,16 +21,16 @@
         </div>
 
         <div>
-            <h5>Custom CSS</h5>
+            <h5>{{ i18n.customCSS }}</h5>
             <div class="card mb-4">
                 <div class="list-group list-group-flush">
                     <div class="list-group-item">
                         <div class="form-check form-switch">
                             <input class="form-check-input" type="checkbox" id="addCustomCSS" v-model="addCustomCss">
-                            <label class="form-check-label" for="addCustomCSS">Add Custom CSS</label>
+                            <label class="form-check-label" for="addCustomCSS">{{ i18n.addCustomCSS }}</label>
                         </div>
                         <div v-if="addCustomCss" class="d-grid mt-2">
-                            <button class="btn btn-secondary btn-sm" @click="showCustomCssDialog">Edit CSS</button>
+                            <button class="btn btn-secondary btn-sm" @click="showCustomCssDialog">{{ i18n.editCSS }}</button>
                         </div>
                     </div>
                 </div>
@@ -41,13 +41,13 @@
             <div data-dialog="save-theme-customizer-changes">
 
                 <div class="form-group">
-                    <label class="form-label" for="newSkinName">Skin Name</label>
+                    <label class="form-label" for="newSkinName">{{ i18n.skinName }}</label>
                     <input type="text" :class='{"form-control": true, "is-invalid": invalidSkinName}' name="newSkinName"
                            id="newSkinName" v-model="newSkinName">
                 </div>
 
                 <div class="dialog-buttons">
-                    <button class="btn btn-primary float-end" @click="createNewSkin" type="button">Create</button>
+                    <button class="btn btn-primary float-end" @click="createNewSkin" type="button">{{ i18n.create }}</button>
                 </div>
 
             </div>
@@ -57,21 +57,21 @@
             <div data-dialog="save-theme-customizer-styles">
 
                 <div class="form-group">
-                    <p>Apply customizations to:</p>
+                    <p>{{ i18n.applyCustomizations }}</p>
 
                     <div class="form-check">
                         <input class="form-check-input" type="radio" id="applyToThisPage" v-model="applyTo" value="page">
-                        <label class="form-check-label" for="applyToThisPage">This Page</label>
+                        <label class="form-check-label" for="applyToThisPage">{{ i18n.thisPage }}</label>
                     </div>
                     <div class="form-check">
                         <input class="form-check-input" type="radio" id="applyToEntireSite" v-model="applyTo" value="site">
-                        <label class="form-check-label" for="applyToEntireSite">Entire Site</label>
+                        <label class="form-check-label" for="applyToEntireSite">{{ i18n.entireSite }}</label>
                     </div>
 
                 </div>
 
                 <div class="dialog-buttons">
-                    <button class="btn btn-primary float-end" @click="saveStyles" type="button">Confirm</button>
+                    <button class="btn btn-primary float-end" @click="saveStyles" type="button">{{ i18n.confirm }}</button>
                 </div>
 
             </div>
@@ -80,10 +80,10 @@
         <div class="d-none">
             <div data-dialog="delete-theme-customizer-skin">
 
-                <p>Are you sure you want to delete this custom skin? This cannot be undone.</p>
+                <p>{{ i18n.confirmSkinDeletion }}</p>
 
                 <div class="dialog-buttons">
-                    <button class="btn btn-primary float-end" @click="deleteSkin" type="button">Delete</button>
+                    <button class="btn btn-primary float-end" @click="deleteSkin" type="button">{{ i18n.delete }}</button>
                 </div>
 
             </div>
@@ -195,7 +195,7 @@ export default {
                 modal: true,
                 width: '800px',
                 height: '70%',
-                title: 'Custom CSS',
+                title: my.i18n.customCSS,
                 onOpen: function() {
                     var editor = ace.edit('theme-customizer-custom-css-editor')
                     editor.setTheme('ace/theme/eclipse')
@@ -254,6 +254,20 @@ export default {
     },
     data: function () {
         return {
+            i18n: {
+                addCustomCSS: 'Add Custom CSS',
+                editCSS: 'Edit CSS',
+                skinName: 'Skin Name',
+                create: 'Create',
+                applyCustomizations: 'Apply customizations to:',
+                thisPage: 'This Page',
+                entireSite: 'Entire Site',
+                confirm: 'Confirm',
+                confirmSkinDeletion: 'Are you sure you want to delete this custom skin? This cannot be undone.',
+                delete: 'Delete',
+                customCSS: 'Custom CSS',
+                save: 'Save'
+            },
             invalidSkinName: false,
             newSkinName: '',
             addCustomCss: false,
@@ -263,6 +277,13 @@ export default {
         }
     },
     mounted() {
+        if (window.ccmi18n_styleCustomizer) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_styleCustomizer[key]) {
+                    this.i18n[key] = window.ccmi18n_styleCustomizer[key]
+                }
+            }
+        }
         if (this.customCss) {
             this.addCustomCss = true
             this.customizerCustomCss = this.customCss
@@ -295,7 +316,7 @@ export default {
                 element: 'div[data-dialog=delete-theme-customizer-skin]',
                 modal: true,
                 width: '400',
-                title: 'Save',
+                title: my.i18n.save,
                 height: 'auto'
             })
         })
@@ -305,7 +326,7 @@ export default {
                 element: 'div[data-dialog=save-theme-customizer-changes]',
                 modal: true,
                 width: '400',
-                title: 'Save',
+                title: my.i18n.save,
                 height: 'auto'
             })
         })
@@ -315,7 +336,7 @@ export default {
                 element: 'div[data-dialog=save-theme-customizer-styles]',
                 modal: true,
                 width: '400',
-                title: 'Save',
+                title: my.i18n.save,
                 height: 'auto'
             })
         })

package/assets/cms/components/customizer/ThemeCustomizerPreview.vue

@@ -7,7 +7,7 @@
         <div v-if="loadingPreview">
             <div class="text-center mt-5 display-4 text-secondary">
                 <i class="fa fa-cog fa-spin"></i>
-                Loading...
+                {{ i18n.loading }}
             </div>
         </div>
     </div>
@@ -22,11 +22,21 @@ export default {
     },
     data: function () {
         return {
+            i18n: {
+                loading: 'Loading...'
+            },
             loadingPreview: true
         }
     },
     mounted() {
         var my = this
+        if (window.ccmi18n_styleCustomizer) {
+            for (const key in my.i18n) {
+                if (window.ccmi18n_styleCustomizer[key]) {
+                    my.i18n[key] = window.ccmi18n_styleCustomizer[key]
+                }
+            }
+        }
         $('iframe[name=ccm-theme-preview-frame]').on('load', function() {
             my.loadingPreview = false
         })

package/assets/cms/components/customizer/TypePageCustomizerWidget.vue

@@ -5,7 +5,7 @@
         </template>
         <template v-slot:content>
             <div class="mb-2">
-                <label class="form-label">Font Family</label>
+                <label class="form-label">{{ i18n.fontFamily }}</label>
                 <div class="d-flex">
                     <font-family-page-customizer-widget @update="componentUpdated" v-if="fontFamilySubTypeValue" :style-value="fontFamilySubTypeValue"></font-family-page-customizer-widget>
                     <div class="ms-1 d-flex align-items-center" v-if="colorSubTypeValue">
@@ -14,23 +14,23 @@
                 </div>
             </div>
             <div class="mb-2" v-if="fontSizeSubTypeValue">
-                <label class="form-label">Size</label>
+                <label class="form-label">{{ i18n.fontSize }}</label>
                 <size-page-customizer-widget @update="componentUpdated" :style-value="fontSizeSubTypeValue"></size-page-customizer-widget>
             </div>
             <div class="mb-2" v-if="fontWeightSubTypeValue">
-                <label class="form-label">Font Weight</label>
+                <label class="form-label">{{ i18n.fontWeight }}</label>
                 <font-weight-page-customizer-widget @update="componentUpdated" :style-value="fontWeightSubTypeValue"></font-weight-page-customizer-widget>
             </div>
             <div class="mb-2" v-if="fontStyleSubTypeValue">
-                <label class="form-label">Font Style</label>
+                <label class="form-label">{{ i18n.fontStyle }}</label>
                 <font-style-page-customizer-widget @update="componentUpdated" :style-value="fontStyleSubTypeValue"></font-style-page-customizer-widget>
             </div>
             <div class="mb-2" v-if="textDecorationSubTypeValue">
-                <label class="form-label">Text Decoration</label>
+                <label class="form-label">{{ i18n.textDecoration }}</label>
                 <text-decoration-page-customizer-widget @update="componentUpdated" :style-value="textDecorationSubTypeValue"></text-decoration-page-customizer-widget>
             </div>
             <div class="mb-2" v-if="textTransformSubTypeValue">
-                <label class="form-label">Text Transform</label>
+                <label class="form-label">{{ i18n.textTransform }}</label>
                 <text-transform-page-customizer-widget @update="componentUpdated" :style-value="textTransformSubTypeValue"></text-transform-page-customizer-widget>
             </div>
         </template>
@@ -60,6 +60,14 @@ export default {
     },
     data() {
         return {
+            i18n: {
+                fontFamily: 'Font Family',
+                fontSize: 'Size',
+                fontWeight: 'Font Weight',
+                fontStyle: 'Font Style',
+                textDecoration: 'Text Decoration',
+                textTransform: 'Text Transform'
+            },
             fontFamilySubTypeValue: null,
             colorSubTypeValue: null,
             fontSizeSubTypeValue: null,
@@ -76,6 +84,13 @@ export default {
     },
     mounted() {
         var my = this
+        if (window.ccmi18n_styleCustomizer) {
+            for (const key in my.i18n) {
+                if (window.ccmi18n_styleCustomizer[key]) {
+                    my.i18n[key] = window.ccmi18n_styleCustomizer[key]
+                }
+            }
+        }
         this.styleValue.value.values.forEach(function(styleValue) {
             if (styleValue.style.type === 'color') {
                 my.colorSubTypeValue = styleValue

package/assets/cms/components/express/Selector.vue

@@ -5,7 +5,7 @@
         <form @submit.prevent="getExpressEntries">
           <div class="ccm-header-search-form-input input-group">
             <!--suppress HtmlFormInputWithoutLabel -->
-            <input type="text" class="form-control border-end-0" placeholder="Search" autocomplete="false"
+            <input type="text" class="form-control border-end-0" :placeholder="i18n.search" autocomplete="false"
                    v-model="keywords">
 
             <button type="submit" class="input-group-icon">
@@ -30,16 +30,16 @@
               <th></th>
               <th :class="getSortColumnClassName('e.exEntryDateCreated')">
                 <a href="#" @click.prevent="sortBy('exEntryDateCreated')">
-                  Date Added
+                  {{ i18n.dateAdded }}
                 </a>
               </th>
               <th :class="getSortColumnClassName('e.exEntryDateModified')">
                 <a href="#" @click.prevent="sortBy('e.exEntryDateModified')">
-                  Date Modified
+                  {{ i18n.dateModified }}
                 </a>
               </th>
               <th>
-                <span>Name</span>
+                <span>{{ i18n.name }}</span>
               </th>
             </tr>
             </thead>
@@ -67,11 +67,11 @@
 
     <div class="dialog-buttons">
       <button class="btn btn-secondary" data-dialog-action="cancel">
-        Cancel
+        {{ i18n.cancel }}
       </button>
 
       <button type="button" @click="selectEntry" :disabled="selectedEntry === null" class="btn btn-primary">
-        Select
+        {{ i18n.select }}
       </button>
     </div>
   </div>
@@ -95,6 +95,14 @@ export default {
     }
   },
   data: () => ({
+    i18n: {
+      search: 'Search',
+      dateAdded: 'Date Added',
+      dateModified: 'Date Modified',
+      name: 'Name',
+      cancel: 'Cancel',
+      select: 'Select'
+    },
     keywords: '',
     selectedEntry: null,
     currentPage: 1,
@@ -210,6 +218,13 @@ export default {
     }
   },
   mounted() {
+    if (window.ccmi18n_express) {
+      for (const key in this.i18n) {
+        if (window.ccmi18n_express[key]) {
+          this.i18n[key] = window.ccmi18n_express[key]
+        }
+      }
+    }
     this.getExpressEntries()
   }
 }

package/assets/cms/components/file-manager/Chooser/ExternalFileProvider.vue

@@ -12,7 +12,7 @@
               </option>
             </select>
 
-            <input type="text" class="form-control border-end-0" placeholder="Search" autocomplete="false"
+            <input type="text" class="form-control border-end-0" :placeholder="i18n.search" autocomplete="false"
                    v-model="searchText">
             <button type="submit" class="input-group-icon">
               <svg width="16" height="16">
@@ -27,7 +27,7 @@
             <span class="search-icon my-4">
                 <Icon icon="search" type="fas" color="#f4f4f4"/>
             </span>
-      <p><b>Let's get some info on what you're looking for.</b></p>
+      <p><b>{{ i18n.initialExternalFileProviderChooserTip }}</b></p>
     </div>
     <div>
       <files v-if="keywords"
@@ -66,6 +66,10 @@ export default {
     ConcreteFileDirectoryInput
   },
   data: () => ({
+    i18n: {
+      search: 'Search',
+      initialExternalFileProviderChooserTip: "Let's get some info on what you're looking for."
+    },
     uploadDirectoryId: 0,
     fileTypes: [],
     searchText: '',
@@ -121,6 +125,13 @@ export default {
     }
   },
   mounted() {
+    if (window.ccmi18n_filemanager) {
+      for (const key in this.i18n) {
+        if (window.ccmi18n_filemanager[key]) {
+          this.i18n[key] = window.ccmi18n_filemanager[key]
+        }
+      }
+    }
     this.formFactor = this.resultsFormFactor
     this.getFileTypes()
     this.$refs.folderSelector.selectedDirectoryID = this.extraData.uploadDirectoryId

package/assets/cms/components/file-manager/Chooser/FileManager.vue

@@ -1,92 +1,95 @@
 <template>
-  <div>
-    <chooser-header :resultsFormFactor.sync="formFactor"
-                    :breadcrumb-items="breadcrumbItems"
-                    @breadcrumbItemClick="activeFolder = $event.folderId"
-                    :title="title"/>
+    <div>
+        <chooser-header :resultsFormFactor.sync="formFactor"
+                        :breadcrumb-items="breadcrumbItems"
+                        @breadcrumbItemClick="activeFolder = $event.folderId"
+                        :title="title"/>
 
-    <files :selectedFiles.sync="selectedFiles"
-           :resultsFormFactor="formFactor"
-           :routePath="routePath + activeFolder"
-           :enable-pagination="true"
-           :enable-sort="true"
-           :multipleSelection="multipleSelection"
-           @folderClick="activeFolder = $event"/>
-  </div>
+        <files :selectedFiles.sync="selectedFiles"
+               :resultsFormFactor="formFactor"
+               :routePath="routePath + activeFolder"
+               :enable-pagination="true"
+               :enable-sort="true"
+               :filters="filters"
+               :multipleSelection="multipleSelection"
+               @folderClick="activeFolder = $event"/>
+    </div>
 </template>
 
 <script>
 /* global CCM_DISPATCHER_FILENAME, ConcreteAjaxRequest */
-/* eslint indent: [2, 2, {"SwitchCase": 1}] */
 /* eslint-disable no-new */
 import ChooserHeader from './Header'
 import Files from './Files'
 
 export default {
-  components: {
-    ChooserHeader,
-    Files
-  },
-  data: () => ({
-    activeFolder: '',
-    selectedFiles: [],
-    breadcrumbItems: [],
-    routePath: '/ccm/system/file/chooser/get_folder_files/',
-    formFactor: 'grid'
-  }),
-  props: {
-    resultsFormFactor: {
-      type: String,
-      required: false,
-      default: 'grid', // grid | list
-      validator: value => ['grid', 'list'].indexOf(value) !== -1
+    components: {
+        ChooserHeader,
+        Files
     },
-    startFolder: {
-      type: String,
-      required: true
+    data: () => ({
+        activeFolder: '',
+        selectedFiles: [],
+        breadcrumbItems: [],
+        routePath: '/ccm/system/file/chooser/get_folder_files/',
+        formFactor: 'grid'
+    }),
+    props: {
+        resultsFormFactor: {
+            type: String,
+            required: false,
+            default: 'grid', // grid | list
+            validator: value => ['grid', 'list'].indexOf(value) !== -1
+        },
+        startFolder: {
+            type: String,
+            required: true
+        },
+        title: {
+            type: String,
+            required: true
+        },
+        multipleSelection: {
+            type: Boolean,
+            default: true
+        },
+        filters: {
+            type: Array
+        }
     },
-    title: {
-      type: String,
-      required: true
+    created() {
+        this.activeFolder = this.$props.startFolder
+        this.fetchBreadcrumb(this.activeFolder)
     },
-    multipleSelection: {
-      type: Boolean,
-      default: true
-    }
-  },
-  created() {
-    this.activeFolder = this.$props.startFolder
-    this.fetchBreadcrumb(this.activeFolder)
-  },
-  methods: {
-    fetchBreadcrumb(folderId = '') {
-      new ConcreteAjaxRequest({
-        url: `${CCM_DISPATCHER_FILENAME}/ccm/system/file/chooser/get_breadcrumb/${folderId}`,
-        success: r => {
-          this.breadcrumbItems = r.data
+    methods: {
+        fetchBreadcrumb(folderId = '') {
+            new ConcreteAjaxRequest({
+                url: `${CCM_DISPATCHER_FILENAME}/ccm/system/file/chooser/get_breadcrumb/${folderId}`,
+                success: r => {
+                    this.breadcrumbItems = r.data
+                }
+            })
         }
-      })
-    }
-  },
-  watch: {
-    activeFolder(value) {
-      this.fetchBreadcrumb(value)
     },
-    selectedFiles(value) {
-      this.$emit('update:selectedFiles', value)
-    },
-    formFactor(value) {
-      this.$emit('update:resultsFormFactor', value)
+    watch: {
+        activeFolder(value) {
+            this.fetchBreadcrumb(value)
+        },
+        selectedFiles(value) {
+            this.$emit('update:selectedFiles', value)
+        },
+        formFactor(value) {
+            this.$emit('update:resultsFormFactor', value)
+        },
+        startFolder(value) {
+            this.activeFolder = value
+            this.fetchBreadcrumb(value)
+        }
     },
-    startFolder(value) {
-      this.activeFolder = value
-      this.fetchBreadcrumb(value)
+    mounted() {
+        this.formFactor = this.resultsFormFactor
+        this.activeFolder = this.$props.startFolder
+        this.fetchBreadcrumb(this.activeFolder)
     }
-  },
-  mounted() {
-    this.formFactor = this.resultsFormFactor
-    this.activeFolder = this.$props.startFolder
-    this.fetchBreadcrumb(this.activeFolder)
-  }
 }
 </script>

package/assets/cms/components/file-manager/Chooser/FileSets.vue

@@ -4,25 +4,26 @@
 
         <div class="form-group row row-cols-auto g-0 align-items-center justify-content-end">
             <div class="col-auto">
-                <label for="fileSetSelector" class="me-2">File Set</label>
+                <label for="fileSetSelector" class="me-2">{{ i18n.fileSet }}</label>
             </div>
             <div class="col-auto">
                 <select id="fileSetSelector" class="form-select file-set-menu" v-model="activeSet">
-                    <option value="" selected>Select a Set</option>
+                    <option value="" selected>{{ i18n.selectFileSet }}</option>
                     <option v-for="set in sets" :key="set.id" :value="set.id">
-                        {{set.name}}
+                        {{ set.name }}
                     </option>
                 </select>
             </div>
         </div>
         <div class="mt-3" v-show="activeSet">
             <files v-if="activeSet"
-                :selectedFiles.sync="selectedFiles"
-                :resultsFormFactor="formFactor"
-                :routePath="routePath + activeSet"
-                :enable-pagination="true"
-                :enable-sort="true"
-                :multipleSelection="multipleSelection"/>
+                   :selectedFiles.sync="selectedFiles"
+                   :resultsFormFactor="formFactor"
+                   :routePath="routePath + activeSet"
+                   :enable-pagination="true"
+                   :enable-sort="true"
+                   :filters="filters"
+                   :multipleSelection="multipleSelection"/>
         </div>
     </div>
 </template>
@@ -45,6 +46,10 @@ export default {
         Files
     },
     data: () => ({
+        i18n: {
+            fileSet: 'File Set',
+            selectFileSet: 'Select a Set'
+        },
         sets: [],
         activeSet: '',
         selectedFiles: [],
@@ -65,6 +70,9 @@ export default {
         multipleSelection: {
             type: Boolean,
             default: true
+        },
+        filters: {
+            type: Array
         }
     },
     methods: {
@@ -86,6 +94,13 @@ export default {
         }
     },
     mounted() {
+        if (window.ccmi18n_filemanager) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_filemanager[key]) {
+                    this.i18n[key] = window.ccmi18n_filemanager[key]
+                }
+            }
+        }
         this.formFactor = this.resultsFormFactor
 
         this.getSets()

package/assets/cms/components/file-manager/Chooser/FileUpload.vue

@@ -2,7 +2,9 @@
     <div>
         <chooser-header :show-form-factor-selector="false" :title="title"/>
 
-        <uploader/>
+        <uploader
+            @upload-complete="$emit('upload-complete')"
+        />
     </div>
 </template>