vdesign-ui 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vdesign-ui",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "private": false,
   "main": "dist/vdesign-ui.umd.js",
   "files": [

package/dist/components/actionbar/index.js

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

package/dist/components/actionbar/index.vue

@@ -1,39 +0,0 @@
-<template>
-    <div class="vd-actionbar" :class="wrapClasses">
-        <div class="vd-actionbar__main">
-            <slot></slot>
-        </div>
-    </div>
-</template>
-<script>
-const prefixCls = 'vd-actionbar';
-export default {
-    name: 'vd-actionbar',
-    props: {
-        // 默认左右有间距,但是实际设计稿有的没有间距,
-        //block属性预留一个填充,如果使用基础图标按钮组件填充,不太好填充。
-        block: {
-            type: Boolean,
-            default: false
-        }
-    },
-    data() {
-        return {
-
-        }
-    },
-    computed: {
-        wrapClasses() {
-            return [
-                {
-                    [`${prefixCls}__block`]: this.block
-                }
-            ]
-        }
-    }
-};
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/actionbar/style.less

@@ -1,44 +0,0 @@
-@actionbar-prefix-cls: vd-actionbar;
-
-.@{actionbar-prefix-cls} {
-
-    display: flex;
-    width: 100%;
-    height: var(--height-actionbar-content);
-    background-color: var(--color-actionbar-bg);
-    padding-inline-start: var(--spacing-actionbar-padding_y);
-    padding-inline-end: var(--spacing-actionbar-padding_y);
-
-    &__block {
-        padding-inline-start: 0;
-        padding-inline-end: 0;
-    }
-    
-    &__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: var(--en-single-f-d-r-fontSize);
-    font-weight: var(--en-single-f-d-r-fontWeight);
-
-    &--left {
-        justify-content: left;
-    }
-
-    &--center {
-        justify-content: center;
-    }
-
-    &--right {
-        justify-content: right;
-    }
-}

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

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

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

@@ -1,38 +0,0 @@
-<template>
-  <span class="vd-actionbar-cell" :class="wrapClasses">
-    <vd-icon v-if="iconName" :name="iconName"></vd-icon>
-    <slot></slot>
-  </span>
-</template>
-<script>
-import VdIcon from '../icon';
-const prefixCls = 'vd-actionbar'
-export default {
-  name: 'vd-actionbar-cell',
-  components: {
-    VdIcon
-  },
-  props: {
-    // 实际使用场景不多,为了设计验收
-    iconName: String,
-    direction: {
-      type: String,
-      default: 'center'
-    }
-  },
-  data() {
-    return {
-
-    };
-  },
-  computed: {
-    wrapClasses() {
-      return [
-        {
-          [`${prefixCls}-cell--${this.direction}`]: this.direction
-        }
-      ]
-    }
-  },
-};
-</script>

package/dist/components/actions/index.js

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

package/dist/components/actions/index.vue

@@ -1,76 +0,0 @@
-<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"></vd-icon>
-    <span class="vd-actions__content" :class="contentBg" v-if="icon && type === 'card'">
-      <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,
-    },
-    colors: {
-      type: String,
-    },
-    backgrounds: {
-      type: String,
-    },
-    text: {
-      type: String,
-    },
-    icon: {
-      type: String,
-    },
-    disabled:Boolean,
-  },
-  computed: {
-    wrapClasses() {
-      return [
-        `${prefixCls}`,
-        {
-          [`${prefixCls}__${this.type}`]: this.type,
-          [`${prefixCls}__${this.colors}`]: this.colors,
-          [`${prefixCls}__${this.colors}--disabled`]: this.disabled && (this.type ==='list'),
-        }
-      ]
-    },
-    contentBg() {
-      return [
-        {
-          [`${prefixCls}__content--${this.backgrounds}`]: this.backgrounds,
-          [`${prefixCls}__content--${this.backgrounds}--disabled`]: this.disabled,
-        }
-      ]
-    },
-    textClasses(){
-      return [
-        {
-         [`${prefixCls}__text--disabled`]: this.disabled
-      }
-    ]
-  },
-  iconClasses(){
-      return [
-        {
-         [`${prefixCls}__icon--disabled`]: this.disabled
-      }
-    ]
-  },
-}
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/actions/style.less

