meixioacomponent 2.0.45 → 2.0.47

package/packages/components/base/baseSelect/baseSelect.vue

@@ -1,102 +1,102 @@
-
-
-<template>
-  <div class="base_select-wrap">
-
-    <t-select v-model="value"
-               :clearable="clearable"
-               @change="onChange"
-               @clear="onClear"
-               @blur="onBlur"
-               @focus="onFocus"
-               @visible-change="onVisibleChange"
-               :multiple="multiple" :placeholder="placeholder" :disabled="disabled" :size="size">
-      <t-option v-for="(item,index) in options" :key="index" :label="labelKey" :value="valueKey"></t-option>
-    </t-select>
-
-  </div>
-
-</template>
-
-<script>
-import {defineComponent} from 'vue'
-export default defineComponent({
-  name: "baseSelect",
-  props: {
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    value: {},
-    size: {
-      type: String,
-      default: 'small'
-    },
-    clearable: {
-      type: Boolean,
-      default: false,
-    },
-    placeholder: {
-      type: String,
-      default: '请选择'
-    },
-    options: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    valueKey: {
-      type: String,
-      default: 'value'
-    },
-    labelKey: {
-      type: String,
-      default: 'label'
-    }
-  },
-  computed: {
-    module: {
-      set(val) {
-        this.$emit('input', val);
-      },
-      get() {
-        return this.$props.value
-      }
-    }
-
-  },
-  methods: {
-    onChange(event) {
-      this.$emit('change', event);
-    },
-    onClear(event) {
-      this.$emit('clear', event);
-    },
-    onBlur(event) {
-      this.$emit('blur', event);
-    },
-    onFocus(event) {
-      this.$emit('focus', event);
-    },
-    onVisibleChange(value) {
-      this.$emit('visible-change', value);
-    }
-  }
-})
-</script>
-
-
-
-<style scoped lang="less">
-.base_select-wrap {
-  width: auto;
-  height: auto;
-}
-</style>
-
-
+
+
+<template>
+  <div class="base_select-wrap">
+
+    <t-select v-model="value"
+               :clearable="clearable"
+               @change="onChange"
+               @clear="onClear"
+               @blur="onBlur"
+               @focus="onFocus"
+               @visible-change="onVisibleChange"
+               :multiple="multiple" :placeholder="placeholder" :disabled="disabled" :size="size">
+      <t-option v-for="(item,index) in options" :key="index" :label="labelKey" :value="valueKey"></t-option>
+    </t-select>
+
+  </div>
+
+</template>
+
+<script>
+import {defineComponent} from 'vue'
+export default defineComponent({
+  name: "baseSelect",
+  props: {
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    value: {},
+    size: {
+      type: String,
+      default: 'small'
+    },
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    labelKey: {
+      type: String,
+      default: 'label'
+    }
+  },
+  computed: {
+    module: {
+      set(val) {
+        this.$emit('input', val);
+      },
+      get() {
+        return this.$props.value
+      }
+    }
+
+  },
+  methods: {
+    onChange(event) {
+      this.$emit('change', event);
+    },
+    onClear(event) {
+      this.$emit('clear', event);
+    },
+    onBlur(event) {
+      this.$emit('blur', event);
+    },
+    onFocus(event) {
+      this.$emit('focus', event);
+    },
+    onVisibleChange(value) {
+      this.$emit('visible-change', value);
+    }
+  }
+})
+</script>
+
+
+
+<style scoped lang="less">
+.base_select-wrap {
+  width: auto;
+  height: auto;
+}
+</style>
+
+

package/packages/components/base/baseSelect/index.js

@@ -1,6 +1,6 @@
-import baseSelect from "./baseSection.vue";
-
-baseSelect.install = function (Vue) {
-    Vue.component(baseSelect.name, baseSelect);
-};
-export default baseSelect;
+import baseSelect from "./baseSection.vue";
+
+baseSelect.install = function (Vue) {
+    Vue.component(baseSelect.name, baseSelect);
+};
+export default baseSelect;

package/packages/components/base/baseText/index.vue

