vdesign-ui 0.2.6 → 0.2.7

package/dist/components/actionbar/index.js

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

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

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

@@ -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-cell/index.vue

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

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

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

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

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

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

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

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

@@ -0,0 +1,192 @@
+<template>
+    <div>
+        <div class="vd-overlay" v-if="overlay && visible" @click="handleOverlayClick"></div>
+        <transition name="vd-activity-views-slide-up">
+            <div :class="['vd-activity-views',{'vd-activity-views--safe-area-inset-bottom':safeAreaInsetBottom}]"  :style="transitionStyle" v-if="visible">
+                <div class="vd-activity-views__header" v-if="withHeader">
+                    <div class="vd-activity-views__wrapper">
+                        <vd-icon v-if="backDefault" name="icon_nav_back"></vd-icon>
+                        <div v-if="title || $slots.title" class="vd-activity-views__title">
+                            <slot name="title">{{ title }}</slot>
+                        </div>
+                        <slot name="close">
+                            <vd-icon v-if="closeIcon" class="vd-activity-views__close" :name="currentCloseIcon" svg
+                                @click="onCancel"></vd-icon>
+                            <vd-button v-if="closeBtn" class="vd-activity-views__done" type="primary_text" size="large"
+                                @click="onCancel">{{ closeBtn }}</vd-button>
+                        </slot>
+                    </div>
+                    <p v-if="description" class="vd-activity-views__description">{{ description }}</p>
+                </div>
+                <div v-if="withBar" class="vd-activity-views__bar"></div>
+                <div :class="['vd-activity-views__body', { 'vd-activity-views__body--action': actionSheet }]">
+                    <div v-if="actionSheet" class="vd-activity-views__action">
+                        <p v-if="title || $slots.title" class="vd-activity-views__action-title vd-hairline--bottom">
+                            <slot name="title">{{ title }}</slot>
+                        </p>
+                        <div class="vd-activity-views__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-activity-views__gap"></div>
+                        <div v-if="cancelText" class="vd-activity-views__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>