@nmorph/nmorph-ui-kit 2.2.9 → 2.2.12

package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue2.js

@@ -0,0 +1,36 @@
+import './NmorphTagItem.css';
+import { defineComponent as i, computed as s } from "vue";
+import { useModifiers as u } from "../../../../../utils/create-modifiers.js";
+import { NmorphComponentHeight as a } from "../../../../../types/index.js";
+import l from "../../../../../assets/icons/error.svg.js";
+import d from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+const N = /* @__PURE__ */ i({
+  __name: "NmorphTagItem",
+  props: {
+    value: { type: String, required: !0 },
+    text: { type: String, required: !0 },
+    removable: { type: Boolean, required: !1, default: !0 },
+    height: { type: null, required: !1, default: "basic" },
+    design: { type: String, required: !1, default: "nmorph" }
+  },
+  emits: ["close"],
+  setup(o, { expose: n, emit: m }) {
+    n();
+    const e = o, p = s(
+      () => u({
+        nmorph: [a[e.height]],
+        "nmorph-tag-item": [`${e.design === "nmorph" ? "nmorph-design" : ""}`]
+      })
+    ), r = m, t = { props: e, modifiers: p, emit: r, closeHandler: () => {
+      r("close", e.value);
+    }, get NmorphIcon() {
+      return d;
+    }, get NmorphIconError() {
+      return l;
+    } };
+    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
+  }
+});
+export {
+  N as default
+};

package/dist/components/feedback/nmorph-alert/NmorphAlert.css

@@ -0,0 +1 @@
+.nmorph-alert{--background-color: var(--nmorph-overlay-color);display:inline-block;padding:var(--indentation-03) var(--indentation-04);background:var(--background-color);border-radius:var(--default-border-radius)}.nmorph-alert .nmorph-alert__content,.nmorph-alert .nmorph-alert__content-title{color:var(--nmorph-white-color);white-space:pre-line}.nmorph-alert .nmorph-alert__content-title{line-height:1;font-weight:600;font-size:var(--font-size-medium);line-height:var(--line-height-loose)}.nmorph-alert .nmorph-alert__html-wrapper{display:block}.nmorph-alert .nmorph-alert__wrapper{justify-content:space-between}.nmorph-alert .nmorph-alert__wrapper,.nmorph-alert .nmorph-alert__left-side{display:flex;align-items:center}.nmorph-alert .nmorph-alert__icon{margin-right:var(--indentation-03)}.nmorph-alert .nmorph-alert__close{margin-left:var(--indentation-03);cursor:pointer}.nmorph-alert .nmorph-alert__close .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-alert .nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-success-color)}.nmorph-alert.nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-error-color)}.nmorph-alert.nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-warn-color)}.nmorph-alert.nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-info-color)}.nmorph-alert.nmorph-alert--bordered{border:1px solid var(--nmorph-gray-color)}.nmorph-alert.nmorph-alert--fill{width:100%}.nmorph-alert .nmorph-alert__close{align-self:var(--nmorph-alert-close-align)}

package/dist/components/feedback/nmorph-alert/NmorphAlert.vue.js

