@veltra/desktop 1.0.0

package/src/components/table-editor/table-editor.vue

@@ -0,0 +1,103 @@
+<template>
+  <u-table
+    :columns="internalColumns"
+    :data="modelValue || []"
+    :class="cls.b"
+    :stripe="false"
+    show-index
+    :slots="$slots"
+  >
+    <template #column:__operation="{ row }">
+      <ButtonCommonProps tag="div" style="display: flex; justify-content: center; gap: 8px">
+        <u-button type="danger" @click="handleDelete(row.index)" :icon="Minus" title="移除" />
+        <u-button :icon="Plus" @click="handleCreate(row.index)" title="新增到下一行" />
+        <u-button :icon="Copy" @click="handleCopy(row)" title="复制到下一行" />
+      </ButtonCommonProps>
+    </template>
+
+    <!-- <template #header:__operation> </template> -->
+
+    <template #empty>
+      <div style="text-align: center; padding: 4px 0">
+        <u-button
+          text
+          size="small"
+          type="primary"
+          v-if="!modelValue.length"
+          :icon="Plus"
+          @click="handleCreate()"
+          >添加</u-button
+        >
+      </div>
+    </template>
+  </u-table>
+</template>
+
+<script lang="ts" setup>
+import { useComponentProps } from '@veltra/compositions'
+import { Copy, Minus, Plus } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed } from 'vue'
+
+import type { TableEditorProps, TableEditorEmits, TableColumn } from '../../types'
+import { UButton } from '../button'
+import { UTable } from '../table'
+import type { TableRowNode } from '../table/node/row'
+
+defineOptions({
+  name: 'TableEditor'
+})
+
+const { columns = [], modelValue = [] } = defineProps<TableEditorProps>()
+const emit = defineEmits<TableEditorEmits>()
+
+const cls = bem('table-editor')
+
+const ButtonCommonProps = useComponentProps({
+  size: 'small',
+  circle: true,
+  text: true,
+  type: 'primary'
+})
+
+const actionColumn: TableColumn = {
+  key: '__operation',
+  name: '操作', // 使用name而不是title
+  width: 120,
+  align: 'center',
+  fixed: 'right',
+  resizable: false
+}
+
+// 内部列定义，添加编辑和删除操作列
+const internalColumns = computed(() => {
+  return [...columns, actionColumn]
+})
+
+function handleCreate(index?: number) {
+  if (index !== undefined) {
+    emit('update:modelValue', [
+      ...modelValue.slice(0, index + 1),
+      {},
+      ...modelValue.slice(index + 1)
+    ])
+  } else {
+    emit('update:modelValue', [...modelValue, {}])
+  }
+}
+
+function handleCopy(row: TableRowNode) {
+  emit('update:modelValue', [
+    ...modelValue.slice(0, row.index + 1),
+    JSON.parse(JSON.stringify(row.data)),
+    ...modelValue.slice(row.index + 1)
+  ])
+}
+
+function handleDelete(index: number) {
+  emit(
+    'update:modelValue',
+    modelValue.filter((_, i) => i !== index)
+  )
+}
+</script>

package/src/components/tabs/index.ts

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

package/src/components/tabs/style.scss

