@indielayer/ui 1.9.0 → 1.9.2

package/lib/node_modules/.pnpm/{@vueuse_core@10.2.0_vue@3.3.9_typescript@5.2.2_ → @vueuse_core@10.2.0_vue@3.5.10_typescript@5.2.2_}/node_modules/@vueuse/core/index.js

@@ -1,5 +1,5 @@
-import { noop as I, toValue as A, tryOnScopeDispose as W, isIOS as G, useThrottleFn as N, isClient as Q, increaseWithUnit as U, toRef as J, useDebounceFn as K } from "../../../../@vueuse_shared@10.2.0_vue@3.3.9_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
-import { createFilterWrapper as Se, debounceFilter as Oe, throttleFilter as xe } from "../../../../@vueuse_shared@10.2.0_vue@3.3.9_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
+import { noop as I, toValue as A, tryOnScopeDispose as W, isIOS as G, useThrottleFn as N, isClient as Q, increaseWithUnit as U, toRef as J, useDebounceFn as K } from "../../../../@vueuse_shared@10.2.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
+import { createFilterWrapper as Se, debounceFilter as Oe, throttleFilter as xe } from "../../../../@vueuse_shared@10.2.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
 import { watch as D, computed as O, ref as _, reactive as C, watchEffect as Z, getCurrentInstance as ee, onMounted as te } from "vue";
 function S(e) {
   var s;

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.9.0";
+declare const _default: "1.9.2";
 export default _default;

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -45,7 +45,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "tailwindcss": "^3.0.0",
-    "vue": "^3.0.0"
+    "vue": "^3.4.0"
   },
   "devDependencies": {
     "@indielayer/stylelint-config": "^1.0.0",
@@ -74,7 +74,7 @@
     "typescript": "^5.2.2",
     "vite": "^4.4.11",
     "vitest": "^0.32.2",
-    "vue": "^3.3.9",
+    "vue": "^3.5.0",
     "vue-router": "^4.2.2",
     "vue-tsc": "^1.8.2"
   },

package/src/components/table/Table.vue

@@ -43,6 +43,7 @@ const tableProps = {
     type: Number,
     default: 5,
   },
+  keyProp: String,
 }
 
 export type TableHeader = {
@@ -90,6 +91,10 @@ const props = defineProps({
   },
 })
 
+const selected = defineModel<number | number[]>('selected')
+
+const hasSelected = computed(() => typeof selected.value === 'number')
+
 type internalT = T & {
   __expanded?: boolean;
 }
@@ -118,7 +123,7 @@ const { list, containerProps, wrapperProps } = useVirtualList(
 const internalItems = ref<internalT[]>([])
 
 watch(items, (newValue) => {
-  if (props.expandable) internalItems.value = clone(newValue as any)
+  if (props.expandable) internalItems.value = clone(newValue as any) as internalT[]
 }, { immediate: true })
 
 const emit = defineEmits(['update:sort', 'click-row'])
@@ -253,11 +258,12 @@ const { styles, classes, className } = useTheme('Table', {}, props)
               </td>
             </tr>
           </template>
-          <template v-for="(item, index) in list" v-else :key="index">
+          <template v-for="(item, index) in list" v-else :key="keyProp ?? index">
             <x-table-row
               :pointer="pointer"
               :striped="striped"
-              @click="$emit('click-row', item.data)"
+              :selected="hasSelected ? selected === (keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index) : undefined"
+              @click="$emit('click-row', item.data, item.index)"
             >
               <x-table-cell v-if="expandable" width="48" class="!p-1">
                 <button
@@ -283,7 +289,7 @@ const { styles, classes, className } = useTheme('Table', {}, props)
                 :truncate="header.truncate"
                 :width="header.width"
                 :dense="dense"
-                :style="[props.virtualListItemHeight ? {
+                :style="[props.virtualList ? {
                   height: `${props.virtualListItemHeight}px`,
                   maxHeight: `${props.virtualListItemHeight}px`,
                   overflow: 'hidden',

package/src/components/table/TableRow.vue

@@ -6,6 +6,7 @@ const validators = {
 const tableRowProps = {
   pointer: Boolean,
   striped: Boolean,
+  selected: Boolean,
   verticalAlign: {
     type: String as PropType<'baseline' | 'bottom' | 'middle' | 'text-bottom' | 'text-top' | 'top'>,
     default: 'top',

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

@@ -5,6 +5,10 @@ const theme: TableRowTheme = {
     row: ({ props }) => {
       const classes = []
 
+      if (props.selected) {
+        classes.push('shadow-[inset_3px_0] shadow-primary-500')
+      }
+
       if (props.striped) {
         classes.push('even:bg-secondary-50 dark:even:bg-secondary-700')
       } else {

package/src/version.ts

@@ -1 +1 @@
-export default '1.9.0'
+export default '1.9.2'