npm - @milaboratories/uikit - Versions diffs - 2.11.6 → 2.11.7 - Mend

@milaboratories/uikit 2.11.6 → 2.11.7

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

package/dist/components/PlTextField/PlTextField.vue.d.ts CHANGED Viewed

@@ -1,19 +1,16 @@
 /**
  * Component for one-line string data manipulation
  */
-declare const _default: <R extends true | false, V extends undefined | string, C extends Exclude<V, R extends true ? undefined : never>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default: <R extends true | false, V extends undefined | string, C extends Exclude<V, [R] extends [true] ? undefined : never>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly "onUpdate:modelValue"?: ((value: V) => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & ({
         modelValue: V;
     } & {
+        /** The string specifies whether the field should be a password or not, value could be "password" or undefined. */
+        type?: "password";
         /** The label to display above the input field. */
         label?: string;
-        /**
-         * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).
-         * If a function, calls it to get the reset value.
-         */
-        clearable?: (R extends true ? never : boolean) | (() => C);
         /** If `true`, the input field is marked as required and will show an error if left empty. */
         required?: R;
         /** An error message to display below the input field. */
@@ -28,10 +25,13 @@ declare const _default: <R extends true | false, V extends undefined | string, C
         dashed?: boolean;
         /** A prefix text to display inside the input field before the value. */
         prefix?: string;
+        /**
+         * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).
+         * If a function, calls it to get the reset value.
+         */
+        clearable?: ([R] extends [true] ? never : boolean) | (() => C);
         /** Additional validity check for input value that must return an error text if failed */
         validate?: (v: V) => string | undefined;
-        /** The string specifies whether the field should be a password or not, value could be "password" or undefined. */
-        type?: "password";
         /** Makes some of corners not rounded */
         groupPosition?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle";
     }) & Partial<{}>> & import('vue').PublicProps;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlTextField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTextField/PlTextField.vue"],"names":[],"mappings":"AAsMA,OAAO,sBAAsB,CAAC;AAG9B;;GAEG;yBAEC,CAAC,SAAS,IAAI,GAAG,KAAK,EACtB,CAAC,SAAS,SAAS,GAAG,MAAM,EAC5B,CAAC,SAAS,OAAO,CAAC,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,SAAS,GAAG,KAAK,CAAC,~~EAE3D~~,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAmUO,mBAAmB,CAAC;;;oBAlNhB,CAAC;;QAtGX,kDAAkD;gBAC1C,MAAM;QACd~~;;;WAGG;oBACS~~,~~CAAC,CAAC,SAAS,IAAI,GAAG,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC1D,~~6FAA6F;mBAClF,CAAC;QACZ,yDAAyD;gBACjD,OAAO;QACf,+EAA+E;iBACtE,MAAM;QACf,6EAA6E;sBAC/D,MAAM;QACpB,4EAA4E;mBACjE,OAAO;QAClB,sDAAsD;iBAC7C,OAAO;QAChB,wEAAwE;iBAC/D,MAAM;QACf,yFAAyF;mBAC9E,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS;QACvC,~~kHAAkH;eAC3G,UAAU;QACjB,~~wCAAwC;wBAEpC,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;oBAqRgF,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBArDmB,GAAG;wBACJ,GAAG;;;EAwD5B,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAlVzE,wBAkV4E;AAG5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
1	+ {"version":3,"file":"PlTextField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTextField/PlTextField.vue"],"names":[],"mappings":"AAsMA,OAAO,sBAAsB,CAAC;AAG9B;;GAEG;yBAEC,CAAC,SAAS,IAAI,GAAG,KAAK,EACtB,CAAC,SAAS,SAAS,GAAG,MAAM,EAC5B,CAAC,SAAS,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS,GAAG,KAAK,CAAC,EAE/D,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAmUO,mBAAmB,CAAC;;;oBAlNhB,CAAC;;QAtGX,kHAAkH;eAC3G,UAAU;QACjB,kDAAkD;gBAC1C,MAAM;QACd,6FAA6F;mBAClF,CAAC;QACZ,yDAAyD;gBACjD,OAAO;QACf,+EAA+E;iBACtE,MAAM;QACf,6EAA6E;sBAC/D,MAAM;QACpB,4EAA4E;mBACjE,OAAO;QAClB,sDAAsD;iBAC7C,OAAO;QAChB,wEAAwE;iBAC/D,MAAM;QACf;;;WAGG;oBACS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC9D,yFAAyF;mBAC9E,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS;QACvC,wCAAwC;wBAEpC,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;oBAqRgF,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBArDmB,GAAG;wBACJ,GAAG;;;EAwD5B,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAlVzE,wBAkV4E;AAG5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

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

@@ -12,6 +12,7 @@ import "../PlIcon16/index.js";
 import s from "../../assets/images/required.js";
 import './pl-text-field.css';/* empty css              */
 import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, mergeModels as h, normalizeClass as g, openBlock as _, ref as v, renderSlot as y, toDisplayString as b, unref as x, useModel as S, useSlots as C, vModelDynamic as w, withCtx as T, withDirectives as E, withModifiers as D } from "vue";
+//#region src/components/PlTextField/PlTextField.vue?vue&type=script&setup=true&lang.ts
 var O = { class: "pl-text-field__envelope" }, k = {
 	key: 0,
 	ref: "label"
@@ -31,8 +32,8 @@ var O = { class: "pl-text-field__envelope" }, k = {
 }, P = /* @__PURE__ */ m({
 	name: "PlTextField",
 	props: /* @__PURE__ */ h({
+		type: {},
 		label: {},
-		clearable: { type: Function },
 		required: {},
 		error: {},
 		helper: {},
@@ -40,8 +41,8 @@ var O = { class: "pl-text-field__envelope" }, k = {
 		disabled: { type: Boolean },
 		dashed: { type: Boolean },
 		prefix: {},
+		clearable: { type: Function },
 		validate: { type: Function },
-		type: {},
 		groupPosition: {}
 	}, {
 		modelValue: { required: !0 },
@@ -119,6 +120,7 @@ var O = { class: "pl-text-field__envelope" }, k = {
 		], 2), W.value ? (_(), d("div", M, b(U.value.join(" ")), 1)) : m.helper ? (_(), d("div", N, b(m.helper), 1)) : u("", !0)]));
 	}
 });