@@ -1,109 +0,0 @@
-@actions-prefix-cls: vd-actions;
-
-.@{actions-prefix-cls} {
-    height: 100%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    &__list {
-        width: fit-content;
-        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 var(--spacing-actions-card_item-margin_y);
-
-        .@{actions-prefix-cls}__content {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 50%;
-            width: var(--width-actions-card);
-            height: var(--width-actions-card);
-
-            &--green {
-                background-color: var(--color-actions-bg-green);
-                &--disabled {
-                    background-color: var(--color-actions-bg-green-disable);
-                }
-            }
-        
-            &--warning {
-                background-color: var(--color-actions-bg-warning);
-                &--disabled {
-                    background-color: var(--color-actions-bg-warning-disable);
-                }
-            }
-        
-            &--blue {
-                background-color: var(--color-actions-bg-blue);
-                &--disabled {
-                    background-color: var(--color-actions-bg-blue-disable);
-                }
-            }
-        
-            &--gray {
-                background-color: var(--color-actions-bg-gray);
-                &--disabled {
-                    background-color: var(--color-actions-bg-gray-disable);
-                }
-            }
-        }
-
-        .@{actions-prefix-cls}__icon {
-            color: var(--color-actions-text);
-            font-size: var(--icon-actions-card);
-            &--disabled {
-                color: var(--color-actions-text-disable);
-            }
-        }
-    }
-
-    &__text {
-        color: var(--color-actions-text);
-        font-size: var(--en-single-f-d-s-fontSize);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        &--disabled {
-            color: var(--color-actions-text-disable);
-        }
-    }
-
-    &__icon {
-        font-size: var(--icon-actions-size);
-        color: var(--color-actions-text);
-        &--disabled {
-            color: var(--color-actions-text-disable);
-        }
-    }
-
-    &__green {
-        background-color: var(--color-actions-bg-green);
-        &--disabled {
-            background-color: var(--color-actions-bg-green-disable);
-        }
-    }
-
-    &__warning {
-        background-color: var(--color-actions-bg-warning);
-        &--disabled {
-            background-color: var(--color-actions-bg-warning-disable);
-        }
-    }
-
-    &__blue {
-        background-color: var(--color-actions-bg-blue);
-        &--disabled {
-            background-color: var(--color-actions-bg-blue-disable);
-        }
-    }
-
-    &__gray {
-        background-color: var(--color-actions-bg-gray);
-        &--disabled {
-            background-color: var(--color-actions-bg-gray-disable);
-        }
-    }
-}

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

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

package/dist/components/actions-cell/index.vue

@@ -1,94 +0,0 @@
-<template>
-  <div class="vd-actions-cell">
-    <div class="vd-actions-cell__wrapper" :style="{ transform: `translateX(${offset}px)` }"
-      @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" @click="handleClick">
-      <div class="vd-actions-cell__left" ref="leftButton">
-        <slot name="left"></slot>
-      </div>
-      <slot name="content"></slot>
-      <div class="vd-actions-cell__right" ref="rightButton">
-        <slot name="right"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'vd-actions-cell',
-  props: {
-  },
-  data() {
-    return {
-      offset: 0, // 初始偏移量
-      startX: 0, // 按下时的X坐标
-      lastX: 0, // 上一次移动的X坐标
-      isDragging: false // 是否正在拖动
-    }
-  },
-  computed: {
-
-  },
-  methods: {
-    handleTouchStart(event) {
-      this.startX = event.touches[0].pageX;
-      this.lastX = this.startX;
-      this.isDragging = true;
-    },
-    handleTouchMove(event) {
-      if (!this.isDragging) return;
-
-      const currentX = event.touches[0].pageX;
-      const deltaX = currentX - this.lastX;
-
-      // // 判断滑动的方向
-      // if (deltaX > 0) {
-      //   // 向右侧滑动
-      //   // 这里可以执行相应的逻辑
-      //   this.offset = 0;
-      // }
-
-      // this.lastX = currentX;
-      // 计算内容区域的新偏移量
-      this.offset += deltaX;
-
-
-      // // 限制内容区域的滑动范围在按钮的宽度以内
-      // const buttonWidth = this.$refs.rightButton.offsetWidth;
-      // const maxOffset = buttonWidth >= 0 ? buttonWidth : 0;
-      // this.offset = Math.max(-maxOffset, Math.min(0, this.offset));
-
-
-      const rightButtonWidth = this.$refs.rightButton.offsetWidth;
-      const leftButtonWidth = this.$refs.leftButton.offsetWidth;
-      this.offset = Math.max(-rightButtonWidth, Math.min(leftButtonWidth, this.offset));
-      this.startX = currentX;
-    },
-    handleTouchEnd() {
-      this.isDragging = false;
-      const rightButtonWidth = this.$refs.rightButton.offsetWidth;
-      const leftButtonWidth = this.$refs.leftButton.offsetWidth;
-      const thresholdRight = rightButtonWidth / 3;
-      const thresholdLeft = leftButtonWidth / 3;
-
-      if (this.offset < -thresholdRight) {
-        // 向左侧滑动超过三分之一，显示右侧按钮
-        this.offset = -rightButtonWidth;
-      } else if (this.offset > thresholdLeft) {
-        // 向右侧滑动超过三分之一，显示左侧按钮
-        this.offset = leftButtonWidth;
-      } else {
-        // 按钮偏移不超过三分之一，按钮回到原位
-        this.offset = 0;
-      }
-    },
-    handleClick() {
-      this.offset = 0;
-    }
-  }
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/actions-cell/style.less

