diff --git a/.gitignore b/.gitignore
index 474763e..e8f9af3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
node_modules
-*storybook.log
\ No newline at end of file
+*storybook.log
+storybook-static
\ No newline at end of file
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..db5b829
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+@kevisual:registry=https://npm.xiongxiao.me
diff --git a/.storybook/main.js b/.storybook/main.js
index 04e4a49..548dd67 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,21 +1,64 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+const WEBPACK_SERVE = Boolean(process.env.WEBPACK_SERVE);
+const mode = WEBPACK_SERVE ? 'development' : 'production';
+export const isDev = mode === 'development';
+
/** @type { import('@storybook/html-webpack5').StorybookConfig } */
const config = {
- stories: [
- "../stories/**/*.mdx",
- "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
- "../apps/**/*.mdx",
- "../apps/**/*.stories.@(js|jsx|mjs|ts|tsx)",
- ],
+ stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)', '../apps/**/*.mdx', '../apps/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
- "@storybook/addon-webpack5-compiler-swc",
- "@storybook/addon-links",
- "@storybook/addon-essentials",
- "@chromatic-com/storybook",
- "@storybook/addon-interactions",
+ '@storybook/addon-webpack5-compiler-swc',
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@chromatic-com/storybook',
+ '@storybook/addon-interactions',
],
framework: {
- name: "@storybook/html-webpack5",
+ name: '@storybook/html-webpack5',
options: {},
},
+ webpackFinal: async (config) => {
+ const newConfig = {
+ ...config,
+ module: {
+ ...config.module,
+ rules: [
+ ...config.module.rules.filter((i) => {
+ if (i.test instanceof RegExp && i.test.test('.css')) {
+ return false;
+ }
+ return true;
+ }),
+ {
+ test: /\.css$/,
+ use: [
+ {
+ loader: !isDev ? MiniCssExtractPlugin.loader : 'style-loader',
+ },
+ {
+ loader: 'css-loader',
+ options: {
+ modules: false,
+ },
+ },
+ 'postcss-loader',
+ ],
+ },
+ ],
+ },
+ plugins: [
+ ...config.plugins,
+ // ...(config.plugins ?? [])
+ // // DocgenPlugin adds to the build time and we don't use storybook's autogenerated docs.
+ // .filter((plugin) => plugin.constructor.name !== 'DocgenPlugin'),
+ // ,
+ new MiniCssExtractPlugin({
+ filename: '[name].bundle.css',
+ chunkFilename: '[id].css',
+ }),
+ ],
+ };
+ return newConfig;
+ },
};
export default config;
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 0000000..253d065
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,2 @@
+
+
diff --git a/.storybook/preview.js b/.storybook/preview.js
index a354068..96c8406 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,3 +1,5 @@
+import './tailwind.css';
+
/** @type { import('@storybook/html').Preview } */
const preview = {
parameters: {
diff --git a/.storybook/tailwind.css b/.storybook/tailwind.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/.storybook/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/apps/ui/deploy/message.js b/apps/ui/deploy/message.js
index 0a931aa..3e4bffb 100644
--- a/apps/ui/deploy/message.js
+++ b/apps/ui/deploy/message.js
@@ -59,7 +59,7 @@ export class MessageContainer {
0 9px 28px 8px rgba(0, 0, 0, 0.05);
justify-content: center;
align-item: center;
- animation: message-slide-down 0.5s ease-out forwards; /* 应用动画 */
+ animation: message-slide-down 0.3s ease-out forwards; /* 应用动画 */
}
/* 添加消失类时 */
.message-wrapper.message-hide {
@@ -188,6 +188,7 @@ export class MessageContainer {
}
}
const controller = new MessageContainer();
+
export const createMessage = (content, opts) => {
let { icon, key, style, className, type } = opts || {};
const div = document.createElement('div');
@@ -207,7 +208,6 @@ export const createMessage = (content, opts) => {
i.classList.add('message-icon');
contentDiv.appendChild(i);
}
- console.log(content, type, icon, 'content');
if (content instanceof HTMLElement) {
contentDiv.appendChild(content);
} else {
@@ -222,13 +222,17 @@ export const createMessage = (content, opts) => {
const methods = ['success', 'info', 'warning', 'error', 'loading'];
export class Message {
- static controller = controller;
- static open = (message, timeout = 3000, onClose, opts) => {
+ controller = controller;
+ constructor() {
+ this.controller = controller;
+ }
+ open = (message, timeout = 3000, onClose, opts) => {
+ const controller = this.controller;
const div = createMessage(message, opts);
const remove = () => {
div.classList.add('message-hide');
setTimeout(() => {
- if (div.isConnected) {
+ if (div?.isConnected) {
div.remove();
} else {
console.log('not connected');
@@ -252,19 +256,21 @@ export class Message {
remove();
};
};
- static success = (message, timeout = 3000, onClose) => {
- return Message.open(message, timeout, onClose, { type: 'success' });
+ success = (message, timeout = 1000, onClose) => {
+ return this.open(message, timeout, onClose, { type: 'success' });
};
- static info = (message, timeout = 3000, onClose) => {
- return Message.open(message, timeout, onClose, { type: 'info' });
+ info = (message, timeout = 1500, onClose) => {
+ return this.open(message, timeout, onClose, { type: 'info' });
};
- static warning = (message, timeout = 3000, onClose) => {
- return Message.open(message, timeout, onClose, { type: 'warning' });
+ warning = (message, timeout = 3000, onClose) => {
+ return this.open(message, timeout, onClose, { type: 'warning' });
};
- static error = (message, timeout = 3000, onClose) => {
- return Message.open(message, timeout, onClose, { type: 'error' });
+ error = (message, timeout = 3000, onClose) => {
+ return this.open(message, timeout, onClose, { type: 'error' });
};
- static loading = (message, timeout = 0, onClose) => {
- return Message.open(message, timeout, onClose, { type: 'loading' });
+ loading = (message, timeout = 0, onClose) => {
+ return this.open(message, timeout, onClose, { type: 'loading' });
};
}
+
+export const message = new Message();
diff --git a/apps/ui/deploy/theme/index.css b/apps/ui/deploy/theme/index.css
new file mode 100644
index 0000000..742e0db
--- /dev/null
+++ b/apps/ui/deploy/theme/index.css
@@ -0,0 +1,27 @@
+#ui-modal-list {
+ position: relative;
+}
+.ui-modal-wrapper {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 200;
+}
+.ui-modal-close {
+ display: none;
+}
+.ui-modal-mask {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 201;
+}
+.ui-modal-content {
+ position: fixed;
+ z-index: 202;
+}
\ No newline at end of file
diff --git a/apps/ui/deploy/theme/index.js b/apps/ui/deploy/theme/index.js
new file mode 100644
index 0000000..8f945b9
--- /dev/null
+++ b/apps/ui/deploy/theme/index.js
@@ -0,0 +1 @@
+var e={animationIterationCount:1,aspectRatio:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,scale:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1};function t(e){var t=Object.create(null);return function(o){return void 0===t[o]&&(t[o]=e(o)),t[o]}}var o=/[A-Z]|^ms/g,n=/_EMO_([^_]+?)_([^]*?)_EMO_/g,i=function(e){return 45===e.charCodeAt(1)},l=function(e){return null!=e&&"boolean"!=typeof e},a=t((function(e){return i(e)?e:e.replace(o,"-$&").toLowerCase()})),s=function(t,o){switch(t){case"animation":case"animationName":if("string"==typeof o)return o.replace(n,(function(e,t,o){return d={name:t,styles:o,next:d},t}))}return 1===e[t]||i(t)||"number"!=typeof o||0===o?o:o+"px"};function r(e,t,o){if(null==o)return"";var n=o;if(void 0!==n.__emotion_styles)return n;switch(typeof o){case"boolean":return"";case"object":var i=o;if(1===i.anim)return d={name:i.name,styles:i.styles,next:d},i.name;var c=o;if(void 0!==c.styles){var u=c.next;if(void 0!==u)for(;void 0!==u;)d={name:u.name,styles:u.styles,next:d},u=u.next;return c.styles+";"}return function(e,t,o){var n="";if(Array.isArray(o))for(var i=0;i=4;++n,i-=4)t=1540483477*(65535&(t=255&e.charCodeAt(n)|(255&e.charCodeAt(++n))<<8|(255&e.charCodeAt(++n))<<16|(255&e.charCodeAt(++n))<<24))+(59797*(t>>>16)<<16),o=1540483477*(65535&(t^=t>>>24))+(59797*(t>>>16)<<16)^1540483477*(65535&o)+(59797*(o>>>16)<<16);switch(i){case 3:o^=(255&e.charCodeAt(n+2))<<16;case 2:o^=(255&e.charCodeAt(n+1))<<8;case 1:o=1540483477*(65535&(o^=255&e.charCodeAt(n)))+(59797*(o>>>16)<<16)}return(((o=1540483477*(65535&(o^=o>>>13))+(59797*(o>>>16)<<16))^o>>>15)>>>0).toString(36)}(i)+u;return{name:f,styles:i,next:d}}const f=e=>{if(!e)return"";return u([e]).styles},m=e=>{if(!e)return"";return u(e).styles},h=(e,t)=>{if(!e)return;if(!t)return;const o=u([t]);e.style.cssText=o.styles};function p(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var g,y,C,S={};var v=p(function(){if(C)return S;C=1;var e=S&&S.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(S,"__esModule",{value:!0}),S.default=function(e,o){var n=null;if(!e||"string"!=typeof e)return n;var i=(0,t.default)(e),l="function"==typeof o;return i.forEach((function(e){if("declaration"===e.type){var t=e.property,i=e.value;l?o(t,i,e):i&&((n=n||{})[t]=i)}})),n};var t=e(function(){if(y)return g;y=1;var e=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//g,t=/\n/g,o=/^\s*/,n=/^(\*?[-#/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/,i=/^:\s*/,l=/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};])+)/,a=/^[;\s]*/,s=/^\s+|\s+$/g,r="";function d(e){return e?e.replace(s,r):r}return g=function(s,c){if("string"!=typeof s)throw new TypeError("First argument must be a string");if(!s)return[];c=c||{};var u=1,f=1;function m(e){var o=e.match(t);o&&(u+=o.length);var n=e.lastIndexOf("\n");f=~n?e.length-n:f+e.length}function h(){var e={line:u,column:f};return function(t){return t.position=new p(e),C(),t}}function p(e){this.start=e,this.end={line:u,column:f},this.source=c.source}function g(e){var t=new Error(c.source+":"+u+":"+f+": "+e);if(t.reason=e,t.filename=c.source,t.line=u,t.column=f,t.source=s,!c.silent)throw t}function y(e){var t=e.exec(s);if(t){var o=t[0];return m(o),s=s.slice(o.length),t}}function C(){y(o)}function S(e){var t;for(e=e||[];t=v();)!1!==t&&e.push(t);return e}function v(){var e=h();if("/"==s.charAt(0)&&"*"==s.charAt(1)){for(var t=2;r!=s.charAt(t)&&("*"!=s.charAt(t)||"/"!=s.charAt(t+1));)++t;if(t+=2,r===s.charAt(t-1))return g("End of comment missing");var o=s.slice(2,t-2);return f+=2,m(o),s=s.slice(t),f+=2,e({type:"comment",comment:o})}}function x(){var t=h(),o=y(n);if(o){if(v(),!y(i))return g("property missing ':'");var s=y(l),c=t({type:"declaration",property:d(o[0].replace(e,r)),value:s?d(s[0].replace(e,r)):r});return y(a),c}}return p.prototype.content=s,C(),function(){var e,t=[];for(S(t);e=x();)!1!==e&&(t.push(e),S(t));return t}()}}());return S}()),x=v.default||v;const w=e=>e?"string"==typeof e?document.querySelector(e):e:null,E=(e,t,o)=>{e&&(t&&e.classList.add(t),o&&"string"==typeof o?e.style.cssText=o:o&&h(e,o))},b=(e,t,o,n)=>{if(!e)return;t&&e.classList.add(t);let i={...n};o&&"string"==typeof o?i={...n,...x(o)}:o&&"object"==typeof o&&(i={...n,...o}),h(e,i)};let k=e=>crypto.getRandomValues(new Uint8Array(e)),O=(e,t=21)=>((e,t,o)=>{let n=(2<{let a="";for(;;){let t=o(i),s=i;for(;s--;)if(a+=e[t[s]&n]||"",a.length===l)return a}}})(e,t,k);const T="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",N=O("0123456789abcdefghijklmnopqrstuvwxyz",6),F=O(T,12),D=(e=6)=>"b-"+N(e),L=(e=6)=>F(e);function A(e){const t=/\{\{\s*(.*?)\s*\}\}/g,o=[];let n;for(;null!==(n=t.exec(e));)o.push(n[1]);return o}const M=(e,t,o=!0)=>{const n=window.history;"string"==typeof e?n.pushState({key:"default",usr:t},"",e):n.pushState({key:"default",usr:t},"",e.pathname),o&&window.dispatchEvent(new Event("popstate"))},_={push:M},j=e=>null==e||"{}"===JSON.stringify(e),I=e=>{let t;const o=new Set,n=(e,n)=>{const i="function"==typeof e?e(t):e;if(!Object.is(i,t)){const e=t;t=(null!=n?n:"object"!=typeof i||null===i)?i:Object.assign({},t,i),o.forEach((o=>o(t,e)))}},i=()=>t,l={setState:n,getState:i,getInitialState:()=>a,subscribe:e=>(o.add(e),()=>o.delete(e))},a=t=e(n,i,l);return l},R=e=>e?I(e):I,H=R(((e,t)=>({modals:[],getModal:e=>t().modals.find((t=>t.id===e))}))),z={},G=e=>{const t=e.target;if(t){if(t.classList.contains("ui-modal-mask")){const o=H.getState().modals.find((e=>e.id===t.dataset.id));return o&&o.open&&o.onMaskClose(e),void e.preventDefault()}}else console.log("target is null")};class q{static rootClassName="#ui-modal-list";root;id;modalElement;Element;mask;maskClassName;maskStyle;maskClose;contentClassName;contentStyle;destroyOnClose;hideOnClose;open;isUse=!0;onClose;cacheFragment;defaultStyle;constructor(e){this.root=this.initRoot(e.root),(e=>{const t=e.id;z[t]&&e===z[t]||(z[t]&&z[t].removeEventListener("click",G),z[t]=null,e.addEventListener("click",G),z[t]=e)})(this.root),this.id=e.id||D(),this.mask=e.mask??!0,this.maskClassName=e.maskClassName,this.maskStyle=e.maskStyle,this.maskClose=e.maskClose??!0,this.contentClassName=e.contentClassName,this.contentStyle=e.contentStyle,this.destroyOnClose=e.destroyOnClose??!0,this.hideOnClose=e.hideOnClose??!0,this.destroyOnClose||this.hideOnClose||(this.destroyOnClose=!0,console.warn("destroyOnClose Or hideOnClose must one is true")),this.cacheFragment=new DocumentFragment,this.defaultStyle=e.defaultStyle||{},this.open=e.open??!0,this.onClose=e.onClose}initRoot(e){let t=w(e);if(!t){const e=document.querySelector("#ui-modal-list");return e?(t=e,t.classList.add("ui-modal-root"),t):(t=document.createElement("div"),t.id="ui-modal-list",t.classList.add("ui-modal-root"),document.body.appendChild(t),t)}return t.classList.add("ui-custom-modal","ui-modal-root"),t.id||(t.id="ui-modal"+D()),t}static render(...e){let[t,o,n]=e;const i=w(t);if(!i)return void console.warn("el is not exist",t);let l,a="";"string"==typeof o&&o?a=o:"object"==typeof o&&(a=o.id,n=o,o=o.id);const s=H.getState();if(a&&(l=H.getState().getModal(a)),!l){const e=new this({id:o,...n});l=e,H.setState({modals:[...s.modals,e]})}return l.renderEl(i),l}static create(e){let t,o=e.id;const n=H.getState();if(o&&(t=H.getState().getModal(o)),!t){const i=new this({...e,id:o});t=i,H.setState({modals:[...n.modals,i]})}return t}createMask(){const e=document.createElement("div");return e.classList.add("ui-modal-mask"),e.dataset.id=this.id,b(e,this.maskClassName,this.maskStyle,this.defaultStyle?.defaultMaskStyle),e}renderEl(e){const t=this.defaultStyle?.defaultContentStyle||{position:"absolute",padding:"20px",left:"50%",top:"20%",width:"600px",background:"#fff",borderRadius:"5px",boxShadow:"0 0 10px rgba(0,0,0,.1)",transform:"translate(-50%, -50%)",maxHeight:"80vh",overflow:"auto"},o=document.createDocumentFragment(),n=document.createElement("div");if(n.classList.add("ui-modal-wrapper"),n.id=this.id,n.dataset.mid=this.id,this.mask){const e=this.createMask();n.appendChild(e)}const i=document.createElement("div");return i.classList.add("ui-modal-content"),b(i,this.contentClassName,this.contentStyle,t),i.appendChild(e),n.appendChild(i),o.appendChild(n),this.modalElement=n,this.Element=e,this.appendRoot(o),this}appendRoot(e){this.root.appendChild(e),this.setOpen(this.open)}setOpen(e){this.open=e,this.destroyOnClose?e?this.root.appendChild(this.modalElement):this.cacheFragment.appendChild(this.modalElement):this.hideOnClose&&(e?this.modalElement.classList.remove("ui-modal-close"):this.modalElement.classList.add("ui-modal-close"))}unMount(){const e=document.createDocumentFragment();e.appendChild(this.Element),this.modalElement?.remove();const t=H.getState();return H.setState({modals:t.modals.filter((e=>e.id!==this.id))}),this.isUse=!1,this.cacheFragment=new DocumentFragment,e}reRender(e,t){if(e){if(this.modalElement?.remove?.(),this.modalElement=void 0,!this.Element)return;this.renderEl(this.Element)}}async onMaskClose(e){this.maskClose&&(this.setOpen(!1),this.onClose?.(e))}setDefaultStyle(e,t){this.defaultStyle[e]=t}}class W extends q{constructor(e){super(e)}}class P extends q{dialogTitle;dialogTitleClassName;dialogTitleStyle;dialogTitleEl;dialogTitleCloseIcon;dialogContentClassName;dialogContentStyle;dialogFooterShow;dialogFooterClassName;dialogFooterStyle;constructor(e){super(e),this.dialogTitle=e.dialogTitle,this.dialogTitleClassName=e.dialogTitleClassName,this.dialogTitleStyle=e.dialogTitleStyle,this.dialogTitleEl=e.dialogTitleEl,this.dialogTitleCloseIcon=e.dialogTitleCloseIcon,this.dialogContentClassName=e.dialogContentClassName,this.dialogContentStyle=e.dialogContentStyle,this.dialogFooterClassName=e.dialogFooterClassName,this.dialogFooterStyle=e.dialogFooterStyle,this.dialogFooterShow=e.dialogFooterShow??!1,this.setDefaultStyle("defaultContentStyle",{position:"absolute",padding:"0px",left:"50%",top:"20%",width:"600px",background:"#fff",borderRadius:"5px",boxShadow:"0 0 10px rgba(0,0,0,.1)",transform:"translate(-50%, -50%)",maxHeight:"80vh",overflow:"auto",...e?.defaultStyle?.defaultContentStyle}),this.setDefaultStyle("defaultDialogTitleStyle",{display:"flex",justifyContent:"space-between",alignItems:"center",position:"sticky",padding:"10px 20px",top:"0",fontSize:"16px",background:"#fff",marginTop:"-10px",borderBottom:"1px solid #f0f0f0",marginBottom:"5px",...e?.defaultStyle?.defaultDialogTitleStyle}),this.setDefaultStyle("defaultDialogContentStyle",{padding:"20px",...e?.defaultStyle?.defaultDialogContentStyle}),this.setDefaultStyle("defaultDialogFooterStyle",{display:"flex",justifyItems:"end",borderTop:"1px solid #f0f0f0",padding:"10px 20px",...e?.defaultStyle?.defaultDialogFooterStyle})}appendRoot(e){const t=document.createDocumentFragment();t.appendChild(this.Element);const o=e.querySelector(".ui-modal-content");o.classList.add("ui-modal-dialog");const n=document.createElement("div");if(n.classList.add("ui-modal-dialog-title"),b(n,this.dialogTitleClassName,this.dialogTitleStyle,this.defaultStyle.defaultDialogTitleStyle),this.dialogTitleEl?n.appendChild(this.dialogTitleEl):n.innerText=this.dialogTitle,this.dialogTitleCloseIcon){const e=document.createElement("span");e.className="ui-modal-dialog-close",e.innerHTML="×",e.style.cssText="\n cursor: pointer;\n font-size: 24px;\n margin: -5px 10px 0 0;\n ",e.onclick=e=>{this.setOpen(!1)},n.appendChild(e)}o.appendChild(n);const i=document.createElement("div");if(i.className="ui-modal-dialog-content",b(i,this.dialogContentClassName,this.dialogContentStyle,this.defaultStyle.defaultDialogContentStyle),i.appendChild(t),this.dialogFooterShow){const e=document.createElement("div");e.className="ui-modal-dialog-footer",b(e,this.dialogFooterClassName,this.dialogFooterStyle,this.defaultStyle.defaultDialogFooterStyle),o.appendChild(e)}o.appendChild(i),super.appendRoot(e)}renderEl(e){return super.renderEl(e)}renderFooter(e){const t=w(e);if(!t)return;const o=this.Element.querySelector(".ui-modal-dialog-footer");o&&(o.innerHTML="",o.appendChild(t))}renerContent(e){const t=w(e);if(!t)return;const o=this.Element.querySelector(".ui-modal-dialog-content");o&&(o.innerHTML="",o.appendChild(t))}}function U(e){if(null==e||"boolean"==typeof e)return console.warn("Invalid JSX element:",e),null;const{type:t,props:o}=e;if(t===Symbol.for("react.fragment")){const e=document.createDocumentFragment();if(o.children)if(Array.isArray(o.children))o.children.forEach((t=>{const o=U(t);o&&e.appendChild(o)}));else{const t=U(o.children);t&&e.appendChild(t)}return e}const n=document.createElement(t);return Object.keys(o).forEach((e=>{if("children"===e){if(Array.isArray(o.children))o.children.forEach((e=>{const t=U(e);t&&n.appendChild(t)}));else if("string"==typeof o.children)n.appendChild(document.createTextNode(o.children));else if("object"==typeof o.children&&null!==o.children){const e=U(o.children);e&&n.appendChild(e)}}else if(e.startsWith("on")){const t=e.slice(2).toLowerCase();n.addEventListener(t,o[e])}else"style"===e&&"object"==typeof o[e]?Object.assign(n.style,o[e]):"dangerouslySetInnerHTML"===e?o[e]&&"string"==typeof o[e].__html?n.innerHTML=o[e].__html:console.warn("Invalid dangerouslySetInnerHTML content:",o[e]):"ref"===e?console.warn("Ref prop is not supported in manual DOM creation"):"key"===e?console.warn("Key prop is not applicable in manual DOM creation"):n.setAttribute(e,o[e])})),n}export{W as BlankModal,P as DialogModal,q as Modal,T as alphabetLetterAll,U as createDOMElement,R as createStore,F as customNanoid,E as elAddCS,b as elAddCS2,A as extractKeysFromBraces,L as generate,D as generateId,N as generateId6,f as getCssText,m as getCssTextObjs,_ as history,j as isObjectNull,H as modalStore,h as obj2css,M as push,w as querySelector};
diff --git a/apps/ui/docs/message.mdx b/apps/ui/docs/message.mdx
new file mode 100644
index 0000000..95ee5d1
--- /dev/null
+++ b/apps/ui/docs/message.mdx
@@ -0,0 +1,7 @@
+# message
+
+类似antd的message，但是是直接用 `import` 调用
+
+```js
+import { message } from 'https://kevisual.xiongxiao.me/system/ui/message.js'
+```
\ No newline at end of file
diff --git a/apps/ui/docs/message.stories.js b/apps/ui/docs/message.stories.js
index cd285df..6105290 100644
--- a/apps/ui/docs/message.stories.js
+++ b/apps/ui/docs/message.stories.js
@@ -1,11 +1,13 @@
-import { Message, createMessage } from '../deploy/message.js';
+import { message as Message, createMessage } from '../deploy/message.js';
+
export default {
title: 'ui/message',
tags: ['autodocs'],
+ description: 'Message component',
render: ({ label, fn, ...args }) => {
const div = createMessage(label, { type: 'success' });
div.addEventListener('click', () => {
- fn('Hello World', 2000);
+ Message.success('Hello World', 2000);
});
div.style.border = '1px solid #000';
const uiMessage = document.createElement('div');
diff --git a/apps/ui/theme/modal.mdx b/apps/ui/theme/modal.mdx
new file mode 100644
index 0000000..d371e85
--- /dev/null
+++ b/apps/ui/theme/modal.mdx
@@ -0,0 +1,131 @@
+import { message } from '../deploy/message.js'
+import { DialogModal } from '@kevisual/ui'
+import '@kevisual/ui/dist/index.css'
+
+Modal
+
+> 使用原生js实现的弹窗组件
+
+
+export const ShowModal = () => {
+ const url = 'https://kevisual.xiongxiao.me/system/theme/index.js'
+
+ const onClick = async () => {
+ console.log('theme', DialogModal)
+ // console.log('clicked')
+ // message.info('Hello, this is a message')
+ const content = document.createElement('div');
+ content.innerHTML = `
+
+
Token 无效
+
您的登录凭证已失效，请重新登录。
+
确定
+
点击显示弹窗
+}
+
+
+
+使用方法
+```js
+// import { DialogModal } from 'https://kevisual.xiongxiao.me/system/theme/index.js'
+import { DialogModal } from '@kevisual/ui';
+import '@kevisual/ui/dist/index.css';
+
+const content = document.createElement('div');
+content.innerHTML = `
+
+
Token 无效
+
您的登录凭证已失效，请重新登录。
+
确定
+