Merge branch 'release/v0.23.5'

eslint.config.js

@@ -48,6 +48,7 @@ export default antfu(
   {},
   {
     rules: {
+      'eslint-comments/no-unlimited-disable': 'off',
       'unused-imports/no-unused-vars': 'off',
       'antfu/consistent-list-newline': 'off',
       'eslint-disable-unused-imports/no-unused-imports': 'off',

lib/basic/clipboard.ts

@@ -0,0 +1,68 @@
+// MIT, https://github.com/feross/clipboard-copy/blob/master/index.js
+
+/** @deprecated use https://vueuse.org/core/useClipboard/#useclipboard */
+export function canCopy() {
+  try {
+    const w = window as any
+    return !!navigator.clipboard || document.queryCommandSupported('copy') || w.electron?.clipboard?.writeText
+  }
+  catch (err) {
+    return false
+  }
+}
+
+async function copyClipboardApi(text: string) {
+  // Use the Async Clipboard API when available. Requires a secure browsing context (i.e. HTTPS)
+  if (navigator.clipboard)
+    return !!navigator.clipboard.writeText(text)
+  return false
+}
+
+async function copyExecCommand(text: string) {
+  // Put the text to copy into a <span>
+  const span = document.createElement('span')
+  span.textContent = text
+
+  // Preserve consecutive spaces and newlines
+  span.style.whiteSpace = 'pre'
+  span.style.webkitUserSelect = 'auto'
+  span.style.userSelect = 'all'
+
+  // Add the <span> to the page
+  document.body.appendChild(span)
+
+  // Make a selection object representing the range of text selected by the user
+  const selection = window.getSelection() as any
+  const range = window.document.createRange()
+  selection.removeAllRanges()
+  range.selectNode(span)
+  selection.addRange(range)
+
+  // Copy text to the clipboard
+  let success = false
+  try {
+    success = window.document.execCommand('copy')
+  }
+  finally {
+    // Cleanup
+    selection.removeAllRanges()
+    window.document.body.removeChild(span)
+  }
+
+  return success
+}
+
+/** @deprecated use https://vueuse.org/core/useClipboard/#useclipboard */
+export async function clipboardCopy(text: string) {
+  const w = window as any
+  if (w.electron) {
+    // https://electronjs.org/docs/api/clipboard
+    await w.electron?.clipboard?.writeText(text)
+    return true
+  }
+
+  if (await copyClipboardApi(text))
+    return true
+
+  return await copyExecCommand(text)
+}

lib/basic/index.ts

@@ -1,7 +1,9 @@
 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'
@@ -17,6 +19,7 @@ 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'

lib/basic/oui-qrcode.demo.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import { OuiDemo, OuiInput, OuiQrcode } from '@/lib'
+
+import './oui-resizeable.demo.styl'
+
+const state = reactive({
+  content: 'https://oui.holtwick.de',
+})
+</script>
+
+<template>
+  <h2>QR Code</h2>
+
+  <div>
+    <OuiQrcode :content="state.content" />
+  </div>
+
+  <OuiDemo :state="state">
+    <OuiInput v-model="state.content" switch title="content" />
+  </OuiDemo>
+</template>
+
+<style>
+.oui-qrcode svg {
+  display: inline-block;
+  max-width: min(50vh, 50vw);
+  max-height: min(50vh, 50vw);
+}
+</style>

lib/basic/oui-qrcode.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { Logger } from 'zeed'
+import { useQRCode } from './qrcode'
+
+const props = defineProps<{
+  content: string
+}>()
+
+const qrcode = useQRCode()
+
+const qrcodeHTML = computed(() => {
+  const typeNumber = 0
+  const errorCorrectionLevel = 'M'
+  const qr = qrcode(typeNumber, errorCorrectionLevel) as any
+
+  qr.addData(props.content ?? '')
+  qr.make()
+  return qr.createSvgTag({
+    scalable: true,
+  })
+})
+</script>
+
+<template>
+  <div class="oui-qrcode" v-html="qrcodeHTML" />
+</template>