xt-element-ui 1.3.3 → 1.4.0

package/src/components/xt-config-provider/style/index.scss

@@ -1,12 +1,12 @@
-@import '../../../styles/variables.scss';
-
-.xt-config-provider {
-}
-
-.xt-config-provider--dark {
-}
-
-.xt-config-provider--dark {
-  background-color: var(--xt-color-bg-primary, #0b141d);
-  color: var(--xt-color-text-primary, rgba(255, 255, 255, 0.95));
+@import '../../../styles/variables.scss';
+
+.xt-config-provider {
+}
+
+.xt-config-provider--dark {
+}
+
+.xt-config-provider--dark {
+  background-color: var(--xt-color-bg-primary, #0b141d);
+  color: var(--xt-color-text-primary, rgba(255, 255, 255, 0.95));
 }

package/src/components/xt-flex-box/index.js

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

package/src/components/xt-flex-box/style/index.scss

@@ -1,82 +1,82 @@
-@import '../../../styles/variables.scss';
-
-.xt-flex-box.flex {
-  display: flex;
-}
-
-
-.xt-flex-box.is-inline {
-  display: inline-flex;
-}
-
-.direction-row {
-  flex-direction: row;
-}
-
-.direction-row-reverse {
-  flex-direction: row-reverse;
-}
-
-.direction-column {
-  flex-direction: column;
-}
-
-.direction-column-reverse {
-  flex-direction: column-reverse;
-}
-
-.align-center {
-  align-items: center;
-}
-
-.align-start {
-  align-items: flex-start;
-}
-
-.align-end {
-  align-items: flex-end;
-}
-
-.align-baseline {
-  align-items: baseline;
-}
-
-.align-stretch {
-  align-items: stretch;
-}
-
-.content-center {
-  justify-content: center;
-}
-
-.content-around {
-  justify-content: space-around;
-}
-
-.content-between {
-  justify-content: space-between;
-}
-
-.content-start {
-  justify-content: flex-start;
-}
-
-.content-end {
-  justify-content: flex-end;
-}
-
-.content-evenly {
-  justify-content: space-evenly;
-}
-
-.wrap-wrap {
-  flex-wrap: wrap;
-}
-
-.wrap-nowrap {
-  flex-wrap: nowrap;
-}
-
-.wrap-unset {
-  flex-wrap: wrap;
+@import '../../../styles/variables.scss';
+
+.xt-flex-box.flex {
+  display: flex;
+}
+
+
+.xt-flex-box.is-inline {
+  display: inline-flex;
+}
+
+.direction-row {
+  flex-direction: row;
+}
+
+.direction-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.direction-column {
+  flex-direction: column;
+}
+
+.direction-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.align-baseline {
+  align-items: baseline;
+}
+
+.align-stretch {
+  align-items: stretch;
+}
+
+.content-center {
+  justify-content: center;
+}
+
+.content-around {
+  justify-content: space-around;
+}
+
+.content-between {
+  justify-content: space-between;
+}
+
+.content-start {
+  justify-content: flex-start;
+}
+
+.content-end {
+  justify-content: flex-end;
+}
+
+.content-evenly {
+  justify-content: space-evenly;
+}
+
+.wrap-wrap {
+  flex-wrap: wrap;
+}
+
+.wrap-nowrap {
+  flex-wrap: nowrap;
+}
+
+.wrap-unset {
+  flex-wrap: wrap;
 }

package/src/components/xt-grid-box/index.js

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

package/src/components/xt-grid-box/style/index.scss

@@ -1,93 +1,93 @@
-@import '../../../styles/variables.scss';
-
-.xt-grid-box {
-  display: grid;
-  box-sizing: border-box;
-  min-height: 0;
-}
-
-// 默认间距变量
-:root {
-  --xt-grid-box-gap: 8px;
-}
-
-// 响应式网格类
-.xt-grid-box--auto-fill {
-  grid-template-columns: repeat(auto-fill, minmax(var(--xt-grid-item-min-width, 200px), 1fr));
-}
-
-.xt-grid-box--auto-fit {
-  grid-template-columns: repeat(auto-fit, minmax(var(--xt-grid-item-min-width, 200px), 1fr));
-}
-
-// 常见列数快捷类
-.xt-grid-box--cols-2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.xt-grid-box--cols-3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.xt-grid-box--cols-4 {
-  grid-template-columns: repeat(4, 1fr);
-}
-
-.xt-grid-box--cols-6 {
-  grid-template-columns: repeat(6, 1fr);
-}
-
-.xt-grid-box--cols-12 {
-  grid-template-columns: repeat(12, 1fr);
-}
-
-// 子项默认样式
-.xt-grid-item {
-  box-sizing: border-box;
-}
-
-// 响应式断点
-@media (min-width: 576px) {
-  .xt-grid-box--sm-cols-2 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .xt-grid-box--sm-cols-3 {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-@media (min-width: 768px) {
-  .xt-grid-box--md-cols-2 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .xt-grid-box--md-cols-3 {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  .xt-grid-box--md-cols-4 {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-@media (min-width: 992px) {
-  .xt-grid-box--lg-cols-3 {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  .xt-grid-box--lg-cols-4 {
-    grid-template-columns: repeat(4, 1fr);
-  }
-  .xt-grid-box--lg-cols-6 {
-    grid-template-columns: repeat(6, 1fr);
-  }
-}
-
-@media (min-width: 1200px) {
-  .xt-grid-box--xl-cols-4 {
-    grid-template-columns: repeat(4, 1fr);
-  }
-  .xt-grid-box--xl-cols-6 {
-    grid-template-columns: repeat(6, 1fr);
-  }
-  .xt-grid-box--xl-cols-12 {
-    grid-template-columns: repeat(12, 1fr);
-  }
+@import '../../../styles/variables.scss';
+
+.xt-grid-box {
+  display: grid;
+  box-sizing: border-box;
+  min-height: 0;
+}
+
+// 默认间距变量
+:root {
+  --xt-grid-box-gap: 8px;
+}
+
+// 响应式网格类
+.xt-grid-box--auto-fill {
+  grid-template-columns: repeat(auto-fill, minmax(var(--xt-grid-item-min-width, 200px), 1fr));
+}
+
+.xt-grid-box--auto-fit {
+  grid-template-columns: repeat(auto-fit, minmax(var(--xt-grid-item-min-width, 200px), 1fr));
+}
+
+// 常见列数快捷类
+.xt-grid-box--cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.xt-grid-box--cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.xt-grid-box--cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.xt-grid-box--cols-6 {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.xt-grid-box--cols-12 {
+  grid-template-columns: repeat(12, 1fr);
+}
+
+// 子项默认样式
+.xt-grid-item {
+  box-sizing: border-box;
+}
+
+// 响应式断点
+@media (min-width: 576px) {
+  .xt-grid-box--sm-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .xt-grid-box--sm-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 768px) {
+  .xt-grid-box--md-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .xt-grid-box--md-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .xt-grid-box--md-cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (min-width: 992px) {
+  .xt-grid-box--lg-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .xt-grid-box--lg-cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .xt-grid-box--lg-cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+@media (min-width: 1200px) {
+  .xt-grid-box--xl-cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .xt-grid-box--xl-cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  .xt-grid-box--xl-cols-12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
 }

package/src/components/xt-grid-item/index.js

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

package/src/components/xt-grid-item/index.vue

@@ -1,107 +1,107 @@
-<template>
-  <div class="xt-grid-item" :style="styleAttrs">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "XtGridItem",
-  props: {
-    // 跨列数
-    span: {
-      type: Number,
-      default: 1,
-      validator: (val) => val > 0
-    },
-    // 跨行数
-    rowSpan: {
-      type: Number,
-      default: 1,
-      validator: (val) => val > 0
-    },
-    // 起始列
-    start: {
-      type: Number,
-      default: 0,
-      validator: (val) => val >= 0
-    },
-    // 起始行
-    rowStart: {
-      type: Number,
-      default: 0,
-      validator: (val) => val >= 0
-    },
-    // 命名区域
-    area: {
-      type: String,
-      default: ""
-    },
-    // 对齐方式（justify-self）
-    justifySelf: {
-      type: String,
-      default: "auto",
-      validator: (val) => ['auto', 'start', 'end', 'center', 'stretch'].includes(val)
-    },
-    // 对齐方式（align-self）
-    alignSelf: {
-      type: String,
-      default: "auto",
-      validator: (val) => ['auto', 'start', 'end', 'center', 'stretch', 'baseline'].includes(val)
-    },
-    // 自定义样式类
-    customClass: {
-      type: String,
-      default: ""
-    }
-  },
-  computed: {
-    styleAttrs() {
-      const styles = {};
-
-      // 处理跨列
-      if (this.span > 1) {
-        styles.gridColumnEnd = `span ${this.span}`;
-      }
-
-      // 处理跨行
-      if (this.rowSpan > 1) {
-        styles.gridRowEnd = `span ${this.rowSpan}`;
-      }
-
-      // 处理起始列
-      if (this.start > 0) {
-        styles.gridColumnStart = this.start;
-      }
-
-      // 处理起始行
-      if (this.rowStart > 0) {
-        styles.gridRowStart = this.rowStart;
-      }
-
-      // 处理命名区域
-      if (this.area) {
-        styles.gridArea = this.area;
-      }
-
-      // 处理 justify-self
-      if (this.justifySelf && this.justifySelf !== 'auto') {
-        styles.justifySelf = this.justifySelf;
-      }
-
-      // 处理 align-self
-      if (this.alignSelf && this.alignSelf !== 'auto') {
-        styles.alignSelf = this.alignSelf;
-      }
-
-      return styles;
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.xt-grid-item {
-  box-sizing: border-box;
-}
+<template>
+  <div class="xt-grid-item" :style="styleAttrs">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "XtGridItem",
+  props: {
+    // 跨列数
+    span: {
+      type: Number,
+      default: 1,
+      validator: (val) => val > 0
+    },
+    // 跨行数
+    rowSpan: {
+      type: Number,
+      default: 1,
+      validator: (val) => val > 0
+    },
+    // 起始列
+    start: {
+      type: Number,
+      default: 0,
+      validator: (val) => val >= 0
+    },
+    // 起始行
+    rowStart: {
+      type: Number,
+      default: 0,
+      validator: (val) => val >= 0
+    },
+    // 命名区域
+    area: {
+      type: String,
+      default: ""
+    },
+    // 对齐方式（justify-self）
+    justifySelf: {
+      type: String,
+      default: "auto",
+      validator: (val) => ['auto', 'start', 'end', 'center', 'stretch'].includes(val)
+    },
+    // 对齐方式（align-self）
+    alignSelf: {
+      type: String,
+      default: "auto",
+      validator: (val) => ['auto', 'start', 'end', 'center', 'stretch', 'baseline'].includes(val)
+    },
+    // 自定义样式类
+    customClass: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    styleAttrs() {
+      const styles = {};
+
+      // 处理跨列
+      if (this.span > 1) {
+        styles.gridColumnEnd = `span ${this.span}`;
+      }
+
+      // 处理跨行
+      if (this.rowSpan > 1) {
+        styles.gridRowEnd = `span ${this.rowSpan}`;
+      }
+
+      // 处理起始列
+      if (this.start > 0) {
+        styles.gridColumnStart = this.start;
+      }
+
+      // 处理起始行
+      if (this.rowStart > 0) {
+        styles.gridRowStart = this.rowStart;
+      }
+
+      // 处理命名区域
+      if (this.area) {
+        styles.gridArea = this.area;
+      }
+
+      // 处理 justify-self
+      if (this.justifySelf && this.justifySelf !== 'auto') {
+        styles.justifySelf = this.justifySelf;
+      }
+
+      // 处理 align-self
+      if (this.alignSelf && this.alignSelf !== 'auto') {
+        styles.alignSelf = this.alignSelf;
+      }
+
+      return styles;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.xt-grid-item {
+  box-sizing: border-box;
+}
 </style>

package/src/components/xt-input/index.js

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