@veltra/desktop 1.0.0

package/src/components/loading/style.scss

@@ -0,0 +1,432 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: loading;
+
+@include m.b($root-name) {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: fn.use-var(bg-color, top, alpha);
+  color: fn.use-var(text-color, main);
+  @include m.flex($justify: center, $align: center);
+
+  @include m.e(container) {
+    position: relative;
+  }
+
+  // line
+  @include m.e(line) {
+    @include m.bem($root-name, loader) {
+      width: 40px;
+      aspect-ratio: 1;
+      display: grid;
+
+      &::before,
+      &::after {
+        content: '';
+        grid-area: 1/1;
+        --c: no-repeat linear-gradient(#{fn.use-var(text-color, main)} 0 0);
+        background:
+          var(--c) 0 0,
+          var(--c) 100% 0,
+          var(--c) 100% 100%,
+          var(--c) 0 100%;
+        animation:
+          line-1 2s infinite linear,
+          line-2 2s infinite linear;
+      }
+      &::after {
+        margin: 25%;
+        transform: scale(-1);
+      }
+    }
+  }
+
+  // spinner
+  @include m.e(spinner) {
+    @include m.bem($root-name, loader) {
+      width: 50px;
+      aspect-ratio: 1;
+      display: grid;
+
+      &::before,
+      &::after {
+        content: '';
+        grid-area: 1/1;
+
+        --c: no-repeat radial-gradient(farthest-side, #{fn.use-var(text-color, main)} 92%, #0000);
+        background:
+          var(--c) 50% 0,
+          var(--c) 50% 100%,
+          var(--c) 100% 50%,
+          var(--c) 0 50%;
+        background-size: 12px 12px;
+        animation: spinner 1s infinite;
+      }
+      &::before {
+        margin: 4px;
+        filter: hue-rotate(45deg);
+        background-size: 8px 8px;
+        animation-timing-function: linear;
+      }
+    }
+  }
+
+  // dot
+  @include m.e(dot) {
+    @include m.bem($root-name, loader) {
+      width: 40px;
+      height: 20px;
+      --c: no-repeat radial-gradient(farthest-side, #{fn.use-var(text-color, main)} 93%, #0000);
+      background:
+        var(--c) 0 0,
+        var(--c) 50% 0;
+      background-size: 8px 8px;
+      position: relative;
+      clip-path: inset(-200% -100% 0 0);
+      animation: dot-0 1.5s linear infinite;
+
+      &:before {
+        content: '';
+        position: absolute;
+        width: 8px;
+        height: 12px;
+        background: fn.use-var(text-color, main);
+        left: -16px;
+        top: 0;
+        animation:
+          dot-1 1.5s linear infinite,
+          dot-2 0.5s cubic-bezier(0, 200, 0.8, 200) infinite;
+      }
+      &:after {
+        content: '';
+        position: absolute;
+        inset: 0 0 auto auto;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: fn.use-var(text-color, main);
+        animation: dot-3 1.5s linear infinite;
+      }
+    }
+  }
+
+  // classic
+  @include m.e(classic) {
+    @include m.bem($root-name, loader) {
+      --w: 6ch;
+      font-size: fn.use-var(font-size, title, default);
+      line-height: 1.4em;
+      letter-spacing: var(--w);
+      width: var(--w);
+      overflow: hidden;
+      white-space: nowrap;
+      color: #0000;
+      text-shadow:
+        calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
+        calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
+        calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
+        calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
+        calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
+        calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+      animation: classic 2s infinite linear;
+
+      &::before {
+        content: '加载中...';
+      }
+    }
+  }
+}
+
+// 线条
+@keyframes line-1 {
+  0% {
+    background-size:
+      0 4px,
+      4px 0,
+      0 4px,
+      4px 0;
+  }
+  12.5% {
+    background-size:
+      100% 4px,
+      4px 0,
+      0 4px,
+      4px 0;
+  }
+  25% {
+    background-size:
+      100% 4px,
+      4px 100%,
+      0 4px,
+      4px 0;
+  }
+  37.5% {
+    background-size:
+      100% 4px,
+      4px 100%,
+      100% 4px,
+      4px 0;
+  }
+  45%,
+  55% {
+    background-size:
+      100% 4px,
+      4px 100%,
+      100% 4px,
+      4px 100%;
+  }
+  62.5% {
+    background-size:
+      0 4px,
+      4px 100%,
+      100% 4px,
+      4px 100%;
+  }
+  75% {
+    background-size:
+      0 4px,
+      4px 0,
+      100% 4px,
+      4px 100%;
+  }
+  87.5% {
+    background-size:
+      0 4px,
+      4px 0,
+      0 4px,
+      4px 100%;
+  }
+  100% {
+    background-size:
+      0 4px,
+      4px 0,
+      0 4px,
+      4px 0;
+  }
+}
+
+@keyframes line-2 {
+  0%,
+  49.9% {
+    background-position:
+      0 0,
+      100% 0,
+      100% 100%,
+      0 100%;
+  }
+  50%,
+  100% {
+    background-position:
+      100% 0,
+      100% 100%,
+      0 100%,
+      0 0;
+  }
+}
+
+// 旋转
+@keyframes spinner {
+  100% {
+    transform: rotate(0.5turn);
+  }
+}
+
+// classic
+@keyframes classic {
+  9.09% {
+    text-shadow:
+      calc(0 * var(--w)) -10px #{fn.use-var(text-color, main)},
+      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+  }
+  18.18% {
+    text-shadow:
+      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * var(--w)) -10px #{fn.use-var(text-color, main)},
+      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+  }
+  27.27% {
+    text-shadow:
+      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * var(--w)) -10px #{fn.use-var(text-color, main)},
+      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+  }
+  36.36% {
+    text-shadow:
+      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * var(--w)) -10px #{fn.use-var(text-color, main)},
+      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+  }
+  45.45% {
+    text-shadow:
+      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * var(--w)) -10px #{fn.use-var(text-color, main)},
+      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+  }
+  54.54% {
+    text-shadow:
+      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * var(--w)) -10px #{fn.use-var(text-color, main)};
+    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+  }
+  63.63% {
+    text-shadow:
+      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * var(--w)) -10px #{fn.use-var(text-color, main)},
+    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+  }
+  72.72% {
+    text-shadow:
+      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * var(--w)) -10px #{fn.use-var(text-color, main)},
+    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+  }
+  81.81% {
+    text-shadow:
+      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * var(--w)) -10px #{fn.use-var(text-color, main)},
+    // calc(-9 * var(--w)) 0 #{fn.use-var(text-color, main)};
+  }
+  90.90% {
+    text-shadow:
+      calc(0 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-1 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-2 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-3 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-4 * var(--w)) 0 #{fn.use-var(text-color, main)},
+      calc(-5 * var(--w)) 0 #{fn.use-var(text-color, main)};
+    // calc(-6 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-7 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-8 * var(--w)) 0 #{fn.use-var(text-color, main)},
+    // calc(-9 * var(--w)) -10px #{fn.use-var(text-color, main)};
+  }
+}
+
+@keyframes dot-0 {
+  0%,
+  30% {
+    background-position:
+      0 0,
+      50% 0;
+  }
+  33% {
+    background-position:
+      0 100%,
+      50% 0;
+  }
+  41%,
+  63% {
+    background-position:
+      0 0,
+      50% 0;
+  }
+  66% {
+    background-position:
+      0 0,
+      50% 100%;
+  }
+  74%,
+  100% {
+    background-position:
+      0 0,
+      50% 0;
+  }
+}
+@keyframes dot-1 {
+  90% {
+    transform: translateY(0);
+  }
+  95% {
+    transform: translateY(15px);
+  }
+  100% {
+    transform: translateY(15px);
+    left: calc(100% - 8px);
+  }
+}
+@keyframes dot-2 {
+  100% {
+    top: -0.1px;
+  }
+}
+@keyframes dot-3 {
+  0%,
+  80%,
+  100% {
+    transform: translate(0);
+  }
+  90% {
+    transform: translate(26px);
+  }
+}

