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