@windward/core 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+### Release [0.18.0] created - 2025-05-21
+
+
 ### Release [0.17.0] created - 2025-05-13
 
 

package/components/Content/Blocks/Accordion.vue

@@ -7,7 +7,13 @@
             "
             class="pa-0"
         >
-            <h2 v-if="block.metadata.config.title" tabindex="0">
+            <h2
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_title
+                "
+                tabindex="0"
+            >
                 {{ block.metadata.config.title }}
             </h2>
 
@@ -164,6 +170,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.items)) {
             const defaultObject = {
                 header: '',

package/components/Content/Blocks/BlockQuote.vue

@@ -7,7 +7,13 @@
             "
         >
             <v-col cols="12" class="pb-0">
-                <h2 v-if="block.metadata.config.title" tabindex="0">
+                <h2
+                    v-if="
+                        block.metadata.config.title &&
+                        block.metadata.config.display_title
+                    "
+                    tabindex="0"
+                >
                     {{ block.metadata.config.title }}
                 </h2>
                 <p
@@ -148,6 +154,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }

package/components/Content/Blocks/ClickableIcons.vue

@@ -1,15 +1,21 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <h2 v-if="block.metadata.config.title" tabindex="0">
+            <h2
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_title
+                "
+                tabindex="0"
+            >
                 {{ block.metadata.config.title }}
             </h2>
             <p
-                v-if="block.metadata.config.description"
+                v-if="block.metadata.config.instructions"
                 tabindex="0"
                 class="pt-3"
             >
-                {{ block.metadata.config.description }}
+                {{ block.metadata.config.instructions }}
             </p>
         </v-container>
         <v-container class="pa-0">
@@ -20,7 +26,7 @@
                 :class="rowClass(itemIndex)"
                 class="pa-0"
             >
-                <v-col cols="12" v-bind="iconColumnAttrs">
+                <v-col cols="8" v-bind="iconColumnAttrs">
                     <button
                         class="mr-1"
                         :class="activatorButtonClass(itemIndex)"
@@ -85,8 +91,8 @@
 import _ from 'lodash'
 import he from 'he'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
-import TextViewer from '~/components/Text/TextViewer'
 import ImageAssetViewer from '~/components/Content/ImageAssetViewer.vue'
+import TextViewer from '~/components/Text/TextViewer'
 
 export default {
     name: 'ClickableIcons',
@@ -95,38 +101,6 @@ export default {
         ImageAssetViewer,
     },
     extends: BaseContentBlock,
-    beforeMount() {
-        // Apply the default config
-        this.block.body = this.$t(
-            'windward.core.shared.content_blocks.title.clickable_icons'
-        )
-        if (_.isEmpty(this.block.metadata.config.items)) {
-            this.block.metadata.config.items = []
-            this.block.metadata.config.description = this.$t(
-                'windward.core.components.settings.clickable_icon.information'
-            )
-        }
-        if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
-        }
-        if (_.isEmpty(this.block.metadata.config.description)) {
-            this.block.metadata.config.description = ''
-        }
-        if (_.isEmpty(this.block.metadata.config.display)) {
-            this.block.metadata.config.display = {
-                show_title: false,
-                show_background: false,
-                round_icon: false,
-                italic_icon: false,
-                autocolor: true,
-            }
-        }
-        if (this.block.metadata.config.items.length) {
-            for (const index in this.block.metadata.config.items) {
-                this.block.metadata.config.items[index].active = false
-            }
-        }
-    },
     data() {
         return {
             saveState: false,
@@ -154,6 +128,9 @@ export default {
                 ) {
                     classes += ' ' + this.itemColor(itemIndex) + ' black--text'
                 }
+                if (window.innerWidth <= 600) {
+                    classes += 'd-flex justify-center '
+                }
                 return classes
             }
         },
@@ -261,6 +238,41 @@ export default {
             }
         },
     },
