@vyr/design 0.0.1

package/src/components/common/DraggableController.ts

@@ -0,0 +1,113 @@
+import { createApp } from 'vue'
+import { AdditionalData, DraggableEndType, Draggable } from '../../tool'
+import { DraggableVue } from '../types'
+import SnowDraggable from '../Draggable.vue'
+
+const SnowDraggableApp = createApp(SnowDraggable)
+const viewer = SnowDraggableApp.mount(document.createElement('div'))
+document.body.appendChild(viewer.$el)
+
+type DraggableTick = (e: MouseEvent) => void
+
+class DraggableController {
+  static label = ''
+  static id = ''
+  static needMove = false
+  static enabled = false
+  static executed = false
+  static dragData: AdditionalData | null = null
+  static viewer = viewer as unknown as DraggableVue
+  static mouse = { x: 0, y: 0 }
+  static mouseStartDistance = 2
+  static tick?: DraggableTick
+
+  /**启动托拽功能 */
+  static start = <T extends AdditionalData = AdditionalData>(dragData: T, group: Draggable, label: string, e: MouseEvent) => {
+    if (group.starter(dragData) === false) return
+    window.addEventListener('mousemove', this.move)
+    window.addEventListener('mouseup', this.cancel)
+
+    this.needMove = true
+    this.mouse.x = e.clientX
+    this.mouse.y = e.clientY
+    this.dragData = dragData
+    this.label = label
+    this.id = group.id
+  }
+
+  /**进入目标对象时触发
+   * 
+   * @param targetData 进入的目标对象
+   * @param group 托拽功能使用的拖拽组
+   * @returns 返回值决定了托拽对象能否被放置在目标对象
+   */
+  static enter = <T extends AdditionalData = AdditionalData>(targetData: T, group: Draggable, tick?: DraggableTick, e?: MouseEvent) => {
+    if (this.enabled === false || this.dragData === null) return false
+    if (tick !== undefined) {
+      this.tick = tick
+      if (e !== undefined) tick(e)
+    }
+    return group.validator({ id: this.id, data: this.dragData }, { id: group.id, data: targetData })
+  }
+
+  /**离开目标对象时触发 */
+  static leave = <T extends AdditionalData = AdditionalData>(targetData: T, group: Draggable) => {
+    if (this.enabled === false || this.dragData === null) return
+    this.tick = undefined
+  }
+
+  /**托拽功能启动后鼠标移动时触发 */
+  static move = (e: MouseEvent) => {
+    if (this.executed === true) return
+    this.executed = true
+    requestAnimationFrame(() => this.executed = false)
+
+    if (this.needMove === true) {
+      const dx = Math.abs(e.clientX - this.mouse.x)
+      const dy = Math.abs(e.clientY - this.mouse.y)
+      const min = Math.min(dx, dy, this.mouseStartDistance)
+      if (min < this.mouseStartDistance) return
+      this.needMove = false
+      this.enabled = true
+      this.viewer.show(this.label)
+    }
+    if (this.tick !== undefined) this.tick(e)
+    this.viewer.update(e.clientX, e.clientY)
+  }
+
+  /**托拽功能结束后触发，若成功完成托拽则会触发拖拽组的`finished`方法 */
+  static end = <T extends AdditionalData = AdditionalData>(targetData: T, group: Draggable, type: DraggableEndType = 'insert') => {
+    if (this.enabled === true && this.dragData !== null) {
+      const drag = { id: this.id, data: this.dragData }
+      const target = { id: group.id, data: targetData }
+      if (group.validator(drag, target) === true) group.finished(drag, target, type)
+    }
+    this.cancel()
+  }
+
+  /**对本次的托拽类型进行格式化验证 */
+  static limit = <T extends AdditionalData = AdditionalData>(targetData: T, group: Draggable, type: DraggableEndType = 'insert') => {
+    if (this.enabled === true && this.dragData !== null) {
+      const drag = { id: this.id, data: this.dragData }
+      const target = { id: group.id, data: targetData }
+      return group.limit(drag, target, type)
+    }
+
+    return type
+  }
+
+  static cancel = () => {
+    window.removeEventListener('mouseup', this.cancel)
+    window.removeEventListener('mousemove', this.move)
+
+    this.id = ''
+    this.needMove = false
+    this.enabled = false
+    this.executed = false
+    this.dragData = null
+    this.tick = undefined
+    this.viewer.hide()
+  }
+}
+
+export { DraggableController }

package/src/components/common/ResizeListener.ts

