@veltra/desktop 1.0.0

package/src/components/code-editor/code-editor.vue

@@ -0,0 +1,125 @@
+<template>
+  <u-scroll :class="className" @keyup.enter.stop>
+    <div ref="container"></div>
+  </u-scroll>
+</template>
+
+<script lang="ts" setup>
+import { EditorState } from '@codemirror/state'
+import { tooltips } from '@codemirror/view'
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { bem, zIndex } from '@veltra/utils'
+import { EditorView, basicSetup } from 'codemirror'
+import { computed, onBeforeUnmount, shallowRef, useTemplateRef, watch } from 'vue'
+
+import type { CodeEditorLang, CodeEditorProps } from '../../types'
+import { UScroll } from '../scroll'
+
+const props = withDefaults(defineProps<CodeEditorProps>(), {
+  disabled: undefined,
+  readonly: undefined
+})
+
+const model = defineModel<string>()
+
+const cls = bem('code-editor')
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
+
+const className = computed<string[]>(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('disabled', disabled.value),
+    bem.is('readonly', readonly.value)
+  ]
+})
+
+const containerRef = useTemplateRef('container')
+
+const editor = shallowRef<EditorView | null>(null)
+
+const langLoaders: Record<CodeEditorLang, () => Promise<any>> = {
+  js: () => import('@codemirror/lang-javascript').then((m) => m.javascript({ typescript: true })),
+  sql: () => import('@codemirror/lang-sql').then((m) => m.sql()),
+  java: () => import('@codemirror/lang-java').then((m) => m.java()),
+  json: () => import('@codemirror/lang-json').then((m) => m.json())
+}
+
+async function renderEditor() {
+  if (!containerRef.value) return
+  editor.value?.destroy()
+
+  const { language } = props
+
+  const extensions = [
+    basicSetup,
+    tooltips({
+      parent: document.body
+    }),
+    EditorView.theme({
+      '.cm-tooltip': {
+        zIndex: zIndex()
+      }
+    })
+  ]
+
+  if (disabled.value) {
+    extensions.push(EditorView.editable.of(false))
+  }
+  if (readonly.value) {
+    extensions.push(EditorState.readOnly.of(true))
+  }
+  if (language) {
+    const lang = await langLoaders[language]()
+
+    extensions.push(lang)
+  }
+
+  editor.value = new EditorView({
+    doc: model.value,
+    extensions,
+    parent: containerRef.value,
+
+    dispatch(tr) {
+      editor.value?.update([tr])
+      if (tr.changes.empty || !tr.docChanged) {
+        return
+      }
+      model.value = tr.state.doc.toString()
+    }
+  })
+}
+
+watch([containerRef, () => props.language, disabled, readonly], renderEditor)
+
+watch(
+  [() => props.modelValue, editor],
+  ([v, e]) => {
+    if (!e) return
+
+    if (e.composing || e.state.doc.toJSON().join('\n') === v) {
+      return
+    }
+    const isSelectionOutOfRange = !e?.state.selection.ranges.every(
+      (range) => range.anchor < (v?.length ?? 0) && range.head < (v?.length ?? 0)
+    )
+    e?.dispatch({
+      changes: {
+        from: 0,
+        to: e?.state.doc.length,
+        insert: v
+      },
+      selection: isSelectionOutOfRange ? { anchor: 0, head: 0 } : e?.state.selection,
+      scrollIntoView: true
+    })
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  editor.value?.destroy()
+})
+</script>

package/src/components/code-editor/index.ts

@@ -0,0 +1 @@
+export { default as UCodeEditor } from './code-editor.vue'

package/src/components/code-editor/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: code-editor;
+
+@include m.b($root-name) {
+  max-height: 300px;
+  width: 100%;
+  box-shadow: inset 0 0 1px 1px fn.use-var(border-color);
+  transition: box-shadow 0.25s ease;
+
+  &:hover {
+    box-shadow: inset 0 0 1px 1px fn.use-var(color, primary);
+  }
+
+  @include m.size using ($size) {
+    min-height: fn.use-var(form-component-height, $size);
+    border-radius: fn.use-var(radius, $size);
+    padding: 2px calc(fn.use-var(gap, $size) / 2);
+  }
+
+  @include m.is(disabled) {
+    background-color: fn.use-var(color, disabled);
+    box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+    cursor: not-allowed;
+  }
+
+  @include m.is(readonly) {
+    box-shadow: none;
+  }
+}

package/src/components/code-editor/style.ts

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

package/src/components/condition-editor/condition-editor.vue

@@ -0,0 +1,17 @@
+<template>
+  <div :class="cls.b"></div>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+
+import type { ConditionEditorProps } from '../../types'
+
+defineOptions({
+  name: 'ConditionEditor'
+})
+
+defineProps<ConditionEditorProps>()
+
+const cls = bem('condition-editor')
+</script>

