@milaboratories/uikit 2.4.1 → 2.4.3

package/dist/components/PlTabs/types.d.ts

@@ -10,4 +10,3 @@ export type TabOption<T extends string = string> = {
      */
     maxWidth?: string;
 };
-//# sourceMappingURL=types.d.ts.map

package/dist/components/PlTextArea/PlTextArea.vue.d.ts

@@ -115,4 +115,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=PlTextArea.vue.d.ts.map

package/dist/components/PlTextArea/PlTextArea.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTextArea.vue.js","sources":["../../../src/components/PlTextArea/PlTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Component for multi-line string data manipulation */\nexport default {\n  name: 'PlTextArea',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-textarea.scss';\nimport { computed, onMounted, ref, useSlots } from 'vue';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport { useValidation } from '../../utils/useValidation';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: 'update:modelValue', value: string): void;\n}>();\n\nconst props = defineProps<{\n  /**\n   * The current value of the texarea.\n   */\n  modelValue?: string;\n  /**\n   * The label to display above the texarea.\n   */\n  label?: string;\n  /**\n   * If `true`, the textarea is marked as required.\n   */\n  required?: boolean;\n  /**\n   * An error message to display below the textarea.\n   */\n  error?: unknown;\n  /**\n   * A helper text to display below the textarea when there are no errors.\n   */\n  helper?: string;\n  /**\n   * A placeholder text to display inside the textarea when it is empty.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the textarea is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the textarea is in a read-only state and cannot be edited, but it can still be focused and text can be selected.\n   */\n  readonly?: boolean;\n  /**\n   * If `true`, applies a dashed border style to the textarea, likely used for stylistic purposes or to indicate a certain state.\n   */\n  dashed?: boolean;\n  /**\n   * The number of visible text lines for the textarea, which controls the height of the textarea.\n   */\n  rows?: number;\n  /**\n   * If `true`, the textarea automatically adjusts its height to fit the content as the user types.\n   */\n  autogrow?: boolean;\n  /**\n   * An array of validation rules that are applied to the textarea input. Each rule is a function that receives the input value and returns `true` for valid input or an error message string for invalid input.\n   */\n  rules?: ((v: string) => boolean | string)[];\n}>();\n\nconst root = ref<HTMLInputElement>();\nconst input = ref<HTMLTextAreaElement>();\n\nconst value = computed({\n  get() {\n    return props.modelValue ?? '';\n  },\n  set(v) {\n    emit('update:modelValue', v);\n  },\n});\n\nconst nonEmpty = computed(() => !!props.modelValue);\nconst validationData = useValidation(value, props.rules || []);\n\nuseLabelNotch(root);\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n\n  if (propsError) {\n    errors.push(propsError);\n  }\n\n  errors.push(...validationData.value.errors);\n\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst adjustHeight = () => {\n  if (!props.autogrow) {\n    return;\n  }\n  const el = input.value;\n  if (el) {\n    el.style.height = 'auto'; // it works, do not delete it\n    el.style.height = `${el.scrollHeight}px`; // Set height based on scrollHeight\n  }\n};\n\nonMounted(() => {\n  adjustHeight();\n});\n</script>\n\n<template>\n  <div class=\"ui-text-area__envelope\">\n    <div ref=\"root\" class=\"ui-text-area\" :class=\"{ error: hasErrors, disabled, dashed, nonEmpty }\">\n      <label v-if=\"label\" ref=\"label\">\n        <SvgRequired v-if=\"required\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <textarea\n        ref=\"input\"\n        v-model=\"value\"\n        :readonly=\"readonly\"\n        :rows=\"rows\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder ?? '...'\"\n        spellcheck=\"false\"\n        @input=\"adjustHeight\"\n      />\n      <div class=\"ui-text-area__append\">\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"ui-text-area__contour\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"ui-text-area__error\">\n      {{ displayErrors.join(' ') }}\n    </div>\n    <div v-else-if=\"helper\" class=\"ui-text-area__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"names":["__default__","slots","useSlots","emit","__emit","props","__props","root","ref","input","value","computed","v","nonEmpty","validationData","useValidation","useLabelNotch","displayErrors","errors","propsError","getErrorMessage","hasErrors","adjustHeight","el","onMounted"],"mappings":";;;;;;;;;;;;;;;;;GAEeA,IAAA;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;;AAaA,UAAMC,IAAQC,EAAS,GAEjBC,IAAOC,GAOPC,IAAQC,GAmDRC,IAAOC,EAAsB,GAC7BC,IAAQD,EAAyB,GAEjCE,IAAQC,EAAS;AAAA,MACrB,MAAM;AACJ,eAAON,EAAM,cAAc;AAAA,MAC7B;AAAA,MACA,IAAIO,GAAG;AACL,QAAAT,EAAK,qBAAqBS,CAAC;AAAA,MAAA;AAAA,IAC7B,CACD,GAEKC,IAAWF,EAAS,MAAM,CAAC,CAACN,EAAM,UAAU,GAC5CS,IAAiBC,EAAcL,GAAOL,EAAM,SAAS,CAAA,CAAE;AAE7D,IAAAW,EAAcT,CAAI;AAEZ,UAAAU,IAAgBN,EAAS,MAAM;AACnC,YAAMO,IAAmB,CAAC,GACpBC,IAAaC,EAAgBf,EAAM,KAAK;AAE9C,aAAIc,KACFD,EAAO,KAAKC,CAAU,GAGxBD,EAAO,KAAK,GAAGJ,EAAe,MAAM,MAAM,GAEnCI;AAAA,IAAA,CACR,GAEKG,IAAYV,EAAS,MAAMM,EAAc,MAAM,SAAS,CAAC,GAEzDK,IAAe,MAAM;AACrB,UAAA,CAACjB,EAAM;AACT;AAEF,YAAMkB,IAAKd,EAAM;AACjB,MAAIc,MACFA,EAAG,MAAM,SAAS,QAClBA,EAAG,MAAM,SAAS,GAAGA,EAAG,YAAY;AAAA,IAExC;AAEA,WAAAC,EAAU,MAAM;AACD,MAAAF,EAAA;AAAA,IAAA,CACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlTextArea.vue.js","sources":["../../../src/components/PlTextArea/PlTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Component for multi-line string data manipulation */\nexport default {\n  name: 'PlTextArea',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-textarea.scss';\nimport { computed, onMounted, ref, useSlots } from 'vue';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport { useValidation } from '../../utils/useValidation';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: 'update:modelValue', value: string): void;\n}>();\n\nconst props = defineProps<{\n  /**\n   * The current value of the texarea.\n   */\n  modelValue?: string;\n  /**\n   * The label to display above the texarea.\n   */\n  label?: string;\n  /**\n   * If `true`, the textarea is marked as required.\n   */\n  required?: boolean;\n  /**\n   * An error message to display below the textarea.\n   */\n  error?: unknown;\n  /**\n   * A helper text to display below the textarea when there are no errors.\n   */\n  helper?: string;\n  /**\n   * A placeholder text to display inside the textarea when it is empty.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the textarea is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the textarea is in a read-only state and cannot be edited, but it can still be focused and text can be selected.\n   */\n  readonly?: boolean;\n  /**\n   * If `true`, applies a dashed border style to the textarea, likely used for stylistic purposes or to indicate a certain state.\n   */\n  dashed?: boolean;\n  /**\n   * The number of visible text lines for the textarea, which controls the height of the textarea.\n   */\n  rows?: number;\n  /**\n   * If `true`, the textarea automatically adjusts its height to fit the content as the user types.\n   */\n  autogrow?: boolean;\n  /**\n   * An array of validation rules that are applied to the textarea input. Each rule is a function that receives the input value and returns `true` for valid input or an error message string for invalid input.\n   */\n  rules?: ((v: string) => boolean | string)[];\n}>();\n\nconst root = ref<HTMLInputElement>();\nconst input = ref<HTMLTextAreaElement>();\n\nconst value = computed({\n  get() {\n    return props.modelValue ?? '';\n  },\n  set(v) {\n    emit('update:modelValue', v);\n  },\n});\n\nconst nonEmpty = computed(() => !!props.modelValue);\nconst validationData = useValidation(value, props.rules || []);\n\nuseLabelNotch(root);\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n\n  if (propsError) {\n    errors.push(propsError);\n  }\n\n  errors.push(...validationData.value.errors);\n\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst adjustHeight = () => {\n  if (!props.autogrow) {\n    return;\n  }\n  const el = input.value;\n  if (el) {\n    el.style.height = 'auto'; // it works, do not delete it\n    el.style.height = `${el.scrollHeight}px`; // Set height based on scrollHeight\n  }\n};\n\nonMounted(() => {\n  adjustHeight();\n});\n</script>\n\n<template>\n  <div class=\"ui-text-area__envelope\">\n    <div ref=\"root\" class=\"ui-text-area\" :class=\"{ error: hasErrors, disabled, dashed, nonEmpty }\">\n      <label v-if=\"label\" ref=\"label\">\n        <SvgRequired v-if=\"required\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <textarea\n        ref=\"input\"\n        v-model=\"value\"\n        :readonly=\"readonly\"\n        :rows=\"rows\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder ?? '...'\"\n        spellcheck=\"false\"\n        @input=\"adjustHeight\"\n      />\n      <div class=\"ui-text-area__append\">\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"ui-text-area__contour\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"ui-text-area__error\">\n      {{ displayErrors.join(' ') }}\n    </div>\n    <div v-else-if=\"helper\" class=\"ui-text-area__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"names":["__default__","slots","useSlots","emit","__emit","props","__props","root","ref","input","value","computed","v","nonEmpty","validationData","useValidation","useLabelNotch","displayErrors","errors","propsError","getErrorMessage","hasErrors","adjustHeight","el","onMounted"],"mappings":";;;;;;;;;;;;;;;;;GAEAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;;AAaA,UAAMC,IAAQC,EAAA,GAERC,IAAOC,GAOPC,IAAQC,GAmDRC,IAAOC,EAAA,GACPC,IAAQD,EAAA,GAERE,IAAQC,EAAS;AAAA,MACrB,MAAM;AACJ,eAAON,EAAM,cAAc;AAAA,MAC7B;AAAA,MACA,IAAIO,GAAG;AACL,QAAAT,EAAK,qBAAqBS,CAAC;AAAA,MAC7B;AAAA,IAAA,CACD,GAEKC,IAAWF,EAAS,MAAM,CAAC,CAACN,EAAM,UAAU,GAC5CS,IAAiBC,EAAcL,GAAOL,EAAM,SAAS,CAAA,CAAE;AAE7D,IAAAW,EAAcT,CAAI;AAElB,UAAMU,IAAgBN,EAAS,MAAM;AACnC,YAAMO,IAAmB,CAAA,GACnBC,IAAaC,EAAgBf,EAAM,KAAK;AAE9C,aAAIc,KACFD,EAAO,KAAKC,CAAU,GAGxBD,EAAO,KAAK,GAAGJ,EAAe,MAAM,MAAM,GAEnCI;AAAA,IACT,CAAC,GAEKG,IAAYV,EAAS,MAAMM,EAAc,MAAM,SAAS,CAAC,GAEzDK,IAAe,MAAM;AACzB,UAAI,CAACjB,EAAM;AACT;AAEF,YAAMkB,IAAKd,EAAM;AACjB,MAAIc,MACFA,EAAG,MAAM,SAAS,QAClBA,EAAG,MAAM,SAAS,GAAGA,EAAG,YAAY;AAAA,IAExC;AAEA,WAAAC,EAAU,MAAM;AACd,MAAAF,EAAA;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlTextArea/__tests__/PlTextArea.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/PlTextArea/index.d.ts

@@ -1,2 +1 @@
 export { default as PlTextArea } from './PlTextArea.vue';
-//# sourceMappingURL=index.d.ts.map

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

@@ -75,4 +75,3 @@ export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T]: T[K];
 } & {};
