@vue-interface/select-field 1.0.0-beta.8 → 2.0.0

package/src/SelectField.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts" generic="ModelValue, Value">
+import { ActivityIndicator } from '@vue-interface/activity-indicator';
+import type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';
+import { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';
+import { InputHTMLAttributes, onMounted, ref, SelectHTMLAttributes, useSlots } from 'vue';
+
+const props = withDefaults(defineProps<SelectFieldProps<ModelValue,Value>>(), {
+    formControlClass: 'form-select',
+    labelClass: 'form-label'
+});
+
+defineOptions({
+    inheritAttrs: false
+});
+
+const model = defineModel<ModelValue>();
+
+defineSlots<FormControlSlots<SelectFieldControlSizePrefix,ModelValue> & {
+    default: () => unknown
+}>();
+
+const emit = defineEmits<FormControlEvents<ModelValue>>();
+
+const {
+    controlAttributes,
+    formGroupClasses,
+    listeners,
+} = useFormControl<InputHTMLAttributes, SelectFieldControlSizePrefix, ModelValue, Value>({ model, props, emit });
+
+const field = ref<HTMLSelectElement>();
+
+function onMousedownLabel(e: MouseEvent) {
+    listeners.onClick(e);
+
+    field.value?.focus();
+}
+
+// Check the option slots for selected options. If the field has hardcoded
+// selected options, this will ensure the value of the field is always set to
+// the property. This will ensure the model is updated to the selected value.
+onMounted(() => {
+    const slot = useSlots().default;
+
+    if(!slot) {
+        return;
+    }
+
+    for(const child of slot()) {
+        if(!child.props) {
+            return;
+        }
+        
+        if('selected' in child.props && (child.props.value ?? child.children)) {
+            model.value = child.props.value ?? child.children;
+        }
+    }
+});
+</script>
+
+<script lang="ts">
+export type SelectFieldControlSizePrefix = 'form-select';
+
+export type SelectFieldProps<ModelValue, Value> = FormControlProps<
+    SelectHTMLAttributes, 
+    SelectFieldControlSizePrefix, 
+    ModelValue, 
+    Value
+>;
+</script>
+
+<template>
+    <div
+        class="select-field"
+        :class="formGroupClasses">
+        <slot name="label">
+            <label
+                v-if="label"
+                ref="label"
+                :for="controlAttributes.id"
+                :class="labelClass"
+                @mousedown="onMousedownLabel">
+                {{ label }}
+            </label>
+        </slot>
+
+        <div class="form-control-inner">
+            <slot
+                name="control"
+                v-bind="{ controlAttributes, listeners }">
+                <div
+                    v-if="$slots.icon"
+                    class="form-control-inner-icon"
+                    @click="field?.focus()">
+                    <slot name="icon" />
+                </div>
+                <select
+                    ref="field"
+                    v-model="model"
+                    v-bind="{...controlAttributes, ...listeners}">
+                    <slot />
+                </select>
+            </slot>
+            
+            <div class="form-control-activity-indicator">
+                <slot name="activity">
+                    <Transition name="select-field-fade">
+                        <ActivityIndicator
+                            v-if="activity && indicator"
+                            key="activity"
+                            ref="activity"
+                            :type="indicator"
+                            :size="indicatorSize" />
+                    </Transition>
+                </slot>
+            </div>    
+        </div>
+
+        <slot
+            name="errors"
+            v-bind="{ error, errors, id, name }">        
+            <FormControlErrors
+                v-if="!!(error || errors)"
+                :id="id && String(id)"
+                v-slot="{ error }"
+                :name="name && String(name)"
+                :error="error"
+                :errors="errors">
+                <div
+                    invalid
+                    class="invalid-feedback">
+                    {{ error }}<br>
+                </div>
+            </FormControlErrors>
+        </slot>
+        
+        <slot
+            name="feedback"
+            v-bind="{ feedback }">
+            <FormControlFeedback
+                v-slot="{ feedback }"
+                :feedback="feedback">
+                <div
+                    valid
+                    class="valid-feedback">
+                    {{ feedback }}
+                </div>
+            </FormControlFeedback>
+        </slot>
+
+        <slot
+            name="help"
+            v-bind="{ helpText }">
+            <small
+                v-if="helpText"
+                ref="help">
+                {{ helpText }}
+            </small>
+        </slot>
+    </div>
+</template>

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "customConditions": ["source"],
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue"
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.vue",
+  ],
+  "exclude": ["node_modules"]
+}

