vdesign-ui 0.2.20 → 0.3.0

package/dist/components/list/index.js

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

package/dist/components/list/index.vue

@@ -1,152 +1,152 @@
-<template>
-    <div class="vd-list" :class="wrapClasses" @click="handleToggleActive">
-        <!-- 左侧内容区域 -->
-        <div class="vd-list--left" :class="listLeftClasses">
-            <!-- 通用列表和勾选列表自定义左侧图标 距离右边12px-->
-            <vd-icon v-if="icon" :name="icon" size="large" :class="iconClasses"></vd-icon>
-            <div class="vd-list-content" :class="contentClasses">
-                <!-- 标题 -->
-                <span class="vd-multi-ellipsis--l2" :class="innerTitleClasses">{{ title }}</span>
-                <!-- 通用列表副文本 -->
-                <p class="vd-multi-ellipsis--l2" :class="subtitleClasses" v-if="subtitle">{{ subtitle }}
-                </p>
-            </div>
-            <!-- 信息列表右侧图标 -->
-            <vd-icon v-if="statusIcon" :name="statusIcon" size="small" :class="statusIconClasses"></vd-icon>
-            <!-- 勾选列表 额外插槽 -->
-            <slot name="left"></slot>
-        </div>
-        <!-- 右侧内容区域 -->
-        <div class="vd-list--right" v-if="guideText || arrowIcon || isActive || $slots.switch">
-            <!-- 信息列表右侧自定义图标 -->
-            <vd-icon class="vd-list__icon--extra" size="small" v-if="actionIcon" :name="actionIcon"></vd-icon>
-            <!-- 通用列表徽标插槽 左间距12 -->
-             <span class="vd-list-common__badge" v-if="showBadge  || $slots.badge">
-                <slot name="badge">
-                    <vd-badge is-dot></vd-badge>
-                </slot>
-             </span>
-            <!-- 右侧文本 -->
-            <div v-if="guideText" :class="textRightClasses">
-                <p>{{ guideText }}</p>
-                <p v-if="mulText" class="vd-list__multext">{{ mulText }}</p>
-            </div>
-            <!-- 右箭头 左间距4  设计师没有提供默认图标，不设置默认值-->
-            <span v-if="arrowIcon" class="vd-list__arrow" @click="$emit('next')">
-                <vd-icon :name="arrowIcon"  size="small"></vd-icon>
-            </span>
-            <!-- 勾选列表选择图标 左间距12-->
-            <vd-icon v-if="isActive" class="vd-list-check__select" name="icon_btn_singleslt"
-                color="#1BC47D"></vd-icon>
-            <!-- 通用列表自定义插槽 左间距8 -->
-            <span v-if="$slots.switch" class="vd-list__switch">
-                <slot name="switch"></slot>
-            </span>
-        </div>
-    </div>
-</template>
-<script>
-
-import VdIcon from '../icon';
-const prefixCls = 'vd-list';
-
-export default {
-    name: 'vd-list',
-    components: {
-        VdIcon,
-    },
-    props: {
-        title: String, // 标题文本
-        icon: String, // 主图标（左侧文字前）
-        statusIcon:String, // 状态图标（左侧文字后）
-        actionIcon: String, // 动作图标（右侧）
-        subtitle: String, // 左侧副文本
-        guideText: String,  // 右侧引导文本
-        mulText: String,  // 右侧额外文本
-        isActive: Boolean,  // 是否激活选择状态
-        type:  String,   // 列表项类型   信息列表四个尺寸 L(56固定)\M(48自适应)\S(40自适应)\XS(32自适应)  common(通用列表) check(勾选列表)
-        arrowIcon:  String,  // 右箭头图标名称
-        showBadge :  Boolean,   // 是否显示徽标,默认是 小点
-        divider: Boolean,  // 是否显示分割线
-    },
-    data() {
-        return {
-        };
-    },
-    computed: {
-        wrapClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}`]: this.type,
-                    [`${prefixCls}-${this.type}--active`]: this.isActive,
-                    'vd-hairline--bottom': this.divider,
-                }
-            ];
-        },
-        listLeftClasses() {
-            return [
-                {
-                    [`${prefixCls}-common--left`]: this.type
-                }
-            ];
-        },
-        iconClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__icon--leftcus`]: this.type
-                }
-            ];
-        },
-        contentClasses() {
-            return [
-                {
-                    [`${prefixCls}-content-${this.type}`]: this.type === 'common',
-                }
-            ];
-        },
-        innerTitleClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__title`]: this.type,
-                    [`${prefixCls}-${this.type}__title--with-subtitle`] : this.subtitle
-                }
-            ];
-        },
-        subtitleClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__subtitle`]: this.type
-                }
-            ];
-        },
-        statusIconClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__icon--right`]: this.type
-                }
-            ]
-        },
-        textRightClasses() {
-            return [
-                {
-                    [`${prefixCls}-${this.type}__text--right`]: this.type
-                }
-            ]
-        },
-    },
-    mounted() {
-    },
-    methods: {
-        handleToggleActive() {
-            this.$emit('toggle-active', !this.isActive);
-        }
-    },
-    watch: {
-
-    }
-};
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>
+<template>
+    <div class="vd-list" :class="wrapClasses" @click="handleToggleActive">
+        <!-- 左侧内容区域 -->
+        <div class="vd-list--left" :class="listLeftClasses">
+            <!-- 通用列表和勾选列表自定义左侧图标 距离右边12px-->
+            <vd-icon v-if="icon" :name="icon" size="large" :class="iconClasses"></vd-icon>
+            <div class="vd-list-content" :class="contentClasses">
+                <!-- 标题 -->
+                <span class="vd-multi-ellipsis--l2" :class="innerTitleClasses">{{ title }}</span>
+                <!-- 通用列表副文本 -->
+                <p class="vd-multi-ellipsis--l2" :class="subtitleClasses" v-if="subtitle">{{ subtitle }}
+                </p>
+            </div>
+            <!-- 信息列表右侧图标 -->
+            <vd-icon v-if="statusIcon" :name="statusIcon" size="small" :class="statusIconClasses"></vd-icon>
+            <!-- 勾选列表 额外插槽 -->
+            <slot name="left"></slot>
+        </div>
+        <!-- 右侧内容区域 -->
+        <div class="vd-list--right" v-if="guideText || arrowIcon || isActive || $slots.switch">
+            <!-- 信息列表右侧自定义图标 -->
+            <vd-icon class="vd-list__icon--extra" size="small" v-if="actionIcon" :name="actionIcon"></vd-icon>
+            <!-- 通用列表徽标插槽 左间距12 -->
+             <span class="vd-list-common__badge" v-if="showBadge  || $slots.badge">
+                <slot name="badge">
+                    <vd-badge is-dot></vd-badge>
+                </slot>
+             </span>
+            <!-- 右侧文本 -->
+            <div v-if="guideText" :class="textRightClasses">
+                <p>{{ guideText }}</p>
+                <p v-if="mulText" class="vd-list__multext">{{ mulText }}</p>
+            </div>
+            <!-- 右箭头 左间距4  设计师没有提供默认图标，不设置默认值-->
+            <span v-if="arrowIcon" class="vd-list__arrow" @click="$emit('next')">
+                <vd-icon :name="arrowIcon"  size="small"></vd-icon>
+            </span>
+            <!-- 勾选列表选择图标 左间距12-->
+            <vd-icon v-if="isActive" class="vd-list-check__select" name="icon_btn_singleslt"
+                color="#1BC47D"></vd-icon>
+            <!-- 通用列表自定义插槽 左间距8 -->
+            <span v-if="$slots.switch" class="vd-list__switch">
+                <slot name="switch"></slot>
+            </span>
+        </div>
+    </div>
+</template>
+<script>
+
+import VdIcon from '../icon';
+const prefixCls = 'vd-list';
+
+export default {
+    name: 'vd-list',
+    components: {
+        VdIcon,
+    },
+    props: {
+        title: String, // 标题文本
+        icon: String, // 主图标（左侧文字前）
+        statusIcon:String, // 状态图标（左侧文字后）
+        actionIcon: String, // 动作图标（右侧）
+        subtitle: String, // 左侧副文本
+        guideText: String,  // 右侧引导文本
+        mulText: String,  // 右侧额外文本
+        isActive: Boolean,  // 是否激活选择状态
+        type:  String,   // 列表项类型   信息列表四个尺寸 L(56固定)\M(48自适应)\S(40自适应)\XS(32自适应)  common(通用列表) check(勾选列表)
+        arrowIcon:  String,  // 右箭头图标名称
+        showBadge :  Boolean,   // 是否显示徽标,默认是 小点
+        divider: Boolean,  // 是否显示分割线
+    },
+    data() {
+        return {
+        };
+    },
+    computed: {
+        wrapClasses() {
+            return [
+                {
+                    [`${prefixCls}-${this.type}`]: this.type,
+                    [`${prefixCls}-${this.type}--active`]: this.isActive,
+                    'vd-hairline--bottom': this.divider,
+                }
+            ];
+        },
+        listLeftClasses() {
+            return [
+                {
+                    [`${prefixCls}-common--left`]: this.type
+                }
+            ];
+        },
+        iconClasses() {
+            return [
+                {
+                    [`${prefixCls}-${this.type}__icon--leftcus`]: this.type
+                }
+            ];
+        },
+        contentClasses() {
+            return [
+                {
+                    [`${prefixCls}-content-${this.type}`]: this.type === 'common',
+                }
+            ];
+        },
+        innerTitleClasses() {
+            return [
+                {
+                    [`${prefixCls}-${this.type}__title`]: this.type,
+                    [`${prefixCls}-${this.type}__title--with-subtitle`] : this.subtitle
+                }
+            ];
+        },
+        subtitleClasses() {
+            return [
+                {
+                    [`${prefixCls}-${this.type}__subtitle`]: this.type
+                }
+            ];
+        },
+        statusIconClasses() {
+            return [
+                {
+                    [`${prefixCls}-${this.type}__icon--right`]: this.type
+                }
+            ]
+        },
+        textRightClasses() {
+            return [
+                {
+                    [`${prefixCls}-${this.type}__text--right`]: this.type
+                }
+            ]
+        },
+    },
+    mounted() {
+    },
+    methods: {
+        handleToggleActive() {
+            this.$emit('toggle-active', !this.isActive);
+        }
+    },
+    watch: {
+
+    }
+};
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>