npm - @milaboratories/uikit - Versions diffs - 2.15.36 → 2.15.38 - Mend

@milaboratories/uikit 2.15.36 → 2.15.38

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

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
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 data-testid=\"pl-slider-range-triple\"\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\" data-testid=\"pl-slider-range-triple-label\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"slots.tooltip\"\n data-testid=\"pl-slider-range-triple-tooltip\"\n class=\"info\"\n position=\"top\"\n >\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\" data-testid=\"pl-slider-range-triple-bar\" class=\"ui-slider__bar\">\n <div\n data-testid=\"pl-slider-range-triple-progress\"\n class=\"ui-slider__progress\"\n :style=\"progressStyle\"\n />\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 data-testid=\"pl-slider-range-triple-step\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef1\"\n data-testid=\"pl-slider-range-triple-thumb\"\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 data-testid=\"pl-slider-range-triple-thumb\"\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 data-testid=\"pl-slider-range-triple-thumb\"\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\" data-testid=\"pl-slider-range-triple-error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n\n<style></style>\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabItem.js","names":[],"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"],"mappings":""}
1	+ {"version":3,"file":"TabItem.js","names":[],"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 data-testid=\"pl-tab-item\" :class=\"classes\" class=\"dropdown-tab-item\">\n <div data-testid=\"pl-tab-item-title\" class=\"dropdown-tab-item__title text-caps13\">\n {{ label }}\n </div>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/TabItem.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/TabItem.vue"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErD,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,oBAAoB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;~~AA2DJ~~,QAAA,MAAM,YAAY;~~gBA7DF~~,OAAO;eACR,OAAO;~~6EA+DpB~~,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
1	+ {"version":3,"file":"TabItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/TabItem.vue"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErD,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,oBAAoB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AA6DJ,QAAA,MAAM,YAAY;gBA/DF,OAAO;eACR,OAAO;6EAiEpB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1,6 +1,9 @@
 import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, toDisplayString as o } from "vue";
 //#region src/components/TabItem.vue?vue&type=script&setup=true&lang.ts
-var s = { class: "dropdown-tab-item__title text-caps13" }, c = /* @__PURE__ */ r({
+var s = {
+	"data-testid": "pl-tab-item-title",
+	class: "dropdown-tab-item__title text-caps13"
+}, c = /* @__PURE__ */ r({
 	__name: "TabItem",
 	props: {
 		option: {},
@@ -18,7 +21,10 @@ var s = { class: "dropdown-tab-item__title text-caps13" }, c = /* @__PURE__ */ r
 			let e = [];
 			return c.isSelected && e.push("dropdown-tab-item__selected"), c.isHovered && e.push("hovered-item"), e.join(" ");
 		});
-		return (e, r) => (a(), t("div", { class: i([u.value, "dropdown-tab-item"]) }, [n("div", s, o(l.value), 1)], 2));
+		return (e, r) => (a(), t("div", {
+			"data-testid": "pl-tab-item",
+			class: i([u.value, "dropdown-tab-item"])
+		}, [n("div", s, o(l.value), 1)], 2));
 	}
 });
 //#endregion

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabItem.vue_vue_type_script_setup_true_lang.js","names":[],"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"],"mappings":"~~;;;;;;;;;;;;;;;;~~EAIA,IAAM,IAAQ,GAYR,IAAQ,QAAe,EAAM,OAAO,MAAM,EAE1C,IAAU,QAAuB;GACrC,IAAM,IAAsB,EAAE;AAO9B,UANI,EAAM,cACR,EAAU,KAAK,8BAA8B,EAE3C,EAAM,aACR,EAAU,KAAK,eAAe,EAEzB,EAAU,KAAK,IAAI;IAC1B;yBAGA,EAIM,OAAA,~~EAJA~~,OAAK,EAAA,CAAE,EAAA,OAAe,oBAAmB,CAAA,~~EAAA,EAAA,CAC7C,~~EAEM,OAFN,GAEM,EADD,EAAA,MAAK,EAAA,EAAA,CAAA,EAAA,EAAA"}
1	+ {"version":3,"file":"TabItem.vue_vue_type_script_setup_true_lang.js","names":[],"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 data-testid=\"pl-tab-item\" :class=\"classes\" class=\"dropdown-tab-item\">\n <div data-testid=\"pl-tab-item-title\" class=\"dropdown-tab-item__title text-caps13\">\n {{ label }}\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAIA,IAAM,IAAQ,GAYR,IAAQ,QAAe,EAAM,OAAO,MAAM,EAE1C,IAAU,QAAuB;GACrC,IAAM,IAAsB,EAAE;AAO9B,UANI,EAAM,cACR,EAAU,KAAK,8BAA8B,EAE3C,EAAM,aACR,EAAU,KAAK,eAAe,EAEzB,EAAU,KAAK,IAAI;IAC1B;yBAGA,EAIM,OAAA;GAJD,eAAY;GAAe,OAAK,EAAA,CAAE,EAAA,OAAe,oBAAmB,CAAA;MACvE,EAEM,OAFN,GAEM,EADD,EAAA,MAAK,EAAA,EAAA,CAAA,EAAA,EAAA"}

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

@@ -2,7 +2,7 @@ import e from "./Menu.vue2.js";
 import './Menu.style.css';/* empty css                                                     */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 //#region src/components/contextMenu/Menu.vue
-var n = /* @__PURE__ */ t(e, [["__scopeId", "data-v-1bb3001b"]]);
+var n = /* @__PURE__ */ t(e, [["__scopeId", "data-v-a7698a57"]]);
 //#endregion
 export { n as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.js","names":[],"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"],"mappings":""}
1	+ {"version":3,"file":"Menu.js","names":[],"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\" data-testid=\"pl-context-menu\">\n <div\n v-for=\"(opt, i) in options\"\n :key=\"i\"\n data-testid=\"pl-context-menu-item\"\n @click.stop=\"onClickOption(opt)\"\n >\n <span data-testid=\"pl-context-menu-item-text\">{{ 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"],"mappings":""}

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;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-a7698a57]{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-a7698a57]:before{content:"";z-index:-1;border:1px solid #00000020;border-radius:4px;display:block;position:absolute;inset:-1px}.context-menu hr[data-v-a7698a57]{background:#0000001a;border:none;height:1px;margin:6px 1px 5px;padding:0}.context-menu>div[data-v-a7698a57]{border-top:1px solid #0000;border-bottom:1px solid #0000;padding:0 20px;display:block}.context-menu>div span[data-v-a7698a57]{vertical-align:2px;user-select:none}.context-menu>div[data-v-a7698a57]:hover{background:linear-gradient(#648bf5 0%,#2866f2 100%);border-top:1px solid #5a82eb;border-bottom:1px solid #1758e7}.context-menu>div[data-v-a7698a57]:hover:after{color:#fff}

package/dist/components/contextMenu/Menu.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/contextMenu/Menu.vue"],"names":[],"mappings":"~~AA6FA~~,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,SAAS,aAAa,EAAE,CAAC;CACnC,CAAC;~~AAoDF~~,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
1	+ {"version":3,"file":"Menu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/contextMenu/Menu.vue"],"names":[],"mappings":"AAkGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,SAAS,aAAa,EAAE,CAAC;CACnC,CAAC;AAuDF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1,20 +1,24 @@
 import { Fragment as e, createElementBlock as t, createElementVNode as n, defineComponent as r, openBlock as i, renderList as a, toDisplayString as o, withModifiers as s } from "vue";
 //#region src/components/contextMenu/Menu.vue?vue&type=script&setup=true&lang.ts
-var c = { class: "context-menu" }, l = ["onClick"], u = /* @__PURE__ */ r({
+var c = {
+	class: "context-menu",
+	"data-testid": "pl-context-menu"
+}, l = ["onClick"], u = { "data-testid": "pl-context-menu-item-text" }, d = /* @__PURE__ */ r({
 	__name: "Menu",
 	props: { options: {} },
 	emits: ["close"],
-	setup(r, { emit: u }) {
-		let d = u, f = (e) => {
-			e.cb(), d("close");
+	setup(r, { emit: d }) {
+		let f = d, p = (e) => {
+			e.cb(), f("close");
 		};
-		return (u, d) => (i(), t("div", c, [(i(!0), t(e, null, a(r.options, (e, r) => (i(), t("div", {
+		return (d, f) => (i(), t("div", c, [(i(!0), t(e, null, a(r.options, (e, r) => (i(), t("div", {
 			key: r,
-			onClick: s((t) => f(e), ["stop"])
-		}, [n("span", null, o(e.text), 1)], 8, l))), 128))]));
+			"data-testid": "pl-context-menu-item",
+			onClick: s((t) => p(e), ["stop"])
+		}, [n("span", u, o(e.text), 1)], 8, l))), 128))]));
 	}
 });
 //#endregion
-export { u as default };
+export { d as default };
 //# sourceMappingURL=Menu.vue2.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.vue_vue_type_script_setup_true_lang.js","names":[],"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"],"mappings":"~~;;;;;;;~~EAGA,IAAM,IAAO,GAMP,KAAiB,MAAuB;AAE5C,GADA,EAAI,IAAI,EACR,EAAK,QAAQ;;yBAKb,~~EAIM~~,~~OAJN~~,~~GAIM~~,EAAA,EAAA,GAAA,~~EAHJ~~,~~EAEM~~,GAAA,MAAA,~~EAFkB~~,EAAA,UAAX,GAAK,~~YAAlB~~,~~EAEM~~,OAAA;~~GAF4B~~,KAAK;~~GAAI~~,SAAK,GAAA,MAAO,EAAc,EAAG,EAAA,CAAA,OAAA,CAAA;~~MACtE~~,~~EAA2B~~,~~QAAA~~,~~MAAA~~,EAAlB,EAAI,KAAI,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA"}
1	+ {"version":3,"file":"Menu.vue_vue_type_script_setup_true_lang.js","names":[],"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\" data-testid=\"pl-context-menu\">\n <div\n v-for=\"(opt, i) in options\"\n :key=\"i\"\n data-testid=\"pl-context-menu-item\"\n @click.stop=\"onClickOption(opt)\"\n >\n <span data-testid=\"pl-context-menu-item-text\">{{ 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"],"mappings":";;;;;;;;;;EAGA,IAAM,IAAO,GAMP,KAAiB,MAAuB;AAE5C,GADA,EAAI,IAAI,EACR,EAAK,QAAQ;;yBAKb,EASM,OATN,GASM,EAAA,EAAA,GAAA,EARJ,EAOM,GAAA,MAAA,EANe,EAAA,UAAX,GAAK,YADf,EAOM,OAAA;GALH,KAAK;GACN,eAAY;GACX,SAAK,GAAA,MAAO,EAAc,EAAG,EAAA,CAAA,OAAA,CAAA;MAE9B,EAAmE,QAAnE,GAAmE,EAAlB,EAAI,KAAI,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlBlockPage.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":""}
1	+ {"version":3,"file":"PlBlockPage.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\n class=\"pl-layout-component pl-block-page\"\n data-testid=\"pl-block-page\"\n :class=\"{ noBodyGutters: props.noBodyGutters }\"\n >\n <div\n v-if=\"slots.title \|\| props.title\"\n data-testid=\"pl-block-page-header\"\n :class=\"styles.header\"\n >\n <div class=\"pl-block-page__title\">\n <div class=\"pl-block-page__title__default\">\n <span v-if=\"slots.title\" data-testid=\"pl-block-page-title\"><slot name=\"title\" /></span>\n <span v-else data-testid=\"pl-block-page-title\">{{ props.title }}</span>\n <slot name=\"after-title\" />\n </div>\n <div class=\"pl-block-page__title__append\" data-testid=\"pl-block-page-append\">\n <div\n ref=\"teleportTarget\"\n class=\"pl-block-page__title__append__teleport\"\n data-testid=\"pl-block-page-append-teleport\"\n />\n <slot name=\"append\" />\n </div>\n </div>\n <div\n v-if=\"subtitle !== undefined\"\n data-testid=\"pl-block-page-subtitle\"\n :class=\"styles.subtitle\"\n >\n <input\n v-model.lazy.trim=\"subtitle\"\n data-testid=\"pl-block-page-subtitle-input\"\n :placeholder=\"props.subtitlePlaceholder\"\n />\n <PlIcon24\n data-testid=\"pl-block-page-subtitle-edit-icon\"\n :class=\"styles.editIcon\"\n name=\"edit\"\n color=\"var(--ic-02)\"\n />\n </div>\n </div>\n <div v-else />\n <div class=\"pl-block-page__body\" data-testid=\"pl-block-page-body\">\n <PlPlaceholder\n v-show=\"loadingPlaceholder\"\n data-testid=\"pl-block-page-loading-placeholder\"\n v-bind=\"loadingPlaceholder\"\n />\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":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlBlockPage.vue_vue_type_style_index_0_lang.module.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":""}
1	+ {"version":3,"file":"PlBlockPage.vue_vue_type_style_index_0_lang.module.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\n class=\"pl-layout-component pl-block-page\"\n data-testid=\"pl-block-page\"\n :class=\"{ noBodyGutters: props.noBodyGutters }\"\n >\n <div\n v-if=\"slots.title \|\| props.title\"\n data-testid=\"pl-block-page-header\"\n :class=\"styles.header\"\n >\n <div class=\"pl-block-page__title\">\n <div class=\"pl-block-page__title__default\">\n <span v-if=\"slots.title\" data-testid=\"pl-block-page-title\"><slot name=\"title\" /></span>\n <span v-else data-testid=\"pl-block-page-title\">{{ props.title }}</span>\n <slot name=\"after-title\" />\n </div>\n <div class=\"pl-block-page__title__append\" data-testid=\"pl-block-page-append\">\n <div\n ref=\"teleportTarget\"\n class=\"pl-block-page__title__append__teleport\"\n data-testid=\"pl-block-page-append-teleport\"\n />\n <slot name=\"append\" />\n </div>\n </div>\n <div\n v-if=\"subtitle !== undefined\"\n data-testid=\"pl-block-page-subtitle\"\n :class=\"styles.subtitle\"\n >\n <input\n v-model.lazy.trim=\"subtitle\"\n data-testid=\"pl-block-page-subtitle-input\"\n :placeholder=\"props.subtitlePlaceholder\"\n />\n <PlIcon24\n data-testid=\"pl-block-page-subtitle-edit-icon\"\n :class=\"styles.editIcon\"\n name=\"edit\"\n color=\"var(--ic-02)\"\n />\n </div>\n </div>\n <div v-else />\n <div class=\"pl-block-page__body\" data-testid=\"pl-block-page-body\">\n <PlPlaceholder\n v-show=\"loadingPlaceholder\"\n data-testid=\"pl-block-page-loading-placeholder\"\n v-bind=\"loadingPlaceholder\"\n />\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":""}

package/dist/layout/PlBlockPage/PlBlockPage.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlBlockPage.vue.d.ts","sourceRoot":"","sources":["../../../src/layout/PlBlockPage/PlBlockPage.vue"],"names":[],"mappings":"~~AA2IA~~,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,KAAK,kBAAkB,EAAuC,MAAM,kBAAkB,CAAC;AAGhG,gCAAgC;wBACX,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAIhB;;OAEG;YACK,MAAM;IACd;;OAEG;0BACmB,MAAM;IAC5B;;OAEG;oBACa,OAAO;IACvB;;OAEG;kBACW,kBAAkB,CAAC,SAAS,CAAC,GAAG,kBAAkB;;IAwBlE,+BAA+B;eAClB,MAAM;;;;IAxCjB;;OAEG;YACK,MAAM;IACd;;OAEG;0BACmB,MAAM;IAC5B;;OAEG;oBACa,OAAO;IACvB;;OAEG;kBACW,kBAAkB,CAAC,SAAS,CAAC,GAAG,kBAAkB;;IAwBlE,+BAA+B;eAClB,MAAM;;;;~~YAmIP~~,CAAC,KAAK,IAAgB,KAAK,GAAG;;oBACtB,CAAC,KAAK,IAAgB,KAAK,GAAG;;aACrC,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC7B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAYzC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"PlBlockPage.vue.d.ts","sourceRoot":"","sources":["../../../src/layout/PlBlockPage/PlBlockPage.vue"],"names":[],"mappings":"AAwKA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,KAAK,kBAAkB,EAAuC,MAAM,kBAAkB,CAAC;AAGhG,gCAAgC;wBACX,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAIhB;;OAEG;YACK,MAAM;IACd;;OAEG;0BACmB,MAAM;IAC5B;;OAEG;oBACa,OAAO;IACvB;;OAEG;kBACW,kBAAkB,CAAC,SAAS,CAAC,GAAG,kBAAkB;;IAwBlE,+BAA+B;eAClB,MAAM;;;;IAxCjB;;OAEG;YACK,MAAM;IACd;;OAEG;0BACmB,MAAM;IAC5B;;OAEG;oBACa,OAAO;IACvB;;OAEG;kBACW,kBAAkB,CAAC,SAAS,CAAC,GAAG,kBAAkB;;IAwBlE,+BAA+B;eAClB,MAAM;;;;YAgJP,CAAC,KAAK,IAAgB,KAAK,GAAG;;oBACtB,CAAC,KAAK,IAAgB,KAAK,GAAG;;aACrC,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC7B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAYzC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -4,11 +4,23 @@ 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";
+import { computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _, useCssModule as v, useModel as y, useSlots as b, useTemplateRef as x, vModelText as S, vShow as C, watchEffect as w, withDirectives as T } from "vue";
 //#region src/layout/PlBlockPage/PlBlockPage.vue?vue&type=script&setup=true&lang.ts
-var D = { class: "pl-block-page__title" }, O = { class: "pl-block-page__title__default" }, k = { key: 0 }, A = { key: 1 }, j = { class: "pl-block-page__title__append" }, M = ["placeholder"], N = { key: 1 }, P = { class: "pl-block-page__body" }, F = /* @__PURE__ */ l({
+var E = { class: "pl-block-page__title" }, D = { class: "pl-block-page__title__default" }, O = {
+	key: 0,
+	"data-testid": "pl-block-page-title"
+}, k = {
+	key: 1,
+	"data-testid": "pl-block-page-title"
+}, A = {
+	class: "pl-block-page__title__append",
+	"data-testid": "pl-block-page-append"
+}, j = ["placeholder"], M = { key: 1 }, N = {
+	class: "pl-block-page__body",
+	"data-testid": "pl-block-page-body"
+}, P = /* @__PURE__ */ l({
 	name: "PlBlockPage",
-	props: /* @__PURE__ */ d({
+	props: /* @__PURE__ */ u({
 		title: {},
 		subtitlePlaceholder: {},
 		noBodyGutters: { type: Boolean },
@@ -19,41 +31,49 @@ var D = { class: "pl-block-page__title" }, O = { class: "pl-block-page__title__d
 	}),
 	emits: ["update:subtitle"],
 	setup(l) {
-		let d = x(), F = l, I = b(l, "subtitle"), L = y(), R = i(() => typeof F.bodyLoading == "string" ? {
-			variant: F.bodyLoading,
+		let u = b(), P = l, F = y(l, "subtitle"), I = v(), L = i(() => typeof P.bodyLoading == "string" ? {
+			variant: P.bodyLoading,
 			...r.LOADING
-		} : F.bodyLoading), z = S("teleportTarget");
-		return T(() => {
-			e.value = z.value;
-		}), (e, r) => (h(), o("div", { class: f(["pl-layout-component pl-block-page", { noBodyGutters: F.noBodyGutters }]) }, [v(d).title || F.title ? (h(), o("div", {
+		} : P.bodyLoading), R = x("teleportTarget");
+		return w(() => {
+			e.value = R.value;
+		}), (e, r) => (m(), o("div", {
+			class: f(["pl-layout-component pl-block-page", { noBodyGutters: P.noBodyGutters }]),
+			"data-testid": "pl-block-page"
+		}, [_(u).title || P.title ? (m(), o("div", {
 			key: 0,
-			class: f(v(L).header)
-		}, [s("div", D, [s("div", O, [v(d).title ? (h(), o("span", k, [g(e.$slots, "title")])) : (h(), o("span", A, _(F.title), 1)), g(e.$slots, "after-title")]), s("div", j, [s("div", {
+			"data-testid": "pl-block-page-header",
+			class: f(_(I).header)
+		}, [s("div", E, [s("div", D, [_(u).title ? (m(), o("span", O, [h(e.$slots, "title")])) : (m(), o("span", k, g(P.title), 1)), h(e.$slots, "after-title")]), s("div", A, [s("div", {
 			ref_key: "teleportTarget",
-			ref: z,
-			class: "pl-block-page__title__append__teleport"
-		}, null, 512), g(e.$slots, "append")])]), I.value === void 0 ? a("", !0) : (h(), o("div", {
+			ref: R,
+			class: "pl-block-page__title__append__teleport",
+			"data-testid": "pl-block-page-append-teleport"
+		}, null, 512), h(e.$slots, "append")])]), F.value === void 0 ? a("", !0) : (m(), o("div", {
 			key: 0,
-			class: f(v(L).subtitle)
-		}, [E(s("input", {
-			"onUpdate:modelValue": r[0] ||= (e) => I.value = e,
-			placeholder: F.subtitlePlaceholder
-		}, null, 8, M), [[
-			C,
-			I.value,
+			"data-testid": "pl-block-page-subtitle",
+			class: f(_(I).subtitle)
+		}, [T(s("input", {
+			"onUpdate:modelValue": r[0] ||= (e) => F.value = e,
+			"data-testid": "pl-block-page-subtitle-input",
+			placeholder: P.subtitlePlaceholder
+		}, null, 8, j), [[
+			S,
+			F.value,
 			void 0,
 			{
 				lazy: !0,
 				trim: !0
 			}
-		]]), c(v(t), {
-			class: f(v(L).editIcon),
+		]]), c(_(t), {
+			"data-testid": "pl-block-page-subtitle-edit-icon",
+			class: f(_(I).editIcon),
 			name: "edit",
 			color: "var(--ic-02)"
-		}, null, 8, ["class"])], 2))], 2)) : (h(), o("div", N)), s("div", P, [E(c(v(n), p(u(R.value)), null, 16), [[w, R.value]]), s("div", { style: m({ display: R.value ? "none" : "contents" }) }, [g(e.$slots, "default")], 4)])], 2));
+		}, null, 8, ["class"])], 2))], 2)) : (m(), o("div", M)), s("div", N, [T(c(_(n), d({ "data-testid": "pl-block-page-loading-placeholder" }, L.value), null, 16), [[C, L.value]]), s("div", { style: p({ display: L.value ? "none" : "contents" }) }, [h(e.$slots, "default")], 4)])], 2));
 	}
 });
 //#endregion
-export { F as default };
+export { P as default };
 //# sourceMappingURL=PlBlockPage.vue2.js.map

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\n class=\"pl-layout-component pl-block-page\"\n data-testid=\"pl-block-page\"\n :class=\"{ noBodyGutters: props.noBodyGutters }\"\n >\n <div\n v-if=\"slots.title \|\| props.title\"\n data-testid=\"pl-block-page-header\"\n :class=\"styles.header\"\n >\n <div class=\"pl-block-page__title\">\n <div class=\"pl-block-page__title__default\">\n <span v-if=\"slots.title\" data-testid=\"pl-block-page-title\"><slot name=\"title\" /></span>\n <span v-else data-testid=\"pl-block-page-title\">{{ props.title }}</span>\n <slot name=\"after-title\" />\n </div>\n <div class=\"pl-block-page__title__append\" data-testid=\"pl-block-page-append\">\n <div\n ref=\"teleportTarget\"\n class=\"pl-block-page__title__append__teleport\"\n data-testid=\"pl-block-page-append-teleport\"\n />\n <slot name=\"append\" />\n </div>\n </div>\n <div\n v-if=\"subtitle !== undefined\"\n data-testid=\"pl-block-page-subtitle\"\n :class=\"styles.subtitle\"\n >\n <input\n v-model.lazy.trim=\"subtitle\"\n data-testid=\"pl-block-page-subtitle-input\"\n :placeholder=\"props.subtitlePlaceholder\"\n />\n <PlIcon24\n data-testid=\"pl-block-page-subtitle-edit-icon\"\n :class=\"styles.editIcon\"\n name=\"edit\"\n color=\"var(--ic-02)\"\n />\n </div>\n </div>\n <div v-else />\n <div class=\"pl-block-page__body\" data-testid=\"pl-block-page-body\">\n <PlPlaceholder\n v-show=\"loadingPlaceholder\"\n data-testid=\"pl-block-page-loading-placeholder\"\n v-bind=\"loadingPlaceholder\"\n />\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,EAsDM,OAAA;GArDJ,OAAK,EAAA,CAAC,qCAAmC,EAAA,eAEhB,EAAM,eAAa,CAAA,CAAA;GAD5C,eAAY;MAIJ,EAAA,EAAK,CAAC,SAAS,EAAM,SAAA,GAAA,EAD7B,EAqCM,OAAA;;GAnCJ,eAAY;GACX,OAAK,EAAE,EAAA,EAAM,CAAC,OAAM;MAErB,EAcM,OAdN,GAcM,CAbJ,EAIM,OAJN,GAIM,CAHQ,EAAA,EAAK,CAAC,SAAA,GAAA,EAAlB,EAAuF,QAAvF,GAAuF,CAA5B,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,GAAA,EAChF,EAAuE,QAAvE,GAAuE,EAArB,EAAM,MAAK,EAAA,EAAA,GAC7D,EAA2B,EAAA,QAAA,cAAA,CAAA,CAAA,EAE7B,EAOM,OAPN,GAOM,CANJ,EAIE,OAAA;YAHI;GAAJ,KAAI;GACJ,OAAM;GACN,eAAY;iBAEd,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA,EAIlB,EAAA,UAAa,KAAA,iBAAA,GAAA,EADrB,EAgBM,OAAA;;GAdJ,eAAY;GACX,OAAK,EAAE,EAAA,EAAM,CAAC,SAAQ;QAEvB,EAIE,SAAA;4CAH2B,QAAA;GAC3B,eAAY;GACX,aAAa,EAAM;;;GAFD,EAAA;;;IAAX,MAAR;IAAa,MAAb;;OAIF,EAKE,EAAA,EAAA,EAAA;GAJA,eAAY;GACX,OAAK,EAAE,EAAA,EAAM,CAAC,SAAQ;GACvB,MAAK;GACL,OAAM;6CAIZ,EAAc,OAAA,EAAA,GACd,EASM,OATN,GASM,CAAA,EARJ,EAIE,EAAA,EAAA,EAJF,EAIE,EAFA,eAAY,qCAAmC,EACvC,EAAA,MAAkB,EAAA,MAAA,GAAA,EAAA,CAAA,CAAA,GAFlB,EAAA,MAAkB,CAAA,CAAA,EAI5B,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/PlContainer/PlContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlContainer.js","names":[],"sources":["../../../src/layout/PlContainer/PlContainer.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Container with vertical spacing /\nexport default {\n name: \"PlContainer\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport \"./pl-container.scss\";\nimport PlSplash from \"../../components/PlSplash/PlSplash.vue\";\n\nconst props = defineProps<{\n /\n CSS width value (px, %)\n /\n width?: string;\n /\n Shows loading overlay\n /\n loading?: boolean;\n /\n Optional loading text\n */\n loadingText?: string;\n}>();\n\nconst style = computed(() => ({\n width: props.width,\n}));\n</script>\n\n<template>\n <PlSplash\n :loading=\"loading\"\n :loading-text=\"loadingText\"\n class=\"pl-container pl-layout-component\"\n :style=\"style\"\n >\n <slot />\n </PlSplash>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"PlContainer.js","names":[],"sources":["../../../src/layout/PlContainer/PlContainer.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Container with vertical spacing /\nexport default {\n name: \"PlContainer\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport \"./pl-container.scss\";\nimport PlSplash from \"../../components/PlSplash/PlSplash.vue\";\n\nconst props = defineProps<{\n /\n CSS width value (px, %)\n /\n width?: string;\n /\n Shows loading overlay\n /\n loading?: boolean;\n /\n Optional loading text\n */\n loadingText?: string;\n}>();\n\nconst style = computed(() => ({\n width: props.width,\n}));\n</script>\n\n<template>\n <PlSplash\n :loading=\"loading\"\n :loading-text=\"loadingText\"\n class=\"pl-container pl-layout-component\"\n data-testid=\"pl-container\"\n :style=\"style\"\n >\n <slot />\n </PlSplash>\n</template>\n"],"mappings":""}

package/dist/layout/PlContainer/PlContainer.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlContainer.vue.d.ts","sourceRoot":"","sources":["../../../src/layout/PlContainer/PlContainer.vue"],"names":[],"mappings":"~~AA8CA~~,OAAO,qBAAqB,CAAC;AAI7B,sCAAsC;wBACjB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB;;OAEG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;kBACW,MAAM;;IAXpB;;OAEG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;kBACW,MAAM;;~~cAmDR~~,CAAC,KAAK,IAAgB,KAAK,GAAG;EASxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"PlContainer.vue.d.ts","sourceRoot":"","sources":["../../../src/layout/PlContainer/PlContainer.vue"],"names":[],"mappings":"AA+CA,OAAO,qBAAqB,CAAC;AAI7B,sCAAsC;wBACjB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB;;OAEG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;kBACW,MAAM;;IAXpB;;OAEG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;kBACW,MAAM;;cAqDR,CAAC,KAAK,IAAgB,KAAK,GAAG;EASxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -14,6 +14,7 @@ var c = /* @__PURE__ */ r({
 			loading: r.loading,
 			"loading-text": r.loadingText,
 			class: "pl-container pl-layout-component",
+			"data-testid": "pl-container",
 			style: i(l.value)
 		}, {
 			default: s(() => [o(t.$slots, "default")]),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlContainer.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlContainer/PlContainer.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Container with vertical spacing /\nexport default {\n name: \"PlContainer\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport \"./pl-container.scss\";\nimport PlSplash from \"../../components/PlSplash/PlSplash.vue\";\n\nconst props = defineProps<{\n /\n CSS width value (px, %)\n /\n width?: string;\n /\n Shows loading overlay\n /\n loading?: boolean;\n /\n Optional loading text\n */\n loadingText?: string;\n}>();\n\nconst style = computed(() => ({\n width: props.width,\n}));\n</script>\n\n<template>\n <PlSplash\n :loading=\"loading\"\n :loading-text=\"loadingText\"\n class=\"pl-container pl-layout-component\"\n :style=\"style\"\n >\n <slot />\n </PlSplash>\n</template>\n"],"mappings":";;;;CAGE,MAAM;;;;;;;EASR,IAAM,IAAQ,GAeR,IAAQ,SAAgB,EAC5B,OAAO,EAAM,OACd,EAAE;yBAID,~~EAOW~~,GAAA;~~GANR~~,SAAS,EAAA;GACT,gBAAc,EAAA;GACf,OAAM;~~GACL~~,OAAK,EAAE,EAAA,MAAK;;oBAEL,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"PlContainer.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlContainer/PlContainer.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Container with vertical spacing /\nexport default {\n name: \"PlContainer\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport \"./pl-container.scss\";\nimport PlSplash from \"../../components/PlSplash/PlSplash.vue\";\n\nconst props = defineProps<{\n /\n CSS width value (px, %)\n /\n width?: string;\n /\n Shows loading overlay\n /\n loading?: boolean;\n /\n Optional loading text\n */\n loadingText?: string;\n}>();\n\nconst style = computed(() => ({\n width: props.width,\n}));\n</script>\n\n<template>\n <PlSplash\n :loading=\"loading\"\n :loading-text=\"loadingText\"\n class=\"pl-container pl-layout-component\"\n data-testid=\"pl-container\"\n :style=\"style\"\n >\n <slot />\n </PlSplash>\n</template>\n"],"mappings":";;;;CAGE,MAAM;;;;;;;EASR,IAAM,IAAQ,GAeR,IAAQ,SAAgB,EAC5B,OAAO,EAAM,OACd,EAAE;yBAID,EAQW,GAAA;GAPR,SAAS,EAAA;GACT,gBAAc,EAAA;GACf,OAAM;GACN,eAAY;GACX,OAAK,EAAE,EAAA,MAAK;;oBAEL,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/layout/PlGrid/PlGrid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlGrid.js","names":[],"sources":["../../../src/layout/PlGrid/PlGrid.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Grid container */\nexport default {\n name: \"PlGrid\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport \"./pl-grid.scss\";\n\nconst props = defineProps<{\n columns: number;\n}>();\n\nconst style = computed(() => {\n return {\n gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))`,\n };\n});\n</script>\n\n<template>\n <div class=\"pl-layout-component pl-grid\" :style=\"style\">\n <slot />\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"PlGrid.js","names":[],"sources":["../../../src/layout/PlGrid/PlGrid.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Grid container */\nexport default {\n name: \"PlGrid\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport \"./pl-grid.scss\";\n\nconst props = defineProps<{\n columns: number;\n}>();\n\nconst style = computed(() => {\n return {\n gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))`,\n };\n});\n</script>\n\n<template>\n <div class=\"pl-layout-component pl-grid\" data-testid=\"pl-grid\" :style=\"style\">\n <slot />\n </div>\n</template>\n"],"mappings":""}

package/dist/layout/PlGrid/PlGrid.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlGrid.vue.d.ts","sourceRoot":"","sources":["../../../src/layout/PlGrid/PlGrid.vue"],"names":[],"mappings":"AA+BA,OAAO,gBAAgB,CAAC;AAGxB,qBAAqB;wBACA,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;aAEP,MAAM;;aAAN,MAAM;;~~cAsCH~~,CAAC,KAAK,IAAgB,KAAK,GAAG;EASxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"PlGrid.vue.d.ts","sourceRoot":"","sources":["../../../src/layout/PlGrid/PlGrid.vue"],"names":[],"mappings":"AA+BA,OAAO,gBAAgB,CAAC;AAGxB,qBAAqB;wBACA,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;aAEP,MAAM;;aAAN,MAAM;;cAuCH,CAAC,KAAK,IAAgB,KAAK,GAAG;EASxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -7,6 +7,7 @@ var o = /* @__PURE__ */ n({
 		let o = n, s = e(() => ({ gridTemplateColumns: `repeat(${o.columns}, minmax(0, 1fr))` }));
 		return (e, n) => (i(), t("div", {
 			class: "pl-layout-component pl-grid",
+			"data-testid": "pl-grid",
 			style: r(s.value)
 		}, [a(e.$slots, "default")], 4));
 	}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlGrid.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlGrid/PlGrid.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Grid container */\nexport default {\n name: \"PlGrid\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport \"./pl-grid.scss\";\n\nconst props = defineProps<{\n columns: number;\n}>();\n\nconst style = computed(() => {\n return {\n gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))`,\n };\n});\n</script>\n\n<template>\n <div class=\"pl-layout-component pl-grid\" :style=\"style\">\n <slot />\n </div>\n</template>\n"],"mappings":";;;CAGE,MAAM;;;EAQR,IAAM,IAAQ,GAIR,IAAQ,SACL,EACL,qBAAqB,UAAU,EAAM,QAAQ,oBAC9C,EACD;yBAIA,EAEM,OAAA;GAFD,OAAM;~~GAA+B~~,OAAK,EAAE,EAAA,MAAK;~~MACpD~~,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
1	+ {"version":3,"file":"PlGrid.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlGrid/PlGrid.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Grid container */\nexport default {\n name: \"PlGrid\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport \"./pl-grid.scss\";\n\nconst props = defineProps<{\n columns: number;\n}>();\n\nconst style = computed(() => {\n return {\n gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))`,\n };\n});\n</script>\n\n<template>\n <div class=\"pl-layout-component pl-grid\" data-testid=\"pl-grid\" :style=\"style\">\n <slot />\n </div>\n</template>\n"],"mappings":";;;CAGE,MAAM;;;EAQR,IAAM,IAAQ,GAIR,IAAQ,SACL,EACL,qBAAqB,UAAU,EAAM,QAAQ,oBAC9C,EACD;yBAIA,EAEM,OAAA;GAFD,OAAM;GAA8B,eAAY;GAAW,OAAK,EAAE,EAAA,MAAK;MAC1E,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}

package/dist/layout/PlPlaceholder/PlPlaceholder.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlPlaceholder.js","names":[],"sources":["../../../src/layout/PlPlaceholder/PlPlaceholder.vue"],"sourcesContent":["<script lang=\"ts\">\nimport paintWorkletCode from \"./paint-worklet.js?raw\";\n\nexport interface PlPlaceholderProps {\n variant?: \"table\" \| \"graph\";\n title?: string;\n subtitle?: string \| string[];\n}\n\n// Register paint worklet once at module load (uses blob URL to comply with CSP)\nconst workletBlob = new Blob([paintWorkletCode], { type: \"application/javascript\" });\nconst workletUrl = URL.createObjectURL(workletBlob);\n(\n CSS as unknown as {\n paintWorklet: { addModule: (url: string) => void };\n }\n).paintWorklet.addModule(workletUrl);\n</script>\n\n<script setup lang=\"ts\">\nimport { useCssModule } from \"vue\";\nimport PlLoaderLogo from \"../../components/PlLoaderLogo.vue\";\n\nconst props = defineProps<PlPlaceholderProps>();\n\nconst styles = useCssModule();\n</script>\n\n<template>\n <div :class=\"styles.root\">\n <div\n :class=\"[\n styles.background,\n {\n [styles.table]: props.variant === 'table',\n [styles.graph]: props.variant === 'graph',\n },\n ]\"\n />\n <div :class=\"styles.content\">\n <PlLoaderLogo :size=\"64\" color=\"var(--color-div-grey)\" />\n <div v-if=\"props.title \|\| props.subtitle\" :class=\"styles.text\">\n <div v-if=\"props.title\" :class=\"styles.title\">{{ props.title }}</div>\n <div v-if=\"props.subtitle\" :class=\"styles.subtitle\">\n <template v-if=\"Array.isArray(props.subtitle)\">\n <span v-for=\"(item, key) of props.subtitle\" :key>{{ item }}</span>\n </template>\n <span v-else>{{ props.subtitle }}</span>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style module>\n.root {\n block-size: 100%;\n inline-size: 100%;\n position: relative;\n user-select: none;\n background-color: var(--bg-elevated-01);\n}\n\n.background {\n position: absolute;\n inset: 0;\n pointer-events: none;\n mask: linear-gradient(transparent 35%, #000 40% 60%, transparent 65%);\n mask-size: 100% 300%;\n animation-duration: 5s;\n animation-iteration-count: infinite;\n animation-name: slide;\n &.table {\n background-image: paint(pl-placeholder-table-skeleton);\n }\n &.graph {\n background-image: paint(pl-placeholder-graph-skeleton);\n }\n}\n\n.content {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 12px;\n}\n\n.text {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n -webkit-text-stroke-color: white;\n -webkit-text-stroke-width: 4px;\n paint-order: stroke;\n}\n\n.title {\n color: var(--txt-03);\n font-size: 20px;\n font-weight: 500;\n line-height: 24px;\n letter-spacing: -0.2px;\n}\n\n.subtitle {\n color: var(--txt-03);\n font-weight: 500;\n line-height: 20px;\n display: grid;\n span {\n grid-area: 1 / 1;\n text-align: center;\n animation-name: active-subtitle;\n animation-duration: calc(6s * sibling-count());\n animation-iteration-count: infinite;\n animation-timing-function: steps(sibling-count(), jump-none);\n visibility: if(\n style(--pl-placeholder-active-subtitle: sibling-index()): visible; else: hidden;\n );\n }\n}\n\n@keyframes slide {\n from {\n mask-position: 0 100%;\n }\n}\n\n@keyframes active-subtitle {\n from {\n --pl-placeholder-active-subtitle: 1;\n }\n to {\n --pl-placeholder-active-subtitle: sibling-count();\n }\n}\n\n@property --pl-placeholder-active-subtitle {\n syntax: \"<number>\";\n inherits: false;\n initial-value: 1;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"PlPlaceholder.js","names":[],"sources":["../../../src/layout/PlPlaceholder/PlPlaceholder.vue"],"sourcesContent":["<script lang=\"ts\">\nimport paintWorkletCode from \"./paint-worklet.js?raw\";\n\nexport interface PlPlaceholderProps {\n variant?: \"table\" \| \"graph\";\n title?: string;\n subtitle?: string \| string[];\n}\n\n// Register paint worklet once at module load (uses blob URL to comply with CSP)\nconst workletBlob = new Blob([paintWorkletCode], { type: \"application/javascript\" });\nconst workletUrl = URL.createObjectURL(workletBlob);\n(\n CSS as unknown as {\n paintWorklet: { addModule: (url: string) => void };\n }\n).paintWorklet.addModule(workletUrl);\n</script>\n\n<script setup lang=\"ts\">\nimport { useCssModule } from \"vue\";\nimport PlLoaderLogo from \"../../components/PlLoaderLogo.vue\";\n\nconst props = defineProps<PlPlaceholderProps>();\n\nconst styles = useCssModule();\n</script>\n\n<template>\n <div data-testid=\"pl-placeholder\" :class=\"styles.root\">\n <div\n data-testid=\"pl-placeholder-background\"\n :class=\"[\n styles.background,\n {\n [styles.table]: props.variant === 'table',\n [styles.graph]: props.variant === 'graph',\n },\n ]\"\n />\n <div data-testid=\"pl-placeholder-content\" :class=\"styles.content\">\n <PlLoaderLogo data-testid=\"pl-placeholder-loader\" :size=\"64\" color=\"var(--color-div-grey)\" />\n <div\n v-if=\"props.title \|\| props.subtitle\"\n data-testid=\"pl-placeholder-text\"\n :class=\"styles.text\"\n >\n <div v-if=\"props.title\" data-testid=\"pl-placeholder-title\" :class=\"styles.title\">\n {{ props.title }}\n </div>\n <div v-if=\"props.subtitle\" data-testid=\"pl-placeholder-subtitle\" :class=\"styles.subtitle\">\n <template v-if=\"Array.isArray(props.subtitle)\">\n <span\n v-for=\"(item, key) of props.subtitle\"\n :key\n data-testid=\"pl-placeholder-subtitle-item\"\n >{{ item }}</span\n >\n </template>\n <span v-else data-testid=\"pl-placeholder-subtitle-item\">{{ props.subtitle }}</span>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style module>\n.root {\n block-size: 100%;\n inline-size: 100%;\n position: relative;\n user-select: none;\n background-color: var(--bg-elevated-01);\n}\n\n.background {\n position: absolute;\n inset: 0;\n pointer-events: none;\n mask: linear-gradient(transparent 35%, #000 40% 60%, transparent 65%);\n mask-size: 100% 300%;\n animation-duration: 5s;\n animation-iteration-count: infinite;\n animation-name: slide;\n &.table {\n background-image: paint(pl-placeholder-table-skeleton);\n }\n &.graph {\n background-image: paint(pl-placeholder-graph-skeleton);\n }\n}\n\n.content {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 12px;\n}\n\n.text {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n -webkit-text-stroke-color: white;\n -webkit-text-stroke-width: 4px;\n paint-order: stroke;\n}\n\n.title {\n color: var(--txt-03);\n font-size: 20px;\n font-weight: 500;\n line-height: 24px;\n letter-spacing: -0.2px;\n}\n\n.subtitle {\n color: var(--txt-03);\n font-weight: 500;\n line-height: 20px;\n display: grid;\n span {\n grid-area: 1 / 1;\n text-align: center;\n animation-name: active-subtitle;\n animation-duration: calc(6s * sibling-count());\n animation-iteration-count: infinite;\n animation-timing-function: steps(sibling-count(), jump-none);\n visibility: if(\n style(--pl-placeholder-active-subtitle: sibling-index()): visible; else: hidden;\n );\n }\n}\n\n@keyframes slide {\n from {\n mask-position: 0 100%;\n }\n}\n\n@keyframes active-subtitle {\n from {\n --pl-placeholder-active-subtitle: 1;\n }\n to {\n --pl-placeholder-active-subtitle: sibling-count();\n }\n}\n\n@property --pl-placeholder-active-subtitle {\n syntax: \"<number>\";\n inherits: false;\n initial-value: 1;\n}\n</style>\n"],"mappings":""}

package/dist/layout/PlPlaceholder/PlPlaceholder.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlPlaceholder.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/layout/PlPlaceholder/PlPlaceholder.vue"],"sourcesContent":["<script lang=\"ts\">\nimport paintWorkletCode from \"./paint-worklet.js?raw\";\n\nexport interface PlPlaceholderProps {\n variant?: \"table\" \| \"graph\";\n title?: string;\n subtitle?: string \| string[];\n}\n\n// Register paint worklet once at module load (uses blob URL to comply with CSP)\nconst workletBlob = new Blob([paintWorkletCode], { type: \"application/javascript\" });\nconst workletUrl = URL.createObjectURL(workletBlob);\n(\n CSS as unknown as {\n paintWorklet: { addModule: (url: string) => void };\n }\n).paintWorklet.addModule(workletUrl);\n</script>\n\n<script setup lang=\"ts\">\nimport { useCssModule } from \"vue\";\nimport PlLoaderLogo from \"../../components/PlLoaderLogo.vue\";\n\nconst props = defineProps<PlPlaceholderProps>();\n\nconst styles = useCssModule();\n</script>\n\n<template>\n <div :class=\"styles.root\">\n <div\n :class=\"[\n styles.background,\n {\n [styles.table]: props.variant === 'table',\n [styles.graph]: props.variant === 'graph',\n },\n ]\"\n />\n <div :class=\"styles.content\">\n <PlLoaderLogo :size=\"64\" color=\"var(--color-div-grey)\" />\n <div v-if=\"props.title \|\| props.subtitle\" :class=\"styles.text\">\n <div v-if=\"props.title\" :class=\"styles.title\">{{ props.title }}</div>\n <div v-if=\"props.subtitle\" :class=\"styles.subtitle\">\n <template v-if=\"Array.isArray(props.subtitle)\">\n <span v-for=\"(item, key) of props.subtitle\" :key>{{ item }}</span>\n </template>\n <span v-else>{{ props.subtitle }}</span>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style module>\n.root {\n block-size: 100%;\n inline-size: 100%;\n position: relative;\n user-select: none;\n background-color: var(--bg-elevated-01);\n}\n\n.background {\n position: absolute;\n inset: 0;\n pointer-events: none;\n mask: linear-gradient(transparent 35%, #000 40% 60%, transparent 65%);\n mask-size: 100% 300%;\n animation-duration: 5s;\n animation-iteration-count: infinite;\n animation-name: slide;\n &.table {\n background-image: paint(pl-placeholder-table-skeleton);\n }\n &.graph {\n background-image: paint(pl-placeholder-graph-skeleton);\n }\n}\n\n.content {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 12px;\n}\n\n.text {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n -webkit-text-stroke-color: white;\n -webkit-text-stroke-width: 4px;\n paint-order: stroke;\n}\n\n.title {\n color: var(--txt-03);\n font-size: 20px;\n font-weight: 500;\n line-height: 24px;\n letter-spacing: -0.2px;\n}\n\n.subtitle {\n color: var(--txt-03);\n font-weight: 500;\n line-height: 20px;\n display: grid;\n span {\n grid-area: 1 / 1;\n text-align: center;\n animation-name: active-subtitle;\n animation-duration: calc(6s * sibling-count());\n animation-iteration-count: infinite;\n animation-timing-function: steps(sibling-count(), jump-none);\n visibility: if(\n style(--pl-placeholder-active-subtitle: sibling-index()): visible; else: hidden;\n );\n }\n}\n\n@keyframes slide {\n from {\n mask-position: 0 100%;\n }\n}\n\n@keyframes active-subtitle {\n from {\n --pl-placeholder-active-subtitle: 1;\n }\n to {\n --pl-placeholder-active-subtitle: sibling-count();\n }\n}\n\n@property --pl-placeholder-active-subtitle {\n syntax: \"<number>\";\n inherits: false;\n initial-value: 1;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"PlPlaceholder.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/layout/PlPlaceholder/PlPlaceholder.vue"],"sourcesContent":["<script lang=\"ts\">\nimport paintWorkletCode from \"./paint-worklet.js?raw\";\n\nexport interface PlPlaceholderProps {\n variant?: \"table\" \| \"graph\";\n title?: string;\n subtitle?: string \| string[];\n}\n\n// Register paint worklet once at module load (uses blob URL to comply with CSP)\nconst workletBlob = new Blob([paintWorkletCode], { type: \"application/javascript\" });\nconst workletUrl = URL.createObjectURL(workletBlob);\n(\n CSS as unknown as {\n paintWorklet: { addModule: (url: string) => void };\n }\n).paintWorklet.addModule(workletUrl);\n</script>\n\n<script setup lang=\"ts\">\nimport { useCssModule } from \"vue\";\nimport PlLoaderLogo from \"../../components/PlLoaderLogo.vue\";\n\nconst props = defineProps<PlPlaceholderProps>();\n\nconst styles = useCssModule();\n</script>\n\n<template>\n <div data-testid=\"pl-placeholder\" :class=\"styles.root\">\n <div\n data-testid=\"pl-placeholder-background\"\n :class=\"[\n styles.background,\n {\n [styles.table]: props.variant === 'table',\n [styles.graph]: props.variant === 'graph',\n },\n ]\"\n />\n <div data-testid=\"pl-placeholder-content\" :class=\"styles.content\">\n <PlLoaderLogo data-testid=\"pl-placeholder-loader\" :size=\"64\" color=\"var(--color-div-grey)\" />\n <div\n v-if=\"props.title \|\| props.subtitle\"\n data-testid=\"pl-placeholder-text\"\n :class=\"styles.text\"\n >\n <div v-if=\"props.title\" data-testid=\"pl-placeholder-title\" :class=\"styles.title\">\n {{ props.title }}\n </div>\n <div v-if=\"props.subtitle\" data-testid=\"pl-placeholder-subtitle\" :class=\"styles.subtitle\">\n <template v-if=\"Array.isArray(props.subtitle)\">\n <span\n v-for=\"(item, key) of props.subtitle\"\n :key\n data-testid=\"pl-placeholder-subtitle-item\"\n >{{ item }}</span\n >\n </template>\n <span v-else data-testid=\"pl-placeholder-subtitle-item\">{{ props.subtitle }}</span>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style module>\n.root {\n block-size: 100%;\n inline-size: 100%;\n position: relative;\n user-select: none;\n background-color: var(--bg-elevated-01);\n}\n\n.background {\n position: absolute;\n inset: 0;\n pointer-events: none;\n mask: linear-gradient(transparent 35%, #000 40% 60%, transparent 65%);\n mask-size: 100% 300%;\n animation-duration: 5s;\n animation-iteration-count: infinite;\n animation-name: slide;\n &.table {\n background-image: paint(pl-placeholder-table-skeleton);\n }\n &.graph {\n background-image: paint(pl-placeholder-graph-skeleton);\n }\n}\n\n.content {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 12px;\n}\n\n.text {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n -webkit-text-stroke-color: white;\n -webkit-text-stroke-width: 4px;\n paint-order: stroke;\n}\n\n.title {\n color: var(--txt-03);\n font-size: 20px;\n font-weight: 500;\n line-height: 24px;\n letter-spacing: -0.2px;\n}\n\n.subtitle {\n color: var(--txt-03);\n font-weight: 500;\n line-height: 20px;\n display: grid;\n span {\n grid-area: 1 / 1;\n text-align: center;\n animation-name: active-subtitle;\n animation-duration: calc(6s * sibling-count());\n animation-iteration-count: infinite;\n animation-timing-function: steps(sibling-count(), jump-none);\n visibility: if(\n style(--pl-placeholder-active-subtitle: sibling-index()): visible; else: hidden;\n );\n }\n}\n\n@keyframes slide {\n from {\n mask-position: 0 100%;\n }\n}\n\n@keyframes active-subtitle {\n from {\n --pl-placeholder-active-subtitle: 1;\n }\n to {\n --pl-placeholder-active-subtitle: sibling-count();\n }\n}\n\n@property --pl-placeholder-active-subtitle {\n syntax: \"<number>\";\n inherits: false;\n initial-value: 1;\n}\n</style>\n"],"mappings":""}

package/dist/layout/PlPlaceholder/PlPlaceholder.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlPlaceholder.vue.d.ts","sourceRoot":"","sources":["../../../src/layout/PlPlaceholder/PlPlaceholder.vue"],"names":[],"mappings":"~~AA4JA~~,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC9B;wBAUoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY,~~gTAkGd~~,CAAC"}
1	+ {"version":3,"file":"PlPlaceholder.vue.d.ts","sourceRoot":"","sources":["../../../src/layout/PlPlaceholder/PlPlaceholder.vue"],"names":[],"mappings":"AAwKA,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC9B;wBAUoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY,gTA4Gd,CAAC"}