@varlet/ui 3.16.2 → 3.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.16.2",
+  "version": "3.17.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.16.2",
-    "@varlet/use": "3.16.2",
-    "@varlet/shared": "3.16.2"
+    "@varlet/icons": "3.17.1",
+    "@varlet/use": "3.17.1",
+    "@varlet/shared": "3.17.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/ui": "3.16.2",
-    "@varlet/cli": "3.16.2",
-    "@varlet/touch-emulator": "3.16.2"
+    "@varlet/ui": "3.17.1",
+    "@varlet/cli": "3.17.1",
+    "@varlet/touch-emulator": "3.17.1"
   },
   "peerDependencies": {
     "vue": "^3.2.0"

package/types/index.d.ts

@@ -74,6 +74,8 @@ export * from './rate'
 export * from './result'
 export * from './ripple'
 export * from './row'
+export * from './segmentedButton'
+export * from './segmentedButtons'
 export * from './select'
 export * from './signature'
 export * from './skeleton'
@@ -171,6 +173,8 @@ declare module 'vue' {
     VarRate: typeof import('@varlet/ui')['_RateComponent']
     VarResult: typeof import('@varlet/ui')['_ResultComponent']
     VarRow: typeof import('@varlet/ui')['_RowComponent']
+    VarSegmentedButton: typeof import('@varlet/ui')['_SegmentedButtonComponent']
+    VarSegmentedButtons: typeof import('@varlet/ui')['_SegmentedButtonsComponent']
     VarSelect: typeof import('@varlet/ui')['_SelectComponent']
     VarSignature: typeof import('@varlet/ui')['_SignatureComponent']
     VarSkeleton: typeof import('@varlet/ui')['_SkeletonComponent']

package/types/segmentedButton.d.ts

@@ -0,0 +1,33 @@
+import { VNode } from 'vue'
+import { BasicAttributes, ListenerProp, SetPropsDefaults, VarComponent } from './varComponent'
+
+export declare const segmentedButtonProps: Record<keyof SegmentedButtonProps, any>
+
+export interface SegmentedButtonProps extends BasicAttributes {
+  checkedValue?: any
+  disabled?: boolean
+  readonly?: boolean
+  ripple?: boolean
+  onClick?: ListenerProp<(e: Event) => void>
+}
+
+export interface SegmentedButtonDefaultData {
+  checked: boolean
+}
+
+export interface SegmentedButtonCheckmarkData {
+  checked: boolean
+}
+
+export class SegmentedButton extends VarComponent {
+  static setPropsDefaults: SetPropsDefaults<SegmentedButtonProps>
+
+  $props: SegmentedButtonProps
+
+  $slots: {
+    checkmark(data: SegmentedButtonCheckmarkData): VNode[]
+    default(data: SegmentedButtonDefaultData): VNode[]
+  }
+}
+
+export class _SegmentedButtonComponent extends SegmentedButton {}

package/types/segmentedButtons.d.ts

@@ -0,0 +1,58 @@
+import { VNode, VNodeChild } from 'vue'
+import {
+  BasicAttributes,
+  ListenerProp,
+  Rules as SegmentedButtonsRules,
+  SetPropsDefaults,
+  Size as SegmentedButtonsSize,
+  VarComponent,
+} from './varComponent'
+
+export declare const segmentedButtonsProps: Record<keyof SegmentedButtonsProps, any>
+
+export type SegmentedButtonsValidateTrigger = 'onClick' | 'onChange'
+
+export type SegmentedButtonsOptionLabelRender = (option: SegmentedButtonsOption, checked: boolean) => VNodeChild
+
+export interface SegmentedButtonsOption {
+  label?: string | VNode | SegmentedButtonsOptionLabelRender
+  value?: any
+  disabled?: boolean
+  ripple?: boolean
+
+  [key: PropertyKey]: any
+}
+
+export { SegmentedButtonsSize }
+
+export interface SegmentedButtonsProps extends BasicAttributes {
+  modelValue?: any | any[]
+  options?: SegmentedButtonsOption[]
+  labelKey?: string
+  valueKey?: string
+  multiple?: boolean
+  checkmark?: boolean
+  size?: SegmentedButtonsSize
+  validateTrigger?: SegmentedButtonsValidateTrigger[]
+  rules?: SegmentedButtonsRules
+  onChange?: ListenerProp<(value: any | any[]) => void>
+  'onUpdate:modelValue'?: ListenerProp<(value: any | any[]) => void>
+}
+
+export class SegmentedButtons extends VarComponent {
+  static setPropsDefaults: SetPropsDefaults<SegmentedButtonsProps>
+
+  $props: SegmentedButtonsProps
+
+  $slots: {
+    default(): VNode[]
+  }
+
+  validate(): Promise<boolean>
+
+  resetValidation(): void
+
+  reset(): void
+}
+
+export class _SegmentedButtonsComponent extends SegmentedButtons {}

package/types/styleVars.d.ts

@@ -592,6 +592,29 @@ interface BaseStyleVars {
   '--result-description-line-height'?: string
   '--ripple-cubic-bezier'?: string
   '--ripple-color'?: string
+  '--segmented-buttons-border-color'?: string
+  '--segmented-buttons-border-radius'?: string
+  '--segmented-buttons-border-width'?: string
+  '--segmented-buttons-error-border-color'?: string
+  '--segmented-buttons-error-color'?: string
+  '--segmented-buttons-error-checked-background'?: string
+  '--segmented-button-text-color'?: string
+  '--segmented-button-checked-background'?: string
+  '--segmented-button-checked-text-color'?: string
+  '--segmented-button-disabled-background'?: string
+  '--segmented-button-disabled-color'?: string
+  '--segmented-button-mini-padding'?: string
+  '--segmented-button-small-padding'?: string
+  '--segmented-button-normal-padding'?: string
+  '--segmented-button-large-padding'?: string
+  '--segmented-button-mini-height'?: string
+  '--segmented-button-small-height'?: string
+  '--segmented-button-normal-height'?: string
+  '--segmented-button-large-height'?: string
+  '--segmented-button-mini-font-size'?: string
+  '--segmented-button-small-font-size'?: string
+  '--segmented-button-normal-font-size'?: string
+  '--segmented-button-large-font-size'?: string
   '--select-scroller-background'?: string
   '--select-scroller-padding'?: string
   '--select-scroller-max-height'?: string