@veltra/desktop 1.0.0

package/src/components/password-input/password-input.vue

@@ -0,0 +1,119 @@
+<template>
+  <u-input
+    :class="cls.b"
+    :model-value="passwordText"
+    v-bind="inputProps"
+    :size="size"
+    :readonly="readonly"
+    :disabled="disabled"
+    @native:input="handleUpdatePwd"
+    @update:model-value="!$event && handleClear()"
+    @suffix:click="toggleVisible"
+  >
+    <template #suffix>
+      <Transition name="fade">
+        <UIcon :class="cls.e('visibility-toggle')" :size="18">
+          <Hide v-if="pwdVisible" />
+          <View v-else />
+        </UIcon>
+      </Transition>
+    </template>
+
+    <template #prefix v-if="slots.prefix">
+      <slot name="prefix" />
+    </template>
+  </u-input>
+</template>
+
+<script lang="ts" setup>
+import { o } from '@cat-kit/core'
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { Hide, View } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, nextTick, shallowRef } from 'vue'
+
+import type { PasswordInputProps } from '../../types'
+import { UIcon } from '../icon'
+import { UInput } from '../input'
+
+defineOptions({
+  name: 'PasswordInput'
+})
+
+const props = withDefaults(defineProps<PasswordInputProps>(), {
+  clearable: true,
+  disabled: undefined,
+  readonly: undefined
+})
+
+const slots = defineSlots<{
+  prefix?: () => any
+}>()
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const inputProps = computed(() => {
+  return o(props).pick(['clearable', 'disabled', 'placeholder', 'size'])
+})
+
+const cls = bem('password-input')
+
+const model = defineModel<string>()
+
+const passwordChar = '●'
+
+const handleUpdatePwd = (e: Event): void => {
+  const target = e.target as HTMLInputElement
+  const val = target.value
+  if (!val) {
+    model.value = val
+    return
+  }
+
+  // 字符从无到有
+  if (!model.value) {
+    model.value = val
+    return
+  }
+
+  const pointIndex = target.selectionStart!
+  let inputChar = pointIndex === 0 ? '' : val[pointIndex - 1]!
+  if (inputChar === passwordChar) inputChar = ''
+
+  // 光标右侧字符数量（当前字符长度减去光标位置）
+  const rightLen = val.length - pointIndex
+  // 光标左侧字符数量 （当光标前的字符是刚刚输入的，则为这个字符前的所有的字符，否则为光标前的所有赐福）
+  const leftLen = inputChar === '' ? pointIndex : pointIndex - 1
+
+  const leftVal = model.value.slice(0, leftLen)
+  const rightVal = rightLen === 0 ? '' : model.value.slice(-rightLen)
+
+  model.value = leftVal + inputChar + rightVal
+
+  nextTick(() => {
+    target.selectionStart = pointIndex
+    target.selectionEnd = pointIndex
+  })
+}
+
+const handleClear = (): void => {
+  model.value = ''
+}
+
+const pwdVisible = shallowRef(false)
+
+const passwordText = computed<string | undefined>(() => {
+  if (pwdVisible.value) return model.value
+  return model.value ? passwordChar.repeat(model.value.length) : ''
+})
+
+const toggleVisible = () => {
+  pwdVisible.value = !pwdVisible.value
+}
+</script>

package/src/components/password-input/style.scss

@@ -0,0 +1,11 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$root-name: password-input;
+
+@include m.b($root-name) {
+  @include m.e(visibility-toggle) {
+    // cursor: pointer;
+  }
+}

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

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

package/src/components/pop-confirm/index.ts

@@ -0,0 +1 @@
+export { default as UPopConfirm } from './pop-confirm.vue'

package/src/components/pop-confirm/pop-confirm.vue

@@ -0,0 +1,79 @@
+<template>
+  <u-tip
+    :class="cls.b"
+    :trigger="trigger"
+    :direction="direction"
+    :alignment="alignment"
+    :content-tag="contentTag"
+    v-model:visible="visible"
+  >
+    <slot name="reference" />
+
+    <template #content>
+      <div :class="[cls.m('main'), cls.m(size)]">
+        <u-icon :size="16" :class="cls.m('icon')" :style="{ color: iconColor }">
+          <component :is="icon" />
+        </u-icon>
+        <span>
+          {{ title }}
+        </span>
+      </div>
+      <div :class="cls.m('action')">
+        <u-button size="small" @click="cancel" type="primary" text>
+          {{ cancelText }}
+        </u-button>
+        &nbsp;
+        <u-button size="small" type="primary" @click="confirm">
+          {{ confirmText }}
+        </u-button>
+      </div>
+    </template>
+  </u-tip>
+</template>
+
+<script lang="ts" setup>
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { QuestionFilled } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { ref } from 'vue'
+
+import type { PopConfirmProps, PopConfirmEmits } from '../../types'
+import { UButton } from '../button'
+import { UIcon } from '../icon'
+import { UTip } from '../tip'
+
+defineOptions({
+  name: 'PopConfirm'
+})
+
+const emit = defineEmits<PopConfirmEmits>()
+
+withDefaults(defineProps<PopConfirmProps>(), {
+  trigger: 'click',
+  icon: QuestionFilled,
+  direction: 'bottom',
+  iconColor: '#ffc107',
+  confirmText: '确认',
+  cancelText: '取消'
+})
+
+const cls = bem('pop-confirm')
+
+const visible = ref(false)
+
+const { formProps } = useFormComponent()
+
+const { size } = useFormFallbackProps([formProps ?? {}], {
+  size: 'default'
+})
+
+const confirm = () => {
+  emit('confirm')
+  visible.value = false
+}
+
+const cancel = () => {
+  emit('cancel')
+  visible.value = false
+}
+</script>

