Merge branch 'release/v0.12.4'

histoire.config.ts

@@ -19,4 +19,10 @@ export default defineConfig({
   tree: {
     file: 'path',
   },
+  defaultStoryProps: {
+    layout: {
+      type: 'single',
+      iframe: false,
+    },
+  },
 })

lib/basic/index.ts

@@ -2,5 +2,9 @@ export * from './_types'
 export * from './directives'
 export * from './formatters'
 
+export { default as OuiCheckbox } from './oui-checkbox.vue'
 export { default as OuiClose } from './oui-close.vue'
+export { default as OuiDatetime } from './oui-datetime.vue'
+export { default as OuiFile } from './oui-file.vue'
+export { default as OuiSwitch } from './oui-switch.vue'
 export { default as OuiTable } from './oui-table.vue'

lib/basic/oui-checkbox.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const model = defineModel({ required: true })
+
+// Fixes Vue issue not supporting non-boolean values
+// https://github.com/vuejs/core/issues/5775
+const modelBool = computed({
+  get() {
+    return !!model.value
+  },
+  set(value: any) {
+    model.value = value
+  },
+})
+</script>
+
+<template>
+  <input v-model="modelBool" type="checkbox">
+</template>

lib/basic/oui-datetime.story.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import { getTimestamp } from 'zeed'
+import { OuiDatetime } from '../lib'
+
+const state = reactive({
+  value: getTimestamp(),
+})
+</script>
+
+<template>
+  <Story auto-props-disabled>
+    <template #controls>
+      <HstText v-model="state.value" title="Data URI" />
+    </template>
+    <Variant title="Default">
+      <template #default>
+        <div>
+          <OuiDatetime
+            v-model="state.value"
+          />
+        </div>
+      </template>
+    </Variant>
+  </Story>
+</template>

lib/basic/oui-datetime.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { getTimestamp } from 'zeed'
+
+const model = defineModel<number>({
+  required: true,
+  default: getTimestamp(),
+})
+
+const date = computed({
+  get() {
+    const mdate = new Date(model.value)
+    const date = new Date()
+    date.setUTCFullYear(mdate.getFullYear())
+    date.setUTCMonth(mdate.getMonth())
+    date.setUTCDate(mdate.getDate())
+    date.setUTCHours(mdate.getHours())
+    date.setUTCMinutes(mdate.getMinutes())
+    date.setUTCSeconds(mdate.getSeconds())
+    date.setUTCMilliseconds(mdate.getMilliseconds())
+    return date.toISOString().slice(0, 16)
+  },
+  set(value) {
+    const [y, m, d, hh, mm] = value.replace(/[^\d]/gim, ' ').split(' ')
+    const date = new Date()
+    date.setFullYear(+y)
+    date.setMonth(+m - 1)
+    date.setDate(+d)
+    date.setHours(+hh)
+    date.setMinutes(+mm)
+    date.setSeconds(0)
+    date.setMilliseconds(0)
+    model.value = date.getTime()
+  },
+})
+</script>
+
+<template>
+  <input v-model="date" type="datetime-local">
+</template>

lib/basic/oui-file.story.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import { OuiFile } from '../lib'
+
+const state = reactive({
+  value: '',
+})
+</script>
+
+<template>
+  <Story auto-props-disabled>
+    <template #controls>
+      <HstText v-model="state.value" title="Data URI" />
+    </template>
+    <Variant title="Default">
+      <template #default>
+        <div>
+          <OuiFile
+            v-model="state.value"
+          />
+        </div>
+      </template>
+    </Variant>
+  </Story>
+</template>

lib/basic/oui-file.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { useFileDialog } from '@vueuse/core'
+import type { LoggerInterface } from 'zeed'
+import { Logger, createPromise } from 'zeed'
+
+const log: LoggerInterface = Logger('oui-file')
+
+const { files, open, reset, onChange } = useFileDialog({
+  accept: 'image/*',
+  multiple: false,
+})
+
+const model = defineModel<string | undefined | null>({ required: true })
+
+async function fileToDataURI(file: File): Promise<string | undefined> {
+  const [promise, resolve] = createPromise<string | undefined> ()
+  const fileReader = new FileReader()
+  fileReader.addEventListener('error', resolve)
+  fileReader.addEventListener('abort', resolve)
+  fileReader.addEventListener('loadend', e => resolve(fileReader.result))
+  fileReader.readAsDataURL(file)
+  return promise
+}
+
+onChange(async () => {
+  const file = files.value?.[0]
+  if (file) {
+    const url = await fileToDataURI(file)
+    log('url', url)
+    model.value = url
+    reset()
+  }
+})
+</script>
+
+<template>
+  <div>
+    <img v-if="model" :src="model">
+    <button @click.prevent="() => open()">
+      Choose file...
+    </button>
+  </div>
+</template>

lib/basic/oui-switch.story.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import { OuiSwitch } from '../lib'
+
+const state = reactive({
+  value: false,
+})
+</script>
+
+<template>
+  <Story auto-props-disabled>
+    <template #controls>
+      <HstCheckbox v-model="state.value" title="Show footer" />
+    </template>
+    <Variant title="Default">
+      <template #default>
+        <div>
+          <label>
+            <OuiSwitch
+              v-model="state.value"
+            />
+            Just a switch
+          </label>
+        </div>
+      </template>
+    </Variant>
+  </Story>
+</template>