+//#endregion
 export { P as default };
 //# sourceMappingURL=PlTextField.vue2.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlTextField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTextField/PlTextField.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Component for one-line string data manipulation\n /\nexport default {\n name: \"PlTextField\",\n};\n</script>\n\n<script\n lang=\"ts\"\n setup\n generic=\"\n R extends true \| false,\n V extends undefined \| string,\n C extends Exclude<V, R extends true ? undefined : never>\n \"\n>\nimport { computed, ref, useSlots } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-text-field.scss\";\n\nconst slots = useSlots();\n\n/\n The current value of the input field.\n /\nconst model = defineModel<V>({\n required: true,\n});\n\nconst props = defineProps<{\n /* The ~~label~~ to ~~display~~ ~~above~~ the ~~input~~ field. /\n label?: string;\n /\n ~~If `true`,~~ a ~~clear~~ ~~icon~~ ~~will~~ ~~appear~~ in ~~the~~ ~~input~~ ~~field~~ to ~~clear~~ ~~the~~ ~~value~~ ~~(set~~ it to ~~empty~~ string).\n * If a ~~function,~~ ~~calls it to get the reset value.\n~~ /\n ~~clearable~~?: ~~(R extends true ? never : boolean) \| (() => C)~~;\n /* If `true`, the input field is marked as required and will show an error if left empty. /\n required?: R;\n /* An error message to display below the input field. /\n error?: unknown;\n /* A helper text to display below the input field when there are no errors. /\n helper?: string;\n /* A placeholder text to display inside the input field when it is empty. /\n placeholder?: string;\n /* If `true`, the input field is disabled and cannot be interacted with. /\n disabled?: boolean;\n /* If `true`, the input field has a dashed border. /\n dashed?: boolean;\n /* A prefix text to display inside the input field before the value. /\n prefix?: string;\n /* ~~Additional~~ ~~validity~~ ~~check~~ ~~for~~ input value ~~that~~ ~~must~~ ~~return~~ an ~~error~~ ~~text~~ if ~~failed~~ /\n ~~validate~~?: (v: V) => ~~string~~ \| ~~undefined~~;\n /* ~~The~~ ~~string~~ ~~specifies~~ ~~whether~~ ~~the~~ ~~field~~ ~~should~~ be a ~~password~~ or ~~not,~~ ~~value~~ ~~could~~ ~~be \"password\" or undefined.~~ /\n ~~type~~?: ~~\"password\"~~;\n /* Makes some of corners not rounded */\n groupPosition?:\n \| \"top\"\n \| \"bottom\"\n \| \"left\"\n \| \"right\"\n \| \"top-left\"\n \| \"top-right\"\n \| \"bottom-left\"\n \| \"bottom-right\"\n \| \"middle\";\n}>();\n\nconst rootRef = ref<HTMLInputElement \| undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement \| undefined>();\n\nconst showPassword = ref(false);\n\nconst fieldType = computed(() => {\n if (props.type && props.type === \"password\") {\n return showPassword.value ? \"text\" : props.type;\n } else {\n return \"text\";\n }\n});\n\nconst passwordIcon = computed(() => (showPassword.value ? \"view-show\" : \"view-hide\"));\n\nconst clear = () => {\n if (props.clearable) {\n model.value = (typeof props.clearable === \"function\" ? props.clearable() : \"\") as V;\n }\n};\n\nconst isEmpty = computed(() => model.value === \"\");\n\nconst displayErrors = computed(() => {\n const errors: string[] = [];\n const propsError = getErrorMessage(props.error);\n if (propsError) {\n errors.push(propsError);\n }\n if (props.validate) {\n const error = props.validate(model.value as V);\n if (error) {\n errors.push(error);\n }\n }\n if (props.required && isEmpty.value) {\n errors.push(\"Value is required\");\n }\n return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(\n () => props.clearable && !isEmpty.value && props.type !== \"password\" && !props.disabled,\n);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nuseLabelNotch(rootRef);\n</script>\n\n<template>\n <div class=\"pl-text-field__envelope\">\n <div\n ref=\"rootRef\"\n class=\"pl-text-field\"\n :class=\"{\n error: hasErrors,\n disabled,\n dashed,\n nonEmpty: !isEmpty,\n }\"\n >\n <label v-if=\"label\" ref=\"label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <div v-if=\"prefix\" class=\"pl-text-field__prefix\">\n {{ prefix }}\n </div>\n <input\n ref=\"inputRef\"\n v-model=\"model\"\n :disabled=\"disabled\"\n :placeholder=\"placeholder \|\| '...'\"\n :type=\"fieldType\"\n spellcheck=\"false\"\n />\n <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n <PlIcon16\n v-if=\"canShowClearable\"\n class=\"pl-text-field__clearable\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <PlIcon24\n v-if=\"type === 'password'\"\n :name=\"passwordIcon\"\n style=\"cursor: pointer\"\n @click.stop=\"togglePasswordVisibility\"\n />\n <slot name=\"append\" />\n </div>\n <DoubleContour class=\"pl-text-field__contour\" :group-position=\"groupPosition\" />\n </div>\n <div v-if=\"hasErrors\" class=\"pl-text-field__error\">\n {{ displayErrors.join(\" \") }}\n </div>\n <div v-else-if=\"helper\" class=\"pl-text-field__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CAKE,MAAM;;;;;;;;;;;;;;;;;;;;EAwBR,IAAM,IAAQ,GAAU,EAKlB,IAAQ,EAAc,GAAA,aAE1B,EAEI,IAAQ,GAuCR,IAAU,EAAkC,KAAA,EAAU,EAEtD,IAAW,GAAmC,EAE9C,IAAe,EAAI,GAAM,EAEzB,IAAY,QACZ,EAAM,QAAQ,EAAM,SAAS,aACxB,EAAa,QAAQ,SAAS,EAAM,OAEpC,OAET,EAEI,IAAe,QAAgB,EAAa,QAAQ,cAAc,YAAa,EAE/E,UAAc;AAClB,GAAI,EAAM,cACR,EAAM,QAAS,OAAO,EAAM,aAAc,aAAa,EAAM,WAAW,GAAG;KAIzE,IAAU,QAAe,EAAM,UAAU,GAAG,EAE5C,IAAgB,QAAe;GACnC,IAAM,IAAmB,EAAE,EACrB,IAAa,EAAgB,EAAM,MAAM;AAI/C,OAHI,KACF,EAAO,KAAK,EAAW,EAErB,EAAM,UAAU;IAClB,IAAM,IAAQ,EAAM,SAAS,EAAM,MAAW;AAC9C,IAAI,KACF,EAAO,KAAK,EAAM;;AAMtB,UAHI,EAAM,YAAY,EAAQ,SAC5B,EAAO,KAAK,oBAAoB,EAE3B;IACP,EAEI,IAAY,QAAe,EAAc,MAAM,SAAS,EAAE,EAE1D,IAAmB,QACjB,EAAM,aAAa,CAAC,EAAQ,SAAS,EAAM,SAAS,cAAc,CAAC,EAAM,SAChF,EAEK,UAAkC,EAAa,QAAQ,CAAC,EAAa,OAErE,UAAwB,EAAS,OAAO,OAAO;SAErD,EAAc,EAAQ,kBAIpB,EAoDM,OApDN,GAoDM,CAnDJ,EA8CM,OAAA;YA7CA;GAAJ,KAAI;GACJ,OAAK,EAAA,CAAC,iBAAe;WACI,EAAA;cAAmB,EAAA;YAAkB,EAAA;eAA2B,EAAA;;;GAO5E,EAAA,SAAA,GAAA,EAAb,EAQQ,SARR,GAQQ;IAPO,EAAA,YAAA,GAAA,EAAb,EAA4C,EAAA,EAAA,EAAA;;KAApB,KAAK,EAAA,EAAW;;IACxC,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;KAJoB,OAAM;KAAO,UAAS;;KACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;GAIlB,EAAA,UAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;KAEX,EAOE,SAAA;aANI;IAAJ,KAAI;6CACU,QAAA;IACb,UAAU,EAAA;IACV,aAAa,EAAA,eAAW;IACxB,MAAM,EAAA;IACP,YAAW;wBAJF,EAAA,MAAK,CAAA,CAAA;GAMhB,EAcM,OAAA;IAdD,OAAM;IAAyB,SAAO;;IAEjC,EAAA,SAAA,GAAA,EADR,EAKE,EAAA,EAAA,EAAA;;KAHA,OAAM;KACN,MAAK;KACJ,SAAK,EAAO,GAAK,CAAA,OAAA,CAAA;;IAGZ,EAAA,SAAI,cAAA,GAAA,EADZ,EAKE,EAAA,EAAA,EAAA;;KAHC,MAAM,EAAA;KACP,OAAA,EAAA,QAAA,WAAuB;KACtB,SAAK,EAAO,GAAwB,CAAA,OAAA,CAAA;;IAEvC,EAAsB,EAAA,QAAA,SAAA;;GAExB,EAAgF,GAAA;IAAjE,OAAM;IAA0B,kBAAgB,EAAA;;SAEtD,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAc,KAAI,IAAA,CAAA,EAAA,EAAA,IAEP,EAAA,UAAA,GAAA,EAAhB,EAAwE,OAAxE,GAAwE,EAAf,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"PlTextField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTextField/PlTextField.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Component for one-line string data manipulation\n /\nexport default {\n name: \"PlTextField\",\n};\n</script>\n\n<script\n lang=\"ts\"\n setup\n generic=\"\n R extends true \| false,\n V extends undefined \| string,\n C extends Exclude<V, [R] extends [true] ? undefined : never>\n \"\n>\nimport { computed, ref, useSlots } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-text-field.scss\";\n\nconst slots = useSlots();\n\n/\n The current value of the input field.\n /\nconst model = defineModel<V>({\n required: true,\n});\n\nconst props = defineProps<{\n /* The string specifies whether the field should be a password or not, value could be \"password\" or undefined. /\n type?: \"password\";\n /* The label to display above the input field. /\n label?: string;\n /* If `true`, the input field is marked as required and will show an error if left empty. /\n required?: R;\n /* An error message to display below the input field. /\n error?: unknown;\n /* A helper text to display below the input field when there are no errors. /\n helper?: string;\n /* A placeholder text to display inside the input field when it is empty. /\n placeholder?: string;\n /* If `true`, the input field is disabled and cannot be interacted with. /\n disabled?: boolean;\n /* If `true`, the input field has a dashed border. /\n dashed?: boolean;\n /* A prefix text to display inside the input field before the value. /\n prefix?: string;\n /\n If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).\n * If a function, calls it to get the reset value.\n /\n clearable?: ([R] extends [true] ? never : boolean) \| (() => C);\n /* Additional validity check for input value that must return an error text if failed /\n validate?: (v: V) => string \| undefined;\n /* Makes some of corners not rounded */\n groupPosition?:\n \| \"top\"\n \| \"bottom\"\n \| \"left\"\n \| \"right\"\n \| \"top-left\"\n \| \"top-right\"\n \| \"bottom-left\"\n \| \"bottom-right\"\n \| \"middle\";\n}>();\n\nconst rootRef = ref<HTMLInputElement \| undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement \| undefined>();\n\nconst showPassword = ref(false);\n\nconst fieldType = computed(() => {\n if (props.type && props.type === \"password\") {\n return showPassword.value ? \"text\" : props.type;\n } else {\n return \"text\";\n }\n});\n\nconst passwordIcon = computed(() => (showPassword.value ? \"view-show\" : \"view-hide\"));\n\nconst clear = () => {\n if (props.clearable) {\n model.value = (typeof props.clearable === \"function\" ? props.clearable() : \"\") as V;\n }\n};\n\nconst isEmpty = computed(() => model.value === \"\");\n\nconst displayErrors = computed(() => {\n const errors: string[] = [];\n const propsError = getErrorMessage(props.error);\n if (propsError) {\n errors.push(propsError);\n }\n if (props.validate) {\n const error = props.validate(model.value as V);\n if (error) {\n errors.push(error);\n }\n }\n if (props.required && isEmpty.value) {\n errors.push(\"Value is required\");\n }\n return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(\n () => props.clearable && !isEmpty.value && props.type !== \"password\" && !props.disabled,\n);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nuseLabelNotch(rootRef);\n</script>\n\n<template>\n <div class=\"pl-text-field__envelope\">\n <div\n ref=\"rootRef\"\n class=\"pl-text-field\"\n :class=\"{\n error: hasErrors,\n disabled,\n dashed,\n nonEmpty: !isEmpty,\n }\"\n >\n <label v-if=\"label\" ref=\"label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <div v-if=\"prefix\" class=\"pl-text-field__prefix\">\n {{ prefix }}\n </div>\n <input\n ref=\"inputRef\"\n v-model=\"model\"\n :disabled=\"disabled\"\n :placeholder=\"placeholder \|\| '...'\"\n :type=\"fieldType\"\n spellcheck=\"false\"\n />\n <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n <PlIcon16\n v-if=\"canShowClearable\"\n class=\"pl-text-field__clearable\"\n name=\"delete-clear\"\n @click.stop=\"clear\"\n />\n <PlIcon24\n v-if=\"type === 'password'\"\n :name=\"passwordIcon\"\n style=\"cursor: pointer\"\n @click.stop=\"togglePasswordVisibility\"\n />\n <slot name=\"append\" />\n </div>\n <DoubleContour class=\"pl-text-field__contour\" :group-position=\"groupPosition\" />\n </div>\n <div v-if=\"hasErrors\" class=\"pl-text-field__error\">\n {{ displayErrors.join(\" \") }}\n </div>\n <div v-else-if=\"helper\" class=\"pl-text-field__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;EAwBR,IAAM,IAAQ,GAAU,EAKlB,IAAQ,EAAc,GAAA,aAE1B,EAEI,IAAQ,GAuCR,IAAU,EAAkC,KAAA,EAAU,EAEtD,IAAW,GAAmC,EAE9C,IAAe,EAAI,GAAM,EAEzB,IAAY,QACZ,EAAM,QAAQ,EAAM,SAAS,aACxB,EAAa,QAAQ,SAAS,EAAM,OAEpC,OAET,EAEI,IAAe,QAAgB,EAAa,QAAQ,cAAc,YAAa,EAE/E,UAAc;AAClB,GAAI,EAAM,cACR,EAAM,QAAS,OAAO,EAAM,aAAc,aAAa,EAAM,WAAW,GAAG;KAIzE,IAAU,QAAe,EAAM,UAAU,GAAG,EAE5C,IAAgB,QAAe;GACnC,IAAM,IAAmB,EAAE,EACrB,IAAa,EAAgB,EAAM,MAAM;AAI/C,OAHI,KACF,EAAO,KAAK,EAAW,EAErB,EAAM,UAAU;IAClB,IAAM,IAAQ,EAAM,SAAS,EAAM,MAAW;AAC9C,IAAI,KACF,EAAO,KAAK,EAAM;;AAMtB,UAHI,EAAM,YAAY,EAAQ,SAC5B,EAAO,KAAK,oBAAoB,EAE3B;IACP,EAEI,IAAY,QAAe,EAAc,MAAM,SAAS,EAAE,EAE1D,IAAmB,QACjB,EAAM,aAAa,CAAC,EAAQ,SAAS,EAAM,SAAS,cAAc,CAAC,EAAM,SAChF,EAEK,UAAkC,EAAa,QAAQ,CAAC,EAAa,OAErE,UAAwB,EAAS,OAAO,OAAO;SAErD,EAAc,EAAQ,kBAIpB,EAoDM,OApDN,GAoDM,CAnDJ,EA8CM,OAAA;YA7CA;GAAJ,KAAI;GACJ,OAAK,EAAA,CAAC,iBAAe;WACI,EAAA;cAAmB,EAAA;YAAkB,EAAA;eAA2B,EAAA;;;GAO5E,EAAA,SAAA,GAAA,EAAb,EAQQ,SARR,GAQQ;IAPO,EAAA,YAAA,GAAA,EAAb,EAA4C,EAAA,EAAA,EAAA;;KAApB,KAAK,EAAA,EAAW;;IACxC,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;KAJoB,OAAM;KAAO,UAAS;;KACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;GAIlB,EAAA,UAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;KAEX,EAOE,SAAA;aANI;IAAJ,KAAI;6CACU,QAAA;IACb,UAAU,EAAA;IACV,aAAa,EAAA,eAAW;IACxB,MAAM,EAAA;IACP,YAAW;wBAJF,EAAA,MAAK,CAAA,CAAA;GAMhB,EAcM,OAAA;IAdD,OAAM;IAAyB,SAAO;;IAEjC,EAAA,SAAA,GAAA,EADR,EAKE,EAAA,EAAA,EAAA;;KAHA,OAAM;KACN,MAAK;KACJ,SAAK,EAAO,GAAK,CAAA,OAAA,CAAA;;IAGZ,EAAA,SAAI,cAAA,GAAA,EADZ,EAKE,EAAA,EAAA,EAAA;;KAHC,MAAM,EAAA;KACP,OAAA,EAAA,QAAA,WAAuB;KACtB,SAAK,EAAO,GAAwB,CAAA,OAAA,CAAA;;IAEvC,EAAsB,EAAA,QAAA,SAAA;;GAExB,EAAgF,GAAA;IAAjE,OAAM;IAA0B,kBAAgB,EAAA;;SAEtD,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAc,KAAI,IAAA,CAAA,EAAA,EAAA,IAEP,EAAA,UAAA,GAAA,EAAhB,EAAwE,OAAxE,GAAwE,EAAf,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

