@vyr/design 0.0.1

package/src/components/ColorPicker.vue

@@ -0,0 +1,331 @@
+<template>
+    <vyr-popover popover-class="color-picker-popover" trigger="click" :disabled="curReadonly">
+        <template #trigger>
+            <div class="vyr-color-picker" :class="[width]" v-bind="$attrs">
+                <div class="vyr-picker-border">
+                    <div class="color-value" :style="state.color ? `background:${state.color};` : ``"></div>
+                </div>
+            </div>
+        </template>
+        <div class="color-picker">
+            <div class="picker-wrapper" :style="`width:${state.width}px;`">
+                <div class="picker-panel" :class="{ 'active': state.panel.started }"
+                    :style="`height:${state.height}px;background:hsl(${state.hue.value},100%,50%);`"
+                    @mousedown.prevent="changePanel">
+                    <div class="picker-panel-white"></div>
+                    <div class="picker-panel-black"></div>
+                    <div class="picker-cursor" :style="`top:${state.panel.top}px;left:${state.panel.left}px;`"
+                        @mousedown="startPanel"></div>
+                </div>
+                <div class="picker-bar" :class="{ 'active': state.hue.started }" @mousedown.prevent="changeHue">
+                    <div class="picker-hue" :style="`left:${state.hue.left}px;`" @mousedown="startHue">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </vyr-popover>
+</template>
+
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { useProvider } from './composables/useProvider';
+import { Color } from '../tool';
+import VyrPopover from './Popover.vue'
+
+defineOptions({
+    inheritAttrs: false
+})
+
+const props = defineProps({
+    modelValue: { default: '' },
+    readonly: { default: null as boolean | null },
+    width: { default: 'auto' },
+    opacity: { default: false },
+})
+const provider = useProvider()
+const curReadonly = computed(() => props.readonly === null ? provider.value.readonly : props.readonly)
+const emit = defineEmits(['update:modelValue'])
+const state = ref({
+    color: '',
+    event: new MouseEvent(''),
+    width: 280,
+    height: 180,
+    panel: {
+        top: 0,
+        left: 0,
+        saturation: 0,
+        value: 0,
+        started: false,
+        xStart: 0,
+        xEnd: 0,
+        yStart: 0,
+        yEnd: 0,
+    },
+    hue: {
+        left: 0,
+        value: 0,
+        started: false,
+        start: 0,
+        end: 0,
+    },
+    opacity: 1,
+    next: false,
+})
+
+const watchModelValue = () => {
+    if (!props.modelValue || props.modelValue === state.value.color) return
+    state.value.color = props.modelValue
+
+    const hsv = new Color(props.modelValue).toHsv()
+    state.value.hue.left = Math.round((hsv.h / 360) * state.value.width)
+    state.value.hue.value = hsv.h
+
+    state.value.panel.saturation = hsv.s
+    state.value.panel.left = Math.round((hsv.s) * state.value.width)
+
+    state.value.panel.value = hsv.v
+    state.value.panel.top = Math.round((1 - hsv.v) * state.value.height)
+}
+watch(() => props.modelValue, watchModelValue, { immediate: true })
+
+const update = () => {
+    const hex = new Color({ h: state.value.hue.value, s: state.value.panel.saturation, v: state.value.panel.value }).toHexString()
+    state.value.color = hex
+    emit('update:modelValue', hex)
+}
+
+const changePanel = (e: MouseEvent) => {
+    if (curReadonly.value === true) return
+    startPanel(e)
+    movePanel(e)
+}
+const startPanel = (e: MouseEvent) => {
+    if (curReadonly.value === true) return
+
+    state.value.hue.started = false
+    state.value.panel.started = true
+    const target = (e.target as HTMLElement).parentElement
+    const rect = target?.getBoundingClientRect() as DOMRect
+    state.value.panel.xStart = rect.left
+    state.value.panel.xEnd = rect.right
+    state.value.panel.yStart = rect.top
+    state.value.panel.yEnd = rect.bottom
+}
+const movePanel = (e: MouseEvent) => {
+    let curX = Math.min(e.clientX, state.value.panel.xEnd)
+    curX = Math.max(state.value.panel.xStart, curX)
+    state.value.panel.left = curX - state.value.panel.xStart
+
+    let curY = Math.min(e.clientY, state.value.panel.yEnd)
+    curY = Math.max(state.value.panel.yStart, curY)
+    state.value.panel.top = curY - state.value.panel.yStart
+
+    setSaturation()
+}
+const setSaturation = () => {
+    state.value.panel.saturation = state.value.panel.left / state.value.width
+    state.value.panel.value = 1 - state.value.panel.top / state.value.height
+
+    update()
+}
+
+const changeHue = (e: MouseEvent) => {
+    if (curReadonly.value === true) return
+    startHue(e)
+    moveHue(e)
+}
+const startHue = (e: MouseEvent) => {
+    if (curReadonly.value === true) return
+    state.value.panel.started = false
+    state.value.hue.started = true
+    const target = (e.target as HTMLElement).parentElement
+    const rect = target?.getBoundingClientRect() as DOMRect
+    state.value.hue.start = rect.left
+    state.value.hue.end = rect.right
+}
+const moveHue = (e: MouseEvent) => {
+    let cur = Math.min(e.clientX, state.value.hue.end)
+    cur = Math.max(state.value.hue.start, cur)
+    state.value.hue.left = cur - state.value.hue.start
+    setHue()
+}
+const setHue = () => {
+    state.value.hue.value = Math.round((state.value.hue.left / state.value.width) * 360)
+    update()
+}
+
+const stop = (e: MouseEvent) => {
+    state.value.panel.started = false
+    state.value.hue.started = false
+}
+const move = (e: MouseEvent) => {
+    state.value.event = e
+    if (state.value.next === true) return
+    state.value.next = true
+    requestAnimationFrame(() => {
+        if (state.value.hue.started === true) moveHue(state.value.event)
+        if (state.value.panel.started === true) movePanel(state.value.event)
+        state.value.next = false
+    })
+}
+
+window.addEventListener('mousemove', move)
+window.addEventListener('mouseup', stop)
+window.addEventListener('mouseleave', stop)
+const cancel = () => {
+    window.removeEventListener('mousemove', move)
+    window.removeEventListener('mouseup', stop)
+    window.removeEventListener('mouseleave', stop)
+}
+onBeforeUnmount(cancel)
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+@icon-color: #7a7a7a;
+@border-color: #444444;
+@picker-size: 22px;
+@bar-height: 14px;
+
+.vyr-color-picker {
+    .vyr-font-family;
+    background-color: transparent;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    align-content: center;
+
+    .vyr-picker-border {
+        width: @picker-size;
+        height: @picker-size;
+        border: var(--vyr-border-size) solid var(--vyr-border-color);
+        box-sizing: border-box;
+        padding: 3px;
+    }
+
+    .color-value {
+        cursor: pointer;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        border: var(--vyr-border-size) solid var(--vyr-border-color);
+        box-sizing: border-box;
+    }
+}
+
+.color-picker-popover {
+    .color-picker {
+
+        .picker-wrapper {
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: row;
+
+            .picker-panel {
+                width: 100%;
+                position: relative;
+                left: 0;
+                top: 0;
+                overflow-x: hidden;
+                overflow-y: hidden;
+
+                .picker-panel-white {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    width: 100%;
+                    height: 100%;
+                    background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
+                }
+
+                .picker-panel-black {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    width: 100%;
+                    height: 100%;
+                    background: linear-gradient(0deg, #000, transparent);
+                }
+
+                .picker-cursor {
+                    cursor: pointer;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    width: 4px;
+                    height: 4px;
+                    border-radius: 50%;
+                    border: var(--vyr-border-size) solid var(--vyr-white-color);
+                    box-shadow: 0 0 5px var(--vyr-black-color);
+                    background-color: rgba(0, 0, 0, 0.6);
+                }
+            }
+
+            .picker-panel.active {
+                cursor: pointer;
+            }
+
+            .picker-bar {
+                width: 100%;
+                height: @bar-height;
+                margin: 10px 0 0;
+                position: relative;
+                left: 0;
+                top: 0;
+                background: linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red);
+
+                .picker-hue {
+                    cursor: pointer;
+                    position: absolute;
+                    left: 0;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    width: 4px;
+                    height: 100%;
+                    border-radius: 1px;
+                    box-sizing: border-box;
+                    box-shadow: 0 0 5px #9d9d9d;
+                    background-color: var(--vyr-white-color);
+                    border: var(--vyr-border-size) solid #f0f0f0;
+                }
+            }
+
+            .picker-bar.active {
+                cursor: pointer;
+            }
+        }
+
+        .opacity-wrapper {
+            width: 100%;
+            height: @bar-height;
+            margin: 10px 0 0;
+            box-sizing: border-box;
+            display: flex;
+            flex-wrap: nowrap;
+            flex-direction: row;
+
+            .opacity-inspector {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
+
+.vyr-color-picker.all {
+    width: 100%;
+
+    .vyr-picker-border {
+        width: 100%;
+        height: var(--vyr-input-height);
+    }
+}
+
+.vyr-color-picker:last-child {
+    margin-right: 0;
+}
+</style>

package/src/components/Confirm.vue

@@ -0,0 +1,86 @@
+<template>
+    <vyr-dialog v-model="state.visible" :mask="true" :draggable="false" width="450px" maxHeight="240px" @close="close">
+        <template #title>
+            <template v-if="state.type === 'warning'">
+                <i class="vyrfont vyr-warning tips-type"></i>
+            </template>{{ state.title }}
+        </template>
+        <div class="message" v-if="state.message">
+            {{ state.message }}
+        </div>
+        <div class="content" v-if="state.mode === 'input'">
+            <vyr-input v-model="privateState.checked" :clearable="true"></vyr-input>
+        </div>
+        <template v-if="state.options.length">
+            <div class="content" v-if="!state.mode">
+                <vyr-checked-group v-model="privateState.checked" :data="state.options" :multiple="false">
+                </vyr-checked-group>
+            </div>
+            <div class="content" v-if="state.mode === 'list'">
+                <div class="li" v-for="(item, i) in state.options" :key="i">
+                    {{ item.label }}
+                </div>
+            </div>
+            <div class="content" v-if="state.mode === 'select'">
+                <vyr-select v-model="privateState.checked" :data="state.options" :searchable="true"
+                    :placeholder="state.placeholder"></vyr-select>
+            </div>
+        </template>
+        <template #footer>
+            <vyr-button @click="success">{{ language.get('confirm.button.submit') }}</vyr-button>
+            <vyr-button @click="cencel">{{ language.get('confirm.button.cancel') }}</vyr-button>
+        </template>
+    </vyr-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useConfirmState } from './utils';
+import { language } from '../locale'
+import VyrDialog from './Dialog.vue';
+import VyrButton from './Button.vue';
+import VyrInput from './Input.vue'
+import VyrCheckedGroup from './CheckedGroup.vue';
+import VyrSelect from './Select.vue'
+
+defineOptions({
+    inheritAttrs: false
+})
+
+const state = useConfirmState()
+const privateState = ref({
+    checked: state.value.value ?? '',
+    flag: false,
+})
+
+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.checked ?? ''
+    state.value.close(privateState.value.flag)
+}
+</script>
+
+<style lang="less" scoped>
+
+.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/Dialog.vue

@@ -0,0 +1,220 @@
+<template>
+  <vyr-mask :mask-id="state.id" :layer="layer" :visible="modelValue" :mask="mask" @close="emit('close')"
+    #default="{ layer }">
+    <div ref="refDialog" class="vyr-dialog" :style="`${style};${layer}`" @contextmenu.prevent.stop @mousedown="change">
+      <div class="dialog-header" :style="`height:${header}px;`" @mousedown="start">
+        <div class="header-title">
+          <slot name="title">{{ title }}</slot>
+        </div>
+        <i class="vyrfont vyr-close header-close" v-if="closeable" @click="close" @mousedown.stop>
+        </i>
+      </div>
+      <div class="dialog-body" :style="`height:calc(100% - ${$slots.footer ? header + footer : header}px);`">
+        <slot name="scroll">
+          <vyr-scroll :margin="margin" :padding="padding" @resize="computeMaxHeight">
+            <slot></slot>
+          </vyr-scroll>
+        </slot>
+      </div>
+      <div class="dialog-footer" :style="`height:${footer}px;`" v-if="$slots.footer">
+        <slot name="footer"></slot>
+      </div>
+      <slot name="dialog"></slot>
+    </div>
+  </vyr-mask>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch, ref, nextTick, useTemplateRef } from 'vue'
+import { computedFloatLayer, dialogPrivateWarp, generateFloatLayer, getDialogHeight, getDialogWrapHeight, isActiveLayer, seActiveLayer } from './utils'
+import { updateFlotaLayerProvider, FlotaLayerProvider } from './composables/useProvider'
+import { dialogCommonDefaultProps } from './composables/useDefaultProps'
+import { Listener } from '../tool'
+import VyrMask from './Mask.vue'
+import VyrScroll from './Scroll.vue'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  modelValue: { default: false },
+  title: { default: '' },
+  draggable: { default: true },
+  closeable: { default: true },
+  position: { default() { return { left: '50%', top: '50%' } } },
+  ...dialogCommonDefaultProps,
+})
+const emit = defineEmits(['update:modelValue', 'active', 'close'])
+const refDialog = useTemplateRef('refDialog')
+
+const initPosition = () => {
+  state.value.position = `left:${props.position.left};top:${props.position.top};`
+}
+const state = ref({
+  id: generateFloatLayer(),
+  activeDialog: false,
+  offset: { x: 0, y: 0 },
+  height: props.height,
+  position: '',
+  moving: false,
+})
+
+const active = computed(() => isActiveLayer(state.value.id))
+const layer = computed(() => computedFloatLayer(state.value.id, active.value))
+const style = computed(() => {
+  const style = `
+  width:${props.width};
+  height:${state.value.height};
+  max-height:${props.maxHeight};
+  ${state.value.position};
+  `
+
+  return style
+})
+
+const flotaLayerProvider: FlotaLayerProvider = { listener: new Listener(), layer }
+updateFlotaLayerProvider(flotaLayerProvider)
+
+const close = () => {
+  emit('update:modelValue', false)
+}
+const change = () => {
+  seActiveLayer(state.value.id)
+  emit('active')
+}
+const start = (e: MouseEvent) => {
+  if (props.draggable === false) return
+  if (!refDialog.value) return
+  const rect = refDialog.value.getBoundingClientRect()
+  state.value.offset.x = e.clientX - rect.left - rect.width / 2
+  state.value.offset.y = e.clientY - rect.top - rect.height / 2
+  state.value.activeDialog = true
+}
+const move = (e: MouseEvent) => {
+  if (state.value.activeDialog === false || state.value.moving === true) return
+  state.value.moving = true
+
+  requestAnimationFrame(() => {
+    const x = e.clientX - state.value.offset.x
+    const y = e.clientY - state.value.offset.y
+    state.value.position = `left:${x}px;top:${y}px;`
+    state.value.moving = false
+    flotaLayerProvider.listener.trigger('move', {})
+  })
+}
+const stop = () => {
+  state.value.activeDialog = false
+}
+const watchshortcutkey = (e: KeyboardEvent) => {
+  if (e.code === 'Escape') close()
+}
+
+const watchModelValue = () => {
+  if (props.modelValue === true) {
+    dialogPrivateWarp.addEventListener('mousemove', move)
+    dialogPrivateWarp.addEventListener('mouseup', stop, false)
+    dialogPrivateWarp.addEventListener('mouseleave', stop)
+    window.addEventListener('keydown', watchshortcutkey)
+    if (state.value.position === '') nextTick(initPosition)
+    change()
+  } else {
+    dialogPrivateWarp.removeEventListener('mousemove', move)
+    dialogPrivateWarp.removeEventListener('mouseup', stop)
+    dialogPrivateWarp.removeEventListener('mouseleave', stop)
+    window.removeEventListener('keydown', watchshortcutkey)
+  }
+}
+watch(() => props.modelValue, watchModelValue, { immediate: true })
+
+const wrapperHeight = computed(() => getDialogWrapHeight(props.maxHeight))
+const computeMaxHeight = () => {
+  if (!refDialog.value) return
+  const dialogHeight = getDialogHeight(refDialog.value)
+  state.value.height = dialogHeight >= wrapperHeight.value ? wrapperHeight.value + 'px' : props.height
+}
+
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+@close-width: 30px;
+
+.vyr-dialog {
+  .vyr-font-family;
+  color: var(--vyr-font-color);
+  font-size: var(--vyr-font-size);
+  position: fixed;
+  left: 0;
+  top: 0;
+  transform: translate(-50%, -50%);
+  border-radius: var(--vyr-radius-size);
+  max-width: 100%;
+  max-height: 100%;
+  color: var(--vyr-white-color);
+  background-color: var(--vyr-topic-color);
+  box-sizing: border-box;
+  border: 1px solid var(--vyr-border-color);
+
+  .dialog-header {
+    width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    align-content: center;
+    padding: 0 20px;
+    box-sizing: border-box;
+    background-color: var(--vyr-dialog-header-background-color);
+    border-bottom: var(--vyr-border-size) solid var(--vyr-border-color);
+
+    .header-title {
+      font-size: var(--vyr-title-size);
+      width: calc(~'100% - @{close-width}');
+      letter-spacing: 1px;
+      user-select: none;
+    }
+
+    .header-close {
+      cursor: pointer;
+      width: @close-width;
+      transition: all var(--vyr-animation-time);
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+      align-content: center;
+
+      &:hover {
+        opacity: 0.7;
+        color: var(--vyr-active-topic-color);
+      }
+    }
+  }
+
+  .dialog-body {
+    width: 100%;
+    border: var(--vyr-border-size) solid transparent;
+    box-sizing: border-box;
+  }
+
+  .dialog-footer {
+    width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    align-content: center;
+    border-top: var(--vyr-border-size) solid var(--vyr-border-color);
+    box-sizing: border-box;
+
+    :deep(.vyr-button) {
+      margin: 0 10px;
+    }
+  }
+}
+</style>

package/src/components/Divider.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="divider">
+        <div class="line">
+            <div class="text">{{ text }}</div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ text: string }>()
+</script>
+
+<style lang="less" scoped>
+.divider {
+    width: 100%;
+    height: calc(1em + 16px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .line {
+        width: 100%;
+        height: 1px;
+        position: relative;
+        top: 0;
+        left: 0;
+        border-bottom: 1px solid var(--vyr-border-color);
+    }
+
+    .text {
+        color: #c3c3c3;
+        background-color: var(--vyr-topic-color);
+        padding: 0 0 0 20px;
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translate(0, -50%);
+    }
+}
+</style>