lib/basic/oui-switch.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const model = defineModel({ required: true })
+
+// Fixes Vue issue not supporting non-boolean values
+// https://github.com/vuejs/core/issues/5775
+const modelBool = computed({
+  get() {
+    return !!model.value
+  },
+  set(value: any) {
+    model.value = value
+  },
+})
+</script>
+
+<template>
+  <input v-model="modelBool" type="checkbox" class="oui-switch">
+</template>

lib/float/oui-menu.story.vue

@@ -29,19 +29,15 @@ const menu = useMenuWithValue((item: number) => [{
 
 <template>
   <Story auto-props-disabled>
-    <template #controls="{ state }">
-      <HstCheckbox v-model="state.show" title="show" />
-    </template>
-    <Variant title="useMenu" :init-state="initialState">
+    <Variant :init-state="initialState">
       <template #default>
+        <h1>v-menu</h1>
         <button ref="button" v-menu="simpleMenu">
           Click me
         </button>
         <p>You may click with right or left mouse key.</p>
-      </template>
-    </Variant>
-    <Variant title="useMenuWithValue" :init-state="initialState">
-      <template #default>
+
+        <h1>useMenuWithValue</h1>
         <button ref="button" v-menu="menu(1)">
           Click 1
         </button>

lib/float/oui-tooltip-activator.story.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { OuiTooltipActivator } from './index'
+
+function initialState() {
+  return { }
+}
+</script>
+
+<template>
+  <Story auto-props-disabled>
+    <template #controls="{ state }">
+      <HstCheckbox v-model="state.show" title="show" />
+    </template>
+    <Variant title="Simple popover" :init-state="initialState">
+      <template #default>
+        <p>
+          Just another set of UI components for <i
+            tooltip="A longer tooltip
+in multiple lines
+Yeah!"
+          >Vue.js</i> with a proper French-sounding name
+        </p>
+        <button tooltip="Hello, I am a tooltip">
+          Tooltip
+        </button>
+        <br>
+
+        <p>Also boxes work:</p>
+        <div tooltip="Box" style="background-color: yellow;">
+          Demo
+        </div>
+
+        <OuiTooltipActivator />
+      </template>
+    </Variant>
+  </story>
+</template>
+
+<style>
+[tooltip] {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+</style>
+
+<docs lang="md">
+# Tooltip
+
+Place the following somewhere, best in your `App.vue`, to activate tooltip support:
+
+```vue
+<OuiTooltipActivator />
+```
+
+Now simply add the `tooltip` attribute whereever you want:
+
+```html
+<button tooltip="Hello, I am a tooltip">
+```
+</docs>

lib/float/oui-tooltip-activator.vue

@@ -30,11 +30,11 @@ function onTooltipHover(ev: Event) {
     return
 
   clearTimeout(debounceTimer)
-  let el: HTMLElement | null = ev.target as any
+  let el: Element | null = ev.target as any
 
   // Check if we are still inside. If not, hide immediately
   let didLeave = true
-  while (el != null && el?.tagName !== 'BODY') {
+  while (el instanceof Element && el.tagName !== 'BODY') {
     const tooltip = el.getAttribute('tooltip')
     if (tooltip && tooltip?.length > 0) {
       if (el.isEqualNode(reference.value as any)) {
@@ -52,14 +52,9 @@ function onTooltipHover(ev: Event) {
 
   // Show tooltip on rest with some delay
   debounceTimer = setTimeout(() => {
-    while (el != null && el?.tagName !== 'BODY') {
-      // let title = el.title
-      // if (title) {
-      //   el.setAttribute("tooltip", title)
-      // }
+    while (el instanceof Element && el.tagName !== 'BODY') {
       const tooltip = el.getAttribute('tooltip')
       if (tooltip && tooltip?.length > 0) {
-        // el.title = ""
         reference.value = el
         text.value = tooltip?.toString()?.trim() || ''
         placement.value = el.getAttribute('tooltip-placement') || 'top' as any

lib/float/use-menu.ts

@@ -68,7 +68,8 @@ export function useMenu(itemsSource: OuiMenuItemSource) {
     event.preventDefault()
 
     // Second click closes, this is like macOS does it as well
-    if (reference?.isSameNode(lastReference) || (x === lastX && y === lastY)) {
+    if (app != null && reference?.isSameNode(lastReference) || (x === lastX && y === lastY)) {
+      log('close on second click')
       lastX = -1
       lastY = -1
       lastReference = undefined
@@ -109,7 +110,8 @@ export function useMenu(itemsSource: OuiMenuItemSource) {
         reference,
         args,
       })
-      // app.awaitDone.then(() => (app = undefined))
+
+      app.awaitDone.then(() => (app = undefined))
     }
     else {
       log.warn('useMenu target missing')

lib/modal/oui-dialog.story.vue

@@ -32,6 +32,9 @@ const { open } = useDialog(OuiDialogExample)
           <button @click="open">
             Custom
           </button>
+          <button @click="open">
+            Custom
+          </button>          
         </div>
       </template>
     </Variant>