@central-design-system/components 4.0.0-alpha.1 → 4.0.0-alpha.3

package/dist/es/src/components/CdsOtpInput/CdsOtpField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,62 @@
+import { defineComponent, inject, computed, unref, createVNode } from "vue";
+import { C as CdsField } from "../CdsField/index.js";
+import { u as useDefaults } from "../../core/useDefaults.js";
+import { c as classNames } from "../../utils/dom/classNames.js";
+import { C as CdsOtpFieldConstants, d as CdsOtpInputSymbol } from "./api/CdsOtpInput.constants.js";
+import { d as defineCdsOtpFieldProps } from "./api/CdsOtpInput.props.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: CdsOtpFieldConstants.name
+  },
+  __name: "CdsOtpField",
+  props: {
+    ...defineCdsOtpFieldProps()
+  },
+  setup(__props) {
+    const _props = __props;
+    const props = useDefaults(_props);
+    const otpInput = inject(CdsOtpInputSymbol);
+    if (!otpInput) {
+      throw new Error(`[CDS] ${CdsOtpFieldConstants.name} должен использоваться внутри CdsOtpInput`);
+    }
+    const slot = computed(() => unref(otpInput.otpSlots)[props.index]);
+    const isHighlighted = computed(() => {
+      var _a;
+      return unref(otpInput.isFocused) && unref(otpInput.focusAll) && !((_a = unref(slot)) == null ? void 0 : _a.isActive);
+    });
+    return () => {
+      const {
+        rootClass
+      } = CdsOtpFieldConstants;
+      const data = unref(slot);
+      if (!data) return null;
+      return createVNode(CdsField, {
+        "class": classNames(rootClass, {
+          [`${rootClass}--highlighted`]: unref(isHighlighted)
+        }, props.class),
+        "style": props.style,
+        "focused": data.isActive || unref(isHighlighted),
+        "onMousedown": (event) => event.preventDefault(),
+        "onClick": () => otpInput.focusAt(props.index)
+      }, {
+        default: () => createVNode("div", {
+          "class": `${rootClass}__slot`
+        }, [createVNode("input", {
+          "class": `${rootClass}__spacer`,
+          "aria-hidden": "true",
+          "tabindex": -1
+        }, null), data.compositionChar ? createVNode("span", {
+          "class": `${rootClass}__composition`
+        }, [data.compositionChar]) : data.hasFakeCaret ? createVNode("span", {
+          "class": `${rootClass}__caret`
+        }, null) : createVNode("span", {
+          "class": !data.char ? `${rootClass}__placeholder` : void 0
+        }, [data.char ?? data.placeholderChar ?? ""])])
+      });
+    };
+  }
+});
+export {
+  _sfc_main as _
+};
+//# sourceMappingURL=CdsOtpField.vue_vue_type_script_setup_true_lang.js.map

