npm - @vue-interface/input-field - Versions diffs - 3.0.0 → 3.0.1 - Mend

@vue-interface/input-field 3.0.0 → 3.0.1

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.

Files changed (6) hide show

package/dist/input-field.js +59 -60
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 +3 -3
package/src/InputField.vue +4 -4

package/dist/input-field.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { openBlock as l, createElementBlock as c, createElementVNode as i, defineComponent as P, useModel as R, computed as x, useTemplateRef as u, normalizeClass as D, unref as t, renderSlot as a, toDisplayString as b, createCommentVNode as f, normalizeProps as m, guardReactiveProps as v, withDirectives as j, mergeProps as G, vModelDynamic as U, withModifiers as q, createVNode as I, createBlock as C, Transition as H, withCtx as w, createTextVNode as J, mergeModels as A } from "vue";
-import { ActivityIndicator as K } from "@vue-interface/activity-indicator";
-import { useFormControl as L, FormControlErrors as O, FormControlFeedback as Q } from "@vue-interface/form-control";
-function W(e, B) {
+import { openBlock as l, createElementBlock as c, createElementVNode as i, defineComponent as P, ref as R, useModel as j, computed as F, useTemplateRef as f, normalizeClass as x, unref as o, renderSlot as a, toDisplayString as b, createCommentVNode as m, normalizeProps as v, guardReactiveProps as y, withDirectives as G, mergeProps as U, vModelDynamic as q, withModifiers as H, createVNode as I, createBlock as C, Transition as J, withCtx as w, createTextVNode as K, mergeModels as A } from "vue";
+import { ActivityIndicator as L } from "@vue-interface/activity-indicator";
+import { useFormControl as O, FormControlErrors as Q, FormControlFeedback as W } from "@vue-interface/form-control";
+function X(e, B) {
   return l(), c("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -18,13 +18,13 @@ function W(e, B) {
     })
   ]);
 }
