Merge branch 'release/v0.15.3'

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'

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>

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>
@@ -61,6 +63,7 @@ const x = ref(0)
             :data="data"
             :footer="state.footer"
             :selectable="state.selectable"
+            :fill-last="state.fillLast"
             style="height: 400px;"
             @context="menu"
           >

lib/basic/oui-tableview.vue

@@ -11,14 +11,16 @@ 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,
 })
 
 const emit = defineEmits<{
@@ -33,15 +35,19 @@ 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) {
@@ -61,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
@@ -72,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 }}
@@ -115,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'">

package.json

@@ -1,7 +1,7 @@
 {
   "name": "oui-kit",
   "type": "module",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "author": {
     "email": "[email protected]",
     "name": "Dirk Holtwick",

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">

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>

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>

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;
+    }
+  }
+}

stylus/default-story.styl

@@ -7,4 +7,10 @@ body {
 
 .story {
   padding: 8;
+}
+
+.default {
+  color: var(--fg);
+  background-color: var(--bg);
+  padding: 8;
 }