@vuu-ui/vuu-popups 0.6.13-debug → 0.6.13

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.
Files changed (4) hide show
  1. package/cjs/index.js +1 -1311
  2. package/index.css +1 -150
  3. package/index.css.map +1 -1
  4. package/package.json +2 -2
package/index.css CHANGED
@@ -1,151 +1,2 @@
1
- /* src/dialog/Dialog.css */
2
- .vuuDialog {
3
- background: var(--salt-container-primary-background);
4
- border: var(--vuuDialog-border, solid 1px #ccc);
5
- border-radius: 5px;
6
- padding: var(--vuuDialog-padding, 0);
7
- box-shadow: var(--salt-overlayable-shadow, none);
8
- height: var(--vuuDialog-height, fit-content);
9
- width: var(--vuuDialog-width, fit-content);
10
- }
11
- .vuuDialog-header {
12
- --saltButton-height: 28px;
13
- --saltButton-width: 28px;
14
- --saltToolbar-background: transparent;
15
- --saltToolbar-height: calc(var(--salt-size-base) + 5px);
16
- border-bottom: solid 1px var(--salt-container-primary-borderColor);
17
- }
18
- .vuuDialog-header > .Responsive-inner {
19
- align-items: center;
20
- }
21
- .vuuDialog-header > .Responsive-inner > :last-child {
22
- right: 2px;
23
- }
24
-
25
- /* src/menu/MenuList.css */
26
- .vuuMenuList {
27
- --context-menu-color: #161616;
28
- --context-menu-padding: var(--hw-list-item-padding, 0 6px);
29
- --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));
30
- --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));
31
- --context-menu-highlight-bg: #a4d5f4;
32
- --context-menu-blur-focus-bg: #e0e4e9;
33
- --menu-item-height: var(--hw-list-item-height, 24px);
34
- --menu-item-icon-color: black;
35
- --menu-item-twisty-color: black;
36
- --menu-item-twisty-content: "";
37
- --menu-item-twisty-top: 50%;
38
- --menu-item-twisty-left: auto;
39
- --menu-item-twisty-right: 0px;
40
- --menu-icon-size: 12px;
41
- background-clip: padding-box;
42
- background-color: white;
43
- border-radius: 4px;
44
- border: solid 1px rgba(0, 0, 0, 0.15);
45
- box-shadow: var(--context-menu-shadow);
46
- font-size: var(--salt-text-label-fontSize);
47
- font-weight: var(--salt-typography-fontWeight-semiBold);
48
- list-style: none;
49
- margin: 2px 0 0;
50
- outline: 0;
51
- padding: 0;
52
- position: absolute;
53
- }
54
- .vuuMenuItem {
55
- align-items: center;
56
- color: var(--context-menu-color);
57
- display: flex;
58
- gap: 6px;
59
- height: var(--menu-item-height);
60
- padding: var(--context-menu-padding);
61
- padding-right: 24px;
62
- position: relative;
63
- white-space: nowrap;
64
- }
65
- .vuuIconContainer {
66
- display: inline-block;
67
- flex: 12px 0 0;
68
- height: var(--menu-icon-size);
69
- mask-repeat: no-repeat;
70
- width: var(--menu-icon-size);
71
- }
72
- .vuuMenuItem[aria-expanded=true] {
73
- background-color: var(--context-menu-blur-focus-bg);
74
- }
75
- .vuuMenuItem-separator {
76
- border-top: solid 1px var(--context-menu-blur-focus-bg);
77
- }
78
- .vuuMenuItem[aria-haspopup=true]:after {
79
- content: var(--menu-item-twisty-content);
80
- -webkit-mask: var(--svg-chevron-right) center center/12px 12px;
81
- mask: var(--svg-chevron-down) center center/12px 12px;
82
- mask-repeat: no-repeat;
83
- background-color: var(--menu-item-twisty-color);
84
- height: 16px;
85
- left: var(--menu-item-twisty-left);
86
- right: var(--menu-item-twisty-right);
87
- margin-top: -8px;
88
- position: absolute;
89
- top: var(--menu-item-twisty-top);
90
- transition: transform 0.3s;
91
- width: 16px;
92
- }
93
- .vuuMenuItem[data-highlighted] {
94
- background-color: var(--context-menu-highlight-bg);
95
- }
96
- .vuuMenuItem:hover {
97
- background-color: var(--context-menu-highlight-bg);
98
- cursor: default;
99
- }
100
- .vuuMenuList-childMenuShowing .hwMenuItem[data-highlighted] {
101
- background-color: var(--context-menu-blur-focus-bg);
102
- }
103
- .vuuMenuItem.focusVisible:before {
104
- content: "";
105
- position: absolute;
106
- top: 0;
107
- left: 0;
108
- right: 0;
109
- bottom: 0px;
110
- border: dotted var(--focus-visible-border-color) 2px;
111
- }
112
- .vuuPopupContainer.top-bottom-right-right .popup-menu {
113
- left: auto;
114
- right: 0;
115
- }
116
- .popup-menu .menu-item.showing > button,
117
- .popup-menu .menu-item > button:focus,
118
- .popup-menu .menu-item > button:hover {
119
- text-decoration: none;
120
- color: rgb(0, 0, 0);
121
- background-color: rgb(220, 220, 220);
122
- }
123
- .vuuMenuItem-button:active,
124
- .hwMenuItem-button:hover {
125
- outline: 0;
126
- }
127
- .popup-menu .menu-item.disabled > button {
128
- clear: both;
129
- font-weight: normal;
130
- line-height: 1.5;
131
- color: rgb(120, 120, 120);
132
- white-space: nowrap;
133
- text-decoration: none;
134
- cursor: default;
135
- }
136
-
137
- /* src/popup/popup-service.css */
138
- .vuuPopup {
139
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
140
- position: absolute;
141
- top: 0;
142
- left: 0;
143
- width: 0;
144
- height: 0;
145
- overflow: visible;
146
- z-index: 1000;
147
- }
148
- .vuuPopup {
149
- position: absolute;
150
- }
1
+ .vuuDialog{background:var(--salt-container-primary-background);border:var(--vuuDialog-border, solid 1px #ccc);border-radius:5px;padding:var(--vuuDialog-padding, 0);box-shadow:var(--salt-overlayable-shadow, none);height:var(--vuuDialog-height, fit-content);width:var(--vuuDialog-width, fit-content)}.vuuDialog-header{--saltButton-height: 28px;--saltButton-width: 28px;--saltToolbar-background: transparent;--saltToolbar-height: calc(var(--salt-size-base) + 5px);border-bottom:solid 1px var(--salt-container-primary-borderColor)}.vuuDialog-header>.Responsive-inner{align-items:center}.vuuDialog-header>.Responsive-inner>:last-child{right:2px}.vuuMenuList{--context-menu-color: #161616;--context-menu-padding: var(--hw-list-item-padding, 0 6px);--context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, .175));--focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));--context-menu-highlight-bg: #a4d5f4;--context-menu-blur-focus-bg: #e0e4e9;--menu-item-height: var(--hw-list-item-height, 24px);--menu-item-icon-color: black;--menu-item-twisty-color: black;--menu-item-twisty-content: "";--menu-item-twisty-top: 50%;--menu-item-twisty-left: auto;--menu-item-twisty-right: 0px;--menu-icon-size: 12px;background-clip:padding-box;background-color:#fff;border-radius:4px;border:solid 1px rgba(0,0,0,.15);box-shadow:var(--context-menu-shadow);font-size:var(--salt-text-label-fontSize);font-weight:var(--salt-typography-fontWeight-semiBold);list-style:none;margin:2px 0 0;outline:0;padding:0;position:absolute}.vuuMenuItem{align-items:center;color:var(--context-menu-color);display:flex;gap:6px;height:var(--menu-item-height);padding:var(--context-menu-padding);padding-right:24px;position:relative;white-space:nowrap}.vuuIconContainer{display:inline-block;flex:12px 0 0;height:var(--menu-icon-size);mask-repeat:no-repeat;width:var(--menu-icon-size)}.vuuMenuItem[aria-expanded=true]{background-color:var(--context-menu-blur-focus-bg)}.vuuMenuItem-separator{border-top:solid 1px var(--context-menu-blur-focus-bg)}.vuuMenuItem[aria-haspopup=true]:after{content:var(--menu-item-twisty-content);-webkit-mask:var(--svg-chevron-right) center center/12px 12px;mask:var(--svg-chevron-down) center center/12px 12px;mask-repeat:no-repeat;background-color:var(--menu-item-twisty-color);height:16px;left:var(--menu-item-twisty-left);right:var(--menu-item-twisty-right);margin-top:-8px;position:absolute;top:var(--menu-item-twisty-top);transition:transform .3s;width:16px}.vuuMenuItem[data-highlighted]{background-color:var(--context-menu-highlight-bg)}.vuuMenuItem:hover{background-color:var(--context-menu-highlight-bg);cursor:default}.vuuMenuList-childMenuShowing .hwMenuItem[data-highlighted]{background-color:var(--context-menu-blur-focus-bg)}.vuuMenuItem.focusVisible:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0px;border:dotted var(--focus-visible-border-color) 2px}.vuuPopupContainer.top-bottom-right-right .popup-menu{left:auto;right:0}.popup-menu .menu-item.showing>button,.popup-menu .menu-item>button:focus,.popup-menu .menu-item>button:hover{text-decoration:none;color:#000;background-color:#dcdcdc}.vuuMenuItem-button:active,.hwMenuItem-button:hover{outline:0}.popup-menu .menu-item.disabled>button{clear:both;font-weight:400;line-height:1.5;color:#787878;white-space:nowrap;text-decoration:none;cursor:default}.vuuPopup{box-shadow:0 6px 12px #0000002d;position:absolute;top:0;left:0;width:0;height:0;overflow:visible;z-index:1000}.vuuPopup{position:absolute}
151
2
  /*# sourceMappingURL=index.css.map */
package/index.css.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../packages/vuu-popups/src/dialog/Dialog.css", "../../../packages/vuu-popups/src/menu/MenuList.css", "../../../packages/vuu-popups/src/popup/popup-service.css"],
4
4
  "sourcesContent": [".vuuDialog {\n background: var(--salt-container-primary-background);\n border: var(--vuuDialog-border, solid 1px #ccc);\n border-radius: 5px;\n padding: var(--vuuDialog-padding, 0);\n box-shadow: var(--salt-overlayable-shadow, none);\n height: var(--vuuDialog-height, fit-content);\n width: var(--vuuDialog-width, fit-content);\n}\n\n.vuuDialog-header {\n --saltButton-height: 28px;\n --saltButton-width: 28px;\n\n --saltToolbar-background: transparent;\n --saltToolbar-height: calc(var(--salt-size-base) + 5px);\n border-bottom: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.vuuDialog-header > .Responsive-inner {\n align-items: center;\n}\n\n.vuuDialog-header > .Responsive-inner > :last-child{\n right: 2px;\n}\n\n\n", ".vuuMenuList {\n --context-menu-color: #161616;\n --context-menu-padding: var(--hw-list-item-padding, 0 6px);\n --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));\n --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n --context-menu-highlight-bg: #a4d5f4;\n --context-menu-blur-focus-bg: #e0e4e9;\n --menu-item-height: var(--hw-list-item-height, 24px);\n --menu-item-icon-color: black;\n --menu-item-twisty-color: black;\n --menu-item-twisty-content: '';\n --menu-item-twisty-top: 50%;\n --menu-item-twisty-left: auto;\n --menu-item-twisty-right: 0px;\n --menu-icon-size: 12px;\n\n background-clip: padding-box;\n background-color: white;\n border-radius: 4px;\n border: solid 1px rgba(0, 0, 0, 0.15);\n box-shadow: var(--context-menu-shadow);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-typography-fontWeight-semiBold);\n list-style: none;\n margin: 2px 0 0;\n outline: 0;\n padding: 0;\n position: absolute;\n}\n\n.vuuMenuItem {\n align-items: center;\n color: var(--context-menu-color);\n display: flex;\n gap: 6px;\n height: var(--menu-item-height);\n padding: var(--context-menu-padding);\n padding-right: 24px;\n position: relative;\n white-space: nowrap;\n}\n\n.vuuIconContainer {\n display: inline-block;\n flex: 12px 0 0;\n height: var(--menu-icon-size);\n mask-repeat: no-repeat;\n width: var(--menu-icon-size);\n}\n\n.vuuMenuItem[aria-expanded='true'] {\n background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem-separator {\n border-top: solid 1px var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem[aria-haspopup='true']:after {\n content: var(--menu-item-twisty-content);\n -webkit-mask: var(--svg-chevron-right) center center/12px 12px;\n mask: var(--svg-chevron-down) center center/12px 12px;\n mask-repeat: no-repeat;\n background-color: var(--menu-item-twisty-color);\n height: 16px;\n left: var(--menu-item-twisty-left);\n right: var(--menu-item-twisty-right);\n margin-top: -8px;\n position: absolute;\n top: var(--menu-item-twisty-top);\n transition: transform 0.3s;\n width: 16px;\n}\n\n.vuuMenuItem[data-highlighted] {\n background-color: var(--context-menu-highlight-bg);\n}\n\n.vuuMenuItem:hover {\n background-color: var(--context-menu-highlight-bg);\n cursor: default;\n}\n\n.vuuMenuList-childMenuShowing .hwMenuItem[data-highlighted] {\n background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem.focusVisible:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0px;\n border: dotted var(--focus-visible-border-color) 2px;\n}\n\n.vuuPopupContainer.top-bottom-right-right .popup-menu {\n left: auto;\n right: 0;\n}\n\n.popup-menu .menu-item.showing > button,\n.popup-menu .menu-item > button:focus,\n.popup-menu .menu-item > button:hover {\n text-decoration: none;\n color: rgb(0, 0, 0);\n background-color: rgb(220, 220, 220);\n}\n.vuuMenuItem-button:active,\n.hwMenuItem-button:hover {\n outline: 0;\n}\n\n.popup-menu .menu-item.disabled > button {\n clear: both;\n font-weight: normal;\n line-height: 1.5;\n color: rgb(120, 120, 120);\n white-space: nowrap;\n text-decoration: none;\n cursor: default;\n}\n", ".vuuPopup {\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 0;\n overflow: visible;\n z-index: 1000;\n}\n\n.vuuPopup {\n position: absolute;\n}\n"],
5
- "mappings": ";AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACxBF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAAA;AAGE;AACA;AACA;AAAA;AAEF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACzHF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;",
5
+ "mappings": "AAAA,WACE,oDACA,+CAFF,kBAIE,oCACA,gDACA,4CACA,0CAGF,kBACE,0BACA,yBAEA,sCACA,wDACA,kEAGF,oCACE,mBAGF,gDACE,UCxBF,aACE,8BACA,2DACA,+EACA,uFACA,qCACA,sCACA,qDACA,8BACA,gCACA,+BACA,4BACA,8BACA,8BACA,uBAEA,4BACA,sBAjBF,kBAmBE,iCACA,sCACA,0CACA,uDACA,gBAvBF,eAyBE,UAzBF,UA2BE,kBAGF,aACE,mBACA,gCACA,aACA,QACA,+BACA,oCACA,mBACA,kBACA,mBAGF,kBACE,qBACA,cACA,6BACA,sBACA,4BAGF,iCACE,mDAGF,uBACE,uDAGF,uCACE,wCACA,8DACA,qDACA,sBACA,+CACA,YACA,kCACA,oCACA,gBACA,kBACA,gCACA,yBACA,WAGF,+BACE,kDAGF,mBACE,kDACA,eAGF,4DACE,mDAGF,iCACE,WACA,kBACA,MACA,OACA,QACA,WACA,oDAGF,sDACE,UACA,QAGF,8GAGE,qBACA,WACA,yBAEF,oDAEE,UAGF,uCACE,WACA,gBACA,gBACA,cACA,mBACA,qBACA,eCzHF,UACE,gCACA,kBACA,MACA,OACA,QACA,SACA,iBACA,aAGF,UACE",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vuu-ui/vuu-popups",
3
- "version": "0.6.13-debug",
3
+ "version": "0.6.13",
4
4
  "description": "VUU popup components - Context Menu, Dialog etc",
5
5
  "author": "heswell",
6
6
  "license": "Apache-2.0",
@@ -8,7 +8,7 @@
8
8
  "@salt-ds/core": "1.0.0",
9
9
  "@salt-ds/icons": "1.0.0",
10
10
  "@heswell/salt-lab": "1.0.0-alpha.0-vuu.1",
11
- "@vuu-ui/vuu-utils": "0.6.13-debug",
11
+ "@vuu-ui/vuu-utils": "0.6.13",
12
12
  "classnames": "^2.2.6",
13
13
  "react": "^17.0.2",
14
14
  "react-dom": "^17.0.2"