bri-components 1.4.97 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.4.97",
+    "version": "1.5.0",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",
@@ -32,7 +32,7 @@
     "dependencies": {
         "ali-oss": "^6.13.1",
         "axios": "^0.23.0",
-        "bri-datas": "^1.2.34",
+        "bri-datas": "^1.3.0",
         "jshint": "^2.12.0",
         "jsonlint": "^1.6.3",
         "minio": "7.1.0",

package/src/components/controls/base/BriUpload/uploadList.vue

@@ -674,16 +674,15 @@
 
         &-fileList {
             width: 100%;
+
             &-fileName {
-                width: 100%;
-                height: 100%;
                 cursor: pointer;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
 
                 &-edit {
                     padding: 0 8px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
                 }
             }
         }

package/src/components/controls/base/DshSwitch/DshSwitch.vue

@@ -9,8 +9,8 @@
             :disabled="disabled"
             :loading="selfPropsObj.loading"
             :size="selfPropsObj._size"
-            :true-color="propsObj._openColor || $appData.themeColor"
-            :false-color="propsObj._closeColor || '#ccc'"
+            :true-color="propsObj._openColor"
+            :false-color="propsObj._closeColor"
             :true-value="selfPropsObj._openValue"
             :false-value="selfPropsObj._closeValue"
         >

package/src/components/controls/controlMap.js

@@ -43,8 +43,8 @@ const componentNameMap = {
     flatTable: "flatTable",
     cascaderTable: "cascaderTable",
 
-    themeColor: "themeColor",
-    themeIcon: "themeIcon",
+    themeColor: "DshThemeColor",
+    themeIcon: "DshThemeIcon",
     color: "DshColor",
 
     back: "DshBack",
@@ -78,8 +78,8 @@ const pathMap = {
         cascaderTable: "./senior/cascaderTable"
     },
     extra: {
-        themeColor: "./extra/themeColor.vue",
-        themeIcon: "./extra/themeIcon.vue",
+        DshThemeColor: "./extra/DshThemeColor.vue",
+        DshThemeIcon: "./extra/DshThemeIcon.vue",
         DshColor: "./extra/DshColor.vue"
     },
     special: {

package/src/components/controls/extra/DshThemeColor.vue

@@ -0,0 +1,100 @@
+<template>
+    <div class="DshThemeColor">
+        <div
+            v-for="(colorItem, colorKey) in themeColorMap"
+            :key="colorKey"
+            class="item"
+            @click="curVal = colorKey"
+        >
+            <div
+                class="item-content"
+                :style="{
+                    backgroundColor: colorItem.color
+                }"
+            >
+                <Icon
+                    v-if="colorKey === curVal"
+                    class="item-content-icon"
+                    type="ios-checkmark-circle"
+                    :color="colorItem.color"
+                    size="18"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../mixins/controlMixin.js";
+
+    export default {
+        name: "DshThemeColor",
+        mixins: [
+            controlMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+
+            themeColorMap () {
+                return this.$appData.themeColorMap || {};
+            }
+        },
+        created () {
+            // this.init();
+        },
+        methods: {
+            // init () {
+            //     if (!this.curVal) {
+            //         this.curVal = Object.keys(this.themeColorMap)[0];
+            //     }
+            // }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshThemeColor {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+
+        .item {
+            display: inlile-block;
+            width: 54px;
+            height: 54px;
+            margin-right: 7px;
+            cursor: pointer;
+
+            &-content {
+                width: 38px;
+                height: 38px;
+                margin: 8px auto;
+                border-radius: 50%;
+                position: relative;
+
+                &-icon {
+                    position: absolute;
+                    bottom: 0px;
+                    right: 0px;
+                    border-radius: 50%;
+                    background-color: rgba(255, 255, 255, 0.85);
+                    color: @themeColor;
+                }
+            }
+
+            &:last-of-type {
+                margin-right: 0px;
+            }
+        }
+    }
+</style>

package/src/components/controls/extra/DshThemeIcon.vue

@@ -0,0 +1,125 @@
+<template>
+    <div
+        class="DshThemeIcon"
+        :style="{
+            '--theme-color-self': relateColor
+        }"
+    >
+        <div
+            v-for="icon in themeIcons"
+            :key="icon"
+            :class="{
+                'item': true,
+                'item-active': icon === curVal
+            }"
+            @click="curVal = icon"
+        >
+            <div
+                class="item-content"
+                :style="{
+                    'backgroundColor': relateColor
+                }"
+            >
+                <Icon :custom="'bico-font ' + iconPrefix + icon.replace('icon-', 'icon')" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../mixins/controlMixin.js";
+
+    export default {
+        name: "DshThemeIcon",
+        mixins: [
+            controlMixin
+        ],
+        components: {},
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _relateColorKey: "colorType",
+                    _iconPrefix: "bico-",
+
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            relateColorKey () {
+                return this.selfPropsObj._relateColorKey;
+            },
+            relateColorVal () {
+                return this.value[this.relateColorKey];
+            },
+
+            themeIcons () {
+                return this.$appData.themeIcons || [];
+            },
+            iconPrefix () {
+                return this.selfPropsObj._iconPrefix;
+            },
+
+            themeColorMap () {
+                return this.$appData.themeColorMap || {};
+            },
+            relateColorData () {
+                return this.themeColorMap[this.relateColorVal] || {};
+            },
+            relateColor () {
+                return this.relateColorData.color;
+            }
+        },
+        created () {
+            // this.init();
+        },
+        methods: {
+            // init () {
+            //     if (!this.curVal) {
+            //         this.curVal = this.themeIcons[0];
+            //     }
+            // }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    @theme-color-self: var(--theme-color-self, @themeColor);
+
+    .DshThemeIcon {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+
+        .item {
+            min-width: 54px;
+            height: 54px;
+            margin-right: 7px;
+            border: 1px solid transparent;
+            border-radius: 8px;
+            cursor: pointer;
+
+            &-content {
+                width: 38px;
+                height: 38px;
+                margin: 8px auto;
+                border-radius: 38px;
+                line-height: 38px;
+                text-align: center;
+
+                i {
+                    font-size: 20px;
+                    color: #ffffff;
+                }
+            }
+
+            &:hover,
+            &-active {
+                border-color: @theme-color-self;
+            }
+        }
+    }
+</style>

package/src/components/controls/senior/DshLabels.vue

@@ -46,7 +46,7 @@
                             >
                             <template #suffix>
                                 <Icon
-                                    color="#3DB8C5"
+                                    class="item-edit-icon"
                                     custom="bri bri-duigou"
                                     @click.native.stop="clickConfirm(listItem)"
                                 />
@@ -287,7 +287,9 @@
                     }
 
                     &-edit {
-
+                        &-icon {
+                            color: @themeColor;
+                        }
                     }
 
                     &-show {

package/src/components/controls/senior/selectUsers/selectUsers.vue

@@ -743,7 +743,6 @@
 
                 .footer {
                     padding-top: 12px;
-                    // border-top: 1px solid @borderColor;
                     text-align: right;
                 }
             }

