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

@milaboratories/uikit 2.10.39 → 2.10.41

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 (197) hide show

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";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderRangeTriple.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/SliderRangeTriple.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onMounted, reactive, ref, unref, useSlots } 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\ntype ModelType = [number, number, number];\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: ModelType;\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 deltaValue3: 0,\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef1 = ref<HTMLElement>();\nconst thumbRef2 = ref<HTMLElement>();\nconst thumbRef3 = ref<HTMLElement>();\n\nconst range = computed(() => props.max - props.min);\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst localValue1 = computed(() =>\n clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max),\n);\nconst localValue2 = computed(() =>\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n);\nconst localValue3 = computed(() =>\n clamp((props.modelValue[2] ?? 0) + data.deltaValue3, 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 === 3 && v.every((it) => Number.isFinite(it));\n\n if (!isValidModel) {\n return \"Expected model [number, number, number]\";\n }\n\n const errors: string[] = [];\n\n [...props.modelValue].forEach((v) => {\n if (v > props.max) {\n errors.push(`Max model value must be lower than max props ${props.max}.`);\n }\n if (v < props.min) {\n errors.push(\"Min model value must be greater than max props.\");\n }\n });\n\n if (errors.length > 0) {\n return errors.join(\" \");\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 position3 = computed(() => {\n return (localValue3.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[2] + \"%\",\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\nconst thumbStyle3 = computed(() => ({\n right: Math.ceil((1 - position3.value) * 100) + \"%\",\n}));\n\nuseMouseCapture(thumbRef1, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue1 = (dx / rect.width) * range.value;\n\n if (thumbRef1.value) {\n updateDatasetForThumb(thumbRef1.value, props.modelValue[0], data.deltaValue1);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue1 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef2, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue2 = (dx / rect.width) * range.value;\n\n if (thumbRef2.value) {\n updateDatasetForThumb(thumbRef2.value, props.modelValue[1], data.deltaValue2);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue2 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef3, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue3 = (dx / rect.width) * range.value;\n\n if (thumbRef3.value) {\n updateDatasetForThumb(thumbRef3.value, props.modelValue[2], data.deltaValue3);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue3 = 0;\n }\n });\n});\n\nfunction updateDatasetForThumb(thumb: HTMLElement, modelVal: number, delta: number) {\n const value = round(clamp((modelVal ?? 0) + delta, props.min, props.max));\n thumb.dataset.percent = `${value}${props.measure}`;\n getHint();\n}\n\nfunction getLeftAndRight() {\n const point1 = Math.ceil((1 - position1.value) * 100);\n const point2 = Math.ceil((1 - position2.value) * 100);\n const point3 = Math.ceil((1 - position3.value) * 100);\n return [point1, point2, point3].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: ModelType) {\n emit(\"update:modelValue\", value);\n}\n\nfunction getHint() {\n const right1 = Number(thumbStyle1.value.right.substring(0, thumbStyle1.value.right.length - 1));\n const right2 = Number(thumbStyle2.value.right.substring(0, thumbStyle2.value.right.length - 1));\n const right3 = Number(thumbStyle3.value.right.substring(0, thumbStyle3.value.right.length - 1));\n\n const arr = [\n { r: right1, th: thumbRef1 },\n { r: right2, th: thumbRef2 },\n { r: right3, th: thumbRef3 },\n ].sort((a, b) => a.r - b.r);\n\n if (arr[0].th.value) {\n arr[0].th.value.dataset.hint = \"high\";\n }\n if (arr[1].th.value) {\n arr[1].th.value.dataset.hint = \"mid\";\n }\n\n if (arr[2].th.value) {\n arr[2].th.value.dataset.hint = \"low\";\n }\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: ModelType = [...props.modelValue];\n arr[index] = clamp(arr[index] + nextStep, props.min, props.max);\n setModelValue(arr);\n getHint();\n}\n\nonMounted(() => {\n getHint();\n});\n</script>\n\n<template>\n <div\n :class=\"props.disabled ? 'ui-slider__disabled' : undefined\"\n class=\"ui-slider__envelope ui-slider__triple\"\n >\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>\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 :data-percent=\"props.modelValue[0] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r1\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 :data-percent=\"props.modelValue[1] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r2\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 1)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef3\"\n :style=\"thumbStyle3\"\n :data-percent=\"props.modelValue[2] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r3\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 2)\"\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 <!-- {{ props.modelValue }} -->\n <!-- <InputRange v-if=\"props.mode === 'input'\" v-model=\"inputRange\" class=\"ui-focused-border\" /> -->\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\n<style></style>\n"],"mappings":"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"}
1	+ {"version":3,"file":"SliderRangeTriple.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/SliderRangeTriple.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onMounted, reactive, ref, unref, useSlots } 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\ntype ModelType = [number, number, number];\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: ModelType;\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 deltaValue3: 0,\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef1 = ref<HTMLElement>();\nconst thumbRef2 = ref<HTMLElement>();\nconst thumbRef3 = ref<HTMLElement>();\n\nconst range = computed(() => props.max - props.min);\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst localValue1 = computed(() =>\n clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max),\n);\nconst localValue2 = computed(() =>\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n);\nconst localValue3 = computed(() =>\n clamp((props.modelValue[2] ?? 0) + data.deltaValue3, 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 === 3 && v.every((it) => Number.isFinite(it));\n\n if (!isValidModel) {\n return \"Expected model [number, number, number]\";\n }\n\n const errors: string[] = [];\n\n [...props.modelValue].forEach((v) => {\n if (v > props.max) {\n errors.push(`Max model value must be lower than max props ${props.max}.`);\n }\n if (v < props.min) {\n errors.push(\"Min model value must be greater than max props.\");\n }\n });\n\n if (errors.length > 0) {\n return errors.join(\" \");\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 position3 = computed(() => {\n return (localValue3.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[2] + \"%\",\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\nconst thumbStyle3 = computed(() => ({\n right: Math.ceil((1 - position3.value) * 100) + \"%\",\n}));\n\nuseMouseCapture(thumbRef1, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue1 = (dx / rect.width) * range.value;\n\n if (thumbRef1.value) {\n updateDatasetForThumb(thumbRef1.value, props.modelValue[0], data.deltaValue1);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue1 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef2, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue2 = (dx / rect.width) * range.value;\n\n if (thumbRef2.value) {\n updateDatasetForThumb(thumbRef2.value, props.modelValue[1], data.deltaValue2);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue2 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef3, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue3 = (dx / rect.width) * range.value;\n\n if (thumbRef3.value) {\n updateDatasetForThumb(thumbRef3.value, props.modelValue[2], data.deltaValue3);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue3 = 0;\n }\n });\n});\n\nfunction updateDatasetForThumb(thumb: HTMLElement, modelVal: number, delta: number) {\n const value = round(clamp((modelVal ?? 0) + delta, props.min, props.max));\n thumb.dataset.percent = `${value}${props.measure}`;\n getHint();\n}\n\nfunction getLeftAndRight() {\n const point1 = Math.ceil((1 - position1.value) * 100);\n const point2 = Math.ceil((1 - position2.value) * 100);\n const point3 = Math.ceil((1 - position3.value) * 100);\n return [point1, point2, point3].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: ModelType) {\n emit(\"update:modelValue\", value);\n}\n\nfunction getHint() {\n const right1 = Number(thumbStyle1.value.right.substring(0, thumbStyle1.value.right.length - 1));\n const right2 = Number(thumbStyle2.value.right.substring(0, thumbStyle2.value.right.length - 1));\n const right3 = Number(thumbStyle3.value.right.substring(0, thumbStyle3.value.right.length - 1));\n\n const arr = [\n { r: right1, th: thumbRef1 },\n { r: right2, th: thumbRef2 },\n { r: right3, th: thumbRef3 },\n ].sort((a, b) => a.r - b.r);\n\n if (arr[0].th.value) {\n arr[0].th.value.dataset.hint = \"high\";\n }\n if (arr[1].th.value) {\n arr[1].th.value.dataset.hint = \"mid\";\n }\n\n if (arr[2].th.value) {\n arr[2].th.value.dataset.hint = \"low\";\n }\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: ModelType = [...props.modelValue];\n arr[index] = clamp(arr[index] + nextStep, props.min, props.max);\n setModelValue(arr);\n getHint();\n}\n\nonMounted(() => {\n getHint();\n});\n</script>\n\n<template>\n <div\n :class=\"props.disabled ? 'ui-slider__disabled' : undefined\"\n class=\"ui-slider__envelope ui-slider__triple\"\n >\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>\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 :data-percent=\"props.modelValue[0] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r1\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 :data-percent=\"props.modelValue[1] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r2\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 1)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef3\"\n :style=\"thumbStyle3\"\n :data-percent=\"props.modelValue[2] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r3\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 2)\"\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 <!-- {{ props.modelValue }} -->\n <!-- <InputRange v-if=\"props.mode === 'input'\" v-model=\"inputRange\" class=\"ui-focused-border\" /> -->\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\n<style></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,IAAM,IAAQ,GAAU,EAElB,KAAO,GAEP,IAAQ,GA2BR,IAAO,GAAS;GACpB,aAAa;GACb,aAAa;GACb,aAAa;GACd,CAAC,EAEI,IAAS,GAAkB,EAC3B,IAAY,GAAkB,EAC9B,IAAY,GAAkB,EAC9B,IAAY,GAAkB,EAE9B,IAAQ,QAAe,EAAM,MAAM,EAAM,IAAI,EAI7C,IAAiB,EAFN,QAAe,EAAM,CAEe,EAE/C,IAAc,QAClB,GAAO,EAAM,WAAW,MAAM,KAAK,EAAK,aAAa,EAAM,KAAK,EAAM,IAAI,CAC3E,EACK,IAAc,QAClB,GAAO,EAAM,WAAW,MAAM,KAAK,EAAK,aAAa,EAAM,KAAK,EAAM,IAAI,CAC3E,EACK,IAAc,QAClB,GAAO,EAAM,WAAW,MAAM,KAAK,EAAK,aAAa,EAAM,KAAK,EAAM,IAAI,CAC3E,EAEK,IAAQ,QAAe;GAC3B,IAAM,IAAI,EAAM;AAIhB,OAAI,EAFiB,MAAM,QAAQ,EAAE,IAAI,EAAE,WAAW,KAAK,EAAE,OAAO,MAAO,OAAO,SAAS,EAAG,CAAC,EAG7F,QAAO;GAGT,IAAM,IAAmB,EAAE;AAe3B,UAbA,CAAC,GAAG,EAAM,WAAW,CAAC,SAAS,MAAM;AAInC,IAHI,IAAI,EAAM,OACZ,EAAO,KAAK,gDAAgD,EAAM,IAAI,GAAG,EAEvE,IAAI,EAAM,OACZ,EAAO,KAAK,kDAAkD;KAEhE,EAEE,EAAO,SAAS,IACX,EAAO,KAAK,IAAI,GAGlB,GAAgB,EAAM,MAAM;IACnC,EAEI,IAAY,SACR,EAAY,QAAQ,EAAM,OAAO,EAAM,MAC/C,EAEI,IAAY,SACR,EAAY,QAAQ,EAAM,OAAO,EAAM,MAC/C,EAEI,IAAY,SACR,EAAY,QAAQ,EAAM,OAAO,EAAM,MAC/C,EAEI,IAAY,QAAe,IAAiB,CAAC,EAE7C,KAAgB,SAAgB;GACpC,OAAO,EAAU,MAAM,KAAK;GAC5B,MAAM,MAAM,EAAU,MAAM,KAAK;GAClC,EAAE,EAEG,IAAc,SAAgB,EAClC,OAAO,KAAK,MAAM,IAAI,EAAU,SAAS,IAAI,GAAG,KACjD,EAAE,EAEG,IAAc,SAAgB,EAClC,OAAO,KAAK,MAAM,IAAI,EAAU,SAAS,IAAI,GAAG,KACjD,EAAE,EAEG,IAAc,SAAgB,EAClC,OAAO,KAAK,MAAM,IAAI,EAAU,SAAS,IAAI,GAAG,KACjD,EAAE;AAkCH,EAhCA,EAAgB,IAAY,MAAO;AACjC,KAAM,EAAM,EAAO,EAAE,uBAAuB,GAAG,MAAS;IACtD,IAAM,EAAE,UAAO;AAOf,IANA,EAAK,cAAe,IAAK,EAAK,QAAS,EAAM,OAEzC,EAAU,SACZ,EAAsB,EAAU,OAAO,EAAM,WAAW,IAAI,EAAK,YAAY,EAG3E,EAAG,SACL,EAAc;KAAC,EAAM,EAAY,MAAM;KAAE,EAAM,EAAY,MAAM;KAAE,EAAM,EAAY,MAAM;KAAC,CAAC,EAC7F,EAAK,cAAc;KAErB;IACF,EAEF,EAAgB,IAAY,MAAO;AACjC,KAAM,EAAM,EAAO,EAAE,uBAAuB,GAAG,MAAS;IACtD,IAAM,EAAE,UAAO;AAOf,IANA,EAAK,cAAe,IAAK,EAAK,QAAS,EAAM,OAEzC,EAAU,SACZ,EAAsB,EAAU,OAAO,EAAM,WAAW,IAAI,EAAK,YAAY,EAG3E,EAAG,SACL,EAAc;KAAC,EAAM,EAAY,MAAM;KAAE,EAAM,EAAY,MAAM;KAAE,EAAM,EAAY,MAAM;KAAC,CAAC,EAC7F,EAAK,cAAc;KAErB;IACF,EAEF,EAAgB,IAAY,MAAO;AACjC,KAAM,EAAM,EAAO,EAAE,uBAAuB,GAAG,MAAS;IACtD,IAAM,EAAE,UAAO;AAOf,IANA,EAAK,cAAe,IAAK,EAAK,QAAS,EAAM,OAEzC,EAAU,SACZ,EAAsB,EAAU,OAAO,EAAM,WAAW,IAAI,EAAK,YAAY,EAG3E,EAAG,SACL,EAAc;KAAC,EAAM,EAAY,MAAM;KAAE,EAAM,EAAY,MAAM;KAAE,EAAM,EAAY,MAAM;KAAC,CAAC,EAC7F,EAAK,cAAc;KAErB;IACF;EAEF,SAAS,EAAsB,GAAoB,GAAkB,GAAe;GAClF,IAAM,IAAQ,EAAM,GAAO,KAAY,KAAK,GAAO,EAAM,KAAK,EAAM,IAAI,CAAC;AAEzE,GADA,EAAM,QAAQ,UAAU,GAAG,IAAQ,EAAM,WACzC,GAAS;;EAGX,SAAS,KAAkB;AAIzB,UAAO;IAHQ,KAAK,MAAM,IAAI,EAAU,SAAS,IAAI;IACtC,KAAK,MAAM,IAAI,EAAU,SAAS,IAAI;IACtC,KAAK,MAAM,IAAI,EAAU,SAAS,IAAI;IACtB,CAAC,MAAM,GAAG,MAAM,IAAI,EAAE;;EAGvD,SAAS,EAAM,GAAe;GAC5B,IAAM,IAAI,EAAM,GAAO,EAAM,KAAK,EAAM,IAAI;AAE5C,UAAO,KAAK,OAAO,iBAAuB,IAAI,EAAM,MAAM,IAAI,IAAI,EAAM;;EAG1E,SAAS,EAAc,GAAkB;AACvC,MAAK,qBAAqB,EAAM;;EAGlC,SAAS,IAAU;GACjB,IAAM,IAAS,OAAO,EAAY,MAAM,MAAM,UAAU,GAAG,EAAY,MAAM,MAAM,SAAS,EAAE,CAAC,EACzF,IAAS,OAAO,EAAY,MAAM,MAAM,UAAU,GAAG,EAAY,MAAM,MAAM,SAAS,EAAE,CAAC,EACzF,IAAS,OAAO,EAAY,MAAM,MAAM,UAAU,GAAG,EAAY,MAAM,MAAM,SAAS,EAAE,CAAC,EAEzF,IAAM;IACV;KAAE,GAAG;KAAQ,IAAI;KAAW;IAC5B;KAAE,GAAG;KAAQ,IAAI;KAAW;IAC5B;KAAE,GAAG;KAAQ,IAAI;KAAW;IAC7B,CAAC,MAAM,GAAG,MAAM,EAAE,IAAI,EAAE,EAAE;AAS3B,GAPI,EAAI,GAAG,GAAG,UACZ,EAAI,GAAG,GAAG,MAAM,QAAQ,OAAO,SAE7B,EAAI,GAAG,GAAG,UACZ,EAAI,GAAG,GAAG,MAAM,QAAQ,OAAO,QAG7B,EAAI,GAAG,GAAG,UACZ,EAAI,GAAG,GAAG,MAAM,QAAQ,OAAO;;EAInC,SAAS,EAAe,GAA6C,GAAe;AAClF,GAAI;IAAC;IAAa;IAAW;IAAc;IAAa;IAAQ,CAAC,SAAS,EAAE,KAAK,IAC/E,EAAE,gBAAgB;GAGpB,IAAM,IACJ,EAAE,SAAS,aAAa,EAAE,SAAS,eAC/B,EAAM,OAAO,IACb,EAAE,SAAS,eAAe,EAAE,SAAS,cACnC,EAAM,OAAO,KACb,GAEF,IAAiB,CAAC,GAAG,EAAM,WAAW;AAG5C,GAFA,EAAI,KAAS,EAAM,EAAI,KAAS,GAAU,EAAM,KAAK,EAAM,IAAI,EAC/D,EAAc,EAAI,EAClB,GAAS;;SAGX,SAAgB;AACd,MAAS;IACT,kBAIA,EA+EM,OAAA,EA9EH,OAAK,EAAA,CAAE,EAAM,WAAQ,wBAA2B,KAAA,GAC3C,wCAAuC,CAAA,EAAA,EAAA,CAE7C,EAoEM,OAAA,EApEA,OAAK,EAAA,CAAA,mBAAqB,EAAM,QAAc,YAAW,CAAA,EAAA,EAAA,CAC7D,EA6DM,OA7DN,IA6DM,CA5DJ,EASM,OATN,IASM,CARS,EAAA,SAAA,GAAA,EAAb,EAOQ,SAPR,GAOQ,CANN,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA,EACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,GAIY,EAAA,EAAA,EAAA;;GAJoB,OAAM;GAAO,UAAS;;GACzC,SAAO,SACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;oCAK/B,EAiDM,OAjDN,GAiDM,CAhDJ,EAIM,OAJN,GAIM,CAHJ,EAEM,OAAA;YAFG;GAAJ,KAAI;GAAS,OAAM;MACtB,EAA0D,OAAA;GAArD,OAAM;GAAuB,OAAK,EAAE,GAAA,MAAa;wBAG1D,EA0CM,OA1CN,GA0CM;GAzCY,EAAM,eAAA,EAAA,GAAA,EACpB,EAKE,GAAA,EAAA,KAAA,GAAA,EAAA,EAJwB,EAAA,EAAc,GAA9B,GAAM,YADhB,EAKE,OAAA;IAHC,KAAK;IACL,OAAK,EAAA,EAAA,OAAA,GAAc,EAAI,IAAA,CAAA;IACxB,OAAM;;GAGV,EAUM,OAAA;aATA;IAAJ,KAAI;IACH,OAAK,EAAE,EAAA,MAAW;IAClB,gBAAc,EAAM,WAAU,KAAA;IAC/B,OAAM;IACN,IAAA;IACA,UAAS;IACR,WAAO,AAAA,EAAA,QAAA,MAAE,EAAe,GAAM,EAAA;oBAE/B,EAAgD,OAAA,EAA3C,OAAM,oCAAkC,EAAA,MAAA,GAAA,CAAA,CAAA,EAAA,IAAA,EAAA;GAE/C,EAUM,OAAA;aATA;IAAJ,KAAI;IACH,OAAK,EAAE,EAAA,MAAW;IAClB,gBAAc,EAAM,WAAU,KAAA;IAC/B,OAAM;IACN,IAAA;IACA,UAAS;IACR,WAAO,AAAA,EAAA,QAAA,MAAE,EAAe,GAAM,EAAA;oBAE/B,EAAgD,OAAA,EAA3C,OAAM,oCAAkC,EAAA,MAAA,GAAA,CAAA,CAAA,EAAA,IAAA,EAAA;GAE/C,EAUM,OAAA;aATA;IAAJ,KAAI;IACH,OAAK,EAAE,EAAA,MAAW;IAClB,gBAAc,EAAM,WAAU,KAAA;IAC/B,OAAM;IACN,IAAA;IACA,UAAS;IACR,WAAO,AAAA,EAAA,QAAA,MAAE,EAAe,GAAM,EAAA;oBAE/B,EAAgD,OAAA,EAA3C,OAAM,oCAAkC,EAAA,MAAA,GAAA,CAAA,CAAA,EAAA,IAAA,EAAA;mBAMrD,EAGM,OAAA,EAHD,OAAM,mCAAiC,EAAA,MAAA,GAAA,CAAA,EAAA,EAAA,EAQnC,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA"}

