@veltra/desktop 1.0.0

package/src/components/grid/use-responsive.ts

@@ -0,0 +1,85 @@
+import { debounce } from '@cat-kit/core'
+import type { Undef } from '@veltra/utils/types/helper'
+import {
+  computed,
+  shallowRef,
+  watch,
+  type ShallowRef,
+  shallowReactive,
+  onBeforeUnmount,
+  type ComputedRef
+} from 'vue'
+
+import type { Breakpoint, GridEmits, GridItemProps, GridProps } from '../../types'
+import { getContainerBreakpoint } from './breakpoint'
+
+interface ResponsiveOptions {
+  props: GridProps
+  emit: GridEmits
+  /** 栅格容器模板引用 */
+  gridRef: ShallowRef<HTMLElement | null>
+}
+
+interface UseResponsiveReturned {
+  responsive: ComputedRef<boolean>
+  gridItemsProps: Set<GridItemProps>
+  currentBreakpoint: ShallowRef<Breakpoint | undefined>
+}
+
+export function useResponsive(options: ResponsiveOptions): UseResponsiveReturned {
+  const { props, gridRef, emit } = options
+
+  const gridItemsProps = shallowReactive<Set<GridItemProps>>(new Set())
+
+  const responsive = computed(() => {
+    return (props.cols && typeof props.cols !== 'number') || !!gridItemsProps.size
+  })
+
+  const currentBreakpoint = shallowRef<Breakpoint>()
+
+  let observer: Undef<ResizeObserver>
+
+  watch(
+    [responsive, gridRef],
+    ([responsive, dom]) => {
+      if (!dom) return
+
+      observer?.unobserve(dom)
+      observer?.disconnect()
+      observer = undefined
+
+      if (!responsive) {
+        currentBreakpoint.value = undefined
+        return
+      }
+
+      observer = new ResizeObserver(
+        debounce(([entry]) => {
+          const target = entry!.target as HTMLElement
+          const rect = target.getBoundingClientRect()
+          emit('resize', rect)
+          const breakpoint = getContainerBreakpoint(target.offsetWidth)
+          const prev = currentBreakpoint.value
+          if (
+            prev !== undefined &&
+            prev.name === breakpoint.name &&
+            prev.level === breakpoint.level
+          ) {
+            return
+          }
+          currentBreakpoint.value = breakpoint
+          emit('breakpoint-change', breakpoint)
+        }, 0)
+      )
+      observer.observe(dom)
+    },
+    { immediate: true }
+  )
+
+  onBeforeUnmount(() => {
+    gridRef.value && observer?.unobserve(gridRef.value)
+    observer?.disconnect()
+  })
+
+  return { responsive, gridItemsProps, currentBreakpoint }
+}

package/src/components/grid-input/grid-input.vue

