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/components/PlProgressCell/PlProgressCell.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlProgressCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlProgressCell/PlProgressCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"./pl-progress-cell.scss\";\nimport { computed } from \"vue\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport type { PlProgressCellProps } from \"./types\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\n\nconst props = withDefaults(defineProps<PlProgressCellProps>(), {\n stage: \"not_started\",\n step: \"\", // main text (left)\n progressString: \"\", // appended text on the right side (right)\n progress: undefined,\n error: undefined,\n});\n\nconst canShowWhiteBg = computed(() => props.stage !== \"not_started\");\n\nconst currentProgress = computed(() =>\n props.stage === \"done\" ? 100 : Math.min(100, props.progress \|\| 0),\n);\n\nconst canShowInfinityLoader = computed(\n () =>\n props.progress === undefined &&\n props.stage !== \"done\" &&\n props.stage !== \"not_started\" &&\n !props.error,\n);\n</script>\n\n<template>\n <div\n :class=\"{\n 'progress-cell': true,\n 'progress-cell__white-bg': canShowWhiteBg,\n error,\n 'not-started': props.stage === 'not_started',\n }\"\n >\n <div v-if=\"canShowInfinityLoader\" class=\"progress-cell__infinity-loader\">\n <div class=\"progress-cell__infinity-gradient\" />\n </div>\n <div\n v-if=\"!canShowInfinityLoader && !error\"\n class=\"progress-cell__indicator\"\n :style=\"{ width: currentProgress + '%' }\"\n />\n <div class=\"progress-cell__body\">\n <div class=\"progress-cell__stage text-s\">\n {{ error ? getErrorMessage(error) : step }}\n </div>\n <div class=\"progress-cell__percentage text-s d-flex align-center justify-end\">\n <PlMaskIcon24 v-if=\"error\" name=\"error\" />\n <template v-if=\"!error\">\n {{ progressString }}\n </template>\n </div>\n </div>\n </div>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;~~EAOA,IAAM,IAAQ,GAQR,IAAiB,QAAe,EAAM,UAAU,cAAc,EAE9D,IAAkB,QACtB,EAAM,UAAU,SAAS,MAAM,KAAK,IAAI,KAAK,EAAM,YAAY,EAAE,CAClE,EAEK,IAAwB,QAE1B,EAAM,aAAa,KAAA,KACnB,EAAM,UAAU,UAChB,EAAM,UAAU,iBAChB,CAAC,EAAM,MACV;yBAIC,EA2BM,OAAA,EA1BH,OAAK,EAAA;;8BAAkE,EAAA;UAAsB,EAAA;kBAA4B,EAAM,UAAK;;GAO1H,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,CAAA,GAAA,AAAA,EAAA,OAAA,CADJ,EAAgD,OAAA,EAA3C,OAAM,oCAAkC,EAAA,MAAA,GAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;IAGtC,EAAA,SAAqB,CAAK,EAAA,SAAA,GAAA,EADnC,EAIE,OAAA;;IAFA,OAAM;IACL,OAAK,EAAA,EAAA,OAAW,EAAA,QAAe,KAAA,CAAA;;GAElC,EAUM,OAVN,GAUM,CATJ,EAEM,OAFN,GAEM,EADD,EAAA,QAAQ,EAAA,EAAe,CAAC,EAAA,MAAK,GAAI,EAAA,KAAI,EAAA,EAAA,EAE1C,EAKM,OALN,GAKM,CAJgB,EAAA,SAAA,GAAA,EAApB,EAA0C,EAAA,EAAA,EAAA;;IAAf,MAAK;oBACf,EAAA,QACE,EAAA,IAAA,GAAA,IADF,GAAA,EAAjB,EAEW,GAAA,EAAA,KAAA,GAAA,EAAA,CAAA,EAAA,EADN,EAAA,eAAc,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"PlProgressCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlProgressCell/PlProgressCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"./pl-progress-cell.scss\";\nimport { computed } from \"vue\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport type { PlProgressCellProps } from \"./types\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\n\nconst props = withDefaults(defineProps<PlProgressCellProps>(), {\n stage: \"not_started\",\n step: \"\", // main text (left)\n progressString: \"\", // appended text on the right side (right)\n progress: undefined,\n error: undefined,\n});\n\nconst canShowWhiteBg = computed(() => props.stage !== \"not_started\");\n\nconst currentProgress = computed(() =>\n props.stage === \"done\" ? 100 : Math.min(100, props.progress \|\| 0),\n);\n\nconst canShowInfinityLoader = computed(\n () =>\n props.progress === undefined &&\n props.stage !== \"done\" &&\n props.stage !== \"not_started\" &&\n !props.error,\n);\n</script>\n\n<template>\n <div\n :class=\"{\n 'progress-cell': true,\n 'progress-cell__white-bg': canShowWhiteBg,\n error,\n 'not-started': props.stage === 'not_started',\n }\"\n >\n <div v-if=\"canShowInfinityLoader\" class=\"progress-cell__infinity-loader\">\n <div class=\"progress-cell__infinity-gradient\" />\n </div>\n <div\n v-if=\"!canShowInfinityLoader && !error\"\n class=\"progress-cell__indicator\"\n :style=\"{ width: currentProgress + '%' }\"\n />\n <div class=\"progress-cell__body\">\n <div class=\"progress-cell__stage text-s\">\n {{ error ? getErrorMessage(error) : step }}\n </div>\n <div class=\"progress-cell__percentage text-s d-flex align-center justify-end\">\n <PlMaskIcon24 v-if=\"error\" name=\"error\" />\n <template v-if=\"!error\">\n {{ progressString }}\n </template>\n </div>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAOA,IAAM,IAAQ,GAQR,IAAiB,QAAe,EAAM,UAAU,cAAc,EAE9D,IAAkB,QACtB,EAAM,UAAU,SAAS,MAAM,KAAK,IAAI,KAAK,EAAM,YAAY,EAAE,CAClE,EAEK,IAAwB,QAE1B,EAAM,aAAa,KAAA,KACnB,EAAM,UAAU,UAChB,EAAM,UAAU,iBAChB,CAAC,EAAM,MACV;yBAIC,EA2BM,OAAA,EA1BH,OAAK,EAAA;;8BAAkE,EAAA;UAAsB,EAAA;kBAA4B,EAAM,UAAK;;GAO1H,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,CAAA,GAAA,AAAA,EAAA,OAAA,CADJ,EAAgD,OAAA,EAA3C,OAAM,oCAAkC,EAAA,MAAA,GAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;IAGtC,EAAA,SAAqB,CAAK,EAAA,SAAA,GAAA,EADnC,EAIE,OAAA;;IAFA,OAAM;IACL,OAAK,EAAA,EAAA,OAAW,EAAA,QAAe,KAAA,CAAA;;GAElC,EAUM,OAVN,GAUM,CATJ,EAEM,OAFN,GAEM,EADD,EAAA,QAAQ,EAAA,EAAe,CAAC,EAAA,MAAK,GAAI,EAAA,KAAI,EAAA,EAAA,EAE1C,EAKM,OALN,GAKM,CAJgB,EAAA,SAAA,GAAA,EAApB,EAA0C,EAAA,EAAA,EAAA;;IAAf,MAAK;oBACf,EAAA,QACE,EAAA,IAAA,GAAA,IADF,GAAA,EAAjB,EAEW,GAAA,EAAA,KAAA,GAAA,EAAA,CAAA,EAAA,EADN,EAAA,eAAc,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA"}

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

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

package/dist/components/PlRadio/PlRadio.vue.css CHANGED Viewed

	@@ -1 +1 @@
