@veltra/desktop 1.0.0

package/src/components/text/text.vue

@@ -0,0 +1,74 @@
+<template>
+  <p :class="classList" :style="style">
+    <UNodeRender :content="getTextVNode()" ref="aa" />
+  </p>
+</template>
+
+<script lang="ts" setup>
+import { bem, withUnit, isTextNode, getHighlightChunks } from '@veltra/utils'
+import { type CSSProperties, type VNode, computed, useSlots, h, createTextVNode } from 'vue'
+
+import type { TextProps } from '../../types'
+import { UNodeRender } from '../node-render'
+
+defineOptions({
+  name: 'Text'
+})
+
+const props = withDefaults(defineProps<TextProps>(), {
+  as: 'content'
+})
+
+const cls = bem('text')
+
+const classList = computed(() => {
+  return [cls.b, bem.is(props.as), bem.is('bold', props.bold), bem.is('italic', props.italic)]
+})
+
+const style = computed(() => {
+  const style: CSSProperties = {
+    fontSize: withUnit(props.fontSize, 'px')
+  }
+  const { deleted, underline } = props
+  if (deleted) {
+    style.textDecoration = 'line-through'
+  }
+  if (underline) {
+    style.textDecoration = 'underline'
+  }
+
+  return style
+})
+
+const slots = useSlots()
+const getTextVNode = () => {
+  const nodes = slots.default?.()
+  if (!nodes?.length) return undefined
+
+  // 只允许渲染文本
+  const textNodes = nodes.filter((node) => isTextNode(node))
+
+  const { highlight } = props
+
+  if (!highlight) {
+    return textNodes
+  }
+
+  return textNodes.reduce((nodes, textNode) => {
+    const chunks = getHighlightChunks(
+      textNode.children as string,
+      Array.isArray(highlight) ? highlight : [highlight]
+    )
+
+    chunks.forEach((chunk) => {
+      if (chunk.highlight) {
+        nodes.push(h('mark', chunk.text))
+      } else {
+        nodes.push(createTextVNode(chunk.text))
+      }
+    })
+
+    return nodes
+  }, [] as VNode[])
+}
+</script>

package/src/components/textarea/index.ts

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

package/src/components/textarea/style.scss

@@ -0,0 +1,86 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$root-name: textarea;
+
+@include m.b($root-name) {
+  position: relative;
+  width: 100%;
+  box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+  transition: box-shadow 0.25s ease;
+  overflow: hidden;
+  vertical-align: middle;
+
+  &:hover {
+    // 悬浮时边框颜色为 var(--u-color-primary);
+    box-shadow: inset 0 0 1px 1px fn.use-var(color, primary);
+  }
+
+  @include m.size using ($size) {
+    border-radius: fn.use-var(radius, $size);
+
+    @include m.bem($root-name, native) {
+      padding: calc(fn.use-var(gap, $size) / 2);
+      min-height: fn.use-var(form-component-height, $size);
+      padding-right: 20px;
+    }
+
+    @include m.bem($root-name, clear) {
+      font-size: fn.use-var(font-size-main, $size);
+    }
+  }
+
+  @include m.e(native) {
+    color: fn.use-var(text-color, main);
+    outline: none;
+    border: none;
+    background-color: transparent;
+    font-family: fn.use-var(font-family);
+    font-size: 1em;
+    width: 100%;
+    display: block;
+    padding: 0;
+    resize: vertical;
+    overflow: auto;
+    line-height: 1.3;
+
+    &::placeholder {
+      color: fn.use-var(text-color, placeholder);
+    }
+  }
+
+  @include m.is(focus) {
+    // 使用变量 color 和 primary 设置内阴影和边框颜色
+    box-shadow: inset 0 0 1px 1px fn.use-var(color, primary);
+  }
+
+  @include m.is(disabled) {
+    background-color: fn.use-var(color, disabled);
+    box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+
+    @include m.bem($root-name, native) {
+      cursor: not-allowed;
+      resize: none;
+    }
+  }
+
+  @include m.m(count) {
+    display: block;
+    position: absolute;
+    bottom: 8px;
+    right: 4px;
+    font-size: 12px;
+    background: fn.use-var(bg-color, middle);
+  }
+
+  @include m.m(clear) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 0;
+    cursor: pointer;
+    color: fn.use-var(text-color, main);
+    min-width: 20px;
+  }
+}

package/src/components/textarea/style.ts

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

package/src/components/textarea/textarea.vue