-//# sourceMappingURL=PlTextField.vue.d.ts.map

package/dist/components/PlTextField/PlTextField.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTextField.vue.js","sources":["../../../src/components/PlTextField/PlTextField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for one-line string data manipulation\n */\nexport default {\n  name: 'PlTextField',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M, E = string, C = E\">\nimport './pl-text-field.scss';\nimport { computed, reactive, ref, useSlots } from 'vue';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport { useValidation } from '../../utils/useValidation';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport type { Equal } from '@milaboratories/helpers';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\nconst slots = useSlots();\n\ntype Model = Equal<M, E | C> extends true ? M : never; // basically in === out\n\n/**\n * The current value of the input field.\n */\nconst model = defineModel<Model>({\n  required: true,\n});\n\nconst props = defineProps<{\n  /**\n   * The label to display above the input field.\n   */\n  label?: string;\n  /**\n   * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).\n   * Or you can pass a callback that returns a custom \"empty\" value (null | undefined | string)\n   */\n  clearable?: boolean | (() => C);\n  /**\n   * An optional callback to parse and/or cast the value, the return type overrides the model type.\n   * The callback must throw an exception if the value is invalid\n   */\n  parse?: (v: string) => E;\n  /**\n   * If `true`, the input field is marked as required.\n   */\n  required?: boolean;\n  /**\n   * An error message to display below the input field.\n   */\n  error?: unknown;\n  /**\n   * A helper text to display below the input field when there are no errors.\n   */\n  helper?: string;\n  /**\n   * A placeholder text to display inside the input field when it is empty.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the input field is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the input field has a dashed border.\n   */\n  dashed?: boolean;\n  /**\n   * A prefix text to display inside the input field before the value.\n   */\n  prefix?: string;\n  /**\n   * An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.\n   */\n  rules?: ((v: string) => boolean | string)[];\n  /**\n   * The string specifies whether the field should be a password or not, value could be \"password\" or undefined.\n   */\n  type?: 'password';\n}>();\n\nconst rootRef = ref<HTMLInputElement | undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst showPassword = ref(false);\n\nconst data = reactive({\n  cached: undefined as { error: string; value: string } | undefined,\n});\n\nconst valueRef = computed<string>({\n  get() {\n    if (data.cached) {\n      return data.cached.value;\n    }\n    return model.value === undefined || model.value === null ? '' : String(model.value);\n  },\n  set(value) {\n    data.cached = undefined;\n\n    if (props.parse) {\n      try {\n        model.value = props.parse(value) as Model;\n      } catch (err) {\n        data.cached = {\n          error: err instanceof Error ? err.message : String(err),\n          value,\n        };\n      }\n    } else {\n      model.value = value as Model;\n    }\n  },\n});\n\nconst fieldType = computed(() => {\n  if (props.type && props.type === 'password') {\n    return showPassword.value ? 'text' : props.type;\n  } else {\n    return 'text';\n  }\n});\n\nconst passwordIcon = computed(() => (showPassword.value ? 'view-show' : 'view-hide'));\n\nconst clear = () => {\n  if (props.clearable) {\n    data.cached = undefined;\n    model.value = props.clearable === true ? ('' as Model) : (props.clearable() as Model);\n  }\n};\n\nconst validationData = useValidation(valueRef, props.rules || []);\n\nconst isEmpty = computed(() => {\n  if (props.clearable) {\n    return props.clearable === true ? model.value === '' : model.value === props.clearable();\n  }\n\n  return model.value === '';\n});\n\nconst nonEmpty = computed(() => !isEmpty.value);\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n  if (propsError) {\n    errors.push(propsError);\n  }\n  if (data.cached) {\n    errors.push(data.cached.error);\n  }\n  if (!validationData.value.isValid) {\n    errors.push(...validationData.value.errors);\n  }\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(() => props.clearable && nonEmpty.value && props.type !== 'password' && !props.disabled);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\n\nconst onFocusOut = () => {\n  data.cached = undefined;\n};\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nuseLabelNotch(rootRef);\n</script>\n\n<template>\n  <div class=\"pl-text-field__envelope\">\n    <div\n      ref=\"rootRef\"\n      class=\"pl-text-field\"\n      :class=\"{\n        error: hasErrors,\n        disabled,\n        dashed,\n        nonEmpty,\n      }\"\n    >\n      <label v-if=\"label\" ref=\"label\">\n        <SvgRequired v-if=\"required\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <div v-if=\"prefix\" class=\"pl-text-field__prefix\">\n        {{ prefix }}\n      </div>\n      <input\n        ref=\"inputRef\"\n        v-model=\"valueRef\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder || '...'\"\n        :type=\"fieldType\"\n        spellcheck=\"false\"\n        @focusout=\"onFocusOut\"\n      />\n      <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n        <PlIcon16 v-if=\"canShowClearable\" class=\"pl-text-field__clearable\" name=\"delete-clear\" @click.stop=\"clear\" />\n        <PlMaskIcon24 v-if=\"type === 'password'\" :name=\"passwordIcon\" style=\"cursor: pointer\" @click.stop=\"togglePasswordVisibility\" />\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"pl-text-field__contour\" />\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"],"names":["__default__","slots","useSlots","model","_useModel","__props","props","rootRef","ref","inputRef","showPassword","data","reactive","valueRef","computed","value","err","fieldType","passwordIcon","clear","validationData","useValidation","isEmpty","nonEmpty","displayErrors","errors","propsError","getErrorMessage","hasErrors","canShowClearable","togglePasswordVisibility","onFocusOut","setFocusOnInput","_a","useLabelNotch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;GAIeA,KAAA;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;;;;;;;AAgBA,UAAMC,IAAQC,EAAS,GAOjBC,IAAQC,EAAkBC,GAAA,YAE/B,GAEKC,IAAQD,GAqDRE,IAAUC,EAAkC,MAAS,GAErDC,IAAWD,EAAkC,GAE7CE,IAAeF,EAAI,EAAK,GAExBG,IAAOC,EAAS;AAAA,MACpB,QAAQ;AAAA,IAAA,CACT,GAEKC,IAAWC,EAAiB;AAAA,MAChC,MAAM;AACJ,eAAIH,EAAK,SACAA,EAAK,OAAO,QAEdR,EAAM,UAAU,UAAaA,EAAM,UAAU,OAAO,KAAK,OAAOA,EAAM,KAAK;AAAA,MACpF;AAAA,MACA,IAAIY,GAAO;AAGT,YAFAJ,EAAK,SAAS,QAEVL,EAAM;AACJ,cAAA;AACI,YAAAH,EAAA,QAAQG,EAAM,MAAMS,CAAK;AAAA,mBACxBC,GAAK;AACZ,YAAAL,EAAK,SAAS;AAAA,cACZ,OAAOK,aAAe,QAAQA,EAAI,UAAU,OAAOA,CAAG;AAAA,cACtD,OAAAD;AAAA,YACF;AAAA,UAAA;AAAA;AAGF,UAAAZ,EAAM,QAAQY;AAAA,MAChB;AAAA,IACF,CACD,GAEKE,IAAYH,EAAS,MACrBR,EAAM,QAAQA,EAAM,SAAS,aACxBI,EAAa,QAAQ,SAASJ,EAAM,OAEpC,MAEV,GAEKY,IAAeJ,EAAS,MAAOJ,EAAa,QAAQ,cAAc,WAAY,GAE9ES,IAAQ,MAAM;AAClB,MAAIb,EAAM,cACRK,EAAK,SAAS,QACdR,EAAM,QAAQG,EAAM,cAAc,KAAQ,KAAgBA,EAAM,UAAU;AAAA,IAE9E,GAEMc,IAAiBC,EAAcR,GAAUP,EAAM,SAAS,CAAA,CAAE,GAE1DgB,IAAUR,EAAS,MACnBR,EAAM,YACDA,EAAM,cAAc,KAAOH,EAAM,UAAU,KAAKA,EAAM,UAAUG,EAAM,UAAU,IAGlFH,EAAM,UAAU,EACxB,GAEKoB,IAAWT,EAAS,MAAM,CAACQ,EAAQ,KAAK,GAExCE,IAAgBV,EAAS,MAAM;AACnC,YAAMW,IAAmB,CAAC,GACpBC,IAAaC,EAAgBrB,EAAM,KAAK;AAC9C,aAAIoB,KACFD,EAAO,KAAKC,CAAU,GAEpBf,EAAK,UACAc,EAAA,KAAKd,EAAK,OAAO,KAAK,GAE1BS,EAAe,MAAM,WACxBK,EAAO,KAAK,GAAGL,EAAe,MAAM,MAAM,GAErCK;AAAA,IAAA,CACR,GAEKG,IAAYd,EAAS,MAAMU,EAAc,MAAM,SAAS,CAAC,GAEzDK,IAAmBf,EAAS,MAAMR,EAAM,aAAaiB,EAAS,SAASjB,EAAM,SAAS,cAAc,CAACA,EAAM,QAAQ,GAEnHwB,IAA2B,MAAOpB,EAAa,QAAQ,CAACA,EAAa,OAErEqB,IAAa,MAAM;AACvB,MAAApB,EAAK,SAAS;AAAA,IAChB,GAEMqB,IAAkB,MAAA;;AAAM,cAAAC,IAAAxB,EAAS,UAAT,gBAAAwB,EAAgB;AAAA;AAE9C,WAAAC,EAAc3B,CAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlTextField.vue.js","sources":["../../../src/components/PlTextField/PlTextField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for one-line string data manipulation\n */\nexport default {\n  name: 'PlTextField',\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M, E = string, C = E\">\nimport './pl-text-field.scss';\nimport { computed, reactive, ref, useSlots } from 'vue';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport { useValidation } from '../../utils/useValidation';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport type { Equal } from '@milaboratories/helpers';\nimport SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';\nimport { getErrorMessage } from '../../helpers/error.ts';\n\nconst slots = useSlots();\n\ntype Model = Equal<M, E | C> extends true ? M : never; // basically in === out\n\n/**\n * The current value of the input field.\n */\nconst model = defineModel<Model>({\n  required: true,\n});\n\nconst props = defineProps<{\n  /**\n   * The label to display above the input field.\n   */\n  label?: string;\n  /**\n   * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).\n   * Or you can pass a callback that returns a custom \"empty\" value (null | undefined | string)\n   */\n  clearable?: boolean | (() => C);\n  /**\n   * An optional callback to parse and/or cast the value, the return type overrides the model type.\n   * The callback must throw an exception if the value is invalid\n   */\n  parse?: (v: string) => E;\n  /**\n   * If `true`, the input field is marked as required.\n   */\n  required?: boolean;\n  /**\n   * An error message to display below the input field.\n   */\n  error?: unknown;\n  /**\n   * A helper text to display below the input field when there are no errors.\n   */\n  helper?: string;\n  /**\n   * A placeholder text to display inside the input field when it is empty.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the input field is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the input field has a dashed border.\n   */\n  dashed?: boolean;\n  /**\n   * A prefix text to display inside the input field before the value.\n   */\n  prefix?: string;\n  /**\n   * An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.\n   */\n  rules?: ((v: string) => boolean | string)[];\n  /**\n   * The string specifies whether the field should be a password or not, value could be \"password\" or undefined.\n   */\n  type?: 'password';\n}>();\n\nconst rootRef = ref<HTMLInputElement | undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst showPassword = ref(false);\n\nconst data = reactive({\n  cached: undefined as { error: string; value: string } | undefined,\n});\n\nconst valueRef = computed<string>({\n  get() {\n    if (data.cached) {\n      return data.cached.value;\n    }\n    return model.value === undefined || model.value === null ? '' : String(model.value);\n  },\n  set(value) {\n    data.cached = undefined;\n\n    if (props.parse) {\n      try {\n        model.value = props.parse(value) as Model;\n      } catch (err) {\n        data.cached = {\n          error: err instanceof Error ? err.message : String(err),\n          value,\n        };\n      }\n    } else {\n      model.value = value as Model;\n    }\n  },\n});\n\nconst fieldType = computed(() => {\n  if (props.type && props.type === 'password') {\n    return showPassword.value ? 'text' : props.type;\n  } else {\n    return 'text';\n  }\n});\n\nconst passwordIcon = computed(() => (showPassword.value ? 'view-show' : 'view-hide'));\n\nconst clear = () => {\n  if (props.clearable) {\n    data.cached = undefined;\n    model.value = props.clearable === true ? ('' as Model) : (props.clearable() as Model);\n  }\n};\n\nconst validationData = useValidation(valueRef, props.rules || []);\n\nconst isEmpty = computed(() => {\n  if (props.clearable) {\n    return props.clearable === true ? model.value === '' : model.value === props.clearable();\n  }\n\n  return model.value === '';\n});\n\nconst nonEmpty = computed(() => !isEmpty.value);\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n  if (propsError) {\n    errors.push(propsError);\n  }\n  if (data.cached) {\n    errors.push(data.cached.error);\n  }\n  if (!validationData.value.isValid) {\n    errors.push(...validationData.value.errors);\n  }\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(() => props.clearable && nonEmpty.value && props.type !== 'password' && !props.disabled);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\n\nconst onFocusOut = () => {\n  data.cached = undefined;\n};\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nuseLabelNotch(rootRef);\n</script>\n\n<template>\n  <div class=\"pl-text-field__envelope\">\n    <div\n      ref=\"rootRef\"\n      class=\"pl-text-field\"\n      :class=\"{\n        error: hasErrors,\n        disabled,\n        dashed,\n        nonEmpty,\n      }\"\n    >\n      <label v-if=\"label\" ref=\"label\">\n        <SvgRequired v-if=\"required\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <div v-if=\"prefix\" class=\"pl-text-field__prefix\">\n        {{ prefix }}\n      </div>\n      <input\n        ref=\"inputRef\"\n        v-model=\"valueRef\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder || '...'\"\n        :type=\"fieldType\"\n        spellcheck=\"false\"\n        @focusout=\"onFocusOut\"\n      />\n      <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n        <PlIcon16 v-if=\"canShowClearable\" class=\"pl-text-field__clearable\" name=\"delete-clear\" @click.stop=\"clear\" />\n        <PlMaskIcon24 v-if=\"type === 'password'\" :name=\"passwordIcon\" style=\"cursor: pointer\" @click.stop=\"togglePasswordVisibility\" />\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"pl-text-field__contour\" />\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"],"names":["__default__","slots","useSlots","model","_useModel","__props","props","rootRef","ref","inputRef","showPassword","data","reactive","valueRef","computed","value","err","fieldType","passwordIcon","clear","validationData","useValidation","isEmpty","nonEmpty","displayErrors","errors","propsError","getErrorMessage","hasErrors","canShowClearable","togglePasswordVisibility","onFocusOut","setFocusOnInput","_a","useLabelNotch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;GAIAA,KAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;;;;;;;AAgBA,UAAMC,IAAQC,EAAA,GAORC,IAAQC,EAAkBC,GAAA,YAE/B,GAEKC,IAAQD,GAqDRE,IAAUC,EAAkC,MAAS,GAErDC,IAAWD,EAAA,GAEXE,IAAeF,EAAI,EAAK,GAExBG,IAAOC,EAAS;AAAA,MACpB,QAAQ;AAAA,IAAA,CACT,GAEKC,IAAWC,EAAiB;AAAA,MAChC,MAAM;AACJ,eAAIH,EAAK,SACAA,EAAK,OAAO,QAEdR,EAAM,UAAU,UAAaA,EAAM,UAAU,OAAO,KAAK,OAAOA,EAAM,KAAK;AAAA,MACpF;AAAA,MACA,IAAIY,GAAO;AAGT,YAFAJ,EAAK,SAAS,QAEVL,EAAM;AACR,cAAI;AACF,YAAAH,EAAM,QAAQG,EAAM,MAAMS,CAAK;AAAA,UACjC,SAASC,GAAK;AACZ,YAAAL,EAAK,SAAS;AAAA,cACZ,OAAOK,aAAe,QAAQA,EAAI,UAAU,OAAOA,CAAG;AAAA,cACtD,OAAAD;AAAA,YAAA;AAAA,UAEJ;AAAA;AAEA,UAAAZ,EAAM,QAAQY;AAAA,MAElB;AAAA,IAAA,CACD,GAEKE,IAAYH,EAAS,MACrBR,EAAM,QAAQA,EAAM,SAAS,aACxBI,EAAa,QAAQ,SAASJ,EAAM,OAEpC,MAEV,GAEKY,IAAeJ,EAAS,MAAOJ,EAAa,QAAQ,cAAc,WAAY,GAE9ES,IAAQ,MAAM;AAClB,MAAIb,EAAM,cACRK,EAAK,SAAS,QACdR,EAAM,QAAQG,EAAM,cAAc,KAAQ,KAAgBA,EAAM,UAAA;AAAA,IAEpE,GAEMc,IAAiBC,EAAcR,GAAUP,EAAM,SAAS,CAAA,CAAE,GAE1DgB,IAAUR,EAAS,MACnBR,EAAM,YACDA,EAAM,cAAc,KAAOH,EAAM,UAAU,KAAKA,EAAM,UAAUG,EAAM,UAAA,IAGxEH,EAAM,UAAU,EACxB,GAEKoB,IAAWT,EAAS,MAAM,CAACQ,EAAQ,KAAK,GAExCE,IAAgBV,EAAS,MAAM;AACnC,YAAMW,IAAmB,CAAA,GACnBC,IAAaC,EAAgBrB,EAAM,KAAK;AAC9C,aAAIoB,KACFD,EAAO,KAAKC,CAAU,GAEpBf,EAAK,UACPc,EAAO,KAAKd,EAAK,OAAO,KAAK,GAE1BS,EAAe,MAAM,WACxBK,EAAO,KAAK,GAAGL,EAAe,MAAM,MAAM,GAErCK;AAAA,IACT,CAAC,GAEKG,IAAYd,EAAS,MAAMU,EAAc,MAAM,SAAS,CAAC,GAEzDK,IAAmBf,EAAS,MAAMR,EAAM,aAAaiB,EAAS,SAASjB,EAAM,SAAS,cAAc,CAACA,EAAM,QAAQ,GAEnHwB,IAA2B,MAAOpB,EAAa,QAAQ,CAACA,EAAa,OAErEqB,IAAa,MAAM;AACvB,MAAApB,EAAK,SAAS;AAAA,IAChB,GAEMqB,IAAkB,MAAA;;AAAM,cAAAC,IAAAxB,EAAS,UAAT,gBAAAwB,EAAgB;AAAA;AAE9C,WAAAC,EAAc3B,CAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlTextField/__tests__/TextField.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/PlTextField/index.d.ts

@@ -1,2 +1 @@
 export { default as PlTextField } from './PlTextField.vue';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/PlToggleSwitch/PlToggleSwitch.vue.d.ts

@@ -25,4 +25,3 @@ declare const _default: import('vue').DefineComponent<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;
-//# sourceMappingURL=PlToggleSwitch.vue.d.ts.map

package/dist/components/PlToggleSwitch/PlToggleSwitch.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlToggleSwitch.vue.js","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"],"names":["__default__"],"mappings":";;;;;GAIeA,IAAA;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlToggleSwitch.vue.js","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"],"names":["__default__"],"mappings":";;;;;GAIAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlToggleSwitch/index.d.ts

@@ -1,2 +1 @@
 export { default as PlToggleSwitch } from './PlToggleSwitch.vue';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/PlTooltip/Beak.vue.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
 export default _default;
-//# sourceMappingURL=Beak.vue.d.ts.map

package/dist/components/PlTooltip/Beak.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Beak.vue.js","sources":["../../../src/components/PlTooltip/Beak.vue"],"sourcesContent":["<template>\n  <svg class=\"beak\" width=\"5\" height=\"9\" viewBox=\"0 0 3 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M4.00222 8.00933L0 4.00711L4.00222 0.00488281L4.00222 8.00933Z\" fill=\"#24223D\" />\n  </svg>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode"],"mappings":";;cACOA,IAAY;AAAA,EAAC,OAAM;AAAA,EAAI;EAAW;EAAkB,SAAW;AAAA,EAAC;;;AAArE,SAAAC,EAAAC,GAAAC,GAAA;SAC4FC,EAAA,GAAAC,EAAA,OAAAL,GAAAG,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,IAApFG,EAAkE,QAAA;AAAA,MAAC,GAAA;AAAA;;;;;"}
+{"version":3,"file":"Beak.vue.js","sources":["../../../src/components/PlTooltip/Beak.vue"],"sourcesContent":["<template>\n  <svg class=\"beak\" width=\"5\" height=\"9\" viewBox=\"0 0 3 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M4.00222 8.00933L0 4.00711L4.00222 0.00488281L4.00222 8.00933Z\" fill=\"#24223D\" />\n  </svg>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode"],"mappings":";;cACOA,IAAY;AAAA,EAAC,OAAM;AAAA,EAAI;EAAW;EAAkB,SAAK;AAAA,EAAO;;;AAArE,SAAAC,EAAAC,GAAAC,GAAA;SACEC,EAAA,GAA0FC,EAAA,OAAAL,GAAAG,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,IAApFG,EAAE,QAAA;AAAA,MAAiE,GAAA;AAAA;;;;;"}

