@dataloop-ai/components 0.16.37 → 0.16.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.16.37",
+  "version": "0.16.39",
   "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>
@@ -408,19 +409,17 @@
         </div>
 
         <div
-            v-if="hasPaginationSlot"
-            class="dl-table__control"
-        >
-            <slot
-                v-bind="marginalsScope"
-                name="pagination"
-            />
-        </div>
-
-        <div
-            v-else-if="!hideBottom || hideNoData"
+            v-if="!hideBottom"
             :class="bottomClasses"
         >
+            <div class="dl-table__control">
+                <slot
+                    v-if="nothingToDisplay && !hideNoData"
+                    name="no-data"
+                >
+                    {{ bottomMessage }}
+                </slot>
+            </div>
             <div class="dl-table__control">
                 <slot
                     name="bottom"
@@ -434,20 +433,21 @@
                             {{ selectedRowsLabel(rowsSelectedNumber) }}
                         </div>
                     </div>
-                    <dl-pagination
-                        v-if="displayPagination"
-                        v-bind="marginalsScope.pagination"
-                        @update:rowsPerPage="
-                            (v) => setPagination({ rowsPerPage: v })
-                        "
-                        @update:modelValue="(v) => setPagination({ page: v })"
-                    />
 
                     <slot
-                        v-if="nothingToDisplay && !hideNoData"
-                        name="no-data"
+                        v-bind="marginalsScope"
+                        name="pagination"
                     >
-                        {{ bottomMessage }}
+                        <dl-pagination
+                            v-if="displayPagination"
+                            v-bind="marginalsScope.pagination"
+                            @update:rowsPerPage="
+                                (v) => setPagination({ rowsPerPage: v })
+                            "
+                            @update:modelValue="
+                                (v) => setPagination({ page: v })
+                            "
+                        />
                     </slot>
                 </slot>
             </div>
@@ -618,6 +618,7 @@ export default defineComponent({
         'row-reorder',
         'col-reorder',
         'row-click',
+        'th-click',
         'row-dblclick',
         'row-contextmenu',
         ...useTableRowExpandEmits,
@@ -1118,8 +1119,13 @@ export default defineComponent({
         function onVScroll(info: ScrollDetails) {
             emit('virtual-scroll', info)
         }
+
         //
 
+        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/demo/DlTableDemo.vue

@@ -113,6 +113,7 @@
                 style="height: 500px"
                 :rows-per-page-options="rowsPerPageOptions"
                 @row-click="log"
+                @th-click="log"
                 @update:selected="updateSeleted"
             />
 
@@ -215,6 +216,37 @@
                     />
                 </div>
             </div>
+            <div>
+                <p>#no-data & #pagination declare together</p>
+                <DlTable
+                    :selected="selected"
+                    :separator="separator"
+                    :columns="columns"
+                    :bordered="bordered"
+                    :draggable="draggable"
+                    :dense="dense"
+                    class="sticky-header"
+                    :filter="filter"
+                    :selection="selection"
+                    :loading="loading"
+                    :resizable="resizable"
+                    row-key="name"
+                    color="dl-color-secondary"
+                    title="Table Title"
+                    :virtual-scroll="vScroll"
+                    style="height: 200px"
+                    :rows-per-page-options="rowsPerPageOptions"
+                    @row-click="log"
+                    @update:selected="updateSeleted"
+                >
+                    <template #pagination>
+                        pagination slot, no-data slot should be visible too
+                    </template>
+                    <template #no-data>
+                        no-data slot, pagination slot should be visible too
+                    </template>
+                </DlTable>
+            </div>
         </div>
     </div>
 </template>