package/dist/components/PlToggleSwitch/PlToggleSwitch.js CHANGED Viewed

@@ -1,5 +1,7 @@
 import e from "./PlToggleSwitch.vue2.js";
+//#region src/components/PlToggleSwitch/PlToggleSwitch.vue
 var t = e;
+//#endregion
 export { t as default };
 //# sourceMappingURL=PlToggleSwitch.js.map

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

@@ -1,5 +1,6 @@
 import './pl-toggle-switch.css';/* empty css                 */
 import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, toDisplayString as o, withKeys as s } from "vue";
+//#region src/components/PlToggleSwitch/PlToggleSwitch.vue?vue&type=script&setup=true&lang.ts
 var c = {
 	key: 0,
 	class: "label"
@@ -19,6 +20,7 @@ var c = {
 		}, [u[2] ||= n("div", { class: "ui-toggle-switch__body" }, [n("div", { class: "ui-toggle-switch__handle" })], -1), r.label ? (a(), t("span", c, o(r.label), 1)) : e("", !0)], 34));
 	}
 });
+//#endregion
 export { l as default };
 //# sourceMappingURL=PlToggleSwitch.vue2.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlToggleSwitch.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlToggleSwitch/PlToggleSwitch.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Component for manipulating a boolean value\n /\nexport default {\n name: \"PlToggleSwitch\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-toggle-switch.scss\";\n\ndefineEmits<{\n /\n Emitted when the model value is updated\n \n @param value - The new boolean value of the model\n /\n (e: \"update:modelValue\", value: boolean): void;\n}>();\n\ndefineProps<{\n /\n The label text for the component (optional)\n /\n label?: string;\n /\n The current boolean value of the component (represents 'on' \| 'off' states generally).\n */\n modelValue?: boolean;\n}>();\n</script>\n\n<template>\n <div\n tabindex=\"0\"\n class=\"ui-toggle-switch\"\n :class=\"{ active: modelValue }\"\n @click=\"$emit('update:modelValue', !modelValue)\"\n @keydown.enter=\"$emit('update:modelValue', !modelValue)\"\n >\n <div class=\"ui-toggle-switch__body\">\n <div class=\"ui-toggle-switch__handle\" />\n </div>\n <span v-if=\"label\" class=\"label\">{{ label }}</span>\n </div>\n</template>\n"],"mappings":"~~;;;;;;~~CAKE,MAAM;;;;;;;yBA6BN,EAWM,OAAA;GAVJ,UAAS;GACT,OAAK,EAAA,CAAC,oBAAkB,EAAA,QACN,EAAA,YAAU,CAAA,CAAA;GAC3B,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAA,CAAuB,EAAA,WAAU;GAC7C,WAAO,AAAA,EAAA,OAAA,GAAA,MAAQA,EAAAA,MAAK,qBAAA,CAAuB,EAAA,WAAU,EAAA,CAAA,QAAA,CAAA;eAEtD,EAEM,OAAA,EAFD,OAAM,0BAAwB,EAAA,CACjC,EAAwC,OAAA,EAAnC,OAAM,4BAA0B,CAAA,CAAA,EAAA,GAAA,EAE3B,EAAA,SAAA,GAAA,EAAZ,EAAmD,QAAnD,GAAmD,EAAf,EAAA,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA"}
