vdesign-ui 0.1.8 → 0.1.10

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,67 @@
+<template>
+  <div :class="wrapClasses">
+    <span class="vd-actions__text" v-if="text">{{ text }}</span>
+    <vd-icon v-if="icon && type === 'list'" class="vd-actions__icon" :name="icon" :svg="iconSvg"></vd-icon>
+    <span class="vd-actions__content" :class="contentBg" v-if="icon && type === 'card'">
+      <vd-icon class="vd-actions__icon" :name="icon" :svg="iconSvg"></vd-icon>
+    </span>
+  </div>
+</template>
+
+<script>
+const prefixCls = 'vd-actions'
+export default {
+  name: 'vd-actions',
+  props: {
+    type: {
+      type: String,
+      default: ""
+    },
+    colors: {
+      type: String,
+      default: ""
+
+    },
+    backgrounds: {
+      type: String,
+      default: ""
+
+    },
+    text: {
+      type: String,
+      default: ""
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    iconSvg: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    wrapClasses() {
+      return [
+        `${prefixCls}`,
+        {
+          [`${prefixCls}__${this.type}`]: this.type,
+          [`${prefixCls}__${this.colors}`]: this.colors,
+        }
+      ]
+    },
+    contentBg() {
+      return [
+        {
+          [`${prefixCls}__content--${this.backgrounds}`]: this.backgrounds
+        }
+      ]
+    }
+  },
+
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

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

@@ -0,0 +1,75 @@
+@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);
+            }
+        
+            &--warning{
+                background-color: var(--color-actions-bg-warning);
+            }
+        
+            &--blue{
+                background-color: var(--color-actions-bg-blue);
+            }
+        
+            &--gray{
+                background-color: var(--color-actions-bg-gray);
+            }
+        }
+
+        .@{actions-prefix-cls}__icon{
+            font-size: calc(var(--icon-actions-card) * 1px);
+        }
+    }
+
+    &__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);
+    }
+
+    &__icon{
+        font-size: calc(var(--icon-actions-size) * 1px);
+        color: var(--color-actions-text);
+    }
+
+    &__green{
+        background-color: var(--color-actions-bg-green);
+    }
+
+    &__warning{
+        background-color: var(--color-actions-bg-warning);
+    }
+
+    &__blue{
+        background-color: var(--color-actions-bg-blue);
+    }
+
+    &__gray{
+        background-color: var(--color-actions-bg-gray);
+    }
+}

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,110 @@
+<template>
+    <div v-if="visible">
+        <!-- <vd-overlay :visible="overlay" @close="closeActivity"></vd-overlay> -->
+        <div class="vd-overlay" v-if="visible" @click="closeActivity"></div>
+        <div class="vd-activityviews">
+            <div class="vd-activityviews__header" v-if="withHeader">
+                <div class="vd-activityviews__wrapper">
+                    <vd-icon v-if="backDefault" :name="backDefault"></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="icon_btn_dialogclose" svg
+                            @click="onCancel"></vd-icon>
+                    </slot>
+                    <slot name="btn">
+                        <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">{{ title }}</p>
+                    <div class="vd-activityviews__actions">
+                        <vd-button v-for="(item, index) in actions" block size="large" :type="item.type" :key="index"
+                            :disabled="item.disabled" @click.stop="onSelect(item)">{{ item.name }}</vd-button>
+                    </div>
+                    <div v-if="cancelText" class="vd-activityviews__gap"></div>
+                    <!-- 类似1 -->
+                    <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>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'vd-activityviews',
+    props: {
+        value: Boolean,
+        title: String,
+        backDefault: {
+            type: String,
+            default: "icon_nav_back"
+        },
+        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
+    },
+    data() {
+        return {
+            visible: this.value
+        }
+    },
+    computed: {
+
+    },
+    watch: {
+        value(newValue) {
+            this.visible = newValue;
+        },
+        visible(newValue) {
+            this.$emit('input', newValue);
+        }
+    },
+    methods: {
+        closeActivity() {
+            this.visible = false;
+            this.$emit('input', false);
+        },
+        onCancel() {
+            this.$emit('input', false);
+            this.$emit('cancel');
+        },
+        onSelect(item) {
+            if (!item.disabled) {
+                this.$emit('select', item);
+            }
+        },
+    }
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/activityviews/style.less

@@ -0,0 +1,146 @@
+
+@dialog-prefix-cls: vd-activityviews;
+
+.@{dialog-prefix-cls}{
+    
+    ::-webkit-scrollbar{width:3px;}
+
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2011;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    max-height: 80%;
+    overflow: hidden;
+    background-color: var(--color-activityviews-bg);
+    border-radius: calc(var(--radius-activityviews-title) * 1px) calc(var(--radius-activityviews-title) * 1px) 0 0;
+
+    &__close{
+        font-size: calc(var(--icon-activityviews-close) * 1px);
+    }
+
+    &__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);
+    }
+
+    &__bar{
+        position: relative;
+        width: 100%;
+        height: 16px;
+        &::after{
+            content: '';
+            position: absolute;
+            left: 50%;
+            top: calc(var(--spacing-activityviews-title-margin_right) * 1px);
+            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);
+            background-color: var(--color-activityviews-bar);
+        }
+    }
+
+    &__wrapper{
+        display: flex;
+        align-items: center;
+    }
+
+    &__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);
+        font-weight: var(--en-single-f-e-s-fontWeight);
+        color:var(--color-activityviews-title); 
+    }
+
+    &__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);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+    }
+
+    &__done{
+        height: 24px;
+        line-height: 24px;
+        padding-right: 0;
+    }
+
+    &__body{
+        background-color: #fff;
+        height: 80%;
+        overflow-y: auto;
+
+
+        &--action{
+            overflow: hidden;
+        }
+    }
+
+    &__action{
+        padding: 0;
+        height: 80%;
+        overflow: hidden;
+        display: flex;
+        -webkit-box-orient: vertical;
+         -webkit-box-direction: normal;
+        flex-direction: column;
+        &-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) ;
+            color: var(--color-activityviews-actionsheet_title);
+        }
+
+    }
+    
+    &__actions{
+        flex: 1;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    &__gap{
+        display: block;
+        height: calc(var(--height-activityviews-actionsheet_divider) * 1px);
+        background-color: var(--color-activityviews-actionsheet_divider);
+    }
+
+    &__cancel{
+        flex-shrink: 0;
+
+                        
+        .vd-btn{
+            position: relative;
+            border: none;
+            height: calc(var(--height-activityviews-actionsheet) * 1px);
+            border-radius: 0;
+
+            &::before{
+                position: absolute;
+                box-sizing: border-box;
+                content: ' ';
+                pointer-events: none;
+                top: -50%;
+                right: -50%;
+                bottom: -50%;
+                left: -50%;
+                border: 0 solid var(--divider-color-default-1);
+                transform: scale(0.5);
+                border-top-width: 1px;
+            }
+        }
+    }
+}