package/src/components/condition-editor/index.ts

@@ -0,0 +1 @@
+export { default as UConditionEditor } from './condition-editor.vue'

package/src/components/condition-editor/style.scss

@@ -0,0 +1,9 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: condition-editor;
+
+@include m.b($root-name) {
+}

package/src/components/condition-editor/style.ts

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

package/src/components/context-menu/api.ts

@@ -0,0 +1,23 @@
+import { createVNode, render, type VNode } from 'vue'
+
+import type { ContextMenuProps } from '../../types'
+import MContextMenu from './context-menu.vue'
+
+let node: VNode
+
+export const contextmenu = {
+  pop(options: ContextMenuProps): void {
+    if (node) {
+      render(null, document.body)
+    }
+
+    node = createVNode(MContextMenu, {
+      ...options,
+      onDestroy() {
+        render(null, document.body)
+      }
+    })
+
+    render(node, document.body)
+  }
+}

package/src/components/context-menu/context-menu-item.vue

@@ -0,0 +1,74 @@
+<template>
+  <li
+    :class="[
+      cls.e('item'),
+      bem.is('disabled', disabled),
+      bem.is('loading', loading),
+      cls.em('item', 'menu')
+    ]"
+    v-ripple="!disabled && !loading"
+    @click="handleClickMenu"
+  >
+    <u-icon v-if="loading" :class="bem.is('loading')">
+      <Loading />
+    </u-icon>
+    <template v-else>
+      <u-icon v-if="menu.icon">
+        <component :is="menu.icon" />
+      </u-icon>
+      <i v-else :class="cls.e('icon-place')"></i>
+    </template>
+
+    <span :class="cls.e('label')">{{ menu.label }}</span>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { vRipple } from '@veltra/directives'
+import { Loading } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, inject, shallowRef } from 'vue'
+
+import type { ContextMenuItem } from '../../types'
+import { UIcon } from '../icon'
+import { ContextMenuDIKey } from './di'
+
+defineOptions({
+  name: 'ContextMenuItem'
+})
+
+const { menu } = defineProps<{
+  menu: ContextMenuItem
+}>()
+
+const emit = defineEmits<{
+  (e: 'click-start'): void
+  (e: 'click-end'): void
+}>()
+
+const { cls } = inject(ContextMenuDIKey)!
+
+const loading = shallowRef(false)
+
+const disabled = computed(() => {
+  return (typeof menu.disabled === 'function' ? menu.disabled() : menu.disabled) ?? false
+})
+
+function handleClickMenu() {
+  if (disabled.value || loading.value) return
+  emit('click-start')
+  loading.value = true
+  const result = menu.callback?.()
+
+  if (result instanceof Promise) {
+    return result
+      .then(() => {})
+      .finally(() => {
+        emit('click-end')
+        loading.value = false
+      })
+  }
+  loading.value = false
+  emit('click-end')
+}
+</script>

package/src/components/context-menu/context-menu.vue

@@ -0,0 +1,129 @@
+<template>
+  <transition name="zoom-in" appear @after-leave="emit('destroy')">
+    <ul
+      :class="[cls.b, cls.m(size)]"
+      :style="style"
+      ref="contextMenuRef"
+      v-if="visible"
+      v-click-outside="handleClickOutside"
+    >
+      <UContextMenuItem
+        v-for="menu of menus"
+        :menu="menu"
+        :disabled="getMenuDisabled(menu)"
+        @click-start="handleClickStart"
+        @click-end="handleClickEnd"
+      />
+    </ul>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+import { useFallbackProps } from '@veltra/compositions'
+import { vClickOutside } from '@veltra/directives'
+import { bem, withUnit, zIndex } from '@veltra/utils'
+import { computed, provide, shallowRef, type CSSProperties } from 'vue'
+
+import type {
+  ContextMenuEmits,
+  ContextMenuItem,
+  ContextMenuProps,
+  ComponentSize
+} from '../../types'
+import UContextMenuItem from './context-menu-item.vue'
+import { ContextMenuDIKey } from './di'
+
+defineOptions({
+  name: 'ContextMenu'
+})
+
+const props = withDefaults(defineProps<ContextMenuProps>(), {
+  width: 150
+})
+
+const emit = defineEmits<ContextMenuEmits>()
+
+const { size } = useFallbackProps([props], {
+  size: 'default' as ComponentSize
+})
+
+const cls = bem('context-menu')
+
+const contextMenuRef = shallowRef<HTMLElement>()
+
+const visible = shallowRef(true)
+
+const computePosition = () => {
+  const position: {
+    top?: number
+    left?: number
+    right?: number
+    bottom?: number
+    transformOrigin?: string
+  } = {}
+
+  const { mousePosition } = props
+  const { x, y } = mousePosition
+  if (x > window.innerWidth / 2) {
+    position.right = window.innerWidth - x - 1
+  } else {
+    position.left = x + 1
+  }
+  if (y > window.innerHeight / 2) {
+    position.bottom = window.innerHeight - y - 1
+  } else {
+    position.top = y + 1
+  }
+
+  const positionY = position.top ? 'top' : 'bottom'
+  const positionX = position.left ? 'left' : 'right'
+  position.transformOrigin = `${positionY} ${positionX}`
+
+  return Object.fromEntries(
+    Object.entries(position).map(([k, v]) => [k, withUnit(v as number | string | undefined, 'px')])
+  ) as CSSProperties
+}
+
+const style = computed<CSSProperties>(() => {
+  return {
+    width: withUnit(props.width, 'px'),
+    ...computePosition(),
+    zIndex: zIndex()
+  }
+})
+
+const menus = computed(() => {
+  const { menus } = props
+  if (typeof menus === 'function') {
+    return menus()
+  }
+  return menus
+})
+
+const getMenuDisabled = (menu: ContextMenuItem) => {
+  return typeof menu.disabled === 'function' ? menu.disabled() : menu.disabled
+}
+
+function close() {
+  visible.value = false
+}
+
+let loading = false
+function handleClickStart() {
+  loading = true
+}
+
+function handleClickEnd() {
+  loading = false
+  close()
+}
+
+function handleClickOutside() {
+  if (loading) return
+  close()
+}
+
+provide(ContextMenuDIKey, {
+  cls
+})
+</script>

