@varlet/cli 1.20.0 → 1.21.1-alpha.64

package/site/components/progress/Progress.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="var-site-progress">
+    <div class="var-site-progress-linear" v-if="mode === 'linear'">
+      <div class="var-site-progress-linear__block" :style="{ height: `${lineWidth}px` }" v-bind="$attrs">
+        <div class="var-site-progress-linear__background" v-if="track" :style="{ background: trackColor }"></div>
+        <div
+          :class="`var-site-progress-linear__certain${ripple ? ' var-site-progress-linear__ripple' : ''}`"
+          :style="{ background: color, width: linearProps.width }"
+        ></div>
+      </div>
+      <div class="var-site-progress-linear__label" v-bind="$attrs" v-if="label">
+        <slot>
+          {{ linearProps.roundValue }}
+        </slot>
+      </div>
+    </div>
+
+    <div class="var-site-progress-circle" v-if="mode === 'circle'" :style="{ width: `${size}px`, height: `${size}px` }">
+      <svg
+        class="var-site-progress-circle__svg"
+        :style="{ transform: `rotate(${rotate - 90}deg)` }"
+        :viewBox="circleProps.viewBox"
+      >
+        <circle
+          v-if="track"
+          class="var-site-progress-circle__background"
+          :cx="size / 2"
+          :cy="size / 2"
+          :r="circleProps.radius"
+          fill="transparent"
+          :stroke-width="lineWidth"
+          :style="{
+            strokeDasharray: circleProps.perimeter,
+            stroke: trackColor,
+          }"
+        ></circle>
+        <circle
+          class="var-site-progress-circle__certain"
+          :cx="size / 2"
+          :cy="size / 2"
+          :r="circleProps.radius"
+          fill="transparent"
+          :stroke-width="lineWidth"
+          :style="{
+            strokeDasharray: circleProps.strokeDasharray,
+            stroke: color,
+          }"
+        ></circle>
+      </svg>
+
+      <div class="var-site-progress-circle__label" v-if="label" v-bind="$attrs">
+        <slot>
+          {{ circleProps.roundValue }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+import { props } from './props'
+import { toNumber } from '../utils/shared'
+
+export default defineComponent({
+  name: 'VarSiteProgress',
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const linearProps = computed(() => {
+      const value = toNumber(props.value)
+      const width = value > 100 ? 100 : value
+      const roundValue = value > 100 ? 100 : Math.round(value)
+
+      return {
+        width: `${width}%`,
+        roundValue: `${roundValue}%`,
+      }
+    })
+
+    const circleProps = computed(() => {
+      const { size, lineWidth, value } = props
+      const viewBox = `0 0 ${size} ${size}`
+      const roundValue = toNumber(value) > 100 ? 100 : Math.round(toNumber(value))
+      const radius = (size - toNumber(lineWidth)) / 2
+      const perimeter = 2 * Math.PI * radius
+      const strokeDasharray = `${(roundValue / 100) * perimeter}, ${perimeter}`
+
+      return {
+        viewBox,
+        radius,
+        strokeDasharray,
+        perimeter,
+        roundValue: `${roundValue}%`,
+      }
+    })
+    return {
+      linearProps,
+      circleProps,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import './progress';
+</style>

package/site/components/progress/index.ts

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

package/site/components/progress/progress.less

@@ -0,0 +1,98 @@
+@site-progress-font-size: var(--site-font-size-sm);
+@site-progress-ripple-color: #fff;
+@site-progress-track-color: #d8d8d8;
+@site-progress-background: var(--site-color-primary);
+
+:root {
+  --site-progress-font-size: @site-progress-font-size;
+  --site-progress-ripple-color: @site-progress-ripple-color;
+  --site-progress-track-color: @site-progress-track-color;
+  --site-progress-background: @site-progress-background;
+}
+
+.var-site-progress {
+  position: relative;
+  font-size: var(--site-progress-font-size);
+
+  &-linear {
+    display: flex;
+    align-items: center;
+
+    &__block {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+    }
+
+    &__background,
+    &__certain {
+      width: 100%;
+      height: 100%;
+    }
+
+    &__ripple {
+      &::after {
+        position: absolute;
+        width: 0;
+        background-color: var(--site-progress-ripple-color);
+        height: 100%;
+        opacity: 0;
+        animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+        content: '';
+      }
+    }
+
+    &__background {
+      background-color: var(--site-progress-track-color);
+    }
+
+    &__certain {
+      position: absolute;
+      background-color: var(--site-progress-background);
+      top: 0;
+      left: 0;
+      transition: all 0.2s, background-color 0.8s;
+    }
+
+    &__label {
+      margin-left: 8px;
+      flex: 0;
+    }
+
+    @keyframes ripple {
+      0% {
+        width: 0;
+        opacity: 0.1;
+      }
+      20% {
+        width: 0;
+        opacity: 0.5;
+      }
+      80% {
+        width: 100%;
+        opacity: 0;
+      }
+    }
+  }
+
+  &-circle {
+    position: relative;
+
+    &__background {
+      stroke: var(--site-progress-track-color);
+    }
+
+    &__certain {
+      transition: all 0.2s;
+      stroke: var(--site-progress-background);
+      position: absolute;
+    }
+
+    &__label {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}

package/site/components/progress/props.ts

@@ -0,0 +1,55 @@
+function modeValidator(mode: string): boolean {
+  return ['linear', 'circle'].includes(mode)
+}
+
+export const props = {
+  // progress 模式
+  mode: {
+    type: String,
+    default: 'linear',
+    validator: modeValidator,
+  },
+  // progress 线宽
+  lineWidth: {
+    type: [Number, String],
+    default: 4,
+  },
+  // progress 颜色
+  color: {
+    type: String,
+  },
+  // progress 轨道颜色
+  trackColor: {
+    type: String,
+  },
+  // 是否添加水波纹效果
+  ripple: {
+    type: Boolean,
+    default: false,
+  },
+  // progress 值
+  value: {
+    type: [Number, String],
+    default: 0,
+  },
+  // 是否显示label
+  label: {
+    type: Boolean,
+    default: false,
+  },
+  // circle 的尺寸
+  size: {
+    type: Number,
+    default: 40,
+  },
+  // circle的原点
+  rotate: {
+    type: Number,
+    default: 0,
+  },
+  // 是否显示 circle 轨道
+  track: {
+    type: Boolean,
+    default: true,
+  },
+}

package/site/components/ripple/index.ts

@@ -0,0 +1,167 @@
+import context from '../context'
+import './ripple.less'
+import '../styles/common.less'
+import type { Directive, Plugin, App } from 'vue'
+import type { DirectiveBinding } from '@vue/runtime-core'
+
+interface RippleStyles {
+  x: number
+  y: number
+  centerX: number
+  centerY: number
+  size: number
+}
+
+interface RippleOptions {
+  removeRipple: any
+  touchmoveForbid: boolean
+  color?: string
+  disabled?: boolean
+  tasker?: number | null
+}
+
+interface RippleHTMLElement extends HTMLElement {
+  _ripple?: RippleOptions
+}
+
+const ANIMATION_DURATION = 250
+
+function setStyles(element: RippleHTMLElement) {
+  const { zIndex, position } = window.getComputedStyle(element)
+
+  element.style.overflow = 'hidden'
+  element.style.overflowX = 'hidden'
+  element.style.overflowY = 'hidden'
+  position === 'static' && (element.style.position = 'relative')
+  zIndex === 'auto' && (element.style.zIndex = '1')
+}
+
+function computeRippleStyles(element: RippleHTMLElement, event: TouchEvent): RippleStyles {
+  const { top, left }: DOMRect = element.getBoundingClientRect()
+  const { clientWidth, clientHeight } = element
+
+  const radius: number = Math.sqrt(clientWidth ** 2 + clientHeight ** 2) / 2
+  const size: number = radius * 2
+
+  const localX: number = event.touches[0].clientX - left
+  const localY: number = event.touches[0].clientY - top
+
+  const centerX: number = (clientWidth - radius * 2) / 2
+  const centerY: number = (clientHeight - radius * 2) / 2
+
+  const x: number = localX - radius
+  const y: number = localY - radius
+
+  return { x, y, centerX, centerY, size }
+}
+
+function createRipple(this: RippleHTMLElement, event: TouchEvent) {
+  const _ripple = this._ripple as RippleOptions
+  _ripple.removeRipple()
+
+  if (_ripple.disabled || _ripple.tasker) {
+    return
+  }
+
+  const task = () => {
+    _ripple.tasker = null
+
+    const { x, y, centerX, centerY, size }: RippleStyles = computeRippleStyles(this, event)
+    const ripple: RippleHTMLElement = document.createElement('div')
+    ripple.classList.add('var-site-ripple')
+    ripple.style.opacity = `0`
+    ripple.style.transform = `translate(${x}px, ${y}px) scale3d(.3, .3, .3)`
+    ripple.style.width = `${size}px`
+    ripple.style.height = `${size}px`
+    ripple.style.backgroundColor = _ripple.color ?? 'currentColor'
+    ripple.dataset.createdAt = String(performance.now())
+
+    setStyles(this)
+
+    this.appendChild(ripple)
+
+    window.setTimeout(() => {
+      ripple.style.transform = `translate(${centerX}px, ${centerY}px) scale3d(1, 1, 1)`
+      ripple.style.opacity = `.25`
+    }, 20)
+  }
+
+  _ripple.tasker = window.setTimeout(task, 60)
+}
+
+function removeRipple(this: RippleHTMLElement) {
+  const _ripple = this._ripple as RippleOptions
+
+  const task = () => {
+    const ripples: NodeListOf<RippleHTMLElement> = this.querySelectorAll('.var-site-ripple')
+    if (!ripples.length) {
+      return
+    }
+
+    const lastRipple: RippleHTMLElement = ripples[ripples.length - 1]
+    const delay: number = ANIMATION_DURATION - performance.now() + Number(lastRipple.dataset.createdAt)
+
+    setTimeout(() => {
+      lastRipple.style.opacity = `0`
+
+      setTimeout(() => lastRipple.parentNode?.removeChild(lastRipple), ANIMATION_DURATION)
+    }, delay)
+  }
+
+  _ripple.tasker ? setTimeout(task, 60) : task()
+}
+
+function forbidRippleTask(this: RippleHTMLElement) {
+  const _ripple = this._ripple as RippleOptions
+  if (!_ripple.touchmoveForbid) {
+    return
+  }
+
+  _ripple.tasker && window.clearTimeout(_ripple.tasker)
+  _ripple.tasker = null
+}
+
+function mounted(el: RippleHTMLElement, binding: DirectiveBinding<RippleOptions>) {
+  el._ripple = {
+    tasker: null,
+    ...(binding.value ?? {}),
+    touchmoveForbid: binding.value?.touchmoveForbid ?? context.touchmoveForbid,
+    removeRipple: removeRipple.bind(el),
+  }
+
+  el.addEventListener('touchstart', createRipple, { passive: true })
+  el.addEventListener('touchmove', forbidRippleTask, { passive: true })
+  el.addEventListener('dragstart', removeRipple, { passive: true })
+  document.addEventListener('touchend', el._ripple.removeRipple, { passive: true })
+  document.addEventListener('touchcancel', el._ripple.removeRipple, { passive: true })
+}
+
+function unmounted(el: RippleHTMLElement) {
+  el.removeEventListener('touchstart', createRipple)
+  el.removeEventListener('touchmove', forbidRippleTask)
+  el.removeEventListener('dragstart', removeRipple)
+  document.removeEventListener('touchend', el._ripple!.removeRipple)
+  document.removeEventListener('touchcancel', el._ripple!.removeRipple)
+}
+
+function updated(el: RippleHTMLElement, binding: DirectiveBinding<RippleOptions>) {
+  el._ripple = {
+    ...el._ripple,
+    ...(binding.value ?? {}),
+    touchmoveForbid: binding.value?.touchmoveForbid ?? context.touchmoveForbid,
+    tasker: null,
+  }
+}
+
+const Ripple: Directive & Plugin = {
+  mounted,
+  unmounted,
+  updated,
+  install(app: App) {
+    app.directive('ripple', this)
+  },
+}
+
+export const _RippleComponent = Ripple
+
+export default Ripple

package/site/components/ripple/ripple.less

@@ -0,0 +1,17 @@
+@site-ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);
+
+:root {
+  --site-ripple-cubic-bezier: @site-ripple-cubic-bezier;
+}
+
+.var-site-ripple {
+  position: absolute;
+  transition: transform 0.2s var(--site-ripple-cubic-bezier), opacity 0.14s linear;
+  top: 0;
+  left: 0;
+  border-radius: 50%;
+  opacity: 0;
+  will-change: transform, opacity;
+  pointer-events: none;
+  z-index: 100;
+}

package/site/components/styles/common.less

@@ -0,0 +1,64 @@
+@import './var';
+
+.var-site {
+  &--box {
+    box-sizing: border-box;
+
+    * {
+      box-sizing: border-box;
+    }
+  }
+
+  &--relative {
+    position: relative;
+  }
+
+  &--absolute {
+    position: absolute;
+  }
+
+  &--hidden {
+    overflow: hidden;
+  }
+
+  &--lock {
+    overflow: hidden;
+  }
+
+  &--block {
+    display: block;
+  }
+
+  &--inline-block {
+    display: inline-block;
+  }
+
+  &--flex {
+    display: flex;
+  }
+
+  &--inline-flex {
+    display: inline-flex;
+  }
+}
+
+:root {
+  --site-font-size-xs: @site-font-size-xs;
+  --site-font-size-sm: @site-font-size-sm;
+  --site-font-size-md: @site-font-size-md;
+  --site-font-size-lg: @site-font-size-lg;
+  --site-icon-size-xs: @site-icon-size-xs;
+  --site-icon-size-sm: @site-icon-size-sm;
+  --site-icon-size-md: @site-icon-size-md;
+  --site-icon-size-lg: @site-icon-size-lg;
+  --site-color-primary: @site-color-primary;
+  --site-color-info: @site-color-info;
+  --site-color-success: @site-color-success;
+  --site-color-warning: @site-color-warning;
+  --site-color-danger: @site-color-danger;
+  --site-color-disabled: @site-color-disabled;
+  --site-cubic-bezier: @site-cubic-bezier;
+  --site-shadow-key-umbra-opacity: @site-shadow-key-umbra-opacity;
+  --site-shadow-key-penumbra-opacity: @site-shadow-key-penumbra-opacity;
+  --site-shadow-key-ambient-opacity: @site-shadow-key-ambient-opacity;
+}

package/site/components/styles/elevation.less

@@ -0,0 +1,126 @@
+.var-site-elevation {
+  &--0 {
+    box-shadow: 0 0 0 0 var(--site-shadow-key-umbra-opacity), 0 0 0 0 var(--site-shadow-key-penumbra-opacity),
+      0 0 0 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--1 {
+    box-shadow: 0 2px 1px -1px var(--site-shadow-key-umbra-opacity), 0 1px 1px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 3px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--2 {
+    box-shadow: 0 3px 1px -2px var(--site-shadow-key-umbra-opacity), 0 2px 2px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 5px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--3 {
+    box-shadow: 0 3px 3px -2px var(--site-shadow-key-umbra-opacity), 0 3px 4px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 8px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--4 {
+    box-shadow: 0 2px 4px -1px var(--site-shadow-key-umbra-opacity), 0 4px 5px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 10px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--5 {
+    box-shadow: 0 3px 5px -1px var(--site-shadow-key-umbra-opacity), 0 5px 8px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 14px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--6 {
+    box-shadow: 0 3px 5px -1px var(--site-shadow-key-umbra-opacity), 0 6px 10px 0 var(--site-shadow-key-penumbra-opacity),
+      0 1px 18px 0 var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--7 {
+    box-shadow: 0 4px 5px -2px var(--site-shadow-key-umbra-opacity), 0 7px 10px 1px var(--site-shadow-key-penumbra-opacity),
+      0 2px 16px 1px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--8 {
+    box-shadow: 0 5px 5px -3px var(--site-shadow-key-umbra-opacity), 0 8px 10px 1px var(--site-shadow-key-penumbra-opacity),
+      0 3px 14px 2px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--9 {
+    box-shadow: 0 5px 6px -3px var(--site-shadow-key-umbra-opacity), 0 9px 12px 1px var(--site-shadow-key-penumbra-opacity),
+      0 3px 16px 2px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--10 {
+    box-shadow: 0 6px 6px -3px var(--site-shadow-key-umbra-opacity), 0 10px 14px 1px var(--site-shadow-key-penumbra-opacity),
+      0 4px 18px 3px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--11 {
+    box-shadow: 0 6px 7px -4px var(--site-shadow-key-umbra-opacity), 0 11px 15px 1px var(--site-shadow-key-penumbra-opacity),
+      0 4px 20px 3px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--12 {
+    box-shadow: 0 7px 8px -4px var(--site-shadow-key-umbra-opacity), 0 12px 17px 2px var(--site-shadow-key-penumbra-opacity),
+      0 5px 22px 4px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--13 {
+    box-shadow: 0 7px 8px -4px var(--site-shadow-key-umbra-opacity), 0 13px 19px 2px var(--site-shadow-key-penumbra-opacity),
+      0 5px 24px 4px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--14 {
+    box-shadow: 0 7px 9px -4px var(--site-shadow-key-umbra-opacity), 0 14px 21px 2px var(--site-shadow-key-penumbra-opacity),
+      0 5px 26px 4px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--15 {
+    box-shadow: 0 8px 9px -5px var(--site-shadow-key-umbra-opacity), 0 15px 22px 2px var(--site-shadow-key-penumbra-opacity),
+      0 6px 28px 5px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--16 {
+    box-shadow: 0 8px 10px -5px var(--site-shadow-key-umbra-opacity), 0 16px 24px 2px var(--site-shadow-key-penumbra-opacity),
+      0 6px 30px 5px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--17 {
+    box-shadow: 0 8px 11px -5px var(--site-shadow-key-umbra-opacity), 0 17px 26px 2px var(--site-shadow-key-penumbra-opacity),
+      0 6px 32px 5px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--18 {
+    box-shadow: 0 9px 11px -5px var(--site-shadow-key-umbra-opacity), 0 18px 28px 2px var(--site-shadow-key-penumbra-opacity),
+      0 7px 34px 6px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--19 {
+    box-shadow: 0 9px 12px -6px var(--site-shadow-key-umbra-opacity), 0 19px 29px 2px var(--site-shadow-key-penumbra-opacity),
+      0 7px 36px 6px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--20 {
+    box-shadow: 0 10px 13px -6px var(--site-shadow-key-umbra-opacity), 0 20px 31px 3px var(--site-shadow-key-penumbra-opacity),
+      0 8px 38px 7px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--21 {
+    box-shadow: 0 10px 13px -6px var(--site-shadow-key-umbra-opacity), 0 21px 33px 3px var(--site-shadow-key-penumbra-opacity),
+      0 8px 40px 7px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--22 {
+    box-shadow: 0 10px 14px -6px var(--site-shadow-key-umbra-opacity), 0 22px 35px 3px var(--site-shadow-key-penumbra-opacity),
+      0 8px 42px 7px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--23 {
+    box-shadow: 0 11px 14px -7px var(--site-shadow-key-umbra-opacity), 0 23px 36px 3px var(--site-shadow-key-penumbra-opacity),
+      0 9px 44px 8px var(--site-shadow-key-ambient-opacity);
+  }
+
+  &--24 {
+    box-shadow: 0 11px 15px -7px var(--site-shadow-key-umbra-opacity), 0 24px 38px 3px var(--site-shadow-key-penumbra-opacity),
+      0 9px 46px 8px var(--site-shadow-key-ambient-opacity);
+  }
+}

package/site/components/styles/var.less

@@ -0,0 +1,27 @@
+// 文字
+@site-font-size-xs: 10px;
+@site-font-size-sm: 12px;
+@site-font-size-md: 14px;
+@site-font-size-lg: 16px;
+
+// 图标
+@site-icon-size-xs: 16px;
+@site-icon-size-sm: 18px;
+@site-icon-size-md: 20px;
+@site-icon-size-lg: 22px;
+
+//颜色
+@site-color-primary: #3a7afe;
+@site-color-info: #00afef;
+@site-color-success: #00c48f;
+@site-color-warning: #ff9f00;
+@site-color-danger: #f44336;
+@site-color-disabled: #e0e0e0;
+
+// 动画函数
+@site-cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1);
+
+// 阴影
+@site-shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
+@site-shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
+@site-shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);