xt-element-ui 1.0.8 → 1.1.0

package/lib/index.umd.min.js

@@ -1 +1 @@
-(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define("xt-element-ui",[],e):"object"===typeof exports?exports["xt-element-ui"]=e():t["xt-element-ui"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"11a3":function(t,e,n){},"27fd":function(t,e,n){t.exports={xtColorPrimary:"#409EFF",xtColorSuccess:"#67C23A",xtColorWarning:"#E6A23C",xtColorDanger:"#F56C6C",xtColorInfo:"#909399",xtColorPrimaryLight3:"#79BBFF",xtColorPrimaryLight5:"#A0CFFF",xtColorPrimaryLight7:"#C6E2FF",xtColorPrimaryLight8:"#D9ECFF",xtColorPrimaryLight9:"#ECF5FF",xtColorTextPrimary:"#303133",xtColorTextRegular:"#606266",xtColorTextSecondary:"#909399",xtColorTextPlaceholder:"#C0C4CC",xtColorTextDisabled:"#C0C4CC",xtColorBgPrimary:"#ffffff",xtColorBgSecondary:"#f5f7fa",xtColorBgHover:"#f5f5f5",xtColorBgContainer:"#f5f7fa",xtColorBgOverlay:"#ffffff",xtColorBorder:"#DCDFE6",xtColorBorderLight:"#E4E7ED",xtColorBorderLighter:"#EBEEF5",xtColorBorderExtraLight:"#F2F6FC",xtFontSizeExtraLarge:"20px",xtFontSizeLarge:"18px",xtFontSizeMedium:"16px",xtFontSizeBase:"14px",xtFontSizeSmall:"13px",xtFontSizeExtraSmall:"12px",xtSpacingXs:"4px",xtSpacingSm:"8px",xtSpacingMd:"12px",xtSpacingLg:"16px",xtSpacingXl:"20px",xtBorderRadiusBase:"4px",xtBorderRadiusSmall:"2px",xtBorderRadiusRound:"20px",xtBorderRadiusCircle:"50%",xtShadowSm:"0 2px 4px rgba(0, 0, 0, 0.04)",xtShadowMd:"0 4px 12px rgba(0, 0, 0, 0.08)",xtShadowLg:"0 8px 24px rgba(0, 0, 0, 0.12)",xtTransitionDuration:"0.3s",xtTransitionDurationFast:"0.2s"}},"3a26":function(t,e,n){},"43ae":function(t,e,n){"use strict";n("3a26")},7876:function(t,e,n){"use strict";n("ec69")},d0ed:function(t,e,n){"use strict";n("11a3")},ec69:function(t,e,n){},fb15:function(t,e,n){"use strict";if(n.r(e),n.d(e,"utils",(function(){return m})),n.d(e,"variables",(function(){return a.a})),n.d(e,"getConfig",(function(){return rt})),n.d(e,"setConfig",(function(){return it})),n.d(e,"setTheme",(function(){return at})),n.d(e,"setSize",(function(){return lt})),n.d(e,"setPrimaryColor",(function(){return ut})),n.d(e,"getTheme",(function(){return ct})),n.d(e,"getSize",(function(){return st})),n.d(e,"getPrimaryColor",(function(){return ft})),n.d(e,"resetConfig",(function(){return dt})),n.d(e,"onConfigChange",(function(){return pt})),"undefined"!==typeof window){var o=window.document.currentScript,r=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(n.p=r[1])}var i=n("27fd"),a=n.n(i);const l={theme:"light",size:"medium",primaryColor:"#1890ff"};let u={...l};const c=[],s=function(t,e){c.forEach(n=>{n(t,e)})},f=function(t){const e=["light","dark","compact"];e.includes(t)?(u.theme=t,document.documentElement.setAttribute("data-theme",t),s("theme",t)):console.warn(`[XtElementUI] 无效的主题值: ${t}，可选值: ${e.join(", ")}`)},d=function(t){const e=["small","medium","large"];e.includes(t)?(u.size=t,document.documentElement.setAttribute("data-size",t),s("size",t)):console.warn(`[XtElementUI] 无效的大小值: ${t}，可选值: ${e.join(", ")}`)},p=function(t){const e=/^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{3}$/;e.test(t)?(u.primaryColor=t,document.documentElement.style.setProperty("--xt-color-primary",t),s("primaryColor",t)):console.warn(`[XtElementUI] 无效的颜色值: ${t}，请使用十六进制颜色格式，如 #1890ff`)};var m={setTheme:f,setSize:d,setPrimaryColor:p},x=function(){var t=this,e=t._self._c;return e("el-button",{on:{click:t.handleClick}},[t._t("default")],2)},C=[],g={name:"XtButton",methods:{handleClick(){this.$emit("click")}}},h=g;function y(t,e,n,o,r,i,a,l){var u,c="function"===typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),o&&(c.functional=!0),i&&(c._scopeId="data-v-"+i),a?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},c._ssrRegister=u):r&&(u=l?function(){r.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:r),u)if(c.functional){c._injectStyles=u;var s=c.render;c.render=function(t,e){return u.call(e),s(t,e)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,u):[u]}return{exports:t,options:c}}var _=y(h,x,C,!1,null,null,null),v=_.exports,b=v,S=function(){var t=this,e=t._self._c;return e("el-input",{attrs:{value:t.value,placeholder:t.placeholder},on:{input:function(e){return t.$emit("input",e)}}})},F=[],E={name:"XtInput",props:{value:[String,Number],placeholder:{type:String,default:"请输入内容"}}},w=E,$=y(w,S,F,!1,null,null,null),B=$.exports,P=B,z=function(){var t=this,e=t._self._c;return e("div",{staticClass:"xt-flex-box",class:t.classAttrs,staticStyle:{gap:"gap"}},[t._t("default")],2)},T=[],A={name:"XtFlex",props:{type:"flex",align:"center",content:"start",direction:"row",wrap:"unset",gap:{}},computed:{classAttrs(){const{inline:t,align:e,wrap:n,direction:o,content:r}=this;return[""+(t?"is-inline":"flex"),`align-${e} content-${r} direction-${o} wrap-${n}`]}}},j=A,X=(n("43ae"),y(j,z,T,!1,null,"28fcf19e",null)),I=X.exports,L=I,O=function(){var t=this,e=t._self._c;return e("div",{staticClass:"xt-card",class:{"no-padding":t.noPadding}},[t.title?e("div",{staticClass:"card_header"},[t._t("title",(function(){return[t._v(t._s(t.title))]}))],2):t._e(),e("div",{staticClass:"card_body"},[t._t("default",(function(){return[e("span",{staticClass:"value"},[t._t("value",(function(){return[t._v(t._s(t.value))]}))],2),e("span",{staticClass:"unit"},[t._v(t._s(t.unit))])]}))],2)])},R=[],U={name:"XtCard",props:{type:{},title:{},value:{},unit:{},icon:{},iconIn:{default:"right"},noPadding:{type:Boolean,default:!1}}},D=U,M=(n("d0ed"),y(D,O,R,!1,null,"444d40a5",null)),k=M.exports,V=k,N=function(){var t=this,e=t._self._c;return"border"==t.iconType?e("FlexBox",{staticClass:"xt-card-item is-border",class:["border"==t.iconType?"is-"+t.type:""],attrs:{content:"between"}},[t.title?e("span",{staticClass:"item_label"},[t._t("label",(function(){return[t._v(t._s(t.label))]}))],2):t._e(),e("span",{staticClass:"item-value"},[t._t("value",(function(){return[t._v(t._s(t.value))]}))],2),e("span",{staticClass:"item_unit"},[t._t("unit",(function(){return[t._v(t._s(t.unit))]}))],2)]):e("FlexBox",{staticClass:"xt-card-item",attrs:{direction:t.direction,content:t.contentAlign}},[t._t("icon",(function(){return[e("el-button",{attrs:{type:t.type,circle:t.circle,round:t.round,plain:"",icon:t.icon}})]})),e("div",{staticClass:"item-value"},[e("span",{staticClass:"value"},[t._t("value",(function(){return[t._v(t._s(t.label))]}))],2),e("div",{staticClass:"unit"},[t._v(t._s(t.value))])])],2)},H=[],W={name:"XtCardItem",components:{FlexBox:I},props:{iconType:{default:"border"},type:{default:"primary"},label:{},value:{},unit:{},icon:{},iconAt:{default:"right"}},data(){return{circle:!1,round:!1}},computed:{contentAlign(){return"center"==this.iconAt?"center":"start"},direction(){const t={left:"row",right:"row-reverse",top:"column",bottom:"column-reverse"};return t[this.iconAt]}}},q=W,G=(n("7876"),y(q,N,H,!1,null,"1100cec5",null)),J=G.exports,K=J;const Q=[b,P,L,V,K],Y=function(t){Y.installed||(Y.installed=!0,Q.forEach(e=>{t.component(e.name,e)}),t.prototype.$utils=m)};"undefined"!==typeof window&&window.Vue&&Y(window.Vue);var Z={install:Y,Button:b,Input:P,FlexBox:L,Card:V,CardItem:K};const tt={theme:"light",size:"medium",primaryColor:"#1890ff"};let et={...tt};const nt=[],ot=function(t,e){nt.forEach(n=>{n(t,e)})},rt=function(){return{...et}},it=function(t){"object"===typeof t&&null!==t?(void 0!==t.theme&&at(t.theme),void 0!==t.size&&lt(t.size),void 0!==t.primaryColor&&ut(t.primaryColor)):console.warn("[XtElementUI] setConfig 必须传入对象参数")},at=function(t){const e=["light","dark"];e.includes(t)?(et.theme=t,document.documentElement.setAttribute("data-theme",t),ot("theme",t)):console.warn(`[XtElementUI] 无效的主题值: ${t}，可选值: ${e.join(", ")}`)},lt=function(t){const e=["small","medium","large"];e.includes(t)?(et.size=t,document.documentElement.setAttribute("data-size",t),ot("size",t)):console.warn(`[XtElementUI] 无效的大小值: ${t}，可选值: ${e.join(", ")}`)},ut=function(t){const e=/^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{3}$/;e.test(t)?(et.primaryColor=t,document.documentElement.style.setProperty("--xt-color-primary",t),ot("primaryColor",t)):console.warn(`[XtElementUI] 无效的颜色值: ${t}，请使用十六进制颜色格式，如 #1890ff`)},ct=function(){return et.theme},st=function(){return et.size},ft=function(){return et.primaryColor},dt=function(){it(tt)},pt=function(t){if("function"===typeof t)return nt.push(t),function(){const e=nt.indexOf(t);e>-1&&nt.splice(e,1)};console.warn("[XtElementUI] onConfigChange 必须传入函数")};e["default"]=Z}})}));
+(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define("xt-element-ui",[],e):"object"===typeof exports?exports["xt-element-ui"]=e():t["xt-element-ui"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s="fb15")}({"72fa":function(t,e,r){},ad4d:function(t,e,r){t.exports={xtColorPrimary:"#1890ff",xtColorSuccess:"#37c3a4",xtColorWarning:"#FFB74D",xtColorDanger:"#EA1D34",xtColorInfo:"#999999",xtColorPrimaryLight3:"#5DB1FF",xtColorPrimaryLight5:"#8CC8FF",xtColorPrimaryLight7:"#BADEFF",xtColorPrimaryLight8:"#D1E9FF",xtColorPrimaryLight9:"#E8F4FF",xtColorTextPrimary:"#303133",xtColorTextRegular:"#606266",xtColorTextSecondary:"#909399",xtColorTextPlaceholder:"#C0C4CC",xtColorTextDisabled:"#C0C4CC",xtColorBgPrimary:"#ffffff",xtColorBgSecondary:"#f5f7fa",xtColorBgHover:"#f5f5f5",xtColorBgContainer:"#f5f7fa",xtColorBgOverlay:"#ffffff",xtColorBorder:"#DCDFE6",xtColorBorderLight:"#E4E7ED",xtColorBorderLighter:"#EBEEF5",xtColorBorderExtraLight:"#F2F6FC",xtFontSizeExtraLarge:"20px",xtFontSizeLarge:"18px",xtFontSizeMedium:"16px",xtFontSizeBase:"14px",xtFontSizeSmall:"13px",xtFontSizeExtraSmall:"12px",xtSpacingXs:"4px",xtSpacingSm:"8px",xtSpacingMd:"12px",xtSpacingLg:"16px",xtSpacingXl:"20px",xtBorderRadiusBase:"4px",xtBorderRadiusSmall:"2px",xtBorderRadiusRound:"20px",xtBorderRadiusCircle:"50%",xtShadowSm:"0 2px 4px rgba(0, 0, 0, 0.04)",xtShadowMd:"0 4px 12px rgba(0, 0, 0, 0.08)",xtShadowLg:"0 8px 24px rgba(0, 0, 0, 0.12)",xtTransitionDuration:"0.3s",xtTransitionDurationFast:"0.2s"}},d67a:function(t,e,r){},fb15:function(t,e,r){"use strict";if(r.r(e),r.d(e,"utils",(function(){return vt})),r.d(e,"variables",(function(){return l.a})),r.d(e,"getConfig",(function(){return _t})),r.d(e,"setConfig",(function(){return St})),r.d(e,"getTheme",(function(){return Ft})),r.d(e,"getSize",(function(){return Et})),r.d(e,"getPrimaryColor",(function(){return Bt})),r.d(e,"resetConfig",(function(){return wt})),r.d(e,"onConfigChange",(function(){return zt})),r.d(e,"setTheme",(function(){return Pt})),r.d(e,"setSize",(function(){return Tt})),r.d(e,"setPrimaryColor",(function(){return jt})),"undefined"!==typeof window){var n=window.document.currentScript,o=n&&n.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);o&&(r.p=o[1])}r("72fa"),r("d67a");var i=r("ad4d"),l=r.n(i);const a={theme:"white",size:"medium",primaryColor:"#1890ff"};let s={...a};console.log("[XtElementUI] utils initialized with currentConfig:",s);const c=[],u=function(t,e){c.forEach(r=>{r(t,e)})},d=function(){return{...s}},f=function(t){"object"===typeof t&&null!==t?(void 0!==t.theme&&p(t.theme),void 0!==t.size&&m(t.size),void 0!==t.primaryColor&&h(t.primaryColor)):console.warn("[XtElementUI] setConfig 必须传入对象参数")},p=function(t){const e=["white","dark"];if(!e.includes(t))return void console.warn(`[XtElementUI] 无效的主题值: ${t}，可选值: ${e.join(", ")}`);s.theme=t;const r=document.documentElement;"dark"===t?r.setAttribute("data-theme","dark"):r.removeAttribute("data-theme"),u("theme",t)},m=function(t){const e=["small","medium","large"];e.includes(t)?(s.size=t,document.documentElement.setAttribute("data-size",t),u("size",t)):console.warn(`[XtElementUI] 无效的大小值: ${t}，可选值: ${e.join(", ")}`)};function g(t){const e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}function x(t,e,r){return"#"+[t,e,r].map(t=>{const e=t.toString(16);return 1===e.length?"0"+e:e}).join("")}function y(t,e){const r=g(t);if(!r)return t;const n=Math.round(2.55*e),o=Math.min(255,r.r+n),i=Math.min(255,r.g+n),l=Math.min(255,r.b+n);return x(o,i,l)}const h=function(t){const e=/^#[0-9A-Fa-f]{3}$|^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{8}$/;if(!e.test(t))return void console.warn(`[XtElementUI] 无效的颜色值: ${t}，请使用十六进制颜色格式，如 #1890ff`);let r=t;4===t.length?r="#"+t[1]+t[1]+t[2]+t[2]+t[3]+t[3]:9===t.length&&(r=t.substring(0,7)),s.primaryColor=r,document.documentElement.style.setProperty("--xt-color-primary",r),document.documentElement.style.setProperty("--xt-color-primary-light-3",y(r,30)),document.documentElement.style.setProperty("--xt-color-primary-light-5",y(r,50)),document.documentElement.style.setProperty("--xt-color-primary-light-7",y(r,70)),document.documentElement.style.setProperty("--xt-color-primary-light-8",y(r,80)),document.documentElement.style.setProperty("--xt-color-primary-light-9",y(r,90)),u("primaryColor",r),console.log("[XtElementUI] 主色调已设置为:",r)},C=function(){return s.theme},b=function(){return s.size},v=function(){return s.primaryColor},_=function(){f(a)},S=function(t){if("function"===typeof t)return c.push(t),function(){const e=c.indexOf(t);e>-1&&c.splice(e,1)};console.warn("[XtElementUI] onConfigChange 必须传入函数")};var F={setTheme:p,setSize:m,setPrimaryColor:h,getConfig:d,setConfig:f,getTheme:C,getSize:b,getPrimaryColor:v,resetConfig:_,onConfigChange:S},E=function(){var t=this,e=t._self._c;return e("button",{staticClass:"xt-button",class:["xt-button--"+t.type,t.size?"xt-button--"+t.size:"",{"xt-button--plain":t.plain,"is-disabled":t.disabled,"is-round":t.round}],attrs:{disabled:t.disabled},on:{click:t.handleClick}},[t._t("default")],2)},B=[],w={name:"XtButton",props:{type:{type:String,default:"default",validator:t=>["default","primary","success","warning","danger"].includes(t)},size:{type:String,default:"",validator:t=>["","large","medium","small","mini"].includes(t)},plain:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},round:{type:Boolean,default:!1}},methods:{handleClick(){this.disabled||this.$emit("click")}}},z=w;function P(t,e,r,n,o,i,l,a){var s,c="function"===typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=r,c._compiled=!0),n&&(c.functional=!0),i&&(c._scopeId="data-v-"+i),l?(s=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(l)},c._ssrRegister=s):o&&(s=a?function(){o.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:o),s)if(c.functional){c._injectStyles=s;var u=c.render;c.render=function(t,e){return s.call(e),u(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,s):[s]}return{exports:t,options:c}}var T=P(z,E,B,!1,null,null,null),j=T.exports,I=j,$=function(){var t=this,e=t._self._c;return e("div",{staticClass:"xt-input"},[e("el-input",{style:t.inputStyle,attrs:{value:t.value,placeholder:t.placeholder},on:{input:function(e){return t.$emit("input",e)}}})],1)},A=[],X={name:"XtInput",props:{value:[String,Number],placeholder:{type:String,default:"请输入内容"},color:{type:String,default:""}},computed:{inputStyle(){return this.color?{"--xt-input-focus-color":this.color}:{}}}},k=X,D=P(k,$,A,!1,null,null,null),M=D.exports,R=M,L=function(){var t=this,e=t._self._c;return e("div",{staticClass:"xt-flex-box",class:t.classAttrs,style:t.flexStyle},[t._t("default")],2)},O=[],U={name:"XtFlexBox",props:{type:{type:String,default:"flex"},align:{type:String,default:"center"},content:{type:String,default:"start"},direction:{type:String,default:"row"},wrap:{type:String,default:"unset"},gap:{type:String,default:""}},computed:{classAttrs(){const{type:t,align:e,wrap:r,direction:n,content:o}=this;return[""+t,"align-"+e,"content-"+o,"direction-"+n,"wrap-"+r]},flexStyle(){const t={};return this.gap?t.gap=this.gap:t.gap="var(--xt-flex-box-gap, 8px)",t}}},H=U,N=P(H,L,O,!1,null,null,null),V=N.exports,W=V,q=function(){var t=this,e=t._self._c;return e("div",{staticClass:"xt-card",class:{"no-padding":t.noPadding}},[t.title?e("div",{staticClass:"card__header"},[t._t("title",(function(){return[t._v(t._s(t.title))]}))],2):t._e(),e("div",{staticClass:"card__body"},[t._t("default",(function(){return[e("span",{staticClass:"value"},[t._t("value",(function(){return[t._v(t._s(t.value))]}))],2),e("span",{staticClass:"unit"},[t._v(t._s(t.unit))])]}))],2)])},G=[],J={name:"XtCard",props:{type:{},title:{},value:{},unit:{},icon:{},iconIn:{default:"right"},noPadding:{type:Boolean,default:!1}}},K=J,Q=P(K,q,G,!1,null,null,null),Y=Q.exports,Z=Y,tt=function(){var t=this,e=t._self._c;return"border"==t.iconType?e("FlexBox",{staticClass:"xt-card-item is-border",class:["border"==t.iconType?"is-"+t.type:""],style:t.cardItemStyle,attrs:{content:"between"}},[t.title?e("span",{staticClass:"item__label"},[t._t("label",(function(){return[t._v(t._s(t.label))]}))],2):t._e(),e("span",{staticClass:"item__value"},[t._t("value",(function(){return[t._v(t._s(t.value))]}))],2),e("span",{staticClass:"item__unit"},[t._t("unit",(function(){return[t._v(t._s(t.unit))]}))],2)]):e("FlexBox",{staticClass:"xt-card-item",attrs:{direction:t.direction,content:t.contentAlign}},[t._t("icon",(function(){return[e("el-button",{attrs:{type:t.type,circle:t.circle,round:t.round,plain:"",icon:t.icon}})]})),e("div",{staticClass:"item__value"},[e("span",{staticClass:"value",style:t.valueStyle},[t._t("value",(function(){return[t._v(t._s(t.label))]}))],2),e("div",{staticClass:"unit"},[t._v(t._s(t.value))])])],2)},et=[],rt={name:"XtCardItem",components:{FlexBox:V},props:{iconType:{default:"border"},type:{default:"primary"},label:{},value:{},unit:{},icon:{},iconAt:{default:"right"},color:{type:String,default:""}},data(){return{circle:!1,round:!1}},computed:{contentAlign(){return"center"==this.iconAt?"center":"start"},direction(){const t={left:"row",right:"row-reverse",top:"column",bottom:"column-reverse"};return t[this.iconAt]},cardItemStyle(){return"border"===this.iconType&&"primary"===this.type&&this.color?{"--xt-card-item-color":this.color}:{}},valueStyle(){return"border"!==this.iconType&&"primary"===this.type&&this.color?{color:this.color}:{}}}},nt=rt,ot=P(nt,tt,et,!1,null,null,null),it=ot.exports,lt=it,at=function(){var t=this,e=t._self._c;return e(t.tag,t._b({tag:"component",class:t.computedClass,style:t.mergedStyle},"component",t.customAttrs,!1),[t._t("default")],2)},st=[],ct={name:"XtConfigProvider",inheritAttrs:!1,props:{theme:{type:String,default:"white"},size:{type:String,default:"medium"},primaryColor:{type:String,default:"#409EFF"},vars:{type:Object,default:()=>({})},tag:{type:String,default:"div",validator:t=>["div","span","section","main","template","article","aside"].includes(t)},injectBackground:{type:Boolean,default:!1},injectColor:{type:Boolean,default:!1}},computed:{mergedStyle(){const t={...this.vars};if(this.primaryColor){const e=this.normalizeColor(this.primaryColor);t["--xt-color-primary"]=e,t["--xt-color-primary-light-3"]=this.lightenColor(e,30),t["--xt-color-primary-light-5"]=this.lightenColor(e,50),t["--xt-color-primary-light-7"]=this.lightenColor(e,70),t["--xt-color-primary-light-8"]=this.lightenColor(e,80),t["--xt-color-primary-light-9"]=this.lightenColor(e,90)}const e={small:"12px",medium:"14px",large:"16px"};return e[this.size]&&(t["--xt-font-size-base"]=e[this.size]),"dark"===this.theme?(t["--xt-color-text-primary"]="rgba(255, 255, 255, 0.95)",t["--xt-color-text-regular"]="rgba(255, 255, 255, 0.8)",t["--xt-color-text-secondary"]="rgba(255, 255, 255, 0.6)",t["--xt-color-bg-primary"]="#1f1f1f",t["--xt-color-bg-secondary"]="#2d2d2d",t["--xt-color-bg-container"]="#1f1f1f",t["--xt-color-border"]="#434343",t["--xt-color-border-light"]="#3d3d3d",this.injectBackground&&(t.backgroundColor=t["--xt-color-bg-primary"]),this.injectColor&&(t.color=t["--xt-color-text-primary"])):(t["--xt-color-text-primary"]="#303133",t["--xt-color-text-regular"]="#606266",t["--xt-color-text-secondary"]="#909399",t["--xt-color-bg-primary"]="#ffffff",t["--xt-color-bg-secondary"]="#f5f7fa",t["--xt-color-bg-container"]="#f5f7fa",t["--xt-color-border"]="#DCDFE6",t["--xt-color-border-light"]="#E4E7ED",this.injectBackground&&(t.backgroundColor=t["--xt-color-bg-primary"]),this.injectColor&&(t.color=t["--xt-color-text-primary"])),t},computedClass(){const t=[];return"template"!==this.tag&&(t.push("xt-config-provider"),"dark"===this.theme&&t.push("xt-config-provider--dark")),t},customAttrs(){const t=["theme","size","primaryColor","vars","tag","injectBackground","injectColor"],e={};for(const r in this.$attrs)t.includes(r)||(e[r]=this.$attrs[r]);return e}},methods:{normalizeColor(t){if(!t)return"#409EFF";if(/^#[0-9A-Fa-f]{6}$/.test(t))return t;if(/^#[0-9A-Fa-f]{3}$/.test(t))return"#"+t[1]+t[1]+t[2]+t[2]+t[3]+t[3];if(/^#[0-9A-Fa-f]{8}$/.test(t))return t.substring(0,7);const e=t.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/i);if(e){const t=parseInt(e[1]),r=parseInt(e[2]),n=parseInt(e[3]);return this.rgbToHex(t,r,n)}return console.warn("[XtConfigProvider] 无法识别的颜色格式:",t),"#409EFF"},hexToRgb(t){const e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null},rgbToHex(t,e,r){return"#"+[t,e,r].map(t=>{const e=t.toString(16);return 1===e.length?"0"+e:e}).join("")},lightenColor(t,e){const r=this.hexToRgb(t);if(!r)return t;const n=Math.round(2.55*e),o=Math.min(255,r.r+n),i=Math.min(255,r.g+n),l=Math.min(255,r.b+n);return this.rgbToHex(o,i,l)}}},ut=ct,dt=P(ut,at,st,!1,null,null,null),ft=dt.exports,pt=ft,mt=function(){var t=this,e=t._self._c;return e("span",{staticClass:"xt-text",class:[t.type?"xt-text--"+t.type:"",{"xt-text--bold":t.bold}],style:t.customStyle},[t._t("default")],2)},gt=[],xt={name:"XtText",props:{type:{type:String,default:"",validator:t=>["","primary","success","warning","danger"].includes(t)},bold:{type:Boolean,default:!1},letterSpacing:{type:[String,Number],default:""}},computed:{customStyle(){const t={};return this.letterSpacing&&(t.letterSpacing="number"===typeof this.letterSpacing?this.letterSpacing+"px":this.letterSpacing),t}}},yt=xt,ht=P(yt,mt,gt,!1,null,null,null),Ct=ht.exports,bt=Ct;const vt=F.default||F,{getConfig:_t,setConfig:St,getTheme:Ft,getSize:Et,getPrimaryColor:Bt,resetConfig:wt,onConfigChange:zt,setTheme:Pt,setSize:Tt,setPrimaryColor:jt}=vt,It=[I,R,W,Z,lt,pt,bt],$t=function(t,e={}){$t.installed||($t.installed=!0,It.forEach(e=>{t.component(e.name,e)}),t.prototype.$xt={setTheme:Pt,setSize:Tt,setPrimaryColor:jt,getConfig:_t,setConfig:St,getTheme:Ft,getSize:Et,getPrimaryColor:Bt,resetConfig:wt,onConfigChange:zt},e&&(void 0!==e.theme&&Pt(e.theme),void 0!==e.size&&Tt(e.size),void 0!==e.primaryColor&&jt(e.primaryColor),void 0!==e.config&&St(e.config)))};"undefined"!==typeof window&&window.Vue&&$t(window.Vue);var At={install:$t,Button:I,Input:R,FlexBox:W,Card:Z,CardItem:lt,ConfigProvider:pt,Text:bt};e["default"]=At}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "基于 Vue2.7 + ElementUI 的组件库",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -32,6 +32,6 @@
   ],
   "dependencies": {
     "vue-server-renderer": "^2.7.14",
-    "xt-element-ui": "^1.0.7"
+    "xt-element-ui": "^1.0.8"
   }
 }

package/src/components/button/index.vue

@@ -1,15 +1,54 @@
-<template>
-    <el-button @click="handleClick">
-      <slot></slot>
-    </el-button>
-  </template>
-  <script>
-  export default {
-    name: 'XtButton',
-    methods:{
-      handleClick(){
-        this.$emit('click')
-      }
-    }
-  }
-  </script>
+<template>
+  <button 
+    class="xt-button" 
+    :class="[
+      'xt-button--' + type, 
+      size ? 'xt-button--' + size : '',
+      {
+        'xt-button--plain': plain, 
+        'is-disabled': disabled,
+        'is-round': round
+      }
+    ]"  
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <slot></slot>
+  </button>
+</template>
+<script>
+export default {
+  name: 'XtButton',
+  props: {
+    type: {
+      type: String,
+      default: 'default',
+      validator: (val) => ['default', 'primary', 'success', 'warning', 'danger'].includes(val)
+    },
+    size: {
+      type: String,
+      default: '',
+      validator: (val) => ['', 'large', 'medium', 'small', 'mini'].includes(val)
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    round: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleClick() {
+      if (!this.disabled) {
+        this.$emit('click')
+      }
+    }
+  }
+}
+</script>

package/src/components/button/style/index copy.scss

@@ -0,0 +1,221 @@
+@import '../../../styles/variables.scss';
+
+// 颜色（使用主题变量）
+$button-color-map: (
+  default: $xt-color-text-regular,
+  primary: $xt-color-primary,
+  success: $xt-color-success,
+  warning: $xt-color-warning,
+  danger: $xt-color-danger
+);
+
+$button-bg-color-map: (
+  default: transparent,
+  primary: $xt-color-primary,
+  success: $xt-color-success,
+  warning: $xt-color-warning,
+  danger: $xt-color-danger
+);
+
+$button-hover-bg-map: (
+  default: lighten($xt-color-primary, 10%),
+  primary: lighten($xt-color-primary, 10%),
+  success: lighten($xt-color-success, 10%),
+  warning: lighten($xt-color-warning, 10%),
+  danger: lighten($xt-color-danger, 10%)
+);
+
+$button-active-bg-map: (
+  default: darken($xt-color-primary, 10%),
+  primary: darken($xt-color-primary, 10%),
+  success: darken($xt-color-success, 10%),
+  warning: darken($xt-color-warning, 10%),
+  danger: darken($xt-color-danger, 10%)
+);
+
+// 尺寸
+$button-size-map: (
+  large: 40px,
+  medium: 36px,
+  small: 32px,
+  mini: 28px
+);
+
+$button-font-size-map: (
+  large: 14px,
+  medium: 14px,
+  small: 12px,
+  mini: 12px
+);
+
+// 圆角
+$button-radius: 4px;
+
+// 基础按钮
+.xt-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  cursor: pointer;
+  border: 1px solid $xt-color-border;
+  border-radius: $button-radius;
+  padding: 0 15px;
+  box-sizing: border-box;
+  outline: none;
+  transition: all 0.2s;
+
+  // 默认尺寸：medium
+  height: map-get($button-size-map, medium);
+  font-size: map-get($button-font-size-map, medium);
+
+  &:hover {
+    opacity: 0.9;
+  }
+
+  &:active {
+    opacity: 0.8;
+  }
+
+  // 禁用状态
+  &.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  // 圆角
+  &.is-round {
+    border-radius: 20px;
+    padding: 0 18px;
+  }
+}
+
+// ------------------------------
+// 循环生成所有类型按钮
+// ------------------------------
+@each $type, $color in $button-color-map {
+  $bg: map-get($button-bg-color-map, $type);
+  $hover-bg: map-get($button-hover-bg-map, $type);
+  $active-bg: map-get($button-active-bg-map, $type);
+
+  .xt-button--#{$type} {
+    @if $type == default {
+      color: $color;
+      border-color: $xt-color-border;
+    } @else {
+      color: #fff;
+      border-color: $bg;
+    }
+    background: $bg;
+
+    &:hover {
+      background: $hover-bg;
+      border-color: $hover-bg;
+    }
+
+    &:active {
+      background: $active-bg;
+      border-color: $active-bg;
+    }
+
+    // default 按钮 hover 特殊处理
+    @if $type == default {
+      &:hover {
+        color: $hover-bg;
+        background: #ffffff;
+        border-color: $hover-bg;
+      }
+       &:active {
+        background: #fff;
+        border-color: $active-bg;
+      }
+    }
+  }
+}
+
+// ------------------------------
+// 循环生成所有尺寸
+// ------------------------------
+@each $size, $height in $button-size-map {
+  $font: map-get($button-font-size-map, $size);
+
+  .xt-button--#{$size} {
+    height: $height;
+    font-size: $font;
+
+    @if $size == large {
+      padding: 0 20px;
+    }
+  }
+}
+
+// ------------------------------
+// Plain 模式
+// ------------------------------
+.xt-button--plain {
+  background-color: transparent;
+  border-color: inherit;
+}
+
+@each $type, $color in $button-color-map {
+  $bg: map-get($button-bg-color-map, $type);
+
+  .xt-button--#{$type}.xt-button--plain {
+    @if $type == default {
+      color: $xt-color-text-regular;
+      background: transparent;
+      border-color: $xt-color-border;
+      &:hover {
+        background: $xt-color-bg-hover;
+        border-color: $xt-color-border-light;
+      }
+    } @else {
+      color: $bg;
+      background: transparent;
+      border-color: $bg;
+      &:hover {
+        background: rgba($bg, 0.1);
+        color: $bg;
+        border-color: $bg;
+      }
+    }
+  }
+}
+
+// ------------------------------
+// 暗色主题
+// ------------------------------
+html.dark .xt-button {
+  border-color: $xt-dark-color-border;
+  background: $xt-dark-color-bg-primary;
+  color: $xt-dark-color-text-primary;
+}
+
+html.dark .xt-button:hover {
+  background: $xt-dark-color-bg-secondary;
+}
+
+html.dark .xt-button--primary {
+  background: $xt-color-primary;
+  border-color: $xt-color-primary;
+}
+
+html.dark .xt-button--success {
+  background: $xt-dark-color-success;
+  border-color: $xt-dark-color-success;
+}
+
+html.dark .xt-button--warning {
+  background: $xt-dark-color-warning;
+  border-color: $xt-dark-color-warning;
+}
+
+html.dark .xt-button--danger {
+  background: $xt-dark-color-danger;
+  border-color: $xt-dark-color-danger;
+}
+
+html.dark .xt-button--info {
+  background: $xt-dark-color-info;
+  border-color: $xt-dark-color-info;
+}

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

