@nuralyui/layout 0.0.5 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle.js +2 -2
- package/content.component.d.ts +1 -1
- package/content.component.js.map +1 -1
- package/content.style.js.map +1 -1
- package/footer.component.d.ts +1 -1
- package/footer.component.js.map +1 -1
- package/footer.style.js.map +1 -1
- package/header.component.d.ts +1 -1
- package/header.component.js.map +1 -1
- package/header.style.js.map +1 -1
- package/index.js.map +1 -1
- package/layout.component.d.ts +1 -1
- package/layout.component.js.map +1 -1
- package/layout.style.js.map +1 -1
- package/layout.types.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
- package/sider.component.d.ts +2 -2
- package/sider.component.js.map +1 -1
- package/sider.style.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -18,7 +18,7 @@ import{css as r,LitElement as t,html as e}from"lit";import{property as i,queryAs
|
|
|
18
18
|
min-height: 0;
|
|
19
19
|
width: 100%;
|
|
20
20
|
}
|
|
21
|
-
`;var u=function(r,t,e,i){for(var o,a=arguments.length,n=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,e):i,l=r.length-1;l>=0;l--)(o=r[l])&&(n=(a<3?o(n):a>3?o(t,e,n):o(t,e))||n);return a>3&&n&&Object.defineProperty(t,e,n),n};let h=class extends(l(t)){constructor(){super(...arguments),this.hasSider=!1}connectedCallback(){super.connectedCallback(),this.detectSider()}updated(r){super.updated(r),this.detectSider()}detectSider(){var r;const t=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector("slot");if(t){const r=t.assignedElements().some(
|
|
21
|
+
`;var u=function(r,t,e,i){for(var o,a=arguments.length,n=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,e):i,l=r.length-1;l>=0;l--)(o=r[l])&&(n=(a<3?o(n):a>3?o(t,e,n):o(t,e))||n);return a>3&&n&&Object.defineProperty(t,e,n),n};let h=class extends(l(t)){constructor(){super(...arguments),this.hasSider=!1}connectedCallback(){super.connectedCallback(),this.detectSider()}updated(r){super.updated(r),this.detectSider()}detectSider(){var r;const t=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector("slot");if(t){const r=t.assignedElements().some(r=>"nr-sider"===r.tagName.toLowerCase());this.hasSider!==r&&(this.hasSider=r)}}handleSlotChange(){this.detectSider()}render(){return e`
|
|
22
22
|
<div class="nr-layout" part="layout">
|
|
23
23
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
24
24
|
</div>
|
|
@@ -169,7 +169,7 @@ import{css as r,LitElement as t,html as e}from"lit";import{property as i,queryAs
|
|
|
169
169
|
min-width: 0 !important;
|
|
170
170
|
flex: 0 0 0 !important;
|
|
171
171
|
}
|
|
172
|
-
`,x={xs:480,sm:576,md:768,lg:992,xl:1200,xxl:1600};var m=function(r,t,e,i){for(var o,a=arguments.length,n=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,e):i,l=r.length-1;l>=0;l--)(o=r[l])&&(n=(a<3?o(n):a>3?o(t,e,n):o(t,e))||n);return a>3&&n&&Object.defineProperty(t,e,n),n};let k=class extends(l(t)){constructor(){super(...arguments),this.collapsed=!1,this.collapsedWidth=80,this.collapsible=!1,this.defaultCollapsed=!1,this.reverseArrow=!1,this.theme="dark",this.trigger="default",this.width=200,this.zeroWidthTriggerStyle="",this.belowBreakpoint=!1}connectedCallback(){super.connectedCallback(),this.defaultCollapsed&&!this.hasAttribute("collapsed")&&(this.collapsed=!0),this.breakpoint&&this.setupResizeObserver()}disconnectedCallback(){var r;super.disconnectedCallback(),null===(r=this.resizeObserver)||void 0===r||r.disconnect()}updated(r){var t;super.updated(r),r.has("breakpoint")&&(null===(t=this.resizeObserver)||void 0===t||t.disconnect(),this.breakpoint&&this.setupResizeObserver())}setupResizeObserver(){if(!this.breakpoint)return;const r=x[this.breakpoint];this.resizeObserver=new ResizeObserver(
|
|
172
|
+
`,x={xs:480,sm:576,md:768,lg:992,xl:1200,xxl:1600};var m=function(r,t,e,i){for(var o,a=arguments.length,n=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,e):i,l=r.length-1;l>=0;l--)(o=r[l])&&(n=(a<3?o(n):a>3?o(t,e,n):o(t,e))||n);return a>3&&n&&Object.defineProperty(t,e,n),n};let k=class extends(l(t)){constructor(){super(...arguments),this.collapsed=!1,this.collapsedWidth=80,this.collapsible=!1,this.defaultCollapsed=!1,this.reverseArrow=!1,this.theme="dark",this.trigger="default",this.width=200,this.zeroWidthTriggerStyle="",this.belowBreakpoint=!1}connectedCallback(){super.connectedCallback(),this.defaultCollapsed&&!this.hasAttribute("collapsed")&&(this.collapsed=!0),this.breakpoint&&this.setupResizeObserver()}disconnectedCallback(){var r;super.disconnectedCallback(),null===(r=this.resizeObserver)||void 0===r||r.disconnect()}updated(r){var t;super.updated(r),r.has("breakpoint")&&(null===(t=this.resizeObserver)||void 0===t||t.disconnect(),this.breakpoint&&this.setupResizeObserver())}setupResizeObserver(){if(!this.breakpoint)return;const r=x[this.breakpoint];this.resizeObserver=new ResizeObserver(t=>{for(const e of t){const t=e.contentRect.width<r;t!==this.belowBreakpoint&&(this.belowBreakpoint=t,this.collapsible&&t!==this.collapsed&&(this.collapsed=t,this.dispatchCollapseEvent("responsive")),this.dispatchBreakpointEvent(t))}});const t=this.closest("nr-layout")||document.body;this.resizeObserver.observe(t)}toggleCollapse(){this.collapsed=!this.collapsed,this.dispatchCollapseEvent("clickTrigger")}dispatchCollapseEvent(r){this.dispatchEvent(new CustomEvent("collapse",{detail:{collapsed:this.collapsed,type:r},bubbles:!0,composed:!0}))}dispatchBreakpointEvent(r){this.dispatchEvent(new CustomEvent("breakpoint",{detail:{broken:r},bubbles:!0,composed:!0}))}getCurrentWidth(){return this.collapsed?`${this.collapsedWidth}px`:"number"==typeof this.width?`${this.width}px`:this.width.toString()}renderTrigger(){if(null===this.trigger||!this.collapsible)return null;return this.querySelector('[slot="trigger"]')?e`<slot name="trigger"></slot>`:0===this.collapsedWidth&&this.collapsed?e`
|
|
173
173
|
<div
|
|
174
174
|
class="nr-sider-zero-width-trigger"
|
|
175
175
|
part="trigger"
|
package/content.component.d.ts
CHANGED
|
@@ -24,7 +24,7 @@ declare const NrContentElement_base: (new (...args: any[]) => import("@nuralyui/
|
|
|
24
24
|
*/
|
|
25
25
|
export declare class NrContentElement extends NrContentElement_base {
|
|
26
26
|
static styles: import("lit").CSSResult;
|
|
27
|
-
render(): import("lit").TemplateResult<1>;
|
|
27
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
28
28
|
}
|
|
29
29
|
declare global {
|
|
30
30
|
interface HTMLElementTagNameMap {
|
package/content.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content.component.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"content.component.js","sourceRoot":"","sources":["../../../../src/components/layout/content.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAGxD,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF,CAAA;AATiB,uBAAM,GAAG,aAAc,CAAA;AAD5B,gBAAgB;IAD5B,aAAa,CAAC,YAAY,CAAC;GACf,gBAAgB,CAU5B;SAVY,gBAAgB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { contentStyles } from './content.style.js';\n\n/**\n * # Content Component\n * \n * The content layout component with default styling.\n * Must be placed inside a Layout component.\n * \n * @element nr-content\n * \n * @slot - Default slot for main content\n * \n * @csspart content - The content container element\n * \n * @example\n * ```html\n * <nr-layout>\n * <nr-content>\n * <h1>Main Content</h1>\n * <p>Your content goes here...</p>\n * </nr-content>\n * </nr-layout>\n * ```\n */\n@customElement('nr-content')\nexport class NrContentElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = contentStyles;\n\n override render() {\n return html`\n <main class=\"nr-content\" part=\"content\">\n <slot></slot>\n </main>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-content': NrContentElement;\n }\n}\n"]}
|
package/content.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"content.style.js","sourceRoot":"","sources":["../../../../src/components/layout/content.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAc/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const contentStyles = css`\n :host {\n display: block;\n flex: auto;\n min-height: 0;\n }\n\n .nr-content {\n flex: auto;\n min-height: 0;\n background: var(--nuraly-layout-content-background);\n color: var(--nuraly-layout-content-text);\n transition: var(--nuraly-layout-transition);\n }\n`;\n"]}
|
package/footer.component.d.ts
CHANGED
|
@@ -27,7 +27,7 @@ export declare class NrFooterElement extends NrFooterElement_base {
|
|
|
27
27
|
* Padding of the footer. Default is "24px 50px".
|
|
28
28
|
*/
|
|
29
29
|
padding: string;
|
|
30
|
-
render(): import("lit").TemplateResult<1>;
|
|
30
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
31
31
|
}
|
|
32
32
|
declare global {
|
|
33
33
|
interface HTMLElementTagNameMap {
|
package/footer.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.component.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"footer.component.js","sourceRoot":"","sources":["../../../../src/components/layout/footer.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAlE;;QAGE;;WAEG;QAEH,YAAO,GAAG,WAAW,CAAC;IAaxB,CAAC;IAXU,MAAM;QACb,OAAO,IAAI,CAAA;;;;0BAIW,IAAI,CAAC,OAAO;;;;KAIjC,CAAC;IACJ,CAAC;CACF,CAAA;AAnBiB,sBAAM,GAAG,YAAa,CAAA;AAMtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACL;AAPX,eAAe;IAD3B,aAAa,CAAC,WAAW,CAAC;GACd,eAAe,CAoB3B;SApBY,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { footerStyles } from './footer.style.js';\n\n/**\n * # Footer Component\n * \n * The bottom layout component with default styling.\n * Must be placed inside a Layout component.\n * \n * @element nr-footer\n * \n * @slot - Default slot for footer content\n * \n * @csspart footer - The footer container element\n * \n * @example\n * ```html\n * <nr-layout>\n * <nr-footer>\n * Copyright © 2025 My Company\n * </nr-footer>\n * </nr-layout>\n * ```\n */\n@customElement('nr-footer')\nexport class NrFooterElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = footerStyles;\n\n /**\n * Padding of the footer. Default is \"24px 50px\".\n */\n @property({ type: String })\n padding = '24px 50px';\n\n override render() {\n return html`\n <footer \n class=\"nr-footer\" \n part=\"footer\"\n style=\"padding: ${this.padding}\"\n >\n <slot></slot>\n </footer>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-footer': NrFooterElement;\n }\n}\n"]}
|
package/footer.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"footer.style.js","sourceRoot":"","sources":["../../../../src/components/layout/footer.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAc9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const footerStyles = css`\n :host {\n display: block;\n }\n\n .nr-footer {\n padding: var(--nuraly-layout-footer-padding);\n background: var(--nuraly-layout-footer-background);\n color: var(--nuraly-layout-footer-text);\n border-top: 1px solid var(--nuraly-layout-footer-border);\n font-size: var(--nuraly-layout-font-size);\n line-height: var(--nuraly-layout-line-height);\n transition: var(--nuraly-layout-transition);\n }\n`;\n"]}
|
package/header.component.d.ts
CHANGED
|
@@ -28,7 +28,7 @@ export declare class NrHeaderElement extends NrHeaderElement_base {
|
|
|
28
28
|
* Height of the header. Default is 64px.
|
|
29
29
|
*/
|
|
30
30
|
height: string;
|
|
31
|
-
render(): import("lit").TemplateResult<1>;
|
|
31
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
32
32
|
}
|
|
33
33
|
declare global {
|
|
34
34
|
interface HTMLElementTagNameMap {
|
package/header.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.component.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"header.component.js","sourceRoot":"","sources":["../../../../src/components/layout/header.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAlE;;QAGE;;WAEG;QAEH,WAAM,GAAG,MAAM,CAAC;IAalB,CAAC;IAXU,MAAM;QACb,OAAO,IAAI,CAAA;;;;yBAIU,IAAI,CAAC,MAAM;;;;KAI/B,CAAC;IACJ,CAAC;CACF,CAAA;AAnBiB,sBAAM,GAAG,YAAa,CAAA;AAMtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACX;AAPL,eAAe;IAD3B,aAAa,CAAC,WAAW,CAAC;GACd,eAAe,CAoB3B;SApBY,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { headerStyles } from './header.style.js';\n\n/**\n * # Header Component\n * \n * The top layout component with default styling.\n * Must be placed inside a Layout component.\n * \n * @element nr-header\n * \n * @slot - Default slot for header content\n * \n * @csspart header - The header container element\n * \n * @example\n * ```html\n * <nr-layout>\n * <nr-header>\n * <div class=\"logo\">My App</div>\n * <nav>Navigation</nav>\n * </nr-header>\n * </nr-layout>\n * ```\n */\n@customElement('nr-header')\nexport class NrHeaderElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = headerStyles;\n\n /**\n * Height of the header. Default is 64px.\n */\n @property({ type: String })\n height = '64px';\n\n override render() {\n return html`\n <header \n class=\"nr-header\" \n part=\"header\"\n style=\"height: ${this.height}\"\n >\n <slot></slot>\n </header>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-header': NrHeaderElement;\n }\n}\n"]}
|
package/header.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"header.style.js","sourceRoot":"","sources":["../../../../src/components/layout/header.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgB9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const headerStyles = css`\n :host {\n display: block;\n }\n\n .nr-header {\n display: flex;\n align-items: center;\n padding: var(--nuraly-layout-header-padding);\n height: var(--nuraly-layout-header-height);\n line-height: var(--nuraly-layout-header-height);\n background: var(--nuraly-layout-header-background);\n color: var(--nuraly-layout-header-text);\n border-bottom: 1px solid var(--nuraly-layout-header-border);\n transition: var(--nuraly-layout-transition);\n }\n`;\n"]}
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAa1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { NrLayoutElement } from './layout.component.js';\nexport { NrHeaderElement } from './header.component.js';\nexport { NrFooterElement } from './footer.component.js';\nexport { NrSiderElement } from './sider.component.js';\nexport { NrContentElement } from './content.component.js';\nexport type {\n LayoutBreakpoint,\n SiderTheme,\n SiderTrigger,\n OnBreakpoint,\n OnCollapse,\n LayoutProps,\n SiderProps,\n HeaderProps,\n FooterProps,\n ContentProps,\n} from './layout.types.js';\nexport { BREAKPOINT_VALUES } from './layout.types.js';\n"]}
|
package/layout.component.d.ts
CHANGED
|
@@ -39,7 +39,7 @@ export declare class NrLayoutElement extends NrLayoutElement_base {
|
|
|
39
39
|
* Handles slot changes to re-detect sider elements
|
|
40
40
|
*/
|
|
41
41
|
private handleSlotChange;
|
|
42
|
-
render(): import("lit").TemplateResult<1>;
|
|
42
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
43
43
|
}
|
|
44
44
|
declare global {
|
|
45
45
|
interface HTMLElementTagNameMap {
|
package/layout.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.component.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"layout.component.js","sourceRoot":"","sources":["../../../../src/components/layout/layout.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAlE;;QAGE;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;IA4CnB,CAAC;IAxCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEQ,OAAO,CAAC,iBAAuC;QACtD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED;;OAEG;IACK,WAAW;;QACjB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,IAAI,EAAE;YACR,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACjD,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAI,CAC3C,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,CAChD,CAAC;YACF,IAAI,IAAI,CAAC,QAAQ,KAAK,eAAe,EAAE;gBACrC,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC;aACjC;SACF;IACH,CAAC;IAED;;OAEG;IACK,gBAAgB;QACtB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;4BAEa,IAAI,CAAC,gBAAgB;;KAE5C,CAAC;IACJ,CAAC;CACF,CAAA;AApDiB,sBAAM,GAAG,YAAa,CAAA;AAQtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;iDAClD;AAIjB;IAFC,qBAAqB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;wDAK/C;AAhBU,eAAe;IAD3B,aAAa,CAAC,WAAW,CAAC;GACd,eAAe,CAqD3B;SArDY,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { layoutStyles } from './layout.style.js';\n\n/**\n * # Layout Component\n * \n * The layout wrapper component that provides the base structure for a page layout.\n * Can contain Header, Sider, Content, Footer, or nested Layout components.\n * \n * @element nr-layout\n * \n * @slot - Default slot for layout children (Header, Sider, Content, Footer, or nested Layout)\n * \n * @csspart layout - The layout container element\n * \n * @example\n * ```html\n * <nr-layout>\n * <nr-header>Header</nr-header>\n * <nr-content>Content</nr-content>\n * <nr-footer>Footer</nr-footer>\n * </nr-layout>\n * ```\n */\n@customElement('nr-layout')\nexport class NrLayoutElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = layoutStyles;\n\n /**\n * Whether the layout contains a Sider component.\n * When true, the layout uses horizontal flex direction.\n * Automatically detected from slotted content.\n */\n @property({ type: Boolean, reflect: true, attribute: 'has-sider' })\n hasSider = false;\n\n @queryAssignedElements({ selector: 'nr-sider' })\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.detectSider();\n }\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n this.detectSider();\n }\n\n /**\n * Detects if the layout has a Sider component as a direct child\n */\n private detectSider(): void {\n const slot = this.shadowRoot?.querySelector('slot');\n if (slot) {\n const assignedElements = slot.assignedElements();\n const hasSiderElement = assignedElements.some(\n (el) => el.tagName.toLowerCase() === 'nr-sider'\n );\n if (this.hasSider !== hasSiderElement) {\n this.hasSider = hasSiderElement;\n }\n }\n }\n\n /**\n * Handles slot changes to re-detect sider elements\n */\n private handleSlotChange(): void {\n this.detectSider();\n }\n\n override render() {\n return html`\n <div class=\"nr-layout\" part=\"layout\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-layout': NrLayoutElement;\n }\n}\n"]}
|
package/layout.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"layout.style.js","sourceRoot":"","sources":["../../../../src/components/layout/layout.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoB9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const layoutStyles = css`\n :host {\n display: flex;\n flex: auto;\n flex-direction: column;\n min-height: 0;\n background: var(--nuraly-layout-background);\n }\n\n :host([has-sider]) {\n flex-direction: row;\n }\n\n .nr-layout {\n display: flex;\n flex: auto;\n flex-direction: inherit;\n min-height: 0;\n width: 100%;\n }\n`;\n"]}
|
package/layout.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"layout.types.js","sourceRoot":"","sources":["../../../../src/components/layout/layout.types.ts"],"names":[],"mappings":"AAYA;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAqC;IACjE,gCAAqB,EAAE,GAAG;IAC1B,gCAAqB,EAAE,GAAG;IAC1B,gCAAqB,EAAE,GAAG;IAC1B,gCAAqB,EAAE,GAAG;IAC1B,gCAAqB,EAAE,IAAI;IAC3B,kCAAsB,EAAE,IAAI;CAC7B,CAAC","sourcesContent":["/**\n * Breakpoints for responsive layout\n */\nexport const enum LayoutBreakpoint {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n XXL = 'xxl',\n}\n\n/**\n * Breakpoint width values in pixels\n */\nexport const BREAKPOINT_VALUES: Record<LayoutBreakpoint, number> = {\n [LayoutBreakpoint.XS]: 480,\n [LayoutBreakpoint.SM]: 576,\n [LayoutBreakpoint.MD]: 768,\n [LayoutBreakpoint.LG]: 992,\n [LayoutBreakpoint.XL]: 1200,\n [LayoutBreakpoint.XXL]: 1600,\n};\n\n/**\n * Sider theme options\n */\nexport const enum SiderTheme {\n Light = 'light',\n Dark = 'dark',\n}\n\n/**\n * Sider collapse trigger type\n */\nexport type SiderTrigger = 'default' | null;\n\n/**\n * Callback for breakpoint changes\n */\nexport type OnBreakpoint = (broken: boolean) => void;\n\n/**\n * Callback for collapse state changes\n */\nexport type OnCollapse = (collapsed: boolean, type: 'clickTrigger' | 'responsive') => void;\n\n/**\n * Layout component properties\n */\nexport interface LayoutProps {\n hasSider?: boolean;\n}\n\n/**\n * Sider component properties\n */\nexport interface SiderProps {\n breakpoint?: LayoutBreakpoint;\n collapsed?: boolean;\n collapsedWidth?: number;\n collapsible?: boolean;\n defaultCollapsed?: boolean;\n reverseArrow?: boolean;\n theme?: SiderTheme;\n trigger?: SiderTrigger;\n width?: number | string;\n zeroWidthTriggerStyle?: string;\n onBreakpoint?: OnBreakpoint;\n onCollapse?: OnCollapse;\n}\n\n/**\n * Header component properties\n */\nexport interface HeaderProps {\n height?: number | string;\n}\n\n/**\n * Footer component properties\n */\nexport interface FooterProps {\n padding?: string;\n}\n\n/**\n * Content component properties\n */\nexport interface ContentProps {}\n"]}
|
package/package.json
CHANGED
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/layout/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,UAAU,EAAE,UAAU;QACtB,YAAY,EAAE,YAAY;KAC3B;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC;IACvC,OAAO,EAAE,YAAY;IACrB,YAAY,EAAE,gBAAgB;IAC9B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { NrLayoutElement } from './layout.component.js';\nimport { NrHeaderElement } from './header.component.js';\nimport { NrFooterElement } from './footer.component.js';\nimport { NrSiderElement } from './sider.component.js';\nimport { NrContentElement } from './content.component.js';\n\nexport const NrLayout = createComponent({\n tagName: 'nr-layout',\n elementClass: NrLayoutElement,\n react: React,\n});\n\nexport const NrHeader = createComponent({\n tagName: 'nr-header',\n elementClass: NrHeaderElement,\n react: React,\n});\n\nexport const NrFooter = createComponent({\n tagName: 'nr-footer',\n elementClass: NrFooterElement,\n react: React,\n});\n\nexport const NrSider = createComponent({\n tagName: 'nr-sider',\n elementClass: NrSiderElement,\n react: React,\n events: {\n onCollapse: 'collapse',\n onBreakpoint: 'breakpoint',\n },\n});\n\nexport const NrContent = createComponent({\n tagName: 'nr-content',\n elementClass: NrContentElement,\n react: React,\n});\n"]}
|
package/sider.component.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement, PropertyValues } from 'lit';
|
|
1
|
+
import { LitElement, type PropertyValues } from 'lit';
|
|
2
2
|
import { LayoutBreakpoint, SiderTheme } from './layout.types.js';
|
|
3
3
|
declare const NrSiderElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
4
4
|
/**
|
|
@@ -105,7 +105,7 @@ export declare class NrSiderElement extends NrSiderElement_base {
|
|
|
105
105
|
* Render the collapse trigger
|
|
106
106
|
*/
|
|
107
107
|
private renderTrigger;
|
|
108
|
-
render(): import("lit").TemplateResult<1>;
|
|
108
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
109
109
|
}
|
|
110
110
|
declare global {
|
|
111
111
|
interface HTMLElementTagNameMap {
|
package/sider.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sider.component.js","sourceRoot":"","sources":["../../../src/components/layout/sider.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAEH,iBAAiB,GAEpB,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAjE;;QASE;;WAEG;QAEH,cAAS,GAAG,KAAK,CAAC;QAElB;;WAEG;QAEH,mBAAc,GAAG,EAAE,CAAC;QAEpB;;WAEG;QAEH,gBAAW,GAAG,KAAK,CAAC;QAEpB;;WAEG;QAEH,qBAAgB,GAAG,KAAK,CAAC;QAEzB;;WAEG;QAEH,iBAAY,GAAG,KAAK,CAAC;QAErB;;WAEG;QAEH,UAAK,gCAA+B;QAEpC;;WAEG;QAEH,YAAO,GAAqB,SAAS,CAAC;QAEtC;;WAEG;QAEH,UAAK,GAAoB,GAAG,CAAC;QAE7B;;WAEG;QAEH,0BAAqB,GAAG,EAAE,CAAC;QAE3B;;WAEG;QAEK,oBAAe,GAAG,KAAK,CAAC;IAqLlC,CAAC;IA9KU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,8BAA8B;QAC9B,IAAI,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE;YAC5D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;SACvB;QAED,uCAAuC;QACvC,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B;IACH,CAAC;IAEQ,oBAAoB;;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;IACpC,CAAC;IAEQ,OAAO,CAAC,iBAAiC;;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;YACvC,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;YAClC,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,IAAI,CAAC,mBAAmB,EAAE,CAAC;aAC5B;SACF;IACH,CAAC;IAED;;OAEG;IACK,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAE7B,MAAM,eAAe,GAAG,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAE3D,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YACnD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;gBACtC,MAAM,iBAAiB,GAAG,KAAK,GAAG,eAAe,CAAC;gBAElD,IAAI,iBAAiB,KAAK,IAAI,CAAC,eAAe,EAAE;oBAC9C,IAAI,CAAC,eAAe,GAAG,iBAAiB,CAAC;oBAEzC,sCAAsC;oBACtC,IAAI,IAAI,CAAC,WAAW,IAAI,iBAAiB,KAAK,IAAI,CAAC,SAAS,EAAE;wBAC5D,IAAI,CAAC,SAAS,GAAG,iBAAiB,CAAC;wBACnC,IAAI,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;qBAC1C;oBAED,4BAA4B;oBAC5B,IAAI,CAAC,uBAAuB,CAAC,iBAAiB,CAAC,CAAC;iBACjD;aACF;QACH,CAAC,CAAC,CAAC;QAEH,6CAA6C;QAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC;QAC1D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACtC,CAAC;IAED;;OAEG;IACK,cAAc;QACpB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,qBAAqB,CAAC,cAAc,CAAC,CAAC;IAC7C,CAAC;IAED;;OAEG;IACK,qBAAqB,CAAC,IAAmC;QAC/D,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAuC,UAAU,EAAE;YAChE,MAAM,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE;YAC3C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,uBAAuB,CAAC,MAAe;QAC7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAsB,YAAY,EAAE;YACjD,MAAM,EAAE,EAAE,MAAM,EAAE;YAClB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,OAAO,GAAG,IAAI,CAAC,cAAc,IAAI,CAAC;SACnC;QACD,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IACpF,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YAC9C,OAAO,IAAI,CAAC;SACb;QAED,gCAAgC;QAChC,MAAM,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QAChE,IAAI,gBAAgB,EAAE;YACpB,OAAO,IAAI,CAAA,8BAA8B,CAAC;SAC3C;QAED,gEAAgE;QAChE,IAAI,IAAI,CAAC,cAAc,KAAK,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE;YAC/C,OAAO,IAAI,CAAA;;;;kBAIC,IAAI,CAAC,qBAAqB;mBACzB,IAAI,CAAC,cAAc;;uCAEC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;OAE7D,CAAC;SACH;QAED,kBAAkB;QAClB,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,cAAc;;;YAGxB,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;YACjC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAClC;;;KAGL,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,MAAM,OAAO,GAAG;YACd,UAAU,EAAE,IAAI;YAChB,oBAAoB,EAAE,IAAI,CAAC,SAAS;YACpC,sBAAsB,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI;YACjE,2BAA2B,EAAE,IAAI,CAAC,eAAe;YACjD,qBAAqB,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,cAAc,KAAK,CAAC;SACnE,CAAC;QAEF,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC,OAAO,CAAC;;wBAET,IAAI,CAAC,eAAe,EAAE,eAAe,IAAI,CAAC,eAAe,EAAE;;;;;UAKzE,IAAI,CAAC,aAAa,EAAE;;KAEzB,CAAC;IACJ,CAAC;CACF,CAAA;AAvPiB,qBAAM,GAAG,WAAY,CAAA;AAMrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACG;AAM9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACzB;AAMlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;sDACrC;AAMpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACR;AAMpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;wDACnC;AAMzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;oDACnC;AAMrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACN;AAMpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACW;AAMtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACE;AAM7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC;6DACvC;AAM3B;IADC,KAAK,EAAE;uDACwB;AAnErB,cAAc;IAD1B,aAAa,CAAC,UAAU,CAAC;GACb,cAAc,CAwP1B;SAxPY,cAAc","sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { siderStyles } from './sider.style.js';\nimport {\n LayoutBreakpoint,\n BREAKPOINT_VALUES,\n SiderTheme,\n} from './layout.types.js';\n\n/**\n * # Sider Component\n * \n * The sidebar component with collapsible functionality, theme support, and responsive behavior.\n * Must be placed inside a Layout component.\n * \n * @element nr-sider\n * \n * @slot - Default slot for sider content (usually navigation menu)\n * @slot trigger - Custom trigger slot (overrides default trigger)\n * \n * @fires collapse - Fired when the sider is collapsed or expanded\n * @fires breakpoint - Fired when the breakpoint is triggered\n * \n * @csspart sider - The sider container element\n * @csspart trigger - The collapse trigger element\n * \n * @example\n * ```html\n * <nr-layout has-sider>\n * <nr-sider collapsible breakpoint=\"lg\">\n * <nav>Navigation Menu</nav>\n * </nr-sider>\n * <nr-content>Content</nr-content>\n * </nr-layout>\n * ```\n */\n@customElement('nr-sider')\nexport class NrSiderElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = siderStyles;\n\n /**\n * Breakpoint for responsive collapsing\n */\n @property({ type: String })\n breakpoint?: LayoutBreakpoint;\n\n /**\n * Current collapsed state (controlled)\n */\n @property({ type: Boolean, reflect: true })\n collapsed = false;\n\n /**\n * Width when collapsed. Set to 0 for a special trigger.\n */\n @property({ type: Number, attribute: 'collapsed-width' })\n collapsedWidth = 80;\n\n /**\n * Whether the sider can be collapsed\n */\n @property({ type: Boolean })\n collapsible = false;\n\n /**\n * Initial collapsed state (uncontrolled)\n */\n @property({ type: Boolean, attribute: 'default-collapsed' })\n defaultCollapsed = false;\n\n /**\n * Reverse the arrow direction (for right-side sider)\n */\n @property({ type: Boolean, attribute: 'reverse-arrow' })\n reverseArrow = false;\n\n /**\n * Sider theme (light or dark)\n */\n @property({ type: String, reflect: true })\n theme: SiderTheme = SiderTheme.Dark;\n\n /**\n * Custom trigger element. Set to null to hide trigger.\n */\n @property({ type: String })\n trigger: 'default' | null = 'default';\n\n /**\n * Sider width when expanded\n */\n @property({ type: String })\n width: number | string = 200;\n\n /**\n * Custom styles for zero-width trigger\n */\n @property({ type: String, attribute: 'zero-width-trigger-style' })\n zeroWidthTriggerStyle = '';\n\n /**\n * Internal state for tracking if breakpoint is active\n */\n @state()\n private belowBreakpoint = false;\n\n /**\n * ResizeObserver for responsive behavior\n */\n private resizeObserver?: ResizeObserver;\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n // Set initial collapsed state\n if (this.defaultCollapsed && !this.hasAttribute('collapsed')) {\n this.collapsed = true;\n }\n\n // Setup resize observer for breakpoint\n if (this.breakpoint) {\n this.setupResizeObserver();\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.resizeObserver?.disconnect();\n }\n\n override updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('breakpoint')) {\n this.resizeObserver?.disconnect();\n if (this.breakpoint) {\n this.setupResizeObserver();\n }\n }\n }\n\n /**\n * Setup ResizeObserver for responsive breakpoint behavior\n */\n private setupResizeObserver(): void {\n if (!this.breakpoint) return;\n\n const breakpointValue = BREAKPOINT_VALUES[this.breakpoint];\n \n this.resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const width = entry.contentRect.width;\n const shouldBeCollapsed = width < breakpointValue;\n\n if (shouldBeCollapsed !== this.belowBreakpoint) {\n this.belowBreakpoint = shouldBeCollapsed;\n \n // Auto-collapse when below breakpoint\n if (this.collapsible && shouldBeCollapsed !== this.collapsed) {\n this.collapsed = shouldBeCollapsed;\n this.dispatchCollapseEvent('responsive');\n }\n\n // Dispatch breakpoint event\n this.dispatchBreakpointEvent(shouldBeCollapsed);\n }\n }\n });\n\n // Observe the parent layout or document body\n const target = this.closest('nr-layout') || document.body;\n this.resizeObserver.observe(target);\n }\n\n /**\n * Toggle collapsed state\n */\n private toggleCollapse(): void {\n this.collapsed = !this.collapsed;\n this.dispatchCollapseEvent('clickTrigger');\n }\n\n /**\n * Dispatch collapse event\n */\n private dispatchCollapseEvent(type: 'clickTrigger' | 'responsive'): void {\n this.dispatchEvent(\n new CustomEvent<{ collapsed: boolean; type: string }>('collapse', {\n detail: { collapsed: this.collapsed, type },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /**\n * Dispatch breakpoint event\n */\n private dispatchBreakpointEvent(broken: boolean): void {\n this.dispatchEvent(\n new CustomEvent<{ broken: boolean }>('breakpoint', {\n detail: { broken },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /**\n * Get the current width based on collapsed state\n */\n private getCurrentWidth(): string {\n if (this.collapsed) {\n return `${this.collapsedWidth}px`;\n }\n return typeof this.width === 'number' ? `${this.width}px` : this.width.toString();\n }\n\n /**\n * Render the collapse trigger\n */\n private renderTrigger() {\n if (this.trigger === null || !this.collapsible) {\n return null;\n }\n\n // Check for custom trigger slot\n const hasCustomTrigger = this.querySelector('[slot=\"trigger\"]');\n if (hasCustomTrigger) {\n return html`<slot name=\"trigger\"></slot>`;\n }\n\n // Zero-width trigger (special trigger when collapsedWidth is 0)\n if (this.collapsedWidth === 0 && this.collapsed) {\n return html`\n <div\n class=\"nr-sider-zero-width-trigger\"\n part=\"trigger\"\n style=${this.zeroWidthTriggerStyle}\n @click=${this.toggleCollapse}\n >\n <span class=\"trigger-icon\">${this.reverseArrow ? '◀' : '▶'}</span>\n </div>\n `;\n }\n\n // Default trigger\n return html`\n <div\n class=\"nr-sider-trigger\"\n part=\"trigger\"\n @click=${this.toggleCollapse}\n >\n <span class=\"trigger-icon\">\n ${this.collapsed \n ? (this.reverseArrow ? '◀' : '▶') \n : (this.reverseArrow ? '▶' : '◀')\n }\n </span>\n </div>\n `;\n }\n\n override render() {\n const classes = {\n 'nr-sider': true,\n 'nr-sider-collapsed': this.collapsed,\n 'nr-sider-has-trigger': this.collapsible && this.trigger !== null,\n 'nr-sider-below-breakpoint': this.belowBreakpoint,\n 'nr-sider-zero-width': this.collapsed && this.collapsedWidth === 0,\n };\n\n return html`\n <aside\n class=${classMap(classes)}\n part=\"sider\"\n style=\"width: ${this.getCurrentWidth()}; flex: 0 0 ${this.getCurrentWidth()};\"\n >\n <div class=\"nr-sider-children\">\n <slot></slot>\n </div>\n ${this.renderTrigger()}\n </aside>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-sider': NrSiderElement;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sider.component.js","sourceRoot":"","sources":["../../../../src/components/layout/sider.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { siderStyles } from './sider.style.js';\nimport {\n LayoutBreakpoint,\n BREAKPOINT_VALUES,\n SiderTheme,\n} from './layout.types.js';\n\n/**\n * # Sider Component\n * \n * The sidebar component with collapsible functionality, theme support, and responsive behavior.\n * Must be placed inside a Layout component.\n * \n * @element nr-sider\n * \n * @slot - Default slot for sider content (usually navigation menu)\n * @slot trigger - Custom trigger slot (overrides default trigger)\n * \n * @fires collapse - Fired when the sider is collapsed or expanded\n * @fires breakpoint - Fired when the breakpoint is triggered\n * \n * @csspart sider - The sider container element\n * @csspart trigger - The collapse trigger element\n * \n * @example\n * ```html\n * <nr-layout has-sider>\n * <nr-sider collapsible breakpoint=\"lg\">\n * <nav>Navigation Menu</nav>\n * </nr-sider>\n * <nr-content>Content</nr-content>\n * </nr-layout>\n * ```\n */\n@customElement('nr-sider')\nexport class NrSiderElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = siderStyles;\n\n /**\n * Breakpoint for responsive collapsing\n */\n @property({ type: String })\n breakpoint?: LayoutBreakpoint;\n\n /**\n * Current collapsed state (controlled)\n */\n @property({ type: Boolean, reflect: true })\n collapsed = false;\n\n /**\n * Width when collapsed. Set to 0 for a special trigger.\n */\n @property({ type: Number, attribute: 'collapsed-width' })\n collapsedWidth = 80;\n\n /**\n * Whether the sider can be collapsed\n */\n @property({ type: Boolean })\n collapsible = false;\n\n /**\n * Initial collapsed state (uncontrolled)\n */\n @property({ type: Boolean, attribute: 'default-collapsed' })\n defaultCollapsed = false;\n\n /**\n * Reverse the arrow direction (for right-side sider)\n */\n @property({ type: Boolean, attribute: 'reverse-arrow' })\n reverseArrow = false;\n\n /**\n * Sider theme (light or dark)\n */\n @property({ type: String, reflect: true })\n theme: SiderTheme = SiderTheme.Dark;\n\n /**\n * Custom trigger element. Set to null to hide trigger.\n */\n @property({ type: String })\n trigger: 'default' | null = 'default';\n\n /**\n * Sider width when expanded\n */\n @property({ type: String })\n width: number | string = 200;\n\n /**\n * Custom styles for zero-width trigger\n */\n @property({ type: String, attribute: 'zero-width-trigger-style' })\n zeroWidthTriggerStyle = '';\n\n /**\n * Internal state for tracking if breakpoint is active\n */\n @state()\n private belowBreakpoint = false;\n\n /**\n * ResizeObserver for responsive behavior\n */\n private resizeObserver?: ResizeObserver;\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n // Set initial collapsed state\n if (this.defaultCollapsed && !this.hasAttribute('collapsed')) {\n this.collapsed = true;\n }\n\n // Setup resize observer for breakpoint\n if (this.breakpoint) {\n this.setupResizeObserver();\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.resizeObserver?.disconnect();\n }\n\n override updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('breakpoint')) {\n this.resizeObserver?.disconnect();\n if (this.breakpoint) {\n this.setupResizeObserver();\n }\n }\n }\n\n /**\n * Setup ResizeObserver for responsive breakpoint behavior\n */\n private setupResizeObserver(): void {\n if (!this.breakpoint) return;\n\n const breakpointValue = BREAKPOINT_VALUES[this.breakpoint];\n \n this.resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const width = entry.contentRect.width;\n const shouldBeCollapsed = width < breakpointValue;\n\n if (shouldBeCollapsed !== this.belowBreakpoint) {\n this.belowBreakpoint = shouldBeCollapsed;\n \n // Auto-collapse when below breakpoint\n if (this.collapsible && shouldBeCollapsed !== this.collapsed) {\n this.collapsed = shouldBeCollapsed;\n this.dispatchCollapseEvent('responsive');\n }\n\n // Dispatch breakpoint event\n this.dispatchBreakpointEvent(shouldBeCollapsed);\n }\n }\n });\n\n // Observe the parent layout or document body\n const target = this.closest('nr-layout') || document.body;\n this.resizeObserver.observe(target);\n }\n\n /**\n * Toggle collapsed state\n */\n private toggleCollapse(): void {\n this.collapsed = !this.collapsed;\n this.dispatchCollapseEvent('clickTrigger');\n }\n\n /**\n * Dispatch collapse event\n */\n private dispatchCollapseEvent(type: 'clickTrigger' | 'responsive'): void {\n this.dispatchEvent(\n new CustomEvent<{ collapsed: boolean; type: string }>('collapse', {\n detail: { collapsed: this.collapsed, type },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /**\n * Dispatch breakpoint event\n */\n private dispatchBreakpointEvent(broken: boolean): void {\n this.dispatchEvent(\n new CustomEvent<{ broken: boolean }>('breakpoint', {\n detail: { broken },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /**\n * Get the current width based on collapsed state\n */\n private getCurrentWidth(): string {\n if (this.collapsed) {\n return `${this.collapsedWidth}px`;\n }\n return typeof this.width === 'number' ? `${this.width}px` : this.width.toString();\n }\n\n /**\n * Render the collapse trigger\n */\n private renderTrigger() {\n if (this.trigger === null || !this.collapsible) {\n return null;\n }\n\n // Check for custom trigger slot\n const hasCustomTrigger = this.querySelector('[slot=\"trigger\"]');\n if (hasCustomTrigger) {\n return html`<slot name=\"trigger\"></slot>`;\n }\n\n // Zero-width trigger (special trigger when collapsedWidth is 0)\n if (this.collapsedWidth === 0 && this.collapsed) {\n return html`\n <div\n class=\"nr-sider-zero-width-trigger\"\n part=\"trigger\"\n style=${this.zeroWidthTriggerStyle}\n @click=${this.toggleCollapse}\n >\n <span class=\"trigger-icon\">${this.reverseArrow ? '◀' : '▶'}</span>\n </div>\n `;\n }\n\n // Default trigger\n return html`\n <div\n class=\"nr-sider-trigger\"\n part=\"trigger\"\n @click=${this.toggleCollapse}\n >\n <span class=\"trigger-icon\">\n ${this.collapsed \n ? (this.reverseArrow ? '◀' : '▶') \n : (this.reverseArrow ? '▶' : '◀')\n }\n </span>\n </div>\n `;\n }\n\n override render() {\n const classes = {\n 'nr-sider': true,\n 'nr-sider-collapsed': this.collapsed,\n 'nr-sider-has-trigger': this.collapsible && this.trigger !== null,\n 'nr-sider-below-breakpoint': this.belowBreakpoint,\n 'nr-sider-zero-width': this.collapsed && this.collapsedWidth === 0,\n };\n\n return html`\n <aside\n class=${classMap(classes)}\n part=\"sider\"\n style=\"width: ${this.getCurrentWidth()}; flex: 0 0 ${this.getCurrentWidth()};\"\n >\n <div class=\"nr-sider-children\">\n <slot></slot>\n </div>\n ${this.renderTrigger()}\n </aside>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-sider': NrSiderElement;\n }\n}\n"]}
|
package/sider.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sider.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"sider.style.js","sourceRoot":"","sources":["../../../../src/components/layout/sider.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqG7B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const siderStyles = css`\n :host {\n display: block;\n position: relative;\n }\n\n .nr-sider {\n position: relative;\n display: flex;\n flex-direction: column;\n min-width: 0;\n background: var(--nuraly-layout-sider-background);\n color: var(--nuraly-layout-sider-text);\n border-right: 1px solid var(--nuraly-layout-sider-border);\n transition: var(--nuraly-layout-sider-transition);\n }\n\n :host([theme='light']) .nr-sider {\n background: var(--nuraly-layout-sider-light-background);\n color: var(--nuraly-layout-sider-light-text);\n border-right: 1px solid var(--nuraly-layout-sider-light-border);\n }\n\n .nr-sider-children {\n flex: 1;\n min-height: 0;\n overflow: auto;\n }\n\n .nr-sider-trigger {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--nuraly-layout-trigger-height);\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--nuraly-layout-trigger-background);\n color: var(--nuraly-layout-trigger-text);\n cursor: pointer;\n transition: var(--nuraly-layout-transition);\n border-top: 1px solid var(--nuraly-layout-trigger-border);\n border-radius: var(--nuraly-layout-trigger-border-radius);\n }\n\n :host([theme='light']) .nr-sider-trigger {\n background: var(--nuraly-layout-trigger-light-background);\n color: var(--nuraly-layout-trigger-light-text);\n border-top: 1px solid var(--nuraly-layout-trigger-light-border);\n }\n\n .nr-sider-trigger:hover {\n background: var(--nuraly-layout-trigger-background-hover);\n }\n\n :host([theme='light']) .nr-sider-trigger:hover {\n background: var(--nuraly-layout-trigger-light-background-hover);\n }\n\n .nr-sider-zero-width-trigger {\n position: absolute;\n top: 64px;\n right: calc(-1 * var(--nuraly-layout-zero-trigger-width));\n width: var(--nuraly-layout-zero-trigger-width);\n height: var(--nuraly-layout-zero-trigger-height);\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--nuraly-layout-zero-trigger-background);\n color: var(--nuraly-layout-zero-trigger-text);\n cursor: pointer;\n transition: var(--nuraly-layout-transition);\n border-radius: var(--nuraly-layout-zero-trigger-border-radius);\n box-shadow: var(--nuraly-layout-zero-trigger-shadow);\n z-index: 1;\n }\n\n :host([theme='light']) .nr-sider-zero-width-trigger {\n background: var(--nuraly-layout-zero-trigger-background);\n color: var(--nuraly-layout-zero-trigger-text);\n }\n\n .nr-sider-zero-width-trigger:hover {\n background: var(--nuraly-layout-zero-trigger-background-hover);\n }\n\n .trigger-icon {\n font-size: 16px;\n line-height: 1;\n }\n\n .nr-sider-collapsed {\n overflow: hidden;\n }\n\n .nr-sider-zero-width {\n width: 0 !important;\n min-width: 0 !important;\n flex: 0 0 0 !important;\n }\n`;\n"]}
|