@@ -0,0 +1,49 @@
+interface ResizeEntryObject {
+  rect: DOMRect,
+  target: Element
+}
+
+class ResizeListener {
+  private registry = new WeakMap<Element, (obj: ResizeEntryObject) => void>()
+  private debounce = false
+  readonly observer
+
+  constructor() {
+    this.observer = new ResizeObserver(this.handler)
+  }
+
+  private handler = (entrys: ResizeObserverEntry[]) => {
+    //防止回调形成无限循环
+    if (this.debounce === true) return
+    this.debounce = true
+    setTimeout(() => this.callback(entrys), 0)
+  }
+  private callback = (entrys: ResizeObserverEntry[]) => {
+    this.debounce = false
+    for (const entry of entrys) this.trigger(entry.target)
+  }
+
+  trigger(el: Element) {
+    const listener = this.registry.get(el)
+    if (listener === undefined) return
+    const reo: ResizeEntryObject = { rect: el.getBoundingClientRect(), target: el }
+    listener(reo)
+  }
+
+  listen(el: Element, listener: (obj: ResizeEntryObject) => void) {
+    this.registry.set(el, listener)
+    this.observer.observe(el)
+
+    return () => this.trigger(el)
+  }
+
+  unlisten(el: Element) {
+    this.registry.delete(el)
+    this.observer.unobserve(el)
+  }
+
+  dispose() {
+    this.observer.disconnect()
+  }
+}
+export { ResizeEntryObject, ResizeListener }

package/src/components/composables/useDefaultProps.ts

