@winchsa/ui 0.1.0

package/dist/components/core/cards/CardStatisticsHorizontal.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { VCard, VCardText, VAvatar } from "vuetify/components";
+defineProps({
+  title: { type: String, required: true },
+  color: { type: String, required: false, default: "primary" },
+  icon: { type: String, required: true },
+  stats: { type: String, required: true }
+});
+</script>
+
+<template>
+  <VCard>
+    <VCardText class="d-flex align-center justify-space-between">
+      <div>
+        <div class="d-flex align-center flex-wrap">
+          <span class="text-h5">{{ stats }}</span>
+        </div>
+        <span class="text-body-2">{{ title }}</span>
+      </div>
+
+      <VAvatar
+        :icon="icon"
+        :color="color"
+        :size="42"
+        variant="tonal"
+      />
+    </VCardText>
+  </VCard>
+</template>

package/dist/components/core/cards/CardStatisticsHorizontal.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    title: string;
+    color?: string;
+    icon: string;
+    stats: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/forms/Accordion.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VIcon } from "vuetify/components";
+import { ref } from "vue";
+import BaseButton from "./BaseButton.vue";
+const props = defineProps({
+  title: { type: String, required: false },
+  isOpen: { type: Boolean, required: false, default: true }
+});
+const panel = ref(props.isOpen ? 0 : null);
+</script>
+
+<template>
+  <VExpansionPanels v-model="panel">
+    <VExpansionPanel elevation="0">
+      <div class="d-flex align-center">
+        <VExpansionPanelTitle v-slot="{ expanded }" class="pe-2" hide-actions>
+          <BaseButton
+            color="primary"
+            size="32"
+          >
+            <VIcon
+              :icon="!expanded ? 'tabler-chevron-down' : 'tabler-chevron-up'"
+            />
+          </BaseButton>
+        </VExpansionPanelTitle>
+
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+
+      <VExpansionPanelText>
+        <slot />
+      </VExpansionPanelText>
+    </VExpansionPanel>
+  </VExpansionPanels>
+</template>
+
+<style scoped>
+:deep(.v-expansion-panel-title) {
+  width: fit-content !important;
+}
+</style>

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

@@ -0,0 +1,35 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VIcon } from 'vuetify/components';
+import BaseButton from './BaseButton.vue';
+type __VLS_Props = {
+    title?: string;
+    isOpen?: boolean;
+};
+declare const panel: import("vue").Ref<number | null, number | null>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_21: {}, __VLS_27: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    title?: (props: typeof __VLS_21) => any;
+} & {
+    default?: (props: typeof __VLS_27) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    VExpansionPanels: typeof VExpansionPanels;
+    VExpansionPanel: typeof VExpansionPanel;
+    VExpansionPanelTitle: typeof VExpansionPanelTitle;
+    VExpansionPanelText: typeof VExpansionPanelText;
+    VIcon: typeof VIcon;
+    BaseButton: typeof BaseButton;
+    panel: typeof panel;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    isOpen: boolean;
+}, {}, {}, {}, 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<{}>, {
+    isOpen: boolean;
+}, {}, {}, {}, 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/forms/AppLabel.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { VValidation, VLabel, VMessages } from "vuetify/components";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+defineEmits(["update:modelValue"]);
+const props = defineProps({
+  class: { type: String, required: false },
+  label: { type: String, required: false },
+  rules: { type: Array, required: false },
+  errorMessages: { type: String, required: false },
+  modelValue: { type: null, required: false }
+});
+const { t } = useI18n();
+const LangLabel = computed(() => props.label ? t(props.label) : "");
+</script>
+
+<template>
+  <div>
+    <VValidation
+      v-slot="{ errorMessages: validationErrors, isValid }"
+      :model-value="modelValue"
+      :rules="rules"
+      validate-on="input lazy"
+      @update:model-value="val => $emit('update:modelValue', val)"
+    >
+      <div
+        class="d-flex flex-column w-100"
+        :class="props.class"
+      >
+        <VLabel
+          v-if="label"
+          class="mb-2 text-body-2 text-high-emphasis app-font-size-13"
+          :text="LangLabel"
+        />
+
+        <slot />
+
+        <VMessages
+          v-if="isValid.value === false || errorMessages?.length !== 0"
+          class="text-start"
+          :messages="[validationErrors.value, errorMessages]"
+          :active="isValid.value === false || errorMessages?.length !== 0"
+        />
+      </div>
+    </VValidation>
+  </div>
+</template>

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

