@veltra/desktop 1.0.0

package/src/components/dialog/dialog.vue

@@ -0,0 +1,251 @@
+<template>
+  <Teleport to="body">
+    <transition name="fade" @after-leave="emit('closed')" @enter="onOverlayEnter">
+      <div
+        v-if="overlayVisible || opened"
+        v-show="overlayVisible"
+        :class="[cls.e('overlay'), bem.is('modal', modal)]"
+        ref="overlayRef"
+        @mousedown="modal && close()"
+        @keyup.esc="close"
+        tabindex="0"
+      >
+        <transition name="spring" @after-leave="onAfterDialogLeave">
+          <div
+            v-if="dialogVisible"
+            v-bind="$attrs"
+            :class="className"
+            ref="dialogRef"
+            @mousedown.stop="handleIncreaseZIndex"
+          >
+            <section :class="headerCls" ref="headerRef" @transitionend.stop @transitioncancel.stop>
+              <div :class="cls.e('title')" @mousedown.stop>
+                <slot name="header">
+                  {{ header || title }}
+                </slot>
+              </div>
+
+              <div :class="cls.e('buttons')" @mousedown.stop>
+                <u-icon
+                  v-if="maximized"
+                  :class="cls.e('btn-recover')"
+                  @click="toggleMaximize(false)"
+                  title="还原"
+                >
+                  <Recover />
+                </u-icon>
+                <u-icon
+                  v-else
+                  :class="cls.e('btn-maximize')"
+                  @click="toggleMaximize(true)"
+                  title="最大化"
+                >
+                  <Maximum />
+                </u-icon>
+                <u-icon :class="cls.e('btn-close')" @click="close" title="关闭">
+                  <Close />
+                </u-icon>
+              </div>
+            </section>
+
+            <u-scroll
+              tag="section"
+              :class="cls.e('body')"
+              ref="bodyRef"
+              :content-style="{ height: maximized ? '100%' : undefined }"
+              @transitionend.stop
+              @transitioncancel.stop
+            >
+              <slot v-bind="{ maximized }" />
+            </u-scroll>
+
+            <section ref="footerRef" :class="footerCls" v-if="$slots.footer">
+              <slot name="footer" v-bind="{ close }" />
+            </section>
+          </div>
+        </transition>
+      </div>
+    </transition>
+  </Teleport>
+
+  <!-- 触发 -->
+  <UNodeRender @click="visible = !visible" :content="getTriggerNode()" ref="triggerRef" />
+</template>
+
+<script lang="ts" setup>
+import { useDrag, useFallbackProps } from '@veltra/compositions'
+import { Close, Maximum, Recover } from '@veltra/icons/normal'
+import { bem, extractNormalVNodes, setStyles, zIndex } from '@veltra/utils'
+import { shallowRef, watch, computed, provide, nextTick } from 'vue'
+
+import type { DialogProps, DialogEmits, DialogExposed, ComponentSize } from '../../types'
+import type { ScrollExposed } from '../../types'
+import { UIcon } from '../icon'
+import { UNodeRender } from '../node-render'
+import { UScroll } from '../scroll'
+import { DialogDIKey } from './di'
+import { useMaximum } from './use-maximum'
+
+defineOptions({
+  name: 'Dialog',
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  modal: true,
+  modelValue: true,
+  autoScroll: true
+})
+const emit = defineEmits<DialogEmits>()
+
+const slots = defineSlots<{
+  footer?: (props: { close: () => void }) => any
+  trigger?: () => any
+  header?: () => any
+  default?: (props: {
+    /** 弹框是否最大化了 */
+    maximized: boolean
+  }) => any
+}>()
+
+const cls = bem('dialog')
+const headerCls = [cls.e('header')]
+const footerCls = [cls.e('footer')]
+
+const { size } = useFallbackProps([props], { size: 'default' as ComponentSize })
+
+const overlayRef = shallowRef<HTMLDivElement>()
+
+/** 弹框模板引用 */
+const dialogRef = shallowRef<HTMLDivElement>()
+
+/** 弹框头部模板引用 */
+const headerRef = shallowRef<HTMLDivElement>()
+
+/** 弹框body模板引用 */
+const bodyRef = shallowRef<ScrollExposed>()
+
+/** 弹框footer模板引用 */
+const footerRef = shallowRef<HTMLDivElement>()
+
+const visible = defineModel<boolean>({
+  default: false
+})
+
+const overlayVisible = shallowRef(false)
+const dialogVisible = shallowRef(false)
+
+watch(visible, (v) => {
+  if (v) {
+    overlayVisible.value = true
+  } else {
+    dialogVisible.value = false
+  }
+})
+
+function getTriggerNode() {
+  const nodes = slots.trigger?.()
+  if (!nodes?.length) return null
+
+  const node = extractNormalVNodes(nodes)[0]
+  return node
+}
+
+function onOverlayEnter() {
+  dialogVisible.value = true
+}
+
+function onAfterDialogLeave() {
+  overlayVisible.value = false
+}
+
+const { toggleMaximize, maximized } = useMaximum({
+  dialogRef,
+  cls
+})
+
+const className = computed(() => {
+  return [cls.b, cls.m(size.value)]
+})
+
+/**
+ * 是否弹出过, 用于控制下一次弹出时是否采用v-show的方式
+ */
+let opened = false
+
+watch(visible, (v) => {
+  if (!v) return
+
+  if (!opened) opened = true
+
+  // 初始化位置偏移量
+  translated.x = 0
+  translated.y = 0
+
+  nextTick(() => {
+    setStyles(overlayRef.value!, { zIndex: zIndex() })
+  })
+})
+
+/** dialog位移的位置 */
+const translated = {
+  x: 0,
+  y: 0
+}
+
+/** 更新弹框位置 */
+const updateDialogTransform = (x: number, y: number) => {
+  const dom = dialogRef.value
+  if (!dom) return
+  setStyles(dom, {
+    transform: `scale3d(1, 1, 1) translate3d(${x}px, ${y}px, 0)`
+  })
+}
+
+// 运用拖拽
+useDrag({
+  target: headerRef,
+
+  onDragStart() {
+    handleIncreaseZIndex()
+  },
+
+  onDrag({ x, y }) {
+    if (maximized.value) return
+    updateDialogTransform(translated.x + x, translated.y + y)
+  },
+
+  onDragEnd({ x, y }) {
+    if (maximized.value) return
+    translated.x += x
+    translated.y += y
+
+    // 字体模糊的bug修正
+    if (translated.x % 2 !== 0) {
+      translated.x += x < 0 ? 1 : -1
+    }
+    if (translated.y % 2 !== 0) {
+      translated.y += y < 0 ? 1 : -1
+    }
+    updateDialogTransform(translated.x, translated.y)
+  }
+})
+
+function handleIncreaseZIndex() {
+  if (props.modal) return
+  setStyles(overlayRef.value!, { zIndex: zIndex() })
+}
+
+/** 关闭 */
+const close = () => {
+  visible.value = false
+}
+
+provide(DialogDIKey, {
+  visible
+})
+
+defineExpose<DialogExposed>({
+  close
+})
+</script>

