@milaboratories/uikit 2.2.90 → 2.2.92

package/dist/components/PlDialogModal/PlDialogModal.vue.js

@@ -0,0 +1,97 @@
+(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".pl-dialog-modal{--padding-top: 24px;--border-radius: 16px;--title-padding: 24px 24px 0 24px;min-height:400px;max-height:calc(100vh - 48px);max-width:calc(100% - 48px);min-width:448px;position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%);background-color:#fff;padding-top:var(--padding-top);display:flex;flex-direction:column;box-shadow:0 2px 8px #24223d1f;border-radius:var(--border-radius)}.pl-dialog-modal.has-title{--padding-top: 0}.pl-dialog-modal.has-content{--title-padding: 24px}.pl-dialog-modal__title{display:flex;align-items:center;font-family:var(--font-family-base);font-size:28px;font-style:normal;font-weight:500;line-height:32px;letter-spacing:-.56px;padding:var(--title-padding)}.pl-dialog-modal__content{flex:1;display:flex;flex-direction:column;gap:24px;padding:16px 24px 40px;min-height:0;line-height:20px;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dialog-modal__content::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dialog-modal__content::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dialog-modal__content::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dialog-modal__content.no-content-gutters{padding:0}.pl-dialog-modal__content.no-top-content-gutter{padding-top:0}.pl-dialog-modal__actions{display:flex;align-items:center;gap:6px;min-height:88px;padding:0 24px}.pl-dialog-modal__actions button{min-width:160px}.pl-dialog-modal__actions.has-top-border{border-top:1px solid var(--border-color-div-grey)}.pl-dialog-modal .alert-error{background-color:var(--txt-error);color:#fff;font-weight:500;padding:12px;border-radius:6px}.pl-dialog-modal .alert-warning{background-color:#fee0a3;font-weight:500;padding:12px;border-radius:6px}.pl-dialog-modal__shadow{position:absolute;z-index:var(--z-dialog);top:var(--title-bar-height);left:0;right:0;bottom:0;background-color:#000000a3}.pl-dialog-modal .close-modal-btn{position:absolute;top:4px;right:4px}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { defineComponent as H, useSlots as _, ref as v, computed as V, createBlock as c, openBlock as t, Teleport as w, createVNode as b, Transition as x, withCtx as T, createElementBlock as r, createCommentVNode as l, createElementVNode as f, mergeProps as $, unref as n, withModifiers as E, renderSlot as m, normalizeClass as h } from "vue";
+import { useEventListener as G } from "../../composition/useEventListener.js";
+
+import O from "../../utils/PlCloseModalBtn.vue.js";
+const z = {
+  key: 1,
+  class: "pl-dialog-modal__title"
+}, M = {
+  inheritAttrs: !1
+}, D = /* @__PURE__ */ H({
+  ...M,
+  __name: "PlDialogModal",
+  props: {
+    modelValue: { type: Boolean },
+    width: { default: "448px" },
+    height: { default: "auto" },
+    minHeight: { default: "auto" },
+    maxHeight: { default: "auto" },
+    closable: { type: Boolean, default: !0 },
+    noContentGutters: { type: Boolean, default: !1 },
+    noTopContentGutter: { type: Boolean },
+    actionsHasTopBorder: { type: Boolean, default: !0 },
+    closeOnOutsideClick: { type: Boolean },
+    size: { default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(g, { emit: y }) {
+    const o = _(), i = y, s = g, d = v(), k = V(() => {
+      const { width: e, height: a, minHeight: p, maxHeight: B, size: u } = s;
+      return u === "small" ? {
+        width: "448px",
+        height: "440px",
+        minHeight: "auto",
+        maxHeight: "auto"
+      } : u === "medium" ? {
+        width: "720px",
+        height: "720px",
+        minHeight: "auto",
+        maxHeight: "auto"
+      } : u === "large" ? {
+        width: "1080px",
+        height: "880px",
+        minHeight: "auto",
+        maxHeight: "auto"
+      } : { width: e, height: a, minHeight: p, maxHeight: B };
+    });
+    function C(e) {
+      d.value && s.closeOnOutsideClick && document.contains(e.target) && !d.value.contains(e.target) && i("update:modelValue", !1);
+    }
+    return G(document.body, "keyup", (e) => {
+      s.modelValue && e.code === "Escape" && i("update:modelValue", !1);
+    }), (e, a) => (t(), c(w, { to: "body" }, [
+      b(x, { name: "dialog" }, {
+        default: T(() => [
+          e.modelValue ? (t(), r("div", {
+            key: 0,
+            class: "pl-dialog-modal__shadow",
+            onClick: C
+          }, [
+            f("div", $(e.$attrs, {
+              ref_key: "modal",
+              ref: d,
+              class: ["pl-dialog-modal", { "has-title": n(o).title, "has-content": n(o).default }],
+              style: k.value
+            }), [
+              e.closable ? (t(), c(O, {
+                key: 0,
+                class: "close-modal-btn",
+                onClick: a[0] || (a[0] = E((p) => i("update:modelValue", !1), ["stop"]))
+              })) : l("", !0),
+              n(o).title ? (t(), r("div", z, [
+                m(e.$slots, "title")
+              ])) : l("", !0),
+              f("div", {
+                class: h(["pl-dialog-modal__content", { "no-content-gutters": e.noContentGutters, "no-top-content-gutter": e.noTopContentGutter }])
+              }, [
+                m(e.$slots, "default")
+              ], 2),
+              n(o).actions ? (t(), r("div", {
+                key: 2,
+                class: h(["pl-dialog-modal__actions", { "has-top-border": e.actionsHasTopBorder }])
+              }, [
+                m(e.$slots, "actions")
+              ], 2)) : l("", !0)
+            ], 16)
+          ])) : l("", !0)
+        ]),
+        _: 3
+      })
+    ]));
+  }
+});
+export {
+  D as default
+};
+//# sourceMappingURL=PlDialogModal.vue.js.map

package/dist/components/PlDialogModal/PlDialogModal.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlDialogModal.vue.js","sources":["../../../src/components/PlDialogModal/PlDialogModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { useEventListener } from '../../composition/useEventListener';\nimport './pl-dialog-modal.scss';\nimport { computed, ref, useSlots } from 'vue';\nimport PlCloseModalBtn from '../../utils/PlCloseModalBtn.vue';\nimport type { Size } from '../../types';\n\nconst slots = useSlots();\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Determines whether the modal is open\n     */\n    modelValue: boolean;\n    /**\n     * css width (default value is `448px`)\n     */\n    width?: string;\n    /**\n     * css height (default value is `auto`)\n     */\n    height?: string;\n    /**\n     * css min-height (default value is `auto`)\n     */\n    minHeight?: string;\n    /**\n     * css min-height (default value is `auto` but recommended is 440px)\n     */\n    maxHeight?: string;\n    /**\n     * Enables a button to close the modal (default: `true`)\n     */\n    closable?: boolean;\n    /**\n     * If `true` content gutters are removed\n     */\n    noContentGutters?: boolean;\n    /**\n     * If `true` top content gutter is removed\n     */\n    noTopContentGutter?: boolean;\n    /**\n     * Actions slot has a top border (default: `true`)\n     */\n    actionsHasTopBorder?: boolean;\n    /**\n     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n     */\n    closeOnOutsideClick?: boolean;\n    /**\n     * Predefined size (standard small | medium | large). Takes precedence over (min|max)(width|height) properties. Not defined by default.\n     */\n    size?: Size | undefined;\n  }>(),\n  {\n    width: '448px',\n    minHeight: 'auto',\n    maxHeight: 'auto',\n    height: 'auto',\n    closable: true,\n    noContentGutters: false,\n    actionsHasTopBorder: true,\n    size: undefined,\n  },\n);\n\nconst modal = ref<HTMLElement>();\n\nconst style = computed(() => {\n  const { width, height, minHeight, maxHeight, size } = props;\n\n  if (size === 'small') {\n    return {\n      width: '448px',\n      height: '440px',\n      minHeight: 'auto',\n      maxHeight: 'auto',\n    };\n  }\n\n  if (size === 'medium') {\n    return {\n      width: '720px',\n      height: '720px',\n      minHeight: 'auto',\n      maxHeight: 'auto',\n    };\n  }\n\n  if (size === 'large') {\n    return {\n      width: '1080px',\n      height: '880px',\n      minHeight: 'auto',\n      maxHeight: 'auto',\n    };\n  }\n\n  return { width, height, minHeight, maxHeight };\n});\n\nfunction onClickShadow(ev: Event) {\n  if (modal.value && props.closeOnOutsideClick && document.contains(ev.target as Node) && !modal.value.contains(ev.target as Node)) {\n    emit('update:modelValue', false);\n  }\n}\n\nuseEventListener(document.body, 'keyup', (ev) => {\n  if (props.modelValue && ev.code === 'Escape') {\n    emit('update:modelValue', false);\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"dialog\">\n      <div v-if=\"modelValue\" class=\"pl-dialog-modal__shadow\" @click=\"onClickShadow\">\n        <div\n          v-bind=\"$attrs\"\n          ref=\"modal\"\n          class=\"pl-dialog-modal\"\n          :class=\"{ 'has-title': slots.title, 'has-content': slots.default }\"\n          :style=\"style\"\n        >\n          <PlCloseModalBtn v-if=\"closable\" class=\"close-modal-btn\" @click.stop=\"emit('update:modelValue', false)\" />\n          <div v-if=\"slots.title\" class=\"pl-dialog-modal__title\">\n            <slot name=\"title\" />\n          </div>\n          <div class=\"pl-dialog-modal__content\" :class=\"{ 'no-content-gutters': noContentGutters, 'no-top-content-gutter': noTopContentGutter }\">\n            <slot />\n          </div>\n          <div v-if=\"slots.actions\" class=\"pl-dialog-modal__actions\" :class=\"{ 'has-top-border': actionsHasTopBorder }\">\n            <slot name=\"actions\" />\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"names":["__default__","slots","useSlots","emit","__emit","props","__props","modal","ref","style","computed","width","height","minHeight","maxHeight","size","onClickShadow","ev","useEventListener"],"mappings":";;;;;;;GACeA,IAAA;AAAA,EACb,cAAc;AAChB;;;;;;;;;;;;;;;;;;AAUA,UAAMC,IAAQC,EAAS,GAEjBC,IAAOC,GAEPC,IAAQC,GA2DRC,IAAQC,EAAiB,GAEzBC,IAAQC,EAAS,MAAM;AAC3B,YAAM,EAAE,OAAAC,GAAO,QAAAC,GAAQ,WAAAC,GAAW,WAAAC,GAAW,MAAAC,MAASV;AAEtD,aAAIU,MAAS,UACJ;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,MACb,IAGEA,MAAS,WACJ;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,MACb,IAGEA,MAAS,UACJ;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,MACb,IAGK,EAAE,OAAAJ,GAAO,QAAAC,GAAQ,WAAAC,GAAW,WAAAC,EAAU;AAAA,IAAA,CAC9C;AAED,aAASE,EAAcC,GAAW;AAChC,MAAIV,EAAM,SAASF,EAAM,uBAAuB,SAAS,SAASY,EAAG,MAAc,KAAK,CAACV,EAAM,MAAM,SAASU,EAAG,MAAc,KAC7Hd,EAAK,qBAAqB,EAAK;AAAA,IACjC;AAGF,WAAAe,EAAiB,SAAS,MAAM,SAAS,CAACD,MAAO;AAC/C,MAAIZ,EAAM,cAAcY,EAAG,SAAS,YAClCd,EAAK,qBAAqB,EAAK;AAAA,IACjC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlDialogModal/PlDialogModal.vue2.js

@@ -0,0 +1,5 @@
+import f from "./PlDialogModal.vue.js";
+export {
+  f as default
+};
+//# sourceMappingURL=PlDialogModal.vue2.js.map

package/dist/components/PlDialogModal/PlDialogModal.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlDialogModal.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/PlDialogModal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PlDialogModal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/PlDropdown/PlDropdown.vue.d.ts

@@ -0,0 +1,79 @@
+import { ListOption } from '../../types';
+/**
+ * A component for selecting one value from a list of options
+ */
+declare const _default: <M = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: M | undefined) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & {
+        /**
+         * The current selected value of the dropdown.
+         */
+        modelValue: M;
+        /**
+         * The label text for the dropdown field (optional)
+         */
+        label?: string;
+        /**
+         * List of available options for the dropdown
+         */
+        options?: Readonly<ListOption<M>[]>;
+        /**
+         * A helper text displayed below the dropdown when there are no errors (optional).
+         */
+        helper?: string;
+        /**
+         * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).
+         */
+        loadingOptionsHelper?: string;
+        /**
+         * Error message displayed below the dropdown (optional)
+         */
+        error?: unknown;
+        /**
+         * Placeholder text shown when no value is selected.
+         */
+        placeholder?: string;
+        /**
+         * Enables a button to clear the selected value (default: false)
+         */
+        clearable?: boolean;
+        /**
+         * If `true`, the dropdown component is marked as required.
+         */
+        required?: boolean;
+        /**
+         * If `true`, the dropdown component is disabled and cannot be interacted with.
+         */
+        disabled?: boolean;
+        /**
+         * Custom icon (16px) class for the dropdown arrow (optional)
+         */
+        arrowIcon?: string;
+        /**
+         * Custom icon (24px) class for the dropdown arrow (optional)
+         */
+        arrowIconLarge?: string;
+        /**
+         * Option list item size
+         */
+        optionSize?: "small" | "medium";
+    } & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        [key: string]: unknown;
+    }> & {
+        [key: string]: unknown;
+    };
+    emit: (e: "update:modelValue", value: M | undefined) => void;
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};
+//# sourceMappingURL=PlDropdown.vue.d.ts.map

package/dist/components/PlDropdown/PlDropdown.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlDropdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"names":[],"mappings":"AAAA,OA0XO,oBAAoB,CAAC;AAM5B,OAAO,KAAK,EAAE,UAAU,EAAwB,MAAM,aAAa,CAAC;AAYpE;;GAEG;yBACc,CAAC,yBACJ,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAslB1D,mBAAmB,CAAC;;;QA3kBxB;;WAEG;oBACS,CAAC;QACb;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACnC;;WAEG;iBACM,MAAM;QACf;;WAEG;+BACoB,MAAM;QAC7B;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;WAEG;oBACS,OAAO;QACnB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;oBACS,MAAM;QAClB;;WAEG;yBACc,MAAM;QACvB;;WAEG;qBACU,OAAO,GAAG,QAAQ;mBAwhB2D,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;;;;cAllBL,mBAAmB,SAAS,CAAC,GAAG,SAAS,KAAG,IAAI;;;;YAulBV,OAAO,CAAC,OAAO,WAAW,CAAC;;AAhmBvE,wBAgmB4E;AAG5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/PlDropdown/PlDropdown.vue.js

@@ -0,0 +1,236 @@
+(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.pl-dropdown__options{--option-hover-bg: var(--btn-sec-hover-grey);z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);position:absolute;background-color:var(--pl-dropdown-options-bg);border-radius:6px;max-height:244px;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:var(--control-height);background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown__options .option{position:relative;padding:0 30px 0 10px;height:var(--control-height);line-height:var(--control-height);cursor:pointer;-webkit-user-select:none;user-select:none}.pl-dropdown__options .option .checkmark{position:absolute;display:none;right:10px;top:50%;transform:translateY(-50%)}.pl-dropdown__options .option>span{display:block;overflow:hidden;white-space:nowrap;max-width:100%;text-overflow:ellipsis}.pl-dropdown__options .option.selected{background-color:var(--color-active-select)}.pl-dropdown__options .option.selected .checkmark{display:block}.pl-dropdown__options .option.active:not(.selected){background-color:var(--option-hover-bg)}.pl-dropdown__options .option:hover{background-color:var(--option-hover-bg)}.pl-dropdown{--contour-color: var(--txt-01);--contour-border-width: 1px;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}.pl-dropdown__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-dropdown label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);color:var(--txt-01)}.pl-dropdown__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding-left:11px;min-height:var(--control-height);line-height:var(--control-height);display:flex;flex-direction:row;align-items:center;cursor:pointer}.pl-dropdown__field .input-value{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:row;align-items:center;padding:0 60px 0 11px;pointer-events:none;line-height:20px;color:var(--txt-01);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit}.pl-dropdown__field input{min-height:calc(var(--control-height) - 2px);line-height:20px;font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown__field input:focus{outline:none}.pl-dropdown__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown__controls .mask-16,.pl-dropdown__controls .mask-24{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-dropdown__controls .clear{--icon-color: var(--ic-02)}.pl-dropdown__controls .mask-loading{--icon-color: var(--ic-accent);animation:spin 2.5s linear infinite}.pl-dropdown__arrow-wrapper{display:flex;align-items:center;min-height:var(--control-height);padding-right:11px}.pl-dropdown .arrow-icon{cursor:pointer}.pl-dropdown .arrow-icon.arrow-icon-default{transition:transform .2s;background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown.open,.pl-dropdown:focus-within{z-index:1;--label-color: var(--txt-focus)}.pl-dropdown.open .pl-dropdown__container{z-index:1000}.pl-dropdown.open .pl-dropdown__field{border-radius:6px 6px 0 0}.pl-dropdown.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-dropdown:hover{--contour-color: var(--control-hover-color)}.pl-dropdown:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none;-webkit-user-select:none;user-select:none}.pl-dropdown.disabled .input-value{color:var(--dis-01)}
+.ui-lt-container{min-width:0;white-space:nowrap;overflow:hidden;position:relative;border-radius:5px}.ui-lt-container span{display:inline-block;overflow:hidden;text-overflow:ellipsis;width:100%;vertical-align:bottom;pointer-events:all!important}.ui-lt-container .ui-lt-animate{position:relative;animation:left-to-right var(--5deba9de) infinite alternate linear;overflow:unset!important;text-overflow:unset!important;width:fit-content!important}@keyframes left-to-right{0%{transform:translate(0);left:0%}to{transform:translate(-101%);left:101%}}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+import { defineComponent as oe, useSlots as te, ref as z, useTemplateRef as ne, reactive as le, computed as s, unref as f, watch as B, watchPostEffect as re, createElementBlock as a, openBlock as r, createElementVNode as p, createCommentVNode as i, normalizeClass as g, createBlock as v, createVNode as F, withDirectives as ae, vModelText as se, withCtx as I, createTextVNode as ie, toDisplayString as h, renderSlot as M, withModifiers as b, Fragment as de, renderList as ce } from "vue";
+
+import { tap as ue } from "../../helpers/functions.js";
+import pe from "../PlTooltip/PlTooltip.vue.js";
+import fe from "../../utils/DoubleContour.vue.js";
+import { useLabelNotch as ve } from "../../utils/useLabelNotch.js";
+import { deepEqual as V } from "../../helpers/objects.js";
+import me from "../DropdownListItem.vue.js";
+import he from "../LongText.vue.js";
+
+import { normalizeListOptions as _e } from "../../helpers/utils.js";
+import we from "../PlIcon16/PlIcon16.vue.js";
+import ke from "../PlIcon24/PlIcon24.vue.js";
+import ye from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
+import ge from "../../generated/components/svg/images/SvgRequired.vue2.js";
+import { getErrorMessage as Ie } from "../../helpers/error.js";
+const be = ["tabindex"], Ve = { class: "pl-dropdown__container" }, Ce = { class: "pl-dropdown__field" }, Ee = ["disabled", "placeholder"], Le = {
+  key: 0,
+  class: "input-value"
+}, xe = { class: "pl-dropdown__controls" }, Ae = {
+  key: 2,
+  class: "arrow-icon arrow-icon-default"
+}, Oe = { key: 0 }, Se = {
+  key: 0,
+  class: "nothing-found"
+}, $e = {
+  key: 0,
+  class: "pl-dropdown__error"
+}, De = {
+  key: 1,
+  class: "pl-dropdown__helper"
+}, ze = {
+  key: 2,
+  class: "pl-dropdown__helper"
+}, Be = {
+  name: "PlDropdown"
+}, Ye = /* @__PURE__ */ oe({
+  ...Be,
+  props: {
+    modelValue: {},
+    label: { default: "" },
+    options: { default: void 0 },
+    helper: { default: void 0 },
+    loadingOptionsHelper: { default: void 0 },
+    error: { default: void 0 },
+    placeholder: { default: "..." },
+    clearable: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    arrowIcon: { default: void 0 },
+    arrowIconLarge: { default: void 0 },
+    optionSize: { default: "small" }
+  },
+  emits: ["update:modelValue"],
+  setup(N, { emit: R }) {
+    const C = R, l = N, T = te(), d = z(), w = z(), E = ne("overlay"), o = le({
+      search: "",
+      activeIndex: -1,
+      open: !1,
+      optionsHeight: 0
+    }), P = () => ue(
+      m.value.findIndex((e) => V(e.value, l.modelValue)),
+      (e) => e < 0 ? 0 : e
+    ), q = () => o.activeIndex = P(), _ = s(() => l.options === void 0), k = s(() => _.value ? !0 : l.disabled), L = s(() => (l.options ?? []).findIndex((e) => V(e.value, l.modelValue))), x = s(() => {
+      if (!_.value) {
+        if (l.error)
+          return Ie(l.error);
+        if (l.modelValue !== void 0 && L.value === -1)
+          return "The selected value is not one of the options";
+      }
+    }), A = s(
+      () => _e(l.options ?? []).map((e, t) => ({
+        ...e,
+        index: t,
+        isSelected: t === L.value,
+        isActive: t === o.activeIndex
+      }))
+    ), O = s(() => {
+      const t = f(A).find((n) => V(n.value, l.modelValue));
+      return (t == null ? void 0 : t.label) || l.modelValue;
+    }), H = s(() => !o.open && l.modelValue ? "" : l.modelValue ? String(O.value) : l.placeholder), U = s(() => l.modelValue !== void 0 && l.modelValue !== null), m = s(() => {
+      const e = A.value;
+      return o.search ? e.filter((t) => {
+        const n = o.search.toLowerCase();
+        return t.label.toLowerCase().includes(n) || t.description && t.description.toLowerCase().includes(n) ? !0 : typeof t.value == "string" ? t.value.toLowerCase().includes(n) : t.value === o.search;
+      }) : e;
+    }), K = s(() => k.value ? void 0 : "0"), S = (e) => {
+      var t;
+      C("update:modelValue", e), o.search = "", o.open = !1, (t = d == null ? void 0 : d.value) == null || t.focus();
+    }, j = () => C("update:modelValue", void 0), G = () => {
+      var e;
+      return (e = w.value) == null ? void 0 : e.focus();
+    }, J = () => {
+      o.open = !o.open, o.open || (o.search = "");
+    }, Q = () => o.open = !0, W = (e) => {
+      var n, c, u;
+      const t = e.relatedTarget;
+      !((n = d.value) != null && n.contains(t)) && !((u = (c = E.value) == null ? void 0 : c.listRef) != null && u.contains(t)) && (o.search = "", o.open = !1);
+    }, X = (e) => {
+      var $, D;
+      if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code))
+        e.preventDefault();
+      else
+        return;
+      const { open: t, activeIndex: n } = o;
+      if (!t) {
+        e.code === "Enter" && (o.open = !0);
+        return;
+      }
+      e.code === "Escape" && (o.open = !1, ($ = d.value) == null || $.focus());
+      const c = f(m), { length: u } = c;
+      if (!u)
+        return;
+      e.code === "Enter" && S((D = c.find((y) => y.index === n)) == null ? void 0 : D.value);
+      const Y = c.findIndex((y) => y.index === n) ?? -1, Z = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, ee = Math.abs(Y + Z + u) % u;
+      o.activeIndex = m.value[ee].index ?? -1;
+    };
+    return ve(d), B(() => l.modelValue, q, { immediate: !0 }), B(
+      () => o.open,
+      (e) => {
+        var t;
+        return e ? (t = w.value) == null ? void 0 : t.focus() : "";
+      }
+    ), re(() => {
+      var e;
+      o.search, o.activeIndex >= 0 && o.open && ((e = E.value) == null || e.scrollIntoActive());
+    }), (e, t) => (r(), a("div", {
+      class: "pl-dropdown__envelope",
+      onClick: G
+    }, [
+      p("div", {
+        ref_key: "rootRef",
+        ref: d,
+        tabindex: K.value,
+        class: g(["pl-dropdown", { open: o.open, error: e.error, disabled: k.value }]),
+        onKeydown: X,
+        onFocusout: W
+      }, [
+        p("div", Ve, [
+          p("div", Ce, [
+            ae(p("input", {
+              ref_key: "input",
+              ref: w,
+              "onUpdate:modelValue": t[0] || (t[0] = (n) => o.search = n),
+              type: "text",
+              tabindex: "-1",
+              disabled: k.value,
+              placeholder: H.value,
+              spellcheck: "false",
+              autocomplete: "chrome-off",
+              onFocus: Q
+            }, null, 40, Ee), [
+              [se, o.search]
+            ]),
+            o.open ? i("", !0) : (r(), a("div", Le, [
+              F(he, null, {
+                default: I(() => [
+                  ie(h(O.value), 1)
+                ]),
+                _: 1
+              })
+            ])),
+            p("div", xe, [
+              _.value ? (r(), v(f(ke), {
+                key: 0,
+                name: "loading"
+              })) : i("", !0),
+              e.clearable && U.value ? (r(), v(f(we), {
+                key: 1,
+                class: "clear",
+                name: "delete-clear",
+                onClick: b(j, ["stop"])
+              })) : i("", !0),
+              M(e.$slots, "append"),
+              p("div", {
+                class: "pl-dropdown__arrow-wrapper",
+                onClick: b(J, ["stop"])
+              }, [
+                e.arrowIconLarge ? (r(), a("div", {
+                  key: 0,
+                  class: g(["arrow-icon", [`icon-24 ${e.arrowIconLarge}`]])
+                }, null, 2)) : e.arrowIcon ? (r(), a("div", {
+                  key: 1,
+                  class: g(["arrow-icon", [`icon-16 ${e.arrowIcon}`]])
+                }, null, 2)) : (r(), a("div", Ae))
+              ])
+            ])
+          ]),
+          e.label ? (r(), a("label", Oe, [
+            e.required ? (r(), v(ge, { key: 0 })) : i("", !0),
+            p("span", null, h(e.label), 1),
+            T.tooltip ? (r(), v(f(pe), {
+              key: 1,
+              class: "info",
+              position: "top"
+            }, {
+              tooltip: I(() => [
+                M(e.$slots, "tooltip")
+              ]),
+              _: 3
+            })) : i("", !0)
+          ])) : i("", !0),
+          o.open ? (r(), v(f(ye), {
+            key: 1,
+            ref: "overlay",
+            root: d.value,
+            class: "pl-dropdown__options",
+            tabindex: "-1",
+            gap: 3
+          }, {
+            default: I(() => [
+              (r(!0), a(de, null, ce(m.value, (n, c) => (r(), v(me, {
+                key: c,
+                option: n,
+                "is-selected": n.isSelected,
+                "is-hovered": n.isActive,
+                size: e.optionSize,
+                onClick: b((u) => S(n.value), ["stop"])
+              }, null, 8, ["option", "is-selected", "is-hovered", "size", "onClick"]))), 128)),
+              m.value.length ? i("", !0) : (r(), a("div", Se, "Nothing found"))
+            ]),
+            _: 1
+          }, 8, ["root"])) : i("", !0),
+          F(fe, { class: "pl-dropdown__contour" })
+        ])
+      ], 42, be),
+      x.value ? (r(), a("div", $e, h(x.value), 1)) : _.value && e.loadingOptionsHelper ? (r(), a("div", De, h(e.loadingOptionsHelper), 1)) : e.helper ? (r(), a("div", ze, h(e.helper), 1)) : i("", !0)
+    ]));
+  }
+});
+export {
+  Ye as default
+};
+//# sourceMappingURL=PlDropdown.vue.js.map

