zz-shopify-components 0.25.1-beta.8 → 0.25.1-beta.9

package/assets/zz-modal.js

@@ -80,7 +80,7 @@
       .panel-inner {
         transform-origin: center center;
         transform: translateY(8px) scale(0.98);
-        max-height: var(--zz-modal-max-height, 100vh);
+        max-height: var(--zz-modal-max-height, 85vh);
       }
     }
 
@@ -195,6 +195,11 @@
       this._closeBtn = shadow.querySelector('[data-zz-modal-close]');
       this._slotHeader = shadow.querySelector('slot[name="header"]');
       this._slotFooter = shadow.querySelector('slot[name="footer"]');
+      this._closeIconPath = shadow.querySelector('.close-btn svg path');
+
+      if (!this._closeIconPath) return;
+      const color = this.getAttribute('close-icon-color') || 'currentColor';
+      this._closeIconPath.setAttribute('stroke', color);
     }
 
     connectedCallback() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.25.1-beta.8",
+  "version": "0.25.1-beta.9",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/sections/zz-modal.liquid

@@ -22,6 +22,7 @@
     {% if section.settings.is_exposure != false %}
       data-track-zz-exposure="true"
     {% endif %}
+    close-icon-color="{{ section.settings.close_icon_color }}"
     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>
@@ -74,6 +75,11 @@
         { "value": "white", "label": "白色" },
         { "value": "black", "label": "黑色" }
       ],
+    },
+    {
+      "type": "color",
+      "id": "close_icon_color",
+      "label": "叉叉颜色",
     },
       {
         "type": "checkbox",

package/sections/zz-navigation-tab-v3.liquid

@@ -119,6 +119,7 @@
         {% endunless %}
       {% endfor %}
     </div>
+    {% if section.settings.btn_text != blank %}
       <div class="tw-flex-shrink-0 tw-relative">
         <div class="cover-box tw-absolute tw-top-0 tw-left-[-50px] tw-w-[50px] tw-h-full">&nbsp;</div>
         {% render 'zz-button',
@@ -131,7 +132,7 @@
       
         %}
       </div>
-  
+    {% endif %}
   
   </div>
 </div>