Skip to content

Commit 482f931

Browse files
niels-bosmanniels-bosman
committed
Publish.
1 parent 69f99d6 commit 482f931

File tree

3 files changed

+64
-49
lines changed

3 files changed

+64
-49
lines changed

‎vue-toggle-component/dist/vue-toggle-component.esm.js‎

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ var script = {
1111
type: Boolean,
1212
default: false
1313
},
14-
id: {
15-
type: String,
16-
required: true
14+
disabled: {
15+
type: Boolean,
16+
default: false
1717
},
1818
name: {
19-
type: [String, Boolean],
20-
default: false
19+
type: String,
20+
required: true
2121
},
2222
title: {
2323
type: String,
@@ -33,36 +33,44 @@ var script = {
3333
return {
3434
toggleState: this.toggled
3535
};
36-
}
36+
},
3737

38+
methods: {
39+
toggle() {
40+
if (this.disabled) return;
41+
this.toggleState = !this.toggleState;
42+
}
43+
44+
}
3845
};
3946

40-
const _withId = /*#__PURE__*/withScopeId("data-v-121077f4");
47+
const _withId = /*#__PURE__*/withScopeId("data-v-84279cda");
4148

4249
const render = /*#__PURE__*/_withId((_ctx, _cache, $props, $setup, $data, $options) => {
4350
return openBlock(), createBlock("section", {
44-
class: ["wrapper", {
45-
dark: $props.darkTheme
46-
}],
51+
class: [{
52+
'dark': $props.darkTheme,
53+
'disabled': $props.disabled
54+
}, "wrapper"],
4755
title: $props.title
4856
}, [withDirectives(createVNode("input", {
49-
id: $props.id,
50-
name: $props.name,
57+
id: `_${$props.name}`,
5158
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => $data.toggleState = $event),
59+
disabled: $props.disabled,
60+
name: $props.name,
5261
class: "toggle",
53-
type: "checkbox",
54-
onClick: _cache[2] || (_cache[2] = $event => $data.toggleState = !$data.toggleState)
55-
}, null, 8, ["id", "name"]), [[vModelCheckbox, $data.toggleState]]), createVNode("label", {
56-
for: $props.id,
57-
class: "toggler",
62+
type: "checkbox"
63+
}, null, 8, ["id", "disabled", "name"]), [[vModelCheckbox, $data.toggleState]]), createVNode("label", {
64+
for: $props.name,
5865
style: [$data.toggleState && {
5966
'background': $props.activeColor
60-
}]
67+
}],
68+
class: "toggler",
69+
onClick: _cache[2] || (_cache[2] = (...args) => $options.toggle && $options.toggle(...args))
6170
}, null, 12, ["for"]), createVNode("span", {
6271
class: "title",
63-
textContent: toDisplayString($props.title),
64-
onClick: _cache[3] || (_cache[3] = $event => $data.toggleState = !$data.toggleState)
65-
}, null, 8, ["textContent"])], 10, ["title"]);
72+
onClick: _cache[3] || (_cache[3] = (...args) => $options.toggle && $options.toggle(...args))
73+
}, toDisplayString($props.title), 1)], 10, ["title"]);
6674
});
6775

6876
function styleInject(css, ref) {
@@ -92,11 +100,11 @@ function styleInject(css, ref) {
92100
}
93101
}
94102

