bri-components 1.1.5 → 1.2.0

package/src/components/other/{ZCollapseTree.vue → BriCollapseTree.vue}

@@ -1,10 +1,14 @@
 <template>
-    <div class="ZCollapseTree">
+    <div class="BriCollapseTree">
         <ul>
-            <li v-for="listItem in list" :key="listItem._key">
+            <li
+                v-for="listItem in list"
+                :key="listItem._key"
+            >
                 <!-- 有children -->
-                <Collapse class="ZCollapseTree-collapse"
+                <Collapse
                     v-if="listItem.children && listItem.children.length"
+                    class="BriCollapseTree-collapse"
                     :accordion="listItem._accordion"
                     :simple="listItem._simple === false ? false : true"
                     :hide-arrow="true"
@@ -12,33 +16,50 @@
                 >
                     <Panel :name="listItem._key">
                         <div
-                            class="ZCollapseTree-collapseItem"
-                            :class="{ 'ZCollapseTree-listItem-disabled': listItem.disabled }"
+                            :class="{
+                                'BriCollapseTree-collapseItem': true,
+                                'BriCollapseTree-listItem-disabled': listItem.disabled
+                            }"
                             @click.stop="click(listItem)"
                         >
-                            <div class="ZCollapseTree-listItem-text">
+                            <div class="BriCollapseTree-listItem-text">
                                 {{ listItem.name }}
-                                <span class="ZCollapseTree-listItem-current" v-if="listItem.current">(当前)</span>
+                                <span
+                                    class="BriCollapseTree-listItem-current"
+                                    v-if="listItem.current"
+                                >(当前)</span>
                             </div>
-                            <div class="ZCollapseTree-listItem-grey">
+                            <div class="BriCollapseTree-listItem-grey">
                                 {{ listItem._simpleDescription }}
                             </div>
                         </div>
-                        <z-collapse-tree slot="content" :list="listItem.children" @click="click"></z-collapse-tree>
+
+                        <bri-collapse-tree
+                            slot="content"
+                            :list="listItem.children"
+                            @click="click"
+                        ></bri-collapse-tree>
                     </Panel>
                 </Collapse>
 
                 <!-- 直接展示 -->
-                <div v-else
-                    class="ZCollapseTree-listItem"
-                    :class="{ 'ZCollapseTree-listItem-disabled': listItem.disabled }"
+                <div
+                    v-else
+                    :class="{
+                        'BriCollapseTree-collapseItem': true,
+                        'BriCollapseTree-listItem-disabled': listItem.disabled
+                    }"
                     @click.stop="click(listItem)"
                 >
-                    <div class="ZCollapseTree-listItem-text">
+                    <div class="BriCollapseTree-listItem-text">
                         {{ listItem.name }}
-                        <span class="ZCollapseTree-listItem-current" v-if="listItem.current">(当前)</span>
+                        <span
+                            v-if="listItem.current"
+                            class="BriCollapseTree-listItem-current"
+                        >(当前)</span>
                     </div>
-                    <div class="ZCollapseTree-listItem-grey">
+
+                    <div class="BriCollapseTree-listItem-grey">
                         <Tooltip
                             placement="right"
                             max-width="300"
