xt-element-ui 1.2.8 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "1.2.8",
+  "version": "1.3.1",
   "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -36,7 +36,8 @@
     "echarts": "^6.1.0",
     "element-ui": "^2.15.14",
     "sass": "^1.32.13",
-    "vue-server-renderer": "^2.7.14"
+    "vue-server-renderer": "^2.7.14",
+    "xt-element-ui": "^1.3.0"
   },
   "keywords": [
     "vue",
@@ -60,7 +61,7 @@
     "url": "https://github.com/JobWebNie/xt-element-ui/issues"
   },
   "homepage": "https://jobwebnie.github.io/xt-element-ui/",
-   "repository": {
+  "repository": {
     "type": "git",
     "url": "https://github.com/JobWebNie/xt-element-ui.git"
   },

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

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

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

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

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

@@ -1,2 +1,8 @@
-import ExDatePicker from './index.vue'
-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,2 +1,8 @@
 import ExIcon from './index.vue'
+
+ExIcon.install = function (Vue) {
+  Vue.component(ExIcon.name, ExIcon)
+}
+
 export default ExIcon
+export { ExIcon }

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

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

package/src/components/ex-select-tree/index.js

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

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

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

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

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

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

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

package/src/components/xt-button/index.vue

@@ -1,21 +1,31 @@
 <template>
-  <button 
+  <button
     class="xt-button"
     :class="[
-      type ?'xt-button--' + type: '', 
+      type ? 'xt-button--' + type : '',
       size ? 'xt-button--' + size : '',
       {
-        'is-plain': plain, 
+        'is-plain': plain,
         'is-disabled': disabled,
-        'is-round': round
+        'is-round': round,
+        'is-circle': circle,
+        'is-dashed': dashed,
+        'is-text': text,
+        'is-link': link,
+        'is-loading': loading
       }
-    ]"  
-    :disabled="disabled"
+    ]"
+    :disabled="disabled || loading"
     @click="handleClick"
   >
-    <slot></slot>
+    <i v-if="loading" class="el-icon-loading"></i>
+    <i v-else-if="icon" :class="iconClass"></i>
+    <span v-if="$slots.default" class="xt-button__inner">
+      <slot></slot>
+    </span>
   </button>
 </template>
+
 <script>
 export default {
   name: 'XtButton',
@@ -23,7 +33,7 @@ export default {
     type: {
       type: String,
       default: '',
-      validator: (val) => ['', 'primary', 'success', 'warning', 'danger'].includes(val)
+      validator: (val) => ['', 'primary', 'success', 'warning', 'danger', 'info'].includes(val)
     },
     size: {
       type: String,
@@ -41,14 +51,47 @@ export default {
     round: {
       type: Boolean,
       default: false
+    },
+    circle: {
+      type: Boolean,
+      default: false
+    },
+    dashed: {
+      type: Boolean,
+      default: false
+    },
+    text: {
+      type: Boolean,
+      default: false
+    },
+    link: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    iconClass() {
+      if (!this.icon) return ''
+      if (this.icon.indexOf('el-icon') === 0) {
+        return this.icon
+      }
+      return 'el-icon-' + this.icon
     }
   },
   methods: {
     handleClick() {
-      if (!this.disabled) {
+      if (!this.disabled && !this.loading) {
         this.$emit('click')
       }
     }
   }
 }
-</script>
+</script>

package/src/components/xt-button/style/index.scss

@@ -300,29 +300,19 @@
 
     &.is-disabled {
       background-color: transparent !important;
+      color: var(--xt-button-disabled-text-color);
     }
 
     &:not(.is-disabled) {
       &:hover {
-        background-color: var(--xt-fill-color-light);
+        background-color: transparent;
+        color: var(--xt-button-hover-text-color);
+        border-color: transparent;
       }
       &:active {
-        background-color: var(--xt-fill-color);
-      }
-      &:focus-visible {
-        outline: 2px solid var(--xt-button-outline-color);
-        outline-offset: 1px;
-        transition: outline-offset 0s, outline 0s;
-      }
-
-      &.is-has-bg {
-        background-color: var(--xt-fill-color-light);
-        &:hover {
-          background-color: var(--xt-fill-color);
-        }
-        &:active {
-          background-color: var(--xt-fill-color-dark);
-        }
+        background-color: transparent;
+        color: var(--xt-button-active-text-color);
+        border-color: transparent;
       }
     }
   }
@@ -350,18 +340,14 @@
     }
   }
 
