Merge pull request #29 from k2tzumi/bump-up-slidev

Bump up slidev

.github/workflows/release.yml

@@ -21,8 +21,8 @@ jobs:
       id-token: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           registry-url: 'https://registry.npmjs.org'
           always-auth: true
@@ -34,7 +34,7 @@ jobs:
           assets=$(npm pack --json | jq -r '.[0].filename' | sed 's/^$//')
           echo "packFile=${assets}" >> $GITHUB_OUTPUT
       - name: Upload Release Asset
-        uses: actions/github-script@v6
+        uses: actions/github-script@v7
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
@@ -59,7 +59,7 @@ jobs:
             });
 
       - name: npm publish
-        uses: JS-DevTools/npm-publish@v2
+        uses: JS-DevTools/npm-publish@v3
         with:
           token: ${{ secrets.NPM_TOKEN }}
           access: 'public'

.github/workflows/tagpr.yml

@@ -13,7 +13,7 @@ jobs:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - name: Check out source code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - id: tagpr
         name: Run tagpr
@@ -22,7 +22,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Trigger release Workflow
-        uses: actions/github-script@v6
+        uses: actions/github-script@v7
         continue-on-error: true
         if: steps.tagpr.outputs.tag != ''
         with:

.github/workflows/test.yml

@@ -11,6 +11,6 @@ jobs:
       cancel-in-progress: true
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
       - run: make dist/index.html

.gitignore

@@ -9,3 +9,4 @@ components.d.ts
 slides-export.pdf
 slides-export-notes.pdf
 *.tgz
+example-export.pdf

README.md

@@ -6,7 +6,7 @@
 
 ## Dependencies
 
-- [qrcode-vue3](https://github.com/scholtz/qrcode-vue3)
+- [styled-qr-code](https://www.npmjs.com/package/styled-qr-code)
 
 ## Installation
 

components/QRCode.vue

@@ -1,39 +1,19 @@
 <template>
-  <QRCodeVue3
-    :width="width"
-    :height="height"
-    :value="value"
-    :qr-options="{ errorCorrectionLevel: 'H' }"
-    :image-options="{ hideBackgroundDots: true, margin: 5 }"
-    :cornersSquareOptions="{ type: 'extra-rounded', color: '#' + color }"
-    :cornersDotOptions="{ type: 'square', color: '#' + color }"
-    :dots-options="{ type: 'square', color: '#' + color , gradient: { type: 'linear', rotation: 0, colorStops: [ { offset: 0, color: '#'  + color }, { offset: 1, color: '#' + offsetColor } ] } }"
-    :image="image"
-  />
+  <div class="qrcode_container" ref="qrCodeRef"></div>
 </template>
 
-<script setup lang="ts">
-import { defineComponent, computed } from 'vue'
-import QRCodeVue3 from 'qrcode-vue3'
-
-export interface Props {
-  value: string,
-  color: string,
-  width: number,
-  height: number,
-  image: string,
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  width: 200,
-  height: 200,
-  color: "000000",
-});
+<script lang="ts" setup>
+import QRCodeStyling, { Options } from 'styled-qr-code';
+import { watch, computed, onMounted, ref } from 'vue';
+
+const qrCodeRef: any = ref(null);
 
-defineComponent({
-  components: {
-    QRCodeVue3
-  }
+const props = defineProps({
+  value: String,
+  color: String,
+  width: String,
+  height: String,
+  image: String,
 });
 
 const offsetColor = computed<string>(() => {
@@ -50,4 +30,63 @@ const offsetColor = computed<string>(() => {
     ('0' + (g || 0).toString(16)).slice(-2) +
     ('0' + (b || 0).toString(16)).slice(-2);
 });
+
+const options: Options = {
+  width: props.width,
+  height: props.height,
+  type: 'svg',
+  data: props.value,
+  image: props.image,
+  margin: 10,
+  qrOptions: {
+    typeNumber: 0,
+    mode: 'Byte',
+    errorCorrectionLevel: 'H',
+  },
+  imageOptions: {
+    hideBackgroundDots: true,
+    margin: 5,
+    crossOrigin: 'anonymous',
+  },
+  cornersSquareOptions: {
+    type: 'extra-rounded',
+    color: '#' + props.color
+  },
+  cornersDotOptions: {
+    type: 'square',
+    color: '#' + props.color
+  },
+  dotsOptions: {
+    type: 'square',
+    color: '#' + props.color,
+    gradient: {
+      type: 'linear',
+      rotation: 0,
+      colorStops: [
+        {
+          offset: 0,
+          color: '#' + props.color
+        },
+        {
+          offset: 1,
+          color: '#' + offsetColor
+        }
+      ]
+    }
+  },
+};
+
+const qrCode = new QRCodeStyling(options);
+
+onMounted(async () => {
+  qrCode.append(qrCodeRef.value);
+});
+
+watch(
+  () => props.data,
+  (newValue) => {
+    qrCode.update({ ...options, value: newValue });
+  },
+);
+
 </script>