@indielayer/ui 1.5.1 → 1.6.0

package/src/components/menu/Menu.vue

@@ -18,6 +18,7 @@ const menuProps = {
     type: Boolean,
     default: true,
   },
+  minimal: Boolean,
 }
 
 export type MenuArrayItem = {
@@ -104,6 +105,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
               :filled="item.filled || filled"
               :size="item.size || size"
               :disabled="disabled || item.disabled"
+              :minimal="minimal"
               class="font-medium"
             />
           </template>
@@ -120,6 +122,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
               :disabled="disabled || item.disabled"
               :rounded="rounded"
               :filled="filled"
+              :minimal="minimal"
               @expand="expand(false)"
               @item-click="$emit('item-click')"
             />
@@ -133,6 +136,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
             :filled="item.filled || filled"
             :size="item.size || size"
             :disabled="disabled || item.disabled"
+            :minimal="minimal"
             class="font-medium"
             inactive
             @click="$emit('item-click')"
@@ -147,6 +151,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
             :collapse-icon="item.collapseIcon || collapseIcon"
             :expanded="item.expanded || expanded"
             :disabled="disabled || item.disabled"
+            :minimal="minimal"
             :rounded="rounded"
             :filled="filled"
             @expand="$emit('expand')"
@@ -163,6 +168,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
           :filled="item.filled || filled"
           :size="item.size || size"
           :disabled="disabled || item.disabled"
+          :minimal="minimal"
           :class="{ 'my-2': item.divider }"
           @click="$emit('item-click')"
           @active="$emit('expand')"

package/src/components/menu/MenuItem.vue

@@ -31,6 +31,7 @@ const menuItemProps = {
   },
   selected: Boolean,
   disabled: Boolean,
+  minimal: Boolean,
 }
 
 export type MenuItemProps = ExtractPublicPropTypes<typeof menuItemProps>
