@vue-interface/select-field 1.0.0-beta.14 → 1.0.0-beta.16
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
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
import { defineComponent as z, ref as N, onMounted as w, useSlots as k, openBlock as t, createElementBlock as u, normalizeClass as $, unref as o, renderSlot as s, toDisplayString as f, createCommentVNode as a, createElementVNode as i, normalizeProps as p, guardReactiveProps as m, withDirectives as A, mergeProps as E, isRef as M, vModelSelect as P, createVNode as B, Transition as D, withCtx as y, createBlock as h, createTextVNode as R } from "vue";
|
|
2
|
+
import { ActivityIndicator as G } from "@vue-interface/activity-indicator";
|
|
3
|
+
import { useFormControl as I, FormControlErrors as U, FormControlFeedback as j } from "@vue-interface/form-control";
|
|
4
|
+
const q = ["for"], H = { class: "form-group-inner" }, J = {
|
|
4
5
|
invalid: "",
|
|
5
6
|
class: "invalid-feedback"
|
|
6
|
-
},
|
|
7
|
+
}, K = /* @__PURE__ */ i("br", null, null, -1), L = {
|
|
7
8
|
valid: "",
|
|
8
9
|
class: "valid-feedback"
|
|
9
|
-
}, X = /* @__PURE__ */
|
|
10
|
+
}, X = /* @__PURE__ */ z({
|
|
10
11
|
__name: "SelectField",
|
|
11
12
|
props: {
|
|
12
13
|
activity: { type: Boolean },
|
|
@@ -33,107 +34,107 @@ const H = ["for"], J = { class: "form-group-inner" }, K = {
|
|
|
33
34
|
emits: ["update:modelValue"],
|
|
34
35
|
setup(S, { emit: F }) {
|
|
35
36
|
const g = S, {
|
|
36
|
-
controlAttributes:
|
|
37
|
+
controlAttributes: c,
|
|
37
38
|
formGroupClasses: T,
|
|
38
39
|
model: n,
|
|
39
40
|
onClick: C,
|
|
40
41
|
onBlur: v,
|
|
41
|
-
onFocus:
|
|
42
|
-
} =
|
|
42
|
+
onFocus: b
|
|
43
|
+
} = I({ props: g, emit: F }), d = N();
|
|
43
44
|
function V(e) {
|
|
44
45
|
C(e), d.value.focus();
|
|
45
46
|
}
|
|
46
47
|
return w(() => {
|
|
47
|
-
if (
|
|
48
|
-
for (const e of
|
|
48
|
+
if (k().default)
|
|
49
|
+
for (const e of k().default()) {
|
|
50
|
+
if (!e.props)
|
|
51
|
+
return;
|
|
49
52
|
"selected" in e.props && (e.props.value ?? e.children) && (n.value = e.props.value ?? e.children);
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}, [
|
|
55
|
-
t(
|
|
56
|
-
|
|
53
|
+
}
|
|
54
|
+
}), (e, l) => (t(), u("div", {
|
|
55
|
+
class: $(["select-field", o(T)])
|
|
56
|
+
}, [
|
|
57
|
+
s(e.$slots, "label", {}, () => [
|
|
58
|
+
e.label ? (t(), u("label", {
|
|
59
|
+
key: 0,
|
|
60
|
+
ref: "label",
|
|
61
|
+
for: o(c).id,
|
|
62
|
+
class: $(e.labelClass)
|
|
63
|
+
}, f(e.label), 11, q)) : a("", !0)
|
|
64
|
+
]),
|
|
65
|
+
i("div", H, [
|
|
66
|
+
s(e.$slots, "control", p(m({ onClick: o(C), onBlur: o(v), onFocus: o(b), controlAttributes: o(c) })), () => [
|
|
67
|
+
k().icon ? (t(), u("div", {
|
|
57
68
|
key: 0,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
},
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
onMousedown: V,
|
|
80
|
-
onBlur: l[2] || (l[2] = //@ts-ignore
|
|
81
|
-
(...r) => o(v) && o(v)(...r)),
|
|
82
|
-
onFocus: l[3] || (l[3] = //@ts-ignore
|
|
83
|
-
(...r) => o(y) && o(y)(...r))
|
|
84
|
-
}), [
|
|
85
|
-
t(e.$slots, "default")
|
|
86
|
-
], 16), [
|
|
87
|
-
[I, o(n)]
|
|
88
|
-
])
|
|
89
|
-
]),
|
|
90
|
-
t(e.$slots, "activity", {}, () => [
|
|
91
|
-
B(R, { name: "select-field-fade" }, {
|
|
92
|
-
default: k(() => [
|
|
93
|
-
e.activity && e.indicator ? (s(), h(z, {
|
|
94
|
-
key: "activity",
|
|
95
|
-
ref: "activity",
|
|
96
|
-
type: e.indicator,
|
|
97
|
-
size: e.indicatorSize
|
|
98
|
-
}, null, 8, ["type", "size"])) : a("", !0)
|
|
99
|
-
]),
|
|
100
|
-
_: 1
|
|
101
|
-
})
|
|
69
|
+
class: "form-group-inner-icon",
|
|
70
|
+
onClick: l[0] || (l[0] = //@ts-ignore
|
|
71
|
+
(...r) => d.value.focus && d.value.focus(...r))
|
|
72
|
+
}, [
|
|
73
|
+
s(e.$slots, "icon")
|
|
74
|
+
])) : a("", !0),
|
|
75
|
+
A(i("select", E({
|
|
76
|
+
ref_key: "field",
|
|
77
|
+
ref: d,
|
|
78
|
+
"onUpdate:modelValue": l[1] || (l[1] = (r) => M(n) ? n.value = r : null),
|
|
79
|
+
class: "form-select"
|
|
80
|
+
}, o(c), {
|
|
81
|
+
onMousedown: V,
|
|
82
|
+
onBlur: l[2] || (l[2] = //@ts-ignore
|
|
83
|
+
(...r) => o(v) && o(v)(...r)),
|
|
84
|
+
onFocus: l[3] || (l[3] = //@ts-ignore
|
|
85
|
+
(...r) => o(b) && o(b)(...r))
|
|
86
|
+
}), [
|
|
87
|
+
s(e.$slots, "default")
|
|
88
|
+
], 16), [
|
|
89
|
+
[P, o(n)]
|
|
102
90
|
])
|
|
103
91
|
]),
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
i("div", K, [
|
|
114
|
-
G(f(r), 1),
|
|
115
|
-
L
|
|
116
|
-
])
|
|
117
|
-
]),
|
|
118
|
-
_: 1
|
|
119
|
-
}, 8, ["id", "name", "error", "errors"])) : a("", !0)
|
|
120
|
-
]),
|
|
121
|
-
t(e.$slots, "feedback", p(c({ feedback: e.feedback })), () => [
|
|
122
|
-
B(o(q), { feedback: e.feedback }, {
|
|
123
|
-
default: k(({ feedback: r }) => [
|
|
124
|
-
i("div", O, f(r), 1)
|
|
92
|
+
s(e.$slots, "activity", {}, () => [
|
|
93
|
+
B(D, { name: "select-field-fade" }, {
|
|
94
|
+
default: y(() => [
|
|
95
|
+
e.activity && e.indicator ? (t(), h(o(G), {
|
|
96
|
+
key: "activity",
|
|
97
|
+
ref: "activity",
|
|
98
|
+
type: e.indicator,
|
|
99
|
+
size: e.indicatorSize
|
|
100
|
+
}, null, 8, ["type", "size"])) : a("", !0)
|
|
125
101
|
]),
|
|
126
102
|
_: 1
|
|
127
|
-
}
|
|
128
|
-
]),
|
|
129
|
-
t(e.$slots, "help", p(c({ helpText: e.helpText })), () => [
|
|
130
|
-
e.helpText ? (s(), u("small", {
|
|
131
|
-
key: 0,
|
|
132
|
-
ref: "help"
|
|
133
|
-
}, f(e.helpText), 513)) : a("", !0)
|
|
103
|
+
})
|
|
134
104
|
])
|
|
135
|
-
],
|
|
136
|
-
|
|
105
|
+
]),
|
|
106
|
+
s(e.$slots, "errors", p(m({ error: e.error, errors: e.errors, id: e.$attrs.id, name: e.$attrs.name })), () => [
|
|
107
|
+
e.error || e.errors ? (t(), h(o(U), {
|
|
108
|
+
key: 0,
|
|
109
|
+
id: e.$attrs.id && String(e.$attrs.id),
|
|
110
|
+
name: e.$attrs.name && String(e.$attrs.name),
|
|
111
|
+
error: e.error,
|
|
112
|
+
errors: e.errors
|
|
113
|
+
}, {
|
|
114
|
+
default: y(({ error: r }) => [
|
|
115
|
+
i("div", J, [
|
|
116
|
+
R(f(r), 1),
|
|
117
|
+
K
|
|
118
|
+
])
|
|
119
|
+
]),
|
|
120
|
+
_: 1
|
|
121
|
+
}, 8, ["id", "name", "error", "errors"])) : a("", !0)
|
|
122
|
+
]),
|
|
123
|
+
s(e.$slots, "feedback", p(m({ feedback: e.feedback })), () => [
|
|
124
|
+
B(o(j), { feedback: e.feedback }, {
|
|
125
|
+
default: y(({ feedback: r }) => [
|
|
126
|
+
i("div", L, f(r), 1)
|
|
127
|
+
]),
|
|
128
|
+
_: 1
|
|
129
|
+
}, 8, ["feedback"])
|
|
130
|
+
]),
|
|
131
|
+
s(e.$slots, "help", p(m({ helpText: e.helpText })), () => [
|
|
132
|
+
e.helpText ? (t(), u("small", {
|
|
133
|
+
key: 0,
|
|
134
|
+
ref: "help"
|
|
135
|
+
}, f(e.helpText), 513)) : a("", !0)
|
|
136
|
+
])
|
|
137
|
+
], 2));
|
|
137
138
|
}
|
|
138
139
|
});
|
|
139
140
|
export {
|
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":"
|
|
1
|
+
{"version":3,"file":"select-field.js","sources":["../src/SelectField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T, V\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiBM;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,
|
|
1
|
+
(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vue-interface/activity-indicator"),require("@vue-interface/form-control")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/activity-indicator","@vue-interface/form-control"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.SelectField={},t.Vue,t.VueInterfaceActivityIndicator,t.VueInterfaceFormControl))})(this,function(t,e,p,a){"use strict";const m=["for"],y={class:"form-group-inner"},k={invalid:"",class:"invalid-feedback"},S=e.createElementVNode("br",null,null,-1),b={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(C,{emit:u}){const V=C,{controlAttributes:s,formGroupClasses:h,model:n,onClick:c,onBlur:d,onFocus:f}=a.useFormControl({props:V,emit:u}),i=e.ref();function $(r){c(r),i.value.focus()}return e.onMounted(()=>{if(e.useSlots().default)for(const r of e.useSlots().default()){if(!r.props)return;"selected"in r.props&&(r.props.value??r.children)&&(n.value=r.props.value??r.children)}}),(r,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["select-field",e.unref(h)])},[e.renderSlot(r.$slots,"label",{},()=>[r.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",for:e.unref(s).id,class:e.normalizeClass(r.labelClass)},e.toDisplayString(r.label),11,m)):e.createCommentVNode("",!0)]),e.createElementVNode("div",y,[e.renderSlot(r.$slots,"control",e.normalizeProps(e.guardReactiveProps({onClick:e.unref(c),onBlur:e.unref(d),onFocus:e.unref(f),controlAttributes:e.unref(s)})),()=>[e.useSlots().icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-group-inner-icon",onClick:l[0]||(l[0]=(...o)=>i.value.focus&&i.value.focus(...o))},[e.renderSlot(r.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("select",e.mergeProps({ref_key:"field",ref:i,"onUpdate:modelValue":l[1]||(l[1]=o=>e.isRef(n)?n.value=o:null),class:"form-select"},e.unref(s),{onMousedown:$,onBlur:l[2]||(l[2]=(...o)=>e.unref(d)&&e.unref(d)(...o)),onFocus:l[3]||(l[3]=(...o)=>e.unref(f)&&e.unref(f)(...o))}),[e.renderSlot(r.$slots,"default")],16),[[e.vModelSelect,e.unref(n)]])]),e.renderSlot(r.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"select-field-fade"},{default:e.withCtx(()=>[r.activity&&r.indicator?(e.openBlock(),e.createBlock(e.unref(p.ActivityIndicator),{key:"activity",ref:"activity",type:r.indicator,size:r.indicatorSize},null,8,["type","size"])):e.createCommentVNode("",!0)]),_:1})])]),e.renderSlot(r.$slots,"errors",e.normalizeProps(e.guardReactiveProps({error:r.error,errors:r.errors,id:r.$attrs.id,name:r.$attrs.name})),()=>[r.error||r.errors?(e.openBlock(),e.createBlock(e.unref(a.FormControlErrors),{key:0,id:r.$attrs.id&&String(r.$attrs.id),name:r.$attrs.name&&String(r.$attrs.name),error:r.error,errors:r.errors},{default:e.withCtx(({error:o})=>[e.createElementVNode("div",k,[e.createTextVNode(e.toDisplayString(o),1),S])]),_:1},8,["id","name","error","errors"])):e.createCommentVNode("",!0)]),e.renderSlot(r.$slots,"feedback",e.normalizeProps(e.guardReactiveProps({feedback:r.feedback})),()=>[e.createVNode(e.unref(a.FormControlFeedback),{feedback:r.feedback},{default:e.withCtx(({feedback:o})=>[e.createElementVNode("div",b,e.toDisplayString(o),1)]),_:1},8,["feedback"])]),e.renderSlot(r.$slots,"help",e.normalizeProps(e.guardReactiveProps({helpText:r.helpText})),()=>[r.helpText?(e.openBlock(),e.createElementBlock("small",{key:0,ref:"help"},e.toDisplayString(r.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":"
|
|
1
|
+
{"version":3,"file":"select-field.umd.cjs","sources":["../src/SelectField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T, V\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\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":"ukCAiBM,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"}
|