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

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,6 +1,6 @@
1
1
  import { ActivityIndicator as g } from "@vue-interface/activity-indicator";
2
2
  import { FormControl as S } from "@vue-interface/form-control";
3
- import { defineComponent as z, resolveComponent as m, resolveDirective as E, openBlock as t, createElementBlock as l, normalizeClass as b, renderSlot as o, toDisplayString as i, createCommentVNode as n, createElementVNode as a, normalizeProps as c, guardReactiveProps as f, withDirectives as V, mergeProps as A, vModelSelect as N, createVNode as C, Transition as T, withCtx as p, createBlock as k, createTextVNode as B } from "vue";
3
+ import { defineComponent as z, resolveComponent as m, resolveDirective as E, openBlock as t, createElementBlock as l, normalizeClass as b, renderSlot as o, toDisplayString as i, createCommentVNode as n, createElementVNode as a, normalizeProps as c, guardReactiveProps as f, withDirectives as V, mergeProps as A, vModelSelect as N, createVNode as k, Transition as T, withCtx as p, createBlock as y, createTextVNode as B } from "vue";
4
4
  const D = z({
5
5
  name: "SelectField",
6
6
  components: {
@@ -21,21 +21,16 @@ const D = z({
21
21
  },
22
22
  computed: {
23
23
  controlClass() {
24
- return this.plaintext ? `${this.defaultControlClass}-plaintext` : this.defaultControlClass;
25
- }
26
- },
27
- methods: {
28
- shouldChangeOnFocus() {
29
- return !1;
24
+ return this.plaintext ? `${this.formControlClass}-plaintext` : this.formControlClass;
30
25
  }
31
26
  }
32
27
  });
33
- const O = (e, s) => {
28
+ const P = (e, s) => {
34
29
  const d = e.__vccOpts || e;
35
30
  for (const [u, v] of s)
36
31
  d[u] = v;
37
32
  return d;
38
- }, P = ["for"], w = { class: "form-group-inner" }, j = {
33
+ }, w = ["for"], O = { class: "form-group-inner" }, j = {
39
34
  invalid: "",
40
35
  class: "invalid-feedback"
41
36
  }, G = /* @__PURE__ */ a("br", null, null, -1), I = {
@@ -43,7 +38,7 @@ const O = (e, s) => {
43
38
  class: "valid-feedback"
44
39
  };
45
40
  function M(e, s, d, u, v, R) {
46
- const y = m("activity-indicator"), $ = m("FormControlErrors"), h = m("FormControlFeedback"), F = E("bind-events");
41
+ const C = m("activity-indicator"), $ = m("FormControlErrors"), h = m("FormControlFeedback"), F = E("bind-events");
47
42
  return t(), l("div", {
48
43
  class: b(e.formGroupClasses)
49
44
  }, [
@@ -53,9 +48,9 @@ function M(e, s, d, u, v, R) {
53
48
  ref: "label",
54
49
  for: e.id,
55
50
  class: b(e.labelClass)
56
- }, i(e.label), 11, P)) : n("", !0)
51
+ }, i(e.label), 11, w)) : n("", !0)
57
52
  ]),
