@k3000/ce 0.2.0 → 0.2.1

package/ce.mjs

@@ -1 +1 @@
-let dir="./comp",ext="mjs",getVariables=e=>{const t=e.match(/\{\{.+?}}/g);if(!t)return new Set;const o=new Set,n=new Set(["true","false","null","undefined","this","new","typeof","in","instanceof"]);return t.forEach((e=>{const t=e.slice(2,-2).match(/\b[a-zA-Z_$][\w$]*(?:\s*\.\s*[a-zA-Z_$][\w$]*)*(?!\s*\()/g);t&&t.forEach((e=>{n.has(e)||o.add(e)}))})),o},createTmpNode=(e="")=>document.createTextNode(""),literalsCode=e=>`with (scope) {\n\treturn \`${e.replace(/{{(.*?)}}/g,((e,t)=>`\${${t}}`))}\` \n}`,functionCode=e=>`with (scope) {\n\treturn ${e} \n}`,handleArray=(e,t)=>{const o=e.ownerElement;if(e.nodeMap||(e.nodeMap=[],e.mark=createTmpNode("数组结束标记"),o.parentNode.replaceChild(e.mark,o),e.ownerElement=o.cloneNode(!0)),!Array.isArray(t))return e;const n=e.mark.parentNode;let r=0;for(;r<t.length;r++)if(void 0!==e.nodeMap[r]){if(e.nodeMap[r][0]!==t[r]){const s=o.cloneNode(!0);try{t[r]._=e.scope}catch(e){}bindNode(t[r],s,!0),n.replaceChild(s,e.nodeMap[r][1]),e.nodeMap[r]=[t[r],s]}}else{const s=o.cloneNode(!0);try{t[r]._=e.scope}catch(e){}bindNode(t[r],s,!0),n.insertBefore(s,e.mark),e.nodeMap[r]=[t[r],s]}const s=r;for(;r<e.nodeMap.length;r++)n.removeChild(e.nodeMap[r][1]);return e.nodeMap.splice(s,e.nodeMap.length-s),e};export const config=e=>{e.dir&&(dir=e.dir),e.ext&&(ext=e.ext),"function"==typeof e.getVariables&&(getVariables=e.getVariables),"function"==typeof e.createTmpNode&&(createTmpNode=e.createTmpNode),"function"==typeof e.literalsCode&&(literalsCode=e.literalsCode),"function"==typeof e.functionCode&&(functionCode=e.functionCode),"function"==typeof e.handleArray&&(handleArray=e.handleArray)};const getCEName=e=>e.tagName.includes("-")?e.tagName.toLowerCase():e.hasAttribute("is")?e.getAttribute("is"):void 0;export const throttle=(e,t=41)=>{let o;return(...n)=>{clearTimeout(o),o=setTimeout((()=>e(...n)),t)}};const objectPool=new WeakMap,importPool=new WeakSet,addListener=(e,t,o)=>{getVariables(t).forEach((t=>{let n="",r=e,s=0,a=t.split(".");for([s,n]of a.entries()){if(s===a.length-1)break;if(null===r||"object"!=typeof r||!Reflect.has(r,n))return;if(Array.isArray(r[n])&&s===a.length-2)break;r=r[n]}if(null!==r&&"object"==typeof r&&(!Object.getOwnPropertyDescriptor(r,n)||Object.getOwnPropertyDescriptor(r,n).configurable))if(objectPool.has(r)){const e=objectPool.get(r);if(e.has(n))e.get(n).add(o);else{const t=new Set([o]);e.set(n,t);let s=r[n];Object.defineProperty(r,n,{get:()=>s,set:e=>{s!==e&&(s=e,t.forEach((e=>e())))}})}}else{const e=new Set([o]);objectPool.set(r,new Map([[n,e]]));let t=r[n];Object.defineProperty(r,n,{get:()=>t,set:o=>{t!==o&&(t=o,e.forEach((e=>e())))}})}}))},ceMap=Object.create(null),disposeCE=(e,t)=>{if(e.querySelectorAll("*:not(:defined)").forEach((e=>importCE(e))),ceMap[t].shadowRoot&&(e.attachShadow({mode:"open"}),e.shadowRoot.appendChild(ceMap[t].shadowRoot.create(e))),ceMap[t].innerHTML||ceMap[t].outerHTML){const o=(ceMap[t].innerHTML||ceMap[t].outerHTML).create(e);if(!ceMap[t].shadowRoot){const t=Array.from(o.querySelectorAll("slot")),n=t.reduce(((e,t)=>(e[t.getAttribute("name")||""]=t,e)),{}),r=Array.from(e.childNodes);for(const e of r){const t="function"==typeof e.getAttribute&&e.getAttribute("slot")||"";n[t]&&n[t].parentNode.insertBefore(e,n[t])}for(const e of t)e.parentNode.removeChild(e)}if(ceMap[t].outerHTML){for(;o.firstChild;)e.parentElement.insertBefore(o.firstChild,e);e.parentElement.removeChild(e)}else e.appendChild(o)}"function"==typeof e.ready&&e.ready()};let tmp=null;const importCE=(e,t=void 0)=>{if(t=t??getCEName(e),importPool.has(e))return;if(importPool.add(e),void 0!==customElements.get(t))return void disposeCE(e,t);const o=e.nodeName.includes("-");let n=dir;if(e.attributes.dir&&e.attributes.dir.nodeValue){const t=e.attributes.dir.nodeValue;e.removeAttribute("dir"),n=t.startsWith("/")||t.startsWith("./")?t:`${n}/${t}`}import(`${n}/${t}.${ext}`).then((n=>{void 0===customElements.get(t)&&(ceMap[t]=Object.create(null),"string"==typeof n.innerHTML&&(ceMap[t].innerHTML=bind(n.innerHTML)),"string"==typeof n.outerHTML&&(ceMap[t].outerHTML=bind(n.outerHTML)),"string"==typeof n.shadowRoot&&(ceMap[t].shadowRoot=bind(n.shadowRoot)),o?customElements.define(t,n.default):customElements.define(t,n.default,{extends:e.nodeName.toLowerCase()})),disposeCE(e,t)})).catch((e=>{console.error(e)}))},disposeNode=(e,t)=>{const o=t.nodeValue;if(null===o.match(/{{(.*?)}}/))return;const n=new Function("scope",literalsCode(o));addListener(e,o,throttle((()=>t.nodeValue=n.call(t,e)))),t.nodeValue=n.call(t,e)},disposeAttrValue=(e,t,o,n)=>{if(!n.startsWith("{{")||!n.endsWith("}}")||n.slice(2).includes("{{")){const r=new Function("scope",literalsCode(n));return()=>o.nodeValue=r.call(t,e)}const r=new Function("scope",functionCode(n.slice(2,-2)));return()=>{const n=r.call(t,e);switch(n){case!0:o.nodeValue="",t.attributes.setNamedItem(o);break;case!1:t.removeAttribute(o.nodeName);break;default:o.nodeValue=n,t.attributes.setNamedItem(o)}}},disposeSpecialAttr=(e,t,o,n)=>{const r=t.ownerElement;let s=t.nodeName;if(s.startsWith("on")){if(r.removeAttribute(s),!o.includes("(")){const t=o.split(".");let n="",a=e,i=0;for([i,n]of t.entries()){if(i===t.length-1)break;if(null===a||"object"!=typeof a||!Reflect.has(a,n)){a={};break}a=a[n]}if("function"==typeof a[n])return r[s]=e=>a[n](e),!0}const t=new Function("scope","event",functionCode(o));return r[s]=o=>t.call(r,e,o),!0}if("connect"===s){r.removeAttribute(s);const n=new Function("scope",functionCode(o)),a=createTmpNode("节点断开重连的标记"),i=()=>{n(e)?a.parentNode?.replaceChild(r,a):r.parentNode?.replaceChild(a,r)};return addListener(e,t.nodeValue,throttle((()=>i()))),i(),!0}if("each"===s){r.removeAttribute(s);let n={ownerElement:r,scope:e};if(Reflect.has(e,o)){const r=()=>n=handleArray(n,e[o]);return addListener(e,t.nodeValue,throttle((()=>r()))),r(),!0}const a=new Function("scope",functionCode(o));return handleArray(n,a(e)),!0}if(n){r.removeAttribute(s);const n=new Function("scope",functionCode(o));s.includes("-")&&(s=s.split("-").map(((e,t)=>e&&t?e[0].toUpperCase()+e.slice(1):e)).join(""));const a=()=>{const t=n(e);r[s]="function"==typeof t?t.bind(e):t};return addListener(e,t.nodeValue,throttle((()=>a()))),a(),!0}return!1},disposeAttr=(e,t,o)=>{const n=t.nodeValue;if(null===n.match(/{{(.*?)}}/))return;if(n.startsWith("{{")&&n.endsWith("}}")&&disposeSpecialAttr(e,t,n.slice(2,-2),o))return;const r=disposeAttrValue(e,t.ownerElement,t,n);addListener(e,n,throttle((()=>r()))),r()};export const bindNode=(e,t,o)=>{const n=o?[t]:Array.from(t.childNodes);for(const o of n){if(o.attributes)for(const n of Array.from(o.attributes))if(disposeAttr(e,n,getCEName(o)),"each"===n.nodeName&&n.nodeValue.startsWith("{{")&&n.nodeValue.endsWith("}}"))return t;if(o.childNodes&&bindNode(e,o),3===o.nodeType&&null!==o.nodeValue&&disposeNode(e,o),1===o.nodeType){const e=getCEName(o);e&&importCE(o,e)}}return t};export const bind=e=>{const t=document.createElement("template");return t.innerHTML=e,{create:e=>bindNode(e,document.importNode(t.content,!0))}};const style=document.createElement("style");style.innerHTML="\n*:not(:defined) {\n    display: none\n}\n",document.head.appendChild(style),addEventListener("DOMContentLoaded",(()=>document.querySelectorAll("*:not(:defined)").forEach((e=>importCE(e)))));class EventBus{value=void 0;targets=new Map;add(e,t=Object.create(null)){this.targets.set(e,t),t.preValue&&void 0!==this.value&&e(...this.value)}remove(e){this.targets.delete(e)}dispatch(...e){return this.value=e,Promise.allSettled(this.targets.entries().map((([t,{once:o}])=>(o&&this.targets.delete(t),t(...e)))))}}const eventBusObj=Object.create(null),eventBus=Object.defineProperties(Object.create(null),{add:{value:(e,t,o)=>{Reflect.has(eventBusObj,e)||(eventBusObj[e]=new EventBus),eventBusObj[e].add(t,o)}},remove:{value:(e,t)=>{Reflect.has(eventBusObj,e)&&eventBusObj[e].remove(t)}},dispatch:{value:(e,...t)=>(Reflect.has(eventBusObj,e)||(eventBusObj[e]=new EventBus),eventBusObj[e].dispatch(...t))}});export const useEvent=()=>eventBus;export const useRef=e=>{const t=Object.create(null);for(const o of e.querySelectorAll("[ref]"))t[o.attributes.ref.nodeValue]=o;return t};export const useAttr=e=>{const t=Object.create(null);for(const o of e.attributes)t[o.nodeName]=o.nodeValue;return t};export const useWatch=e=>(t,o=!1)=>{for(const[n,r]of Object.entries(t)){if("function"!=typeof r)continue;let t=e[n];Object.defineProperty(e,n,{get:()=>t,set:e=>{if(!1!==r(e,t))return t=e}}),o&&r(t,t)}};
+let dir="./comp",ext="mjs",getVariables=e=>{const t=e.match(/\{\{.+?}}/g);if(!t)return new Set;const o=new Set,n=new Set(["true","false","null","undefined","this","new","typeof","in","instanceof"]);return t.forEach((e=>{const t=e.slice(2,-2).match(/\b[a-zA-Z_$][\w$]*(?:\s*\.\s*[a-zA-Z_$][\w$]*)*(?!\s*\()/g);t&&t.forEach((e=>{n.has(e)||o.add(e)}))})),o},createTmpNode=(e="")=>document.createTextNode(""),literalsCode=e=>`with (scope) {\n\treturn \`${e.replace(/{{(.*?)}}/g,((e,t)=>`\${${t}}`))}\` \n}`,functionCode=e=>`with (scope) {\n\treturn ${e} \n}`,handleArray=(e,t)=>{const o=e.ownerElement;if(e.nodeMap||(e.nodeMap=[],e.mark=createTmpNode("数组结束标记"),o.parentNode.replaceChild(e.mark,o),e.ownerElement=o.cloneNode(!0)),!Array.isArray(t))return e;const n=e.mark.parentNode;let r=0;for(;r<t.length;r++)if(void 0!==e.nodeMap[r]){if(e.nodeMap[r][0]!==t[r]){const s=o.cloneNode(!0);try{t[r]._=e.scope}catch(e){}bindNode(t[r],s,!0),n.replaceChild(s,e.nodeMap[r][1]),e.nodeMap[r]=[t[r],s]}}else{const s=o.cloneNode(!0);try{t[r]._=e.scope}catch(e){}bindNode(t[r],s,!0),n.insertBefore(s,e.mark),e.nodeMap[r]=[t[r],s]}const s=r;for(;r<e.nodeMap.length;r++)n.removeChild(e.nodeMap[r][1]);return e.nodeMap.splice(s,e.nodeMap.length-s),e};export const config=e=>{e.dir&&(dir=e.dir),e.ext&&(ext=e.ext),"function"==typeof e.getVariables&&(getVariables=e.getVariables),"function"==typeof e.createTmpNode&&(createTmpNode=e.createTmpNode),"function"==typeof e.literalsCode&&(literalsCode=e.literalsCode),"function"==typeof e.functionCode&&(functionCode=e.functionCode),"function"==typeof e.handleArray&&(handleArray=e.handleArray)};const getCEName=e=>e.tagName.includes("-")?e.tagName.toLowerCase():e.hasAttribute("is")?e.getAttribute("is"):void 0;export const throttle=(e,t=41)=>{let o;return(...n)=>{clearTimeout(o),o=setTimeout((()=>e(...n)),t)}};const objectPool=new WeakMap,importPool=new WeakSet,addListener=(e,t,o)=>{getVariables(t).forEach((t=>{let n="",r=e,s=0,a=t.split(".");for([s,n]of a.entries()){if(s===a.length-1)break;if(null===r||"object"!=typeof r||!Reflect.has(r,n))return;if(Array.isArray(r[n])&&s===a.length-2)break;r=r[n]}if(null!==r&&"object"==typeof r&&(!Object.getOwnPropertyDescriptor(r,n)||Object.getOwnPropertyDescriptor(r,n).configurable))if(objectPool.has(r)){const e=objectPool.get(r);if(e.has(n))e.get(n).add(o);else{const t=new Set([o]);e.set(n,t);let s=r[n];Object.defineProperty(r,n,{get:()=>s,set:e=>{s!==e&&(s=e,t.forEach((e=>e())))}})}}else{const e=new Set([o]);objectPool.set(r,new Map([[n,e]]));let t=r[n];Object.defineProperty(r,n,{get:()=>t,set:o=>{t!==o&&(t=o,e.forEach((e=>e())))}})}}))},ceMap=Object.create(null),disposeCE=(e,t)=>{if(e.querySelectorAll("*:not(:defined)").forEach((e=>importCE(e))),ceMap[t].shadowRoot&&(e.attachShadow({mode:"open"}),e.shadowRoot.appendChild(ceMap[t].shadowRoot.create(e))),ceMap[t].innerHTML||ceMap[t].outerHTML){const o=(ceMap[t].innerHTML||ceMap[t].outerHTML).create(e);if(!ceMap[t].shadowRoot){const t=Array.from(o.querySelectorAll("slot")),n=t.reduce(((e,t)=>(e[t.getAttribute("name")||""]=t,e)),{}),r=Array.from(e.childNodes);for(const e of r){const t="function"==typeof e.getAttribute&&e.getAttribute("slot")||"";n[t]&&n[t].parentNode.insertBefore(e,n[t])}for(const e of t)e.parentNode.removeChild(e)}if(ceMap[t].outerHTML){for(;o.firstChild;)e.parentElement.insertBefore(o.firstChild,e);e.parentElement.removeChild(e)}else e.appendChild(o)}"function"==typeof e.ready&&e.ready()};let tmp=null;const importCE=(e,t=void 0)=>{if(t=t??getCEName(e),importPool.has(e))return;if(importPool.add(e),void 0!==customElements.get(t))return void disposeCE(e,t);const o=e.nodeName.includes("-");let n=dir;if(e.attributes.dir&&e.attributes.dir.nodeValue){const t=e.attributes.dir.nodeValue;e.removeAttribute("dir"),n=t.startsWith("/")||t.startsWith("./")?t:`${n}/${t}`}import(`${n}/${t}.${ext}`).then((n=>{void 0===customElements.get(t)&&(ceMap[t]=Object.create(null),"string"==typeof n.innerHTML&&(ceMap[t].innerHTML=bind(n.innerHTML)),"string"==typeof n.outerHTML&&(ceMap[t].outerHTML=bind(n.outerHTML)),"string"==typeof n.shadowRoot&&(ceMap[t].shadowRoot=bind(n.shadowRoot)),o?customElements.define(t,n.default):customElements.define(t,n.default,{extends:e.nodeName.toLowerCase()})),disposeCE(e,t)})).catch((e=>{console.error(e)}))},disposeNode=(e,t)=>{const o=t.nodeValue;if(null===o.match(/{{(.*?)}}/))return;const n=new Function("scope",literalsCode(o));addListener(e,o,throttle((()=>t.nodeValue=n.call(t,e)))),t.nodeValue=n.call(t,e)},disposeAttrValue=(e,t,o,n)=>{if(!n.startsWith("{{")||!n.endsWith("}}")||n.slice(2).includes("{{")){const r=new Function("scope",literalsCode(n));return()=>o.nodeValue=r.call(t,e)}const r=new Function("scope",functionCode(n.slice(2,-2)));return()=>{const n=r.call(t,e);switch(n){case!0:o.nodeValue="",t.attributes.setNamedItem(o);break;case!1:t.removeAttribute(o.nodeName);break;default:o.nodeValue=n,t.attributes.setNamedItem(o)}}},disposeSpecialAttr=(e,t,o,n)=>{const r=t.ownerElement;let s=t.nodeName;if(s.startsWith("on")){if(r.removeAttribute(s),!o.includes("(")){const t=o.split(".");let n="",a=e,i=0;for([i,n]of t.entries()){if(i===t.length-1)break;if(null===a||"object"!=typeof a||!Reflect.has(a,n)){a={};break}a=a[n]}if("function"==typeof a[n])return r[s]=e=>a[n](e),!0}const t=new Function("scope","event",functionCode(o));return r[s]=o=>t.call(r,e,o),!0}if("connect"===s){r.removeAttribute(s);const n=new Function("scope",functionCode(o)),a=createTmpNode("节点断开重连的标记"),i=()=>{n(e)?a.parentNode?.replaceChild(r,a):r.parentNode?.replaceChild(a,r)};return addListener(e,t.nodeValue,throttle((()=>i()))),i(),!0}if("each"===s){r.removeAttribute(s);let n={ownerElement:r,scope:e};if(Reflect.has(e,o)){const r=()=>n=handleArray(n,e[o]);return addListener(e,t.nodeValue,throttle((()=>r()))),r(),!0}const a=new Function("scope",functionCode(o));return handleArray(n,a(e)),!0}if(n){r.removeAttribute(s);const n=new Function("scope",functionCode(o));s.includes("-")&&(s=s.split("-").map(((e,t)=>e&&t?e[0].toUpperCase()+e.slice(1):e)).join(""));const a=()=>{const t=n(e);r[s]="function"==typeof t?t.bind(e):t};return addListener(e,t.nodeValue,throttle((()=>a()))),a(),!0}return!1},disposeAttr=(e,t,o)=>{const n=t.nodeValue;if(null===n.match(/{{(.*?)}}/))return;if(n.startsWith("{{")&&n.endsWith("}}")&&disposeSpecialAttr(e,t,n.slice(2,-2),o))return;const r=disposeAttrValue(e,t.ownerElement,t,n);addListener(e,n,throttle((()=>r()))),r()};export const bindNode=(e,t,o)=>{const n=o?[t]:Array.from(t.childNodes);for(const o of n){if(o.attributes)for(const n of Array.from(o.attributes))if(disposeAttr(e,n,getCEName(o)),"each"===n.nodeName&&n.nodeValue.startsWith("{{")&&n.nodeValue.endsWith("}}"))return t;if(o.childNodes&&bindNode(e,o),3===o.nodeType&&null!==o.nodeValue&&disposeNode(e,o),1===o.nodeType){const e=getCEName(o);e&&importCE(o,e)}}return t};export const bind=e=>{const t=document.createElement("template");return t.innerHTML=e,{create:e=>bindNode(e,document.importNode(t.content,!0))}};const style=document.createElement("style");style.innerHTML="\n*:not(:defined) {\n    display: none\n}\n",document.head.appendChild(style),addEventListener("DOMContentLoaded",(()=>document.querySelectorAll("*:not(:defined)").forEach((e=>importCE(e)))));class EventBus{value=void 0;targets=new Map;add(e,t=Object.create(null)){this.targets.set(e,t),t.preValue&&void 0!==this.value&&e(...this.value)}remove(e){this.targets.delete(e)}dispatch(...e){return this.value=e,Promise.allSettled(this.targets.entries().map((([t,{once:o}])=>(o&&this.targets.delete(t),t(...e)))))}}const eventBusObj=Object.create(null),eventBus=Object.defineProperties(Object.create(null),{add:{value:(e,t,o)=>{Reflect.has(eventBusObj,e)||(eventBusObj[e]=new EventBus),eventBusObj[e].add(t,o)}},remove:{value:(e,t)=>{Reflect.has(eventBusObj,e)&&eventBusObj[e].remove(t)}},dispatch:{value:(e,...t)=>(Reflect.has(eventBusObj,e)||(eventBusObj[e]=new EventBus),eventBusObj[e].dispatch(...t))}});export const useEvent=()=>eventBus;export const useRef=e=>{const t=Object.create(null);for(const o of e.querySelectorAll("[ref]"))t[o.attributes.ref.nodeValue]=o;return t};export const useAttr=e=>{const t=Object.create(null);for(const o of e.attributes)o.nodeName.includes("-")&&(t[o.nodeName.split("-").map(((e,t)=>e&&t?e[0].toUpperCase()+e.slice(1):e)).join("")]=o.nodeValue),t[o.nodeName]=o.nodeValue;return t};export const useWatch=e=>(t,o=!1)=>{for(const[n,r]of Object.entries(t)){if("function"!=typeof r)continue;let t=e[n];Object.defineProperty(e,n,{get:()=>t,set:e=>{if(!1!==r(e,t))return t=e}}),o&&r(t,t)}};

package/console/components/div-test.mjs

@@ -0,0 +1,11 @@
+export const innerHTML = `
+<g-popup qwe="{{true}}">
+    <div>123123</div>
+</g-popup>
+`
+
+export default class extends HTMLElement {
+    test() {
+        console.log('test')
+    }
+}

package/console/components/g-button.mjs

@@ -0,0 +1,79 @@
+import { useAttr, bind, useRef } from "../../ce.mjs";
+
+export const innerHTML = `
+<button disabled="{{!!(isDisabled || loading)}}" class="cursor-pointer relative inline-flex items-center justify-center {{sizeClass}} rounded-full backdrop-blur-2xl border shadow-[inset_0_1px_1px_rgba(255,255,255,0.8),0_4px_12px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.1),0_4px_12px_rgba(0,0,0,0.2)] font-medium transition-all {{(isDisabled || loading) ? 'opacity-50 cursor-not-allowed' : 'hover:-translate-y-0.5 active:translate-y-0 active:shadow-inner group'}} overflow-hidden {{typeClass}} {{classStr}}">
+    <!-- Highlight overlay for glass effect -->
+    <div class="absolute inset-0 rounded-full bg-gradient-to-b from-white/40 to-transparent dark:from-white/5 opacity-0 {{(isDisabled || loading) ? '' : 'group-hover:opacity-100'}} transition-opacity pointer-events-none"></div>
+    <div class="relative z-10 flex items-center justify-center gap-2">
+        <svg class="animate-spin h-4 w-4 text-current {{loading ? '' : 'hidden'}}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <slot name="prefix"></slot>
+        <slot name="icon"></slot>
+        <div connect="{{loading && loadingText}}" style="display: contents">{{loadingText}}</div>
+        <div style="display: {{loading && loadingText ? 'none' : 'contents'}}">
+            <g-icon connect="{{icon && !isIconUrl}}" name="{{icon}}" class="w-4 h-4"></g-icon>
+            <img connect="{{isIconUrl}}" src="{{isIconUrl ? icon : false}}" class="w-4 h-4" />
+            <slot></slot>
+        </div>
+        <slot name="suffix"></slot>
+    </div>
+</button>
+`
+
+const typeStyles = {
+    default: 'bg-white/40 dark:bg-gray-800/40 border-white/60 dark:border-white/10 text-gray-800 dark:text-gray-100 hover:bg-white/60 dark:hover:bg-gray-700/60',
+    primary: 'bg-blue-500/10 dark:bg-blue-500/20 border-blue-500/20 dark:border-blue-500/10 text-blue-600 dark:text-blue-400 hover:bg-blue-500/20 dark:hover:bg-blue-500/30',
+    success: 'bg-green-500/10 dark:bg-green-500/20 border-green-500/20 dark:border-green-500/10 text-green-600 dark:text-green-400 hover:bg-green-500/20 dark:hover:bg-green-500/30',
+    warning: 'bg-orange-500/10 dark:bg-orange-500/20 border-orange-500/20 dark:border-orange-500/10 text-orange-600 dark:text-orange-400 hover:bg-orange-500/20 dark:hover:bg-orange-500/30',
+    danger: 'bg-red-500/10 dark:bg-red-500/20 border-red-500/20 dark:border-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20 dark:hover:bg-red-500/30'
+}
+
+const plainTypeStyles = {
+    default: 'bg-transparent border-white/60 dark:border-white/10 text-gray-800 dark:text-gray-100 hover:bg-white/10 dark:hover:bg-gray-700/20',
+    primary: 'bg-transparent border-blue-500/20 dark:border-blue-500/10 text-blue-600 dark:text-blue-400 hover:bg-blue-500/10 dark:hover:bg-blue-500/20',
+    success: 'bg-transparent border-green-500/20 dark:border-green-500/10 text-green-600 dark:text-green-400 hover:bg-green-500/10 dark:hover:bg-green-500/20',
+    warning: 'bg-transparent border-orange-500/20 dark:border-orange-500/10 text-orange-600 dark:text-orange-400 hover:bg-orange-500/10 dark:hover:bg-orange-500/20',
+    danger: 'bg-transparent border-red-500/20 dark:border-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/10 dark:hover:bg-red-500/20'
+}
+
+const sizeStyles = {
+    large: 'px-6 py-2.5 text-base',
+    normal: 'px-4 py-2 text-sm',
+    small: 'px-3 py-1.5 text-xs',
+    mini: 'px-2.5 py-1 text-[11px]'
+}
+
+export default class extends HTMLElement {
+    text = ''
+    icon = ''
+    isIconUrl = false
+    classStr = ''
+    typeClass = ''
+    sizeClass = ''
+    isDisabled = false
+    loadingText = ''
+
+    constructor() {
+        super()
+        this.style.display = 'inline-block'
+        const attr = useAttr(this)
+        this.text = attr.text || ''
+        this.icon = attr.icon || ''
+        this.isIconUrl = this.icon.startsWith('http') || this.icon.startsWith('/') || this.icon.startsWith('data:')
+        this.classStr = attr.class || ''
+        this.isDisabled = attr.disabled !== undefined && attr.disabled !== 'false'
+        this.loadingText = attr.loadingText || ''
+
+        const type = attr.type || 'default'
+        const isPlain = attr.plain !== undefined && attr.plain !== 'false'
+        const size = attr.size || 'normal'
+
+        this.typeClass = isPlain
+            ? (plainTypeStyles[type] || plainTypeStyles.default)
+            : (typeStyles[type] || typeStyles.default)
+
+        this.sizeClass = sizeStyles[size] || sizeStyles.normal
+    }
+}

package/console/components/g-cell.mjs

@@ -0,0 +1,129 @@
+import { useAttr, bind, useRef } from "../../ce.mjs";
+
+export const innerHTML = `
+<!-- Main Cell Container -->
+<div class="group relative flex items-center justify-between p-4 bg-white/40 dark:bg-gray-800/40 backdrop-blur-2xl border-b border-white/60 dark:border-white/10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.8),0_4px_12px_rgba(0,0,0,0.02)] dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.1),0_4px_12px_rgba(0,0,0,0.1)] transition-all hover:bg-white/60 dark:hover:bg-gray-700/60 {{clickable ? 'cursor-pointer active:bg-white/30 dark:active:bg-gray-800/80 active:translate-y-[1px]' : ''}} {{classStr}}">
+    <!-- Highlight overlay for glass effect on hover -->
+    <div class="absolute inset-0 bg-gradient-to-b from-white/40 to-transparent dark:from-white/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none {{isLast ? 'rounded-b-2xl' : ''}} {{isFirst ? 'rounded-t-2xl' : ''}}"></div>
+    
+    <!-- Left Section: Icon + Title + Label -->
+    <div class="relative z-10 flex items-center gap-3 flex-1 min-w-0">
+        <!-- Icon Slot -->
+        <div class="flex-shrink-0 text-gray-500 dark:text-gray-400 {{icon ? '' : 'hidden'}}">
+            <span ref="iconMark"></span>
+        </div>
+        
+        <!-- Text Content -->
+        <div class="flex flex-col flex-1 min-w-0">
+            <div class="text-[15px] font-medium text-gray-800 dark:text-gray-100 truncate">{{title}}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5 {{label ? '' : 'hidden'}}">{{label}}</div>
+        </div>
+    </div>
+
+    <!-- Right Section: Value + Arrow Slot -->
+    <div class="relative z-10 flex items-center gap-2 pl-4 flex-shrink-0">
+        <!-- Value Content -->
+        <div class="text-[14px] text-gray-500 dark:text-gray-400 text-right">{{value}}</div>
+        
+        <!-- Arrow / Right Icon Slot -->
+        <div class="flex-shrink-0 text-gray-400 dark:text-gray-500 {{showArrow ? '' : 'hidden'}}">
+            <span ref="arrowMark"></span>
+        </div>
+        
+        <slot name="right-icon"></slot>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    title = ''
+    value = ''
+    label = ''
+    icon = ''
+    isIconUrl = false
+    arrowDirection = ''
+    showArrow = false
+    clickable = false
+    isClickableHover = false
+    classStr = ''
+
+    // For grouped rounded corners if we support cell-group later
+    isFirst = false
+    isLast = false
+
+    constructor() {
+        super()
+        this.style.display = 'block'
+        const attr = useAttr(this)
+
+        this.title = attr.title || ''
+        this.value = attr.value || ''
+        this.label = attr.label || ''
+
+        this.icon = attr.icon || ''
+        this.isIconUrl = this.icon.startsWith('http') || this.icon.startsWith('/') || this.icon.startsWith('data:')
+
+        // Arrow direction: 'right', 'down', 'up', 'left'. Default is empty (no arrow)
+        // If is-link is present, implicitly show right arrow unless specified
+        const isLink = attr['is-link'] !== undefined && attr['is-link'] !== 'false'
+        this.arrowDirection = attr['arrow-direction'] || (isLink ? 'right' : '')
+        this.showArrow = !!this.arrowDirection
+
+        // Clickable implies hover effect and pointer cursor
+        this.clickable = this.showArrow || (attr.clickable !== undefined && attr.clickable !== 'false')
+
+        this.classStr = attr.class || ''
+
+        // Helper classes for borderline and border-radius rounding (handled externally via cell-group usually, but allowing override)
+        this.isFirst = attr['round-top'] !== undefined && attr['round-top'] !== 'false'
+        this.isLast = attr['border'] === 'false' || (attr['round-bottom'] !== undefined && attr['round-bottom'] !== 'false')
+
+        // Adjust border logic
+        if (this.isLast || attr.border === 'false') {
+            this.classStr = this.classStr.replace('border-b', '') + ' border-transparent'
+        }
+        if (this.isFirst) {
+            this.classStr += ' rounded-t-2xl'
+        }
+        if (this.isLast) {
+            this.classStr += ' rounded-b-2xl'
+        }
+        if (!this.isFirst && !this.isLast && attr.round === 'true') {
+            this.classStr += ' rounded-2xl border-transparent'
+            this.isFirst = true
+            this.isLast = true
+        }
+    }
+
+    ready() {
+        const { iconMark, arrowMark } = useRef(this)
+
+        // Handle Left Icon
+        if (this.icon) {
+            const iconHtml = this.isIconUrl
+                ? `<img src="${this.icon}" class="w-5 h-5" />`
+                : `<g-icon name="${this.icon}" class="w-5 h-5"></g-icon>`
+            const iconNode = bind(iconHtml).create(this)
+            iconMark.parentElement.insertBefore(iconNode, iconMark)
+        }
+        iconMark.parentElement.removeChild(iconMark)
+
+        // Handle Right Arrow
+        if (this.showArrow) {
+            // Map direction to standard icons if we had them or just use svg path directly
+            // M9 5l7 7-7 7 (right)
+            // M19 9l-7 7-7-7 (down)
+            // M5 15l7-7 7 7 (up)
+            // M15 19l-7-7 7-7 (left)
+            let pathD = 'M9 5l7 7-7 7' // default right
+            if (this.arrowDirection === 'down') pathD = 'M19 9l-7 7-7-7'
+            else if (this.arrowDirection === 'up') pathD = 'M5 15l7-7 7 7'
+            else if (this.arrowDirection === 'left') pathD = 'M15 19l-7-7 7-7'
+
+            const arrowHtml = `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${pathD}"></path></svg>`
+            const arrowNode = bind(arrowHtml).create(this)
+            arrowMark.parentElement.insertBefore(arrowNode, arrowMark)
+        }
+        arrowMark.parentElement.removeChild(arrowMark)
+    }
+}

