@vyr/design 0.0.1

package/src/components/composables/useScroll.ts

@@ -0,0 +1,46 @@
+import { ref, Ref } from "vue"
+
+const useScroll = (computeTop: () => void, wrapper: Ref<HTMLElement>) => {
+  const scroll = {
+    tick: 0,
+    count: 0,
+    stopWheel: false,
+  }
+  const opacity = ref(0)
+
+  const loop = () => {
+    scroll.tick = requestAnimationFrame(loop)
+    computeTop()
+  }
+  const stop = () => {
+    cancelAnimationFrame(scroll.tick)
+    scroll.tick = 0
+  }
+  const delay = () => {
+    scroll.count--
+    if (scroll.count > 0) return
+    stop()
+  }
+  const layout = (e: WheelEvent) => {
+    if (scroll.stopWheel === true) e.preventDefault()
+    if (scroll.tick === 0) loop()
+    scroll.count++
+    setTimeout(delay, 300);
+  }
+  const move = () => {
+    opacity.value = 0.75
+  }
+  const leave = () => {
+    stop()
+    opacity.value = 0
+  }
+
+  return {
+    opacity,
+    layout,
+    move,
+    leave,
+  }
+}
+
+export { useScroll }

package/src/components/composables/useSearch.ts

@@ -0,0 +1,97 @@
+import { ref } from "vue"
+import { Theme } from "../../theme"
+import { DataGetter, DefineToDefaultProps, Options } from "../types"
+import { cascaderProviderDefault } from "./useProvider"
+import { useTimer } from "./useTimer"
+
+type SearchFunctionProp = (value: string, options: Options) => Options
+interface SearchDefaultProps {
+    /**开启选项的搜索功能
+     * 
+     * false：关闭搜索功能
+     * 
+     * true：使用默认的搜索方法进行搜索
+     * 
+     * function：使用的自定义的方法进行搜索
+     */
+    searchable: SearchFunctionProp | boolean
+}
+
+const searchDefaultProps: DefineToDefaultProps<SearchDefaultProps, boolean> = { searchable: { default: false } }
+
+
+const useSearch = (props: { searchable: SearchFunctionProp | boolean, data: Options }, cascader: typeof cascaderProviderDefault, getter: DataGetter) => {
+    const searchState = ref({
+        /**过滤输入框的当前状态
+         * 
+         * 0: 未进行过滤或本次过滤操作已结束
+         * 
+         * 1: 点击输入框，开启过滤功能
+         * 
+         * 2: 正在输入过滤字符
+         * 
+         * 3: 已停止输入，需要显示匹配的过滤项
+         * 
+         * 4: 输入框失去焦点(选择了过滤项或取消本次选择)
+         */
+        status: 0,
+        timeout: 0,
+        forcedPrompt: false,
+        count: 0,
+        content: '',
+    })
+
+    const startSearch = () => {
+        clearTimeout(searchState.value.timeout)
+        searchState.value.status = 1
+        cascader.value.searchOptions = []
+    }
+    const delaySearch = () => {
+        searchState.value.count--
+        if (searchState.value.count > 0 || props.searchable === false) return
+
+        searchState.value.forcedPrompt = false
+        if (searchState.value.content === '') {
+            searchState.value.status = 1
+            cascader.value.searchOptions = []
+        } else {
+            searchState.value.status = 3
+            const options = props.searchable === true ? cascader.value.getSearchOptions(searchState.value.content, props.data, getter) : props.searchable(searchState.value.content, props.data)
+
+            if (options.length === 0) {
+                searchState.value.forcedPrompt = true
+                options.push({ label: '', value: '', disabled: true })
+            }
+
+            cascader.value.searchOptions = options
+        }
+    }
+    const updateSearch = (value: string) => {
+        searchState.value.count++
+        searchState.value.status = 2
+        searchState.value.content = value
+        searchState.value.timeout = useTimer(delaySearch, 200)
+
+        setTimeout
+    }
+    const delayClear = () => {
+        searchState.value.status = 0
+        searchState.value.content = ''
+        searchState.value.forcedPrompt = false
+        cascader.value.searchOptions = []
+    }
+    const clearSearch = () => {
+        clearTimeout(searchState.value.timeout)
+        searchState.value.status = 4
+        searchState.value.timeout = useTimer(delayClear, Theme.config.animationTime.value)
+    }
+
+    return {
+        searchState,
+        startSearch,
+        updateSearch,
+        clearSearch,
+    }
+}
+
+export { searchDefaultProps, useSearch }