package/dist/components/contextMenu/Menu.style.css CHANGED Viewed

	@@ -1 +1 @@
1	- .context-menu[data-v-1bb3001b]{z-index:var(--z-context-menu);background:#fffffff2;border-radius:4px;margin:0;padding:3px 0 4px;font-family:Lucida Grande,sans-serif;font-size:14px;line-height:15px;display:block;position:absolute;top:50px;left:50px;box-shadow:0 8px 15px #00000059}.context-menu[data-v-1bb3001b]:before{content:"";z-index:-1;border:1px solid #00000020;border-radius:4px;display:block;position:absolute;inset:-1px}.context-menu hr[data-v-1bb3001b]{background:#0000001a;border:none;height:1px;margin:6px 1px 5px;padding:0}.context-menu>div[data-v-1bb3001b]{border-top:1px solid #0000;border-bottom:1px solid #0000;padding:0 20px;display:block}.context-menu>div span[data-v-1bb3001b]{vertical-align:2px~~;-webkit-user-select:none~~;user-select:none}.context-menu>div[data-v-1bb3001b]:hover{background:linear-gradient(#648bf5 0%,#2866f2 100%);border-top:1px solid #5a82eb;border-bottom:1px solid #1758e7}.context-menu>div[data-v-1bb3001b]:hover:after{color:#fff}
1	+ .context-menu[data-v-1bb3001b]{z-index:var(--z-context-menu);background:#fffffff2;border-radius:4px;margin:0;padding:3px 0 4px;font-family:Lucida Grande,sans-serif;font-size:14px;line-height:15px;display:block;position:absolute;top:50px;left:50px;box-shadow:0 8px 15px #00000059}.context-menu[data-v-1bb3001b]:before{content:"";z-index:-1;border:1px solid #00000020;border-radius:4px;display:block;position:absolute;inset:-1px}.context-menu hr[data-v-1bb3001b]{background:#0000001a;border:none;height:1px;margin:6px 1px 5px;padding:0}.context-menu>div[data-v-1bb3001b]{border-top:1px solid #0000;border-bottom:1px solid #0000;padding:0 20px;display:block}.context-menu>div span[data-v-1bb3001b]{vertical-align:2px;user-select:none}.context-menu>div[data-v-1bb3001b]:hover{background:linear-gradient(#648bf5 0%,#2866f2 100%);border-top:1px solid #5a82eb;border-bottom:1px solid #1758e7}.context-menu>div[data-v-1bb3001b]:hover:after{color:#fff}

package/dist/index.js CHANGED Viewed

@@ -13,6 +13,7 @@ import c from "./components/ContextProvider.js";
 import { animate as l, animateInfinite as u, call as d, delay as f, listToOptions as p, makeEaseInOut as m, makeEaseOut as h, normalizeListOptions as g, randomInt as _, randomString as v, requestTick as y, throttle as b, timeout as x } from "./helpers/utils.js";
 import { useClickOutside as S } from "./composition/useClickOutside.js";
 import C from "./components/PlTooltip/PlTooltip.js";
+import "./components/PlTooltip/index.js";
 import w from "./components/Slider.js";
 import T from "./components/LongText.js";
 import { downloadContent as E } from "./helpers/downloadContent.js";
@@ -23,76 +24,134 @@ import P from "./components/SliderRange.js";
 import F from "./components/SliderRangeTriple.js";
 import { allCssVariables as I } from "./demo-site-data/all-css-variables.js";
 import L from "./components/PlSvg/PlSvg.js";
+import "./components/PlSvg/index.js";
 import R from "./components/PlIcon24/PlIcon24.js";
+import "./components/PlIcon24/index.js";
 import z from "./components/PlLoaderLogo.js";
 import B from "./layout/PlPlaceholder/PlPlaceholder.js";
 import { PL_PLACEHOLDER_TEXTS as V } from "./layout/PlPlaceholder/index.js";
 import H from "./layout/PlBlockPage/PlBlockPage.js";
 import { usePlBlockPageTitleTeleportTarget as U } from "./layout/PlBlockPage/usePlBlockPageTitleTeleportTarget.js";
+import "./layout/PlBlockPage/index.js";
 import W from "./components/PlLoaderCircular/PlLoaderCircular.js";
+import "./components/PlLoaderCircular/index.js";
 import G from "./components/PlSplash/PlSplash.js";
 import K from "./layout/PlContainer/PlContainer.js";
+import "./layout/PlContainer/index.js";
 import q from "./layout/PlGrid/PlGrid.js";
+import "./layout/PlGrid/index.js";
 import J from "./layout/PlRow/PlRow.js";
+import "./layout/PlRow/index.js";
 import Y from "./layout/PlSpacer/PlSpacer.js";
+import "./layout/PlSpacer/index.js";
 import X from "./components/PlIcon16/PlIcon16.js";
+import "./components/PlMaskIcon16/index.js";
 import Z from "./components/PlErrorBoundary/PlErrorBoundary.js";
+import "./components/PlErrorBoundary/index.js";
 import Q from "./components/PlAccordion/PlAccordion.js";
 import ne from "./components/PlSectionSeparator/PlSectionSeparator.js";
+import "./components/PlSectionSeparator/index.js";
 import re from "./components/PlAccordion/PlAccordionSection.js";
-import ie from "./components/PlAlert/PlAlert.js";
-import { useLabelNotch as ae } from "./utils/useLabelNotch.js";
-import { useElementPosition as oe } from "./composition/usePosition.js";
-import se from "./utils/DropdownOverlay/DropdownOverlay.js";
-import { useWatchFetch as ce } from "./composition/useWatchFetch.js";
-import le from "./components/PlAutocomplete/PlAutocomplete.js";
-import ue from "./components/PlChip/PlChip.js";
-import de from "./components/PlAutocompleteMulti/PlAutocompleteMulti.js";
-import fe from "./components/PlBtnAccent/PlBtnAccent.js";
-import pe from "./components/PlBtnDanger/PlBtnDanger.js";
-import me from "./components/PlBtnGhost/PlBtnGhost.js";
-import he from "./components/PlBtnGroup/PlBtnGroup.js";
-import ge from "./components/PlBtnSecondary/PlBtnSecondary.js";
-import _e from "./components/PlBtnLink/PlBtnLink.js";
-import ve from "./components/PlBtnPrimary/PlBtnPrimary.js";
-import $ from "./components/PlBtnSplit/PlBtnSplit.js";
-import ye from "./components/PlCheckbox/PlCheckbox.js";
-import be from "./components/PlCheckboxGroup/PlCheckboxGroup.js";
-import xe from "./utils/PlCloseModalBtn.js";
+import "./components/PlAccordion/index.js";
+import ie from "./utils/PlCloseModalBtn.js";
+import ae from "./components/PlAlert/PlAlert.js";
+import "./components/PlAlert/index.js";
+import { useLabelNotch as oe } from "./utils/useLabelNotch.js";
+import "./components/PlIcon16/index.js";
+import "./components/PlMaskIcon24/index.js";
+import { useElementPosition as se } from "./composition/usePosition.js";
+import ce from "./utils/DropdownOverlay/DropdownOverlay.js";
+import "./utils/DropdownOverlay/index.js";
+import { useWatchFetch as le } from "./composition/useWatchFetch.js";
+import ue from "./components/PlAutocomplete/PlAutocomplete.js";
+import "./components/PlAutocomplete/index.js";
+import de from "./components/PlChip/PlChip.js";
+import "./components/PlChip/index.js";
+import fe from "./components/PlAutocompleteMulti/PlAutocompleteMulti.js";
+import "./components/PlAutocompleteMulti/index.js";
+import pe from "./components/PlBtnAccent/PlBtnAccent.js";
+import "./components/PlBtnAccent/index.js";
+import me from "./components/PlBtnDanger/PlBtnDanger.js";
+import "./components/PlBtnDanger/index.js";
+import he from "./components/PlBtnGhost/PlBtnGhost.js";
+import "./components/PlBtnGhost/index.js";
+import ge from "./components/PlBtnGroup/PlBtnGroup.js";
+import "./components/PlBtnGroup/index.js";
+import _e from "./components/PlBtnSecondary/PlBtnSecondary.js";
+import ve from "./components/PlBtnLink/PlBtnLink.js";
+import "./components/PlBtnLink/index.js";
+import $ from "./components/PlBtnPrimary/PlBtnPrimary.js";
+import "./components/PlBtnPrimary/index.js";
+import "./components/PlBtnSecondary/index.js";
+import ye from "./components/PlBtnSplit/PlBtnSplit.js";
+import "./components/PlBtnSplit/index.js";
+import be from "./components/PlCheckbox/PlCheckbox.js";
+import "./components/PlCheckbox/index.js";
+import xe from "./components/PlCheckboxGroup/PlCheckboxGroup.js";
+import "./components/PlCheckboxGroup/index.js";
 import Se from "./components/PlDialogModal/PlDialogModal.js";
+import "./components/PlDialogModal/index.js";
 import Ce from "./components/PlDropdown/PlDropdown.js";
+import "./components/PlDropdown/index.js";
 import we from "./components/PlDropdownLegacy/PlDropdownLegacy.js";
+import "./components/PlDropdownLegacy/index.js";
 import Te from "./components/PlDropdownLine/PlDropdownLine.js";
+import "./components/PlDropdownLine/index.js";
 import Ee from "./components/PlDropdownMulti/PlDropdownMulti.js";
+import "./components/PlDropdownMulti/index.js";
 import De from "./components/PlDropdownMultiRef/PlDropdownMultiRef.js";
+import "./components/PlDropdownMultiRef/index.js";
 import Oe from "./components/PlDropdownRef/PlDropdownRef.js";
+import "./components/PlDropdownRef/index.js";
 import ke from "./components/PlEditableTitle/PlEditableTitle.js";
+import "./components/PlEditableTitle/index.js";
 import Ae from "./components/PlElementList/PlElementList.js";
+import "./components/PlElementList/index.js";
 import je from "./components/PlLogView/PlLogView.js";
+import "./components/PlLogView/index.js";
 import Me from "./components/PlNumberField/PlNumberField.js";
+import "./components/PlNumberField/index.js";
 import Ne from "./components/PlProgressBar/PlProgressBar.js";
+import "./components/PlProgressBar/index.js";
 import Pe from "./components/PlProgressCell/PlProgressCell.js";
+import "./components/PlProgressCell/index.js";
 import Fe from "./components/PlSearchField/PlSearchField.js";
+import "./components/PlSearchField/index.js";
 import Ie from "./components/PlSlideModal/PlPureSlideModal.js";
 import Le from "./components/PlSlideModal/PlSlideModal.js";
+import "./components/PlSlideModal/index.js";
+import "./components/PlSplash/index.js";
 import Re from "./components/PlStatusTag/PlStatusTag.js";
+import "./components/PlStatusTag/index.js";
 import ze from "./components/PlTabs/PlTabs.js";
+import "./components/PlTabs/index.js";
 import Be from "./components/PlTextArea/PlTextArea.js";
+import "./components/PlTextArea/index.js";
 import Ve from "./components/PlTextField/PlTextField.js";
+import "./components/PlTextField/index.js";
 import He from "./components/PlToggleSwitch/PlToggleSwitch.js";
+import "./components/PlToggleSwitch/index.js";
 import Ue from "./components/PlFileDialog/PlFileDialog.js";
+import "./components/PlFileDialog/index.js";
 import We from "./components/PlFileInput/PlFileInput.js";
+import "./components/PlFileInput/index.js";
 import Ge from "./components/PlNotificationAlert/PlNotificationAlert.js";
+import "./components/PlNotificationAlert/index.js";
 import Ke from "./components/PlSidebar/PlSidebarGroup.js";
 import qe from "./components/PlSidebar/PlSidebarItem.js";
+import "./components/PlSidebar/index.js";
 import Je from "./components/PlChartHistogram/PlChartHistogram.js";
+import "./components/PlChartHistogram/index.js";
 import Ye from "./components/PlChartStackedBar/PlChartStackedBar.js";
 import Xe from "./components/PlChartStackedBar/PlChartStackedBarCompact.js";
+import "./components/PlChartStackedBar/index.js";
 import Ze from "./components/PlRadio/PlRadio.js";
 import Qe from "./components/PlRadio/PlRadioGroup.js";
+import "./components/PlRadio/index.js";
 import { categoricalColors as $e, magma as et, palettes as tt, viridis as nt } from "./colors/palette.js";
 import { Color as rt } from "./colors/color.js";
 import { Gradient as it, interpolateColor as at, normalizeGradient as ot } from "./colors/gradient.js";
+import "./colors/index.js";
 import { useComponentProp as st } from "./composition/useComponentProp.js";
 import { useConfirm as ct } from "./composition/useConfirm.js";
 import { useDraggable as lt } from "./composition/useDraggable.js";
@@ -109,6 +168,6 @@ import { watchCached as xt } from "./composition/watchCached.js";
 import { icons16 as St } from "./generated/icons-16.js";
 import { icons24 as Ct } from "./generated/icons-24.js";
 var wt = { allCssVariables: I() };
-export { rt as Color, c as ContextProvider, r as DataTable, wt as DemoData, s as DropdownListItem, se as DropdownOverlay, it as Gradient, T as LongText, V as PL_PLACEHOLDER_TEXTS, Q as PlAccordion, re as PlAccordionSection, ie as PlAlert, le as PlAutocomplete, de as PlAutocompleteMulti, H as PlBlockPage, fe as PlBtnAccent, pe as PlBtnDanger, me as PlBtnGhost, he as PlBtnGroup, _e as PlBtnLink, ve as PlBtnPrimary, ge as PlBtnSecondary, $ as PlBtnSplit, Je as PlChartHistogram, Ye as PlChartStackedBar, Xe as PlChartStackedBarCompact, ye as PlCheckbox, be as PlCheckboxGroup, ue as PlChip, xe as PlCloseModalBtn, K as PlContainer, Se as PlDialogModal, Ce as PlDropdown, we as PlDropdownLegacy, Te as PlDropdownLine, Ee as PlDropdownMulti, De as PlDropdownMultiRef, Oe as PlDropdownRef, ke as PlEditableTitle, Ae as PlElementList, Z as PlErrorBoundary, Ue as PlFileDialog, We as PlFileInput, q as PlGrid, X as PlIcon16, R as PlIcon24, W as PlLoaderCircular, z as PlLoaderLogo, je as PlLogView, X as PlMaskIcon16, R as PlMaskIcon24, Ge as PlNotificationAlert, Me as PlNumberField, B as PlPlaceholder, Ne as PlProgressBar, Pe as PlProgressCell, Ie as PlPureSlideModal, Ze as PlRadio, Qe as PlRadioGroup, J as PlRow, Fe as PlSearchField, ne as PlSectionSeparator, Ke as PlSidebarGroup, qe as PlSidebarItem, Le as PlSlideModal, Y as PlSpacer, G as PlSplash, Re as PlStatusTag, L as PlSvg, ze as PlTabs, Be as PlTextArea, Ve as PlTextField, He as PlToggleSwitch, C as PlTooltip, N as Scrollable, w as Slider, P as SliderRange, F as SliderRangeTriple, o as ThemeSwitcher, l as animate, u as animateInfinite, d as call, $e as categoricalColors, _t as computedCached, f as delay, D as detectOutside, E as downloadContent, O as eventListener, vt as filterUiMetadata, k as getElementScrollPosition, yt as getFilterUiMetadata, bt as getFilterUiTypeOptions, St as icons16, Ct as icons24, at as interpolateColor, A as isElementVisible, p as listToOptions, et as magma, m as makeEaseInOut, h as makeEaseOut, ot as normalizeGradient, g as normalizeListOptions, tt as palettes, _ as randomInt, v as randomString, y as requestTick, j as scrollIntoView, ee as showContextMenu, b as throttle, x as timeout, S as useClickOutside, st as useComponentProp, ct as useConfirm, lt as useDraggable, te as useEventListener, ut as useFormState, t as useHover, dt as useInterval, ae as useLabelNotch, i as useLocalStorage, e as useMouse, n as useMouseCapture, U as usePlBlockPageTitleTeleportTarget, ft as usePollingQuery, oe as usePosition, pt as useQuery, M as useResizeObserver, mt as useScroll, ht as useSortable, gt as useSortable2, a as useTheme, ce as useWatchFetch, nt as viridis, xt as watchCached };
+export { rt as Color, c as ContextProvider, r as DataTable, wt as DemoData, s as DropdownListItem, ce as DropdownOverlay, it as Gradient, T as LongText, V as PL_PLACEHOLDER_TEXTS, Q as PlAccordion, re as PlAccordionSection, ae as PlAlert, ue as PlAutocomplete, fe as PlAutocompleteMulti, H as PlBlockPage, pe as PlBtnAccent, me as PlBtnDanger, he as PlBtnGhost, ge as PlBtnGroup, ve as PlBtnLink, $ as PlBtnPrimary, _e as PlBtnSecondary, ye as PlBtnSplit, Je as PlChartHistogram, Ye as PlChartStackedBar, Xe as PlChartStackedBarCompact, be as PlCheckbox, xe as PlCheckboxGroup, de as PlChip, ie as PlCloseModalBtn, K as PlContainer, Se as PlDialogModal, Ce as PlDropdown, we as PlDropdownLegacy, Te as PlDropdownLine, Ee as PlDropdownMulti, De as PlDropdownMultiRef, Oe as PlDropdownRef, ke as PlEditableTitle, Ae as PlElementList, Z as PlErrorBoundary, Ue as PlFileDialog, We as PlFileInput, q as PlGrid, X as PlIcon16, R as PlIcon24, W as PlLoaderCircular, z as PlLoaderLogo, je as PlLogView, X as PlMaskIcon16, R as PlMaskIcon24, Ge as PlNotificationAlert, Me as PlNumberField, B as PlPlaceholder, Ne as PlProgressBar, Pe as PlProgressCell, Ie as PlPureSlideModal, Ze as PlRadio, Qe as PlRadioGroup, J as PlRow, Fe as PlSearchField, ne as PlSectionSeparator, Ke as PlSidebarGroup, qe as PlSidebarItem, Le as PlSlideModal, Y as PlSpacer, G as PlSplash, Re as PlStatusTag, L as PlSvg, ze as PlTabs, Be as PlTextArea, Ve as PlTextField, He as PlToggleSwitch, C as PlTooltip, N as Scrollable, w as Slider, P as SliderRange, F as SliderRangeTriple, o as ThemeSwitcher, l as animate, u as animateInfinite, d as call, $e as categoricalColors, _t as computedCached, f as delay, D as detectOutside, E as downloadContent, O as eventListener, vt as filterUiMetadata, k as getElementScrollPosition, yt as getFilterUiMetadata, bt as getFilterUiTypeOptions, St as icons16, Ct as icons24, at as interpolateColor, A as isElementVisible, p as listToOptions, et as magma, m as makeEaseInOut, h as makeEaseOut, ot as normalizeGradient, g as normalizeListOptions, tt as palettes, _ as randomInt, v as randomString, y as requestTick, j as scrollIntoView, ee as showContextMenu, b as throttle, x as timeout, S as useClickOutside, st as useComponentProp, ct as useConfirm, lt as useDraggable, te as useEventListener, ut as useFormState, t as useHover, dt as useInterval, oe as useLabelNotch, i as useLocalStorage, e as useMouse, n as useMouseCapture, U as usePlBlockPageTitleTeleportTarget, ft as usePollingQuery, se as usePosition, pt as useQuery, M as useResizeObserver, mt as useScroll, ht as useSortable, gt as useSortable2, a as useTheme, le as useWatchFetch, nt as viridis, xt as watchCached };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["import \"./assets/ui.scss\";\n\n// @TODO review\nimport * as DataTable from \"./components/DataTable\";\nimport ThemeSwitcher from \"./components/ThemeSwitcher.vue\";\n// @TODO review (may be private)\nimport DropdownListItem from \"./components/DropdownListItem.vue\";\n\n// @TODO review\nimport ContextProvider from \"./components/ContextProvider.vue\";\nimport Slider from \"./components/Slider.vue\";\nimport { showContextMenu } from \"./components/contextMenu\";\n// for new version\nimport LongText from \"./components/LongText.vue\";\nimport Scrollable from \"./components/Scrollable.vue\";\nimport SliderRange from \"./components/SliderRange.vue\";\nimport SliderRangeTriple from \"./components/SliderRangeTriple.vue\";\n\nimport { allCssVariables } from \"./demo-site-data/all-css-variables.ts\";\n\n/*\n Layout components\n /\n\nexport from \"./layout/PlBlockPage\";\nexport * from \"./layout/PlContainer\";\nexport * from \"./layout/PlGrid\";\nexport * from \"./layout/PlPlaceholder\";\nexport * from \"./layout/PlRow\";\nexport * from \"./layout/PlSpacer\";\n\n/*\n Components\n /\nexport from \"./components/PlErrorBoundary\";\n// export * from './components/PlErrorAlert'; // @TODO discuss if we should export it\nexport * from \"./components/PlAccordion\";\nexport * from \"./components/PlAlert\";\nexport * from \"./components/PlAutocomplete\";\nexport * from \"./components/PlAutocompleteMulti\";\nexport * from \"./components/PlBtnAccent\";\nexport * from \"./components/PlBtnDanger\";\nexport * from \"./components/PlBtnGhost\";\nexport * from \"./components/PlBtnGroup\";\nexport * from \"./components/PlBtnLink\";\nexport * from \"./components/PlBtnPrimary\";\nexport * from \"./components/PlBtnSecondary\";\nexport * from \"./components/PlBtnSplit\";\nexport * from \"./components/PlCheckbox\";\nexport * from \"./components/PlCheckboxGroup\";\nexport * from \"./components/PlChip\";\nexport * from \"./components/PlDialogModal\";\nexport * from \"./components/PlDropdown\";\nexport * from \"./components/PlDropdownLegacy\";\nexport * from \"./components/PlDropdownLine\";\nexport * from \"./components/PlDropdownMulti\";\nexport * from \"./components/PlDropdownMultiRef\";\nexport * from \"./components/PlDropdownRef\";\nexport * from \"./components/PlEditableTitle\";\nexport * from \"./components/PlElementList\";\nexport * from \"./components/PlLoaderCircular\";\nexport * from \"./components/PlLogView\";\nexport * from \"./components/PlNumberField\";\nexport * from \"./components/PlProgressBar\";\nexport * from \"./components/PlProgressCell\";\nexport * from \"./components/PlSearchField\";\nexport * from \"./components/PlSectionSeparator\";\nexport * from \"./components/PlSlideModal\";\nexport * from \"./components/PlSplash\";\nexport * from \"./components/PlStatusTag\";\nexport * from \"./components/PlTabs\";\nexport * from \"./components/PlTextArea\";\nexport * from \"./components/PlTextField\";\nexport * from \"./components/PlToggleSwitch\";\nexport * from \"./components/PlTooltip\";\n\nexport * from \"./components/PlFileDialog\";\nexport * from \"./components/PlFileInput\";\nexport * from \"./components/PlNotificationAlert\";\n\nexport * from \"./components/PlSidebar\";\n\nexport * from \"./components/PlIcon16\";\nexport * from \"./components/PlIcon24\";\nexport * from \"./components/PlMaskIcon16\";\nexport * from \"./components/PlMaskIcon24\";\nexport * from \"./components/PlSvg\";\n\nexport * from \"./components/PlChartHistogram\";\nexport * from \"./components/PlChartStackedBar\";\n\nexport * from \"./components/PlRadio\";\n\nexport { default as PlLoaderLogo } from \"./components/PlLoaderLogo.vue\";\n\nexport * from \"./colors\";\n\n/*\n Usables\n /\nexport { useClickOutside } from \"./composition/useClickOutside\";\nexport { useComponentProp } from \"./composition/useComponentProp\";\nexport { useConfirm } from \"./composition/useConfirm\";\nexport { useDraggable } from \"./composition/useDraggable\";\nexport { useEventListener } from \"./composition/useEventListener\";\nexport { useFormState } from \"./composition/useFormState\";\nexport { useHover } from \"./composition/useHover\";\nexport { useInterval } from \"./composition/useInterval\";\nexport { usePollingQuery } from \"./composition/usePollingQuery\";\nexport { useLocalStorage } from \"./composition/useLocalStorage\";\nexport { useMouse } from \"./composition/useMouse\";\nexport { useMouseCapture } from \"./composition/useMouseCapture\";\nexport { useElementPosition as usePosition } from \"./composition/usePosition\";\nexport { useQuery } from \"./composition/useQuery.ts\";\nexport { useResizeObserver } from \"./composition/useResizeObserver\";\nexport { useScroll } from \"./composition/useScroll\";\nexport { useSortable } from \"./composition/useSortable\";\nexport { useSortable2 } from \"./composition/useSortable2\";\nexport { useTheme } from \"./composition/useTheme\";\n\nexport from \"./composition/computedCached\";\nexport * from \"./composition/filters\";\nexport * from \"./composition/useWatchFetch\";\nexport * from \"./composition/watchCached\";\n\n/*\n Utils/Partials\n /\n\nexport from \"./utils/DropdownOverlay\";\nexport { default as PlCloseModalBtn } from \"./utils/PlCloseModalBtn.vue\";\n\n/*\n Technical\n * @TODO move it from here maybe\n /\nexport { useLabelNotch } from \"./utils/useLabelNotch.ts\";\n\nexport type from \"./types\";\n\nexport { icons16, icons24 } from \"./types\";\n\nexport * from \"./helpers/dom\";\n\nexport * from \"./helpers/utils\";\n\n/*\n @TODO review\n */\nexport { ContextProvider, DataTable, DropdownListItem, Slider, ThemeSwitcher };\n\n// Helpers\nexport { showContextMenu };\n\n// move to new version pl-uikit\nexport { LongText, Scrollable, SliderRange, SliderRangeTriple };\n\n// @todo\nconst DemoData = { allCssVariables: allCssVariables() };\nexport { DemoData };\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA8JA,IAAM,KAAW,EAAE,iBAAiB,GAAiB,EAAE"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["import \"./assets/ui.scss\";\n\n// @TODO review\nimport * as DataTable from \"./components/DataTable\";\nimport ThemeSwitcher from \"./components/ThemeSwitcher.vue\";\n// @TODO review (may be private)\nimport DropdownListItem from \"./components/DropdownListItem.vue\";\n\n// @TODO review\nimport ContextProvider from \"./components/ContextProvider.vue\";\nimport Slider from \"./components/Slider.vue\";\nimport { showContextMenu } from \"./components/contextMenu\";\n// for new version\nimport LongText from \"./components/LongText.vue\";\nimport Scrollable from \"./components/Scrollable.vue\";\nimport SliderRange from \"./components/SliderRange.vue\";\nimport SliderRangeTriple from \"./components/SliderRangeTriple.vue\";\n\nimport { allCssVariables } from \"./demo-site-data/all-css-variables.ts\";\n\n/*\n Layout components\n /\n\nexport from \"./layout/PlBlockPage\";\nexport * from \"./layout/PlContainer\";\nexport * from \"./layout/PlGrid\";\nexport * from \"./layout/PlPlaceholder\";\nexport * from \"./layout/PlRow\";\nexport * from \"./layout/PlSpacer\";\n\n/*\n Components\n /\nexport from \"./components/PlErrorBoundary\";\n// export * from './components/PlErrorAlert'; // @TODO discuss if we should export it\nexport * from \"./components/PlAccordion\";\nexport * from \"./components/PlAlert\";\nexport * from \"./components/PlAutocomplete\";\nexport * from \"./components/PlAutocompleteMulti\";\nexport * from \"./components/PlBtnAccent\";\nexport * from \"./components/PlBtnDanger\";\nexport * from \"./components/PlBtnGhost\";\nexport * from \"./components/PlBtnGroup\";\nexport * from \"./components/PlBtnLink\";\nexport * from \"./components/PlBtnPrimary\";\nexport * from \"./components/PlBtnSecondary\";\nexport * from \"./components/PlBtnSplit\";\nexport * from \"./components/PlCheckbox\";\nexport * from \"./components/PlCheckboxGroup\";\nexport * from \"./components/PlChip\";\nexport * from \"./components/PlDialogModal\";\nexport * from \"./components/PlDropdown\";\nexport * from \"./components/PlDropdownLegacy\";\nexport * from \"./components/PlDropdownLine\";\nexport * from \"./components/PlDropdownMulti\";\nexport * from \"./components/PlDropdownMultiRef\";\nexport * from \"./components/PlDropdownRef\";\nexport * from \"./components/PlEditableTitle\";\nexport * from \"./components/PlElementList\";\nexport * from \"./components/PlLoaderCircular\";\nexport * from \"./components/PlLogView\";\nexport * from \"./components/PlNumberField\";\nexport * from \"./components/PlProgressBar\";\nexport * from \"./components/PlProgressCell\";\nexport * from \"./components/PlSearchField\";\nexport * from \"./components/PlSectionSeparator\";\nexport * from \"./components/PlSlideModal\";\nexport * from \"./components/PlSplash\";\nexport * from \"./components/PlStatusTag\";\nexport * from \"./components/PlTabs\";\nexport * from \"./components/PlTextArea\";\nexport * from \"./components/PlTextField\";\nexport * from \"./components/PlToggleSwitch\";\nexport * from \"./components/PlTooltip\";\n\nexport * from \"./components/PlFileDialog\";\nexport * from \"./components/PlFileInput\";\nexport * from \"./components/PlNotificationAlert\";\n\nexport * from \"./components/PlSidebar\";\n\nexport * from \"./components/PlIcon16\";\nexport * from \"./components/PlIcon24\";\nexport * from \"./components/PlMaskIcon16\";\nexport * from \"./components/PlMaskIcon24\";\nexport * from \"./components/PlSvg\";\n\nexport * from \"./components/PlChartHistogram\";\nexport * from \"./components/PlChartStackedBar\";\n\nexport * from \"./components/PlRadio\";\n\nexport { default as PlLoaderLogo } from \"./components/PlLoaderLogo.vue\";\n\nexport * from \"./colors\";\n\n/*\n Usables\n /\nexport { useClickOutside } from \"./composition/useClickOutside\";\nexport { useComponentProp } from \"./composition/useComponentProp\";\nexport { useConfirm } from \"./composition/useConfirm\";\nexport { useDraggable } from \"./composition/useDraggable\";\nexport { useEventListener } from \"./composition/useEventListener\";\nexport { useFormState } from \"./composition/useFormState\";\nexport { useHover } from \"./composition/useHover\";\nexport { useInterval } from \"./composition/useInterval\";\nexport { usePollingQuery } from \"./composition/usePollingQuery\";\nexport { useLocalStorage } from \"./composition/useLocalStorage\";\nexport { useMouse } from \"./composition/useMouse\";\nexport { useMouseCapture } from \"./composition/useMouseCapture\";\nexport { useElementPosition as usePosition } from \"./composition/usePosition\";\nexport { useQuery } from \"./composition/useQuery.ts\";\nexport { useResizeObserver } from \"./composition/useResizeObserver\";\nexport { useScroll } from \"./composition/useScroll\";\nexport { useSortable } from \"./composition/useSortable\";\nexport { useSortable2 } from \"./composition/useSortable2\";\nexport { useTheme } from \"./composition/useTheme\";\n\nexport from \"./composition/computedCached\";\nexport * from \"./composition/filters\";\nexport * from \"./composition/useWatchFetch\";\nexport * from \"./composition/watchCached\";\n\n/*\n Utils/Partials\n /\n\nexport from \"./utils/DropdownOverlay\";\nexport { default as PlCloseModalBtn } from \"./utils/PlCloseModalBtn.vue\";\n\n/*\n Technical\n * @TODO move it from here maybe\n /\nexport { useLabelNotch } from \"./utils/useLabelNotch.ts\";\n\nexport type from \"./types\";\n\nexport { icons16, icons24 } from \"./types\";\n\nexport * from \"./helpers/dom\";\n\nexport * from \"./helpers/utils\";\n\n/*\n @TODO review\n */\nexport { ContextProvider, DataTable, DropdownListItem, Slider, ThemeSwitcher };\n\n// Helpers\nexport { showContextMenu };\n\n// move to new version pl-uikit\nexport { LongText, Scrollable, SliderRange, SliderRangeTriple };\n\n// @todo\nconst DemoData = { allCssVariables: allCssVariables() };\nexport { DemoData };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8JA,IAAM,KAAW,EAAE,iBAAiB,GAAiB,EAAE"}

package/dist/layout/PlBlockPage/PlBlockPage.vue.css CHANGED Viewed

	@@ -1 +1 @@
1	- ._header_19wcy_2{flex-direction:column;gap:2px;margin-block-end:-8px;padding:12px 24px;display:flex;overflow:hidden}._subtitle_19wcy_11{padding-inline-end:28px;display:flex~~}._subtitle_19wcy_11~~ input{anchor-name:--pl-block-page-subtitle;field-sizing:content;caret-color:var(--border-color-focus);color:var(--txt-01);letter-spacing:-.2px;text-overflow:ellipsis;border:none;outline:none;max-inline-size:100%;margin-block-end:-4px;padding:0;font-family:Manrope;font-size:20px;font-weight:500;line-height:28px~~}._subtitle_19wcy_11 input::~~placeholder{color:var(--txt-03)}~~._subtitle_19wcy_11~~ ._editIcon_19wcy_37{visibility:hidden;position-anchor:--pl-block-page-subtitle;position-area:center inline-end;position:fixed;inset-inline-start:4px}~~:is(._subtitle_19wcy_11:~~hover~~,._subtitle_19wcy_11:~~focus-within) ._editIcon_19wcy_37{visibility:visible}
1	+ ._header_19wcy_2{flex-direction:column;gap:2px;margin-block-end:-8px;padding:12px 24px;display:flex;overflow:hidden}._subtitle_19wcy_11{padding-inline-end:28px;display:flex;& input{anchor-name:--pl-block-page-subtitle;field-sizing:content;caret-color:var(--border-color-focus);color:var(--txt-01);letter-spacing:-.2px;text-overflow:ellipsis;border:none;outline:none;max-inline-size:100%;margin-block-end:-4px;padding:0;font-family:Manrope;font-size:20px;font-weight:500;line-height:28px;&::placeholder{color:var(--txt-03)}}& ._editIcon_19wcy_37{visibility:hidden;position-anchor:--pl-block-page-subtitle;position-area:center inline-end;position:fixed;inset-inline-start:4px}&:hover,&:focus-within{& ._editIcon_19wcy_37{visibility:visible}}}

package/dist/layout/PlBlockPage/PlBlockPage.vue2.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { PlBlockPageTitleTeleportTarget as e } from "./PlBlockPageTitleTeleportTarget.js";
 import './pl-block-page.css';/* empty css              */
 import t from "../../components/PlIcon24/PlIcon24.js";
+import "../../components/PlIcon24/index.js";
 import n from "../PlPlaceholder/PlPlaceholder.js";
 import { PL_PLACEHOLDER_TEXTS as r } from "../PlPlaceholder/index.js";
 import { computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, guardReactiveProps as u, mergeModels as d, normalizeClass as f, normalizeProps as p, normalizeStyle as m, openBlock as h, renderSlot as g, toDisplayString as _, unref as v, useCssModule as y, useModel as b, useSlots as x, useTemplateRef as S, vModelText as C, vShow as w, watchEffect as T, withDirectives as E } from "vue";

package/dist/layout/PlBlockPage/PlBlockPage.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlBlockPage.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlBlockPage/PlBlockPage.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Root block page component /\nexport default {\n name: \"PlBlockPage\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, useCssModule, useSlots, useTemplateRef, watchEffect } from \"vue\";\nimport { PlBlockPageTitleTeleportTarget } from \"./PlBlockPageTitleTeleportTarget\";\nimport \"./pl-block-page.scss\";\nimport { PlIcon24 } from \"../../components/PlIcon24\";\nimport { type PlPlaceholderProps, PL_PLACEHOLDER_TEXTS, PlPlaceholder } from \"../PlPlaceholder\";\n\nconst slots = useSlots();\n\nconst props = defineProps<{\n /\n Page title (won't be displayed if `title` slot is also provided)\n /\n title?: string;\n /\n Text to display when subtitle is empty\n /\n subtitlePlaceholder?: string;\n /\n If `true` body gutters are removed\n /\n noBodyGutters?: boolean;\n /\n If defined, a loading overlay is displayed on the page body (over all default slot content)\n /\n bodyLoading?: PlPlaceholderProps[\"variant\"] \| PlPlaceholderProps;\n}>();\n\n/* Page subtitle (editable) */\nconst subtitle = defineModel<string>(\"subtitle\");\n\nconst styles = useCssModule();\n\nconst loadingPlaceholder = computed<PlPlaceholderProps \| undefined>(() => {\n if (typeof props.bodyLoading === \"string\") {\n return { variant: props.bodyLoading, ...PL_PLACEHOLDER_TEXTS.LOADING };\n }\n return props.bodyLoading;\n});\n\nconst teleportTarget = useTemplateRef(\"teleportTarget\");\n\nwatchEffect(() => {\n PlBlockPageTitleTeleportTarget.value = teleportTarget.value;\n});\n</script>\n\n<template>\n <div class=\"pl-layout-component pl-block-page\" :class=\"{ noBodyGutters: props.noBodyGutters }\">\n <div v-if=\"slots.title \|\| props.title\" :class=\"styles.header\">\n <div class=\"pl-block-page__title\">\n <div class=\"pl-block-page__title__default\">\n <span v-if=\"slots.title\"><slot name=\"title\" /></span>\n <span v-else>{{ props.title }}</span>\n <slot name=\"after-title\" />\n </div>\n <div class=\"pl-block-page__title__append\">\n <div ref=\"teleportTarget\" class=\"pl-block-page__title__append__teleport\" />\n <slot name=\"append\" />\n </div>\n </div>\n <div v-if=\"subtitle !== undefined\" :class=\"styles.subtitle\">\n <input v-model.lazy.trim=\"subtitle\" :placeholder=\"props.subtitlePlaceholder\" />\n <PlIcon24 :class=\"styles.editIcon\" name=\"edit\" color=\"var(--ic-02)\" />\n </div>\n </div>\n <div v-else />\n <div class=\"pl-block-page__body\">\n <PlPlaceholder v-show=\"loadingPlaceholder\" v-bind=\"loadingPlaceholder\" />\n <div :style=\"{ display: loadingPlaceholder ? 'none' : 'contents' }\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n\n<style module>\n.header {\n display: flex;\n flex-direction: column;\n padding: 12px 24px;\n margin-block-end: -8px;\n gap: 2px;\n overflow: hidden;\n}\n\n.subtitle {\n display: flex;\n padding-inline-end: 28px;\n\n input {\n anchor-name: --pl-block-page-subtitle;\n field-sizing: content;\n padding: 0;\n border: none;\n outline: none;\n caret-color: var(--border-color-focus);\n color: var(--txt-01);\n font-family: Manrope;\n font-size: 20px;\n font-weight: 500;\n line-height: 28px;\n letter-spacing: -0.2px;\n margin-block-end: -4px;\n max-inline-size: 100%;\n text-overflow: ellipsis;\n\n &::placeholder {\n color: var(--txt-03);\n }\n }\n\n .editIcon {\n visibility: hidden;\n position: fixed;\n position-anchor: --pl-block-page-subtitle;\n position-area: center inline-end;\n inset-inline-start: 4px;\n }\n &:hover,\n &:focus-within {\n .editIcon {\n visibility: visible;\n }\n }\n}\n</style>\n"],"mappings":"~~;;;;;;;~~CAGE,MAAM;;;;;;;;;;;;EAWR,IAAM,IAAQ,GAAU,EAElB,IAAQ,GAoBR,IAAW,EAAmB,GAAC,WAAW,EAE1C,IAAS,GAAc,EAEvB,IAAqB,QACrB,OAAO,EAAM,eAAgB,WACxB;GAAE,SAAS,EAAM;GAAa,GAAG,EAAqB;GAAS,GAEjE,EAAM,YACb,EAEI,IAAiB,EAAe,iBAAiB;SAEvD,QAAkB;AAChB,KAA+B,QAAQ,EAAe;IACtD,kBAIA,EAyBM,OAAA,EAzBD,OAAK,EAAA,CAAC,qCAAmC,EAAA,eAA0B,EAAM,eAAa,CAAA,CAAA,EAAA,EAAA,CAC9E,EAAA,EAAK,CAAC,SAAS,EAAM,SAAA,GAAA,EAAhC,EAgBM,OAAA;;GAhBkC,OAAK,EAAE,EAAA,EAAM,CAAC,OAAM;MAC1D,EAUM,OAVN,GAUM,CATJ,EAIM,OAJN,GAIM,CAHQ,EAAA,EAAK,CAAC,SAAA,GAAA,EAAlB,EAAqD,QAAA,GAAA,CAA5B,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,GAAA,EAC9C,EAAqC,QAAA,GAAA,EAArB,EAAM,MAAK,EAAA,EAAA,GAC3B,EAA2B,EAAA,QAAA,cAAA,CAAA,CAAA,EAE7B,EAGM,OAHN,GAGM,CAFJ,EAA2E,OAAA;YAAlE;GAAJ,KAAI;GAAiB,OAAM;iBAChC,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA,EAGf,EAAA,UAAa,KAAA,iBAAA,GAAA,EAAxB,EAGM,OAAA;;GAH8B,OAAK,EAAE,EAAA,EAAM,CAAC,SAAQ;QACxD,EAA+E,SAAA;4CAA7C,QAAA;GAAG,aAAa,EAAM;;;GAA9B,EAAA;;;IAAX,MAAR;IAAa,MAAb;;OACP,EAAsE,EAAA,EAAA,EAAA;GAA3D,OAAK,EAAE,EAAA,EAAM,CAAC,SAAQ;GAAE,MAAK;GAAO,OAAM;6CAGzD,EAAc,OAAA,EAAA,GACd,EAKM,OALN,GAKM,CAAA,EAJJ,EAAyE,EAAA,EAAA,EAAA,EAAA,EAAtB,EAAA,MAAkB,CAAA,EAAA,MAAA,GAAA,EAAA,CAAA,CAAA,GAA9C,EAAA,MAAkB,CAAA,CAAA,EACzC,EAEM,OAAA,EAFA,OAAK,EAAA,EAAA,SAAa,EAAA,QAAkB,SAAA,YAAA,CAAA,EAAA,EAAA,CACxC,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA"}
1	+ {"version":3,"file":"PlBlockPage.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlBlockPage/PlBlockPage.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Root block page component /\nexport default {\n name: \"PlBlockPage\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, useCssModule, useSlots, useTemplateRef, watchEffect } from \"vue\";\nimport { PlBlockPageTitleTeleportTarget } from \"./PlBlockPageTitleTeleportTarget\";\nimport \"./pl-block-page.scss\";\nimport { PlIcon24 } from \"../../components/PlIcon24\";\nimport { type PlPlaceholderProps, PL_PLACEHOLDER_TEXTS, PlPlaceholder } from \"../PlPlaceholder\";\n\nconst slots = useSlots();\n\nconst props = defineProps<{\n /\n Page title (won't be displayed if `title` slot is also provided)\n /\n title?: string;\n /\n Text to display when subtitle is empty\n /\n subtitlePlaceholder?: string;\n /\n If `true` body gutters are removed\n /\n noBodyGutters?: boolean;\n /\n If defined, a loading overlay is displayed on the page body (over all default slot content)\n /\n bodyLoading?: PlPlaceholderProps[\"variant\"] \| PlPlaceholderProps;\n}>();\n\n/* Page subtitle (editable) */\nconst subtitle = defineModel<string>(\"subtitle\");\n\nconst styles = useCssModule();\n\nconst loadingPlaceholder = computed<PlPlaceholderProps \| undefined>(() => {\n if (typeof props.bodyLoading === \"string\") {\n return { variant: props.bodyLoading, ...PL_PLACEHOLDER_TEXTS.LOADING };\n }\n return props.bodyLoading;\n});\n\nconst teleportTarget = useTemplateRef(\"teleportTarget\");\n\nwatchEffect(() => {\n PlBlockPageTitleTeleportTarget.value = teleportTarget.value;\n});\n</script>\n\n<template>\n <div class=\"pl-layout-component pl-block-page\" :class=\"{ noBodyGutters: props.noBodyGutters }\">\n <div v-if=\"slots.title \|\| props.title\" :class=\"styles.header\">\n <div class=\"pl-block-page__title\">\n <div class=\"pl-block-page__title__default\">\n <span v-if=\"slots.title\"><slot name=\"title\" /></span>\n <span v-else>{{ props.title }}</span>\n <slot name=\"after-title\" />\n </div>\n <div class=\"pl-block-page__title__append\">\n <div ref=\"teleportTarget\" class=\"pl-block-page__title__append__teleport\" />\n <slot name=\"append\" />\n </div>\n </div>\n <div v-if=\"subtitle !== undefined\" :class=\"styles.subtitle\">\n <input v-model.lazy.trim=\"subtitle\" :placeholder=\"props.subtitlePlaceholder\" />\n <PlIcon24 :class=\"styles.editIcon\" name=\"edit\" color=\"var(--ic-02)\" />\n </div>\n </div>\n <div v-else />\n <div class=\"pl-block-page__body\">\n <PlPlaceholder v-show=\"loadingPlaceholder\" v-bind=\"loadingPlaceholder\" />\n <div :style=\"{ display: loadingPlaceholder ? 'none' : 'contents' }\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n\n<style module>\n.header {\n display: flex;\n flex-direction: column;\n padding: 12px 24px;\n margin-block-end: -8px;\n gap: 2px;\n overflow: hidden;\n}\n\n.subtitle {\n display: flex;\n padding-inline-end: 28px;\n\n input {\n anchor-name: --pl-block-page-subtitle;\n field-sizing: content;\n padding: 0;\n border: none;\n outline: none;\n caret-color: var(--border-color-focus);\n color: var(--txt-01);\n font-family: Manrope;\n font-size: 20px;\n font-weight: 500;\n line-height: 28px;\n letter-spacing: -0.2px;\n margin-block-end: -4px;\n max-inline-size: 100%;\n text-overflow: ellipsis;\n\n &::placeholder {\n color: var(--txt-03);\n }\n }\n\n .editIcon {\n visibility: hidden;\n position: fixed;\n position-anchor: --pl-block-page-subtitle;\n position-area: center inline-end;\n inset-inline-start: 4px;\n }\n &:hover,\n &:focus-within {\n .editIcon {\n visibility: visible;\n }\n }\n}\n</style>\n"],"mappings":";;;;;;;;CAGE,MAAM;;;;;;;;;;;;EAWR,IAAM,IAAQ,GAAU,EAElB,IAAQ,GAoBR,IAAW,EAAmB,GAAC,WAAW,EAE1C,IAAS,GAAc,EAEvB,IAAqB,QACrB,OAAO,EAAM,eAAgB,WACxB;GAAE,SAAS,EAAM;GAAa,GAAG,EAAqB;GAAS,GAEjE,EAAM,YACb,EAEI,IAAiB,EAAe,iBAAiB;SAEvD,QAAkB;AAChB,KAA+B,QAAQ,EAAe;IACtD,kBAIA,EAyBM,OAAA,EAzBD,OAAK,EAAA,CAAC,qCAAmC,EAAA,eAA0B,EAAM,eAAa,CAAA,CAAA,EAAA,EAAA,CAC9E,EAAA,EAAK,CAAC,SAAS,EAAM,SAAA,GAAA,EAAhC,EAgBM,OAAA;;GAhBkC,OAAK,EAAE,EAAA,EAAM,CAAC,OAAM;MAC1D,EAUM,OAVN,GAUM,CATJ,EAIM,OAJN,GAIM,CAHQ,EAAA,EAAK,CAAC,SAAA,GAAA,EAAlB,EAAqD,QAAA,GAAA,CAA5B,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,GAAA,EAC9C,EAAqC,QAAA,GAAA,EAArB,EAAM,MAAK,EAAA,EAAA,GAC3B,EAA2B,EAAA,QAAA,cAAA,CAAA,CAAA,EAE7B,EAGM,OAHN,GAGM,CAFJ,EAA2E,OAAA;YAAlE;GAAJ,KAAI;GAAiB,OAAM;iBAChC,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA,EAGf,EAAA,UAAa,KAAA,iBAAA,GAAA,EAAxB,EAGM,OAAA;;GAH8B,OAAK,EAAE,EAAA,EAAM,CAAC,SAAQ;QACxD,EAA+E,SAAA;4CAA7C,QAAA;GAAG,aAAa,EAAM;;;GAA9B,EAAA;;;IAAX,MAAR;IAAa,MAAb;;OACP,EAAsE,EAAA,EAAA,EAAA;GAA3D,OAAK,EAAE,EAAA,EAAM,CAAC,SAAQ;GAAE,MAAK;GAAO,OAAM;6CAGzD,EAAc,OAAA,EAAA,GACd,EAKM,OALN,GAKM,CAAA,EAJJ,EAAyE,EAAA,EAAA,EAAA,EAAA,EAAtB,EAAA,MAAkB,CAAA,EAAA,MAAA,GAAA,EAAA,CAAA,CAAA,GAA9C,EAAA,MAAkB,CAAA,CAAA,EACzC,EAEM,OAAA,EAFA,OAAK,EAAA,EAAA,SAAa,EAAA,QAAkB,SAAA,YAAA,CAAA,EAAA,EAAA,CACxC,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA"}

package/dist/layout/PlBlockPage/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import "./PlBlockPage.js";
2	+ import "./usePlBlockPageTitleTeleportTarget.js";

package/dist/layout/PlContainer/index.js ADDED Viewed

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

package/dist/layout/PlGrid/index.js ADDED Viewed

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

package/dist/layout/PlPlaceholder/PlPlaceholder.vue.css CHANGED Viewed

	@@ -1 +1 @@
1	- ._root_xfknp_2{~~-webkit-~~user-select:none;~~user-select:none;~~background-color:var(--bg-elevated-01);block-size:100%;inline-size:100%;position:relative}._background_xfknp_10{pointer-events:none;animation-name:_slide_xfknp_1;animation-duration:5s;animation-iteration-count:infinite;position:absolute;inset:0~~;-webkit-~~mask:linear-gradient(#0000 35%,#000 40% 60%,#0000 65%) 0 0/100% 300~~%;mask:linear-gradient(#0000 35%,#000 40% 60%,#0000 65%) 0 0/100% 300%}._background_xfknp_10.~~_table_xfknp_19{background-image:paint(pl-placeholder-table-skeleton)}~~._background_xfknp_10.~~_graph_xfknp_22{background-image:paint(pl-placeholder-graph-skeleton)}._content_xfknp_27{flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}._text_xfknp_37{-webkit-text-stroke-color:white;-webkit-text-stroke-width:4px;paint-order:stroke;flex-direction:column;align-items:center;gap:4px;display:flex}._title_xfknp_47{color:var(--txt-03);letter-spacing:-.2px;font-size:20px;font-weight:500;line-height:24px}._subtitle_xfknp_55{color:var(--txt-03);font-weight:500;line-height:20px;display:grid~~}._subtitle_xfknp_55~~ span{text-align:center;animation-name:_active-subtitle_xfknp_1;animation-duration:calc(6s * sibling-count());animation-iteration-count:infinite;animation-timing-function:steps(sibling-count(), jump-none);visibility:if(style(--pl-placeholder-active-subtitle: sibling-index()): visible; else: hidden;);grid-area:1/1}@keyframes _slide_xfknp_1{0%{~~-webkit-~~mask-position:0 100~~%;mask-position:0 100~~%}}@keyframes _active-subtitle_xfknp_1{0%{--pl-placeholder-active-subtitle:1}to{--pl-placeholder-active-subtitle:sibling-count()}}@property --pl-placeholder-active-subtitle{syntax:"<number>";inherits:false;initial-value:1}
1	+ ._root_xfknp_2{user-select:none;background-color:var(--bg-elevated-01);block-size:100%;inline-size:100%;position:relative}._background_xfknp_10{pointer-events:none;animation-name:_slide_xfknp_1;animation-duration:5s;animation-iteration-count:infinite;position:absolute;inset:0;mask:linear-gradient(#0000 35%,#000 40% 60%,#0000 65%) 0 0/100% 300%;&._table_xfknp_19{background-image:paint(pl-placeholder-table-skeleton)}&._graph_xfknp_22{background-image:paint(pl-placeholder-graph-skeleton)}}._content_xfknp_27{flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}._text_xfknp_37{-webkit-text-stroke-color:white;-webkit-text-stroke-width:4px;paint-order:stroke;flex-direction:column;align-items:center;gap:4px;display:flex}._title_xfknp_47{color:var(--txt-03);letter-spacing:-.2px;font-size:20px;font-weight:500;line-height:24px}._subtitle_xfknp_55{color:var(--txt-03);font-weight:500;line-height:20px;display:grid;& span{text-align:center;animation-name:_active-subtitle_xfknp_1;animation-duration:calc(6s * sibling-count());animation-iteration-count:infinite;animation-timing-function:steps(sibling-count(), jump-none);visibility:if(style(--pl-placeholder-active-subtitle: sibling-index()): visible; else: hidden;);grid-area:1/1}}@keyframes _slide_xfknp_1{0%{mask-position:0 100%}}@keyframes _active-subtitle_xfknp_1{0%{--pl-placeholder-active-subtitle:1}to{--pl-placeholder-active-subtitle:sibling-count()}}@property --pl-placeholder-active-subtitle{syntax:"<number>";inherits:false;initial-value:1}

package/dist/layout/PlRow/index.js ADDED Viewed

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

package/dist/layout/PlSpacer/index.js ADDED Viewed

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

package/dist/utils/DoubleContour.style.css CHANGED Viewed

	@@ -1 +1 @@
1	- .double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-left-radius:0;border-top-right-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.top-right>div{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.bottom-left>div{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.bottom-right>div{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}.double-contour.middle>div{border-radius:0}
1	+ .double-contour{&.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}}.double-contour{&.bottom>div{border-top-left-radius:0;border-top-right-radius:0}}.double-contour{&.left>div{border-top-right-radius:0;border-bottom-right-radius:0}}.double-contour{&.right>div{border-top-left-radius:0;border-bottom-left-radius:0}}.double-contour{&.top-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}}.double-contour{&.top-right>div{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}}.double-contour{&.bottom-left>div{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}}.double-contour{&.bottom-right>div{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}}.double-contour{&.middle>div{border-radius:0}}

package/dist/utils/DropdownOverlay/index.js ADDED Viewed

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

package/dist/utils/PlCloseModalBtn.vue.css CHANGED Viewed

	@@ -1 +1 @@
1	- ._component_grelk_1{cursor:pointer;border-radius:12px;place-content:center;place-items:center;width:40px;height:40px;display:flex}._component_grelk_1:hover{background-color:var(--btn-sec-hover-grey);transition:all .1s ease-in-out}._component_grelk_1>div{background-color:var(--ic-01);width:24px;height:24px~~;-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~~}
1	+ ._component_grelk_1{cursor:pointer;border-radius:12px;place-content:center;place-items:center;width:40px;height:40px;display:flex}._component_grelk_1:hover{background-color:var(--btn-sec-hover-grey);transition:all .1s ease-in-out}._component_grelk_1>div{background-color:var(--ic-01);width:24px;height:24px;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}

package/package.json CHANGED Viewed

@@ -1,10 +1,7 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.10.39",
+  "version": "2.10.41",
   "type": "module",
-  "sideEffects": [
-    "**/*.css"
-  ],
   "main": "dist/index.js",
   "exports": {
     ".": {
@@ -43,9 +40,9 @@
     "svgo": "^3.3.2",
     "typescript": "~5.9.3",
     "vitest": "^4.0.18",
-    "@milaboratories/ts-builder": "1.2.13",
+    "@milaboratories/ts-builder": "1.3.0",
     "@milaboratories/ts-configs": "1.2.2",
-    "@milaboratories/build-configs": "1.5.1"
+    "@milaboratories/build-configs": "1.5.2"
   },
   "scripts": {
     "dev": "ts-builder serve --target browser-lib --build-config ./build.browser-lib.config.js",

package/src/components/PlAlert/PlAlert.vue CHANGED Viewed

@@ -7,6 +7,8 @@ export default {
 <script lang="ts" setup>
 import "./pl-alert.scss";
+import PlCloseModalBtn from "../../utils/PlCloseModalBtn.vue";
 defineEmits<{
   /**
    * Emitted when the model value is updated, typically when the close button is clicked.
@@ -89,11 +91,9 @@ const iconMap = {
       <label v-if="label">{{ label }}</label>
       <div class="pl-alert__main__text"><slot /></div>
     </div>
-    <div
+    <PlCloseModalBtn
       v-if="closeable"
       class="pl-alert__close-btn"
-      aria-label="Close alert"
-      role="button"
       @click="$emit('update:modelValue', false)"
     />
   </div>