@mhmo91/schmancy 0.2.118 → 0.2.120
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/dist/{animated-text-C2EvhDmf.cjs → animated-text-BH6DM-pF.cjs} +2 -2
- package/dist/{animated-text-C2EvhDmf.cjs.map → animated-text-BH6DM-pF.cjs.map} +1 -1
- package/dist/{animated-text-6DhYKKzt.js → animated-text-C92_eFNP.js} +3 -3
- package/dist/{animated-text-6DhYKKzt.js.map → animated-text-C92_eFNP.js.map} +1 -1
- package/dist/animated-text.cjs +1 -1
- package/dist/animated-text.js +1 -1
- package/dist/area.cjs +1 -1
- package/dist/{area.component-X-1ZwgJL.cjs → area.component-BDkmpYX3.cjs} +2 -2
- package/dist/{area.component-X-1ZwgJL.cjs.map → area.component-BDkmpYX3.cjs.map} +1 -1
- package/dist/{area.component-DAry93pl.js → area.component-Bh_XioGp.js} +10 -10
- package/dist/{area.component-DAry93pl.js.map → area.component-Bh_XioGp.js.map} +1 -1
- package/dist/area.js +1 -1
- package/dist/autocomplete-DMSMomJC.cjs +57 -0
- package/dist/{autocomplete-BIJ9G0y1.cjs.map → autocomplete-DMSMomJC.cjs.map} +1 -1
- package/dist/{autocomplete-C_QyhPJw.js → autocomplete-IOFBU8oc.js} +4 -5
- package/dist/{autocomplete-C_QyhPJw.js.map → autocomplete-IOFBU8oc.js.map} +1 -1
- package/dist/autocomplete.cjs +1 -1
- package/dist/autocomplete.js +1 -1
- package/dist/busy.cjs +1 -1
- package/dist/busy.js +1 -1
- package/dist/button.cjs +1 -1
- package/dist/button.js +1 -1
- package/dist/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/{checkbox-BkGLOzBe.cjs → checkbox-Bw98L4cT.cjs} +2 -2
- package/dist/{checkbox-BkGLOzBe.cjs.map → checkbox-Bw98L4cT.cjs.map} +1 -1
- package/dist/{checkbox-CTRhgYJB.js → checkbox-CglGRaSJ.js} +2 -2
- package/dist/{checkbox-CTRhgYJB.js.map → checkbox-CglGRaSJ.js.map} +1 -1
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/{chips-B4X5PxUQ.cjs → chips-BepHO_mm.cjs} +2 -2
- package/dist/{chips-B4X5PxUQ.cjs.map → chips-BepHO_mm.cjs.map} +1 -1
- package/dist/{chips-DjX_Zznh.js → chips-C_7K0qF3.js} +3 -3
- package/dist/{chips-DjX_Zznh.js.map → chips-C_7K0qF3.js.map} +1 -1
- package/dist/chips.cjs +1 -1
- package/dist/chips.js +1 -1
- package/dist/components.cjs +1 -1
- package/dist/components.js +1 -1
- package/dist/content-drawer.cjs +1 -1
- package/dist/content-drawer.js +1 -1
- package/dist/context-object-CVqtbNDv.js +303 -0
- package/dist/context-object-CVqtbNDv.js.map +1 -0
- package/dist/context-object-CgZ6F8E9.cjs +2 -0
- package/dist/context-object-CgZ6F8E9.cjs.map +1 -0
- package/dist/{date-range-CRJ7wYwK.js → date-range-BBY-tMEk.js} +3 -3
- package/dist/{date-range-CRJ7wYwK.js.map → date-range-BBY-tMEk.js.map} +1 -1
- package/dist/{date-range-CCsKoZUV.cjs → date-range-DC3sAepm.cjs} +2 -2
- package/dist/{date-range-CCsKoZUV.cjs.map → date-range-DC3sAepm.cjs.map} +1 -1
- package/dist/date-range.cjs +1 -1
- package/dist/date-range.js +1 -1
- package/dist/{delay-BkSIN-In.js → delay-DcwT5pHi.js} +2 -2
- package/dist/{delay-BkSIN-In.js.map → delay-DcwT5pHi.js.map} +1 -1
- package/dist/{delay-ttYmIqo7.cjs → delay-UhlOkp1Q.cjs} +2 -2
- package/dist/{delay-ttYmIqo7.cjs.map → delay-UhlOkp1Q.cjs.map} +1 -1
- package/dist/delay.cjs +1 -1
- package/dist/delay.js +1 -1
- package/dist/directives.cjs +1 -1
- package/dist/directives.js +4 -5
- package/dist/directives.js.map +1 -1
- package/dist/{divider-C3zQQjqq.js → divider-B-bxtxQ9.js} +3 -3
- package/dist/{divider-C3zQQjqq.js.map → divider-B-bxtxQ9.js.map} +1 -1
- package/dist/{divider-2AVp1yWB.cjs → divider-yLBrmrYU.cjs} +2 -2
- package/dist/{divider-2AVp1yWB.cjs.map → divider-yLBrmrYU.cjs.map} +1 -1
- package/dist/divider.cjs +1 -1
- package/dist/divider.js +1 -1
- package/dist/extra.cjs +1 -1
- package/dist/extra.js +1 -1
- package/dist/{flex-CfGGWirm.cjs → flex-CG8OOL02.cjs} +2 -2
- package/dist/{flex-CfGGWirm.cjs.map → flex-CG8OOL02.cjs.map} +1 -1
- package/dist/{flex-CfRUWQWK.js → flex-CofCUs7b.js} +4 -4
- package/dist/{flex-CfRUWQWK.js.map → flex-CofCUs7b.js.map} +1 -1
- package/dist/form-BqHD2BmW.cjs +14 -0
- package/dist/form-BqHD2BmW.cjs.map +1 -0
- package/dist/form-CbH5yVTc.js +161 -0
- package/dist/form-CbH5yVTc.js.map +1 -0
- package/dist/form.cjs +1 -1
- package/dist/form.js +1 -1
- package/dist/{icon-BLvikygg.js → icon-2u-dF77v.js} +3 -3
- package/dist/{icon-BLvikygg.js.map → icon-2u-dF77v.js.map} +1 -1
- package/dist/{icon-BfUZ5ZBV.cjs → icon-CqImPgUG.cjs} +2 -2
- package/dist/{icon-BfUZ5ZBV.cjs.map → icon-CqImPgUG.cjs.map} +1 -1
- package/dist/{icon-button-BefimCfp.cjs → icon-button-CZjaNotL.cjs} +2 -2
- package/dist/{icon-button-BefimCfp.cjs.map → icon-button-CZjaNotL.cjs.map} +1 -1
- package/dist/{icon-button-OidywZ1U.js → icon-button-xKDMAiJd.js} +3 -3
- package/dist/{icon-button-OidywZ1U.js.map → icon-button-xKDMAiJd.js.map} +1 -1
- package/dist/icons.cjs +1 -1
- package/dist/icons.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +128 -105
- package/dist/index.js.map +1 -1
- package/dist/input-BDXWcxNw.cjs +111 -0
- package/dist/input-BDXWcxNw.cjs.map +1 -0
- package/dist/input-fP8EqcLF.js +390 -0
- package/dist/input-fP8EqcLF.js.map +1 -0
- package/dist/input.cjs +1 -1
- package/dist/input.js +1 -1
- package/dist/layout.cjs +1 -1
- package/dist/layout.js +1 -1
- package/dist/{list-C78nnFIZ.cjs → list-C8pDC7As.cjs} +2 -2
- package/dist/{list-C78nnFIZ.cjs.map → list-C8pDC7As.cjs.map} +1 -1
- package/dist/{list-CQV0ecrY.js → list-O7kfL-NW.js} +2 -2
- package/dist/{list-CQV0ecrY.js.map → list-O7kfL-NW.js.map} +1 -1
- package/dist/list.cjs +1 -1
- package/dist/list.js +1 -1
- package/dist/{litElement.mixin-DGx3SrGX.cjs → litElement.mixin-Ct-snNwC.cjs} +2 -2
- package/dist/{litElement.mixin-DGx3SrGX.cjs.map → litElement.mixin-Ct-snNwC.cjs.map} +1 -1
- package/dist/{litElement.mixin-B1ZP2iG4.js → litElement.mixin-CtugwVVz.js} +2 -2
- package/dist/{litElement.mixin-B1ZP2iG4.js.map → litElement.mixin-CtugwVVz.js.map} +1 -1
- package/dist/{menu-15yMmtd2.js → menu-DoVBeCHb.js} +3 -3
- package/dist/{menu-15yMmtd2.js.map → menu-DoVBeCHb.js.map} +1 -1
- package/dist/{menu-DqLKbEXx.cjs → menu-bkGcaSru.cjs} +2 -2
- package/dist/{menu-DqLKbEXx.cjs.map → menu-bkGcaSru.cjs.map} +1 -1
- package/dist/menu.cjs +1 -1
- package/dist/menu.js +1 -1
- package/dist/nav-drawer.cjs +1 -1
- package/dist/nav-drawer.js +1 -1
- package/dist/notification.cjs +1 -1
- package/dist/notification.js +1 -1
- package/dist/{option-DleJMgj-.js → option-D_RxI1cV.js} +2 -2
- package/dist/{option-DleJMgj-.js.map → option-D_RxI1cV.js.map} +1 -1
- package/dist/{option-BaOmCXP8.cjs → option-DrizkeI1.cjs} +2 -2
- package/dist/{option-BaOmCXP8.cjs.map → option-DrizkeI1.cjs.map} +1 -1
- package/dist/option.cjs +1 -1
- package/dist/option.js +1 -1
- package/dist/{outlet-mNvq9oaA.cjs → outlet-BIwnmuNu.cjs} +2 -2
- package/dist/{outlet-mNvq9oaA.cjs.map → outlet-BIwnmuNu.cjs.map} +1 -1
- package/dist/{outlet-I1IE2wTK.js → outlet-U_CoKIxQ.js} +2 -2
- package/dist/{outlet-I1IE2wTK.js.map → outlet-U_CoKIxQ.js.map} +1 -1
- package/dist/{payment-card-form-Cm_-ul4G.cjs → payment-card-form-BPtQt3Xd.cjs} +2 -2
- package/dist/{payment-card-form-Cm_-ul4G.cjs.map → payment-card-form-BPtQt3Xd.cjs.map} +1 -1
- package/dist/{payment-card-form-DHmtfa_H.js → payment-card-form-CSboFL3Z.js} +3 -3
- package/dist/{payment-card-form-DHmtfa_H.js.map → payment-card-form-CSboFL3Z.js.map} +1 -1
- package/dist/{radio-group-CSKgiPxL.js → radio-group-BNyzzO-F.js} +2 -2
- package/dist/{radio-group-CSKgiPxL.js.map → radio-group-BNyzzO-F.js.map} +1 -1
- package/dist/{radio-group-RChAvIUM.cjs → radio-group-DiRAAiCy.cjs} +2 -2
- package/dist/{radio-group-RChAvIUM.cjs.map → radio-group-DiRAAiCy.cjs.map} +1 -1
- package/dist/radio-group.cjs +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/ripple-BumgqsDT.js +78 -0
- package/dist/ripple-BumgqsDT.js.map +1 -0
- package/dist/ripple-C2BHbhcS.cjs +16 -0
- package/dist/ripple-C2BHbhcS.cjs.map +1 -0
- package/dist/rxjs-utils.js +4 -4
- package/dist/schmancy-steps-container-3Odvvi2u.cjs +64 -0
- package/dist/schmancy-steps-container-3Odvvi2u.cjs.map +1 -0
- package/dist/schmancy-steps-container-Ke5dskhS.js +147 -0
- package/dist/schmancy-steps-container-Ke5dskhS.js.map +1 -0
- package/dist/select-BYI_HL-h.js +234 -0
- package/dist/select-BYI_HL-h.js.map +1 -0
- package/dist/select-DiFknGpF.cjs +57 -0
- package/dist/select-DiFknGpF.cjs.map +1 -0
- package/dist/select.cjs +1 -1
- package/dist/select.js +1 -1
- package/dist/selector-hook-B5oIBdcJ.cjs +2 -0
- package/dist/selector-hook-B5oIBdcJ.cjs.map +1 -0
- package/dist/selector-hook-BdsJkaE2.js +185 -0
- package/dist/selector-hook-BdsJkaE2.js.map +1 -0
- package/dist/{sheet-DcDDkPRG.js → sheet-9d1u9s1_.js} +12 -12
- package/dist/{sheet-DcDDkPRG.js.map → sheet-9d1u9s1_.js.map} +1 -1
- package/dist/{sheet-OQg2AgBP.cjs → sheet-BKvr585i.cjs} +2 -2
- package/dist/{sheet-OQg2AgBP.cjs.map → sheet-BKvr585i.cjs.map} +1 -1
- package/dist/sheet.cjs +1 -1
- package/dist/sheet.js +1 -1
- package/dist/{slider-njrfDqrk.js → slider-DAawYwTF.js} +3 -3
- package/dist/{slider-njrfDqrk.js.map → slider-DAawYwTF.js.map} +1 -1
- package/dist/{slider-rumGp8Bz.cjs → slider-bPjwDSDc.cjs} +2 -2
- package/dist/{slider-rumGp8Bz.cjs.map → slider-bPjwDSDc.cjs.map} +1 -1
- package/dist/slider.cjs +1 -1
- package/dist/slider.js +1 -1
- package/dist/{spinner-DVEN9TFJ.cjs → spinner-BgkHeWML.cjs} +4 -4
- package/dist/{spinner-DVEN9TFJ.cjs.map → spinner-BgkHeWML.cjs.map} +1 -1
- package/dist/{spinner-C3JUT7Lx.js → spinner-CTrfi93b.js} +11 -12
- package/dist/{spinner-C3JUT7Lx.js.map → spinner-CTrfi93b.js.map} +1 -1
- package/dist/steps.cjs +2 -0
- package/dist/steps.cjs.map +1 -0
- package/dist/steps.js +8 -0
- package/dist/steps.js.map +1 -0
- package/dist/store.cjs +2 -0
- package/dist/store.cjs.map +1 -0
- package/dist/store.js +22 -0
- package/dist/store.js.map +1 -0
- package/dist/{surface-BpQasVOW.js → surface-CjUAkHMv.js} +2 -2
- package/dist/{surface-BpQasVOW.js.map → surface-CjUAkHMv.js.map} +1 -1
- package/dist/{surface-CZayNjQ8.cjs → surface-QtNAwY0v.cjs} +2 -2
- package/dist/{surface-CZayNjQ8.cjs.map → surface-QtNAwY0v.cjs.map} +1 -1
- package/dist/surface.cjs +1 -1
- package/dist/surface.js +1 -1
- package/dist/table-CUgn9BYP.cjs +80 -0
- package/dist/table-CUgn9BYP.cjs.map +1 -0
- package/dist/table-k-u5jZrL.js +129 -0
- package/dist/table-k-u5jZrL.js.map +1 -0
- package/dist/table.cjs +1 -1
- package/dist/table.js +5 -1
- package/dist/{tabs-group-BWmuXV1M.cjs → tabs-group-B4ZCjn7j.cjs} +2 -2
- package/dist/{tabs-group-BWmuXV1M.cjs.map → tabs-group-B4ZCjn7j.cjs.map} +1 -1
- package/dist/{tabs-group-Dsupy-TK.js → tabs-group-BhHCB2nJ.js} +2 -2
- package/dist/{tabs-group-Dsupy-TK.js.map → tabs-group-BhHCB2nJ.js.map} +1 -1
- package/dist/tabs.cjs +1 -1
- package/dist/tabs.js +1 -1
- package/dist/tailwind.mixin-Bn3Brhz1.js +43 -0
- package/dist/{tailwind.mixin-C2MUeArS.js.map → tailwind.mixin-Bn3Brhz1.js.map} +1 -1
- package/dist/tailwind.mixin-DqqGTjD_.cjs +2 -0
- package/dist/{tailwind.mixin-UzdLTEsN.cjs.map → tailwind.mixin-DqqGTjD_.cjs.map} +1 -1
- package/dist/teleport.cjs +1 -1
- package/dist/{teleport.component-Cf9BZUyf.js → teleport.component-CCf1dH9g.js} +59 -59
- package/dist/{teleport.component-Cf9BZUyf.js.map → teleport.component-CCf1dH9g.js.map} +1 -1
- package/dist/{teleport.component-DElxiimP.cjs → teleport.component-n3DU71bR.cjs} +19 -19
- package/dist/{teleport.component-DElxiimP.cjs.map → teleport.component-n3DU71bR.cjs.map} +1 -1
- package/dist/teleport.js +1 -1
- package/dist/textarea-8T5kXo2A.cjs +42 -0
- package/dist/{textarea-DtP4CN8S.cjs.map → textarea-8T5kXo2A.cjs.map} +1 -1
- package/dist/{textarea-DZhAzd2-.js → textarea-CqkmSvJg.js} +8 -9
- package/dist/{textarea-DZhAzd2-.js.map → textarea-CqkmSvJg.js.map} +1 -1
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.js +1 -1
- package/dist/{theme-button-XUBpRyVd.cjs → theme-button-CZFLICY-.cjs} +2 -2
- package/dist/{theme-button-XUBpRyVd.cjs.map → theme-button-CZFLICY-.cjs.map} +1 -1
- package/dist/{theme-button-B7v53G35.js → theme-button-CyebufWg.js} +2 -2
- package/dist/{theme-button-B7v53G35.js.map → theme-button-CyebufWg.js.map} +1 -1
- package/dist/theme-button.cjs +1 -1
- package/dist/theme-button.js +1 -1
- package/dist/theme.cjs +1 -1
- package/dist/{theme.component-Df85q2pE.cjs → theme.component-DTaJ-jCs.cjs} +2 -2
- package/dist/{theme.component-Df85q2pE.cjs.map → theme.component-DTaJ-jCs.cjs.map} +1 -1
- package/dist/{theme.component-4tKB3U5D.js → theme.component-HyW-lfw_.js} +2 -2
- package/dist/{theme.component-4tKB3U5D.js.map → theme.component-HyW-lfw_.js.map} +1 -1
- package/dist/theme.js +1 -1
- package/dist/{timezone-FYjFkh4S.cjs → timezone-CgtDcgym.cjs} +2 -2
- package/dist/{timezone-FYjFkh4S.cjs.map → timezone-CgtDcgym.cjs.map} +1 -1
- package/dist/{timezone-C9zQrHBV.js → timezone-Cn0_OvVY.js} +3 -3
- package/dist/{timezone-C9zQrHBV.js.map → timezone-Cn0_OvVY.js.map} +1 -1
- package/dist/{tree-BEsQyzsP.js → tree-B0bZOfLC.js} +2 -2
- package/dist/{tree-BEsQyzsP.js.map → tree-B0bZOfLC.js.map} +1 -1
- package/dist/{tree-k_BipeY0.cjs → tree-Bg8L88Pd.cjs} +2 -2
- package/dist/{tree-k_BipeY0.cjs.map → tree-Bg8L88Pd.cjs.map} +1 -1
- package/dist/tree.cjs +1 -1
- package/dist/tree.js +1 -1
- package/dist/{typewriter-B3B8JBRl.cjs → typewriter-C-U4rB_m.cjs} +2 -2
- package/dist/{typewriter-B3B8JBRl.cjs.map → typewriter-C-U4rB_m.cjs.map} +1 -1
- package/dist/{typewriter-CjgsbmTc.js → typewriter-DB08jO4e.js} +11 -11
- package/dist/{typewriter-CjgsbmTc.js.map → typewriter-DB08jO4e.js.map} +1 -1
- package/dist/typewriter.cjs +1 -1
- package/dist/typewriter.js +1 -1
- package/dist/{typography-BzTRpIGt.js → typography-CdFf2sTC.js} +2 -2
- package/dist/{typography-BzTRpIGt.js.map → typography-CdFf2sTC.js.map} +1 -1
- package/dist/{typography-Cs7PQACq.cjs → typography-DvI9Wos_.cjs} +2 -2
- package/dist/{typography-Cs7PQACq.cjs.map → typography-DvI9Wos_.cjs.map} +1 -1
- package/dist/typography.cjs +1 -1
- package/dist/typography.js +1 -1
- package/package.json +1 -1
- package/types/src/form/form-v2.d.ts +72 -0
- package/types/src/form/index.d.ts +1 -0
- package/types/src/index.d.ts +2 -1
- package/types/src/input/index.d.ts +1 -0
- package/types/src/input/input-v2.d.ts +250 -0
- package/types/src/select/select.d.ts +10 -1
- package/types/src/steps/index.d.ts +3 -0
- package/types/src/steps/schmancy-step.d.ts +52 -0
- package/types/src/steps/schmancy-steps-container.d.ts +17 -0
- package/types/src/steps/steps.context.d.ts +12 -0
- package/types/src/store/action-creator.d.ts +8 -0
- package/types/src/store/clear.d.ts +1 -0
- package/types/src/store/context-collection.d.ts +74 -0
- package/types/src/store/context-create.d.ts +8 -0
- package/types/src/store/context-object.d.ts +69 -0
- package/types/src/store/filter-directive.d.ts +32 -0
- package/types/src/store/index.d.ts +8 -0
- package/types/src/store/selector-hook.d.ts +15 -0
- package/types/src/store/selectors.d.ts +50 -0
- package/types/src/store/storage-manager.d.ts +56 -0
- package/types/src/store/types.d.ts +84 -0
- package/types/src/table/index.d.ts +1 -0
- package/types/src/table/row.d.ts +19 -0
- package/types/src/table/table.d.ts +26 -4
- package/dist/autocomplete-BIJ9G0y1.cjs +0 -57
- package/dist/color-D8r6dpWm.cjs +0 -2
- package/dist/color-D8r6dpWm.cjs.map +0 -1
- package/dist/color-DrgmL7QT.js +0 -19
- package/dist/color-DrgmL7QT.js.map +0 -1
- package/dist/form-BTg8x5QO.js +0 -73
- package/dist/form-BTg8x5QO.js.map +0 -1
- package/dist/form-DPRTjp4Q.cjs +0 -8
- package/dist/form-DPRTjp4Q.cjs.map +0 -1
- package/dist/input-BNIa-xYu.js +0 -136
- package/dist/input-BNIa-xYu.js.map +0 -1
- package/dist/input-CqYkuOF4.cjs +0 -51
- package/dist/input-CqYkuOF4.cjs.map +0 -1
- package/dist/input-Dq3dT_7p.cjs +0 -98
- package/dist/input-Dq3dT_7p.cjs.map +0 -1
- package/dist/input-igN7Vis2.js +0 -205
- package/dist/input-igN7Vis2.js.map +0 -1
- package/dist/ripple-3indJ14o.js +0 -64
- package/dist/ripple-3indJ14o.js.map +0 -1
- package/dist/ripple-B_wT0zgD.cjs +0 -16
- package/dist/ripple-B_wT0zgD.cjs.map +0 -1
- package/dist/select-CHXdCR-t.js +0 -206
- package/dist/select-CHXdCR-t.js.map +0 -1
- package/dist/select-Gbo-xjwq.cjs +0 -56
- package/dist/select-Gbo-xjwq.cjs.map +0 -1
- package/dist/table-BzJFv5qf.cjs +0 -6
- package/dist/table-BzJFv5qf.cjs.map +0 -1
- package/dist/table-CWRqwAtQ.js +0 -21
- package/dist/table-CWRqwAtQ.js.map +0 -1
- package/dist/tailwind.mixin-C2MUeArS.js +0 -43
- package/dist/tailwind.mixin-UzdLTEsN.cjs +0 -2
- package/dist/textarea-DtP4CN8S.cjs +0 -42
- package/dist/v2.cjs +0 -2
- package/dist/v2.cjs.map +0 -1
- package/dist/v2.js +0 -5
- package/dist/v2.js.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const u=require("./provide-DSU87U5x.cjs"),p=require("./tailwind.mixin-
|
|
1
|
+
"use strict";const u=require("./provide-DSU87U5x.cjs"),p=require("./tailwind.mixin-DqqGTjD_.cjs"),c=require("lit"),t=require("lit/decorators.js"),d=require("lit/directives/class-map.js");var f=Object.defineProperty,y=Object.getOwnPropertyDescriptor,r=(i,s,h,o)=>{for(var n,e=o>1?void 0:o?y(s,h):s,a=i.length-1;a>=0;a--)(n=i[a])&&(e=(o?n(s,h,e):n(e))||e);return o&&e&&f(s,h,e),e};const l=u.n("surface");exports.SchmancySurface=class extends p.TailwindElement(c.css`
|
|
2
2
|
:host([fill='all']) {
|
|
3
3
|
height: 100%;
|
|
4
4
|
width: 100%;
|
|
@@ -17,4 +17,4 @@
|
|
|
17
17
|
<slot></slot>
|
|
18
18
|
</section>
|
|
19
19
|
`}},r([t.property({type:String,reflect:!0})],exports.SchmancySurface.prototype,"fill",2),r([t.property()],exports.SchmancySurface.prototype,"rounded",2),r([u.e({context:l}),t.property()],exports.SchmancySurface.prototype,"type",2),r([t.property({type:Number,reflect:!0})],exports.SchmancySurface.prototype,"elevation",2),exports.SchmancySurface=r([t.customElement("schmancy-surface")],exports.SchmancySurface),exports.SchmancySurfaceTypeContext=l;
|
|
20
|
-
//# sourceMappingURL=surface-
|
|
20
|
+
//# sourceMappingURL=surface-QtNAwY0v.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"surface-
|
|
1
|
+
{"version":3,"file":"surface-QtNAwY0v.cjs","sources":["../src/surface/surface.ts"],"sourcesContent":["import { createContext, provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/tailwind.mixin'\nimport { TSurfaceColor } from '@schmancy/types'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js' // Import classMap\n\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n\nexport type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto'\n/**\n * `<schmancy-surface>` component\n *\n * This component renders a styled container that adapts its dimensions based on the `fill` property.\n * It supports various rounding options, elevation levels, and applies background and text color classes\n * based on the specified surface variant. Additionally, when the `scroller` property is true, the component\n * enables internal scrolling by applying overflow and scroll-behavior styles.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child content.\n *\n * @example\n * <schmancy-surface fill=\"all\" rounded=\"all\" elevation=\"3\" type=\"surfaceBright\" scroller>\n * <p>Your scrollable content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends TailwindElement(css`\n\t:host([fill='all']) {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t:host([fill='width']) {\n\t\twidth: 100%;\n\t}\n\t:host([fill='height']) {\n\t\theight: 100%;\n\t}\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t/**\n\t * Fill the width and/or height of the parent container.\n\t * Options: 'all', 'width', 'height', 'auto'.\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true })\n\tfill: 'all' | 'width' | 'height' | 'auto' = 'auto'\n\n\t/**\n\t * Specifies the rounding style of the component's corners.\n\t * Options: 'none', 'top', 'left', 'right', 'bottom', 'all'.\n\t * @default 'none'\n\t */\n\t@property()\n\trounded: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' = 'none'\n\n\t/**\n\t * Specifies the surface type for styling.\n\t * Provided to descendant components via context.\n\t * Options: 'surface', 'surfaceDim', 'surfaceBright', 'containerLowest',\n\t * 'containerLow', 'container', 'containerHigh', 'containerHighest'.\n\t * @default 'surface'\n\t */\n\t@provide({ context: SchmancySurfaceTypeContext })\n\t@property()\n\ttype: TSurfaceColor = 'surface'\n\n\t/**\n\t * Defines the elevation level (shadow depth) of the surface.\n\t * Valid values: 0, 1, 2, 3, 4, 5.\n\t * @default 0\n\t */\n\t@property({ type: Number, reflect: true })\n\televation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\tprotected render(): unknown {\n\t\tconst classes = {\n\t\t\trelative: true,\n\t\t\t'inset-0': true,\n\t\t\tblock: true,\n\t\t\t'box-border': true,\n\t\t\t// Rounding classes\n\t\t\t'rounded-none': this.rounded === 'none',\n\t\t\t'rounded-t-[8px]': this.rounded === 'top',\n\t\t\t'rounded-l-[8px]': this.rounded === 'left',\n\t\t\t'rounded-r-[8px]': this.rounded === 'right',\n\t\t\t'rounded-b-[8px]': this.rounded === 'bottom',\n\t\t\t'rounded-[8px]': this.rounded === 'all',\n\t\t\t// Fill classes\n\t\t\t'w-full': this.fill === 'width' || this.fill === 'all',\n\t\t\t'h-full': this.fill === 'height' || this.fill === 'all',\n\t\t\t// Elevation shadow classes\n\t\t\t'shadow-xs': this.elevation === 1,\n\t\t\t'shadow-sm': this.elevation === 2,\n\t\t\t'shadow-md': this.elevation === 3,\n\t\t\t'shadow-lg': this.elevation === 4,\n\t\t\t'shadow-xl': this.elevation === 5,\n\t\t\t// Text color based on the surface variant for optimal readability\n\t\t\t'text-surface-on':\n\t\t\t\tthis.type === 'surface' ||\n\t\t\t\tthis.type === 'surfaceDim' ||\n\t\t\t\tthis.type === 'surfaceBright' ||\n\t\t\t\tthis.type === 'containerLowest' ||\n\t\t\t\tthis.type === 'containerLow' ||\n\t\t\t\tthis.type === 'container' ||\n\t\t\t\tthis.type === 'containerHigh' ||\n\t\t\t\tthis.type === 'containerHighest',\n\t\t\t// Background color classes based on the surface variant\n\t\t\t'bg-surface-default': this.type === 'surface',\n\t\t\t'bg-surface-dim': this.type === 'surfaceDim',\n\t\t\t'bg-surface-bright': this.type === 'surfaceBright',\n\t\t\t'bg-surface-lowest': this.type === 'containerLowest',\n\t\t\t'bg-surface-low': this.type === 'containerLow',\n\t\t\t'bg-surface-container': this.type === 'container',\n\t\t\t'bg-surface-high': this.type === 'containerHigh',\n\t\t\t'bg-surface-highest': this.type === 'containerHighest',\n\t\t}\n\n\t\treturn html`\n\t\t\t<section class=${classMap(classes)}>\n\t\t\t\t<slot></slot>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-surface': SchmancySurface\n\t}\n}\n"],"names":["SchmancySurfaceTypeContext","createContext","SchmancySurface","TailwindElement","css","super","arguments","this","fill","rounded","type","elevation","render","classes","relative","block","html","classMap","__decorateClass","property","String","reflect","prototype","provide","context","Number","customElement"],"mappings":"2XAOa,MAAAA,EAA6BC,IAA6B,WAoB1DC,QAAAA,gBAAN,cAA8BC,EAAAA,gBAAgBC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAA9C,CAAA,CAAA,aAAAC,CAAAA,MAAAA,GAAAC,SAqBsCC,EAAAA,KAAAC,KAAA,OAQoBD,KAAAE,QAAA,OAW1CF,KAAAG,KAAA,UAQaH,KAAAI,UAAA,CAAA,CAEzB,QAAAC,CACT,MAAMC,EAAU,CACfC,SAAAA,GACA,UAAW,GACXC,MAAO,GACP,gBAEA,eAAgBR,KAAKE,UAAY,OACjC,kBAAmBF,KAAKE,UAAY,MACpC,kBAAmBF,KAAKE,UAAY,OACpC,kBAAmBF,KAAKE,UAAY,QACpC,kBAAmBF,KAAKE,UAAY,SACpC,gBAAiBF,KAAKE,UAAY,MAElC,SAAUF,KAAKC,OAAS,SAAWD,KAAKC,OAAS,MACjD,SAAUD,KAAKC,OAAS,UAAYD,KAAKC,OAAS,MAElD,YAAaD,KAAKI,YAAc,EAChC,YAAaJ,KAAKI,YAAc,EAChC,YAAaJ,KAAKI,YAAc,EAChC,YAAaJ,KAAKI,YAAc,EAChC,YAAaJ,KAAKI,YAAc,EAEhC,kBACCJ,KAAKG,OAAS,WACdH,KAAKG,OAAS,cACdH,KAAKG,OAAS,iBACdH,KAAKG,OAAS,mBACdH,KAAKG,OAAS,gBACdH,KAAKG,OAAS,aACdH,KAAKG,OAAS,iBACdH,KAAKG,OAAS,mBAEf,qBAAsBH,KAAKG,OAAS,UACpC,iBAAkBH,KAAKG,OAAS,aAChC,oBAAqBH,KAAKG,OAAS,gBACnC,oBAAqBH,KAAKG,OAAS,kBACnC,iBAAkBH,KAAKG,OAAS,eAChC,uBAAwBH,KAAKG,OAAS,YACtC,kBAAmBH,KAAKG,OAAS,gBACjC,qBAAsBH,KAAKG,OAAS,kBAG9B,EAAA,OAAAM,EAAAA;AAAAA,oBACWC,EAAAA,SAASJ,CAAAA,CAAAA;AAAAA;AAAAA;AAAAA,GAAQ,CAAA,EAzEpCK,EAAA,CADCC,EAAAA,SAAS,CAAET,KAAMU,OAAQC,QAAAA,EApBdnB,CAAAA,CAAAA,EAAAA,wBAqBZoB,UAAA,OAAA,CAAA,EAQAJ,EAAA,CADCC,EAASA,SAAAA,CAAAA,EA5BEjB,wBA6BZoB,UAAA,UAAA,CAWAJ,EAAAA,EAAA,CAFCK,IAAQ,CAAEC,QAASxB,CAAAA,CAAAA,EACnBmB,EAASA,SAAAA,CAAAA,EAvCEjB,wBAwCZoB,UAAA,OAAA,CAQAJ,EAAAA,EAAA,CADCC,EAAAA,SAAS,CAAET,KAAMe,OAAQJ,QAAS,EAAA,CAAA,CAAA,EA/CvBnB,wBAgDZoB,UAAA,YAAA,CAhDYpB,EAAAA,QAANA,gBAAAgB,EAAA,CADNQ,EAAAA,cAAc,kBAAA,CAAA,EACFxB"}
|
package/dist/surface.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./surface-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./surface-QtNAwY0v.cjs");Object.defineProperty(exports,"SchmancySurface",{enumerable:!0,get:()=>e.SchmancySurface}),exports.SchmancySurfaceTypeContext=e.SchmancySurfaceTypeContext;
|
|
2
2
|
//# sourceMappingURL=surface.cjs.map
|
package/dist/surface.js
CHANGED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
"use strict";const y=require("./litElement.mixin-Ct-snNwC.cjs"),i=require("lit"),s=require("lit/decorators.js"),m=require("lit/directives/repeat.js");var p=Object.defineProperty,d=Object.getOwnPropertyDescriptor,h=(t,e,a,r)=>{for(var n,c=r>1?void 0:r?d(e,a):e,o=t.length-1;o>=0;o--)(n=t[o])&&(c=(r?n(e,a,c):n(c))||c);return r&&c&&p(e,a,c),c};exports.SchmancyTableRow=class extends y.$LitElement(i.css`
|
|
2
|
+
:host {
|
|
3
|
+
display: block;
|
|
4
|
+
z-index: -1;
|
|
5
|
+
}
|
|
6
|
+
`){constructor(){super(...arguments),this.columns=[],this.cols="1fr"}render(){return i.html`
|
|
7
|
+
<schmancy-list-item
|
|
8
|
+
@click=${()=>{this.dispatchEvent(new CustomEvent("row-click",{detail:this.item,bubbles:!0,composed:!0}))}}
|
|
9
|
+
class="w-full"
|
|
10
|
+
>
|
|
11
|
+
<schmancy-grid .cols=${this.cols} align="center" gap="md">
|
|
12
|
+
${this.columns.map(t=>{var e;return i.html`
|
|
13
|
+
<div class="overflow-hidden text-ellipsis">
|
|
14
|
+
<schmancy-typography
|
|
15
|
+
align="${t.align||"left"}"
|
|
16
|
+
maxLines="2"
|
|
17
|
+
weight="${t.weight||"normal"}"
|
|
18
|
+
>
|
|
19
|
+
${t.render?t.render(this.item):t.key?(e=this.item)==null?void 0:e[t.key]:""}
|
|
20
|
+
</schmancy-typography>
|
|
21
|
+
</div>
|
|
22
|
+
`})}
|
|
23
|
+
<sch-flex
|
|
24
|
+
class="min-w-fit block"
|
|
25
|
+
flow="row-dense"
|
|
26
|
+
.hidden=${Array.isArray(this.actions)&&this.actions.length===0}
|
|
27
|
+
>
|
|
28
|
+
${m.repeat(this.actions??[],({name:t})=>t,({name:t,action:e})=>i.html`
|
|
29
|
+
<schmancy-icon-button
|
|
30
|
+
@click=${a=>{a.stopPropagation(),e(this.item)}}
|
|
31
|
+
>
|
|
32
|
+
${t}
|
|
33
|
+
</schmancy-icon-button>
|
|
34
|
+
`)}
|
|
35
|
+
</sch-flex>
|
|
36
|
+
<!-- <schmancy-menu .hidden=${Array.isArray(this.actions)&&this.actions.length===0}>
|
|
37
|
+
${m.repeat(this.actions??[],({name:t})=>t,({name:t,action:e})=>i.html`
|
|
38
|
+
<schmancy-menu-item
|
|
39
|
+
class="z-[10000]"
|
|
40
|
+
@click=${a=>{a.stopPropagation(),e(this.item)}}
|
|
41
|
+
>
|
|
42
|
+
${t}
|
|
43
|
+
</schmancy-menu-item>
|
|
44
|
+
`)}
|
|
45
|
+
</schmancy-menu> -->
|
|
46
|
+
</schmancy-grid>
|
|
47
|
+
</schmancy-list-item>
|
|
48
|
+
`}},h([s.property({type:Array,attribute:!1})],exports.SchmancyTableRow.prototype,"columns",2),h([s.property({type:Object,attribute:!1})],exports.SchmancyTableRow.prototype,"item",2),h([s.property({type:String})],exports.SchmancyTableRow.prototype,"cols",2),h([s.property({type:Array})],exports.SchmancyTableRow.prototype,"actions",2),exports.SchmancyTableRow=h([s.customElement("schmancy-table-row")],exports.SchmancyTableRow);var u=Object.defineProperty,b=Object.getOwnPropertyDescriptor,l=(t,e,a,r)=>{for(var n,c=r>1?void 0:r?b(e,a):e,o=t.length-1;o>=0;o--)(n=t[o])&&(c=(r?n(e,a,c):n(c))||c);return r&&c&&u(e,a,c),c};exports.SchmancyDataTable=class extends y.$LitElement(){constructor(){super(...arguments),this.columns=[],this.data=[],this.keyField="id",this.cols="1fr",this.actions=[]}handleRowEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e.detail,bubbles:!0,composed:!0}))}render(){return i.html`
|
|
49
|
+
<schmancy-surface-v2 fill="all" type="container" rounded="all" elevation="2">
|
|
50
|
+
<schmancy-grid class="h-full w-full" cols="1fr" rows="auto 1fr">
|
|
51
|
+
<schmancy-surface-v2 rounded="top" elevation="1" type="containerHighest" class="sticky top-0 z-10">
|
|
52
|
+
<schmancy-grid align="center" class="px-4 py-3" .cols=${this.cols} gap="md" rows="1fr">
|
|
53
|
+
${this.columns.map(t=>i.html`
|
|
54
|
+
<schmancy-typography align=${t.align??"left"} weight=${t.weight??"bold"}>
|
|
55
|
+
${t.name}
|
|
56
|
+
</schmancy-typography>
|
|
57
|
+
`)}
|
|
58
|
+
</schmancy-grid>
|
|
59
|
+
</schmancy-surface-v2>
|
|
60
|
+
|
|
61
|
+
<lit-virtualizer
|
|
62
|
+
scroller
|
|
63
|
+
class="w-full h-full relative overflow-auto"
|
|
64
|
+
.items=${this.data}
|
|
65
|
+
.renderItem=${(t,e)=>i.html`
|
|
66
|
+
<schmancy-table-row
|
|
67
|
+
.actions=${this.actions}
|
|
68
|
+
class="w-full border-b-1 border-solid border-outlineVariant"
|
|
69
|
+
.columns=${this.columns}
|
|
70
|
+
.item=${t}
|
|
71
|
+
cols=${this.cols}
|
|
72
|
+
@edit=${a=>{a.detail.item=t,a.detail.index=e,this.handleRowEvent("edit",a)}}
|
|
73
|
+
@delete=${a=>{a.detail.item=t,a.detail.index=e,this.handleRowEvent("delete",a)}}
|
|
74
|
+
></schmancy-table-row>
|
|
75
|
+
`}
|
|
76
|
+
></lit-virtualizer>
|
|
77
|
+
</schmancy-grid>
|
|
78
|
+
</schmancy-surface-v2>
|
|
79
|
+
`}},l([s.property({type:Array,attribute:!1})],exports.SchmancyDataTable.prototype,"columns",2),l([s.property({type:Array,attribute:!1})],exports.SchmancyDataTable.prototype,"data",2),l([s.property({type:String})],exports.SchmancyDataTable.prototype,"keyField",2),l([s.property({type:String})],exports.SchmancyDataTable.prototype,"cols",2),l([s.property({type:Array})],exports.SchmancyDataTable.prototype,"actions",2),exports.SchmancyDataTable=l([s.customElement("schmancy-table-v2")],exports.SchmancyDataTable);
|
|
80
|
+
//# sourceMappingURL=table-CUgn9BYP.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table-CUgn9BYP.cjs","sources":["../src/table/row.ts","../src/table/table.ts"],"sourcesContent":["import { $LitElement } from '@mixins/litElement.mixin'\nimport { css, html, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { TableColumn } from './table' //Import TableColumn interface.\n\n@customElement('schmancy-table-row')\nexport class SchmancyTableRow extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tz-index: -1;\n\t}\n`) {\n\t@property({ type: Array, attribute: false })\n\tcolumns: TableColumn[] = []\n\n\t@property({ type: Object, attribute: false }) //Important to use object for complex properties\n\titem: any\n\n\t@property({ type: String })\n\tcols: string = '1fr'\n\n\t@property({\n\t\ttype: Array,\n\t})\n\tactions: Array<{ name: string; action: (item: any) => void }> | undefined\n\trender(): TemplateResult {\n\t\treturn html`\n\t\t\t<schmancy-list-item\n\t\t\t\t@click=${() => {\n\t\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\t\tnew CustomEvent('row-click', {\n\t\t\t\t\t\t\tdetail: this.item,\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\t}),\n\t\t\t\t\t)\n\t\t\t\t}}\n\t\t\t\tclass=\"w-full\"\n\t\t\t>\n\t\t\t\t<schmancy-grid .cols=${this.cols} align=\"center\" gap=\"md\">\n\t\t\t\t\t${this.columns.map(\n\t\t\t\t\t\tcolumn => html`\n\t\t\t\t\t\t\t<div class=\"overflow-hidden text-ellipsis\">\n\t\t\t\t\t\t\t\t<schmancy-typography\n\t\t\t\t\t\t\t\t\talign=\"${column.align || 'left'}\"\n\t\t\t\t\t\t\t\t\tmaxLines=\"2\"\n\t\t\t\t\t\t\t\t\tweight=\"${column.weight || 'normal'}\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t${column.render ? column.render(this.item) : column.key ? this.item?.[column.key] : ''}\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`,\n\t\t\t\t\t)}\n\t\t\t\t\t<sch-flex\n\t\t\t\t\t\tclass=\"min-w-fit block\"\n\t\t\t\t\t\tflow=\"row-dense\"\n\t\t\t\t\t\t.hidden=${Array.isArray(this.actions) && this.actions.length === 0}\n\t\t\t\t\t>\n\t\t\t\t\t\t${repeat(\n\t\t\t\t\t\t\tthis.actions ?? [],\n\t\t\t\t\t\t\t({ name }) => name,\n\t\t\t\t\t\t\t({ name, action }) => html`\n\t\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\t\t\taction(this.item)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t${name}\n\t\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</sch-flex>\n\t\t\t\t\t<!-- <schmancy-menu .hidden=${Array.isArray(this.actions) && this.actions.length === 0}>\n\t\t\t\t\t\t${repeat(\n\t\t\t\t\t\tthis.actions ?? [],\n\t\t\t\t\t\t({ name }) => name,\n\t\t\t\t\t\t({ name, action }) => html`\n\t\t\t\t\t\t\t<schmancy-menu-item\n\t\t\t\t\t\t\t\tclass=\"z-[10000]\"\n\t\t\t\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\t\taction(this.item)\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t${name}\n\t\t\t\t\t\t\t</schmancy-menu-item>\n\t\t\t\t\t\t`,\n\t\t\t\t\t)}\n\t\t\t\t\t</schmancy-menu> -->\n\t\t\t\t</schmancy-grid>\n\t\t\t</schmancy-list-item>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-table-row': SchmancyTableRow\n\t}\n}\n","import { $LitElement } from '@mixins/litElement.mixin'\nimport { html, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport './row' // Import the schmancy-table-row component\n\n// Define a generic TableColumn interface.\n// The `key` is now a key of T, and the render function accepts T.\nexport interface TableColumn<T extends Record<string, any> = any> {\n\tname: string\n\tkey?: keyof T // Key to access the property on the data object.\n\talign?: 'left' | 'right' | 'center'\n\tweight?: 'normal' | 'bold'\n\trender?: (item: T) => TemplateResult | string | number // Custom render function for complex content\n}\n\n// Define an event detail interface for row events.\nexport interface RowEventDetail<T> {\n\titem: T\n\tindex: number\n}\n\n@customElement('schmancy-table-v2')\nexport class SchmancyDataTable<T extends Record<string, any> = any> extends $LitElement() {\n\t@property({ type: Array, attribute: false })\n\tcolumns: TableColumn<T>[] = []\n\n\t@property({ type: Array, attribute: false })\n\tdata: T[] = []\n\n\t// The keyField is now of type keyof T. You may need to adjust the default if needed.\n\t@property({ type: String })\n\tkeyField: keyof T = 'id' as keyof T\n\n\t@property({ type: String })\n\tcols: string = '1fr'\n\n\t@property({ type: Array }) actions: Array<{ name: string; action: (item: T) => void }> = []\n\n\t// Helper to handle row events.\n\tprivate handleRowEvent(eventName: 'row-click' | 'edit' | 'delete', e: CustomEvent<RowEventDetail<T>>) {\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<RowEventDetail<T>>(eventName, {\n\t\t\t\tdetail: e.detail,\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\trender(): TemplateResult {\n\t\treturn html`\n\t\t\t<schmancy-surface-v2 fill=\"all\" type=\"container\" rounded=\"all\" elevation=\"2\">\n\t\t\t\t<schmancy-grid class=\"h-full w-full\" cols=\"1fr\" rows=\"auto 1fr\">\n\t\t\t\t\t<schmancy-surface-v2 rounded=\"top\" elevation=\"1\" type=\"containerHighest\" class=\"sticky top-0 z-10\">\n\t\t\t\t\t\t<schmancy-grid align=\"center\" class=\"px-4 py-3\" .cols=${this.cols} gap=\"md\" rows=\"1fr\">\n\t\t\t\t\t\t\t${this.columns.map(\n\t\t\t\t\t\t\t\tcolumn => html`\n\t\t\t\t\t\t\t\t\t<schmancy-typography align=${column.align ?? 'left'} weight=${column.weight ?? 'bold'}>\n\t\t\t\t\t\t\t\t\t\t${column.name}\n\t\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</schmancy-grid>\n\t\t\t\t\t</schmancy-surface-v2>\n\n\t\t\t\t\t<lit-virtualizer\n\t\t\t\t\t\tscroller\n\t\t\t\t\t\tclass=\"w-full h-full relative overflow-auto\"\n\t\t\t\t\t\t.items=${this.data}\n\t\t\t\t\t\t.renderItem=${(item: T, index: number) =>\n\t\t\t\t\t\t\thtml`\n\t\t\t\t\t\t\t\t<schmancy-table-row\n\t\t\t\t\t\t\t\t\t.actions=${this.actions}\n\t\t\t\t\t\t\t\t\tclass=\"w-full border-b-1 border-solid border-outlineVariant\"\n\t\t\t\t\t\t\t\t\t.columns=${this.columns}\n\t\t\t\t\t\t\t\t\t.item=${item}\n\t\t\t\t\t\t\t\t\tcols=${this.cols}\n\t\t\t\t\t\t\t\t\t@edit=${(e: CustomEvent<RowEventDetail<T>>) => {\n\t\t\t\t\t\t\t\t\t\te.detail.item = item\n\t\t\t\t\t\t\t\t\t\te.detail.index = index\n\t\t\t\t\t\t\t\t\t\tthis.handleRowEvent('edit', e)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t@delete=${(e: CustomEvent<RowEventDetail<T>>) => {\n\t\t\t\t\t\t\t\t\t\te.detail.item = item\n\t\t\t\t\t\t\t\t\t\te.detail.index = index\n\t\t\t\t\t\t\t\t\t\tthis.handleRowEvent('delete', e)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t></schmancy-table-row>\n\t\t\t\t\t\t\t` as TemplateResult}\n\t\t\t\t\t></lit-virtualizer>\n\t\t\t\t</schmancy-grid>\n\t\t\t</schmancy-surface-v2>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-table-v2': SchmancyDataTable\n\t}\n}\n"],"names":["SchmancyTableRow","$LitElement","css","super","arguments","this","columns","cols","html","dispatchEvent","CustomEvent","detail","item","bubbles","composed","map","column","align","weight","render","key","Array","isArray","actions","length","repeat","name","action","e","stopPropagation","__decorateClass","property","type","attribute","prototype","Object","String","customElement","SchmancyDataTable","constructor","data","keyField","eventName","index","handleRowEvent"],"mappings":"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"}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { $ as d } from "./litElement.mixin-CtugwVVz.js";
|
|
2
|
+
import { css as g, html as l } from "lit";
|
|
3
|
+
import { property as c, customElement as u } from "lit/decorators.js";
|
|
4
|
+
import { repeat as p } from "lit/directives/repeat.js";
|
|
5
|
+
var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, y = (t, e, s, i) => {
|
|
6
|
+
for (var o, a = i > 1 ? void 0 : i ? b(e, s) : e, r = t.length - 1; r >= 0; r--) (o = t[r]) && (a = (i ? o(e, s, a) : o(a)) || a);
|
|
7
|
+
return i && a && f(e, s, a), a;
|
|
8
|
+
};
|
|
9
|
+
let h = class extends d(g`
|
|
10
|
+
:host {
|
|
11
|
+
display: block;
|
|
12
|
+
z-index: -1;
|
|
13
|
+
}
|
|
14
|
+
`) {
|
|
15
|
+
constructor() {
|
|
16
|
+
super(...arguments), this.columns = [], this.cols = "1fr";
|
|
17
|
+
}
|
|
18
|
+
render() {
|
|
19
|
+
return l`
|
|
20
|
+
<schmancy-list-item
|
|
21
|
+
@click=${() => {
|
|
22
|
+
this.dispatchEvent(new CustomEvent("row-click", { detail: this.item, bubbles: !0, composed: !0 }));
|
|
23
|
+
}}
|
|
24
|
+
class="w-full"
|
|
25
|
+
>
|
|
26
|
+
<schmancy-grid .cols=${this.cols} align="center" gap="md">
|
|
27
|
+
${this.columns.map((t) => {
|
|
28
|
+
var e;
|
|
29
|
+
return l`
|
|
30
|
+
<div class="overflow-hidden text-ellipsis">
|
|
31
|
+
<schmancy-typography
|
|
32
|
+
align="${t.align || "left"}"
|
|
33
|
+
maxLines="2"
|
|
34
|
+
weight="${t.weight || "normal"}"
|
|
35
|
+
>
|
|
36
|
+
${t.render ? t.render(this.item) : t.key ? (e = this.item) == null ? void 0 : e[t.key] : ""}
|
|
37
|
+
</schmancy-typography>
|
|
38
|
+
</div>
|
|
39
|
+
`;
|
|
40
|
+
})}
|
|
41
|
+
<sch-flex
|
|
42
|
+
class="min-w-fit block"
|
|
43
|
+
flow="row-dense"
|
|
44
|
+
.hidden=${Array.isArray(this.actions) && this.actions.length === 0}
|
|
45
|
+
>
|
|
46
|
+
${p(this.actions ?? [], ({ name: t }) => t, ({ name: t, action: e }) => l`
|
|
47
|
+
<schmancy-icon-button
|
|
48
|
+
@click=${(s) => {
|
|
49
|
+
s.stopPropagation(), e(this.item);
|
|
50
|
+
}}
|
|
51
|
+
>
|
|
52
|
+
${t}
|
|
53
|
+
</schmancy-icon-button>
|
|
54
|
+
`)}
|
|
55
|
+
</sch-flex>
|
|
56
|
+
<!-- <schmancy-menu .hidden=${Array.isArray(this.actions) && this.actions.length === 0}>
|
|
57
|
+
${p(this.actions ?? [], ({ name: t }) => t, ({ name: t, action: e }) => l`
|
|
58
|
+
<schmancy-menu-item
|
|
59
|
+
class="z-[10000]"
|
|
60
|
+
@click=${(s) => {
|
|
61
|
+
s.stopPropagation(), e(this.item);
|
|
62
|
+
}}
|
|
63
|
+
>
|
|
64
|
+
${t}
|
|
65
|
+
</schmancy-menu-item>
|
|
66
|
+
`)}
|
|
67
|
+
</schmancy-menu> -->
|
|
68
|
+
</schmancy-grid>
|
|
69
|
+
</schmancy-list-item>
|
|
70
|
+
`;
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
y([c({ type: Array, attribute: !1 })], h.prototype, "columns", 2), y([c({ type: Object, attribute: !1 })], h.prototype, "item", 2), y([c({ type: String })], h.prototype, "cols", 2), y([c({ type: Array })], h.prototype, "actions", 2), h = y([u("schmancy-table-row")], h);
|
|
74
|
+
var $ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, m = (t, e, s, i) => {
|
|
75
|
+
for (var o, a = i > 1 ? void 0 : i ? v(e, s) : e, r = t.length - 1; r >= 0; r--) (o = t[r]) && (a = (i ? o(e, s, a) : o(a)) || a);
|
|
76
|
+
return i && a && $(e, s, a), a;
|
|
77
|
+
};
|
|
78
|
+
let n = class extends d() {
|
|
79
|
+
constructor() {
|
|
80
|
+
super(...arguments), this.columns = [], this.data = [], this.keyField = "id", this.cols = "1fr", this.actions = [];
|
|
81
|
+
}
|
|
82
|
+
handleRowEvent(t, e) {
|
|
83
|
+
this.dispatchEvent(new CustomEvent(t, { detail: e.detail, bubbles: !0, composed: !0 }));
|
|
84
|
+
}
|
|
85
|
+
render() {
|
|
86
|
+
return l`
|
|
87
|
+
<schmancy-surface-v2 fill="all" type="container" rounded="all" elevation="2">
|
|
88
|
+
<schmancy-grid class="h-full w-full" cols="1fr" rows="auto 1fr">
|
|
89
|
+
<schmancy-surface-v2 rounded="top" elevation="1" type="containerHighest" class="sticky top-0 z-10">
|
|
90
|
+
<schmancy-grid align="center" class="px-4 py-3" .cols=${this.cols} gap="md" rows="1fr">
|
|
91
|
+
${this.columns.map((t) => l`
|
|
92
|
+
<schmancy-typography align=${t.align ?? "left"} weight=${t.weight ?? "bold"}>
|
|
93
|
+
${t.name}
|
|
94
|
+
</schmancy-typography>
|
|
95
|
+
`)}
|
|
96
|
+
</schmancy-grid>
|
|
97
|
+
</schmancy-surface-v2>
|
|
98
|
+
|
|
99
|
+
<lit-virtualizer
|
|
100
|
+
scroller
|
|
101
|
+
class="w-full h-full relative overflow-auto"
|
|
102
|
+
.items=${this.data}
|
|
103
|
+
.renderItem=${(t, e) => l`
|
|
104
|
+
<schmancy-table-row
|
|
105
|
+
.actions=${this.actions}
|
|
106
|
+
class="w-full border-b-1 border-solid border-outlineVariant"
|
|
107
|
+
.columns=${this.columns}
|
|
108
|
+
.item=${t}
|
|
109
|
+
cols=${this.cols}
|
|
110
|
+
@edit=${(s) => {
|
|
111
|
+
s.detail.item = t, s.detail.index = e, this.handleRowEvent("edit", s);
|
|
112
|
+
}}
|
|
113
|
+
@delete=${(s) => {
|
|
114
|
+
s.detail.item = t, s.detail.index = e, this.handleRowEvent("delete", s);
|
|
115
|
+
}}
|
|
116
|
+
></schmancy-table-row>
|
|
117
|
+
`}
|
|
118
|
+
></lit-virtualizer>
|
|
119
|
+
</schmancy-grid>
|
|
120
|
+
</schmancy-surface-v2>
|
|
121
|
+
`;
|
|
122
|
+
}
|
|
123
|
+
};
|
|
124
|
+
m([c({ type: Array, attribute: !1 })], n.prototype, "columns", 2), m([c({ type: Array, attribute: !1 })], n.prototype, "data", 2), m([c({ type: String })], n.prototype, "keyField", 2), m([c({ type: String })], n.prototype, "cols", 2), m([c({ type: Array })], n.prototype, "actions", 2), n = m([u("schmancy-table-v2")], n);
|
|
125
|
+
export {
|
|
126
|
+
h as S,
|
|
127
|
+
n as a
|
|
128
|
+
};
|
|
129
|
+
//# sourceMappingURL=table-k-u5jZrL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table-k-u5jZrL.js","sources":["../src/table/row.ts","../src/table/table.ts"],"sourcesContent":["import { $LitElement } from '@mixins/litElement.mixin'\nimport { css, html, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { TableColumn } from './table' //Import TableColumn interface.\n\n@customElement('schmancy-table-row')\nexport class SchmancyTableRow extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tz-index: -1;\n\t}\n`) {\n\t@property({ type: Array, attribute: false })\n\tcolumns: TableColumn[] = []\n\n\t@property({ type: Object, attribute: false }) //Important to use object for complex properties\n\titem: any\n\n\t@property({ type: String })\n\tcols: string = '1fr'\n\n\t@property({\n\t\ttype: Array,\n\t})\n\tactions: Array<{ name: string; action: (item: any) => void }> | undefined\n\trender(): TemplateResult {\n\t\treturn html`\n\t\t\t<schmancy-list-item\n\t\t\t\t@click=${() => {\n\t\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\t\tnew CustomEvent('row-click', {\n\t\t\t\t\t\t\tdetail: this.item,\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\t}),\n\t\t\t\t\t)\n\t\t\t\t}}\n\t\t\t\tclass=\"w-full\"\n\t\t\t>\n\t\t\t\t<schmancy-grid .cols=${this.cols} align=\"center\" gap=\"md\">\n\t\t\t\t\t${this.columns.map(\n\t\t\t\t\t\tcolumn => html`\n\t\t\t\t\t\t\t<div class=\"overflow-hidden text-ellipsis\">\n\t\t\t\t\t\t\t\t<schmancy-typography\n\t\t\t\t\t\t\t\t\talign=\"${column.align || 'left'}\"\n\t\t\t\t\t\t\t\t\tmaxLines=\"2\"\n\t\t\t\t\t\t\t\t\tweight=\"${column.weight || 'normal'}\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t${column.render ? column.render(this.item) : column.key ? this.item?.[column.key] : ''}\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`,\n\t\t\t\t\t)}\n\t\t\t\t\t<sch-flex\n\t\t\t\t\t\tclass=\"min-w-fit block\"\n\t\t\t\t\t\tflow=\"row-dense\"\n\t\t\t\t\t\t.hidden=${Array.isArray(this.actions) && this.actions.length === 0}\n\t\t\t\t\t>\n\t\t\t\t\t\t${repeat(\n\t\t\t\t\t\t\tthis.actions ?? [],\n\t\t\t\t\t\t\t({ name }) => name,\n\t\t\t\t\t\t\t({ name, action }) => html`\n\t\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\t\t\taction(this.item)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t${name}\n\t\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</sch-flex>\n\t\t\t\t\t<!-- <schmancy-menu .hidden=${Array.isArray(this.actions) && this.actions.length === 0}>\n\t\t\t\t\t\t${repeat(\n\t\t\t\t\t\tthis.actions ?? [],\n\t\t\t\t\t\t({ name }) => name,\n\t\t\t\t\t\t({ name, action }) => html`\n\t\t\t\t\t\t\t<schmancy-menu-item\n\t\t\t\t\t\t\t\tclass=\"z-[10000]\"\n\t\t\t\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\t\taction(this.item)\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t${name}\n\t\t\t\t\t\t\t</schmancy-menu-item>\n\t\t\t\t\t\t`,\n\t\t\t\t\t)}\n\t\t\t\t\t</schmancy-menu> -->\n\t\t\t\t</schmancy-grid>\n\t\t\t</schmancy-list-item>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-table-row': SchmancyTableRow\n\t}\n}\n","import { $LitElement } from '@mixins/litElement.mixin'\nimport { html, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport './row' // Import the schmancy-table-row component\n\n// Define a generic TableColumn interface.\n// The `key` is now a key of T, and the render function accepts T.\nexport interface TableColumn<T extends Record<string, any> = any> {\n\tname: string\n\tkey?: keyof T // Key to access the property on the data object.\n\talign?: 'left' | 'right' | 'center'\n\tweight?: 'normal' | 'bold'\n\trender?: (item: T) => TemplateResult | string | number // Custom render function for complex content\n}\n\n// Define an event detail interface for row events.\nexport interface RowEventDetail<T> {\n\titem: T\n\tindex: number\n}\n\n@customElement('schmancy-table-v2')\nexport class SchmancyDataTable<T extends Record<string, any> = any> extends $LitElement() {\n\t@property({ type: Array, attribute: false })\n\tcolumns: TableColumn<T>[] = []\n\n\t@property({ type: Array, attribute: false })\n\tdata: T[] = []\n\n\t// The keyField is now of type keyof T. You may need to adjust the default if needed.\n\t@property({ type: String })\n\tkeyField: keyof T = 'id' as keyof T\n\n\t@property({ type: String })\n\tcols: string = '1fr'\n\n\t@property({ type: Array }) actions: Array<{ name: string; action: (item: T) => void }> = []\n\n\t// Helper to handle row events.\n\tprivate handleRowEvent(eventName: 'row-click' | 'edit' | 'delete', e: CustomEvent<RowEventDetail<T>>) {\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<RowEventDetail<T>>(eventName, {\n\t\t\t\tdetail: e.detail,\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\trender(): TemplateResult {\n\t\treturn html`\n\t\t\t<schmancy-surface-v2 fill=\"all\" type=\"container\" rounded=\"all\" elevation=\"2\">\n\t\t\t\t<schmancy-grid class=\"h-full w-full\" cols=\"1fr\" rows=\"auto 1fr\">\n\t\t\t\t\t<schmancy-surface-v2 rounded=\"top\" elevation=\"1\" type=\"containerHighest\" class=\"sticky top-0 z-10\">\n\t\t\t\t\t\t<schmancy-grid align=\"center\" class=\"px-4 py-3\" .cols=${this.cols} gap=\"md\" rows=\"1fr\">\n\t\t\t\t\t\t\t${this.columns.map(\n\t\t\t\t\t\t\t\tcolumn => html`\n\t\t\t\t\t\t\t\t\t<schmancy-typography align=${column.align ?? 'left'} weight=${column.weight ?? 'bold'}>\n\t\t\t\t\t\t\t\t\t\t${column.name}\n\t\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</schmancy-grid>\n\t\t\t\t\t</schmancy-surface-v2>\n\n\t\t\t\t\t<lit-virtualizer\n\t\t\t\t\t\tscroller\n\t\t\t\t\t\tclass=\"w-full h-full relative overflow-auto\"\n\t\t\t\t\t\t.items=${this.data}\n\t\t\t\t\t\t.renderItem=${(item: T, index: number) =>\n\t\t\t\t\t\t\thtml`\n\t\t\t\t\t\t\t\t<schmancy-table-row\n\t\t\t\t\t\t\t\t\t.actions=${this.actions}\n\t\t\t\t\t\t\t\t\tclass=\"w-full border-b-1 border-solid border-outlineVariant\"\n\t\t\t\t\t\t\t\t\t.columns=${this.columns}\n\t\t\t\t\t\t\t\t\t.item=${item}\n\t\t\t\t\t\t\t\t\tcols=${this.cols}\n\t\t\t\t\t\t\t\t\t@edit=${(e: CustomEvent<RowEventDetail<T>>) => {\n\t\t\t\t\t\t\t\t\t\te.detail.item = item\n\t\t\t\t\t\t\t\t\t\te.detail.index = index\n\t\t\t\t\t\t\t\t\t\tthis.handleRowEvent('edit', e)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t@delete=${(e: CustomEvent<RowEventDetail<T>>) => {\n\t\t\t\t\t\t\t\t\t\te.detail.item = item\n\t\t\t\t\t\t\t\t\t\te.detail.index = index\n\t\t\t\t\t\t\t\t\t\tthis.handleRowEvent('delete', e)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t></schmancy-table-row>\n\t\t\t\t\t\t\t` as TemplateResult}\n\t\t\t\t\t></lit-virtualizer>\n\t\t\t\t</schmancy-grid>\n\t\t\t</schmancy-surface-v2>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-table-v2': SchmancyDataTable\n\t}\n}\n"],"names":["SchmancyTableRow","$LitElement","css","super","arguments","this","columns","cols","render","html","dispatchEvent","CustomEvent","detail","item","bubbles","composed","map","column","align","weight","key","Array","isArray","actions","length","repeat","name","action","e","stopPropagation","__decorateClass","property","type","attribute","prototype","Object","String","customElement","SchmancyDataTable","constructor","data","keyField","eventName","index","handleRowEvent"],"mappings":"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"}
|
package/dist/table.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";require("./table-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./table-CUgn9BYP.cjs");Object.defineProperty(exports,"SchmancyDataTable",{enumerable:!0,get:()=>e.SchmancyDataTable}),Object.defineProperty(exports,"SchmancyTableRow",{enumerable:!0,get:()=>e.SchmancyTableRow});
|
|
2
2
|
//# sourceMappingURL=table.cjs.map
|
package/dist/table.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const v=require("./consume-Bb7_UzYd.cjs"),l=require("rxjs");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const u=require("./tailwind.mixin-
|
|
1
|
+
"use strict";const v=require("./consume-Bb7_UzYd.cjs"),l=require("rxjs");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const u=require("./tailwind.mixin-DqqGTjD_.cjs"),b=require("lit"),i=require("lit/decorators.js"),y=require("./provide-DSU87U5x.cjs"),g=require("lit/directives/repeat.js"),m=y.n("tabs");var f=Object.defineProperty,E=Object.getOwnPropertyDescriptor,d=(t,a,e,s)=>{for(var c,r=s>1?void 0:s?E(a,e):a,h=t.length-1;h>=0;h--)(c=t[h])&&(r=(s?c(a,e,r):c(r))||r);return s&&r&&f(a,e,r),r};let p=class extends u.TailwindElement(b.css`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
}
|
|
@@ -33,4 +33,4 @@
|
|
|
33
33
|
<slot @slotchange=${()=>this.hydrateTabs()}></slot>
|
|
34
34
|
</section>
|
|
35
35
|
`}};n([y.e({context:m}),i.property({type:String})],o.prototype,"mode",2),n([i.property({type:Boolean})],o.prototype,"rounded",2),n([i.property({type:String,reflect:!0})],o.prototype,"activeTab",2),n([i.queryAssignedElements({flatten:!0})],o.prototype,"tabsElements",2),n([i.query("#tabsNavigation")],o.prototype,"navElement",2),n([i.query("#tabsContent")],o.prototype,"tabsContent",2),n([i.state()],o.prototype,"tabs",2),o=n([i.customElement("schmancy-tab-group")],o);
|
|
36
|
-
//# sourceMappingURL=tabs-group-
|
|
36
|
+
//# sourceMappingURL=tabs-group-B4ZCjn7j.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs-group-BWmuXV1M.cjs","sources":["../src/tabs/context.ts","../src/tabs/tab.ts","../src/tabs/tabs-group.ts"],"sourcesContent":["import { createContext } from '@lit/context'\n\nexport type TSchmancyTabsMode = 'scroll' | 'tabs'\n\nexport const SchmancyTabsModeContext = createContext<TSchmancyTabsMode>('tabs')\n","import { consume } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { SchmancyTabsModeContext } from './context'\n\n@customElement('schmancy-tab')\nexport default class SchmancyTab extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t@property({ type: String, reflect: true }) label\n\t@property({ type: String, reflect: true }) value\n\t@property({ type: Boolean, reflect: true }) active!: boolean\n\n\t@consume({ context: SchmancyTabsModeContext, subscribe: true })\n\t@state()\n\tmode\n\tprotected render(): unknown {\n\t\treturn html` <slot .hidden=${this.mode === 'tabs' ? !this.active : false}></slot> `\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab': SchmancyTab\n\t}\n}\n","import { provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { filter, fromEvent, interval, map, take, throttleTime } from 'rxjs'\nimport { SchmancyTabsModeContext, TSchmancyTabsMode } from './context'\nimport SchmancyTab from './tab'\n\n/**\n * @slot - The content of the tab group\n * @fires tab-changed - The event fired when the tab is changed\n */\n@customElement('schmancy-tab-group')\nexport default class SchmancyTabGroup extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t@provide({ context: SchmancyTabsModeContext })\n\t@property({ type: String })\n\tmode: TSchmancyTabsMode = 'tabs'\n\n\t@property({ type: Boolean }) rounded = true\n\n\t@property({ type: String, reflect: true }) activeTab: string\n\t@queryAssignedElements({\n\t\tflatten: true,\n\t})\n\tprivate tabsElements!: Array<SchmancyTab>\n\n\t@query('#tabsNavigation') navElement!: HTMLElement\n\t@query('#tabsContent') tabsContent!: HTMLElement\n\n\t@state()\n\tprivate tabs: Array<SchmancyTab> = []\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tfromEvent(window, 'scroll')\n\t\t\t.pipe(\n\t\t\t\tthrottleTime(1000),\n\t\t\t\tfilter(() => this.mode === 'scroll'),\n\t\t\t\tmap(() => {\n\t\t\t\t\tlet closestDiv = null\n\t\t\t\t\tlet closestDistance = Infinity\n\t\t\t\t\tthis.tabsElements.forEach(div => {\n\t\t\t\t\t\tconst distance =\n\t\t\t\t\t\t\tdiv.getBoundingClientRect().top - this.navElement.clientHeight + document.body.offsetHeight / 3\n\n\t\t\t\t\t\tif (distance < closestDistance && distance > 0) {\n\t\t\t\t\t\t\tclosestDistance = distance\n\t\t\t\t\t\t\tclosestDiv = div\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\treturn closestDiv\n\t\t\t\t}),\n\t\t\t\tfilter((el: SchmancyTab | null) => el !== null),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: (el: SchmancyTab) => {\n\t\t\t\t\tthis.activeTab = el.value\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tfirstUpdated() {\n\t\tinterval(0)\n\t\t\t.pipe(\n\t\t\t\tfilter(() => !!this.navElement.clientHeight),\n\t\t\t\ttake(1),\n\t\t\t)\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\t\tif (this.mode === 'scroll') tab.style.paddingTop = this.navElement.clientHeight + 'px'\n\t\t\t\t})\n\t\t\t})\n\t}\n\n\thydrateTabs() {\n\t\tthis.tabs = this.tabsElements\n\t\tif (!this.activeTab && this.tabsElements[0]) {\n\t\t\tthis.activeTab = this.tabsElements[0].value\n\t\t\tthis.tabsElements[0].active = true\n\t\t} else {\n\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\tif (tab.value === this.activeTab) tab.active = true\n\t\t\t\telse tab.active = false\n\t\t\t})\n\t\t}\n\t\tconst lastTab = this.tabs?.[-1]\n\t\tif (lastTab) {\n\t\t\tlastTab.style.paddingBottom = lastTab.offsetHeight + 'px'\n\t\t}\n\t}\n\n\ttabChanged(selectedTab: { label: string; value: string }) {\n\t\tlet activeTabElement: SchmancyTab | undefined\n\t\tthis.tabsElements.forEach(tab => {\n\t\t\tif (tab.value === selectedTab.value) {\n\t\t\t\ttab.active = true\n\t\t\t\tactiveTabElement = tab\n\t\t\t\t// scroll to the tab\n\t\t\t\tif (this.mode === 'scroll') {\n\t\t\t\t\t// Scroll the desired element into view\n\t\t\t\t\tactiveTabElement.scrollIntoView({\n\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\tblock: 'start',\n\t\t\t\t\t\tinline: 'start',\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\ttab.active = false\n\t\t\t}\n\t\t})\n\t\tthis.mode === 'tabs' && (this.activeTab = selectedTab.value)\n\t\tthis.dispatchEvent(new CustomEvent('tab-changed', { detail: this.activeTab }))\n\t}\n\n\tprotected render(): unknown {\n\t\tconst tabs = {\n\t\t\t'bg-surface-default color-surface-on': true,\n\t\t\t'flex z-50': true,\n\t\t\t'sticky top-0 shadow-md': this.mode === 'scroll',\n\t\t\t'rounded-full': this.rounded,\n\t\t}\n\n\t\tconst activeTab = {\n\t\t\t'text-primary-default': true,\n\t\t}\n\n\t\tconst inactiveTab = {\n\t\t\t'border-transparent': true,\n\t\t\t'hover:text-gray-700': true,\n\t\t\t'hover:border-gray-300': true,\n\t\t\t'text-gray-500': true,\n\t\t}\n\n\t\treturn html`\n\t\t\t<section id=\"tabsNavigation\" class=\"${this.classMap(tabs)}\" aria-label=\"Tabs\">\n\t\t\t\t${repeat(\n\t\t\t\t\tthis.tabs,\n\t\t\t\t\ttab => tab.value,\n\t\t\t\t\ttab => html`\n\t\t\t\t\t\t<schmancy-button\n\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\tthis.tabChanged({\n\t\t\t\t\t\t\t\t\tlabel: tab.label,\n\t\t\t\t\t\t\t\t\tvalue: tab.value,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-current=\"page\"\n\t\t\t\t\t\t\tclass=\"h-auto relative\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"px-4 py-3 ${this.activeTab === tab.value\n\t\t\t\t\t\t\t\t\t? this.classMap(activeTab)\n\t\t\t\t\t\t\t\t\t: this.classMap(inactiveTab)}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<schmancy-typography class=\"h-full align-middle flex \" type=\"title\" token=\"md\" weight=\"medium\">\n\t\t\t\t\t\t\t\t\t${tab.label}\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t.hidden=${this.activeTab !== tab.value}\n\t\t\t\t\t\t\t\t\tclass=\"border-primary-default absolute bottom-0 inset-x-6 border-solid border-2 rounded-t-full\"\n\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</section>\n\t\t\t<schmancy-divider class=\"px-6\"></schmancy-divider>\n\t\t\t<section id=\"tabsContent\">\n\t\t\t\t<slot @slotchange=${() => this.hydrateTabs()}></slot>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab-group': SchmancyTabGroup\n\t}\n}\n"],"names":["SchmancyTabsModeContext","createContext","SchmancyTab","TailwindElement","css","html","this","mode","active","__decorateClass","property","type","String","reflect","prototype","Boolean","consume","context","subscribe","state","customElement","SchmancyTabGroup","constructor","super","arguments","rounded","tabs","connectedCallback","fromEvent","window","pipe","throttleTime","filter","map","closestDiv","closestDistance","Infinity","tabsElements","forEach","div","distance","getBoundingClientRect","top","navElement","clientHeight","document","body","offsetHeight","el","next","activeTab","value","firstUpdated","interval","take","tab","style","paddingTop","hydrateTabs","lastTab","paddingBottom","selectedTab","activeTabElement","scrollIntoView","behavior","block","inline","dispatchEvent","CustomEvent","detail","render","inactiveTab","classMap","repeat","tabChanged","label","provide","queryAssignedElements","flatten","query"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabs-group-B4ZCjn7j.cjs","sources":["../src/tabs/context.ts","../src/tabs/tab.ts","../src/tabs/tabs-group.ts"],"sourcesContent":["import { createContext } from '@lit/context'\n\nexport type TSchmancyTabsMode = 'scroll' | 'tabs'\n\nexport const SchmancyTabsModeContext = createContext<TSchmancyTabsMode>('tabs')\n","import { consume } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { SchmancyTabsModeContext } from './context'\n\n@customElement('schmancy-tab')\nexport default class SchmancyTab extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t@property({ type: String, reflect: true }) label\n\t@property({ type: String, reflect: true }) value\n\t@property({ type: Boolean, reflect: true }) active!: boolean\n\n\t@consume({ context: SchmancyTabsModeContext, subscribe: true })\n\t@state()\n\tmode\n\tprotected render(): unknown {\n\t\treturn html` <slot .hidden=${this.mode === 'tabs' ? !this.active : false}></slot> `\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab': SchmancyTab\n\t}\n}\n","import { provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { filter, fromEvent, interval, map, take, throttleTime } from 'rxjs'\nimport { SchmancyTabsModeContext, TSchmancyTabsMode } from './context'\nimport SchmancyTab from './tab'\n\n/**\n * @slot - The content of the tab group\n * @fires tab-changed - The event fired when the tab is changed\n */\n@customElement('schmancy-tab-group')\nexport default class SchmancyTabGroup extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t@provide({ context: SchmancyTabsModeContext })\n\t@property({ type: String })\n\tmode: TSchmancyTabsMode = 'tabs'\n\n\t@property({ type: Boolean }) rounded = true\n\n\t@property({ type: String, reflect: true }) activeTab: string\n\t@queryAssignedElements({\n\t\tflatten: true,\n\t})\n\tprivate tabsElements!: Array<SchmancyTab>\n\n\t@query('#tabsNavigation') navElement!: HTMLElement\n\t@query('#tabsContent') tabsContent!: HTMLElement\n\n\t@state()\n\tprivate tabs: Array<SchmancyTab> = []\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tfromEvent(window, 'scroll')\n\t\t\t.pipe(\n\t\t\t\tthrottleTime(1000),\n\t\t\t\tfilter(() => this.mode === 'scroll'),\n\t\t\t\tmap(() => {\n\t\t\t\t\tlet closestDiv = null\n\t\t\t\t\tlet closestDistance = Infinity\n\t\t\t\t\tthis.tabsElements.forEach(div => {\n\t\t\t\t\t\tconst distance =\n\t\t\t\t\t\t\tdiv.getBoundingClientRect().top - this.navElement.clientHeight + document.body.offsetHeight / 3\n\n\t\t\t\t\t\tif (distance < closestDistance && distance > 0) {\n\t\t\t\t\t\t\tclosestDistance = distance\n\t\t\t\t\t\t\tclosestDiv = div\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\treturn closestDiv\n\t\t\t\t}),\n\t\t\t\tfilter((el: SchmancyTab | null) => el !== null),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: (el: SchmancyTab) => {\n\t\t\t\t\tthis.activeTab = el.value\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tfirstUpdated() {\n\t\tinterval(0)\n\t\t\t.pipe(\n\t\t\t\tfilter(() => !!this.navElement.clientHeight),\n\t\t\t\ttake(1),\n\t\t\t)\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\t\tif (this.mode === 'scroll') tab.style.paddingTop = this.navElement.clientHeight + 'px'\n\t\t\t\t})\n\t\t\t})\n\t}\n\n\thydrateTabs() {\n\t\tthis.tabs = this.tabsElements\n\t\tif (!this.activeTab && this.tabsElements[0]) {\n\t\t\tthis.activeTab = this.tabsElements[0].value\n\t\t\tthis.tabsElements[0].active = true\n\t\t} else {\n\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\tif (tab.value === this.activeTab) tab.active = true\n\t\t\t\telse tab.active = false\n\t\t\t})\n\t\t}\n\t\tconst lastTab = this.tabs?.[-1]\n\t\tif (lastTab) {\n\t\t\tlastTab.style.paddingBottom = lastTab.offsetHeight + 'px'\n\t\t}\n\t}\n\n\ttabChanged(selectedTab: { label: string; value: string }) {\n\t\tlet activeTabElement: SchmancyTab | undefined\n\t\tthis.tabsElements.forEach(tab => {\n\t\t\tif (tab.value === selectedTab.value) {\n\t\t\t\ttab.active = true\n\t\t\t\tactiveTabElement = tab\n\t\t\t\t// scroll to the tab\n\t\t\t\tif (this.mode === 'scroll') {\n\t\t\t\t\t// Scroll the desired element into view\n\t\t\t\t\tactiveTabElement.scrollIntoView({\n\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\tblock: 'start',\n\t\t\t\t\t\tinline: 'start',\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\ttab.active = false\n\t\t\t}\n\t\t})\n\t\tthis.mode === 'tabs' && (this.activeTab = selectedTab.value)\n\t\tthis.dispatchEvent(new CustomEvent('tab-changed', { detail: this.activeTab }))\n\t}\n\n\tprotected render(): unknown {\n\t\tconst tabs = {\n\t\t\t'bg-surface-default color-surface-on': true,\n\t\t\t'flex z-50': true,\n\t\t\t'sticky top-0 shadow-md': this.mode === 'scroll',\n\t\t\t'rounded-full': this.rounded,\n\t\t}\n\n\t\tconst activeTab = {\n\t\t\t'text-primary-default': true,\n\t\t}\n\n\t\tconst inactiveTab = {\n\t\t\t'border-transparent': true,\n\t\t\t'hover:text-gray-700': true,\n\t\t\t'hover:border-gray-300': true,\n\t\t\t'text-gray-500': true,\n\t\t}\n\n\t\treturn html`\n\t\t\t<section id=\"tabsNavigation\" class=\"${this.classMap(tabs)}\" aria-label=\"Tabs\">\n\t\t\t\t${repeat(\n\t\t\t\t\tthis.tabs,\n\t\t\t\t\ttab => tab.value,\n\t\t\t\t\ttab => html`\n\t\t\t\t\t\t<schmancy-button\n\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\tthis.tabChanged({\n\t\t\t\t\t\t\t\t\tlabel: tab.label,\n\t\t\t\t\t\t\t\t\tvalue: tab.value,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-current=\"page\"\n\t\t\t\t\t\t\tclass=\"h-auto relative\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"px-4 py-3 ${this.activeTab === tab.value\n\t\t\t\t\t\t\t\t\t? this.classMap(activeTab)\n\t\t\t\t\t\t\t\t\t: this.classMap(inactiveTab)}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<schmancy-typography class=\"h-full align-middle flex \" type=\"title\" token=\"md\" weight=\"medium\">\n\t\t\t\t\t\t\t\t\t${tab.label}\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t.hidden=${this.activeTab !== tab.value}\n\t\t\t\t\t\t\t\t\tclass=\"border-primary-default absolute bottom-0 inset-x-6 border-solid border-2 rounded-t-full\"\n\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</section>\n\t\t\t<schmancy-divider class=\"px-6\"></schmancy-divider>\n\t\t\t<section id=\"tabsContent\">\n\t\t\t\t<slot @slotchange=${() => this.hydrateTabs()}></slot>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab-group': SchmancyTabGroup\n\t}\n}\n"],"names":["SchmancyTabsModeContext","createContext","SchmancyTab","TailwindElement","css","html","this","mode","active","__decorateClass","property","type","String","reflect","prototype","Boolean","consume","context","subscribe","state","customElement","SchmancyTabGroup","constructor","super","arguments","rounded","tabs","connectedCallback","fromEvent","window","pipe","throttleTime","filter","map","closestDiv","closestDistance","Infinity","tabsElements","forEach","div","distance","getBoundingClientRect","top","navElement","clientHeight","document","body","offsetHeight","el","next","activeTab","value","firstUpdated","interval","take","tab","style","paddingTop","hydrateTabs","lastTab","paddingBottom","selectedTab","activeTabElement","scrollIntoView","behavior","block","inline","dispatchEvent","CustomEvent","detail","render","inactiveTab","classMap","repeat","tabChanged","label","provide","queryAssignedElements","flatten","query"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import { c as E } from "./consume-fRVATvdE.js";
|
|
|
2
2
|
import { fromEvent as x, throttleTime as T, filter as d, map as k, interval as C, take as w } from "rxjs";
|
|
3
3
|
import "lit/directives/class-map.js";
|
|
4
4
|
import "lit/directives/style-map.js";
|
|
5
|
-
import { T as v } from "./tailwind.mixin-
|
|
5
|
+
import { T as v } from "./tailwind.mixin-Bn3Brhz1.js";
|
|
6
6
|
import { css as u, html as b } from "lit";
|
|
7
7
|
import { property as h, state as y, customElement as f, queryAssignedElements as $, query as m } from "lit/decorators.js";
|
|
8
8
|
import { n as O, e as j } from "./provide-BLSgVvMJ.js";
|
|
@@ -100,4 +100,4 @@ let r = class extends v(u`
|
|
|
100
100
|
}
|
|
101
101
|
};
|
|
102
102
|
i([j({ context: g }), h({ type: String })], r.prototype, "mode", 2), i([h({ type: Boolean })], r.prototype, "rounded", 2), i([h({ type: String, reflect: !0 })], r.prototype, "activeTab", 2), i([$({ flatten: !0 })], r.prototype, "tabsElements", 2), i([m("#tabsNavigation")], r.prototype, "navElement", 2), i([m("#tabsContent")], r.prototype, "tabsContent", 2), i([y()], r.prototype, "tabs", 2), r = i([f("schmancy-tab-group")], r);
|
|
103
|
-
//# sourceMappingURL=tabs-group-
|
|
103
|
+
//# sourceMappingURL=tabs-group-BhHCB2nJ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs-group-Dsupy-TK.js","sources":["../src/tabs/context.ts","../src/tabs/tab.ts","../src/tabs/tabs-group.ts"],"sourcesContent":["import { createContext } from '@lit/context'\n\nexport type TSchmancyTabsMode = 'scroll' | 'tabs'\n\nexport const SchmancyTabsModeContext = createContext<TSchmancyTabsMode>('tabs')\n","import { consume } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { SchmancyTabsModeContext } from './context'\n\n@customElement('schmancy-tab')\nexport default class SchmancyTab extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t@property({ type: String, reflect: true }) label\n\t@property({ type: String, reflect: true }) value\n\t@property({ type: Boolean, reflect: true }) active!: boolean\n\n\t@consume({ context: SchmancyTabsModeContext, subscribe: true })\n\t@state()\n\tmode\n\tprotected render(): unknown {\n\t\treturn html` <slot .hidden=${this.mode === 'tabs' ? !this.active : false}></slot> `\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab': SchmancyTab\n\t}\n}\n","import { provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { filter, fromEvent, interval, map, take, throttleTime } from 'rxjs'\nimport { SchmancyTabsModeContext, TSchmancyTabsMode } from './context'\nimport SchmancyTab from './tab'\n\n/**\n * @slot - The content of the tab group\n * @fires tab-changed - The event fired when the tab is changed\n */\n@customElement('schmancy-tab-group')\nexport default class SchmancyTabGroup extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t@provide({ context: SchmancyTabsModeContext })\n\t@property({ type: String })\n\tmode: TSchmancyTabsMode = 'tabs'\n\n\t@property({ type: Boolean }) rounded = true\n\n\t@property({ type: String, reflect: true }) activeTab: string\n\t@queryAssignedElements({\n\t\tflatten: true,\n\t})\n\tprivate tabsElements!: Array<SchmancyTab>\n\n\t@query('#tabsNavigation') navElement!: HTMLElement\n\t@query('#tabsContent') tabsContent!: HTMLElement\n\n\t@state()\n\tprivate tabs: Array<SchmancyTab> = []\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tfromEvent(window, 'scroll')\n\t\t\t.pipe(\n\t\t\t\tthrottleTime(1000),\n\t\t\t\tfilter(() => this.mode === 'scroll'),\n\t\t\t\tmap(() => {\n\t\t\t\t\tlet closestDiv = null\n\t\t\t\t\tlet closestDistance = Infinity\n\t\t\t\t\tthis.tabsElements.forEach(div => {\n\t\t\t\t\t\tconst distance =\n\t\t\t\t\t\t\tdiv.getBoundingClientRect().top - this.navElement.clientHeight + document.body.offsetHeight / 3\n\n\t\t\t\t\t\tif (distance < closestDistance && distance > 0) {\n\t\t\t\t\t\t\tclosestDistance = distance\n\t\t\t\t\t\t\tclosestDiv = div\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\treturn closestDiv\n\t\t\t\t}),\n\t\t\t\tfilter((el: SchmancyTab | null) => el !== null),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: (el: SchmancyTab) => {\n\t\t\t\t\tthis.activeTab = el.value\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tfirstUpdated() {\n\t\tinterval(0)\n\t\t\t.pipe(\n\t\t\t\tfilter(() => !!this.navElement.clientHeight),\n\t\t\t\ttake(1),\n\t\t\t)\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\t\tif (this.mode === 'scroll') tab.style.paddingTop = this.navElement.clientHeight + 'px'\n\t\t\t\t})\n\t\t\t})\n\t}\n\n\thydrateTabs() {\n\t\tthis.tabs = this.tabsElements\n\t\tif (!this.activeTab && this.tabsElements[0]) {\n\t\t\tthis.activeTab = this.tabsElements[0].value\n\t\t\tthis.tabsElements[0].active = true\n\t\t} else {\n\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\tif (tab.value === this.activeTab) tab.active = true\n\t\t\t\telse tab.active = false\n\t\t\t})\n\t\t}\n\t\tconst lastTab = this.tabs?.[-1]\n\t\tif (lastTab) {\n\t\t\tlastTab.style.paddingBottom = lastTab.offsetHeight + 'px'\n\t\t}\n\t}\n\n\ttabChanged(selectedTab: { label: string; value: string }) {\n\t\tlet activeTabElement: SchmancyTab | undefined\n\t\tthis.tabsElements.forEach(tab => {\n\t\t\tif (tab.value === selectedTab.value) {\n\t\t\t\ttab.active = true\n\t\t\t\tactiveTabElement = tab\n\t\t\t\t// scroll to the tab\n\t\t\t\tif (this.mode === 'scroll') {\n\t\t\t\t\t// Scroll the desired element into view\n\t\t\t\t\tactiveTabElement.scrollIntoView({\n\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\tblock: 'start',\n\t\t\t\t\t\tinline: 'start',\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\ttab.active = false\n\t\t\t}\n\t\t})\n\t\tthis.mode === 'tabs' && (this.activeTab = selectedTab.value)\n\t\tthis.dispatchEvent(new CustomEvent('tab-changed', { detail: this.activeTab }))\n\t}\n\n\tprotected render(): unknown {\n\t\tconst tabs = {\n\t\t\t'bg-surface-default color-surface-on': true,\n\t\t\t'flex z-50': true,\n\t\t\t'sticky top-0 shadow-md': this.mode === 'scroll',\n\t\t\t'rounded-full': this.rounded,\n\t\t}\n\n\t\tconst activeTab = {\n\t\t\t'text-primary-default': true,\n\t\t}\n\n\t\tconst inactiveTab = {\n\t\t\t'border-transparent': true,\n\t\t\t'hover:text-gray-700': true,\n\t\t\t'hover:border-gray-300': true,\n\t\t\t'text-gray-500': true,\n\t\t}\n\n\t\treturn html`\n\t\t\t<section id=\"tabsNavigation\" class=\"${this.classMap(tabs)}\" aria-label=\"Tabs\">\n\t\t\t\t${repeat(\n\t\t\t\t\tthis.tabs,\n\t\t\t\t\ttab => tab.value,\n\t\t\t\t\ttab => html`\n\t\t\t\t\t\t<schmancy-button\n\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\tthis.tabChanged({\n\t\t\t\t\t\t\t\t\tlabel: tab.label,\n\t\t\t\t\t\t\t\t\tvalue: tab.value,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-current=\"page\"\n\t\t\t\t\t\t\tclass=\"h-auto relative\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"px-4 py-3 ${this.activeTab === tab.value\n\t\t\t\t\t\t\t\t\t? this.classMap(activeTab)\n\t\t\t\t\t\t\t\t\t: this.classMap(inactiveTab)}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<schmancy-typography class=\"h-full align-middle flex \" type=\"title\" token=\"md\" weight=\"medium\">\n\t\t\t\t\t\t\t\t\t${tab.label}\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t.hidden=${this.activeTab !== tab.value}\n\t\t\t\t\t\t\t\t\tclass=\"border-primary-default absolute bottom-0 inset-x-6 border-solid border-2 rounded-t-full\"\n\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</section>\n\t\t\t<schmancy-divider class=\"px-6\"></schmancy-divider>\n\t\t\t<section id=\"tabsContent\">\n\t\t\t\t<slot @slotchange=${() => this.hydrateTabs()}></slot>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab-group': SchmancyTabGroup\n\t}\n}\n"],"names":["SchmancyTabsModeContext","createContext","SchmancyTab","TailwindElement","css","render","html","this","mode","active","__decorateClass","property","type","String","reflect","prototype","Boolean","consume","context","subscribe","state","customElement","SchmancyTabGroup","constructor","super","arguments","rounded","tabs","connectedCallback","fromEvent","window","pipe","throttleTime","filter","map","closestDiv","closestDistance","Infinity","tabsElements","forEach","div","distance","getBoundingClientRect","top","navElement","clientHeight","document","body","offsetHeight","el","next","activeTab","value","firstUpdated","interval","take","tab","style","paddingTop","hydrateTabs","lastTab","paddingBottom","selectedTab","activeTabElement","scrollIntoView","behavior","block","inline","dispatchEvent","CustomEvent","detail","inactiveTab","classMap","repeat","tabChanged","label","provide","queryAssignedElements","flatten","query"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabs-group-BhHCB2nJ.js","sources":["../src/tabs/context.ts","../src/tabs/tab.ts","../src/tabs/tabs-group.ts"],"sourcesContent":["import { createContext } from '@lit/context'\n\nexport type TSchmancyTabsMode = 'scroll' | 'tabs'\n\nexport const SchmancyTabsModeContext = createContext<TSchmancyTabsMode>('tabs')\n","import { consume } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { SchmancyTabsModeContext } from './context'\n\n@customElement('schmancy-tab')\nexport default class SchmancyTab extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t@property({ type: String, reflect: true }) label\n\t@property({ type: String, reflect: true }) value\n\t@property({ type: Boolean, reflect: true }) active!: boolean\n\n\t@consume({ context: SchmancyTabsModeContext, subscribe: true })\n\t@state()\n\tmode\n\tprotected render(): unknown {\n\t\treturn html` <slot .hidden=${this.mode === 'tabs' ? !this.active : false}></slot> `\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab': SchmancyTab\n\t}\n}\n","import { provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { filter, fromEvent, interval, map, take, throttleTime } from 'rxjs'\nimport { SchmancyTabsModeContext, TSchmancyTabsMode } from './context'\nimport SchmancyTab from './tab'\n\n/**\n * @slot - The content of the tab group\n * @fires tab-changed - The event fired when the tab is changed\n */\n@customElement('schmancy-tab-group')\nexport default class SchmancyTabGroup extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t@provide({ context: SchmancyTabsModeContext })\n\t@property({ type: String })\n\tmode: TSchmancyTabsMode = 'tabs'\n\n\t@property({ type: Boolean }) rounded = true\n\n\t@property({ type: String, reflect: true }) activeTab: string\n\t@queryAssignedElements({\n\t\tflatten: true,\n\t})\n\tprivate tabsElements!: Array<SchmancyTab>\n\n\t@query('#tabsNavigation') navElement!: HTMLElement\n\t@query('#tabsContent') tabsContent!: HTMLElement\n\n\t@state()\n\tprivate tabs: Array<SchmancyTab> = []\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tfromEvent(window, 'scroll')\n\t\t\t.pipe(\n\t\t\t\tthrottleTime(1000),\n\t\t\t\tfilter(() => this.mode === 'scroll'),\n\t\t\t\tmap(() => {\n\t\t\t\t\tlet closestDiv = null\n\t\t\t\t\tlet closestDistance = Infinity\n\t\t\t\t\tthis.tabsElements.forEach(div => {\n\t\t\t\t\t\tconst distance =\n\t\t\t\t\t\t\tdiv.getBoundingClientRect().top - this.navElement.clientHeight + document.body.offsetHeight / 3\n\n\t\t\t\t\t\tif (distance < closestDistance && distance > 0) {\n\t\t\t\t\t\t\tclosestDistance = distance\n\t\t\t\t\t\t\tclosestDiv = div\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\treturn closestDiv\n\t\t\t\t}),\n\t\t\t\tfilter((el: SchmancyTab | null) => el !== null),\n\t\t\t)\n\t\t\t.subscribe({\n\t\t\t\tnext: (el: SchmancyTab) => {\n\t\t\t\t\tthis.activeTab = el.value\n\t\t\t\t},\n\t\t\t})\n\t}\n\n\tfirstUpdated() {\n\t\tinterval(0)\n\t\t\t.pipe(\n\t\t\t\tfilter(() => !!this.navElement.clientHeight),\n\t\t\t\ttake(1),\n\t\t\t)\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\t\tif (this.mode === 'scroll') tab.style.paddingTop = this.navElement.clientHeight + 'px'\n\t\t\t\t})\n\t\t\t})\n\t}\n\n\thydrateTabs() {\n\t\tthis.tabs = this.tabsElements\n\t\tif (!this.activeTab && this.tabsElements[0]) {\n\t\t\tthis.activeTab = this.tabsElements[0].value\n\t\t\tthis.tabsElements[0].active = true\n\t\t} else {\n\t\t\tthis.tabsElements.forEach(tab => {\n\t\t\t\tif (tab.value === this.activeTab) tab.active = true\n\t\t\t\telse tab.active = false\n\t\t\t})\n\t\t}\n\t\tconst lastTab = this.tabs?.[-1]\n\t\tif (lastTab) {\n\t\t\tlastTab.style.paddingBottom = lastTab.offsetHeight + 'px'\n\t\t}\n\t}\n\n\ttabChanged(selectedTab: { label: string; value: string }) {\n\t\tlet activeTabElement: SchmancyTab | undefined\n\t\tthis.tabsElements.forEach(tab => {\n\t\t\tif (tab.value === selectedTab.value) {\n\t\t\t\ttab.active = true\n\t\t\t\tactiveTabElement = tab\n\t\t\t\t// scroll to the tab\n\t\t\t\tif (this.mode === 'scroll') {\n\t\t\t\t\t// Scroll the desired element into view\n\t\t\t\t\tactiveTabElement.scrollIntoView({\n\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\tblock: 'start',\n\t\t\t\t\t\tinline: 'start',\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\ttab.active = false\n\t\t\t}\n\t\t})\n\t\tthis.mode === 'tabs' && (this.activeTab = selectedTab.value)\n\t\tthis.dispatchEvent(new CustomEvent('tab-changed', { detail: this.activeTab }))\n\t}\n\n\tprotected render(): unknown {\n\t\tconst tabs = {\n\t\t\t'bg-surface-default color-surface-on': true,\n\t\t\t'flex z-50': true,\n\t\t\t'sticky top-0 shadow-md': this.mode === 'scroll',\n\t\t\t'rounded-full': this.rounded,\n\t\t}\n\n\t\tconst activeTab = {\n\t\t\t'text-primary-default': true,\n\t\t}\n\n\t\tconst inactiveTab = {\n\t\t\t'border-transparent': true,\n\t\t\t'hover:text-gray-700': true,\n\t\t\t'hover:border-gray-300': true,\n\t\t\t'text-gray-500': true,\n\t\t}\n\n\t\treturn html`\n\t\t\t<section id=\"tabsNavigation\" class=\"${this.classMap(tabs)}\" aria-label=\"Tabs\">\n\t\t\t\t${repeat(\n\t\t\t\t\tthis.tabs,\n\t\t\t\t\ttab => tab.value,\n\t\t\t\t\ttab => html`\n\t\t\t\t\t\t<schmancy-button\n\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\tthis.tabChanged({\n\t\t\t\t\t\t\t\t\tlabel: tab.label,\n\t\t\t\t\t\t\t\t\tvalue: tab.value,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-current=\"page\"\n\t\t\t\t\t\t\tclass=\"h-auto relative\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"px-4 py-3 ${this.activeTab === tab.value\n\t\t\t\t\t\t\t\t\t? this.classMap(activeTab)\n\t\t\t\t\t\t\t\t\t: this.classMap(inactiveTab)}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<schmancy-typography class=\"h-full align-middle flex \" type=\"title\" token=\"md\" weight=\"medium\">\n\t\t\t\t\t\t\t\t\t${tab.label}\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t.hidden=${this.activeTab !== tab.value}\n\t\t\t\t\t\t\t\t\tclass=\"border-primary-default absolute bottom-0 inset-x-6 border-solid border-2 rounded-t-full\"\n\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</section>\n\t\t\t<schmancy-divider class=\"px-6\"></schmancy-divider>\n\t\t\t<section id=\"tabsContent\">\n\t\t\t\t<slot @slotchange=${() => this.hydrateTabs()}></slot>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-tab-group': SchmancyTabGroup\n\t}\n}\n"],"names":["SchmancyTabsModeContext","createContext","SchmancyTab","TailwindElement","css","render","html","this","mode","active","__decorateClass","property","type","String","reflect","prototype","Boolean","consume","context","subscribe","state","customElement","SchmancyTabGroup","constructor","super","arguments","rounded","tabs","connectedCallback","fromEvent","window","pipe","throttleTime","filter","map","closestDiv","closestDistance","Infinity","tabsElements","forEach","div","distance","getBoundingClientRect","top","navElement","clientHeight","document","body","offsetHeight","el","next","activeTab","value","firstUpdated","interval","take","tab","style","paddingTop","hydrateTabs","lastTab","paddingBottom","selectedTab","activeTabElement","scrollIntoView","behavior","block","inline","dispatchEvent","CustomEvent","detail","inactiveTab","classMap","repeat","tabChanged","label","provide","queryAssignedElements","flatten","query"],"mappings":"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"}
|
package/dist/tabs.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";require("./tabs-group-
|
|
1
|
+
"use strict";require("./tabs-group-B4ZCjn7j.cjs");
|
|
2
2
|
//# sourceMappingURL=tabs.cjs.map
|
package/dist/tabs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import "./tabs-group-
|
|
1
|
+
import "./tabs-group-BhHCB2nJ.js";
|
|
2
2
|
//# sourceMappingURL=tabs.js.map
|