9 9
>
10 10
<slot />
11 11
</a>
12 -
<router-link
12 +
<RouterLink
13 13
v-else-if="to"
14 14
:to="to"
15 15
:class="classes"
20 20
role="button"
21 21
@click="onClick"
22 22
><slot
23 -
/></router-link>
23 +
/></RouterLink>
24 24
<label v-else-if="inputType" :class="classes" @click="onClick">
25 25
<input
26 26
autocomplete="off"
53 53
</button>
54 54
</template>
55 55 56 -
<script>
57 -
import linkMixin from '../../mixins/link.mixin';
56 +
<script setup>
58 57
import BtnGroup from './BtnGroup.vue';
58 +
import { computed } from 'vue';
59 59 60 -
const INPUT_TYPE_CHECKBOX = 'checkbox';
61 -
const INPUT_TYPE_RADIO = 'radio';
62 - 63 -
export default {
64 -
components: { BtnGroup },
65 -
mixins: [linkMixin],
66 -
props: {
67 -
justified: {
68 -
type: Boolean,
69 -
default: false,
70 -
},
71 -
type: {
72 -
type: String,
73 -
default: 'default',
74 -
},
75 -
nativeType: {
76 -
type: String,
77 -
default: 'button',
78 -
},
79 -
size: {
80 -
type: String,
81 -
default: undefined,
82 -
},
83 -
block: {
84 -
type: Boolean,
85 -
default: false,
86 -
},
87 -
active: {
88 -
type: Boolean,
89 -
default: false,
90 -
},
91 -
disabled: {
92 -
type: Boolean,
93 -
default: false,
94 -
},
95 -
// <input> props
96 -
modelValue: {
97 -
type: null,
98 -
default: null,
99 -
},
100 -
inputValue: {
101 -
type: null,
102 -
default: null,
103 -
},
104 -
inputType: {
105 -
type: String,
106 -
validator(value) {
107 -
return value === INPUT_TYPE_CHECKBOX || value === INPUT_TYPE_RADIO;
108 -
},
109 -
default: undefined,
60 +
const props = defineProps({
61 +
// <a> props
62 +
href: { type: String, default: undefined },
63 +
target: { type: String, default: undefined },
64 +
// <router-link> props
65 +
to: { type: null, default: undefined },
66 +
replace: { type: Boolean, default: false },
67 +
append: { type: Boolean, default: false },
68 +
exact: { type: Boolean, default: false },
69 +
justified: { type: Boolean, default: false },
70 +
type: { type: String, default: 'default' },
71 +
nativeType: { type: String, default: 'button' },
72 +
size: { type: String, default: undefined },
73 +
block: { type: Boolean, default: false },
74 +
active: { type: Boolean, default: false },
75 +
disabled: { type: Boolean, default: false },
76 +
// <input> props
77 +
modelValue: { type: null, default: null },
78 +
inputValue: { type: null, default: null },
79 +
inputType: {
80 +
type: String,
81 +
validator(value) {
82 +
return value === 'checkbox' || value === 'radio';
110 83
},
84 +
default: undefined,
111 85
},
112 -
emits: ['update:modelValue'],
113 -
computed: {
114 -
isInputActive() {
115 -
return this.inputType === INPUT_TYPE_CHECKBOX
116 -
? this.modelValue.indexOf(this.inputValue) >= 0
117 -
: this.modelValue === this.inputValue;
118 -
},
119 -
classes() {
120 -
return {
121 -
btn: true,
122 -
active: this.inputType ? this.isInputActive : this.active,
123 -
disabled: this.disabled,
124 -
'btn-block': this.block,
125 -
[`btn-${this.type}`]: Boolean(this.type),
126 -
[`btn-${this.size}`]: Boolean(this.size),
127 -
};
128 -
},
129 -
},
130 -
methods: {
131 -
onClick(e) {
132 -
if (this.disabled && e instanceof Event) {
133 -
e.preventDefault();
134 -
e.stopPropagation();
135 -
}
136 -
},
137 -
onInputChange() {
138 -
if (this.inputType === INPUT_TYPE_CHECKBOX) {
139 -
const valueCopied = this.modelValue.slice();
140 -
if (this.isInputActive) {
141 -
valueCopied.splice(valueCopied.indexOf(this.inputValue), 1);
142 -
} else {
143 -
valueCopied.push(this.inputValue);
144 -
}
145 -
this.$emit('update:modelValue', valueCopied);
146 -
} else {
147 -
this.$emit('update:modelValue', this.inputValue);
148 -
}
149 -
},
150 -
},
151 -
};
152 -
</script>
86 +
});
87 + 88 +
const emit = defineEmits(['update:modelValue']);
89 + 90 +
const isInputActive = computed(() =>
91 +
props.inputType === 'checkbox'
92 +
? props.modelValue.indexOf(props.inputValue) >= 0
93 +
: props.modelValue === props.inputValue
94 +
);
95 +
const classes = computed(() => ({
96 +
btn: true,
97 +
active: props.inputType ? isInputActive.value : props.active,
98 +
disabled: props.disabled,
99 +
'btn-block': props.block,
100 +
[`btn-${props.type}`]: Boolean(props.type),
101 +
[`btn-${props.size}`]: Boolean(props.size),
102 +
}));
153 103 154 -
<style scoped></style>
104 +
function onClick(e) {
105 +
if (props.disabled && e instanceof Event) {
106 +
e.preventDefault();
107 +
e.stopPropagation();
108 +
}
109 +
}
110 + 111 +
function onInputChange() {
112 +
if (props.inputType === 'checkbox') {
113 +
const valueCopied = props.modelValue.slice();
114 +
if (isInputActive.value) {
115 +
valueCopied.splice(valueCopied.indexOf(props.inputValue), 1);
116 +
} else {
117 +
valueCopied.push(props.inputValue);
118 +
}
119 +
emit('update:modelValue', valueCopied);
120 +
} else {
121 +
emit('update:modelValue', props.inputValue);
122 +
}
123 +
}
124 +
</script>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4