@elmethis/vue 0.1.0

package/dist/components/form/ElmSelect.vue.d.ts

@@ -0,0 +1,48 @@
+export interface ElmSelectProps {
+    label: string;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+}
+type __VLS_Props = ElmSelectProps;
+type __VLS_PublicProps = {
+    "options"?: Array<{
+        id: string;
+        label: string;
+        description?: string;
+    }>;
+    "selected-option"?: {
+        id: string;
+        label: string;
+        description?: string;
+    } | null;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:options": (value: {
+        id: string;
+        label: string;
+        description?: string;
+    }[]) => any;
+    "update:selected-option": (value: {
+        id: string;
+        label: string;
+        description?: string;
+    } | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:options"?: ((value: {
+        id: string;
+        label: string;
+        description?: string;
+    }[]) => any) | undefined;
+    "onUpdate:selected-option"?: ((value: {
+        id: string;
+        label: string;
+        description?: string;
+    } | null) => any) | undefined;
+}>, {
+    loading: boolean;
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    target: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/form/ElmSelect.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmSelect.vue2.mjs";
+import style0 from "./ElmSelect.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmSelect as default
+};

package/dist/components/form/ElmSelect.vue2.mjs

@@ -0,0 +1,145 @@
+import { defineComponent, mergeModels, useModel, ref, useTemplateRef, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, unref, toDisplayString, createVNode, Transition, withCtx, createCommentVNode, Fragment, renderList } from "vue";
+import ElmMdiIcon from "../icon/ElmMdiIcon.vue.mjs";
+import { mdiArrowDownDropCircleOutline, mdiMenuDown, mdiChevronRight } from "@mdi/js";
+import { onClickOutside } from "@vueuse/core";
+import textStyle from "../../styles/text.module.scss.mjs";
+import fadeStyle from "../../styles/transition-fade.module.scss.mjs";
+const _hoisted_1 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmSelect",
+  props: /* @__PURE__ */ mergeModels({
+    label: {},
+    placeholder: {},
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false }
+  }, {
+    "options": {},
+    "optionsModifiers": {},
+    "selected-option": {},
+    "selected-optionModifiers": {}
+  }),
+  emits: ["update:options", "update:selected-option"],
+  setup(__props) {
+    const options = useModel(
+      __props,
+      "options"
+    );
+    const selectedOption = useModel(__props, "selected-option");
+    const isActive = ref(false);
+    const handleToggle = () => {
+      isActive.value = !isActive.value;
+    };
+    const handleSelect = (id) => {
+      if (options.value) {
+        const [selected] = options.value.filter((option) => option.id === id);
+        selectedOption.value = selected;
+      }
+    };
+    const target = useTemplateRef("target");
+    onClickOutside(target, (_) => {
+      if (isActive.value) isActive.value = false;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "target",
+        ref: target,
+        class: normalizeClass([_ctx.$style.wrapper, { [_ctx.$style.active]: isActive.value }]),
+        style: normalizeStyle({
+          backgroundColor: __props.disabled || __props.loading ? "rgba(0,0,0,0.15)" : void 0,
+          "--highlight-color": isActive.value ? "#bfa056" : void 0
+        }),
+        onClick: handleToggle
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.header)
+        }, [
+          createElementVNode("span", {
+            class: normalizeClass([_ctx.$style.label, unref(textStyle).text])
+          }, toDisplayString(__props.label), 3)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.body)
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style.select)
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass([_ctx.$style.selected, unref(textStyle).text])
+            }, [
+              createVNode(Transition, {
+                mode: "out-in",
+                "leave-from-class": _ctx.$style["selected-leave-from"],
+                "enter-to-class": _ctx.$style["selected-enter-to"],
+                "enter-active-class": _ctx.$style["selected-enter-active"],
+                "leave-active-class": _ctx.$style["selected-leave-active"],
+                "enter-from-class": _ctx.$style["selected-enter-from"],
+                "leave-to-class": _ctx.$style["selected-leave-to"]
+              }, {
+                default: withCtx(() => [
+                  selectedOption.value ? (openBlock(), createElementBlock("div", {
+                    key: selectedOption.value.id
+                  }, [
+                    createElementVNode("span", null, toDisplayString(selectedOption.value.label), 1),
+                    selectedOption.value.description ? (openBlock(), createElementBlock("span", {
+                      key: 0,
+                      class: normalizeClass(_ctx.$style.description)
+                    }, toDisplayString(selectedOption.value.description), 3)) : createCommentVNode("", true)
+                  ])) : (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    class: normalizeClass(_ctx.$style.fallback)
+                  }, [
+                    createVNode(ElmMdiIcon, { d: unref(mdiArrowDownDropCircleOutline) }, null, 8, ["d"]),
+                    createElementVNode("span", null, toDisplayString(__props.placeholder ?? "Select an option"), 1)
+                  ], 2))
+                ]),
+                _: 1
+              }, 8, ["leave-from-class", "enter-to-class", "enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"])
+            ], 2),
+            createVNode(ElmMdiIcon, {
+              d: unref(mdiMenuDown),
+              size: "1.5rem"
+            }, null, 8, ["d"]),
+            createVNode(Transition, {
+              "enter-from-class": unref(fadeStyle)["fade-enter-from"],
+              "enter-active-class": unref(fadeStyle)["fade-enter-active"],
+              "enter-to-class": unref(fadeStyle)["fade-enter-to"],
+              "leave-from-class": unref(fadeStyle)["fade-leave-from"],
+              "leave-active-class": unref(fadeStyle)["fade-leave-active"],
+              "leave-to-class": unref(fadeStyle)["fade-leave-to"]
+            }, {
+              default: withCtx(() => [
+                isActive.value ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: normalizeClass(_ctx.$style.pulldown)
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(options.value, (option) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: option.id,
+                      class: normalizeClass([_ctx.$style.option, unref(textStyle).text]),
+                      onClick: ($event) => handleSelect(option.id)
+                    }, [
+                      createVNode(ElmMdiIcon, {
+                        d: unref(mdiChevronRight),
+                        color: "#868e9c",
+                        size: "0.75em"
+                      }, null, 8, ["d"]),
+                      createElementVNode("span", null, toDisplayString(option.label), 1),
+                      option.description ? (openBlock(), createElementBlock("span", {
+                        key: 0,
+                        class: normalizeClass(_ctx.$style.description)
+                      }, toDisplayString(option.description), 3)) : createCommentVNode("", true)
+                    ], 10, _hoisted_1);
+                  }), 128))
+                ], 2)) : createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["enter-from-class", "enter-active-class", "enter-to-class", "leave-from-class", "leave-active-class", "leave-to-class"])
+          ], 2)
+        ], 2)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/form/ElmSelect.vue3.mjs