@@ -0,0 +1,135 @@
+<template>
+  <div
+    v-if="!readonly"
+    :class="textareaClass"
+    @mouseenter="hovered = true"
+    @mouseleave="hovered = false"
+  >
+    <textarea
+      :class="cls.e('native')"
+      :placeholder="placeholder"
+      v-model="model"
+      :maxlength="maxlength"
+      :rows="rows"
+      :cols="cols"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @change="handleChange"
+      :disabled="disabled"
+      :readonly="nativeReadonly"
+      ref="textareaRef"
+    />
+    <span v-if="props.maxlength && props.showCount" :class="cls.m('count')">
+      {{ initNum }}/{{ props.maxlength }}
+    </span>
+    <Transition name="zoom-in" mode="out-in">
+      <u-icon
+        v-if="props.clearable && model! && hovered && !disabled && !readonly"
+        :class="cls.m('clear')"
+        @click.stop="handleClear"
+      >
+        <Close />
+      </u-icon>
+    </Transition>
+  </div>
+
+  <span v-else style="white-space: pre-wrap">
+    {{ model || FORM_EMPTY_CONTENT }}
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { useFocus, useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { Close } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { computed, ref, shallowRef, watch } from 'vue'
+
+import type { TextareaProps, TextareaEmits, ComponentSize } from '../../types'
+import { UIcon } from '../icon'
+import { calcTextareaHeight } from './utils'
+
+defineOptions({
+  name: 'Textarea'
+})
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  placeholder: '请输入',
+  resize: true,
+  clearable: true,
+  disabled: undefined,
+  readonly: undefined,
+  autosize: false
+})
+
+const cls = bem('textarea')
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default' as ComponentSize,
+  disabled: false,
+  readonly: false
+})
+
+const emit = defineEmits<TextareaEmits>()
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+const model = defineModel<string>()
+
+const hovered = shallowRef(false)
+
+const { focus, handleBlur, handleFocus } = useFocus((focused) => {
+  focused ? emit('focus') : emit('blur')
+})
+
+const textareaClass = computed(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('resize-none', !props.resize),
+    bem.is('disabled', disabled.value),
+    bem.is('readonly', readonly.value),
+    bem.is('focus', focus.value),
+    cls.m('more')
+  ]
+})
+
+const handleInput = (e: Event) => {
+  const value = (e.target as HTMLTextAreaElement).value
+  if (value.length > props.maxlength!) {
+    // 如果输入的字符数超过了最大长度，截取字符串到最大长度
+    const truncatedValue = value.slice(0, props.maxlength)
+    emit('update:modelValue', truncatedValue)
+  } else {
+    // 如果没有超过最大长度，则正常更新模型值
+    emit('update:modelValue', value)
+  }
+}
+
+const initNum = computed(() => {
+  if (!props.maxlength) return 0
+  return props.maxlength - (model.value?.length ?? 0)
+})
+
+const handleClear = () => {
+  model.value = ''
+  emit('clear')
+}
+
+const handleChange = (e: Event) => {
+  emit('change', (e.target as HTMLTextAreaElement).value)
+}
+
+watch(
+  [model, textareaRef],
+  ([model, textareaRef]) => {
+    if (!textareaRef) return
+    if (!props.autosize) return
+    calcTextareaHeight(textareaRef)
+  },
+  { immediate: true }
+)
+</script>

package/src/components/textarea/utils.ts

@@ -0,0 +1,11 @@
+import { setStyles } from '@veltra/utils'
+import { nextTick } from 'vue'
+
+export function calcTextareaHeight(el: HTMLTextAreaElement): void {
+  setStyles(el, { height: 'auto' })
+  nextTick(() => {
+    const { scrollHeight } = el
+
+    setStyles(el, { overflow: 'hidden', height: scrollHeight + 'px' })
+  })
+}

package/src/components/theme/di.ts

@@ -0,0 +1,4 @@
+import type { BEM } from '@veltra/utils'
+import type { InjectionKey } from 'vue'
+
+export const ThemeDIKey: InjectionKey<{ cls: BEM<'theme', 'u-'> }> = Symbol('ThemeDIKey')

package/src/components/theme/group-item.vue

@@ -0,0 +1,23 @@
+<template>
+  <div :class="cls.e('group-item')">
+    <label :class="cls.e('group-label')">
+      {{ label }}
+    </label>
+
+    <div :class="cls.e('group-item-content')">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+
+import { ThemeDIKey } from './di'
+
+defineProps<{
+  label: string
+}>()
+
+const { cls } = inject(ThemeDIKey)!
+</script>

