@vue-interface/input-field 1.0.0-beta.25 → 1.0.0-beta.26

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,4 +1,4 @@
1
- import { defineComponent as V, ref as z, openBlock as i, createElementBlock as d, normalizeClass as $, unref as o, renderSlot as t, toDisplayString as u, createCommentVNode as n, createElementVNode as s, normalizeProps as f, guardReactiveProps as m, useSlots as A, withDirectives as N, mergeProps as D, isRef as E, vModelDynamic as I, createVNode as B, Transition as P, withCtx as c, createBlock as g, createTextVNode as w } from "vue";
1
+ import { defineComponent as z, ref as S, openBlock as t, createElementBlock as d, normalizeClass as B, unref as o, renderSlot as i, toDisplayString as u, createCommentVNode as n, createElementVNode as s, normalizeProps as f, guardReactiveProps as p, useSlots as A, withDirectives as N, mergeProps as D, isRef as E, vModelDynamic as I, createVNode as $, Transition as P, withCtx as y, createBlock as F, createTextVNode as w } from "vue";
2
2
  import { ActivityIndicator as R } from "@vue-interface/activity-indicator";
3
3
  import { useFormControl as G, FormControlErrors as M, FormControlFeedback as U } from "@vue-interface/form-control";
4
4
  const j = ["for"], q = { class: "form-group-inner" }, H = {
@@ -7,7 +7,7 @@ const j = ["for"], q = { class: "form-group-inner" }, H = {
7
7
  }, J = /* @__PURE__ */ s("br", null, null, -1), K = {
8
8
  valid: "",
9
9
  class: "valid-feedback"
10
- }, W = /* @__PURE__ */ V({
10
+ }, W = /* @__PURE__ */ z({
11
11
  inheritAttrs: !1,
12
12
  __name: "InputField",
13
13
  props: {
@@ -33,34 +33,34 @@ const j = ["for"], q = { class: "form-group-inner" }, H = {
33
33
  checked: { type: Boolean }
34
34
  },
35
35
  emits: ["blur", "change", "click", "focus", "update:modelValue"],
36
- setup(F, { emit: h }) {
37
- const C = h, S = F, { controlAttributes: p, formGroupClasses: T, model: a, onClick: k, onBlur: v, onFocus: b } = G({ props: S, emit: C }), y = z();
38
- return (e, l) => (i(), d("div", {
39
- class: $(["input-field", o(T)])
36
+ setup(g, { emit: h }) {
37
+ const C = h, T = g, { controlAttributes: m, formGroupClasses: V, model: a, onClick: k, onBlur: v, onFocus: b } = G({ props: T, emit: C }), c = S();
38
+ return (e, l) => (t(), d("div", {
39
+ class: B(["input-field", o(V)])
40
40
  }, [
41
- t(e.$slots, "label", {}, () => [
42
- e.label ? (i(), d("label", {
41
+ i(e.$slots, "label", {}, () => [
42
+ e.label ? (t(), d("label", {
43
43
  key: 0,
44
44
  ref: "label",
45
- class: $(e.labelClass),
46
- for: o(p).id
45
+ class: B(e.labelClass),
46
+ for: o(m).id
47
47
  }, u(e.label), 11, j)) : n("", !0)
48
48
  ]),
49
49
  s("div", q, [
50
- t(e.$slots, "control", f(m({ onClick: o(k), onBlur: o(v), onFocus: o(b), controlAttributes: o(p) })), () => [
51
- A().icon ? (i(), d("div", {
50
+ i(e.$slots, "control", f(p({ onClick: o(k), onBlur: o(v), onFocus: o(b), controlAttributes: o(m) })), () => [
51
+ A().icon ? (t(), d("div", {
52
52
  key: 0,
53
53
  class: "form-group-inner-icon",
54
54
  onClick: l[0] || (l[0] = //@ts-ignore
55
- (...r) => y.value.focus && y.value.focus(...r))
55
+ (...r) => c.value.focus && c.value.focus(...r))
56
56
  }, [
57
- t(e.$slots, "icon")
57
+ i(e.$slots, "icon")
58
58
  ])) : n("", !0),
59
59
  N(s("input", D({
60
60
  ref_key: "field",
61
- ref: y,
61
+ ref: c,
62
62
  "onUpdate:modelValue": l[1] || (l[1] = (r) => E(a) ? a.value = r : null)
63
- }, o(p), {
63
+ }, o(m), {
64
64
  onClick: l[2] || (l[2] = //@ts-ignore
65
65
  (...r) => o(k) && o(k)(...r)),
66
66
  onBlur: l[3] || (l[3] = //@ts-ignore
@@ -72,10 +72,10 @@ const j = ["for"], q = { class: "form-group-inner" }, H = {
72
72
  [I, o(a)]
73
73
  ])
74
74
  ]),
75
- t(e.$slots, "activity", {}, () => [
76
- B(P, { name: "input-field-fade" }, {
77
- default: c(() => [
78
- e.activity && e.indicator ? (i(), g(o(R), {
75
+ i(e.$slots, "activity", {}, () => [
76
+ $(P, { name: "input-field-fade" }, {
77
+ default: y(() => [
78
+ e.activity && e.indicator ? (t(), F(o(R), {
79
79
  key: "activity",
80
80
  ref: "activity",
81
81
  type: e.indicator,
@@ -86,15 +86,15 @@ const j = ["for"], q = { class: "form-group-inner" }, H = {
86
86
  })
87
87
  ])
88
88
  ]),
89
- t(e.$slots, "errors", f(m({ error: e.error, errors: e.errors, id: e.$attrs.id, name: e.$attrs.name })), () => [
90
- e.error || e.errors ? (i(), g(o(M), {
89
+ i(e.$slots, "errors", f(p({ error: e.error, errors: e.errors, id: e.$attrs.id, name: e.$attrs.name })), () => [
90
+ e.error || e.errors ? (t(), F(o(M), {
91
91
  key: 0,
92
- id: e.$attrs.id && String(e.$attrs.id),
93
- name: e.$attrs.name && String(e.$attrs.name),
92
+ id: e.id,
93
+ name: e.name,
94
94
  error: e.error,
95
95
  errors: e.errors
96
96
  }, {
97
- default: c(({ error: r }) => [
97
+ default: y(({ error: r }) => [
98
98
  s("div", H, [
99
99
  w(u(r), 1),
100
100
  J
@@ -103,16 +103,16 @@ const j = ["for"], q = { class: "form-group-inner" }, H = {
103
103
  _: 1
104
104
  }, 8, ["id", "name", "error", "errors"])) : n("", !0)
105
105
  ]),
106
- t(e.$slots, "feedback", f(m({ feedback: e.feedback })), () => [
107
- B(o(U), { feedback: e.feedback }, {
108
- default: c(({ feedback: r }) => [
106
+ i(e.$slots, "feedback", f(p({ feedback: e.feedback })), () => [
107
+ $(o(U), { feedback: e.feedback }, {
108
+ default: y(({ feedback: r }) => [
109
109
  s("div", K, u(r), 1)
110
110
  ]),
111
111
  _: 1
112
112
  }, 8, ["feedback"])
113
113
  ]),
114
- t(e.$slots, "help", f(m({ helpText: e.helpText })), () => [
115
- e.helpText ? (i(), d("small", {
114
+ i(e.$slots, "help", f(p({ helpText: e.helpText })), () => [
115
+ e.helpText ? (t(), d("small", {
116
116
  key: 0,
117
117
  ref: "help"
118
118
  }, u(e.helpText), 513)) : n("", !0)
@@ -1 +1 @@
1
- {"version":3,"file":"input-field.js","sources":["../src/InputField.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 { 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-control',\n labelClass: 'form-label'\n});\n\nconst { controlAttributes, formGroupClasses, model, onClick, onBlur, onFocus } = useFormControl({ props, emit });\n\nconst field = ref<HTMLInputElement>();\n</script>\n\n<template>\n <div\n class=\"input-field\"\n :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"label\"\n ref=\"label\"\n :class=\"labelClass\"\n :for=\"controlAttributes.id\">\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 <input\n ref=\"field\"\n v-model=\"model\"\n v-bind=\"controlAttributes\"\n @click=\"onClick\"\n @blur=\"onBlur\"\n @focus=\"onFocus\"\n @change=\"emit('change', model)\">\n </slot>\n\n <slot name=\"activity\">\n <Transition name=\"input-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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,UAAMA,IAAOC,GAEPC,IAAQC,GAKR,EAAE,mBAAAC,GAAmB,kBAAAC,GAAkB,OAAAC,GAAO,SAAAC,GAAS,QAAAC,GAAQ,SAAAC,EAAQ,IAAIC,EAAe,EAAE,OAAAR,GAAO,MAAAF,EAAM,CAAA,GAEzGW,IAAQC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"input-field.js","sources":["../src/InputField.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 { 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-control',\n labelClass: 'form-label'\n});\n\nconst { controlAttributes, formGroupClasses, model, onClick, onBlur, onFocus } = useFormControl({ props, emit });\n\nconst field = ref<HTMLInputElement>();\n</script>\n\n<template>\n <div\n class=\"input-field\"\n :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"label\"\n ref=\"label\"\n :class=\"labelClass\"\n :for=\"controlAttributes.id\">\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 <input\n ref=\"field\"\n v-model=\"model\"\n v-bind=\"controlAttributes\"\n @click=\"onClick\"\n @blur=\"onBlur\"\n @focus=\"onFocus\"\n @change=\"emit('change', model)\">\n </slot>\n\n <slot name=\"activity\">\n <Transition name=\"input-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=\"id\"\n v-slot=\"{ error }\"\n :name=\"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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,UAAMA,IAAOC,GAEPC,IAAQC,GAKR,EAAE,mBAAAC,GAAmB,kBAAAC,GAAkB,OAAAC,GAAO,SAAAC,GAAS,QAAAC,GAAQ,SAAAC,EAAQ,IAAIC,EAAe,EAAE,OAAAR,GAAO,MAAAF,EAAM,CAAA,GAEzGW,IAAQC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,2 +1,2 @@
1
- (function(n,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):(n=typeof globalThis<"u"?globalThis:n||self,e(n.InputField={},n.Vue,n.VueInterfaceActivityIndicator,n.VueInterfaceFormControl))})(this,function(n,e,m,i){"use strict";const k=["for"],y={class:"form-group-inner"},b={invalid:"",class:"invalid-feedback"},C=e.createElementVNode("br",null,null,-1),B={valid:"",class:"valid-feedback"},V=e.defineComponent({inheritAttrs:!1,__name:"InputField",props:{activity:{type:Boolean},disabled:{type:Boolean},error:{},errors:{},feedback:{},formControlClass:{default:"form-control"},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(u,{emit:S}){const p=S,g=u,{controlAttributes:a,formGroupClasses:$,model:l,onClick:s,onBlur:d,onFocus:f}=i.useFormControl({props:g,emit:p}),c=e.ref();return(r,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-field",e.unref($)])},[e.renderSlot(r.$slots,"label",{},()=>[r.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",class:e.normalizeClass(r.labelClass),for:e.unref(a).id},e.toDisplayString(r.label),11,k)):e.createCommentVNode("",!0)]),e.createElementVNode("div",y,[e.renderSlot(r.$slots,"control",e.normalizeProps(e.guardReactiveProps({onClick:e.unref(s),onBlur:e.unref(d),onFocus:e.unref(f),controlAttributes:e.unref(a)})),()=>[e.useSlots().icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-group-inner-icon",onClick:t[0]||(t[0]=(...o)=>c.value.focus&&c.value.focus(...o))},[e.renderSlot(r.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps({ref_key:"field",ref:c,"onUpdate:modelValue":t[1]||(t[1]=o=>e.isRef(l)?l.value=o:null)},e.unref(a),{onClick:t[2]||(t[2]=(...o)=>e.unref(s)&&e.unref(s)(...o)),onBlur:t[3]||(t[3]=(...o)=>e.unref(d)&&e.unref(d)(...o)),onFocus:t[4]||(t[4]=(...o)=>e.unref(f)&&e.unref(f)(...o)),onChange:t[5]||(t[5]=o=>p("change",e.unref(l)))}),null,16),[[e.vModelDynamic,e.unref(l)]])]),e.renderSlot(r.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"input-field-fade"},{default:e.withCtx(()=>[r.activity&&r.indicator?(e.openBlock(),e.createBlock(e.unref(m.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(i.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",b,[e.createTextVNode(e.toDisplayString(o),1),C])]),_: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(i.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))}});n.InputField=V,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
1
+ (function(n,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):(n=typeof globalThis<"u"?globalThis:n||self,e(n.InputField={},n.Vue,n.VueInterfaceActivityIndicator,n.VueInterfaceFormControl))})(this,function(n,e,m,i){"use strict";const k=["for"],y={class:"form-group-inner"},b={invalid:"",class:"invalid-feedback"},C=e.createElementVNode("br",null,null,-1),B={valid:"",class:"valid-feedback"},V=e.defineComponent({inheritAttrs:!1,__name:"InputField",props:{activity:{type:Boolean},disabled:{type:Boolean},error:{},errors:{},feedback:{},formControlClass:{default:"form-control"},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(u,{emit:S}){const p=S,g=u,{controlAttributes:a,formGroupClasses:h,model:l,onClick:s,onBlur:d,onFocus:f}=i.useFormControl({props:g,emit:p}),c=e.ref();return(r,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-field",e.unref(h)])},[e.renderSlot(r.$slots,"label",{},()=>[r.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",class:e.normalizeClass(r.labelClass),for:e.unref(a).id},e.toDisplayString(r.label),11,k)):e.createCommentVNode("",!0)]),e.createElementVNode("div",y,[e.renderSlot(r.$slots,"control",e.normalizeProps(e.guardReactiveProps({onClick:e.unref(s),onBlur:e.unref(d),onFocus:e.unref(f),controlAttributes:e.unref(a)})),()=>[e.useSlots().icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-group-inner-icon",onClick:t[0]||(t[0]=(...o)=>c.value.focus&&c.value.focus(...o))},[e.renderSlot(r.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps({ref_key:"field",ref:c,"onUpdate:modelValue":t[1]||(t[1]=o=>e.isRef(l)?l.value=o:null)},e.unref(a),{onClick:t[2]||(t[2]=(...o)=>e.unref(s)&&e.unref(s)(...o)),onBlur:t[3]||(t[3]=(...o)=>e.unref(d)&&e.unref(d)(...o)),onFocus:t[4]||(t[4]=(...o)=>e.unref(f)&&e.unref(f)(...o)),onChange:t[5]||(t[5]=o=>p("change",e.unref(l)))}),null,16),[[e.vModelDynamic,e.unref(l)]])]),e.renderSlot(r.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"input-field-fade"},{default:e.withCtx(()=>[r.activity&&r.indicator?(e.openBlock(),e.createBlock(e.unref(m.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(i.FormControlErrors),{key:0,id:r.id,name:r.name,error:r.error,errors:r.errors},{default:e.withCtx(({error:o})=>[e.createElementVNode("div",b,[e.createTextVNode(e.toDisplayString(o),1),C])]),_: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(i.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))}});n.InputField=V,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
2
2
  //# sourceMappingURL=input-field.umd.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"input-field.umd.cjs","sources":["../src/InputField.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 { 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-control',\n labelClass: 'form-label'\n});\n\nconst { controlAttributes, formGroupClasses, model, onClick, onBlur, onFocus } = useFormControl({ props, emit });\n\nconst field = ref<HTMLInputElement>();\n</script>\n\n<template>\n <div\n class=\"input-field\"\n :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"label\"\n ref=\"label\"\n :class=\"labelClass\"\n :for=\"controlAttributes.id\">\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 <input\n ref=\"field\"\n v-model=\"model\"\n v-bind=\"controlAttributes\"\n @click=\"onClick\"\n @blur=\"onBlur\"\n @focus=\"onFocus\"\n @change=\"emit('change', model)\">\n </slot>\n\n <slot name=\"activity\">\n <Transition name=\"input-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"],"mappings":"4mCAYA,MAAMA,EAAOC,EAEPC,EAAQC,EAKR,CAAE,kBAAAC,EAAmB,iBAAAC,EAAkB,MAAAC,EAAO,QAAAC,EAAS,OAAAC,EAAQ,QAAAC,CAAQ,EAAIC,EAAAA,eAAe,CAAE,MAAAR,EAAO,KAAAF,CAAM,CAAA,EAEzGW,EAAQC,EAAAA"}
1
+ {"version":3,"file":"input-field.umd.cjs","sources":["../src/InputField.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 { 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-control',\n labelClass: 'form-label'\n});\n\nconst { controlAttributes, formGroupClasses, model, onClick, onBlur, onFocus } = useFormControl({ props, emit });\n\nconst field = ref<HTMLInputElement>();\n</script>\n\n<template>\n <div\n class=\"input-field\"\n :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"label\"\n ref=\"label\"\n :class=\"labelClass\"\n :for=\"controlAttributes.id\">\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 <input\n ref=\"field\"\n v-model=\"model\"\n v-bind=\"controlAttributes\"\n @click=\"onClick\"\n @blur=\"onBlur\"\n @focus=\"onFocus\"\n @change=\"emit('change', model)\">\n </slot>\n\n <slot name=\"activity\">\n <Transition name=\"input-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=\"id\"\n v-slot=\"{ error }\"\n :name=\"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"],"mappings":"4mCAYA,MAAMA,EAAOC,EAEPC,EAAQC,EAKR,CAAE,kBAAAC,EAAmB,iBAAAC,EAAkB,MAAAC,EAAO,QAAAC,EAAS,OAAAC,EAAQ,QAAAC,CAAQ,EAAIC,EAAAA,eAAe,CAAE,MAAAR,EAAO,KAAAF,CAAM,CAAA,EAEzGW,EAAQC,EAAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vue-interface/input-field",
3
- "version": "1.0.0-beta.25",
3
+ "version": "1.0.0-beta.26",
4
4
  "description": "A Vue input field component.",
5
5
  "files": [
6
6
  "dist"