1+ <template >
2+ <div :class =" classes"
3+ <input ref =" input" :type =" _type" :name =" name"
4+ :checked =" shouldBeChecked" :value =" value" @change =" updateInput"
5+ :disabled =" _disabled" :required =" _required"
6+ <div :class =" onClasses"
7+ <slot name =" extra" slot >
8+ <label >
9+ <slot ></slot >
10+ </label >
11+ </div >
12+ <div v-if =" _toggle" :class =" offClasses"
13+ <slot name =" off-extra" slot >
14+ <slot name =" off-label" slot >
15+ </div >
16+ <div v-if =" _hover" :class =" hoverClasses"
17+ <slot name =" hover-extra" slot >
18+ <slot name =" hover-label" slot >
19+ </div >
20+ <div v-if =" indeterminate" :class =" indeterminateClasses"
21+ <slot name =" indeterminate-extra" slot >
22+ <slot name =" indeterminate-label" slot >
23+ </div >
24+ </div >
25+ </template >
26+
27+ <script >
28+ export default {
29+ name: " pretty-input"
30+
31+ model: {
32+ prop: ' modelValue'
33+ event : ' change'
34+ },
35+
36+ props: {
37+ type: String ,
38+ name: String ,
39+ value: String ,
40+ modelValue: {},
41+ trueValue: {},
42+ falseValue: {},
43+ checked: {},
44+ disabled: {},
45+ required: {},
46+ indeterminate: {},
47+ color: String ,
48+ offColor: String ,
49+ hoverColor: String ,
50+ indeterminateColor: String ,
51+ toggle: {},
52+ hover: {},
53+ focus: {},
54+ },
55+
56+ data () {
57+ return {
58+ default_mode: false ,
59+ }
60+ },
61+
62+ computed: {
63+ _type () {
64+ if (this .$options .input_type )
65+ return this .$options .input_type ;
66+ if (this .type )
67+ return this .type ;
68+
69+ return ' checkbox'
70+ },
71+ shouldBeChecked () {
72+ if (this .modelValue !== undefined ) {
73+ // radio
74+ if (this ._type === ' radio'
75+ return this .modelValue === this .value ;
76+ }
77+
78+ // checkbox
79+ if (this .modelValue instanceof Array ) {
80+ return this .modelValue .includes (this .value );
81+ }
82+ if (this ._trueValue ) {
83+ return this .modelValue === this .trueValue ;
84+ }
85+ return typeof this .modelValue === ' string' ? true : !! this .modelValue ;
86+ }
87+
88+ return typeof this .checked === ' string' ? true : !! this .checked ;
89+ },
90+ _disabled () {
91+ return typeof this .disabled === ' string' ? true : !! this .disabled ;
92+ },
93+ _required () {
94+ return typeof this .required === ' string' ? true : !! this .required ;
95+ },
96+ _trueValue () {
97+ return typeof this .trueValue === ' string' ? this .trueValue : !! this .trueValue ;
98+ },
99+ _falseValue () {
100+ return typeof this .falseValue === ' string' ? this .falseValue : !! this .falseValue ;
101+ },
102+ _toggle () {
103+ return typeof this .toggle === ' string' ? true : !! this .toggle ;
104+ },
105+ _hover () {
106+ return typeof this .hover === ' string' ? true : !! this .hover ;
107+ },
108+ _focus () {
109+ return typeof this .focus === ' string' ? true : !! this .focus ;
110+ },
111+ classes () {
112+ return {
113+ pretty: true ,
114+ ' p-default' : this .default_mode ,
115+ ' p-toggle' : this ._toggle ,
116+ ' p-has-hover' : this ._hover ,
117+ ' p-has-focus' : this ._focus ,
118+ ' p-has-indeterminate' : this .indeterminate ,
119+ };
120+ },
121+ onClasses () {
122+ let classes = {
123+ state: true ,
124+ ' p-on' : this ._toggle ,
125+ };
126+ if (this .color )
127+ classes[` p-${ this .color } ` = true ;
128+
129+ return classes;
130+ },
131+ offClasses () {
132+ let classes = {
133+ state: true ,
134+ ' p-off' : true ,
135+ };
136+ if (this .offColor )
137+ classes[` p-${ this .offColor } ` = true ;
138+
139+ return classes;
140+ },
141+ hoverClasses () {
142+ let classes = {
143+ state: true ,
144+ ' p-is-hover' : true ,
145+ };
146+ if (this .hoverColor )
147+ classes[` p-${ this .hoverColor } ` = true ;
148+
149+ return classes;
150+ },
151+ indeterminateClasses () {
152+ let classes = {
153+ state: true ,
154+ ' p-is-indeterminate' : true ,
155+ };
156+ if (this .indeterminateColor )
157+ classes[` p-${ this .indeterminateColor } ` = true ;
158+
159+ return classes;
160+ }
161+ },
162+
163+ watch: {
164+ indeterminate (v ) {
165+ this .$refs .input .indeterminate = v;
166+ },
167+ },
168+
169+ mounted () {
170+ if (this .$vnode .data && ! this .$vnode .data .staticClass )
171+ this .default_mode = true ;
172+ },
173+
174+ methods: {
175+ updateInput (event ) {
176+ if (this ._type === ' radio'
177+ this .$emit (' change' this .value );
178+ return ;
179+ }
180+
181+ let isChecked = event .target .checked ;
182+
183+ if (this .modelValue instanceof Array ) {
184+ let newValue = [... this .modelValue ];
185+
186+ if (isChecked) {
187+ newValue .push (this .value );
188+ } else {
189+ newValue .splice (newValue .indexOf (this .value ), 1 );
190+ }
191+
192+ this .$emit (' change'
193+ } else {
194+ this .$emit (' change' ? (this ._trueValue ? this .trueValue : true ) : (this ._falseValue ? this .falseValue : false ));
195+ }
196+ }
197+ }
198+ };
199+ script >
0 commit comments