-const X = ["for"], Y = { class: "form-control-inner" }, Z = { class: "form-control-activity-indicator" }, _ = {
+const Y = ["for"], Z = { class: "form-control-inner" }, _ = { class: "form-control-activity-indicator" }, ee = {
   invalid: "",
   class: "invalid-feedback"
-}, ee = {
+}, te = {
   valid: "",
   class: "valid-feedback"
-}, re = /* @__PURE__ */ P({
+}, ae = /* @__PURE__ */ P({
   inheritAttrs: !1,
   __name: "InputField",
   props: /* @__PURE__ */ A({
@@ -56,84 +56,83 @@ const X = ["for"], Y = { class: "form-control-inner" }, Z = { class: "form-contr
   }),
   emits: /* @__PURE__ */ A(["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(e, { expose: B, emit: N }) {
-    const r = e, y = R(e, "modelValue"), S = N, {
+    const r = e, S = R(), d = j(e, "modelValue"), D = N, {
       controlAttributes: k,
       formGroupClasses: E,
-      isDirty: $,
-      listeners: g
-    } = L({ model: y, props: r, emit: S }), p = x(() => !r.disabled && !r.readonly), h = x(() => r.clearable && $.value && p.value);
-    function V() {
-      p.value && (y.value = void 0);
+      listeners: $
+    } = O({ model: d, props: r, emit: D }), p = F(() => !r.disabled && !r.readonly), h = F(() => r.clearable && (!!S.value || !!d.value) && p.value);
+    function g() {
+      p.value && (d.value = void 0);
     }
-    const z = u("activity"), T = u("help"), M = u("label"), d = u("field"), F = u("wrapper");
+    const V = f("activity"), z = f("help"), T = f("label"), u = f("field"), M = f("wrapper");
     return B({
-      activity: z,
-      help: T,
-      field: d,
-      label: M,
-      wrapper: F,
-      focus: () => d.value?.focus(),
-      blur: () => d.value?.blur()
-    }), (o, n) => (l(), c("div", {
+      activity: V,
+      help: z,
+      field: u,
+      label: T,
+      wrapper: M,
+      focus: () => u.value?.focus(),
+      blur: () => u.value?.blur()
+    }), (t, n) => (l(), c("div", {
       ref_key: "wrapper",
-      ref: F,
-      class: D(["input-field", [t(E), { "has-clear-button": h.value }]])
+      ref: M,
+      class: x(["input-field", [o(E), { "has-clear-button": h.value }]])
     }, [
-      a(o.$slots, "label", {}, () => [
+      a(t.$slots, "label", {}, () => [
         r.label ? (l(), c("label", {
           key: 0,
           ref_key: "label",
-          ref: M,
-          class: D(e.labelClass),
-          for: t(k).id
-        }, b(r.label), 11, X)) : f("", !0)
+          ref: T,
+          class: x(e.labelClass),
+          for: o(k).id
+        }, b(r.label), 11, Y)) : m("", !0)
       ]),
-      i("div", Y, [
-        a(o.$slots, "control", m(v({ controlAttributes: t(k), listeners: t(g) })), () => [
-          o.$slots.icon ? (l(), c("div", {
+      i("div", Z, [
+        a(t.$slots, "control", v(y({ controlAttributes: o(k), listeners: o($) })), () => [
+          t.$slots.icon ? (l(), c("div", {
             key: 0,
             class: "form-control-inner-icon",
-            onClick: n[0] || (n[0] = (s) => d.value?.focus())
+            onClick: n[0] || (n[0] = (s) => u.value?.focus())
           }, [
-            a(o.$slots, "icon")
-          ])) : f("", !0),
-          j(i("input", G({
+            a(t.$slots, "icon")
+          ])) : m("", !0),
+          G(i("input", U({
             ref_key: "field",
-            ref: d,
-            "onUpdate:modelValue": n[1] || (n[1] = (s) => y.value = s)
-          }, { ...t(k), ...t(g) }), null, 16), [
-            [U, y.value]
+            ref: u,
+            "onUpdate:modelValue": n[1] || (n[1] = (s) => d.value = s)
+          }, { ...o(k), ...o($) }), null, 16), [
+            [q, d.value]
           ])
         ]),
-        i("div", Z, [
-          a(o.$slots, "activity", m(v({ canClear: h.value, clear: V, isDirty: t($), isInteractive: p.value })), () => [
+        i("div", _, [
+          a(t.$slots, "activity", v(y({ canClear: h.value, clear: g, isInteractive: p.value })), () => [
             h.value ? (l(), c("button", {
               key: 0,
               type: "button",
               class: "input-field-close-button",
-              onClick: q(V, ["stop"])
+              onClick: H(g, ["stop"])
             }, [
-              I(t(W), { class: "size-[1.25em]" })
-            ])) : (l(), C(H, {
+              I(o(X), { class: "size-[1.25em]" })
+            ])) : (l(), C(J, {
               key: 1,
               name: "input-field-fade"
             }, {
               default: w(() => [
-                r.activity && e.indicator ? (l(), C(t(K), {
+                r.activity && e.indicator ? (l(), C(o(L), {
                   key: "activity",
                   ref_key: "activity",
-                  ref: z,
+                  ref: V,
                   type: e.indicator,
                   size: e.indicatorSize
-                }, null, 8, ["type", "size"])) : f("", !0)
+                }, null, 8, ["type", "size"])) : m("", !0)
               ]),
               _: 1
             }))
           ])
         ])
       ]),
-      a(o.$slots, "errors", m(v({ error: e.error, errors: e.errors, id: o.$attrs.id, name: o.$attrs.name })), () => [
-        e.error || e.errors ? (l(), C(t(O), {
+      a(t.$slots, "errors", v(y({ error: e.error, errors: e.errors, id: t.$attrs.id, name: t.$attrs.name })), () => [
+        e.error || e.errors ? (l(), C(o(Q), {
           key: 0,
           id: e.id,
           name: e.name,
@@ -141,34 +140,34 @@ const X = ["for"], Y = { class: "form-control-inner" }, Z = { class: "form-contr
           errors: e.errors
         }, {
           default: w(({ error: s }) => [
-            i("div", _, [
-              J(b(s), 1),
+            i("div", ee, [
+              K(b(s), 1),
               n[2] || (n[2] = i("br", null, null, -1))
             ])
           ]),
           _: 1
-        }, 8, ["id", "name", "error", "errors"])) : f("", !0)
+        }, 8, ["id", "name", "error", "errors"])) : m("", !0)
       ]),
-      a(o.$slots, "feedback", m(v({ feedback: e.feedback })), () => [
-        I(t(Q), { feedback: e.feedback }, {
+      a(t.$slots, "feedback", v(y({ feedback: e.feedback })), () => [
+        I(o(W), { feedback: e.feedback }, {
           default: w(({ feedback: s }) => [
-            i("div", ee, b(s), 1)
+            i("div", te, b(s), 1)
           ]),
           _: 1
         }, 8, ["feedback"])
       ]),
-      a(o.$slots, "help", m(v({ helpText: e.helpText })), () => [
+      a(t.$slots, "help", v(y({ helpText: e.helpText })), () => [
         e.helpText ? (l(), c("small", {
           key: 0,
           ref_key: "help",
-          ref: T,
+          ref: z,
           class: "form-help"
-        }, b(e.helpText), 513)) : f("", !0)
+        }, b(e.helpText), 513)) : m("", !0)
       ])
     ], 2));
   }
 });
 export {
-  re as InputField
+  ae as InputField
 };
 //# sourceMappingURL=input-field.js.map

package/dist/input-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-field.js","sources":["../../../node_modules/.pnpm/@heroicons+vue@2.2.0_vue@3.5.27_typescript@5.9.3_/node_modules/@heroicons/vue/24/outline/esm/XMarkIcon.js","../src/InputField.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n return (_openBlock(), _createElementBlock(\"svg\", {\n xmlns: \"http://www.w3.org/2000/svg\",\n fill: \"none\",\n viewBox: \"0 0 24 24\",\n \"stroke-width\": \"1.5\",\n stroke: \"currentColor\",\n \"aria-hidden\": \"true\",\n \"data-slot\": \"icon\"\n }, [\n _createElementVNode(\"path\", {\n \"stroke-linecap\": \"round\",\n \"stroke-linejoin\": \"round\",\n d: \"M6 18 18 6M6 6l12 12\"\n })\n ]))\n}","<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { XMarkIcon } from '@heroicons/vue/24/outline';\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, computed, 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 clearable: false\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 isDirty,\n listeners\n} = useFormControl<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue\|undefined, Value>({ model, props, emit });\n\nconst isInteractive = computed(() => !props.disabled && !props.readonly);\n\nconst canClear = computed(() => {\n return props.clearable && isDirty.value && isInteractive.value;\n});\n\nfunction clear() {\n if (!isInteractive.value) return;\n model.value = undefined;\n}\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 clearable?: boolean;\n}\n</script>\n\n<template>\n <div\n ref=\"wrapper\"\n class=\"input-field\"\n :class=\"[formGroupClasses, { 'has-clear-button': canClear }]\">\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\" v-bind=\"{ canClear, clear, isDirty, isInteractive }\">\n <button\n v-if=\"canClear\"\n type=\"button\"\n class=\"input-field-close-button\"\n @click.stop=\"clear\">\n <XMarkIcon class=\"size-[1.25em]\" />\n </button>\n <Transition name=\"input-field-fade\" v-else>\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":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","props","__props","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","isDirty","listeners","useFormControl","isInteractive","computed","canClear","clear","activity","useTemplateRef","help","label","field","wrapper","__expose","_normalizeClass","_unref","_renderSlot","_toDisplayString","_hoisted_1","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","$event","_withDirectives","_mergeProps","_hoisted_3","_createVNode","XMarkIcon","_createBlock","_Transition","ActivityIndicator","$attrs","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5"],"mappings":"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","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"input-field.js","sources":["../../../node_modules/.pnpm/@heroicons+vue@2.2.0_vue@3.5.27_typescript@5.9.3_/node_modules/@heroicons/vue/24/outline/esm/XMarkIcon.js","../src/InputField.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n return (_openBlock(), _createElementBlock(\"svg\", {\n xmlns: \"http://www.w3.org/2000/svg\",\n fill: \"none\",\n viewBox: \"0 0 24 24\",\n \"stroke-width\": \"1.5\",\n stroke: \"currentColor\",\n \"aria-hidden\": \"true\",\n \"data-slot\": \"icon\"\n }, [\n _createElementVNode(\"path\", {\n \"stroke-linecap\": \"round\",\n \"stroke-linejoin\": \"round\",\n d: \"M6 18 18 6M6 6l12 12\"\n })\n ]))\n}","<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { XMarkIcon } from '@heroicons/vue/24/outline';\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, computed, useTemplateRef, ref } from 'vue';\n\nconst props = withDefaults(defineProps<InputFieldProps<ModelValue,Value>>(), {\n formControlClass: 'form-control',\n labelClass: 'form-label',\n size: 'form-control-md',\n clearable: false\n});\n\ndefineOptions({\n inheritAttrs: false\n});\n\nconst input = ref<string>();\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 isInteractive = computed(() => !props.disabled && !props.readonly);\n\nconst canClear = computed(() => {\n return props.clearable && (!!input.value \|\| !!model.value) && isInteractive.value;\n});\n\nfunction clear() {\n if (!isInteractive.value) return;\n model.value = undefined;\n}\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 clearable?: boolean;\n}\n</script>\n\n<template>\n <div\n ref=\"wrapper\"\n class=\"input-field\"\n :class=\"[formGroupClasses, { 'has-clear-button': canClear }]\">\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\" v-bind=\"{ canClear, clear, isInteractive }\">\n <button\n v-if=\"canClear\"\n type=\"button\"\n class=\"input-field-close-button\"\n @click.stop=\"clear\">\n <XMarkIcon class=\"size-[1.25em]\" />\n </button>\n <Transition name=\"input-field-fade\" v-else>\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":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","props","__props","input","ref","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","listeners","useFormControl","isInteractive","computed","canClear","clear","activity","useTemplateRef","help","label","field","wrapper","__expose","_normalizeClass","_unref","_renderSlot","_toDisplayString","_hoisted_1","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","$event","_withDirectives","_mergeProps","_hoisted_3","_createVNode","XMarkIcon","_createBlock","_Transition","ActivityIndicator","$attrs","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/input-field.umd.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-(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,V,s){"use strict";function w(t,p){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})])}const g=["for"],N={class:"form-control-inner"},S={class:"form-control-activity-indicator"},T={invalid:"",class:"invalid-feedback"},E={valid:"",class:"valid-feedback"},z=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:{},clearable:{type:Boolean,default:!1}},{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:p,emit:P}){const l=t,c=e.useModel(t,"modelValue"),$=P,{controlAttributes:d,formGroupClasses:R,isDirty:u,listeners:k}=s.useFormControl({model:c,props:l,emit:$}),f=e.computed(()=>!l.disabled&&!l.readonly),m=e.computed(()=>l.clearable&&u.value&&f.value);function y(){f.value&&(c.value=void 0)}const b=e.useTemplateRef("activity"),h=e.useTemplateRef("help"),B=e.useTemplateRef("label"),i=e.useTemplateRef("field"),C=e.useTemplateRef("wrapper");return p({activity:b,help:h,field:i,label:B,wrapper:C,focus:()=>i.value?.focus(),blur:()=>i.value?.blur()}),(o,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:C,class:e.normalizeClass(["input-field",[e.unref(R),{"has-clear-button":m.value}]])},[e.renderSlot(o.$slots,"label",{},()=>[l.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref_key:"label",ref:B,class:e.normalizeClass(t.labelClass),for:e.unref(d).id},e.toDisplayString(l.label),11,g)):e.createCommentVNode("",!0)]),e.createElementVNode("div",N,[e.renderSlot(o.$slots,"control",e.normalizeProps(e.guardReactiveProps({controlAttributes:e.unref(d),listeners:e.unref(k)})),()=>[o.$slots.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-control-inner-icon",onClick:n[0]||(n[0]=a=>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":n[1]||(n[1]=a=>c.value=a)},{...e.unref(d),...e.unref(k)}),null,16),[[e.vModelDynamic,c.value]])]),e.createElementVNode("div",S,[e.renderSlot(o.$slots,"activity",e.normalizeProps(e.guardReactiveProps({canClear:m.value,clear:y,isDirty:e.unref(u),isInteractive:f.value})),()=>[m.value?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"input-field-close-button",onClick:e.withModifiers(y,["stop"])},[e.createVNode(e.unref(w),{class:"size-[1.25em]"})])):(e.openBlock(),e.createBlock(e.Transition,{key:1,name:"input-field-fade"},{default:e.withCtx(()=>[l.activity&&t.indicator?(e.openBlock(),e.createBlock(e.unref(V.ActivityIndicator),{key:"activity",ref_key:"activity",ref:b,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:a})=>[e.createElementVNode("div",T,[e.createTextVNode(e.toDisplayString(a),1),n[2]||(n[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:a})=>[e.createElementVNode("div",E,e.toDisplayString(a),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:h,class:"form-help"},e.toDisplayString(t.helpText),513)):e.createCommentVNode("",!0)])],2))}});r.InputField=z,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
+(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,C,s){"use strict";function V(t,p){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})])}const w=["for"],g={class:"form-control-inner"},N={class:"form-control-activity-indicator"},S={invalid:"",class:"invalid-feedback"},T={valid:"",class:"valid-feedback"},E=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:{},clearable:{type:Boolean,default:!1}},{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:p,emit:z}){const l=t,P=e.ref(),i=e.useModel(t,"modelValue"),$=z,{controlAttributes:d,formGroupClasses:R,listeners:u}=s.useFormControl({model:i,props:l,emit:$}),f=e.computed(()=>!l.disabled&&!l.readonly),m=e.computed(()=>l.clearable&&(!!P.value||!!i.value)&&f.value);function k(){f.value&&(i.value=void 0)}const y=e.useTemplateRef("activity"),b=e.useTemplateRef("help"),h=e.useTemplateRef("label"),c=e.useTemplateRef("field"),B=e.useTemplateRef("wrapper");return p({activity:y,help:b,field:c,label:h,wrapper:B,focus:()=>c.value?.focus(),blur:()=>c.value?.blur()}),(o,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:B,class:e.normalizeClass(["input-field",[e.unref(R),{"has-clear-button":m.value}]])},[e.renderSlot(o.$slots,"label",{},()=>[l.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref_key:"label",ref:h,class:e.normalizeClass(t.labelClass),for:e.unref(d).id},e.toDisplayString(l.label),11,w)):e.createCommentVNode("",!0)]),e.createElementVNode("div",g,[e.renderSlot(o.$slots,"control",e.normalizeProps(e.guardReactiveProps({controlAttributes:e.unref(d),listeners:e.unref(u)})),()=>[o.$slots.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-control-inner-icon",onClick:n[0]||(n[0]=a=>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":n[1]||(n[1]=a=>i.value=a)},{...e.unref(d),...e.unref(u)}),null,16),[[e.vModelDynamic,i.value]])]),e.createElementVNode("div",N,[e.renderSlot(o.$slots,"activity",e.normalizeProps(e.guardReactiveProps({canClear:m.value,clear:k,isInteractive:f.value})),()=>[m.value?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"input-field-close-button",onClick:e.withModifiers(k,["stop"])},[e.createVNode(e.unref(V),{class:"size-[1.25em]"})])):(e.openBlock(),e.createBlock(e.Transition,{key:1,name:"input-field-fade"},{default:e.withCtx(()=>[l.activity&&t.indicator?(e.openBlock(),e.createBlock(e.unref(C.ActivityIndicator),{key:"activity",ref_key:"activity",ref:y,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:a})=>[e.createElementVNode("div",S,[e.createTextVNode(e.toDisplayString(a),1),n[2]||(n[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:a})=>[e.createElementVNode("div",T,e.toDisplayString(a),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:b,class:"form-help"},e.toDisplayString(t.helpText),513)):e.createCommentVNode("",!0)])],2))}});r.InputField=E,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
 //# sourceMappingURL=input-field.umd.cjs.map

package/dist/input-field.umd.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-field.umd.cjs","sources":["../../../node_modules/.pnpm/@heroicons+vue@2.2.0_vue@3.5.27_typescript@5.9.3_/node_modules/@heroicons/vue/24/outline/esm/XMarkIcon.js","../src/InputField.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n return (_openBlock(), _createElementBlock(\"svg\", {\n xmlns: \"http://www.w3.org/2000/svg\",\n fill: \"none\",\n viewBox: \"0 0 24 24\",\n \"stroke-width\": \"1.5\",\n stroke: \"currentColor\",\n \"aria-hidden\": \"true\",\n \"data-slot\": \"icon\"\n }, [\n _createElementVNode(\"path\", {\n \"stroke-linecap\": \"round\",\n \"stroke-linejoin\": \"round\",\n d: \"M6 18 18 6M6 6l12 12\"\n })\n ]))\n}","<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { XMarkIcon } from '@heroicons/vue/24/outline';\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, computed, 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 clearable: false\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 isDirty,\n listeners\n} = useFormControl<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue\|undefined, Value>({ model, props, emit });\n\nconst isInteractive = computed(() => !props.disabled && !props.readonly);\n\nconst canClear = computed(() => {\n return props.clearable && isDirty.value && isInteractive.value;\n});\n\nfunction clear() {\n if (!isInteractive.value) return;\n model.value = undefined;\n}\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 clearable?: boolean;\n}\n</script>\n\n<template>\n <div\n ref=\"wrapper\"\n class=\"input-field\"\n :class=\"[formGroupClasses, { 'has-clear-button': canClear }]\">\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\" v-bind=\"{ canClear, clear, isDirty, isInteractive }\">\n <button\n v-if=\"canClear\"\n type=\"button\"\n class=\"input-field-close-button\"\n @click.stop=\"clear\">\n <XMarkIcon class=\"size-[1.25em]\" />\n </button>\n <Transition name=\"input-field-fade\" v-else>\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":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","props","__props","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","isDirty","listeners","useFormControl","isInteractive","computed","canClear","clear","activity","useTemplateRef","help","label","field","wrapper","__expose","_normalizeClass","_unref","_renderSlot","_toDisplayString","_hoisted_1","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","$event","_withDirectives","_mergeProps","_hoisted_3","_createVNode","XMarkIcon","_createBlock","_Transition","ActivityIndicator","$attrs","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5"],"mappings":"odAEe,SAASA,EAAOC,EAAMC,EAAQ,CAC3C,OAAQC,EAAAA,UAAU,EAAIC,EAAAA,mBAAoB,MAAO,CAC/C,MAAO,6BACP,KAAM,OACN,QAAS,YACT,eAAgB,MAChB,OAAQ,eACR,cAAe,OACf,YAAa,MACjB,EAAK,CACDC,EAAAA,mBAAoB,OAAQ,CAC1B,iBAAkB,QAClB,kBAAmB,QACnB,EAAG,sBACT,CAAK,CACL,CAAG,CACH,qmCCXA,MAAMC,EAAQC,EAWRC,EAAQC,EAAAA,SAAuBF,EAAA,YAAC,EAIhCG,EAAOC,EAEP,CACF,kBAAAC,EACA,iBAAAC,EACA,QAAAC,EACA,UAAAC,CAAA,EACAC,EAAAA,eAA8F,CAAE,MAAAR,EAAO,MAAAF,EAAO,KAAAI,EAAM,EAElHO,EAAgBC,EAAAA,SAAS,IAAM,CAACZ,EAAM,UAAY,CAACA,EAAM,QAAQ,EAEjEa,EAAWD,EAAAA,SAAS,IACfZ,EAAM,WAAaQ,EAAQ,OAASG,EAAc,KAC5D,EAED,SAASG,GAAQ,CACRH,EAAc,QACnBT,EAAM,MAAQ,OAClB,CAEA,MAAMa,EAAWC,EAAAA,eAAuD,UAAU,EAC5EC,EAAOD,EAAAA,eAA4B,MAAM,EACzCE,EAAQF,EAAAA,eAAiC,OAAO,EAChDG,EAAQH,EAAAA,eAAiC,OAAO,EAChDI,EAAUJ,EAAAA,eAA+B,SAAS,EAExD,OAAAK,EAAa,CACT,SAAAN,EACA,KAAAE,EACA,MAAAE,EACA,MAAAD,EACA,QAAAE,EACA,MAAO,IAAMD,EAAM,OAAO,MAAA,EAC1B,KAAM,IAAMA,EAAM,OAAO,KAAA,CAAK,CACjC,wBAiBGrB,EAAAA,mBA6FM,MAAA,SA5FE,UAAJ,IAAIsB,EACJ,MAAKE,EAAAA,eAAA,CAAC,cAAa,CACVC,EAAAA,MAAAhB,CAAA,sBAAwCM,EAAA,KAAA,CAAQ,CAAA,CAAA,CAAA,GACzDW,EAAAA,WAQO7B,oBARP,IAQO,CANOK,EAAM,qBADhBF,EAAAA,mBAMQ,QAAA,eAJA,QAAJ,IAAIoB,EACH,uBAAOjB,EAAA,UAAU,EACjB,IAAKsB,EAAAA,MAAAjB,CAAA,EAAkB,EAAA,EACrBmB,EAAAA,gBAAAzB,EAAM,KAAK,EAAA,GAAA0B,CAAA,iCAItB3B,EAAAA,mBAmCM,MAnCN4B,EAmCM,CAlCFH,EAAAA,WAaO7B,EAAA,OAAA,UAAAiC,EAAAA,eAAAC,EAAAA,mBAAA,CAAA,kBAXON,EAAAA,MAAAjB,CAAA,EAAiB,UAAEiB,EAAAA,MAAAd,CAAA,KAFjC,IAaO,CATOqB,EAAAA,OAAO,oBADjBhC,EAAAA,mBAKM,MAAA,OAHF,MAAM,0BACL,QAAKF,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAmC,GAAEZ,EAAA,OAAO,MAAA,EAAK,GACpBK,aAAoB7B,EAAA,OAAA,MAAA,CAAA,gCAExBqC,iBAAAjC,EAAAA,mBAGkD,QAHlDkC,aAGkD,SAF1C,QAAJ,IAAId,uCACKjB,EAAK,MAAA6B,EAAA,EACF,CAAA,GAAAR,EAAAA,MAAAjB,CAAA,KAAsBiB,EAAAA,MAAAd,CAAA,EAAS,EAAA,KAAA,EAAA,EAAA,kBADlCP,EAAA,KAAK,CAAA,KAItBH,EAAAA,mBAkBM,MAlBNmC,EAkBM,CAjBFV,aAgBO7B,EAAA,OAAA,WAAAiC,EAAAA,eAAAC,qBAAA,CAAA,SAhByBhB,QAAQ,MAAAC,UAASS,EAAAA,MAAAf,CAAA,EAAO,cAAEG,EAAA,MAAa,CAAA,EAAvE,IAgBO,CAdOE,EAAA,qBADVf,EAAAA,mBAMS,SAAA,OAJL,KAAK,SACL,MAAM,2BACL,wBAAYgB,EAAK,CAAA,MAAA,CAAA,CAAA,GAClBqB,EAAAA,YAAmCZ,EAAAA,MAAAa,CAAA,EAAA,CAAxB,MAAM,gBAAe,CAAA,mBAEpCC,EAAAA,YAOaC,aAAA,OAPD,KAAK,kBAAA,qBACb,IAK4B,CAJlBtC,EAAM,UAAYC,EAAA,yBAD5BoC,EAAAA,YAK4Bd,QAAAgB,EAAAA,iBAAA,EAAA,CAHxB,IAAI,mBACA,WAAJ,IAAIxB,EACH,KAAMd,EAAA,UACN,KAAMA,EAAA,aAAA,sEAM3BuB,EAAAA,WAgBO7B,EAAA,OAAA,SAAAiC,EAAAA,eAAAC,qBAAA,CAAA,MAdO5B,EAAA,MAAK,OAAEA,EAAA,OAAM,GAAMuC,EAAAA,OAAO,GAAE,KAAQA,EAAAA,OAAO,QAFzD,IAgBO,CAZUvC,EAAA,OAASA,EAAA,sBADtBoC,EAAAA,YAYoBd,QAAAkB,EAAAA,iBAAA,EAAA,OAVf,GAAIxC,EAAA,GAEJ,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,OAAQA,EAAA,MAAA,GACT,QAAAyC,EAAAA,QAAA,CAIM,CARI,MAAAC,KAAK,CAIf5C,EAAAA,mBAIM,MAJN6C,EAIM,qCADCD,CAAK,EAAA,CAAA,cAAG5C,EAAAA,mBAAI,KAAA,KAAA,KAAA,EAAA,EAAA,2EAK3ByB,EAAAA,WAYO7B,EAAA,OAAA,WAAAiC,EAAAA,eAAAC,EAAAA,mBAAA,CAAA,SAVO5B,EAAA,QAAA,CAAQ,CAAA,EAFtB,IAYO,CATHkC,EAAAA,YAQsBZ,EAAAA,MAAAsB,qBAAA,EAAA,CANjB,SAAU5C,EAAA,UAAQ,CACnB,QAAAyC,EAAAA,QAAA,CAIM,CANI,SAAAI,KAAQ,CAElB/C,EAAAA,mBAIM,MAJNgD,EAIMtB,EAAAA,gBADCqB,CAAQ,EAAA,CAAA,CAAA,0BAKvBtB,EAAAA,WASO7B,EAAA,OAAA,OAAAiC,EAAAA,eAAAC,EAAAA,mBAAA,CAAA,SAPO5B,EAAA,QAAA,CAAQ,CAAA,EAFtB,IASO,CALOA,EAAA,wBADVH,EAAAA,mBAKQ,QAAA,eAHA,OAAJ,IAAImB,EACJ,MAAM,WAAA,oBACHhB,EAAA,QAAQ,EAAA,GAAA","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"input-field.umd.cjs","sources":["../../../node_modules/.pnpm/@heroicons+vue@2.2.0_vue@3.5.27_typescript@5.9.3_/node_modules/@heroicons/vue/24/outline/esm/XMarkIcon.js","../src/InputField.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n return (_openBlock(), _createElementBlock(\"svg\", {\n xmlns: \"http://www.w3.org/2000/svg\",\n fill: \"none\",\n viewBox: \"0 0 24 24\",\n \"stroke-width\": \"1.5\",\n stroke: \"currentColor\",\n \"aria-hidden\": \"true\",\n \"data-slot\": \"icon\"\n }, [\n _createElementVNode(\"path\", {\n \"stroke-linecap\": \"round\",\n \"stroke-linejoin\": \"round\",\n d: \"M6 18 18 6M6 6l12 12\"\n })\n ]))\n}","<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { XMarkIcon } from '@heroicons/vue/24/outline';\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, computed, useTemplateRef, ref } from 'vue';\n\nconst props = withDefaults(defineProps<InputFieldProps<ModelValue,Value>>(), {\n formControlClass: 'form-control',\n labelClass: 'form-label',\n size: 'form-control-md',\n clearable: false\n});\n\ndefineOptions({\n inheritAttrs: false\n});\n\nconst input = ref<string>();\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 isInteractive = computed(() => !props.disabled && !props.readonly);\n\nconst canClear = computed(() => {\n return props.clearable && (!!input.value \|\| !!model.value) && isInteractive.value;\n});\n\nfunction clear() {\n if (!isInteractive.value) return;\n model.value = undefined;\n}\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 clearable?: boolean;\n}\n</script>\n\n<template>\n <div\n ref=\"wrapper\"\n class=\"input-field\"\n :class=\"[formGroupClasses, { 'has-clear-button': canClear }]\">\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\" v-bind=\"{ canClear, clear, isInteractive }\">\n <button\n v-if=\"canClear\"\n type=\"button\"\n class=\"input-field-close-button\"\n @click.stop=\"clear\">\n <XMarkIcon class=\"size-[1.25em]\" />\n </button>\n <Transition name=\"input-field-fade\" v-else>\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":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","props","__props","input","ref","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","listeners","useFormControl","isInteractive","computed","canClear","clear","activity","useTemplateRef","help","label","field","wrapper","__expose","_normalizeClass","_unref","_renderSlot","_toDisplayString","_hoisted_1","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","$event","_withDirectives","_mergeProps","_hoisted_3","_createVNode","XMarkIcon","_createBlock","_Transition","ActivityIndicator","$attrs","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5"],"mappings":"odAEe,SAASA,EAAOC,EAAMC,EAAQ,CAC3C,OAAQC,EAAAA,UAAU,EAAIC,EAAAA,mBAAoB,MAAO,CAC/C,MAAO,6BACP,KAAM,OACN,QAAS,YACT,eAAgB,MAChB,OAAQ,eACR,cAAe,OACf,YAAa,MACjB,EAAK,CACDC,EAAAA,mBAAoB,OAAQ,CAC1B,iBAAkB,QAClB,kBAAmB,QACnB,EAAG,sBACT,CAAK,CACL,CAAG,CACH,qmCCXA,MAAMC,EAAQC,EAWRC,EAAQC,EAAAA,IAAA,EACRC,EAAQC,EAAAA,SAAuBJ,EAAA,YAAC,EAIhCK,EAAOC,EAEP,CACF,kBAAAC,EACA,iBAAAC,EACA,UAAAC,CAAA,EACAC,EAAAA,eAA8F,CAAE,MAAAP,EAAO,MAAAJ,EAAO,KAAAM,EAAM,EAElHM,EAAgBC,EAAAA,SAAS,IAAM,CAACb,EAAM,UAAY,CAACA,EAAM,QAAQ,EAEjEc,EAAWD,EAAAA,SAAS,IACfb,EAAM,YAAc,CAAC,CAACE,EAAM,OAAS,CAAC,CAACE,EAAM,QAAUQ,EAAc,KAC/E,EAED,SAASG,GAAQ,CACRH,EAAc,QACnBR,EAAM,MAAQ,OAClB,CAEA,MAAMY,EAAWC,EAAAA,eAAuD,UAAU,EAC5EC,EAAOD,EAAAA,eAA4B,MAAM,EACzCE,EAAQF,EAAAA,eAAiC,OAAO,EAChDG,EAAQH,EAAAA,eAAiC,OAAO,EAChDI,EAAUJ,EAAAA,eAA+B,SAAS,EAExD,OAAAK,EAAa,CACT,SAAAN,EACA,KAAAE,EACA,MAAAE,EACA,MAAAD,EACA,QAAAE,EACA,MAAO,IAAMD,EAAM,OAAO,MAAA,EAC1B,KAAM,IAAMA,EAAM,OAAO,KAAA,CAAK,CACjC,wBAiBGtB,EAAAA,mBA6FM,MAAA,SA5FE,UAAJ,IAAIuB,EACJ,MAAKE,EAAAA,eAAA,CAAC,cAAa,CACVC,EAAAA,MAAAf,CAAA,sBAAwCK,EAAA,KAAA,CAAQ,CAAA,CAAA,CAAA,GACzDW,EAAAA,WAQO9B,oBARP,IAQO,CANOK,EAAM,qBADhBF,EAAAA,mBAMQ,QAAA,eAJA,QAAJ,IAAIqB,EACH,uBAAOlB,EAAA,UAAU,EACjB,IAAKuB,EAAAA,MAAAhB,CAAA,EAAkB,EAAA,EACrBkB,EAAAA,gBAAA1B,EAAM,KAAK,EAAA,GAAA2B,CAAA,iCAItB5B,EAAAA,mBAmCM,MAnCN6B,EAmCM,CAlCFH,EAAAA,WAaO9B,EAAA,OAAA,UAAAkC,EAAAA,eAAAC,EAAAA,mBAAA,CAAA,kBAXON,EAAAA,MAAAhB,CAAA,EAAiB,UAAEgB,EAAAA,MAAAd,CAAA,KAFjC,IAaO,CATOqB,EAAAA,OAAO,oBADjBjC,EAAAA,mBAKM,MAAA,OAHF,MAAM,0BACL,QAAKF,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAoC,GAAEZ,EAAA,OAAO,MAAA,EAAK,GACpBK,aAAoB9B,EAAA,OAAA,MAAA,CAAA,gCAExBsC,iBAAAlC,EAAAA,mBAGkD,QAHlDmC,aAGkD,SAF1C,QAAJ,IAAId,uCACKhB,EAAK,MAAA4B,EAAA,EACF,CAAA,GAAAR,EAAAA,MAAAhB,CAAA,KAAsBgB,EAAAA,MAAAd,CAAA,EAAS,EAAA,KAAA,EAAA,EAAA,kBADlCN,EAAA,KAAK,CAAA,KAItBL,EAAAA,mBAkBM,MAlBNoC,EAkBM,CAjBFV,EAAAA,WAgBO9B,oEAhByBmB,EAAA,MAAQ,MAAAC,EAAO,cAAEH,EAAA,SAAjD,IAgBO,CAdOE,EAAA,qBADVhB,EAAAA,mBAMS,SAAA,OAJL,KAAK,SACL,MAAM,2BACL,wBAAYiB,EAAK,CAAA,MAAA,CAAA,CAAA,GAClBqB,EAAAA,YAAmCZ,EAAAA,MAAAa,CAAA,EAAA,CAAxB,MAAM,gBAAe,CAAA,mBAEpCC,EAAAA,YAOaC,aAAA,OAPD,KAAK,kBAAA,qBACb,IAK4B,CAJlBvC,EAAM,UAAYC,EAAA,yBAD5BqC,EAAAA,YAK4Bd,QAAAgB,EAAAA,iBAAA,EAAA,CAHxB,IAAI,mBACA,WAAJ,IAAIxB,EACH,KAAMf,EAAA,UACN,KAAMA,EAAA,aAAA,sEAM3BwB,EAAAA,WAgBO9B,EAAA,OAAA,SAAAkC,EAAAA,eAAAC,qBAAA,CAAA,MAdO7B,EAAA,MAAK,OAAEA,EAAA,OAAM,GAAMwC,EAAAA,OAAO,GAAE,KAAQA,EAAAA,OAAO,QAFzD,IAgBO,CAZUxC,EAAA,OAASA,EAAA,sBADtBqC,EAAAA,YAYoBd,QAAAkB,EAAAA,iBAAA,EAAA,OAVf,GAAIzC,EAAA,GAEJ,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,OAAQA,EAAA,MAAA,GACT,QAAA0C,EAAAA,QAAA,CAIM,CARI,MAAAC,KAAK,CAIf7C,EAAAA,mBAIM,MAJN8C,EAIM,qCADCD,CAAK,EAAA,CAAA,cAAG7C,EAAAA,mBAAI,KAAA,KAAA,KAAA,EAAA,EAAA,2EAK3B0B,EAAAA,WAYO9B,EAAA,OAAA,WAAAkC,EAAAA,eAAAC,EAAAA,mBAAA,CAAA,SAVO7B,EAAA,QAAA,CAAQ,CAAA,EAFtB,IAYO,CATHmC,EAAAA,YAQsBZ,EAAAA,MAAAsB,qBAAA,EAAA,CANjB,SAAU7C,EAAA,UAAQ,CACnB,QAAA0C,EAAAA,QAAA,CAIM,CANI,SAAAI,KAAQ,CAElBhD,EAAAA,mBAIM,MAJNiD,EAIMtB,EAAAA,gBADCqB,CAAQ,EAAA,CAAA,CAAA,0BAKvBtB,EAAAA,WASO9B,EAAA,OAAA,OAAAkC,EAAAA,eAAAC,EAAAA,mBAAA,CAAA,SAPO7B,EAAA,QAAA,CAAQ,CAAA,EAFtB,IASO,CALOA,EAAA,wBADVH,EAAAA,mBAKQ,QAAA,eAHA,OAAJ,IAAIoB,EACJ,MAAM,WAAA,oBACHjB,EAAA,QAAQ,EAAA,GAAA","x_google_ignoreList":[0]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/input-field",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A Vue input field component.",
   "type": "module",
   "main": "./dist/input-field.umd.cjs",
@@ -45,8 +45,8 @@
   ],
   "peerDependencies": {
     "vue": "^3.3.4",
-    "@vue-interface/activity-indicator": "3.0.8",
-    "@vue-interface/form-control": "2.0.21"
+    "@vue-interface/form-control": "2.0.21",
+    "@vue-interface/activity-indicator": "3.0.8"
   },
   "scripts": {
     "dev": "vite",

package/src/InputField.vue CHANGED Viewed

@@ -3,7 +3,7 @@ import { XMarkIcon } from '@heroicons/vue/24/outline';
 import { ActivityIndicator } from '@vue-interface/activity-indicator';
 import type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';
 import { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';
-import { InputHTMLAttributes, computed, useTemplateRef } from 'vue';
+import { InputHTMLAttributes, computed, useTemplateRef, ref } from 'vue';
 const props = withDefaults(defineProps<InputFieldProps<ModelValue,Value>>(), {
     formControlClass: 'form-control',
@@ -16,6 +16,7 @@ defineOptions({
     inheritAttrs: false
 });
+const input = ref<string>();
 const model = defineModel<ModelValue>();
 defineSlots<FormControlSlots<InputFieldControlSizePrefix,ModelValue>>();
@@ -25,14 +26,13 @@ const emit = defineEmits<FormControlEvents>();
 const {
     controlAttributes,
     formGroupClasses,
-    isDirty,
     listeners
 } = useFormControl<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue|undefined, Value>({ model, props, emit });
 const isInteractive = computed(() => !props.disabled && !props.readonly);
 const canClear = computed(() => {
-    return props.clearable && isDirty.value && isInteractive.value;
+    return props.clearable && (!!input.value || !!model.value) && isInteractive.value;
 });
 function clear() {
@@ -102,7 +102,7 @@ export type InputFieldProps<ModelValue, Value> = FormControlProps<
             </slot>
             <div class="form-control-activity-indicator">
-                <slot name="activity" v-bind="{ canClear, clear, isDirty, isInteractive }">
+                <slot name="activity" v-bind="{ canClear, clear, isInteractive }">
                     <button
                         v-if="canClear"
                         type="button"