refactor: rename otp slot to otp cell

Author: logaretm

packages/core/src/constants/index.ts

@@ -22,7 +22,7 @@ export const FieldTypePrefixes = {
   DateTimeSegment: 'dts',
   Calendar: 'cal',
   OTPField: 'otp',
-  OTPSlot: 'otps',
+  OtpCell: 'otpc',
   FileField: 'ff',
   FlowSegment: 'fs',
 } as const;

packages/core/src/useOtpField/index.ts

@@ -1,4 +1,4 @@
 export * from './useOtpField';
-export * from './useOtpSlot';
+export * from './useOtpCell';
 export * from './useOtpControl';
 export * from './types';

packages/core/src/useOtpField/types.ts

@@ -1,8 +1,8 @@
 import { InjectionKey } from 'vue';
 
-export type OtpSlotAcceptType = 'all' | 'numeric' | 'alphanumeric';
+export type OtpCellAcceptType = 'all' | 'numeric' | 'alphanumeric';
 
-export interface OtpSlotRegistration {
+export interface OtpCellRegistration {
   id: string;
   focusNext(): void;
   focusPrevious(): void;
@@ -12,7 +12,7 @@ export interface OtpSlotRegistration {
 }
 
 export interface OtpContext {
-  useSlotRegistration(): OtpSlotRegistration;
+  useCellRegistration(): OtpCellRegistration;
   getMaskCharacter(): string;
   onBlur(): void;
 }

…/core/src/useOtpField/useOtpSlot.spec.ts …/core/src/useOtpField/useOtpCell.spec.tspackages/core/src/useOtpField/useOtpSlot.spec.ts renamed to packages/core/src/useOtpField/useOtpCell.spec.ts packages/core/src/useOtpField/useOtpSlot.spec.ts renamed to packages/core/src/useOtpField/useOtpCell.spec.ts

@@ -1,4 +1,4 @@
-import { OtpSlot } from '.';
+import { OtpCell } from '.';
 import { describe, expect, test, vi } from 'vitest';
 import { appRender } from '@test-utils/index';
 
@@ -8,14 +8,14 @@ describe('useOtpSlot', () => {
       const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
       // Render OtpSlot without a parent OtpField
       appRender({
-        components: { OtpSlot },
-        template: `<OtpSlot value="" />`,
+        components: { OtpCell },
+        template: `<OtpCell value="" />`,
       });
 
       // Verify that the warning was shown
       // In browser mode this can be logged more than once depending on mount/render,
       // so assert on content rather than exact count.
-      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('OtpSlot must be used within an OtpField'));
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('OtpCell must be used within an OtpField'));
 
       warnSpy.mockRestore();
     });

…kages/core/src/useOtpField/useOtpSlot.ts …kages/core/src/useOtpField/useOtpCell.tspackages/core/src/useOtpField/useOtpSlot.ts renamed to packages/core/src/useOtpField/useOtpCell.ts packages/core/src/useOtpField/useOtpSlot.ts renamed to packages/core/src/useOtpField/useOtpCell.ts

@@ -3,49 +3,49 @@ import { Reactivify } from '../types';
 import { hasKeyCode, isInputElement, normalizeProps, warn, useCaptureProps } from '../utils/common';
 import { isFirefox } from '../utils/platform';
 import { blockEvent } from '../utils/events';
-import { OtpContextKey, OtpSlotAcceptType } from './types';
+import { OtpContextKey, OtpCellAcceptType } from './types';
 import { createDisabledContext } from '../helpers/createDisabledContext';
 import { isValueAccepted } from './utils';
 
