@dv.net/ui-kit 7.4.1 → 7.5.0

package/dist/assets/{UiDatepickerRange.vue_vue_type_script_setup_true_lang.DEaQJdY2.js → UiDatepickerRange.vue_vue_type_script_setup_true_lang.BfxSFgGk.js}

@@ -1,21 +1,28 @@
-import { defineComponent as K, mergeModels as L, useModel as O, ref as S, computed as z, onMounted as X, createElementBlock as w, openBlock as v, normalizeClass as Z, createVNode as n, unref as a, withCtx as r, createBlock as P, createCommentVNode as I, createTextVNode as B, toDisplayString as g, createElementVNode as N, renderSlot as Y } from "vue";
-import { _ as ee } from "./DatePickerInputs.vue_vue_type_script_setup_true_lang.CHu97t2s.js";
-import { Q as ae } from "./style.CD0jFgS4.js";
-import { _ as te } from "./DatePickerPresets.vue_vue_type_script_setup_true_lang.CKckhapZ.js";
+import { defineComponent as K, mergeModels as L, useModel as O, ref as S, computed as z, onMounted as X, createElementBlock as w, openBlock as v, normalizeClass as Z, createVNode as n, unref as t, withCtx as r, createBlock as P, createCommentVNode as I, createTextVNode as B, toDisplayString as g, createElementVNode as N, renderSlot as Y } from "vue";
+import { _ as ee } from "./DatePickerInputs.vue_vue_type_script_setup_true_lang.BDpkRcEN.js";
+import { Q as te } from "./style.C3xG1ALc.js";
+import { _ as ae } from "./DatePickerPresets.vue_vue_type_script_setup_true_lang.CKckhapZ.js";
 /* empty css                                                           */
-import { _ as le } from "./DatePickerSlider.vue_vue_type_script_setup_true_lang.OWR8o6fM.js";
-import { _ as R } from "./UiIconButton.vue_vue_type_script_setup_true_lang.O2daaEIF.js";
-import { a as oe } from "./index.CWUzDs_o.js";
+import { _ as oe } from "./DatePickerSlider.vue_vue_type_script_setup_true_lang.BGkzUy3Z.js";
+import { _ as R } from "./UiIconButton.vue_vue_type_script_setup_true_lang.cJvSLKjQ.js";
+import { a as le } from "./index.Cp1LhIxy.js";
 import "./vue3-lottie.es.BGWavb2-.js";
-import { _ as U } from "./UiButton.vue_vue_type_script_setup_true_lang.CAgnUvIV.js";
-/* empty css                                                         */
+import { _ as U } from "./UiButton.vue_vue_type_script_setup_true_lang.C58Ve9-q.js";
 import { _ as ie } from "./UiIcon.vue_vue_type_script_setup_true_lang.BjdWpbZ0.js";
 /* empty css                                                */
+/* empty css                                                        */
+import { config as D } from "../config/index.js";
+/* empty css                                                   */
+/* empty css                                                           */
+/* empty css                                                    */
 /* empty css                                                    */
+/* empty css                                                                  */
+/* empty css                                                       */
+/* empty css                                                            */
 import { u as ne } from "./useDatePicker.DnhbkLG1.js";
+/* empty css                                                         */
 import { useDatePickerPresets as re } from "../components/UiDatepicker/composables/useDatePickerPresets.js";
 import { useDatePickerSelected as se } from "../components/UiDatepicker/composables/useDatePickerSelected.js";
-import { config as D } from "../config/index.js";
 /* empty css                                                       */
 /* empty css                                                   */
 /* empty css                                                  */
@@ -28,16 +35,14 @@ import "vue-router";
 /* empty css                                                */
 /* empty css                                                 */
 /* empty css                                                      */
-/* empty css                                                        */
 /* empty css                                                    */
 /* empty css                                                */
 /* empty css                                                    */
 /* empty css                                                               */
