@windward/core 0.5.2 → 0.7.0

package/components/Settings/FileDownloadSettings.vue

@@ -4,17 +4,19 @@
             v-model="block.metadata.config.title"
             outlined
             :counter="50"
+            :rules="validation.shortInputRules"
             :autofocus="true"
-            :label="$t('components.content.settings.base.title_optional')"
+            :label="$t('components.content.settings.base.title')"
             :disabled="render"
         ></v-text-field>
-        <TextEditor
+        <v-textarea
             v-model="block.metadata.config.instructions"
+            outlined
+            :counter="255"
+            :rules="validation.instructionRule"
             :disabled="render"
-            :label="
-                $t('components.content.settings.base.instructions_optional')
-            "
-        />
+            :label="$t('components.content.settings.base.instructions')"
+        ></v-textarea>
         <v-switch
             v-model="block.metadata.config.display_detailed"
             :label="
@@ -37,6 +39,8 @@
                     <v-text-field
                         v-model="block.metadata.config.items[index].name"
                         :autofocus="true"
+                        :counter="50"
+                        :rules="validation.shortInputRules"
                         outlined
                         :label="
                             $t(
@@ -94,7 +98,34 @@ export default {
     extends: BaseContentSettings,
     components: { TextEditor, SortableExpansionPanel },
     data() {
-        return {}
+        return {
+            validation: {
+                shortInputRules: [
+                    (v) => {
+                        if (v && v.length >= 50) {
+                            return this.$t(
+                                'windward.core.shared.settings.errors.input_limitations',
+                                [50]
+                            )
+                        } else {
+                            return true
+                        }
+                    },
+                ],
+                instructionRule: [
+                    (v) => {
+                        if (v && v.length >= 255) {
+                            return this.$t(
+                                'windward.core.shared.settings.errors.input_limitations',
+                                [255]
+                            )
+                        } else {
+                            return true
+                        }
+                    },
+                ],
+            },
+        }
     },
     computed: {
         filename() {

package/components/Settings/HorizontalRuleSettings.vue

@@ -28,9 +28,6 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
-        if (_.isEmpty(this.block.metadata.config)) {
-            this.block.metadata.config = {}
-        }
         if (!_.isBoolean(this.block.metadata.config.dashed)) {
             this.block.metadata.config.dashed = false
         }

package/components/Settings/ScenarioChoiceSettings.vue

@@ -4,6 +4,9 @@
             <v-col class="pa-0">
                 <v-text-field
                     v-model="block.metadata.config.title"
+                    :rules="validation.shortInputRules"
+                    :counter="50"
+                    outlined
                     id="title"
                     :label="
                         $t(
@@ -12,16 +15,15 @@
                     "
                     :disabled="render"
                 ></v-text-field>
-                <v-text-field
+                <v-textarea
                     v-model="block.metadata.config.description"
                     id="description"
-                    :label="
-                        $t(
-                            'windward.core.components.settings.scenario_choice.description'
-                        )
-                    "
+                    :rules="validation.instructionRule"
+                    :counter="255"
+                    outlined
+                    :label="$t('components.content.settings.base.instructions')"
                     :disabled="render"
-                ></v-text-field>
+                ></v-textarea>
                 <v-select
                     v-model="block.metadata.config.display_style"
                     :items="displayStyles"
@@ -75,6 +77,9 @@
                                 v-model="
                                     block.metadata.config.items[index].title
                                 "
+                                :rules="validation.shortInputRules"
+                                :counter="50"
+                                outlined
                                 :id="'item-' + index + '-title'"
                                 :label="
                                     $t(
@@ -200,6 +205,7 @@ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettin
 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'
 
 export default {
     name: 'ScenarioChoiceSettings',
@@ -243,6 +249,32 @@ export default {
                     value: 'number',
                 },
             ],
+            validation: {
+                shortInputRules: [
+                    (v) => {
+                        if (v && v.length >= 50) {
+                            return this.$t(
+                                'windward.core.shared.settings.errors.input_limitations',
+                                [50]
+                            )
+                        } else {
+                            return true
+                        }
+                    },
+                ],
+                instructionRule: [
+                    (v) => {
+                        if (v && v.length >= 255) {
+                            return this.$t(
+                                'windward.core.shared.settings.errors.input_limitations',
+                                [255]
+                            )
+                        } else {
+                            return true
+                        }
+                    },
+                ],
+            },
         }
     },
     beforeMount() {
@@ -263,8 +295,14 @@ 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 (
+            _.isEmpty(this.block.metadata.config.description) &&
+            this.block.id &&
+            !Uuid.test(this.block.id)
+        ) {
+            this.block.metadata.config.description = this.$t(
+                'windward.core.components.content.blocks.scenario_choice.information'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.display_style)) {
             this.block.metadata.config.display_style = 'letter'

package/components/Settings/TabSettings.vue

@@ -1,78 +1,92 @@
 <template>
     <div>
-        <v-form ref="form" v-model="valid" v-if="!loading">
-            <v-divider class="my-4 primary"></v-divider>
-            <p>{{ $t('windward.core.components.settings.tab.tabs') }}</p>
-            <SortableExpansionPanel
-                v-model="block.metadata.config.items"
-                v-bind:currentPanel.sync="block.metadata.config.currentTab"
+        <v-row class="pl-3 pr-3">
+            <v-text-field
+                v-model="block.metadata.config.title"
+                :autofocus="true"
+                :rules="validation.shortInputRules"
+                :counter="50"
+                outlined
+                id="title"
+                :label="
+                    $t('windward.core.components.settings.clickable_icon.title')
+                "
                 :disabled="render"
-                @change="onDragged"
-                @click:close="onRemoveElement($event)"
-            >
-                <template #header="{ item }">
-                    {{ item.tabHeader !== '' ? item.tabHeader : 'No Header' }}
-                </template>
-                <template #body="{ item, index }">
-                    <v-container :key="expansionPanelKey">
-                        <p class="p-label">
-                            {{
-                                $t(
-                                    'windward.core.components.settings.tab.header'
-                                )
-                            }}
-                        </p>
-                        <v-text-field
-                            outlined
-                            :autofocus="true"
-                            v-model="
-                                block.metadata.config.items[index].tabHeader
-                            "
-                            :placeholder="'item ' + (index + 1)"
-                            :disabled="render"
-                        ></v-text-field>
-                        <v-btn
-                            @click="onToggleExpand(index)"
-                            text
-                            elevation="0"
-                            class="mb-3"
-                            :disabled="render"
+            ></v-text-field>
+            <v-textarea
+                v-model="block.metadata.config.instructions"
+                :rules="validation.instructionRule"
+                :counter="255"
+                outlined
+                :label="$t('components.content.settings.base.instructions')"
+                :disabled="render"
+            ></v-textarea>
+        </v-row>
+        <v-divider class="my-4 primary"></v-divider>
+        <p>{{ $t('windward.core.components.settings.tab.tabs') }}</p>
+        <SortableExpansionPanel
+            v-model="block.metadata.config.items"
+            v-bind:currentPanel.sync="block.metadata.config.currentTab"
+            :disabled="render"
+            @change="onDragged"
+            @click:close="onRemoveElement($event)"
+        >
+            <template #header="{ item }">
+                {{ item.tabHeader !== '' ? item.tabHeader : 'No Header' }}
+            </template>
+            <template #body="{ item, index }">
+                <v-container :key="expansionPanelKey">
+                    <p class="p-label">
+                        {{ $t('windward.core.components.settings.tab.header') }}
+                    </p>
+                    <v-text-field
+                        outlined
+                        :autofocus="true"
+                        v-model="block.metadata.config.items[index].tabHeader"
+                        :counter="50"
+                        :rules="validation.shortInputRules"
+                        :label="'item ' + (index + 1)"
+                        :disabled="render"
+                    ></v-text-field>
+                    <v-btn
+                        @click="onToggleExpand(index)"
+                        text
+                        elevation="0"
+                        class="mb-3"
+                        :disabled="render"
+                    >
+                        <v-icon
+                            v-if="!block.metadata.config.items[index].expand"
+                            color="primary"
+                            >mdi-arrow-expand-all</v-icon
+                        >
+                        <v-icon
+                            v-if="block.metadata.config.items[index].expand"
+                            color="primary"
                         >
-                            <v-icon
-                                v-if="
-                                    !block.metadata.config.items[index].expand
-                                "
-                                color="primary"
-                                >mdi-arrow-expand-all</v-icon
-                            >
-                            <v-icon
-                                v-if="block.metadata.config.items[index].expand"
-                                color="primary"
-                            >
-                                mdi-arrow-collapse-all
-                            </v-icon>
-                        </v-btn>
-                        <TextEditor
-                            v-model="block.metadata.config.items[index].content"
-                            v-if="!item.expand"
-                            :key="textEditorUpdateKey"
-                            :disabled="render"
-                        ></TextEditor>
-                    </v-container>
-                </template>
-            </SortableExpansionPanel>
-            <v-row justify="center" class="my-4">
-                <v-btn
-                    color="primary"
-                    elevation="0"
-                    :disabled="render"
-                    @click="onAddElement"
-                >
-                    <v-icon>mdi-plus</v-icon>
-                    {{ $t('windward.core.components.settings.tab.add_tab') }}
-                </v-btn>
-            </v-row>
-        </v-form>
+                            mdi-arrow-collapse-all
+                        </v-icon>
+                    </v-btn>
+                    <TextEditor
+                        v-model="block.metadata.config.items[index].content"
+                        v-if="!item.expand"
+                        :key="textEditorUpdateKey"
+                        :disabled="render"
+                    ></TextEditor>
+                </v-container>
+            </template>
+        </SortableExpansionPanel>
+        <v-row justify="center" class="my-4">
+            <v-btn
+                color="primary"
+                elevation="0"
+                :disabled="render"
+                @click="onAddElement"
+            >
+                <v-icon>mdi-plus</v-icon>
+                {{ $t('windward.core.components.settings.tab.add_tab') }}
+            </v-btn>
+        </v-row>
         <div v-if="loading" class="text-center">
             <v-progress-circular
                 :size="70"
@@ -90,6 +104,7 @@ import Crypto from '~/helpers/Crypto'
 import TextEditor from '~/components/Text/TextEditor'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
+import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'TabSettings',
@@ -110,6 +125,18 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
+        if (
+            _.isEmpty(this.block.metadata.config.instructions) &&
+            this.block.id &&
+            !Uuid.test(this.block.id)
+        ) {
+            this.block.metadata.config.instructions = this.$t(
+                'windward.core.components.settings.tab.instructions'
+            )
+        }
         if (_.isEmpty(this.block.metadata.config.currentTab)) {
             this.block.metadata.config.currentTab = 0
         }
@@ -129,6 +156,32 @@ export default {
             textEditorUpdateKey: Crypto.id(),
             valid: true,
             loading: false,
+            validation: {
+                shortInputRules: [
+                    (v) => {
+                        if (v && v.length >= 50) {
+                            return this.$t(
+                                'windward.core.shared.settings.errors.input_limitations',
+                                [50]
+                            )
+                        } else {
+                            return true
+                        }
+                    },
+                ],
+                instructionRule: [
+                    (v) => {
+                        if (v && v.length >= 255) {
+                            return this.$t(
+                                'windward.core.shared.settings.errors.input_limitations',
+                                [255]
+                            )
+                        } else {
+                            return true
+                        }
+                    },
+                ],
+            },
         }
     },
     mounted() {

package/components/Settings/TextEditorSettings.vue

@@ -5,7 +5,13 @@
             <v-btn-toggle v-model="settingSelector" multiple borderless>
                 <v-tooltip top>
                     <template #activator="{ on, attrs }">
-                        <v-btn elevation="0" v-bind="attrs" v-on="on" text :disabled="render">
+                        <v-btn
+                            elevation="0"
+                            v-bind="attrs"
+                            v-on="on"
+                            text
+                            :disabled="render"
+                        >
                             <v-icon>mdi-comment-text-multiple</v-icon>
                             {{
                                 $t(
@@ -25,7 +31,13 @@
 
                 <v-tooltip top>
                     <template #activator="{ on, attrs }">
-                        <v-btn elevation="0" v-bind="attrs" v-on="on" text :disabled="render">
+                        <v-btn
+                            elevation="0"
+                            v-bind="attrs"
+                            v-on="on"
+                            text
+                            :disabled="render"
+                        >
                             <v-icon> mdi-text-long</v-icon>
                             {{
                                 $t(

package/components/Settings/UserUploadSettings.vue

@@ -3,31 +3,20 @@
         <v-text-field
             v-model="block.metadata.config.title"
             outlined
+            :rules="validation.titleRules"
             :counter="50"
             :autofocus="true"
-            :label="$t('components.content.settings.base.title_optional')"
+            :label="$t('components.content.settings.base.title')"
             :disabled="render"
         ></v-text-field>
-        <v-btn
-            elevation="0"
-            text
-            class="mb-4"
-            :disabled="render"
-            @click="block.__expandInstructions = !block.__expandInstructions"
-        >
-            <v-icon v-if="!block.__expandInstructions" color="primary"
-                >mdi-arrow-expand-all</v-icon
-            >
-            <v-icon v-if="block.__expandInstructions" color="primary">
-                mdi-arrow-collapse-all
-            </v-icon>
-        </v-btn>
-        <TextEditor
+        <v-textarea
             v-model="block.metadata.config.instructions"
+            :rules="validation.instructionRule"
+            :counter="255"
+            outlined
             :label="$t('components.content.settings.base.instructions')"
-            :loading="block.__expandInstructions"
             :disabled="render"
-        />
+        ></v-textarea>
         <v-switch
             v-model="block.metadata.config.uploadSettings.multiple"
             :label="
@@ -57,6 +46,7 @@ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettin
 import Crypto from '~/helpers/Crypto'
 import TextEditor from '~/components/Text/TextEditor'
 import _ from 'lodash'
+import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'UserUploadSettings',
@@ -67,9 +57,6 @@ export default {
             this.block = {}
         }
 
-        // Default the instructions to collapsed
-        this.block.__expandInstructions = false
-
         if (_.isEmpty(this.block.body)) {
             this.block.body = this.$t(
                 'windward.core.shared.content_blocks.title.user_upload'
@@ -84,8 +71,14 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
-        if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.instructions = ''
+        if (
+            _.isEmpty(this.block.metadata.config.instructions) &&
+            this.block.id &&
+            !Uuid.test(this.block.id)
+        ) {
+            this.block.metadata.config.instructions = this.$t(
+                'windward.core.components.settings.user_upload.instructions'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.uploadSettings)) {
             this.block.metadata.config.uploadSettings = {
@@ -136,6 +129,32 @@ export default {
                 boilerplate: true,
                 elevation: 0,
             },
+            validation: {
+                titleRules: [
+                    (v) => {
+                        if (v && v.length >= 50) {
+                            return this.$t(
+                                'windward.core.shared.settings.errors.input_limitations',
+                                [50]
+                            )
+                        } else {
+                            return true
+                        }
+                    },
+                ],
+                instructionRule: [
+                    (v) => {
+                        if (v && v.length >= 255) {
+                            return this.$t(
+                                'windward.core.shared.settings.errors.input_limitations',
+                                [255]
+                            )
+                        } else {
+                            return true
+                        }
+                    },
+                ],
+            },
         }
     },
     mounted() {},