zz-shopify-components 0.3.1-beta.1 → 0.3.1-beta.10

package/assets/zz-components.css

@@ -4,7 +4,7 @@
   align-items: center;
   height: 36px;
   border-radius: 32px;
-  background: #FFFFFF;
+  background: #F5F5F6;
 }
 
 .zz-radio-tabs-black.zz-radio-tabs {
@@ -125,10 +125,12 @@ zz-radio-tabs-item {
 }
 .content-text ol {
   list-style: decimal;
+  padding-left: 20px;
 }
 
 .content-text ul {
   list-style: disc;
+  padding-left: 20px;
 }
 
 /* 标题 */

package/assets/zz-components.js

@@ -7,13 +7,13 @@ class ZZRadioTabsItem extends HTMLElement {
     // 创建radio input
     const groupName =
       this.closest('zz-radio-tabs')?.getAttribute('name') || 'option';
-    const type =
-      this.closest('zz-radio-tabs')?.getAttribute('type') || 'default';
+    // 获取checked属性 - 支持checked和checked="true"两种方式
+    const checked = this.hasAttribute('checked');
     const value = this.getAttribute('value') || '';
     const slot = this.innerHTML;
     this.innerHTML = `
       <label class="zz-radio-tabs-wrapper">
-        <input type="radio" name=${groupName} value=${value}>
+        <input type="radio" name=${groupName} value=${value} ${checked ? 'checked' : ''}>
         <div class="zz-radio-tabs-label">
             ${slot}
         </div>

package/assets/zz-http-request.js

@@ -50,6 +50,30 @@
     }
   }
 
+  function requestFormData(method, url, formData, options = {}) {
+    const baseUrl = options.baseUrl || DEFAULT_BASE_URL;
+    const timeout = options.timeout || DEFAULT_TIMEOUT;
+    const fullUrl = baseUrl + url;
+
+    let fetchOptions = {
+      method: method.toUpperCase(),
+      headers: {
+        // 不设置Content-Type，让浏览器自动设置multipart/form-data
+        ...(options.headers || {}),
+      },
+      ...options,
+    };
+
+    // 移除可能存在的Content-Type，让浏览器自动处理FormData
+    delete fetchOptions.headers['Content-Type'];
+
+    fetchOptions.body = formData;
+
+    return timeoutFetch(fetch(fullUrl, fetchOptions), timeout).then(
+      handleResponse
+    );
+  }
+
   function handleResponse(response) {
     if (!response.ok) {
       if (response.status === 401) {
@@ -69,5 +93,8 @@
     post: function (url, params = {}, options = {}) {
       return request('post', url, params, options);
     },
+    formData: function (url, formData, options = {}) {
+      return requestFormData('post', url, formData, options);
+    },
   };
 })();

package/assets/zz-modal.js

@@ -0,0 +1,418 @@
+/*
+  - Uses <dialog> when available for native a11y and focus management
+  - Shadow DOM for internal styles; slots for user content (tailwind utilities apply to slotted nodes)
+  - Attribute reflection and programmatic API: show(), hide(), toggle()
+  - Options via attributes: close-on-esc, close-on-backdrop, scroll-lock, inert-others
+  - Global open/close triggers: [data-zz-modal-target], [data-zz-modal-close]
+*/
+
+(() => {
+  if (customElements.get('zz-modal')) return;
+
+  const STYLE_TEXT = `
+    :host {
+      position: relative;
+      display: contents; /* do not affect layout where placed */
+    }
+
+    dialog[part="dialog"] {
+      border: none;
+      padding: 0;
+      margin: 0;
+      width: auto;
+      max-width: var(--zz-modal-max-width, 90vw);
+      max-height: var(--zz-modal-max-height, 85vh);
+      background: transparent; /* panel carries background */
+      overflow: visible;
+    }
+
+    /* Backdrop for native <dialog>. */
+    dialog[part="dialog"]::backdrop {
+      background: var(--zz-modal-backdrop, rgba(0,0,0,0.5));
+      backdrop-filter: var(--zz-modal-backdrop-filter, blur(0px));
+    }
+
+    .panel {
+      will-change: transform, opacity;
+      position: fixed;
+      inset: 0;
+      z-index: var(--zz-modal-z-index, 9999);
+      display: grid;
+      place-items: center;
+      pointer-events: none; /* enable backdrop clicks via dialog */
+    }
+
+    .panel-inner {
+      will-change: transform, opacity;
+      pointer-events: auto;
+      background: var(--zz-modal-background, #ffffff);
+      color: inherit;
+      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);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      opacity: 0;
+      transition: none;
+    }
+    @media (min-width: 768px) {
+      .panel-inner {
+        transform-origin: center center;
+        transform: translateY(8px) scale(0.98);
+      }
+    }
+
+    :host([open]) .panel-inner {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    /* 移动端底部抽屉模式 */
+    @media (max-width: 768px) {
+      :host([sheet-on-mobile]) .panel { place-items: end center; }
+      :host([sheet-on-mobile]) .panel-inner {
+        width: var(--zz-sheet-width, 100%);
+        max-width: 100%;
+        border-top-left-radius: var(--zz-modal-radius, 12px);
+        border-top-right-radius: var(--zz-modal-radius, 12px);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        margin: 0;
+        transform: translateY(100%) scale(1);
+      }
+      :host([sheet-on-mobile][open]) .panel-inner { transform: translateY(0) scale(1); }
+      :host([sheet-on-mobile]) .body { padding-bottom: calc(var(--zz-modal-padding, 16px) + env(safe-area-inset-bottom)); }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      .panel-inner {
+        transition: opacity 160ms ease, transform 160ms ease;
+      }
+    }
+
+    .header, .footer {
+      padding: var(--zz-modal-padding, 16px);
+      flex: 0 0 auto;
+    }
+    :host([no-header]) .header, :host([no-header-auto]) .header { display: none; padding: 0; }
+    :host([no-footer]) .footer, :host([no-footer-auto]) .footer { display: none; padding: 0; }
+    .body {
+      padding: var(--zz-modal-padding, 16px);
+      overflow: auto;
+      flex: 1 1 auto;
+    }
+    .close-btn {
+      all: unset;
+      cursor: pointer;
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      width: 32px;
+      height: 32px;
+      border-radius: 9999px;
+      display: grid;
+      place-items: center;
+    }
+    .close-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
+  `;
+
+  const TEMPLATE = document.createElement('template');
+  TEMPLATE.innerHTML = `
+    <dialog part="dialog" aria-modal="true">
+      <div class="panel" part="backdrop">
+        <div class="panel-inner" role="document" part="panel">
+          <button style="z-index: 1000;" class="close-btn" part="close-button" aria-label="Close" data-zz-modal-close>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+          </button>
+          <header class="header" part="header"><slot name="header"></slot></header>
+          <section class="body" part="body"><slot></slot></section>
+          <footer class="footer" part="footer"><slot name="footer"></slot></footer>
+        </div>
+      </div>
+    </dialog>
+  `;
+
+  class ZZModal extends HTMLElement {
+    static get observedAttributes() { return ['open']; }
+
+    constructor() {
+      super();
+      this._onKeydown = this._onKeydown.bind(this);
+      this._onNativeClose = this._onNativeClose.bind(this);
+      this._onMouseDown = this._onMouseDown.bind(this);
+      this._onClick = this._onClick.bind(this);
+      this._previousActive = null;
+      this._mouseDownInsidePanel = false;
+
+      const shadow = this.attachShadow({ mode: 'open' });
+      const style = document.createElement('style');
+      style.textContent = STYLE_TEXT;
+      shadow.appendChild(style);
+      shadow.appendChild(TEMPLATE.content.cloneNode(true));
+
+      this._dialog = shadow.querySelector('dialog');
+      this._panel = shadow.querySelector('.panel-inner');
+      this._closeBtn = shadow.querySelector('[data-zz-modal-close]');
+      this._slotHeader = shadow.querySelector('slot[name="header"]');
+      this._slotFooter = shadow.querySelector('slot[name="footer"]');
+    }
+
+    connectedCallback() {
+      // Delegated internal events
+      this._closeBtn.addEventListener('click', () => this.hide());
+      this._dialog.addEventListener('close', this._onNativeClose);
+      this._dialog.addEventListener('mousedown', this._onMouseDown);
+      this._dialog.addEventListener('click', this._onClick);
+
+      // Reflect open state if attribute present at mount
+      if (this.hasAttribute('open')) {
+        // Defer to ensure upgraded before open
+        queueMicrotask(() => this.show());
+      }
+
+      // Auto hide empty header/footer
+      this._slotHeader.addEventListener('slotchange', () => this._updateSlotVisibility());
+      this._slotFooter.addEventListener('slotchange', () => this._updateSlotVisibility());
+      // Initial
+      this._updateSlotVisibility();
+    }
+
+    disconnectedCallback() {
+      this._dialog.removeEventListener('close', this._onNativeClose);
+      this._dialog.removeEventListener('mousedown', this._onMouseDown);
+      this._dialog.removeEventListener('click', this._onClick);
+      document.removeEventListener('keydown', this._onKeydown);
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (name === 'open' && oldValue !== newValue) {
+        if (this.hasAttribute('open')) {
+          this.show();
+        } else {
+          this.hide();
+        }
+      }
+    }
+
+    get open() { return this._dialog?.open || this.hasAttribute('open'); }
+    set open(val) { if (val) this.setAttribute('open', ''); else this.removeAttribute('open'); }
+
+    show() { this._openInternal(true); }
+    hide() { this._closeInternal(true); }
+    toggle() { this.open ? this.hide() : this.show(); }
+
+    // Aliases
+    showModal() { this.show(); }
+    close() { this.hide(); }
+
+    _emit(name, detail = {}) {
+      this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+
+    _openInternal(emit = false) {
+      if (this._dialog.open) return;
+      this._previousActive = document.activeElement;
+
+      // Scroll lock
+      if (!this.hasAttribute('no-scroll-lock')) {
+        this._lockScroll();
+      }
+
+      // Inert others
+      if (this.hasAttribute('inert-others')) {
+        this._toggleInert(true);
+      }
+
+      // Native dialog path
+      try {
+        if ('showModal' in HTMLDialogElement.prototype) {
+          this._dialog.showModal();
+        } else {
+          // Fallback
+          this._dialog.setAttribute('open', '');
+        }
+      } catch (_) {
+        this._dialog.setAttribute('open', '');
+      }
+
+      // Sync attribute for CSS animations
+      this.setAttribute('open', '');
+
+      // Listeners
+      document.addEventListener('keydown', this._onKeydown);
+
+      // Focus first focusable within panel
+      this._focusInitial();
+
+      if (emit) this._emit('zz-modal:open');
+    }
+
+    _closeInternal(emit = false) {
+      if (!this._dialog.open && !this.hasAttribute('open')) return;
+
+      // Remove listeners
+      document.removeEventListener('keydown', this._onKeydown);
+
+      // Native dialog close
+      try {
+        if (this._dialog.open) this._dialog.close();
+      } catch (_) {
+        // ignore
+      }
+      this.removeAttribute('open');
+
+      // Restore scroll and inert
+      if (!this.hasAttribute('no-scroll-lock')) {
+        this._unlockScroll();
+      }
+      if (this.hasAttribute('inert-others')) {
+        this._toggleInert(false);
+      }
+
+      // Restore focus
+      if (this._previousActive && typeof this._previousActive.focus === 'function') {
+        this._previousActive.focus({ preventScroll: true });
+      }
+      this._previousActive = null;
+
+      if (emit) this._emit('zz-modal:close');
+    }
+
+    _onKeydown(e) {
+      const escAllowed = !this.hasAttribute('no-esc-close');
+      if (e.key === 'Escape' && escAllowed) {
+        e.stopPropagation();
+        this.hide();
+      }
+
+      // Basic focus trap for fallback scenario
+      if (e.key === 'Tab' && !('showModal' in HTMLDialogElement.prototype)) {
+        const focusables = this._getFocusable();
+        if (focusables.length === 0) return;
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        const active = this.shadowRoot.activeElement || document.activeElement;
+        if (e.shiftKey) {
+          if (active === first || !this.contains(active)) {
+            e.preventDefault();
+            last.focus();
+          }
+        } else {
+          if (active === last || !this.contains(active)) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+      }
+    }
+
+    _onNativeClose() {
+      // Ensure attribute sync and cleanup
+      this._closeInternal(true);
+    }
+
+    _onMouseDown(e) {
+      // Track whether mousedown originated inside the panel to differentiate drags
+      const path = e.composedPath();
+      this._mouseDownInsidePanel = path.includes(this._panel);
+    }
+
+    _onClick(e) {
+      const backdropClose = !this.hasAttribute('no-backdrop-close');
+      if (!backdropClose) return;
+
+      // If click ended outside panel and started outside panel -> treat as backdrop click
+      const path = e.composedPath();
+      const clickInsidePanel = path.includes(this._panel);
+      if (!clickInsidePanel && !this._mouseDownInsidePanel) {
+        this.hide();
+      }
+      this._mouseDownInsidePanel = false;
+    }
+
+    _updateSlotVisibility() {
+      try {
+        const hasHeader = (this._slotHeader.assignedNodes({ flatten: true }).filter(n => n.nodeType === 1 || (n.nodeType === 3 && n.textContent.trim())).length) > 0;
+        const hasFooter = (this._slotFooter.assignedNodes({ flatten: true }).filter(n => n.nodeType === 1 || (n.nodeType === 3 && n.textContent.trim())).length) > 0;
+        if (!hasHeader) this.setAttribute('no-header-auto', ''); else this.removeAttribute('no-header-auto');
+        if (!hasFooter) this.setAttribute('no-footer-auto', ''); else this.removeAttribute('no-footer-auto');
+      } catch (_) {
+        // ignore
+      }
+    }
+
+    _getFocusable() {
+      const root = this.shadowRoot;
+      const within = root.querySelector('.panel-inner');
+      return Array.from(within.querySelectorAll([
+        'a[href]','area[href]','input:not([disabled])','select:not([disabled])','textarea:not([disabled])',
+        'button:not([disabled])','iframe','object','embed','[contenteditable]','[tabindex]:not([tabindex="-1"])'
+      ].join(',')));
+    }
+
+    _focusInitial() {
+      const focusables = this._getFocusable();
+      if (focusables.length > 0) {
+        focusables[0].focus({ preventScroll: true });
+      } else {
+        // Focus the dialog so that ESC works consistently
+        this._dialog.focus({ preventScroll: true });
+      }
+    }
+
+    _lockScroll() {
+      const body = document.body;
+      this._prevBodyOverflow = body.style.overflow;
+      body.style.overflow = 'hidden';
+      body.setAttribute('data-zz-modal-open', '');
+    }
+
+    _unlockScroll() {
+      const body = document.body;
+      body.style.overflow = this._prevBodyOverflow || '';
+      body.removeAttribute('data-zz-modal-open');
+    }
+
+    _toggleInert(isInert) {
+      const toInert = [];
+      const root = document.body;
+      for (const child of Array.from(root.children)) {
+        if (child === this.parentElement) continue;
+        toInert.push(child);
+      }
+      toInert.forEach((el) => {
+        if (isInert) el.setAttribute('inert', ''); else el.removeAttribute('inert');
+      });
+    }
+  }
+
+  customElements.define('zz-modal', ZZModal);
+
+  // Global open/close triggers
+  document.addEventListener('click', (e) => {
+    const openTrigger = e.target.closest('[data-zz-modal-target]');
+    if (openTrigger) {
+      const selector = openTrigger.getAttribute('data-zz-modal-target');
+      if (selector) {
+        const modal = document.querySelector(selector);
+        if (modal && modal.show) {
+          e.preventDefault();
+          modal.show();
+        }
+      }
+      return;
+    }
+    const closeTrigger = e.target.closest('[data-zz-modal-close]');
+    if (closeTrigger) {
+      const hostModal = closeTrigger.closest('zz-modal');
+      if (hostModal && hostModal.hide) {
+        e.preventDefault();
+        hostModal.hide();
+      }
+    }
+  }, { capture: true });
+})();
+
+

package/blocks/zz-button.liquid

@@ -9,6 +9,16 @@
       "label": "按钮文字",
       "default": "按钮"
     },
+    {
+      "type": "text",
+      "id": "btn_id",
+      "label": "按钮id属性值",
+    },
+    {
+      "type": "text",
+      "id": "modal_id",
+      "label": "按钮触发modal的id",
+    },
     {
       "type": "select",
       "id": "function_type",
@@ -188,7 +198,9 @@
   icon_left_margin: block.settings.icon_left_margin,
   icon_right_margin: block.settings.icon_right_margin,
   width: block.settings.mobile_width,
-  class_name: btn_class
+  class_name: btn_class,
+  btn_id: block.settings.btn_id,
+  modal_id: block.settings.modal_id
 %}