@veltra/desktop 1.0.0

package/src/components/palette/palette-alpha.vue

@@ -0,0 +1,86 @@
+<template>
+  <div :class="cls.e('alpha')" ref="alphaRef">
+    <div :class="cls.e('alpha-bg')" :style="{ background: alphaSliderBG }"></div>
+
+    <span :class="cls.e('alpha-thumb')" @click.stop :style="alphaThumbStyle"></span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useDrag } from '@veltra/compositions'
+import { computed, inject, shallowRef, onMounted, watch } from 'vue'
+
+import { PaletteDIKey } from './di'
+
+defineOptions({
+  name: 'PaletteAlpha'
+})
+
+const { cls, updateAlpha, hueRGB, alpha, updater } = inject(PaletteDIKey)!
+
+const alphaRef = shallowRef<HTMLElement>()
+
+const alphaThumbTransformX = shallowRef(0)
+
+const alphaThumbStyle = computed(() => {
+  return { transform: `translateX(${alphaThumbTransformX.value}px)` }
+})
+
+let alphaWidth = 0
+const rangeX = [0, 0] as [number, number]
+
+function getAlphaWidth() {
+  alphaWidth = alphaRef.value?.offsetWidth ?? 0
+  rangeX[1] = alphaWidth
+}
+
+function updateOffsetX(offsetX: number) {
+  updater.updateAndLock(() => {
+    alphaThumbTransformX.value = offsetX
+    updateAlpha(alphaWidth > 0 ? offsetX / alphaWidth : 0)
+  })
+}
+
+const alphaDragger = useDrag({
+  target: alphaRef,
+  rangeX,
+  onDrag({ offsetX }) {
+    updateOffsetX(offsetX)
+  },
+  onDragStart(e) {
+    getAlphaWidth()
+
+    alphaDragger.update({ offsetX: e.offsetX })
+
+    updateOffsetX(e.offsetX)
+  }
+})
+
+const alphaSliderBG = computed(() => {
+  const { r, g, b } = hueRGB.value
+  return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0), rgba(${r}, ${g}, ${b}, 1))`
+})
+
+function init(): void {
+  getAlphaWidth()
+  alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * alpha.value : 0
+}
+
+onMounted(() => {
+  init()
+})
+
+watch(
+  alpha,
+  (newAlphaValue) => {
+    updater.update(() => {
+      alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * newAlphaValue : 0
+    })
+  },
+  { flush: 'post' }
+)
+
+defineExpose({
+  init
+})
+</script>

package/src/components/palette/palette-color-switch.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="cls.e('color-switch')">
+    <div :class="cls.e('color-type')">HEX(A)</div>
+
+    <u-input
+      :class="cls.e('color-hexa')"
+      :clearable="false"
+      :model-value="color"
+      @change="handleUpdateColor"
+      :pattern="pattern"
+    />
+
+    <u-button text type="primary" :class="cls.e('clear-btn')" @click="emit('clear')">
+      清除
+    </u-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue'
+
+import { UButton } from '../button'
+import { UInput } from '../input'
+import { PaletteDIKey } from './di'
+
+defineProps<{
+  color?: string
+}>()
+
+const emit = defineEmits(['clear', 'update:color'])
+
+const { cls } = inject(PaletteDIKey)!
+
+const pattern = /^#([0-9a-fA-F]{3,4}){1,2}$/
+
+const handleUpdateColor = (value: string) => {
+  emit('update:color', value)
+}
+</script>

package/src/components/palette/palette-hue.vue

@@ -0,0 +1,70 @@
+<template>
+  <div :class="cls.e('hue')" ref="hueRef">
+    <span :class="cls.e('hue-thumb')" @click.stop :style="hueThumbStyle"></span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useDrag } from '@veltra/compositions'
+import { inject, onMounted } from 'vue'
+import { shallowRef, computed } from 'vue'
+
+import { PaletteDIKey } from './di'
+
+defineOptions({
+  name: 'PaletteHue'
+})
+
+const { cls, updateHue, HSV, updater } = inject(PaletteDIKey)!
+
+const hueRef = shallowRef<HTMLElement>()
+
+const transformX = shallowRef(0)
+let sliderWidth = 0
+
+const hueThumbStyle = computed(() => {
+  return { transform: `translateX(${transformX.value}px)` }
+})
+
+const rangeX = [0, 0] as [number, number]
+
+function getSliderWidth() {
+  sliderWidth = hueRef.value?.offsetWidth ?? 0
+  rangeX[1] = sliderWidth
+}
+
+function updateOffsetX(offsetX: number) {
+  updater.updateAndLock(() => {
+    transformX.value = offsetX
+    updateHue(Math.round((offsetX / sliderWidth) * 360))
+  })
+}
+
+const sliderDragger = useDrag({
+  target: hueRef,
+  rangeX,
+  onDrag({ offsetX }) {
+    updateOffsetX(offsetX)
+  },
+  onDragStart(e) {
+    getSliderWidth()
+
+    sliderDragger.update({ offsetX: e.offsetX })
+
+    updateOffsetX(e.offsetX)
+  }
+})
+
+function init(): void {
+  getSliderWidth()
+  transformX.value = (sliderWidth * HSV.h) / 360
+}
+
+onMounted(() => {
+  init()
+})
+
+defineExpose({
+  init
+})
+</script>

package/src/components/palette/palette-sv.vue

@@ -0,0 +1,114 @@
+<template>
+  <!-- 调色画布 -->
+  <div :class="cls.e('sv')" ref="svRef">
+    <div :class="cls.e('sv-s')" :style="{ backgroundImage: canvasBackground }"></div>
+    <div :class="cls.e('sv-v')">{{}}</div>
+
+    <div
+      :class="cls.e('sv-thumb')"
+      ref="svThumbRef"
+      @click.stop
+      @mousedown.stop
+      :style="svThumbStyle"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useDrag } from '@veltra/compositions'
+import { computed, inject, reactive, shallowRef, onMounted } from 'vue'
+
+import { PaletteDIKey } from './di'
+
+defineOptions({
+  name: 'PaletteSV'
+})
+
+const { cls, hueRGB, HSV, updateSV, updater } = inject(PaletteDIKey)!
+
+const svRef = shallowRef<HTMLDivElement>()
+
+const canvasSize = {
+  width: 0,
+  height: 0
+}
+
+const rangeX = [0, 0] as [number, number]
+const rangeY = [0, 0] as [number, number]
+
+const getCanvasSize = () => {
+  if (!svRef.value) return
+  const { offsetHeight, offsetWidth } = svRef.value!
+
+  canvasSize.width = offsetWidth
+  rangeX[1] = offsetWidth
+
+  canvasSize.height = offsetHeight
+  rangeY[1] = offsetHeight
+}
+
+const transform = reactive({
+  x: 0,
+  y: 0
+})
+
+const svThumbStyle = computed(() => {
+  return {
+    transform: `translate(${transform.x}px, ${transform.y}px)`
+  }
+})
+
+function updateThumb(offsetX: number, offsetY: number) {
+  updater.updateAndLock(() => {
+    transform.x = offsetX
+    transform.y = offsetY
+
+    // 根据画布位置计算饱和度和亮度
+    // 水平方向表示饱和度，从左到右饱和度逐渐增高
+    // 垂直方向表示亮度，上亮下暗
+    const s = Math.max(0, Math.min(1, offsetX / canvasSize.width))
+    const v = Math.max(0, Math.min(1, 1 - offsetY / canvasSize.height))
+
+    // 更新饱和度和亮度
+    updateSV({ s, v })
+  })
+}
+
+const svDragger = useDrag({
+  target: svRef,
+  rangeX,
+  rangeY,
+
+  onDrag({ offsetX, offsetY }) {
+    updateThumb(offsetX, offsetY)
+  },
+  onDragStart(e) {
+    getCanvasSize()
+
+    const { offsetX, offsetY } = e
+
+    updateThumb(offsetX, offsetY)
+
+    svDragger.update({ offsetX, offsetY })
+  }
+})
+
+const canvasBackground = computed(() => {
+  const { r, g, b } = hueRGB.value
+  return `linear-gradient(to right, rgb(255, 255, 255), rgb(${r}, ${g}, ${b}))`
+})
+
+function init(): void {
+  getCanvasSize()
+  transform.x = canvasSize.width * HSV.s
+  transform.y = canvasSize.height * (1 - HSV.v)
+}
+
+onMounted(() => {
+  init()
+})
+
+defineExpose({
+  init
+})
+</script>

package/src/components/palette/palette.vue

@@ -0,0 +1,112 @@
+<template>
+  <u-tip
+    trigger="click"
+    :class="cls.e('panel')"
+    v-model:visible="visible"
+    :disabled="disabled || readonly"
+  >
+    <span :class="className" :style="{ backgroundColor: color }"> </span>
+
+    <template #content>
+      <!-- 饱和度和亮度 -->
+      <PaletteSV ref="palette-sv" />
+
+      <!-- 色相 -->
+      <PaletteHue ref="palette-hue" />
+
+      <!-- 透明度 -->
+      <PaletteAlpha ref="palette-alpha" />
+
+      <!-- 颜色切换 -->
+      <PaletteColorSwitch v-model:color="color" @clear="handleClear" />
+    </template>
+  </u-tip>
+</template>
+
+<script lang="ts" setup>
+import { useFormComponent, useFormFallbackProps, useUpdateLock } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'
+
+import type { PaletteProps } from '../../types'
+import { UTip } from '../tip'
+import { HSV2RGB, RGB2HEX, HEX2RGBA, RGB2HSV } from './color-transform'
+import { PaletteDIKey } from './di'
+import PaletteAlpha from './palette-alpha.vue'
+import PaletteColorSwitch from './palette-color-switch.vue'
+import PaletteHue from './palette-hue.vue'
+import PaletteSV from './palette-sv.vue'
+import { useHSV } from './use-hsv'
+
+defineOptions({
+  name: 'Palette'
+})
+
+const props = withDefaults(defineProps<PaletteProps>(), {
+  disabled: undefined,
+  readonly: undefined
+})
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
+
+const cls = bem('palette')
+
+const className = computed(() => {
+  return [cls.b, cls.m(size.value), bem.is('no-color', !color.value)]
+})
+
+const { HSV, alpha, ...rest } = useHSV()
+
+const color = defineModel<string>()
+const RGB = computed(() => HSV2RGB(HSV))
+const updater = useUpdateLock()
+
+watch([alpha, RGB], ([alpha, RGB]) => {
+  color.value = `#${RGB2HEX(RGB, alpha)}`
+})
+
+const visible = shallowRef(false)
+
+function handleClear() {
+  updater.updateAndLock(() => {
+    color.value = ''
+    rest.updateAlpha(1)
+    visible.value = false
+  })
+}
+
+const paletteSVRef = useTemplateRef('palette-sv')
+const paletteHueRef = useTemplateRef('palette-hue')
+const paletteAlphaRef = useTemplateRef('palette-alpha')
+
+watch(
+  color,
+  (color) => {
+    if (!color) return
+
+    updater.update(() => {
+      const { RGB, alpha } = HEX2RGBA(color)
+      const hsv = RGB2HSV(RGB)
+      rest.updateHue(hsv.h)
+      rest.updateSV({ s: hsv.s, v: hsv.v })
+      rest.updateAlpha(alpha)
+
+      paletteSVRef.value?.init()
+      paletteHueRef.value?.init()
+      paletteAlphaRef.value?.init()
+    })
+  },
+  { immediate: true }
+)
+
+provide(PaletteDIKey, {
+  cls,
+  HSV,
+  RGB,
+  alpha,
+  updater,
+  ...rest
+})
+</script>

