chore: clean
This commit is contained in:
parent
ab41dc981f
commit
0faecf0752
6 changed files with 25 additions and 96 deletions
|
|
@ -1,91 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import AppBox from 'components/app/AppBox.vue';
|
|
||||||
|
|
||||||
const selector = defineModel('selector');
|
|
||||||
|
|
||||||
defineProps<{
|
|
||||||
list: {
|
|
||||||
label: string;
|
|
||||||
count: number;
|
|
||||||
}[];
|
|
||||||
clickable?: boolean;
|
|
||||||
}>();
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<AppBox bordered>
|
|
||||||
<q-list>
|
|
||||||
<q-item
|
|
||||||
v-for="v in list"
|
|
||||||
:key="v.label"
|
|
||||||
class="rounded"
|
|
||||||
:class="v.count === 0 ? 'disable-item' : ''"
|
|
||||||
:clickable="v.count > 0 || clickable"
|
|
||||||
:active="selector === v.label"
|
|
||||||
:active-class="
|
|
||||||
selector === v.label
|
|
||||||
? $q.dark.isActive
|
|
||||||
? 'active dark'
|
|
||||||
: 'active'
|
|
||||||
: ''
|
|
||||||
"
|
|
||||||
@click="selector = v.label"
|
|
||||||
>
|
|
||||||
<div class="row full-width items-center justify-between">
|
|
||||||
<div>
|
|
||||||
{{ $t(v.label) }}
|
|
||||||
</div>
|
|
||||||
<div class="dot text-weight-bold">{{ v.count }}</div>
|
|
||||||
</div>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</AppBox>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.active {
|
|
||||||
color: hsl(var(--info-fg)) !important;
|
|
||||||
background-color: hsl(var(--info-bg));
|
|
||||||
|
|
||||||
.dot {
|
|
||||||
background-color: hsla(var(--info-bg));
|
|
||||||
border: 1px solid hsl(var(--info-bg));
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dark {
|
|
||||||
background-color: transparent;
|
|
||||||
border: 1px solid hsl(var(--info-bg));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.q-item {
|
|
||||||
align-items: center;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
min-height: 0;
|
|
||||||
padding: 0 16px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disable-item {
|
|
||||||
color: hsl(var(--text-mute));
|
|
||||||
|
|
||||||
.dot {
|
|
||||||
color: hsl(var(--text-mute));
|
|
||||||
border: 1px solid transparent;
|
|
||||||
background-color: hsla(var(--text-mute) / 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot {
|
|
||||||
height: 19px;
|
|
||||||
width: 19px;
|
|
||||||
margin-block: 3px;
|
|
||||||
background-color: hsla(var(--info-bg) / 0.1);
|
|
||||||
border: 1px solid transparent;
|
|
||||||
color: hsl(var(--info-bg));
|
|
||||||
border-radius: 50%;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
22
src/components/index.ts
Normal file
22
src/components/index.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
export { default as AddButton } from './AddButton.vue';
|
||||||
|
export { default as AllAroundBtn } from './AllAroundBtn.vue';
|
||||||
|
export { default as ButtonAddCompoent } from './ButtonAddCompoent.vue';
|
||||||
|
export { default as CanvasComponent } from './CanvasComponent.vue';
|
||||||
|
export { default as DialogForm } from './DialogForm.vue';
|
||||||
|
export { default as DrawerComponent } from './DrawerComponent.vue';
|
||||||
|
export { default as DrawerInfo } from './DrawerInfo.vue';
|
||||||
|
export { default as FormDialog } from './FormDialog.vue';
|
||||||
|
export { default as GlobalDialog } from './GlobalDialog.vue';
|
||||||
|
export { default as GlobalLoading } from './GlobalLoading.vue';
|
||||||
|
export { default as ImageUploadDialog } from './ImageUploadDialog.vue';
|
||||||
|
export { default as ItemCard } from './ItemCard.vue';
|
||||||
|
export { default as NoData } from './NoData.vue';
|
||||||
|
export { default as PaginationComponent } from './PaginationComponent.vue';
|
||||||
|
export { default as ProfileBanner } from './ProfileBanner.vue';
|
||||||
|
export { default as ProfileUpload } from './ProfileUpload.vue';
|
||||||
|
export { default as SideMenu } from './SideMenu.vue';
|
||||||
|
export { default as StatCardComponent } from './StatCardComponent.vue';
|
||||||
|
export { default as TabComponent } from './TabComponent.vue';
|
||||||
|
export { default as TooltipComponent } from './TooltipComponent.vue';
|
||||||
|
export { default as TreeCompoent } from './TreeCompoent.vue';
|
||||||
|
export { default as UsersDetailCardComponent } from './UsersDetailCardComponent.vue';
|
||||||
|
|
@ -7,11 +7,9 @@ import { Icon } from '@iconify/vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
import useLoader from 'stores/loader';
|
import useLoader from 'stores/loader';
|
||||||
import DrawerComponent from 'components/DrawerComponent.vue';
|
import ProfileMenu from './ProfileMenu.vue';
|
||||||
import CanvasComponent from 'components/CanvasComponent.vue';
|
|
||||||
import ProfileMenu from 'components/ProfileMenu.vue';
|
|
||||||
import useUserStore from 'src/stores/user';
|
import useUserStore from 'src/stores/user';
|
||||||
import FormDialog from 'components/FormDialog.vue';
|
import { DrawerComponent, CanvasComponent, FormDialog } from 'components/index';
|
||||||
import useOptionStore from 'src/stores/options';
|
import useOptionStore from 'src/stores/options';
|
||||||
import { dialog } from 'src/stores/utils';
|
import { dialog } from 'src/stores/utils';
|
||||||
import { setLocale } from 'src/utils/datetime';
|
import { setLocale } from 'src/utils/datetime';
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import MenuItem from 'components/home/MenuItem.vue';
|
import MenuItem from 'components/00_home/MenuItem.vue';
|
||||||
import useUtilsStore from 'src/stores/utils';
|
import useUtilsStore from 'src/stores/utils';
|
||||||
import { onMounted } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue