xt-element-ui 1.3.3 → 1.4.0

package/src/components/ex-card/style/index.scss

@@ -1,73 +1,73 @@
-// ExCard 组件样式
-@import '../../../styles/element-theme.scss';
-@import '../../../styles/variables.scss';
-
-.ex-card {
-  border-radius: 8px;
-  transition: all 0.3s;
-  font-size: var(--ex-card-font-size, 14px);
-  background-color: var(--el-bg-color-block, #ffffff);
-  color: var(--el-text-color-primary, #303133);
-  border-color: var(--el-border-color, #303133);
-  
-  .el-card__header {
-    padding: var(--ex-card-header-padding, 16px 20px);
-    border-bottom: 1px solid var(--el-border-color, #ebeef5);
-    background-color: var(--el-bg-color-block-head, #ffffff);
-    font-weight: 600;
-  }
-  
-  .el-card__body {
-    padding: var(--ex-card-body-padding, 20px);
-  }
-}
-
-.ex-card-small {
-  font-size: 12px;
-  
-  .el-card__header {
-    font-size: 12px;
-  }
-}
-
-.ex-card-medium {
-  font-size: 14px;
-  
-  .el-card__header {
-    font-size: 14px;
-  }
-}
-
-.ex-card-large {
-  font-size: 16px;
-  
-  .el-card__header {
-    font-size: 16px;
-  }
-}
-
-.ex-card-always {
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-.ex-card-hover {
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  
-  &:hover {
-    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
-  }
-}
-
-.ex-card-never {
-  box-shadow: none;
-  border: 1px solid var(--el-border-color, #ebeef5);
-}
-
-.ex-card-no-border {
-  border: none;
-  
-  .el-card__header {
-    border-bottom: none;
-  }
-}
-
+// ExCard 组件样式
+@import '../../../styles/element-theme.scss';
+@import '../../../styles/variables.scss';
+
+.ex-card {
+  border-radius: 8px;
+  transition: all 0.3s;
+  font-size: var(--ex-card-font-size, 14px);
+  background-color: var(--el-bg-color-block, #ffffff);
+  color: var(--el-text-color-primary, #303133);
+  border-color: var(--el-border-color, #303133);
+  
+  .el-card__header {
+    padding: var(--ex-card-header-padding, 16px 20px);
+    border-bottom: 1px solid var(--el-border-color, #ebeef5);
+    background-color: var(--el-bg-color-block-head, #ffffff);
+    font-weight: 600;
+  }
+  
+  .el-card__body {
+    padding: var(--ex-card-body-padding, 20px);
+  }
+}
+
+.ex-card-small {
+  font-size: 12px;
+  
+  .el-card__header {
+    font-size: 12px;
+  }
+}
+
+.ex-card-medium {
+  font-size: 14px;
+  
+  .el-card__header {
+    font-size: 14px;
+  }
+}
+
+.ex-card-large {
+  font-size: 16px;
+  
+  .el-card__header {
+    font-size: 16px;
+  }
+}
+
+.ex-card-always {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.ex-card-hover {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  
+  &:hover {
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
+  }
+}
+
+.ex-card-never {
+  box-shadow: none;
+  border: 1px solid var(--el-border-color, #ebeef5);
+}
+
+.ex-card-no-border {
+  border: none;
+  
+  .el-card__header {
+    border-bottom: none;
+  }
+}
+

package/src/components/ex-chart/index.js

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

package/src/components/ex-chart/index.vue

@@ -1,137 +1,137 @@
-<template>
-  <ex-bar v-if="type=='bar'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-bar>
-  <ex-line v-else-if="type=='line'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-line>
-  <ex-pie v-else-if="type=='pie'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-pie>
-  <ex-multi v-else-if="type=='multi'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-multi>
-</template>
-<script>
-import ExBar from "./ExBar.vue"
-import ExLine from "./ExLine.vue"
-import ExPie from "./ExPie.vue"
-import ExMulti from "./ExMulti.vue"
-
-export default {
-  name: "ExChart",
-  components: {
-    ExBar,
-    ExLine,
-    ExPie,
-    ExMulti
-  },
-  props: {
-    theme: {
-      type: String,
-      default: ""
-    },
-    size: {
-      type: String,
-      default: "medium",
-      validator: (value) => {
-        return ['small', 'medium', 'large'].includes(value)
-      }
-    },
-    type: {
-      type: String,
-      required: true,
-      default: "bar"
-    }
-  },
-  data() {
-    return {
-      myTheme: this.theme,
-      mySize: this.size,
-      observer: null
-    };
-  },
-  mounted() {
-    // 初始化时检测父元素的 data-theme
-    this.detectParentTheme();
-    
-    // 监听父元素的 data-theme 属性变化
-    this.observeThemeChange();
-  },
-  beforeUnmount() {
-    // 清理观察器
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-  },
-  watch: {
-    theme(newVal) {
-      this.myTheme = newVal;
-    },
-    size(newVal) {
-      this.mySize = newVal;
-    }
-  },
-  methods: {
-    // 检测父元素的 data-theme 属性
-    detectParentTheme() {
-      if (this.theme) {
-        // 如果用户显式传入了 theme prop，使用传入的值
-        this.myTheme = this.theme;
-        return;
-      }
-      
-      // 查找最近的带有 data-theme 属性的父元素
-      let parent = this.$el ? this.$el.parentElement : null;
-      while (parent) {
-        const parentTheme = parent.getAttribute('data-theme');
-        if (parentTheme) {
-          this.myTheme = parentTheme === 'dark' ? 'dark' : 'default';
-          return;
-        }
-        parent = parent.parentElement;
-      }
-      
-      // 如果没有找到，检查 document.body 或 document.documentElement
-      const bodyTheme = document.body.getAttribute('data-theme');
-      const htmlTheme = document.documentElement.getAttribute('data-theme');
-      if (bodyTheme === 'dark' || htmlTheme === 'dark') {
-        this.myTheme = 'dark';
-      } else {
-        this.myTheme = 'default';
-      }
-    },
-    
-    // 监听主题变化
-    observeThemeChange() {
-      if (!this.$el) return;
-      
-      // 创建 MutationObserver 监听父元素的属性变化
-      this.observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
-            const newTheme = mutation.target.getAttribute('data-theme');
-            if (newTheme === 'dark') {
-              this.myTheme = 'dark';
-            } else if (newTheme === 'light') {
-              this.myTheme = 'default';
-            }
-          }
-        });
-      });
-      
-      // 监听当前元素和所有父元素的属性变化
-      let parent = this.$el.parentElement;
-      while (parent) {
-        this.observer.observe(parent, {
-          attributes: true,
-          attributeFilter: ['data-theme']
-        });
-        parent = parent.parentElement;
-      }
-      
-      // 同时监听 body 和 html 的变化
-      this.observer.observe(document.body, {
-        attributes: true,
-        attributeFilter: ['data-theme']
-      });
-      this.observer.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ['data-theme']
-      });
-    }
-  }
-};
+<template>
+  <ex-bar v-if="type=='bar'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-bar>
+  <ex-line v-else-if="type=='line'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-line>
+  <ex-pie v-else-if="type=='pie'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-pie>
+  <ex-multi v-else-if="type=='multi'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-multi>
+</template>
+<script>
+import ExBar from "./ExBar.vue"
+import ExLine from "./ExLine.vue"
+import ExPie from "./ExPie.vue"
+import ExMulti from "./ExMulti.vue"
+
+export default {
+  name: "ExChart",
+  components: {
+    ExBar,
+    ExLine,
+    ExPie,
+    ExMulti
+  },
+  props: {
+    theme: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (value) => {
+        return ['small', 'medium', 'large'].includes(value)
+      }
+    },
+    type: {
+      type: String,
+      required: true,
+      default: "bar"
+    }
+  },
+  data() {
+    return {
+      myTheme: this.theme,
+      mySize: this.size,
+      observer: null
+    };
+  },
+  mounted() {
+    // 初始化时检测父元素的 data-theme
+    this.detectParentTheme();
+    
+    // 监听父元素的 data-theme 属性变化
+    this.observeThemeChange();
+  },
+  beforeUnmount() {
+    // 清理观察器
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  watch: {
+    theme(newVal) {
+      this.myTheme = newVal;
+    },
+    size(newVal) {
+      this.mySize = newVal;
+    }
+  },
+  methods: {
+    // 检测父元素的 data-theme 属性
+    detectParentTheme() {
+      if (this.theme) {
+        // 如果用户显式传入了 theme prop，使用传入的值
+        this.myTheme = this.theme;
+        return;
+      }
+      
+      // 查找最近的带有 data-theme 属性的父元素
+      let parent = this.$el ? this.$el.parentElement : null;
+      while (parent) {
+        const parentTheme = parent.getAttribute('data-theme');
+        if (parentTheme) {
+          this.myTheme = parentTheme === 'dark' ? 'dark' : 'default';
+          return;
+        }
+        parent = parent.parentElement;
+      }
+      
+      // 如果没有找到，检查 document.body 或 document.documentElement
+      const bodyTheme = document.body.getAttribute('data-theme');
+      const htmlTheme = document.documentElement.getAttribute('data-theme');
+      if (bodyTheme === 'dark' || htmlTheme === 'dark') {
+        this.myTheme = 'dark';
+      } else {
+        this.myTheme = 'default';
+      }
+    },
+    
+    // 监听主题变化
+    observeThemeChange() {
+      if (!this.$el) return;
+      
+      // 创建 MutationObserver 监听父元素的属性变化
+      this.observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+            const newTheme = mutation.target.getAttribute('data-theme');
+            if (newTheme === 'dark') {
+              this.myTheme = 'dark';
+            } else if (newTheme === 'light') {
+              this.myTheme = 'default';
+            }
+          }
+        });
+      });
+      
+      // 监听当前元素和所有父元素的属性变化
+      let parent = this.$el.parentElement;
+      while (parent) {
+        this.observer.observe(parent, {
+          attributes: true,
+          attributeFilter: ['data-theme']
+        });
+        parent = parent.parentElement;
+      }
+      
+      // 同时监听 body 和 html 的变化
+      this.observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ['data-theme']
+      });
+      this.observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-theme']
+      });
+    }
+  }
+};
 </script>

package/src/components/ex-chart/theme/dark.js

@@ -14,6 +14,9 @@ export default {
       color: "#ffffff"
     }
   },
+  axisLabel: {
+    color: "#ffffff"
+  },
   line: {
     itemStyle: {
     },
@@ -24,7 +27,7 @@ export default {
   bar: {
     itemStyle: {
       borderRadius: 4
-    }
+    },
   },
   pie: {
     roseType: "radius",

package/src/components/ex-date-picker/index.js

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

package/src/components/ex-icon/index.js

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