@nmorph/nmorph-ui-kit 2.2.37 → 2.2.39

package/dist/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.vue2.js

@@ -1,11 +1,12 @@
 import './NmorphCheckboxGroup.css';
-import { defineComponent as m, ref as h, watch as g, computed as d, provide as o } from "vue";
-import { useModifiers as b } from "../../../utils/create-modifiers.js";
-import y from "../nmorph-checkbox/NmorphCheckbox.vue.js";
-const _ = /* @__PURE__ */ m({
+import { defineComponent as g, ref as b, watch as v, computed as p, provide as u } from "vue";
+import { useModifiers as y } from "../../../utils/create-modifiers.js";
+import { useFormItemModel as q } from "../nmorph-form/use-form-item-input.js";
+import x from "../nmorph-checkbox/NmorphCheckbox.vue.js";
+const N = /* @__PURE__ */ g({
   __name: "NmorphCheckboxGroup",
   props: {
-    modelValue: { type: Array, required: !0, default: () => [] },
+    modelValue: { type: Array, required: !1, default: () => [] },
     options: { type: Array, required: !1, default: () => [] },
     design: { type: String, required: !1, default: "button" },
     direction: { type: null, required: !1, default: "row" },
@@ -17,30 +18,34 @@ const _ = /* @__PURE__ */ m({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(n, { expose: p, emit: s }) {
-    p();
-    const r = n, e = h([...r.modelValue]);
-    g(
-      () => r.modelValue,
+  setup(s, { expose: c, emit: f }) {
+    c();
+    const r = s, a = f, { modelValue: o, updateModelValue: l } = q(
+      r,
+      (t) => a("update:model-value", t),
+      []
+    ), e = b([...o.value]);
+    v(
+      o,
       (t) => {
         e.value = [...t];
       },
       { deep: !0 }
     );
-    const u = s, a = (t) => {
-      e.value = e.value.includes(t) ? e.value.filter((f) => f !== t) : [...e.value, t], u("update:model-value", e.value);
-    }, c = d(
-      () => b({
+    const i = (t) => {
+      e.value = e.value.includes(t) ? e.value.filter((h) => h !== t) : [...e.value, t], l(e.value);
+    }, m = p(
+      () => y({
         "nmorph-checkbox-group": [r.design, r.direction]
       })
-    ), l = d(() => r.height);
-    o("checkbox-group-selected-value", e), o("change-checkbox-value-handler", a), o("checkbox-group-height", l);
-    const i = { props: r, initialValue: e, emit: u, changeHandler: a, modifiers: c, height: l, get NmorphCheckbox() {
-      return y;
+    ), d = p(() => r.height);
+    u("checkbox-group-selected-value", e), u("change-checkbox-value-handler", i), u("checkbox-group-height", d);
+    const n = { props: r, emit: a, modelValue: o, updateModelValue: l, initialValue: e, changeHandler: i, modifiers: m, height: d, get NmorphCheckbox() {
+      return x;
     } };
-    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
   }
 });
 export {
-  _ as default
+  N as default
 };

package/dist/components/form/nmorph-color-picker/NmorphColorPicker.vue.js

@@ -1,21 +1,21 @@
 import './NmorphColorPicker.css';
-import t from "./NmorphColorPicker.vue2.js";
-import { openBlock as n, createElementBlock as i, normalizeClass as a, createElementVNode as e, normalizeStyle as c, toDisplayString as s, createCommentVNode as d } from "vue";
+import a from "./NmorphColorPicker.vue2.js";
+import { openBlock as l, createElementBlock as i, normalizeClass as c, createElementVNode as n, normalizeStyle as t, toDisplayString as d, createCommentVNode as s } from "vue";
 /* empty css                       */
 import m from "../../../_virtual/_plugin-vue_export-helper.js";
-const p = { class: "nmorph-color-picker__content" }, _ = ["id", "name", "tabindex", "value", "disabled"], f = {
+const p = { class: "nmorph-color-picker__content" }, _ = ["id", "name", "tabindex", "value", "disabled"], h = {
   key: 0,
   class: "nmorph-color-picker__value"
 };
-function u(h, r, k, o, v, b) {
-  return n(), i(
+function u(f, r, k, o, v, b) {
+  return l(), i(
     "div",
     {
-      class: a(o.modifiers)
+      class: c(o.modifiers)
     },
     [
-      e("div", p, [
-        e("input", {
+      n("div", p, [
+        n("input", {
           id: o.id,
           ref: "inputDOMRef",
           name: o.name,
@@ -25,37 +25,33 @@ function u(h, r, k, o, v, b) {
           value: o.currentValue,
           disabled: o.props.disabled,
           onInput: o.handleInput,
-          onFocus: r[0] || (r[0] = (l) => {
-            o.focused = !0, o.emit("focus");
-          }),
-          onBlur: r[1] || (r[1] = (l) => {
-            o.focused = !1, o.emit("blur");
-          })
+          onFocus: r[0] || (r[0] = (...e) => o.handleFocus && o.handleFocus(...e)),
+          onBlur: r[1] || (r[1] = (...e) => o.handleBlur && o.handleBlur(...e))
         }, null, 40, _),
-        e(
+        n(
           "div",
           {
             class: "nmorph-color-picker__swatch",
-            style: c({ background: o.currentValue })
+            style: t({ background: o.currentValue })
           },
           null,
           4
           /* STYLE */
         ),
-        o.props.showValue ? (n(), i(
+        o.props.showValue ? (l(), i(
           "span",
-          f,
-          s(o.displayValue),
+          h,
+          d(o.displayValue),
           1
           /* TEXT */
-        )) : d("v-if", !0)
+        )) : s("v-if", !0)
       ])
     ],
     2
     /* CLASS */
   );
 }
-const N = /* @__PURE__ */ m(t, [["render", u], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-color-picker/NmorphColorPicker.vue"]]);
+const C = /* @__PURE__ */ m(a, [["render", u], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-color-picker/NmorphColorPicker.vue"]]);
 export {
-  N as default
+  C as default
 };

package/dist/components/form/nmorph-color-picker/NmorphColorPicker.vue2.js

@@ -1,9 +1,10 @@
 import './NmorphColorPicker.css';
-import { defineComponent as R, ref as h, watch as j, onMounted as k, computed as C } from "vue";
-import { NmorphComponentHeight as B } from "../../../types/index.js";
-import { useModifiers as H } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as L } from "../nmorph-form/use-form-item-input.js";
-const E = /* @__PURE__ */ R({
+import { defineComponent as k, ref as H, watch as L, onMounted as O, computed as C } from "vue";
+import { useModifiers as z } from "../../../utils/create-modifiers.js";
+import { useFocusableInput as A } from "../../../hooks/use-focusable-input.js";
+import { useFormItemInput as D, useFormItemModel as E } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as T } from "../../../types/common.types.js";
+const W = /* @__PURE__ */ k({
   __name: "NmorphColorPicker",
   props: {
     modelValue: { type: String, required: !1, default: "" },
@@ -17,51 +18,60 @@ const E = /* @__PURE__ */ R({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur"],
-  setup(_, { expose: q, emit: M }) {
-    const o = _, g = M, { id: V, name: S, tabindex: x } = L(o), s = (e, r = "#000000") => {
+  setup(_, { expose: q, emit: F }) {
+    const n = _, d = F, { id: I, name: S, tabindex: V } = D(n), { modelValue: c, updateModelValue: g } = E(
+      n,
+      (e) => d("update:model-value", e),
+      ""
+    ), l = (e, r = "#000000") => {
       const t = e?.trim() || "";
-      return /^#[\da-f]{6}$/i.test(t) ? t.toLowerCase() : /^#[\da-f]{3}$/i.test(t) ? `#${t.slice(1).split("").map((n) => `${n}${n}`).join("").toLowerCase()}` : r;
-    }, c = h(null), m = () => {
+      return /^#[\da-f]{6}$/i.test(t) ? t.toLowerCase() : /^#[\da-f]{3}$/i.test(t) ? `#${t.slice(1).split("").map((o) => `${o}${o}`).join("").toLowerCase()}` : r;
+    }, {
+      elementRef: p,
+      focused: y,
+      handleFocus: x,
+      handleBlur: B
+    } = A({
+      onFocus: () => d("focus"),
+      onBlur: () => d("blur")
+    }), f = () => {
       if (typeof document > "u") return "#006cb6";
-      const e = c.value || document.documentElement, r = getComputedStyle(e).getPropertyValue("--nmorph-accent-color").trim();
-      return s(r, "#006cb6");
-    }, a = h(s(o.modelValue)), b = h(!1);
-    j(
-      () => o.modelValue,
-      (e) => {
-        a.value = e ? s(e) : m();
-      }
-    );
-    const I = (e) => {
-      const r = e.target, t = s(r.value);
-      a.value = t, g("update:model-value", t);
-    }, p = (e) => [
+      const e = p.value || document.documentElement, r = getComputedStyle(e).getPropertyValue("--nmorph-accent-color").trim();
+      return l(r, "#006cb6");
+    }, a = H(l(c.value));
+    L(c, (e) => {
+      a.value = e ? l(e) : f();
+    });
+    const R = (e) => {
+      const r = e.target, t = l(r.value);
+      a.value = t, g(t);
+    }, h = (e) => [
       parseInt(e.slice(1, 3), 16),
       parseInt(e.slice(3, 5), 16),
       parseInt(e.slice(5, 7), 16)
-    ], y = (e) => {
-      const [r, t, n] = p(e);
-      return `rgb(${r}, ${t}, ${n})`;
-    }, v = (e) => {
-      const [r, t, n] = p(e).map((P) => P / 255), l = Math.max(r, t, n), u = Math.min(r, t, n), f = (l + u) / 2;
-      if (l === u)
-        return `hsl(0, 0%, ${Math.round(f * 100)}%)`;
-      const i = l - u, N = f > 0.5 ? i / (2 - l - u) : i / (l + u);
-      let d = 0;
-      return l === r ? d = (t - n) / i + (t < n ? 6 : 0) : l === t ? d = (n - r) / i + 2 : d = (r - t) / i + 4, `hsl(${Math.round(d * 60)}, ${Math.round(N * 100)}%, ${Math.round(f * 100)}%)`;
+    ], v = (e) => {
+      const [r, t, o] = h(e);
+      return `rgb(${r}, ${t}, ${o})`;
+    }, $ = (e) => {
+      const [r, t, o] = h(e).map((j) => j / 255), u = Math.max(r, t, o), s = Math.min(r, t, o), b = (u + s) / 2;
+      if (u === s)
+        return `hsl(0, 0%, ${Math.round(b * 100)}%)`;
+      const i = u - s, P = b > 0.5 ? i / (2 - u - s) : i / (u + s);
+      let m = 0;
+      return u === r ? m = (t - o) / i + (t < o ? 6 : 0) : u === t ? m = (o - r) / i + 2 : m = (r - t) / i + 4, `hsl(${Math.round(m * 60)}, ${Math.round(P * 100)}%, ${Math.round(b * 100)}%)`;
     };
-    k(() => {
-      o.modelValue || (a.value = m());
-    }), q({ inputDOMRef: c });
-    const F = C(
-      () => H({
-        nmorph: [B[o.height], b.value && "focused"],
-        "nmorph-color-picker": [o.disabled && "disabled", o.displayFormat]
+    O(() => {
+      c.value || (a.value = f());
+    }), q({ inputDOMRef: p });
+    const w = C(
+      () => z({
+        nmorph: [T[n.height], y.value && "focused"],
+        "nmorph-color-picker": [n.disabled && "disabled", n.displayFormat]
       })
-    ), w = C(() => o.displayFormat === "rgb" ? y(a.value) : o.displayFormat === "hsl" ? v(a.value) : a.value.toUpperCase()), $ = { props: o, emit: g, id: V, name: S, tabindex: x, normalizeColor: s, inputDOMRef: c, resolveAccentColor: m, currentValue: a, focused: b, handleInput: I, hexToRgb: p, formatRgb: y, formatHsl: v, modifiers: F, displayValue: w };
-    return Object.defineProperty($, "__isScriptSetup", { enumerable: !1, value: !0 }), $;
+    ), N = C(() => n.displayFormat === "rgb" ? v(a.value) : n.displayFormat === "hsl" ? $(a.value) : a.value.toUpperCase()), M = { props: n, emit: d, id: I, name: S, tabindex: V, modelValue: c, updateModelValue: g, normalizeColor: l, inputDOMRef: p, focused: y, handleFocus: x, handleBlur: B, resolveAccentColor: f, currentValue: a, handleInput: R, hexToRgb: h, formatRgb: v, formatHsl: $, modifiers: w, displayValue: N };
+    return Object.defineProperty(M, "__isScriptSetup", { enumerable: !1, value: !0 }), M;
   }
 });
 export {
-  E as default
+  W as default
 };

package/dist/components/form/nmorph-date-picker/NmorphDatePicker.vue2.js

@@ -1,21 +1,21 @@
 import './NmorphDatePicker.css';
-import { defineComponent as O, computed as a, ref as u } from "vue";
-import { useModifiers as k } from "../../../utils/create-modifiers.js";
-import { toCssSize as s } from "../../../utils/common.js";
-import { NmorphComponentHeight as B } from "../../../types/index.js";
+import { defineComponent as k, computed as a, ref as u, watch as V } from "vue";
+import { useModifiers as B } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as M } from "../../../utils/common.js";
 import P from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
-import V from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
-import { useI18n as j } from "vue-i18n";
-import { useFormItemInput as z } from "../nmorph-form/use-form-item-input.js";
-import { formatDate as f } from "../../data/nmorph-calendar/utils.js";
-import L from "../../../assets/icons/calendar.svg.js";
-import M from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import R from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-const ee = /* @__PURE__ */ O({
+import j from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
+import { useI18n as z } from "vue-i18n";
+import { useFormItemInput as L, useFormItemModel as R } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as T } from "../../../types/common.types.js";
+import { formatDate as m } from "../../data/nmorph-calendar/utils.js";
+import E from "../../../assets/icons/calendar.svg.js";
+import G from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import J from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+const le = /* @__PURE__ */ k({
   __name: "NmorphDatePicker",
   props: {
     placeholder: { type: String, required: !1, default: "" },
-    modelValue: { type: [Date, Array, null], required: !0, default: null },
+    modelValue: { type: [Date, Array, null], required: !1, default: null },
     type: { type: null, required: !1, default: "date" },
     textSeparator: { type: String, required: !1, default: "-" },
     initialDate: { type: Date, required: !1, default: () => /* @__PURE__ */ new Date() },
@@ -36,23 +36,27 @@ const ee = /* @__PURE__ */ O({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(m, { expose: c, emit: v }) {
-    c();
-    const { t: i } = j(), e = m, { id: y, name: h, autocomplete: g } = z(e), n = a(() => e.placeholder ? e.placeholder : i("pickADate")), t = u(e.modelValue), d = v, l = u(!1), q = () => {
+  setup(c, { expose: y, emit: v }) {
+    y();
+    const { t: s } = z(), e = c, { id: h, name: g, autocomplete: q } = L(e), n = a(() => e.placeholder ? e.placeholder : s("pickADate")), p = v, { modelValue: d, updateModelValue: i } = R(
+      e,
+      (r) => p("update:model-value", r),
+      null
+    ), t = u(d.value), l = u(!1), S = () => {
       l.value = !0;
-    }, S = () => {
+    }, N = () => {
       l.value = !1;
-    }, N = a(
-      () => k({
-        nmorph: [B[e.height]],
+    }, b = a(
+      () => B({
+        nmorph: [T[e.height]],
         "nmorph-date-picker": [e.disabled && "disabled", e.type, l.value && "focus"]
       })
-    ), D = a(() => ({
-      ...e.width !== void 0 && { "--width": s(e.width) },
-      ...e.calendarCellHeight !== void 0 && {
-        "--date-picker-calendar-cell-height": s(e.calendarCellHeight)
-      }
-    })), o = u(!1), b = u(null), C = () => {
+    ), D = a(
+      () => M({
+        "--width": e.width,
+        "--date-picker-calendar-cell-height": e.calendarCellHeight
+      })
+    ), o = u(!1), C = u(null), I = () => {
       o.value = !1;
     }, _ = () => {
       o.value = !o.value;
@@ -66,25 +70,33 @@ const ee = /* @__PURE__ */ O({
       };
       if (Array.isArray(t.value)) {
         if (t.value.length === 0) return n.value;
-        const F = f(t.value, r), x = e.type === "daterange" ? e.rangeSeparator : e.valueSeparator;
-        return F.join(x);
+        const x = m(t.value, r), O = e.type === "daterange" ? e.rangeSeparator : e.valueSeparator;
+        return x.join(O);
       } else
-        return f(t.value, r);
-    }), H = () => {
+        return m(t.value, r);
+    }), F = () => {
       const r = Array.isArray(t.value) ? [] : null;
-      t.value = r, d("update:model-value", t.value);
-    }, I = (r) => {
-      t.value = r, d("update:model-value", t.value);
-    }, w = a(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), p = { t: i, props: e, id: y, name: h, autocomplete: g, placeholderText: n, selectedDate: t, emit: d, focus: l, focusHandler: q, blurHandler: S, modifiers: N, styles: D, open: o, nmorphInputDOMRef: b, closeHandler: C, toggleOpen: _, displayValue: A, clearHandler: H, updateSelectedDateHandler: I, showClearButton: w, get NmorphDropdown() {
-      return R;
+      t.value = r, i(t.value);
+    }, w = (r) => {
+      t.value = r, i(t.value);
+    };
+    V(
+      d,
+      (r) => {
+        t.value = r;
+      },
+      { deep: !0 }
+    );
+    const H = a(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), f = { t: s, props: e, id: h, name: g, autocomplete: q, placeholderText: n, emit: p, modelValue: d, updateModelValue: i, selectedDate: t, focus: l, focusHandler: S, blurHandler: N, modifiers: b, styles: D, open: o, nmorphInputDOMRef: C, closeHandler: I, toggleOpen: _, displayValue: A, clearHandler: F, updateSelectedDateHandler: w, showClearButton: H, get NmorphDropdown() {
+      return J;
     }, get NmorphIcon() {
-      return M;
+      return G;
     }, get NmorphIconCalendar() {
-      return L;
-    }, NmorphClearButton: P, NmorphDatePickerContent: V };
-    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
+      return E;
+    }, NmorphClearButton: P, NmorphDatePickerContent: j };
+    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
   }
 });
 export {
-  ee as default
+  le as default
 };

package/dist/components/form/nmorph-file-upload/NmorphFileUpload.css

@@ -1 +1 @@
-.nmorph-file-upload{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__trigger{position:relative}.nmorph-file-upload input{display:none}.nmorph-file-upload .nmorph-file-upload__list{width:100%;min-width:0;margin-top:var(--indentation-03)}.nmorph-file-upload .nmorph-file-upload__list>div{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__file{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin-bottom:var(--indentation-02);padding:var(--indentation-02) var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-file-upload .nmorph-file-upload__file>.nmorph-image-preview{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-info{display:flex;flex:1 1 auto;gap:var(--indentation-02);align-items:center;min-width:0;overflow:hidden}.nmorph-file-upload .nmorph-file-upload__file-info>.nmorph-icon{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-name{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-upload .nmorph-file-upload__remove-file{flex:0 0 auto}
+.nmorph-file-upload{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__trigger{position:relative;width:100%;min-width:0}.nmorph-file-upload input{display:none}.nmorph-file-upload .nmorph-file-upload__list{width:100%;min-width:0;margin-top:var(--indentation-03)}.nmorph-file-upload .nmorph-file-upload__list>div{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__file{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin-bottom:var(--indentation-02);padding:var(--indentation-02) var(--indentation-03);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-file-upload .nmorph-file-upload__file>.nmorph-image-preview{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-info{display:flex;flex:1 1 0;gap:var(--indentation-02);align-items:center;min-width:0;max-width:100%;overflow:hidden}.nmorph-file-upload .nmorph-file-upload__file-info>.nmorph-icon{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-name{display:block;flex:1 1 0;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-upload .nmorph-file-upload__remove-file{flex:0 0 auto}

package/dist/components/form/nmorph-file-upload/NmorphFileUpload.vue.js

@@ -1,30 +1,34 @@
 import './NmorphFileUpload.css';
-import m from "./NmorphFileUpload.vue2.js";
-import { openBlock as o, createElementBlock as r, normalizeClass as d, createElementVNode as l, renderSlot as _, createVNode as n, TransitionGroup as h, withCtx as t, Fragment as f, renderList as v, createBlock as a, createCommentVNode as p, resolveDynamicComponent as u, toDisplayString as g } from "vue";
+import p from "./NmorphFileUpload.vue2.js";
+import { openBlock as o, createElementBlock as r, normalizeClass as s, createElementVNode as l, renderSlot as _, createVNode as n, TransitionGroup as h, withCtx as t, Fragment as f, renderList as v, createBlock as a, createCommentVNode as m, resolveDynamicComponent as u, toDisplayString as g } from "vue";
 /* empty css                      */
-import y from "../../../_virtual/_plugin-vue_export-helper.js";
-const k = { class: "nmorph-file-upload__trigger" }, N = ["multiple", "disabled", "accept"], C = {
+import b from "../../../_virtual/_plugin-vue_export-helper.js";
+const x = { class: "nmorph-file-upload__trigger" }, y = ["id", "name", "autocomplete", "tabindex", "multiple", "disabled", "accept"], k = {
   key: 0,
   class: "nmorph-file-upload__list"
-}, b = { class: "nmorph-file-upload__file-info" }, x = { class: "nmorph-file-upload__file-name" }, F = { class: "nmorph-file-upload__remove-file" };
-function B(s, I, w, e, D, S) {
+}, N = { class: "nmorph-file-upload__file-info" }, C = { class: "nmorph-file-upload__file-name" }, F = { class: "nmorph-file-upload__remove-file" };
+function B(d, I, w, e, D, S) {
   return o(), r(
     "div",
     {
-      class: d(e.modifiers)
+      class: s(e.modifiers)
     },
     [
-      l("div", k, [
+      l("div", x, [
         l("input", {
+          id: e.id,
           ref: "inputDOMRef",
+          name: e.name,
+          autocomplete: e.autocomplete,
+          tabindex: e.tabindex,
           type: "file",
           multiple: e.props.multiple,
           disabled: e.props.disabled,
           accept: e.inputAccept,
           class: "nmorph-native-input",
           onChange: e.handleFileUpload
-        }, null, 40, N),
-        _(s.$slots, "trigger", {}, () => [
+        }, null, 40, y),
+        _(d.$slots, "trigger", {}, () => [
           n(e.NmorphButton, {
             text: e.computedButtonText,
             fill: "",
@@ -33,7 +37,7 @@ function B(s, I, w, e, D, S) {
           }, null, 8, ["text", "disabled"])
         ])
       ]),
-      e.files.length > 0 ? (o(), r("div", C, [
+      e.files.length > 0 ? (o(), r("div", k, [
         n(h, {
           name: "list",
           tag: "div"
@@ -49,8 +53,8 @@ function B(s, I, w, e, D, S) {
                 e.props.photoWithPreview && e.isImageFile(i) ? (o(), a(e.NmorphImagePreview, {
                   key: 0,
                   src: c
-                }, null, 8, ["src"])) : p("v-if", !0),
-                l("div", b, [
+                }, null, 8, ["src"])) : m("v-if", !0),
+                l("div", N, [
                   n(
                     e.NmorphIcon,
                     {
@@ -69,7 +73,7 @@ function B(s, I, w, e, D, S) {
                   ),
                   l(
                     "span",
-                    x,
+                    C,
                     g(i.name),
                     1
                     /* TEXT */
@@ -96,13 +100,13 @@ function B(s, I, w, e, D, S) {
           _: 1
           /* STABLE */
         })
-      ])) : p("v-if", !0)
+      ])) : m("v-if", !0)
     ],
     2
     /* CLASS */
   );
 }
-const T = /* @__PURE__ */ y(m, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-file-upload/NmorphFileUpload.vue"]]);
+const T = /* @__PURE__ */ b(p, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-file-upload/NmorphFileUpload.vue"]]);
 export {
   T as default
 };