@varlet/ui 1.27.17 → 1.27.18

package/lib/themes/dark/timePicker.js

@@ -4,7 +4,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _default = {
   '--time-picker-clock-container-background': '#545454',
-  '--time-picker-body-background': '#403f3f',
+  '--time-picker-body-background': '#303030',
   '--time-picker-clock-item-disable-color': '#aaaaaa'
 };
 exports.default = _default;

package/lib/time-picker/timePicker.css

@@ -1 +1 @@
-:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-height: 385px; --time-picker-title-padding: 16px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-ampm-margin-left: 5px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 270px; --time-picker-clock-container-height: 270px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: #fff; --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: #fff;}.after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); height: var(--time-picker-height); overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-time-picker__title { padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); display: flex; align-items: flex-end; justify-content: flex-end;}.var-time-picker__title-btn { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier); white-space: nowrap;}.var-time-picker__title-btn--active { opacity: 1;}.var-time-picker__title-time { display: flex; justify-content: flex-end; font-size: var(--time-picker-title-time-font-size);}.var-time-picker__title-time .var-time-picker__title-btn { align-items: center; margin: var(--time-picker-title-time-margin);}.var-time-picker__title-ampm { margin-left: var(--time-picker-title-ampm-margin-left);}.var-time-picker__body { flex: 1; display: flex; align-items: center; justify-content: center; background-color: var(--time-picker-body-background);}.var-time-picker__clock { position: absolute; bottom: var(--time-picker-clock-bottom); left: var(--time-picker-clock-left); right: var(--time-picker-clock-right); top: var(--time-picker-clock-top);}.var-time-picker__clock-container { width: var(--time-picker-clock-container-width); height: var(--time-picker-clock-container-height); background: var(--time-picker-clock-container-background); border-radius: 50%; position: relative;}.var-time-picker__clock-hand { height: var(--time-picker-clock-hand-height); width: var(--time-picker-clock-hand-width); bottom: var(--time-picker-clock-hand-bottom); left: var(--time-picker-clock-hand-left); transform-origin: center bottom; position: absolute; will-change: transform; z-index: 1; background-color: var(--time-picker-clock-hand-background); border-color: var(--time-picker-clock-hand-border-color);}.var-time-picker__clock-hand::before { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: var(--time-picker-clock-hand-before-border-width) solid; width: var(--time-picker-clock-hand-before-width); height: var(--time-picker-clock-hand-before-height); top: -5px; border-color: inherit;}.var-time-picker__clock-hand::after { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); border-color: inherit; height: var(--time-picker-clock-hand-after-height); width: var(--time-picker-clock-hand-after-width); top: 100%; border-style: solid; background-color: inherit;}.var-time-picker__clock-item { align-items: center; border-radius: 100%; display: flex; justify-content: center; height: var(--time-picker-clock-item-height); position: absolute; width: var(--time-picker-clock-item-width); user-select: none; transform: translate(-50%, -50%);}.var-time-picker__clock-item--active { background: var(--time-picker-clock-item-active-background); z-index: 2; color: var(--time-picker-clock-item-active-color);}.var-time-picker__clock-item--disable { color: var(--time-picker-clock-item-disable-color);}.var-time-picker__clock-inner { position: absolute; bottom: var(--time-picker-inner-bottom); left: var(--time-picker-inner-left); right: var(--time-picker-inner-right); top: var(--time-picker-inner-top);}.var-time-picker-panel-fade-enter-from,.var-time-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-time-picker-panel-fade-leave-active { position: absolute;}
+:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-height: 385px; --time-picker-title-padding: 16px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-ampm-margin-left: 5px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 270px; --time-picker-clock-container-height: 270px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: #fff; --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: transparent;}.after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); height: var(--time-picker-height); overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-time-picker__title { padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); display: flex; align-items: flex-end; justify-content: flex-end;}.var-time-picker__title-btn { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier); white-space: nowrap;}.var-time-picker__title-btn--active { opacity: 1;}.var-time-picker__title-time { display: flex; justify-content: flex-end; font-size: var(--time-picker-title-time-font-size);}.var-time-picker__title-time .var-time-picker__title-btn { align-items: center; margin: var(--time-picker-title-time-margin);}.var-time-picker__title-ampm { margin-left: var(--time-picker-title-ampm-margin-left);}.var-time-picker__body { flex: 1; display: flex; align-items: center; justify-content: center; background-color: var(--time-picker-body-background);}.var-time-picker__clock { position: absolute; bottom: var(--time-picker-clock-bottom); left: var(--time-picker-clock-left); right: var(--time-picker-clock-right); top: var(--time-picker-clock-top);}.var-time-picker__clock-container { width: var(--time-picker-clock-container-width); height: var(--time-picker-clock-container-height); background: var(--time-picker-clock-container-background); border-radius: 50%; position: relative;}.var-time-picker__clock-hand { height: var(--time-picker-clock-hand-height); width: var(--time-picker-clock-hand-width); bottom: var(--time-picker-clock-hand-bottom); left: var(--time-picker-clock-hand-left); transform-origin: center bottom; position: absolute; will-change: transform; z-index: 1; background-color: var(--time-picker-clock-hand-background); border-color: var(--time-picker-clock-hand-border-color);}.var-time-picker__clock-hand::before { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: var(--time-picker-clock-hand-before-border-width) solid; width: var(--time-picker-clock-hand-before-width); height: var(--time-picker-clock-hand-before-height); top: -5px; border-color: inherit;}.var-time-picker__clock-hand::after { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); border-color: inherit; height: var(--time-picker-clock-hand-after-height); width: var(--time-picker-clock-hand-after-width); top: 100%; border-style: solid; background-color: inherit;}.var-time-picker__clock-item { align-items: center; border-radius: 100%; display: flex; justify-content: center; height: var(--time-picker-clock-item-height); position: absolute; width: var(--time-picker-clock-item-width); user-select: none; transform: translate(-50%, -50%);}.var-time-picker__clock-item--active { background: var(--time-picker-clock-item-active-background); z-index: 2; color: var(--time-picker-clock-item-active-color);}.var-time-picker__clock-item--disable { color: var(--time-picker-clock-item-disable-color);}.var-time-picker__clock-inner { position: absolute; bottom: var(--time-picker-inner-bottom); left: var(--time-picker-inner-left); right: var(--time-picker-inner-right); top: var(--time-picker-inner-top);}.var-time-picker-panel-fade-enter-from,.var-time-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-time-picker-panel-fade-leave-active { position: absolute;}

