@varlet/cli 1.27.20 → 2.0.0-alpha.1663742071515

package/site/components/loading/Loading.vue

@@ -1,40 +1,59 @@
 <template>
-  <div class="var-site--box var-site-loading">
-    <div class="var-site-loading__circle" v-if="type === 'circle'">
-      <span
-        class="var-site-loading__circle-block"
-        :style="{
-          width: radius * 2 + 'px',
-          height: radius * 2 + 'px',
-        }"
-      >
-        <svg viewBox="25 25 50 50">
-          <circle cx="50" cy="50" r="20" fill="none"></circle>
-        </svg>
-      </span>
+  <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="`var-site-loading__${key} var-site-loading__${key}-${size}`" v-if="type === key">
-        <div
-          v-for="num in nums"
-          :key="num + key"
-          :style="{ backgroundColor: color }"
-          :class="`var-site-loading__${key}-item var-site-loading__${key}-item-${size}`"
-        ></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>
-    </template>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+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: 'VarSiteLoading',
+  name: 'VarLoading',
   props,
-  setup() {
+  setup(props, { slots }) {
     const loadingTypeDict = {
       wave: 5,
       cube: 4,
@@ -42,8 +61,18 @@ export default defineComponent({
       disappear: 3,
     }
 
+    const isShow: ComputedRef<boolean> = computed(() => {
+      if (!call(slots.default)) return true
+
+      return props.loading
+    })
+
     return {
+      n,
+      classes,
+      multiplySizeUnit,
       loadingTypeDict,
+      isShow,
     }
   },
 })

package/site/components/loading/loading.less

@@ -1,5 +1,7 @@
 @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;
 
@@ -12,18 +14,97 @@
 @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 {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  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%;
@@ -72,22 +153,22 @@
     align-items: center;
     justify-content: center;
 
-    &-large {
+    &--large {
       width: @site-loading-large-width;
       height: @site-loading-large-height;
     }
 
-    &-normal {
+    &--normal {
       width: @site-loading-normal-width;
       height: @site-loading-normal-height;
     }
 
-    &-small {
+    &--small {
       width: @site-loading-small-width;
       height: @site-loading-small-height;
     }
 
-    &-mini {
+    &--mini {
       width: @site-loading-mini-width;
       height: @site-loading-mini-height;
     }
@@ -96,6 +177,7 @@
       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;
@@ -119,22 +201,22 @@
       }
     }
 
-    &-item-large {
+    &-item--large {
       width: @site-loading-wave-size-item-width;
       margin-left: @site-loading-wave-size-item-margin;
     }
 
-    &-item-normal {
+    &-item--normal {
       width: @site-loading-wave-size-item-width - 1;
       margin-left: @site-loading-wave-size-item-margin - 1;
     }
 
-    &-item-small {
+    &-item--small {
       width: @site-loading-wave-size-item-width - 2;
       margin-left: @site-loading-wave-size-item-margin - 2;
     }
 
-    &-item-mini {
+    &-item--mini {
       width: @site-loading-wave-size-item-width - 3;
       margin-left: @site-loading-wave-size-item-margin - 3;
     }
@@ -159,22 +241,22 @@
     display: flex;
     align-items: center;
 
-    &-large {
+    &--large {
       width: @site-loading-large-width;
       height: @site-loading-large-height;
     }
 
-    &-normal {
+    &--normal {
       width: @site-loading-normal-width;
       height: @site-loading-normal-height;
     }
 
-    &-small {
+    &--small {
       width: @site-loading-small-width;
       height: @site-loading-small-height;
     }
 
-    &-mini {
+    &--mini {
       width: @site-loading-mini-width;
       height: @site-loading-mini-height;
     }
@@ -183,6 +265,7 @@
       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;
@@ -202,25 +285,25 @@
       }
     }
 
-    &-item-large {
+    &-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 {
+    &-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 {
+    &-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 {
+    &-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;
@@ -247,28 +330,29 @@
     justify-content: center;
     align-items: center;
 
-    &-large {
+    &--large {
       width: @site-loading-large-width;
       height: @site-loading-large-height;
     }
 
-    &-normal {
+    &--normal {
       width: @site-loading-normal-width;
       height: @site-loading-normal-height;
     }
 
-    &-small {
+    &--small {
       width: @site-loading-small-width;
       height: @site-loading-small-height;
     }
 
-    &-mini {
+    &--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;
@@ -303,22 +387,22 @@
       }
     }
 
-    &-item-large {
+    &-item--large {
       height: @site-loading-rect-size-item-height;
       width: @site-loading-rect-size-item-width;
     }
 
-    &-item-normal {
+    &-item--normal {
       height: @site-loading-rect-size-item-height * 0.9;
       width: @site-loading-rect-size-item-width * 0.8;
     }
 
-    &-item-small {
+    &-item--small {
       height: @site-loading-rect-size-item-height * 0.8;
       width: @site-loading-rect-size-item-width * 0.6;
     }
 
-    &-item-mini {
+    &-item--mini {
       height: @site-loading-rect-size-item-height * 0.7;
       width: @site-loading-rect-size-item-width * 0.4;
     }
@@ -351,22 +435,22 @@
     align-items: center;
     flex-flow: nowrap;
 
-    &-large {
+    &--large {
       width: @site-loading-large-width;
       height: @site-loading-large-height;
     }
 
-    &-normal {
+    &--normal {
       width: @site-loading-normal-width;
       height: @site-loading-normal-height;
     }
 
-    &-small {
+    &--small {
       width: @site-loading-small-width;
       height: @site-loading-small-height;
     }
 
-    &-mini {
+    &--mini {
       width: @site-loading-mini-width;
       height: @site-loading-mini-height;
     }
@@ -374,6 +458,7 @@
     &-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;
@@ -388,22 +473,22 @@
       }
     }
 
-    &-item-large {
+    &-item--large {
       height: @site-loading-disappear-size-item-height;
       width: @site-loading-disappear-size-item-width;
     }
 
-    &-item-normal {
+    &-item--normal {
       height: @site-loading-disappear-size-item-height * 0.8;
       width: @site-loading-disappear-size-item-width * 0.8;
     }
 
-    &-item-small {
+    &-item--small {
       height: @site-loading-disappear-size-item-height * 0.6;
       width: @site-loading-disappear-size-item-width * 0.6;
     }
 
-    &-item-mini {
+    &-item--mini {
       height: @site-loading-disappear-size-item-height * 0.4;
       width: @site-loading-disappear-size-item-width * 0.4;
     }

package/site/components/loading/props.ts

@@ -21,7 +21,6 @@ export const props = {
   },
   radius: {
     type: [String, Number],
-    default: 15,
   },
   // loading尺寸
   size: {
@@ -32,6 +31,12 @@ export const props = {
   // loading颜色
   color: {
     type: String,
-    default: 'currentColor',
+  },
+  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