@diniz/webcomponents 1.0.5 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{app-layout-D81L3er1.js → app-layout-Dq81XbRZ.js} +1 -1
- package/dist/assets/{checkbox-demo-page-n4kXIN81.js → checkbox-demo-page-j3Ylexv2.js} +1 -1
- package/dist/assets/{dashboard-page-D9gcDgAT.js → dashboard-page-DAzkVezy.js} +1 -1
- package/dist/assets/{date-picker-demo-AQIyV-D4.js → date-picker-demo-DH82BhNJ.js} +1 -1
- package/dist/assets/{index-DJpTIOwN.js → index-CzQ41fnj.js} +2 -2
- package/dist/assets/{input-demo-DX3FkdO8.js → input-demo-CzyQGRhV.js} +10 -51
- package/dist/assets/{modal-demo-page-A4aRApyB.js → modal-demo-page-C8gJP8BA.js} +1 -1
- package/dist/assets/{select-demo-page-Dg5ajGaj.js → select-demo-page-BORrccnw.js} +1 -1
- package/dist/assets/table-CSpGgpLR.js +12 -0
- package/dist/assets/{table-demo-D0gN-zGB.js → table-demo-xve_6QOI.js} +7 -9
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/dist/assets/table-BoHSrBty.js +0 -12
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var f=Object.defineProperty;var g=(r,e,o)=>e in r?f(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o;var c=(r,e,o)=>g(r,typeof e!="symbol"?e+"":e,o);import{s as m}from"./index-DJpTIOwN.js";import{f as x}from"./vendor-BvJLUv9i.js";function v(r){let e=r;const o=new Set;return{get:()=>e,set:t=>{Object.is(e,t)||(e=t,o.forEach(a=>a(e)))},subscribe:t=>(o.add(t),()=>o.delete(t))}}class p extends HTMLElement{constructor(){super();c(this,"state");c(this,"signalUnsubs");this.attachShadow({mode:"open"}),this.state={},this.signalUnsubs=new Set}useSignal(o){const t=v(o),a=t.subscribe(()=>this.render());return this.signalUnsubs.add(a),t}setState(o){this.state={...this.state,...o},this.render()}connectedCallback(){this.render()}disconnectedCallback(){this.signalUnsubs.forEach(o=>o()),this.signalUnsubs.clear()}render(){}}const b=':root{--color-primary: #24ec71;--color-primary-contrast: #ffffff;--color-ink: #0f172a;--color-muted: #f1f5f9;--color-header: #f8fafc;--color-border: #e2e8f0;--color-border-strong: #cbd5f5;--color-nav-bg: #222222;--color-nav-text: #ffffff;--shadow-primary: 0 8px 18px rgba(31, 111, 235, .25);--focus-ring: #9ec5ff;--radius-pill: 999px;--radius-md: 12px;--color-page-bg: #ffffff;--color-page-text: #0f172a}body{background:var(--color-page-bg);color:var(--color-page-text);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}:host([data-ui="button"]){display:inline-block}:host([data-ui="table"]){display:block}:host([data-ui="layout"]){display:block}:host([data-ui="sidebar"]){display:block}.btn{align-items:center;border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.95rem;font-weight:600;gap:.5rem;line-height:1;padding:.65rem 1.2rem;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.6}.btn.primary{background:var(--color-primary);color:var(--color-primary-contrast);box-shadow:var(--shadow-primary)}.btn.secondary{background:var(--color-muted);color:var(--color-ink);border-color:var(--color-border-strong)}.btn.ghost{background:transparent;color:var(--color-primary);border-color:var(--color-border-strong)}.btn.has-icon{line-height:1.2}.btn .btn-icon{width:18px;height:18px;flex-shrink:0}.btn .btn-icon svg{width:100%;height:100%}.btn.icon-only{padding:.65rem;aspect-ratio:1}.btn.icon-only.sm{padding:.45rem}.btn.icon-only.lg{padding:.8rem}.btn.sm .btn-icon{width:14px;height:14px}.btn.lg .btn-icon{width:22px;height:22px}.btn.sm{font-size:.85rem;padding:.45rem .9rem;box-shadow:0 4px 12px #a7124426}.btn.md{font-size:.95rem;padding:.65rem 1.2rem}.btn.lg{font-size:1.05rem;padding:.8rem 1.5rem}.table-wrap{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}table{border-collapse:collapse;width:100%}thead{background:var(--color-header)}th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-border);font-size:.95rem;border-right:1px solid var(--color-border)}tr:last-child td{border-bottom:none}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.actions-cell{display:flex;gap:.5rem;justify-content:center}.action-btn{padding:.35rem .7rem;font-size:.8rem;border-radius:4px;cursor:pointer;border:1px solid var(--color-border-strong);background:var(--color-muted);color:var(--color-ink);transition:background-color .12s ease}.action-btn:hover{background:var(--color-border)}.action-btn.edit-btn{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary)}.action-btn.edit-btn:hover{opacity:.85}.action-btn.delete-btn{background:#ef4444;color:#fff;border-color:#ef4444}.action-btn.delete-btn:hover{opacity:.85}.app-nav{padding:1rem;background:var(--color-nav-bg);color:var(--color-nav-text)}.app-link{color:var(--color-nav-text);margin-right:1rem;text-decoration:none}.signal-demo,.theme-toggle{margin-top:16px;display:flex;align-items:center;gap:12px}.data-table{margin-top:15px}.dashboard-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:24px}.dashboard-sidebar{background:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px}.sidebar-title{margin:0 0 12px;font-size:1rem}.sidebar-nav{display:flex;flex-direction:column;gap:10px}.sidebar-link{color:var(--color-ink);text-decoration:none;font-weight:600}.dashboard-main{display:flex;flex-direction:column;gap:12px}.dashboard-actions{display:flex;flex-wrap:wrap;gap:12px}@media (max-width: 900px){.dashboard-layout{grid-template-columns:1fr}}:host([data-ui="input"]){display:block}.input-wrapper{display:flex;flex-direction:column;gap:.35rem}.input-label{font-size:.9rem;font-weight:600;color:var(--color-ink)}.input-field{padding:.6rem .85rem;font-size:.95rem;font-family:inherit;border:1.5px solid var(--color-border);border-radius:6px;background:var(--color-page-bg);color:var(--color-page-text);transition:border-color .15s ease,box-shadow .15s ease;outline:none}.input-field::placeholder{color:#94a3b8}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec7126}.input-field:disabled{background:var(--color-muted);cursor:not-allowed;opacity:.7}.input-wrapper.invalid .input-field{border-color:#ef4444}.input-wrapper.invalid .input-field:focus{box-shadow:0 0 0 3px #ef444426}.input-error{font-size:.8rem;color:#ef4444;display:flex;align-items:center;gap:.25rem}.input-error.hidden{display:none}:host([data-ui="checkbox"]){display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}:host([data-ui="checkbox"][disabled]){cursor:not-allowed;opacity:.6}.checkbox-container{display:inline-flex;align-items:center;gap:.75rem}.checkbox-box{position:relative;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--color-border, #cbd5e1);border-radius:var(--radius-sm, 4px);background:#fff;transition:all .2s;flex-shrink:0;box-sizing:border-box}.checkbox-box.size-sm{min-width:16px;max-width:16px;min-height:16px;max-height:16px}.checkbox-box.size-md{min-width:18px;max-width:18px;min-height:18px;max-height:18px}.checkbox-box.size-lg{min-width:20px;max-width:20px;min-height:20px;max-height:20px}.checkbox-box:hover:not(.disabled){border-color:var(--color-primary, #24ec71)}.checkbox-box.checked,.checkbox-box.indeterminate{background:var(--color-primary, #24ec71);border-color:var(--color-primary, #24ec71)}.checkbox-box.disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed}.checkbox-icon{display:none;color:#fff;position:absolute}.checkbox-box.checked .checkbox-icon.check,.checkbox-box.indeterminate .checkbox-icon.minus{display:block}.checkbox-icon.check{width:12px;height:12px}.checkbox-icon.minus{width:10px;height:10px}.checkbox-label{font-size:.95rem;color:var(--color-ink, #0f172a);line-height:1.5}.checkbox-container.size-sm .checkbox-label{font-size:.875rem}.checkbox-container.size-lg .checkbox-label{font-size:1rem}input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.modal-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;animation:fadeIn .2s ease-out}.modal-backdrop.open{display:flex;align-items:center;justify-content:center;padding:1rem}.modal-content{background:var(--color-surface, white);border-radius:var(--radius-lg, 16px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;display:flex;flex-direction:column;width:100%;animation:slideUp .2s ease-out}.modal-content.sm{max-width:400px}.modal-content.md{max-width:600px}.modal-content.lg{max-width:800px}.modal-content.xl{max-width:1200px}.modal-content.full{max-width:95vw}.modal-header{padding:1.5rem;border-bottom:1px solid var(--color-border, #e2e8f0);display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:1.25rem;font-weight:600;color:var(--color-ink, #0f172a);margin:0}.modal-close{background:none;border:none;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md, 8px);color:var(--color-text-muted, #64748b);transition:all .2s}.modal-close:hover{background:var(--color-muted, #f1f5f9);color:var(--color-ink, #0f172a)}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.modal-footer{padding:1.5rem;border-top:1px solid var(--color-border, #e2e8f0);display:flex;gap:.75rem;justify-content:flex-end}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="select"]){display:block;width:90%}.select-container{position:relative;width:100%}.select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--color-ink, #0f172a)}.select-trigger{width:100%;padding:.625rem 1rem;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s;font-size:.95rem;color:var(--color-ink, #0f172a)}.select-trigger:hover:not(:disabled){border-color:var(--color-primary, #24ec71)}.select-trigger:focus{outline:none;border-color:var(--color-primary, #24ec71);box-shadow:0 0 0 3px #24ec711a}.select-trigger:disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed;opacity:.6}.select-trigger.open{border-color:var(--color-primary, #24ec71)}.select-placeholder{color:var(--color-text-muted, #94a3b8);flex:1;text-align:left}.select-placeholder.has-selection{color:var(--color-ink, #0f172a)}.select-arrow{display:flex;transition:transform .2s;color:var(--color-text-muted, #64748b)}.select-arrow.open{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:300px;overflow-y:auto;z-index:1000;display:none;animation:slideDown .15s ease-out}.select-dropdown.open{display:block}.select-search{width:100%;padding:.625rem 1rem;border:none;border-bottom:1px solid var(--color-border, #e2e8f0);font-size:.95rem;outline:none}.select-search:focus{background:var(--color-muted, #f1f5f9)}.select-option{padding:.625rem 1rem;cursor:pointer;transition:background .15s;color:var(--color-ink, #0f172a);font-size:.95rem}.select-option:hover:not(.disabled){background:var(--color-muted, #f1f5f9)}.select-option.selected{background:#24ec711a;color:var(--color-primary, #24ec71);font-weight:500}.select-option.disabled{opacity:.5;cursor:not-allowed}.select-empty{padding:1rem;text-align:center;color:var(--color-text-muted, #94a3b8);font-size:.875rem}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="pagination"]){display:block}.pagination-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.pagination-info{font-size:.9rem;color:var(--color-ink);opacity:.7}.pagination{display:flex;align-items:center;gap:.25rem}.page-btn{min-width:2.5rem;height:2.5rem;padding:.5rem;border:1px solid var(--color-border);background:#fff;color:var(--color-ink);font-size:.9rem;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.page-btn:hover:not(:disabled):not(.active){background:var(--color-muted);border-color:var(--color-border-strong)}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-btn.active{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary);font-weight:600}.page-btn.ellipsis{border:none;background:transparent;cursor:default;pointer-events:none}.nav-btn{padding:.5rem .75rem}.nav-btn svg{width:16px;height:16px}:host([data-ui="date-picker"]){display:inline-block;width:100%;max-width:300px}.date-picker-container{position:relative;display:flex;flex-direction:column;gap:.5rem}.date-input-wrapper{position:relative;display:flex;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;transition:all .2s ease}.date-input-wrapper:hover:not(.disabled){border-color:var(--color-border-strong)}.date-input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec711a;outline:none}.date-input-wrapper.disabled{background:var(--color-muted);cursor:not-allowed;opacity:.6}.formatted-input{flex:1;border:none;padding:.75rem 1rem;font-size:.95rem;font-family:inherit;background:transparent;color:var(--color-ink);outline:none}.formatted-input:disabled{cursor:not-allowed;color:var(--color-ink);opacity:.7}.formatted-input::placeholder{color:#94a3b8;opacity:.7}.formatted-input.invalid{color:#dc2626}.hidden-date-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.calendar-btn{padding:.5rem;margin-right:.5rem;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-ink);opacity:.6;transition:all .2s ease;border-radius:6px}.calendar-btn:hover:not(:disabled){background:var(--color-muted);opacity:1}.calendar-btn:disabled{cursor:not-allowed;opacity:.3}.calendar-icon{width:20px;height:20px}.format-label{font-size:.75rem;color:var(--color-ink);opacity:.6;padding:0 .25rem;font-weight:500}';class y extends p{connectedCallback(){this.setAttribute("data-ui","sidebar"),super.connectedCallback()}render(){this.shadowRoot.innerHTML=`
|
|
1
|
+
var f=Object.defineProperty;var g=(r,e,o)=>e in r?f(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o;var c=(r,e,o)=>g(r,typeof e!="symbol"?e+"":e,o);import{s as m}from"./index-CzQ41fnj.js";import{f as x}from"./vendor-BvJLUv9i.js";function v(r){let e=r;const o=new Set;return{get:()=>e,set:t=>{Object.is(e,t)||(e=t,o.forEach(a=>a(e)))},subscribe:t=>(o.add(t),()=>o.delete(t))}}class p extends HTMLElement{constructor(){super();c(this,"state");c(this,"signalUnsubs");this.attachShadow({mode:"open"}),this.state={},this.signalUnsubs=new Set}useSignal(o){const t=v(o),a=t.subscribe(()=>this.render());return this.signalUnsubs.add(a),t}setState(o){this.state={...this.state,...o},this.render()}connectedCallback(){this.render()}disconnectedCallback(){this.signalUnsubs.forEach(o=>o()),this.signalUnsubs.clear()}render(){}}const b=':root{--color-primary: #24ec71;--color-primary-contrast: #ffffff;--color-ink: #0f172a;--color-muted: #f1f5f9;--color-header: #f8fafc;--color-border: #e2e8f0;--color-border-strong: #cbd5f5;--color-nav-bg: #222222;--color-nav-text: #ffffff;--shadow-primary: 0 8px 18px rgba(31, 111, 235, .25);--focus-ring: #9ec5ff;--radius-pill: 999px;--radius-md: 12px;--color-page-bg: #ffffff;--color-page-text: #0f172a}body{background:var(--color-page-bg);color:var(--color-page-text);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}:host([data-ui="button"]){display:inline-block}:host([data-ui="table"]){display:block}:host([data-ui="layout"]){display:block}:host([data-ui="sidebar"]){display:block}.btn{align-items:center;border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.95rem;font-weight:600;gap:.5rem;line-height:1;padding:.65rem 1.2rem;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.6}.btn.primary{background:var(--color-primary);color:var(--color-primary-contrast);box-shadow:var(--shadow-primary)}.btn.secondary{background:var(--color-muted);color:var(--color-ink);border-color:var(--color-border-strong)}.btn.ghost{background:transparent;color:var(--color-primary);border-color:var(--color-border-strong)}.btn.has-icon{line-height:1.2}.btn .btn-icon{width:18px;height:18px;flex-shrink:0}.btn .btn-icon svg{width:100%;height:100%}.btn.icon-only{padding:.65rem;aspect-ratio:1}.btn.icon-only.sm{padding:.45rem}.btn.icon-only.lg{padding:.8rem}.btn.sm .btn-icon{width:14px;height:14px}.btn.lg .btn-icon{width:22px;height:22px}.btn.sm{font-size:.85rem;padding:.45rem .9rem;box-shadow:0 4px 12px #a7124426}.btn.md{font-size:.95rem;padding:.65rem 1.2rem}.btn.lg{font-size:1.05rem;padding:.8rem 1.5rem}.table-wrap{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}table{border-collapse:collapse;width:100%}thead{background:var(--color-header)}th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-border);font-size:.95rem;border-right:1px solid var(--color-border)}tr:last-child td{border-bottom:none}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.actions-cell{display:flex;gap:.5rem;justify-content:center}.action-btn{padding:.35rem .7rem;font-size:.8rem;border-radius:4px;cursor:pointer;border:1px solid var(--color-border-strong);background:var(--color-muted);color:var(--color-ink);transition:background-color .12s ease}.action-btn:hover{background:var(--color-border)}.action-btn.edit-btn{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary)}.action-btn.edit-btn:hover{opacity:.85}.action-btn.delete-btn{background:#ef4444;color:#fff;border-color:#ef4444}.action-btn.delete-btn:hover{opacity:.85}.app-nav{padding:1rem;background:var(--color-nav-bg);color:var(--color-nav-text)}.app-link{color:var(--color-nav-text);margin-right:1rem;text-decoration:none}.signal-demo,.theme-toggle{margin-top:16px;display:flex;align-items:center;gap:12px}.data-table{margin-top:15px}.dashboard-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:24px}.dashboard-sidebar{background:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px}.sidebar-title{margin:0 0 12px;font-size:1rem}.sidebar-nav{display:flex;flex-direction:column;gap:10px}.sidebar-link{color:var(--color-ink);text-decoration:none;font-weight:600}.dashboard-main{display:flex;flex-direction:column;gap:12px}.dashboard-actions{display:flex;flex-wrap:wrap;gap:12px}@media (max-width: 900px){.dashboard-layout{grid-template-columns:1fr}}:host([data-ui="input"]){display:block}.input-wrapper{display:flex;flex-direction:column;gap:.35rem}.input-label{font-size:.9rem;font-weight:600;color:var(--color-ink)}.input-field{padding:.6rem .85rem;font-size:.95rem;font-family:inherit;border:1.5px solid var(--color-border);border-radius:6px;background:var(--color-page-bg);color:var(--color-page-text);transition:border-color .15s ease,box-shadow .15s ease;outline:none}.input-field::placeholder{color:#94a3b8}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec7126}.input-field:disabled{background:var(--color-muted);cursor:not-allowed;opacity:.7}.input-wrapper.invalid .input-field{border-color:#ef4444}.input-wrapper.invalid .input-field:focus{box-shadow:0 0 0 3px #ef444426}.input-error{font-size:.8rem;color:#ef4444;display:flex;align-items:center;gap:.25rem}.input-error.hidden{display:none}:host([data-ui="checkbox"]){display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}:host([data-ui="checkbox"][disabled]){cursor:not-allowed;opacity:.6}.checkbox-container{display:inline-flex;align-items:center;gap:.75rem}.checkbox-box{position:relative;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--color-border, #cbd5e1);border-radius:var(--radius-sm, 4px);background:#fff;transition:all .2s;flex-shrink:0;box-sizing:border-box}.checkbox-box.size-sm{min-width:16px;max-width:16px;min-height:16px;max-height:16px}.checkbox-box.size-md{min-width:18px;max-width:18px;min-height:18px;max-height:18px}.checkbox-box.size-lg{min-width:20px;max-width:20px;min-height:20px;max-height:20px}.checkbox-box:hover:not(.disabled){border-color:var(--color-primary, #24ec71)}.checkbox-box.checked,.checkbox-box.indeterminate{background:var(--color-primary, #24ec71);border-color:var(--color-primary, #24ec71)}.checkbox-box.disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed}.checkbox-icon{display:none;color:#fff;position:absolute}.checkbox-box.checked .checkbox-icon.check,.checkbox-box.indeterminate .checkbox-icon.minus{display:block}.checkbox-icon.check{width:12px;height:12px}.checkbox-icon.minus{width:10px;height:10px}.checkbox-label{font-size:.95rem;color:var(--color-ink, #0f172a);line-height:1.5}.checkbox-container.size-sm .checkbox-label{font-size:.875rem}.checkbox-container.size-lg .checkbox-label{font-size:1rem}input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.modal-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;animation:fadeIn .2s ease-out}.modal-backdrop.open{display:flex;align-items:center;justify-content:center;padding:1rem}.modal-content{background:var(--color-surface, white);border-radius:var(--radius-lg, 16px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;display:flex;flex-direction:column;width:100%;animation:slideUp .2s ease-out}.modal-content.sm{max-width:400px}.modal-content.md{max-width:600px}.modal-content.lg{max-width:800px}.modal-content.xl{max-width:1200px}.modal-content.full{max-width:95vw}.modal-header{padding:1.5rem;border-bottom:1px solid var(--color-border, #e2e8f0);display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:1.25rem;font-weight:600;color:var(--color-ink, #0f172a);margin:0}.modal-close{background:none;border:none;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md, 8px);color:var(--color-text-muted, #64748b);transition:all .2s}.modal-close:hover{background:var(--color-muted, #f1f5f9);color:var(--color-ink, #0f172a)}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.modal-footer{padding:1.5rem;border-top:1px solid var(--color-border, #e2e8f0);display:flex;gap:.75rem;justify-content:flex-end}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="select"]){display:block;width:90%}.select-container{position:relative;width:100%}.select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--color-ink, #0f172a)}.select-trigger{width:100%;padding:.625rem 1rem;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s;font-size:.95rem;color:var(--color-ink, #0f172a)}.select-trigger:hover:not(:disabled){border-color:var(--color-primary, #24ec71)}.select-trigger:focus{outline:none;border-color:var(--color-primary, #24ec71);box-shadow:0 0 0 3px #24ec711a}.select-trigger:disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed;opacity:.6}.select-trigger.open{border-color:var(--color-primary, #24ec71)}.select-placeholder{color:var(--color-text-muted, #94a3b8);flex:1;text-align:left}.select-placeholder.has-selection{color:var(--color-ink, #0f172a)}.select-arrow{display:flex;transition:transform .2s;color:var(--color-text-muted, #64748b)}.select-arrow.open{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:300px;overflow-y:auto;z-index:1000;display:none;animation:slideDown .15s ease-out}.select-dropdown.open{display:block}.select-search{width:100%;padding:.625rem 1rem;border:none;border-bottom:1px solid var(--color-border, #e2e8f0);font-size:.95rem;outline:none}.select-search:focus{background:var(--color-muted, #f1f5f9)}.select-option{padding:.625rem 1rem;cursor:pointer;transition:background .15s;color:var(--color-ink, #0f172a);font-size:.95rem}.select-option:hover:not(.disabled){background:var(--color-muted, #f1f5f9)}.select-option.selected{background:#24ec711a;color:var(--color-primary, #24ec71);font-weight:500}.select-option.disabled{opacity:.5;cursor:not-allowed}.select-empty{padding:1rem;text-align:center;color:var(--color-text-muted, #94a3b8);font-size:.875rem}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="pagination"]){display:block}.pagination-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.pagination-info{font-size:.9rem;color:var(--color-ink);opacity:.7}.pagination{display:flex;align-items:center;gap:.25rem}.page-btn{min-width:2.5rem;height:2.5rem;padding:.5rem;border:1px solid var(--color-border);background:#fff;color:var(--color-ink);font-size:.9rem;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.page-btn:hover:not(:disabled):not(.active){background:var(--color-muted);border-color:var(--color-border-strong)}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-btn.active{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary);font-weight:600}.page-btn.ellipsis{border:none;background:transparent;cursor:default;pointer-events:none}.nav-btn{padding:.5rem .75rem}.nav-btn svg{width:16px;height:16px}:host([data-ui="date-picker"]){display:inline-block;width:100%;max-width:300px}.date-picker-container{position:relative;display:flex;flex-direction:column;gap:.5rem}.date-input-wrapper{position:relative;display:flex;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;transition:all .2s ease}.date-input-wrapper:hover:not(.disabled){border-color:var(--color-border-strong)}.date-input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec711a;outline:none}.date-input-wrapper.disabled{background:var(--color-muted);cursor:not-allowed;opacity:.6}.formatted-input{flex:1;border:none;padding:.75rem 1rem;font-size:.95rem;font-family:inherit;background:transparent;color:var(--color-ink);outline:none}.formatted-input:disabled{cursor:not-allowed;color:var(--color-ink);opacity:.7}.formatted-input::placeholder{color:#94a3b8;opacity:.7}.formatted-input.invalid{color:#dc2626}.hidden-date-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.calendar-btn{padding:.5rem;margin-right:.5rem;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-ink);opacity:.6;transition:all .2s ease;border-radius:6px}.calendar-btn:hover:not(:disabled){background:var(--color-muted);opacity:1}.calendar-btn:disabled{cursor:not-allowed;opacity:.3}.calendar-icon{width:20px;height:20px}.format-label{font-size:.75rem;color:var(--color-ink);opacity:.6;padding:0 .25rem;font-weight:500}';class y extends p{connectedCallback(){this.setAttribute("data-ui","sidebar"),super.connectedCallback()}render(){this.shadowRoot.innerHTML=`
|
|
2
2
|
<style>${b}</style>
|
|
3
3
|
<aside class="dashboard-sidebar">
|
|
4
4
|
<h2 class="sidebar-title">Workspace</h2>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var E=Object.defineProperty;var C=(n,t,e)=>t in n?E(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var v=(n,t,e)=>C(n,typeof t!="symbol"?t+"":t,e);import{B as y,s as w}from"./app-layout-
|
|
1
|
+
var E=Object.defineProperty;var C=(n,t,e)=>t in n?E(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var v=(n,t,e)=>C(n,typeof t!="symbol"?t+"":t,e);import{B as y,s as w}from"./app-layout-Dq81XbRZ.js";import"./index-CzQ41fnj.js";import"./vendor-BvJLUv9i.js";const z=`
|
|
2
2
|
<div class="demo-container">
|
|
3
3
|
<h1>Checkbox Component Demo</h1>
|
|
4
4
|
<p>Flexible checkbox with sizes, states, and indeterminate support.</p>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var m=Object.defineProperty;var b=(e,t,n)=>t in e?m(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var u=(e,t,n)=>b(e,typeof t!="symbol"?t+"":t,n);import{B as v,s as g}from"./app-layout-
|
|
1
|
+
var m=Object.defineProperty;var b=(e,t,n)=>t in e?m(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var u=(e,t,n)=>b(e,typeof t!="symbol"?t+"":t,n);import{B as v,s as g}from"./app-layout-Dq81XbRZ.js";import"./table-CSpGgpLR.js";import{s as i}from"./index-CzQ41fnj.js";import"./vendor-BvJLUv9i.js";const y=`<h1>Button</h1>
|
|
2
2
|
<p>Your enterprise-ready Web Components SPA is running 🚀</p>
|
|
3
3
|
<div class="dashboard-actions">
|
|
4
4
|
<ui-button variant="primary" size="md">Get Started</ui-button>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var v=Object.defineProperty;var m=(c,s,t)=>s in c?v(c,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[s]=t;var d=(c,s,t)=>m(c,typeof s!="symbol"?s+"":s,t);import{B as l,s as h}from"./app-layout-
|
|
1
|
+
var v=Object.defineProperty;var m=(c,s,t)=>s in c?v(c,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[s]=t;var d=(c,s,t)=>m(c,typeof s!="symbol"?s+"":s,t);import{B as l,s as h}from"./app-layout-Dq81XbRZ.js";import"./index-CzQ41fnj.js";import"./vendor-BvJLUv9i.js";class k extends l{constructor(){super(...arguments);d(this,"inputElement",null)}connectedCallback(){this.setAttribute("data-ui","date-picker"),super.connectedCallback(),this.attachEventListeners()}static get observedAttributes(){return["value","format","min","max","disabled","placeholder"]}attributeChangedCallback(){this.render(),this.attachEventListeners()}getFormat(){const t=this.getAttribute("format");return t==="DD/MM/YYYY"||t==="MM/DD/YYYY"||t==="DD-MM-YYYY"||t==="MM-DD-YYYY"?t:"YYYY-MM-DD"}getValue(){return this.getAttribute("value")||""}getMin(){return this.getAttribute("min")||""}getMax(){return this.getAttribute("max")||""}getPlaceholder(){return this.getAttribute("placeholder")||this.getFormat()}isDisabled(){return this.hasAttribute("disabled")}formatDate(t,a){if(!t)return"";const e=t.split("-");if(e.length!==3)return t;const[i,r,n]=e;switch(a){case"DD/MM/YYYY":return`${n}/${r}/${i}`;case"MM/DD/YYYY":return`${r}/${n}/${i}`;case"DD-MM-YYYY":return`${n}-${r}-${i}`;case"MM-DD-YYYY":return`${r}-${n}-${i}`;case"YYYY-MM-DD":default:return t}}parseDate(t,a){if(!t)return"";let e,i,r,n;switch(a){case"DD/MM/YYYY":if(e=t.split("/"),e.length!==3)return"";[n,r,i]=e;break;case"MM/DD/YYYY":if(e=t.split("/"),e.length!==3)return"";[r,n,i]=e;break;case"DD-MM-YYYY":if(e=t.split("-"),e.length!==3)return"";[n,r,i]=e;break;case"MM-DD-YYYY":if(e=t.split("-"),e.length!==3)return"";[r,n,i]=e;break;case"YYYY-MM-DD":default:return t}return r=r.padStart(2,"0"),n=n.padStart(2,"0"),`${i}-${r}-${n}`}attachEventListeners(){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".formatted-input"),a=this.shadowRoot.querySelector('input[type="date"]'),e=this.shadowRoot.querySelector(".calendar-btn");if(!t||!a)return;const i=()=>{const r=t.value,n=this.getFormat(),o=this.parseDate(r,n);this.isValidDate(o)?(a.value=o,t.classList.remove("invalid"),this.dispatchDateChange(o)):r===""?(a.value="",t.classList.remove("invalid"),this.dispatchDateChange("")):t.classList.add("invalid")};t.addEventListener("blur",i),t.addEventListener("keydown",r=>{r.key==="Enter"&&(i(),t.blur())}),a.addEventListener("change",r=>{const o=r.target.value,u=this.getFormat(),p=this.formatDate(o,u);t.value=p,t.classList.remove("invalid"),this.dispatchDateChange(o)}),e&&e.addEventListener("click",()=>{var r;(r=a.showPicker)==null||r.call(a)})}isValidDate(t){if(!t)return!1;const a=new Date(t);return a instanceof Date&&!isNaN(a.getTime())}dispatchDateChange(t){const a=this.getFormat(),e=this.formatDate(t,a);this.dispatchEvent(new CustomEvent("date-change",{detail:{value:t,formattedValue:e,format:a},bubbles:!0,composed:!0})),this.setAttribute("value",t)}getISOValue(){return this.getValue()}getFormattedValue(){const t=this.getValue(),a=this.getFormat();return this.formatDate(t,a)}setValue(t){this.setAttribute("value",t)}clear(){this.setAttribute("value","")}render(){const t=this.getValue(),a=this.getFormat(),e=this.getMin(),i=this.getMax(),r=this.isDisabled(),n=this.getPlaceholder(),o=this.formatDate(t,a);this.shadowRoot.innerHTML=`
|
|
2
2
|
<style>${h}</style>
|
|
3
3
|
<div class="date-picker-container">
|
|
4
4
|
<div class="date-input-wrapper ${r?"disabled":""}">
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/dashboard-page-
|
|
2
|
-
(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))s(t);new MutationObserver(t=>{for(const n of t)if(n.type==="childList")for(const o of n.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&s(o)}).observe(document,{childList:!0,subtree:!0});function a(t){const n={};return t.integrity&&(n.integrity=t.integrity),t.referrerPolicy&&(n.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?n.credentials="include":t.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function s(t){if(t.ep)return;t.ep=!0;const n=a(t);fetch(t.href,n)}})();const f=new Set,h={user:null,theme:"light"},_={getState:()=>h,setState(e){Object.assign(h,e),f.forEach(r=>r(h))},subscribe(e){return f.add(e),()=>f.delete(e)}},P="modulepreload",w=function(e){return"/webcomponents/"+e},y={},u=function(r,a,s){let t=Promise.resolve();if(a&&a.length>0){document.getElementsByTagName("link");const o=document.querySelector("meta[property=csp-nonce]"),i=(o==null?void 0:o.nonce)||(o==null?void 0:o.getAttribute("nonce"));t=Promise.allSettled(a.map(c=>{if(c=w(c),c in y)return;y[c]=!0;const p=c.endsWith(".css"),b=p?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${c}"]${b}`))return;const l=document.createElement("link");if(l.rel=p?"stylesheet":P,p||(l.as="script"),l.crossOrigin="",l.href=c,i&&l.setAttribute("nonce",i),document.head.appendChild(l),p)return new Promise((v,L)=>{l.addEventListener("load",v),l.addEventListener("error",()=>L(new Error(`Unable to preload CSS for ${c}`)))})}))}function n(o){const i=new Event("vite:preloadError",{cancelable:!0});if(i.payload=o,window.dispatchEvent(i),!i.defaultPrevented)throw o}return t.then(o=>{for(const i of o||[])i.status==="rejected"&&n(i.reason);return r().catch(n)})},O=[{path:"/",layout:"app-layout",load:()=>u(()=>import("./dashboard-page-
|
|
1
|
+
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/dashboard-page-DAzkVezy.js","assets/app-layout-Dq81XbRZ.js","assets/vendor-BvJLUv9i.js","assets/table-CSpGgpLR.js","assets/date-picker-demo-DH82BhNJ.js","assets/table-demo-xve_6QOI.js","assets/input-demo-CzyQGRhV.js","assets/modal-demo-page-C8gJP8BA.js","assets/select-demo-page-BORrccnw.js","assets/checkbox-demo-page-j3Ylexv2.js"])))=>i.map(i=>d[i]);
|
|
2
|
+
(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))s(t);new MutationObserver(t=>{for(const n of t)if(n.type==="childList")for(const o of n.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&s(o)}).observe(document,{childList:!0,subtree:!0});function a(t){const n={};return t.integrity&&(n.integrity=t.integrity),t.referrerPolicy&&(n.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?n.credentials="include":t.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function s(t){if(t.ep)return;t.ep=!0;const n=a(t);fetch(t.href,n)}})();const f=new Set,h={user:null,theme:"light"},_={getState:()=>h,setState(e){Object.assign(h,e),f.forEach(r=>r(h))},subscribe(e){return f.add(e),()=>f.delete(e)}},P="modulepreload",w=function(e){return"/webcomponents/"+e},y={},u=function(r,a,s){let t=Promise.resolve();if(a&&a.length>0){document.getElementsByTagName("link");const o=document.querySelector("meta[property=csp-nonce]"),i=(o==null?void 0:o.nonce)||(o==null?void 0:o.getAttribute("nonce"));t=Promise.allSettled(a.map(c=>{if(c=w(c),c in y)return;y[c]=!0;const p=c.endsWith(".css"),b=p?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${c}"]${b}`))return;const l=document.createElement("link");if(l.rel=p?"stylesheet":P,p||(l.as="script"),l.crossOrigin="",l.href=c,i&&l.setAttribute("nonce",i),document.head.appendChild(l),p)return new Promise((v,L)=>{l.addEventListener("load",v),l.addEventListener("error",()=>L(new Error(`Unable to preload CSS for ${c}`)))})}))}function n(o){const i=new Event("vite:preloadError",{cancelable:!0});if(i.payload=o,window.dispatchEvent(i),!i.defaultPrevented)throw o}return t.then(o=>{for(const i of o||[])i.status==="rejected"&&n(i.reason);return r().catch(n)})},O=[{path:"/",layout:"app-layout",load:()=>u(()=>import("./dashboard-page-DAzkVezy.js"),__vite__mapDeps([0,1,2,3])),component:"dashboard-page"},{path:"/date-picker",layout:"app-layout",load:()=>u(()=>import("./date-picker-demo-DH82BhNJ.js"),__vite__mapDeps([4,1,2])),component:"date-picker-demo"},{path:"/table-demo",layout:"app-layout",load:()=>u(()=>import("./table-demo-xve_6QOI.js"),__vite__mapDeps([5,1,2,3])),component:"table-demo"},{path:"/input-demo",layout:"app-layout",load:()=>u(()=>import("./input-demo-CzyQGRhV.js"),__vite__mapDeps([6,1,2])),component:"input-demo"},{path:"/modal",layout:"app-layout",load:()=>u(()=>import("./modal-demo-page-C8gJP8BA.js"),__vite__mapDeps([7,1,2])),component:"modal-demo-page"},{path:"/select",layout:"app-layout",load:()=>u(()=>import("./select-demo-page-BORrccnw.js"),__vite__mapDeps([8,1,2])),component:"select-demo-page"},{path:"/checkbox",layout:"app-layout",load:()=>u(()=>import("./checkbox-demo-page-j3Ylexv2.js"),__vite__mapDeps([9,1,2])),component:"checkbox-demo-page"}],d="/webcomponents/";function S(e){const r=d.endsWith("/")?d.slice(0,-1):d;return e===r||e===r+"/"?"/":e.startsWith(r+"/")?e.slice(r.length):e}function E(e){return`${d.endsWith("/")?d.slice(0,-1):d}${e}`}async function m(){const e=location.pathname,r=S(e),a=O.find(o=>o.path===r);if(!a){if(r!=="/"){const o=E("/");history.replaceState(null,"",o),await m()}return}await a.load();const s=document.createElement(a.layout),t=document.createElement(a.component);s.appendChild(t);const n=document.querySelector("#app");n&&(n.innerHTML="",n.appendChild(s))}window.addEventListener("popstate",m);window.addEventListener("DOMContentLoaded",m);document.addEventListener("click",e=>{const a=e.composedPath().find(s=>s instanceof Element&&s.matches("[data-link]"));if(a){e.preventDefault();const s=a.getAttribute("href")??"/",t=E(s);history.pushState(null,"",t),m()}});const g=e=>{document.documentElement.dataset.theme=e};g(_.getState().theme);_.subscribe(e=>g(e.theme));export{_ as s};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
var f=Object.defineProperty;var y=(s,a,t)=>a in s?f(s,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[a]=t;var
|
|
1
|
+
var f=Object.defineProperty;var y=(s,a,t)=>a in s?f(s,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[a]=t;var n=(s,a,t)=>y(s,typeof a!="symbol"?a+"":a,t);import{B as v,s as E}from"./app-layout-Dq81XbRZ.js";import"./index-CzQ41fnj.js";import"./vendor-BvJLUv9i.js";class x extends v{constructor(){super();n(this,"inputEl",null);n(this,"customValidator",null);n(this,"validationRule",null);this.state={value:"",valid:!0,touched:!1,error:""}}static get observedAttributes(){return["type","label","placeholder","required","pattern","minlength","maxlength","min","max","error-message","custom-error","disabled","name","validate"]}connectedCallback(){this.setAttribute("data-ui","input"),super.connectedCallback()}attributeChangedCallback(t,e,i){e!==i&&t!=="value"&&this.render()}setCustomValidator(t){this.customValidator=t,this.validate()}get value(){return this.state.value}set value(t){this.state.value=t,this.inputEl&&this.inputEl.value!==t&&(this.inputEl.value=t),this.validate()}get isValid(){return this.state.valid}checkValidity(){return this.state.touched=!0,this.validate()}reportValidity(){this.state.touched=!0;const t=this.validate();return this.updateErrorDisplay(),!t&&this.inputEl&&this.inputEl.focus(),t}getType(){const t=this.getAttribute("type");return["text","email","password","number","tel","url"].includes(t||"")?t:"text"}getLabel(){return this.getAttribute("label")||""}getPlaceholder(){return this.getAttribute("placeholder")||""}getName(){return this.getAttribute("name")||""}getErrorMessage(){return this.state.error?this.state.error:this.getAttribute("error-message")||this.getAttribute("custom-error")||""}getCustomError(){return this.getAttribute("custom-error")||""}parseValidationRule(t){return t.startsWith("email:")?{type:"emailDomain",domain:t.slice(6)}:t.startsWith("match:")?{type:"match",selector:t.slice(6)}:t.startsWith("min:")?{type:"minLength",length:parseInt(t.slice(4),10)}:t.startsWith("max:")?{type:"maxLength",length:parseInt(t.slice(4),10)}:t.startsWith("regex:")?{type:"regex",pattern:t.slice(6)}:null}applyValidationRule(t){const e=this.state.value;switch(t.type){case"emailDomain":if(!e.endsWith(`@${t.domain}`))return{valid:!1,message:`Must end with @${t.domain}`};break;case"match":const i=document.querySelector(t.selector);if(i&&e!==i.value)return{valid:!1,message:"Values do not match"};break;case"minLength":if(e.length<t.length)return{valid:!1,message:`Must be at least ${t.length} characters`};break;case"maxLength":if(e.length>t.length)return{valid:!1,message:`Must be no more than ${t.length} characters`};break;case"regex":try{if(!new RegExp(t.pattern).test(e))return{valid:!1,message:"Invalid format"}}catch{return{valid:!1,message:"Invalid validation pattern"}}break}return{valid:!0}}validate(){if(!this.inputEl)return!0;const t=this.getAttribute("validate");if(t&&(this.validationRule||(this.validationRule=this.parseValidationRule(t)),this.validationRule)){const e=this.applyValidationRule(this.validationRule);return this.state.valid=e.valid,!e.valid&&e.message&&(this.state.error=e.message),this.state.valid}if(this.customValidator){const e=this.customValidator(this.state.value,this.inputEl);this.state.valid=e.valid,!e.valid&&e.message&&(this.state.error=e.message)}else{const e=this.inputEl.checkValidity();this.state.valid=e,!e&&this.state.touched&&(this.state.error=this.inputEl.validationMessage||this.getErrorMessage()),e&&(this.state.error="")}return this.state.valid}handleInput(t){const e=t.target;this.state.value=e.value,this.state.touched=!0,this.validate(),this.updateErrorDisplay()}handleBlur(){this.state.touched=!0,this.validate(),this.updateErrorDisplay()}updateErrorDisplay(){if(!this.inputEl)return;const t=this.shadowRoot.querySelector(".input-error"),e=this.shadowRoot.querySelector(".input-wrapper"),i=this.getName();e&&e.classList.toggle("invalid",!this.state.valid&&this.state.touched),t&&(!this.state.valid&&this.state.touched&&this.state.error?(t.textContent=this.state.error,t.classList.remove("hidden")):t.classList.add("hidden")),this.inputEl.setAttribute("aria-invalid",String(!this.state.valid&&this.state.touched)),i&&this.inputEl.setAttribute("aria-describedby",`${i}-error`)}needsRender(){return this.hasAttribute("type")||this.hasAttribute("label")||this.hasAttribute("placeholder")||this.hasAttribute("required")||this.hasAttribute("pattern")||this.hasAttribute("disabled")||this.hasAttribute("name")||this.hasAttribute("minlength")||this.hasAttribute("maxlength")||this.hasAttribute("min")||this.hasAttribute("max")||this.hasAttribute("error-message")||this.hasAttribute("custom-error")||this.hasAttribute("validate")}render(){const t=this.getType(),e=this.getLabel(),i=this.getPlaceholder(),r=this.getName(),l=this.getErrorMessage(),u=this.hasAttribute("required"),d=this.getAttribute("pattern"),h=this.getAttribute("minlength"),m=this.getAttribute("maxlength"),c=this.getAttribute("min"),p=this.getAttribute("max"),g=this.hasAttribute("disabled"),o=!this.state.valid&&this.state.touched,b=e!=="";this.shadowRoot.innerHTML=`
|
|
2
2
|
<style>${E}</style>
|
|
3
|
-
<div class="input-wrapper${o?" invalid":""}${
|
|
4
|
-
${
|
|
3
|
+
<div class="input-wrapper${o?" invalid":""}${g?" disabled":""}">
|
|
4
|
+
${b?`<label class="input-label">${e}${u?" *":""}</label>`:""}
|
|
5
5
|
<input
|
|
6
6
|
part="input"
|
|
7
7
|
class="input-field"
|
|
8
8
|
type="${t}"
|
|
9
9
|
placeholder="${i}"
|
|
10
|
-
name="${
|
|
10
|
+
name="${r}"
|
|
11
11
|
.value="${this.state.value}"
|
|
12
12
|
${u?"required":""}
|
|
13
13
|
${d?`pattern="${d}"`:""}
|
|
@@ -15,11 +15,11 @@ var f=Object.defineProperty;var y=(s,a,t)=>a in s?f(s,a,{enumerable:!0,configura
|
|
|
15
15
|
${m?`maxlength="${m}"`:""}
|
|
16
16
|
${c?`min="${c}"`:""}
|
|
17
17
|
${p?`max="${p}"`:""}
|
|
18
|
-
${
|
|
18
|
+
${g?"disabled":""}
|
|
19
19
|
aria-invalid="${o}"
|
|
20
|
-
aria-describedby="${
|
|
20
|
+
aria-describedby="${r}-error"
|
|
21
21
|
/>
|
|
22
|
-
<span class="input-error${o&&l?"":" hidden"}" id="${
|
|
22
|
+
<span class="input-error${o&&l?"":" hidden"}" id="${r}-error" role="alert">${l}</span>
|
|
23
23
|
</div>
|
|
24
24
|
`,this.inputEl=this.shadowRoot.querySelector(".input-field"),this.inputEl&&(this.inputEl.addEventListener("input",this.handleInput.bind(this)),this.inputEl.addEventListener("blur",this.handleBlur.bind(this)))}}customElements.define("ui-input",x);const A=`<div class="demo-container">
|
|
25
25
|
<h1>Input Component Demo</h1>
|
|
@@ -93,48 +93,7 @@ var f=Object.defineProperty;var y=(s,a,t)=>a in s?f(s,a,{enumerable:!0,configura
|
|
|
93
93
|
></ui-input>
|
|
94
94
|
</div>
|
|
95
95
|
</section>
|
|
96
|
-
|
|
97
|
-
<section class="demo-section">
|
|
98
|
-
<h2>Form Validation</h2>
|
|
99
|
-
<form id="demo-form" class="demo-form">
|
|
100
|
-
<div class="form-grid">
|
|
101
|
-
<ui-input
|
|
102
|
-
label="Full Name"
|
|
103
|
-
placeholder="John Doe"
|
|
104
|
-
name="fullname"
|
|
105
|
-
required
|
|
106
|
-
></ui-input>
|
|
107
|
-
|
|
108
|
-
<ui-input
|
|
109
|
-
label="Age"
|
|
110
|
-
type="number"
|
|
111
|
-
placeholder="18"
|
|
112
|
-
name="age"
|
|
113
|
-
required
|
|
114
|
-
min="18"
|
|
115
|
-
max="120"
|
|
116
|
-
></ui-input>
|
|
117
|
-
|
|
118
|
-
<ui-input
|
|
119
|
-
label="Website"
|
|
120
|
-
type="url"
|
|
121
|
-
placeholder="https://example.com"
|
|
122
|
-
name="website"
|
|
123
|
-
></ui-input>
|
|
124
|
-
</div>
|
|
125
|
-
|
|
126
|
-
<div class="form-actions">
|
|
127
|
-
<ui-button type="submit" variant="primary">Validate Form</ui-button>
|
|
128
|
-
<ui-button type="button" variant="secondary" id="reset-btn">Reset</ui-button>
|
|
129
|
-
</div>
|
|
130
|
-
</form>
|
|
131
|
-
|
|
132
|
-
<div class="form-result" id="form-result">
|
|
133
|
-
<span class="result-label">Form Status:</span>
|
|
134
|
-
<span class="result-value" id="result-status">Not validated</span>
|
|
135
|
-
</div>
|
|
136
|
-
</section>
|
|
137
|
-
|
|
96
|
+
|
|
138
97
|
<section class="demo-section">
|
|
139
98
|
<h2>Disabled State</h2>
|
|
140
99
|
<div class="form-grid">
|
|
@@ -148,7 +107,7 @@ var f=Object.defineProperty;var y=(s,a,t)=>a in s?f(s,a,{enumerable:!0,configura
|
|
|
148
107
|
</div>
|
|
149
108
|
</section>
|
|
150
109
|
</div>
|
|
151
|
-
`,$=".demo-container{padding:2rem;max-width:800px}.demo-container h1{margin:0 0 .5rem;color:var(--color-ink)}.demo-description{color:#64748b;margin-bottom:2rem}.demo-description code{background:var(--color-muted);padding:.15rem .4rem;border-radius:4px;font-size:.9em}.demo-section{margin-bottom:2.5rem;padding:1.5rem;background:var(--color-page-bg);border:1px solid var(--color-border);border-radius:var(--radius-md)}.demo-section h2{margin:0 0 1rem;font-size:1.25rem;color:var(--color-ink)}.demo-section>p{margin:0 0 1rem;color:#64748b}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}.form-actions{margin-top:1.5rem;display:flex;gap:.75rem}.demo-form{margin-bottom:1rem}.form-result{margin-top:1rem;padding:.75rem 1rem;background:var(--color-muted);border-radius:6px;display:flex;gap:.5rem}.result-label{font-weight:600;color:var(--color-ink)}.result-value{color:#64748b}.result-value.valid{color:#24ec71}.result-value.invalid{color:#ef4444}";class w extends v{constructor(){super(...arguments);
|
|
110
|
+
`,$=".demo-container{padding:2rem;max-width:800px}.demo-container h1{margin:0 0 .5rem;color:var(--color-ink)}.demo-description{color:#64748b;margin-bottom:2rem}.demo-description code{background:var(--color-muted);padding:.15rem .4rem;border-radius:4px;font-size:.9em}.demo-section{margin-bottom:2.5rem;padding:1.5rem;background:var(--color-page-bg);border:1px solid var(--color-border);border-radius:var(--radius-md)}.demo-section h2{margin:0 0 1rem;font-size:1.25rem;color:var(--color-ink)}.demo-section>p{margin:0 0 1rem;color:#64748b}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}.form-actions{margin-top:1.5rem;display:flex;gap:.75rem}.demo-form{margin-bottom:1rem}.form-result{margin-top:1rem;padding:.75rem 1rem;background:var(--color-muted);border-radius:6px;display:flex;gap:.5rem}.result-label{font-weight:600;color:var(--color-ink)}.result-value{color:#64748b}.result-value.valid{color:#24ec71}.result-value.invalid{color:#ef4444}";class w extends v{constructor(){super(...arguments);n(this,"formResult",null);n(this,"statusSpan",null)}render(){this.shadowRoot.innerHTML=`
|
|
152
111
|
<style>${$}</style>
|
|
153
112
|
${A}
|
|
154
|
-
`,this.formResult=this.shadowRoot.querySelector("#form-result"),this.statusSpan=this.shadowRoot.querySelector("#result-status");const t=this.shadowRoot.querySelector("#demo-form"),e=this.shadowRoot.querySelector("#reset-btn");t&&t.addEventListener("submit",this.handleSubmit.bind(this)),e&&e.addEventListener("click",this.handleReset.bind(this))}async handleSubmit(t){t.preventDefault();const e=Array.from(this.shadowRoot.querySelectorAll("ui-input"));let i=!0;for(const
|
|
113
|
+
`,this.formResult=this.shadowRoot.querySelector("#form-result"),this.statusSpan=this.shadowRoot.querySelector("#result-status");const t=this.shadowRoot.querySelector("#demo-form"),e=this.shadowRoot.querySelector("#reset-btn");t&&t.addEventListener("submit",this.handleSubmit.bind(this)),e&&e.addEventListener("click",this.handleReset.bind(this))}async handleSubmit(t){t.preventDefault();const e=Array.from(this.shadowRoot.querySelectorAll("ui-input"));let i=!0;for(const r of e)r.reportValidity()||(i=!1);this.statusSpan&&(this.statusSpan.textContent=i?"Valid":"Invalid",this.statusSpan.className=`result-value ${i?"valid":"invalid"}`)}handleReset(){this.shadowRoot.querySelectorAll("ui-input").forEach(e=>{e.value=""}),this.statusSpan&&(this.statusSpan.textContent="Not validated",this.statusSpan.className="result-value")}}customElements.define("input-demo",w);export{w as InputDemo};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var R=Object.defineProperty;var L=(a,e,t)=>e in a?R(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var C=(a,e,t)=>L(a,typeof e!="symbol"?e+"":e,t);import{B,s as I}from"./app-layout-
|
|
1
|
+
var R=Object.defineProperty;var L=(a,e,t)=>e in a?R(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var C=(a,e,t)=>L(a,typeof e!="symbol"?e+"":e,t);import{B,s as I}from"./app-layout-Dq81XbRZ.js";import"./index-CzQ41fnj.js";import"./vendor-BvJLUv9i.js";const x=`
|
|
2
2
|
<div class="demo-container">
|
|
3
3
|
<h1>Modal Component Demo</h1>
|
|
4
4
|
<p>Interactive modals with various sizes and configurations.</p>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var w=Object.defineProperty;var E=(c,l,e)=>l in c?w(c,l,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[l]=e;var m=(c,l,e)=>E(c,typeof l!="symbol"?l+"":l,e);import{B as y,s as R}from"./app-layout-
|
|
1
|
+
var w=Object.defineProperty;var E=(c,l,e)=>l in c?w(c,l,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[l]=e;var m=(c,l,e)=>E(c,typeof l!="symbol"?l+"":l,e);import{B as y,s as R}from"./app-layout-Dq81XbRZ.js";import"./index-CzQ41fnj.js";import"./vendor-BvJLUv9i.js";const k=`
|
|
2
2
|
<div class="demo-container">
|
|
3
3
|
<h1>Select Component Demo</h1>
|
|
4
4
|
<p>Customizable dropdown select with search and multi-configuration options.</p>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
var b=Object.defineProperty;var h=(s,e,t)=>e in s?b(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>h(s,typeof e!="symbol"?e+"":e,t);import{B as u,s as w}from"./app-layout-Dq81XbRZ.js";class m extends u{constructor(){super(...arguments);i(this,"columns",[]);i(this,"rows",[])}connectedCallback(){this.setAttribute("data-ui","table"),super.connectedCallback()}set data(t){this.columns=t.columns,this.rows=t.rows,this.render()}get data(){return{columns:this.columns,rows:this.rows}}render(){const t=this.columns.map(n=>`<th class="align-${n.align??"left"}">${n.label}</th>`).join(""),r=this.rows.map((n,o)=>`<tr data-row-index="${o}">${this.columns.map(a=>a.actions?`<td class="align-center actions-cell">
|
|
2
|
+
${a.actions.edit?`<button class="action-btn edit-btn" data-action="edit" data-row-index="${o}">Edit</button>`:""}
|
|
3
|
+
${a.actions.delete?`<button class="action-btn delete-btn" data-action="delete" data-row-index="${o}">Delete</button>`:""}
|
|
4
|
+
</td>`:`<td class="align-${a.align??"left"}">${String(n[a.key]??"")}</td>`).join("")}</tr>`).join("");this.shadowRoot.innerHTML=`
|
|
5
|
+
<style>${w}</style>
|
|
6
|
+
<div class="table-wrap">
|
|
7
|
+
<table>
|
|
8
|
+
<thead><tr>${t}</tr></thead>
|
|
9
|
+
<tbody>${r}</tbody>
|
|
10
|
+
</table>
|
|
11
|
+
</div>
|
|
12
|
+
`,this.shadowRoot.querySelectorAll(".action-btn").forEach(n=>{n.addEventListener("click",o=>{const a=o.currentTarget,c=a.dataset.action,d=parseInt(a.dataset.rowIndex||"0",10),l=c==="edit"?"edit-action":"delete-action";this.dispatchEvent(new CustomEvent(l,{bubbles:!0,composed:!0,detail:{row:this.rows[d],rowIndex:d}}))})})}}customElements.define("ui-table",m);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
var h=Object.defineProperty;var u=(l,n,t)=>n in l?h(l,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[n]=t;var
|
|
1
|
+
var h=Object.defineProperty;var u=(l,n,t)=>n in l?h(l,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[n]=t;var r=(l,n,t)=>u(l,typeof n!="symbol"?n+"":n,t);import{B as g,s as p}from"./app-layout-Dq81XbRZ.js";import"./table-CSpGgpLR.js";import"./index-CzQ41fnj.js";import"./vendor-BvJLUv9i.js";class m extends g{constructor(){super(...arguments);r(this,"_total",0);r(this,"_currentPage",1);r(this,"_pageSize",10)}connectedCallback(){this.setAttribute("data-ui","pagination"),super.connectedCallback()}static get observedAttributes(){return["total","current-page","page-size"]}attributeChangedCallback(t,a,e){switch(t){case"total":this._total=parseInt(e,10)||0;break;case"current-page":this._currentPage=parseInt(e,10)||1;break;case"page-size":this._pageSize=parseInt(e,10)||10;break}this.render()}get total(){return this._total}set total(t){this._total=t,this.setAttribute("total",String(t))}get currentPage(){return this._currentPage}set currentPage(t){this._currentPage=t,this.setAttribute("current-page",String(t))}get pageSize(){return this._pageSize}set pageSize(t){this._pageSize=t,this.setAttribute("page-size",String(t))}get totalPages(){return Math.ceil(this._total/this._pageSize)}handlePageChange(t){t<1||t>this.totalPages||t===this._currentPage||(this.currentPage=t,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:t,pageSize:this._pageSize,total:this._total,totalPages:this.totalPages},bubbles:!0,composed:!0})))}getPageNumbers(){const t=this.totalPages,a=this._currentPage;if(t<=7)return Array.from({length:t},(i,o)=>o+1);const e=[];return a<=3?e.push(1,2,3,4,"...",t):a>=t-2?e.push(1,"...",t-3,t-2,t-1,t):e.push(1,"...",a-1,a,a+1,"...",t),e}render(){const t=this.totalPages,a=this._currentPage,e=this.getPageNumbers(),i=(a-1)*this._pageSize+1,o=Math.min(a*this._pageSize,this._total);this.shadowRoot.innerHTML=`
|
|
2
2
|
<style>${p}</style>
|
|
3
3
|
<div class="pagination-container">
|
|
4
4
|
<div class="pagination-info">
|
|
5
|
-
${this._total>0?`Showing ${
|
|
5
|
+
${this._total>0?`Showing ${i} to ${o} of ${this._total}`:"No results"}
|
|
6
6
|
</div>
|
|
7
7
|
${t>1?`
|
|
8
8
|
<nav class="pagination" role="navigation" aria-label="Pagination">
|
|
@@ -39,7 +39,7 @@ var h=Object.defineProperty;var u=(l,n,t)=>n in l?h(l,n,{enumerable:!0,configura
|
|
|
39
39
|
</nav>
|
|
40
40
|
`:""}
|
|
41
41
|
</div>
|
|
42
|
-
`,this.attachEventListeners()}attachEventListeners(){this.shadowRoot&&this.shadowRoot.addEventListener("click",t=>{const e=t.target.closest(".page-btn");if(!e||e.disabled)return;const
|
|
42
|
+
`,this.attachEventListeners()}attachEventListeners(){this.shadowRoot&&this.shadowRoot.addEventListener("click",t=>{const e=t.target.closest(".page-btn");if(!e||e.disabled)return;const i=e.dataset.page;if(i==="prev")this.handlePageChange(this._currentPage-1);else if(i==="next")this.handlePageChange(this._currentPage+1);else if(i){const o=parseInt(i,10);isNaN(o)||this.handlePageChange(o)}})}}customElements.define("ui-pagination",m);const b=`<h1>Table Demo</h1>\r
|
|
43
43
|
<p class="intro">Example of loading JSON data and rendering a table.</p>\r
|
|
44
44
|
\r
|
|
45
45
|
<div class="demo-section">\r
|
|
@@ -54,16 +54,14 @@ var h=Object.defineProperty;var u=(l,n,t)=>n in l?h(l,n,{enumerable:!0,configura
|
|
|
54
54
|
\r
|
|
55
55
|
<div class="demo-section">\r
|
|
56
56
|
<h2>Table</h2>\r
|
|
57
|
+
<div class="action-message" id="action-message" style="display: none;"></div>\r
|
|
57
58
|
<ui-table id="demo-table"></ui-table>\r
|
|
58
59
|
<div class="meta" id="data-meta"></div>\r
|
|
59
60
|
<ui-pagination></ui-pagination>\r
|
|
60
61
|
</div>\r
|
|
61
62
|
\r
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<pre class="json-output" id="json-output">Loading...</pre>\r
|
|
65
|
-
</div>\r
|
|
66
|
-
`,f=":host{display:block;padding:2rem;max-width:1200px;margin:0 auto}.intro{color:var(--color-ink, #0f172a);opacity:.8;margin-bottom:1.5rem}h1{font-size:2rem;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}h2{font-size:1.4rem;margin-top:0;margin-bottom:.75rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:2rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.section-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.status{font-size:.85rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;background:#e2e8f0;color:#334155}.status.loading{background:#fde68a;color:#92400e}.status.success{background:#bbf7d0;color:#166534}.status.error{background:#fecaca;color:#b91c1c}.code-block{background:#f1f5f9;padding:1rem;border-radius:8px;overflow-x:auto}code{font-family:Courier New,monospace;font-size:.9rem;color:#334155}.meta{margin-top:.75rem;margin-bottom:.75rem;font-size:.85rem;color:#64748b}ui-pagination{margin-top:1rem}.json-output{margin:0;background:#0f172a;color:#e2e8f0;padding:1rem;border-radius:8px;overflow-x:auto;font-size:.85rem}";class k extends d{constructor(){super(...arguments);o(this,"hasLoaded",!1);o(this,"loading",!1);o(this,"error",null);o(this,"data",null);o(this,"currentPage",1);o(this,"pageSize",10)}connectedCallback(){super.connectedCallback(),this.hasLoaded||(this.hasLoaded=!0,this.loadData())}async loadData(){this.loading=!0,this.error=null,this.render();try{const t=(this.currentPage-1)*this.pageSize,a=await fetch(`https://dummyjson.com/products?limit=${this.pageSize}&skip=${t}`);if(!a.ok)throw new Error(`Request failed: ${a.status}`);const e=await a.json(),r=[{key:"title",label:"Title"},{key:"brand",label:"Brand"},{key:"category",label:"Category"},{key:"price",label:"Price",align:"right"},{key:"rating",label:"Rating",align:"right"},{key:"stock",label:"Stock",align:"right"},{key:"actions",label:"Actions",align:"center",actions:{edit:!0,delete:!0}}],i=e.products.map(s=>({title:s.title,brand:s.brand,category:s.category,price:`$${s.price.toFixed(2)}`,rating:s.rating.toFixed(1),stock:s.stock}));this.data={columns:r,rows:i,meta:{total:e.total,limit:e.limit,skip:e.skip}},this.loading=!1,this.render()}catch(t){this.loading=!1,this.error=t instanceof Error?t.message:"Unknown error",this.render()}}render(){var i,s;this.shadowRoot.innerHTML=`
|
|
63
|
+
\r
|
|
64
|
+
`,f=":host{display:block;padding:2rem;max-width:1200px;margin:0 auto}.intro{color:var(--color-ink, #0f172a);opacity:.8;margin-bottom:1.5rem}h1{font-size:2rem;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}h2{font-size:1.4rem;margin-top:0;margin-bottom:.75rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:2rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.section-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.status{font-size:.85rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;background:#e2e8f0;color:#334155}.status.loading{background:#fde68a;color:#92400e}.status.success{background:#bbf7d0;color:#166534}.status.error{background:#fecaca;color:#b91c1c}.code-block{background:#f1f5f9;padding:1rem;border-radius:8px;overflow-x:auto}code{font-family:Courier New,monospace;font-size:.9rem;color:#334155}.meta{margin-top:.75rem;margin-bottom:.75rem;font-size:.85rem;color:#64748b}ui-pagination{margin-top:1rem}.json-output{margin:0;background:#0f172a;color:#e2e8f0;padding:1rem;border-radius:8px;overflow-x:auto;font-size:.85rem}";class k extends g{constructor(){super(...arguments);r(this,"hasLoaded",!1);r(this,"loading",!1);r(this,"error",null);r(this,"data",null);r(this,"currentPage",1);r(this,"pageSize",10)}connectedCallback(){super.connectedCallback(),this.hasLoaded||(this.hasLoaded=!0,this.loadData())}async loadData(){this.loading=!0,this.error=null,this.render();try{const t=(this.currentPage-1)*this.pageSize,a=await fetch(`https://dummyjson.com/products?limit=${this.pageSize}&skip=${t}`);if(!a.ok)throw new Error(`Request failed: ${a.status}`);const e=await a.json(),i=[{key:"title",label:"Title"},{key:"brand",label:"Brand"},{key:"category",label:"Category"},{key:"price",label:"Price",align:"right"},{key:"rating",label:"Rating",align:"right"},{key:"stock",label:"Stock",align:"right"},{key:"actions",label:"Actions",align:"center",actions:{edit:!0,delete:!0}}],o=e.products.map(s=>({title:s.title,brand:s.brand,category:s.category,price:`$${s.price.toFixed(2)}`,rating:s.rating.toFixed(1),stock:s.stock}));this.data={columns:i,rows:o,meta:{total:e.total,limit:e.limit,skip:e.skip}},this.loading=!1,this.render()}catch(t){this.loading=!1,this.error=t instanceof Error?t.message:"Unknown error",this.render()}}showActionMessage(t){const a=this.shadowRoot.querySelector("#action-message");a&&(a.textContent=t,a.style.display="block",setTimeout(()=>{const e=this.shadowRoot.querySelector("#action-message");e&&(e.style.display="none")},5e3))}render(){var o,s;this.shadowRoot.innerHTML=`
|
|
67
65
|
<style>${f}</style>
|
|
68
66
|
${b}
|
|
69
|
-
`;const t=this.shadowRoot.querySelector("#data-status")
|
|
67
|
+
`;const t=this.shadowRoot.querySelector("#data-status");t&&(t.textContent=this.loading?"Loading...":this.error?"Error":"Loaded",t.className=`status ${this.loading?"loading":this.error?"error":"success"}`);const a=this.shadowRoot.querySelector("#demo-table");a&&this.data&&(a.data={columns:this.data.columns,rows:this.data.rows});const e=this.shadowRoot.querySelector("ui-pagination");if(e&&((o=this.data)!=null&&o.meta)){e.total=this.data.meta.total,e.currentPage=this.currentPage,e.pageSize=this.pageSize;const c=e.cloneNode(!0);(s=e.parentNode)==null||s.replaceChild(c,e),c.addEventListener("page-change",d=>{this.currentPage=d.detail.page,this.loadData()})}const i=this.shadowRoot.querySelector("#demo-table");i&&(i.addEventListener("edit-action",c=>{const{row:d}=c.detail;this.showActionMessage(`EDIT clicked for "${d.title}"`)}),i.addEventListener("delete-action",c=>{const{row:d}=c.detail;this.showActionMessage(`DELETE clicked for "${d.title}"`)}))}}customElements.define("table-demo",k);export{k as TableDemo};
|
package/dist/index.html
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<meta charset="UTF-8" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<title>Web Components SPA Starter</title>
|
|
8
|
-
<script type="module" crossorigin src="/webcomponents/assets/index-
|
|
8
|
+
<script type="module" crossorigin src="/webcomponents/assets/index-CzQ41fnj.js"></script>
|
|
9
9
|
<link rel="stylesheet" crossorigin href="/webcomponents/assets/index-uHZenGtA.css">
|
|
10
10
|
</head>
|
|
11
11
|
<body>
|
package/package.json
CHANGED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
var c=Object.defineProperty;var b=(a,e,t)=>e in a?c(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var i=(a,e,t)=>b(a,typeof e!="symbol"?e+"":e,t);import{B as h,s as u}from"./app-layout-D81L3er1.js";class w extends h{constructor(){super(...arguments);i(this,"columns",[]);i(this,"rows",[])}connectedCallback(){this.setAttribute("data-ui","table"),super.connectedCallback()}set data(t){this.columns=t.columns,this.rows=t.rows,this.render()}get data(){return{columns:this.columns,rows:this.rows}}render(){const t=this.columns.map(n=>`<th class="align-${n.align??"left"}">${n.label}</th>`).join(""),d=this.rows.map((n,o)=>`<tr data-row-index="${o}">${this.columns.map(s=>s.actions?`<td class="align-center actions-cell">
|
|
2
|
-
${s.actions.edit?`<button class="action-btn edit-btn" data-action="edit" data-row-index="${o}">Edit</button>`:""}
|
|
3
|
-
${s.actions.delete?`<button class="action-btn delete-btn" data-action="delete" data-row-index="${o}">Delete</button>`:""}
|
|
4
|
-
</td>`:`<td class="align-${s.align??"left"}">${String(n[s.key]??"")}</td>`).join("")}</tr>`).join("");this.shadowRoot.innerHTML=`
|
|
5
|
-
<style>${u}</style>
|
|
6
|
-
<div class="table-wrap">
|
|
7
|
-
<table>
|
|
8
|
-
<thead><tr>${t}</tr></thead>
|
|
9
|
-
<tbody>${d}</tbody>
|
|
10
|
-
</table>
|
|
11
|
-
</div>
|
|
12
|
-
`,this.shadowRoot.querySelectorAll(".action-btn").forEach(n=>{n.addEventListener("click",o=>{const s=o.currentTarget,l=s.dataset.action,r=parseInt(s.dataset.rowIndex||"0",10);this.dispatchEvent(new CustomEvent("row-action",{bubbles:!0,composed:!0,detail:{action:l,row:this.rows[r],rowIndex:r}}))})})}}customElements.define("ui-table",w);
|