@windward/core 0.5.2 → 0.7.0

package/components/Settings/AccordionSettings.vue

@@ -1,150 +1,157 @@
 <template>
     <div>
-        <v-form ref="form" v-model="valid" v-if="!loading">
-            <v-container class="pa-0">
-                <v-divider class="my-4 primary"></v-divider>
-                <p>
-                    {{
-                        $t('windward.core.components.settings.accordion.items')
-                    }}
-                </p>
-                <SortableExpansionPanel
-                    v-model="block.metadata.config.items"
+        <v-container class="pa-0">
+            <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"
-                    @click:close="onRemoveElement($event)"
-                    @change="onDragged"
-                    @update:currentPanel="onUpdatePanel"
-                >
-                    <template #header="{ item }">{{
-                        item.header
-                            ? item.header
-                            : $t('components.content.settings.base.placeholder')
-                    }}</template>
-                    <template #body="{ index }">
-                        <v-container :key="expansionPanelKey">
+                ></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.accordion.items') }}
+            </p>
+            <SortableExpansionPanel
+                v-model="block.metadata.config.items"
+                :disabled="render"
+                @click:close="onRemoveElement($event)"
+                @change="onDragged"
+                @update:currentPanel="onUpdatePanel"
+            >
+                <template #header="{ item }">{{
+                    item.header
+                        ? item.header
+                        : $t('components.content.settings.base.placeholder')
+                }}</template>
+                <template #body="{ index }">
+                    <v-container :key="expansionPanelKey">
+                        <v-text-field
+                            v-model="block.metadata.config.items[index].header"
+                            :autofocus="true"
+                            :counter="50"
+                            :rules="validation.shortInputRules"
+                            outlined
+                            :label="
+                                $t('components.content.settings.base.title')
+                            "
+                            :disabled="render"
+                        ></v-text-field>
+                        <v-btn
+                            text
+                            elevation="0"
+                            class="mb-3"
+                            :disabled="render"
+                            @click="
+                                onToggleExpand(
+                                    block.metadata.config.items[index]
+                                )
+                            "
+                        >
+                            <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-show="!block.metadata.config.items[index].expand"
+                            v-model="block.metadata.config.items[index].content"
+                            :label="
+                                $t(
+                                    'windward.core.components.settings.accordion.label'
+                                )
+                            "
+                            :disabled="render"
+                        ></TextEditor>
+                        <v-container class="pa-0 pt-3">
+                            <h4>
+                                {{
+                                    $t(
+                                        'windward.core.shared.settings.upload_file'
+                                    )
+                                }}
+                            </h4>
                             <v-text-field
                                 v-model="
-                                    block.metadata.config.items[index].header
+                                    block.metadata.config.items[index].altText
                                 "
-                                :autofocus="true"
+                                class="pt-3 pb-3"
+                                :hide-details="true"
+                                dense
                                 outlined
                                 :label="
-                                    $t('components.content.settings.base.title')
-                                "
-                                :disabled="render"
-                                @focus="onTextAreaFocus"
-                            ></v-text-field>
-                            <v-btn
-                                text
-                                elevation="0"
-                                class="mb-3"
-                                :disabled="render"
-                                @click="
-                                    onToggleExpand(
-                                        block.metadata.config.items[index]
+                                    $t(
+                                        'windward.core.shared.settings.alt_image'
                                     )
                                 "
-                            >
-                                <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-show="
-                                    !block.metadata.config.items[index].expand
-                                "
+                            ></v-text-field>
+                            <v-text-field
                                 v-model="
-                                    block.metadata.config.items[index].content
+                                    block.metadata.config.items[index]
+                                        .ariaDescribedBy
                                 "
+                                class="pt-3 pb-3"
+                                :hide-details="true"
+                                dense
+                                outlined
                                 :label="
                                     $t(
-                                        'windward.core.components.settings.accordion.label'
+                                        'windward.core.shared.settings.aria_described'
                                     )
                                 "
-                                :disabled="render"
-                            ></TextEditor>
-                            <v-container class="pa-0 pt-3">
-                                <h4>
-                                    {{
-                                        $t(
-                                            'windward.core.shared.settings.upload_file'
-                                        )
-                                    }}
-                                </h4>
-                                <v-text-field
-                                    v-model="
-                                        block.metadata.config.items[index]
-                                            .altText
-                                    "
-                                    class="pt-3 pb-3"
-                                    :hide-details="true"
-                                    dense
-                                    outlined
-                                    :autofocus="true"
-                                    :label="
-                                        $t(
-                                            'windward.core.shared.settings.alt_image'
-                                        )
-                                    "
-                                ></v-text-field>
-                                <v-text-field
-                                    v-model="
-                                        block.metadata.config.items[index]
-                                            .ariaDescribedBy
-                                    "
-                                    class="pt-3 pb-3"
-                                    :hide-details="true"
-                                    dense
-                                    outlined
-                                    :label="
-                                        $t(
-                                            'windward.core.shared.settings.aria_described'
-                                        )
-                                    "
-                                ></v-text-field>
-                                <ContentBlockAsset
-                                    v-model="
-                                        block.metadata.config.items[index].file
-                                    "
-                                    mimes="image/png,image/jpeg"
-                                    :assets.sync="block.assets"
-                                ></ContentBlockAsset>
-                            </v-container>
+                            ></v-text-field>
+                            <ContentBlockAsset
+                                v-model="
+                                    block.metadata.config.items[index].file
+                                "
+                                mimes="image/png,image/jpeg"
+                                :assets.sync="block.assets"
+                            ></ContentBlockAsset>
                         </v-container>
-                    </template>
-                </SortableExpansionPanel>
-            </v-container>
-            <v-container class="pa-0">
-                <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.accordion.add'
-                            )
-                        }}</v-btn
-                    >
-                </v-row>
-            </v-container>
-        </v-form>
+                    </v-container>
+                </template>
+            </SortableExpansionPanel>
+        </v-container>
+        <v-container class="pa-0">
+            <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.accordion.add')
+                    }}</v-btn
+                >
+            </v-row>
+        </v-container>
         <div v-if="loading" class="text-center">
             <v-progress-circular
                 :size="70"
