@windward/core 0.5.2 → 0.6.0

package/components/Settings/BlockQuoteSettings.vue

@@ -1,12 +1,12 @@
 <template>
     <div>
-        <v-form ref="form" v-model="valid" v-if="!loading"> </v-form>
         <v-container class="pa-0">
             <v-text-field
                 v-model="block.metadata.config.title"
+                :autofocus="true"
                 outlined
                 :counter="50"
-                :autofocus="true"
+                :rules="validation.shortInputRules"
                 :label="$t('components.content.settings.base.title')"
                 ref="title"
                 :disabled="render"
@@ -15,6 +15,7 @@
                 v-model="block.metadata.config.instructions"
                 outlined
                 auto-grow
+                :rules="validation.longInputRules"
                 :counter="255"
                 :label="$t('components.content.settings.base.instructions')"
                 :disabled="render"
@@ -24,6 +25,10 @@
         <v-container class="pa-0">
             <TextEditor
                 v-model="block.metadata.config.block_quote.quote"
+                :rules="validation.longInputRules"
+                outlined
+                auto-grow
+                :counter="255"
                 :height="200"
                 :label="
                     $t('windward.core.components.settings.block_quote.body')
@@ -35,6 +40,8 @@
         <v-container class="pa-0">
             <v-text-field
                 v-model="block.metadata.config.block_quote.author"
+                :rules="validation.shortInputRules"
+                :counter="50"
                 outlined
                 auto-grow
                 :label="
@@ -45,6 +52,8 @@
             <v-text-field
                 v-model="block.metadata.config.block_quote.author_title"
                 outlined
+                :rules="validation.shortInputRules"
+                :counter="50"
                 auto-grow
                 :label="
                     $t('windward.core.components.settings.block_quote.title')
@@ -53,6 +62,8 @@
             ></v-text-field>
             <v-text-field
                 v-model="block.metadata.config.block_quote.organization"
+                :rules="validation.shortInputRules"
+                :counter="50"
                 outlined
                 auto-grow
                 :label="$t('windward.core.components.settings.block_quote.org')"
@@ -61,6 +72,8 @@
             <v-text-field
                 v-model="block.metadata.config.block_quote.source_title"
                 outlined
+                :rules="validation.shortInputRules"
+                :counter="50"
                 auto-grow
                 :label="
                     $t(
@@ -169,6 +182,24 @@ export default {
                     value: 'online_journal',
                 },
             ],
+            validation: {
+                shortInputRules: [
+                    (v) =>
+                        v.length <= 50 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [50]
+                        ),
+                ],
+                longInputRules: [
+                    (v) =>
+                        v.length <= 255 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [255]
+                        ),
+                ],
+            },
         }
     },
     methods: {},

package/components/Settings/ClickableIconsSettings.vue

@@ -4,6 +4,9 @@
             <v-col class="pa-0">
                 <v-text-field
                     v-model="block.metadata.config.title"
+                    :autofocus="true"
+                    :rules="validation.shortInputRules"
+                    :counter="50"
                     outlined
                     id="title"
                     :label="
@@ -13,17 +16,14 @@
                     "
                     :disabled="render"
                 ></v-text-field>
-                <v-text-field
+                <v-textarea
                     v-model="block.metadata.config.description"
+                    :rules="validation.instructionRule"
+                    :counter="255"
                     outlined
-                    id="description"
-                    :label="
-                        $t(
-                            'windward.core.components.settings.clickable_icon.description'
-                        )
-                    "
+                    :label="$t('components.content.settings.base.instructions')"
                     :disabled="render"
-                ></v-text-field>
+                ></v-textarea>
                 <v-switch
                     v-model="block.metadata.config.display.show_title"
                     :label="
@@ -164,6 +164,8 @@
                                 "
                                 :id="'item-' + index + '-title'"
                                 outlined
