@veltra/desktop 1.0.0

package/src/components/progress-nodes/style.scss

@@ -0,0 +1,174 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$root-name: progress-nodes;
+
+@include m.b($root-name) {
+  // CSS 变量定义
+  --checked-color: #{fn.use-var(color, primary)};
+  --node-color: #{fn.use-var(text-color, placeholder)};
+  --dot-size: 14px;
+
+  position: relative;
+  color: var(--node-color);
+  overflow: auto;
+  cursor: default;
+
+  // 隐藏滚动条但保留功能
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @include m.is(scrollable) {
+    cursor: grab;
+  }
+  @include m.is(dragging) {
+    cursor: grabbing;
+  }
+
+  // 颜色类型变体
+  @each $type in vars.$color-types {
+    @include m.m($type) {
+      --checked-color: #{fn.use-var(color, $type)};
+    }
+  }
+
+  // 列表容器
+  @include m.e(list) {
+    position: relative;
+    display: flex;
+    padding: 0;
+    margin: 0;
+  }
+
+  // 节点项
+  @include m.e(item) {
+    font-weight: 600;
+    color: inherit;
+    flex: 0 0 auto;
+    transition:
+      background-color 0.2s,
+      color 0.2s;
+    border-radius: fn.use-var(radius, base);
+
+    &:hover {
+      @include m.bem($root-name, dot) {
+        border-color: fn.use-var(text-color, second);
+      }
+
+      @include m.bem($root-name, label) {
+        color: fn.use-var(text-color, primary);
+      }
+    }
+  }
+
+  // 节点容器
+  @include m.e(node) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  // 虚线连接
+  @include m.e(link) {
+    position: absolute;
+    border-style: dashed;
+    border-color: fn.use-var(border, color);
+  }
+
+  // 节点圆点
+  @include m.e(dot) {
+    position: relative;
+    width: var(--dot-size);
+    height: var(--dot-size);
+    border: 2px solid currentColor;
+    border-radius: 50%;
+    background-color: fn.use-var(bg-color, top);
+    box-sizing: border-box;
+    transition:
+      background-color 0.2s,
+      border-color 0.2s;
+    z-index: 1;
+    @include m.flex($align: center, $justify: center);
+
+    > * {
+      font-size: 10px;
+    }
+  }
+
+  // 标签
+  @include m.e(label) {
+    font-size: fn.use-var(font-size-assist, small);
+    color: fn.use-var(text-color, second);
+    transition: color 0.2s;
+    @include m.ellipsis;
+  }
+
+  // checked 状态 - 圆点填充 colorType 颜色
+  @include m.bem($root-name, item) {
+    @include m.is(checked) {
+      color: var(--checked-color);
+
+      @include m.bem($root-name, dot) {
+        background-color: var(--checked-color);
+        border-color: var(--checked-color);
+      }
+
+      @include m.bem($root-name, label) {
+        color: var(--checked-color);
+      }
+    }
+  }
+
+  // active 状态 - 淡灰色背景 + 圆角
+  @include m.bem($root-name, item) {
+    @include m.is(active) {
+      isolation: isolate;
+      background-color: fn.use-var(bg-color, hover);
+      border-radius: fn.use-var(radius, default);
+    }
+  }
+
+  // 遮罩渐变
+  &.is-mask-start {
+    mask-image: linear-gradient(90deg, transparent, #000 30px);
+  }
+  &.is-mask-end {
+    mask-image: linear-gradient(270deg, transparent, #000 30px);
+  }
+  &.is-mask-start.is-mask-end {
+    mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
+  }
+
+  @include m.e(list) {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  @include m.e(item) {
+    min-width: 80px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 4px;
+    gap: 2px;
+  }
+
+  @include m.e(node) {
+    width: 100%;
+  }
+
+  @include m.e(link) {
+    // 宽度需要跨越当前 item 的右 padding + 下一个 item 的左 padding
+    width: calc(100% - var(--dot-size) + 24px);
+    height: 0;
+    border-width: 1px 0 0 0;
+    left: calc(50% + var(--dot-size) / 2);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}

package/src/components/progress-nodes/style.ts

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

package/src/components/radio/index.ts

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

package/src/components/radio/radio.vue

@@ -0,0 +1,63 @@
+<template>
+  <label :class="classList">
+    <!-- radio框 -->
+    <section :class="cls.e('button')">
+      <input
+        type="radio"
+        :class="cls.e('native')"
+        :value="value"
+        v-model="model"
+        :disabled="disabled"
+        hidden
+      />
+
+      <transition name="zoom-in">
+        <span :class="cls.e('inner')" v-if="radioChecked"></span>
+      </transition>
+    </section>
+
+    <span :class="cls.e('label')">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>
+
+<script lang="ts" setup>
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { computed } from 'vue'
+
+import type { RadioProps, RadioEmits } from '../../types'
+
+defineOptions({
+  name: 'Radio'
+})
+
+const model = defineModel<any>()
+
+const props = withDefaults(defineProps<RadioProps>(), {
+  disabled: undefined
+})
+
+defineEmits<RadioEmits>()
+
+const cls = bem('radio')
+
+const { formProps } = useFormComponent()
+
+const { size, disabled } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false
+})
+
+const radioChecked = computed(() => model.value === props.value)
+
+const classList = computed(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('disabled', disabled.value),
+    bem.is('checked', radioChecked.value)
+  ]
+})
+</script>