package/vite.config.js

@@ -0,0 +1,47 @@
+import tailwindcss from '@tailwindcss/vite';
+import vue from '@vitejs/plugin-vue';
+import { pascalCase } from 'change-case';
+import path from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import pkg from './package.json';
+
+const fileName = pkg.name.split('/')[1];
+
+const external = [
+    ...(pkg.dependencies ? Object.keys(pkg.dependencies) : []),
+    ...(pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [])
+];
+
+export default ({ command }) => defineConfig({
+    build: {
+        sourcemap: command === 'build',
+        lib: {
+            entry: path.resolve(__dirname, 'index.ts'),
+            name: pascalCase(fileName),
+            fileName,
+        },
+        rollupOptions: {
+            external,
+            output: {
+                globals: external.reduce((carry, dep) => {
+                    return Object.assign(carry, {
+                        [dep]: pascalCase(dep)
+                    });
+                }, {}),
+            }
+        },
+        watch: !process.env.NODE_ENV && {
+            include: [
+                './tailwindcss/**/*.js'
+            ]
+        }
+    },
+    plugins: [
+        vue(),
+        dts({
+            entryRoot: path.resolve(__dirname, './'),
+        }),
+        tailwindcss()
+    ],
+});

package/dist/select-field.js

@@ -1,125 +0,0 @@
-import { ActivityIndicator as g } from "@vue-interface/activity-indicator";
-import { FormControl as S } from "@vue-interface/form-control";
-import { defineComponent as z, resolveComponent as m, resolveDirective as E, openBlock as t, createElementBlock as l, normalizeClass as b, renderSlot as o, toDisplayString as i, createCommentVNode as n, createElementVNode as a, normalizeProps as c, guardReactiveProps as f, withDirectives as V, mergeProps as A, vModelSelect as N, createVNode as k, Transition as T, withCtx as p, createBlock as y, createTextVNode as B } from "vue";
-const D = z({
-  name: "SelectField",
-  components: {
-    ActivityIndicator: g
-  },
-  extends: S,
-  props: {
-    /**
-     * The default class name assigned to the control element
-     *
-     * @param {String}
-     * @default 'form-select'
-     */
-    formControlClass: {
-      type: String,
-      default: "form-select"
-    }
-  },
-  computed: {
-    controlClass() {
-      return this.plaintext ? `${this.formControlClass}-plaintext` : this.formControlClass;
-    }
-  }
-});
-const P = (e, s) => {
-  const d = e.__vccOpts || e;
-  for (const [u, v] of s)
-    d[u] = v;
-  return d;
-}, w = ["for"], O = { class: "form-group-inner" }, j = {
-  invalid: "",
-  class: "invalid-feedback"
-}, G = /* @__PURE__ */ a("br", null, null, -1), I = {
-  valid: "",
-  class: "valid-feedback"
-};
-function M(e, s, d, u, v, R) {
-  const C = m("activity-indicator"), $ = m("FormControlErrors"), h = m("FormControlFeedback"), F = E("bind-events");
-  return t(), l("div", {
-    class: b(e.formGroupClasses)
-  }, [
-    o(e.$slots, "label", {}, () => [
-      e.label ? (t(), l("label", {
-        key: 0,
-        ref: "label",
-        for: e.id,
-        class: b(e.labelClass)
-      }, i(e.label), 11, w)) : n("", !0)
-    ]),
-    a("div", O, [
-      o(e.$slots, "control", c(f({ bindEvents: e.bindEvents, controlAttributes: e.controlAttributes })), () => [
-        e.$slots.icon ? (t(), l("div", {
-          key: 0,
-          class: "form-group-inner-icon",
-          onClick: s[0] || (s[0] = (...r) => e.focus && e.focus(...r))
-        }, [
-          o(e.$slots, "icon")
-        ])) : n("", !0),
-        V((t(), l("select", A({
-          ref: "field",
-          "onUpdate:modelValue": s[1] || (s[1] = (r) => e.model = r)
-        }, Object.assign({
-          disabled: e.$attrs.readonly
-        }, e.controlAttributes)), [
-          o(e.$slots, "default")
-        ], 16)), [
-          [N, e.model],
-          [F]
-        ])
-      ]),
-      o(e.$slots, "activity", {}, () => [
-        k(T, { name: "select-field-fade" }, {
-          default: p(() => [
-            e.activity ? (t(), y(C, {
-              key: "activity",
-              ref: "activity",
-              type: e.indicator,
-              size: e.indicatorSize || e.size
-            }, null, 8, ["type", "size"])) : n("", !0)
-          ]),
-          _: 1
-        })
-      ])
-    ]),
-    o(e.$slots, "errors", c(f({ error: e.error, errors: e.errors, id: e.$attrs.id, name: e.$attrs.name })), () => [
-      e.error || e.errors ? (t(), y($, {
-        key: 0,
-        id: e.$attrs.id,
-        name: e.$attrs.name,
-        error: e.error,
-        errors: e.errors
-      }, {
-        default: p(({ error: r }) => [
-          a("div", j, [
-            B(i(r), 1),
-            G
-          ])
-        ]),
-        _: 1
-      }, 8, ["id", "name", "error", "errors"])) : n("", !0)
-    ]),
-    o(e.$slots, "feedback", c(f({ feedback: e.feedback })), () => [
-      k(h, { feedback: e.feedback }, {
-        default: p(({ feedback: r }) => [
-          a("div", I, i(r), 1)
-        ]),
-        _: 1
-      }, 8, ["feedback"])
-    ]),
-    o(e.$slots, "help", {}, () => [
-      e.helpText ? (t(), l("small", {
-        key: 0,
-        ref: "help"
-      }, i(e.helpText), 513)) : n("", !0)
-    ])
-  ], 2);
-}
-const J = /* @__PURE__ */ P(D, [["render", M]]);
-export {
-  J as SelectField
-};
-//# sourceMappingURL=select-field.js.map

