@winchsa/ui 0.1.33 → 0.1.34

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

@@ -0,0 +1,19 @@
+declare var __VLS_1: {}, __VLS_10: {}, __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {} | {
+    [x: string]: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/AppLink.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { RouterLink } from "vue-router";
+import { computed } from "vue";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  // @ts-ignore
+  ...RouterLink.props,
+  to: {
+    type: [String, Object],
+    default: void 0
+  },
+  withoutDefaultClass: {
+    type: Boolean,
+    default: false
+  }
+});
+const isExternalLink = computed(() => {
+  return typeof props.to === "string" && (props.to.startsWith("http") || props.to.startsWith("https"));
+});
+</script>
+
+<template>
+  <a
+    v-if="isExternalLink"
+    v-bind="$attrs"
+    :href="to"
+    target="_blank"
+    :class="[{ 'hover-underline': !withoutDefaultClass }, ...($attrs?.class || [])]"
+  >
+    <slot />
+  </a>
+
+  <RouterLink
+    v-else-if="to"
+    v-bind="$attrs"
+    :to="to"
+    :class="[{ 'hover-underline': !withoutDefaultClass }, ...($attrs?.class || [])]"
+  >
+    <slot />
+  </RouterLink>
+
+  <span
+    v-else
+    v-bind="$attrs"
+  >
+    <slot />
+  </span>
+</template>

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

