@varlet/cli 1.27.20 → 2.0.0-alpha.1663742071515

package/site/components/popup/popup.less

@@ -0,0 +1,125 @@
+@site-popup-overlay-background-color: rgba(0, 0, 0, 0.6);
+@site-popup-content-background-color: #fff;
+
+:root {
+  --site-popup-overlay-background-color: @site-popup-overlay-background-color;
+  --site-popup-content-background-color: @site-popup-content-background-color;
+}
+
+.var-site {
+  &-fade-enter-from,
+  &-fade-leave-to {
+    opacity: 0;
+  }
+  &-fade-enter-active,
+  &-fade-leave-active {
+    transition: opacity 0.25s;
+  }
+
+  &-pop-center-enter-from,
+  &-pop-center-leave-to {
+    transform: scale(0.3);
+  }
+  &-pop-center-enter-active,
+  &-pop-center-leave-active {
+    transition: all 0.25s;
+  }
+
+  &-pop-bottom-enter-from,
+  &-pop-bottom-leave-to {
+    transform: translateY(100%);
+  }
+  &-pop-bottom-enter-active,
+  &-pop-bottom-leave-active {
+    transition: all 0.25s;
+  }
+
+  &-pop-top-enter-from,
+  &-pop-top-leave-to {
+    transform: translateY(-100%);
+  }
+  &-pop-top-enter-active,
+  &-pop-top-leave-active {
+    transition: all 0.25s;
+  }
+
+  &-pop-left-enter-from,
+  &-pop-left-leave-to {
+    transform: translateX(-100%);
+  }
+  &-pop-left-enter-active,
+  &-pop-left-leave-active {
+    transition: all 0.25s;
+  }
+
+  &-pop-right-enter-from,
+  &-pop-right-leave-to {
+    transform: translateX(100%);
+  }
+  &-pop-right-enter-active,
+  &-pop-right-leave-active {
+    transition: all 0.25s;
+  }
+}
+
+.var-site-popup {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  &__overlay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--site-popup-overlay-background-color);
+    transition: all 0.25s;
+  }
+
+  &__content {
+    overflow: auto;
+    background-color: var(--site-popup-content-background-color);
+    transition: all 0.25s;
+  }
+
+  &--center {
+    position: relative;
+  }
+
+  &--bottom {
+    min-width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+
+  &--top {
+    min-width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  &--left {
+    min-height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  &--right {
+    min-height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}

package/site/components/popup/props.ts

@@ -0,0 +1,63 @@
+import type { PropType, TeleportProps } from 'vue'
+
+function positionValidator(position: string): boolean {
+  return ['top', 'bottom', 'right', 'left', 'center'].includes(position)
+}
+
+export const props = {
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  position: {
+    type: String as PropType<'top' | 'bottom' | 'right' | 'left' | 'center'>,
+    default: 'center',
+    validator: positionValidator,
+  },
+  transition: {
+    type: String,
+  },
+  overlay: {
+    type: Boolean,
+    default: true,
+  },
+  overlayClass: {
+    type: String,
+  },
+  overlayStyle: {
+    type: Object,
+  },
+  lockScroll: {
+    type: Boolean,
+    default: true,
+  },
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  teleport: {
+    type: String as PropType<TeleportProps['to']>,
+  },
+  onOpen: {
+    type: Function as PropType<() => void>,
+  },
+  onOpened: {
+    type: Function as PropType<() => void>,
+  },
+  onClose: {
+    type: Function as PropType<() => void>,
+  },
+  onClosed: {
+    type: Function as PropType<() => void>,
+  },
+  onClickOverlay: {
+    type: Function as PropType<() => void>,
+  },
+  // internal for Dialog
+  onRouteChange: {
+    type: Function as PropType<() => void>,
+  },
+  'onUpdate:show': {
+    type: Function as PropType<(show: boolean) => void>,
+  },
+}

package/site/components/progress/Progress.vue

@@ -1,46 +1,42 @@
 <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="n()">
+    <div :class="n('linear')" v-if="mode === 'linear'">
+      <div :class="n('linear-block')" :style="{ height: toSizeUnit(lineWidth) }" v-bind="$attrs">
+        <div :class="n('linear-background')" v-if="track" :style="{ background: trackColor }"></div>
         <div
-          :class="`var-site-progress-linear__certain${ripple ? ' var-site-progress-linear__ripple' : ''}`"
+          :class="classes(n('linear-certain'), [ripple, n('linear-ripple')])"
           :style="{ background: color, width: linearProps.width }"
         ></div>
       </div>
-      <div class="var-site-progress-linear__label" v-bind="$attrs" v-if="label">
+      <div :class="n('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"
-      >
+    <div :class="n('circle')" v-if="mode === 'circle'" :style="{ width: toSizeUnit(size), height: toSizeUnit(size) }">
+      <svg :class="n('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"
+          :class="n('circle-background')"
+          :cx="multiplySizeUnit(size, 0.5)"
+          :cy="multiplySizeUnit(size, 0.5)"
           :r="circleProps.radius"
           fill="transparent"
-          :stroke-width="lineWidth"
+          :stroke-width="toSizeUnit(lineWidth)"
           :style="{
             strokeDasharray: circleProps.perimeter,
             stroke: trackColor,
           }"
         ></circle>
         <circle
-          class="var-site-progress-circle__certain"
-          :cx="size / 2"
-          :cy="size / 2"
+          :class="n('circle-certain')"
+          :cx="multiplySizeUnit(size, 0.5)"
+          :cy="multiplySizeUnit(size, 0.5)"
           :r="circleProps.radius"
           fill="transparent"
-          :stroke-width="lineWidth"
+          :stroke-width="toSizeUnit(lineWidth)"
           :style="{
             strokeDasharray: circleProps.strokeDasharray,
             stroke: color,
@@ -48,7 +44,7 @@
         ></circle>
       </svg>
 
-      <div class="var-site-progress-circle__label" v-if="label" v-bind="$attrs">
+      <div :class="n('circle-label')" v-if="label" v-bind="$attrs">
         <slot>
           {{ circleProps.roundValue }}
         </slot>
@@ -61,9 +57,13 @@
 import { defineComponent, computed } from 'vue'
 import { props } from './props'
 import { toNumber } from '@varlet/shared'
+import { toSizeUnit, multiplySizeUnit, toPxNum } from '../utils/elements'
+import { createNamespace } from '../utils/components'
+
+const { n, classes } = createNamespace('progress')
 
 export default defineComponent({
-  name: 'VarSiteProgress',
+  name: 'VarProgress',
   inheritAttrs: false,
   props,
   setup(props) {
@@ -80,9 +80,9 @@ export default defineComponent({
 
     const circleProps = computed(() => {
       const { size, lineWidth, value } = props
-      const viewBox = `0 0 ${size} ${size}`
+      const viewBox = `0 0 ${toPxNum(size)} ${toPxNum(size)}`
       const roundValue = toNumber(value) > 100 ? 100 : Math.round(toNumber(value))
-      const radius = (size - toNumber(lineWidth)) / 2
+      const radius = (toPxNum(size) - toPxNum(lineWidth)) / 2
       const perimeter = 2 * Math.PI * radius
       const strokeDasharray = `${(roundValue / 100) * perimeter}, ${perimeter}`
 
@@ -95,6 +95,10 @@ export default defineComponent({
       }
     })
     return {
+      n,
+      classes,
+      toSizeUnit,
+      multiplySizeUnit,
       linearProps,
       circleProps,
     }

package/site/components/progress/progress.less

@@ -1,7 +1,7 @@
 @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);
+@site-progress-background: var(--color-primary);
 
 :root {
   --site-progress-font-size: @site-progress-font-size;
@@ -14,23 +14,24 @@
   position: relative;
   font-size: var(--site-progress-font-size);
 
-  &-linear {
+  &__linear {
     display: flex;
     align-items: center;
 
-    &__block {
+    &-block {
       flex: 1;
       position: relative;
       overflow: hidden;
+      height: 4px;
     }
 
-    &__background,
-    &__certain {
+    &-background,
+    &-certain {
       width: 100%;
       height: 100%;
     }
 
-    &__ripple {
+    &-ripple {
       &::after {
         position: absolute;
         width: 0;
@@ -42,11 +43,11 @@
       }
     }
 
-    &__background {
+    &-background {
       background-color: var(--site-progress-track-color);
     }
 
-    &__certain {
+    &-certain {
       position: absolute;
       background-color: var(--site-progress-background);
       top: 0;
@@ -54,7 +55,7 @@
       transition: all 0.2s, background-color 0.8s;
     }
 
-    &__label {
+    &-label {
       margin-left: 8px;
       flex: 0;
     }
@@ -75,20 +76,22 @@
     }
   }
 
-  &-circle {
+  &__circle {
     position: relative;
+    width: 40px;
+    height: 40px;
 
-    &__background {
+    &-background {
       stroke: var(--site-progress-track-color);
     }
 
-    &__certain {
+    &-certain {
       transition: all 0.2s;
       stroke: var(--site-progress-background);
       position: absolute;
     }
 
-    &__label {
+    &-label {
       position: absolute;
       left: 50%;
       top: 50%;

package/site/components/progress/props.ts

@@ -39,7 +39,7 @@ export const props = {
   },
   // circle 的尺寸
   size: {
-    type: Number,
+    type: [Number, String],
     default: 40,
   },
   // circle的原点

package/site/components/ripple/index.ts

@@ -1,9 +1,13 @@
 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
@@ -68,12 +72,12 @@ function createRipple(this: RippleHTMLElement, event: TouchEvent) {
 
     const { x, y, centerX, centerY, size }: RippleStyles = computeRippleStyles(this, event)
     const ripple: RippleHTMLElement = document.createElement('div')
-    ripple.classList.add('var-site-ripple')
+    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.style.backgroundColor = _ripple.color ?? 'currentColor'
+    _ripple.color && (ripple.style.backgroundColor = _ripple.color)
     ripple.dataset.createdAt = String(performance.now())
 
     setStyles(this)
@@ -93,7 +97,7 @@ function removeRipple(this: RippleHTMLElement) {
   const _ripple = this._ripple as RippleOptions
 
   const task = () => {
-    const ripples: NodeListOf<RippleHTMLElement> = this.querySelectorAll('.var-site-ripple')
+    const ripples: NodeListOf<RippleHTMLElement> = this.querySelectorAll(`.${n()}`)
     if (!ripples.length) {
       return
     }
@@ -113,6 +117,11 @@ function removeRipple(this: RippleHTMLElement) {
 
 function forbidRippleTask(this: RippleHTMLElement) {
   const _ripple = this._ripple as RippleOptions
+
+  if (!supportTouch()) {
+    return
+  }
+
   if (!_ripple.touchmoveForbid) {
     return
   }
@@ -145,11 +154,23 @@ function unmounted(el: RippleHTMLElement) {
 }
 
 function updated(el: RippleHTMLElement, binding: DirectiveBinding<RippleOptions>) {
-  el._ripple = {
-    ...el._ripple,
-    ...(binding.value ?? {}),
+  const newBinding = {
     touchmoveForbid: binding.value?.touchmoveForbid ?? context.touchmoveForbid,
-    tasker: null,
+    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,
+    }
   }
 }
 

package/site/components/ripple/ripple.less

@@ -1,7 +1,9 @@
 @site-ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);
+@site-ripple-color: currentColor;
 
 :root {
   --site-ripple-cubic-bezier: @site-ripple-cubic-bezier;
+  --site-ripple-color: @site-ripple-color;
 }
 
 .var-site-ripple {
@@ -14,4 +16,5 @@
   will-change: transform, opacity;
   pointer-events: none;
   z-index: 100;
+  background-color: var(--site-ripple-color);
 }

package/site/components/snackbar/Snackbar.vue

@@ -1,32 +1,35 @@
 <template>
   <teleport :to="teleport" :disabled="disabled">
-    <transition name="var-site-snackbar-fade" @after-enter="onOpened" @after-leave="onClosed">
-      <var-site-snackbar-core v-bind="$props" class="var-site-snackbar-transition">
+    <transition :name="`${n()}-fade`" @after-enter="onOpened" @after-leave="onClosed">
+      <var-snackbar-core v-bind="$props" :class="n('transition')">
         <slot>{{ content }}</slot>
         <template #action>
           <slot name="action" />
         </template>
-      </var-site-snackbar-core>
+      </var-snackbar-core>
     </transition>
   </teleport>
 </template>
 
 <script>
-import VarSiteSnackbarCore from './core'
 import { defineComponent } from 'vue'
-import { useTeleport } from '../utils/components'
+import VarSnackbarCore from './core'
+import { createNamespace, useTeleport } from '../utils/components'
 import { props } from './props'
 
+const { n } = createNamespace('snackbar')
+
 export default defineComponent({
-  name: 'VarSiteSnackbar',
+  name: 'VarSnackbar',
   components: {
-    VarSiteSnackbarCore,
+    VarSnackbarCore,
   },
   props,
   setup() {
     const { disabled } = useTeleport()
 
     return {
+      n,
       disabled,
     }
   },

package/site/components/snackbar/core.vue

@@ -1,12 +1,29 @@
 <template>
-  <div class="var-site-snackbar" :style="{ pointerEvents: isForbidClick ? 'auto' : 'none', zIndex }" v-show="show">
-    <div :class="snackbarClass" :style="{ zIndex }">
-      <div class="var-site-snackbar__content" :class="[contentClass]">
+  <div :class="n()" :style="{ pointerEvents: isForbidClick ? 'auto' : 'none', zIndex }" v-show="show">
+    <div
+      :class="
+        classes(
+          n('wrapper'),
+          n(`wrapper-${position}`),
+          'var-site-elevation--4',
+          [vertical, n('vertical')],
+          [type && SNACKBAR_TYPE.includes(type), n(`wrapper-${type}`)]
+        )
+      "
+      :style="{ zIndex }"
+    >
+      <div :class="[n('content'), contentClass]">
         <slot>{{ content }}</slot>
       </div>
-      <div class="var-site-snackbar__action">
-        <var-site-icon v-if="iconName" :name="iconName" />
-        <var-site-loading v-if="type === 'loading'" :type="loadingType" :size="loadingSize" />
+      <div :class="n('action')">
+        <var-icon v-if="iconName" :name="iconName" />
+        <var-loading
+          v-if="type === 'loading'"
+          :type="loadingType"
+          :size="loadingSize"
+          :color="loadingColor"
+          :radius="loadingRadius"
+        />
         <slot name="action" />
       </div>
     </div>
@@ -15,14 +32,17 @@
 
 <script lang="ts">
 import { defineComponent, watch, ref, onMounted, computed } from 'vue'
-import VarSiteLoading from '../loading'
-import VarSiteIcon from '../icon'
+import VarLoading from '../loading'
+import VarIcon from '../icon'
 import { useZIndex } from '../context/zIndex'
 import { props } from './props'
 import { useLock } from '../context/lock'
 import { SNACKBAR_TYPE } from './index'
 import type { Ref, ComputedRef } from 'vue'
 import type { SnackbarType } from './index'
+import { createNamespace } from '../utils/components'
+
+const { n, classes } = createNamespace('snackbar')
 
 const ICON_TYPE_DICT: Record<SnackbarType, string> = {
   success: 'checkbox-marked-circle',
@@ -35,25 +55,18 @@ const ICON_TYPE_DICT: Record<SnackbarType, string> = {
 export default defineComponent({
   name: 'VarSiteSnackbarCore',
   components: {
-    VarSiteLoading,
-    VarSiteIcon,
+    VarLoading,
+    VarIcon,
   },
   props,
   setup(props) {
     const timer: Ref = ref(null)
     const { zIndex } = useZIndex(() => props.show, 1)
 
-    useLock(props, 'show', 'lockScroll')
-
-    const snackbarClass: ComputedRef<string> = computed(() => {
-      const { position, vertical, type } = props
-
-      const baseClass = `var-site-snackbar__wrapper var-site-snackbar__wrapper-${position} var-site-elevation--4`
-      const verticalClass = vertical ? ' var-site-snackbar__vertical' : ''
-      const typeClass = type && SNACKBAR_TYPE.includes(type) ? ` var-site-snackbar__wrapper-${type}` : ''
-
-      return `${baseClass}${verticalClass}${typeClass}`
-    })
+    useLock(
+      () => props.show,
+      () => props.lockScroll
+    )
 
     const isForbidClick: ComputedRef<boolean> = computed(() => props.type === 'loading' || props.forbidClick)
 
@@ -98,8 +111,10 @@ export default defineComponent({
     })
 
     return {
+      SNACKBAR_TYPE,
+      n,
+      classes,
       zIndex,
-      snackbarClass,
       iconName,
       isForbidClick,
     }