@zywave/zui-table 4.0.16 → 4.1.0-pre.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const style = css `:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center}@media(min-width: 45em){.topbar{flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:none}}.content{display:flex;flex:1;align-items:center;order:1;margin-bottom:1.25rem}@media(min-width: 30em){.content{flex:auto;order:0}}@media(min-width: 45em){.content{margin-bottom:0}}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50);width:100%}@media(min-width: 45em){.content ::slotted(zui-search){width:auto}}.counter{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){.counter{width:auto;order:0;margin-bottom:0}}.action{display:flex;width:100%;justify-content:flex-end;margin-bottom:1.25rem}@media(min-width: 30em){.action{width:auto}}@media(min-width: 45em){.action{margin-bottom:0}}.action slot[name=action]{display:flex;width:100%;flex-direction:column}@media(min-width: 30em){.action slot[name=action]{flex-direction:row}}.action ::slotted(zui-button){width:100%}@media(min-width: 30em){.action ::slotted(zui-button){width:auto}}@media(min-width: 30em){.action ::slotted(zui-button:first-of-type){margin-left:1.25rem}}@media(min-width: 45em){.action ::slotted(zui-button:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button:not(:first-of-type)){margin-top:.625rem}@media(min-width: 30em){.action ::slotted(zui-button:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;
|
|
2
|
+
export const style = css `:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center}@media(min-width: 45em){.topbar{flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:none}}.content{display:flex;flex:1;align-items:center;order:1;margin-bottom:1.25rem}@media(min-width: 30em){.content{flex:auto;order:0}}@media(min-width: 45em){.content{margin-bottom:0}}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50);width:100%}@media(min-width: 45em){.content ::slotted(zui-search){width:auto}}.counter{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){.counter{width:auto;order:0;margin-bottom:0}}.action{display:flex;width:100%;justify-content:flex-end;margin-bottom:1.25rem}@media(min-width: 30em){.action{width:auto}}@media(min-width: 45em){.action{margin-bottom:0}}.action slot[name=action]{display:flex;width:100%;flex-direction:column}@media(min-width: 30em){.action slot[name=action]{flex-direction:row}}.action ::slotted(zui-button){width:100%}@media(min-width: 30em){.action ::slotted(zui-button){width:auto}}@media(min-width: 30em){.action ::slotted(zui-button:first-of-type),.action ::slotted(zui-button-group:first-of-type){margin-left:1.25rem}}@media(min-width: 45em){.action ::slotted(zui-button:first-of-type),.action ::slotted(zui-button-group:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button:not(:first-of-type)),.action ::slotted(zui-button-group:not(:first-of-type)){margin-top:.625rem}@media(min-width: 30em){.action ::slotted(zui-button:not(:first-of-type)),.action ::slotted(zui-button-group:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;
|
|
3
3
|
//# sourceMappingURL=zui-table-topbar-css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-table-topbar-css.js","sourceRoot":"","sources":["../src/zui-table-topbar-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"zui-table-topbar-css.js","sourceRoot":"","sources":["../src/zui-table-topbar-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,6yDAA6yD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center}@media(min-width: 45em){.topbar{flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:none}}.content{display:flex;flex:1;align-items:center;order:1;margin-bottom:1.25rem}@media(min-width: 30em){.content{flex:auto;order:0}}@media(min-width: 45em){.content{margin-bottom:0}}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50);width:100%}@media(min-width: 45em){.content ::slotted(zui-search){width:auto}}.counter{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){.counter{width:auto;order:0;margin-bottom:0}}.action{display:flex;width:100%;justify-content:flex-end;margin-bottom:1.25rem}@media(min-width: 30em){.action{width:auto}}@media(min-width: 45em){.action{margin-bottom:0}}.action slot[name=action]{display:flex;width:100%;flex-direction:column}@media(min-width: 30em){.action slot[name=action]{flex-direction:row}}.action ::slotted(zui-button){width:100%}@media(min-width: 30em){.action ::slotted(zui-button){width:auto}}@media(min-width: 30em){.action ::slotted(zui-button:first-of-type),.action ::slotted(zui-button-group:first-of-type){margin-left:1.25rem}}@media(min-width: 45em){.action ::slotted(zui-button:first-of-type),.action ::slotted(zui-button-group:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button:not(:first-of-type)),.action ::slotted(zui-button-group:not(:first-of-type)){margin-top:.625rem}@media(min-width: 30em){.action ::slotted(zui-button:not(:first-of-type)),.action ::slotted(zui-button-group:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;\n"]}
|
package/lab.html
CHANGED
|
@@ -770,6 +770,90 @@
|
|
|
770
770
|
</zui-table-row>
|
|
771
771
|
</zui-table>
|
|
772
772
|
|
|
773
|
+
<h2>Table topbar with search, counter, and button group</h2>
|
|
774
|
+
|
|
775
|
+
<zui-table>
|
|
776
|
+
<zui-table-topbar>
|
|
777
|
+
<zui-search placeholder="Search for a family member" no-submit></zui-search>
|
|
778
|
+
<div slot="counter">5 family members</div>
|
|
779
|
+
<zui-button-group slot="action" type="secondary">
|
|
780
|
+
<zui-button-dropdown type="secondary">
|
|
781
|
+
Add...
|
|
782
|
+
<button slot="option" disabled>Family member</button>
|
|
783
|
+
<button slot="option">Planet</button>
|
|
784
|
+
<button slot="option">Belief</button>
|
|
785
|
+
<a href="#" slot="option">
|
|
786
|
+
<zui-icon icon="zui-rocket" class="small"></zui-icon>
|
|
787
|
+
Ship
|
|
788
|
+
</a>
|
|
789
|
+
</zui-button-dropdown>
|
|
790
|
+
<zui-button type="secondary"><a href="#">Whisper</a></zui-button>
|
|
791
|
+
<zui-button id="export" type="secondary">Betray all</zui-button>
|
|
792
|
+
</zui-button-group>
|
|
793
|
+
</zui-table-topbar>
|
|
794
|
+
<zui-table-row header>
|
|
795
|
+
<zui-table-cell>Name</zui-table-cell>
|
|
796
|
+
<zui-table-cell>Title</zui-table-cell>
|
|
797
|
+
<zui-table-cell>Born</zui-table-cell>
|
|
798
|
+
<zui-table-cell>Died</zui-table-cell>
|
|
799
|
+
<zui-table-cell>Age</zui-table-cell>
|
|
800
|
+
<zui-table-cell>Action</zui-table-cell>
|
|
801
|
+
</zui-table-row>
|
|
802
|
+
<zui-table-row>
|
|
803
|
+
<zui-table-cell>Paulus Atreides</zui-table-cell>
|
|
804
|
+
<zui-table-cell>Old Duke</zui-table-cell>
|
|
805
|
+
<zui-table-cell>10,089 A.G.</zui-table-cell>
|
|
806
|
+
<zui-table-cell>10,156 A.G.</zui-table-cell>
|
|
807
|
+
<zui-table-cell>67 years old</zui-table-cell>
|
|
808
|
+
<zui-table-cell action>
|
|
809
|
+
<zui-button type="secondary">Betray</zui-button>
|
|
810
|
+
</zui-table-cell>
|
|
811
|
+
</zui-table-row>
|
|
812
|
+
<zui-table-row>
|
|
813
|
+
<zui-table-cell>Leto Atreides I</zui-table-cell>
|
|
814
|
+
<zui-table-cell>Red Duke</zui-table-cell>
|
|
815
|
+
<zui-table-cell>10,140 A.G.</zui-table-cell>
|
|
816
|
+
<zui-table-cell>10,191 A.G.</zui-table-cell>
|
|
817
|
+
<zui-table-cell>51 years old</zui-table-cell>
|
|
818
|
+
<zui-table-cell action>
|
|
819
|
+
<zui-button type="secondary">Betray</zui-button>
|
|
820
|
+
</zui-table-cell>
|
|
821
|
+
</zui-table-row>
|
|
822
|
+
<zui-table-row>
|
|
823
|
+
<zui-table-cell>Paul Atreides</zui-table-cell>
|
|
824
|
+
<zui-table-cell>Padishah Emperor</zui-table-cell>
|
|
825
|
+
<zui-table-cell>10,176 A.G.</zui-table-cell>
|
|
826
|
+
<zui-table-cell>10,219 A.G.</zui-table-cell>
|
|
827
|
+
<zui-table-cell>43 years old</zui-table-cell>
|
|
828
|
+
<zui-table-cell action>
|
|
829
|
+
<zui-button type="secondary">Betray</zui-button>
|
|
830
|
+
</zui-table-cell>
|
|
831
|
+
</zui-table-row>
|
|
832
|
+
<zui-table-row>
|
|
833
|
+
<zui-table-cell>Alia Atreides</zui-table-cell>
|
|
834
|
+
<zui-table-cell>Imperial Regent</zui-table-cell>
|
|
835
|
+
<zui-table-cell>10,191 A.G.</zui-table-cell>
|
|
836
|
+
<zui-table-cell>10,219 A.G.</zui-table-cell>
|
|
837
|
+
<zui-table-cell>28 years old</zui-table-cell>
|
|
838
|
+
<zui-table-cell action>
|
|
839
|
+
<zui-button type="secondary">Betray</zui-button>
|
|
840
|
+
</zui-table-cell>
|
|
841
|
+
</zui-table-row>
|
|
842
|
+
<zui-table-row>
|
|
843
|
+
<zui-table-cell>Leto Atreides II</zui-table-cell>
|
|
844
|
+
<zui-table-cell>God Emperor</zui-table-cell>
|
|
845
|
+
<zui-table-cell>10,207 A.G.</zui-table-cell>
|
|
846
|
+
<zui-table-cell>13,728 A.G.</zui-table-cell>
|
|
847
|
+
<zui-table-cell>3,521 years old</zui-table-cell>
|
|
848
|
+
<zui-table-cell action>
|
|
849
|
+
<zui-button type="secondary">Betray</zui-button>
|
|
850
|
+
</zui-table-cell>
|
|
851
|
+
</zui-table-row>
|
|
852
|
+
<zui-table-row summary>
|
|
853
|
+
<zui-table-cell style="text-align: right"> Average lifespan: 742 years </zui-table-cell>
|
|
854
|
+
</zui-table-row>
|
|
855
|
+
</zui-table>
|
|
856
|
+
|
|
773
857
|
<h2>Table with footer</h2>
|
|
774
858
|
|
|
775
859
|
<zui-table>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zywave/zui-table",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.1.0-pre.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -22,11 +22,11 @@
|
|
|
22
22
|
},
|
|
23
23
|
"customElements": "dist/custom-elements.json",
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@zywave/zui-base": "^4.2.0",
|
|
26
|
-
"@zywave/zui-icons": "^4.4.
|
|
25
|
+
"@zywave/zui-base": "^4.2.1-pre.0",
|
|
26
|
+
"@zywave/zui-icons": "^4.4.1-pre.1"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@zywave/zui-button": "^4.1.
|
|
29
|
+
"@zywave/zui-button": "^4.1.3-pre.1"
|
|
30
30
|
},
|
|
31
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "e89f29b7f8ea8774bfd7c7801be4c035c7995da9"
|
|
32
32
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
export const style = css`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center}@media(min-width: 45em){.topbar{flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:none}}.content{display:flex;flex:1;align-items:center;order:1;margin-bottom:1.25rem}@media(min-width: 30em){.content{flex:auto;order:0}}@media(min-width: 45em){.content{margin-bottom:0}}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50);width:100%}@media(min-width: 45em){.content ::slotted(zui-search){width:auto}}.counter{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){.counter{width:auto;order:0;margin-bottom:0}}.action{display:flex;width:100%;justify-content:flex-end;margin-bottom:1.25rem}@media(min-width: 30em){.action{width:auto}}@media(min-width: 45em){.action{margin-bottom:0}}.action slot[name=action]{display:flex;width:100%;flex-direction:column}@media(min-width: 30em){.action slot[name=action]{flex-direction:row}}.action ::slotted(zui-button){width:100%}@media(min-width: 30em){.action ::slotted(zui-button){width:auto}}@media(min-width: 30em){.action ::slotted(zui-button:first-of-type){margin-left:1.25rem}}@media(min-width: 45em){.action ::slotted(zui-button:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button:not(:first-of-type)){margin-top:.625rem}@media(min-width: 30em){.action ::slotted(zui-button:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;
|
|
3
|
+
export const style = css`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center}@media(min-width: 45em){.topbar{flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:none}}.content{display:flex;flex:1;align-items:center;order:1;margin-bottom:1.25rem}@media(min-width: 30em){.content{flex:auto;order:0}}@media(min-width: 45em){.content{margin-bottom:0}}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50);width:100%}@media(min-width: 45em){.content ::slotted(zui-search){width:auto}}.counter{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){.counter{width:auto;order:0;margin-bottom:0}}.action{display:flex;width:100%;justify-content:flex-end;margin-bottom:1.25rem}@media(min-width: 30em){.action{width:auto}}@media(min-width: 45em){.action{margin-bottom:0}}.action slot[name=action]{display:flex;width:100%;flex-direction:column}@media(min-width: 30em){.action slot[name=action]{flex-direction:row}}.action ::slotted(zui-button){width:100%}@media(min-width: 30em){.action ::slotted(zui-button){width:auto}}@media(min-width: 30em){.action ::slotted(zui-button:first-of-type),.action ::slotted(zui-button-group:first-of-type){margin-left:1.25rem}}@media(min-width: 45em){.action ::slotted(zui-button:first-of-type),.action ::slotted(zui-button-group:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button:not(:first-of-type)),.action ::slotted(zui-button-group:not(:first-of-type)){margin-top:.625rem}@media(min-width: 30em){.action ::slotted(zui-button:not(:first-of-type)),.action ::slotted(zui-button-group:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;
|
|
@@ -98,7 +98,8 @@
|
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
::slotted(zui-button:first-of-type)
|
|
101
|
+
::slotted(zui-button:first-of-type),
|
|
102
|
+
::slotted(zui-button-group:first-of-type) {
|
|
102
103
|
@media (min-width: $bp-xxs) {
|
|
103
104
|
margin-left: rem(20);
|
|
104
105
|
}
|
|
@@ -108,7 +109,8 @@
|
|
|
108
109
|
}
|
|
109
110
|
}
|
|
110
111
|
|
|
111
|
-
::slotted(zui-button:not(:first-of-type))
|
|
112
|
+
::slotted(zui-button:not(:first-of-type)),
|
|
113
|
+
::slotted(zui-button-group:not(:first-of-type)) {
|
|
112
114
|
margin-top: rem(10);
|
|
113
115
|
|
|
114
116
|
@media (min-width: $bp-xxs) {
|