Merge branch 'release/v0.21.5'

.gitignore

@@ -98,3 +98,4 @@ zerva-bin/bin.cjs
 *.tsbuildinfo
 
 _archive
+bun.lockb

lib/basic/oui-form-item.demo.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { reactive } from 'vue'
 import { getTimestamp } from 'zeed'
-import { OuiDatetime, OuiFormItem, OuiInput, OuiInputNumber, OuiPassword, OuiSelect, OuiTextarea } from '@/lib'
+import { OuiDatetime, OuiDemo, OuiFormItem, OuiInput, OuiInputNumber, OuiPassword, OuiSelect, OuiTextarea } from '@/lib'
 
 const state = reactive({
   value1: '',
@@ -27,4 +27,5 @@ const state = reactive({
     <OuiSelect v-model="state.select" title="Select" :options="['One', 'Two', 'Three']" />
     <OuiDatetime v-model="state.datetime" title="Date and Time" />
   </div>
+  <OuiDemo :state="state" />
 </template>

lib/basic/oui-form.styl

@@ -2,4 +2,27 @@
 
 .oui {
   oui-form();
+
+  &-input-container {
+    use: stack-x;
+    padding-x: 0;
+
+    input {
+      use: stack-item-grow;
+      width: auto;
+      padding-x: 8;
+    }
+
+    button {
+      cursor: pointer;
+      padding-x: 8;
+    }
+
+    svg {
+      display: flex;
+      flex-shrink: 0;
+      flex-grow: 0;
+      size: 1em;
+    }
+  }
 }

lib/basic/oui-input.demo.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import { OuiCheckbox, OuiDemo, OuiInput, OuiSelect } from '../lib'
+
+const state = reactive({
+  value: 'Hello World',
+  lazy: true,
+  required: false,
+  title: 'Title',
+  type: 'text',
+})
+
+const options = [
+  // 'button',
+  // 'checkbox',
+  // 'color',
+  'date',
+  'datetime-local',
+  'email',
+  // 'file',
+  // 'hidden',
+  // 'image',
+  'month',
+  'number',
+  'password',
+  // 'radio',
+  // 'range',
+  // 'reset',
+  'search',
+  // 'submit',
+  'tel',
+  'text',
+  'time',
+  'url',
+  'week']
+</script>
+
+<template>
+  <div>
+    <OuiInput
+      v-model="state.value"
+      :lazy="state.lazy"
+      :required="state.required"
+      :title="state.title"
+      :type="state.type"
+    />
+  </div>
+
+  <div>
+    <OuiInput
+      v-model="state.value"
+      :lazy="state.lazy"
+      :required="state.required"
+      :title="state.title"
+      :type="state.type"
+    >
+      <template #start>
+        START
+      </template>
+      <template #end>
+        END
+      </template>
+    </OuiInput>
+  </div>
+
+  <OuiDemo :state="state">
+    <OuiInput v-model="state.value" title="value" />
+    <OuiInput v-model="state.title" title="title" />
+    <OuiCheckbox v-model="state.lazy" switch title="lazy" />
+    <OuiCheckbox v-model="state.required" switch title="required" />
+    <OuiSelect v-model="state.type" title="type" :options="options" />
+  </OuiDemo>
+</template>

lib/basic/oui-input.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { type InputTypeHTMLAttribute, ref, watch } from 'vue'
 import OuiFormItem from './oui-form-item.vue'
 
 import './oui-form.styl'
@@ -7,17 +8,35 @@ defineOptions({
   inheritAttrs: false,
 })
 
-withDefaults(defineProps<{
+// type InputTypeHTMLAttribute = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | (string & {});
+
+const props = withDefaults(defineProps<{
   title?: string
   description?: string
   required?: boolean
-  type?: 'text' | 'url' | 'email' | 'tel' | 'search'
+  type?: InputTypeHTMLAttribute // 'text' | 'url' | 'email' | 'tel' | 'search'
   id?: string
+  lazy?: boolean
 }>(), {
   type: 'text',
 })
 
-const model = defineModel({ required: true })
+const model = defineModel<string | undefined>({ required: true })
+
+const value = ref('')
+
+watch(value, (v) => {
+  if (!props.lazy)
+    model.value = v
+})
+
+watch(() => model.value, v => value.value = v ?? '', { immediate: true })
+
+function lazyUpdate() {
+  if (props.lazy) {
+    model.value = value.value
+  }
+}
 </script>
 
 <template>
@@ -27,12 +46,30 @@ const model = defineModel({ required: true })
     :description="description"
     :required="required"
   >
-    <input
-      :id="id"
-      v-model="model"
-      :type="type"
-      class="oui-input oui-input-string"
-      v-bind="$attrs"
-    >
+    <template v-if="$slots.start || $slots.end">
+      <div class="oui-input oui-input-container">
+        <slot name="start" />
+        <input
+          :id="id"
+          v-model="value"
+          :type="type"
+          v-bind="$attrs"
+          @blur="lazyUpdate"
+          @keypress.enter="lazyUpdate"
+        >
+        <slot name="end" />
+      </div>
+    </template>
+    <template v-else>
+      <input
+        :id="id"
+        v-model="value"
+        :type="type"
+        class="oui-input oui-input-string"
+        v-bind="$attrs"
+        @blur="lazyUpdate"
+        @keypress.enter="lazyUpdate"
+      >
+    </template>
   </OuiFormItem>
 </template>

lib/basic/oui-password.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
 import OuiFormItem from './oui-form-item.vue'
+import OuiInput from './oui-input.vue'
 import OuiInputPasswordMeter from './oui-password-meter.vue'
 
 import './oui-password.styl'
@@ -8,16 +10,22 @@ defineOptions({
   inheritAttrs: false,
 })
 
-defineProps<{
+withDefaults(defineProps<{
   showMeter?: boolean
+  showVisibility?: boolean
   placeholder?: string
   title?: string
   description?: string
   required?: boolean
   id?: string
-}>()
+}>(), {
+  showVisibility: true,
+  showMeter: true,
+})
 
 const model = defineModel<string | undefined>({ required: true })
+
+const show = ref(false)
 </script>
 
 <template>
@@ -28,13 +36,25 @@ const model = defineModel<string | undefined>({ required: true })
     :required="required"
   >
     <div class="oui-password">
-      <input
+      <OuiInput
         v-model="model"
-        type="password"
-        class="oui-input"
+        :type="show ? 'text' : 'password'"
         :placeholder="placeholder"
         v-bind="$attrs"
       >
+        <template #end>
+          <template v-if="showVisibility !== false">
+            <button @click="show = !show">
+              <template v-if="show">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" /><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" /><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" /><line x1="2" x2="22" y1="2" y2="22" /></svg>
+              </template>
+              <template v-if="!show">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" /><circle cx="12" cy="12" r="3" /></svg>
+              </template>
+            </button>
+          </template>
+        </template>
+      </OuiInput>
       <template v-if="showMeter !== false">
         <OuiInputPasswordMeter :value="model" />
       </template>

lib/basic/oui-tableview.styl

@@ -85,7 +85,7 @@
         }
 
         &._active {
-          background: var(--s2-bg);
+          background: var(--p1-bg);
         }
       }
     }

lib/basic/oui-tableview.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup generic="K extends string, T extends Record<K, any>">
-import { computed, reactive, ref, watch } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 import { arraySetArrayInPlace, arraySum, parseOrderby } from 'zeed'
 import type { OuiTableColumn } from './_types'
+import { px } from './lib'
 import OuiSeparator from './oui-separator.vue'
 import OuiVirtualList from './oui-virtual-list.vue'
-import { px } from './lib'
 
 import './oui-tableview.styl'
 
@@ -40,17 +41,18 @@ const modelSelected = defineModel<number | undefined>()
 const sortName = computed(() => parseOrderby(modelSort.value).field)
 const sortAsc = computed(() => parseOrderby(modelSort.value).asc)
 
-const widths = reactive<number[]>([])
+const widthsPlain = props.columns.map(c => c.width ?? 120)
+const widths = props.name ? useLocalStorage<number[]>(`oui.tableview.${props.name}.widths`, widthsPlain) : ref(widthsPlain)
 
 watch(() => [props.data, props.fillLast], () => {
-  let values = props.columns.map(c => c.width ?? 120)
+  let values = props.columns.map((c, i) => widths.value[i] ?? c.width ?? 120)
   if (props.fillLast)
     values = values.slice(0, -1)
-  arraySetArrayInPlace(widths, values)
+  arraySetArrayInPlace(widths.value, values)
 }, { immediate: true })
 
 const tableStyle = computed(() => {
-  const values = widths.map(w => px(w ?? 120))
+  const values = widths.value.map(w => px(w ?? 120))
   if (props.fillLast)
     values.push('auto')
   return `--tableview-columns: ${values.join(' ')}`
@@ -168,7 +170,6 @@ function scrollX(x: number) {
         :min-size="columns[i].minWidth ?? 80"
         :max-size="columns[i].maxWidth ?? 300"
         :style="{ left: px(arraySum(widths.slice(0, i + 1)) - 1 - marginLeft) }"
-        :name="`oui.tableview.${name}.col.size.${i}`"
       />
     </template>
   </div>

lib/basic/singleton.ts

@@ -4,6 +4,7 @@ import { Logger } from 'zeed'
 
 const log: LoggerInterface = Logger('singleton')
 
+/** In an app only have one Vue Component of it at all, like OuiXXXActivator */
 export function useSingleton(name: string) {
   const g = globalThis as any
   g.__ouiSingletons = g.__ouiSingletons ?? {}
@@ -15,3 +16,15 @@ export function useSingleton(name: string) {
   onBeforeUnmount(() => g.__ouiSingletons[name] = false)
   return true
 }
+
+/** In an app can only have one object of this type */
+export function createSingleton<T>(name: string, create: () => T): T { // dispose?: UseDispose
+  const g = globalThis as any
+  g.__ouiSingletonObjects = g.__ouiSingletonObjects ?? {}
+  let value = g.__ouiSingletonObjects[name] as T | undefined
+  if (value == null) {
+    value = create()
+    g.__ouiSingletonObjects[name] = create()
+  }
+  return value
+}

lib/modal/oui-modal.demo.vue

@@ -40,10 +40,10 @@ const state = reactive({
       </OuiText>
     </template>
     <template v-if="state.footer" #footer>
-      <OuiButton mode="secondary">
+      <OuiButton mode="secondary" @click="state.show = false">
         Cancel
       </OuiButton>
-      <OuiButton mode="primary">
+      <OuiButton mode="primary" @click="state.show = false">
         OK
       </OuiButton>
     </template>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "oui-kit",
   "type": "module",
-  "version": "0.21.4",
+  "version": "0.21.5",
   "author": {
     "email": "dirk.holtwick@gmail.com",
     "name": "Dirk Holtwick",