@@ -0,0 +1,136 @@
+@import '../../../styles/variables.scss';
+
+.xt-button {
+  --xt-button-bg-color: transparent;
+  --xt-button-border-color: var(--xt-color-border, #DCDFE6);
+  --xt-button-text-color: var(--xt-color-text-regular, #606266);
+  
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  height: var(--xt-button-height, 32px);
+  white-space: nowrap;
+  cursor: pointer;
+  color: var(--xt-button-text-color);
+  text-align: center;
+  box-sizing: border-box;
+  outline: none;
+  transition: var(--xt-button-transition, 0.1s);
+  font-weight: var(--xt-button-font-weight, 500);
+  -webkit-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  background-color: var(--xt-button-bg-color);
+  border: var(--xt-button-border-width, 1px) solid var(--xt-button-border-color);
+  border-radius: var(--xt-border-radius-base, 4px);
+  padding: var(--xt-button-padding-y, 8px) var(--xt-button-padding-x, 15px);
+  font-size: var(--xt-font-size-base, 14px);
+  
+  &:hover {
+    --xt-button-bg-color: var(--xt-color-bg-hover, #f5f5f5);
+  }
+  
+  &:active {
+    --xt-button-bg-color: var(--xt-color-bg-secondary, #f5f7fa);
+  }
+  
+  &:disabled {
+    --xt-button-bg-color: transparent;
+    --xt-button-border-color: var(--xt-color-border-light, #E4E7ED);
+    --xt-button-text-color: var(--xt-color-text-disabled, #C0C4CC);
+    cursor: not-allowed;
+  }
+}
+
+.xt-button--primary {
+  --xt-button-bg-color: var(--xt-color-primary, #1890ff);
+  --xt-button-border-color: var(--xt-color-primary, #1890ff);
+  --xt-button-text-color: #fff;
+}
+
+.xt-button--success {
+  --xt-button-bg-color: var(--xt-color-success, #37c3a4);
+  --xt-button-border-color: var(--xt-color-success, #37c3a4);
+  --xt-button-text-color: #fff;
+}
+
+.xt-button--warning {
+  --xt-button-bg-color: var(--xt-color-warning, #FFB74D);
+  --xt-button-border-color: var(--xt-color-warning, #FFB74D);
+  --xt-button-text-color: #fff;
+}
+
+.xt-button--danger {
+  --xt-button-bg-color: var(--xt-color-danger, #EA1D34);
+  --xt-button-border-color: var(--xt-color-danger, #EA1D34);
+  --xt-button-text-color: #fff;
+}
+
+.xt-button--info {
+  --xt-button-bg-color: var(--xt-color-info, #909399);
+  --xt-button-border-color: var(--xt-color-info, #909399);
+  --xt-button-text-color: #fff;
+}
+
+html.dark .xt-button--success {
+  --xt-button-bg-color: var(--xt-dark-button-success-bg, #166534);
+  --xt-button-border-color: var(--xt-dark-button-success-bg, #166534);
+}
+
+html.dark .xt-button--warning {
+  --xt-button-bg-color: var(--xt-dark-button-warning-bg, #78350f);
+  --xt-button-border-color: var(--xt-dark-button-warning-bg, #78350f);
+}
+
+html.dark .xt-button--danger {
+  --xt-button-bg-color: var(--xt-dark-button-danger-bg, #991b1b);
+  --xt-button-border-color: var(--xt-dark-button-danger-bg, #991b1b);
+}
+
+html.dark .xt-button--info {
+  --xt-button-bg-color: var(--xt-dark-button-info-bg, #374151);
+  --xt-button-border-color: var(--xt-dark-button-info-bg, #374151);
+}
+
+.xt-button--primary[plain],
+.xt-button--success[plain],
+.xt-button--warning[plain],
+.xt-button--danger[plain],
+.xt-button--info[plain] {
+  --xt-button-bg-color: var(--xt-color-bg-primary, #fff);
+  --xt-button-text-color: var(--xt-color-primary, #1890ff);
+}
+
+.xt-button--success[plain] {
+  --xt-button-text-color: var(--xt-color-success, #37c3a4);
+}
+
+.xt-button--warning[plain] {
+  --xt-button-text-color: var(--xt-color-warning, #FFB74D);
+}
+
+.xt-button--danger[plain] {
+  --xt-button-text-color: var(--xt-color-danger, #EA1D34);
+}
+
+.xt-button--info[plain] {
+  --xt-button-text-color: var(--xt-color-info, #999999);
+}
+
+html.dark .xt-button--success[plain] {
+  --xt-button-text-color: var(--xt-dark-color-success, #1dac4c);
+}
+
+html.dark .xt-button--warning[plain] {
+  --xt-button-text-color: var(--xt-dark-color-warning, #8d5e18);
+}
+
+html.dark .xt-button--danger[plain] {
+  --xt-button-text-color: var(--xt-dark-color-danger, #a02727);
+}
+
+html.dark .xt-button--info[plain] {
+  --xt-button-text-color: var(--xt-dark-color-info, #3f4249);
+}

package/src/components/card/index.vue

@@ -1,48 +1,27 @@
 <template>
-<div class="xt-card" :class="{'no-padding': noPadding }">
-  <div class="card_header" v-if="title">
-    <slot name="title">{{title }}</slot>
+  <div class="xt-card" :class="{'no-padding': noPadding }">
+    <div class="card__header" v-if="title">
+      <slot name="title">{{ title }}</slot>
+    </div>
+    <div class="card__body">
+      <slot>
+        <span class="value"><slot name="value">{{ value }}</slot></span>
+        <span class="unit">{{ unit }}</span>
+      </slot>
+    </div>
   </div>
-  <div class="card_body">
-    <slot>
-      <span class="value"><slot name="value">{{value}}</slot></span>
-      <span class="unit">{{ unit }}</span>
-    </slot>
-  </div>
-</div>
 </template>
 <script>
 export default {
-  name:"XtCard",
-  props:{
-    type:{},
-    title:{},
-    value:{},
-    unit:{},
-    icon:{},
-    iconIn:{default:"right"},
-    noPadding:{type:Boolean,default:false}
-  }
-}
-</script>
-<style lang="scss" scoped>
-.xt-card{
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,1); 
-  background-color:#fff;
-  overflow: hidden; color:#303133; transition:.35;
- .card__header{
-  padding:18px 20px;
-  box-sizing:border-box;
-}
-  .card_body{
-    padding:20px;
-    .value{
-      font-size:20px; font-weight: 600;
-    }
+  name: "XtCard",
+  props: {
+    type: {},
+    title: {},
+    value: {},
+    unit: {},
+    icon: {},
+    iconIn: { default: "right" },
+    noPadding: { type: Boolean, default: false }
   }
-  .value{font-weight:600;}
-  .card_header + .card__body{padding-top:0;}
-  &.noPadding{ .card_body{padding:0px;}}
 }
-</style>
+</script>

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

@@ -0,0 +1,49 @@
+@import '../../../styles/variables.scss';
+
+.xt-card {
+  --xt-card-bg-color: var(--xt-card-bg-color, #ffffff);
+  --xt-card-border-color: var(--xt-card-border-color, #EBEEF5);
+  --xt-card-text-color: var(--xt-color-text-primary, #303133);
+  
+  border-radius: var(--xt-card-border-radius, 4px);
+  box-shadow: var(--xt-card-shadow, 0 2px 12px 0 rgba(0, 0, 0, 0.1));
+  background-color: var(--xt-card-bg-color);
+  overflow: hidden;
+  color: var(--xt-card-text-color);
+  transition: var(--xt-transition-duration, 0.3s);
+}
+
+.xt-card .card__header {
+  padding: var(--xt-card-header-padding, 18px 20px);
+  box-sizing: border-box;
+  font-weight: 600;
+  font-size: var(--xt-font-size-medium, 16px);
+}
+
+.xt-card .card__body {
+  padding: var(--xt-card-padding, 20px);
+}
+
+.xt-card .card__body .value {
+  font-size: var(--xt-font-size-large, 18px);
+  font-weight: 600;
+  color: var(--xt-color-primary, #1890ff);
+}
+
+.xt-card .card__body .unit {
+  font-size: var(--xt-font-size-base, 14px);
+  color: var(--xt-color-text-secondary, #909399);
+  margin-left: 4px;
+}
+
+.xt-card .value {
+  font-weight: 600;
+}
+
+.xt-card .card__header + .card__body {
+  padding-top: 0;
+}
+
+.xt-card.noPadding .card__body {
+  padding: 0;
+}