zz-shopify-components 0.9.0 → 0.11.0

package/assets/zz-modal.js

@@ -107,15 +107,25 @@
       all: unset;
       cursor: pointer;
       position: absolute;
-      top: 8px;
-      right: 8px;
+      top: 20px;
+      right: 20px;
       width: 32px;
       height: 32px;
       border-radius: 9999px;
       display: grid;
       place-items: center;
     }
-    .close-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
+    .close-btn-white {
+      color: white;
+      background-color: rgba(0,0,0,0.08);
+      backdrop-filter: blur(10px);
+    }
+    .close-btn-black {
+      color: white;
+      background-color: #333333;
+      /* backdrop-filter: blur(10px); */
+    }
+    .close-btn:focus-visible { outline: none; }
   `;
 
   const TEMPLATE = document.createElement('template');
@@ -151,6 +161,11 @@
       style.textContent = STYLE_TEXT;
       shadow.appendChild(style);
       shadow.appendChild(TEMPLATE.content.cloneNode(true));
+      const closeBtnColor = this.getAttribute('close-btn-color');
+      if (closeBtnColor) {
+        const closeBtn = shadow.querySelector('.close-btn');
+        closeBtn.classList.add(closeBtnColor);
+      }
 
       this._dialog = shadow.querySelector('dialog');
       this._panel = shadow.querySelector('.panel-inner');

package/blocks/zz-edu-form.liquid

@@ -92,7 +92,7 @@
 {% assign eu_country_list = 'Deutschland,Germany,La France,France,España,Italia,Österreich,Belgium,Bulgaria,Croatia,Czech Republic,Denmark,Estonia,Finland,Hungary,Ireland,Latvia,Lithuania,Luxembourg,Monaco,Netherlands,Poland,Portugal,Romania,Slovakia,Slovenia,Sweden' | split: ',' %}
 
 <div class="tw-w-full tw-flex tw-flex-col tw-items-center tw-justify-center">
-  <zz-radio-tabs name="edu-form-type" class="tw-bg-[#F5F5F6] lg:tw-w-[388px]">
+  <zz-radio-tabs name="edu-form-type-{{ block.id }}" class="tw-bg-[#F5F5F6] lg:tw-w-[388px]">
     <zz-radio-tabs-item value="email" checked>Verify my email</zz-radio-tabs-item>
     <zz-radio-tabs-item value="manual">Upload student card</zz-radio-tabs-item>
   </zz-radio-tabs>
@@ -482,19 +482,19 @@
                 identityDocumentUrl = result.url
                 fileUploadLoading.classList.add('tw-hidden')
               } else {
-                removeEduVerifyFile()
+                window['removeEduVerifyFile{{ block.id }}']()
                 fileUploadLoading.classList.add('tw-hidden')
                 zzShowToast('File upload failed, please try again.')
               }
               
             } catch (error) {
-              removeEduVerifyFile()
+              window['removeEduVerifyFile{{ block.id }}']()
               fileUploadLoading.classList.add('tw-hidden')
               zzShowToast('File upload failed, please try again.')
             }
             
           } else {
-            removeEduVerifyFile()
+            window['removeEduVerifyFile{{ block.id }}']()
             fileUploadLoading.classList.add('tw-hidden')
             zzShowToast('File upload failed, please try again.')
           }
@@ -502,7 +502,7 @@
         }).catch((err) => {
           zzShowToast(EduErrorCodeConf[500].en)
           fileUploadLoading.classList.add('tw-hidden')
-          removeEduVerifyFile()
+          window['removeEduVerifyFile{{ block.id }}']()
         });
       }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/sections/zz-modal.liquid

@@ -15,7 +15,7 @@
     }
   </style>
 
-  <zz-modal {% if section.settings.sheet_on_mobile %} sheet-on-mobile {% endif %} {% if section.settings.no_backdrop_close %} no-backdrop-close {% endif %} id="{{ section.settings.modal_id }}"{% unless section.settings.show_header %} no-header{% endunless %}{% unless section.settings.show_footer %} no-footer{% endunless %}>
+  <zz-modal close-btn-color="close-btn-{{ section.settings.close_btn_color }}" {% if section.settings.sheet_on_mobile %} sheet-on-mobile {% endif %} {% if section.settings.no_backdrop_close %} no-backdrop-close {% endif %} id="{{ section.settings.modal_id }}"{% unless section.settings.show_header %} no-header{% endunless %}{% unless section.settings.show_footer %} no-footer{% endunless %}>
     {% if section.settings.show_header %}
     <div slot="header" class="tw-text-[24px] tw-font-semibold">{{ section.settings.header_text }}</div>
     {% endif %}
@@ -49,6 +49,16 @@
       "id": "modal_id",
       "label": "弹窗id （必填）",
       "default": "demo-modal"
+    },
+    {
+      "type": "select",
+      "id": "close_btn_color",
+      "label": "关闭按钮颜色",
+      "default": "white",
+      "options": [
+        { "value": "white", "label": "白色" },
+        { "value": "black", "label": "黑色" }
+      ],
     },
       {
         "type": "checkbox",