@vue-interface/input-field 2.0.16 → 2.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/input-field.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { ActivityIndicator as
|
|
3
|
-
import { useFormControl as
|
|
4
|
-
const
|
|
1
|
+
import { defineComponent as S, mergeModels as w, useModel as D, useTemplateRef as d, createElementBlock as m, openBlock as a, normalizeClass as T, unref as t, renderSlot as l, createElementVNode as s, createCommentVNode as c, toDisplayString as f, normalizeProps as v, guardReactiveProps as y, withDirectives as E, mergeProps as I, vModelDynamic as P, createVNode as z, Transition as x, withCtx as p, createBlock as g, createTextVNode as R } from "vue";
|
|
2
|
+
import { ActivityIndicator as G } 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-control-inner" }, K = { class: "form-control-activity-indicator" }, L = {
|
|
5
5
|
invalid: "",
|
|
6
6
|
class: "invalid-feedback"
|
|
7
|
-
},
|
|
7
|
+
}, O = {
|
|
8
8
|
valid: "",
|
|
9
9
|
class: "valid-feedback"
|
|
10
|
-
},
|
|
10
|
+
}, Y = /* @__PURE__ */ S({
|
|
11
11
|
inheritAttrs: !1,
|
|
12
12
|
__name: "InputField",
|
|
13
|
-
props: /* @__PURE__ */
|
|
13
|
+
props: /* @__PURE__ */ w({
|
|
14
14
|
activity: { type: Boolean },
|
|
15
15
|
disabled: { type: Boolean },
|
|
16
16
|
error: {},
|
|
@@ -36,93 +36,106 @@ const x = ["for"], G = { class: "form-control-inner" }, U = { class: "form-contr
|
|
|
36
36
|
modelValue: {},
|
|
37
37
|
modelModifiers: {}
|
|
38
38
|
}),
|
|
39
|
-
emits: /* @__PURE__ */
|
|
40
|
-
setup(e, { emit:
|
|
41
|
-
const
|
|
42
|
-
controlAttributes:
|
|
43
|
-
formGroupClasses:
|
|
44
|
-
listeners:
|
|
45
|
-
} =
|
|
46
|
-
return (
|
|
47
|
-
|
|
39
|
+
emits: /* @__PURE__ */ w(["blur", "focus", "focusin", "focusout", "click", "doubleclick", "contextmenu", "mousedown", "mouseup", "mouseover", "mouseout", "mouseenter", "mouseleave", "mousemove", "keydown", "keyup", "keypress", "select", "selectionchange", "invalid", "submit", "reset", "scroll", "wheel", "copy", "cut", "paste", "touchstart", "touchend", "touchmove", "touchcancel", "change", "input", "beforeinput"], ["update:modelValue"]),
|
|
40
|
+
setup(e, { expose: F, emit: A }) {
|
|
41
|
+
const u = e, b = D(e, "modelValue"), M = A, {
|
|
42
|
+
controlAttributes: k,
|
|
43
|
+
formGroupClasses: N,
|
|
44
|
+
listeners: h
|
|
45
|
+
} = U({ model: b, props: u, emit: M }), C = d("activity"), $ = d("help"), B = d("label"), n = d("field"), V = d("wrapper");
|
|
46
|
+
return F({
|
|
47
|
+
activity: C,
|
|
48
|
+
help: $,
|
|
49
|
+
field: n,
|
|
50
|
+
label: B,
|
|
51
|
+
wrapper: V,
|
|
52
|
+
focus: () => n.value?.focus(),
|
|
53
|
+
blur: () => n.value?.blur()
|
|
54
|
+
}), (o, r) => (a(), m("div", {
|
|
55
|
+
ref_key: "wrapper",
|
|
56
|
+
ref: V,
|
|
57
|
+
class: T(["input-field", t(N)])
|
|
48
58
|
}, [
|
|
49
59
|
l(o.$slots, "label", {}, () => [
|
|
50
|
-
|
|
60
|
+
u.label ? (a(), m("label", {
|
|
51
61
|
key: 0,
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
62
|
+
ref_key: "label",
|
|
63
|
+
ref: B,
|
|
64
|
+
class: T(e.labelClass),
|
|
65
|
+
for: t(k).id
|
|
66
|
+
}, f(u.label), 11, H)) : c("", !0)
|
|
56
67
|
]),
|
|
57
|
-
|
|
58
|
-
l(o.$slots, "control",
|
|
59
|
-
o.$slots.icon ? (a(),
|
|
68
|
+
s("div", J, [
|
|
69
|
+
l(o.$slots, "control", v(y({ controlAttributes: t(k), listeners: t(h) })), () => [
|
|
70
|
+
o.$slots.icon ? (a(), m("div", {
|
|
60
71
|
key: 0,
|
|
61
72
|
class: "form-control-inner-icon",
|
|
62
|
-
onClick: r[0] || (r[0] = (i) =>
|
|
73
|
+
onClick: r[0] || (r[0] = (i) => n.value?.focus())
|
|
63
74
|
}, [
|
|
64
75
|
l(o.$slots, "icon")
|
|
65
|
-
])) :
|
|
66
|
-
|
|
76
|
+
])) : c("", !0),
|
|
77
|
+
E(s("input", I({
|
|
67
78
|
ref_key: "field",
|
|
68
|
-
ref:
|
|
69
|
-
"onUpdate:modelValue": r[1] || (r[1] = (i) =>
|
|
70
|
-
}, { ...t(
|
|
71
|
-
[
|
|
79
|
+
ref: n,
|
|
80
|
+
"onUpdate:modelValue": r[1] || (r[1] = (i) => b.value = i)
|
|
81
|
+
}, { ...t(k), ...t(h) }), null, 16), [
|
|
82
|
+
[P, b.value]
|
|
72
83
|
])
|
|
73
84
|
]),
|
|
74
|
-
|
|
85
|
+
s("div", K, [
|
|
75
86
|
l(o.$slots, "activity", {}, () => [
|
|
76
|
-
|
|
77
|
-
default:
|
|
78
|
-
|
|
87
|
+
z(x, { name: "input-field-fade" }, {
|
|
88
|
+
default: p(() => [
|
|
89
|
+
u.activity && e.indicator ? (a(), g(t(G), {
|
|
79
90
|
key: "activity",
|
|
80
|
-
|
|
91
|
+
ref_key: "activity",
|
|
92
|
+
ref: C,
|
|
81
93
|
type: e.indicator,
|
|
82
94
|
size: e.indicatorSize
|
|
83
|
-
}, null, 8, ["type", "size"])) :
|
|
95
|
+
}, null, 8, ["type", "size"])) : c("", !0)
|
|
84
96
|
]),
|
|
85
97
|
_: 1
|
|
86
98
|
})
|
|
87
99
|
])
|
|
88
100
|
])
|
|
89
101
|
]),
|
|
90
|
-
l(o.$slots, "errors",
|
|
91
|
-
e.error || e.errors ? (a(),
|
|
102
|
+
l(o.$slots, "errors", v(y({ error: e.error, errors: e.errors, id: o.$attrs.id, name: o.$attrs.name })), () => [
|
|
103
|
+
e.error || e.errors ? (a(), g(t(j), {
|
|
92
104
|
key: 0,
|
|
93
105
|
id: e.id,
|
|
94
106
|
name: e.name,
|
|
95
107
|
error: e.error,
|
|
96
108
|
errors: e.errors
|
|
97
109
|
}, {
|
|
98
|
-
default:
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
r[2] || (r[2] =
|
|
110
|
+
default: p(({ error: i }) => [
|
|
111
|
+
s("div", L, [
|
|
112
|
+
R(f(i), 1),
|
|
113
|
+
r[2] || (r[2] = s("br", null, null, -1))
|
|
102
114
|
])
|
|
103
115
|
]),
|
|
104
116
|
_: 1
|
|
105
|
-
}, 8, ["id", "name", "error", "errors"])) :
|
|
117
|
+
}, 8, ["id", "name", "error", "errors"])) : c("", !0)
|
|
106
118
|
]),
|
|
107
|
-
l(o.$slots, "feedback",
|
|
108
|
-
|
|
109
|
-
default:
|
|
110
|
-
|
|
119
|
+
l(o.$slots, "feedback", v(y({ feedback: e.feedback })), () => [
|
|
120
|
+
z(t(q), { feedback: e.feedback }, {
|
|
121
|
+
default: p(({ feedback: i }) => [
|
|
122
|
+
s("div", O, f(i), 1)
|
|
111
123
|
]),
|
|
112
124
|
_: 1
|
|
113
125
|
}, 8, ["feedback"])
|
|
114
126
|
]),
|
|
115
|
-
l(o.$slots, "help",
|
|
116
|
-
e.helpText ? (a(),
|
|
127
|
+
l(o.$slots, "help", v(y({ helpText: e.helpText })), () => [
|
|
128
|
+
e.helpText ? (a(), m("small", {
|
|
117
129
|
key: 0,
|
|
118
|
-
|
|
130
|
+
ref_key: "help",
|
|
131
|
+
ref: $,
|
|
119
132
|
class: "form-help"
|
|
120
|
-
},
|
|
133
|
+
}, f(e.helpText), 513)) : c("", !0)
|
|
121
134
|
])
|
|
122
135
|
], 2));
|
|
123
136
|
}
|
|
124
137
|
});
|
|
125
138
|
export {
|
|
126
|
-
|
|
139
|
+
Y as InputField
|
|
127
140
|
};
|
|
128
141
|
//# sourceMappingURL=input-field.js.map
|
package/dist/input-field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-field.js","sources":["../src/InputField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { InputHTMLAttributes, useTemplateRef } from 'vue';\n\nconst props = withDefaults(defineProps<InputFieldProps<ModelValue,Value>>(), {\n formControlClass: 'form-control',\n labelClass: 'form-label',\n size: 'form-control-md'\n});\n\ndefineOptions({\n inheritAttrs: false\n});\n\nconst model = defineModel<ModelValue>();\n\ndefineSlots<FormControlSlots<InputFieldControlSizePrefix,ModelValue>>();\n\nconst emit = defineEmits<FormControlEvents>();\n\nconst {\n controlAttributes,\n formGroupClasses,\n listeners\n} = useFormControl<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue|undefined, Value>({ model, props, emit });\n\nconst field = useTemplateRef<HTMLInputElement>('field');\n</script>\n\n<script lang=\"ts\">\nexport type InputFieldControlSizePrefix = 'form-control';\n\nexport type InputFieldProps<ModelValue, Value> = FormControlProps<\n InputHTMLAttributes, \n InputFieldControlSizePrefix, \n ModelValue, \n Value\n>;\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-control-inner\">\n <slot\n name=\"control\"\n v-bind=\"{ controlAttributes, listeners }\">\n <div\n v-if=\"$slots.icon\"\n class=\"form-control-inner-icon\"\n @click=\"field?.focus()\">\n <slot name=\"icon\" />\n </div>\n <input\n ref=\"field\"\n v-model=\"model\"\n v-bind=\"{...controlAttributes, ...listeners}\">\n </slot>\n \n <div class=\"form-control-activity-indicator\">\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 </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 class=\"form-help\">\n {{ helpText }}\n </small>\n </slot>\n </div>\n</template>"],"names":["props","__props","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","listeners","useFormControl","
|
|
1
|
+
{"version":3,"file":"input-field.js","sources":["../src/InputField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { InputHTMLAttributes, useTemplateRef } from 'vue';\n\nconst props = withDefaults(defineProps<InputFieldProps<ModelValue,Value>>(), {\n formControlClass: 'form-control',\n labelClass: 'form-label',\n size: 'form-control-md'\n});\n\ndefineOptions({\n inheritAttrs: false\n});\n\nconst model = defineModel<ModelValue>();\n\ndefineSlots<FormControlSlots<InputFieldControlSizePrefix,ModelValue>>();\n\nconst emit = defineEmits<FormControlEvents>();\n\nconst {\n controlAttributes,\n formGroupClasses,\n listeners\n} = useFormControl<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue|undefined, Value>({ model, props, emit });\n\nconst activity = useTemplateRef<InstanceType<typeof ActivityIndicator>>('activity');\nconst help = useTemplateRef<HTMLElement>('help');\nconst label = useTemplateRef<HTMLLabelElement>('label');\nconst field = useTemplateRef<HTMLInputElement>('field');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\ndefineExpose({\n activity,\n help,\n field,\n label,\n wrapper,\n focus: () => field.value?.focus(),\n blur: () => field.value?.blur(),\n})\n</script>\n\n<script lang=\"ts\">\nexport type InputFieldControlSizePrefix = 'form-control';\n\nexport type InputFieldProps<ModelValue, Value> = FormControlProps<\n InputHTMLAttributes, \n InputFieldControlSizePrefix, \n ModelValue, \n Value\n>;\n</script>\n\n<template>\n <div\n ref=\"wrapper\"\n class=\"input-field\"\n :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"props.label\"\n ref=\"label\"\n :class=\"labelClass\"\n :for=\"controlAttributes.id\">\n {{ props.label }}\n </label>\n </slot>\n \n <div class=\"form-control-inner\">\n <slot\n name=\"control\"\n v-bind=\"{ controlAttributes, listeners }\">\n <div\n v-if=\"$slots.icon\"\n class=\"form-control-inner-icon\"\n @click=\"field?.focus()\">\n <slot name=\"icon\" />\n </div>\n <input\n ref=\"field\"\n v-model=\"model\"\n v-bind=\"{...controlAttributes, ...listeners}\">\n </slot>\n \n <div class=\"form-control-activity-indicator\">\n <slot name=\"activity\">\n <Transition name=\"input-field-fade\">\n <ActivityIndicator\n v-if=\"props.activity && indicator\"\n key=\"activity\"\n ref=\"activity\"\n :type=\"indicator\"\n :size=\"indicatorSize\" />\n </Transition>\n </slot>\n </div>\n </div>\n\n <slot\n name=\"errors\"\n v-bind=\"{ error, errors, id: $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 class=\"form-help\">\n {{ helpText }}\n </small>\n </slot>\n </div>\n</template>"],"names":["props","__props","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","listeners","useFormControl","activity","useTemplateRef","help","label","field","wrapper","__expose","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_toDisplayString","_hoisted_1","_createElementVNode","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","_cache","$event","_withDirectives","_mergeProps","_hoisted_3","_createVNode","_Transition","_createBlock","ActivityIndicator","$attrs","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,UAAMA,IAAQC,GAURC,IAAQC,EAAuBF,GAAA,YAAC,GAIhCG,IAAOC,GAEP;AAAA,MACF,mBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,WAAAC;AAAA,IAAA,IACAC,EAA8F,EAAE,OAAAP,GAAO,OAAAF,GAAO,MAAAI,GAAM,GAElHM,IAAWC,EAAuD,UAAU,GAC5EC,IAAOD,EAA4B,MAAM,GACzCE,IAAQF,EAAiC,OAAO,GAChDG,IAAQH,EAAiC,OAAO,GAChDI,IAAUJ,EAA+B,SAAS;AAExD,WAAAK,EAAa;AAAA,MACT,UAAAN;AAAA,MACA,MAAAE;AAAA,MACA,OAAAE;AAAA,MACA,OAAAD;AAAA,MACA,SAAAE;AAAA,MACA,OAAO,MAAMD,EAAM,OAAO,MAAA;AAAA,MAC1B,MAAM,MAAMA,EAAM,OAAO,KAAA;AAAA,IAAK,CACjC,mBAeGG,EAsFM,OAAA;AAAA,eArFE;AAAA,MAAJ,KAAIF;AAAA,MACJ,OAAKG,EAAA,CAAC,eACEC,EAAAZ,CAAA,CAAgB,CAAA;AAAA,IAAA;MACxBa,EAQOC,uBARP,MAQO;AAAA,QANOrB,EAAM,cADhBiB,EAMQ,SAAA;AAAA;mBAJA;AAAA,UAAJ,KAAIJ;AAAA,UACH,SAAOZ,EAAA,UAAU;AAAA,UACjB,KAAKkB,EAAAb,CAAA,EAAkB;AAAA,QAAA,GACrBgB,EAAAtB,EAAM,KAAK,GAAA,IAAAuB,CAAA;;MAItBC,EA4BM,OA5BNC,GA4BM;AAAA,QA3BFL,EAaOC,EAAA,QAAA,WAAAK,EAAAC,EAAA,EAAA,mBAXOR,EAAAb,CAAA,GAAiB,WAAEa,EAAAX,CAAA,OAFjC,MAaO;AAAA,UATOoB,EAAAA,OAAO,aADjBX,EAKM,OAAA;AAAA;YAHF,OAAM;AAAA,YACL,SAAKY,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEhB,EAAA,OAAO,MAAA;AAAA,UAAK;YACpBM,EAAoBC,EAAA,QAAA,MAAA;AAAA,UAAA;UAExBU,EAAAP,EAGkD,SAHlDQ,EAGkD;AAAA,qBAF1C;AAAA,YAAJ,KAAIlB;AAAA,0DACKZ,EAAK,QAAA4B;AAAA,UAAA,GACF,EAAA,GAAAX,EAAAb,CAAA,MAAsBa,EAAAX,CAAA,GAAS,GAAA,MAAA,EAAA,GAAA;AAAA,gBADlCN,EAAA,KAAK;AAAA,UAAA;;QAItBsB,EAWM,OAXNS,GAWM;AAAA,UAVFb,EASOC,0BATP,MASO;AAAA,YARHa,EAOaC,GAAA,EAPD,MAAK,sBAAkB;AAAA,yBAC/B,MAK4B;AAAA,gBAJlBnC,EAAM,YAAYC,EAAA,kBAD5BmC,EAK4BjB,EAAAkB,CAAA,GAAA;AAAA,kBAHxB,KAAI;AAAA,2BACA;AAAA,kBAAJ,KAAI3B;AAAA,kBACH,MAAMT,EAAA;AAAA,kBACN,MAAMA,EAAA;AAAA,gBAAA;;;;;;;MAM3BmB,EAgBOC,EAAA,QAAA,UAAAK,EAAAC,EAAA,EAAA,OAdO1B,EAAA,OAAK,QAAEA,EAAA,QAAM,IAAMqC,EAAAA,OAAO,IAAE,MAAQA,EAAAA,OAAO,UAFzD,MAgBO;AAAA,QAZUrC,EAAA,SAASA,EAAA,eADtBmC,EAYoBjB,EAAAoB,CAAA,GAAA;AAAA;UAVf,IAAItC,EAAA;AAAA,UAEJ,MAAMA,EAAA;AAAA,UACN,OAAOA,EAAA;AAAA,UACP,QAAQA,EAAA;AAAA,QAAA;UACT,SAAAuC,EAAA,CAIM,EARI,OAAAC,QAAK;AAAA,YAIfjB,EAIM,OAJNkB,GAIM;AAAA,kBADCD,CAAK,GAAA,CAAA;AAAA,8BAAGjB,EAAI,MAAA,MAAA,MAAA,EAAA;AAAA,YAAA;;;;;MAK3BJ,EAYOC,EAAA,QAAA,YAAAK,EAAAC,EAAA,EAAA,UAVO1B,EAAA,SAAA,CAAQ,CAAA,GAFtB,MAYO;AAAA,QATHiC,EAQsBf,EAAAwB,CAAA,GAAA,EANjB,UAAU1C,EAAA,YAAQ;AAAA,UACnB,SAAAuC,EAAA,CAIM,EANI,UAAAI,QAAQ;AAAA,YAElBpB,EAIM,OAJNqB,GAIMvB,EADCsB,CAAQ,GAAA,CAAA;AAAA,UAAA;;;;MAKvBxB,EASOC,EAAA,QAAA,QAAAK,EAAAC,EAAA,EAAA,UAPO1B,EAAA,SAAA,CAAQ,CAAA,GAFtB,MASO;AAAA,QALOA,EAAA,iBADVgB,EAKQ,SAAA;AAAA;mBAHA;AAAA,UAAJ,KAAIL;AAAA,UACJ,OAAM;AAAA,QAAA,KACHX,EAAA,QAAQ,GAAA,GAAA;;;;;"}
|
package/dist/input-field.umd.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(r,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):(r=typeof globalThis<"u"?globalThis:r||self,e(r.InputField={},r.Vue,r.VueInterfaceActivityIndicator,r.VueInterfaceFormControl))})(this,(function(r,e,
|
|
1
|
+
(function(r,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):(r=typeof globalThis<"u"?globalThis:r||self,e(r.InputField={},r.Vue,r.VueInterfaceActivityIndicator,r.VueInterfaceFormControl))})(this,(function(r,e,k,s){"use strict";const b=["for"],h={class:"form-control-inner"},V={class:"form-control-activity-indicator"},C={invalid:"",class:"invalid-feedback"},B={valid:"",class:"valid-feedback"},S=e.defineComponent({inheritAttrs:!1,__name:"InputField",props:e.mergeModels({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},size:{default:"form-control-md"},color:{},readonly:{type:Boolean},valid:{type:Boolean},value:{}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["blur","focus","focusin","focusout","click","doubleclick","contextmenu","mousedown","mouseup","mouseover","mouseout","mouseenter","mouseleave","mousemove","keydown","keyup","keypress","select","selectionchange","invalid","submit","reset","scroll","wheel","copy","cut","paste","touchstart","touchend","touchmove","touchcancel","change","input","beforeinput"],["update:modelValue"]),setup(t,{expose:T,emit:N}){const a=t,c=e.useModel(t,"modelValue"),g=N,{controlAttributes:d,formGroupClasses:z,listeners:f}=s.useFormControl({model:c,props:a,emit:g}),m=e.useTemplateRef("activity"),y=e.useTemplateRef("help"),p=e.useTemplateRef("label"),i=e.useTemplateRef("field"),u=e.useTemplateRef("wrapper");return T({activity:m,help:y,field:i,label:p,wrapper:u,focus:()=>i.value?.focus(),blur:()=>i.value?.blur()}),(o,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:u,class:e.normalizeClass(["input-field",e.unref(z)])},[e.renderSlot(o.$slots,"label",{},()=>[a.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref_key:"label",ref:p,class:e.normalizeClass(t.labelClass),for:e.unref(d).id},e.toDisplayString(a.label),11,b)):e.createCommentVNode("",!0)]),e.createElementVNode("div",h,[e.renderSlot(o.$slots,"control",e.normalizeProps(e.guardReactiveProps({controlAttributes:e.unref(d),listeners:e.unref(f)})),()=>[o.$slots.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-control-inner-icon",onClick:l[0]||(l[0]=n=>i.value?.focus())},[e.renderSlot(o.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps({ref_key:"field",ref:i,"onUpdate:modelValue":l[1]||(l[1]=n=>c.value=n)},{...e.unref(d),...e.unref(f)}),null,16),[[e.vModelDynamic,c.value]])]),e.createElementVNode("div",V,[e.renderSlot(o.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"input-field-fade"},{default:e.withCtx(()=>[a.activity&&t.indicator?(e.openBlock(),e.createBlock(e.unref(k.ActivityIndicator),{key:"activity",ref_key:"activity",ref:m,type:t.indicator,size:t.indicatorSize},null,8,["type","size"])):e.createCommentVNode("",!0)]),_:1})])])]),e.renderSlot(o.$slots,"errors",e.normalizeProps(e.guardReactiveProps({error:t.error,errors:t.errors,id:o.$attrs.id,name:o.$attrs.name})),()=>[t.error||t.errors?(e.openBlock(),e.createBlock(e.unref(s.FormControlErrors),{key:0,id:t.id,name:t.name,error:t.error,errors:t.errors},{default:e.withCtx(({error:n})=>[e.createElementVNode("div",C,[e.createTextVNode(e.toDisplayString(n),1),l[2]||(l[2]=e.createElementVNode("br",null,null,-1))])]),_:1},8,["id","name","error","errors"])):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,"feedback",e.normalizeProps(e.guardReactiveProps({feedback:t.feedback})),()=>[e.createVNode(e.unref(s.FormControlFeedback),{feedback:t.feedback},{default:e.withCtx(({feedback:n})=>[e.createElementVNode("div",B,e.toDisplayString(n),1)]),_:1},8,["feedback"])]),e.renderSlot(o.$slots,"help",e.normalizeProps(e.guardReactiveProps({helpText:t.helpText})),()=>[t.helpText?(e.openBlock(),e.createElementBlock("small",{key:0,ref_key:"help",ref:y,class:"form-help"},e.toDisplayString(t.helpText),513)):e.createCommentVNode("",!0)])],2))}});r.InputField=S,Object.defineProperty(r,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=\"ModelValue, Value\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { InputHTMLAttributes, useTemplateRef } from 'vue';\n\nconst props = withDefaults(defineProps<InputFieldProps<ModelValue,Value>>(), {\n formControlClass: 'form-control',\n labelClass: 'form-label',\n size: 'form-control-md'\n});\n\ndefineOptions({\n inheritAttrs: false\n});\n\nconst model = defineModel<ModelValue>();\n\ndefineSlots<FormControlSlots<InputFieldControlSizePrefix,ModelValue>>();\n\nconst emit = defineEmits<FormControlEvents>();\n\nconst {\n controlAttributes,\n formGroupClasses,\n listeners\n} = useFormControl<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue|undefined, Value>({ model, props, emit });\n\nconst field = useTemplateRef<HTMLInputElement>('field');\n</script>\n\n<script lang=\"ts\">\nexport type InputFieldControlSizePrefix = 'form-control';\n\nexport type InputFieldProps<ModelValue, Value> = FormControlProps<\n InputHTMLAttributes, \n InputFieldControlSizePrefix, \n ModelValue, \n Value\n>;\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-control-inner\">\n <slot\n name=\"control\"\n v-bind=\"{ controlAttributes, listeners }\">\n <div\n v-if=\"$slots.icon\"\n class=\"form-control-inner-icon\"\n @click=\"field?.focus()\">\n <slot name=\"icon\" />\n </div>\n <input\n ref=\"field\"\n v-model=\"model\"\n v-bind=\"{...controlAttributes, ...listeners}\">\n </slot>\n \n <div class=\"form-control-activity-indicator\">\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 </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 class=\"form-help\">\n {{ helpText }}\n </small>\n </slot>\n </div>\n</template>"],"names":["props","__props","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","listeners","useFormControl","
|
|
1
|
+
{"version":3,"file":"input-field.umd.cjs","sources":["../src/InputField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { InputHTMLAttributes, useTemplateRef } from 'vue';\n\nconst props = withDefaults(defineProps<InputFieldProps<ModelValue,Value>>(), {\n formControlClass: 'form-control',\n labelClass: 'form-label',\n size: 'form-control-md'\n});\n\ndefineOptions({\n inheritAttrs: false\n});\n\nconst model = defineModel<ModelValue>();\n\ndefineSlots<FormControlSlots<InputFieldControlSizePrefix,ModelValue>>();\n\nconst emit = defineEmits<FormControlEvents>();\n\nconst {\n controlAttributes,\n formGroupClasses,\n listeners\n} = useFormControl<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue|undefined, Value>({ model, props, emit });\n\nconst activity = useTemplateRef<InstanceType<typeof ActivityIndicator>>('activity');\nconst help = useTemplateRef<HTMLElement>('help');\nconst label = useTemplateRef<HTMLLabelElement>('label');\nconst field = useTemplateRef<HTMLInputElement>('field');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\ndefineExpose({\n activity,\n help,\n field,\n label,\n wrapper,\n focus: () => field.value?.focus(),\n blur: () => field.value?.blur(),\n})\n</script>\n\n<script lang=\"ts\">\nexport type InputFieldControlSizePrefix = 'form-control';\n\nexport type InputFieldProps<ModelValue, Value> = FormControlProps<\n InputHTMLAttributes, \n InputFieldControlSizePrefix, \n ModelValue, \n Value\n>;\n</script>\n\n<template>\n <div\n ref=\"wrapper\"\n class=\"input-field\"\n :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"props.label\"\n ref=\"label\"\n :class=\"labelClass\"\n :for=\"controlAttributes.id\">\n {{ props.label }}\n </label>\n </slot>\n \n <div class=\"form-control-inner\">\n <slot\n name=\"control\"\n v-bind=\"{ controlAttributes, listeners }\">\n <div\n v-if=\"$slots.icon\"\n class=\"form-control-inner-icon\"\n @click=\"field?.focus()\">\n <slot name=\"icon\" />\n </div>\n <input\n ref=\"field\"\n v-model=\"model\"\n v-bind=\"{...controlAttributes, ...listeners}\">\n </slot>\n \n <div class=\"form-control-activity-indicator\">\n <slot name=\"activity\">\n <Transition name=\"input-field-fade\">\n <ActivityIndicator\n v-if=\"props.activity && indicator\"\n key=\"activity\"\n ref=\"activity\"\n :type=\"indicator\"\n :size=\"indicatorSize\" />\n </Transition>\n </slot>\n </div>\n </div>\n\n <slot\n name=\"errors\"\n v-bind=\"{ error, errors, id: $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 class=\"form-help\">\n {{ helpText }}\n </small>\n </slot>\n </div>\n</template>"],"names":["props","__props","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","listeners","useFormControl","activity","useTemplateRef","help","label","field","wrapper","__expose","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_toDisplayString","_hoisted_1","_createElementVNode","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","_cache","$event","_withDirectives","_mergeProps","_hoisted_3","_createVNode","_Transition","_createBlock","ActivityIndicator","$attrs","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5"],"mappings":"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"}
|
|
@@ -51,20 +51,45 @@ declare const _default: <ModelValue, Value>(__VLS_props: NonNullable<Awaited<typ
|
|
|
51
51
|
helpText?: string;
|
|
52
52
|
id?: string;
|
|
53
53
|
indicator?: import('vue').Component;
|
|
54
|
-
indicatorSize?: import('@vue-interface/activity-indicator').
|
|
54
|
+
indicatorSize?: import('@vue-interface/sizeable').ComponentSize<import('@vue-interface/activity-indicator').ActivityIndicatorSizePrefix>;
|
|
55
55
|
invalid?: boolean;
|
|
56
56
|
label?: string;
|
|
57
57
|
labelClass?: string;
|
|
58
58
|
modelValue?: ModelValue | undefined;
|
|
59
59
|
name?: string;
|
|
60
60
|
plaintext?: boolean;
|
|
61
|
-
size?: import('@vue-interface/form-control').FormControlSize<"form-control"
|
|
61
|
+
size?: import('@vue-interface/form-control').FormControlSize<"form-control"> | undefined;
|
|
62
62
|
color?: string;
|
|
63
63
|
readonly?: boolean;
|
|
64
64
|
valid?: boolean;
|
|
65
65
|
value?: Value | undefined;
|
|
66
|
-
} & InputHTMLAttributes) & Partial<{}>> & import('vue').PublicProps;
|
|
67
|
-
expose(exposed: import('vue').ShallowUnwrapRef<{
|
|
66
|
+
} & Omit<InputHTMLAttributes, "size">) & Partial<{}>> & import('vue').PublicProps;
|
|
67
|
+
expose(exposed: import('vue').ShallowUnwrapRef<{
|
|
68
|
+
activity: Readonly<import('vue').ShallowRef<import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
|
|
69
|
+
size?: import('@vue-interface/sizeable').ComponentSize<import('@vue-interface/activity-indicator').ActivityIndicatorSizePrefix>;
|
|
70
|
+
type: import('vue').Component;
|
|
71
|
+
}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
|
|
72
|
+
size: import('@vue-interface/sizeable').ComponentSize<import('@vue-interface/activity-indicator').ActivityIndicatorSizePrefix>;
|
|
73
|
+
}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
|
|
74
|
+
P: {};
|
|
75
|
+
B: {};
|
|
76
|
+
D: {};
|
|
77
|
+
C: {};
|
|
78
|
+
M: {};
|
|
79
|
+
Defaults: {};
|
|
80
|
+
}, Readonly<{
|
|
81
|
+
size?: import('@vue-interface/sizeable').ComponentSize<import('@vue-interface/activity-indicator').ActivityIndicatorSizePrefix>;
|
|
82
|
+
type: import('vue').Component;
|
|
83
|
+
}> & Readonly<{}>, {}, {}, {}, {}, {
|
|
84
|
+
size: import('@vue-interface/sizeable').ComponentSize<import('@vue-interface/activity-indicator').ActivityIndicatorSizePrefix>;
|
|
85
|
+
}> | null>>;
|
|
86
|
+
help: Readonly<import('vue').ShallowRef<HTMLElement | null>>;
|
|
87
|
+
field: Readonly<import('vue').ShallowRef<HTMLInputElement | null>>;
|
|
88
|
+
label: Readonly<import('vue').ShallowRef<HTMLLabelElement | null>>;
|
|
89
|
+
wrapper: Readonly<import('vue').ShallowRef<HTMLDivElement | null>>;
|
|
90
|
+
focus: () => void | undefined;
|
|
91
|
+
blur: () => void | undefined;
|
|
92
|
+
}>): void;
|
|
68
93
|
attrs: any;
|
|
69
94
|
slots: Readonly<FormControlSlots<"form-control", ModelValue>> & FormControlSlots<"form-control", ModelValue>;
|
|
70
95
|
emit: (((evt: "input", event: Event) => void) & ((evt: "select", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "focusin", event: FocusEvent) => void) & ((evt: "focusout", event: FocusEvent) => void) & ((evt: "click", event: MouseEvent) => void) & ((evt: "doubleclick", event: MouseEvent) => void) & ((evt: "contextmenu", event: MouseEvent) => void) & ((evt: "mousedown", event: MouseEvent) => void) & ((evt: "mouseup", event: MouseEvent) => void) & ((evt: "mouseover", event: MouseEvent) => void) & ((evt: "mouseout", event: MouseEvent) => void) & ((evt: "mouseenter", event: MouseEvent) => void) & ((evt: "mouseleave", event: MouseEvent) => void) & ((evt: "mousemove", event: MouseEvent) => void) & ((evt: "keydown", event: KeyboardEvent) => void) & ((evt: "keyup", event: KeyboardEvent) => void) & ((evt: "keypress", event: KeyboardEvent) => void) & ((evt: "selectionchange", event: Event) => void) & ((evt: "invalid", event: Event) => void) & ((evt: "submit", event: Event) => void) & ((evt: "reset", event: Event) => void) & ((evt: "scroll", event: Event) => void) & ((evt: "wheel", event: WheelEvent) => void) & ((evt: "copy", event: ClipboardEvent) => void) & ((evt: "cut", event: ClipboardEvent) => void) & ((evt: "paste", event: ClipboardEvent) => void) & ((evt: "touchstart", event: TouchEvent) => void) & ((evt: "touchend", event: TouchEvent) => void) & ((evt: "touchmove", event: TouchEvent) => void) & ((evt: "touchcancel", event: TouchEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "beforeinput", event: Event) => void)) & ((evt: "update:modelValue", value: ModelValue) => void);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue-interface/input-field",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.18",
|
|
4
4
|
"description": "A Vue input field component.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/input-field.umd.cjs",
|
|
@@ -45,8 +45,8 @@
|
|
|
45
45
|
],
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"vue": "^3.3.4",
|
|
48
|
-
"@vue-interface/activity-indicator": "3.0.
|
|
49
|
-
"@vue-interface/form-control": "2.0.
|
|
48
|
+
"@vue-interface/activity-indicator": "3.0.7",
|
|
49
|
+
"@vue-interface/form-control": "2.0.17"
|
|
50
50
|
},
|
|
51
51
|
"scripts": {
|
|
52
52
|
"dev": "vite",
|
package/src/InputField.vue
CHANGED
|
@@ -26,7 +26,21 @@ const {
|
|
|
26
26
|
listeners
|
|
27
27
|
} = useFormControl<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue|undefined, Value>({ model, props, emit });
|
|
28
28
|
|
|
29
|
+
const activity = useTemplateRef<InstanceType<typeof ActivityIndicator>>('activity');
|
|
30
|
+
const help = useTemplateRef<HTMLElement>('help');
|
|
31
|
+
const label = useTemplateRef<HTMLLabelElement>('label');
|
|
29
32
|
const field = useTemplateRef<HTMLInputElement>('field');
|
|
33
|
+
const wrapper = useTemplateRef<HTMLDivElement>('wrapper');
|
|
34
|
+
|
|
35
|
+
defineExpose({
|
|
36
|
+
activity,
|
|
37
|
+
help,
|
|
38
|
+
field,
|
|
39
|
+
label,
|
|
40
|
+
wrapper,
|
|
41
|
+
focus: () => field.value?.focus(),
|
|
42
|
+
blur: () => field.value?.blur(),
|
|
43
|
+
})
|
|
30
44
|
</script>
|
|
31
45
|
|
|
32
46
|
<script lang="ts">
|
|
@@ -42,15 +56,16 @@ export type InputFieldProps<ModelValue, Value> = FormControlProps<
|
|
|
42
56
|
|
|
43
57
|
<template>
|
|
44
58
|
<div
|
|
59
|
+
ref="wrapper"
|
|
45
60
|
class="input-field"
|
|
46
61
|
:class="formGroupClasses">
|
|
47
62
|
<slot name="label">
|
|
48
63
|
<label
|
|
49
|
-
v-if="label"
|
|
64
|
+
v-if="props.label"
|
|
50
65
|
ref="label"
|
|
51
66
|
:class="labelClass"
|
|
52
67
|
:for="controlAttributes.id">
|
|
53
|
-
{{ label }}
|
|
68
|
+
{{ props.label }}
|
|
54
69
|
</label>
|
|
55
70
|
</slot>
|
|
56
71
|
|
|
@@ -74,7 +89,7 @@ export type InputFieldProps<ModelValue, Value> = FormControlProps<
|
|
|
74
89
|
<slot name="activity">
|
|
75
90
|
<Transition name="input-field-fade">
|
|
76
91
|
<ActivityIndicator
|
|
77
|
-
v-if="activity && indicator"
|
|
92
|
+
v-if="props.activity && indicator"
|
|
78
93
|
key="activity"
|
|
79
94
|
ref="activity"
|
|
80
95
|
:type="indicator"
|