npm - @milaboratories/uikit - Versions diffs - 2.10.39 → 2.10.40 - Mend

@milaboratories/uikit 2.10.39 → 2.10.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (186) hide show

package/dist/base/BtnBase.vue2.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import e from "../components/PlIcon16/PlIcon16.js";
+import "../components/PlMaskIcon16/index.js";
 import { useRipple as t } from "../composition/useRipple.js";
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, mergeProps as s, openBlock as c, ref as l, renderSlot as u, unref as d } from "vue";
 var f = { key: 0 }, p = /* @__PURE__ */ o({

package/dist/base/BtnBase.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BtnBase.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../src/base/BtnBase.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport type { MaskIconName16, Size } from \"../types\";\nimport { computed, ref } from \"vue\";\nimport { PlMaskIcon16 } from \"../components/PlMaskIcon16\";\nimport { useRipple } from \"../composition/useRipple\";\n\nconst props = defineProps<{\n loading?: boolean;\n small?: boolean;\n large?: boolean;\n size?: Size;\n round?: boolean;\n icon?: MaskIconName16;\n reverse?: boolean;\n justifyCenter?: boolean;\n}>();\n\nconst btn = ref();\n\nconst small = computed(() => props.small \|\| props.size === \"small\");\nconst large = computed(() => props.large \|\| props.size === \"large\");\n\nuseRipple(btn);\n</script>\n\n<template>\n <button\n ref=\"btn\"\n tabindex=\"0\"\n :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) \|\| loading }\"\n >\n <span v-if=\"!round\">\n <slot />\n </span>\n <slot name=\"icon\">\n <PlMaskIcon16 v-if=\"loading\" name=\"loading\" :size=\"size\" />\n <PlMaskIcon16 v-else-if=\"icon\" :name=\"icon\" :size=\"size\" />\n </slot>\n </button>\n</template>\n"],"mappings":"~~;;;;~~CAEE,cAAc;;;;;;;;;;;;;EAUhB,IAAM,IAAQ,GAWR,IAAM,GAAK,EAEX,IAAQ,QAAe,EAAM,SAAS,EAAM,SAAS,QAAQ,EAC7D,IAAQ,QAAe,EAAM,SAAS,EAAM,SAAS,QAAQ;SAEnE,EAAU,EAAI,kBAIZ,EAaS,UAbT,EAaS;YAZH;GAAJ,KAAI;GACJ,UAAS;GACR,OAAK;IAAA,SAAI,EAAA;IAAO,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,SAAE,EAAA;IAAO,eAAE,EAAA;KAAgBA,EAAAA,OAAO,QAAK,KAAA;IAAA;;MAChEA,EAAAA;GAAM,UAAY,EAAQA,EAAAA,OAAO,YAAa,EAAA;GAAO,CAAA,EAAA,CAErD,EAAA,QACH,EAAA,IAAA,GAAA,IADG,GAAA,EAAb,EAEO,QAAA,GAAA,CADL,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,GAEV,EAGO,EAAA,QAAA,QAAA,EAAA,QAAA,CAFe,EAAA,WAAA,GAAA,EAApB,EAA2D,EAAA,EAAA,EAAA;;GAA9B,MAAK;GAAW,MAAM,EAAA;2BAC1B,EAAA,QAAA,GAAA,EAAzB,EAA2D,EAAA,EAAA,EAAA;;GAA3B,MAAM,EAAA;GAAO,MAAM,EAAA"}
1	+ {"version":3,"file":"BtnBase.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../src/base/BtnBase.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport type { MaskIconName16, Size } from \"../types\";\nimport { computed, ref } from \"vue\";\nimport { PlMaskIcon16 } from \"../components/PlMaskIcon16\";\nimport { useRipple } from \"../composition/useRipple\";\n\nconst props = defineProps<{\n loading?: boolean;\n small?: boolean;\n large?: boolean;\n size?: Size;\n round?: boolean;\n icon?: MaskIconName16;\n reverse?: boolean;\n justifyCenter?: boolean;\n}>();\n\nconst btn = ref();\n\nconst small = computed(() => props.small \|\| props.size === \"small\");\nconst large = computed(() => props.large \|\| props.size === \"large\");\n\nuseRipple(btn);\n</script>\n\n<template>\n <button\n ref=\"btn\"\n tabindex=\"0\"\n :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) \|\| loading }\"\n >\n <span v-if=\"!round\">\n <slot />\n </span>\n <slot name=\"icon\">\n <PlMaskIcon16 v-if=\"loading\" name=\"loading\" :size=\"size\" />\n <PlMaskIcon16 v-else-if=\"icon\" :name=\"icon\" :size=\"size\" />\n </slot>\n </button>\n</template>\n"],"mappings":";;;;;CAEE,cAAc;;;;;;;;;;;;;EAUhB,IAAM,IAAQ,GAWR,IAAM,GAAK,EAEX,IAAQ,QAAe,EAAM,SAAS,EAAM,SAAS,QAAQ,EAC7D,IAAQ,QAAe,EAAM,SAAS,EAAM,SAAS,QAAQ;SAEnE,EAAU,EAAI,kBAIZ,EAaS,UAbT,EAaS;YAZH;GAAJ,KAAI;GACJ,UAAS;GACR,OAAK;IAAA,SAAI,EAAA;IAAO,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,SAAE,EAAA;IAAO,eAAE,EAAA;KAAgBA,EAAAA,OAAO,QAAK,KAAA;IAAA;;MAChEA,EAAAA;GAAM,UAAY,EAAQA,EAAAA,OAAO,YAAa,EAAA;GAAO,CAAA,EAAA,CAErD,EAAA,QACH,EAAA,IAAA,GAAA,IADG,GAAA,EAAb,EAEO,QAAA,GAAA,CADL,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,GAEV,EAGO,EAAA,QAAA,QAAA,EAAA,QAAA,CAFe,EAAA,WAAA,GAAA,EAApB,EAA2D,EAAA,EAAA,EAAA;;GAA9B,MAAK;GAAW,MAAM,EAAA;2BAC1B,EAAA,QAAA,GAAA,EAAzB,EAA2D,EAAA,EAAA,EAAA;;GAA3B,MAAM,EAAA;GAAO,MAAM,EAAA"}

package/dist/colors/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+import "./palette.js";
+import "./color.js";
+import "./gradient.js";

package/dist/components/DataTable/TableComponent.vue2.js CHANGED Viewed

@@ -11,6 +11,7 @@ import c from "./RowsCommandMenu.js";
 import l from "./ColumnsCommandMenu.js";
 import u from "./TScroll.js";
 import { createState as d } from "./state.js";
+import "../../index.js";
 import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineComponent as y, nextTick as b, normalizeStyle as x, onMounted as S, openBlock as C, ref as w, renderList as T, unref as E, watch as D, watchPostEffect as O, withCtx as k } from "vue";
 import { tapIf as A } from "@milaboratories/helpers";
 var j = { class: "command-menu__container" }, M = {

package/dist/components/DataTable/TableComponent.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableComponent.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/DataTable/TableComponent.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport \"./assets/data-table-style.scss\";\nimport { ref, unref, onMounted, nextTick, watchPostEffect, watch, computed } from \"vue\";\nimport TdCell from \"./TdCell.vue\";\nimport type { TableSettings, TableData } from \"./types\";\nimport TableIcon from \"./assets/TableIcon.vue\";\nimport TrHead from \"./TrHead.vue\";\nimport ThCell from \"./ThCell.vue\";\nimport TrBody from \"./TrBody.vue\";\nimport ColumnCaret from \"./ColumnCaret.vue\";\nimport { useEventListener } from \"../../index\";\nimport { tapIf } from \"@milaboratories/helpers\";\nimport { useResize } from \"./composition/useResize\";\nimport RowsCommandMenu from \"./RowsCommandMenu.vue\";\nimport ColumnsCommandMenu from \"./ColumnsCommandMenu.vue\";\nimport TScroll from \"./TScroll.vue\";\nimport { createState } from \"./state\";\n\nconst emit = defineEmits<{\n (e: \"update:data\", value: TableData): void;\n (e: \"change:sort\", value: unknown): void;\n}>();\n\nconst props = defineProps<{\n settings: Readonly<TableSettings>;\n}>();\n\nconst state = createState(props);\n\nconst hasNoData = computed(() => state.data.rows.length === 0);\n\nconst tableBodyStyle = computed(() => ({\n height: hasNoData.value ? \"212px\" /* css value */ : state.data.bodyHeight + \"px\",\n}));\n\nwatch(state.data, (v) => emit(\"update:data\", v), { deep: true });\n\nwatch(props, () => updateDimensions);\n\nconst tableRef = ref<HTMLElement>();\nconst headRef = ref<HTMLElement>();\nconst bodyRef = ref<HTMLElement>();\n\nconst updateDimensions = () => {\n tapIf(bodyRef.value, (el) => {\n state.updateDimensions(el.getBoundingClientRect());\n });\n};\n\nconst tableColumns = state.tableColumns;\n\nconst tableRows = state.tableRows;\n\nconst { mouseDown } = useResize(state, tableRef);\n\nonMounted(() => {\n nextTick(updateDimensions);\n});\n\nwatchPostEffect(() => {\n unref(props.settings);\n nextTick(updateDimensions);\n});\n\nuseEventListener(window, \"resize\", () => nextTick(updateDimensions));\n\nconst onWheel = (ev: WheelEvent) => {\n ev.preventDefault();\n state.updateOffsets(ev);\n};\n</script>\n\n<template>\n <div ref=\"tableRef\" class=\"data-table\" @mousedown=\"mouseDown\">\n <div class=\"command-menu__container\">\n <RowsCommandMenu />\n <ColumnsCommandMenu />\n </div>\n <div ref=\"headRef\" class=\"table-head\">\n <TrHead>\n <ThCell\n v-for=\"(col, i) in tableColumns\"\n :key=\"i\"\n :col=\"col\"\n :style=\"col.style\"\n @change:sort=\"$emit('change:sort', $event)\"\n />\n </TrHead>\n </div>\n <div ref=\"bodyRef\" class=\"table-body\" :style=\"tableBodyStyle\" @wheel=\"onWheel\">\n <div v-if=\"hasNoData\" class=\"table-body__no-data\">\n <div>\n <TableIcon />\n <div>No Data To Show</div>\n </div>\n </div>\n <TrBody v-for=\"(row, i) in tableRows\" :key=\"i\" :row=\"row\">\n <TdCell\n v-for=\"cell in row.cells\"\n :key=\"cell.column.id + ':' + i\"\n :cell=\"cell\"\n :style=\"cell.style\"\n />\n </TrBody>\n </div>\n <div class=\"carets\">\n <ColumnCaret\n v-for=\"(col, i) in tableColumns\"\n :key=\"i\"\n :column=\"col\"\n :style=\"col.style\"\n @change:sort=\"$emit('change:sort', $event)\"\n />\n </div>\n <TScroll\n :offset=\"state.data.scrollTop\"\n :window-size=\"state.data.bodyHeight\"\n :data-size=\"state.data.dataHeight\"\n @change:offset=\"state.updateScrollTop\"\n />\n </div>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;~~EAkBA,IAAM,IAAO,GAKP,IAAQ,GAIR,IAAQ,EAAY,EAAM,EAE1B,IAAY,QAAe,EAAM,KAAK,KAAK,WAAW,EAAE,EAExD,IAAiB,SAAgB,EACrC,QAAQ,EAAU,QAAQ,UAA0B,EAAM,KAAK,aAAa,MAC7E,EAAE;AAIH,EAFA,EAAM,EAAM,OAAO,MAAM,EAAK,eAAe,EAAE,EAAE,EAAE,MAAM,IAAM,CAAC,EAEhE,EAAM,SAAa,EAAiB;EAEpC,IAAM,IAAW,GAAkB,EAC7B,IAAU,GAAkB,EAC5B,IAAU,GAAkB,EAE5B,UAAyB;AAC7B,KAAM,EAAQ,QAAQ,MAAO;AAC3B,MAAM,iBAAiB,EAAG,uBAAuB,CAAC;KAClD;KAGE,IAAe,EAAM,cAErB,IAAY,EAAM,WAElB,EAAE,iBAAc,EAAU,GAAO,EAAS;AAWhD,EATA,QAAgB;AACd,KAAS,EAAiB;IAC1B,EAEF,QAAsB;AAEpB,GADA,EAAM,EAAM,SAAS,EACrB,EAAS,EAAiB;IAC1B,EAEF,EAAiB,QAAQ,gBAAgB,EAAS,EAAiB,CAAC;EAEpE,IAAM,KAAW,MAAmB;AAElC,GADA,EAAG,gBAAgB,EACnB,EAAM,cAAc,EAAG;;yBAKvB,EA+CM,OAAA;YA/CG;GAAJ,KAAI;GAAW,OAAM;GAAc,aAAS,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,GAAA,EAAS;;GAC1D,EAGM,OAHN,GAGM,CAFJ,EAAmB,EAAA,EACnB,EAAsB,EAAA,CAAA,CAAA;GAExB,EAUM,OAAA;aAVG;IAAJ,KAAI;IAAU,OAAM;OACvB,EAQS,GAAA,MAAA;qBAN2B,EAAA,EAAA,GAAA,EADlC,EAME,GAAA,MAAA,EALmB,EAAA,EAAY,GAAvB,GAAK,YADf,EAME,GAAA;KAJC,KAAK;KACA;KACL,OAAK,EAAE,EAAI,MAAK;KAChB,iBAAW,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,eAAgB,EAAM;;;;GAI/C,EAeM,OAAA;aAfG;IAAJ,KAAI;IAAU,OAAM;IAAc,OAAK,EAAE,EAAA,MAAc;IAAU;OACzD,EAAA,SAAA,GAAA,EAAX,EAKM,OALN,GAKM,CAJJ,EAGM,OAAA,MAAA,CAFJ,EAAa,EAAA,EAAA,AAAA,EAAA,OACb,EAA0B,OAAA,MAArB,mBAAe,GAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,GAAA,EAAA,GAAA,EAGxB,EAOS,GAAA,MAAA,EAPkB,EAAA,EAAS,GAApB,GAAK,YAArB,EAOS,GAAA;IAP8B,KAAK;IAAS;;qBAExB,EAAA,EAAA,GAAA,EAD3B,EAKE,GAAA,MAAA,EAJe,EAAI,QAAZ,YADT,EAKE,GAAA;KAHC,KAAK,EAAK,OAAO,KAAE,MAAS;KACtB;KACN,OAAK,EAAE,EAAK,MAAK;;;;GAIxB,EAQM,OARN,GAQM,EAAA,EAAA,GAAA,EAPJ,EAME,GAAA,MAAA,EALmB,EAAA,EAAY,GAAvB,GAAK,YADf,EAME,GAAA;IAJC,KAAK;IACL,QAAQ;IACR,OAAK,EAAE,EAAI,MAAK;IAChB,iBAAW,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,eAAgB,EAAM;;GAG7C,EAKE,GAAA;IAJC,QAAQ,EAAA,EAAK,CAAC,KAAK;IACnB,eAAa,EAAA,EAAK,CAAC,KAAK;IACxB,aAAW,EAAA,EAAK,CAAC,KAAK;IACtB,mBAAe,EAAA,EAAK,CAAC"}
1	+ {"version":3,"file":"TableComponent.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/DataTable/TableComponent.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport \"./assets/data-table-style.scss\";\nimport { ref, unref, onMounted, nextTick, watchPostEffect, watch, computed } from \"vue\";\nimport TdCell from \"./TdCell.vue\";\nimport type { TableSettings, TableData } from \"./types\";\nimport TableIcon from \"./assets/TableIcon.vue\";\nimport TrHead from \"./TrHead.vue\";\nimport ThCell from \"./ThCell.vue\";\nimport TrBody from \"./TrBody.vue\";\nimport ColumnCaret from \"./ColumnCaret.vue\";\nimport { useEventListener } from \"../../index\";\nimport { tapIf } from \"@milaboratories/helpers\";\nimport { useResize } from \"./composition/useResize\";\nimport RowsCommandMenu from \"./RowsCommandMenu.vue\";\nimport ColumnsCommandMenu from \"./ColumnsCommandMenu.vue\";\nimport TScroll from \"./TScroll.vue\";\nimport { createState } from \"./state\";\n\nconst emit = defineEmits<{\n (e: \"update:data\", value: TableData): void;\n (e: \"change:sort\", value: unknown): void;\n}>();\n\nconst props = defineProps<{\n settings: Readonly<TableSettings>;\n}>();\n\nconst state = createState(props);\n\nconst hasNoData = computed(() => state.data.rows.length === 0);\n\nconst tableBodyStyle = computed(() => ({\n height: hasNoData.value ? \"212px\" /* css value */ : state.data.bodyHeight + \"px\",\n}));\n\nwatch(state.data, (v) => emit(\"update:data\", v), { deep: true });\n\nwatch(props, () => updateDimensions);\n\nconst tableRef = ref<HTMLElement>();\nconst headRef = ref<HTMLElement>();\nconst bodyRef = ref<HTMLElement>();\n\nconst updateDimensions = () => {\n tapIf(bodyRef.value, (el) => {\n state.updateDimensions(el.getBoundingClientRect());\n });\n};\n\nconst tableColumns = state.tableColumns;\n\nconst tableRows = state.tableRows;\n\nconst { mouseDown } = useResize(state, tableRef);\n\nonMounted(() => {\n nextTick(updateDimensions);\n});\n\nwatchPostEffect(() => {\n unref(props.settings);\n nextTick(updateDimensions);\n});\n\nuseEventListener(window, \"resize\", () => nextTick(updateDimensions));\n\nconst onWheel = (ev: WheelEvent) => {\n ev.preventDefault();\n state.updateOffsets(ev);\n};\n</script>\n\n<template>\n <div ref=\"tableRef\" class=\"data-table\" @mousedown=\"mouseDown\">\n <div class=\"command-menu__container\">\n <RowsCommandMenu />\n <ColumnsCommandMenu />\n </div>\n <div ref=\"headRef\" class=\"table-head\">\n <TrHead>\n <ThCell\n v-for=\"(col, i) in tableColumns\"\n :key=\"i\"\n :col=\"col\"\n :style=\"col.style\"\n @change:sort=\"$emit('change:sort', $event)\"\n />\n </TrHead>\n </div>\n <div ref=\"bodyRef\" class=\"table-body\" :style=\"tableBodyStyle\" @wheel=\"onWheel\">\n <div v-if=\"hasNoData\" class=\"table-body__no-data\">\n <div>\n <TableIcon />\n <div>No Data To Show</div>\n </div>\n </div>\n <TrBody v-for=\"(row, i) in tableRows\" :key=\"i\" :row=\"row\">\n <TdCell\n v-for=\"cell in row.cells\"\n :key=\"cell.column.id + ':' + i\"\n :cell=\"cell\"\n :style=\"cell.style\"\n />\n </TrBody>\n </div>\n <div class=\"carets\">\n <ColumnCaret\n v-for=\"(col, i) in tableColumns\"\n :key=\"i\"\n :column=\"col\"\n :style=\"col.style\"\n @change:sort=\"$emit('change:sort', $event)\"\n />\n </div>\n <TScroll\n :offset=\"state.data.scrollTop\"\n :window-size=\"state.data.bodyHeight\"\n :data-size=\"state.data.dataHeight\"\n @change:offset=\"state.updateScrollTop\"\n />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAkBA,IAAM,IAAO,GAKP,IAAQ,GAIR,IAAQ,EAAY,EAAM,EAE1B,IAAY,QAAe,EAAM,KAAK,KAAK,WAAW,EAAE,EAExD,IAAiB,SAAgB,EACrC,QAAQ,EAAU,QAAQ,UAA0B,EAAM,KAAK,aAAa,MAC7E,EAAE;AAIH,EAFA,EAAM,EAAM,OAAO,MAAM,EAAK,eAAe,EAAE,EAAE,EAAE,MAAM,IAAM,CAAC,EAEhE,EAAM,SAAa,EAAiB;EAEpC,IAAM,IAAW,GAAkB,EAC7B,IAAU,GAAkB,EAC5B,IAAU,GAAkB,EAE5B,UAAyB;AAC7B,KAAM,EAAQ,QAAQ,MAAO;AAC3B,MAAM,iBAAiB,EAAG,uBAAuB,CAAC;KAClD;KAGE,IAAe,EAAM,cAErB,IAAY,EAAM,WAElB,EAAE,iBAAc,EAAU,GAAO,EAAS;AAWhD,EATA,QAAgB;AACd,KAAS,EAAiB;IAC1B,EAEF,QAAsB;AAEpB,GADA,EAAM,EAAM,SAAS,EACrB,EAAS,EAAiB;IAC1B,EAEF,EAAiB,QAAQ,gBAAgB,EAAS,EAAiB,CAAC;EAEpE,IAAM,KAAW,MAAmB;AAElC,GADA,EAAG,gBAAgB,EACnB,EAAM,cAAc,EAAG;;yBAKvB,EA+CM,OAAA;YA/CG;GAAJ,KAAI;GAAW,OAAM;GAAc,aAAS,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,GAAA,EAAS;;GAC1D,EAGM,OAHN,GAGM,CAFJ,EAAmB,EAAA,EACnB,EAAsB,EAAA,CAAA,CAAA;GAExB,EAUM,OAAA;aAVG;IAAJ,KAAI;IAAU,OAAM;OACvB,EAQS,GAAA,MAAA;qBAN2B,EAAA,EAAA,GAAA,EADlC,EAME,GAAA,MAAA,EALmB,EAAA,EAAY,GAAvB,GAAK,YADf,EAME,GAAA;KAJC,KAAK;KACA;KACL,OAAK,EAAE,EAAI,MAAK;KAChB,iBAAW,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,eAAgB,EAAM;;;;GAI/C,EAeM,OAAA;aAfG;IAAJ,KAAI;IAAU,OAAM;IAAc,OAAK,EAAE,EAAA,MAAc;IAAU;OACzD,EAAA,SAAA,GAAA,EAAX,EAKM,OALN,GAKM,CAJJ,EAGM,OAAA,MAAA,CAFJ,EAAa,EAAA,EAAA,AAAA,EAAA,OACb,EAA0B,OAAA,MAArB,mBAAe,GAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,GAAA,EAAA,GAAA,EAGxB,EAOS,GAAA,MAAA,EAPkB,EAAA,EAAS,GAApB,GAAK,YAArB,EAOS,GAAA;IAP8B,KAAK;IAAS;;qBAExB,EAAA,EAAA,GAAA,EAD3B,EAKE,GAAA,MAAA,EAJe,EAAI,QAAZ,YADT,EAKE,GAAA;KAHC,KAAK,EAAK,OAAO,KAAE,MAAS;KACtB;KACN,OAAK,EAAE,EAAK,MAAK;;;;GAIxB,EAQM,OARN,GAQM,EAAA,EAAA,GAAA,EAPJ,EAME,GAAA,MAAA,EALmB,EAAA,EAAY,GAAvB,GAAK,YADf,EAME,GAAA;IAJC,KAAK;IACL,QAAQ;IACR,OAAK,EAAE,EAAI,MAAK;IAChB,iBAAW,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,eAAgB,EAAM;;GAG7C,EAKE,GAAA;IAJC,QAAQ,EAAA,EAAK,CAAC,KAAK;IACnB,eAAa,EAAA,EAAK,CAAC,KAAK;IACxB,aAAW,EAAA,EAAK,CAAC,KAAK;IACtB,mBAAe,EAAA,EAAK,CAAC"}

