@veltra/desktop 1.0.0

package/src/components/notification/notification.vue

@@ -0,0 +1,126 @@
+<template>
+  <transition
+    :name="`notification-fade-${position.split('-')[0]}`"
+    @before-leave="onClose"
+    @after-leave="$emit('destroy')"
+  >
+    <div
+      :class="[cls.b, cls.m(size), cls.e(type), cls.e(position)]"
+      v-show="visible"
+      :style="customStyle"
+    >
+      <div :class="cls.e('icon')">
+        <UIcon>
+          <component :is="typeIcon" />
+        </UIcon>
+      </div>
+      <div :class="cls.e('content')">
+        <div :class="cls.em('content', 'title')">{{ title }}</div>
+        <div :class="cls.em('content', 'message')">{{ message }}</div>
+        <div :class="cls.em('content', 'button')" v-if="buttonText">
+          <UButton :type="type" plain @click="handleClick">{{ buttonText }}</UButton>
+        </div>
+      </div>
+      <div :class="cls.e('close')" v-if="closable" @click.stop="close">
+        <UIcon><Close /></UIcon>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+import { useFallbackProps } from '@veltra/compositions'
+import {
+  CircleCheckFilled,
+  CircleClose,
+  Close,
+  InfoFilled,
+  QuestionFilled,
+  WarningFilled
+} from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { ref, computed, onMounted, type CSSProperties } from 'vue'
+
+import type { NotificationProps, NotificationExposed, ColorType } from '../../types'
+import { UButton } from '../button'
+import { UIcon } from '../icon'
+
+defineOptions({
+  name: 'Notification'
+})
+
+const props = withDefaults(defineProps<NotificationProps>(), {
+  closable: false,
+  duration: 4500,
+  offset: 20,
+  buttonText: '',
+  position: 'bottom-right'
+})
+
+const { type, size } = useFallbackProps([props], {
+  type: 'primary' as ColorType,
+  size: 'default'
+})
+
+const typeIcon = computed(() => {
+  return (
+    props.icon ||
+    {
+      primary: InfoFilled,
+      info: QuestionFilled,
+      success: CircleCheckFilled,
+      warning: WarningFilled,
+      danger: CircleClose
+    }[type.value]
+  )
+})
+
+const cls = bem('notification')
+
+const visible = ref<boolean>(false)
+
+onMounted(() => {
+  visible.value = true
+  startTimer()
+})
+
+const close = () => {
+  visible.value = false
+}
+
+const customStyle = computed<CSSProperties>(() => {
+  return props.offset > 0
+    ? {
+        [`${props.position.split('-')[0]}`]: `${props.offset}px`,
+        zIndex: props.zIndex,
+        transform:
+          props.position.split('-')[0] === 'bottom'
+            ? `translateY(-${props.offset}px)`
+            : `translateY(${props.offset}px)`,
+        transition: `opacity 0.3s, transform 0.4s, top 0.4s`
+      }
+    : {
+        [`${props.position.split('-')[0]}`]: `${props.offset}px`,
+        zIndex: props.zIndex
+      }
+})
+
+let timer = 0
+
+const startTimer = () => {
+  if (props.duration) {
+    timer = setTimeout(() => {
+      close()
+    }, props.duration)
+  }
+}
+
+const clearTimer = () => clearTimeout(timer)
+
+const handleClick = (e: MouseEvent) => {
+  if (props.onClick) props.onClick(e)
+  close()
+}
+
+defineExpose<NotificationExposed>({ startTimer, clearTimer })
+</script>

package/src/components/notification/style.scss

