@nuralyui/collapse 0.0.2 → 0.0.4
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/hy-collapse.component.js
CHANGED
|
@@ -34,7 +34,7 @@ let HyCollapse = class HyCollapse extends LitElement {
|
|
|
34
34
|
})}
|
|
35
35
|
"
|
|
36
36
|
>
|
|
37
|
-
<
|
|
37
|
+
<hy-label
|
|
38
38
|
class="
|
|
39
39
|
header
|
|
40
40
|
${classMap({
|
|
@@ -50,7 +50,7 @@ let HyCollapse = class HyCollapse extends LitElement {
|
|
|
50
50
|
name="${section.open && section.collapsible != false ? 'chevron-down' : 'chevron-right'}"
|
|
51
51
|
></hy-icon>`}
|
|
52
52
|
${section.header}
|
|
53
|
-
</
|
|
53
|
+
</hy-label>
|
|
54
54
|
${section.open && section.collapsible != false ? html `<div class="content">${section.content}</div>` : ''}
|
|
55
55
|
</div>
|
|
56
56
|
`)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-collapse.component.js","sourceRoot":"","sources":["../../../src/components/collapse/hy-collapse.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,GAAG,EAAC,MAAM,uBAAuB,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAG2B,aAAQ,GAAe,EAAE,CAAC;QACvC,SAAI,wCAAwB;IA+C1C,CAAC;IA7CC,aAAa,CAAC,KAAa;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,OAAO,CAAC,WAAW,IAAI,KAAK,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,iCAAK,OAAO,KAAE,IAAI,EAAE,CAAC,OAAO,CAAC,IAAI,IAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;SAChH;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,iBAAiB,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAC,EAAC,CAAC,CAAC,CAAC;IAC5E,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;QACP,GAAG,CACH,IAAI,CAAC,QAAQ,EACb,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;YAIpB,QAAQ,CAAC;YACP,gBAAgB,EAAE,IAAI,CAAC,IAAI,oCAAsB;YACjD,gBAAgB,EAAE,IAAI,CAAC,IAAI,oCAAsB;SAClD,CAAC;;;;;;gBAME,QAAQ,CAAC;YACT,iBAAiB,EAAE,OAAO,CAAC,WAAW,IAAI,KAAK;YAC/C,kBAAkB,EAAE,OAAO,CAAC,IAAI,IAAI,IAAI;YACxC,aAAa,EAAE,OAAO,CAAC,IAAI,IAAI,IAAI;SACpC,CAAC;;wBAEQ,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;;gBAEvC,IAAI,CAAA;;wBAEI,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe;0BAC7E;gBACV,OAAO,CAAC,MAAM;;cAEhB,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,wBAAwB,OAAO,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE;;SAE5G,CACF;KACF,CAAC;IACJ,CAAC;CACF,CAAA;AAlDiB,iBAAM,GAAG,MAAO,CAAA;AAEP;IAAxB,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;4CAA2B;AACvC;IAAX,QAAQ,EAAE;wCAA6B;AAJ7B,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAmDtB;SAnDY,UAAU","sourcesContent":["import {LitElement, html} from 'lit';\nimport {styles} from './hy-collapse.style.js';\nimport {customElement, property} from 'lit/decorators.js';\nimport {CollapseSize, ISection} from './hy-collapse.type.js';\nimport {map} from 'lit/directives/map.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\n@customElement('hy-collapse')\nexport class HyCollapse extends LitElement {\n static override styles = styles;\n\n @property({type: Array}) sections: ISection[] = [];\n @property() size = CollapseSize.Default;\n\n toggleSection(index: number) {\n const section = this.sections[index];\n if (section.collapsible != false) {\n this.sections = this.sections.map((section, i) => (i === index ? {...section, open: !section.open} : section));\n }\n this.dispatchEvent(new CustomEvent('section-toggled', {detail: {index}}));\n }\n\n override render() {\n return html`\n ${map(\n this.sections,\n (section, index) => html`\n <div\n class=\"\n collapse-section\n ${classMap({\n 'collapse-small': this.size == CollapseSize.Small,\n 'collapse-large': this.size == CollapseSize.Large,\n })}\n \"\n >\n <
|
|
1
|
+
{"version":3,"file":"hy-collapse.component.js","sourceRoot":"","sources":["../../../src/components/collapse/hy-collapse.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,GAAG,EAAC,MAAM,uBAAuB,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAG2B,aAAQ,GAAe,EAAE,CAAC;QACvC,SAAI,wCAAwB;IA+C1C,CAAC;IA7CC,aAAa,CAAC,KAAa;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,OAAO,CAAC,WAAW,IAAI,KAAK,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,iCAAK,OAAO,KAAE,IAAI,EAAE,CAAC,OAAO,CAAC,IAAI,IAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;SAChH;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,iBAAiB,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAC,EAAC,CAAC,CAAC,CAAC;IAC5E,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;QACP,GAAG,CACH,IAAI,CAAC,QAAQ,EACb,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;YAIpB,QAAQ,CAAC;YACP,gBAAgB,EAAE,IAAI,CAAC,IAAI,oCAAsB;YACjD,gBAAgB,EAAE,IAAI,CAAC,IAAI,oCAAsB;SAClD,CAAC;;;;;;gBAME,QAAQ,CAAC;YACT,iBAAiB,EAAE,OAAO,CAAC,WAAW,IAAI,KAAK;YAC/C,kBAAkB,EAAE,OAAO,CAAC,IAAI,IAAI,IAAI;YACxC,aAAa,EAAE,OAAO,CAAC,IAAI,IAAI,IAAI;SACpC,CAAC;;wBAEQ,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;;gBAEvC,IAAI,CAAA;;wBAEI,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe;0BAC7E;gBACV,OAAO,CAAC,MAAM;;cAEhB,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,wBAAwB,OAAO,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE;;SAE5G,CACF;KACF,CAAC;IACJ,CAAC;CACF,CAAA;AAlDiB,iBAAM,GAAG,MAAO,CAAA;AAEP;IAAxB,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;4CAA2B;AACvC;IAAX,QAAQ,EAAE;wCAA6B;AAJ7B,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAmDtB;SAnDY,UAAU","sourcesContent":["import {LitElement, html} from 'lit';\nimport {styles} from './hy-collapse.style.js';\nimport {customElement, property} from 'lit/decorators.js';\nimport {CollapseSize, ISection} from './hy-collapse.type.js';\nimport {map} from 'lit/directives/map.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\n@customElement('hy-collapse')\nexport class HyCollapse extends LitElement {\n static override styles = styles;\n\n @property({type: Array}) sections: ISection[] = [];\n @property() size = CollapseSize.Default;\n\n toggleSection(index: number) {\n const section = this.sections[index];\n if (section.collapsible != false) {\n this.sections = this.sections.map((section, i) => (i === index ? {...section, open: !section.open} : section));\n }\n this.dispatchEvent(new CustomEvent('section-toggled', {detail: {index}}));\n }\n\n override render() {\n return html`\n ${map(\n this.sections,\n (section, index) => html`\n <div\n class=\"\n collapse-section\n ${classMap({\n 'collapse-small': this.size == CollapseSize.Small,\n 'collapse-large': this.size == CollapseSize.Large,\n })}\n \"\n >\n <hy-label\n class=\"\n header\n ${classMap({\n 'disabled-header': section.collapsible == false,\n 'collapsed-header': section.open == true,\n 'fold-header': section.open != true\n })}\n \"\n @click=\"${() => this.toggleSection(index)}\"\n >\n ${html`<hy-icon\n class=\"collapse-icon\"\n name=\"${section.open && section.collapsible != false ? 'chevron-down' : 'chevron-right'}\"\n ></hy-icon>`}\n ${section.header}\n </hy-label>\n ${section.open && section.collapsible != false ? html`<div class=\"content\">${section.content}</div>` : ''}\n </div>\n `\n )}\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-collapse.style.d.ts","sourceRoot":"","sources":["../../../src/components/collapse/hy-collapse.style.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"hy-collapse.style.d.ts","sourceRoot":"","sources":["../../../src/components/collapse/hy-collapse.style.ts"],"names":[],"mappings":"AAmHA,eAAO,MAAM,MAAM,yBAAiB,CAAC"}
|
package/hy-collapse.style.js
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
const collapseStyles = css `
|
|
3
|
+
hy-label{
|
|
4
|
+
display: inline-block;
|
|
5
|
+
}
|
|
6
|
+
hy-icon{
|
|
7
|
+
--hybrid-icon-width: 11px;
|
|
8
|
+
--hybrid-icon-height: 11px;
|
|
9
|
+
}
|
|
3
10
|
.disabled-header {
|
|
4
11
|
opacity: 0.5;
|
|
5
12
|
cursor: not-allowed;
|
|
@@ -13,10 +20,10 @@ const collapseStyles = css `
|
|
|
13
20
|
}
|
|
14
21
|
|
|
15
22
|
.collapse-icon {
|
|
16
|
-
display: flex;
|
|
17
23
|
}
|
|
18
24
|
|
|
19
25
|
.header {
|
|
26
|
+
width: auto;
|
|
20
27
|
border-top-left-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));
|
|
21
28
|
border-top-right-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));
|
|
22
29
|
display: flex;
|
|
@@ -67,6 +74,7 @@ const collapseStyles = css `
|
|
|
67
74
|
border-bottom-right-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));
|
|
68
75
|
}
|
|
69
76
|
:host {
|
|
77
|
+
--hybrid-icon-width: 8px;
|
|
70
78
|
--hy-collapse-local-content-background-color: #ffffff;
|
|
71
79
|
--hy-collapse-local-header-background-color: #fafafa;
|
|
72
80
|
--hy-collapse-local-content-color: #000000;
|
|
@@ -80,9 +88,9 @@ const collapseStyles = css `
|
|
|
80
88
|
--hy-collapse-local-width:auto;
|
|
81
89
|
--hy-collapse-local-border-radius:5px;
|
|
82
90
|
|
|
83
|
-
--hy-collapse-local-header-default-size-padding-y:
|
|
84
|
-
--hy-collapse-local-header-default-size-padding-x:
|
|
85
|
-
--hy-collapse-local-content-default-size-padding:
|
|
91
|
+
--hy-collapse-local-header-default-size-padding-y: 4px;
|
|
92
|
+
--hy-collapse-local-header-default-size-padding-x: 6px;
|
|
93
|
+
--hy-collapse-local-content-default-size-padding: 6px;
|
|
86
94
|
|
|
87
95
|
--hy-collapse-local-header-small-size-padding-y: 5px;
|
|
88
96
|
--hy-collapse-local-header-small-size-padding-x: 11px;
|
package/hy-collapse.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-collapse.style.js","sourceRoot":"","sources":["../../../src/components/collapse/hy-collapse.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,cAAc,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"hy-collapse.style.js","sourceRoot":"","sources":["../../../src/components/collapse/hy-collapse.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHzB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,cAAc,CAAC","sourcesContent":["import {css} from 'lit';\nconst collapseStyles = css`\n hy-label{\n display: inline-block; \n }\n hy-icon{\n --hybrid-icon-width: 11px;\n --hybrid-icon-height: 11px;\n }\n .disabled-header {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .collapse-section {\n display:block;\n margin-top:1px;\n width:var(--hy-collapse-width,var(--hy-collapse-local-width));\n border: var(--hy-collapse-border,var(--hy-collapse-local-border));\n border-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));\n }\n\n .collapse-icon {\n }\n\n .header {\n width: auto;\n border-top-left-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));\n border-top-right-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));\n display: flex;\n align-items: center;\n gap: 5px;\n padding: var(--hy-collapse-header-default-size-padding-y,var(--hy-collapse-local-header-default-size-padding-y)) var(--hy-collapse-header-default-size-padding-x,var(--hy-collapse-local-header-default-size-padding-x));\n background-color: var(--hy-collapse-header-background-color,var(--hy-collapse-local-header-background-color));\n font-weight: var(--hy-collapse-header-font-weight,var(--hy-collapse-local-header-font-weight));\n font-size:var(--hy-collapse-header-font-size,var(--hy-collapse-local-header-font-size));\n color: var(--hy-collapse-header-color,var(--hy-collapse-local-header-color));\n }\n\n .collapse-small > .header {\n padding: var(--hy-collapse-header-small-size-padding-y,var(--hy-collapse-local-header-small-size-padding-y)) var(--hy-collapse-header-small-size-padding-x,var(--hy-collapse-local-header-small-size-padding-x));\n }\n\n .collapse-small > .content {\n padding: var(--hy-collapse-content-small-size-padding,var(--hy-collapse-local-content-small-size-padding));\n }\n\n .collapse-large > .header {\n padding: var(--hy-collapse-header-large-size-padding-y,var(--hy-collapse-local-header-large-size-padding-y)) var(--hy-collapse-header-large-size-padding-x,var(--hy-collapse-local-header-large-size-padding-x));\n }\n\n .collapse-large > .content {\n padding: var(--hy-collapse-content-large-size-padding,var(--hy-collapse-local-content-large-size-padding));\n }\n\n .header:not(.disabled-header) {\n cursor: pointer;\n }\n .header:not(.disabled-header):hover {\n background-color: var(--hy-collapse-header-hover-background-color,var(--hy-collapse-local-header-hover-background-color));\n }\n .collapsed-header {\n background-color: var(--hy-collapse-header-collapsed-background-color,var(--hy-collapse-local-header-collapsed-background-color));\n }\n .fold-header {\n border-bottom-left-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));\n border-bottom-right-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));\n }\n\n .content {\n padding: var(--hy-collapse-content-default-size-padding,var(--hy-collapse-local-content-default-size-padding));\n background-color: var(--hy-collapse-content-background-color,var(--hy-collapse-local-content-background-color));\n color: var(--hy-collapse-content-color,var(--hy-collapse-local-content-color));\n border-bottom-left-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));\n border-bottom-right-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));\n }\n :host {\n --hybrid-icon-width: 8px;\n --hy-collapse-local-content-background-color: #ffffff;\n --hy-collapse-local-header-background-color: #fafafa;\n --hy-collapse-local-content-color: #000000;\n --hy-collapse-local-header-color: #000000;\n --hy-collapse-local-header-collapsed-background-color: #d3d3d3;\n --hy-collapse-local-header-hover-background-color: #e0e0e0;\n --hy-collapse-local-border: 1px solid #bfbfbf;\n --hy-collapse-local-font-weight: bold;\n --hy-collapse-local-header-font-size: 14px;\n\n --hy-collapse-local-width:auto;\n --hy-collapse-local-border-radius:5px;\n \n --hy-collapse-local-header-default-size-padding-y: 4px;\n --hy-collapse-local-header-default-size-padding-x: 6px;\n --hy-collapse-local-content-default-size-padding: 6px;\n\n --hy-collapse-local-header-small-size-padding-y: 5px;\n --hy-collapse-local-header-small-size-padding-x: 11px;\n --hy-collapse-local-content-small-size-padding: 11px;\n\n --hy-collapse-local-header-large-size-padding-y: 13px;\n --hy-collapse-local-header-large-size-padding-x: 19px;\n --hy-collapse-local-content-large-size-padding: 19px;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --hy-collapse-local-content-background-color: #1f1f1f;\n --hy-collapse-local-header-background-color: #2a2a2a;\n --hy-collapse-local-header-color: #ffffff;\n --hy-collapse-local-content-color: #ffffff;\n --hy-collapse-local-header-collapsed-background-color: #4a4a4a;\n --hy-collapse-local-header-hover-background-color: #505050;\n --hy-collapse-local-border: 1px solid #d9d9d9;\n }\n }\n`;\n\nexport const styles = collapseStyles;\n"]}
|