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

refactor: responsive

Browse source
This commit is contained in:
Methapon2001 2025-01-29 14:33:47 +07:00
parent 4a088c1aab
commit 1ae5d5b603
1 changed files with 49 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

93
src/components/shared/SelectZone.vue
View file

@ -11,7 +11,6 @@ const selectedItem = defineModel<unknown[]>('selectedItem', { default: [] });
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
// eslint-disable-next-line @typescript-eslint/no-explicit-any
items: any; items: any;
newItems?: any; newItems?: any;
color?: string; color?: string;
@ -78,7 +77,6 @@ function assignSelect(to: unknown[], from: unknown[]) {
} }
</script> </script>
<template> <template>
{{ console.log(selectedItem) }}
<section class="full-width column"> <section class="full-width column">
<header <header
class="row items-center q-px-md q-py-sm" class="row items-center q-px-md q-py-sm"
@ -86,64 +84,71 @@ function assignSelect(to: unknown[], from: unknown[]) {
> >
<div class="col-12 col-md"><slot name="top"></slot></div> <div class="col-12 col-md"><slot name="top"></slot></div>
<ToggleView v-model="viewMode" class="q-mr-sm full-height" /> <div class="row items-stretch col-12 col-md-4 no-wrap">
<ToggleView
v-model="viewMode"
class="q-mr-sm"
style="margin-left: 0; !important"
/>
<q-input <q-input
for="input-search" for="input-search"
outlined outlined
dense dense
:label="$t('general.search')" class="col"
class="col-12 col-md-3" :label="$t('general.search')"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="search" v-model="search"
debounce="300" debounce="300"
> >
<template #prepend> <template #prepend>
<q-icon name="mdi-magnify" /> <q-icon name="mdi-magnify" />
</template> </template>
</q-input> </q-input>
</div>
</header> </header>
<slot name="tab"></slot> <slot name="tab"></slot>
<section class="col q-ma-md"> <section class="col q-ma-md">
<div <div
v-if="items.length > 0 || newItems.length > 0" v-if="items.length > 0 || newItems.length > 0"
class="column" class="column full-height relative-position"
style="gap: var(--size-4)" style="gap: var(--size-4)"
> >
<!-- NOTE: START - item --> <div style="inset: 0" class="absolute scroll">
<div class="row q-col-gutter-md"> <!-- NOTE: START - item -->
<TableProductAndService <div class="row q-col-gutter-md">
v-model:selected="selectedItem" <TableProductAndService
:rows="items" v-model:selected="selectedItem"
:grid="viewMode" :rows="items"
:type :grid="viewMode"
> :type
<template #grid="{ item }"> >
<div :key="item.index" :class="`${itemClass}`"> <template #grid="{ item }">
<div <div :key="item.index" :class="`${itemClass}`">
class="rounded cursor-pointer relative-position"
:style="`border: 1px solid ${
item._selectedIndex !== -1 ? color : 'transparent'
}`"
@click="() => select(item)"
>
<div <div
v-if="item._selectedIndex !== -1" class="rounded cursor-pointer relative-position"
class="badge absolute-top-right flex justify-center q-ma-sm" :style="`border: 1px solid ${
:style="`background-color: ${color}`" item._selectedIndex !== -1 ? color : 'transparent'
}`"
@click="() => select(item)"
> >
{{ item._selectedIndex + 1 }} <div
v-if="item._selectedIndex !== -1"
class="badge absolute-top-right flex justify-center q-ma-sm"
:style="`background-color: ${color}`"
>
{{ item._selectedIndex + 1 }}
</div>
<slot name="data" :item="item"></slot>
</div> </div>
<slot name="data" :item="item"></slot>
</div> </div>
</div> </template>
</template> </TableProductAndService>
</TableProductAndService> </div>
</div> </div>
<!-- NOTE: END - item --> <!-- NOTE: END - item -->
</div> </div>
<div v-else class="flex justify-center full-height"> <div v-else class="flex justify-center full-height">
<span class="col column items-center justify-center app-text-muted"> <span class="col column items-center justify-center app-text-muted">
<q-avatar style="background: var(--surface-0)" class="q-mb-md"> <q-avatar style="background: var(--surface-0)" class="q-mb-md">