@evance/evance-ui 1.0.6 → 1.0.8

package/dist/esm/EvTextarea.vue_vue_type_script_setup_true_lang-C13_9fmh.mjs

@@ -0,0 +1,243 @@
+/*! Evance UI v1.0.8 | MIT License */
+import { defineComponent, useSlots, useAttrs, ref, computed, onUpdated, onMounted, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, renderSlot, createCommentVNode, createElementVNode, normalizeClass, withDirectives, withKeys, vModelText, Transition, nextTick } from "vue";
+import { c as makeInputAppearanceProps, d as InputAppearance, A as Appearance } from "./appearance-DyIRnZmX.mjs";
+import { p as propsFactory } from "./props-B_DkM75x.mjs";
+import { m as makeComponentProps } from "./component-Cl3SkL4K.mjs";
+import { m as makeFormFieldProps, u as useFormField, a as useAutofocus } from "./validation-DGVkgcMH.mjs";
+import { m as makeLabelProps, _ as _sfc_main$1 } from "./EvLabel.vue_vue_type_script_setup_true_lang-BmsOLq0C.mjs";
+import { s as splitInputAttrs } from "./helpers-CVFyfHL3.mjs";
+import { a as appearanceModifier } from "./modifiers-C2p5hdCc.mjs";
+import { C as CancelIcon } from "./CancelIcon-BTJevs6S.mjs";
+import { _ as _sfc_main$3 } from "./EvProgress.vue_vue_type_script_setup_true_lang-CfUpsiW_.mjs";
+import { _ as _sfc_main$2 } from "./EvIcon.vue_vue_type_script_setup_true_lang-DYiQ7prm.mjs";
+import "./EvIcon.vue_vue_type_style_index_0_lang-m-4HgkYd.mjs";
+import { _ as _sfc_main$4 } from "./EvErrors.vue_vue_type_script_setup_true_lang-Cu8UnqJ_.mjs";
+const makeEvTextareaProps = propsFactory(
+  {
+    autofocus: Boolean,
+    autoselect: Boolean,
+    autogrow: {
+      type: Boolean,
+      default: true
+    },
+    autosubmit: Function,
+    clearable: Boolean,
+    loading: Boolean,
+    placeholder: String,
+    ...makeLabelProps(),
+    ...makeFormFieldProps(),
+    ...makeInputAppearanceProps(),
+    ...makeComponentProps()
+  },
+  "EvTextarea"
+);
+const _hoisted_1 = {
+  key: 0,
+  class: "ev-textarea--label"
+};
+const _hoisted_2 = { class: "ev-textarea--input" };
+const _hoisted_3 = ["id", "name", "disabled", "readonly", "placeholder", "autofocus", "onKeyup"];
+const _hoisted_4 = {
+  key: 0,
+  class: "ev-textarea--clearable"
+};
+const _hoisted_5 = {
+  key: 0,
+  class: "ev-textarea--loader"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "ev-textarea--errors"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "EvTextarea",
+  props: {
+    ...makeEvTextareaProps()
+  },
+  emits: [
+    "click:clear",
+    "click:control",
+    "mousedown:control",
+    "update:focused",
+    "update:modelValue"
+  ],
+  setup(__props, { expose: __expose, emit }) {
+    const props = __props;
+    const slots = useSlots();
+    const attrs = useAttrs();
+    const containerRef = ref(null);
+    const inputRef = ref(null);
+    const [containerAttrs, inputAttrs] = splitInputAttrs(attrs);
+    const formField = useFormField(props);
+    const isClearable = computed(() => {
+      return props.clearable && !!formField.value;
+    });
+    function getInputElement() {
+      return inputRef.value;
+    }
+    function onClearableClick($event) {
+      var _a;
+      $event.stopPropagation();
+      nextTick(() => {
+        formField.value = null;
+        emit("click:clear", $event);
+      });
+      (_a = getInputElement()) == null ? void 0 : _a.focus();
+    }
+    function onClearableMousedown(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    function onFocus(e) {
+      var _a;
+      formField.focus(e);
+      if (props.autoselect) {
+        (_a = getInputElement()) == null ? void 0 : _a.select();
+      }
+    }
+    function onControlClick(e) {
+      onFocus();
+      emit("click:control", e);
+    }
+    function onControlMousedown(e) {
+      emit("mousedown:control", e);
+      if (e.target === inputRef.value) {
+        return;
+      }
+      onFocus();
+      e.preventDefault();
+    }
+    function onKeydown(e) {
+      resize();
+    }
+    function onKeyup(e) {
+      resize();
+    }
+    function onKeyupEnter(e) {
+      if (props.autosubmit) {
+        props.autosubmit();
+      }
+    }
+    function resize() {
+      if (!props.autogrow) {
+        return;
+      }
+      const field = getInputElement();
+      if (!field) {
+        return;
+      }
+      field.style.height = "auto";
+      field.style.height = field.scrollHeight + 1 + "px";
+    }
+    onUpdated(() => {
+      resize();
+    });
+    onMounted(() => {
+      resize();
+    });
+    const vAutofocus = useAutofocus(props);
+    __expose({
+      input: inputRef,
+      focus: () => {
+        var _a;
+        (_a = getInputElement()) == null ? void 0 : _a.focus();
+      },
+      ...formField.expose()
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: ["ev-textarea", [
+          {
+            "is-loading": _ctx.loading,
+            "is-autogrow": _ctx.autogrow
+          },
+          unref(formField).classes,
+          props.class
+        ]],
+        style: props.style,
+        role: "textbox"
+      }, unref(containerAttrs)), [
+        props.label || props.hint || unref(slots).label ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createVNode(unref(_sfc_main$1), {
+            for: unref(formField).id,
+            title: props.label,
+            hint: props.hint
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "label")
+            ]),
+            _: 3
+          }, 8, ["for", "title", "hint"])
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass([
+            "ev-textarea--control",
+            unref(appearanceModifier)(props.appearance, [unref(InputAppearance).default])
+          ]),
+          onClick: onControlClick,
+          onMousedown: onControlMousedown
+        }, [
+          createElementVNode("div", _hoisted_2, [
+            withDirectives(createElementVNode("textarea", mergeProps({
+              id: unref(formField).id,
+              ref_key: "inputRef",
+              ref: inputRef,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(formField).value = $event),
+              name: unref(formField).name,
+              disabled: unref(formField).isDisabled,
+              readonly: unref(formField).isReadonly,
+              placeholder: _ctx.placeholder,
+              autofocus: _ctx.autofocus
+            }, unref(inputAttrs), {
+              onFocus,
+              onBlur: _cache[1] || (_cache[1] = //@ts-ignore
+              (...args) => unref(formField).blur && unref(formField).blur(...args)),
+              onKeydown,
+              onKeyup: [
+                onKeyup,
+                withKeys(onKeyupEnter, ["enter"])
+              ]
+            }), null, 16, _hoisted_3), [
+              [vModelText, unref(formField).value],
+              [unref(vAutofocus)]
+            ])
+          ]),
+          createVNode(Transition, { name: "slide-fade" }, {
+            default: withCtx(() => [
+              isClearable.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                createVNode(unref(_sfc_main$2), {
+                  glyph: unref(CancelIcon),
+                  onClick: onClearableClick,
+                  onMousedown: onClearableMousedown
+                }, null, 8, ["glyph"])
+              ])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }),
+          _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            createVNode(unref(_sfc_main$3), {
+              indeterminate: "",
+              appearance: unref(formField).isFocused ? unref(Appearance).notice : unref(Appearance).default,
+              size: 2
+            }, null, 8, ["appearance"])
+          ])) : createCommentVNode("", true)
+        ], 34),
+        unref(formField).isShowErrorMessages ? (openBlock(), createElementBlock("div", _hoisted_6, [
+          createVNode(unref(_sfc_main$4), {
+            messages: unref(formField).errorMessages
+          }, null, 8, ["messages"])
+        ])) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as _,
+  makeEvTextareaProps as m
+};
+//# sourceMappingURL=EvTextarea.vue_vue_type_script_setup_true_lang-C13_9fmh.mjs.map

