@vyr/design 0.0.1

package/src/components/Draggable.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="vyr-drag" :style="`left:${state.x}px;top:${state.y}px;`" v-if="state.visible">
+    <vyr-option :label="state.label" :arrow="false"></vyr-option>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { DraggableVue } from './types'
+import VyrOption from './Option.vue'
+
+const state = ref({
+  visible: false,
+  label: '',
+  x: 0,
+  y: 0,
+})
+
+const update = (x: 0, y: 0) => {
+  state.value.x = x
+  state.value.y = y
+}
+const show = (name: '') => {
+  document.body.classList.add('vyr-drag-mouse')
+  state.value.visible = true
+  state.value.label = name
+}
+const hide = () => {
+  document.body.classList.remove('vyr-drag-mouse')
+  state.value.visible = false
+  state.value.label = ''
+}
+
+defineExpose<DraggableVue>({ show, hide, update })
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.vyr-drag {
+  .vyr-font-family;
+  width: 260px;
+  background-color: var(--vyr-blue-color);
+  z-index: 100000;
+  border: 1px solid var(--vyr-border-color);
+  position: absolute;
+  pointer-events: none;
+  cursor: move;
+}
+</style>

package/src/components/Dropdown.vue

@@ -0,0 +1,175 @@
+<template>
+    <div class="vyr-dropdown">
+        <vyr-popover ref="refPopover" :model-value="state.visible" :placement="placement"
+            :popover-class="`vyr-dropdown-popover ${popoverClass}`" :disabled="disabled" :popover-card="popoverCard"
+            :arrow="arrow" :offset="offset" @update:model-value="popoverVisibleChange" @trigger-change="changeTrigger">
+            <template #trigger>
+                <slot v-if="custom" name="default" :visible="state.visible"></slot>
+                <div v-else class="vyr-dropdown-trigger">
+                    <div class="trigger-label">
+                        <slot name="default" :visible="state.visible"></slot>
+                    </div>
+                    <div class="trigger-arrow" v-if="disabled === false">
+                        <i class="vyrfont vyr-arrow-down-bold" :class="{ active: state.visible }"></i>
+                    </div>
+                </div>
+            </template>
+            <slot name="popover" :width="slotWidth">
+                <vyr-options :data="data" :getter="curGetter" :checked="[modelValue]" :width="slotWidth"
+                    :removable="removable" @click="change" @remove="oi => emit('remove', oi)">
+                    <template #default="{ option, emit }">
+                        <slot name="option" :option="option" :emit=emit :close=close></slot>
+                    </template>
+                </vyr-options>
+            </slot>
+        </vyr-popover>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, useTemplateRef, } from 'vue'
+import { Option, Options } from './types';
+import { inputCommonDefaultProps } from './composables/useDefaultProps';
+import { commonDefaultProps, selectCommonDefaultProps, popoverCommonDefaultProps, getterCommonDefaultProps } from './composables/useDefaultProps';
+import { updateValidateItemProvider } from './composables/useProvider';
+import { usePopover, observer } from './composables/usePopover';
+import { useGetter } from './composables/useGetter';
+import VyrPopover from './Popover.vue';
+import VyrOptions from './Options.vue'
+
+const props = defineProps({
+    ...commonDefaultProps,
+    ...selectCommonDefaultProps,
+    ...popoverCommonDefaultProps,
+    ...inputCommonDefaultProps,
+    ...getterCommonDefaultProps,
+    disabled: { default: false },
+    popoverCard: { default: false },
+    popoverWidth: { default: 'auto' },
+    custom: { default: false },
+    removable: { default: false },
+    data: { default(): Options { return [] } },
+})
+
+updateValidateItemProvider(ref({ validate() { } }))
+
+const refPopover = useTemplateRef('refPopover')
+const emit = defineEmits(['update:modelValue', 'change', 'remove', 'show', 'close'])
+const { state, slotWidth, resize } = usePopover(props, refPopover)
+const curGetter = useGetter(props)
+const popoverState = {
+    bind: false,
+    cur: null as Element | null,
+    triggerResize: () => { },
+}
+const changeTrigger = (cur: Element) => {
+    if (popoverState.bind) {
+        unbindResizePopover()
+        popoverState.cur = cur
+        bindResizePopover()
+    } else {
+        popoverState.cur = cur
+    }
+}
+const bindResizePopover = () => {
+    popoverState.bind = true
+    if (popoverState.cur) popoverState.triggerResize = observer.listen(popoverState.cur, resize)
+}
+const unbindResizePopover = () => {
+    popoverState.bind = false
+    if (popoverState.cur) observer.unlisten(popoverState.cur)
+    popoverState.triggerResize = () => { }
+}
+const popoverVisibleChange = (visible: boolean) => {
+    state.value.visible = visible
+    if (visible) {
+        emit('show')
+        bindResizePopover()
+    } else {
+        unbindResizePopover()
+        emit('close')
+    }
+}
+
+
+const close = () => {
+    state.value.visible = false
+}
+const change = (item: Option, e: MouseEvent) => {
+    const value = curGetter.value(item)
+    if (props.modelValue !== value) {
+        emit('update:modelValue', value)
+        emit('change', value)
+    }
+    e.stopPropagation()
+    close()
+}
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+@dropdown-arrow-size: 32px;
+
+.vyr-dropdown {
+    .vyr-font-family;
+    width: 100%;
+    color: var(--vyr-font-color);
+    font-size: var(--vyr-font-size);
+
+    .vyr-dropdown-trigger {
+        cursor: pointer;
+        width: 100%;
+        padding: 0 4px;
+        box-sizing: border-box;
+        display: flex;
+        flex-wrap: nowrap;
+        flex-direction: row;
+
+        .trigger-label {
+            width: calc(~'100% - @{dropdown-arrow-size}');
+        }
+
+        .trigger-arrow {
+            text-align: right;
+            display: flex;
+            flex-wrap: nowrap;
+            flex-direction: row;
+            justify-content: flex-end;
+            align-items: center;
+            align-content: center;
+            width: @dropdown-arrow-size;
+
+            >.vyrfont {
+                font-size: 12px;
+                transition: all var(--vyr-animation-time);
+            }
+
+            >.vyrfont.active {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}
+
+.vyr-dropdown-popover {
+
+    .vyr-options {
+        border-radius: 0;
+    }
+
+    .vyr-options:not(:first-child) {
+        border-left-color: transparent;
+    }
+
+    .vyr-options:first-child {
+        border-top-left-radius: var(--vyr-radius-size);
+        border-bottom-left-radius: var(--vyr-radius-size);
+    }
+
+    .vyr-options:last-child {
+        border-top-right-radius: var(--vyr-radius-size);
+        border-bottom-right-radius: var(--vyr-radius-size);
+    }
+}
+</style>

package/src/components/DynamicDialog.vue

@@ -0,0 +1,113 @@
+<template>
+    <vyr-dialog v-model="state.visible" :mask="false" :draggable="true" width="720px" maxHeight="70%" @close="close">
+        <template #title>
+            <template v-if="state.type === 'warning'">
+                <i class="vyrfont vyr-warning tips-type"></i>
+            </template>{{ state.title }}
+        </template>
+        <vyr-form>
+            <div class="dynamic-item" v-for="(option, i) in state.options" :key="i">
+                <div class="item-label">{{ option.label }}</div>
+                <template v-if="option.componentType === 'image'">
+                    <img class="image" v-bind="option.componentProps">
+                </template>
+                <template v-if="option.componentType === 'input'">
+                    <vyr-input v-model="privateState.data[option.name]" v-bind="option.componentProps"></vyr-input>
+                </template>
+                <template v-if="option.componentType === 'number'">
+                    <vyr-input-number v-model="privateState.data[option.name]" v-bind="option.componentProps"
+                        :data="currentData(option)"></vyr-input-number>
+                </template>
+                <template v-if="option.componentType === 'select'">
+                    <vyr-select v-model="privateState.data[option.name]" v-bind="option.componentProps"
+                        :data="currentData(option)" :searchable="true"></vyr-select>
+                </template>
+                <template v-if="option.componentType === 'cascader'">
+                    <vyr-cascader v-model="privateState.data[option.name]" v-bind="option.componentProps"
+                        :data="currentData(option)" :searchable="true"></vyr-cascader>
+                </template>
+                <template v-if="option.componentType === 'color'">
+                    <vyr-color-picker v-model="privateState.data[option.name]"
+                        v-bind="option.componentProps"></vyr-color-picker>
+                </template>
+            </div>
+        </vyr-form>
+        <template #footer>
+            <vyr-button @click="success">{{ language.get('dialog.button.submit') }}</vyr-button>
+            <vyr-button @click="cencel">{{ language.get('dialog.button.cancel') }}</vyr-button>
+        </template>
+    </vyr-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { DialogOptions, useDialogState } from './utils';
+import { language } from '../locale'
+import VyrDialog from './Dialog.vue';
+import VyrButton from './Button.vue';
+import VyrForm from './Form.vue';
+import VyrInput from './Input.vue'
+import VyrInputNumber from './InputNumber.vue'
+import VyrSelect from './Select.vue'
+import VyrCascader from './Cascader.vue'
+import VyrColorPicker from './ColorPicker.vue'
+
+defineOptions({
+    inheritAttrs: false
+})
+
+const state = useDialogState()
+const privateState = ref({
+    data: state.value.value ?? {},
+    flag: false,
+})
+
+const currentData = (option: DialogOptions[number]) => {
+    if (option.componentData === undefined) return []
+    return Array.isArray(option.componentData) ? option.componentData : option.componentData(privateState.value.data)
+}
+
+const success = () => {
+    privateState.value.flag = true
+    state.value.visible = false
+}
+const cencel = () => {
+    privateState.value.flag = false
+    state.value.visible = false
+}
+const close = () => {
+    state.value.value = privateState.value.data ?? {}
+    state.value.close(privateState.value.flag)
+}
+</script>
+
+<style lang="less" scoped>
+.dynamic-item {
+    width: 100%;
+    margin-bottom: 16px;
+
+    .item-label {
+        color: #c9c9c9;
+        margin-bottom: 8px;
+    }
+
+    .image {
+        max-width: 100%;
+    }
+}
+
+.tips-type {
+    margin: 0 5px 0 0;
+    color: var(--vyr-warning-color);
+}
+
+.content {
+    margin: 10px 0 0;
+
+    .li {
+        display: inline-block;
+        min-height: 30px;
+        margin: 0 10px 0 0;
+    }
+}
+</style>

package/src/components/DynamicLayouter.vue

@@ -0,0 +1,235 @@
+<template>
+    <div ref="refLayouter" class="vyr-dynamic-layouter" :class="`${mode} ${state.enable ? 'enable' : ''}`">
+        <div class="dynamic-wrapper" :style="mainStyle">
+            <slot></slot>
+        </div>
+        <div class="dynamic-sidebar" :style="sidebarStyle">
+            <div :class="`vyr-${mode}-bar ${state.enable ? 'enable' : ''}`" @mousedown.stop.prevent="start"></div>
+            <slot name="sidebar"></slot>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, useTemplateRef, watch } from 'vue';
+import { dynamicLayouterlisteners } from './utils';
+
+const props = defineProps({
+    /**容器侧边栏的宽（高）度 */
+    modelValue: {
+        default: 0,
+    },
+    /**
+     * 容器的布局模式。默认为`horizontal`
+     * 
+     * - vertical：垂直布局，将容器分为上下两部分
+     * - horizontal：水平布局，将容器分为左右两部分
+     */
+    mode: {
+        default: 'horizontal' as 'horizontal' | 'vertical'
+    },
+    /**
+     * 容器的侧边栏，会应用`size`的尺寸。默认为`true`
+     * 
+     * - true：将容器的上部分（左部分）区域设为侧边栏
+     * - false：将容器的下部分（右部分）区域设为侧边栏
+     */
+    sidebar: {
+        default: true,
+    },
+})
+
+const emit = defineEmits(['update:modelValue'])
+const refLayouter = useTemplateRef('refLayouter')
+
+const state = ref({
+    needUpdate: false,
+    enable: false,
+    size: 0,
+    start: new MouseEvent('vyr'),
+    event: new MouseEvent('vyr'),
+    class: [] as string[],
+})
+watch(() => props.modelValue, () => state.value.size = props.modelValue, { immediate: true })
+
+const mainStyle = computed(() => {
+
+    const attr = props.mode === 'horizontal' ? `height` : `width`
+
+    const style = props.sidebar ? `${attr}:${state.value.size}px;` : `${attr}:calc(100% - ${state.value.size}px);`
+
+    return style
+})
+const sidebarStyle = computed(() => {
+
+    const attr = props.mode === 'horizontal' ? `height` : `width`
+
+    const style = props.sidebar ? `${attr}:calc( 100% - ${state.value.size}px);` : `${attr}:${state.value.size}px;`
+
+    return style
+})
+
+const updateSize = () => {
+    state.value.needUpdate = false
+    state.value.size = Math.max(0, state.value.size + compute.size())
+    state.value.start = state.value.event
+    emit('update:modelValue', state.value.size)
+}
+
+const sizeVertical = () => {
+    const clientX = Math.max(compute.rect.left, Math.min(state.value.event.clientX, compute.rect.right))
+    const currentX = Math.max(compute.rect.left, Math.min(state.value.start.clientX, compute.rect.right))
+    const size = clientX - currentX
+
+    return props.sidebar ? size : -size
+}
+const sizeHorizontal = () => {
+    const clientY = Math.max(compute.rect.top, Math.min(state.value.event.clientY, compute.rect.bottom))
+    const currentY = Math.max(compute.rect.top, Math.min(state.value.start.clientY, compute.rect.bottom))
+    const size = clientY - currentY
+    return props.sidebar ? size : -size
+}
+
+const compute = {
+    rect: { left: 0, right: 0, top: 0, bottom: 0 },
+    size: sizeHorizontal,
+}
+
+const start = (event: MouseEvent) => {
+    if (!refLayouter.value) return
+    state.value.enable = true
+    state.value.start = event
+    compute.rect = refLayouter.value.getBoundingClientRect()
+    if (props.mode === 'vertical') {
+        compute.size = sizeVertical
+    } else {
+        compute.size = sizeHorizontal
+    }
+    unsetup()
+    setup()
+}
+const move = (event: MouseEvent) => {
+    event.preventDefault()
+    if (state.value.enable === false || state.value.needUpdate === true) return
+    state.value.needUpdate = true
+    state.value.event = event
+    window.dispatchEvent(new Event('resize'))
+    requestAnimationFrame(updateSize)
+}
+const end = () => {
+    unsetup()
+    state.value.enable = false
+}
+
+const setup = () => {
+    dynamicLayouterlisteners.length = 0
+    dynamicLayouterlisteners.push(move, end)
+    window.addEventListener('mousemove', move)
+    window.addEventListener('mouseup', end)
+}
+const unsetup = () => {
+    window.removeEventListener('mousemove', dynamicLayouterlisteners[0])
+    window.removeEventListener('mouseup', dynamicLayouterlisteners[1])
+    dynamicLayouterlisteners.length = 0
+}
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+@sidebar-bar-size: 6px;
+
+.vyr-dynamic-layouter {
+    .vyr-font-family;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+
+    .dynamic-wrapper {
+        width: 100%;
+        height: 100%;
+    }
+
+    .dynamic-sidebar {
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        position: relative;
+        left: 0;
+        top: 0;
+        box-sizing: border-box;
+        border: 0 solid var(--vyr-border-color);
+
+        .vyr-vertical-bar {
+            width: @sidebar-bar-size;
+            height: 100%;
+            transform: translate(-100%, 0);
+            cursor: ew-resize;
+        }
+
+        .vyr-horizontal-bar {
+            width: 100%;
+            height: @sidebar-bar-size;
+            transform: translate(0, -100%);
+            cursor: ns-resize;
+        }
+
+        .vyr-vertical-bar,
+        .vyr-horizontal-bar {
+            background-color: var(--vyr-active-topic-color);
+            position: absolute;
+            left: 0;
+            top: 0;
+            opacity: 0;
+            transition: all var(--vyr-animation-time);
+            z-index: var(--vyr-z-index);
+        }
+    }
+}
+
+.vyr-dynamic-layouter.vertical {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+
+    .dynamic-sidebar {
+        border-left-width: 1px;
+    }
+}
+
+.vyr-dynamic-layouter.horizontal {
+
+    .dynamic-sidebar {
+        border-top-width: 1px;
+    }
+}
+
+.vyr-dynamic-layouter.enable {
+
+    .dynamic-wrapper,
+    .dynamic-sidebar {
+        pointer-events: none;
+    }
+
+    .dynamic-sidebar>.vyr-vertical-bar.enable {
+        opacity: 1;
+        pointer-events: all;
+    }
+
+    .dynamic-sidebar>.vyr-horizontal-bar.enable {
+        opacity: 1;
+        pointer-events: all;
+    }
+}
+
+.vyr-dynamic-layouter.vertical.enable {
+    cursor: ew-resize !important;
+}
+
+.vyr-dynamic-layouter.horizontal.enable {
+    cursor: ns-resize !important;
+}
+</style>

package/src/components/Form.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="vyr-form">
+        <slot></slot>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import Schema, { RuleItem, ValidateOption, Rules } from 'async-validator'
+import { ValidateCollection } from './types'
+import { updateValidateProvider } from './composables/useProvider'
+import { ArrayUtils } from '../tool';
+
+const props = defineProps({
+    data: { default() { return {} as { [k: string]: any } } },
+    rules: { default() { return [] as unknown as { [k: string]: RuleItem[] | RuleItem } } },
+    rulesOptions: { default() { return { tips: true, icon: true } } },
+})
+
+const addRule = (rule: string) => {
+    ArrayUtils.insert(validateProvider.value.rules, rule)
+}
+const removeRule = (rule: string) => {
+    ArrayUtils.remove(validateProvider.value.rules, rule)
+}
+const validate = async (rules: Rules, data = props.data, options?: ValidateOption) => {
+    let success = true
+    const schema = new Schema(rules)
+    await schema.validate(data, options).catch(({ fields }) => {
+        setErrorItems(fields)
+        success = false
+    })
+
+    return success
+}
+const validateItem = async (rule: string, value: any) => {
+    const rules = { [rule]: props.rules[rule] || {} }
+    const data = { [rule]: value }
+
+    const success = await validate(rules, data)
+    if (success === true) delete validateProvider.value.validateCollection[rule]
+
+    return success
+}
+const validateProvider = ref({
+    rules: [] as string[],
+    validateCollection: {} as ValidateCollection,
+    options: { ...{ tips: true, icon: true }, ...props.rulesOptions },
+    addRule,
+    removeRule,
+    validateItem
+})
+updateValidateProvider(validateProvider)
+
+const setErrorItems = (fields: any) => {
+    for (const rule of Object.keys(fields)) {
+        validateProvider.value.validateCollection[rule] = fields[rule][0].message
+    }
+}
+const validator = async (options?: ValidateOption) => {
+    let ruleCount = 0
+    const ruleItems: Rules = {}
+    for (const rule of validateProvider.value.rules) {
+        const ruleItem = props.rules[rule] || {}
+        if (rule === undefined) continue
+        ruleItems[rule] = ruleItem
+        ruleCount++
+    }
+    if (ruleCount === 0) return true
+
+    const success = await validate(ruleItems, props.data, options)
+    if (success === true) validateProvider.value.validateCollection = {}
+
+    return success
+
+}
+const reset = () => validateProvider.value.validateCollection = {}
+defineExpose({ validator, reset })
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.vyr-form {
+    .vyr-font-family;
+    width: 100%;
+}
+</style>