package/src/components/theme/group.vue

@@ -0,0 +1,23 @@
+<template>
+  <div :class="cls.e('group')">
+    <div :class="cls.e('group-title')">
+      {{ title }}
+    </div>
+
+    <div :class="cls.e('group-content')">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+
+import { ThemeDIKey } from './di'
+
+defineProps<{
+  title: string
+}>()
+
+const { cls } = inject(ThemeDIKey)!
+</script>

package/src/components/theme/index.ts

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

package/src/components/theme/schema.ts

@@ -0,0 +1,210 @@
+export type ThemeFieldKind = 'palette' | 'input' | 'number' | 'select'
+
+export interface ThemeFieldOption {
+  label: string
+  value: string
+}
+
+export interface ThemeField {
+  key: string
+  label: string
+  path: string[]
+  kind: ThemeFieldKind
+  hint?: string
+  placeholder?: string
+  min?: number
+  max?: number
+  step?: number
+  suffix?: string
+  options?: ThemeFieldOption[]
+}
+
+export interface ThemeSection {
+  key: string
+  title: string
+  description: string
+  fields: ThemeField[]
+}
+
+const borderStyleOptions: ThemeFieldOption[] = [
+  { label: '实线', value: 'solid' },
+  { label: '虚线', value: 'dashed' },
+  { label: '点线', value: 'dotted' },
+  { label: '双线', value: 'double' }
+]
+
+function paletteField(key: string, label: string, path: string[], hint?: string): ThemeField {
+  return { key, label, path, kind: 'palette', hint }
+}
+
+function inputField(
+  key: string,
+  label: string,
+  path: string[],
+  placeholder?: string,
+  hint?: string
+): ThemeField {
+  return { key, label, path, kind: 'input', placeholder, hint }
+}
+
+function numberField(
+  key: string,
+  label: string,
+  path: string[],
+  options: Pick<ThemeField, 'min' | 'max' | 'step' | 'suffix' | 'hint'>
+): ThemeField {
+  return {
+    key,
+    label,
+    path,
+    kind: 'number',
+    min: options.min,
+    max: options.max,
+    step: options.step,
+    suffix: options.suffix,
+    hint: options.hint
+  }
+}
+
+function pxField(
+  key: string,
+  label: string,
+  path: string[],
+  min: number,
+  max: number,
+  hint?: string
+): ThemeField {
+  return numberField(key, label, path, { min, max, step: 1, suffix: 'px', hint })
+}
+
+function selectField(
+  key: string,
+  label: string,
+  path: string[],
+  options: ThemeFieldOption[],
+  hint?: string
+): ThemeField {
+  return { key, label, path, kind: 'select', options, hint }
+}
+
+export const THEME_SECTIONS: ThemeSection[] = [
+  {
+    key: 'color',
+    title: '综合色板',
+    description: '品牌色与语义状态色，决定按钮、标签与反馈态的主视觉。',
+    fields: [
+      paletteField('color.primary', '主要颜色', ['color', 'primary']),
+      paletteField('color.success', '成功颜色', ['color', 'success']),
+      paletteField('color.warning', '警告颜色', ['color', 'warning']),
+      paletteField('color.danger', '危险颜色', ['color', 'danger']),
+      paletteField('color.info', '信息颜色', ['color', 'info']),
+      paletteField('color.disabled', '禁用颜色', ['color', 'disabled']),
+      paletteField('color.default', '默认颜色', ['color', 'default'])
+    ]
+  },
+  {
+    key: 'surface',
+    title: '表面层次',
+    description: '控制背景、文字、边框与阴影，决定整个界面的空气感与对比度。',
+    fields: [
+      paletteField('bg.color.top', '顶部背景', ['bg', 'color', 'top']),
+      paletteField('bg.color.middle', '中部背景', ['bg', 'color', 'middle']),
+      paletteField('bg.color.bottom', '底部背景', ['bg', 'color', 'bottom']),
+      paletteField('bg.color.hover', '悬停背景', ['bg', 'color', 'hover']),
+      paletteField('bg.color.black', '黑色背景', ['bg', 'color', 'black']),
+      inputField('bg.filter.blur', '背景模糊', ['bg', 'filter', 'blur'], '例如：blur(16px)'),
+      inputField(
+        'bg.filter.saturate',
+        '背景饱和度',
+        ['bg', 'filter', 'saturate'],
+        '例如：saturate(180%)'
+      ),
+      paletteField('text-color.title', '标题文字', ['text-color', 'title']),
+      paletteField('text-color.main', '主要文字', ['text-color', 'main']),
+      paletteField('text-color.placeholder', '占位文字', ['text-color', 'placeholder']),
+      paletteField('text-color.second', '次要文字', ['text-color', 'second']),
+      paletteField('text-color.assist', '辅助文字', ['text-color', 'assist']),
+      paletteField('text-color.disabled', '禁用文字', ['text-color', 'disabled']),
+      paletteField('text-color.white', '白色文字', ['text-color', 'white']),
+      paletteField('border.color', '边框颜色', ['border', 'color']),
+      pxField('border.width', '边框宽度', ['border', 'width'], 0, 10),
+      selectField('border.style', '边框样式', ['border', 'style'], borderStyleOptions),
+      paletteField('shadow.color', '阴影颜色', ['shadow', 'color']),
+      pxField('shadow.x', '水平偏移', ['shadow', 'x'], -24, 24),
+      pxField('shadow.y', '垂直偏移', ['shadow', 'y'], -24, 24),
+      pxField('shadow.blur', '模糊半径', ['shadow', 'blur'], 0, 64),
+      pxField('shadow.spread', '扩散半径', ['shadow', 'spread'], -12, 24)
+    ]
+  },
+  {
+    key: 'control',
+    title: '表单尺度',
+    description: '统一基础控件的边角、尺寸和节奏，让组件家族看起来更一致。',
+    fields: [
+      pxField('radius.small', '小圆角', ['radius', 'small'], 0, 24),
+      pxField('radius.default', '默认圆角', ['radius', 'default'], 0, 24),
+      pxField('radius.large', '大圆角', ['radius', 'large'], 0, 32),
+      pxField(
+        'form-component-height.small',
+        '小表单高度',
+        ['form-component-height', 'small'],
+        16,
+        40
+      ),
+      pxField(
+        'form-component-height.default',
+        '默认表单高度',
+        ['form-component-height', 'default'],
+        20,
+        52
+      ),
+      pxField(
+        'form-component-height.large',
+        '大表单高度',
+        ['form-component-height', 'large'],
+        24,
+        64
+      ),
+      pxField('gap.small', '小间距', ['gap', 'small'], 0, 20),
+      pxField('gap.default', '默认间距', ['gap', 'default'], 0, 24),
+      pxField('gap.large', '大间距', ['gap', 'large'], 0, 32)
+    ]
+  },
+  {
+    key: 'typography',
+    title: '字体系统',
+    description: '管理字体族与标题、正文、辅助文本的层级尺寸。',
+    fields: [
+      inputField(
+        'font-family',
+        '字体族',
+        ['font-family'],
+        '例如："IBM Plex Sans", "PingFang SC", sans-serif'
+      ),
+      pxField('font-size-title.small', '小标题字号', ['font-size-title', 'small'], 8, 28),
+      pxField('font-size-title.default', '默认标题字号', ['font-size-title', 'default'], 8, 32),
+      pxField('font-size-title.large', '大标题字号', ['font-size-title', 'large'], 10, 40),
+      pxField('font-size-main.small', '小正文字号', ['font-size-main', 'small'], 8, 20),
+      pxField('font-size-main.default', '默认正文字号', ['font-size-main', 'default'], 8, 24),
+      pxField('font-size-main.large', '大正文字号', ['font-size-main', 'large'], 10, 28),
+      pxField('font-size-assist.small', '小辅助字号', ['font-size-assist', 'small'], 8, 18),
+      pxField('font-size-assist.default', '默认辅助字号', ['font-size-assist', 'default'], 8, 20),
+      pxField('font-size-assist.large', '大辅助字号', ['font-size-assist', 'large'], 8, 24)
+    ]
+  },
+  {
+    key: 'responsive',
+    title: '响应断点',
+    description: '维护布局与响应式行为使用的断点变量。',
+    fields: [
+      pxField('breakpoint.xs', '超小屏幕', ['breakpoint', 'xs'], 320, 900),
+      pxField('breakpoint.sm', '小屏幕', ['breakpoint', 'sm'], 480, 1200),
+      pxField('breakpoint.md', '中屏幕', ['breakpoint', 'md'], 768, 1600),
+      pxField('breakpoint.lg', '大屏幕', ['breakpoint', 'lg'], 1024, 2560)
+    ]
+  }
+]
+
+export const THEME_FIELD_COUNT = THEME_SECTIONS.reduce((count, section) => {
+  return count + section.fields.length
+}, 0)