xt-element-ui 1.3.4 → 2.0.0

package/docs/components/extend/ex-upload.md

@@ -1,134 +0,0 @@
-## ExUpload 图片上传
-
-基于 ElementUI `el-upload` 封装，支持图片上传、预览、删除，以及多图管理。
-
-## 基础用法
-
-设置 `action` 为上传接口路径，`base-url` 为图片基础地址，`v-model` 绑定逗号分隔的图片路径字符串：
-
-::: demo 图片上传基础示例
-```vue
-<template>
-  <ex-upload
-    v-model="imgList"
-    action="/api/upload"
-    base-url="https://example.com"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      imgList: ''
-    }
-  }
-}
-</script>
-```
-:::
-
-## 多图上传
-
-设置 `multiple` 开启多图上传，通过 `limit` 限制最多上传数量：
-
-::: demo 多图上传示例
-```vue
-<template>
-  <ex-upload
-    v-model="imgList"
-    action="/api/upload"
-    base-url="https://example.com"
-    multiple
-    :limit="5"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      imgList: ''
-    }
-  }
-}
-</script>
-```
-:::
-
-## 图片大小
-
-通过 `size` 属性设置显示尺寸：
-
-::: demo 图片尺寸示例
-```vue
-<template>
-  <div>
-    <ex-upload v-model="img" action="/api/upload" base-url="https://example.com" />
-    <div style="margin-top: 20px">
-      <ex-upload v-model="img" action="/api/upload" base-url="https://example.com" size="big" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      img: ''
-    }
-  }
-}
-</script>
-```
-:::
-
-## 禁用状态
-
-`disabled` 属性可禁用上传和删除功能：
-
-::: demo 禁用上传示例
-```vue
-<template>
-  <ex-upload
-    v-model="img"
-    action="/api/upload"
-    base-url="https://example.com"
-    disabled
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      img: 'demo.jpg'
-    }
-  }
-}
-</script>
-```
-:::
-
-## Attributes
-
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-|------|------|------|--------|--------|
-| src | 当前图片列表，以英文逗号分隔（v-model） | string | — | '' |
-| action | 上传接口路径，与 base-url 拼接 | string | — | '' |
-| base-url | 图片基础地址（服务端域名） | string | — | '' |
-| multiple | 是否支持多选 | boolean | — | false |
-| limit | 最多上传数量 | number | — | 5 |
-| accept | 允许的文件类型 | string | — | .jpg,.jpeg,.png |
-| auto-upload | 是否在选取文件后立即上传 | boolean | — | true |
-| disabled | 是否禁用 | boolean | — | false |
-| size | 图片展示尺寸 | string | big | — |
-| data | 上传时附带的额外参数 | object | — | {} |
-| all-file-list | 用于图库预览的图片列表 | array | — | — |
-| before-emit-data | 对上传结果进行处理的回调函数，返回 `false` 代表上传失败 | function(res, file, type) | — | (内部函数) |
-
-## Events
-
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| change | 图片列表变化时触发 | 以英文逗号分隔的图片路径字符串 |

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

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

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

@@ -1,67 +0,0 @@
-<template>
-  <el-button 
-    class="ex-button" 
-    :class="buttonClasses"
-    v-bind="$attrs" 
-    @click="handleClick"
-  >
-    <slot></slot>
-  </el-button>
-</template>
-<script>
-export default {
-  name: 'ExButton',
-  inheritAttrs: false,
-  inject: {
-    xtConfig: {
-      default: () => ({
-        theme: 'light',
-        size: 'medium',
-        primaryColor: '#1890ff'
-      })
-    }
-  },
-  props: {
-    type: {
-      type: String,
-      default: 'default',
-      validator: (val) => ['default', 'primary', 'success', 'warning', 'danger'].includes(val)
-    },
-    throttle: {
-      type: Number,
-      default: 0
-    },
-    size: {
-      type: String,
-      default: null,
-      validator: (val) => !val || ['mini', 'small', 'medium', 'large'].includes(val)
-    }
-  },
-  data() {
-    return {
-      lastClickTime: 0
-    }
-  },
-  computed: {
-    finalSize() {
-      // 优先使用组件自身的 size，其次继承 XtConfigProvider 的 size，最后使用默认值
-      return this.size || this.xtConfig.size || 'medium'
-    },
-    buttonClasses() {
-      return [
-        `ex-button-${this.finalSize}`,
-        `ex-button-${this.type}`
-      ]
-    }
-  },
-  methods: {
-    handleClick() {
-      if (this.throttle > 0 && Date.now() - this.lastClickTime < this.throttle) {
-        return
-      }
-      this.lastClickTime = Date.now()
-      this.$emit('click')
-    }
-  }
-}
-</script>

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

