nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-19 00:22:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

added prettier

Browse Source
This commit is contained in:
Čarodej
2022-02-01 12:21:38 +01:00
parent 5ae875233b
commit b38b532cbe
284 changed files with 25410 additions and 25338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
resources/js/components/Others/Forms/SelectBoxInput.vue
View File

@@ -1,92 +1,79 @@
<template>
<div class="select-box">
<div class="box-item active-bg-theme-100 active-border-theme"
:class="{'active': item.value === input}"
@click="getSelectedValue(item)"
v-for="(item, i) in data" :key="i"
>
<div class="box-item active-bg-theme-100 active-border-theme" :class="{ active: item.value === input }" @click="getSelectedValue(item)" v-for="(item, i) in data" :key="i">
<span class="box-value active-text-theme">{{ item.label }}</span>
</div>
</div>
</template>
<script>
export default {
name: 'SelectBoxInput',
props: [
'data',
'value',
],
data() {
return {
input: undefined,
}
},
methods: {
getSelectedValue(item) {
if (! this.input || this.input !== item.value)
this.input = item.value
else
this.input = undefined
this.$emit('input', this.input)
}
},
created() {
if (this.value)
this.input = this.value
export default {
name: 'SelectBoxInput',
props: ['data', 'value'],
data() {
return {
input: undefined,
}
}
},
methods: {
getSelectedValue(item) {
if (!this.input || this.input !== item.value) this.input = item.value
else this.input = undefined
this.$emit('input', this.input)
},
},
created() {
if (this.value) this.input = this.value
},
}
</script>
<style lang="scss" scoped>
@import '../../../../sass/vuefilemanager/variables';
@import '../../../../sass/vuefilemanager/mixins';
@import "../../../../sass/vuefilemanager/inapp-forms";
@import "../../../../sass/vuefilemanager/forms";
@import '../../../../sass/vuefilemanager/variables';
@import '../../../../sass/vuefilemanager/mixins';
@import '../../../../sass/vuefilemanager/inapp-forms';
@import '../../../../sass/vuefilemanager/forms';
.select-box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
.select-box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
margin-bottom: 10px;
.box-item {
margin-bottom: 10px;
padding: 12px 4px;
text-align: center;
background: $light_background;
border-radius: 8px;
font-weight: 700;
border: 2px solid $light_background;
cursor: pointer;
flex-direction: column;
flex-basis: 55px;
.box-value {
@include font-size(15);
}
}
}
@media only screen and (max-width: 960px) {
.select-box {
.box-item {
margin-bottom: 10px;
padding: 12px 4px;
text-align: center;
background: $light_background;
border-radius: 8px;
font-weight: 700;
border: 2px solid $light_background;
cursor: pointer;
flex-direction: column;
flex-basis: 55px;
.box-value {
@include font-size(15);
}
flex-basis: calc(34% - 10px);
}
}
}
@media only screen and (max-width: 960px) {
.select-box {
.box-item {
flex-basis: calc(34% - 10px);
}
}
}
.dark {
.select-box {
.box-item {
border-color: $dark_mode_border_color;
background: lighten($dark_mode_foreground, 3%);
}
.dark {
.select-box {
.box-item {
border-color: $dark_mode_border_color;
background: lighten($dark_mode_foreground, 3%);
}
}
}
</style>