@vyr/design 0.0.1

package/src/components/Input.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="vyr-input" :class="{ 'clearable': curClearable, 'icon': $slots.icon }" :style="`width:${curInputWidth};`"
+    @click="e => emit('click', e)" @mouseenter="mouseenter" @mouseleave="mouseleave" @mouseup="mouseup">
+    <input ref="refInput" class="input-wrapper" tabindex="-1" v-focus="curReadonly ? false : autofocus"
+      :class="{ 'readonly': curReadonly, 'icon': curClearable, 'draggable': drag.draggable }" :type="type"
+      :placeholder="placeholder" :value="currentValue" :readonly="curReadonly" @input="inputValue" @focus="focus"
+      @blur="blurValue" @compositionstart="compositionstart" @compositionend="compositionend" />
+    <div class="icon-wrapper">
+      <slot name="icon" :clearable="curClearable">
+        <transition name="vyr-transition">
+          <i class="vyrfont vyr-shanchu vyr-input-icon"
+            v-if="showClear(curClearable, curReadonly, curReadonlyClearable, currentValue) && drag.enabled === false"
+            @click.stop="clear"></i>
+        </transition>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, Directive, watch, useTemplateRef } from 'vue'
+import { commonDefaultProps, inputCommonDefaultProps, inputDefaultProps, useInputCommonProps } from './composables/useDefaultProps'
+import { useCommonPropsOnInput } from './composables/useDefaultProps';
+import { useValidateItemProvider } from './composables/useProvider';
+import { DraggableController } from './common/DraggableController';
+import { Draggable } from '../tool'
+
+const props = defineProps({
+  ...commonDefaultProps,
+  ...inputCommonDefaultProps,
+  ...inputDefaultProps,
+  type: { default: 'text' },
+  trigger: { default: 'input' as 'input' | 'blur' },
+  autofocus: { default: false },
+})
+const vFocus: Directive = { mounted(el, props) { if (props.value === true) el.focus() } }
+
+const currentValue = ref('')
+const watchModelValue = () => currentValue.value = props.modelValue
+watch(() => props.modelValue, watchModelValue, { immediate: true })
+
+const refInput = useTemplateRef('refInput')
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'click', 'clear'])
+const { curReadonly, curClearable, curReadonlyClearable, enterInput, leaveInput, showClear } = useCommonPropsOnInput(props)
+const { curInputWidth } = useInputCommonProps(props)
+
+const composition = ref(false)
+const isFocus = ref(false)
+const confirm = (e: KeyboardEvent) => {
+  if (e.code === 'Escape') expose.blur()
+}
+const compositionstart = () => {
+  composition.value = true
+}
+const compositionend = (e: CompositionEvent) => {
+  if (composition.value === false) return
+  composition.value = false
+  inputValue()
+}
+const focus = () => {
+  if (curReadonly.value === true) return
+  emit('focus')
+  window.addEventListener('keydown', confirm)
+  isFocus.value = true
+}
+const inputValue = () => {
+  if (composition.value === true) return
+  currentValue.value = refInput.value?.value ?? ''
+  if (props.trigger !== 'input') return
+  emit('update:modelValue', currentValue.value)
+}
+const validateProvider = useValidateItemProvider()
+const blurValue = () => {
+  composition.value = false
+  if (curReadonly.value === true) return
+  currentValue.value = refInput.value?.value ?? ''
+  if (props.trigger === 'blur') emit('update:modelValue', currentValue.value)
+  emit('blur', currentValue.value)
+  validateProvider.value.validate(currentValue.value)
+  isFocus.value = false
+  window.removeEventListener('keydown', confirm)
+}
+const clear = (e: MouseEvent) => {
+  emit('update:modelValue', '')
+  emit('clear', e)
+  if (isFocus.value === false) validateProvider.value.validate('')
+}
+
+const drag = reactive({
+  enabled: false,
+  draggable: false
+})
+const mouseenter = (e: MouseEvent) => {
+  if (composition.value === true) return
+  enterInput()
+  if (curReadonly.value === true) return
+  drag.enabled = DraggableController.enabled
+  if (DraggableController.enabled === false || props.draggable === false) return
+  drag.draggable = DraggableController.enter({ key: props.dragkey, value: currentValue.value }, props.draggable)
+}
+const mouseleave = (e: MouseEvent) => {
+  if (composition.value === true) return
+  leaveInput()
+  drag.enabled = false
+  if (DraggableController.enabled === false || props.draggable === false) return
+  drag.draggable = false
+}
+const mouseup = (e: MouseEvent) => {
+  if (curReadonly.value === true) return
+  drag.enabled = false
+  if (DraggableController.enabled === false || props.draggable === false) return
+  DraggableController.end({ key: props.dragkey, value: currentValue.value }, props.draggable, 'insert')
+  drag.draggable = false
+}
+
+const expose = {
+  isFocus,
+  focus() {
+    if (!refInput.value) return
+    refInput.value.focus()
+  },
+  blur() {
+    if (!refInput.value) return
+    refInput.value.blur()
+  },
+  setValue(str: string) {
+    if (!refInput.value) return
+    refInput.value.value = str
+    currentValue.value = str
+  }
+}
+defineExpose(expose)
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.vyr-input {
+  .vyr-font-family;
+  color: var(--vyr-font-color);
+  font-size: var(--vyr-font-size);
+  position: relative;
+  left: 0;
+  top: 0;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+
+  .input-wrapper {
+    .vyr-font-family;
+    width: 100%;
+    height: var(--vyr-input-height);
+    line-height: var(--vyr-input-height);
+    box-sizing: border-box;
+    padding: 0 var(--vyr-input-l-r-padding);
+    border-radius: var(--vyr-input-radius);
+    font-size: var(--vyr-input-font-size);
+    color: var(--vyr-input-font-color);
+    background-color: var(--vyr-input-background-color);
+    border: var(--vyr-input-border-size) solid var(--vyr-input-border-color);
+    user-select: none;
+    outline: none;
+    transition: border var(--vyr-animation-time);
+  }
+
+  .input-wrapper[type="password"]::-ms-reveal {
+    display: none;
+  }
+
+  .input-wrapper:focus {
+    border: var(--vyr-border-size) solid var(--vyr-active-topic-color);
+  }
+
+  .input-wrapper::placeholder {
+    color: var(--vyr-input-placeholder-color);
+    font-size: var(--vyr-font-size);
+  }
+
+  .input-wrapper.readonly {
+    caret-color: transparent;
+  }
+
+  .input-wrapper.draggable {
+    border: var(--vyr-border-size) dashed var(--vyr-draggable-color);
+    animation: input-draggable 1s infinite;
+  }
+
+  .icon-wrapper {
+    @height: calc(var(--vyr-input-border-size) * 2);
+    width: var(--vyr-input-icon-size);
+    height: calc(~'100% - @{height}');
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(-2px, -50%);
+    z-index: 1;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    transition: all var(--vyr-animation-time);
+    padding: 0 2px;
+    box-sizing: border-box;
+    pointer-events: none;
+    cursor: pointer;
+
+    .vyr-shanchu {
+      font-size: 18px;
+      pointer-events: auto;
+    }
+
+    .vyr-shanchu:hover {
+      color: var(--vyr-active-topic-color);
+    }
+  }
+}
+
+.vyr-input.clearable,
+.vyr-input.icon {
+  .input-wrapper {
+    padding-right: var(--vyr-input-icon-size);
+  }
+}
+
+.vyr-input.modify {
+  .input-wrapper {
+    padding-left: 4px;
+  }
+}
+
+.vyr-drag-mouse {
+  .vyr-input {
+    .input-wrapper {
+      cursor: move;
+    }
+  }
+}
+
+@keyframes input-draggable {
+
+  0%,
+  100% {
+    border-color: var(--vyr-input-border-color);
+  }
+
+  50% {
+    border-color: var(--vyr-draggable-color);
+  }
+}
+</style>