95-
var css_248z = "\n.wrapper[data-v-121077f4] {\n display: flex;\n flex-wrap: wrap;\n padding: 5px;\n}\n.wrapper > *[data-v-121077f4] {\n cursor: pointer;\n margin: 0 5px;\n}\n.title[data-v-121077f4] {\n display: inline-block;\n font-weight: 700;\n line-height: 2em;\n vertical-align: middle;\n}\n.title[data-v-121077f4]::selection {\n background: none;\n}\n.dark .title[data-v-121077f4] {\n color: white;\n}\n.toggle[data-v-121077f4] {\n display: none;\n}\n.toggle[data-v-121077f4]:after, .toggle + .toggler[data-v-121077f4] {\n box-sizing: border-box;\n}\n.toggle[data-v-121077f4]:after::selection, .toggle + .toggler[data-v-121077f4]::selection {\n background: none;\n}\n.toggle + .toggler[data-v-121077f4] {\n background: #f0f0f0;\n border-radius: 2em;\n display: block;\n height: 2em;\n outline: 0;\n padding: 2px;\n position: relative;\n transition: background 0.4s ease;\n user-select: none;\n width: 4em;\n will-change: background;\n}\n.toggle + .toggler[data-v-121077f4]:after {\n background: white;\n border-radius: 50%;\n content: \"\";\n display: block;\n height: 100%;\n left: 0;\n position: relative;\n transition: left 0.2s ease;\n width: 50%;\n will-change: left;\n}\n.dark .toggle + .toggler[data-v-121077f4] {\n background: #374151;\n}\n.toggle:checked + .toggler[data-v-121077f4]:after {\n left: 50%;\n}\n";
103+
var css_248z = "\n.wrapper[data-v-84279cda] {\n display: flex;\n flex-wrap: wrap;\n padding: 5px;\n}\n.wrapper > *[data-v-84279cda] {\n cursor: pointer;\n margin: 0 5px;\n}\n.title[data-v-84279cda] {\n display: inline-block;\n font-weight: 700;\n line-height: 2em;\n vertical-align: middle;\n}\n.title[data-v-84279cda]::selection {\n background: none;\n}\n.disabled .title[data-v-84279cda]:hover {\n cursor: not-allowed;\n}\n.dark .title[data-v-84279cda] {\n color: white;\n}\n.toggle[data-v-84279cda] {\n display: none;\n}\n.toggle[data-v-84279cda]:after, .toggle + .toggler[data-v-84279cda] {\n box-sizing: border-box;\n}\n.toggle[data-v-84279cda]:after::selection, .toggle + .toggler[data-v-84279cda]::selection {\n background: none;\n}\n.toggle + .toggler[data-v-84279cda] {\n background: #f0f0f0;\n border-radius: 2em;\n display: block;\n height: 2em;\n outline: 0;\n padding: 2px;\n position: relative;\n transition: background 0.4s ease;\n user-select: none;\n width: 4em;\n will-change: background;\n}\n.toggle + .toggler[data-v-84279cda]:after {\n background: white;\n border-radius: 50%;\n content: \"\";\n display: block;\n height: 100%;\n left: 0;\n position: relative;\n transition: left 0.2s ease;\n width: 50%;\n will-change: left;\n}\n.disabled .toggle + .toggler[data-v-84279cda] {\n opacity: 50%;\n}\n.disabled .toggle + .toggler[data-v-84279cda]:hover {\n cursor: not-allowed;\n}\n.dark .toggle + .toggler[data-v-84279cda] {\n background: #374151;\n}\n.toggle:checked + .toggler[data-v-84279cda]:after {\n left: 50%;\n}\n\n";
96104
styleInject(css_248z);
97105

98106
script.render = render;
99-
script.__scopeId = "data-v-121077f4";
107+
script.__scopeId = "data-v-84279cda";
100108

101109
// Import vue component
102110
// IIFE injects install function into component, allowing component

‎vue-toggle-component/dist/vue-toggle-component.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vue-toggle-component/dist/vue-toggle-component.ssr.js‎

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,13 @@ function _nonIterableRest() {
6666
type: Boolean,
6767
default: false
6868
},
69-
id: {
70-
type: String,
71-
required: true
69+
disabled: {
70+
type: Boolean,
71+
default: false
7272
},
7373
name: {
74-
type: [String, Boolean],
75-
default: false
74+
type: String,
75+
required: true
7676
},
7777
title: {
7878
type: String,
@@ -87,39 +87,46 @@ function _nonIterableRest() {
8787
return {
8888
toggleState: this.toggled
8989
};
90+
},
91+
methods: {
92+
toggle: function toggle() {
93+
if (this.disabled) return;
94+
this.toggleState = !this.toggleState;
95+
}
9096
}
91-
};var _withId = /*#__PURE__*/vue.withScopeId("data-v-121077f4");
97+
};var _withId = /*#__PURE__*/vue.withScopeId("data-v-84279cda");
9298