@@ -0,0 +1,126 @@
+<template>
+  <ul :class="[cls.b, cls.m(size)]">
+    <li
+      v-for="(_, index) in length"
+      :key="index"
+      tabindex="0"
+      @keydown="onKeydown($event, valueArray[index]!, index)"
+      @focus="focus(index)"
+      @blur="index === position && (blur = true)"
+      ref="items"
+      :class="[cls.e('item'), bem.is('focus', index === position && !blur)]"
+    >
+      <span :class="cls.em('item', 'text')" v-if="valueArray[index]">
+        {{ valueArray[index] }}
+      </span>
+
+      <span :class="cls.em('item', 'cursor')" v-else-if="index === position"></span>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { useFallbackProps } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { computed, ref, getCurrentInstance } from 'vue'
+
+import type { GridInputProps, GridInputEmits, GridInputExposed } from '../../types'
+
+defineOptions({
+  name: 'GridInput'
+})
+
+const emit = defineEmits<GridInputEmits>()
+
+const props = withDefaults(defineProps<GridInputProps>(), {
+  length: 6,
+  zero: false,
+  separator: '-'
+})
+
+const { size } = useFallbackProps([props], {
+  size: 'default'
+})
+
+const cls = bem('grid-input')
+
+const _numberReg = computed(() => (props.zero ? /^[0-9]$/ : /^[1-9]$/))
+
+const valueArray = ref<string[]>([])
+
+const position = ref<number>(-1)
+
+const blur = ref<boolean>(false)
+
+const instance = getCurrentInstance()
+
+const focus = async (index?: number) => {
+  if (index === undefined) {
+    focus(position.value)
+    return
+  }
+  if (index !== 0 && index > valueArray.value.length) {
+    index = valueArray.value.length
+  }
+  position.value = index
+  const items = (instance?.refs as { items?: unknown })?.items as any
+  let dom = items?.[index]
+  dom?.focus()
+  blur.value = false
+}
+
+const changeValue = (value: string, index: number) => {
+  if (position.value === props.length) return
+  const currentValue = valueArray.value[index]
+
+  if (currentValue) {
+    valueArray.value.splice(index, 1, value)
+  } else if (index === valueArray.value.length) {
+    valueArray.value.push(value)
+  } else {
+    return
+  }
+  position.value++
+  focus()
+
+  emit('input', valueArray.value.filter((v) => v).join(props.separator))
+}
+
+const baseOperation = {
+  Backspace: (value: string, index: number) => {
+    if (value) {
+      valueArray.value.splice(index, 1)
+    } else if (index - 1 >= 0) {
+      valueArray.value.splice(index - 1, 1)
+    }
+    if (index !== 0) {
+      focus(index - 1)
+    }
+    emit('input', valueArray.value.filter((v) => v).join(props.separator))
+  },
+  ArrowLeft: (value: string, index: number) => {
+    if (index === 0) return
+    focus(index - 1)
+  },
+  ArrowRight: (value: string, index: number) => {
+    if (index === valueArray.value.length) return
+    focus(index + 1)
+  }
+}
+
+const onKeydown = (e: any, value: string, index: number) => {
+  if (_numberReg.value.test(e.key)) {
+    changeValue(e.key, index)
+    return
+  }
+  baseOperation[e.key](value, index)
+}
+
+const clear = () => {
+  while (valueArray.value.length) {
+    valueArray.value.pop()
+  }
+}
+
+defineExpose<GridInputExposed>({ clear })
+</script>

package/src/components/grid-input/index.ts

@@ -0,0 +1 @@
+export { default as UGridInput } from './grid-input.vue'

package/src/components/grid-input/style.scss

@@ -0,0 +1,59 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+@use 'sass:map';
+
+// 方便拼接
+$root-name: grid-input;
+
+@include m.b($root-name) {
+  @include m.size using ($size) {
+    @include m.bem($root-name, item) {
+      width: fn.use-var(form-component-height, $size);
+      height: fn.use-var(form-component-height, $size);
+      line-height: fn.use-var(form-component-height, $size);
+      border: fn.use-var(border);
+      border-radius: fn.use-var(gap, $size);
+      outline: none;
+      text-align: center;
+      display: inline-block;
+      vertical-align: middle;
+      position: relative;
+
+      &:not(:last-child) {
+        margin-right: fn.use-var(gap, $size);
+      }
+
+      @include m.is(focus) {
+        border-color: fn.use-var(color, primary);
+
+        @keyframes fade {
+          0% {
+            opacity: 0.2;
+          }
+
+          100% {
+            opacity: 1;
+          }
+        }
+
+        @include m.bem($root-name, item, text) {
+          color: fn.use-var(color, primary);
+          animation: fade 1s linear infinite alternate;
+        }
+
+        @include m.bem($root-name, item, cursor) {
+          position: absolute;
+          width: 2px;
+          height: calc(fn.use-var(form-component-height, $size) / 2);
+          background: fn.use-var(color, primary);
+          content: '';
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          animation: fade 1s linear infinite alternate;
+        }
+      }
+    }
+  }
+}

package/src/components/grid-input/style.ts

@@ -0,0 +1 @@
+import './style.scss'

package/src/components/group-input/group-input.vue

