vdesign-ui 0.2.1 → 0.2.3

package/dist/components/actionbar/style.less

@@ -1,37 +1,33 @@
+@actionbar-prefix-cls: vd-actionbar;
 
-@actionbar-prefix-cls:vd-actionbar;
-
-.@{actionbar-prefix-cls}{
+.@{actionbar-prefix-cls} {
 
     display: flex;
     width: 100%;
-    height: calc(var(--height-actionbar-content) * 1px);
+    height: var(--height-actionbar-content);
     background-color: var(--color-actionbar-bg);
-    padding-inline-start: calc(var(--spacing-actionbar-padding_y) * 1px);
-    padding-inline-end: calc(var(--spacing-actionbar-padding_y) * 1px);
+    padding-inline-start: var(--spacing-actionbar-padding_y);
+    padding-inline-end: var(--spacing-actionbar-padding_y);
 
-    &__block{
+    &__block {
         padding-inline-start: 0;
         padding-inline-end: 0;
     }
     
-    &__main{
+    &__main {
         display: flex;
         flex: 1;
         justify-content: space-around;
     }
 }
 
-
-
-
 .@{actionbar-prefix-cls}-cell {
     display: flex;
     flex: 1;
     align-items: center;
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+    font-size: var(--en-single-f-d-r-fontSize);
     font-weight: var(--en-single-f-d-r-fontWeight);
 
     &--left {

package/dist/components/actionbar-cell/index.js

@@ -0,0 +1,7 @@
+import ActionbarCell from './index.vue';
+
+ActionbarCell.install = function (Vue) {
+  Vue.component(ActionbarCell.name, ActionbarCell);
+};
+
+export default ActionbarCell;

package/dist/components/{actionbar/actionbar-cell → actionbar-cell}/index.vue

@@ -5,9 +5,13 @@
   </span>
 </template>
 <script>
+import VdIcon from '../icon';
 const prefixCls = 'vd-actionbar'
 export default {
   name: 'vd-actionbar-cell',
+  components: {
+    VdIcon
+  },
   props: {
     // 实际使用场景不多,为了设计验收
     iconName: String,

package/dist/components/{actions-cell/actions → actions}/index.vue

@@ -1,17 +1,21 @@
 <template>
   <div :class="wrapClasses">
     <span class="vd-actions__text" :class="textClasses" v-if="text">{{ text }}</span>
-    <vd-icon v-if="icon && type === 'list'" class="vd-actions__icon" :class="iconClasses"  :name="icon" :svg="iconSvg"></vd-icon>
+    <vd-icon v-if="icon && type === 'list'" class="vd-actions__icon" :class="iconClasses"  :name="icon"></vd-icon>
     <span class="vd-actions__content" :class="contentBg" v-if="icon && type === 'card'">
-      <vd-icon class="vd-actions__icon" :class="iconClasses" :name="icon" :svg="iconSvg"></vd-icon>
+      <vd-icon class="vd-actions__icon" :class="iconClasses" :name="icon"></vd-icon>
     </span>
   </div>
 </template>
 
 <script>
+import VdIcon from '../icon';
 const prefixCls = 'vd-actions'
 export default {
   name: 'vd-actions',
+  components: {
+    VdIcon
+  },
   props: {
     type: {
       type: String,
@@ -28,10 +32,6 @@ export default {
     icon: {
       type: String,
     },
-    iconSvg: {
-      type: Boolean,
-      default: false,
-    },
     disabled:Boolean,
   },
   computed: {

package/dist/components/{actions-cell/actions → actions}/style.less

@@ -1,112 +1,109 @@
-@actions-prefix-cls:vd-actions;
+@actions-prefix-cls: vd-actions;
 
-.@{actions-prefix-cls}{
+.@{actions-prefix-cls} {
     height: 100%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 
-    &__list{
+    &__list {
         width: fit-content;
-        min-width: calc(var(--width-actions-form_small) * 1px);
-        max-width: calc(var(--width-actions-form_large) * 1px);
-        padding: 0 calc(var(--spacing-actions-form-padding_y) * 1px);
+        min-width: var(--width-actions-form_small);
+        max-width: var(--width-actions-form_large);
+        padding: 0 var(--spacing-actions-form-padding_y);
     }
 
-    &__card{
-        padding: 0 calc(var(--spacing-actions-card_item-margin_y) * 1px);
+    &__card {
+        padding: 0 var(--spacing-actions-card_item-margin_y);
 
-        .@{actions-prefix-cls}__content{
+        .@{actions-prefix-cls}__content {
             display: flex;
             align-items: center;
             justify-content: center;
             border-radius: 50%;
-            width: calc(var(--width-actions-card) * 1px);
-            height: calc(var(--width-actions-card) * 1px);
+            width: var(--width-actions-card);
+            height: var(--width-actions-card);
 
-            &--green{
+            &--green {
                 background-color: var(--color-actions-bg-green);
-                &--disabled{
+                &--disabled {
                     background-color: var(--color-actions-bg-green-disable);
                 }
             }
         
-            &--warning{
+            &--warning {
                 background-color: var(--color-actions-bg-warning);
-                &--disabled{
+                &--disabled {
                     background-color: var(--color-actions-bg-warning-disable);
                 }
             }
         
-            &--blue{
+            &--blue {
                 background-color: var(--color-actions-bg-blue);
-                &--disabled{
+                &--disabled {
                     background-color: var(--color-actions-bg-blue-disable);
                 }
             }
         
-            &--gray{
+            &--gray {
                 background-color: var(--color-actions-bg-gray);
-                &--disabled{
+                &--disabled {
                     background-color: var(--color-actions-bg-gray-disable);
                 }
             }
-
-            
         }
 
-        .@{actions-prefix-cls}__icon{
-             color: var(--color-actions-text);
-            font-size: calc(var(--icon-actions-card) * 1px);
-            &--disabled{
+        .@{actions-prefix-cls}__icon {
+            color: var(--color-actions-text);
+            font-size: var(--icon-actions-card);
+            &--disabled {
                 color: var(--color-actions-text-disable);
             }
         }
     }
 
-    &__text{
+    &__text {
         color: var(--color-actions-text);
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+        font-size: var(--en-single-f-d-s-fontSize);
         font-weight: var(--en-single-f-d-s-fontWeight);
-        &--disabled{
+        &--disabled {
             color: var(--color-actions-text-disable);
         }
     }
 
-    &__icon{
-        font-size: calc(var(--icon-actions-size) * 1px);
+    &__icon {
+        font-size: var(--icon-actions-size);
         color: var(--color-actions-text);
-        &--disabled{
+        &--disabled {
             color: var(--color-actions-text-disable);
         }
     }
 
-    &__green{
+    &__green {
         background-color: var(--color-actions-bg-green);
-        &--disabled{
+        &--disabled {
             background-color: var(--color-actions-bg-green-disable);
         }
     }
 
-    &__warning{
+    &__warning {
         background-color: var(--color-actions-bg-warning);
-        &--disabled{
+        &--disabled {
             background-color: var(--color-actions-bg-warning-disable);
         }
     }
 
-    &__blue{
+    &__blue {
         background-color: var(--color-actions-bg-blue);
-        &--disabled{
+        &--disabled {
             background-color: var(--color-actions-bg-blue-disable);
         }
     }
 
-    &__gray{
+    &__gray {
         background-color: var(--color-actions-bg-gray);
-        &--disabled{
+        &--disabled {
             background-color: var(--color-actions-bg-gray-disable);
         }
     }
-
-}
+}

package/dist/components/activityviews/index.vue

@@ -1,14 +1,14 @@
 <template>
     <div>
-        <transition name="vd-activityviews-fade">
-            <div class="vd-overlay" v-if="overlay && visible" @click="handleOverlayClick"></div>
-        </transition>
+        <div class="vd-overlay" v-if="overlay && visible" @click="handleOverlayClick"></div>
         <transition name="vd-activityviews-slide-up">
-            <div class="vd-activityviews" v-if="visible">
+            <div :class="['vd-activityviews',{'vd-activityviews--safe-area-inset-bottom':safeAreaInsetBottom}]"  :style="transitionStyle" v-if="visible">
                 <div class="vd-activityviews__header" v-if="withHeader">
                     <div class="vd-activityviews__wrapper">
                         <vd-icon v-if="backDefault" name="icon_nav_back"></vd-icon>
-                        <div v-if="title" class="vd-activityviews__title">{{ title }}</div>
+                        <div v-if="title || $slots.title" class="vd-activityviews__title">
+                            <slot name="title">{{ title }}</slot>
+                        </div>
                         <slot name="close">
                             <vd-icon v-if="closeIcon" class="vd-activityviews__close" :name="currentCloseIcon" svg
                                 @click="onCancel"></vd-icon>
@@ -40,11 +40,18 @@
 </template>
 
 <script>
-import { themeMixin } from '@p/components/mixins/themeMixin';
+import { inBrowser } from '../utils/env';
+import { themeMixin } from '../mixins/themeMixin';
+import VdIcon from '../icon';
+import VdButton from '../button';
 
 export default {
-    name: 'vd-activityviews',
+    name: 'vd-activity-views',
     mixins: [themeMixin],  // 引入混入
+    components: {
+        VdIcon,
+        VdButton
+    },
     props: {
         value: Boolean,
         title: String,
@@ -74,6 +81,22 @@ export default {
             type: Boolean,
             default: true
         },
+        safeAreaInsetBottom: {
+            type: Boolean,
+            default: true,
+        },
+        lockScroll: {
+            type: Boolean,
+            default: true
+        },
+        duration: {
+            type: Number,
+        },
+        // 指定挂载的容器，可以是选择器字符串或返回元素的函数
+        getContainer: {
+            type: [String, Function],
+            default: 'body',
+        },
     },
     data() {
         return {
@@ -88,9 +111,26 @@ export default {
         },
         isDarkTheme() {
             return this.theme === 'dark';
-        }
+        },
+         // 动态设置过渡持续时间的样式
+        transitionStyle() {
+            return {
+                transitionDuration: `${this.duration}s`,
+            };
+        },
     },
     watch: {
+        visible(val) {
+            if (inBrowser) {
+                if (this.lockScroll) {
+                    if (val) {
+                        document.body.style.overflow = 'hidden';
+                    } else {
+                        document.body.style.overflow = '';
+                    }
+                }
+            }
+        }
     },
     methods: {
         closeActivity() {
@@ -109,9 +149,36 @@ export default {
             if (this.closeOnOverlay) {
                 this.closeActivity();
             }
-        }
+        },
+         // 将弹出层添加到指定的容器中
+        appendToContainer() {
+            const container =
+                typeof this.getContainer === 'function'
+                ? this.getContainer()
+                : document.querySelector(this.getContainer);
+            if (container && container !== this.$el.parentNode) {
+                container.appendChild(this.$el);
+            }
+        },
     },
     mounted() {
+        if (inBrowser) {
+            this.appendToContainer();
+            if (this.lockScroll && this.visible) {
+                document.body.style.overflow = 'hidden';
+            }
+        }
+    },
+    beforeDestroy() {
+        if (inBrowser){
+            if(this.lockScroll) {
+                document.body.style.overflow = '';
+            }
+            // 从容器中移除弹出层元素
+            if (this.$el.parentNode) {
+            this.$el.parentNode.removeChild(this.$el);
+            }
+        }
     }
 
 }
@@ -120,23 +187,4 @@ export default {
 <style lang="less">
 @import './style.less';
 
-.vd-activityviews-fade-enter-active,
-.vd-activityviews-fade-leave-active {
-    transition: opacity 0.3s;
-}
-
-.vd-activityviews-fade-enter,
-.vd-activityviews-fade-leave-to {
-    opacity: 0;
-}
-
-.vd-activityviews-slide-up-enter-active,
-.vd-activityviews-slide-up-leave-active {
-    transition: transform 0.3s;
-}
-
-.vd-activityviews-slide-up-enter,
-.vd-activityviews-slide-up-leave-to {
-    transform: translateY(100%);
-}
 </style>

package/dist/components/activityviews/style.less

@@ -1,9 +1,13 @@
-
 @activityviews-prefix-cls: vd-activityviews;
 
-.@{activityviews-prefix-cls}{
+.@{activityviews-prefix-cls} {
+
+    &--safe-area-inset-bottom{
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+    }
     
-    ::-webkit-scrollbar{width:3px;}
+    ::-webkit-scrollbar { width: 3px; }
     position: fixed;
     left: 0;
     right: 0;
@@ -14,125 +18,135 @@
     flex-direction: column;
     max-height: 80%;
     overflow: auto;
+    transition: transform .3s;
     background-color: var(--color-activityviews-bg);
-    border-radius: calc(var(--radius-activityviews-title) * 1px) calc(var(--radius-activityviews-title) * 1px) 0 0;
+    border-radius: var(--radius-activityviews-title) var(--radius-activityviews-title) 0 0;
 
-    &__close{
-        font-size: calc(var(--icon-activityviews-close) * 1px);
+    &__close {
+        font-size: var(--icon-activityviews-close);
     }
 
-    &__header{
+    &__header {
         display: flex;
         flex-direction: column;
-        
-        padding-block-start: calc(var(--spacing-activityviews-head-padding_top) * 1px);
-        padding-block-end: calc(var(--spacing-activityviews-head-padding_bottom) * 1px);
-        padding-inline-start: calc(var(--spacing-activityviews-padding_left) * 1px);
-        padding-inline-end: calc(var(--spacing-activityviews-padding_right) * 1px);
+        padding-block-start: var(--spacing-activityviews-head-padding_top);
+        padding-block-end: var(--spacing-activityviews-head-padding_bottom);
+        padding-inline-start: var(--spacing-activityviews-padding_left);
+        padding-inline-end: var(--spacing-activityviews-padding_right);
     }
 
-    &__bar{
+    &__bar {
         position: relative;
         width: 100%;
         height: 16px;
-        &::after{
+        &::after {
             content: '';
             position: absolute;
             left: 50%;
-            top: calc(var(--spacing-activityviews-title-margin_right) * 1px);
+            top: var(--spacing-activityviews-title-margin_right);
             transform: translate(-50%, 0);
-            width: calc(var(--width-activityviews-bar) * 1px);
-            height: calc(var(--height-activityviews-bar) * 1px);
-            border-radius: calc(var(--radius-activityviews-bar) * 1px);
+            width: var(--width-activityviews-bar);
+            height: var(--height-activityviews-bar);
+            border-radius: var(--radius-activityviews-bar);
             background-color: var(--color-activityviews-bar);
         }
     }
 
-    &__wrapper{
+    &__wrapper {
         display: flex;
         align-items: center;
     }
 
-    &__title{
+    &__title {
         text-align: center;
         margin-inline-end: auto;
-        padding-inline-end: calc(var(--spacing-activityviews-title-margin_right) * 1px);
-        font-size: calc(var(--en-single-f-e-s-fontSize) * 1px);
+        padding-inline-end: var(--spacing-activityviews-title-margin_right);
+        font-size: var(--en-single-f-e-s-fontSize);
         font-weight: var(--en-single-f-e-s-fontWeight);
-        color:var(--color-activityviews-title); 
+        color: var(--color-activityviews-title); 
     }
 
-    &__description{
+    &__description {
         color: var(--color-activityviews-text_describe);
-        margin-block-start: calc(var(--spacing-activityviews-describe-margin_top) * 1px);
-        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        margin-block-start: var(--spacing-activityviews-describe-margin_top);
+        font-size: var(--en-single-f-c-r-fontSize);
         font-weight: var(--en-single-f-c-r-fontWeight);
     }
 
-    &__done{
+    &__done {
         height: 24px;
         line-height: 24px;
         padding-right: 0;
     }
 
-    &__body{
+    &__body {
         background-color: var(--color-activityviews-bg);
         height: 80%;
         overflow-y: auto;
 
-        &--action{
+        &--action {
             overflow: hidden;
         }
     }
 
-    &__action{
+    &__action {
         padding: 0;
         height: 80%;
         overflow: hidden;
         display: flex;
         -webkit-box-orient: vertical;
-         -webkit-box-direction: normal;
+        -webkit-box-direction: normal;
         flex-direction: column;
-        &-title{
+
+        &-title {
             flex-shrink: 0;
             font-size: 14px;
             text-align: center;
-            padding-block-start:calc(var(--spacing-activityviews-actionsheet_title-padding_y) * 1px) ;
-            padding-block-end:calc(var(--spacing-activityviews-actionsheet_title-padding_y) * 1px) ;
+            padding-block-start: var(--spacing-activityviews-actionsheet_title-padding_y);
+            padding-block-end: var(--spacing-activityviews-actionsheet_title-padding_y);
             color: var(--color-activityviews-actionsheet_title);
         }
-
     }
     
-    &__actions{
+    &__actions {
         flex: 1;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
 
-        .vd-btn{
+        .vd-btn {
             border-radius: 0;
             background-color: var(--color-activityviews-bg);
-            height: calc(var(--height-activityviews-actionsheet) * 1px);
-
+            height: var(--height-activityviews-actionsheet);
         }
     }
 
-    &__gap{
+    &__gap {
         display: block;
-        height: calc(var(--height-activityviews-actionsheet_divider) * 1px);
+        height: var(--height-activityviews-actionsheet_divider);
         background-color: var(--color-activityviews-actionsheet_divider);
     }
 
-    &__cancel{
+    &__cancel {
         flex-shrink: 0;
 
-                        
-        .vd-btn{
+        .vd-btn {
             position: relative;
             border: none;
             background-color: var(--color-activityviews-bg);
-            height: calc(var(--height-activityviews-actionsheet) * 1px);
+            height: var(--height-activityviews-actionsheet);
             border-radius: 0;
         }
     }
+}
+
+
+.vd-activityviews-slide-up-enter-active,
+.vd-activityviews-slide-up-leave-active {
+    transition-property: transform;
+    transition-timing-function: ease;
+}
+
+.vd-activityviews-slide-up-enter,
+.vd-activityviews-slide-up-leave-to {
+    transform: translateY(100%);
 }