@@ -0,0 +1,179 @@
+import { computed, ref } from "vue"
+import { Placement } from "@popperjs/core/lib"
+import { DataGetter, DefineToDefaultProps, GetPropValue, ToPartialObject, TreeOption, TreeOptions } from '../types'
+import { InputCommonProvider, useProvider } from "./useProvider"
+import { CommonProvider, Provider } from "./useProvider"
+import { MarginStyle } from "./useMarginStyle"
+import { Draggable } from "../../tool"
+import { language } from "../../locale"
+
+const getterCommonDefaultProps = {
+    getter: { default: () => { return {} as Partial<DataGetter> } }
+}
+
+interface CheckedCommonProps {
+    modelValue: GetPropValue<string | number | boolean>,
+    value: string | number | boolean
+}
+const checkedCommonDefaultProps: DefineToDefaultProps<CheckedCommonProps> = {
+    modelValue: { default: false },
+    value: { default: true },
+}
+
+const commonDefaultProps: DefineToDefaultProps<Omit<Provider, 'row' | 'label' | 'input'>> = {
+    clearable: { default: null },
+    readonly: { default: null },
+    readonlyClearable: { default: null },
+}
+
+const rowCommonDefaultProps: DefineToDefaultProps<Provider['row']> = {
+    gutter: { default: null },
+    margin: { default: null },
+}
+
+const labelCommonDefaultProps: DefineToDefaultProps<Provider['label']> = {
+    width: { default: null },
+    align: { default: null },
+}
+
+const inputCommonDefaultProps: DefineToDefaultProps<Provider['input']> = {
+    width: { default: null },
+    draggable: { default: false },
+    /** 拖拽属性的路径，支持以下写法
+     * - property 普通对象的属性
+     * - propertyA.property 嵌套对象的属性
+     * - property[0].property 数组对象的属性
+     */
+    dragkey: { default: '' },
+}
+
+const inputDefaultProps = {
+    modelValue: { default: '' } as { default: any },
+    placeholder: { default: language.get('input.placeholder') },
+}
+
+const selectCommonDefaultProps = {
+    modelValue: { default: '' } as { default: any },
+    placeholder: { default: language.get('select.placeholder') },
+}
+
+const treeCommonDefaultProps = {
+    /**树结构的数据 */
+    data: { default() { return [] as TreeOptions } },
+    /**树的修改模式
+     * 
+     * close: 关闭模式
+     * 
+     * edit: 编辑模式
+     * 
+     * add: 新增模式
+     * 
+     */
+    modify: { default: 'close' },
+    /**开启修改模式后需要操作的项 */
+    modifyValue: { default: '' },
+    /**拖拽功能所需的拖拽组 */
+    draggable: { default: false as false | Draggable },
+    /**节点的可见性 */
+    visible: { default() { return (item: TreeOption): boolean => { return true } } },
+    /**节点是否需要警告 */
+    warning: { default() { return (item: TreeOption): boolean => { return false } } },
+    multiple: { default: false }
+}
+
+const scrollCommonDefaultProps = {
+    margin: { default: 0 as MarginStyle },
+    padding: { default: 0 as MarginStyle },
+}
+
+const maskCommonDefaultProps = {
+    mask: { default: true },
+    visible: { default: false },
+}
+
+const dialogCommonDefaultProps = {
+    /**模态框 */
+    mask: { default: false },
+    header: { default: 60 },
+    footer: { default: 55 },
+    width: { default: '860px' },
+    height: { default: 'auto' },
+    maxHeight: { default: '60%' },
+    margin: { default: 10 as MarginStyle },
+    padding: { default: 10 as MarginStyle },
+}
+
+const popoverCommonDefaultProps = {
+    placement: { default: 'bottom' as Placement },
+    popoverClass: { default: '' },
+    arrow: { default: true },
+    offset: { default: 6 },
+}
+
+interface ProviderProps extends DefineToDefaultProps<ToPartialObject<Provider>> { }
+const providerDefaultProps: ProviderProps = {
+    ...commonDefaultProps,
+    input: { default: null },
+    label: { default: null },
+    row: { default: null },
+}
+
+const showClear = (clearable: boolean, readonly: boolean, readonlyClearable: boolean, value?: any) => {
+    if (value === undefined || value === null || value === '') return false
+
+    if (readonly === false) return clearable
+
+    return readonlyClearable ? clearable : false
+}
+
+const useCommonProps = (props: CommonProvider) => {
+    const provider = useProvider()
+    const curReadonly = computed(() => props.readonly === null ? provider.value.readonly : props.readonly)
+    const curClearable = computed(() => props.clearable === null ? provider.value.clearable : props.clearable)
+    const curReadonlyClearable = computed(() => props.readonlyClearable === null ? provider.value.readonlyClearable : props.readonlyClearable)
+
+    return { curReadonly, curClearable, curReadonlyClearable, showClear }
+}
+const useCommonPropsOnInput = (props: CommonProvider) => {
+    const provider = useProvider()
+    const state = ref({ mouseInInput: false })
+
+    const enterInput = () => state.value.mouseInInput = true
+
+    const leaveInput = () => state.value.mouseInInput = false
+
+    const curReadonly = computed(() => props.readonly === null ? provider.value.readonly : props.readonly)
+    const curClearable = computed(() => {
+        if (state.value.mouseInInput === false) return false
+
+        return props.clearable === null ? provider.value.clearable : props.clearable
+    })
+    const curReadonlyClearable = computed(() => props.readonlyClearable === null ? provider.value.readonlyClearable : props.readonlyClearable)
+
+    return { curReadonly, curClearable, curReadonlyClearable, enterInput, leaveInput, showClear }
+}
+const useInputCommonProps = (props: InputCommonProvider) => {
+    const provider = useProvider()
+    const curInputWidth = computed(() => props.width === null ? provider.value.input.width : props.width)
+    return { curInputWidth }
+}
+
+export {
+    commonDefaultProps,
+    getterCommonDefaultProps,
+    inputDefaultProps,
+    inputCommonDefaultProps,
+    labelCommonDefaultProps,
+    rowCommonDefaultProps,
+    selectCommonDefaultProps,
+    checkedCommonDefaultProps,
+    treeCommonDefaultProps,
+    scrollCommonDefaultProps,
+    maskCommonDefaultProps,
+    dialogCommonDefaultProps,
+    popoverCommonDefaultProps,
+    providerDefaultProps,
+    useCommonProps,
+    useCommonPropsOnInput,
+    useInputCommonProps,
+}

package/src/components/composables/useDraggable.ts

