vdesign-ui 0.3.0 → 0.3.1

package/dist/components/actions/style.less

@@ -1,109 +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);
-        }
-    }
-}
+@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 +1,7 @@
-import ActionsCell from './index.vue';
-import './style.less';
-ActionsCell.install = function(Vue) {
-    Vue.component(ActionsCell.name, ActionsCell)
-}
-
+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 +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>
+<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 +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;
-    }
+@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 +1,8 @@
-import Activityviews from './index.vue';
-import './style.less';
-
-Activityviews.install = function (Vue) {
-  Vue.component(Activityviews.name, Activityviews);
-};
-
-export default Activityviews;
+import Activityviews from './index.vue';
+import './style.less';
+
+Activityviews.install = function (Vue) {
+  Vue.component(Activityviews.name, Activityviews);
+};
+
+export default Activityviews;