@central-design-system/components 4.0.0-alpha.0 → 4.0.0-alpha.10

package/dist/esm-node/src/components/CdsOtpInput/CdsOtpInput.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,351 @@
+import { defineComponent, useSlots, useAttrs, ref, toRef, watch, unref, provide, createVNode, Fragment, mergeProps, withDirectives } from "vue";
+import { C as CdsOverlay } from "../CdsOverlay/index.mjs";
+import { C as CdsProgressCircle } from "../CdsProgressCircle/index.mjs";
+import { u as useFocus, b as useAutofocus } from "../../composables/useFocus/useFocus.mjs";
+import { a as useLocale, u as useRtl } from "../../composables/useLocale/useLocale.mjs";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
+import { u as useDefaults, p as provideDefaults } from "../../core/useDefaults.mjs";
+import { u as useProxyModel } from "../../core/useProxyModel.mjs";
+import { D as filterInputAttrs } from "../../utils/helpers.mjs";
+import { c as classNames } from "../../utils/dom/classNames.mjs";
+import { c as CdsOtpInputConstants, d as CdsOtpInputSymbol } from "./api/CdsOtpInput.constants.mjs";
+import { c as defineCdsOtpInputProps } from "./api/CdsOtpInput.props.mjs";
+import { _ as _sfc_main$2 } from "./CdsOtpField.vue_vue_type_script_setup_true_lang.mjs";
+import { _ as _sfc_main$1 } from "./CdsOtpGroup.vue_vue_type_script_setup_true_lang.mjs";
+import { _ as _sfc_main$3 } from "./CdsOtpSeparator.vue_vue_type_script_setup_true_lang.mjs";
+import { u as useOtpInput } from "./composables/useOtpInput.mjs";
+import { I as Intersect } from "../../directives/intersect/index.mjs";
+import { u as useDimensions } from "../../composables/useDimensions/useDimensions.mjs";
+import { u as useSize } from "../../composables/useSize/useSize.mjs";
+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, который принимает ввод кода
+       * @en Ref to the hidden input that receives the code
+       */
+      inputRef,
+      /**
+       * Состояние фокуса поля
+       * @en Focus state of the field
+       */
+      isFocused,
+      /**
+       * Установить фокус на поле
+       * @en Set the focus on the field
+       */
+      focus,
+      /**
+       * Снять фокус с поля
+       * @en Remove the focus from the field
+       */
+      blur,
+      /**
+       * Очистить введённый код
+       * @en Clear the entered code
+       */
+      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 _
+};
+//# sourceMappingURL=CdsOtpInput.vue_vue_type_script_setup_true_lang.mjs.map

package/dist/esm-node/src/components/CdsOtpInput/CdsOtpSeparator.mjs

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

