@dataloop-ai/components 0.17.89 → 0.17.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.89",
+  "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

@@ -131,11 +131,6 @@ export default defineComponent({
             default: 'left',
             validator: (v: string) =>
                 ['left', 'right', 'justify', 'center'].includes(v)
-        },
-        border: {
-            type: String,
-            required: false,
-            default: null
         }
     },
     setup(props, { emit, attrs }) {
@@ -178,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())
@@ -391,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,
@@ -414,8 +416,7 @@ export default defineComponent({
                     '--dl-tooltip-text-align': props.textAlignment,
                     '--dl-tooltip-text-transform': props.capitalized
                         ? 'capitalize'
-                        : 'none',
-                    '--dl-tooltip-border': props.border
+                        : 'none'
                 }
             ] as any
         }
@@ -431,13 +432,12 @@ 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);
     background: var(--dl-tooltip-background);
     border-radius: 2px;
-    border: var(--dl-tooltip-border) solid var(--dl-color-separator);
     text-transform: none;
     font-family: 'Roboto', sans-serif;
     font-weight: 400;

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