@@ -150,7 +151,7 @@ const { styles, classes, className } = useTheme('MenuItem', {}, computedProps, {
     </span>
     <x-icon v-else-if="computedProps.icon" :size="computedProps.size" :icon="computedProps.icon" class="mr-2"/>
 
-    <span class="flex-1 truncate">
+    <span v-if="!minimal" class="flex-1 truncate">
       <slot>{{ computedProps.label }}</slot>
     </span>
 

package/src/components/menu/theme/MenuItem.base.theme.ts

@@ -3,7 +3,7 @@ import type { MenuItemTheme } from '../MenuItem.vue'
 const theme: MenuItemTheme = {
   classes: {
     wrapper: ({ props, data }) => {
-      const classes = ['relative !flex items-center whitespace-nowrap px-3']
+      const classes = ['relative !flex items-center whitespace-nowrap px-3 min-h-[2rem]']
 
       if (!props.disabled) classes.push('cursor-pointer')
       if (data.isActive) classes.push('font-medium')

package/src/components/notifications/Notifications.vue

@@ -292,6 +292,7 @@ defineExpose({ log, info, success, warn, warning: warn, error })
           <x-spacer/>
           <button
             v-if="notification.action"
+            type="button"
             class="
                 ml-3
                 font-medium

package/src/components/popover/Popover.vue

@@ -33,10 +33,10 @@ const popoverProps = {
   popperShowTriggers: [Array, Function] as PropType<Array<PopoverTriggerEvent> | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>,
   popperHideTriggers: [Array, Function] as PropType<Array<PopoverTriggerEvent> | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>,
   container: {
-    type: [String, Object, Element, Boolean],
+    type: [String, Object, Boolean],
     default: 'body',
   },
-  boundary: [String, Element],
+  boundary: [String, Object],
   strategy: {
     type: String as PropType<'absolute' | 'fixed'>,
     default: 'absolute',

package/src/components/qrCode/QrCode.vue

@@ -0,0 +1,120 @@
+<script lang="ts">
+const qrCodeProps = {
+  value: String,
+  color: {
+    type: String,
+    default: '#000',
+  },
+  backgroundColor: {
+    type: String,
+    default: '#fff',
+  },
+  size: {
+    type: [String, Number],
+    default: 100,
+  },
+  errorCorrectionLevel: {
+    type: String,
+    default: 'M',
+  },
+}
+
+export type QrCodeProps = ExtractPublicPropTypes<typeof qrCodeProps>
+
+type InternalClasses = 'wrapper'
+export interface QrCodeTheme extends ThemeComponent<QrCodeProps, InternalClasses> {}
+
+export default {
+  name: 'XQrCode',
+  validators: {
+    errorCorrectionLevel: ['L', 'M', 'Q', 'H'],
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watchEffect, type ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import qrcodegen from './qrcodegen'
+
+const props = defineProps(qrCodeProps)
+
+const ERROR_CORRECTION_LEVEL: Record<string, qrcodegen.QrCode.Ecc> = {
+  L: qrcodegen.QrCode.Ecc.LOW,
+  M: qrcodegen.QrCode.Ecc.MEDIUM,
+  Q: qrcodegen.QrCode.Ecc.QUARTILE,
+  H: qrcodegen.QrCode.Ecc.HIGH,
+}
+
+const canvasRef = ref<HTMLCanvasElement>()
+
+const qr = computed(() => qrcodegen.QrCode.encodeText(
+  props.value ?? '-',
+  ERROR_CORRECTION_LEVEL[props.errorCorrectionLevel] || qrcodegen.QrCode.Ecc.MEDIUM,
+))
+
+onMounted(() => {
+  watchEffect(() => {
+    drawQR(
+      qr.value,
+      Number(props.size),
+      props.color,
+      props.backgroundColor,
+    )
+  })
+})
+
+function drawQR(qr: qrcodegen.QrCode, size: number, foregroundColor: string, backgroundColor: string) {
+  const canvas = canvasRef.value
+
+  if (!canvas) return
+
+  const canvasWidth = size * 2
+  const width = qr.size
+  const scale = canvasWidth / width
+
+  canvas.width = canvasWidth
+  canvas.height = canvasWidth
+  const ctx = canvas.getContext('2d')
+
+  if (!ctx) return
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  for (let y = 0; y < qr.size; y++) {
+    for (let x = 0; x < qr.size; x++) {
+      ctx.fillStyle = qr.getModule(x, y) ? foregroundColor : backgroundColor
+      const startX = Math.floor(x * scale)
+      const endX = Math.ceil((x + 1) * scale)
+      const startY = Math.floor(y * scale)
+      const endY = Math.ceil((y + 1) * scale)
+
+      ctx.fillRect(startX, startY, endX - startX, endY - startY)
+    }
+  }
+}
+
+const { styles, classes, className } = useTheme('QrCode', {}, props)
+</script>
+
+<template>
+  <div
+    :style="[styles, {
+      width: `calc(1rem + ${size}px)`,
+      height: `calc(1rem + ${size}px)`,
+      backgroundColor,
+      padding: '0.5rem',
+    }]"
+    :class="[
+      className,
+      classes.wrapper,
+    ]"
+  >
+    <canvas
+      ref="canvasRef"
+      :style="{
+        width: `${size}px`,
+        height: `${size}px`
+      }"
+    ></canvas>
+  </div>
+</template>

package/src/components/qrCode/__tests__/QrCode.spec.ts

@@ -0,0 +1,14 @@
+import { describe, it, expect, vitest } from 'vitest'
+import { mount } from '@vue/test-utils'
+import QrCode from '../QrCode.vue'
+
+describe('QrCode', () => {
+  it('renders properly', () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    HTMLCanvasElement.prototype.getContext = vitest.fn()
+    const wrapper = mount(QrCode)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/qrCode/index.ts

@@ -0,0 +1,2 @@
+export { default as XQrCode } from './QrCode.vue'
+export type { QrCodeProps, QrCodeTheme } from './QrCode.vue'