Merge branch 'release/v0.23.6'

lib/basic/directives.ts

@@ -1,6 +1,6 @@
-import { ref } from 'vue'
 import type { DirectiveBinding } from 'vue'
 import type { LoggerInterface } from 'zeed'
+import { ref } from 'vue'
 import { Logger } from 'zeed'
 
 const log: LoggerInterface = Logger('directives')

lib/basic/index.ts

@@ -1,10 +1,7 @@
 export * from './_types'
 export * from './directives'
 export * from './formatters'
-export * from './qrcode'
 export * from './log'
-export * from './share'
-
 export { default as OuiButton } from './oui-button.vue'
 export { default as OuiCard } from './oui-card.vue'
 export { default as OuiCheckbox } from './oui-checkbox.vue'
@@ -19,10 +16,10 @@ export { default as OuiInput } from './oui-input.vue'
 export { default as OuiInputGroup } from './oui-input-group.vue'
 export { default as OuiInputNumber } from './oui-input-number.vue'
 export { default as OuiLog } from './oui-log.vue'
-export { default as OuiQrcode } from './oui-qrcode.vue'
 export { default as OuiNotice } from './oui-notice.vue'
 export { default as OuiPassword } from './oui-password.vue'
 export { default as OuiPasswordMeter } from './oui-password-meter.vue'
+export { default as OuiQrcode } from './oui-qrcode.vue'
 export { default as OuiResizeable } from './oui-resizeable.vue'
 export { default as OuiSelect } from './oui-select.vue'
 export { default as OuiSeparator } from './oui-separator.vue'
@@ -34,3 +31,5 @@ export { default as OuiText } from './oui-text.vue'
 export { default as OuiTextarea } from './oui-textarea.vue'
 export { default as OuiVirtualList } from './oui-virtual-list.vue'
 export { default as OuiWait } from './oui-wait.vue'
+export * from './qrcode'
+export * from './share'

lib/basic/log.ts

@@ -1,6 +1,6 @@
+import type { LoggerInterface, LogMessage } from 'zeed'
 import { reactive } from 'vue'