package/src/components/InputNumber.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="vyr-input-number" :style="`width:${curInputWidth};`">
+        <vyr-input ref="refInput" :model-value="state.input" :placeholder="placeholder" :autofocus="autofocus"
+            :readonly="curReadonly" :clearable="curClearable" :width="curInputWidth" @update:model-value="inputValue"
+            @blur="blurValue" @clear="clear" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, useTemplateRef, watch } from 'vue'
+import { inputNumberReExp } from './utils';
+import { useCommonProps, useInputCommonProps } from './composables/useDefaultProps'
+import { commonDefaultProps, inputCommonDefaultProps, inputDefaultProps } from './composables/useDefaultProps'
+import VyrInput from './Input.vue'
+
+const props = defineProps({
+    ...commonDefaultProps,
+    ...inputCommonDefaultProps,
+    ...inputDefaultProps,
+    autofocus: { default: false },
+    step: { default: 'auto' as 'auto' | number },
+    min: { default: null as null | number },
+    max: { default: null as null | number },
+    allowNull: { default: true },
+    defaultValue: { default: 0 },
+})
+
+const refInput = useTemplateRef('refInput')
+const state = ref({
+    input: '' as string | number,
+})
+
+const emit = defineEmits(['update:modelValue', 'blur'])
+const { curReadonly, curClearable } = useCommonProps(props)
+const { curInputWidth } = useInputCommonProps(props)
+
+const formatData = (str: string) => {
+    const parse = str.match(inputNumberReExp)
+    return parse === null ? '' : parse[0]
+}
+const toNumber = (value: string) => {
+    const number = parseFloat(value)
+    return isNaN(number) ? 0 : number
+}
+
+const watchModelValue = () => {
+    if (props.modelValue === '') {
+        state.value.input = ''
+    } else {
+        const value = props.modelValue ?? ''
+        state.value.input = toNumber(formatData(value.toString()))
+        emit('update:modelValue', state.value.input)
+    }
+}
+watch(() => props.modelValue, watchModelValue, { immediate: true })
+
+const inputValue = (str: string) => {
+    const value = formatData(str)
+    refInput.value?.setValue(value)
+    state.value.input = value
+}
+const updateBlurValue = (value: number | string) => {
+    emit('update:modelValue', value)
+    emit('blur', value)
+}
+const blurValue = () => {
+    if (state.value.input === '') {
+        if (props.allowNull === true) return updateBlurValue('')
+        state.value.input = props.defaultValue
+    }
+
+    let output = toNumber(state.value.input.toString())
+    if (props.step !== 'auto') {
+        const count = Math.round(output / props.step)
+        output = count * props.step
+    }
+    if (props.max !== null) output = Math.min(props.max, output)
+    if (props.min !== null) output = Math.max(props.min, output)
+    refInput.value?.setValue(output.toString())
+    updateBlurValue(output)
+}
+const clear = () => {
+    emit('update:modelValue', '')
+}
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.vyr-input-number {
+    .vyr-font-family;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+}
+</style>

