@vuesimple/vs-switch 3.1.3 → 3.1.6
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/README.md +0 -40
- package/build/vite.config.js +3 -3
- package/dist/index.esm.js +115 -0
- package/dist/index.min.js +3 -0
- package/dist/index.umd.js +3 -0
- package/package.json +4 -5
- package/src/vs-switch.vue +3 -2
package/README.md
CHANGED
|
@@ -78,46 +78,6 @@ app.use(VsSwitch.plugin);
|
|
|
78
78
|
<img src="https://i.imgur.com/MWynQNa.png" width="20px"> Nuxt.js
|
|
79
79
|
</h3>
|
|
80
80
|
|
|
81
|
-
Nuxt Code Snippet
|
|
82
|
-
|
|
83
|
-
After installation,
|
|
84
|
-
|
|
85
|
-
- Create a file `/plugins/vs-switch.js`
|
|
86
|
-
|
|
87
|
-
```javascript
|
|
88
|
-
import Vue from 'vue';
|
|
89
|
-
import VsSwitch from '@vuesimple/vs-switch';
|
|
90
|
-
|
|
91
|
-
Vue.component('vs-switch', VsSwitch);
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
- Update `nuxt.config.js`
|
|
95
|
-
```javascript
|
|
96
|
-
module.exports = {
|
|
97
|
-
...
|
|
98
|
-
plugins: [
|
|
99
|
-
{ src: '~plugins/vs-switch', mode: 'client' }
|
|
100
|
-
...
|
|
101
|
-
]
|
|
102
|
-
}
|
|
103
|
-
```
|
|
104
|
-
- In the page/ component
|
|
105
|
-
|
|
106
|
-
```html
|
|
107
|
-
<template>
|
|
108
|
-
<vs-switch v-model="isEnabled" />
|
|
109
|
-
</template>
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
**Note**
|
|
113
|
-
|
|
114
|
-
- For older Nuxt versions, use `<no-ssr>...</no-ssr>` tag.
|
|
115
|
-
- You can also do
|
|
116
|
-
`import VsSwitch from '@vuesimple/vs-switch'`
|
|
117
|
-
& add in `component:{VsSwitch}` and use it within component, without globally installing in plugin folder.
|
|
118
|
-
|
|
119
|
-
<br />
|
|
120
|
-
|
|
121
81
|
### ⚙ Props
|
|
122
82
|
|
|
123
83
|
| Name | Type | Default | Description |
|
package/build/vite.config.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import vue from '@vitejs/plugin-vue';
|
|
2
|
-
import
|
|
2
|
+
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
|
|
3
3
|
|
|
4
4
|
export default {
|
|
5
|
-
plugins: [vue(),
|
|
5
|
+
plugins: [vue(), cssInjectedByJsPlugin()],
|
|
6
6
|
build: {
|
|
7
7
|
// separate css file or not
|
|
8
|
-
cssCodeSplit:
|
|
8
|
+
cssCodeSplit: true,
|
|
9
9
|
lib: {
|
|
10
10
|
entry: './src/index.js',
|
|
11
11
|
formats: ['es', 'umd', 'iife'],
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var s=document.createElement("style");s.appendChild(document.createTextNode("[data-theme=dark] .vs-switch,.dark .vs-switch{--vs-switch-bg-unchecked: #3a3a3a;--vs-switch-bg-checked: #1f73b7;--vs-switch-thumb: #ffffff;--vs-switch-border: #555555}.vs-switch{--vs-switch-bg-unchecked: #e9ebed;--vs-switch-bg-checked: #1f73b7;--vs-switch-thumb: #ffffff;--vs-switch-border: #d1d5db;--vs-switch-primary: #1f73b7;--vs-switch-success: #186146;--vs-switch-danger: #cc3340;--vs-switch-warning: #ffb057;--vs-switch-secondary: #3a3a3a;--vs-switch-indigo: #4f46e5;--vs-switch-cyan: #06b6d4;--vs-switch-orange: #f97316;--vs-switch-crimson: #dc2626;--vs-switch-gray: #6b7280;position:relative;display:inline-flex;align-items:center;justify-content:flex-start;cursor:pointer;border:none;padding:0;background:none;transition:all .2s ease;border-radius:var(--vs-switch-border-radius)}.vs-switch:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--vs-switch-bg-checked)}.vs-switch:disabled{cursor:not-allowed;opacity:.5}.vs-switch__size-small{width:36px;height:20px;--vs-switch-border-radius: 10px}.vs-switch__size-small .vs-switch__thumb{width:16px;height:16px}.vs-switch__size-small.vs-switch--checked .vs-switch__thumb{transform:translate(16px)}.vs-switch__size-medium{width:44px;height:24px;--vs-switch-border-radius: 12px}.vs-switch__size-medium .vs-switch__thumb{width:20px;height:20px}.vs-switch__size-medium.vs-switch--checked .vs-switch__thumb{transform:translate(20px)}.vs-switch__size-large{width:52px;height:28px;--vs-switch-border-radius: 14px}.vs-switch__size-large .vs-switch__thumb{width:24px;height:24px}.vs-switch__size-large.vs-switch--checked .vs-switch__thumb{transform:translate(24px)}.vs-switch__radius-none{--vs-switch-border-radius: 0}.vs-switch__radius-small{--vs-switch-border-radius: 4px}.vs-switch__radius-medium{--vs-switch-border-radius: 6px}.vs-switch__radius-large{--vs-switch-border-radius: 8px}.vs-switch__radius-full{--vs-switch-border-radius: 100px}.vs-switch__variant-classic{background:var(--vs-switch-bg-unchecked);border:1px solid var(--vs-switch-border)}.vs-switch__variant-classic.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked));border-color:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch__variant-surface{background:#f0f1f3;border:1px solid transparent}.vs-switch__variant-surface.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}[data-theme=dark] .vs-switch__variant-surface,.dark .vs-switch__variant-surface{background:#4a5568}[data-theme=dark] .vs-switch__variant-surface.vs-switch--checked,.dark .vs-switch__variant-surface.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch__variant-soft{background:rgba(31,115,183,.1);border:1px solid transparent}.vs-switch__variant-soft.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}[data-theme=dark] .vs-switch__variant-soft,.dark .vs-switch__variant-soft{background:rgba(31,115,183,.2)}[data-theme=dark] .vs-switch__variant-soft.vs-switch--checked,.dark .vs-switch__variant-soft.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch__color-primary.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #1f73b7)}.vs-switch__color-success.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #186146)}.vs-switch__color-danger.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #cc3340)}.vs-switch__color-warning.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #ffb057)}.vs-switch__color-warning.vs-switch--checked .vs-switch__thumb{background:#703815}.vs-switch__color-secondary.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #3a3a3a)}.vs-switch__color-indigo.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #4f46e5)}.vs-switch__color-cyan.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #06b6d4)}.vs-switch__color-orange.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #f97316)}.vs-switch__color-crimson.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #dc2626)}.vs-switch__color-gray.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #6b7280)}.vs-switch--high-contrast.vs-switch__color-primary.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #0d47a1)}.vs-switch--high-contrast.vs-switch__color-indigo.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #3730a3)}.vs-switch--high-contrast.vs-switch__color-cyan.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #0369a1)}.vs-switch--high-contrast.vs-switch__color-orange.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #c2410c)}.vs-switch--high-contrast.vs-switch__color-crimson.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #7f1d1d)}.vs-switch--high-contrast.vs-switch__color-gray.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #374151)}.vs-switch__thumb{position:absolute;left:2px;width:20px;height:20px;background:var(--vs-switch-thumb);border-radius:50%;transition:transform .2s ease;pointer-events:none;box-shadow:0 1px 3px #0000001a}.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch--disabled{opacity:.5;cursor:not-allowed}")),document.head.appendChild(s)}}catch(c){console.error("vite-plugin-css-injected-by-js",c)}})();
|
|
2
|
+
import { openBlock as r, createElementBlock as o, normalizeClass as d, normalizeStyle as n, createElementVNode as h } from "vue";
|
|
3
|
+
const u = (e, t) => {
|
|
4
|
+
const s = e.__vccOpts || e;
|
|
5
|
+
for (const [i, l] of t)
|
|
6
|
+
s[i] = l;
|
|
7
|
+
return s;
|
|
8
|
+
}, m = {
|
|
9
|
+
name: "VsSwitch",
|
|
10
|
+
props: {
|
|
11
|
+
// v-model support
|
|
12
|
+
modelValue: {
|
|
13
|
+
type: Boolean,
|
|
14
|
+
default: !1
|
|
15
|
+
},
|
|
16
|
+
// `small`, `medium`, `large`
|
|
17
|
+
size: {
|
|
18
|
+
type: String,
|
|
19
|
+
default: "medium",
|
|
20
|
+
validator: (e) => ["small", "medium", "large"].includes(e)
|
|
21
|
+
},
|
|
22
|
+
// `classic`, `surface`, `soft`
|
|
23
|
+
variant: {
|
|
24
|
+
type: String,
|
|
25
|
+
default: "classic",
|
|
26
|
+
validator: (e) => ["classic", "surface", "soft"].includes(e)
|
|
27
|
+
},
|
|
28
|
+
// Color theme
|
|
29
|
+
color: {
|
|
30
|
+
type: String,
|
|
31
|
+
default: "primary"
|
|
32
|
+
},
|
|
33
|
+
// High contrast mode
|
|
34
|
+
highContrast: {
|
|
35
|
+
type: Boolean,
|
|
36
|
+
default: !1
|
|
37
|
+
},
|
|
38
|
+
// // Border radius: `none`, `small`, `medium`, `large`, `full`
|
|
39
|
+
// radius: {
|
|
40
|
+
// type: String,
|
|
41
|
+
// default: 'full',
|
|
42
|
+
// validator: val => ['none', 'small', 'medium', 'large', 'full'].includes(val),
|
|
43
|
+
// },
|
|
44
|
+
// Disabled state
|
|
45
|
+
disabled: {
|
|
46
|
+
type: Boolean,
|
|
47
|
+
default: !1
|
|
48
|
+
},
|
|
49
|
+
// Aria label for accessibility
|
|
50
|
+
ariaLabel: {
|
|
51
|
+
type: String
|
|
52
|
+
},
|
|
53
|
+
// Custom background color for checked state
|
|
54
|
+
checkedBgColor: {
|
|
55
|
+
type: String
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
emits: ["update:modelValue", "change"],
|
|
59
|
+
computed: {
|
|
60
|
+
isChecked() {
|
|
61
|
+
return this.modelValue;
|
|
62
|
+
},
|
|
63
|
+
classList() {
|
|
64
|
+
return [
|
|
65
|
+
`vs-switch__size-${this.size}`,
|
|
66
|
+
`vs-switch__variant-${this.variant}`,
|
|
67
|
+
`vs-switch__color-${this.color}`,
|
|
68
|
+
{
|
|
69
|
+
"vs-switch--checked": this.isChecked,
|
|
70
|
+
"vs-switch--disabled": this.disabled,
|
|
71
|
+
"vs-switch--high-contrast": this.highContrast
|
|
72
|
+
}
|
|
73
|
+
];
|
|
74
|
+
},
|
|
75
|
+
cssVars() {
|
|
76
|
+
return {
|
|
77
|
+
"--vs-switch-checked-bg-color": this.checkedBgColor
|
|
78
|
+
};
|
|
79
|
+
},
|
|
80
|
+
isCssVars() {
|
|
81
|
+
return this.checkedBgColor ? this.cssVars : "";
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
methods: {
|
|
85
|
+
toggle() {
|
|
86
|
+
if (!this.disabled) {
|
|
87
|
+
const e = !this.isChecked;
|
|
88
|
+
this.$emit("update:modelValue", e), this.$emit("change", e);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}, g = ["aria-checked", "aria-label", "disabled"];
|
|
93
|
+
function _(e, t, s, i, l, a) {
|
|
94
|
+
return r(), o("button", {
|
|
95
|
+
class: d(["vs-switch", a.classList]),
|
|
96
|
+
style: n(a.isCssVars),
|
|
97
|
+
"aria-checked": a.isChecked,
|
|
98
|
+
"aria-label": s.ariaLabel,
|
|
99
|
+
role: "switch",
|
|
100
|
+
type: "button",
|
|
101
|
+
disabled: s.disabled,
|
|
102
|
+
onClick: t[0] || (t[0] = (...c) => a.toggle && a.toggle(...c))
|
|
103
|
+
}, [...t[1] || (t[1] = [
|
|
104
|
+
h("span", { class: "vs-switch__thumb" }, null, -1)
|
|
105
|
+
])], 14, g);
|
|
106
|
+
}
|
|
107
|
+
const f = /* @__PURE__ */ u(m, [["render", _]]), v = {
|
|
108
|
+
install(e) {
|
|
109
|
+
e.component("VsSwitch", f);
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
export {
|
|
113
|
+
f as default,
|
|
114
|
+
v as plugin
|
|
115
|
+
};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var s=document.createElement("style");s.appendChild(document.createTextNode("[data-theme=dark] .vs-switch,.dark .vs-switch{--vs-switch-bg-unchecked: #3a3a3a;--vs-switch-bg-checked: #1f73b7;--vs-switch-thumb: #ffffff;--vs-switch-border: #555555}.vs-switch{--vs-switch-bg-unchecked: #e9ebed;--vs-switch-bg-checked: #1f73b7;--vs-switch-thumb: #ffffff;--vs-switch-border: #d1d5db;--vs-switch-primary: #1f73b7;--vs-switch-success: #186146;--vs-switch-danger: #cc3340;--vs-switch-warning: #ffb057;--vs-switch-secondary: #3a3a3a;--vs-switch-indigo: #4f46e5;--vs-switch-cyan: #06b6d4;--vs-switch-orange: #f97316;--vs-switch-crimson: #dc2626;--vs-switch-gray: #6b7280;position:relative;display:inline-flex;align-items:center;justify-content:flex-start;cursor:pointer;border:none;padding:0;background:none;transition:all .2s ease;border-radius:var(--vs-switch-border-radius)}.vs-switch:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--vs-switch-bg-checked)}.vs-switch:disabled{cursor:not-allowed;opacity:.5}.vs-switch__size-small{width:36px;height:20px;--vs-switch-border-radius: 10px}.vs-switch__size-small .vs-switch__thumb{width:16px;height:16px}.vs-switch__size-small.vs-switch--checked .vs-switch__thumb{transform:translate(16px)}.vs-switch__size-medium{width:44px;height:24px;--vs-switch-border-radius: 12px}.vs-switch__size-medium .vs-switch__thumb{width:20px;height:20px}.vs-switch__size-medium.vs-switch--checked .vs-switch__thumb{transform:translate(20px)}.vs-switch__size-large{width:52px;height:28px;--vs-switch-border-radius: 14px}.vs-switch__size-large .vs-switch__thumb{width:24px;height:24px}.vs-switch__size-large.vs-switch--checked .vs-switch__thumb{transform:translate(24px)}.vs-switch__radius-none{--vs-switch-border-radius: 0}.vs-switch__radius-small{--vs-switch-border-radius: 4px}.vs-switch__radius-medium{--vs-switch-border-radius: 6px}.vs-switch__radius-large{--vs-switch-border-radius: 8px}.vs-switch__radius-full{--vs-switch-border-radius: 100px}.vs-switch__variant-classic{background:var(--vs-switch-bg-unchecked);border:1px solid var(--vs-switch-border)}.vs-switch__variant-classic.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked));border-color:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch__variant-surface{background:#f0f1f3;border:1px solid transparent}.vs-switch__variant-surface.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}[data-theme=dark] .vs-switch__variant-surface,.dark .vs-switch__variant-surface{background:#4a5568}[data-theme=dark] .vs-switch__variant-surface.vs-switch--checked,.dark .vs-switch__variant-surface.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch__variant-soft{background:rgba(31,115,183,.1);border:1px solid transparent}.vs-switch__variant-soft.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}[data-theme=dark] .vs-switch__variant-soft,.dark .vs-switch__variant-soft{background:rgba(31,115,183,.2)}[data-theme=dark] .vs-switch__variant-soft.vs-switch--checked,.dark .vs-switch__variant-soft.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch__color-primary.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #1f73b7)}.vs-switch__color-success.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #186146)}.vs-switch__color-danger.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #cc3340)}.vs-switch__color-warning.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #ffb057)}.vs-switch__color-warning.vs-switch--checked .vs-switch__thumb{background:#703815}.vs-switch__color-secondary.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #3a3a3a)}.vs-switch__color-indigo.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #4f46e5)}.vs-switch__color-cyan.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #06b6d4)}.vs-switch__color-orange.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #f97316)}.vs-switch__color-crimson.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #dc2626)}.vs-switch__color-gray.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #6b7280)}.vs-switch--high-contrast.vs-switch__color-primary.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #0d47a1)}.vs-switch--high-contrast.vs-switch__color-indigo.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #3730a3)}.vs-switch--high-contrast.vs-switch__color-cyan.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #0369a1)}.vs-switch--high-contrast.vs-switch__color-orange.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #c2410c)}.vs-switch--high-contrast.vs-switch__color-crimson.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #7f1d1d)}.vs-switch--high-contrast.vs-switch__color-gray.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #374151)}.vs-switch__thumb{position:absolute;left:2px;width:20px;height:20px;background:var(--vs-switch-thumb);border-radius:50%;transition:transform .2s ease;pointer-events:none;box-shadow:0 1px 3px #0000001a}.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch--disabled{opacity:.5;cursor:not-allowed}")),document.head.appendChild(s)}}catch(c){console.error("vite-plugin-css-injected-by-js",c)}})();
|
|
2
|
+
var VsSwitch=function(h,t){"use strict";var r=document.createElement("style");r.textContent=`[data-theme=dark] .vs-switch,.dark .vs-switch{--vs-switch-bg-unchecked: #3a3a3a;--vs-switch-bg-checked: #1f73b7;--vs-switch-thumb: #ffffff;--vs-switch-border: #555555}.vs-switch{--vs-switch-bg-unchecked: #e9ebed;--vs-switch-bg-checked: #1f73b7;--vs-switch-thumb: #ffffff;--vs-switch-border: #d1d5db;--vs-switch-primary: #1f73b7;--vs-switch-success: #186146;--vs-switch-danger: #cc3340;--vs-switch-warning: #ffb057;--vs-switch-secondary: #3a3a3a;--vs-switch-indigo: #4f46e5;--vs-switch-cyan: #06b6d4;--vs-switch-orange: #f97316;--vs-switch-crimson: #dc2626;--vs-switch-gray: #6b7280;position:relative;display:inline-flex;align-items:center;justify-content:flex-start;cursor:pointer;border:none;padding:0;background:none;transition:all .2s ease;border-radius:var(--vs-switch-border-radius)}.vs-switch:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--vs-switch-bg-checked)}.vs-switch:disabled{cursor:not-allowed;opacity:.5}.vs-switch__size-small{width:36px;height:20px;--vs-switch-border-radius: 10px}.vs-switch__size-small .vs-switch__thumb{width:16px;height:16px}.vs-switch__size-small.vs-switch--checked .vs-switch__thumb{transform:translate(16px)}.vs-switch__size-medium{width:44px;height:24px;--vs-switch-border-radius: 12px}.vs-switch__size-medium .vs-switch__thumb{width:20px;height:20px}.vs-switch__size-medium.vs-switch--checked .vs-switch__thumb{transform:translate(20px)}.vs-switch__size-large{width:52px;height:28px;--vs-switch-border-radius: 14px}.vs-switch__size-large .vs-switch__thumb{width:24px;height:24px}.vs-switch__size-large.vs-switch--checked .vs-switch__thumb{transform:translate(24px)}.vs-switch__radius-none{--vs-switch-border-radius: 0}.vs-switch__radius-small{--vs-switch-border-radius: 4px}.vs-switch__radius-medium{--vs-switch-border-radius: 6px}.vs-switch__radius-large{--vs-switch-border-radius: 8px}.vs-switch__radius-full{--vs-switch-border-radius: 100px}.vs-switch__variant-classic{background:var(--vs-switch-bg-unchecked);border:1px solid var(--vs-switch-border)}.vs-switch__variant-classic.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked));border-color:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch__variant-surface{background:#f0f1f3;border:1px solid transparent}.vs-switch__variant-surface.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}[data-theme=dark] .vs-switch__variant-surface,.dark .vs-switch__variant-surface{background:#4a5568}[data-theme=dark] .vs-switch__variant-surface.vs-switch--checked,.dark .vs-switch__variant-surface.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch__variant-soft{background:rgba(31,115,183,.1);border:1px solid transparent}.vs-switch__variant-soft.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}[data-theme=dark] .vs-switch__variant-soft,.dark .vs-switch__variant-soft{background:rgba(31,115,183,.2)}[data-theme=dark] .vs-switch__variant-soft.vs-switch--checked,.dark .vs-switch__variant-soft.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch__color-primary.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #1f73b7)}.vs-switch__color-success.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #186146)}.vs-switch__color-danger.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #cc3340)}.vs-switch__color-warning.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #ffb057)}.vs-switch__color-warning.vs-switch--checked .vs-switch__thumb{background:#703815}.vs-switch__color-secondary.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #3a3a3a)}.vs-switch__color-indigo.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #4f46e5)}.vs-switch__color-cyan.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #06b6d4)}.vs-switch__color-orange.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #f97316)}.vs-switch__color-crimson.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #dc2626)}.vs-switch__color-gray.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #6b7280)}.vs-switch--high-contrast.vs-switch__color-primary.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #0d47a1)}.vs-switch--high-contrast.vs-switch__color-indigo.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #3730a3)}.vs-switch--high-contrast.vs-switch__color-cyan.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #0369a1)}.vs-switch--high-contrast.vs-switch__color-orange.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #c2410c)}.vs-switch--high-contrast.vs-switch__color-crimson.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #7f1d1d)}.vs-switch--high-contrast.vs-switch__color-gray.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #374151)}.vs-switch__thumb{position:absolute;left:2px;width:20px;height:20px;background:var(--vs-switch-thumb);border-radius:50%;transition:transform .2s ease;pointer-events:none;box-shadow:0 1px 3px #0000001a}.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch--disabled{opacity:.5;cursor:not-allowed}
|
|
3
|
+
`,document.head.appendChild(r);const g="",v=(s,c)=>{const e=s.__vccOpts||s;for(const[o,d]of c)e[o]=d;return e},w={name:"VsSwitch",props:{modelValue:{type:Boolean,default:!1},size:{type:String,default:"medium",validator:s=>["small","medium","large"].includes(s)},variant:{type:String,default:"classic",validator:s=>["classic","surface","soft"].includes(s)},color:{type:String,default:"primary"},highContrast:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},ariaLabel:{type:String},checkedBgColor:{type:String}},emits:["update:modelValue","change"],computed:{isChecked(){return this.modelValue},classList(){return[`vs-switch__size-${this.size}`,`vs-switch__variant-${this.variant}`,`vs-switch__color-${this.color}`,{"vs-switch--checked":this.isChecked,"vs-switch--disabled":this.disabled,"vs-switch--high-contrast":this.highContrast}]},cssVars(){return{"--vs-switch-checked-bg-color":this.checkedBgColor}},isCssVars(){return this.checkedBgColor?this.cssVars:""}},methods:{toggle(){if(!this.disabled){const s=!this.isChecked;this.$emit("update:modelValue",s),this.$emit("change",s)}}}},n=["aria-checked","aria-label","disabled"];function l(s,c,e,o,d,i){return t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(["vs-switch",i.classList]),style:t.normalizeStyle(i.isCssVars),"aria-checked":i.isChecked,"aria-label":e.ariaLabel,role:"switch",type:"button",disabled:e.disabled,onClick:c[0]||(c[0]=(...b)=>i.toggle&&i.toggle(...b))},[...c[1]||(c[1]=[t.createElementVNode("span",{class:"vs-switch__thumb"},null,-1)])],14,n)}const a=v(w,[["render",l]]),_={install(s){s.component("VsSwitch",a)}};return h.default=a,h.plugin=_,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),h}({},Vue);
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var s=document.createElement("style");s.appendChild(document.createTextNode("[data-theme=dark] .vs-switch,.dark .vs-switch{--vs-switch-bg-unchecked: #3a3a3a;--vs-switch-bg-checked: #1f73b7;--vs-switch-thumb: #ffffff;--vs-switch-border: #555555}.vs-switch{--vs-switch-bg-unchecked: #e9ebed;--vs-switch-bg-checked: #1f73b7;--vs-switch-thumb: #ffffff;--vs-switch-border: #d1d5db;--vs-switch-primary: #1f73b7;--vs-switch-success: #186146;--vs-switch-danger: #cc3340;--vs-switch-warning: #ffb057;--vs-switch-secondary: #3a3a3a;--vs-switch-indigo: #4f46e5;--vs-switch-cyan: #06b6d4;--vs-switch-orange: #f97316;--vs-switch-crimson: #dc2626;--vs-switch-gray: #6b7280;position:relative;display:inline-flex;align-items:center;justify-content:flex-start;cursor:pointer;border:none;padding:0;background:none;transition:all .2s ease;border-radius:var(--vs-switch-border-radius)}.vs-switch:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--vs-switch-bg-checked)}.vs-switch:disabled{cursor:not-allowed;opacity:.5}.vs-switch__size-small{width:36px;height:20px;--vs-switch-border-radius: 10px}.vs-switch__size-small .vs-switch__thumb{width:16px;height:16px}.vs-switch__size-small.vs-switch--checked .vs-switch__thumb{transform:translate(16px)}.vs-switch__size-medium{width:44px;height:24px;--vs-switch-border-radius: 12px}.vs-switch__size-medium .vs-switch__thumb{width:20px;height:20px}.vs-switch__size-medium.vs-switch--checked .vs-switch__thumb{transform:translate(20px)}.vs-switch__size-large{width:52px;height:28px;--vs-switch-border-radius: 14px}.vs-switch__size-large .vs-switch__thumb{width:24px;height:24px}.vs-switch__size-large.vs-switch--checked .vs-switch__thumb{transform:translate(24px)}.vs-switch__radius-none{--vs-switch-border-radius: 0}.vs-switch__radius-small{--vs-switch-border-radius: 4px}.vs-switch__radius-medium{--vs-switch-border-radius: 6px}.vs-switch__radius-large{--vs-switch-border-radius: 8px}.vs-switch__radius-full{--vs-switch-border-radius: 100px}.vs-switch__variant-classic{background:var(--vs-switch-bg-unchecked);border:1px solid var(--vs-switch-border)}.vs-switch__variant-classic.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked));border-color:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch__variant-surface{background:#f0f1f3;border:1px solid transparent}.vs-switch__variant-surface.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}[data-theme=dark] .vs-switch__variant-surface,.dark .vs-switch__variant-surface{background:#4a5568}[data-theme=dark] .vs-switch__variant-surface.vs-switch--checked,.dark .vs-switch__variant-surface.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch__variant-soft{background:rgba(31,115,183,.1);border:1px solid transparent}.vs-switch__variant-soft.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}[data-theme=dark] .vs-switch__variant-soft,.dark .vs-switch__variant-soft{background:rgba(31,115,183,.2)}[data-theme=dark] .vs-switch__variant-soft.vs-switch--checked,.dark .vs-switch__variant-soft.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch__color-primary.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #1f73b7)}.vs-switch__color-success.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #186146)}.vs-switch__color-danger.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #cc3340)}.vs-switch__color-warning.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #ffb057)}.vs-switch__color-warning.vs-switch--checked .vs-switch__thumb{background:#703815}.vs-switch__color-secondary.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #3a3a3a)}.vs-switch__color-indigo.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #4f46e5)}.vs-switch__color-cyan.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #06b6d4)}.vs-switch__color-orange.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #f97316)}.vs-switch__color-crimson.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #dc2626)}.vs-switch__color-gray.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #6b7280)}.vs-switch--high-contrast.vs-switch__color-primary.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #0d47a1)}.vs-switch--high-contrast.vs-switch__color-indigo.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #3730a3)}.vs-switch--high-contrast.vs-switch__color-cyan.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #0369a1)}.vs-switch--high-contrast.vs-switch__color-orange.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #c2410c)}.vs-switch--high-contrast.vs-switch__color-crimson.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #7f1d1d)}.vs-switch--high-contrast.vs-switch__color-gray.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #374151)}.vs-switch__thumb{position:absolute;left:2px;width:20px;height:20px;background:var(--vs-switch-thumb);border-radius:50%;transition:transform .2s ease;pointer-events:none;box-shadow:0 1px 3px #0000001a}.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch--disabled{opacity:.5;cursor:not-allowed}")),document.head.appendChild(s)}}catch(c){console.error("vite-plugin-css-injected-by-js",c)}})();
|
|
2
|
+
(function(e,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],c):(e=typeof globalThis<"u"?globalThis:e||self,c(e.VsSwitch={},e.Vue))})(this,function(e,c){"use strict";var r=document.createElement("style");r.textContent=`[data-theme=dark] .vs-switch,.dark .vs-switch{--vs-switch-bg-unchecked: #3a3a3a;--vs-switch-bg-checked: #1f73b7;--vs-switch-thumb: #ffffff;--vs-switch-border: #555555}.vs-switch{--vs-switch-bg-unchecked: #e9ebed;--vs-switch-bg-checked: #1f73b7;--vs-switch-thumb: #ffffff;--vs-switch-border: #d1d5db;--vs-switch-primary: #1f73b7;--vs-switch-success: #186146;--vs-switch-danger: #cc3340;--vs-switch-warning: #ffb057;--vs-switch-secondary: #3a3a3a;--vs-switch-indigo: #4f46e5;--vs-switch-cyan: #06b6d4;--vs-switch-orange: #f97316;--vs-switch-crimson: #dc2626;--vs-switch-gray: #6b7280;position:relative;display:inline-flex;align-items:center;justify-content:flex-start;cursor:pointer;border:none;padding:0;background:none;transition:all .2s ease;border-radius:var(--vs-switch-border-radius)}.vs-switch:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--vs-switch-bg-checked)}.vs-switch:disabled{cursor:not-allowed;opacity:.5}.vs-switch__size-small{width:36px;height:20px;--vs-switch-border-radius: 10px}.vs-switch__size-small .vs-switch__thumb{width:16px;height:16px}.vs-switch__size-small.vs-switch--checked .vs-switch__thumb{transform:translate(16px)}.vs-switch__size-medium{width:44px;height:24px;--vs-switch-border-radius: 12px}.vs-switch__size-medium .vs-switch__thumb{width:20px;height:20px}.vs-switch__size-medium.vs-switch--checked .vs-switch__thumb{transform:translate(20px)}.vs-switch__size-large{width:52px;height:28px;--vs-switch-border-radius: 14px}.vs-switch__size-large .vs-switch__thumb{width:24px;height:24px}.vs-switch__size-large.vs-switch--checked .vs-switch__thumb{transform:translate(24px)}.vs-switch__radius-none{--vs-switch-border-radius: 0}.vs-switch__radius-small{--vs-switch-border-radius: 4px}.vs-switch__radius-medium{--vs-switch-border-radius: 6px}.vs-switch__radius-large{--vs-switch-border-radius: 8px}.vs-switch__radius-full{--vs-switch-border-radius: 100px}.vs-switch__variant-classic{background:var(--vs-switch-bg-unchecked);border:1px solid var(--vs-switch-border)}.vs-switch__variant-classic.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked));border-color:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch__variant-surface{background:#f0f1f3;border:1px solid transparent}.vs-switch__variant-surface.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}[data-theme=dark] .vs-switch__variant-surface,.dark .vs-switch__variant-surface{background:#4a5568}[data-theme=dark] .vs-switch__variant-surface.vs-switch--checked,.dark .vs-switch__variant-surface.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch__variant-soft{background:rgba(31,115,183,.1);border:1px solid transparent}.vs-switch__variant-soft.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}[data-theme=dark] .vs-switch__variant-soft,.dark .vs-switch__variant-soft{background:rgba(31,115,183,.2)}[data-theme=dark] .vs-switch__variant-soft.vs-switch--checked,.dark .vs-switch__variant-soft.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch__color-primary.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #1f73b7)}.vs-switch__color-success.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #186146)}.vs-switch__color-danger.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #cc3340)}.vs-switch__color-warning.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #ffb057)}.vs-switch__color-warning.vs-switch--checked .vs-switch__thumb{background:#703815}.vs-switch__color-secondary.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #3a3a3a)}.vs-switch__color-indigo.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #4f46e5)}.vs-switch__color-cyan.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #06b6d4)}.vs-switch__color-orange.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #f97316)}.vs-switch__color-crimson.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #dc2626)}.vs-switch__color-gray.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #6b7280)}.vs-switch--high-contrast.vs-switch__color-primary.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #0d47a1)}.vs-switch--high-contrast.vs-switch__color-indigo.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #3730a3)}.vs-switch--high-contrast.vs-switch__color-cyan.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #0369a1)}.vs-switch--high-contrast.vs-switch__color-orange.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #c2410c)}.vs-switch--high-contrast.vs-switch__color-crimson.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #7f1d1d)}.vs-switch--high-contrast.vs-switch__color-gray.vs-switch--checked{background:var(--vs-switch-checked-bg-color, #374151)}.vs-switch__thumb{position:absolute;left:2px;width:20px;height:20px;background:var(--vs-switch-thumb);border-radius:50%;transition:transform .2s ease;pointer-events:none;box-shadow:0 1px 3px #0000001a}.vs-switch--checked{background:var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked))}.vs-switch--disabled{opacity:.5;cursor:not-allowed}
|
|
3
|
+
`,document.head.appendChild(r);const u="",v=(s,t)=>{const i=s.__vccOpts||s;for(const[o,d]of t)i[o]=d;return i},n={name:"VsSwitch",props:{modelValue:{type:Boolean,default:!1},size:{type:String,default:"medium",validator:s=>["small","medium","large"].includes(s)},variant:{type:String,default:"classic",validator:s=>["classic","surface","soft"].includes(s)},color:{type:String,default:"primary"},highContrast:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},ariaLabel:{type:String},checkedBgColor:{type:String}},emits:["update:modelValue","change"],computed:{isChecked(){return this.modelValue},classList(){return[`vs-switch__size-${this.size}`,`vs-switch__variant-${this.variant}`,`vs-switch__color-${this.color}`,{"vs-switch--checked":this.isChecked,"vs-switch--disabled":this.disabled,"vs-switch--high-contrast":this.highContrast}]},cssVars(){return{"--vs-switch-checked-bg-color":this.checkedBgColor}},isCssVars(){return this.checkedBgColor?this.cssVars:""}},methods:{toggle(){if(!this.disabled){const s=!this.isChecked;this.$emit("update:modelValue",s),this.$emit("change",s)}}}},w=["aria-checked","aria-label","disabled"];function l(s,t,i,o,d,h){return c.openBlock(),c.createElementBlock("button",{class:c.normalizeClass(["vs-switch",h.classList]),style:c.normalizeStyle(h.isCssVars),"aria-checked":h.isChecked,"aria-label":i.ariaLabel,role:"switch",type:"button",disabled:i.disabled,onClick:t[0]||(t[0]=(...b)=>h.toggle&&h.toggle(...b))},[...t[1]||(t[1]=[c.createElementVNode("span",{class:"vs-switch__thumb"},null,-1)])],14,w)}const a=v(n,[["render",l]]),_={install(s){s.component("VsSwitch",a)}};e.default=a,e.plugin=_,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuesimple/vs-switch",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.6",
|
|
4
4
|
"description": "A simple vue switch component. Toggle switch alternative to the checkbox.",
|
|
5
5
|
"main": "dist/index.umd.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -10,10 +10,9 @@
|
|
|
10
10
|
"build": "rm -rfv dist && vite build --config build/vite.config.js"
|
|
11
11
|
},
|
|
12
12
|
"devDependencies": {
|
|
13
|
-
"@vitejs/plugin-vue": "^
|
|
13
|
+
"@vitejs/plugin-vue": "^4.2.3",
|
|
14
14
|
"sass": "^1.54.4",
|
|
15
|
-
"vite": "^
|
|
16
|
-
"vite-plugin-style-inject": "0.0.1",
|
|
15
|
+
"vite": "^4.4.5",
|
|
17
16
|
"vue": "^3.2.37"
|
|
18
17
|
},
|
|
19
18
|
"private": false,
|
|
@@ -44,5 +43,5 @@
|
|
|
44
43
|
"url": "https://github.com/ashwinkshenoy/vue-simple/issues"
|
|
45
44
|
},
|
|
46
45
|
"homepage": "https://github.com/ashwinkshenoy/vue-simple",
|
|
47
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "471beacd03d92a90d196c219edf169c87399f701"
|
|
48
47
|
}
|
package/src/vs-switch.vue
CHANGED
|
@@ -78,7 +78,6 @@
|
|
|
78
78
|
`vs-switch__size-${this.size}`,
|
|
79
79
|
`vs-switch__variant-${this.variant}`,
|
|
80
80
|
`vs-switch__color-${this.color}`,
|
|
81
|
-
`vs-switch__radius-${this.radius}`,
|
|
82
81
|
{
|
|
83
82
|
'vs-switch--checked': this.isChecked,
|
|
84
83
|
'vs-switch--disabled': this.disabled,
|
|
@@ -153,7 +152,9 @@
|
|
|
153
152
|
|
|
154
153
|
&:focus-visible {
|
|
155
154
|
outline: none;
|
|
156
|
-
box-shadow:
|
|
155
|
+
box-shadow:
|
|
156
|
+
0 0 0 2px #ffffff,
|
|
157
|
+
0 0 0 4px var(--vs-switch-bg-checked);
|
|
157
158
|
}
|
|
158
159
|
|
|
159
160
|
&:disabled {
|