package/dist/components/PlDropdown/PlDropdown.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlDropdown.vue.js","sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: 'PlDropdown',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport './pl-dropdown.scss';\nimport { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';\nimport { tap } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption, ListOptionNormalized } from '../../types';\nimport { deepEqual } from '../../helpers/objects';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport LongText from '../LongText.vue';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { DropdownOverlay } from '../../utils/DropdownOverlay';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: 'update:modelValue', value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected value of the dropdown.\n     */\n    modelValue: M;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Custom icon (16px) class for the dropdown arrow (optional)\n     */\n    arrowIcon?: string;\n    /**\n     * Custom icon (24px) class for the dropdown arrow (optional)\n     */\n    arrowIconLarge?: string;\n    /**\n     * Option list item size\n     */\n    optionSize?: 'small' | 'medium';\n  }>(),\n  {\n    label: '',\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: '...',\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: 'small',\n    options: undefined,\n  },\n);\n\nconst slots = defineSlots<{\n  [key: string]: unknown;\n}>();\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlayRef = useTemplateRef('overlay');\n\nconst data = reactive({\n  search: '',\n  activeIndex: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    filteredRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n    (v) => (v < 0 ? 0 : v),\n  );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\nconst isDisabled = computed(() => {\n  if (isLoadingOptions.value) {\n    return true;\n  }\n\n  return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n  return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst computedError = computed(() => {\n  if (isLoadingOptions.value) {\n    return undefined;\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  if (props.modelValue !== undefined && selectedIndex.value === -1) {\n    return 'The selected value is not one of the options';\n  }\n\n  return undefined;\n});\n\nconst optionsRef = computed(() =>\n  normalizeListOptions(props.options ?? []).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })),\n);\n\nconst textValue = computed(() => {\n  const options = unref(optionsRef);\n\n  const item: ListOption | undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n\n  return item?.label || props.modelValue; // @todo show inner value?\n});\n\nconst computedPlaceholder = computed(() => {\n  if (!data.open && props.modelValue) {\n    return '';\n  }\n\n  return props.modelValue ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n  return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst filteredRef = computed(() => {\n  const options = optionsRef.value;\n\n  if (data.search) {\n    return options.filter((o: ListOptionNormalized) => {\n      const search = data.search.toLowerCase();\n\n      if (o.label.toLowerCase().includes(search)) {\n        return true;\n      }\n\n      if (o.description && o.description.toLowerCase().includes(search)) {\n        return true;\n      }\n\n      if (typeof o.value === 'string') {\n        return o.value.toLowerCase().includes(search);\n      }\n\n      return o.value === data.search;\n    });\n  }\n\n  return options;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : '0'));\n\nconst selectOption = (v: M | undefined) => {\n  emit('update:modelValue', v);\n  data.search = '';\n  data.open = false;\n  rootRef?.value?.focus();\n};\n\nconst clear = () => emit('update:modelValue', undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n  data.open = !data.open;\n  if (!data.open) {\n    data.search = '';\n  }\n};\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!rootRef.value?.contains(relatedTarget) && !overlayRef.value?.listRef?.contains(relatedTarget)) {\n    data.search = '';\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open) {\n    if (e.code === 'Enter') {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === 'Escape') {\n    data.open = false;\n    rootRef.value?.focus();\n  }\n\n  const filtered = unref(filteredRef);\n\n  const { length } = filtered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === 'Enter') {\n    selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = filteredRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => props.modelValue, updateActive, { immediate: true });\n\nwatch(\n  () => data.open,\n  (open) => (open ? input.value?.focus() : ''),\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search; // to watch\n\n  if (data.activeIndex >= 0 && data.open) {\n    overlayRef.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown__envelope\" @click=\"setFocusOnInput\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown\"\n      :class=\"{ open: data.open, error, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown__container\">\n        <div class=\"pl-dropdown__field\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" class=\"input-value\">\n            <LongText> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"pl-dropdown__controls\">\n            <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n            <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n            <slot name=\"append\" />\n            <div class=\"pl-dropdown__arrow-wrapper\" @click.stop=\"toggleOpen\">\n              <div v-if=\"arrowIconLarge\" class=\"arrow-icon\" :class=\"[`icon-24 ${arrowIconLarge}`]\" />\n              <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" />\n              <div v-else class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\">\n          <SvgRequired v-if=\"required\" />\n          <span>{{ label }}</span>\n          <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <DropdownOverlay v-if=\"data.open\" ref=\"overlay\" :root=\"rootRef\" class=\"pl-dropdown__options\" tabindex=\"-1\" :gap=\"3\">\n          <DropdownListItem\n            v-for=\"(item, index) in filteredRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :is-selected=\"item.isSelected\"\n            :is-hovered=\"item.isActive\"\n            :size=\"optionSize\"\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div v-if=\"!filteredRef.length\" class=\"nothing-found\">Nothing found</div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-dropdown__contour\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-dropdown__error\">{{ computedError }}</div>\n    <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-dropdown__helper\">{{ loadingOptionsHelper }}</div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"names":["__default__","emit","__emit","props","__props","slots","_useSlots","rootRef","ref","input","overlayRef","useTemplateRef","data","reactive","findActiveIndex","tap","filteredRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","options","search","tabindex","selectOption","_a","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeIndex","filtered","length","it","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect"],"mappings":"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"}

package/dist/components/PlDropdown/PlDropdown.vue2.js

@@ -0,0 +1,5 @@
+import f from "./PlDropdown.vue.js";
+export {
+  f as default
+};
+//# sourceMappingURL=PlDropdown.vue2.js.map

package/dist/components/PlDropdown/PlDropdown.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlDropdown.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/PlDropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/PlDropdownLegacy/PlDropdownLegacy.vue.d.ts

@@ -0,0 +1,78 @@
+import { ListOption } from '../../types';
+/**
+ * A component for selecting one value from a list of options
+ */
+declare const _default: <M = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: M | undefined) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & {
+        /**
+         * The current selected value of the dropdown.
+         */
+        modelValue: M;
+        /**
+         * The label text for the dropdown field (optional)
+         */
+        label?: string;
+        /**
+         * List of available options for the dropdown
+         */
+        options?: Readonly<ListOption<M>[]>;
+        /**
+         * A helper text displayed below the dropdown when there are no errors (optional).
+         */
+        helper?: string;
+        /**
+         * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).
+         */
+        loadingOptionsHelper?: string;
+        /**
+         * Error message displayed below the dropdown (optional)
+         */
+        error?: unknown;
+        /**
+         * Placeholder text shown when no value is selected.
+         */
+        placeholder?: string;
+        /**
+         * Enables a button to clear the selected value (default: false)
+         */
+        clearable?: boolean;
+        /**
+         * If `true`, the dropdown component is marked as required.
+         */
+        required?: boolean;
+        /**
+         * If `true`, the dropdown component is disabled and cannot be interacted with.
+         */
+        disabled?: boolean;
+        /**
+         * Custom icon (16px) class for the dropdown arrow (optional)
+         */
+        arrowIcon?: string;
+        /**
+         * Custom icon (24px) class for the dropdown arrow (optional)
+         */
+        arrowIconLarge?: string;
+        /**
+         * Option list item size
+         */
+        optionSize?: "small" | "medium";
+    } & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        append?(_: {}): any;
+        tooltip?(_: {}): any;
+    };
+    emit: (e: "update:modelValue", value: M | undefined) => void;
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};
+//# sourceMappingURL=PlDropdownLegacy.vue.d.ts.map