+                                :counter="50"
+                                :rules="validation.shortInputRules"
                                 :label="
                                     $t(
                                         'windward.core.components.settings.clickable_icon.item_title'
@@ -232,9 +234,27 @@ export default {
         ContentBlockAsset,
     },
     extends: BaseContentSettings,
-
     data() {
-        return {}
+        return {
+            validation: {
+                shortInputRules: [
+                    (v) =>
+                        v.length <= 50 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [50]
+                        ),
+                ],
+                instructionRule: [
+                    (v) =>
+                        v.length <= 255 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [255]
+                        ),
+                ],
+            },
+        }
     },
     beforeMount() {
         if (_.isEmpty(this.block)) {

package/components/Settings/EmailSettings.vue

@@ -1,19 +1,20 @@
 <template>
     <div>
-        <v-form ref="form" v-model="valid" v-if="!loading"> </v-form>
         <v-container class="pa-0">
             <v-text-field
-                ref="title"
                 v-model="block.metadata.config.title"
+                :autofocus="true"
+                ref="title"
                 outlined
                 :counter="50"
-                :autofocus="true"
+                :rules="validation.shortInputRules"
                 :label="$t('components.content.settings.base.title')"
                 :disabled="render"
             ></v-text-field>
             <v-textarea
                 v-model="block.metadata.config.instructions"
                 outlined
+                :rules="validation.instructionRule"
                 auto-grow
                 :counter="255"
                 :label="$t('components.content.settings.base.instructions')"
@@ -41,7 +42,8 @@
                     <v-container :key="expansionPanelKey">
                         <v-text-field
                             v-model="block.metadata.config.emails[index].from"
-                            :autofocus="true"
+                            :rules="validation.shortInputRules"
+                            :counter="50"
                             outlined
                             :label="
                                 $t(
@@ -52,6 +54,8 @@
                         ></v-text-field>
                         <v-text-field
                             v-model="block.metadata.config.emails[index].to"
+                            :rules="validation.shortInputRules"
+                            :counter="50"
                             outlined
                             :label="
                                 $t('windward.core.components.settings.email.to')
@@ -60,6 +64,8 @@
                         ></v-text-field>
                         <v-text-field
                             v-model="block.metadata.config.emails[index].cc"
+                            :rules="validation.shortInputRules"
+                            :counter="50"
                             outlined
                             :label="
                                 $t('windward.core.components.settings.email.cc')
@@ -70,6 +76,8 @@
                             v-model="
                                 block.metadata.config.emails[index].subject
                             "
+                            :rules="validation.shortInputRules"
+                            :counter="50"
                             outlined
                             :label="
                                 $t(
@@ -79,6 +87,7 @@
                             :disabled="render"
                         ></v-text-field>
                         <v-btn
+                            class="mb-4"
                             @click="
                                 onToggleExpand(
                                     block.metadata.config.emails[index],
@@ -204,6 +213,24 @@ export default {
             loading: false,
             expansionPanelKey: 0,
             editingPanel: 0,
+            validation: {
+                shortInputRules: [
+                    (v) =>
+                        v.length <= 50 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [50]
+                        ),
+                ],
+                instructionRule: [
+                    (v) =>
+                        v.length <= 255 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [255]
+                        ),
+                ],
+            },
         }
     },
     beforeDestroy() {

package/components/Settings/FileDownloadSettings.vue

@@ -4,17 +4,21 @@
             v-model="block.metadata.config.title"
             outlined
             :counter="50"
+            :rules="validation.shortInputRules"
             :autofocus="true"
             :label="$t('components.content.settings.base.title_optional')"
             :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')
             "
-        />
+        ></v-textarea>
         <v-switch
             v-model="block.metadata.config.display_detailed"
             :label="
@@ -37,6 +41,8 @@
                     <v-text-field
                         v-model="block.metadata.config.items[index].name"
                         :autofocus="true"
+                        :counter="50"
+                        :rules="validation.shortInputRules"
                         outlined
                         :label="
                             $t(
@@ -94,7 +100,26 @@ export default {
     extends: BaseContentSettings,
     components: { TextEditor, SortableExpansionPanel },
     data() {
-        return {}
+        return {
+            validation: {
+                shortInputRules: [
+                    (v) =>
+                        v.length <= 50 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [50]
+                        ),
+                ],
+                instructionRule: [
+                    (v) =>
+                        v.length <= 255 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [255]
+                        ),
+                ],
+            },
+        }
     },
     computed: {
         filename() {

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(
@@ -243,6 +248,24 @@ export default {
                     value: 'number',
                 },
             ],
+            validation: {
+                shortInputRules: [
+                    (v) =>
+                        v.length <= 50 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [50]
+                        ),
+                ],
+                instructionRule: [
+                    (v) =>
+                        v.length <= 255 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [255]
+                        ),
+                ],
+            },
         }
     },
     beforeMount() {

package/components/Settings/TabSettings.vue

@@ -1,6 +1,5 @@
 <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
@@ -28,7 +27,9 @@
                             v-model="
                                 block.metadata.config.items[index].tabHeader
                             "
-                            :placeholder="'item ' + (index + 1)"
+                            :counter="50"
+                            :rules="validation.headerRule"
+                            :label="'item ' + (index + 1)"
                             :disabled="render"
                         ></v-text-field>
                         <v-btn
@@ -72,7 +73,6 @@
                     {{ $t('windward.core.components.settings.tab.add_tab') }}
                 </v-btn>
             </v-row>
-        </v-form>
         <div v-if="loading" class="text-center">
             <v-progress-circular
                 :size="70"
@@ -129,6 +129,16 @@ export default {
             textEditorUpdateKey: Crypto.id(),
             valid: true,
             loading: false,
+            validation: {
+                headerRule: [
+                    (v) =>
+                        v.length <= 50 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [50]
+                        ),
+                ],
+            },
         }
     },
     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,6 +3,7 @@
         <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')"
