@veltra/desktop 1.0.0

package/src/components/date-picker/date-picker.vue

@@ -0,0 +1,121 @@
+<template>
+  <u-dropdown
+    :class="className"
+    trigger="click"
+    width="auto"
+    ref="dropdownRef"
+    @update:visible=""
+    :disabled="disabled"
+    v-if="!readonly"
+  >
+    <template #trigger>
+      <u-input
+        :size="size"
+        native-readonly
+        :clearable="clearable"
+        :placeholder="placeholder"
+        :model-value="displayedValue"
+        :disabled="disabled"
+        @clear="handleClear"
+      >
+        <template #suffix>
+          <u-icon :class="cls.e('icon')"><Calendar /></u-icon>
+        </template>
+      </u-input>
+    </template>
+
+    <template #content>
+      <UDatePanel :size :type :disabled-date :date="currentDate" @select:date="handleSelectDate" />
+    </template>
+  </u-dropdown>
+
+  <template v-else>
+    {{ displayedValue || FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { date, type Dater } from '@cat-kit/core'
+import { useFormComponent, useFormFallbackProps, useUpdateLock } from '@veltra/compositions'
+import { Calendar } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { computed, shallowRef, watch } from 'vue'
+
+import type { DatePickerEmits, DatePickerProps } from '../../types'
+import type { DropdownExposed } from '../../types'
+import { UDatePanel } from '../date-panel'
+import { UDropdown } from '../dropdown'
+import { UIcon } from '../icon'
+import { UInput } from '../input'
+
+defineOptions({
+  name: 'DatePicker'
+})
+
+const props = withDefaults(defineProps<DatePickerProps>(), {
+  placeholder: '选择日期',
+  type: 'date',
+  disabled: undefined,
+  readonly: undefined,
+  clearable: true
+})
+
+const emit = defineEmits<DatePickerEmits>()
+
+const cls = bem('date-picker')
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const className = computed(() => {
+  return [cls.b, cls.m(size.value)]
+})
+
+const dropdownRef = shallowRef<DropdownExposed>()
+
+const formatStr = computed(() => {
+  const { format, type } = props
+  if (format) return format
+  if (type === 'date') return 'yyyy-MM-dd'
+  if (type === 'month') return 'yyyy-MM'
+  if (type === 'year') return 'yyyy'
+  return 'yyyy-MM-dd'
+})
+
+const currentDate = shallowRef<Dater>()
+
+const { update, updateAndLock } = useUpdateLock()
+
+watch(
+  () => props.modelValue,
+  (modelValue) => {
+    update(() => {
+      currentDate.value = modelValue ? date(modelValue) : undefined
+    })
+  },
+  { immediate: true }
+)
+
+const displayedValue = computed(() => {
+  return currentDate.value?.format(formatStr.value) ?? ''
+})
+
+async function handleSelectDate(date: Dater) {
+  await updateAndLock(() => {
+    currentDate.value = date
+    emit('update:modelValue', date.format(formatStr.value))
+  })
+  dropdownRef.value?.close()
+}
+
+function handleClear() {
+  currentDate.value = undefined
+  emit('update:modelValue', undefined)
+}
+</script>

package/src/components/date-picker/index.ts

@@ -0,0 +1 @@
+export { default as UDatePicker } from './date-picker.vue'

package/src/components/date-picker/style.scss

@@ -0,0 +1,15 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: date-picker;
+
+@include m.b($root-name) {
+  width: 100%;
+  @include m.size using ($size) {
+    @include m.bem($root-name, icon) {
+      font-size: calc(fn.use-var(form-component-height, $size) / 2 + 2px);
+    }
+  }
+}

package/src/components/date-picker/style.ts

@@ -0,0 +1,4 @@
+import '../input/style'
+import '../dropdown/style'
+import '../date-panel/style'
+import './style.scss'

package/src/components/date-picker/use-date.ts

@@ -0,0 +1,169 @@
+import { date, type Dater } from '@cat-kit/core'
+import { bem, type BEM } from '@veltra/utils'
+import {
+  computed,
+  inject,
+  provide,
+  shallowReactive,
+  watch,
+  type ComputedRef,
+  type InjectionKey
+} from 'vue'
+
+import type { DatePickerEmits, DatePickerProps } from '../../types'
+
+interface DateProvideConfig {
+  props: DatePickerProps
+  emit: DatePickerEmits
+  closeDropdown: () => void
+}
+
+interface DatePickerState {
+  panel: 'day' | 'month' | 'year'
+  date?: Dater
+  panelDate: Dater
+}
+
+interface DatePickerContext {
+  /** 组件类 */
+  cls: BEM<'date-picker'>
+  /** 组件 props */
+  pickerProps: DatePickerProps
+  /** 组件 emits */
+  pickerEmit: DatePickerEmits
+  /** 组件状态 */
+  state: DatePickerState
+  /** 格式化字符串 */
+  formatStr: ComputedRef<string>
+  /** 显示值 */
+  displayedValue: ComputedRef<string>
+  /** 关闭下拉框 */
+  closeDropdown: () => void
+  /** 更新面板 */
+  showNextPanel: () => void
+  /** 上一年 */
+  handlePreYear: () => void
+  /** 上个月 */
+  handlePreMonth: () => void
+  /** 下一年 */
+  handleNextYear: () => void
+  /** 下个月 */
+  handleNextMonth: () => void
+  /** 下十年 */
+  handleNextTenYears: () => void
+  /** 上十年 */
+  handlePreTenYears: () => void
+  /** 更新面板日期 */
+  updatePanelDate: () => void
+}
+
+const diKey: InjectionKey<DatePickerContext> = Symbol('DatePickerDIKey')
+
+export function useDate(type: 'provide', config: DateProvideConfig): DatePickerContext
+export function useDate(type: 'inject'): DatePickerContext
+export function useDate(type: 'provide' | 'inject', config?: DateProvideConfig): DatePickerContext {
+  if (type === 'inject') {
+    return inject(diKey)!
+  }
+
+  const { props, emit, closeDropdown } = config!
+  const formats = { date: 'yyyy-MM-dd', month: 'yyyy-MM', year: 'yyyy' }
+  const formatStr = computed(() => {
+    return props.format ?? formats[props.type!]
+  })
+
+  const typePanels = { date: ['year', 'month', 'day'], month: ['year', 'month'], year: ['year'] }
+
+  /** 组件类 */
+  const cls = bem('date-picker')
+
+  const currentDate = props.modelValue ? date(props.modelValue) : undefined
+  const state = shallowReactive<DatePickerState>({
+    panel: 'day',
+    date: currentDate,
+    panelDate: date(currentDate?.timestamp ?? new Date())
+  })
+
+  function updatePanelDate() {
+    state.panelDate = date(state.date?.timestamp ?? new Date())
+    const panels = typePanels[props.type!]
+    state.panel = panels[panels.length - 1] as 'day' | 'month' | 'year'
+  }
+
+  watch(
+    () => props.modelValue,
+    (v) => {
+      state.date = v ? date(v) : undefined
+      updatePanelDate()
+    }
+  )
+
+  /** 更新展示的面板 */
+  function showNextPanel() {
+    const panels = typePanels[props.type!]
+    const index = panels.indexOf(state.panel)
+    if (index === -1) {
+      state.panel = panels[panels.length - 1] as 'day' | 'month' | 'year'
+    } else if (index < panels.length - 1) {
+      state.panel = panels[index + 1] as 'day' | 'month' | 'year'
+    }
+  }
+
+  watch(
+    () => props.type,
+    () => {
+      showNextPanel()
+    },
+    { immediate: true }
+  )
+
+  function handlePreYear() {
+    state.panelDate = state.panelDate.calc(-1, 'years')
+  }
+
+  function handlePreMonth() {
+    state.panelDate = state.panelDate.calc(-1, 'months')
+  }
+
+  function handleNextYear() {
+    state.panelDate = state.panelDate.calc(1, 'years')
+  }
+
+  function handleNextMonth() {
+    state.panelDate = state.panelDate.calc(1, 'months')
+  }
+
+  function handlePreTenYears() {
+    state.panelDate = state.panelDate.calc(-10, 'years')
+  }
+
+  function handleNextTenYears() {
+    state.panelDate = state.panelDate.calc(10, 'years')
+  }
+
+  const displayedValue = computed(() => {
+    return state.date?.format(formatStr.value) ?? ''
+  })
+
+  const ctx: DatePickerContext = {
+    cls,
+    state,
+    displayedValue,
+    pickerProps: props,
+    pickerEmit: emit,
+    formatStr,
+    closeDropdown,
+    showNextPanel,
+    handlePreYear,
+    handlePreMonth,
+    handleNextYear,
+    handleNextMonth,
+    handleNextTenYears,
+    handlePreTenYears,
+    updatePanelDate
+  }
+
+  provide(diKey, ctx)
+
+  return ctx
+}

package/src/components/date-range-picker/date-range-picker.vue

@@ -0,0 +1,153 @@
+<template>
+  <u-dropdown
+    :class="className"
+    trigger="click"
+    :content-class="[cls.e('panel'), cls.em('panel', size)]"
+    width="auto"
+    ref="dropdownRef"
+    :disabled="disabled"
+    @mouseenter.native="hovered = true"
+    @mouseleave.native="hovered = false"
+    v-if="!readonly"
+  >
+    <template #trigger>
+      <input
+        type="text"
+        :class="cls.e('input')"
+        :value="displayedOfStart"
+        :placeholder="placeholder[0]"
+        readonly
+      />
+      <span :class="cls.e('separator')">至</span>
+      <input
+        type="text"
+        :class="cls.e('input')"
+        :value="displayedOfEnd"
+        :placeholder="placeholder[1]"
+        readonly
+      />
+
+      <Transition name="zoom-in" mode="out-in">
+        <UIcon
+          v-if="clearable && modelValue && hovered && !disabled"
+          :class="[cls.e('icon'), cls.e('clear')]"
+          title="清除"
+          @click.stop="handleClear"
+        >
+          <Close />
+        </UIcon>
+
+        <u-icon :class="cls.e('icon')" v-else><Calendar /></u-icon>
+      </Transition>
+    </template>
+
+    <template #content>
+      <UDatePanel
+        range
+        :type
+        :disabled-date
+        :size
+        :range-date="currentRangeDate"
+        @select:range-date="handleSelect"
+      />
+    </template>
+  </u-dropdown>
+
+  <template v-else>
+    {{ displayedOfStart || FORM_EMPTY_CONTENT }} 至
+    {{ displayedOfEnd || FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { date, type Dater } from '@cat-kit/core'
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useUpdateLock } from '@veltra/compositions'
+import { Calendar, Close } from '@veltra/icons/normal'
+import { FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { bem } from '@veltra/utils'
+import { computed, shallowRef, watch } from 'vue'
+
+import type { DateRangePickerEmits, DateRangePickerProps, DropdownExposed } from '../../types'
+import { UDatePanel } from '../date-panel'
+import { UDropdown } from '../dropdown'
+import { UIcon } from '../icon'
+
+defineOptions({
+  name: 'DateRangePicker'
+})
+
+const props = withDefaults(defineProps<DateRangePickerProps>(), {
+  placeholder: () => ['起始日期', '结束日期'],
+  type: 'date',
+  disabled: undefined,
+  readonly: undefined,
+  clearable: true
+})
+
+const emit = defineEmits<DateRangePickerEmits>()
+
+const cls = bem('date-range-picker')
+
+const className = computed(() => {
+  return [cls.b, cls.m(size.value), bem.is('disabled', disabled.value)]
+})
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const dropdownRef = shallowRef<DropdownExposed>()
+
+const { update, updateAndLock } = useUpdateLock()
+
+const currentRangeDate = shallowRef<[Dater, Dater]>()
+
+const displayedOfStart = computed(() => {
+  return props.modelValue?.[0]
+})
+
+const displayedOfEnd = computed(() => {
+  return props.modelValue?.[1]
+})
+
+const formatStr = computed(() => {
+  const { format, type } = props
+  if (format) return format
+  if (type === 'date') return 'yyyy-MM-dd'
+  if (type === 'month') return 'yyyy-MM'
+  if (type === 'year') return 'yyyy'
+  return 'yyyy-MM-dd'
+})
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    update(() => {
+      if (val?.length === 2) {
+        currentRangeDate.value = [date(val[0]), date(val[1])]
+      }
+    })
+  },
+  { immediate: true }
+)
+
+async function handleSelect(rangeDate: [Dater, Dater] | undefined) {
+  await updateAndLock(() => {
+    currentRangeDate.value = rangeDate
+    emit('update:modelValue', rangeDate?.map((d) => d.format(formatStr.value)) as [string, string])
+  })
+  dropdownRef.value?.close()
+}
+
+const hovered = shallowRef(false)
+
+function handleClear() {
+  currentRangeDate.value = undefined
+  emit('update:modelValue', undefined)
+}
+</script>

package/src/components/date-range-picker/index.ts

@@ -0,0 +1 @@
+export { default as UDateRangePicker } from './date-range-picker.vue'

package/src/components/date-range-picker/style.scss

@@ -0,0 +1,80 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: date-range-picker;
+
+@include m.b($root-name) {
+  width: 100%;
+  vertical-align: middle;
+  line-height: 1;
+  box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+  transition: box-shadow 0.25s ease;
+  overflow: hidden;
+
+  @include m.flex($display: inline-flex);
+
+  @include m.size using ($size) {
+    height: fn.use-var(form-component-height, $size);
+    border-radius: fn.use-var(radius, $size);
+    padding: 0 calc(fn.use-var(gap, $size) / 2);
+
+    @include m.bem($root-name, icon) {
+      font-size: calc(fn.use-var(form-component-height, $size) / 2 + 2px);
+    }
+  }
+
+  &:hover {
+    // 悬浮时边框颜色为 var(--u-color-primary);
+    box-shadow: inset 0 0 0px 1px fn.use-var(color, primary);
+  }
+
+  @include m.e(input) {
+    outline: none;
+    border: none;
+    background-color: transparent;
+    text-align: center;
+    height: 100%;
+    min-width: 0;
+    font-family: fn.use-var(font-family);
+    font-size: 1em;
+
+    &:-webkit-autofill {
+      color: #fff !important;
+      background-color: transparent;
+    }
+
+    &::placeholder {
+      color: fn.use-var(text-color, placeholder);
+    }
+  }
+
+  @include m.e(separator) {
+    flex-shrink: 0;
+    min-width: 24px;
+    text-align: center;
+  }
+
+  @include m.e(input) {
+    flex-grow: 1;
+    color: inherit;
+  }
+
+  @include m.e(icon) {
+    flex-shrink: 0;
+  }
+
+  @include m.e(clear) {
+    cursor: pointer;
+  }
+
+  @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, input) {
+      cursor: not-allowed;
+    }
+  }
+}

package/src/components/date-range-picker/style.ts

@@ -0,0 +1,4 @@
+import '../dropdown/style'
+import '../date-panel/style'
+import '../icon/style'
+import './style.scss'

package/src/components/dialog/di.ts

@@ -0,0 +1,7 @@
+import type { InjectionKey, ShallowRef } from 'vue'
+
+export interface DialogContext {
+  visible: ShallowRef<boolean>
+}
+
+export const DialogDIKey: InjectionKey<DialogContext> = Symbol('DialogDIKey')