@vue-interface/input-field 2.0.2 → 2.0.5
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 +11 -11
- package/dist/input-field.js.map +1 -1
- package/dist/input-field.umd.cjs +1 -1
- package/dist/input-field.umd.cjs.map +1 -1
- package/package.json +4 -3
- package/src/InputField.vue +129 -0
package/dist/input-field.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as g, mergeModels as h, useModel as F, useTemplateRef as w, createElementBlock as d, openBlock as a, normalizeClass as C, unref as t, renderSlot as l, createElementVNode as n, createCommentVNode as s, toDisplayString as c, normalizeProps as u, guardReactiveProps as m, withDirectives as A, mergeProps as M, vModelDynamic as N, createVNode as $, Transition as S, withCtx as y, createBlock as V, createTextVNode as D } from "vue";
|
|
2
2
|
import { ActivityIndicator as E } from "@vue-interface/activity-indicator";
|
|
3
|
-
import { useFormControl as I, FormControlErrors as P, FormControlFeedback as
|
|
4
|
-
const
|
|
3
|
+
import { useFormControl as I, FormControlErrors as P, FormControlFeedback as R } from "@vue-interface/form-control";
|
|
4
|
+
const x = ["for"], G = { class: "form-control-inner" }, U = { class: "form-control-activity-indicator" }, j = {
|
|
5
5
|
invalid: "",
|
|
6
6
|
class: "invalid-feedback"
|
|
7
7
|
}, q = {
|
|
8
8
|
valid: "",
|
|
9
9
|
class: "valid-feedback"
|
|
10
|
-
}, L = /* @__PURE__ */
|
|
10
|
+
}, L = /* @__PURE__ */ g({
|
|
11
11
|
inheritAttrs: !1,
|
|
12
12
|
__name: "InputField",
|
|
13
13
|
props: /* @__PURE__ */ h({
|
|
@@ -38,13 +38,13 @@ const G = ["for"], R = { class: "form-control-inner" }, U = { class: "form-contr
|
|
|
38
38
|
}),
|
|
39
39
|
emits: /* @__PURE__ */ h(["update:modelValue", "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
40
|
setup(e, { emit: B }) {
|
|
41
|
-
const
|
|
41
|
+
const T = e, f = F(e, "modelValue"), p = B, {
|
|
42
42
|
controlAttributes: v,
|
|
43
|
-
formGroupClasses:
|
|
43
|
+
formGroupClasses: z,
|
|
44
44
|
listeners: b
|
|
45
|
-
} = I({ model: f, props:
|
|
45
|
+
} = I({ model: f, props: T, emit: p }), k = w("field");
|
|
46
46
|
return (o, r) => (a(), d("div", {
|
|
47
|
-
class: C(["input-field", t(
|
|
47
|
+
class: C(["input-field", t(z)])
|
|
48
48
|
}, [
|
|
49
49
|
l(o.$slots, "label", {}, () => [
|
|
50
50
|
e.label ? (a(), d("label", {
|
|
@@ -52,9 +52,9 @@ const G = ["for"], R = { class: "form-control-inner" }, U = { class: "form-contr
|
|
|
52
52
|
ref: "label",
|
|
53
53
|
class: C(e.labelClass),
|
|
54
54
|
for: t(v).id
|
|
55
|
-
}, c(e.label), 11,
|
|
55
|
+
}, c(e.label), 11, x)) : s("", !0)
|
|
56
56
|
]),
|
|
57
|
-
n("div",
|
|
57
|
+
n("div", G, [
|
|
58
58
|
l(o.$slots, "control", u(m({ controlAttributes: t(v), listeners: t(b) })), () => [
|
|
59
59
|
o.$slots.icon ? (a(), d("div", {
|
|
60
60
|
key: 0,
|
|
@@ -105,7 +105,7 @@ const G = ["for"], R = { class: "form-control-inner" }, U = { class: "form-contr
|
|
|
105
105
|
}, 8, ["id", "name", "error", "errors"])) : s("", !0)
|
|
106
106
|
]),
|
|
107
107
|
l(o.$slots, "feedback", u(m({ feedback: e.feedback })), () => [
|
|
108
|
-
$(t(
|
|
108
|
+
$(t(R), { feedback: e.feedback }, {
|
|
109
109
|
default: y(({ feedback: i }) => [
|
|
110
110
|
n("div", q, c(i), 1)
|
|
111
111
|
]),
|
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,
|
|
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});\n\ndefineOptions({\n inheritAttrs: false\n});\n\nconst model = defineModel<ModelValue>();\n\ndefineSlots<FormControlSlots<InputFieldControlSizePrefix,ModelValue>>();\n\nconst emit = defineEmits<FormControlEvents<ModelValue>>();\n\nconst {\n controlAttributes,\n formGroupClasses,\n listeners\n} = useFormControl<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue, 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","field","useTemplateRef","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_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","_toDisplayString"],"mappings":"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"}
|
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,m,i){"use strict";const f=["for"],y={class:"form-control-inner"},k={class:"form-control-activity-indicator"},u={invalid:"",class:"invalid-feedback"},b={valid:"",class:"valid-feedback"},p=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:{},color:{},readonly:{type:Boolean},valid:{type:Boolean},value:{}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["update:modelValue","blur","focus","focusin","focusout","click","doubleclick","contextmenu","mousedown","mouseup","mouseover","mouseout","mouseenter","mouseleave","mousemove","keydown","keyup","keypress","select","selectionchange","invalid","submit","reset","scroll","wheel","copy","cut","paste","touchstart","touchend","touchmove","touchcancel","change","input","beforeinput"],["update:modelValue"]),setup(t,{emit:h}){const V=t,a=e.useModel(t,"modelValue"),C=h,{controlAttributes:d,formGroupClasses:B,listeners:s}=i.useFormControl({model:a,props:V,emit:C}),c=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,m,i){"use strict";const f=["for"],y={class:"form-control-inner"},k={class:"form-control-activity-indicator"},u={invalid:"",class:"invalid-feedback"},b={valid:"",class:"valid-feedback"},p=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:{},color:{},readonly:{type:Boolean},valid:{type:Boolean},value:{}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["update:modelValue","blur","focus","focusin","focusout","click","doubleclick","contextmenu","mousedown","mouseup","mouseover","mouseout","mouseenter","mouseleave","mousemove","keydown","keyup","keypress","select","selectionchange","invalid","submit","reset","scroll","wheel","copy","cut","paste","touchstart","touchend","touchmove","touchcancel","change","input","beforeinput"],["update:modelValue"]),setup(t,{emit:h}){const V=t,a=e.useModel(t,"modelValue"),C=h,{controlAttributes:d,formGroupClasses:B,listeners:s}=i.useFormControl({model:a,props:V,emit:C}),c=e.useTemplateRef("field");return(o,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-field",e.unref(B)])},[e.renderSlot(o.$slots,"label",{},()=>[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",class:e.normalizeClass(t.labelClass),for:e.unref(d).id},e.toDisplayString(t.label),11,f)):e.createCommentVNode("",!0)]),e.createElementVNode("div",y,[e.renderSlot(o.$slots,"control",e.normalizeProps(e.guardReactiveProps({controlAttributes:e.unref(d),listeners:e.unref(s)})),()=>[o.$slots.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-control-inner-icon",onClick:l[0]||(l[0]=n=>c.value?.focus())},[e.renderSlot(o.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps({ref_key:"field",ref:c,"onUpdate:modelValue":l[1]||(l[1]=n=>a.value=n)},{...e.unref(d),...e.unref(s)}),null,16),[[e.vModelDynamic,a.value]])]),e.createElementVNode("div",k,[e.renderSlot(o.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"input-field-fade"},{default:e.withCtx(()=>[t.activity&&t.indicator?(e.openBlock(),e.createBlock(e.unref(m.ActivityIndicator),{key:"activity",ref:"activity",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(i.FormControlErrors),{key:0,id:t.id,name:t.name,error:t.error,errors:t.errors},{default:e.withCtx(({error:n})=>[e.createElementVNode("div",u,[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(i.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:"help",class:"form-help"},e.toDisplayString(t.helpText),513)):e.createCommentVNode("",!0)])],2))}});r.InputField=p,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,
|
|
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});\n\ndefineOptions({\n inheritAttrs: false\n});\n\nconst model = defineModel<ModelValue>();\n\ndefineSlots<FormControlSlots<InputFieldControlSizePrefix,ModelValue>>();\n\nconst emit = defineEmits<FormControlEvents<ModelValue>>();\n\nconst {\n controlAttributes,\n formGroupClasses,\n listeners\n} = useFormControl<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue, 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","field","useTemplateRef","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_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","_toDisplayString"],"mappings":"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"}
|
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.5",
|
|
4
4
|
"description": "A Vue input field component.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/input-field.umd.cjs",
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
"homepage": "https://vue-interface.github.io/packages/input-field",
|
|
36
36
|
"readme": "README.md",
|
|
37
37
|
"files": [
|
|
38
|
+
"src",
|
|
38
39
|
"dist",
|
|
39
40
|
"index.css",
|
|
40
41
|
"README.md",
|
|
@@ -42,8 +43,8 @@
|
|
|
42
43
|
],
|
|
43
44
|
"peerDependencies": {
|
|
44
45
|
"vue": "^3.3.4",
|
|
45
|
-
"@vue-interface/activity-indicator": "3.0.
|
|
46
|
-
"@vue-interface/form-control": "2.0.
|
|
46
|
+
"@vue-interface/activity-indicator": "3.0.3",
|
|
47
|
+
"@vue-interface/form-control": "2.0.4"
|
|
47
48
|
},
|
|
48
49
|
"scripts": {
|
|
49
50
|
"dev": "vite",
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<script setup lang="ts" generic="ModelValue, Value">
|
|
2
|
+
import { ActivityIndicator } from '@vue-interface/activity-indicator';
|
|
3
|
+
import type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';
|
|
4
|
+
import { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';
|
|
5
|
+
import { InputHTMLAttributes, useTemplateRef } from 'vue';
|
|
6
|
+
|
|
7
|
+
const props = withDefaults(defineProps<InputFieldProps<ModelValue,Value>>(), {
|
|
8
|
+
formControlClass: 'form-control',
|
|
9
|
+
labelClass: 'form-label'
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
defineOptions({
|
|
13
|
+
inheritAttrs: false
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
const model = defineModel<ModelValue>();
|
|
17
|
+
|
|
18
|
+
defineSlots<FormControlSlots<InputFieldControlSizePrefix,ModelValue>>();
|
|
19
|
+
|
|
20
|
+
const emit = defineEmits<FormControlEvents<ModelValue>>();
|
|
21
|
+
|
|
22
|
+
const {
|
|
23
|
+
controlAttributes,
|
|
24
|
+
formGroupClasses,
|
|
25
|
+
listeners
|
|
26
|
+
} = useFormControl<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue, Value>({ model, props, emit });
|
|
27
|
+
|
|
28
|
+
const field = useTemplateRef<HTMLInputElement>('field');
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<script lang="ts">
|
|
32
|
+
export type InputFieldControlSizePrefix = 'form-control';
|
|
33
|
+
|
|
34
|
+
export type InputFieldProps<ModelValue, Value> = FormControlProps<
|
|
35
|
+
InputHTMLAttributes,
|
|
36
|
+
InputFieldControlSizePrefix,
|
|
37
|
+
ModelValue,
|
|
38
|
+
Value
|
|
39
|
+
>;
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<template>
|
|
43
|
+
<div
|
|
44
|
+
class="input-field"
|
|
45
|
+
:class="formGroupClasses">
|
|
46
|
+
<slot name="label">
|
|
47
|
+
<label
|
|
48
|
+
v-if="label"
|
|
49
|
+
ref="label"
|
|
50
|
+
:class="labelClass"
|
|
51
|
+
:for="controlAttributes.id">
|
|
52
|
+
{{ label }}
|
|
53
|
+
</label>
|
|
54
|
+
</slot>
|
|
55
|
+
|
|
56
|
+
<div class="form-control-inner">
|
|
57
|
+
<slot
|
|
58
|
+
name="control"
|
|
59
|
+
v-bind="{ controlAttributes, listeners }">
|
|
60
|
+
<div
|
|
61
|
+
v-if="$slots.icon"
|
|
62
|
+
class="form-control-inner-icon"
|
|
63
|
+
@click="field?.focus()">
|
|
64
|
+
<slot name="icon" />
|
|
65
|
+
</div>
|
|
66
|
+
<input
|
|
67
|
+
ref="field"
|
|
68
|
+
v-model="model"
|
|
69
|
+
v-bind="{...controlAttributes, ...listeners}">
|
|
70
|
+
</slot>
|
|
71
|
+
|
|
72
|
+
<div class="form-control-activity-indicator">
|
|
73
|
+
<slot name="activity">
|
|
74
|
+
<Transition name="input-field-fade">
|
|
75
|
+
<ActivityIndicator
|
|
76
|
+
v-if="activity && indicator"
|
|
77
|
+
key="activity"
|
|
78
|
+
ref="activity"
|
|
79
|
+
:type="indicator"
|
|
80
|
+
:size="indicatorSize" />
|
|
81
|
+
</Transition>
|
|
82
|
+
</slot>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<slot
|
|
87
|
+
name="errors"
|
|
88
|
+
v-bind="{ error, errors, id: $attrs.id, name: $attrs.name }">
|
|
89
|
+
<FormControlErrors
|
|
90
|
+
v-if="!!(error || errors)"
|
|
91
|
+
:id="id"
|
|
92
|
+
v-slot="{ error }"
|
|
93
|
+
:name="name"
|
|
94
|
+
:error="error"
|
|
95
|
+
:errors="errors">
|
|
96
|
+
<div
|
|
97
|
+
invalid
|
|
98
|
+
class="invalid-feedback">
|
|
99
|
+
{{ error }}<br>
|
|
100
|
+
</div>
|
|
101
|
+
</FormControlErrors>
|
|
102
|
+
</slot>
|
|
103
|
+
|
|
104
|
+
<slot
|
|
105
|
+
name="feedback"
|
|
106
|
+
v-bind="{ feedback }">
|
|
107
|
+
<FormControlFeedback
|
|
108
|
+
v-slot="{ feedback }"
|
|
109
|
+
:feedback="feedback">
|
|
110
|
+
<div
|
|
111
|
+
valid
|
|
112
|
+
class="valid-feedback">
|
|
113
|
+
{{ feedback }}
|
|
114
|
+
</div>
|
|
115
|
+
</FormControlFeedback>
|
|
116
|
+
</slot>
|
|
117
|
+
|
|
118
|
+
<slot
|
|
119
|
+
name="help"
|
|
120
|
+
v-bind="{ helpText }">
|
|
121
|
+
<small
|
|
122
|
+
v-if="helpText"
|
|
123
|
+
ref="help"
|
|
124
|
+
class="form-help">
|
|
125
|
+
{{ helpText }}
|
|
126
|
+
</small>
|
|
127
|
+
</slot>
|
|
128
|
+
</div>
|
|
129
|
+
</template>
|