From 22e788168c7ec3627fd49fb7cfd45b1749e3ffc8 Mon Sep 17 00:00:00 2001
From: Dirk Holtwick <dirk.holtwick@gmail.com>
Date: Wed, 24 Apr 2024 15:51:28 +0200
Subject: [PATCH 1/4] feat: tableview with fill-last

---
 lib/basic/oui-tableview.story.vue |  3 +++
 lib/basic/oui-tableview.vue       | 19 ++++++++++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/lib/basic/oui-tableview.story.vue b/lib/basic/oui-tableview.story.vue
index b59ed7e..468675f 100644
--- a/lib/basic/oui-tableview.story.vue
+++ b/lib/basic/oui-tableview.story.vue
@@ -10,6 +10,7 @@ const state = reactive({
   footer: true,
   selectable: true,
   selected: undefined,
+  fillLast: true,
 })
 
 const columns: OuiTableColumn[] = [
@@ -49,6 +50,7 @@ const x = ref(0)
       <HstNumber v-model="state.selected" title="Selected" />
       <HstCheckbox v-model="state.footer" title="Show footer" />
       <HstCheckbox v-model="state.selectable" title="Selectable" />
+      <HstCheckbox v-model="state.fillLast" title="Fill last col" />
     </template>
     <Variant title="Default">
       <template #default>
@@ -62,6 +64,7 @@ const x = ref(0)
             :footer="state.footer"
             :selectable="state.selectable"
             style="height: 400px;"
+            :fill-last="state.fillLast"
             @context="menu"
           >
             <template #col-one="{ value, col }">
diff --git a/lib/basic/oui-tableview.vue b/lib/basic/oui-tableview.vue
index 3b919a5..08e2a70 100644
--- a/lib/basic/oui-tableview.vue
+++ b/lib/basic/oui-tableview.vue
@@ -14,11 +14,13 @@ const props = withDefaults(defineProps<{
   header?: boolean | undefined
   footer?: boolean | undefined
   selectable?: boolean
+  fillLast?: boolean
 }>(), {
   rowHeight: 44,
   header: undefined,
   footer: false,
   selectable: true,
+  fillLast: true,
 })
 
 const emit = defineEmits<{
@@ -33,15 +35,22 @@ const sortAsc = computed(() => parseOrderby(modelSort.value).asc)
 
 const widths = reactive<number[]>([])
 
-watch(() => props.data, () => {
-  arraySetArrayInPlace(widths, props.columns.map(c => c.width ?? 120))
+watch(() => [props.data, props.fillLast], () => {
+  let values = props.columns.map(c => c.width ?? 120)
+  if (props.fillLast)
+    values = values.slice(0, -1)
+  arraySetArrayInPlace(widths, values)
 }, { immediate: true })
 
 // const cols = computed<OuiTableColumn<K>[]>(() => props.columns ?? (Object.keys(props.data?.[0] ?? {}) as any)?.map((name: string) => ({ name })))
 const showHeader = computed(() => props.header ?? props.columns != null)
-const tableStyle = computed(() => `--tableview-columns: ${
-  widths.map(w => `${w ?? 120}px`).join(' ')
-}`)
+
+const tableStyle = computed(() => {
+  const values = widths.map(w => `${w ?? 120}px`)
+  if (props.fillLast)
+    values.push('auto')
+  return `--tableview-columns: ${values.join(' ')}`
+})
 
 function doToggleSort(name: string) {
   if (sortName.value === name) {

From 24c9c18bff3097cf053250ef204ebf7bc3329942 Mon Sep 17 00:00:00 2001
From: Dirk Holtwick <dirk.holtwick@gmail.com>
Date: Wed, 24 Apr 2024 18:00:24 +0200
Subject: [PATCH 2/4] feat: oui-select

---
 lib/basic/index.ts       |  1 +
 lib/basic/oui-select.vue | 31 +++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 lib/basic/oui-select.vue

diff --git a/lib/basic/index.ts b/lib/basic/index.ts
index 652b304..42da0d9 100644
--- a/lib/basic/index.ts
+++ b/lib/basic/index.ts
@@ -15,4 +15,5 @@ export { default as OuiTable } from './oui-table.vue'
 export { default as OuiTableview } from './oui-tableview.vue'
 export { default as OuiDraggable } from './oui-draggable.vue'
 export { default as OuiText } from './oui-text.vue'
+export { default as OuiSelect } from './oui-select.vue'
 export { default as OuiVirtualList } from './oui-virtual-list.vue'
diff --git a/lib/basic/oui-select.vue b/lib/basic/oui-select.vue
new file mode 100644
index 0000000..3972fe7
--- /dev/null
+++ b/lib/basic/oui-select.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { isArray, isPrimitive } from 'zeed'
+import './oui-form.styl'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  options?: [string | number, string | number][] | (string | number)[]
+}>(), {
+
+})
+
+const model = defineModel({ required: true })
+
+const allOptions = computed(() => (props.options ?? []).map(v => isPrimitive(v) ? [v, v] : v,
+))
+</script>
+
+<template>
+  <select v-model="model">
+    <slot>
+      <template
+        v-for="[key, value] in allOptions"
+        :key="key"
+      >
+        <option :value="key">
+          {{ value }}
+        </option>
+      </template>
+    </slot>
+  </select>
+</template>

From 48b80f75cb8cb3cebd3c461ea13053d18650f152 Mon Sep 17 00:00:00 2001
From: Dirk Holtwick <dirk.holtwick@gmail.com>
Date: Wed, 24 Apr 2024 18:00:34 +0200
Subject: [PATCH 3/4] fix: oui-table sort

---
 lib/basic/oui-tableview.story.vue |  2 +-
 lib/basic/oui-tableview.vue       | 15 ++---
 src/App.vue                       |  2 +-
 src/app-form.vue                  |  9 +++
 src/app-tableview.vue             | 96 +++++++++++++++++++++++++++++++
 src/index.styl                    | 27 +++++++++
 stylus/default-story.styl         |  6 ++
 7 files changed, 146 insertions(+), 11 deletions(-)
 create mode 100644 src/app-tableview.vue

diff --git a/lib/basic/oui-tableview.story.vue b/lib/basic/oui-tableview.story.vue
index 468675f..9bca7c8 100644
--- a/lib/basic/oui-tableview.story.vue
+++ b/lib/basic/oui-tableview.story.vue
@@ -63,8 +63,8 @@ const x = ref(0)
             :data="data"
             :footer="state.footer"
             :selectable="state.selectable"
-            style="height: 400px;"
             :fill-last="state.fillLast"
+            style="height: 400px;"
             @context="menu"
           >
             <template #col-one="{ value, col }">
diff --git a/lib/basic/oui-tableview.vue b/lib/basic/oui-tableview.vue
index 08e2a70..b2289fc 100644
--- a/lib/basic/oui-tableview.vue
+++ b/lib/basic/oui-tableview.vue
@@ -11,13 +11,13 @@ const props = withDefaults(defineProps<{
   data: T[]
   columns: OuiTableColumn<K>[]
   rowHeight?: number
-  header?: boolean | undefined
-  footer?: boolean | undefined
+  header?: boolean
+  footer?: boolean
   selectable?: boolean
   fillLast?: boolean
 }>(), {
   rowHeight: 44,
-  header: undefined,
+  header: true,
   footer: false,
   selectable: true,
   fillLast: true,
@@ -42,9 +42,6 @@ watch(() => [props.data, props.fillLast], () => {
   arraySetArrayInPlace(widths, values)
 }, { immediate: true })
 
-// const cols = computed<OuiTableColumn<K>[]>(() => props.columns ?? (Object.keys(props.data?.[0] ?? {}) as any)?.map((name: string) => ({ name })))
-const showHeader = computed(() => props.header ?? props.columns != null)
-
 const tableStyle = computed(() => {
   const values = widths.map(w => `${w ?? 120}px`)
   if (props.fillLast)
@@ -70,7 +67,7 @@ function doSelect(pos: number) {
 
 <template>
   <div v-if="columns != null && data != null" class="oui-tableview" :style="tableStyle">
-    <div v-if="showHeader" class="_tableview_header">
+    <div v-if="header" class="_tableview_header">
       <div class="_tableview_row">
         <template v-for="col, pos in columns" :key="col.name">
           <div
@@ -81,7 +78,7 @@ function doSelect(pos: number) {
               _desc: sortName === col.name && !sortAsc,
               _active: sortName === col.name,
             }"
-            @xclick="doToggleSort(col.name)"
+            @click="doToggleSort(col.name)"
           >
             <slot :name="`header-${col.name}`" v-bind="{ col, pos }">
               {{ col.title ?? col.name }}
@@ -124,7 +121,7 @@ function doSelect(pos: number) {
         </div>
       </template>
     </OuiVirtualList>
-    <div v-if="footer === true" class="_tableview_footer">
+    <div v-if="footer" class="_tableview_footer">
       <div class="_tableview_row">
         <template v-for="col, pos in columns" :key="col.name">
           <div class="_tableview_cell" :align="col.align ?? 'left'" :valign="col.valign ?? 'top'">
diff --git a/src/App.vue b/src/App.vue
index 9176912..9ab077b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,7 @@ const comp = computed(() => modes[mode.value])
   </div>
 
   <div v-if="comp" class="_stack_x" style="gap: 16px; width: 100%;">
-    <div class="_grow">
+    <div class="_grow default">
       <component :is="comp" />
     </div>
     <div v-if="dark" class="_grow dark default">
diff --git a/src/app-form.vue b/src/app-form.vue
index 71ac14b..5cfc642 100644
--- a/src/app-form.vue
+++ b/src/app-form.vue
@@ -14,6 +14,15 @@ import { OuiClose } from '@/lib'
       <input type="text">
       <button>Hello</button>
     </div>
+
+    <div class="_form_section _stack_x">
+      <div class="oui-input-group">
+        <input type="text">
+        <button>Hello</button>
+        <button>Hello</button>
+      </div>
+    </div>
+
     <div class="_form_section">
       <input type="number" min="0" max="120">
     </div>
diff --git a/src/app-tableview.vue b/src/app-tableview.vue
new file mode 100644
index 0000000..b2db61c
--- /dev/null
+++ b/src/app-tableview.vue
@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import { computed, reactive, ref } from 'vue'
+import { createArray, sortedOrderby, uuid } from 'zeed'
+import type { OuiTableColumn } from '@/lib'
+import { OuiCheckbox, OuiObject, OuiSelect, OuiTableview, useMenu } from '@/lib'
+
+const state = reactive({
+  sort: '',
+  footer: true,
+  header: true,
+  selectable: true,
+  selected: undefined,
+  fillLast: true,
+})
+
+const columns: OuiTableColumn[] = [
+  { title: '#', name: 'id', sortable: false },
+  { title: 'One', name: 'one', sortable: true, width: 200 },
+  { title: 'Two', name: 'two', sortable: true, footer: 'Two feet' },
+  { title: '', name: 'action', align: 'right' },
+]
+
+const _data = createArray(1000, (index) => {
+  return { id: index, one: uuid(), two: uuid() }
+})
+
+const data = computed(() => sortedOrderby(_data, state.sort))
+
+const menu = useMenu((row: any) => [
+  {
+    title: row.one ?? '-',
+    // eslint-disable-next-line no-alert
+    action: () => alert('Hello World'),
+  },
+  {},
+  {
+    title: row.two ?? '-',
+    // eslint-disable-next-line no-alert
+    action: () => alert('Hello World'),
+  },
+])
+
+const x = ref(0)
+</script>
+
+<template>
+  <h2>Complex example</h2>
+  <p>
+    <OuiCheckbox v-model="state.fillLast" switch>
+      fillLast
+    </OuiCheckbox>
+    <OuiCheckbox v-model="state.selectable" switch>
+      selectable
+    </OuiCheckbox>
+    <OuiCheckbox v-model="state.footer" switch>
+      footer
+    </OuiCheckbox>
+    <OuiCheckbox v-model="state.header" switch>
+      header
+    </OuiCheckbox>
+    <OuiSelect
+      :options="['small', 'large']"
+    />
+  </p>
+  <div>
+    <OuiTableview
+      v-model="state.selected"
+      v-model:sort="state.sort"
+      :columns="columns"
+      :data="data"
+      :footer="state.footer"
+      :header="state.header"
+      :selectable="state.selectable"
+      :fill-last="state.fillLast"
+      style="height: 400px;"
+      @context="menu"
+    >
+      <template #col-one="{ value, col }">
+        {{ col.name }} {{ value }}
+      </template>
+      <template #col-action="{ item, col }">
+        <button class="oui-button" size="small" @click="console.log(item.id, col)">
+          Action
+        </button>
+      </template>
+      <template #footer-one>
+        One foot
+      </template>
+      <template #header-one>
+        ONE
+      </template>
+    </OuiTableview>
+
+    <OuiObject :value="state" />
+  </div>
+</template>
diff --git a/src/index.styl b/src/index.styl
index 2bc9b8e..cf9beda 100644
--- a/src/index.styl
+++ b/src/index.styl
@@ -5,3 +5,30 @@
   margin-bottom: 16;
   padding-bottom: 16;
 }
+
+.default {
+  color: var(--fg);
+  background-color: var(--bg);
+  padding: 8;
+}
+
+.oui-form {
+  oui-form-defaults();
+}
+
+.oui-input-group {
+  use: stack-x;
+
+  button, input {
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/stylus/default-story.styl b/stylus/default-story.styl
index a554838..5149dc1 100644
--- a/stylus/default-story.styl
+++ b/stylus/default-story.styl
@@ -7,4 +7,10 @@ body {
 
 .story {
   padding: 8;
+}
+
+.default {
+  color: var(--fg);
+  background-color: var(--bg);
+  padding: 8;
 }
\ No newline at end of file

From 35c60177d6a5986bc4d3a6cf6169ad5ed929b4d6 Mon Sep 17 00:00:00 2001
From: Dirk Holtwick <dirk.holtwick@gmail.com>
Date: Wed, 24 Apr 2024 18:02:09 +0200
Subject: [PATCH 4/4] 0.15.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index eec172a..0621c2a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "oui-kit",
   "type": "module",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "author": {
     "email": "dirk.holtwick@gmail.com",
     "name": "Dirk Holtwick",