package/dist/components/PlTooltip/PlTooltip.vue.d.ts

@@ -81,4 +81,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=PlTooltip.vue.d.ts.map

package/dist/components/PlTooltip/PlTooltip.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTooltip.vue.js","sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover */\nexport default {\n  name: 'PlTooltip',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-tooltip.scss';\nimport { computed, onUnmounted, reactive, ref, toRef, watch } from 'vue';\nimport { useTooltipPosition } from './useTooltipPosition';\nimport * as utils from '../../helpers/utils';\nimport { useClickOutside } from '../../composition/useClickOutside';\nimport Beak from './Beak.vue';\nimport { tMap } from './global';\n\nconst emit = defineEmits(['tooltip:close']);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * delay in milliseconds before the tooltip opens\n     */\n    openDelay?: number;\n    /**\n     * delay in milliseconds before the tooltip disappears\n     */\n    closeDelay?: number;\n    /**\n     * Tooltip position\n     */\n    position?: 'top-left' | 'left' | 'right' | 'top' | 'southwest';\n    /**\n     * external prop to hide tooltips\n     */\n    hide?: boolean;\n    /**\n     * The gap in pixels between the tooltip and the target element\n     */\n    gap?: number;\n    /**\n     * base html element for tooltip\n     */\n    element?: 'div' | 'span' | 'a' | 'p' | 'h1' | 'h2' | 'h3';\n    /**\n     * Max width (css value) of the tooltip container (default is 300px)\n     */\n    maxWidth?: string;\n  }>(),\n  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    position: 'top',\n    element: 'div',\n    maxWidth: '300px',\n  },\n);\n\nconst data = reactive({\n  open: false,\n  over: false,\n  tooltipOpen: false,\n  key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n  () => data.open,\n  (v) => {\n    requestAnimationFrame(() => {\n      data.tooltipOpen = v;\n    });\n  },\n);\n\nlet clearTimeout = () => {};\n\nconst dispatchAdjust = utils.throttle(() => window.dispatchEvent(new CustomEvent('adjust')), 1000);\n\nconst showTooltip = () => {\n  data.open = true;\n\n  for (const [k, f] of tMap.entries()) {\n    if (k !== tKey) {\n      f();\n    }\n  }\n};\n\nconst closeTooltip = () => {\n  data.open = false;\n  emit('tooltip:close');\n};\n\nconst onOver = async () => {\n  if (props.hide) {\n    return;\n  }\n\n  dispatchAdjust();\n\n  data.over = true;\n\n  clearTimeout();\n\n  await utils.delay(props.openDelay ?? 100);\n\n  if (data.over) {\n    showTooltip();\n  }\n};\n\nconst onLeave = () => {\n  data.over = false;\n  clearTimeout = utils.timeout(() => {\n    if (!data.over) {\n      closeTooltip();\n    }\n  }, props.closeDelay);\n};\n\nwatch(\n  () => props.hide,\n  (hide) => {\n    if (hide) {\n      closeTooltip();\n    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nconst style = useTooltipPosition(rootRef, toRef(props));\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nconst tooltipStyle = computed(() => ({\n  '--pl-tooltip-max-width': props.maxWidth,\n}));\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\n</script>\n\n<template>\n  <component :is=\"element\" v-bind=\"$attrs\" ref=\"rootRef\" @click=\"onOver\" @mouseover=\"onOver\" @mouseleave=\"onLeave\">\n    <slot />\n    <Teleport v-if=\"$slots['tooltip'] && data.open\" to=\"body\">\n      <Transition name=\"tooltip-transition\">\n        <div v-if=\"data.tooltipOpen\" class=\"pl-tooltip__container\" :style=\"style\" @click.stop>\n          <div ref=\"tooltip\" class=\"pl-tooltip\" :style=\"tooltipStyle\" :class=\"position\" @mouseover=\"onOver\" @mouseleave=\"onLeave\">\n            <!-- should be one line -->\n            <div><slot name=\"tooltip\" /></div>\n            <Beak />\n          </div>\n        </div>\n      </Transition>\n    </Teleport>\n  </component>\n</template>\n"],"names":["__default__","emit","__emit","tKey","props","__props","data","reactive","tMap","closeTooltip","watch","v","clearTimeout","dispatchAdjust","utils.throttle","showTooltip","k","f","onOver","utils.delay","onLeave","utils.timeout","hide","rootRef","ref","tooltip","style","useTooltipPosition","toRef","useClickOutside","tooltipStyle","computed","onUnmounted"],"mappings":";;;;;;;AAEA,MAAeA,IAAA;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;AAYA,UAAMC,IAAOC,GAEPC,IAAO,OAAO,GAEdC,IAAQC,GAyCRC,IAAOC,EAAS;AAAA,MACpB,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,KAAK,OAAO;AAAA,IAAA,CACb;AAED,IAAAC,EAAK,IAAIL,GAAM,MAAMM,EAAA,CAAc,GAGnCC;AAAA,MACE,MAAMJ,EAAK;AAAA,MACX,CAACK,MAAM;AACL,8BAAsB,MAAM;AAC1B,UAAAL,EAAK,cAAcK;AAAA,QAAA,CACpB;AAAA,MAAA;AAAA,IAEL;AAEA,QAAIC,IAAe,MAAM;AAAA,IAAC;AAEpB,UAAAC,IAAiBC,EAAe,MAAM,OAAO,cAAc,IAAI,YAAY,QAAQ,CAAC,GAAG,GAAI,GAE3FC,IAAc,MAAM;AACxB,MAAAT,EAAK,OAAO;AAEZ,iBAAW,CAACU,GAAGC,CAAC,KAAKT,EAAK;AACxB,QAAIQ,MAAMb,KACNc,EAAA;AAAA,IAGR,GAEMR,IAAe,MAAM;AACzB,MAAAH,EAAK,OAAO,IACZL,EAAK,eAAe;AAAA,IACtB,GAEMiB,IAAS,YAAY;AACzB,MAAId,EAAM,SAIKS,EAAA,GAEfP,EAAK,OAAO,IAECM,EAAA,GAEb,MAAMO,EAAYf,EAAM,aAAa,GAAG,GAEpCE,EAAK,QACKS,EAAA;AAAA,IAEhB,GAEMK,IAAU,MAAM;AACpB,MAAAd,EAAK,OAAO,IACGM,IAAAS,EAAc,MAAM;AAC7B,QAACf,EAAK,QACKG,EAAA;AAAA,MACf,GACCL,EAAM,UAAU;AAAA,IACrB;AAEA,IAAAM;AAAA,MACE,MAAMN,EAAM;AAAA,MACZ,CAACkB,MAAS;AACR,QAAIA,KACWb,EAAA;AAAA,MACf;AAAA,IAEJ;AAEA,UAAMc,IAAUC,EAA6B,GACvCC,IAAUD,EAA6B,GAEvCE,IAAQC,EAAmBJ,GAASK,EAAMxB,CAAK,CAAC;AAEtD,IAAAyB,EAAgB,CAACN,GAASE,CAAO,GAAG,MAAMhB,GAAc;AAElD,UAAAqB,IAAeC,EAAS,OAAO;AAAA,MACnC,0BAA0B3B,EAAM;AAAA,IAAA,EAChC;AAEF,WAAA4B,EAAY,MAAM;AAChB,MAAAxB,EAAK,OAAOL,CAAI;AAAA,IAAA,CACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlTooltip.vue.js","sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover */\nexport default {\n  name: 'PlTooltip',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-tooltip.scss';\nimport { computed, onUnmounted, reactive, ref, toRef, watch } from 'vue';\nimport { useTooltipPosition } from './useTooltipPosition';\nimport * as utils from '../../helpers/utils';\nimport { useClickOutside } from '../../composition/useClickOutside';\nimport Beak from './Beak.vue';\nimport { tMap } from './global';\n\nconst emit = defineEmits(['tooltip:close']);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * delay in milliseconds before the tooltip opens\n     */\n    openDelay?: number;\n    /**\n     * delay in milliseconds before the tooltip disappears\n     */\n    closeDelay?: number;\n    /**\n     * Tooltip position\n     */\n    position?: 'top-left' | 'left' | 'right' | 'top' | 'southwest';\n    /**\n     * external prop to hide tooltips\n     */\n    hide?: boolean;\n    /**\n     * The gap in pixels between the tooltip and the target element\n     */\n    gap?: number;\n    /**\n     * base html element for tooltip\n     */\n    element?: 'div' | 'span' | 'a' | 'p' | 'h1' | 'h2' | 'h3';\n    /**\n     * Max width (css value) of the tooltip container (default is 300px)\n     */\n    maxWidth?: string;\n  }>(),\n  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    position: 'top',\n    element: 'div',\n    maxWidth: '300px',\n  },\n);\n\nconst data = reactive({\n  open: false,\n  over: false,\n  tooltipOpen: false,\n  key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n  () => data.open,\n  (v) => {\n    requestAnimationFrame(() => {\n      data.tooltipOpen = v;\n    });\n  },\n);\n\nlet clearTimeout = () => {};\n\nconst dispatchAdjust = utils.throttle(() => window.dispatchEvent(new CustomEvent('adjust')), 1000);\n\nconst showTooltip = () => {\n  data.open = true;\n\n  for (const [k, f] of tMap.entries()) {\n    if (k !== tKey) {\n      f();\n    }\n  }\n};\n\nconst closeTooltip = () => {\n  data.open = false;\n  emit('tooltip:close');\n};\n\nconst onOver = async () => {\n  if (props.hide) {\n    return;\n  }\n\n  dispatchAdjust();\n\n  data.over = true;\n\n  clearTimeout();\n\n  await utils.delay(props.openDelay ?? 100);\n\n  if (data.over) {\n    showTooltip();\n  }\n};\n\nconst onLeave = () => {\n  data.over = false;\n  clearTimeout = utils.timeout(() => {\n    if (!data.over) {\n      closeTooltip();\n    }\n  }, props.closeDelay);\n};\n\nwatch(\n  () => props.hide,\n  (hide) => {\n    if (hide) {\n      closeTooltip();\n    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nconst style = useTooltipPosition(rootRef, toRef(props));\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nconst tooltipStyle = computed(() => ({\n  '--pl-tooltip-max-width': props.maxWidth,\n}));\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\n</script>\n\n<template>\n  <component :is=\"element\" v-bind=\"$attrs\" ref=\"rootRef\" @click=\"onOver\" @mouseover=\"onOver\" @mouseleave=\"onLeave\">\n    <slot />\n    <Teleport v-if=\"$slots['tooltip'] && data.open\" to=\"body\">\n      <Transition name=\"tooltip-transition\">\n        <div v-if=\"data.tooltipOpen\" class=\"pl-tooltip__container\" :style=\"style\" @click.stop>\n          <div ref=\"tooltip\" class=\"pl-tooltip\" :style=\"tooltipStyle\" :class=\"position\" @mouseover=\"onOver\" @mouseleave=\"onLeave\">\n            <!-- should be one line -->\n            <div><slot name=\"tooltip\" /></div>\n            <Beak />\n          </div>\n        </div>\n      </Transition>\n    </Teleport>\n  </component>\n</template>\n"],"names":["__default__","emit","__emit","tKey","props","__props","data","reactive","tMap","closeTooltip","watch","v","clearTimeout","dispatchAdjust","utils.throttle","showTooltip","k","f","onOver","utils.delay","onLeave","utils.timeout","hide","rootRef","ref","tooltip","style","useTooltipPosition","toRef","useClickOutside","tooltipStyle","computed","onUnmounted"],"mappings":";;;;;;;AAEA,MAAAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;AAYA,UAAMC,IAAOC,GAEPC,IAAO,OAAA,GAEPC,IAAQC,GAyCRC,IAAOC,EAAS;AAAA,MACpB,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,KAAK,OAAA;AAAA,IAAO,CACb;AAED,IAAAC,EAAK,IAAIL,GAAM,MAAMM,EAAA,CAAc,GAGnCC;AAAA,MACE,MAAMJ,EAAK;AAAA,MACX,CAACK,MAAM;AACL,8BAAsB,MAAM;AAC1B,UAAAL,EAAK,cAAcK;AAAA,QACrB,CAAC;AAAA,MACH;AAAA,IAAA;AAGF,QAAIC,IAAe,MAAM;AAAA,IAAC;AAE1B,UAAMC,IAAiBC,EAAe,MAAM,OAAO,cAAc,IAAI,YAAY,QAAQ,CAAC,GAAG,GAAI,GAE3FC,IAAc,MAAM;AACxB,MAAAT,EAAK,OAAO;AAEZ,iBAAW,CAACU,GAAGC,CAAC,KAAKT,EAAK;AACxB,QAAIQ,MAAMb,KACRc,EAAA;AAAA,IAGN,GAEMR,IAAe,MAAM;AACzB,MAAAH,EAAK,OAAO,IACZL,EAAK,eAAe;AAAA,IACtB,GAEMiB,IAAS,YAAY;AACzB,MAAId,EAAM,SAIVS,EAAA,GAEAP,EAAK,OAAO,IAEZM,EAAA,GAEA,MAAMO,EAAYf,EAAM,aAAa,GAAG,GAEpCE,EAAK,QACPS,EAAA;AAAA,IAEJ,GAEMK,IAAU,MAAM;AACpB,MAAAd,EAAK,OAAO,IACZM,IAAeS,EAAc,MAAM;AACjC,QAAKf,EAAK,QACRG,EAAA;AAAA,MAEJ,GAAGL,EAAM,UAAU;AAAA,IACrB;AAEA,IAAAM;AAAA,MACE,MAAMN,EAAM;AAAA,MACZ,CAACkB,MAAS;AACR,QAAIA,KACFb,EAAA;AAAA,MAEJ;AAAA,IAAA;AAGF,UAAMc,IAAUC,EAAA,GACVC,IAAUD,EAAA,GAEVE,IAAQC,EAAmBJ,GAASK,EAAMxB,CAAK,CAAC;AAEtD,IAAAyB,EAAgB,CAACN,GAASE,CAAO,GAAG,MAAMhB,GAAc;AAExD,UAAMqB,IAAeC,EAAS,OAAO;AAAA,MACnC,0BAA0B3B,EAAM;AAAA,IAAA,EAChC;AAEF,WAAA4B,EAAY,MAAM;AAChB,MAAAxB,EAAK,OAAOL,CAAI;AAAA,IAClB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PlTooltip/global.d.ts

@@ -1,2 +1 @@
 export declare const tMap: Map<symbol, () => void>;
-//# sourceMappingURL=global.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"global.js","sources":["../../../src/components/PlTooltip/global.ts"],"sourcesContent":["export const tMap = new Map<symbol, () => void>();\n"],"names":["tMap"],"mappings":"AAAa,MAAAA,wBAAW,IAAwB;"}
+{"version":3,"file":"global.js","sources":["../../../src/components/PlTooltip/global.ts"],"sourcesContent":["export const tMap = new Map<symbol, () => void>();\n"],"names":["tMap"],"mappings":"AAAO,MAAMA,wBAAW,IAAA;"}

package/dist/components/PlTooltip/index.d.ts

@@ -1,2 +1 @@
 export { default as PlTooltip } from './PlTooltip.vue';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/PlTooltip/useTooltipPosition.d.ts

@@ -9,4 +9,3 @@ type Options = {
  */
 export declare function useTooltipPosition(el: Ref<HTMLElement | undefined>, optionsRef: Ref<Options>): import('vue').ComputedRef<string>;
 export {};
-//# sourceMappingURL=useTooltipPosition.d.ts.map

package/dist/components/PlTooltip/useTooltipPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltipPosition.js","sources":["../../../src/components/PlTooltip/useTooltipPosition.ts"],"sourcesContent":["import { computed, type Ref, ref, unref } from 'vue';\nimport { useElementPosition } from '../../composition/usePosition';\nimport type { ElementPosition } from '../../types';\n\ntype Options = {\n  position: 'top-left' | 'right' | 'left' | 'top' | 'southwest';\n  gap: number;\n};\n\n/**\n * A custom hook that calculates and returns the CSS style needed to position a tooltip\n * relative to a target HTML element based on the specified position and gap.\n */\nexport function useTooltipPosition(el: Ref<HTMLElement | undefined>, optionsRef: Ref<Options>) {\n  const posRef = ref<ElementPosition>();\n\n  useElementPosition(el, (v) => {\n    posRef.value = v;\n  });\n\n  return computed(() => {\n    const pos = unref(posRef);\n\n    const options = unref(optionsRef);\n\n    const position = options.position ?? 'top';\n\n    const gap = options.gap ?? 8;\n\n    if (!pos) {\n      return '';\n    }\n\n    const offsetMiddleY = pos.offsetY + Math.floor(pos.height / 2);\n    const offsetMiddleX = pos.offsetX + Math.floor(pos.width / 2);\n\n    if (position === 'top-left') {\n      return `left: ${pos.offsetX}px; top: ${pos.offsetY - gap}px;`;\n    }\n\n    if (position === 'top') {\n      return `left: ${offsetMiddleX}px; top: ${pos.offsetY - gap}px;`;\n    }\n\n    if (position === 'right') {\n      return `left: ${pos.offsetX + pos.width + gap}px; top: ${offsetMiddleY}px;`;\n    }\n\n    if (position === 'left') {\n      return `right: ${pos.scrollWidth - pos.x + gap}px; top: ${offsetMiddleY}px;`;\n    }\n\n    if (position === 'southwest') {\n      return `left: ${pos.offsetX + pos.width}px; top: ${pos.offsetY + pos.height + gap}px;`;\n    }\n\n    return '';\n  });\n}\n"],"names":["useTooltipPosition","el","optionsRef","posRef","ref","useElementPosition","v","computed","pos","unref","options","position","gap","offsetMiddleY","offsetMiddleX"],"mappings":";;AAagB,SAAAA,EAAmBC,GAAkCC,GAA0B;AAC7F,QAAMC,IAASC,EAAqB;AAEjB,SAAAC,EAAAJ,GAAI,CAACK,MAAM;AAC5B,IAAAH,EAAO,QAAQG;AAAA,EAAA,CAChB,GAEMC,EAAS,MAAM;AACd,UAAAC,IAAMC,EAAMN,CAAM,GAElBO,IAAUD,EAAMP,CAAU,GAE1BS,IAAWD,EAAQ,YAAY,OAE/BE,IAAMF,EAAQ,OAAO;AAE3B,QAAI,CAACF;AACI,aAAA;AAGT,UAAMK,IAAgBL,EAAI,UAAU,KAAK,MAAMA,EAAI,SAAS,CAAC,GACvDM,IAAgBN,EAAI,UAAU,KAAK,MAAMA,EAAI,QAAQ,CAAC;AAE5D,WAAIG,MAAa,aACR,SAASH,EAAI,OAAO,YAAYA,EAAI,UAAUI,CAAG,QAGtDD,MAAa,QACR,SAASG,CAAa,YAAYN,EAAI,UAAUI,CAAG,QAGxDD,MAAa,UACR,SAASH,EAAI,UAAUA,EAAI,QAAQI,CAAG,YAAYC,CAAa,QAGpEF,MAAa,SACR,UAAUH,EAAI,cAAcA,EAAI,IAAII,CAAG,YAAYC,CAAa,QAGrEF,MAAa,cACR,SAASH,EAAI,UAAUA,EAAI,KAAK,YAAYA,EAAI,UAAUA,EAAI,SAASI,CAAG,QAG5E;AAAA,EAAA,CACR;AACH;"}
+{"version":3,"file":"useTooltipPosition.js","sources":["../../../src/components/PlTooltip/useTooltipPosition.ts"],"sourcesContent":["import { computed, type Ref, ref, unref } from 'vue';\nimport { useElementPosition } from '../../composition/usePosition';\nimport type { ElementPosition } from '../../types';\n\ntype Options = {\n  position: 'top-left' | 'right' | 'left' | 'top' | 'southwest';\n  gap: number;\n};\n\n/**\n * A custom hook that calculates and returns the CSS style needed to position a tooltip\n * relative to a target HTML element based on the specified position and gap.\n */\nexport function useTooltipPosition(el: Ref<HTMLElement | undefined>, optionsRef: Ref<Options>) {\n  const posRef = ref<ElementPosition>();\n\n  useElementPosition(el, (v) => {\n    posRef.value = v;\n  });\n\n  return computed(() => {\n    const pos = unref(posRef);\n\n    const options = unref(optionsRef);\n\n    const position = options.position ?? 'top';\n\n    const gap = options.gap ?? 8;\n\n    if (!pos) {\n      return '';\n    }\n\n    const offsetMiddleY = pos.offsetY + Math.floor(pos.height / 2);\n    const offsetMiddleX = pos.offsetX + Math.floor(pos.width / 2);\n\n    if (position === 'top-left') {\n      return `left: ${pos.offsetX}px; top: ${pos.offsetY - gap}px;`;\n    }\n\n    if (position === 'top') {\n      return `left: ${offsetMiddleX}px; top: ${pos.offsetY - gap}px;`;\n    }\n\n    if (position === 'right') {\n      return `left: ${pos.offsetX + pos.width + gap}px; top: ${offsetMiddleY}px;`;\n    }\n\n    if (position === 'left') {\n      return `right: ${pos.scrollWidth - pos.x + gap}px; top: ${offsetMiddleY}px;`;\n    }\n\n    if (position === 'southwest') {\n      return `left: ${pos.offsetX + pos.width}px; top: ${pos.offsetY + pos.height + gap}px;`;\n    }\n\n    return '';\n  });\n}\n"],"names":["useTooltipPosition","el","optionsRef","posRef","ref","useElementPosition","v","computed","pos","unref","options","position","gap","offsetMiddleY","offsetMiddleX"],"mappings":";;AAaO,SAASA,EAAmBC,GAAkCC,GAA0B;AAC7F,QAAMC,IAASC,EAAA;AAEf,SAAAC,EAAmBJ,GAAI,CAACK,MAAM;AAC5B,IAAAH,EAAO,QAAQG;AAAA,EACjB,CAAC,GAEMC,EAAS,MAAM;AACpB,UAAMC,IAAMC,EAAMN,CAAM,GAElBO,IAAUD,EAAMP,CAAU,GAE1BS,IAAWD,EAAQ,YAAY,OAE/BE,IAAMF,EAAQ,OAAO;AAE3B,QAAI,CAACF;AACH,aAAO;AAGT,UAAMK,IAAgBL,EAAI,UAAU,KAAK,MAAMA,EAAI,SAAS,CAAC,GACvDM,IAAgBN,EAAI,UAAU,KAAK,MAAMA,EAAI,QAAQ,CAAC;AAE5D,WAAIG,MAAa,aACR,SAASH,EAAI,OAAO,YAAYA,EAAI,UAAUI,CAAG,QAGtDD,MAAa,QACR,SAASG,CAAa,YAAYN,EAAI,UAAUI,CAAG,QAGxDD,MAAa,UACR,SAASH,EAAI,UAAUA,EAAI,QAAQI,CAAG,YAAYC,CAAa,QAGpEF,MAAa,SACR,UAAUH,EAAI,cAAcA,EAAI,IAAII,CAAG,YAAYC,CAAa,QAGrEF,MAAa,cACR,SAASH,EAAI,UAAUA,EAAI,KAAK,YAAYA,EAAI,UAAUA,EAAI,SAASI,CAAG,QAG5E;AAAA,EACT,CAAC;AACH;"}

package/dist/components/Scrollable.vue.d.ts

@@ -19,4 +19,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=Scrollable.vue.d.ts.map

package/dist/components/Scrollable.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollable.vue.js","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(data, container, 'scrollTop', 'scrollLeft', 'clientHeight', 'clientWidth', 'scrollHeight', 'scrollWidth');\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"],"names":["containerRef","ref","data","reactive","updateState","container","copyProps","onWheel","root","updateTop","v","tapIf","unref","el","updateLeft","useResizeObserver","onMounted","onUnmounted"],"mappings":";;;;;;;;AAOA,UAAMA,IAAeC,EAAiB,GAEhCC,IAAOC,EAAS;AAAA,MACpB,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,aAAa;AAAA,MACb,cAAc;AAAA,MACd,aAAa;AAAA,IAAA,CACd;AAED,aAASC,EAAYC,GAAwB;AAC3C,MAAAC,EAAUJ,GAAMG,GAAW,aAAa,cAAc,gBAAgB,eAAe,gBAAgB,aAAa;AAAA,IAAA;AAG9G,UAAAE,IAAU,CAAC,MAAkB;AACjC,QAAE,eAAe;AACjB,YAAMC,IAAO,EAAE;AACf,MAAAA,EAAK,aAAa,EAAE,QACpBA,EAAK,cAAc,EAAE,QACrBJ,EAAYI,CAAI;AAAA,IAClB;AAEA,aAASC,EAAUC,GAAW;AAC5B,MAAAC,EAAMC,EAAMZ,CAAY,GAAG,CAACa,MAAO;AACjC,QAAAA,EAAG,YAAYH,GACfN,EAAYS,CAAE;AAAA,MAAA,CACf;AAAA,IAAA;AAGH,aAASC,EAAWJ,GAAW;AAC7B,MAAAC,EAAMC,EAAMZ,CAAY,GAAG,CAACa,MAAO;AACjC,QAAAA,EAAG,aAAaH,GAChBN,EAAYS,CAAE;AAAA,MAAA,CACf;AAAA,IAAA;AAGe,WAAAE,EAAAf,GAAc,CAACa,MAAO;AACtC,MAAAF,EAAME,GAAI,CAACA,MAAOT,EAAYS,CAAE,CAAC;AAAA,IAAA,CAClC,GAEDG,EAAU,MAAM;AACd,MAAAL,EAAMC,EAAMZ,CAAY,GAAG,CAACQ,MAAS;AACnC,QAAAJ,EAAYI,CAAI,GACXA,EAAA,iBAAiB,SAASD,CAAO;AAAA,MAAA,CACvC;AAAA,IAAA,CACF,GAEDU,EAAY,MAAM;AACV,MAAAN,EAAAC,EAAMZ,CAAY,GAAG,CAACQ,MAASA,EAAK,oBAAoB,SAASD,CAAO,CAAC;AAAA,IAAA,CAChF;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Scrollable.vue.js","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(data, container, 'scrollTop', 'scrollLeft', 'clientHeight', 'clientWidth', 'scrollHeight', 'scrollWidth');\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"],"names":["containerRef","ref","data","reactive","updateState","container","copyProps","onWheel","root","updateTop","v","tapIf","unref","el","updateLeft","useResizeObserver","onMounted","onUnmounted"],"mappings":";;;;;;;;AAOA,UAAMA,IAAeC,EAAA,GAEfC,IAAOC,EAAS;AAAA,MACpB,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,aAAa;AAAA,MACb,cAAc;AAAA,MACd,aAAa;AAAA,IAAA,CACd;AAED,aAASC,EAAYC,GAAwB;AAC3C,MAAAC,EAAUJ,GAAMG,GAAW,aAAa,cAAc,gBAAgB,eAAe,gBAAgB,aAAa;AAAA,IACpH;AAEA,UAAME,IAAU,CAAC,MAAkB;AACjC,QAAE,eAAA;AACF,YAAMC,IAAO,EAAE;AACf,MAAAA,EAAK,aAAa,EAAE,QACpBA,EAAK,cAAc,EAAE,QACrBJ,EAAYI,CAAI;AAAA,IAClB;AAEA,aAASC,EAAUC,GAAW;AAC5B,MAAAC,EAAMC,EAAMZ,CAAY,GAAG,CAACa,MAAO;AACjC,QAAAA,EAAG,YAAYH,GACfN,EAAYS,CAAE;AAAA,MAChB,CAAC;AAAA,IACH;AAEA,aAASC,EAAWJ,GAAW;AAC7B,MAAAC,EAAMC,EAAMZ,CAAY,GAAG,CAACa,MAAO;AACjC,QAAAA,EAAG,aAAaH,GAChBN,EAAYS,CAAE;AAAA,MAChB,CAAC;AAAA,IACH;AAEA,WAAAE,EAAkBf,GAAc,CAACa,MAAO;AACtC,MAAAF,EAAME,GAAI,CAACA,MAAOT,EAAYS,CAAE,CAAC;AAAA,IACnC,CAAC,GAEDG,EAAU,MAAM;AACd,MAAAL,EAAMC,EAAMZ,CAAY,GAAG,CAACQ,MAAS;AACnC,QAAAJ,EAAYI,CAAI,GAChBA,EAAK,iBAAiB,SAASD,CAAO;AAAA,MACxC,CAAC;AAAA,IACH,CAAC,GAEDU,EAAY,MAAM;AAChB,MAAAN,EAAMC,EAAMZ,CAAY,GAAG,CAACQ,MAASA,EAAK,oBAAoB,SAASD,CAAO,CAAC;AAAA,IACjF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Slider.vue.d.ts

@@ -49,4 +49,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=Slider.vue.d.ts.map

package/dist/components/Slider.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.vue.js","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(clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max));\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' ? props.step * 1 : e.code === 'ArrowDown' || e.code === 'ArrowLeft' ? props.step * -1 : 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\">{{ realtimeVal }}{{ measure }}</div>\n        </div>\n        <div class=\"ui-slider__base\">\n          <div class=\"ui-slider__container\">\n            <div ref=\"barRef\" class=\"ui-slider__bar\">\n              <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\n            </div>\n          </div>\n          <div class=\"ui-slider__container ui-slider__container-thumb\">\n            <template v-if=\"props.breakpoints\">\n              <div v-for=\"(item, index) in breakpointsRef\" :key=\"index\" :style=\"{ right: `${item}%` }\" class=\"ui-slider__thumb-step\"/>\n            </template>\n            <div ref=\"thumbRef\" tabindex=\"0\" class=\"ui-slider__thumb ui-slider__thumb-active\" :style=\"thumbStyle\" @keydown=\"handleKeyPress\">\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 v-if=\"props.mode === 'input'\" :value=\"realtimeVal\" class=\"ui-slider__value text-s\" @change=\"updateModelValue($event)\" />\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"],"names":["slots","useSlots","emit","__emit","props","__props","data","reactive","range","computed","localValue","clamp","realtimeVal","ref","error","v","getErrorMessage","propsRef","breakpointsRef","useSliderBreakpoints","position","progressStyle","thumbStyle","barRef","thumbRef","watch","val","round","value","useMouseCapture","ev","tapIf","_a","unref","rect","dx","setModelValue","updateModelValue","event","handleKeyPress","e","nextStep"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAMA,IAAQC,EAAS,GAEjBC,IAAOC,GAEPC,IAAQC,GA2BRC,IAAOC,EAAS;AAAA,MACpB,YAAY;AAAA,IAAA,CACb,GAEKC,IAAQC,EAAS,MAAML,EAAM,MAAMA,EAAM,GAAG,GAE5CM,IAAaD,EAAS,MACnBE,GAAOP,EAAM,cAAc,KAAKE,EAAK,YAAYF,EAAM,KAAKA,EAAM,GAAG,CAC7E,GAEKQ,IAAcC,EAAIT,EAAM,UAAU,GAElCU,IAAQL,EAAS,MAAM;AAC3B,YAAMM,IAAIX,EAAM;AAEhB,aAAK,OAAO,SAASW,CAAC,IAIlBA,IAAIX,EAAM,MACL,cAAcA,EAAM,GAAG,KAG5BW,IAAIX,EAAM,MACL,cAAcA,EAAM,GAAG,KAGzBY,EAAgBZ,EAAM,KAAK,IAXzB;AAAA,IAWyB,CACnC,GAEKa,IAAWR,EAAS,MAAML,CAAK,GAE/Bc,IAAiBC,EAAqBF,CAAQ,GAE9CG,IAAWX,EAAS,OAChBC,EAAW,QAAQN,EAAM,OAAOI,EAAM,KAC/C,GAEKa,IAAgBZ,EAAS,OAAO;AAAA,MACpC,OAAO,KAAK,MAAM,IAAIW,EAAS,SAAS,GAAG,IAAI;AAAA,IAAA,EAC/C,GAEIE,IAAab,EAAS,OAEnB;AAAA,MACL,OAAO,QAFK,KAAK,MAAM,IAAIW,EAAS,SAAS,GAAG,CAE5B;AAAA,IACtB,EACD,GAEKG,IAASV,EAAiB,GAC1BW,IAAWX,EAAiB;AAElC,IAAAY;AAAA,MACE,MAAMrB,EAAM;AAAA,MACZ,CAACsB,MAAQ;AACP,QAAAd,EAAY,QAAQc;AAAA,MAAA;AAAA,IAExB;AAEA,aAASC,EAAMC,GAAe;AAC5B,YAAMb,IAAIJ,EAAMiB,GAAOxB,EAAM,KAAKA,EAAM,GAAG;AAEpC,aAAA,KAAK,OAAOW,IAAI,OAAO,YAAY,IAAIX,EAAM,KAAK,KAAK,IAAIA,EAAM;AAAA,IAAA;AAG1D,IAAAyB,EAAAL,GAAU,CAACM,MAAO;;AAChC,MAAAC,GAAMC,IAAAC,EAAMV,CAAM,MAAZ,gBAAAS,EAAe,yBAAyB,CAACE,MAAS;AAChD,cAAA,EAAE,IAAAC,MAAOL;AAEf,QAAAxB,EAAK,aAAc6B,IAAKD,EAAK,QAAS1B,EAAM,OAE5CI,EAAY,QAAQe,EAAMhB,GAAOP,EAAM,cAAc,KAAKE,EAAK,YAAYF,EAAM,KAAKA,EAAM,GAAG,CAAC,GAE5F0B,EAAG,SACL5B,EAAK,qBAAqByB,EAAMjB,EAAW,KAAK,CAAC,GACjDJ,EAAK,aAAa;AAAA,MACpB,CACD;AAAA,IAAA,CACF;AAED,aAAS8B,EAAcR,GAAe;AAC/B,MAAA1B,EAAA,qBAAqByB,EAAMC,CAAK,CAAC;AAAA,IAAA;AAGxC,aAASS,EAAiBC,GAAc;AACxB,MAAAF,EAAA,CAAEE,EAAM,OAA4B,KAAK;AAAA,IAAA;AAGzD,aAASC,EAAeC,GAA6C;AAC/D,MAAA,CAAC,aAAa,WAAW,cAAc,aAAa,OAAO,EAAE,SAASA,EAAE,IAAI,KAC9EA,EAAE,eAAe;AAGnB,YAAMC,IACFD,EAAE,SAAS,aAAaA,EAAE,SAAS,eAAepC,EAAM,OAAO,IAAIoC,EAAE,SAAS,eAAeA,EAAE,SAAS,cAAcpC,EAAM,OAAO,KAAK;AAE9H,MAAAgC,EAAAhC,EAAM,aAAaqC,CAAQ;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Slider.vue.js","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(clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max));\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' ? props.step * 1 : e.code === 'ArrowDown' || e.code === 'ArrowLeft' ? props.step * -1 : 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\">{{ realtimeVal }}{{ measure }}</div>\n        </div>\n        <div class=\"ui-slider__base\">\n          <div class=\"ui-slider__container\">\n            <div ref=\"barRef\" class=\"ui-slider__bar\">\n              <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\n            </div>\n          </div>\n          <div class=\"ui-slider__container ui-slider__container-thumb\">\n            <template v-if=\"props.breakpoints\">\n              <div v-for=\"(item, index) in breakpointsRef\" :key=\"index\" :style=\"{ right: `${item}%` }\" class=\"ui-slider__thumb-step\"/>\n            </template>\n            <div ref=\"thumbRef\" tabindex=\"0\" class=\"ui-slider__thumb ui-slider__thumb-active\" :style=\"thumbStyle\" @keydown=\"handleKeyPress\">\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 v-if=\"props.mode === 'input'\" :value=\"realtimeVal\" class=\"ui-slider__value text-s\" @change=\"updateModelValue($event)\" />\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"],"names":["slots","useSlots","emit","__emit","props","__props","data","reactive","range","computed","localValue","clamp","realtimeVal","ref","error","v","getErrorMessage","propsRef","breakpointsRef","useSliderBreakpoints","position","progressStyle","thumbStyle","barRef","thumbRef","watch","val","round","value","useMouseCapture","ev","tapIf","_a","unref","rect","dx","setModelValue","updateModelValue","event","handleKeyPress","e","nextStep"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAMA,IAAQC,EAAA,GAERC,IAAOC,GAEPC,IAAQC,GA2BRC,IAAOC,EAAS;AAAA,MACpB,YAAY;AAAA,IAAA,CACb,GAEKC,IAAQC,EAAS,MAAML,EAAM,MAAMA,EAAM,GAAG,GAE5CM,IAAaD,EAAS,MACnBE,GAAOP,EAAM,cAAc,KAAKE,EAAK,YAAYF,EAAM,KAAKA,EAAM,GAAG,CAC7E,GAEKQ,IAAcC,EAAIT,EAAM,UAAU,GAElCU,IAAQL,EAAS,MAAM;AAC3B,YAAMM,IAAIX,EAAM;AAEhB,aAAK,OAAO,SAASW,CAAC,IAIlBA,IAAIX,EAAM,MACL,cAAcA,EAAM,GAAG,KAG5BW,IAAIX,EAAM,MACL,cAAcA,EAAM,GAAG,KAGzBY,EAAgBZ,EAAM,KAAK,IAXzB;AAAA,IAYX,CAAC,GAEKa,IAAWR,EAAS,MAAML,CAAK,GAE/Bc,IAAiBC,EAAqBF,CAAQ,GAE9CG,IAAWX,EAAS,OAChBC,EAAW,QAAQN,EAAM,OAAOI,EAAM,KAC/C,GAEKa,IAAgBZ,EAAS,OAAO;AAAA,MACpC,OAAO,KAAK,MAAM,IAAIW,EAAS,SAAS,GAAG,IAAI;AAAA,IAAA,EAC/C,GAEIE,IAAab,EAAS,OAEnB;AAAA,MACL,OAAO,QAFK,KAAK,MAAM,IAAIW,EAAS,SAAS,GAAG,CAE5B;AAAA,IAAA,EAEvB,GAEKG,IAASV,EAAA,GACTW,IAAWX,EAAA;AAEjB,IAAAY;AAAA,MACE,MAAMrB,EAAM;AAAA,MACZ,CAACsB,MAAQ;AACP,QAAAd,EAAY,QAAQc;AAAA,MACtB;AAAA,IAAA;AAGF,aAASC,EAAMC,GAAe;AAC5B,YAAMb,IAAIJ,EAAMiB,GAAOxB,EAAM,KAAKA,EAAM,GAAG;AAE3C,aAAO,KAAK,OAAOW,IAAI,OAAO,YAAY,IAAIX,EAAM,KAAK,KAAK,IAAIA,EAAM;AAAA,IAC1E;AAEA,IAAAyB,EAAgBL,GAAU,CAACM,MAAO;;AAChC,MAAAC,GAAMC,IAAAC,EAAMV,CAAM,MAAZ,gBAAAS,EAAe,yBAAyB,CAACE,MAAS;AACtD,cAAM,EAAE,IAAAC,MAAOL;AAEf,QAAAxB,EAAK,aAAc6B,IAAKD,EAAK,QAAS1B,EAAM,OAE5CI,EAAY,QAAQe,EAAMhB,GAAOP,EAAM,cAAc,KAAKE,EAAK,YAAYF,EAAM,KAAKA,EAAM,GAAG,CAAC,GAE5F0B,EAAG,SACL5B,EAAK,qBAAqByB,EAAMjB,EAAW,KAAK,CAAC,GACjDJ,EAAK,aAAa;AAAA,MAEtB,CAAC;AAAA,IACH,CAAC;AAED,aAAS8B,EAAcR,GAAe;AACpC,MAAA1B,EAAK,qBAAqByB,EAAMC,CAAK,CAAC;AAAA,IACxC;AAEA,aAASS,EAAiBC,GAAc;AACtC,MAAAF,EAAc,CAAEE,EAAM,OAA4B,KAAK;AAAA,IACzD;AAEA,aAASC,EAAeC,GAA6C;AACnE,MAAI,CAAC,aAAa,WAAW,cAAc,aAAa,OAAO,EAAE,SAASA,EAAE,IAAI,KAC9EA,EAAE,eAAA;AAGJ,YAAMC,IACFD,EAAE,SAAS,aAAaA,EAAE,SAAS,eAAepC,EAAM,OAAO,IAAIoC,EAAE,SAAS,eAAeA,EAAE,SAAS,cAAcpC,EAAM,OAAO,KAAK;AAE5I,MAAAgC,EAAchC,EAAM,aAAaqC,CAAQ;AAAA,IAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/SliderRange.vue.d.ts

@@ -51,4 +51,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=SliderRange.vue.d.ts.map

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

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

package/dist/components/SliderRangeTriple.vue.d.ts

@@ -54,4 +54,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=SliderRangeTriple.vue.d.ts.map

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

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

package/dist/components/TabItem.vue.d.ts

@@ -9,4 +9,3 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     isHovered: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;
-//# sourceMappingURL=TabItem.vue.d.ts.map

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

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

package/dist/components/ThemeSwitcher.vue.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;
-//# sourceMappingURL=ThemeSwitcher.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeSwitcher.vue.js","sources":["../../src/components/ThemeSwitcher.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTheme } from '../composition/useTheme';\nconst [theme, toggleTheme] = useTheme();\n</script>\n\n<template>\n  <div class=\"ui-theme-switcher\" :class=\"theme\" @click=\"toggleTheme\">\n    <div />\n  </div>\n</template>\n"],"names":["theme","toggleTheme","useTheme"],"mappings":";;;;;AAEA,UAAM,CAACA,GAAOC,CAAW,IAAIC,EAAS;;;;;;;;;;"}
+{"version":3,"file":"ThemeSwitcher.vue.js","sources":["../../src/components/ThemeSwitcher.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTheme } from '../composition/useTheme';\nconst [theme, toggleTheme] = useTheme();\n</script>\n\n<template>\n  <div class=\"ui-theme-switcher\" :class=\"theme\" @click=\"toggleTheme\">\n    <div />\n  </div>\n</template>\n"],"names":["theme","toggleTheme","useTheme"],"mappings":";;;;;AAEA,UAAM,CAACA,GAAOC,CAAW,IAAIC,EAAA;;;;;;;;;;"}

package/dist/components/TransitionSlidePanel.vue.d.ts

@@ -15,4 +15,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=TransitionSlidePanel.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TransitionSlidePanel.vue.js","sources":["../../src/components/TransitionSlidePanel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nfunction onAfterEnter() {\n  window.dispatchEvent(new CustomEvent('adjust'));\n}\n\nfunction onAfterLeave() {\n  window.dispatchEvent(new CustomEvent('adjust'));\n}\n</script>\n\n<template>\n  <Transition name=\"slide-panel\" @after-enter=\"onAfterEnter\" @after-leave=\"onAfterLeave\">\n    <slot />\n  </Transition>\n</template>\n"],"names":["onAfterEnter","onAfterLeave"],"mappings":";;;;AACA,aAASA,IAAe;AACtB,aAAO,cAAc,IAAI,YAAY,QAAQ,CAAC;AAAA,IAAA;AAGhD,aAASC,IAAe;AACtB,aAAO,cAAc,IAAI,YAAY,QAAQ,CAAC;AAAA,IAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"TransitionSlidePanel.vue.js","sources":["../../src/components/TransitionSlidePanel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nfunction onAfterEnter() {\n  window.dispatchEvent(new CustomEvent('adjust'));\n}\n\nfunction onAfterLeave() {\n  window.dispatchEvent(new CustomEvent('adjust'));\n}\n</script>\n\n<template>\n  <Transition name=\"slide-panel\" @after-enter=\"onAfterEnter\" @after-leave=\"onAfterLeave\">\n    <slot />\n  </Transition>\n</template>\n"],"names":["onAfterEnter","onAfterLeave"],"mappings":";;;;AACA,aAASA,IAAe;AACtB,aAAO,cAAc,IAAI,YAAY,QAAQ,CAAC;AAAA,IAChD;AAEA,aAASC,IAAe;AACtB,aAAO,cAAc,IAAI,YAAY,QAAQ,CAAC;AAAA,IAChD;;;;;;;;;;;;;"}

package/dist/components/VScroll.vue.d.ts

@@ -11,4 +11,3 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     scrollRef: HTMLDivElement;
 }, any>;
 export default _default;
-//# sourceMappingURL=VScroll.vue.d.ts.map

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

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

package/dist/components/contextMenu/Menu.vue.d.ts

@@ -8,4 +8,3 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;
-//# sourceMappingURL=Menu.vue.d.ts.map