vsn 0.1.18 → 0.1.21

package/demo/demo.html

@@ -80,6 +80,7 @@
         <span vsn-if:not="'active' not in ?(:parent).@class">inactive</span>
         <button vsn-on:click="?(:parent).@class += 'active'">+</button>
         <button vsn-on:click="?(:parent).@class -= 'active'">-</button>
+        <button vsn-on:click="?(:parent).@class ~ 'active'">~</button>
     </li>
 </template>
 
@@ -97,7 +98,7 @@
 <button vsn-on:click="show = !show" vsn-set:show="false|boolean">Toggle</button>
 <span vsn-bind="show"></span>
 
-<button vsn-on:click="@text='Clicked'" id="ttt">Click Me</button>
+<a vsn-on:click="if(@text != clicktext){@text=clicktext}else{@text='Click Me'}" vsn-set:clicktext="Clicked!">Click Me</a>
 
 <h2>? Operator</h2>
 <p>Add/remove class to list of elements on click.</p>
@@ -130,6 +131,12 @@
 <input type="text" vsn-bind:|to="#date-formatter.date_format" />
 <input type="text" vsn-on:keyup="#date-formatter.date_format = $value" value="Aug 11, 2021 01:03:00 PM PDT" />
 
+<h2>$ Operator</h2>
+<p></p>
+<p>
+    <input type="text" vsn-bind="?(#style-attribute).$marginTop" id="style-attribute" /> <input type="button" vsn-on:click="?(#style-attribute).$marginTop = '50px'" value="Button" /> <input type="button" vsn-on:click="?(#style-attribute).$marginTop = '0'" value="Button" />
+</p>
+
 <h2>Conditional Elements</h2>
 <button vsn-on:click="show = !show">Toggle</button>
 <span vsn-if="show">Show is true</span>
@@ -190,4 +197,4 @@
 </script>
 <script type="text/javascript" src="vision.js"></script>
 </body>
-</html>
+</html>