package/dist/esm/EvTextarea.vue_vue_type_script_setup_true_lang-C13_9fmh.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvTextarea.vue_vue_type_script_setup_true_lang-C13_9fmh.mjs","sources":["../../src/components/EvTextarea/EvTextarea.ts","../../src/components/EvTextarea/EvTextarea.vue"],"sourcesContent":["import { makeInputAppearanceProps, propsFactory } from \"@/util\";\nimport { makeComponentProps } from \"@/composables/component\";\nimport { makeFormFieldProps } from \"@/composables/validation\";\nimport { makeLabelProps } from \"@/components/EvLabel\";\n\nexport const makeEvTextareaProps = propsFactory(\n    {\n        autofocus: Boolean,\n        autoselect: Boolean,\n        autogrow: {\n            type: Boolean,\n            default: true,\n        },\n        autosubmit: Function,\n        clearable: Boolean,\n        loading: Boolean,\n        placeholder: String,\n\n        ...makeLabelProps(),\n        ...makeFormFieldProps(),\n        ...makeInputAppearanceProps(),\n        ...makeComponentProps(),\n    },\n    \"EvTextarea\",\n);\n","<script setup lang=\"ts\">\n/**\n * # `<ev-textarea>`\n */\nimport \"./EvTextarea.scss\";\nimport { makeEvTextareaProps } from \"./EvTextarea\";\nimport { computed, nextTick, ref, useAttrs, onUpdated, onMounted } from \"vue\";\nimport {\n    Appearance,\n    appearanceModifier,\n    InputAppearance,\n    splitInputAttrs,\n} from \"@/util\";\nimport { useAutofocus } from \"@/composables/focus\";\nimport { CancelIcon } from \"@/icons\";\nimport { EvProgress } from \"@/components/EvProgress\";\nimport { EvIcon } from \"@/components/EvIcon\";\nimport { EvErrors } from \"@/components/EvErrors\";\nimport { EvLabel } from \"@/components/EvLabel\";\nimport { useFormField } from \"@/composables/validation\";\n\n/**\n * We want to pass attributes not defined as 'props'\n * to the `<input>` field, so we need to turn off `inheritAttrs`.\n */\ndefineOptions({\n    inheritAttrs: false,\n});\n\nconst props = defineProps({\n    ...makeEvTextareaProps(),\n});\nconst slots = defineSlots<{\n    label(): never;\n}>();\n\n// Emit\nconst emit = defineEmits([\n    \"click:clear\",\n    \"click:control\",\n    \"mousedown:control\",\n    \"update:focused\",\n    \"update:modelValue\",\n]);\n\nconst attrs = useAttrs();\nconst containerRef = ref<HTMLElement | null>(null);\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst [containerAttrs, inputAttrs] = splitInputAttrs(attrs);\nconst formField = useFormField(props);\nconst isClearable = computed(() => {\n    return props.clearable && !!formField.value;\n});\n\n/**\n * ## Get Input Element\n */\nfunction getInputElement(): HTMLInputElement | null {\n    return inputRef.value;\n}\n\n/**\n * ## On Clearable Click\n * @param $event\n */\nfunction onClearableClick($event: MouseEvent) {\n    $event.stopPropagation();\n    nextTick(() => {\n        formField.value = null;\n        emit(\"click:clear\", $event);\n    });\n    getInputElement()?.focus();\n}\n\n/**\n * ## On Clearable Mousedown\n * @param e\n */\nfunction onClearableMousedown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n}\n\n/**\n * ## On Focus\n * @param e\n */\nfunction onFocus(e?: Event) {\n    formField.focus(e);\n    if (props.autoselect) {\n        getInputElement()?.select();\n    }\n}\n\n/**\n * ## On Control Click\n *\n * When the user clicks on the textarea.\n *\n * @param e\n */\nfunction onControlClick(e: MouseEvent) {\n    onFocus();\n    emit(\"click:control\", e);\n}\n\n/**\n * ## On Control Mousedown\n *\n * When the mousedown is triggered on the textarea.\n *\n * @param e\n */\nfunction onControlMousedown(e: MouseEvent) {\n    emit(\"mousedown:control\", e);\n    if (e.target === inputRef.value) {\n        return;\n    }\n    onFocus();\n    e.preventDefault();\n}\n\n/**\n * ## On Keydown\n * Attempt to resize the textarea on key down.\n * @param e\n */\nfunction onKeydown(e: Event) {\n    resize();\n}\n\n/**\n * ## On Keyup\n * Attempt to resize the textarea on key up.\n * @param e\n */\nfunction onKeyup(e: Event) {\n    resize();\n}\n\n/**\n * ## On Enter\n * When the user presses the Enter key, we can call an `autosubmit` function (if supplied).\n * @param e\n */\nfunction onKeyupEnter(e: Event) {\n    // Use the autosubmit callback if present\n    if (props.autosubmit) {\n        props.autosubmit();\n    }\n}\n\n/**\n * ## Resize\n * If the component is set to `autogrow` then we resize the textarea appropriately\n * so that all the text is visible.\n */\nfunction resize() {\n    if (!props.autogrow) {\n        return;\n    }\n    const field = getInputElement();\n    if (!field) {\n        return;\n    }\n    field.style.height = \"auto\";\n    field.style.height = field.scrollHeight + 1 + \"px\";\n}\n\n/**\n * ## On Update\n * Ensures the textarea is resized when the component updates.\n */\nonUpdated(() => {\n    resize();\n});\n\n/**\n * ## On Mounted\n * Ensures the textarea is resized when the component loads.\n */\nonMounted(() => {\n    resize();\n});\n\n/**\n * ## Directive `v-autofocus`\n */\nconst vAutofocus = useAutofocus(props);\n\n/**\n * ## Expose stuff\n */\ndefineExpose({\n    input: inputRef,\n    focus: () => {\n        getInputElement()?.focus();\n    },\n    ...formField.expose(),\n});\n</script>\n\n<template>\n    <div\n        ref=\"containerRef\"\n        class=\"ev-textarea\"\n        :class=\"[\n            {\n                'is-loading': loading,\n                'is-autogrow': autogrow,\n            },\n            formField.classes,\n            props.class,\n        ]\"\n        :style=\"props.style\"\n        role=\"textbox\"\n        v-bind=\"containerAttrs\">\n        <div v-if=\"props.label || props.hint || slots.label\" class=\"ev-textarea--label\">\n            <ev-label\n                :for=\"formField.id\"\n                :title=\"props.label\"\n                :hint=\"props.hint\">\n                <slot name=\"label\" />\n            </ev-label>\n        </div>\n\n        <div\n            :class=\"[\n                'ev-textarea--control',\n                appearanceModifier(props.appearance, [InputAppearance.default]),\n            ]\"\n            @click=\"onControlClick\"\n            @mousedown=\"onControlMousedown\">\n            <div class=\"ev-textarea--input\">\n                <textarea\n                    :id=\"formField.id\"\n                    ref=\"inputRef\"\n                    v-model=\"formField.value\"\n                    v-autofocus\n                    :name=\"formField.name\"\n                    :disabled=\"formField.isDisabled\"\n                    :readonly=\"formField.isReadonly\"\n                    :placeholder=\"placeholder\"\n                    :autofocus=\"autofocus\"\n                    v-bind=\"inputAttrs\"\n                    @focus=\"onFocus\"\n                    @blur=\"formField.blur\"\n                    @keydown=\"onKeydown\"\n                    @keyup=\"onKeyup\"\n                    @keyup.enter=\"onKeyupEnter\"></textarea>\n            </div>\n            <transition name=\"slide-fade\">\n                <div v-if=\"isClearable\" class=\"ev-textarea--clearable\">\n                    <ev-icon\n                        :glyph=\"CancelIcon\"\n                        @click=\"onClearableClick\"\n                        @mousedown=\"onClearableMousedown\" />\n                </div>\n            </transition>\n            <div v-if=\"loading\" class=\"ev-textarea--loader\">\n                <ev-progress\n                    indeterminate\n                    :appearance=\"\n                        formField.isFocused\n                            ? Appearance.notice\n                            : Appearance.default\n                    \"\n                    :size=\"2\" />\n            </div>\n        </div>\n\n        <div v-if=\"formField.isShowErrorMessages\" class=\"ev-textarea--errors\">\n            <ev-errors :messages=\"formField.errorMessages\" />\n        </div>\n    </div>\n</template>\n"],"names":["_useSlots"],"mappings":";;;;;;;;;;;;;;AAKO,MAAM,sBAAsB;AAAA,EAC/B;AAAA,IACI,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACb;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,aAAa;AAAA,IAEb,GAAG,eAAe;AAAA,IAClB,GAAG,mBAAmB;AAAA,IACtB,GAAG,yBAAyB;AAAA,IAC5B,GAAG,mBAAmB;AAAA,EAC1B;AAAA,EACA;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACQA,UAAM,QAAQA;AAad,UAAM,QAAQ;AACR,UAAA,eAAe,IAAwB,IAAI;AAC3C,UAAA,WAAW,IAA6B,IAAI;AAClD,UAAM,CAAC,gBAAgB,UAAU,IAAI,gBAAgB,KAAK;AACpD,UAAA,YAAY,aAAa,KAAK;AAC9B,UAAA,cAAc,SAAS,MAAM;AAC/B,aAAO,MAAM,aAAa,CAAC,CAAC,UAAU;AAAA,IAAA,CACzC;AAKD,aAAS,kBAA2C;AAChD,aAAO,SAAS;AAAA,IACpB;AAMA,aAAS,iBAAiB,QAAoB;;AAC1C,aAAO,gBAAgB;AACvB,eAAS,MAAM;AACX,kBAAU,QAAQ;AAClB,aAAK,eAAe,MAAM;AAAA,MAAA,CAC7B;AACD,4BAAA,MAAA,mBAAmB;AAAA,IACvB;AAMA,aAAS,qBAAqB,GAAe;AACzC,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IACtB;AAMA,aAAS,QAAQ,GAAW;;AACxB,gBAAU,MAAM,CAAC;AACjB,UAAI,MAAM,YAAY;AAClB,8BAAA,MAAA,mBAAmB;AAAA,MACvB;AAAA,IACJ;AASA,aAAS,eAAe,GAAe;AAC3B;AACR,WAAK,iBAAiB,CAAC;AAAA,IAC3B;AASA,aAAS,mBAAmB,GAAe;AACvC,WAAK,qBAAqB,CAAC;AACvB,UAAA,EAAE,WAAW,SAAS,OAAO;AAC7B;AAAA,MACJ;AACQ;AACR,QAAE,eAAe;AAAA,IACrB;AAOA,aAAS,UAAU,GAAU;AAClB;IACX;AAOA,aAAS,QAAQ,GAAU;AAChB;IACX;AAOA,aAAS,aAAa,GAAU;AAE5B,UAAI,MAAM,YAAY;AAClB,cAAM,WAAW;AAAA,MACrB;AAAA,IACJ;AAOA,aAAS,SAAS;AACV,UAAA,CAAC,MAAM,UAAU;AACjB;AAAA,MACJ;AACA,YAAM,QAAQ;AACd,UAAI,CAAC,OAAO;AACR;AAAA,MACJ;AACA,YAAM,MAAM,SAAS;AACrB,YAAM,MAAM,SAAS,MAAM,eAAe,IAAI;AAAA,IAClD;AAMA,cAAU,MAAM;AACL;IAAA,CACV;AAMD,cAAU,MAAM;AACL;IAAA,CACV;AAKK,UAAA,aAAa,aAAa,KAAK;AAKxB,aAAA;AAAA,MACT,OAAO;AAAA,MACP,OAAO,MAAM;;AACT,8BAAA,MAAA,mBAAmB;AAAA,MACvB;AAAA,MACA,GAAG,UAAU,OAAO;AAAA,IAAA,CACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/EvTextfield.mjs

