@moni-labs/moni-ui 0.4.13 → 0.4.16
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/custom-elements.json +101 -81
- package/dist/browser/moni-ui.iife.min.js +1538 -1384
- package/dist/browser/moni-ui.iife.min.js.br +0 -0
- package/dist/browser/moni-ui.iife.min.js.gz +0 -0
- package/dist/browser/moni-ui.iife.min.js.map +1 -1
- package/dist/browser/moni-ui.min.js +2751 -2501
- package/dist/browser/moni-ui.min.js.br +0 -0
- package/dist/browser/moni-ui.min.js.gz +0 -0
- package/dist/browser/moni-ui.min.js.map +1 -1
- package/dist/cdn/chunks/{class-map-DsL1Jr2T.js → class-map-QyT9W7rZ.js} +1 -1
- package/dist/cdn/chunks/{decorate-DxJYS4gw.js → decorate-B7wZvwrn.js} +629 -543
- package/dist/cdn/chunks/if-defined-5hr_ccFw.js +1 -0
- package/dist/cdn/chunks/{live-D52JqeKf.js → live-Hm1Di_ND.js} +1 -1
- package/dist/cdn/components/moni-app-bar.js +1 -1
- package/dist/cdn/components/moni-badge.js +1 -1
- package/dist/cdn/components/moni-bottom-sheet.js +2 -1
- package/dist/cdn/components/moni-button-group.js +1 -1
- package/dist/cdn/components/moni-button-segment.js +1 -1
- package/dist/cdn/components/moni-button.js +1 -1
- package/dist/cdn/components/moni-card.js +1 -1
- package/dist/cdn/components/moni-carousel.js +1 -1
- package/dist/cdn/components/moni-checkbox.js +1 -1
- package/dist/cdn/components/moni-chip.js +1 -1
- package/dist/cdn/components/moni-color-field.js +1 -1
- package/dist/cdn/components/moni-context-menu.js +1 -1
- package/dist/cdn/components/moni-dialog.js +1 -1
- package/dist/cdn/components/moni-divider.js +1 -1
- package/dist/cdn/components/moni-expansion.js +1 -1
- package/dist/cdn/components/moni-fab-menu.js +1 -1
- package/dist/cdn/components/moni-fab.js +1 -1
- package/dist/cdn/components/moni-file-field.js +1 -1
- package/dist/cdn/components/moni-icon.js +1 -1
- package/dist/cdn/components/moni-list-item.js +1 -1
- package/dist/cdn/components/moni-list.js +1 -1
- package/dist/cdn/components/moni-loading-indicator.js +1 -1
- package/dist/cdn/components/moni-menu-item.js +1 -1
- package/dist/cdn/components/moni-menu.js +1 -1
- package/dist/cdn/components/moni-morph-modal.js +3 -2
- package/dist/cdn/components/moni-nav-item.js +1 -1
- package/dist/cdn/components/moni-nav.js +1 -1
- package/dist/cdn/components/moni-progress.js +1 -1
- package/dist/cdn/components/moni-radio.js +1 -1
- package/dist/cdn/components/moni-ripple.js +1 -1
- package/dist/cdn/components/moni-segmented-button.js +1 -1
- package/dist/cdn/components/moni-select-option.js +1 -1
- package/dist/cdn/components/moni-select.js +512 -473
- package/dist/cdn/components/moni-shape.js +1 -1
- package/dist/cdn/components/moni-side-sheet.js +1 -1
- package/dist/cdn/components/moni-slider.js +1 -1
- package/dist/cdn/components/moni-snackbar.js +1 -1
- package/dist/cdn/components/moni-split-button.js +1 -1
- package/dist/cdn/components/moni-step.js +1 -1
- package/dist/cdn/components/moni-stepper.js +1 -1
- package/dist/cdn/components/moni-switch.js +1 -1
- package/dist/cdn/components/moni-tab.js +1 -1
- package/dist/cdn/components/moni-tabs.js +1 -1
- package/dist/cdn/components/moni-text-field.js +122 -95
- package/dist/cdn/components/moni-textarea.js +52 -52
- package/dist/cdn/components/moni-time-picker.js +1 -1
- package/dist/cdn/components/moni-toolbar.js +1 -1
- package/dist/cdn/components/moni-tooltip.js +1 -1
- package/dist/cdn/components/moni-typography.js +1 -1
- package/dist/cdn/importmap.json +98 -98
- package/dist/components/_base/field-styles.d.ts.map +1 -1
- package/dist/components/_base/field-styles.js +662 -576
- package/dist/components/moni-bottom-sheet.d.ts +19 -5
- package/dist/components/moni-bottom-sheet.d.ts.map +1 -1
- package/dist/components/moni-bottom-sheet.js +111 -30
- package/dist/components/moni-morph-modal.d.ts +10 -0
- package/dist/components/moni-morph-modal.d.ts.map +1 -1
- package/dist/components/moni-morph-modal.js +323 -217
- package/dist/components/moni-select.d.ts +16 -16
- package/dist/components/moni-select.d.ts.map +1 -1
- package/dist/components/moni-select.js +797 -727
- package/dist/components/moni-text-field.d.ts +15 -15
- package/dist/components/moni-text-field.d.ts.map +1 -1
- package/dist/components/moni-text-field.js +224 -180
- package/dist/components/moni-textarea.d.ts +13 -13
- package/dist/components/moni-textarea.d.ts.map +1 -1
- package/dist/components/moni-textarea.js +127 -122
- package/docs/api.json +109 -89
- package/docs/assets/moni-color-field/shape--square.png +0 -0
- package/docs/assets/moni-file-field/shape--square.png +0 -0
- package/docs/assets/moni-morph-modal/autoHeight--false.png +0 -0
- package/docs/assets/moni-morph-modal/autoHeight--true.png +0 -0
- package/docs/components/bottom-sheet.md +2 -1
- package/docs/components/morph-modal.md +16 -7
- package/docs/components/select.md +74 -74
- package/docs/components/text-field.md +75 -66
- package/docs/components/textarea.md +51 -51
- package/docs/llms.txt +3 -3
- package/package.json +1 -1
- package/src/components/_base/field-styles.ts +723 -637
- package/src/components/moni-bottom-sheet.test.ts +331 -0
- package/src/components/moni-bottom-sheet.ts +117 -29
- package/src/components/moni-morph-modal.test.ts +490 -413
- package/src/components/moni-morph-modal.ts +2274 -2162
- package/src/components/moni-select.test.ts +489 -466
- package/src/components/moni-select.ts +1963 -1815
- package/src/components/moni-text-field.test.ts +366 -342
- package/src/components/moni-text-field.ts +717 -645
- package/src/components/moni-textarea.test.ts +201 -197
- package/src/components/moni-textarea.ts +476 -460
- package/dist/cdn/chunks/if-defined-DdzvcoI7.js +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-
|
|
1
|
+
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-B7wZvwrn.js";var s=class extends t{constructor(...e){super(...e),this.type=`rounded`,this.name=``,this.size=`medium`,this.border=!1,this.shadow=!1,this.shapeRadius=``,this.color=`primary`,this.duration=`500ms`,this.easing=`cubic-bezier(.2, 0, 0, 1)`}static{this.styles=[i,n`
|
|
2
2
|
:host { display:inline-flex; font-family:var(--font-sans); }
|
|
3
3
|
.shape {
|
|
4
4
|
inline-size:var(--_shape-size,4rem);block-size:var(--_shape-size,4rem);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-
|
|
1
|
+
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-B7wZvwrn.js";import{t as s}from"../chunks/query-SWT-tzvq.js";import"./moni-icon.js";import"./moni-button.js";var c=class extends t{constructor(...e){super(...e),this.open=!1,this.modal=!1,this.side=`right`,this.title=``,this.detached=!1,this.showBack=!1,this.noBorder=!1,this.withHandle=!1,this.hideClose=!1,this.expandedWidth=`600px`,this.maxWidth=``,this._isDragging=!1,this._startX=0,this._currentTranslationX=0,this._sheetWidth=0,this._defaultWidth=0,this._justDragged=!1,this._closing=!1}disconnectedCallback(){clearTimeout(this._closeTimer),super.disconnectedCallback()}_finishClose(){!this._closing||this.open||(this._closing=!1,clearTimeout(this._closeTimer),this._dialog.classList.remove(`expanded`),this._dialog.open&&(typeof this._dialog.close==`function`?this._dialog.close():this._dialog.open=!1),this.dispatchEvent(new CustomEvent(`close`,{bubbles:!0,composed:!0})))}_getMaxWidthPx(){let e=this.expandedWidth||`600px`;return e.endsWith(`%`)||e.endsWith(`vw`)?window.innerWidth*(parseFloat(e)/100):e.endsWith(`px`)?parseFloat(e):600}updated(e){if(super.updated(e),e.has(`expandedWidth`)&&this.style.setProperty(`--moni-side-sheet-expanded-width`,this.expandedWidth),e.has(`maxWidth`)&&this.style.setProperty(`--moni-side-sheet-max-width`,this.maxWidth||`400px`),e.has(`open`)&&this._dialog){if(this.open)this._closing=!1,clearTimeout(this._closeTimer),this.modal?this._dialog.open||(typeof this._dialog.showModal==`function`?this._dialog.showModal():this._dialog.open=!0):this._dialog.open||(typeof this._dialog.show==`function`?this._dialog.show():this._dialog.open=!0),this._dialog.getBoundingClientRect(),this._dialog.classList.add(`opened`);else if(this._dialog.open){this._closing=!0,this._dialog.classList.remove(`opened`);let e=t=>{t.target===this._dialog&&t.propertyName===`transform`&&(this._dialog.removeEventListener(`transitionend`,e),this._finishClose())};this._dialog.addEventListener(`transitionend`,e),this._closeTimer=setTimeout(()=>{this._dialog.removeEventListener(`transitionend`,e),this._finishClose()},350)}}}_onPointerDown(e){if(!this.withHandle)return;let t=e.target;!t.closest(`.handle`)&&!t.closest(`header`)||(this._isDragging=!0,this._startX=e.clientX,this._sheetWidth=this._dialog.getBoundingClientRect().width,this._currentTranslationX=0,this._dialog.classList.contains(`expanded`)||(this._defaultWidth=this._sheetWidth),t.setPointerCapture(e.pointerId),this._dialog.classList.add(`dragging`))}_onPointerMove(e){if(!this._isDragging)return;let t=e.clientX-this._startX,n=this._dialog.classList.contains(`expanded`),r=this._getMaxWidthPx(),i=this.side===`right`?t:-t;if(n){if(i>0){let e=this._sheetWidth-i;this._dialog.style.transform=``,this._dialog.style.width=`${Math.max(0,e)}px`}else{let e=this._sheetWidth-i*.2;this._dialog.style.width=`${Math.min(r,e)}px`}}else if(i>0)this._currentTranslationX=i,this._dialog.style.transform=`translateX(${this.side===`right`?i:-i}px)`,this._dialog.style.width=``;else{let e=this._sheetWidth-i;this._dialog.style.transform=``,this._dialog.style.width=`${Math.min(r,e)}px`}}_onPointerUp(e){if(!this._isDragging)return;e.target.releasePointerCapture(e.pointerId),this._isDragging=!1,this._dialog.classList.remove(`dragging`);let t=e.clientX-this._startX;Math.abs(t)>5&&(this._justDragged=!0,setTimeout(()=>{this._justDragged=!1},50));let n=this._dialog.classList.contains(`expanded`),r=this._getMaxWidthPx(),i=this.side===`right`?t:-t;if(n){let e=this._sheetWidth-i;if(e<this._defaultWidth-80){this._dialog.classList.remove(`expanded`),this._dialog.classList.remove(`opened`),this._dialog.style.transform=this.side===`right`?`translateX(100%)`:`translateX(-100%)`,this._dialog.style.width=``;let e=()=>{this._dialog.removeEventListener(`transitionend`,e),this._dialog.style.transform=``,this._dialog.style.width=``,this.open=!1,this.dispatchEvent(new CustomEvent(`close`,{bubbles:!0,composed:!0}))};this._dialog.addEventListener(`transitionend`,e),setTimeout(()=>{this.open&&e()},300)}else e<(r+this._defaultWidth)/2?(this._dialog.classList.remove(`expanded`),this._dialog.style.transform=``,this._dialog.style.width=``):(this._dialog.style.transform=``,this._dialog.style.width=``)}else if(i<0)this._sheetWidth-i>(r+this._sheetWidth)/2||-i>80?(this._dialog.classList.add(`expanded`),this._dialog.style.transform=``,this._dialog.style.width=``):(this._dialog.style.transform=``,this._dialog.style.width=``);else{let e=Math.min(150,this._sheetWidth*.4);if(Math.abs(this._currentTranslationX)>e){this._dialog.classList.remove(`opened`),this._dialog.style.transform=this.side===`right`?`translateX(100%)`:`translateX(-100%)`,this._dialog.style.width=``;let e=()=>{this._dialog.removeEventListener(`transitionend`,e),this._dialog.style.transform=``,this._dialog.style.width=``,this.open=!1,this.dispatchEvent(new CustomEvent(`close`,{bubbles:!0,composed:!0}))};this._dialog.addEventListener(`transitionend`,e),setTimeout(()=>{this.open&&e()},300)}else this._dialog.style.transform=``,this._dialog.style.width=``}}_onPointerCancel(e){this._isDragging&&(e.target.releasePointerCapture(e.pointerId),this._isDragging=!1,this._dialog.classList.remove(`dragging`),this._dialog.style.transform=``,this._dialog.style.width=``)}_onCloseClick(){this.open=!1}_onCancel(e){e.preventDefault(),this._onCloseClick()}_onBackClick(){this.dispatchEvent(new CustomEvent(`back`,{bubbles:!0,composed:!0}))}_onDialogClick(e){if(this._justDragged){this._justDragged=!1;return}this.modal&&e.target===this._dialog&&this._onCloseClick()}static{this.styles=[i,n`
|
|
2
2
|
:host {
|
|
3
3
|
display: contents;
|
|
4
4
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,c as t,d as n,i as r,m as i,o as a,r as o,s,t as c}from"../chunks/decorate-
|
|
1
|
+
import{a as e,c as t,d as n,i as r,m as i,o as a,r as o,s,t as c}from"../chunks/decorate-B7wZvwrn.js";import"./moni-icon.js";import{t as l}from"../chunks/if-defined-5hr_ccFw.js";var u=class extends r{constructor(...e){super(...e),this.name=``,this.min=`0`,this.max=`100`,this.step=``,this.tickInterval=null,this.insetIcon=``,this.indicatorPlacement=`top`,this.size=`medium`,this.range=!1,this.disabled=!1,this.ticks=!1,this.indicator=!1,this.isVertical=!1,this._value=`50`,this._valueEnd=`75`}get value(){return this._value}set value(e){this._value=e}get valueEnd(){return this._valueEnd}set valueEnd(e){this._valueEnd=e}_pct(e){let t=parseFloat(this.min)||0,n=parseFloat(this.max)||100;return Math.max(0,Math.min(100,((parseFloat(e)||0)-t)/(n-t)*100))}_onInput(e,t){let n=e.target;t===0?this._value=n.value:this._valueEnd=n.value,this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0}))}_onChange(e,t){let n=e.target;t===0?this._value=n.value:this._valueEnd=n.value,this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))}_renderDatalist(){if(this.tickInterval!=null&&this.tickInterval>0){let e=parseFloat(this.min)||0,t=parseFloat(this.max)||100,r=this.tickInterval,i=[];for(let n=e;n<=t;n+=r)i.push(Math.round(n*1e3)/1e3);return n`<datalist id="ticks">
|
|
2
2
|
${i.map(e=>n`<option value=${e}></option>`)}
|
|
3
3
|
</datalist>`}return this.ticks?n`<datalist id="ticks">
|
|
4
4
|
<option value=${this.min}></option>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-
|
|
1
|
+
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-B7wZvwrn.js";import"./moni-icon.js";var s=class extends t{constructor(...e){super(...e),this.text=``,this.action=``,this.placement=`bottom`,this.active=!1,this.maxLines=2}static{this.styles=[i,n`
|
|
2
2
|
:host {
|
|
3
3
|
/* Use block instead of contents so position:fixed inside
|
|
4
4
|
works relative to the viewport (its containing block). */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-
|
|
1
|
+
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-B7wZvwrn.js";import{t as s}from"../chunks/query-assigned-elements-BBHe1xEY.js";var c=class extends t{constructor(...e){super(...e),this.variant=`filled`,this.size=`small`,this.gap=``}static{this.styles=[i,n`
|
|
2
2
|
:host {
|
|
3
3
|
display: inline-flex;
|
|
4
4
|
align-items: center;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-
|
|
1
|
+
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-B7wZvwrn.js";import"./moni-icon.js";var s=class extends t{constructor(...e){super(...e),this.title=``,this.description=``,this.active=!1,this.completed=!1,this.icon=``,this.index=0,this.orientation=`horizontal`}static{this.styles=[i,n`
|
|
2
2
|
:host {
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-
|
|
1
|
+
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-B7wZvwrn.js";import{t as s}from"../chunks/query-assigned-elements-BBHe1xEY.js";var c=class extends t{constructor(...e){super(...e),this.orientation=`horizontal`,this.current=0,this._onSlotChange=()=>{this._syncSteps()}}updated(e){(e.has(`current`)||e.has(`orientation`)||e.size===0)&&this._syncSteps()}_syncSteps(){Promise.resolve().then(()=>{let e=this._steps||[];e.length===0&&(e=Array.from(this.querySelectorAll(`moni-step`))),e.forEach((e,t)=>{e.index=t,e.orientation=this.orientation,e.completed=t<this.current,e.active=t===this.current,e.setAttribute(`role`,`listitem`)})})}static{this.styles=[i,n`
|
|
2
2
|
:host {
|
|
3
3
|
--_stepper-gap: 0.5rem;
|
|
4
4
|
display: block;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-
|
|
1
|
+
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-B7wZvwrn.js";import{t as s}from"../chunks/query-SWT-tzvq.js";import"./moni-icon.js";import{t as c}from"../chunks/if-defined-5hr_ccFw.js";var l=class extends t{static{this.formAssociated=!0}constructor(){super(),this.label=``,this.checked=!1,this.disabled=!1,this.icon=!1,this.uncheckedIcon=``,this.checkedIcon=``,this.name=``,this.value=``,this._internals=this.attachInternals()}updated(e){this._input&&(e.has(`checked`)&&(this._input.checked=this.checked,this._internals?.setFormValue?.(this.checked?this.value||`on`:null)),e.has(`disabled`)&&(this._input.disabled=this.disabled))}_onChange(e){this.checked=e.target.checked,this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))}static{this.styles=[i,n`
|
|
2
2
|
:host {
|
|
3
3
|
display: inline-flex;
|
|
4
4
|
font-family: var(--font);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-
|
|
1
|
+
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-B7wZvwrn.js";import"./moni-icon.js";var s=class extends t{constructor(...e){super(...e),this.active=!1,this.icon=``,this.label=``,this.href=`#`}static{this.styles=[i,n`
|
|
2
2
|
:host {
|
|
3
3
|
display: inline-flex;
|
|
4
4
|
font-family: var(--font);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-
|
|
1
|
+
import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-B7wZvwrn.js";var s=class extends t{constructor(...e){super(...e),this.mode=`primary`,this.scrollable=!1,this.vertical=!1,this.align=`default`,this.indicatorSize=`default`}static{this.styles=[i,n`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
font-family: var(--font);
|