@indielayer/ui 1.14.0 → 1.14.1

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.14.0";
+declare const _default: "1.14.1";
 export default _default;

package/lib/version.js

@@ -1,4 +1,4 @@
-const e = "1.14.0";
+const e = "1.14.1";
 export {
   e as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.14.0",
+  "version": "1.14.1",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",

package/src/components/menu/MenuItem.vue

@@ -60,6 +60,7 @@ import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XIcon from '../../components/icon/Icon.vue'
 import XSpinner from '../../components/spinner/Spinner.vue'
+import XCheckbox from '../../components/checkbox/Checkbox.vue'
 
 import type { MenuArrayItem } from './Menu.vue'
 

package/src/components/table/Table.vue

@@ -87,6 +87,7 @@ import XSkeleton from '../skeleton/Skeleton.vue'
 import type { SkeletonShape } from '../skeleton/Skeleton.vue'
 
 import XIcon from '../icon/Icon.vue'
+import XCheckbox from '../checkbox/Checkbox.vue'
 
 import { chevronDownIcon } from '../../common/icons'
 
@@ -278,14 +279,14 @@ const { styles, classes, className } = useTheme('Table', {}, props)
         :class="classes.table"
       >
         <x-table-head :sticky-header="stickyHeader">
-          <x-table-header v-if="props.selectable && !props.singleSelect" width="48" class="!px-3 !py-2.5">
+          <x-table-header v-if="props.selectable && !props.singleSelect" width="40" class="!pl-3.5 !pr-0.5 !py-2.5 cursor-pointer" @click="toggleSelectAll">
             <x-checkbox
               :model-value="allRowsSelected || someRowsSelected"
               :indeterminate="someRowsSelected"
               hide-footer
               aria-label="Select all rows"
               skip-form-registry
-              @click.prevent="toggleSelectAll"
+              @click.prevent.stop="toggleSelectAll"
             />
           </x-table-header>
           <x-table-header v-if="expandable" width="48" class="!p-0"/>
@@ -354,13 +355,13 @@ const { styles, classes, className } = useTheme('Table', {}, props)
               :single-select="singleSelect"
               @click="onTableRowClick(item.data, item.index)"
             >
-              <x-table-cell v-if="props.selectable && !singleSelect" width="48">
+              <x-table-cell v-if="props.selectable && !singleSelect" width="40" class="!pl-3.5 !pr-0.5 cursor-pointer" @click.stop="toggleRowSelection(keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index)">
                 <x-checkbox
                   :model-value="isRowSelected(keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index)"
                   hide-footer
                   :aria-label="`Select row ${index + 1}`"
                   skip-form-registry
-                  @click.prevent="toggleRowSelection(keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index)"
+                  @click.prevent.stop="toggleRowSelection(keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index)"
                 />
               </x-table-cell>
               <x-table-cell v-if="expandable" width="48" class="!p-1">

package/src/components/table/TableHeader.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 const validators = {
   sort: [1, -1, undefined] as const,
-  textAlign: ['left', 'center', 'right', 'justify'] as const,
+  textAlign: ['left', 'center', 'right'] as const,
 }
 
 const tableHeaderProps = {
@@ -41,15 +41,17 @@ const { styles, classes, className } = useTheme('TableHeader', {}, props)
 <template>
   <th :style="styles" :class="[className, classes.th, 'group/th']">
     <div :class="classes.header">
-      <slot></slot>
-
-      <x-toggle-tip v-if="tooltip" :content="tooltip"/>
+      <div class="flex items-center gap-1">
+        <slot></slot>
+        <x-toggle-tip v-if="tooltip" :content="tooltip"/>
+      </div>
 
       <svg
         v-if="sortable"
         class="shrink-0"
         :class="[
           classes.sortIcon,
+          textAlign === 'right' ? '-mr-4 -translate-x-4' : '-ml-4 translate-x-4',
           [sort && [1, -1].includes(sort) ? '' : 'invisible group-hover/th:visible'],
           [sort !== -1 && sort !== 1 ? 'text-secondary-400 dark:text-secondary-500' : 'text-primary-700 dark:text-primary-400']
         ]"

package/src/components/table/theme/TableHeader.base.theme.ts

@@ -14,9 +14,10 @@ const theme: TableHeaderTheme = {
       const classes = ['flex items-center gap-1 select-none']
 
       if (props.textAlign === 'left') classes.push('justify-start')
-      if (props.textAlign === 'right') classes.push('justify-end')
-      if (props.textAlign === 'center') classes.push('justify-center')
-      if (props.textAlign === 'justify') classes.push('justify-center')
+      else if (props.textAlign === 'right') {
+        if (props.sortable) classes.push('flex-row-reverse')
+        else classes.push('justify-end')
+      } else if (props.textAlign === 'center') classes.push('justify-center')
 
       return classes
     },

package/src/components/table/theme/TableHeader.carbon.theme.ts

@@ -10,7 +10,6 @@ const theme: TableHeaderTheme = {
       if (props.textAlign === 'left') classes.push('text-left')
       if (props.textAlign === 'right') classes.push('text-right')
       if (props.textAlign === 'center') classes.push('text-center')
-      if (props.textAlign === 'justify') classes.push('text-justify')
 
       return classes
     },

package/src/version.ts

@@ -1 +1 @@
-export default '1.14.0'
+export default '1.14.1'