@@ -143,7 +143,7 @@ export default {
 
 .base-text-wrap {
   width: fit-content;
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-l);
 
   .default {
     overflow: hidden;
@@ -172,7 +172,7 @@ export default {
   }
 
   /deep/ .t-statistic-content-value {
-    font-size: var(--font-size-base) !important;
+    font-size: var(--font-size-l) !important;
     font-family: TCloudNumber !important;
   }
 
@@ -180,7 +180,7 @@ export default {
 
 .handle {
   color: var(--color-primary) !important;
-  font-size: var(--font-size-base) !important;
+  font-size: var(--font-size-l) !important;
   cursor: pointer;
 
   &:hover {
@@ -191,6 +191,6 @@ export default {
 
 .empty {
   color: var(--font-color-ds);
-  font-size: var(--font-size-s);
+  font-size: var(--font-size-l);
 }
 </style>

package/packages/components/base/baseTimeRangePicker/baseTimeRangePicker.vue

@@ -1,60 +1,60 @@
-<template>
-  <div class="base_time_range_picker-wrap">
-    <t-date-range-picker
-        ref="baseTimeRangePickerContentRef"
-        v-model="module" v-bind="$attrs"
-        @change="onChange"
-        @focus="onFocus"
-        @blur="onblur"
-    ></t-date-range-picker>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: "baseTimeRangePicker",
-  data() {
-    return {}
-  },
-  computed: {
-    module: {
-      set(val) {
-        this.$emit('input', val);
-      },
-      get() {
-        return this.$props.value
-      }
-    }
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    }
-  },
-  methods: {
-    onChange(value) {
-      this.$emit('change', value);
-    },
-    onFocus(value) {
-      this.$emit('focus', value);
-    },
-    onblur(value) {
-      this.$emit('blur', value);
-    }
-
-  }
-}
-</script>
-
-
-<style scoped lang="less">
-.base_time_range_picker-wrap {
-  width: auto;
-  height: auto;
-}
-
+<template>
+  <div class="base_time_range_picker-wrap">
+    <t-date-range-picker
+        ref="baseTimeRangePickerContentRef"
+        v-model="module" v-bind="$attrs"
+        @change="onChange"
+        @focus="onFocus"
+        @blur="onblur"
+    ></t-date-range-picker>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "baseTimeRangePicker",
+  data() {
+    return {}
+  },
+  computed: {
+    module: {
+      set(val) {
+        this.$emit('input', val);
+      },
+      get() {
+        return this.$props.value
+      }
+    }
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  methods: {
+    onChange(value) {
+      this.$emit('change', value);
+    },
+    onFocus(value) {
+      this.$emit('focus', value);
+    },
+    onblur(value) {
+      this.$emit('blur', value);
+    }
+
+  }
+}
+</script>
+
+
+<style scoped lang="less">
+.base_time_range_picker-wrap {
+  width: auto;
+  height: auto;
+}
+
 </style>

package/packages/components/base/baseTimeRangePicker/index.js

@@ -1,7 +1,7 @@
-import baseTimeRangePicker from "./baseTimeRangePicker.vue";
-
-baseTimeRangePicker.install = function (Vue) {
-    Vue.component(baseTimeRangePicker.name, baseTimeRangePicker);
-};
-
-export default baseTimeRangePicker;
+import baseTimeRangePicker from "./baseTimeRangePicker.vue";
+
+baseTimeRangePicker.install = function (Vue) {
+    Vue.component(baseTimeRangePicker.name, baseTimeRangePicker);
+};
+
+export default baseTimeRangePicker;

package/packages/components/base/baseToggle/toggle.vue

@@ -1,15 +1,21 @@
 <template>
-    <t-radio-group v-model="module" :disabled="disabled"  variant="primary-filled" :size="componentSize">
-      <t-radio-button
-          :disabled="item.disabled"
-          v-for="(item, index) in toggleList"
-          :key="index"
-          :value="item.value">{{ item.label }}
-      </t-radio-button>
-    </t-radio-group>
+  <t-radio-group
+      ref="tRadioGroupRef"
+      v-model="module" :disabled="disabled" variant="primary-filled" :size="componentSize">
+    <t-radio-button
+        :disabled="item.disabled"
+        v-for="(item, index) in toggleList"
+        :key="index"
+        :value="item.value">{{ item.label }}
+    </t-radio-button>
+  </t-radio-group>
 </template>
 
 <script>
+const checkedClassName = 't-is-checked';
+const radioButtonClassName = 't-radio-button';
+const blockClassName = 't-radio-group__bg-block'
+
 import {TransomComponentSize} from "../../../utils/utils";
 
 export default {
@@ -24,6 +30,7 @@ export default {
     },
     toggleList: {
       require: true,
+      type: Array,
     },
     size: {
       type: String,
@@ -49,32 +56,71 @@ export default {
   computed: {
     module: {
       set(val) {
-        const {beforeHandle,toggleList} = this.$props
-        const index =  toggleList.findIndex(item=>{return item.value===val});
-        const item  = toggleList[index];
+        const {beforeHandle, toggleList} = this.$props
+        const index = toggleList.findIndex(item => {
+          return item.value === val
+        });
+        const item = toggleList[index];
         if (beforeHandle) {
           beforeHandle(() => {
             this.setModule(item)
             this.$emit('input', val)
+            this.onRadioChange(val);
           }, item)
         } else {
           this.$emit('input', val)
           this.setModule(item)
+          this.onRadioChange(val);
         }
       },
       get() {
         return this.$props.value
       },
     },
-    componentSize(){
+    componentSize() {
       return TransomComponentSize(this.$props.size);
-
     }
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.onRadioChange(this.module)
+    })
+  },
+  updated() {
+    this.onRadioChange(this.module)
+  },
   methods: {
     setModule(item) {
       this.$emit('handletoggle', item)
     },
+    onRadioChange(value) {
+      if (this.$props.toggleList.length !== 2) return;
+      this.$nextTick(() => {
+        const toggleIndex = this.$props.toggleList.findIndex(item => {
+          return item.value === value;
+        })
+        if (toggleIndex > -1) {
+          const el = this.$refs.tRadioGroupRef.$el;
+          if (el) {
+            const buttonList = el.querySelectorAll(`.${radioButtonClassName}`);
+            const checkEl = el.querySelector(`.${checkedClassName}`);
+            if (buttonList) {
+              for (let i = 0; i < buttonList.length; i++) {
+                const item = buttonList[i];
+                item.style.setProperty('color', `var(--font-color-m)`)
+              }
+            }
+            if (checkEl) {
+              checkEl.style.setProperty('color', `${this.$props.toggleTextColor[toggleIndex]} !important`)
+            }
+            const blockEl = el.querySelector(`.${blockClassName}`);
+            if (blockEl) {
+              blockEl.style.setProperty('background-color', `${this.$props.toggleColor[toggleIndex]} !important`);
+            }
+          }
+        }
+      })
+    }
   },
 }
 </script>

package/packages/components/base/tDateRangePicker/index.js

@@ -1,6 +1,6 @@
-import tDateRangePicker from "./tDateRangePicker.vue"
-
-tDateRangePicker.install = function (Vue) {
-    Vue.component(tDateRangePicker.name, tDateRangePicker)
-}
+import tDateRangePicker from "./tDateRangePicker.vue"
+
+tDateRangePicker.install = function (Vue) {
+    Vue.component(tDateRangePicker.name, tDateRangePicker)
+}
 export default tDateRangePicker