xt-element-ui 1.0.1 → 1.0.3

package/src/index.js

@@ -1,13 +1,16 @@
 // 导入 Vue
 import Vue from 'vue'
 
+// 在导入 Element UI 之前，先将 Vue 设置为全局变量
+if (typeof window !== 'undefined') {
+  window.Vue = Vue
+}
+
 // 导入 Element UI 并注册
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 
 // 导入组件
-
-
 import Button from './components/button'
 import Input from './components/input'
 
@@ -31,7 +34,6 @@ const install = function (Vue) {
   })
 }
 
-
 // 支持全局 script 标签引入
 if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue)
@@ -50,25 +52,119 @@ export default {
 // 导出 Vue 和 ElementUI 以便用户使用
 export { Vue, ElementUI }
 
-// 导出主题切换工具函数
+// 默认配置
+const defaultConfig = {
+  theme: 'light',
+  size: 'medium',
+  primaryColor: '#1890ff'
+}
+
+// 当前配置
+let currentConfig = { ...defaultConfig }
+
+// 配置变更事件处理
+const configChangeListeners = []
+
+const emitConfigChange = function(key, value) {
+  configChangeListeners.forEach(listener => {
+    listener(key, value)
+  })
+}
+
+// 获取所有配置
+export const getConfig = function() {
+  return { ...currentConfig }
+}
+
+// 设置全局配置
+export const setConfig = function(config) {
+  if (typeof config !== 'object' || config === null) {
+    console.warn('[XtElementUI] setConfig 必须传入对象参数')
+    return
+  }
+
+  if (config.theme !== undefined) {
+    setTheme(config.theme)
+  }
+  if (config.size !== undefined) {
+    setSize(config.size)
+  }
+  if (config.primaryColor !== undefined) {
+    setPrimaryColor(config.primaryColor)
+  }
+}
+
+// 设置主题
 export const setTheme = function(theme) {
   const validThemes = ['light', 'dark', 'compact']
-  if (validThemes.includes(theme)) {
-    document.documentElement.setAttribute('data-theme', theme)
+  if (!validThemes.includes(theme)) {
+    console.warn(`[XtElementUI] 无效的主题值: ${theme}，可选值: ${validThemes.join(', ')}`)
+    return
   }
+  
+  currentConfig.theme = theme
+  document.documentElement.setAttribute('data-theme', theme)
+  emitConfigChange('theme', theme)
 }
 
+// 设置字体大小
 export const setSize = function(size) {
   const validSizes = ['small', 'medium', 'large']
-  if (validSizes.includes(size)) {
-    document.documentElement.setAttribute('data-size', size)
+  if (!validSizes.includes(size)) {
+    console.warn(`[XtElementUI] 无效的大小值: ${size}，可选值: ${validSizes.join(', ')}`)
+    return
+  }
+  
+  currentConfig.size = size
+  document.documentElement.setAttribute('data-size', size)
+  emitConfigChange('size', size)
+}
+
+// 设置主色调
+export const setPrimaryColor = function(color) {
+  // 简单的颜色格式验证
+  const colorRegex = /^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{3}$/
+  if (!colorRegex.test(color)) {
+    console.warn(`[XtElementUI] 无效的颜色值: ${color}，请使用十六进制颜色格式，如 #1890ff`)
+    return
   }
+  
+  currentConfig.primaryColor = color
+  document.documentElement.style.setProperty('--xt-color-primary', color)
+  emitConfigChange('primaryColor', color)
 }
 
+// 获取当前主题
 export const getTheme = function() {
-  return document.documentElement.getAttribute('data-theme') || 'light'
+  return currentConfig.theme
 }
 
+// 获取当前字体大小
 export const getSize = function() {
-  return document.documentElement.getAttribute('data-size') || 'medium'
+  return currentConfig.size
+}
+
+// 获取当前主色调
+export const getPrimaryColor = function() {
+  return currentConfig.primaryColor
+}
+
+// 重置为默认配置
+export const resetConfig = function() {
+  setConfig(defaultConfig)
+}
+
+// 监听配置变更
+export const onConfigChange = function(listener) {
+  if (typeof listener === 'function') {
+    configChangeListeners.push(listener)
+    return function() {
+      const index = configChangeListeners.indexOf(listener)
+      if (index > -1) {
+        configChangeListeners.splice(index, 1)
+      }
+    }
+  } else {
+    console.warn('[XtElementUI] onConfigChange 必须传入函数')
+  }
 }

package/docs/.vuepress/config.js

@@ -1,23 +0,0 @@
-module.exports = {
-    title: '组件文档',
-    themeConfig: {
-      nav: [
-        { text: '首页', link: '/' },
-        { text: '组件', link: '/components/base/button' }
-      ],
-      sidebarDepth: 2,
-      nextLinks: true,
-      prevLinks: true,
-      // 直接写完整路径，最稳、最简单、不踩坑
-      sidebar: [
-        { 
-          title: '基础组件', 
-          path: '/components/base/button',
-          children: [
-            ['/components/base/button', '按钮'], 
-            ['/components/base/input', '输入框']
-          ] 
-        }
-      ]
-    }
-  }

package/docs/.vuepress/enhanceApp.js

@@ -1,8 +0,0 @@
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
-import XTUI from '../../src/index'
-
-export default ({ Vue }) => {
-  Vue.use(ElementUI)
-  Vue.use(XTUI)
-}

package/docs/README.md

@@ -1,6 +0,0 @@
----
-home: true
-title: XT-Element-UI文档
----
-# XT-Element-UI
-基于Vue2+ElementUI组件库

package/docs/components/base/button.md

@@ -1,5 +0,0 @@
-# Button 按钮
-基于el-button二次封装按钮组件
-
-## 基础用法
-<xt-button text="默认按钮"></xt-button>

package/docs/components/base/input.md

@@ -1,22 +0,0 @@
-# Input 输入框
-
-基于 el-input 封装的统一输入框
-
-## 基础用法
-<xt-input v-model="inputVal" placeholder="请输入内容"></xt-input>
-
-<script>
-export default {
-  data() {
-    return {
-      inputVal: ''
-    }
-  }
-}
-</script>
-
-## 属性
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| v-model | 绑定值 | string / number | - |
-| placeholder | 占位符 | string | '请输入内容' |

package/examples/App.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <xt-button>按钮</xt-button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'App',
-}
-</script>
-<style scoped>
-</style>

package/examples/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Xt Element UI 示例</title>
-</head>
-<body>
-    <div id="app"></div>
-</body>
-</html>

package/examples/main.js

@@ -1,9 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-import xtElementUI from '../src/index.js'
-
-Vue.use(xtElementUI)
-
-new Vue({
-  render: h => h(App)
-}).$mount('#app')

package/vue.config.js

@@ -1,46 +0,0 @@
-module.exports = {
-    // 关闭生产环境 sourcemap
-    productionSourceMap: false,
-  // 单页面标准入口配置
-    pages: {
-      index: {
-        entry: './examples/main.js', // 你的项目启动入口
-        template: './examples/index.html',
-        filename: 'index.html'
-      }
-    },
-    css: {
-      // 开启 CSS 提取（打包成独立 css 文件，给 npm 使用）
-      extract: true,
-      // 启用 CSS sourcemap
-      sourceMap: false,
-      // 给 scss 传入全局变量（主题色、字体大小）
-      loaderOptions: {
-        scss: {
-          // 这里可以自动注入全局 SCSS 变量文件（非常重要）
-          additionalData: `@import "~@/styles/variables.scss";`
-        }
-      }
-    },
-  
-    // 组件库打包配置
-    chainWebpack: (config) => {
-      if (process.env.NODE_ENV === "production") {
-        // 入口改为组件库总入口
-        config.entry("index").clear().add("./src/index.js").end();
-  
-        // 输出 UMD 格式（支持 npm / script 引入）
-        config.output
-          .filename("index.js")
-          .library("xt-element-ui")
-          .libraryTarget("umd")
-          .umdNamedDefine(true);
-        
-        // 只在生产环境配置 externals（打包组件库时不打包 Vue 和 Element UI）
-        config.externals({
-          vue: "Vue",
-          "element-ui": "ElementUI",
-        });
-      }
-    },
-  };