@@ -0,0 +1,65 @@
+import { Ref, ref } from "vue"
+import { TreeOption, DataGetter } from "../types"
+import { TreeProvider } from './useProvider'
+import { DraggableController } from "../common/DraggableController"
+import { useTimer } from "./useTimer"
+import { Draggable, DraggableEndType } from "../../tool"
+
+const useDraggable = (props: { draggable: false | Draggable, getter: DataGetter }, treeProvider: Ref<TreeProvider>) => {
+    const drag = ref({
+        id: 0,
+        value: '',
+        type: 'insert' as DraggableEndType,
+    })
+    const resetDraggable = () => {
+        drag.value.value = ''
+        drag.value.type = 'insert'
+    }
+    const mousedown = (item: TreeOption, e: MouseEvent) => {
+        if (props.draggable === false || e.button !== 0) return
+        DraggableController.start(item, props.draggable, props.getter.label(item), e)
+    }
+    const mouseup = (item: TreeOption, e: MouseEvent) => {
+        if (DraggableController.enabled === false || props.draggable === false) return
+        clearTimeout(drag.value.id)
+
+        DraggableController.end(item, props.draggable, drag.value.type)
+        resetDraggable()
+    }
+    const mouseenter = (item: TreeOption, e: MouseEvent) => {
+        if (DraggableController.enabled === false || props.draggable === false) return
+        drag.value.id = useTimer(() => treeProvider.value.handleExpand(item), 1000);
+
+        const draggable = props.draggable
+        const tick = (move: MouseEvent) => {
+            if (!(e.target instanceof Element) || !DraggableController.dragData) return
+            const rect = e.target.getBoundingClientRect()
+            const y = move.clientY - rect.top
+            const radio = y / rect.height
+
+            const adjacencies = treeProvider.value.getAdjacencies(DraggableController.dragData, item) ?? 0
+
+            if (radio < 0.3) {
+                drag.value.type = adjacencies === 1 ? 'insert' : 'insertBefore'
+            } else if (radio > 0.7) {
+                drag.value.type = adjacencies === -1 ? 'insert' : 'insertAfter'
+            } else {
+                drag.value.type = 'insert'
+            }
+
+            drag.value.type = DraggableController.limit(item, draggable, drag.value.type)
+        }
+        drag.value.value = DraggableController.enter(item, draggable, tick, e) ? props.getter.value(item) : ''
+    }
+    const mouseleave = (item: TreeOption, e: MouseEvent) => {
+        if (DraggableController.enabled === false || props.draggable === false) return
+        clearTimeout(drag.value.id)
+
+        DraggableController.leave(item, props.draggable)
+        resetDraggable()
+    }
+
+    return { drag, mousedown, mouseup, mouseenter, mouseleave }
+}
+
+export { useDraggable }

package/src/components/composables/useGetter.ts

@@ -0,0 +1,15 @@
+import { DataGetter } from '../types'
+
+const defaultGetter: DataGetter = {
+    label(item) { return item.label },
+    value(item) { return item.value },
+    disabled(item) { return item.disabled },
+    children(item) { return item.children ?? [] },
+    arrow(item) { return true },
+}
+
+const useGetter = (props?: { getter: Partial<DataGetter> }) => {
+    return props === undefined ? defaultGetter : Object.assign({}, defaultGetter, props.getter)
+}
+
+export { defaultGetter, useGetter }

package/src/components/composables/useMarginStyle.ts

@@ -0,0 +1,45 @@
+import { computed } from "vue"
+
+type MarginStyle = number | string
+
+const parseMarginStyleArray = (style: string) => {
+    const clips = style.split(',')
+    const margin: number[] = []
+    for (const num of clips) {
+        const value = parseInt(num)
+        if (isNaN(value)) continue
+        margin.push(value)
+    }
+    if (margin.length === 0) {
+        return [0, 0, 0, 0]
+    } else if (margin.length === 1) {
+        const size = margin[0]
+        return [size, size, size, size]
+    } else if (margin.length === 2) {
+        const top = margin[0]
+        const left = margin[1]
+        return [top, left, top, left]
+    } else if (margin.length === 3) {
+        const left = margin[1]
+        return [margin[0], left, margin[2], left]
+    } else {
+        return [margin[0], margin[1], margin[2], margin[3]]
+    }
+}
+
+const joinMarginStyle = (padding: number[], type: 'padding' | 'margin' = 'padding') => {
+    return `${type}:${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px;`
+}
+
+const compileMarginStyle = (style: MarginStyle) => {
+    return typeof style === 'string' ? parseMarginStyleArray(style) : [style, style, style, style]
+}
+
+const useMarginStyle = (props: { margin: MarginStyle, padding: MarginStyle }) => {
+    const marginStyle = computed(() => joinMarginStyle(compileMarginStyle(props.margin)))
+    const paddingStyle = computed(() => joinMarginStyle(compileMarginStyle(props.padding)))
+
+    return { marginStyle, paddingStyle }
+}
+
+export { MarginStyle, compileMarginStyle, joinMarginStyle, useMarginStyle }

package/src/components/composables/usePopover.ts