1	+ {"version":3,"file":"PlToggleSwitch.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlToggleSwitch/PlToggleSwitch.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n Component for manipulating a boolean value\n /\nexport default {\n name: \"PlToggleSwitch\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-toggle-switch.scss\";\n\ndefineEmits<{\n /\n Emitted when the model value is updated\n \n @param value - The new boolean value of the model\n /\n (e: \"update:modelValue\", value: boolean): void;\n}>();\n\ndefineProps<{\n /\n The label text for the component (optional)\n /\n label?: string;\n /\n The current boolean value of the component (represents 'on' \| 'off' states generally).\n */\n modelValue?: boolean;\n}>();\n</script>\n\n<template>\n <div\n tabindex=\"0\"\n class=\"ui-toggle-switch\"\n :class=\"{ active: modelValue }\"\n @click=\"$emit('update:modelValue', !modelValue)\"\n @keydown.enter=\"$emit('update:modelValue', !modelValue)\"\n >\n <div class=\"ui-toggle-switch__body\">\n <div class=\"ui-toggle-switch__handle\" />\n </div>\n <span v-if=\"label\" class=\"label\">{{ label }}</span>\n </div>\n</template>\n"],"mappings":";;;;;;;CAKE,MAAM;;;;;;;yBA6BN,EAWM,OAAA;GAVJ,UAAS;GACT,OAAK,EAAA,CAAC,oBAAkB,EAAA,QACN,EAAA,YAAU,CAAA,CAAA;GAC3B,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAA,CAAuB,EAAA,WAAU;GAC7C,WAAO,AAAA,EAAA,OAAA,GAAA,MAAQA,EAAAA,MAAK,qBAAA,CAAuB,EAAA,WAAU,EAAA,CAAA,QAAA,CAAA;eAEtD,EAEM,OAAA,EAFD,OAAM,0BAAwB,EAAA,CACjC,EAAwC,OAAA,EAAnC,OAAM,4BAA0B,CAAA,CAAA,EAAA,GAAA,EAE3B,EAAA,SAAA,GAAA,EAAZ,EAAmD,QAAnD,GAAmD,EAAf,EAAA,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA"}

package/dist/components/PlTooltip/PlTooltip.js CHANGED Viewed

@@ -2,6 +2,7 @@ import e from "../../_virtual/_plugin-vue_export-helper.js";
 import t from "./PlTooltip.vue2.js";
 import n from "./PlTooltip.style.js";
 var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+//#endregion
 export { r as default };
 //# sourceMappingURL=PlTooltip.js.map

package/dist/components/PlTooltip/PlTooltip.style.js CHANGED Viewed

@@ -10,6 +10,7 @@ import './PlTooltip.vue.css';var e = {
 	right: "_right_ttgyk_108",
 	topLeft: "_topLeft_ttgyk_125"
 };
+//#endregion
 export { e as default };
 //# sourceMappingURL=PlTooltip.style.js.map

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

@@ -95,6 +95,7 @@ var T = /* @__PURE__ */ u({
 		}, 16, ["class"]));
 	}
 });
+//#endregion
 export { T as default };
 //# sourceMappingURL=PlTooltip.vue2.js.map

package/dist/components/PlTooltip/global.js CHANGED Viewed

@@ -1,4 +1,6 @@
-const e = /* @__PURE__ */ new Map();
+//#region src/components/PlTooltip/global.ts
+var e = /* @__PURE__ */ new Map();
+//#endregion
 export { e as tMap };
 //# sourceMappingURL=global.js.map

package/dist/components/PlTooltip/global.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"global.js","names":[],"sources":["../../../src/components/PlTooltip/global.ts"],"sourcesContent":["export const tMap = new Map<symbol, () => void>();\n"],"mappings":"AAAA,~~MAAa~~,oBAAO,IAAI,KAAyB"}
1	+ {"version":3,"file":"global.js","names":[],"sources":["../../../src/components/PlTooltip/global.ts"],"sourcesContent":["export const tMap = new Map<symbol, () => void>();\n"],"mappings":";AAAA,IAAa,oBAAO,IAAI,KAAyB"}

package/dist/components/Scrollable.js CHANGED Viewed

@@ -1,5 +1,7 @@
 import e from "./Scrollable.vue2.js";
+//#region src/components/Scrollable.vue
 var t = e;
+//#endregion
 export { t as default };
 //# sourceMappingURL=Scrollable.js.map

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

@@ -3,6 +3,7 @@ import n from "./VScroll.js";
 import r from "./HScroll.js";
 import { useResizeObserver as i } from "../composition/useResizeObserver.js";
 import { createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, onMounted as l, onUnmounted as u, openBlock as d, reactive as f, ref as p, renderSlot as m, unref as h, withModifiers as g } from "vue";
+//#region src/components/Scrollable.vue?vue&type=script&setup=true&lang.ts
 var _ = { class: "ui-scrollable" }, v = /* @__PURE__ */ c({
 	__name: "Scrollable",
 	setup(c) {
@@ -72,6 +73,7 @@ var _ = { class: "ui-scrollable" }, v = /* @__PURE__ */ c({
 		]));
 	}
 });
+//#endregion
 export { v as default };
 //# sourceMappingURL=Scrollable.vue2.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Scrollable.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/Scrollable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport VScroll from \"./VScroll.vue\";\nimport HScroll from \"./HScroll.vue\";\nimport { onMounted, onUnmounted, reactive, ref, unref } from \"vue\";\nimport { tapIf, copyProps } from \"../helpers/functions\";\nimport { useResizeObserver } from \"../composition/useResizeObserver\";\n\nconst containerRef = ref<HTMLElement>();\n\nconst data = reactive({\n scrollTop: 0,\n scrollLeft: 0,\n clientHeight: 0,\n clientWidth: 0,\n scrollHeight: 0,\n scrollWidth: 0,\n});\n\nfunction updateState(container: HTMLElement) {\n copyProps(\n data,\n container,\n \"scrollTop\",\n \"scrollLeft\",\n \"clientHeight\",\n \"clientWidth\",\n \"scrollHeight\",\n \"scrollWidth\",\n );\n}\n\nconst onWheel = (e: WheelEvent) => {\n e.preventDefault();\n const root = e.currentTarget as HTMLElement;\n root.scrollTop += e.deltaY;\n root.scrollLeft += e.deltaX;\n updateState(root);\n};\n\nfunction updateTop(v: number) {\n tapIf(unref(containerRef), (el) => {\n el.scrollTop = v;\n updateState(el);\n });\n}\n\nfunction updateLeft(v: number) {\n tapIf(unref(containerRef), (el) => {\n el.scrollLeft = v;\n updateState(el);\n });\n}\n\nuseResizeObserver(containerRef, (el) => {\n tapIf(el, (el) => updateState(el));\n});\n\nonMounted(() => {\n tapIf(unref(containerRef), (root) => {\n updateState(root);\n root.addEventListener(\"wheel\", onWheel);\n });\n});\n\nonUnmounted(() => {\n tapIf(unref(containerRef), (root) => root.removeEventListener(\"wheel\", onWheel));\n});\n</script>\n\n<template>\n <div class=\"ui-scrollable\">\n <div ref=\"containerRef\" class=\"ui-scrollable__container\" @wheel=\"onWheel\">\n <slot />\n </div>\n <VScroll\n :scroll-top=\"data.scrollTop\"\n :client-height=\"data.clientHeight\"\n :scroll-height=\"data.scrollHeight\"\n @wheel.stop\n @update:scroll-top=\"updateTop\"\n />\n <HScroll\n :scroll-left=\"data.scrollLeft\"\n :client-width=\"data.clientWidth\"\n :scroll-width=\"data.scrollWidth\"\n @wheel.stop\n @update:scroll-left=\"updateLeft\"\n />\n </div>\n</template>\n"],"mappings":"~~;;;;;;;;~~EAOA,IAAM,IAAe,GAAkB,EAEjC,IAAO,EAAS;GACpB,WAAW;GACX,YAAY;GACZ,cAAc;GACd,aAAa;GACb,cAAc;GACd,aAAa;GACd,CAAC;EAEF,SAAS,EAAY,GAAwB;AAC3C,KACE,GACA,GACA,aACA,cACA,gBACA,eACA,gBACA,cACD;;EAGH,IAAM,KAAW,MAAkB;AACjC,KAAE,gBAAgB;GAClB,IAAM,IAAO,EAAE;AAGf,GAFA,EAAK,aAAa,EAAE,QACpB,EAAK,cAAc,EAAE,QACrB,EAAY,EAAK;;EAGnB,SAAS,EAAU,GAAW;AAC5B,KAAM,EAAM,EAAa,GAAG,MAAO;AAEjC,IADA,EAAG,YAAY,GACf,EAAY,EAAG;KACf;;EAGJ,SAAS,EAAW,GAAW;AAC7B,KAAM,EAAM,EAAa,GAAG,MAAO;AAEjC,IADA,EAAG,aAAa,GAChB,EAAY,EAAG;KACf;;SAGJ,EAAkB,IAAe,MAAO;AACtC,KAAM,IAAK,MAAO,EAAY,EAAG,CAAC;IAClC,EAEF,QAAgB;AACd,KAAM,EAAM,EAAa,GAAG,MAAS;AAEnC,IADA,EAAY,EAAK,EACjB,EAAK,iBAAiB,SAAS,EAAQ;KACvC;IACF,EAEF,QAAkB;AAChB,KAAM,EAAM,EAAa,GAAG,MAAS,EAAK,oBAAoB,SAAS,EAAQ,CAAC;IAChF,kBAIA,EAkBM,OAlBN,GAkBM;GAjBJ,EAEM,OAAA;aAFG;IAAJ,KAAI;IAAe,OAAM;IAAmC;OAC/D,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA;GAEV,EAME,GAAA;IALC,cAAY,EAAK;IACjB,iBAAe,EAAK;IACpB,iBAAe,EAAK;IACpB,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;IACV,sBAAmB;;;;;;GAEtB,EAME,GAAA;IALC,eAAa,EAAK;IAClB,gBAAc,EAAK;IACnB,gBAAc,EAAK;IACnB,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;IACV,uBAAoB"}