package/src/components/composables/useTimer.ts

@@ -0,0 +1,5 @@
+const useTimer = (handler: TimerHandler, timeout?: number | undefined, ...args: any[]): number => {
+    return window.setTimeout(handler, timeout, ...args)
+}
+
+export { useTimer }

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './types'

package/src/components/singleton/confirm.ts

@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+import { Confirm, confirmKey, getConfirmState } from '../utils'
+import ConfirmVue from '../Confirm.vue'
+
+const confirm = (config: Partial<Confirm> = {}) => {
+    const app = createApp(ConfirmVue)
+
+    const promise = new Promise<Confirm>((resolve) => {
+        const state = getConfirmState(config, (success) => {
+            state.value.visible = false
+            app.unmount()
+            config.value = state.value.value
+            config.success = success
+            resolve(config as Confirm)
+        })
+
+        app.provide(confirmKey, state)
+        app.mount(document.createElement('div'))
+        state.value.visible = true
+    })
+
+    return promise
+}
+
+export { confirm }

package/src/components/singleton/dialog.ts

@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+import { Dialog, dialogKey, getDialogState } from '../utils'
+import DynamicDialog from '../DynamicDialog.vue'
+
+const dialog = (config: Partial<Dialog> = {}) => {
+    const app = createApp(DynamicDialog)
+
+    const promise = new Promise<Dialog>((resolve) => {
+        const state = getDialogState(config, (success) => {
+            state.value.visible = false
+            app.unmount()
+            config.value = state.value.value
+            config.success = success
+            resolve(config as Dialog)
+        })
+
+        app.provide(dialogKey, state)
+        app.mount(document.createElement('div'))
+        state.value.visible = true
+    })
+
+    return promise
+}
+
+export { dialog }

package/src/components/singleton/index.ts

@@ -0,0 +1,5 @@
+export * from './loading'
+export * from './notify'
+export * from './confirm'
+export * from './dialog'
+

package/src/components/singleton/loading.ts

@@ -0,0 +1,36 @@
+import { createApp } from 'vue'
+import { LoadingVue } from '../types'
+import SnowLoading from '../Loading.vue'
+
+class Loading {
+    static show() { }
+    static close() { }
+
+    private count = 0
+    private vm
+
+    constructor() {
+        const app = createApp(SnowLoading)
+        this.vm = app.mount(document.createElement('div')) as unknown as LoadingVue
+    }
+
+    show() {
+        if (this.count === 0) {
+            this.vm.setVisible(true)
+            Loading.show()
+        }
+        this.count++
+    }
+
+    close() {
+        this.count--
+        if (this.count > 0) return
+        this.vm.setVisible(false)
+        this.count = 0
+        Loading.close()
+    }
+}
+
+const loading = new Loading()
+
+export { Loading, loading }

package/src/components/singleton/notify.ts

@@ -0,0 +1,36 @@
+import { createApp } from 'vue'
+import { NotifyVue } from '../types'
+import { NotifySetting } from '../utils'
+import { language } from "../../locale"
+import SnowNotify from '../Notify.vue'
+
+class Notify {
+
+    send(message: string): void
+    send(message: string, type: NotifySetting['type']): void
+    send(message: string, duration: number): void
+    send(message: string, type: NotifySetting['type'], duration: number): void
+    send(message: string, td?: NotifySetting['type'] | number, duration?: number) {
+        const notify = typeof message === 'string' ? { message } : message
+        if (notify.message === '') return console.warn(language.get('notify.send.notMessage'))
+
+        const app = createApp(SnowNotify)
+        const vm = app.mount(document.createElement('div')) as unknown as NotifyVue
+
+        let type
+        typeof td === 'string' ? type = td : duration = td
+
+        const close = () => app.unmount()
+        const setting = new NotifySetting(message, type, duration, close)
+
+        vm.show(setting)
+    }
+
+    setOffset(offset: number) {
+        NotifySetting.offset = offset
+    }
+}
+
+const notify = new Notify()
+
+export { notify }