@@ -0,0 +1,19 @@
+declare var __VLS_1: {}, __VLS_10: {}, __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {} | {
+    [x: string]: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/AppNumberField.d.vue.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    modelValue?: string | null | number;
+};
+declare var __VLS_17: string | number, __VLS_18: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => 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/AppNumberField.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { ref, watch, useAttrs, computed } from "vue";
+import { VTextField, VLabel } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+const attrs = useAttrs();
+defineOptions({
+  name: "AppTextField",
+  inheritAttrs: false
+});
+const props = defineProps({
+  modelValue: { type: [String, null, Number], required: false, default: null }
+});
+const emit = defineEmits(["update:modelValue"]);
+const numberValue = ref(null);
+const uid = Math.random().toString(36).slice(2, 7);
+const toDigits = (value) => {
+  return String(value ?? "").replace(/\D/g, "") || null;
+};
+const label = computed(() => attrs.label);
+const langLabel = computed(() => label.value ? t(label.value) : "");
+const elementId = computed(() => {
+  const token = attrs.id || label.value;
+  return token ? `AppTextField-${token}-${uid}` : void 0;
+});
+const placeholder = computed(() => {
+  return attrs.placeholder || (label.value ? t("inputs.placeholder", { name: langLabel.value }) : "");
+});
+watch(() => props.modelValue, (val) => {
+  numberValue.value = toDigits(val);
+  emit("update:modelValue", numberValue.value);
+}, { immediate: true });
+const validateInput = (event) => {
+  const input = event.target;
+  numberValue.value = toDigits(numberValue.value);
+  input.value = numberValue.value ?? "";
+  emit("update:modelValue", numberValue.value);
+};
+</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
+}"
+      v-model="numberValue"
+      :placeholder="placeholder"
+      class="app-font-size-13"
+      @input="validateInput"
+    >
+      <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/forms/AppNumberField.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    modelValue?: string | null | number;
+};
+declare var __VLS_17: string | number, __VLS_18: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => 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/AppOtpInput.d.vue.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    totalInput?: number;
+    modelValue?: string;
+    errorMessages?: string;
+    isAppRtl?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/forms/AppOtpInput.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import AppTextField from "./AppTextField.vue";
+const props = defineProps({
+  totalInput: { type: Number, required: false, default: 4 },
+  modelValue: { type: String, required: false, default: "" },
+  errorMessages: { type: String, required: false, default: "" },
+  isAppRtl: { type: Boolean, required: false }
+});
+const { t } = useI18n();
+const emit = defineEmits(["update:modelValue"]);
+const digits = ref([]);
+const refOtpComp = ref(null);
+onMounted(() => {
+  if (props.modelValue) {
+    digits.value = props.modelValue.split("");
+  }
+});
+const handleBackspace = (event, index) => {
+  digits.value[index - 1] = "";
+  if (refOtpComp.value !== null && index > 1) {
+    const inputEl = refOtpComp.value.children[index - 2].querySelector("input");
+    if (inputEl) {
+      inputEl.focus();
+    }
+  }
+};
+const handleNextInput = (event, index) => {
+  digits.value[index - 1] = event.key;
+  if (refOtpComp.value !== null && index !== 0 && index < refOtpComp.value.children.length) {
+    const inputEl = refOtpComp.value.children[index].querySelector("input");
+    if (inputEl) {
+      inputEl.focus();
+    }
+  }
+};
+const handleKeyDown = (event, index) => {
+  if (event.code !== "Tab" && event.code !== "ArrowRight" && event.code !== "ArrowLeft") {
+    event.preventDefault();
+  }
+  if (event.code === "Backspace") {
+    handleBackspace(event, index);
+  }
+  if (/^([0-9])$/.test(event.key)) {
+    handleNextInput(event, index);
+  }
+  emit("update:modelValue", digits.value.join(""));
+};
+</script>
+
+<template>
+  <div>
+    <h6 class="text-h6 mb-3">
+      {{ t('mobile_verification_enter_code') }}
+    </h6>
+    <div
+      ref="refOtpComp"
+      class="d-flex align-center gap-4 otp-input"
+      :class="{
+  'flex-row-reverse': isAppRtl
+}"
+    >
+      <AppTextField
+        v-for="i in props.totalInput"
+        :key="i"
+        :model-value="digits[i - 1]"
+        maxlength="1"
+        :error="errorMessages?.length > 0"
+        @keydown="handleKeyDown($event, i)"
+      />
+    </div>
+    <div class="text-error mt-2">
+      {{ errorMessages }}
+    </div>
+  </div>
+</template>
+
+<style>
+.otp-input input {
+  font-size: 1.25rem;
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    totalInput?: number;
+    modelValue?: string;
+    errorMessages?: string;
+    isAppRtl?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    title?: string;
+    subtitle?: string;
+    customClass?: string;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/components/forms/AppSearchHeader.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { VCardText, VIcon } from "vuetify/components";
+import AppSearchHeaderBg from "../../images/avatar.png";
+import AppCard from "../cards/AppCard.vue";
+import AppTextField from "./AppTextField.vue";
+defineProps({
+  title: { type: String, required: false },
+  subtitle: { type: String, required: false },
+  customClass: { type: String, required: false }
+});
+defineOptions({
+  inheritAttrs: false
+});
+</script>
+
+<template>
+  <!--  Search Banner  -->
+  <AppCard
+    flat
+    class="text-center search-header"
+    :class="customClass"
+    :style="`background: url(${AppSearchHeaderBg});`"
+  >
+    <VCardText>
+      <h5 class="text-h3 font-weight-medium">
+        {{ title }}
+      </h5>
+
+      <!--  Search Input -->
+      <AppTextField
+        v-bind="$attrs"
+        placeholder="Search a question..."
+        class="search-header-input mx-auto my-3"
+        density="comfortable"
+      >
+        <template #prepend-inner>
+          <VIcon
+            icon="tabler-search"
+            size="23"
+          />
+        </template>
+      </AppTextField>
+
+      <p class="mb-0">
+        {{ subtitle }}
+      </p>
+    </VCardText>
+  </AppCard>
+</template>
+
+<style>
+.search-header {
+  padding: 4rem !important;
+  background-size: cover !important;
+}
+
+.search-header-input {
+  border-radius: 0.25rem !important;
+  border-radius: 0.375rem !important;
+  background-color: rgb(var(--v-theme-surface));
+  max-inline-size: 40.125rem !important;
+}
+.search-header-input .v-field__prepend-inner i {
+  inset-block-start: 3px !important;
+}
+
+@media (max-width: 37.5rem) {
+  .search-header {
+    padding: 1.5rem !important;
+  }
+}
+</style>

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    title?: string;
+    subtitle?: string;
+    customClass?: string;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,17 @@
+declare var __VLS_18: string | number, __VLS_19: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_18>]?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    "onUpdate:model-value"?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/AppSelect.vue

@@ -0,0 +1,91 @@
+<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 uid = Math.random().toString(36).slice(2, 7);
+const label = computed(() => attrs.label);
+const langLabel = computed(() => label.value ? t(label.value) : "");
+const elementId = computed(() => {
+  const token = attrs.id || label.value;
+  return token ? `app-select-${token}-${uid}` : void 0;
+});
+const placeholder = computed(() => {
+  return attrs.placeholder || (label.value ? t("inputs.placeholder_select", { name: langLabel.value }) : "");
+});
+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 !important;
+}
+</style>

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

@@ -0,0 +1,17 @@
+declare var __VLS_18: string | number, __VLS_19: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_18>]?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    "onUpdate:model-value"?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/AppStepper.d.vue.ts

@@ -0,0 +1,21 @@
+type Item = {
+    title: string;
+    icon?: string;
+    size?: string;
+    subtitle?: string;
+};
+type Direction = 'vertical' | 'horizontal';
+type __VLS_Props = {
+    items: Item[];
+    currentStep?: number;
+    direction?: Direction;
+    iconSize?: string | number;
+    isActiveStepValid?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:currentStep": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:currentStep"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;