├── CHANGE.txt
├── LICENSE
├── README-cn.md
├── README-en.md
├── README.md
├── css
├── README.md
└── atomic-css-rules.txt
├── dist
├── index.html
├── preview.html
├── res
│ ├── html.min.js
│ ├── moloader.min.js
│ ├── polyfill.js
│ ├── sdrag.min.js
│ ├── split.css
│ ├── split.js
│ ├── style.css
│ └── uglifyjs.js
├── z-data.min.all.js
├── z-data.min.es2015.js
├── z-data.min.js
└── z-minifier.min.js
├── hello-world.html
├── package.json
├── src
└── z-data.js
└── www
├── favicon.ico
└── index.html
/CHANGE.txt:
--------------------------------------------------------------------------------
1 |
2 | 2023-09-09
3 | * json2css()
4 | + filter, backdrop-filter
5 |
6 | 2023-09-08
7 | * json2css()
8 | + transform
9 |
10 | 2023-04-07
11 | dist for
12 | Chrome 49, Firefox 44, Opera 36, iOS 10, Android 7
13 |
14 | - z-data.js, z-data.min.js
15 | 2017: Chrome 61, Firefox 55, Opera 48
16 |
17 | - z-data.min.es2015.js, z-data.min.all.js
18 | 2016: Chrome 49, Firefox 44, Opera 36, iOS 10, Android 7
19 |
20 | 2023-04-06
21 | Chrome 61+, Firefox 55+, Opera 48+, ES2018
22 |
23 | - z-data.min.es2015.js
24 | Chrome 49+, Firefox 44+, Opera 36+, iOS 10+, Android 7+
25 | - z-data.min.all.js
26 | Chrome 49+, Firefox 47+, Opera 36+, iOS 10+, Android 7+
27 | - z-data.min.all.es5.js
28 | Chrome 49+, Firefox 43+, Opera 36+, iOS 10+, Android 7+
29 |
30 | 2023-03-31
31 | * z-data.min.all.es5.js
32 | Chrome 49+, Firefox 43+, Opera 36+, iOS 10+, Android 6+
33 |
34 | 2023-03-29
35 | * z-data.min.all.js for es2015 (es6)
36 | Chrome 54+, Firefox 50+, Opera 41+, iOS 10+, Android 7+
37 |
38 | 2022-11-06
39 | * setAttrs.fn()
40 | + , ps.k ? nil : 1
41 | supports z-d- inner closure function
42 |
43 | 2022-11-05
44 | * tryEval()
45 | exp && ...
46 | * setAttrs.fn()
47 | + , ps.k || (ps.e = nil)
48 | call only once (for z-d-...)
49 |
50 | 2022-10-30
51 | + custom directive, z-d-...=...
52 | * re_bind, re_attr, setAttrs()
53 |
54 | 2022-10-17
55 | * :! and .attr
56 | ps.A
57 |
58 | 2022-10-16
59 | + syntax sugar to .attr
60 | :!tag-attr -> :tag-attr.attr
61 | ::!tag-attr -> ::tag-attr.attr
62 |
63 | 2022-10-15
64 | * goAnode()/146,+147
65 | support template in svg
66 |
67 | 2022-09-09
68 | + .deb(fn, ms), debounce
69 |
70 | 2022-08-13
71 | * fix @xxx.out
72 |
73 | 2022-08-03
74 | * fix bug for empty z-data file
75 |
76 | 2022-05-16
77 | * Object.keys(...).forEach -> for (...in...)
78 |
79 | 2022-05-07
80 | * cb.i --Date.now()-> Math.random()
81 |
82 | 2022-05-06
83 | * loadHTML()
84 | * fix for style local (ignore list)
85 |
86 | 2022-04-26
87 | * expand()
88 | * template use (else)
89 | DONT cache
90 |
91 | 2022-04-15
92 | + attr handler (ZData.ss(name, value))
93 | attr atomic css on demand
94 |
95 | * setEvent()
96 | event this -> current element (from e.target)
97 | + atomic css rules
98 |
99 | 2022-04-11
100 | * setValue(), fix issue for .xxx-=yyy
101 |
102 | 2022-04-10
103 | * observe(), fix issue
104 |
105 | 2022-04-09
106 | * loadHTML() and start()
107 | load / start optimized
108 | * goFor()
109 | fix - key DUPLICATE !!!
110 | * goAnode() and setAttrs()
111 | fix - nodeCache[]
112 |
113 | 2022-04-08
114 | + $emit(el, name, detail)
115 | * liteProxy
116 | performance optimized
117 |
118 | 2022-04-06
119 | * ZData.ss(s) for style shorthand
120 | -> compile time
121 |
122 | 2022-04-05
123 | + ZData.ss(s) for style shorthand
124 |
125 | 2022-04-03
126 | * loadHTML()
127 | * fix bug for style local (ignore list)
128 | prefix with @, \d%
129 |
130 | 2022-04-02
131 | * loadHTML()
132 | insert HTML after all .js on load
133 | load js with ZData.get()
134 |
135 | 2022-03-28
136 | * z-data html module
137 | - remove z-data=$... support
138 | + export default {...} --replaced-> return {...}
139 |
140 | 2022-03-27
141 | * z-data expression
142 | can be a function expression
143 | * initComponent() and tryEval()
144 | + z-data html module (begin with z-data)
145 | * loadHTML()
146 |
147 | 2022-03-25
148 | * setAttrs().fn() for *
149 |
150 | 2022-03-19
151 | * function events
152 | fns: {
153 | fn($el) {
154 | event // the event ctx
155 | this // the event element
156 | $el // z-data root element
157 | }
158 | }
159 |
160 | 2022-03-12
161 | * z-json
162 | onStringify(), {} --changed-> new WeakMap()
163 | + json2css()
164 |
165 | 2022-03-11
166 | * z-json
167 | onStringify(), duplicate object ignored
168 |
169 | 2022-03-07
170 | * z-json
171 | + qs2json(), json2qs()
172 |
173 | 2022-03-04
174 | * liteProxy
175 | + proxy chain back again
176 | ! proxy chain + cbs
177 | * loadHTML()
178 | load script one by one
179 |
180 | 2022-03-03
181 | * liteProxy
182 | + delete data-aware
183 | delete obj[prop];
184 |
185 | 2022-03-01
186 | + z-pen\to-es2015.fun
187 |
188 | 2022-02-28
189 | * template use
190 | DONT cache
191 | * goIf(), expand()
192 |
193 | 2022-02-27
194 | * liteProxy
195 | * CHANGE proxy chain (proxy -> proxy... -> target) TO proxy handler.cs [cb1, cb2...]
196 |
197 | 2022-02-24
198 | * goNodes()
199 | * cbIf(args) -> cbIf(el)
200 | * goFor()
201 | + goNodes() before insert
202 |
203 | 2022-01-26
204 | * ES2018 => ES2015
205 | * { ...x, y, z: z } => Object.assign({}, x, {y , z: z})
206 | (\{)[\s\r\n]*\.\.\.([\w.]+),?\s*(([^{}]+|\{[^{}]+\})*\})
207 | ->
208 | Object.assign({},$2,$1$3)
209 |
210 | - z-data.min.es2015.js
211 |
212 | Chrome 54+, Firefox 50+, Opera 41+
213 |
214 | 2021-10-22
215 | * setAttrs(), dynamic props/attrs/events supported
216 | :*={...}
217 | :*.attr={...}
218 | @*={...}
219 |
220 | 2021-10-21
221 | * expand()
222 | * re_modifiers / setEvent()
223 | * .away -> .out
224 | - .super
225 |
226 | 2021-10-15
227 | * setValue()
228 | value: undefined -> ""
229 |
230 | 2021-10-12
231 | + unit to .number (input)
232 |
233 | 2021-09-28
234 | * fix bug for :: changed value not in vs[i] cache
235 |
236 | 2021-09-22
237 | * fix bug for key event (autocomplete list)
238 |
239 | 2021-09-15
240 | - remove :xxx.attr .bool
241 | :xxx.attr.bool -> :xxx.attr (removeAttribute when false)
242 |
243 | 2021-09-13
244 | * load z-comp (fix bug for fetch twice)
245 |
246 | 2021-09-12
247 | + .on(name, fn)
248 | + .call(name, args)
249 |
250 | 2021-09-10
251 | * remove z-data string (to el._z) after init
252 | * remove bind attrs after init
253 |
254 | 2021-09-09
255 | * loadHTML()
256 | replace scope of style for scoped [z-i...
257 |
258 | 2021-09-08~09
259 | * loadHTML()
260 | ignore scope style for scoped [z-i...
261 |
262 | 2021-09-08
263 | + modifier bool, for .attr modifier
264 | :xxx.attr.bool xxx is a boolean attribute
265 |
266 | 2021-09-05
267 | * loadHTML()
268 |
74 | ```
75 |
76 | ## 2.1. z-data studio
77 |
78 | 可以在线创建/调试/预览 z-data 代码
79 |
80 | * https://funlang.org/z-data/
81 |
82 | # 3. 用法
83 |
84 | ## 3.1. 安装
85 |
86 | - CDN https://cdn.jsdelivr.net/gh/Funlang/z-data@main/dist/z-data.min.js
87 |
88 | ```html
89 |
90 | ```
91 |
92 | ## 3.2. 作用域
93 |
94 | - z-data 属性创建 ZData 作用域
95 |
96 | ```html
97 |
98 | ```
99 | z-data 支持一个 init 函数, 在组件初始化时执行
100 |
101 | ```html
102 |
103 | ```
104 |
105 | z-data 表达式可以是一个函数表达式, 如:
106 |
107 | ```html
108 |
114 |
115 |
121 | ```
122 |
123 | z-data HTML 模块文件 (文件开头是 z-data)
124 |
125 | ```html
126 | z-data
127 |
128 |
129 |
135 | ```
136 |
137 | - z-none 关闭 ZData 作用域, 其内部节点 ZData 会跳过
138 |
139 | ```html
140 |
141 | ...
142 |
143 | ```
144 |
145 | - 与其他框架共存
146 |
147 | 在 ZData 根节点用类似以下的方式处理 (x-ignore 改为其他框架关闭作用域的属性名)
148 | ```html
149 |
150 | ```
151 | 在其他框架根节点加 z-none 即可
152 |
153 | ## 3.3. 模板
154 |
155 | - template for
156 |
157 | ```html
158 |
159 | ```
160 | ZData 依赖 key, 如果没有指定 key, 则优先选用 k 做 key, 否则用 v 做 key 键
161 | k : v , i 可以部分可选, 如:
162 |
163 | ```html
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 | ```
172 |
173 | - template if/else
174 |
175 | ```html
176 |
177 |
178 |
179 | ```
180 |
181 | - template use
182 |
183 | ```html
184 |
185 |
186 | template id = t1
187 |
188 |
189 |
190 |
191 | ```
192 |
193 | ## 3.4. 绑定
194 |
195 | - : 用来做属性绑定, 其中 :: 是双向绑定
196 |
197 | ```html
198 |
199 | ```
200 |
201 | ### 3.4.1. :text :html
202 |
203 | :text :html 分别对应 textContent 和 innerHTML
204 |
205 | ### 3.4.2. :class
206 |
207 | :class 支持 [] {} 和 字符串三种, 这些 classname 会按顺序合并处理
208 |
209 | ### 3.4.3. :class 简写
210 |
211 | :class 支持 :class.name1.name2=...
212 | ```
213 | 可以简写为 .name1.name2=...
214 | 如果 classname 后面为 -, 且返回值不是 boolean, 则将其值加入到 classname, 如:
215 | .p-=1 则 classList 里会增加 p-1
216 | ```
217 |
218 | ### 3.4.4. :style
219 |
220 | :style 支持 :css 别名, 支持 {} 和字符串两种, 字符串会按顺序覆盖
221 |
222 | ### 3.4.5. :style 简写
223 |
224 | :style 支持 :style.name.value=...
225 | ```
226 | :style.name=value / :css.name=value
227 | :style.name.value=条件 / :css.name.value=...
228 | 可以简写为 ..name 和 #name, 以及 !name=string-value, 如下:
229 | ..width=`100px`
230 | #border-width=`4px`
231 | !border-width=4px
232 | #--a-css-var=`'${theCssVarValue}'`
233 | ```
234 |
235 | #### 3.4.5.1 ZData.ss(s)
236 |
237 | ```
238 | ZData.ss = (s) => AShorthandMap[s] || s;
239 | ```
240 |
241 | ### 3.4.6. !!! 特别注意
242 |
243 | #### 3.4.6.1. : :: @ . .. \#
244 |
245 | 后面的值全部都是 js 表达式, 可以是 js 变量, 或者是字符串, 字符串要用 ' " ` 套住
246 |
247 | #### 3.4.6.2. ${...}
248 |
249 | 非绑定的属性值中含有 \${...}, 会自动解析成一个字符串, 相当于 \`...${...}...`
250 |
251 | #### 3.4.6.3. !
252 |
253 | ! 与 含有 ${} 的属性值类似, 会自动解析成 :css.style-name=\`string-value`
254 |
255 | ### 3.4.7. attr
256 |
257 | :xxx.attr 表示为可视 attribute 属性, 否则默认为不可见 prop 属性
258 |
259 | :xxx.attr === false 表示为 boolean attribute 属性
260 |
261 | #### 3.4.7.1. attr 简写
262 | ```
263 | :!tag-attr -> :tag-attr.attr
264 | ::!tag-attr -> ::tag-attr.attr
265 | ```
266 | ### 3.4.8. camel
267 |
268 | :xxx.camel 支持驼峰表示法
269 |
270 | ::value=propName, ::style.value=propName, ::css.value=propName
271 | ```
272 | 其中 propName 只支持驼峰表示法, DOM 属性(包括 style)可以增加 .camel 修饰符
273 | 双向绑定默认在 change 中触发回写行为, 只有 input text 同时在 input 中触发回写
274 | 可以增加 .input / .change 强制在 input / change 中回写
275 | 支持 .trim / .number 修饰符
276 | ```
277 | ```
278 | 目前有些属性如 style.value 修改, 不会自动触发响应式, 需要在当前执行 el 执行 el.fireChange()
279 | ```
280 |
281 | ### 3.4.9. input type='radio'
282 | ```
283 | ::checked=opt==this.value
284 |
285 | 注: opt 是一个 data 内的属性变量名
286 | ```
287 |
288 | ## 3.5. 事件
289 |
290 | @ 用来绑定事件, 支持 modifiers
291 |
292 | ### 3.5.1. 全局
293 |
294 | ```
295 | camel 事件名驼峰表示法
296 | prevent preventDefault
297 | stop stopPropagation
298 | debounce debounce mode, follow a time optional, such as
299 | debounce.750ms, debounce.2s, default 250ms
300 | capture capture mode
301 | once once mode, run once only
302 | passive passive mode
303 | ```
304 |
305 | ### 3.5.2. 范围
306 |
307 | ```
308 | self tag only
309 | out tag not
310 | window
311 | document
312 | ```
313 |
314 | ### 3.5.3. 键鼠
315 |
316 | ```
317 | shift
318 | ctrl
319 | alt
320 | meta or cmd
321 | ```
322 |
323 | ### 3.5.4. 键盘
324 | ```
325 | enter, escape, space, f1 etc., details refer to:
326 | https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
327 | alias: space: " ", slash: /, gt: >, eq: =
328 | ```
329 |
330 | ### 3.5.5. 鼠标
331 | ```
332 |