-  // 纯文字按钮变体
+  // 纯文字按钮变体（与 is-text 语义一致，保留兼容）
   &.xt-button--text {
     border-color: transparent;
     background: transparent;
     color: var(--xt-color-primary);
-    padding-left: 0;
-    padding-right: 0;
 
     &.is-disabled {
       color: var(--xt-button-disabled-text-color);
-      background-color: transparent !important;
-      border-color: transparent !important;
     }
     &:not(.is-disabled) {
       &:hover {
@@ -401,9 +387,7 @@
   --xt-button-disabled-bg-color: var(--xt-color-primary-light-5);
   --xt-button-disabled-border-color: var(--xt-color-primary-light-5);
 
-  &.is-plain,
-  &.is-text,
-  &.is-link {
+  &.is-plain {
     --xt-button-text-color: var(--xt-color-primary);
     --xt-button-bg-color: var(--xt-color-primary-light-9);
     --xt-button-border-color: var(--xt-color-primary-light-5);
@@ -411,13 +395,40 @@
     --xt-button-hover-bg-color: var(--xt-color-primary);
     --xt-button-hover-border-color: var(--xt-color-primary);
     --xt-button-active-text-color: var(--xt-color-white);
-
+    --xt-button-active-bg-color: var(--xt-color-primary);
+    --xt-button-active-border-color: var(--xt-color-primary);
+  }
+  &.is-text {
+    --xt-button-text-color: var(--xt-color-primary);
+    --xt-button-hover-text-color: var(--xt-color-primary-light-3);
+    --xt-button-active-text-color: var(--xt-color-primary-dark-2);
+    --xt-button-bg-color: transparent;
+    --xt-button-border-color: transparent;
+    --xt-button-hover-bg-color: transparent;
+    --xt-button-active-bg-color: transparent;
+  }
+  &.is-link {
+    --xt-button-text-color: var(--xt-color-primary);
+    --xt-button-hover-text-color: var(--xt-color-primary-light-3);
+    --xt-button-active-text-color: var(--xt-color-primary-dark-2);
+    --xt-button-bg-color: transparent;
+    --xt-button-border-color: transparent;
+    --xt-button-hover-bg-color: transparent;
+    --xt-button-active-bg-color: transparent;
+  }
+  &.is-plain {
     &.is-disabled {
       color: var(--xt-color-primary-light-5);
       background-color: var(--xt-color-primary-light-9);
       border-color: var(--xt-color-primary-light-8);
     }
   }
+  &.is-text,
+  &.is-link {
+    &.is-disabled {
+      color: var(--xt-color-primary-light-5);
+    }
+  }
 
   &.is-dashed {
     --xt-button-text-color: var(--xt-color-primary);
@@ -455,9 +466,7 @@
   --xt-button-disabled-bg-color: var(--xt-color-success-light-5);
   --xt-button-disabled-border-color: var(--xt-color-success-light-5);
 
-  &.is-plain,
-  &.is-text,
-  &.is-link {
+  &.is-plain {
     --xt-button-text-color: var(--xt-color-success);
     --xt-button-bg-color: var(--xt-color-success-light-9);
     --xt-button-border-color: var(--xt-color-success-light-5);
@@ -465,13 +474,40 @@
     --xt-button-hover-bg-color: var(--xt-color-success);
     --xt-button-hover-border-color: var(--xt-color-success);
     --xt-button-active-text-color: var(--xt-color-white);
-
+    --xt-button-active-bg-color: var(--xt-color-success);
+    --xt-button-active-border-color: var(--xt-color-success);
+  }
+  &.is-text {
+    --xt-button-text-color: var(--xt-color-success);
+    --xt-button-hover-text-color: var(--xt-color-success-light-3);
+    --xt-button-active-text-color: var(--xt-color-success-dark-2);
+    --xt-button-bg-color: transparent;
+    --xt-button-border-color: transparent;
+    --xt-button-hover-bg-color: transparent;
+    --xt-button-active-bg-color: transparent;
+  }
+  &.is-link {
+    --xt-button-text-color: var(--xt-color-success);
+    --xt-button-hover-text-color: var(--xt-color-success-light-3);
+    --xt-button-active-text-color: var(--xt-color-success-dark-2);
+    --xt-button-bg-color: transparent;
+    --xt-button-border-color: transparent;
+    --xt-button-hover-bg-color: transparent;
+    --xt-button-active-bg-color: transparent;
+  }
+  &.is-plain {
     &.is-disabled {
       color: var(--xt-color-success-light-5);
       background-color: var(--xt-color-success-light-9);
       border-color: var(--xt-color-success-light-8);
     }
   }
+  &.is-text,
+  &.is-link {
+    &.is-disabled {
+      color: var(--xt-color-success-light-5);
+    }
+  }
 
   &.is-dashed {
     --xt-button-text-color: var(--xt-color-success);
@@ -509,9 +545,7 @@
   --xt-button-disabled-bg-color: var(--xt-color-warning-light-5);
   --xt-button-disabled-border-color: var(--xt-color-warning-light-5);
 
-  &.is-plain,
-  &.is-text,
-  &.is-link {
+  &.is-plain {
     --xt-button-text-color: var(--xt-color-warning);
     --xt-button-bg-color: var(--xt-color-warning-light-9);
     --xt-button-border-color: var(--xt-color-warning-light-5);
@@ -519,13 +553,38 @@
     --xt-button-hover-bg-color: var(--xt-color-warning);
     --xt-button-hover-border-color: var(--xt-color-warning);
     --xt-button-active-text-color: var(--xt-color-white);
-
+    --xt-button-active-bg-color: var(--xt-color-warning);
+    --xt-button-active-border-color: var(--xt-color-warning);
     &.is-disabled {
       color: var(--xt-color-warning-light-5);
       background-color: var(--xt-color-warning-light-9);
       border-color: var(--xt-color-warning-light-8);
     }
   }
+  &.is-text {
+    --xt-button-text-color: var(--xt-color-warning);
+    --xt-button-hover-text-color: var(--xt-color-warning-light-3);
+    --xt-button-active-text-color: var(--xt-color-warning-dark-2);
+    --xt-button-bg-color: transparent;
+    --xt-button-border-color: transparent;
+    --xt-button-hover-bg-color: transparent;
+    --xt-button-active-bg-color: transparent;
+    &.is-disabled {
+      color: var(--xt-color-warning-light-5);
+    }
+  }
+  &.is-link {
+    --xt-button-text-color: var(--xt-color-warning);
+    --xt-button-hover-text-color: var(--xt-color-warning-light-3);
+    --xt-button-active-text-color: var(--xt-color-warning-dark-2);
+    --xt-button-bg-color: transparent;
+    --xt-button-border-color: transparent;
+    --xt-button-hover-bg-color: transparent;
+    --xt-button-active-bg-color: transparent;
+    &.is-disabled {
+      color: var(--xt-color-warning-light-5);
+    }
+  }
 
   &.is-dashed {
     --xt-button-text-color: var(--xt-color-warning);
@@ -563,9 +622,7 @@
   --xt-button-disabled-bg-color: var(--xt-color-danger-light-5);
   --xt-button-disabled-border-color: var(--xt-color-danger-light-5);
 
-  &.is-plain,
-  &.is-text,
-  &.is-link {
+  &.is-plain {
     --xt-button-text-color: var(--xt-color-danger);
     --xt-button-bg-color: var(--xt-color-danger-light-9);
     --xt-button-border-color: var(--xt-color-danger-light-5);
@@ -573,13 +630,38 @@
     --xt-button-hover-bg-color: var(--xt-color-danger);
     --xt-button-hover-border-color: var(--xt-color-danger);
     --xt-button-active-text-color: var(--xt-color-white);
-
+    --xt-button-active-bg-color: var(--xt-color-danger);
+    --xt-button-active-border-color: var(--xt-color-danger);
     &.is-disabled {
       color: var(--xt-color-danger-light-5);
       background-color: var(--xt-color-danger-light-9);
       border-color: var(--xt-color-danger-light-8);
     }
   }
+  &.is-text {
+    --xt-button-text-color: var(--xt-color-danger);
+    --xt-button-hover-text-color: var(--xt-color-danger-light-3);
+    --xt-button-active-text-color: var(--xt-color-danger-dark-2);
+    --xt-button-bg-color: transparent;
+    --xt-button-border-color: transparent;
+    --xt-button-hover-bg-color: transparent;
+    --xt-button-active-bg-color: transparent;
+    &.is-disabled {
+      color: var(--xt-color-danger-light-5);
+    }
+  }
+  &.is-link {
+    --xt-button-text-color: var(--xt-color-danger);
+    --xt-button-hover-text-color: var(--xt-color-danger-light-3);
+    --xt-button-active-text-color: var(--xt-color-danger-dark-2);
+    --xt-button-bg-color: transparent;
+    --xt-button-border-color: transparent;
+    --xt-button-hover-bg-color: transparent;
+    --xt-button-active-bg-color: transparent;
+    &.is-disabled {
+      color: var(--xt-color-danger-light-5);
+    }
+  }
 
   &.is-dashed {
     --xt-button-text-color: var(--xt-color-danger);
@@ -617,9 +699,7 @@
   --xt-button-disabled-bg-color: var(--xt-color-info-light-5);
   --xt-button-disabled-border-color: var(--xt-color-info-light-5);
 
-  &.is-plain,
-  &.is-text,
-  &.is-link {
+  &.is-plain {
     --xt-button-text-color: var(--xt-color-info);
     --xt-button-bg-color: var(--xt-color-info-light-9);
     --xt-button-border-color: var(--xt-color-info-light-5);
@@ -627,14 +707,38 @@
     --xt-button-hover-bg-color: var(--xt-color-info);
     --xt-button-hover-border-color: var(--xt-color-info);
     --xt-button-active-text-color: var(--xt-color-white);
-
+    --xt-button-active-bg-color: var(--xt-color-info);
+    --xt-button-active-border-color: var(--xt-color-info);
     &.is-disabled {
       color: var(--xt-color-info-light-5);
       background-color: var(--xt-color-info-light-9);
       border-color: var(--xt-color-info-light-8);
     }
   }
-
+  &.is-text {
+    --xt-button-text-color: var(--xt-color-info);
+    --xt-button-hover-text-color: var(--xt-color-info-light-3);
+    --xt-button-active-text-color: var(--xt-color-info-dark-2);
+    --xt-button-bg-color: transparent;
+    --xt-button-border-color: transparent;
+    --xt-button-hover-bg-color: transparent;
+    --xt-button-active-bg-color: transparent;
+    &.is-disabled {
+      color: var(--xt-color-info-light-5);
+    }
+  }
+  &.is-link {
+    --xt-button-text-color: var(--xt-color-info);
+    --xt-button-hover-text-color: var(--xt-color-info-light-3);
+    --xt-button-active-text-color: var(--xt-color-info-dark-2);
+    --xt-button-bg-color: transparent;
+    --xt-button-border-color: transparent;
+    --xt-button-hover-bg-color: transparent;
+    --xt-button-active-bg-color: transparent;
+    &.is-disabled {
+      color: var(--xt-color-info-light-5);
+    }
+  }
   &.is-dashed {
     --xt-button-text-color: var(--xt-color-info);
     --xt-button-bg-color: var(--xt-color-info-light-9);

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

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

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

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

package/src/components/xt-config-provider/index.js

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

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

@@ -1,2 +1,8 @@
-import XtFlexBox from './index.vue'
-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

@@ -4,15 +4,6 @@
   display: flex;
 }
 
-.xt-flex-box.flex.direction-row > .flex,
-.xt-flex-box.flex.direction-row-reverse > .flex {
-  width: 100%;
-}
-
-.xt-flex-box.flex.direction-column > .flex,
-.xt-flex-box.flex.direction-column-reverse > .flex {
-  height: 100%;
-}
 
 .xt-flex-box.is-inline {
   display: inline-flex;

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

@@ -1,2 +1,8 @@
-import XtGridBox from './index.vue'
-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-item/index.js

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

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

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