@vyr/design 0.0.1

package/src/components/Select.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="vyr-select" :style="`width:${curInputWidth};`">
+    <vyr-popover ref="refPopover" :model-value="state.visible" :placement="placement"
+      :popover-class="`vyr-select-popover ${popoverClass}`" :disabled="curReadonly" :popover-card="popoverCard"
+      :arrow="arrow" :offset="offset" @update:model-value="popoverVisibleChange" @trigger-change="changeTrigger">
+      <template #trigger>
+        <slot name="trigger">
+          <div class="select-wrapper">
+            <vyr-input :model-value="curInputValue" :readonly="curReadonly || searchable === false"
+              :clearable="curClearable" :readonly-clearable="curReadonlyClearable" :placeholder="curPlaceholder"
+              :width="`100%`" :draggable :dragkey @focus="startSearch" @blur="clearSearch"
+              @update:model-value="updateSearch" @click="stopClosePopover" @clear.stop="clear">
+              <template #icon="icon">
+                <i v-if="showClear(icon.clearable, curReadonly, curReadonlyClearable, curInputValue)"
+                  class="vyrfont vyr-shanchu vyr-input-icon" @click.stop="clear"></i>
+                <i v-else class="vyrfont vyr-arrow-down-bold vyr-input-icon" :class="{ 'active': state.visible }">
+                </i>
+              </template>
+            </vyr-input>
+          </div>
+        </slot>
+      </template>
+      <slot name="default" :width="slotWidth" :forced-prompt="searchState.forcedPrompt">
+        <vyr-options :data="renderOptions" :getter="curGetter" :addable="addable" :removable="removable"
+          :editable="editable" :forced-prompt="searchState.forcedPrompt" :checked="[modelValue]" :width="slotWidth"
+          @click="change" @add="triggerAdd" @remove="triggerRemove" @edit="triggerEdit"></vyr-options>
+      </slot>
+    </vyr-popover>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, useTemplateRef } from 'vue'
+import { Option, Options } from './types';
+import { inputCommonDefaultProps, useCommonProps, useInputCommonProps } from './composables/useDefaultProps';
+import { commonDefaultProps, selectCommonDefaultProps, popoverCommonDefaultProps, getterCommonDefaultProps } from './composables/useDefaultProps';
+import { updateValidateItemProvider, useValidateItemProvider } from './composables/useProvider';
+import { searchDefaultProps, useSearch } from './composables/useSearch'
+import { observer, usePopover } from './composables/usePopover';
+import { useGetter } from './composables/useGetter';
+import VyrPopover from './Popover.vue';
+import VyrInput from './Input.vue'
+import VyrOptions from './Options.vue'
+
+const validateProvider = useValidateItemProvider()
+updateValidateItemProvider(ref({ validate() { } }))
+
+const refPopover = useTemplateRef('refPopover')
+const emit = defineEmits(['update:modelValue', 'change', 'show', 'close', 'clear', 'add', 'remove', 'edit'])
+
+const props = defineProps({
+  ...commonDefaultProps,
+  ...selectCommonDefaultProps,
+  ...popoverCommonDefaultProps,
+  ...inputCommonDefaultProps,
+  ...searchDefaultProps,
+  ...getterCommonDefaultProps,
+  addable: { default: false },
+  removable: { default: false },
+  editable: { default: false },
+  popoverCard: { default: false },
+  popoverWidth: { default: 'auto' },
+  data: { default(): Options { return [] } },
+})
+
+const curGetter = useGetter(props)
+const { curInputWidth } = useInputCommonProps(props)
+const { state, slotWidth, resize, cascaderProvider } = usePopover(props, refPopover)
+const { curReadonly, curClearable, curReadonlyClearable, showClear } = useCommonProps(props)
+const { searchState, startSearch, updateSearch, clearSearch } = useSearch(props, cascaderProvider, curGetter)
+
+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')
+  }
+  validateProvider.value.validate(props.modelValue)
+}
+const stopClosePopover = (e: MouseEvent) => { if (state.value.visible === true) e.stopPropagation() }
+
+const curSelectValue = computed(() => cascaderProvider.value.getInputValue(props.modelValue, props.data, curGetter))
+const renderOptions = computed(() => {
+  if (props.searchable === false) return props.data
+  return cascaderProvider.value.searchOptions.length === 0 ? props.data : cascaderProvider.value.searchOptions
+})
+const curInputValue = computed(() => {
+  if (props.searchable === false) return curSelectValue.value
+  return [0].includes(searchState.value.status) ? curSelectValue.value : searchState.value.content
+})
+const curPlaceholder = computed(() => {
+  if (props.searchable === false) return props.placeholder
+  return searchState.value.status === 0 || curSelectValue.value === '' ? props.placeholder : curSelectValue.value
+})
+
+const triggerAdd = (...args: any[]) => {
+  emit('add', ...args)
+}
+const triggerEdit = (...args: any[]) => {
+  emit('edit', ...args)
+}
+const triggerRemove = (...args: any[]) => {
+  emit('remove', ...args)
+}
+
+const show = () => {
+  if (curReadonly.value === true) return state.value.visible = false
+  state.value.visible = true
+}
+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()
+}
+const clear = () => {
+  emit('update:modelValue', '')
+  emit('change', '')
+  emit('clear', '')
+  close()
+  if (state.value.visible === false) validateProvider.value.validate('')
+}
+
+defineExpose({ show, close, resize: () => popoverState.triggerResize() })
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.vyr-select {
+  .vyr-font-family;
+  color: var(--vyr-font-color);
+  font-size: var(--vyr-font-size);
+
+  .select-wrapper {
+    position: relative;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: var(--vyr-input-height);
+
+    :deep(.input-wrapper) {
+      cursor: pointer;
+      padding-right: var(--vyr-input-icon-size);
+    }
+
+    :deep(.vyr-input-icon).active,
+    .vyr-input-icon.active,
+    .vyr-input-icon:hover {
+      color: var(--vyr-active-topic-color);
+    }
+
+    :deep(.vyr-input-icon).active,
+    .vyr-input-icon.active {
+      transform: rotate(180deg);
+    }
+
+    .vyr-shanchu {
+      font-size: 18px;
+      pointer-events: auto;
+    }
+  }
+}
+
+.vyr-select-popover {
+
+  .vyr-remove {
+    color: var(--vyr-helper-color);
+    transition: all var(--vyr-animation-time);
+  }
+
+  .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/Slot.vue

@@ -0,0 +1,23 @@
+<template>
+    <WrapperSlots></WrapperSlots>
+</template>
+
+<script lang="ts" setup>
+import { VNode, useAttrs } from 'vue';
+import { getDirective, getFirstVNode, getOnlyNode } from './utils';
+
+const attrs = useAttrs() as any
+const emit = defineEmits(['slotChange'])
+const slots = defineSlots<{ default(): VNode[] }>()
+const directive = getDirective(emit)
+
+const WrapperSlots = () => {
+    const slotQueue = slots.default?.() ?? []
+
+    const root = getFirstVNode(slotQueue)
+
+    const trigger = getOnlyNode(root, attrs, directive)
+
+    return trigger
+}
+</script>

package/src/components/SubTree.vue

@@ -0,0 +1,262 @@
+<template>
+  <div v-for="(item, i) in renderQueue" :key="i" class="vyr-sub-tree">
+    <vyr-option v-if="item" :data-vyr-tree="getter.value(item)" :class="className(item)" :label="getter.label(item)"
+      :value="getter.value(item)" :disabled="getter.disabled(item)" :warning="warning(item)"
+      :checked="checked.includes(getter.value(item))" @click="e => handleClick(item, e)"
+      @mousedown="e => mousedown(item, e)" @mouseup="e => mouseup(item, e)" @mouseenter="e => mouseenter(item, e)"
+      @mouseleave="e => mouseleave(item, e)" @right-click="e => treeProvider.handleRightClick(item, e)">
+      <div class="sub-tree-item" :style="`padding-left:${layer * 10}px;`">
+        <div class="tree-arrow" :class="{ 'active': expand.includes(getter.value(item)) }">
+          <i class="vyrfont" :class="`${icon}`" v-if="getter.arrow(item)"></i>
+        </div>
+        <div class="tree-label" v-if="modifyEditState(item)">
+          <vyr-input class="modify" :model-value="getter.label(item)" :autofocus="true"
+            @blur="(v) => treeProvider.handleModify(v, item)"></vyr-input>
+        </div>
+        <div class="tree-label" v-else>
+          <slot :item="item" :active="expand.includes(getter.value(item))">
+            <div class="label-text">{{ getter.label(item) }}</div>
+          </slot>
+        </div>
+      </div>
+    </vyr-option>
+    <vyr-option v-if="modifyAddState(item)" class="modify-tree-item" :data-vyr-tree="getter.value(item)">
+      <div class="sub-tree-item" :style="`padding-left:${(layer + 1) * 10}px;`">
+        <div class="tree-arrow" :class="{ 'active': expand.includes(getter.value(item)) }"></div>
+        <div class="tree-label">
+          <vyr-input class="modify" :autofocus="true" @blur="(v) => treeProvider.handleModify(v, item)"></vyr-input>
+        </div>
+      </div>
+    </vyr-option>
+    <sub-tree v-if="show(item)" :data="getter.children(item)" :multiple="multiple" :getter="getter" :layer="layer + 1"
+      :expand="expand" :draggable="draggable" :modify="modify" :modify-value="modifyValue" :checked="checked"
+      :line="checked.includes(getter.value(item))" :visible="visible" :warning="warning">
+      <template #default="{ item, active }">
+        <slot :item="item" :active="active"></slot>
+      </template>
+    </sub-tree>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { SubTreeSlots, TreeOption } from './types';
+import { useDraggable } from './composables/useDraggable'
+import { defaultGetter } from './composables/useGetter';
+import { treeCommonDefaultProps } from './composables/useDefaultProps'
+import { useTreeProvider } from './composables/useProvider';
+import VyrOption from './Option.vue';
+import VyrInput from './Input.vue';
+
+defineSlots<SubTreeSlots>()
+
+const treeProvider = useTreeProvider()
+const props = defineProps({
+  layer: { default: 0 },
+  line: { default: false },
+  expand: { default() { return [] as string[] } },
+  checked: { default() { return [] as any[] } },
+  icon: { default: 'vyr-arrow-down-bold' },
+  getter: { default: () => defaultGetter },
+  ...treeCommonDefaultProps,
+})
+
+const renderQueue = computed(() => {
+  const queue: TreeOption[] = []
+
+  for (const item of props.data) {
+    if (props.visible(item)) queue.push(item)
+  }
+
+  return queue
+})
+
+const { drag, mousedown, mouseup, mouseenter, mouseleave } = useDraggable(props, treeProvider)
+
+const className = (item: TreeOption) => {
+  const obj = {
+    'modify-tree-item': modifyEditState(item),
+    'draggable': drag.value.value === props.getter.value(item),
+    'after-draggable': drag.value.type === 'insertAfter',
+    'before-draggable': drag.value.type === 'insertBefore',
+  }
+  return obj
+}
+const show = (item: TreeOption) => {
+  if (props.visible(item) === false) return false
+
+  if (props.modify !== 'close' && props.modifyValue === props.getter.value(item)) return true
+
+  if (props.expand.includes(props.getter.value(item)) && props.getter.children(item).length > 0) return true
+
+
+  return false
+}
+
+const modifyEditState = (item: TreeOption) => {
+  if (props.modify !== 'edit') return false
+
+  if (props.modifyValue !== props.getter.value(item)) return false
+
+  return true
+}
+const modifyAddState = (item: TreeOption) => {
+  if (props.modify !== 'add') return false
+
+  if (props.modifyValue !== props.getter.value(item)) return false
+
+  return true
+}
+
+const handleClick = (item: TreeOption, e: MouseEvent) => {
+  if (props.multiple === true) {
+    if (e.shiftKey === true && props.checked.length > 0) {
+      const currentValue = props.checked[0]
+      let current = renderQueue.value.find(item => props.getter.value(item) === currentValue)
+      if (current) {
+
+        const currentIndex = renderQueue.value.indexOf(current)
+        const selectionIndex = renderQueue.value.indexOf(item)
+        const start = Math.min(currentIndex, selectionIndex)
+        const end = Math.max(currentIndex, selectionIndex)
+
+        const items: TreeOption[] = []
+        for (let i = start; i <= end; i++) {
+          items.push(renderQueue.value[i])
+        }
+        treeProvider.value.handleChange(items)
+
+        return
+      }
+    }
+  }
+
+  treeProvider.value.handleClick(item, e)
+}
+</script>
+
+<style lang="less">
+@import '../theme/global.less';
+
+@icon-size: 28px;
+
+.vyr-sub-tree {
+  .vyr-font-family;
+  width: 100%;
+  color: var(--vyr-font-color);
+  font-size: var(--vyr-font-size);
+  position: relative;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  align-content: center;
+
+  .sub-tree-item {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    align-content: center;
+    user-select: none;
+
+    .tree-arrow {
+      width: @icon-size;
+      height: 100%;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      align-content: center;
+      transform: rotate(-90deg);
+    }
+
+    .tree-label {
+      width: calc(~'100% - @{icon-size}');
+      height: 100%;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      align-content: center;
+
+      .label-text {
+        width: 100%;
+        text-align: left;
+        overflow: hidden;
+        word-break: break-all;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .tree-arrow.active {
+      transform: rotate(0);
+    }
+  }
+
+  .vyr-option {
+    margin: var(--vyr-option-margin) 0;
+    padding-left: 0px;
+  }
+
+  .vyr-option.draggable {
+    background-color: var(--vyr-draggable-color);
+  }
+
+  .draggable.after-draggable::before,
+  .draggable.before-draggable::after {
+    content: '';
+    width: 100%;
+    height: 4px;
+    background-color: var(--vyr-flashing-draggable-color);
+    animation: tree-draggable 1s infinite;
+    pointer-events: none;
+  }
+
+
+  .draggable.before-draggable {
+    position: relative;
+    left: 0;
+    top: 0;
+
+    &::after {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+  }
+
+  .draggable.after-draggable {
+    position: relative;
+    left: 0;
+    top: 0;
+
+    &::before {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+  }
+}
+
+@keyframes tree-draggable {
+
+  0%,
+  100% {
+    opacity: 0.2;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+</style>

package/src/components/Tree.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="vyr-tree" :class="{ 'modify-tree': modify !== 'close' }">
+    <vyr-sub-tree :data="data" :getter="curGetter" :expand="state.expand" :checked="state.checked"
+      :draggable="draggable" :modify="modify" :multiple="multiple" :modify-value="modifyValue" :visible="visible"
+      :warning="warning">
+      <template #default="content">
+        <slot v-bind="content"></slot>
+      </template>
+    </vyr-sub-tree>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { TreeOption, DataGetter } from './types'
+import { useGetter, defaultGetter } from "./composables/useGetter"
+import { treeCommonDefaultProps } from './composables/useDefaultProps'
+import { updateTreeProvider } from './composables/useProvider'
+import { ArrayUtils } from '../tool'
+import VyrSubTree from './SubTree.vue'
+
+const props = defineProps({
+  ...treeCommonDefaultProps,
+  getter: { default: () => defaultGetter as Partial<DataGetter> },
+  defaultChecked: { default: () => [] as Array<TreeOption | null> },
+})
+const state = ref({
+  expand: [] as string[],
+  checked: [] as string[],
+})
+const curGetter = useGetter(props)
+const emit = defineEmits(['change', 'rightClick', 'modify'])
+const handleModify = (v: string, item: TreeOption) => {
+  emit('modify', props.modify, v, item)
+  state.value.checked = [curGetter.value(item)]
+  emit('change', [item])
+}
+const handleTrace = (tree: TreeOption[], item: TreeOption, expand: string[] = []) => {
+  for (const sub of tree) {
+    const value = curGetter.value(sub)
+    if (curGetter.value(sub) === curGetter.value(item)) {
+      expand.push('__')
+      return expand
+    }
+    if (Array.isArray(sub.children) === false) continue
+    handleTrace(sub.children, item, expand)
+    if (expand.length > 0) {
+      expand.push(value)
+      return expand
+    }
+  }
+  return expand
+}
+const handleChange = (items: TreeOption[]) => {
+  if (state.value.checked.length === 0 && items.length === 0) return
+  state.value.checked = items.map(item => curGetter.value(item))
+  emit('change', items)
+}
+const handleClick = (item: TreeOption, e: MouseEvent) => {
+  handleChange([item])
+  handleExpand(item)
+}
+const handleExpand = (item: TreeOption, type?: boolean) => {
+  if (type === true) {
+    ArrayUtils.insert(state.value.expand, curGetter.value(item))
+  } else if (type === false) {
+    ArrayUtils.remove(state.value.expand, curGetter.value(item))
+  } else {
+    ArrayUtils.auto(state.value.expand, curGetter.value(item))
+  }
+}
+const handleRightClick = (item: TreeOption, e: MouseEvent) => {
+  emit('rightClick', item, e)
+}
+
+const getAdjacencies = (location: TreeOption, item: TreeOption, tree = props.data): number | null => {
+  for (let i = 0; i < tree.length; i++) {
+    const sub = tree[i]
+    if (curGetter.value(sub) === curGetter.value(location)) {
+      const i2 = tree.indexOf(item)
+      if (i2 === -1) return 0
+      const iv = i2 - i
+      return Math.abs(iv) === 1 ? iv : 0
+    }
+
+    const adjacencies = getAdjacencies(location, item, curGetter.children(sub))
+    if (adjacencies !== null) return adjacencies
+  }
+
+  return null
+}
+updateTreeProvider(ref({ handleClick, handleChange, handleModify, handleRightClick, handleExpand, getAdjacencies }))
+
+const watchDefaultChecked = (cur?: Array<TreeOption | null>) => {
+  if (!cur || cur.length === 0) {
+    state.value.expand = []
+    state.value.checked = []
+    return
+  }
+  for (const item of cur) {
+    if (!item) continue
+    const value = curGetter.value(item)
+    state.value.checked = [value]
+    const expands = handleTrace(props.data, item)
+    for (const item of expands) ArrayUtils.insert(state.value.expand, item)
+  }
+}
+watch(() => props.defaultChecked, watchDefaultChecked, { immediate: true })
+
+defineExpose({
+  change: handleChange,
+  expand: handleExpand,
+})
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.modify-tree {
+  .vyr-font-family;
+  width: 100%;
+
+  :deep(.modify-tree-item) {
+    background-color: transparent !important;
+    transition: none;
+    padding-right: 0;
+  }
+}
+</style>