@@ -0,0 +1,95 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+@use 'sass:map';
+
+// 方便拼接
+$root-name: notification;
+$positions: ('top-left', 'top-right', 'bottom-left', 'bottom-right');
+
+@include m.b($root-name) {
+  display: flex;
+  min-width: 380px;
+  position: absolute;
+  transition:
+    opacity 0.3s,
+    transform 0.4s,
+    top 0.4s;
+  border: fn.use-var(border);
+  background-color: #fff;
+  box-shadow: fn.use-var(shadow);
+  margin: 4px;
+  overflow: hidden;
+
+  @include m.size using ($size) {
+    border-radius: fn.use-var(radius, $size);
+    padding: calc(fn.use-var(gap, $size) * 1.2);
+
+    @include m.bem($root-name, icon) {
+    }
+
+    @include m.bem($root-name, content) {
+      max-width: 400px;
+      word-wrap: break-word;
+      margin-left: fn.use-var(gap, $size);
+      text-align: left;
+      &--title {
+        font-size: fn.use-var('font-size', title, $size);
+        font-weight: bold;
+      }
+      &--message {
+        font-size: fn.use-var('font-size', main, $size);
+      }
+      &--button {
+        text-align: right;
+        margin-top: fn.use-var(gap, size);
+      }
+    }
+
+    @include m.bem($root-name, close) {
+      cursor: pointer;
+      position: absolute;
+      right: fn.use-var(gap, $size);
+      top: fn.use-var(gap, $size);
+      &:hover {
+        color: fn.use-var(color, primary, 'dark-9');
+      }
+    }
+  }
+
+  @each $type, $_ in vars.$color-types {
+    @include m.e($type) {
+      // background-color: fn.use-var(color, $type, 'light-7');
+      color: fn.use-var(color, $type);
+    }
+  }
+
+  @each $position in $positions {
+    @include m.e($position) {
+      @if $position == 'bottom-right' {
+        right: 0;
+        bottom: 0;
+      } @else if ($position == 'bottom-left') {
+        left: 0;
+        bottom: 0;
+      } @else if ($position == 'top-right') {
+        right: 0;
+        top: 0;
+      } @else {
+        left: 0;
+        top: 0;
+      }
+    }
+  }
+}
+
+.#{$root-name}-fade-bottom-enter-from,
+.#{$root-name}-fade-bottom-leave-to {
+  opacity: 0;
+  transform: translate(0, 100%);
+}
+.#{$root-name}-fade-top-enter-from,
+.#{$root-name}-fade-top-leave-to {
+  opacity: 0;
+  transform: translate(0, -100%);
+}

package/src/components/notification/style.ts

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

package/src/components/number/index.ts

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

package/src/components/number/number.vue

@@ -0,0 +1,55 @@
+<template>
+  {{ formatted }}
+</template>
+
+<script lang="ts" setup>
+import { $n } from '@cat-kit/core'
+import { Tween } from '@veltra/utils'
+import { computed, reactive, watch } from 'vue'
+
+import type { NumberProps } from '../../types'
+
+defineOptions({
+  name: 'Number'
+})
+
+const props = withDefaults(defineProps<NumberProps>(), {
+  duration: 800,
+  format: 'decimal'
+})
+
+const number = reactive({
+  value: 0
+})
+
+const tween = computed(() =>
+  props.tween
+    ? new Tween(number, {
+        duration: props.duration,
+        easingFunction: Tween.easing.easeInOutQuad
+      })
+    : null
+)
+
+const formatter = computed(() => {
+  return $n.formatter({
+    currency: props.format === 'currency' ? 'CNY' : undefined,
+    style: props.format,
+    precision: props.precision,
+    maximumFractionDigits: props.maxPrecision,
+    minimumFractionDigits: props.minPrecision
+  })
+})
+
+const formatted = computed(() => {
+  return formatter.value.format(number.value)
+})
+
+watch(
+  () => props.value,
+  () => {
+    props.tween ? tween.value.to({ value: props.value }) : (number.value = props.value)
+  },
+  { immediate: true }
+)
+</script>

package/src/components/number/style.scss

@@ -0,0 +1,6 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+@include m.b(number) {
+}

package/src/components/number/style.ts

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

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

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

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