package/src/components/loading/style.ts

@@ -0,0 +1,2 @@
+import '@veltra/styles/anime/fade.scss'
+import './style.scss'

package/src/components/menu/di.ts

@@ -0,0 +1,16 @@
+import type { BEM } from '@veltra/utils'
+import type { ComputedRef, InjectionKey } from 'vue'
+
+import type { MenuProps, MenuEmits } from '../../types'
+import type { ComponentSize } from '../../types'
+
+export interface MenuContext {
+  cls: BEM<'menu', 'u-'>
+  collapsedCls: BEM<'collapsed-menu', 'u-'>
+  menuProps: MenuProps
+  menuEmit: MenuEmits
+  expandedPath: Set<string>
+  size: ComputedRef<ComponentSize>
+}
+
+export const MenuDIKey: InjectionKey<MenuContext> = Symbol('MenuDIKey')

package/src/components/menu/helper.ts

@@ -0,0 +1,3 @@
+export function getKey(index: number, parentKey: string): string {
+  return `${parentKey}-${index}`
+}

package/src/components/menu/index.ts

@@ -0,0 +1,3 @@
+export { default as UMenu } from './menu.vue'
+export { default as UMenuSub } from './menu-sub.vue'
+export { default as UMenuItem } from './menu-item.vue'

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

