@varlet/ui 3.15.2 → 3.16.0-alpha.1778310023051

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.15.2",
+  "version": "3.16.0-alpha.1778310023051",
   "description": "A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.",
   "keywords": [
     "Vue3",
@@ -44,9 +44,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "3.15.2",
-    "@varlet/shared": "3.15.2",
-    "@varlet/use": "3.15.2"
+    "@varlet/icons": "3.16.0-alpha.1778310023051",
+    "@varlet/shared": "3.16.0-alpha.1778310023051",
+    "@varlet/use": "3.16.0-alpha.1778310023051"
   },
   "devDependencies": {
     "@types/node": "^20.19.0",
@@ -62,9 +62,9 @@
     "vue": "3.5.21",
     "vue-router": "4.5.1",
     "zod": "^3.23.8",
-    "@varlet/cli": "3.15.2",
-    "@varlet/ui": "3.15.2",
-    "@varlet/touch-emulator": "3.15.2"
+    "@varlet/cli": "3.16.0-alpha.1778310023051",
+    "@varlet/ui": "3.16.0-alpha.1778310023051",
+    "@varlet/touch-emulator": "3.16.0-alpha.1778310023051"
   },
   "peerDependencies": {
     "vue": "^3.2.0"

package/types/index.d.ts

@@ -60,6 +60,7 @@ export * from './menu'
 export * from './menuOption'
 export * from './menuSelect'
 export * from './option'
+export * from './otpInput'
 export * from './overlay'
 export * from './pagination'
 export * from './paper'
@@ -157,6 +158,7 @@ declare module 'vue' {
     VarMenuOption: typeof import('@varlet/ui')['_MenuOptionComponent']
     VarMenuSelect: typeof import('@varlet/ui')['_MenuSelectComponent']
     VarOption: typeof import('@varlet/ui')['_OptionComponent']
+    VarOtpInput: typeof import('@varlet/ui')['_OtpInputComponent']
     VarOverlay: typeof import('@varlet/ui')['_OverlayComponent']
     VarPagination: typeof import('@varlet/ui')['_PaginationComponent']
     VarPaper: typeof import('@varlet/ui')['_PaperComponent']

package/types/otpInput.d.ts

@@ -0,0 +1,68 @@
+import { VNode } from 'vue'
+import {
+  BasicAttributes,
+  ListenerProp,
+  Rules as OtpInputRules,
+  SetPropsDefaults,
+  VarComponent,
+  Variant as OtpInputVariant,
+} from './varComponent'
+
+export declare const otpInputProps: Record<keyof OtpInputProps, any>
+
+export type OtpInputType = 'digit' | 'text' | 'alphanumeric'
+
+export type OtpInputValidateTrigger = 'onInput' | 'onClick' | 'onPaste' | 'onComplete'
+
+export interface OtpInputProps extends BasicAttributes {
+  modelValue?: string
+  length?: string | number
+  type?: OtpInputType
+  variant?: OtpInputVariant
+  mask?: boolean
+  maskSymbol?: string
+  cellHeight?: string | number
+  cellMaxWidth?: string | number
+  textColor?: string
+  focusColor?: string
+  blurColor?: string
+  disabled?: boolean
+  readonly?: boolean
+  autofocus?: boolean
+  gutter?: string | number
+  validateTrigger?: OtpInputValidateTrigger[]
+  rules?: OtpInputRules
+  allowPaste?: boolean
+  pasteTransform?: (value: string) => string
+  onInput?: ListenerProp<(value: string) => void>
+  onClick?: ListenerProp<(e: Event) => void>
+  onPaste?: ListenerProp<(value: string, e: ClipboardEvent) => void>
+  onComplete?: ListenerProp<(value: string) => void>
+  'onUpdate:modelValue'?: ListenerProp<(value: string) => void>
+}
+
+export interface OtpInputSeparatorData {
+  index: number
+}
+
+export class OtpInput extends VarComponent {
+  static setPropsDefaults: SetPropsDefaults<OtpInputProps>
+
+  $props: OtpInputProps
+
+  $slots: {
+    separator(data: OtpInputSeparatorData): VNode[]
+  }
+
+  focus(index?: number): void
+
+  blur(): void
+
+  reset(): void
+
+  validate(): Promise<boolean>
+
+  resetValidation(): void
+}
+
+export class _OtpInputComponent extends OtpInput {}

package/types/styleVars.d.ts

@@ -496,6 +496,11 @@ interface BaseStyleVars {
   '--menu-option-selected-background'?: string
   '--menu-option-text-color'?: string
   '--menu-option-disabled-color'?: string
+  '--otp-input-gutter'?: string
+  '--otp-input-cell-height'?: string
+  '--otp-input-cell-max-width'?: string
+  '--otp-input-input-font-size'?: string
+  '--otp-input-separator-color'?: string
   '--overlay-background-color'?: string
   '--pagination-text-color'?: string
   '--pagination-font-size'?: string