package/dist/components/DataTable/assets/data-table-style.css CHANGED Viewed

	@@ -1 +1 @@
1	- .data-table{--cell-font-family:var(--font-family-base);--cell-font-weight:500;--selected-bg:#63e0241f;border:1px solid var(--bg-elevated-02);border-radius:6px;flex-direction:column;width:100%;max-height:100%;font-weight:500;position:relative}.data-table.monospace{--cell-font-family:var(--font-family-monospace);--cell-font-weight:400}.data-table .t-scroll{--handle-bg:#ccc;z-index:1;width:0;position:absolute;bottom:0;right:0}.data-table .t-scroll>div{width:0;position:absolute;top:6px;bottom:6px}.data-table .t-scroll__handle{background-color:var(--handle-bg);cursor:pointer;width:12px;position:absolute;transform:translate(-50%)}.data-table .t-scroll__handle:before{background-color:var(--handle-bg);content:"";border-radius:6px 6px 0 0;width:100%;height:6px;position:absolute;top:-6px}.data-table .t-scroll__handle:after{background-color:var(--handle-bg);content:"";border-radius:0 0 6px 6px;width:100%;height:6px;position:absolute;bottom:-6px}.data-table .carets{pointer-events:none;position:absolute;inset:0;overflow:hidden}.data-table .column-caret{pointer-events:none;height:100%;position:absolute;top:0}.data-table .column-caret.selected{outline:1px solid var(--border-color-focus);background:var(--selected-bg)}.data-table .column-caret.frozen{z-index:1;box-shadow:10px 0 5px -2px #888}.data-table .command-menu{color:#fff;background:#110529;border-radius:6px;flex-shrink:0;align-items:center;gap:12px;height:40px;padding:0 12px;display:inline-flex;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14}.data-table .command-menu hr{opacity:.24;background-color:#9babcc;width:1px;height:100%;margin:12px 0}.data-table .command-menu span.command{color:#fff;cursor:pointer;font-weight:600}.data-table .command-menu__container{z-index:1000;gap:12px;width:100%;display:flex;position:absolute;top:-45px;left:0}.data-table .table-head{background-color:var(--bg-elevated-02);border-bottom:1px solid var(--txt-01);max-width:100%;padding-bottom:1px;position:relative;overflow:hidden}.data-table .table-head .tr-head{background-color:#0000;flex-direction:row;gap:1px;max-width:100%;min-height:40px;display:flex;position:relative;overflow:hidden}.data-table .table-head .th-cell{~~-webkit-~~user-select:none;~~user-select:none;~~white-space:nowrap;background-color:#f7f8fa;align-items:center;height:100%;padding:8px 12px;font-size:14px;font-weight:600;display:flex;position:absolute;overflow:hidden}.data-table .table-head .th-cell .integer,.data-table .table-head .th-cell .float{background: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%20d='M4.22886%2012.993H5.65686L6.41286%2010.158H8.33786L7.58886%2012.993H9.01686L9.77286%2010.158H12.4189L12.7829%208.76501H10.1439L10.6409%206.92401H13.2869L13.6509%205.54501H11.0119L11.7189%202.92001H10.2839L9.57686%205.54501H7.65186L8.35886%202.92001H6.92386L6.21686%205.54501H3.58486L3.20686%206.92401H5.84586L5.36286%208.76501H2.71686L2.34586%2010.158H4.98486L4.22886%2012.993ZM6.79086%208.76501L7.28086%206.92401H9.20586L8.70886%208.76501H6.79086Z'%20fill='%2307AD3E'/%3e%3c/svg%3e") 50% no-repeat;width:16px;height:16px;margin-right:4px}.data-table .table-head .th-cell .string{background: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%20d='M0.0372314%2013H1.55623L2.29123%2010.725H6.42823L7.17723%2013H8.69623L5.42023%202.92001H3.31323L0.0372314%2013ZM2.73923%209.35301L4.34923%204.38301L5.98023%209.35301H2.73923Z'%20fill='%2307AD3E'/%3e%3cpath%20d='M11.3871%2013.21C12.6121%2013.21%2013.4871%2012.79%2014.1101%2011.901V13H15.4051V8.34501C15.4051%207.71501%2015.3771%207.16901%2015.1391%206.67201C14.6701%205.67801%2013.6201%205.23001%2012.2691%205.23001C10.5191%205.23001%209.46908%206.05601%209.10508%207.35101L10.4701%207.77101C10.7291%206.93101%2011.4571%206.58101%2012.2551%206.58101C13.4381%206.58101%2013.9141%207.07101%2013.9631%208.11401C12.7381%208.28201%2011.4921%208.44301%2010.6171%208.70201C9.44808%209.07301%208.83208%209.80101%208.83208%2010.942C8.83208%2012.174%209.71408%2013.21%2011.3871%2013.21ZM10.2811%2010.928C10.2811%2010.333%2010.7221%2010.011%2011.3241%209.80801C11.9611%209.61901%2012.8081%209.50001%2013.9491%209.33201C13.9421%209.68201%2013.9141%2010.165%2013.7951%2010.515C13.6271%2011.25%2012.8921%2012.013%2011.6461%2012.013C10.7081%2012.013%2010.2811%2011.516%2010.2811%2010.928Z'%20fill='%2307AD3E'/%3e%3c/svg%3e") 50% no-repeat;width:16px;height:16px;margin-right:4px}.data-table .table-head .th-cell .unknown{opacity:.5;background: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%20d='M0.0372314%2013H1.55623L2.29123%2010.725H6.42823L7.17723%2013H8.69623L5.42023%202.92001H3.31323L0.0372314%2013ZM2.73923%209.35301L4.34923%204.38301L5.98023%209.35301H2.73923Z'%20fill='%2307AD3E'/%3e%3cpath%20d='M11.3871%2013.21C12.6121%2013.21%2013.4871%2012.79%2014.1101%2011.901V13H15.4051V8.34501C15.4051%207.71501%2015.3771%207.16901%2015.1391%206.67201C14.6701%205.67801%2013.6201%205.23001%2012.2691%205.23001C10.5191%205.23001%209.46908%206.05601%209.10508%207.35101L10.4701%207.77101C10.7291%206.93101%2011.4571%206.58101%2012.2551%206.58101C13.4381%206.58101%2013.9141%207.07101%2013.9631%208.11401C12.7381%208.28201%2011.4921%208.44301%2010.6171%208.70201C9.44808%209.07301%208.83208%209.80101%208.83208%2010.942C8.83208%2012.174%209.71408%2013.21%2011.3871%2013.21ZM10.2811%2010.928C10.2811%2010.333%2010.7221%2010.011%2011.3241%209.80801C11.9611%209.61901%2012.8081%209.50001%2013.9491%209.33201C13.9421%209.68201%2013.9141%2010.165%2013.7951%2010.515C13.6271%2011.25%2012.8921%2012.013%2011.6461%2012.013C10.7081%2012.013%2010.2811%2011.516%2010.2811%2010.928Z'%20fill='%2307AD3E'/%3e%3c/svg%3e") 50% no-repeat;width:16px;height:16px;margin-right:4px}.data-table .table-head .th-cell .sort{opacity:.1;cursor:pointer;background: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='M8%2014.0607L13.5303%208.53034L12.4697%207.46968L8.75%2011.1893V2.00001H7.25V11.1893L3.53033%207.46968L2.46967%208.53034L8%2014.0607Z'%20fill='%23110529'/%3e%3c/svg%3e") 50% no-repeat;width:16px;height:16px;margin-left:auto}.data-table .table-head .th-cell .sort:hover{opacity:.5}.data-table .table-head .th-cell .sort.DESC{opacity:1;display:block}.data-table .table-head .th-cell .sort.ASC{opacity:1;display:block;transform:rotate(180deg)}.data-table .table-body{background-color:var(--bg-elevated-02);max-width:100%;max-height:100%;position:relative;overflow:hidden}.data-table .table-body .tr-body{background-color:#0000;flex-direction:row;gap:1px;width:100%;max-width:100%;display:flex;position:absolute;left:0;overflow:hidden}.data-table .table-body .tr-body.selected{outline:1px solid var(--border-color-focus);background-color:#fff}.data-table .table-body .tr-body.selected .td-cell:after{content:"";background:var(--selected-bg);pointer-events:none;position:absolute;inset:0}.data-table .table-body__no-data{height:212px;color:var(--txt-mask);letter-spacing:-.56px;background-color:#f7f8fa;justify-content:center;align-items:center;font-size:28px;font-style:normal;font-weight:500;line-height:32px;display:flex}.data-table .table-body__no-data>div{flex-direction:column;align-items:center;gap:4px;display:flex}.data-table .td-cell{background-color:#fff;align-items:center;height:100%;padding:1px;display:flex;position:absolute;overflow:hidden}.data-table .td-cell.justify-center{justify-content:center}.data-table .td-cell .control-cell{padding:8px 12px}.data-table .td-cell .base-cell{font-family:var(--cell-font-family);font-weight:var(--cell-font-weight)~~;-webkit-user-select:text~~;user-select:text;align-items:center;width:100%;height:100%;padding:8px 12px;display:flex;overflow:hidden}.data-table .td-cell .base-cell input{font-size:inherit;font-family:inherit;font-weight:inherit;border:none;outline:none;width:100%;padding:0}.data-table .td-cell .base-cell__edit{outline:1px solid var(--border-color-focus)}
1	+ .data-table{--cell-font-family:var(--font-family-base);--cell-font-weight:500;--selected-bg:#63e0241f;border:1px solid var(--bg-elevated-02);border-radius:6px;flex-direction:column;width:100%;max-height:100%;font-weight:500;position:relative}.data-table.monospace{--cell-font-family:var(--font-family-monospace);--cell-font-weight:400}.data-table .t-scroll{--handle-bg:#ccc;z-index:1;width:0;position:absolute;bottom:0;right:0}.data-table .t-scroll>div{width:0;position:absolute;top:6px;bottom:6px}.data-table .t-scroll__handle{background-color:var(--handle-bg);cursor:pointer;width:12px;position:absolute;transform:translate(-50%)}.data-table .t-scroll__handle:before{background-color:var(--handle-bg);content:"";border-radius:6px 6px 0 0;width:100%;height:6px;position:absolute;top:-6px}.data-table .t-scroll__handle:after{background-color:var(--handle-bg);content:"";border-radius:0 0 6px 6px;width:100%;height:6px;position:absolute;bottom:-6px}.data-table .carets{pointer-events:none;position:absolute;inset:0;overflow:hidden}.data-table .column-caret{pointer-events:none;height:100%;position:absolute;top:0}.data-table .column-caret.selected{outline:1px solid var(--border-color-focus);background:var(--selected-bg)}.data-table .column-caret.frozen{z-index:1;box-shadow:10px 0 5px -2px #888}.data-table .command-menu{color:#fff;background:#110529;border-radius:6px;flex-shrink:0;align-items:center;gap:12px;height:40px;padding:0 12px;display:inline-flex;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14}.data-table .command-menu hr{opacity:.24;background-color:#9babcc;width:1px;height:100%;margin:12px 0}.data-table .command-menu span.command{color:#fff;cursor:pointer;font-weight:600}.data-table .command-menu__container{z-index:1000;gap:12px;width:100%;display:flex;position:absolute;top:-45px;left:0}.data-table .table-head{background-color:var(--bg-elevated-02);border-bottom:1px solid var(--txt-01);max-width:100%;padding-bottom:1px;position:relative;overflow:hidden}.data-table .table-head .tr-head{background-color:#0000;flex-direction:row;gap:1px;max-width:100%;min-height:40px;display:flex;position:relative;overflow:hidden}.data-table .table-head .th-cell{user-select:none;white-space:nowrap;background-color:#f7f8fa;align-items:center;height:100%;padding:8px 12px;font-size:14px;font-weight:600;display:flex;position:absolute;overflow:hidden}.data-table .table-head .th-cell .integer,.data-table .table-head .th-cell .float{background: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%20d='M4.22886%2012.993H5.65686L6.41286%2010.158H8.33786L7.58886%2012.993H9.01686L9.77286%2010.158H12.4189L12.7829%208.76501H10.1439L10.6409%206.92401H13.2869L13.6509%205.54501H11.0119L11.7189%202.92001H10.2839L9.57686%205.54501H7.65186L8.35886%202.92001H6.92386L6.21686%205.54501H3.58486L3.20686%206.92401H5.84586L5.36286%208.76501H2.71686L2.34586%2010.158H4.98486L4.22886%2012.993ZM6.79086%208.76501L7.28086%206.92401H9.20586L8.70886%208.76501H6.79086Z'%20fill='%2307AD3E'/%3e%3c/svg%3e") 50% no-repeat;width:16px;height:16px;margin-right:4px}.data-table .table-head .th-cell .string{background: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%20d='M0.0372314%2013H1.55623L2.29123%2010.725H6.42823L7.17723%2013H8.69623L5.42023%202.92001H3.31323L0.0372314%2013ZM2.73923%209.35301L4.34923%204.38301L5.98023%209.35301H2.73923Z'%20fill='%2307AD3E'/%3e%3cpath%20d='M11.3871%2013.21C12.6121%2013.21%2013.4871%2012.79%2014.1101%2011.901V13H15.4051V8.34501C15.4051%207.71501%2015.3771%207.16901%2015.1391%206.67201C14.6701%205.67801%2013.6201%205.23001%2012.2691%205.23001C10.5191%205.23001%209.46908%206.05601%209.10508%207.35101L10.4701%207.77101C10.7291%206.93101%2011.4571%206.58101%2012.2551%206.58101C13.4381%206.58101%2013.9141%207.07101%2013.9631%208.11401C12.7381%208.28201%2011.4921%208.44301%2010.6171%208.70201C9.44808%209.07301%208.83208%209.80101%208.83208%2010.942C8.83208%2012.174%209.71408%2013.21%2011.3871%2013.21ZM10.2811%2010.928C10.2811%2010.333%2010.7221%2010.011%2011.3241%209.80801C11.9611%209.61901%2012.8081%209.50001%2013.9491%209.33201C13.9421%209.68201%2013.9141%2010.165%2013.7951%2010.515C13.6271%2011.25%2012.8921%2012.013%2011.6461%2012.013C10.7081%2012.013%2010.2811%2011.516%2010.2811%2010.928Z'%20fill='%2307AD3E'/%3e%3c/svg%3e") 50% no-repeat;width:16px;height:16px;margin-right:4px}.data-table .table-head .th-cell .unknown{opacity:.5;background: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%20d='M0.0372314%2013H1.55623L2.29123%2010.725H6.42823L7.17723%2013H8.69623L5.42023%202.92001H3.31323L0.0372314%2013ZM2.73923%209.35301L4.34923%204.38301L5.98023%209.35301H2.73923Z'%20fill='%2307AD3E'/%3e%3cpath%20d='M11.3871%2013.21C12.6121%2013.21%2013.4871%2012.79%2014.1101%2011.901V13H15.4051V8.34501C15.4051%207.71501%2015.3771%207.16901%2015.1391%206.67201C14.6701%205.67801%2013.6201%205.23001%2012.2691%205.23001C10.5191%205.23001%209.46908%206.05601%209.10508%207.35101L10.4701%207.77101C10.7291%206.93101%2011.4571%206.58101%2012.2551%206.58101C13.4381%206.58101%2013.9141%207.07101%2013.9631%208.11401C12.7381%208.28201%2011.4921%208.44301%2010.6171%208.70201C9.44808%209.07301%208.83208%209.80101%208.83208%2010.942C8.83208%2012.174%209.71408%2013.21%2011.3871%2013.21ZM10.2811%2010.928C10.2811%2010.333%2010.7221%2010.011%2011.3241%209.80801C11.9611%209.61901%2012.8081%209.50001%2013.9491%209.33201C13.9421%209.68201%2013.9141%2010.165%2013.7951%2010.515C13.6271%2011.25%2012.8921%2012.013%2011.6461%2012.013C10.7081%2012.013%2010.2811%2011.516%2010.2811%2010.928Z'%20fill='%2307AD3E'/%3e%3c/svg%3e") 50% no-repeat;width:16px;height:16px;margin-right:4px}.data-table .table-head .th-cell .sort{opacity:.1;cursor:pointer;background: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='M8%2014.0607L13.5303%208.53034L12.4697%207.46968L8.75%2011.1893V2.00001H7.25V11.1893L3.53033%207.46968L2.46967%208.53034L8%2014.0607Z'%20fill='%23110529'/%3e%3c/svg%3e") 50% no-repeat;width:16px;height:16px;margin-left:auto}.data-table .table-head .th-cell .sort:hover{opacity:.5}.data-table .table-head .th-cell .sort.DESC{opacity:1;display:block}.data-table .table-head .th-cell .sort.ASC{opacity:1;display:block;transform:rotate(180deg)}.data-table .table-body{background-color:var(--bg-elevated-02);max-width:100%;max-height:100%;position:relative;overflow:hidden}.data-table .table-body .tr-body{background-color:#0000;flex-direction:row;gap:1px;width:100%;max-width:100%;display:flex;position:absolute;left:0;overflow:hidden}.data-table .table-body .tr-body.selected{outline:1px solid var(--border-color-focus);background-color:#fff}.data-table .table-body .tr-body.selected .td-cell:after{content:"";background:var(--selected-bg);pointer-events:none;position:absolute;inset:0}.data-table .table-body__no-data{height:212px;color:var(--txt-mask);letter-spacing:-.56px;background-color:#f7f8fa;justify-content:center;align-items:center;font-size:28px;font-style:normal;font-weight:500;line-height:32px;display:flex}.data-table .table-body__no-data>div{flex-direction:column;align-items:center;gap:4px;display:flex}.data-table .td-cell{background-color:#fff;align-items:center;height:100%;padding:1px;display:flex;position:absolute;overflow:hidden}.data-table .td-cell.justify-center{justify-content:center}.data-table .td-cell .control-cell{padding:8px 12px}.data-table .td-cell .base-cell{font-family:var(--cell-font-family);font-weight:var(--cell-font-weight);user-select:text;align-items:center;width:100%;height:100%;padding:8px 12px;display:flex;overflow:hidden}.data-table .td-cell .base-cell input{font-size:inherit;font-family:inherit;font-weight:inherit;border:none;outline:none;width:100%;padding:0}.data-table .td-cell .base-cell__edit{outline:1px solid var(--border-color-focus)}

package/dist/components/PlAccordion/PlAccordionSection.vue.css CHANGED Viewed

	@@ -1 +1 @@
1	- ._content_e3dof_2{gap:var(--gap-v);will-change:height, opacity;flex-direction:column;display:flex}._content_e3dof_2>:first-child{margin-top:24px}._content_e3dof_2>:last-child{margin-bottom:4px}._separator_e3dof_19{cursor:pointer~~}._separator_e3dof_19:~~hover{--pl-separator-txt-color:var(--txt-01);--mask-icon-bg-color:var(--ic-01)}._chevron_e3dof_27{transition-duration:50ms}._down_e3dof_31{transform:rotate(90deg)}
1	+ ._content_e3dof_2{gap:var(--gap-v);will-change:height, opacity;flex-direction:column;display:flex}._content_e3dof_2>:first-child{margin-top:24px}._content_e3dof_2>:last-child{margin-bottom:4px}._separator_e3dof_19{cursor:pointer;&:hover{--pl-separator-txt-color:var(--txt-01);--mask-icon-bg-color:var(--ic-01)}}._chevron_e3dof_27{transition-duration:50ms}._down_e3dof_31{transform:rotate(90deg)}

package/dist/components/PlAccordion/PlAccordionSection.vue2.js CHANGED Viewed

@@ -1,5 +1,7 @@
 import e from "../PlIcon16/PlIcon16.js";
+import "../PlMaskIcon16/index.js";
 import t from "../PlSectionSeparator/PlSectionSeparator.js";
+import "../PlSectionSeparator/index.js";
 import n from "./ExpandTransition.js";
 import { computed as r, createCommentVNode as i, createElementBlock as a, createTextVNode as o, createVNode as s, defineComponent as c, inject as l, mergeModels as u, normalizeClass as d, openBlock as f, renderSlot as p, toDisplayString as m, toRef as h, unref as g, useModel as _, withCtx as v } from "vue";
 import { uniqueId as y } from "@milaboratories/helpers";

package/dist/components/PlAccordion/PlAccordionSection.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlAccordionSection.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlAccordion/PlAccordionSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport { PlSectionSeparator } from \"../PlSectionSeparator\";\nimport ExpandTransition from \"./ExpandTransition.vue\";\nimport type { Ref } from \"vue\";\nimport { computed, inject, toRef } from \"vue\";\n\nconst $m = inject<Ref<string>>(\"pl-accordion-model\", () => toRef(\"\"), true);\n\nconst $p = inject<\n Ref<{\n multiple?: boolean;\n }>\n>(\"pl-accordion-props\", () => toRef({ multiple: false }), true);\n\nconst model = defineModel<boolean>();\n\nconst id = uniqueId();\n\nconst isMulti = computed(() => !$p \|\| $p.value.multiple);\n\nconst open = computed({\n get() {\n if (isMulti.value) {\n return model.value;\n }\n\n return $m ? $m.value === id : model.value;\n },\n set(on) {\n if (isMulti.value) {\n model.value = on;\n } else if ($m) {\n $m.value = $m.value === id ? \"\" : id;\n }\n },\n});\n\ndefineProps<{\n /*\n The label text (optional)\n /\n label?: string;\n /\n If `true`, remove top padding\n /\n compact?: boolean;\n}>();\n</script>\n\n<template>\n <div class=\"pl-accordion-section\">\n <PlSectionSeparator :class=\"$style.separator\" :compact=\"compact\" @click=\"open = !open\">\n <PlMaskIcon16 name=\"chevron-right\" :class=\"[{ [$style.down]: open }, $style.chevron]\" />\n {{ label }}\n </PlSectionSeparator>\n <ExpandTransition>\n <div v-if=\"open\" :class=\"$style.content\">\n <slot />\n </div>\n </ExpandTransition>\n </div>\n</template>\n\n<style module>\n.content {\n display: flex;\n flex-direction: column;\n gap: var(--gap-v);\n will-change: height, opacity;\n / transform: translateZ(0);\n backface-visibility: hidden; /\n}\n\n.content > :first-child {\n margin-top: 24px;\n}\n\n.content > *:last-child {\n margin-bottom: 4px;\n}\n\n.separator {\n cursor: pointer;\n &:hover {\n --pl-separator-txt-color: var(--txt-01);\n --mask-icon-bg-color: var(--ic-01);\n }\n}\n\n.chevron {\n transition-duration: 50ms;\n}\n\n.down {\n transform: rotate(90deg);\n}\n</style>\n"],"mappings":"~~;;;;;;;;;;;;;;;;~~EAQA,IAAM,IAAK,EAAoB,4BAA4B,EAAM,GAAG,EAAE,GAAK,EAErE,IAAK,EAIT,4BAA4B,EAAM,EAAE,UAAU,IAAO,CAAC,EAAE,GAAK,EAEzD,IAAQ,EAAoB,GAAA,aAAE,EAE9B,IAAK,GAAU,EAEf,IAAU,QAAe,CAAC,KAAM,EAAG,MAAM,SAAS,EAElD,IAAO,EAAS;GACpB,MAAM;AAKJ,WAJI,EAAQ,QACH,EAAM,QAGR,IAAK,EAAG,UAAU,IAAK,EAAM;;GAEtC,IAAI,GAAI;AACN,IAAI,EAAQ,QACV,EAAM,QAAQ,IACL,MACT,EAAG,QAAQ,EAAG,UAAU,IAAK,KAAK;;GAGvC,CAAC;yBAeA,EAUM,OAVN,GAUM,CATJ,EAGqB,EAAA,EAAA,EAAA;GAHA,OAAK,EAAEA,EAAAA,OAAO,UAAS;GAAG,SAAS,EAAA;GAAU,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAI,CAAI,EAAA;;oBACS,CAAxF,EAAwF,EAAA,EAAA,EAAA;IAA1E,MAAK;IAAiB,OAAK,EAAA,CAAA,GAAMA,EAAAA,OAAO,OAAO,EAAA,OAAI,EAAIA,EAAAA,OAAO,QAAO,CAAA;6BAAK,MACxF,EAAG,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA;;+BAEV,EAImB,GAAA,MAAA;oBADX,CAFK,EAAA,SAAA,GAAA,EAAX,EAEM,OAAA;;IAFY,OAAK,EAAEA,EAAAA,OAAO,QAAO;OACrC,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"PlAccordionSection.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlAccordion/PlAccordionSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport { PlSectionSeparator } from \"../PlSectionSeparator\";\nimport ExpandTransition from \"./ExpandTransition.vue\";\nimport type { Ref } from \"vue\";\nimport { computed, inject, toRef } from \"vue\";\n\nconst $m = inject<Ref<string>>(\"pl-accordion-model\", () => toRef(\"\"), true);\n\nconst $p = inject<\n Ref<{\n multiple?: boolean;\n }>\n>(\"pl-accordion-props\", () => toRef({ multiple: false }), true);\n\nconst model = defineModel<boolean>();\n\nconst id = uniqueId();\n\nconst isMulti = computed(() => !$p \|\| $p.value.multiple);\n\nconst open = computed({\n get() {\n if (isMulti.value) {\n return model.value;\n }\n\n return $m ? $m.value === id : model.value;\n },\n set(on) {\n if (isMulti.value) {\n model.value = on;\n } else if ($m) {\n $m.value = $m.value === id ? \"\" : id;\n }\n },\n});\n\ndefineProps<{\n /*\n The label text (optional)\n /\n label?: string;\n /\n If `true`, remove top padding\n /\n compact?: boolean;\n}>();\n</script>\n\n<template>\n <div class=\"pl-accordion-section\">\n <PlSectionSeparator :class=\"$style.separator\" :compact=\"compact\" @click=\"open = !open\">\n <PlMaskIcon16 name=\"chevron-right\" :class=\"[{ [$style.down]: open }, $style.chevron]\" />\n {{ label }}\n </PlSectionSeparator>\n <ExpandTransition>\n <div v-if=\"open\" :class=\"$style.content\">\n <slot />\n </div>\n </ExpandTransition>\n </div>\n</template>\n\n<style module>\n.content {\n display: flex;\n flex-direction: column;\n gap: var(--gap-v);\n will-change: height, opacity;\n / transform: translateZ(0);\n backface-visibility: hidden; /\n}\n\n.content > :first-child {\n margin-top: 24px;\n}\n\n.content > *:last-child {\n margin-bottom: 4px;\n}\n\n.separator {\n cursor: pointer;\n &:hover {\n --pl-separator-txt-color: var(--txt-01);\n --mask-icon-bg-color: var(--ic-01);\n }\n}\n\n.chevron {\n transition-duration: 50ms;\n}\n\n.down {\n transform: rotate(90deg);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAQA,IAAM,IAAK,EAAoB,4BAA4B,EAAM,GAAG,EAAE,GAAK,EAErE,IAAK,EAIT,4BAA4B,EAAM,EAAE,UAAU,IAAO,CAAC,EAAE,GAAK,EAEzD,IAAQ,EAAoB,GAAA,aAAE,EAE9B,IAAK,GAAU,EAEf,IAAU,QAAe,CAAC,KAAM,EAAG,MAAM,SAAS,EAElD,IAAO,EAAS;GACpB,MAAM;AAKJ,WAJI,EAAQ,QACH,EAAM,QAGR,IAAK,EAAG,UAAU,IAAK,EAAM;;GAEtC,IAAI,GAAI;AACN,IAAI,EAAQ,QACV,EAAM,QAAQ,IACL,MACT,EAAG,QAAQ,EAAG,UAAU,IAAK,KAAK;;GAGvC,CAAC;yBAeA,EAUM,OAVN,GAUM,CATJ,EAGqB,EAAA,EAAA,EAAA;GAHA,OAAK,EAAEA,EAAAA,OAAO,UAAS;GAAG,SAAS,EAAA;GAAU,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAI,CAAI,EAAA;;oBACS,CAAxF,EAAwF,EAAA,EAAA,EAAA;IAA1E,MAAK;IAAiB,OAAK,EAAA,CAAA,GAAMA,EAAAA,OAAO,OAAO,EAAA,OAAI,EAAIA,EAAAA,OAAO,QAAO,CAAA;6BAAK,MACxF,EAAG,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA;;+BAEV,EAImB,GAAA,MAAA;oBADX,CAFK,EAAA,SAAA,GAAA,EAAX,EAEM,OAAA;;IAFY,OAAK,EAAEA,EAAAA,OAAO,QAAO;OACrC,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

package/dist/components/PlAccordion/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import "./PlAccordion.js";
2	+ import "./PlAccordionSection.js";

package/dist/components/PlAlert/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./PlAlert.js";

package/dist/components/PlAlert/pl-alert.css CHANGED Viewed

	@@ -1 +1 @@
1	- .pl-alert{--text-font-family:var(--font-family-base);--text-white-space:normal;--indent:24px;border:1px solid var(--border-color-default);color:var(--txt-01);border-radius:6px;flex-wrap:nowrap;gap:12px;padding:12px;display:flex;position:relative}.pl-alert.monospace{--text-font-family:var(--font-family-monospace)}.pl-alert.whiteSpacePre{--text-white-space:pre}.pl-alert__error{background:var(--notification-error)}.pl-alert__warn{background:var(--notification-warning)}.pl-alert__success{background:var(--notification-success)}.pl-alert__info{background:var(--notification-neutral)}.pl-alert__icon{width:24px}.pl-alert__main{flex-direction:column;flex:1;gap:6px;width:100%;min-height:24px;display:flex;overflow:hidden}.pl-alert__main label{letter-spacing:-.2px;font-size:20px;font-weight:500;line-height:24px}.pl-alert__main__text{font-size:14px;font-weight:500;line-height:20px;font-family:var(--text-font-family);white-space:var(--text-white-space);--thumb-color:var(--ic-02);flex:1;max-width:100%;overflow-y:auto}.pl-alert__main__text::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-alert__main__text::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-alert__main__text::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-alert__close-btn{cursor:pointer;background-color:#d3d7e0;width:24px;height:24px;transition:all .1s ease-in-out;position:absolute;top:10px;right:12px~~;-webkit-~~mask-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.99954%2018L11.9995%2012M11.9995%2012L17.9995%206M11.9995%2012L5.99954%206M11.9995%2012L17.9995%2018'%20stroke='%23110529'%20stroke-width='1.5'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.99954%2018L11.9995%2012M11.9995%2012L17.9995%206M11.9995%2012L5.99954%206M11.9995%2012L17.9995%2018'%20stroke='%23110529'%20stroke-width='1.5'/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-~~position:50%;-webkit-mask-~~size:24px;mask-~~size:24px;-webkit-mask-~~repeat:no-repeat~~;mask-repeat:no-repeat~~}.pl-alert__close-btn:hover{background-color:var(--main-dark-color)}
1	+ .pl-alert{--text-font-family:var(--font-family-base);--text-white-space:normal;--indent:24px;border:1px solid var(--border-color-default);color:var(--txt-01);border-radius:6px;flex-wrap:nowrap;gap:12px;padding:12px;display:flex;position:relative}.pl-alert.monospace{--text-font-family:var(--font-family-monospace)}.pl-alert.whiteSpacePre{--text-white-space:pre}.pl-alert__error{background:var(--notification-error)}.pl-alert__warn{background:var(--notification-warning)}.pl-alert__success{background:var(--notification-success)}.pl-alert__info{background:var(--notification-neutral)}.pl-alert__icon{width:24px}.pl-alert__main{flex-direction:column;flex:1;gap:6px;width:100%;min-height:24px;display:flex;overflow:hidden}.pl-alert__main label{letter-spacing:-.2px;font-size:20px;font-weight:500;line-height:24px}.pl-alert__main__text{font-size:14px;font-weight:500;line-height:20px;font-family:var(--text-font-family);white-space:var(--text-white-space);--thumb-color:var(--ic-02);flex:1;max-width:100%;overflow-y:auto}.pl-alert__main__text::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-alert__main__text::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-alert__main__text::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-alert__close-btn{cursor:pointer;background-color:#d3d7e0;width:24px;height:24px;transition:all .1s ease-in-out;position:absolute;top:10px;right:12px;mask-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.99954%2018L11.9995%2012M11.9995%2012L17.9995%206M11.9995%2012L5.99954%206M11.9995%2012L17.9995%2018'%20stroke='%23110529'%20stroke-width='1.5'/%3e%3c/svg%3e");mask-position:50%;mask-size:24px;mask-repeat:no-repeat}.pl-alert__close-btn:hover{background-color:var(--main-dark-color)}

package/dist/components/PlAutocomplete/PlAutocomplete.vue2.js CHANGED Viewed

@@ -2,16 +2,21 @@ import e from "../DropdownListItem.js";
 import { tap as t } from "../../helpers/functions.js";
 import { normalizeListOptions as n } from "../../helpers/utils.js";
 import r from "../PlTooltip/PlTooltip.js";
+import "../PlTooltip/index.js";
 import { getErrorMessage as i } from "../../helpers/error.js";
 import a from "../LongText.js";
 import o from "../PlSvg/PlSvg.js";
+import "../PlSvg/index.js";
 import s from "../PlIcon24/PlIcon24.js";
 import ee from "../PlIcon16/PlIcon16.js";
 import './pl-autocomplete.css';/* empty css                */
 import te from "../../utils/DoubleContour.js";
 import { useLabelNotch as ne } from "../../utils/useLabelNotch.js";
 import { deepEqual as c } from "../../helpers/objects.js";
+import "../PlIcon16/index.js";
+import "../PlMaskIcon24/index.js";
 import re from "../../utils/DropdownOverlay/DropdownOverlay.js";
+import "../../utils/DropdownOverlay/index.js";
 import { useWatchFetch as l } from "../../composition/useWatchFetch.js";
 import ie from "../../assets/images/required.js";
 import { Fragment as ae, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as oe, createVNode as h, defineComponent as g, mergeModels as _, normalizeClass as v, openBlock as y, reactive as se, ref as b, renderList as ce, renderSlot as x, toDisplayString as S, unref as C, useModel as le, useSlots as ue, useTemplateRef as de, vModelText as fe, watch as w, watchPostEffect as pe, withCtx as T, withDirectives as me, withModifiers as E } from "vue";

package/dist/components/PlAutocomplete/PlAutocomplete.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlAutocomplete.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAutocomplete/PlAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a big list of options using string search request\n /\nexport default {\n name: \"PlAutocomplete\",\n};\n</script>\n\n<script\n lang=\"ts\"\n setup\n generic=\"M extends null \| undefined \| string \| number = null \| undefined \| string\"\n>\nimport \"./pl-autocomplete.scss\";\nimport { computed, reactive, ref, unref, 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 { refDebounced } from \"@vueuse/core\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\n\n/\n The current selected value.\n /\nconst model = defineModel<M>({ required: true });\n\nconst props = withDefaults(\n defineProps<{\n /\n Lambda for requesting of available options for the dropdown by search string.\n /\n optionsSearch: (string: string, type: \"value\" \| \"label\") => Promise<ListOption<M>[]>;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\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 Formatter for the selected value if its label is absent\n /\n formatValue?: (value: M) => string;\n /\n Makes some of corners not rounded\n * */\n groupPosition?:\n \| \"top\"\n \| \"bottom\"\n \| \"left\"\n \| \"right\"\n \| \"top-left\"\n \| \"top-right\"\n \| \"bottom-left\"\n \| \"bottom-right\"\n \| \"middle\";\n }>(),\n {\n modelSearch: undefined,\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 formatValue: (v: M) => String(v),\n groupPosition: 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 search = ref<string \| null>(null);\nconst data = reactive({\n activeIndex: -1,\n open: false,\n});\n\nconst findActiveIndex = () =>\n tap(\n renderedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst loadedOptionsRef = ref<ListOption<M>[]>([]);\nconst modelOptionRef = ref<ListOptionNormalized<M> \| undefined>(); // list of 1 option that is selected or empty, to keep selected label\n\nconst renderedOptionsRef = computed(() => {\n return normalizeListOptions(loadedOptionsRef.value).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })) as (ListOptionBase<M> & { index: number; isSelected: boolean; isActive: boolean })[];\n});\nconst isLoadingOptions = ref<boolean>(true);\nconst isLoadingError = ref<boolean>(false);\n\nconst isDisabled = computed(() => {\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return loadedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value));\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 (isLoadingError.value) {\n return \"Data loading error\";\n }\n\n return undefined;\n});\n\nconst textValue = computed(() => {\n const modelOption = unref(modelOptionRef);\n const options = unref(renderedOptionsRef);\n\n const item: ListOptionNormalized \| undefined =\n modelOption ??\n options.find((o) => deepEqual(o.value, model.value)) ??\n options.find((o) => deepEqual(o.value, model.value));\n\n return item?.label \|\| (model.value ? props.formatValue(model.value) : \"\");\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && model.value) {\n return \"\";\n }\n\n return model.value ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return model.value !== undefined && model.value !== null;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: (ListOptionBase<M> & { index: number }) \| undefined) => {\n model.value = v?.value as M;\n modelOptionRef.value = v;\n search.value = null;\n data.open = false;\n rootRef?.value?.focus();\n};\n\nconst clear = () => {\n model.value = undefined as M;\n modelOptionRef.value = undefined;\n};\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n};\n\nwatch(\n () => data.open,\n (v) => {\n search.value = v ? \"\" : null;\n },\n);\n\nconst onInputFocus = () => {\n data.open = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node \| null;\n\n if (\n !rootRef.value?.contains(relatedTarget) &&\n !overlayRef.value?.listRef?.contains(relatedTarget)\n ) {\n search.value = null;\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 search.value = \"\";\n }\n return;\n }\n\n if (e.code === \"Escape\") {\n data.open = false;\n search.value = null;\n rootRef.value?.focus();\n }\n\n const options = unref(renderedOptionsRef);\n\n const { length } = options;\n\n if (!length) {\n return;\n }\n\n if (e.code === \"Enter\") {\n selectOption(options.find((it) => it.index === activeIndex));\n }\n\n const localIndex = options.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 = renderedOptionsRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => model.value, 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 search.value; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n overlayRef.value?.scrollIntoActive();\n }\n});\n\nconst searchDebounced = refDebounced(search, 300, { maxWait: 1000 });\n\nconst optionsRequest = useWatchFetch(\n () => searchDebounced.value,\n async (v) => {\n if (v !== null) {\n // search is null when dropdown is closed;\n return props.optionsSearch(v, \"label\");\n }\n return undefined;\n },\n);\n\nconst modelOptionRequest = useWatchFetch(\n () => model.value,\n async (v) => {\n if (v != null && !deepEqual(modelOptionRef.value?.value, v)) {\n // load label for selected value if it was updated from outside the component\n return (await props.optionsSearch(String(v), \"value\"))?.[0];\n }\n return modelOptionRef.value;\n },\n);\n\nwatch(\n () => optionsRequest.value,\n (result) => {\n if (result) {\n loadedOptionsRef.value = result;\n if (search.value !== null) {\n isLoadingError.value = false;\n }\n }\n },\n);\n\nwatch(\n () => modelOptionRequest.value,\n (result) => {\n if (result) {\n modelOptionRef.value = normalizeListOptions([result])[0];\n }\n },\n);\n\nwatch(\n () => optionsRequest.error,\n (err) => {\n if (err) {\n isLoadingError.value = Boolean(err);\n }\n },\n);\n\nwatch(\n () => optionsRequest.loading \|\| modelOptionRequest.loading,\n (loading) => {\n isLoadingOptions.value = loading;\n },\n);\n</script>\n\n<template>\n <div class=\"pl-autocomplete__envelope\" @click.stop=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-autocomplete\"\n :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete__container\">\n <div class=\"pl-autocomplete__field\">\n <input\n ref=\"input\"\n v-model=\"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-autocomplete__controls\">\n <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16\n v-if=\"clearable && hasValue\"\n class=\"clear\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <slot name=\"append\" />\n <div class=\"pl-autocomplete__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <div\n v-if=\"arrowIconLarge\"\n class=\"arrow-icon\"\n :class=\"[`icon-24 ${arrowIconLarge}`]\"\n />\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 <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\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\n v-if=\"data.open\"\n ref=\"overlay\"\n :root=\"rootRef\"\n class=\"pl-autocomplete__options\"\n tabindex=\"-1\"\n :gap=\"3\"\n >\n <DropdownListItem\n v-for=\"(item, index) in renderedOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item)\"\n />\n <div v-if=\"!renderedOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-autocomplete__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-autocomplete__error\">{{ computedError }}</div>\n <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-autocomplete__helper\">\n {{ loadingOptionsHelper }}\n </div>\n <div v-else-if=\"helper\" class=\"pl-autocomplete__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCR,IAAM,IAAQ,GAAc,GAAA,aAAoB,EAE1C,IAAQ,GAsFR,KAAQ,IAEV,EAEE,IAAU,GAA8B,EACxC,IAAQ,GAAmC,EAE3C,IAAa,GAAe,UAAU,EAEtC,IAAS,EAAmB,KAAK,EACjC,IAAO,GAAS;GACpB,aAAa;GACb,MAAM;GACP,CAAC,EAEI,WACJ,EACE,EAAmB,MAAM,WAAW,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,GACzE,MAAO,IAAI,IAAI,IAAI,EACrB,EAEG,WAAsB,EAAK,cAAc,IAAiB,EAE1D,IAAmB,EAAqB,EAAE,CAAC,EAC3C,IAAiB,GAA0C,EAE3D,IAAqB,QAClB,EAAqB,EAAiB,MAAM,CAAC,KAAK,GAAK,OAAW;GACvE,GAAG;GACH;GACA,YAAY,MAAU,GAAc;GACpC,UAAU,MAAU,EAAK;GAC1B,EAAE,CACH,EACI,IAAmB,EAAa,GAAK,EACrC,IAAiB,EAAa,GAAM,EAEpC,IAAa,QACV,EAAM,SACb,EAEI,KAAgB,QACb,EAAiB,MAAM,WAAW,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,CAC/E,EAEI,IAAgB,QAAe;AAC/B,UAAiB,OAIrB;QAAI,EAAM,MACR,QAAO,EAAgB,EAAM,MAAM;AAGrC,QAAI,EAAe,MACjB,QAAO;;IAIT,EAEI,IAAY,QAAe;GAC/B,IAAM,IAAc,EAAM,EAAe,EACnC,IAAU,EAAM,EAAmB;AAOzC,WAJE,KACA,EAAQ,MAAM,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,IACpD,EAAQ,MAAM,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,GAEzC,UAAU,EAAM,QAAQ,EAAM,YAAY,EAAM,MAAM,GAAG;IACtE,EAEI,KAAsB,QACtB,CAAC,EAAK,QAAQ,EAAM,QACf,KAGF,EAAM,QAAQ,OAAO,EAAU,MAAM,GAAG,EAAM,YACrD,EAEI,IAAW,QACR,EAAM,UAAU,KAAA,KAAa,EAAM,UAAU,KACpD,EAEI,KAAW,QAAgB,EAAW,QAAQ,KAAA,IAAY,IAAK,EAE/D,KAAgB,MAA2D;AAK/E,GAJA,EAAM,QAAQ,GAAG,OACjB,EAAe,QAAQ,GACvB,EAAO,QAAQ,MACf,EAAK,OAAO,IACZ,GAAS,OAAO,OAAO;KAGnB,WAAc;AAElB,GADA,EAAM,QAAQ,KAAA,GACd,EAAe,QAAQ,KAAA;KAGnB,WAAwB,EAAM,OAAO,OAAO,EAE5C,WAAmB;AACvB,KAAK,OAAO,CAAC,EAAK;;AAGpB,UACQ,EAAK,OACV,MAAM;AACL,KAAO,QAAQ,IAAI,KAAK;IAE3B;EAED,IAAM,WAAqB;AACzB,KAAK,OAAO;KAGR,MAAc,MAAsB;GACxC,IAAM,IAAgB,EAAM;AAE5B,GACE,CAAC,EAAQ,OAAO,SAAS,EAAc,IACvC,CAAC,EAAW,OAAO,SAAS,SAAS,EAAa,KAElD,EAAO,QAAQ,MACf,EAAK,OAAO;KAIV,MAAiB,MAAgD;AACrE,OAAK;IAAC;IAAa;IAAW;IAAS;IAAS,CAAC,SAAS,EAAE,KAAK,CAG/D,GAAE,gBAAgB;OAFlB;GAKF,IAAM,EAAE,SAAM,mBAAgB;AAE9B,OAAI,CAAC,GAAM;AACT,IAAI,EAAE,SAAS,YACb,EAAK,OAAO,IACZ,EAAO,QAAQ;AAEjB;;AAGF,GAAI,EAAE,SAAS,aACb,EAAK,OAAO,IACZ,EAAO,QAAQ,MACf,EAAQ,OAAO,OAAO;GAGxB,IAAM,IAAU,EAAM,EAAmB,EAEnC,EAAE,cAAW;AAEnB,OAAI,CAAC,EACH;AAGF,GAAI,EAAE,SAAS,WACb,EAAa,EAAQ,MAAM,MAAO,EAAG,UAAU,EAAY,CAAC;GAG9D,IAAM,IAAa,EAAQ,WAAW,MAAO,EAAG,UAAU,EAAY,IAAI,IAEpE,IAAQ,EAAE,SAAS,cAAc,IAAI,EAAE,SAAS,YAAY,KAAK,GAEjE,IAAW,KAAK,IAAI,IAAa,IAAQ,EAAO,GAAG;AAEzD,KAAK,cAAc,EAAmB,MAAM,GAAU,SAAS;;AAYjE,EATA,GAAc,EAAQ,EAEtB,QAAY,EAAM,OAAO,IAAc,EAAE,WAAW,IAAM,CAAC,EAE3D,QACQ,EAAK,OACV,MAAU,IAAO,EAAM,OAAO,OAAO,GAAG,GAC1C,EAED,SAAsB;AAIpB,GAFA,EAAO,OAEH,EAAK,eAAe,KAAK,EAAK,QAChC,EAAW,OAAO,kBAAkB;IAEtC;EAEF,IAAM,KAAkB,GAAa,GAAQ,KAAK,EAAE,SAAS,KAAM,CAAC,EAE9D,IAAiB,QACf,GAAgB,OACtB,OAAO,MAAM;AACX,OAAI,MAAM,KAER,QAAO,EAAM,cAAc,GAAG,QAAQ;IAI3C,EAEK,IAAqB,QACnB,EAAM,OACZ,OAAO,MACD,KAAK,QAAQ,CAAC,EAAU,EAAe,OAAO,OAAO,EAAE,IAEjD,MAAM,EAAM,cAAc,OAAO,EAAE,EAAE,QAAQ,IAAI,KAEpD,EAAe,MAEzB;SAED,QACQ,EAAe,QACpB,MAAW;AACV,GAAI,MACF,EAAiB,QAAQ,GACrB,EAAO,UAAU,SACnB,EAAe,QAAQ;IAI9B,EAED,QACQ,EAAmB,QACxB,MAAW;AACV,GAAI,MACF,EAAe,QAAQ,EAAqB,CAAC,EAAO,CAAC,CAAC;IAG3D,EAED,QACQ,EAAe,QACpB,MAAQ;AACP,GAAI,MACF,EAAe,QAAQ,EAAQ;IAGpC,EAED,QACQ,EAAe,WAAW,EAAmB,UAClD,MAAY;AACX,KAAiB,QAAQ;IAE5B,kBAIC,EAmFM,OAAA;GAnFD,OAAM;GAA6B,SAAK,EAAO,IAAe,CAAA,OAAA,CAAA;MACjE,EA4EM,OAAA;YA3EA;GAAJ,KAAI;GACH,UAAU,GAAA;GACX,OAAK,EAAA,CAAC,mBAAiB;IAAA,MACP,EAAK;IAAI,OAAS,EAAQ,EAAA;IAAa,UAAa,EAAA;IAAU,CAAA,CAAA;GAC7E,WAAS;GACT,YAAU;MAEX,EAmEM,OAnEN,IAmEM;GAlEJ,EAoCM,OApCN,IAoCM;OAnCJ,EAUE,SAAA;cATI;KAAJ,KAAI;8CACW,QAAA;KACf,MAAK;KACL,UAAS;KACR,UAAU,EAAA;KACV,aAAa,GAAA;KACd,YAAW;KACX,cAAa;KACZ,SAAO;2BAPC,EAAA,MAAM,CAAA,CAAA;IAUL,EAAK,oBAAA,GAAA,EAAjB,EAEM,OAFN,GAEM,CADJ,EAAsC,GAAA,MAAA;sBAAZ,CAAA,GAAA,EAAZ,EAAA,MAAS,EAAA,EAAA,CAAA,CAAA;;;IAGzB,EAkBM,OAlBN,GAkBM;KAjBgB,EAAA,SAAA,GAAA,EAApB,EAAuD,EAAA,EAAA,EAAA;;MAAjB,MAAK;;KAEnC,EAAA,aAAa,EAAA,SAAA,GAAA,EADrB,EAKE,EAAA,GAAA,EAAA;;MAHA,OAAM;MACN,MAAK;MACJ,SAAK,EAAO,IAAK,CAAA,OAAA,CAAA;;KAEpB,EAAsB,EAAA,QAAA,SAAA;KACtB,EAQM,OAAA;MARD,OAAM;MAAkC,SAAK,EAAO,IAAU,CAAA,OAAA,CAAA;SAEzD,EAAA,kBAAA,GAAA,EADR,EAIE,OAAA;;MAFA,OAAK,EAAA,CAAC,cAAY,CAAA,WACE,EAAA,iBAAc,CAAA,CAAA;oBAEpB,EAAA,aAAA,GAAA,EAAhB,EAAkF,OAAA;;MAAvD,OAAK,EAAA,CAAC,cAAY,CAAA,WAAqB,EAAA,YAAS,CAAA,CAAA;0BAC3E,EAAoD,OAApD,EAAoD,EAAA,CAAA;;;GAI7C,EAAA,SAAA,GAAA,EAAb,EAQQ,SAAA,GAAA;IAPO,EAAA,YAAA,GAAA,EAAb,EAA4C,EAAA,EAAA,EAAA;;KAApB,KAAK,EAAA,GAAW;;IACxC,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IACG,GAAM,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;KAJoB,OAAM;KAAO,UAAS;;KACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;GAKrB,EAAK,QAAA,GAAA,EADb,EAkBkB,EAAA,GAAA,EAAA;;IAhBhB,KAAI;IACH,MAAM,EAAA;IACP,OAAM;IACN,UAAS;IACR,KAAK;;qBAGuC,EAAA,EAAA,GAAA,EAD7C,EAQE,IAAA,MAAA,GAPwB,EAAA,QAAhB,GAAM,YADhB,EAQE,GAAA;KANC,KAAK;KACL,QAAQ;KACR,eAAa,EAAK;KAClB,cAAY,EAAK;KACjB,MAAM,EAAA;KACN,SAAK,GAAA,MAAO,EAAa,EAAI,EAAA,CAAA,OAAA,CAAA;;;;;;;iBAEpB,EAAA,MAAmB,SAA2C,EAAA,IAAA,GAAA,IAA3C,GAAA,EAA/B,EAAgF,OAAhF,GAA6D,gBAAa,EAAA,CAAA;;;GAE5E,EAAkF,IAAA;IAAnE,OAAM;IAA4B,kBAAgB,EAAA;;gBAG1D,EAAA,SAAA,GAAA,EAAX,EAAkF,OAAlF,GAAkF,EAAtB,EAAA,MAAa,EAAA,EAAA,IACzD,EAAA,SAAoB,EAAA,wBAAA,GAAA,EAApC,EAEM,OAFN,GAEM,EADD,EAAA,qBAAoB,EAAA,EAAA,IAET,EAAA,UAAA,GAAA,EAAhB,EAA0E,OAA1E,GAA0E,EAAf,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"PlAutocomplete.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAutocomplete/PlAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A component for selecting one value from a big list of options using string search request\n /\nexport default {\n name: \"PlAutocomplete\",\n};\n</script>\n\n<script\n lang=\"ts\"\n setup\n generic=\"M extends null \| undefined \| string \| number = null \| undefined \| string\"\n>\nimport \"./pl-autocomplete.scss\";\nimport { computed, reactive, ref, unref, 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 { refDebounced } from \"@vueuse/core\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\n\n/\n The current selected value.\n /\nconst model = defineModel<M>({ required: true });\n\nconst props = withDefaults(\n defineProps<{\n /\n Lambda for requesting of available options for the dropdown by search string.\n /\n optionsSearch: (string: string, type: \"value\" \| \"label\") => Promise<ListOption<M>[]>;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\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 Formatter for the selected value if its label is absent\n /\n formatValue?: (value: M) => string;\n /\n Makes some of corners not rounded\n * */\n groupPosition?:\n \| \"top\"\n \| \"bottom\"\n \| \"left\"\n \| \"right\"\n \| \"top-left\"\n \| \"top-right\"\n \| \"bottom-left\"\n \| \"bottom-right\"\n \| \"middle\";\n }>(),\n {\n modelSearch: undefined,\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 formatValue: (v: M) => String(v),\n groupPosition: 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 search = ref<string \| null>(null);\nconst data = reactive({\n activeIndex: -1,\n open: false,\n});\n\nconst findActiveIndex = () =>\n tap(\n renderedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value)),\n (v) => (v < 0 ? 0 : v),\n );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst loadedOptionsRef = ref<ListOption<M>[]>([]);\nconst modelOptionRef = ref<ListOptionNormalized<M> \| undefined>(); // list of 1 option that is selected or empty, to keep selected label\n\nconst renderedOptionsRef = computed(() => {\n return normalizeListOptions(loadedOptionsRef.value).map((opt, index) => ({\n ...opt,\n index,\n isSelected: index === selectedIndex.value,\n isActive: index === data.activeIndex,\n })) as (ListOptionBase<M> & { index: number; isSelected: boolean; isActive: boolean })[];\n});\nconst isLoadingOptions = ref<boolean>(true);\nconst isLoadingError = ref<boolean>(false);\n\nconst isDisabled = computed(() => {\n return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n return loadedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value));\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 (isLoadingError.value) {\n return \"Data loading error\";\n }\n\n return undefined;\n});\n\nconst textValue = computed(() => {\n const modelOption = unref(modelOptionRef);\n const options = unref(renderedOptionsRef);\n\n const item: ListOptionNormalized \| undefined =\n modelOption ??\n options.find((o) => deepEqual(o.value, model.value)) ??\n options.find((o) => deepEqual(o.value, model.value));\n\n return item?.label \|\| (model.value ? props.formatValue(model.value) : \"\");\n});\n\nconst computedPlaceholder = computed(() => {\n if (!data.open && model.value) {\n return \"\";\n }\n\n return model.value ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n return model.value !== undefined && model.value !== null;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: (ListOptionBase<M> & { index: number }) \| undefined) => {\n model.value = v?.value as M;\n modelOptionRef.value = v;\n search.value = null;\n data.open = false;\n rootRef?.value?.focus();\n};\n\nconst clear = () => {\n model.value = undefined as M;\n modelOptionRef.value = undefined;\n};\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n data.open = !data.open;\n};\n\nwatch(\n () => data.open,\n (v) => {\n search.value = v ? \"\" : null;\n },\n);\n\nconst onInputFocus = () => {\n data.open = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node \| null;\n\n if (\n !rootRef.value?.contains(relatedTarget) &&\n !overlayRef.value?.listRef?.contains(relatedTarget)\n ) {\n search.value = null;\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 search.value = \"\";\n }\n return;\n }\n\n if (e.code === \"Escape\") {\n data.open = false;\n search.value = null;\n rootRef.value?.focus();\n }\n\n const options = unref(renderedOptionsRef);\n\n const { length } = options;\n\n if (!length) {\n return;\n }\n\n if (e.code === \"Enter\") {\n selectOption(options.find((it) => it.index === activeIndex));\n }\n\n const localIndex = options.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 = renderedOptionsRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => model.value, 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 search.value; // to watch\n\n if (data.activeIndex >= 0 && data.open) {\n overlayRef.value?.scrollIntoActive();\n }\n});\n\nconst searchDebounced = refDebounced(search, 300, { maxWait: 1000 });\n\nconst optionsRequest = useWatchFetch(\n () => searchDebounced.value,\n async (v) => {\n if (v !== null) {\n // search is null when dropdown is closed;\n return props.optionsSearch(v, \"label\");\n }\n return undefined;\n },\n);\n\nconst modelOptionRequest = useWatchFetch(\n () => model.value,\n async (v) => {\n if (v != null && !deepEqual(modelOptionRef.value?.value, v)) {\n // load label for selected value if it was updated from outside the component\n return (await props.optionsSearch(String(v), \"value\"))?.[0];\n }\n return modelOptionRef.value;\n },\n);\n\nwatch(\n () => optionsRequest.value,\n (result) => {\n if (result) {\n loadedOptionsRef.value = result;\n if (search.value !== null) {\n isLoadingError.value = false;\n }\n }\n },\n);\n\nwatch(\n () => modelOptionRequest.value,\n (result) => {\n if (result) {\n modelOptionRef.value = normalizeListOptions([result])[0];\n }\n },\n);\n\nwatch(\n () => optionsRequest.error,\n (err) => {\n if (err) {\n isLoadingError.value = Boolean(err);\n }\n },\n);\n\nwatch(\n () => optionsRequest.loading \|\| modelOptionRequest.loading,\n (loading) => {\n isLoadingOptions.value = loading;\n },\n);\n</script>\n\n<template>\n <div class=\"pl-autocomplete__envelope\" @click.stop=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-autocomplete\"\n :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete__container\">\n <div class=\"pl-autocomplete__field\">\n <input\n ref=\"input\"\n v-model=\"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-autocomplete__controls\">\n <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n <PlIcon16\n v-if=\"clearable && hasValue\"\n class=\"clear\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <slot name=\"append\" />\n <div class=\"pl-autocomplete__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <div\n v-if=\"arrowIconLarge\"\n class=\"arrow-icon\"\n :class=\"[`icon-24 ${arrowIconLarge}`]\"\n />\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 <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\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\n v-if=\"data.open\"\n ref=\"overlay\"\n :root=\"rootRef\"\n class=\"pl-autocomplete__options\"\n tabindex=\"-1\"\n :gap=\"3\"\n >\n <DropdownListItem\n v-for=\"(item, index) in renderedOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :is-selected=\"item.isSelected\"\n :is-hovered=\"item.isActive\"\n :size=\"optionSize\"\n @click.stop=\"selectOption(item)\"\n />\n <div v-if=\"!renderedOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-autocomplete__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-autocomplete__error\">{{ computedError }}</div>\n <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-autocomplete__helper\">\n {{ loadingOptionsHelper }}\n </div>\n <div v-else-if=\"helper\" class=\"pl-autocomplete__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCR,IAAM,IAAQ,GAAc,GAAA,aAAoB,EAE1C,IAAQ,GAsFR,KAAQ,IAEV,EAEE,IAAU,GAA8B,EACxC,IAAQ,GAAmC,EAE3C,IAAa,GAAe,UAAU,EAEtC,IAAS,EAAmB,KAAK,EACjC,IAAO,GAAS;GACpB,aAAa;GACb,MAAM;GACP,CAAC,EAEI,WACJ,EACE,EAAmB,MAAM,WAAW,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,GACzE,MAAO,IAAI,IAAI,IAAI,EACrB,EAEG,WAAsB,EAAK,cAAc,IAAiB,EAE1D,IAAmB,EAAqB,EAAE,CAAC,EAC3C,IAAiB,GAA0C,EAE3D,IAAqB,QAClB,EAAqB,EAAiB,MAAM,CAAC,KAAK,GAAK,OAAW;GACvE,GAAG;GACH;GACA,YAAY,MAAU,GAAc;GACpC,UAAU,MAAU,EAAK;GAC1B,EAAE,CACH,EACI,IAAmB,EAAa,GAAK,EACrC,IAAiB,EAAa,GAAM,EAEpC,IAAa,QACV,EAAM,SACb,EAEI,KAAgB,QACb,EAAiB,MAAM,WAAW,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,CAC/E,EAEI,IAAgB,QAAe;AAC/B,UAAiB,OAIrB;QAAI,EAAM,MACR,QAAO,EAAgB,EAAM,MAAM;AAGrC,QAAI,EAAe,MACjB,QAAO;;IAIT,EAEI,IAAY,QAAe;GAC/B,IAAM,IAAc,EAAM,EAAe,EACnC,IAAU,EAAM,EAAmB;AAOzC,WAJE,KACA,EAAQ,MAAM,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,IACpD,EAAQ,MAAM,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,GAEzC,UAAU,EAAM,QAAQ,EAAM,YAAY,EAAM,MAAM,GAAG;IACtE,EAEI,KAAsB,QACtB,CAAC,EAAK,QAAQ,EAAM,QACf,KAGF,EAAM,QAAQ,OAAO,EAAU,MAAM,GAAG,EAAM,YACrD,EAEI,IAAW,QACR,EAAM,UAAU,KAAA,KAAa,EAAM,UAAU,KACpD,EAEI,KAAW,QAAgB,EAAW,QAAQ,KAAA,IAAY,IAAK,EAE/D,KAAgB,MAA2D;AAK/E,GAJA,EAAM,QAAQ,GAAG,OACjB,EAAe,QAAQ,GACvB,EAAO,QAAQ,MACf,EAAK,OAAO,IACZ,GAAS,OAAO,OAAO;KAGnB,WAAc;AAElB,GADA,EAAM,QAAQ,KAAA,GACd,EAAe,QAAQ,KAAA;KAGnB,WAAwB,EAAM,OAAO,OAAO,EAE5C,WAAmB;AACvB,KAAK,OAAO,CAAC,EAAK;;AAGpB,UACQ,EAAK,OACV,MAAM;AACL,KAAO,QAAQ,IAAI,KAAK;IAE3B;EAED,IAAM,WAAqB;AACzB,KAAK,OAAO;KAGR,MAAc,MAAsB;GACxC,IAAM,IAAgB,EAAM;AAE5B,GACE,CAAC,EAAQ,OAAO,SAAS,EAAc,IACvC,CAAC,EAAW,OAAO,SAAS,SAAS,EAAa,KAElD,EAAO,QAAQ,MACf,EAAK,OAAO;KAIV,MAAiB,MAAgD;AACrE,OAAK;IAAC;IAAa;IAAW;IAAS;IAAS,CAAC,SAAS,EAAE,KAAK,CAG/D,GAAE,gBAAgB;OAFlB;GAKF,IAAM,EAAE,SAAM,mBAAgB;AAE9B,OAAI,CAAC,GAAM;AACT,IAAI,EAAE,SAAS,YACb,EAAK,OAAO,IACZ,EAAO,QAAQ;AAEjB;;AAGF,GAAI,EAAE,SAAS,aACb,EAAK,OAAO,IACZ,EAAO,QAAQ,MACf,EAAQ,OAAO,OAAO;GAGxB,IAAM,IAAU,EAAM,EAAmB,EAEnC,EAAE,cAAW;AAEnB,OAAI,CAAC,EACH;AAGF,GAAI,EAAE,SAAS,WACb,EAAa,EAAQ,MAAM,MAAO,EAAG,UAAU,EAAY,CAAC;GAG9D,IAAM,IAAa,EAAQ,WAAW,MAAO,EAAG,UAAU,EAAY,IAAI,IAEpE,IAAQ,EAAE,SAAS,cAAc,IAAI,EAAE,SAAS,YAAY,KAAK,GAEjE,IAAW,KAAK,IAAI,IAAa,IAAQ,EAAO,GAAG;AAEzD,KAAK,cAAc,EAAmB,MAAM,GAAU,SAAS;;AAYjE,EATA,GAAc,EAAQ,EAEtB,QAAY,EAAM,OAAO,IAAc,EAAE,WAAW,IAAM,CAAC,EAE3D,QACQ,EAAK,OACV,MAAU,IAAO,EAAM,OAAO,OAAO,GAAG,GAC1C,EAED,SAAsB;AAIpB,GAFA,EAAO,OAEH,EAAK,eAAe,KAAK,EAAK,QAChC,EAAW,OAAO,kBAAkB;IAEtC;EAEF,IAAM,KAAkB,GAAa,GAAQ,KAAK,EAAE,SAAS,KAAM,CAAC,EAE9D,IAAiB,QACf,GAAgB,OACtB,OAAO,MAAM;AACX,OAAI,MAAM,KAER,QAAO,EAAM,cAAc,GAAG,QAAQ;IAI3C,EAEK,IAAqB,QACnB,EAAM,OACZ,OAAO,MACD,KAAK,QAAQ,CAAC,EAAU,EAAe,OAAO,OAAO,EAAE,IAEjD,MAAM,EAAM,cAAc,OAAO,EAAE,EAAE,QAAQ,IAAI,KAEpD,EAAe,MAEzB;SAED,QACQ,EAAe,QACpB,MAAW;AACV,GAAI,MACF,EAAiB,QAAQ,GACrB,EAAO,UAAU,SACnB,EAAe,QAAQ;IAI9B,EAED,QACQ,EAAmB,QACxB,MAAW;AACV,GAAI,MACF,EAAe,QAAQ,EAAqB,CAAC,EAAO,CAAC,CAAC;IAG3D,EAED,QACQ,EAAe,QACpB,MAAQ;AACP,GAAI,MACF,EAAe,QAAQ,EAAQ;IAGpC,EAED,QACQ,EAAe,WAAW,EAAmB,UAClD,MAAY;AACX,KAAiB,QAAQ;IAE5B,kBAIC,EAmFM,OAAA;GAnFD,OAAM;GAA6B,SAAK,EAAO,IAAe,CAAA,OAAA,CAAA;MACjE,EA4EM,OAAA;YA3EA;GAAJ,KAAI;GACH,UAAU,GAAA;GACX,OAAK,EAAA,CAAC,mBAAiB;IAAA,MACP,EAAK;IAAI,OAAS,EAAQ,EAAA;IAAa,UAAa,EAAA;IAAU,CAAA,CAAA;GAC7E,WAAS;GACT,YAAU;MAEX,EAmEM,OAnEN,IAmEM;GAlEJ,EAoCM,OApCN,IAoCM;OAnCJ,EAUE,SAAA;cATI;KAAJ,KAAI;8CACW,QAAA;KACf,MAAK;KACL,UAAS;KACR,UAAU,EAAA;KACV,aAAa,GAAA;KACd,YAAW;KACX,cAAa;KACZ,SAAO;2BAPC,EAAA,MAAM,CAAA,CAAA;IAUL,EAAK,oBAAA,GAAA,EAAjB,EAEM,OAFN,GAEM,CADJ,EAAsC,GAAA,MAAA;sBAAZ,CAAA,GAAA,EAAZ,EAAA,MAAS,EAAA,EAAA,CAAA,CAAA;;;IAGzB,EAkBM,OAlBN,GAkBM;KAjBgB,EAAA,SAAA,GAAA,EAApB,EAAuD,EAAA,EAAA,EAAA;;MAAjB,MAAK;;KAEnC,EAAA,aAAa,EAAA,SAAA,GAAA,EADrB,EAKE,EAAA,GAAA,EAAA;;MAHA,OAAM;MACN,MAAK;MACJ,SAAK,EAAO,IAAK,CAAA,OAAA,CAAA;;KAEpB,EAAsB,EAAA,QAAA,SAAA;KACtB,EAQM,OAAA;MARD,OAAM;MAAkC,SAAK,EAAO,IAAU,CAAA,OAAA,CAAA;SAEzD,EAAA,kBAAA,GAAA,EADR,EAIE,OAAA;;MAFA,OAAK,EAAA,CAAC,cAAY,CAAA,WACE,EAAA,iBAAc,CAAA,CAAA;oBAEpB,EAAA,aAAA,GAAA,EAAhB,EAAkF,OAAA;;MAAvD,OAAK,EAAA,CAAC,cAAY,CAAA,WAAqB,EAAA,YAAS,CAAA,CAAA;0BAC3E,EAAoD,OAApD,EAAoD,EAAA,CAAA;;;GAI7C,EAAA,SAAA,GAAA,EAAb,EAQQ,SAAA,GAAA;IAPO,EAAA,YAAA,GAAA,EAAb,EAA4C,EAAA,EAAA,EAAA;;KAApB,KAAK,EAAA,GAAW;;IACxC,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IACG,GAAM,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;KAJoB,OAAM;KAAO,UAAS;;KACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;GAKrB,EAAK,QAAA,GAAA,EADb,EAkBkB,EAAA,GAAA,EAAA;;IAhBhB,KAAI;IACH,MAAM,EAAA;IACP,OAAM;IACN,UAAS;IACR,KAAK;;qBAGuC,EAAA,EAAA,GAAA,EAD7C,EAQE,IAAA,MAAA,GAPwB,EAAA,QAAhB,GAAM,YADhB,EAQE,GAAA;KANC,KAAK;KACL,QAAQ;KACR,eAAa,EAAK;KAClB,cAAY,EAAK;KACjB,MAAM,EAAA;KACN,SAAK,GAAA,MAAO,EAAa,EAAI,EAAA,CAAA,OAAA,CAAA;;;;;;;iBAEpB,EAAA,MAAmB,SAA2C,EAAA,IAAA,GAAA,IAA3C,GAAA,EAA/B,EAAgF,OAAhF,GAA6D,gBAAa,EAAA,CAAA;;;GAE5E,EAAkF,IAAA;IAAnE,OAAM;IAA4B,kBAAgB,EAAA;;gBAG1D,EAAA,SAAA,GAAA,EAAX,EAAkF,OAAlF,GAAkF,EAAtB,EAAA,MAAa,EAAA,EAAA,IACzD,EAAA,SAAoB,EAAA,wBAAA,GAAA,EAApC,EAEM,OAFN,GAEM,EADD,EAAA,qBAAoB,EAAA,EAAA,IAET,EAAA,UAAA,GAAA,EAAhB,EAA0E,OAA1E,GAA0E,EAAf,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

package/dist/components/PlAutocomplete/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./PlAutocomplete.js";

package/dist/components/PlAutocomplete/pl-autocomplete.css CHANGED Viewed

	@@ -1 +1 @@
1	- .pl-autocomplete__options{--option-hover-bg:var(--btn-sec-hover-grey);z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);--thumb-color:var(--ic-02);border-radius:6px;max-height:244px;position:absolute;overflow-y:auto;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14}.pl-autocomplete__options::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-autocomplete__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-autocomplete__options::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-autocomplete__options .nothing-found{height:var(--control-height);line-height:var(--control-height);opacity:.5;background-color:#fff;padding:0 10px;font-style:italic}.pl-autocomplete__options .option{height:var(--control-height);line-height:var(--control-height);cursor:pointer~~;-webkit-user-select:none~~;user-select:none;padding:0 30px 0 10px;position:relative}.pl-autocomplete__options .option .checkmark{display:none;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.pl-autocomplete__options .option>span{white-space:nowrap;text-overflow:ellipsis;max-width:100%;display:block;overflow:hidden}.pl-autocomplete__options .option.selected{background-color:var(--color-active-select)}.pl-autocomplete__options .option.selected .checkmark{display:block}.pl-autocomplete__options .option.active:not(.selected),.pl-autocomplete__options .option:hover{background-color:var(--option-hover-bg)}.pl-autocomplete{--contour-color:var(--txt-01);--contour-border-width:1px;--label-offset-left-x:8px;--label-offset-right-x:8px;--label-color:var(--txt-01);min-height:var(--control-height);font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);border-radius:6px;outline:none;position:relative}.pl-autocomplete__envelope{font-family:var(--control-font-family);min-width:160px}.pl-autocomplete label{top:-8px;left:var(--label-offset-left-x);white-space:pre;text-overflow:ellipsis;max-width:calc(100% - 16px);cursor:inherit;color:var(--label-color);background:var(--bg-elevated-01);border-bottom-right-radius:4px;border-bottom-left-radius:4px;align-items:center;gap:4px;padding:0 4px;font-size:12px;font-weight:500;display:flex;position:absolute;overflow:hidden}.pl-autocomplete label>span{white-space:pre;text-overflow:ellipsis;overflow:hidden}.pl-autocomplete__container{min-height:var(--control-height);color:var(--txt-01);border-radius:6px;position:absolute;top:0;left:0;right:0}.pl-autocomplete__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-autocomplete__field{min-height:var(--control-height);line-height:var(--control-height);cursor:pointer;background:0 0;border-radius:6px;flex-direction:row;align-items:center;padding-left:11px;display:flex;position:relative;overflow:hidden}.pl-autocomplete__field .input-value{pointer-events:none;color:var(--txt-01);white-space:pre;text-overflow:ellipsis;cursor:inherit;flex-direction:row;align-items:center;padding:0 60px 0 11px;line-height:20px;display:flex;position:absolute;inset:0;overflow:hidden}.pl-autocomplete__field input{min-height:calc(var(--control-height) - 2px);font-family:inherit;line-height:20px;font-size:inherit;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus);background-color:#0000;border:none;padding:0}.pl-autocomplete__field input:focus{outline:none}.pl-autocomplete__field input:placeholder-shown{text-overflow:ellipsis}.pl-autocomplete__field input::placeholder{color:var(--color-placeholder)}.pl-autocomplete__helper{color:var(--txt-03);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-autocomplete__error{color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-autocomplete__controls{min-height:var(--control-height);flex-direction:row;align-items:center;gap:6px;margin-left:auto;display:flex}.pl-autocomplete__controls .mask-16,.pl-autocomplete__controls .mask-24{--icon-color:var(--control-mask-fill);cursor:pointer}.pl-autocomplete__controls .clear{--icon-color:var(--ic-02)}.pl-autocomplete__controls .mask-loading{--icon-color:#07ad3e;animation:2.5s linear infinite spin}.pl-autocomplete__arrow-wrapper{min-height:var(--control-height);align-items:center;padding-right:11px;display:flex}.pl-autocomplete .arrow-icon{cursor:pointer}.pl-autocomplete .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);width:16px;height:16px;transition:transform .2s~~;-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-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-position:50%;mask-~~position:50%;-webkit-mask-~~size:16px;mask-~~size:16px;-webkit-mask-~~repeat:no-repeat~~;mask-repeat:no-repeat~~}.pl-autocomplete.open,.pl-autocomplete:focus-within{z-index:1;--label-color:var(--txt-focus)}.pl-autocomplete.open .pl-autocomplete__container{z-index:1000}.pl-autocomplete.open .pl-autocomplete__field{border-radius:6px 6px 0 0}.pl-autocomplete.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-autocomplete:hover{--contour-color:var(--control-hover-color)}.pl-autocomplete: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-autocomplete:focus-within.error{--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--color-error-shadow)}.pl-autocomplete.error{--contour-color:var(--txt-error);--label-color:var(--txt-error)}.pl-autocomplete.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-autocomplete.disabled .input-value{color:var(--dis-01)}
1	+ .pl-autocomplete__options{--option-hover-bg:var(--btn-sec-hover-grey);z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);--thumb-color:var(--ic-02);border-radius:6px;max-height:244px;position:absolute;overflow-y:auto;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14}.pl-autocomplete__options::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-autocomplete__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-autocomplete__options::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-autocomplete__options .nothing-found{height:var(--control-height);line-height:var(--control-height);opacity:.5;background-color:#fff;padding:0 10px;font-style:italic}.pl-autocomplete__options .option{height:var(--control-height);line-height:var(--control-height);cursor:pointer;user-select:none;padding:0 30px 0 10px;position:relative}.pl-autocomplete__options .option .checkmark{display:none;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.pl-autocomplete__options .option>span{white-space:nowrap;text-overflow:ellipsis;max-width:100%;display:block;overflow:hidden}.pl-autocomplete__options .option.selected{background-color:var(--color-active-select)}.pl-autocomplete__options .option.selected .checkmark{display:block}.pl-autocomplete__options .option.active:not(.selected),.pl-autocomplete__options .option:hover{background-color:var(--option-hover-bg)}.pl-autocomplete{--contour-color:var(--txt-01);--contour-border-width:1px;--label-offset-left-x:8px;--label-offset-right-x:8px;--label-color:var(--txt-01);min-height:var(--control-height);font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);border-radius:6px;outline:none;position:relative}.pl-autocomplete__envelope{font-family:var(--control-font-family);min-width:160px}.pl-autocomplete label{top:-8px;left:var(--label-offset-left-x);white-space:pre;text-overflow:ellipsis;max-width:calc(100% - 16px);cursor:inherit;color:var(--label-color);background:var(--bg-elevated-01);border-bottom-right-radius:4px;border-bottom-left-radius:4px;align-items:center;gap:4px;padding:0 4px;font-size:12px;font-weight:500;display:flex;position:absolute;overflow:hidden}.pl-autocomplete label>span{white-space:pre;text-overflow:ellipsis;overflow:hidden}.pl-autocomplete__container{min-height:var(--control-height);color:var(--txt-01);border-radius:6px;position:absolute;top:0;left:0;right:0}.pl-autocomplete__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-autocomplete__field{min-height:var(--control-height);line-height:var(--control-height);cursor:pointer;background:0 0;border-radius:6px;flex-direction:row;align-items:center;padding-left:11px;display:flex;position:relative;overflow:hidden}.pl-autocomplete__field .input-value{pointer-events:none;color:var(--txt-01);white-space:pre;text-overflow:ellipsis;cursor:inherit;flex-direction:row;align-items:center;padding:0 60px 0 11px;line-height:20px;display:flex;position:absolute;inset:0;overflow:hidden}.pl-autocomplete__field input{min-height:calc(var(--control-height) - 2px);font-family:inherit;line-height:20px;font-size:inherit;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus);background-color:#0000;border:none;padding:0}.pl-autocomplete__field input:focus{outline:none}.pl-autocomplete__field input:placeholder-shown{text-overflow:ellipsis}.pl-autocomplete__field input::placeholder{color:var(--color-placeholder)}.pl-autocomplete__helper{color:var(--txt-03);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-autocomplete__error{color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-autocomplete__controls{min-height:var(--control-height);flex-direction:row;align-items:center;gap:6px;margin-left:auto;display:flex}.pl-autocomplete__controls .mask-16,.pl-autocomplete__controls .mask-24{--icon-color:var(--control-mask-fill);cursor:pointer}.pl-autocomplete__controls .clear{--icon-color:var(--ic-02)}.pl-autocomplete__controls .mask-loading{--icon-color:#07ad3e;animation:2.5s linear infinite spin}.pl-autocomplete__arrow-wrapper{min-height:var(--control-height);align-items:center;padding-right:11px;display:flex}.pl-autocomplete .arrow-icon{cursor:pointer}.pl-autocomplete .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);width:16px;height:16px;transition:transform .2s;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-position:50%;mask-size:16px;mask-repeat:no-repeat}.pl-autocomplete.open,.pl-autocomplete:focus-within{z-index:1;--label-color:var(--txt-focus)}.pl-autocomplete.open .pl-autocomplete__container{z-index:1000}.pl-autocomplete.open .pl-autocomplete__field{border-radius:6px 6px 0 0}.pl-autocomplete.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-autocomplete:hover{--contour-color:var(--control-hover-color)}.pl-autocomplete: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-autocomplete:focus-within.error{--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--color-error-shadow)}.pl-autocomplete.error{--contour-color:var(--txt-error);--label-color:var(--txt-error)}.pl-autocomplete.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;user-select:none}.pl-autocomplete.disabled .input-value{color:var(--dis-01)}

package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue2.js CHANGED Viewed

@@ -1,16 +1,20 @@
 import e from "../DropdownListItem.js";
 import t from "../PlTooltip/PlTooltip.js";
+import "../PlTooltip/index.js";
 import { getErrorMessage as n } from "../../helpers/error.js";
 import r from "../PlSvg/PlSvg.js";
+import "../PlSvg/index.js";
 import i from "../PlIcon24/PlIcon24.js";
 import a from "../../utils/DoubleContour.js";
 import { useLabelNotch as o } from "../../utils/useLabelNotch.js";
 import { deepEqual as s, deepIncludes as c } from "../../helpers/objects.js";
+import "../PlMaskIcon24/index.js";
 import ee from "../../utils/DropdownOverlay/DropdownOverlay.js";
 import { useWatchFetch as l } from "../../composition/useWatchFetch.js";
 import te from "../../assets/images/required.js";
 import './pl-autocomplete-multi.css';/* empty css                      */
 import u from "../PlChip/PlChip.js";
+import "../PlChip/index.js";
 import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as ne, defineComponent as v, normalizeClass as re, openBlock as y, reactive as b, ref as x, renderList as S, renderSlot as C, toDisplayString as w, toRef as T, unref as E, useSlots as ie, useTemplateRef as ae, vModelText as D, watch as O, withCtx as k, withDirectives as oe, withModifiers as A } from "vue";
 import se from "canonicalize";
 var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue = { class: "pl-autocomplete-multi__field" }, de = ["disabled", "placeholder"], fe = {

package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlAutocompleteMulti.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A multi-select autocomplete component that allows users to search and select multiple values from a list of options.\n * Supports async data fetching, keyboard navigation, and displays selected items as removable chips.\n \n @example\n * Basic usage:\n * <PlAutocompleteMulti\n * v-model=\"selectedUsers\"\n * :options-search=\"searchUsers\"\n * :model-search=\"getUsersByIds\"\n * label=\"Select Users\"\n * placeholder=\"Search for users...\"\n * required\n * :debounce=\"300\"\n * helper=\"Choose one or more users from the list\"\n * />\n \n With async functions:\n * const selectedUsers = ref([])\n \n const searchUsers = async (searchTerm) => {\n * const response = await fetch('/api/users/search?q=' + searchTerm)\n * const users = await response.json()\n * return users.map(user => ({ value: user.id, label: user.name }))\n * }\n \n const getUsersByIds = async (userIds) => {\n * if (!userIds.length) return []\n * const response = await fetch('/api/users?ids=' + userIds.join(','))\n * const users = await response.json()\n * return users.map(user => ({ value: user.id, label: user.name }))\n * }\n /\nexport default {\n name: \"PlAutocompleteMulti\",\n};\n\nexport interface OptionsSearch<T> {\n (s: string, type: \"label\"): Promise<Readonly<ListOptionBase<T>[]>>;\n (s: T[], type: \"value\"): Promise<Readonly<ListOptionBase<T>[]>>;\n}\n</script>\n\n<script lang=\"ts\" setup generic=\"M extends string \| number = string\">\nimport \"./pl-autocomplete-multi.scss\";\n\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport canonicalize from \"canonicalize\";\nimport { computed, reactive, ref, toRef, unref, useSlots, useTemplateRef, watch } from \"vue\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { deepEqual, deepIncludes } from \"../../helpers/objects\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport DropdownOverlay from \"../../utils/DropdownOverlay/DropdownOverlay.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlChip } from \"../PlChip\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { PlTooltip } from \"../PlTooltip\";\n\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { PlSvg } from \"../PlSvg\";\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit(\"update:modelValue\", v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n defineProps<{\n /\n The current selected values.\n /\n modelValue: M[];\n /\n Lambda for requesting of available options for the dropdown by search string.\n /\n optionsSearch: OptionsSearch<M>;\n /\n Unique identifier for the source of the options, changing it will invalidate the options cache.\n /\n sourceId?: string;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\n /\n A helper text displayed below the dropdown when there are no errors (optional).\n /\n helper?: 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 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 Debounce time in ms for the options search.\n /\n debounce?: number;\n /\n If `true`, the search input is reset and focus is set on it when the new option is selected.\n /\n resetSearchOnSelect?: boolean;\n /\n The text to display when no options are found.\n /\n emptyOptionsText?: string;\n /\n Makes some of corners not rounded\n * */\n groupPosition?:\n \| \"top\"\n \| \"bottom\"\n \| \"left\"\n \| \"right\"\n \| \"top-left\"\n \| \"top-right\"\n \| \"bottom-left\"\n \| \"bottom-right\"\n \| \"middle\";\n }>(),\n {\n modelValue: () => [],\n label: undefined,\n helper: undefined,\n error: undefined,\n placeholder: \"...\",\n required: false,\n disabled: false,\n debounce: 300,\n emptyOptionsText: \"Nothing found\",\n sourceId: undefined,\n groupPosition: undefined,\n },\n);\n\nconst rootRef = ref<HTMLElement \| undefined>();\nconst inputRef = ref<HTMLInputElement \| undefined>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst data = reactive({\n search: \"\",\n activeOption: -1,\n open: false,\n optionsHeight: 0,\n});\n\nwatch(\n () => data.open,\n (v) => {\n if (!v) {\n data.search = \"\";\n }\n },\n { flush: \"sync\" },\n);\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n if (data.open && props.modelValue.length > 0) {\n return props.placeholder;\n }\n\n return props.modelValue.length > 0 ? \"\" : props.placeholder;\n});\n\nconst debounce = toRef(props, \"debounce\");\n\nconst searchOptionsRef = useWatchFetch(\n () => [data.search, data.open, props.sourceId] as const,\n async ([search, _open]) => {\n return props.optionsSearch(search, \"label\");\n },\n {\n filterWatchResult: ([_search, open]) => open,\n debounce,\n },\n);\n\nconst modelOptionsRef = useWatchFetch(\n () => [props.modelValue, props.sourceId] as const,\n async ([v]) => {\n return props.optionsSearch(v, \"value\");\n },\n {\n debounce,\n },\n);\n\nconst allOptionsRef = computed(() => {\n const modelOptions = modelOptionsRef.value ?? [];\n const searchOptions = searchOptionsRef.value ?? [];\n\n const seenValues = new Set<string \| undefined>();\n const result = [] as ListOptionBase<M>[];\n\n const addOptions = (options: Readonly<ListOptionBase<M>[]>) => {\n for (const option of options) {\n const canonicalValue = canonicalize(option.value);\n if (!seenValues.has(canonicalValue)) {\n seenValues.add(canonicalValue);\n result.push(option);\n }\n }\n };\n\n addOptions(modelOptions);\n addOptions(searchOptions);\n\n return result;\n});\n\nconst selectedOptionsRef = computed(() => {\n return selectedValuesRef.value\n .map((v) => allOptionsRef.value.find((opt) => deepEqual(opt.value, v)))\n .filter((v) => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n const selectedValues = unref(selectedValuesRef);\n\n const options = searchOptionsRef.value ?? [];\n\n return [...options].map((opt) => ({\n ...opt,\n selected: deepIncludes(selectedValues, opt.value),\n }));\n});\n\nconst isOptionsLoading = computed(() => searchOptionsRef.loading \|\| modelOptionsRef.loading);\n\nconst isDisabled = computed(() => {\n if (modelOptionsRef.value === undefined) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst updateActiveOption = () => {\n data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n const values = unref(selectedValuesRef);\n emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n if (props.resetSearchOnSelect) {\n data.search = \"\";\n }\n inputRef.value?.focus();\n};\n\nconst unselectOption = (d: M) =>\n emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nconst toggleOpen = () => (data.open = !data.open);\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node \| null;\n\n if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n const { open, activeOption } = 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 inputRef.value?.focus();\n }\n\n const filteredOptions = unref(filteredOptionsRef);\n\n const { length } = filteredOptions;\n\n if (!length) {\n return;\n }\n\n if ([\"ArrowDown\", \"ArrowUp\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n if (e.code === \"Enter\") {\n selectOption(filteredOptions[activeOption].value);\n }\n\n const d = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n data.activeOption = Math.abs(activeOption + d + length) % length;\n\n requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n () => props.modelValue,\n () => updateActiveOption(),\n { immediate: true },\n);\n\nconst computedError = computed(() => {\n if (isOptionsLoading.value) {\n return undefined;\n }\n\n if (searchOptionsRef.error) {\n return getErrorMessage(searchOptionsRef.error);\n }\n\n if (modelOptionsRef.error) {\n return getErrorMessage(modelOptionsRef.error);\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (props.modelValue.length && selectedOptionsRef.value.length !== props.modelValue.length) {\n return \"The selected values are not one of the options\";\n }\n\n return undefined;\n});\n</script>\n\n<template>\n <div class=\"pl-autocomplete-multi__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-autocomplete-multi\"\n :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete-multi__container\">\n <div class=\"pl-autocomplete-multi__field\">\n <input\n ref=\"inputRef\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"placeholderRef\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"data.open = true\"\n />\n <div v-if=\"!data.open\" class=\"chips-container\">\n <PlChip\n v-for=\"(opt, i) in selectedOptionsRef\"\n :key=\"i\"\n closeable\n small\n @click.stop=\"data.open = true\"\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label \|\| opt.value }}\n </PlChip>\n </div>\n\n <div class=\"pl-autocomplete-multi__controls\">\n <PlMaskIcon24 v-if=\"isOptionsLoading\" name=\"loading\" />\n <slot name=\"append\" />\n <div class=\"pl-autocomplete-multi__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <div class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\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\n v-if=\"data.open\"\n ref=\"overlay\"\n :root=\"rootRef\"\n class=\"pl-autocomplete-multi__options\"\n :gap=\"5\"\n tabindex=\"-1\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete-multi__open-chips-container\">\n <PlChip\n v-for=\"(opt, i) in selectedOptionsRef\"\n :key=\"i\"\n closeable\n small\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label \|\| opt.value }}\n </PlChip>\n </div>\n <DropdownListItem\n v-for=\"(item, index) in filteredOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :text-item=\"'text'\"\n :is-selected=\"item.selected\"\n :is-hovered=\"data.activeOption == index\"\n size=\"medium\"\n use-checkbox\n @click.stop=\"selectOption(item.value)\"\n />\n <div v-if=\"!filteredOptionsRef.length && !isOptionsLoading\" class=\"nothing-found\">\n {{ emptyOptionsText }}\n </div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-autocomplete-multi__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-autocomplete-multi__error\">{{ computedError }}</div>\n <div v-else-if=\"helper\" class=\"pl-autocomplete-multi__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"PlAutocompleteMulti.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A multi-select autocomplete component that allows users to search and select multiple values from a list of options.\n * Supports async data fetching, keyboard navigation, and displays selected items as removable chips.\n \n @example\n * Basic usage:\n * <PlAutocompleteMulti\n * v-model=\"selectedUsers\"\n * :options-search=\"searchUsers\"\n * :model-search=\"getUsersByIds\"\n * label=\"Select Users\"\n * placeholder=\"Search for users...\"\n * required\n * :debounce=\"300\"\n * helper=\"Choose one or more users from the list\"\n * />\n \n With async functions:\n * const selectedUsers = ref([])\n \n const searchUsers = async (searchTerm) => {\n * const response = await fetch('/api/users/search?q=' + searchTerm)\n * const users = await response.json()\n * return users.map(user => ({ value: user.id, label: user.name }))\n * }\n \n const getUsersByIds = async (userIds) => {\n * if (!userIds.length) return []\n * const response = await fetch('/api/users?ids=' + userIds.join(','))\n * const users = await response.json()\n * return users.map(user => ({ value: user.id, label: user.name }))\n * }\n /\nexport default {\n name: \"PlAutocompleteMulti\",\n};\n\nexport interface OptionsSearch<T> {\n (s: string, type: \"label\"): Promise<Readonly<ListOptionBase<T>[]>>;\n (s: T[], type: \"value\"): Promise<Readonly<ListOptionBase<T>[]>>;\n}\n</script>\n\n<script lang=\"ts\" setup generic=\"M extends string \| number = string\">\nimport \"./pl-autocomplete-multi.scss\";\n\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport canonicalize from \"canonicalize\";\nimport { computed, reactive, ref, toRef, unref, useSlots, useTemplateRef, watch } from \"vue\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { deepEqual, deepIncludes } from \"../../helpers/objects\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport DropdownOverlay from \"../../utils/DropdownOverlay/DropdownOverlay.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlChip } from \"../PlChip\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { PlTooltip } from \"../PlTooltip\";\n\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { PlSvg } from \"../PlSvg\";\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit(\"update:modelValue\", v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n defineProps<{\n /\n The current selected values.\n /\n modelValue: M[];\n /\n Lambda for requesting of available options for the dropdown by search string.\n /\n optionsSearch: OptionsSearch<M>;\n /\n Unique identifier for the source of the options, changing it will invalidate the options cache.\n /\n sourceId?: string;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\n /\n A helper text displayed below the dropdown when there are no errors (optional).\n /\n helper?: 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 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 Debounce time in ms for the options search.\n /\n debounce?: number;\n /\n If `true`, the search input is reset and focus is set on it when the new option is selected.\n /\n resetSearchOnSelect?: boolean;\n /\n The text to display when no options are found.\n /\n emptyOptionsText?: string;\n /\n Makes some of corners not rounded\n * */\n groupPosition?:\n \| \"top\"\n \| \"bottom\"\n \| \"left\"\n \| \"right\"\n \| \"top-left\"\n \| \"top-right\"\n \| \"bottom-left\"\n \| \"bottom-right\"\n \| \"middle\";\n }>(),\n {\n modelValue: () => [],\n label: undefined,\n helper: undefined,\n error: undefined,\n placeholder: \"...\",\n required: false,\n disabled: false,\n debounce: 300,\n emptyOptionsText: \"Nothing found\",\n sourceId: undefined,\n groupPosition: undefined,\n },\n);\n\nconst rootRef = ref<HTMLElement \| undefined>();\nconst inputRef = ref<HTMLInputElement \| undefined>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst data = reactive({\n search: \"\",\n activeOption: -1,\n open: false,\n optionsHeight: 0,\n});\n\nwatch(\n () => data.open,\n (v) => {\n if (!v) {\n data.search = \"\";\n }\n },\n { flush: \"sync\" },\n);\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n if (data.open && props.modelValue.length > 0) {\n return props.placeholder;\n }\n\n return props.modelValue.length > 0 ? \"\" : props.placeholder;\n});\n\nconst debounce = toRef(props, \"debounce\");\n\nconst searchOptionsRef = useWatchFetch(\n () => [data.search, data.open, props.sourceId] as const,\n async ([search, _open]) => {\n return props.optionsSearch(search, \"label\");\n },\n {\n filterWatchResult: ([_search, open]) => open,\n debounce,\n },\n);\n\nconst modelOptionsRef = useWatchFetch(\n () => [props.modelValue, props.sourceId] as const,\n async ([v]) => {\n return props.optionsSearch(v, \"value\");\n },\n {\n debounce,\n },\n);\n\nconst allOptionsRef = computed(() => {\n const modelOptions = modelOptionsRef.value ?? [];\n const searchOptions = searchOptionsRef.value ?? [];\n\n const seenValues = new Set<string \| undefined>();\n const result = [] as ListOptionBase<M>[];\n\n const addOptions = (options: Readonly<ListOptionBase<M>[]>) => {\n for (const option of options) {\n const canonicalValue = canonicalize(option.value);\n if (!seenValues.has(canonicalValue)) {\n seenValues.add(canonicalValue);\n result.push(option);\n }\n }\n };\n\n addOptions(modelOptions);\n addOptions(searchOptions);\n\n return result;\n});\n\nconst selectedOptionsRef = computed(() => {\n return selectedValuesRef.value\n .map((v) => allOptionsRef.value.find((opt) => deepEqual(opt.value, v)))\n .filter((v) => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n const selectedValues = unref(selectedValuesRef);\n\n const options = searchOptionsRef.value ?? [];\n\n return [...options].map((opt) => ({\n ...opt,\n selected: deepIncludes(selectedValues, opt.value),\n }));\n});\n\nconst isOptionsLoading = computed(() => searchOptionsRef.loading \|\| modelOptionsRef.loading);\n\nconst isDisabled = computed(() => {\n if (modelOptionsRef.value === undefined) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst updateActiveOption = () => {\n data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n const values = unref(selectedValuesRef);\n emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n if (props.resetSearchOnSelect) {\n data.search = \"\";\n }\n inputRef.value?.focus();\n};\n\nconst unselectOption = (d: M) =>\n emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nconst toggleOpen = () => (data.open = !data.open);\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node \| null;\n\n if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n const { open, activeOption } = 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 inputRef.value?.focus();\n }\n\n const filteredOptions = unref(filteredOptionsRef);\n\n const { length } = filteredOptions;\n\n if (!length) {\n return;\n }\n\n if ([\"ArrowDown\", \"ArrowUp\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n if (e.code === \"Enter\") {\n selectOption(filteredOptions[activeOption].value);\n }\n\n const d = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n data.activeOption = Math.abs(activeOption + d + length) % length;\n\n requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n () => props.modelValue,\n () => updateActiveOption(),\n { immediate: true },\n);\n\nconst computedError = computed(() => {\n if (isOptionsLoading.value) {\n return undefined;\n }\n\n if (searchOptionsRef.error) {\n return getErrorMessage(searchOptionsRef.error);\n }\n\n if (modelOptionsRef.error) {\n return getErrorMessage(modelOptionsRef.error);\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (props.modelValue.length && selectedOptionsRef.value.length !== props.modelValue.length) {\n return \"The selected values are not one of the options\";\n }\n\n return undefined;\n});\n</script>\n\n<template>\n <div class=\"pl-autocomplete-multi__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-autocomplete-multi\"\n :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete-multi__container\">\n <div class=\"pl-autocomplete-multi__field\">\n <input\n ref=\"inputRef\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"placeholderRef\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"data.open = true\"\n />\n <div v-if=\"!data.open\" class=\"chips-container\">\n <PlChip\n v-for=\"(opt, i) in selectedOptionsRef\"\n :key=\"i\"\n closeable\n small\n @click.stop=\"data.open = true\"\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label \|\| opt.value }}\n </PlChip>\n </div>\n\n <div class=\"pl-autocomplete-multi__controls\">\n <PlMaskIcon24 v-if=\"isOptionsLoading\" name=\"loading\" />\n <slot name=\"append\" />\n <div class=\"pl-autocomplete-multi__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <div class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\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\n v-if=\"data.open\"\n ref=\"overlay\"\n :root=\"rootRef\"\n class=\"pl-autocomplete-multi__options\"\n :gap=\"5\"\n tabindex=\"-1\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete-multi__open-chips-container\">\n <PlChip\n v-for=\"(opt, i) in selectedOptionsRef\"\n :key=\"i\"\n closeable\n small\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label \|\| opt.value }}\n </PlChip>\n </div>\n <DropdownListItem\n v-for=\"(item, index) in filteredOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :text-item=\"'text'\"\n :is-selected=\"item.selected\"\n :is-hovered=\"data.activeOption == index\"\n size=\"medium\"\n use-checkbox\n @click.stop=\"selectOption(item.value)\"\n />\n <div v-if=\"!filteredOptionsRef.length && !isOptionsLoading\" class=\"nothing-found\">\n {{ emptyOptionsText }}\n </div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-autocomplete-multi__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-autocomplete-multi__error\">{{ computedError }}</div>\n <div v-else-if=\"helper\" class=\"pl-autocomplete-multi__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/PlAutocompleteMulti/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./PlAutocompleteMulti.js";

package/dist/components/PlAutocompleteMulti/pl-autocomplete-multi.css CHANGED Viewed

	@@ -1 +1 @@
1	- .pl-autocomplete-multi{--contour-color:var(--txt-01);--contour-border-width:1px;--options-bg:#fff;--option-hover-bg:var(--btn-sec-hover-grey);--label-offset-left-x:8px;--label-offset-right-x:8px;--label-color:var(--txt-01);min-height:var(--control-height);font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);border-radius:6px;outline:none;position:relative}[data-theme=dark] .pl-autocomplete-multi{--options-bg:#1b1b1f}.pl-autocomplete-multi__envelope{font-family:var(--control-font-family);min-width:160px}.pl-autocomplete-multi label{top:-8px;left:var(--label-offset-left-x);white-space:pre;text-overflow:ellipsis;max-width:calc(100% - 16px);cursor:inherit;color:var(--label-color);background:var(--bg-elevated-01);border-bottom-right-radius:4px;border-bottom-left-radius:4px;align-items:center;gap:4px;padding:0 4px;font-size:12px;font-weight:500;display:flex;position:absolute;overflow:hidden}.pl-autocomplete-multi label>span{white-space:pre;text-overflow:ellipsis;overflow:hidden}.pl-autocomplete-multi__container{min-height:var(--control-height);color:var(--txt-01);border-radius:6px;padding:1px;position:absolute;top:0;left:0;right:0}.pl-autocomplete-multi__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-autocomplete-multi__options{z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);--thumb-color:var(--ic-02);border-radius:6px;max-height:244px;position:absolute;overflow-y:auto;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14}.pl-autocomplete-multi__options::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-autocomplete-multi__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-autocomplete-multi__options::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-autocomplete-multi__options .nothing-found{height:var(--control-height);opacity:.5;background-color:#fff;padding:0 10px;font-style:italic;line-height:20px}.pl-autocomplete-multi__field{min-height:var(--control-height);cursor:pointer;background:0 0;border-radius:6px;flex-direction:row;align-items:center;padding-left:11px;line-height:20px;display:flex;position:relative;overflow:hidden}.pl-autocomplete-multi__field .chips-container{color:var(--contour-color);align-items:center;gap:8px;padding:0 60px 0 11px;line-height:20px;display:flex;position:absolute;inset:0 30px 0 0;overflow:hidden}.pl-autocomplete-multi__field input{min-height:calc(var(--control-height) - 2px);font-family:inherit;line-height:20px;font-size:inherit;width:calc(100% - 20px);color:var(--txt-01);caret-color:var(--border-color-focus);background-color:#0000;border:none;padding:0}.pl-autocomplete-multi__field input:focus{outline:none}.pl-autocomplete-multi__field input:placeholder-shown{text-overflow:ellipsis}.pl-autocomplete-multi__field input::placeholder{color:var(--color-placeholder)}.pl-autocomplete-multi__field:hover .clear{display:block}.pl-autocomplete-multi__controls{flex-direction:row;align-items:center;gap:6px;margin-left:auto;display:flex}.pl-autocomplete-multi__controls .mask-16,.pl-autocomplete-multi__controls .mask-24{--icon-color:var(--control-mask-fill);cursor:pointer}.pl-autocomplete-multi__controls .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-autocomplete-multi__arrow-wrapper{min-height:var(--control-height);align-items:center;padding-right:11px;display:flex}.pl-autocomplete-multi .arrow-icon{cursor:pointer}.pl-autocomplete-multi .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);width:16px;height:16px;transition:transform .2s~~;-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-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-position:50%;mask-~~position:50%;-webkit-mask-~~size:16px;mask-~~size:16px;-webkit-mask-~~repeat:no-repeat~~;mask-repeat:no-repeat~~}.pl-autocomplete-multi__helper{color:var(--txt-03);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-autocomplete-multi__error{color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-autocomplete-multi.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-autocomplete-multi .clear{z-index:1;cursor:pointer;background: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%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") 50% no-repeat;width:16px;height:16px;display:none;position:absolute;top:50%;right:36px;transform:translateY(-50%)}.pl-autocomplete-multi.open,.pl-autocomplete-multi:focus-within{z-index:1}.pl-autocomplete-multi.open .pl-autocomplete-multi__container .label,.pl-autocomplete-multi:focus-within .pl-autocomplete-multi__container .label{color:var(--txt-focus)}.pl-autocomplete-multi.open .pl-autocomplete-multi__container{z-index:1000}.pl-autocomplete-multi.open .pl-autocomplete-multi__field{border-radius:6px 6px 0 0}.pl-autocomplete-multi.open .arrow{background-color:var(--control-mask-fill);width:16px;height:16px~~;-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='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");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='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-~~position:50%;-webkit-mask-~~size:16px;mask-~~size:16px;-webkit-mask-~~repeat:no-repeat~~;mask-repeat:no-repeat~~}.pl-autocomplete-multi:hover{--contour-color:var(--control-hover-color)}.pl-autocomplete-multi: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-autocomplete-multi:focus-within.error{--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--color-error-shadow)}.pl-autocomplete-multi.error{--contour-color:var(--txt-error);--label-color:var(--txt-error)}.pl-autocomplete-multi.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}.pl-autocomplete-multi.disabled .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-autocomplete-multi__open-chips-container{padding:12px}.pl-autocomplete-multi__open-chips-container .pl-chip{margin-bottom:4px;margin-right:4px}
1	+ .pl-autocomplete-multi{--contour-color:var(--txt-01);--contour-border-width:1px;--options-bg:#fff;--option-hover-bg:var(--btn-sec-hover-grey);--label-offset-left-x:8px;--label-offset-right-x:8px;--label-color:var(--txt-01);min-height:var(--control-height);font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);border-radius:6px;outline:none;position:relative}[data-theme=dark] .pl-autocomplete-multi{--options-bg:#1b1b1f}.pl-autocomplete-multi__envelope{font-family:var(--control-font-family);min-width:160px}.pl-autocomplete-multi label{top:-8px;left:var(--label-offset-left-x);white-space:pre;text-overflow:ellipsis;max-width:calc(100% - 16px);cursor:inherit;color:var(--label-color);background:var(--bg-elevated-01);border-bottom-right-radius:4px;border-bottom-left-radius:4px;align-items:center;gap:4px;padding:0 4px;font-size:12px;font-weight:500;display:flex;position:absolute;overflow:hidden}.pl-autocomplete-multi label>span{white-space:pre;text-overflow:ellipsis;overflow:hidden}.pl-autocomplete-multi__container{min-height:var(--control-height);color:var(--txt-01);border-radius:6px;padding:1px;position:absolute;top:0;left:0;right:0}.pl-autocomplete-multi__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-autocomplete-multi__options{z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);--thumb-color:var(--ic-02);border-radius:6px;max-height:244px;position:absolute;overflow-y:auto;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14}.pl-autocomplete-multi__options::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-autocomplete-multi__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-autocomplete-multi__options::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-autocomplete-multi__options .nothing-found{height:var(--control-height);opacity:.5;background-color:#fff;padding:0 10px;font-style:italic;line-height:20px}.pl-autocomplete-multi__field{min-height:var(--control-height);cursor:pointer;background:0 0;border-radius:6px;flex-direction:row;align-items:center;padding-left:11px;line-height:20px;display:flex;position:relative;overflow:hidden}.pl-autocomplete-multi__field .chips-container{color:var(--contour-color);align-items:center;gap:8px;padding:0 60px 0 11px;line-height:20px;display:flex;position:absolute;inset:0 30px 0 0;overflow:hidden}.pl-autocomplete-multi__field input{min-height:calc(var(--control-height) - 2px);font-family:inherit;line-height:20px;font-size:inherit;width:calc(100% - 20px);color:var(--txt-01);caret-color:var(--border-color-focus);background-color:#0000;border:none;padding:0}.pl-autocomplete-multi__field input:focus{outline:none}.pl-autocomplete-multi__field input:placeholder-shown{text-overflow:ellipsis}.pl-autocomplete-multi__field input::placeholder{color:var(--color-placeholder)}.pl-autocomplete-multi__field:hover .clear{display:block}.pl-autocomplete-multi__controls{flex-direction:row;align-items:center;gap:6px;margin-left:auto;display:flex}.pl-autocomplete-multi__controls .mask-16,.pl-autocomplete-multi__controls .mask-24{--icon-color:var(--control-mask-fill);cursor:pointer}.pl-autocomplete-multi__controls .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-autocomplete-multi__arrow-wrapper{min-height:var(--control-height);align-items:center;padding-right:11px;display:flex}.pl-autocomplete-multi .arrow-icon{cursor:pointer}.pl-autocomplete-multi .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);width:16px;height:16px;transition:transform .2s;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-position:50%;mask-size:16px;mask-repeat:no-repeat}.pl-autocomplete-multi__helper{color:var(--txt-03);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-autocomplete-multi__error{color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-autocomplete-multi.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-autocomplete-multi .clear{z-index:1;cursor:pointer;background: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%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") 50% no-repeat;width:16px;height:16px;display:none;position:absolute;top:50%;right:36px;transform:translateY(-50%)}.pl-autocomplete-multi.open,.pl-autocomplete-multi:focus-within{z-index:1}.pl-autocomplete-multi.open .pl-autocomplete-multi__container .label,.pl-autocomplete-multi:focus-within .pl-autocomplete-multi__container .label{color:var(--txt-focus)}.pl-autocomplete-multi.open .pl-autocomplete-multi__container{z-index:1000}.pl-autocomplete-multi.open .pl-autocomplete-multi__field{border-radius:6px 6px 0 0}.pl-autocomplete-multi.open .arrow{background-color:var(--control-mask-fill);width:16px;height:16px;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='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-position:50%;mask-size:16px;mask-repeat:no-repeat}.pl-autocomplete-multi:hover{--contour-color:var(--control-hover-color)}.pl-autocomplete-multi: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-autocomplete-multi:focus-within.error{--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--color-error-shadow)}.pl-autocomplete-multi.error{--contour-color:var(--txt-error);--label-color:var(--txt-error)}.pl-autocomplete-multi.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}.pl-autocomplete-multi.disabled .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-autocomplete-multi__open-chips-container{padding:12px}.pl-autocomplete-multi__open-chips-container .pl-chip{margin-bottom:4px;margin-right:4px}

package/dist/components/PlBtnAccent/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./PlBtnAccent.js";

package/dist/components/PlBtnAccent/pl-btn-accent.css CHANGED Viewed

	@@ -1 +1 @@
1	- .pl-btn-accent{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius)~~;-webkit-user-select:none~~;user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-accent.justifyCenter{justify-content:center}.pl-btn-accent.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-accent.small{--button-height:32px;--main-padding:0 8px}.pl-btn-accent.medium{--main-padding:0 16px}.pl-btn-accent.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-accent.large .mask{--mask-size:24px}.pl-btn-accent:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-accent:disabled *{color:var(--color-text)}.pl-btn-accent:not([disabled]){cursor:pointer}.pl-btn-accent:not([disabled]).hover,.pl-btn-accent:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-accent:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-accent .icon{width:16px;height:16px;display:block}.pl-btn-accent.loading{box-shadow:none!important}.pl-btn-accent.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-accent.reverse{flex-direction:row-reverse}.pl-btn-accent>span{display:inline-flex}.pl-btn-accent{--color-btn-background:var(--color-accent-default);--color-btn-hover:var(--color-accent-hover);background-color:var(--color-btn-background);border:none}.pl-btn-accent.large{--drop-shadow:3px 3px 0px #000}.pl-btn-accent.loading{background:#070529cc}.pl-btn-accent:disabled{background-color:var(--btn-disabled-bg);cursor:auto;box-shadow:none!important}.pl-btn-accent:active{--active-shadow:inset 0px 3px 0px #0000003d;--drop-shadow:0 0 0 0 transparent}
1	+ .pl-btn-accent{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-accent.justifyCenter{justify-content:center}.pl-btn-accent.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-accent.small{--button-height:32px;--main-padding:0 8px}.pl-btn-accent.medium{--main-padding:0 16px}.pl-btn-accent.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-accent.large .mask{--mask-size:24px}.pl-btn-accent:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-accent:disabled *{color:var(--color-text)}.pl-btn-accent:not([disabled]){cursor:pointer}.pl-btn-accent:not([disabled]).hover,.pl-btn-accent:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-accent:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-accent .icon{width:16px;height:16px;display:block}.pl-btn-accent.loading{box-shadow:none!important}.pl-btn-accent.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-accent.reverse{flex-direction:row-reverse}.pl-btn-accent>span{display:inline-flex}.pl-btn-accent{--color-btn-background:var(--color-accent-default);--color-btn-hover:var(--color-accent-hover);background-color:var(--color-btn-background);border:none}.pl-btn-accent.large{--drop-shadow:3px 3px 0px #000}.pl-btn-accent.loading{background:#070529cc}.pl-btn-accent:disabled{background-color:var(--btn-disabled-bg);cursor:auto;box-shadow:none!important}.pl-btn-accent:active{--active-shadow:inset 0px 3px 0px #0000003d;--drop-shadow:0 0 0 0 transparent}

package/dist/components/PlBtnDanger/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./PlBtnDanger.js";

package/dist/components/PlBtnDanger/pl-btn-danger.css CHANGED Viewed

	@@ -1 +1 @@
1	- .pl-btn-danger{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius)~~;-webkit-user-select:none~~;user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-danger.justifyCenter{justify-content:center}.pl-btn-danger.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-danger.small{--button-height:32px;--main-padding:0 8px}.pl-btn-danger.medium{--main-padding:0 16px}.pl-btn-danger.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-danger.large .mask{--mask-size:24px}.pl-btn-danger:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-danger:disabled *{color:var(--color-text)}.pl-btn-danger:not([disabled]){cursor:pointer}.pl-btn-danger:not([disabled]).hover,.pl-btn-danger:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-danger:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-danger .icon{width:16px;height:16px;display:block}.pl-btn-danger.loading{box-shadow:none!important}.pl-btn-danger.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-danger.reverse{flex-direction:row-reverse}.pl-btn-danger>span{display:inline-flex}.pl-btn-danger{--color-btn-background:var(--txt-error);--color-btn-hover:#ff5c5c;background-color:var(--color-btn-background);border:none}.pl-btn-danger.large{--drop-shadow:3px 3px 0px #000}.pl-btn-danger.loading{background:#070529cc}.pl-btn-danger:disabled{background-color:var(--btn-disabled-bg);cursor:auto;box-shadow:none!important}.pl-btn-danger:active{--active-shadow:inset 0px 3px 0px #0000003d;--drop-shadow:0 0 0 0 transparent}
1	+ .pl-btn-danger{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-danger.justifyCenter{justify-content:center}.pl-btn-danger.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-danger.small{--button-height:32px;--main-padding:0 8px}.pl-btn-danger.medium{--main-padding:0 16px}.pl-btn-danger.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-danger.large .mask{--mask-size:24px}.pl-btn-danger:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-danger:disabled *{color:var(--color-text)}.pl-btn-danger:not([disabled]){cursor:pointer}.pl-btn-danger:not([disabled]).hover,.pl-btn-danger:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-danger:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-danger .icon{width:16px;height:16px;display:block}.pl-btn-danger.loading{box-shadow:none!important}.pl-btn-danger.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-danger.reverse{flex-direction:row-reverse}.pl-btn-danger>span{display:inline-flex}.pl-btn-danger{--color-btn-background:var(--txt-error);--color-btn-hover:#ff5c5c;background-color:var(--color-btn-background);border:none}.pl-btn-danger.large{--drop-shadow:3px 3px 0px #000}.pl-btn-danger.loading{background:#070529cc}.pl-btn-danger:disabled{background-color:var(--btn-disabled-bg);cursor:auto;box-shadow:none!important}.pl-btn-danger:active{--active-shadow:inset 0px 3px 0px #0000003d;--drop-shadow:0 0 0 0 transparent}

package/dist/components/PlBtnGhost/PlBtnGhost.vue2.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import e from "../PlIcon24/PlIcon24.js";
+import "../PlMaskIcon24/index.js";
 import { useRipple as t } from "../../composition/useRipple.js";
 import './pl-btn-ghost.css';/* empty css             */
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, mergeProps as s, openBlock as c, ref as l, renderSlot as u, unref as d, useSlots as f } from "vue";

package/dist/components/PlBtnGhost/PlBtnGhost.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlBtnGhost.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/PlBtnGhost/PlBtnGhost.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Ghost button\n /\nexport default {\n name: \"PlBtnGhost\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-ghost.scss\";\nimport type { MaskIconName24, Size } from \"../../types\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { computed, ref, useSlots } from \"vue\";\nimport { useRipple } from \"../../composition/useRipple\";\n\nconst props = withDefaults(\n defineProps<{\n /\n If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n /\n loading?: boolean;\n /\n Size of the button, the default value is 'medium'\n /\n size?: Size;\n /\n If `true` the shape is round.\n /\n round?: boolean;\n /\n Icon to display\n /\n icon?: MaskIconName24;\n /\n If `true`, an icon is displayed before the text.\n /\n reverse?: boolean;\n /\n Justify text at the center (is `false` by default)\n */\n justifyCenter?: boolean;\n }>(),\n {\n size: undefined,\n icon: undefined,\n justifyCenter: false,\n },\n);\n\nconst small = computed(() => props.size === \"small\");\nconst large = computed(() => props.size === \"large\");\n\nconst btnRef = ref();\n\nconst slots = useSlots();\n\nuseRipple(btnRef);\n</script>\n\n<template>\n <button\n ref=\"btnRef\"\n tabindex=\"0\"\n class=\"pl-btn-ghost\"\n :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) \|\| loading }\"\n >\n <span v-if=\"slots.default && !round\">\n <slot />\n </span>\n <slot name=\"icon\">\n <PlMaskIcon24 v-if=\"loading\" name=\"loading\" :size=\"size\" />\n <PlMaskIcon24 v-else-if=\"icon\" :name=\"icon\" :size=\"size\" />\n </slot>\n <slot name=\"append\" />\n </button>\n</template>\n"],"mappings":"~~;;;;;~~CAKE,MAAM;;;;;;;;;;;;;EAWR,IAAM,IAAQ,GAkCR,IAAQ,QAAe,EAAM,SAAS,QAAQ,EAC9C,IAAQ,QAAe,EAAM,SAAS,QAAQ,EAE9C,IAAS,GAAK,EAEd,IAAQ,GAAU;SAExB,EAAU,EAAO,kBAIf,EAeS,UAfT,EAeS;YAdH;GAAJ,KAAI;GACJ,UAAS;GACT,OAAK,CAAC,gBAAc;IAAA,SACV,EAAA;IAAO,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,SAAE,EAAA;IAAO,eAAE,EAAA;KAAgBA,EAAAA,OAAO,QAAK,KAAA;IAAA,CAAA;;MAChEA,EAAAA;GAAM,UAAY,EAAQA,EAAAA,OAAO,YAAa,EAAA;GAAO,CAAA,EAAA;GAEtD,EAAA,EAAK,CAAC,WAAO,CAAK,EAAA,SAAA,GAAA,EAA9B,EAEO,QAAA,GAAA,CADL,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAEV,EAGO,EAAA,QAAA,QAAA,EAAA,QAAA,CAFe,EAAA,WAAA,GAAA,EAApB,EAA2D,EAAA,EAAA,EAAA;;IAA9B,MAAK;IAAW,MAAM,EAAA;4BAC1B,EAAA,QAAA,GAAA,EAAzB,EAA2D,EAAA,EAAA,EAAA;;IAA3B,MAAM,EAAA;IAAO,MAAM,EAAA;;GAErD,EAAsB,EAAA,QAAA,SAAA"}
1	+ {"version":3,"file":"PlBtnGhost.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/PlBtnGhost/PlBtnGhost.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Ghost button\n /\nexport default {\n name: \"PlBtnGhost\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-ghost.scss\";\nimport type { MaskIconName24, Size } from \"../../types\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { computed, ref, useSlots } from \"vue\";\nimport { useRipple } from \"../../composition/useRipple\";\n\nconst props = withDefaults(\n defineProps<{\n /\n If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n /\n loading?: boolean;\n /\n Size of the button, the default value is 'medium'\n /\n size?: Size;\n /\n If `true` the shape is round.\n /\n round?: boolean;\n /\n Icon to display\n /\n icon?: MaskIconName24;\n /\n If `true`, an icon is displayed before the text.\n /\n reverse?: boolean;\n /\n Justify text at the center (is `false` by default)\n */\n justifyCenter?: boolean;\n }>(),\n {\n size: undefined,\n icon: undefined,\n justifyCenter: false,\n },\n);\n\nconst small = computed(() => props.size === \"small\");\nconst large = computed(() => props.size === \"large\");\n\nconst btnRef = ref();\n\nconst slots = useSlots();\n\nuseRipple(btnRef);\n</script>\n\n<template>\n <button\n ref=\"btnRef\"\n tabindex=\"0\"\n class=\"pl-btn-ghost\"\n :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) \|\| loading }\"\n >\n <span v-if=\"slots.default && !round\">\n <slot />\n </span>\n <slot name=\"icon\">\n <PlMaskIcon24 v-if=\"loading\" name=\"loading\" :size=\"size\" />\n <PlMaskIcon24 v-else-if=\"icon\" :name=\"icon\" :size=\"size\" />\n </slot>\n <slot name=\"append\" />\n </button>\n</template>\n"],"mappings":";;;;;;CAKE,MAAM;;;;;;;;;;;;;EAWR,IAAM,IAAQ,GAkCR,IAAQ,QAAe,EAAM,SAAS,QAAQ,EAC9C,IAAQ,QAAe,EAAM,SAAS,QAAQ,EAE9C,IAAS,GAAK,EAEd,IAAQ,GAAU;SAExB,EAAU,EAAO,kBAIf,EAeS,UAfT,EAeS;YAdH;GAAJ,KAAI;GACJ,UAAS;GACT,OAAK,CAAC,gBAAc;IAAA,SACV,EAAA;IAAO,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,SAAE,EAAA;IAAO,eAAE,EAAA;KAAgBA,EAAAA,OAAO,QAAK,KAAA;IAAA,CAAA;;MAChEA,EAAAA;GAAM,UAAY,EAAQA,EAAAA,OAAO,YAAa,EAAA;GAAO,CAAA,EAAA;GAEtD,EAAA,EAAK,CAAC,WAAO,CAAK,EAAA,SAAA,GAAA,EAA9B,EAEO,QAAA,GAAA,CADL,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAEV,EAGO,EAAA,QAAA,QAAA,EAAA,QAAA,CAFe,EAAA,WAAA,GAAA,EAApB,EAA2D,EAAA,EAAA,EAAA;;IAA9B,MAAK;IAAW,MAAM,EAAA;4BAC1B,EAAA,QAAA,GAAA,EAAzB,EAA2D,EAAA,EAAA,EAAA;;IAA3B,MAAM,EAAA;IAAO,MAAM,EAAA;;GAErD,EAAsB,EAAA,QAAA,SAAA"}

package/dist/components/PlBtnGhost/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./PlBtnGhost.js";

package/dist/components/PlBtnGhost/pl-btn-ghost.css CHANGED Viewed

	@@ -1 +1 @@
1	- .pl-btn-ghost{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius)~~;-webkit-user-select:none~~;user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-ghost.justifyCenter{justify-content:center}.pl-btn-ghost.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-ghost.small{--button-height:32px;--main-padding:0 8px}.pl-btn-ghost.medium{--main-padding:0 16px}.pl-btn-ghost.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-ghost.large .mask{--mask-size:24px}.pl-btn-ghost:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-ghost:disabled *{color:var(--color-text)}.pl-btn-ghost:not([disabled]){cursor:pointer}.pl-btn-ghost:not([disabled]).hover,.pl-btn-ghost:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-ghost:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-ghost .icon{width:16px;height:16px;display:block}.pl-btn-ghost.loading{box-shadow:none!important}.pl-btn-ghost.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-ghost.reverse{flex-direction:row-reverse}.pl-btn-ghost>span{display:inline-flex}.pl-btn-ghost{--color-text:var(--txt-01);--color-btn-hover:var(--btn-sec-hover-grey);--btn-min-width:auto;width:fit-content;min-width:var(--btn-min-width);background:0 0;border:none;gap:10px}.pl-btn-ghost:disabled{--color-text:var(--btn-disabled-bg);--icon-color:var(--dis-01);cursor:auto;box-shadow:none!important}.pl-btn-ghost.loading{--color-text:var(--btn-disabled-bg)}
1	+ .pl-btn-ghost{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-ghost.justifyCenter{justify-content:center}.pl-btn-ghost.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-ghost.small{--button-height:32px;--main-padding:0 8px}.pl-btn-ghost.medium{--main-padding:0 16px}.pl-btn-ghost.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-ghost.large .mask{--mask-size:24px}.pl-btn-ghost:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-ghost:disabled *{color:var(--color-text)}.pl-btn-ghost:not([disabled]){cursor:pointer}.pl-btn-ghost:not([disabled]).hover,.pl-btn-ghost:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-ghost:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-ghost .icon{width:16px;height:16px;display:block}.pl-btn-ghost.loading{box-shadow:none!important}.pl-btn-ghost.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-ghost.reverse{flex-direction:row-reverse}.pl-btn-ghost>span{display:inline-flex}.pl-btn-ghost{--color-text:var(--txt-01);--color-btn-hover:var(--btn-sec-hover-grey);--btn-min-width:auto;width:fit-content;min-width:var(--btn-min-width);background:0 0;border:none;gap:10px}.pl-btn-ghost:disabled{--color-text:var(--btn-disabled-bg);--icon-color:var(--dis-01);cursor:auto;box-shadow:none!important}.pl-btn-ghost.loading{--color-text:var(--btn-disabled-bg)}