@@ -0,0 +1,21 @@
+<template>
+  <u-icon v-if="typeof icon !== 'string'">
+    <component :is="icon" />
+  </u-icon>
+
+  <img :src="icon" v-else alt="icon" />
+</template>
+
+<script lang="ts" setup>
+import type { DefineComponent } from 'vue'
+
+import { UIcon } from '../icon'
+
+defineOptions({
+  name: 'MenuIcon'
+})
+
+defineProps<{
+  icon: string | DefineComponent
+}>()
+</script>

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

@@ -0,0 +1,66 @@
+<template>
+  <!-- 一级菜单 -->
+  <u-tip v-if="depth === 0" direction="right" hide-arrow>
+    <li
+      :class="[
+        collapsedCls.e('item'),
+        bem.is('active', active),
+        bem.is('first-level'),
+        bem.is('disabled', menu.disabled ?? false)
+      ]"
+      ref="item"
+      @click="handleClickMenu"
+    >
+      <UMenuIcon v-if="menu.icon" :icon="menu.icon" :class="collapsedCls.e('icon')" />
+      <span v-else>{{ menu.title[0] }}</span>
+    </li>
+
+    <template #content>
+      {{ menu.title }}
+    </template>
+  </u-tip>
+
+  <!-- 二级以及二级以下菜单 -->
+  <li
+    v-else
+    :class="[
+      collapsedCls.e('item'),
+      bem.is('active', active),
+      bem.is('disabled', menu.disabled ?? false)
+    ]"
+    ref="item"
+    @click="_handleClickMenu"
+  >
+    <UMenuIcon v-if="menu.icon" :icon="menu.icon" :class="collapsedCls.e('icon')" />
+
+    <!-- 文本 -->
+    <span :class="collapsedCls.e('item-title')">
+      {{ menu.title }}
+    </span>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { bem } from '@veltra/utils'
+import { useTemplateRef } from 'vue'
+
+import type { MenuItem } from '../../types'
+import { UTip } from '../tip'
+import UMenuIcon from './menu-icon.vue'
+import { useMenuItem } from './use-menu-item'
+
+defineOptions({ name: 'MenuItemCollapsed' })
+
+const props = defineProps<{ menu: MenuItem; depth: number }>()
+
+const itemRef = useTemplateRef('item')
+
+const emit = defineEmits(['click'])
+
+const { collapsedCls, active, handleClickMenu } = useMenuItem({ itemProps: props, itemRef })
+
+function _handleClickMenu() {
+  handleClickMenu()
+  emit('click')
+}
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+  <li
+    :class="[
+      cls.e('item'),
+      bem.is('first-level', depth === 0),
+      bem.is('active', active),
+      bem.is('disabled', menu.disabled ?? false)
+    ]"
+    ref="item"
+    @click="handleClickMenu"
+  >
+    <MenuIcon v-if="menu.icon" :icon="menu.icon" :class="cls.e('icon')" />
+
+    <!-- 文本 -->
+    <span :class="cls.e('item-title')">
+      {{ menu.title }}
+    </span>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { bem } from '@veltra/utils'
+import { useTemplateRef } from 'vue'
+
+import type { MenuItem } from '../../types'
+import MenuIcon from './menu-icon.vue'
+import { useMenuItem } from './use-menu-item'
+
+defineOptions({ name: 'MenuItem' })
+
+const props = defineProps<{ menu: MenuItem; depth: number }>()
+
+const itemRef = useTemplateRef('item')
+
+const { cls, active, handleClickMenu } = useMenuItem({ itemProps: props, itemRef })
+</script>