@@ -1,39 +0,0 @@
-@actions-cell-prefix-cls:vd-actions-cell;
-
-.@{actions-cell-prefix-cls}{
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    cursor: grab;
-    
-    &__left{
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        transform: translate3d(-100%, 0, 0);
-        display: flex;
-    }
-
-    &__right{
-        position: absolute;
-        top: 0;
-        right: 0;
-        height: 100%;
-        transform: translate3d(100%, 0, 0);
-        display: flex;
-
-    }
-
-
-    &__wrapper{
-        height: 100%;
-        -webkit-transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);
-        transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);
-        -webkit-transition-property: -webkit-transform;
-        transition-property: -webkit-transform;
-        transition-property: transform;
-        transition-property: transform, -webkit-transform;
-        transition-duration: 0.6s;
-    }
-}

package/dist/components/activityviews/index.js

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

package/dist/components/activityviews/index.vue

@@ -1,192 +0,0 @@
-<template>
-    <div>
-        <div class="vd-overlay" v-if="overlay && visible" @click="handleOverlayClick"></div>
-        <transition name="vd-activityviews-slide-up">
-            <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 || $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>
-                            <vd-button v-if="closeBtn" class="vd-activityviews__done" type="primary_text" size="large"
-                                @click="onCancel">{{ closeBtn }}</vd-button>
-                        </slot>
-                    </div>
-                    <p v-if="description" class="vd-activityviews__description">{{ description }}</p>
-                </div>
-                <div v-if="withBar" class="vd-activityviews__bar"></div>
-                <div :class="['vd-activityviews__body', { 'vd-activityviews__body--action': actionSheet }]">
-                    <div v-if="actionSheet" class="vd-activityviews__action">
-                        <p v-if="title || $slots.title" class="vd-activityviews__action-title vd-hairline--bottom">
-                            <slot name="title">{{ title }}</slot>
-                        </p>
-                        <div class="vd-activityviews__actions">
-                            <vd-button v-for="(item, index) in actions" block size="large" :type="item.type"
-                                :key="index" :class="{ 'vd-hairline--bottom': index !== actions.length - 1 }"
-                                :disabled="item.disabled" @click.stop="onSelect(item)">{{ item.name }}</vd-button>
-                        </div>
-                        <div v-if="cancelText" class="vd-activityviews__gap"></div>
-                        <div v-if="cancelText" class="vd-activityviews__cancel" @click="onCancel">
-                            <vd-button block type="tertiary" size="large">{{ cancelText }}</vd-button>
-                        </div>
-                    </div>
-                    <slot v-else></slot>
-                </div>
-            </div>
-        </transition>
-    </div>
-</template>
-
-<script>
-import { inBrowser } from '../utils/env';
-import { themeMixin } from '../mixins/themeMixin';
-import VdIcon from '../icon';
-import VdButton from '../button';
-
-export default {
-    name: 'vd-activity-views',
-    mixins: [themeMixin],  // 引入混入
-    components: {
-        VdIcon,
-        VdButton
-    },
-    props: {
-        value: Boolean,
-        title: String,
-        backDefault: Boolean,
-        closeIcon: Boolean,
-        closeBtn: String,
-        description: String,
-        withHeader: {
-            type: Boolean,
-            default: true
-        },
-        withBar: Boolean,
-        actionSheet: Boolean,
-        actions: {
-            type: Array,
-            default() {
-                return [];
-            }
-        },
-        cancelText: String,
-        overlay: {
-            type: Boolean,
-            default: true
-        },
-        disabled: Boolean,
-        closeOnOverlay: {
-            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 {
-        }
-    },
-    computed: {
-        visible() {
-            return this.value
-        },
-        currentCloseIcon() {
-            return this.isDarkTheme ? 'icon_btn_dialogclose_dark_svg' : 'icon_btn_dialogclose_svg';
-        },
-        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() {
-            this.$emit('input', false);
-        },
-        onCancel() {
-            this.closeActivity();
-            this.$emit('cancel');
-        },
-        onSelect(item) {
-            if (!item.disabled) {
-                this.$emit('select', item);
-            }
-        },
-        handleOverlayClick() {
-            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);
-            }
-        }
-    }
-
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-
-</style>