@nmorph/nmorph-ui-kit 2.2.9 → 2.2.12

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-clear-button/NmorphClearButton.vue2.js

@@ -0,0 +1,24 @@
+import { defineComponent as n, computed as p } from "vue";
+import { useModifiers as i } from "../../../../../utils/create-modifiers.js";
+import s from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import u from "../../../../../assets/icons/error.svg.js";
+const l = /* @__PURE__ */ n({
+  __name: "NmorphClearButton",
+  emits: ["clear"],
+  setup(c, { expose: e, emit: o }) {
+    e();
+    const t = o, m = p(
+      () => i({
+        "nmorph-input-clear-button": []
+      })
+    ), r = { emit: t, modifiers: m, get NmorphIcon() {
+      return s;
+    }, get NmorphIconError() {
+      return u;
+    } };
+    return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
+  }
+});
+export {
+  l as default
+};

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js

@@ -0,0 +1,56 @@
+import t from "./NmorphDatePickerContent.vue2.js";
+import { openBlock as a, createElementBlock as o, normalizeClass as i, createBlock as r, withCtx as l, createVNode as d, createCommentVNode as n } from "vue";
+import c from "../../../../../_virtual/_plugin-vue_export-helper.js";
+function h(m, k, p, e, Y, f) {
+  return a(), o(
+    "div",
+    {
+      class: i(e.modifiers)
+    },
+    [
+      e.selectedPicker === "calendar" ? (a(), r(e.NmorphCalendar, {
+        key: 0,
+        type: e.props.type,
+        "initial-date": e.initialDate,
+        "model-value": e.props.selectedValues,
+        "onUpdate:modelValue": e.updateSelectedDate,
+        onUpdateInitialDate: e.updateInitialDate
+      }, {
+        header: l(() => [
+          d(e.NmorphDatePickerHeader, {
+            year: e.initialDate.getFullYear(),
+            month: e.initialDate.getMonth(),
+            onPrevMonth: e.prevMonthHandler,
+            onNextMonth: e.nextMonthHandler,
+            onPrevYear: e.prevYearHandler,
+            onNextYear: e.nextYearHandler,
+            onChangeYear: e.changeYearHandler,
+            onChangeMonth: e.changeMonthHandler
+          }, null, 8, ["year", "month"])
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["type", "initial-date", "model-value"])) : n("v-if", !0),
+      e.selectedPicker === "year" ? (a(), r(e.NmorphYearMonthPicker, {
+        key: 1,
+        type: "year",
+        "current-date": e.initialDate,
+        onUpdateYear: e.updateYearHandler
+      }, null, 8, ["current-date"])) : n("v-if", !0),
+      e.selectedPicker === "month" ? (a(), r(e.NmorphYearMonthPicker, {
+        key: 2,
+        type: "month",
+        "current-date": e.initialDate,
+        onUpdateYear: e.updateYearHandler,
+        onUpdateMonth: e.updateMonthHandler,
+        onBackToYears: e.backToYearsHandler
+      }, null, 8, ["current-date"])) : n("v-if", !0)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const H = /* @__PURE__ */ c(t, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue"]]);
+export {
+  H as default
+};

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue2.js

@@ -0,0 +1,52 @@
+import { defineComponent as H, computed as n, ref as i } from "vue";
+import { useModifiers as Y } from "../../../../../utils/create-modifiers.js";
+import f from "../nmorph-date-picker-header/NmorphDatePickerHeader.vue.js";
+import M from "../nmorph-year-month-picker/NmorphYearMonthPicker.vue.js";
+import _ from "../../../../data/nmorph-calendar/NmorphCalendar.vue.js";
+const O = /* @__PURE__ */ H({
+  __name: "NmorphDatePickerContent",
+  props: {
+    initialDate: { type: Date, required: !1, default: () => /* @__PURE__ */ new Date() },
+    selectedValues: { type: [Date, Array], required: !0 },
+    type: { type: null, required: !1, default: "date" }
+  },
+  emits: ["update-selected-value"],
+  setup(v, { expose: m, emit: h }) {
+    m();
+    const l = v, o = h, D = n(
+      () => Y({
+        "nmorph-date-picker-content": []
+      })
+    ), e = i(l.initialDate), a = i("calendar"), u = n(() => new Date(e.value.setMonth(e.value.getMonth() - 1))), d = n(() => new Date(e.value.setMonth(e.value.getMonth() + 1))), s = n(() => new Date(e.value.setFullYear(e.value.getFullYear() - 1))), c = n(() => new Date(e.value.setFullYear(e.value.getFullYear() + 1))), p = { props: l, emit: o, modifiers: D, initialDate: e, selectedPicker: a, prevMonth: u, nextMonth: d, prevYear: s, nextYear: c, prevMonthHandler: () => {
+      e.value = u.value;
+    }, nextMonthHandler: () => {
+      e.value = d.value;
+    }, prevYearHandler: () => {
+      e.value = s.value;
+    }, nextYearHandler: () => {
+      e.value = c.value;
+    }, changeYearHandler: () => {
+      a.value = "year";
+    }, changeMonthHandler: () => {
+      a.value = "month";
+    }, updateYearHandler: (t) => {
+      const r = new Date(e.value.setFullYear(Number(t)));
+      e.value = r, a.value = "month";
+    }, updateMonthHandler: (t) => {
+      const r = new Date(e.value.setMonth(Number(t)));
+      e.value = r, a.value = "calendar";
+    }, backToYearsHandler: () => {
+      a.value = "year";
+    }, updateSelectedDate: (t) => {
+      o("update-selected-value", t);
+    }, updateInitialDate: (t) => {
+      e.value = t;
+    }, get NmorphCalendar() {
+      return _;
+    }, NmorphDatePickerHeader: f, NmorphYearMonthPicker: M };
+    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
+  }
+});
+export {
+  O as default
+};

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-header/NmorphDatePickerHeader.css

@@ -0,0 +1 @@
+.nmorph-date-picker-header{display:flex;justify-content:space-between;padding:var(--indentation-03)}.nmorph-date-picker-header .nmorph-date-picker-header__center-side{display:flex;justify-content:center;width:165px;margin:0 var(--indentation-00);border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-date-picker-header .nmorph-date-picker-header__action-btn{margin:0 var(--indentation-02)}.nmorph-date-picker-header .nmorph-date-picker-header__action-btn .nmorph-button__content{padding:0 var(--indentation-02)}.nmorph-date-picker-header .nmorph-date-picker-header__chevron-double-left{rotate:90deg}.nmorph-date-picker-header .nmorph-date-picker-header__chevron-double-right{rotate:-90deg}.nmorph-date-picker-header .nmorph-date-picker-header__chevron-left{rotate:90deg}.nmorph-date-picker-header .nmorph-date-picker-header__chevron-right{rotate:-90deg}

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-header/NmorphDatePickerHeader.vue.js

@@ -0,0 +1,114 @@
+import './NmorphDatePickerHeader.css';
+import i from "./NmorphDatePickerHeader.vue2.js";
+import { openBlock as d, createElementBlock as l, normalizeClass as m, createElementVNode as a, createVNode as r, withCtx as n } from "vue";
+/* empty css                            */
+import h from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const p = { class: "nmorph-date-picker-header__left-side" }, c = { class: "nmorph-date-picker-header__center-side" }, s = { class: "nmorph-date-picker-header__right-side" };
+function _(f, t, k, e, v, N) {
+  return d(), l(
+    "div",
+    {
+      class: m(e.modifiers)
+    },
+    [
+      a("div", p, [
+        r(e.NmorphButton, {
+          class: "nmorph-date-picker-header__action-btn",
+          "style-type": "transparent",
+          onClick: t[0] || (t[0] = (o) => e.emit("prev-year")),
+          tabindex: -1
+        }, {
+          default: n(() => [
+            r(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-double-left" }, {
+              default: n(() => [
+                r(e.NmorphIconChevronDoubleDown)
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          _: 1
+          /* STABLE */
+        }),
+        r(e.NmorphButton, {
+          class: "nmorph-date-picker-header__action-btn",
+          "style-type": "transparent",
+          onClick: t[1] || (t[1] = (o) => e.emit("prev-month")),
+          tabindex: -1
+        }, {
+          default: n(() => [
+            r(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-left" }, {
+              default: n(() => [
+                r(e.NmorphIconChevronDown)
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          _: 1
+          /* STABLE */
+        })
+      ]),
+      a("div", c, [
+        r(e.NmorphButton, {
+          text: e.props.year,
+          "style-type": "transparent",
+          fill: "",
+          onClick: t[2] || (t[2] = (o) => e.emit("change-year")),
+          tabindex: -1
+        }, null, 8, ["text"]),
+        r(e.NmorphButton, {
+          text: e.getMonthName(e.props.month),
+          "style-type": "transparent",
+          fill: "",
+          onClick: t[3] || (t[3] = (o) => e.emit("change-month")),
+          tabindex: -1
+        }, null, 8, ["text"])
+      ]),
+      a("div", s, [
+        r(e.NmorphButton, {
+          class: "nmorph-date-picker-header__action-btn",
+          "style-type": "transparent",
+          onClick: t[4] || (t[4] = (o) => e.emit("next-month")),
+          tabindex: -1
+        }, {
+          default: n(() => [
+            r(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-right" }, {
+              default: n(() => [
+                r(e.NmorphIconChevronDown)
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          _: 1
+          /* STABLE */
+        }),
+        r(e.NmorphButton, {
+          class: "nmorph-date-picker-header__action-btn",
+          "style-type": "transparent",
+          onClick: t[5] || (t[5] = (o) => e.emit("next-year")),
+          tabindex: -1
+        }, {
+          default: n(() => [
+            r(e.NmorphIcon, { class: "nmorph-date-picker-header__chevron-double-right" }, {
+              default: n(() => [
+                r(e.NmorphIconChevronDoubleDown)
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          _: 1
+          /* STABLE */
+        })
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const B = /* @__PURE__ */ h(i, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-header/NmorphDatePickerHeader.vue"]]);
+export {
+  B as default
+};

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-header/NmorphDatePickerHeader.vue2.js

@@ -0,0 +1,38 @@
+import './NmorphDatePickerHeader.css';
+import { defineComponent as u, computed as h } from "vue";
+import { useModifiers as i } from "../../../../../utils/create-modifiers.js";
+import a from "../../../../../assets/icons/chevron-double-down.svg.js";
+import c from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import s from "../../../../basic/nmorph-button/NmorphButton.vue.js";
+import { getMonthName as f } from "../../../../data/nmorph-calendar/utils.js";
+import N from "../../../../../assets/icons/chevron-down.svg.js";
+const l = /* @__PURE__ */ u({
+  __name: "NmorphDatePickerHeader",
+  props: {
+    year: { type: Number, required: !0 },
+    month: { type: Number, required: !0 }
+  },
+  emits: ["prev-month", "next-month", "prev-year", "next-year", "change-year", "change-month"],
+  setup(r, { expose: o, emit: t }) {
+    o();
+    const n = r, m = t, p = h(
+      () => i({
+        "nmorph-date-picker-header": []
+      })
+    ), e = { props: n, emit: m, modifiers: p, get NmorphButton() {
+      return s;
+    }, get NmorphIcon() {
+      return c;
+    }, get NmorphIconChevronDoubleDown() {
+      return a;
+    }, get NmorphIconChevronDown() {
+      return N;
+    }, get getMonthName() {
+      return f;
+    } };
+    return Object.defineProperty(e, "__isScriptSetup", { enumerable: !1, value: !0 }), e;
+  }
+});
+export {
+  l as default
+};

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-year-month-picker/NmorphYearMonthPicker.css

@@ -0,0 +1 @@
+.nmorph-year-month-picker .nmorph-year-month-picker__header{display:flex;justify-content:space-between;padding-bottom:var(--indentation-04)}.nmorph-year-month-picker .nmorph-year-month-picker__value{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);border-radius:var(--default-border-radius)}.nmorph-year-month-picker .nmorph-year-month-picker__values{padding-top:var(--indentation-04)}.nmorph-year-month-picker .nmorph-radio-group{width:100%}.nmorph-year-month-picker .nmorph-radio-group .nmorph-radio-group__content{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.nmorph-year-month-picker .nmorph-radio-group .nmorph-radio:not(:last-child){width:100%;margin:0}.nmorph-year-month-picker .nmorph-year-month-picker__chevron-left{rotate:90deg}.nmorph-year-month-picker .nmorph-year-month-picker__chevron-right{rotate:-90deg}

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-year-month-picker/NmorphYearMonthPicker.vue.js

@@ -0,0 +1,74 @@
+import './NmorphYearMonthPicker.css';
+import i from "./NmorphYearMonthPicker.vue2.js";
+import { openBlock as l, createElementBlock as m, normalizeClass as c, createElementVNode as t, createVNode as e, withCtx as n } from "vue";
+/* empty css                           */
+import h from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const d = { class: "nmorph-year-month-picker__header" }, p = { class: "nmorph-year-month-picker__value" }, s = { class: "nmorph-year-month-picker__values" };
+function _(k, r, v, o, f, N) {
+  return l(), m(
+    "div",
+    {
+      class: c(o.modifiers)
+    },
+    [
+      t("div", d, [
+        e(o.NmorphButton, {
+          class: "nmorph-year-month-picker__action-btn",
+          onClick: r[0] || (r[0] = (a) => o.buttonClickHandler("decrease")),
+          tabindex: -1
+        }, {
+          default: n(() => [
+            e(o.NmorphIcon, { class: "nmorph-year-month-picker__chevron-left" }, {
+              default: n(() => [
+                e(o.NmorphIconChevronDown)
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          _: 1
+          /* STABLE */
+        }),
+        t("div", p, [
+          e(o.NmorphButton, {
+            text: o.value,
+            "style-type": "transparent",
+            onClick: o.goToYearsHandler,
+            tabindex: -1
+          }, null, 8, ["text"])
+        ]),
+        e(o.NmorphButton, {
+          class: "nmorph-year-month-picker__action-btn",
+          onClick: r[1] || (r[1] = (a) => o.buttonClickHandler("increase")),
+          tabindex: -1
+        }, {
+          default: n(() => [
+            e(o.NmorphIcon, { class: "nmorph-year-month-picker__chevron-right" }, {
+              default: n(() => [
+                e(o.NmorphIconChevronDown)
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          _: 1
+          /* STABLE */
+        })
+      ]),
+      e(o.NmorphDivider),
+      t("div", s, [
+        e(o.NmorphRadioGroup, {
+          "model-value": o.selectedValue,
+          options: o.values,
+          "onUpdate:modelValue": o.updateModelValue
+        }, null, 8, ["model-value", "options"])
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const C = /* @__PURE__ */ h(i, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/inner-components/nmorph-year-month-picker/NmorphYearMonthPicker.vue"]]);
+export {
+  C as default
+};

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-year-month-picker/NmorphYearMonthPicker.vue2.js

@@ -0,0 +1,74 @@
+import './NmorphYearMonthPicker.css';
+import { defineComponent as Y, ref as p, watch as _, computed as h } from "vue";
+import { useModifiers as k } from "../../../../../utils/create-modifiers.js";
+import { useCalendarTexts as C } from "../../../../data/nmorph-calendar/hooks/use-calendar-texts.js";
+import { getDecadeYears as I } from "../../../../data/nmorph-calendar/utils.js";
+import M from "../../../../others/nmorph-divider/NmorphDivider.vue.js";
+import x from "../../../nmorph-radio-group/NmorphRadioGroup.vue.js";
+import w from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import F from "../../../../basic/nmorph-button/NmorphButton.vue.js";
+import H from "../../../../../assets/icons/chevron-down.svg.js";
+const z = /* @__PURE__ */ Y({
+  __name: "NmorphYearMonthPicker",
+  props: {
+    currentDate: { type: Date, required: !0 },
+    type: { type: String, required: !1, default: "month" }
+  },
+  emits: ["update-year", "update-month", "back-to-years"],
+  setup(f, { expose: g, emit: y }) {
+    g();
+    const { months: m } = C(), c = m.map((t, o) => ({
+      label: t.substring(0, 3),
+      value: String(o),
+      tabindex: -1
+    })), e = f, r = p(c), u = p(String(e.currentDate.getMonth())), a = p(e.currentDate.getFullYear()), d = () => {
+      const t = e.currentDate.getFullYear(), o = I(t).map((n) => ({ label: String(n), value: String(n) }));
+      r.value = o;
+    };
+    _(
+      () => e.currentDate,
+      () => {
+        e.type === "year" && (d(), u.value = String(e.currentDate.getFullYear()));
+      },
+      {
+        immediate: !0,
+        deep: !0
+      }
+    );
+    const l = y, b = h(
+      () => k({
+        "nmorph-year-month-picker": []
+      })
+    ), D = (t) => {
+      u.value = t, e.type === "month" ? l("update-month", u.value) : l("update-year", u.value);
+    }, s = (t) => {
+      r.value = r.value.map((o) => {
+        const n = String(t === "decrease" ? Number(o.value) - 10 : Number(o.value) + 10);
+        return {
+          label: n,
+          value: n
+        };
+      });
+    }, i = (t) => {
+      t === "decrease" ? a.value = a.value - 1 : a.value = a.value + 1, l("update-year", String(a.value));
+    }, N = (t) => {
+      t === "decrease" ? e.type === "year" ? s("decrease") : i("decrease") : e.type === "year" ? s("increase") : i("increase");
+    }, S = h(() => e.type === "year" ? `${r.value[0].label} - ${r.value[r.value.length - 1].label}` : String(a.value)), v = { months: m, initialMonthData: c, props: e, values: r, selectedValue: u, selectedYear: a, setInitialYearsData: d, emit: l, modifiers: b, updateModelValue: D, updateYearValues: s, updateYear: i, buttonClickHandler: N, value: S, goToYearsHandler: () => {
+      e.type === "month" && l("back-to-years");
+    }, get NmorphButton() {
+      return F;
+    }, get NmorphIcon() {
+      return w;
+    }, get NmorphRadioGroup() {
+      return x;
+    }, get NmorphDivider() {
+      return M;
+    }, get NmorphIconChevronDown() {
+      return H;
+    } };
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
+  }
+});
+export {
+  z as default
+};

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

@@ -0,0 +1 @@
+.nmorph-file-upload .nmorph-file-upload__trigger{position:relative}.nmorph-file-upload input{display:none}.nmorph-file-upload .nmorph-file-upload__list{margin-top:var(--indentation-03)}.nmorph-file-upload .nmorph-file-upload__file{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--indentation-02);padding:var(--indentation-02) var(--indentation-03);border-radius:var(--default-border-radius);background:var(--nmorph-main-color);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-info{display:flex;align-items:center;width:50%;margin-left:var(--indentation-02)}.nmorph-file-upload .nmorph-file-upload__file-name{margin-left:var(--indentation-02);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-upload .nmorph-file-upload__remove-file{margin-left:var(--indentation-03)}

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

@@ -0,0 +1,104 @@
+import './NmorphFileUpload.css';
+import d from "./NmorphFileUpload.vue2.js";
+import { openBlock as l, createElementBlock as r, normalizeClass as p, createElementVNode as i, renderSlot as m, createVNode as o, TransitionGroup as c, withCtx as t, Fragment as _, renderList as h, createBlock as f, resolveDynamicComponent as u, toDisplayString as v, createCommentVNode as g } from "vue";
+/* empty css                      */
+import y from "../../../_virtual/_plugin-vue_export-helper.js";
+const N = { class: "nmorph-file-upload__trigger" }, k = ["multiple", "disabled"], C = {
+  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(a, I, w, e, D, S) {
+  return l(), r(
+    "div",
+    {
+      class: p(e.modifiers)
+    },
+    [
+      i("div", N, [
+        i("input", {
+          ref: "inputDOMRef",
+          type: "file",
+          multiple: e.props.multiple,
+          disabled: e.props.disabled,
+          class: "nmorph-native-input",
+          onChange: e.handleFileUpload
+        }, null, 40, k),
+        m(a.$slots, "trigger", {}, () => [
+          o(e.NmorphButton, {
+            text: e.computedButtonText,
+            fill: "",
+            disabled: e.props.disabled,
+            onClick: e.openFileSelector
+          }, null, 8, ["text", "disabled"])
+        ])
+      ]),
+      e.files.length > 0 ? (l(), r("div", C, [
+        o(c, {
+          name: "list",
+          tag: "div"
+        }, {
+          default: t(() => [
+            (l(!0), r(
+              _,
+              null,
+              h(e.files, ({ data: n, previewUrl: s }) => (l(), r("div", {
+                key: n.name,
+                class: "nmorph-file-upload__file"
+              }, [
+                o(e.NmorphImagePreview, { src: s }, null, 8, ["src"]),
+                i("div", b, [
+                  o(
+                    e.NmorphIcon,
+                    {
+                      width: "14px",
+                      height: "17px"
+                    },
+                    {
+                      default: t(() => [
+                        (l(), f(u(e.typeFileIconMap(n.type))))
+                      ]),
+                      _: 2
+                      /* DYNAMIC */
+                    },
+                    1024
+                    /* DYNAMIC_SLOTS */
+                  ),
+                  i(
+                    "span",
+                    x,
+                    v(n.name),
+                    1
+                    /* TEXT */
+                  )
+                ]),
+                i("div", F, [
+                  o(e.NmorphButton, {
+                    height: "thin",
+                    "style-type": "transparent",
+                    onClick: (U) => e.removeFile(n.name)
+                  }, {
+                    "icon-only": t(() => [
+                      o(e.NmorphIconCross)
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  }, 1032, ["onClick"])
+                ])
+              ]))),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ]),
+          _: 1
+          /* STABLE */
+        })
+      ])) : g("v-if", !0)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const j = /* @__PURE__ */ y(d, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-file-upload/NmorphFileUpload.vue"]]);
+export {
+  j as default
+};

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

@@ -0,0 +1,78 @@
+import './NmorphFileUpload.css';
+import { defineComponent as x, computed as a, reactive as U, ref as w } from "vue";
+import { useModifiers as A } from "../../../utils/create-modifiers.js";
+import { useI18n as T } from "vue-i18n";
+import q from "../../../assets/icons/doc.svg.js";
+import B from "../../data/nmorph-image-preview/NmorphImagePreview.vue.js";
+import F from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import j from "../../basic/nmorph-button/NmorphButton.vue.js";
+import { NmorphImageResolution as P, NmorphAudioResolution as C, NmorphVideoResolution as L, NmorphArchiveResolution as O } from "./types.js";
+import S from "../../../assets/icons/audio.svg.js";
+import V from "../../../assets/icons/video.svg.js";
+import M from "../../../assets/icons/archive.svg.js";
+import k from "../../../assets/icons/cross.svg.js";
+import D from "../../../assets/icons/image.svg.js";
+const oe = /* @__PURE__ */ x({
+  __name: "NmorphFileUpload",
+  props: {
+    modelValue: { type: Array, required: !1, default: () => [] },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    multiple: { type: Boolean, required: !1, default: !1 },
+    allowedTypes: { type: Array, required: !1, default: () => ["jpg", "jpeg", "png"] },
+    photoWithPreview: { type: Boolean, required: !1, default: !0 },
+    buttonText: { type: String, required: !1, default: "" }
+  },
+  emits: ["update:model-value", "on-unsupported-file-type-error"],
+  setup(d, { expose: f, emit: c }) {
+    const { t: u } = T(), t = d, h = a(() => t.buttonText ? t.buttonText : u("selectFile")), l = (r) => r.split("/")[1], N = (r) => {
+      const o = l(r);
+      let e = q;
+      return o in P && (e = D), o in C && (e = S), o in L && (e = V), o in O && (e = M), e;
+    };
+    let i = U(t.modelValue);
+    const n = w(null), g = () => {
+      t.disabled || !n.value || n.value.click();
+    }, y = (r) => {
+      if (t.disabled) return;
+      const o = r.target;
+      if (o.files) {
+        if (Array.from(o.files).forEach((e) => {
+          const b = l(e.type);
+          if (!t.allowedTypes.includes(b))
+            return s("on-unsupported-file-type-error", e.type);
+          const R = URL.createObjectURL(e), _ = { data: e, previewUrl: R };
+          i.push(_);
+        }), i.length === 0) return;
+        p();
+      }
+    }, p = () => {
+      s("update:model-value", i);
+    }, I = (r) => {
+      if (t.disabled) return;
+      const o = i.findIndex((e) => e.data.name === r);
+      o !== -1 && (URL.revokeObjectURL(i[o].previewUrl), i.splice(o, 1), p());
+    };
+    f({ inputDOMRef: n });
+    const s = c, v = a(
+      () => A({
+        "nmorph-file-upload": [`${t.disabled && "disabled"}`]
+      })
+    ), m = { t: u, props: t, computedButtonText: h, getPlainType: l, typeFileIconMap: N, get files() {
+      return i;
+    }, set files(r) {
+      i = r;
+    }, inputDOMRef: n, openFileSelector: g, handleFileUpload: y, filesChanged: p, removeFile: I, emit: s, modifiers: v, get NmorphButton() {
+      return j;
+    }, get NmorphIcon() {
+      return F;
+    }, get NmorphImagePreview() {
+      return B;
+    }, get NmorphIconCross() {
+      return k;
+    } };
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+  }
+});
+export {
+  oe as default
+};

package/dist/components/form/nmorph-file-upload/types.js

@@ -0,0 +1,16 @@
+var p = /* @__PURE__ */ ((a) => (a.jpeg = "image/jpeg", a.jpg = "image/jpg", a.png = "image/png", a.gif = "image/gif", a["svg-xml"] = "image/svg+xml", a.webp = "image/webp", a))(p || {}), e = /* @__PURE__ */ ((a) => (a.mp4 = "video/mp4", a.webm = "video/webm", a["wideo-ogg"] = "video/ogg", a))(e || {}), g = /* @__PURE__ */ ((a) => (a.mpeg = "audio/mpeg", a["audio-ogg"] = "audio/ogg", a.wav = "audio/wav", a))(g || {}), i = /* @__PURE__ */ ((a) => (a.pdf = "application/pdf", a.msword = "application/msword", a.docx = "application/vnd.openxmlformats-officedocument.wordprocessingml.document", a.xlsx = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", a.pptx = "application/vnd.openxmlformats-officedocument.presentationml.presentation", a.json = "application/json", a.xml = "application/xml", a))(i || {}), d = /* @__PURE__ */ ((a) => (a.zip = "application/zip", a.rar = "application/x-rar-compressed", a["7z"] = "application/x-7z-compressed", a))(d || {});
+const n = {
+  ...p,
+  ...e,
+  ...g,
+  ...i,
+  ...d
+};
+export {
+  d as NmorphArchiveResolution,
+  g as NmorphAudioResolution,
+  i as NmorphDocResolution,
+  p as NmorphImageResolution,
+  e as NmorphVideoResolution,
+  n as resolution
+};