package/dist/components/PlDropdownLegacy/PlDropdownLegacy.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlDropdownLegacy.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlDropdownLegacy/PlDropdownLegacy.vue"],"names":[],"mappings":"AAyXA,OAAO,2BAA2B,CAAC;AAMnC,OAAO,KAAK,EAAE,UAAU,EAAwB,MAAM,aAAa,CAAC;AAYpE;;GAEG;yBACc,CAAC,yBACJ,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA4kB1D,mBAAmB,CAAC;;;QAjkBxB;;WAEG;oBACS,CAAC;QACb;;WAEG;gBACK,MAAM;QACd;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACnC;;WAEG;iBACM,MAAM;QACf;;WAEG;+BACoB,MAAM;QAC7B;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;WAEG;oBACS,OAAO;QACnB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;oBACS,MAAM;QAClB;;WAEG;yBACc,MAAM;QACvB;;WAEG;qBACU,OAAO,GAAG,QAAQ;mBA8gB2D,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;wBA9DkB,GAAG;yBACF,GAAG;;cA3gB3B,mBAAmB,SAAS,CAAC,GAAG,SAAS,KAAG,IAAI;;;;YA6kBV,OAAO,CAAC,OAAO,WAAW,CAAC;;AAtlBvE,wBAslB4E;AAG5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}