package/src/components/form/searchMixin.js

@@ -366,7 +366,8 @@ export default {
                                     ? loop(item[key])
                                     : item[key]
                             : item[key]
-                })), {});
+                    }), {})
+                );
             };
 
             return loop(list);

package/src/components/list/DshFlatTable.vue

@@ -83,7 +83,6 @@
 
                 <span
                     class="DshFlatTable-sort"
-                    :style="{ color: appColor }"
                     @click="changeDescSort()"
                 >
                     <dsh-icons
@@ -193,7 +192,6 @@
 
                         <span
                             class="DshFlatTable-sort"
-                            :style="{ color: appColor }"
                             @click="changeDescSort()"
                         >
                             <dsh-icons
@@ -309,7 +307,7 @@
         &-sort {
             margin-left: 5px;
             font-weight: 600;
-            // color: @themeColor;
+            color: @themeColor;
             cursor: pointer;
 
             &-icons {

package/src/components/list/mixins/tableBaseMixin.js

@@ -200,10 +200,7 @@ export default {
     },
     computed: {
         appObj () {
-            return this.$store.getters.appObj || {};
-        },
-        appColor () {
-            return ((this.$appData.themeColors || {})[this.appObj.colorType] || {}).color || "#3DB8C5";
+            return this.$store.getters.appThemeColor;
         },
 
         dshRender () {
@@ -719,7 +716,7 @@ export default {
                     tip: this.showMode === "form"
                         ? this.baseOperationMap.canInsert.tip.replace("行", "条")
                         : this.baseOperationMap.canInsert.tip,
-                    color: this.appColor
+                    color: this.appThemeColor
                 },
                 canHideOrShow: {
                     ...this.topOperationMap.canHideOrShow,

package/src/components/list/mixins/treeTableBaseMixin.js

@@ -79,10 +79,7 @@ export default {
                     tip: this.showMode === "form"
                         ? this.baseOperationMap.canCreateChild.tip.replace("行", "条")
                         : this.baseOperationMap.canCreateChild.tip,
-                    color: this.appColor
-                    // style: {
-                    //     color: this.appColor
-                    // }
+                    color: this.appThemeColor
                 }
             };
         }

package/src/components/small/DshButtons.vue

@@ -20,7 +20,7 @@
                         :title="operationItem.tipTitle"
                         :content="operationItem.tipContent"
                         word-wrap
-                        width="220"
+                        :width="operationItem.tipWidth || 220"
                         :transfer="true"
                     >
                         <bri-button
@@ -89,7 +89,7 @@
                         :title="operationItem.tipTitle"
                         :content="operationItem.tipContent"
                         word-wrap
-                        width="220"
+                        :width="operationItem.tipWidth || 220"
                         :transfer="true"
                     >
                         <bri-button
@@ -136,7 +136,7 @@
                     :title="operationItem.tipTitle"
                     :content="operationItem.tipContent"
                     word-wrap
-                    width="220"
+                    :width="operationItem.tipWidth || 220"
                     popper-class="DshButtons-poptip"
                     :transfer="true"
                 >

package/src/index.js

@@ -21,6 +21,7 @@ import DshDefaultSearch from "./components/form/DshDefaultSearch.vue";
 // unit
 import DshFormUnit from "./components/unit/DshFormUnit.vue";
 import DshListUnit from "./components/unit/DshListUnit.vue";
+
 // controls
 import DshControlInput from "./components/controls/DshControlInput.vue";
 import DshInput from "./components/controls/base/DshInput/DshInput.vue";
@@ -83,7 +84,12 @@ import DshPackage from "./components/controls/senior/DshPackage.vue";
 import selectUsers from "./components/controls/senior/selectUsers/selectUsers.vue";
 import departMenu from "./components/controls/senior/selectUsers/departMenu.vue";
 import selectDepartments from "./components/controls/senior/selectDepartments.vue";
+// import DshLabels from "./components/controls/senior/DshLabels.vue";
+// import flatTable from "./components/controls/senior/flatTable.vue";
+// import cascaderTable from "./components/controls/senior/cascaderTable.vue";
 
+import DshThemeColor from "./components/controls/extra/DshThemeColor.vue";
+import DshThemeIcon from "./components/controls/extra/DshThemeIcon.vue";
 import DshColor from "./components/controls/extra/DshColor.vue";
 
 // import DshBack from "./components/controls/special/DshBack.vue";
@@ -255,7 +261,12 @@ export {
     selectUsers,
     departMenu,
     selectDepartments,
+    // DshLabels,
+    // flatTable,
+    // cascaderTable,
 
+    DshThemeColor,
+    DshThemeIcon,
     DshColor,
 
     // DshBack,

package/src/styles/global/variables.less

@@ -1,4 +1,9 @@
 // 主题色
+@themeColor-default            : #3DB8C5;
+@theme-hover-default           : #7DD0D8;
+@theme-active-default          : #298089;
+@theme-focus-default           : #DCF2F4;
+@theme-disabled-default        : #BCE7EB;
 @themeColor            : #3DB8C5; // 主题颜色
 @theme-hover           : #7DD0D8;
 @theme-active          : #298089;

package/src/styles/reset-easytable.less

@@ -2,8 +2,8 @@
 @ve-primary-color                            : @themeColor;
 @ve-default-text-color                       : @textColor;
 @ve-table-border-color                       : @borderColor;
-@ve-table-body-row-hover-background-color    : tint(@themeColor, 90%);
-@ve-table-body-row-highlight-background-color: tint(@themeColor, 90%);
+@ve-table-body-row-hover-background-color    : @theme-focus;
+@ve-table-body-row-highlight-background-color: @theme-focus;
 @ve-table-head-text-color                    : @contentColor;
 @ve-table-foot-text-color                    : @textColor;
 @ve-table-header-background-color            : @btn-hover;

package/src/styles/reset-iview-variables.less

@@ -1,12 +1,12 @@
 // 可替换样式 https://github.com/view-design/ViewUI/blob/master/src/styles/custom.less
-@primary-color          : @themeColor;
+@primary-color          : @themeColor-default;
 @info-color             : #2db7f5;
 @success-color          : #19be6b;
-@processing-color       : @themeColor;
+@processing-color       : @themeColor-default;
 @warning-color          : #ff9900;
 @error-color            : #ed4014;
 @normal-color           : #ff0000;
-@link-color             : @themeColor;
+@link-color             : @themeColor-default;
 
 // Base
 @font-family            : "PingFang SC","Microsoft YaHei","微软雅黑";
@@ -28,7 +28,7 @@
 @btn-disable-bg         : #E5E5E5;
 @btn-disable-border     : #ccc;
 @btn-font-size-small    : 12px;
-@btn-ghost-color        : @themeColor;
+@btn-ghost-color        : @themeColor-default;
 @btn-ghost-bg           : rgba(255, 255,255, 0.9);
 @btn-ghost-border       : #E5E5E5;
 

package/src/components/controls/extra/themeColor.vue

@@ -1,104 +0,0 @@
-<template>
-    <div class="themeColor">
-        <div class="themeColor-colors">
-            <div
-                v-for="(colorItem, colorKey) in themeColorMap"
-                :key="colorKey"
-                class="item"
-                @click="curVal = colorKey"
-            >
-                <div
-                    class="item-content"
-                    :style="{
-                        backgroundColor: colorItem.color
-                    }"
-                ></div>
-                <Icon
-                    v-if="colorKey === curVal"
-                    class="item-icon"
-                    type="ios-checkmark-circle"
-                    size="16"
-                />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import controlMixin from "../mixins/controlMixin.js";
-
-    export default {
-        name: "themeColor",
-        mixins: [
-            controlMixin
-        ],
-        components: {},
-        props: {},
-        data () {
-            return {};
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    _relateColorkey: "colorType",
-
-                    ...this.propsObj,
-                    ...this.commonDealPropsObj
-                };
-            },
-            themeColorMap () {
-                return this.$appData.themeColors || {};
-            }
-        },
-        created () {
-            // this.init();
-        },
-        methods: {
-            init () {
-                if (!this.curVal) {
-                    this.curVal = Object.keys(this.themeColorMap)[0];
-                }
-            }
-        }
-    };
-</script>
-
-<style lang="less" scoped>
-    .themeColor {
-        width: 100%;
-
-        &-colors {
-            display: flex;
-
-            .item {
-                display: inlile-block;
-                width: 54px;
-                height: 54px;
-                margin-right: 7px;
-                cursor: pointer;
-                position: relative;
-
-                &-content {
-                    width: 38px;
-                    height: 38px;
-                    margin: 8px auto;
-                    border-radius: 50%;
-                }
-
-                &-icon {
-                    position: absolute;
-                    bottom: 7px;
-                    right: 7px;
-
-                    border-radius: 50%;
-                    background-color: rgba(255, 255, 255, 0.85);
-                    color: @themeColor;
-                }
-
-                &:last-of-type {
-                    margin-right: 0px;
-                }
-            }
-        }
-    }
-</style>

package/src/components/controls/extra/themeIcon.vue

@@ -1,114 +0,0 @@
-<template>
-    <div class="themeIcon">
-        <div class="themeIcon-icons">
-            <div
-                v-for="(iconItem, iconKey) in iconMap"
-                :key="iconKey"
-                :class="{
-                    'item': true,
-                    'item-active': iconKey === curVal
-                }"
-                :style="{
-                    'borderColor': iconKey === curVal ? bgColor : undefined
-                }"
-                @click="curVal = iconKey"
-            >
-                <div
-                    class="item-content"
-                    :style="{
-                        'backgroundColor': bgColor
-                    }"
-                >
-                    <Icon :custom="'bico-font ' + iconItem" />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import controlMixin from "../mixins/controlMixin.js";
-
-    export default {
-        name: "themeIcon",
-        mixins: [
-            controlMixin
-        ],
-        components: {},
-        props: {},
-        data () {
-            return {};
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    _relateColorkey: "colorType",
-
-                    ...this.propsObj,
-                    ...this.commonDealPropsObj
-                };
-            },
-            iconMap () {
-                return this.$appData.themeIcons || {};
-            },
-            relateColorkey () {
-                return this.selfPropsObj._relateColorkey;
-            },
-            themeColorMap () {
-                return this.$appData.themeColors || {};
-            },
-            bgColor () {
-                return (this.themeColorMap[this.value[this.relateColorkey]] || {}).bgColor;
-            }
-        },
-        created () {
-            // this.init();
-        },
-        methods: {
-            init () {
-                if (!this.curVal) {
-                    this.curVal = Object.keys(this.iconMap)[0];
-                }
-            }
-        }
-    };
-</script>
-
-<style lang="less" scoped>
-    .themeIcon {
-        width: 100%;
-
-        &-icons {
-            display: flex;
-            flex-wrap: wrap;
-
-            .item {
-                min-width: 54px;
-                height: 54px;
-                margin-right: 7px;
-                border: 1px solid transparent;
-                border-radius: 8px;
-                cursor: pointer;
-
-                &-content {
-                    width: 38px;
-                    height: 38px;
-                    margin: 8px auto;
-                    border-radius: 38px;
-                    line-height: 38px;
-                    text-align: center;
-
-                    i {
-                        font-size: 20px;
-                        color: #ffffff;
-                    }
-                }
-
-                &:hover,
-                &-active {
-                    border-color: @themeColor;
-                }
-            }
-        }
-    }
-</style>