@dataloop-ai/components 0.20.267 → 0.20.269

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/package.json +1 -1
  2. package/src/components/compound/DlDialogBox/components/DlDialogBoxHeader.vue +18 -12
  3. package/src/components/compound/DlStepper/components/DlStepperHeader.vue +19 -4
  4. package/src/demos/DlDialogBoxDemo.vue +5 -43
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.20.267",
3
+ "version": "0.20.269",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/components/compound/DlDialogBox/components/DlDialogBoxHeader.vue CHANGED
@@ -23,19 +23,12 @@
23
23
  </p>
24
24
  </div>
25
25
  <div class="actions-container">
26
- <slot name="actions" />
26
+ <slot name="actions" :button-props="actionButtonProps" />
27
27
  <dl-button
28
28
  v-if="closeButton"
29
+ class="close-button"
30
+ v-bind="actionButtonProps"
29
31
  icon="icon-dl-close"
30
- icon-size="16px"
31
- flat
32
- size="m"
33
- text-color="var(--dell-gray-600)"
34
- hover-bg-color="var(--dell-gray-100)"
35
- pressed-bg-color="var(--dell-gray-200)"
36
- hover-text-color="var(--dell-gray-800)"
37
- pressed-text-color="var(--dell-gray-800)"
38
- :padding="closeIconSizePadding"
39
32
  @click="$emit('onClose')"
40
33
  >
41
34
  <dl-tooltip :delay="800"> Close </dl-tooltip>
@@ -68,8 +61,19 @@ export default defineComponent({
68
61
  setup(props, { slots }) {
69
62
  const hasTitle = computed(() => !!props.title || !!slots.title)
70
63
  const hasSubtitle = computed(() => !!props.subtitle || !!slots.subtitle)
71
- const closeIconSizePadding = `0 0 0 0`
72
- return { hasTitle, hasSubtitle, closeIconSizePadding }
64
+ const actionButtonProps = {
65
+ iconSize: '16px',
66
+ flat: true,
67
+ size: 'm',
68
+ textColor: 'var(--dell-gray-600)',
69
+ hoverBgColor: 'var(--dell-gray-100)',
70
+ pressedBgColor: 'var(--dell-gray-200)',
71
+ hoverTextColor: 'var(--dell-gray-800)',
72
+ pressedTextColor: 'var(--dell-gray-800)',
73
+ padding: '4px'
74
+ }
75
+
76
+ return { hasTitle, hasSubtitle, actionButtonProps }
73
77
  }
74
78
  })
75
79
  </script>
@@ -107,6 +111,8 @@ export default defineComponent({
107
111
  align-items: flex-start;
108
112
  ::v-deep button.dl-button {
109
113
  --dl-button-border-radius: 0;
114
+ border: none;
115
+ --dl-button-border: none;
110
116
  &:focus-visible {
111
117
  --dl-button-border-radius: 2px;
112
118
  }
package/src/components/compound/DlStepper/components/DlStepperHeader.vue CHANGED
@@ -7,10 +7,16 @@
7
7
  </slot>
8
8
  <dl-button
9
9
  v-if="!hideCloseButton"
10
- text-color="dl-color-darker"
11
- flat
10
+ class="close-button"
12
11
  icon="icon-dl-close"
13
- size="xl"
12
+ icon-size="16px"
13
+ flat
14
+ size="m"
15
+ text-color="var(--dell-gray-600)"
16
+ hover-bg-color="var(--dell-gray-100)"
17
+ pressed-bg-color="var(--dell-gray-200)"
18
+ hover-text-color="var(--dell-gray-800)"
19
+ pressed-text-color="var(--dell-gray-800)"
14
20
  :padding="closeIconSizePadding"
15
21
  @click="$emit('close')"
16
22
  />
@@ -38,7 +44,7 @@ export default defineComponent({
38
44
  },
39
45
  emits: ['close'],
40
46
  setup() {
41
- const closeIconSizePadding = `0 0 0 0`
47
+ const closeIconSizePadding = `4px`
42
48
  return { closeIconSizePadding }
43
49
  }
44
50
  })
@@ -51,4 +57,13 @@ export default defineComponent({
51
57
  padding: 16px;
52
58
  border-bottom: 1px solid var(--dl-color-separator);
53
59
  }
60
+ .close-button {
61
+ ::v-deep button.dl-button {
62
+ --dl-button-border-radius: 0;
63
+ border: none;
64
+ &:focus-visible {
65
+ --dl-button-border-radius: 2px;
66
+ }
67
+ }
68
+ }
54
69
  </style>
package/src/demos/DlDialogBoxDemo.vue CHANGED
@@ -17,54 +17,16 @@
17
17
  subtitle="updated by rotemshaham@dataloop.ai"
18
18
  @on-close="closeModal"
19
19
  >
20
- <template #actions>
21
- <dl-button
22
- icon="icon-dl-edit"
23
- icon-size="16px"
24
- size="m"
25
- flat
26
- text-color="var(--dell-gray-600)"
27
- hover-bg-color="var(--dell-gray-100)"
28
- pressed-bg-color="var(--dell-gray-200)"
29
- hover-text-color="var(--dell-gray-800)"
30
- pressed-text-color="var(--dell-gray-800)"
31
- padding="0 0 0 0"
32
- />
33
- <dl-button
34
- icon="icon-dl-delete"
35
- icon-size="16px"
36
- size="m"
37
- flat
38
- text-color="var(--dell-gray-600)"
39
- hover-bg-color="var(--dell-gray-100)"
40
- pressed-bg-color="var(--dell-gray-200)"
41
- hover-text-color="var(--dell-gray-800)"
42
- pressed-text-color="var(--dell-gray-800)"
43
- padding="0 0 0 0"
44
- />
20
+ <template #actions="{ buttonProps }">
21
+ <dl-button v-bind="buttonProps" icon="icon-dl-edit" />
22
+ <dl-button v-bind="buttonProps" icon="icon-dl-delete" />
45
23
  <dl-button
24
+ v-bind="buttonProps"
46
25
  icon="icon-dl-download"
47
- icon-size="16px"
48
- size="m"
49
- flat
50
- text-color="var(--dell-gray-600)"
51
- hover-bg-color="var(--dell-gray-100)"
52
- pressed-bg-color="var(--dell-gray-200)"
53
- hover-text-color="var(--dell-gray-800)"
54
- pressed-text-color="var(--dell-gray-800)"
55
- padding="0 0 0 0"
56
26
  />
57
27
  <dl-button
28
+ v-bind="buttonProps"
58
29
  icon="icon-dl-settings"
59
- icon-size="16px"
60
- size="m"
61
- flat
62
- text-color="var(--dell-gray-600)"
63
- hover-bg-color="var(--dell-gray-100)"
64
- pressed-bg-color="var(--dell-gray-200)"
65
- hover-text-color="var(--dell-gray-800)"
66
- pressed-text-color="var(--dell-gray-800)"
67
- padding="0 0 0 0"
68
30
  />
69
31
  </template>
70
32
  </dl-dialog-box-header>