1	+ {"version":3,"file":"Scrollable.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/Scrollable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport VScroll from \"./VScroll.vue\";\nimport HScroll from \"./HScroll.vue\";\nimport { onMounted, onUnmounted, reactive, ref, unref } from \"vue\";\nimport { tapIf, copyProps } from \"../helpers/functions\";\nimport { useResizeObserver } from \"../composition/useResizeObserver\";\n\nconst containerRef = ref<HTMLElement>();\n\nconst data = reactive({\n scrollTop: 0,\n scrollLeft: 0,\n clientHeight: 0,\n clientWidth: 0,\n scrollHeight: 0,\n scrollWidth: 0,\n});\n\nfunction updateState(container: HTMLElement) {\n copyProps(\n data,\n container,\n \"scrollTop\",\n \"scrollLeft\",\n \"clientHeight\",\n \"clientWidth\",\n \"scrollHeight\",\n \"scrollWidth\",\n );\n}\n\nconst onWheel = (e: WheelEvent) => {\n e.preventDefault();\n const root = e.currentTarget as HTMLElement;\n root.scrollTop += e.deltaY;\n root.scrollLeft += e.deltaX;\n updateState(root);\n};\n\nfunction updateTop(v: number) {\n tapIf(unref(containerRef), (el) => {\n el.scrollTop = v;\n updateState(el);\n });\n}\n\nfunction updateLeft(v: number) {\n tapIf(unref(containerRef), (el) => {\n el.scrollLeft = v;\n updateState(el);\n });\n}\n\nuseResizeObserver(containerRef, (el) => {\n tapIf(el, (el) => updateState(el));\n});\n\nonMounted(() => {\n tapIf(unref(containerRef), (root) => {\n updateState(root);\n root.addEventListener(\"wheel\", onWheel);\n });\n});\n\nonUnmounted(() => {\n tapIf(unref(containerRef), (root) => root.removeEventListener(\"wheel\", onWheel));\n});\n</script>\n\n<template>\n <div class=\"ui-scrollable\">\n <div ref=\"containerRef\" class=\"ui-scrollable__container\" @wheel=\"onWheel\">\n <slot />\n </div>\n <VScroll\n :scroll-top=\"data.scrollTop\"\n :client-height=\"data.clientHeight\"\n :scroll-height=\"data.scrollHeight\"\n @wheel.stop\n @update:scroll-top=\"updateTop\"\n />\n <HScroll\n :scroll-left=\"data.scrollLeft\"\n :client-width=\"data.clientWidth\"\n :scroll-width=\"data.scrollWidth\"\n @wheel.stop\n @update:scroll-left=\"updateLeft\"\n />\n </div>\n</template>\n"],"mappings":";;;;;;;;;EAOA,IAAM,IAAe,GAAkB,EAEjC,IAAO,EAAS;GACpB,WAAW;GACX,YAAY;GACZ,cAAc;GACd,aAAa;GACb,cAAc;GACd,aAAa;GACd,CAAC;EAEF,SAAS,EAAY,GAAwB;AAC3C,KACE,GACA,GACA,aACA,cACA,gBACA,eACA,gBACA,cACD;;EAGH,IAAM,KAAW,MAAkB;AACjC,KAAE,gBAAgB;GAClB,IAAM,IAAO,EAAE;AAGf,GAFA,EAAK,aAAa,EAAE,QACpB,EAAK,cAAc,EAAE,QACrB,EAAY,EAAK;;EAGnB,SAAS,EAAU,GAAW;AAC5B,KAAM,EAAM,EAAa,GAAG,MAAO;AAEjC,IADA,EAAG,YAAY,GACf,EAAY,EAAG;KACf;;EAGJ,SAAS,EAAW,GAAW;AAC7B,KAAM,EAAM,EAAa,GAAG,MAAO;AAEjC,IADA,EAAG,aAAa,GAChB,EAAY,EAAG;KACf;;SAGJ,EAAkB,IAAe,MAAO;AACtC,KAAM,IAAK,MAAO,EAAY,EAAG,CAAC;IAClC,EAEF,QAAgB;AACd,KAAM,EAAM,EAAa,GAAG,MAAS;AAEnC,IADA,EAAY,EAAK,EACjB,EAAK,iBAAiB,SAAS,EAAQ;KACvC;IACF,EAEF,QAAkB;AAChB,KAAM,EAAM,EAAa,GAAG,MAAS,EAAK,oBAAoB,SAAS,EAAQ,CAAC;IAChF,kBAIA,EAkBM,OAlBN,GAkBM;GAjBJ,EAEM,OAAA;aAFG;IAAJ,KAAI;IAAe,OAAM;IAAmC;OAC/D,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA;GAEV,EAME,GAAA;IALC,cAAY,EAAK;IACjB,iBAAe,EAAK;IACpB,iBAAe,EAAK;IACpB,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;IACV,sBAAmB;;;;;;GAEtB,EAME,GAAA;IALC,eAAa,EAAK;IAClB,gBAAc,EAAK;IACnB,gBAAc,EAAK;IACnB,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;IACV,uBAAoB"}

package/dist/components/Slider.js CHANGED Viewed

@@ -1,5 +1,7 @@
 import e from "./Slider.vue2.js";
+//#region src/components/Slider.vue
 var t = e;
+//#endregion
 export { t as default };
 //# sourceMappingURL=Slider.js.map

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

@@ -6,6 +6,7 @@ import "./PlTooltip/index.js";
 import { useSliderBreakpoints as i } from "../composition/useSliderBreakpoints.js";
 import { getErrorMessage as a } from "../helpers/error.js";
 import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, defineComponent as f, normalizeClass as p, normalizeStyle as m, openBlock as h, reactive as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useSlots as S, watch as C, withCtx as w } from "vue";
+//#region src/components/Slider.vue?vue&type=script&setup=true&lang.ts
 var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section" }, D = {
 	key: 0,
 	class: "text-s"
@@ -105,6 +106,7 @@ var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section"
 		}, null, 40, N)) : l("", !0)])], 2), U.value ? (h(), u("div", P, b(U.value), 1)) : l("", !0)], 2));
 	}
 });
