@varlet/ui 3.18.2 → 3.19.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.18.2",
+  "version": "3.19.1",
   "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.18.2",
-    "@varlet/use": "3.18.2",
-    "@varlet/shared": "3.18.2"
+    "@varlet/shared": "3.19.1",
+    "@varlet/use": "3.19.1",
+    "@varlet/icons": "3.19.1"
   },
   "devDependencies": {
     "@types/node": "^20.19.0",
@@ -62,9 +62,9 @@
     "vue": "3.5.21",
     "vue-router": "4.5.1",
     "zod": "^3.23.8",
-    "@varlet/touch-emulator": "3.18.2",
-    "@varlet/cli": "3.18.2",
-    "@varlet/ui": "3.18.2"
+    "@varlet/ui": "3.19.1",
+    "@varlet/cli": "3.19.1",
+    "@varlet/touch-emulator": "3.19.1"
   },
   "peerDependencies": {
     "vue": "^3.2.0"

package/types/actionSheet.d.ts

@@ -29,7 +29,7 @@ export interface ActionSheetProps extends BasicAttributes {
 export interface ActionItem {
   name: string
   color?: string
-  icon?: string
+  icon?: string | VNode | (() => VNode)
   namespace?: string
   iconSize?: string | number
   className?: string

package/types/badge.d.ts

@@ -29,6 +29,7 @@ export class Badge extends VarComponent {
   $slots: {
     default(): VNode[]
     value(): VNode[]
+    icon(): VNode[]
   }
 }
 

package/types/chip.d.ts

@@ -17,6 +17,8 @@ export interface ChipProps extends BasicAttributes {
   size?: ChipSize
   color?: string
   textColor?: string
+  icon?: string
+  /** @deprecated Use icon instead. */
   iconName?: string
   namespace?: string
   plain?: boolean
@@ -36,6 +38,7 @@ export class Chip extends VarComponent {
     default(): VNode[]
     left(): VNode[]
     right(): VNode[]
+    icon(): VNode[]
   }
 }
 

package/types/dateInput.d.ts

@@ -0,0 +1,96 @@
+import { InputHTMLAttributes, VNode } from 'vue'
+import {
+  BasicAttributes,
+  ListenerProp,
+  Rules as DateInputRules,
+  SetPropsDefaults,
+  VarComponent,
+  Variant as DateInputVariant,
+} from './varComponent'
+
+export declare const dateInputProps: Record<keyof DateInputProps, any>
+
+export type DateInputType = 'date' | 'month' | 'year' | 'datetime'
+
+export type DateInputValidateTrigger = 'onFocus' | 'onBlur' | 'onChange' | 'onClick' | 'onClear' | 'onInput'
+
+export type DateInputValue = string | number | Date
+
+export type DateInputValueFormat = 'timestamp' | 'date' | string
+
+export type DateInputRangePosition = 'start' | 'end'
+
+export interface DateInputAllowedTimeValidators {
+  hours?: (hour: number) => boolean
+  minutes?: (minute: number, hour: number) => boolean
+  seconds?: (second: number, minute: number, hour: number) => boolean
+}
+
+export type DateInputAllowedTimes = (date: string, position?: DateInputRangePosition) => DateInputAllowedTimeValidators
+
+export interface DateInputProps extends BasicAttributes {
+  modelValue?: DateInputValue | DateInputValue[]
+  type?: DateInputType
+  format?: string
+  valueFormat?: DateInputValueFormat
+  useSeconds?: boolean
+  multiple?: boolean
+  range?: boolean
+  separator?: string
+  rangeSeparator?: string
+  placeholder?: string
+  variant?: DateInputVariant
+  size?: 'normal' | 'small'
+  line?: boolean
+  hint?: boolean
+  textColor?: string
+  focusColor?: string
+  blurColor?: string
+  clearable?: boolean
+  readonly?: boolean
+  disabled?: boolean
+  validateTrigger?: DateInputValidateTrigger[]
+  rules?: DateInputRules
+  allowedDates?: (value: string) => boolean
+  allowedTimes?: DateInputAllowedTimes
+  min?: string
+  max?: string
+  firstDayOfWeek?: string | number
+  tabindex?: InputHTMLAttributes['tabindex']
+  onFocus?: ListenerProp<(e: FocusEvent) => void>
+  onBlur?: ListenerProp<(e: FocusEvent) => void>
+  onChange?: ListenerProp<(value: DateInputValue | DateInputValue[] | undefined) => void>
+  onClear?: ListenerProp<(value: string) => void>
+  'onUpdate:modelValue'?: ListenerProp<(value: DateInputValue | DateInputValue[] | undefined) => void>
+}
+
+export interface DateInputClearIconData {
+  clear: (e: Event) => void
+}
+
+export class DateInput extends VarComponent {
+  static setPropsDefaults: SetPropsDefaults<DateInputProps>
+
+  $props: DateInputProps
+
+  $slots: {
+    'prepend-icon'(): VNode[]
+    'append-icon'(): VNode[]
+    'clear-icon'(data: DateInputClearIconData): VNode[]
+    'extra-message'(): VNode[]
+  }
+
+  focus(): void
+
+  blur(): void
+
+  select(): void
+
+  validate(): Promise<boolean>
+
+  resetValidation(): void
+
+  reset(): void
+}
+
+export class _DateInputComponent extends DateInput {}

package/types/datePicker.d.ts

@@ -18,12 +18,12 @@ export interface DatePickerProps extends BasicAttributes {
   min?: string
   max?: string
   showCurrent?: boolean
+  showTitle?: boolean
   readonly?: boolean
   multiple?: boolean
   range?: boolean
-  touchable?: boolean
   fallbackViewDate?: string
-  onPreview?: ListenerProp<(year: number, month: number, day?: number) => void>
+  onPreview?: ListenerProp<(year: number, month: number, dayOfMonth?: number) => void>
   onChange?: ListenerProp<(value: string | string[]) => void>
   'onUpdate:modelValue'?: ListenerProp<(value: string | string[]) => void>
 }
@@ -54,6 +54,8 @@ export class DatePicker extends VarComponent {
 
   $props: DatePickerProps
 
+  resetPreview(): void
+
   $slots: {
     year(data: DatePickerYear): VNode[]
     month(data: DatePickerMonth): VNode[]

package/types/index.d.ts

@@ -32,6 +32,7 @@ export * from './countTo'
 export * from './countdown'
 export * from './counter'
 export * from './dataTable'
+export * from './dateInput'
 export * from './datePicker'
 export * from './dialog'
 export * from './divider'
@@ -138,6 +139,7 @@ declare module 'vue' {
     VarCountdown: typeof import('@varlet/ui')['_CountdownComponent']
     VarCounter: typeof import('@varlet/ui')['_CounterComponent']
     VarDataTable: typeof import('@varlet/ui')['_DataTableComponent']
+    VarDateInput: typeof import('@varlet/ui')['_DateInputComponent']
     VarDatePicker: typeof import('@varlet/ui')['_DatePickerComponent']
     VarDialog: typeof import('@varlet/ui')['_DialogComponent']
     VarDivider: typeof import('@varlet/ui')['_DividerComponent']

package/types/locale.d.ts

@@ -24,6 +24,8 @@ export type Message = {
   datePickerWeekDict: Record<Week, { name: string; abbr: string }>
   datePickerSelected: string
   datePickerHint: string
+  datePickerYearHint: string
+  datePickerMonthHint: string
   // pagination
   paginationItem: string
   paginationPage: string

package/types/rate.d.ts

@@ -1,3 +1,4 @@
+import { VNode } from 'vue'
 import { BasicAttributes, ListenerProp, Rules as RateRules, SetPropsDefaults, VarComponent } from './varComponent'
 
 export declare const rateProps: Record<keyof RateProps, any>
@@ -30,6 +31,12 @@ export class Rate extends VarComponent {
   static setPropsDefaults: SetPropsDefaults<RateProps>
 
   $props: RateProps
+
+  $slots: {
+    icon(): VNode[]
+    'empty-icon'(): VNode[]
+    'half-icon'(): VNode[]
+  }
 }
 
 export class _RateComponent extends Rate {}

package/types/step.d.ts

@@ -19,6 +19,9 @@ export class Step extends VarComponent {
 
   $slots: {
     default(): VNode[]
+    'active-icon'(): VNode[]
+    'current-icon'(): VNode[]
+    'inactive-icon'(): VNode[]
   }
 }
 

package/types/styleVars.d.ts

@@ -322,6 +322,10 @@ interface BaseStyleVars {
   '--data-table-row-large-height'?: string
   '--data-table-footer-padding'?: string
   '--data-table-empty-padding'?: string
+  '--date-input-picker-width'?: string
+  '--date-input-time-select-separator-color'?: string
+  '--date-input-time-select-border-color'?: string
+  '--date-input-time-select-active-color'?: string
   '--date-picker-border-radius'?: string
   '--date-picker-font-size'?: string
   '--date-picker-min-width'?: string
@@ -332,10 +336,6 @@ interface BaseStyleVars {
   '--date-picker-title-padding'?: string
   '--date-picker-title-background'?: string
   '--date-picker-title-color'?: string
-  '--date-picker-title-year-font-size'?: string
-  '--date-picker-title-year-font-weight'?: string
-  '--date-picker-title-year-margin-bottom'?: string
-  '--date-picker-title-year-min-height'?: string
   '--date-picker-title-date-height'?: string
   '--date-picker-title-date-font-size'?: string
   '--date-picker-title-date-font-weight'?: string
@@ -344,18 +344,22 @@ interface BaseStyleVars {
   '--date-picker-header-arrow-filter'?: string
   '--date-picker-body-background-color'?: string
   '--date-picker-body-height'?: string
+  '--date-picker-body-padding-horizontal'?: string
   '--date-picker-body-padding'?: string
   '--date-picker-header-padding'?: string
+  '--date-picker-header-padding-top-no-title'?: string
   '--date-picker-actions-padding'?: string
   '--date-picker-header-color'?: string
   '--month-picker-padding'?: string
   '--month-picker-item-width'?: string
   '--month-picker-item-height'?: string
   '--month-picker-item-button-max-width'?: string
+  '--month-picker-item-button-font-weight'?: string
   '--year-picker-padding'?: string
   '--year-picker-item-width'?: string
   '--year-picker-item-height'?: string
   '--year-picker-item-button-max-width'?: string
+  '--year-picker-item-button-font-weight'?: string
   '--day-picker-content-item-width'?: string
   '--day-picker-content-item-min-height'?: string
   '--day-picker-content-item-font-size'?: string
@@ -364,8 +368,14 @@ interface BaseStyleVars {
   '--day-picker-content-item-button-height'?: string
   '--day-picker-content-item-button-font-size'?: string
   '--day-picker-head-item-color'?: string
+  '--day-picker-head-item-font-size'?: string
   '--day-picker-head-item-padding'?: string
   '--day-picker-head-item-font-weight'?: string
+  '--day-picker-adjacent-item-color'?: string
+  '--date-picker-title-year-font-size'?: string
+  '--date-picker-title-year-font-weight'?: string
+  '--date-picker-title-year-margin-bottom'?: string
+  '--date-picker-title-year-min-height'?: string
   '--dialog-width'?: string
   '--dialog-background'?: string
   '--dialog-border-radius'?: string