package/src/components/pop-confirm/style.scss

@@ -0,0 +1,33 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: pop-confirm;
+
+@include m.b($root-name) {
+  @include m.m(main) {
+    max-width: 200px;
+    width: max-content;
+    @include m.flex($display: inline-flex);
+  }
+
+  @include m.m(icon) {
+    margin-right: 8px;
+    color: fn.use-var('color', warning);
+  }
+
+  @include m.size using ($size) {
+    font-size: fn.use-var('font-size', main, $size);
+    margin-bottom: fn.use-var(gap, $size);
+  }
+
+  @include m.m(action) {
+    @include m.flex($justify: flex-end);
+    i {
+      display: block;
+      visibility: hidden;
+      width: 6px;
+    }
+  }
+}

package/src/components/pop-confirm/style.ts

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

package/src/components/progress/index.ts

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

package/src/components/progress/progress.vue

@@ -0,0 +1,93 @@
+<template>
+  <div :class="className">
+    <!-- 条形进度条 -->
+    <div :class="cls.e('bar-wrap')" v-if="!circle">
+      <div :class="cls.e('bar')" :style="{ width: percentage + '%' }">
+        <slot v-bind="{ percentage, type }">{{ percentage }}%</slot>
+      </div>
+    </div>
+
+    <!-- 环形进度条 -->
+    <div
+      v-else
+      :class="cls.e('circle')"
+      :style="{ height: withUnit(size, 'px'), width: withUnit(size, 'px') }"
+    >
+      <svg viewBox="0 0 100 100">
+        <circle cx="50" cy="50" :r="r" fill="none" stroke="#f5f8fa" stroke-width="8" />
+        <circle
+          :class="cls.e('circle-ring')"
+          cx="50"
+          cy="50"
+          :r="r"
+          fill="none"
+          :stroke="stroke"
+          stroke-width="8"
+          :stroke-dasharray="dashArray"
+          :stroke-dashoffset="offset"
+          :stroke-linecap="percentage === 0 ? undefined : 'round'"
+        />
+      </svg>
+
+      <div :class="cls.e('circle-content')">
+        <slot v-bind="{ percentage, type }"> {{ percentage }}% </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { n } from '@cat-kit/core'
+import { bem, withUnit } from '@veltra/utils'
+import { computed } from 'vue'
+
+import type { ProgressProps, ColorType } from '../../types'
+
+defineOptions({
+  name: 'Progress'
+})
+
+const props = withDefaults(defineProps<ProgressProps>(), {
+  type: 'primary',
+  circle: false
+})
+
+defineSlots<{
+  default: (props: {
+    /** 进度百分比 */
+    percentage: number
+    /** 样式类型 */
+    type: ColorType
+  }) => any
+}>()
+
+const cls = bem('progress')
+
+const percentage = computed(() => {
+  return n(props.percentage ?? 0).range(0, 100)
+})
+
+const type = computed<ColorType>(() => {
+  const { type } = props
+  return typeof type === 'function' ? type(percentage.value) : type
+})
+
+const className = computed(() => {
+  return [cls.b, bem.is('circle', props.circle), cls.m(type.value)]
+})
+
+/** 描边 */
+const stroke = computed(() => {
+  return `var(--color-${type.value})`
+})
+
+const r = 44
+const c = 2 * Math.PI * r
+const offset = c / 4
+
+/** 圆周 */
+const dashArray = computed(() => {
+  const dashLen = (c * percentage.value) / 100
+  return `${dashLen}, ${c - dashLen}`
+})
+</script>

package/src/components/progress/style.scss

