@varlet/cli 1.22.0-alpha.3 → 1.22.0-alpha.64

package/site/components/loading/Loading.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="var-site--box var-site-loading">
+    <div class="var-site-loading__circle" v-if="type === 'circle'">
+      <span
+        class="var-site-loading__circle-block"
+        :style="{
+          width: radius * 2 + 'px',
+          height: radius * 2 + 'px',
+        }"
+      >
+        <svg viewBox="25 25 50 50">
+          <circle cx="50" cy="50" r="20" fill="none"></circle>
+        </svg>
+      </span>
+    </div>
+
+    <template v-for="(nums, key) in loadingTypeDict" :key="key">
+      <div :class="`var-site-loading__${key} var-site-loading__${key}-${size}`" v-if="type === key">
+        <div
+          v-for="num in nums"
+          :key="num + key"
+          :style="{ backgroundColor: color }"
+          :class="`var-site-loading__${key}-item var-site-loading__${key}-item-${size}`"
+        ></div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { props } from './props'
+
+export default defineComponent({
+  name: 'VarSiteLoading',
+  props,
+  setup() {
+    const loadingTypeDict = {
+      wave: 5,
+      cube: 4,
+      rect: 8,
+      disappear: 3,
+    }
+
+    return {
+      loadingTypeDict,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import './loading';
+</style>

package/site/components/loading/index.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import Loading from './Loading.vue'
+
+Loading.install = function (app: App) {
+  app.component(Loading.name, Loading)
+}
+
+export const _LoadingComponent = Loading
+
+export default Loading

package/site/components/loading/loading.less

@@ -0,0 +1,420 @@
+@import '../styles/var';
+
+@site-loading-normal-width: 50px;
+@site-loading-normal-height: @site-font-size-md + 2;
+
+@site-loading-large-width: 64px;
+@site-loading-large-height: @site-font-size-lg + 2;
+
+@site-loading-small-width: 36px;
+@site-loading-small-height: @site-font-size-sm + 2;
+
+@site-loading-mini-width: 22px;
+@site-loading-mini-height: @site-font-size-xs + 2;
+
+.var-site-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &__circle {
+    display: flex;
+
+    &-block {
+      display: inline-block;
+      animation: circle 1.8s linear infinite;
+
+      svg {
+        display: block;
+        width: 100%;
+        height: 100%;
+
+        circle {
+          animation: circular 1.5s ease-in-out infinite;
+          stroke: currentColor;
+          stroke-width: 3;
+          stroke-linecap: round;
+        }
+      }
+    }
+
+    @keyframes circle {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    @keyframes circular {
+      0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+      }
+
+      50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -40;
+      }
+
+      100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -120;
+      }
+    }
+  }
+
+  &__wave {
+    @site-loading-wave-size-item-width: 5px;
+    @site-loading-wave-size-item-margin: 5px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-large {
+      width: @site-loading-large-width;
+      height: @site-loading-large-height;
+    }
+
+    &-normal {
+      width: @site-loading-normal-width;
+      height: @site-loading-normal-height;
+    }
+
+    &-small {
+      width: @site-loading-small-width;
+      height: @site-loading-small-height;
+    }
+
+    &-mini {
+      width: @site-loading-mini-width;
+      height: @site-loading-mini-height;
+    }
+
+    &-item {
+      height: 100%;
+      display: inline-block;
+      animation: 1.2s ease-in-out infinite wave;
+
+      &:nth-child(1) {
+        animation-delay: -1.2s;
+        margin-left: 0;
+      }
+
+      &:nth-child(2) {
+        animation-delay: -1.1s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: -1s;
+      }
+
+      &:nth-child(4) {
+        animation-delay: -0.9s;
+      }
+
+      &:nth-child(5) {
+        animation-delay: -0.8s;
+      }
+    }
+
+    &-item-large {
+      width: @site-loading-wave-size-item-width;
+      margin-left: @site-loading-wave-size-item-margin;
+    }
+
+    &-item-normal {
+      width: @site-loading-wave-size-item-width - 1;
+      margin-left: @site-loading-wave-size-item-margin - 1;
+    }
+
+    &-item-small {
+      width: @site-loading-wave-size-item-width - 2;
+      margin-left: @site-loading-wave-size-item-margin - 2;
+    }
+
+    &-item-mini {
+      width: @site-loading-wave-size-item-width - 3;
+      margin-left: @site-loading-wave-size-item-margin - 3;
+    }
+
+    @keyframes wave {
+      0%,
+      40%,
+      100% {
+        transform: scaleY(0.4);
+      }
+      20% {
+        transform: scaleY(1);
+      }
+    }
+  }
+
+  &__cube {
+    @site-loading-cube-size-item-width: 10px;
+    @site-loading-cube-size-item-height: 10px;
+    @site-loading-cube-size-item-margin: 5px;
+
+    display: flex;
+    align-items: center;
+
+    &-large {
+      width: @site-loading-large-width;
+      height: @site-loading-large-height;
+    }
+
+    &-normal {
+      width: @site-loading-normal-width;
+      height: @site-loading-normal-height;
+    }
+
+    &-small {
+      width: @site-loading-small-width;
+      height: @site-loading-small-height;
+    }
+
+    &-mini {
+      width: @site-loading-mini-width;
+      height: @site-loading-mini-height;
+    }
+
+    &-item {
+      display: inline-block;
+      transform-origin: right bottom;
+      animation: 1.5s ease infinite cube;
+
+      &:nth-child(1) {
+        animation-delay: 0.2s;
+        margin-left: 0;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 0.4s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.6s;
+      }
+
+      &:nth-child(4) {
+        animation-delay: 0.8s;
+      }
+    }
+
+    &-item-large {
+      height: @site-loading-cube-size-item-height;
+      width: @site-loading-cube-size-item-width;
+      margin-left: @site-loading-cube-size-item-margin;
+    }
+
+    &-item-normal {
+      height: @site-loading-cube-size-item-height - 2;
+      width: @site-loading-cube-size-item-width - 2;
+      margin-left: @site-loading-cube-size-item-margin - 1;
+    }
+
+    &-item-small {
+      height: @site-loading-cube-size-item-height - 4;
+      width: @site-loading-cube-size-item-width - 4;
+      margin-left: @site-loading-cube-size-item-margin - 2;
+    }
+
+    &-item-mini {
+      height: @site-loading-cube-size-item-height - 6;
+      width: @site-loading-cube-size-item-width - 6;
+      margin-left: @site-loading-cube-size-item-margin - 3;
+    }
+
+    @keyframes cube {
+      0% {
+        opacity: 1;
+        transform: scale(1);
+      }
+      100% {
+        opacity: 0;
+        transform: rotate(90deg) scale(0.3);
+      }
+    }
+  }
+
+  &__rect {
+    @site-loading-rect-size-item-width: 8px;
+    @site-loading-rect-size-item-height: 100%;
+
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+
+    &-large {
+      width: @site-loading-large-width;
+      height: @site-loading-large-height;
+    }
+
+    &-normal {
+      width: @site-loading-normal-width;
+      height: @site-loading-normal-height;
+    }
+
+    &-small {
+      width: @site-loading-small-width;
+      height: @site-loading-small-height;
+    }
+
+    &-mini {
+      width: @site-loading-mini-width;
+      height: @site-loading-mini-height;
+    }
+
+    &-item {
+      animation: 2s ease-in-out infinite rect;
+
+      &:nth-child(1) {
+        animation-delay: 1.75s;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 1.5s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 1.25s;
+      }
+
+      &:nth-child(4) {
+        animation-delay: 1s;
+      }
+
+      &:nth-child(5) {
+        animation-delay: 0.75s;
+      }
+
+      &:nth-child(6) {
+        animation-delay: 0.5s;
+      }
+
+      &:nth-child(7) {
+        animation-delay: 0.25s;
+      }
+
+      &:nth-child(8) {
+        animation-delay: 0s;
+      }
+    }
+
+    &-item-large {
+      height: @site-loading-rect-size-item-height;
+      width: @site-loading-rect-size-item-width;
+    }
+
+    &-item-normal {
+      height: @site-loading-rect-size-item-height * 0.9;
+      width: @site-loading-rect-size-item-width * 0.8;
+    }
+
+    &-item-small {
+      height: @site-loading-rect-size-item-height * 0.8;
+      width: @site-loading-rect-size-item-width * 0.6;
+    }
+
+    &-item-mini {
+      height: @site-loading-rect-size-item-height * 0.7;
+      width: @site-loading-rect-size-item-width * 0.4;
+    }
+
+    @keyframes rect {
+      0% {
+        opacity: 0.3;
+      }
+      25% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.3;
+      }
+      65% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0.3;
+      }
+    }
+  }
+
+  &__disappear {
+    @site-loading-disappear-size-item-width: 15px;
+    @site-loading-disappear-size-item-height: 15px;
+
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-flow: nowrap;
+
+    &-large {
+      width: @site-loading-large-width;
+      height: @site-loading-large-height;
+    }
+
+    &-normal {
+      width: @site-loading-normal-width;
+      height: @site-loading-normal-height;
+    }
+
+    &-small {
+      width: @site-loading-small-width;
+      height: @site-loading-small-height;
+    }
+
+    &-mini {
+      width: @site-loading-mini-width;
+      height: @site-loading-mini-height;
+    }
+
+    &-item {
+      border-radius: 50%;
+      animation: 0.5s ease-in-out infinite alternate disappear;
+
+      &:nth-child(1) {
+        animation-delay: -0.4s;
+      }
+
+      &:nth-child(2) {
+        animation-delay: -0.2s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0s;
+      }
+    }
+
+    &-item-large {
+      height: @site-loading-disappear-size-item-height;
+      width: @site-loading-disappear-size-item-width;
+    }
+
+    &-item-normal {
+      height: @site-loading-disappear-size-item-height * 0.8;
+      width: @site-loading-disappear-size-item-width * 0.8;
+    }
+
+    &-item-small {
+      height: @site-loading-disappear-size-item-height * 0.6;
+      width: @site-loading-disappear-size-item-width * 0.6;
+    }
+
+    &-item-mini {
+      height: @site-loading-disappear-size-item-height * 0.4;
+      width: @site-loading-disappear-size-item-width * 0.4;
+    }
+
+    @keyframes disappear {
+      0% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0;
+      }
+    }
+  }
+}

