@monoui/vuejs 1.1.13 → 1.1.17

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.
Files changed (6) hide show
  1. package/dist/main.js +13 -14
  2. package/package.json +2 -1
  3. package/src/components/Table/Table.vue +471 -55
  4. package/src/components/Toggle-Switch/Toggle-Switch.vue +152 -0
  5. package/src/components/Toggle-Switch/index.js +3 -0
  6. package/src/index.js +7 -0
package/src/components/Toggle-Switch/Toggle-Switch.vue ADDED
@@ -0,0 +1,152 @@
1
+ <template>
2
+ <toggle-button v-on="$listeners" v-bind="$props" v-model="toggleValue" />
3
+ </template>
4
+
5
+ <script>
6
+ export default {
7
+ name: "mui-toggle-switch",
8
+ props: {
9
+ /**
10
+ *Initial state of the toggle button
11
+ * @type Boolean
12
+ */
13
+ value: {
14
+ type: Boolean,
15
+ required: true
16
+ },
17
+ /**
18
+ * If set to true, will be watching changes in value property
19
+ * and overwrite the current state of the button whenever value prop changes
20
+ * @type Boolean
21
+ */
22
+ sync: {
23
+ type: Boolean,
24
+ required: false
25
+ },
26
+ /**
27
+ * Transition time for the animation
28
+ * @type Number
29
+ */
30
+ speed: {
31
+ type: Number,
32
+ required: false,
33
+ default: 300
34
+ },
35
+ /**
36
+ * Button does not react on mouse events
37
+ * @type Boolean
38
+ */
39
+ disabled: {
40
+ type: Boolean,
41
+ required: false,
42
+ default: false
43
+ },
44
+ /**
45
+ * If String - color of the button when checked
46
+ If Object - colors for the button when checked/unchecked or disabled
47
+ Example: {checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}
48
+ * @type [String, Object]
49
+ */
50
+ color: {
51
+ type: [String, Object],
52
+ required: false,
53
+ default: "#75C791"
54
+ },
55
+ /**
56
+ * If true - deactivates the setting of colors
57
+ * through inline styles in favor of using CSS styling
58
+ * @type Boolean
59
+ */
60
+ "css-colors": {
61
+ type: Boolean,
62
+ required: false,
63
+ default: false
64
+ },
65
+ /**
66
+ * If Boolean - shows/hides default labels ("on" and "off")
67
+ * If Object - sets custom labels for both states.
68
+ * Example: {checked: 'Foo', unchecked: 'Bar'}
69
+ * @type [Boolean, Object]
70
+ */
71
+ labels: {
72
+ type: [Boolean, Object],
73
+ required: false,
74
+ default: false
75
+ },
76
+ /**
77
+ * If String - color or background property of the switch when checked
78
+ * If Object - colors or background property for the switch when checked/uncheked
79
+ * Example: {checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}
80
+ * @type [String, Object]
81
+ */
82
+ "switch-color": {
83
+ type: [String, Object],
84
+ required: false,
85
+ default: "#fff"
86
+ },
87
+ /**
88
+ * Width of the button
89
+ * @type Number
90
+ */
91
+ width: {
92
+ type: Number,
93
+ required: false,
94
+ default: 50
95
+ },
96
+ /**
97
+ * Height of the button
98
+ * @type Number
99
+ */
100
+ height: {
101
+ type: Number,
102
+ required: false,
103
+ default: 22
104
+ },
105
+ /**
106
+ * Space between the switch and background border
107
+ * @type Number
108
+ */
109
+ margin: {
110
+ type: Number,
111
+ required: false,
112
+ default: 3
113
+ },
114
+ /**
115
+ * Font size
116
+ * @type Number
117
+ */
118
+ "font-size": {
119
+ type: Number,
120
+ required: false,
121
+ default: undefined
122
+ },
123
+ title: {
124
+ type: String,
125
+ required: false
126
+ }
127
+ },
128
+ data() {
129
+ return {
130
+ toggleValue: false
131
+ };
132
+ },
133
+ created() {
134
+ this.toggleValue = this.value;
135
+ },
136
+ watch: {
137
+ value(val) {
138
+ this.toggleValue = val;
139
+ },
140
+ toggleValue(val) {
141
+ this.$emit("input", val);
142
+ }
143
+ },
144
+ methods: {
145
+ changeUpdate(event) {
146
+ this.$emit("change", event);
147
+ }
148
+ }
149
+ };
150
+ </script>
151
+
152
+ <style></style>
package/src/components/Toggle-Switch/index.js ADDED
@@ -0,0 +1,3 @@
1
+ import ToggleSwitch from "./Toggle-Switch.vue";
2
+
3
+ export default ToggleSwitch;
package/src/index.js CHANGED
@@ -12,6 +12,7 @@ import Checkbox from "./components/Checkbox";
12
12
  import Tooltip from "./components/Tooltip";
13
13
  import Spinner from "./components/Spinner";
14
14
  import Table from "./components/Table";
15
+ import ToggleSwitch from "./components/Toggle-Switch";
15
16
  import MultiKeyValue from "./components/MultiKeyValue";
16
17
  import {
17
18
  Alert,
@@ -52,6 +53,7 @@ import "@yaireo/tagify/dist/tagify.css";
52
53
 
53
54
  import BootstrapVue from "bootstrap-vue";
54
55
  import { FontAwesomeIcon } from "./icons";
56
+ import { ToggleButton } from "vue-js-toggle-button";
55
57
  import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
56
58
  import { min, required, email } from "vee-validate/dist/rules";
57
59
  import VueSweetalert2 from "vue-sweetalert2";
@@ -68,6 +70,10 @@ export default {
68
70
  Vue.component("font-awesome-icon", FontAwesomeIcon);
69
71
  // ***FontAwesome
70
72
 
73
+ // ** Toggle/Switch
74
+ Vue.component("toggle-button", ToggleButton);
75
+ // ** Toggle/Switch
76
+
71
77
  // ***VeeValidate***
72
78
  Vue.component("ValidationObserver", ValidationObserver);
73
79
  Vue.component("ValidationProvider", ValidationProvider);
@@ -126,6 +132,7 @@ export default {
126
132
  Vue.component(KeyValue.name, KeyValue);
127
133
  Vue.component(Timeline.name, Timeline);
128
134
  Vue.component(TimelineItem.name, TimelineItem);
135
+ Vue.component(ToggleSwitch.name, ToggleSwitch);
129
136
 
130
137
  Vue.use(Notification);
131
138
  Vue.use(Alerte);