bri-components 1.2.1 → 1.2.3

package/src/components/small/DshTags.vue

@@ -1,15 +1,23 @@
 <template>
-    <div class="DshTags">
+    <div
+        ref="DshTags"
+        :class="{
+            'DshTags': true,
+            'DshTags-autoEllipsis': autoEllipsis
+        }"
+    >
         <Tag
-            v-for="(tagItem, tagIndex) in list"
+            v-for="(tagItem, tagIndex) in computedList"
             :key="tagIndex"
-            :disabled="propsObj.disabled || tagItem.disabled"
+            ref="tagItem"
+            :style="tagItem.style"
+            :disabled="getItemDisabled(tagItem)"
             :name="tagIndex"
             :type="propsObj.type"
-            :closable="closable(tagItem)"
+            :closable="getItemClosable(tagItem)"
             :checkable="propsObj.checkable"
             :checked="propsObj.checked"
-            :color="propsObj.color || 'default'"
+            :color="propsObj.color || tagItem.color || 'default'"
             :fade="propsObj.fade || false"
             :size="propsObj.size || 'medium'"
             @on-close="deleteTag($event, tagItem, tagIndex)"
@@ -19,6 +27,52 @@
                 {{ $dataType(tagItem) === "object" ? tagItem.realname || tagItem.full_name || tagItem.name : tagItem }}
             </slot>
         </Tag>
+
+        <!-- 更多 -->
+        <Tag
+            v-if="subList.length"
+            :type="propsObj.type"
+            :checkable="propsObj.checkable"
+            :checked="propsObj.checked"
+            :color="propsObj.color || 'default'"
+            :fade="propsObj.fade || false"
+            :size="propsObj.size || 'medium'"
+            :disabled="propsObj.disabled"
+        >
+            <Poptip
+                :transfer="true"
+                :width="200"
+                trigger="hover"
+                word-wrap
+                placement="bottom"
+                popper-class="DshTags-poptip"
+            >
+                <dsh-icons :list="[moreOperation]" />
+                {{ subList.length }}项
+                <div slot="content">
+                    <Tag
+                        v-for="(tagItem, tagIndex) in subList"
+                        :key="tagIndex"
+                        :disabled="getItemDisabled(tagItem)"
+                        :name="tagIndex"
+                        :type="propsObj.type"
+                        :closable="getItemClosable(tagItem)"
+                        :checkable="propsObj.checkable"
+                        :checked="propsObj.checked"
+                        :color="propsObj.color || 'default'"
+                        :fade="propsObj.fade || false"
+                        :size="propsObj.size || 'medium'"
+                        class="DshTags-poptip-tag"
+                        @on-close="deleteTag($event, tagItem, tagIndex + computedList.length)"
+                        @on-change="changeChecked"
+                    >
+                        <slot :tagItem="tagItem">
+                            {{ $dataType(tagItem) === "object" ? tagItem.realname || tagItem.full_name || tagItem.name : tagItem }}
+                        </slot>
+                    </Tag>
+                </div>
+            </Poptip>
+        </Tag>
     </div>
 </template>
 
@@ -37,27 +91,100 @@
                 default () {
                     return {};
                 }
+            },
+            autoEllipsis: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
             return {
-                closable (tagItem) {
-                    return this.propsObj.disabled || tagItem.disabled ? false : (this.propsObj.closable !== false);
+                maxTagCount: undefined,
+
+                getItemDisabled (item) {
+                    return this.propsObj.disabled || item._disabled || item.disabled;
+                },
+                getItemClosable (item) {
+                    return !this.getItemDisabled(item) &&
+                    (this.propsObj.closable == undefined ? true : this.propsObj.closable);
                 }
             };
         },
-        computed: {},
+        computed: {
+            moreOperation () {
+                return {
+                    customIcon: "bico-gengduo"
+                };
+            },
+            computedList () {
+                return this.list.slice(0, this.maxTagCount);
+            },
+            subList () {
+                if (this.autoEllipsis && this.maxTagCount) {
+                    return this.list.slice(this.maxTagCount);
+                } else {
+                    return [];
+                }
+            }
+        },
         created () {},