package/src/components/palette/style.scss

@@ -0,0 +1,151 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+@use 'sass:math';
+
+// 方便拼接
+$root-name: palette;
+
+$slider-height: 12px;
+$slider-thumb-size: 18px;
+
+@mixin color-marker {
+  background-image:
+    linear-gradient(45deg, #ccc 25%, transparent 25%),
+    linear-gradient(135deg, #ccc 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #ccc 75%),
+    linear-gradient(135deg, transparent 75%, #ccc 75%);
+  background-size: 12px 12px;
+  background-position:
+    0 0,
+    6px 0,
+    6px -6px,
+    0 6px;
+}
+
+@include m.b($root-name) {
+  border-radius: 50%;
+  display: inline-block;
+  border: fn.use-var(border);
+  cursor: pointer;
+
+  @include m.size using ($size) {
+    width: fn.use-var(form-component-height, $size);
+    height: fn.use-var(form-component-height, $size);
+  }
+
+  @include m.e(panel) {
+    width: 250px;
+  }
+
+  @include m.e(sv) {
+    height: 150px;
+    position: relative;
+  }
+
+  @include m.e(sv-thumb) {
+    width: 10px;
+    height: 10px;
+    top: -5px;
+    left: -5px;
+    position: absolute;
+    background-color: #fff;
+    border: fn.use-var(border);
+    border-color: #000;
+    border-radius: 50%;
+    pointer-events: none;
+  }
+
+  @include m.e(sv-s, sv-v) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include m.e(sv-v) {
+    background-image: linear-gradient(to bottom, #0000, #000);
+  }
+
+  @include m.e(hue, alpha) {
+    height: $slider-height;
+    margin: fn.use-var(gap, large) 0;
+    position: relative;
+    border: fn.use-var(border);
+  }
+
+  @include m.e(hue) {
+    background: linear-gradient(
+      to right,
+      rgb(255, 0, 0),
+      rgb(255, 255, 0),
+      rgb(0, 255, 0),
+      rgb(0, 255, 255),
+      rgb(0, 0, 255),
+      rgb(255, 0, 255),
+      rgb(255, 0, 0)
+    );
+  }
+
+  @include m.is(no-color) {
+    @include color-marker;
+  }
+
+  @include m.e(alpha) {
+    @include color-marker;
+
+    &-bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  @include m.e(hue-thumb, alpha-thumb) {
+    height: 100%;
+    background-color: #000;
+    left: -3px;
+    width: 6px;
+    top: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  @include m.e(color-switch) {
+    gap: fn.use-var(gap, small);
+
+    @include m.flex;
+  }
+
+  @include m.e(clear-btn) {
+    flex-shrink: 0;
+  }
+
+  @include m.e(color-type) {
+    width: 60px;
+    cursor: pointer;
+    text-align: center;
+    flex-shrink: 0;
+    user-select: none;
+  }
+
+  @include m.e(color-rgba) {
+    @include m.flex;
+
+    .u-input__native {
+      text-align: center;
+    }
+  }
+
+  @include m.e(color-hexa) {
+    flex-grow: 1;
+    text-align: center;
+
+    .u-input__native {
+      text-align: center;
+    }
+  }
+}

package/src/components/palette/style.ts

@@ -0,0 +1,4 @@
+import '../tip/style'
+import '../button/style'
+import '../input/style'
+import './style.scss'

package/src/components/palette/use-hsv.ts

@@ -0,0 +1,57 @@
+import { n } from '@cat-kit/core'
+import { reactive, readonly, ref, computed, type Ref, type ComputedRef } from 'vue'
+
+import type { PaletteRGB } from '../../types'
+import { HUE2RGB } from './color-transform'
+
+interface UseHSVReturned {
+  HSV: { h: number; s: number; v: number }
+  alpha: Ref<number>
+  hueRGB: ComputedRef<PaletteRGB>
+  updateHue: (deg: number) => void
+  updateSV: ({ s, v }: { s: number; v: number }) => void
+  updateAlpha: (a: number) => void
+}
+
+export function useHSV(): UseHSVReturned {
+  const HSV = reactive({ h: 0, s: 1, v: 1 })
+  /** 透明度 */
+  const alpha = ref(1)
+  /** 色调 RGB 值 */
+  const hueRGB = computed(() => HUE2RGB(HSV.h))
+
+  /**
+   * 更新色相值
+   * @param deg 色相值, 0-360
+   */
+  function updateHue(deg: number) {
+    HSV.h = deg
+  }
+
+  /**
+   * 更新饱和度和亮度
+   * @param sv { s: 饱和度, v: 亮度 }
+   */
+  function updateSV({ s, v }: { s: number; v: number }) {
+    HSV.s = s
+    HSV.v = v
+  }
+
+  /**
+   * 更新调色盘的透明度
+   * @param a 透明度, 0-1
+   */
+  function updateAlpha(a: number) {
+    alpha.value = +n(a).fixed({ maxPrecision: 2 })
+  }
+
+  return {
+    HSV: readonly(HSV),
+    alpha,
+    hueRGB,
+
+    updateHue,
+    updateSV,
+    updateAlpha
+  }
+}

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

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