@varlet/ui 3.17.0 → 3.18.0-alpha.1781190469654

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.17.0",
+  "version": "3.18.0-alpha.1781190469654",
   "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.17.0",
-    "@varlet/shared": "3.17.0",
-    "@varlet/use": "3.17.0"
+    "@varlet/icons": "3.18.0-alpha.1781190469654",
+    "@varlet/shared": "3.18.0-alpha.1781190469654",
+    "@varlet/use": "3.18.0-alpha.1781190469654"
   },
   "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.17.0",
-    "@varlet/ui": "3.17.0",
-    "@varlet/touch-emulator": "3.17.0"
+    "@varlet/cli": "3.18.0-alpha.1781190469654",
+    "@varlet/ui": "3.18.0-alpha.1781190469654",
+    "@varlet/touch-emulator": "3.18.0-alpha.1781190469654"
   },
   "peerDependencies": {
     "vue": "^3.2.0"

package/types/appBar.d.ts

@@ -5,7 +5,13 @@ export declare const appBarProps: Record<keyof AppBarProps, any>
 
 export type AppBarTitlePosition = 'left' | 'center' | 'right'
 
+export type AppBarType = 'primary' | 'surface'
+
+export type AppBarSize = 'normal' | 'large'
+
 export interface AppBarProps extends BasicAttributes {
+  type?: AppBarType
+  size?: AppBarSize
   color?: string
   textColor?: string
   title?: string

package/types/button.d.ts

@@ -19,9 +19,11 @@ export interface ButtonProps extends BasicAttributes {
   size?: ButtonSize
   loading?: boolean
   round?: boolean
+  fab?: boolean
   block?: boolean
   text?: boolean
   outline?: boolean
+  tonal?: boolean
   iconContainer?: boolean
   disabled?: boolean
   ripple?: boolean

package/types/buttonGroup.d.ts

@@ -9,7 +9,7 @@ import {
 
 export declare const buttonGroupProps: Record<keyof ButtonGroupProps, any>
 
-export type ButtonGroupMode = 'normal' | 'text' | 'outline' | 'icon-container'
+export type ButtonGroupMode = 'normal' | 'text' | 'outline' | 'tonal' | 'icon-container'
 
 export interface ButtonGroupProps extends BasicAttributes {
   type?: ButtonGroupType

package/types/dataTable.d.ts

@@ -0,0 +1,173 @@
+import { HTMLAttributes, VNode, VNodeChild } from 'vue'
+import { BasicAttributes, ListenerProp, SetPropsDefaults, VarComponent } from './varComponent'
+
+export declare const dataTableProps: Record<keyof DataTableProps, any>
+
+export type DataTableColumnAlign = 'left' | 'center' | 'right'
+
+export type DataTableColumnFixed = 'left' | 'right'
+
+export type DataTableSurface = 'low'
+
+export type DataTableTableLayout = 'auto' | 'fixed'
+
+export type DataTableSortMode = 'single' | 'multiple'
+
+export type DataTableSorterOrder = 'asc' | 'desc'
+
+export type DataTableRowKey<Row = any> = string | number | ((context: DataTableRowBaseContext<Row>) => string | number)
+
+export interface DataTableRowBaseContext<Row = any> {
+  row: Row
+  rowIndex: number
+}
+
+export interface DataTableColumnRenderContext<Row = any> extends DataTableRowBaseContext<Row> {}
+
+export interface DataTableRowPropsContext<Row = any> extends DataTableRowBaseContext<Row> {}
+
+export interface DataTableColumnCellPropsContext<Row = any> extends DataTableRowBaseContext<Row> {}
+
+export interface DataTableSummaryContext<Row = any> {
+  data: Row[]
+}
+
+export type DataTableColumnCellSpan<Row = any> = number | ((context: DataTableRowBaseContext<Row>) => number)
+
+export type DataTableColumnSelectable<Row = any> = boolean | ((context: DataTableRowBaseContext<Row>) => boolean)
+
+export type DataTableColumnTitle = VNodeChild | (() => VNodeChild)
+
+export type DataTableRowProps<Row = any> =
+  | HTMLAttributes
+  | ((context: DataTableRowPropsContext<Row>) => HTMLAttributes | undefined)
+
+export type DataTableRowClass<Row = any> =
+  | HTMLAttributes['class']
+  | ((context: DataTableRowPropsContext<Row>) => HTMLAttributes['class'])
+
+export type DataTableColumnCellProps<Row = any> =
+  | HTMLAttributes
+  | ((context: DataTableColumnCellPropsContext<Row>) => HTMLAttributes | undefined)
+
+export interface DataTableSummaryCell {
+  value?: VNodeChild
+  colSpan?: number
+  rowSpan?: number
+}
+
+export type DataTableSummary<Row = any> = (
+  context: DataTableSummaryContext<Row>,
+) => Record<string, DataTableSummaryCell> | Array<Record<string, DataTableSummaryCell>>
+
+export interface DataTableBaseColumn<Row = any> {
+  fixed?: DataTableColumnFixed
+  resizable?: boolean
+  width?: string | number
+  minWidth?: string | number
+  maxWidth?: string | number
+  align?: DataTableColumnAlign
+  titleAlign?: DataTableColumnAlign
+  titleColSpan?: number
+  colSpan?: DataTableColumnCellSpan<Row>
+  rowSpan?: DataTableColumnCellSpan<Row>
+  cellProps?: DataTableColumnCellProps<Row>
+}
+
+export interface DataTableSorter {
+  key: string
+  order: DataTableSorterOrder
+}
+
+export interface DataTableFieldColumn<Row = any> extends DataTableBaseColumn<Row> {
+  type?: undefined
+  key: string
+  title: DataTableColumnTitle
+  children?: DataTableColumn<Row>[]
+  sorter?: boolean
+  render?: (context: DataTableColumnRenderContext<Row>) => VNodeChild
+}
+
+export interface DataTableSelectionColumn<Row = any> extends DataTableBaseColumn<Row> {
+  type: 'selection'
+  key?: string
+  title?: DataTableColumnTitle
+  multiple?: boolean
+  selectable?: DataTableColumnSelectable<Row>
+  render?: never
+}
+
+export interface DataTableExpandColumn<Row = any> extends DataTableBaseColumn<Row> {
+  type: 'expand'
+  key?: string
+  title?: DataTableColumnTitle
+  render?: never
+  expandable?: (context: DataTableRowPropsContext<Row>) => boolean
+  renderExpand: (context: DataTableRowBaseContext<Row>) => VNodeChild
+}
+
+export type DataTableColumn<Row = any> =
+  | DataTableFieldColumn<Row>
+  | DataTableSelectionColumn<Row>
+  | DataTableExpandColumn<Row>
+
+export interface DataTablePagination {
+  simple?: boolean
+  disabled?: boolean
+  showSizeChanger?: boolean
+  showQuickJumper?: boolean
+  maxPagerCount?: number
+  sizeOption?: number[]
+  showTotal?: (total: number, range: [number, number]) => string
+}
+
+export interface DataTableProps extends BasicAttributes {
+  data?: any[]
+  columns?: DataTableColumn[]
+  rowKey?: DataTableRowKey
+  rowProps?: DataTableRowProps
+  rowClass?: DataTableRowClass
+  summary?: DataTableSummary
+  loading?: boolean
+  pagination?: boolean | DataTablePagination
+  remote?: boolean
+  page?: number
+  pageSize?: number
+  total?: number
+  maxHeight?: number | string
+  scrollX?: number | string
+  sorters?: DataTableSorter[]
+  sortMode?: DataTableSortMode
+  tree?: boolean
+  surface?: DataTableSurface
+  cascade?: boolean
+  childrenKey?: string
+  plain?: boolean
+  elevation?: boolean | string | number
+  cellBordered?: boolean
+  tableLayout?: DataTableTableLayout
+  size?: 'small' | 'normal' | 'large'
+  checkedRowKeys?: Array<string | number>
+  expandedRowKeys?: Array<string | number>
+  expandedTreeRowKeys?: Array<string | number>
+  'onUpdate:checkedRowKeys'?: ListenerProp<(checkedRowKeys: Array<string | number>) => void>
+  'onUpdate:expandedRowKeys'?: ListenerProp<(expandedRowKeys: Array<string | number>) => void>
+  'onUpdate:expandedTreeRowKeys'?: ListenerProp<(expandedTreeRowKeys: Array<string | number>) => void>
+  'onUpdate:page'?: ListenerProp<(page: number) => void>
+  'onUpdate:pageSize'?: ListenerProp<(pageSize: number) => void>
+  'onUpdate:sorters'?: ListenerProp<(sorters: DataTableSorter[]) => void>
+}
+
+export class DataTable extends VarComponent {
+  static setPropsDefaults: SetPropsDefaults<DataTableProps>
+
+  $props: DataTableProps
+
+  $slots: {
+    empty(): VNode[]
+    loadingDescription(): VNode[]
+    footerPrefix(): VNode[]
+  }
+}
+
+export class _DataTableComponent extends DataTable {}

package/types/index.d.ts

@@ -31,6 +31,7 @@ export * from './context'
 export * from './countTo'
 export * from './countdown'
 export * from './counter'
+export * from './dataTable'
 export * from './datePicker'
 export * from './dialog'
 export * from './divider'
@@ -70,6 +71,8 @@ export * from './progress'
 export * from './pullRefresh'
 export * from './radio'
 export * from './radioGroup'
+export * from './railNavigation'
+export * from './railNavigationItem'
 export * from './rate'
 export * from './result'
 export * from './ripple'
@@ -98,6 +101,7 @@ export * from './tabsItems'
 export * from './themes'
 export * from './timePicker'
 export * from './tooltip'
+export * from './treeMenu'
 export * from './uploader'
 export * from './varComponent'
 export * from './varDirective'
@@ -133,6 +137,7 @@ declare module 'vue' {
     VarCountTo: typeof import('@varlet/ui')['_CountToComponent']
     VarCountdown: typeof import('@varlet/ui')['_CountdownComponent']
     VarCounter: typeof import('@varlet/ui')['_CounterComponent']
+    VarDataTable: typeof import('@varlet/ui')['_DataTableComponent']
     VarDatePicker: typeof import('@varlet/ui')['_DatePickerComponent']
     VarDialog: typeof import('@varlet/ui')['_DialogComponent']
     VarDivider: typeof import('@varlet/ui')['_DividerComponent']
@@ -170,6 +175,8 @@ declare module 'vue' {
     VarPullRefresh: typeof import('@varlet/ui')['_PullRefreshComponent']
     VarRadio: typeof import('@varlet/ui')['_RadioComponent']
     VarRadioGroup: typeof import('@varlet/ui')['_RadioGroupComponent']
+    VarRailNavigation: typeof import('@varlet/ui')['_RailNavigationComponent']
+    VarRailNavigationItem: typeof import('@varlet/ui')['_RailNavigationItemComponent']
     VarRate: typeof import('@varlet/ui')['_RateComponent']
     VarResult: typeof import('@varlet/ui')['_ResultComponent']
     VarRow: typeof import('@varlet/ui')['_RowComponent']
@@ -197,6 +204,7 @@ declare module 'vue' {
     VarThemes: typeof import('@varlet/ui')['_ThemesComponent']
     VarTimePicker: typeof import('@varlet/ui')['_TimePickerComponent']
     VarTooltip: typeof import('@varlet/ui')['_TooltipComponent']
+    VarTreeMenu: typeof import('@varlet/ui')['_TreeMenuComponent']
     VarUploader: typeof import('@varlet/ui')['_UploaderComponent']
     VarWatermark: typeof import('@varlet/ui')['_WatermarkComponent']
   }

package/types/railNavigation.d.ts

@@ -0,0 +1,27 @@
+import { VNode } from 'vue'
+import { BasicAttributes, ListenerProp, SetPropsDefaults, VarComponent } from './varComponent'
+
+export declare const railNavigationProps: Record<keyof RailNavigationProps, any>
+
+export interface RailNavigationProps extends BasicAttributes {
+  active?: number | string
+  ripple?: boolean
+  showLabel?: boolean
+  border?: boolean
+  onChange?: ListenerProp<(active: number | string) => void>
+  'onUpdate:active'?: ListenerProp<(active: number | string) => void>
+}
+
+export class RailNavigation extends VarComponent {
+  static setPropsDefaults: SetPropsDefaults<RailNavigationProps>
+
+  $props: RailNavigationProps
+
+  $slots: {
+    default(): VNode[]
+    start(): VNode[]
+    end(): VNode[]
+  }
+}
+
+export class _RailNavigationComponent extends RailNavigation {}

package/types/railNavigationItem.d.ts

@@ -0,0 +1,38 @@
+import { VNode } from 'vue'
+import { BadgeProps } from './badge'
+import { BasicAttributes, ListenerProp, SetPropsDefaults, VarComponent } from './varComponent'
+
+export declare const railNavigationItemProps: Record<keyof RailNavigationItemProps, any>
+
+export interface RailNavigationItemData {
+  active: boolean
+}
+
+export interface RailNavigationItemIconData {
+  active: boolean
+}
+
+export interface RailNavigationItemProps extends BasicAttributes {
+  name?: number | string
+  label?: string
+  icon?: string
+  namespace?: string
+  badge?: boolean | BadgeProps
+  disabled?: boolean
+  onClick?: ListenerProp<(active: number | string) => void>
+  onMouseenter?: ListenerProp<(active: number | string) => void>
+  onMouseleave?: ListenerProp<(active: number | string) => void>
+}
+
+export class RailNavigationItem extends VarComponent {
+  static setPropsDefaults: SetPropsDefaults<RailNavigationItemProps>
+
+  $props: RailNavigationItemProps
+
+  $slots: {
+    default(data: RailNavigationItemData): VNode[]
+    icon(data: RailNavigationItemIconData): VNode[]
+  }
+}
+
+export class _RailNavigationItemComponent extends RailNavigationItem {}

package/types/styleVars.d.ts

@@ -53,6 +53,10 @@ interface BaseStyleVars {
   '--app-bar-color'?: string
   '--app-bar-text-color'?: string
   '--app-bar-height'?: string
+  '--app-bar-large-height'?: string
+  '--app-bar-surface-color'?: string
+  '--app-bar-surface-text-color'?: string
+  '--app-bar-surface-border-bottom'?: string
   '--app-bar-title-padding'?: string
   '--app-bar-title-font-size'?: string
   '--app-bar-left-gap'?: string
@@ -108,6 +112,7 @@ interface BaseStyleVars {
   '--bottom-navigation-item-icon-size'?: string
   '--bottom-navigation-item-icon-margin-bottom'?: string
   '--bottom-navigation-fab-border-radius'?: string
+  '--bottom-navigation-item-variant-icon-margin-bottom'?: string
   '--bottom-navigation-item-variant-icon-container-height'?: string
   '--bottom-navigation-item-variant-icon-container-border-radius'?: string
   '--bottom-navigation-item-variant-icon-container-max-width'?: string
@@ -124,6 +129,7 @@ interface BaseStyleVars {
   '--button-warning-text-color'?: string
   '--button-info-text-color'?: string
   '--button-default-color'?: string
+  '--button-default-filled-color'?: string
   '--button-primary-color'?: string
   '--button-danger-color'?: string
   '--button-success-color'?: string
@@ -149,6 +155,8 @@ interface BaseStyleVars {
   '--button-normal-padding'?: string
   '--button-large-padding'?: string
   '--button-round-padding'?: string
+  '--button-fab-size'?: string
+  '--button-fab-border-radius'?: string
   '--button-mini-height'?: string
   '--button-small-height'?: string
   '--button-normal-height'?: string
@@ -280,6 +288,32 @@ interface BaseStyleVars {
   '--counter-disabled-color'?: string
   '--counter-disabled-opacity'?: string
   '--counter-error-color'?: string
+  '--data-table-background'?: string
+  '--data-table-header-cell-background'?: string
+  '--data-table-surface-low-background'?: string
+  '--data-table-header-cell-text-color'?: string
+  '--data-table-body-cell-text-color'?: string
+  '--data-table-border-color'?: string
+  '--data-table-row-hover-background'?: string
+  '--data-table-surface-low-row-hover-background'?: string
+  '--data-table-plain-row-hover-background'?: string
+  '--data-table-sort-trigger-color'?: string
+  '--data-table-sort-trigger-active-color'?: string
+  '--data-table-sort-trigger-hover-background'?: string
+  '--data-table-empty-text-color'?: string
+  '--data-table-resize-trigger-color'?: string
+  '--data-table-fixed-shadow-color'?: string
+  '--data-table-border-radius'?: string
+  '--data-table-cell-padding'?: string
+  '--data-table-selection-cell-padding'?: string
+  '--data-table-expand-cell-padding'?: string
+  '--data-table-cell-font-size'?: string
+  '--data-table-header-font-size'?: string
+  '--data-table-row-height'?: string
+  '--data-table-row-small-height'?: string
+  '--data-table-row-large-height'?: string
+  '--data-table-footer-padding'?: string
+  '--data-table-empty-padding'?: string
   '--date-picker-border-radius'?: string
   '--date-picker-font-size'?: string
   '--date-picker-min-width'?: string
@@ -560,6 +594,26 @@ interface BaseStyleVars {
   '--radio-action-padding'?: string
   '--radio-icon-size'?: string
   '--radio-text-color'?: string
+  '--rail-navigation-width'?: string
+  '--rail-navigation-background'?: string
+  '--rail-navigation-border-color'?: string
+  '--rail-navigation-padding'?: string
+  '--rail-navigation-start-padding'?: string
+  '--rail-navigation-end-padding'?: string
+  '--rail-navigation-item-gap'?: string
+  '--rail-navigation-item-height'?: string
+  '--rail-navigation-item-padding'?: string
+  '--rail-navigation-item-indicator-width'?: string
+  '--rail-navigation-item-indicator-height'?: string
+  '--rail-navigation-item-indicator-hover-background'?: string
+  '--rail-navigation-item-indicator-pressed-background'?: string
+  '--rail-navigation-item-indicator-active-background'?: string
+  '--rail-navigation-item-inactive-text-color'?: string
+  '--rail-navigation-item-active-text-color'?: string
+  '--rail-navigation-item-disabled-opacity'?: string
+  '--rail-navigation-item-icon-size'?: string
+  '--rail-navigation-item-label-font-size'?: string
+  '--rail-navigation-item-label-line-height'?: string
   '--rate-color'?: string
   '--rate-size'?: string
   '--rate-primary-color'?: string
@@ -749,6 +803,9 @@ interface BaseStyleVars {
   '--switch-variant-ripple-left'?: string
   '--switch-variant-ripple-active-left'?: string
   '--table-background'?: string
+  '--table-surface-low-background'?: string
+  '--table-surface-low-row-hover-background'?: string
+  '--table-plain-row-hover-background'?: string
   '--table-border-radius'?: string
   '--table-thead-border-bottom'?: string
   '--table-thead-th-text-color'?: string
@@ -930,6 +987,33 @@ interface BaseStyleVars {
   '--tooltip-success-text-color'?: string
   '--tooltip-warning-text-color'?: string
   '--tooltip-danger-text-color'?: string
+  '--tree-menu-background'?: string
+  '--tree-menu-item-text-color'?: string
+  '--tree-menu-padding'?: string
+  '--tree-menu-item-gap'?: string
+  '--tree-menu-item-height'?: string
+  '--tree-menu-item-padding'?: string
+  '--tree-menu-item-border-radius'?: string
+  '--tree-menu-item-indent'?: string
+  '--tree-menu-item-icon-size'?: string
+  '--tree-menu-item-icon-margin-right'?: string
+  '--tree-menu-item-label-font-size'?: string
+  '--tree-menu-item-label-line-height'?: string
+  '--tree-menu-group-label-height'?: string
+  '--tree-menu-group-label-padding'?: string
+  '--tree-menu-group-label-color'?: string
+  '--tree-menu-group-label-font-size'?: string
+  '--tree-menu-divider-margin'?: string
+  '--tree-menu-divider-color'?: string
+  '--tree-menu-item-hover-background'?: string
+  '--tree-menu-item-pressed-background'?: string
+  '--tree-menu-item-active-background'?: string
+  '--tree-menu-item-active-text-color'?: string
+  '--tree-menu-item-disabled-opacity'?: string
+  '--tree-menu-item-indicator-border-radius'?: string
+  '--tree-menu-item-indicator-active-transition-duration'?: string
+  '--tree-menu-expand-icon-color'?: string
+  '--tree-menu-expand-icon-size'?: string
   '--uploader-action-background'?: string
   '--uploader-action-icon-color'?: string
   '--uploader-action-icon-size'?: string

package/types/table.d.ts

@@ -7,6 +7,8 @@ export interface TableProps extends BasicAttributes {
   fullWidth?: string | number
   scrollerHeight?: string | number
   elevation?: boolean | string | number
+  surface?: 'low'
+  plain?: boolean
 }
 
 export class Table extends VarComponent {

package/types/treeMenu.d.ts

@@ -0,0 +1,80 @@
+import { VNode, VNodeChild } from 'vue'
+import { BasicAttributes, ListenerProp, SetPropsDefaults, VarComponent } from './varComponent'
+
+export declare const treeMenuProps: Record<keyof TreeMenuProps, any>
+
+export type TreeMenuOptionValue = string | number
+
+export type TreeMenuOptionType = 'group' | 'divider'
+
+export type TreeMenuOptionLabelRender = (option: TreeMenuOption, active: boolean) => VNodeChild
+
+export type TreeMenuOptionIconRender = (option: TreeMenuOption, active: boolean) => VNodeChild
+
+export interface TreeMenuOptionRenderContext {
+  node: VNode
+}
+
+export type TreeMenuOptionRender = (
+  context: TreeMenuOptionRenderContext,
+  option: TreeMenuOption,
+  active: boolean,
+) => VNodeChild
+
+export interface TreeMenuBaseOption {
+  value?: TreeMenuOptionValue
+  label?: string | VNode | TreeMenuOptionLabelRender
+  icon?: string | VNode | TreeMenuOptionIconRender
+  render?: TreeMenuOptionRender
+  namespace?: string
+  show?: boolean
+  disabled?: boolean
+  children?: TreeMenuOption[]
+
+  [key: PropertyKey]: any
+}
+
+export interface TreeMenuItemOption extends TreeMenuBaseOption {
+  type?: undefined
+}
+
+export interface TreeMenuGroupOption extends TreeMenuBaseOption {
+  type: 'group'
+}
+
+export interface TreeMenuDividerOption extends TreeMenuBaseOption {
+  type: 'divider'
+}
+
+export type TreeMenuOption = TreeMenuItemOption | TreeMenuGroupOption | TreeMenuDividerOption
+
+export interface TreeMenuProps extends BasicAttributes {
+  active?: TreeMenuOptionValue
+  options?: TreeMenuOption[]
+  expandedValues?: TreeMenuOptionValue[]
+  valueKey?: string
+  labelKey?: string
+  iconKey?: string
+  childrenKey?: string
+  accordion?: boolean
+  indent?: string | number
+  ripple?: boolean
+  disabled?: boolean
+  onChange?: ListenerProp<(active: TreeMenuOptionValue, option: TreeMenuOption) => void>
+  'onUpdate:active'?: ListenerProp<(active: TreeMenuOptionValue) => void>
+  'onUpdate:expandedValues'?: ListenerProp<(values: TreeMenuOptionValue[]) => void>
+}
+
+export class TreeMenu extends VarComponent {
+  static setPropsDefaults: SetPropsDefaults<TreeMenuProps>
+
+  $props: TreeMenuProps
+
+  $slots: {
+    start(): VNode[]
+    default(): VNode[]
+    end(): VNode[]
+  }
+}
+
+export class _TreeMenuComponent extends TreeMenu {}