+//#endregion
 export { F as default };
 //# sourceMappingURL=Slider.vue2.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/Slider.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, reactive, ref, unref, useSlots, watch } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: number;\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue: 0,\n});\n\nconst range = computed(() => props.max - props.min);\n\nconst localValue = computed(() => {\n return clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max);\n});\n\nconst realtimeVal = ref(props.modelValue);\n\nconst error = computed(() => {\n const v = props.modelValue;\n\n if (!Number.isFinite(v)) {\n return \"Not a number\";\n }\n\n if (v < props.min) {\n return `Min value: ${props.min}`;\n }\n\n if (v > props.max) {\n return `Max value: ${props.max}`;\n }\n\n return getErrorMessage(props.error);\n});\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst position = computed(() => {\n return (localValue.value - props.min) / range.value;\n});\n\nconst progressStyle = computed(() => ({\n right: Math.ceil((1 - position.value) * 100) + \"%\",\n}));\n\nconst thumbStyle = computed(() => {\n const value = Math.ceil((1 - position.value) * 100);\n return {\n right: `calc(${value}%) `,\n };\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef = ref<HTMLElement>();\n\nwatch(\n () => props.modelValue,\n (val) => {\n realtimeVal.value = val;\n },\n);\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nuseMouseCapture(thumbRef, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue = (dx / rect.width) * range.value;\n\n realtimeVal.value = round(\n clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max),\n );\n\n if (ev.stop) {\n emit(\"update:modelValue\", round(localValue.value));\n data.deltaValue = 0;\n }\n });\n});\n\nfunction setModelValue(value: number) {\n emit(\"update:modelValue\", round(value));\n}\n\nfunction updateModelValue(event: Event) {\n setModelValue(+(event.target as HTMLInputElement).value);\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n setModelValue(props.modelValue + nextStep);\n}\n</script>\n\n<template>\n <div :class=\"props.disabled ? 'ui-slider__disabled' : undefined\" class=\"ui-slider__envelope\">\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <div v-if=\"props.mode === 'text'\" class=\"ui-slider__value-static text-s\">\n {{ realtimeVal }}{{ measure }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" class=\"ui-slider__bar\">\n <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef\"\n tabindex=\"0\"\n class=\"ui-slider__thumb ui-slider__thumb-active\"\n :style=\"thumbStyle\"\n @keydown=\"handleKeyPress\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <input\n v-if=\"props.mode === 'input'\"\n :value=\"realtimeVal\"\n class=\"ui-slider__value text-s\"\n @change=\"updateModelValue($event)\"\n />\n </div>\n </div>\n <!-- <div v-if=\"props.helper\" class=\"ui-slider__helper\">\n {{ props.helper }}\n </div> -->\n <div v-if=\"error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"Slider.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/Slider.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, reactive, ref, unref, useSlots, watch } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: number;\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue: 0,\n});\n\nconst range = computed(() => props.max - props.min);\n\nconst localValue = computed(() => {\n return clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max);\n});\n\nconst realtimeVal = ref(props.modelValue);\n\nconst error = computed(() => {\n const v = props.modelValue;\n\n if (!Number.isFinite(v)) {\n return \"Not a number\";\n }\n\n if (v < props.min) {\n return `Min value: ${props.min}`;\n }\n\n if (v > props.max) {\n return `Max value: ${props.max}`;\n }\n\n return getErrorMessage(props.error);\n});\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst position = computed(() => {\n return (localValue.value - props.min) / range.value;\n});\n\nconst progressStyle = computed(() => ({\n right: Math.ceil((1 - position.value) * 100) + \"%\",\n}));\n\nconst thumbStyle = computed(() => {\n const value = Math.ceil((1 - position.value) * 100);\n return {\n right: `calc(${value}%) `,\n };\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef = ref<HTMLElement>();\n\nwatch(\n () => props.modelValue,\n (val) => {\n realtimeVal.value = val;\n },\n);\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nuseMouseCapture(thumbRef, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue = (dx / rect.width) * range.value;\n\n realtimeVal.value = round(\n clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max),\n );\n\n if (ev.stop) {\n emit(\"update:modelValue\", round(localValue.value));\n data.deltaValue = 0;\n }\n });\n});\n\nfunction setModelValue(value: number) {\n emit(\"update:modelValue\", round(value));\n}\n\nfunction updateModelValue(event: Event) {\n setModelValue(+(event.target as HTMLInputElement).value);\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n setModelValue(props.modelValue + nextStep);\n}\n</script>\n\n<template>\n <div :class=\"props.disabled ? 'ui-slider__disabled' : undefined\" class=\"ui-slider__envelope\">\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <div v-if=\"props.mode === 'text'\" class=\"ui-slider__value-static text-s\">\n {{ realtimeVal }}{{ measure }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" class=\"ui-slider__bar\">\n <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef\"\n tabindex=\"0\"\n class=\"ui-slider__thumb ui-slider__thumb-active\"\n :style=\"thumbStyle\"\n @keydown=\"handleKeyPress\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <input\n v-if=\"props.mode === 'input'\"\n :value=\"realtimeVal\"\n class=\"ui-slider__value text-s\"\n @change=\"updateModelValue($event)\"\n />\n </div>\n </div>\n <!-- <div v-if=\"props.helper\" class=\"ui-slider__helper\">\n {{ props.helper }}\n </div> -->\n <div v-if=\"error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,IAAM,IAAQ,GAAU,EAElB,IAAO,GAEP,IAAQ,GA2BR,IAAO,EAAS,EACpB,YAAY,GACb,CAAC,EAEI,IAAQ,QAAe,EAAM,MAAM,EAAM,IAAI,EAE7C,IAAa,QACV,GAAO,EAAM,cAAc,KAAK,EAAK,YAAY,EAAM,KAAK,EAAM,IAAI,CAC7E,EAEI,IAAc,EAAI,EAAM,WAAW,EAEnC,IAAQ,QAAe;GAC3B,IAAM,IAAI,EAAM;AAchB,UAZK,OAAO,SAAS,EAAE,GAInB,IAAI,EAAM,MACL,cAAc,EAAM,QAGzB,IAAI,EAAM,MACL,cAAc,EAAM,QAGtB,EAAgB,EAAM,MAAM,GAX1B;IAYT,EAII,IAAiB,EAFN,QAAe,EAAM,CAEe,EAE/C,IAAW,SACP,EAAW,QAAQ,EAAM,OAAO,EAAM,MAC9C,EAEI,IAAgB,SAAgB,EACpC,OAAO,KAAK,MAAM,IAAI,EAAS,SAAS,IAAI,GAAG,KAChD,EAAE,EAEG,IAAa,SAEV,EACL,OAAO,QAFK,KAAK,MAAM,IAAI,EAAS,SAAS,IAAI,CAE5B,MACtB,EACD,EAEI,IAAS,GAAkB,EAC3B,IAAW,GAAkB;AAEnC,UACQ,EAAM,aACX,MAAQ;AACP,KAAY,QAAQ;IAEvB;EAED,SAAS,EAAM,GAAe;GAC5B,IAAM,IAAI,EAAM,GAAO,EAAM,KAAK,EAAM,IAAI;AAE5C,UAAO,KAAK,OAAO,iBAAuB,IAAI,EAAM,MAAM,IAAI,IAAI,EAAM;;AAG1E,IAAgB,IAAW,MAAO;AAChC,KAAM,EAAM,EAAO,EAAE,uBAAuB,GAAG,MAAS;IACtD,IAAM,EAAE,UAAO;AAQf,IANA,EAAK,aAAc,IAAK,EAAK,QAAS,EAAM,OAE5C,EAAY,QAAQ,EAClB,GAAO,EAAM,cAAc,KAAK,EAAK,YAAY,EAAM,KAAK,EAAM,IAAI,CACvE,EAEG,EAAG,SACL,EAAK,qBAAqB,EAAM,EAAW,MAAM,CAAC,EAClD,EAAK,aAAa;KAEpB;IACF;EAEF,SAAS,EAAc,GAAe;AACpC,KAAK,qBAAqB,EAAM,EAAM,CAAC;;EAGzC,SAAS,EAAiB,GAAc;AACtC,KAAc,CAAE,EAAM,OAA4B,MAAM;;EAG1D,SAAS,EAAe,GAA6C;AACnE,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;AAER,KAAc,EAAM,aAAa,EAAS;;yBAK1C,EA2DM,OAAA,EA3DA,OAAK,EAAA,CAAE,EAAM,WAAQ,wBAA2B,KAAA,GAAiB,sBAAqB,CAAA,EAAA,EAAA,CAC1F,EAmDM,OAAA,EAnDA,OAAK,EAAA,CAAA,mBAAqB,EAAM,QAAc,YAAW,CAAA,EAAA,EAAA,CAC7D,EAwCM,OAxCN,GAwCM,CAvCJ,EAYM,OAZN,GAYM,CAXS,EAAA,SAAA,GAAA,EAAb,EAOQ,SAPR,GAOQ,CANN,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA,EACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;GAJoB,OAAM;GAAO,UAAS;;GACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;kCAIlB,EAAM,SAAI,UAAA,GAAA,EAArB,EAEM,OAFN,GAEM,EADD,EAAA,MAAW,GAAA,EAAM,EAAA,QAAO,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA,EAG/B,EAyBM,OAzBN,GAyBM,CAxBJ,EAIM,OAJN,GAIM,CAHJ,EAEM,OAAA;YAFG;GAAJ,KAAI;GAAS,OAAM;MACtB,EAA0D,OAAA;GAArD,OAAM;GAAuB,OAAK,EAAE,EAAA,MAAa;wBAG1D,EAkBM,OAlBN,GAkBM,CAjBY,EAAM,eAAA,EAAA,GAAA,EACpB,EAKE,GAAA,EAAA,KAAA,GAAA,EAAA,EAJwB,EAAA,EAAc,GAA9B,GAAM,YADhB,EAKE,OAAA;GAHC,KAAK;GACL,OAAK,EAAA,EAAA,OAAA,GAAc,EAAI,IAAA,CAAA;GACxB,OAAM;oCAGV,EAQM,OAAA;YAPA;GAAJ,KAAI;GACJ,UAAS;GACT,OAAM;GACL,OAAK,EAAE,EAAA,MAAU;GACjB,WAAS;mBAEV,EAAgD,OAAA,EAA3C,OAAM,oCAAkC,EAAA,MAAA,GAAA,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAMrD,EAOM,OAPN,GAOM,CALI,EAAM,SAAI,WAAA,GAAA,EADlB,EAKE,SAAA;;GAHC,OAAO,EAAA;GACR,OAAM;GACL,UAAM,AAAA,EAAA,QAAA,MAAE,EAAiB,EAAM;uCAO3B,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA"}

