@lancar/lxui 1.0.0
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/CHANGELOG.md +88 -0
- package/LICENSE +21 -0
- package/README.md +5072 -0
- package/css/base/reset.css +91 -0
- package/css/base/tokens-extended.css +119 -0
- package/css/base/tokens.css +105 -0
- package/css/base/typography.css +35 -0
- package/css/base/utils.css +26 -0
- package/css/components/accordion.css +25 -0
- package/css/components/alert.css +22 -0
- package/css/components/animations.css +26 -0
- package/css/components/avatar.css +38 -0
- package/css/components/back-top.css +32 -0
- package/css/components/badge.css +37 -0
- package/css/components/breadcrumb.css +13 -0
- package/css/components/button.css +103 -0
- package/css/components/callout.css +20 -0
- package/css/components/card.css +42 -0
- package/css/components/carousel.css +31 -0
- package/css/components/chip.css +52 -0
- package/css/components/code-block.css +22 -0
- package/css/components/collapse.css +6 -0
- package/css/components/compat.css +27 -0
- package/css/components/dark-mode.css +35 -0
- package/css/components/divider.css +36 -0
- package/css/components/dropdown.css +39 -0
- package/css/components/empty.css +34 -0
- package/css/components/fab.css +28 -0
- package/css/components/file-drop.css +47 -0
- package/css/components/forms.css +107 -0
- package/css/components/kbd.css +5 -0
- package/css/components/list-group.css +17 -0
- package/css/components/modal.css +50 -0
- package/css/components/nav.css +25 -0
- package/css/components/navbar.css +44 -0
- package/css/components/number-input.css +52 -0
- package/css/components/offcanvas.css +25 -0
- package/css/components/pagination.css +17 -0
- package/css/components/popover.css +12 -0
- package/css/components/progress.css +26 -0
- package/css/components/rating.css +28 -0
- package/css/components/section.css +18 -0
- package/css/components/skeleton.css +19 -0
- package/css/components/spinner.css +38 -0
- package/css/components/stat.css +58 -0
- package/css/components/steps.css +76 -0
- package/css/components/table.css +29 -0
- package/css/components/tag.css +29 -0
- package/css/components/timeline.css +11 -0
- package/css/components/toast.css +14 -0
- package/css/components/toggler.css +20 -0
- package/css/components/tooltip.css +10 -0
- package/css/index.css +59 -0
- package/css/layout/grid.css +71 -0
- package/css/layout/utilities.css +257 -0
- package/js/breakpoint.js +13 -0
- package/js/carousel.js +62 -0
- package/js/clipboard.js +28 -0
- package/js/collapse.js +36 -0
- package/js/counter.js +38 -0
- package/js/dropdown.js +27 -0
- package/js/index.js +19 -0
- package/js/init.js +89 -0
- package/js/modal.js +44 -0
- package/js/number-input.js +44 -0
- package/js/offcanvas.js +28 -0
- package/js/popover.js +39 -0
- package/js/rating.js +39 -0
- package/js/scrollspy.js +24 -0
- package/js/tab.js +18 -0
- package/js/theme.js +9 -0
- package/js/toast.js +73 -0
- package/js/tooltip.js +39 -0
- package/js/utils.js +20 -0
- package/lx-grid.min.css +2 -0
- package/lx-utilities.min.css +2 -0
- package/lxeditor.min.css +2 -0
- package/lxfonts.min.css +2 -0
- package/lxicons.min.css +2 -0
- package/lxmarked.js +276 -0
- package/lxthemes.min.css +2 -0
- package/lxui.bundle.js +540 -0
- package/lxui.bundle.min.js +13 -0
- package/lxui.css +2163 -0
- package/lxui.esm.js +669 -0
- package/lxui.esm.min.js +8 -0
- package/lxui.js +859 -0
- package/lxui.min.css +2 -0
- package/lxui.min.js +7 -0
- package/lxui.rtl.css +2466 -0
- package/lxui.rtl.min.css +2 -0
- package/marked.min.js +69 -0
- package/package.json +183 -0
- package/types/index.d.ts +284 -0
package/lxui.esm.min.js
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* LxUI v1.0.0 ESM — Modern CSS Framework
|
|
3
|
+
* https://ui.lancar.id
|
|
4
|
+
* Copyright (c) 2025 lancar.id — MIT License
|
|
5
|
+
*
|
|
6
|
+
* ES Module — import { Modal, Toast, theme } from 'lxui'
|
|
7
|
+
*/
|
|
8
|
+
"use strict";function qs(t,e){return(e||document).querySelector(t)}function qsa(t,e){return Array.from((e||document).querySelectorAll(t))}function on(t,e,s,i){t&&t.addEventListener(e,s,i)}function off(t,e,s){t&&t.removeEventListener(e,s)}function emit(t,e,s){t.dispatchEvent(new CustomEvent("lx."+e,{bubbles:!0,cancelable:!0,detail:s}))}function trap(t){const e=qsa('button,a,[href],[tabindex]:not([tabindex="-1"]),input,select,textarea',t).filter(t=>!t.disabled&&null!==t.offsetParent);if(!e.length)return;const s=e[0],i=e[e.length-1];on(t,"keydown",t=>{"Tab"===t.key&&(t.shiftKey?document.activeElement===s&&(t.preventDefault(),i.focus()):document.activeElement===i&&(t.preventDefault(),s.focus()))})}export class Modal{constructor(t,e={}){this.el="string"==typeof t?qs(t):t,this.el&&(this.opts=Object.assign({backdrop:!0,keyboard:!0,focus:!0},e),this._backdrop=null,this._prevFocus=null)}show(){this.el&&(emit(this.el,"modal.show"),this._prevFocus=document.activeElement,this._backdrop=document.createElement("div"),this._backdrop.className="lx-modal-backdrop lx-fade lx-show",document.body.appendChild(this._backdrop),document.body.classList.add("lx-modal-open"),this.el.classList.add("lx-show"),this.el.style.display="flex",this.el.removeAttribute("aria-hidden"),this.opts.focus&&trap(this.el),this.opts.keyboard&&(this._keyHandler=t=>{"Escape"===t.key&&this.hide()},on(document,"keydown",this._keyHandler)),this.opts.backdrop&&on(this._backdrop,"click",()=>this.hide()),requestAnimationFrame(()=>emit(this.el,"modal.shown")))}hide(){this.el&&(emit(this.el,"modal.hide"),this.el.classList.remove("lx-show"),this.el.style.display="",this.el.setAttribute("aria-hidden","true"),this._backdrop&&(this._backdrop.remove(),this._backdrop=null),document.body.classList.remove("lx-modal-open"),this._keyHandler&&off(document,"keydown",this._keyHandler),this._prevFocus&&this._prevFocus.focus(),emit(this.el,"modal.hidden"))}toggle(){this.el.classList.contains("lx-show")?this.hide():this.show()}}export const Toast={_container(t){const e="lx-toast-"+t;let s=document.getElementById(e);if(!s){s=document.createElement("div"),s.id=e;const i={"top-right":"top:1rem;right:1rem","top-left":"top:1rem;left:1rem","bottom-right":"bottom:1rem;right:1rem","bottom-left":"bottom:1rem;left:1rem","top-center":"top:1rem;left:50%;transform:translateX(-50%)","bottom-center":"bottom:1rem;left:50%;transform:translateX(-50%)"};s.setAttribute("style",`position:fixed;z-index:1090;display:flex;flex-direction:column;gap:.5rem;${i[t]||i["top-right"]}`),document.body.appendChild(s)}return s},show(t={}){const{message:e="",type:s="default",duration:i=4e3,position:o="top-right",title:a=""}=t,l={success:"#22c55e",warning:"#f59e0b",danger:"#ef4444",info:"#06b6d4",default:"#3b82f6"},n=document.createElement("div");n.setAttribute("role","alert"),n.setAttribute("aria-live","assertive"),n.setAttribute("aria-atomic","true"),n.style.cssText="background:var(--surface,#fff);border:1px solid var(--border-default,#e5e7eb);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:.875rem 1rem;min-width:280px;max-width:380px;display:flex;align-items:flex-start;gap:.75rem;animation:lxSlideIn .2s ease";const r=document.createElement("span");if(r.style.cssText="width:8px;height:8px;border-radius:50%;background:"+(l[s]||l.default)+";flex-shrink:0;margin-top:4px",n.appendChild(r),a){const t=document.createElement("div"),s=document.createElement("strong");s.style.cssText="display:block;margin-bottom:2px;font-size:.875rem",s.textContent=a;const i=document.createElement("span");i.style.cssText="font-size:.875rem;color:var(--text-secondary,#6b7280)",i.textContent=e,t.appendChild(s),t.appendChild(i),n.appendChild(t)}else{const t=document.createElement("span");t.style.cssText="font-size:.875rem;color:var(--text-primary,#111827);flex:1",t.textContent=e,n.appendChild(t)}const h=document.createElement("button");if(h.style.cssText="background:none;border:none;cursor:pointer;padding:0;color:var(--text-muted,#9ca3af);font-size:1.125rem;line-height:1;margin-left:auto",h.setAttribute("aria-label","Close"),h.textContent="×",h.addEventListener("click",()=>n.remove()),n.appendChild(h),this._container(o).appendChild(n),!document.getElementById("lx-toast-style")){const t=document.createElement("style");t.id="lx-toast-style",t.textContent="@keyframes lxSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}",document.head.appendChild(t)}i>0&&setTimeout(()=>{n.style.opacity="0",n.style.transition="opacity .2s",setTimeout(()=>n.remove(),200)},i)},success(t,e={}){this.show({...e,message:t,type:"success"})},error(t,e={}){this.show({...e,message:t,type:"danger"})},warning(t,e={}){this.show({...e,message:t,type:"warning"})},info(t,e={}){this.show({...e,message:t,type:"info"})}};export class Collapse{constructor(t){this.el="string"==typeof t?qs(t):t}show(){this.el&&(emit(this.el,"collapse.show"),this.el.style.height="0px",this.el.classList.add("lx-collapsing"),this.el.classList.remove("lx-collapse","lx-show"),this.el.style.height=this.el.scrollHeight+"px",this.el.addEventListener("transitionend",()=>{this.el.classList.remove("lx-collapsing"),this.el.classList.add("lx-collapse","lx-show"),this.el.style.height="",emit(this.el,"collapse.shown")},{once:!0}))}hide(){this.el&&(emit(this.el,"collapse.hide"),this.el.style.height=this.el.scrollHeight+"px",this.el.classList.add("lx-collapsing"),this.el.classList.remove("lx-collapse","lx-show"),requestAnimationFrame(()=>{this.el.style.height="0px"}),this.el.addEventListener("transitionend",()=>{this.el.classList.remove("lx-collapsing"),this.el.classList.add("lx-collapse"),this.el.style.height="",emit(this.el,"collapse.hidden")},{once:!0}))}toggle(){this.el&&this.el.classList.contains("lx-show")?this.hide():this.show()}}export class Dropdown{constructor(t){this.trigger="string"==typeof t?qs(t):t,this.menu=this.trigger&&this.trigger.nextElementSibling,this._outside=t=>{this.trigger.closest(".lx-dropdown").contains(t.target)||this.hide()}}show(){this.menu&&(emit(this.trigger,"dropdown.show"),this.menu.classList.add("lx-show"),this.trigger.setAttribute("aria-expanded","true"),setTimeout(()=>on(document,"click",this._outside),0),emit(this.trigger,"dropdown.shown"))}hide(){this.menu&&(emit(this.trigger,"dropdown.hide"),this.menu.classList.remove("lx-show"),this.trigger.setAttribute("aria-expanded","false"),off(document,"click",this._outside),emit(this.trigger,"dropdown.hidden"))}toggle(){this.menu&&this.menu.classList.contains("lx-show")?this.hide():this.show()}}export class Offcanvas{constructor(t){this.el="string"==typeof t?qs(t):t,this._backdrop=null}show(){this.el&&(this._backdrop=document.createElement("div"),this._backdrop.className="lx-offcanvas-backdrop",this._backdrop.style.cssText="position:fixed;inset:0;z-index:1039;background:rgba(0,0,0,.5)",document.body.appendChild(this._backdrop),document.body.style.overflow="hidden",this.el.classList.add("lx-show"),this.el.removeAttribute("aria-hidden"),trap(this.el),on(this._backdrop,"click",()=>this.hide()),on(document,"keydown",this._esc=t=>{"Escape"===t.key&&this.hide()}))}hide(){this.el&&(this.el.classList.remove("lx-show"),this.el.setAttribute("aria-hidden","true"),this._backdrop&&(this._backdrop.remove(),this._backdrop=null),document.body.style.overflow="",off(document,"keydown",this._esc))}toggle(){this.el&&this.el.classList.contains("lx-show")?this.hide():this.show()}}export class Tooltip{constructor(t,e={}){this.el="string"==typeof t?qs(t):t,this.el&&(this.opts=Object.assign({placement:"top",trigger:"hover",delay:{show:0,hide:0}},e),this._tip=null,this._attach())}_attach(){const t=()=>{clearTimeout(this._hideTimer),this._showTimer=setTimeout(()=>this._show(),this.opts.delay.show)},e=()=>{clearTimeout(this._showTimer),this._hideTimer=setTimeout(()=>this._hide(),this.opts.delay.hide)};this.opts.trigger.includes("hover")&&(on(this.el,"mouseenter",t),on(this.el,"mouseleave",e)),this.opts.trigger.includes("focus")&&(on(this.el,"focusin",t),on(this.el,"focusout",e))}_show(){const t=this.el.getAttribute("title")||this.el.dataset.lxOrigTitle||"";if(!t)return;this.el.getAttribute("title")&&(this.el.dataset.lxOrigTitle=t,this.el.removeAttribute("title")),this._tip=document.createElement("div"),this._tip.className="lx-tooltip lx-tooltip-"+this.opts.placement,this._tip.setAttribute("role","tooltip"),this._tip.style.cssText="position:absolute;z-index:1080;padding:4px 8px;background:rgba(0,0,0,.85);color:#fff;border-radius:4px;font-size:.75rem;white-space:nowrap;pointer-events:none",this._tip.textContent=t,document.body.appendChild(this._tip);const e=this.el.getBoundingClientRect(),s=this._tip.getBoundingClientRect(),i=window.scrollY,o=this.opts.placement;let a=0,l=0;"top"===o?(a=e.top+i-s.height-6,l=e.left+(e.width-s.width)/2):"bottom"===o?(a=e.bottom+i+6,l=e.left+(e.width-s.width)/2):"left"===o?(a=e.top+i+(e.height-s.height)/2,l=e.left-s.width-6):(a=e.top+i+(e.height-s.height)/2,l=e.right+6),this._tip.style.top=a+"px",this._tip.style.left=l+"px"}_hide(){this._tip&&(this._tip.remove(),this._tip=null)}}export class Popover{constructor(t,e={}){this.el="string"==typeof t?qs(t):t,this.el&&(this.opts=Object.assign({placement:"top",trigger:"click"},e),this._pop=null,this.opts.trigger.includes("click")&&on(this.el,"click",()=>this._pop?this._hide():this._show()))}_show(){const t=this.el.dataset.lxTitle||"",e=this.el.dataset.lxContent||"";if(this._pop=document.createElement("div"),this._pop.className="lx-popover",this._pop.setAttribute("role","tooltip"),this._pop.style.cssText="position:absolute;z-index:1070;background:var(--surface,#fff);border:1px solid var(--border-default,#e5e7eb);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:.75rem 1rem;min-width:200px;max-width:300px",t){const e=document.createElement("strong");e.style.cssText="display:block;margin-bottom:.5rem;font-size:.875rem",e.textContent=t,this._pop.appendChild(e)}const s=document.createElement("p");s.style.cssText="margin:0;font-size:.875rem;color:var(--text-secondary,#6b7280)",s.textContent=e,this._pop.appendChild(s),document.body.appendChild(this._pop);const i=this.el.getBoundingClientRect(),o=window.scrollY;this._pop.style.top=i.bottom+o+8+"px",this._pop.style.left=i.left+"px",setTimeout(()=>on(document,"click",this._outside=t=>{this.el.contains(t.target)||this._pop?.contains(t.target)||this._hide()}),0)}_hide(){this._pop&&(this._pop.remove(),this._pop=null,off(document,"click",this._outside))}}export class Scrollspy{constructor(t,e={}){if(this.el="string"==typeof t?qs(t):t,!this.el)return;this.opts=Object.assign({offset:70},e);const s=this.el.dataset.lxTarget;this.nav=s?qs(s):null,this._update=this._update.bind(this),on(this.el===document.body?window:this.el,"scroll",this._update),this._update()}_update(){if(!this.nav)return;const t=qsa('a[href^="#"]',this.nav),e=(this.el===document.body?window.scrollY:this.el.scrollTop)+this.opts.offset;let s=null;t.forEach(t=>{const i=qs(t.getAttribute("href"));i&&i.offsetTop<=e&&(s=t)}),t.forEach(t=>t.classList.remove("lx-active")),s&&s.classList.add("lx-active")}}export class Tab{constructor(t){this.trigger="string"==typeof t?qs(t):t}show(){if(!this.trigger)return;const t=this.trigger.dataset.lxTarget,e=t?qs(t):null;e&&(qsa(".lx-nav-link, .lx-tab-item",this.trigger.closest('[role="tablist"]')||this.trigger.parentElement.parentElement).forEach(t=>{t.classList.remove("lx-active"),t.setAttribute("aria-selected","false")}),qsa(".lx-tab-pane",e.parentElement).forEach(t=>t.classList.remove("lx-active","lx-show")),this.trigger.classList.add("lx-active"),this.trigger.setAttribute("aria-selected","true"),e.classList.add("lx-active","lx-show"))}}export class Carousel{constructor(t,e={}){this.el="string"==typeof t?qs(t):t,this.el&&(this.opts=Object.assign({interval:5e3,pause:"hover",wrap:!0,touch:!0},e),this.inner=qs(".lx-carousel-inner",this.el),this.items=qsa(".lx-carousel-item",this.el),this.current=this.items.findIndex(t=>t.classList.contains("lx-active")),this.current<0&&(this.current=0,this.items[0]&&this.items[0].classList.add("lx-active")),this._timer=null,this._sliding=!1,this.inner&&this._applyTransform(this.current,!1),this.opts.interval&&this.cycle(),"hover"===this.opts.pause&&(on(this.el,"mouseenter",()=>this.pause()),on(this.el,"mouseleave",()=>this.cycle())),this.opts.touch&&this._initTouch(),this._updateIndicators())}_applyTransform(t,e){this.inner&&(e||(this.inner.style.transition="none"),this.inner.style.transform="translateX(-"+100*t+"%)",e||(this.inner.getBoundingClientRect(),this.inner.style.transition=""))}_go(t){const e=this.items.length;!this.opts.wrap&&(t<0||t>=e)||this._sliding||(this._sliding=!0,this.current=(t%e+e)%e,this.items.forEach((t,e)=>t.classList.toggle("lx-active",e===this.current)),this.inner?(this._applyTransform(this.current,!0),this.inner.addEventListener("transitionend",()=>{this._sliding=!1,emit(this.el,"carousel.slid")},{once:!0}),setTimeout(()=>{this._sliding=!1},400)):this._sliding=!1,this._updateIndicators(),emit(this.el,"carousel.slide"))}_updateIndicators(){qsa(".lx-carousel-indicators button, .lx-carousel-indicators [data-lx-slide-to]",this.el).forEach((t,e)=>{t.classList.toggle("lx-active",e===this.current),t.setAttribute("aria-current",e===this.current?"true":"false")})}next(){this._go(this.current+1)}prev(){this._go(this.current-1)}to(t){this._go(t)}cycle(){this.pause(),this.opts.interval&&(this._timer=setInterval(()=>this.next(),this.opts.interval))}pause(){clearInterval(this._timer),this._timer=null}_initTouch(){let t=0,e=0;on(this.el,"touchstart",s=>{t=s.touches[0].clientX,e=s.touches[0].clientY},{passive:!0}),on(this.el,"touchend",s=>{const i=s.changedTouches[0].clientX-t,o=s.changedTouches[0].clientY-e;Math.abs(i)>Math.abs(o)&&Math.abs(i)>40&&(i>0?this.prev():this.next())})}}export const Clipboard={copy(t){if(navigator.clipboard&&window.isSecureContext)return navigator.clipboard.writeText(t);const e=document.createElement("textarea");e.value=t,e.style.cssText="position:fixed;top:-9999px;left:-9999px;opacity:0",document.body.appendChild(e),e.focus(),e.select();try{document.execCommand("copy")}catch(t){}return e.remove(),Promise.resolve()},bind(t,e){qsa(t).forEach(t=>{on(t,"click",async()=>{const s="function"==typeof e?e(t):t.dataset.lxCopy||t.textContent;await this.copy(s);const i=t.textContent;t.textContent=t.dataset.lxCopiedText||"Copied!",t.classList.add("lx-copied"),setTimeout(()=>{t.textContent=i,t.classList.remove("lx-copied")},2e3)})})}};export class Counter{constructor(t,e={}){this.el="string"==typeof t?qs(t):t,this.el&&(this.opts=Object.assign({start:0,end:parseInt(this.el.dataset.lxEnd||this.el.textContent)||0,duration:parseInt(this.el.dataset.lxDuration)||2e3,prefix:this.el.dataset.lxPrefix||"",suffix:this.el.dataset.lxSuffix||"",decimals:parseInt(this.el.dataset.lxDecimals)||0,easing:!0},e))}_ease(t){return t<.5?2*t*t:(4-2*t)*t-1}_format(t){return this.opts.prefix+t.toFixed(this.opts.decimals).replace(/\B(?=(\d{3})+(?!\d))/g,",")+this.opts.suffix}start(){const{start:t,end:e,duration:s,easing:i}=this.opts,o=e-t;let a=null;const l=n=>{a||(a=n);const r=Math.min(n-a,s),h=i?this._ease(r/s):r/s;this.el.textContent=this._format(t+o*h),r<s?requestAnimationFrame(l):this.el.textContent=this._format(e)};requestAnimationFrame(l)}static observeAll(t,e){if("IntersectionObserver"in window){const s=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting&&(new Counter(t.target,e).start(),s.unobserve(t.target))})},{threshold:.5});qsa(t).forEach(t=>s.observe(t))}else qsa(t).forEach(t=>new Counter(t,e).start())}}export class NumberInput{constructor(t,e={}){this.wrap="string"==typeof t?qs(t):t,this.wrap&&(this.input=qs("input",this.wrap),this.input&&(this.opts=Object.assign({step:1,min:-1/0,max:1/0},e),this.opts.min=parseFloat(this.input.min||this.opts.min),this.opts.max=parseFloat(this.input.max||this.opts.max),this.opts.step=parseFloat(this.input.step||this.opts.step)||1,this._attach()))}_val(){return parseFloat(this.input.value)||0}_set(t){const e=Math.min(this.opts.max,Math.max(this.opts.min,t));this.input.value=e,emit(this.input,"change",{value:e}),this._updateBtns()}_updateBtns(){const t=this._val(),e=qs(".lx-number-btn[data-lx-dec]",this.wrap)||qs(".lx-number-dec",this.wrap),s=qs(".lx-number-btn[data-lx-inc]",this.wrap)||qs(".lx-number-inc",this.wrap);e&&(e.disabled=t<=this.opts.min),s&&(s.disabled=t>=this.opts.max)}_attach(){on(this.wrap,"click",t=>{const e=t.target.closest("[data-lx-dec],[data-lx-inc],.lx-number-dec,.lx-number-inc");e&&(e.matches("[data-lx-dec],.lx-number-dec")&&this._set(this._val()-this.opts.step),e.matches("[data-lx-inc],.lx-number-inc")&&this._set(this._val()+this.opts.step))}),on(this.input,"change",()=>this._set(this._val())),on(this.input,"keydown",t=>{"ArrowUp"===t.key&&(t.preventDefault(),this._set(this._val()+this.opts.step)),"ArrowDown"===t.key&&(t.preventDefault(),this._set(this._val()-this.opts.step))}),this._updateBtns()}}export class Rating{constructor(t,e={}){this.el="string"==typeof t?qs(t):t,this.el&&(this.opts=Object.assign({stars:5,value:0,readonly:void 0!==this.el.dataset.lxReadonly},e),this.value=parseFloat(this.el.dataset.lxValue||this.opts.value)||0,this._render())}_render(){this.el.innerHTML="",this.el.setAttribute("role","radiogroup");for(let t=1;t<=this.opts.stars;t++){const e=document.createElement("span");e.className="lx-rating-star"+(t<=this.value?" lx-filled":""),e.setAttribute("role","radio"),e.setAttribute("aria-label",t+" star"+(1!==t?"s":"")),e.setAttribute("aria-checked",t<=this.value?"true":"false"),e.dataset.value=t,this.el.appendChild(e)}this.opts.readonly?this.el.dataset.readonly="":on(this.el,"click",t=>{const e=t.target.closest(".lx-rating-star");e&&(this.value=parseInt(e.dataset.value),qsa(".lx-rating-star",this.el).forEach((t,e)=>{const s=e+1<=this.value;t.classList.toggle("lx-filled",s),t.setAttribute("aria-checked",s?"true":"false")}),emit(this.el,"rating.change",{value:this.value}))})}setValue(t){this.value=t,this._render()}getValue(){return this.value}}export const breakpoint={_bp:{xs:0,sm:640,md:768,lg:1024,xl:1280,"2xl":1536},current(){const t=window.innerWidth;return Object.entries(this._bp).reverse().find(([,e])=>t>=e)?.[0]||"xs"},on(t,e){const s=window.matchMedia(`(min-width: ${this._bp[t]}px)`);s.addEventListener("change",t=>{t.matches&&e()}),s.matches&&e()}};export const theme={set(t,e){document.documentElement.dataset.theme=t,e&&(document.documentElement.dataset.mode=e)},setMode(t){document.documentElement.dataset.mode=t},toggle(){const t=document.documentElement.dataset.mode||"light";this.setMode("dark"===t?"light":"dark")},current:()=>({theme:document.documentElement.dataset.theme,mode:document.documentElement.dataset.mode}),save(t,e){this.set(t,e),localStorage.setItem("lx-theme",t),e&&localStorage.setItem("lx-mode",e)},restore(){const t=localStorage.getItem("lx-theme"),e=localStorage.getItem("lx-mode");t&&this.set(t,e||void 0)}};export function init(){on(document,"click",t=>{const e=t.target.closest("[data-lx-toggle],[data-lx-dismiss],[data-lx-slide],[data-lx-slide-to]");if(!e)return;const s=e.dataset.lxToggle,i=e.dataset.lxDismiss,o=e.dataset.lxTarget?qs(e.dataset.lxTarget):null;if("modal"===i){const t=e.closest(".lx-modal");t&&new Modal(t).hide()}if("offcanvas"===i){const t=e.closest(".lx-offcanvas");t&&new Offcanvas(t).hide()}if("alert"===i){const t=e.closest(".lx-alert");t&&(t.style.opacity="0",t.style.transition="opacity .15s",setTimeout(()=>t.remove(),150))}if("toast"===i){const t=e.closest(".lx-toast");t&&(t.style.opacity="0",t.style.transition="opacity .15s",setTimeout(()=>t.remove(),150))}if("modal"===s&&o)t.preventDefault(),new Modal(o).toggle();else if("collapse"===s&&o)t.preventDefault(),new Collapse(o).toggle(),e.setAttribute("aria-expanded",(!o.classList.contains("lx-show")).toString());else if("accordion"===s&&o){t.preventDefault();const s=o.classList.contains("lx-show"),i=e.closest(".lx-accordion");i&&(qsa(".lx-accordion-body.lx-show",i).forEach(t=>{t!==o&&new Collapse(t).hide()}),qsa(".lx-accordion-trigger",i).forEach(t=>{t!==e&&(t.classList.remove("lx-active"),t.setAttribute("aria-expanded","false"))})),new Collapse(o)[s?"hide":"show"](),e.classList.toggle("lx-active",!s),e.setAttribute("aria-expanded",(!s).toString())}else"dropdown"===s?(t.preventDefault(),t.stopPropagation(),new Dropdown(e).toggle()):"offcanvas"===s&&o?(t.preventDefault(),new Offcanvas(o).toggle()):"tab"===s&&o&&(t.preventDefault(),new Tab(e).show());const a=e.dataset.lxSlideTo,l=e.dataset.lxSlide;if(void 0!==a||l){const t=(qs(e.dataset.lxTarget)||e.closest(".lx-carousel"))?._lxCarousel;t&&("next"===l?t.next():"prev"===l?t.prev():void 0!==a&&t.to(parseInt(a)))}}),qsa('[data-lx-spy="scroll"]').forEach(t=>new Scrollspy(t)),qsa('[data-lx-toggle="tooltip"]').forEach(t=>new Tooltip(t,{placement:t.dataset.lxPlacement||"top",trigger:"hover focus",delay:{show:100,hide:0}})),qsa(".lx-carousel").forEach(t=>{const e=new Carousel(t,{interval:parseInt(t.dataset.lxInterval)||5e3});t._lxCarousel=e}),qsa(".lx-number-input").forEach(t=>new NumberInput(t)),qsa(".lx-rating").forEach(t=>new Rating(t));const t=qsa(".lx-back-top");if(t.length){const e=()=>t.forEach(t=>t.classList.toggle("lx-show",window.scrollY>300));on(window,"scroll",e,{passive:!0}),t.forEach(t=>on(t,"click",t=>{t.preventDefault(),window.scrollTo({top:0,behavior:"smooth"})})),e()}if("IntersectionObserver"in window){const t=new IntersectionObserver(e=>{e.forEach(e=>{if(!e.isIntersecting)return;const s=e.target;s.dataset.lxSrc&&(s.src=s.dataset.lxSrc),s.dataset.lxBg&&(s.style.backgroundImage="url("+s.dataset.lxBg+")"),s.classList.add("lx-lazy-loaded"),t.unobserve(s)})},{rootMargin:"200px"});qsa("[data-lx-lazy]").forEach(e=>t.observe(e))}qsa(".lx-file-drop").forEach(t=>{const e=qs('input[type="file"]',t);["dragenter","dragover"].forEach(e=>on(t,e,e=>{e.preventDefault(),t.classList.add("lx-drag-over")})),["dragleave","drop"].forEach(e=>on(t,e,e=>{e.preventDefault(),t.classList.remove("lx-drag-over")})),on(t,"drop",s=>{const i=s.dataTransfer.files;if(e)try{e.files=i}catch(t){}emit(t,"file.drop",{files:i})}),on(t,"click",()=>e&&e.click()),e&&on(e,"change",()=>emit(t,"file.select",{files:e.files}))}),theme.restore()}"undefined"!=typeof document&&("loading"===document.readyState?on(document,"DOMContentLoaded",init):init());export default{version:"1.0.0",homepage:"https://ui.lancar.id",init:init,Modal:Modal,Toast:Toast,Collapse:Collapse,Dropdown:Dropdown,Offcanvas:Offcanvas,Tooltip:Tooltip,Popover:Popover,Tab:Tab,Carousel:Carousel,Scrollspy:Scrollspy,Clipboard:Clipboard,Counter:Counter,NumberInput:NumberInput,Rating:Rating,breakpoint:breakpoint,theme:theme,LxToast:Toast};
|