package/src/components/dialog/index.ts

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

package/src/components/dialog/style.scss

@@ -0,0 +1,145 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$root-name: dialog;
+
+@include m.bem($root-name, overlay) {
+  pointer-events: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  outline: none;
+  @include m.flex($justify: center);
+
+  @include m.is(modal) {
+    background-color: rgba($color: #000000, $alpha: 0.32);
+    pointer-events: auto;
+  }
+}
+
+@include m.b($root-name) {
+  pointer-events: auto;
+  border-radius: fn.use-var(radius, large);
+  will-change: transform, opacity;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  box-shadow: fn.use-var(shadow-x) fn.use-var(shadow-y) 10px 2px fn.use-var(shadow-color);
+  flex-wrap: nowrap;
+  overflow: hidden;
+  @include m.size using ($size) {
+    @include m.bem($root-name, header) {
+      padding: 0 fn.use-var(gap, $size);
+      font-size: fn.use-var(font-size-title, $size);
+    }
+  }
+
+  @include m.e(header, footer) {
+    flex-shrink: 0;
+    overflow: hidden;
+    background-color: fn.use-var(bg-color, middle);
+    // backdrop-filter: fn.use-var(bg-filter);
+  }
+
+  // 弹框头
+  @include m.e(header) {
+    height: 49px;
+    border-bottom: fn.use-var(border);
+    border-radius: fn.use-var(gap, default) fn.use-var(gap, default) 0 0;
+    @include m.flex($justify: space-between);
+
+    &:active {
+      cursor: move;
+    }
+  }
+
+  @include m.e(title) {
+    line-height: 1em;
+    &:active {
+      cursor: text;
+    }
+  }
+
+  @include m.e(body) {
+    padding: 8px;
+    background-color: fn.use-var(bg-color, top);
+    flex-grow: 1;
+  }
+
+  @include m.e(footer) {
+    border-top: fn.use-var(border);
+    padding: 8px;
+    text-align: right;
+    border-radius: 0 0 fn.use-var(gap, default) fn.use-var(gap, default);
+
+    #{fn.bem(button)} + #{fn.bem(button)} {
+      margin-left: fn.use-var(gap, default);
+    }
+  }
+
+  @include m.e(buttons) {
+    gap: fn.use-var(gap, default);
+    @include m.flex;
+  }
+  @include m.e(btn-close, btn-minimize, btn-maximize, btn-recover) {
+    border-radius: 50%;
+    overflow: hidden;
+    color: #fff;
+    font-size: 12px;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+
+    & > svg {
+      opacity: 0;
+      transition: opacity 0.25s;
+    }
+
+    &:hover {
+      & > svg {
+        opacity: 1;
+      }
+    }
+  }
+  @include m.e(btn-close) {
+    background-color: #ff7330;
+  }
+  @include m.e(btn-minimize) {
+    background-color: #e4bf2e;
+  }
+  @include m.e(btn-maximize, btn-recover) {
+    background-color: #34c759;
+  }
+
+  @include m.m(opened) {
+    overflow: hidden !important;
+  }
+}
+
+// // 弹框最大化动画进入后的类
+.#{$root-name}-maximize-enter-to {
+  width: 100vw !important;
+  height: 100vh !important;
+  max-height: 100vh;
+  transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
+  @include m.bem($root-name, header) {
+    &:active {
+      cursor: default;
+    }
+  }
+}
+
+// 弹框最大化动画激活时的类
+.#{$root-name}-maximize-enter-active,
+.#{$root-name}-maximize-leave-active {
+  transition-property: width, height, transform;
+  transition-duration: 0.25s;
+}
+
+// 移除动画激活时保证最大高度为100vh
+.#{$root-name}-maximize-leave-active {
+  max-height: 100vh;
+}