@@ -0,0 +1,93 @@
+<template>
+  <ul :class="[cls.b, cls.m(size)]" v-if="!readonly">
+    <li v-if="isEmpty && creatable">
+      <u-button style="width: 100%" :icon="Plus" @click="handleAdd(0)" :size="size">
+        新增
+      </u-button>
+    </li>
+    <li v-for="(item, index) of items" :key="item.id" :class="cls.e('item')" :style="itemStyle">
+      <slot v-bind="{ item: item.data, index }" />
+      <span :class="cls.e('actions')">
+        <u-button
+          :icon="Minus"
+          circle
+          :disabled="disabled"
+          :size="size"
+          @click="handleRemove(index)"
+        />
+        <u-button :icon="Plus" circle :disabled="disabled" :size="size" @click="handleAdd(index)" />
+      </span>
+    </li>
+  </ul>
+
+  <template v-else-if="items?.length">
+    <ul :class="[cls.b, cls.m(size)]">
+      <li v-for="item of items" :key="item.id" :class="cls.e('item')">
+        <span v-for="v in item.data">{{ v }}</span>
+      </li>
+    </ul>
+  </template>
+
+  <template v-else>
+    {{ FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup generic="GroupItem extends Record<string, any>">
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { Minus, Plus } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { computed } from 'vue'
+
+import type { GroupInputEmits, GroupInputProps } from '../../types'
+import { UButton } from '../button'
+import { useGroupItems } from './use-group-items'
+
+defineOptions({
+  name: 'GroupInput'
+})
+
+const props = withDefaults(defineProps<GroupInputProps<GroupItem>>(), {
+  modelValue: () => [],
+  disabled: undefined,
+  readonly: undefined,
+  creatable: true
+})
+
+const emit = defineEmits<GroupInputEmits>()
+
+const cls = bem('group-input')
+
+const { formProps } = useFormComponent()
+const { disabled, size, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const { items, createItem, runByEvent } = useGroupItems({
+  props,
+  emit
+})
+
+const isEmpty = computed(() => {
+  return !items.value.length
+})
+
+function handleAdd(index: number) {
+  runByEvent(() => {
+    items.value = [
+      ...items.value.slice(0, index + 1),
+      createItem({}),
+      ...items.value.slice(index + 1)
+    ]
+  })
+}
+
+function handleRemove(index: number) {
+  runByEvent(() => {
+    items.value = [...items.value.slice(0, index), ...items.value.slice(index + 1)]
+  })
+}
+</script>

package/src/components/group-input/index.ts

@@ -0,0 +1 @@
+export { default as UGroupInput } from './group-input.vue'

package/src/components/group-input/style.scss

@@ -0,0 +1,35 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: group-input;
+
+@include m.b($root-name) {
+  width: 100%;
+
+  @include m.size using ($size) {
+    font-size: fn.use-var(font-size-main, $size);
+
+    @include m.bem($root-name, item) {
+      gap: fn.use-var(gap, $size);
+
+      &:not(:first-child) {
+        margin-top: fn.use-var(gap, $size);
+      }
+    }
+  }
+
+  @include m.e(item) {
+    & > * {
+      flex-grow: 1;
+    }
+  }
+
+  @include m.e(actions) {
+    flex-shrink: 0;
+
+    display: flex;
+    gap: fn.use-var(gap, small);
+  }
+}

package/src/components/group-input/style.ts

@@ -0,0 +1 @@
+import './style.scss'

package/src/components/group-input/use-group-items.ts

@@ -0,0 +1,60 @@
+import { createIncrease } from '@veltra/utils'
+import { isReactive, nextTick, shallowReactive, shallowRef, watch, type ShallowRef } from 'vue'
+
+import type { GroupInputEmits, GroupInputProps } from '../../types'
+
+interface Options {
+  props: GroupInputProps
+  emit: GroupInputEmits
+}
+
+interface UseGroupItemsReturned {
+  items: ShallowRef<{ id: number; data: Record<string, any> }[]>
+  createItem: (data: Record<string, any>) => { id: number; data: Record<string, any> }
+  runByEvent: (cb: () => void) => void
+}
+
+export function useGroupItems(options: Options): UseGroupItemsReturned {
+  const { props, emit } = options
+
+  const id = createIncrease(1)
+
+  const items = shallowRef<{ id: number; data: Record<string, any> }[]>([])
+
+  function createItem(data: Record<string, any>) {
+    return { data: isReactive(data) ? data : shallowReactive(data), id: id() }
+  }
+
+  let changedByEvent = false
+  let changedByModelValue = false
+  function runByEvent(cb: () => void) {
+    changedByEvent = true
+    cb()
+    nextTick(() => {
+      changedByEvent = false
+    })
+  }
+
+  watch(
+    () => props.modelValue,
+    (modelValue) => {
+      if (changedByEvent) return
+      changedByModelValue = true
+      items.value = modelValue?.map(createItem) ?? []
+      nextTick(() => {
+        changedByModelValue = false
+      })
+    },
+    { immediate: true }
+  )
+
+  watch(items, (items) => {
+    if (changedByModelValue) return
+    emit(
+      'update:modelValue',
+      items.map((item) => item.data)
+    )
+  })
+
+  return { items, createItem, runByEvent }
+}

package/src/components/icon/icon.vue

@@ -0,0 +1,27 @@
+<template>
+  <i :class="cls.b" :style="style">
+    <slot></slot>
+  </i>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+import { withUnit } from '@veltra/utils'
+import { type CSSProperties, computed } from 'vue'
+
+import type { IconProps } from '../../types'
+
+defineOptions({
+  name: 'Icon'
+})
+
+const props = defineProps<IconProps>()
+
+const cls = bem('icon')
+
+const style = computed<CSSProperties>(() => {
+  return {
+    fontSize: withUnit(props.size, 'px')
+  }
+})
+</script>

package/src/components/icon/index.ts

@@ -0,0 +1 @@
+export { default as UIcon } from './icon.vue'

package/src/components/icon/style.scss

@@ -0,0 +1,37 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+
+@keyframes rotating {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@include m.b(icon) {
+  height: 1em;
+  width: 1em;
+  line-height: 1em;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  fill: currentColor;
+  font-size: inherit;
+  color: inherit;
+  vertical-align: middle;
+  user-select: none;
+  will-change: transform;
+
+  // 加载转圈
+  @include m.is(loading) {
+    transform-origin: center;
+    animation: rotating 2s linear infinite;
+  }
+
+  svg {
+    height: 1em;
+    width: 1em;
+  }
+}

package/src/components/icon/style.ts

@@ -0,0 +1 @@
+import './style.scss'

package/src/components/index.ts

@@ -0,0 +1,139 @@
+export * from './action'
+
+export * from './auto-complete'
+
+export * from './badge'
+
+export * from './batch-edit'
+
+export * from './button'
+
+export * from './calendar'
+
+export * from './card'
+
+export * from './cascade'
+
+export * from './check-tag'
+
+export * from './checkbox-group'
+
+export * from './checkbox'
+
+export * from './code-editor'
+
+export * from './condition-editor'
+
+export * from './context-menu'
+
+export * from './date-panel'
+
+export * from './date-picker'
+
+export * from './date-range-picker'
+
+export * from './dialog'
+
+export * from './drawer'
+
+export * from './dropdown'
+
+export * from './empty'
+
+export * from './expression-editor'
+
+export * from './file-picker'
+
+export * from './float-button'
+
+export * from './form-item'
+
+export * from './form'
+
+export * from './gantt-chart'
+
+export * from './grid-input'
+
+export * from './grid'
+
+export * from './group-input'
+
+export * from './icon'
+
+export * from './input'
+
+export * from './layout'
+
+export * from './list'
+
+export * from './loading'
+
+export * from './menu'
+
+export * from './message-confirm'
+
+export * from './message'
+
+export * from './multi-select'
+
+export * from './multi-tree-select'
+
+export * from './node-render'
+
+export * from './notification'
+
+export * from './number-input'
+
+export * from './number-range-input'
+
+export * from './number'
+
+export * from './paginator'
+
+export * from './palette'
+
+export * from './password-input'
+
+export * from './pop-confirm'
+
+export * from './progress'
+
+export * from './radio-group'
+
+export * from './radio'
+
+export * from './rich-text-editor'
+
+export * from './scroll'
+
+export * from './select'
+
+export * from './slider'
+
+export * from './steps'
+
+export * from './switch'
+
+export * from './table-editor'
+
+export * from './table'
+
+export * from './tabs'
+
+export * from './tag'
+
+export * from './text'
+
+export * from './textarea'
+
+export * from './theme'
+
+export * from './tip'
+
+export * from './tree-select'
+
+export * from './tree'
+
+export * from './watermark'
+
+export * from './progress-nodes'

package/src/components/input/index.ts

@@ -0,0 +1 @@
+export { default as UInput } from './input.vue'