chore: update vue version to use defineModel

.changeset/late-comics-attend.md

@@ -0,0 +1,5 @@
+---
+"@indielayer/ui": patch
+---
+
+chore: update vue version to use defineModel

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "scripts": {
+    "i9": "npx pnpm@9 install",
     "prepare": "is-ci || simple-git-hooks",
     "dev": "cd packages/ui && pnpm dev",
     "build": "cd packages/ui && pnpm build:prod",
@@ -48,4 +49,4 @@
     "pre-commit": "npm exec lint-staged --concurrent false",
     "commit-msg": "npm exec tsx .scripts/verifyCommit.ts $1"
   }
-}
+}

packages/create-ui/templates/vue/base/package.json

@@ -5,7 +5,7 @@
     "preview": "vite preview --port 5050"
   },
   "dependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.5.10"
   },
   "devDependencies": {
     "@indielayer/ui": "^1.0.9",
@@ -15,4 +15,4 @@
     "tailwindcss": "^3.3.2",
     "vite": "^4.4.11"
   }
-}
+}

packages/create-ui/templates/vue/config/cypress-ct/package.json

@@ -4,12 +4,12 @@
     "test:unit:ci": "cypress run-ct --quiet --reporter spec"
   },
   "dependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.5.10"
   },
   "devDependencies": {
     "@cypress/vite-dev-server": "^5.0.5",
     "@cypress/vue": "^5.0.5",
     "cypress": "^12.16.0",
     "vite": "^4.4.11"
   }
-}
+}

packages/create-ui/templates/vue/config/pinia/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
     "pinia": "^2.0.13",
-    "vue": "^3.3.4"
+    "vue": "^3.5.10"
   }
-}
+}

packages/create-ui/templates/vue/config/router/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "vue": "^3.3.4",
+    "vue": "^3.5.10",
     "vue-router": "^4.2.2"
   }
-}
+}

packages/create-ui/templates/vue/config/vitest/package.json

@@ -3,11 +3,11 @@
     "test:unit": "vitest --environment jsdom"
   },
   "dependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.5.10"
   },
   "devDependencies": {
     "@vue/test-utils": "^2.4.0",
     "jsdom": "^22.1.0",
     "vitest": "^0.32.2"
   }
-}
+}

packages/create-ui/templates/vue/config/vuex/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "vue": "^3.3.4",
+    "vue": "^3.5.10",
     "vuex": "^4.0.2"
   }
-}
+}

packages/ui/docs/pages/component/table/usage.vue

@@ -60,6 +60,8 @@ const itemsSorted = computed<Book[]>(() => {
     return 0
   })
 })
+
+const selectedIndex = ref<number>(0)
 </script>
 
 <template>
@@ -87,11 +89,13 @@ const itemsSorted = computed<Book[]>(() => {
     <x-card>
       <x-table
         v-model:sort="sort"
+        v-model:selected="selectedIndex"
         dense
+        pointer
         striped
         :headers="headers"
         :items="itemsSorted"
-        @click-row="notifications?.log('open')"
+        @click-row="(event, index) => { notifications?.log(event); selectedIndex = index }"
       >
         <template #item-published="{ item }">
           {{ formatDate(item.published) }}

packages/ui/docs/pages/typography.vue

@@ -70,18 +70,20 @@ const textClasses = {
 
   <div class="mt-10">
     <table class="text-left w-full">
-      <tr>
-        <th class="py-2">Class</th>
-        <th>Size</th>
-        <th>Line Height</th>
-        <th>Preview</th>
-      </tr>
-      <tr v-for="(c, key) in textClasses" :key="key" class="border-t">
-        <td class="py-2">{{ key }}</td>
-        <td class="text-secondary-500 font-light">{{ c.size }}</td>
-        <td class="text-secondary-500 font-light">{{ c.line }}</td>
-        <td :class="key" class="max-w-lg truncate">Preview text</td>
-      </tr>
+      <tbody>
+        <tr>
+          <th class="py-2">Class</th>
+          <th>Size</th>
+          <th>Line Height</th>
+          <th>Preview</th>
+        </tr>
+        <tr v-for="(c, key) in textClasses" :key="key" class="border-t">
+          <td class="py-2">{{ key }}</td>
+          <td class="text-secondary-500 font-light">{{ c.size }}</td>
+          <td class="text-secondary-500 font-light">{{ c.line }}</td>
+          <td :class="key" class="max-w-lg truncate">Preview text</td>
+        </tr>
+      </tbody>
     </table>
   </div>
 

packages/ui/package.json

@@ -62,7 +62,7 @@
   },
   "peerDependencies": {
     "tailwindcss": "^3.0.0",
-    "vue": "^3.0.0"
+    "vue": "^3.4.0"
   },
   "devDependencies": {
     "@indielayer/stylelint-config": "^1.0.0",
@@ -91,7 +91,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"
   },
@@ -112,4 +112,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

packages/ui/src/components/table/Table.vue

@@ -65,7 +65,7 @@ export default { name: 'XTable' }
 </script>
 
 <script setup lang="ts" generic="T">
-import { ref, type ExtractPublicPropTypes, type PropType, watch, computed } from 'vue'
+import { ref, type ExtractPublicPropTypes, type PropType, watch, computed, type MaybeRef } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useVirtualList } from '../../composables/useVirtualList'
 
@@ -90,6 +90,10 @@ const props = defineProps({
   },
 })
 
+const selectedIndex = defineModel<number | number[]>('selected')
+
+const hasSelectedIndex = computed(() => typeof selectedIndex.value === 'number')
+
 type internalT = T & {
   __expanded?: boolean;
 }
@@ -118,7 +122,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'])
@@ -257,7 +261,8 @@ const { styles, classes, className } = useTheme('Table', {}, props)
             <x-table-row
               :pointer="pointer"
               :striped="striped"
-              @click="$emit('click-row', item.data)"
+              :selected="hasSelectedIndex ? selectedIndex === 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 +288,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',

packages/ui/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',

packages/ui/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 {