@@ -0,0 +1,381 @@
+<template>
+  <u-input
+    v-if="!readonly"
+    ref="inputRef"
+    :class="className"
+    :model-value="displayed"
+    v-bind="inputProps"
+    @update:model-value="handleUpdateModelValue"
+    @change="handleChange"
+    @keydown.stop="handleKeydown"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    :size="size"
+    :readonly="readonly"
+    :disabled="disabled"
+  >
+    <template #suffix v-if="step !== undefined && step !== false">
+      <slot name="suffix" />
+      <div :class="cls.e('step')">
+        <u-icon
+          @click="increase"
+          v-ripple="!disabled && increasable"
+          :class="bem.is('disabled', disabled || !increasable)"
+        >
+          <ArrowUp />
+        </u-icon>
+        <u-icon
+          @click="decrease"
+          v-ripple="!disabled && reducible"
+          :class="bem.is('disabled', disabled || !reducible)"
+        >
+          <ArrowDown />
+        </u-icon>
+      </div>
+    </template>
+
+    <template #prefix v-if="slots.prefix">
+      <slot name="prefix" />
+    </template>
+  </u-input>
+
+  <template v-else>
+    {{ generateDisplayed || FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { $n, n, o, isUndef } from '@cat-kit/core'
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { vRipple } from '@veltra/directives'
+import { ArrowDown, ArrowUp } from '@veltra/icons/normal'
+import { Tween } from '@veltra/utils'
+import { bem } from '@veltra/utils'
+import { FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { computed, shallowRef, watch } from 'vue'
+
+import type { NumberInputEmits, NumberInputProps, InputExposed } from '../../types'
+import { UIcon } from '../icon'
+import { UInput } from '../input'
+
+defineOptions({
+  name: 'NumberInput'
+})
+
+const props = withDefaults(defineProps<NumberInputProps>(), {
+  placeholder: '请输入',
+  clearable: true,
+  disabled: undefined,
+  readonly: undefined
+})
+const emit = defineEmits<NumberInputEmits>()
+
+const slots = defineSlots<{
+  prefix?: () => any
+  suffix?: () => 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', 'prefix', 'suffix'])
+})
+
+const inputRef = shallowRef<InputExposed>()
+
+const inputDom = computed(() => inputRef.value?.el)
+
+const cls = bem('number-input')
+
+const className = computed(() => {
+  return [cls.b, cls.m(size.value)]
+})
+
+/** 实际值 */
+const model = defineModel<NumberInputProps['modelValue']>()
+
+// 展示值
+const displayed = shallowRef('')
+
+const focused = shallowRef(false)
+
+const generateDisplayed = computed(() => {
+  if (!displayed.value) return ''
+
+  return `${props.prefix ?? ''}${displayed.value}${props.suffix ?? ''}`
+})
+
+/** 步长 */
+const stepVal = computed<number>(() => {
+  const { step } = props
+  if (step === undefined) return 1
+  return typeof step === 'boolean' ? 1 : step
+})
+
+/** 是否可增 */
+const increasable = computed(() => {
+  const { max, multiple } = props
+  if (isUndef(max) || isUndef(model.value)) return true
+  // 如果存在倍数，先将 model.value 除以倍数得到原始值再比较
+  const rawValue = multiple ? $n.div(model.value, multiple) : model.value
+  return rawValue < max
+})
+
+/** 是否可减 */
+const reducible = computed(() => {
+  const { min, multiple } = props
+  if (isUndef(min) || isUndef(model.value)) return true
+  // 如果存在倍数，先将 model.value 除以倍数得到原始值再比较
+  const rawValue = multiple ? $n.div(model.value, multiple) : model.value
+  return rawValue > min
+})
+
+// 通过值和步长值计算默认的最大精度
+const defaultMaxPrecision = computed(() => {
+  const { multiple } = props
+  // 如果存在倍数，基于原始值计算精度
+  const rawValue =
+    multiple && model.value !== undefined ? $n.div(model.value, multiple) : model.value
+  return Math.max(
+    String(rawValue).split('.')[1]?.length ?? 0,
+    String(stepVal.value).split('.')[1]?.length ?? 0
+  )
+})
+
+/**
+ * 获取展示值
+ * @param num 实际值
+ */
+function getDisplayed(num?: number): string {
+  if (!num && num !== 0) return ''
+
+  const {
+    currency,
+    precision,
+    minPrecision,
+    // 如果没有指定最大精度那么设置默认为值和步长值中的较大值
+    maxPrecision = defaultMaxPrecision.value,
+    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
+        }
+      )
+}
+
+watch(
+  [model, focused, () => props.currency],
+  ([model, focused]) => {
+    if (focused) return
+    displayed.value = getDisplayed(model)
+  },
+  { immediate: true }
+)
+
+/**
+ * 解析展示值
+ * @param str 展示值
+ */
+function parseDisplayed(str: string): number | undefined {
+  if (!str) return undefined
+
+  // 将货币格式去掉再转化为数字
+  const number = +str.replace(/,/g, '')
+  const { multiple } = props
+
+  // 如果解析失败，使用当前值作为回退
+  // 如果存在倍数，需要先将 model.value 除以倍数得到原始值
+  let result: number | undefined
+  if (isNaN(number)) {
+    if (model.value === undefined) return undefined
+    result = multiple ? $n.div(model.value, multiple) : model.value
+  } else {
+    result = number
+  }
+
+  if (result === undefined) return undefined
+
+  const { precision, maxPrecision, minPrecision } = props
+
+  const fixedResult = +n(result).fixed(
+    precision ?? {
+      minPrecision,
+      maxPrecision
+    }
+  )
+
+  // 如果存在倍数，将原始值乘以倍数返回实际值
+  return multiple ? $n.mul(fixedResult, multiple) : fixedResult
+}
+
+/**
+ * 获取有效值
+ * @param val 值
+ */
+function getValidValue<T extends undefined | number>(val: T): T {
+  if (val === undefined) return val
+  const { min, max, multiple } = props
+
+  // 如果存在倍数，先将值除以倍数得到原始值进行验证，验证后再乘以倍数
+  if (multiple) {
+    const rawVal = $n.div(val, multiple)
+    let validRawVal = rawVal
+    if (min !== undefined && rawVal < min) validRawVal = min
+    if (max !== undefined && rawVal > max) validRawVal = max
+    return $n.mul(validRawVal, multiple) as T
+  }
+
+  if (min !== undefined && val < min) return min as T
+  if (max !== undefined && val > max) return max as T
+  return val
+}
+
+function handleUpdateModelValue(input: string): void {
+  const newVal = parseDisplayed(input)
+  model.value = getValidValue(newVal) ?? 0
+  displayed.value = input
+}
+
+/**
+ * 处理输入值变化的函数, 该函数仅在输入框失去焦点时触发,
+ * 主要用于在输入非数字的情况下的修正处理
+ * @param input 输入的值
+ */
+function handleChange() {
+  emit('change', model.value)
+}
+
+const tween = new Tween(
+  { n: model.value ?? 0 },
+  {
+    onUpdate(state) {
+      const _rawInput = inputDom.value
+      if (!_rawInput) return
+      const { multiple } = props
+      // 如果存在倍数，tween.state.n 存储的是原始值，需要乘以倍数后传给 getDisplayed
+      const actualValue = multiple ? $n.mul(state.n, multiple) : state.n
+      _rawInput.value = getDisplayed(actualValue)
+    },
+    // 动画进行的过程值有可能被改变, 因此在onComplete中确保还原的是原本的值
+    onComplete() {
+      const _rawInput = inputDom.value
+      if (!_rawInput) return
+      _rawInput.value = getDisplayed(model.value)
+    }
+  }
+)
+
+/** 增 */
+function increase(): void {
+  if (disabled.value) return
+  const { multiple } = props
+  const val = model.value ?? 0
+
+  if (multiple) {
+    // 如果存在倍数，先将实际值除以倍数得到原始值
+    const rawVal = $n.div(val, multiple)
+    // 在原始值基础上加步长
+    const newRawVal = $n.plus(rawVal, stepVal.value)
+    // 乘以倍数得到新的实际值
+    const newVal = $n.mul(newRawVal, multiple)
+    const target = getValidValue(newVal)
+    model.value = target
+    // tween 动画在原始值上进行
+    tween.state.n = $n.div(target, multiple)
+    tween.to({ n: $n.div(target, multiple) })
+  } else {
+    tween.state.n = val
+    const target = getValidValue($n.plus(val, stepVal.value))
+    model.value = target
+    tween.to({ n: target })
+  }
+}
+
+/** 减 */
+function decrease(): void {
+  if (disabled.value) return
+  const { multiple } = props
+  const val = model.value ?? 0
+
+  if (multiple) {
+    // 如果存在倍数，先将实际值除以倍数得到原始值
+    const rawVal = $n.div(val, multiple)
+    // 在原始值基础上减步长
+    const newRawVal = $n.minus(rawVal, stepVal.value)
+    // 乘以倍数得到新的实际值
+    const newVal = $n.mul(newRawVal, multiple)
+    const target = getValidValue(newVal)
+    model.value = target
+    // tween 动画在原始值上进行
+    tween.state.n = $n.div(target, multiple)
+    tween.to({ n: $n.div(target, multiple) })
+  } else {
+    tween.state.n = val
+    const target = getValidValue($n.minus(val, stepVal.value))
+    model.value = target
+    tween.to({ n: target })
+  }
+}
+
+function handleKeydown(e: KeyboardEvent): void {
+  if (!props.step) return
+  if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    return increase()
+  }
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    return decrease()
+  }
+}
+
+function handleFocus(): void {
+  focused.value = true
+
+  // 如果初始值和当前设置的精度不匹配则进行精度修正
+  if (model.value === undefined) return
+  const { precision, maxPrecision, minPrecision, multiple } = props
+
+  if (multiple) {
+    // 如果存在倍数，先除以倍数得到原始值进行精度修正，再乘以倍数
+    const rawVal = $n.div(model.value, multiple)
+    const fixedRawVal = +n(rawVal).fixed(
+      precision ?? {
+        maxPrecision,
+        minPrecision
+      }
+    )
+    model.value = $n.mul(fixedRawVal, multiple)
+  } else {
+    model.value = +n(model.value).fixed(
+      precision ?? {
+        maxPrecision,
+        minPrecision
+      }
+    )
+  }
+}
+
+function handleBlur(): void {
+  focused.value = false
+  model.value = props.modelValue
+}
+</script>

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

@@ -0,0 +1,35 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$root-name: number-input;
+@include m.b($root-name) {
+  @include m.e(step) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: space-around;
+
+    @include m.bem(icon) {
+      cursor: pointer;
+      transition: color 0.25s;
+      width: 20px;
+      border-radius: fn.use-var(radius, default);
+
+      &:hover {
+        color: fn.use-var(color, primary);
+      }
+
+      @include m.is(disabled) {
+        cursor: not-allowed;
+        color: fn.use-var(text-color, disabled);
+      }
+    }
+  }
+
+  @include m.size using ($size) {
+    @include m.bem(icon) {
+      font-size: fn.use-var(font-size-main, $size);
+    }
+  }
+}