package/src/components/types/index.ts

@@ -0,0 +1,82 @@
+import { NotifySetting, RightMenuSetting } from "../utils"
+
+type GetPropValue<V> = V | V[]
+type GetPropsValue<T, V> = T extends string | number | boolean | symbol ? T | V : (() => T) | V
+type DefineToDefaultProps<P extends { [k: string]: any } = {}, V = null> = { [K in keyof P]: { default: GetPropsValue<P[K], V> } }
+type ToPartialObject<P extends { [k: string]: any } = {}> = { [K in keyof P]: Partial<P[K]> }
+
+interface DataGetter<T extends any = any> {
+    label(item: T): string
+    value(item: T): string
+    arrow(item: T): boolean
+    disabled(item: T): boolean
+    children(item: T): T[]
+}
+
+interface Option {
+    [k: string]: any
+    label?: string
+    value?: any
+    arrow?: boolean
+    disabled?: boolean
+    children?: Option[]
+}
+interface Options extends Array<Option> { }
+
+interface SelectPopoverLayout {
+    position: string[]
+    width: string
+}
+
+interface CascaderOption extends Option {
+    children?: CascaderOption[]
+}
+interface CascaderOptions extends Array<CascaderOption> { }
+
+interface ValidateCollection { [k: string]: string }
+
+
+interface TreeOption extends Option {
+    [k: string]: any
+    children?: TreeOption[]
+}
+interface TreeOptions extends Array<TreeOption> { }
+interface SubTreeSlots { default?: (props: { item: TreeOption, active: boolean }) => any }
+
+interface DraggableVue {
+    update(x: number, y: number): void
+    show(name: string): void
+    hide(): void
+}
+interface LoadingVue {
+    setVisible(v: boolean): void
+}
+interface RightMenuVue {
+    show(setting: RightMenuSetting): void
+    close(): void
+}
+interface NotifyVue {
+    show(setting: NotifySetting): void
+}
+
+
+export {
+    GetPropValue,
+    GetPropsValue,
+    DefineToDefaultProps,
+    ToPartialObject,
+    DataGetter,
+    Option,
+    Options,
+    SelectPopoverLayout,
+    CascaderOption,
+    CascaderOptions,
+    ValidateCollection,
+    TreeOption,
+    TreeOptions,
+    SubTreeSlots,
+    DraggableVue,
+    LoadingVue,
+    RightMenuVue,
+    NotifyVue,
+}

package/src/components/utils/Cascader.ts

@@ -0,0 +1,52 @@
+import { CascaderOption, CascaderOptions, Options, DataGetter } from '../types'
+
+const getInputValue = (v: string, options: Options, getter: DataGetter): string => {
+    for (const option of options) {
+        if (getter.value(option) === v) return getter.label(option)
+        const children = getter.children(option)
+        if (children.length === 0) continue
+        const value = getInputValue(v, children, getter)
+        if (value) return getter.label(option) + ' / ' + value
+    }
+
+    return ''
+}
+const getSelectOptions = (tree: CascaderOptions, value: CascaderOption['value'], getter: DataGetter, checked: CascaderOptions = []) => {
+
+    for (const item of tree) {
+        if (getter.value(item) === value) {
+            checked.push(item)
+            return checked
+        }
+
+        const children = getter.children(item)
+        if (children.length > 0) getSelectOptions(children, value, getter, checked)
+
+        if (checked.length > 0) {
+            checked.push(item)
+            return checked
+        }
+    }
+
+    return checked
+}
+const getSearchOptions = (value: string, options: CascaderOptions, getter: DataGetter) => {
+    const filterOptions: Options = []
+    for (const option of options) {
+        const children = getter.children(option)
+        if (children.length > 0) {
+            filterOptions.push(...getSearchOptions(value, children, getter))
+        } else {
+            if (getter.disabled(option) === true) continue
+            if (getter.label(option).indexOf(value) > -1) filterOptions.push(option)
+        }
+    }
+
+    return filterOptions
+}
+
+export {
+    getInputValue,
+    getSelectOptions,
+    getSearchOptions,
+}

package/src/components/utils/Confirm.ts

