@dataloop-ai/components 0.20.155 → 0.20.156

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.155",
+  "version": "0.20.156",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -64,6 +64,8 @@
                 :icon="dropdownIcon"
                 :size="iconSize"
                 :color="getIconColor"
+                :tooltip="iconTooltip"
+                @click="onIconClicked"
             />
         </dl-button>
         <dl-menu
@@ -132,6 +134,8 @@
                 :icon="dropdownIcon"
                 :size="iconSize"
                 :color="getIconColor"
+                :tooltip="iconTooltip"
+                @click="onIconClicked"
             />
         </div>
 
@@ -235,6 +239,11 @@ export default defineComponent({
         fluid: Boolean,
         icon: { type: String, required: false, default: '' },
         iconSize: { type: String, required: false, default: '20px' },
+        iconTooltip: {
+            type: String,
+            required: false,
+            default: null
+        },
         flat: Boolean,
         transform: {
             type: String as PropType<DlTextTransformOptions>,
@@ -276,6 +285,7 @@ export default defineComponent({
         'update:model-value',
         'update:model-value',
         'click',
+        'icon-clicked',
         'before-show',
         'show',
         'before-hide',
@@ -384,6 +394,10 @@ export default defineComponent({
             emit('click', e)
         }
 
+        function onIconClicked(e: Event) {
+            emit('icon-clicked', e)
+        }
+
         function onClickHide(e: Event) {
             stop(e)
             hide(e)
@@ -486,6 +500,7 @@ export default defineComponent({
             onShow,
             onHide,
             onClick,
+            onIconClicked,
             onClickHide,
             toggle,
             show,

package/src/components/essential/DlIcon/DlIcon.vue

@@ -18,6 +18,9 @@
             {{ externalIcon ? icon : null }}
         </i>
         <slot />
+        <dl-tooltip v-if="tooltip">
+            {{ tooltip }}
+        </dl-tooltip>
     </div>
     <div
         v-else
@@ -48,9 +51,13 @@ import {
 } from 'vue-demi'
 import { getColor, loggerFactory, stringStyleToRecord } from '../../../utils'
 import { COLORED_ICONS } from '@dataloop-ai/icons/types'
+import { DlTooltip } from '../../shared'
 
 export default defineComponent({
     name: 'DlIcon',
+    components: {
+        DlTooltip
+    },
     props: {
         color: {
             type: String,
@@ -79,11 +86,15 @@ export default defineComponent({
         svgSource: {
             type: String,
             default: null
+        },
+        tooltip: {
+            type: String,
+            default: null
         }
     },
     emits: ['click', 'mousemove', 'mouseup', 'mousedown'],
     setup(props) {
-        const { styles, color, size, icon, svg, inline, svgSource } =
+        const { styles, color, size, icon, svg, inline, svgSource, tooltip } =
             toRefs(props)
 
         const svgIcon = ref(null)