package/dist/select-field.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"select-field.js","sources":["../src/SelectField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { FormControl } from '@vue-interface/form-control';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n\n    name: 'SelectField',\n\n    components: {\n        ActivityIndicator,\n    },\n\n    extends: FormControl,\n\n    props: {\n        /**\n         * The default class name assigned to the control element\n         *\n         * @param {String}\n         * @default 'form-select'\n         */\n        formControlClass: {\n            type: String,\n            default: 'form-select'\n        }   \n    },\n\n    computed: {\n        controlClass() {\n            return this.plaintext ?\n                `${this.formControlClass}-plaintext`\n                : this.formControlClass;\n        }\n    }\n\n});\n</script>\n\n<template>\n    <div :class=\"formGroupClasses\">\n        <slot name=\"label\">\n            <label\n                v-if=\"label\"\n                ref=\"label\"\n                :for=\"id\"\n                :class=\"labelClass\">\n                {{ label }}\n            </label>\n        </slot>\n\n        <div class=\"form-group-inner\">\n            <slot\n                name=\"control\"\n                v-bind=\"{ bindEvents, controlAttributes }\">\n                <div\n                    v-if=\"$slots.icon\"\n                    class=\"form-group-inner-icon\"\n                    @click=\"focus\">\n                    <slot name=\"icon\" />\n                </div>\n                <select\n                    ref=\"field\"\n                    v-model=\"model\"\n                    v-bind-events\n                    v-bind=\"Object.assign({\n                        ['disabled']: $attrs.readonly\n                    }, controlAttributes)\">\n                    <slot />\n                </select>\n            </slot>\n\n            <slot name=\"activity\">\n                <transition name=\"select-field-fade\">\n                    <activity-indicator\n                        v-if=\"activity\"\n                        key=\"activity\"\n                        ref=\"activity\"\n                        :type=\"indicator\"\n                        :size=\"indicatorSize || size\" />\n                </transition>\n            </slot>\n        </div>\n\n        <slot\n            name=\"errors\"\n            v-bind=\"{ error, errors, id: $attrs.id, name: $attrs.name }\">        \n            <FormControlErrors\n                v-if=\"!!(error || errors)\"\n                :id=\"$attrs.id\"\n                v-slot=\"{ error }\"\n                :name=\"$attrs.name\"\n                :error=\"error\"\n                :errors=\"errors\">\n                <div\n                    invalid\n                    class=\"invalid-feedback\">\n                    {{ error }}<br>\n                </div>\n            </FormControlErrors>\n        </slot>\n        \n        <slot\n            name=\"feedback\"\n            v-bind=\"{ feedback }\">\n            <FormControlFeedback\n                v-slot=\"{ feedback }\"\n                :feedback=\"feedback\">\n                <div\n                    valid\n                    class=\"valid-feedback\">\n                    {{ feedback }}\n                </div>\n            </FormControlFeedback>\n        </slot>\n\n        <slot name=\"help\">\n            <small\n                v-if=\"helpText\"\n                ref=\"help\">\n                {{ helpText }}\n            </small>\n        </slot>\n    </div>\n</template>\n\n<style>\n.select-field,\n.select-field .form-group-inner {\n    position: relative;\n    transition: all .25s ease-in-out;\n}\n\n.select-field .activity-indicator {\n    position: absolute;\n    right: 1.25em;\n    top: 50%;\n    transform: translate(-1rem, -50%);\n    transition: all .15s ease-in;\n}\n\n.select-field .activity-indicator-xs {\n    font-size: .5em;\n    right: 2em;\n}\n\n.select-field.has-activity .form-control-xs {\n    padding-right: 3.75em;\n}\n\n.select-field .activity-indicator-sm {\n    font-size: .5em;\n    right: 2em;\n}\n\n.select-field.has-activity .form-control-sm {\n    padding-right: 3em;\n}\n\n.select-field .activity-indicator-md {\n    font-size: .666em;\n}\n\n.select-field.has-activity .form-control-md {\n    padding-right: 3em;\n}\n\n.select-field .activity-indicator-lg {\n    font-size: .75em;\n}\n\n.select-field.has-activity .form-control-lg {\n    padding-right: 3em;\n}\n\n.select-field .activity-indicator-xl {\n    font-size: 1em;\n}\n\n.select-field.has-activity .activity-indicator-xl ~ .form-control-xl {\n    padding-right: 3.75em;\n}\n\n.select-field .activity-indicator {\n    opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n    opacity: 0;\n}\n\n.select-field.is-valid .valid-feedback,\n.select-field.is-invalid .invalid-feedback {\n    display: flex;\n}\n\n.select-field .form-control-icon {\n    padding-left: 2em;\n}\n\n.select-field .form-group-inner-icon {\n    position: absolute;\n    top: 50%;\n    left: .666em;\n    width: 1rem;\n    font-size: 1em;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.select-field-sm .form-group-inner-icon {\n    position: absolute;\n    top: 50%;\n    left: .666rem;\n    width: .75em;\n    font-size: 1.5em;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.select-field-lg .form-group-inner-icon {\n    position: absolute;\n    top: 50%;\n    left: .666rem;\n    width: 1.25em;\n    font-size: 1em;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.select-field .activity-indicator {\n    opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n    opacity: 0;\n}\n</style>\n\n"],"names":["_sfc_main","defineComponent","ActivityIndicator","FormControl","_hoisted_2","_hoisted_3","_hoisted_4","_createElementVNode","_hoisted_5","_resolveDirective","_normalizeClass","_ctx","_openBlock","_createElementBlock","_toDisplayString","_hoisted_1","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_cache","args","_withDirectives","_mergeProps","$event","_createVNode","_Transition","_withCtx","_createBlock","_component_activity_indicator","_component_FormControlErrors","_createTextVNode","error","_component_FormControlFeedback","feedback"],"mappings":"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"}