-import type { LogMessage, LoggerInterface } from 'zeed'
-import { LogLevelAll, LoggerContext, LoggerMemoryHandler } from 'zeed'
+import { LoggerContext, LoggerMemoryHandler, LogLevelAll } from 'zeed'
 
 export type LogOui = LoggerInterface & {
   messages: LogMessage[]

lib/basic/oui-button.demo.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { reactive } from 'vue'
 import { OuiButton, OuiCheckbox, OuiClose, OuiDemo } from '@/lib'
+import { reactive } from 'vue'
+import image from '../../public/apple-touch-icon-180x180.png?url'
 
 const state = reactive({
   disabled: false,
@@ -64,6 +65,14 @@ const state = reactive({
     <OuiButton size="large">
       <OuiClose />
     </OuiButton>
+
+    <br>
+    <br>
+
+    <OuiButton href="https://oui.holtwick.de" target="_blank">
+      <img :src="image" alt="Logo">
+      oui.holtwick.de
+    </OuiButton>
   </div>
 
   <OuiDemo :state="state">

lib/basic/oui-button.vue

@@ -7,16 +7,32 @@ withDefaults(defineProps<{
   size?: 'small' | 'normal' | 'large'
   dropdown?: boolean
   outline?: boolean
+  href?: string
+  target?: string
 }>(), {
   mode: 'neutral',
   size: 'normal',
   dropdown: false,
   outline: false,
+  target: '_blank',
 })
 </script>
 
 <template>
+  <a
+    v-if="href"
+    :href="href"
+    target="target "
+    class="oui-button" :class="[
+      mode && `_button_mode_${mode}`,
+      size && `_button_size_${size}`,
+      dropdown && `_button_dropdown`,
+    ]"
+  >
+    <slot>{{ title }}</slot>
+  </a>
   <button
+    v-else
     class="oui-button" :class="[
       mode && `_button_mode_${mode}`,
       size && `_button_size_${size}`,

lib/basic/oui-draggable.demo.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { reactive, ref } from 'vue'
 import type { OuiDraggableEvent } from '@/lib'
 import { OuiDemo, OuiDraggable, OuiInputNumber } from '@/lib'
+import { reactive, ref } from 'vue'
 
 const state = reactive({
   x: 100,

lib/basic/oui-draggable.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
+import type { LoggerInterface } from 'zeed'
+import type { OuiDraggableEvent } from './_types'
 import { useEventListener } from '@vueuse/core'
 import { ref } from 'vue'
-import type { LoggerInterface } from 'zeed'
-import { Logger, getTimestamp } from 'zeed'
+import { getTimestamp, Logger } from 'zeed'
 import { isInsideScrollable } from '../mobile/drag-util'
-import type { OuiDraggableEvent } from './_types'
 
 const props = defineProps<{
   onlyTouch?: boolean

lib/basic/oui-file.demo.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useLocalStorage } from '@vueuse/core'
 import { OuiCheckbox, OuiDemo, OuiFile, OuiInput } from '@/lib'
+import { useLocalStorage } from '@vueuse/core'
 
 const state = useLocalStorage('oui.demo.file', {
   value: '',

lib/basic/oui-file.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useFileDialog } from '@vueuse/core'
 import type { LoggerInterface } from 'zeed'
-import { Logger, createPromise } from 'zeed'
+import { useFileDialog } from '@vueuse/core'
+import { createPromise, Logger } from 'zeed'
 
 import './oui-form.styl'
 import './oui-file.styl'

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { OuiDatetime, OuiDemo, OuiFormItem, OuiInput, OuiInputNumber, OuiPassword, OuiSelect, OuiTextarea } from '@/lib'
 import { reactive } from 'vue'
 import { getTimestamp } from 'zeed'
-import { OuiDatetime, OuiDemo, OuiFormItem, OuiInput, OuiInputNumber, OuiPassword, OuiSelect, OuiTextarea } from '@/lib'
 
 const state = reactive({
   value1: '',

lib/basic/oui-log.demo.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import { OuiCheckbox, OuiDemo, OuiLog, OuiText, useLog } from '@/lib'
 import { useIntervalFn } from '@vueuse/core'
-import { uuid } from 'zeed'
 import { reactive } from 'vue'
-import { OuiCheckbox, OuiDemo, OuiLog, OuiText, useLog } from '@/lib'
+import { uuid } from 'zeed'
 
 const log = useLog('test')
 

lib/basic/oui-log.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
 import type { LogMessage } from 'zeed'
-import { Uint8ArrayToHexDump, browserSelectColorByName, formatMilliseconds, isArray, isString, logMessageFromCompact } from 'zeed'
 import type { OuiTableColumn } from './_types'
 import type { LogOui } from './log'
+import { computed, ref, watch } from 'vue'
+import { browserSelectColorByName, formatMilliseconds, isArray, isString, logMessageFromCompact, Uint8ArrayToHexDump } from 'zeed'
 import OuiTableview from './oui-tableview.vue'
 
 import './oui-log.styl'

lib/basic/oui-notice.demo.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import { OuiDemo, OuiInput, OuiNotice, OuiPassword, OuiText, OuiTextarea } from '@/lib'
 import { reactive } from 'vue'
 import OuiButton from './oui-button.vue'
 import OuiCheckbox from './oui-checkbox.vue'
-import { OuiDemo, OuiInput, OuiNotice, OuiPassword, OuiText, OuiTextarea } from '@/lib'
 
 const state = reactive({
   title: 'Notice',

lib/basic/oui-notice.vue

@@ -18,8 +18,8 @@ const root = ref()
 watch(root, (el) => {
   if (el) {
     (el.querySelector('._focus')
-    ?? el.querySelector('input,button,select')
-    ?? el).focus()
+      ?? el.querySelector('input,button,select')
+      ?? el).focus()
   }
 }, { immediate: true })
 </script>

lib/basic/oui-password.demo.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { reactive } from 'vue'
 import { OuiCheckbox, OuiDemo, OuiInput, OuiPassword } from '@/lib'
+import { reactive } from 'vue'
 
 const state = reactive({
   value: 'Secr3!',

lib/basic/oui-qrcode.demo.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { reactive } from 'vue'
 import { OuiDemo, OuiInput, OuiQrcode } from '@/lib'
+import { reactive } from 'vue'
 
 import './oui-resizeable.demo.styl'
 

lib/basic/oui-qrcode.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { Logger } from 'zeed'
 import { useQRCode } from './qrcode'
 
 const props = defineProps<{

lib/basic/oui-resizeable.demo.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { reactive } from 'vue'
 import { OuiCheckbox, OuiDemo, OuiResizeable } from '@/lib'
+import { reactive } from 'vue'
 
 import './oui-resizeable.demo.styl'
 

lib/basic/oui-separator.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue'
-import { useLocalStorage } from '@vueuse/core'
 import type { OuiDraggableEvent } from './_types'
-import OuiDraggable from './oui-draggable.vue'
+import { useLocalStorage } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
 import { px } from './lib'
+import OuiDraggable from './oui-draggable.vue'
 
 import './oui-separator.styl'
 

lib/basic/oui-table.demo.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import type { OuiTableColumn } from '../lib'
 import { computed, reactive } from 'vue'
 import { sortedOrderby } from 'zeed'
-import type { OuiTableColumn } from '../lib'
 import { OuiCheckbox, OuiDemo, OuiInput, OuiInputNumber, OuiTable, useMenu } from '../lib'
 
 const state = reactive({

lib/basic/oui-table.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup generic="K extends string, T extends Record<K, any>">
+import type { OuiTableColumn } from './_types'
 import { computed } from 'vue'
 import { parseOrderby } from 'zeed'
-import type { OuiTableColumn } from './_types'
 
 import './oui-table.styl'
 

lib/basic/oui-tableview.demo.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { computed, reactive, ref } from 'vue'
-import { createArray, sortedOrderby, uuid } from 'zeed'
 import type { OuiTableColumn } from '@/lib'
 import { OuiCheckbox, OuiDemo, OuiTableview, useMenu } from '@/lib'
+import { computed, reactive, ref } from 'vue'
+import { createArray, sortedOrderby, uuid } from 'zeed'
 
 const state = reactive({
   sort: '',

lib/basic/oui-tableview.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup generic="K extends string, T extends Record<K, any>">
+import type { OuiTableColumn } from './_types'
 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'

lib/basic/oui-tabs.demo.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { reactive } from 'vue'
 import type { OuiTab } from '../lib'
+import { reactive } from 'vue'
 import { OuiClose, OuiDemo, OuiInput, OuiTabs } from '../lib'
 
 const state = reactive({

lib/basic/oui-tabs.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup generic="K extends string">
-import { computed } from 'vue'
 import type { OuiTab } from './_types'
+import { computed } from 'vue'
 
 import './oui-tabs.styl'
 

lib/basic/oui-virtual-list.demo.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { OuiVirtualList } from '@/lib'
 import { reactive } from 'vue'
 import { createArray, uuid } from 'zeed'
-import { OuiVirtualList } from '@/lib'
 
 const items = createArray(1000, i => ({ id: uuid() }))
 const visibleItems = reactive(items)

lib/basic/signal.demo.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { Ref, UnwrapRef } from 'vue'
-import { onUnmounted, ref, watch } from 'vue'
 import type { LoggerInterface, Signal } from 'zeed'
-import { Logger, useSignal } from 'zeed'
 import { OuiButton, OuiCheckbox, OuiText } from '@/lib'
+import { onUnmounted, ref, watch } from 'vue'
+import { Logger, useSignal } from 'zeed'
 
 const log: LoggerInterface = Logger('test-signal')
 

lib/basic/singleton.ts

@@ -1,5 +1,5 @@
-import { onBeforeUnmount } from 'vue'
 import type { LoggerInterface } from 'zeed'
+import { onBeforeUnmount } from 'vue'
 import { Logger } from 'zeed'
 
 const log: LoggerInterface = Logger('singleton')

lib/float/README.md

@@ -11,8 +11,8 @@ Vue components that float. Based on [floating-ui](https://floating-ui.com/).
 
 ```vue
 <script>
-import { ref } from 'vue'
 import { OuiFloat } from 'oui-float'
+import { ref } from 'vue'
 
 import 'oui-float/css'
 

lib/float/index.ts

@@ -1,11 +1,9 @@
 export { type OuiMenuItem } from './_types'
-
 export { default as OuiFloat } from './oui-float.vue'
 export { default as OuiMenu } from './oui-menu.vue'
 export { default as OuiMenuItems } from './oui-menu-items.vue'
 export { default as OuiTooltipActivator } from './oui-tooltip-activator.vue'
-
 export { useMenu, useMenuWithValue } from './use-menu'
-export { vMenu, vMenuContext, vContext } from './v-menu'
+export { vContext, vMenu, vMenuContext } from './v-menu'
 
 // export { vActionToggle } from './lib'

lib/float/oui-float-button.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { type OffsetOptions, type Padding, type Placement, arrow as arrowMiddleware, autoUpdate, flip, offset, shift, size, useFloating } from '@floating-ui/vue'
+import { arrow as arrowMiddleware, autoUpdate, flip, offset, type OffsetOptions, type Padding, type Placement, shift, size, useFloating } from '@floating-ui/vue'
 import { onClickOutside, onKeyStroke } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 

lib/float/oui-float.demo.vue

@@ -1,9 +1,9 @@
 <!-- eslint-disable no-alert -->
 <script setup lang="ts">
-import { computed, ref } from 'vue'
 import type { LoggerInterface } from 'zeed'
-import { Logger, uuid } from 'zeed'
 import { OuiButton, OuiFloat, OuiMenu, type OuiMenuItem, OuiMenuItems, OuiText, useMenu, vMenu } from '@/lib'
+import { computed, ref } from 'vue'
+import { Logger, uuid } from 'zeed'
 
 import './oui-float.demo.styl'
 

lib/float/oui-float.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type OffsetOptions, type Padding, type Placement, arrow as arrowMiddleware, autoUpdate, flip, offset, shift, size, useFloating } from '@floating-ui/vue'
-import { type UseElementHoverOptions, onKeyStroke, useElementHover, useEventListener, useFocusWithin } from '@vueuse/core'
 import type { Ref } from 'vue'
+import { arrow as arrowMiddleware, autoUpdate, flip, offset, type OffsetOptions, type Padding, type Placement, shift, size, useFloating } from '@floating-ui/vue'
+import { onKeyStroke, useElementHover, type UseElementHoverOptions, useEventListener, useFocusWithin } from '@vueuse/core'
 import { computed, ref, useAttrs, watch } from 'vue'
 
 import './oui-float.styl'

lib/float/oui-menu.demo.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { LoggerInterface } from 'zeed'
-import { Logger } from 'zeed'
 import { OuiButton, useMenu, useMenuWithValue, vMenu } from '@/lib'
+import { Logger } from 'zeed'
 
 const log: LoggerInterface = Logger('oui-menu.demo')
 

lib/float/oui-tooltip-activator.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import type { Placement } from '@floating-ui/vue'
 import { useEventListener } from '@vueuse/core'
 import { ref } from 'vue'
-import type { Placement } from '@floating-ui/vue'
 import { useSingleton } from '../basic/singleton'
 import OuiFloat from './oui-float.vue'