9399
var render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
94100
return vue.openBlock(), vue.createBlock("section", {
95-
class: ["wrapper", {
96-
dark: $props.darkTheme
97-
}],
101+
class: [{
102+
'dark': $props.darkTheme,
103+
'disabled': $props.disabled
104+
}, "wrapper"],
98105
title: $props.title
99106
}, [vue.withDirectives(vue.createVNode("input", {
100-
id: $props.id,
101-
name: $props.name,
107+
id: "_".concat($props.name),
102108
"onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
103109
return $data.toggleState = $event;
104110
}),
111+
disabled: $props.disabled,
112+
name: $props.name,
105113
class: "toggle",
106-
type: "checkbox",
107-
onClick: _cache[2] || (_cache[2] = function ($event) {
108-
return $data.toggleState = !$data.toggleState;
109-
})
110-
}, null, 8, ["id", "name"]), [[vue.vModelCheckbox, $data.toggleState]]), vue.createVNode("label", {
111-
for: $props.id,
112-
class: "toggler",
114+
type: "checkbox"
115+
}, null, 8, ["id", "disabled", "name"]), [[vue.vModelCheckbox, $data.toggleState]]), vue.createVNode("label", {
116+
for: $props.name,
113117
style: [$data.toggleState && {
114118
'background': $props.activeColor
115-
}]
119+
}],
120+
class: "toggler",
121+
onClick: _cache[2] || (_cache[2] = function () {
122+
return $options.toggle && $options.toggle.apply($options, arguments);
123+
})
116124
}, null, 12, ["for"]), vue.createVNode("span", {
117125
class: "title",
118-
textContent: vue.toDisplayString($props.title),
119-
onClick: _cache[3] || (_cache[3] = function ($event) {
120-
return $data.toggleState = !$data.toggleState;
126+
onClick: _cache[3] || (_cache[3] = function () {
127+
return $options.toggle && $options.toggle.apply($options, arguments);
121128
})
122-
}, null, 8, ["textContent"])], 10, ["title"]);
129+
}, vue.toDisplayString($props.title), 1)], 10, ["title"]);
123130
});function styleInject(css, ref) {
124131
if ( ref === void 0 ) ref = {};
125132
var insertAt = ref.insertAt;
@@ -145,9 +152,9 @@ var render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data,
145152
} else {
146153
style.appendChild(document.createTextNode(css));
147154
}
148-
}var css_248z = "\n.wrapper[data-v-121077f4] {\n display: flex;\n flex-wrap: wrap;\n padding: 5px;\n}\n.wrapper > *[data-v-121077f4] {\n cursor: pointer;\n margin: 0 5px;\n}\n.title[data-v-121077f4] {\n display: inline-block;\n font-weight: 700;\n line-height: 2em;\n vertical-align: middle;\n}\n.title[data-v-121077f4]::selection {\n background: none;\n}\n.dark .title[data-v-121077f4] {\n color: white;\n}\n.toggle[data-v-121077f4] {\n display: none;\n}\n.toggle[data-v-121077f4]:after, .toggle + .toggler[data-v-121077f4] {\n box-sizing: border-box;\n}\n.toggle[data-v-121077f4]:after::selection, .toggle + .toggler[data-v-121077f4]::selection {\n background: none;\n}\n.toggle + .toggler[data-v-121077f4] {\n background: #f0f0f0;\n border-radius: 2em;\n display: block;\n height: 2em;\n outline: 0;\n padding: 2px;\n position: relative;\n transition: background 0.4s ease;\n user-select: none;\n width: 4em;\n will-change: background;\n}\n.toggle + .toggler[data-v-121077f4]:after {\n background: white;\n border-radius: 50%;\n content: \"\";\n display: block;\n height: 100%;\n left: 0;\n position: relative;\n transition: left 0.2s ease;\n width: 50%;\n will-change: left;\n}\n.dark .toggle + .toggler[data-v-121077f4] {\n background: #374151;\n}\n.toggle:checked + .toggler[data-v-121077f4]:after {\n left: 50%;\n}\n";
155+
}var css_248z = "\n.wrapper[data-v-84279cda] {\n display: flex;\n flex-wrap: wrap;\n padding: 5px;\n}\n.wrapper > *[data-v-84279cda] {\n cursor: pointer;\n margin: 0 5px;\n}\n.title[data-v-84279cda] {\n display: inline-block;\n font-weight: 700;\n line-height: 2em;\n vertical-align: middle;\n}\n.title[data-v-84279cda]::selection {\n background: none;\n}\n.disabled .title[data-v-84279cda]:hover {\n cursor: not-allowed;\n}\n.dark .title[data-v-84279cda] {\n color: white;\n}\n.toggle[data-v-84279cda] {\n display: none;\n}\n.toggle[data-v-84279cda]:after, .toggle + .toggler[data-v-84279cda] {\n box-sizing: border-box;\n}\n.toggle[data-v-84279cda]:after::selection, .toggle + .toggler[data-v-84279cda]::selection {\n background: none;\n}\n.toggle + .toggler[data-v-84279cda] {\n background: #f0f0f0;\n border-radius: 2em;\n display: block;\n height: 2em;\n outline: 0;\n padding: 2px;\n position: relative;\n transition: background 0.4s ease;\n user-select: none;\n width: 4em;\n will-change: background;\n}\n.toggle + .toggler[data-v-84279cda]:after {\n background: white;\n border-radius: 50%;\n content: \"\";\n display: block;\n height: 100%;\n left: 0;\n position: relative;\n transition: left 0.2s ease;\n width: 50%;\n will-change: left;\n}\n.disabled .toggle + .toggler[data-v-84279cda] {\n opacity: 50%;\n}\n.disabled .toggle + .toggler[data-v-84279cda]:hover {\n cursor: not-allowed;\n}\n.dark .toggle + .toggler[data-v-84279cda] {\n background: #374151;\n}\n.toggle:checked + .toggler[data-v-84279cda]:after {\n left: 50%;\n}\n\n";
149156
styleInject(css_248z);script.render = render;
150-
script.__scopeId = "data-v-121077f4";// Import vue component
157+
script.__scopeId = "data-v-84279cda";// Import vue component
151158
// IIFE injects install function into component, allowing component
152159
// to be registered via Vue.use() as well as Vue.component(),
153160

0 commit comments

Comments
 (0)