package/src/components/Label.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="vyr-label">
+        <div class="label-header" v-if="width !== '0%'" :class="align" :style="`width:${width};`">
+            <i class="vyrfont vyr-bitian" v-if="formProvider.rules.length && formProvider.options.icon"
+                :style="`opacity:${rule && formProvider.options.icon ? '1' : '0'}`">
+            </i>
+            {{ label }}
+        </div>
+        <div class="label-body" :class="{ 'error': errorStatus }"
+            :style="`width:calc(100% - ${width});${verticalAlign === 'center' ? 'display:flex;' : ''}`">
+            <slot></slot>
+            <transition name="vyr-transition">
+                <div class="label-error" v-if="errorStatus && formProvider.options.tips">{{ error }}</div>
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch, ref } from 'vue'
+import { useValidateProvider, useProvider, updateValidateItemProvider } from './composables/useProvider'
+import { labelCommonDefaultProps } from './composables/useDefaultProps'
+
+const props = defineProps({
+    ...labelCommonDefaultProps,
+    label: { default: '' },
+    rule: { default: '' },
+    verticalAlign: { default: '' }
+})
+const provider = useProvider()
+const width = computed(() => {
+    const width = props.width === null ? provider.value.label.width : props.width
+    return width > 1 ? `${width}px` : `${width * 100}%`
+})
+const align = computed(() => {
+    return props.align === null ? provider.value.label.align : props.align
+})
+
+const formProvider = useValidateProvider()
+const watchRule = (cur: string, old: string | undefined) => {
+    if (old !== undefined) formProvider.value.removeRule(old)
+    if (cur !== '') formProvider.value.addRule(cur)
+}
+watch(() => props.rule, watchRule, { immediate: true })
+const error = computed(() => {
+    const message = formProvider.value.validateCollection[props.rule]
+    return message === undefined ? false : message
+})
+const errorStatus = computed(() => {
+    return error.value === false ? false : true
+})
+
+const validate = (value: any) => {
+    if (props.rule === '') return
+    formProvider.value.validateItem(props.rule, value)
+}
+updateValidateItemProvider(ref({ validate }))
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.vyr-label {
+    .vyr-font-family;
+    color: var(--vyr-font-color);
+    width: 100%;
+    font-size: var(--vyr-font-size);
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+
+    .label-header {
+        height: var(--vyr-input-height);
+        line-height: var(--vyr-input-height);
+        overflow: hidden;
+        word-break: break-all;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding: 0 10px 0 0;
+        box-sizing: border-box;
+
+        .vyrfont {
+            font-size: 12px;
+            color: var(--vyr-red-color);
+        }
+    }
+
+    .label-body {
+        min-height: var(--vyr-input-height);
+        position: relative;
+        left: 0;
+        top: 0;
+
+        .label-error {
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 100%;
+            padding: 6px 0 0 0;
+            font-size: 12px;
+            color: var(--vyr-red-color);
+            line-height: 1em;
+        }
+    }
+
+    .label-body.error {
+        :deep(.vyr-input) {
+            color: var(--vyr-red-color);
+
+            .input-wrapper {
+                border-color: var(--vyr-red-color);
+            }
+        }
+    }
+}
+</style>

package/src/components/Loading.vue

