npm - @milaboratories/uikit - Versions diffs - 2.6.1 → 2.6.3 - Mend

@milaboratories/uikit 2.6.1 → 2.6.3

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderRange.vue.js","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(() => [leftDelta.value, rightDelta.value].sort((a, b) => a - b).join('-'));\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(() => clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max));\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(clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max));\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort((a, b) => a - b);\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(clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max));\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort((a, b) => a - b);\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' ? props.step * 1 : e.code === 'ArrowDown' \|\| e.code === 'ArrowLeft' ? props.step * -1 : 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\">{{ textModelValue }}</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 v-for=\"(item, index) in breakpointsRef\" :key=\"index\" :style=\"{ right: `${item}%` }\" class=\"ui-slider__thumb-step\"/>\n </template>\n <div ref=\"thumbRef1\" :style=\"thumbStyle1\" class=\"ui-slider__thumb\" tabindex=\"0\" @keydown=\"handleKeyPress($event, 0)\">\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div ref=\"thumbRef2\" :style=\"thumbStyle2\" class=\"ui-slider__thumb\" tabindex=\"0\" @keydown=\"handleKeyPress($event, 1)\">\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 v-if=\"props.mode === 'input'\" v-model=\"inputRange\" class=\"ui-focused-border\" @change=\"setModelValue\" />\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"],"names":["slots","useSlots","emit","__emit","props","__props","data","reactive","barRef","ref","thumbRef1","thumbRef2","inputRange","leftDelta","rightDelta","propsRef","computed","breakpointsRef","useSliderBreakpoints","textModelValue","a","b","range","localValue1","clamp","localValue2","error","v","it","getErrorMessage","position1","position2","leftRight","getLeftAndRight","progressStyle","thumbStyle1","thumbStyle2","watch","value","useMouseCapture","ev","tapIf","_a","unref","rect","dx","round","setModelValue","point1","point2","handleKeyPress","e","index","nextStep","arr"],"mappings":"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"}
1	+ {"version":3,"file":"SliderRange.vue.js","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(() => [leftDelta.value, rightDelta.value].sort((a, b) => a - b).join('-'));\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(() => clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max));\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(clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max));\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort((a, b) => a - b);\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(clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max));\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort((a, b) => a - b);\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' ? props.step * 1 : e.code === 'ArrowDown' \|\| e.code === 'ArrowLeft' ? props.step * -1 : 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\">{{ textModelValue }}</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 v-for=\"(item, index) in breakpointsRef\" :key=\"index\" :style=\"{ right: `${item}%` }\" class=\"ui-slider__thumb-step\"/>\n </template>\n <div ref=\"thumbRef1\" :style=\"thumbStyle1\" class=\"ui-slider__thumb\" tabindex=\"0\" @keydown=\"handleKeyPress($event, 0)\">\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div ref=\"thumbRef2\" :style=\"thumbStyle2\" class=\"ui-slider__thumb\" tabindex=\"0\" @keydown=\"handleKeyPress($event, 1)\">\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 v-if=\"props.mode === 'input'\" v-model=\"inputRange\" class=\"ui-focused-border\" @change=\"setModelValue\" />\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"],"names":["slots","useSlots","emit","__emit","props","__props","data","reactive","barRef","ref","thumbRef1","thumbRef2","inputRange","leftDelta","rightDelta","propsRef","computed","breakpointsRef","useSliderBreakpoints","textModelValue","a","b","range","localValue1","clamp","localValue2","error","v","it","getErrorMessage","position1","position2","leftRight","getLeftAndRight","progressStyle","thumbStyle1","thumbStyle2","watch","value","useMouseCapture","ev","tapIf","_a","unref","rect","dx","round","setModelValue","point1","point2","handleKeyPress","e","index","nextStep","arr","_createElementBlock","_createElementVNode","_normalizeClass","_hoisted_1","_hoisted_2","_openBlock","_hoisted_3","_unref","_createBlock","PlTooltip","_renderSlot","_ctx","_hoisted_4","_toDisplayString","_hoisted_5","_hoisted_6","_hoisted_7","_Fragment","_renderList","item","_cache","$event","_hoisted_8","InputRange","_hoisted_9"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,UAAMA,IAAQC,EAAA,GAERC,IAAOC,GAEPC,IAAQC,GA2BRC,IAAOC,EAAS;AAAA,MACpB,aAAa;AAAA,MACb,aAAa;AAAA,IAAA,CACd,GAEKC,IAASC,EAAA,GACTC,IAAYD,EAAA,GACZE,IAAYF,EAAA,GACZG,IAAaH,EAAsBL,EAAM,UAAU,GACnDS,IAAYJ,EAAIL,EAAM,WAAW,CAAC,CAAC,GACnCU,IAAaL,EAAIL,EAAM,WAAW,CAAC,CAAC,GAEpCW,IAAWC,EAAS,MAAMZ,CAAK,GAE/Ba,IAAiBC,GAAqBH,CAAQ,GAE9CI,IAAiBH,EAAS,MAAM,CAACH,EAAU,OAAOC,EAAW,KAAK,EAAE,KAAK,CAACM,GAAGC,MAAMD,IAAIC,CAAC,EAAE,KAAK,GAAG,CAAC,GAEnGC,IAAQN,EAAS,MAAMZ,EAAM,MAAMA,EAAM,GAAG,GAE5CmB,IAAcP,EAAS,MACpBQ,GAAOpB,EAAM,WAAW,CAAC,KAAK,KAAKE,EAAK,aAAaF,EAAM,KAAKA,EAAM,GAAG,CACjF,GAEKqB,IAAcT,EAAS,MAAMQ,GAAOpB,EAAM,WAAW,CAAC,KAAK,KAAKE,EAAK,aAAaF,EAAM,KAAKA,EAAM,GAAG,CAAC,GAEvGsB,IAAQV,EAAS,MAAM;AAC3B,YAAMW,IAAIvB,EAAM;AAIhB,aAFqB,MAAM,QAAQuB,CAAC,KAAKA,EAAE,WAAW,KAAKA,EAAE,MAAM,CAACC,MAAO,OAAO,SAASA,CAAE,CAAC,IAMvFC,GAAgBzB,EAAM,KAAK,IAHzB;AAAA,IAIX,CAAC,GAEK0B,IAAYd,EAAS,OACjBO,EAAY,QAAQnB,EAAM,OAAOkB,EAAM,KAChD,GAEKS,IAAYf,EAAS,OACjBS,EAAY,QAAQrB,EAAM,OAAOkB,EAAM,KAChD,GAEKU,IAAYhB,EAAS,MAAMiB,GAAiB,GAE5CC,IAAgBlB,EAAS,OAAO;AAAA,MACpC,OAAOgB,EAAU,MAAM,CAAC,IAAI;AAAA,MAC5B,MAAM,MAAMA,EAAU,MAAM,CAAC,IAAI;AAAA,IAAA,EACjC,GAEIG,IAAcnB,EAAS,OAAO;AAAA,MAClC,OAAO,KAAK,MAAM,IAAIc,EAAU,SAAS,GAAG,IAAI;AAAA,IAAA,EAChD,GAEIM,IAAcpB,EAAS,OAAO;AAAA,MAClC,OAAO,KAAK,MAAM,IAAIe,EAAU,SAAS,GAAG,IAAI;AAAA,IAAA,EAChD;AAEF,IAAAM;AAAA,MACE,MAAMjC,EAAM;AAAA,MACZ,CAACkC,MAA4B;AAC3B,QAAA1B,EAAW,QAAQ0B,GACnBzB,EAAU,QAAQ,CAACyB,EAAM,CAAC,GAC1BxB,EAAW,QAAQ,CAACwB,EAAM,CAAC;AAAA,MAC7B;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGpBC,EAAgB7B,GAAW,CAAC8B,MAAO;;AACjC,MAAAC,GAAMC,IAAAC,EAAMnC,CAAM,MAAZ,gBAAAkC,EAAe,yBAAyB,CAACE,MAAS;AACtD,cAAM,EAAE,IAAAC,MAAOL;AAEf,QAAAlC,EAAK,cAAeuC,IAAKD,EAAK,QAAStB,EAAM,OAE7CT,EAAU,QAAQiC,EAAMtB,GAAOpB,EAAM,WAAW,CAAC,KAAK,KAAKE,EAAK,aAAaF,EAAM,KAAKA,EAAM,GAAG,CAAC,GAElGQ,EAAW,QAAS,CAACC,EAAU,OAAOC,EAAW,KAAK,EAAuB,KAAK,CAACM,GAAGC,MAAMD,IAAIC,CAAC,GAE7FmB,EAAG,SACLO,EAAc,CAACD,EAAMvB,EAAY,KAAK,GAAGuB,EAAMrB,EAAY,KAAK,CAAC,CAAC,GAClEnB,EAAK,cAAc;AAAA,MAEvB,CAAC;AAAA,IACH,CAAC,GAEDiC,EAAgB5B,GAAW,CAAC6B,MAAO;;AACjC,MAAAC,GAAMC,IAAAC,EAAMnC,CAAM,MAAZ,gBAAAkC,EAAe,yBAAyB,CAACE,MAAS;AACtD,cAAM,EAAE,IAAAC,MAAOL;AAEf,QAAAlC,EAAK,cAAeuC,IAAKD,EAAK,QAAStB,EAAM,OAE7CR,EAAW,QAAQgC,EAAMtB,GAAOpB,EAAM,WAAW,CAAC,KAAK,KAAKE,EAAK,aAAaF,EAAM,KAAKA,EAAM,GAAG,CAAC,GAEnGQ,EAAW,QAAS,CAACC,EAAU,OAAOC,EAAW,KAAK,EAAuB,KAAK,CAACM,GAAGC,MAAMD,IAAIC,CAAC,GAE7FmB,EAAG,SACLO,EAAc,CAACD,EAAMvB,EAAY,KAAK,GAAGuB,EAAMrB,EAAY,KAAK,CAAC,CAAC,GAClEnB,EAAK,cAAc;AAAA,MAEvB,CAAC;AAAA,IACH,CAAC;AAED,aAAS2B,IAAkB;AACzB,YAAMe,IAAS,KAAK,MAAM,IAAIlB,EAAU,SAAS,GAAG,GAC9CmB,IAAS,KAAK,MAAM,IAAIlB,EAAU,SAAS,GAAG;AACpD,aAAO,CAACiB,GAAQC,CAAM,EAAE,KAAK,CAAC7B,GAAGC,MAAMD,IAAIC,CAAC;AAAA,IAC9C;AAEA,aAASyB,EAAMR,GAAe;AAC5B,YAAMX,IAAIH,EAAMc,GAAOlC,EAAM,KAAKA,EAAM,GAAG;AAE3C,aAAO,KAAK,OAAOuB,IAAI,OAAO,YAAY,IAAIvB,EAAM,KAAK,KAAK,IAAIA,EAAM;AAAA,IAC1E;AAEA,aAAS2C,EAAcT,GAAyB;AAC9C,MAAApC,EAAK,qBAAqBoC,CAAK;AAAA,IACjC;AAEA,aAASY,EAAeC,GAA6CC,GAAe;AAClF,MAAI,CAAC,aAAa,WAAW,cAAc,aAAa,OAAO,EAAE,SAASD,EAAE,IAAI,KAC9EA,EAAE,eAAA;AAGJ,YAAME,IACFF,EAAE,SAAS,aAAaA,EAAE,SAAS,eAAe/C,EAAM,OAAO,IAAI+C,EAAE,SAAS,eAAeA,EAAE,SAAS,cAAc/C,EAAM,OAAO,KAAK,GAEtIkD,IAAwB,CAAC,GAAGlD,EAAM,UAAU;AAClD,MAAAkD,EAAIF,CAAK,IAAI5B,EAAM8B,EAAIF,CAAK,IAAIC,GAAUjD,EAAM,KAAKA,EAAM,GAAG,GAC9D2C,EAAcO,CAAG;AAAA,IACnB;2BAKEC,EA4CM,OAAA;AAAA,MA5CA,UAAOnD,EAAM,WAAQ,wBAA2B,QAAiB,qBAAqB,CAAA;AAAA,IAAA;MAC1FoD,EAoCM,OAAA;AAAA,QApCA,OAAKC,EAAA,CAAA,mBAAqBrD,EAAM,IAAI,IAAU,WAAW,CAAA;AAAA,MAAA;QAC7DoD,EA8BM,OA9BNE,IA8BM;AAAA,UA7BJF,EAUM,OAVNG,IAUM;AAAA,YATStD,EAAA,SAAbuD,EAAA,GAAAL,EAOQ,SAPRM,IAOQ;AAAA,cANNL,EAAwB,gBAAfnD,EAAA,KAAK,GAAA,CAAA;AAAA,cACGyD,EAAA9D,CAAA,EAAM,gBAAvB+D,EAIYD,EAAAE,EAAA,GAAA;AAAA;gBAJoB,OAAM;AAAA,gBAAO,UAAS;AAAA,cAAA;gBACzC,WACT,MAAuB;AAAA,kBAAvBC,GAAuBC,EAAA,QAAA,SAAA;AAAA,gBAAA;;;;YAIlB9D,EAAM,SAAI,eAArBmD,EAAmG,OAAnGY,IAAmGC,EAAvBjD,EAAA,KAAc,GAAA,CAAA;;UAE5FqC,EAiBM,OAjBNa,IAiBM;AAAA,YAhBJb,EAIM,OAJNc,IAIM;AAAA,cAHJd,EAEM,OAAA;AAAA,yBAFG;AAAA,gBAAJ,KAAIhD;AAAA,gBAAS,OAAM;AAAA,cAAA;gBACtBgD,EAA0D,OAAA;AAAA,kBAArD,OAAM;AAAA,kBAAuB,SAAOtB,EAAA,KAAa;AAAA,gBAAA;;;YAG1DsB,EAUM,OAVNe,IAUM;AAAA,cATYnE,EAAM,eACpBwD,EAAA,EAAA,GAAAL,EAAwHiB,IAAA,EAAA,KAAA,EAAA,GAAAC,GAA3FX,EAAA7C,CAAA,GAAc,CAA9ByD,GAAMtB,YAAnBG,EAAwH,OAAA;AAAA,gBAA1E,KAAKH;AAAA,gBAAQ,qBAAmBsB,CAAI,KAAA;AAAA,gBAAO,OAAM;AAAA,cAAA;cAEjGlB,EAEM,OAAA;AAAA,yBAFG;AAAA,gBAAJ,KAAI9C;AAAA,gBAAa,SAAOyB,EAAA,KAAW;AAAA,gBAAE,OAAM;AAAA,gBAAmB,UAAS;AAAA,gBAAK,WAAOwC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAE1B,EAAe0B,GAAM,CAAA;AAAA,cAAA;gBAC7GpB,EAAgD,OAAA,EAA3C,OAAM,mCAAA,GAAkC,MAAA,EAAA;AAAA,cAAA;cAE/CA,EAEM,OAAA;AAAA,yBAFG;AAAA,gBAAJ,KAAI7C;AAAA,gBAAa,SAAOyB,EAAA,KAAW;AAAA,gBAAE,OAAM;AAAA,gBAAmB,UAAS;AAAA,gBAAK,WAAOuC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAE1B,EAAe0B,GAAM,CAAA;AAAA,cAAA;gBAC7GpB,EAAgD,OAAA,EAA3C,OAAM,mCAAA,GAAkC,MAAA,EAAA;AAAA,cAAA;;;;QAMrDA,EAEM,OAFNqB,IAEM;AAAA,UADczE,EAAM,SAAI,gBAA5B2D,EAAmHe,IAAA;AAAA;wBAAhElE,EAAA;AAAA,0DAAAA,EAAU,QAAAgE;AAAA,YAAE,OAAM;AAAA,YAAqB,UAAQ7B;AAAA,UAAA;;;MAM3FrB,EAAA,cAAX6B,EAEM,OAFNwB,IAEMX,EADD1C,EAAA,KAAK,GAAA,CAAA;;;;"}

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

@@ -1,6 +1,6 @@
-import { defineComponent as W, useSlots as X, reactive as Y, ref as w, computed as r, onMounted as Z, createElementBlock as h, openBlock as d, normalizeClass as I, createElementVNode as o, createCommentVNode as R, createBlock as ee, toDisplayString as P, unref as m, withCtx as te, renderSlot as le, normalizeStyle as _, Fragment as ae, renderList as ie } from "vue";
-import { useMouseCapture as E } from "../composition/useMouseCapture.js";
-import { tapIf as $ } from "../helpers/functions.js";
+import { defineComponent as W, useSlots as X, reactive as Y, ref as w, computed as r, onMounted as Z, createElementBlock as h, openBlock as d, normalizeClass as P, createElementVNode as o, createCommentVNode as R, createBlock as ee, toDisplayString as T, unref as m, withCtx as te, renderSlot as le, normalizeStyle as _, Fragment as ae, renderList as ie } from "vue";
+import { useMouseCapture as $ } from "../composition/useMouseCapture.js";
+import { tapIf as D } from "../helpers/functions.js";
 import { clamp as c } from "../helpers/math.js";
 import oe from "./PlTooltip/PlTooltip.vue.js";
 import { useSliderBreakpoints as re } from "../composition/useSliderBreakpoints.js";
@@ -27,12 +27,12 @@ const ue = { class: "ui-slider__wrapper" }, ne = { class: "ui-slider__label-sect
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(T, { emit: U }) {
-    const j = X(), H = U, e = T, s = Y({
+  setup(k, { emit: U }) {
+    const j = X(), H = U, e = k, s = Y({
       deltaValue1: 0,
       deltaValue2: 0,
       deltaValue3: 0
-    }), b = w(), p = w(), v = w(), f = w(), n = r(() => e.max - e.min), O = r(() => e), q = re(O), g = r(() => c((e.modelValue[0] ?? 0) + s.deltaValue1, e.min, e.max)), V = r(() => c((e.modelValue[1] ?? 0) + s.deltaValue2, e.min, e.max)), y = r(() => c((e.modelValue[2] ?? 0) + s.deltaValue3, e.min, e.max)), D = r(() => {
+    }), b = w(), p = w(), v = w(), f = w(), n = r(() => e.max - e.min), O = r(() => e), q = re(O), g = r(() => c((e.modelValue[0] ?? 0) + s.deltaValue1, e.min, e.max)), V = r(() => c((e.modelValue[1] ?? 0) + s.deltaValue2, e.min, e.max)), y = r(() => c((e.modelValue[2] ?? 0) + s.deltaValue3, e.min, e.max)), L = r(() => {
       const l = e.modelValue;
       if (!(Array.isArray(l) && l.length === 3 && l.every((a) => Number.isFinite(a))))
         return "Expected model [number, number, number]";
@@ -40,42 +40,42 @@ const ue = { class: "ui-slider__wrapper" }, ne = { class: "ui-slider__label-sect
       return [...e.modelValue].forEach((a) => {
         a > e.max && i.push(`Max model value must be lower than max props ${e.max}.`), a < e.min && i.push("Min model value must be greater than max props.");
       }), i.length > 0 ? i.join(" ") : se(e.error);
-    }), L = r(() => (g.value - e.min) / n.value), K = r(() => (V.value - e.min) / n.value), F = r(() => (y.value - e.min) / n.value), z = r(() => J()), G = r(() => ({
-      right: z.value[0] + "%",
-      left: 100 - z.value[2] + "%"
-    })), k = r(() => ({
-      right: Math.ceil((1 - L.value) * 100) + "%"
+    }), K = r(() => (g.value - e.min) / n.value), F = r(() => (V.value - e.min) / n.value), z = r(() => (y.value - e.min) / n.value), I = r(() => J()), G = r(() => ({
+      right: I.value[0] + "%",
+      left: 100 - I.value[2] + "%"
     })), M = r(() => ({
       right: Math.ceil((1 - K.value) * 100) + "%"
     })), S = r(() => ({
       right: Math.ceil((1 - F.value) * 100) + "%"
+    })), A = r(() => ({
+      right: Math.ceil((1 - z.value) * 100) + "%"
     }));
-    E(p, (l) => {
+    $(p, (l) => {
       var t;
-      $((t = m(b)) == null ? void 0 : t.getBoundingClientRect(), (i) => {
+      D((t = m(b)) == null ? void 0 : t.getBoundingClientRect(), (i) => {
         const { dx: a } = l;
-        s.deltaValue1 = a / i.width * n.value, p.value && A(p.value, e.modelValue[0], s.deltaValue1), l.stop && (x([u(g.value), u(V.value), u(y.value)]), s.deltaValue1 = 0);
+        s.deltaValue1 = a / i.width * n.value, p.value && B(p.value, e.modelValue[0], s.deltaValue1), l.stop && (x([u(g.value), u(V.value), u(y.value)]), s.deltaValue1 = 0);
       });
-    }), E(v, (l) => {
+    }), $(v, (l) => {
       var t;
-      $((t = m(b)) == null ? void 0 : t.getBoundingClientRect(), (i) => {
+      D((t = m(b)) == null ? void 0 : t.getBoundingClientRect(), (i) => {
         const { dx: a } = l;
-        s.deltaValue2 = a / i.width * n.value, v.value && A(v.value, e.modelValue[1], s.deltaValue2), l.stop && (x([u(g.value), u(V.value), u(y.value)]), s.deltaValue2 = 0);
+        s.deltaValue2 = a / i.width * n.value, v.value && B(v.value, e.modelValue[1], s.deltaValue2), l.stop && (x([u(g.value), u(V.value), u(y.value)]), s.deltaValue2 = 0);
       });
-    }), E(f, (l) => {
+    }), $(f, (l) => {
       var t;
-      $((t = m(b)) == null ? void 0 : t.getBoundingClientRect(), (i) => {
+      D((t = m(b)) == null ? void 0 : t.getBoundingClientRect(), (i) => {
         const { dx: a } = l;
-        s.deltaValue3 = a / i.width * n.value, f.value && A(f.value, e.modelValue[2], s.deltaValue3), l.stop && (x([u(g.value), u(V.value), u(y.value)]), s.deltaValue3 = 0);
+        s.deltaValue3 = a / i.width * n.value, f.value && B(f.value, e.modelValue[2], s.deltaValue3), l.stop && (x([u(g.value), u(V.value), u(y.value)]), s.deltaValue3 = 0);
       });
     });
-    function A(l, t, i) {
+    function B(l, t, i) {
       const a = u(c((t ?? 0) + i, e.min, e.max));
-      l.dataset.percent = `${a}${e.measure}`, B();
+      l.dataset.percent = `${a}${e.measure}`, C();
     }
     function J() {
-      const l = Math.ceil((1 - L.value) * 100), t = Math.ceil((1 - K.value) * 100), i = Math.ceil((1 - F.value) * 100);
-      return [l, t, i].sort((a, N) => a - N);
+      const l = Math.ceil((1 - K.value) * 100), t = Math.ceil((1 - F.value) * 100), i = Math.ceil((1 - z.value) * 100);
+      return [l, t, i].sort((a, E) => a - E);
     }
     function u(l) {
       const t = c(l, e.min, e.max);
@@ -84,31 +84,31 @@ const ue = { class: "ui-slider__wrapper" }, ne = { class: "ui-slider__label-sect
     function x(l) {
       H("update:modelValue", l);
     }
-    function B() {
-      const l = Number(k.value.right.substring(0, k.value.right.length - 1)), t = Number(M.value.right.substring(0, M.value.right.length - 1)), i = Number(S.value.right.substring(0, S.value.right.length - 1)), a = [
+    function C() {
+      const l = Number(M.value.right.substring(0, M.value.right.length - 1)), t = Number(S.value.right.substring(0, S.value.right.length - 1)), i = Number(A.value.right.substring(0, A.value.right.length - 1)), a = [
         { r: l, th: p },
         { r: t, th: v },
         { r: i, th: f }
-      ].sort((N, Q) => N.r - Q.r);
+      ].sort((E, Q) => E.r - Q.r);
       a[0].th.value && (a[0].th.value.dataset.hint = "high"), a[1].th.value && (a[1].th.value.dataset.hint = "mid"), a[2].th.value && (a[2].th.value.dataset.hint = "low");
     }
-    function C(l, t) {
+    function N(l, t) {
       ["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Enter"].includes(l.code) && l.preventDefault();
       const i = l.code === "ArrowUp" || l.code === "ArrowRight" ? e.step * 1 : l.code === "ArrowDown" || l.code === "ArrowLeft" ? e.step * -1 : 0, a = [...e.modelValue];
-      a[t] = c(a[t] + i, e.min, e.max), x(a), B();
+      a[t] = c(a[t] + i, e.min, e.max), x(a), C();
     }
     return Z(() => {
-      B();
+      C();
     }), (l, t) => (d(), h("div", {
-      class: I([e.disabled ? "ui-slider__disabled" : void 0, "ui-slider__envelope ui-slider__triple"])
+      class: P([e.disabled ? "ui-slider__disabled" : void 0, "ui-slider__envelope ui-slider__triple"])
     }, [
       o("div", {
-        class: I([`ui-slider__mode-${e.mode}`, "ui-slider"])
+        class: P([`ui-slider__mode-${e.mode}`, "ui-slider"])
       }, [
         o("div", ue, [
           o("div", ne, [
-            l.label ? (d(), h("label", de, [
-              o("span", null, P(l.label), 1),
+            k.label ? (d(), h("label", de, [
+              o("span", null, T(k.label), 1),
               m(j).tooltip ? (d(), ee(m(oe), {
                 key: 0,
                 class: "info",
@@ -143,45 +143,45 @@ const ue = { class: "ui-slider__wrapper" }, ne = { class: "ui-slider__label-sect
               o("div", {
                 ref_key: "thumbRef1",
                 ref: p,
-                style: _(k.value),
+                style: _(M.value),
                 "data-percent": e.modelValue[0] + "%",
                 class: "ui-slider__thumb ui-slider__triple-thumb",
                 r1: "",
                 tabindex: "0",
-                onKeydown: t[0] || (t[0] = (i) => C(i, 0))
-              }, t[3] || (t[3] = [
+                onKeydown: t[0] || (t[0] = (i) => N(i, 0))
+              }, [...t[3] || (t[3] = [
                 o("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)
-              ]), 44, ve),
+              ])], 44, ve),
               o("div", {
                 ref_key: "thumbRef2",
                 ref: v,
-                style: _(M.value),
+                style: _(S.value),
                 "data-percent": e.modelValue[1] + "%",
                 class: "ui-slider__thumb ui-slider__triple-thumb",
                 r2: "",
                 tabindex: "0",
-                onKeydown: t[1] || (t[1] = (i) => C(i, 1))
-              }, t[4] || (t[4] = [
+                onKeydown: t[1] || (t[1] = (i) => N(i, 1))
+              }, [...t[4] || (t[4] = [
                 o("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)
-              ]), 44, fe),
+              ])], 44, fe),
               o("div", {
                 ref_key: "thumbRef3",
                 ref: f,
-                style: _(S.value),
+                style: _(A.value),
                 "data-percent": e.modelValue[2] + "%",
                 class: "ui-slider__thumb ui-slider__triple-thumb",
                 r3: "",
                 tabindex: "0",
-                onKeydown: t[2] || (t[2] = (i) => C(i, 2))
-              }, t[5] || (t[5] = [
+                onKeydown: t[2] || (t[2] = (i) => N(i, 2))
+              }, [...t[5] || (t[5] = [
                 o("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)
-              ]), 44, he)
+              ])], 44, he)
             ])
           ])
         ]),
         t[6] || (t[6] = o("div", { class: "ui-slider__input-wrapper d-flex" }, null, -1))
       ], 2),
-      D.value ? (d(), h("div", _e, P(D.value), 1)) : R("", !0)
+      L.value ? (d(), h("div", _e, T(L.value), 1)) : R("", !0)
     ], 2));
   }
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderRangeTriple.vue.js","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(() => clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max));\nconst localValue2 = computed(() => clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max));\nconst localValue3 = computed(() => clamp((props.modelValue[2] ?? 0) + data.deltaValue3, props.min, props.max));\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' ? props.step * 1 : e.code === 'ArrowDown' \|\| e.code === 'ArrowLeft' ? props.step * -1 : 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 :class=\"props.disabled ? 'ui-slider__disabled' : undefined\" class=\"ui-slider__envelope ui-slider__triple\">\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 v-for=\"(item, index) in breakpointsRef\" :key=\"index\" :style=\"{ right: `${item}%` }\" class=\"ui-slider__thumb-step\"/>\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"],"names":["slots","useSlots","emit","__emit","props","__props","data","reactive","barRef","ref","thumbRef1","thumbRef2","thumbRef3","range","computed","propsRef","breakpointsRef","useSliderBreakpoints","localValue1","clamp","localValue2","localValue3","error","v","it","errors","getErrorMessage","position1","position2","position3","leftRight","getLeftAndRight","progressStyle","thumbStyle1","thumbStyle2","thumbStyle3","useMouseCapture","ev","tapIf","_a","unref","rect","dx","updateDatasetForThumb","setModelValue","round","thumb","modelVal","delta","value","getHint","point1","point2","point3","b","right1","right2","right3","arr","a","handleKeyPress","e","index","nextStep","onMounted"],"mappings":"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"}
1	+ {"version":3,"file":"SliderRangeTriple.vue.js","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(() => clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max));\nconst localValue2 = computed(() => clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max));\nconst localValue3 = computed(() => clamp((props.modelValue[2] ?? 0) + data.deltaValue3, props.min, props.max));\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' ? props.step * 1 : e.code === 'ArrowDown' \|\| e.code === 'ArrowLeft' ? props.step * -1 : 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 :class=\"props.disabled ? 'ui-slider__disabled' : undefined\" class=\"ui-slider__envelope ui-slider__triple\">\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 v-for=\"(item, index) in breakpointsRef\" :key=\"index\" :style=\"{ right: `${item}%` }\" class=\"ui-slider__thumb-step\"/>\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"],"names":["slots","useSlots","emit","__emit","props","__props","data","reactive","barRef","ref","thumbRef1","thumbRef2","thumbRef3","range","computed","propsRef","breakpointsRef","useSliderBreakpoints","localValue1","clamp","localValue2","localValue3","error","v","it","errors","getErrorMessage","position1","position2","position3","leftRight","getLeftAndRight","progressStyle","thumbStyle1","thumbStyle2","thumbStyle3","useMouseCapture","ev","tapIf","_a","unref","rect","dx","updateDatasetForThumb","setModelValue","round","thumb","modelVal","delta","value","getHint","point1","point2","point3","b","right1","right2","right3","arr","a","handleKeyPress","e","index","nextStep","onMounted","_createElementBlock","_createElementVNode","_normalizeClass","_hoisted_1","_hoisted_2","_openBlock","_hoisted_3","_unref","_createBlock","PlTooltip","_renderSlot","_ctx","_hoisted_4","_hoisted_5","_hoisted_6","_Fragment","_renderList","item","_cache","$event","_hoisted_10","_toDisplayString"],"mappings":"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"}

package/dist/components/TabItem.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabItem.vue.js","sources":["../../src/components/TabItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { ListOptionNormalized } from '../types';\n\nconst props = withDefaults(\n defineProps<{\n option: ListOptionNormalized;\n isSelected: boolean;\n isHovered: boolean;\n }>(),\n {\n isSelected: false,\n isHovered: false,\n },\n);\n\nconst label = computed(() => props.option.label);\n\nconst classes = computed<string>(() => {\n const classList: string[] = [];\n if (props.isSelected) {\n classList.push('dropdown-tab-item__selected');\n }\n if (props.isHovered) {\n classList.push('hovered-item');\n }\n return classList.join(' ');\n});\n</script>\n<template>\n <div :class=\"classes\" class=\"dropdown-tab-item\">\n <div class=\"dropdown-tab-item__title text-caps13\">\n {{ label }}\n </div>\n </div>\n</template>\n"],"names":["props","__props","label","computed","classes","classList"],"mappings":";;;;;;;;;AAIA,UAAMA,IAAQC,GAYRC,IAAQC,EAAS,MAAMH,EAAM,OAAO,KAAK,GAEzCI,IAAUD,EAAiB,MAAM;AACrC,YAAME,IAAsB,CAAA;AAC5B,aAAIL,EAAM,cACRK,EAAU,KAAK,6BAA6B,GAE1CL,EAAM,aACRK,EAAU,KAAK,cAAc,GAExBA,EAAU,KAAK,GAAG;AAAA,IAC3B,CAAC~~;;;;;;;;~~"}
1	+ {"version":3,"file":"TabItem.vue.js","sources":["../../src/components/TabItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { ListOptionNormalized } from '../types';\n\nconst props = withDefaults(\n defineProps<{\n option: ListOptionNormalized;\n isSelected: boolean;\n isHovered: boolean;\n }>(),\n {\n isSelected: false,\n isHovered: false,\n },\n);\n\nconst label = computed(() => props.option.label);\n\nconst classes = computed<string>(() => {\n const classList: string[] = [];\n if (props.isSelected) {\n classList.push('dropdown-tab-item__selected');\n }\n if (props.isHovered) {\n classList.push('hovered-item');\n }\n return classList.join(' ');\n});\n</script>\n<template>\n <div :class=\"classes\" class=\"dropdown-tab-item\">\n <div class=\"dropdown-tab-item__title text-caps13\">\n {{ label }}\n </div>\n </div>\n</template>\n"],"names":["props","__props","label","computed","classes","classList","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_1","_toDisplayString"],"mappings":";;;;;;;;;AAIA,UAAMA,IAAQC,GAYRC,IAAQC,EAAS,MAAMH,EAAM,OAAO,KAAK,GAEzCI,IAAUD,EAAiB,MAAM;AACrC,YAAME,IAAsB,CAAA;AAC5B,aAAIL,EAAM,cACRK,EAAU,KAAK,6BAA6B,GAE1CL,EAAM,aACRK,EAAU,KAAK,cAAc,GAExBA,EAAU,KAAK,GAAG;AAAA,IAC3B,CAAC;2BAGCC,EAIM,OAAA;AAAA,MAJA,OAAKC,EAAA,CAAEH,EAAA,OAAe,mBAAmB,CAAA;AAAA,IAAA;MAC7CI,EAEM,OAFNC,GAEMC,EADDR,EAAA,KAAK,GAAA,CAAA;AAAA,IAAA;;;"}

package/dist/components/ThemeSwitcher.vue.js CHANGED Viewed

@@ -8,9 +8,9 @@ const h = /* @__PURE__ */ m({
       class: i(["ui-theme-switcher", t(o)]),
       onClick: e[0] || (e[0] = //@ts-ignore
       (...r) => t(n) && t(n)(...r))
-    }, e[1] || (e[1] = [
+    }, [...e[1] || (e[1] = [
       u("div", null, null, -1)
-    ]), 2));
+    ])], 2));
   }
 });
 export {

package/dist/components/ThemeSwitcher.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThemeSwitcher.vue.js","sources":["../../src/components/ThemeSwitcher.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTheme } from '../composition/useTheme';\nconst [theme, toggleTheme] = useTheme();\n</script>\n\n<template>\n <div class=\"ui-theme-switcher\" :class=\"theme\" @click=\"toggleTheme\">\n <div />\n </div>\n</template>\n"],"names":["theme","toggleTheme","useTheme"],"mappings":";;;;;AAEA,UAAM,CAACA,GAAOC,CAAW,IAAIC,EAAA~~;;;;;;;;;;~~"}
1	+ {"version":3,"file":"ThemeSwitcher.vue.js","sources":["../../src/components/ThemeSwitcher.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTheme } from '../composition/useTheme';\nconst [theme, toggleTheme] = useTheme();\n</script>\n\n<template>\n <div class=\"ui-theme-switcher\" :class=\"theme\" @click=\"toggleTheme\">\n <div />\n </div>\n</template>\n"],"names":["theme","toggleTheme","useTheme","_createElementBlock","_normalizeClass","_unref","_cache","args","_createElementVNode"],"mappings":";;;;;AAEA,UAAM,CAACA,GAAOC,CAAW,IAAIC,EAAA;2BAI3BC,EAEM,OAAA;AAAA,MAFD,OAAKC,EAAA,CAAC,qBAA4BC,EAAAL,CAAA,CAAK,CAAA;AAAA,MAAG,SAAKM,EAAA,CAAA,MAAAA,EAAA,CAAA;AAAA,gBAAED,EAAAJ,CAAA,KAAAI,EAAAJ,CAAA,EAAA,GAAAM,CAAA;AAAA,IAAA;MACpDC,EAAO,OAAA,MAAA,MAAA,EAAA;AAAA,IAAA;;;"}

package/dist/components/TransitionSlidePanel.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TransitionSlidePanel.vue.js","sources":["../../src/components/TransitionSlidePanel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nfunction onAfterEnter() {\n window.dispatchEvent(new CustomEvent('adjust'));\n}\n\nfunction onAfterLeave() {\n window.dispatchEvent(new CustomEvent('adjust'));\n}\n</script>\n\n<template>\n <Transition name=\"slide-panel\" @after-enter=\"onAfterEnter\" @after-leave=\"onAfterLeave\">\n <slot />\n </Transition>\n</template>\n"],"names":["onAfterEnter","onAfterLeave"],"mappings":";;;;AACA,aAASA,IAAe;AACtB,aAAO,cAAc,IAAI,YAAY,QAAQ,CAAC;AAAA,IAChD;AAEA,aAASC,IAAe;AACtB,aAAO,cAAc,IAAI,YAAY,QAAQ,CAAC;AAAA,IAChD~~;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"TransitionSlidePanel.vue.js","sources":["../../src/components/TransitionSlidePanel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nfunction onAfterEnter() {\n window.dispatchEvent(new CustomEvent('adjust'));\n}\n\nfunction onAfterLeave() {\n window.dispatchEvent(new CustomEvent('adjust'));\n}\n</script>\n\n<template>\n <Transition name=\"slide-panel\" @after-enter=\"onAfterEnter\" @after-leave=\"onAfterLeave\">\n <slot />\n </Transition>\n</template>\n"],"names":["onAfterEnter","onAfterLeave","_createBlock","_Transition","_renderSlot","_ctx"],"mappings":";;;;AACA,aAASA,IAAe;AACtB,aAAO,cAAc,IAAI,YAAY,QAAQ,CAAC;AAAA,IAChD;AAEA,aAASC,IAAe;AACtB,aAAO,cAAc,IAAI,YAAY,QAAQ,CAAC;AAAA,IAChD;2BAIEC,EAEaC,GAAA;AAAA,MAFD,MAAK;AAAA,MAAe,cAAAH;AAAA,MAA4B,cAAAC;AAAA,IAAA;iBAC1D,MAAQ;AAAA,QAARG,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;"}

package/dist/components/VScroll.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VScroll.vue.js","sources":["../../src/components/VScroll.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref, unref } from 'vue';\nimport { useEventListener } from '../composition/useEventListener';\nimport { eventListener } from '../helpers/dom';\n\nconst emit = defineEmits(['update:scrollTop']);\n\nconst props = defineProps<{\n scrollTop: number;\n clientHeight: number;\n scrollHeight: number;\n}>();\n\nconst scrollRef = ref<EventTarget>();\n\nconst ratioRef = computed(() => props.clientHeight / (props.scrollHeight \|\| 1));\n\nconst visibleRef = computed(() => {\n return ratioRef.value < 1;\n});\n\nconst scrollbarStyle = computed(() => {\n const ratio = unref(ratioRef);\n return {\n top: props.scrollTop * ratio + 'px',\n height: Math.floor(props.clientHeight * ratio) + 'px',\n };\n});\n\nuseEventListener(scrollRef, 'pointerdown', (down: PointerEvent) => {\n const s = {\n clientY: down.clientY,\n };\n\n const update = (e: MouseEvent) => {\n const dy = (e.clientY - s.clientY) / ratioRef.value;\n emit('update:scrollTop', props.scrollTop + dy);\n s.clientY = e.clientY;\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const removePointerMove = eventListener(document as any, 'mousemove', update);\n\n ['mouseup', 'pointercancel'].forEach((eventType) => {\n document.addEventListener(eventType, removePointerMove, { once: true });\n });\n});\n</script>\n\n<template>\n <div v-if=\"visibleRef\" ref=\"scrollRef\" class=\"v-scroll\">\n <div class=\"v-scroll__scrollbar\" :style=\"scrollbarStyle\" />\n </div>\n</template>\n"],"names":["emit","__emit","props","__props","scrollRef","ref","ratioRef","computed","visibleRef","scrollbarStyle","ratio","unref","useEventListener","down","s","removePointerMove","eventListener","e","dy","eventType"],"mappings":";;;;;;;;;;;;AAKA,UAAMA,IAAOC,GAEPC,IAAQC,GAMRC,IAAYC,EAAA,GAEZC,IAAWC,EAAS,MAAML,EAAM,gBAAgBA,EAAM,gBAAgB,EAAE,GAExEM,IAAaD,EAAS,MACnBD,EAAS,QAAQ,CACzB,GAEKG,IAAiBF,EAAS,MAAM;AACpC,YAAMG,IAAQC,EAAML,CAAQ;AAC5B,aAAO;AAAA,QACL,KAAKJ,EAAM,YAAYQ,IAAQ;AAAA,QAC/B,QAAQ,KAAK,MAAMR,EAAM,eAAeQ,CAAK,IAAI;AAAA,MAAA;AAAA,IAErD,CAAC;AAED,WAAAE,EAAiBR,GAAW,eAAe,CAACS,MAAuB;AACjE,YAAMC,IAAI;AAAA,QACR,SAASD,EAAK;AAAA,MAAA,GAUVE,IAAoBC,EAAc,UAAiB,aAP1C,CAACC,MAAkB;AAChC,cAAMC,KAAMD,EAAE,UAAUH,EAAE,WAAWR,EAAS;AAC9C,QAAAN,EAAK,oBAAoBE,EAAM,YAAYgB,CAAE,GAC7CJ,EAAE,UAAUG,EAAE;AAAA,MAChB,CAG4E;AAE5E,OAAC,WAAW,eAAe,EAAE,QAAQ,CAACE,MAAc;AAClD,iBAAS,iBAAiBA,GAAWJ,GAAmB,EAAE,MAAM,IAAM;AAAA,MACxE,CAAC;AAAA,IACH,CAAC~~;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"VScroll.vue.js","sources":["../../src/components/VScroll.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref, unref } from 'vue';\nimport { useEventListener } from '../composition/useEventListener';\nimport { eventListener } from '../helpers/dom';\n\nconst emit = defineEmits(['update:scrollTop']);\n\nconst props = defineProps<{\n scrollTop: number;\n clientHeight: number;\n scrollHeight: number;\n}>();\n\nconst scrollRef = ref<EventTarget>();\n\nconst ratioRef = computed(() => props.clientHeight / (props.scrollHeight \|\| 1));\n\nconst visibleRef = computed(() => {\n return ratioRef.value < 1;\n});\n\nconst scrollbarStyle = computed(() => {\n const ratio = unref(ratioRef);\n return {\n top: props.scrollTop * ratio + 'px',\n height: Math.floor(props.clientHeight * ratio) + 'px',\n };\n});\n\nuseEventListener(scrollRef, 'pointerdown', (down: PointerEvent) => {\n const s = {\n clientY: down.clientY,\n };\n\n const update = (e: MouseEvent) => {\n const dy = (e.clientY - s.clientY) / ratioRef.value;\n emit('update:scrollTop', props.scrollTop + dy);\n s.clientY = e.clientY;\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const removePointerMove = eventListener(document as any, 'mousemove', update);\n\n ['mouseup', 'pointercancel'].forEach((eventType) => {\n document.addEventListener(eventType, removePointerMove, { once: true });\n });\n});\n</script>\n\n<template>\n <div v-if=\"visibleRef\" ref=\"scrollRef\" class=\"v-scroll\">\n <div class=\"v-scroll__scrollbar\" :style=\"scrollbarStyle\" />\n </div>\n</template>\n"],"names":["emit","__emit","props","__props","scrollRef","ref","ratioRef","computed","visibleRef","scrollbarStyle","ratio","unref","useEventListener","down","s","removePointerMove","eventListener","e","dy","eventType","_createElementBlock","_createElementVNode"],"mappings":";;;;;;;;;;;;AAKA,UAAMA,IAAOC,GAEPC,IAAQC,GAMRC,IAAYC,EAAA,GAEZC,IAAWC,EAAS,MAAML,EAAM,gBAAgBA,EAAM,gBAAgB,EAAE,GAExEM,IAAaD,EAAS,MACnBD,EAAS,QAAQ,CACzB,GAEKG,IAAiBF,EAAS,MAAM;AACpC,YAAMG,IAAQC,EAAML,CAAQ;AAC5B,aAAO;AAAA,QACL,KAAKJ,EAAM,YAAYQ,IAAQ;AAAA,QAC/B,QAAQ,KAAK,MAAMR,EAAM,eAAeQ,CAAK,IAAI;AAAA,MAAA;AAAA,IAErD,CAAC;AAED,WAAAE,EAAiBR,GAAW,eAAe,CAACS,MAAuB;AACjE,YAAMC,IAAI;AAAA,QACR,SAASD,EAAK;AAAA,MAAA,GAUVE,IAAoBC,EAAc,UAAiB,aAP1C,CAACC,MAAkB;AAChC,cAAMC,KAAMD,EAAE,UAAUH,EAAE,WAAWR,EAAS;AAC9C,QAAAN,EAAK,oBAAoBE,EAAM,YAAYgB,CAAE,GAC7CJ,EAAE,UAAUG,EAAE;AAAA,MAChB,CAG4E;AAE5E,OAAC,WAAW,eAAe,EAAE,QAAQ,CAACE,MAAc;AAClD,iBAAS,iBAAiBA,GAAWJ,GAAmB,EAAE,MAAM,IAAM;AAAA,MACxE,CAAC;AAAA,IACH,CAAC,aAIYP,EAAA,cAAXY,EAEM,OAAA;AAAA;eAFqB;AAAA,MAAJ,KAAIhB;AAAA,MAAY,OAAM;AAAA,IAAA;MAC3CiB,EAA2D,OAAA;AAAA,QAAtD,OAAM;AAAA,QAAuB,SAAOZ,EAAA,KAAc;AAAA,MAAA;;;;"}

package/dist/components/contextMenu/Menu.vue2.js CHANGED Viewed

@@ -1,25 +1,25 @@
-import { defineComponent as l, createElementBlock as t, openBlock as n, Fragment as p, renderList as m, withModifiers as a, createElementVNode as _, toDisplayString as u } from "vue";
-const d = { class: "context-menu" }, k = ["onClick"], x = /* @__PURE__ */ l({
+import { defineComponent as m, createElementBlock as e, openBlock as t, Fragment as p, renderList as a, withModifiers as u, createElementVNode as _, toDisplayString as d } from "vue";
+const k = { class: "context-menu" }, f = ["onClick"], v = /* @__PURE__ */ m({
   __name: "Menu",
   props: {
     options: {}
   },
   emits: ["close"],
-  setup(f, { emit: s }) {
-    const i = s, c = (e) => {
-      e.cb(), i("close");
+  setup(s, { emit: i }) {
+    const c = i, r = (n) => {
+      n.cb(), c("close");
     };
-    return (e, h) => (n(), t("div", d, [
-      (n(!0), t(p, null, m(e.options, (o, r) => (n(), t("div", {
-        key: r,
-        onClick: a((C) => c(o), ["stop"])
+    return (n, h) => (t(), e("div", k, [
+      (t(!0), e(p, null, a(s.options, (o, l) => (t(), e("div", {
+        key: l,
+        onClick: u((x) => r(o), ["stop"])
       }, [
-        _("span", null, u(o.text), 1)
-      ], 8, k))), 128))
+        _("span", null, d(o.text), 1)
+      ], 8, f))), 128))
     ]));
   }
 });
 export {
-  x as default
+  v as default
 };
 //# sourceMappingURL=Menu.vue2.js.map

package/dist/components/contextMenu/Menu.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.vue2.js","sources":["../../../src/components/contextMenu/Menu.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextOption } from './types';\n\nconst emit = defineEmits(['close']);\n\ndefineProps<{\n options: readonly ContextOption[];\n}>();\n\nconst onClickOption = (opt: ContextOption) => {\n opt.cb();\n emit('close');\n};\n</script>\n\n<template>\n <div class=\"context-menu\">\n <div v-for=\"(opt, i) in options\" :key=\"i\" @click.stop=\"onClickOption(opt)\">\n <span>{{ opt.text }}</span>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.context-menu {\n display: block;\n position: absolute;\n top: 50px;\n left: 50px;\n z-index: var(--z-context-menu);\n\n margin: 0;\n padding: 3px 0 4px;\n\n background: rgba(255, 255, 255, 0.95);\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.35);\n border-radius: 4px;\n\n font-family:\n Lucida Grande,\n sans-serif;\n font-size: 14px;\n line-height: 15px;\n\n &::before {\n display: block;\n position: absolute;\n content: '';\n top: -1px;\n left: -1px;\n bottom: -1px;\n right: -1px;\n\n border-radius: 4px;\n border: 1px solid rgba(0, 0, 0, 0.125);\n z-index: -1;\n }\n\n hr {\n border: none;\n height: 1px;\n background: rgba(0, 0, 0, 0.1);\n margin: 6px 1px 5px;\n padding: 0;\n }\n\n > div {\n display: block;\n padding: 0 20px;\n border-top: 1px solid rgba(0, 0, 0, 0);\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n\n span {\n vertical-align: 2px;\n user-select: none;\n }\n\n &:hover {\n background: -webkit-linear-gradient(top, #648bf5, #2866f2);\n background: linear-gradient(to bottom, #648bf5 0%, #2866f2 100%);\n border-top: 1px solid #5a82eb;\n border-bottom: 1px solid #1758e7;\n }\n\n &:hover::after {\n color: #fff;\n }\n }\n}\n</style>\n"],"names":["emit","__emit","onClickOption","opt"],"mappings":";;;;;;;;AAGA,UAAMA,IAAOC,GAMPC,IAAgB,CAACC,MAAuB;AAC5C,MAAAA,EAAI,GAAA,GACJH,EAAK,OAAO;AAAA,IACd~~;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"Menu.vue2.js","sources":["../../../src/components/contextMenu/Menu.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextOption } from './types';\n\nconst emit = defineEmits(['close']);\n\ndefineProps<{\n options: readonly ContextOption[];\n}>();\n\nconst onClickOption = (opt: ContextOption) => {\n opt.cb();\n emit('close');\n};\n</script>\n\n<template>\n <div class=\"context-menu\">\n <div v-for=\"(opt, i) in options\" :key=\"i\" @click.stop=\"onClickOption(opt)\">\n <span>{{ opt.text }}</span>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.context-menu {\n display: block;\n position: absolute;\n top: 50px;\n left: 50px;\n z-index: var(--z-context-menu);\n\n margin: 0;\n padding: 3px 0 4px;\n\n background: rgba(255, 255, 255, 0.95);\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.35);\n border-radius: 4px;\n\n font-family:\n Lucida Grande,\n sans-serif;\n font-size: 14px;\n line-height: 15px;\n\n &::before {\n display: block;\n position: absolute;\n content: '';\n top: -1px;\n left: -1px;\n bottom: -1px;\n right: -1px;\n\n border-radius: 4px;\n border: 1px solid rgba(0, 0, 0, 0.125);\n z-index: -1;\n }\n\n hr {\n border: none;\n height: 1px;\n background: rgba(0, 0, 0, 0.1);\n margin: 6px 1px 5px;\n padding: 0;\n }\n\n > div {\n display: block;\n padding: 0 20px;\n border-top: 1px solid rgba(0, 0, 0, 0);\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n\n span {\n vertical-align: 2px;\n user-select: none;\n }\n\n &:hover {\n background: -webkit-linear-gradient(top, #648bf5, #2866f2);\n background: linear-gradient(to bottom, #648bf5 0%, #2866f2 100%);\n border-top: 1px solid #5a82eb;\n border-bottom: 1px solid #1758e7;\n }\n\n &:hover::after {\n color: #fff;\n }\n }\n}\n</style>\n"],"names":["emit","__emit","onClickOption","opt","_openBlock","_createElementBlock","_hoisted_1","_Fragment","_renderList","__props","i","_withModifiers","$event","_createElementVNode","_toDisplayString"],"mappings":";;;;;;;;AAGA,UAAMA,IAAOC,GAMPC,IAAgB,CAACC,MAAuB;AAC5C,MAAAA,EAAI,GAAA,GACJH,EAAK,OAAO;AAAA,IACd;sBAIEI,EAAA,GAAAC,EAIM,OAJNC,GAIM;AAAA,OAHJF,EAAA,EAAA,GAAAC,EAEME,GAAA,MAAAC,EAFkBC,EAAA,SAAO,CAAlBN,GAAKO,YAAlBL,EAEM,OAAA;AAAA,QAF4B,KAAKK;AAAA,QAAI,SAAKC,EAAA,CAAAC,MAAOV,EAAcC,CAAG,GAAA,CAAA,MAAA,CAAA;AAAA,MAAA;QACtEU,EAA2B,QAAA,MAAAC,EAAlBX,EAAI,IAAI,GAAA,CAAA;AAAA,MAAA;;;;"}