@vue-interface/select-field 1.0.0-beta.14 → 1.0.0-beta.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/select-field.js
CHANGED
|
@@ -45,8 +45,11 @@ const H = ["for"], J = { class: "form-group-inner" }, K = {
|
|
|
45
45
|
}
|
|
46
46
|
return w(() => {
|
|
47
47
|
if (b().default)
|
|
48
|
-
for (const e of b().default())
|
|
48
|
+
for (const e of b().default()) {
|
|
49
|
+
if (!e.props)
|
|
50
|
+
return;
|
|
49
51
|
"selected" in e.props && (e.props.value ?? e.children) && (n.value = e.props.value ?? e.children);
|
|
52
|
+
}
|
|
50
53
|
}), (e, l) => {
|
|
51
54
|
const z = E("ActivityIndicator");
|
|
52
55
|
return s(), u("div", {
|
package/dist/select-field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-field.js","sources":["../src/SelectField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T, V\">\nimport type { CheckedFormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { onMounted, ref, useSlots } from 'vue';\n\ndefineSlots<FormControlSlots<T>>();\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: T): void;\n}>();\n\nconst props = withDefaults(defineProps<CheckedFormControlProps<T, V>>(), {\n formControlClass: 'form-select',\n labelClass: 'form-label'\n});\n\nconst {\n controlAttributes,\n formGroupClasses,\n model,\n onClick,\n onBlur,\n onFocus\n} = useFormControl<T,V>({ props, emit });\n\nconst field = ref<HTMLSelectElement>();\n\nfunction onMousedown(e) {\n onClick(e);\n\n field.value.focus();\n}\n\n// Check the option slots for selected options. If the field has hardcoded\n// selected options, this will ensure the value of the field is always set to\n// the property. This will ensure the model is updated to the selected value.\nonMounted(() => {\n if(!useSlots().default) {\n return;\n }\n\n for(const child of useSlots().default()) {\n if('selected' in child.props && (child.props.value ?? child.children)) {\n model.value = child.props.value ?? child.children;\n }\n }\n});\n</script>\n\n<template>\n <div\n class=\"select-field\"\n :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"label\"\n ref=\"label\"\n :for=\"controlAttributes.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=\"{ onClick, onBlur, onFocus, controlAttributes }\">\n <div\n v-if=\"useSlots().icon\"\n class=\"form-group-inner-icon\"\n @click=\"field.focus\">\n <slot name=\"icon\" />\n </div>\n <select\n ref=\"field\"\n v-model=\"model\"\n class=\"form-select\"\n v-bind=\"controlAttributes\"\n @mousedown=\"onMousedown\"\n @blur=\"onBlur\"\n @focus=\"onFocus\">\n <slot />\n </select>\n </slot>\n\n <slot name=\"activity\">\n <Transition name=\"select-field-fade\">\n <ActivityIndicator\n v-if=\"activity && indicator\"\n key=\"activity\"\n ref=\"activity\"\n :type=\"indicator\"\n :size=\"indicatorSize\" />\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 && String($attrs.id)\"\n v-slot=\"{ error }\"\n :name=\"$attrs.name && String($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\n name=\"help\"\n v-bind=\"{ helpText }\">\n <small\n v-if=\"helpText\"\n ref=\"help\">\n {{ helpText }}\n </small>\n </slot>\n </div>\n</template>"],"names":["controlAttributes","formGroupClasses","model","onClick","onBlur","onFocus","useFormControl","props","emit","field","ref","onMousedown","onMounted","useSlots","child"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgBM;AAAA,MACF,mBAAAA;AAAA,MACA,kBAAAC;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,IACA,IAAAC,EAAoB,EAAE,OAAAC,GAAO,MAAAC,EAAM,CAAA,GAEjCC,IAAQC;AAEd,aAASC,EAAY,GAAG;AACpB,MAAAR,EAAQ,CAAC,GAETM,EAAM,MAAM;IAChB;AAKA,WAAAG,EAAU,MAAM;AACT,UAACC,EAAS,EAAE;AAIf,mBAAUC,KAASD,EAAW,EAAA,QAAA;
|
|
1
|
+
{"version":3,"file":"select-field.js","sources":["../src/SelectField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T, V\">\nimport type { CheckedFormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { onMounted, ref, useSlots } from 'vue';\n\ndefineSlots<FormControlSlots<T>>();\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: T): void;\n}>();\n\nconst props = withDefaults(defineProps<CheckedFormControlProps<T, V>>(), {\n formControlClass: 'form-select',\n labelClass: 'form-label'\n});\n\nconst {\n controlAttributes,\n formGroupClasses,\n model,\n onClick,\n onBlur,\n onFocus\n} = useFormControl<T,V>({ props, emit });\n\nconst field = ref<HTMLSelectElement>();\n\nfunction onMousedown(e) {\n onClick(e);\n\n field.value.focus();\n}\n\n// Check the option slots for selected options. If the field has hardcoded\n// selected options, this will ensure the value of the field is always set to\n// the property. This will ensure the model is updated to the selected value.\nonMounted(() => {\n if(!useSlots().default) {\n return;\n }\n\n for(const child of useSlots().default()) {\n if(!child.props) {\n return;\n }\n \n if('selected' in child.props && (child.props.value ?? child.children)) {\n model.value = child.props.value ?? child.children;\n }\n }\n});\n</script>\n\n<template>\n <div\n class=\"select-field\"\n :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"label\"\n ref=\"label\"\n :for=\"controlAttributes.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=\"{ onClick, onBlur, onFocus, controlAttributes }\">\n <div\n v-if=\"useSlots().icon\"\n class=\"form-group-inner-icon\"\n @click=\"field.focus\">\n <slot name=\"icon\" />\n </div>\n <select\n ref=\"field\"\n v-model=\"model\"\n class=\"form-select\"\n v-bind=\"controlAttributes\"\n @mousedown=\"onMousedown\"\n @blur=\"onBlur\"\n @focus=\"onFocus\">\n <slot />\n </select>\n </slot>\n\n <slot name=\"activity\">\n <Transition name=\"select-field-fade\">\n <ActivityIndicator\n v-if=\"activity && indicator\"\n key=\"activity\"\n ref=\"activity\"\n :type=\"indicator\"\n :size=\"indicatorSize\" />\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 && String($attrs.id)\"\n v-slot=\"{ error }\"\n :name=\"$attrs.name && String($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\n name=\"help\"\n v-bind=\"{ helpText }\">\n <small\n v-if=\"helpText\"\n ref=\"help\">\n {{ helpText }}\n </small>\n </slot>\n </div>\n</template>"],"names":["controlAttributes","formGroupClasses","model","onClick","onBlur","onFocus","useFormControl","props","emit","field","ref","onMousedown","onMounted","useSlots","child"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgBM;AAAA,MACF,mBAAAA;AAAA,MACA,kBAAAC;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,IACA,IAAAC,EAAoB,EAAE,OAAAC,GAAO,MAAAC,EAAM,CAAA,GAEjCC,IAAQC;AAEd,aAASC,EAAY,GAAG;AACpB,MAAAR,EAAQ,CAAC,GAETM,EAAM,MAAM;IAChB;AAKA,WAAAG,EAAU,MAAM;AACT,UAACC,EAAS,EAAE;AAIf,mBAAUC,KAASD,EAAW,EAAA,QAAA,GAAW;AAClC,cAAA,CAACC,EAAM;AACN;AAGJ,UAAG,cAAcA,EAAM,UAAUA,EAAM,MAAM,SAASA,EAAM,cACxDZ,EAAM,QAAQY,EAAM,MAAM,SAASA,EAAM;AAAA,QAEjD;AAAA,IAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vue-interface/form-control")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/form-control"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.SelectField={},t.Vue,t.VueInterfaceFormControl))})(this,function(t,e,s){"use strict";const p=["for"],m={class:"form-group-inner"},k={invalid:"",class:"invalid-feedback"},y=e.createElementVNode("br",null,null,-1),S={valid:"",class:"valid-feedback"},b=e.defineComponent({__name:"SelectField",props:{activity:{type:Boolean},disabled:{type:Boolean},error:{},errors:{},feedback:{},formControlClass:{default:"form-select"},helpText:{},id:{},indicator:{},indicatorSize:{},invalid:{type:Boolean},label:{},labelClass:{default:"form-label"},modelValue:{},name:{},plaintext:{type:Boolean},readonly:{type:Boolean},valid:{type:Boolean},value:{},checked:{type:Boolean}},emits:["update:modelValue"],setup(B,{emit:C}){const V=B,{controlAttributes:a,formGroupClasses:h,model:n,onClick:c,onBlur:d,onFocus:f}=s.useFormControl({props:V,emit:C}),i=e.ref();function u(o){c(o),i.value.focus()}return e.onMounted(()=>{if(e.useSlots().default)for(const o of e.useSlots().default())"selected"in o.props&&(o.props.value??o.children)&&(n.value=o.props.value??o.children)}),(o,l)=>{const $=e.resolveComponent("ActivityIndicator");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["select-field",e.unref(h)])},[e.renderSlot(o.$slots,"label",{},()=>[o.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",for:e.unref(a).id,class:e.normalizeClass(o.labelClass)},e.toDisplayString(o.label),11,p)):e.createCommentVNode("",!0)]),e.createElementVNode("div",m,[e.renderSlot(o.$slots,"control",e.normalizeProps(e.guardReactiveProps({onClick:e.unref(c),onBlur:e.unref(d),onFocus:e.unref(f),controlAttributes:e.unref(a)})),()=>[e.useSlots().icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-group-inner-icon",onClick:l[0]||(l[0]=(...r)=>i.value.focus&&i.value.focus(...r))},[e.renderSlot(o.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("select",e.mergeProps({ref_key:"field",ref:i,"onUpdate:modelValue":l[1]||(l[1]=r=>e.isRef(n)?n.value=r:null),class:"form-select"},e.unref(a),{onMousedown:u,onBlur:l[2]||(l[2]=(...r)=>e.unref(d)&&e.unref(d)(...r)),onFocus:l[3]||(l[3]=(...r)=>e.unref(f)&&e.unref(f)(...r))}),[e.renderSlot(o.$slots,"default")],16),[[e.vModelSelect,e.unref(n)]])]),e.renderSlot(o.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"select-field-fade"},{default:e.withCtx(()=>[o.activity&&o.indicator?(e.openBlock(),e.createBlock($,{key:"activity",ref:"activity",type:o.indicator,size:o.indicatorSize},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(e.unref(s.FormControlErrors),{key:0,id:o.$attrs.id&&String(o.$attrs.id),name:o.$attrs.name&&String(o.$attrs.name),error:o.error,errors:o.errors},{default:e.withCtx(({error:r})=>[e.createElementVNode("div",k,[e.createTextVNode(e.toDisplayString(r),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(e.unref(s.FormControlFeedback),{feedback:o.feedback},{default:e.withCtx(({feedback:r})=>[e.createElementVNode("div",S,e.toDisplayString(r),1)]),_:1},8,["feedback"])]),e.renderSlot(o.$slots,"help",e.normalizeProps(e.guardReactiveProps({helpText:o.helpText})),()=>[o.helpText?(e.openBlock(),e.createElementBlock("small",{key:0,ref:"help"},e.toDisplayString(o.helpText),513)):e.createCommentVNode("",!0)])],2)}}});t.SelectField=b,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vue-interface/form-control")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/form-control"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.SelectField={},t.Vue,t.VueInterfaceFormControl))})(this,function(t,e,s){"use strict";const p=["for"],m={class:"form-group-inner"},k={invalid:"",class:"invalid-feedback"},y=e.createElementVNode("br",null,null,-1),S={valid:"",class:"valid-feedback"},b=e.defineComponent({__name:"SelectField",props:{activity:{type:Boolean},disabled:{type:Boolean},error:{},errors:{},feedback:{},formControlClass:{default:"form-select"},helpText:{},id:{},indicator:{},indicatorSize:{},invalid:{type:Boolean},label:{},labelClass:{default:"form-label"},modelValue:{},name:{},plaintext:{type:Boolean},readonly:{type:Boolean},valid:{type:Boolean},value:{},checked:{type:Boolean}},emits:["update:modelValue"],setup(B,{emit:C}){const V=B,{controlAttributes:a,formGroupClasses:h,model:n,onClick:c,onBlur:d,onFocus:f}=s.useFormControl({props:V,emit:C}),i=e.ref();function u(o){c(o),i.value.focus()}return e.onMounted(()=>{if(e.useSlots().default)for(const o of e.useSlots().default()){if(!o.props)return;"selected"in o.props&&(o.props.value??o.children)&&(n.value=o.props.value??o.children)}}),(o,l)=>{const $=e.resolveComponent("ActivityIndicator");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["select-field",e.unref(h)])},[e.renderSlot(o.$slots,"label",{},()=>[o.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",for:e.unref(a).id,class:e.normalizeClass(o.labelClass)},e.toDisplayString(o.label),11,p)):e.createCommentVNode("",!0)]),e.createElementVNode("div",m,[e.renderSlot(o.$slots,"control",e.normalizeProps(e.guardReactiveProps({onClick:e.unref(c),onBlur:e.unref(d),onFocus:e.unref(f),controlAttributes:e.unref(a)})),()=>[e.useSlots().icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-group-inner-icon",onClick:l[0]||(l[0]=(...r)=>i.value.focus&&i.value.focus(...r))},[e.renderSlot(o.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("select",e.mergeProps({ref_key:"field",ref:i,"onUpdate:modelValue":l[1]||(l[1]=r=>e.isRef(n)?n.value=r:null),class:"form-select"},e.unref(a),{onMousedown:u,onBlur:l[2]||(l[2]=(...r)=>e.unref(d)&&e.unref(d)(...r)),onFocus:l[3]||(l[3]=(...r)=>e.unref(f)&&e.unref(f)(...r))}),[e.renderSlot(o.$slots,"default")],16),[[e.vModelSelect,e.unref(n)]])]),e.renderSlot(o.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"select-field-fade"},{default:e.withCtx(()=>[o.activity&&o.indicator?(e.openBlock(),e.createBlock($,{key:"activity",ref:"activity",type:o.indicator,size:o.indicatorSize},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(e.unref(s.FormControlErrors),{key:0,id:o.$attrs.id&&String(o.$attrs.id),name:o.$attrs.name&&String(o.$attrs.name),error:o.error,errors:o.errors},{default:e.withCtx(({error:r})=>[e.createElementVNode("div",k,[e.createTextVNode(e.toDisplayString(r),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(e.unref(s.FormControlFeedback),{feedback:o.feedback},{default:e.withCtx(({feedback:r})=>[e.createElementVNode("div",S,e.toDisplayString(r),1)]),_:1},8,["feedback"])]),e.renderSlot(o.$slots,"help",e.normalizeProps(e.guardReactiveProps({helpText:o.helpText})),()=>[o.helpText?(e.openBlock(),e.createElementBlock("small",{key:0,ref:"help"},e.toDisplayString(o.helpText),513)):e.createCommentVNode("",!0)])],2)}}});t.SelectField=b,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
|
|
2
2
|
//# sourceMappingURL=select-field.umd.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-field.umd.cjs","sources":["../src/SelectField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T, V\">\nimport type { CheckedFormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { onMounted, ref, useSlots } from 'vue';\n\ndefineSlots<FormControlSlots<T>>();\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: T): void;\n}>();\n\nconst props = withDefaults(defineProps<CheckedFormControlProps<T, V>>(), {\n formControlClass: 'form-select',\n labelClass: 'form-label'\n});\n\nconst {\n controlAttributes,\n formGroupClasses,\n model,\n onClick,\n onBlur,\n onFocus\n} = useFormControl<T,V>({ props, emit });\n\nconst field = ref<HTMLSelectElement>();\n\nfunction onMousedown(e) {\n onClick(e);\n\n field.value.focus();\n}\n\n// Check the option slots for selected options. If the field has hardcoded\n// selected options, this will ensure the value of the field is always set to\n// the property. This will ensure the model is updated to the selected value.\nonMounted(() => {\n if(!useSlots().default) {\n return;\n }\n\n for(const child of useSlots().default()) {\n if('selected' in child.props && (child.props.value ?? child.children)) {\n model.value = child.props.value ?? child.children;\n }\n }\n});\n</script>\n\n<template>\n <div\n class=\"select-field\"\n :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"label\"\n ref=\"label\"\n :for=\"controlAttributes.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=\"{ onClick, onBlur, onFocus, controlAttributes }\">\n <div\n v-if=\"useSlots().icon\"\n class=\"form-group-inner-icon\"\n @click=\"field.focus\">\n <slot name=\"icon\" />\n </div>\n <select\n ref=\"field\"\n v-model=\"model\"\n class=\"form-select\"\n v-bind=\"controlAttributes\"\n @mousedown=\"onMousedown\"\n @blur=\"onBlur\"\n @focus=\"onFocus\">\n <slot />\n </select>\n </slot>\n\n <slot name=\"activity\">\n <Transition name=\"select-field-fade\">\n <ActivityIndicator\n v-if=\"activity && indicator\"\n key=\"activity\"\n ref=\"activity\"\n :type=\"indicator\"\n :size=\"indicatorSize\" />\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 && String($attrs.id)\"\n v-slot=\"{ error }\"\n :name=\"$attrs.name && String($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\n name=\"help\"\n v-bind=\"{ helpText }\">\n <small\n v-if=\"helpText\"\n ref=\"help\">\n {{ helpText }}\n </small>\n </slot>\n </div>\n</template>"],"names":["controlAttributes","formGroupClasses","model","onClick","onBlur","onFocus","useFormControl","props","emit","field","ref","onMousedown","e","onMounted","useSlots","child"],"mappings":"o9BAgBM,CACF,kBAAAA,EACA,iBAAAC,EACA,MAAAC,EACA,QAAAC,EACA,OAAAC,EACA,QAAAC,CACA,EAAAC,iBAAoB,CAAE,MAAAC,EAAO,KAAAC,CAAM,CAAA,EAEjCC,EAAQC,EAAAA,MAEd,SAASC,EAAYC,EAAG,CACpBT,EAAQS,CAAC,EAETH,EAAM,MAAM,OAChB,CAKAI,OAAAA,EAAAA,UAAU,IAAM,CACT,GAACC,EAAAA,SAAS,EAAE,QAIf,UAAUC,KAASD,WAAW,EAAA,QAAA,
|
|
1
|
+
{"version":3,"file":"select-field.umd.cjs","sources":["../src/SelectField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T, V\">\nimport type { CheckedFormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { onMounted, ref, useSlots } from 'vue';\n\ndefineSlots<FormControlSlots<T>>();\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: T): void;\n}>();\n\nconst props = withDefaults(defineProps<CheckedFormControlProps<T, V>>(), {\n formControlClass: 'form-select',\n labelClass: 'form-label'\n});\n\nconst {\n controlAttributes,\n formGroupClasses,\n model,\n onClick,\n onBlur,\n onFocus\n} = useFormControl<T,V>({ props, emit });\n\nconst field = ref<HTMLSelectElement>();\n\nfunction onMousedown(e) {\n onClick(e);\n\n field.value.focus();\n}\n\n// Check the option slots for selected options. If the field has hardcoded\n// selected options, this will ensure the value of the field is always set to\n// the property. This will ensure the model is updated to the selected value.\nonMounted(() => {\n if(!useSlots().default) {\n return;\n }\n\n for(const child of useSlots().default()) {\n if(!child.props) {\n return;\n }\n \n if('selected' in child.props && (child.props.value ?? child.children)) {\n model.value = child.props.value ?? child.children;\n }\n }\n});\n</script>\n\n<template>\n <div\n class=\"select-field\"\n :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"label\"\n ref=\"label\"\n :for=\"controlAttributes.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=\"{ onClick, onBlur, onFocus, controlAttributes }\">\n <div\n v-if=\"useSlots().icon\"\n class=\"form-group-inner-icon\"\n @click=\"field.focus\">\n <slot name=\"icon\" />\n </div>\n <select\n ref=\"field\"\n v-model=\"model\"\n class=\"form-select\"\n v-bind=\"controlAttributes\"\n @mousedown=\"onMousedown\"\n @blur=\"onBlur\"\n @focus=\"onFocus\">\n <slot />\n </select>\n </slot>\n\n <slot name=\"activity\">\n <Transition name=\"select-field-fade\">\n <ActivityIndicator\n v-if=\"activity && indicator\"\n key=\"activity\"\n ref=\"activity\"\n :type=\"indicator\"\n :size=\"indicatorSize\" />\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 && String($attrs.id)\"\n v-slot=\"{ error }\"\n :name=\"$attrs.name && String($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\n name=\"help\"\n v-bind=\"{ helpText }\">\n <small\n v-if=\"helpText\"\n ref=\"help\">\n {{ helpText }}\n </small>\n </slot>\n </div>\n</template>"],"names":["controlAttributes","formGroupClasses","model","onClick","onBlur","onFocus","useFormControl","props","emit","field","ref","onMousedown","e","onMounted","useSlots","child"],"mappings":"o9BAgBM,CACF,kBAAAA,EACA,iBAAAC,EACA,MAAAC,EACA,QAAAC,EACA,OAAAC,EACA,QAAAC,CACA,EAAAC,iBAAoB,CAAE,MAAAC,EAAO,KAAAC,CAAM,CAAA,EAEjCC,EAAQC,EAAAA,MAEd,SAASC,EAAYC,EAAG,CACpBT,EAAQS,CAAC,EAETH,EAAM,MAAM,OAChB,CAKAI,OAAAA,EAAAA,UAAU,IAAM,CACT,GAACC,EAAAA,SAAS,EAAE,QAIf,UAAUC,KAASD,WAAW,EAAA,QAAA,EAAW,CAClC,GAAA,CAACC,EAAM,MACN,OAGD,aAAcA,EAAM,QAAUA,EAAM,MAAM,OAASA,EAAM,YACxDb,EAAM,MAAQa,EAAM,MAAM,OAASA,EAAM,SAEjD,CAAA,CACH"}
|