@milaboratories/uikit 2.6.0 → 2.6.2

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

@@ -1 +1 @@
-{"version":3,"file":"PlLogView.vue.js","sources":["../../../src/components/PlLogView/PlLogView.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Log Viewer Component\n */\nexport default {\n  name: 'PlLogView',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, useSlots, watch } from 'vue';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport './pl-log-view.scss';\nimport { okOptional, tapIf } from '@milaboratories/helpers';\nimport type { AnyLogHandle, Platforma, ValueOrErrors } from '@platforma-sdk/model';\nimport { useLogHandle } from './useLogHandle';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { PlTooltip } from '../PlTooltip';\nimport { PlIcon24 } from '../PlIcon24';\nimport { downloadContent } from '../../helpers/dom';\n\nconst getOutputError = <T>(o?: ValueOrErrors<T>) => {\n  if (o && o.ok === false) {\n    return o.errors.join('\\n');\n  }\n};\n\nconst slots = useSlots();\n\nconst props = defineProps<{\n  /**\n   * String contents\n   */\n  value?: string;\n  /**\n   * The content to copy (Note: it takes precedence over value property)\n   */\n  valueToCopy?: string;\n  /**\n   * AnyLogHandle\n   */\n  logHandle?: AnyLogHandle;\n  /**\n   * Custom progress prefix (to filter logHandle results)\n   */\n  progressPrefix?: string;\n  /**\n   * String contents\n   */\n  error?: unknown;\n  /**\n   * Block output (Note: error and value take precedence over output property)\n   */\n  output?: ValueOrErrors<unknown>;\n  /**\n   * Max retries for AnyLogHandle fetch (with the same parameters)\n   */\n  maxRetries?: number;\n  /**\n   * @TODO\n   */\n  mockPlatforma?: Platforma;\n  /**\n   * The label to display above the texarea.\n   */\n  label?: string;\n  /**\n   * Do not scroll to bottom on content change. Default is false (scroll to bottom).\n   */\n  disableAutoScroll?: boolean;\n  /**\n   * If provided, a download icon will be shown and the content will be downloaded when clicked.\n   */\n  downloadFilename?: string;\n}>();\n\nconst logState = useLogHandle(props);\n\nconst isAnchored = ref<boolean>(true);\n\nconst contentRef = ref<HTMLElement>();\n\nconst root = ref<HTMLInputElement>();\n\nconst computedError = computed(() => logState.value?.error ?? props.error ?? getOutputError(props.output));\n\nconst computedValue = computed(() => logState.value?.lines ?? props.value ?? okOptional(props.output));\n\nconst computedValueToCopy = computed(() => {\n  if (props.valueToCopy) {\n    return props.valueToCopy;\n  }\n  if (computedValue.value && typeof computedValue.value === 'string') {\n    return computedValue.value;\n  }\n  return undefined;\n});\n\nconst copyActive = ref(false);\n\nuseLabelNotch(root);\n\nconst iconName = computed(() => (copyActive.value ? 'clipboard-copied' : 'clipboard'));\n\nconst onClickCopy = () => {\n  copyActive.value = true;\n  setTimeout(() => {\n    copyActive.value = false;\n  }, 1200);\n\n  const toCopy = computedValueToCopy.value;\n\n  if (toCopy !== undefined) {\n    navigator.clipboard.writeText(toCopy);\n  }\n};\n\nconst onClickDownload = (filename: string) => {\n  const toDownload = computedValueToCopy.value;\n\n  if (toDownload !== undefined) {\n    downloadContent([toDownload, 'text/plain'], filename);\n  }\n};\n\nconst optionallyScrollDown = () => {\n  if (props.disableAutoScroll) {\n    return;\n  }\n\n  tapIf(contentRef.value, (el) => {\n    if (isAnchored.value) {\n      el.scrollTo(el.scrollLeft, el.scrollHeight);\n    }\n  });\n};\n\nwatch(\n  computedValue,\n  () => {\n    requestAnimationFrame(() => {\n      optionallyScrollDown();\n    });\n  },\n  { immediate: true },\n);\n\nconst onContentScroll = (ev: Event) => {\n  const el = ev.target as HTMLElement;\n  isAnchored.value = el.scrollTop + 20 /* ~ 1 line height */ >= el.scrollHeight - el.offsetHeight;\n};\n</script>\n\n<template>\n  <div ref=\"root\" class=\"pl-log-view\" :class=\"{ 'has-error': computedError }\">\n    <label v-if=\"label\">\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    <DoubleContour class=\"pl-log-view__contour\" />\n    <div class=\"pl-log-view__copy\">\n      <PlTooltip :close-delay=\"800\" position=\"top\">\n        <PlMaskIcon24 title=\"Copy content\" :name=\"iconName\" @click=\"onClickCopy\" />\n        <template #tooltip>{{ copyActive ? 'copied' : 'copy' }}</template>\n      </PlTooltip>\n      <PlTooltip v-if=\"downloadFilename\" :close-delay=\"800\" position=\"top\">\n        <PlIcon24 name=\"download\" @click=\"() => onClickDownload(downloadFilename!)\" />\n        <template #tooltip>download</template>\n      </PlTooltip>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-log-view__error\">{{ computedError }}</div>\n    <div v-else ref=\"contentRef\" class=\"pl-log-view__content\" @scroll=\"onContentScroll\">{{ computedValue }}</div>\n  </div>\n</template>\n"],"names":["__default__","getOutputError","slots","useSlots","props","__props","logState","useLogHandle","isAnchored","ref","contentRef","root","computedError","computed","_a","computedValue","okOptional","computedValueToCopy","copyActive","useLabelNotch","iconName","onClickCopy","toCopy","onClickDownload","filename","toDownload","downloadContent","optionallyScrollDown","tapIf","el","watch","onContentScroll","ev"],"mappings":";;;;;;;;;;;;GAIAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;AAgBA,UAAMC,IAAiB,CAAI,MAAyB;AAClD,UAAI,KAAK,EAAE,OAAO;AAChB,eAAO,EAAE,OAAO,KAAK;AAAA,CAAI;AAAA,IAE7B,GAEMC,IAAQC,EAAA,GAERC,IAAQC,GA+CRC,IAAWC,EAAaH,CAAK,GAE7BI,IAAaC,EAAa,EAAI,GAE9BC,IAAaD,EAAA,GAEbE,IAAOF,EAAA,GAEPG,IAAgBC,EAAS,MAAA;;AAAM,eAAAC,IAAAR,EAAS,UAAT,gBAAAQ,EAAgB,UAASV,EAAM,SAASH,EAAeG,EAAM,MAAM;AAAA,KAAC,GAEnGW,IAAgBF,EAAS,MAAA;;AAAM,eAAAC,IAAAR,EAAS,UAAT,gBAAAQ,EAAgB,UAASV,EAAM,SAASY,EAAWZ,EAAM,MAAM;AAAA,KAAC,GAE/Fa,IAAsBJ,EAAS,MAAM;AACzC,UAAIT,EAAM;AACR,eAAOA,EAAM;AAEf,UAAIW,EAAc,SAAS,OAAOA,EAAc,SAAU;AACxD,eAAOA,EAAc;AAAA,IAGzB,CAAC,GAEKG,IAAaT,EAAI,EAAK;AAE5B,IAAAU,EAAcR,CAAI;AAElB,UAAMS,IAAWP,EAAS,MAAOK,EAAW,QAAQ,qBAAqB,WAAY,GAE/EG,IAAc,MAAM;AACxB,MAAAH,EAAW,QAAQ,IACnB,WAAW,MAAM;AACf,QAAAA,EAAW,QAAQ;AAAA,MACrB,GAAG,IAAI;AAEP,YAAMI,IAASL,EAAoB;AAEnC,MAAIK,MAAW,UACb,UAAU,UAAU,UAAUA,CAAM;AAAA,IAExC,GAEMC,IAAkB,CAACC,MAAqB;AAC5C,YAAMC,IAAaR,EAAoB;AAEvC,MAAIQ,MAAe,UACjBC,EAAgB,CAACD,GAAY,YAAY,GAAGD,CAAQ;AAAA,IAExD,GAEMG,IAAuB,MAAM;AACjC,MAAIvB,EAAM,qBAIVwB,EAAMlB,EAAW,OAAO,CAACmB,MAAO;AAC9B,QAAIrB,EAAW,SACbqB,EAAG,SAASA,EAAG,YAAYA,EAAG,YAAY;AAAA,MAE9C,CAAC;AAAA,IACH;AAEA,IAAAC;AAAA,MACEf;AAAA,MACA,MAAM;AACJ,8BAAsB,MAAM;AAC1B,UAAAY,EAAA;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK;AAGpB,UAAMI,IAAkB,CAACC,MAAc;AACrC,YAAMH,IAAKG,EAAG;AACd,MAAAxB,EAAW,QAAQqB,EAAG,YAAY,MAA4BA,EAAG,eAAeA,EAAG;AAAA,IACrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlLogView.vue.js","sources":["../../../src/components/PlLogView/PlLogView.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Log Viewer Component\n */\nexport default {\n  name: 'PlLogView',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, useSlots, watch } from 'vue';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport './pl-log-view.scss';\nimport { okOptional, tapIf } from '@milaboratories/helpers';\nimport type { AnyLogHandle, Platforma, ValueOrErrors } from '@platforma-sdk/model';\nimport { useLogHandle } from './useLogHandle';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { PlTooltip } from '../PlTooltip';\nimport { PlIcon24 } from '../PlIcon24';\nimport { downloadContent } from '../../helpers/dom';\n\nconst getOutputError = <T>(o?: ValueOrErrors<T>) => {\n  if (o && o.ok === false) {\n    return o.errors.join('\\n');\n  }\n};\n\nconst slots = useSlots();\n\nconst props = defineProps<{\n  /**\n   * String contents\n   */\n  value?: string;\n  /**\n   * The content to copy (Note: it takes precedence over value property)\n   */\n  valueToCopy?: string;\n  /**\n   * AnyLogHandle\n   */\n  logHandle?: AnyLogHandle;\n  /**\n   * Custom progress prefix (to filter logHandle results)\n   */\n  progressPrefix?: string;\n  /**\n   * String contents\n   */\n  error?: unknown;\n  /**\n   * Block output (Note: error and value take precedence over output property)\n   */\n  output?: ValueOrErrors<unknown>;\n  /**\n   * Max retries for AnyLogHandle fetch (with the same parameters)\n   */\n  maxRetries?: number;\n  /**\n   * @TODO\n   */\n  mockPlatforma?: Platforma;\n  /**\n   * The label to display above the texarea.\n   */\n  label?: string;\n  /**\n   * Do not scroll to bottom on content change. Default is false (scroll to bottom).\n   */\n  disableAutoScroll?: boolean;\n  /**\n   * If provided, a download icon will be shown and the content will be downloaded when clicked.\n   */\n  downloadFilename?: string;\n}>();\n\nconst logState = useLogHandle(props);\n\nconst isAnchored = ref<boolean>(true);\n\nconst contentRef = ref<HTMLElement>();\n\nconst root = ref<HTMLInputElement>();\n\nconst computedError = computed(() => logState.value?.error ?? props.error ?? getOutputError(props.output));\n\nconst computedValue = computed(() => logState.value?.lines ?? props.value ?? okOptional(props.output));\n\nconst computedValueToCopy = computed(() => {\n  if (props.valueToCopy) {\n    return props.valueToCopy;\n  }\n  if (computedValue.value && typeof computedValue.value === 'string') {\n    return computedValue.value;\n  }\n  return undefined;\n});\n\nconst copyActive = ref(false);\n\nuseLabelNotch(root);\n\nconst iconName = computed(() => (copyActive.value ? 'clipboard-copied' : 'clipboard'));\n\nconst onClickCopy = () => {\n  copyActive.value = true;\n  setTimeout(() => {\n    copyActive.value = false;\n  }, 1200);\n\n  const toCopy = computedValueToCopy.value;\n\n  if (toCopy !== undefined) {\n    navigator.clipboard.writeText(toCopy);\n  }\n};\n\nconst onClickDownload = (filename: string) => {\n  const toDownload = computedValueToCopy.value;\n\n  if (toDownload !== undefined) {\n    downloadContent([toDownload, 'text/plain'], filename);\n  }\n};\n\nconst optionallyScrollDown = () => {\n  if (props.disableAutoScroll) {\n    return;\n  }\n\n  tapIf(contentRef.value, (el) => {\n    if (isAnchored.value) {\n      el.scrollTo(el.scrollLeft, el.scrollHeight);\n    }\n  });\n};\n\nwatch(\n  computedValue,\n  () => {\n    requestAnimationFrame(() => {\n      optionallyScrollDown();\n    });\n  },\n  { immediate: true },\n);\n\nconst onContentScroll = (ev: Event) => {\n  const el = ev.target as HTMLElement;\n  isAnchored.value = el.scrollTop + 20 /* ~ 1 line height */ >= el.scrollHeight - el.offsetHeight;\n};\n</script>\n\n<template>\n  <div ref=\"root\" class=\"pl-log-view\" :class=\"{ 'has-error': computedError }\">\n    <label v-if=\"label\">\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    <DoubleContour class=\"pl-log-view__contour\" />\n    <div class=\"pl-log-view__copy\">\n      <PlTooltip :close-delay=\"800\" position=\"top\">\n        <PlMaskIcon24 title=\"Copy content\" :name=\"iconName\" @click=\"onClickCopy\" />\n        <template #tooltip>{{ copyActive ? 'copied' : 'copy' }}</template>\n      </PlTooltip>\n      <PlTooltip v-if=\"downloadFilename\" :close-delay=\"800\" position=\"top\">\n        <PlIcon24 name=\"download\" @click=\"() => onClickDownload(downloadFilename!)\" />\n        <template #tooltip>download</template>\n      </PlTooltip>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-log-view__error\">{{ computedError }}</div>\n    <div v-else ref=\"contentRef\" class=\"pl-log-view__content\" @scroll=\"onContentScroll\">{{ computedValue }}</div>\n  </div>\n</template>\n"],"names":["__default__","getOutputError","slots","useSlots","props","__props","logState","useLogHandle","isAnchored","ref","contentRef","root","computedError","computed","_a","computedValue","okOptional","computedValueToCopy","copyActive","useLabelNotch","iconName","onClickCopy","toCopy","onClickDownload","filename","toDownload","downloadContent","optionallyScrollDown","tapIf","el","watch","onContentScroll","ev"],"mappings":";;;;;;;;;;;;;GAIAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;AAgBA,UAAMC,IAAiB,CAAI,MAAyB;AAClD,UAAI,KAAK,EAAE,OAAO;AAChB,eAAO,EAAE,OAAO,KAAK;AAAA,CAAI;AAAA,IAE7B,GAEMC,IAAQC,EAAA,GAERC,IAAQC,GA+CRC,IAAWC,EAAaH,CAAK,GAE7BI,IAAaC,EAAa,EAAI,GAE9BC,IAAaD,EAAA,GAEbE,IAAOF,EAAA,GAEPG,IAAgBC,EAAS,MAAA;;AAAM,eAAAC,IAAAR,EAAS,UAAT,gBAAAQ,EAAgB,UAASV,EAAM,SAASH,EAAeG,EAAM,MAAM;AAAA,KAAC,GAEnGW,IAAgBF,EAAS,MAAA;;AAAM,eAAAC,IAAAR,EAAS,UAAT,gBAAAQ,EAAgB,UAASV,EAAM,SAASY,EAAWZ,EAAM,MAAM;AAAA,KAAC,GAE/Fa,IAAsBJ,EAAS,MAAM;AACzC,UAAIT,EAAM;AACR,eAAOA,EAAM;AAEf,UAAIW,EAAc,SAAS,OAAOA,EAAc,SAAU;AACxD,eAAOA,EAAc;AAAA,IAGzB,CAAC,GAEKG,IAAaT,EAAI,EAAK;AAE5B,IAAAU,EAAcR,CAAI;AAElB,UAAMS,IAAWP,EAAS,MAAOK,EAAW,QAAQ,qBAAqB,WAAY,GAE/EG,IAAc,MAAM;AACxB,MAAAH,EAAW,QAAQ,IACnB,WAAW,MAAM;AACf,QAAAA,EAAW,QAAQ;AAAA,MACrB,GAAG,IAAI;AAEP,YAAMI,IAASL,EAAoB;AAEnC,MAAIK,MAAW,UACb,UAAU,UAAU,UAAUA,CAAM;AAAA,IAExC,GAEMC,IAAkB,CAACC,MAAqB;AAC5C,YAAMC,IAAaR,EAAoB;AAEvC,MAAIQ,MAAe,UACjBC,EAAgB,CAACD,GAAY,YAAY,GAAGD,CAAQ;AAAA,IAExD,GAEMG,IAAuB,MAAM;AACjC,MAAIvB,EAAM,qBAIVwB,EAAMlB,EAAW,OAAO,CAACmB,MAAO;AAC9B,QAAIrB,EAAW,SACbqB,EAAG,SAASA,EAAG,YAAYA,EAAG,YAAY;AAAA,MAE9C,CAAC;AAAA,IACH;AAEA,IAAAC;AAAA,MACEf;AAAA,MACA,MAAM;AACJ,8BAAsB,MAAM;AAC1B,UAAAY,EAAA;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK;AAGpB,UAAMI,IAAkB,CAACC,MAAc;AACrC,YAAMH,IAAKG,EAAG;AACd,MAAAxB,EAAW,QAAQqB,EAAG,YAAY,MAA4BA,EAAG,eAAeA,EAAG;AAAA,IACrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -35,6 +35,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     errorMessage?: string;
     /** Additional validity check for input value that must return an error text if failed */
     validate?: (v: number) => string | undefined;
+    /** Makes some of corners not rounded */
+    groupPosition?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle";
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: number | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<{
@@ -60,11 +62,14 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     errorMessage?: string;
     /** Additional validity check for input value that must return an error text if failed */
     validate?: (v: number) => string | undefined;
+    /** Makes some of corners not rounded */
+    groupPosition?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle";
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
 }>, {
     label: string;
     step: number;
+    groupPosition: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle";
     placeholder: string;
     minValue: number;
     maxValue: number;

package/dist/components/PlNumberField/PlNumberField.vue.js

@@ -1,10 +1,12 @@
-(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".pl-number-field{--contour-color: var(--txt-01);--contour-border-width: 1px;--options-bg: #fff;--option-hover-bg: var(--btn-sec-hover-grey);--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);--color-hint: #9d9eae}.pl-number-field ::placeholder{color:#cfd1db;opacity:1}.pl-number-field__main-wrapper{height:40px;position:relative}.pl-number-field__wrapper{padding-left:12px;border-radius:6px}.pl-number-field__wrapper.withoutArrows{padding-right:12px}.pl-number-field__icons{width:40px;border-radius:0 6px 6px 0;border-left:1px solid var(--contour-color)}.pl-number-field__icon{line-height:0}.pl-number-field__icon.disabled{cursor:not-allowed;position:relative;z-index:1}.pl-number-field__icon.disabled svg path{fill:#cfd1db}.pl-number-field__icon:hover{background-color:#9babcc29}.pl-number-field__icon:first-child{border-bottom:1px solid var(--contour-color)}.pl-number-field__hint{margin-top:3px;color:var(--color-hint)}.pl-number-field__error{margin-top:3px;color:var(--txt-error);font-size:12px;font-weight:500;line-height:16px}.pl-number-field input{outline:none;border:none;width:100%;background:unset;text-overflow:ellipsis}.pl-number-field__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none;transition:all .3s}.pl-number-field:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-number-field:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-number-field.error{--contour-color: var(--txt-error);--label-color: var(--txt-error);--color-hint: var(--txt-error)}.pl-number-field.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);cursor:not-allowed}.pl-number-field.disabled label,.pl-number-field.disabled .mi-number-field__hint,.pl-number-field.disabled input{color:var(--contour-color)}.pl-number-field.disabled svg path{fill:var(--contour-color)}.pl-number-field.disabled .mi-number-field__icons{pointer-events:none}.pl-number-field label{position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);display:flex;align-items:center;padding:0 4px;overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);transition:color .3s}.pl-number-field label .required{display:inline-block;font-weight:500;font-size:12px;line-height:16px;color:var(--txt-error);margin-right:4px}")),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-import { defineComponent as S, mergeModels as A, useModel as R, useSlots as F, ref as f, computed as i, watch as $, createElementBlock as c, openBlock as d, normalizeClass as p, createElementVNode as r, createCommentVNode as m, createVNode as j, withDirectives as T, createTextVNode as U, createBlock as K, toDisplayString as _, unref as C, withCtx as P, renderSlot as Z, vModelText as q } from "vue";
+(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(`.pl-number-field{--contour-color: var(--txt-01);--contour-border-width: 1px;--options-bg: #fff;--option-hover-bg: var(--btn-sec-hover-grey);--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);--color-hint: #9d9eae}.pl-number-field ::placeholder{color:#cfd1db;opacity:1}.pl-number-field__main-wrapper{height:40px;position:relative}.pl-number-field__wrapper{padding-left:12px;border-radius:6px}.pl-number-field__wrapper.withoutArrows{padding-right:12px}.pl-number-field__icons{width:40px;border-radius:0 6px 6px 0;border-left:1px solid var(--contour-color)}.pl-number-field__icon{line-height:0}.pl-number-field__icon.disabled{cursor:not-allowed;position:relative;z-index:1}.pl-number-field__icon.disabled svg path{fill:#cfd1db}.pl-number-field__icon:hover{background-color:#9babcc29}.pl-number-field__icon:first-child{border-bottom:1px solid var(--contour-color)}.pl-number-field__hint{margin-top:3px;color:var(--color-hint)}.pl-number-field__error{margin-top:3px;color:var(--txt-error);font-size:12px;font-weight:500;line-height:16px}.pl-number-field input{outline:none;border:none;width:100%;background:unset;text-overflow:ellipsis}.pl-number-field__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none;transition:all .3s}.pl-number-field:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-number-field:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-number-field.error{--contour-color: var(--txt-error);--label-color: var(--txt-error);--color-hint: var(--txt-error)}.pl-number-field.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);cursor:not-allowed}.pl-number-field.disabled label,.pl-number-field.disabled .mi-number-field__hint,.pl-number-field.disabled input{color:var(--contour-color)}.pl-number-field.disabled svg path{fill:var(--contour-color)}.pl-number-field.disabled .mi-number-field__icons{pointer-events:none}.pl-number-field label{position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);display:flex;align-items:center;padding:0 4px;overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);transition:color .3s}.pl-number-field label .required{display:inline-block;font-weight:500;font-size:12px;line-height:16px;color:var(--txt-error);margin-right:4px}
+.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}`)),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+import { defineComponent as S, mergeModels as A, useModel as R, useSlots as $, ref as f, computed as a, watch as F, createElementBlock as p, openBlock as d, normalizeClass as c, createElementVNode as r, createCommentVNode as m, createVNode as P, withDirectives as j, createTextVNode as T, createBlock as U, toDisplayString as L, unref as M, withCtx as K, renderSlot as Z, vModelText as q } from "vue";
 
 import z from "../../utils/DoubleContour.vue.js";
+
 import { useLabelNotch as G } from "../../utils/useLabelNotch.js";
 import H from "../PlTooltip/PlTooltip.vue.js";
-import { parseNumber as M } from "./parseNumber.js";
+import { parseNumber as C } from "./parseNumber.js";
 const J = { class: "pl-number-field__main-wrapper d-flex" }, Q = {
   key: 0,
   class: "text-description"
@@ -13,7 +15,7 @@ const J = { class: "pl-number-field__main-wrapper d-flex" }, Q = {
   class: "pl-number-field__error"
 }, Y = {
   name: "PlNumberField"
-}, ue = /* @__PURE__ */ S({
+}, ie = /* @__PURE__ */ S({
   ...Y,
   props: /* @__PURE__ */ A({
     disabled: { type: Boolean },
@@ -25,126 +27,130 @@ const J = { class: "pl-number-field__main-wrapper d-flex" }, Q = {
     useIncrementButtons: { type: Boolean, default: !0 },
     updateOnEnterOrClickOutside: { type: Boolean },
     errorMessage: { default: void 0 },
-    validate: { type: Function, default: void 0 }
+    validate: { type: Function, default: void 0 },
+    groupPosition: { default: void 0 }
   }, {
     modelValue: { required: !0 },
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(g) {
-    const t = g, n = R(g, "modelValue"), D = F(), V = f(), v = f();
-    G(V);
+  setup(V) {
+    const o = V, n = R(V, "modelValue"), D = $(), b = f(), v = f();
+    G(b);
     function x(e) {
       return e === void 0 ? "" : String(+e);
     }
-    const u = i(() => M(t, s.value)), w = f(void 0), O = () => w.value = void 0;
-    $(n, (e) => {
+    const u = a(() => C(o, s.value)), g = f(void 0), O = () => g.value = void 0;
+    F(n, (e) => {
       const l = u.value;
       (l.error || e !== l.value) && O();
     });
-    const s = i({
+    const s = a({
       get() {
-        return w.value ?? x(n.value);
+        return g.value ?? x(n.value);
       },
       set(e) {
-        const l = M(t, e);
-        w.value = l.cleanInput, l.error || t.updateOnEnterOrClickOutside ? v.value.value = l.cleanInput : n.value = l.value;
+        const l = C(o, e);
+        g.value = l.cleanInput, l.error || o.updateOnEnterOrClickOutside ? v.value.value = l.cleanInput : n.value = l.value;
       }
     }), h = f(!1);
     function E() {
       u.value.error === void 0 && (n.value = u.value.value);
     }
-    const b = i(() => {
+    const w = a(() => {
       let e = [];
-      t.errorMessage && e.push(t.errorMessage);
+      o.errorMessage && e.push(o.errorMessage);
       const l = u.value;
       if (l.error)
         e.push(l.error.message);
-      else if (t.validate && l.value !== void 0) {
-        const o = t.validate(l.value);
-        o && e.push(o);
+      else if (o.validate && l.value !== void 0) {
+        const t = o.validate(l.value);
+        t && e.push(t);
       }
       return e = [...e], e.join(" ");
-    }), y = i(() => {
+    }), y = a(() => {
       const e = u.value;
-      return t.maxValue !== void 0 && e.value !== void 0 ? e.value >= t.maxValue : !1;
-    }), k = i(() => {
+      return o.maxValue !== void 0 && e.value !== void 0 ? e.value >= o.maxValue : !1;
+    }), k = a(() => {
       const e = u.value;
-      return t.minValue !== void 0 && e.value !== void 0 ? e.value <= t.minValue : !1;
-    }), a = i(
+      return o.minValue !== void 0 && e.value !== void 0 ? e.value <= o.minValue : !1;
+    }), i = a(
       () => {
         var e;
-        return 10 ** (((e = t.step.toString().split(".").at(1)) == null ? void 0 : e.length) ?? 0);
+        return 10 ** (((e = o.step.toString().split(".").at(1)) == null ? void 0 : e.length) ?? 0);
       }
     );
-    function B() {
+    function _() {
       const l = u.value.value;
       if (!y.value) {
-        let o;
-        l === void 0 ? o = t.minValue ? t.minValue : 0 : o = ((l || 0) * a.value + t.step * a.value) / a.value, n.value = t.maxValue !== void 0 ? Math.min(t.maxValue, o) : o;
+        let t;
+        l === void 0 ? t = o.minValue ? o.minValue : 0 : t = ((l || 0) * i.value + o.step * i.value) / i.value, n.value = o.maxValue !== void 0 ? Math.min(o.maxValue, t) : t;
       }
     }
-    function L() {
+    function B() {
       const l = u.value.value;
       if (!k.value) {
-        let o;
-        l === void 0 ? o = 0 : o = ((l || 0) * a.value - t.step * a.value) / a.value, n.value = t.minValue !== void 0 ? Math.max(t.minValue, o) : o;
+        let t;
+        l === void 0 ? t = 0 : t = ((l || 0) * i.value - o.step * i.value) / i.value, n.value = o.minValue !== void 0 ? Math.max(o.minValue, t) : t;
       }
     }
     function I(e) {
-      var l, o;
-      t.updateOnEnterOrClickOutside && (e.code === "Escape" && (s.value = x(n.value), (l = v.value) == null || l.blur()), e.code === "Enter" && ((o = v.value) == null || o.blur())), e.code === "Enter" && (s.value = String(n.value)), ["ArrowDown", "ArrowUp"].includes(e.code) && e.preventDefault(), t.useIncrementButtons && e.code === "ArrowUp" && B(), t.useIncrementButtons && e.code === "ArrowDown" && L();
+      var l, t;
+      o.updateOnEnterOrClickOutside && (e.code === "Escape" && (s.value = x(n.value), (l = v.value) == null || l.blur()), e.code === "Enter" && ((t = v.value) == null || t.blur())), e.code === "Enter" && (s.value = String(n.value)), ["ArrowDown", "ArrowUp"].includes(e.code) && e.preventDefault(), o.useIncrementButtons && e.code === "ArrowUp" && _(), o.useIncrementButtons && e.code === "ArrowDown" && B();
     }
     const N = (e) => {
       e.detail > 1 && e.preventDefault();
     };
-    return (e, l) => (d(), c("div", {
+    return (e, l) => (d(), p("div", {
       ref_key: "rootRef",
-      ref: V,
-      class: p([{ error: !!b.value.trim(), disabled: e.disabled }, "pl-number-field d-flex-column"]),
-      onKeydown: l[3] || (l[3] = (o) => I(o))
+      ref: b,
+      class: c([{ error: !!w.value.trim(), disabled: e.disabled }, "pl-number-field d-flex-column"]),
+      onKeydown: l[3] || (l[3] = (t) => I(t))
     }, [
       r("div", J, [
-        j(z, { class: "pl-number-field__contour" }),
+        P(z, {
+          class: "pl-number-field__contour",
+          "group-position": e.groupPosition
+        }, null, 8, ["group-position"]),
         r("div", {
-          class: p(["pl-number-field__wrapper flex-grow d-flex flex-align-center", { withoutArrows: !e.useIncrementButtons }])
+          class: c(["pl-number-field__wrapper flex-grow d-flex flex-align-center", { withoutArrows: !e.useIncrementButtons }])
         }, [
-          e.label ? (d(), c("label", Q, [
-            U(_(e.label) + " ", 1),
-            C(D).tooltip ? (d(), K(C(H), {
+          e.label ? (d(), p("label", Q, [
+            T(L(e.label) + " ", 1),
+            M(D).tooltip ? (d(), U(M(H), {
               key: 0,
               class: "info",
               position: "top"
             }, {
-              tooltip: P(() => [
+              tooltip: K(() => [
                 Z(e.$slots, "tooltip")
               ]),
               _: 3
             })) : m("", !0)
           ])) : m("", !0),
-          T(r("input", {
+          j(r("input", {
             ref_key: "inputRef",
             ref: v,
-            "onUpdate:modelValue": l[0] || (l[0] = (o) => s.value = o),
+            "onUpdate:modelValue": l[0] || (l[0] = (t) => s.value = t),
             disabled: e.disabled,
             placeholder: e.placeholder,
             class: "text-s flex-grow",
-            onFocusin: l[1] || (l[1] = (o) => h.value = !0),
-            onFocusout: l[2] || (l[2] = (o) => {
+            onFocusin: l[1] || (l[1] = (t) => h.value = !0),
+            onFocusout: l[2] || (l[2] = (t) => {
               h.value = !1, E();
             })
           }, null, 40, W), [
             [q, s.value]
           ])
         ], 2),
-        e.useIncrementButtons ? (d(), c("div", {
+        e.useIncrementButtons ? (d(), p("div", {
           key: 0,
           class: "pl-number-field__icons d-flex-column",
           onMousedown: N
         }, [
           r("div", {
-            class: p([{ disabled: y.value }, "pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"]),
-            onClick: B
+            class: c([{ disabled: y.value }, "pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"]),
+            onClick: _
           }, l[4] || (l[4] = [
             r("svg", {
               xmlns: "http://www.w3.org/2000/svg",
@@ -162,8 +168,8 @@ const J = { class: "pl-number-field__main-wrapper d-flex" }, Q = {
             ], -1)
           ]), 2),
           r("div", {
-            class: p([{ disabled: k.value }, "pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"]),
-            onClick: L
+            class: c([{ disabled: k.value }, "pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"]),
+            onClick: B
           }, l[5] || (l[5] = [
             r("svg", {
               xmlns: "http://www.w3.org/2000/svg",
@@ -182,11 +188,11 @@ const J = { class: "pl-number-field__main-wrapper d-flex" }, Q = {
           ]), 2)
         ], 32)) : m("", !0)
       ]),
-      b.value.trim() ? (d(), c("div", X, _(b.value), 1)) : m("", !0)
+      w.value.trim() ? (d(), p("div", X, L(w.value), 1)) : m("", !0)
     ], 34));
   }
 });
 export {
-  ue as default
+  ie as default
 };
 //# sourceMappingURL=PlNumberField.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlNumberField.vue.js","sources":["../../../src/components/PlNumberField/PlNumberField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Number input field with increment/decrement buttons, validation, and min/max constraints.\n *\n * @example\n * <PlNumberField v-model=\"price\" :step=\"0.01\" :min-value=\"0\" label=\"Price\" />\n *\n * @example\n * <PlNumberField\n *   v-model=\"evenNumber\"\n *   :validate=\"(v) => v % 2 !== 0 ? 'Number must be even' : undefined\"\n *   :update-on-enter-or-click-outside=\"true\"\n *   label=\"Even Number\"\n * />\n */\nexport default {\n  name: 'PlNumberField',\n};\n</script>\n\n<script setup lang=\"ts\">\nimport './pl-number-field.scss';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport { computed, ref, useSlots, watch } from 'vue';\nimport { PlTooltip } from '../PlTooltip';\nimport { parseNumber } from './parseNumber';\n\nconst props = withDefaults(defineProps<{\n  /** Input is disabled if true */\n  disabled?: boolean;\n  /** Label on the top border of the field, empty by default */\n  label?: string;\n  /** Input placeholder, empty by default */\n  placeholder?: string;\n  /** Step for increment/decrement buttons, 1 by default */\n  step?: number;\n  /** If defined - show an error if value is lower  */\n  minValue?: number;\n  /** If defined - show an error if value is higher */\n  maxValue?: number;\n  /** If false - remove buttons on the right */\n  useIncrementButtons?: boolean;\n  /** If true - changes do not apply immediately, they apply only by removing focus from the input (by click enter or by click outside)  */\n  updateOnEnterOrClickOutside?: boolean;\n  /** Error message that shows always when it's provided, without other checks */\n  errorMessage?: string;\n  /** Additional validity check for input value that must return an error text if failed */\n  validate?: (v: number) => string | undefined;\n}>(), {\n  step: 1,\n  label: undefined,\n  placeholder: undefined,\n  minValue: undefined,\n  maxValue: undefined,\n  useIncrementButtons: true,\n  updateOnEnter: false,\n  errorMessage: undefined,\n  validate: undefined,\n});\n\nconst modelValue = defineModel<number | undefined>({ required: true });\n\nconst slots = useSlots();\n\nconst rootRef = ref<HTMLElement>();\nconst inputRef = ref<HTMLInputElement>();\n\nuseLabelNotch(rootRef);\n\nfunction modelToString(v: number | undefined) {\n  return v === undefined ? '' : String(+v); // (+v) to avoid staying in input non-number values if they are provided in model\n}\n\nconst parsedResult = computed(() => parseNumber(props, inputValue.value));\n\nconst cachedValue = ref<string | undefined>(undefined);\n\nconst resetCachedValue = () => cachedValue.value = undefined;\n\nwatch(modelValue, (n) => {\n  const r = parsedResult.value;\n  if (r.error || n !== r.value) {\n    resetCachedValue();\n  }\n});\n\nconst inputValue = computed({\n  get() {\n    return cachedValue.value ?? modelToString(modelValue.value);\n  },\n  set(nextValue: string) {\n    const r = parseNumber(props, nextValue);\n\n    cachedValue.value = r.cleanInput;\n\n    if (r.error || props.updateOnEnterOrClickOutside) {\n      inputRef.value!.value = r.cleanInput;\n    } else {\n      modelValue.value = r.value;\n    }\n  },\n});\n\nconst focused = ref(false);\n\nfunction applyChanges() {\n  if (parsedResult.value.error === undefined) {\n    modelValue.value = parsedResult.value.value;\n  }\n}\n\nconst errors = computed(() => {\n  let ers: string[] = [];\n\n  if (props.errorMessage) {\n    ers.push(props.errorMessage);\n  }\n\n  const r = parsedResult.value;\n\n  if (r.error) {\n    ers.push(r.error.message);\n  } else if (props.validate && r.value !== undefined) {\n    const error = props.validate(r.value);\n    if (error) {\n      ers.push(error);\n    }\n  }\n\n  ers = [...ers];\n\n  return ers.join(' ');\n});\n\nconst isIncrementDisabled = computed(() => {\n  const r = parsedResult.value;\n\n  if (props.maxValue !== undefined && r.value !== undefined) {\n    return r.value >= props.maxValue;\n  }\n\n  return false;\n});\n\nconst isDecrementDisabled = computed(() => {\n  const r = parsedResult.value;\n\n  if (props.minValue !== undefined && r.value !== undefined) {\n    return r.value <= props.minValue;\n  }\n\n  return false;\n});\n\nconst multiplier = computed(() =>\n  10 ** (props.step.toString().split('.').at(1)?.length ?? 0),\n);\n\nfunction increment() {\n  const r = parsedResult.value;\n\n  const parsedValue = r.value;\n\n  if (!isIncrementDisabled.value) {\n    let nV;\n    if (parsedValue === undefined) {\n      nV = props.minValue ? props.minValue : 0;\n    } else {\n      nV = ((parsedValue || 0) * multiplier.value\n        + props.step * multiplier.value)\n      / multiplier.value;\n    }\n    modelValue.value = props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV;\n  }\n}\n\nfunction decrement() {\n  const r = parsedResult.value;\n\n  const parsedValue = r.value;\n\n  if (!isDecrementDisabled.value) {\n    let nV;\n    if (parsedValue === undefined) {\n      nV = 0;\n    } else {\n      nV = ((parsedValue || 0) * multiplier.value\n        - props.step * multiplier.value)\n      / multiplier.value;\n    }\n    modelValue.value = props.minValue !== undefined ? Math.max(props.minValue, nV) : nV;\n  }\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }) {\n  if (props.updateOnEnterOrClickOutside) {\n    if (e.code === 'Escape') {\n      inputValue.value = modelToString(modelValue.value);\n      inputRef.value?.blur();\n    }\n    if (e.code === 'Enter') {\n      inputRef.value?.blur();\n    }\n  }\n\n  if (e.code === 'Enter') {\n    inputValue.value = String(modelValue.value); // to make .1 => 0.1, 10.00 => 10, remove leading zeros etc\n  }\n\n  if (['ArrowDown', 'ArrowUp'].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (props.useIncrementButtons && e.code === 'ArrowUp') {\n    increment();\n  }\n\n  if (props.useIncrementButtons && e.code === 'ArrowDown') {\n    decrement();\n  }\n}\n\n// https://stackoverflow.com/questions/880512/prevent-text-selection-after-double-click#:~:text=If%20you%20encounter%20a%20situation,none%3B%20to%20the%20summary%20element.\n// this prevents selecting of more than input content in some cases,\n// but also disable selecting input content by double-click (useful feature)\nconst onMousedown = (ev: MouseEvent) => {\n  if (ev.detail > 1) {\n    ev.preventDefault();\n  }\n};\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"{ error: !!errors.trim(), disabled: disabled }\"\n    class=\"pl-number-field d-flex-column\"\n    @keydown=\"handleKeyPress($event)\"\n  >\n    <div class=\"pl-number-field__main-wrapper d-flex\">\n      <DoubleContour class=\"pl-number-field__contour\"/>\n      <div\n        class=\"pl-number-field__wrapper flex-grow d-flex flex-align-center\"\n        :class=\"{withoutArrows: !useIncrementButtons}\"\n      >\n        <label v-if=\"label\" class=\"text-description\">\n          {{ label }}\n          <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\"/>\n            </template>\n          </PlTooltip>\n        </label>\n        <input\n          ref=\"inputRef\"\n          v-model=\"inputValue\"\n          :disabled=\"disabled\"\n          :placeholder=\"placeholder\"\n          class=\"text-s flex-grow\"\n          @focusin=\"focused = true\"\n          @focusout=\"focused = false; applyChanges()\"\n        />\n      </div>\n      <div v-if=\"useIncrementButtons\" class=\"pl-number-field__icons d-flex-column\" @mousedown=\"onMousedown\">\n        <div\n          :class=\"{ disabled: isIncrementDisabled }\"\n          class=\"pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n          @click=\"increment\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M8 4.93933L13.5303 10.4697L12.4697 11.5303L8 7.06065L3.53033 11.5303L2.46967 10.4697L8 4.93933Z\"\n              fill=\"#110529\"\n            />\n          </svg>\n        </div>\n        <div\n          :class=\"{ disabled: isDecrementDisabled }\"\n          class=\"pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n          @click=\"decrement\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2.46967 6.53033L3.53033 5.46967L8 9.93934L12.4697 5.46967L13.5303 6.53033L8 12.0607L2.46967 6.53033Z\"\n              fill=\"#110529\"\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"errors.trim()\" class=\"pl-number-field__error\">\n      {{ errors }}\n    </div>\n  </div>\n</template>\n"],"names":["__default__","props","__props","modelValue","_useModel","slots","useSlots","rootRef","ref","inputRef","useLabelNotch","modelToString","v","parsedResult","computed","parseNumber","inputValue","cachedValue","resetCachedValue","watch","n","r","nextValue","focused","applyChanges","errors","ers","error","isIncrementDisabled","isDecrementDisabled","multiplier","_a","increment","parsedValue","nV","decrement","handleKeyPress","_b","onMousedown","ev"],"mappings":"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"}
+{"version":3,"file":"PlNumberField.vue.js","sources":["../../../src/components/PlNumberField/PlNumberField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Number input field with increment/decrement buttons, validation, and min/max constraints.\n *\n * @example\n * <PlNumberField v-model=\"price\" :step=\"0.01\" :min-value=\"0\" label=\"Price\" />\n *\n * @example\n * <PlNumberField\n *   v-model=\"evenNumber\"\n *   :validate=\"(v) => v % 2 !== 0 ? 'Number must be even' : undefined\"\n *   :update-on-enter-or-click-outside=\"true\"\n *   label=\"Even Number\"\n * />\n */\nexport default {\n  name: 'PlNumberField',\n};\n</script>\n\n<script setup lang=\"ts\">\nimport './pl-number-field.scss';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport { computed, ref, useSlots, watch } from 'vue';\nimport { PlTooltip } from '../PlTooltip';\nimport { parseNumber } from './parseNumber';\n\nconst props = withDefaults(defineProps<{\n  /** Input is disabled if true */\n  disabled?: boolean;\n  /** Label on the top border of the field, empty by default */\n  label?: string;\n  /** Input placeholder, empty by default */\n  placeholder?: string;\n  /** Step for increment/decrement buttons, 1 by default */\n  step?: number;\n  /** If defined - show an error if value is lower  */\n  minValue?: number;\n  /** If defined - show an error if value is higher */\n  maxValue?: number;\n  /** If false - remove buttons on the right */\n  useIncrementButtons?: boolean;\n  /** If true - changes do not apply immediately, they apply only by removing focus from the input (by click enter or by click outside)  */\n  updateOnEnterOrClickOutside?: boolean;\n  /** Error message that shows always when it's provided, without other checks */\n  errorMessage?: string;\n  /** Additional validity check for input value that must return an error text if failed */\n  validate?: (v: number) => string | undefined;\n  /** Makes some of corners not rounded */\n  groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';\n}>(), {\n  step: 1,\n  label: undefined,\n  placeholder: undefined,\n  minValue: undefined,\n  maxValue: undefined,\n  useIncrementButtons: true,\n  updateOnEnter: false,\n  errorMessage: undefined,\n  validate: undefined,\n  groupPosition: undefined,\n});\n\nconst modelValue = defineModel<number | undefined>({ required: true });\n\nconst slots = useSlots();\n\nconst rootRef = ref<HTMLElement>();\nconst inputRef = ref<HTMLInputElement>();\n\nuseLabelNotch(rootRef);\n\nfunction modelToString(v: number | undefined) {\n  return v === undefined ? '' : String(+v); // (+v) to avoid staying in input non-number values if they are provided in model\n}\n\nconst parsedResult = computed(() => parseNumber(props, inputValue.value));\n\nconst cachedValue = ref<string | undefined>(undefined);\n\nconst resetCachedValue = () => cachedValue.value = undefined;\n\nwatch(modelValue, (n) => {\n  const r = parsedResult.value;\n  if (r.error || n !== r.value) {\n    resetCachedValue();\n  }\n});\n\nconst inputValue = computed({\n  get() {\n    return cachedValue.value ?? modelToString(modelValue.value);\n  },\n  set(nextValue: string) {\n    const r = parseNumber(props, nextValue);\n\n    cachedValue.value = r.cleanInput;\n\n    if (r.error || props.updateOnEnterOrClickOutside) {\n      inputRef.value!.value = r.cleanInput;\n    } else {\n      modelValue.value = r.value;\n    }\n  },\n});\n\nconst focused = ref(false);\n\nfunction applyChanges() {\n  if (parsedResult.value.error === undefined) {\n    modelValue.value = parsedResult.value.value;\n  }\n}\n\nconst errors = computed(() => {\n  let ers: string[] = [];\n\n  if (props.errorMessage) {\n    ers.push(props.errorMessage);\n  }\n\n  const r = parsedResult.value;\n\n  if (r.error) {\n    ers.push(r.error.message);\n  } else if (props.validate && r.value !== undefined) {\n    const error = props.validate(r.value);\n    if (error) {\n      ers.push(error);\n    }\n  }\n\n  ers = [...ers];\n\n  return ers.join(' ');\n});\n\nconst isIncrementDisabled = computed(() => {\n  const r = parsedResult.value;\n\n  if (props.maxValue !== undefined && r.value !== undefined) {\n    return r.value >= props.maxValue;\n  }\n\n  return false;\n});\n\nconst isDecrementDisabled = computed(() => {\n  const r = parsedResult.value;\n\n  if (props.minValue !== undefined && r.value !== undefined) {\n    return r.value <= props.minValue;\n  }\n\n  return false;\n});\n\nconst multiplier = computed(() =>\n  10 ** (props.step.toString().split('.').at(1)?.length ?? 0),\n);\n\nfunction increment() {\n  const r = parsedResult.value;\n\n  const parsedValue = r.value;\n\n  if (!isIncrementDisabled.value) {\n    let nV;\n    if (parsedValue === undefined) {\n      nV = props.minValue ? props.minValue : 0;\n    } else {\n      nV = ((parsedValue || 0) * multiplier.value\n        + props.step * multiplier.value)\n      / multiplier.value;\n    }\n    modelValue.value = props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV;\n  }\n}\n\nfunction decrement() {\n  const r = parsedResult.value;\n\n  const parsedValue = r.value;\n\n  if (!isDecrementDisabled.value) {\n    let nV;\n    if (parsedValue === undefined) {\n      nV = 0;\n    } else {\n      nV = ((parsedValue || 0) * multiplier.value\n        - props.step * multiplier.value)\n      / multiplier.value;\n    }\n    modelValue.value = props.minValue !== undefined ? Math.max(props.minValue, nV) : nV;\n  }\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }) {\n  if (props.updateOnEnterOrClickOutside) {\n    if (e.code === 'Escape') {\n      inputValue.value = modelToString(modelValue.value);\n      inputRef.value?.blur();\n    }\n    if (e.code === 'Enter') {\n      inputRef.value?.blur();\n    }\n  }\n\n  if (e.code === 'Enter') {\n    inputValue.value = String(modelValue.value); // to make .1 => 0.1, 10.00 => 10, remove leading zeros etc\n  }\n\n  if (['ArrowDown', 'ArrowUp'].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (props.useIncrementButtons && e.code === 'ArrowUp') {\n    increment();\n  }\n\n  if (props.useIncrementButtons && e.code === 'ArrowDown') {\n    decrement();\n  }\n}\n\n// https://stackoverflow.com/questions/880512/prevent-text-selection-after-double-click#:~:text=If%20you%20encounter%20a%20situation,none%3B%20to%20the%20summary%20element.\n// this prevents selecting of more than input content in some cases,\n// but also disable selecting input content by double-click (useful feature)\nconst onMousedown = (ev: MouseEvent) => {\n  if (ev.detail > 1) {\n    ev.preventDefault();\n  }\n};\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"{ error: !!errors.trim(), disabled: disabled }\"\n    class=\"pl-number-field d-flex-column\"\n    @keydown=\"handleKeyPress($event)\"\n  >\n    <div class=\"pl-number-field__main-wrapper d-flex\">\n      <DoubleContour class=\"pl-number-field__contour\" :group-position=\"groupPosition\"/>\n      <div\n        class=\"pl-number-field__wrapper flex-grow d-flex flex-align-center\"\n        :class=\"{withoutArrows: !useIncrementButtons}\"\n      >\n        <label v-if=\"label\" class=\"text-description\">\n          {{ label }}\n          <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\"/>\n            </template>\n          </PlTooltip>\n        </label>\n        <input\n          ref=\"inputRef\"\n          v-model=\"inputValue\"\n          :disabled=\"disabled\"\n          :placeholder=\"placeholder\"\n          class=\"text-s flex-grow\"\n          @focusin=\"focused = true\"\n          @focusout=\"focused = false; applyChanges()\"\n        />\n      </div>\n      <div v-if=\"useIncrementButtons\" class=\"pl-number-field__icons d-flex-column\" @mousedown=\"onMousedown\">\n        <div\n          :class=\"{ disabled: isIncrementDisabled }\"\n          class=\"pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n          @click=\"increment\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M8 4.93933L13.5303 10.4697L12.4697 11.5303L8 7.06065L3.53033 11.5303L2.46967 10.4697L8 4.93933Z\"\n              fill=\"#110529\"\n            />\n          </svg>\n        </div>\n        <div\n          :class=\"{ disabled: isDecrementDisabled }\"\n          class=\"pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n          @click=\"decrement\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2.46967 6.53033L3.53033 5.46967L8 9.93934L12.4697 5.46967L13.5303 6.53033L8 12.0607L2.46967 6.53033Z\"\n              fill=\"#110529\"\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"errors.trim()\" class=\"pl-number-field__error\">\n      {{ errors }}\n    </div>\n  </div>\n</template>\n"],"names":["__default__","props","__props","modelValue","_useModel","slots","useSlots","rootRef","ref","inputRef","useLabelNotch","modelToString","v","parsedResult","computed","parseNumber","inputValue","cachedValue","resetCachedValue","watch","n","r","nextValue","focused","applyChanges","errors","ers","error","isIncrementDisabled","isDecrementDisabled","multiplier","_a","increment","parsedValue","nV","decrement","handleKeyPress","_b","onMousedown","ev"],"mappings":"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"}

package/dist/components/PlSlideModal/PlPureSlideModal.vue.js

@@ -12,6 +12,7 @@
 .expand-collapse-fix{overflow:hidden}.expand-collapse-enter-active,.expand-collapse-leave-active{transition:height .2s ease-in-out,opacity .2s ease-in-out;height:var(--component-height)}.expand-collapse-enter-from,.expand-collapse-leave-to{opacity:.5;height:0}
 .pl-alert{--text-font-family: var(--font-family-base);--text-white-space: normal;--indent: 24px;position:relative;padding:12px;display:flex;flex-wrap:nowrap;gap:12px;border:1px solid var(--border-color-default);border-radius:6px;color:var(--txt-01)}.pl-alert.monospace{--text-font-family: var(--font-family-monospace)}.pl-alert.whiteSpacePre{--text-white-space: pre}.pl-alert__error{background:var(--notification-error)}.pl-alert__warn{background:var(--notification-warning)}.pl-alert__success{background:var(--notification-success)}.pl-alert__info{background:var(--notification-neutral)}.pl-alert__icon{width:24px}.pl-alert__main{display:flex;flex-direction:column;min-height:24px;flex:1;overflow:hidden;width:100%;gap:6px}.pl-alert__main label{font-size:20px;font-weight:500;line-height:24px;letter-spacing:-.2px}.pl-alert__main__text{font-size:14px;font-weight:500;line-height:20px;font-family:var(--text-font-family);white-space:var(--text-white-space);max-width:100%;flex:1;--thumb-color: var(--ic-02);overflow-y:auto}.pl-alert__main__text::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-alert__main__text::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-alert__main__text::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-alert__close-btn{position:absolute;top:10px;right:12px;cursor:pointer;background-color:#d3d7e0;mask-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.99954%2018L11.9995%2012M11.9995%2012L17.9995%206M11.9995%2012L5.99954%206M11.9995%2012L17.9995%2018'%20stroke='%23110529'%20stroke-width='1.5'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.99954%2018L11.9995%2012M11.9995%2012L17.9995%206M11.9995%2012L5.99954%206M11.9995%2012L17.9995%2018'%20stroke='%23110529'%20stroke-width='1.5'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:24px;-webkit-mask-size:24px;width:24px;height:24px;transition:all .1s ease-in-out}.pl-alert__close-btn:hover{background-color:var(--main-dark-color)}
 .pl-autocomplete__options{--option-hover-bg: var(--btn-sec-hover-grey);z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);position:absolute;background-color:var(--pl-dropdown-options-bg);border-radius:6px;max-height:244px;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14;--thumb-color: var(--ic-02);overflow-y:auto}.pl-autocomplete__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-autocomplete__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-autocomplete__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-autocomplete__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:var(--control-height);background-color:#fff;opacity:.5;font-style:italic}.pl-autocomplete__options .option{position:relative;padding:0 30px 0 10px;height:var(--control-height);line-height:var(--control-height);cursor:pointer;-webkit-user-select:none;user-select:none}.pl-autocomplete__options .option .checkmark{position:absolute;display:none;right:10px;top:50%;transform:translateY(-50%)}.pl-autocomplete__options .option>span{display:block;overflow:hidden;white-space:nowrap;max-width:100%;text-overflow:ellipsis}.pl-autocomplete__options .option.selected{background-color:var(--color-active-select)}.pl-autocomplete__options .option.selected .checkmark{display:block}.pl-autocomplete__options .option.active:not(.selected){background-color:var(--option-hover-bg)}.pl-autocomplete__options .option:hover{background-color:var(--option-hover-bg)}.pl-autocomplete{--contour-color: var(--txt-01);--contour-border-width: 1px;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}.pl-autocomplete__envelope{font-family:var(--control-font-family);min-width:160px}.pl-autocomplete label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-autocomplete label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-autocomplete__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);color:var(--txt-01)}.pl-autocomplete__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-autocomplete__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding-left:11px;min-height:var(--control-height);line-height:var(--control-height);display:flex;flex-direction:row;align-items:center;cursor:pointer}.pl-autocomplete__field .input-value{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:row;align-items:center;padding:0 60px 0 11px;pointer-events:none;line-height:20px;color:var(--txt-01);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit}.pl-autocomplete__field input{min-height:calc(var(--control-height) - 2px);line-height:20px;font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-autocomplete__field input:focus{outline:none}.pl-autocomplete__field input:placeholder-shown{text-overflow:ellipsis}.pl-autocomplete__field input::placeholder{color:var(--color-placeholder)}.pl-autocomplete__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-autocomplete__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-autocomplete__controls{display:flex;flex-direction:row;align-items:center;min-height:var(--control-height);gap:6px;margin-left:auto}.pl-autocomplete__controls .mask-16,.pl-autocomplete__controls .mask-24{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-autocomplete__controls .clear{--icon-color: var(--ic-02)}.pl-autocomplete__controls .mask-loading{--icon-color: var(#07AD3E);animation:spin 2.5s linear infinite}.pl-autocomplete__arrow-wrapper{display:flex;align-items:center;min-height:var(--control-height);padding-right:11px}.pl-autocomplete .arrow-icon{cursor:pointer}.pl-autocomplete .arrow-icon.arrow-icon-default{transition:transform .2s;background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-autocomplete.open,.pl-autocomplete:focus-within{z-index:1;--label-color: var(--txt-focus)}.pl-autocomplete.open .pl-autocomplete__container{z-index:1000}.pl-autocomplete.open .pl-autocomplete__field{border-radius:6px 6px 0 0}.pl-autocomplete.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-autocomplete:hover{--contour-color: var(--control-hover-color)}.pl-autocomplete:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-autocomplete:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-autocomplete.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-autocomplete.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none;-webkit-user-select:none;user-select:none}.pl-autocomplete.disabled .input-value{color:var(--dis-01)}
+.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}
 .pl-autocomplete-multi{--contour-color: var(--txt-01);--contour-border-width: 1px;--options-bg: #fff;--option-hover-bg: var(--btn-sec-hover-grey);--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}[data-theme=dark] .pl-autocomplete-multi{--options-bg: #1B1B1F}.pl-autocomplete-multi__envelope{font-family:var(--control-font-family);min-width:160px}.pl-autocomplete-multi label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-autocomplete-multi label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-autocomplete-multi__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);padding:1px;color:var(--txt-01)}.pl-autocomplete-multi__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-autocomplete-multi__options{position:absolute;z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);border-radius:6px;max-height:244px;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14;--thumb-color: var(--ic-02);overflow-y:auto}.pl-autocomplete-multi__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-autocomplete-multi__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-autocomplete-multi__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-autocomplete-multi__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:20px;background-color:#fff;opacity:.5;font-style:italic}.pl-autocomplete-multi__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding-left:11px;min-height:var(--control-height);line-height:20px;cursor:pointer;display:flex;flex-direction:row;align-items:center}.pl-autocomplete-multi__field .chips-container{position:absolute;top:0;left:0;bottom:0;right:30px;overflow:hidden;padding:0 60px 0 11px;line-height:20px;color:var(--contour-color);display:flex;gap:8px;align-items:center}.pl-autocomplete-multi__field input{min-height:calc(var(--control-height) - 2px);line-height:20px;font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 20px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-autocomplete-multi__field input:focus{outline:none}.pl-autocomplete-multi__field input:placeholder-shown{text-overflow:ellipsis}.pl-autocomplete-multi__field input::placeholder{color:var(--color-placeholder)}.pl-autocomplete-multi__field:hover .clear{display:block}.pl-autocomplete-multi__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-autocomplete-multi__controls .mask-16,.pl-autocomplete-multi__controls .mask-24{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-autocomplete-multi__controls .mask-loading{--icon-color: var(--ic-accent);animation:spin 2.5s linear infinite}.pl-autocomplete-multi__arrow-wrapper{display:flex;align-items:center;min-height:var(--control-height);padding-right:11px}.pl-autocomplete-multi .arrow-icon{cursor:pointer}.pl-autocomplete-multi .arrow-icon.arrow-icon-default{transition:transform .2s;background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-autocomplete-multi__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-autocomplete-multi__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-autocomplete-multi.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-autocomplete-multi .clear{display:none;position:absolute;top:50%;transform:translateY(-50%);right:36px;z-index:1;background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") no-repeat center;width:16px;height:16px;cursor:pointer}.pl-autocomplete-multi.open,.pl-autocomplete-multi:focus-within{z-index:1}.pl-autocomplete-multi.open .pl-autocomplete-multi__container .label,.pl-autocomplete-multi:focus-within .pl-autocomplete-multi__container .label{color:var(--txt-focus)}.pl-autocomplete-multi.open .pl-autocomplete-multi__container{z-index:1000}.pl-autocomplete-multi.open .pl-autocomplete-multi__field{border-radius:6px 6px 0 0}.pl-autocomplete-multi.open .arrow{background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-autocomplete-multi:hover{--contour-color: var(--control-hover-color)}.pl-autocomplete-multi:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-autocomplete-multi:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-autocomplete-multi.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-autocomplete-multi.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none}.pl-autocomplete-multi.disabled .mask-loading{animation:spin 2.5s linear infinite;--icon-color: var(--ic-accent)}.pl-autocomplete-multi__open-chips-container{padding:12px}.pl-autocomplete-multi__open-chips-container .pl-chip{margin-right:4px;margin-bottom:4px}
 .pl-chip-tooltip{display:inline-flex}.pl-chip{--chip-color: var(--txt-01);position:relative;display:inline-flex;align-items:center;gap:4px;padding:0 8px;height:32px;background:var(--chip-bg);border:var(--chip-border);border-radius:6px;max-width:256px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);line-height:calc(var(--line-height-base) + 2px);letter-spacing:-.2px;color:var(--chip-color)}.pl-chip.small{height:24px;padding:0 6px;border-radius:4px}.pl-chip.large{height:40px;padding:0 12px;border-radius:6px}[data-theme=dark] .pl-chip{color:#fff}.pl-chip__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pl-chip__close{cursor:pointer;--mask-color: var(--chip-close-ic-color)}.pl-chip__close:hover{--mask-color: var(--chip-close-ic-hover-color)}.pl-chip__close:focus-visible{--mask-color: var(--chip-close-ic-hover-color);box-shadow:0 0 0 2px var(--border-color-focus);border-radius:1px;outline:none}.pl-chip__close--icon{background:var(--mask-color);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M4.00001%202.93933L8.00001%206.93933L12%202.93933L13.0607%203.99999L9.06067%207.99999L13.0607%2012L12%2013.0607L8.00001%209.06065L4.00001%2013.0607L2.93935%2012L6.93935%207.99999L2.93935%203.99999L4.00001%202.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M4.00001%202.93933L8.00001%206.93933L12%202.93933L13.0607%203.99999L9.06067%207.99999L13.0607%2012L12%2013.0607L8.00001%209.06065L4.00001%2013.0607L2.93935%2012L6.93935%207.99999L2.93935%203.99999L4.00001%202.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}
 .pl-btn-accent{--font-size: 14px;--border-radius: 6px;--button-height: 40px;--focus-shadow: 0 0 0 0 transparent;--btn-disabled-bg: var(--color-dis-01);--color-text: var(--txt-00);--shape-shadow: 0 0 0 0 transparent;--append-shadow: 0 0 0 0 transparent;--drop-shadow: 0 0 0 0 transparent;--active-shadow: 0 0 0 0 transparent;--main-padding: 0 12px;text-transform:capitalize;position:relative;overflow:hidden;display:flex;flex-direction:row;justify-content:space-between;align-items:center;white-space:nowrap;gap:8px;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);line-height:16px;height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);outline:none;-webkit-user-select:none;user-select:none;transition:box-shadow .05s ease-in-out;box-shadow:var(--focus-shadow),var(--append-shadow),var(--shape-shadow),var(--active-shadow),var(--drop-shadow)}.pl-btn-accent.justifyCenter{justify-content:center}.pl-btn-accent.round{border-radius:50%;width:var(--button-height);min-width:var(--button-height);padding:0;justify-content:center}.pl-btn-accent.small{--button-height: 32px;--main-padding: 0 8px}.pl-btn-accent.medium{--main-padding: 0 16px}.pl-btn-accent.large{--button-height: 56px;--border-radius: 8px;--font-size: 16px;--main-padding: 0 18px}.pl-btn-accent.large .mask{--mask-size: 24px}.pl-btn-accent:disabled{--color-text: var(--dis-00);--icon-color: var(--dis-00)}.pl-btn-accent:disabled *{color:var(--color-text)}.pl-btn-accent:not([disabled]){cursor:pointer}.pl-btn-accent:not([disabled]).hover{background:var(--color-btn-hover)}.pl-btn-accent:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-accent:focus-visible{--focus-shadow: inset 0 0 0 2px var(--border-color-focus)}.pl-btn-accent .icon{display:block;width:16px;height:16px}.pl-btn-accent.loading{box-shadow:none!important}.pl-btn-accent.loading .mask-loading{display:block;animation:spin 4s linear infinite}.pl-btn-accent.reverse{flex-direction:row-reverse}.pl-btn-accent>span{display:inline-flex}.pl-btn-accent{--color-btn-background: var(--color-accent-default);--color-btn-hover: var(--color-accent-hover);background-color:var(--color-btn-background);border:none}.pl-btn-accent.large{--drop-shadow: 3px 3px 0px #000000}.pl-btn-accent.loading{background:#070529cc}.pl-btn-accent:disabled{background-color:var(--btn-disabled-bg);box-shadow:none!important;cursor:auto}.pl-btn-accent:active{--active-shadow: inset 0px 3px 0px rgba(0, 0, 0, .24);--drop-shadow: 0 0 0 0 transparent}
@@ -65,6 +66,7 @@ import "../PlSvg/registry.js";
 
 
 
+
 import "canonicalize";
 
 
@@ -105,7 +107,7 @@ import "../../colors/gradient.js";
 const K = {
   name: "PlPureSlideModal",
   inheritAttrs: !1
-}, Tt = /* @__PURE__ */ f({
+}, jt = /* @__PURE__ */ f({
   ...K,
   props: /* @__PURE__ */ c({
     modelValue: { type: Boolean },
@@ -150,6 +152,6 @@ const K = {
   }
 });
 export {
-  Tt as default
+  jt as default
 };
 //# sourceMappingURL=PlPureSlideModal.vue.js.map

package/dist/components/PlSlideModal/PlPureSlideModal.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlPureSlideModal.vue.js","sources":["../../../src/components/PlSlideModal/PlPureSlideModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: 'PlPureSlideModal',\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-slide-modal.scss';\nimport { ref, useAttrs } from 'vue';\nimport TransitionSlidePanel from '../TransitionSlidePanel.vue';\nimport { useClickOutside, useEventListener } from '../../index';\nimport type { Props } from './props';\nimport { defaultProps } from './props';\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\nconst modal = ref();\nconst attrs = useAttrs();\nconst props = withDefaults(\n  defineProps<Props>(),\n  defaultProps,\n);\n\nuseClickOutside(modal, () => {\n  if (props.modelValue && props.closeOnOutsideClick) {\n    emit('update:modelValue', false);\n  }\n});\n\nuseEventListener(document, 'keydown', (evt: KeyboardEvent) => {\n  if (evt.key === 'Escape') {\n    emit('update:modelValue', false);\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <TransitionSlidePanel>\n      <div\n        v-if=\"props.modelValue\"\n        ref=\"modal\"\n        class=\"pl-slide-modal\"\n        :style=\"{ width: props.width }\"\n        v-bind=\"attrs\"\n        @keyup.esc=\"emit('update:modelValue', false)\"\n      >\n        <div class=\"close-dialog-btn\" @click=\"emit('update:modelValue', false)\" />\n        <slot />\n      </div>\n    </TransitionSlidePanel>\n    <div v-if=\"props.modelValue && props.shadow\" class=\"pl-slide-modal__shadow\" @keyup.esc=\"emit('update:modelValue', false)\" />\n  </Teleport>\n</template>\n"],"names":["__default__","emit","__emit","modal","ref","attrs","useAttrs","props","__props","useClickOutside","useEventListener","evt"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,MAAAA,IAAe;AAAA,EACb,MAAM;AAAA,EACN,cAAc;AAChB;;;;;;;;;;AAWA,UAAMC,IAAOC,GAIPC,IAAQC,EAAA,GACRC,IAAQC,EAAA,GACRC,IAAQC;AAKd,WAAAC,EAAgBN,GAAO,MAAM;AAC3B,MAAII,EAAM,cAAcA,EAAM,uBAC5BN,EAAK,qBAAqB,EAAK;AAAA,IAEnC,CAAC,GAEDS,EAAiB,UAAU,WAAW,CAACC,MAAuB;AAC5D,MAAIA,EAAI,QAAQ,YACdV,EAAK,qBAAqB,EAAK;AAAA,IAEnC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlPureSlideModal.vue.js","sources":["../../../src/components/PlSlideModal/PlPureSlideModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: 'PlPureSlideModal',\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport './pl-slide-modal.scss';\nimport { ref, useAttrs } from 'vue';\nimport TransitionSlidePanel from '../TransitionSlidePanel.vue';\nimport { useClickOutside, useEventListener } from '../../index';\nimport type { Props } from './props';\nimport { defaultProps } from './props';\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\nconst modal = ref();\nconst attrs = useAttrs();\nconst props = withDefaults(\n  defineProps<Props>(),\n  defaultProps,\n);\n\nuseClickOutside(modal, () => {\n  if (props.modelValue && props.closeOnOutsideClick) {\n    emit('update:modelValue', false);\n  }\n});\n\nuseEventListener(document, 'keydown', (evt: KeyboardEvent) => {\n  if (evt.key === 'Escape') {\n    emit('update:modelValue', false);\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <TransitionSlidePanel>\n      <div\n        v-if=\"props.modelValue\"\n        ref=\"modal\"\n        class=\"pl-slide-modal\"\n        :style=\"{ width: props.width }\"\n        v-bind=\"attrs\"\n        @keyup.esc=\"emit('update:modelValue', false)\"\n      >\n        <div class=\"close-dialog-btn\" @click=\"emit('update:modelValue', false)\" />\n        <slot />\n      </div>\n    </TransitionSlidePanel>\n    <div v-if=\"props.modelValue && props.shadow\" class=\"pl-slide-modal__shadow\" @keyup.esc=\"emit('update:modelValue', false)\" />\n  </Teleport>\n</template>\n"],"names":["__default__","emit","__emit","modal","ref","attrs","useAttrs","props","__props","useClickOutside","useEventListener","evt"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,MAAAA,IAAe;AAAA,EACb,MAAM;AAAA,EACN,cAAc;AAChB;;;;;;;;;;AAWA,UAAMC,IAAOC,GAIPC,IAAQC,EAAA,GACRC,IAAQC,EAAA,GACRC,IAAQC;AAKd,WAAAC,EAAgBN,GAAO,MAAM;AAC3B,MAAII,EAAM,cAAcA,EAAM,uBAC5BN,EAAK,qBAAqB,EAAK;AAAA,IAEnC,CAAC,GAEDS,EAAiB,UAAU,WAAW,CAACC,MAAuB;AAC5D,MAAIA,EAAI,QAAQ,YACdV,EAAK,qBAAqB,EAAK;AAAA,IAEnC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}