package/src/components/radio/style.scss

@@ -0,0 +1,78 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$root-name: radio;
+@include m.b($root-name) {
+  @include m.dark() {
+    --u-radio-border: #595959;
+  }
+
+  cursor: pointer;
+  vertical-align: middle;
+  user-select: none;
+  @include m.flex($display: inline-flex, $align: center);
+
+  @include m.size using ($size) {
+    height: fn.use-var(form-component-height, $size);
+
+    & + & {
+      margin-left: calc(fn.use-var(gap, $size) * 2);
+    }
+
+    @include m.bem($root-name, button) {
+      width: calc(fn.use-var(form-component-height, $size) / 2);
+      height: calc(fn.use-var(form-component-height, $size) / 2);
+      padding: 2px;
+
+      @if ($size == large) {
+        padding: 3px;
+      }
+    }
+
+    @include m.bem($root-name, label) {
+      font-size: fn.use-var(font-size-main, $size);
+    }
+  }
+
+  @include m.e(button) {
+    border-radius: 50%;
+    border: fn.use-var(border, width) fn.use-var(border, style)
+      #{fn.component-var(radio, border, #ccc)};
+    overflow: hidden;
+  }
+
+  @include m.is(checked) {
+    @include m.bem($root-name, button) {
+      border-color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.e(native) {
+    opacity: 0;
+  }
+
+  @include m.e(label) {
+    padding-left: fn.use-var(gap, small);
+  }
+
+  @include m.e(inner) {
+    background-color: fn.use-var(color, primary);
+    border-radius: 50%;
+    display: block;
+    height: 100%;
+  }
+
+  @include m.is(disabled) {
+    color: fn.use-var(text-color, disabled);
+    cursor: not-allowed;
+    @include m.bem($root-name, button) {
+      border-color: fn.use-var(border, color);
+      background-color: fn.use-var(color, disabled);
+    }
+
+    @include m.bem($root-name, inner) {
+      background-color: fn.use-var(text-color, disabled);
+    }
+  }
+}

package/src/components/radio/style.ts

@@ -0,0 +1,2 @@
+import '@veltra/styles/anime/zoom-in.scss'
+import './style.scss'

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

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

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

@@ -0,0 +1,58 @@
+<template>
+  <div :class="[cls.b, bem.is('block', block), cls.m(size)]" v-if="!readonly">
+    <u-radio
+      v-for="item of items"
+      :key="item[valueKey]"
+      :value="item[valueKey]"
+      :model-value="model"
+      @update:model-value="handleUpdate($event, item)"
+      :disabled="disabledItem?.(item) || disabled"
+      :size="size"
+    >
+      {{ item[labelKey] }}
+    </u-radio>
+  </div>
+
+  <template v-else>
+    {{ items.find((item) => item[valueKey] === model)?.[labelKey] || FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { FORM_EMPTY_CONTENT } from '@veltra/utils'
+
+import type { RadioGroupProps, RadioGroupEmits } from '../../types'
+import URadio from '../radio/radio.vue'
+
+defineOptions({
+  name: 'RadioGroup'
+})
+
+const props = withDefaults(defineProps<RadioGroupProps>(), {
+  labelKey: 'label',
+  valueKey: 'value',
+  disabled: undefined,
+  readonly: undefined
+})
+
+const model = defineModel<any>()
+
+const emit = defineEmits<RadioGroupEmits>()
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const cls = bem('radio-group')
+
+const handleUpdate = (value: any, item: Record<string, any>) => {
+  model.value = value
+  emit('change', item)
+}
+</script>

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

@@ -0,0 +1,39 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+@include m.b(radio-group) {
+  vertical-align: middle;
+  @include m.flex($display: inline-flex, $align: center, $wrap: wrap);
+
+  @include m.bem(radio) {
+    margin: 0;
+  }
+
+  @include m.size using($size) {
+    gap: 0 calc(fn.use-var(gap, $size) * 2);
+  }
+
+  @include m.is(block) {
+    display: inline-block;
+
+    @include m.bem(radio) {
+      display: flex;
+    }
+  }
+
+  @include m.e(button-item) {
+    margin: 0px !important;
+    border-right: 0 !important;
+    border-radius: 0 !important;
+
+    &:first-child {
+      border-radius: fn.use-var(radius, default) 0 0 fn.use-var(radius, default) !important;
+    }
+
+    &:last-child {
+      border-right: fn.use-var(border) !important;
+      border-radius: 0 fn.use-var(radius, default) fn.use-var(radius, default) 0 !important;
+    }
+  }
+}

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

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

package/src/components/rich-text-editor/index.ts

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

package/src/components/rich-text-editor/rich-text-editor.vue

@@ -0,0 +1,265 @@
+<template>
+  <div :class="className">
+    <toolbar
+      v-if="!isReadonly && toolbarItems.length > 0"
+      :editor="editor"
+      :toolbar="toolbarItems"
+      :disabled="isDisabled"
+    />
+    <div :class="cls.e('content')">
+      <div
+        ref="editorContainer"
+        :class="cls.e('editable')"
+        :contenteditable="!isDisabled && !isReadonly"
+      ></div>
+      <div v-if="showPlaceholder" :class="cls.e('placeholder')">
+        {{ placeholder }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import type { ToolbarItem } from '../../types'
+
+const LEXICAL_THEME = {
+  paragraph: 'u-rte-paragraph',
+  heading: {
+    h1: 'u-rte-h1',
+    h2: 'u-rte-h2',
+    h3: 'u-rte-h3',
+    h4: 'u-rte-h4',
+    h5: 'u-rte-h5',
+    h6: 'u-rte-h6'
+  },
+  text: {
+    bold: 'u-rte-bold',
+    italic: 'u-rte-italic',
+    underline: 'u-rte-underline',
+    strikethrough: 'u-rte-strikethrough'
+  },
+  list: {
+    ul: 'u-rte-ul',
+    ol: 'u-rte-ol',
+    listitem: 'u-rte-li',
+    nested: { listitem: 'u-rte-li--nested' }
+  },
+  quote: 'u-rte-blockquote',
+
+  link: 'u-rte-link',
+  image: 'u-rte-image'
+}
+
+const DEFAULT_TOOLBAR: ToolbarItem[] = [
+  'undo',
+  'redo',
+  '|',
+  'heading',
+  '|',
+  'bold',
+  'italic',
+  'underline',
+  'strikethrough',
+  '|',
+  'bullet-list',
+  'ordered-list',
+  '|',
+  'blockquote',
+  '|',
+  'link'
+]
+</script>
+
+<script lang="ts" setup>
+import { registerHistory, createEmptyHistoryState } from '@lexical/history'
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'
+import { LinkNode, AutoLinkNode } from '@lexical/link'
+import { ListNode, ListItemNode, registerList } from '@lexical/list'
+import { registerRichText } from '@lexical/rich-text'
+import { HeadingNode, QuoteNode } from '@lexical/rich-text'
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { createEditor, $getRoot, $createParagraphNode, type LexicalEditor } from 'lexical'
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
+
+import type { RichTextEditorProps } from '../../types'
+import Toolbar from './toolbar.vue'
+
+const props = withDefaults(defineProps<RichTextEditorProps>(), {
+  disabled: undefined,
+  readonly: undefined,
+  format: 'html',
+  toolbar: () => DEFAULT_TOOLBAR,
+  placeholder: ''
+})
+
+const model = defineModel<string>()
+
+const cls = bem('rich-text-editor')
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
+
+const isDisabled = computed(() => !!disabled.value)
+const isReadonly = computed(() => !!readonly.value)
+
+const className = computed<string[]>(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('disabled', isDisabled.value),
+    bem.is('readonly', isReadonly.value)
+  ]
+})
+
+const toolbarItems = computed<ToolbarItem[]>(() => {
+  return props.toolbar ?? DEFAULT_TOOLBAR
+})
+
+const editorContainer = useTemplateRef('editorContainer')
+const editor = shallowRef<LexicalEditor | null>(null)
+const showPlaceholder = ref(true)
+let isComposing = false
+let cleanupFns: (() => void)[] = []
+
+function initEditor() {
+  if (!editorContainer.value) return
+
+  const editorInstance = createEditor({
+    namespace: 'URichTextEditor',
+    theme: LEXICAL_THEME,
+    nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode],
+    editable: !isDisabled.value && !isReadonly.value,
+    onError: (error: Error) => {
+      console.error('Lexical error:', error)
+    }
+  })
+
+  editorInstance.setRootElement(editorContainer.value)
+
+  // Register plugins
+  cleanupFns.push(registerRichText(editorInstance))
+  cleanupFns.push(registerList(editorInstance))
+  cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300))
+
+  // Set initial value
+  if (model.value) {
+    setEditorContent(editorInstance, model.value)
+  }
+
+  // Listen for content changes
+  cleanupFns.push(
+    editorInstance.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const root = $getRoot()
+        const textContent = root.getTextContent()
+        showPlaceholder.value = textContent.trim().length === 0
+
+        if (isComposing) return
+
+        let value: string
+        if (props.format === 'json') {
+          value = JSON.stringify(editorState.toJSON())
+        } else {
+          value = $generateHtmlFromNodes(editorInstance)
+        }
+
+        // Avoid circular updates: only emit if content really changed
+        if (value !== model.value) {
+          isComposing = true
+          model.value = value
+          // Use microtask to reset after Vue processes the update
+          queueMicrotask(() => {
+            isComposing = false
+          })
+        }
+      })
+    })
+  )
+
+  // Composing event listeners for IME
+  const rootElement = editorInstance.getRootElement()
+  if (rootElement) {
+    const onCompositionStart = () => {
+      isComposing = true
+    }
+    const onCompositionEnd = () => {
+      isComposing = false
+    }
+    rootElement.addEventListener('compositionstart', onCompositionStart)
+    rootElement.addEventListener('compositionend', onCompositionEnd)
+    cleanupFns.push(() => {
+      rootElement.removeEventListener('compositionstart', onCompositionStart)
+      rootElement.removeEventListener('compositionend', onCompositionEnd)
+    })
+  }
+
+  editor.value = editorInstance
+}
+
+function setEditorContent(editorInstance: LexicalEditor, value: string) {
+  editorInstance.update(() => {
+    const root = $getRoot()
+    root.clear()
+
+    if (props.format === 'json') {
+      try {
+        const parsedState = editorInstance.parseEditorState(value)
+        editorInstance.setEditorState(parsedState)
+      } catch {
+        // If JSON parse fails, treat as empty
+        root.append($createParagraphNode())
+      }
+    } else {
+      // HTML format
+      const parser = new DOMParser()
+      const dom = parser.parseFromString(value, 'text/html')
+      const nodes = $generateNodesFromDOM(editorInstance, dom)
+      root.append(...nodes)
+    }
+  })
+}
+
+// Watch external model changes
+watch(model, (newVal) => {
+  if (!editor.value || isComposing) return
+
+  const editorInstance = editor.value
+
+  // Compare current content to avoid circular updates
+  editorInstance.getEditorState().read(() => {
+    let currentValue: string
+    if (props.format === 'json') {
+      currentValue = JSON.stringify(editorInstance.getEditorState().toJSON())
+    } else {
+      currentValue = $generateHtmlFromNodes(editorInstance)
+    }
+
+    if (currentValue !== newVal) {
+      isComposing = true
+      setEditorContent(editorInstance, newVal ?? '')
+      queueMicrotask(() => {
+        isComposing = false
+      })
+    }
+  })
+})
+
+// Watch disabled/readonly changes
+watch([isDisabled, isReadonly], () => {
+  if (editor.value) {
+    editor.value.setEditable(!isDisabled.value && !isReadonly.value)
+  }
+})
+
+onMounted(() => {
+  initEditor()
+})
+
+onBeforeUnmount(() => {
+  cleanupFns.forEach((fn) => fn())
+  cleanupFns = []
+  editor.value = null
+})
+</script>