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

package/assets/zz-modal.js

@@ -69,7 +69,7 @@
       border-radius: var(--zz-modal-radius, 12px);
       box-shadow: var(--zz-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));
       width: var(--zz-modal-width, min(720px, 92vw));
-      max-height: var(--zz-modal-max-height, 90vh);
+      max-height: var(--zz-modal-max-height, 100vh);
       display: flex;
       flex-direction: column;
       overflow: hidden;
@@ -80,6 +80,7 @@
       .panel-inner {
         transform-origin: center center;
         transform: translateY(8px) scale(0.98);
+        max-height: var(--zz-modal-max-height, 85vh);
       }
     }
 
@@ -194,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/blocks/zz-bundle-compare-item.liquid

@@ -36,11 +36,15 @@
       font-size: 14px;
       line-height: 1.25;
       background: #F5F5F6;
+      font-weight: 700;
+      white-space: nowrap;
+      color: #00000080;
       --tab-padding: 1.25rem;
   }
 
   #shopify-block-{{ block.id }} input.tw-daisy-tab:checked {
     border-color: #000;
+    color: #000;
   }
 </style>
 

package/blocks/zz-bundle-compare.liquid

@@ -33,7 +33,7 @@
 </div>
 
 <!-- 移动端 -->
-<div class=' tw-w-full tw-overflow-hidden tw-h-[62vh] tw-relative lg:tw-hidden'>
+<div class=' tw-w-full tw-overflow-hidden tw-h-[77vh] tw-relative lg:tw-hidden'>
   <div
     role='tablist'
     class='tw-daisy-tabs tw-w-full tw-overflow-x-auto tw-daisy-tabs-bordered'
@@ -43,6 +43,7 @@
 </div>
 
 <style>
+  
   #shopify-block-{{ block.id }} .tw-daisy-tabs-bordered .tw-daisy-tab {
     border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
     --tw-border-opacity: 0.2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.25.1-beta.7",
+  "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>