@@ -0,0 +1,41 @@
+import { inject, ref } from "vue"
+import { language } from "../../locale"
+import { Option } from ".."
+
+interface ConfirmOptions extends Array<Option> { }
+
+interface Confirm {
+    type: string
+    title: string
+    message: string
+    value: any
+    options: ConfirmOptions
+    mode: string
+    placeholder: string
+    success: boolean
+}
+
+const confirmKey = Symbol('vyr-confirm')
+
+const getConfirmState = (config: Partial<Confirm>, close = (state: boolean) => { }) => {
+    return ref({
+        visible: false,
+        title: config.title,
+        type: config.type,
+        options: config.options ?? [],
+        message: config.message,
+        mode: config.mode,
+        value: config.value,
+        placeholder: config.placeholder,
+        success: false,
+        close
+    })
+}
+
+const useConfirmState = () => {
+    const confirm = inject(confirmKey, () => { throw language.get('confirm.state.notFound') }) as unknown as ReturnType<typeof getConfirmState>
+
+    return confirm
+}
+
+export { ConfirmOptions, Confirm, confirmKey, getConfirmState, useConfirmState }

package/src/components/utils/Dialog.ts

@@ -0,0 +1,38 @@
+const dialogPrivateWarp = document.body
+const getDialogWrapRect = () => {
+    const rect = {
+        width: dialogPrivateWarp.clientWidth,
+        height: dialogPrivateWarp.clientHeight
+    }
+    return rect
+}
+const getDialogWrapHeight = (maxHeight: string) => {
+
+    let index = maxHeight.indexOf('%')
+    if (index > -1) {
+        const rect = getDialogWrapRect()
+        const radio = parseFloat(maxHeight.slice(0, index))
+        return Math.floor(rect.height * radio / 100)
+    }
+    let number = maxHeight
+    index = maxHeight.indexOf('px')
+    if (index > -1) {
+        number = maxHeight.slice(0, index)
+    }
+    const height = parseFloat(number)
+
+    return isNaN(height) ? 0 : height
+}
+const getDialogHeight = (dom: Element) => {
+    const height = getComputedStyle(dom).height
+    if (!height) return 0
+    const number = (parseInt(height.split('px')[0]))
+    return isNaN(number) ? 0 : number
+}
+
+export {
+    dialogPrivateWarp,
+    getDialogWrapRect,
+    getDialogWrapHeight,
+    getDialogHeight,
+}

package/src/components/utils/DynamicDialog.ts

@@ -0,0 +1,41 @@
+import { inject, ref } from "vue"
+import { language } from "../../locale"
+import { Option } from "../types"
+
+interface DialogOptions extends Array<{
+    label: string
+    name: string
+    componentType: 'input' | 'number' | 'select' | 'cascader' | 'color' | 'image'
+    componentProps: { [k: string]: any }
+    componentData?: Option[] | ((result: { [k: string]: any }) => Option[])
+}> { }
+
+interface Dialog {
+    type: string
+    title: string
+    value: { [k: string]: any }
+    options: DialogOptions
+    success: boolean
+}
+
+const dialogKey = Symbol('vyr-dialog')
+
+const getDialogState = (config: Partial<Dialog>, close = (state: boolean) => { }) => {
+    return ref({
+        visible: false,
+        title: config.title,
+        type: config.type,
+        options: config.options ?? [],
+        value: config.value,
+        success: false,
+        close
+    })
+}
+
+const useDialogState = () => {
+    const dialog = inject(dialogKey, () => { throw language.get('dialog.state.notFound') }) as unknown as ReturnType<typeof getDialogState>
+
+    return dialog
+}
+
+export { DialogOptions, Dialog, dialogKey, getDialogState, useDialogState }

package/src/components/utils/DynamicLayouter.ts

@@ -0,0 +1,5 @@
+const dynamicLayouterlisteners: Array<(...args: any[]) => void> = []
+
+export {
+    dynamicLayouterlisteners,
+}

package/src/components/utils/FloatLayer.ts