package/site/components/loading/props.ts

@@ -0,0 +1,37 @@
+import type { PropType } from 'vue'
+
+type LoadingType = 'circle' | 'wave' | 'cube' | 'rect' | 'disappear'
+
+type LoadingSize = 'normal' | 'mini' | 'small' | 'large'
+
+export function typeValidator(type: string): boolean {
+  return ['circle', 'wave', 'cube', 'rect', 'disappear'].includes(type)
+}
+
+export function sizeValidator(size: string): boolean {
+  return ['normal', 'mini', 'small', 'large'].includes(size)
+}
+
+export const props = {
+  // loading类型
+  type: {
+    type: String as PropType<LoadingType>,
+    default: 'circle',
+    validator: typeValidator,
+  },
+  radius: {
+    type: [String, Number],
+    default: 15,
+  },
+  // loading尺寸
+  size: {
+    type: String as PropType<LoadingSize>,
+    default: 'normal',
+    validator: sizeValidator,
+  },
+  // loading颜色
+  color: {
+    type: String,
+    default: 'currentColor',
+  },
+}

package/site/components/menu/Menu.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="var-site-menu" ref="host" @click="handleClick">
+    <slot />
+
+    <teleport :to="teleport">
+      <transition name="var-site-menu" @after-enter="onOpened" @after-leave="onClosed">
+        <div
+          class="var-site-menu__menu var-site-elevation--3"
+          ref="menu"
+          :style="{
+            top: `calc(${top}px + ${toSizeUnit(offsetY)})`,
+            left: `calc(${left}px + ${toSizeUnit(offsetX)})`,
+            zIndex,
+          }"
+          v-show="show"
+          @click.stop
+        >
+          <slot name="menu" />
+        </div>
+      </transition>
+    </teleport>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch, onMounted, onUnmounted } from 'vue'
+import { props } from './props'
+import { getLeft, getTop, toSizeUnit } from '../utils/elements'
+import { useZIndex } from '../context/zIndex'
+import type { Ref } from 'vue'
+
+export default defineComponent({
+  name: 'VarSiteMenu',
+  props,
+  setup(props) {
+    const host: Ref<null | HTMLElement> = ref(null)
+    const menu: Ref<null | HTMLElement> = ref(null)
+    const top: Ref<number> = ref(0)
+    const left: Ref<number> = ref(0)
+    const { zIndex } = useZIndex(() => props.show, 1)
+    let clickSelf = false
+
+    const computeTop = (alignment: string): number => {
+      return alignment === 'top'
+        ? getTop(host.value as HTMLElement)
+        : getTop(host.value as HTMLElement) - (menu.value as HTMLElement).offsetHeight
+    }
+
+    const handleClick = () => {
+      clickSelf = true
+    }
+
+    const handleMenuClose = () => {
+      if (clickSelf) {
+        clickSelf = false
+        return
+      }
+
+      if (!props.show) {
+        return
+      }
+
+      props['onUpdate:show']?.(false)
+    }
+
+    // expose
+    const resize = () => {
+      top.value = computeTop(props.alignment)
+      left.value = getLeft(host.value as HTMLElement)
+    }
+
+    watch(() => props.alignment, resize)
+
+    watch(
+      () => props.show,
+      async (newValue: boolean) => {
+        const { onOpen, onClose } = props
+        newValue && resize()
+        newValue ? onOpen?.() : onClose?.()
+      }
+    )
+
+    onMounted(() => {
+      resize()
+
+      document.addEventListener('click', handleMenuClose)
+      window.addEventListener('resize', resize)
+    })
+
+    onUnmounted(() => {
+      document.removeEventListener('click', handleMenuClose)
+      window.removeEventListener('resize', resize)
+    })
+
+    return {
+      zIndex,
+      host,
+      menu,
+      top,
+      left,
+      toSizeUnit,
+      handleClick,
+      resize,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import '../styles/elevation';
+@import './menu';
+</style>

package/site/components/menu/index.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import Menu from './Menu.vue'
+
+Menu.install = function (app: App) {
+  app.component(Menu.name, Menu)
+}
+
+export const _MenuComponent = Menu
+
+export default Menu

package/site/components/menu/menu.less

@@ -0,0 +1,27 @@
+@site-menu-background: #fff;
+
+:root {
+  --site-menu-background: @site-menu-background;
+}
+
+.var {
+  &-site-menu-enter-from,
+  &-site-menu-leave-to {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  &-site-menu-enter-active,
+  &-site-menu-leave-active {
+    transition-property: opacity, transform;
+    transition-duration: 0.25s;
+  }
+}
+
+.var-site-menu {
+  display: inline-block;
+  background: var(--site-menu-background);
+
+  &__menu {
+    position: absolute;
+  }
+}

package/site/components/menu/props.ts

@@ -0,0 +1,43 @@
+import type { PropType } from 'vue'
+
+function alignmentValidator(alignment: string) {
+  return ['top', 'bottom'].includes(alignment)
+}
+
+export const props = {
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  alignment: {
+    type: String as PropType<'top' | 'bottom'>,
+    default: 'top',
+    validator: alignmentValidator,
+  },
+  offsetX: {
+    type: [Number, String],
+    default: 0,
+  },
+  offsetY: {
+    type: [Number, String],
+    default: 0,
+  },
+  teleport: {
+    default: 'body',
+  },
+  onOpen: {
+    type: Function as PropType<() => void>,
+  },
+  onOpened: {
+    type: Function as PropType<() => void>,
+  },
+  onClose: {
+    type: Function as PropType<() => void>,
+  },
+  onClosed: {
+    type: Function as PropType<() => void>,
+  },
+  'onUpdate:show': {
+    type: Function as PropType<(show: boolean) => void>,
+  },
+}