zz-shopify-components 0.3.1-beta.6 → 0.3.1-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/zz-modal.js +26 -3
- package/package.json +1 -1
- package/sections/zz-modal.liquid +24 -14
package/assets/zz-modal.js
CHANGED
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.panel {
|
|
36
|
+
will-change: transform, opacity;
|
|
36
37
|
position: fixed;
|
|
37
38
|
inset: 0;
|
|
38
39
|
z-index: var(--zz-modal-z-index, 9999);
|
|
@@ -42,27 +43,49 @@
|
|
|
42
43
|
}
|
|
43
44
|
|
|
44
45
|
.panel-inner {
|
|
46
|
+
will-change: transform, opacity;
|
|
45
47
|
pointer-events: auto;
|
|
46
48
|
background: var(--zz-modal-background, #ffffff);
|
|
47
49
|
color: inherit;
|
|
48
50
|
border-radius: var(--zz-modal-radius, 12px);
|
|
49
51
|
box-shadow: var(--zz-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));
|
|
50
52
|
width: var(--zz-modal-width, min(720px, 92vw));
|
|
51
|
-
max-height: var(--zz-modal-max-height,
|
|
53
|
+
max-height: var(--zz-modal-max-height, 90vh);
|
|
52
54
|
display: flex;
|
|
53
55
|
flex-direction: column;
|
|
54
56
|
overflow: hidden;
|
|
55
|
-
transform-origin: center center;
|
|
56
57
|
opacity: 0;
|
|
57
|
-
transform: translateY(8px) scale(0.98);
|
|
58
58
|
transition: none;
|
|
59
59
|
}
|
|
60
|
+
@media (min-width: 768px) {
|
|
61
|
+
.panel-inner {
|
|
62
|
+
transform-origin: center center;
|
|
63
|
+
transform: translateY(8px) scale(0.98);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
60
66
|
|
|
61
67
|
:host([open]) .panel-inner {
|
|
62
68
|
opacity: 1;
|
|
63
69
|
transform: translateY(0) scale(1);
|
|
64
70
|
}
|
|
65
71
|
|
|
72
|
+
/* 移动端底部抽屉模式 */
|
|
73
|
+
@media (max-width: 768px) {
|
|
74
|
+
:host([sheet-on-mobile]) .panel { place-items: end center; }
|
|
75
|
+
:host([sheet-on-mobile]) .panel-inner {
|
|
76
|
+
width: var(--zz-sheet-width, 100%);
|
|
77
|
+
max-width: 100%;
|
|
78
|
+
border-top-left-radius: var(--zz-modal-radius, 12px);
|
|
79
|
+
border-top-right-radius: var(--zz-modal-radius, 12px);
|
|
80
|
+
border-bottom-left-radius: 0;
|
|
81
|
+
border-bottom-right-radius: 0;
|
|
82
|
+
margin: 0;
|
|
83
|
+
transform: translateY(100%) scale(1);
|
|
84
|
+
}
|
|
85
|
+
:host([sheet-on-mobile][open]) .panel-inner { transform: translateY(0) scale(1); }
|
|
86
|
+
:host([sheet-on-mobile]) .body { padding-bottom: calc(var(--zz-modal-padding, 16px) + env(safe-area-inset-bottom)); }
|
|
87
|
+
}
|
|
88
|
+
|
|
66
89
|
@media (prefers-reduced-motion: no-preference) {
|
|
67
90
|
.panel-inner {
|
|
68
91
|
transition: opacity 160ms ease, transform 160ms ease;
|
package/package.json
CHANGED
package/sections/zz-modal.liquid
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
}
|
|
16
16
|
</style>
|
|
17
17
|
|
|
18
|
-
<zz-modal {% 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 %}>
|
|
18
|
+
<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 %}>
|
|
19
19
|
{% if section.settings.show_header %}
|
|
20
20
|
<div slot="header" class="tw-text-[24px] tw-font-semibold">{{ section.settings.header_text }}</div>
|
|
21
21
|
{% endif %}
|
|
@@ -56,24 +56,39 @@
|
|
|
56
56
|
"label": "显示 Header",
|
|
57
57
|
"default": false
|
|
58
58
|
},
|
|
59
|
+
{
|
|
60
|
+
"type": "text",
|
|
61
|
+
"id": "header_text",
|
|
62
|
+
"label": "弹窗标题",
|
|
63
|
+
"visible_if": "{{ section.settings.show_header }}",
|
|
64
|
+
"default": "弹窗标题"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"type": "checkbox",
|
|
68
|
+
"id": "sheet_on_mobile",
|
|
69
|
+
"label": "移动端变为底部抽屉模式",
|
|
70
|
+
"default": true
|
|
71
|
+
},
|
|
59
72
|
{
|
|
60
73
|
"type": "checkbox",
|
|
61
74
|
"id": "show_footer",
|
|
62
75
|
"label": "显示 Footer",
|
|
63
76
|
"default": false
|
|
64
77
|
},
|
|
78
|
+
{
|
|
79
|
+
"type": "text",
|
|
80
|
+
"id": "footer_text",
|
|
81
|
+
"label": "弹窗底部按钮文案",
|
|
82
|
+
"visible_if": "{{ section.settings.show_footer }}",
|
|
83
|
+
"default": "Close"
|
|
84
|
+
},
|
|
65
85
|
{
|
|
66
86
|
"type": "checkbox",
|
|
67
87
|
"id": "no_backdrop_close",
|
|
68
88
|
"label": "是否禁用遮罩点击关闭",
|
|
69
89
|
"default": false
|
|
70
90
|
},
|
|
71
|
-
|
|
72
|
-
"type": "text",
|
|
73
|
-
"id": "header_text",
|
|
74
|
-
"label": "弹窗标题",
|
|
75
|
-
"default": "弹窗标题"
|
|
76
|
-
},
|
|
91
|
+
|
|
77
92
|
{
|
|
78
93
|
"type": "text",
|
|
79
94
|
"id": "width_mobile",
|
|
@@ -121,13 +136,8 @@
|
|
|
121
136
|
"max": 64,
|
|
122
137
|
"step": 2,
|
|
123
138
|
"default": 20
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
"type": "text",
|
|
127
|
-
"id": "footer_text",
|
|
128
|
-
"label": "弹窗底部按钮文案",
|
|
129
|
-
"default": "Close"
|
|
130
|
-
}
|
|
139
|
+
}
|
|
140
|
+
|
|
131
141
|
],
|
|
132
142
|
"blocks": [
|
|
133
143
|
{
|