@@ -1,5 +1,5 @@
-/*! Evance UI v1.0.5 | MIT License */
-import { _, m } from "./EvTextfield.vue_vue_type_script_setup_true_lang-32VdcrYh.mjs";
+/*! Evance UI v1.0.8 | MIT License */
+import { _, m } from "./EvTextfield.vue_vue_type_script_setup_true_lang-56Y5Jf-_.mjs";
 export {
   _ as EvTextfield,
   m as makeEvTextfieldProps

package/dist/esm/EvTextfield.vue_vue_type_script_setup_true_lang-56Y5Jf-_.mjs

@@ -0,0 +1,292 @@
+/*! Evance UI v1.0.8 | MIT License */
+import { defineComponent, useSlots, useAttrs, ref, computed, resolveDirective, withDirectives, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, renderSlot, createCommentVNode, createElementVNode, normalizeClass, Transition, createBlock, createTextVNode, toDisplayString, vModelDynamic, nextTick } from "vue";
+import { e as makeTextAlignProps, c as makeInputAppearanceProps, f as makeInputSizeProps, d as InputAppearance, I as InputSize, T as TextAlign, A as Appearance } from "./appearance-DyIRnZmX.mjs";
+import { p as propsFactory } from "./props-B_DkM75x.mjs";
+import { I as IconProp } from "./icons-CPwjz9RV.mjs";
+import { m as makeFormFieldProps, u as useFormField, a as useAutofocus } from "./validation-DGVkgcMH.mjs";
+import { m as makeComponentProps } from "./component-Cl3SkL4K.mjs";
+import { m as makeLabelProps, _ as _sfc_main$1 } from "./EvLabel.vue_vue_type_script_setup_true_lang-BmsOLq0C.mjs";
+import { u as useIcon, _ as _sfc_main$2 } from "./EvIcon.vue_vue_type_script_setup_true_lang-DYiQ7prm.mjs";
+import "./EvIcon.vue_vue_type_style_index_0_lang-m-4HgkYd.mjs";
+import { C as CancelIcon } from "./CancelIcon-BTJevs6S.mjs";
+import { s as splitInputAttrs } from "./helpers-CVFyfHL3.mjs";
+import { a as appearanceModifier, s as sizeModifier, m as makeClassName } from "./modifiers-C2p5hdCc.mjs";
+import { _ as _sfc_main$5 } from "./EvErrors.vue_vue_type_script_setup_true_lang-Cu8UnqJ_.mjs";
+import { _ as _sfc_main$4 } from "./EvProgress.vue_vue_type_script_setup_true_lang-CfUpsiW_.mjs";
+import { _ as _sfc_main$3 } from "./EvProgressCircular.vue_vue_type_script_setup_true_lang-B8OclrDy.mjs";
+const makeEvTextfieldProps = propsFactory(
+  {
+    autofocus: Boolean,
+    autoselect: Boolean,
+    clearable: Boolean,
+    iconStart: IconProp,
+    iconEnd: IconProp,
+    loading: Boolean,
+    placeholder: String,
+    prefix: String,
+    role: String,
+    rounded: Boolean,
+    suffix: String,
+    type: {
+      type: String,
+      default: "text"
+    },
+    monospace: Boolean,
+    ...makeLabelProps(),
+    ...makeTextAlignProps(),
+    ...makeFormFieldProps(),
+    ...makeInputAppearanceProps(),
+    ...makeInputSizeProps(),
+    ...makeComponentProps()
+  },
+  "EvTextfield"
+);
+const _hoisted_1 = {
+  key: 0,
+  class: "ev-textfield--label"
+};
+const _hoisted_2 = ["role"];
+const _hoisted_3 = {
+  key: 0,
+  class: "ev-textfield--icon-start"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "ev-textfield--prefix"
+};
+const _hoisted_5 = {
+  class: "ev-textfield--input",
+  "data-no-activator": ""
+};
+const _hoisted_6 = ["id", "type", "name", "disabled", "readonly", "autofocus", "placeholder"];
+const _hoisted_7 = {
+  key: 0,
+  class: "ev-textfield--clearable"
+};
+const _hoisted_8 = {
+  key: 2,
+  class: "ev-textfield--suffix"
+};
+const _hoisted_9 = {
+  key: 3,
+  class: "ev-textfield--icon-end"
+};
+const _hoisted_10 = {
+  key: 4,
+  class: "ev-textfield--loader"
+};
+const _hoisted_11 = {
+  key: 1,
+  class: "ev-textfield--errors"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "EvTextfield",
+  props: {
+    ...makeEvTextfieldProps()
+  },
+  emits: [
+    "click:clear",
+    "click:control",
+    "click:outside",
+    "mousedown:control",
+    "update:focused",
+    "update:modelValue"
+  ],
+  setup(__props, { expose: __expose, emit }) {
+    const props = __props;
+    const slots = useSlots();
+    const attrs = useAttrs();
+    const containerRef = ref(null);
+    const inputRef = ref(null);
+    const [containerAttrs, inputAttrs] = splitInputAttrs(attrs);
+    const formField = useFormField(props);
+    const isClearable = computed(() => {
+      return props.clearable && !!formField.value;
+    });
+    const iconStart = useIcon(props, "iconStart");
+    const iconEnd = useIcon(props, "iconEnd");
+    function getInputElement() {
+      return inputRef.value;
+    }
+    function onClearableClick($event) {
+      var _a;
+      $event.stopPropagation();
+      nextTick(() => {
+        formField.value = null;
+        emit("click:clear", $event);
+      });
+      if (!props.readonly) {
+        (_a = getInputElement()) == null ? void 0 : _a.focus();
+      }
+    }
+    function onClearableMousedown(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    function onFocus(e) {
+      var _a;
+      formField.focus(e);
+      if (props.autoselect) {
+        (_a = getInputElement()) == null ? void 0 : _a.select();
+      }
+    }
+    function onControlClick(e) {
+      var _a;
+      (_a = inputRef.value) == null ? void 0 : _a.focus(e);
+      emit("click:control", e);
+    }
+    function onControlMousedown(e) {
+      emit("mousedown:control", e);
+      if (e.target === inputRef.value) {
+        return;
+      }
+      onFocus();
+      e.preventDefault();
+    }
+    const vAutofocus = useAutofocus(props);
+    __expose({
+      input: inputRef,
+      focus: () => {
+        var _a;
+        (_a = getInputElement()) == null ? void 0 : _a.focus();
+      },
+      ...formField.expose()
+    });
+    function onClickOutside(e) {
+      emit("click:outside");
+    }
+    return (_ctx, _cache) => {
+      const _directive_click_outside = resolveDirective("click-outside");
+      return withDirectives((openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: [
+          "ev-textfield",
+          {
+            "is-loading": props.loading
+          },
+          unref(formField).classes,
+          props.class
+        ],
+        style: props.style
+      }, unref(containerAttrs)), [
+        props.label || unref(slots).label || props.hint ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createVNode(unref(_sfc_main$1), {
+            for: unref(formField).id,
+            title: props.label,
+            hint: props.hint
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "label")
+            ]),
+            _: 3
+          }, 8, ["for", "title", "hint"])
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass([
+            "ev-textfield--control",
+            {
+              "is-rounded": props.rounded,
+              "is-monospace": !!props.monospace
+            },
+            unref(appearanceModifier)(props.appearance, [unref(InputAppearance).default]),
+            unref(sizeModifier)(props.size, [unref(InputSize).default]),
+            unref(makeClassName)(props.align, "is-align", [unref(TextAlign).default])
+          ]),
+          role: props.role,
+          onClick: onControlClick,
+          onMousedown: onControlMousedown
+        }, [
+          unref(iconStart) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            createVNode(Transition, {
+              name: "fade-in-out",
+              mode: "out-in"
+            }, {
+              default: withCtx(() => [
+                !props.loading ? (openBlock(), createBlock(unref(_sfc_main$2), {
+                  key: 0,
+                  glyph: unref(iconStart)
+                }, null, 8, ["glyph"])) : (openBlock(), createBlock(unref(_sfc_main$3), {
+                  key: 1,
+                  indeterminate: "",
+                  appearance: unref(formField).isFocused ? unref(Appearance).notice : unref(Appearance).default
+                }, null, 8, ["appearance"]))
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true),
+          props.prefix || unref(slots).prefix ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            renderSlot(_ctx.$slots, "prefix", {}, () => [
+              createTextVNode(toDisplayString(props.prefix), 1)
+            ])
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_5, [
+            renderSlot(_ctx.$slots, "default"),
+            withDirectives(createElementVNode("input", mergeProps({
+              id: unref(formField).id,
+              ref_key: "inputRef",
+              ref: inputRef,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(formField).value = $event),
+              class: "ev-textfield--input-native",
+              type: props.type,
+              name: unref(formField).name,
+              disabled: unref(formField).isDisabled,
+              readonly: unref(formField).isReadonly,
+              autofocus: props.autofocus,
+              placeholder: props.placeholder
+            }, unref(inputAttrs), {
+              onFocus,
+              onBlur: _cache[1] || (_cache[1] = //@ts-ignore
+              (...args) => unref(formField).blur && unref(formField).blur(...args))
+            }), null, 16, _hoisted_6), [
+              [vModelDynamic, unref(formField).value],
+              [unref(vAutofocus)]
+            ])
+          ]),
+          createVNode(Transition, { name: "slide-fade" }, {
+            default: withCtx(() => [
+              isClearable.value ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                createVNode(unref(_sfc_main$2), {
+                  glyph: unref(CancelIcon),
+                  onClick: onClearableClick,
+                  onMousedown: onClearableMousedown
+                }, null, 8, ["glyph"])
+              ])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }),
+          props.suffix || unref(slots).suffix ? (openBlock(), createElementBlock("div", _hoisted_8, [
+            renderSlot(_ctx.$slots, "suffix", {}, () => [
+              createTextVNode(toDisplayString(props.suffix), 1)
+            ])
+          ])) : createCommentVNode("", true),
+          unref(iconEnd) ? (openBlock(), createElementBlock("div", _hoisted_9, [
+            createVNode(unref(_sfc_main$2), { glyph: unref(iconEnd) }, null, 8, ["glyph"])
+          ])) : createCommentVNode("", true),
+          props.loading && !props.iconStart ? (openBlock(), createElementBlock("div", _hoisted_10, [
+            createVNode(unref(_sfc_main$4), {
+              indeterminate: "",
+              appearance: unref(formField).isFocused ? unref(Appearance).notice : unref(Appearance).default,
+              size: 2
+            }, null, 8, ["appearance"])
+          ])) : createCommentVNode("", true)
+        ], 42, _hoisted_2),
+        unref(formField).isShowErrorMessages ? (openBlock(), createElementBlock("div", _hoisted_11, [
+          createVNode(unref(_sfc_main$5), {
+            messages: unref(formField).errorMessages
+          }, null, 8, ["messages"])
+        ])) : createCommentVNode("", true)
+      ], 16)), [
+        [_directive_click_outside, onClickOutside]
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _,
+  makeEvTextfieldProps as m
+};
+//# sourceMappingURL=EvTextfield.vue_vue_type_script_setup_true_lang-56Y5Jf-_.mjs.map