package/console/components/g-col.mjs

@@ -0,0 +1,38 @@
+import { useAttr } from "../../ce.mjs";
+
+export default class extends HTMLElement {
+    constructor() {
+        super()
+        this.style.display = 'block'
+        this.style.boxSizing = 'border-box'
+
+        const attr = useAttr(this)
+
+        const span = attr.span ? Number(attr.span) : 24
+        const offset = attr.offset ? Number(attr.offset) : 0
+        const classStr = attr.class || ''
+
+        // Convert span 1-24 to basis/% widths directly on host element
+        if (span) {
+            const percentage = (span / 24) * 100
+            this.style.width = `${percentage}%`
+            this.style.flex = `0 0 ${percentage}%`
+            this.style.maxWidth = `${percentage}%`
+        } else {
+            this.style.width = '0'
+            this.style.flex = '0 0 0'
+            this.style.maxWidth = '0'
+            this.style.overflow = 'hidden'
+        }
+
+        // Convert offset 1-24 to margin-left natively
+        if (offset) {
+            const offsetPerc = (offset / 24) * 100
+            this.style.marginLeft = `${offsetPerc}%`
+        }
+
+        if (classStr) {
+            this.className = this.className ? this.className + ' ' + classStr : classStr
+        }
+    }
+}

package/console/components/g-field.mjs