package/dist/es/src/components/CdsOtpInput/CdsOtpField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CdsOtpField.vue_vue_type_script_setup_true_lang.js","sources":["../../../../../src/components/CdsOtpInput/CdsOtpField.vue"],"sourcesContent":["<script setup lang=\"tsx\">\nimport { CdsField } from '@cds/components/CdsField';\nimport { useDefaults } from '@cds/core';\nimport { classNames } from '@cds/utils';\nimport { computed, inject, unref } from 'vue';\n\nimport { CdsOtpFieldConstants, CdsOtpInputSymbol } from './api/CdsOtpInput.constants';\nimport { defineCdsOtpFieldProps } from './api/CdsOtpInput.props';\n\ndefineOptions({\n  name: CdsOtpFieldConstants.name\n});\n\nconst _props = defineProps({ ...defineCdsOtpFieldProps() });\nconst props = useDefaults(_props);\n\nconst otpInput = inject(CdsOtpInputSymbol);\n\nif (!otpInput) {\n  throw new Error(`[CDS] ${CdsOtpFieldConstants.name} должен использоваться внутри CdsOtpInput`);\n}\n\nconst slot = computed(() => unref(otpInput.otpSlots)[props.index]);\n\nconst isHighlighted = computed(() => unref(otpInput.isFocused) && unref(otpInput.focusAll) && !unref(slot)?.isActive);\n\ndefineRender(() => {\n  const { rootClass } = CdsOtpFieldConstants;\n  const data = unref(slot);\n\n  if (!data) return null;\n\n  return (\n    <CdsField\n      class={classNames(rootClass, { [`${rootClass}--highlighted`]: unref(isHighlighted) }, props.class)}\n      style={props.style}\n      focused={data.isActive || unref(isHighlighted)}\n      onMousedown={(event: MouseEvent) => event.preventDefault()}\n      onClick={() => otpInput.focusAt(props.index)}\n    >\n      {{\n        default: () => (\n          <div class={`${rootClass}__slot`}>\n            <input class={`${rootClass}__spacer`} aria-hidden=\"true\" tabindex={-1} />\n\n            {data.compositionChar ? (\n              <span class={`${rootClass}__composition`}>{data.compositionChar}</span>\n            ) : data.hasFakeCaret ? (\n              <span class={`${rootClass}__caret`} />\n            ) : (\n              <span class={!data.char ? `${rootClass}__placeholder` : undefined}>\n                {data.char ?? data.placeholderChar ?? ''}\n              </span>\n            )}\n          </div>\n        )\n      }}\n    </CdsField>\n  );\n});\n</script>\n"],"names":["_props","__props","props","useDefaults","otpInput","inject","CdsOtpInputSymbol","Error","CdsOtpFieldConstants","name","slot","computed","unref","otpSlots","index","isHighlighted","isFocused","focusAll","isActive","rootClass","data","_createVNode","CdsField","classNames","class","style","event","preventDefault","onClick","focusAt","default","compositionChar","hasFakeCaret","char","undefined","placeholderChar"],"mappings":";;;;;;;;;;;;;;;AAaA,UAAMA,SAASC;AACf,UAAMC,QAAQC,YAAYH,MAAM;AAEhC,UAAMI,WAAWC,OAAOC,iBAAiB;AAEzC,QAAI,CAACF,UAAU;AACb,YAAM,IAAIG,MAAM,SAASC,qBAAqBC,IAAI,2CAA2C;AAAA,IAC/F;AAEA,UAAMC,OAAOC,SAAS,MAAMC,MAAMR,SAASS,QAAQ,EAAEX,MAAMY,KAAK,CAAC;AAEjE,UAAMC,gBAAgBJ,SAAS,MAAA;;AAAMC,mBAAMR,SAASY,SAAS,KAAKJ,MAAMR,SAASa,QAAQ,KAAK,GAACL,WAAMF,IAAI,MAAVE,mBAAaM;AAAAA,KAAQ;WAEvG,MAAM;AACjB,YAAM;AAAA,QAAEC;AAAAA,MAAU,IAAIX;AACtB,YAAMY,OAAOR,MAAMF,IAAI;AAEvB,UAAI,CAACU,KAAM,QAAO;AAElB,aAAAC,YAAAC,UAAA;AAAA,QAAA,SAEWC,WAAWJ,WAAW;AAAA,UAAE,CAAC,GAAGA,SAAS,eAAe,GAAGP,MAAMG,aAAa;AAAA,QAAE,GAAGb,MAAMsB,KAAK;AAAA,QAAC,SAC3FtB,MAAMuB;AAAAA,QAAK,WACTL,KAAKF,YAAYN,MAAMG,aAAa;AAAA,QAAC,eAChCW,WAAsBA,MAAMC,eAAc;AAAA,QAAE,WACjDC,MAAMxB,SAASyB,QAAQ3B,MAAMY,KAAK;AAAA,MAAC,GAAA;AAAA,QAG1CgB,SAASA,MAAAT,YAAA,OAAA;AAAA,UAAA,SACK,GAAGF,SAAS;AAAA,QAAQ,GAAA,CAAAE,YAAA,SAAA;AAAA,UAAA,SAChB,GAAGF,SAAS;AAAA,UAAU,eAAA;AAAA,UAAA,YAA+B;AAAA,QAAE,GAAA,IAAA,GAEpEC,KAAKW,kBAAeV,YAAA,QAAA;AAAA,UAAA,SACN,GAAGF,SAAS;AAAA,WAAe,CAAGC,KAAKW,eAAe,CAAA,IAC7DX,KAAKY,eAAYX,YAAA,QAAA;AAAA,UAAA,SACN,GAAGF,SAAS;AAAA,QAAS,GAAA,IAAA,IAAAE,YAAA,QAAA;AAAA,UAAA,SAErB,CAACD,KAAKa,OAAO,GAAGd,SAAS,kBAAkBe;AAAAA,WAAS,CAC9Dd,KAAKa,QAAQb,KAAKe,mBAAmB,EAAE,CAAA,CAE3C,CAAA;AAAA,MAEL,CAAA;AAAA,IAIR;AAAA;;"}