package/dist/components/SliderRange.js CHANGED Viewed

@@ -1,5 +1,7 @@
 import e from "./SliderRange.vue2.js";
+//#region src/components/SliderRange.vue
 var t = e;
+//#endregion
 export { t as default };
 //# sourceMappingURL=SliderRange.js.map

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

@@ -7,6 +7,7 @@ import { useSliderBreakpoints as i } from "../composition/useSliderBreakpoints.j
 import { getErrorMessage as a } from "../helpers/error.js";
 import o from "./InputRange.js";
 import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, openBlock as g, reactive as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useSlots as C, watch as w, withCtx as ee } from "vue";
+//#region src/components/SliderRange.vue?vue&type=script&setup=true&lang.ts
 var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section" }, D = {
 	key: 0,
 	class: "text-s"
@@ -128,6 +129,7 @@ var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section"
 		}, null, 8, ["modelValue"])) : u("", !0)])], 2), q.value ? (g(), d("div", te, x(q.value), 1)) : u("", !0)], 2));
 	}
 });
+//#endregion
 export { N as default };
 //# sourceMappingURL=SliderRange.vue2.js.map

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

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

package/dist/components/SliderRangeTriple.js CHANGED Viewed

@@ -1,5 +1,7 @@
 import e from "./SliderRangeTriple.vue2.js";
+//#region src/components/SliderRangeTriple.vue
 var t = e;
+//#endregion
 export { t as default };
 //# sourceMappingURL=SliderRangeTriple.js.map

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

@@ -6,6 +6,7 @@ import "./PlTooltip/index.js";
 import { useSliderBreakpoints as i } from "../composition/useSliderBreakpoints.js";
 import { getErrorMessage as ee } from "../helpers/error.js";
 import { Fragment as a, computed as o, createBlock as te, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, onMounted as ne, openBlock as p, reactive as re, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, useSlots as y, withCtx as ie } from "vue";
+//#region src/components/SliderRangeTriple.vue?vue&type=script&setup=true&lang.ts
 var ae = { class: "ui-slider__wrapper" }, oe = { class: "ui-slider__label-section" }, b = {
 	key: 0,
 	class: "text-s"
@@ -179,6 +180,7 @@ var ae = { class: "ui-slider__wrapper" }, oe = { class: "ui-slider__label-sectio
 		])])]), t[6] ||= l("div", { class: "ui-slider__input-wrapper d-flex" }, null, -1)], 2), V.value ? (p(), c("div", D, _(V.value), 1)) : s("", !0)], 2));
 	}
 });
+//#endregion
 export { O as default };
 //# sourceMappingURL=SliderRangeTriple.vue2.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderRangeTriple.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/SliderRangeTriple.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onMounted, reactive, ref, unref, useSlots } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\ntype ModelType = [number, number, number];\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: ModelType;\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"%\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue1: 0,\n deltaValue2: 0,\n deltaValue3: 0,\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef1 = ref<HTMLElement>();\nconst thumbRef2 = ref<HTMLElement>();\nconst thumbRef3 = ref<HTMLElement>();\n\nconst range = computed(() => props.max - props.min);\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst localValue1 = computed(() =>\n clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max),\n);\nconst localValue2 = computed(() =>\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n);\nconst localValue3 = computed(() =>\n clamp((props.modelValue[2] ?? 0) + data.deltaValue3, props.min, props.max),\n);\n\nconst error = computed(() => {\n const v = props.modelValue as unknown;\n\n const isValidModel = Array.isArray(v) && v.length === 3 && v.every((it) => Number.isFinite(it));\n\n if (!isValidModel) {\n return \"Expected model [number, number, number]\";\n }\n\n const errors: string[] = [];\n\n [...props.modelValue].forEach((v) => {\n if (v > props.max) {\n errors.push(`Max model value must be lower than max props ${props.max}.`);\n }\n if (v < props.min) {\n errors.push(\"Min model value must be greater than max props.\");\n }\n });\n\n if (errors.length > 0) {\n return errors.join(\" \");\n }\n\n return getErrorMessage(props.error);\n});\n\nconst position1 = computed(() => {\n return (localValue1.value - props.min) / range.value;\n});\n\nconst position2 = computed(() => {\n return (localValue2.value - props.min) / range.value;\n});\n\nconst position3 = computed(() => {\n return (localValue3.value - props.min) / range.value;\n});\n\nconst leftRight = computed(() => getLeftAndRight());\n\nconst progressStyle = computed(() => ({\n right: leftRight.value[0] + \"%\",\n left: 100 - leftRight.value[2] + \"%\",\n}));\n\nconst thumbStyle1 = computed(() => ({\n right: Math.ceil((1 - position1.value) * 100) + \"%\",\n}));\n\nconst thumbStyle2 = computed(() => ({\n right: Math.ceil((1 - position2.value) * 100) + \"%\",\n}));\n\nconst thumbStyle3 = computed(() => ({\n right: Math.ceil((1 - position3.value) * 100) + \"%\",\n}));\n\nuseMouseCapture(thumbRef1, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue1 = (dx / rect.width) * range.value;\n\n if (thumbRef1.value) {\n updateDatasetForThumb(thumbRef1.value, props.modelValue[0], data.deltaValue1);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue1 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef2, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue2 = (dx / rect.width) * range.value;\n\n if (thumbRef2.value) {\n updateDatasetForThumb(thumbRef2.value, props.modelValue[1], data.deltaValue2);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue2 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef3, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue3 = (dx / rect.width) * range.value;\n\n if (thumbRef3.value) {\n updateDatasetForThumb(thumbRef3.value, props.modelValue[2], data.deltaValue3);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue3 = 0;\n }\n });\n});\n\nfunction updateDatasetForThumb(thumb: HTMLElement, modelVal: number, delta: number) {\n const value = round(clamp((modelVal ?? 0) + delta, props.min, props.max));\n thumb.dataset.percent = `${value}${props.measure}`;\n getHint();\n}\n\nfunction getLeftAndRight() {\n const point1 = Math.ceil((1 - position1.value) * 100);\n const point2 = Math.ceil((1 - position2.value) * 100);\n const point3 = Math.ceil((1 - position3.value) * 100);\n return [point1, point2, point3].sort((a, b) => a - b);\n}\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nfunction setModelValue(value: ModelType) {\n emit(\"update:modelValue\", value);\n}\n\nfunction getHint() {\n const right1 = Number(thumbStyle1.value.right.substring(0, thumbStyle1.value.right.length - 1));\n const right2 = Number(thumbStyle2.value.right.substring(0, thumbStyle2.value.right.length - 1));\n const right3 = Number(thumbStyle3.value.right.substring(0, thumbStyle3.value.right.length - 1));\n\n const arr = [\n { r: right1, th: thumbRef1 },\n { r: right2, th: thumbRef2 },\n { r: right3, th: thumbRef3 },\n ].sort((a, b) => a.r - b.r);\n\n if (arr[0].th.value) {\n arr[0].th.value.dataset.hint = \"high\";\n }\n if (arr[1].th.value) {\n arr[1].th.value.dataset.hint = \"mid\";\n }\n\n if (arr[2].th.value) {\n arr[2].th.value.dataset.hint = \"low\";\n }\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }, index: number) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n const arr: ModelType = [...props.modelValue];\n arr[index] = clamp(arr[index] + nextStep, props.min, props.max);\n setModelValue(arr);\n getHint();\n}\n\nonMounted(() => {\n getHint();\n});\n</script>\n\n<template>\n <div\n :class=\"props.disabled ? 'ui-slider__disabled' : undefined\"\n class=\"ui-slider__envelope ui-slider__triple\"\n >\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" class=\"ui-slider__bar\">\n <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef1\"\n :style=\"thumbStyle1\"\n :data-percent=\"props.modelValue[0] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r1\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 0)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef2\"\n :style=\"thumbStyle2\"\n :data-percent=\"props.modelValue[1] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r2\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 1)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef3\"\n :style=\"thumbStyle3\"\n :data-percent=\"props.modelValue[2] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r3\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 2)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <!-- {{ props.modelValue }} -->\n <!-- <InputRange v-if=\"props.mode === 'input'\" v-model=\"inputRange\" class=\"ui-focused-border\" /> -->\n </div>\n </div>\n <!-- <div v-if=\"helper\" class=\"ui-slider__helper\">\n {{ helper }}\n </div> -->\n <div v-if=\"error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n\n<style></style>\n"],"mappings":"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"}
