@varlet/cli 2.15.1 → 2.16.0-alpha.1693852004525

package/site/components/icon/props.ts

@@ -1,24 +0,0 @@
-import type { PropType } from 'vue'
-
-export const props = {
-  name: {
-    type: String,
-  },
-  size: {
-    type: [Number, String],
-  },
-  color: {
-    type: String,
-  },
-  namespace: {
-    type: String,
-    default: 'var-icon',
-  },
-  transition: {
-    type: [Number, String],
-    default: 0,
-  },
-  onClick: {
-    type: Function as PropType<(event: Event) => void>,
-  },
-}

package/site/components/loading/Loading.vue

@@ -1,84 +0,0 @@
-<template>
-  <div :class="n()">
-    <div :class="classes(n('content'), [loading, n('content--active')])" v-if="$slots.default">
-      <slot />
-      <div :class="n('content-mask')" v-if="loading"></div>
-    </div>
-    <div :class="classes('var-site--box', n('body'), [$slots.default, n('inside')])" v-if="isShow">
-      <div :class="n('circle')" v-if="type === 'circle'">
-        <span
-          :class="classes(n('circle-block'), n(`circle-block--${size}`))"
-          :style="{
-            width: multiplySizeUnit(radius, 2),
-            height: multiplySizeUnit(radius, 2),
-            color,
-          }"
-        >
-          <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="classes(n(key), n(`${key}--${size}`))" v-if="type === key">
-          <div
-            v-for="num in nums"
-            :key="num + key"
-            :style="{ backgroundColor: color }"
-            :class="classes(n(`${key}-item`), n(`${key}-item--${size}`))"
-          ></div>
-        </div>
-      </template>
-      <div
-        :class="classes(n('description'), n(`description--${size}`))"
-        :style="{ color }"
-        v-if="$slots.description || description"
-      >
-        <slot name="description">{{ description }}</slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
-import { props } from './props'
-import { createNamespace, call } from '../utils/components'
-import { multiplySizeUnit } from '../utils/elements'
-import type { ComputedRef } from 'vue'
-
-const { n, classes } = createNamespace('loading')
-
-export default defineComponent({
-  name: 'VarLoading',
-  props,
-  setup(props, { slots }) {
-    const loadingTypeDict = {
-      wave: 5,
-      cube: 4,
-      rect: 8,
-      disappear: 3,
-    }
-
-    const isShow: ComputedRef<boolean> = computed(() => {
-      if (!call(slots.default)) return true
-
-      return props.loading
-    })
-
-    return {
-      n,
-      classes,
-      multiplySizeUnit,
-      loadingTypeDict,
-      isShow,
-    }
-  },
-})
-</script>
-
-<style lang="less">
-@import '../styles/common';
-@import './loading';
-</style>

package/site/components/loading/index.ts

@@ -1,10 +0,0 @@
-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

@@ -1,505 +0,0 @@
-@import '../styles/var';
-
-@site-loading-opacity: 0.38;
-@site-loading-desc-margin: 8px 0 0;
-@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;
-
-:root {
-  --site-loading-opacity: @site-loading-opacity;
-  --site-loading-desc-margin: @site-loading-desc-margin;
-}
-
-.var-site-loading {
-  position: relative;
-
-  &__content {
-    position: relative;
-    transition: opacity 0.3s;
-    opacity: 1;
-
-    &--active {
-      opacity: var(--site-loading-opacity);
-    }
-
-    &-mask {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-    }
-  }
-
-  &__body {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    flex-direction: column;
-  }
-
-  &__inside {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 1;
-  }
-
-  &__description {
-    color: @site-color-primary;
-    margin: var(--site-loading-desc-margin);
-
-    &--large {
-      font-size: @site-font-size-lg;
-    }
-
-    &--normal {
-      font-size: @site-font-size-md;
-    }
-
-    &--small {
-      font-size: @site-font-size-sm;
-    }
-
-    &--mini {
-      font-size: @site-font-size-xs;
-    }
-  }
-
-  &__circle {
-    display: flex;
-
-    &-block {
-      display: inline-block;
-      color: @site-color-primary;
-      animation: circle 1.8s linear infinite;
-
-      &--large {
-        width: 36px;
-        height: 36px;
-      }
-
-      &--normal {
-        width: 30px;
-        height: 30px;
-      }
-
-      &--small {
-        width: 24px;
-        height: 24px;
-      }
-
-      &--mini {
-        width: 18px;
-        height: 18px;
-      }
-
-      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;
-      background-color: @site-color-primary;
-
-      &: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;
-      background-color: @site-color-primary;
-
-      &: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;
-      background-color: @site-color-primary;
-
-      &: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;
-      background-color: @site-color-primary;
-
-      &: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

@@ -1,42 +0,0 @@
-import type { PropType } from 'vue'
-
-export type LoadingType = 'circle' | 'wave' | 'cube' | 'rect' | 'disappear'
-
-export 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],
-  },
-  // loading尺寸
-  size: {
-    type: String as PropType<LoadingSize>,
-    default: 'normal',
-    validator: sizeValidator,
-  },
-  // loading颜色
-  color: {
-    type: String,
-  },
-  description: {
-    type: String,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-}