-export interface OtpSlotProps {
+export interface OtpCellProps {
   /**
-   * The value of the slot.
+   * The value of the cell.
    */
   value: string;
 
   /**
-   * Whether the slot is disabled.
+   * Whether the cell is disabled.
    */
   disabled?: boolean;
 
   /**
-   * Whether the slot is readonly.
+   * Whether the cell is readonly.
    */
   readonly?: boolean;
 
   /**
-   * Whether the slot is masked.
+   * Whether the cell is masked.
    */
   masked?: boolean;
 
   /**
-   * The type of the slot.
+   * The type of the cell.
    */
-  accept?: OtpSlotAcceptType;
+  accept?: OtpCellAcceptType;
 }
 
-export function useOtpSlot(_props: Reactivify<OtpSlotProps>) {
+export function useOtpCell(_props: Reactivify<OtpCellProps>) {
   const props = normalizeProps(_props);
-  const slotEl = shallowRef<HTMLElement>();
+  const cellEl = shallowRef<HTMLElement>();
   const isDisabled = createDisabledContext(props.disabled);
 
   const context = inject(OtpContextKey, null);
 
-  const registration = context?.useSlotRegistration();
+  const registration = context?.useCellRegistration();
 
   if (!context) {
     if (__DEV__) {
-      warn('OtpSlot must be used within an OtpField');
+      warn('OtpCell must be used within an OtpField');
     }
   }
 
@@ -58,16 +58,16 @@ export function useOtpSlot(_props: Reactivify<OtpSlotProps>) {
   }
 
   function setElementValue(value: string) {
-    if (!slotEl.value) {
+    if (!cellEl.value) {
       return;
     }
 
-    if (isInputElement(slotEl.value)) {
-      slotEl.value.value = value;
+    if (isInputElement(cellEl.value)) {
+      cellEl.value.value = value;
       return;
     }
 
-    slotEl.value.textContent = value;
+    cellEl.value.textContent = value;
   }
 
   const handlers = {
@@ -129,28 +129,28 @@ export function useOtpSlot(_props: Reactivify<OtpSlotProps>) {
       }
     },
     onChange(e: Event) {
-      if (!slotEl.value) {
+      if (!cellEl.value) {
         return;
       }
 
-      if (isInputElement(slotEl.value)) {
-        setElementValue(slotEl.value.value);
-        registration?.setValue(slotEl.value.value, e);
+      if (isInputElement(cellEl.value)) {
+        setElementValue(cellEl.value.value);
+        registration?.setValue(cellEl.value.value, e);
         return;
       }
 
-      setElementValue(slotEl.value.textContent ?? '');
-      registration?.setValue(slotEl.value.textContent ?? '', e);
+      setElementValue(cellEl.value.textContent ?? '');
+      registration?.setValue(cellEl.value.textContent ?? '', e);
     },
   };
 
-  const slotProps = useCaptureProps(() => {
-    const isInput = isInputElement(slotEl.value);
+  const cellProps = useCaptureProps(() => {
+    const isInput = isInputElement(cellEl.value);
 
     const baseProps: Record<string, unknown> = {
       [isInput ? 'readonly' : 'aria-readonly']: toValue(props.readonly),
       [isInput ? 'disabled' : 'aria-disabled']: toValue(props.disabled),
-      'data-otp-slot': true,
+      'data-otp-cell': true,
       spellcheck: false,
       tabindex: isDisabled.value ? '-1' : '0',
       autocorrect: 'off',
@@ -175,24 +175,24 @@ export function useOtpSlot(_props: Reactivify<OtpSlotProps>) {
     }
 
     return baseProps;
-  }, slotEl);
+  }, cellEl);
 
   return {
-    slotProps,
+    cellProps,
     key: registration?.id ?? useId(),
     value: computed(() => withMask(toValue(props.value))),
   };
 }
 
 /**
- * A helper component that renders an OTP slot. You can build your own with `useOtpSlot`.
+ * A helper component that renders an OTP cell. You can build your own with `useOtpCell`.
  */
-export const OtpSlot = /*#__PURE__*/ defineComponent<OtpSlotProps & { as?: string }>({
-  name: 'OtpSlot',
+export const OtpCell = /*#__PURE__*/ defineComponent<OtpCellProps & { as?: string }>({
+  name: 'OtpCell',
   props: ['value', 'disabled', 'readonly', 'accept', 'masked', 'as'],
   setup(props) {
-    const { slotProps, value, key } = useOtpSlot(props);
+    const { cellProps, value, key } = useOtpCell(props);
 
-    return () => h(props.as || 'input', { ...slotProps.value, key }, value.value);
+    return () => h(props.as || 'input', { ...cellProps.value, key }, value.value);
   },
 });