@@ -0,0 +1,56 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._wrapper_yirxk_1{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;box-sizing:border-box;width:100%;padding:.25rem;border-radius:.25rem;display:flex;flex-direction:column;justify-content:space-between;border-style:solid;border-width:1px;border-color:transparent;transition:border-color .2s,background-color .2s;background-color:#fffc;box-shadow:0 0 .125rem #00000026}[data-theme=dark] ._wrapper_yirxk_1{background-color:#ffffff26;box-shadow:0 0 .125rem #000000bf}._active_yirxk_23{border-color:var(--highlight-color)}._header_yirxk_27{box-sizing:border-box;height:.75rem;padding:0 .25rem;display:flex;justify-content:space-between}._label_yirxk_35{display:inline;margin:0;padding:0;font-size:.75rem;line-height:.75rem;height:.75rem;vertical-align:top;transition:color .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--highlight-color)}._body_yirxk_48{display:flex;justify-content:space-between;align-items:center;padding-right:.25rem;padding-left:.25rem;cursor:pointer}._select_yirxk_57{padding:.5rem;width:100%;height:1.25rem;display:flex;justify-content:space-between;align-items:center}._selected_yirxk_66{width:100%;overflow:hidden}._fallback_yirxk_71{opacity:.6;display:flex;justify-content:flex-start;align-items:center;gap:.5rem}._pulldown_yirxk_79{position:absolute;top:4rem;left:0;box-sizing:border-box;width:100%;padding:.25rem;border-radius:.25rem;background-color:#fffc;box-shadow:0 0 .125rem #00000026}[data-theme=dark] ._pulldown_yirxk_79{background-color:#ffffff26;box-shadow:0 0 .125rem #000000bf}._option_yirxk_95{overflow:hidden;width:100%;padding:.5rem;box-sizing:border-box;border-radius:.25rem;display:flex;justify-content:flex-start;align-items:center;gap:.25rem;transition:background-color .1s;cursor:pointer}._option_yirxk_95:hover{background-color:#bec2ca4d}[data-theme=dark] ._option_yirxk_95:hover{background-color:#bec2ca33}._description_yirxk_115{box-sizing:border-box;opacity:.35;padding-left:.25rem;font-size:.75em;white-space:nowrap;text-overflow:ellipsis}._selected-enter-from_yirxk_124{opacity:0;transform:translateY(-100%)}._selected-enter-to_yirxk_129,._selected-leave-from_yirxk_130{opacity:1;transform:translateY(0)}._selected-leave-to_yirxk_135{opacity:0;transform:translateY(100%)}._selected-enter-active_yirxk_140,._selected-leave-active_yirxk_141{transition:opacity .2s,transform .1s}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const wrapper = "_wrapper_yirxk_1";
+const active = "_active_yirxk_23";
+const header = "_header_yirxk_27";
+const label = "_label_yirxk_35";
+const body = "_body_yirxk_48";
+const select = "_select_yirxk_57";
+const selected = "_selected_yirxk_66";
+const fallback = "_fallback_yirxk_71";
+const pulldown = "_pulldown_yirxk_79";
+const option = "_option_yirxk_95";
+const description = "_description_yirxk_115";
+const style0 = {
+  wrapper,
+  active,
+  header,
+  label,
+  body,
+  select,
+  selected,
+  fallback,
+  pulldown,
+  option,
+  description,
+  "selected-enter-from": "_selected-enter-from_yirxk_124",
+  "selected-enter-to": "_selected-enter-to_yirxk_129",
+  "selected-leave-from": "_selected-leave-from_yirxk_130",
+  "selected-leave-to": "_selected-leave-to_yirxk_135",
+  "selected-enter-active": "_selected-enter-active_yirxk_140",
+  "selected-leave-active": "_selected-leave-active_yirxk_141"
+};
+export {
+  active,
+  body,
+  style0 as default,
+  description,
+  fallback,
+  header,
+  label,
+  option,
+  pulldown,
+  select,
+  selected,
+  wrapper
+};

package/dist/components/form/ElmSwitch.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3-vite';
+import { default as ElmSwitch } from './ElmSwitch.vue';
+declare const meta: Meta<typeof ElmSwitch>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/form/ElmSwitch.vue.d.ts

@@ -0,0 +1,32 @@
+import { Property } from 'csstype';
+export interface ElmSwitchProps {
+    /**
+     * The color of the switch when checked.
+     */
+    color: string;
+    /**
+     * The size of the switch.
+     */
+    size: Property.Width;
+    /**
+     * Whether the switch is disabled.
+     */
+    disabled?: boolean;
+}
+type __VLS_Props = ElmSwitchProps;
+declare const __VLS_defaults: {
+    modelValue: boolean;
+};
+type __VLS_PublicProps = {
+    modelValue?: typeof __VLS_defaults['modelValue'];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: Property.Width;
+    color: string;
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/form/ElmSwitch.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmSwitch.vue2.mjs";
+import style0 from "./ElmSwitch.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmSwitch as default
+};

package/dist/components/form/ElmSwitch.vue2.mjs

@@ -0,0 +1,61 @@
+import { defineComponent, mergeModels, useModel, createElementBlock, openBlock, normalizeStyle, createElementVNode, normalizeClass } from "vue";
+const _hoisted_1 = ["checked", "disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmSwitch",
+  props: /* @__PURE__ */ mergeModels({
+    color: { default: "#bfa056" },
+    size: { default: "18px" },
+    disabled: { type: Boolean, default: false }
+  }, {
+    "modelValue": { default: false },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const checked = useModel(__props, "modelValue");
+    const handleClick = () => {
+      if (!props.disabled) checked.value = !checked.value;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        onClick: handleClick,
+        style: normalizeStyle({
+          "--color": __props.color,
+          "--padding": "2px",
+          "--size": __props.size,
+          "--width": "calc(var(--size) * 2 + var(--padding) * 2)"
+        })
+      }, [
+        createElementVNode("input", {
+          class: normalizeClass([_ctx.$style.switch]),
+          type: "checkbox",
+          checked: checked.value,
+          disabled: __props.disabled
+        }, null, 10, _hoisted_1),
+        createElementVNode("div", {
+          class: normalizeClass([
+            _ctx.$style.bar,
+            {
+              [_ctx.$style["bar--checked"]]: checked.value,
+              [_ctx.$style["bar--disabled"]]: __props.disabled
+            }
+          ])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass([
+              _ctx.$style.circle,
+              {
+                [_ctx.$style["circle--checked"]]: checked.value,
+                [_ctx.$style["circle--disabled"]]: __props.disabled
+              }
+            ])
+          }, null, 2)
+        ], 2)
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/form/ElmSwitch.vue3.mjs

@@ -0,0 +1,28 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._switch_gpty5_1{display:none}._bar_gpty5_5{z-index:0;padding:var(--padding);width:var(--width);height:var(--size);border-radius:calc((var(--size) + var(--padding)) / 2);position:relative;cursor:pointer;box-shadow:0 0 2px #0000001a;transition:opacity .3s,background-color .3s;background-color:#80808040}._bar--checked_gpty5_17{background-color:var(--color);opacity:.9}._bar--disabled_gpty5_21{cursor:not-allowed}._circle_gpty5_25{z-index:1;width:var(--size);height:var(--size);border-radius:50%;position:absolute;top:var(--padding);left:var(--padding);transition:transform .3s,opacity .3s,background-color .3s;background-color:#ffffffe6}._circle--checked_gpty5_36{transform:translate(calc(var(--width) - var(--size)))}._circle--disabled_gpty5_39{opacity:.5;background-color:gray}._circle_gpty5_25:hover{opacity:.8}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const bar = "_bar_gpty5_5";
+const circle = "_circle_gpty5_25";
+const style0 = {
+  "switch": "_switch_gpty5_1",
+  bar,
+  "bar--checked": "_bar--checked_gpty5_17",
+  "bar--disabled": "_bar--disabled_gpty5_21",
+  circle,
+  "circle--checked": "_circle--checked_gpty5_36",
+  "circle--disabled": "_circle--disabled_gpty5_39"
+};
+export {
+  bar,
+  circle,
+  style0 as default
+};

package/dist/components/form/ElmTextField.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/vue3-vite';
+import { default as ElmTextField } from './ElmTextField.vue';
+declare const meta: Meta<typeof ElmTextField>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Focus: Story;

package/dist/components/form/ElmTextField.vue.d.ts

@@ -0,0 +1,33 @@
+export interface ElmTextFieldProps {
+    label: string;
+    maxLength?: number;
+    suffix?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: "text" | "pen" | "email" | "user" | "lock" | "key" | "earth" | "tag" | "archive" | "link" | "search";
+    isPassword?: boolean;
+    required?: boolean;
+}
+type __VLS_Props = ElmTextFieldProps;
+declare const __VLS_defaults: {
+    modelValue: string;
+};
+type __VLS_PublicProps = {
+    modelValue?: typeof __VLS_defaults['modelValue'];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
+    focus: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    required: boolean;
+    loading: boolean;
+    disabled: boolean;
+    isPassword: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    target: HTMLInputElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/form/ElmTextField.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmTextField.vue2.mjs";
+import style0 from "./ElmTextField.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmTextField = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmTextField as default
+};

package/dist/components/form/ElmTextField.vue2.mjs

@@ -0,0 +1,150 @@
+import { defineComponent, mergeModels, ref, useModel, useTemplateRef, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createBlock, createCommentVNode, unref, toDisplayString, withDirectives, vModelDynamic, createVNode } from "vue";
+import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
+import { nanoid } from "nanoid";
+import ElmMdiIcon from "../icon/ElmMdiIcon.vue.mjs";
+import { mdiMagnify, mdiLinkVariant, mdiArchive, mdiTag, mdiEarth, mdiKey, mdiLock, mdiAccount, mdiEmail, mdiPen, mdiText, mdiEyeOutline, mdiEyeOffOutline, mdiBackspaceOutline } from "@mdi/js";
+const _hoisted_1 = ["for"];
+const _hoisted_2 = ["id", "type", "placeholder", "disabled", "aria-required"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmTextField",
+  props: /* @__PURE__ */ mergeModels({
+    label: {},
+    maxLength: {},
+    suffix: {},
+    placeholder: {},
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    icon: {},
+    isPassword: { type: Boolean, default: false },
+    required: { type: Boolean, default: false }
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const id = nanoid();
+    const isFocused = ref(false);
+    const props = __props;
+    const input = useModel(__props, "modelValue");
+    const type = ref(props.isPassword ? "password" : "text");
+    const handleDelete = () => {
+      if (!props.loading && !props.disabled) input.value = "";
+    };
+    const handleVisibleSwitch = () => {
+      if (!props.loading && !props.disabled)
+        type.value = type.value === "text" ? "password" : "text";
+    };
+    const iconMap = {
+      text: mdiText,
+      pen: mdiPen,
+      email: mdiEmail,
+      user: mdiAccount,
+      lock: mdiLock,
+      key: mdiKey,
+      earth: mdiEarth,
+      tag: mdiTag,
+      archive: mdiArchive,
+      link: mdiLinkVariant,
+      search: mdiMagnify
+    };
+    const t = useTemplateRef("target");
+    __expose({
+      focus: () => {
+        void t.value?.focus();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([_ctx.$style.wrapper, { [_ctx.$style.active]: isFocused.value }]),
+        style: normalizeStyle({
+          backgroundColor: __props.disabled || __props.loading ? "rgba(0,0,0,0.15)" : void 0,
+          "--highlight-color": isFocused.value ? "#bfa056" : void 0
+        })
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.header)
+        }, [
+          createElementVNode("label", {
+            for: unref(id),
+            class: normalizeClass(_ctx.$style.label)
+          }, [
+            createElementVNode("span", null, toDisplayString(__props.label), 1),
+            __props.required ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.requierd)
+            }, "*", 2)) : createCommentVNode("", true)
+          ], 10, _hoisted_1),
+          __props.maxLength != null ? (openBlock(), createBlock(ElmInlineText, {
+            key: 0,
+            text: `${input.value.length} / ${__props.maxLength}`,
+            color: input.value.length > __props.maxLength ? "#c56565" : "gray",
+            size: "0.75rem"
+          }, null, 8, ["text", "color"])) : createCommentVNode("", true)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.body)
+        }, [
+          __props.icon ? (openBlock(), createBlock(ElmMdiIcon, {
+            key: 0,
+            d: iconMap[__props.icon],
+            size: "1.5rem",
+            color: "gray"
+          }, null, 8, ["d"])) : createCommentVNode("", true),
+          withDirectives(createElementVNode("input", {
+            id: unref(id),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => input.value = $event),
+            type: type.value,
+            class: normalizeClass(_ctx.$style.input),
+            placeholder: __props.placeholder,
+            onFocus: _cache[1] || (_cache[1] = ($event) => isFocused.value = true),
+            onBlur: _cache[2] || (_cache[2] = ($event) => isFocused.value = false),
+            disabled: __props.disabled || __props.loading,
+            style: normalizeStyle({
+              cursor: __props.disabled ? "not-allowed" : __props.loading ? "progress" : "auto"
+            }),
+            "aria-required": __props.required,
+            ref: "target"
+          }, null, 46, _hoisted_2), [
+            [vModelDynamic, input.value]
+          ]),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["icon-box"])
+          }, [
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.$style.suffix)
+            }, [
+              __props.suffix != null ? (openBlock(), createBlock(ElmInlineText, {
+                key: 0,
+                text: __props.suffix
+              }, null, 8, ["text"])) : createCommentVNode("", true)
+            ], 2),
+            createVNode(ElmMdiIcon, {
+              d: type.value === "text" ? unref(mdiEyeOutline) : unref(mdiEyeOffOutline),
+              size: "1.75em",
+              color: "gray",
+              class: normalizeClass(_ctx.$style.icon),
+              onClick: handleVisibleSwitch
+            }, null, 8, ["d", "class"]),
+            createVNode(ElmMdiIcon, {
+              d: unref(mdiBackspaceOutline),
+              size: "1.75em",
+              color: "gray",
+              class: normalizeClass(_ctx.$style.icon),
+              onClick: handleDelete
+            }, null, 8, ["d", "class"])
+          ], 2)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.loading),
+          style: normalizeStyle({
+            opacity: __props.loading ? 0.2 : 0
+          })
+        }, null, 6)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/form/ElmTextField.vue3.mjs