package/dist/es/src/components/CdsOtpInput/CdsOtpGroup.js

@@ -0,0 +1,2 @@
+import { _ as _sfc_main } from "./CdsOtpGroup.vue_vue_type_script_setup_true_lang.js";
+//# sourceMappingURL=CdsOtpGroup.js.map

package/dist/es/src/components/CdsOtpInput/CdsOtpGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CdsOtpGroup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/es/src/components/CdsOtpInput/CdsOtpGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,51 @@
+import { defineComponent, useSlots, inject, computed, unref, createVNode, Fragment } from "vue";
+import { u as useDefaults } from "../../core/useDefaults.js";
+import { c as classNames } from "../../utils/dom/classNames.js";
+import { a as CdsOtpGroupConstants, d as CdsOtpInputSymbol } from "./api/CdsOtpInput.constants.js";
+import { a as defineCdsOtpGroupProps } from "./api/CdsOtpInput.props.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: CdsOtpGroupConstants.name
+  },
+  __name: "CdsOtpGroup",
+  props: {
+    ...defineCdsOtpGroupProps()
+  },
+  setup(__props) {
+    const _props = __props;
+    const props = useDefaults(_props);
+    const slots = useSlots();
+    const otpInput = inject(CdsOtpInputSymbol, null);
+    const isMerged = computed(() => props.merged ?? unref(otpInput == null ? void 0 : otpInput.merged) ?? false);
+    function countSlotChildren(vnodes) {
+      let count = 0;
+      for (const vnode of vnodes) {
+        if (vnode.type === Fragment && Array.isArray(vnode.children)) {
+          count += countSlotChildren(vnode.children);
+        } else {
+          count++;
+        }
+      }
+      return count;
+    }
+    return () => {
+      var _a;
+      const {
+        rootClass
+      } = CdsOtpGroupConstants;
+      const children = ((_a = slots.default) == null ? void 0 : _a.call(slots)) ?? [];
+      return createVNode("div", {
+        "class": classNames(rootClass, {
+          [`${rootClass}--merged`]: unref(isMerged)
+        }, props.class),
+        "style": [unref(isMerged) ? {
+          flex: countSlotChildren(children)
+        } : void 0, props.style]
+      }, [children]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};
+//# sourceMappingURL=CdsOtpGroup.vue_vue_type_script_setup_true_lang.js.map

package/dist/es/src/components/CdsOtpInput/CdsOtpGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CdsOtpGroup.vue_vue_type_script_setup_true_lang.js","sources":["../../../../../src/components/CdsOtpInput/CdsOtpGroup.vue"],"sourcesContent":["<script setup lang=\"tsx\">\nimport { useDefaults } from '@cds/core';\nimport { classNames } from '@cds/utils';\nimport { computed, Fragment, inject, unref, type VNode } from 'vue';\n\nimport { CdsOtpGroupConstants, CdsOtpInputSymbol } from './api/CdsOtpInput.constants';\nimport { defineCdsOtpGroupProps } from './api/CdsOtpInput.props';\nimport type { CdsOtpGroupSlots } from './api/CdsOtpInput.types';\n\ndefineOptions({\n  name: CdsOtpGroupConstants.name\n});\n\nconst _props = defineProps({ ...defineCdsOtpGroupProps() });\nconst props = useDefaults(_props);\nconst slots = defineSlots<CdsOtpGroupSlots>();\n\nconst otpInput = inject(CdsOtpInputSymbol, null);\n\nconst isMerged = computed(() => props.merged ?? unref(otpInput?.merged) ?? false);\n\nfunction countSlotChildren(vnodes: VNode[]): number {\n  let count = 0;\n\n  for (const vnode of vnodes) {\n    if (vnode.type === Fragment && Array.isArray(vnode.children)) {\n      count += countSlotChildren(vnode.children as VNode[]);\n    } else {\n      count++;\n    }\n  }\n\n  return count;\n}\n\ndefineRender(() => {\n  const { rootClass } = CdsOtpGroupConstants;\n  const children = slots.default?.() ?? [];\n\n  return (\n    <div\n      class={classNames(rootClass, { [`${rootClass}--merged`]: unref(isMerged) }, props.class)}\n      style={[unref(isMerged) ? { flex: countSlotChildren(children) } : undefined, props.style]}\n    >\n      {children}\n    </div>\n  );\n});\n</script>\n"],"names":["_props","__props","props","useDefaults","slots","_useSlots","otpInput","inject","CdsOtpInputSymbol","isMerged","computed","merged","unref","countSlotChildren","vnodes","count","vnode","type","Fragment","Array","isArray","children","rootClass","CdsOtpGroupConstants","default","_createVNode","classNames","class","flex","undefined","style"],"mappings":";;;;;;;;;;;;;;AAaA,UAAMA,SAASC;AACf,UAAMC,QAAQC,YAAYH,MAAM;AAChC,UAAMI,QAAQC,SAAA;AAEd,UAAMC,WAAWC,OAAOC,mBAAmB,IAAI;AAE/C,UAAMC,WAAWC,SAAS,MAAMR,MAAMS,UAAUC,MAAMN,qCAAUK,MAAM,KAAK,KAAK;AAEhF,aAASE,kBAAkBC,QAAyB;AAClD,UAAIC,QAAQ;AAEZ,iBAAWC,SAASF,QAAQ;AAC1B,YAAIE,MAAMC,SAASC,YAAYC,MAAMC,QAAQJ,MAAMK,QAAQ,GAAG;AAC5DN,mBAASF,kBAAkBG,MAAMK,QAAmB;AAAA,QACtD,OAAO;AACLN;AAAAA,QACF;AAAA,MACF;AAEA,aAAOA;AAAAA,IACT;WAEa,MAAM;;AACjB,YAAM;AAAA,QAAEO;AAAAA,MAAU,IAAIC;AACtB,YAAMF,aAAWjB,WAAMoB,YAANpB,mCAAqB,CAAA;AAEtC,aAAAqB,YAAA,OAAA;AAAA,QAAA,SAEWC,WAAWJ,WAAW;AAAA,UAAE,CAAC,GAAGA,SAAS,UAAU,GAAGV,MAAMH,QAAQ;AAAA,QAAE,GAAGP,MAAMyB,KAAK;AAAA,QAAC,SACjF,CAACf,MAAMH,QAAQ,IAAI;AAAA,UAAEmB,MAAMf,kBAAkBQ,QAAQ;AAAA,QAAE,IAAIQ,QAAW3B,MAAM4B,KAAK;AAAA,MAAC,GAAA,CAExFT,QAAQ,CAAA;AAAA,IAGf;AAAA;;"}