package/dist/esm/EvTextfield.vue_vue_type_script_setup_true_lang-56Y5Jf-_.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvTextfield.vue_vue_type_script_setup_true_lang-56Y5Jf-_.mjs","sources":["../../src/components/EvTextfield/EvTextfield.ts","../../src/components/EvTextfield/EvTextfield.vue"],"sourcesContent":["import {\n    makeInputAppearanceProps,\n    makeInputSizeProps,\n    makeTextAlignProps,\n    propsFactory,\n} from \"@/util\";\nimport { IconProp } from \"@/composables/icons\";\nimport { makeFormFieldProps } from \"@/composables/validation\";\nimport { makeComponentProps } from \"@/composables/component\";\nimport { makeLabelProps } from \"@/components/EvLabel\";\n\n/**\n * # Make EvTextfield Props\n */\nexport const makeEvTextfieldProps = propsFactory(\n    {\n        autofocus: Boolean,\n        autoselect: Boolean,\n        clearable: Boolean,\n        iconStart: IconProp,\n        iconEnd: IconProp,\n        loading: Boolean,\n        placeholder: String,\n        prefix: String,\n        role: String,\n        rounded: Boolean,\n        suffix: String,\n        type: {\n            type: String,\n            default: \"text\",\n        },\n        monospace: Boolean,\n\n        ...makeLabelProps(),\n        ...makeTextAlignProps(),\n        ...makeFormFieldProps(),\n        ...makeInputAppearanceProps(),\n        ...makeInputSizeProps(),\n        ...makeComponentProps(),\n    },\n    \"EvTextfield\",\n);\n","<script setup lang=\"ts\">\n/**\n * # `<ev-textfield>`\n */\nimport \"./EvTextfield.scss\";\nimport { makeEvTextfieldProps } from \"./EvTextfield\";\nimport { computed, nextTick, ref, useAttrs } from \"vue\";\nimport { EvIcon, useIcon } from \"@/components/EvIcon\";\nimport { CancelIcon } from \"@/icons\";\nimport {\n    Appearance,\n    appearanceModifier,\n    InputAppearance,\n    InputSize,\n    makeClassName,\n    sizeModifier,\n    splitInputAttrs,\n    TextAlign,\n} from \"@/util\";\nimport { useAutofocus } from \"@/composables/focus\";\nimport { EvLabel } from \"@/components/EvLabel\";\nimport { EvErrors } from \"@/components/EvErrors\";\nimport { EvProgress } from \"@/components/EvProgress\";\nimport { EvProgressCircular } from \"@/components/EvProgressCircular\";\nimport { useFormField } from \"@/composables/validation\";\n\n/**\n * We want to pass attributes not defined as 'props'\n * to the `<input>` field, so we need to turn off `inheritAttrs`.\n */\ndefineOptions({\n    inheritAttrs: false,\n});\n\n// Props & slots\nconst props = defineProps({\n    ...makeEvTextfieldProps(),\n});\nconst slots = defineSlots<{\n    label(): never;\n    prefix(): never;\n    default(): never;\n    suffix(): never;\n}>();\n\n// Emit\nconst emit = defineEmits([\n    \"click:clear\",\n    \"click:control\",\n    \"click:outside\",\n    \"mousedown:control\",\n    \"update:focused\",\n    \"update:modelValue\",\n]);\n\nconst attrs = useAttrs();\nconst containerRef = ref<HTMLElement | null>(null);\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst [containerAttrs, inputAttrs] = splitInputAttrs(attrs);\nconst formField = useFormField(props);\nconst isClearable = computed(() => {\n    return props.clearable && !!formField.value;\n});\nconst iconStart = useIcon(props, \"iconStart\");\nconst iconEnd = useIcon(props, \"iconEnd\");\n\n/**\n * ## Get Input Element\n */\nfunction getInputElement(): HTMLInputElement | null {\n    return inputRef.value;\n}\n\n/**\n * ## On Clearable Click\n * @param $event\n */\nfunction onClearableClick($event: MouseEvent) {\n    $event.stopPropagation();\n    nextTick(() => {\n        formField.value = null;\n        emit(\"click:clear\", $event);\n    });\n    if (!props.readonly) {\n        getInputElement()?.focus();\n    }\n}\n\n/**\n * ## On Clearable Mousedown\n * @param e\n */\nfunction onClearableMousedown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n}\n\n/**\n * ## On Focus\n * @param e\n */\nfunction onFocus(e?: Event) {\n    formField.focus(e);\n    if (props.autoselect) {\n        getInputElement()?.select();\n    }\n}\n\n/**\n * ## On Control Click\n *\n * When the user clicks on the textfield.\n *\n * @param e\n */\nfunction onControlClick(e: MouseEvent) {\n    inputRef.value?.focus(e as FocusOptions);\n    emit(\"click:control\", e);\n}\n\n/**\n * ## On Control Mousedown\n *\n * When the mousedown is triggered on the textfield.\n *\n * @param e\n */\nfunction onControlMousedown(e: MouseEvent) {\n    emit(\"mousedown:control\", e);\n    if (e.target === inputRef.value) {\n        return;\n    }\n    onFocus();\n    e.preventDefault();\n}\n\n/**\n * ## Directive `v-autofocus`\n */\nconst vAutofocus = useAutofocus(props);\n\n/**\n * ## Expose stuff\n */\ndefineExpose({\n    input: inputRef,\n    focus: () => {\n        getInputElement()?.focus();\n    },\n    ...formField.expose(),\n});\n\nfunction onClickOutside(e: MouseEvent) {\n    emit(\"click:outside\");\n}\n</script>\n\n<template>\n    <div\n        ref=\"containerRef\"\n        v-click-outside=\"onClickOutside\"\n        :class=\"[\n            'ev-textfield',\n            {\n                'is-loading': props.loading,\n            },\n            formField.classes,\n            props.class,\n        ]\"\n        :style=\"props.style\"\n        v-bind=\"containerAttrs\">\n        <div\n            v-if=\"props.label || slots.label || props.hint\"\n            class=\"ev-textfield--label\">\n            <ev-label\n                :for=\"formField.id\"\n                :title=\"props.label\"\n                :hint=\"props.hint\">\n                <slot name=\"label\" />\n            </ev-label>\n        </div>\n\n        <div\n            :class=\"[\n                'ev-textfield--control',\n                {\n                    'is-rounded': props.rounded,\n                    'is-monospace': !!props.monospace,\n                },\n                appearanceModifier(props.appearance, [InputAppearance.default]),\n                sizeModifier(props.size, [InputSize.default]),\n                makeClassName(props.align, 'is-align', [TextAlign.default]),\n            ]\"\n            :role=\"props.role\"\n            @click=\"onControlClick\"\n            @mousedown=\"onControlMousedown\">\n            <div v-if=\"iconStart\" class=\"ev-textfield--icon-start\">\n                <transition name=\"fade-in-out\" mode=\"out-in\">\n                    <ev-icon v-if=\"!props.loading\" :glyph=\"iconStart\" />\n                    <ev-progress-circular\n                        v-else\n                        indeterminate\n                        :appearance=\"\n                            formField.isFocused\n                                ? Appearance.notice\n                                : Appearance.default\n                        \" />\n                </transition>\n            </div>\n            <div\n                v-if=\"props.prefix || slots.prefix\"\n                class=\"ev-textfield--prefix\">\n                <slot name=\"prefix\">{{ props.prefix }}</slot>\n            </div>\n            <div class=\"ev-textfield--input\" data-no-activator>\n                <slot name=\"default\" />\n                <input\n                    :id=\"formField.id\"\n                    ref=\"inputRef\"\n                    v-model=\"formField.value\"\n                    v-autofocus\n                    class=\"ev-textfield--input-native\"\n                    :type=\"props.type\"\n                    :name=\"formField.name\"\n                    :disabled=\"formField.isDisabled\"\n                    :readonly=\"formField.isReadonly\"\n                    :autofocus=\"props.autofocus\"\n                    :placeholder=\"props.placeholder\"\n                    v-bind=\"inputAttrs\"\n                    @focus=\"onFocus\"\n                    @blur=\"formField.blur\" />\n            </div>\n            <transition name=\"slide-fade\">\n                <div v-if=\"isClearable\" class=\"ev-textfield--clearable\">\n                    <ev-icon\n                        :glyph=\"CancelIcon\"\n                        @click=\"onClearableClick\"\n                        @mousedown=\"onClearableMousedown\" />\n                </div>\n            </transition>\n            <div\n                v-if=\"props.suffix || slots.suffix\"\n                class=\"ev-textfield--suffix\">\n                <slot name=\"suffix\">{{ props.suffix }}</slot>\n            </div>\n            <div v-if=\"iconEnd\" class=\"ev-textfield--icon-end\">\n                <ev-icon :glyph=\"iconEnd\" />\n            </div>\n            <div\n                v-if=\"props.loading && !props.iconStart\"\n                class=\"ev-textfield--loader\">\n                <ev-progress\n                    indeterminate\n                    :appearance=\"\n                        formField.isFocused\n                            ? Appearance.notice\n                            : Appearance.default\n                    \"\n                    :size=\"2\" />\n            </div>\n        </div>\n\n        <div v-if=\"formField.isShowErrorMessages\" class=\"ev-textfield--errors\">\n            <ev-errors :messages=\"formField.errorMessages\" />\n        </div>\n    </div>\n</template>\n"],"names":["_useSlots"],"mappings":";;;;;;;;;;;;;;;;AAcO,MAAM,uBAAuB;AAAA,EAChC;AAAA,IACI,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS;AAAA,IACT,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACb;AAAA,IACA,WAAW;AAAA,IAEX,GAAG,eAAe;AAAA,IAClB,GAAG,mBAAmB;AAAA,IACtB,GAAG,mBAAmB;AAAA,IACtB,GAAG,yBAAyB;AAAA,IAC5B,GAAG,mBAAmB;AAAA,IACtB,GAAG,mBAAmB;AAAA,EAC1B;AAAA,EACA;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACHA,UAAM,QAAQA;AAiBd,UAAM,QAAQ;AACR,UAAA,eAAe,IAAwB,IAAI;AAC3C,UAAA,WAAW,IAA6B,IAAI;AAClD,UAAM,CAAC,gBAAgB,UAAU,IAAI,gBAAgB,KAAK;AACpD,UAAA,YAAY,aAAa,KAAK;AAC9B,UAAA,cAAc,SAAS,MAAM;AAC/B,aAAO,MAAM,aAAa,CAAC,CAAC,UAAU;AAAA,IAAA,CACzC;AACK,UAAA,YAAY,QAAQ,OAAO,WAAW;AACtC,UAAA,UAAU,QAAQ,OAAO,SAAS;AAKxC,aAAS,kBAA2C;AAChD,aAAO,SAAS;AAAA,IACpB;AAMA,aAAS,iBAAiB,QAAoB;;AAC1C,aAAO,gBAAgB;AACvB,eAAS,MAAM;AACX,kBAAU,QAAQ;AAClB,aAAK,eAAe,MAAM;AAAA,MAAA,CAC7B;AACG,UAAA,CAAC,MAAM,UAAU;AACjB,8BAAA,MAAA,mBAAmB;AAAA,MACvB;AAAA,IACJ;AAMA,aAAS,qBAAqB,GAAe;AACzC,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IACtB;AAMA,aAAS,QAAQ,GAAW;;AACxB,gBAAU,MAAM,CAAC;AACjB,UAAI,MAAM,YAAY;AAClB,8BAAA,MAAA,mBAAmB;AAAA,MACvB;AAAA,IACJ;AASA,aAAS,eAAe,GAAe;;AAC1B,qBAAA,UAAA,mBAAO,MAAM;AACtB,WAAK,iBAAiB,CAAC;AAAA,IAC3B;AASA,aAAS,mBAAmB,GAAe;AACvC,WAAK,qBAAqB,CAAC;AACvB,UAAA,EAAE,WAAW,SAAS,OAAO;AAC7B;AAAA,MACJ;AACQ;AACR,QAAE,eAAe;AAAA,IACrB;AAKM,UAAA,aAAa,aAAa,KAAK;AAKxB,aAAA;AAAA,MACT,OAAO;AAAA,MACP,OAAO,MAAM;;AACT,8BAAA,MAAA,mBAAmB;AAAA,MACvB;AAAA,MACA,GAAG,UAAU,OAAO;AAAA,IAAA,CACvB;AAED,aAAS,eAAe,GAAe;AACnC,WAAK,eAAe;AAAA,IACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/EvToolbar.mjs

@@ -1,5 +1,5 @@
-/*! Evance UI v1.0.5 | MIT License */
-import { _, m } from "./EvToolbar.vue_vue_type_script_setup_true_lang-BPjLxL49.mjs";
+/*! Evance UI v1.0.8 | MIT License */
+import { _, m } from "./EvToolbar.vue_vue_type_script_setup_true_lang-C72bFwPt.mjs";
 export {
   _ as EvToolbar,
   m as makeEvToolbarProps