feat(share): add QRCode gen

pdanpdan · Nov 26, 2023 · 3523e4b · 3523e4b
1 parent aa07598
commit 3523e4b
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -32,9 +32,9 @@
   "homepage": "https://pdanpdan.github.io/quasar-play",
   "type": "module",
   "scripts": {
-    "dev": "vite dev",
+    "dev": "vite dev --host",
     "build": "vite build",
-    "preview": "vite preview",
+    "preview": "vite preview --host",
     "lint": "eslint --ext .js,.vue,.cjs,.ts .",
     "typecheck": "vue-tsc --noEmit",
     "generate-pwa-assets": "pwa-assets-generator"
@@ -63,8 +63,9 @@
     "vite": "^5.0.2",
     "vite-plugin-compression2": "^0.11.0",
     "vite-plugin-mkcert": "^1.17.1",
-    "vite-plugin-pwa": "^0.17.0",
+    "vite-plugin-pwa": "^0.17.2",
     "vue": "^3.3.9",
+    "vue-qrious": "^3.1.0",
     "vue-tsc": "^1.8.22",
     "workbox-window": "^7.0.0"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ShareDialog.vue b/src/components/ShareDialog.vue
@@ -1,47 +1,68 @@
 <template>
   <q-dialog ref="dialogRef" @hide="onDialogHide">
     <q-card class="q-dialog-plugin">
-      <q-card-section>
-        <div class="text-h6">{{ locale.share }}</div>
+      <q-card-section class="q-py-xs">
+        <div class="text-h6">{{ locale.shareTitle }}</div>
       </q-card-section>
 
-      <q-card-section>
+      <q-card-section class="q-py-xs">
         <q-option-group
           color="primary"
           v-model="settings.preview"
           :options="previewOptions"
+          inline
         />
       </q-card-section>
 
       <q-separator inset />
 
-      <q-card-section>
+      <q-card-section v-if="settings.preview === 'output'" class="q-py-xs">
         <q-option-group
           color="primary"
           v-model="settings.previewMode"
           :options="previewModeOptions"
-          :disable="settings.preview !== 'output'"
+          inline
         />
       </q-card-section>
 
       <q-separator inset />
 
-      <q-card-section>
+      <q-card-section class="q-py-xs">
         <q-option-group
           color="primary"
           v-model="settings.editor"
           :options="editorOptions"
+          inline
         />
       </q-card-section>
 
+      <q-card-section class="q-py-xs q-px-sm">
+        <vue-qrious class="fit" :value="shareUrl" level="L" :size="551" :padding="10" />
+      </q-card-section>
+
       <q-card-actions align="right">
-        <q-btn flat color="grey-8" :label="locale.cancel" @click="onDialogHide" />
+        <q-btn flat color="grey-6" :label="locale.cancel" @click="onDialogHide" />
         <q-btn autofocus flat color="primary" :label="canShare ? locale.share : locale.shareCopy" @click="onShare" />
       </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
 
+<style lang="sass" scoped>
+.q-option-group :deep(> div)
+  width: calc(50% - 8px)
+</style>
+
+<style lang="sass">
+.q-dialog-plugin.q-card--dark
+  box-shadow: none
+  border: 1px solid #666
+  filter: drop-shadow(0 0 2px #9999)
+body.body--dark
+  .q-dialog__backdrop
+    background: rgba(0, 0, 0, 0.7)
+</style>
+
 <script lang="ts">
 const canShare = ref<boolean | null>(null);
 const settings = reactive({
@@ -74,8 +95,10 @@ settings.editor = (urlSearch.get('editor') || 'monaco').toLowerCase().includes('
 </script>
 
 <script setup lang="ts">
-import { ref, reactive, onBeforeMount } from 'vue';
+import { ref, reactive, computed, onBeforeMount } from 'vue';
 import { useDialogPluginComponent, copyToClipboard, Notify } from 'quasar';
+import VueQrious from 'vue-qrious';
+
 import { locale } from '../utils/locale';
 
 onBeforeMount(() => {
@@ -97,7 +120,7 @@ defineEmits([
 
 const { dialogRef, onDialogHide } = useDialogPluginComponent();
 
-function getUrl() {
+const shareUrl = computed(() => {
   const url = new URL(location.href);
 
   url.searchParams.delete('preview');
@@ -112,11 +135,12 @@ function getUrl() {
 
   url.searchParams.set('editor', settings.editor);
 
+  console.log(String(url).length);
   return String(url);
-}
+});
 
 async function onShare() {
-  const url = getUrl();
+  const url = shareUrl.value;
 
   if (canShare.value) {
     try {

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
@@ -511,7 +511,7 @@ body.desktop .q-select__options-list
     max-width: unset !important
     padding: 16px 16px 8px
     transition: var(--play-transition-transform)
-    filter: drop-shadow(2px 2px 4px #6666)
+    filter: drop-shadow(1px 1px 2px #9999)
 
     &--closed
       transform: translate3d(0, -100%, -1px)

diff --git a/src/utils/locale.ts b/src/utils/locale.ts
@@ -10,16 +10,17 @@ const config = {
     reset: 'Reset (delete) project',
     doneShare: 'Sharable URL has been copied to clipboard',
     share: 'Share project',
+    shareTitle: 'Share settings',
     shareCopy: 'Copy to clipboard',
     shareOptions: {
-      output: 'Start in Output mode',
-      code: 'Start in Code mode',
-      outputPreview: 'Start with Output Preview',
-      outputJs: 'Start with JS Preview',
-      outputCss: 'Start with CSS Preview',
-      outputSSR: 'Start with SSR Preview',
-      editorMonaco: 'Use Monaco editor - full featured, bigger size',
-      editorMirror: 'Use CodeMirror editor - smaller size',
+      output: 'Output',
+      code: 'Code',
+      outputPreview: 'Preview',
+      outputJs: 'JS',
+      outputCss: 'CSS',
+      outputSSR: 'SSR',
+      editorMonaco: 'Monaco',
+      editorMirror: 'CodeMirror',
     },
     cdn: 'CDN',
     other: 'Other',