package/src/components/context-menu/di.ts

@@ -0,0 +1,5 @@
+import type { BEM } from '@veltra/utils'
+import type { InjectionKey } from 'vue'
+
+export const ContextMenuDIKey: InjectionKey<{ cls: BEM<'context-menu'> }> =
+  Symbol('ContextMenuDIKey')

package/src/components/context-menu/index.ts

@@ -0,0 +1 @@
+export { contextmenu } from './api'

package/src/components/context-menu/style.scss

@@ -0,0 +1,47 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: context-menu;
+
+@include m.b($root-name) {
+  position: fixed;
+  background-color: fn.use-var(bg-color, top);
+  box-shadow: fn.use-var(shadow);
+  border-radius: fn.use-var(radius, default);
+  padding: fn.use-var(gap, small);
+
+  @include m.e(label) {
+    margin-left: fn.use-var(gap, small);
+  }
+
+  // @include m.size using ($size) {
+  // padding: fn.use-var(gap, $size);
+
+  // @include m.bem($root-name, item) {
+  //   padding: fn.use-var(gap, $size);
+  //   border-radius: fn.use-var(radius, $size);
+  // }
+  // }
+
+  @include m.e(item) {
+    cursor: pointer;
+    padding: fn.use-var(gap, small);
+    border-radius: fn.use-var(radius, default);
+    @include m.flex;
+
+    &:not(.is-disabled, .is-loading):hover {
+      background-color: fn.use-var(color, primary, light-9);
+    }
+
+    @include m.is(disabled, loading) {
+      cursor: not-allowed;
+      color: fn.use-var(text-color, disabled);
+    }
+  }
+
+  @include m.e(icon-place) {
+    width: 14px;
+  }
+}

package/src/components/context-menu/style.ts

@@ -0,0 +1,4 @@
+import '@veltra/directives/ripple/style.js'
+import '../icon/style'
+import '@veltra/styles/anime/zoom-in.scss'
+import './style.scss'

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

@@ -0,0 +1,45 @@
+<template>
+  <div :class="[cls.b, cls.m(props.size)]">
+    <template v-if="panelType === 'day'">
+      <DayHeader />
+      <DayPanel />
+    </template>
+
+    <template v-else-if="panelType === 'year'">
+      <YearHeader />
+      <YearPanel />
+    </template>
+
+    <template v-else-if="panelType === 'month'">
+      <MonthHeader />
+      <MonthPanel />
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { DatePanelEmits, DatePanelProps } from '../../types'
+import DayHeader from './headers/day.vue'
+import MonthHeader from './headers/month.vue'
+import YearHeader from './headers/year.vue'
+import DayPanel from './panels/day.vue'
+import MonthPanel from './panels/month.vue'
+import YearPanel from './panels/year.vue'
+import { usePanel } from './use-panel'
+
+defineOptions({
+  name: 'DatePanel'
+})
+
+const props = withDefaults(defineProps<DatePanelProps>(), {
+  size: 'default',
+  type: 'date'
+})
+
+const emit = defineEmits<DatePanelEmits>()
+
+const { cls, panelType } = usePanel({
+  props,
+  emit
+})
+</script>

