mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-23 09:40:39 +00:00
vue components refactoring
This commit is contained in:
Čarodej
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<b class="color-label inline-block rounded-lg py-1 px-2 text-xs font-bold capitalize" :class="color">
|
||||
<slot />
|
||||
</b>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ColorLabel',
|
||||
props: ['color'],
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../../../sass/vuefilemanager/variables';
|
||||
|
||||
.color-label {
|
||||
&.purple {
|
||||
color: $purple;
|
||||
background: rgba($purple, 0.1);
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
color: $yellow;
|
||||
background: rgba($yellow, 0.1);
|
||||
}
|
||||
|
||||
&.green {
|
||||
color: $theme;
|
||||
background: rgba($theme, 0.1);
|
||||
}
|
||||
|
||||
&.red {
|
||||
color: $danger;
|
||||
background: rgba($danger, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="mb-8 flex items-center">
|
||||
<edit-2-icon v-if="!icon" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<frown-icon v-if="icon === 'frown'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<list-icon v-if="icon === 'list'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<info-icon v-if="icon === 'info'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<database-icon v-if="icon === 'database'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<file-text-icon v-if="icon === 'file-text'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<dollar-sign-icon v-if="icon === 'dollar'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<credit-card-icon v-if="icon === 'credit-card'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<bar-chart-icon v-if="icon === 'bar-chart'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<settings-icon v-if="icon === 'settings'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<hard-drive-icon v-if="icon === 'hard-drive'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<mail-icon v-if="icon === 'mail'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<smartphone-icon v-if="icon === 'smartphone'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<shield-icon v-if="icon === 'shield'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<bell-icon v-if="icon === 'bell'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<key-icon v-if="icon === 'key'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<users-icon v-if="icon === 'users'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<wifi-icon v-if="icon === 'wifi'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<trending-up-icon v-if="icon === 'trending-up'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
|
||||
<b class="text-md font-bold dark:text-gray-200 sm:text-lg">
|
||||
<slot />
|
||||
</b>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
TrendingUpIcon,
|
||||
WifiIcon,
|
||||
ListIcon,
|
||||
MailIcon,
|
||||
InfoIcon,
|
||||
DatabaseIcon,
|
||||
UsersIcon,
|
||||
ShieldIcon,
|
||||
CreditCardIcon,
|
||||
DollarSignIcon,
|
||||
SmartphoneIcon,
|
||||
HardDriveIcon,
|
||||
BarChartIcon,
|
||||
SettingsIcon,
|
||||
FileTextIcon,
|
||||
FrownIcon,
|
||||
Edit2Icon,
|
||||
BellIcon,
|
||||
KeyIcon,
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'FormLabel',
|
||||
props: ['icon'],
|
||||
components: {
|
||||
TrendingUpIcon,
|
||||
WifiIcon,
|
||||
ListIcon,
|
||||
MailIcon,
|
||||
InfoIcon,
|
||||
DatabaseIcon,
|
||||
UsersIcon,
|
||||
CreditCardIcon,
|
||||
DollarSignIcon,
|
||||
SmartphoneIcon,
|
||||
HardDriveIcon,
|
||||
BarChartIcon,
|
||||
SettingsIcon,
|
||||
FileTextIcon,
|
||||
ShieldIcon,
|
||||
FrownIcon,
|
||||
Edit2Icon,
|
||||
BellIcon,
|
||||
KeyIcon,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="mb-14">
|
||||
<!--Custom content-->
|
||||
<slot />
|
||||
|
||||
<!--Default application logo-->
|
||||
<div v-if="!$slots.default">
|
||||
<!--Image logo-->
|
||||
<img
|
||||
v-if="config.app_logo"
|
||||
class="mx-auto mb-6 h-16 md:h-20 mb-10"
|
||||
:src="$getImage(logoSrc)"
|
||||
:alt="config.app_name"
|
||||
/>
|
||||
|
||||
<!--Text logo if image isn't available-->
|
||||
<b v-if="!config.app_logo" class="mb-10 block text-xl font-bold">
|
||||
{{ config.app_name }}
|
||||
</b>
|
||||
</div>
|
||||
|
||||
<h1 class="mb-0.5 text-3xl font-extrabold md:text-4xl">
|
||||
{{ title }}
|
||||
</h1>
|
||||
|
||||
<h2 class="text-xl font-normal md:text-2xl">
|
||||
{{ description }}
|
||||
</h2>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Headline',
|
||||
props: ['description', 'title'],
|
||||
computed: {
|
||||
...mapGetters(['config', 'isDarkMode']),
|
||||
logoSrc() {
|
||||
return this.isDarkMode && this.config.app_logo ? this.config.app_logo_dark : this.config.app_logo
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<b class="text-label">
|
||||
<slot />
|
||||
</b>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SectionTitle',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../../../sass/vuefilemanager/variables';
|
||||
@import '../../../../sass/vuefilemanager/mixins';
|
||||
|
||||
.text-label {
|
||||
@include font-size(12);
|
||||
color: #afafaf;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
}
|
||||
|
||||
.dark {
|
||||
.text-label {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<b class="text-label">
|
||||
<slot />
|
||||
</b>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TextLabel',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../../../sass/vuefilemanager/variables';
|
||||
@import '../../../../sass/vuefilemanager/mixins';
|
||||
|
||||
.text-label {
|
||||
padding-left: 25px;
|
||||
@include font-size(12);
|
||||
color: #afafaf;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.text-label {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.text-label {
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="flex items-start">
|
||||
<div class="mr-2">
|
||||
<CheckSquareIcon v-if="icon === 'check-square'" class="text-theme vue-feather" size="19" />
|
||||
<image-icon v-if="icon === 'image'" class="text-theme vue-feather" size="19" />
|
||||
<video-icon v-if="icon === 'video'" class="text-theme vue-feather" size="19" />
|
||||
<folder-icon v-if="icon === 'folder'" class="text-theme vue-feather" size="19" />
|
||||
<file-icon v-if="icon === 'file'" class="text-theme vue-feather" size="19" />
|
||||
</div>
|
||||
<div>
|
||||
<b class="block w-52 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold 2xl:w-72">
|
||||
{{ title }}
|
||||
</b>
|
||||
<small class="block text-xs font-bold text-gray-400">
|
||||
{{ subtitle }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckSquareIcon, FolderIcon, ImageIcon, VideoIcon, FileIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'TitlePreview',
|
||||
props: ['subtitle', 'title', 'icon'],
|
||||
components: {
|
||||
CheckSquareIcon,
|
||||
FolderIcon,
|
||||
ImageIcon,
|
||||
VideoIcon,
|
||||
FileIcon,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user