@dataloop-ai/components 0.20.140 → 0.20.141

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 +2 -2
  2. package/src/components/basic/DlAccordion/DlAccordion.vue +38 -14
  3. package/src/components/basic/DlAccordion/components/AccordionHeader.vue +29 -7
  4. package/src/demos/DlAccordionDemo.vue +25 -20
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.20.140",
3
+ "version": "0.20.141",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
@@ -23,7 +23,7 @@
23
23
  "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
24
24
  },
25
25
  "dependencies": {
26
- "@dataloop-ai/icons": "^3.1.23",
26
+ "@dataloop-ai/icons": "^3.1.27",
27
27
  "@types/flat": "^5.0.2",
28
28
  "@types/lodash": "^4.14.184",
29
29
  "@types/sortablejs": "^1.15.7",
package/src/components/basic/DlAccordion/DlAccordion.vue CHANGED
@@ -3,16 +3,22 @@
3
3
  :id="uuid"
4
4
  :class="identifierClass"
5
5
  class="accordion"
6
+ :style="accordionContentStyles"
6
7
  >
7
8
  <dl-accordion-header
8
9
  :additional-info="additionalInfo"
9
10
  :default-opened="defaultOpened"
10
11
  :title="title"
11
12
  :font-size="fontSize"
13
+ :font-weight="fontWeight"
12
14
  :title-color="titleColor"
13
15
  :right-side="rightSide"
14
16
  :is-open="isOpen"
17
+ :closed-icon="closedIcon"
18
+ :opened-icon="openedIcon"
15
19
  data-test-id="accordion-header"
20
+ :background-color="backgroundColor"
21
+ :with-background="withBackground"
16
22
  @click="handleClick"
17
23
  >
18
24
  <template #header>
@@ -29,18 +35,9 @@
29
35
  }"
30
36
  >
31
37
  <slot v-if="isOpen && !isEmpty" />
32
- <dl-empty-state
33
- v-if="isOpen && isEmpty"
34
- v-bind="emptyStateProps"
35
- >
36
- <template
37
- v-for="(_, slot) in $slots"
38
- #[slot]="props"
39
- >
40
- <slot
41
- :name="slot"
42
- v-bind="props"
43
- />
38
+ <dl-empty-state v-if="isOpen && isEmpty" v-bind="emptyStateProps">
39
+ <template v-for="(_, slot) in $slots" #[slot]="props">
40
+ <slot :name="slot" v-bind="props" />
44
41
  </template>
45
42
  </dl-empty-state>
46
43
  </div>
@@ -53,6 +50,7 @@ import DlEmptyState from '../DlEmptyState/DlEmptyState.vue'
53
50
  import { DlEmptyStateProps } from '../DlEmptyState/types'
54
51
  import { defineComponent, PropType } from 'vue-demi'
55
52
  import { v4 } from 'uuid'
53
+ import { getColor } from '../../../../utils'
56
54
 