@@ -0,0 +1,60 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: progress;
+
+@include m.b($root-name) {
+  $bar-height: 1.3em;
+
+  @include m.e(bar-wrap) {
+    height: $bar-height;
+    background-color: fn.use-var(bg-color, hover);
+    border-radius: $bar-height;
+    overflow: hidden;
+  }
+
+  @include m.e(bar) {
+    height: 100%;
+    color: fn.use-var(text-color, white);
+    overflow: hidden;
+    transition:
+      width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
+      background-color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
+    @include m.flex($justify: center);
+  }
+
+  // 环形进度条
+  @include m.e(circle) {
+    width: 100px;
+    height: 100px;
+    position: relative;
+
+    & > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  @include m.e(circle-content) {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    @include m.flex($justify: center);
+  }
+
+  @include m.e(circle-ring) {
+    transition: stroke-dasharray 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
+  }
+  // 颜色
+  @each $type, $_ in vars.$color-types {
+    @include m.m($type) {
+      @include m.bem($root-name, bar) {
+        background-color: fn.use-var(color, $type);
+      }
+    }
+  }
+}

package/src/components/progress/style.ts

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

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

@@ -0,0 +1 @@
+export { default as UProgressNodes } from './progress-nodes.vue'

package/src/components/progress-nodes/progress-nodes.vue

@@ -0,0 +1,147 @@
+<template>
+  <div ref="container" :class="className" :style="containerStyle" @scroll="checkScroll">
+    <ul :class="cls.e('list')">
+      <li
+        v-for="(node, index) in nodes"
+        :key="node.key ?? index"
+        :class="[
+          cls.e('item'),
+          bem.is('checked', isChecked(node, index)),
+          bem.is('active', isActive(node))
+        ]"
+        @click="handleClick(node, index)"
+      >
+        <div :class="cls.e('node')">
+          <!-- 虚线连接 -->
+          <div v-if="index !== nodes.length - 1" :class="cls.e('link')"></div>
+
+          <!-- 节点圆点 -->
+          <span :class="cls.e('dot')">
+            <slot name="icon" :node="node" :index="index" />
+          </span>
+        </div>
+
+        <div :class="cls.e('label')">
+          <slot :node="node" :index="index">
+            {{ getLabel(node) }}
+          </slot>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { o } from '@cat-kit/core'
+import { useDrag, useResizeObserver } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { computed, shallowRef, toRefs, useTemplateRef, watch, nextTick } from 'vue'
+
+import type { ProgressNodesProps, ProgressNodesEmits } from '../../types'
+
+defineOptions({
+  name: 'ProgressNodes'
+})
+
+const props = withDefaults(defineProps<ProgressNodesProps>(), {
+  colorType: 'primary',
+  labelKey: 'label',
+  valueKey: 'value'
+})
+
+const emit = defineEmits<ProgressNodesEmits>()
+
+const { nodes } = toRefs(props)
+
+const cls = bem('progress-nodes')
+const containerRef = useTemplateRef('container')
+const isDragging = shallowRef(false)
+const isScrollable = shallowRef(false)
+const showMaskStart = shallowRef(false)
+const showMaskEnd = shallowRef(false)
+
+const className = computed(() => [
+  cls.b,
+  cls.m(props.colorType),
+  bem.is('scrollable', isScrollable.value),
+  bem.is('dragging', isDragging.value),
+  bem.is('mask-start', showMaskStart.value),
+  bem.is('mask-end', showMaskEnd.value)
+])
+
+const containerStyle = computed(() => {
+  const style: Record<string, string> = {}
+  const maxWidth = toCssSize(props.maxWidth)
+  if (maxWidth) style.maxWidth = maxWidth
+  return style
+})
+
+let startScrollLeft = 0
+
+useDrag({
+  target: containerRef,
+  onDragStart() {
+    if (!isScrollable.value) return
+    const container = containerRef.value
+    if (!container) return
+    isDragging.value = true
+    startScrollLeft = container.scrollLeft
+  },
+  onDrag({ x }) {
+    if (!isScrollable.value) return
+    const container = containerRef.value
+    if (!container) return
+    container.scrollLeft = startScrollLeft - x
+  },
+  onDragEnd() {
+    isDragging.value = false
+  }
+})
+
+useResizeObserver({
+  targets: containerRef,
+  onResize: checkScroll
+})
+
+watch(
+  nodes,
+  () => {
+    nextTick(checkScroll)
+  },
+  { deep: true }
+)
+
+function checkScroll() {
+  const container = containerRef.value
+  if (!container) return
+
+  const { scrollLeft, scrollWidth, clientWidth } = container
+  isScrollable.value = scrollWidth > clientWidth + 1
+  showMaskStart.value = scrollLeft > 0
+  showMaskEnd.value = scrollLeft + clientWidth < scrollWidth - 1
+}
+
+function isChecked(node: Record<string, any>, index: number) {
+  return props.check?.(node, index) ?? false
+}
+
+function isActive(node: Record<string, any>) {
+  const value = o(node).get(props.valueKey)
+  return props.modelValue === value
+}
+
+function getLabel(node: Record<string, any>) {
+  return o(node).get(props.labelKey)
+}
+
+function handleClick(node: Record<string, any>, index: number) {
+  const value = o(node).get(props.valueKey)
+  emit('update:modelValue', value)
+  emit('click', node, index)
+}
+
+function toCssSize(value?: number | string) {
+  if (value === undefined) return undefined
+  return typeof value === 'number' ? `${value}px` : value
+}
+</script>