@@ -0,0 +1,162 @@
+import { useAttr, useWatch } from "../../ce.mjs";
+
+export const innerHTML = `
+<div class="flex items-center w-full min-h-[44px] px-3 bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-xl border border-gray-200 dark:border-gray-700 transition-all duration-300 {{focusClass}} {{disabledClass}} {{readonlyClass}}">
+    <!-- Prefix Icon Option (e.g. search icon) -->
+    <div class="mr-2 text-gray-400 dark:text-gray-500 flex items-center justify-center {{leftIcon ? '' : 'hidden'}}">
+        <g-icon name="{{leftIcon}}" class="w-4 h-4"></g-icon>
+    </div>
+
+    <!-- Label Option -->
+    <div class="mr-4 text-sm whitespace-nowrap text-gray-700 dark:text-gray-300 font-medium select-none {{label ? '' : 'hidden'}}">
+        {{label}}
+    </div>
+
+    <!-- Input Area -->
+    <div class="flex-1 relative flex items-center h-full">
+        <input 
+            type="{{type}}" 
+            class="w-full h-full bg-transparent border-none outline-none text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 {{disabled || readonly ? 'cursor-not-allowed text-gray-500 dark:text-gray-400' : ''}}"
+            placeholder="{{placeholder}}"
+            value="{{value}}"
+            {{disabled ? 'disabled' : ''}}
+            {{readonly ? 'readonly' : ''}}
+            oninput="{{handleInput}}"
+            onfocus="{{handleFocus}}"
+            onblur="{{handleBlur}}"
+            onchange="{{handleChange}}"
+            onkeydown="{{handleKeyDown}}"
+        />
+        
+        <!-- Clear Icon -->
+        <div class="ml-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer transition-colors flex items-center justify-center {{clearable && value && !disabled && !readonly ? '' : 'hidden'}}" onclick="{{clear}}">
+            <g-icon name="close" class="w-4 h-4 bg-gray-200/50 dark:bg-gray-700/50 rounded-full p-0.5 hover:bg-gray-300 dark:hover:bg-gray-600"></g-icon>
+        </div>
+
+        <!-- Right Icon Option -->
+        <div class="ml-2 text-gray-400 dark:text-gray-500 flex items-center justify-center cursor-pointer {{rightIcon ? '' : 'hidden'}}" onclick="{{onRightIconClick}}">
+            <g-icon name="{{rightIcon}}" class="w-4 h-4"></g-icon>
+        </div>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    value = ''
+    type = 'text'
+    placeholder = '请输入内容'
+    label = ''
+    leftIcon = ''
+    rightIcon = ''
+
+    // Using string boolean values from attributes
+    disabled = false
+    readonly = false
+    clearable = false
+
+    focusClass = 'hover:border-gray-300 dark:hover:border-gray-600'
+    disabledClass = ''
+    readonlyClass = ''
+    form = null
+    name = ''
+
+    constructor() {
+        super()
+        this.style.display = 'block'
+        this.style.width = '100%'
+
+        const attr = useAttr(this)
+
+        this.value = attr.value || ''
+        this.type = attr.type || 'text'
+        this.placeholder = attr.placeholder || '请输入内容'
+        this.label = attr.label || ''
+        this.leftIcon = attr['left-icon'] || ''
+        this.rightIcon = attr['right-icon'] || ''
+        this.name = this.name || attr.name || ''
+
+        this.disabled = attr.disabled === 'true' || attr.disabled === ''
+        this.readonly = attr.readonly === 'true' || attr.readonly === ''
+        this.clearable = attr.clearable === 'true' || attr.clearable === ''
+
+        this._updateClasses()
+
+        const watch = useWatch(this)
+        // Ensure changing disabled/readonly state dynamically also acts
+        watch({
+            disabled: () => this._updateClasses(),
+            readonly: () => this._updateClasses()
+        })
+
+        this.form = this.closest('g-form')
+
+        this.updateFormValue()
+    }
+
+    updateFormValue() {
+
+        if (this.form && this.name) {
+
+            this.form.data[this.name] = this.value
+        }
+    }
+
+    _updateClasses() {
+        if (this.disabled) {
+            this.disabledClass = 'opacity-60 bg-gray-50 dark:bg-gray-900/40 border-gray-100 dark:border-gray-800'
+            this.focusClass = ''
+        } else if (this.readonly) {
+            this.readonlyClass = 'bg-gray-50 dark:bg-gray-900/40'
+            this.focusClass = ''
+        } else {
+            this.disabledClass = ''
+            this.readonlyClass = ''
+            this.focusClass = 'hover:border-gray-300 dark:hover:border-gray-600 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/20 dark:focus-within:border-blue-400'
+        }
+        if (this.update) this.update()
+    }
+
+    handleInput(e) {
+        this.value = e.target.value
+        if (this.update) this.update()
+        if (this.oninput) this.oninput(e)
+        this.updateFormValue()
+    }
+
+    handleChange(e) {
+        if (this.onchange) this.onchange(e)
+    }
+
+    handleFocus(e) {
+        if (this.onfocus) this.onfocus(e)
+    }
+
+    handleBlur(e) {
+        // Small delay so clear button click can register before focus is lost entirely if we base logic on focus
+        if (this.onblur) this.onblur(e)
+    }
+
+    handleKeyDown(e) {
+        if (e.key === 'Enter' && this.onenter) {
+            this.onenter(e)
+        }
+    }
+
+    clear() {
+        if (this.disabled || this.readonly) return
+        this.value = ''
+        const input = this.querySelector('input')
+        if (input) {
+            input.value = ''
+            input.focus()
+            // Dispatch input event artificially for watchers
+            input.dispatchEvent(new Event('input', { bubbles: true }))
+        }
+        if (this.update) this.update()
+        if (this.onclear) this.onclear()
+    }
+
+    onRightIconClick(e) {
+        if (this.onrightclick) this.onrightclick(e)
+    }
+}

package/console/components/g-form.mjs

@@ -0,0 +1,11 @@
+
+export default class extends HTMLElement {
+
+    constructor() {
+
+        super()
+
+        this.data = this.data || {}
+        this.onsubmit = this.onsubmit || (() => 1)
+    }
+}

package/console/components/g-icon.mjs

@@ -0,0 +1,82 @@
+import { useAttr, useRef } from "../../ce.mjs";
+
+export const innerHTML = `
+<svg ref="svg" class="{{classStr}}" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path ref="path" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+</svg>
+<div class="{{hasDot ? '' : 'hidden'}} absolute top-0 right-0 transform translate-x-[20%] -translate-y-[20%] flex h-2.5 w-2.5">
+    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+    <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-red-500 border-[1.5px] border-white dark:border-gray-800"></span>
+</div>
+<div class="{{badge ? '' : 'hidden'}} absolute top-0 right-0 transform translate-x-[30%] -translate-y-[30%] flex items-center justify-center z-10">
+    <span class="relative inline-flex rounded-full bg-red-500 text-white text-[10px] items-center justify-center px-1 min-w-[16px] h-[16px] border-[1.5px] border-white dark:border-gray-800 font-medium whitespace-nowrap leading-none shadow-sm">{{badge}}</span>
+</div>
+`
+
+// Icon paths mapped by name
+const icons = {
+    system: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z',
+    system_inner: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z', // Need to add multiple paths if needed, here we simplify or append
+    user: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
+    role: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.956 11.956 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
+    menu: 'M4 6h16M4 12h16M4 18h16',
+    tools: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z', // Combining paths for simplicity for now
+    search: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
+    button: 'M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z',
+    home: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
+    edit: 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z',
+    delete: 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16',
+    add: 'M12 4v16m8-8H4',
+    check: 'M5 13l4 4L19 7',
+    close: 'M6 18L18 6M6 6l12 12',
+    info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+    warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+    view: 'M15 12a3 3 0 11-6 0 3 3 0 016 0zM2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z',
+    logout: 'M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1',
+    upload: 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12',
+    download: 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4',
+    refresh: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'
+}
+
+export default class extends HTMLElement {
+    // name = ''
+    classStr = ''
+    size = ''
+    color = ''
+    hasDot = false
+    badge = ''
+
+    constructor() {
+        super()
+        this.style.display = 'inline-flex'
+        this.style.alignItems = 'center'
+        this.style.justifyContent = 'center'
+        this.style.position = 'relative'
+
+        const attr = useAttr(this)
+        this.name = this.name || attr.name || ''
+        this.size = attr.size || ''
+        this.color = attr.color || ''
+        this.badge = attr.badge || ''
+        this.hasDot = !this.badge && attr.dot !== undefined && attr.dot !== 'false'
+        this.classStr = attr.class || (this.size ? '' : 'w-5 h-5')
+    }
+
+    ready() {
+        const { path, svg } = useRef(this)
+
+        if (this.size) {
+            svg.style.width = this.size
+            svg.style.height = this.size
+        }
+        if (this.color) {
+            svg.style.color = this.color
+        }
+
+        if (this.name && icons[this.name]) {
+            path.setAttribute('d', icons[this.name])
+        } else {
+            path.setAttribute('d', 'M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z') // default info icon
+        }
+    }
+}