package/src/components/date-panel/di.ts

@@ -0,0 +1,35 @@
+import type { Dater } from '@cat-kit/core'
+import type { BEM } from '@veltra/utils'
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
+
+import type { DatePanelEmits, DatePanelProps, PanelType } from '../../types'
+
+export interface DatePanelContext {
+  cls: BEM<'date-panel'>
+  panelType: Ref<PanelType>
+  panelDate: Ref<Dater>
+  rangeDate: ComputedRef<[Dater, Dater] | undefined>
+
+  panelProps: DatePanelProps
+  panelEmit: DatePanelEmits
+
+  /** 选择日期 */
+  handleDateSelect: (date: Dater) => void
+  /** 范围日期悬停 */
+  handleDateRangeHover: (date: Dater) => void
+
+  /** 上一年 */
+  toPrevYear: () => void
+  /** 上个月 */
+  toPrevMonth: () => void
+  /** 下一年 */
+  toNextYear: () => void
+  /** 下个月 */
+  toNextMonth: () => void
+  /** 下十年 */
+  toNextTenYears: () => void
+  /** 上十年 */
+  toPrevTenYears: () => void
+}
+
+export const DatePanelDIKey: InjectionKey<DatePanelContext> = Symbol('DatePanelDIKey')

package/src/components/date-panel/headers/day.vue

@@ -0,0 +1,45 @@
+<template>
+  <div :class="cls.e('header')">
+    <div>
+      <u-icon @click="toPrevYear" title="上一年">
+        <DArrowLeft />
+      </u-icon>
+      <u-icon @click="toPrevMonth" title="上个月">
+        <ArrowLeft />
+      </u-icon>
+    </div>
+
+    <div>
+      <span :class="cls.e('header-year')" @click="panelType = 'year'">
+        {{ panelDate.year }}
+      </span>
+      <span :class="cls.e('header-month')" @click="panelType = 'month'">
+        {{ panelDate.month }}月
+      </span>
+    </div>
+
+    <div>
+      <u-icon @click="toNextMonth" title="下个月">
+        <ArrowRight />
+      </u-icon>
+      <u-icon @click="toNextYear" title="下一年">
+        <DArrowRight />
+      </u-icon>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ArrowLeft, ArrowRight, DArrowLeft, DArrowRight } from '@veltra/icons/normal'
+import { inject } from 'vue'
+
+import { UIcon } from '../../icon'
+import { DatePanelDIKey } from '../di'
+
+defineOptions({
+  name: 'DatePanelDayHeader'
+})
+
+const { panelDate, panelType, cls, toPrevMonth, toNextMonth, toPrevYear, toNextYear } =
+  inject(DatePanelDIKey)!
+</script>

package/src/components/date-panel/headers/month.vue

@@ -0,0 +1,29 @@
+<template>
+  <div :class="cls.e('header')">
+    <u-icon @click="toPrevYear" title="上一年">
+      <DArrowLeft />
+    </u-icon>
+
+    <span :class="cls.e('header-year')" @click="panelType = 'year'">
+      {{ panelDate.year }}
+    </span>
+
+    <u-icon @click="toNextYear" title="下一年">
+      <DArrowRight />
+    </u-icon>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { DArrowLeft, DArrowRight } from '@veltra/icons'
+import { inject } from 'vue'
+
+import { UIcon } from '../../icon'
+import { DatePanelDIKey } from '../di'
+
+defineOptions({
+  name: 'DatePanelMonthHeader'
+})
+
+const { panelDate, panelType, toPrevYear, toNextYear, cls } = inject(DatePanelDIKey)!
+</script>

package/src/components/date-panel/headers/year.vue

@@ -0,0 +1,36 @@
+<template>
+  <div :class="cls.e('header')">
+    <u-icon @click="toPrevTenYears" title="上个十年">
+      <DArrowLeft />
+    </u-icon>
+
+    <span> {{ startYear }} ~ {{ endYear }} </span>
+
+    <u-icon @click="toNextTenYears" title="下个十年">
+      <DArrowRight />
+    </u-icon>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { DArrowLeft, DArrowRight } from '@veltra/icons/normal'
+import { computed } from 'vue'
+import { inject } from 'vue'
+
+import { UIcon } from '../../icon'
+import { DatePanelDIKey } from '../di'
+
+defineOptions({
+  name: 'DatePanelYearHeader'
+})
+
+const { panelDate, toPrevTenYears, toNextTenYears, cls } = inject(DatePanelDIKey)!
+
+const startYear = computed(() => {
+  return panelDate.value.year - (panelDate.value.year % 10) + 1
+})
+
+const endYear = computed(() => {
+  return startYear.value + 9
+})
+</script>

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

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