From bfd94b5753b5edd114692da867601ba1f5daa252 Mon Sep 17 00:00:00 2001
From: lyqht <estee.tsw@gmail.com>
Date: Thu, 8 Aug 2024 14:20:27 +0800
Subject: [PATCH] feat: support transparent background

---
 locales/en.json |  1 +
 src/App.vue     | 28 +++++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/locales/en.json b/locales/en.json
index 4d364f9..be128dd 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -30,6 +30,7 @@
   "Corners Square type": "Corners Square type",
   "Corners Dot color": "Corners Dot color",
   "Corners Dot type": "Corners Dot type",
+  "With background": "With background",
   "QR code preset": "QR code preset",
   "Preset": "Preset",
   "dots": "dots",
diff --git a/src/App.vue b/src/App.vue
index b94be2f..68584ce 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -49,6 +49,17 @@ const cornersDotOptionsType = ref()
 const styleBorderRadius = ref()
 const styledBorderRadiusFormatted = computed(() => `${styleBorderRadius.value}px`)
 const styleBackground = ref(defaultPreset.style.background)
+const lastBackground = ref(defaultPreset.style.background)
+
+const withBackground = ref(true)
+watch(withBackground, () => {
+  if (!withBackground.value) {
+    lastBackground.value = styleBackground.value
+    styleBackground.value = 'transparent'
+  } else {
+    styleBackground.value = lastBackground.value
+  }
+})
 
 const dotsOptions = computed(() => ({
   color: dotsOptionsColor.value,
@@ -592,7 +603,22 @@ onMounted(() => {
                 v-model="image"
               />
             </div>
-            <div id="color-settings" class="flex w-full flex-row flex-wrap gap-4">
+            <div class="flex flex-row items-center gap-2">
+              <label for="with-background">
+                {{ t('With background') }}
+              </label>
+              <input
+                id="with-background"
+                type="checkbox"
+                class="checkbox"
+                v-model="withBackground"
+              />
+            </div>
+            <div
+              id="color-settings"
+              :inert="!withBackground"
+              :class="[!withBackground && 'opacity-30', 'flex w-full flex-row flex-wrap gap-4']"
+            >
               <div class="flex flex-row items-center gap-2">
                 <label for="background-color">{{ t('Background color') }}</label>
                 <input