@@ -57,7 +78,7 @@
 
 <script>
     export default {
-        name: "ZCollapseTree",
+        name: "BriCollapseTree",
         props: {
             list: {
                 type: Array,

package/src/components/other/{ZIframe.vue → BriIframe.vue}

@@ -1,17 +1,18 @@
 <template>
-    <div class="ZIframe">
+    <div class="BriIframe">
         <iframe
             v-if="url"
-            ref="ZIframe"
-            class="ZIframe-iframe"
+            ref="BriIframe"
+            class="BriIframe-iframe"
             :src="url"
             frameborder="0"
             allowtransparency="true"
             :allow="allow"
         ></iframe>
+
         <div
             v-else
-            class="dsh-flex-row-center-center ZIframe-nodata"
+            class="dsh-flex-row-center-center BriIframe-nodata"
         >
             <img
                 :src="noData"
@@ -29,7 +30,7 @@
 
 <script>
     export default {
-        name: "ZIframe",
+        name: "BriIframe",
         props: {
             url: {
                 type: String,
@@ -57,7 +58,7 @@
         },
         methods: {
             init () {
-                let iframe = this.$refs.ZIframe;
+                let iframe = this.$refs.BriIframe;
                 if (!iframe) {
                     return;
                 }
@@ -91,20 +92,3 @@
         }
     };
 </script>
-
-<style lang="less">
-    .ZIframe {
-        display: flex;
-        width: 100%;
-        height: 100%;
-        position: relative;
-        &-iframe {
-            flex: 1;
-            overflow: auto;
-        }
-        &-nodata {
-            width: 100%;
-            height: 100%;
-        }
-   }
-</style>

package/src/components/other/{ZLoading.vue → BriLoading.vue}

@@ -1,36 +1,50 @@
 <template>
-   <div
+    <div
         v-if="value"
-        class="ZLoading"
+        class="BriLoading"
         :class="{
-            'ZLoading-fix': fix,
-            'ZLoading-center': center
+            'BriLoading-fix': fix,
+            'BriLoading-center': center
         }"
     >
-        <div class="ZLoading-main">
+        <div class="BriLoading-main">
             <slot>
                 <template v-if="value === 1">
-                    <div class="ZLoading-main-loading" :style="getStyle">
+                    <div
+                        class="BriLoading-main-loading"
+                        :style="getStyle"
+                    >
                     </div>
-                    <div v-if="showLoadingText" class="ZLoading-main-loadingText">
+                    <div
+                        v-if="showLoadingText"
+                        class="BriLoading-main-loadingText"
+                    >
                         {{ loadText }}
                     </div>
                 </template>
 
                 <template v-else-if="value==2">
-                    <BriSvg :src="imgSrc" />
-                    <div v-if="noText" class="ZLoading-main-noText">
+                    <bri-svg :src="imgSrc" />
+                    <div
+                        v-if="noText"
+                        class="BriLoading-main-noText"
+                    >
                         {{ noText }}
                     </div>
                 </template>
             </slot>
         </div>
-   </div>
+    </div>
 </template>
 
 <script>
+    import BriSvg from "./BriSvg";
+
     export default {
-        name: "ZLoading",
+        name: "BriLoading",
+        components: {
+            BriSvg
+        },
         props: {
             // 0 不加载，1：loading，2：空数据
             value: {

package/src/components/other/BriSvg.vue

@@ -1,5 +1,5 @@
 <template>
-    <svg class="bri" aria-hidden="true">
+    <svg aria-hidden="true">
         <use :href="href"></use>
     </svg>
 </template>
@@ -7,7 +7,7 @@
 <script>
 
     export default {
-        name: "imgscg",
+        name: "BriSvg",
         components: {},
         props: {
             src: String

package/src/components/other/DshAvatar.vue

@@ -6,18 +6,30 @@
         </template>
 
         <!-- 图片堆叠显示 -->
-        <div v-else-if="users.length > maxLength" :style="{...roundStyle}">
-            <span v-for="(user, index) in userList" :key="index" class="DshAvatar-img">
+        <div
+            v-else-if="users.length > maxLength"
+            :style="{ ...roundStyle }"
+        >
+            <span
+                v-for="(user, index) in userList"
+                :key="index"
+                class="DshAvatar-img"
+            >
                 <img :src="user && user.avatarurl || avatarSrc">
             </span>
             <span :style="{'margin-left': (userList.length + 1) * 12 + 6 + 'px'}">
-                {{userList[userList.length - 1] && userList[userList.length - 1].realname || userList[userList.length - 1] && userList[userList.length - 1].name || "吴明昊"}}
+                {{ userList[userList.length - 1] && userList[userList.length - 1].realname || userList[userList.length - 1] && userList[userList.length - 1].name }}
             </span>
         </div>
 
         <!-- 单个显示 -->
         <template v-else>
-            <div v-for="(user, index) in users" :key="index" class="DshAvatar-round" :style="{...roundStyle}">
+            <div
+                v-for="(user, index) in users"
+                :key="index"
+                class="DshAvatar-round"
+                :style="{ ...roundStyle }"
+            >
                 <div class="DshAvatar-box">
                     <div class="DshAvatar-img">
                         <img :src="user && user.avatarurl || avatarSrc">
@@ -32,7 +44,6 @@
 </template>
 
 <script>
-    // 自定义列组件
     export default {
         name: "DshAvatar",
         props: {
@@ -71,7 +82,11 @@
         },
         methods: {
             init () {
-                this.users = this.$dataType(this.rowData[this.field]) === "object" ? [this.rowData[this.field]] : (this.$dataType(this.rowData[this.field]) === "array" ? this.rowData[this.field] : []);
+                this.users = this.$dataType(this.rowData[this.field]) === "object"
+                    ? [this.rowData[this.field]]
+                    : (this.$dataType(this.rowData[this.field]) === "array"
+                        ? this.rowData[this.field]
+                        : []);
             }
         },
         watch: {
@@ -84,66 +99,3 @@
         }
     };
 </script>
-
-<style lang="less">
-    .DshAvatar {
-        position: relative;
-        span {
-            display: inline-block;
-            margin-left: 20px;
-            line-height: 22px;
-        }
-        &-img {
-            width: 22px;
-            height: 22px;
-            padding: 1px;
-            display: inline-block;
-            line-height: 20px;
-            background: #fff;
-            border-radius: 50%;
-            img {
-                width: 20px;
-                height: 20px;
-                display: inline-block;
-                border-radius: 50%;
-            }
-            &:nth-child(1) {
-                position: absolute;
-                left: 0px;
-                top: 50%;
-                margin-top: -10px;
-            }
-            &:nth-child(2) {
-                position: absolute;
-                left: 12px;
-                top: 50%;
-                margin-top: -10px;
-            }
-            &:nth-child(3) {
-                position: absolute;
-                left: 24px;
-                top: 50%;
-                margin-top: -10px;
-            }
-            &:nth-child(4) {
-                position: absolute;
-                left: 36px;
-                top: 50%;
-                margin-top: -10px;
-            }
-        }
-        &-round {
-            display: inline-block;
-            margin-right: 8px;
-        }
-        &-box {
-            position: relative;
-            img {
-                width: 20px;
-                height: 20px;
-                display: inline-block;
-                border-radius: 50%;
-            }
-        }
-    }
-</style>

package/src/components/other/DshColorPanel.vue

@@ -83,46 +83,3 @@
         }
     };
 </script>
-
-<style lang="less" scoped>
-    .DshColorPanel {
-        &-rel {
-            cursor: pointer;
-        }
-        &-list {
-            font-size: 15px;
-            display: flex;
-            width: 293px;
-            height: 72px;
-            flex-wrap: wrap;
-            justify-content: space-around;
-            align-items: center;
-            &-item {
-                padding: 6px;
-                &-big {
-                    width: 15px;
-                    height: 15px;
-                    display: inline-block;
-                    border-radius: 50%;
-                }
-                &-small {
-                    width: 12px;
-                    height: 12px;
-                    position: absolute;
-                    display: inline-block;
-                    transform: translate(1.5px,1.5px);
-                    border-radius: 50%;
-                    &:hover + span{
-                        border-width: 1px;
-                        border-style: solid;
-                    }
-                }
-            }
-        }
-    }
-</style>
-<style lang="less">
-    .DshColorPanel {
-
-    }
-</style>

package/src/components/small/BriButton.vue

@@ -42,13 +42,13 @@
                 let setType = this.propsObj.btnType || this.type;
                 if (["cancel"].includes(defaultType)) {
                     setType = "primary";
-                } else if (["errorLine"].includes(defaultType)) {
+                } else if (["errorLine", "primaryLine"].includes(defaultType)) {
                     setType = "default";
                 } else if (["linkText", "primaryText", "errorText"].includes(defaultType)) {
                     setType = "text";
                 }
                 return {
-                    class: ["cancel", "linkText", "primaryText", "errorLine", "errorText"].includes(defaultType) ? `ivu-btn-${defaultType}` : "",
+                    class: ["cancel", "linkText", "primaryText", "errorLine", "errorText", "primaryLine"].includes(defaultType) ? `ivu-btn-${defaultType}` : "",
                     ...this.propsObj,
                     btnType: setType,
                     customIcon: this.propsObj.customIcon ? `bico-font ${this.propsObj.customIcon}` : undefined

package/src/components/small/{Ctooltip.vue → BriTooltip.vue}

@@ -1,6 +1,6 @@
 <template>
     <Tooltip
-        class="Ctooltip"
+        class="BriTooltip"
         style="width: 100%;"
         :disabled="disabled"
         :content="content"
@@ -24,7 +24,7 @@
 
 <script>
     export default {
-        name: "Ctooltip",
+        name: "BriTooltip",
         props: {
             content: String,
             propsObj: {

package/src/components/small/DshButtons.vue

@@ -78,7 +78,7 @@
 
         <template v-else>
             <bri-button
-                v-for="(operationItem, index) in list"
+                v-for="(operationItem, index) in flatList"
                 :key="operationItem.type"
                 :style="operationItem.style"
                 :class="[
@@ -97,6 +97,25 @@
                     {{ operationItem.name }}
                 </span>
             </bri-button>
+
+            <dsh-dropdown
+                v-if="moreList.length"
+                class="DshButtons-dropdown"
+                :list="moreList"
+                trigger="hover"
+                @click="emit($event)"
+            >
+                <slot name="more">
+                    <bri-button
+                        class="DshButtons-dropdown-more"
+                        :propsObj="moreBtnOperationObj"
+                    >
+                        <span class="DshButtons-dropdown-more-name">
+                            {{ moreBtnOperationObj.name }}
+                        </span>
+                    </bri-button>
+                </slot>
+            </dsh-dropdown>
         </template>
     </div>
 </template>
@@ -143,11 +162,18 @@
                     name: "更多",
                     type: "more",
                     size: "default",
-                    customIcon: "bico-gengduo1"
+                    customIcon: "bico-gengduo",
+                    btnType: "linkText"
                 }
             };
         },
         computed: {
+            flatList () {
+                return this.list.slice(0, this.maxFlatNum);
+            },
+            moreList () {
+                return this.list.slice(this.maxFlatNum);
+            },
             leftFlatList () {
                 return this.leftList.slice(0, this.maxFlatNum);
             },

package/src/components/small/DshCrumbs.vue

@@ -3,6 +3,7 @@
         <slot></slot>
     </div>
 </template>
+
 <script>
     // const prefixCls = "ivu-breadcrumb";
     const prefixCls = "dsh-crumb";

package/src/components/small/DshCrumbsItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <span>
+    <span class="DshCrumbItem">
         <a
             v-if="to"
             :href="linkUrl"
@@ -17,19 +17,21 @@
         >
             <slot></slot>
         </span>
+
         <span
+            v-if="!showSeparator"
             :class="separatorClasses"
             v-html="separator"
-            v-if="!showSeparator"
         ></span>
         <span
-            :class="separatorClasses"
             v-else
+            :class="separatorClasses"
         >
             <slot name="separator"></slot>
         </span>
     </span>
 </template>
+
 <script>
     const prefixCls = "dsh-crumb-item";
 

package/src/components/small/DshIcons.vue

@@ -5,7 +5,7 @@
     >
         <Icon
             v-for="(operationItem, index) in list"
-            :key="operationItem._key || operationItem._id || operationItem.customIcon || operationItem.icon"
+            :key="operationItem._key || operationItem._id || index"
             :style="operationItem.style"
             :class="[
                 'DshIcons-item',
@@ -47,17 +47,3 @@
         }
     };
 </script>
-
-<style lang="less" scoped>
-    .DshIcons {
-        display: inline-block;
-        &-item {
-            cursor: pointer;
-        }
-    }
-</style>
-<style lang="less">
-    .DshIcons {
-
-    }
-</style>

package/src/components/small/DshTags.vue

@@ -3,9 +3,10 @@
         <Tag
             v-for="(tagItem, tagIndex) in list"
             :key="tagIndex"
+            :disabled="propsObj.disabled || tagItem.disabled"
             :name="tagIndex"
             :type="propsObj.type"
-            :closable="propsObj.closable === false ? false : true"
+            :closable="closable(tagItem)"
             :checkable="propsObj.checkable"
             :checked="propsObj.checked"
             :color="propsObj.color || 'default'"
@@ -39,7 +40,11 @@
             }
         },
         data () {
-            return {};
+            return {
+                closable (tagItem) {
+                    return this.propsObj.disabled || tagItem.disabled ? false : (this.propsObj.closable !== false);
+                }
+            };
         },
         computed: {},
         created () {},

package/src/components/unit/DshFormItem.vue

@@ -24,7 +24,7 @@
         >
             <!-- 左 -->
             <span class="DshFormItem-label-left">
-                <Ctooltip
+                <bri-tooltip
                     :content="formItem._name"
                     transfer
                 >
@@ -49,7 +49,7 @@
                             :render="tipsRender(formItem,formData)"
                         ></dsh-render>
                     </span>
-                </Ctooltip>
+                </bri-tooltip>
             </span>
 
             <!-- 右 -->
@@ -58,7 +58,7 @@
                 class="DshFormItem-label-right"
             >
                 <slot name="extra">
-                    <Ctooltip
+                    <bri-tooltip
                         :content="formItem._description"
                         transfer
                         style="height: 14px;"
@@ -66,7 +66,7 @@
                         <span class="DshFormItem-label-description dsh-ellipsis">
                             {{ formItem._description && `* ${formItem._description}` }}
                         </span>
-                    </Ctooltip>
+                    </bri-tooltip>
                 </slot>
             </span>
         </div>
@@ -117,10 +117,10 @@
                     return [];
                 }
             },
-            // 实际最精确值是74px（label:30px, control:32px, 上下padding各: 6px，因为ivu-form-item-content里line-height: 32px导致有问题，故先76px
+            // 实际最精确值是68px（label:30px, control:32px, 上下padding各: 3px，因为ivu-form-item-content里line-height: 32px导致有问题，故先70px
             height: {
                 type: [String, Number],
-                default: "76"
+                default: "70"
             },
             rowStyle: {
                 type: Object,

package/src/components/unit/DshUnit.vue

@@ -57,11 +57,3 @@
         methods: {}
     };
 </script>
-
-<style lang="less">
-    .DshUnit {
-        .ivu-input {
-            font-size: 12px;
-        }
-    }
-</style>