58
- a("div", w, [
53
+ a("div", O, [
59
54
  o(e.$slots, "control", c(f({ bindEvents: e.bindEvents, controlAttributes: e.controlAttributes })), () => [
60
55
  e.$slots.icon ? (t(), l("div", {
61
56
  key: 0,
@@ -77,9 +72,9 @@ function M(e, s, d, u, v, R) {
77
72
  ])
78
73
  ]),
79
74
  o(e.$slots, "activity", {}, () => [
80
- C(T, { name: "select-field-fade" }, {
75
+ k(T, { name: "select-field-fade" }, {
81
76
  default: p(() => [
82
- e.activity ? (t(), k(y, {
77
+ e.activity ? (t(), y(C, {
83
78
  key: "activity",
84
79
  ref: "activity",
85
80
  type: e.indicator,
@@ -91,7 +86,7 @@ function M(e, s, d, u, v, R) {
91
86
  ])
92
87
  ]),
93
88
  o(e.$slots, "errors", c(f({ error: e.error, errors: e.errors, id: e.$attrs.id, name: e.$attrs.name })), () => [
94
- e.error || e.errors ? (t(), k($, {
89
+ e.error || e.errors ? (t(), y($, {
95
90
  key: 0,
96
91
  id: e.$attrs.id,
97
92
  name: e.$attrs.name,
@@ -108,7 +103,7 @@ function M(e, s, d, u, v, R) {
108
103
  }, 8, ["id", "name", "error", "errors"])) : n("", !0)
109
104
  ]),
110
105
  o(e.$slots, "feedback", c(f({ feedback: e.feedback })), () => [
111
- C(h, { feedback: e.feedback }, {
106
+ k(h, { feedback: e.feedback }, {
112
107
  default: p(({ feedback: r }) => [
113
108
  a("div", I, i(r), 1)
114
109
  ]),
@@ -123,7 +118,7 @@ function M(e, s, d, u, v, R) {
123
118
  ])
124
119
  ], 2);
125
120
  }
126
- const J = /* @__PURE__ */ O(D, [["render", M]]);
121
+ const J = /* @__PURE__ */ P(D, [["render", M]]);
127
122
  export {
128
123
  J as SelectField
129
124
  };
@@ -1 +1 @@
1
- {"version":3,"file":"select-field.js","sources":["../src/SelectField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { FormControl } from '@vue-interface/form-control';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n\n name: 'SelectField',\n\n components: {\n ActivityIndicator,\n },\n\n extends: FormControl,\n\n props: {\n /**\n * The default class name assigned to the control element\n *\n * @param {String}\n * @default 'form-select'\n */\n formControlClass: {\n type: String,\n default: 'form-select'\n } \n },\n\n computed: {\n\n controlClass() {\n return this.plaintext ?\n `${this.defaultControlClass}-plaintext`\n : this.defaultControlClass;\n },\n },\n\n methods: {\n shouldChangeOnFocus() {\n return false;\n }\n }\n\n});\n</script>\n\n<template>\n <div :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"label\"\n ref=\"label\"\n :for=\"id\"\n :class=\"labelClass\">\n {{ label }}\n </label>\n </slot>\n\n <div class=\"form-group-inner\">\n <slot\n name=\"control\"\n v-bind=\"{ bindEvents, controlAttributes }\">\n <div\n v-if=\"$slots.icon\"\n class=\"form-group-inner-icon\"\n @click=\"focus\">\n <slot name=\"icon\" />\n </div>\n <select\n ref=\"field\"\n v-model=\"model\"\n v-bind-events\n v-bind=\"Object.assign({\n ['disabled']: $attrs.readonly\n }, controlAttributes)\">\n <slot />\n </select>\n </slot>\n\n <slot name=\"activity\">\n <transition name=\"select-field-fade\">\n <activity-indicator\n v-if=\"activity\"\n key=\"activity\"\n ref=\"activity\"\n :type=\"indicator\"\n :size=\"indicatorSize || size\" />\n </transition>\n </slot>\n </div>\n\n <slot\n name=\"errors\"\n v-bind=\"{ error, errors, id: $attrs.id, name: $attrs.name }\"> \n <FormControlErrors\n v-if=\"!!(error || errors)\"\n :id=\"$attrs.id\"\n v-slot=\"{ error }\"\n :name=\"$attrs.name\"\n :error=\"error\"\n :errors=\"errors\">\n <div\n invalid\n class=\"invalid-feedback\">\n {{ error }}<br>\n </div>\n </FormControlErrors>\n </slot>\n \n <slot\n name=\"feedback\"\n v-bind=\"{ feedback }\">\n <FormControlFeedback\n v-slot=\"{ feedback }\"\n :feedback=\"feedback\">\n <div\n valid\n class=\"valid-feedback\">\n {{ feedback }}\n </div>\n </FormControlFeedback>\n </slot>\n\n <slot name=\"help\">\n <small\n v-if=\"helpText\"\n ref=\"help\">\n {{ helpText }}\n </small>\n </slot>\n </div>\n</template>\n\n<style>\n.select-field,\n.select-field .form-group-inner {\n position: relative;\n transition: all .25s ease-in-out;\n}\n\n.select-field .activity-indicator {\n position: absolute;\n right: 1.25em;\n top: 50%;\n transform: translate(-1rem, -50%);\n transition: all .15s ease-in;\n}\n\n.select-field .activity-indicator-xs {\n font-size: .5em;\n right: 2em;\n}\n\n.select-field.has-activity .form-control-xs {\n padding-right: 3.75em;\n}\n\n.select-field .activity-indicator-sm {\n font-size: .5em;\n right: 2em;\n}\n\n.select-field.has-activity .form-control-sm {\n padding-right: 3em;\n}\n\n.select-field .activity-indicator-md {\n font-size: .666em;\n}\n\n.select-field.has-activity .form-control-md {\n padding-right: 3em;\n}\n\n.select-field .activity-indicator-lg {\n font-size: .75em;\n}\n\n.select-field.has-activity .form-control-lg {\n padding-right: 3em;\n}\n\n.select-field .activity-indicator-xl {\n font-size: 1em;\n}\n\n.select-field.has-activity .activity-indicator-xl ~ .form-control-xl {\n padding-right: 3.75em;\n}\n\n.select-field .activity-indicator {\n opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n opacity: 0;\n}\n\n.select-field.is-valid .valid-feedback,\n.select-field.is-invalid .invalid-feedback {\n display: flex;\n}\n\n.select-field .form-control-icon {\n padding-left: 2em;\n}\n\n.select-field .form-group-inner-icon {\n position: absolute;\n top: 50%;\n left: .666em;\n width: 1rem;\n font-size: 1em;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.select-field-sm .form-group-inner-icon {\n position: absolute;\n top: 50%;\n left: .666rem;\n width: .75em;\n font-size: 1.5em;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.select-field-lg .form-group-inner-icon {\n position: absolute;\n top: 50%;\n left: .666rem;\n width: 1.25em;\n font-size: 1em;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.select-field .activity-indicator {\n opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n opacity: 0;\n}\n</style>\n\n"],"names":["_sfc_main","defineComponent","ActivityIndicator","FormControl","_hoisted_2","_hoisted_3","_hoisted_4","_createElementVNode","_hoisted_5","_resolveDirective","_normalizeClass","_ctx","_openBlock","_createElementBlock","_toDisplayString","_hoisted_1","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_cache","args","_withDirectives","_mergeProps","$event","_createVNode","_Transition","_withCtx","_createBlock","_component_activity_indicator","_component_FormControlErrors","_createTextVNode","error","_component_FormControlFeedback","feedback"],"mappings":"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"}
1
+ {"version":3,"file":"select-field.js","sources":["../src/SelectField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { FormControl } from '@vue-interface/form-control';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n\n name: 'SelectField',\n\n components: {\n ActivityIndicator,\n },\n\n extends: FormControl,\n\n props: {\n /**\n * The default class name assigned to the control element\n *\n * @param {String}\n * @default 'form-select'\n */\n formControlClass: {\n type: String,\n default: 'form-select'\n } \n },\n\n computed: {\n controlClass() {\n return this.plaintext ?\n `${this.formControlClass}-plaintext`\n : this.formControlClass;\n }\n }\n\n});\n</script>\n\n<template>\n <div :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"label\"\n ref=\"label\"\n :for=\"id\"\n :class=\"labelClass\">\n {{ label }}\n </label>\n </slot>\n\n <div class=\"form-group-inner\">\n <slot\n name=\"control\"\n v-bind=\"{ bindEvents, controlAttributes }\">\n <div\n v-if=\"$slots.icon\"\n class=\"form-group-inner-icon\"\n @click=\"focus\">\n <slot name=\"icon\" />\n </div>\n <select\n ref=\"field\"\n v-model=\"model\"\n v-bind-events\n v-bind=\"Object.assign({\n ['disabled']: $attrs.readonly\n }, controlAttributes)\">\n <slot />\n </select>\n </slot>\n\n <slot name=\"activity\">\n <transition name=\"select-field-fade\">\n <activity-indicator\n v-if=\"activity\"\n key=\"activity\"\n ref=\"activity\"\n :type=\"indicator\"\n :size=\"indicatorSize || size\" />\n </transition>\n </slot>\n </div>\n\n <slot\n name=\"errors\"\n v-bind=\"{ error, errors, id: $attrs.id, name: $attrs.name }\"> \n <FormControlErrors\n v-if=\"!!(error || errors)\"\n :id=\"$attrs.id\"\n v-slot=\"{ error }\"\n :name=\"$attrs.name\"\n :error=\"error\"\n :errors=\"errors\">\n <div\n invalid\n class=\"invalid-feedback\">\n {{ error }}<br>\n </div>\n </FormControlErrors>\n </slot>\n \n <slot\n name=\"feedback\"\n v-bind=\"{ feedback }\">\n <FormControlFeedback\n v-slot=\"{ feedback }\"\n :feedback=\"feedback\">\n <div\n valid\n class=\"valid-feedback\">\n {{ feedback }}\n </div>\n </FormControlFeedback>\n </slot>\n\n <slot name=\"help\">\n <small\n v-if=\"helpText\"\n ref=\"help\">\n {{ helpText }}\n </small>\n </slot>\n </div>\n</template>\n\n<style>\n.select-field,\n.select-field .form-group-inner {\n position: relative;\n transition: all .25s ease-in-out;\n}\n\n.select-field .activity-indicator {\n position: absolute;\n right: 1.25em;\n top: 50%;\n transform: translate(-1rem, -50%);\n transition: all .15s ease-in;\n}\n\n.select-field .activity-indicator-xs {\n font-size: .5em;\n right: 2em;\n}\n\n.select-field.has-activity .form-control-xs {\n padding-right: 3.75em;\n}\n\n.select-field .activity-indicator-sm {\n font-size: .5em;\n right: 2em;\n}\n\n.select-field.has-activity .form-control-sm {\n padding-right: 3em;\n}\n\n.select-field .activity-indicator-md {\n font-size: .666em;\n}\n\n.select-field.has-activity .form-control-md {\n padding-right: 3em;\n}\n\n.select-field .activity-indicator-lg {\n font-size: .75em;\n}\n\n.select-field.has-activity .form-control-lg {\n padding-right: 3em;\n}\n\n.select-field .activity-indicator-xl {\n font-size: 1em;\n}\n\n.select-field.has-activity .activity-indicator-xl ~ .form-control-xl {\n padding-right: 3.75em;\n}\n\n.select-field .activity-indicator {\n opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n opacity: 0;\n}\n\n.select-field.is-valid .valid-feedback,\n.select-field.is-invalid .invalid-feedback {\n display: flex;\n}\n\n.select-field .form-control-icon {\n padding-left: 2em;\n}\n\n.select-field .form-group-inner-icon {\n position: absolute;\n top: 50%;\n left: .666em;\n width: 1rem;\n font-size: 1em;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.select-field-sm .form-group-inner-icon {\n position: absolute;\n top: 50%;\n left: .666rem;\n width: .75em;\n font-size: 1.5em;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.select-field-lg .form-group-inner-icon {\n position: absolute;\n top: 50%;\n left: .666rem;\n width: 1.25em;\n font-size: 1em;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.select-field .activity-indicator {\n opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n opacity: 0;\n}\n</style>\n\n"],"names":["_sfc_main","defineComponent","ActivityIndicator","FormControl","_hoisted_2","_hoisted_3","_hoisted_4","_createElementVNode","_hoisted_5","_resolveDirective","_normalizeClass","_ctx","_openBlock","_createElementBlock","_toDisplayString","_hoisted_1","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_cache","args","_withDirectives","_mergeProps","$event","_createVNode","_Transition","_withCtx","_createBlock","_component_activity_indicator","_component_FormControlErrors","_createTextVNode","error","_component_FormControlFeedback","feedback"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- (function(r,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("@vue-interface/activity-indicator"),require("@vue-interface/form-control"),require("vue")):typeof define=="function"&&define.amd?define(["exports","@vue-interface/activity-indicator","@vue-interface/form-control","vue"],l):(r=typeof globalThis<"u"?globalThis:r||self,l(r.SelectField={},r.ActivityIndicator,r.FormControl,r.Vue))})(this,function(r,l,d,e){"use strict";const c=e.defineComponent({name:"SelectField",components:{ActivityIndicator:l.ActivityIndicator},extends:d.FormControl,props:{formControlClass:{type:String,default:"form-select"}},computed:{controlClass(){return this.plaintext?`${this.defaultControlClass}-plaintext`:this.defaultControlClass}},methods:{shouldChangeOnFocus(){return!1}}}),F="",m=(o,n)=>{const i=o.__vccOpts||o;for(const[s,a]of n)i[s]=a;return i},f=["for"],p={class:"form-group-inner"},k={invalid:"",class:"invalid-feedback"},y=e.createElementVNode("br",null,null,-1),C={valid:"",class:"valid-feedback"};function b(o,n,i,s,a,V){const h=e.resolveComponent("activity-indicator"),$=e.resolveComponent("FormControlErrors"),g=e.resolveComponent("FormControlFeedback"),B=e.resolveDirective("bind-events");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(o.formGroupClasses)},[e.renderSlot(o.$slots,"label",{},()=>[o.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",for:o.id,class:e.normalizeClass(o.labelClass)},e.toDisplayString(o.label),11,f)):e.createCommentVNode("",!0)]),e.createElementVNode("div",p,[e.renderSlot(o.$slots,"control",e.normalizeProps(e.guardReactiveProps({bindEvents:o.bindEvents,controlAttributes:o.controlAttributes})),()=>[o.$slots.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-group-inner-icon",onClick:n[0]||(n[0]=(...t)=>o.focus&&o.focus(...t))},[e.renderSlot(o.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives((e.openBlock(),e.createElementBlock("select",e.mergeProps({ref:"field","onUpdate:modelValue":n[1]||(n[1]=t=>o.model=t)},Object.assign({disabled:o.$attrs.readonly},o.controlAttributes)),[e.renderSlot(o.$slots,"default")],16)),[[e.vModelSelect,o.model],[B]])]),e.renderSlot(o.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"select-field-fade"},{default:e.withCtx(()=>[o.activity?(e.openBlock(),e.createBlock(h,{key:"activity",ref:"activity",type:o.indicator,size:o.indicatorSize||o.size},null,8,["type","size"])):e.createCommentVNode("",!0)]),_:1})])]),e.renderSlot(o.$slots,"errors",e.normalizeProps(e.guardReactiveProps({error:o.error,errors:o.errors,id:o.$attrs.id,name:o.$attrs.name})),()=>[o.error||o.errors?(e.openBlock(),e.createBlock($,{key:0,id:o.$attrs.id,name:o.$attrs.name,error:o.error,errors:o.errors},{default:e.withCtx(({error:t})=>[e.createElementVNode("div",k,[e.createTextVNode(e.toDisplayString(t),1),y])]),_:1},8,["id","name","error","errors"])):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,"feedback",e.normalizeProps(e.guardReactiveProps({feedback:o.feedback})),()=>[e.createVNode(g,{feedback:o.feedback},{default:e.withCtx(({feedback:t})=>[e.createElementVNode("div",C,e.toDisplayString(t),1)]),_:1},8,["feedback"])]),e.renderSlot(o.$slots,"help",{},()=>[o.helpText?(e.openBlock(),e.createElementBlock("small",{key:0,ref:"help"},e.toDisplayString(o.helpText),513)):e.createCommentVNode("",!0)])],2)}const S=m(c,[["render",b]]);r.SelectField=S,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
1
+ (function(r,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("@vue-interface/activity-indicator"),require("@vue-interface/form-control"),require("vue")):typeof define=="function"&&define.amd?define(["exports","@vue-interface/activity-indicator","@vue-interface/form-control","vue"],i):(r=typeof globalThis<"u"?globalThis:r||self,i(r.SelectField={},r.ActivityIndicator,r.FormControl,r.Vue))})(this,function(r,i,d,e){"use strict";const c=e.defineComponent({name:"SelectField",components:{ActivityIndicator:i.ActivityIndicator},extends:d.FormControl,props:{formControlClass:{type:String,default:"form-select"}},computed:{controlClass(){return this.plaintext?`${this.formControlClass}-plaintext`:this.formControlClass}}}),g="",m=(o,n)=>{const l=o.__vccOpts||o;for(const[s,a]of n)l[s]=a;return l},p=["for"],f={class:"form-group-inner"},k={invalid:"",class:"invalid-feedback"},y=e.createElementVNode("br",null,null,-1),C={valid:"",class:"valid-feedback"};function b(o,n,l,s,a,E){const $=e.resolveComponent("activity-indicator"),h=e.resolveComponent("FormControlErrors"),B=e.resolveComponent("FormControlFeedback"),V=e.resolveDirective("bind-events");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(o.formGroupClasses)},[e.renderSlot(o.$slots,"label",{},()=>[o.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",for:o.id,class:e.normalizeClass(o.labelClass)},e.toDisplayString(o.label),11,p)):e.createCommentVNode("",!0)]),e.createElementVNode("div",f,[e.renderSlot(o.$slots,"control",e.normalizeProps(e.guardReactiveProps({bindEvents:o.bindEvents,controlAttributes:o.controlAttributes})),()=>[o.$slots.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-group-inner-icon",onClick:n[0]||(n[0]=(...t)=>o.focus&&o.focus(...t))},[e.renderSlot(o.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives((e.openBlock(),e.createElementBlock("select",e.mergeProps({ref:"field","onUpdate:modelValue":n[1]||(n[1]=t=>o.model=t)},Object.assign({disabled:o.$attrs.readonly},o.controlAttributes)),[e.renderSlot(o.$slots,"default")],16)),[[e.vModelSelect,o.model],[V]])]),e.renderSlot(o.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"select-field-fade"},{default:e.withCtx(()=>[o.activity?(e.openBlock(),e.createBlock($,{key:"activity",ref:"activity",type:o.indicator,size:o.indicatorSize||o.size},null,8,["type","size"])):e.createCommentVNode("",!0)]),_:1})])]),e.renderSlot(o.$slots,"errors",e.normalizeProps(e.guardReactiveProps({error:o.error,errors:o.errors,id:o.$attrs.id,name:o.$attrs.name})),()=>[o.error||o.errors?(e.openBlock(),e.createBlock(h,{key:0,id:o.$attrs.id,name:o.$attrs.name,error:o.error,errors:o.errors},{default:e.withCtx(({error:t})=>[e.createElementVNode("div",k,[e.createTextVNode(e.toDisplayString(t),1),y])]),_:1},8,["id","name","error","errors"])):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,"feedback",e.normalizeProps(e.guardReactiveProps({feedback:o.feedback})),()=>[e.createVNode(B,{feedback:o.feedback},{default:e.withCtx(({feedback:t})=>[e.createElementVNode("div",C,e.toDisplayString(t),1)]),_:1},8,["feedback"])]),e.renderSlot(o.$slots,"help",{},()=>[o.helpText?(e.openBlock(),e.createElementBlock("small",{key:0,ref:"help"},e.toDisplayString(o.helpText),513)):e.createCommentVNode("",!0)])],2)}const S=m(c,[["render",b]]);r.SelectField=S,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
2
2
  //# sourceMappingURL=select-field.umd.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"select-field.umd.cjs","sources":["../src/SelectField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { FormControl } from '@vue-interface/form-control';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n\n name: 'SelectField',\n\n components: {\n ActivityIndicator,\n },\n\n extends: FormControl,\n\n props: {\n /**\n * The default class name assigned to the control element\n *\n * @param {String}\n * @default 'form-select'\n */\n formControlClass: {\n type: String,\n default: 'form-select'\n } \n },\n\n computed: {\n\n controlClass() {\n return this.plaintext ?\n `${this.defaultControlClass}-plaintext`\n : this.defaultControlClass;\n },\n },\n\n methods: {\n shouldChangeOnFocus() {\n return false;\n }\n }\n\n});\n</script>\n\n<template>\n <div :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"label\"\n ref=\"label\"\n :for=\"id\"\n :class=\"labelClass\">\n {{ label }}\n </label>\n </slot>\n\n <div class=\"form-group-inner\">\n <slot\n name=\"control\"\n v-bind=\"{ bindEvents, controlAttributes }\">\n <div\n v-if=\"$slots.icon\"\n class=\"form-group-inner-icon\"\n @click=\"focus\">\n <slot name=\"icon\" />\n </div>\n <select\n ref=\"field\"\n v-model=\"model\"\n v-bind-events\n v-bind=\"Object.assign({\n ['disabled']: $attrs.readonly\n }, controlAttributes)\">\n <slot />\n </select>\n </slot>\n\n <slot name=\"activity\">\n <transition name=\"select-field-fade\">\n <activity-indicator\n v-if=\"activity\"\n key=\"activity\"\n ref=\"activity\"\n :type=\"indicator\"\n :size=\"indicatorSize || size\" />\n </transition>\n </slot>\n </div>\n\n <slot\n name=\"errors\"\n v-bind=\"{ error, errors, id: $attrs.id, name: $attrs.name }\"> \n <FormControlErrors\n v-if=\"!!(error || errors)\"\n :id=\"$attrs.id\"\n v-slot=\"{ error }\"\n :name=\"$attrs.name\"\n :error=\"error\"\n :errors=\"errors\">\n <div\n invalid\n class=\"invalid-feedback\">\n {{ error }}<br>\n </div>\n </FormControlErrors>\n </slot>\n \n <slot\n name=\"feedback\"\n v-bind=\"{ feedback }\">\n <FormControlFeedback\n v-slot=\"{ feedback }\"\n :feedback=\"feedback\">\n <div\n valid\n class=\"valid-feedback\">\n {{ feedback }}\n </div>\n </FormControlFeedback>\n </slot>\n\n <slot name=\"help\">\n <small\n v-if=\"helpText\"\n ref=\"help\">\n {{ helpText }}\n </small>\n </slot>\n </div>\n</template>\n\n<style>\n.select-field,\n.select-field .form-group-inner {\n position: relative;\n transition: all .25s ease-in-out;\n}\n\n.select-field .activity-indicator {\n position: absolute;\n right: 1.25em;\n top: 50%;\n transform: translate(-1rem, -50%);\n transition: all .15s ease-in;\n}\n\n.select-field .activity-indicator-xs {\n font-size: .5em;\n right: 2em;\n}\n\n.select-field.has-activity .form-control-xs {\n padding-right: 3.75em;\n}\n\n.select-field .activity-indicator-sm {\n font-size: .5em;\n right: 2em;\n}\n\n.select-field.has-activity .form-control-sm {\n padding-right: 3em;\n}\n\n.select-field .activity-indicator-md {\n font-size: .666em;\n}\n\n.select-field.has-activity .form-control-md {\n padding-right: 3em;\n}\n\n.select-field .activity-indicator-lg {\n font-size: .75em;\n}\n\n.select-field.has-activity .form-control-lg {\n padding-right: 3em;\n}\n\n.select-field .activity-indicator-xl {\n font-size: 1em;\n}\n\n.select-field.has-activity .activity-indicator-xl ~ .form-control-xl {\n padding-right: 3.75em;\n}\n\n.select-field .activity-indicator {\n opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n opacity: 0;\n}\n\n.select-field.is-valid .valid-feedback,\n.select-field.is-invalid .invalid-feedback {\n display: flex;\n}\n\n.select-field .form-control-icon {\n padding-left: 2em;\n}\n\n.select-field .form-group-inner-icon {\n position: absolute;\n top: 50%;\n left: .666em;\n width: 1rem;\n font-size: 1em;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.select-field-sm .form-group-inner-icon {\n position: absolute;\n top: 50%;\n left: .666rem;\n width: .75em;\n font-size: 1.5em;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.select-field-lg .form-group-inner-icon {\n position: absolute;\n top: 50%;\n left: .666rem;\n width: 1.25em;\n font-size: 1em;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.select-field .activity-indicator {\n opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n opacity: 0;\n}\n</style>\n\n"],"names":["_sfc_main","defineComponent","ActivityIndicator","FormControl","_hoisted_2","_hoisted_3","_hoisted_4","_createElementVNode","_hoisted_5","_resolveDirective","_normalizeClass","_ctx","_openBlock","_createElementBlock","_toDisplayString","_hoisted_1","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_cache","args","_withDirectives","_mergeProps","$event","_createVNode","_Transition","_withCtx","_createBlock","_component_activity_indicator","_component_FormControlErrors","_createTextVNode","error","_component_FormControlFeedback","feedback"],"mappings":"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"}
1
+ {"version":3,"file":"select-field.umd.cjs","sources":["../src/SelectField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { FormControl } from '@vue-interface/form-control';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n\n name: 'SelectField',\n\n components: {\n ActivityIndicator,\n },\n\n extends: FormControl,\n\n props: {\n /**\n * The default class name assigned to the control element\n *\n * @param {String}\n * @default 'form-select'\n */\n formControlClass: {\n type: String,\n default: 'form-select'\n } \n },\n\n computed: {\n controlClass() {\n return this.plaintext ?\n `${this.formControlClass}-plaintext`\n : this.formControlClass;\n }\n }\n\n});\n</script>\n\n<template>\n <div :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"label\"\n ref=\"label\"\n :for=\"id\"\n :class=\"labelClass\">\n {{ label }}\n </label>\n </slot>\n\n <div class=\"form-group-inner\">\n <slot\n name=\"control\"\n v-bind=\"{ bindEvents, controlAttributes }\">\n <div\n v-if=\"$slots.icon\"\n class=\"form-group-inner-icon\"\n @click=\"focus\">\n <slot name=\"icon\" />\n </div>\n <select\n ref=\"field\"\n v-model=\"model\"\n v-bind-events\n v-bind=\"Object.assign({\n ['disabled']: $attrs.readonly\n }, controlAttributes)\">\n <slot />\n </select>\n </slot>\n\n <slot name=\"activity\">\n <transition name=\"select-field-fade\">\n <activity-indicator\n v-if=\"activity\"\n key=\"activity\"\n ref=\"activity\"\n :type=\"indicator\"\n :size=\"indicatorSize || size\" />\n </transition>\n </slot>\n </div>\n\n <slot\n name=\"errors\"\n v-bind=\"{ error, errors, id: $attrs.id, name: $attrs.name }\"> \n <FormControlErrors\n v-if=\"!!(error || errors)\"\n :id=\"$attrs.id\"\n v-slot=\"{ error }\"\n :name=\"$attrs.name\"\n :error=\"error\"\n :errors=\"errors\">\n <div\n invalid\n class=\"invalid-feedback\">\n {{ error }}<br>\n </div>\n </FormControlErrors>\n </slot>\n \n <slot\n name=\"feedback\"\n v-bind=\"{ feedback }\">\n <FormControlFeedback\n v-slot=\"{ feedback }\"\n :feedback=\"feedback\">\n <div\n valid\n class=\"valid-feedback\">\n {{ feedback }}\n </div>\n </FormControlFeedback>\n </slot>\n\n <slot name=\"help\">\n <small\n v-if=\"helpText\"\n ref=\"help\">\n {{ helpText }}\n </small>\n </slot>\n </div>\n</template>\n\n<style>\n.select-field,\n.select-field .form-group-inner {\n position: relative;\n transition: all .25s ease-in-out;\n}\n\n.select-field .activity-indicator {\n position: absolute;\n right: 1.25em;\n top: 50%;\n transform: translate(-1rem, -50%);\n transition: all .15s ease-in;\n}\n\n.select-field .activity-indicator-xs {\n font-size: .5em;\n right: 2em;\n}\n\n.select-field.has-activity .form-control-xs {\n padding-right: 3.75em;\n}\n\n.select-field .activity-indicator-sm {\n font-size: .5em;\n right: 2em;\n}\n\n.select-field.has-activity .form-control-sm {\n padding-right: 3em;\n}\n\n.select-field .activity-indicator-md {\n font-size: .666em;\n}\n\n.select-field.has-activity .form-control-md {\n padding-right: 3em;\n}\n\n.select-field .activity-indicator-lg {\n font-size: .75em;\n}\n\n.select-field.has-activity .form-control-lg {\n padding-right: 3em;\n}\n\n.select-field .activity-indicator-xl {\n font-size: 1em;\n}\n\n.select-field.has-activity .activity-indicator-xl ~ .form-control-xl {\n padding-right: 3.75em;\n}\n\n.select-field .activity-indicator {\n opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n opacity: 0;\n}\n\n.select-field.is-valid .valid-feedback,\n.select-field.is-invalid .invalid-feedback {\n display: flex;\n}\n\n.select-field .form-control-icon {\n padding-left: 2em;\n}\n\n.select-field .form-group-inner-icon {\n position: absolute;\n top: 50%;\n left: .666em;\n width: 1rem;\n font-size: 1em;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.select-field-sm .form-group-inner-icon {\n position: absolute;\n top: 50%;\n left: .666rem;\n width: .75em;\n font-size: 1.5em;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.select-field-lg .form-group-inner-icon {\n position: absolute;\n top: 50%;\n left: .666rem;\n width: 1.25em;\n font-size: 1em;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.select-field .activity-indicator {\n opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n opacity: 0;\n}\n</style>\n\n"],"names":["_sfc_main","defineComponent","ActivityIndicator","FormControl","_hoisted_2","_hoisted_3","_hoisted_4","_createElementVNode","_hoisted_5","_resolveDirective","_normalizeClass","_ctx","_openBlock","_createElementBlock","_toDisplayString","_hoisted_1","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_cache","args","_withDirectives","_mergeProps","$event","_createVNode","_Transition","_withCtx","_createBlock","_component_activity_indicator","_component_FormControlErrors","_createTextVNode","error","_component_FormControlFeedback","feedback"],"mappings":"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"}
@@ -11,9 +11,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
11
11
  };
12
12
  }, unknown, unknown, {
13
13
  controlClass(): any;
14
- }, {
15
- shouldChangeOnFocus(): false;
16
- }, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
14
+ }, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
17
15
  activity: {
18
16
  type: BooleanConstructor;
19
17
  default: boolean;
@@ -79,10 +77,332 @@ declare const _sfc_main: import("vue").DefineComponent<{
79
77
  };
80
78
  valid: BooleanConstructor;
81
79
  }, unknown, {
82
- currentValue: null;
80
+ currentValue: undefined;
83
81
  hasChanged: boolean;
84
82
  hasFocus: boolean;
85
- isDirty: boolean;
83
+ isDirty: import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
84
+ activity: {
85
+ type: BooleanConstructor;
86
+ default: boolean;
87
+ };
88
+ animated: {
89
+ type: BooleanConstructor;
90
+ default: () => any;
91
+ };
92
+ error: {
93
+ type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
94
+ default: undefined;
95
+ };
96
+ errors: {
97
+ type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
98
+ default: undefined;
99
+ };
100
+ feedback: {
101
+ type: (StringConstructor | ArrayConstructor)[];
102
+ default: undefined;
103
+ };
104
+ formControlClass: {
105
+ type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
106
+ default: () => any;
107
+ };
108
+ group: {
109
+ type: BooleanConstructor;
110
+ default: () => any;
111
+ };
112
+ helpText: {
113
+ type: (StringConstructor | NumberConstructor)[];
114
+ default: undefined;
115
+ };
116
+ indicator: {
117
+ type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
118
+ default: () => any;
119
+ };
120
+ indicatorSize: {
121
+ type: StringConstructor;
122
+ default: undefined;
123
+ };
124
+ invalid: BooleanConstructor;
125
+ label: {
126
+ type: (StringConstructor | NumberConstructor)[];
127
+ default: undefined;
128
+ };
129
+ labelClass: {
130
+ type: (StringConstructor | ObjectConstructor)[];
131
+ default: () => any;
132
+ };
133
+ modelValue: {
134
+ type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
135
+ default: () => undefined;
136
+ };
137
+ plaintext: BooleanConstructor;
138
+ size: {
139
+ type: StringConstructor;
140
+ default: undefined;
141
+ };
142
+ valid: BooleanConstructor;
143
+ }>> & {
144
+ onFocus?: ((...args: any[]) => any) | undefined;
145
+ onBlur?: ((...args: any[]) => any) | undefined;
146
+ onChange?: ((...args: any[]) => any) | undefined;
147
+ onClick?: ((...args: any[]) => any) | undefined;
148
+ onKeypress?: ((...args: any[]) => any) | undefined;
149
+ onKeyup?: ((...args: any[]) => any) | undefined;
150
+ onKeydown?: ((...args: any[]) => any) | undefined;
151
+ onProgress?: ((...args: any[]) => any) | undefined;
152
+ onPaste?: ((...args: any[]) => any) | undefined;
153
+ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
154
+ }, {}, {}, {}, import("vue").MethodOptions, import("vue").DefineComponent<{
155
+ dropShadow: {
156
+ type: (BooleanConstructor | StringConstructor)[];
157
+ default: undefined;
158
+ };
159
+ dropShadowableClassPrefix: {
160
+ type: StringConstructor;
161
+ default: string;
162
+ };
163
+ shadow: {
164
+ type: (BooleanConstructor | StringConstructor)[];
165
+ default: undefined;
166
+ };
167
+ shadowableClassPrefix: {
168
+ type: StringConstructor;
169
+ default: string;
170
+ };
171
+ }, unknown, unknown, {
172
+ shadowableClass(): {
173
+ [x: string]: boolean;
174
+ };
175
+ }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
176
+ dropShadow: {
177
+ type: (BooleanConstructor | StringConstructor)[];
178
+ default: undefined;
179
+ };
180
+ dropShadowableClassPrefix: {
181
+ type: StringConstructor;
182
+ default: string;
183
+ };
184
+ shadow: {
185
+ type: (BooleanConstructor | StringConstructor)[];
186
+ default: undefined;
187
+ };
188
+ shadowableClassPrefix: {
189
+ type: StringConstructor;
190
+ default: string;
191
+ };
192
+ }>>, {
193
+ shadow: string | boolean;
194
+ dropShadow: string | boolean;
195
+ dropShadowableClassPrefix: string;
196
+ shadowableClassPrefix: string;
197
+ }>, import("vue").ComponentOptionsMixin, {}, Readonly<import("vue").ExtractPropTypes<{
198
+ activity: {
199
+ type: BooleanConstructor;
200
+ default: boolean;
201
+ };
202
+ animated: {
203
+ type: BooleanConstructor;
204
+ default: () => any;
205
+ };
206
+ error: {
207
+ type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
208
+ default: undefined;
209
+ };
210
+ errors: {
211
+ type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
212
+ default: undefined;
213
+ };
214
+ feedback: {
215
+ type: (StringConstructor | ArrayConstructor)[];
216
+ default: undefined;
217
+ };
218
+ formControlClass: {
219
+ type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
220
+ default: () => any;
221
+ };
222
+ group: {
223
+ type: BooleanConstructor;
224
+ default: () => any;
225
+ };
226
+ helpText: {
227
+ type: (StringConstructor | NumberConstructor)[];
228
+ default: undefined;
229
+ };
230
+ indicator: {
231
+ type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
232
+ default: () => any;
233
+ };
234
+ indicatorSize: {
235
+ type: StringConstructor;
236
+ default: undefined;
237
+ };
238
+ invalid: BooleanConstructor;
239
+ label: {
240
+ type: (StringConstructor | NumberConstructor)[];
241
+ default: undefined;
242
+ };
243
+ labelClass: {
244
+ type: (StringConstructor | ObjectConstructor)[];
245
+ default: () => any;
246
+ };
247
+ modelValue: {
248
+ type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
249
+ default: () => undefined;
250
+ };
251
+ plaintext: BooleanConstructor;
252
+ size: {
253
+ type: StringConstructor;
254
+ default: undefined;
255
+ };
256
+ valid: BooleanConstructor;
257
+ }>> & {
258
+ onFocus?: ((...args: any[]) => any) | undefined;
259
+ onBlur?: ((...args: any[]) => any) | undefined;
260
+ onChange?: ((...args: any[]) => any) | undefined;
261
+ onClick?: ((...args: any[]) => any) | undefined;
262
+ onKeypress?: ((...args: any[]) => any) | undefined;
263
+ onKeyup?: ((...args: any[]) => any) | undefined;
264
+ onKeydown?: ((...args: any[]) => any) | undefined;
265
+ onProgress?: ((...args: any[]) => any) | undefined;
266
+ onPaste?: ((...args: any[]) => any) | undefined;
267
+ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
268
+ }, {}, false, {}, {
269
+ P: Readonly<import("vue").ExtractPropTypes<{
270
+ dropShadow: {
271
+ type: (BooleanConstructor | StringConstructor)[];
272
+ default: undefined;
273
+ };
274
+ dropShadowableClassPrefix: {
275
+ type: StringConstructor;
276
+ default: string;
277
+ };
278
+ shadow: {
279
+ type: (BooleanConstructor | StringConstructor)[];
280
+ default: undefined;
281
+ };
282
+ shadowableClassPrefix: {
283
+ type: StringConstructor;
284
+ default: string;
285
+ };
286
+ }>>;
287
+ B: {};
288
+ D: {};
289
+ C: {
290
+ shadowableClass(): {
291
+ [x: string]: boolean;
292
+ };
293
+ };
294
+ M: {};
295
+ Defaults: {
296
+ shadow: string | boolean;
297
+ dropShadow: string | boolean;
298
+ dropShadowableClassPrefix: string;
299
+ shadowableClassPrefix: string;
300
+ };
301
+ } & {
302
+ P: {};
303
+ B: {};
304
+ D: {};
305
+ C: {};
306
+ M: {};
307
+ Defaults: {};
308
+ }, Readonly<import("vue").ExtractPropTypes<{
309
+ dropShadow: {
310
+ type: (BooleanConstructor | StringConstructor)[];
311
+ default: undefined;
312
+ };
313
+ dropShadowableClassPrefix: {
314
+ type: StringConstructor;
315
+ default: string;
316
+ };
317
+ shadow: {
318
+ type: (BooleanConstructor | StringConstructor)[];
319
+ default: undefined;
320
+ };
321
+ shadowableClassPrefix: {
322
+ type: StringConstructor;
323
+ default: string;
324
+ };
325
+ }>> & Readonly<import("vue").ExtractPropTypes<{
326
+ activity: {
327
+ type: BooleanConstructor;
328
+ default: boolean;
329
+ };
330
+ animated: {
331
+ type: BooleanConstructor;
332
+ default: () => any;
333
+ };
334
+ error: {
335
+ type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
336
+ default: undefined;
337
+ };
338
+ errors: {
339
+ type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
340
+ default: undefined;
341
+ };
342
+ feedback: {
343
+ type: (StringConstructor | ArrayConstructor)[];
344
+ default: undefined;
345
+ };
346
+ formControlClass: {
347
+ type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
348
+ default: () => any;
349
+ };
350
+ group: {
351
+ type: BooleanConstructor;
352
+ default: () => any;
353
+ };
354
+ helpText: {
355
+ type: (StringConstructor | NumberConstructor)[];
356
+ default: undefined;
357
+ };
358
+ indicator: {
359
+ type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
360
+ default: () => any;
361
+ };
362
+ indicatorSize: {
363
+ type: StringConstructor;
364
+ default: undefined;
365
+ };
366
+ invalid: BooleanConstructor;
367
+ label: {
368
+ type: (StringConstructor | NumberConstructor)[];
369
+ default: undefined;
370
+ };
371
+ labelClass: {
372
+ type: (StringConstructor | ObjectConstructor)[];
373
+ default: () => any;
374
+ };
375
+ modelValue: {
376
+ type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
377
+ default: () => undefined;
378
+ };
379
+ plaintext: BooleanConstructor;
380
+ size: {
381
+ type: StringConstructor;
382
+ default: undefined;
383
+ };
384
+ valid: BooleanConstructor;
385
+ }>> & {
386
+ onFocus?: ((...args: any[]) => any) | undefined;
387
+ onBlur?: ((...args: any[]) => any) | undefined;
388
+ onChange?: ((...args: any[]) => any) | undefined;
389
+ onClick?: ((...args: any[]) => any) | undefined;
390
+ onKeypress?: ((...args: any[]) => any) | undefined;
391
+ onKeyup?: ((...args: any[]) => any) | undefined;
392
+ onKeydown?: ((...args: any[]) => any) | undefined;
393
+ onProgress?: ((...args: any[]) => any) | undefined;
394
+ onPaste?: ((...args: any[]) => any) | undefined;
395
+ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
396
+ }, {}, {}, {
397
+ shadowableClass(): {
398
+ [x: string]: boolean;
399
+ };
400
+ }, import("vue").MethodOptions, {
401
+ shadow: string | boolean;
402
+ dropShadow: string | boolean;
403
+ dropShadowableClassPrefix: string;
404
+ shadowableClassPrefix: string;
405
+ }>;
86
406
  }, {
87
407
  model: {
88
408
  get(): any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vue-interface/select-field",
3
- "version": "1.0.0-beta.6",
3
+ "version": "1.0.0-beta.8",
4
4
  "description": "A Vue select field component.",
5
5
  "files": [
6
6
  "dist"