@@ -0,0 +1,40 @@
+import { ref } from "vue";
+import { ArrayUtils } from "../../tool";
+
+let floatId = 1
+
+const floatLayer = ref({
+    queue: [] as number[],
+    active: -1,
+})
+
+const generateFloatLayer = () => {
+    return floatId++
+}
+
+const addFloatLayer = (id: number) => {
+    ArrayUtils.insert(floatLayer.value.queue, id)
+}
+
+const removeFloatLayer = (id: number) => {
+    ArrayUtils.remove(floatLayer.value.queue, id)
+}
+
+const seActiveLayer = (id: number) => {
+    removeFloatLayer(id)
+    addFloatLayer(id)
+    floatLayer.value.active = id
+}
+
+const isActiveLayer = (id: number) => {
+    return floatLayer.value.active === id
+}
+
+const computedFloatLayer = (id: number, active = false) => {
+    const i = floatLayer.value.queue.indexOf(id)
+    if (i === -1) return i
+    const z = active ? floatLayer.value.queue.length : i
+    return z * 2 + 1000
+}
+
+export { floatLayer, generateFloatLayer, addFloatLayer, removeFloatLayer, seActiveLayer, isActiveLayer, computedFloatLayer }

package/src/components/utils/InputNumber.ts

@@ -0,0 +1,3 @@
+const inputNumberReExp = /^[-+]?(?:(?=\d|\.\d)(?:\d+\.?\d*|\.\d+)|Infinity)?$/
+
+export { inputNumberReExp }

package/src/components/utils/Notify.ts

@@ -0,0 +1,25 @@
+import { Ref, ref } from "vue"
+
+class NotifySetting {
+    static map = { success: 'success', warning: 'warning', danger: 'shanchu' }
+    static collection: Ref<NotifySetting[]> = ref([])
+    static offset = 0
+
+    readonly type
+    readonly message
+    readonly duration
+    readonly icon
+    readonly close
+    visible = false
+
+
+    constructor(message: string, type: 'success' | 'warning' | 'danger' = 'danger', duration = 3000, close = () => { }) {
+        this.type = type
+        this.message = message
+        this.duration = duration
+        this.icon = NotifySetting.map[type]
+        this.close = close
+    }
+}
+
+export { NotifySetting }

package/src/components/utils/Popover.ts

@@ -0,0 +1,58 @@
+import {
+    popperGenerator,
+    defaultModifiers,
+    OptionsGeneric,
+} from '@popperjs/core/lib/popper-lite';
+import flip from '@popperjs/core/lib/modifiers/flip';
+import modifiers_hide from '@popperjs/core/lib/modifiers/hide';
+import modifiers_offset from '@popperjs/core/lib/modifiers/offset';
+import modifiers_arrow from '@popperjs/core/lib/modifiers/arrow';
+import eventListeners from '@popperjs/core/lib/modifiers/eventListeners';
+import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
+
+const createPopper = popperGenerator({
+    defaultModifiers: [...defaultModifiers, modifiers_offset, modifiers_arrow, modifiers_hide, flip, preventOverflow, eventListeners],
+})
+
+const getArrow = (arrow: boolean, offset: number, enabled: boolean) => {
+    return { name: 'offset', options: { offset: [0, arrow ? offset : 0] }, enabled, }
+}
+const getOptions = (props: any, v = false): Pick<OptionsGeneric<any>, 'modifiers' | 'placement'> => {
+    const defaultMods = [
+        { name: 'arrow', options: { padding: props.arrow ? 5 : 0 }, enabled: v, },
+        { name: 'preventOverflow', options: { padding: 0 }, enabled: v, },
+    ]
+
+    return {
+        placement: props.placement,
+        modifiers: [
+            getArrow(props.arrow, props.offset, v),
+            ...defaultMods,
+            { name: 'eventListeners', enabled: v },
+            { name: 'applyStyles', enabled: v }
+        ]
+    }
+}
+const isContains = (target: any | undefined, list: any[]) => {
+    if (target === undefined) return false
+
+    for (const item of list) {
+        if (item.contains(target)) return true
+    }
+
+    return false
+}
+
+const tooltip = {
+    wrapper: document.createElement('div'),
+    setup() {
+        this.wrapper.setAttribute('class', 'tooltip')
+        this.wrapper.setAttribute('id', 'tooltip')
+        this.wrapper.style.display = 'contents'
+        document.body.appendChild(this.wrapper)
+    }
+}
+tooltip.setup()
+
+export { createPopper, getOptions, isContains, tooltip }
+