package/dist/select-field.umd.cjs

@@ -1,2 +0,0 @@
-(function(r,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("@vue-interface/activity-indicator"),require("@vue-interface/form-control"),require("vue")):typeof define=="function"&&define.amd?define(["exports","@vue-interface/activity-indicator","@vue-interface/form-control","vue"],i):(r=typeof globalThis<"u"?globalThis:r||self,i(r.SelectField={},r.ActivityIndicator,r.FormControl,r.Vue))})(this,function(r,i,d,e){"use strict";const c=e.defineComponent({name:"SelectField",components:{ActivityIndicator:i.ActivityIndicator},extends:d.FormControl,props:{formControlClass:{type:String,default:"form-select"}},computed:{controlClass(){return this.plaintext?`${this.formControlClass}-plaintext`:this.formControlClass}}}),g="",m=(o,n)=>{const l=o.__vccOpts||o;for(const[s,a]of n)l[s]=a;return l},p=["for"],f={class:"form-group-inner"},k={invalid:"",class:"invalid-feedback"},y=e.createElementVNode("br",null,null,-1),C={valid:"",class:"valid-feedback"};function b(o,n,l,s,a,E){const $=e.resolveComponent("activity-indicator"),h=e.resolveComponent("FormControlErrors"),B=e.resolveComponent("FormControlFeedback"),V=e.resolveDirective("bind-events");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(o.formGroupClasses)},[e.renderSlot(o.$slots,"label",{},()=>[o.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",for:o.id,class:e.normalizeClass(o.labelClass)},e.toDisplayString(o.label),11,p)):e.createCommentVNode("",!0)]),e.createElementVNode("div",f,[e.renderSlot(o.$slots,"control",e.normalizeProps(e.guardReactiveProps({bindEvents:o.bindEvents,controlAttributes:o.controlAttributes})),()=>[o.$slots.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-group-inner-icon",onClick:n[0]||(n[0]=(...t)=>o.focus&&o.focus(...t))},[e.renderSlot(o.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives((e.openBlock(),e.createElementBlock("select",e.mergeProps({ref:"field","onUpdate:modelValue":n[1]||(n[1]=t=>o.model=t)},Object.assign({disabled:o.$attrs.readonly},o.controlAttributes)),[e.renderSlot(o.$slots,"default")],16)),[[e.vModelSelect,o.model],[V]])]),e.renderSlot(o.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"select-field-fade"},{default:e.withCtx(()=>[o.activity?(e.openBlock(),e.createBlock($,{key:"activity",ref:"activity",type:o.indicator,size:o.indicatorSize||o.size},null,8,["type","size"])):e.createCommentVNode("",!0)]),_:1})])]),e.renderSlot(o.$slots,"errors",e.normalizeProps(e.guardReactiveProps({error:o.error,errors:o.errors,id:o.$attrs.id,name:o.$attrs.name})),()=>[o.error||o.errors?(e.openBlock(),e.createBlock(h,{key:0,id:o.$attrs.id,name:o.$attrs.name,error:o.error,errors:o.errors},{default:e.withCtx(({error:t})=>[e.createElementVNode("div",k,[e.createTextVNode(e.toDisplayString(t),1),y])]),_:1},8,["id","name","error","errors"])):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,"feedback",e.normalizeProps(e.guardReactiveProps({feedback:o.feedback})),()=>[e.createVNode(B,{feedback:o.feedback},{default:e.withCtx(({feedback:t})=>[e.createElementVNode("div",C,e.toDisplayString(t),1)]),_:1},8,["feedback"])]),e.renderSlot(o.$slots,"help",{},()=>[o.helpText?(e.openBlock(),e.createElementBlock("small",{key:0,ref:"help"},e.toDisplayString(o.helpText),513)):e.createCommentVNode("",!0)])],2)}const S=m(c,[["render",b]]);r.SelectField=S,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
-//# sourceMappingURL=select-field.umd.cjs.map

