chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: add more customize option

Browse source
This commit is contained in:
Methapon2001 2024-04-10 14:29:20 +07:00
parent f716a74295
commit a5a4e4018f
1 changed files with 18 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/home/PersonCard.vue
View file

@ -1,9 +1,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { Icon } from '@iconify/vue';
import AppBox from 'components/app/AppBox.vue'; import AppBox from 'components/app/AppBox.vue';
import AppCircle from '../app/AppCircle.vue'; import AppCircle from 'components/app/AppCircle.vue';
import { Icon } from '@iconify/vue';
defineProps<{ defineProps<{
list: { list: {
@ -16,6 +16,9 @@ defineProps<{
badge?: string; badge?: string;
img?: string; img?: string;
}[]; }[];
gridColumns?: number;
noHover?: boolean;
noAction?: boolean;
detailColumnCount?: number; detailColumnCount?: number;
}>(); }>();
@ -31,20 +34,29 @@ const status = ref(false);
<div <div
class="person-container" class="person-container"
:style="`grid-template-columns: repeat( ${ :style="`grid-template-columns: repeat( ${
$q.screen.gt.sm ? '4, 1fr' : $q.screen.gt.xs ? '2, 1fr' : '1, 1fr' gridColumns
? `${gridColumns}, 1fr`
: $q.screen.gt.sm
? '4, 1fr'
: $q.screen.gt.xs
? '2, 1fr'
: '1, 1fr'
})`" })`"
> >
<AppBox <AppBox
bordered bordered
class="column person-box" class="column person-box"
:class="{ 'person-box__disabled': v.disabled }" :class="{
'person-box__disabled': v.disabled,
'person-box__no-hover': noHover,
}"
style="padding: 0" style="padding: 0"
v-for="(v, i) in list" v-for="(v, i) in list"
:key="i" :key="i"
> >
<div class="q-pa-sm column items-center"> <div class="q-pa-sm column items-center">
<!-- kebab menu --> <!-- kebab menu -->
<div class="full-width text-right"> <div class="full-width text-right" v-if="!noAction">
<q-btn flat round padding="sm" icon="mdi-dots-vertical" size="sm"> <q-btn flat round padding="sm" icon="mdi-dots-vertical" size="sm">
<q-menu :offset="[0, 10]" style="width: 130px"> <q-menu :offset="[0, 10]" style="width: 130px">
<q-list> <q-list>
@ -266,7 +278,7 @@ const status = ref(false);
align-items: center; align-items: center;
} }
&:not(.person-box__disabled):hover { &:not(.person-box__disabled):not(.person-box__no-hover):hover {
--_hover: hsl(var(--gender-male)); --_hover: hsl(var(--gender-male));
cursor: pointer; cursor: pointer;
box-shadow: var(--shadow-2); box-shadow: var(--shadow-2);