@diniz/webcomponents 1.1.2 → 1.1.3
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/README.md +959 -959
- package/dist/README.md +959 -0
- package/dist/style.css +893 -0
- package/dist/webcomponents.es.js +1193 -0
- package/dist/webcomponents.umd.js +238 -0
- package/package.json +1 -1
- package/dist/assets/checkbox-demo-page-C-tPBGML.js +0 -152
- package/dist/assets/dashboard-page-DG9XqSlN.js +0 -34
- package/dist/assets/date-picker-demo-BFqT8vXb.js +0 -146
- package/dist/assets/index-BiVNQ5Fp.js +0 -343
- package/dist/assets/index-DFxj0POj.css +0 -1
- package/dist/assets/input-demo-C8SDvXHc.js +0 -113
- package/dist/assets/modal-demo-page-DdQtx_aK.js +0 -164
- package/dist/assets/modal-h8khzJNk.js +0 -36
- package/dist/assets/select-demo-page-yyBh86Yw.js +0 -186
- package/dist/assets/table-DAobVRE7.js +0 -12
- package/dist/assets/table-demo-Dv1cyM0s.js +0 -74
- package/dist/assets/tabs-demo-BZZ6mTYB.js +0 -68
- package/dist/assets/vendor-BvJLUv9i.js +0 -5
- package/dist/index.html +0 -35
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
var v=Object.defineProperty;var h=(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)=>h(c,typeof s!="symbol"?s+"":s,t);import{B as l,t as m}from"./index-BiVNQ5Fp.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
|
-
<style>${m}</style>
|
|
3
|
-
<div class="date-picker-container">
|
|
4
|
-
<div class="date-input-wrapper ${r?"disabled":""}">
|
|
5
|
-
<input
|
|
6
|
-
type="text"
|
|
7
|
-
class="formatted-input"
|
|
8
|
-
part="input"
|
|
9
|
-
value="${o}"
|
|
10
|
-
placeholder="${n}"
|
|
11
|
-
${r?"disabled":""}
|
|
12
|
-
/>
|
|
13
|
-
<button
|
|
14
|
-
class="calendar-btn"
|
|
15
|
-
type="button"
|
|
16
|
-
${r?"disabled":""}
|
|
17
|
-
title="Open calendar"
|
|
18
|
-
>
|
|
19
|
-
<svg class="calendar-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
20
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
|
21
|
-
</svg>
|
|
22
|
-
</button>
|
|
23
|
-
<input
|
|
24
|
-
type="date"
|
|
25
|
-
class="hidden-date-input"
|
|
26
|
-
value="${t}"
|
|
27
|
-
${e?`min="${e}"`:""}
|
|
28
|
-
${i?`max="${i}"`:""}
|
|
29
|
-
${r?"disabled":""}
|
|
30
|
-
/>
|
|
31
|
-
</div>
|
|
32
|
-
<div class="format-label">Format: ${a}</div>
|
|
33
|
-
</div>
|
|
34
|
-
`}}customElements.define("ui-date-picker",k);const Y=`<h1>📅 Date Picker Component Demo</h1>\r
|
|
35
|
-
\r
|
|
36
|
-
<div class="demo-section">\r
|
|
37
|
-
<h2>Different Date Formats</h2>\r
|
|
38
|
-
\r
|
|
39
|
-
<div class="picker-row">\r
|
|
40
|
-
<div class="picker-label">Format: YYYY-MM-DD (ISO)</div>\r
|
|
41
|
-
<div class="picker-controls">\r
|
|
42
|
-
<ui-date-picker id="picker1" format="YYYY-MM-DD"></ui-date-picker>\r
|
|
43
|
-
<ui-button class="clear-btn" data-picker="picker1" variant="secondary">Clear</ui-button>\r
|
|
44
|
-
</div>\r
|
|
45
|
-
<div class="output" id="output-picker1">Select a date to see the output</div>\r
|
|
46
|
-
</div>\r
|
|
47
|
-
\r
|
|
48
|
-
<div class="picker-row">\r
|
|
49
|
-
<div class="picker-label">Format: DD/MM/YYYY (European)</div>\r
|
|
50
|
-
<div class="picker-controls">\r
|
|
51
|
-
<ui-date-picker id="picker2" format="DD/MM/YYYY"></ui-date-picker>\r
|
|
52
|
-
<ui-button class="clear-btn" data-picker="picker2" variant="secondary">Clear</ui-button>\r
|
|
53
|
-
</div>\r
|
|
54
|
-
<div class="output" id="output-picker2">Select a date to see the output</div>\r
|
|
55
|
-
</div>\r
|
|
56
|
-
\r
|
|
57
|
-
<div class="picker-row">\r
|
|
58
|
-
<div class="picker-label">Format: MM/DD/YYYY (US)</div>\r
|
|
59
|
-
<div class="picker-controls">\r
|
|
60
|
-
<ui-date-picker id="picker3" format="MM/DD/YYYY"></ui-date-picker>\r
|
|
61
|
-
<ui-button class="clear-btn" data-picker="picker3" variant="secondary">Clear</ui-button>\r
|
|
62
|
-
</div>\r
|
|
63
|
-
<div class="output" id="output-picker3">Select a date to see the output</div>\r
|
|
64
|
-
</div>\r
|
|
65
|
-
\r
|
|
66
|
-
<div class="picker-row">\r
|
|
67
|
-
<div class="picker-label">Format: DD-MM-YYYY</div>\r
|
|
68
|
-
<div class="picker-controls">\r
|
|
69
|
-
<ui-date-picker id="picker4" format="DD-MM-YYYY"></ui-date-picker>\r
|
|
70
|
-
<ui-button class="clear-btn" data-picker="picker4" variant="secondary">Clear</ui-button>\r
|
|
71
|
-
</div>\r
|
|
72
|
-
<div class="output" id="output-picker4">Select a date to see the output</div>\r
|
|
73
|
-
</div>\r
|
|
74
|
-
\r
|
|
75
|
-
<div class="picker-row">\r
|
|
76
|
-
<div class="picker-label">Format: MM-DD-YYYY</div>\r
|
|
77
|
-
<div class="picker-controls">\r
|
|
78
|
-
<ui-date-picker id="picker5" format="MM-DD-YYYY"></ui-date-picker>\r
|
|
79
|
-
<ui-button class="clear-btn" data-picker="picker5" variant="secondary">Clear</ui-button>\r
|
|
80
|
-
</div>\r
|
|
81
|
-
<div class="output" id="output-picker5">Select a date to see the output</div>\r
|
|
82
|
-
</div>\r
|
|
83
|
-
</div>\r
|
|
84
|
-
\r
|
|
85
|
-
<div class="demo-section">\r
|
|
86
|
-
<h2>With Constraints</h2>\r
|
|
87
|
-
\r
|
|
88
|
-
<div class="picker-row">\r
|
|
89
|
-
<div class="picker-label">With Min and Max Dates</div>\r
|
|
90
|
-
<div class="picker-controls">\r
|
|
91
|
-
<ui-date-picker id="picker6" format="DD/MM/YYYY" min="2026-01-01" max="2026-12-31"></ui-date-picker>\r
|
|
92
|
-
<ui-button class="clear-btn" data-picker="picker6" variant="secondary">Clear</ui-button>\r
|
|
93
|
-
</div>\r
|
|
94
|
-
<div class="output" id="output-picker6">Only dates in 2026 are allowed</div>\r
|
|
95
|
-
</div>\r
|
|
96
|
-
\r
|
|
97
|
-
<div class="picker-row">\r
|
|
98
|
-
<div class="picker-label">Disabled State</div>\r
|
|
99
|
-
<div class="picker-controls">\r
|
|
100
|
-
<ui-date-picker id="picker7" format="DD/MM/YYYY" disabled></ui-date-picker>\r
|
|
101
|
-
</div>\r
|
|
102
|
-
<div class="output" id="output-picker7">This picker is disabled</div>\r
|
|
103
|
-
</div>\r
|
|
104
|
-
\r
|
|
105
|
-
<div class="picker-row">\r
|
|
106
|
-
<div class="picker-label">With Initial Value</div>\r
|
|
107
|
-
<div class="picker-controls">\r
|
|
108
|
-
<ui-date-picker id="picker8" format="DD/MM/YYYY" value="2026-02-26"></ui-date-picker>\r
|
|
109
|
-
<ui-button class="clear-btn" data-picker="picker8" variant="secondary">Clear</ui-button>\r
|
|
110
|
-
</div>\r
|
|
111
|
-
<div class="output" id="output-picker8">Initial value: 2026-02-26</div>\r
|
|
112
|
-
</div>\r
|
|
113
|
-
</div>\r
|
|
114
|
-
\r
|
|
115
|
-
<div class="demo-section">\r
|
|
116
|
-
<h2>Usage Example</h2>\r
|
|
117
|
-
<div class="code-block">\r
|
|
118
|
-
<code><ui-date-picker \r
|
|
119
|
-
format="DD/MM/YYYY"\r
|
|
120
|
-
value="2026-02-26"\r
|
|
121
|
-
min="2026-01-01"\r
|
|
122
|
-
max="2026-12-31"\r
|
|
123
|
-
></ui-date-picker>\r
|
|
124
|
-
\r
|
|
125
|
-
<script>\r
|
|
126
|
-
const picker = document.querySelector('ui-date-picker');\r
|
|
127
|
-
\r
|
|
128
|
-
// Listen to date changes\r
|
|
129
|
-
picker.addEventListener('date-change', (e) => {\r
|
|
130
|
-
console.log('ISO Value:', e.detail.value);\r
|
|
131
|
-
console.log('Formatted Value:', e.detail.formattedValue);\r
|
|
132
|
-
console.log('Format:', e.detail.format);\r
|
|
133
|
-
});\r
|
|
134
|
-
\r
|
|
135
|
-
// Programmatic API\r
|
|
136
|
-
picker.setValue('2026-03-15');\r
|
|
137
|
-
console.log(picker.getISOValue()); // "2026-03-15"\r
|
|
138
|
-
console.log(picker.getFormattedValue()); // "15/03/2026"\r
|
|
139
|
-
picker.clear();\r
|
|
140
|
-
</script></code>\r
|
|
141
|
-
</div>\r
|
|
142
|
-
</div>\r
|
|
143
|
-
`,b=":host{display:block;padding:2rem;max-width:1200px;margin:0 auto}h1{font-size:2rem;margin-bottom:2rem;color:var(--color-ink, #0f172a)}h2{font-size:1.5rem;margin-top:2rem;margin-bottom:1rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:3rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.picker-row{margin-bottom:2rem}.picker-label{font-weight:600;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}.picker-controls{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}ui-date-picker{flex:1;min-width:250px}.output{margin-top:1rem;padding:1rem;background:#f8fafc;border-radius:8px;font-family:Courier New,monospace;font-size:.85rem;white-space:pre-wrap;color:#334155}.code-block{background:#f1f5f9;padding:1rem;border-radius:8px;overflow-x:auto;margin:1rem 0}code{font-family:Courier New,monospace;font-size:.9rem;color:#334155}";class f extends l{connectedCallback(){super.connectedCallback(),this.attachEventListeners()}attachEventListeners(){if(!this.shadowRoot)return;this.shadowRoot.querySelectorAll("ui-date-picker").forEach(t=>{t.addEventListener("date-change",a=>{var i;const e=(i=this.shadowRoot)==null?void 0:i.querySelector(`#output-${t.id}`);e&&(e.textContent=JSON.stringify(a.detail,null,2))})}),this.shadowRoot.addEventListener("click",t=>{var e,i;const a=t.target;if(a.closest(".clear-btn")){const r=(e=a.closest(".clear-btn"))==null?void 0:e.getAttribute("data-picker"),n=(i=this.shadowRoot)==null?void 0:i.querySelector(`#${r}`);n&&n.clear&&n.clear()}})}render(){this.shadowRoot.innerHTML=`
|
|
144
|
-
<style>${b}</style>
|
|
145
|
-
${Y}
|
|
146
|
-
`}}customElements.define("date-picker-demo",f);export{f as DatePickerDemo};
|
|
@@ -1,343 +0,0 @@
|
|
|
1
|
-
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/dashboard-page-DG9XqSlN.js","assets/table-DAobVRE7.js","assets/vendor-BvJLUv9i.js","assets/date-picker-demo-BFqT8vXb.js","assets/table-demo-Dv1cyM0s.js","assets/modal-h8khzJNk.js","assets/input-demo-C8SDvXHc.js","assets/modal-demo-page-DdQtx_aK.js","assets/select-demo-page-yyBh86Yw.js","assets/checkbox-demo-page-C-tPBGML.js","assets/tabs-demo-BZZ6mTYB.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
var I=Object.defineProperty;var $=(o,e,t)=>e in o?I(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var b=(o,e,t)=>$(o,typeof e!="symbol"?e+"":e,t);import{f as v}from"./vendor-BvJLUv9i.js";(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))a(r);new MutationObserver(r=>{for(const i of r)if(i.type==="childList")for(const n of i.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&a(n)}).observe(document,{childList:!0,subtree:!0});function t(r){const i={};return r.integrity&&(i.integrity=r.integrity),r.referrerPolicy&&(i.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?i.credentials="include":r.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function a(r){if(r.ep)return;r.ep=!0;const i=t(r);fetch(r.href,i)}})();const h=new Set,g={user:null,theme:"light"},E={getState:()=>g,setState(o){Object.assign(g,o),h.forEach(e=>e(g))},subscribe(o){return h.add(o),()=>h.delete(o)}},L="modulepreload",T=function(o){return"/webcomponents/"+o},w={},p=function(e,t,a){let r=Promise.resolve();if(t&&t.length>0){document.getElementsByTagName("link");const n=document.querySelector("meta[property=csp-nonce]"),s=(n==null?void 0:n.nonce)||(n==null?void 0:n.getAttribute("nonce"));r=Promise.allSettled(t.map(c=>{if(c=T(c),c in w)return;w[c]=!0;const d=c.endsWith(".css"),f=d?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${c}"]${f}`))return;const l=document.createElement("link");if(l.rel=d?"stylesheet":L,d||(l.as="script"),l.crossOrigin="",l.href=c,s&&l.setAttribute("nonce",s),document.head.appendChild(l),d)return new Promise((_,z)=>{l.addEventListener("load",_),l.addEventListener("error",()=>z(new Error(`Unable to preload CSS for ${c}`)))})}))}function i(n){const s=new Event("vite:preloadError",{cancelable:!0});if(s.payload=n,window.dispatchEvent(s),!s.defaultPrevented)throw n}return r.then(n=>{for(const s of n||[])s.status==="rejected"&&i(s.reason);return e().catch(i)})};function A(o){let e=o;const t=new Set;return{get:()=>e,set:a=>{Object.is(e,a)||(e=a,t.forEach(r=>r(e)))},subscribe:a=>(t.add(a),()=>t.delete(a))}}class y extends HTMLElement{constructor(){super();b(this,"state");b(this,"signalUnsubs");this.attachShadow({mode:"open"}),this.state={},this.signalUnsubs=new Set}useSignal(t){const a=A(t),r=a.subscribe(()=>this.render());return this.signalUnsubs.add(r),a}setState(t){this.state={...this.state,...t},this.render()}connectedCallback(){this.render()}disconnectedCallback(){this.signalUnsubs.forEach(t=>t()),this.signalUnsubs.clear()}render(){}}const k=':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.danger{background:#ef4444;color:#fff;border-color:#ef4444}.btn-danger:hover{background:#6626dc;border-color:#dc2626}.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}.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}',P=`
|
|
3
|
-
:host {
|
|
4
|
-
display: block;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.sidebar {
|
|
8
|
-
background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%);
|
|
9
|
-
border-radius: 20px;
|
|
10
|
-
padding: 28px 20px;
|
|
11
|
-
display: flex;
|
|
12
|
-
flex-direction: column;
|
|
13
|
-
gap: 8px;
|
|
14
|
-
position: relative;
|
|
15
|
-
overflow: hidden;
|
|
16
|
-
min-height: 520px;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.sidebar::before {
|
|
20
|
-
content: '';
|
|
21
|
-
position: absolute;
|
|
22
|
-
top: -50%;
|
|
23
|
-
left: -50%;
|
|
24
|
-
width: 200%;
|
|
25
|
-
height: 200%;
|
|
26
|
-
background: radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%);
|
|
27
|
-
pointer-events: none;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.sidebar-brand {
|
|
31
|
-
display: flex;
|
|
32
|
-
align-items: center;
|
|
33
|
-
gap: 12px;
|
|
34
|
-
padding: 0 8px 20px;
|
|
35
|
-
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
36
|
-
margin-bottom: 12px;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.brand-icon {
|
|
40
|
-
width: 42px;
|
|
41
|
-
height: 42px;
|
|
42
|
-
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
|
43
|
-
border-radius: 12px;
|
|
44
|
-
display: flex;
|
|
45
|
-
align-items: center;
|
|
46
|
-
justify-content: center;
|
|
47
|
-
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.brand-icon svg {
|
|
51
|
-
width: 22px;
|
|
52
|
-
height: 22px;
|
|
53
|
-
stroke: white;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.brand-text {
|
|
57
|
-
font: 700 18px/1.2 "Sora", system-ui, sans-serif;
|
|
58
|
-
color: #fff;
|
|
59
|
-
letter-spacing: -0.02em;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.brand-sub {
|
|
63
|
-
font: 500 11px/1 "Sora", system-ui, sans-serif;
|
|
64
|
-
color: rgba(255, 255, 255, 0.4);
|
|
65
|
-
text-transform: uppercase;
|
|
66
|
-
letter-spacing: 0.1em;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.nav-section {
|
|
70
|
-
display: flex;
|
|
71
|
-
flex-direction: column;
|
|
72
|
-
gap: 4px;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.nav-label {
|
|
76
|
-
font: 600 10px/1 "Sora", system-ui, sans-serif;
|
|
77
|
-
color: rgba(255, 255, 255, 0.3);
|
|
78
|
-
text-transform: uppercase;
|
|
79
|
-
letter-spacing: 0.12em;
|
|
80
|
-
padding: 16px 12px 8px;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.sidebar-link {
|
|
84
|
-
display: flex;
|
|
85
|
-
align-items: center;
|
|
86
|
-
gap: 12px;
|
|
87
|
-
padding: 12px 14px;
|
|
88
|
-
border-radius: 12px;
|
|
89
|
-
color: rgba(255, 255, 255, 0.6);
|
|
90
|
-
text-decoration: none;
|
|
91
|
-
font: 500 14px/1.3 "DM Sans", system-ui, sans-serif;
|
|
92
|
-
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
93
|
-
position: relative;
|
|
94
|
-
overflow: hidden;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.sidebar-link::before {
|
|
98
|
-
content: '';
|
|
99
|
-
position: absolute;
|
|
100
|
-
inset: 0;
|
|
101
|
-
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
|
|
102
|
-
border-radius: 12px;
|
|
103
|
-
opacity: 0;
|
|
104
|
-
transition: opacity 200ms ease;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.sidebar-link:hover {
|
|
108
|
-
color: #fff;
|
|
109
|
-
background: rgba(255, 255, 255, 0.04);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.sidebar-link:hover::before {
|
|
113
|
-
opacity: 1;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.sidebar-link.active {
|
|
117
|
-
color: #fff;
|
|
118
|
-
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.sidebar-link.active::after {
|
|
122
|
-
content: '';
|
|
123
|
-
position: absolute;
|
|
124
|
-
left: 0;
|
|
125
|
-
top: 50%;
|
|
126
|
-
transform: translateY(-50%);
|
|
127
|
-
width: 3px;
|
|
128
|
-
height: 24px;
|
|
129
|
-
background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
|
|
130
|
-
border-radius: 0 3px 3px 0;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.link-icon {
|
|
134
|
-
width: 18px;
|
|
135
|
-
height: 18px;
|
|
136
|
-
flex-shrink: 0;
|
|
137
|
-
opacity: 0.7;
|
|
138
|
-
transition: opacity 200ms ease;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
.sidebar-link:hover .link-icon,
|
|
142
|
-
.sidebar-link.active .link-icon {
|
|
143
|
-
opacity: 1;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.link-icon svg {
|
|
147
|
-
width: 100%;
|
|
148
|
-
height: 100%;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.sidebar-footer {
|
|
152
|
-
margin-top: auto;
|
|
153
|
-
padding-top: 16px;
|
|
154
|
-
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.sidebar-link[data-link] {
|
|
158
|
-
cursor: pointer;
|
|
159
|
-
}
|
|
160
|
-
`;class C extends y{constructor(){super(...arguments);b(this,"navItems",[{icon:"box",label:"Components",href:"/",active:!1},{icon:"edit-3",label:"Input",href:"/input-demo",active:!1},{icon:"calendar",label:"Date Picker",href:"/date-picker",active:!1},{icon:"table",label:"Table",href:"/table-demo",active:!1},{icon:"square",label:"Modal",href:"/modal",active:!1},{icon:"list",label:"Select",href:"/select",active:!1},{icon:"check-square",label:"Checkbox",href:"/checkbox",active:!1},{icon:"folder",label:"Tabs",href:"/tabs",active:!1}])}connectedCallback(){this.setAttribute("data-ui","sidebar"),super.connectedCallback(),this.updateActiveState(),window.addEventListener("popstate",()=>this.updateActiveState()),document.addEventListener("click",()=>this.updateActiveState())}updateActiveState(){const t=window.location.pathname;this.navItems=this.navItems.map(a=>({...a,active:a.href===t})),this.render()}renderIcon(t){var r;return((r=v.icons[t])==null?void 0:r.toSvg({class:""}))||""}render(){const t=this.navItems.map(a=>`
|
|
161
|
-
<a
|
|
162
|
-
class="sidebar-link ${a.active?"active":""}"
|
|
163
|
-
href="${a.href}"
|
|
164
|
-
data-link
|
|
165
|
-
>
|
|
166
|
-
<span class="link-icon">${this.renderIcon(a.icon)}</span>
|
|
167
|
-
${a.label}
|
|
168
|
-
</a>
|
|
169
|
-
`).join("");this.shadowRoot.innerHTML=`
|
|
170
|
-
<style>${k}${P}</style>
|
|
171
|
-
<aside class="sidebar">
|
|
172
|
-
<div class="sidebar-brand">
|
|
173
|
-
<div class="brand-icon">
|
|
174
|
-
${this.renderIcon("hexagon")}
|
|
175
|
-
</div>
|
|
176
|
-
<div>
|
|
177
|
-
<div class="brand-text">UI Kit</div>
|
|
178
|
-
<div class="brand-sub">Components</div>
|
|
179
|
-
</div>
|
|
180
|
-
</div>
|
|
181
|
-
|
|
182
|
-
<nav class="nav-section">
|
|
183
|
-
<div class="nav-label">Components</div>
|
|
184
|
-
${t}
|
|
185
|
-
</nav>
|
|
186
|
-
|
|
187
|
-
<div class="sidebar-footer">
|
|
188
|
-
<a class="sidebar-link" href="https://github.com" target="_blank" rel="noopener">
|
|
189
|
-
<span class="link-icon">${this.renderIcon("github")}</span>
|
|
190
|
-
GitHub
|
|
191
|
-
</a>
|
|
192
|
-
</div>
|
|
193
|
-
</aside>
|
|
194
|
-
`}}customElements.define("app-sidebar",C);class D extends y{connectedCallback(){this.setAttribute("data-ui","button"),super.connectedCallback()}static get observedAttributes(){return["variant","size","disabled","type","icon","icon-position"]}attributeChangedCallback(){this.render()}getVariant(){const e=this.getAttribute("variant");return e==="secondary"||e==="ghost"||e==="danger"?e:"primary"}getSize(){const e=this.getAttribute("size");return e==="sm"||e==="lg"?e:"md"}getType(){return this.getAttribute("type")??"button"}getIcon(){var r;const e=this.getAttribute("icon");if(!e)return null;const t=e.trim();return{html:`<span class="btn-icon">${((r=v.icons[t])==null?void 0:r.toSvg())||""}</span>`,name:t}}getIconPosition(){return this.getAttribute("icon-position")==="right"?"right":"left"}render(){const e=this.getVariant(),t=this.getSize(),a=this.hasAttribute("disabled"),r=this.getType(),i=this.getIcon(),n=this.getIconPosition(),s=i!==null,c=i?i.html:"",d=this.innerHTML.trim(),f=s&&!d;let l;s&&d?l=n==="left"?`${c}<span>${d}</span>`:`<span>${d}</span>${c}`:s?l=c:l=d,this.shadowRoot.innerHTML=`
|
|
195
|
-
<style>${k}</style>
|
|
196
|
-
<button
|
|
197
|
-
part="button"
|
|
198
|
-
class="btn ${e} ${t}${s?" has-icon":""}${f?" icon-only":""}"
|
|
199
|
-
type="${r}"
|
|
200
|
-
${a?"disabled":""}
|
|
201
|
-
>
|
|
202
|
-
${l}
|
|
203
|
-
</button>
|
|
204
|
-
`}}customElements.define("ui-button",D);const O=[{path:"/",layout:"app-layout",load:()=>p(()=>import("./dashboard-page-DG9XqSlN.js"),__vite__mapDeps([0,1,2])),component:"dashboard-page"},{path:"/date-picker",layout:"app-layout",load:()=>p(()=>import("./date-picker-demo-BFqT8vXb.js"),__vite__mapDeps([3,2])),component:"date-picker-demo"},{path:"/table-demo",layout:"app-layout",load:()=>p(()=>import("./table-demo-Dv1cyM0s.js"),__vite__mapDeps([4,1,5,2])),component:"table-demo"},{path:"/input-demo",layout:"app-layout",load:()=>p(()=>import("./input-demo-C8SDvXHc.js"),__vite__mapDeps([6,2])),component:"input-demo"},{path:"/modal",layout:"app-layout",load:()=>p(()=>import("./modal-demo-page-DdQtx_aK.js"),__vite__mapDeps([7,5,2])),component:"modal-demo-page"},{path:"/select",layout:"app-layout",load:()=>p(()=>import("./select-demo-page-yyBh86Yw.js"),__vite__mapDeps([8,2])),component:"select-demo-page"},{path:"/checkbox",layout:"app-layout",load:()=>p(()=>import("./checkbox-demo-page-C-tPBGML.js"),__vite__mapDeps([9,2])),component:"checkbox-demo-page"},{path:"/tabs",layout:"app-layout",load:()=>p(()=>import("./tabs-demo-BZZ6mTYB.js"),__vite__mapDeps([10,2])),component:"tabs-demo"}],j=`
|
|
205
|
-
:host {
|
|
206
|
-
display: block;
|
|
207
|
-
min-height: 100vh;
|
|
208
|
-
background: #f8f9fc;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
.layout {
|
|
212
|
-
display: grid;
|
|
213
|
-
grid-template-columns: 280px 1fr;
|
|
214
|
-
gap: 28px;
|
|
215
|
-
padding: 28px;
|
|
216
|
-
max-width: 1600px;
|
|
217
|
-
margin: 0 auto;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
.main-area {
|
|
221
|
-
display: flex;
|
|
222
|
-
flex-direction: column;
|
|
223
|
-
gap: 24px;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.top-bar {
|
|
227
|
-
display: flex;
|
|
228
|
-
align-items: center;
|
|
229
|
-
justify-content: space-between;
|
|
230
|
-
padding: 20px 28px;
|
|
231
|
-
background: #fff;
|
|
232
|
-
border-radius: 18px;
|
|
233
|
-
box-shadow:
|
|
234
|
-
0 1px 3px rgba(0, 0, 0, 0.02),
|
|
235
|
-
0 4px 12px rgba(0, 0, 0, 0.02);
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
.page-title {
|
|
239
|
-
font: 700 26px/1.2 "Sora", system-ui, sans-serif;
|
|
240
|
-
color: #1e1e2d;
|
|
241
|
-
letter-spacing: -0.02em;
|
|
242
|
-
margin: 0;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
.page-subtitle {
|
|
246
|
-
font: 400 14px/1.5 "DM Sans", system-ui, sans-serif;
|
|
247
|
-
color: #6b7280;
|
|
248
|
-
margin: 4px 0 0;
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
.top-actions {
|
|
252
|
-
display: flex;
|
|
253
|
-
align-items: center;
|
|
254
|
-
gap: 12px;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
.icon-btn {
|
|
258
|
-
width: 42px;
|
|
259
|
-
height: 42px;
|
|
260
|
-
border: none;
|
|
261
|
-
background: #f3f4f6;
|
|
262
|
-
border-radius: 12px;
|
|
263
|
-
cursor: pointer;
|
|
264
|
-
display: flex;
|
|
265
|
-
align-items: center;
|
|
266
|
-
justify-content: center;
|
|
267
|
-
transition: all 180ms ease;
|
|
268
|
-
color: #4b5563;
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
.icon-btn:hover {
|
|
272
|
-
background: #e5e7eb;
|
|
273
|
-
color: #1f2937;
|
|
274
|
-
transform: translateY(-1px);
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
.icon-btn svg {
|
|
278
|
-
width: 20px;
|
|
279
|
-
height: 20px;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
.content-area {
|
|
283
|
-
background: #fff;
|
|
284
|
-
border-radius: 20px;
|
|
285
|
-
padding: 28px;
|
|
286
|
-
box-shadow:
|
|
287
|
-
0 1px 3px rgba(0, 0, 0, 0.02),
|
|
288
|
-
0 4px 16px rgba(0, 0, 0, 0.02);
|
|
289
|
-
min-height: 400px;
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
@media (max-width: 1024px) {
|
|
293
|
-
.layout {
|
|
294
|
-
grid-template-columns: 1fr;
|
|
295
|
-
padding: 20px;
|
|
296
|
-
gap: 20px;
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
:host([data-ui="layout"]) {
|
|
300
|
-
display: block;
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
.top-bar {
|
|
304
|
-
flex-direction: column;
|
|
305
|
-
align-items: flex-start;
|
|
306
|
-
gap: 16px;
|
|
307
|
-
padding: 16px 20px;
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
.content-area {
|
|
311
|
-
padding: 20px;
|
|
312
|
-
}
|
|
313
|
-
}
|
|
314
|
-
`;class R extends y{constructor(){super(...arguments);b(this,"pageTitle","Dashboard");b(this,"pageSubtitle","Explore our component library")}connectedCallback(){this.setAttribute("data-ui","layout"),super.connectedCallback(),this.updateTitle(),window.addEventListener("popstate",()=>this.updateTitle()),document.addEventListener("click",()=>this.updateTitle())}updateTitle(){const t=window.location.pathname,r={"/":{title:"Components",subtitle:"Explore our web components library"},"/input-demo":{title:"Input",subtitle:"Form inputs with validation"},"/date-picker":{title:"Date Picker",subtitle:"Date selection component"},"/table-demo":{title:"Table",subtitle:"Data table with actions"},"/modal":{title:"Modal",subtitle:"Dialog and overlay components"},"/select":{title:"Select",subtitle:"Dropdown selection component"},"/checkbox":{title:"Checkbox",subtitle:"Checkbox input component"},"/tabs":{title:"Tabs",subtitle:"Tabbed navigation component"}}[t]||{title:"Dashboard",subtitle:"Explore our component library"};this.pageTitle=r.title,this.pageSubtitle=r.subtitle,this.render()}renderIcon(t){var a;return((a=v.icons[t])==null?void 0:a.toSvg({class:""}))||""}render(){this.shadowRoot.innerHTML=`
|
|
315
|
-
<style>${k}${j}</style>
|
|
316
|
-
<div class="layout">
|
|
317
|
-
<app-sidebar></app-sidebar>
|
|
318
|
-
|
|
319
|
-
<div class="main-area">
|
|
320
|
-
<header class="top-bar">
|
|
321
|
-
<div>
|
|
322
|
-
<h1 class="page-title">${this.pageTitle}</h1>
|
|
323
|
-
<p class="page-subtitle">${this.pageSubtitle}</p>
|
|
324
|
-
</div>
|
|
325
|
-
<div class="top-actions">
|
|
326
|
-
<button class="icon-btn" title="Search">
|
|
327
|
-
${this.renderIcon("search")}
|
|
328
|
-
</button>
|
|
329
|
-
<button class="icon-btn" title="Notifications">
|
|
330
|
-
${this.renderIcon("bell")}
|
|
331
|
-
</button>
|
|
332
|
-
<ui-button variant="primary" size="sm">
|
|
333
|
-
${this.renderIcon("plus")} New
|
|
334
|
-
</ui-button>
|
|
335
|
-
</div>
|
|
336
|
-
</header>
|
|
337
|
-
|
|
338
|
-
<main class="content-area">
|
|
339
|
-
<slot></slot>
|
|
340
|
-
</main>
|
|
341
|
-
</div>
|
|
342
|
-
</div>
|
|
343
|
-
`}}customElements.define("app-layout",R);const u="/webcomponents/";function U(o){const e=u.endsWith("/")?u.slice(0,-1):u;return o===e||o===e+"/"?"/":o.startsWith(e+"/")?o.slice(e.length):o}function x(o){return`${u.endsWith("/")?u.slice(0,-1):u}${o}`}async function m(){const o=location.pathname,e=U(o),t=O.find(n=>n.path===e);if(!t){if(e!=="/"){const n=x("/");history.replaceState(null,"",n),await m()}return}if(await t.load(),t.guard&&!await t.guard()){const s=x("/");history.replaceState(null,"",s),await m();return}const a=document.createElement(t.layout),r=document.createElement(t.component);a.appendChild(r);const i=document.querySelector("#app");i&&(i.innerHTML="",i.appendChild(a))}window.addEventListener("popstate",m);window.addEventListener("DOMContentLoaded",m);document.addEventListener("click",o=>{const t=o.composedPath().find(a=>a instanceof Element&&a.matches("[data-link]"));if(t){o.preventDefault();const a=t.getAttribute("href")??"/",r=x(a);history.pushState(null,"",r),m()}});const S=o=>{document.documentElement.dataset.theme=o};S(E.getState().theme);E.subscribe(o=>S(o.theme));export{y as B,E as s,k as t};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
: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.danger{background:#ef4444;color:#fff;border-color:#ef4444}.btn-danger:hover{background:#6626dc;border-color:#dc2626}.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}.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}:root[data-theme=shadcn]{--color-primary: #0f172a;--color-primary-contrast: #f8fafc;--color-ink: #0f172a;--color-muted: #f4f4f5;--color-header: #fafafa;--color-border: #e4e4e7;--color-border-strong: #d4d4d8;--color-nav-bg: #ffffff;--color-nav-text: #0f172a;--shadow-primary: 0 8px 18px rgba(15, 23, 42, .18);--focus-ring: #a1a1aa;--color-page-bg: #f8fafc;--color-page-text: #0f172a}
|