package/dist/es/src/components/CdsOtpInput/CdsOtpInput.css

@@ -0,0 +1,204 @@
+@charset "UTF-8";
+/*
+* Easing component
+* @type Map
+*/
+/*
+* Get the transition-timing-function for a given easing and motion mode
+* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
+* @param {String} $mode [basic] - Can be `basic` or `accent`
+* @param {Map} $easing [$easing] - Easing's map
+* @return {Function} CSS `cubic-bezier()` function
+*/
+/*
+* Set the transition-timing-function for a given easing and motion mode
+* @param {Number} $duration — The dynamic duration in ms
+* @param {String} $type - The name of the easing curve to apply
+* @param {String} $mode - The mode for the easing curve to use
+*/
+@layer cds-components {
+  .cds-otp-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .cds-otp-input--disabled {
+    pointer-events: none;
+  }
+  .cds-otp-input--size-xs .cds-otp-field {
+    min-width: calc(24px / var(--cds-base-unit) * 1rem);
+  }
+  .cds-otp-input--size-sm .cds-otp-field {
+    min-width: calc(28px / var(--cds-base-unit) * 1rem);
+  }
+  .cds-otp-input--size-md .cds-otp-field {
+    min-width: calc(32px / var(--cds-base-unit) * 1rem);
+  }
+  .cds-otp-input--size-lg .cds-otp-field {
+    min-width: calc(36px / var(--cds-base-unit) * 1rem);
+  }
+  .cds-otp-input--size-xl .cds-otp-field {
+    min-width: calc(40px / var(--cds-base-unit) * 1rem);
+  }
+  .cds-otp-input--size-xs .cds-otp-field__slot {
+    font-family: inherit;
+    font-size: var(--cds-font-size-300);
+    font-weight: var(--cds-font-weight-regular);
+    line-height: var(--cds-font-line-height-400);
+    letter-spacing: 0;
+  }
+  .cds-otp-input--size-sm .cds-otp-field__slot {
+    font-family: inherit;
+    font-size: var(--cds-font-size-400);
+    font-weight: var(--cds-font-weight-regular);
+    line-height: var(--cds-font-line-height-400);
+    letter-spacing: 0;
+  }
+  .cds-otp-input--size-md .cds-otp-field__slot {
+    font-family: inherit;
+    font-size: var(--cds-font-size-500);
+    font-weight: var(--cds-font-weight-regular);
+    line-height: var(--cds-font-line-height-500);
+    letter-spacing: 0;
+  }
+  .cds-otp-input--size-lg .cds-otp-field__slot {
+    font-family: inherit;
+    font-size: var(--cds-font-size-600);
+    font-weight: var(--cds-font-weight-regular);
+    line-height: var(--cds-font-line-height-600);
+    letter-spacing: 0;
+  }
+  .cds-otp-input--size-xl .cds-otp-field__slot {
+    font-family: inherit;
+    font-size: var(--cds-font-size-700);
+    font-weight: var(--cds-font-weight-regular);
+    line-height: var(--cds-font-line-height-700);
+    letter-spacing: 0;
+  }
+  .cds-otp-input__content {
+    position: relative;
+    display: flex;
+    gap: var(--cds-spacing-200);
+    align-items: stretch;
+    justify-content: center;
+    width: 100%;
+    max-width: calc(320px / var(--cds-base-unit) * 1rem);
+    border-radius: var(--cds-border-radius-200);
+  }
+  .cds-otp-input--divided .cds-otp-input__content {
+    max-width: calc(360px / var(--cds-base-unit) * 1rem);
+  }
+  .cds-otp-input--merged .cds-otp-input__content {
+    gap: 0;
+  }
+  .cds-otp-input__input {
+    position: absolute;
+    inset-inline-start: 50%;
+    bottom: 0;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: 0;
+    color: transparent;
+    pointer-events: none;
+    caret-color: transparent;
+    outline: none;
+    background: transparent;
+    border: 0;
+    opacity: 0;
+  }
+  .cds-otp-input__loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+  .cds-otp-group {
+    display: contents;
+  }
+  .cds-otp-group--merged {
+    display: flex;
+    gap: 0;
+    align-items: stretch;
+    border-radius: inherit;
+  }
+  .cds-otp-separator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-inline: var(--cds-spacing-100);
+    color: rgb(var(--cds-color-content-secondary));
+  }
+  .cds-otp-field {
+    flex: 1 1 0;
+    min-width: 0;
+    transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: opacity, border-color, box-shadow;
+  }
+  .cds-otp-field--highlighted {
+    opacity: 0.5;
+  }
+  .cds-otp-group--merged .cds-otp-field {
+    border-radius: 0;
+  }
+  .cds-otp-group--merged .cds-otp-field:not(:first-child) {
+    margin-inline-start: calc(var(--cds-border-100) * -1);
+  }
+  .cds-otp-group--merged .cds-otp-field:first-child {
+    border-start-start-radius: var(--cds-border-radius-200);
+    border-end-start-radius: var(--cds-border-radius-200);
+  }
+  .cds-otp-group--merged .cds-otp-field:last-child {
+    border-start-end-radius: var(--cds-border-radius-200);
+    border-end-end-radius: var(--cds-border-radius-200);
+  }
+  .cds-otp-group--merged .cds-otp-field:hover {
+    z-index: 1;
+  }
+  .cds-otp-group--merged .cds-otp-field.cds-field--focused {
+    z-index: 2;
+  }
+  .cds-otp-field .cds-field__field {
+    justify-content: center;
+  }
+  .cds-otp-field__slot {
+    position: relative;
+    display: grid;
+    place-content: center;
+    place-items: center;
+    width: 100%;
+    height: 100%;
+    color: inherit;
+  }
+  .cds-otp-field__slot > * {
+    grid-area: 1/1;
+  }
+  .cds-otp-field__spacer {
+    display: block;
+    pointer-events: none;
+    opacity: 0;
+  }
+  .cds-otp-field__placeholder {
+    color: rgb(var(--cds-color-content-tertiary));
+  }
+  .cds-otp-field__composition {
+    color: rgb(var(--cds-color-content-secondary));
+    text-decoration: underline;
+  }
+  .cds-otp-field__caret {
+    width: var(--cds-border-100);
+    height: 1.2em;
+    background: currentcolor;
+    animation: cds-otp-blink 1000ms step-end infinite;
+  }
+  @keyframes cds-otp-blink {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+  }
+}

