e0c1725001
* refactor: can open one dropdown whe lt.md * style: update MainLayout background color and fix avatar border class name * feat: add touch position binding for dropdown in ProfileMenu * refactor: enhance icon styling in DrawerComponent * fix: update screen size conditions * feat: add responsive search and filter functionality in MainPage * feat: update styling and functionality in BasicInformation and MainPage components * feat: package view mode improve layout and responsiveness * feat: improve layout and responsiveness of ProfileBanner component * feat: enhance TreeView component with improved icon layout and cursor pointer styling * feat: update DialogForm component to prevent text wrapping in the center column * feat: enhance FormDocument, PriceDataComponent, and BasicInfoProduct components with layout and styling improvements * feat: enhance ProfileBanner dark tab * feat: 02 => responsive & responsibleArea type * fix: layout header bg condition & 02 filter col * feat: 04 flow => add AddButton component and enhance layout in FormFlow and FlowDialog * feat: 07 => enhance layout and responsiveness * refactor: simplify header structure and improve layout consistency * fix: improve text color in ItemCard and adjust responsive breakpoints in product service group * refactor: 05 => enhance layout responsiveness and improve class bindings in quotation components * refactor: enhance styling and improve props flexibility in dialog and select components * refactor: 05 => enhance layout responsiveness in quotation components * refactor: 05 => enhance layout responsiveness * refactor: 05 => formWorkerAdd * refactor: 05 => formWorkerAdd Product table * refactor: 05 => improve layout responsiveness and enhance component structure * refactor: enhance grid view handling and improve component imports * refactor: improve column classes for better layout consistency * refactor: 09 => enhance layout structure and improve responsiveness in task order views * refactor: 10 => enhance invoice main page layout and improve component interactions * refactor: 13 => enhance receipt main page layout and improve component interactions * refactor: 11 => enhance layout and improve responsiveness in credit note pages * refactor: 01 => screen.sm search & filter * refactor: 01 => improve layout responsiveness and fix variable naming in branch management forms --------- Co-authored-by: puriphatt <puriphat@frappet.com>
82 lines
1.8 KiB
Vue
82 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { Icon } from '@iconify/vue';
|
|
import { onMounted } from 'vue';
|
|
const props = defineProps<{
|
|
icon: string;
|
|
text: string;
|
|
iconColor: string;
|
|
bgColor: string;
|
|
changeColor?: boolean;
|
|
index?: number;
|
|
}>();
|
|
|
|
const _self = ref<InstanceType<typeof HTMLDivElement>>();
|
|
|
|
onMounted(() => {
|
|
if (props.index === 0) {
|
|
_self.value?.focus();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
ref="_self"
|
|
class="wrapper surface-1 shadow-2"
|
|
type="submit"
|
|
@click="$emit('trigger')"
|
|
style="padding: 0; border-radius: var(--radius-2); width: 320px"
|
|
>
|
|
<div class="column justify-center" style="height: 100%">
|
|
<div class="col-6 flex justify-center items-center">
|
|
<div
|
|
class="q-pa-md row items-center"
|
|
:style="`border-radius: 50%; background-color: hsla(${bgColor} / 0.1)`"
|
|
>
|
|
<Icon :icon="icon" width="53px" :color="`var(${iconColor})`" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col-2 flex text-bold text-h6 text-center justify-center items-center variable-item-card"
|
|
:class="{ dark: $q.dark.isActive }"
|
|
:style="`background-color: ${bgColor}`"
|
|
>
|
|
<div style="font-size: 14px; color: var(--foreground)">
|
|
{{ $t(text) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.variable-item-card {
|
|
--_var-filter: grayscale(30%);
|
|
|
|
filter: var(--_var-filter);
|
|
&.dark {
|
|
--_var-filter: grayscale(0%);
|
|
}
|
|
}
|
|
|
|
.variable-icon-color {
|
|
--_var-filter: grayscale(0%);
|
|
|
|
filter: var(--_var-filter);
|
|
&.dark {
|
|
--_var-filter: color;
|
|
}
|
|
}
|
|
.wrapper {
|
|
appearance: none;
|
|
background: transparent;
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
|
|
.wrapper:focus {
|
|
border: 2px solid var(--blue-6);
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|