@@ -0,0 +1,193 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+@use 'sass:map';
+@use 'sass:list';
+
+$root-name: tabs;
+
+@mixin position($p, $e: ()) {
+  @include m.m($p...) {
+    @if (list.length($e) > 0) {
+      @include m.bem($root-name, $e) {
+        @content;
+      }
+    } @else {
+      @content;
+    }
+  }
+}
+
+@include m.b($root-name) {
+  display: flex;
+
+  @include m.e(header) {
+    flex-shrink: 0;
+  }
+
+  @include m.e(content) {
+    flex-grow: 1;
+  }
+
+  @include m.e(header-item) {
+    cursor: pointer;
+    font-weight: 600;
+    letter-spacing: 1px;
+    color: fn.use-var(text-color, main);
+    user-select: none;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      background-color: fn.use-var(color, primary);
+      transition-duration: 0.25s;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
+    }
+
+    @include m.flex;
+
+    @include m.is(disabled) {
+      color: fn.use-var(text-color, disabled);
+      cursor: not-allowed;
+    }
+
+    @include m.is(active) {
+      color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.e(close) {
+    width: 0;
+    transition-property: width, margin-left;
+    transition-duration: 0.25s;
+    margin-left: 0;
+  }
+
+  @include m.e(close-placeholder) {
+    height: 1em;
+    width: 1em;
+    margin-left: fn.use-var(gap, small);
+  }
+
+  @include position((top, bottom), header) {
+    @include m.flex;
+  }
+
+  @include position((top, bottom), header-item) {
+    &::after {
+      bottom: 0;
+      left: 0;
+      height: 2px;
+      width: 100%;
+      transform: scaleX(0);
+    }
+
+    @include m.is(active) {
+      &::after {
+        transform: scaleX(1);
+      }
+    }
+  }
+
+  // 位置上
+  @include position(top) {
+    flex-direction: column;
+  }
+  @include position(top, header) {
+    border-bottom: fn.use-var(border);
+  }
+
+  // 位置下
+  @include position(bottom) {
+    flex-direction: column-reverse;
+  }
+  @include position(bottom, header) {
+    border-top: fn.use-var(border);
+  }
+
+  @include position(bottom, header-item) {
+    border-radius: 0 0 fn.use-var(radius, large) fn.use-var(radius, large);
+  }
+
+  @include position((left, right), content) {
+    height: 100%;
+  }
+
+  @include position((left, right), header-item) {
+    &::after {
+      top: 0;
+      width: 2px;
+      height: 100%;
+
+      transform: scaleY(0);
+    }
+
+    @include m.is(active) {
+      &::after {
+        transform: scaleY(1);
+      }
+    }
+  }
+
+  // 位置左
+  @include position(left, header) {
+    border-right: fn.use-var(border);
+  }
+
+  @include position(left, header-item) {
+    border-radius: fn.use-var(radius, large) 0 0 fn.use-var(radius, large);
+    justify-content: flex-end;
+
+    &::after {
+      right: 0;
+    }
+  }
+
+  // 位置右
+  @include position(right) {
+    flex-direction: row-reverse;
+  }
+  @include position(right, header) {
+    border-left: fn.use-var(border);
+  }
+  @include position(right, header-item) {
+    border-radius: 0 fn.use-var(radius, large) fn.use-var(radius, large) 0;
+
+    &::after {
+      left: 0;
+    }
+  }
+
+  // 尺寸
+  @include m.size using ($size) {
+    @include m.bem($root-name, header-item) {
+      height: fn.use-var(form-component-height, $size);
+      padding: 0 fn.use-var(gap, $size);
+
+      &:hover {
+        @include m.bem($root-name, close) {
+          width: fn.use-var(font-size-main, $size);
+          margin-left: fn.use-var(gap, small);
+        }
+      }
+    }
+  }
+
+  @include m.m(left, right) {
+    @include m.bem($root-name, close) {
+      width: auto;
+    }
+  }
+
+  @include m.e(content) {
+    width: 100%;
+    border-radius: fn.use-var(radius, default);
+  }
+
+  @include m.e(ripple) {
+    background-color: fn.use-var(color, primary);
+    opacity: 0.1;
+  }
+}

package/src/components/tabs/style.ts

@@ -0,0 +1,4 @@
+import '../scroll/style'
+import '../icon/style'
+import '@veltra/directives/ripple/style.js'
+import './style.scss'

package/src/components/tabs/tabs.vue

@@ -0,0 +1,167 @@
+<template>
+  <div :class="[cls.b, cls.m(position!), cls.m(size)]">
+    <ul :class="[cls.e('header'), cls.em('header', position!)]" ref="headerRef">
+      <li
+        v-for="(item, index) in tabItems"
+        :key="item.key"
+        :class="[
+          cls.e('header-item'),
+          bem.is('active', model === item.key),
+          bem.is('disabled', item.disabled === true)
+        ]"
+        v-ripple="item.disabled ? false : cls.e('ripple')"
+        @click.stop="handleClick(item, index)"
+      >
+        <slot :name="`name:${item.key}`">
+          {{ item.name }}
+        </slot>
+
+        <template v-if="editable">
+          <u-icon
+            v-if="!item.disabled"
+            :class="cls.e('close')"
+            @click.stop="handleClose(item, index)"
+            @mousedown.stop
+          >
+            <Close />
+          </u-icon>
+          <i v-else :class="cls.e('close-placeholder')"></i>
+        </template>
+      </li>
+
+      <li v-if="editable" :class="[cls.e('header-item'), cls.e('add')]" @click="handleAdd">
+        <u-icon>
+          <Plus />
+        </u-icon>
+      </li>
+    </ul>
+
+    <transition name="fade" mode="out-in">
+      <KeepAlive v-if="keepAlive">
+        <component :key="model" :is="renderSlots()" />
+      </KeepAlive>
+      <component v-else :key="model" :is="renderSlots()" />
+    </transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useFallbackProps } from '@veltra/compositions'
+import { vRipple } from '@veltra/directives'
+import { Close, Plus } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, createVNode, nextTick, shallowRef, watch, type CSSProperties } from 'vue'
+
+import type { TabItem, TabsProps, TabsEmits, ComponentSize } from '../../types'
+import { UIcon } from '../icon'
+import { UScroll } from '../scroll'
+
+defineOptions({
+  name: 'Tabs'
+})
+
+const props = withDefaults(defineProps<TabsProps>(), {
+  position: 'top'
+})
+
+const emit = defineEmits<TabsEmits>()
+
+const slots = defineSlots<{
+  [key: string]: (props: { key: string }) => any
+  [key: `name:${string}`]: () => any
+}>()
+
+const { size } = useFallbackProps([props], {
+  size: 'default' as ComponentSize
+})
+
+const tabItems = computed(() => {
+  return props.items
+})
+
+const cls = bem('tabs')
+
+const headerRef = shallowRef<HTMLElement>()
+
+/** 当前活动标签 */
+const index = shallowRef(-1)
+const model = defineModel<string>()
+
+const markStyle = shallowRef<CSSProperties>({})
+
+let changedByEvent = false
+watch(
+  [model, () => props.items],
+  ([model, items]) => {
+    if (changedByEvent) return
+    index.value = items.findIndex((item) => item.key === model)
+  },
+  { immediate: true }
+)
+
+watch(
+  [index, () => props.position, () => props.editable],
+  async ([index, position, editable]) => {
+    if (index === -1 || editable) return
+    await nextTick()
+
+    const headerEl = headerRef.value!
+
+    const headerRect = headerEl.getBoundingClientRect()
+    const el = headerEl.children[index]! as HTMLLIElement
+    const { offsetWidth, offsetHeight } = el
+
+    const rect = el.getBoundingClientRect()
+
+    if (position === 'top' || position === 'bottom') {
+      markStyle.value = {
+        width: offsetWidth + 'px',
+        transform: `translate3d(${rect.left - headerRect.left}px, 0, 0)`
+      }
+    } else {
+      markStyle.value = {
+        height: offsetHeight + 'px',
+        transform: `translate3d(0, ${rect.top - headerRect.top}px, 0)`
+      }
+    }
+  },
+  { immediate: true }
+)
+
+const handleClick = (item: TabItem, _index: number) => {
+  if (item.disabled) return
+
+  changedByEvent = true
+  index.value = _index
+  model.value = item.key
+  nextTick(() => {
+    changedByEvent = false
+  })
+}
+
+const renderSlots = () => {
+  const key = model.value
+  if (!key) return null
+  const nodes = slots[key]?.({ key })
+  if (Array.isArray(nodes)) {
+    return createVNode(UScroll, { class: cls.e('content') }, { default: () => nodes })
+  }
+  return nodes
+}
+
+/** 关闭标签 */
+const handleClose = (item: TabItem, index: number) => {
+  const { items } = props
+  if (model.value === item.key) {
+    model.value = (items[index + 1] ?? items[index - 1])!.key
+  }
+
+  emit('update:items', [...items.slice(0, index), ...items.slice(index + 1)])
+
+  emit('delete', item, index)
+}
+
+const handleAdd = () => {
+  emit('create')
+}
+</script>