+    beforeMount() {
+        // Apply the default config
+        this.block.body = this.$t(
+            'windward.core.shared.content_blocks.title.clickable_icons'
+        )
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            this.block.metadata.config.items = []
+            this.block.metadata.config.description = this.$t(
+                'windward.core.components.settings.clickable_icon.information'
+            )
+        }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
+        if (_.isEmpty(this.block.metadata.config.description)) {
+            this.block.metadata.config.description = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.display)) {
+            this.block.metadata.config.display = {
+                show_title: false,
+                show_background: false,
+                round_icon: false,
+                italic_icon: false,
+                autocolor: true,
+            }
+        }
+        if (this.block.metadata.config.items.length) {
+            for (const index in this.block.metadata.config.items) {
+                this.block.metadata.config.items[index].active = false
+            }
+        }
+    },
     methods: {
         isIcon(str) {
             return str && _.isString(str) && str.indexOf('mdi-') === 0
@@ -295,13 +307,17 @@ button.button-icon.button-icon--rounded {
 }
 
 .button-icon--normal {
-    .clickable--icon,
+    .clickable--icon {
+        font-size: 5rem;
+    }
     .clickable--text {
         font-size: 1.5rem;
     }
 }
 .button-icon--large {
-    .clickable--icon,
+    .clickable--icon {
+        font-size: 9rem;
+    }
     .clickable--text {
         font-size: 2.5rem;
     }

package/components/Content/Blocks/Email.vue

@@ -7,7 +7,13 @@
             "
         >
             <v-col cols="12" class="pa-0">
-                <h2 v-if="block.metadata.config.title" tabindex="0">
+                <h2
+                    v-if="
+                        block.metadata.config.title &&
+                        block.metadata.config.display_title
+                    "
+                    tabindex="0"
+                >
                     {{ block.metadata.config.title }}
                 </h2>
                 <p
@@ -21,8 +27,8 @@
         </v-row>
         <v-row>
             <v-expansion-panels
-                v-model="selectedPanels"
                 :key="expansionPanelKey"
+                v-model="selectedPanels"
                 accordion
             >
                 <v-container
@@ -248,6 +254,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }

package/components/Content/Blocks/FileDownload.vue

@@ -1,6 +1,11 @@
 <template>
     <v-container class="pa-0">
-        <h2>
+        <h2
+            v-if="
+                block.metadata.config.title &&
+                block.metadata.config.display_title
+            "
+        >
             {{
                 block.metadata.config.title ||
                 $t(
@@ -125,6 +130,9 @@ export default {
                 'windward.core.components.content.blocks.file_download.default_title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = this.$t(
                 'windward.core.components.content.blocks.file_download.default_instructions'

package/components/Content/Blocks/OpenResponse.vue

@@ -7,7 +7,13 @@
             "
             class="pa-0"
         >
-            <h2 v-if="block.metadata.config.title" tabindex="0">
+            <h2
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_title
+                "
+                tabindex="0"
+            >
                 {{ block.metadata.config.title }}
             </h2>
 
@@ -155,6 +161,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }

package/components/Content/Blocks/ScenarioChoice.vue

@@ -1,15 +1,21 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <h2 v-if="block.metadata.config.title" tabindex="0">
+            <h2
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_title
+                "
+                tabindex="0"
+            >
                 {{ block.metadata.config.title }}
             </h2>
             <p
-                v-if="block.metadata.config.description"
+                v-if="block.metadata.config.instructions"
                 tabindex="0"
                 class="pt-3"
             >
-                {{ block.metadata.config.description }}
+                {{ block.metadata.config.instructions }}
             </p>
             <div
                 v-if="choiceIndex !== null && block.metadata.config.show_reset"
@@ -244,8 +250,11 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
-        if (_.isEmpty(this.block.metadata.config.description)) {
-            this.block.metadata.config.description = ''
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = ''
         }
         if (_.isEmpty(this.block.metadata.config.display_style)) {
             this.block.metadata.config.display_style = 'letter'

package/components/Content/Blocks/Tab.vue

@@ -7,7 +7,13 @@
             "
             class="pa-0"
         >
-            <h2 v-if="block.metadata.config.title" tabindex="0">
+            <h2
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_title
+                "
+                tabindex="0"
+            >
                 {{ block.metadata.config.title }}
             </h2>
 
@@ -116,6 +122,9 @@ export default {
                 }
             })
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.currentTab)) {
             this.block.metadata.config.currentTab = 0
         }
@@ -185,4 +194,8 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.text-viewer {
+    color: var(--v-primary-base);
+}
+</style>

package/components/Content/Blocks/UserUpload.vue

@@ -1,7 +1,13 @@
 <template>
     <v-container class="pa-0">
         <div>
-            <h2 v-if="block.metadata.config.title" tabindex="0">
+            <h2
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_title
+                "
+                tabindex="0"
+            >
                 {{ block.metadata.config.title }}
             </h2>
             <v-row>
@@ -110,6 +116,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }

package/components/Content/Blocks/Video.vue

@@ -1,10 +1,16 @@
 <template>
     <div>
-        <h2 v-if="block.metadata.config.title" tabindex="0">
+        <h2
+            v-if="
+                block.metadata.config.title &&
+                block.metadata.config.display_title
+            "
+            tabindex="0"
+        >
             {{ block.metadata.config.title }}
         </h2>
-        <p v-if="block.metadata.config.description" tabindex="0" class="pt-3">
-            {{ block.metadata.config.description }}
+        <p v-if="block.metadata.config.instructions" tabindex="0" class="pt-3">
+            {{ block.metadata.config.instructions }}
         </p>
 
         <VuetifyPlayer
@@ -309,7 +315,7 @@ export default {
             // Default config settings
             defaultConfig: {
                 title: '',
-                description: '',
+                instructions: '',
                 // Default settings for new blocks
                 // This will be overridden in beforeMount()
                 type: 'auto', // Allowed auto|video|audio. In audio mode the player has a max-height of 40px. Auto will switch between the other types when needed
@@ -393,6 +399,9 @@ export default {
         ) {
             this.block.metadata.config.attributes.playbackrates = [1]
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.assets)) {
             this.$set(this.block, 'assets', [])
         }

package/components/Settings/AccordionSettings.vue

@@ -2,29 +2,10 @@
     <div>
         <v-container class="pa-0">
             <v-row class="pl-3 pr-3">
-                <v-text-field
-                    id="block-settings-title"
-                    v-model="block.metadata.config.title"
-                    :autofocus="true"
-                    :rules="$Validation.getRule('block.title')"
-                    :counter="$Validation.getLimit('block.title')"
-                    outlined
-                    :label="
-                        $t(
-                            'windward.core.components.settings.clickable_icon.title'
-                        )
-                    "
+                <BaseContentBlockSettings
+                    v-model="block.metadata.config"
                     :disabled="render"
-                ></v-text-field>
-                <v-textarea
-                    id="block-settings-instructions"
-                    v-model="block.metadata.config.instructions"
-                    :rules="$Validation.getRule('block.instructions')"
-                    :counter="$Validation.getLimit('block.instructions')"
-                    outlined
-                    :label="$t('components.content.settings.base.instructions')"
-                    :disabled="render"
-                ></v-textarea>
+                ></BaseContentBlockSettings>
             </v-row>
             <v-divider class="my-4 primary"></v-divider>
             <p>
@@ -153,10 +134,11 @@
 import _ from 'lodash'
 import Crypto from '~/helpers/Crypto'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
-import TextEditor from '~/components/Text/TextEditor'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
 import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
+import TextEditor from '~/components/Text/TextEditor'
 
 export default {
     name: 'AccordionSettings',
@@ -164,8 +146,15 @@ export default {
         TextEditor,
         SortableExpansionPanel,
         ImageAssetSettings,
+        BaseContentBlockSettings,
     },
     extends: BaseContentSettings,
+    data() {
+        return {
+            expansionPanelKey: '0',
+            loading: false,
+        }
+    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -179,6 +168,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&
@@ -212,12 +204,6 @@ export default {
             'windward.core.shared.content_blocks.title.accordion'
         )
     },
-    data() {
-        return {
-            expansionPanelKey: '0',
-            loading: false,
-        }
-    },
     beforeDestroy() {
         if (this.debouncer) {
             clearTimeout(this.debouncer)
@@ -251,7 +237,7 @@ export default {
         },
         onUpdatePanel($event) {
             if ($event !== this.block.metadata.config.selectedPanels) {
-                //catch click event to open selected panel to edit
+                // catch click event to open selected panel to edit
                 this.block.metadata.config.selectedPanels = $event
             } else {
                 // if user clicks same panel again expansion panel closes

package/components/Settings/BlockQuoteSettings.vue

@@ -1,27 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                id="block-settings-title"
-                ref="title"
-                v-model="block.metadata.config.title"
-                :autofocus="true"
-                outlined
-                :counter="$Validation.getLimit('block.title')"
-                :rules="$Validation.getRule('block.title')"
-                :label="$t('components.content.settings.base.title')"
-                :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                outlined
-                auto-grow
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                :label="$t('components.content.settings.base.instructions')"
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -121,13 +104,41 @@
 </template>
 <script>
 import _ from 'lodash'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import TextEditor from '~/components/Text/TextEditor.vue'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 
 export default {
     name: 'BlockQuoteSettings',
+    components: { TextEditor, BaseContentBlockSettings },
     extends: BaseContentSettings,
-    components: { TextEditor },
+    data() {
+        return {
+            valid: true,
+            loading: false,
+            sourceTypes: [
+                {
+                    text: this.$t(
+                        'windward.core.components.settings.block_quote.source_types.none'
+                    ),
+                    value: '',
+                },
+
+                {
+                    text: this.$t(
+                        'windward.core.components.settings.block_quote.source_types.book'
+                    ),
+                    value: 'book',
+                },
+                {
+                    text: this.$t(
+                        'windward.core.components.settings.block_quote.source_types.online_journal'
+                    ),
+                    value: 'online_journal',
+                },
+            ],
+        }
+    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -141,6 +152,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }
@@ -159,33 +173,6 @@ export default {
             'windward.core.components.content.blocks.block_quote.body'
         )
     },
-    data() {
-        return {
-            valid: true,
-            loading: false,
-            sourceTypes: [
-                {
-                    text: this.$t(
-                        'windward.core.components.settings.block_quote.source_types.none'
-                    ),
-                    value: '',
-                },
-
-                {
-                    text: this.$t(
-                        'windward.core.components.settings.block_quote.source_types.book'
-                    ),
-                    value: 'book',
-                },
-                {
-                    text: this.$t(
-                        'windward.core.components.settings.block_quote.source_types.online_journal'
-                    ),
-                    value: 'online_journal',
-                },
-            ],
-        }
-    },
     methods: {},
 }
 </script>

package/components/Settings/ClickableIconsSettings.vue

@@ -1,30 +1,14 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-col class="pa-0">
-                <v-text-field
-                    id="block-settings-title"
-                    v-model="block.metadata.config.title"
-                    :autofocus="true"
-                    :rules="$Validation.getRule('block.title')"
-                    :counter="$Validation.getLimit('block.title')"
-                    outlined
-                    :label="
-                        $t(
-                            'windward.core.components.settings.clickable_icon.title'
-                        )
-                    "
+            <v-container class="pa-0">
+                <BaseContentBlockSettings
+                    v-model="block.metadata.config"
                     :disabled="render"
-                ></v-text-field>
-                <v-textarea
-                    id="block-settings-instructions"
-                    v-model="block.metadata.config.description"
-                    :rules="$Validation.getRule('block.instructions')"
-                    :counter="$Validation.getLimit('block.instructions')"
-                    outlined
-                    :label="$t('components.content.settings.base.instructions')"
-                    :disabled="render"
-                ></v-textarea>
+                ></BaseContentBlockSettings>
+            </v-container>
+            <v-container class="pa-0">
+                <v-divider class="my-4 primary"></v-divider>
                 <v-switch
                     v-model="block.metadata.config.display.show_title"
                     :label="
@@ -79,7 +63,7 @@
                     "
                     :disabled="render"
                 ></v-switch>
-            </v-col>
+            </v-container>
             <v-col class="pa-0">
                 <SortableExpansionPanel
                     v-model="block.metadata.config.items"
@@ -238,12 +222,12 @@
 <script>
 import _ from 'lodash'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
-import TextEditor from '~/components/Text/TextEditor'
 import TextIconPicker from '~/components/Core/TextIconPicker.vue'
 import ColorPicker from '~/components/Core/ColorPicker.vue'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
-import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
 import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
+import TextEditor from '~/components/Text/TextEditor'
 
 export default {
     name: 'ClickableIconsSettings',
@@ -252,8 +236,8 @@ export default {
         TextEditor,
         TextIconPicker,
         ColorPicker,
-        ContentBlockAsset,
         ImageAssetSettings,
+        BaseContentBlockSettings,
     },
     extends: BaseContentSettings,
     data() {
@@ -299,6 +283,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.display)) {
             this.block.metadata.config.display = {
                 show_title: false,

package/components/Settings/EmailSettings.vue

@@ -1,25 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                v-model="block.metadata.config.title"
-                :autofocus="true"
-                ref="title"
-                outlined
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                :label="$t('components.content.settings.base.title')"
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                v-model="block.metadata.config.instructions"
-                outlined
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                auto-grow
-                :label="$t('components.content.settings.base.instructions')"
-                :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -160,17 +145,27 @@
 <script>
 import _ from 'lodash'
 import Crypto from '~/helpers/Crypto'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
-import TextEditor from '~/components/Text/TextEditor'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
+import TextEditor from '~/components/Text/TextEditor'
 
 export default {
     name: 'EmailSettings',
     components: {
         SortableExpansionPanel,
         TextEditor,
+        BaseContentBlockSettings,
     },
     extends: BaseContentSettings,
+    data() {
+        return {
+            valid: true,
+            loading: false,
+            expansionPanelKey: 0,
+            editingPanel: 0,
+        }
+    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -184,6 +179,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }
@@ -207,14 +205,6 @@ export default {
             'windward.core.components.content.blocks.email.title'
         )
     },
-    data() {
-        return {
-            valid: true,
-            loading: false,
-            expansionPanelKey: 0,
-            editingPanel: 0,
-        }
-    },
     beforeDestroy() {
         if (this.debouncer) {
             clearTimeout(this.debouncer)
@@ -226,7 +216,7 @@ export default {
     methods: {
         onUpdatePanel($event) {
             if ($event !== this.block.metadata.config.selectedPanels) {
-                //catch click event to open selected panel to edit
+                // catch click event to open selected panel to edit
                 this.block.metadata.config.selectedPanels = $event
             } else {
                 // if user clicks same panel again expansion panel closes

package/components/Settings/FileDownloadSettings.vue

@@ -1,24 +1,11 @@
 <template>
     <div>
-        <v-text-field
-            id="block-settings-title"
-            v-model="block.metadata.config.title"
-            outlined
-            :rules="$Validation.getRule('block.title')"
-            :counter="$Validation.getLimit('block.title')"
-            :autofocus="true"
-            :label="$t('components.content.settings.base.title')"
-            :disabled="render"
-        ></v-text-field>
-        <v-textarea
-            id="block-settings-instructions"
-            v-model="block.metadata.config.instructions"
-            outlined
-            :rules="$Validation.getRule('block.instructions')"
-            :counter="$Validation.getLimit('block.instructions')"
-            :disabled="render"
-            :label="$t('components.content.settings.base.instructions')"
-        ></v-textarea>
+        <v-container class="pa-0">
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
+                :disabled="render"
+            ></BaseContentBlockSettings>
+        </v-container>
         <v-switch
             v-model="block.metadata.config.display_detailed"
             :label="
@@ -91,14 +78,17 @@
 </template>
 <script>
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
-import TextEditor from '~/components/Text/TextEditor'
 import _ from 'lodash'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 
 export default {
     name: 'FileDownloadSettings',
+    components: {
+        SortableExpansionPanel,
+        BaseContentBlockSettings,
+    },
     extends: BaseContentSettings,
-    components: { TextEditor, SortableExpansionPanel },
     data() {
         return {}
     },
@@ -141,6 +131,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }

package/components/Settings/OpenResponseSettings.vue

@@ -1,27 +1,10 @@
 <template>
     <v-container>
-        <v-row class="pl-3 pr-3">
-            <v-text-field
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                :autofocus="true"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                outlined
-                :label="
-                    $t('windward.core.components.settings.clickable_icon.title')
-                "
+        <v-row>
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                outlined
-                :label="$t('components.content.settings.base.instructions')"
-                :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-row>
         <p>
             {{ $t('windward.core.components.settings.open_response.question') }}
@@ -63,17 +46,21 @@
 
 <script>
 import _ from 'lodash'
-import TextEditor from '~/components/Text/TextEditor'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
+import TextEditor from '~/components/Text/TextEditor'
 
 export default {
     name: 'ImageSettings',
+    components: { TextEditor, BaseContentBlockSettings },
     extends: BaseContentSettings,
-    components: { TextEditor },
     props: {
         settings: { type: Object, required: false, default: null },
         context: { type: String, required: false, default: 'block' },
     },
+    data() {
+        return {}
+    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -90,6 +77,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }
@@ -100,10 +90,6 @@ export default {
             this.block.metadata.config.starting_text = ''
         }
     },
-    data() {
-        return {}
-    },
-    watch: {},
     mounted() {},
     methods: {},
 }

package/components/Settings/ScenarioChoiceSettings.vue

@@ -2,28 +2,13 @@
     <div>
         <v-container class="pa-0">
             <v-col class="pa-0">
-                <v-text-field
-                    id="block-settings-title"
-                    v-model="block.metadata.config.title"
-                    :rules="$Validation.getRule('block.title')"
-                    :counter="$Validation.getLimit('block.title')"
-                    outlined
-                    :label="
-                        $t(
-                            'windward.core.components.settings.scenario_choice.title'
-                        )
-                    "
-                    :disabled="render"
-                ></v-text-field>
-                <v-textarea
-                    id="block-settings-instructions"
-                    v-model="block.metadata.config.description"
-                    :rules="$Validation.getRule('block.instructions')"
-                    :counter="$Validation.getLimit('block.instructions')"
-                    outlined
-                    :label="$t('components.content.settings.base.instructions')"
+                <BaseContentBlockSettings
+                    v-model="block.metadata.config"
                     :disabled="render"
-                ></v-textarea>
+                ></BaseContentBlockSettings>
+            </v-col>
+            <v-col class="pa-0">
+                <v-divider class="my-4 primary"></v-divider>
                 <v-select
                     v-model="block.metadata.config.display_style"
                     :items="displayStyles"
@@ -204,12 +189,13 @@
 </template>
 <script>
 import _ from 'lodash'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import { mapGetters } from 'vuex'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
-import TextEditor from '~/components/Text/TextEditor'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import DialogBox from '~/components/Core/DialogBox.vue'
 import Uuid from '~/helpers/Uuid'
+import TextEditor from '~/components/Text/TextEditor'
 
 export default {
     name: 'ScenarioChoiceSettings',
@@ -217,13 +203,9 @@ export default {
         SortableExpansionPanel,
         TextEditor,
         DialogBox,
+        BaseContentBlockSettings,
     },
     extends: BaseContentSettings,
-    computed: {
-        ...mapGetters({
-            contentTree: 'content/getTree',
-        }),
-    },
     data() {
         return {
             isLinked: false,
@@ -255,6 +237,11 @@ export default {
             ],
         }
     },
+    computed: {
+        ...mapGetters({
+            contentTree: 'content/getTree',
+        }),
+    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -273,12 +260,15 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
-            _.isEmpty(this.block.metadata.config.description) &&
+            _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&
             !Uuid.test(this.block.id)
         ) {
-            this.block.metadata.config.description = this.$t(
+            this.block.metadata.config.instructions = this.$t(
                 'windward.core.components.content.blocks.scenario_choice.information'
             )
         }

package/components/Settings/TabSettings.vue

@@ -1,27 +1,10 @@
 <template>
     <div>
         <v-row class="pl-3 pr-3">
-            <v-text-field
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                :autofocus="true"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                outlined
-                :label="
-                    $t('windward.core.components.settings.clickable_icon.title')
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                outlined
-                :label="$t('components.content.settings.base.instructions')"
-                :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-row>
         <v-divider class="my-4 primary"></v-divider>
         <p>{{ $t('windward.core.components.settings.tab.tabs') }}</p>
@@ -130,16 +113,30 @@
 <script>
 import _, { get } from 'lodash'
 import Crypto from '~/helpers/Crypto'
-import TextEditor from '~/components/Text/TextEditor'
 import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
+import TextEditor from '~/components/Text/TextEditor'
 
 export default {
     name: 'TabSettings',
-    components: { TextEditor, ImageAssetSettings, SortableExpansionPanel },
+    components: {
+        TextEditor,
+        ImageAssetSettings,
+        SortableExpansionPanel,
+        BaseContentBlockSettings,
+    },
     extends: BaseContentSettings,
+    data() {
+        return {
+            expansionPanelKey: '0',
+            textEditorUpdateKey: Crypto.id(),
+            valid: true,
+            loading: false,
+        }
+    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -158,6 +155,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&
@@ -188,14 +188,6 @@ export default {
             this.block.metadata.config.items.push(defaultObject)
         }
     },
-    data() {
-        return {
-            expansionPanelKey: '0',
-            textEditorUpdateKey: Crypto.id(),
-            valid: true,
-            loading: false,
-        }
-    },
     mounted() {
         if (this.block.metadata.config.items.length <= 0) {
             this.onAddElement()

package/components/Settings/UserUploadSettings.vue

@@ -1,24 +1,11 @@
 <template>
     <div>
-        <v-text-field
-            id="block-settings-title"
-            v-model="block.metadata.config.title"
-            outlined
-            :rules="$Validation.getRule('block.title')"
-            :counter="$Validation.getLimit('block.title')"
-            :autofocus="true"
-            :label="$t('components.content.settings.base.title')"
-            :disabled="render"
-        ></v-text-field>
-        <v-textarea
-            id="block-settings-instructions"
-            v-model="block.metadata.config.instructions"
-            :rules="$Validation.getRule('block.instructions')"
-            :counter="$Validation.getLimit('block.instructions')"
-            outlined
-            :label="$t('components.content.settings.base.instructions')"
-            :disabled="render"
-        ></v-textarea>
+        <v-container>
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
+                :disabled="render"
+            ></BaseContentBlockSettings>
+        </v-container>
         <v-switch
             v-model="block.metadata.config.uploadSettings.multiple"
             :label="
@@ -45,15 +32,15 @@
 </template>
 <script>
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
-import Crypto from '~/helpers/Crypto'
-import TextEditor from '~/components/Text/TextEditor'
 import _ from 'lodash'
 import Uuid from '~/helpers/Uuid'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
+import TextEditor from '~/components/Text/TextEditor'
 
 export default {
     name: 'UserUploadSettings',
+    components: { TextEditor, BaseContentBlockSettings },
     extends: BaseContentSettings,
-    components: { TextEditor },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -73,6 +60,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&

package/components/Settings/VideoSettings.vue

@@ -2,29 +2,18 @@
     <div>
         <v-row>
             <v-col cols="12">
-                <v-text-field
-                    id="block-settings-title"
-                    v-model="block.metadata.config.title"
-                    :rules="$Validation.getRule('block.title')"
-                    :counter="$Validation.getLimit('block.title')"
-                    outlined
-                    :label="$t('windward.core.components.settings.video.title')"
+                <BaseContentBlockSettings
+                    v-model="block.metadata.config"
                     :disabled="render"
-                ></v-text-field>
-                <v-textarea
-                    id="block-settings-instructions"
-                    v-model="block.metadata.config.description"
-                    outlined
-                    auto-grow
-                    :rules="$Validation.getRule('block.instructions')"
-                    :counter="$Validation.getLimit('block.instructions')"
-                    :label="
+                    :title-label="
+                        $t('windward.core.components.settings.video.title')
+                    "
+                    :instructions-label="
                         $t(
                             'components.content.settings.base.description_optional'
                         )
                     "
-                    :disabled="render"
-                ></v-textarea>
+                ></BaseContentBlockSettings>
 
                 <h4 class="mb-3">
                     {{ $t('windward.core.components.settings.video.sources') }}
@@ -404,11 +393,12 @@ import _ from 'lodash'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
 import SourcePicker from './VideoSettings/SourcePicker.vue'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 
 export default {
     name: 'VideoSettings',
+    components: { ContentBlockAsset, SourcePicker, BaseContentBlockSettings },
     extends: BaseContentSettings,
-    components: { ContentBlockAsset, SourcePicker },
     data() {
         return {
             fileTab: null,
@@ -450,6 +440,9 @@ export default {
             this.onAddPlaylistItem()
             this.playlistPaginator = 1
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
     },
     mounted() {
         this.reloadMedia()

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/core",
-    "version": "0.17.0",
+    "version": "0.18.0",
     "description": "Windward UI Core Plugins",
     "main": "plugin.js",
     "scripts": {

package/test/__mocks__/componentsMock.js

@@ -18,6 +18,7 @@ const shallowMocks = [
     { path: '~/components/Core/UserAvatar' },
     { path: '~/components/Text/TextViewer' },
     { path: '~/components/Text/TextEditor' },
+    { path: '~/components/Content/Settings/BaseContentBlockSettings' },
 ]
 
 for (const index in shallowMocks) {