@@ -0,0 +1,33 @@
+import { State } from "@popperjs/core";
+import { computed, Ref, ref } from "vue"
+import { ResizeListener, ResizeEntryObject } from '../common/ResizeListener';
+import { useCascaderProvider } from "./useProvider";
+
+interface PopoverExpose {
+    update: () => Promise<Partial<State>>
+    position: () => string[]
+}
+
+const observer = new ResizeListener()
+const usePopover = (props: { popoverWidth: string }, refPopover: Ref<PopoverExpose | null>) => {
+    const cascaderProvider = useCascaderProvider()
+    const state = ref({ visible: false, width: 'auto' })
+    const slotWidth = computed(() => props.popoverWidth === 'auto' ? state.value.width : props.popoverWidth)
+
+    const resize = (entry: ResizeEntryObject) => {
+        if (!refPopover.value) return
+
+        if (props.popoverWidth === 'auto') {
+            state.value.width = entry.rect.width + 'px'
+        }
+
+        refPopover.value.update().then(() => {
+            const position = refPopover.value?.position() ?? ['bottom', 'start']
+            cascaderProvider.value.getPopoverLayout({ position, width: slotWidth.value })
+        })
+    }
+
+    return { state, slotWidth, cascaderProvider, resize }
+}
+
+export { PopoverExpose, usePopover, observer }

package/src/components/composables/useProvider.ts