package/dist/esm-node/src/components/CdsOtpInput/CdsOtpSeparator.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,34 @@
+import { defineComponent, useSlots, createVNode } from "vue";
+import { u as useDefaults } from "../../core/useDefaults.mjs";
+import { c as classNames } from "../../utils/dom/classNames.mjs";
+import { b as CdsOtpSeparatorConstants } from "./api/CdsOtpInput.constants.mjs";
+import { b as defineCdsOtpSeparatorProps } from "./api/CdsOtpInput.props.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: CdsOtpSeparatorConstants.name
+  },
+  __name: "CdsOtpSeparator",
+  props: {
+    ...defineCdsOtpSeparatorProps()
+  },
+  setup(__props) {
+    const _props = __props;
+    const props = useDefaults(_props);
+    const slots = useSlots();
+    return () => {
+      var _a;
+      const {
+        rootClass
+      } = CdsOtpSeparatorConstants;
+      return createVNode("div", {
+        "class": classNames(rootClass, props.class),
+        "style": [props.style],
+        "aria-hidden": "true"
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};
+//# sourceMappingURL=CdsOtpSeparator.vue_vue_type_script_setup_true_lang.mjs.map

package/dist/esm-node/src/components/CdsOtpInput/api/CdsOtpInput.constants.mjs

@@ -0,0 +1,16 @@
+import { d as defineConstants } from "../../../core/defineConstants.mjs";
+const CdsOtpInputConstants = defineConstants("CdsOtpInput", {
+  types: ["text", "password", "number"]
+});
+const CdsOtpFieldConstants = defineConstants("CdsOtpField");
+const CdsOtpGroupConstants = defineConstants("CdsOtpGroup");
+const CdsOtpSeparatorConstants = defineConstants("CdsOtpSeparator");
+const CdsOtpInputSymbol = Symbol.for("cds:otp-input");
+export {
+  CdsOtpFieldConstants as C,
+  CdsOtpGroupConstants as a,
+  CdsOtpSeparatorConstants as b,
+  CdsOtpInputConstants as c,
+  CdsOtpInputSymbol as d
+};
+//# sourceMappingURL=CdsOtpInput.constants.mjs.map

package/dist/esm-node/src/components/CdsOtpInput/api/CdsOtpInput.props.mjs

@@ -0,0 +1,136 @@
+import { d as defineDisabledProps } from "../../../composables/useDisabled/useDisabled.mjs";
+import { d as defineFocusProps, a as defineAutofocusProps } from "../../../composables/useFocus/useFocus.mjs";
+import { d as defineLoaderProps } from "../../../composables/useLoader/useLoader.mjs";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
+import { d as defineComponentProps } from "../../../core/defineComponent.mjs";
+import { p as propsFactory } from "../../../core/propsFactory.mjs";
+import { C as CdsOtpFieldConstants, a as CdsOtpGroupConstants, b as CdsOtpSeparatorConstants, c as CdsOtpInputConstants } from "./CdsOtpInput.constants.mjs";
+import { d as defineSizeProps } from "../../../composables/useSize/useSize.mjs";
+import { d as defineDimensionsProps } from "../../../composables/useDimensions/useDimensions.mjs";
+import { d as defineColorProps } from "../../../composables/useColor/useColor.mjs";
+const defineCdsOtpInputProps = propsFactory(
+  {
+    /**
+     * Символ-разделитель, который ставится между ячейками кода
+     * @en Separator character placed between the code cells
+     */
+    divider: String,
+    /**
+     * Подсвечивать все ячейки, пока поле находится в фокусе, а не только активную
+     * @en Highlight all the cells while the field is focused, not only the active one
+     */
+    focusAll: Boolean,
+    /**
+     * Слитный вид: ячейки объединяются в одно поле без промежутков между ними
+     * @en Merged look: the cells are joined into a single field with no gaps between them
+     */
+    merged: Boolean,
+    /**
+     * Доступное имя поля (`aria-label`). Принимает ключ локализации вида `$cds.input.otp`
+     * @en Accessible name of the field (`aria-label`). Accepts a localization key such as `$cds.input.otp`
+     */
+    label: {
+      type: String,
+      default: "$cds.input.otp"
+    },
+    /**
+     * Количество ячеек кода
+     * @en Number of code cells
+     */
+    length: {
+      type: [Number, String],
+      default: 6
+    },
+    /**
+     * Скрывать введённые символы точками
+     * @en Hide the entered characters behind dots
+     */
+    masked: Boolean,
+    /**
+     * Значение компонента v-model
+     * @en Value of the component (v-model)
+     */
+    modelValue: {
+      type: [Number, String],
+      default: void 0
+    },
+    /**
+     * Допустимые символы: имя готового паттерна (`numeric`, `alpha`, `alphanumeric`, `unicode-alpha`, `unicode-alphanumeric`) или собственное регулярное выражение
+     * @en Allowed characters: the name of a ready pattern (`numeric`, `alpha`, `alphanumeric`, `unicode-alpha`, `unicode-alphanumeric`) or your own regular expression
+     */
+    pattern: {
+      type: [String, Object],
+      default: void 0
+    },
+    /**
+     * Символ-заполнитель, который показывается в пустой ячейке
+     * @en Placeholder character shown in an empty cell
+     */
+    placeholder: String,
+    /**
+     * Тип вводимого кода. `number` ограничивает ввод цифрами, `password` скрывает символы
+     * @en Type of the code being entered. `number` limits the input to digits, `password` hides the characters
+     */
+    type: {
+      type: String,
+      default: "number",
+      validator: (value) => CdsOtpInputConstants.types.includes(value)
+    },
+    /**
+     * Состояние ошибки
+     * @en Error state
+     */
+    error: Boolean,
+    ...defineAutofocusProps(),
+    ...defineColorProps(),
+    ...defineComponentProps(),
+    ...defineDimensionsProps(),
+    ...defineDisabledProps(),
+    ...defineFocusProps(),
+    ...defineLoaderProps(),
+    ...defineSizeProps(),
+    ...defineThemeProps()
+  },
+  CdsOtpInputConstants.name
+);
+const defineCdsOtpFieldProps = propsFactory(
+  {
+    /**
+     * Порядковый номер ячейки, начиная с нуля
+     * @en Zero-based index of the cell
+     */
+    index: {
+      type: Number,
+      required: true
+    },
+    ...defineComponentProps()
+  },
+  CdsOtpFieldConstants.name
+);
+const defineCdsOtpGroupProps = propsFactory(
+  {
+    /**
+     * Слитный вид группы. По умолчанию наследуется от родительского `CdsOtpInput`
+     * @en Merged look of the group. Inherited from the parent `CdsOtpInput` by default
+     */
+    merged: {
+      type: Boolean,
+      default: null
+    },
+    ...defineComponentProps()
+  },
+  CdsOtpGroupConstants.name
+);
+const defineCdsOtpSeparatorProps = propsFactory(
+  {
+    ...defineComponentProps()
+  },
+  CdsOtpSeparatorConstants.name
+);
+export {
+  defineCdsOtpGroupProps as a,
+  defineCdsOtpSeparatorProps as b,
+  defineCdsOtpInputProps as c,
+  defineCdsOtpFieldProps as d
+};
+//# sourceMappingURL=CdsOtpInput.props.mjs.map

package/dist/esm-node/src/components/CdsOtpInput/api/CdsOtpInput.types.mjs

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=CdsOtpInput.types.mjs.map