@@ -0,0 +1,49 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("@keyframes _loading_1yj0v_19{0%{transform-origin:0%;transform:scaleX(0)}40%{transform-origin:0%;transform:scaleX(1)}60%{transform-origin:100%;transform:scaleX(1)}to{transform-origin:100%;transform:scaleX(0)}}._loading_1yj0v_19{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#6987b8;transition:opacity .2s;pointer-events:none;animation-name:_loading_1yj0v_19;animation-iteration-count:infinite;animation-duration:1.6s}._wrapper_1yj0v_33{overflow:hidden;position:relative;box-sizing:border-box;width:100%;padding:.25rem;border-radius:.25rem;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .2s,background-color .2s;border-style:solid;border-width:1px;border-color:transparent;background-color:#fffc;box-shadow:0 0 .125rem #00000026}[data-theme=dark] ._wrapper_1yj0v_33{background-color:#ffffff26;box-shadow:0 0 .125rem #000000bf}._active_1yj0v_55{border-color:var(--highlight-color)}._header_1yj0v_59{box-sizing:border-box;height:.75rem;padding:0 .25rem;display:flex;justify-content:space-between}._label_1yj0v_67{display:inline;margin:0;padding:0;font-size:.75rem;line-height:.75rem;height:.75rem;vertical-align:top;transition:color .2s;color:#000000a6;color:var(--highlight-color, rgba(0, 0, 0, .65))}[data-theme=dark] ._label_1yj0v_67{color:#ffffffa6;color:var(--highlight-color, rgba(255, 255, 255, .65))}._requierd_1yj0v_82{padding-inline:.25rem;color:#c56565;font-weight:700}._body_1yj0v_88{display:flex;justify-content:space-between;align-items:center;padding-right:.25rem;padding-left:.25rem}._left-icon_1yj0v_96{margin:auto .25rem;width:24px;height:24px;display:flex;justify-content:center;align-items:center;opacity:.7}[data-theme=dark] ._left-icon_1yj0v_96{filter:invert(1)}._input_1yj0v_109{all:unset;box-sizing:border-box;padding:.5rem;width:100%;color:#000000b3;caret-color:#000000b3}._input_1yj0v_109::-moz-placeholder{opacity:.5}._input_1yj0v_109::placeholder{opacity:.5}[data-theme=dark] ._input_1yj0v_109::-moz-placeholder{opacity:.7}[data-theme=dark] ._input_1yj0v_109::placeholder{opacity:.7}._input_1yj0v_109::-moz-selection{background-color:#000000b3;color:#ffffffb3}._input_1yj0v_109::selection{background-color:#000000b3;color:#ffffffb3}[data-theme=dark] ._input_1yj0v_109{color:#ffffffb3;caret-color:#ffffffb3}[data-theme=dark] ._input_1yj0v_109::-moz-selection{background-color:#ffffffb3;color:#000000b3}[data-theme=dark] ._input_1yj0v_109::selection{background-color:#ffffffb3;color:#000000b3}._icon-box_1yj0v_136{display:flex;justify-content:space-between;align-items:center}._icon_1yj0v_136{box-sizing:border-box;border-radius:.125em;padding:.25rem;transition:background-color .2s;cursor:pointer}._icon_1yj0v_136:hover{background-color:#80808033}._suffix_1yj0v_153{opacity:.6;padding:0 .5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:color .2s;color:#000000a6}[data-theme=dark] ._suffix_1yj0v_153{color:#ffffffa6}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const loading = "_loading_1yj0v_19";
+const wrapper = "_wrapper_1yj0v_33";
+const active = "_active_1yj0v_55";
+const header = "_header_1yj0v_59";
+const label = "_label_1yj0v_67";
+const requierd = "_requierd_1yj0v_82";
+const body = "_body_1yj0v_88";
+const input = "_input_1yj0v_109";
+const icon = "_icon_1yj0v_136";
+const suffix = "_suffix_1yj0v_153";
+const style0 = {
+  loading,
+  wrapper,
+  active,
+  header,
+  label,
+  requierd,
+  body,
+  "left-icon": "_left-icon_1yj0v_96",
+  input,
+  "icon-box": "_icon-box_1yj0v_136",
+  icon,
+  suffix
+};
+export {
+  active,
+  body,
+  style0 as default,
+  header,
+  icon,
+  input,
+  label,
+  loading,
+  requierd,
+  suffix,
+  wrapper
+};