package/src/components/tag/index.ts

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

package/src/components/tag/style.scss

@@ -0,0 +1,91 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+@use 'sass:map';
+
+$root-name: tag;
+
+:root {
+  --u-tag-small: 20px;
+  --u-tag-default: 24px;
+  --u-tag-large: 28px;
+}
+
+@include m.b($root-name) {
+  cursor: default;
+  color: fn.use-var(text-color, main);
+  background-color: fn.use-var(color, default);
+  overflow: hidden;
+  min-width: 0;
+  border: 1px solid fn.use-var(text-color, main);
+  @include m.flex(inline-flex, flex-start, center);
+
+  // 进入动画
+  animation: tag-zoom-in 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
+  @include m.e(content) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-grow: 1;
+  }
+
+  @include m.e(icon-close) {
+    cursor: pointer;
+    flex-shrink: 0;
+    border-radius: 50%;
+  }
+
+  @include m.size using ($size) {
+    height: var(--u-tag-#{$size});
+    font-size: fn.use-var(font-size-main, $size);
+    padding: 0 fn.use-var(gap, $size);
+    border-radius: fn.use-var(radius, $size);
+
+    @include m.bem($root-name, icon-close) {
+      margin-left: calc(fn.use-var(gap, $size) / 2);
+    }
+
+    @include m.is(round) {
+      border-radius: calc(var(--u-tag-#{$size}) / 2);
+    }
+  }
+
+  @include m.is(dark) {
+    border-color: fn.use-var(color, default);
+  }
+
+  // 颜色样式
+  @each $type in vars.$color-types {
+    @include m.m(color-#{$type}) {
+      color: fn.use-var(color, $type);
+      border-color: fn.use-var(color, $type);
+      background-color: fn.use-var(color, $type, light-9);
+
+      @include m.is(dark) {
+        color: fn.use-var(text-color, white);
+        background-color: fn.use-var(color, $type);
+      }
+
+      @include m.bem($root-name, icon-close) {
+        &:hover {
+          border: 1px solid fn.use-var(color, $type);
+          // background-color: #ddd;
+        }
+      }
+    }
+  }
+}
+
+// 进入缩放动画定义
+@keyframes tag-zoom-in {
+  0% {
+    opacity: 0;
+    transform: scale3d(0, 0, 1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}

package/src/components/tag/style.ts

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

package/src/components/tag/tag.vue

@@ -0,0 +1,55 @@
+<template>
+  <span :class="className">
+    <span :class="cls.e('content')">
+      <slot />
+    </span>
+
+    <u-icon v-if="closable" @click.stop="handleClose" :class="cls.e('icon-close')">
+      <Close />
+    </u-icon>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { Close } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed } from 'vue'
+
+import type { TagEmits, TagProps } from '../../types'
+import { UIcon } from '../icon'
+
+defineOptions({
+  name: 'Tag'
+})
+
+const cls = bem('tag')
+
+const props = defineProps<TagProps>()
+
+const emit = defineEmits<TagEmits>()
+
+const { formProps } = useFormComponent()
+const { size } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default'
+})
+
+const handleClose = () => {
+  emit('close')
+}
+
+const className = computed(() => {
+  const { type } = props
+  return [
+    cls.b,
+    cls.m(size.value),
+    type && cls.m('color-' + type),
+    bem.is('round', props.round),
+    bem.is('dark', props.dark)
+  ]
+})
+
+// const classRound = computed(() => {
+//   return [bem.is('round', props.round)]
+// })
+</script>

package/src/components/text/index.ts

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

package/src/components/text/style.scss

@@ -0,0 +1,54 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$role-size: (
+  main-title: (
+    font-size: 18px,
+    font-weight: 600,
+    color: #333
+  ),
+  title: (
+    font-size: 16px,
+    font-weight: 600,
+    color: #333
+  ),
+  sub-title: (
+    font-size: 16px,
+    font-weight: 500,
+    color: #999
+  ),
+  content: (
+    font-size: 14px,
+    font-weight: 300,
+    color: #666
+  ),
+  additional: (
+    font-size: 12px,
+    font-weight: 300,
+    color: #999
+  )
+);
+
+@include m.b(text) {
+  margin: 0;
+  line-height: 1.3;
+  overflow: hidden;
+  position: relative;
+
+  @each $role, $styles in $role-size {
+    @include m.is(#{$role}) {
+      @each $prop, $val in $styles {
+        #{$prop}: $val;
+      }
+    }
+  }
+
+  @include m.is(italic) {
+    font-style: italic;
+  }
+
+  @include m.is(bold) {
+    font-weight: bold;
+  }
+}

package/src/components/text/style.ts

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