@varlet/cli 1.27.20 → 2.0.0-alpha.1663499244572

package/site/components/loading/props.ts

@@ -1,37 +1,42 @@
-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],
-    default: 15,
-  },
-  // loading尺寸
-  size: {
-    type: String as PropType<LoadingSize>,
-    default: 'normal',
-    validator: sizeValidator,
-  },
-  // loading颜色
-  color: {
-    type: String,
-    default: 'currentColor',
-  },
-}
+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,
+  },
+}

package/site/components/popup/Popup.tsx

@@ -0,0 +1,102 @@
+import { defineComponent, watch, Transition, Teleport } from 'vue'
+import { props } from './props'
+import { useLock } from '../context/lock'
+import { useZIndex } from '../context/zIndex'
+import { useRouteListener, useTeleport, createNamespace } from '../utils/components'
+
+import '../styles/common.less'
+import './popup.less'
+
+const { n, classes } = createNamespace('popup')
+
+export default defineComponent({
+  name: 'VarPopup',
+  inheritAttrs: false,
+  props,
+  setup(props, { slots, attrs }) {
+    const { zIndex } = useZIndex(() => props.show, 3)
+    const { disabled } = useTeleport()
+
+    const hidePopup = () => {
+      const { closeOnClickOverlay, onClickOverlay } = props
+
+      onClickOverlay?.()
+
+      if (!closeOnClickOverlay) {
+        return
+      }
+
+      props['onUpdate:show']?.(false)
+    }
+
+    useLock(
+      () => props.show,
+      () => props.lockScroll
+    )
+
+    watch(
+      () => props.show,
+      (newValue: boolean) => {
+        const { onOpen, onClose } = props
+        newValue ? onOpen?.() : onClose?.()
+      }
+    )
+
+    // internal for Dialog
+    useRouteListener(() => props.onRouteChange?.())
+
+    const renderOverlay = () => {
+      const { overlayClass = '', overlayStyle } = props
+
+      return (
+        <div
+          class={classes(n('overlay'), overlayClass)}
+          style={{
+            zIndex: zIndex.value - 1,
+            ...overlayStyle,
+          }}
+          onClick={hidePopup}
+        />
+      )
+    }
+
+    const renderContent = () => {
+      return (
+        <div
+          class={classes(n('content'), 'var-site-elevation--3', n(`--${props.position}`))}
+          style={{ zIndex: zIndex.value }}
+          {...attrs}
+        >
+          {slots.default?.()}
+        </div>
+      )
+    }
+
+    const renderPopup = () => {
+      const { onOpened, onClosed, show, overlay, transition, position } = props
+
+      return (
+        <Transition name="var-site-fade" onAfterEnter={onOpened} onAfterLeave={onClosed}>
+          <div class={classes('var-site--box', n())} style={{ zIndex: zIndex.value - 2 }} v-show={show}>
+            {overlay && renderOverlay()}
+            <Transition name={transition || `var-site-pop-${position}`}>{show && renderContent()}</Transition>
+          </div>
+        </Transition>
+      )
+    }
+
+    return () => {
+      const { teleport } = props
+
+      if (teleport) {
+        return (
+          <Teleport to={teleport} disabled={disabled.value}>
+            {renderPopup()}
+          </Teleport>
+        )
+      }
+
+      return renderPopup()
+    }
+  },
+})

package/site/components/popup/index.ts

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

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,108 +1,112 @@
-<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 '@varlet/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>
+<template>
+  <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="classes(n('linear-certain'), [ripple, n('linear-ripple')])"
+          :style="{ background: color, width: linearProps.width }"
+        ></div>
+      </div>
+      <div :class="n('linear-label')" v-bind="$attrs" v-if="label">
+        <slot>
+          {{ linearProps.roundValue }}
+        </slot>
+      </div>
+    </div>
+
+    <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="n('circle-background')"
+          :cx="multiplySizeUnit(size, 0.5)"
+          :cy="multiplySizeUnit(size, 0.5)"
+          :r="circleProps.radius"
+          fill="transparent"
+          :stroke-width="toSizeUnit(lineWidth)"
+          :style="{
+            strokeDasharray: circleProps.perimeter,
+            stroke: trackColor,
+          }"
+        ></circle>
+        <circle
+          :class="n('circle-certain')"
+          :cx="multiplySizeUnit(size, 0.5)"
+          :cy="multiplySizeUnit(size, 0.5)"
+          :r="circleProps.radius"
+          fill="transparent"
+          :stroke-width="toSizeUnit(lineWidth)"
+          :style="{
+            strokeDasharray: circleProps.strokeDasharray,
+            stroke: color,
+          }"
+        ></circle>
+      </svg>
+
+      <div :class="n('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 '@varlet/shared'
+import { toSizeUnit, multiplySizeUnit, toPxNum } from '../utils/elements'
+import { createNamespace } from '../utils/components'
+
+const { n, classes } = createNamespace('progress')
+
+export default defineComponent({
+  name: 'VarProgress',
+  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 ${toPxNum(size)} ${toPxNum(size)}`
+      const roundValue = toNumber(value) > 100 ? 100 : Math.round(toNumber(value))
+      const radius = (toPxNum(size) - toPxNum(lineWidth)) / 2
+      const perimeter = 2 * Math.PI * radius
+      const strokeDasharray = `${(roundValue / 100) * perimeter}, ${perimeter}`
+
+      return {
+        viewBox,
+        radius,
+        strokeDasharray,
+        perimeter,
+        roundValue: `${roundValue}%`,
+      }
+    })
+    return {
+      n,
+      classes,
+      toSizeUnit,
+      multiplySizeUnit,
+      linearProps,
+      circleProps,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import './progress';
+</style>

package/site/components/progress/index.ts

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