@dataloop-ai/components 0.19.200 → 0.19.202

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.19.200",
3
+ "version": "0.19.202",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
@@ -18,20 +18,22 @@
18
18
  :for="individualProps[index].id"
19
19
  style="display: inline-flex; gap: 6px"
20
20
  >
21
- <span>{{ option.label }}</span>
22
- <span
23
- v-if="!!option.tooltip && !!option.tooltip.length"
24
- style="display: flex; align-items: center"
25
- >
26
- <dl-icon
27
- icon="icon-dl-info"
28
- class="tooltip-icon"
29
- size="12px"
30
- />
31
- <dl-tooltip>
32
- {{ option.tooltip }}
33
- </dl-tooltip>
34
- </span>
21
+ <slot :name="getSlotName(index)" :option="option">
22
+ <span>{{ option.label }}</span>
23
+ <span
24
+ v-if="!!option.tooltip && !!option.tooltip.length"
25
+ style="display: flex; align-items: center"
26
+ >
27
+ <dl-icon
28
+ icon="icon-dl-info"
29
+ class="tooltip-icon"
30
+ size="12px"
31
+ />
32
+ <dl-tooltip>
33
+ {{ option.tooltip }}
34
+ </dl-tooltip>
35
+ </span>
36
+ </slot>
35
37
  </div>
36
38
  <component
37
39
  :is="components[type]"
@@ -151,6 +153,9 @@ export default defineComponent({
151
153
  },
152
154
  handleUpdate(newValue: DlSelectedValueType, e: Event) {
153
155
  this.$emit('update:model-value', newValue, e)
156
+ },
157
+ getSlotName(index: number) {
158
+ return `option-${index + 1}`
154
159
  }
155
160
  },
156
161
  template: 'dl-option-group'
@@ -1,10 +1,6 @@
1
1
  <template>
2
2
  <div>
3
- <dl-option-group
4
- v-model="optionValue"
5
- :options="options"
6
- inline
7
- />
3
+ <dl-option-group v-model="optionValue" :options="options" inline />
8
4
  <h1>The chosen option is {{ optionValue }}</h1>
9
5
  <dl-option-group
10
6
  v-model="switchValue"
@@ -30,10 +26,7 @@
30
26
 
31
27
  <h1>in menu : The chosen options are {{ switchValue }}</h1>
32
28
  <dl-button label="Menu">
33
- <dl-menu
34
- ref="menu"
35
- fit-content
36
- >
29
+ <dl-menu ref="menu" fit-content>
37
30
  <dl-option-group
38
31
  v-model="switchValue"
39
32
  left-label
@@ -42,6 +35,14 @@
42
35
  />
43
36
  </dl-menu>
44
37
  </dl-button>
38
+
39
+ <h1>With Slot</h1>
40
+ <dl-option-group v-model="optionValue" :options="options" inline>
41
+ <template #option-3="{ option }"
42
+ >{{ option.label }} - I am a custom slot</template
43
+ >
44
+ </dl-option-group>
45
+ <h1>The chosen option is {{ optionValue }}</h1>
45
46
  </div>
46
47
  </template>
47
48