51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
Vue
<script>
|
|
import FilterOption from "@/components/gallery/FilterOption.vue";
|
|
|
|
export default {
|
|
components: {FilterOption},
|
|
props: {
|
|
options: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
initialOption: {
|
|
type: String
|
|
},
|
|
},
|
|
|
|
data: function () {
|
|
return {
|
|
selectedOption: this.initialOption,
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
selectedOption: function () {
|
|
this.$emit('change', this.selectedOption)
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<!-- <ul id="gallery-filter" class="flex flex-row flex-wrap text-left mt-50">-->
|
|
<ul id="gallery-filter"
|
|
class="grid grid-cols-1 sm:grid-cols-2 md:flex md:flex-wrap gap-y-2.5 gap-x-6
|
|
text-left mt-50">
|
|
<!-- class="flex-auto mr-2.5 mb-2.5 text-white font-general-regular text-xl cursor-pointer select-none"-->
|
|
<FilterOption
|
|
class="text-white font-general-light text-xl lg:text-2xl cursor-pointer select-none tracking-wide"
|
|
|
|
v-for="(option, index) in options"
|
|
:key="index"
|
|
:name="option.name"
|
|
:value="option.value"
|
|
:isActive="selectedOption === option.value"
|
|
@change="selectedOption = $event"/>
|
|
</ul>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
|
|
</style>
|