vdesign-ui 0.1.21 → 0.1.23

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

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

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,48 @@
+
+@actionbar-prefix-cls:vd-actionbar;
+
+.@{actionbar-prefix-cls}{
+
+    display: flex;
+    width: 100%;
+    height: calc(var(--height-actionbar-content) * 1px);
+    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);
+
+    &__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: calc(var(--en-single-f-d-r-fontSize) * 1px);
+    font-weight: var(--en-single-f-d-r-fontWeight);
+
+    &--left {
+        justify-content: left;
+    }
+
+    &--center {
+        justify-content: center;
+    }
+
+    &--right {
+        justify-content: right;
+    }
+}

package/dist/components/actions-cell/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-cell/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" :svg="iconSvg"></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>
+    </span>
+  </div>
+</template>
+
+<script>
+const prefixCls = 'vd-actions'
+export default {
+  name: 'vd-actions',
+  props: {
+    type: {
+      type: String,
+    },
+    colors: {
+      type: String,
+    },
+    backgrounds: {
+      type: String,
+    },
+    text: {
+      type: String,
+    },
+    icon: {
+      type: String,
+    },
+    iconSvg: {
+      type: Boolean,
+      default: false,
+    },
+    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-cell/actions/style.less

@@ -0,0 +1,112 @@
+@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: 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);
+    }
+
+    &__card{
+        padding: 0 calc(var(--spacing-actions-card_item-margin_y) * 1px);
+
+        .@{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);
+
+            &--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: calc(var(--icon-actions-card) * 1px);
+            &--disabled{
+                color: var(--color-actions-text-disable);
+            }
+        }
+    }
+
+    &__text{
+        color: var(--color-actions-text);
+        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+        font-weight: var(--en-single-f-d-s-fontWeight);
+        &--disabled{
+            color: var(--color-actions-text-disable);
+        }
+    }
+
+    &__icon{
+        font-size: calc(var(--icon-actions-size) * 1px);
+        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,140 @@
+<template>
+    <div>
+        <transition name="vd-activityviews-fade">
+            <div class="vd-overlay" v-if="overlay && visible" @click="handleOverlayClick"></div>
+        </transition>
+        <transition name="vd-activityviews-slide-up">
+            <div class="vd-activityviews" 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>
+                        <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" class="vd-activityviews__action-title vd-hairline--bottom">{{ title }}</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 { themeMixin } from '@p/components/mixins/themeMixin';
+
+export default {
+    name: 'vd-activityviews',
+    mixins: [themeMixin],  // 引入混入
+    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
+        },
+    },
+    data() {
+        return {
+        }
+    },
+    computed: {
+        visible(){
+            return this.value
+        },
+        currentCloseIcon() {
+            return this.isDarkTheme ? 'icon_btn_dialogclose_dark' : 'icon_btn_dialogclose';
+        },
+        isDarkTheme() {
+            return this.theme === 'dark';
+        }
+    },
+    watch: {
+    },
+    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();
+            }
+        }
+    },
+    mounted() {
+    }
+
+}
+</script>
+
+<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>