@winchsa/ui 0.1.0

package/dist/components/core/app-form-elements/AppSelect.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { VLabel, VSelect } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+defineOptions({
+  name: "AppSelect",
+  inheritAttrs: false
+});
+const { t } = useI18n();
+const attrs = useAttrs();
+const emit = defineEmits(["update:model-value"]);
+const elementId = computed(() => {
+  const _elementIdToken = attrs.id || attrs.label;
+  return _elementIdToken ? `app-select-${_elementIdToken}-${Math.random().toString(36).slice(2, 7)}` : void 0;
+});
+const label = computed(() => attrs?.label);
+const LangLabel = computed(() => label.value ? t(label.value) : "");
+const placeholder = computed(() => {
+  if (attrs?.placeholder) {
+    return attrs?.placeholder;
+  }
+  if (label.value) {
+    return t("inputs.placeholder_select", {
+      name: LangLabel.value
+    });
+  }
+  return "";
+});
+const handleMenuToggle = ($event) => {
+  const container = document.getElementsByClassName("v-overlay-container");
+  if (!$event) {
+    if (container && container[0]) {
+      for (let i = 0; i < container[0].children.length; i++) {
+        if (container[0].children[i].classList.contains(".v-menu")) {
+          container[0].children[i].remove();
+        }
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div
+    class="app-select flex-grow-1"
+    :class="$attrs.class"
+  >
+    <VLabel
+      v-if="label"
+      :for="elementId"
+      class="mb-2 text-body-2 text-high-emphasis app-font-size-13"
+      :text="LangLabel"
+    />
+
+    <VSelect
+      v-bind="{
+  ...$attrs,
+  class: null,
+  label: void 0,
+  variant: 'outlined',
+  id: elementId,
+  menuProps: {
+    contentClass: ['app-inner-list', 'app-select__content', 'v-select__content', $attrs.multiple !== void 0 ? 'v-list-select-multiple' : '',
+    // @ts-ignore
+    ...[$attrs?.['menu-props']?.contentClass || '']]
+  }
+}"
+      class="app-font-size-13"
+      :class="{
+  'hide-arrow': !!$attrs.modelValue && $attrs?.clearable
+}"
+      :placeholder="placeholder"
+      :no-data-text="t('no_data')"
+      persistent-clear
+      @update:model-value="e => emit('update:model-value', e)"
+      @update:menu="handleMenuToggle"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        #[name]="slotProps"
+      >
+        <slot
+          :name="name"
+          v-bind="slotProps || {}"
+        />
+      </template>
+      <template #details>
+        <span class="app-h-10px" />
+      </template>
+    </VSelect>
+  </div>
+</template>
+
+<style scoped>
+.hide-arrow :deep(.v-field__append-inner) {
+  display: none;
+}
+</style>

package/dist/components/core/app-form-elements/AppSwitch.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { VLabel, VSwitch } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+defineProps({
+  labelSwitch: { type: String, required: false }
+});
+defineOptions({
+  name: "AppSwitch",
+  inheritAttrs: false
+});
+const { t } = useI18n();
+const elementId = computed(() => {
+  const attrs = useAttrs();
+  const _elementIdToken = attrs.id || attrs.label;
+  return _elementIdToken ? `app-switch-${_elementIdToken}-${Math.random().toString(36).slice(2, 7)}` : void 0;
+});
+const label = computed(() => useAttrs().label);
+const LangLabel = computed(() => label.value ? t(label.value) : "");
+</script>
+
+<template>
+  <div
+    class="d-flex flex-column"
+    :class="$attrs.class"
+  >
+    <div>
+      <VLabel
+        v-if="label"
+        :for="elementId"
+        class="mb-2 text-body-2 text-high-emphasis"
+        :text="LangLabel"
+      />
+    </div>
+    <div>
+      <VSwitch
+        v-bind="{
+  ...$attrs,
+  class: null,
+  label: void 0,
+  variant: 'outlined',
+  id: elementId
+}"
+        :label="labelSwitch"
+        class="item-center h-100"
+      >
+        <template
+          v-for="(_, name) in $slots"
+          #[name]="slotProps"
+        >
+          <slot
+            :name="name"
+            v-bind="slotProps || {}"
+          />
+        </template>
+      </VSwitch>
+    </div>
+  </div>
+</template>

package/dist/components/core/app-form-elements/AppSwitch.vue.d.ts

@@ -0,0 +1,27 @@
+import { VLabel, VSwitch } from 'vuetify/components';
+type __VLS_Props = {
+    labelSwitch?: string;
+};
+declare const elementId: import("vue").ComputedRef<string | undefined>;
+declare const label: import("vue").ComputedRef<string | undefined>;
+declare const LangLabel: import("vue").ComputedRef<string>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_10: any, __VLS_11: any;
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    VLabel: typeof VLabel;
+    VSwitch: typeof VSwitch;
+    elementId: typeof elementId;
+    label: typeof label;
+    LangLabel: typeof LangLabel;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/core/app-form-elements/AppTextField.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { VLabel, VTextField } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+defineOptions({
+  name: "AppTextField",
+  inheritAttrs: false
+});
+const { t } = useI18n();
+const elementId = computed(() => {
+  const attrs = useAttrs();
+  const _elementIdToken = attrs.id || attrs.label;
+  return _elementIdToken ? `AppTextField-${_elementIdToken}-${Math.random().toString(36).slice(2, 7)}` : void 0;
+});
+const label = computed(() => useAttrs()?.label);
+const LangLabel = computed(() => label.value ? t(label.value) : "");
+const placeholder = computed(() => {
+  if (useAttrs()?.placeholder) {
+    return useAttrs()?.placeholder;
+  }
+  if (label.value) {
+    return t("inputs.placeholder", {
+      name: LangLabel.value
+    });
+  }
+  return "";
+});
+</script>
+
+<template>
+  <div
+    class="AppTextField flex-grow-1"
+    :class="$attrs.class"
+  >
+    <VLabel
+      v-if="label"
+      :for="elementId"
+      class="mb-2 text-body-2 text-high-emphasis app-font-size-13"
+      :text="LangLabel"
+    />
+    <VTextField
+      v-bind="{
+  ...$attrs,
+  class: null,
+  label: void 0,
+  variant: 'outlined',
+  id: elementId
+}"
+      :placeholder="placeholder"
+      class="app-font-size-13"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        #[name]="slotProps"
+      >
+        <slot
+          :name="name"
+          v-bind="slotProps || {}"
+        />
+      </template>
+      <template #details>
+        <span class="app-h-10px" />
+      </template>
+    </VTextField>
+  </div>
+</template>