@@ -0,0 +1,36 @@
+import { VValidation, VLabel, VMessages } from 'vuetify/components';
+type __VLS_Props = {
+    class?: string;
+    label?: string;
+    rules?: ((value: unknown) => string)[];
+    errorMessages?: string;
+    modelValue?: string | number | undefined | null;
+};
+declare const LangLabel: import("vue").ComputedRef<string>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_13: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_13) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    VValidation: typeof VValidation;
+    VLabel: typeof VLabel;
+    VMessages: typeof VMessages;
+    LangLabel: typeof LangLabel;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | null | undefined) => 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/forms/AppLink.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { RouterLink } from "vue-router";
+import { computed } from "vue";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  // add @ts-ignore if using TypeScript
+  ...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,27 @@
+import { RouterLink } from 'vue-router';
+declare const isExternalLink: import("vue").ComputedRef<boolean>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<{}, {
+    RouterLink: typeof RouterLink;
+    isExternalLink: typeof isExternalLink;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {} | {
+    [x: string]: any;
+}, {}, {}, {}, 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<{}>, {} | {
+    [x: string]: any;
+}, {}, {}, {}, 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/forms/AppNumberField.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { ref, watch, useAttrs, computed } from "vue";
+import { VTextField, VLabel } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+defineOptions({
+  name: "AppTextField",
+  inheritAttrs: false
+});
+const props = defineProps({
+  modelValue: { type: [String, null], required: false, default: null }
+});
+const { t } = useI18n();
+const numberValue = ref(null);
+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 emit = defineEmits(["update:modelValue"]);
+const placeholder = computed(() => {
+  if (useAttrs()?.placeholder) {
+    return useAttrs()?.placeholder;
+  }
+  if (label.value) {
+    return t("inputs.placeholder", {
+      name: LangLabel.value
+    });
+  }
+  return "";
+});
+watch(() => props.modelValue, () => {
+  numberValue.value = props.modelValue?.replace(/\D/g, "");
+  emit("update:modelValue", numberValue.value);
+}, {
+  immediate: true
+});
+const validateInput = (event) => {
+  const input = event.target;
+  numberValue.value = numberValue.value?.replace(/\D/g, "") ?? null;
+  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,45 @@
+import { VTextField, VLabel } from 'vuetify/components';
+type __VLS_Props = {
+    modelValue?: string | null;
+};
+declare const numberValue: import("vue").Ref<string | null, string | null>;
+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 validateInput: (event: InputEvent) => void;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_14: any, __VLS_15: any;
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    [K in NonNullable<typeof __VLS_14>]?: (props: typeof __VLS_15) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    VTextField: typeof VTextField;
+    VLabel: typeof VLabel;
+    numberValue: typeof numberValue;
+    elementId: typeof elementId;
+    label: typeof label;
+    LangLabel: typeof LangLabel;
+    placeholder: typeof placeholder;
+    validateInput: typeof validateInput;
+}, {}, {}, {}, 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;
+}>, {
+    modelValue: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: 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;
+}>, {
+    modelValue: string | null;
+}, {}, {}, {}, 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/forms/AppOtpInput.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import AppTextField from "../core/app-form-elements/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,16 @@
+type __VLS_Props = {
+    totalInput?: number;
+    modelValue?: string;
+    errorMessages?: string;
+    isAppRtl?: boolean;
+};
+declare const _default: 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;
+}>, {
+    modelValue: string;
+    errorMessages: string;
+    totalInput: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;