@varlet/cli 1.27.20 → 2.0.0-alpha.1663499244572

package/site/components/progress/progress.less

@@ -1,98 +1,101 @@
-@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%);
-    }
-  }
-}
+@site-progress-font-size: var(--site-font-size-sm);
+@site-progress-ripple-color: #fff;
+@site-progress-track-color: #d8d8d8;
+@site-progress-background: var(--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;
+      height: 4px;
+    }
+
+    &-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;
+    width: 40px;
+    height: 40px;
+
+    &-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

@@ -1,55 +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,
-  },
-}
+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, String],
+    default: 40,
+  },
+  // circle的原点
+  rotate: {
+    type: Number,
+    default: 0,
+  },
+  // 是否显示 circle 轨道
+  track: {
+    type: Boolean,
+    default: true,
+  },
+}

package/site/components/ripple/index.ts

@@ -1,167 +1,188 @@
-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
+import context from '../context'
+import './ripple.less'
+import '../styles/common.less'
+import { supportTouch } from '../utils/elements'
+import { createNamespace } from '../utils/components'
+import type { Directive, Plugin, App } from 'vue'
+import type { DirectiveBinding } from '@vue/runtime-core'
+
+const { n } = createNamespace('ripple')
+
+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(n())
+    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.color && (ripple.style.backgroundColor = _ripple.color)
+    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(`.${n()}`)
+    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 (!supportTouch()) {
+    return
+  }
+
+  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>) {
+  const newBinding = {
+    touchmoveForbid: binding.value?.touchmoveForbid ?? context.touchmoveForbid,
+    color: binding.value?.color,
+    disabled: binding.value?.disabled,
+  }
+
+  const diff =
+    newBinding.touchmoveForbid !== el._ripple?.touchmoveForbid ||
+    newBinding.color !== el._ripple?.color ||
+    newBinding.disabled !== el._ripple?.disabled
+
+  if (diff) {
+    el._ripple = {
+      tasker: newBinding.disabled ? null : el._ripple?.tasker,
+      removeRipple: el._ripple?.removeRipple,
+      ...newBinding,
+    }
+  }
+}
+
+const Ripple: Directive & Plugin = {
+  mounted,
+  unmounted,
+  updated,
+  install(app: App) {
+    app.directive('ripple', this)
+  },
+}
+
+export const _RippleComponent = Ripple
+
+export default Ripple