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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,104 +1,127 @@
1
- import { ActivityIndicator as g } from "@vue-interface/activity-indicator";
2
- import { FormControl as z } from "@vue-interface/form-control";
3
- import { defineComponent as A, resolveComponent as m, resolveDirective as E, openBlock as n, createElementBlock as l, normalizeClass as b, renderSlot as r, toDisplayString as a, createCommentVNode as s, createElementVNode as i, normalizeProps as p, guardReactiveProps as f, withDirectives as I, mergeProps as V, vModelDynamic as D, createVNode as k, Transition as N, withCtx as c, createBlock as y, createTextVNode as T } from "vue";
4
- const B = A({
5
- name: "InputField",
6
- components: {
7
- ActivityIndicator: g
8
- },
9
- extends: z
10
- });
11
- const P = (e, t) => {
12
- const d = e.__vccOpts || e;
13
- for (const [u, v] of t)
14
- d[u] = v;
15
- return d;
16
- }, S = ["for"], w = { class: "form-group-inner" }, G = {
1
+ import { defineComponent as V, ref as z, resolveComponent as A, openBlock as i, createElementBlock as a, normalizeClass as C, unref as o, renderSlot as t, toDisplayString as d, createCommentVNode as n, createElementVNode as s, normalizeProps as u, guardReactiveProps as p, useSlots as I, withDirectives as N, mergeProps as D, isRef as E, vModelDynamic as P, createVNode as B, Transition as w, withCtx as b, createBlock as $, createTextVNode as R } from "vue";
2
+ import { useFormControl as G, FormControlErrors as M, FormControlFeedback as U } from "@vue-interface/form-control";
3
+ const j = ["for"], q = { class: "form-group-inner" }, H = {
17
4
  invalid: "",
18
5
  class: "invalid-feedback"
19
- }, M = /* @__PURE__ */ i("br", null, null, -1), O = {
6
+ }, J = /* @__PURE__ */ s("br", null, null, -1), K = {
20
7
  valid: "",
21
8
  class: "valid-feedback"
22
- };
23
- function R(e, t, d, u, v, U) {
24
- const $ = m("ActivityIndicator"), C = m("FormControlErrors"), F = m("FormControlFeedback"), h = E("bind-events");
25
- return n(), l("div", {
26
- class: b(e.formGroupClasses)
27
- }, [
28
- r(e.$slots, "label", {}, () => [
29
- e.label ? (n(), l("label", {
30
- key: 0,
31
- ref: "label",
32
- class: b(e.labelClass),
33
- for: e.id
34
- }, a(e.label), 11, S)) : s("", !0)
35
- ]),
36
- i("div", w, [
37
- r(e.$slots, "control", p(f({ bindEvents: e.bindEvents, controlAttributes: e.controlAttributes })), () => [
38
- e.$slots.icon ? (n(), l("div", {
39
- key: 0,
40
- class: "form-group-inner-icon",
41
- onClick: t[0] || (t[0] = (...o) => e.focus && e.focus(...o))
42
- }, [
43
- r(e.$slots, "icon")
44
- ])) : s("", !0),
45
- I(i("input", V({
46
- ref: "field",
47
- "onUpdate:modelValue": t[1] || (t[1] = (o) => e.model = o)
48
- }, e.controlAttributes), null, 16), [
49
- [D, e.model],
50
- [h]
51
- ])
52
- ]),
53
- r(e.$slots, "activity", {}, () => [
54
- k(N, { name: "input-field-fade" }, {
55
- default: c(() => [
56
- e.activity ? (n(), y($, {
57
- key: "activity",
58
- ref: "activity",
59
- type: e.indicator,
60
- size: e.indicatorSize || e.size
61
- }, null, 8, ["type", "size"])) : s("", !0)
9
+ }, Q = /* @__PURE__ */ V({
10
+ inheritAttrs: !1,
11
+ __name: "InputField",
12
+ props: {
13
+ activity: { type: Boolean },
14
+ disabled: { type: Boolean },
15
+ error: {},
16
+ errors: {},
17
+ feedback: {},
18
+ formControlClass: { default: "form-control" },
19
+ helpText: {},
20
+ id: {},
21
+ indicator: {},
22
+ indicatorSize: {},
23
+ invalid: { type: Boolean },
24
+ label: {},
25
+ labelClass: { default: "form-label" },
26
+ modelValue: {},
27
+ name: {},
28
+ plaintext: { type: Boolean },
29
+ readonly: { type: Boolean },
30
+ valid: { type: Boolean },
31
+ value: {},
32
+ checked: { type: Boolean }
33
+ },
34
+ emits: ["update:modelValue"],
35
+ setup(F, { emit: g }) {
36
+ const h = F, { controlAttributes: f, formGroupClasses: S, model: m, onClick: v, onBlur: y, onFocus: c } = G(h, g), k = z();
37
+ return (e, l) => {
38
+ const T = A("ActivityIndicator");
39
+ return i(), a("div", {
40
+ class: C(["input-field", o(S)])
41
+ }, [
42
+ t(e.$slots, "label", {}, () => [
43
+ e.label ? (i(), a("label", {
44
+ key: 0,
45
+ ref: "label",
46
+ class: C(e.labelClass),
47
+ for: o(f).id
48
+ }, d(e.label), 11, j)) : n("", !0)
49
+ ]),
50
+ s("div", q, [
51
+ t(e.$slots, "control", u(p({ onClick: o(v), onBlur: o(y), onFocus: o(c), controlAttributes: o(f) })), () => [
52
+ I().icon ? (i(), a("div", {
53
+ key: 0,
54
+ class: "form-group-inner-icon",
55
+ onClick: l[0] || (l[0] = //@ts-ignore
56
+ (...r) => k.value.focus && k.value.focus(...r))
57
+ }, [
58
+ t(e.$slots, "icon")
59
+ ])) : n("", !0),
60
+ N(s("input", D({
61
+ ref_key: "field",
62
+ ref: k,
63
+ "onUpdate:modelValue": l[1] || (l[1] = (r) => E(m) ? m.value = r : null)
64
+ }, o(f), {
65
+ onClick: l[2] || (l[2] = //@ts-ignore
66
+ (...r) => o(v) && o(v)(...r)),
67
+ onBlur: l[3] || (l[3] = //@ts-ignore
68
+ (...r) => o(y) && o(y)(...r)),
69
+ onFocus: l[4] || (l[4] = //@ts-ignore
70
+ (...r) => o(c) && o(c)(...r))
71
+ }), null, 16), [
72
+ [P, o(m)]
73
+ ])
62
74
  ]),
63
- _: 1
64
- })
65
- ])
66
- ]),
67
- r(e.$slots, "errors", p(f({ error: e.error, errors: e.errors, id: e.$attrs.id, name: e.$attrs.name })), () => [
68
- e.error || e.errors ? (n(), y(C, {
69
- key: 0,
70
- id: e.$attrs.id,
71
- name: e.$attrs.name,
72
- error: e.error,
73
- errors: e.errors
74
- }, {
75
- default: c(({ error: o }) => [
76
- i("div", G, [
77
- T(a(o), 1),
78
- M
75
+ t(e.$slots, "activity", {}, () => [
76
+ B(w, { name: "input-field-fade" }, {
77
+ default: b(() => [
78
+ e.activity && e.indicator ? (i(), $(T, {
79
+ key: "activity",
80
+ ref: "activity",
81
+ type: e.indicator,
82
+ size: e.indicatorSize
83
+ }, null, 8, ["type", "size"])) : n("", !0)
84
+ ]),
85
+ _: 1
86
+ })
79
87
  ])
80
88
  ]),
81
- _: 1
82
- }, 8, ["id", "name", "error", "errors"])) : s("", !0)
83
- ]),
84
- r(e.$slots, "feedback", p(f({ feedback: e.feedback })), () => [
85
- k(F, { feedback: e.feedback }, {
86
- default: c(({ feedback: o }) => [
87
- i("div", O, a(o), 1)
89
+ t(e.$slots, "errors", u(p({ error: e.error, errors: e.errors, id: e.$attrs.id, name: e.$attrs.name })), () => [
90
+ e.error || e.errors ? (i(), $(o(M), {
91
+ key: 0,
92
+ id: e.$attrs.id && String(e.$attrs.id),
93
+ name: e.$attrs.name && String(e.$attrs.name),
94
+ error: e.error,
95
+ errors: e.errors
96
+ }, {
97
+ default: b(({ error: r }) => [
98
+ s("div", H, [
99
+ R(d(r), 1),
100
+ J
101
+ ])
102
+ ]),
103
+ _: 1
104
+ }, 8, ["id", "name", "error", "errors"])) : n("", !0)
105
+ ]),
106
+ t(e.$slots, "feedback", u(p({ feedback: e.feedback })), () => [
107
+ B(o(U), { feedback: e.feedback }, {
108
+ default: b(({ feedback: r }) => [
109
+ s("div", K, d(r), 1)
110
+ ]),
111
+ _: 1
112
+ }, 8, ["feedback"])
88
113
  ]),
89
- _: 1
90
- }, 8, ["feedback"])
91
- ]),
92
- r(e.$slots, "help", {}, () => [
93
- e.helpText ? (n(), l("small", {
94
- key: 0,
95
- ref: "help"
96
- }, a(e.helpText), 513)) : s("", !0)
97
- ])
98
- ], 2);
99
- }
100
- const J = /* @__PURE__ */ P(B, [["render", R]]);
114
+ t(e.$slots, "help", u(p({ helpText: e.helpText })), () => [
115
+ e.helpText ? (i(), a("small", {
116
+ key: 0,
117
+ ref: "help"
118
+ }, d(e.helpText), 513)) : n("", !0)
119
+ ])
120
+ ], 2);
121
+ };
122
+ }
123
+ });
101
124
  export {
102
- J as InputField
125
+ Q as InputField
103
126
  };
104
127
  //# sourceMappingURL=input-field.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"input-field.js","sources":["../src/InputField.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 name: 'InputField',\n components: {\n ActivityIndicator\n },\n extends: FormControl\n});\n</script>\n\n<template>\n <div :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"label\"\n ref=\"label\"\n :class=\"labelClass\"\n :for=\"id\">\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 <input\n ref=\"field\"\n v-model=\"model\"\n v-bind-events\n v-bind=\"controlAttributes\">\n </slot>\n\n <slot name=\"activity\">\n <Transition name=\"input-field-fade\">\n <ActivityIndicator\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.input-field,\n.input-field .form-group-inner {\n position: relative;\n transition: all .25s ease-in-out;\n}\n\n.input-field .activity-indicator {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translate(-1rem, -50%);\n transition: all .15s ease-in;\n}\n\n.input-field .activity-indicator-xs {\n font-size: .5em;\n}\n\n.input-field.has-activity .form-control-xs {\n padding-right: 3.75em;\n}\n\n.input-field .activity-indicator-sm {\n font-size: .5em;\n}\n\n.input-field.has-activity .form-control-sm {\n padding-right: 3em;\n}\n\n.input-field .activity-indicator-md {\n font-size: .666em;\n}\n\n.input-field.has-activity .form-control-md {\n padding-right: 3em;\n}\n\n.input-field .activity-indicator-lg {\n font-size: .75em;\n}\n\n.input-field.has-activity .form-control-lg {\n padding-right: 3em;\n}\n\n.input-field .activity-indicator-xl {\n font-size: 1em;\n}\n\n.input-field.has-activity .activity-indicator-xl ~ .form-control-xl {\n padding-right: 3.75em;\n}\n\n.input-field .activity-indicator {\n opacity: 1;\n}\n\n.input-field .input-field-fade-enter,\n.input-field .input-field-fade-leave-to {\n opacity: 0;\n}\n\n.input-field.is-valid .valid-feedback,\n.input-field.is-invalid .invalid-feedback {\n display: flex;\n}\n\n.input-field .form-control-icon {\n padding-left: 2em;\n}\n\n.input-field .form-group-inner-icon {\n position: absolute;\n top: 50%;\n left: .5em;\n width: 1em;\n font-size: 1.25em;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.input-field-sm .form-group-inner-icon {\n font-size: 1em;\n}\n\n.input-field-lg .form-group-inner-icon {\n left: .4em;\n font-size: 1.75em;\n}\n</style>\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_ActivityIndicator","_component_FormControlErrors","_createTextVNode","error","_component_FormControlFeedback","feedback"],"mappings":";;;AAKA,MAAAA,IAAeC,EAAgB;AAAA,EAC3B,MAAM;AAAA,EACN,YAAY;AAAA,IACR,mBAAAC;AAAA,EACJ;AAAA,EACA,SAASC;AACb,CAAC;;;;;;gBAuDmBC,IAAO,EAAA,OAAA,sBACPC,IAAM;AAAA,EAAA,SAAA;AAAA;GAaNC,IAAKC,gBAAAA,EAAA,MAAA,MAAA,MAAA,EAAA,GACLC,IAAM;AAAA,EAAA,OAAA;AAAA;;;kGAlEtBC,EA+EM,aAAA;;IA9EF,OAQOC,EAAAC,EAAA,gBAAA;AAAA,EAAA,GAAA;AAAA,gBAPH,SAMQ,CAAA,GAAA,MAAA;AAAA,MAAAA,EAAA,SAAAC,KAJOC,EAAA,SAAA;AAAA,QACV,KAAK;AAAA,QACL,KAAK;AAAA,QAAA,OAAAH,EACHC,EAAK,UAAA;AAAA,QAAA,KAAAA,EAAA;AAAA,MAIhB,GAAAG,EAAAH,EAAA,KAAA,GAAA,IAAAI,CAAA,KAAAC,EA2BM,IA3BN,EAAA;AAAA,IAAA,CAAA;AAAA,MAKyB,OAAIZ,GAAA;AAAA,MAAAa,EAAAN,EAAA,QADrB,WAKMO,EAAAC,EAAA,EAAA,YAAAR,EAAA,YAAA,mBAAAA,EAAA,kBAAA,CAAA,CAAA,GAAA,MAAA;AAAA,QAAAA,EAAA,OAAA,QAAAC,EAAA,GAH2BC,EAAA,OAAA;AAAA,UAC5B,KAAA;AAAA,UAAA,OAAA;AAAA,UACD,SAAoBO,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAV,EAAA,SAAAA,EAAA,MAAA,GAAAU,CAAA;AAAA,QAAA,GAAA;AAAA;cAGpBL,EAAW,IAAA,EAAA;AAAA,QAAAM,EAAAf,EAAA,SAAAgB,EAAA;AAAA,UAGH,KAAA;AAAA,UAAA,uBAFCH,EAAK,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAI,MAAAb,EAAA,QAAAa;AAAA,QAAA,GAAAb,EAAA,iBAAA,GAAA,MAAA,EAAA,GAAA;AAAA;;QAKtB,CAAA;AAAA,MAAA,CAAA;AAAA,MAO4CM,EAAAN,EAAA,QAAA,YAAA,CAAA,GAAA,MAAA;AAAA,QAAAc,EAJ1BC,GAAQ,EAAA,MAAA,mBAAA,GAAA;AAAA,UADlB,SAAAC,EAAA,MAAA;AAAA,YAAAhB,EAEI,iBACciB,EAAAC,GAAA;AAAA,cACb,KAAI;AAAA,cACJ,KAAI;AAAA,cAAA,MAAAlB,EAAA;AAAA;;;;;MAKrB,CAAA;AAAA,IAAA,CAAA;AAAA,gBAGI,UAYoBO,EAAAC,EAAA,EAAA,OAAAR,EAAA,OAAA,QAAAA,EAAA,QAAA,IAAAA,EAAA,OAAA,IAAA,MAAAA,EAAA,OAAA,MAAA,CAAA,GAAA,MAAA;AAAA,MAAAA,EAAA,SAAAA,EAAA,UAAAC,EAAA,GAVFgB,EAAAE,GAAA;AAAA,QAEb,KAAI;AAAA,QACJ,IAAOnB,EAAA,OAAA;AAAA,QACP,MAAMA,EAAE,OAAA;AAAA,QAAA,OAAAA,EAAA;AAAA;;;UAIUJ,EAAA,OAAAF,GAAA;AAAA,YAAA0B,EAAAjB,EAAAkB,CAAA,GAAA,CAAA;AAAA;;;;kDAK3BhB,EAYO,IAAA,EAAA;AAAA,IAAA,CAAA;AAAA,gBARW,YAAQE,EAAAC,EAAA,EAAA,UAAAR,EAAA,SAAA,CAAA,CAAA,GAAA,MAAA;AAAA,MAElBc,EAAAQ,GAIM,cADC,SAAQ,GAAA;AAAA,QAAA,SAAAN,EAAA,CAAA,EAAA,UAAAO,QAAA;AAAA;;;SAWhB,GAAA,CAAA,UAAA,CAAA;AAAA,IAAA,CAAA;AAAA,gBALH,QAIQ,CAAA,GAAA,MAAA;AAAA,MAAAvB,EAAA,YAAAC,KAFMC,EAAA,SAAA;AAAA,QAAA,KAAA;AAAA;;;;;;"}
1
+ {"version":3,"file":"input-field.js","sources":["../src/InputField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T, V\">\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 </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":["controlAttributes","formGroupClasses","model","onClick","onBlur","onFocus","useFormControl","props","emit","field","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkBM,EAAE,mBAAAA,GAAmB,kBAAAC,GAAkB,OAAAC,GAAO,SAAAC,GAAS,QAAAC,GAAQ,SAAAC,MAAYC,EAAeC,GAAOC,CAAI,GAErGC,IAAQC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,2 +1,2 @@
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.InputField={},r.VueInterfaceActivityIndicator,r.VueInterfaceFormControl,r.Vue))})(this,function(r,i,d,e){"use strict";const c=e.defineComponent({name:"InputField",components:{ActivityIndicator:i.ActivityIndicator},extends:d.FormControl}),F="",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"},y={invalid:"",class:"invalid-feedback"},k=e.createElementVNode("br",null,null,-1),b={valid:"",class:"valid-feedback"};function C(o,n,l,s,a,N){const $=e.resolveComponent("ActivityIndicator"),S=e.resolveComponent("FormControlErrors"),h=e.resolveComponent("FormControlFeedback"),E=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",class:e.normalizeClass(o.labelClass),for:o.id},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.createElementVNode("input",e.mergeProps({ref:"field","onUpdate:modelValue":n[1]||(n[1]=t=>o.model=t)},o.controlAttributes),null,16),[[e.vModelDynamic,o.model],[E]])]),e.renderSlot(o.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"input-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(S,{key:0,id:o.$attrs.id,name:o.$attrs.name,error:o.error,errors:o.errors},{default:e.withCtx(({error:t})=>[e.createElementVNode("div",y,[e.createTextVNode(e.toDisplayString(t),1),k])]),_:1},8,["id","name","error","errors"])):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,"feedback",e.normalizeProps(e.guardReactiveProps({feedback:o.feedback})),()=>[e.createVNode(h,{feedback:o.feedback},{default:e.withCtx(({feedback:t})=>[e.createElementVNode("div",b,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 V=m(c,[["render",C]]);r.InputField=V,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
1
+ (function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vue-interface/form-control")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/form-control"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.InputField={},n.Vue,n.VueInterfaceFormControl))})(this,function(n,e,l){"use strict";const m=["for"],c={class:"form-group-inner"},k={invalid:"",class:"invalid-feedback"},y=e.createElementVNode("br",null,null,-1),b={valid:"",class:"valid-feedback"},C=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:["update:modelValue"],setup(B,{emit:S}){const V=B,{controlAttributes:i,formGroupClasses:g,model:a,onClick:s,onBlur:d,onFocus:f}=l.useFormControl(V,S),p=e.ref();return(r,t)=>{const N=e.resolveComponent("ActivityIndicator");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-field",e.unref(g)])},[e.renderSlot(r.$slots,"label",{},()=>[r.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",class:e.normalizeClass(r.labelClass),for:e.unref(i).id},e.toDisplayString(r.label),11,m)):e.createCommentVNode("",!0)]),e.createElementVNode("div",c,[e.renderSlot(r.$slots,"control",e.normalizeProps(e.guardReactiveProps({onClick:e.unref(s),onBlur:e.unref(d),onFocus:e.unref(f),controlAttributes:e.unref(i)})),()=>[e.useSlots().icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-group-inner-icon",onClick:t[0]||(t[0]=(...o)=>p.value.focus&&p.value.focus(...o))},[e.renderSlot(r.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps({ref_key:"field",ref:p,"onUpdate:modelValue":t[1]||(t[1]=o=>e.isRef(a)?a.value=o:null)},e.unref(i),{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))}),null,16),[[e.vModelDynamic,e.unref(a)]])]),e.renderSlot(r.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"input-field-fade"},{default:e.withCtx(()=>[r.activity&&r.indicator?(e.openBlock(),e.createBlock(N,{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(l.FormControlErrors),{key:0,id:r.$attrs.id&&String(r.$attrs.id),name:r.$attrs.name&&String(r.$attrs.name),error:r.error,errors:r.errors},{default:e.withCtx(({error:o})=>[e.createElementVNode("div",k,[e.createTextVNode(e.toDisplayString(o),1),y])]),_: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(l.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=C,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 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 name: 'InputField',\n components: {\n ActivityIndicator\n },\n extends: FormControl\n});\n</script>\n\n<template>\n <div :class=\"formGroupClasses\">\n <slot name=\"label\">\n <label\n v-if=\"label\"\n ref=\"label\"\n :class=\"labelClass\"\n :for=\"id\">\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 <input\n ref=\"field\"\n v-model=\"model\"\n v-bind-events\n v-bind=\"controlAttributes\">\n </slot>\n\n <slot name=\"activity\">\n <Transition name=\"input-field-fade\">\n <ActivityIndicator\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.input-field,\n.input-field .form-group-inner {\n position: relative;\n transition: all .25s ease-in-out;\n}\n\n.input-field .activity-indicator {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translate(-1rem, -50%);\n transition: all .15s ease-in;\n}\n\n.input-field .activity-indicator-xs {\n font-size: .5em;\n}\n\n.input-field.has-activity .form-control-xs {\n padding-right: 3.75em;\n}\n\n.input-field .activity-indicator-sm {\n font-size: .5em;\n}\n\n.input-field.has-activity .form-control-sm {\n padding-right: 3em;\n}\n\n.input-field .activity-indicator-md {\n font-size: .666em;\n}\n\n.input-field.has-activity .form-control-md {\n padding-right: 3em;\n}\n\n.input-field .activity-indicator-lg {\n font-size: .75em;\n}\n\n.input-field.has-activity .form-control-lg {\n padding-right: 3em;\n}\n\n.input-field .activity-indicator-xl {\n font-size: 1em;\n}\n\n.input-field.has-activity .activity-indicator-xl ~ .form-control-xl {\n padding-right: 3.75em;\n}\n\n.input-field .activity-indicator {\n opacity: 1;\n}\n\n.input-field .input-field-fade-enter,\n.input-field .input-field-fade-leave-to {\n opacity: 0;\n}\n\n.input-field.is-valid .valid-feedback,\n.input-field.is-invalid .invalid-feedback {\n display: flex;\n}\n\n.input-field .form-control-icon {\n padding-left: 2em;\n}\n\n.input-field .form-group-inner-icon {\n position: absolute;\n top: 50%;\n left: .5em;\n width: 1em;\n font-size: 1.25em;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.input-field-sm .form-group-inner-icon {\n font-size: 1em;\n}\n\n.input-field-lg .form-group-inner-icon {\n left: .4em;\n font-size: 1.75em;\n}\n</style>\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_ActivityIndicator","_component_FormControlErrors","_createTextVNode","error","_component_FormControlFeedback","feedback"],"mappings":"mdAKA,MAAAA,EAAeC,kBAAgB,CAC3B,KAAM,aACN,WAAY,CAAA,kBACRC,EAAA,iBACJ,EACA,QAASC,EAAA,WACb,CAAC,sFAuDmBC,EAAO,CAAA,MAAA,oBACPC,EAAM,CAAA,QAAA,6BAaNC,EAAKC,EAAA,mBAAA,KAAA,KAAA,KAAA,EAAA,EACLC,EAAM,CAAA,MAAA,2LAlEtBC,mBA+EM,aAAA,mDA9EF,MAQOC,EAAAA,eAAAC,EAAA,gBAAA,CAAA,EAAA,uBAPH,QAMQ,CAAA,EAAA,IAAA,CAAAA,EAAA,OAAAC,EAAAA,YAJOC,EAAAA,mBAAA,QAAA,CACV,IAAK,EACL,IAAK,QAAA,MAAAH,EAAAA,eACHC,EAAK,UAAA,EAAA,IAAAA,EAAA,EAIhB,EAAAG,EAAA,gBAAAH,EAAA,KAAA,EAAA,GAAAI,CAAA,GAAAC,EAAAA,mBA2BM,GA3BN,EAAA,CAAA,CAAA,uBAKyB,MAAIZ,EAAA,CAAAa,EAAA,WAAAN,EAAA,OADrB,UAKMO,EAAA,eAAAC,EAAA,mBAAA,CAAA,WAAAR,EAAA,WAAA,kBAAAA,EAAA,iBAAA,CAAA,CAAA,EAAA,IAAA,CAAAA,EAAA,OAAA,MAAAC,EAAA,UAAA,EAH2BC,EAAAA,mBAAA,MAAA,CAC5B,IAAA,EAAA,MAAA,wBACD,QAAoBO,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,IAAAC,IAAAV,EAAA,OAAAA,EAAA,MAAA,GAAAU,CAAA,EAAA,EAAA,kCAGpBL,EAAAA,mBAAW,GAAA,EAAA,EAAAM,iBAAAf,EAAAA,mBAAA,QAAAgB,aAAA,CAGH,IAAA,QAAA,sBAFCH,EAAK,CAAA,IAAAA,EAAA,CAAA,EAAAI,GAAAb,EAAA,MAAAa,EAAA,EAAAb,EAAA,iBAAA,EAAA,KAAA,EAAA,EAAA,8BAKtB,CAAA,CAAA,CAAA,EAO4CM,EAAAA,WAAAN,EAAA,OAAA,WAAA,CAAA,EAAA,IAAA,CAAAc,EAAAA,YAJ1BC,EAAQ,WAAA,CAAA,KAAA,kBAAA,EAAA,CADlB,QAAAC,EAAA,QAAA,IAAA,CAAAhB,EAEI,wBACciB,EAAAA,YAAAC,EAAA,CACb,IAAI,WACJ,IAAI,WAAA,KAAAlB,EAAA,oGAKrB,CAAA,CAAA,CAAA,wBAGI,SAYoBO,EAAA,eAAAC,qBAAA,CAAA,MAAAR,EAAA,MAAA,OAAAA,EAAA,OAAA,GAAAA,EAAA,OAAA,GAAA,KAAAA,EAAA,OAAA,KAAA,CAAA,EAAA,IAAA,CAAAA,EAAA,OAAAA,EAAA,QAAAC,EAAA,UAAA,EAVFgB,EAAA,YAAAE,EAAA,CAEb,IAAI,EACJ,GAAOnB,EAAA,OAAA,GACP,KAAMA,EAAE,OAAA,KAAA,MAAAA,EAAA,wDAIUJ,EAAA,mBAAA,MAAAF,EAAA,CAAA0B,EAAAA,gBAAAjB,EAAA,gBAAAkB,CAAA,EAAA,CAAA,gDAK3BhB,EAAAA,mBAYO,GAAA,EAAA,CAAA,CAAA,wBARW,WAAQE,EAAAA,eAAAC,EAAAA,mBAAA,CAAA,SAAAR,EAAA,QAAA,CAAA,CAAA,EAAA,IAAA,CAElBc,EAAAA,YAAAQ,EAIM,YADC,QAAQ,EAAA,CAAA,QAAAN,EAAA,QAAA,CAAA,CAAA,SAAAO,KAAA,6DAWhB,EAAA,CAAA,UAAA,CAAA,CAAA,CAAA,wBALH,OAIQ,CAAA,EAAA,IAAA,CAAAvB,EAAA,UAAAC,EAAAA,YAFMC,EAAAA,mBAAA,QAAA,CAAA,IAAA"}
1
+ {"version":3,"file":"input-field.umd.cjs","sources":["../src/InputField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T, V\">\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 </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":["controlAttributes","formGroupClasses","model","onClick","onBlur","onFocus","useFormControl","props","emit","field","ref"],"mappings":"m+BAkBM,CAAE,kBAAAA,EAAmB,iBAAAC,EAAkB,MAAAC,EAAO,QAAAC,EAAS,OAAAC,EAAQ,QAAAC,GAAYC,EAAAA,eAAeC,EAAOC,CAAI,EAErGC,EAAQC,EAAAA"}
@@ -1,558 +1,33 @@
1
- declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
2
- activity: {
3
- type: BooleanConstructor;
4
- default: boolean;
5
- };
6
- animated: {
7
- type: BooleanConstructor;
8
- default: () => any;
9
- };
10
- error: {
11
- type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
12
- default: undefined;
13
- };
14
- errors: {
15
- type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
16
- default: undefined;
17
- };
18
- feedback: {
19
- type: (StringConstructor | ArrayConstructor)[];
20
- default: undefined;
21
- };
22
- formControlClass: {
23
- type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
24
- default: () => any;
25
- };
26
- group: {
27
- type: BooleanConstructor;
28
- default: () => any;
29
- };
30
- helpText: {
31
- type: (StringConstructor | NumberConstructor)[];
32
- default: undefined;
33
- };
34
- indicator: {
35
- type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
36
- default: () => any;
37
- };
38
- indicatorSize: {
39
- type: StringConstructor;
40
- default: undefined;
41
- };
42
- invalid: BooleanConstructor;
43
- label: {
44
- type: (StringConstructor | NumberConstructor)[];
45
- default: undefined;
46
- };
47
- labelClass: {
48
- type: (StringConstructor | ObjectConstructor)[];
49
- default: () => any;
50
- };
51
- modelValue: {
52
- type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
53
- default: () => undefined;
54
- };
55
- plaintext: BooleanConstructor;
56
- size: {
57
- type: StringConstructor;
58
- default: undefined;
59
- };
60
- valid: BooleanConstructor;
61
- }, unknown, {
62
- currentValue: undefined;
63
- hasChanged: boolean;
64
- hasFocus: boolean;
65
- isDirty: import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
66
- activity: {
67
- type: BooleanConstructor;
68
- default: boolean;
69
- };
70
- animated: {
71
- type: BooleanConstructor;
72
- default: () => any;
73
- };
74
- error: {
75
- type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
76
- default: undefined;
77
- };
78
- errors: {
79
- type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
80
- default: undefined;
81
- };
82
- feedback: {
83
- type: (StringConstructor | ArrayConstructor)[];
84
- default: undefined;
85
- };
86
- formControlClass: {
87
- type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
88
- default: () => any;
89
- };
90
- group: {
91
- type: BooleanConstructor;
92
- default: () => any;
93
- };
94
- helpText: {
95
- type: (StringConstructor | NumberConstructor)[];
96
- default: undefined;
97
- };
98
- indicator: {
99
- type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
100
- default: () => any;
101
- };
102
- indicatorSize: {
103
- type: StringConstructor;
104
- default: undefined;
105
- };
106
- invalid: BooleanConstructor;
107
- label: {
108
- type: (StringConstructor | NumberConstructor)[];
109
- default: undefined;
110
- };
111
- labelClass: {
112
- type: (StringConstructor | ObjectConstructor)[];
113
- default: () => any;
114
- };
115
- modelValue: {
116
- type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
117
- default: () => undefined;
118
- };
119
- plaintext: BooleanConstructor;
120
- size: {
121
- type: StringConstructor;
122
- default: undefined;
123
- };
124
- valid: BooleanConstructor;
125
- }>> & {
126
- onFocus?: ((...args: any[]) => any) | undefined;
127
- onBlur?: ((...args: any[]) => any) | undefined;
128
- onChange?: ((...args: any[]) => any) | undefined;
129
- onClick?: ((...args: any[]) => any) | undefined;
130
- onKeypress?: ((...args: any[]) => any) | undefined;
131
- onKeyup?: ((...args: any[]) => any) | undefined;
132
- onKeydown?: ((...args: any[]) => any) | undefined;
133
- onProgress?: ((...args: any[]) => any) | undefined;
134
- onPaste?: ((...args: any[]) => any) | undefined;
135
- "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
136
- }, {}, {}, {}, import("vue").MethodOptions, import("vue").DefineComponent<{
137
- dropShadow: {
138
- type: (BooleanConstructor | StringConstructor)[];
139
- default: undefined;
140
- };
141
- dropShadowableClassPrefix: {
142
- type: StringConstructor;
143
- default: string;
144
- };
145
- shadow: {
146
- type: (BooleanConstructor | StringConstructor)[];
147
- default: undefined;
148
- };
149
- shadowableClassPrefix: {
150
- type: StringConstructor;
151
- default: string;
152
- };
153
- }, unknown, unknown, {
154
- shadowableClass(): {
155
- [x: string]: boolean;
156
- };
157
- }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
158
- dropShadow: {
159
- type: (BooleanConstructor | StringConstructor)[];
160
- default: undefined;
161
- };
162
- dropShadowableClassPrefix: {
163
- type: StringConstructor;
164
- default: string;
165
- };
166
- shadow: {
167
- type: (BooleanConstructor | StringConstructor)[];
168
- default: undefined;
169
- };
170
- shadowableClassPrefix: {
171
- type: StringConstructor;
172
- default: string;
173
- };
174
- }>>, {
175
- shadow: string | boolean;
176
- dropShadow: string | boolean;
177
- dropShadowableClassPrefix: string;
178
- shadowableClassPrefix: string;
179
- }>, import("vue").ComponentOptionsMixin, {}, Readonly<import("vue").ExtractPropTypes<{
180
- activity: {
181
- type: BooleanConstructor;
182
- default: boolean;
183
- };
184
- animated: {
185
- type: BooleanConstructor;
186
- default: () => any;
187
- };
188
- error: {
189
- type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
190
- default: undefined;
191
- };
192
- errors: {
193
- type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
194
- default: undefined;
195
- };
196
- feedback: {
197
- type: (StringConstructor | ArrayConstructor)[];
198
- default: undefined;
199
- };
200
- formControlClass: {
201
- type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
202
- default: () => any;
203
- };
204
- group: {
205
- type: BooleanConstructor;
206
- default: () => any;
207
- };
208
- helpText: {
209
- type: (StringConstructor | NumberConstructor)[];
210
- default: undefined;
211
- };
212
- indicator: {
213
- type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
214
- default: () => any;
215
- };
216
- indicatorSize: {
217
- type: StringConstructor;
218
- default: undefined;
219
- };
220
- invalid: BooleanConstructor;
221
- label: {
222
- type: (StringConstructor | NumberConstructor)[];
223
- default: undefined;
224
- };
225
- labelClass: {
226
- type: (StringConstructor | ObjectConstructor)[];
227
- default: () => any;
228
- };
229
- modelValue: {
230
- type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
231
- default: () => undefined;
232
- };
233
- plaintext: BooleanConstructor;
234
- size: {
235
- type: StringConstructor;
236
- default: undefined;
237
- };
238
- valid: BooleanConstructor;
239
- }>> & {
240
- onFocus?: ((...args: any[]) => any) | undefined;
241
- onBlur?: ((...args: any[]) => any) | undefined;
242
- onChange?: ((...args: any[]) => any) | undefined;
243
- onClick?: ((...args: any[]) => any) | undefined;
244
- onKeypress?: ((...args: any[]) => any) | undefined;
245
- onKeyup?: ((...args: any[]) => any) | undefined;
246
- onKeydown?: ((...args: any[]) => any) | undefined;
247
- onProgress?: ((...args: any[]) => any) | undefined;
248
- onPaste?: ((...args: any[]) => any) | undefined;
249
- "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
250
- }, {}, false, {}, {
251
- P: Readonly<import("vue").ExtractPropTypes<{
252
- dropShadow: {
253
- type: (BooleanConstructor | StringConstructor)[];
254
- default: undefined;
255
- };
256
- dropShadowableClassPrefix: {
257
- type: StringConstructor;
258
- default: string;
259
- };
260
- shadow: {
261
- type: (BooleanConstructor | StringConstructor)[];
262
- default: undefined;
263
- };
264
- shadowableClassPrefix: {
265
- type: StringConstructor;
266
- default: string;
267
- };
268
- }>>;
269
- B: {};
270
- D: {};
271
- C: {
272
- shadowableClass(): {
273
- [x: string]: boolean;
274
- };
275
- };
276
- M: {};
277
- Defaults: {
278
- shadow: string | boolean;
279
- dropShadow: string | boolean;
280
- dropShadowableClassPrefix: string;
281
- shadowableClassPrefix: string;
282
- };
283
- } & {
284
- P: {};
285
- B: {};
286
- D: {};
287
- C: {};
288
- M: {};
289
- Defaults: {};
290
- }, Readonly<import("vue").ExtractPropTypes<{
291
- dropShadow: {
292
- type: (BooleanConstructor | StringConstructor)[];
293
- default: undefined;
294
- };
295
- dropShadowableClassPrefix: {
296
- type: StringConstructor;
297
- default: string;
298
- };
299
- shadow: {
300
- type: (BooleanConstructor | StringConstructor)[];
301
- default: undefined;
302
- };
303
- shadowableClassPrefix: {
304
- type: StringConstructor;
305
- default: string;
306
- };
307
- }>> & Readonly<import("vue").ExtractPropTypes<{
308
- activity: {
309
- type: BooleanConstructor;
310
- default: boolean;
311
- };
312
- animated: {
313
- type: BooleanConstructor;
314
- default: () => any;
315
- };
316
- error: {
317
- type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
318
- default: undefined;
319
- };
320
- errors: {
321
- type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
322
- default: undefined;
323
- };
324
- feedback: {
325
- type: (StringConstructor | ArrayConstructor)[];
326
- default: undefined;
327
- };
328
- formControlClass: {
329
- type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
330
- default: () => any;
331
- };
332
- group: {
333
- type: BooleanConstructor;
334
- default: () => any;
335
- };
336
- helpText: {
337
- type: (StringConstructor | NumberConstructor)[];
338
- default: undefined;
339
- };
340
- indicator: {
341
- type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
342
- default: () => any;
343
- };
344
- indicatorSize: {
345
- type: StringConstructor;
346
- default: undefined;
347
- };
348
- invalid: BooleanConstructor;
349
- label: {
350
- type: (StringConstructor | NumberConstructor)[];
351
- default: undefined;
352
- };
353
- labelClass: {
354
- type: (StringConstructor | ObjectConstructor)[];
355
- default: () => any;
356
- };
357
- modelValue: {
358
- type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
359
- default: () => undefined;
360
- };
361
- plaintext: BooleanConstructor;
362
- size: {
363
- type: StringConstructor;
364
- default: undefined;
365
- };
366
- valid: BooleanConstructor;
367
- }>> & {
368
- onFocus?: ((...args: any[]) => any) | undefined;
369
- onBlur?: ((...args: any[]) => any) | undefined;
370
- onChange?: ((...args: any[]) => any) | undefined;
371
- onClick?: ((...args: any[]) => any) | undefined;
372
- onKeypress?: ((...args: any[]) => any) | undefined;
373
- onKeyup?: ((...args: any[]) => any) | undefined;
374
- onKeydown?: ((...args: any[]) => any) | undefined;
375
- onProgress?: ((...args: any[]) => any) | undefined;
376
- onPaste?: ((...args: any[]) => any) | undefined;
377
- "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
378
- }, {}, {}, {
379
- shadowableClass(): {
380
- [x: string]: boolean;
381
- };
382
- }, import("vue").MethodOptions, {
383
- shadow: string | boolean;
384
- dropShadow: string | boolean;
385
- dropShadowableClassPrefix: string;
386
- shadowableClassPrefix: string;
387
- }>;
388
- }, {
389
- model: {
390
- get(): any;
391
- set(value: any): void;
392
- };
393
- id(): string | undefined;
394
- isEmpty(): boolean;
395
- isInvalid(): boolean;
396
- isValid(): boolean;
397
- componentName(): any;
398
- controlClass(): any;
399
- controlAttributes(): any;
400
- controlClasses(): any;
401
- controlSizeClass(): string;
402
- formGroupClasses(): {
403
- [x: number]: boolean;
404
- animated: any;
405
- 'form-group': any;
406
- 'has-activity': any;
407
- 'has-changed': any;
408
- 'has-focus': any;
409
- 'has-icon': boolean;
410
- 'is-dirty': any;
411
- 'is-empty': any;
412
- 'is-invalid': any;
413
- 'is-valid': any;
414
- } & (false | {
415
- [x: string]: boolean;
416
- });
417
- plaintextClass(): "form-control-plaintext";
418
- }, {
419
- bindEvents(el: HTMLElement): void;
420
- blur(): void;
421
- focus(): void;
422
- getFieldErrors(): any;
423
- getModelValue(): any;
424
- setModelValue(value: any): void;
425
- }, import("vue").DefineComponent<{
426
- dropShadow: {
427
- type: (BooleanConstructor | StringConstructor)[];
428
- default: undefined;
429
- };
430
- dropShadowableClassPrefix: {
431
- type: StringConstructor;
432
- default: string;
433
- };
434
- shadow: {
435
- type: (BooleanConstructor | StringConstructor)[];
436
- default: undefined;
437
- };
438
- shadowableClassPrefix: {
439
- type: StringConstructor;
440
- default: string;
441
- };
442
- }, unknown, unknown, {
443
- shadowableClass(): {
444
- [x: string]: boolean;
445
- };
446
- }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
447
- dropShadow: {
448
- type: (BooleanConstructor | StringConstructor)[];
449
- default: undefined;
450
- };
451
- dropShadowableClassPrefix: {
452
- type: StringConstructor;
453
- default: string;
454
- };
455
- shadow: {
456
- type: (BooleanConstructor | StringConstructor)[];
457
- default: undefined;
458
- };
459
- shadowableClassPrefix: {
460
- type: StringConstructor;
461
- default: string;
462
- };
463
- }>>, {
464
- shadow: string | boolean;
465
- dropShadow: string | boolean;
466
- dropShadowableClassPrefix: string;
467
- shadowableClassPrefix: string;
468
- }>, import("vue").ComponentOptionsMixin, ("focus" | "blur" | "change" | "click" | "keypress" | "keyup" | "keydown" | "progress" | "paste" | "update:modelValue")[], "focus" | "blur" | "change" | "click" | "keypress" | "keyup" | "keydown" | "progress" | "paste" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
469
- activity: {
470
- type: BooleanConstructor;
471
- default: boolean;
472
- };
473
- animated: {
474
- type: BooleanConstructor;
475
- default: () => any;
476
- };
477
- error: {
478
- type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
479
- default: undefined;
480
- };
481
- errors: {
482
- type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
483
- default: undefined;
484
- };
485
- feedback: {
486
- type: (StringConstructor | ArrayConstructor)[];
487
- default: undefined;
488
- };
489
- formControlClass: {
490
- type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
491
- default: () => any;
492
- };
493
- group: {
494
- type: BooleanConstructor;
495
- default: () => any;
496
- };
497
- helpText: {
498
- type: (StringConstructor | NumberConstructor)[];
499
- default: undefined;
500
- };
501
- indicator: {
502
- type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
503
- default: () => any;
504
- };
505
- indicatorSize: {
506
- type: StringConstructor;
507
- default: undefined;
508
- };
509
- invalid: BooleanConstructor;
510
- label: {
511
- type: (StringConstructor | NumberConstructor)[];
512
- default: undefined;
513
- };
514
- labelClass: {
515
- type: (StringConstructor | ObjectConstructor)[];
516
- default: () => any;
517
- };
518
- modelValue: {
519
- type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
520
- default: () => undefined;
521
- };
522
- plaintext: BooleanConstructor;
523
- size: {
524
- type: StringConstructor;
525
- default: undefined;
526
- };
527
- valid: BooleanConstructor;
528
- }>> & {
529
- onFocus?: ((...args: any[]) => any) | undefined;
530
- onBlur?: ((...args: any[]) => any) | undefined;
531
- onChange?: ((...args: any[]) => any) | undefined;
532
- onClick?: ((...args: any[]) => any) | undefined;
533
- onKeypress?: ((...args: any[]) => any) | undefined;
534
- onKeyup?: ((...args: any[]) => any) | undefined;
535
- onKeydown?: ((...args: any[]) => any) | undefined;
536
- onProgress?: ((...args: any[]) => any) | undefined;
537
- onPaste?: ((...args: any[]) => any) | undefined;
538
- "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
539
- }, {
540
- error: string | boolean | unknown[];
541
- errors: boolean | unknown[] | Record<string, any>;
542
- feedback: string | unknown[];
543
- activity: boolean;
544
- animated: boolean;
545
- formControlClass: string | unknown[] | Record<string, any>;
546
- group: boolean;
547
- helpText: string | number;
548
- indicator: string | boolean | Record<string, any>;
549
- indicatorSize: string;
550
- invalid: boolean;
551
- label: string | number;
552
- labelClass: string | Record<string, any>;
553
- modelValue: string | number | boolean | unknown[] | Record<string, any>;
554
- plaintext: boolean;
555
- size: string;
556
- valid: boolean;
557
- }>, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
558
- export default _sfc_main;
1
+ import type { FormControlEvents, FormControlSlots } from '@vue-interface/form-control';
2
+ declare const _default: <T, V>(__VLS_props: import("@vue-interface/form-control").FormControlProps<T, V> & {
3
+ checked?: boolean;
4
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: Pick<{
5
+ props: import("@vue-interface/form-control").FormControlProps<T, V> & {
6
+ checked?: boolean;
7
+ };
8
+ expose(exposed: {}): void;
9
+ attrs: any;
10
+ slots: FormControlSlots<T>;
11
+ emit: FormControlEvents<T>;
12
+ }, "attrs" | "emit" | "slots">, __VLS_setup?: Promise<{
13
+ props: import("@vue-interface/form-control").FormControlProps<T, V> & {
14
+ checked?: boolean;
15
+ };
16
+ expose(exposed: {}): void;
17
+ attrs: any;
18
+ slots: FormControlSlots<T>;
19
+ emit: FormControlEvents<T>;
20
+ }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
21
+ [key: string]: any;
22
+ }> & {
23
+ __ctx?: {
24
+ props: import("@vue-interface/form-control").FormControlProps<T, V> & {
25
+ checked?: boolean;
26
+ };
27
+ expose(exposed: {}): void;
28
+ attrs: any;
29
+ slots: FormControlSlots<T>;
30
+ emit: FormControlEvents<T>;
31
+ };
32
+ };
33
+ export default _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vue-interface/input-field",
3
- "version": "1.0.0-beta.19",
3
+ "version": "1.0.0-beta.20",
4
4
  "description": "A Vue input field component.",
5
5
  "files": [
6
6
  "dist"
@@ -8,20 +8,18 @@
8
8
  "type": "module",
9
9
  "main": "./dist/input-field.umd.cjs",
10
10
  "module": "./dist/input-field.js",
11
- "style": "./dist/style.css",
12
11
  "types": "./dist/index.d.ts",
13
12
  "exports": {
14
13
  ".": {
15
14
  "import": "./dist/input-field.js",
16
15
  "require": "./dist/input-field.umd.js",
17
16
  "types": "./dist/index.d.ts"
18
- },
19
- "./dist/style.css": "./dist/style.css"
17
+ }
20
18
  },
21
19
  "browserslist": "last 2 versions, > 0.5%, ie >= 11",
22
20
  "scripts": {
23
21
  "dev": "vite",
24
- "build": "vite build",
22
+ "build": "vite build && vue-tsc",
25
23
  "preview": "vite preview"
26
24
  },
27
25
  "repository": {
@@ -44,24 +42,31 @@
44
42
  "homepage": "https://github.com/vue-interface/input-field/docs#readme",
45
43
  "dependencies": {
46
44
  "@vue-interface/activity-indicator": "^2.0.0-beta.15",
47
- "@vue-interface/form-control": "^1.0.0-beta.20"
45
+ "@vue-interface/form-control": "^1.0.0-beta.38"
48
46
  },
49
47
  "peerDependencies": {
50
- "vue": "^3.0.0"
48
+ "vue": "^3.3.4"
51
49
  },
52
50
  "devDependencies": {
53
- "@vitejs/plugin-vue": "^4.0.0",
54
- "@vue-interface/eslint-config": "^1.0.0-beta.0",
55
- "autoprefixer": "^10.4.2",
51
+ "@commitlint/config-conventional": "^17.7.0",
52
+ "@semantic-release/changelog": "^6.0.3",
53
+ "@semantic-release/git": "^10.0.1",
54
+ "@semantic-release/npm": "^10.0.5",
55
+ "@vitejs/plugin-vue": "^4.3.3",
56
+ "@vue-interface/eslint-config": "1.0.0-beta.4",
57
+ "autoprefixer": "^10.4.15",
56
58
  "change-case": "^4.1.2",
57
- "eslint": "^8.28.0",
59
+ "commitlint": "^17.7.1",
60
+ "dotenv": "^16.3.1",
61
+ "eslint": "^8.47.0",
62
+ "husky": "^8.0.3",
58
63
  "pascalcase": "^2.0.0",
59
- "postcss": "^8.4.6",
60
- "tailwindcss": "^3.0.18",
61
- "tsup": "^6.6.2",
62
- "typescript": "^4.0.0",
63
- "vite": "^4.0.0",
64
- "vite-plugin-dts": "^1.7.1",
65
- "vue": "^3.2.37"
64
+ "postcss": "^8.4.28",
65
+ "semantic-release": "^21.1.1",
66
+ "tailwindcss": "^3.3.3",
67
+ "typescript": "^5.2.2",
68
+ "vite": "^4.4.9",
69
+ "vue": "^3.3.4",
70
+ "vue-tsc": "^1.8.8"
66
71
  }
67
72
  }
package/dist/style.css DELETED
@@ -1 +0,0 @@
1
- .input-field,.input-field .form-group-inner{position:relative;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.input-field .activity-indicator{position:absolute;right:0;top:50%;-webkit-transform:translate(-1rem,-50%);transform:translate(-1rem,-50%);-webkit-transition:all .15s ease-in;transition:all .15s ease-in}.input-field .activity-indicator-xs{font-size:.5em}.input-field.has-activity .form-control-xs{padding-right:3.75em}.input-field .activity-indicator-sm{font-size:.5em}.input-field.has-activity .form-control-sm{padding-right:3em}.input-field .activity-indicator-md{font-size:.666em}.input-field.has-activity .form-control-md{padding-right:3em}.input-field .activity-indicator-lg{font-size:.75em}.input-field.has-activity .form-control-lg{padding-right:3em}.input-field .activity-indicator-xl{font-size:1em}.input-field.has-activity .activity-indicator-xl~.form-control-xl{padding-right:3.75em}.input-field .activity-indicator{opacity:1}.input-field .input-field-fade-enter,.input-field .input-field-fade-leave-to{opacity:0}.input-field.is-valid .valid-feedback,.input-field.is-invalid .invalid-feedback{display:-webkit-box;display:-ms-flexbox;display:flex}.input-field .form-control-icon{padding-left:2em}.input-field .form-group-inner-icon{position:absolute;top:50%;left:.5em;width:1em;font-size:1.25em;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.input-field-sm .form-group-inner-icon{font-size:1em}.input-field-lg .form-group-inner-icon{left:.4em;font-size:1.75em}