package/dist/es/src/components/CdsOtpInput/CdsOtpInput.js

@@ -0,0 +1,2 @@
+import { _ as _sfc_main } from "./CdsOtpInput.vue_vue_type_script_setup_true_lang.js";
+//# sourceMappingURL=CdsOtpInput.js.map

package/dist/es/src/components/CdsOtpInput/CdsOtpInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CdsOtpInput.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/es/src/components/CdsOtpInput/CdsOtpInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,338 @@
+import { defineComponent, useSlots, useAttrs, ref, toRef, watch, unref, provide, createVNode, Fragment, mergeProps, withDirectives } from "vue";
+import { C as CdsOverlay } from "../CdsOverlay/index.js";
+import { C as CdsProgressCircle } from "../CdsProgressCircle/index.js";
+import { u as useFocus, b as useAutofocus } from "../../composables/useFocus/useFocus.js";
+import { a as useLocale, u as useRtl } from "../../composables/useLocale/useLocale.js";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
+import { u as useDefaults, p as provideDefaults } from "../../core/useDefaults.js";
+import { u as useProxyModel } from "../../core/useProxyModel.js";
+import { D as filterInputAttrs } from "../../utils/helpers.js";
+import { c as classNames } from "../../utils/dom/classNames.js";
+import { c as CdsOtpInputConstants, d as CdsOtpInputSymbol } from "./api/CdsOtpInput.constants.js";
+import { c as defineCdsOtpInputProps } from "./api/CdsOtpInput.props.js";
+import { _ as _sfc_main$2 } from "./CdsOtpField.vue_vue_type_script_setup_true_lang.js";
+import { _ as _sfc_main$1 } from "./CdsOtpGroup.vue_vue_type_script_setup_true_lang.js";
+import { _ as _sfc_main$3 } from "./CdsOtpSeparator.vue_vue_type_script_setup_true_lang.js";
+import { u as useOtpInput } from "./composables/useOtpInput.js";
+import { I as Intersect } from "../../directives/intersect/index.js";
+import { u as useDimensions } from "../../composables/useDimensions/useDimensions.js";
+import { u as useSize } from "../../composables/useSize/useSize.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: CdsOtpInputConstants.name,
+    inheritAttrs: false,
+    directives: {
+      vIntersect: Intersect
+    }
+  },
+  __name: "CdsOtpInput",
+  props: {
+    ...defineCdsOtpInputProps()
+  },
+  emits: ["finish", "update:focused", "update:modelValue"],
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
+    const _props = __props;
+    const props = useDefaults(_props);
+    const slots = useSlots();
+    const emit = __emit;
+    const attrs = useAttrs();
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      dimensionStyles
+    } = useDimensions(props);
+    const {
+      sizeClasses
+    } = useSize(props);
+    const {
+      isFocused
+    } = useFocus(props);
+    const {
+      onIntersect
+    } = useAutofocus(props);
+    const {
+      t
+    } = useLocale();
+    const {
+      isRtl
+    } = useRtl();
+    const model = useProxyModel(props, "modelValue", "", (value) => value == null ? "" : String(value));
+    const inputRef = ref();
+    const length = toRef(() => Number(props.length));
+    let focusAtPending = false;
+    const otp = useOtpInput({
+      value: model,
+      length,
+      pattern: () => props.pattern,
+      type: () => props.type,
+      masked: () => props.masked,
+      placeholder: () => props.placeholder,
+      isFocused
+    });
+    function applySelection() {
+      const input = unref(inputRef);
+      const selection = unref(otp.selection);
+      if (!input || !selection) return;
+      input.setSelectionRange(selection.start, selection.end, selection.direction);
+    }
+    function syncDOM() {
+      const input = unref(inputRef);
+      if (!input) return;
+      if (input.value !== unref(otp.value)) input.value = unref(otp.value);
+      applySelection();
+    }
+    function onSelectionChange() {
+      const input = unref(inputRef);
+      if (!input) {
+        otp.clearSelection();
+        return;
+      }
+      const result = otp.syncSelection({
+        value: input.value,
+        selectionStart: input.selectionStart,
+        selectionEnd: input.selectionEnd,
+        selectionDirection: input.selectionDirection,
+        maxLength: unref(length)
+      });
+      if (!result) return;
+      if (input.selectionStart !== result.start || input.selectionEnd !== result.end) {
+        input.setSelectionRange(result.start, result.end, result.direction);
+      }
+    }
+    function onInput(event) {
+      const inputEvent = event;
+      const target = event.target;
+      const composing = inputEvent.isComposing || unref(otp.isComposing);
+      if (composing && otp.isImeText(target.value)) return;
+      const next = otp.setValue(target.value);
+      if (target.value !== next) target.value = next;
+    }
+    function onCompositionstart() {
+      otp.startComposition();
+    }
+    function onCompositionupdate(event) {
+      otp.updateComposition(event.data ?? "");
+    }
+    function onCompositionend(event) {
+      otp.endComposition();
+      onInput(event);
+    }
+    function onFocus() {
+      isFocused.value = true;
+      if (focusAtPending) return;
+      if (!unref(inputRef)) return;
+      otp.selectAtEnd();
+      applySelection();
+    }
+    function onBlur() {
+      isFocused.value = false;
+      otp.clearSelection();
+    }
+    function onKeydown(event) {
+      if (event.shiftKey && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+        const direction = (event.key === "ArrowLeft" ? -1 : 1) * (unref(isRtl) ? -1 : 1);
+        if (otp.extendSelection(direction)) {
+          event.preventDefault();
+          syncDOM();
+        }
+        return;
+      }
+      if (event.key !== "Backspace" && event.key !== "Delete") return;
+      if (!event.metaKey && !event.ctrlKey && !event.altKey) return;
+      event.preventDefault();
+      otp.bulkDelete(event.key === "Backspace");
+      syncDOM();
+    }
+    function onBeforeinput(event) {
+      const pattern = unref(otp.effectivePattern);
+      if (event.inputType === "insertText" && event.data && pattern && !pattern.test(event.data)) {
+        event.preventDefault();
+        return;
+      }
+      if (event.inputType === "deleteContentForward") {
+        event.preventDefault();
+        const input = unref(inputRef);
+        if (!input) return;
+        const selection = unref(otp.selection);
+        otp.deleteRange((selection == null ? void 0 : selection.start) ?? 0, (selection == null ? void 0 : selection.end) ?? input.value.length);
+        syncDOM();
+        return;
+      }
+      const isBackward = ["deleteWordBackward", "deleteSoftLineBackward", "deleteHardLineBackward"].includes(event.inputType);
+      const isForward = ["deleteWordForward", "deleteSoftLineForward", "deleteHardLineForward"].includes(event.inputType);
+      if (!isBackward && !isForward) return;
+      event.preventDefault();
+      otp.bulkDelete(isBackward);
+      syncDOM();
+    }
+    function onPaste(event) {
+      var _a;
+      event.preventDefault();
+      const input = unref(inputRef);
+      if (!input) return;
+      const text = ((_a = event.clipboardData) == null ? void 0 : _a.getData("text/plain").trim()) ?? "";
+      const selection = unref(otp.selection);
+      otp.insert(text, {
+        start: (selection == null ? void 0 : selection.start) ?? 0,
+        end: (selection == null ? void 0 : selection.end) ?? input.value.length
+      });
+      syncDOM();
+    }
+    function focusAt(index) {
+      const input = unref(inputRef);
+      if (!input) return;
+      focusAtPending = true;
+      input.focus();
+      focusAtPending = false;
+      otp.selectSlot(index);
+      applySelection();
+    }
+    function focus() {
+      var _a;
+      (_a = unref(inputRef)) == null ? void 0 : _a.focus();
+    }
+    function blur() {
+      var _a;
+      (_a = unref(inputRef)) == null ? void 0 : _a.blur();
+    }
+    watch(inputRef, (input, _previous, onCleanup) => {
+      if (!input) return;
+      input.addEventListener("selectionchange", onSelectionChange);
+      onCleanup(() => input.removeEventListener("selectionchange", onSelectionChange));
+    }, {
+      immediate: true
+    });
+    watch(model, (value) => {
+      if (unref(otp.isComposing)) return;
+      if (value.length === unref(length)) emit("finish", value);
+    });
+    provideDefaults({
+      CdsField: {
+        color: toRef(() => props.color),
+        baseColor: toRef(() => props.baseColor),
+        activeColor: toRef(() => props.activeColor),
+        bgColor: toRef(() => props.bgColor),
+        disabled: toRef(() => props.disabled),
+        error: toRef(() => props.error),
+        size: toRef(() => props.size)
+      }
+    }, {
+      scoped: true
+    });
+    provide(CdsOtpInputSymbol, {
+      otpSlots: otp.slots,
+      isFocused,
+      focusAll: toRef(() => props.focusAll),
+      divider: toRef(() => props.divider),
+      merged: toRef(() => props.merged),
+      focusAt
+    });
+    __expose({
+      /** Ref-ссылка на скрытый input, который принимает ввод кода */
+      inputRef,
+      /** Состояние фокуса поля */
+      isFocused,
+      /** Установить фокус на поле */
+      focus,
+      /** Снять фокус с поля */
+      blur,
+      /** Очистить введённый код */
+      reset: otp.reset
+    });
+    return () => {
+      var _a;
+      const {
+        rootClass
+      } = CdsOtpInputConstants;
+      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+      const count = unref(length);
+      const fields = props.merged ? createVNode(_sfc_main$1, {
+        "merged": true
+      }, {
+        default: () => [Array.from({
+          length: count
+        }, (_, index) => createVNode(_sfc_main$2, {
+          "key": index,
+          "index": index
+        }, null))]
+      }) : Array.from({
+        length: count
+      }, (_, index) => createVNode(Fragment, null, [(props.divider || slots.divider) && index !== 0 && createVNode(_sfc_main$3, {
+        "key": `divider-${index}`
+      }, {
+        default: () => {
+          var _a2;
+          return [((_a2 = slots.divider) == null ? void 0 : _a2.call(slots, {
+            index: index - 1
+          })) ?? props.divider];
+        }
+      }), createVNode(_sfc_main$2, {
+        "key": index,
+        "index": index
+      }, null)]));
+      return createVNode("div", mergeProps({
+        "class": classNames(rootClass, {
+          [`${rootClass}--divided`]: !!props.divider || !!slots.divider,
+          [`${rootClass}--merged`]: props.merged,
+          [`${rootClass}--disabled`]: !!props.disabled,
+          [`${rootClass}--error`]: props.error
+        }, unref(themeClasses), unref(sizeClasses), props.class),
+        "style": [props.style]
+      }, rootAttrs), [createVNode("div", {
+        "class": `${rootClass}__content`,
+        "style": [unref(dimensionStyles)],
+        "dir": unref(isRtl) ? "rtl" : "ltr"
+      }, [slots.fields ? slots.fields() : fields, withDirectives(createVNode("input", mergeProps({
+        "ref": inputRef,
+        "class": `${rootClass}__input`,
+        "type": "text",
+        "inputmode": unref(otp.inputMode),
+        "dir": unref(isRtl) ? "rtl" : "ltr",
+        "autocomplete": "one-time-code",
+        "autocorrect": "off",
+        "autocapitalize": "off",
+        "spellcheck": false,
+        "disabled": !!props.disabled,
+        "aria-label": t(props.label),
+        "value": unref(model)
+      }, inputAttrs, {
+        "onInput": onInput,
+        "onKeydown": onKeydown,
+        "onBeforeinput": onBeforeinput,
+        "onFocus": onFocus,
+        "onBlur": onBlur,
+        "onPaste": onPaste,
+        "onCompositionstart": onCompositionstart,
+        "onCompositionupdate": onCompositionupdate,
+        "onCompositionend": onCompositionend
+      }), null), [[Intersect, onIntersect, null, {
+        once: true
+      }]]), createVNode(CdsOverlay, {
+        "contained": true,
+        "persistent": true,
+        "contentClass": `${rootClass}__loader`,
+        "modelValue": !!props.loading
+      }, {
+        default: () => {
+          var _a2;
+          return [((_a2 = slots.loader) == null ? void 0 : _a2.call(slots)) ?? createVNode(CdsProgressCircle, {
+            "color": typeof props.loading === "boolean" ? void 0 : props.loading,
+            "indeterminate": true,
+            "size": 24,
+            "width": 2
+          }, null)];
+        }
+      }), (_a = slots.default) == null ? void 0 : _a.call(slots)])]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};
+
+import './CdsOtpInput.css';
+//# sourceMappingURL=CdsOtpInput.vue_vue_type_script_setup_true_lang.js.map