@@ -0,0 +1,196 @@
+<template>
+  <teleport to="body">
+    <Transition :duration="state.duration" @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter"
+      @enter-cancelled="onEnterCancelled" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave"
+      @leave-cancelled="onLeaveCancelled">
+      <div class="vyr-loading" v-show="state.visible" :style="`opacity:${state.opacity};`">
+        <div class="loading">
+          <div class="loading-inspector">
+            <div class="loading-inspector-line">
+              <span v-for="index of 10" :key="index" :style="'animation-delay:' + index * 0.1 + 's;'"></span>
+            </div>
+          </div>
+          <div class="loading-text">Loading...</div>
+        </div>
+      </div>
+    </Transition>
+  </teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { LoadingVue } from './types'
+
+const state = ref({
+  visible: false,
+  duration: 500,
+  opacityMax: 0.2,
+  opacity: 0,
+  playing: false,
+  step: 0,
+  runId: 0,
+})
+const setVisible = (v: boolean) => {
+  state.value.visible = v
+}
+
+defineExpose<LoadingVue>({ setVisible })
+
+const computeStep = () => {
+  const count = (state.value.duration / 1000) * 60
+  state.value.step = state.value.opacityMax / count
+}
+const runEnter = () => {
+  state.value.runId = requestAnimationFrame(runEnter)
+  state.value.opacity += state.value.step
+}
+const runLeave = () => {
+  state.value.runId = requestAnimationFrame(runLeave)
+  state.value.opacity -= state.value.step
+}
+const stop = () => {
+  cancelAnimationFrame(state.value.runId)
+}
+
+const onBeforeEnter = () => {
+  if (state.value.playing === false) state.value.opacity = 0
+  computeStep()
+}
+
+const onEnter = () => {
+  state.value.playing = true
+  runEnter()
+}
+
+const onAfterEnter = () => {
+  state.value.playing = false
+  stop()
+}
+
+const onEnterCancelled = () => {
+  stop()
+}
+
+const onBeforeLeave = () => {
+  if (state.value.playing === false) state.value.opacity = state.value.opacityMax
+  computeStep()
+}
+
+const onLeave = () => {
+  state.value.playing = true
+  runLeave()
+}
+
+const onAfterLeave = () => {
+  state.value.playing = false
+  stop()
+}
+
+const onLeaveCancelled = () => {
+  stop()
+}
+
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+@loading-font-size: 24px;
+
+.vyr-loading {
+  .vyr-font-family;
+  color: var(--vyr-font-color);
+  font-size: var(--vyr-font-size);
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--vyr-z-index);
+  color: var(--vyr-black-color);
+  background-color: var(--vyr-black-color);
+
+  .loading {
+    width: 50%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+  }
+
+  .loading-inspector {
+    width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+
+    div {
+      height: 60px;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      align-content: center;
+    }
+
+    div>span {
+      width: 4px;
+      height: 100%;
+      margin: 0 4px;
+      border-radius: var(--vyr-radius-size);
+      background-color: var(--vyr-white-color);
+      display: inline-block;
+      opacity: 0;
+      animation: loading_inspector 0.8s infinite;
+    }
+  }
+
+  .loading-text {
+    font-size: @loading-font-size;
+    color: var(--vyr-white-color);
+    font-weight: bold;
+    letter-spacing: 2px;
+    animation: loading 4s infinite;
+  }
+
+  //loading动画
+  @keyframes loading_inspector {
+
+    0%,
+    100% {
+      transform: scale(100%, 0);
+      opacity: 1;
+    }
+
+    50% {
+      transform: scale(100%, 100%);
+    }
+  }
+
+  @keyframes loading {
+
+    0%,
+    100% {
+      color: var(--vyr-blue-color);
+    }
+
+    33.33% {
+      color: var(--vyr-yellow-color);
+    }
+
+    66.66% {
+      color: var(--vyr-red-color);
+    }
+  }
+}
+</style>

package/src/components/Mask.vue

@@ -0,0 +1,47 @@
+<template>
+    <teleport to="body">
+        <transition name="vyr-transition" @before-enter="addFloatLayer(maskId)" @after-leave="hide">
+            <template v-if="visible">
+                <div v-if="mask" class="vyr-mask" :style="layerStyle" @contextmenu.prevent.stop>
+                    <slot :layer="layerStyle"></slot>
+                </div>
+                <slot v-else :layer="layerStyle"></slot>
+            </template>
+        </transition>
+    </teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { maskCommonDefaultProps } from './composables/useDefaultProps'
+import { addFloatLayer, removeFloatLayer } from './utils/FloatLayer';
+
+const props = defineProps({
+    maskId: {} as { default: number },
+    layer: { default: -1 },
+    ...maskCommonDefaultProps,
+})
+
+const layerStyle = computed(() => {
+    return props.layer === -1 ? '' : `z-index:${props.layer};`
+})
+
+const emit = defineEmits(['close'])
+const hide = () => {
+    removeFloatLayer(props.maskId)
+    emit('close')
+}
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.vyr-mask {
+    .vyr-font-family;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+}
+</style>