Allow global override of select type (affects both selects and multis…

…elects) with defaultSelectType in settings object
appsocially · Apr 13, 2021 · 54f083f · 54f083f · vercel · Apr 13, 2021
1 parent 51651f0
commit 54f083f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 4 deletions.
diff --git a/src/components/FormMode/multi-select/index.vue b/src/components/FormMode/multi-select/index.vue
@@ -1,7 +1,7 @@
 <template>
   <component
     :is="selectType"
-    v-bind="{ ...$props, ...$attrs }"
+    v-bind="{ ...$props, ...$attrs, state }"
     v-on="$listeners"
   />
 </template>
@@ -16,14 +16,24 @@ const selectTypeMap = {
 
 export default {
   mixins: [widgeti18nMixin],
+  props: {
+    state: {
+      type: Object,
+    },
+  },
   components: {
     default: () => import('./multi-select'),
     options: () => import('./options'),
   },
   computed: {
+    settings() {
+      return this.state.settings
+    },
     selectType() {
+      const defaultSelectType =
+        this.settings.defaultSelectType || selectTypeMap.default
       return selectTypeMap[
-        this.localeArgLookup('selectType') || selectTypeMap.default
+        this.localeArgLookup('selectType') || defaultSelectType
       ]
     },
   },

diff --git a/src/components/FormMode/select/index.vue b/src/components/FormMode/select/index.vue
@@ -1,7 +1,7 @@
 <template>
   <component
     :is="selectType"
-    v-bind="{ ...$props, ...$attrs }"
+    v-bind="{ ...$props, ...$attrs, state }"
     v-on="$listeners"
   />
 </template>
@@ -16,14 +16,24 @@ const selectTypeMap = {
 
 export default {
   mixins: [widgeti18nMixin],
+  props: {
+    state: {
+      type: Object,
+    },
+  },
   components: {
     default: () => import('./select'),
     options: () => import('./options'),
   },
   computed: {
+    settings() {
+      return this.state.settings
+    },
     selectType() {
+      const defaultSelectType =
+        this.settings.defaultSelectType || selectTypeMap.default
       return selectTypeMap[
-        this.localeArgLookup('selectType') || selectTypeMap.default
+        this.localeArgLookup('selectType') || defaultSelectType
       ]
     },
   },

diff --git a/stories/Formmode.stories.js b/stories/Formmode.stories.js
@@ -7,13 +7,20 @@ export default {
   args: {
     templateText: '',
     listeners: {},
+    defaultSelectType: 'default',
   },
   argTypes: {
     templateText: {
       control: {
         type: 'text',
       },
     },
+    defaultSelectType: {
+      control: {
+        type: 'select',
+        options: ['default', 'options'],
+      },
+    },
     listeners: {
       type: 'object',
     },
@@ -40,6 +47,7 @@ const formmodeTemplate = (args) => {
         this.upil.startRaw(this.templateText, {
           mode: 'form',
           resetOnInputUpdate: true,
+          defaultSelectType: this.defaultSelectType,
         })
       },
     },
@@ -50,6 +58,9 @@ const formmodeTemplate = (args) => {
       templateText() {
         this.startUpil()
       },
+      defaultSelectType() {
+        this.startUpil()
+      },
     },
   }
 }