package/dist/select-field.umd.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"select-field.umd.cjs","sources":["../src/SelectField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { FormControl } from '@vue-interface/form-control';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n\n    name: 'SelectField',\n\n    components: {\n        ActivityIndicator,\n    },\n\n    extends: FormControl,\n\n    props: {\n        /**\n         * The default class name assigned to the control element\n         *\n         * @param {String}\n         * @default 'form-select'\n         */\n        formControlClass: {\n            type: String,\n            default: 'form-select'\n        }   \n    },\n\n    computed: {\n        controlClass() {\n            return this.plaintext ?\n                `${this.formControlClass}-plaintext`\n                : this.formControlClass;\n        }\n    }\n\n});\n</script>\n\n<template>\n    <div :class=\"formGroupClasses\">\n        <slot name=\"label\">\n            <label\n                v-if=\"label\"\n                ref=\"label\"\n                :for=\"id\"\n                :class=\"labelClass\">\n                {{ label }}\n            </label>\n        </slot>\n\n        <div class=\"form-group-inner\">\n            <slot\n                name=\"control\"\n                v-bind=\"{ bindEvents, controlAttributes }\">\n                <div\n                    v-if=\"$slots.icon\"\n                    class=\"form-group-inner-icon\"\n                    @click=\"focus\">\n                    <slot name=\"icon\" />\n                </div>\n                <select\n                    ref=\"field\"\n                    v-model=\"model\"\n                    v-bind-events\n                    v-bind=\"Object.assign({\n                        ['disabled']: $attrs.readonly\n                    }, controlAttributes)\">\n                    <slot />\n                </select>\n            </slot>\n\n            <slot name=\"activity\">\n                <transition name=\"select-field-fade\">\n                    <activity-indicator\n                        v-if=\"activity\"\n                        key=\"activity\"\n                        ref=\"activity\"\n                        :type=\"indicator\"\n                        :size=\"indicatorSize || size\" />\n                </transition>\n            </slot>\n        </div>\n\n        <slot\n            name=\"errors\"\n            v-bind=\"{ error, errors, id: $attrs.id, name: $attrs.name }\">        \n            <FormControlErrors\n                v-if=\"!!(error || errors)\"\n                :id=\"$attrs.id\"\n                v-slot=\"{ error }\"\n                :name=\"$attrs.name\"\n                :error=\"error\"\n                :errors=\"errors\">\n                <div\n                    invalid\n                    class=\"invalid-feedback\">\n                    {{ error }}<br>\n                </div>\n            </FormControlErrors>\n        </slot>\n        \n        <slot\n            name=\"feedback\"\n            v-bind=\"{ feedback }\">\n            <FormControlFeedback\n                v-slot=\"{ feedback }\"\n                :feedback=\"feedback\">\n                <div\n                    valid\n                    class=\"valid-feedback\">\n                    {{ feedback }}\n                </div>\n            </FormControlFeedback>\n        </slot>\n\n        <slot name=\"help\">\n            <small\n                v-if=\"helpText\"\n                ref=\"help\">\n                {{ helpText }}\n            </small>\n        </slot>\n    </div>\n</template>\n\n<style>\n.select-field,\n.select-field .form-group-inner {\n    position: relative;\n    transition: all .25s ease-in-out;\n}\n\n.select-field .activity-indicator {\n    position: absolute;\n    right: 1.25em;\n    top: 50%;\n    transform: translate(-1rem, -50%);\n    transition: all .15s ease-in;\n}\n\n.select-field .activity-indicator-xs {\n    font-size: .5em;\n    right: 2em;\n}\n\n.select-field.has-activity .form-control-xs {\n    padding-right: 3.75em;\n}\n\n.select-field .activity-indicator-sm {\n    font-size: .5em;\n    right: 2em;\n}\n\n.select-field.has-activity .form-control-sm {\n    padding-right: 3em;\n}\n\n.select-field .activity-indicator-md {\n    font-size: .666em;\n}\n\n.select-field.has-activity .form-control-md {\n    padding-right: 3em;\n}\n\n.select-field .activity-indicator-lg {\n    font-size: .75em;\n}\n\n.select-field.has-activity .form-control-lg {\n    padding-right: 3em;\n}\n\n.select-field .activity-indicator-xl {\n    font-size: 1em;\n}\n\n.select-field.has-activity .activity-indicator-xl ~ .form-control-xl {\n    padding-right: 3.75em;\n}\n\n.select-field .activity-indicator {\n    opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n    opacity: 0;\n}\n\n.select-field.is-valid .valid-feedback,\n.select-field.is-invalid .invalid-feedback {\n    display: flex;\n}\n\n.select-field .form-control-icon {\n    padding-left: 2em;\n}\n\n.select-field .form-group-inner-icon {\n    position: absolute;\n    top: 50%;\n    left: .666em;\n    width: 1rem;\n    font-size: 1em;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.select-field-sm .form-group-inner-icon {\n    position: absolute;\n    top: 50%;\n    left: .666rem;\n    width: .75em;\n    font-size: 1.5em;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.select-field-lg .form-group-inner-icon {\n    position: absolute;\n    top: 50%;\n    left: .666rem;\n    width: 1.25em;\n    font-size: 1em;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.select-field .activity-indicator {\n    opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n    opacity: 0;\n}\n</style>\n\n"],"names":["_sfc_main","defineComponent","ActivityIndicator","FormControl","_hoisted_2","_hoisted_3","_hoisted_4","_createElementVNode","_hoisted_5","_resolveDirective","_normalizeClass","_ctx","_openBlock","_createElementBlock","_toDisplayString","_hoisted_1","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_cache","args","_withDirectives","_mergeProps","$event","_createVNode","_Transition","_withCtx","_createBlock","_component_activity_indicator","_component_FormControlErrors","_createTextVNode","error","_component_FormControlFeedback","feedback"],"mappings":"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"}