@@ -0,0 +1,85 @@
+import './NmorphAlert.css';
+import m from "./NmorphAlert.vue2.js";
+import { openBlock as e, createElementBlock as r, normalizeStyle as _, normalizeClass as d, createElementVNode as t, renderSlot as s, createVNode as i, withCtx as c, createBlock as h, resolveDynamicComponent as f, createCommentVNode as l, createTextVNode as a, toDisplayString as p } from "vue";
+/* empty css                 */
+import v from "../../../_virtual/_plugin-vue_export-helper.js";
+const k = ["innerHTML"], y = {
+  key: 1,
+  class: "nmorph-alert__wrapper"
+}, N = { class: "nmorph-alert__left-side" }, w = {
+  key: 0,
+  class: "nmorph-alert__icon"
+}, C = { class: "nmorph-alert__content-wrapper" }, I = { class: "nmorph-alert__content-title" }, b = { class: "nmorph-alert__content" };
+function x(n, V, g, o, z, B) {
+  return o.slots.default || o.props.title || o.props.content || o.props.html ? (e(), r(
+    "div",
+    {
+      key: 0,
+      class: d(o.modifiers),
+      style: _({ "--nmorph-alert-close-align": o.props.closeIconPosition })
+    },
+    [
+      o.props.html ? (e(), r("div", {
+        key: 0,
+        class: "nmorph-alert__html-wrapper",
+        innerHTML: o.props.html
+      }, null, 8, k)) : (e(), r("div", y, [
+        t("div", N, [
+          o.props.showIcon ? (e(), r("div", w, [
+            s(n.$slots, "icon", {}, () => [
+              i(o.NmorphIcon, { size: "medium" }, {
+                default: c(() => [
+                  (e(), h(f(o.iconNameMap[o.props.type])))
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ])
+          ])) : l("v-if", !0),
+          t("div", C, [
+            t("div", I, [
+              o.props.title || o.slots.title ? s(n.$slots, "title", { key: 0 }, () => [
+                a(
+                  p(o.props.title),
+                  1
+                  /* TEXT */
+                )
+              ]) : l("v-if", !0)
+            ]),
+            t("div", b, [
+              s(n.$slots, "default", {}, () => [
+                a(
+                  p(o.props.content),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ])
+          ])
+        ]),
+        o.props.closable ? (e(), r("div", {
+          key: 0,
+          class: "nmorph-alert__close",
+          onClick: o.closeHandler
+        }, [
+          i(o.NmorphIcon, {
+            width: "14px",
+            height: "14px"
+          }, {
+            default: c(() => [
+              i(o.NmorphIconCross)
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ])) : l("v-if", !0)
+      ]))
+    ],
+    6
+    /* CLASS, STYLE */
+  )) : l("v-if", !0);
+}
+const A = /* @__PURE__ */ v(m, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-alert/NmorphAlert.vue"]]);
+export {
+  A as default
+};

package/dist/components/feedback/nmorph-alert/NmorphAlert.vue2.js

@@ -0,0 +1,49 @@
+import './NmorphAlert.css';
+import { defineComponent as d, computed as m, useSlots as u } from "vue";
+import { useModifiers as c } from "../../../utils/create-modifiers.js";
+import { NmorphAlertType as r } from "./types.js";
+import y from "../../../assets/icons/circle-close-filled.svg.js";
+import h from "../../../assets/icons/info-filled.svg.js";
+import I from "../../../assets/icons/warn-triangle-filled.svg.js";
+import N from "../../../assets/icons/success-filled.svg.js";
+import q from "../../../assets/icons/cross.svg.js";
+import _ from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+const A = /* @__PURE__ */ d({
+  __name: "NmorphAlert",
+  props: {
+    id: { type: String, required: !1, default: void 0 },
+    type: { type: null, required: !1, default: "info" },
+    closable: { type: Boolean, required: !1, default: !1 },
+    title: { type: String, required: !1, default: "" },
+    content: { type: String, required: !1, default: "" },
+    fill: { type: Boolean, required: !1, default: !1 },
+    showIcon: { type: Boolean, required: !1, default: !0 },
+    bordered: { type: Boolean, required: !1, default: !0 },
+    html: { type: String, required: !1, default: "" },
+    closeIconPosition: { type: String, required: !1, default: "center" }
+  },
+  emits: ["close"],
+  setup(l, { expose: i, emit: n }) {
+    i();
+    const e = l, o = n, s = m(
+      () => c({
+        "nmorph-alert": [e.type, `${e.bordered && "bordered"}`, `${e.fill && "fill"}`]
+      })
+    ), p = () => {
+      o("close");
+    }, f = {
+      [r.success]: N,
+      [r.warning]: I,
+      [r.info]: h,
+      [r.error]: y
+    }, a = u(), t = { props: e, emit: o, modifiers: s, closeHandler: p, iconNameMap: f, slots: a, get NmorphIcon() {
+      return _;
+    }, get NmorphIconCross() {
+      return q;
+    } };
+    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
+  }
+});
+export {
+  A as default
+};

package/dist/components/feedback/nmorph-alert/types.js

@@ -0,0 +1,4 @@
+var r = /* @__PURE__ */ ((n) => (n.success = "success", n.error = "error", n.warning = "warning", n.info = "info", n))(r || {});
+export {
+  r as NmorphAlertType
+};

package/dist/components/feedback/nmorph-callout/NmorphCallout.css

@@ -0,0 +1 @@
+.nmorph-callout{--callout-color: var(--nmorph-accent-color);position:relative;padding:8px 12px;overflow:hidden;border-radius:4px}.nmorph-callout:before{position:absolute;top:0;left:0;width:3px;height:100%;background:var(--callout-color);content:""}.nmorph-callout:after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--callout-color);opacity:.2;content:""}.nmorph-callout.nmorph-callout--warning{--callout-color: var(--nmorph-warn-color)}.nmorph-callout.nmorph-callout--success{--callout-color: var(--nmorph-success-color)}.nmorph-callout.nmorph-callout--error{--callout-color: var(--nmorph-error-color)}.nmorph-callout .nmorph-callout__title{font-weight:600;font-size:var(--font-size-medium);line-height:var(--line-height-loose);margin-bottom:8px}.nmorph-callout .nmorph-callout__title,.nmorph-callout .nmorph-callout__content{position:relative;z-index:1}.nmorph-callout .nmorph-callout__content{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:pre-wrap}

package/dist/components/feedback/nmorph-callout/NmorphCallout.vue.js

@@ -0,0 +1,36 @@
+import './NmorphCallout.css';
+import r from "./NmorphCallout.vue2.js";
+import { openBlock as t, createElementBlock as e, normalizeClass as l, toDisplayString as n, createCommentVNode as c, createElementVNode as p } from "vue";
+/* empty css                   */
+import a from "../../../_virtual/_plugin-vue_export-helper.js";
+const i = {
+  key: 0,
+  class: "nmorph-callout__title"
+}, s = ["innerHTML"];
+function m(_, d, f, o, h, u) {
+  return t(), e(
+    "div",
+    {
+      class: l(["nmorph-callout", `nmorph-callout--${o.props.type}`])
+    },
+    [
+      o.props.title ? (t(), e(
+        "div",
+        i,
+        n(o.props.title),
+        1
+        /* TEXT */
+      )) : c("v-if", !0),
+      p("div", {
+        class: "nmorph-callout__content",
+        innerHTML: o.props.content
+      }, null, 8, s)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const N = /* @__PURE__ */ a(r, [["render", m], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-callout/NmorphCallout.vue"]]);
+export {
+  N as default
+};

package/dist/components/feedback/nmorph-callout/NmorphCallout.vue2.js

@@ -0,0 +1,18 @@
+import './NmorphCallout.css';
+import { defineComponent as p } from "vue";
+const u = /* @__PURE__ */ p({
+  __name: "NmorphCallout",
+  props: {
+    type: { type: String, required: !1, default: "info" },
+    title: { type: String, required: !1, default: "" },
+    content: { type: String, required: !0 }
+  },
+  setup(t, { expose: r }) {
+    r();
+    const e = { props: t };
+    return Object.defineProperty(e, "__isScriptSetup", { enumerable: !1, value: !0 }), e;
+  }
+});
+export {
+  u as default
+};

package/dist/components/feedback/nmorph-dialog/NmorphDialog.css

@@ -0,0 +1 @@
+.nmorph-dialog{width:var(--width);padding:var(--indentation-04);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);--width: var(--nmorph-dialog-width)}.nmorph-dialog .nmorph-dialog__header{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-loose)}.nmorph-dialog .nmorph-dialog__close-icon{cursor:pointer}

package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue.js

@@ -0,0 +1,60 @@
+import './NmorphDialog.css';
+import t from "./NmorphDialog.vue2.js";
+import { openBlock as i, createBlock as a, withCtx as l, createElementVNode as e, normalizeStyle as d, normalizeClass as c, renderSlot as n, toDisplayString as m, createElementBlock as h, createVNode as s, createCommentVNode as _ } from "vue";
+/* empty css                  */
+import p from "../../../_virtual/_plugin-vue_export-helper.js";
+const f = { class: "nmorph-dialog__header" }, g = { class: "nmorph-dialog__title" }, k = { class: "nmorph-dialog__content" };
+function v(r, N, y, o, C, w) {
+  return i(), a(o.NmorphOverlay, {
+    show: o.isVisible,
+    "z-index": o.props.zIndex,
+    onOnOutsideClick: o.clickOnOverlay
+  }, {
+    default: l(() => [
+      e(
+        "div",
+        {
+          class: c(o.modifiers),
+          style: d({ "--nmorph-dialog-width": o.props.width })
+        },
+        [
+          e("div", f, [
+            n(r.$slots, "header", {}, () => [
+              e(
+                "div",
+                g,
+                m(o.props.title),
+                1
+                /* TEXT */
+              ),
+              o.props.showClose ? (i(), h("div", {
+                key: 0,
+                class: "nmorph-dialog__close-icon",
+                onClick: o.closeHandler
+              }, [
+                s(o.NmorphIcon, null, {
+                  default: l(() => [
+                    s(o.NmorphIconCross)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ])) : _("v-if", !0)
+            ])
+          ]),
+          e("div", k, [
+            n(r.$slots, "default")
+          ])
+        ],
+        6
+        /* CLASS, STYLE */
+      )
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["show", "z-index"]);
+}
+const V = /* @__PURE__ */ p(t, [["render", v], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-dialog/NmorphDialog.vue"]]);
+export {
+  V as default
+};

package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue2.js

@@ -0,0 +1,66 @@
+import './NmorphDialog.css';
+import { defineComponent as f, computed as c, ref as d, watch as y } from "vue";
+import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import T from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import h from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import v from "../../../assets/icons/cross.svg.js";
+const C = /* @__PURE__ */ f({
+  __name: "NmorphDialog",
+  props: {
+    modelValue: { type: Boolean, required: !1, default: !1 },
+    title: { type: String, required: !1, default: "" },
+    width: { type: String, required: !1, default: "330px" },
+    openDelay: { type: Number, required: !1, default: 0 },
+    closeDelay: { type: Number, required: !1, default: 0 },
+    closeOnClickModal: { type: Boolean, required: !1, default: !0 },
+    showClose: { type: Boolean, required: !1, default: !0 },
+    zIndex: { type: Number, required: !1 },
+    closeOnOverlay: { type: Boolean, required: !1, default: !0 }
+  },
+  emits: ["on-close", "update:model-value"],
+  setup(i, { expose: n, emit: m }) {
+    n();
+    const e = i, l = m, p = c(
+      () => O({
+        "nmorph-dialog": []
+      })
+    ), u = d(e.modelValue);
+    let o = null, t = null;
+    y(
+      () => e.modelValue,
+      (r) => {
+        r ? (t && clearTimeout(t), o = setTimeout(() => {
+          u.value = !0;
+        }, e.openDelay)) : (o && clearTimeout(o), t = setTimeout(() => {
+          u.value = !1;
+        }, e.closeDelay));
+      },
+      { immediate: !0 }
+    );
+    const a = () => {
+      l("on-close"), o && clearTimeout(o), t = setTimeout(() => {
+        l("update:model-value", !1);
+      }, e.closeDelay);
+    }, s = { props: e, emit: l, modifiers: p, isVisible: u, get openTimeout() {
+      return o;
+    }, set openTimeout(r) {
+      o = r;
+    }, get closeTimeout() {
+      return t;
+    }, set closeTimeout(r) {
+      t = r;
+    }, closeHandler: a, clickOnOverlay: () => {
+      e.closeOnOverlay && a();
+    }, get NmorphOverlay() {
+      return h;
+    }, get NmorphIcon() {
+      return T;
+    }, get NmorphIconCross() {
+      return v;
+    } };
+    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+  }
+});
+export {
+  C as default
+};

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.css

@@ -0,0 +1 @@
+.nmorph-tooltip{--max-width: 120px;--width: fit-content;--height: fit-content;display:inline-block;width:var(--nmorph-tooltip-width)}.nmorph-tooltip .nmorph-tooltip__content{position:relative}.nmorph-tooltip .nmorph-tooltip__info-content{position:absolute;max-width:var(--max-width);padding:var(--indentation-03);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color);width:var(--width);height:var(--height);background:var(--nmorph-main-color)}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-color:var(--nmorph-main-color) transparent transparent transparent;border-width:8px 8px 0;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-color:transparent var(--nmorph-main-color) transparent transparent;border-width:8px 8px 8px 0;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-color:transparent transparent var(--nmorph-main-color) transparent;border-width:0 8px 8px;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-color:transparent transparent transparent var(--nmorph-main-color);border-width:8px 0 8px 8px;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--force-coords .nmorph-tooltip__info-content{transform:none}

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.vue.js

@@ -0,0 +1,111 @@
+import './NmorphTooltip.css';
+import f from "./NmorphTooltip.vue2.js";
+import { openBlock as t, createElementBlock as n, normalizeStyle as a, normalizeClass as h, createElementVNode as e, renderSlot as d, createBlock as c, TransitionGroup as p, withCtx as _, createCommentVNode as r, toDisplayString as m } from "vue";
+/* empty css                   */
+import v from "../../../_virtual/_plugin-vue_export-helper.js";
+const y = { ref: "slotDOMRef" }, k = { class: "nmorph-tooltip__shadow-content" }, u = {
+  key: 0,
+  class: "nmorph-tooltip__triangle"
+}, w = {
+  key: 0,
+  class: "nmorph-tooltip__info-content"
+}, x = { class: "nmorph-tooltip__shadow-content" }, C = { key: 0 };
+function M(l, s, i, o, g, T) {
+  return t(), n(
+    "div",
+    {
+      class: h(o.modifiers),
+      style: a({ "--nmorph-tooltip-width": o.width })
+    },
+    [
+      e(
+        "div",
+        {
+          ref: "tooltipDOMRef",
+          class: "nmorph-tooltip__content",
+          onMouseenter: o.handleMouseEnter,
+          onMouseleave: o.handleMouseLeave
+        },
+        [
+          e(
+            "div",
+            y,
+            [
+              d(l.$slots, "default")
+            ],
+            512
+            /* NEED_PATCH */
+          ),
+          o.props.forceCoordinate ? (t(), c(p, {
+            key: 0,
+            name: "opacity",
+            tag: "div"
+          }, {
+            default: _(() => [
+              o.showTooltip && o.props.text ? (t(), n(
+                "div",
+                {
+                  key: 0,
+                  class: "nmorph-tooltip__info-content",
+                  style: a({ left: i.forceCoordinate?.x, bottom: i.forceCoordinate?.y }),
+                  ref: "tooltipBody"
+                },
+                [
+                  e("div", k, [
+                    o.props.forceCoordinate ? r("v-if", !0) : (t(), n("div", u)),
+                    e(
+                      "span",
+                      null,
+                      m(i.text),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ],
+                4
+                /* STYLE */
+              )) : r("v-if", !0)
+            ]),
+            _: 1
+            /* STABLE */
+          })) : (t(), c(p, {
+            key: 1,
+            name: "opacity",
+            tag: "div"
+          }, {
+            default: _(() => [
+              o.showTooltip ? (t(), n("div", w, [
+                e("div", x, [
+                  s[0] || (s[0] = e(
+                    "div",
+                    { class: "nmorph-tooltip__triangle" },
+                    null,
+                    -1
+                    /* HOISTED */
+                  )),
+                  o.props.text ? (t(), n(
+                    "span",
+                    C,
+                    m(i.text),
+                    1
+                    /* TEXT */
+                  )) : d(l.$slots, "content", { key: 1 })
+                ])
+              ])) : r("v-if", !0)
+            ]),
+            _: 3
+            /* FORWARDED */
+          }))
+        ],
+        544
+        /* NEED_HYDRATION, NEED_PATCH */
+      )
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const E = /* @__PURE__ */ v(f, [["render", M], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-tooltip/NmorphTooltip.vue"]]);
+export {
+  E as default
+};

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.vue2.js

@@ -0,0 +1,37 @@
+import './NmorphTooltip.css';
+import { defineComponent as _, ref as o, computed as i } from "vue";
+import { useModifiers as h } from "../../../utils/create-modifiers.js";
+import { usePlacement as y } from "../../../hooks/use-placement.js";
+const w = /* @__PURE__ */ _({
+  __name: "NmorphTooltip",
+  props: {
+    text: { type: String, required: !1, default: "" },
+    position: { type: null, required: !1, default: "top" },
+    forceShow: { type: Boolean, required: !1, default: !1 },
+    forceCoordinate: { type: [Object, null], required: !1, default: null }
+  },
+  setup(u, { expose: f }) {
+    const e = u, t = o(e.forceShow), n = o(null), r = o(null), { placement: l } = y({
+      initialPlacement: e.position,
+      contentDOMElement: n,
+      relativeElement: r
+    }), c = i(
+      () => h({
+        "nmorph-tooltip": [
+          l.value,
+          `${!!e.forceCoordinate?.x && !!e.forceCoordinate?.y && "force-coords"}`
+        ]
+      })
+    ), p = () => {
+      t.value = !0;
+    }, d = () => {
+      e.forceShow || (t.value = !1);
+    }, m = i(() => e.forceCoordinate ? "100%" : "auto"), s = o(null);
+    f({ tooltipBody: s });
+    const a = { props: e, showTooltip: t, tooltipDOMRef: n, slotDOMRef: r, placement: l, modifiers: c, handleMouseEnter: p, handleMouseLeave: d, width: m, tooltipBody: s };
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+  }
+});
+export {
+  w as default
+};

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.css

@@ -0,0 +1 @@
+.nmorph-autocomplete .nmorph-autocomplete__list-item{padding:var(--indentation-02) var(--indentation-04);cursor:pointer}.nmorph-autocomplete .nmorph-autocomplete__list-item:last-child{border-bottom-left-radius:var(--indentation-02);border-bottom-right-radius:var(--indentation-02)}.nmorph-autocomplete .nmorph-autocomplete__loading{display:flex;align-items:center;justify-content:center;height:100px}.nmorph-autocomplete .nmorph-autocomplete__list-item:hover{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue.js

@@ -0,0 +1,97 @@
+import './NmorphAutocomplete.css';
+import m from "./NmorphAutocomplete.vue2.js";
+import { openBlock as o, createElementBlock as l, normalizeClass as p, createElementVNode as n, createVNode as t, createBlock as s, withCtx as c, renderSlot as d, Fragment as h, renderList as _, createTextVNode as f, toDisplayString as u, createCommentVNode as v } from "vue";
+/* empty css                        */
+import k from "../../../_virtual/_plugin-vue_export-helper.js";
+const N = { class: "nmorph-autocomplete__input-content" }, b = {
+  ref: "nmorphAutocompleteDOMRef",
+  class: "nmorph-autocomplete__input"
+}, g = {
+  key: 0,
+  class: "nmorph-autocomplete__loading"
+}, x = {
+  key: 1,
+  class: "nmorph-autocomplete__list"
+}, y = ["onClick"];
+function V(a, C, z, e, A, D) {
+  return o(), l(
+    "div",
+    {
+      class: p(e.modifiers)
+    },
+    [
+      n("div", N, [
+        n(
+          "div",
+          b,
+          [
+            t(e.NmorphTextInput, {
+              id: e.props.id,
+              name: e.props.name,
+              autocomplete: e.props.autocomplete,
+              height: e.props.height,
+              disabled: e.props.disabled,
+              "model-value": e.initialValue,
+              placeholder: e.props.placeholder,
+              clearable: e.props.clearable,
+              onFocus: e.focusHandler,
+              "onUpdate:modelValue": e.updateValueHandler
+            }, null, 8, ["id", "name", "autocomplete", "height", "disabled", "model-value", "placeholder", "clearable"])
+          ],
+          512
+          /* NEED_PATCH */
+        )
+      ]),
+      e.nmorphAutocompleteDOMRef ? (o(), s(e.NmorphDropdown, {
+        key: 0,
+        open: e.open,
+        "relative-element": e.nmorphAutocompleteDOMRef,
+        "y-offset": 1,
+        "z-index": e.props.zIndex,
+        onOnOutsideClick: e.closeHandler
+      }, {
+        default: c(() => [
+          e.loader ? (o(), l("div", g, [
+            d(a.$slots, "loader", {}, () => [
+              t(e.NmorphIcon, { size: "large" }, {
+                default: c(() => [
+                  t(e.NmorphIconLoader)
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ])
+          ])) : (o(), l("div", x, [
+            (o(!0), l(
+              h,
+              null,
+              _(e.filteredList, (r, i) => (o(), l("div", {
+                key: i,
+                class: "nmorph-autocomplete__list-item",
+                onClick: () => e.clickHandler(r)
+              }, [
+                d(a.$slots, "default", { scope: r }, () => [
+                  f(
+                    u(r.value),
+                    1
+                    /* TEXT */
+                  )
+                ])
+              ], 8, y))),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ]))
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["open", "relative-element", "z-index"])) : v("v-if", !0)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const L = /* @__PURE__ */ k(m, [["render", V], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
+export {
+  L as default
+};