@dataloop-ai/components 0.20.154-colors.0 → 0.20.155

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/assets/constants.css +4 -8
  3. package/src/assets/theme.css +4 -13
  4. package/src/components/essential/DlMenu/DlMenu.vue +76 -9
  5. package/src/demos/DlMenuDemo.vue +59 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.20.154-colors.0",
3
+ "version": "0.20.155",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/assets/constants.css CHANGED
@@ -1,17 +1,13 @@
1
1
  :root {
2
2
  /* Constants */
3
3
  --dl-color-alert-success: #38d079;
4
- --dl-color-alert-success-background: #EDFCF4;
5
- --dl-color-alert-success-bg: #EDFCF4;
4
+ --dl-color-alert-success-background: #e1fff0;
6
5
  --dl-color-alert-warn: #F5C114;
7
- --dl-color-alert-warn-background: #FEFAEB;
8
- --dl-color-alert-warn-bg: #FEFAEB;
6
+ --dl-color-alert-warn-background: #FFF8E0;
9
7
  --dl-color-alert-error: #ff3434;
10
- --dl-color-alert-error-background: #FCEFEE;
11
- --dl-color-alert-error-bg: #FCEFEE;
8
+ --dl-color-alert-error-background: #ffeaea;
12
9
  --dl-color-alert-info: #4e81b3;
13
- --dl-color-alert-info-background: #F2F8FD;
14
- --dl-color-alert-info-bg: #F2F8FD;
10
+ --dl-color-alert-info-background: #f3f9ff;
15
11
  --dl-color-alert-text: #171723;
16
12
 
17
13
  /* Z-Index */
package/src/assets/theme.css CHANGED
@@ -75,16 +75,12 @@ body {
75
75
  /* alert colors */
76
76
  --dl-color-negative: var(--dl-color-alert-error);
77
77
  --dl-color-negative-background: var(--dl-color-alert-error-background);
78
- --dl-color-negative-bg: var(--dl-color-alert-error-bg);
79
78
  --dl-color-warning: var(--dl-color-alert-warn);
80
79
  --dl-color-warning-background: var(--dl-color-alert-warn-background);
81
- --dl-color-warning-bg: var(--dl-color-alert-warn-bg);
82
80
  --dl-color-positive: var(--dl-color-alert-success);
83
81
  --dl-color-positive-background: var(--dl-color-alert-success-background);
84
- --dl-color-positive-bg: var(--dl-color-alert-success-bg);
85
82
  --dl-color-info: var(--dl-color-alert-info);
86
83
  --dl-color-info-background: var(--dl-color-alert-info-background);
87
- --dl-color-info-bg: var(--dl-color-alert-info-bg);
88
84
 
89
85
  --dl-color-chart-brush: #eef1ff;
90
86
 
@@ -124,7 +120,6 @@ body {
124
120
  --dl-color-hover: #aeb9ff;
125
121
  --dl-color-disabled: #ffffff40;
126
122
  --dl-color-fill: #ffffff1e;
127
- --dl-color-fill-secondary: #f8f8f81a;
128
123
  --dl-color-fill-hover: #454a50;
129
124
  --dl-color-separator: #ffffff26;
130
125
  --dl-color-component: #30363d;
@@ -142,15 +137,11 @@ body {
142
137
  --q-color-warning: #f8d29a;
143
138
 
144
139
  /* alert colors */
145
- --dl-color-negative-background: #391A19;
146
- --dl-color-negative-bg: #391A19;
140
+ --dl-color-negative-background: #734145;
147
141
  --dl-color-warning: #FFDE5C;
148
- --dl-color-warning-background: #393218;
149
- --dl-color-warning-bg: #393218;
150
- --dl-color-positive-background: #183928;
151
- --dl-color-positive-bg: #183928;
152
- --dl-color-info-background: #1F3447;
153
- --dl-color-info-bg: #1F3447;
142
+ --dl-color-warning-background: #686045;
143
+ --dl-color-positive-background: #3a644e;
144
+ --dl-color-info-background: #4b5a6b;
154
145
  --dl-color-info: #92cdf2;
155
146
 
156
147
  --dl-color-chart-brush: #475077;
package/src/components/essential/DlMenu/DlMenu.vue CHANGED
@@ -75,13 +75,20 @@ import {
75
75
  refocusTargetFn,
76
76
  conditionalHandler
77
77
  } from './utils'
78
- import { isMobileOrTablet } from '../../../utils'
78
+ import {
79
+ addEvt,
80
+ isMobileOrTablet
81
+ } from '../../../utils'
79
82
  import { v4 } from 'uuid'
80
83
  import {
81
84
  arrowNavigationEvents,
82
85
  useArrowNavigation
83
86
  } from '../../../hooks/use-arrow-navigation'
84
87
 
88
+ const hoverGroupHiders: {
89
+ [group: string]: ((evt: AnchorEvent) => void)[]
90
+ } = {}
91
+
85
92
  export default defineComponent({
86
93
  name: 'DlMenu',
87
94
  components: {
@@ -108,6 +115,11 @@ export default defineComponent({
108
115
 
109
116
  square: Boolean,
110
117
 
118
+ hoverGroup: {
119
+ type: String,
120
+ default: ''
121
+ },
122
+
111
123
  anchor: {
112
124
  type: String,
113
125
  default: 'bottom left',
@@ -206,10 +218,20 @@ export default defineComponent({
206
218
  unconfigureScrollTarget
207
219
  } = useScrollTarget(props, configureScrollTarget)
208
220
 
209
- const { anchorEl, canShow } = useAnchor({
210
- toggleKey: toggleKey.value,
211
- ignoreEvents: ignoreEvents.value
212
- })
221
+ const isMobile = computed(() => isMobileOrTablet())
222
+
223
+ const { anchorEl, canShow, anchorEvents } = useAnchor(
224
+ props.hoverGroup && !isMobile.value
225
+ ? {
226
+ configureAnchorEl
227
+ }
228
+ : {
229
+ toggleKey: toggleKey.value,
230
+ ignoreEvents: ignoreEvents.value
231
+ }
232
+ )
233
+
234
+ Object.assign(anchorEvents, { delayShow })
213
235
 
214
236
  const screen = useWindowSize()
215
237
 
@@ -222,7 +244,7 @@ export default defineComponent({
222
244
 
223
245
  const isInitialized = ref(false)
224
246
 
225
- const { hide } = useModelToggle({
247
+ const { show, hide } = useModelToggle({
226
248
  showing,
227
249
  canShow,
228
250
  handleShow,
@@ -282,8 +304,6 @@ export default defineComponent({
282
304
  })
283
305
  }
284
306
 
285
- const isMobile = computed(() => isMobileOrTablet())
286
-
287
307
  function handleShow(evt: MouseEvent | TouchEvent) {
288
308
  isMenuOpen.value = true
289
309
  removeTick()
@@ -463,7 +483,54 @@ export default defineComponent({
463
483
  })
464
484
  }
465
485
 
466
- onBeforeUnmount(anchorCleanup as any)
486
+ const {
487
+ registerTimeout: registerHoverTimeout,
488
+ removeTimeout: removeHoverTimeout
489
+ } = useTimeout()
490
+
491
+ function delayShow(evt: AnchorEvent) {
492
+ for (const hider of hoverGroupHiders[props.hoverGroup]) {
493
+ if (hider !== delayHide) {
494
+ hider(evt)
495
+ }
496
+ }
497
+ removeHoverTimeout()
498
+ registerHoverTimeout(() => {
499
+ show(evt)
500
+ }, 250)
501
+ }
502
+
503
+ function delayHide(evt: AnchorEvent) {
504
+ removeHoverTimeout()
505
+ registerHoverTimeout(() => {
506
+ hide(evt)
507
+ }, 250)
508
+ }
509
+
510
+ function configureAnchorEl() {
511
+ if (anchorEl.value === null) {
512
+ return
513
+ }
514
+ addEvt(anchorEvents, 'anchor', [
515
+ [anchorEl.value, 'mouseenter', 'delayShow', 'passive']
516
+ ])
517
+ }
518
+
519
+ if (props.hoverGroup) {
520
+ hoverGroupHiders[props.hoverGroup] = hoverGroupHiders[props.hoverGroup] ?? []
521
+ hoverGroupHiders[props.hoverGroup].push(delayHide)
522
+ }
523
+
524
+ onBeforeUnmount(() => {
525
+ anchorCleanup(false)
526
+ if (props.hoverGroup) {
527
+ const hiders = hoverGroupHiders[props.hoverGroup]
528
+ hiders.splice(hiders.indexOf(delayHide), 1)
529
+ if (hiders.length === 0) {
530
+ delete hoverGroupHiders[props.hoverGroup]
531
+ }
532
+ }
533
+ })
467
534
 
468
535
  // expose public methods
469
536
  Object.assign(proxy, { focus, updatePosition })
package/src/demos/DlMenuDemo.vue CHANGED
@@ -88,6 +88,65 @@
88
88
  </dl-menu>
89
89
  </dl-button>
90
90
 
91
+ <dl-button label="Auto-opening Submenus">
92
+ <dl-menu
93
+ auto-close
94
+ anchor="top end"
95
+ self="top start"
96
+ >
97
+ <dl-list bordered>
98
+ <dl-list-item
99
+ v-for="i in 3"
100
+ :key="i"
101
+ clickable
102
+ end-icon="icon-dl-right-chevron"
103
+ >
104
+ <dl-item-section no-wrap>
105
+ Submenu {{ i }}
106
+ </dl-item-section>
107
+ <dl-menu
108
+ auto-close
109
+ anchor="top end"
110
+ self="top start"
111
+ hover-group="main-submenus"
112
+ >
113
+ <dl-list bordered>
114
+ <dl-list-item
115
+ v-for="j in 3"
116
+ :key="j"
117
+ clickable
118
+ end-icon="icon-dl-right-chevron"
119
+ >
120
+ <dl-item-section no-wrap>
121
+ Submenu {{ i }}. {{ j }}
122
+ </dl-item-section>
123
+ <dl-menu
124
+ auto-close
125
+ anchor="top end"
126
+ self="top start"
127
+ :hover-group="`submenus-${i}`"
128
+ >
129
+ <dl-list bordered>
130
+ <dl-list-item
131
+ v-for="k in 3"
132
+ :key="k"
133
+ clickable
134
+ dense
135
+ >
136
+ <dl-item-section no-wrap>
137
+ Submenu item {{ k }}
138
+ </dl-item-section>
139
+ </dl-list-item>
140
+ </dl-list>
141
+ </dl-menu>
142
+ </dl-list-item>
143
+ </dl-list>
144
+ </dl-menu>
145
+ </dl-list-item>
146
+ </dl-list>
147
+ </dl-menu>
148
+ </dl-button>
149
+
91
150
  <dl-button label="Basic Menu With SubText">
92
151
  This is a menu button
93
152
  <dl-menu>