@@ -22,12 +23,14 @@
                 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="
@@ -136,6 +139,24 @@ export default {
                 boilerplate: true,
                 elevation: 0,
             },
+            validation: {
+                titleRules: [
+                    (v) =>
+                        v.length <= 50 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [50]
+                        ),
+                ],
+                instructionRule: [
+                    (v) =>
+                        v.length <= 255 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [255]
+                        ),
+                ],
+            },
         }
     },
     mounted() {},

package/components/Settings/VideoSettings.vue

@@ -4,6 +4,9 @@
             <v-col cols="12">
                 <v-text-field
                     v-model="block.metadata.config.title"
+                    :counter="50"
+                    outlined
+                    :rules="validation.shortInputRules"
                     :label="$t('windward.core.components.settings.video.title')"
                     :disabled="render"
                 ></v-text-field>
@@ -11,6 +14,7 @@
                     v-model="block.metadata.config.description"
                     outlined
                     auto-grow
+                    :rules="validation.instructionRule"
                     :counter="255"
                     :label="
                         $t(
@@ -503,6 +507,32 @@ export default {
                     },
                 },
             },
+            validation: {
+                shortInputRules: [
+                    (v) =>
+                        v.length <= 50 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [50]
+                        ),
+                ],
+                instructionRule: [
+                    (v) =>
+                        v.length <= 255 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [255]
+                        ),
+                ],
+                clueRule: [
+                    (v) =>
+                        v.length <= 155 ||
+                        this.$t(
+                            'windward.core.shared.settings.errors.input_limitations',
+                            [155]
+                        ),
+                ],
+            },
         }
     },
     computed: {

package/components/utils/TinyMCEWrapper.vue

@@ -5,9 +5,12 @@
                 'windward-tinymce-wrapper windward-tinymce-wrapper' +
                 (isDarkTheme ? '--theme-dark' : '--theme-light')
             "
+            :data-cy="dataCy"
         >
             <label v-if="label" class="editor-label">{{ label }}</label>
+
             <Editor
+                :id="id"
                 :key="seed + (isDarkTheme ? '-theme-dark' : '-theme-light')"
                 v-model="text"
                 initial-value=""
@@ -22,6 +25,8 @@
                 }"
             >
             </Editor>
+
+            <label v-if="hint" class="editor-hint">{{ hint }}</label>
         </div>
 
         <v-btn-toggle dense multiple class="pt-1 d-flex justify-end">
@@ -129,6 +134,7 @@ export default {
     },
     props: {
         value: { type: String, required: true, default: '' },
+        id: { type: String, required: false, default: '' },
         height: { type: Number, required: false, default: null },
         menubar: {
             type: String,
@@ -142,7 +148,8 @@ export default {
                 'undo redo | styles | bold italic underline strikethrough removeformat | alignleft aligncenter alignright | table bullist numlist outdent indent | glossaryButton fibFormatButton mathButton ',
         },
         root_block: { type: String, required: false, default: 'div' },
-        label: { type: String, required: true, default: '' },
+        label: { type: String, required: false, default: '' },
+        hint: { type: String, required: false, default: '' },
         inline: { type: Boolean, required: false, default: false },
         allowRead: { type: Boolean, required: false, default: false },
     },
@@ -168,6 +175,14 @@ export default {
         },
     },
     computed: {
+        dataCy() {
+            return (
+                this.id ||
+                this.label.toLowerCase().replaceAll(/[^a-z0-9]/g, '-') ||
+                this.hint.toLowerCase().replaceAll(/[^a-z0-9]/g, '-') ||
+                _.get(this, '$parent.$parent.$options.name', '')
+            )
+        },
         isDarkTheme() {
             return this.$vuetify.theme.isDark
         },
@@ -542,6 +557,12 @@ export default {
     transform-origin: top left;
     transform: scale(0.75);
 }
+.editor-hint {
+    font-size: 1rem;
+    display: block;
+    transform-origin: top left;
+    transform: scale(0.75);
+}
 </style>
 
 <style lang="scss">