@vue-interface/select-field 1.0.0-beta.19 → 1.0.0-beta.20

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.
@@ -1,13 +1,13 @@
1
- import { defineComponent as z, ref as A, onMounted as N, useSlots as k, openBlock as s, createElementBlock as u, normalizeClass as $, unref as o, renderSlot as t, toDisplayString as f, createCommentVNode as a, createElementVNode as i, normalizeProps as p, guardReactiveProps as m, withDirectives as w, 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 = {
1
+ import { defineComponent as A, ref as N, onMounted as w, useSlots as k, openBlock as s, createElementBlock as u, normalizeClass as $, unref as o, renderSlot as t, toDisplayString as f, createCommentVNode as a, createElementVNode as i, normalizeProps as p, guardReactiveProps as m, withDirectives as E, mergeProps as M, isRef as P, vModelSelect as D, createVNode as h, Transition as R, withCtx as y, createBlock as B, createTextVNode as G } from "vue";
2
+ import { ActivityIndicator as I } from "@vue-interface/activity-indicator";
3
+ import { useFormControl as U, FormControlErrors as j, FormControlFeedback as q } from "@vue-interface/form-control";
4
+ const H = ["for"], J = { class: "form-group-inner" }, K = {
5
5
  invalid: "",
6
6
  class: "invalid-feedback"
7
- }, K = /* @__PURE__ */ i("br", null, null, -1), L = {
7
+ }, L = /* @__PURE__ */ i("br", null, null, -1), O = {
8
8
  valid: "",
9
9
  class: "valid-feedback"
10
- }, X = /* @__PURE__ */ z({
10
+ }, Y = /* @__PURE__ */ A({
11
11
  inheritAttrs: !1,
12
12
  __name: "SelectField",
13
13
  props: {
@@ -32,20 +32,20 @@ const q = ["for"], H = { class: "form-group-inner" }, J = {
32
32
  value: {},
33
33
  checked: { type: Boolean }
34
34
  },
35
- emits: ["update:modelValue"],
35
+ emits: ["blur", "change", "click", "focus", "update:modelValue"],
36
36
  setup(S, { emit: F }) {
37
- const g = S, {
37
+ const g = F, T = S, {
38
38
  controlAttributes: c,
39
- formGroupClasses: T,
39
+ formGroupClasses: V,
40
40
  model: n,
41
41
  onClick: C,
42
42
  onBlur: v,
43
43
  onFocus: b
44
- } = I({ props: g, emit: F }), d = A();
45
- function V(e) {
44
+ } = U({ props: T, emit: g }), d = N();
45
+ function z(e) {
46
46
  C(e), d.value.focus();
47
47
  }
48
- return N(() => {
48
+ return w(() => {
49
49
  if (k().default)
50
50
  for (const e of k().default()) {
51
51
  if (!e.props)
@@ -53,7 +53,7 @@ const q = ["for"], H = { class: "form-group-inner" }, J = {
53
53
  "selected" in e.props && (e.props.value ?? e.children) && (n.value = e.props.value ?? e.children);
54
54
  }
55
55
  }), (e, l) => (s(), u("div", {
56
- class: $(["select-field", o(T)])
56
+ class: $(["select-field", o(V)])
57
57
  }, [
58
58
  t(e.$slots, "label", {}, () => [
59
59
  e.label ? (s(), u("label", {
@@ -61,9 +61,9 @@ const q = ["for"], H = { class: "form-group-inner" }, J = {
61
61
  ref: "label",
62
62
  for: o(c).id,
63
63
  class: $(e.labelClass)
64
- }, f(e.label), 11, q)) : a("", !0)
64
+ }, f(e.label), 11, H)) : a("", !0)
65
65
  ]),
66
- i("div", H, [
66
+ i("div", J, [
67
67
  t(e.$slots, "control", p(m({ onClick: o(C), onBlur: o(v), onFocus: o(b), controlAttributes: o(c) })), () => [
68
68
  k().icon ? (s(), u("div", {
69
69
  key: 0,
@@ -73,13 +73,13 @@ const q = ["for"], H = { class: "form-group-inner" }, J = {
73
73
  }, [
74
74
  t(e.$slots, "icon")
75
75
  ])) : a("", !0),
76
- w(i("select", E({
76
+ E(i("select", M({
77
77
  ref_key: "field",
78
78
  ref: d,
79
- "onUpdate:modelValue": l[1] || (l[1] = (r) => M(n) ? n.value = r : null),
79
+ "onUpdate:modelValue": l[1] || (l[1] = (r) => P(n) ? n.value = r : null),
80
80
  class: "form-select"
81
81
  }, o(c), {
82
- onMousedown: V,
82
+ onMousedown: z,
83
83
  onBlur: l[2] || (l[2] = //@ts-ignore
84
84
  (...r) => o(v) && o(v)(...r)),
85
85
  onFocus: l[3] || (l[3] = //@ts-ignore
@@ -87,13 +87,13 @@ const q = ["for"], H = { class: "form-group-inner" }, J = {
87
87
  }), [
88
88
  t(e.$slots, "default")
89
89
  ], 16), [
90
- [P, o(n)]
90
+ [D, o(n)]
91
91
  ])
92
92
  ]),
93
93
  t(e.$slots, "activity", {}, () => [
94
- B(D, { name: "select-field-fade" }, {
94
+ h(R, { name: "select-field-fade" }, {
95
95
  default: y(() => [
96
- e.activity && e.indicator ? (s(), h(o(G), {
96
+ e.activity && e.indicator ? (s(), B(o(I), {
97
97
  key: "activity",
98
98
  ref: "activity",
99
99
  type: e.indicator,
@@ -105,7 +105,7 @@ const q = ["for"], H = { class: "form-group-inner" }, J = {
105
105
  ])
106
106
  ]),
107
107
  t(e.$slots, "errors", p(m({ error: e.error, errors: e.errors, id: e.$attrs.id, name: e.$attrs.name })), () => [
108
- e.error || e.errors ? (s(), h(o(U), {
108
+ e.error || e.errors ? (s(), B(o(j), {
109
109
  key: 0,
110
110
  id: e.$attrs.id && String(e.$attrs.id),
111
111
  name: e.$attrs.name && String(e.$attrs.name),
@@ -113,18 +113,18 @@ const q = ["for"], H = { class: "form-group-inner" }, J = {
113
113
  errors: e.errors
114
114
  }, {
115
115
  default: y(({ error: r }) => [
116
- i("div", J, [
117
- R(f(r), 1),
118
- K
116
+ i("div", K, [
117
+ G(f(r), 1),
118
+ L
119
119
  ])
120
120
  ]),
121
121
  _: 1
122
122
  }, 8, ["id", "name", "error", "errors"])) : a("", !0)
123
123
  ]),
124
124
  t(e.$slots, "feedback", p(m({ feedback: e.feedback })), () => [
125
- B(o(j), { feedback: e.feedback }, {
125
+ h(o(q), { feedback: e.feedback }, {
126
126
  default: y(({ feedback: r }) => [
127
- i("div", L, f(r), 1)
127
+ i("div", O, f(r), 1)
128
128
  ]),
129
129
  _: 1
130
130
  }, 8, ["feedback"])
@@ -139,6 +139,6 @@ const q = ["for"], H = { class: "form-group-inner" }, J = {
139
139
  }
140
140
  });
141
141
  export {
142
- X as SelectField
142
+ Y as SelectField
143
143
  };
144
144
  //# sourceMappingURL=select-field.js.map
@@ -1 +1 @@
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\ndefineOptions({\n inheritAttrs: false\n});\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAqBM;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
+ {"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, FormControlEvents, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { onMounted, ref, useSlots } from 'vue';\n\ndefineOptions({\n inheritAttrs: false\n});\n\ndefineSlots<FormControlSlots<T>>();\n\nconst emit = defineEmits<FormControlEvents<T>>();\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":["emit","__emit","props","__props","controlAttributes","formGroupClasses","model","onClick","onBlur","onFocus","useFormControl","field","ref","onMousedown","onMounted","useSlots","child"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,UAAMA,IAAOC,GAEPC,IAAQC,GAKR;AAAA,MACF,mBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,IACA,IAAAC,EAAoB,EAAE,OAAAR,GAAO,MAAAF,EAAM,CAAA,GAEjCW,IAAQC;AAEd,aAASC,EAAY,GAAG;AACpB,MAAAN,EAAQ,CAAC,GAETI,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,cACxDV,EAAM,QAAQU,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/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({inheritAttrs:!1,__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"})});
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"],k={class:"form-group-inner"},y={invalid:"",class:"invalid-feedback"},S=e.createElementVNode("br",null,null,-1),b={valid:"",class:"valid-feedback"},u=e.defineComponent({inheritAttrs:!1,__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:["blur","change","click","focus","update:modelValue"],setup(B,{emit:C}){const V=C,h=B,{controlAttributes:s,formGroupClasses:$,model:n,onClick:f,onBlur:d,onFocus:c}=a.useFormControl({props:h,emit:V}),i=e.ref();function g(r){f(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($)])},[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",k,[e.renderSlot(r.$slots,"control",e.normalizeProps(e.guardReactiveProps({onClick:e.unref(f),onBlur:e.unref(d),onFocus:e.unref(c),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:g,onBlur:l[2]||(l[2]=(...o)=>e.unref(d)&&e.unref(d)(...o)),onFocus:l[3]||(l[3]=(...o)=>e.unref(c)&&e.unref(c)(...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",y,[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=u,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 { 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\ndefineOptions({\n inheritAttrs: false\n});\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":"ulCAqBM,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"}
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, FormControlEvents, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { onMounted, ref, useSlots } from 'vue';\n\ndefineOptions({\n inheritAttrs: false\n});\n\ndefineSlots<FormControlSlots<T>>();\n\nconst emit = defineEmits<FormControlEvents<T>>();\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":["emit","__emit","props","__props","controlAttributes","formGroupClasses","model","onClick","onBlur","onFocus","useFormControl","field","ref","onMousedown","e","onMounted","useSlots","child"],"mappings":"6mCAYA,MAAMA,EAAOC,EAEPC,EAAQC,EAKR,CACF,kBAAAC,EACA,iBAAAC,EACA,MAAAC,EACA,QAAAC,EACA,OAAAC,EACA,QAAAC,CACA,EAAAC,iBAAoB,CAAE,MAAAR,EAAO,KAAAF,CAAM,CAAA,EAEjCW,EAAQC,EAAAA,MAEd,SAASC,EAAYC,EAAG,CACpBP,EAAQO,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,YACxDX,EAAM,MAAQW,EAAM,MAAM,OAASA,EAAM,SAEjD,CAAA,CACH"}
@@ -1,7 +1,9 @@
1
- import type { FormControlSlots } from '@vue-interface/form-control';
1
+ import type { FormControlEvents, FormControlSlots } from '@vue-interface/form-control';
2
2
  declare const _default: <T, V>(__VLS_props: {
3
- value?: V;
4
- name?: string;
3
+ onBlur?: (event: FocusEvent) => any;
4
+ onChange?: (value: T) => any;
5
+ onClick?: (value: T) => any;
6
+ onFocus?: (event: FocusEvent) => any;
5
7
  "onUpdate:modelValue"?: (value: T) => any;
6
8
  activity?: boolean;
7
9
  disabled?: boolean;
@@ -17,18 +19,22 @@ declare const _default: <T, V>(__VLS_props: {
17
19
  label?: string;
18
20
  labelClass?: string;
19
21
  modelValue?: T;
22
+ name?: string;
20
23
  plaintext?: boolean;
21
24
  readonly?: boolean;
22
25
  valid?: boolean;
26
+ value?: V;
23
27
  checked?: boolean;
24
28
  } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
25
- slots: Readonly<FormControlSlots<T>>;
26
29
  attrs: any;
27
- emit: any;
28
- }, __VLS_expose?: (exposed: {}) => void, __VLS_setup?: Promise<{
30
+ emit: FormControlEvents<T>;
31
+ slots: Readonly<FormControlSlots<T>> & FormControlSlots<T>;
32
+ }, __VLS_expose?: (exposed: import('vue').ShallowUnwrapRef<{}>) => void, __VLS_setup?: Promise<{
29
33
  props: {
30
- value?: V;
31
- name?: string;
34
+ onBlur?: (event: FocusEvent) => any;
35
+ onChange?: (value: T) => any;
36
+ onClick?: (value: T) => any;
37
+ onFocus?: (event: FocusEvent) => any;
32
38
  "onUpdate:modelValue"?: (value: T) => any;
33
39
  activity?: boolean;
34
40
  disabled?: boolean;
@@ -44,22 +50,26 @@ declare const _default: <T, V>(__VLS_props: {
44
50
  label?: string;
45
51
  labelClass?: string;
46
52
  modelValue?: T;
53
+ name?: string;
47
54
  plaintext?: boolean;
48
55
  readonly?: boolean;
49
56
  valid?: boolean;
57
+ value?: V;
50
58
  checked?: boolean;
51
59
  } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
52
- expose(exposed: {}): void;
60
+ expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
53
61
  attrs: any;
54
- slots: Readonly<FormControlSlots<T>>;
55
- emit: any;
62
+ slots: Readonly<FormControlSlots<T>> & FormControlSlots<T>;
63
+ emit: FormControlEvents<T>;
56
64
  }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
57
65
  [key: string]: any;
58
66
  }> & {
59
67
  __ctx?: {
60
68
  props: {
61
- value?: V;
62
- name?: string;
69
+ onBlur?: (event: FocusEvent) => any;
70
+ onChange?: (value: T) => any;
71
+ onClick?: (value: T) => any;
72
+ onFocus?: (event: FocusEvent) => any;
63
73
  "onUpdate:modelValue"?: (value: T) => any;
64
74
  activity?: boolean;
65
75
  disabled?: boolean;
@@ -75,15 +85,20 @@ declare const _default: <T, V>(__VLS_props: {
75
85
  label?: string;
76
86
  labelClass?: string;
77
87
  modelValue?: T;
88
+ name?: string;
78
89
  plaintext?: boolean;
79
90
  readonly?: boolean;
80
91
  valid?: boolean;
92
+ value?: V;
81
93
  checked?: boolean;
82
94
  } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
83
- expose(exposed: {}): void;
95
+ expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
84
96
  attrs: any;
85
- slots: Readonly<FormControlSlots<T>>;
86
- emit: any;
97
+ slots: Readonly<FormControlSlots<T>> & FormControlSlots<T>;
98
+ emit: FormControlEvents<T>;
87
99
  };
88
100
  };
89
101
  export default _default;
102
+ type __VLS_Prettify<T> = {
103
+ [K in keyof T]: T[K];
104
+ } & {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vue-interface/select-field",
3
- "version": "1.0.0-beta.19",
3
+ "version": "1.0.0-beta.20",
4
4
  "description": "A Vue select field component.",
5
5
  "files": [
6
6
  "dist"