1	- ._container_u39pc_2{color:var(--txt-01)~~;-webkit-user-select:none~~;user-select:none;border-radius:6px;align-items:center;gap:4px;padding:4px;transition:all .2s ease-in-out;display:flex~~}._container_u39pc_2:~~hover:not(:has(:disabled)){background:var(--btn-sec-hover-grey)}~~._container_u39pc_2:~~has(:disabled){color:var(--dis-01)}._input_u39pc_19{appearance:none;aspect-ratio:1;block-size:24px;color:inherit;border-radius:50%;outline:2px solid #0000;margin:0;transition:inherit;position:relative~~}._input_u39pc_19:~~focus{outline-color:var(--border-color-focus)}~~._input_u39pc_19:~~before{content:"";border:2px solid;border-radius:50%;position:absolute;inset:2px}~~._input_u39pc_19:~~after{content:"";background-color:currentColor;border-radius:50%;transition:inherit;position:absolute;inset:7.5px;scale:0}~~._input_u39pc_19:~~checked:after{scale:1}._label_u39pc_53{text-box:trim-both cap alphabetic;padding-inline:4px;font-weight:500;line-height:1.42857}
1	+ ._container_u39pc_2{color:var(--txt-01);user-select:none;border-radius:6px;align-items:center;gap:4px;padding:4px;transition:all .2s ease-in-out;display:flex;&:hover:not(:has(:disabled)){background:var(--btn-sec-hover-grey)}&:has(:disabled){color:var(--dis-01)}}._input_u39pc_19{appearance:none;aspect-ratio:1;block-size:24px;color:inherit;border-radius:50%;outline:2px solid #0000;margin:0;transition:inherit;position:relative;&:focus{outline-color:var(--border-color-focus)}&:before{content:"";border:2px solid;border-radius:50%;position:absolute;inset:2px}&:after{content:"";background-color:currentColor;border-radius:50%;transition:inherit;position:absolute;inset:7.5px;scale:0}&:checked:after{scale:1}}._label_u39pc_53{text-box:trim-both cap alphabetic;padding-inline:4px;font-weight:500;line-height:1.42857}

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

	@@ -0,0 +1,2 @@
1	+ import "./PlRadio.js";
2	+ import "./PlRadioGroup.js";

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

@@ -1,6 +1,8 @@
 import e from "../PlTooltip/PlTooltip.js";
 import t from "../PlIcon24/PlIcon24.js";
+import "../PlIcon24/index.js";
 import n from "../PlIcon16/PlIcon16.js";
+import "../PlIcon16/index.js";
 import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, openBlock as p, renderSlot as m, toDisplayString as h, unref as g, useModel as _, useSlots as v, vModelText as y, withCtx as b, withDirectives as x, withModifiers as S } from "vue";
 var C = ["disabled", "placeholder"], w = /* @__PURE__ */ u({
 	__name: "PlSearchField",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlSearchField.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed } from \"vue\";\nimport PlTooltip from \"../PlTooltip/PlTooltip.vue\";\n\nconst model = defineModel<string>({ required: true });\n\nconst props = defineProps<{\n modelValue?: string;\n clearable?: boolean;\n placeholder?: string;\n disabled?: boolean;\n helper?: string;\n}>();\nconst slots = defineSlots<{\n helper: () => unknown;\n}>();\n\nconst nonEmpty = computed(() => model.value != null && model.value.length > 0);\nconst hasHelper = computed(() => props.helper != null \|\| slots.helper != null);\n\nconst clear = () => (model.value = \"\");\n</script>\n\n<template>\n <div ref=\"root\" :class=\"$style.component\">\n <PlIcon24 name=\"search\" />\n <input\n ref=\"input\"\n v-model=\"model\"\n :disabled=\"props.disabled\"\n :placeholder=\"props.placeholder \|\| 'Find...'\"\n type=\"text\"\n spellcheck=\"false\"\n />\n <PlIcon16\n v-if=\"props.clearable && nonEmpty\"\n :class=\"$style.clear\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n\n <PlTooltip v-if=\"hasHelper\" class=\"info\" position=\"bottom\">\n <template #tooltip>\n <slot name=\"helper\">\n {{ props.helper }}\n </slot>\n </template>\n </PlTooltip>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n --pl-search-field-border-bottom-color: var(--txt-01);\n --pl-search-field-bg: transparent;\n --pl-search-field-caret-color: auto;\n --pl-search-field-clear-display: none;\n\n position: relative;\n display: flex;\n align-items: center;\n min-height: calc(var(--control-height) - 2px);\n line-height: calc(var(--control-height) - 2px);\n background-color: var(--pl-search-field-bg);\n padding: 0 0 0 0;\n border-bottom: 1px solid var(--pl-search-field-border-bottom-color);\n\n input {\n margin-left: 8px;\n width: 100%;\n height: 20px;\n border: none;\n outline: none;\n background-color: transparent;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n caret-color: var(--pl-search-field-caret-color);\n }\n\n &:focus-within {\n --pl-search-field-border-bottom-color: var(--txt-focus);\n --pl-search-field-caret-color: var(--border-color-focus);\n --pl-search-field-clear-display: block;\n }\n\n &:hover {\n --pl-search-field-clear-display: block;\n }\n\n .clear {\n --icon-color: var(--ic-02);\n cursor: pointer;\n margin-left: auto;\n display: var(--pl-search-field-clear-display);\n }\n}\n</style>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;~~EAMA,IAAM,IAAQ,EAAmB,GAAA,aAAoB,EAE/C,IAAQ,GAOR,IAAQ,GAEV,EAEE,IAAW,QAAe,EAAM,SAAS,QAAQ,EAAM,MAAM,SAAS,EAAE,EACxE,IAAY,QAAe,EAAM,UAAU,QAAQ,EAAM,UAAU,KAAK,EAExE,UAAe,EAAM,QAAQ;yBAIjC,EAwBM,OAAA;GAxBD,KAAI;GAAQ,OAAK,EAAEA,EAAAA,OAAO,UAAS;;GACtC,EAA0B,EAAA,EAAA,EAAA,EAAhB,MAAK,UAAQ,CAAA;KACvB,EAOE,SAAA;IANA,KAAI;6CACU,QAAA;IACb,UAAU,EAAM;IAChB,aAAa,EAAM,eAAW;IAC/B,MAAK;IACL,YAAW;wBAJF,EAAA,MAAK,CAAA,CAAA;GAOR,EAAM,aAAa,EAAA,SAAA,GAAA,EAD3B,EAKE,EAAA,EAAA,EAAA;;IAHC,OAAK,EAAEA,EAAAA,OAAO,MAAK;IACpB,MAAK;IACJ,SAAK,EAAO,GAAK,CAAA,OAAA,CAAA;;GAGH,EAAA,SAAA,GAAA,EAAjB,EAMY,GAAA;;IANgB,OAAM;IAAO,UAAS;;IACrC,SAAO,QAGT,CAFP,EAEO,EAAA,QAAA,UAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAM,OAAM,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"PlSearchField.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed } from \"vue\";\nimport PlTooltip from \"../PlTooltip/PlTooltip.vue\";\n\nconst model = defineModel<string>({ required: true });\n\nconst props = defineProps<{\n modelValue?: string;\n clearable?: boolean;\n placeholder?: string;\n disabled?: boolean;\n helper?: string;\n}>();\nconst slots = defineSlots<{\n helper: () => unknown;\n}>();\n\nconst nonEmpty = computed(() => model.value != null && model.value.length > 0);\nconst hasHelper = computed(() => props.helper != null \|\| slots.helper != null);\n\nconst clear = () => (model.value = \"\");\n</script>\n\n<template>\n <div ref=\"root\" :class=\"$style.component\">\n <PlIcon24 name=\"search\" />\n <input\n ref=\"input\"\n v-model=\"model\"\n :disabled=\"props.disabled\"\n :placeholder=\"props.placeholder \|\| 'Find...'\"\n type=\"text\"\n spellcheck=\"false\"\n />\n <PlIcon16\n v-if=\"props.clearable && nonEmpty\"\n :class=\"$style.clear\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n\n <PlTooltip v-if=\"hasHelper\" class=\"info\" position=\"bottom\">\n <template #tooltip>\n <slot name=\"helper\">\n {{ props.helper }}\n </slot>\n </template>\n </PlTooltip>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n --pl-search-field-border-bottom-color: var(--txt-01);\n --pl-search-field-bg: transparent;\n --pl-search-field-caret-color: auto;\n --pl-search-field-clear-display: none;\n\n position: relative;\n display: flex;\n align-items: center;\n min-height: calc(var(--control-height) - 2px);\n line-height: calc(var(--control-height) - 2px);\n background-color: var(--pl-search-field-bg);\n padding: 0 0 0 0;\n border-bottom: 1px solid var(--pl-search-field-border-bottom-color);\n\n input {\n margin-left: 8px;\n width: 100%;\n height: 20px;\n border: none;\n outline: none;\n background-color: transparent;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n caret-color: var(--pl-search-field-caret-color);\n }\n\n &:focus-within {\n --pl-search-field-border-bottom-color: var(--txt-focus);\n --pl-search-field-caret-color: var(--border-color-focus);\n --pl-search-field-clear-display: block;\n }\n\n &:hover {\n --pl-search-field-clear-display: block;\n }\n\n .clear {\n --icon-color: var(--ic-02);\n cursor: pointer;\n margin-left: auto;\n display: var(--pl-search-field-clear-display);\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,EAAmB,GAAA,aAAoB,EAE/C,IAAQ,GAOR,IAAQ,GAEV,EAEE,IAAW,QAAe,EAAM,SAAS,QAAQ,EAAM,MAAM,SAAS,EAAE,EACxE,IAAY,QAAe,EAAM,UAAU,QAAQ,EAAM,UAAU,KAAK,EAExE,UAAe,EAAM,QAAQ;yBAIjC,EAwBM,OAAA;GAxBD,KAAI;GAAQ,OAAK,EAAEA,EAAAA,OAAO,UAAS;;GACtC,EAA0B,EAAA,EAAA,EAAA,EAAhB,MAAK,UAAQ,CAAA;KACvB,EAOE,SAAA;IANA,KAAI;6CACU,QAAA;IACb,UAAU,EAAM;IAChB,aAAa,EAAM,eAAW;IAC/B,MAAK;IACL,YAAW;wBAJF,EAAA,MAAK,CAAA,CAAA;GAOR,EAAM,aAAa,EAAA,SAAA,GAAA,EAD3B,EAKE,EAAA,EAAA,EAAA;;IAHC,OAAK,EAAEA,EAAAA,OAAO,MAAK;IACpB,MAAK;IACJ,SAAK,EAAO,GAAK,CAAA,OAAA,CAAA;;GAGH,EAAA,SAAA,GAAA,EAAjB,EAMY,GAAA;;IANgB,OAAM;IAAO,UAAS;;IACrC,SAAO,QAGT,CAFP,EAEO,EAAA,QAAA,UAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAM,OAAM,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}

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

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

package/dist/components/PlSectionSeparator/PlSectionSeparator.vue.css CHANGED Viewed

	@@ -1 +1 @@
1	- .pl-section-separator{--pl-separator-padding:20px 0 4px 0;--pl-separator-txt-color:var(--txt-03);--pl-separador-divider-color:var(--border-color-div-grey);--mask-icon-bg-color:var(--ic-02);padding:var(--pl-separator-padding);flex-direction:column;display:flex}.pl-section-separator:first-child{--pl-separator-padding:4px 0 4px 0}._compact_o5ekj_16{--pl-separator-padding:0 0 4px 0}._content_o5ekj_20{color:var(--pl-separator-txt-color);letter-spacing:.52px;text-transform:uppercase~~;-webkit-user-select:none~~;user-select:none;flex:1;align-items:center;gap:4px;min-height:16px;font-size:13px;font-weight:600;line-height:14px;display:flex}._content_o5ekj_20:after{content:"";background-color:var(--pl-separador-divider-color);flex:1;height:1px;margin-left:4px}
1	+ .pl-section-separator{--pl-separator-padding:20px 0 4px 0;--pl-separator-txt-color:var(--txt-03);--pl-separador-divider-color:var(--border-color-div-grey);--mask-icon-bg-color:var(--ic-02);padding:var(--pl-separator-padding);flex-direction:column;display:flex}.pl-section-separator:first-child{--pl-separator-padding:4px 0 4px 0}._compact_o5ekj_16{--pl-separator-padding:0 0 4px 0}._content_o5ekj_20{color:var(--pl-separator-txt-color);letter-spacing:.52px;text-transform:uppercase;user-select:none;flex:1;align-items:center;gap:4px;min-height:16px;font-size:13px;font-weight:600;line-height:14px;display:flex}._content_o5ekj_20:after{content:"";background-color:var(--pl-separador-divider-color);flex:1;height:1px;margin-left:4px}

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

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

package/dist/components/PlSidebar/PlSidebarGroup.vue.css CHANGED Viewed

	@@ -1 +1 @@
1	- :root{--txt-00:#fff;--txt-01:~~var(--lightningcss-~~light~~,#110529)var(--lightningcss~~-dark,#fff);--txt-02:#231842;--txt-03:#9d9eae;--txt-mask:#cfd1db;--txt-focus:#07ad3e;--txt-error:#f1222f;--txt-link:#5f31cc;--ic-00:#fff;--ic-01:#110529;--ic-02:#cfd1db;--ic-accent:#07ad3e;--border-color-default:#110529;--border-color-hover:#231842;--border-color-focus:#49cc49;--border-color-error:#ff5c5c;--border-color-div-grey:#e1e3eb;--border-color-div-bw:#fff;--btn-accent-default:#845cff;--btn-accent-hover:#9470ff;--btn-accent-press:#6f4dd6;--btn-primary-default:#110529;--btn-primary-hover:#231842;--btn-primary-press:#080214;--btn-sec-hover-white:#ffffff80;--btn-sec-hover-grey:~~var(--lightningcss-~~light~~,#9babcc29)var(--lightningcss~~-dark,#8383a329);--btn-sec-press-grey:#9babcc3d;--btn-active-select:#63e0243d;--btn-switcher:linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);--btn-accent-positive-500:#ecfbe5;--dis-00:#fff;--dis-01:~~var(--lightningcss-~~light~~,#cfd1db)var(--lightningcss~~-dark,#3d3d42);--bg-base-dark:#110529;--bg-base-light:#f7f8fa;--bg-elevated-01:#fff;--bg-elevated-02:#e1e3eb;--bg-error:#fff5f5;--filled-V-BG:#d0f0c0;--filled-D-BG:#ffcecc;--filled-N-BG:#faf5aa;--filled-J-BG:#dedbff;--notification-neutral:linear-gradient(90deg, #d6d9ff 0%, #fff 100%);--notification-success:linear-gradient(90deg, #c9f0b6 0%, #fff 100%);--notification-warning:linear-gradient(90deg, #fee0a3 0%, #fff 100%);--notification-error:linear-gradient(90deg, #ffb8b8 0%, #fff 100%);--gradient-blue-green:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-green-lime:linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);--gradient-blue-violet:linear-gradient(180deg, #adb8ff 0%, #d6e9ff 100%);--gradient-blue-clear:linear-gradient(180deg, #85beff 0%, #cef 100%);--gradient-orange:linear-gradient(180deg, #ffb766 0%, #ffeaa3 100%);--gradient-mint:linear-gradient(180deg, #7dd1d1 0%, #c8fae9 100%);--gradient-lime:linear-gradient(180deg, #bfe062 0%, #e4ffad 100%);--gradient-rose:linear-gradient(0deg, #ffddd6 0%, #ff99c9 100%);--gradient-red:linear-gradient(0deg, #ffd5cc 0%, #ff9494 100%);--gradient-violet:linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);--TT-gradient-violet:linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);--gradient-light-lime:linear-gradient(180deg, #ebffeb 0%, transparent 100%);--shadow-l:0px 8px 16px -4px #0f244d29, 0px 12px 32px -4px #0f244d29;--main-spacing:24px;--gap-v:24px;--gap-h:12px;--border-radius:6px;--z-splash:50;--z-slide-shadow:80;--z-slide-dialog:81;--z-dialog:100;--z-dropdown-options:110;--z-tooltip:120;--z-context-menu:1001;--scrollbar-width:6px}[data-theme=dark]{--txt-00:#fff;--txt-01:#fff;--txt-02:#adaeb8;--txt-03:#60616b;--txt-mask:#3d3d42;--txt-focus:#87e087;--txt-error:#ff5c5c;--txt-link:#9470ff;--ic-00:#fff;--ic-01:#fff;--ic-02:#60616b;--ic-accent:#87e087;--border-color-default:#60616b;--border-color-hover:#adaeb8;--border-color-focus:#49cc49;--border-color-error:#ff5c5c;--border-color-div-grey:#232329;--border-color-div-bw:#000;--btn-accent-default:#5f31cc;--btn-accent-hover:#5f31cc;--btn-accent-press:#5f31cc;--btn-primary-default:#5f31cc;--btn-primary-hover:#6d3ddb;--btn-primary-press:#5328b8;--btn-sec-hover-white:#8383a329;--btn-sec-hover-grey:#8383a329;--btn-sec-press-grey:#8383a33d;--btn-active-select:#63e0243d;--btn-switcher:#5e5e70;--dis-00:#65656b;--dis-01:#3d3d42;--bg-base-dark:#0d0d0f;--bg-base-light:#0d0d0f;--bg-elevated-01:#1b1b1f;--bg-elevated-02:#2d2d33;--bg-error:#fff5f5;--filled-V-BG:#42b84266;--filled-D-BG:#e553e566;--filled-N-BG:#53526666;--filled-J-BG:#845cff66;--notification-neutral:linear-gradient(90deg, #4d4d8f 0%, #292933 100%);--notification-success:linear-gradient(90deg, #305c3e 0%, #292933 100%);--notification-warning:linear-gradient(90deg, #754f2d 0%, #292933 100%);--notification-error:linear-gradient(90deg, #8f3343 0%, #292933 100%);--gradient-blue-green:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-green-lime:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-blue-violet:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-blue-clear:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-orange:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-mint:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-lime:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-rose:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-red:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-violet:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%)}._root_sl0od_131{flex-direction:row;display:flex;position:relative}._item_sl0od_137{border-right:1px solid var(--border-color-div-grey);width:1000%;height:100%}._item_sl0od_137:last-child{border-right:none}
1	+ :root{--txt-00:#fff;--txt-01:light-dark(#110529,#fff);--txt-02:#231842;--txt-03:#9d9eae;--txt-mask:#cfd1db;--txt-focus:#07ad3e;--txt-error:#f1222f;--txt-link:#5f31cc;--ic-00:#fff;--ic-01:#110529;--ic-02:#cfd1db;--ic-accent:#07ad3e;--border-color-default:#110529;--border-color-hover:#231842;--border-color-focus:#49cc49;--border-color-error:#ff5c5c;--border-color-div-grey:#e1e3eb;--border-color-div-bw:#fff;--btn-accent-default:#845cff;--btn-accent-hover:#9470ff;--btn-accent-press:#6f4dd6;--btn-primary-default:#110529;--btn-primary-hover:#231842;--btn-primary-press:#080214;--btn-sec-hover-white:#ffffff80;--btn-sec-hover-grey:light-dark(#9babcc29,#8383a329);--btn-sec-press-grey:#9babcc3d;--btn-active-select:#63e0243d;--btn-switcher:linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);--btn-accent-positive-500:#ecfbe5;--dis-00:#fff;--dis-01:light-dark(#cfd1db,#3d3d42);--bg-base-dark:#110529;--bg-base-light:#f7f8fa;--bg-elevated-01:#fff;--bg-elevated-02:#e1e3eb;--bg-error:#fff5f5;--filled-V-BG:#d0f0c0;--filled-D-BG:#ffcecc;--filled-N-BG:#faf5aa;--filled-J-BG:#dedbff;--notification-neutral:linear-gradient(90deg, #d6d9ff 0%, #fff 100%);--notification-success:linear-gradient(90deg, #c9f0b6 0%, #fff 100%);--notification-warning:linear-gradient(90deg, #fee0a3 0%, #fff 100%);--notification-error:linear-gradient(90deg, #ffb8b8 0%, #fff 100%);--gradient-blue-green:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-green-lime:linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);--gradient-blue-violet:linear-gradient(180deg, #adb8ff 0%, #d6e9ff 100%);--gradient-blue-clear:linear-gradient(180deg, #85beff 0%, #cef 100%);--gradient-orange:linear-gradient(180deg, #ffb766 0%, #ffeaa3 100%);--gradient-mint:linear-gradient(180deg, #7dd1d1 0%, #c8fae9 100%);--gradient-lime:linear-gradient(180deg, #bfe062 0%, #e4ffad 100%);--gradient-rose:linear-gradient(0deg, #ffddd6 0%, #ff99c9 100%);--gradient-red:linear-gradient(0deg, #ffd5cc 0%, #ff9494 100%);--gradient-violet:linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);--TT-gradient-violet:linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);--gradient-light-lime:linear-gradient(180deg, #ebffeb 0%, transparent 100%);--shadow-l:0px 8px 16px -4px #0f244d29, 0px 12px 32px -4px #0f244d29;--main-spacing:24px;--gap-v:24px;--gap-h:12px;--border-radius:6px;--z-splash:50;--z-slide-shadow:80;--z-slide-dialog:81;--z-dialog:100;--z-dropdown-options:110;--z-tooltip:120;--z-context-menu:1001;--scrollbar-width:6px}[data-theme=dark]{--txt-00:#fff;--txt-01:#fff;--txt-02:#adaeb8;--txt-03:#60616b;--txt-mask:#3d3d42;--txt-focus:#87e087;--txt-error:#ff5c5c;--txt-link:#9470ff;--ic-00:#fff;--ic-01:#fff;--ic-02:#60616b;--ic-accent:#87e087;--border-color-default:#60616b;--border-color-hover:#adaeb8;--border-color-focus:#49cc49;--border-color-error:#ff5c5c;--border-color-div-grey:#232329;--border-color-div-bw:#000;--btn-accent-default:#5f31cc;--btn-accent-hover:#5f31cc;--btn-accent-press:#5f31cc;--btn-primary-default:#5f31cc;--btn-primary-hover:#6d3ddb;--btn-primary-press:#5328b8;--btn-sec-hover-white:#8383a329;--btn-sec-hover-grey:#8383a329;--btn-sec-press-grey:#8383a33d;--btn-active-select:#63e0243d;--btn-switcher:#5e5e70;--dis-00:#65656b;--dis-01:#3d3d42;--bg-base-dark:#0d0d0f;--bg-base-light:#0d0d0f;--bg-elevated-01:#1b1b1f;--bg-elevated-02:#2d2d33;--bg-error:#fff5f5;--filled-V-BG:#42b84266;--filled-D-BG:#e553e566;--filled-N-BG:#53526666;--filled-J-BG:#845cff66;--notification-neutral:linear-gradient(90deg, #4d4d8f 0%, #292933 100%);--notification-success:linear-gradient(90deg, #305c3e 0%, #292933 100%);--notification-warning:linear-gradient(90deg, #754f2d 0%, #292933 100%);--notification-error:linear-gradient(90deg, #8f3343 0%, #292933 100%);--gradient-blue-green:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-green-lime:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-blue-violet:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-blue-clear:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-orange:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-mint:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-lime:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-rose:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-red:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-violet:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%)}._root_sl0od_131{flex-direction:row;display:flex;position:relative}._item_sl0od_137{border-right:1px solid var(--border-color-div-grey);width:1000%;height:100%}._item_sl0od_137:last-child{border-right:none}

package/dist/components/PlSidebar/PlSidebarItem.vue.css CHANGED Viewed

	@@ -1 +1 @@
1	- :root{--txt-00:#fff;--txt-01:~~var(--lightningcss-~~light~~,#110529)var(--lightningcss~~-dark,#fff);--txt-02:#231842;--txt-03:#9d9eae;--txt-mask:#cfd1db;--txt-focus:#07ad3e;--txt-error:#f1222f;--txt-link:#5f31cc;--ic-00:#fff;--ic-01:#110529;--ic-02:#cfd1db;--ic-accent:#07ad3e;--border-color-default:#110529;--border-color-hover:#231842;--border-color-focus:#49cc49;--border-color-error:#ff5c5c;--border-color-div-grey:#e1e3eb;--border-color-div-bw:#fff;--btn-accent-default:#845cff;--btn-accent-hover:#9470ff;--btn-accent-press:#6f4dd6;--btn-primary-default:#110529;--btn-primary-hover:#231842;--btn-primary-press:#080214;--btn-sec-hover-white:#ffffff80;--btn-sec-hover-grey:~~var(--lightningcss-~~light~~,#9babcc29)var(--lightningcss~~-dark,#8383a329);--btn-sec-press-grey:#9babcc3d;--btn-active-select:#63e0243d;--btn-switcher:linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);--btn-accent-positive-500:#ecfbe5;--dis-00:#fff;--dis-01:~~var(--lightningcss-~~light~~,#cfd1db)var(--lightningcss~~-dark,#3d3d42);--bg-base-dark:#110529;--bg-base-light:#f7f8fa;--bg-elevated-01:#fff;--bg-elevated-02:#e1e3eb;--bg-error:#fff5f5;--filled-V-BG:#d0f0c0;--filled-D-BG:#ffcecc;--filled-N-BG:#faf5aa;--filled-J-BG:#dedbff;--notification-neutral:linear-gradient(90deg, #d6d9ff 0%, #fff 100%);--notification-success:linear-gradient(90deg, #c9f0b6 0%, #fff 100%);--notification-warning:linear-gradient(90deg, #fee0a3 0%, #fff 100%);--notification-error:linear-gradient(90deg, #ffb8b8 0%, #fff 100%);--gradient-blue-green:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-green-lime:linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);--gradient-blue-violet:linear-gradient(180deg, #adb8ff 0%, #d6e9ff 100%);--gradient-blue-clear:linear-gradient(180deg, #85beff 0%, #cef 100%);--gradient-orange:linear-gradient(180deg, #ffb766 0%, #ffeaa3 100%);--gradient-mint:linear-gradient(180deg, #7dd1d1 0%, #c8fae9 100%);--gradient-lime:linear-gradient(180deg, #bfe062 0%, #e4ffad 100%);--gradient-rose:linear-gradient(0deg, #ffddd6 0%, #ff99c9 100%);--gradient-red:linear-gradient(0deg, #ffd5cc 0%, #ff9494 100%);--gradient-violet:linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);--TT-gradient-violet:linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);--gradient-light-lime:linear-gradient(180deg, #ebffeb 0%, transparent 100%);--shadow-l:0px 8px 16px -4px #0f244d29, 0px 12px 32px -4px #0f244d29;--main-spacing:24px;--gap-v:24px;--gap-h:12px;--border-radius:6px;--z-splash:50;--z-slide-shadow:80;--z-slide-dialog:81;--z-dialog:100;--z-dropdown-options:110;--z-tooltip:120;--z-context-menu:1001;--scrollbar-width:6px}[data-theme=dark]{--txt-00:#fff;--txt-01:#fff;--txt-02:#adaeb8;--txt-03:#60616b;--txt-mask:#3d3d42;--txt-focus:#87e087;--txt-error:#ff5c5c;--txt-link:#9470ff;--ic-00:#fff;--ic-01:#fff;--ic-02:#60616b;--ic-accent:#87e087;--border-color-default:#60616b;--border-color-hover:#adaeb8;--border-color-focus:#49cc49;--border-color-error:#ff5c5c;--border-color-div-grey:#232329;--border-color-div-bw:#000;--btn-accent-default:#5f31cc;--btn-accent-hover:#5f31cc;--btn-accent-press:#5f31cc;--btn-primary-default:#5f31cc;--btn-primary-hover:#6d3ddb;--btn-primary-press:#5328b8;--btn-sec-hover-white:#8383a329;--btn-sec-hover-grey:#8383a329;--btn-sec-press-grey:#8383a33d;--btn-active-select:#63e0243d;--btn-switcher:#5e5e70;--dis-00:#65656b;--dis-01:#3d3d42;--bg-base-dark:#0d0d0f;--bg-base-light:#0d0d0f;--bg-elevated-01:#1b1b1f;--bg-elevated-02:#2d2d33;--bg-error:#fff5f5;--filled-V-BG:#42b84266;--filled-D-BG:#e553e566;--filled-N-BG:#53526666;--filled-J-BG:#845cff66;--notification-neutral:linear-gradient(90deg, #4d4d8f 0%, #292933 100%);--notification-success:linear-gradient(90deg, #305c3e 0%, #292933 100%);--notification-warning:linear-gradient(90deg, #754f2d 0%, #292933 100%);--notification-error:linear-gradient(90deg, #8f3343 0%, #292933 100%);--gradient-blue-green:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-green-lime:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-blue-violet:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-blue-clear:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-orange:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-mint:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-lime:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-rose:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-red:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-violet:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%)}._root_l9wjt_131{flex-direction:column;display:flex;position:relative}._close_l9wjt_137{cursor:pointer;padding:8px;position:absolute;top:8px;right:8px}._header_l9wjt_145{padding:24px}._body_l9wjt_149{flex-grow:1;padding:24px;overflow-y:auto}._footer_l9wjt_155{border-top:1px solid var(--border-color-div-grey);padding:24px}
1	+ :root{--txt-00:#fff;--txt-01:light-dark(#110529,#fff);--txt-02:#231842;--txt-03:#9d9eae;--txt-mask:#cfd1db;--txt-focus:#07ad3e;--txt-error:#f1222f;--txt-link:#5f31cc;--ic-00:#fff;--ic-01:#110529;--ic-02:#cfd1db;--ic-accent:#07ad3e;--border-color-default:#110529;--border-color-hover:#231842;--border-color-focus:#49cc49;--border-color-error:#ff5c5c;--border-color-div-grey:#e1e3eb;--border-color-div-bw:#fff;--btn-accent-default:#845cff;--btn-accent-hover:#9470ff;--btn-accent-press:#6f4dd6;--btn-primary-default:#110529;--btn-primary-hover:#231842;--btn-primary-press:#080214;--btn-sec-hover-white:#ffffff80;--btn-sec-hover-grey:light-dark(#9babcc29,#8383a329);--btn-sec-press-grey:#9babcc3d;--btn-active-select:#63e0243d;--btn-switcher:linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);--btn-accent-positive-500:#ecfbe5;--dis-00:#fff;--dis-01:light-dark(#cfd1db,#3d3d42);--bg-base-dark:#110529;--bg-base-light:#f7f8fa;--bg-elevated-01:#fff;--bg-elevated-02:#e1e3eb;--bg-error:#fff5f5;--filled-V-BG:#d0f0c0;--filled-D-BG:#ffcecc;--filled-N-BG:#faf5aa;--filled-J-BG:#dedbff;--notification-neutral:linear-gradient(90deg, #d6d9ff 0%, #fff 100%);--notification-success:linear-gradient(90deg, #c9f0b6 0%, #fff 100%);--notification-warning:linear-gradient(90deg, #fee0a3 0%, #fff 100%);--notification-error:linear-gradient(90deg, #ffb8b8 0%, #fff 100%);--gradient-blue-green:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-green-lime:linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);--gradient-blue-violet:linear-gradient(180deg, #adb8ff 0%, #d6e9ff 100%);--gradient-blue-clear:linear-gradient(180deg, #85beff 0%, #cef 100%);--gradient-orange:linear-gradient(180deg, #ffb766 0%, #ffeaa3 100%);--gradient-mint:linear-gradient(180deg, #7dd1d1 0%, #c8fae9 100%);--gradient-lime:linear-gradient(180deg, #bfe062 0%, #e4ffad 100%);--gradient-rose:linear-gradient(0deg, #ffddd6 0%, #ff99c9 100%);--gradient-red:linear-gradient(0deg, #ffd5cc 0%, #ff9494 100%);--gradient-violet:linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);--TT-gradient-violet:linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);--gradient-light-lime:linear-gradient(180deg, #ebffeb 0%, transparent 100%);--shadow-l:0px 8px 16px -4px #0f244d29, 0px 12px 32px -4px #0f244d29;--main-spacing:24px;--gap-v:24px;--gap-h:12px;--border-radius:6px;--z-splash:50;--z-slide-shadow:80;--z-slide-dialog:81;--z-dialog:100;--z-dropdown-options:110;--z-tooltip:120;--z-context-menu:1001;--scrollbar-width:6px}[data-theme=dark]{--txt-00:#fff;--txt-01:#fff;--txt-02:#adaeb8;--txt-03:#60616b;--txt-mask:#3d3d42;--txt-focus:#87e087;--txt-error:#ff5c5c;--txt-link:#9470ff;--ic-00:#fff;--ic-01:#fff;--ic-02:#60616b;--ic-accent:#87e087;--border-color-default:#60616b;--border-color-hover:#adaeb8;--border-color-focus:#49cc49;--border-color-error:#ff5c5c;--border-color-div-grey:#232329;--border-color-div-bw:#000;--btn-accent-default:#5f31cc;--btn-accent-hover:#5f31cc;--btn-accent-press:#5f31cc;--btn-primary-default:#5f31cc;--btn-primary-hover:#6d3ddb;--btn-primary-press:#5328b8;--btn-sec-hover-white:#8383a329;--btn-sec-hover-grey:#8383a329;--btn-sec-press-grey:#8383a33d;--btn-active-select:#63e0243d;--btn-switcher:#5e5e70;--dis-00:#65656b;--dis-01:#3d3d42;--bg-base-dark:#0d0d0f;--bg-base-light:#0d0d0f;--bg-elevated-01:#1b1b1f;--bg-elevated-02:#2d2d33;--bg-error:#fff5f5;--filled-V-BG:#42b84266;--filled-D-BG:#e553e566;--filled-N-BG:#53526666;--filled-J-BG:#845cff66;--notification-neutral:linear-gradient(90deg, #4d4d8f 0%, #292933 100%);--notification-success:linear-gradient(90deg, #305c3e 0%, #292933 100%);--notification-warning:linear-gradient(90deg, #754f2d 0%, #292933 100%);--notification-error:linear-gradient(90deg, #8f3343 0%, #292933 100%);--gradient-blue-green:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-green-lime:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-blue-violet:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-blue-clear:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-orange:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-mint:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-lime:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-rose:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-red:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);--gradient-violet:linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%)}._root_l9wjt_131{flex-direction:column;display:flex;position:relative}._close_l9wjt_137{cursor:pointer;padding:8px;position:absolute;top:8px;right:8px}._header_l9wjt_145{padding:24px}._body_l9wjt_149{flex-grow:1;padding:24px;overflow-y:auto}._footer_l9wjt_155{border-top:1px solid var(--border-color-div-grey);padding:24px}

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

	@@ -0,0 +1,2 @@
1	+ import "./PlSidebarGroup.js";
2	+ import "./PlSidebarItem.js";

package/dist/components/PlSlideModal/PlPureSlideModal.vue2.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { useClickOutside as t } from "../../composition/useClickOutside.js";
 import './pl-slide-modal.css';/* empty css               */
 import n from "../TransitionSlidePanel.js";
 import { defaultProps as r } from "./props.js";
+import "../../index.js";
 import { Teleport as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeDefaults as d, mergeProps as f, openBlock as p, ref as m, renderSlot as h, unref as g, useAttrs as _, withCtx as v, withKeys as y } from "vue";
 var b = /* @__PURE__ */ u({
 	name: "PlPureSlideModal",

package/dist/components/PlSlideModal/PlPureSlideModal.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlPureSlideModal.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlSlideModal/PlPureSlideModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: \"PlPureSlideModal\",\n inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-slide-modal.scss\";\nimport { ref, useAttrs } from \"vue\";\nimport TransitionSlidePanel from \"../TransitionSlidePanel.vue\";\nimport { useClickOutside, useEventListener } from \"../../index\";\nimport type { Props } from \"./props\";\nimport { defaultProps } from \"./props\";\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: boolean): void;\n}>();\n\nconst modal = ref();\nconst attrs = useAttrs();\nconst props = withDefaults(defineProps<Props>(), defaultProps);\n\nuseClickOutside(modal, () => {\n if (props.modelValue && props.closeOnOutsideClick) {\n emit(\"update:modelValue\", false);\n }\n});\n\nuseEventListener(document, \"keydown\", (evt: KeyboardEvent) => {\n if (evt.key === \"Escape\") {\n emit(\"update:modelValue\", false);\n }\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <TransitionSlidePanel>\n <div\n v-if=\"props.modelValue\"\n ref=\"modal\"\n class=\"pl-slide-modal\"\n :style=\"{ width: props.width }\"\n v-bind=\"attrs\"\n @keyup.esc=\"emit('update:modelValue', false)\"\n >\n <div class=\"close-dialog-btn\" @click=\"emit('update:modelValue', false)\" />\n <slot />\n </div>\n </TransitionSlidePanel>\n <div\n v-if=\"props.modelValue && props.shadow\"\n class=\"pl-slide-modal__shadow\"\n @keyup.esc=\"emit('update:modelValue', false)\"\n />\n </Teleport>\n</template>\n"],"mappings":"~~;;;;;;;~~CAEE,MAAM;CACN,cAAc;;;;;;;;;EAYhB,IAAM,IAAO,GAIP,IAAQ,GAAK,EACb,IAAQ,GAAU,EAClB,IAAQ;SAEd,EAAgB,SAAa;AAC3B,GAAI,EAAM,cAAc,EAAM,uBAC5B,EAAK,qBAAqB,GAAM;IAElC,EAEF,EAAiB,UAAU,YAAY,MAAuB;AAC5D,GAAI,EAAI,QAAQ,YACd,EAAK,qBAAqB,GAAM;IAElC,kBAIA,EAmBW,GAAA,EAnBD,IAAG,QAAM,EAAA,CACjB,EAYuB,GAAA,MAAA;oBADf,CATE,EAAM,cAAA,GAAA,EADd,EAUM,OAVN,EAUM;;aARA;IAAJ,KAAI;IACJ,OAAM;IACL,OAAK,EAAA,OAAW,EAAM,OAAK;MACpB,EAAA,EAAK,EAAA,EACZ,SAAK,AAAA,EAAA,OAAA,GAAA,MAAM,EAAI,qBAAA,GAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAEhB,EAA0E,OAAA;IAArE,OAAM;IAAoB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,qBAAA,GAAA;OAC1C,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,GAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;;MAIJ,EAAM,cAAc,EAAM,UAAA,GAAA,EADlC,EAIE,OAAA;;GAFA,OAAM;GACL,SAAK,AAAA,EAAA,OAAA,GAAA,MAAM,EAAI,qBAAA,GAAA,EAAA,CAAA,MAAA,CAAA"}
1	+ {"version":3,"file":"PlPureSlideModal.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlSlideModal/PlPureSlideModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: \"PlPureSlideModal\",\n inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-slide-modal.scss\";\nimport { ref, useAttrs } from \"vue\";\nimport TransitionSlidePanel from \"../TransitionSlidePanel.vue\";\nimport { useClickOutside, useEventListener } from \"../../index\";\nimport type { Props } from \"./props\";\nimport { defaultProps } from \"./props\";\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: boolean): void;\n}>();\n\nconst modal = ref();\nconst attrs = useAttrs();\nconst props = withDefaults(defineProps<Props>(), defaultProps);\n\nuseClickOutside(modal, () => {\n if (props.modelValue && props.closeOnOutsideClick) {\n emit(\"update:modelValue\", false);\n }\n});\n\nuseEventListener(document, \"keydown\", (evt: KeyboardEvent) => {\n if (evt.key === \"Escape\") {\n emit(\"update:modelValue\", false);\n }\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <TransitionSlidePanel>\n <div\n v-if=\"props.modelValue\"\n ref=\"modal\"\n class=\"pl-slide-modal\"\n :style=\"{ width: props.width }\"\n v-bind=\"attrs\"\n @keyup.esc=\"emit('update:modelValue', false)\"\n >\n <div class=\"close-dialog-btn\" @click=\"emit('update:modelValue', false)\" />\n <slot />\n </div>\n </TransitionSlidePanel>\n <div\n v-if=\"props.modelValue && props.shadow\"\n class=\"pl-slide-modal__shadow\"\n @keyup.esc=\"emit('update:modelValue', false)\"\n />\n </Teleport>\n</template>\n"],"mappings":";;;;;;;;CAEE,MAAM;CACN,cAAc;;;;;;;;;EAYhB,IAAM,IAAO,GAIP,IAAQ,GAAK,EACb,IAAQ,GAAU,EAClB,IAAQ;SAEd,EAAgB,SAAa;AAC3B,GAAI,EAAM,cAAc,EAAM,uBAC5B,EAAK,qBAAqB,GAAM;IAElC,EAEF,EAAiB,UAAU,YAAY,MAAuB;AAC5D,GAAI,EAAI,QAAQ,YACd,EAAK,qBAAqB,GAAM;IAElC,kBAIA,EAmBW,GAAA,EAnBD,IAAG,QAAM,EAAA,CACjB,EAYuB,GAAA,MAAA;oBADf,CATE,EAAM,cAAA,GAAA,EADd,EAUM,OAVN,EAUM;;aARA;IAAJ,KAAI;IACJ,OAAM;IACL,OAAK,EAAA,OAAW,EAAM,OAAK;MACpB,EAAA,EAAK,EAAA,EACZ,SAAK,AAAA,EAAA,OAAA,GAAA,MAAM,EAAI,qBAAA,GAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAEhB,EAA0E,OAAA;IAArE,OAAM;IAAoB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,qBAAA,GAAA;OAC1C,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,GAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;;MAIJ,EAAM,cAAc,EAAM,UAAA,GAAA,EADlC,EAIE,OAAA;;GAFA,OAAM;GACL,SAAK,AAAA,EAAA,OAAA,GAAA,MAAM,EAAI,qBAAA,GAAA,EAAA,CAAA,MAAA,CAAA"}

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

	@@ -0,0 +1,2 @@
1	+ import "./PlPureSlideModal.js";
2	+ import "./PlSlideModal.js";

package/dist/components/PlSlideModal/pl-slide-modal.css CHANGED Viewed

	@@ -1 +1 @@
1	- .pl-slide-modal{--padding-top:0;--padding-bottom:0;top:var(--title-bar-height);z-index:var(--z-slide-dialog);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);will-change:transform;border-left:1px solid var(--div-grey);background-color:#fff;flex-direction:column;width:368px;min-width:368px;max-width:100%;display:flex;position:absolute;bottom:0;right:0;box-shadow:0 8px 16px -4px #0f244d29,0 12px 32px -4px #0f244d29}.pl-slide-modal .close-dialog-btn{z-index:1;cursor:pointer;background-color:#d3d7e0;width:24px;height:24px;position:absolute;top:12px;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-slide-modal .close-dialog-btn:hover{background-color:var(--main-dark-color)}.pl-slide-modal.has-title{--padding-top:0}.pl-slide-modal.has-actions{--padding-bottom:0}.pl-slide-modal__title{font-family:var(--font-family-base);letter-spacing:-.56px;align-items:center;width:100%;padding:24px;font-size:28px;font-style:normal;font-weight:500;line-height:40px;display:flex;overflow:hidden}.pl-slide-modal__title-content{-webkit-line-clamp:2;text-overflow:ellipsis;word-break:break-word;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.pl-slide-modal__actions{align-items:center;gap:6px;min-height:88px;padding:0 24px;display:flex}.pl-slide-modal__actions button{min-width:160px}.pl-slide-modal__content{padding:16px calc(24px - var(--scrollbar-width)) 16px 24px;--thumb-color:var(--ic-02);scrollbar-gutter:stable;flex-direction:column;flex:1;gap:24px;margin:0;display:flex;overflow-y:auto}.pl-slide-modal__content::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-slide-modal__content::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-slide-modal__content::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-slide-modal__shadow{z-index:var(--z-slide-shadow);top:var(--title-bar-height);background-color:#000000a3;position:absolute;bottom:0;left:0;right:0}
1	+ .pl-slide-modal{--padding-top:0;--padding-bottom:0;top:var(--title-bar-height);z-index:var(--z-slide-dialog);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);will-change:transform;border-left:1px solid var(--div-grey);background-color:#fff;flex-direction:column;width:368px;min-width:368px;max-width:100%;display:flex;position:absolute;bottom:0;right:0;box-shadow:0 8px 16px -4px #0f244d29,0 12px 32px -4px #0f244d29}.pl-slide-modal .close-dialog-btn{z-index:1;cursor:pointer;background-color:#d3d7e0;width:24px;height:24px;position:absolute;top:12px;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-slide-modal .close-dialog-btn:hover{background-color:var(--main-dark-color)}.pl-slide-modal.has-title{--padding-top:0}.pl-slide-modal.has-actions{--padding-bottom:0}.pl-slide-modal__title{font-family:var(--font-family-base);letter-spacing:-.56px;align-items:center;width:100%;padding:24px;font-size:28px;font-style:normal;font-weight:500;line-height:40px;display:flex;overflow:hidden}.pl-slide-modal__title-content{-webkit-line-clamp:2;text-overflow:ellipsis;word-break:break-word;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.pl-slide-modal__actions{align-items:center;gap:6px;min-height:88px;padding:0 24px;display:flex}.pl-slide-modal__actions button{min-width:160px}.pl-slide-modal__content{padding:16px calc(24px - var(--scrollbar-width)) 16px 24px;--thumb-color:var(--ic-02);scrollbar-gutter:stable;flex-direction:column;flex:1;gap:24px;margin:0;display:flex;overflow-y:auto}.pl-slide-modal__content::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-slide-modal__content::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-slide-modal__content::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-slide-modal__shadow{z-index:var(--z-slide-shadow);top:var(--title-bar-height);background-color:#000000a3;position:absolute;bottom:0;left:0;right:0}

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

@@ -1,5 +1,6 @@
 import e from "./pl-splash.module.js";
 import t from "../PlLoaderCircular/PlLoaderCircular.js";
+import "../PlLoaderCircular/index.js";
 import { createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l, toDisplayString as u, unref as d } from "vue";
 var f = /* @__PURE__ */ o({
 	__name: "PlSplash",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlSplash.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlSplash/PlSplash.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport style from \"./pl-splash.module.scss\";\nimport { PlLoaderCircular } from \"../PlLoaderCircular\";\n\nwithDefaults(\n defineProps<{\n /*\n Optional string that sets text that will be shown below the PlLoaderCircular.\n /\n loadingText?: string;\n /\n If `true` the loading overlay is shown.\n /\n loading?: boolean;\n /\n @TODO\n */\n type?: \"table\" \| \"transparent\";\n }>(),\n { loadingText: undefined, loading: false, type: undefined },\n);\n</script>\n\n<template>\n <div\n :class=\"[\n style.splash,\n { [style.table]: type === 'table', [style.transparent]: type === 'transparent' },\n ]\"\n >\n <div v-if=\"loading\" :class=\"[style.overlay]\">\n <div>\n <!-- @TODO refactor PlLoaderCircular size property -->\n <PlLoaderCircular size=\"48\" />\n <div v-if=\"loadingText\" :class=\"style.text\">{{ loadingText }}</div>\n </div>\n </div>\n <slot />\n </div>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;~~yBAwBE,EAcM,OAAA,EAbH,OAAK,EAAA,CAAU,EAAA,EAAK,CAAC,QAAA;IAAiB,EAAA,EAAK,CAAC,QAAQ,EAAA,SAAI;IAAe,EAAA,EAAK,CAAC,cAAc,EAAA,SAAI;GAAA,CAAA,CAAA,EAAA,EAAA,CAKrF,EAAA,WAAA,GAAA,EAAX,EAMM,OAAA;;GANe,OAAK,EAAA,CAAG,EAAA,EAAK,CAAC,QAAO,CAAA;MACxC,EAIM,OAAA,MAAA,CAFJ,EAA8B,EAAA,EAAA,EAAA,EAAZ,MAAK,MAAI,CAAA,EAChB,EAAA,eAAA,GAAA,EAAX,EAAmE,OAAA;;GAA1C,OAAK,EAAE,EAAA,EAAK,CAAC,KAAI;OAAK,EAAA,YAAW,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAG9D,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
1	+ {"version":3,"file":"PlSplash.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlSplash/PlSplash.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport style from \"./pl-splash.module.scss\";\nimport { PlLoaderCircular } from \"../PlLoaderCircular\";\n\nwithDefaults(\n defineProps<{\n /*\n Optional string that sets text that will be shown below the PlLoaderCircular.\n /\n loadingText?: string;\n /\n If `true` the loading overlay is shown.\n /\n loading?: boolean;\n /\n @TODO\n */\n type?: \"table\" \| \"transparent\";\n }>(),\n { loadingText: undefined, loading: false, type: undefined },\n);\n</script>\n\n<template>\n <div\n :class=\"[\n style.splash,\n { [style.table]: type === 'table', [style.transparent]: type === 'transparent' },\n ]\"\n >\n <div v-if=\"loading\" :class=\"[style.overlay]\">\n <div>\n <!-- @TODO refactor PlLoaderCircular size property -->\n <PlLoaderCircular size=\"48\" />\n <div v-if=\"loadingText\" :class=\"style.text\">{{ loadingText }}</div>\n </div>\n </div>\n <slot />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;yBAwBE,EAcM,OAAA,EAbH,OAAK,EAAA,CAAU,EAAA,EAAK,CAAC,QAAA;IAAiB,EAAA,EAAK,CAAC,QAAQ,EAAA,SAAI;IAAe,EAAA,EAAK,CAAC,cAAc,EAAA,SAAI;GAAA,CAAA,CAAA,EAAA,EAAA,CAKrF,EAAA,WAAA,GAAA,EAAX,EAMM,OAAA;;GANe,OAAK,EAAA,CAAG,EAAA,EAAK,CAAC,QAAO,CAAA;MACxC,EAIM,OAAA,MAAA,CAFJ,EAA8B,EAAA,EAAA,EAAA,EAAZ,MAAK,MAAI,CAAA,EAChB,EAAA,eAAA,GAAA,EAAX,EAAmE,OAAA;;GAA1C,OAAK,EAAE,EAAA,EAAK,CAAC,KAAI;OAAK,EAAA,YAAW,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAG9D,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}

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

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

package/dist/components/PlSplash/pl-splash.css CHANGED Viewed

	@@ -1 +1 @@
1	- ._splash_itlwi_1{--pl-splash-overlay-background:#fffffff0;position:relative}._splash_itlwi_1._table_itlwi_5{--pl-splash-overlay-background:var(--bg-base-light)}._splash_itlwi_1._transparent_itlwi_8{--pl-splash-overlay-background:transparent}._splash_itlwi_1 ._overlay_itlwi_11{background:var(--pl-splash-overlay-background);z-index:var(--z-splash);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}._splash_itlwi_1 ._overlay_itlwi_11>div{flex-direction:column;gap:24px;display:flex}._splash_itlwi_1 ._overlay_itlwi_11>div ._text_itlwi_29{~~-webkit-~~user-select:none;~~user-select:none;~~color:var(--txt-mask);font-family:var(--font-family-base);letter-spacing:-.56px;margin:0;font-size:28px;font-style:normal;font-weight:500;line-height:32px}
1	+ ._splash_itlwi_1{--pl-splash-overlay-background:#fffffff0;position:relative}._splash_itlwi_1._table_itlwi_5{--pl-splash-overlay-background:var(--bg-base-light)}._splash_itlwi_1._transparent_itlwi_8{--pl-splash-overlay-background:transparent}._splash_itlwi_1 ._overlay_itlwi_11{background:var(--pl-splash-overlay-background);z-index:var(--z-splash);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}._splash_itlwi_1 ._overlay_itlwi_11>div{flex-direction:column;gap:24px;display:flex}._splash_itlwi_1 ._overlay_itlwi_11>div ._text_itlwi_29{user-select:none;color:var(--txt-mask);font-family:var(--font-family-base);letter-spacing:-.56px;margin:0;font-size:28px;font-style:normal;font-weight:500;line-height:32px}

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

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

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

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

package/dist/components/PlTabs/Tab.vue2.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import e from "../PlTooltip/PlTooltip.js";
+import "../PlTooltip/index.js";
 import { createBlock as t, createTextVNode as n, defineComponent as r, onMounted as i, openBlock as a, reactive as o, ref as s, renderSlot as c, toDisplayString as l, unref as u, withCtx as d } from "vue";
 var f = /* @__PURE__ */ r({
 	__name: "Tab",

package/dist/components/PlTabs/Tab.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTabs/Tab.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { onMounted, unref, ref, reactive } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport type { TabOption } from \"./types\";\n\nconst rootRef = ref<{ $el: HTMLElement }>();\n\ndefineProps<{\n option: TabOption;\n}>();\n\nconst data = reactive({\n isOverflown: false,\n});\n\nonMounted(() => {\n const root = unref(rootRef);\n\n if (!root) {\n return;\n }\n\n const el = root.$el.querySelector(\"span\") as HTMLElement \| null;\n\n if (!el) {\n return;\n }\n\n requestAnimationFrame(() => {\n if (el.offsetWidth < el.scrollWidth) {\n data.isOverflown = true;\n }\n });\n});\n</script>\n\n<template>\n <PlTooltip\n ref=\"rootRef\"\n element=\"div\"\n position=\"top\"\n :hide=\"!data.isOverflown\"\n :close-delay=\"300\"\n :data-is-overflown=\"data.isOverflown ? 'true' : 'false'\"\n >\n <slot />\n <template #tooltip>\n {{ option.label }}\n </template>\n </PlTooltip>\n</template>\n"],"mappings":"~~;;;;;;~~EAKA,IAAM,IAAU,GAA2B,EAMrC,IAAO,EAAS,EACpB,aAAa,IACd,CAAC;SAEF,QAAgB;GACd,IAAM,IAAO,EAAM,EAAQ;AAE3B,OAAI,CAAC,EACH;GAGF,IAAM,IAAK,EAAK,IAAI,cAAc,OAAO;AAEpC,QAIL,4BAA4B;AAC1B,IAAI,EAAG,cAAc,EAAG,gBACtB,EAAK,cAAc;KAErB;IACF,kBAIA,EAYY,EAAA,EAAA,EAAA;YAXN;GAAJ,KAAI;GACJ,SAAQ;GACR,UAAS;GACR,MAAI,CAAG,EAAK;GACZ,eAAa;GACb,qBAAmB,EAAK,cAAW,SAAA;;GAGzB,SAAO,QACE,CAAA,EAAA,EAAf,EAAA,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA;oBAFT,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"Tab.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTabs/Tab.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { onMounted, unref, ref, reactive } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport type { TabOption } from \"./types\";\n\nconst rootRef = ref<{ $el: HTMLElement }>();\n\ndefineProps<{\n option: TabOption;\n}>();\n\nconst data = reactive({\n isOverflown: false,\n});\n\nonMounted(() => {\n const root = unref(rootRef);\n\n if (!root) {\n return;\n }\n\n const el = root.$el.querySelector(\"span\") as HTMLElement \| null;\n\n if (!el) {\n return;\n }\n\n requestAnimationFrame(() => {\n if (el.offsetWidth < el.scrollWidth) {\n data.isOverflown = true;\n }\n });\n});\n</script>\n\n<template>\n <PlTooltip\n ref=\"rootRef\"\n element=\"div\"\n position=\"top\"\n :hide=\"!data.isOverflown\"\n :close-delay=\"300\"\n :data-is-overflown=\"data.isOverflown ? 'true' : 'false'\"\n >\n <slot />\n <template #tooltip>\n {{ option.label }}\n </template>\n </PlTooltip>\n</template>\n"],"mappings":";;;;;;;EAKA,IAAM,IAAU,GAA2B,EAMrC,IAAO,EAAS,EACpB,aAAa,IACd,CAAC;SAEF,QAAgB;GACd,IAAM,IAAO,EAAM,EAAQ;AAE3B,OAAI,CAAC,EACH;GAGF,IAAM,IAAK,EAAK,IAAI,cAAc,OAAO;AAEpC,QAIL,4BAA4B;AAC1B,IAAI,EAAG,cAAc,EAAG,gBACtB,EAAK,cAAc;KAErB;IACF,kBAIA,EAYY,EAAA,EAAA,EAAA;YAXN;GAAJ,KAAI;GACJ,SAAQ;GACR,UAAS;GACR,MAAI,CAAG,EAAK;GACZ,eAAa;GACb,qBAAmB,EAAK,cAAW,SAAA;;GAGzB,SAAO,QACE,CAAA,EAAA,EAAf,EAAA,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA;oBAFT,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

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

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

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

@@ -1,6 +1,8 @@
 import e from "../PlTooltip/PlTooltip.js";
+import "../PlTooltip/index.js";
 import { getErrorMessage as t } from "../../helpers/error.js";
 import n from "../PlSvg/PlSvg.js";
+import "../PlSvg/index.js";
 import r from "../../utils/DoubleContour.js";
 import { useLabelNotch as i } from "../../utils/useLabelNotch.js";
 import a from "../../assets/images/required.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlTextArea.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTextArea/PlTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Component for multi-line string data manipulation /\nexport default {\n name: \"PlTextArea\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-textarea.scss\";\nimport { computed, onMounted, ref, useSlots } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { useValidation } from \"../../utils/useValidation\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n /\n Emitted when the model value is updated.\n /\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst props = defineProps<{\n /\n The current value of the texarea.\n /\n modelValue?: string;\n /\n The label to display above the texarea.\n /\n label?: string;\n /\n If `true`, the textarea is marked as required.\n /\n required?: boolean;\n /\n An error message to display below the textarea.\n /\n error?: unknown;\n /\n A helper text to display below the textarea when there are no errors.\n /\n helper?: string;\n /\n A placeholder text to display inside the textarea when it is empty.\n /\n placeholder?: string;\n /\n If `true`, the textarea is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n If `true`, the textarea is in a read-only state and cannot be edited, but it can still be focused and text can be selected.\n /\n readonly?: boolean;\n /\n If `true`, applies a dashed border style to the textarea, likely used for stylistic purposes or to indicate a certain state.\n /\n dashed?: boolean;\n /\n The number of visible text lines for the textarea, which controls the height of the textarea.\n /\n rows?: number;\n /\n If `true`, the textarea automatically adjusts its height to fit the content as the user types.\n /\n autogrow?: boolean;\n /\n An array of validation rules that are applied to the textarea input. Each rule is a function that receives the input value and returns `true` for valid input or an error message string for invalid input.\n */\n rules?: ((v: string) => boolean \| string)[];\n}>();\n\nconst root = ref<HTMLInputElement>();\nconst input = ref<HTMLTextAreaElement>();\n\nconst value = computed({\n get() {\n return props.modelValue ?? \"\";\n },\n set(v) {\n emit(\"update:modelValue\", v);\n },\n});\n\nconst nonEmpty = computed(() => !!props.modelValue);\nconst validationData = useValidation(value, props.rules \|\| []);\n\nuseLabelNotch(root);\n\nconst displayErrors = computed(() => {\n const errors: string[] = [];\n const propsError = getErrorMessage(props.error);\n\n if (propsError) {\n errors.push(propsError);\n }\n\n errors.push(...validationData.value.errors);\n\n return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst adjustHeight = () => {\n if (!props.autogrow) {\n return;\n }\n const el = input.value;\n if (el) {\n el.style.height = \"auto\"; // it works, do not delete it\n el.style.height = `${el.scrollHeight}px`; // Set height based on scrollHeight\n }\n};\n\nonMounted(() => {\n adjustHeight();\n});\n</script>\n\n<template>\n <div class=\"ui-text-area__envelope\">\n <div ref=\"root\" class=\"ui-text-area\" :class=\"{ error: hasErrors, disabled, dashed, nonEmpty }\">\n <label v-if=\"label\" ref=\"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 <textarea\n ref=\"input\"\n v-model=\"value\"\n :readonly=\"readonly\"\n :rows=\"rows\"\n :disabled=\"disabled\"\n :placeholder=\"placeholder ?? '...'\"\n spellcheck=\"false\"\n @input=\"adjustHeight\"\n />\n <div class=\"ui-text-area__append\">\n <slot name=\"append\" />\n </div>\n <DoubleContour class=\"ui-text-area__contour\" />\n </div>\n <div v-if=\"hasErrors\" class=\"ui-text-area__error\">\n {{ displayErrors.join(\" \") }}\n </div>\n <div v-else-if=\"helper\" class=\"ui-text-area__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;~~CAGE,MAAM;;;;;;;;;;;;;;;;;EAeR,IAAM,IAAQ,GAAU,EAElB,IAAO,GAOP,IAAQ,GAmDR,IAAO,GAAuB,EAC9B,IAAQ,GAA0B,EAElC,IAAQ,EAAS;GACrB,MAAM;AACJ,WAAO,EAAM,cAAc;;GAE7B,IAAI,GAAG;AACL,MAAK,qBAAqB,EAAE;;GAE/B,CAAC,EAEI,IAAW,QAAe,CAAC,CAAC,EAAM,WAAW,EAC7C,IAAiB,EAAc,GAAO,EAAM,SAAS,EAAE,CAAC;AAE9D,IAAc,EAAK;EAEnB,IAAM,IAAgB,QAAe;GACnC,IAAM,IAAmB,EAAE,EACrB,IAAa,EAAgB,EAAM,MAAM;AAQ/C,UANI,KACF,EAAO,KAAK,EAAW,EAGzB,EAAO,KAAK,GAAG,EAAe,MAAM,OAAO,EAEpC;IACP,EAEI,IAAY,QAAe,EAAc,MAAM,SAAS,EAAE,EAE1D,UAAqB;AACzB,OAAI,CAAC,EAAM,SACT;GAEF,IAAM,IAAK,EAAM;AACjB,GAAI,MACF,EAAG,MAAM,SAAS,QAClB,EAAG,MAAM,SAAS,GAAG,EAAG,aAAa;;SAIzC,QAAgB;AACd,MAAc;IACd,kBAIA,EA8BM,OA9BN,GA8BM,CA7BJ,EAwBM,OAAA;YAxBG;GAAJ,KAAI;GAAO,OAAK,EAAA,CAAC,gBAAc;IAAA,OAAkB,EAAA;IAAS,UAAE,EAAA;IAAQ,QAAE,EAAA;IAAM,UAAE,EAAA;IAAQ,CAAA,CAAA;;GAC5E,EAAA,SAAA,GAAA,EAAb,EAQQ,SARR,GAQQ;IAPO,EAAA,YAAA,GAAA,EAAb,EAA4C,EAAA,EAAA,EAAA;;KAApB,KAAK,EAAA,EAAW;;IACxC,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;KAJoB,OAAM;KAAO,UAAS;;KACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;KAI7B,EASE,YAAA;aARI;IAAJ,KAAI;6CACU,QAAA;IACb,UAAU,EAAA;IACV,MAAM,EAAA;IACN,UAAU,EAAA;IACV,aAAa,EAAA,eAAW;IACzB,YAAW;IACV,SAAO;yBANC,EAAA,MAAK,CAAA,CAAA;GAQhB,EAEM,OAFN,GAEM,CADJ,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA;GAExB,EAA+C,GAAA,EAAhC,OAAM,yBAAuB,CAAA;SAEnC,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAc,KAAI,IAAA,CAAA,EAAA,EAAA,IAEP,EAAA,UAAA,GAAA,EAAhB,EAAuE,OAAvE,GAAuE,EAAf,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"PlTextArea.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTextArea/PlTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Component for multi-line string data manipulation /\nexport default {\n name: \"PlTextArea\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-textarea.scss\";\nimport { computed, onMounted, ref, useSlots } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { useValidation } from \"../../utils/useValidation\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n /\n Emitted when the model value is updated.\n /\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst props = defineProps<{\n /\n The current value of the texarea.\n /\n modelValue?: string;\n /\n The label to display above the texarea.\n /\n label?: string;\n /\n If `true`, the textarea is marked as required.\n /\n required?: boolean;\n /\n An error message to display below the textarea.\n /\n error?: unknown;\n /\n A helper text to display below the textarea when there are no errors.\n /\n helper?: string;\n /\n A placeholder text to display inside the textarea when it is empty.\n /\n placeholder?: string;\n /\n If `true`, the textarea is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n If `true`, the textarea is in a read-only state and cannot be edited, but it can still be focused and text can be selected.\n /\n readonly?: boolean;\n /\n If `true`, applies a dashed border style to the textarea, likely used for stylistic purposes or to indicate a certain state.\n /\n dashed?: boolean;\n /\n The number of visible text lines for the textarea, which controls the height of the textarea.\n /\n rows?: number;\n /\n If `true`, the textarea automatically adjusts its height to fit the content as the user types.\n /\n autogrow?: boolean;\n /\n An array of validation rules that are applied to the textarea input. Each rule is a function that receives the input value and returns `true` for valid input or an error message string for invalid input.\n */\n rules?: ((v: string) => boolean \| string)[];\n}>();\n\nconst root = ref<HTMLInputElement>();\nconst input = ref<HTMLTextAreaElement>();\n\nconst value = computed({\n get() {\n return props.modelValue ?? \"\";\n },\n set(v) {\n emit(\"update:modelValue\", v);\n },\n});\n\nconst nonEmpty = computed(() => !!props.modelValue);\nconst validationData = useValidation(value, props.rules \|\| []);\n\nuseLabelNotch(root);\n\nconst displayErrors = computed(() => {\n const errors: string[] = [];\n const propsError = getErrorMessage(props.error);\n\n if (propsError) {\n errors.push(propsError);\n }\n\n errors.push(...validationData.value.errors);\n\n return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst adjustHeight = () => {\n if (!props.autogrow) {\n return;\n }\n const el = input.value;\n if (el) {\n el.style.height = \"auto\"; // it works, do not delete it\n el.style.height = `${el.scrollHeight}px`; // Set height based on scrollHeight\n }\n};\n\nonMounted(() => {\n adjustHeight();\n});\n</script>\n\n<template>\n <div class=\"ui-text-area__envelope\">\n <div ref=\"root\" class=\"ui-text-area\" :class=\"{ error: hasErrors, disabled, dashed, nonEmpty }\">\n <label v-if=\"label\" ref=\"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 <textarea\n ref=\"input\"\n v-model=\"value\"\n :readonly=\"readonly\"\n :rows=\"rows\"\n :disabled=\"disabled\"\n :placeholder=\"placeholder ?? '...'\"\n spellcheck=\"false\"\n @input=\"adjustHeight\"\n />\n <div class=\"ui-text-area__append\">\n <slot name=\"append\" />\n </div>\n <DoubleContour class=\"ui-text-area__contour\" />\n </div>\n <div v-if=\"hasErrors\" class=\"ui-text-area__error\">\n {{ displayErrors.join(\" \") }}\n </div>\n <div v-else-if=\"helper\" class=\"ui-text-area__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;CAGE,MAAM;;;;;;;;;;;;;;;;;EAeR,IAAM,IAAQ,GAAU,EAElB,IAAO,GAOP,IAAQ,GAmDR,IAAO,GAAuB,EAC9B,IAAQ,GAA0B,EAElC,IAAQ,EAAS;GACrB,MAAM;AACJ,WAAO,EAAM,cAAc;;GAE7B,IAAI,GAAG;AACL,MAAK,qBAAqB,EAAE;;GAE/B,CAAC,EAEI,IAAW,QAAe,CAAC,CAAC,EAAM,WAAW,EAC7C,IAAiB,EAAc,GAAO,EAAM,SAAS,EAAE,CAAC;AAE9D,IAAc,EAAK;EAEnB,IAAM,IAAgB,QAAe;GACnC,IAAM,IAAmB,EAAE,EACrB,IAAa,EAAgB,EAAM,MAAM;AAQ/C,UANI,KACF,EAAO,KAAK,EAAW,EAGzB,EAAO,KAAK,GAAG,EAAe,MAAM,OAAO,EAEpC;IACP,EAEI,IAAY,QAAe,EAAc,MAAM,SAAS,EAAE,EAE1D,UAAqB;AACzB,OAAI,CAAC,EAAM,SACT;GAEF,IAAM,IAAK,EAAM;AACjB,GAAI,MACF,EAAG,MAAM,SAAS,QAClB,EAAG,MAAM,SAAS,GAAG,EAAG,aAAa;;SAIzC,QAAgB;AACd,MAAc;IACd,kBAIA,EA8BM,OA9BN,GA8BM,CA7BJ,EAwBM,OAAA;YAxBG;GAAJ,KAAI;GAAO,OAAK,EAAA,CAAC,gBAAc;IAAA,OAAkB,EAAA;IAAS,UAAE,EAAA;IAAQ,QAAE,EAAA;IAAM,UAAE,EAAA;IAAQ,CAAA,CAAA;;GAC5E,EAAA,SAAA,GAAA,EAAb,EAQQ,SARR,GAQQ;IAPO,EAAA,YAAA,GAAA,EAAb,EAA4C,EAAA,EAAA,EAAA;;KAApB,KAAK,EAAA,EAAW;;IACxC,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;KAJoB,OAAM;KAAO,UAAS;;KACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;KAI7B,EASE,YAAA;aARI;IAAJ,KAAI;6CACU,QAAA;IACb,UAAU,EAAA;IACV,MAAM,EAAA;IACN,UAAU,EAAA;IACV,aAAa,EAAA,eAAW;IACzB,YAAW;IACV,SAAO;yBANC,EAAA,MAAK,CAAA,CAAA;GAQhB,EAEM,OAFN,GAEM,CADJ,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA;GAExB,EAA+C,GAAA,EAAhC,OAAM,yBAAuB,CAAA;SAEnC,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAc,KAAI,IAAA,CAAA,EAAA,EAAA,IAEP,EAAA,UAAA,GAAA,EAAhB,EAAuE,OAAvE,GAAuE,EAAf,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

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

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

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

@@ -1,10 +1,14 @@
 import e from "../PlTooltip/PlTooltip.js";
+import "../PlTooltip/index.js";
 import { getErrorMessage as t } from "../../helpers/error.js";
 import n from "../PlSvg/PlSvg.js";
+import "../PlSvg/index.js";
 import r from "../PlIcon24/PlIcon24.js";
+import "../PlIcon24/index.js";
 import i from "../PlIcon16/PlIcon16.js";
 import a from "../../utils/DoubleContour.js";
 import { useLabelNotch as o } from "../../utils/useLabelNotch.js";
+import "../PlIcon16/index.js";
 import s from "../../assets/images/required.js";
 import { useValidation as c } from "../../utils/useValidation.js";
 import './pl-text-field.css';/* empty css              */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlTextField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTextField/PlTextField.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Component for one-line string data manipulation\n /\nexport default {\n name: \"PlTextField\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M, E = string, C = E\">\nimport type { Equal } from \"@milaboratories/helpers\";\nimport { computed, reactive, ref, useSlots } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { useValidation } from \"../../utils/useValidation\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-text-field.scss\";\n\nconst slots = useSlots();\n\ntype Model = Equal<M, E \| C> extends true ? M : never; // basically in === out\n\n/\n The current value of the input field.\n /\nconst model = defineModel<Model>({\n required: true,\n});\n\nconst props = defineProps<{\n /\n The label to display above the input field.\n /\n label?: string;\n /\n If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).\n * Or you can pass a callback that returns a custom \"empty\" value (null \| undefined \| string)\n /\n clearable?: boolean \| (() => C);\n /\n An optional callback to parse and/or cast the value, the return type overrides the model type.\n * The callback must throw an exception if the value is invalid\n /\n parse?: (v: string) => E;\n /\n If `true`, the input field is marked as required.\n /\n required?: boolean;\n /\n An error message to display below the input field.\n /\n error?: unknown;\n /\n A helper text to display below the input field when there are no errors.\n /\n helper?: string;\n /\n A placeholder text to display inside the input field when it is empty.\n /\n placeholder?: string;\n /\n If `true`, the input field is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n If `true`, the input field has a dashed border.\n /\n dashed?: boolean;\n /\n A prefix text to display inside the input field before the value.\n /\n prefix?: string;\n /\n An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.\n /\n rules?: ((v: string) => boolean \| string)[];\n /\n The string specifies whether the field should be a password or not, value could be \"password\" or undefined.\n /\n type?: \"password\";\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\nconst rootRef = ref<HTMLInputElement \| undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement \| undefined>();\n\nconst showPassword = ref(false);\n\nconst data = reactive({\n cached: undefined as { error: string; value: string } \| undefined,\n});\n\nconst valueRef = computed<string>({\n get() {\n if (data.cached) {\n return data.cached.value;\n }\n return model.value === undefined \|\| model.value === null ? \"\" : String(model.value);\n },\n set(value) {\n data.cached = undefined;\n\n if (props.parse) {\n try {\n model.value = props.parse(value) as Model;\n } catch (err) {\n data.cached = {\n error: err instanceof Error ? err.message : String(err),\n value,\n };\n }\n } else {\n model.value = value as Model;\n }\n },\n});\n\nconst fieldType = computed(() => {\n if (props.type && props.type === \"password\") {\n return showPassword.value ? \"text\" : props.type;\n } else {\n return \"text\";\n }\n});\n\nconst passwordIcon = computed(() => (showPassword.value ? \"view-show\" : \"view-hide\"));\n\nconst clear = () => {\n if (props.clearable) {\n data.cached = undefined;\n model.value = props.clearable === true ? (\"\" as Model) : (props.clearable() as Model);\n }\n};\n\nconst validationData = useValidation(valueRef, props.rules \|\| []);\n\nconst isEmpty = computed(() => {\n if (props.clearable) {\n return props.clearable === true ? model.value === \"\" : model.value === props.clearable();\n }\n\n return model.value === \"\";\n});\n\nconst nonEmpty = computed(() => !isEmpty.value);\n\nconst displayErrors = computed(() => {\n const errors: string[] = [];\n const propsError = getErrorMessage(props.error);\n if (propsError) {\n errors.push(propsError);\n }\n if (data.cached) {\n errors.push(data.cached.error);\n }\n if (!validationData.value.isValid) {\n errors.push(...validationData.value.errors);\n }\n return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(\n () => props.clearable && nonEmpty.value && props.type !== \"password\" && !props.disabled,\n);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\n\nconst onFocusOut = () => {\n data.cached = undefined;\n};\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nuseLabelNotch(rootRef);\n</script>\n\n<template>\n <div class=\"pl-text-field__envelope\">\n <div\n ref=\"rootRef\"\n class=\"pl-text-field\"\n :class=\"{\n error: hasErrors,\n disabled,\n dashed,\n nonEmpty,\n }\"\n >\n <label v-if=\"label\" ref=\"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 <div v-if=\"prefix\" class=\"pl-text-field__prefix\">\n {{ prefix }}\n </div>\n <input\n ref=\"inputRef\"\n v-model=\"valueRef\"\n :disabled=\"disabled\"\n :placeholder=\"placeholder \|\| '...'\"\n :type=\"fieldType\"\n spellcheck=\"false\"\n @focusout=\"onFocusOut\"\n />\n <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n <PlIcon16\n v-if=\"canShowClearable\"\n class=\"pl-text-field__clearable\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <PlIcon24\n v-if=\"type === 'password'\"\n :name=\"passwordIcon\"\n style=\"cursor: pointer\"\n @click.stop=\"togglePasswordVisibility\"\n />\n <slot name=\"append\" />\n </div>\n <DoubleContour class=\"pl-text-field__contour\" :group-position=\"groupPosition\" />\n </div>\n <div v-if=\"hasErrors\" class=\"pl-text-field__error\">\n {{ displayErrors.join(\" \") }}\n </div>\n <div v-else-if=\"helper\" class=\"pl-text-field__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"PlTextField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTextField/PlTextField.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Component for one-line string data manipulation\n /\nexport default {\n name: \"PlTextField\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M, E = string, C = E\">\nimport type { Equal } from \"@milaboratories/helpers\";\nimport { computed, reactive, ref, useSlots } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { useValidation } from \"../../utils/useValidation\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-text-field.scss\";\n\nconst slots = useSlots();\n\ntype Model = Equal<M, E \| C> extends true ? M : never; // basically in === out\n\n/\n The current value of the input field.\n /\nconst model = defineModel<Model>({\n required: true,\n});\n\nconst props = defineProps<{\n /\n The label to display above the input field.\n /\n label?: string;\n /\n If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).\n * Or you can pass a callback that returns a custom \"empty\" value (null \| undefined \| string)\n /\n clearable?: boolean \| (() => C);\n /\n An optional callback to parse and/or cast the value, the return type overrides the model type.\n * The callback must throw an exception if the value is invalid\n /\n parse?: (v: string) => E;\n /\n If `true`, the input field is marked as required.\n /\n required?: boolean;\n /\n An error message to display below the input field.\n /\n error?: unknown;\n /\n A helper text to display below the input field when there are no errors.\n /\n helper?: string;\n /\n A placeholder text to display inside the input field when it is empty.\n /\n placeholder?: string;\n /\n If `true`, the input field is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n If `true`, the input field has a dashed border.\n /\n dashed?: boolean;\n /\n A prefix text to display inside the input field before the value.\n /\n prefix?: string;\n /\n An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.\n /\n rules?: ((v: string) => boolean \| string)[];\n /\n The string specifies whether the field should be a password or not, value could be \"password\" or undefined.\n /\n type?: \"password\";\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\nconst rootRef = ref<HTMLInputElement \| undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement \| undefined>();\n\nconst showPassword = ref(false);\n\nconst data = reactive({\n cached: undefined as { error: string; value: string } \| undefined,\n});\n\nconst valueRef = computed<string>({\n get() {\n if (data.cached) {\n return data.cached.value;\n }\n return model.value === undefined \|\| model.value === null ? \"\" : String(model.value);\n },\n set(value) {\n data.cached = undefined;\n\n if (props.parse) {\n try {\n model.value = props.parse(value) as Model;\n } catch (err) {\n data.cached = {\n error: err instanceof Error ? err.message : String(err),\n value,\n };\n }\n } else {\n model.value = value as Model;\n }\n },\n});\n\nconst fieldType = computed(() => {\n if (props.type && props.type === \"password\") {\n return showPassword.value ? \"text\" : props.type;\n } else {\n return \"text\";\n }\n});\n\nconst passwordIcon = computed(() => (showPassword.value ? \"view-show\" : \"view-hide\"));\n\nconst clear = () => {\n if (props.clearable) {\n data.cached = undefined;\n model.value = props.clearable === true ? (\"\" as Model) : (props.clearable() as Model);\n }\n};\n\nconst validationData = useValidation(valueRef, props.rules \|\| []);\n\nconst isEmpty = computed(() => {\n if (props.clearable) {\n return props.clearable === true ? model.value === \"\" : model.value === props.clearable();\n }\n\n return model.value === \"\";\n});\n\nconst nonEmpty = computed(() => !isEmpty.value);\n\nconst displayErrors = computed(() => {\n const errors: string[] = [];\n const propsError = getErrorMessage(props.error);\n if (propsError) {\n errors.push(propsError);\n }\n if (data.cached) {\n errors.push(data.cached.error);\n }\n if (!validationData.value.isValid) {\n errors.push(...validationData.value.errors);\n }\n return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(\n () => props.clearable && nonEmpty.value && props.type !== \"password\" && !props.disabled,\n);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\n\nconst onFocusOut = () => {\n data.cached = undefined;\n};\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nuseLabelNotch(rootRef);\n</script>\n\n<template>\n <div class=\"pl-text-field__envelope\">\n <div\n ref=\"rootRef\"\n class=\"pl-text-field\"\n :class=\"{\n error: hasErrors,\n disabled,\n dashed,\n nonEmpty,\n }\"\n >\n <label v-if=\"label\" ref=\"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 <div v-if=\"prefix\" class=\"pl-text-field__prefix\">\n {{ prefix }}\n </div>\n <input\n ref=\"inputRef\"\n v-model=\"valueRef\"\n :disabled=\"disabled\"\n :placeholder=\"placeholder \|\| '...'\"\n :type=\"fieldType\"\n spellcheck=\"false\"\n @focusout=\"onFocusOut\"\n />\n <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n <PlIcon16\n v-if=\"canShowClearable\"\n class=\"pl-text-field__clearable\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <PlIcon24\n v-if=\"type === 'password'\"\n :name=\"passwordIcon\"\n style=\"cursor: pointer\"\n @click.stop=\"togglePasswordVisibility\"\n />\n <slot name=\"append\" />\n </div>\n <DoubleContour class=\"pl-text-field__contour\" :group-position=\"groupPosition\" />\n </div>\n <div v-if=\"hasErrors\" class=\"pl-text-field__error\">\n {{ displayErrors.join(\" \") }}\n </div>\n <div v-else-if=\"helper\" class=\"pl-text-field__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;EAkBR,IAAM,IAAQ,GAAU,EAOlB,IAAQ,EAAkB,GAAA,aAE9B,EAEI,IAAQ,GAkER,IAAU,EAAkC,KAAA,EAAU,EAEtD,IAAW,GAAmC,EAE9C,IAAe,EAAI,GAAM,EAEzB,IAAO,EAAS,EACpB,QAAQ,KAAA,GACT,CAAC,EAEI,IAAW,EAAiB;GAChC,MAAM;AAIJ,WAHI,EAAK,SACA,EAAK,OAAO,QAEd,EAAM,UAAU,KAAA,KAAa,EAAM,UAAU,OAAO,KAAK,OAAO,EAAM,MAAM;;GAErF,IAAI,GAAO;AAGT,QAFA,EAAK,SAAS,KAAA,GAEV,EAAM,MACR,KAAI;AACF,OAAM,QAAQ,EAAM,MAAM,EAAM;aACzB,GAAK;AACZ,OAAK,SAAS;MACZ,OAAO,aAAe,QAAQ,EAAI,UAAU,OAAO,EAAI;MACvD;MACD;;QAGH,GAAM,QAAQ;;GAGnB,CAAC,EAEI,IAAY,QACZ,EAAM,QAAQ,EAAM,SAAS,aACxB,EAAa,QAAQ,SAAS,EAAM,OAEpC,OAET,EAEI,IAAe,QAAgB,EAAa,QAAQ,cAAc,YAAa,EAE/E,UAAc;AAClB,GAAI,EAAM,cACR,EAAK,SAAS,KAAA,GACd,EAAM,QAAQ,EAAM,cAAc,KAAQ,KAAgB,EAAM,WAAW;KAIzE,IAAiB,EAAc,GAAU,EAAM,SAAS,EAAE,CAAC,EAE3D,IAAU,QACV,EAAM,YACD,EAAM,cAAc,KAAO,EAAM,UAAU,KAAK,EAAM,UAAU,EAAM,WAAW,GAGnF,EAAM,UAAU,GACvB,EAEI,IAAW,QAAe,CAAC,EAAQ,MAAM,EAEzC,IAAgB,QAAe;GACnC,IAAM,IAAmB,EAAE,EACrB,IAAa,EAAgB,EAAM,MAAM;AAU/C,UATI,KACF,EAAO,KAAK,EAAW,EAErB,EAAK,UACP,EAAO,KAAK,EAAK,OAAO,MAAM,EAE3B,EAAe,MAAM,WACxB,EAAO,KAAK,GAAG,EAAe,MAAM,OAAO,EAEtC;IACP,EAEI,IAAY,QAAe,EAAc,MAAM,SAAS,EAAE,EAE1D,IAAmB,QACjB,EAAM,aAAa,EAAS,SAAS,EAAM,SAAS,cAAc,CAAC,EAAM,SAChF,EAEK,UAAkC,EAAa,QAAQ,CAAC,EAAa,OAErE,UAAmB;AACvB,KAAK,SAAS,KAAA;KAGV,WAAwB,EAAS,OAAO,OAAO;SAErD,EAAc,EAAQ,kBAIpB,EAqDM,OArDN,GAqDM,CApDJ,EA+CM,OAAA;YA9CA;GAAJ,KAAI;GACJ,OAAK,EAAA,CAAC,iBAAe;WACI,EAAA;cAAmB,EAAA;YAAkB,EAAA;cAAgB,EAAA;;;GAOjE,EAAA,SAAA,GAAA,EAAb,EAQQ,SARR,GAQQ;IAPO,EAAA,YAAA,GAAA,EAAb,EAA4C,EAAA,EAAA,EAAA;;KAApB,KAAK,EAAA,EAAW;;IACxC,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;KAJoB,OAAM;KAAO,UAAS;;KACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;GAIlB,EAAA,UAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;KAEX,EAQE,SAAA;aAPI;IAAJ,KAAI;6CACa,QAAA;IAChB,UAAU,EAAA;IACV,aAAa,EAAA,eAAW;IACxB,MAAM,EAAA;IACP,YAAW;IACV,YAAU;yBALF,EAAA,MAAQ,CAAA,CAAA;GAOnB,EAcM,OAAA;IAdD,OAAM;IAAyB,SAAO;;IAEjC,EAAA,SAAA,GAAA,EADR,EAKE,EAAA,EAAA,EAAA;;KAHA,OAAM;KACN,MAAK;KACJ,SAAK,EAAO,GAAK,CAAA,OAAA,CAAA;;IAGZ,EAAA,SAAI,cAAA,GAAA,EADZ,EAKE,EAAA,EAAA,EAAA;;KAHC,MAAM,EAAA;KACP,OAAA,EAAA,QAAA,WAAuB;KACtB,SAAK,EAAO,GAAwB,CAAA,OAAA,CAAA;;IAEvC,EAAsB,EAAA,QAAA,SAAA;;GAExB,EAAgF,GAAA;IAAjE,OAAM;IAA0B,kBAAgB,EAAA;;SAEtD,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAc,KAAI,IAAA,CAAA,EAAA,EAAA,IAEP,EAAA,UAAA,GAAA,EAAhB,EAAwE,OAAxE,GAAwE,EAAf,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

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

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

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

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

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

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

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

@@ -2,6 +2,7 @@ import { useMouseCapture as e } from "../composition/useMouseCapture.js";
 import { tapIf as t } from "../helpers/functions.js";
 import { clamp as n } from "../helpers/math.js";
 import r from "./PlTooltip/PlTooltip.js";
+import "./PlTooltip/index.js";
 import { useSliderBreakpoints as i } from "../composition/useSliderBreakpoints.js";
 import { getErrorMessage as a } from "../helpers/error.js";
 import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, defineComponent as f, normalizeClass as p, normalizeStyle as m, openBlock as h, reactive as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useSlots as S, watch as C, withCtx as w } from "vue";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/Slider.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, reactive, ref, unref, useSlots, watch } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: number;\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue: 0,\n});\n\nconst range = computed(() => props.max - props.min);\n\nconst localValue = computed(() => {\n return clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max);\n});\n\nconst realtimeVal = ref(props.modelValue);\n\nconst error = computed(() => {\n const v = props.modelValue;\n\n if (!Number.isFinite(v)) {\n return \"Not a number\";\n }\n\n if (v < props.min) {\n return `Min value: ${props.min}`;\n }\n\n if (v > props.max) {\n return `Max value: ${props.max}`;\n }\n\n return getErrorMessage(props.error);\n});\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst position = computed(() => {\n return (localValue.value - props.min) / range.value;\n});\n\nconst progressStyle = computed(() => ({\n right: Math.ceil((1 - position.value) * 100) + \"%\",\n}));\n\nconst thumbStyle = computed(() => {\n const value = Math.ceil((1 - position.value) * 100);\n return {\n right: `calc(${value}%) `,\n };\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef = ref<HTMLElement>();\n\nwatch(\n () => props.modelValue,\n (val) => {\n realtimeVal.value = val;\n },\n);\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nuseMouseCapture(thumbRef, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue = (dx / rect.width) * range.value;\n\n realtimeVal.value = round(\n clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max),\n );\n\n if (ev.stop) {\n emit(\"update:modelValue\", round(localValue.value));\n data.deltaValue = 0;\n }\n });\n});\n\nfunction setModelValue(value: number) {\n emit(\"update:modelValue\", round(value));\n}\n\nfunction updateModelValue(event: Event) {\n setModelValue(+(event.target as HTMLInputElement).value);\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n setModelValue(props.modelValue + nextStep);\n}\n</script>\n\n<template>\n <div :class=\"props.disabled ? 'ui-slider__disabled' : undefined\" class=\"ui-slider__envelope\">\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" class=\"text-s\">\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 <div v-if=\"props.mode === 'text'\" class=\"ui-slider__value-static text-s\">\n {{ realtimeVal }}{{ measure }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" class=\"ui-slider__bar\">\n <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef\"\n tabindex=\"0\"\n class=\"ui-slider__thumb ui-slider__thumb-active\"\n :style=\"thumbStyle\"\n @keydown=\"handleKeyPress\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <input\n v-if=\"props.mode === 'input'\"\n :value=\"realtimeVal\"\n class=\"ui-slider__value text-s\"\n @change=\"updateModelValue($event)\"\n />\n </div>\n </div>\n <!-- <div v-if=\"props.helper\" class=\"ui-slider__helper\">\n {{ props.helper }}\n </div> -->\n <div v-if=\"error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"Slider.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/Slider.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, reactive, ref, unref, useSlots, watch } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: number;\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue: 0,\n});\n\nconst range = computed(() => props.max - props.min);\n\nconst localValue = computed(() => {\n return clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max);\n});\n\nconst realtimeVal = ref(props.modelValue);\n\nconst error = computed(() => {\n const v = props.modelValue;\n\n if (!Number.isFinite(v)) {\n return \"Not a number\";\n }\n\n if (v < props.min) {\n return `Min value: ${props.min}`;\n }\n\n if (v > props.max) {\n return `Max value: ${props.max}`;\n }\n\n return getErrorMessage(props.error);\n});\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst position = computed(() => {\n return (localValue.value - props.min) / range.value;\n});\n\nconst progressStyle = computed(() => ({\n right: Math.ceil((1 - position.value) * 100) + \"%\",\n}));\n\nconst thumbStyle = computed(() => {\n const value = Math.ceil((1 - position.value) * 100);\n return {\n right: `calc(${value}%) `,\n };\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef = ref<HTMLElement>();\n\nwatch(\n () => props.modelValue,\n (val) => {\n realtimeVal.value = val;\n },\n);\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nuseMouseCapture(thumbRef, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue = (dx / rect.width) * range.value;\n\n realtimeVal.value = round(\n clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max),\n );\n\n if (ev.stop) {\n emit(\"update:modelValue\", round(localValue.value));\n data.deltaValue = 0;\n }\n });\n});\n\nfunction setModelValue(value: number) {\n emit(\"update:modelValue\", round(value));\n}\n\nfunction updateModelValue(event: Event) {\n setModelValue(+(event.target as HTMLInputElement).value);\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n setModelValue(props.modelValue + nextStep);\n}\n</script>\n\n<template>\n <div :class=\"props.disabled ? 'ui-slider__disabled' : undefined\" class=\"ui-slider__envelope\">\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" class=\"text-s\">\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 <div v-if=\"props.mode === 'text'\" class=\"ui-slider__value-static text-s\">\n {{ realtimeVal }}{{ measure }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" class=\"ui-slider__bar\">\n <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef\"\n tabindex=\"0\"\n class=\"ui-slider__thumb ui-slider__thumb-active\"\n :style=\"thumbStyle\"\n @keydown=\"handleKeyPress\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <input\n v-if=\"props.mode === 'input'\"\n :value=\"realtimeVal\"\n class=\"ui-slider__value text-s\"\n @change=\"updateModelValue($event)\"\n />\n </div>\n </div>\n <!-- <div v-if=\"props.helper\" class=\"ui-slider__helper\">\n {{ props.helper }}\n </div> -->\n <div v-if=\"error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n"],"mappings":"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"}

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

@@ -2,6 +2,7 @@ import { useMouseCapture as e } from "../composition/useMouseCapture.js";
 import { tapIf as t } from "../helpers/functions.js";
 import { clamp as n } from "../helpers/math.js";
 import r from "./PlTooltip/PlTooltip.js";
+import "./PlTooltip/index.js";
 import { useSliderBreakpoints as i } from "../composition/useSliderBreakpoints.js";
 import { getErrorMessage as a } from "../helpers/error.js";
 import o from "./InputRange.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderRange.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/SliderRange.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, reactive, ref, unref, useSlots, watch } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport InputRange from \"./InputRange.vue\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: [number, number];\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue1: 0,\n deltaValue2: 0,\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef1 = ref<HTMLElement>();\nconst thumbRef2 = ref<HTMLElement>();\nconst inputRange = ref<[number, number]>(props.modelValue);\nconst leftDelta = ref(props.modelValue[0]);\nconst rightDelta = ref(props.modelValue[1]);\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst textModelValue = computed(() =>\n [leftDelta.value, rightDelta.value].sort((a, b) => a - b).join(\"-\"),\n);\n\nconst range = computed(() => props.max - props.min);\n\nconst localValue1 = computed(() => {\n return clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max);\n});\n\nconst localValue2 = computed(() =>\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n);\n\nconst error = computed(() => {\n const v = props.modelValue as unknown;\n\n const isValidModel = Array.isArray(v) && v.length === 2 && v.every((it) => Number.isFinite(it));\n\n if (!isValidModel) {\n return \"Expected model [number, number]\";\n }\n\n return getErrorMessage(props.error);\n});\n\nconst position1 = computed(() => {\n return (localValue1.value - props.min) / range.value;\n});\n\nconst position2 = computed(() => {\n return (localValue2.value - props.min) / range.value;\n});\n\nconst leftRight = computed(() => getLeftAndRight());\n\nconst progressStyle = computed(() => ({\n right: leftRight.value[0] + \"%\",\n left: 100 - leftRight.value[1] + \"%\",\n}));\n\nconst thumbStyle1 = computed(() => ({\n right: Math.ceil((1 - position1.value) * 100) + \"%\",\n}));\n\nconst thumbStyle2 = computed(() => ({\n right: Math.ceil((1 - position2.value) * 100) + \"%\",\n}));\n\nwatch(\n () => props.modelValue,\n (value: [number, number]) => {\n inputRange.value = value;\n leftDelta.value = +value[0];\n rightDelta.value = +value[1];\n },\n { immediate: true },\n);\n\nuseMouseCapture(thumbRef1, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue1 = (dx / rect.width) * range.value;\n\n leftDelta.value = round(\n clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max),\n );\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort(\n (a, b) => a - b,\n );\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value)]);\n data.deltaValue1 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef2, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue2 = (dx / rect.width) * range.value;\n\n rightDelta.value = round(\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n );\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort(\n (a, b) => a - b,\n );\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value)]);\n data.deltaValue2 = 0;\n }\n });\n});\n\nfunction getLeftAndRight() {\n const point1 = Math.ceil((1 - position1.value) * 100);\n const point2 = Math.ceil((1 - position2.value) * 100);\n return [point1, point2].sort((a, b) => a - b);\n}\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nfunction setModelValue(value: [number, number]) {\n emit(\"update:modelValue\", value);\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }, index: number) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n const arr: [number, number] = [...props.modelValue];\n arr[index] = clamp(arr[index] + nextStep, props.min, props.max);\n setModelValue(arr);\n}\n</script>\n\n<template>\n <!-- {{ leftDelta }} {{ rightDelta }} -->\n <div :class=\"props.disabled ? 'ui-slider__disabled' : undefined\" class=\"ui-slider__envelope\">\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" class=\"text-s\">\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 <div v-if=\"props.mode === 'text'\" class=\"ui-slider__value-static text-s\">\n {{ textModelValue }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" class=\"ui-slider__bar\">\n <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef1\"\n :style=\"thumbStyle1\"\n class=\"ui-slider__thumb\"\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 0)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef2\"\n :style=\"thumbStyle2\"\n class=\"ui-slider__thumb\"\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 1)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <InputRange\n v-if=\"props.mode === 'input'\"\n v-model=\"inputRange\"\n class=\"ui-focused-border\"\n @change=\"setModelValue\"\n />\n </div>\n </div>\n <!-- <div v-if=\"helper\" class=\"ui-slider__helper\">\n {{ helper }}\n </div> -->\n <div v-if=\"error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"SliderRange.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/SliderRange.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, reactive, ref, unref, useSlots, watch } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport InputRange from \"./InputRange.vue\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: [number, number];\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue1: 0,\n deltaValue2: 0,\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef1 = ref<HTMLElement>();\nconst thumbRef2 = ref<HTMLElement>();\nconst inputRange = ref<[number, number]>(props.modelValue);\nconst leftDelta = ref(props.modelValue[0]);\nconst rightDelta = ref(props.modelValue[1]);\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst textModelValue = computed(() =>\n [leftDelta.value, rightDelta.value].sort((a, b) => a - b).join(\"-\"),\n);\n\nconst range = computed(() => props.max - props.min);\n\nconst localValue1 = computed(() => {\n return clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max);\n});\n\nconst localValue2 = computed(() =>\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n);\n\nconst error = computed(() => {\n const v = props.modelValue as unknown;\n\n const isValidModel = Array.isArray(v) && v.length === 2 && v.every((it) => Number.isFinite(it));\n\n if (!isValidModel) {\n return \"Expected model [number, number]\";\n }\n\n return getErrorMessage(props.error);\n});\n\nconst position1 = computed(() => {\n return (localValue1.value - props.min) / range.value;\n});\n\nconst position2 = computed(() => {\n return (localValue2.value - props.min) / range.value;\n});\n\nconst leftRight = computed(() => getLeftAndRight());\n\nconst progressStyle = computed(() => ({\n right: leftRight.value[0] + \"%\",\n left: 100 - leftRight.value[1] + \"%\",\n}));\n\nconst thumbStyle1 = computed(() => ({\n right: Math.ceil((1 - position1.value) * 100) + \"%\",\n}));\n\nconst thumbStyle2 = computed(() => ({\n right: Math.ceil((1 - position2.value) * 100) + \"%\",\n}));\n\nwatch(\n () => props.modelValue,\n (value: [number, number]) => {\n inputRange.value = value;\n leftDelta.value = +value[0];\n rightDelta.value = +value[1];\n },\n { immediate: true },\n);\n\nuseMouseCapture(thumbRef1, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue1 = (dx / rect.width) * range.value;\n\n leftDelta.value = round(\n clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max),\n );\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort(\n (a, b) => a - b,\n );\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value)]);\n data.deltaValue1 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef2, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue2 = (dx / rect.width) * range.value;\n\n rightDelta.value = round(\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n );\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort(\n (a, b) => a - b,\n );\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value)]);\n data.deltaValue2 = 0;\n }\n });\n});\n\nfunction getLeftAndRight() {\n const point1 = Math.ceil((1 - position1.value) * 100);\n const point2 = Math.ceil((1 - position2.value) * 100);\n return [point1, point2].sort((a, b) => a - b);\n}\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nfunction setModelValue(value: [number, number]) {\n emit(\"update:modelValue\", value);\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }, index: number) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n const arr: [number, number] = [...props.modelValue];\n arr[index] = clamp(arr[index] + nextStep, props.min, props.max);\n setModelValue(arr);\n}\n</script>\n\n<template>\n <!-- {{ leftDelta }} {{ rightDelta }} -->\n <div :class=\"props.disabled ? 'ui-slider__disabled' : undefined\" class=\"ui-slider__envelope\">\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" class=\"text-s\">\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 <div v-if=\"props.mode === 'text'\" class=\"ui-slider__value-static text-s\">\n {{ textModelValue }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" class=\"ui-slider__bar\">\n <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef1\"\n :style=\"thumbStyle1\"\n class=\"ui-slider__thumb\"\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 0)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef2\"\n :style=\"thumbStyle2\"\n class=\"ui-slider__thumb\"\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 1)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <InputRange\n v-if=\"props.mode === 'input'\"\n v-model=\"inputRange\"\n class=\"ui-focused-border\"\n @change=\"setModelValue\"\n />\n </div>\n </div>\n <!-- <div v-if=\"helper\" class=\"ui-slider__helper\">\n {{ helper }}\n </div> -->\n <div v-if=\"error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n"],"mappings":"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"}

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

@@ -2,6 +2,7 @@ import { useMouseCapture as e } from "../composition/useMouseCapture.js";
 import { tapIf as t } from "../helpers/functions.js";
 import { clamp as n } from "../helpers/math.js";
 import r from "./PlTooltip/PlTooltip.js";
+import "./PlTooltip/index.js";
 import { useSliderBreakpoints as i } from "../composition/useSliderBreakpoints.js";
 import { getErrorMessage as ee } from "../helpers/error.js";
 import { Fragment as a, computed as o, createBlock as te, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, onMounted as ne, openBlock as p, reactive as re, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, useSlots as y, withCtx as ie } from "vue";