package/src/components/menu/menu-node.ts

@@ -0,0 +1,6 @@
+import { TreeNode } from '@cat-kit/core'
+
+export class MenuNode<Data extends Record<string, any>> extends TreeNode<Data, MenuNode<Data>> {
+  declare parent?: MenuNode<Data>
+  declare children?: MenuNode<Data>[]
+}

package/src/components/menu/menu-sub-collapsed.vue

@@ -0,0 +1,80 @@
+<template>
+  <u-tip
+    hide-arrow
+    direction="right"
+    alignment="start"
+    :class="[collapsedCls.m(size), collapsedCls.e('panel')]"
+    style="padding: 0"
+    v-model:visible="visible"
+  >
+    <li :class="[collapsedCls.e('sub-content'), bem.is('first-level', depth === 0)]">
+      <MenuIcon v-if="menu.icon" :icon="menu.icon" :class="collapsedCls.e('icon')" />
+
+      <span v-else>{{ menu.title[0] }}</span>
+
+      <template v-if="depth !== 0">
+        <span :class="collapsedCls.e('sub-title')">
+          {{ menu.title }}
+        </span>
+
+        <!-- 展开图标 -->
+        <u-icon :class="[collapsedCls.e('sub-expand')]">
+          <ArrowRight />
+        </u-icon>
+      </template>
+    </li>
+
+    <template #content>
+      <u-scroll tag="ul" :class="collapsedCls.e('sub-list')">
+        <template v-for="(child, index) of menu.children!" :key="getKey(index, parentKey)">
+          <UMenuItemCollapsed
+            v-if="!child.children?.length"
+            :menu="child"
+            :depth="depth + 1"
+            @click="closeSubMenu"
+          />
+
+          <MenuSubCollapsed
+            v-else
+            :menu="child"
+            :parent-key="getKey(index, parentKey)"
+            :depth="depth + 1"
+          />
+        </template>
+      </u-scroll>
+    </template>
+  </u-tip>
+</template>
+
+<script setup lang="ts">
+import { ArrowRight } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { inject, ref } from 'vue'
+
+import type { MenuItem } from '../../types'
+import { UIcon } from '../icon'
+import { UScroll } from '../scroll'
+import { UTip } from '../tip'
+import { MenuDIKey } from './di'
+import { getKey } from './helper'
+import MenuIcon from './menu-icon.vue'
+import UMenuItemCollapsed from './menu-item-collapsed.vue'
+
+defineOptions({
+  name: 'MenuSubCollapsed'
+})
+
+defineProps<{
+  menu: MenuItem
+  parentKey: string
+  depth: number
+}>()
+
+const visible = ref(false)
+
+function closeSubMenu() {
+  visible.value = false
+}
+
+const { collapsedCls, size } = inject(MenuDIKey)!
+</script>