@empathyco/x-components 3.0.0-alpha.133 → 3.0.0-alpha.136
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 +39 -0
- package/design-system/full-theme.css +143 -144
- package/js/components/layouts/layouts.mixin.js +1 -1
- package/js/components/layouts/layouts.mixin.js.map +1 -1
- package/js/components/layouts/single-column-layout.vue.js +2 -2
- package/js/components/layouts/single-column-layout.vue.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,45 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.0-alpha.136](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.135...@empathyco/x-components@3.0.0-alpha.136) (2022-07-21)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- `pointer-events` affecting scrolling in sliding panel in `SingleColumnLayout` aside (#614)
|
|
11
|
+
([1463bc1](https://github.com/empathyco/x/commit/1463bc1d5dd1fbd9c279077d7240329b853f82be)),
|
|
12
|
+
closes [EX-6595](https://searchbroker.atlassian.net/browse/EX-6595)
|
|
13
|
+
|
|
14
|
+
# Change Log
|
|
15
|
+
|
|
16
|
+
All notable changes to this project will be documented in this file. See
|
|
17
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
18
|
+
|
|
19
|
+
## [3.0.0-alpha.135](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.134...@empathyco/x-components@3.0.0-alpha.135) (2022-07-21)
|
|
20
|
+
|
|
21
|
+
### Testing
|
|
22
|
+
|
|
23
|
+
- **e2e:** search modal re-opens properly after being closed (#613)
|
|
24
|
+
([43282ab](https://github.com/empathyco/x/commit/43282ab1d0ab54af7794c88c89aa8e62326d73d8)),
|
|
25
|
+
closes [EX-6708](https://searchbroker.atlassian.net/browse/EX-6708)
|
|
26
|
+
|
|
27
|
+
# Change Log
|
|
28
|
+
|
|
29
|
+
All notable changes to this project will be documented in this file. See
|
|
30
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
31
|
+
|
|
32
|
+
## [3.0.0-alpha.134](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.133...@empathyco/x-components@3.0.0-alpha.134) (2022-07-20)
|
|
33
|
+
|
|
34
|
+
### Bug Fixes
|
|
35
|
+
|
|
36
|
+
- **components:** now properly checks if a has content (#612)
|
|
37
|
+
([ad2f6dc](https://github.com/empathyco/x/commit/ad2f6dc522d9da59dde2e2c5f90510c0f93380ab)),
|
|
38
|
+
closes [EX-6681](https://searchbroker.atlassian.net/browse/EX-6681)
|
|
39
|
+
|
|
40
|
+
# Change Log
|
|
41
|
+
|
|
42
|
+
All notable changes to this project will be documented in this file. See
|
|
43
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
44
|
+
|
|
6
45
|
## [3.0.0-alpha.133](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.132...@empathyco/x-components@3.0.0-alpha.133) (2022-07-15)
|
|
7
46
|
|
|
8
47
|
### Bug Fixes
|
|
@@ -1567,6 +1567,149 @@
|
|
|
1567
1567
|
--x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
|
|
1568
1568
|
--x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
|
|
1569
1569
|
}
|
|
1570
|
+
.x-list {
|
|
1571
|
+
display: flex;
|
|
1572
|
+
flex-flow: var(--x-string-flow-list);
|
|
1573
|
+
list-style: none;
|
|
1574
|
+
gap: var(--x-size-gap-list);
|
|
1575
|
+
margin: 0;
|
|
1576
|
+
padding: var(--x-size-padding-list);
|
|
1577
|
+
justify-content: var(--x-size-justify-list);
|
|
1578
|
+
align-items: var(--x-size-align-list);
|
|
1579
|
+
min-width: 0;
|
|
1580
|
+
}
|
|
1581
|
+
@media not all and (min-resolution: 0.001dpcm) {
|
|
1582
|
+
.x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
|
|
1583
|
+
gap: 0;
|
|
1584
|
+
}
|
|
1585
|
+
.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
|
|
1586
|
+
margin-bottom: var(--x-size-gap-list);
|
|
1587
|
+
}
|
|
1588
|
+
}
|
|
1589
|
+
@media not all and (min-resolution: 0.001dpcm) {
|
|
1590
|
+
.x-list.x-list--horizontal {
|
|
1591
|
+
gap: 0;
|
|
1592
|
+
}
|
|
1593
|
+
.x-list.x-list--horizontal > *:not(:last-child) {
|
|
1594
|
+
margin-right: var(--x-size-gap-list);
|
|
1595
|
+
}
|
|
1596
|
+
}
|
|
1597
|
+
@media not all and (min-resolution: 0.001dpcm) {
|
|
1598
|
+
.x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
|
|
1599
|
+
gap: 0;
|
|
1600
|
+
}
|
|
1601
|
+
.x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
|
|
1602
|
+
margin-right: var(--x-size-gap-list);
|
|
1603
|
+
margin-bottom: var(--x-size-gap-list);
|
|
1604
|
+
}
|
|
1605
|
+
}
|
|
1606
|
+
|
|
1607
|
+
.x-list--vertical.x-list {
|
|
1608
|
+
flex-flow: column nowrap;
|
|
1609
|
+
}
|
|
1610
|
+
|
|
1611
|
+
.x-list--horizontal.x-list {
|
|
1612
|
+
flex-flow: row nowrap;
|
|
1613
|
+
}
|
|
1614
|
+
|
|
1615
|
+
.x-list--wrap.x-list {
|
|
1616
|
+
flex-flow: row wrap;
|
|
1617
|
+
}
|
|
1618
|
+
|
|
1619
|
+
.x-list--wrap-reverse.x-list {
|
|
1620
|
+
flex-flow: row wrap-reverse;
|
|
1621
|
+
}
|
|
1622
|
+
|
|
1623
|
+
.x-list--justify-stretch.x-list {
|
|
1624
|
+
justify-content: stretch;
|
|
1625
|
+
}
|
|
1626
|
+
|
|
1627
|
+
.x-list--justify-center.x-list {
|
|
1628
|
+
justify-content: center;
|
|
1629
|
+
}
|
|
1630
|
+
|
|
1631
|
+
.x-list--justify-end.x-list {
|
|
1632
|
+
justify-content: flex-end;
|
|
1633
|
+
}
|
|
1634
|
+
|
|
1635
|
+
.x-list--justify-start.x-list {
|
|
1636
|
+
justify-content: flex-start;
|
|
1637
|
+
}
|
|
1638
|
+
|
|
1639
|
+
.x-list--align-stretch.x-list {
|
|
1640
|
+
align-items: stretch;
|
|
1641
|
+
}
|
|
1642
|
+
|
|
1643
|
+
.x-list--align-center.x-list {
|
|
1644
|
+
align-items: center;
|
|
1645
|
+
}
|
|
1646
|
+
|
|
1647
|
+
.x-list--align-baseline.x-list {
|
|
1648
|
+
align-items: baseline;
|
|
1649
|
+
}
|
|
1650
|
+
|
|
1651
|
+
.x-list--align-end.x-list {
|
|
1652
|
+
align-items: flex-end;
|
|
1653
|
+
}
|
|
1654
|
+
|
|
1655
|
+
.x-list--align-start.x-list {
|
|
1656
|
+
align-items: flex-start;
|
|
1657
|
+
}
|
|
1658
|
+
|
|
1659
|
+
.x-list > .x-list__item--expand {
|
|
1660
|
+
flex: 1 1 auto;
|
|
1661
|
+
}
|
|
1662
|
+
.x-list > .x-list__item--no-expand {
|
|
1663
|
+
flex: 0 0 auto;
|
|
1664
|
+
}
|
|
1665
|
+
.x-list.x-list--horizontal > .x-list__item--expand {
|
|
1666
|
+
min-width: 0;
|
|
1667
|
+
}
|
|
1668
|
+
.x-list:not(.x-list--horizontal) > .x-list__item--expand {
|
|
1669
|
+
min-height: 0;
|
|
1670
|
+
}
|
|
1671
|
+
.x-list > .x-list__item--stretch {
|
|
1672
|
+
align-self: stretch;
|
|
1673
|
+
}
|
|
1674
|
+
.x-list > .x-list__item--flex-none {
|
|
1675
|
+
flex: none;
|
|
1676
|
+
}
|
|
1677
|
+
.x-list > .x-list__item--01 {
|
|
1678
|
+
flex: 1 12 auto;
|
|
1679
|
+
}
|
|
1680
|
+
.x-list > .x-list__item--02 {
|
|
1681
|
+
flex: 2 11 auto;
|
|
1682
|
+
}
|
|
1683
|
+
.x-list > .x-list__item--03 {
|
|
1684
|
+
flex: 3 10 auto;
|
|
1685
|
+
}
|
|
1686
|
+
.x-list > .x-list__item--04 {
|
|
1687
|
+
flex: 4 9 auto;
|
|
1688
|
+
}
|
|
1689
|
+
.x-list > .x-list__item--05 {
|
|
1690
|
+
flex: 5 8 auto;
|
|
1691
|
+
}
|
|
1692
|
+
.x-list > .x-list__item--06 {
|
|
1693
|
+
flex: 6 7 auto;
|
|
1694
|
+
}
|
|
1695
|
+
.x-list > .x-list__item--07 {
|
|
1696
|
+
flex: 7 6 auto;
|
|
1697
|
+
}
|
|
1698
|
+
.x-list > .x-list__item--08 {
|
|
1699
|
+
flex: 8 5 auto;
|
|
1700
|
+
}
|
|
1701
|
+
.x-list > .x-list__item--09 {
|
|
1702
|
+
flex: 9 4 auto;
|
|
1703
|
+
}
|
|
1704
|
+
.x-list > .x-list__item--10 {
|
|
1705
|
+
flex: 10 3 auto;
|
|
1706
|
+
}
|
|
1707
|
+
.x-list > .x-list__item--11 {
|
|
1708
|
+
flex: 11 2 auto;
|
|
1709
|
+
}
|
|
1710
|
+
.x-list > .x-list__item--12 {
|
|
1711
|
+
flex: 12 1 auto;
|
|
1712
|
+
}
|
|
1570
1713
|
:root {
|
|
1571
1714
|
--x-string-flow-list: column nowrap;
|
|
1572
1715
|
--x-size-padding-list: 0;
|
|
@@ -7470,147 +7613,3 @@
|
|
|
7470
7613
|
.x-normal-case {
|
|
7471
7614
|
text-transform: none;
|
|
7472
7615
|
}
|
|
7473
|
-
|
|
7474
|
-
.x-list {
|
|
7475
|
-
display: flex;
|
|
7476
|
-
flex-flow: var(--x-string-flow-list);
|
|
7477
|
-
list-style: none;
|
|
7478
|
-
gap: var(--x-size-gap-list);
|
|
7479
|
-
margin: 0;
|
|
7480
|
-
padding: var(--x-size-padding-list);
|
|
7481
|
-
justify-content: var(--x-size-justify-list);
|
|
7482
|
-
align-items: var(--x-size-align-list);
|
|
7483
|
-
min-width: 0;
|
|
7484
|
-
}
|
|
7485
|
-
@media not all and (min-resolution: 0.001dpcm) {
|
|
7486
|
-
.x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
|
|
7487
|
-
gap: 0;
|
|
7488
|
-
}
|
|
7489
|
-
.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
|
|
7490
|
-
margin-bottom: var(--x-size-gap-list);
|
|
7491
|
-
}
|
|
7492
|
-
}
|
|
7493
|
-
@media not all and (min-resolution: 0.001dpcm) {
|
|
7494
|
-
.x-list.x-list--horizontal {
|
|
7495
|
-
gap: 0;
|
|
7496
|
-
}
|
|
7497
|
-
.x-list.x-list--horizontal > *:not(:last-child) {
|
|
7498
|
-
margin-right: var(--x-size-gap-list);
|
|
7499
|
-
}
|
|
7500
|
-
}
|
|
7501
|
-
@media not all and (min-resolution: 0.001dpcm) {
|
|
7502
|
-
.x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
|
|
7503
|
-
gap: 0;
|
|
7504
|
-
}
|
|
7505
|
-
.x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
|
|
7506
|
-
margin-right: var(--x-size-gap-list);
|
|
7507
|
-
margin-bottom: var(--x-size-gap-list);
|
|
7508
|
-
}
|
|
7509
|
-
}
|
|
7510
|
-
|
|
7511
|
-
.x-list--vertical.x-list {
|
|
7512
|
-
flex-flow: column nowrap;
|
|
7513
|
-
}
|
|
7514
|
-
|
|
7515
|
-
.x-list--horizontal.x-list {
|
|
7516
|
-
flex-flow: row nowrap;
|
|
7517
|
-
}
|
|
7518
|
-
|
|
7519
|
-
.x-list--wrap.x-list {
|
|
7520
|
-
flex-flow: row wrap;
|
|
7521
|
-
}
|
|
7522
|
-
|
|
7523
|
-
.x-list--wrap-reverse.x-list {
|
|
7524
|
-
flex-flow: row wrap-reverse;
|
|
7525
|
-
}
|
|
7526
|
-
|
|
7527
|
-
.x-list--justify-stretch.x-list {
|
|
7528
|
-
justify-content: stretch;
|
|
7529
|
-
}
|
|
7530
|
-
|
|
7531
|
-
.x-list--justify-center.x-list {
|
|
7532
|
-
justify-content: center;
|
|
7533
|
-
}
|
|
7534
|
-
|
|
7535
|
-
.x-list--justify-end.x-list {
|
|
7536
|
-
justify-content: flex-end;
|
|
7537
|
-
}
|
|
7538
|
-
|
|
7539
|
-
.x-list--justify-start.x-list {
|
|
7540
|
-
justify-content: flex-start;
|
|
7541
|
-
}
|
|
7542
|
-
|
|
7543
|
-
.x-list--align-stretch.x-list {
|
|
7544
|
-
align-items: stretch;
|
|
7545
|
-
}
|
|
7546
|
-
|
|
7547
|
-
.x-list--align-center.x-list {
|
|
7548
|
-
align-items: center;
|
|
7549
|
-
}
|
|
7550
|
-
|
|
7551
|
-
.x-list--align-baseline.x-list {
|
|
7552
|
-
align-items: baseline;
|
|
7553
|
-
}
|
|
7554
|
-
|
|
7555
|
-
.x-list--align-end.x-list {
|
|
7556
|
-
align-items: flex-end;
|
|
7557
|
-
}
|
|
7558
|
-
|
|
7559
|
-
.x-list--align-start.x-list {
|
|
7560
|
-
align-items: flex-start;
|
|
7561
|
-
}
|
|
7562
|
-
|
|
7563
|
-
.x-list > .x-list__item--expand {
|
|
7564
|
-
flex: 1 1 auto;
|
|
7565
|
-
}
|
|
7566
|
-
.x-list > .x-list__item--no-expand {
|
|
7567
|
-
flex: 0 0 auto;
|
|
7568
|
-
}
|
|
7569
|
-
.x-list.x-list--horizontal > .x-list__item--expand {
|
|
7570
|
-
min-width: 0;
|
|
7571
|
-
}
|
|
7572
|
-
.x-list:not(.x-list--horizontal) > .x-list__item--expand {
|
|
7573
|
-
min-height: 0;
|
|
7574
|
-
}
|
|
7575
|
-
.x-list > .x-list__item--stretch {
|
|
7576
|
-
align-self: stretch;
|
|
7577
|
-
}
|
|
7578
|
-
.x-list > .x-list__item--flex-none {
|
|
7579
|
-
flex: none;
|
|
7580
|
-
}
|
|
7581
|
-
.x-list > .x-list__item--01 {
|
|
7582
|
-
flex: 1 12 auto;
|
|
7583
|
-
}
|
|
7584
|
-
.x-list > .x-list__item--02 {
|
|
7585
|
-
flex: 2 11 auto;
|
|
7586
|
-
}
|
|
7587
|
-
.x-list > .x-list__item--03 {
|
|
7588
|
-
flex: 3 10 auto;
|
|
7589
|
-
}
|
|
7590
|
-
.x-list > .x-list__item--04 {
|
|
7591
|
-
flex: 4 9 auto;
|
|
7592
|
-
}
|
|
7593
|
-
.x-list > .x-list__item--05 {
|
|
7594
|
-
flex: 5 8 auto;
|
|
7595
|
-
}
|
|
7596
|
-
.x-list > .x-list__item--06 {
|
|
7597
|
-
flex: 6 7 auto;
|
|
7598
|
-
}
|
|
7599
|
-
.x-list > .x-list__item--07 {
|
|
7600
|
-
flex: 7 6 auto;
|
|
7601
|
-
}
|
|
7602
|
-
.x-list > .x-list__item--08 {
|
|
7603
|
-
flex: 8 5 auto;
|
|
7604
|
-
}
|
|
7605
|
-
.x-list > .x-list__item--09 {
|
|
7606
|
-
flex: 9 4 auto;
|
|
7607
|
-
}
|
|
7608
|
-
.x-list > .x-list__item--10 {
|
|
7609
|
-
flex: 10 3 auto;
|
|
7610
|
-
}
|
|
7611
|
-
.x-list > .x-list__item--11 {
|
|
7612
|
-
flex: 11 2 auto;
|
|
7613
|
-
}
|
|
7614
|
-
.x-list > .x-list__item--12 {
|
|
7615
|
-
flex: 12 1 auto;
|
|
7616
|
-
}
|
|
@@ -19,7 +19,7 @@ let LayoutsMixin = class LayoutsMixin extends Vue {
|
|
|
19
19
|
*/
|
|
20
20
|
hasContent(...slotNames) {
|
|
21
21
|
return ((this.devMode ||
|
|
22
|
-
slotNames.some(slotName => this.$
|
|
22
|
+
slotNames.some(slotName => this.$scopedSlots[slotName]?.(undefined)?.some(vNode => vNode.tag !== undefined))) ??
|
|
23
23
|
false);
|
|
24
24
|
}
|
|
25
25
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layouts.mixin.js","sources":["../../../../src/components/layouts/layouts.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { Prop } from 'vue-property-decorator';\nimport Component from 'vue-class-component';\n\n/**\n * Mixin to share layouts logic.\n *\n * @public\n */\n@Component\nexport default class LayoutsMixin extends Vue {\n /**\n * Enables the devMode, which shows the available slots to use with its names.\n *\n * @public\n */\n @Prop({ default: false })\n protected devMode!: boolean;\n\n /**\n * Function to check if an slot has rendered content or not.\n *\n * @param slotNames - A VNode Array with of each slot.\n * @returns True if the slot has rendered content or false otherwise.\n *\n * @internal\n */\n protected hasContent(...slotNames: string[]): boolean {\n return (\n (this.devMode ||\n slotNames.some(slotName =>\n this.$
|
|
1
|
+
{"version":3,"file":"layouts.mixin.js","sources":["../../../../src/components/layouts/layouts.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { Prop } from 'vue-property-decorator';\nimport Component from 'vue-class-component';\n\n/**\n * Mixin to share layouts logic.\n *\n * @public\n */\n@Component\nexport default class LayoutsMixin extends Vue {\n /**\n * Enables the devMode, which shows the available slots to use with its names.\n *\n * @public\n */\n @Prop({ default: false })\n protected devMode!: boolean;\n\n /**\n * Function to check if an slot has rendered content or not.\n *\n * @param slotNames - A VNode Array with of each slot.\n * @returns True if the slot has rendered content or false otherwise.\n *\n * @internal\n */\n protected hasContent(...slotNames: string[]): boolean {\n return (\n (this.devMode ||\n slotNames.some(slotName =>\n this.$scopedSlots[slotName]?.(undefined)?.some(vNode => vNode.tag !== undefined)\n )) ??\n false\n );\n }\n}\n"],"names":[],"mappings":";;;;;AAIA;;;;;AAMA,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,GAAG;;;;;;;;;IAiBjC,UAAU,CAAC,GAAG,SAAmB;QACzC,QACE,CAAC,IAAI,CAAC,OAAO;YACX,SAAS,CAAC,IAAI,CAAC,QAAQ,IACrB,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,CACjF;YACH,KAAK,EACL;KACH;CACF,CAAA;AAnBC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;6CACG;AAPT,YAAY;IADhC,SAAS;GACW,YAAY,CA0BhC;qBA1BoB,YAAY;;;;"}
|
|
@@ -218,11 +218,11 @@ __vue_render__._withStripped = true;
|
|
|
218
218
|
/* style */
|
|
219
219
|
const __vue_inject_styles__ = function (inject) {
|
|
220
220
|
if (!inject) return
|
|
221
|
-
inject("data-v-
|
|
221
|
+
inject("data-v-e9e5dca2_0", { source: ".dev-mode .slot-helper[data-v-e9e5dca2] {\n font-family: inherit;\n color: grey;\n box-sizing: border-box;\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n border: dashed 1px grey;\n border-radius: 10px;\n}\n.x-layout[data-v-e9e5dca2] {\n display: grid;\n align-content: stretch;\n justify-content: stretch;\n height: 100%;\n grid-template-rows: [page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [floating-start] auto [main-end floating-end footer-start] auto [footer-end page-end];\n grid-template-columns: 1fr;\n}\n.x-layout > *[data-v-e9e5dca2] {\n grid-column: 1/-1;\n min-width: 0;\n min-height: 0;\n display: flex;\n}\n.x-layout__header[data-v-e9e5dca2] {\n grid-row: header;\n z-index: 1;\n}\n.x-layout__sub-header[data-v-e9e5dca2] {\n grid-row: sub-header;\n z-index: 1;\n}\n.x-layout__toolbar[data-v-e9e5dca2] {\n grid-row: toolbar;\n z-index: 1;\n}\n.x-layout__predictive[data-v-e9e5dca2] {\n grid-row-start: header-end;\n grid-row-end: page-end;\n flex-flow: column nowrap;\n z-index: 2;\n}\n.x-layout__main[data-v-e9e5dca2] {\n grid-row: main;\n flex-flow: column nowrap;\n}\n.x-layout__floating[data-v-e9e5dca2] {\n grid-row: floating;\n z-index: 1;\n}\n.x-layout__footer[data-v-e9e5dca2] {\n grid-row: footer;\n}\n.x-layout[data-v-e9e5dca2] .x-layout__aside {\n grid-row: page;\n z-index: 3;\n}\n[dir=\"ltr\"] .x-layout[data-v-e9e5dca2] .x-layout__aside .x-modal__content {\n margin-left: var(--x-size-margin-left-layout-single-column, 0);\n}\n[dir=\"rtl\"] .x-layout[data-v-e9e5dca2] .x-layout__aside .x-modal__content {\n margin-right: var(--x-size-margin-left-layout-single-column, 0);\n}\n.x-layout[data-v-e9e5dca2] .x-layout__aside .x-modal__content {\n width: 100%;\n height: 100%;\n}\n.x-layout__predictive[data-v-e9e5dca2] , .x-layout__floating[data-v-e9e5dca2] ,\n.x-layout .slot-helper[data-v-e9e5dca2] {\n pointer-events: none;\n}\n.x-layout__predictive[data-v-e9e5dca2] > *, .x-layout__floating[data-v-e9e5dca2] > *,\n.x-layout .slot-helper[data-v-e9e5dca2] > * {\n pointer-events: all;\n}\n.x-layout__predictive[data-v-e9e5dca2] > .x-list, .x-layout__floating[data-v-e9e5dca2] > .x-list,\n.x-layout .slot-helper[data-v-e9e5dca2] > .x-list {\n pointer-events: none;\n}\n.x-layout__predictive[data-v-e9e5dca2] > .x-list > *, .x-layout__floating[data-v-e9e5dca2] > .x-list > *,\n.x-layout .slot-helper[data-v-e9e5dca2] > .x-list > * {\n pointer-events: all;\n}", map: undefined, media: undefined });
|
|
222
222
|
|
|
223
223
|
};
|
|
224
224
|
/* scoped */
|
|
225
|
-
const __vue_scope_id__ = "data-v-
|
|
225
|
+
const __vue_scope_id__ = "data-v-e9e5dca2";
|
|
226
226
|
/* module identifier */
|
|
227
227
|
const __vue_module_identifier__ = undefined;
|
|
228
228
|
/* functional template */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"single-column-layout.vue.js","sources":["../../../../src/components/layouts/single-column-layout.vue"],"sourcesContent":["<template>\n <div class=\"x-layout x-layout--single-column\" :class=\"{ 'dev-mode': devMode }\">\n <header v-if=\"hasContent('header')\" class=\"x-layout__header x-list x-list--horizontal\">\n <!-- @slot Slot that is used to insert content into the Header. -->\n <slot name=\"header\">\n <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n </slot>\n </header>\n\n <div v-if=\"hasContent('sub-header')\" class=\"x-layout__sub-header x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Sub Header. -->\n <slot name=\"sub-header\">\n <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n </slot>\n </div>\n\n <div v-if=\"hasContent('toolbar')\" class=\"x-layout__toolbar x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Toolbar. -->\n <slot name=\"toolbar\">\n <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n </slot>\n </div>\n\n <div v-if=\"hasContent('predictive')\" class=\"x-layout__predictive x-list x-list--vertical\">\n <BaseScroll class=\"x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand\">\n <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->\n <slot name=\"predictive\">\n <span v-if=\"devMode\" class=\"slot-helper\">PREDICTIVE</span>\n </slot>\n </BaseScroll>\n </div>\n\n <main v-if=\"hasContent('main')\" class=\"x-layout__main\">\n <MainScroll>\n <Scroll id=\"main-scroll\" class=\"x-layout__main-scroll x-list x-list--vertical\">\n <!-- @slot Slot that can be used to insert content into the Main. -->\n <slot name=\"main\">\n <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n </slot>\n </Scroll>\n </MainScroll>\n </main>\n\n <div v-if=\"hasContent('floating')\" class=\"x-layout__floating x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Floating. -->\n <slot name=\"floating\">\n <span v-if=\"devMode\" class=\"slot-helper\">FLOATING</span>\n </slot>\n </div>\n\n <footer v-if=\"hasContent('footer')\" class=\"x-layout__footer x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Footer. -->\n <slot name=\"footer\">\n <span v-if=\"devMode\" class=\"slot-helper\">FOOTER</span>\n </slot>\n </footer>\n\n <BaseIdModal\n v-if=\"hasContent('aside')\"\n :animation=\"asideAnimation\"\n modalId=\"aside-modal\"\n class=\"x-layout__aside\"\n >\n <!-- @slot Slot that can be used to insert content into the Aside. -->\n <slot name=\"aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">ASIDE</span>\n </slot>\n </BaseIdModal>\n\n <slot name=\"extra-aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n </slot>\n </div>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n import Scroll from '../../x-modules/scroll/components/scroll.vue';\n import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n import BaseIdModal from '../modals/base-id-modal.vue';\n import BaseScroll from '../scroll/base-scroll.vue';\n import LayoutsMixin from './layouts.mixin';\n\n /**\n * Component for use as Layout to be filled with the rest of the Components.\n *\n * @public\n */\n @Component({\n components: { BaseIdModal, BaseScroll, MainScroll, Scroll }\n })\n export default class SingleColumnLayout extends mixins(LayoutsMixin) {\n /**\n * The animation used for the Main Aside.\n *\n * @public\n */\n @Prop({ default: () => animateTranslate('right') })\n protected asideAnimation!: Vue;\n }\n</script>\n\n<style scoped lang=\"scss\">\n @import '../../design-system/utilities/dev-mode';\n\n .x-layout {\n display: grid;\n align-content: stretch;\n justify-content: stretch;\n height: 100%;\n\n grid-template-rows:\n [page-start header-start]\n auto\n [header-end sub-header-start]\n auto\n [sub-header-end toolbar-start]\n auto\n [toolbar-end main-start]\n 1fr\n [floating-start]\n auto\n [main-end floating-end footer-start]\n auto\n [footer-end page-end];\n\n grid-template-columns: 1fr;\n\n > * {\n grid-column: 1/-1;\n min-width: 0;\n min-height: 0;\n display: flex;\n }\n\n &__header {\n grid-row: header;\n z-index: 1;\n }\n\n &__sub-header {\n grid-row: sub-header;\n z-index: 1;\n }\n\n &__toolbar {\n grid-row: toolbar;\n z-index: 1;\n }\n\n &__predictive {\n grid-row-start: header-end;\n grid-row-end: page-end;\n flex-flow: column nowrap;\n z-index: 2;\n }\n\n &__main {\n grid-row: main;\n flex-flow: column nowrap;\n }\n\n &__floating {\n grid-row: floating;\n z-index: 1;\n }\n\n &__footer {\n grid-row: footer;\n }\n\n ::v-deep .x-layout__aside {\n grid-row: page;\n z-index: 3;\n
|
|
1
|
+
{"version":3,"file":"single-column-layout.vue.js","sources":["../../../../src/components/layouts/single-column-layout.vue"],"sourcesContent":["<template>\n <div class=\"x-layout x-layout--single-column\" :class=\"{ 'dev-mode': devMode }\">\n <header v-if=\"hasContent('header')\" class=\"x-layout__header x-list x-list--horizontal\">\n <!-- @slot Slot that is used to insert content into the Header. -->\n <slot name=\"header\">\n <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n </slot>\n </header>\n\n <div v-if=\"hasContent('sub-header')\" class=\"x-layout__sub-header x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Sub Header. -->\n <slot name=\"sub-header\">\n <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n </slot>\n </div>\n\n <div v-if=\"hasContent('toolbar')\" class=\"x-layout__toolbar x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Toolbar. -->\n <slot name=\"toolbar\">\n <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n </slot>\n </div>\n\n <div v-if=\"hasContent('predictive')\" class=\"x-layout__predictive x-list x-list--vertical\">\n <BaseScroll class=\"x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand\">\n <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->\n <slot name=\"predictive\">\n <span v-if=\"devMode\" class=\"slot-helper\">PREDICTIVE</span>\n </slot>\n </BaseScroll>\n </div>\n\n <main v-if=\"hasContent('main')\" class=\"x-layout__main\">\n <MainScroll>\n <Scroll id=\"main-scroll\" class=\"x-layout__main-scroll x-list x-list--vertical\">\n <!-- @slot Slot that can be used to insert content into the Main. -->\n <slot name=\"main\">\n <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n </slot>\n </Scroll>\n </MainScroll>\n </main>\n\n <div v-if=\"hasContent('floating')\" class=\"x-layout__floating x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Floating. -->\n <slot name=\"floating\">\n <span v-if=\"devMode\" class=\"slot-helper\">FLOATING</span>\n </slot>\n </div>\n\n <footer v-if=\"hasContent('footer')\" class=\"x-layout__footer x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Footer. -->\n <slot name=\"footer\">\n <span v-if=\"devMode\" class=\"slot-helper\">FOOTER</span>\n </slot>\n </footer>\n\n <BaseIdModal\n v-if=\"hasContent('aside')\"\n :animation=\"asideAnimation\"\n modalId=\"aside-modal\"\n class=\"x-layout__aside\"\n >\n <!-- @slot Slot that can be used to insert content into the Aside. -->\n <slot name=\"aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">ASIDE</span>\n </slot>\n </BaseIdModal>\n\n <slot name=\"extra-aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n </slot>\n </div>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n import Scroll from '../../x-modules/scroll/components/scroll.vue';\n import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n import BaseIdModal from '../modals/base-id-modal.vue';\n import BaseScroll from '../scroll/base-scroll.vue';\n import LayoutsMixin from './layouts.mixin';\n\n /**\n * Component for use as Layout to be filled with the rest of the Components.\n *\n * @public\n */\n @Component({\n components: { BaseIdModal, BaseScroll, MainScroll, Scroll }\n })\n export default class SingleColumnLayout extends mixins(LayoutsMixin) {\n /**\n * The animation used for the Main Aside.\n *\n * @public\n */\n @Prop({ default: () => animateTranslate('right') })\n protected asideAnimation!: Vue;\n }\n</script>\n\n<style scoped lang=\"scss\">\n @import '../../design-system/utilities/dev-mode';\n\n .x-layout {\n display: grid;\n align-content: stretch;\n justify-content: stretch;\n height: 100%;\n\n grid-template-rows:\n [page-start header-start]\n auto\n [header-end sub-header-start]\n auto\n [sub-header-end toolbar-start]\n auto\n [toolbar-end main-start]\n 1fr\n [floating-start]\n auto\n [main-end floating-end footer-start]\n auto\n [footer-end page-end];\n\n grid-template-columns: 1fr;\n\n > * {\n grid-column: 1/-1;\n min-width: 0;\n min-height: 0;\n display: flex;\n }\n\n &__header {\n grid-row: header;\n z-index: 1;\n }\n\n &__sub-header {\n grid-row: sub-header;\n z-index: 1;\n }\n\n &__toolbar {\n grid-row: toolbar;\n z-index: 1;\n }\n\n &__predictive {\n grid-row-start: header-end;\n grid-row-end: page-end;\n flex-flow: column nowrap;\n z-index: 2;\n }\n\n &__main {\n grid-row: main;\n flex-flow: column nowrap;\n }\n\n &__floating {\n grid-row: floating;\n z-index: 1;\n }\n\n &__footer {\n grid-row: footer;\n }\n\n ::v-deep .x-layout__aside {\n grid-row: page;\n z-index: 3;\n\n .x-modal__content {\n width: 100%;\n height: 100%;\n margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n }\n }\n\n &__predictive ::v-deep,\n &__floating ::v-deep,\n .slot-helper ::v-deep {\n pointer-events: none;\n\n > * {\n pointer-events: all;\n }\n\n > .x-list {\n pointer-events: none;\n\n > * {\n pointer-events: all;\n }\n }\n }\n }\n</style>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
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.136",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -125,5 +125,5 @@
|
|
|
125
125
|
"access": "public",
|
|
126
126
|
"directory": "dist"
|
|
127
127
|
},
|
|
128
|
-
"gitHead": "
|
|
128
|
+
"gitHead": "cee7a9a9e40f9604e974337dc082bd797291dfbc"
|
|
129
129
|
}
|