@empathyco/x-components 3.0.0-alpha.284 → 3.0.0-alpha.285
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/CHANGELOG.md +15 -0
- package/design-system/default-theme.css +4 -4
- package/design-system/deprecated-full-theme.css +9 -9
- package/design-system/full-theme.css +118 -118
- package/design-system/grid-default.css +4 -4
- package/js/components/base-grid.vue.js +3 -3
- package/js/components/base-grid.vue.js.map +1 -1
- package/js/components/base-grid.vue_rollup-plugin-vue_script.vue.js +1 -1
- package/js/components/base-grid.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/components/base-grid.vue_rollup-plugin-vue_styles.0.vue.js +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,21 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.0-alpha.285](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.284...@empathyco/x-components@3.0.0-alpha.285) (2023-01-17)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### ⚠ BREAKING CHANGES
|
|
10
|
+
|
|
11
|
+
* Rename `x-grid` class to `x-grid-list`.
|
|
12
|
+
* Rename `x-grid__item` class to `x-grid-list__item`.
|
|
13
|
+
* Rename `x-grid--cols-{cols}` class to `x-grid-list--cols-{cols}`.
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* rename `x-grid` class to `x-grid-list` (#1015) ([dbb5d50](https://github.com/empathyco/x/commit/dbb5d502dd9c1e69c18d137edc8be2e13bceaeb2)), closes [EX-7481](https://searchbroker.atlassian.net/browse/EX-7481)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
6
21
|
## [3.0.0-alpha.284](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.283...@empathyco/x-components@3.0.0-alpha.284) (2023-01-17)
|
|
7
22
|
|
|
8
23
|
**Note:** Version bump only for package @empathyco/x-components
|
|
@@ -679,7 +679,7 @@
|
|
|
679
679
|
--x-size-min-width-grid-item: 150px;
|
|
680
680
|
}
|
|
681
681
|
|
|
682
|
-
.x-grid {
|
|
682
|
+
.x-grid-list {
|
|
683
683
|
margin: 0;
|
|
684
684
|
display: grid;
|
|
685
685
|
grid-template-columns: repeat(auto-fill, minmax(var(--x-size-min-width-grid-item), auto));
|
|
@@ -689,14 +689,14 @@
|
|
|
689
689
|
padding: var(--x-size-padding-grid);
|
|
690
690
|
gap: var(--x-size-gap-grid);
|
|
691
691
|
}
|
|
692
|
-
.x-
|
|
692
|
+
.x-grid-list__item {
|
|
693
693
|
display: flex;
|
|
694
694
|
flex-flow: column nowrap;
|
|
695
695
|
}
|
|
696
|
-
.x-
|
|
696
|
+
.x-grid-list__item > * {
|
|
697
697
|
flex-grow: 1;
|
|
698
698
|
}
|
|
699
|
-
.x-grid--cols-auto .x-
|
|
699
|
+
.x-grid-list--cols-auto .x-grid-list__item {
|
|
700
700
|
min-width: var(--x-size-min-width-grid-item);
|
|
701
701
|
}
|
|
702
702
|
:root {
|
|
@@ -805,6 +805,15 @@
|
|
|
805
805
|
font-size: var(--x-size-base-20) !important;
|
|
806
806
|
line-height: 1.5;
|
|
807
807
|
}
|
|
808
|
+
.x-font-weight--light {
|
|
809
|
+
font-weight: var(--x-number-font-weight-base-light) !important;
|
|
810
|
+
}
|
|
811
|
+
.x-font-weight--regular {
|
|
812
|
+
font-weight: var(--x-number-font-weight-base-regular) !important;
|
|
813
|
+
}
|
|
814
|
+
.x-font-weight--bold {
|
|
815
|
+
font-weight: var(--x-number-font-weight-base-bold) !important;
|
|
816
|
+
}
|
|
808
817
|
.x-line-height--none {
|
|
809
818
|
line-height: 1 !important;
|
|
810
819
|
}
|
|
@@ -857,13 +866,4 @@
|
|
|
857
866
|
|
|
858
867
|
.x-normal-case {
|
|
859
868
|
text-transform: none;
|
|
860
|
-
}
|
|
861
|
-
.x-font-weight--light {
|
|
862
|
-
font-weight: var(--x-number-font-weight-base-light) !important;
|
|
863
|
-
}
|
|
864
|
-
.x-font-weight--regular {
|
|
865
|
-
font-weight: var(--x-number-font-weight-base-regular) !important;
|
|
866
|
-
}
|
|
867
|
-
.x-font-weight--bold {
|
|
868
|
-
font-weight: var(--x-number-font-weight-base-bold) !important;
|
|
869
869
|
}
|
|
@@ -825,7 +825,7 @@
|
|
|
825
825
|
.x-filter--justified .x-filter > *:last-child:not(.x-filter__label) {
|
|
826
826
|
margin-left: auto;
|
|
827
827
|
}
|
|
828
|
-
.x-grid {
|
|
828
|
+
.x-grid-list {
|
|
829
829
|
margin: 0;
|
|
830
830
|
display: grid;
|
|
831
831
|
grid-template-columns: repeat(auto-fill, minmax(var(--x-size-min-width-grid-item), auto));
|
|
@@ -835,14 +835,14 @@
|
|
|
835
835
|
padding: var(--x-size-padding-grid);
|
|
836
836
|
gap: var(--x-size-gap-grid);
|
|
837
837
|
}
|
|
838
|
-
.x-
|
|
838
|
+
.x-grid-list__item {
|
|
839
839
|
display: flex;
|
|
840
840
|
flex-flow: column nowrap;
|
|
841
841
|
}
|
|
842
|
-
.x-
|
|
842
|
+
.x-grid-list__item > * {
|
|
843
843
|
flex-grow: 1;
|
|
844
844
|
}
|
|
845
|
-
.x-grid--cols-auto .x-
|
|
845
|
+
.x-grid-list--cols-auto .x-grid-list__item {
|
|
846
846
|
min-width: var(--x-size-min-width-grid-item);
|
|
847
847
|
}
|
|
848
848
|
:root {
|
|
@@ -899,6 +899,10 @@
|
|
|
899
899
|
--x-size-width-icon-default: var(--x-size-width-icon-s);
|
|
900
900
|
--x-size-height-icon-default: var(--x-size-height-icon-s);
|
|
901
901
|
}
|
|
902
|
+
:root {
|
|
903
|
+
--x-size-width-icon-s: var(--x-size-base-03);
|
|
904
|
+
--x-size-height-icon-s: var(--x-size-base-03);
|
|
905
|
+
}
|
|
902
906
|
.x-icon--xl {
|
|
903
907
|
--x-size-width-icon-default: var(--x-size-width-icon-xl);
|
|
904
908
|
--x-size-height-icon-default: var(--x-size-height-icon-xl);
|
|
@@ -2542,117 +2546,6 @@
|
|
|
2542
2546
|
--x-number-font-weight-base-regular
|
|
2543
2547
|
);
|
|
2544
2548
|
}
|
|
2545
|
-
.x-option-list {
|
|
2546
|
-
display: inline-flex;
|
|
2547
|
-
flex-flow: row nowrap;
|
|
2548
|
-
align-items: center;
|
|
2549
|
-
box-sizing: border-box;
|
|
2550
|
-
list-style-type: none;
|
|
2551
|
-
margin: 0;
|
|
2552
|
-
padding: 0;
|
|
2553
|
-
}
|
|
2554
|
-
[dir="ltr"] .x-option-list__item {
|
|
2555
|
-
border-right-width: var(--x-size-border-width-right-option-list-item-default);
|
|
2556
|
-
}
|
|
2557
|
-
[dir="rtl"] .x-option-list__item {
|
|
2558
|
-
border-left-width: var(--x-size-border-width-right-option-list-item-default);
|
|
2559
|
-
}
|
|
2560
|
-
[dir="ltr"] .x-option-list__item {
|
|
2561
|
-
border-left-width: var(--x-size-border-width-left-option-list-item-default);
|
|
2562
|
-
}
|
|
2563
|
-
[dir="rtl"] .x-option-list__item {
|
|
2564
|
-
border-right-width: var(--x-size-border-width-left-option-list-item-default);
|
|
2565
|
-
}
|
|
2566
|
-
.x-option-list__item {
|
|
2567
|
-
border-top-color: var(--x-color-border-top-option-list-item-default);
|
|
2568
|
-
border-right-color: var(--x-color-border-right-option-list-item-default);
|
|
2569
|
-
border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
|
|
2570
|
-
border-left-color: var(--x-color-border-left-option-list-item-default);
|
|
2571
|
-
border-style: solid;
|
|
2572
|
-
border-top-width: var(--x-size-border-width-top-option-list-item-default);
|
|
2573
|
-
border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
|
|
2574
|
-
}
|
|
2575
|
-
.x-option-list__item.x-option-list__item--is-selected {
|
|
2576
|
-
--x-color-border-option-list-item-default: var(
|
|
2577
|
-
--x-color-border-option-list-item-default-selected
|
|
2578
|
-
);
|
|
2579
|
-
--x-color-border-top-option-list-item-default: var(
|
|
2580
|
-
--x-color-border-top-option-list-item-default-selected
|
|
2581
|
-
);
|
|
2582
|
-
--x-color-border-right-option-list-item-default: var(
|
|
2583
|
-
--x-color-border-right-option-list-item-default-selected
|
|
2584
|
-
);
|
|
2585
|
-
--x-color-border-bottom-option-list-item-default: var(
|
|
2586
|
-
--x-color-border-bottom-option-list-item-default-selected
|
|
2587
|
-
);
|
|
2588
|
-
--x-color-border-left-option-list-item-default: var(
|
|
2589
|
-
--x-color-border-left-option-list-item-default-selected
|
|
2590
|
-
);
|
|
2591
|
-
--x-size-border-width-top-option-list-item-default: var(
|
|
2592
|
-
--x-size-border-width-top-option-list-item-default-selected
|
|
2593
|
-
);
|
|
2594
|
-
--x-size-border-width-right-option-list-item-default: var(
|
|
2595
|
-
--x-size-border-width-right-option-list-item-default-selected
|
|
2596
|
-
);
|
|
2597
|
-
--x-size-border-width-bottom-option-list-item-default: var(
|
|
2598
|
-
--x-size-border-width-bottom-option-list-item-default-selected
|
|
2599
|
-
);
|
|
2600
|
-
--x-size-border-width-left-option-list-item-default: var(
|
|
2601
|
-
--x-size-border-width-left-option-list-item-default-selected
|
|
2602
|
-
);
|
|
2603
|
-
}
|
|
2604
|
-
.x-option-list__item.x-option-list__item--is-selected .x-button {
|
|
2605
|
-
--x-color-background-button-default: var(
|
|
2606
|
-
--x-color-background-option-list-button-default-selected
|
|
2607
|
-
);
|
|
2608
|
-
--x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
|
|
2609
|
-
--x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
|
|
2610
|
-
--x-number-font-weight-option-list-button-default: var(
|
|
2611
|
-
--x-number-font-weight-option-list-button-default-selected
|
|
2612
|
-
);
|
|
2613
|
-
}
|
|
2614
|
-
.x-option-list__item.x-option-list__item--is-selected .x-button:hover {
|
|
2615
|
-
--x-color-background-button-default: var(
|
|
2616
|
-
--x-color-background-option-list-button-default-selected-hover
|
|
2617
|
-
);
|
|
2618
|
-
--x-color-border-button-default: var(
|
|
2619
|
-
--x-color-border-option-list-button-default-selected-hover
|
|
2620
|
-
);
|
|
2621
|
-
--x-color-text-button-default: var(
|
|
2622
|
-
--x-color-text-option-list-button-default-selected-hover
|
|
2623
|
-
);
|
|
2624
|
-
}
|
|
2625
|
-
.x-option-list__item:last-child {
|
|
2626
|
-
--x-size-border-width-option-list-item-default: 0;
|
|
2627
|
-
--x-size-border-width-top-option-list-item-default: 0;
|
|
2628
|
-
--x-size-border-width-right-option-list-item-default: 0;
|
|
2629
|
-
--x-size-border-width-bottom-option-list-item-default: 0;
|
|
2630
|
-
--x-size-border-width-left-option-list-item-default: 0;
|
|
2631
|
-
}
|
|
2632
|
-
.x-option-list__item .x-button {
|
|
2633
|
-
--x-color-background-button-default: var(--x-color-background-option-list-button-default);
|
|
2634
|
-
--x-color-border-button-default: var(--x-color-border-option-list-button-default);
|
|
2635
|
-
--x-color-text-button-default: var(--x-color-text-option-list-button-default);
|
|
2636
|
-
min-height: auto;
|
|
2637
|
-
--x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
|
|
2638
|
-
--x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
|
|
2639
|
-
--x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
|
|
2640
|
-
--x-size-padding-bottom-button-default: var(
|
|
2641
|
-
--x-size-padding-bottom-option-list-button-default
|
|
2642
|
-
);
|
|
2643
|
-
--x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
|
|
2644
|
-
--x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
|
|
2645
|
-
--x-size-font-button-default: var(--x-size-font-option-list-button-default);
|
|
2646
|
-
}
|
|
2647
|
-
.x-option-list__item .x-button:hover {
|
|
2648
|
-
--x-color-background-button-default: var(
|
|
2649
|
-
--x-color-background-option-list-button-default-hover
|
|
2650
|
-
);
|
|
2651
|
-
--x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
|
|
2652
|
-
--x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
|
|
2653
|
-
-webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
|
|
2654
|
-
text-decoration: var(--x-font-decoration-option-list-button-default-hover);
|
|
2655
|
-
}
|
|
2656
2549
|
:root {
|
|
2657
2550
|
--x-color-background-option-list-button-default: transparent;
|
|
2658
2551
|
--x-color-border-option-list-button-default: transparent;
|
|
@@ -6666,7 +6559,114 @@
|
|
|
6666
6559
|
position: sticky !important;
|
|
6667
6560
|
}
|
|
6668
6561
|
|
|
6669
|
-
|
|
6670
|
-
|
|
6671
|
-
|
|
6562
|
+
.x-option-list {
|
|
6563
|
+
display: inline-flex;
|
|
6564
|
+
flex-flow: row nowrap;
|
|
6565
|
+
align-items: center;
|
|
6566
|
+
box-sizing: border-box;
|
|
6567
|
+
list-style-type: none;
|
|
6568
|
+
margin: 0;
|
|
6569
|
+
padding: 0;
|
|
6570
|
+
}
|
|
6571
|
+
[dir="ltr"] .x-option-list__item {
|
|
6572
|
+
border-right-width: var(--x-size-border-width-right-option-list-item-default);
|
|
6573
|
+
}
|
|
6574
|
+
[dir="rtl"] .x-option-list__item {
|
|
6575
|
+
border-left-width: var(--x-size-border-width-right-option-list-item-default);
|
|
6576
|
+
}
|
|
6577
|
+
[dir="ltr"] .x-option-list__item {
|
|
6578
|
+
border-left-width: var(--x-size-border-width-left-option-list-item-default);
|
|
6579
|
+
}
|
|
6580
|
+
[dir="rtl"] .x-option-list__item {
|
|
6581
|
+
border-right-width: var(--x-size-border-width-left-option-list-item-default);
|
|
6582
|
+
}
|
|
6583
|
+
.x-option-list__item {
|
|
6584
|
+
border-top-color: var(--x-color-border-top-option-list-item-default);
|
|
6585
|
+
border-right-color: var(--x-color-border-right-option-list-item-default);
|
|
6586
|
+
border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
|
|
6587
|
+
border-left-color: var(--x-color-border-left-option-list-item-default);
|
|
6588
|
+
border-style: solid;
|
|
6589
|
+
border-top-width: var(--x-size-border-width-top-option-list-item-default);
|
|
6590
|
+
border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
|
|
6591
|
+
}
|
|
6592
|
+
.x-option-list__item.x-option-list__item--is-selected {
|
|
6593
|
+
--x-color-border-option-list-item-default: var(
|
|
6594
|
+
--x-color-border-option-list-item-default-selected
|
|
6595
|
+
);
|
|
6596
|
+
--x-color-border-top-option-list-item-default: var(
|
|
6597
|
+
--x-color-border-top-option-list-item-default-selected
|
|
6598
|
+
);
|
|
6599
|
+
--x-color-border-right-option-list-item-default: var(
|
|
6600
|
+
--x-color-border-right-option-list-item-default-selected
|
|
6601
|
+
);
|
|
6602
|
+
--x-color-border-bottom-option-list-item-default: var(
|
|
6603
|
+
--x-color-border-bottom-option-list-item-default-selected
|
|
6604
|
+
);
|
|
6605
|
+
--x-color-border-left-option-list-item-default: var(
|
|
6606
|
+
--x-color-border-left-option-list-item-default-selected
|
|
6607
|
+
);
|
|
6608
|
+
--x-size-border-width-top-option-list-item-default: var(
|
|
6609
|
+
--x-size-border-width-top-option-list-item-default-selected
|
|
6610
|
+
);
|
|
6611
|
+
--x-size-border-width-right-option-list-item-default: var(
|
|
6612
|
+
--x-size-border-width-right-option-list-item-default-selected
|
|
6613
|
+
);
|
|
6614
|
+
--x-size-border-width-bottom-option-list-item-default: var(
|
|
6615
|
+
--x-size-border-width-bottom-option-list-item-default-selected
|
|
6616
|
+
);
|
|
6617
|
+
--x-size-border-width-left-option-list-item-default: var(
|
|
6618
|
+
--x-size-border-width-left-option-list-item-default-selected
|
|
6619
|
+
);
|
|
6620
|
+
}
|
|
6621
|
+
.x-option-list__item.x-option-list__item--is-selected .x-button {
|
|
6622
|
+
--x-color-background-button-default: var(
|
|
6623
|
+
--x-color-background-option-list-button-default-selected
|
|
6624
|
+
);
|
|
6625
|
+
--x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
|
|
6626
|
+
--x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
|
|
6627
|
+
--x-number-font-weight-option-list-button-default: var(
|
|
6628
|
+
--x-number-font-weight-option-list-button-default-selected
|
|
6629
|
+
);
|
|
6630
|
+
}
|
|
6631
|
+
.x-option-list__item.x-option-list__item--is-selected .x-button:hover {
|
|
6632
|
+
--x-color-background-button-default: var(
|
|
6633
|
+
--x-color-background-option-list-button-default-selected-hover
|
|
6634
|
+
);
|
|
6635
|
+
--x-color-border-button-default: var(
|
|
6636
|
+
--x-color-border-option-list-button-default-selected-hover
|
|
6637
|
+
);
|
|
6638
|
+
--x-color-text-button-default: var(
|
|
6639
|
+
--x-color-text-option-list-button-default-selected-hover
|
|
6640
|
+
);
|
|
6641
|
+
}
|
|
6642
|
+
.x-option-list__item:last-child {
|
|
6643
|
+
--x-size-border-width-option-list-item-default: 0;
|
|
6644
|
+
--x-size-border-width-top-option-list-item-default: 0;
|
|
6645
|
+
--x-size-border-width-right-option-list-item-default: 0;
|
|
6646
|
+
--x-size-border-width-bottom-option-list-item-default: 0;
|
|
6647
|
+
--x-size-border-width-left-option-list-item-default: 0;
|
|
6648
|
+
}
|
|
6649
|
+
.x-option-list__item .x-button {
|
|
6650
|
+
--x-color-background-button-default: var(--x-color-background-option-list-button-default);
|
|
6651
|
+
--x-color-border-button-default: var(--x-color-border-option-list-button-default);
|
|
6652
|
+
--x-color-text-button-default: var(--x-color-text-option-list-button-default);
|
|
6653
|
+
min-height: auto;
|
|
6654
|
+
--x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
|
|
6655
|
+
--x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
|
|
6656
|
+
--x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
|
|
6657
|
+
--x-size-padding-bottom-button-default: var(
|
|
6658
|
+
--x-size-padding-bottom-option-list-button-default
|
|
6659
|
+
);
|
|
6660
|
+
--x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
|
|
6661
|
+
--x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
|
|
6662
|
+
--x-size-font-button-default: var(--x-size-font-option-list-button-default);
|
|
6663
|
+
}
|
|
6664
|
+
.x-option-list__item .x-button:hover {
|
|
6665
|
+
--x-color-background-button-default: var(
|
|
6666
|
+
--x-color-background-option-list-button-default-hover
|
|
6667
|
+
);
|
|
6668
|
+
--x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
|
|
6669
|
+
--x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
|
|
6670
|
+
-webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
|
|
6671
|
+
text-decoration: var(--x-font-decoration-option-list-button-default-hover);
|
|
6672
6672
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
--x-size-min-width-grid-item: 150px;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
.x-grid {
|
|
7
|
+
.x-grid-list {
|
|
8
8
|
margin: 0;
|
|
9
9
|
display: grid;
|
|
10
10
|
grid-template-columns: repeat(auto-fill, minmax(var(--x-size-min-width-grid-item), auto));
|
|
@@ -14,13 +14,13 @@
|
|
|
14
14
|
padding: var(--x-size-padding-grid);
|
|
15
15
|
gap: var(--x-size-gap-grid);
|
|
16
16
|
}
|
|
17
|
-
.x-
|
|
17
|
+
.x-grid-list__item {
|
|
18
18
|
display: flex;
|
|
19
19
|
flex-flow: column nowrap;
|
|
20
20
|
}
|
|
21
|
-
.x-
|
|
21
|
+
.x-grid-list__item > * {
|
|
22
22
|
flex-grow: 1;
|
|
23
23
|
}
|
|
24
|
-
.x-grid--cols-auto .x-
|
|
24
|
+
.x-grid-list--cols-auto .x-grid-list__item {
|
|
25
25
|
min-width: var(--x-size-min-width-grid-item);
|
|
26
26
|
}
|
|
@@ -13,7 +13,7 @@ var __vue_render__ = function () {
|
|
|
13
13
|
_vm.animation,
|
|
14
14
|
{
|
|
15
15
|
tag: "component",
|
|
16
|
-
staticClass: "x-grid x-base-grid",
|
|
16
|
+
staticClass: "x-grid-list x-base-grid",
|
|
17
17
|
class: _vm.cssClasses,
|
|
18
18
|
style: _vm.style,
|
|
19
19
|
attrs: { tag: "ul", "data-test": "grid" },
|
|
@@ -26,7 +26,7 @@ var __vue_render__ = function () {
|
|
|
26
26
|
"li",
|
|
27
27
|
{
|
|
28
28
|
key: item.id,
|
|
29
|
-
staticClass: "x-
|
|
29
|
+
staticClass: "x-grid-list__item x-base-grid__item",
|
|
30
30
|
class: cssClass,
|
|
31
31
|
},
|
|
32
32
|
[
|
|
@@ -56,7 +56,7 @@ __vue_render__._withStripped = true;
|
|
|
56
56
|
/* style */
|
|
57
57
|
const __vue_inject_styles__ = undefined;
|
|
58
58
|
/* scoped */
|
|
59
|
-
const __vue_scope_id__ = "data-v-
|
|
59
|
+
const __vue_scope_id__ = "data-v-3b62670c";
|
|
60
60
|
/* module identifier */
|
|
61
61
|
const __vue_module_identifier__ = undefined;
|
|
62
62
|
/* functional template */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-grid.vue.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n :style=\"style\"\n class=\"x-grid x-base-grid\"\n :class=\"cssClasses\"\n tag=\"ul\"\n data-test=\"grid\"\n >\n <li\n v-for=\"{ slotName, item, cssClass } in gridItems\"\n :key=\"item.id\"\n :class=\"cssClass\"\n class=\"x-
|
|
1
|
+
{"version":3,"file":"base-grid.vue.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n :style=\"style\"\n class=\"x-grid-list x-base-grid\"\n :class=\"cssClasses\"\n tag=\"ul\"\n data-test=\"grid\"\n >\n <li\n v-for=\"{ slotName, item, cssClass } in gridItems\"\n :key=\"item.id\"\n :class=\"cssClass\"\n class=\"x-grid-list__item x-base-grid__item\"\n >\n <!--\n @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n the item using that slot composition to render.\n @binding {item} item - Item to render\n -->\n <slot v-if=\"$scopedSlots[slotName]\" :name=\"slotName\" :item=\"item\" />\n <!--\n @slot (required) Default item rendering. This slot will be used by default for rendering\n the item without an specific slot implementation.\n @binding {item} item - Item to render\n -->\n <slot v-else :item=\"item\">{{ item.name || item.modelName || item.id || item }}</slot>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { toKebabCase } from '../utils/string';\n import { ListItem, VueCSSClasses } from '../utils/types';\n import { XEmit } from './decorators/bus.decorators';\n import { XInject } from './decorators/injection.decorators';\n import { LIST_ITEMS_KEY } from './decorators/injection.consts';\n\n /**\n * The type returned by the gridItems function. Basically it's a list of items with its CSS\n * classes and a slotName.\n *\n * @internal\n */\n interface GridItem {\n slotName: string;\n item: ListItem;\n cssClass: VueCSSClasses;\n }\n\n /**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\n @Component({})\n export default class BaseGrid extends Vue {\n /**\n * Animation component that will be used to animate the base grid.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n * columns mode to auto-fill.\n *\n * @public\n */\n @Prop({ default: 0 })\n protected columns!: number;\n\n /**\n * The list of items to be rendered.\n *\n * @remarks The items must have an id property.\n *\n * @public\n */\n @Prop()\n protected items!: ListItem[];\n\n /**\n * It injects {@link ListItem} provided by an ancestor.\n *\n * @internal\n */\n @XInject(LIST_ITEMS_KEY)\n public injectedListItems!: ListItem[];\n\n /**\n * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged | RenderedColumnsNumberChanged}\n * event whenever the number of columns rendered inside the grid changes.\n *\n * @internal\n */\n @XEmit('RenderedColumnsNumberChanged', { immediate: false })\n public renderedColumnsNumber = 0;\n\n /**\n * It returns the items passed as props or the injected ones.\n *\n * @returns List of grid items.\n *\n * @public\n */\n protected get computedItems(): ListItem[] {\n return (\n this.items ??\n this.injectedListItems ??\n //TODO: add here logger\n //eslint-disable-next-line no-console\n console.warn('It is necessary to pass a prop or inject the list of filters')\n );\n }\n\n /**\n * CSS class based on the column property value so items inside the grid can fill different\n * amount of columns or rows based on how many columns the grid is divided into.\n *\n * @returns CSS class with the column property value.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return this.columns ? `x-grid-list--cols-${this.columns}` : 'x-grid-list--cols-auto';\n }\n\n /**\n * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n * the column property value.\n *\n * @returns A CSSStyleDeclaration to use as the style attribute.\n *\n * @internal\n */\n protected get style(): Partial<CSSStyleDeclaration> {\n return {\n gridTemplateColumns: this.columns\n ? `repeat(${this.columns}, minmax(0, 1fr))`\n : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'\n };\n }\n\n /**\n * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n *\n * @returns An array of objects containing the item and its CSS class.\n *\n * @internal\n */\n protected get gridItems(): GridItem[] {\n return this.computedItems.map(item => {\n const slotName = toKebabCase(item.modelName);\n return {\n slotName,\n item,\n cssClass: `x-base-grid__${slotName}`\n };\n });\n }\n\n /**\n * Initialises the rendered columns number and sets a ResizeObserver to keep it updated.\n *\n * @internal\n */\n protected mounted(): void {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const resizeObserver = new ResizeObserver(this.updateRenderedColumnsNumber);\n resizeObserver.observe(this.$el);\n this.$on('hook:beforeDestroy', () => {\n resizeObserver.disconnect();\n });\n }\n\n /**\n * Updates the number of columns rendered inside the grid.\n *\n * @internal\n */\n protected updateRenderedColumnsNumber(): void {\n const { gridTemplateColumns } = getComputedStyle(this.$el);\n this.renderedColumnsNumber = gridTemplateColumns.split(' ').length;\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-base-grid {\n padding: var(--x-size-padding-grid, 0);\n margin: 0;\n display: grid;\n grid-auto-flow: dense;\n list-style: none;\n\n &__banner,\n &__next-queries-group {\n grid-column-start: 1;\n grid-column-end: -1;\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n <BaseGrid :items=\"items\">\n <template #default=\"{ item }\">\n {{ `Default slot content: ${item.id}` }}\n </template>\n </BaseGrid>\n</template>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n <BaseGrid :items=\"items\" :columns=\"12\">\n <template #default=\"{ item }\">\n {{ `Default slot content: ${item.id}` }}\n </template>\n </BaseGrid>\n</template>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n <BaseGrid :animation=\"animation\" :items=\"items\">\n <template #banner=\"{ item }\">\n <span class=\"banner\">\n {{ `${item.title} banner` }}\n </span>\n </template>\n <template #next-queries=\"{ item }\">\n <span>\n {{ `${item.totalResults} next queries` }}\n </span>\n </template>\n <template #promoted=\"{ item }\">\n <span class=\"promoted\">\n {{ `${item.title} promoted` }}\n </span>\n </template>\n <template #result=\"{ item }\">\n <BaseResultLink :result=\"item\">\n {{ item.name }}\n </BaseResultLink>\n </template>\n </BaseGrid>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -50,7 +50,7 @@ let BaseGrid = class BaseGrid extends Vue {
|
|
|
50
50
|
* @internal
|
|
51
51
|
*/
|
|
52
52
|
get cssClasses() {
|
|
53
|
-
return this.columns ? `x-grid--cols-${this.columns}` : 'x-grid--cols-auto';
|
|
53
|
+
return this.columns ? `x-grid-list--cols-${this.columns}` : 'x-grid-list--cols-auto';
|
|
54
54
|
}
|
|
55
55
|
/**
|
|
56
56
|
* CSSStyleDeclaration object specifying the number of columns the grid is divided into based on
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-grid.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/base-grid.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { toKebabCase } from '../utils/string';\n import { ListItem, VueCSSClasses } from '../utils/types';\n import { XEmit } from './decorators/bus.decorators';\n import { XInject } from './decorators/injection.decorators';\n import { LIST_ITEMS_KEY } from './decorators/injection.consts';\n\n /**\n * The type returned by the gridItems function. Basically it's a list of items with its CSS\n * classes and a slotName.\n *\n * @internal\n */\n interface GridItem {\n slotName: string;\n item: ListItem;\n cssClass: VueCSSClasses;\n }\n\n /**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\n @Component({})\n export default class BaseGrid extends Vue {\n /**\n * Animation component that will be used to animate the base grid.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n * columns mode to auto-fill.\n *\n * @public\n */\n @Prop({ default: 0 })\n protected columns!: number;\n\n /**\n * The list of items to be rendered.\n *\n * @remarks The items must have an id property.\n *\n * @public\n */\n @Prop()\n protected items!: ListItem[];\n\n /**\n * It injects {@link ListItem} provided by an ancestor.\n *\n * @internal\n */\n @XInject(LIST_ITEMS_KEY)\n public injectedListItems!: ListItem[];\n\n /**\n * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged | RenderedColumnsNumberChanged}\n * event whenever the number of columns rendered inside the grid changes.\n *\n * @internal\n */\n @XEmit('RenderedColumnsNumberChanged', { immediate: false })\n public renderedColumnsNumber = 0;\n\n /**\n * It returns the items passed as props or the injected ones.\n *\n * @returns List of grid items.\n *\n * @public\n */\n protected get computedItems(): ListItem[] {\n return (\n this.items ??\n this.injectedListItems ??\n //TODO: add here logger\n //eslint-disable-next-line no-console\n console.warn('It is necessary to pass a prop or inject the list of filters')\n );\n }\n\n /**\n * CSS class based on the column property value so items inside the grid can fill different\n * amount of columns or rows based on how many columns the grid is divided into.\n *\n * @returns CSS class with the column property value.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return this.columns ? `x-grid--cols-${this.columns}` : 'x-grid--cols-auto';\n }\n\n /**\n * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n * the column property value.\n *\n * @returns A CSSStyleDeclaration to use as the style attribute.\n *\n * @internal\n */\n protected get style(): Partial<CSSStyleDeclaration> {\n return {\n gridTemplateColumns: this.columns\n ? `repeat(${this.columns}, minmax(0, 1fr))`\n : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'\n };\n }\n\n /**\n * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n *\n * @returns An array of objects containing the item and its CSS class.\n *\n * @internal\n */\n protected get gridItems(): GridItem[] {\n return this.computedItems.map(item => {\n const slotName = toKebabCase(item.modelName);\n return {\n slotName,\n item,\n cssClass: `x-base-grid__${slotName}`\n };\n });\n }\n\n /**\n * Initialises the rendered columns number and sets a ResizeObserver to keep it updated.\n *\n * @internal\n */\n protected mounted(): void {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const resizeObserver = new ResizeObserver(this.updateRenderedColumnsNumber);\n resizeObserver.observe(this.$el);\n this.$on('hook:beforeDestroy', () => {\n resizeObserver.disconnect();\n });\n }\n\n /**\n * Updates the number of columns rendered inside the grid.\n *\n * @internal\n */\n protected updateRenderedColumnsNumber(): void {\n const { gridTemplateColumns } = getComputedStyle(this.$el);\n this.renderedColumnsNumber = gridTemplateColumns.split(' ').length;\n }\n }\n"],"names":[],"mappings":";;;;;;;;AAoDE;;;;;;;;;AASG;AAEH,IAAqB,QAAQ,GAA7B,MAAqB,QAAS,SAAQ,GAAG,CAAA;AAAzC,IAAA,WAAA,GAAA;;AAoCE;;;;;AAKG;QAEI,IAAqB,CAAA,qBAAA,GAAG,CAAC,CAAC;KAwFlC;AAtFC;;;;;;AAMG;AACH,IAAA,IAAc,aAAa,GAAA;QACzB,QACE,IAAI,CAAC,KAAK;AACV,YAAA,IAAI,CAAC,iBAAiB;;;AAGtB,YAAA,OAAO,CAAC,IAAI,CAAC,8DAA8D,CAAC,EAC5E;KACH;AAED;;;;;;;AAOG;AACH,IAAA,IAAc,UAAU,GAAA;AACtB,QAAA,OAAO,IAAI,CAAC,OAAO,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"base-grid.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/base-grid.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { toKebabCase } from '../utils/string';\n import { ListItem, VueCSSClasses } from '../utils/types';\n import { XEmit } from './decorators/bus.decorators';\n import { XInject } from './decorators/injection.decorators';\n import { LIST_ITEMS_KEY } from './decorators/injection.consts';\n\n /**\n * The type returned by the gridItems function. Basically it's a list of items with its CSS\n * classes and a slotName.\n *\n * @internal\n */\n interface GridItem {\n slotName: string;\n item: ListItem;\n cssClass: VueCSSClasses;\n }\n\n /**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\n @Component({})\n export default class BaseGrid extends Vue {\n /**\n * Animation component that will be used to animate the base grid.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n * columns mode to auto-fill.\n *\n * @public\n */\n @Prop({ default: 0 })\n protected columns!: number;\n\n /**\n * The list of items to be rendered.\n *\n * @remarks The items must have an id property.\n *\n * @public\n */\n @Prop()\n protected items!: ListItem[];\n\n /**\n * It injects {@link ListItem} provided by an ancestor.\n *\n * @internal\n */\n @XInject(LIST_ITEMS_KEY)\n public injectedListItems!: ListItem[];\n\n /**\n * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged | RenderedColumnsNumberChanged}\n * event whenever the number of columns rendered inside the grid changes.\n *\n * @internal\n */\n @XEmit('RenderedColumnsNumberChanged', { immediate: false })\n public renderedColumnsNumber = 0;\n\n /**\n * It returns the items passed as props or the injected ones.\n *\n * @returns List of grid items.\n *\n * @public\n */\n protected get computedItems(): ListItem[] {\n return (\n this.items ??\n this.injectedListItems ??\n //TODO: add here logger\n //eslint-disable-next-line no-console\n console.warn('It is necessary to pass a prop or inject the list of filters')\n );\n }\n\n /**\n * CSS class based on the column property value so items inside the grid can fill different\n * amount of columns or rows based on how many columns the grid is divided into.\n *\n * @returns CSS class with the column property value.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return this.columns ? `x-grid-list--cols-${this.columns}` : 'x-grid-list--cols-auto';\n }\n\n /**\n * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n * the column property value.\n *\n * @returns A CSSStyleDeclaration to use as the style attribute.\n *\n * @internal\n */\n protected get style(): Partial<CSSStyleDeclaration> {\n return {\n gridTemplateColumns: this.columns\n ? `repeat(${this.columns}, minmax(0, 1fr))`\n : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'\n };\n }\n\n /**\n * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n *\n * @returns An array of objects containing the item and its CSS class.\n *\n * @internal\n */\n protected get gridItems(): GridItem[] {\n return this.computedItems.map(item => {\n const slotName = toKebabCase(item.modelName);\n return {\n slotName,\n item,\n cssClass: `x-base-grid__${slotName}`\n };\n });\n }\n\n /**\n * Initialises the rendered columns number and sets a ResizeObserver to keep it updated.\n *\n * @internal\n */\n protected mounted(): void {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const resizeObserver = new ResizeObserver(this.updateRenderedColumnsNumber);\n resizeObserver.observe(this.$el);\n this.$on('hook:beforeDestroy', () => {\n resizeObserver.disconnect();\n });\n }\n\n /**\n * Updates the number of columns rendered inside the grid.\n *\n * @internal\n */\n protected updateRenderedColumnsNumber(): void {\n const { gridTemplateColumns } = getComputedStyle(this.$el);\n this.renderedColumnsNumber = gridTemplateColumns.split(' ').length;\n }\n }\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
|
|
2
2
|
|
|
3
|
-
var css = ".x-base-grid[data-v-
|
|
3
|
+
var css = ".x-base-grid[data-v-3b62670c] {\n padding: var(--x-size-padding-grid, 0);\n margin: 0;\n display: grid;\n grid-auto-flow: dense;\n list-style: none;\n}\n.x-base-grid__banner[data-v-3b62670c], .x-base-grid__next-queries-group[data-v-3b62670c] {\n grid-column-start: 1;\n grid-column-end: -1;\n}";
|
|
4
4
|
const isBrowser = /*#__PURE__*/ (function () {
|
|
5
5
|
return (
|
|
6
6
|
Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.285",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -138,5 +138,5 @@
|
|
|
138
138
|
"access": "public",
|
|
139
139
|
"directory": "dist"
|
|
140
140
|
},
|
|
141
|
-
"gitHead": "
|
|
141
|
+
"gitHead": "785ef3c79d456e8abd89af0b0257af4b07c6107f"
|
|
142
142
|
}
|