package/lib/time-picker/timePicker.less

@@ -31,7 +31,7 @@
 @time-picker-clock-item-active-background: var(--color-primary);
 @time-picker-clock-item-active-color: #fff;
 @time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26);
-@time-picker-body-background: #fff;
+@time-picker-body-background: transparent;
 @time-picker-inner-left: 36px;
 @time-picker-inner-right: 36px;
 @time-picker-inner-top: 36px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "1.27.17",
+  "version": "1.27.18",
   "description": "A material like components library",
   "module": "es/index.js",
   "main": "lib/index.js",
@@ -44,14 +44,14 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
-    "@varlet/icons": "1.27.17",
-    "@varlet/shared": "1.27.17",
+    "@varlet/icons": "1.27.18",
+    "@varlet/shared": "1.27.18",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1"
   },
   "devDependencies": {
-    "@varlet/cli": "1.27.17",
-    "@varlet/touch-emulator": "1.27.17",
+    "@varlet/cli": "1.27.18",
+    "@varlet/touch-emulator": "1.27.18",
     "@vue/runtime-core": "3.2.25",
     "@vue/test-utils": "2.0.0-rc.6",
     "clipboard": "^2.0.6",

package/types/actionSheet.d.ts

@@ -1,7 +1,8 @@
 import type { App, TeleportProps } from 'vue'
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface ActionSheetProps {
+export interface ActionSheetProps extends BasicAttributes {
   actions?: ActionItem[]
   show?: boolean
   title?: string

package/types/appBar.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface AppBarProps {
+export interface AppBarProps extends BasicAttributes {
   color?: string
   textColor?: string
   title?: string

package/types/backTop.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface BackTopProps {
+export interface BackTopProps extends BasicAttributes {
   visibilityHeight?: number | string
   duration?: number
   target?: string | HTMLElement

package/types/badge.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface BadgeProps {
+export interface BadgeProps extends BasicAttributes {
   type?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger'
   hidden?: boolean
   dot?: boolean

package/types/bottomNavigation.d.ts

@@ -1,7 +1,8 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 import { ButtonProps } from './button'
 
-export interface BottomNavigationProps {
+export interface BottomNavigationProps extends BasicAttributes {
   active?: number | string
   fixed?: boolean
   border?: boolean

package/types/bottomNavigationItem.d.ts

@@ -1,7 +1,8 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 import { BadgeProps } from './badge'
 
-export interface BottomNavigationItemProps {
+export interface BottomNavigationItemProps extends BasicAttributes {
   name?: string
   icon?: string
   label?: string

package/types/button.d.ts

@@ -1,4 +1,5 @@
-import { BasicAttributes, VarComponent } from './varComponent'
+import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export interface ButtonProps extends BasicAttributes {
   type?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger'

package/types/card.d.ts

@@ -1,4 +1,5 @@
-import { BasicAttributes, VarComponent } from './varComponent'
+import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export interface CardProps extends BasicAttributes {
   src?: string

package/types/cell.d.ts

@@ -1,4 +1,5 @@
-import { BasicAttributes, VarComponent } from './varComponent'
+import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export interface CellProps extends BasicAttributes {
   title?: string | number

package/types/checkbox.d.ts

@@ -1,8 +1,9 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export type CheckboxValidateTriggers = 'onChange'
 
-export interface CheckboxProps {
+export interface CheckboxProps extends BasicAttributes {
   modelValue?: any
   checkedValue?: any
   uncheckedValue?: any

package/types/checkboxGroup.d.ts

@@ -1,8 +1,9 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export type CheckboxGroupValidateTriggers = 'onChange'
 
-export interface CheckboxGroupProps {
+export interface CheckboxGroupProps extends BasicAttributes {
   modelValue?: any[]
   max?: string | number
   direction?: 'horizontal' | 'vertical'

package/types/chip.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface ChipProps {
+export interface ChipProps extends BasicAttributes {
   type?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger'
   size?: 'normal' | 'mini' | 'small' | 'large'
   color?: string

package/types/col.d.ts

@@ -1,11 +1,12 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export type SizeDescriptor = {
   span?: number | string
   offset?: number | string
 }
 
-export interface ColProps {
+export interface ColProps extends BasicAttributes {
   span?: string | number
   offset?: string | number
   xs?: string | number | SizeDescriptor | undefined

package/types/collapse.d.ts

@@ -1,8 +1,9 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export type CollapseModelValue = null | string | number | Array<string | number>
 
-export interface CollapseProps {
+export interface CollapseProps extends BasicAttributes {
   modelValue?: CollapseModelValue
   accordion?: boolean
   offset?: boolean

package/types/collapseItem.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface CollapseItemProps {
+export interface CollapseItemProps extends BasicAttributes {
   name?: string | number
   title?: string
   icon?: string

package/types/countdown.d.ts

@@ -1,4 +1,5 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export type TimeData = {
   days: number
@@ -8,7 +9,7 @@ export type TimeData = {
   milliseconds: number
 }
 
-export interface CountdownProps {
+export interface CountdownProps extends BasicAttributes {
   time?: string | number
   format?: string
   autoStart?: boolean

package/types/counter.d.ts

@@ -1,8 +1,9 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export type CounterValidateTriggers = 'onIncrement' | 'onDecrement' | 'onInputChange' | 'onLazyChange'
 
-export interface CounterProps {
+export interface CounterProps extends BasicAttributes {
   modelValue?: string | number
   min?: string | number
   max?: string | number

package/types/datePicker.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface DatePickerProps {
+export interface DatePickerProps extends BasicAttributes {
   modelValue: string | Array<string>
   type?: 'date' | 'month'
   allowedDates?: (val: string) => boolean

package/types/dialog.d.ts

@@ -1,7 +1,8 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 import type { App, TeleportProps } from 'vue'
 
-export interface DialogProps {
+export interface DialogProps extends BasicAttributes {
   show?: boolean
   title?: string
   message?: string

package/types/divider.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface DividerProps {
+export interface DividerProps extends BasicAttributes {
   inset?: boolean | number
   vertical?: boolean
   description?: string

package/types/form.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface FormProps {
+export interface FormProps extends BasicAttributes {
   disabled?: boolean
   readonly?: boolean
 }

package/types/icon.d.ts

@@ -1,4 +1,5 @@
-import { BasicAttributes, VarComponent } from './varComponent'
+import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export interface IconProps extends BasicAttributes {
   name?: string

package/types/image.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface ImageProps {
+export interface ImageProps extends BasicAttributes {
   src?: string
   fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
   alt?: string

package/types/imagePreview.d.ts

@@ -1,7 +1,8 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 import type { App, TeleportProps } from 'vue'
 
-export interface ImagePreviewProps {
+export interface ImagePreviewProps extends BasicAttributes {
   show?: boolean
   current?: string
   images?: string[]

package/types/indexAnchor.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface IndexAnchorProps {
+export interface IndexAnchorProps extends BasicAttributes {
   index: string | number
 }
 

package/types/indexBar.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface IndexBarProps {
+export interface IndexBarProps extends BasicAttributes {
   sticky?: boolean
   stickyOffsetTop?: number | string
   hideList?: boolean

package/types/input.d.ts

@@ -1,8 +1,9 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export type InputValidateTriggers = 'onFocus' | 'onBlur' | 'onChange' | 'onClick' | 'onClear' | 'onInput'
 
-export interface InputProps {
+export interface InputProps extends BasicAttributes {
   modelValue?: string
   type?: 'text' | 'password' | 'number' | 'tel' | 'email'
   textarea?: boolean

package/types/list.d.ts

@@ -1,4 +1,5 @@
-import { BasicAttributes, VarComponent } from './varComponent'
+import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export interface ListProps extends BasicAttributes {
   loading?: boolean

package/types/loading.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface LoadingProps {
+export interface LoadingProps extends BasicAttributes {
   type?: 'circle' | 'wave' | 'cube' | 'rect' | 'disappear'
   radius?: string | number
   size?: 'normal' | 'mini' | 'small' | 'large'

package/types/menu.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface MenuProps {
+export interface MenuProps extends BasicAttributes {
   show?: boolean
   alignment?: 'top' | 'bottom'
   offsetX?: string | number

package/types/option.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface OptionProps {
+export interface OptionProps extends BasicAttributes {
   label?: any
   value?: any
 }

package/types/pagination.d.ts

@@ -1,8 +1,9 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 type Range = [number, number]
 
-export interface PaginationProps {
+export interface PaginationProps extends BasicAttributes {
   current?: string | number
   size?: string | number
   total?: string | number

package/types/picker.d.ts

@@ -1,7 +1,8 @@
 import type { App } from 'vue'
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface NormalColumn {
+export interface NormalColumn extends BasicAttributes {
   texts: Texts
   initialIndex?: number
 }

package/types/popup.d.ts

@@ -1,7 +1,8 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 import type { TeleportProps } from 'vue'
 
-export interface PopupProps {
+export interface PopupProps extends BasicAttributes {
   show?: boolean
   position?: 'top' | 'bottom' | 'right' | 'left' | 'center'
   overlay?: boolean

package/types/progress.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface ProgressProps {
+export interface ProgressProps extends BasicAttributes {
   mode?: 'linear' | 'circle'
   lineWidth?: string | number
   color?: string

package/types/pullRefresh.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface PullRefreshProps {
+export interface PullRefreshProps extends BasicAttributes {
   modelValue?: boolean
   disabled?: boolean
   animationDuration?: number | string

package/types/radio.d.ts

@@ -1,8 +1,9 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export type RadioValidateTriggers = 'onChange'
 
-export interface RadioProps {
+export interface RadioProps extends BasicAttributes {
   modelValue?: any
   checkedValue?: any
   uncheckedValue?: any

package/types/radioGroup.d.ts

@@ -1,8 +1,9 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export type RadioGroupValidateTriggers = 'onChange'
 
-export interface RadioGroupProps {
+export interface RadioGroupProps extends BasicAttributes {
   modelValue?: any
   direction?: 'horizontal' | 'vertical'
   validateTrigger?: Array<RadioGroupValidateTriggers>

package/types/rate.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface RateProps {
+export interface RateProps extends BasicAttributes {
   modelValue?: string | number
   count?: string | number
   color?: string

package/types/row.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface RowProps {
+export interface RowProps extends BasicAttributes {
   gutter?: string | number
   justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'
   align?: 'flex-start' | 'center' | 'flex-end'

package/types/select.d.ts

@@ -1,8 +1,9 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export type SelectValidateTriggers = 'onFocus' | 'onBlur' | 'onChange' | 'onClick' | 'onClear' | 'onClose'
 
-export interface SelectProps {
+export interface SelectProps extends BasicAttributes {
   modelValue?: any
   placeholder?: string
   multiple?: boolean

package/types/skeleton.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface SkeletonProps {
+export interface SkeletonProps extends BasicAttributes {
   loading?: boolean
   title?: boolean
   avatar?: boolean

package/types/slider.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface SliderProps {
+export interface SliderProps extends BasicAttributes {
   modelValue?: number | Array<number>
   step?: number | string
   range?: boolean

package/types/snackbar.d.ts

@@ -1,11 +1,12 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 import type { App, TeleportProps } from 'vue'
 
 export type LoadingType = 'circle' | 'wave' | 'cube' | 'rect' | 'disappear'
 
 export type LoadingSize = 'normal' | 'mini' | 'small' | 'large'
 
-export interface SnackbarProps {
+export interface SnackbarProps extends BasicAttributes {
   type?: SnackbarType
   content?: string
   position?: 'top' | 'center' | 'bottom'

package/types/space.d.ts

@@ -1,4 +1,5 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export type SpaceAlign = 'stretch' | 'center' | 'start' | 'end' | 'baseline' | 'initial' | 'inherit'
 
@@ -10,7 +11,7 @@ export type SpaceInternalSize = 'mini' | 'small' | 'normal' | 'large'
 
 export type SpaceSize = SpaceInternalSize | number | string | [number | string, number | string]
 
-export interface SpaceProps {
+export interface SpaceProps extends BasicAttributes {
   align?: SpaceAlign
   size?: SpaceSize
   warp?: boolean

package/types/step.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface StepProps {
+export interface StepProps extends BasicAttributes {
   activeIcon?: string
   currentIcon?: string
   inactiveIcon?: string

package/types/steps.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface StepsProps {
+export interface StepsProps extends BasicAttributes {
   active?: string | number
   direction?: 'horizontal' | 'vertical'
   activeColor?: string

package/types/sticky.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface StickyProps {
+export interface StickyProps extends BasicAttributes {
   offsetTop?: string | number
   zIndex?: string | number
   cssMode?: boolean

package/types/styleProvider.d.ts

@@ -1,9 +1,10 @@
 import type { App } from 'vue'
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
 export type StyleVars = Record<string, string>
 
-export interface StyleProviderProps {
+export interface StyleProviderProps extends BasicAttributes {
   styleVars?: StyleVars
 }
 

package/types/swipe.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface SwipeProps {
+export interface SwipeProps extends BasicAttributes {
   loop?: boolean
   autoplay?: string | number
   duration?: string | number

package/types/swipeItem.d.ts

@@ -1,6 +1,7 @@
 import { VarComponent } from './varComponent'
+import type { BasicAttributes } from './varComponent'
 
-export interface SwipeItemProps {}
+export interface SwipeItemProps extends BasicAttributes {}
 
 export class SwipeItem extends VarComponent {
   $props: SwipeItemProps