@@ -1,67 +0,0 @@
-@import '../../../styles/variables.scss';
-
-.ex-button {
-  padding: 8px 16px;
-  border-radius: var(--xt-border-radius-base);
-  font-size: var(--xt-font-size-base);
-  border: 1px solid var(--xt-border-color, #dcdfe6);
-  transition: all 0.3s;
-  &-default{
-    background-color: var(--el-bg-color-page, #ffffff);
-    border: 1px solid var(--xt-border-color, #303133);
-    color: var(--el-text-color-primary, #303133);
-  }
-  &-primary{
-    background-color: var(--el-color-primary, #ffffff);
-    border-color: var(--el-color-primary, #ffffff);
-    color: var(--el-text-color-white, #ffffff);
-  }
-  &-success{
-    background-color: var(--el-color-success, #ffffff);
-    border-color: var(--el-color-success, #ffffff);
-    color: var(--el-text-color-white, #ffffff);
-  }
-  &-warning{
-    background-color: var(--el-color-warning, #ffffff);
-    border-color: var(--el-color-warning, #ffffff);
-    color: var(--el-text-color-white, #ffffff);
-  }
-  &-danger{
-    background-color: var(--el-color-danger, #ffffff);
-    border-color: var(--el-color-danger, #ffffff);
-    color: var(--el-text-color-white, #ffffff);
-  }
-  &-info{
-    background-color: var(--el-color-info, #ffffff);
-    border-color: var(--el-color-info, #ffffff);
-    color: var(--el-text-color-white, #ffffff);
-  }
-
-  &:hover {
-    opacity: 0.8;
-  }
-}
-
-/* small size - 字体大小 12px */
-.ex-button-mini {
-  padding: 2px 4px;
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-extra-small);
-}
-
-/* small size - 字体大小 14px */
-.ex-button-small {
-  padding: 5px 10px;
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-base);
-}
-
-/* medium size - 字体大小 16px */
-.ex-button-medium {
-  padding: 8px 16px;
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-medium);
-}
-
-/* large size - 字体大小 18px */
-.ex-button-large {
-  padding: 11px 22px;
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-large);
-}

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

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

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

@@ -1,68 +0,0 @@
-<template>
-  <el-card 
-    class="ex-card" 
-    :class="cardClasses"
-    v-bind="$attrs"
-  >
-    <template #header v-if="$slots.header || title">
-      <slot name="header">{{ title }}</slot>
-    </template>
-    <slot></slot>
-  </el-card>
-</template>
-
-<script>
-export default {
-  name: 'ExCard',
-  inheritAttrs: false,
-  inject: {
-    xtConfig: {
-      default: () => ({
-        theme: 'light',
-        size: 'medium',
-        primaryColor: '#1890ff'
-      })
-    }
-  },
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    shadow: {
-      type: String,
-      default: 'always',
-      validator: (val) => ['always', 'hover', 'never'].includes(val)
-    },
-    bordered: {
-      type: Boolean,
-      default: true
-    },
-    bodyClass: {
-      type: String,
-      default: ''
-    },
-    size: {
-      type: String,
-      default: null,
-      validator: (val) => !val || ['small', 'medium', 'large'].includes(val)
-    }
-  },
-  computed: {
-    finalSize() {
-      // 优先使用组件自身的 size，其次继承 XtConfigProvider 的 size，最后使用默认值
-      return this.size || this.xtConfig.size || 'medium'
-    },
-    cardClasses() {
-      return [
-        `ex-card-${this.shadow}`,
-        `ex-card-${this.finalSize}`,
-        {
-          'ex-card-no-border': !this.bordered,
-          [this.bodyClass]: this.bodyClass
-        }
-      ]
-    }
-  }
-}
-</script>

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

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

package/src/config/element-registry.js

@@ -1,136 +0,0 @@
-/**
- * XT-UI 组件注册配置文件
- * 用于统一管理 Element UI 组件的自动注册配置
- */
-
-// 已存在的 Ex 组件列表（不需要从 Element UI 自动注册）
-export const existingExComponents = [
-  'Button',       // ExButton 已存在
-  'Card',         // ExCard 已存在
-  'Input',        // XtInput 已存在（用户要求不自动注册）
-  'Table',        // ExTable 已存在（在 ex-table 目录中）
-  'TableColumn',  // ExColumn 已存在（在 ex-table 目录中）
-  'Chart'         // ExChart 已存在
-]
-
-// Element UI 组件列表（用于自动注册为 Ex 开头，但排除已存在的组件）
-export const elementComponentNames = [
-  'Autocomplete',
-  'Avatar',
-  'Backtop',
-  'Badge',
-  'Breadcrumb',
-  'BreadcrumbItem',
-  'ButtonGroup',
-  'Calendar',
-  'Carousel',
-  'CarouselItem',
-  'Cascader',
-  'Checkbox',
-  'CheckboxButton',
-  'CheckboxGroup',
-  'Col',
-  'Collapse',
-  'CollapseItem',
-  'ColorPicker',
-  'Container',
-  'DatePicker',
-  'Dialog',
-  'Divider',
-  'Drawer',
-  'Dropdown',
-  'DropdownItem',
-  'DropdownMenu',
-  'Footer',
-  'Form',
-  'FormItem',
-  'Header',
-  'Icon',
-  'Image',
-  'InputNumber',
-  'Link',
-  'Main',
-  'Menu',
-  'MenuItem',
-  'MenuItemGroup',
-  'Option',
-  'OptionGroup',
-  'Pagination',
-  'Popconfirm',
-  'Popover',
-  'Progress',
-  'Radio',
-  'RadioButton',
-  'RadioGroup',
-  'Rate',
-  'Row',
-  'Scrollbar',
-  'Select',
-  'Slider',
-  'Step',
-  'Steps',
-  'Submenu',
-  'Switch',
-  'TabPane',
-  'Tabs',
-  'Tag',
-  'TimePicker',
-  'TimeSelect',
-  'Timeline',
-  'TimelineItem',
-  'Tooltip',
-  'Transfer',
-  'Tree',
-  'Upload'
-]
-
-// Element UI 指令列表
-export const elementDirectives = [
-  'Loading',
-  'Popover',
-  'Tooltip'
-]
-
-// 注册 Element UI 组件为 Ex 开头的工具函数
-export function registerElementExComponents(Vue, ElementUI) {
-  if (!ElementUI) {
-    console.warn('[XT-UI] ElementUI not found, skipping Ex- prefix registration')
-    return
-  }
-
-  elementComponentNames.forEach(componentName => {
-    // 如果组件已存在于排除列表中，则跳过
-    if (existingExComponents.includes(componentName)) {
-      console.log(`[XT-UI] ${componentName} already exists, skipping registration`)
-      return
-    }
-    
-    const exComponentName = `Ex${componentName}`
-    
-    // 检查是否已经注册过该组件
-    if (Vue.options.components[exComponentName]) {
-      return
-    }
-    
-    // 注册 Element 的组件为 Ex 开头
-    const elementComponent = ElementUI[componentName]
-    if (elementComponent) {
-      Vue.component(exComponentName, elementComponent)
-      console.log(`[XT-UI] Registered Element component as ${exComponentName}`)
-    }
-  })
-}
-
-// 注册 Element UI 指令的工具函数
-export function registerElementDirectives(Vue, ElementUI) {
-  if (!ElementUI) {
-    return
-  }
-
-  elementDirectives.forEach(directiveName => {
-    const directive = ElementUI[directiveName]
-    if (directive && directive.install) {
-      Vue.use(directive)
-    }
-  })
-}