1	+ {"version":3,"file":"SliderRangeTriple.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/SliderRangeTriple.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onMounted, reactive, ref, unref, useSlots } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\ntype ModelType = [number, number, number];\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: ModelType;\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"%\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue1: 0,\n deltaValue2: 0,\n deltaValue3: 0,\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef1 = ref<HTMLElement>();\nconst thumbRef2 = ref<HTMLElement>();\nconst thumbRef3 = ref<HTMLElement>();\n\nconst range = computed(() => props.max - props.min);\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst localValue1 = computed(() =>\n clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max),\n);\nconst localValue2 = computed(() =>\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n);\nconst localValue3 = computed(() =>\n clamp((props.modelValue[2] ?? 0) + data.deltaValue3, props.min, props.max),\n);\n\nconst error = computed(() => {\n const v = props.modelValue as unknown;\n\n const isValidModel = Array.isArray(v) && v.length === 3 && v.every((it) => Number.isFinite(it));\n\n if (!isValidModel) {\n return \"Expected model [number, number, number]\";\n }\n\n const errors: string[] = [];\n\n [...props.modelValue].forEach((v) => {\n if (v > props.max) {\n errors.push(`Max model value must be lower than max props ${props.max}.`);\n }\n if (v < props.min) {\n errors.push(\"Min model value must be greater than max props.\");\n }\n });\n\n if (errors.length > 0) {\n return errors.join(\" \");\n }\n\n return getErrorMessage(props.error);\n});\n\nconst position1 = computed(() => {\n return (localValue1.value - props.min) / range.value;\n});\n\nconst position2 = computed(() => {\n return (localValue2.value - props.min) / range.value;\n});\n\nconst position3 = computed(() => {\n return (localValue3.value - props.min) / range.value;\n});\n\nconst leftRight = computed(() => getLeftAndRight());\n\nconst progressStyle = computed(() => ({\n right: leftRight.value[0] + \"%\",\n left: 100 - leftRight.value[2] + \"%\",\n}));\n\nconst thumbStyle1 = computed(() => ({\n right: Math.ceil((1 - position1.value) * 100) + \"%\",\n}));\n\nconst thumbStyle2 = computed(() => ({\n right: Math.ceil((1 - position2.value) * 100) + \"%\",\n}));\n\nconst thumbStyle3 = computed(() => ({\n right: Math.ceil((1 - position3.value) * 100) + \"%\",\n}));\n\nuseMouseCapture(thumbRef1, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue1 = (dx / rect.width) * range.value;\n\n if (thumbRef1.value) {\n updateDatasetForThumb(thumbRef1.value, props.modelValue[0], data.deltaValue1);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue1 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef2, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue2 = (dx / rect.width) * range.value;\n\n if (thumbRef2.value) {\n updateDatasetForThumb(thumbRef2.value, props.modelValue[1], data.deltaValue2);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue2 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef3, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue3 = (dx / rect.width) * range.value;\n\n if (thumbRef3.value) {\n updateDatasetForThumb(thumbRef3.value, props.modelValue[2], data.deltaValue3);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue3 = 0;\n }\n });\n});\n\nfunction updateDatasetForThumb(thumb: HTMLElement, modelVal: number, delta: number) {\n const value = round(clamp((modelVal ?? 0) + delta, props.min, props.max));\n thumb.dataset.percent = `${value}${props.measure}`;\n getHint();\n}\n\nfunction getLeftAndRight() {\n const point1 = Math.ceil((1 - position1.value) * 100);\n const point2 = Math.ceil((1 - position2.value) * 100);\n const point3 = Math.ceil((1 - position3.value) * 100);\n return [point1, point2, point3].sort((a, b) => a - b);\n}\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nfunction setModelValue(value: ModelType) {\n emit(\"update:modelValue\", value);\n}\n\nfunction getHint() {\n const right1 = Number(thumbStyle1.value.right.substring(0, thumbStyle1.value.right.length - 1));\n const right2 = Number(thumbStyle2.value.right.substring(0, thumbStyle2.value.right.length - 1));\n const right3 = Number(thumbStyle3.value.right.substring(0, thumbStyle3.value.right.length - 1));\n\n const arr = [\n { r: right1, th: thumbRef1 },\n { r: right2, th: thumbRef2 },\n { r: right3, th: thumbRef3 },\n ].sort((a, b) => a.r - b.r);\n\n if (arr[0].th.value) {\n arr[0].th.value.dataset.hint = \"high\";\n }\n if (arr[1].th.value) {\n arr[1].th.value.dataset.hint = \"mid\";\n }\n\n if (arr[2].th.value) {\n arr[2].th.value.dataset.hint = \"low\";\n }\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }, index: number) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n const arr: ModelType = [...props.modelValue];\n arr[index] = clamp(arr[index] + nextStep, props.min, props.max);\n setModelValue(arr);\n getHint();\n}\n\nonMounted(() => {\n getHint();\n});\n</script>\n\n<template>\n <div\n :class=\"props.disabled ? 'ui-slider__disabled' : undefined\"\n class=\"ui-slider__envelope ui-slider__triple\"\n >\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" class=\"ui-slider__bar\">\n <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef1\"\n :style=\"thumbStyle1\"\n :data-percent=\"props.modelValue[0] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r1\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 0)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef2\"\n :style=\"thumbStyle2\"\n :data-percent=\"props.modelValue[1] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r2\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 1)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef3\"\n :style=\"thumbStyle3\"\n :data-percent=\"props.modelValue[2] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r3\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 2)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <!-- {{ props.modelValue }} -->\n <!-- <InputRange v-if=\"props.mode === 'input'\" v-model=\"inputRange\" class=\"ui-focused-border\" /> -->\n </div>\n </div>\n <!-- <div v-if=\"helper\" class=\"ui-slider__helper\">\n {{ helper }}\n </div> -->\n <div v-if=\"error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n\n<style></style>\n"],"mappings":"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"}

package/dist/components/TabItem.js CHANGED Viewed

@@ -1,5 +1,7 @@
 import e from "./TabItem.vue2.js";
+//#region src/components/TabItem.vue
 var t = e;
+//#endregion
 export { t as default };
 //# sourceMappingURL=TabItem.js.map

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

@@ -1,4 +1,5 @@
 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({
 	__name: "TabItem",
 	props: {
@@ -20,6 +21,7 @@ var s = { class: "dropdown-tab-item__title text-caps13" }, c = /* @__PURE__ */ r
 		return (e, r) => (a(), t("div", { class: i([u.value, "dropdown-tab-item"]) }, [n("div", s, o(l.value), 1)], 2));
 	}
 });
+//#endregion
 export { c as default };
 //# sourceMappingURL=TabItem.vue2.js.map

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 :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"}

package/dist/components/ThemeSwitcher.js CHANGED Viewed

@@ -1,5 +1,7 @@
 import e from "./ThemeSwitcher.vue2.js";
+//#region src/components/ThemeSwitcher.vue
 var t = e;
+//#endregion
 export { t as default };
 //# sourceMappingURL=ThemeSwitcher.js.map

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

@@ -1,5 +1,6 @@
 import { useTheme as e } from "../composition/useTheme.js";
 import { createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, unref as o } from "vue";
+//#region src/components/ThemeSwitcher.vue?vue&type=script&setup=true&lang.ts
 var s = /* @__PURE__ */ r({
 	__name: "ThemeSwitcher",
 	setup(r) {
@@ -10,6 +11,7 @@ var s = /* @__PURE__ */ r({
 		}, [...r[1] ||= [n("div", null, null, -1)]], 2));
 	}
 });
+//#endregion
 export { s as default };
 //# sourceMappingURL=ThemeSwitcher.vue2.js.map