Merge branch 'release/v0.12.0'

lib/basic/_types.ts

@@ -0,0 +1,14 @@
+export interface OuiTab<K = string> {
+  name: K
+  title?: string
+  icon?: string
+}
+
+export interface OuiTableColumn<K = string> {
+  name: K
+  title?: string
+  sortable?: boolean
+  align?: 'left' | 'center' | 'right'
+  valign?: 'top' | 'middle' | 'bottom'
+  footer?: string
+}

lib/basic/index.ts

@@ -1,3 +1,5 @@
 export * from './directives'
+export * from './_types'
 
 export { default as OuiClose } from './oui-close.vue'
+export { default as OuiTable } from './oui-table.vue'

lib/basic/oui-table.story.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { OuiTableColumn } from '../lib'
+import { OuiTable } from '../lib'
+
+function initStateDefault() {
+  return {
+    sort: '',
+    footer: true,
+  }
+}
+
+const columns: OuiTableColumn[] = [
+  { title: '#', name: 'id', sortable: false },
+  { title: 'One', name: 'one', sortable: true },
+  { title: 'Two', name: 'two', sortable: true, footer: 'Two feet' },
+  { title: '', name: 'action', align: 'right' },
+]
+
+const data = [
+  { id: 1, one: 1, two: 2 },
+  { id: 2, one: 11, two: 22 },
+  { id: 3, one: 111 }, // missing one
+]
+</script>
+
+<template>
+  <Story auto-props-disabled>
+    <template #controls="{ state }">
+      <HstText v-model="state.sort" title="Sort" />
+      <HstCheckbox v-model="state.footer" title="Show footer" />
+    </template>
+    <Variant title="Default" :init-state="initStateDefault">
+      <template #default="{ state }">
+        <div class="v-story v-story-medium">
+          <OuiTable v-model:sort="state.sort" :columns="columns" :data="data" :footer="state.footer">
+            <template #col-one="{ value, col }">
+              {{ col.name }} {{ value }}
+            </template>
+            <template #col-action="{ value, col }">
+              <VButton size="small" @click="console.log(value, col)">
+                Action
+              </VButton>
+            </template>
+            <template #footer-one>
+              One foot
+            </template>
+            <template #header-one>
+              ONE
+            </template>
+          </OuiTable>
+        </div>
+      </template>
+    </Variant>
+  </Story>
+</template>

lib/basic/oui-table.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup generic="K extends string, T extends Record<K, any>">
+import { computed } from 'vue'
+import { parseOrderby } from 'zeed'
+import type { OuiTableColumn } from './_types'
+
+defineProps<{
+  columns: OuiTableColumn<K>[]
+  data: T[]
+  footer?: boolean
+}>()
+
+const modelSort = defineModel<string>('sort')
+
+const sortName = computed(() => parseOrderby(modelSort.value).field)
+const sortAsc = computed(() => parseOrderby(modelSort.value).asc)
+
+function doToggleSort(name: string) {
+  if (sortName.value === name) {
+    modelSort.value = `${name} ${!sortAsc.value ? 'asc' : 'desc'}`
+    return
+  }
+  modelSort.value = `${name} asc`
+}
+</script>
+
+<template>
+  <table class="oui-table">
+    <thead>
+      <tr>
+        <template v-for="col, pos in columns" :key="col.name">
+          <th :class="{ _sortable: col.sortable === true, _asc: sortAsc, _desc: !sortAsc, _active: sortName === col.name }" @click="doToggleSort(col.name)">
+            <slot :name="`header-${col.name}`" v-bind="{ col, pos }">
+              {{ col.title ?? col.name }}
+              <template v-if="col.sortable === true && sortName === col.name" />
+            </slot>
+          </th>
+        </template>
+      </tr>
+    </thead>
+    <tbody>
+      <template v-for="row in data" :key="row">
+        <tr>
+          <template v-for="col, pos in columns" :key="col.name">
+            <td :align="col.align ?? 'left'" :valign="col.valign ?? 'top'">
+              <slot :name="`col-${col.name}`" v-bind="{ value: row[col.name], col, pos }">
+                {{ row[col.name] }}
+              </slot>
+            </td>
+          </template>
+        </tr>
+      </template>
+    </tbody>
+    <tfoot v-if="footer">
+      <tr>
+        <template v-for="col, pos in columns" :key="col.name">
+          <td :align="col.align ?? 'left'" :valign="col.valign ?? 'top'">
+            <slot :name="`footer-${col.name}`" v-bind="{ col, pos }">
+              {{ col.footer ?? '' }}
+            </slot>
+          </td>
+        </template>
+      </tr>
+    </tfoot>
+  </table>
+</template>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "oui-kit",
   "type": "module",
-  "version": "0.11.5",
+  "version": "0.12.0",
   "author": {
     "name": "Dirk Holtwick",
     "email": "[email protected]",
@@ -83,7 +83,7 @@
     "zeed": "^0.18.6"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.11.4",
+    "@antfu/eslint-config": "^2.11.5",
     "@antfu/ni": "^0.21.12",
     "@histoire/plugin-vue": "^0.17.14",
     "@tsconfig/node18": "^18.2.4",