zgg-ui/components/z-subsection/z-subsection.ts

2.0.1 正式版本 基于 Vue 3、UniApp 和 TypeScript 开发的多端适配移动端 UI 组件库，旨在提供丰富的组件集合，帮助开发者快速构建多端响应式的移动应用界面

import type { InjectionKey } from 'vue'
import { shallowRef } from 'vue'
import { propsHook, PropsTypeHook } from '../../libs/zHooks'

export interface SubsectionItemRect {
  left: number
  width: number
}

export type subsectionMode = 'default' | 'button'

interface SubsectionProps extends PropsTypeHook {
  color?: string
  activeColor?: string
  disabled?: boolean
  modelValue?: number
  mode?: subsectionMode
  size?: string
  radius?: string
}

interface SubsectionItemProps extends PropsTypeHook {
  color?: string
  activeColor?: string
  disabled?: boolean
  title?: string
}

export type SubsectionSliderRect = SubsectionItemRect

export type SubsectionItemContext = SubsectionItemProps & {
  uid: number
  element: SubsectionItemRect
}

export type SubsectionContext = SubsectionProps & {
  items: SubsectionItemContext[]
  activeUid: number
  addItem: (item: SubsectionItemContext) => void
  removeItem: (uid: number) => void
  setActiveItem: (uid: number) => void
}

export const subsectionContextKey: InjectionKey<SubsectionContext> = Symbol(
  'subsectionContextKey'
)