xt-element-ui 1.0.8 → 1.0.9

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")}({"27fd":function(t,e,r){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"}},"7fc4":function(t,e,r){},d67a:function(t,e,r){},fb15:function(t,e,r){"use strict";if(r.r(e),r.d(e,"utils",(function(){return mt})),r.d(e,"variables",(function(){return l.a})),r.d(e,"getConfig",(function(){return gt})),r.d(e,"setConfig",(function(){return xt})),r.d(e,"getTheme",(function(){return ht})),r.d(e,"getSize",(function(){return yt})),r.d(e,"getPrimaryColor",(function(){return Ct})),r.d(e,"resetConfig",(function(){return vt})),r.d(e,"onConfigChange",(function(){return bt})),r.d(e,"setTheme",(function(){return _t})),r.d(e,"setSize",(function(){return St})),r.d(e,"setPrimaryColor",(function(){return Ft})),"undefined"!==typeof window){var n=window.document.currentScript,o=n&&n.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);o&&(r.p=o[1])}r("7fc4"),r("d67a");var i=r("27fd"),l=r.n(i);const a={theme:"light",size:"medium",primaryColor:"#409EFF"};let s={...a};console.log("[XtElementUI] utils initialized with currentConfig:",s);const u=[],c=function(t,e){u.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&&y(t.primaryColor)):console.warn("[XtElementUI] setConfig 必须传入对象参数")},p=function(t){const e=["light","dark"];if(!e.includes(t))return void console.warn(`[XtElementUI] 无效的主题值: ${t}，可选值: ${e.join(", ")}`);s.theme=t;const r=document.documentElement;"dark"===t?(r.classList.add("dark"),r.setAttribute("data-theme","dark")):(r.classList.remove("dark"),r.removeAttribute("data-theme")),c("theme",t)},m=function(t){const e=["small","medium","large"];e.includes(t)?(s.size=t,document.documentElement.setAttribute("data-size",t),c("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 h(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 y=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",h(r,30)),document.documentElement.style.setProperty("--xt-color-primary-light-5",h(r,50)),document.documentElement.style.setProperty("--xt-color-primary-light-7",h(r,70)),document.documentElement.style.setProperty("--xt-color-primary-light-8",h(r,80)),document.documentElement.style.setProperty("--xt-color-primary-light-9",h(r,90)),c("primaryColor",r),console.log("[XtElementUI] 主色调已设置为:",r)},C=function(){return s.theme},v=function(){return s.size},b=function(){return s.primaryColor},_=function(){f(a)},S=function(t){if("function"===typeof t)return u.push(t),function(){const e=u.indexOf(t);e>-1&&u.splice(e,1)};console.warn("[XtElementUI] onConfigChange 必须传入函数")};var F={setTheme:p,setSize:m,setPrimaryColor:y,getConfig:d,setConfig:f,getTheme:C,getSize:v,getPrimaryColor:b,resetConfig:_,onConfigChange:S},E=function(){var t=this,e=t._self._c;return e("el-button",{staticClass:"xt-button",class:["xt-button--"+t.type],style:t.buttonStyle,attrs:{type:t.type,plain:t.plain},on:{click:t.handleClick}},[t._t("default")],2)},P=[],B={name:"XtButton",props:{type:{type:String,default:"primary"},plain:{type:Boolean,default:!1},color:{type:String,default:""}},computed:{buttonStyle(){return this.color?{"--xt-button-bg-color":this.color,"--xt-button-border-color":this.color,"--xt-button-text-color":"#fff"}:{}}},methods:{handleClick(){this.$emit("click")}}},z=B;function T(t,e,r,n,o,i,l,a){var s,u="function"===typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=r,u._compiled=!0),n&&(u.functional=!0),i&&(u._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)},u._ssrRegister=s):o&&(s=a?function(){o.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:o),s)if(u.functional){u._injectStyles=s;var c=u.render;u.render=function(t,e){return s.call(e),c(t,e)}}else{var d=u.beforeCreate;u.beforeCreate=d?[].concat(d,s):[s]}return{exports:t,options:u}}var w=T(z,E,P,!1,null,null,null),I=w.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,M=T(k,j,A,!1,null,null,null),L=M.exports,R=L,O=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)},U=[],D={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=D,V=T(H,O,U,!1,null,null,null),N=V.exports,W=N,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=T(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:N},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=T(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=[],ut={name:"XtConfigProvider",inheritAttrs:!1,props:{theme:{type:String,default:"light"},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},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)}}},ct=ut,dt=T(ct,at,st,!1,null,null,null),ft=dt.exports,pt=ft;const mt=F.default||F,{getConfig:gt,setConfig:xt,getTheme:ht,getSize:yt,getPrimaryColor:Ct,resetConfig:vt,onConfigChange:bt,setTheme:_t,setSize:St,setPrimaryColor:Ft}=mt,Et=[$,R,W,Z,lt,pt],Pt=function(t,e={}){Pt.installed||(Pt.installed=!0,Et.forEach(e=>{t.component(e.name,e)}),t.prototype.$xt={setTheme:_t,setSize:St,setPrimaryColor:Ft,getConfig:gt,setConfig:xt,getTheme:ht,getSize:yt,getPrimaryColor:Ct,resetConfig:vt,onConfigChange:bt},e&&(void 0!==e.theme&&_t(e.theme),void 0!==e.size&&St(e.size),void 0!==e.primaryColor&&Ft(e.primaryColor),void 0!==e.config&&xt(e.config)))};"undefined"!==typeof window&&window.Vue&&Pt(window.Vue);var Bt={install:Pt,Button:$,Input:R,FlexBox:W,Card:Z,CardItem:lt,ConfigProvider:pt};e["default"]=Bt}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "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,48 @@
-<template>
-    <el-button @click="handleClick">
-      <slot></slot>
-    </el-button>
-  </template>
-  <script>
-  export default {
-    name: 'XtButton',
-    methods:{
-      handleClick(){
-        this.$emit('click')
-      }
-    }
-  }
-  </script>
+<template>
+  <el-button 
+    class="xt-button" 
+    :class="['xt-button--' + type]"  
+    :type="type" 
+    :plain="plain" 
+    :style="buttonStyle"
+    @click="handleClick"
+  >
+    <slot></slot>
+  </el-button>
+</template>
+<script>
+export default {
+  name: 'XtButton',
+  props: {
+    type: {
+      type: String,
+      default: 'primary'
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    buttonStyle() {
+      if (this.color) {
+        return {
+          '--xt-button-bg-color': this.color,
+          '--xt-button-border-color': this.color,
+          '--xt-button-text-color': '#fff'
+        }
+      }
+      return {}
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click')
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,130 @@
+@import '../../../styles/variables.scss';
+
+.xt-button {
+  --xt-button-bg-color: var(--xt-color-primary, #409EFF);
+  --xt-button-border-color: var(--xt-color-primary, #409EFF);
+  --xt-button-text-color: #fff;
+  
+  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);
+}
+
+.xt-button--primary {
+  --xt-button-bg-color: var(--xt-color-primary, #409EFF);
+  --xt-button-border-color: var(--xt-color-primary, #409EFF);
+  --xt-button-text-color: #fff;
+}
+
+.xt-button--success {
+  --xt-button-bg-color: var(--xt-color-success, #67C23A);
+  --xt-button-border-color: var(--xt-color-success, #67C23A);
+  --xt-button-text-color: #fff;
+}
+
+.xt-button--warning {
+  --xt-button-bg-color: var(--xt-color-warning, #E6A23C);
+  --xt-button-border-color: var(--xt-color-warning, #E6A23C);
+  --xt-button-text-color: #fff;
+}
+
+.xt-button--danger {
+  --xt-button-bg-color: var(--xt-color-danger, #F56C6C);
+  --xt-button-border-color: var(--xt-color-danger, #F56C6C);
+  --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, #409EFF);
+}
+
+.xt-button--success[plain] {
+  --xt-button-text-color: var(--xt-color-success, #67C23A);
+}
+
+.xt-button--warning[plain] {
+  --xt-button-text-color: var(--xt-color-warning, #E6A23C);
+}
+
+.xt-button--danger[plain] {
+  --xt-button-text-color: var(--xt-color-danger, #F56C6C);
+}
+
+.xt-button--info[plain] {
+  --xt-button-text-color: var(--xt-color-info, #909399);
+}
+
+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);
+}
+
+.xt-button:hover {
+  opacity: 0.8;
+}
+
+.xt-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

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, #409EFF);
+}
+
+.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;
+}

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

@@ -1,112 +1,93 @@
 <template>
-<FlexBox v-if="iconType=='border'" class="xt-card-item is-border" :class="[iconType=='border'?`is-${type}`:'']" content="between">
-  <span class="item_label" v-if="title">
-    <slot name="label">{{label }}</slot>
-  </span>
-   <span class="item-value">
-    <slot name="value">{{value }}</slot>
-  </span>
-  <span class="item_unit">
-    <slot name="unit">{{ unit }}</slot>
-  </span>
-</FlexBox>
-<FlexBox v-else class="xt-card-item" :direction="direction" :content="contentAlign">
-  <slot name="icon">
-    <el-button :type="type" :circle="circle" :round="round" plain :icon="icon"></el-button>
-  </slot>
-   <div class="item-value">
-    <span class="value">
-      <slot name="value">{{ label }}</slot>
+  <FlexBox 
+    v-if="iconType=='border'" 
+    class="xt-card-item is-border" 
+    :class="[iconType=='border'?`is-${type}`:'']" 
+    :style="cardItemStyle" 
+    content="between"
+  >
+    <span class="item__label" v-if="title">
+      <slot name="label">{{ label }}</slot>
     </span>
-    <div class="unit">{{ value }}</div>
-  </div>
-  
-</FlexBox>
+    <span class="item__value">
+      <slot name="value">{{ value }}</slot>
+    </span>
+    <span class="item__unit">
+      <slot name="unit">{{ unit }}</slot>
+    </span>
+  </FlexBox>
+  <FlexBox 
+    v-else 
+    class="xt-card-item" 
+    :direction="direction" 
+    :content="contentAlign"
+  >
+    <slot name="icon">
+      <el-button :type="type" :circle="circle" :round="round" plain :icon="icon"></el-button>
+    </slot>
+    <div class="item__value">
+      <span class="value" :style="valueStyle">
+        <slot name="value">{{ label }}</slot>
+      </span>
+      <div class="unit">{{ value }}</div>
+    </div>
+  </FlexBox>
 </template>
 <script>
 import FlexBox from '../flex-box/index.vue'
 export default {
-  name:"XtCardItem",
-  components:{
+  name: "XtCardItem",
+  components: {
     FlexBox
   },
-  props:{
-    iconType:{default:"border"},
-    type:{default:"primary"},
-    label:{},
-    value:{},
-    unit:{},
-    icon:{},
-    iconAt:{default:"right"}
+  props: {
+    iconType: { default: "border" },
+    type: { default: "primary" },
+    label: {},
+    value: {},
+    unit: {},
+    icon: {},
+    iconAt: { default: "right" },
+    color: {
+      type: String,
+      default: ''
+    }
   },
-  data(){
-    return{
+  data() {
+    return {
       circle: false,
       round: false
     }
   },
-  computed:{
-    contentAlign(){
-      return this.iconAt=='center'?'center':'start'
+  computed: {
+    contentAlign() {
+      return this.iconAt == 'center' ? 'center' : 'start'
     },
-    direction(){
+    direction() {
       const iconAtMap = {
-        left:'row',
-        right:'row-reverse',
-        top:'column',
-        bottom:'column-reverse'
+        left: 'row',
+        right: 'row-reverse',
+        top: 'column',
+        bottom: 'column-reverse'
       }
       return iconAtMap[this.iconAt]
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.xt-card-item{  
-  min-height: 40px;
-  + .xt-card-item{
-    margin-top: 10px;
-  }
-  &.is-border{
-    border-right: 3px solid transparent;
-    background-color: #f5f7fa;
-    &.is-primary{
-      border-right-color: $xt-color-primary;
-      .item-value .value{
-        color: $xt-color-primary;
-      }
-    }
-    &.is-success{
-      border-right-color: #67c23a;
-      .item-value .value{
-        color: #67c23a;
-      }
-    }
-    &.is-warning{
-      border-right-color: #e6a23c;
-      .item-value .value{
-        color: #e6a23c;
+    },
+    cardItemStyle() {
+      if (this.iconType === 'border' && this.type === 'primary' && this.color) {
+        return {
+          '--xt-card-item-color': this.color
+        }
       }
-    }
-    &.is-danger{
-      border-right-color: #f56c6c;
-      .item-value .value{
-        color: #f56c6c;
+      return {}
+    },
+    valueStyle() {
+      if (this.iconType !== 'border' && this.type === 'primary' && this.color) {
+        return {
+          color: this.color
+        }
       }
+      return {}
     }
   }
-  .item-value{
-    padding-right: 10px;
-    .value{
-      font-weight: 600;
-      font-size: $xt-font-size-base;
-    }
-  }
-  .item_label{
-    padding-left: 10px;
-  }
-  .item_unit{
-    padding-left: 5px;
-  }
 }
-</style>
+</script>

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

@@ -0,0 +1,72 @@
+@import '../../../styles/variables.scss';
+
+.xt-card-item {
+  --xt-card-item-color: var(--xt-color-primary, #409EFF);
+  
+  min-height: var(--xt-card-item-min-height, 40px);
+}
+
+.xt-card-item + .xt-card-item {
+  margin-top: var(--xt-card-item-gap, 10px);
+}
+
+.xt-card-item.is-border {
+  border-right: var(--xt-card-item-border-width, 3px) solid transparent;
+  background-color: var(--xt-color-bg-secondary, #f5f7fa);
+}
+
+.xt-card-item.is-border.is-primary {
+  border-right-color: var(--xt-card-item-color);
+}
+
+.xt-card-item.is-border.is-primary .item__value .value {
+  color: var(--xt-card-item-color);
+}
+
+.xt-card-item.is-border.is-success {
+  border-right-color: var(--xt-color-success, #67C23A);
+}
+
+.xt-card-item.is-border.is-success .item__value .value {
+  color: var(--xt-color-success, #67C23A);
+}
+
+.xt-card-item.is-border.is-warning {
+  border-right-color: var(--xt-color-warning, #E6A23C);
+}
+
+.xt-card-item.is-border.is-warning .item__value .value {
+  color: var(--xt-color-warning, #E6A23C);
+}
+
+.xt-card-item.is-border.is-danger {
+  border-right-color: var(--xt-color-danger, #F56C6C);
+}
+
+.xt-card-item.is-border.is-danger .item__value .value {
+  color: var(--xt-color-danger, #F56C6C);
+}
+
+.xt-card-item .item__value {
+  padding-right: 10px;
+}
+
+.xt-card-item .item__value .value {
+  font-weight: 600;
+  font-size: var(--xt-font-size-base, 14px);
+}
+
+.xt-card-item .item__value .unit {
+  font-size: var(--xt-font-size-small, 13px);
+  color: var(--xt-color-text-secondary, #909399);
+}
+
+.xt-card-item .item__label {
+  padding-left: 10px;
+  color: var(--xt-color-text-secondary, #909399);
+}
+
+.xt-card-item .item__unit {
+  padding-left: 5px;
+  color: var(--xt-color-text-secondary, #909399);
+}

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

@@ -0,0 +1,2 @@
+import ConfigProvider from './index.vue'
+export default ConfigProvider