vdesign-ui 0.1.21 → 0.1.22

package/dist/components/activityviews/style.less

@@ -0,0 +1,138 @@
+
+@activityviews-prefix-cls: vd-activityviews;
+
+.@{activityviews-prefix-cls}{
+    
+    ::-webkit-scrollbar{width:3px;}
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2011;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    max-height: 80%;
+    overflow: auto;
+    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: var(--color-activityviews-bg);
+        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;
+
+        .vd-btn{
+            border-radius: 0;
+            background-color: var(--color-activityviews-bg);
+            height: calc(var(--height-activityviews-actionsheet) * 1px);
+
+        }
+    }
+
+    &__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;
+            background-color: var(--color-activityviews-bg);
+            height: calc(var(--height-activityviews-actionsheet) * 1px);
+            border-radius: 0;
+        }
+    }
+}

package/dist/components/badge/index.js

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

package/dist/components/badge/index.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="vd-badge">
+        <slot></slot>
+        <span v-show="!hidden && (content || content === 0 || isDot)" v-text="content" class="vd-badge__content" :class="[
+            {
+                'vd-is-fixed': $slots.default,
+                'vd-is-dot': isDot,
+                'vd-ltr': direction
+            }
+        ]">
+        </span>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'vd-badge',
+    props: {
+        value: [String, Number],
+        max: Number,
+        isDot: Boolean,
+        hidden: Boolean,
+    },
+    computed: {
+        content() {
+            if (this.isDot) return;
+
+            const value = this.value;
+            const max = this.max;
+
+            if (typeof value === 'number' && typeof max === 'number') {
+                return max < value ? `${max}+` : value;
+            }
+
+            return value;
+        },
+        direction() {
+            return {
+                'ltr': this.max
+            }
+        }
+    }
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/badge/style.less

@@ -0,0 +1,66 @@
+@badge-prefix-cls: vd-badge;
+
+.@{badge-prefix-cls}{
+    position: relative;
+    display: inline-flex;
+    line-height: 1;
+    &__content{
+        text-align: center;
+        white-space: nowrap;
+        background-color: var(--color-badge-bg);
+        border-radius: calc(var(--radius-badge-count) * 1px);
+        color: var(--color-badge-text);
+        display: inline-block;
+        font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-b-r-fontWeight);
+        min-width: calc(var(--height-badge-count) * 1px);
+        height: calc(var(--height-badge-count) * 1px);
+        // line-height: calc(var(--height-badge-count) * 1px);
+        padding: calc(var(--spacing-badge-count-padding_x) * 1px) calc(var(--spacing-badge-count-padding_y) * 1px);
+        // padding: 0 4px;
+
+        // &::before {
+        //     content: '';
+        //     display: inline-block;
+        //     vertical-align: middle;
+        //     width: 0;
+        //     height: 100%;
+        //     margin-top: 1px;
+        // }
+    }
+    .vd-is-dot{
+        background-color: transparent;
+        &::before{
+            content: '';
+            display: inline-block;
+            width: calc(var(--width-badge-dot) * 1px);
+            height: calc(var(--height-badge-dot) * 1px);
+            background-color: var(--color-badge-bg);
+            border-radius: calc(var(--radius-badge-count) * 1px);
+
+        }
+
+    }
+
+    .vd-is-fixed{
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(50%,-50%);
+    }
+
+    .vd-ltr{
+        direction: ltr;
+    }
+}
+
+
+[lang = 'ar']{
+    .@{badge-prefix-cls}{
+        .vd-is-fixed{
+            left: 0;
+            right: auto;
+           transform: translate(-50%,-50%);
+        }
+    }
+}

package/dist/components/button/index.js

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

package/dist/components/button/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <button type="button" :class="classes" :disabled="disabled" @click="handleClick">
+    <div class="vd-btn-inner">
+      <vd-icon v-if="iconPosition === 'top' || iconPosition === 'left'" :name="beforeIconNode" :size="size"></vd-icon>
+      <slot></slot>
+      <vd-icon v-if="iconPosition === 'bottom' || iconPosition === 'right'" :name="icon" :size="size"></vd-icon>
+    </div>
+  </button>
+</template>
+<script>
+export default {
+  name: 'vd-button',
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: ''
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    loadingIcon: {
+      type: String,
+      default: 'icon_show_statisticsprice'
+    },
+    block: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    iconPosition: {
+      type: String,
+      default: 'left'
+    },
+    round: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+    classes() {
+      const prefixCls = 'vd-btn'
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-${this.type}`]: this.type,
+        [`${prefixCls}-${this.size}`]: this.size,
+        [`${prefixCls}-wireframe`]: this.plain || this.type === 'wireframe',
+        [`${prefixCls}-disabled`]: this.disabled,
+        [`${prefixCls}-block`]: this.block,
+        [`${prefixCls}-loading`]: this.loading,
+        [`${prefixCls}-round`]: this.round,
+        [`${prefixCls}-icon`]: this.icon && this.iconPosition === 'top' || this.iconPosition === 'bottom'
+      }
+    },
+    beforeIconNode() {
+      return this.loading ? this.loadingIcon : this.icon
+    }
+  },
+  methods: {
+    handleClick(event) {
+      if (!this.loading && !this.disabled) {
+        this.$emit('click', event)
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+@import './style.less';
+</style>