@@ -0,0 +1,186 @@
+import { computed, ComputedRef, DefineProps, inject, provide, ref, Ref } from "vue"
+import { DataGetter, Options, SelectPopoverLayout, ValidateCollection, TreeOption, TreeOptions } from '../types'
+import { MarginStyle } from "./useMarginStyle"
+import { Listener, Draggable } from "../../tool"
+
+interface CommonProvider {
+    /**开启组件的清空功能 */
+    clearable: boolean
+    /**将组件设为只读 */
+    readonly: boolean
+    /**组件为只读时是否清空 */
+    readonlyClearable: boolean
+}
+
+interface InputCommonProvider {
+    /**输入框的宽度 */
+    width: string
+    draggable: false | Draggable
+    /** 拖拽属性的路径，支持以下写法
+     * - property 普通对象的属性
+     * - propertyA.property 嵌套对象的属性
+     * - property[0].property 数组对象的属性
+     */
+    dragkey: string,
+}
+
+interface LabelCommonProvider {
+    /**标签的宽度 */
+    width: number
+    /**标签的对齐方式 */
+    align: 'left' | 'center' | 'right'
+}
+
+interface RowCommonProvider {
+    /**行组件的外边距 */
+    margin: MarginStyle
+    /**行组件内每一列的间隔 */
+    gutter: number
+}
+
+interface Provider extends CommonProvider {
+    /**input组件的属性 */
+    input: InputCommonProvider
+    /**label组件的属性 */
+    label: LabelCommonProvider
+    /**row组件的属性 */
+    row: RowCommonProvider
+}
+const provider = Symbol()
+const providerDefault: Ref<Provider> = ref({
+    clearable: false,
+    readonly: false,
+    readonlyClearable: false,
+    disabled: false,
+    input: { width: '100%', draggable: false, dragkey: '' },
+    label: { width: 60, align: 'left' },
+    row: { gutter: 10, margin: '0,0,24,0' },
+    card: { margin: '0,0,0,0' },
+})
+const useProvider = () => inject(provider, providerDefault)
+const traverseMerge = <T extends { [k: string | symbol]: any } = {}>(target: T, source: { [k: string | symbol]: any }) => {
+    const mergeData = { ...target }
+    const keys = Object.keys(source) as Array<keyof T>
+
+    for (const key of keys) {
+        let value = source[key]
+
+        if (value === null || value === undefined) continue
+
+        mergeData[key] = typeof value === 'object' ? traverseMerge(target[key], value) : value
+    }
+
+    return mergeData
+}
+const updateProvider = (props: Ref<DefineProps<Provider, keyof Provider>>) => {
+    const providerData = inject(provider, providerDefault)
+
+    const merginProvider = computed(() => {
+        return traverseMerge(providerData.value, props.value)
+    })
+
+    provide(provider, merginProvider)
+}
+export { CommonProvider, Provider, InputCommonProvider, providerDefault, useProvider, updateProvider }
+
+const rowProvider = Symbol()
+const rowProviderDefault = ref({ gutter: 10, count: 0 })
+const updateRowProvider = (provider: typeof rowProviderDefault) => provide(rowProvider, provider)
+const useRowProvider = () => inject(rowProvider, rowProviderDefault)
+export { updateRowProvider, useRowProvider }
+
+interface CheckedGroupProvider {
+    change: (value: any) => void,
+    checked: (value: any) => boolean
+}
+const checkedGroupProvider = Symbol()
+const updateCheckedGroupProvider = (provider: Ref<CheckedGroupProvider>) => provide(checkedGroupProvider, provider)
+const useCheckedGroupProvider = () => inject<Ref<CheckedGroupProvider> | null>(checkedGroupProvider, null)
+export { updateCheckedGroupProvider, useCheckedGroupProvider }
+
+const cascaderProvider = Symbol()
+const cascaderProviderDefault = ref({
+    getPopoverLayout(layout: SelectPopoverLayout) { },
+    getInputValue(value: string, options: Options, getter: DataGetter) {
+        for (const option of options) {
+            if (getter.value(option) === value) return getter.label(option)
+        }
+        return value
+    },
+    searchOptions: [] as Options,
+    getSearchOptions(value: string, options: Options, getter: DataGetter) {
+        const filterOptions: Options = []
+        for (const option of options) {
+            if (getter.disabled(option) === true) continue
+            if (getter.label(option).indexOf(value) === -1) continue
+            filterOptions.push(option)
+        }
+
+        return filterOptions
+    }
+})
+const updateCascaderProvider = (provider: typeof cascaderProviderDefault) => provide(cascaderProvider, provider)
+const useCascaderProvider = () => inject(cascaderProvider, ref({ ...cascaderProviderDefault.value, searchOptions: [] }))
+export { cascaderProviderDefault, updateCascaderProvider, useCascaderProvider }
+
+interface TreeProvider {
+    handleClick(item: TreeOption, e: MouseEvent): void
+    handleModify(v: string, item: TreeOption): void
+    handleRightClick(item: TreeOption, e: MouseEvent): void
+    handleChange(items: TreeOption[]): void
+    handleExpand(item: TreeOption): void
+    /**获取`location`节点相对`item`节点的邻接关系`(-1 1 0)` */
+    getAdjacencies(location: TreeOption, item: TreeOption, tree?: TreeOptions): number | null
+}
+const treeProvider = Symbol()
+const treeProviderDefault: Ref<TreeProvider> = ref({
+    handleClick(item, e) { },
+    handleModify(v, item) { },
+    handleRightClick(item, e) { },
+    handleChange() { },
+    handleExpand(item) { },
+    getAdjacencies(location, item, tree) { return 0 },
+})
+const updateTreeProvider = (provider: Ref<TreeProvider>) => provide(treeProvider, provider)
+const useTreeProvider = () => inject(treeProvider, treeProviderDefault)
+export { TreeProvider, updateTreeProvider, useTreeProvider }
+
+const popoverProvider = Symbol()
+const popoverProviderDefault = ref({
+    autoClose: true,
+    useFlexLayout: false,
+    appendToTooltip: true,
+})
+const updatePopoverProvider = (provider: typeof popoverProviderDefault) => provide(popoverProvider, provider)
+const usePopoverProvider = () => inject(popoverProvider, popoverProviderDefault)
+export { popoverProviderDefault, updatePopoverProvider, usePopoverProvider }
+
+interface FlotaLayerProvider {
+    listener: Listener<{ move(): void }>
+    layer: ComputedRef<number>
+}
+const flotaLayerProvider = Symbol()
+const updateFlotaLayerProvider = (provider: FlotaLayerProvider) => provide(flotaLayerProvider, provider)
+const useFlotaLayerProvider = () => inject<FlotaLayerProvider | null>(flotaLayerProvider, null)
+export { FlotaLayerProvider, updateFlotaLayerProvider, useFlotaLayerProvider }
+
+const validateProvider = Symbol()
+const validateProviderDefault = ref({
+    options: { tips: true, icon: true },
+    rules: [] as string[],
+    validateCollection: {} as ValidateCollection,
+    addRule(rule: string) { },
+    removeRule(rule: string) { },
+    validateItem(rule: string, value: any) { }
+})
+const updateValidateProvider = (provider: typeof validateProviderDefault) => provide(validateProvider, provider)
+const useValidateProvider = () => inject(validateProvider, validateProviderDefault)
+export { updateValidateProvider, useValidateProvider }
+
+const validateItemProvider = Symbol()
+const validateItemProviderDefault = ref({
+    validate(value: any) { }
+})
+const updateValidateItemProvider = (provider: typeof validateItemProviderDefault) => provide(validateItemProvider, provider)
+const useValidateItemProvider = () => inject(validateItemProvider, validateItemProviderDefault)
+export { updateValidateItemProvider, useValidateItemProvider }