@@ -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
4249const 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
6876function 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" ;
96104styleInject ( css_248z ) ;
97105
98106script . 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
0 commit comments