@dataloop-ai/components 0.16.38 → 0.16.40

package/package.json

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

package/src/components/basic/DlButton/DlButton.vue

@@ -18,24 +18,24 @@
             <dl-tooltip
                 v-if="!tooltip && overflow && isOverflowing && hasLabel"
             >
-                {{ btnLabel }}
+                {{ buttonLabel }}
             </dl-tooltip>
-            <span class="dl-btn-content dl-anchor--skip">
+            <span class="dl-button-content dl-anchor--skip">
                 <dl-icon
                     v-if="hasIcon"
                     :size="iconSizePX"
                     :color="iconColor || textColor"
-                    :class="{ 'dl-btn-icon': hasContent }"
+                    :class="{ 'dl-button-icon': hasContent }"
                     :icon="icon"
                     :style="cssButtonVars"
                 />
                 <span
                     v-if="hasLabel"
-                    ref="btnLabelRef"
-                    class="dl-btn-label"
+                    ref="buttonLabelRef"
+                    class="dl-button-label"
                     :class="{ 'dl-button-no-wrap': noWrap }"
                 >
-                    {{ btnLabel }}
+                    {{ buttonLabel }}
                 </span>
                 <slot />
             </span>
@@ -108,12 +108,12 @@ export default defineComponent({
     },
     emits: ['click', 'mousedown'],
     setup() {
-        const btnLabelRef = ref(null)
-        const { hasEllipsis } = useSizeObserver(btnLabelRef)
+        const buttonLabelRef = ref(null)
+        const { hasEllipsis } = useSizeObserver(buttonLabelRef)
 
         return {
             uuid: `dl-button-${v4()}`,
-            btnLabelRef,
+            buttonLabelRef,
             isOverflowing: hasEllipsis
         }
     },
@@ -134,7 +134,7 @@ export default defineComponent({
                 this.label !== ''
             )
         },
-        btnLabel(): string {
+        buttonLabel(): string {
             return textTransform(this.label)
         },
         hasIcon(): boolean {
@@ -232,7 +232,7 @@ export default defineComponent({
             }
 
             return {
-                '--dl-btn-container-width': this.fluid ? '100%' : 'auto',
+                '--dl-button-container-width': this.fluid ? '100%' : 'auto',
                 '--dl-button-padding': this.dense
                     ? '0'
                     : this.padding
@@ -326,13 +326,13 @@ export default defineComponent({
         color: var(--dl-button-text-color-hover);
         background-color: var(--dl-button-bg-hover);
         border-color: var(--dl-button-border-hover);
-        & .dl-btn-label {
+        & .dl-button-label {
             transition: all ease-in 0.15s;
             color: var(--dl-button-color-hover);
         }
     }
 }
-.dl-btn-content {
+.dl-button-content {
     display: flex;
     text-align: center;
     align-items: center;
@@ -346,12 +346,12 @@ export default defineComponent({
     min-width: 1.5em;
 }
 
-.dl-btn-icon {
-    margin-right: 7px;
+.dl-button-icon {
+    margin: var(--dl-button-icon-margin, '0px 7px 0px 0px');
 }
 
 .dl-button-container {
     display: inline-block;
-    width: var(--dl-btn-container-width);
+    width: var(--dl-button-container-width);
 }
 </style>

package/src/components/compound/DlSearches/DlSearch/DlSearch.vue

@@ -91,7 +91,7 @@ export default defineComponent({
         'blur',
         'clear',
         'enter',
-        'search-btn',
+        'search',
         'update:model-value'
     ],
     data() {
@@ -132,7 +132,7 @@ export default defineComponent({
             this.$emit('clear', value)
         },
         onSearchButtonPress(): void {
-            this.$emit('search-btn', this.modelValue)
+            this.$emit('search', this.modelValue)
         }
     }
 })

package/src/components/compound/DlTable/DlTable.vue

@@ -269,7 +269,7 @@
 
                             <slot
                                 v-for="col in computedCols"
-                                v-bind="getHeaderScope({ col })"
+                                v-bind="getHeaderScope({ col, onThClick })"
                                 :name="
                                     hasSlotByName(`header-cell-${col.name}`)
                                         ? `header-cell-${col.name}`
@@ -279,6 +279,7 @@
                                 <DlTh
                                     :key="col.name"
                                     :props="getHeaderScope({ col })"
+                                    @click="onThClick($event, col.name)"
                                 >
                                     {{ col.label }}
                                 </DlTh>
@@ -617,6 +618,7 @@ export default defineComponent({
         'row-reorder',
         'col-reorder',
         'row-click',
+        'th-click',
         'row-dblclick',
         'row-contextmenu',
         ...useTableRowExpandEmits,
@@ -1120,6 +1122,10 @@ export default defineComponent({
 
         //
 
+        const onThClick = (evt: MouseEvent, name: string) => {
+            emit('th-click', evt, computedRows.value, name)
+        }
+
         const onTrClick = (
             evt: MouseEvent,
             row: DlTableRow,
@@ -1271,6 +1277,7 @@ export default defineComponent({
             displayPagination,
             onTrClick,
             onTrDblClick,
+            onThClick,
             onTrContextMenu,
             hasPaginationSlot
         }

package/src/components/compound/DlTable/components/DlTh.vue

@@ -49,8 +49,8 @@ export default defineComponent({
 
         const { hasEllipsis } = useSizeObserver(tableTh)
 
-        const onClickFn = (event: Event) => {
-            emit('click', event)
+        const onClickFn = (event: Event, name: string) => {
+            emit('click', event, name)
         }
 
         const hasOptionalProps = computed(() => {
@@ -98,7 +98,7 @@ export default defineComponent({
                 const sort = props.props?.sort as Function
                 sort(column.value)
             }
-            onClickFn(evt)
+            onClickFn(evt, column.value.name)
         }
 
         const onClick = !hasOptionalProps.value ? onClickFn : handleClick

package/src/components/essential/DlMenu/DlMenu.vue

@@ -268,9 +268,12 @@ export default defineComponent({
                 })
             }
 
-            registerTick(() => {
-                updatePosition()
-            })
+            registerTick(
+                () => {
+                    updatePosition()
+                },
+                { continuous: true }
+            )
 
             registerTimeout(() => {
                 // required in order to avoid the "double-tap needed" issue
@@ -357,7 +360,7 @@ export default defineComponent({
             })
         }
 
-        async function updatePosition() {
+        const updatePosition = async () => {
             const el = innerRef.value
 
             if (el === null || anchorEl.value === null) {
@@ -367,6 +370,7 @@ export default defineComponent({
             const isAnchorElVisible = await CheckAnchorElVisiblity(
                 anchorEl.value
             )
+
             if (!isAnchorElVisible) {
                 hide()
                 return

package/src/demo/DlTableDemo.vue

@@ -113,6 +113,7 @@
                 style="height: 500px"
                 :rows-per-page-options="rowsPerPageOptions"
                 @row-click="log"
+                @th-click="log"
                 @update:selected="updateSeleted"
             />
 

package/src/hooks/use-tick.ts

@@ -1,32 +1,52 @@
 import { nextTick, onBeforeUnmount } from 'vue-demi'
 
-/*
- * Usage:
- *    registerTick(fn)
- *    registerTick(fn)
+/**
+ * @description a tick hook that allows you to register a function to be called on the next tick or on the next animation frame.
+ * @returns {Object} registerTick, removeTick
  */
-
 export default function () {
-    let tickFn: Function | undefined
+    let tickFn: Function | null = null
+    let animationFrameId: number | null = null
 
     onBeforeUnmount(() => {
-        tickFn = void 0
+        removeTick()
     })
 
-    return {
-        registerTick(fn: Function) {
-            tickFn = fn
+    const registerTick = (
+        fn: Function,
+        options: { continuous?: boolean } = {}
+    ) => {
+        tickFn = fn
+
+        const { continuous } = options
 
+        if (continuous) {
+            animationFrameId = requestAnimationFrame(() => {
+                if (tickFn === fn) {
+                    tickFn()
+                    registerTick(fn, { continuous })
+                }
+            })
+        } else {
             nextTick(() => {
                 if (tickFn === fn) {
                     tickFn()
-                    tickFn = void 0
+                    tickFn = null
                 }
             })
-        },
+        }
+    }
 
-        removeTick() {
-            tickFn = void 0
+    const removeTick = () => {
+        tickFn = null
+        if (animationFrameId) {
+            cancelAnimationFrame(animationFrameId)
         }
+        animationFrameId = null
+    }
+
+    return {
+        registerTick,
+        removeTick
     }
 }