feat(ui/popup): add defaultStyle prop

varletjs · Dec 5, 2022 · 7ae22f3 · 7ae22f3
1 parent e74cb84
commit 7ae22f3
Show file tree

Hide file tree

Showing 18 changed files with 307 additions and 175 deletions.
diff --git a/packages/varlet-ui/src/popup/Popup.tsx b/packages/varlet-ui/src/popup/Popup.tsx
@@ -63,7 +63,12 @@ export default defineComponent({
     const renderContent = () => {
       return (
         <div
-          class={classes(n('content'), n('$-elevation--3'), n(`--${props.position}`))}
+          class={classes(
+            n('content'),
+            n(`--${props.position}`),
+            [props.defaultStyle, n('--content-background-color')],
+            [props.defaultStyle, n('$-elevation--3')]
+          )}
           style={{ zIndex: zIndex.value }}
           {...attrs}
         >

diff --git a/packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap
@@ -16,7 +16,7 @@ exports[`test popup show 2`] = `
   <div class=\\"var--box var-popup\\" style=\\"z-index: 2001;\\">
     <div class=\\"var-popup__overlay\\" style=\\"z-index: 2002;\\"></div>
     <transition-stub>
-      <div class=\\"var-popup__content var-elevation--3 var-popup--center\\" style=\\"z-index: 2003;\\"> default slot content </div>
+      <div class=\\"var-popup__content var-popup--center var-popup--content-background-color var-elevation--3\\" style=\\"z-index: 2003;\\"> default slot content </div>
     </transition-stub>
   </div>
 </transition-stub>"

diff --git a/packages/varlet-ui/src/popup/__tests__/index.spec.js b/packages/varlet-ui/src/popup/__tests__/index.spec.js
@@ -12,7 +12,7 @@ const Wrapper = {
   components: {
     [VarPopup.name]: VarPopup,
   },
-  props: ['closeOnClickOverlay', 'onOpen', 'onClose', 'onClickOverlay'],
+  props: ['closeOnClickOverlay', 'onOpen', 'onClose', 'onClickOverlay', 'defaultStyle'],
   data: () => ({
     show: false,
   }),
@@ -101,3 +101,17 @@ test('test popup z-index', async () => {
 
   wrapper.unmount()
 })
+
+test('test popup default style', async () => {
+  const wrapper = mount(Wrapper, {
+    props: {
+      defaultStyle: false,
+    },
+  })
+
+  await wrapper.setData({ show: true })
+  expect(wrapper.find('.var-popup--content-background-color').exists()).toBeFalsy()
+  expect(wrapper.find('.var-elevation--3').exists()).toBeFalsy()
+
+  wrapper.unmount()
+})
diff --git a/packages/varlet-ui/src/popup/docs/en-US.md b/packages/varlet-ui/src/popup/docs/en-US.md
@@ -196,6 +196,7 @@ const event = ref(false)
 | `overlay` | Whether to display the overlay | _boolean_ | `true` |  
 | `overlay-class` | Custom overlay class | _string_ | `-` |
 | `overlay-style` | Custom overlay style | _object_ | `-` |
+| `default-style`  | Whether to enable the default style  | _boolean_   | `true`   |
 | `transition` | Transition animation name | _string_ | `-` |
 | `lock-scroll` | Whether to disable scrolling penetration, scrolling the Popup when disabled will not cause the body to scroll | _boolean_ | `true` |
 | `close-on-click-overlay` | Whether to click the overlay to close the Popup | _boolean_ | `true` | 

diff --git a/packages/varlet-ui/src/popup/docs/zh-CN.md b/packages/varlet-ui/src/popup/docs/zh-CN.md
@@ -191,17 +191,18 @@ const event = ref(false)
 
 ### 属性
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `v-model:show` | 是否显示弹出层 | _boolean_ | `false` |
-| `position` | 弹出位置，可选值为 `top` `bottom` `right` `left` `center` | _string_ | `center` |
-| `overlay` | 是否显示遮罩层 | _boolean_ | `true` |
-| `overlay-class` | 自定义遮罩层的 class | _string_ | `-` |
-| `overlay-style` | 自定义遮罩层的 style | _object_ | `-` |
-| `transition` | 过度动画的名称 | _string_ | `-` |
-| `lock-scroll` | 是否禁止滚动穿透，禁止时滚动弹出层不会引发 body 的滚动 | _boolean_ | `true` |
-| `close-on-click-overlay` | 是否点击遮罩层关闭弹出层 | _boolean_ | `true` |
-| `teleport` | 弹出层挂载的位置 | _TeleportProps['to']_ | `-` |
+| 参数                       | 说明                                              | 类型                    | 默认值      |
+|--------------------------|-------------------------------------------------|-----------------------|----------|
+| `v-model:show`           | 是否显示弹出层                                         | _boolean_             | `false`  |
+| `position`               | 弹出位置，可选值为 `top` `bottom` `right` `left` `center` | _string_              | `center` |
+| `overlay`                | 是否显示遮罩层                                         | _boolean_             | `true`   |
+| `overlay-class`          | 自定义遮罩层的 class                                   | _string_              | `-`      |
+| `overlay-style`          | 自定义遮罩层的 style                                   | _object_              | `-`      |
+| `default-style`          | 是否启用默认样式                                        | _boolean_             | `true`   |
+| `transition`             | 过度动画的名称                                         | _string_              | `-`      |
+| `lock-scroll`            | 是否禁止滚动穿透，禁止时滚动弹出层不会引发 body 的滚动                  | _boolean_             | `true`   |
+| `close-on-click-overlay` | 是否点击遮罩层关闭弹出层                                    | _boolean_             | `true`   |
+| `teleport`               | 弹出层挂载的位置                                        | _TeleportProps['to']_ | `-`      |
 
 ### 事件
 

diff --git a/packages/varlet-ui/src/popup/popup.less b/packages/varlet-ui/src/popup/popup.less
@@ -84,10 +84,13 @@
 
   &__content {
     overflow: auto;
-    background-color: var(--popup-content-background-color);
     transition: all 0.25s;
   }
 
+  &--content-background-color {
+    background-color: var(--popup-content-background-color);
+  }
+
   &--center {
     position: relative;
   }

diff --git a/packages/varlet-ui/src/popup/props.ts b/packages/varlet-ui/src/popup/props.ts
@@ -35,6 +35,10 @@ export const props = {
     type: Boolean,
     default: true,
   },
+  defaultStyle: {
+    type: Boolean,
+    default: true,
+  },
   teleport: {
     type: String as PropType<TeleportProps['to']>,
   },

diff --git a/packages/varlet-ui/src/result/Result.vue b/packages/varlet-ui/src/result/Result.vue
@@ -1,11 +1,5 @@
 <template>
-  <div
-    :class="classes(n(), n('$--box'))"
-    :style="{
-      opacity,
-      transition: `opacity ${duration * 2}ms`,
-    }"
-  >
+  <div :class="classes(n(), n('$--box'))">
     <slot name="image">
       <div :class="n('image-container')" v-if="type">
         <div
@@ -16,7 +10,7 @@
             borderWidth: borderSize,
           }"
         >
-          <component :is="type" :duration="duration" :border-size="borderSize" />
+          <component :is="type" :duration="300" :border-size="borderSize" :animation="animation" />
         </div>
       </div>
     </slot>
@@ -33,8 +27,7 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, onMounted, ref } from 'vue'
-import type { Ref } from 'vue'
+import { computed, ComputedRef, defineComponent } from 'vue'
 import { toNumber } from '@varlet/shared'
 import { props } from './props'
 import { createNamespace } from '../utils/components'
@@ -60,12 +53,6 @@ export default defineComponent({
   },
   props,
   setup(props) {
-    const opacity: Ref<number> = ref(0)
-
-    onMounted(() => {
-      opacity.value = 1
-    })
-
     const circleSize: ComputedRef<string> = computed(() => {
       const { imageSize } = props
 
@@ -75,7 +62,7 @@ export default defineComponent({
     const borderSize: ComputedRef<string> = computed(() => {
       const { imageSize } = props
 
-      return `calc(${imageSize ? toSizeUnit(imageSize) : 'var(--result-image-size)'} * 0.05)`
+      return `calc(${imageSize ? toSizeUnit(props.imageSize) : 'var(--result-image-size)'} * 0.05)`
     })
 
     return {
@@ -84,7 +71,6 @@ export default defineComponent({
       toNumber,
       toPxNum,
       toSizeUnit,
-      opacity,
       circleSize,
       borderSize,
     }

diff --git a/packages/varlet-ui/src/result/Success.vue b/packages/varlet-ui/src/result/Success.vue
@@ -1,34 +1,34 @@
 <template>
   <span
-    :class="n('cover-left')"
+    :class="n('success-cover-left')"
     :style="{
-      animationDuration: `${14 * duration}ms`,
+      animationDuration: animation ? `${14 * duration}ms` : '0ms',
     }"
   />
   <span
-    :class="classes(n('line'), n('line-tip'))"
+    :class="classes(n('success-line'), n('success-line-tip'))"
     :style="{
-      animationDuration: `${2.5 * duration}ms`,
+      animationDuration: animation ? `${2.5 * duration}ms` : '0ms',
       borderRadius: `calc(${borderSize} * 0.625)`,
     }"
   />
   <span
-    :class="classes(n('line'), n('line-long'))"
+    :class="classes(n('success-line'), n('success-line-long'))"
     :style="{
-      animationDuration: `${2.5 * duration}ms`,
+      animationDuration: animation ? `${2.5 * duration}ms` : '0ms',
       borderRadius: `calc(${borderSize} * 0.625)`,
     }"
   />
   <span
     ref="circle"
-    :class="n('circle')"
+    :class="n('success-circle')"
     :style="{ left: `-${borderSize}`, top: `-${borderSize}`, borderWidth: borderSize }"
   />
-  <span :class="n('line-fix')" />
+  <span :class="n('success-line-fix')" />
   <span
-    :class="n('cover-right')"
+    :class="n('success-cover-right')"
     :style="{
-      animationDuration: `${14 * duration}ms`,
+      animationDuration: animation ? `${14 * duration}ms` : '0ms',
     }"
   />
 </template>
@@ -38,13 +38,16 @@ import { defineComponent } from 'vue'
 import { createNamespace } from '../utils/components'
 import { toNumber } from '@varlet/shared'
 
-const { n, classes } = createNamespace('result__success')
+const { n, classes } = createNamespace('result')
 
 export default defineComponent({
   props: {
     duration: {
       type: Number,
     },
+    animation: {
+      type: Boolean,
+    },
     borderSize: {
       type: String,
     },
@@ -58,7 +61,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style lang="less">
-@import './result.less';
-</style>