57
55
  const accordionEmptyStateProps = {
58
56
  title: '',
@@ -77,6 +75,7 @@ export default defineComponent({
77
75
  defaultOpened: { type: Boolean, default: false },
78
76
  title: { type: String, default: null },
79
77
  fontSize: { type: String, default: '12px' },
78
+ fontWeight: { type: String, default: '400' },
80
79
  titleColor: { type: String, default: 'dl-color-medium' },
81
80
  modelValue: { type: Boolean, default: null },
82
81
  rightSide: { type: Boolean, default: false },
@@ -85,7 +84,12 @@ export default defineComponent({
85
84
  type: Object as PropType<DlEmptyStateProps>,
86
85
  default: () => accordionEmptyStateProps
87
86
  },
88
- separator: { type: Boolean, default: false }
87
+ separator: { type: Boolean, default: false },
88
+ closedIcon: { type: String, default: 'icon-dl-right-chevron' },
89
+ openedIcon: { type: String, default: 'icon-dl-down-chevron' },
90
+ backgroundColor: { type: String, default: 'dl-color-fill' },
91
+ withBackground: { type: Boolean, default: false },
92
+ iconHoverColor: { type: String, default: 'dl-color-primary' }
89
93
  },
90
94
  emits: ['update:model-value', 'hide', 'show'],
91
95
  data() {
@@ -101,6 +105,23 @@ export default defineComponent({
101
105
  },
102
106
  hasHeaderSlot(): boolean {
103
107
  return this.$slots.header !== undefined
108
+ },
109
+ accordionContentStyles(): Record<string, string> {
110
+ return {
111
+ '--dl-color-accordion-content-background':
112
+ this.withBackground && this.isOpen
113
+ ? getColor(this.backgroundColor)
114
+ : '',
115
+ '--dl-accordion-content-padding': this.withBackground
116
+ ? '16px'
117
+ : '0 16px 15px 38px',
118
+ '--dl-accordion-content-border-radius': this.withBackground
119
+ ? '4px'
120
+ : '',
121
+ '--dl-accordion-margin-left': this.withBackground
122
+ ? '12px'
123
+ : '0px'
124
+ }
104
125
  }
105
126
  },
106
127
  methods: {
@@ -118,13 +139,14 @@ export default defineComponent({
118
139
  <style scoped lang="scss">
119
140
  .accordion {
120
141
  max-width: 100%;
142
+ margin-left: var(--dl-accordion-margin-left);
121
143
  }
122
144
  .accordion-content {
123
145
  text-align: left;
124
146
  font-size: var(--dl-font-size-body);
125
147
  transition: all 300ms;
126
148
  line-height: 16px;
127
- padding: 0 16px 15px 38px;
149
+ padding: var(--dl-accordion-content-padding, 0 16px 15px 38px);
128
150
  color: var(--dl-color-darker);
129
151
  max-height: fit-content;
130
152
  overflow: hidden;
@@ -138,5 +160,7 @@ export default defineComponent({
138
160
  border-color: transparent;
139
161
  padding-bottom: 0;
140
162
  }
163
+ background-color: var(--dl-color-accordion-content-background);
164
+ border-radius: var(--dl-accordion-content-border-radius);
141
165
  }
142
166
  </style>
package/src/components/basic/DlAccordion/components/AccordionHeader.vue CHANGED
@@ -9,15 +9,12 @@
9
9
  class="expand-icon"
10
10
  :size="$props.fontSize"
11
11
  :class="{ expanded: isOpen, rightSide }"
12
- :icon="rightSide ? 'icon-dl-down-chevron' : 'icon-dl-right-chevron'"
12
+ :icon="rightSide ? openedIcon : closedIcon"
13
13
  :color="titleColor"
14
14
  />
15
15
  <div class="header-content">
16
16
  <slot name="header">
17
- <span
18
- ref="dlAccordionTitleRef"
19
- class="accordion-title"
20
- >
17
+ <span ref="dlAccordionTitleRef" class="accordion-title">
21
18
  <dl-tooltip v-if="isOverflowing">
22
19
  {{ title }}
23
20
  </dl-tooltip>
@@ -55,10 +52,15 @@ export default defineComponent({
55
52
  additionalInfo: { type: String!, default: '' },
56
53
  defaultOpened: { type: Boolean, default: false },
57
54
  fontSize: { type: String, default: '12px' },
55
+ fontWeight: { type: String, default: '400' },
58
56
  title: { type: String, default: null },
59
57
  titleColor: { type: String, default: 'dl-color-medium' },
60
58
  isOpen: { type: Boolean, default: false },
61
- rightSide: { type: Boolean, default: false }
59
+ rightSide: { type: Boolean, default: false },
60
+ closedIcon: { type: String, default: 'icon-dl-right-chevron' },
61
+ openedIcon: { type: String, default: 'icon-dl-down-chevron' },
62
+ backgroundColor: { type: String, default: 'dl-color-fill' },
63
+ withBackground: { type: Boolean, default: false }
62
64
  },
63
65
  emits: ['click'],
64
66
  setup() {
@@ -83,7 +85,20 @@ export default defineComponent({
83
85
  '--dl-accordion-header-flex-direction': this.rightSide
84
86
  ? 'row-reverse'
85
87
  : 'row',
86
- '--dl-accordion-header-fontsize': this.fontSize
88
+ '--dl-accordion-header-fontsize': this.fontSize,
89
+ '--dl-accordion-header-fontweight': this.fontWeight,
90
+ '--dl-accordion-header-background-color':
91
+ this.withBackground && !this.isOpen
92
+ ? getColor(this.backgroundColor)
93
+ : '',
94
+ '--dl-accordion-header-border-radius':
95
+ this.withBackground && !this.isOpen ? '4px' : '0px',
96
+ '--dl-accordion-header-padding': this.withBackground
97
+ ? '4px'
98
+ : '12px 16px',
99
+ '--dl-accordion-header-margin-bottom': this.withBackground
100
+ ? '2px'
101
+ : '0px'
87
102
  }
88
103
  },
89
104
  hasSlot(): boolean {
@@ -106,11 +121,18 @@ export default defineComponent({
106
121
  padding: var(--dl-accordion-header-padding, 12px 16px);
107
122
  cursor: pointer;
108
123
  font-size: var(--dl-accordion-header-fontsize);
124
+ font-weight: var(--dl-accordion-header-fontweight);
109
125
  display: flex;
110
126
  align-items: center;
111
127
  gap: 10px;
112
128
  flex-direction: var(--dl-accordion-header-flex-direction);
113
129
  color: var(--dl-title-color);
130
+ margin-bottom: var(--dl-accordion-header-margin-bottom);
131
+ }
132
+
133
+ .accordion-header:hover {
134
+ background-color: var(--dl-accordion-header-background-color, transparent);
135
+ border-radius: var(--dl-accordion-header-border-radius, 0px);
114
136
  }
115
137
 
116
138
  .accordion-title {
package/src/demos/DlAccordionDemo.vue CHANGED
@@ -12,6 +12,26 @@
12
12
  which had taken place did not square with this.
13
13
  </dl-accordion>
14
14
  </div>
15
+
16
+ <div style="width: 100%">
17
+ <dl-accordion
18
+ v-model="isAccordionOpen"
19
+ title="Background color and custom open close icons"
20
+ closed-icon="icon-dl-caret-right"
21
+ opened-icon="icon-dl-caret-down"
22
+ with-background
23
+ background-color="dl-color-fill"
24
+ font-weight="500"
25
+ font-size="14px"
26
+ >
27
+ Some of the animals remembered -- or thought they remembered --
28
+ that the Sixth Commandment decreed, 'No animal shall kill any
29
+ other animal.' And though no one cared to mention it in the
30
+ hearing of the pigs or the dogs, it was felt that the killings
31
+ which had taken place did not square with this.
32
+ </dl-accordion>
33
+ </div>
34
+
15
35
  <div style="width: 100%">
16
36
  <p>Accordion in an accordion</p>
17
37
  <dl-accordion
@@ -20,19 +40,13 @@
20
40
  >
21
41
  <template #header>
22
42
  Custom header content 1
23
- <dl-switch
24
- v-model="switchModel"
25
- :value="2"
26
- />
43
+ <dl-switch v-model="switchModel" :value="2" />
27
44
  </template>
28
45
 
29
46
  <dl-accordion default-opened>
30
47
  <template #header>
31
48
  Custom header content 2
32
- <dl-switch
33
- v-model="switchModel"
34
- :value="2"
35
- />
49
+ <dl-switch v-model="switchModel" :value="2" />
36
50
  </template>
37
51
  <template #default>
38
52
  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
@@ -69,10 +83,7 @@
69
83
  <dl-accordion>
70
84
  <template #header>
71
85
  Custom header content
72
- <dl-switch
73
- v-model="switchModel"
74
- :value="2"
75
- />
86
+ <dl-switch v-model="switchModel" :value="2" />
76
87
  </template>
77
88
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
78
89
  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
@@ -94,19 +105,13 @@
94
105
  <dl-accordion default-opened>
95
106
  <template #header>
96
107
  Custom header content
97
- <dl-switch
98
- v-model="switchModel"
99
- :value="2"
100
- />
108
+ <dl-switch v-model="switchModel" :value="2" />
101
109
  </template>
102
110
 
103
111
  <dl-accordion default-opened>
104
112
  <template #header>
105
113
  Custom header content
106
- <dl-switch
107
- v-model="switchModel"
108
- :value="2"
109
- />
114
+ <dl-switch v-model="switchModel" :value="2" />
110
115
  </template>
111
116
  <template #default>
112
117
  Lorem ipsum dolor sit amet, consectetur adipiscing elit,