vsn 0.1.83 → 0.1.84
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/demo/demo.html +35 -190
- package/demo/vsn.js +2 -2
- package/dist/AST/ElementAttributeNode.js +20 -6
- package/dist/AST/ElementAttributeNode.js.map +1 -1
- package/dist/Component.js +1 -0
- package/dist/Component.js.map +1 -1
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +1 -1
- package/src/AST/ElementAttributeNode.ts +10 -2
- package/src/Component.ts +2 -0
- package/src/version.ts +1 -1
- package/test/AST/ClassNode.spec.ts +0 -1
- package/dist/vsn.min.js +0 -3
- package/dist/vsn.min.js.LICENSE.txt +0 -9
package/demo/demo.html
CHANGED
|
@@ -82,202 +82,47 @@
|
|
|
82
82
|
</head>
|
|
83
83
|
<body>
|
|
84
84
|
|
|
85
|
-
<template vsn-component:
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
85
|
+
<template vsn-component:form-control-errors>
|
|
86
|
+
<span>Errors</span>
|
|
87
|
+
<ul></ul>
|
|
88
|
+
</template>
|
|
89
|
+
|
|
90
|
+
<template vsn-component:product-option>
|
|
91
|
+
<script type="text/vsn" vsn-script>
|
|
92
|
+
class product-option {
|
|
93
|
+
func construct() {
|
|
94
|
+
option = ?>([name])[0].@name;
|
|
95
|
+
log('option', option);
|
|
96
|
+
?>(form-control-errors).@for = option;
|
|
97
|
+
log('errors', ?>(form-control-errors));
|
|
98
|
+
}
|
|
98
99
|
|
|
99
|
-
class
|
|
100
|
+
class [slot=option] {
|
|
100
101
|
func construct() {
|
|
101
102
|
|
|
102
103
|
}
|
|
103
|
-
|
|
104
|
-
on click() {
|
|
105
|
-
@class ~ 'huh';
|
|
106
|
-
}
|
|
107
104
|
}
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
class .huh {
|
|
111
|
-
func construct() {
|
|
112
|
-
log('construct');
|
|
113
|
-
$color = "#ff00ff";
|
|
114
105
|
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
<
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
</template>
|
|
136
|
-
|
|
137
|
-
<div>
|
|
138
|
-
<textarea id="example-code" rows="10" cols="50"></textarea>
|
|
139
|
-
<div id="example-output" vsn-bind:@html="#example-code.@value"></div>
|
|
140
|
-
</div>
|
|
141
|
-
|
|
142
|
-
<template vsn-template id="query-operator-example-item">
|
|
143
|
-
<li vsn-list-item>
|
|
144
|
-
<span vsn-if="'active' in ?>(:parent).@class">active</span>
|
|
145
|
-
<span vsn-if:not="'active' not in ?>(:parent).@class">inactive</span>
|
|
146
|
-
<button vsn-on:click="?>(:parent).@class += 'active'">+</button>
|
|
147
|
-
<button vsn-on:click="?>(:parent).@class -= 'active'">-</button>
|
|
148
|
-
<button vsn-on:click="?>(:parent).@class ~ 'active'">~</button>
|
|
149
|
-
</li>
|
|
150
|
-
</template>
|
|
151
|
-
|
|
152
|
-
<div id="test-container"></div>
|
|
153
|
-
<a href="./markup.html" vsn-on:click|preventdefault="#test-container.@html = << @href">Fill Container</a>
|
|
154
|
-
<a vsn-on:click|preventdefault="#test-container.@html = ''">Clear Container</a>
|
|
155
|
-
|
|
156
|
-
<h2>On Click</h2>
|
|
157
|
-
<div vsn-name="toggle" vsn-set:show|boolean="false">
|
|
158
|
-
<button class="test-class" vsn-on:click="toggle.show = !toggle.show" vsn-exec="on click() {@class -= 'test-class';log('uh', @class);}">Toggle</button>
|
|
159
|
-
<span vsn-bind="toggle.show"></span>
|
|
160
|
-
</div>
|
|
161
|
-
<a id="click-test" vsn-on:click="if(@text != @clicktext){@text=@clicktext}else{@text='Click Me'}" clicktext="Clicked!">Click Me</a>
|
|
162
|
-
|
|
163
|
-
<h2>? Operator</h2>
|
|
164
|
-
<p>Add/remove class to list of elements on click.</p>
|
|
165
|
-
<p id="toggle-container" vsn-exec="toggles = ?(#list-add-remove-class-example li)">
|
|
166
|
-
<button vsn-on:click="?(#list-add-remove-class-example li).@class += 'active'">Add</button> <button vsn-on:click="?(#list-add-remove-class-example li).@class -= 'active'">Remove</button> <button vsn-on:click="?(#list-add-remove-class-example li).@class ~ 'active'">Toggle</button>
|
|
167
|
-
<ul id="list-add-remove-class-example" vsn-list initial-items="5" template="?(#query-operator-example-item)"></ul>
|
|
168
|
-
</p>
|
|
169
|
-
|
|
170
|
-
<h2>@ Operator</h2>
|
|
171
|
-
<p></p>
|
|
172
|
-
<p>
|
|
173
|
-
<input type="text" value="testing" id="at-attribute" /> <input type="button" vsn-on:click="?(#at-attribute).@type = 'password'" value="Button" /> <input type="button" vsn-on:click="?(#at-attribute).@type = 'text'" value="Button" />
|
|
174
|
-
</p>
|
|
175
|
-
|
|
176
|
-
<p>Bind to window attributes. </p>
|
|
177
|
-
<p>window.scrollX,Y <span vsn-bind="?(window).@scrollX"></span>, <span vsn-bind="?(window).@scrollY"></span></p>
|
|
178
|
-
|
|
179
|
-
<h2>Attribute Binding</h2>
|
|
180
|
-
<a href="/index.html" id="link" vsn-name="link_test">Home</a>
|
|
181
|
-
<input type="text" vsn-bind="#link.@text"/>
|
|
182
|
-
<input type="text" vsn-bind="#link.@href"/>
|
|
183
|
-
|
|
184
|
-
<h2>Attribute Formatters</h2>
|
|
185
|
-
<h3>Currency</h3>
|
|
186
|
-
<span vsn-bind="currency_format" vsn-type:currency_format="float" vsn-format="currency" id="formatter">1.5</span>
|
|
187
|
-
<input type="text" vsn-bind="#formatter.currency_format" />
|
|
188
|
-
<br />
|
|
189
|
-
<h3>Date</h3>
|
|
190
|
-
<span vsn-bind="date_format" vsn-type:date_format="date" vsn-format="date" id="date-formatter">Aug 11, 2021 01:03:00 PM PDT</span>
|
|
191
|
-
<input type="text" vsn-bind:|to="?(#date-formatter).date_format" />
|
|
192
|
-
<input type="text" vsn-on:keyup="?(#date-formatter).date_format = $value" value="Aug 11, 2021 01:03:00 PM PDT" />
|
|
193
|
-
|
|
194
|
-
<h2>$ Operator</h2>
|
|
195
|
-
<p></p>
|
|
196
|
-
<p>
|
|
197
|
-
<input type="text" vsn-bind="$marginTop" id="style-attribute" /> <input type="button" vsn-on:click="?(#style-attribute).$marginTop = $padding;$padding += 1px" vsn-on:contextmenu|preventdefault="$padding -= 1px" value="Button" /> <input type="button" vsn-on:click="?(#style-attribute).$marginTop = '0'" value="Button" />
|
|
198
|
-
</p>
|
|
199
|
-
|
|
200
|
-
<h2>Conditional Elements</h2>
|
|
201
|
-
<button vsn-on:click="show = !show">Toggle</button>
|
|
202
|
-
<span vsn-if="show">Show is true</span>
|
|
203
|
-
<span vsn-if="!show">Show is false</span>
|
|
204
|
-
|
|
205
|
-
<h2>Controllers</h2>
|
|
206
|
-
<div vsn-controller:controller="Controller">
|
|
207
|
-
<span vsn-if="controller.on">It's on!</span>
|
|
208
|
-
<span vsn-if="!controller.on">It's off...</span>
|
|
209
|
-
<a href="/" vsn-on:click="controller.doSomething($event, !controller.on)">Click Me</a>
|
|
210
|
-
</div>
|
|
211
|
-
|
|
212
|
-
<h2>Lists</h2>
|
|
213
|
-
<div vsn-controller:test="TestController" id="testing">
|
|
214
|
-
<h3>Value: <span vsn-bind="test.name">Testing</span> <span vsn-bind="test.age">32</span></h3>
|
|
215
|
-
<input type="text" vsn-bind="test.name"/>
|
|
216
|
-
<input type="text" vsn-bind="test.age"/>
|
|
217
|
-
<button vsn-on:click="test.reset()" vsn-if="test.name">Reset</button>
|
|
218
|
-
<button vsn-on:click="test.add();">Add New List Item</button>
|
|
219
|
-
<ul vsn-list:test.items vsn-list-item-model="TestItem" vsn-name="list">
|
|
220
|
-
<li vsn-list-item>
|
|
221
|
-
<span vsn-bind="item.name">Tom</span>, <span vsn-bind="item.age">22</span> Years Old <input type="text"
|
|
222
|
-
vsn-bind="item.name"/>
|
|
223
|
-
<input type="text" vsn-bind="item.age"/>
|
|
224
|
-
<button vsn-on:click="item.reset()">R</button>
|
|
225
|
-
<button vsn-on:click="list.remove(item)">X</button>
|
|
226
|
-
</li>
|
|
227
|
-
<li vsn-list-item>
|
|
228
|
-
<span vsn-bind="item.name">Steve</span>, <span vsn-bind="item.age">46</span> Years Old <input type="text"
|
|
229
|
-
vsn-bind="item.name"/>
|
|
230
|
-
<input type="text" vsn-bind="item.age"/>
|
|
231
|
-
<button vsn-on:click="item.reset()">R</button>
|
|
232
|
-
<button vsn-on:click="list.remove(item)">X</button>
|
|
233
|
-
</li>
|
|
234
|
-
<li vsn-list-item>
|
|
235
|
-
<span vsn-bind="item.name">Frank</span>, <span vsn-bind="item.age">31</span> Years Old <input type="text"
|
|
236
|
-
vsn-bind="item.name"/>
|
|
237
|
-
<input type="text" vsn-bind="item.age"/>
|
|
238
|
-
<button vsn-on:click="item.reset()">R</button>
|
|
239
|
-
<button vsn-on:click="list.remove(item)">X</button>
|
|
240
|
-
</li>
|
|
241
|
-
<li vsn-list-item>
|
|
242
|
-
<span vsn-name="wut" vsn-set:wut.test="1">Wut</span>
|
|
243
|
-
<span vsn-bind="item.name">Joe</span>, <span vsn-bind="item.age">91</span> Years Old <input type="text"
|
|
244
|
-
vsn-bind="item.name"/>
|
|
245
|
-
<input type="text" vsn-bind="item.age"/>
|
|
246
|
-
<button vsn-on:click="item.reset()">R</button>
|
|
247
|
-
<button vsn-on:click="list.remove(item)">X</button>
|
|
248
|
-
</li>
|
|
249
|
-
</ul>
|
|
250
|
-
</div>
|
|
251
|
-
|
|
252
|
-
<h2>Lazy XHR Component</h2>
|
|
253
|
-
<div vsn-lazy="@html = << './xhr.html'"></div>
|
|
254
|
-
|
|
255
|
-
<script type="text/javascript">
|
|
256
|
-
window.addEventListener('vsn', function () {
|
|
257
|
-
vision.registry.controllers.register('TestController', TestController);
|
|
258
|
-
vision.registry.controllers.register('TestItem', TestItem);
|
|
259
|
-
vision.registry.controllers.register('Controller', Controller);
|
|
260
|
-
vision.registry.controllers.register('MVal', MVal);
|
|
261
|
-
});
|
|
262
|
-
</script>
|
|
263
|
-
|
|
264
|
-
<script vsn-script type="text/vsn">
|
|
265
|
-
class .testing-class {
|
|
266
|
-
on click() {
|
|
267
|
-
@text = 'Clicked';
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
on mouseenter() {
|
|
271
|
-
@text = 'Hovered!';
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
on mouseleave() {
|
|
275
|
-
@text = 'Mouse left';
|
|
276
|
-
}
|
|
277
|
-
}
|
|
278
|
-
</script>
|
|
279
|
-
|
|
280
|
-
<button class="testing-class" test="1">Click me</button>
|
|
106
|
+
</script>
|
|
107
|
+
<form-control-errors></form-control-errors>
|
|
108
|
+
<slot name="option"></slot>
|
|
109
|
+
</template>
|
|
110
|
+
|
|
111
|
+
<product-option>
|
|
112
|
+
<div slot="option">
|
|
113
|
+
|
|
114
|
+
<label><input type="radio" name="test"
|
|
115
|
+
value="{{ option_value.option_type_id }">asd</label>
|
|
116
|
+
</div>
|
|
117
|
+
</product-option>
|
|
118
|
+
|
|
119
|
+
<product-option>
|
|
120
|
+
<div slot="option">
|
|
121
|
+
|
|
122
|
+
<label><input type="radio" name="testing"
|
|
123
|
+
value="{{ option_value.option_type_id }">wut</label>
|
|
124
|
+
</div>
|
|
125
|
+
</product-option>
|
|
281
126
|
|
|
282
127
|
<script type="text/javascript" src="vsn.js"></script>
|
|
283
128
|
</body>
|