add toggle component

fix some bug

src/assets/js/winVars.js

@@ -69,4 +69,5 @@ window.defaults.container = require('../json/defaults/defContainer.json');
 window.defaults.row = require('../json/defaults/defRow.json');
 window.defaults.input = require('../json/defaults/defInput.json');
 window.defaults.dropdown = require('../json/defaults/defDropdown.json');
-window.defaults.divider = require('../json/defaults/defDivider.json');
+window.defaults.divider = require('../json/defaults/defDivider.json');
+window.defaults.toggle = require('../json/defaults/defToggle.json');

src/assets/json/components.json

@@ -87,7 +87,7 @@
     {
       "title": "Toggle",
       "icon": "fa fa-toggle-on",
-      "active": false,
+      "active": true,
       "visual": true,
       "data": "window.defaults.toggle"
     },

src/assets/json/defaults/defButton.json

@@ -12,7 +12,7 @@
   "noText": false,
   "noIcon": false,
   "size": 15,
-  "onPressed": "// run when press on this button ",
-  "onLongPress": "// run when long press on this button  ",
+  "onPressed": "// run when press on this button\n",
+  "onLongPress": "// run when long press on this button\n",
   "hide": false
 }

src/assets/json/defaults/defCircleButton.json

@@ -6,7 +6,7 @@
   "bgColor": "Colors.green",
   "color": "null",
   "size": 25,
-  "onPressed": "// run when press on this button",
-  "onLongPress": "// run when long press on this button",
+  "onPressed": "// run when press on this button\n",
+  "onLongPress": "// run when long press on this button\n",
   "hide": false
 }

src/assets/json/defaults/defContainer.json

@@ -10,7 +10,7 @@
   "border": "1",
   "borderColor": "Colors.green",
   "bgColor": "null",
-  "onPressed": "// run when press on this button ",
-  "onLongPress": "// run when long press on this button",
+  "onPressed": "// run when press on this button\n",
+  "onLongPress": "// run when long press on this button\n",
   "hide": false
 }

src/assets/json/defaults/defDropdown.json

@@ -17,7 +17,7 @@
   "hint": "",
   "options": [],
   "modalBgColor": "null",
-  "onChanged": "// run when change value \n// you can use `state`,`state.value`, `state.title` ",
+  "onChanged": "// run when change value \n// you can use `state`,`state.value`, `state.title`\n",
   "multiple": false,
   "isTwoLine": false,
   "searchable": false,

src/assets/json/defaults/defInput.json

@@ -38,5 +38,5 @@
   "onTap": "// on tap input",
   "onBlur": "// on lost focus input",
   "onFocus": "// on set focus input",
-  "onChanged": "// trigger when change input value \n // you can use `value` variable for new value"
+  "onChanged": "// trigger when change input value \n// you can use `value` variable for new value\n"
 }

src/assets/json/defaults/defText.json

@@ -5,7 +5,7 @@
   "align": "null",
   "size": 13.0,
   "height": 1.2,
-  "maxLine": 0,
+  "maxLine": 1,
   "overflow": "null",
   "color": "null",
   "hide": false,

src/assets/json/defaults/defToggle.json

@@ -0,0 +1,15 @@
+{
+  "type": "toggle",
+  "name": "toggle",
+  "text": "Toggle title",
+  "size": 14.0,
+  "maxLine": 1,
+  "activeColor": "null",
+  "color": "null",
+  "bgColor": "null",
+  "state": false,
+  "hide": false,
+  "enabled": true,
+  "padding": "0",
+  "onChanged": "// run when `state` change\n"
+}

src/components/elements/PropertyElement.vue

@@ -154,6 +154,9 @@
             <div v-else-if="k === 'image' && properties.type === 'image' && properties.isOnline">
               <input type="url" v-model="properties.image"/>
             </div>
+            <div v-else-if="k == 'maxLines'">
+              <input type="number" :id="k" min="1" max="999" v-model="properties[k]">
+            </div>
             <div v-else>
               <input type="text" :id="k" v-model="properties[k]">
             </div>

src/components/elements/Simulator.vue

@@ -38,6 +38,9 @@
     <div v-if="type === 'divider'">
       <divider :properties="properties" :scale="scale" :page="page"></divider>
     </div>
