@dataloop-ai/components 0.16.38 → 0.16.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.16.38",
+  "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>
@@ -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/demo/DlTableDemo.vue

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