+        mounted () {
+            this.callEliipsis();
+
+            window.addEventListener("resize", this.callEliipsis, true);
+        },
         methods: {
             // 删除标签
             deleteTag (event, item, index) {
                 this.list.splice(index, 1);
+                this.callEliipsis();
                 this.$emit("delete", item, index);
             },
             // 改变标签状态
             changeChecked (checked, name) {
 
+            },
+
+            callEliipsis () {
+                if (this.autoEllipsis) {
+                    this.maxTagCount = undefined;
+                    this.$nextTick(() => {
+                        this.getAutoEllipsis();
+                    });
+                }
+            },
+            getAutoEllipsis () {
+                if (this.autoEllipsis) {
+                    let parWidth = this.$refs.DshTags.clientWidth;
+                    let tags = this.$refs.tagItem;
+
+                    for (let idx in tags) {
+                        let el = tags[idx]["$el"];
+                        let showEllipsis = el.clientWidth + el.offsetLeft > parWidth;
+
+                        if (showEllipsis) {
+                            // 判断加上... 是否被隐藏
+                            if (el.clientWidth + el.offsetLeft + 40 < parWidth) {
+                                this.maxTagCount = idx;
+                            } else {
+                                this.maxTagCount = idx - 1;
+                            }
+                            break;
+                        } else {
+                            this.maxTagCount = undefined;
+                        }
+                    }
+                }
             }
+        },
+        watch: {
+            list: function () {
+                console.log("ss");
+                this.callEliipsis();
+            }
+        },
+        destroyed () {
+            window.removeEventListener("resize", this.callEliipsis, true);
         }
     };
 </script>

package/src/styles/common/control.less

@@ -3,7 +3,7 @@
     background-color: @theme-focus;
     color: @themeColor;
     border-radius: @borderRadius;
-    padding: 3px 8px;
+    padding: 2px 8px;
     line-height: 24px;
     display: inline;
 }
@@ -16,8 +16,8 @@
     cursor: pointer;
     color: @textColor;
 
-    &.bri-control-nodata {
-        .bri-control-nodata();
+    .ivu-icon {
+        color: @placeholderColor;
     }
 }
 .bri-control-disabled {
@@ -27,8 +27,12 @@
     cursor: not-allowed;
     color: @textColor;
 
+    .ivu-icon {
+        color: @placeholder-disabled-color;
+    }
+    
     &.bri-control-nodata {
-        .bri-control-disabled-placeholder();
+        color: @placeholder-disabled-color;
     }
 }
 // .bri-control-readonly {
@@ -37,24 +41,28 @@
 //     background: @inputBg-readonly;
 //     cursor: not-allowed;
 //     color: @textColor-readonly;
+    
+//     .ivu-icon {
+//         color: @textColor-readonly;
+//     }
 // }
 .bri-control-show {
     border: none;
     background-color: transparent;
 
-    &.bri-control-nodata {
-        .bri-control-nodata();
+    .ivu-icon {
+        color: @placeholderColor;
     }
 }
 .bri-control-unit {
     border: none;
     background-color: transparent;
 
-    // unit 模式下不用特殊处理颜色
-    &.bri-control-nodata {
-        color: @text-color;
+    .ivu-icon {
+        color: @placeholderColor;
     }
 }
+
 // 无数据
 .bri-control-nodata {
     color: @placeholderColor;
@@ -66,10 +74,10 @@
 
 // 展示为tag标签公共样式
 #bri-control-wrap () {
-    .dsh-flex-row-between-center();
     height: 32px;
-    padding: 4px 0 4px 4px;
+    padding: 4px 0 4px 7px;
     line-height: 24px;
+    .dsh-flex-row-between-center();
 
     .text {
         .dsh-ellipsis();
@@ -96,8 +104,4 @@
             display: block;
         }
     }
-
-    &.bri-control-nodata {
-        padding-left: 7px;
-    }
 }

package/src/styles/components/controls/base/BriUpload/BriUpload.less

@@ -160,7 +160,7 @@
     &-unit {
         .uploadList {
             &-inline-nodata {
-                color: @text-color;
+                .bri-control-nodata();
             }
         }
     }

package/src/styles/components/controls/base/BriUpload/BriUploadImage.less

@@ -78,4 +78,10 @@
             }
         }
     }
