@dataloop-ai/components 0.17.88 → 0.17.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.88",
+  "version": "0.17.90",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -8,7 +8,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "dev:2": "./misc/packAndRunV2.sh",
+    "dev:2": "./misc/unpackAndRunV2.sh",
     "build": "vue-tsc --noEmit --skipLibCheck && vite build",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",

package/src/components/essential/DlTooltip/DlTooltip.vue

@@ -173,7 +173,12 @@ export default defineComponent({
 
         const { showPortal, hidePortal, portalIsActive, portalEl } = usePortal(
             vm,
-            innerRef
+            innerRef,
+            false,
+            {
+                parentId: attrs.id as string,
+                parentClass: attrs.class as string
+            }
         )
 
         const isMobile = computed(() => isMobileOrTablet())
@@ -386,7 +391,9 @@ export default defineComponent({
         Object.assign(vm!.proxy, { updatePosition })
 
         return {
-            uuid: `dl-tooltip-${v4()}`,
+            uuid: (attrs.id as string)?.length
+                ? attrs.id
+                : `dl-tooltip-${v4()}`,
             portalIsActive,
             classes: ['dl-tooltip dl-position-engine', attrs.class],
             showing,
@@ -425,7 +432,7 @@ export default defineComponent({
     overflow-y: auto;
     overflow-x: hidden;
     min-height: 16px;
-    padding: 2px 5px;
+    padding: var(--dl-tooltip-padding, 2px 5px);
     font-size: var(--dl-font-size-small);
     line-height: 16px;
     color: var(--dl-tooltip-color);

package/src/demos/DlTooltipDemo.vue

@@ -82,6 +82,30 @@
                 </div>
             </dl-tooltip>
         </div>
+        <div>
+            Styled Tooltip using styles
+            <dl-tooltip style="border: 1px solid red">
+                <div style="display: flex; flex-flow: row wrap; gap: 3px">
+                    i am with a border!
+                </div>
+            </dl-tooltip>
+        </div>
+        <div>
+            Styled Tooltip using a class
+            <dl-tooltip class="TestID">
+                <div style="display: flex; flex-flow: row wrap; gap: 3px">
+                    i am with a border!
+                </div>
+            </dl-tooltip>
+        </div>
+        <div>
+            Styled Tooltip using an id
+            <dl-tooltip id="TestID">
+                <div style="display: flex; flex-flow: row wrap; gap: 3px">
+                    i am with a border!
+                </div>
+            </dl-tooltip>
+        </div>
     </div>
 </template>
 
@@ -128,3 +152,12 @@ export default defineComponent({
     template: 'dl-tooltip-demo'
 })
 </script>
+
+<style>
+#TestID {
+    border: 1px solid red;
+}
+.TestID {
+    border: 1px solid red;
+}
+</style>

package/src/hooks/use-portal.ts

@@ -27,12 +27,18 @@ function isOnGlobalDialog(vm: any) {
 export default function (
     vm: ComponentInternalInstance | null,
     innerRef: Ref<HTMLElement | null>,
-    checkGlobalDialog = false
+    checkGlobalDialog = false,
+    config: {
+        parentId?: string
+        parentClass?: string
+        parentStyle?: string
+    } = {}
 ) {
     // showing, including while in show/hide transition
     const portalIsActive = ref(false)
 
     const { proxy } = vm!
+    const { parentId, parentClass, parentStyle } = config
 
     // showing & not in any show/hide transition
     const portalIsAccessible = ref(false)
@@ -53,7 +59,11 @@ export default function (
 
         if (portalIsActive.value === false) {
             if (onGlobalDialog === false && portalEl.value === null) {
-                portalEl.value = createGlobalNode()
+                portalEl.value = createGlobalNode(parentId)
+                portalEl.value.className =
+                    portalEl.value.className + (parentClass || '')
+                portalEl.value.style.cssText =
+                    portalEl.value.style.cssText + (parentStyle || '')
             }
 
             portalIsActive.value = true