package/src/components/dialog/style.ts

@@ -0,0 +1,5 @@
+import '../icon/style'
+import '../scroll/style'
+import '@veltra/styles/anime/fade.scss'
+import '@veltra/styles/anime/spring.scss'
+import './style.scss'

package/src/components/dialog/use-maximum.ts

@@ -0,0 +1,51 @@
+import { useTransition } from '@veltra/compositions'
+import { type BEM, removeStyles, setStyles } from '@veltra/utils'
+import { shallowRef, type ShallowRef } from 'vue'
+
+interface Options {
+  cls: BEM<'dialog'>
+  dialogRef: ShallowRef<HTMLDivElement | undefined>
+}
+
+interface Returned {
+  /** 是否为最大状态 */
+  maximized: ShallowRef<boolean>
+  /** 切换最大状态 */
+  toggleMaximize: (maxim: boolean) => void
+}
+
+// 最大化过程
+// 1. 先设置一个高度才会有过渡动画
+// 2. 在下一个帧应用最大化时的类名
+// 3. 在进入动画结束时移除高度
+
+export function useMaximum(options: Options): Returned {
+  const { dialogRef } = options
+
+  const maximized = shallowRef(false)
+
+  const maximizeTransition = useTransition('css', {
+    target: dialogRef,
+    name: 'dialog-maximize',
+    keepEnterTo: true,
+    afterLeave() {
+      dialogRef.value && removeStyles(dialogRef.value, ['height'])
+    }
+  })
+
+  /** 切换最大化 */
+  const toggleMaximize = (maxim: boolean): void => {
+    maximized.value = maxim
+    const dom = dialogRef.value
+    if (!dom) return
+    if (maxim) {
+      // 先设置一个高度才会有过渡动画
+      setStyles(dom, { height: `${dom.offsetHeight}px` })
+      maximizeTransition.enter()
+    } else {
+      maximizeTransition.leave()
+    }
+  }
+
+  return { maximized, toggleMaximize }
+}

package/src/components/drawer/drawer.vue