-/* empty css                                                    */
 const me = {
   key: 1,
   class: "ui-datepicker__trigger"
-}, ue = { class: "ui-datepicker__navigate" }, de = { class: "ui-datepicker__navigate-value" }, Ke = /* @__PURE__ */ K({
+}, ue = { class: "ui-datepicker__navigate" }, de = { class: "ui-datepicker__navigate-value" }, Ye = /* @__PURE__ */ K({
   __name: "UiDatepickerRange",
   props: /* @__PURE__ */ L({
     disabled: { type: Boolean },
@@ -56,7 +61,7 @@ const me = {
   }),
   emits: ["update:modelValue"],
   setup(C) {
-    const u = C, l = O(C, "modelValue"), { width: E } = oe(), { dayjs: s, today: F, endDate: y, startDate: k, beginDate: H, modelValueFormat: V } = ne(l), m = S(), o = S(["", ""]), d = S(!1), Q = z(
+    const u = C, o = O(C, "modelValue"), { width: E } = le(), { dayjs: s, today: F, endDate: y, startDate: k, beginDate: H, modelValueFormat: V } = ne(o), m = S(), l = S(["", ""]), d = S(!1), Q = z(
       () => u.beginDate ? s(u.beginDate).format(V.value) : null
     ), p = z(() => u.maxDate ?? F), _ = z(() => u.minDate), { presets: c } = re({ beginDate: Q.value ?? H.value }), { isAllTimeSelected: T, selectedDate: $, formattedSelectedDate: j, selectedRange: x } = se({
       presets: c,
@@ -70,50 +75,50 @@ const me = {
     }
     function q(e) {
       if (!e) return;
-      const t = Array.isArray(e) ? e : [e, e];
-      d.value = e.length < 2, t.length === 2 && (o.value = t);
+      const a = Array.isArray(e) ? e : [e, e];
+      d.value = e.length < 2, a.length === 2 && (l.value = a);
     }
     function M(e) {
-      l.value = [s(e[0]).format(V.value), s(e[1]).format(V.value)];
+      o.value = [s(e[0]).format(V.value), s(e[1]).format(V.value)];
     }
     function A(e) {
-      const t = Array.isArray(e) ? e : [e, e];
-      k.value && y.value && k.value.isSame(t[0], "day") && y.value.isSame(t[1], "day") || M(t);
+      const a = Array.isArray(e) ? e : [e, e];
+      k.value && y.value && k.value.isSame(a[0], "day") && y.value.isSame(a[1], "day") || M(a);
     }
     function G() {
-      const e = u.single ? s(o.value[0], D.uiDatePicker.modelValueFormat).toDate() : o.value;
+      const e = u.single ? s(l.value[0], D.uiDatePicker.modelValueFormat).toDate() : l.value;
       m.value?.updateInternalModelValue(e), m.value?.setMonthYear({
-        month: s(o.value[0]).month(),
-        year: s(o.value[0]).year()
+        month: s(l.value[0]).month(),
+        year: s(l.value[0]).year()
       });
     }
     const J = () => {
-      l.value = [], o.value = ["", ""], d.value = !0, m.value?.closeMenu();
+      o.value = [], l.value = ["", ""], d.value = !0, m.value?.closeMenu();
     };
     return X(() => {
-      l.value.length || (d.value = !0);
-    }), (e, t) => (v(), w("div", {
+      o.value.length || (d.value = !0);
+    }), (e, a) => (v(), w("div", {
       class: Z(["ui-datepicker-range", [e.size, { "is-disabled": e.disabled }]])
     }, [
-      n(le, {
-        disabled: !l.value.length || a(T),
-        modelValue: l.value,
-        "onUpdate:modelValue": t[2] || (t[2] = (i) => l.value = i),
-        "selected-range": a(x),
+      n(oe, {
+        disabled: !o.value.length || t(T),
+        modelValue: o.value,
+        "onUpdate:modelValue": a[2] || (a[2] = (i) => o.value = i),
+        "selected-range": t(x),
         "is-show": !e.hideSliderArrows,
         "min-date": _.value,
         "max-date": p.value
       }, {
         default: r(() => [
-          n(a(ae), {
+          n(t(te), {
             position: "center",
-            locale: a(D).locale,
+            locale: t(D).locale,
             ref_key: "pickerRef",
             ref: m,
-            "model-value": e.single ? l.value[0] : l.value,
+            "model-value": e.single ? o.value[0] : o.value,
             "enable-time-picker": !1,
             range: !e.single,
-            "multi-calendars": !e.single && a(E) > 1e3,
+            "multi-calendars": !e.single && t(E) > 1e3,
             "month-name-format": "long",
             "max-date": p.value,
             "min-date": _.value,
@@ -125,33 +130,33 @@ const me = {
             onInternalModelChange: q
           }, {
             "left-sidebar": r(() => [
-              !e.single && a(c).length ? (v(), P(te, {
+              !e.single && t(c).length ? (v(), P(ae, {
                 key: 0,
-                presets: a(c),
-                date: o.value,
+                presets: t(c),
+                date: l.value,
                 onChange: W
               }, null, 8, ["presets", "date"])) : I("", !0),
               n(ee, {
                 onChange: G,
-                onSubmit: t[0] || (t[0] = (i) => m.value.selectDate()),
-                modelValue: o.value,
-                "onUpdate:modelValue": t[1] || (t[1] = (i) => o.value = i),
+                onSubmit: a[0] || (a[0] = (i) => m.value.selectDate()),
+                modelValue: l.value,
+                "onUpdate:modelValue": a[1] || (a[1] = (i) => l.value = i),
                 single: e.single
               }, null, 8, ["modelValue", "single"])
             ]),
             trigger: r(() => [
               e.$slots.trigger ? Y(e.$slots, "trigger", {
                 key: 0,
-                date: l.value,
-                presets: a(c),
-                selectedDate: a($),
-                formattedSelectedDate: a(j)
+                date: o.value,
+                presets: t(c),
+                selectedDate: t($),
+                formattedSelectedDate: t(j)
               }) : (v(), w("button", me, [
-                n(a(ie), {
+                n(t(ie), {
                   type: "400",
                   name: "calendar-month"
                 }),
-                B(g(a($)), 1)
+                B(g(t($)), 1)
               ]))
             ]),
             "month-year": r(({ month: i, months: b, handleMonthYearChange: f }) => [
@@ -174,23 +179,23 @@ const me = {
               ])
             ]),
             "action-row": r(({ disabled: i, selectDate: b }) => [
-              n(a(U), {
+              n(t(U), {
                 disabled: d.value || i,
                 mode: "neutral",
                 onClick: b
               }, {
                 default: r(() => [
-                  B(g(a(D).uiDatePicker.translations.applyButton), 1)
+                  B(g(t(D).uiDatePicker.translations.applyButton), 1)
                 ]),
                 _: 2
               }, 1032, ["disabled", "onClick"]),
-              l.value.length && e.clearable ? (v(), P(a(U), {
+              o.value.length && e.clearable ? (v(), P(t(U), {
                 key: 0,
                 type: "secondary",
                 onClick: J
               }, {
                 default: r(() => [
-                  B(g(a(D).uiDatePicker.translations.clearButton), 1)
+                  B(g(t(D).uiDatePicker.translations.clearButton), 1)
                 ]),
                 _: 1
               })) : I("", !0)
@@ -204,5 +209,5 @@ const me = {
   }
 });
 export {
-  Ke as _
+  Ye as _
 };

package/dist/assets/{UiDropdown.vue_vue_type_script_setup_true_lang.C8sc2Ar4.js → UiDropdown.vue_vue_type_script_setup_true_lang.BPFv-AjS.js}

@@ -2,7 +2,7 @@ import { defineComponent as E, mergeModels as k, useCssVars as R, ref as p, useM
 import { _ as x } from "./UiIcon.vue_vue_type_script_setup_true_lang.BjdWpbZ0.js";
 /* empty css                                                */
 import { u as F, o as I, s as P, f as q, a as A, b as G } from "./floating-ui.vue.CQbj4WJd.js";
-import { o as J, a as K } from "./index.CWUzDs_o.js";
+import { o as J, a as K } from "./index.Cp1LhIxy.js";
 import { isMobileDevice as L } from "../helpers/is-mobile-device.js";
 const te = /* @__PURE__ */ E({
   __name: "UiDropdown",

package/dist/assets/{UiFileItemLoading.vue_vue_type_script_setup_true_lang.BA93cC3z.js → UiFileItemLoading.vue_vue_type_script_setup_true_lang.BLZuEoWZ.js}

@@ -1,6 +1,6 @@
 import { defineComponent as _, computed as n, createElementBlock as f, openBlock as p, createElementVNode as i, createVNode as l, toDisplayString as t, withCtx as d, createTextVNode as u, unref as g } from "vue";
-import { _ as v } from "./UiButton.vue_vue_type_script_setup_true_lang.CAgnUvIV.js";
-import "./style.CD0jFgS4.js";
+import { _ as v } from "./UiButton.vue_vue_type_script_setup_true_lang.C58Ve9-q.js";
+import "./style.C3xG1ALc.js";
 import { _ as h } from "./UiProgressBar.vue_vue_type_script_setup_true_lang.CB-UHfBS.js";
 /* empty css                                                       */
 import { config as a } from "../config/index.js";

package/dist/assets/UiGallery.vue_vue_type_script_setup_true_lang.pDss49af.js

@@ -0,0 +1,96 @@
+import { defineComponent as w, mergeModels as C, useModel as V, ref as x, computed as v, watch as I, onMounted as E, onUnmounted as L, createBlock as M, openBlock as m, Teleport as U, createVNode as t, Transition as k, withCtx as p, createElementBlock as h, createCommentVNode as B, withModifiers as N, createElementVNode as n, normalizeClass as _ } from "vue";
+import { _ as g } from "./UiIcon.vue_vue_type_script_setup_true_lang.BjdWpbZ0.js";
+/* empty css                                                */
+const z = ["disabled"], R = { class: "ui-gallery__slider" }, $ = { class: "ui-gallery__slide" }, A = ["src"], O = ["disabled"], G = /* @__PURE__ */ w({
+  __name: "UiGallery",
+  props: /* @__PURE__ */ C({
+    images: {},
+    initialIndex: { default: 0 }
+  }, {
+    modelValue: { type: Boolean, required: !0 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    const i = V(a, "modelValue"), l = x(a.initialIndex), r = x(!0), u = v(() => l.value > 0), d = v(() => l.value < a.images.length - 1), f = v(() => {
+      const e = a.images[l.value];
+      return e ? e.url || (e.file ? URL.createObjectURL(e.file) : "") : "";
+    }), o = (e) => {
+      r.value = !1, e === "prev" && u.value ? l.value-- : e === "next" && d.value && l.value++;
+    }, c = () => {
+      i.value = !1;
+    }, y = (e) => {
+      i.value && (e.key === "ArrowLeft" && o("prev"), e.key === "ArrowRight" && o("next"), e.key === "Escape" && c());
+    };
+    return I(
+      () => i.value,
+      (e) => {
+        e && (l.value = a.initialIndex, r.value = !0);
+      }
+    ), E(() => document.addEventListener("keydown", y)), L(() => document.removeEventListener("keydown", y)), (e, s) => (m(), M(U, { to: "body" }, [
+      t(k, { name: "ui-gallery-fade" }, {
+        default: p(() => [
+          i.value && e.images.length && f.value ? (m(), h("div", {
+            key: 0,
+            class: "ui-gallery",
+            onClick: N(c, ["self"])
+          }, [
+            n("button", {
+              class: _(["ui-gallery__nav ui-gallery__nav--prev", { "ui-gallery__nav--active": u.value }]),
+              disabled: !u.value,
+              onClick: s[0] || (s[0] = (b) => o("prev"))
+            }, [
+              t(g, {
+                name: "chevron-left 1",
+                type: "400",
+                size: "xxl"
+              })
+            ], 10, z),
+            n("div", R, [
+              n("button", {
+                class: "ui-gallery__close",
+                onClick: c
+              }, [
+                t(g, {
+                  name: "close",
+                  type: "400"
+                })
+              ]),
+              n("div", $, [
+                t(k, {
+                  name: "ui-gallery-crossfade",
+                  mode: "out-in"
+                }, {
+                  default: p(() => [
+                    (m(), h("img", {
+                      key: l.value,
+                      src: f.value,
+                      alt: "",
+                      class: _(["ui-gallery__image", { "ui-gallery__image--initial": r.value }])
+                    }, null, 10, A))
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            n("button", {
+              class: _(["ui-gallery__nav ui-gallery__nav--next", { "ui-gallery__nav--active": d.value }]),
+              disabled: !d.value,
+              onClick: s[1] || (s[1] = (b) => o("next"))
+            }, [
+              t(g, {
+                name: "chevron-right",
+                type: "400",
+                size: "xxl"
+              })
+            ], 10, O)
+          ])) : B("", !0)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+});
+export {
+  G as _
+};

package/dist/assets/{UiIconButton.vue_vue_type_script_setup_true_lang.O2daaEIF.js → UiIconButton.vue_vue_type_script_setup_true_lang.cJvSLKjQ.js}

@@ -1,12 +1,20 @@
-import { defineComponent as a, computed as p, createBlock as m, openBlock as l, resolveDynamicComponent as s, mergeProps as d, withCtx as u, withDirectives as c, createVNode as i, unref as t, vShow as f } from "vue";
+import { defineComponent as m, computed as a, createBlock as l, openBlock as s, resolveDynamicComponent as d, mergeProps as u, withCtx as f, withDirectives as c, createVNode as t, createElementVNode as y, unref as r, vShow as z } from "vue";
 import "./vue3-lottie.es.BGWavb2-.js";
-import "./style.CD0jFgS4.js";
-import { _ as y } from "./UiIcon.vue_vue_type_script_setup_true_lang.BjdWpbZ0.js";
+import "./style.C3xG1ALc.js";
+import { _ as g } from "./UiIcon.vue_vue_type_script_setup_true_lang.BjdWpbZ0.js";
 /* empty css                                                */
-/* empty css                                                         */
+import { _ as b } from "./UiLoading.vue_vue_type_script_setup_true_lang.cWPzNcNZ.js";
+/* empty css                                                        */
+import "../config/index.js";
+/* empty css                                                   */
+/* empty css                                                           */
+/* empty css                                                    */
 /* empty css                                                    */
+/* empty css                                                                  */
+/* empty css                                                       */
+/* empty css                                                            */
 import "./useDatePicker.DnhbkLG1.js";
-import "../config/index.js";
+/* empty css                                                         */
 /* empty css                                                           */
 import "../components/UiDatepicker/composables/useDatePickerPresets.js";
 /* empty css                                                       */
@@ -19,16 +27,13 @@ import "../components/UiDatepicker/composables/useDatePickerPresets.js";
 /* empty css                                                      */
 import "vue-router";
 /* empty css                                                */
-import { _ as z } from "./UiLoading.vue_vue_type_script_setup_true_lang.D452h_BA.js";
 /* empty css                                                 */
 /* empty css                                                      */
-/* empty css                                                        */
 /* empty css                                                    */
 /* empty css                                                */
 /* empty css                                                    */
 /* empty css                                                               */
-/* empty css                                                    */
-const W = /* @__PURE__ */ a({
+const oo = /* @__PURE__ */ m({
   __name: "UiIconButton",
   props: {
     mode: { default: "circle" },
@@ -45,9 +50,9 @@ const W = /* @__PURE__ */ a({
     nativeType: { default: "button" },
     containerSmall: { type: Boolean }
   },
-  setup(r) {
-    const e = r, n = p(() => e.href ? "a" : e.to ? "router-link" : "button");
-    return (o, g) => (l(), m(s(n.value), d(o.$attrs, {
+  setup(n) {
+    const e = n, p = a(() => e.href ? "a" : e.to ? "router-link" : "button");
+    return (o, i) => (s(), l(d(p.value), u(o.$attrs, {
       to: o.to,
       type: o.nativeType,
       disabled: o.disabled || o.loading,
@@ -62,25 +67,26 @@ const W = /* @__PURE__ */ a({
         }
       ]]
     }), {
-      default: u(() => [
-        c(i(t(y), {
+      default: f(() => [
+        c(t(r(g), {
           color: o.iconColor,
           name: o.iconName,
           type: o.iconType,
           size: o.size
         }, null, 8, ["color", "name", "type", "size"]), [
-          [f, !o.loading]
+          [z, !o.loading]
         ]),
-        i(t(z), {
+        t(r(b), {
           "is-show": o.loading,
           "icon-size": o.size,
           "icon-color": o.iconColor
-        }, null, 8, ["is-show", "icon-size", "icon-color"])
+        }, null, 8, ["is-show", "icon-size", "icon-color"]),
+        i[0] || (i[0] = y("div", { class: "ui-icon-button__hover-effect" }, null, -1))
       ]),
       _: 1
     }, 16, ["to", "type", "disabled", "class"]));
   }
 });
 export {
-  W as _
+  oo as _
 };

package/dist/assets/UiInput.vue_vue_type_script_setup_true_lang.Dr-b7jG5.js

@@ -0,0 +1,183 @@
+import { defineComponent as P, mergeModels as h, useModel as T, ref as t, onMounted as U, createElementBlock as y, openBlock as i, normalizeClass as q, createCommentVNode as u, createElementVNode as m, renderSlot as B, withDirectives as v, toDisplayString as F, withKeys as H, vModelDynamic as L, createBlock as k, Transition as V, withCtx as C, createVNode as E, vShow as g, withModifiers as j } from "vue";
+import { _ as A } from "./UiIconButton.vue_vue_type_script_setup_true_lang.cJvSLKjQ.js";
+import "./style.C3xG1ALc.js";
+const G = {
+  class: "ui-input__inner",
+  tabindex: "-1"
+}, J = {
+  key: 0,
+  class: "ui-input__label"
+}, O = ["type", "placeholder", "disabled", "readonly", "autofocus", "tabindex", "autocomplete", "name", "step"], Y = /* @__PURE__ */ P({
+  __name: "UiInput",
+  props: /* @__PURE__ */ h({
+    isDisabled: { type: Boolean },
+    placeholder: {},
+    label: {},
+    size: { default: "md" },
+    filled: { type: Boolean },
+    error: { type: Boolean },
+    disabled: { type: Boolean },
+    inside: { type: Boolean },
+    type: { default: "text" },
+    readonly: { type: Boolean },
+    readonlyInteractive: { type: Boolean },
+    autofocus: { type: Boolean },
+    clearable: { type: Boolean },
+    isEmptyValueNull: { type: Boolean },
+    id: {},
+    indexTab: { default: "0" },
+    autocomplete: { default: "off" },
+    showPassword: { type: Boolean },
+    name: {},
+    step: { default: "any" }
+  }, {
+    modelValue: { default: null },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ h(["change", "clear", "blur", "input"], ["update:modelValue"]),
+  setup(b, { expose: D, emit: I }) {
+    const o = b, d = I, n = T(b, "modelValue"), p = t(!1), s = t(!1), a = t(), f = t(), c = t(), $ = [
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "ArrowDown",
+      "Tab",
+      "Home",
+      "End",
+      "Shift",
+      "Control",
+      "Alt",
+      "Meta",
+      "Escape"
+    ];
+    function z() {
+      p.value = !1, a.value?.blur(), d("blur");
+    }
+    function M() {
+      n.value = o.isEmptyValueNull ? null : "", d("clear");
+    }
+    function R(e) {
+      o.isEmptyValueNull && e.target.value === "" && (n.value = null), d("input", e.target.value);
+    }
+    function w() {
+      o.disabled || o.readonly || (p.value = !0, a.value?.focus());
+    }
+    function S(e) {
+      !o.readonlyInteractive || e.ctrlKey || e.metaKey || $.includes(e.key) || e.preventDefault();
+    }
+    function K(e) {
+      o.readonlyInteractive && e.preventDefault();
+    }
+    function N(e) {
+      o.readonlyInteractive && e.preventDefault();
+    }
+    return D({
+      focus: () => a.value?.focus()
+    }), U(() => {
+      f.value && o.disabled && f.value.querySelectorAll("button").forEach((e) => e.disabled = !0), c.value && o.disabled && c.value.querySelectorAll("button").forEach((e) => e.disabled = !0);
+    }), (e, l) => (i(), y("div", {
+      class: q(["ui-input", [
+        e.size,
+        { "is-focus": p.value },
+        { "is-filled": e.filled },
+        { "is-disabled": e.disabled },
+        { "is-inside": e.inside },
+        { "not-empty": !!n.value }
+      ]]),
+      tabindex: "-1",
+      onClick: w
+    }, [
+      e.$slots.prepend ? (i(), y("div", {
+        key: 0,
+        ref_key: "prependRef",
+        ref: c,
+        class: "ui-input__prepend"
+      }, [
+        B(e.$slots, "prepend")
+      ], 512)) : u("", !0),
+      m("div", G, [
+        e.inside ? (i(), y("span", J, F(e.placeholder), 1)) : u("", !0),
+        v(m("input", {
+          ref_key: "inputRef",
+          ref: a,
+          "onUpdate:modelValue": l[0] || (l[0] = (r) => n.value = r),
+          class: "ui-input__input",
+          type: e.showPassword ? s.value ? "text" : "password" : e.type,
+          placeholder: e.inside ? "" : e.placeholder,
+          disabled: e.disabled,
+          onKeydown: [
+            S,
+            l[2] || (l[2] = H((r) => a.value?.blur(), ["esc"]))
+          ],
+          onBeforeinput: K,
+          onPaste: N,
+          onBlur: z,
+          onFocus: w,
+          onChange: l[1] || (l[1] = (r) => e.$emit("change")),
+          onInput: R,
+          readonly: e.readonly,
+          autofocus: e.autofocus,
+          tabindex: e.indexTab,
+          autocomplete: e.autocomplete,
+          name: e.name,
+          step: e.step
+        }, null, 40, O), [
+          [
+            L,
+            n.value,
+            void 0,
+            { trim: !0 }
+          ]
+        ])
+      ]),
+      m("div", {
+        ref_key: "appendRef",
+        ref: f,
+        class: "ui-input__append"
+      }, [
+        e.clearable ? (i(), k(V, {
+          key: 0,
+          name: "fade"
+        }, {
+          default: C(() => [
+            v(E(A, {
+              "no-size": "",
+              size: "sm",
+              "icon-color": "var(--color-icon-tertiary)",
+              onClick: M,
+              "icon-name": "close",
+              "icon-type": "400",
+              tabindex: "-1"
+            }, null, 512), [
+              [g, e.clearable && n.value]
+            ])
+          ]),
+          _: 1
+        })) : u("", !0),
+        e.showPassword ? (i(), k(V, {
+          key: 1,
+          name: "fade"
+        }, {
+          default: C(() => [
+            v(E(A, {
+              onClick: l[3] || (l[3] = j((r) => s.value = !s.value, ["stop"])),
+              "icon-name": s.value ? "visibility" : "visibility-off",
+              "icon-type": "400",
+              "icon-color": "var(--color-icon-secondary)",
+              "no-size": "",
+              size: "sm",
+              tabindex: "-1"
+            }, null, 8, ["icon-name"]), [
+              [g, e.showPassword && n.value]
+            ])
+          ]),
+          _: 1
+        })) : u("", !0),
+        B(e.$slots, "append")
+      ], 512)
+    ], 2));
+  }
+});
+export {
+  Y as _
+};