@vue-interface/select-field 2.0.10 → 2.0.11
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,13 +1,13 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { ActivityIndicator as
|
|
3
|
-
import { useFormControl as
|
|
1
|
+
import { defineComponent as z, mergeModels as h, useModel as F, useTemplateRef as w, onMounted as M, useSlots as A, createElementBlock as c, openBlock as a, normalizeClass as C, unref as o, renderSlot as r, createElementVNode as n, createCommentVNode as s, toDisplayString as u, normalizeProps as m, guardReactiveProps as f, withDirectives as N, mergeProps as E, vModelSelect as P, createVNode as $, Transition as x, withCtx as k, createBlock as S, createTextVNode as D } from "vue";
|
|
2
|
+
import { ActivityIndicator as R } from "@vue-interface/activity-indicator";
|
|
3
|
+
import { useFormControl as G, FormControlErrors as I, FormControlFeedback as U } from "@vue-interface/form-control";
|
|
4
4
|
const j = ["for"], p = { class: "form-control-inner" }, q = { class: "form-control-activity-indicator" }, H = {
|
|
5
5
|
invalid: "",
|
|
6
6
|
class: "invalid-feedback"
|
|
7
7
|
}, J = {
|
|
8
8
|
valid: "",
|
|
9
9
|
class: "valid-feedback"
|
|
10
|
-
},
|
|
10
|
+
}, Q = /* @__PURE__ */ z({
|
|
11
11
|
inheritAttrs: !1,
|
|
12
12
|
__name: "SelectField",
|
|
13
13
|
props: /* @__PURE__ */ h({
|
|
@@ -36,60 +36,57 @@ const j = ["for"], p = { class: "form-control-inner" }, q = { class: "form-contr
|
|
|
36
36
|
modelValue: {},
|
|
37
37
|
modelModifiers: {}
|
|
38
38
|
}),
|
|
39
|
-
emits: /* @__PURE__ */ h(["
|
|
40
|
-
setup(e, { emit:
|
|
41
|
-
const
|
|
39
|
+
emits: /* @__PURE__ */ h(["blur", "focus", "focusin", "focusout", "click", "doubleclick", "contextmenu", "mousedown", "mouseup", "mouseover", "mouseout", "mouseenter", "mouseleave", "mousemove", "keydown", "keyup", "keypress", "select", "selectionchange", "invalid", "submit", "reset", "scroll", "wheel", "copy", "cut", "paste", "touchstart", "touchend", "touchmove", "touchcancel", "change", "input", "beforeinput"], ["update:modelValue"]),
|
|
40
|
+
setup(e, { emit: B }) {
|
|
41
|
+
const V = e, d = F(e, "modelValue"), g = B, {
|
|
42
42
|
controlAttributes: v,
|
|
43
|
-
formGroupClasses:
|
|
44
|
-
listeners:
|
|
45
|
-
} =
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
const o = N().default;
|
|
51
|
-
if (o)
|
|
52
|
-
for (const l of o()) {
|
|
43
|
+
formGroupClasses: T,
|
|
44
|
+
listeners: y
|
|
45
|
+
} = G({ model: d, props: V, emit: g }), b = w("field");
|
|
46
|
+
return M(() => {
|
|
47
|
+
const t = A().default;
|
|
48
|
+
if (t)
|
|
49
|
+
for (const l of t()) {
|
|
53
50
|
if (!l.props)
|
|
54
51
|
return;
|
|
55
52
|
"selected" in l.props && (l.props.value ?? l.children) && (d.value = l.props.value ?? l.children);
|
|
56
53
|
}
|
|
57
|
-
}), (
|
|
58
|
-
class: C(["select-field",
|
|
54
|
+
}), (t, l) => (a(), c("div", {
|
|
55
|
+
class: C(["select-field", o(T)])
|
|
59
56
|
}, [
|
|
60
|
-
r(
|
|
61
|
-
e.label ? (
|
|
57
|
+
r(t.$slots, "label", {}, () => [
|
|
58
|
+
e.label ? (a(), c("label", {
|
|
62
59
|
key: 0,
|
|
63
60
|
ref: "label",
|
|
64
|
-
for:
|
|
61
|
+
for: o(v).id,
|
|
65
62
|
class: C(e.labelClass),
|
|
66
|
-
|
|
67
|
-
}, u(e.label),
|
|
63
|
+
onClick: l[0] || (l[0] = (i) => b.value?.click())
|
|
64
|
+
}, u(e.label), 11, j)) : s("", !0)
|
|
68
65
|
]),
|
|
69
|
-
|
|
70
|
-
r(
|
|
71
|
-
|
|
66
|
+
n("div", p, [
|
|
67
|
+
r(t.$slots, "control", m(f({ controlAttributes: o(v), listeners: o(y) })), () => [
|
|
68
|
+
t.$slots.icon ? (a(), c("div", {
|
|
72
69
|
key: 0,
|
|
73
70
|
class: "form-control-inner-icon",
|
|
74
|
-
onClick: l[
|
|
71
|
+
onClick: l[1] || (l[1] = (i) => b.value?.focus())
|
|
75
72
|
}, [
|
|
76
|
-
r(
|
|
73
|
+
r(t.$slots, "icon")
|
|
77
74
|
])) : s("", !0),
|
|
78
|
-
|
|
75
|
+
N(n("select", E({
|
|
79
76
|
ref_key: "field",
|
|
80
|
-
ref:
|
|
81
|
-
"onUpdate:modelValue": l[
|
|
82
|
-
}, { ...
|
|
83
|
-
r(
|
|
77
|
+
ref: b,
|
|
78
|
+
"onUpdate:modelValue": l[2] || (l[2] = (i) => d.value = i)
|
|
79
|
+
}, { ...o(v), ...o(y) }), [
|
|
80
|
+
r(t.$slots, "default")
|
|
84
81
|
], 16), [
|
|
85
|
-
[
|
|
82
|
+
[P, d.value]
|
|
86
83
|
])
|
|
87
84
|
]),
|
|
88
|
-
|
|
89
|
-
r(
|
|
90
|
-
|
|
85
|
+
n("div", q, [
|
|
86
|
+
r(t.$slots, "activity", {}, () => [
|
|
87
|
+
$(x, { name: "select-field-fade" }, {
|
|
91
88
|
default: k(() => [
|
|
92
|
-
e.activity && e.indicator ? (
|
|
89
|
+
e.activity && e.indicator ? (a(), S(o(R), {
|
|
93
90
|
key: "activity",
|
|
94
91
|
ref: "activity",
|
|
95
92
|
type: e.indicator,
|
|
@@ -101,8 +98,8 @@ const j = ["for"], p = { class: "form-control-inner" }, q = { class: "form-contr
|
|
|
101
98
|
])
|
|
102
99
|
])
|
|
103
100
|
]),
|
|
104
|
-
r(
|
|
105
|
-
e.error || e.errors ? (
|
|
101
|
+
r(t.$slots, "errors", m(f({ error: e.error, errors: e.errors, id: e.id, name: e.name })), () => [
|
|
102
|
+
e.error || e.errors ? (a(), S(o(I), {
|
|
106
103
|
key: 0,
|
|
107
104
|
id: e.id && String(e.id),
|
|
108
105
|
name: e.name && String(e.name),
|
|
@@ -110,24 +107,24 @@ const j = ["for"], p = { class: "form-control-inner" }, q = { class: "form-contr
|
|
|
110
107
|
errors: e.errors
|
|
111
108
|
}, {
|
|
112
109
|
default: k(({ error: i }) => [
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
l[
|
|
110
|
+
n("div", H, [
|
|
111
|
+
D(u(i), 1),
|
|
112
|
+
l[3] || (l[3] = n("br", null, null, -1))
|
|
116
113
|
])
|
|
117
114
|
]),
|
|
118
115
|
_: 1
|
|
119
116
|
}, 8, ["id", "name", "error", "errors"])) : s("", !0)
|
|
120
117
|
]),
|
|
121
|
-
r(
|
|
122
|
-
|
|
118
|
+
r(t.$slots, "feedback", m(f({ feedback: e.feedback })), () => [
|
|
119
|
+
$(o(U), { feedback: e.feedback }, {
|
|
123
120
|
default: k(({ feedback: i }) => [
|
|
124
|
-
|
|
121
|
+
n("div", J, u(i), 1)
|
|
125
122
|
]),
|
|
126
123
|
_: 1
|
|
127
124
|
}, 8, ["feedback"])
|
|
128
125
|
]),
|
|
129
|
-
r(
|
|
130
|
-
e.helpText ? (
|
|
126
|
+
r(t.$slots, "help", m(f({ helpText: e.helpText })), () => [
|
|
127
|
+
e.helpText ? (a(), c("small", {
|
|
131
128
|
key: 0,
|
|
132
129
|
ref: "help"
|
|
133
130
|
}, u(e.helpText), 513)) : s("", !0)
|
|
@@ -136,6 +133,6 @@ const j = ["for"], p = { class: "form-control-inner" }, q = { class: "form-contr
|
|
|
136
133
|
}
|
|
137
134
|
});
|
|
138
135
|
export {
|
|
139
|
-
|
|
136
|
+
Q as SelectField
|
|
140
137
|
};
|
|
141
138
|
//# sourceMappingURL=select-field.js.map
|
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=\"ModelValue, Value\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { InputHTMLAttributes, onMounted,
|
|
1
|
+
{"version":3,"file":"select-field.js","sources":["../src/SelectField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { InputHTMLAttributes, onMounted, SelectHTMLAttributes, useSlots, useTemplateRef } from 'vue';\n\nconst props = withDefaults(defineProps<SelectFieldProps<ModelValue,Value>>(), {\n formControlClass: 'form-select',\n labelClass: 'form-label'\n});\n\ndefineOptions({\n inheritAttrs: false\n});\n\nconst model = defineModel<ModelValue>();\n\ndefineSlots<FormControlSlots<SelectFieldControlSizePrefix,ModelValue> & {\n default: () => unknown\n}>();\n\nconst emit = defineEmits<FormControlEvents>();\n\nconst {\n controlAttributes,\n formGroupClasses,\n listeners,\n} = useFormControl<InputHTMLAttributes, SelectFieldControlSizePrefix, ModelValue|undefined, Value>({ model, props, emit });\n\nconst field = useTemplateRef<HTMLSelectElement>('field');\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 const slot = useSlots().default;\n\n if(!slot) {\n return;\n }\n\n for(const child of slot()) {\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<script lang=\"ts\">\nexport type SelectFieldControlSizePrefix = 'form-select';\n\nexport type SelectFieldProps<ModelValue, Value> = FormControlProps<\n SelectHTMLAttributes, \n SelectFieldControlSizePrefix, \n ModelValue, \n Value\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 @click=\"field?.click()\">\n {{ label }}\n </label>\n </slot>\n\n <div class=\"form-control-inner\">\n <slot\n name=\"control\"\n v-bind=\"{ controlAttributes, listeners }\">\n <div\n v-if=\"$slots.icon\"\n class=\"form-control-inner-icon\"\n @click=\"field?.focus()\">\n <slot name=\"icon\" />\n </div>\n <select\n ref=\"field\"\n v-model=\"model\"\n v-bind=\"{...controlAttributes, ...listeners}\">\n <slot />\n </select>\n </slot>\n \n <div class=\"form-control-activity-indicator\">\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 </div>\n\n <slot\n name=\"errors\"\n v-bind=\"{ error, errors, id, name }\"> \n <FormControlErrors\n v-if=\"!!(error || errors)\"\n :id=\"id && String(id)\"\n v-slot=\"{ error }\"\n :name=\"name && String(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":["props","__props","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","listeners","useFormControl","field","useTemplateRef","onMounted","slot","useSlots","child","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_cache","$event","_hoisted_1","_createElementVNode","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","_withDirectives","_mergeProps","_hoisted_3","_createVNode","_Transition","_createBlock","ActivityIndicator","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5","_toDisplayString"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(l,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):(l=typeof globalThis<"u"?globalThis:l||self,e(l.SelectField={},l.Vue,l.VueInterfaceActivityIndicator,l.VueInterfaceFormControl))})(this,(function(l,e,f,a){"use strict";const m=["for"],
|
|
1
|
+
(function(l,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):(l=typeof globalThis<"u"?globalThis:l||self,e(l.SelectField={},l.Vue,l.VueInterfaceActivityIndicator,l.VueInterfaceFormControl))})(this,(function(l,e,f,a){"use strict";const m=["for"],y={class:"form-control-inner"},k={class:"form-control-activity-indicator"},u={invalid:"",class:"invalid-feedback"},b={valid:"",class:"valid-feedback"},h=e.defineComponent({inheritAttrs:!1,__name:"SelectField",props:e.mergeModels({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},size:{},color:{},readonly:{type:Boolean},valid:{type:Boolean},value:{}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["blur","focus","focusin","focusout","click","doubleclick","contextmenu","mousedown","mouseup","mouseover","mouseout","mouseenter","mouseleave","mousemove","keydown","keyup","keypress","select","selectionchange","invalid","submit","reset","scroll","wheel","copy","cut","paste","touchstart","touchend","touchmove","touchcancel","change","input","beforeinput"],["update:modelValue"]),setup(t,{emit:S}){const V=t,i=e.useModel(t,"modelValue"),C=S,{controlAttributes:c,formGroupClasses:B,listeners:s}=a.useFormControl({model:i,props:V,emit:C}),d=e.useTemplateRef("field");return e.onMounted(()=>{const r=e.useSlots().default;if(r)for(const o of r()){if(!o.props)return;"selected"in o.props&&(o.props.value??o.children)&&(i.value=o.props.value??o.children)}}),(r,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["select-field",e.unref(B)])},[e.renderSlot(r.$slots,"label",{},()=>[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",for:e.unref(c).id,class:e.normalizeClass(t.labelClass),onClick:o[0]||(o[0]=n=>d.value?.click())},e.toDisplayString(t.label),11,m)):e.createCommentVNode("",!0)]),e.createElementVNode("div",y,[e.renderSlot(r.$slots,"control",e.normalizeProps(e.guardReactiveProps({controlAttributes:e.unref(c),listeners:e.unref(s)})),()=>[r.$slots.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-control-inner-icon",onClick:o[1]||(o[1]=n=>d.value?.focus())},[e.renderSlot(r.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("select",e.mergeProps({ref_key:"field",ref:d,"onUpdate:modelValue":o[2]||(o[2]=n=>i.value=n)},{...e.unref(c),...e.unref(s)}),[e.renderSlot(r.$slots,"default")],16),[[e.vModelSelect,i.value]])]),e.createElementVNode("div",k,[e.renderSlot(r.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"select-field-fade"},{default:e.withCtx(()=>[t.activity&&t.indicator?(e.openBlock(),e.createBlock(e.unref(f.ActivityIndicator),{key:"activity",ref:"activity",type:t.indicator,size:t.indicatorSize},null,8,["type","size"])):e.createCommentVNode("",!0)]),_:1})])])]),e.renderSlot(r.$slots,"errors",e.normalizeProps(e.guardReactiveProps({error:t.error,errors:t.errors,id:t.id,name:t.name})),()=>[t.error||t.errors?(e.openBlock(),e.createBlock(e.unref(a.FormControlErrors),{key:0,id:t.id&&String(t.id),name:t.name&&String(t.name),error:t.error,errors:t.errors},{default:e.withCtx(({error:n})=>[e.createElementVNode("div",u,[e.createTextVNode(e.toDisplayString(n),1),o[3]||(o[3]=e.createElementVNode("br",null,null,-1))])]),_:1},8,["id","name","error","errors"])):e.createCommentVNode("",!0)]),e.renderSlot(r.$slots,"feedback",e.normalizeProps(e.guardReactiveProps({feedback:t.feedback})),()=>[e.createVNode(e.unref(a.FormControlFeedback),{feedback:t.feedback},{default:e.withCtx(({feedback:n})=>[e.createElementVNode("div",b,e.toDisplayString(n),1)]),_:1},8,["feedback"])]),e.renderSlot(r.$slots,"help",e.normalizeProps(e.guardReactiveProps({helpText:t.helpText})),()=>[t.helpText?(e.openBlock(),e.createElementBlock("small",{key:0,ref:"help"},e.toDisplayString(t.helpText),513)):e.createCommentVNode("",!0)])],2))}});l.SelectField=h,Object.defineProperty(l,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=\"ModelValue, Value\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { InputHTMLAttributes, onMounted,
|
|
1
|
+
{"version":3,"file":"select-field.umd.cjs","sources":["../src/SelectField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { InputHTMLAttributes, onMounted, SelectHTMLAttributes, useSlots, useTemplateRef } from 'vue';\n\nconst props = withDefaults(defineProps<SelectFieldProps<ModelValue,Value>>(), {\n formControlClass: 'form-select',\n labelClass: 'form-label'\n});\n\ndefineOptions({\n inheritAttrs: false\n});\n\nconst model = defineModel<ModelValue>();\n\ndefineSlots<FormControlSlots<SelectFieldControlSizePrefix,ModelValue> & {\n default: () => unknown\n}>();\n\nconst emit = defineEmits<FormControlEvents>();\n\nconst {\n controlAttributes,\n formGroupClasses,\n listeners,\n} = useFormControl<InputHTMLAttributes, SelectFieldControlSizePrefix, ModelValue|undefined, Value>({ model, props, emit });\n\nconst field = useTemplateRef<HTMLSelectElement>('field');\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 const slot = useSlots().default;\n\n if(!slot) {\n return;\n }\n\n for(const child of slot()) {\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<script lang=\"ts\">\nexport type SelectFieldControlSizePrefix = 'form-select';\n\nexport type SelectFieldProps<ModelValue, Value> = FormControlProps<\n SelectHTMLAttributes, \n SelectFieldControlSizePrefix, \n ModelValue, \n Value\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 @click=\"field?.click()\">\n {{ label }}\n </label>\n </slot>\n\n <div class=\"form-control-inner\">\n <slot\n name=\"control\"\n v-bind=\"{ controlAttributes, listeners }\">\n <div\n v-if=\"$slots.icon\"\n class=\"form-control-inner-icon\"\n @click=\"field?.focus()\">\n <slot name=\"icon\" />\n </div>\n <select\n ref=\"field\"\n v-model=\"model\"\n v-bind=\"{...controlAttributes, ...listeners}\">\n <slot />\n </select>\n </slot>\n \n <div class=\"form-control-activity-indicator\">\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 </div>\n\n <slot\n name=\"errors\"\n v-bind=\"{ error, errors, id, name }\"> \n <FormControlErrors\n v-if=\"!!(error || errors)\"\n :id=\"id && String(id)\"\n v-slot=\"{ error }\"\n :name=\"name && String(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":["props","__props","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","listeners","useFormControl","field","useTemplateRef","onMounted","slot","useSlots","child","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_cache","$event","_hoisted_1","_createElementVNode","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","_withDirectives","_mergeProps","_hoisted_3","_createVNode","_Transition","_createBlock","ActivityIndicator","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5","_toDisplayString"],"mappings":"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"}
|
|
@@ -6,7 +6,6 @@ declare const _default: <ModelValue, Value>(__VLS_props: NonNullable<Awaited<typ
|
|
|
6
6
|
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
|
|
7
7
|
readonly onInput?: ((event: Event) => any) | undefined;
|
|
8
8
|
readonly onSelect?: ((event: Event) => any) | undefined;
|
|
9
|
-
readonly "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
|
|
10
9
|
readonly onBlur?: ((event: FocusEvent) => any) | undefined;
|
|
11
10
|
readonly onFocus?: ((event: FocusEvent) => any) | undefined;
|
|
12
11
|
readonly onFocusin?: ((event: FocusEvent) => any) | undefined;
|
|
@@ -39,6 +38,7 @@ declare const _default: <ModelValue, Value>(__VLS_props: NonNullable<Awaited<typ
|
|
|
39
38
|
readonly onTouchcancel?: ((event: TouchEvent) => any) | undefined;
|
|
40
39
|
readonly onChange?: ((event: Event) => any) | undefined;
|
|
41
40
|
readonly onBeforeinput?: ((event: Event) => any) | undefined;
|
|
41
|
+
readonly "onUpdate:modelValue"?: ((value: ModelValue) => any) | undefined;
|
|
42
42
|
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onCopy" | "onCut" | "onPaste" | "onFocus" | "onFocusin" | "onFocusout" | "onBlur" | "onChange" | "onBeforeinput" | "onInput" | "onReset" | "onSubmit" | "onInvalid" | "onKeydown" | "onKeypress" | "onKeyup" | "onMousedown" | "onMouseenter" | "onMouseleave" | "onMousemove" | "onMouseout" | "onMouseover" | "onMouseup" | "onSelect" | "onScroll" | "onTouchcancel" | "onTouchend" | "onTouchmove" | "onTouchstart" | "onClick" | "onContextmenu" | "onWheel" | "onDoubleclick" | "onSelectionchange" | "onUpdate:modelValue"> & ({
|
|
43
43
|
modelValue?: ModelValue;
|
|
44
44
|
} & {
|
|
@@ -71,7 +71,7 @@ declare const _default: <ModelValue, Value>(__VLS_props: NonNullable<Awaited<typ
|
|
|
71
71
|
}> & FormControlSlots<"form-select", ModelValue> & {
|
|
72
72
|
default: () => unknown;
|
|
73
73
|
};
|
|
74
|
-
emit: (((evt: "input", event: Event) => void) & ((evt: "select", event: Event) => void) & ((evt: "
|
|
74
|
+
emit: (((evt: "input", event: Event) => void) & ((evt: "select", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "focusin", event: FocusEvent) => void) & ((evt: "focusout", event: FocusEvent) => void) & ((evt: "click", event: MouseEvent) => void) & ((evt: "doubleclick", event: MouseEvent) => void) & ((evt: "contextmenu", event: MouseEvent) => void) & ((evt: "mousedown", event: MouseEvent) => void) & ((evt: "mouseup", event: MouseEvent) => void) & ((evt: "mouseover", event: MouseEvent) => void) & ((evt: "mouseout", event: MouseEvent) => void) & ((evt: "mouseenter", event: MouseEvent) => void) & ((evt: "mouseleave", event: MouseEvent) => void) & ((evt: "mousemove", event: MouseEvent) => void) & ((evt: "keydown", event: KeyboardEvent) => void) & ((evt: "keyup", event: KeyboardEvent) => void) & ((evt: "keypress", event: KeyboardEvent) => void) & ((evt: "selectionchange", event: Event) => void) & ((evt: "invalid", event: Event) => void) & ((evt: "submit", event: Event) => void) & ((evt: "reset", event: Event) => void) & ((evt: "scroll", event: Event) => void) & ((evt: "wheel", event: WheelEvent) => void) & ((evt: "copy", event: ClipboardEvent) => void) & ((evt: "cut", event: ClipboardEvent) => void) & ((evt: "paste", event: ClipboardEvent) => void) & ((evt: "touchstart", event: TouchEvent) => void) & ((evt: "touchend", event: TouchEvent) => void) & ((evt: "touchmove", event: TouchEvent) => void) & ((evt: "touchcancel", event: TouchEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "beforeinput", event: Event) => void)) & ((evt: "update:modelValue", value: ModelValue) => void);
|
|
75
75
|
}>) => import('vue').VNode & {
|
|
76
76
|
__ctx?: Awaited<typeof __VLS_setup>;
|
|
77
77
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue-interface/select-field",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.11",
|
|
4
4
|
"description": "A Vue select field component.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/select-field.umd.js",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
],
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"vue": "^3.3.4",
|
|
47
|
-
"@vue-interface/activity-indicator": "3.0.
|
|
48
|
-
"@vue-interface/form-control": "2.0.
|
|
47
|
+
"@vue-interface/activity-indicator": "3.0.5",
|
|
48
|
+
"@vue-interface/form-control": "2.0.11"
|
|
49
49
|
},
|
|
50
50
|
"scripts": {
|
|
51
51
|
"dev": "vite",
|
package/src/SelectField.vue
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { ActivityIndicator } from '@vue-interface/activity-indicator';
|
|
3
3
|
import type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';
|
|
4
4
|
import { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';
|
|
5
|
-
import { InputHTMLAttributes, onMounted,
|
|
5
|
+
import { InputHTMLAttributes, onMounted, SelectHTMLAttributes, useSlots, useTemplateRef } from 'vue';
|
|
6
6
|
|
|
7
7
|
const props = withDefaults(defineProps<SelectFieldProps<ModelValue,Value>>(), {
|
|
8
8
|
formControlClass: 'form-select',
|
|
@@ -19,21 +19,15 @@ defineSlots<FormControlSlots<SelectFieldControlSizePrefix,ModelValue> & {
|
|
|
19
19
|
default: () => unknown
|
|
20
20
|
}>();
|
|
21
21
|
|
|
22
|
-
const emit = defineEmits<FormControlEvents
|
|
22
|
+
const emit = defineEmits<FormControlEvents>();
|
|
23
23
|
|
|
24
24
|
const {
|
|
25
25
|
controlAttributes,
|
|
26
26
|
formGroupClasses,
|
|
27
27
|
listeners,
|
|
28
|
-
} = useFormControl<InputHTMLAttributes, SelectFieldControlSizePrefix, ModelValue, Value>({ model, props, emit });
|
|
28
|
+
} = useFormControl<InputHTMLAttributes, SelectFieldControlSizePrefix, ModelValue|undefined, Value>({ model, props, emit });
|
|
29
29
|
|
|
30
|
-
const field =
|
|
31
|
-
|
|
32
|
-
function onMousedownLabel(e: MouseEvent) {
|
|
33
|
-
listeners.onClick(e);
|
|
34
|
-
|
|
35
|
-
field.value?.focus();
|
|
36
|
-
}
|
|
30
|
+
const field = useTemplateRef<HTMLSelectElement>('field');
|
|
37
31
|
|
|
38
32
|
// Check the option slots for selected options. If the field has hardcoded
|
|
39
33
|
// selected options, this will ensure the value of the field is always set to
|
|
@@ -78,7 +72,7 @@ export type SelectFieldProps<ModelValue, Value> = FormControlProps<
|
|
|
78
72
|
ref="label"
|
|
79
73
|
:for="controlAttributes.id"
|
|
80
74
|
:class="labelClass"
|
|
81
|
-
@
|
|
75
|
+
@click="field?.click()">
|
|
82
76
|
{{ label }}
|
|
83
77
|
</label>
|
|
84
78
|
</slot>
|