+    <div v-if="type === 'toggle'">
+      <toggle :properties="properties"  :scale="scale" :page="page"></toggle>
+    </div>
   </div>
 </template>
 
@@ -54,6 +57,7 @@ import row from '@/components/flutter/Row';
 import InputText from '@/components/flutter/InputText';
 import dropdown from "@/components/flutter/Dropdown";
 import divider from '@/components/flutter/Divider';
+import toggle from '@/components/flutter/Toggle';
 
 import {fnc} from '@/assets/js/functions';
 
@@ -71,7 +75,8 @@ export default {
     row,
     dropdown,
     divider,
-    InputText
+    InputText,
+    toggle,
   },
   props: {
     properties: {
@@ -97,6 +102,9 @@ export default {
   }, computed: {
     getStyle: function () {
       let style = '';
+      if (this.properties.type == 'toggle' && this.properties.bgColor != 'null'){
+        style += 'background-color:' + fnc.color2web(this.properties.bgColor) + ';';
+      }
       if (this.properties.align !== undefined && this.properties.align !== 'default') {
         let temp = this.properties.align.split('.');
         if (temp.length === 2) {

src/components/flutter/Toggle.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :style="cssProps">
+
+    <div class="txt" :style="getStyle()">
+      {{ properties.text }}
+      <div class="switch" :style="'float:'+(isRTL?'left':'right')">
+        <label>
+          <input type="checkbox" v-model="properties.state">
+          <span class="lever"></span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {fnc} from "@/assets/js/functions";
+
+export default {
+  name: "toggle",
+  data: function () {
+    return {
+      isRTL: window.appData.project.isRTL,
+      isDark: window.appData.project.isDark,
+    }
+  },
+  mounted() {
+
+  },
+  computed: {
+    cssProps() {
+      if (this.isDark && this.properties.activeColor == 'null'){
+        return {
+          '--bg-color2': fnc.color2web("Colors.teal")+'99',
+          '--bg-color': fnc.color2web("Colors.teal"),
+        }
+      }
+      if (!this.isDark && this.properties.activeColor == 'null') {
+        return {
+          '--bg-color2': fnc.color2web(this.properties.activeColor,true) + '99',
+          '--bg-color': fnc.color2web(this.properties.activeColor,true),
+        }
+      }
+      return {
+        '--bg-color2': fnc.color2web(this.properties.activeColor) + '99',
+        '--bg-color': fnc.color2web(this.properties.activeColor),
+      }
+
+    }
+  },
+  props: ['properties', 'scale', 'page'],
+  methods: {
+    getStyle: function () {
+      let style = '';
+      if (this.properties.color === 'null') {
+        if (window.appData.project.isDark) {
+          style += 'color: white;';
+        } else {
+          style += 'color: black;';
+        }
+      } else {
+        style += 'color:' + this.color2web(this.properties.color) + ';';
+      }
+      if (this.properties.maxLine != 0) {
+        style += 'max-height:' + this.properties.maxLine * parseFloat(this.properties.height) + 'em;';
+      }
+      // style += 'margin:' + fnc.calcPadding(this.page.padding, this.scale, true) + ';';
+      style += 'font-size:' + (2.5 * this.scale * parseFloat(this.properties.size)) + 'px;';
+      return style;
+    },
+    color2web: fnc.color2web
+  }
+}
+</script>
+
+<style scoped>
+.txt {
+  overflow: hidden;
+  position: relative;
+  padding: 5px;
+  margin: 0;
+  display: block;
+  width: 100%;
+}
+
+.switch {
+  margin-right: -10px;
+}
+
+input[type=checkbox]:checked+.lever {
+  background: var(--bg-color2) !important;
+}
+input[type=checkbox]:checked+.lever:after {
+  background: var(--bg-color) !important;
+}
+
+.txt:hover .fa-font {
+  opacity: 0.7;
+}
+
+
+</style>

src/components/pages/MainAppPage.vue

@@ -697,7 +697,7 @@ export default {
 }
 
 #side #components {
-  height: 50vh;
+  height: calc(50vh - 31px);
   overflow-y: scroll;
   font-weight: 100;
 }