package/dist/components/core/app-form-elements/AppTextField.vue.d.ts

@@ -0,0 +1,26 @@
+import { VLabel, VTextField } from 'vuetify/components';
+declare const elementId: import("vue").ComputedRef<string | undefined>;
+declare const label: import("vue").ComputedRef<string | null>;
+declare const LangLabel: import("vue").ComputedRef<string>;
+declare const placeholder: import("vue").ComputedRef<string>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_10: any, __VLS_11: any;
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<{}, {
+    VLabel: typeof VLabel;
+    VTextField: typeof VTextField;
+    elementId: typeof elementId;
+    label: typeof label;
+    LangLabel: typeof LangLabel;
+    placeholder: typeof placeholder;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/core/app-form-elements/AppTextarea.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { VLabel, VTextarea } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+defineOptions({
+  name: "AppTextarea",
+  inheritAttrs: false
+});
+const { t } = useI18n();
+const elementId = computed(() => {
+  const attrs = useAttrs();
+  const _elementIdToken = attrs.id || attrs.label;
+  return _elementIdToken ? `app-textarea-${_elementIdToken}-${Math.random().toString(36).slice(2, 7)}` : void 0;
+});
+const label = computed(() => useAttrs()?.label);
+const LangLabel = computed(() => label.value ? t(label.value) : "");
+const placeholder = computed(() => {
+  if (useAttrs()?.placeholder) {
+    return useAttrs()?.placeholder;
+  }
+  if (label.value) {
+    return t("inputs.placeholder", {
+      name: LangLabel.value
+    });
+  }
+  return "";
+});
+</script>
+
+<template>
+  <div
+    class="app-textarea flex-grow-1"
+    :class="$attrs.class"
+  >
+    <VLabel
+      v-if="label"
+      :for="elementId"
+      class="mb-2 text-body-2 text-high-emphasis"
+      :text="LangLabel"
+    />
+    <VTextarea
+      v-bind="{
+  ...$attrs,
+  class: null,
+  label: void 0,
+  variant: 'outlined',
+  id: elementId
+}"
+      :placeholder="placeholder"
+      class="w-100"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        #[name]="slotProps"
+      >
+        <slot
+          :name="name"
+          v-bind="slotProps || {}"
+        />
+      </template>
+    </VTextarea>
+  </div>
+</template>
+
+<style scoped>
+:deep(textarea) {
+  padding: 15px 20px !important;
+}
+</style>

