@veltra/desktop 1.0.0

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

@@ -0,0 +1,3 @@
+import '@veltra/directives/ripple/style.js'
+import '../input/style'
+import './style.scss'

package/src/components/number-range-input/index.ts

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

package/src/components/number-range-input/number-range-input.vue

@@ -0,0 +1,214 @@
+<template>
+  <div v-if="!readonly" :class="className">
+    <u-number-input
+      v-model="startModel"
+      :placeholder="startPlaceholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :size="size"
+      v-bind="numberInputBind"
+      @change="emitChange"
+    />
+    <span :class="cls.e('separator')">{{ separator }}</span>
+    <u-number-input
+      v-model="endModel"
+      :placeholder="endPlaceholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :size="size"
+      v-bind="numberInputBind"
+      @change="emitChange"
+    />
+  </div>
+
+  <template v-else>
+    {{ readonlyText || FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { n, $n, o } from '@cat-kit/core'
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { computed, getCurrentInstance, nextTick, onMounted, watch } from 'vue'
+
+import type { NumberRangeInputEmits, NumberRangeInputProps, NumberRangeTuple } from '../../types'
+import { UNumberInput } from '../number-input'
+
+defineOptions({
+  name: 'NumberRangeInput'
+})
+
+const props = withDefaults(defineProps<NumberRangeInputProps>(), {
+  startPlaceholder: '请输入',
+  endPlaceholder: '请输入',
+  separator: '~',
+  clearable: true,
+  disabled: undefined,
+  readonly: undefined
+})
+
+const emit = defineEmits<NumberRangeInputEmits>()
+
+const inst = getCurrentInstance()
+
+function splitBound(): boolean {
+  const p = inst?.vnode.props
+  if (!p) return false
+  return 'start' in p || 'onUpdate:start' in p || 'end' in p || 'onUpdate:end' in p
+}
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const cls = bem('number-range-input')
+
+const className = computed(() => {
+  return [cls.b, cls.m(size.value)]
+})
+
+const model = defineModel<NumberRangeTuple>({
+  default: () => [undefined, undefined]
+})
+
+const startRef = defineModel<number | undefined>('start')
+const endRef = defineModel<number | undefined>('end')
+
+let syncGuard = false
+
+function normalizeFromSplit(s: number | undefined, e: number | undefined): NumberRangeTuple {
+  let nextS = s
+  let nextE = e
+  if (nextS !== undefined && nextE !== undefined && nextS > nextE) nextE = nextS
+  return [nextS, nextE]
+}
+
+watch(
+  model,
+  (t) => {
+    if (syncGuard) return
+    syncGuard = true
+    const tuple = t ?? [undefined, undefined]
+    if (startRef.value !== tuple[0]) startRef.value = tuple[0]
+    if (endRef.value !== tuple[1]) endRef.value = tuple[1]
+    nextTick(() => {
+      syncGuard = false
+    })
+  },
+  { deep: true }
+)
+
+watch(
+  [startRef, endRef],
+  () => {
+    if (!splitBound() || syncGuard) return
+    syncGuard = true
+    const normalized = normalizeFromSplit(startRef.value, endRef.value)
+    const cur = model.value ?? [undefined, undefined]
+    if (cur[0] !== normalized[0] || cur[1] !== normalized[1]) {
+      model.value = normalized
+    }
+    nextTick(() => {
+      syncGuard = false
+    })
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  if (!splitBound()) return
+  const cur = model.value ?? [undefined, undefined]
+  const hasModel = cur[0] !== undefined || cur[1] !== undefined
+  if (hasModel) return
+  const normalized = normalizeFromSplit(startRef.value, endRef.value)
+  if (cur[0] !== normalized[0] || cur[1] !== normalized[1]) {
+    syncGuard = true
+    model.value = normalized
+    nextTick(() => {
+      syncGuard = false
+    })
+  }
+})
+
+const numberInputBind = computed(() => {
+  return o(props).pick([
+    'clearable',
+    'prefix',
+    'suffix',
+    'step',
+    'min',
+    'max',
+    'currency',
+    'precision',
+    'minPrecision',
+    'maxPrecision',
+    'multiple'
+  ])
+})
+
+const startModel = computed({
+  get(): number | undefined {
+    return model.value?.[0]
+  },
+  set(v: number | undefined) {
+    const cur = model.value ?? [undefined, undefined]
+    const end = cur[1]
+    let nextEnd = end
+    if (v !== undefined && end !== undefined && v > end) nextEnd = v
+    model.value = [v, nextEnd]
+  }
+})
+
+const endModel = computed({
+  get(): number | undefined {
+    return model.value?.[1]
+  },
+  set(v: number | undefined) {
+    const cur = model.value ?? [undefined, undefined]
+    const start = cur[0]
+    let nextStart = start
+    if (v !== undefined && start !== undefined && v < start) nextStart = v
+    model.value = [nextStart, v]
+  }
+})
+
+function formatNumberPart(num: number): string {
+  const { currency, precision, minPrecision, maxPrecision, multiple } = props
+
+  const displayValue = multiple ? $n.div(num, multiple) : num
+
+  return currency
+    ? n(displayValue).currency('CNY', {
+        precision,
+        minPrecision,
+        maxPrecision
+      })
+    : n(displayValue).fixed(
+        precision ?? {
+          minPrecision,
+          maxPrecision
+        }
+      )
+}
+
+const readonlyText = computed(() => {
+  const [s, e] = model.value ?? [undefined, undefined]
+  if (s === undefined && e === undefined) return ''
+  const p = props.prefix ?? ''
+  const sfx = props.suffix ?? ''
+  const sep = props.separator ?? '~'
+  const a = s === undefined ? '—' : formatNumberPart(s)
+  const b = e === undefined ? '—' : formatNumberPart(e)
+  return `${p}${a} ${sep} ${b}${sfx}`
+})
+
+function emitChange(): void {
+  emit('change', model.value ?? [undefined, undefined])
+}
+</script>

package/src/components/number-range-input/style.scss

@@ -0,0 +1,14 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+
+@include m.b(number-range-input) {
+  display: inline-flex;
+  align-items: center;
+  gap: fn.use-var(gap, small);
+
+  @include m.e(separator) {
+    flex-shrink: 0;
+    color: fn.use-var(text-color, secondary);
+    line-height: 1;
+  }
+}

package/src/components/number-range-input/style.ts

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

package/src/components/paginator/index.ts

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

package/src/components/paginator/paginator.vue

@@ -0,0 +1,212 @@
+<template>
+  <div :class="[cls.b, cls.m(size)]" ref="paginatorRef">
+    <div>共 {{ total }} 条</div>
+
+    <u-select
+      :class="cls.e('size-select')"
+      v-model="pageSize"
+      size="small"
+      :options="sizeOptions"
+      :clearable="false"
+      @change="handleChangePageSize"
+    />
+
+    <ul :class="[cls.e('pages')]" v-if="!simple">
+      <li
+        :class="[cls.e('btn'), bem.is('disabled', preDisabled)]"
+        @click="handleJumpToFirst"
+        @mouseenter="hovered.first = true"
+        @mouseleave="hovered.first = false"
+        v-ripple="!preDisabled"
+      >
+        <span v-if="hovered.first">1</span>
+        <UIcon v-else><DArrowLeft /></UIcon>
+      </li>
+
+      <li
+        :class="[cls.e('btn'), bem.is('disabled', pageNumber === 1)]"
+        @click="handleJumpToPrev"
+        v-ripple="!preDisabled"
+      >
+        <UIcon><ArrowLeft /></UIcon>
+      </li>
+
+      <li
+        v-for="num in pageNumbers"
+        :key="num"
+        :class="[cls.e('btn'), bem.is('active', pageNumber === num)]"
+        @click="handleChangePageNumber(num)"
+        v-ripple
+      >
+        {{ num }}
+      </li>
+
+      <li
+        :class="[cls.e('btn'), bem.is('disabled', nextDisabled)]"
+        @click="handleJumpToNext"
+        v-ripple="!nextDisabled"
+      >
+        <UIcon><ArrowRight /></UIcon>
+      </li>
+      <li
+        :class="[cls.e('btn'), bem.is('disabled', nextDisabled)]"
+        @click="handleJumpToLast"
+        @mouseenter="hovered.last = true"
+        @mouseleave="hovered.last = false"
+        v-ripple="!nextDisabled"
+      >
+        <span v-if="hovered.last">{{ totalPages }}</span>
+        <UIcon v-else><DArrowRight /></UIcon>
+      </li>
+    </ul>
+
+    <div :class="cls.e('jumper')">
+      <span>前往</span>
+      <u-number-input
+        :class="cls.e('page-input')"
+        size="small"
+        :min="1"
+        :max="totalPages"
+        :precision="0"
+        :model-value="pageNumber"
+        :clearable="false"
+        @keyup.enter="handleKeyEnter"
+        @change="pageNumber = $event!"
+      />
+      <span>/ {{ totalPages }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { n } from '@cat-kit/core'
+import { useConfig, useFallbackProps } from '@veltra/compositions'
+import { vRipple } from '@veltra/directives'
+import { ArrowLeft, ArrowRight, DArrowLeft, DArrowRight } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, reactive, shallowRef } from 'vue'
+
+import type { PaginatorProps, PaginatorEmits, _PaginatorExposed, ComponentSize } from '../../types'
+import { UIcon } from '../icon'
+import { UNumberInput } from '../number-input'
+import { USelect } from '../select'
+
+defineOptions({
+  name: 'Paginator'
+})
+
+const { config } = useConfig()
+
+const props = withDefaults(defineProps<PaginatorProps>(), {
+  total: 0
+})
+
+const emit = defineEmits<PaginatorEmits>()
+
+const cls = bem('paginator')
+
+const { size } = useFallbackProps([props], {
+  size: 'default' as ComponentSize
+})
+
+const pageNumber = defineModel<number>('pageNumber', {
+  default: 1
+})
+
+const pageSize = defineModel<number>('pageSize', {
+  default: 10
+})
+
+function emitPageSize(value: number) {
+  emit('change:pageSize', value)
+}
+
+function emitPageNumber(value: number) {
+  emit('change:pageNumber', value)
+}
+
+const handleChangePageSize = (size?: Record<string, any>) => {
+  emitPageSize(size?.value)
+  pageNumber.value = 1
+}
+
+function handleChangePageNumber(num: number) {
+  if (props.pageNumber === num) return
+  pageNumber.value = num
+  emitPageNumber(pageNumber.value)
+}
+
+const currentSize = computed(() => {
+  return props.pageSize ?? config.paginator.pageSize
+})
+
+/** 完整页码 */
+const totalPages = computed(() => {
+  return Math.ceil(props.total / currentSize.value)
+})
+
+const sizeOptions = computed(() => {
+  return (props.pageSizeOptions ?? config.paginator.pageSizeOptions).map((value) => {
+    return { label: `${value}条`, value }
+  })
+})
+
+/** 做多显示5个页码 */
+const pageNumbers = computed(() => {
+  const startPageNum = n(pageNumber.value - 2).range(1, Math.max(totalPages.value - 4, 1))
+
+  return Array.from({ length: Math.min(totalPages.value, 5) }).map(
+    (_, index) => startPageNum + index
+  )
+})
+
+const preDisabled = computed(() => {
+  return pageNumber.value <= 1
+})
+const nextDisabled = computed(() => {
+  return pageNumber.value >= totalPages.value
+})
+
+function handleJumpToFirst() {
+  if (preDisabled.value) return
+  pageNumber.value = 1
+  emitPageNumber(pageNumber.value)
+}
+function handleJumpToLast() {
+  if (nextDisabled.value) return
+  pageNumber.value = totalPages.value
+  emitPageNumber(pageNumber.value)
+}
+function handleJumpToPrev() {
+  if (preDisabled.value) return
+  pageNumber.value = pageNumber.value - 1
+  emitPageNumber(pageNumber.value)
+}
+function handleJumpToNext() {
+  if (nextDisabled.value) return
+
+  pageNumber.value = pageNumber.value + 1
+  emitPageNumber(pageNumber.value)
+}
+
+function handleKeyEnter(e: KeyboardEvent) {
+  const target = e.target as HTMLInputElement
+  const val = +target.value
+  if (!isNaN(val) && val > 0 && val <= totalPages.value) {
+    pageNumber.value = val
+    emitPageNumber(pageNumber.value)
+  }
+}
+
+/** 鼠标停留位置 */
+const hovered = reactive({
+  first: false,
+  last: false
+})
+
+const paginatorRef = shallowRef<HTMLElement>()
+
+defineExpose<_PaginatorExposed>({
+  el: paginatorRef
+})
+</script>

package/src/components/paginator/style.scss

@@ -0,0 +1,82 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+@use 'sass:map';
+
+// 方便拼接
+$root-name: paginator;
+
+@include m.b($root-name) {
+  @include m.flex($justify: flex-end);
+
+  @include m.size using ($size) {
+    font-size: fn.use-var(form-component-font-size, $size);
+    gap: fn.use-var(gap, $size);
+    padding: 0 fn.use-var(gap, $size);
+
+    @include m.bem($root-name, btn) {
+      width: calc(fn.use-var(form-component-height, $size) - 4px);
+      height: calc(fn.use-var(form-component-height, $size) - 4px);
+    }
+
+    @include m.bem($root-name, pages) {
+      gap: fn.use-var(gap, $size);
+      height: fn.use-var(form-component-height, $size);
+    }
+
+    @include m.bem($root-name, jumper) {
+      gap: fn.use-var(gap, $size);
+    }
+  }
+
+  @include m.e(btn) {
+    color: fn.use-var(text, color, title);
+    user-select: none;
+    border-radius: 50%;
+    margin: 0;
+    list-style: none;
+    cursor: pointer;
+    @include m.flex($justify: center);
+
+    &:hover {
+      background-color: fn.use-var(color, primary, 'light-9');
+    }
+
+    @include m.is(active) {
+      background-color: fn.use-var(color, primary, 'light-9');
+      color: fn.use-var(color, primary);
+    }
+
+    @include m.is(disabled) {
+      cursor: not-allowed;
+      color: fn.use-var(text-color, disabled);
+
+      &:hover {
+        background: none;
+      }
+    }
+  }
+
+  @include m.e(jumper) {
+    @include m.flex;
+  }
+
+  @include m.bem($root-name, page-input) {
+    width: 40px;
+  }
+
+  @include m.e(pages) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    @include m.flex($justify: space-between);
+  }
+
+  @include m.bem($root-name, size-select) {
+    width: 90px;
+
+    @include m.bem(input, native) {
+      text-align: center;
+    }
+  }
+}

package/src/components/paginator/style.ts

@@ -0,0 +1,4 @@
+import '../select/style'
+import '../number-input/style'
+import '../icon/style'
+import './style.scss'

package/src/components/palette/color-transform.ts

@@ -0,0 +1,134 @@
+import type { PaletteRGB, PaletteHSV } from '../../types'
+
+/**
+ * 将色相值转换为 RGB 颜色
+ * @param h 色相值
+ * @returns RGB 颜色
+ */
+export function HUE2RGB(h: number): PaletteRGB {
+  // 将色相值映射到0-5的范围
+  const segment = h / 60
+  const x = 1 - Math.abs((segment % 2) - 1) // 计算中间值
+  let r = 0,
+    g = 0,
+    b = 0
+  // 根据色相所在的区间计算RGB值
+  if (segment >= 0 && segment < 1) {
+    ;[r, g, b] = [1, x, 0]
+  } else if (segment < 2) {
+    ;[r, g, b] = [x, 1, 0]
+  } else if (segment < 3) {
+    ;[r, g, b] = [0, 1, x]
+  } else if (segment < 4) {
+    ;[r, g, b] = [0, x, 1]
+  } else if (segment < 5) {
+    ;[r, g, b] = [x, 0, 1]
+  } else {
+    ;[r, g, b] = [1, 0, x]
+  }
+  // 将RGB值从0-1范围映射到0-255范围
+  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }
+}
+
+/**
+ * 将色调、饱和度和亮度转换为 RGB 颜色
+ * @param hsv 色调、饱和度和亮度
+ */
+export function HSV2RGB(hsv: PaletteHSV): PaletteRGB {
+  const { h, s, v } = hsv
+
+  // 使用色相区间映射获取基础RGB值
+  const { r, g, b } = HUE2RGB(h)
+
+  // 应用饱和度和亮度
+  const saturationFactor = 1 - s
+  const valueFactor = v
+
+  return {
+    r: Math.round((r + (255 - r) * saturationFactor) * valueFactor),
+    g: Math.round((g + (255 - g) * saturationFactor) * valueFactor),
+    b: Math.round((b + (255 - b) * saturationFactor) * valueFactor)
+  }
+}
+
+/**
+ * 将 RGB 颜色转换为 HEX 颜色
+ * @param RGB RGB 颜色
+ * @param alpha 透明度
+ * @returns HEX 颜色
+ */
+export function RGB2HEX(RGB: PaletteRGB, alpha = 1): string {
+  let hexStr = ['r', 'g', 'b']
+    .map((key) => RGB[key].toString(16).padStart(2, '0'))
+    .join('')
+    .toUpperCase()
+
+  if (alpha < 1) {
+    hexStr += Math.round(alpha * 255)
+      .toString(16)
+      .padStart(2, '0')
+      .toUpperCase()
+  }
+
+  return hexStr
+}
+
+/**
+ * 将 RGB 颜色转换为 HSV 颜色
+ * @param RGB RGB 颜色
+ * @returns HSV 颜色
+ */
+export function RGB2HSV(RGB: PaletteRGB): PaletteHSV {
+  // 归一化到0-1范围
+  const red = RGB.r / 255
+  const green = RGB.g / 255
+  const blue = RGB.b / 255
+  const max = Math.max(red, green, blue)
+  const min = Math.min(red, green, blue)
+  const delta = max - min
+  let h = 0
+  if (delta !== 0) {
+    if (max === red) {
+      h = ((green - blue) / delta) % 6
+    } else if (max === green) {
+      h = (blue - red) / delta + 2
+    } else {
+      h = (red - green) / delta + 4
+    }
+    h = (h * 60 + 360) % 360 // 确保正值
+  }
+  const s = max === 0 ? 0 : delta / max
+  const v = max
+  return { h, s, v }
+}
+
+/**
+ * 将 HEX 颜色转换为 RGB 颜色
+ * @param hex HEX 颜色
+ * @returns RGB 颜色
+ */
+export function HEX2RGBA(hex: string): { RGB: PaletteRGB; alpha: number } {
+  const rgb = { r: 0, g: 0, b: 0 }
+  let alpha = 1
+
+  if (hex.startsWith('#')) {
+    hex = hex.slice(1)
+  }
+
+  if (hex.length === 3 || hex.length === 4) {
+    hex = hex
+      .split('')
+      .map((char) => char + char)
+      .join('')
+  }
+
+  const alphaStr = hex.slice(6)
+  if (alphaStr) {
+    alpha = parseInt(alphaStr, 16) / 255
+  }
+  rgb.r = parseInt(hex.slice(0, 2), 16)
+  rgb.g = parseInt(hex.slice(2, 4), 16)
+  rgb.b = parseInt(hex.slice(4, 6), 16)
+
+  return { RGB: rgb, alpha }
+}

package/src/components/palette/di.ts

@@ -0,0 +1,25 @@
+import type { Updater } from '@veltra/compositions'
+import type { BEM } from '@veltra/utils'
+import type { InjectionKey, Ref, ComputedRef } from 'vue'
+
+import type { PaletteHSV, PaletteRGB } from '../../types'
+
+export const PaletteDIKey: InjectionKey<{
+  cls: BEM<'palette', 'u-'>
+  /** 色调 RGB 值 */
+  hueRGB: ComputedRef<PaletteRGB>
+  /** 色调 饱和度 亮度 */
+  HSV: PaletteHSV
+  /** RGB 值 */
+  RGB: ComputedRef<PaletteRGB>
+  /** 透明度 */
+  alpha: Ref<number>
+  /** 更新器 */
+  updater: Updater
+  /** 更新色调 */
+  updateHue: (deg: number) => void
+  /** 更新调色盘透明度 */
+  updateAlpha: (alpha: number) => void
+  /** 更新饱和度 亮度 */
+  updateSV: (sv: { s: number; v: number }) => void
+}> = Symbol('PaletteDIKey')

package/src/components/palette/index.ts

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