Merge branch 'release/v0.21.19'

lib/basic/oui-checkbox.vue

@@ -3,6 +3,10 @@ import { computed } from 'vue'
 
 import './oui-form.styl'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<{
   title?: string
   switch?: boolean
@@ -36,12 +40,12 @@ const klass = computed(() => {
 <template>
   <template v-if="title || $slots.default">
     <label>
-      <input v-model="modelBool" type="checkbox" :class="klass">
+      <input v-model="modelBool" type="checkbox" :class="klass" v-bind="$attrs">
       {{ ' ' }}
       <slot>{{ title }}</slot>
     </label>
   </template>
   <template v-else>
-    <input v-model="modelBool" type="checkbox" :class="klass">
+    <input v-model="modelBool" type="checkbox" :class="klass" v-bind="$attrs">
   </template>
 </template>

lib/basic/oui-log.demo.vue

@@ -1,10 +1,16 @@
 <script lang="ts" setup>
 import { useIntervalFn } from '@vueuse/core'
 import { uuid } from 'zeed'
-import { OuiLog, OuiText, useLog } from '@/lib'
+import { reactive } from 'vue'
+import { OuiCheckbox, OuiDemo, OuiLog, OuiText, useLog } from '@/lib'
 
 const log = useLog('test')
 
+const state = reactive({
+  showTime: true,
+  showTag: true,
+})
+
 log('Hello World')
 log.info('Info')
 log.warn('Warning')
@@ -21,7 +27,17 @@ useIntervalFn(() => {
   <OuiText>
     <h2>Virtual List</h2>
     <div>
-      <OuiLog :log="log" style="height: 200px;" />
+      <OuiLog
+        :key="`${state.showTag}-${state.showTime}`"
+        :log="log"
+        style="height: 200px;"
+        :show-tag="state.showTag"
+        :show-time="state.showTime"
+      />
     </div>
   </OuiText>
+  <OuiDemo :state="state">
+    <OuiCheckbox v-model="state.showTime" switch title="showTime" />
+    <OuiCheckbox v-model="state.showTag" switch title="showTag" />
+  </OuiDemo>
 </template>

lib/basic/oui-log.md

@@ -0,0 +1,24 @@
+# oui-log
+
+Use `zeed` logging infrastructure to show certain logs in the frontend. Great for development and debugging.
+
+- `log`: `useLog` object
+- `show-time`: show time column
+- `show-tag`: show tag column
+
+## Basic usage
+
+In the Vue component setup use logging like this
+
+```ts
+const log = useLog('test')
+log('This is the first entry')
+```
+
+Then register this log object with OuiLog
+
+```vue
+<OuiLog :log="log" />
+```
+
+OuiTableview is used for display, so notes there apply here as well.

lib/basic/oui-log.vue

@@ -1,16 +1,21 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { LogMessage } from 'zeed'
-import { Uint8ArrayToHexDump, browserSelectColorByName, formatMilliseconds, isArray, isString, logMessageFromCompact } from 'zeed'
+import { Uint8ArrayToHexDump, browserSelectColorByName, formatMilliseconds, isArray, isNotEmpty, isNotNull, isString, logMessageFromCompact } from 'zeed'
 import type { OuiTableColumn } from './_types'
 import type { LogOui } from './log'
 import OuiTableview from './oui-tableview.vue'
 
 import './oui-log.styl'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   log: LogOui
-}>()
+  showTime?: boolean
+  showTag?: boolean
+}>(), {
+  showTime: true,
+  showTag: true,
+})
 
 const selected = ref<number>()
 
@@ -43,7 +48,7 @@ function renderMessages(
   messages: any[],
   opt: RenderMessagesOptions = {},
 ): any[] {
-  return formatMessages(messages, opt)
+  return formatMessages(messages, opt) ?? '?'
 }
 
 function handlerLogInfo(msg: LogMessage) {
@@ -68,7 +73,7 @@ function handlerLogInfo(msg: LogMessage) {
 const logs = ref<any>([])
 
 function updateLogs() {
-  const ll: LogMessage[] = [...props.log.messages] ?? []
+  const ll: LogMessage[] = [...props.log.messages]
   const first = ll[0]
   const compact = isArray(first)
   let timestamp = (compact ? first[0] : first?.timestamp) ?? 0
@@ -97,11 +102,15 @@ watch(() => props.log.messages.length, updateLogs)
 
 updateLogs()
 
-const columns: OuiTableColumn[] = [
-  { title: 'Time', name: 'time', sortable: false, width: 96, align: 'right' },
-  // { title: 'Tag', name: 'tag', sortable: false },
-  { title: 'Message', name: 'message', sortable: false },
-]
+const columns = computed(() => {
+  const cols: OuiTableColumn[] = []
+  if (props.showTime)
+    cols.push({ title: 'Time', name: 'time', sortable: false, width: 96, align: 'right' })
+  if (props.showTag)
+    cols.push({ title: 'Tag', name: 'tag', sortable: false })
+  cols.push({ title: 'Message', name: 'message', sortable: false })
+  return cols
+})
 
 // const selectedItem = computed(() => list.value[selected.value ?? -1])
 </script>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "oui-kit",
   "type": "module",
-  "version": "0.21.18",
+  "version": "0.21.19",
   "author": {
     "email": "dirk.holtwick@gmail.com",
     "name": "Dirk Holtwick",
@@ -76,23 +76,23 @@
     "@floating-ui/vue": "^1.1.1",
     "@vueuse/core": "^10.11.0",
     "vue": "^3.4.31",
-    "zeed": "^0.21.0"
+    "zeed": "^0.22.8"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.21.2",
-    "@antfu/ni": "^0.21.12",
-    "@shikijs/markdown-it": "^1.10.1",
+    "@antfu/ni": "^0.22.0",
+    "@shikijs/markdown-it": "^1.10.3",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.10",
     "@vitejs/plugin-vue": "^5.0.5",
     "eslint": "<9",
     "stylus": "^0.63.0",
     "tsup": "^8.1.0",
     "typescript": "<5.5",
     "unplugin-vue-markdown": "^0.26.2",
-    "vite": "^5.3.2",
+    "vite": "^5.3.3",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-qrcode": "^0.2.3",
-    "vitest": "^1.6.0"
+    "vitest": "^2.0.2"
   }
 }