package/dist/components/core/app-form-elements/AppTextarea.vue.d.ts

@@ -0,0 +1,26 @@
+import { VLabel, VTextarea } from 'vuetify/components';
+declare const elementId: import("vue").ComputedRef<string | undefined>;
+declare const label: import("vue").ComputedRef<string | null>;
+declare const LangLabel: import("vue").ComputedRef<string>;
+declare const placeholder: import("vue").ComputedRef<string>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_10: any, __VLS_11: any;
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<{}, {
+    VLabel: typeof VLabel;
+    VTextarea: typeof VTextarea;
+    elementId: typeof elementId;
+    label: typeof label;
+    LangLabel: typeof LangLabel;
+    placeholder: typeof placeholder;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/core/app-form-elements/CustomCheckboxes.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { watch, ref, toRaw } from "vue";
+import { VLabel, VCheckbox, VSpacer, VCol, VRow } from "vuetify/components";
+const props = defineProps({
+  selectedCheckbox: { type: Array, required: true },
+  checkboxContent: { type: Array, required: true },
+  gridColumn: { type: null, required: false }
+});
+const emit = defineEmits(["update:selectedCheckbox"]);
+const selectedOption = ref(structuredClone(toRaw(props.selectedCheckbox)));
+watch(selectedOption, () => {
+  emit("update:selectedCheckbox", selectedOption.value);
+});
+</script>
+
+<template>
+  <VRow
+    v-if="checkboxContent && selectedOption"
+    v-model="selectedOption"
+  >
+    <VCol
+      v-for="item in checkboxContent"
+      :key="item.title"
+      v-bind="gridColumn"
+    >
+      <VLabel
+        class="custom-input custom-checkbox rounded cursor-pointer"
+        :class="selectedOption.includes(item.value) ? 'active' : ''"
+      >
+        <div>
+          <VCheckbox
+            v-model="selectedOption"
+            :value="item.value"
+          />
+        </div>
+        <slot :item="item">
+          <div class="flex-grow-1">
+            <div class="d-flex align-center mb-1">
+              <h6 class="cr-title text-base">
+                {{ item.title }}
+              </h6>
+              <VSpacer />
+              <span v-if="item.subtitle" class="text-disabled text-base">
+                {{ item.subtitle }}
+              </span>
+            </div>
+            <p class="text-sm mb-0">
+              {{ item.desc }}
+            </p>
+          </div>
+        </slot>
+      </VLabel>
+    </VCol>
+  </VRow>
+</template>
+
+<style scoped>
+.custom-checkbox {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+.custom-checkbox .v-checkbox {
+  margin-block-start: -0.375rem;
+}
+.custom-checkbox .cr-title {
+  font-weight: 500;
+}
+</style>

package/dist/components/core/app-form-elements/CustomCheckboxes.vue.d.ts

@@ -0,0 +1,39 @@
+import { VLabel, VCheckbox, VSpacer, VCol, VRow } from 'vuetify/components';
+import type { CustomInputContent, GridColumn } from '../../../types/core';
+type __VLS_Props = {
+    selectedCheckbox: string[];
+    checkboxContent: CustomInputContent[];
+    gridColumn?: GridColumn;
+};
+declare const selectedOption: import("vue").Ref<string[], string[]>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_18: {
+    item: any;
+};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_18) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    VLabel: typeof VLabel;
+    VCheckbox: typeof VCheckbox;
+    VSpacer: typeof VSpacer;
+    VCol: typeof VCol;
+    VRow: typeof VRow;
+    selectedOption: typeof selectedOption;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:selectedCheckbox": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:selectedCheckbox"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:selectedCheckbox": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:selectedCheckbox"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/core/app-form-elements/CustomCheckboxesWithIcon.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { ref, watch, toRaw } from "vue";
+import { VLabel, VCheckbox, VIcon, VCol, VRow } from "vuetify/components";
+const props = defineProps({
+  selectedCheckbox: { type: Array, required: true },
+  checkboxContent: { type: Array, required: true },
+  gridColumn: { type: null, required: false }
+});
+const emit = defineEmits(["update:selectedCheckbox"]);
+const selectedOption = ref(structuredClone(toRaw(props.selectedCheckbox)));
+watch(selectedOption, () => {
+  emit("update:selectedCheckbox", selectedOption.value);
+});
+</script>
+
+<template>
+  <VRow
+    v-if="checkboxContent && selectedOption"
+    v-model="selectedOption"
+  >
+    <VCol
+      v-for="item in checkboxContent"
+      :key="item.title"
+      v-bind="gridColumn"
+    >
+      <VLabel
+        class="custom-input custom-checkbox-icon rounded cursor-pointer"
+        :class="selectedOption.includes(item.value) ? 'active' : ''"
+      >
+        <slot :item="item">
+          <div class="d-flex flex-column align-center text-center gap-2">
+            <VIcon
+              v-bind="item.icon"
+              class="text-high-emphasis"
+            />
+
+            <h6 class="cr-title text-base">
+              {{ item.title }}
+            </h6>
+            <p class="text-sm clamp-text mb-0">
+              {{ item.desc }}
+            </p>
+          </div>
+        </slot>
+        <div>
+          <VCheckbox
+            v-model="selectedOption"
+            :value="item.value"
+          />
+        </div>
+      </VLabel>
+    </VCol>
+  </VRow>
+</template>
+
+<style scoped>
+.custom-checkbox-icon {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.custom-checkbox-icon .v-checkbox {
+  margin-block-end: -0.375rem;
+}
+.custom-checkbox-icon .v-checkbox .v-selection-control__wrapper {
+  margin-inline-start: 0;
+}
+.custom-checkbox-icon .cr-title {
+  font-weight: 500;
+}
+</style>
+
+<style>
+.custom-checkbox-icon .v-checkbox {
+  margin-block-end: -0.375rem;
+}
+.custom-checkbox-icon .v-checkbox .v-selection-control__wrapper {
+  margin-inline-start: 0;
+}
+</style>

package/dist/components/core/app-form-elements/CustomCheckboxesWithIcon.vue.d.ts

@@ -0,0 +1,39 @@
+import { VLabel, VCheckbox, VIcon, VCol, VRow } from 'vuetify/components';
+import type { CustomInputContent, GridColumn } from '../../../types/core';
+type __VLS_Props = {
+    selectedCheckbox: string[];
+    checkboxContent: CustomInputContent[];
+    gridColumn?: GridColumn;
+};
+declare const selectedOption: import("vue").Ref<string[], string[]>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_14: {
+    item: any;
+};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_14) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    VLabel: typeof VLabel;
+    VCheckbox: typeof VCheckbox;
+    VIcon: typeof VIcon;
+    VCol: typeof VCol;
+    VRow: typeof VRow;
+    selectedOption: typeof selectedOption;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:selectedCheckbox": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:selectedCheckbox"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:selectedCheckbox": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:selectedCheckbox"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/core/app-form-elements/CustomCheckboxesWithImage.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { ref, watch, toRaw } from "vue";
+import { VLabel, VCheckbox, VCol, VRow } from "vuetify/components";
+const props = defineProps({
+  selectedCheckbox: { type: Array, required: true },
+  checkboxContent: { type: Array, required: true },
+  gridColumn: { type: null, required: false }
+});
+const emit = defineEmits(["update:selectedCheckbox"]);
+const selectedOption = ref(structuredClone(toRaw(props.selectedCheckbox)));
+watch(selectedOption, () => {
+  emit("update:selectedCheckbox", selectedOption.value);
+});
+</script>
+
+<template>
+  <VRow
+    v-if="checkboxContent && selectedOption"
+    v-model="selectedOption"
+  >
+    <VCol
+      v-for="item in checkboxContent"
+      :key="item.value"
+      v-bind="gridColumn"
+    >
+      <VLabel
+        class="custom-input custom-checkbox rounded cursor-pointer w-100"
+        :class="selectedOption.includes(item.value) ? 'active' : ''"
+      >
+        <div>
+          <VCheckbox
+            v-model="selectedOption"
+            :value="item.value"
+          />
+        </div>
+        <img
+          :src="item.bgImage"
+          alt="bg-img"
+          class="custom-checkbox-image"
+        >
+      </VLabel>
+    </VCol>
+  </VRow>
+</template>
+
+<style scoped>
+.custom-checkbox {
+  position: relative;
+  padding: 0;
+  border-width: 2px;
+  transition: all 0.5s;
+}
+.custom-checkbox .custom-checkbox-image {
+  block-size: 100%;
+  inline-size: 100%;
+  min-inline-size: 100%;
+}
+.custom-checkbox .v-checkbox {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  visibility: hidden;
+}
+.custom-checkbox:hover .v-checkbox, .custom-checkbox.active .v-checkbox {
+  visibility: visible;
+}
+</style>