@@ -161,6 +168,7 @@ 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'
 
 export default {
     name: 'AccordionSettings',
@@ -179,6 +187,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.accordion.instructions'
+            )
+        }
         if (_.isEmpty(this.block.metadata.config.editOnContentItem)) {
             this.block.metadata.config.editOnContentItem = false
         }
@@ -201,8 +221,33 @@ export default {
     data() {
         return {
             expansionPanelKey: '0',
-            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
+                        }
+                    },
+                ],
+            },
         }
     },
     beforeDestroy() {
@@ -251,11 +296,6 @@ export default {
             //close all panels on drag, leaving them open confuses the tracking as indexes changes around
             this.block.metadata.config.selectedPanels = null
         },
-        onTextAreaFocus($event) {
-            // prevent focus error that is happening on text field because of last pass
-            $event.preventDefault()
-            $event.stopPropagation()
-        },
     },
 }
 </script>

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,32 @@ export default {
                     value: 'online_journal',
                 },
             ],
+            validation: {
+                shortInputRules: [
+                    (v) => {
+                        if (v && v.length >= 50) {
+                            return this.$t(
+                                'windward.core.shared.settings.errors.input_limitations',
+                                [50]
+                            )
+                        } else {
+                            return true
+                        }
+                    },
+                ],
+                longInputRules: [
+                    (v) => {
+                        if (v && v.length >= 255) {
+                            return this.$t(
+                                'windward.core.shared.settings.errors.input_limitations',
+                                [255]
+                            )
+                        } else {
+                            return true
+                        }
+                    },
+                ],
+            },
         }
     },
     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="
@@ -142,6 +142,7 @@
                                         [index + 1]
                                     )
                                 "
+                                :rules="validation.iconRules"
                                 :disabled="render"
                             ></TextIconPicker>
 
@@ -164,6 +165,8 @@
                                 "
                                 :id="'item-' + index + '-title'"
                                 outlined
+                                :counter="50"
+                                :rules="validation.shortInputRules"
                                 :label="
                                     $t(
                                         'windward.core.components.settings.clickable_icon.item_title'
@@ -232,9 +235,62 @@ export default {
         ContentBlockAsset,
     },
     extends: BaseContentSettings,
-
     data() {
-        return {}
+        return {
+            validation: {
+                shortInputRules: [
+                    (v) => {
+                        if (v) {
+                            if (v.length <= 50) {
+                                return true
+                            } else {
+                                return this.$t(
+                                    'windward.core.shared.settings.errors.input_limitations',
+                                    [50]
+                                )
+                            }
+                        } else {
+                            return true
+                        }
+                    },
+                ],
+                instructionRule: [
+                    (v) => {
+                        if (v) {
+                            if (v.length <= 255) {
+                                return true
+                            } else {
+                                return this.$t(
+                                    'windward.core.shared.settings.errors.input_limitations',
+                                    [255]
+                                )
+                            }
+                        } else {
+                            return true
+                        }
+                    },
+                ],
+                iconRules: [
+                    (v) => {
+                        if (v) {
+                            const isMDI = v.startsWith('mdi')
+                            if (isMDI) {
+                                return true
+                            } else if (v.length >= 5) {
+                                return this.$t(
+                                    'shared.forms.errors.number_lt',
+                                    [4]
+                                )
+                            } else {
+                                return true
+                            }
+                        } else {
+                            return true
+                        }
+                    },
+                ],
+            },
+        }
     },
     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,32 @@ export default {
             loading: false,
             expansionPanelKey: 0,
             editingPanel: 0,
+            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
+                        }
+                    },
+                ],
+            },
         }
     },
     beforeDestroy() {