+
+    &-cropper {
+        width: 400px;
+        height: 400px;
+        margin: 0 auto;
+    }
 }

package/src/styles/components/controls/base/DshCascader/DshCascader.less

@@ -26,12 +26,6 @@
     &-show {
         &-multiple {
             #bri-control-wrap();
-
-            .overflow {
-                &-unit {
-                    .dsh-ellipsis();
-                }
-            }
         }
 
         &-single {
@@ -41,11 +35,19 @@
 
     // 多选类型且独自一行时
     &-row {
-        height: 68px;
-        
-        .overflow {
-            width: 100%;
-            height: 100%;
+        &-edit {
+            // height: 68px;
+        }
+        &-show {
+            height: auto;
+            .text,
+            .overflow {
+                width: 100%;
+                height: 100%;
+                white-space: normal;
+                overflow: auto;
+                .bri-scrollbar3();
+            }
         }
     }
 }

package/src/styles/components/controls/base/DshCheckbox.less

@@ -4,21 +4,20 @@
     &-group {
         width: 100%;
 
-        &-disabled {
-            .ivu-checkbox-disabled+span {
-                color: #515a6e;
-            }
+        // 选中时背景为白色
+        .ivu-checkbox-checked .ivu-checkbox-inner {
+            background-color: @themeColor;
         }
 
         &-color {
             .ivu-checkbox-border {
+                margin-bottom: 5px;
+                margin-right: 16px;
                 height: 32px;
-                line-height: 32px;
-                border-radius: 4px;
                 border: none;
+                border-radius: 4px;
+                line-height: 32px;
                 color: #FFF;
-                margin-bottom: 5px;
-                margin-right: 16px;
             }
 
             .ivu-checkbox {
@@ -37,29 +36,25 @@
             }
 
             each(@resourceColor, {
-                    .color-@{index} {
-                        .ivu-checkbox {
-                            .ivu-checkbox-inner {
-                                border-color: @value;
-                            }
+                .color-@{index} {
+                    .ivu-checkbox {
+                        .ivu-checkbox-inner {
+                            border-color: @value;
                         }
                     }
 
-                    .color-@{index}.myChecked {
-                        .ivu-checkbox-checked {
-                            .ivu-checkbox-inner {
-                                background-color: @value;
-                            }
+                    .ivu-checkbox-checked {
+                        .ivu-checkbox-inner {
+                            background-color: @value;
                         }
                     }
                 }
-
-            );
+            });
         }
 
-        &-disabled-color {
+        &-disabled {
             .ivu-checkbox-disabled+span {
-                color: inherit;
+                color: #515a6e;
             }
         }
 
@@ -80,51 +75,40 @@
         }
     }
 
-    // 选中时背景为白色
-    .myChecked {
-        .ivu-checkbox-checked .ivu-checkbox-inner {
-            background-color: @themeColor;
-        }
-    }
+    &-item {
 
-    &-content {
-        text-align: center;
-        border-radius: 12px;
-        line-height: 100%;
-        padding: 5px 10px;
-        font-size: 14px;
-        vertical-align: middle;
     }
 
-    &-tip {
-        cursor: pointer;
+    &-show {
 
-        .ivu-checkbox {
-            display: none;
-        }
     }
 
     .ivu-select-multiple {
         .ivu-select-selection {
             height: 32px;
-    
-            &>div {
-                overflow-x: auto;
-                overflow-y: hidden;
+            .dsh-flex-row-between-center();
+            
+            & > div {
+                width: 100%;
+                word-break: keep-all;
                 white-space: nowrap;
-    
+
+                overflow: auto;
+                .bri-scrollbar3();
+
                 .ivu-tag {
-                    margin: 2px 4px 4px 0;
+                    margin: 2px 4px 0px 0px;
+                    background-color: @borderColor;
                 }
-    
-                &::-webkit-scrollbar {
-                    height: 8px;
-                }
-    
-                &:-webkit-scrollbar-thumb {
-                    border-radius: 3px;
-                    background: rgba(51, 51, 51, .1);
-                    background-clip: border-box;
+            }
+        }
+
+        &.ivu-select-disabled {
+            .ivu-select-selection {
+                & > div {
+                    .ivu-tag {
+                        background-color: @border-disabled;
+                    }
                 }
             }
         }
@@ -133,24 +117,4 @@
             content: none;
         }
     }
-}
-
-// TODO：必须单独拿出来，DshSelect组件里在混入此样式
-.DshCheckbox-value {
-    height: 24px;
-    line-height: 20px;
-    padding: 2px 8px;
-    border-radius: 4px;
-    margin-right: 8px;
-    display: inline-flex;
-
-    &:last-of-type {
-        margin-right: 0px;
-    }
-
-    &-wrapper {
-        min-height: 32px;
-        padding: 4px 0;
-        .dsh-ellipsis();
-    }
 }

package/src/styles/components/controls/base/DshCoordinates.less

@@ -1,37 +1,8 @@
 .DshCoordinates {
     width: 100%;
-    line-height: 30px;
 
     &-edit {
-        position: relative;
-        padding: 0 32px 0 8px;
-
-        .value {
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            &-name {
-                .dsh-ellipsis();
-            }
-    
-            &-icon {
-                padding: 5px;
-            }
-        }
-
-        .nodata {
-            color: @placeholderColor;
-
-            &-icon {
-                color: #e5e5e5;
-                line-height: 32px;
-                position: absolute;
-                right: 6px;
-                top: 0;
-            }
-        }
+        #bri-control-wrap ();
     }
 
     &-modal {
@@ -76,9 +47,4 @@
             }
         }
     }
-
-    &-show {
-        padding: 0 8px;
-        line-height: 32px;
-    }
 }

package/src/styles/components/controls/base/DshSelect.less

@@ -136,7 +136,22 @@
     }
 
     &-value {
-        .DshCheckbox-value();
+        height: 24px;
+        line-height: 20px;
+        padding: 2px 8px;
+        border-radius: 4px;
+        margin-right: 8px;
+        display: inline-flex;
+
+        &:last-of-type {
+            margin-right: 0px;
+        }
+
+        &-wrapper {
+            min-height: 32px;
+            padding: 4px 0;
+            .dsh-ellipsis();
+        }
     }
 
     &-tip {

package/src/styles/components/controls/base/DshSwitch.less

@@ -2,36 +2,6 @@
     width: 100%;
 
     &-show {
-        height: 24px;
-        padding: 2px 8px;
-        border-radius: 4px;
-        line-height: 20px;
-        flex-grow: 1;
-        display: flex;
-        justify-content: flex-start;
-    
-        &-name {
-            .dsh-ellipsis();
-            display: flex;
-            min-height: 32px;
-            padding: 4px;
-        }
-    }
-
-    .ivu-switch {
-        width: 50px;
-    }
-    .ivu-switch-checked:after {
-        left: 29px;
-    }
-    .ivu-switch-inner {
-        color: #fff;
-        font-size: 12px;
-        position: absolute;
-        left: auto;
-        right: 4px;
-    }
-    .ivu-switch-checked .ivu-switch-inner {
-        left: 3px;
+        .bri-unit-show();
     }
 }

package/src/styles/components/controls/senior/BriLabels.less

@@ -1,7 +1,7 @@
 .BriLabels {
     width: 100%;
 
-    &-dit {
+    &-edit {
         #bri-control-wrap();
     }
     

package/src/styles/components/list/BriFlatTable.less

@@ -1,5 +1,5 @@
 .BriFlatTable {
-    &-main {
+    .BriFlatTable-main {
         height: auto;
     }
     &-create {

package/src/styles/components/small/DshDropdown.less

@@ -52,10 +52,11 @@
             }
         }
     }
+    &.ivu-select-dropdown {
+        border: 0.5px solid #e5e5e5;
+        box-shadow: 0 3px 14px 2px rgba(0,0,0,0.05), 0 8px 10px 1px rgba(0,0,0,0.06), 0 5px 5px -3px rgba(0,0,0,0.1);
+        max-height: 500px;
+    }
 }
 
-.ivu-select-dropdown {
-    border: 0.5px solid #e5e5e5;
-    box-shadow: 0 3px 14px 2px rgba(0,0,0,0.05), 0 8px 10px 1px rgba(0,0,0,0.06), 0 5px 5px -3px rgba(0,0,0,0.1);
-    max-height: 500px;
-}
+