@@ -0,0 +1,83 @@
+<template>
+  <Teleport to="body">
+    <transition name="fade" mode="out-in" @enter="onEnter">
+      <div v-if="overlayVisible" :class="overlayCls.b" :style="{ zIndex: zIndex() }" @click="close">
+        <transition :name="transitionName" appear @after-leave="onAfterDrawerLeave">
+          <div
+            v-bind="$attrs"
+            v-if="drawerVisible"
+            :class="drawerClass"
+            :style="drawerStyle"
+            @click.stop
+          >
+            <span :class="cls.e('close')" @click="close" v-if="showClose">
+              <u-icon><Close /></u-icon>
+            </span>
+            <slot />
+          </div>
+        </transition>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { Close } from '@veltra/icons/normal'
+import { bem, zIndex } from '@veltra/utils'
+import { computed, shallowRef } from 'vue'
+
+import type { DrawerProps, DrawerEmits } from '../../types'
+import { UIcon } from '../icon'
+
+defineOptions({
+  name: 'Drawer',
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<DrawerProps>(), {
+  direction: 'right',
+  closable: true
+})
+
+const emit = defineEmits<DrawerEmits>()
+
+const cls = bem('drawer')
+const overlayCls = bem('drawer-overlay')
+
+const overlayVisible = defineModel<boolean>({
+  default: false
+})
+
+const drawerVisible = shallowRef(false)
+
+// 根据方向计算过渡动画名称
+const transitionName = computed(() => {
+  return `drawer-slide-${props.direction}`
+})
+
+// 计算抽屉样式类
+const drawerClass = computed(() => {
+  return [cls.b, bem.is(props.direction)]
+})
+
+// 计算抽屉样式
+const drawerStyle = computed(() => {
+  const style: Record<string, string> = {}
+
+  return style
+})
+
+const onEnter = () => {
+  drawerVisible.value = true
+}
+
+const onAfterDrawerLeave = () => {
+  overlayVisible.value = false
+}
+
+// 关闭抽屉
+const close = () => {
+  drawerVisible.value = false
+  emit('close')
+}
+</script>

package/src/components/drawer/index.ts

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

package/src/components/drawer/style.scss

@@ -0,0 +1,145 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+@use 'sass:map';
+@use 'sass:string';
+
+// 方便拼接
+$root-name: drawer;
+$overlay-name: #{$root-name}-overlay;
+
+$edge-offset: 4px;
+$drawer-size: 320px;
+$close-size: 48px;
+
+$directions: (right, left, top, bottom);
+
+$direction-map: (
+  right: translateX(100%),
+  left: translateX(-100%),
+  top: translateY(-100%),
+  bottom: translateY(100%)
+);
+@include m.b($root-name) {
+  position: absolute;
+  border-radius: fn.use-var(radius, large);
+  background-color: fn.use-var(bg-color, top);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 0 10px 2px fn.use-var(shadow, color);
+
+  @include m.e(close) {
+    position: absolute;
+    width: $close-size;
+    height: $close-size;
+    cursor: pointer;
+    font-size: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @each $direction in $directions {
+    @include m.is($direction) {
+      --transform: #{map.get($direction-map, $direction)};
+    }
+  }
+
+  @include m.is(right, left) {
+    top: $edge-offset;
+    bottom: $edge-offset;
+    height: calc(100% - $edge-offset * 2);
+    width: $drawer-size;
+
+    @include m.bem($root-name, close) {
+      top: 0;
+      bottom: 0;
+      margin: auto 0;
+    }
+  }
+
+  @include m.is(top, bottom) {
+    left: $edge-offset;
+    right: $edge-offset;
+    width: calc(100% - $edge-offset * 2);
+    height: $drawer-size;
+
+    @include m.bem($root-name, close) {
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+    }
+  }
+
+  @include m.is(right) {
+    right: $edge-offset;
+
+    @include m.bem($root-name, close) {
+      left: -($close-size + 4px);
+    }
+  }
+
+  @include m.is(left) {
+    left: $edge-offset;
+
+    @include m.bem($root-name, close) {
+      right: -($close-size + 4px);
+    }
+  }
+
+  @include m.is(top) {
+    top: $edge-offset;
+
+    @include m.bem($root-name, close) {
+      bottom: -($close-size + 4px);
+    }
+  }
+
+  @include m.is(bottom) {
+    bottom: $edge-offset;
+
+    @include m.bem($root-name, close) {
+      top: -($close-size + 4px);
+    }
+  }
+}
+
+@include m.b($overlay-name) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba($color: #000000, $alpha: 0.32);
+  overflow: hidden;
+}
+
+// 动画
+
+@function get-selector($direction, $type) {
+  @return '.' + drawer-slide-#{$direction}-#{$type}-active;
+}
+
+// 获取激活状态选择器
+@function get-active($type) {
+  $active: '';
+  @each $direction in $directions {
+    $active: $active + ',' + get-selector($direction, $type);
+  }
+  @return string.slice($active, 2, -1);
+}
+
+#{get-active(enter)} {
+  transition: transform 0.3s cubic-bezier(0.46, 1.29, 0.46, 1.04);
+}
+
+#{get-active(leave)} {
+  transition: transform 0.3s ease-in-out;
+}
+
+@each $direction in $directions {
+  .drawer-slide-#{$direction}-enter-from,
+  .drawer-slide-#{$direction}-leave-to {
+    transform: var(--transform);
+  }
+}

package/src/components/drawer/style.ts

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