@winchsa/ui 0.1.33 → 0.1.34

package/dist/components/forms/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: Object, 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>

package/dist/components/forms/CustomCheckboxesWithImage.vue.d.ts

@@ -0,0 +1,16 @@
+import type { GridColumn } from '../../types';
+type __VLS_Props = {
+    selectedCheckbox: string[];
+    checkboxContent: {
+        bgImage: string;
+        value: string;
+    }[];
+    gridColumn?: GridColumn;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/components/forms/CustomRadios.d.vue.ts

@@ -0,0 +1,25 @@
+import type { CustomInputContent, GridColumn } from '../../types';
+type __VLS_Props = {
+    selectedRadio: string;
+    radioContent: CustomInputContent[];
+    gridColumn?: GridColumn;
+};
+declare var __VLS_32: {
+    item: CustomInputContent;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_32) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:selectedRadio": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:selectedRadio"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/CustomRadios.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { ref, watch, toRaw } from "vue";
+import { VLabel, VRadio, VSpacer, VRadioGroup, VCol, VRow } from "vuetify/components";
+const props = defineProps({
+  selectedRadio: { type: String, required: true },
+  radioContent: { type: Array, required: true },
+  gridColumn: { type: Object, required: false }
+});
+const emit = defineEmits(["update:selectedRadio"]);
+const selectedOption = ref(structuredClone(toRaw(props.selectedRadio)));
+watch(selectedOption, () => {
+  emit("update:selectedRadio", selectedOption.value);
+});
+</script>
+
+<template>
+  <VRadioGroup
+    v-if="radioContent"
+    v-model="selectedOption"
+  >
+    <VRow>
+      <VCol
+        v-for="item in radioContent"
+        :key="item.title"
+        v-bind="gridColumn"
+      >
+        <VLabel
+          class="custom-input custom-radio rounded cursor-pointer"
+          :class="selectedOption === item.value ? 'active' : ''"
+        >
+          <div>
+            <VRadio :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>
+  </VRadioGroup>
+</template>
+
+<style scoped>
+.custom-radio {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.375rem;
+}
+.custom-radio .v-radio {
+  margin-block-start: -0.25rem;
+}
+.custom-radio .cr-title {
+  font-weight: 500;
+}
+</style>

package/dist/components/forms/CustomRadios.vue.d.ts

@@ -0,0 +1,25 @@
+import type { CustomInputContent, GridColumn } from '../../types';
+type __VLS_Props = {
+    selectedRadio: string;
+    radioContent: CustomInputContent[];
+    gridColumn?: GridColumn;
+};
+declare var __VLS_32: {
+    item: CustomInputContent;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_32) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:selectedRadio": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:selectedRadio"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/CustomRadiosWithIcon.d.vue.ts

@@ -0,0 +1,28 @@
+import type { CustomInputContent, GridColumn } from '../../types';
+type __VLS_Props = {
+    selectedRadio: string | number;
+    label?: string;
+    radioContent: CustomInputContent[];
+    gridColumn?: GridColumn;
+    errorMessages?: string;
+    rules?: ((value: unknown) => typeof value | string)[];
+};
+declare var __VLS_31: {
+    item: CustomInputContent;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_31) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:selectedRadio": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:selectedRadio"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/CustomRadiosWithIcon.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { ref, watch, toRaw, computed } from "vue";
+import { VLabel, VRadio, VRadioGroup, VCol, VRow, VIcon } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+const props = defineProps({
+  selectedRadio: { type: [String, Number], required: true },
+  label: { type: String, required: false },
+  radioContent: { type: Array, required: true },
+  gridColumn: { type: Object, required: false },
+  errorMessages: { type: String, required: false },
+  rules: { type: Array, required: false }
+});
+const emit = defineEmits(["update:selectedRadio"]);
+const selectedOption = ref(structuredClone(toRaw(props.selectedRadio)));
+watch(selectedOption, () => {
+  emit("update:selectedRadio", selectedOption.value);
+});
+watch(() => props.selectedRadio, () => {
+  selectedOption.value = props.selectedRadio;
+}, { immediate: true });
+const labelLang = computed(() => props.label ? t("inputs.placeholder_select", { name: t(props.label) }) : "");
+</script>
+
+<template>
+  <div v-if="radioContent">
+    <VLabel
+      class="font-weight-bold mb-4 text-body-2 text-high-emphasis"
+      :text="labelLang"
+    />
+
+    <VRadioGroup v-model="selectedOption" :rules="rules" :error-messages="errorMessages">
+      <VRow>
+        <VCol
+          v-for="item in radioContent"
+          :key="item.title"
+          v-bind="gridColumn"
+        >
+          <VLabel
+            class="custom-input custom-radio-icon app-rounded-6 cursor-pointer"
+            :class="[selectedOption === item.value ? 'active' : '', errorMessages ? 'border-error' : '']"
+          >
+            <slot :item="item">
+              <div class="d-flex flex-column align-center text-center gap-2">
+                <VIcon
+                  v-bind="item.icon"
+                  class="text-high-emphasis"
+                />
+                <img
+                  :src="item.image"
+                  alt="radio image"
+                  class="img-fluid"
+                >
+                <h6 class="cr-title text-base">
+                  {{ item.title }}
+                </h6>
+
+                <p v-if="item.desc" class="text-sm mb-0 clamp-text">
+                  {{ item.desc }}
+                </p>
+              </div>
+            </slot>
+
+            <div>
+              <VRadio :value="item.value" />
+            </div>
+          </VLabel>
+        </VCol>
+      </VRow>
+    </VRadioGroup>
+  </div>
+</template>
+
+<style scoped>
+.custom-radio-icon {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.custom-radio-icon .v-radio {
+  margin-block-end: -0.25rem;
+}
+.custom-radio-icon .cr-title {
+  font-weight: 500;
+}
+.custom-radio-icon img {
+  height: 70px;
+}
+</style>
+
+<style>
+.custom-radio-icon .v-radio {
+  margin-block-end: -0.25rem;
+}
+.custom-radio-icon .v-radio .v-selection-control__wrapper {
+  margin-inline-start: 0;
+}
+</style>

package/dist/components/forms/CustomRadiosWithIcon.vue.d.ts

@@ -0,0 +1,28 @@
+import type { CustomInputContent, GridColumn } from '../../types';
+type __VLS_Props = {
+    selectedRadio: string | number;
+    label?: string;
+    radioContent: CustomInputContent[];
+    gridColumn?: GridColumn;
+    errorMessages?: string;
+    rules?: ((value: unknown) => typeof value | string)[];
+};
+declare var __VLS_31: {
+    item: CustomInputContent;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_31) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:selectedRadio": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:selectedRadio"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/CustomRadiosWithImage.d.vue.ts

@@ -0,0 +1,35 @@
+import type { GridColumn } from '../../types';
+type __VLS_Props = {
+    selectedRadio: string;
+    radioContent: {
+        bgImage?: string;
+        value: string;
+        type?: string;
+    }[];
+    gridColumn?: GridColumn;
+};
+declare var __VLS_29: number, __VLS_30: {
+    item: {
+        bgImage?: string;
+        value: string;
+        type?: string;
+    };
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_29>]?: (props: typeof __VLS_30) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:selectedRadio": (value: string) => any;
+    "clicked-custom": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:selectedRadio"?: ((value: string) => any) | undefined;
+    "onClicked-custom"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/CustomRadiosWithImage.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { ref, watch, toRaw } from "vue";
+import { VRadioGroup, VRow, VCol, VLabel, VRadio } from "vuetify/components";
+const props = defineProps({
+  selectedRadio: { type: String, required: true },
+  radioContent: { type: Array, required: true },
+  gridColumn: { type: Object, required: false }
+});
+const emit = defineEmits(["update:selectedRadio", "clicked-custom"]);
+const selectedOption = ref(structuredClone(toRaw(props.selectedRadio)));
+watch(selectedOption, () => {
+  emit("update:selectedRadio", selectedOption.value);
+});
+watch(() => props.selectedRadio, (val) => {
+  selectedOption.value = val;
+});
+</script>
+
+<template>
+  <VRadioGroup
+    v-if="radioContent"
+    v-model="selectedOption"
+  >
+    <VRow>
+      <VCol
+        v-for="(item, index) in radioContent"
+        :key="item.bgImage"
+        v-bind="gridColumn"
+        :style="{
+  maxWidth: $attrs?.['max-width']
+}"
+      >
+        <VLabel
+          class="custom-input custom-radio rounded cursor-pointer w-100"
+          :class="selectedOption === item.value ? 'active' : ''"
+          @click="item?.type === 'custom' ? emit('clicked-custom') : ''"
+        >
+          <img
+            v-if="item.bgImage"
+            :src="item.bgImage"
+            alt="bg-img"
+            class="custom-radio-image"
+          >
+          <slot v-else :item="item" :name="index" />
+          <VRadio
+            v-show="item.bgImage"
+            :value="item.value"
+            :disabled="item?.type === 'custom'"
+          />
+        </VLabel>
+      </VCol>
+    </VRow>
+  </VRadioGroup>
+</template>
+
+<style scoped>
+.custom-radio {
+  padding: 0 !important;
+  border-width: 2px !important;
+}
+.custom-radio .custom-radio-image {
+  block-size: 100%;
+  inline-size: 100%;
+  min-inline-size: 100%;
+}
+.custom-radio .v-radio {
+  visibility: hidden;
+}
+</style>

package/dist/components/forms/CustomRadiosWithImage.vue.d.ts

@@ -0,0 +1,35 @@
+import type { GridColumn } from '../../types';
+type __VLS_Props = {
+    selectedRadio: string;
+    radioContent: {
+        bgImage?: string;
+        value: string;
+        type?: string;
+    }[];
+    gridColumn?: GridColumn;
+};
+declare var __VLS_29: number, __VLS_30: {
+    item: {
+        bgImage?: string;
+        value: string;
+        type?: string;
+    };
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_29>]?: (props: typeof __VLS_30) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:selectedRadio": (value: string) => any;
+    "clicked-custom": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:selectedRadio"?: ((value: string) => any) | undefined;
+    "onClicked-custom"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/DatePicker.d.vue.ts

@@ -0,0 +1,29 @@
+import 'v-calendar/style.css';
+type __VLS_Props = {
+    modelValue?: string | Date;
+    format?: string;
+    displayFormat?: string;
+    label?: string;
+    forcedLabel?: string;
+    minDate?: string | Date | null;
+    maxDate?: string | Date | null;
+    placeholder?: string;
+    disabled?: boolean | undefined;
+    errorMessages?: string | string[];
+    clearable?: boolean;
+    clearIcon?: string;
+    required?: boolean;
+    rules?: ((value: unknown) => typeof value | string)[];
+    showToday?: boolean;
+    hideErrorMessage?: boolean;
+    inTable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | Date) => any;
+    resetSelectedDate: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | Date) => any) | undefined;
+    onResetSelectedDate?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;