@unsource/ui 2.1.5 → 2.2.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "unsource-ui",
   "configKey": "unsourceUi",
-  "version": "2.1.5",
+  "version": "2.2.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -47,7 +47,10 @@ const module = defineNuxtModule({
     "nuxt-swiper": {},
     "@vueuse/nuxt": {},
     "@nuxtjs/i18n": {
-      version: "^8.0.0"
+      version: "^10.0.0",
+      defaults: {
+        strategy: "no_prefix"
+      }
     }
   },
   // Default configuration options of the Nuxt module
@@ -63,7 +66,8 @@ const module = defineNuxtModule({
         "numeral",
         "persian-number",
         "ajv",
-        "handlebars"
+        "handlebars",
+        "vue-json-pretty"
       ];
     }
   },
@@ -81,6 +85,8 @@ const module = defineNuxtModule({
     });
     addImportsDir(resolver2.resolve("runtime/composables"));
     addPlugin(resolver2.resolve("runtime/plugins/toast.client"));
+    _nuxt.options.css.push("@unocss/reset/normalize.css");
+    _nuxt.options.css.push(resolver2.resolve("./runtime/assets/main.scss"));
   }
 });
 

package/dist/runtime/assets/main.css

@@ -0,0 +1,130 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s;
+}
+
+.list-enter, .list-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.side-enter-active,
+.side-leave-active {
+  transition: all 0.3s;
+}
+
+.side-enter, .side-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.3s;
+}
+
+.slide-up-enter, .slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+.border-animation {
+  animation-name: border;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+  animation-duration: 1s;
+}
+
+@keyframes border {
+  0% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(0.8);
+  }
+}
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.3s;
+}
+
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+}
+
+:root {
+  --toastify-font-family: Yekan Bakh FaNum, sans-serif ;
+}
+
+body {
+  font-family: Yekan Bakh FaNum, sans-serif;
+  font-style: normal;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+  @apply text-text-head bg-primary-100;
+}
+
+div {
+  box-sizing: border-box;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  font-family: inherit;
+  text-decoration: none;
+}
+
+input {
+  min-width: 0;
+  width: 100%;
+  outline-offset: 0 !important;
+  outline: none !important;
+  font-family: Yekan Bakh FaNum, sans-serif;
+  border: none;
+  @apply bg-white text-text-head;
+}
+
+button {
+  font-family: inherit;
+}
+
+textarea {
+  font-family: inherit;
+  resize: none;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+.vpd-main .vpd-is-inline {
+  @apply mt-0;
+}
+.vpd-main .vpd-content {
+  @apply "!w-full";
+}
+.vpd-main .vpd-content .vpd-days .vpd-clearfix, .vpd-main .vpd-content .vpd-week.vpd-clearfix {
+  @apply flex justify-between;
+}

package/dist/runtime/assets/transition.css

@@ -0,0 +1,63 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s;
+}
+
+.list-enter, .list-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.side-enter-active,
+.side-leave-active {
+  transition: all 0.3s;
+}
+
+.side-enter, .side-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.3s;
+}
+
+.slide-up-enter, .slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+.border-animation {
+  animation-name: border;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+  animation-duration: 1s;
+}
+
+@keyframes border {
+  0% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(0.8);
+  }
+}
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.3s;
+}
+
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+}

package/dist/runtime/components/UnAuth.d.vue.ts

@@ -0,0 +1,35 @@
+type Props = {
+    logo?: string;
+    head?: string;
+    type: 'login' | 'recover' | 'otp' | 'register';
+    userTypes?: Record<string, string>[];
+    loginType?: 'otp' | 'password';
+    mutiType?: boolean;
+    userParams?: Record<string, string | boolean>;
+    otpPage?: string;
+    redirectPage?: string;
+    profilePage?: string;
+    profileFormPage?: string;
+    loginPage?: string;
+    registerPage?: string;
+    passLoginPage?: string;
+    successLoginAlert?: string;
+    title?: string;
+    buttonTitle?: string;
+    forgetPassword?: boolean;
+    click?: Record<string, unknown>;
+    shortHand?: boolean;
+};
+declare var __VLS_29: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_29) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/UnAuth.vue

@@ -0,0 +1,341 @@
+<template>
+  <div class="flex flex-col items-stretch gap-8 grow px-2 py-6 self-stretch">
+    <div class="grow-1 p-3 basis-50">
+      <div
+        v-if="logo"
+        class="flex flex-col items-center children:text-center gap-3 px-4 py-0"
+      >
+        <UnNuxtIcon
+          :name="logo"
+          class="!text-8xl text-primary-500"
+        />
+      </div>
+      <template v-if="['login', 'recover'].includes(type)">
+        <UnAuthInputs
+          v-model="data"
+          :type="type === 'recover' ? type : loginType"
+          :head
+          :have-tabs="true"
+          :login-page
+          :pass-login-page
+          :have-login-type="mutiType"
+        />
+        <div
+          v-if="type === 'login'"
+          class="flex items-center gap-2 mt-4"
+        >
+          <p class="text-(sm gray-600)">
+            با ورود،
+            <NuxtLink
+              to="https://parand.app/terms"
+              target="_blank"
+              class="text-gra-900 font-bold underline"
+            >قوانین و
+              مقررات
+            </NuxtLink>
+            استفاده از اپلیکیشن را میپذیرم
+          </p>
+        </div>
+      </template>
+      <div
+        v-else-if="type === 'otp'"
+        class="flex flex-col items-stretch gap-24"
+      >
+        <div class="flex flex-col items-stretch gap-6">
+          <div class="flex justify-between">
+            <p class="text-(gray-600 lg) font-semibold">
+              {{ $t("\u06A9\u062F \u062A\u0627\u06CC\u06CC\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F") }}
+            </p>
+            <div
+              class="text-xs text-gray-600 underline cursor-pointer"
+              @click="navigateTo({ name: loginPage })"
+            >
+              {{ $t("\u062A\u063A\u06CC\u06CC\u0631 \u0634\u0645\u0627\u0631\u0647 \u0645\u0648\u0628\u0627\u06CC\u0644 ") }}
+            </div>
+          </div>
+          <UnCodeInput
+            v-model="otp"
+            class="flex gap-1 self-center justify-between"
+            @complete="checkOTP"
+          />
+          <div class="flex justify-center items-center gap-2 text-gray-400 text-xs">
+            <p v-if="!isExpired">
+              {{ $t("\u0632\u0645\u0627\u0646 \u0628\u0627\u0642\u06CC\u200C\u0645\u0627\u0646\u062F\u0647: ") }}
+            </p>
+            <p
+              v-else
+              class="text-primary-500 cursor-pointer"
+              @click="sendAgain"
+            >
+              {{ $t("\u0627\u0631\u0633\u0627\u0644 \u0645\u062C\u062F\u062F") }}
+            </p>
+            <UnTimer
+              v-if="!isExpired"
+              :key="expiredAt"
+              v-model="isExpired"
+              :time="expiredAt"
+            />
+          </div>
+        </div>
+        <!--        <form> -->
+        <!--          <input -->
+        <!--            v-model="otp" -->
+        <!--            name="one-time-code" -->
+        <!--            class="w-0 h-0" -->
+        <!--            type="text" -->
+        <!--            autocomplete="one-time-code" -->
+        <!--            inputmode="numeric" -->
+        <!--            autofocus -->
+        <!--            pattern="\d{6}" -->
+        <!--          > -->
+        <!--        </form> -->
+      </div>
+      <slot />
+    </div>
+    <div class="flex flex-col gap-4 p-3 sticky bottom-2">
+      <template v-if="shortHand">
+        <UnAuthShortHand
+          v-if="forgetPassword"
+          :description="$t('\u062D\u0633\u0627\u0628 \u06A9\u0627\u0631\u0628\u0631\u06CC \u0646\u062F\u0627\u0631\u06CC\u062F\u061F ')"
+          :text-link="$t('\u062B\u0628\u062A \u0646\u0627\u0645 \u06A9\u0646\u06CC\u062F')"
+          :link="{ name: registerPage }"
+        />
+        <UnAuthShortHand
+          v-else-if="otp"
+          :description="$t('\u0634\u0645\u0627\u0631\u0647 \u062A\u0644\u0641\u0646 \u0627\u0634\u062A\u0628\u0627\u0647 \u0627\u0633\u062A\u061F')"
+          :text-link="$t('\u0648\u06CC\u0631\u0627\u06CC\u0634')"
+          :link="{ name: loginPage, query: route.query }"
+        />
+        <UnAuthShortHand
+          v-else
+          :description="$t('\u062D\u0633\u0627\u0628 \u06A9\u0627\u0631\u0628\u0631\u06CC \u062F\u0627\u0631\u06CC\u062F\u061F ')"
+          :text-link="$t('\u0648\u0627\u0631\u062F \u0634\u0648\u06CC\u062F')"
+          :link="{ name: loginPage }"
+        />
+      </template>
+      <UnButton
+        :loading="loading"
+        :label="buttonTitle || ButtonTitle"
+        :disable="disable"
+        variant="primary-fill"
+        @click="submit"
+      />
+    </div>
+  </div>
+  <UnLog
+    :data="data"
+    :fixed="false"
+  />
+</template>
+
+<script setup>
+import {
+  computed,
+  navigateTo,
+  onMounted,
+  p2e,
+  ref,
+  useCookie,
+  useI18n,
+  useNuxtApp,
+  usePost,
+  useRoute,
+  useToken,
+  useUser,
+  useUserId
+} from "#imports";
+const {
+  successLoginAlert = "\u062E\u0648\u0634 \u0622\u0645\u062F\u06CC\u062F",
+  loginPage = "login",
+  registerPage = "signup",
+  redirectPage = "index",
+  profilePage = "profile",
+  profileFormPage,
+  otpPage = "login-otp",
+  type,
+  loginType = "password",
+  userParams = {}
+} = defineProps({
+  logo: { type: String, required: false },
+  head: { type: String, required: false },
+  type: { type: String, required: true },
+  userTypes: { type: Array, required: false },
+  loginType: { type: String, required: false },
+  mutiType: { type: Boolean, required: false },
+  userParams: { type: Object, required: false },
+  otpPage: { type: String, required: false },
+  redirectPage: { type: String, required: false },
+  profilePage: { type: String, required: false },
+  profileFormPage: { type: String, required: false },
+  loginPage: { type: String, required: false },
+  registerPage: { type: String, required: false },
+  passLoginPage: { type: String, required: false },
+  successLoginAlert: { type: String, required: false },
+  title: { type: String, required: false },
+  buttonTitle: { type: String, required: false },
+  forgetPassword: { type: Boolean, required: false },
+  click: { type: Object, required: false },
+  shortHand: { type: Boolean, required: false }
+});
+const route = useRoute();
+const { $toast } = useNuxtApp();
+const { t } = useI18n();
+const loading = ref(false);
+const phoneNumber = useCookie("phoneNumber");
+const data = ref({});
+const expiredAt = useCookie("expiredAt", {
+  maxAge: 365 * 24 * 60 * 60 * 1e3
+});
+const ButtonTitle = computed(
+  () => type === "login" && loginType == "otp" ? t("\u0627\u0631\u0633\u0627\u0644 \u06A9\u062F") : type === "login" && loginType == "password" ? t("\u0648\u0631\u0648\u062F") : type === "otp" ? t("\u062A\u0627\u06CC\u06CC\u062F") : type === "recover" ? t("\u062B\u0628\u062A") : type === "register" ? t("\u062B\u0628\u062A \u0646\u0627\u0645") : ""
+);
+const isValid = computed(() => data.value.phoneNumber && data.value.phoneNumber?.length === 11);
+const loginByOtp = async () => {
+  if (!isValid.value || loading.value) return;
+  loading.value = true;
+  const { result } = await usePost("/login-by-phone-otp", {
+    phoneNumber: p2e(data.value.phoneNumber)
+    // template: template[config.userType]
+  });
+  if (result) {
+    expiredAt.value = result.expiredAt;
+    phoneNumber.value = p2e(data.value.phoneNumber);
+    await navigateTo({ name: otpPage, query: route.query });
+  }
+  loading.value = false;
+};
+const otp = ref("");
+const token = useToken();
+const userId = useUserId();
+if (["login", "register"].includes(type) && token.value && userId.value) {
+  navigateTo({ name: redirectPage });
+}
+const user = useUser();
+const isExpired = ref(false);
+const disable = computed(
+  () => type === "login" && loginType == "otp" ? !data.value?.phoneNumber : type === "login" && loginType == "password" ? !data.value?.phoneNumber || !data.value?.password : type === "otp" ? otp.value?.length < 6 : type === "recover" ? !data.value?.password || !data.value?.confirmedPassword || data.value?.password !== data.value?.confirmedPassword : type === "register" ? !data.value?.phoneNumber || !data.value?.password : false
+);
+let ac;
+const getOtpFromPhone = async () => {
+  if (ac) {
+    ac.abort();
+  }
+  ac = new AbortController();
+  if ("OTPCredential" in window) {
+    navigator.credentials.get({
+      otp: { transport: ["sms"] },
+      signal: ac.signal
+    }).then((e) => {
+      otp.value = e.code;
+      checkOTP(otp.value);
+    });
+  }
+};
+const checkOTP = async (code = "") => {
+  if (loading.value) return;
+  loading.value = true;
+  const { result } = await usePost("/get-token-by-otp", { phoneNumber: phoneNumber.value, code: code || otp.value }, {
+    params: {
+      "with-profile": true,
+      ...userParams
+    },
+    headers: {
+      "no-error": true
+    }
+  });
+  if (result) {
+    token.value = result.token.type + " " + result.token.token;
+    userId.value = result.user.id;
+    user.value = result.user;
+    if (result.user.profile || !profileFormPage) {
+      navigateTo({ name: profilePage });
+    } else {
+      navigateTo({ name: profileFormPage || "profile-form" });
+    }
+    $toast.success(successLoginAlert);
+  } else {
+    $toast.success(t("\u06A9\u062F \u0648\u0627\u0631\u062F \u0634\u062F\u0647 \u0635\u062D\u06CC\u062D \u0646\u0645\u06CC\u0628\u0627\u0634\u062F."));
+    loading.value = false;
+  }
+};
+const sendAgain = async () => {
+  if (loading.value) return;
+  loading.value = true;
+  const { result } = await usePost("/login-by-phone-otp", {
+    phoneNumber: phoneNumber.value
+  });
+  if (result) {
+    getOtpFromPhone();
+    expiredAt.value = result.expiredAt;
+    isExpired.value = false;
+    $toast.success("\u06A9\u062F \u0628\u0627 \u0645\u0648\u0641\u0642\u06CC\u062A \u0627\u0631\u0633\u0627\u0644 \u0634\u062F");
+  }
+  loading.value = false;
+};
+const setPassword = async () => {
+  if (loading.value) return;
+  loading.value = true;
+  const { result } = await usePost("/set-pass", {
+    password: data.value.password
+  }, {
+    headers: {
+      "no-error": true
+    }
+  });
+  if (result) {
+    $toast.success("\u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0628\u0627 \u0645\u0648\u0641\u0642\u06CC\u062A \u062A\u063A\u06CC\u06CC\u0631 \u06CC\u0627\u0641\u062A");
+    navigateTo({ name: "profile" });
+  } else {
+    $toast.success("\u0631\u0645\u0632 \u0628\u0627\u06CC\u062F \u062D\u062F\u0627\u0642\u0644 8 \u06A9\u0627\u0631\u0627\u06A9\u062A\u0631 \u0628\u0627\u0634\u062F.");
+    loading.value = false;
+  }
+  loading.value = false;
+};
+const loginByPass = async () => {
+  if (loading.value) return;
+  loading.value = true;
+  const { result } = await usePost("/login-by-pass", {
+    phoneNumber: p2e(data.value.phoneNumber),
+    password: data.value.password
+  }, {
+    params: {
+      "with-profile": true,
+      ...userParams
+    },
+    headers: {
+      "no-error": true
+    }
+  });
+  if (result) {
+    token.value = result.token.type + " " + result.token.token;
+    userId.value = result.user.id;
+    user.value = result.user;
+    if (result.user.profile || !profileFormPage) {
+      navigateTo({ name: profilePage });
+    } else {
+      navigateTo({ name: profileFormPage || "profile-form" });
+    }
+    $toast.success(successLoginAlert);
+  } else {
+    $toast.error("\u0627\u0637\u0644\u0627\u0639\u0627\u062A \u0648\u0627\u0631\u062F \u0634\u062F\u0647 \u0635\u062D\u06CC\u062D \u0646\u0645\u06CC\u0628\u0627\u0634\u062F.");
+    loading.value = false;
+  }
+};
+const submit = async () => {
+  if (type === "login" && loginType === "otp") {
+    return loginByOtp();
+  }
+  if (type === "login" && loginType === "password") {
+    return loginByPass();
+  }
+  if (type === "recover") {
+    return setPassword();
+  }
+  if (type === "otp") {
+    return checkOTP();
+  }
+};
+onMounted(() => {
+  getOtpFromPhone();
+});
+</script>

package/dist/runtime/components/UnAuth.vue.d.ts

@@ -0,0 +1,35 @@
+type Props = {
+    logo?: string;
+    head?: string;
+    type: 'login' | 'recover' | 'otp' | 'register';
+    userTypes?: Record<string, string>[];
+    loginType?: 'otp' | 'password';
+    mutiType?: boolean;
+    userParams?: Record<string, string | boolean>;
+    otpPage?: string;
+    redirectPage?: string;
+    profilePage?: string;
+    profileFormPage?: string;
+    loginPage?: string;
+    registerPage?: string;
+    passLoginPage?: string;
+    successLoginAlert?: string;
+    title?: string;
+    buttonTitle?: string;
+    forgetPassword?: boolean;
+    click?: Record<string, unknown>;
+    shortHand?: boolean;
+};
+declare var __VLS_29: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_29) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, 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/runtime/components/UnAuthInputs.d.vue.ts

@@ -0,0 +1,23 @@
+import type { TabItem } from './UnTab.vue.js';
+type __VLS_Props = {
+    type?: 'recover' | 'otp' | 'password';
+    userTypes?: TabItem[];
+    head?: string;
+    description?: string;
+    haveLoginType?: boolean;
+    forgetPass?: boolean;
+    loginPage?: string;
+    passLoginPage?: string;
+    forgetPage?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: Record<string, unknown>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnAuthInputs.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="flex flex-col items-stretch gap-6">
+    <div class="flex justify-between items-center">
+      <p class="text-(gray-600 2xl) font-semibold">
+        {{ head }}
+      </p>
+      <NuxtLink
+        v-if="haveLoginType"
+        :to="{ name: type === 'password' ? loginPage : passLoginPage, query: { role: route.query.role } }"
+        class="text-xs text-primary-500 underline cursor-pointer"
+      >
+        {{ type === "password" ? $t("\u0648\u0631\u0648\u062F \u0628\u0627 \u06A9\u062F \u06CC\u06A9\u0628\u0627\u0631 \u0645\u0635\u0631\u0641") : $t("\u0648\u0631\u0648\u062F \u0628\u0627 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631") }}
+      </NuxtLink>
+    </div>
+    <p
+      v-if="description"
+      class="text-(gray-600 base)"
+    >
+      {{ description }}
+    </p>
+    <UnTab
+      v-if="userTypes?.length"
+      route-target="query"
+      routable
+      mini
+      :items="userTypes"
+      class="self-start"
+    />
+    <UnNormalInput
+      v-if="type !== 'recover'"
+      v-model="modelValue.phoneNumber"
+      :placeholder="$t('\u0634\u0645\u0627\u0631\u0647 \u0645\u0648\u0628\u0627\u06CC\u0644')"
+      input-mode="numeric"
+    />
+    <template v-if="haveLoginType && type === 'password'">
+      <UnNormalInput
+        v-model="modelValue.password"
+        :placeholder="$t('\u0631\u0645\u0632 \u0639\u0628\u0648\u0631')"
+        input-type="password"
+        :password="true"
+      />
+      <NuxtLink
+        v-if="forgetPass"
+        :to="{ name: forgetPage }"
+        class="text-sm text-gray-400 underline cursor-pointer flex justify-center items-center"
+      >
+        {{ $t("\u0641\u0631\u0627\u0645\u0648\u0634\u06CC \u0631\u0645\u0632 \u0639\u0628\u0648\u0631") }}
+      </NuxtLink>
+    </template>
+    <template v-if="type === 'recover'">
+      <UnNormalInput
+        v-model="modelValue.password"
+        :placeholder="$t('\u0631\u0645\u0632 \u0639\u0628\u0648\u0631')"
+        input-type="password"
+        :password="true"
+      />
+      <UnNormalInput
+        v-model="modelValue.confirmedPassword"
+        :placeholder="$t('\u062A\u06A9\u0631\u0627\u0631 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631')"
+        input-type="password"
+        :password="true"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from "#imports";
+const route = useRoute();
+const {
+  forgetPage = "forget-password",
+  loginPage = "login",
+  passLoginPage = "login-pass"
+} = defineProps({
+  type: { type: String, required: false },
+  userTypes: { type: Array, required: false },
+  head: { type: String, required: false },
+  description: { type: String, required: false },
+  haveLoginType: { type: Boolean, required: false },
+  forgetPass: { type: Boolean, required: false },
+  loginPage: { type: String, required: false },
+  passLoginPage: { type: String, required: false },
+  forgetPage: { type: String, required: false }
+});
+const modelValue = defineModel({ type: Object, ...{ required: true } });
+</script>

package/dist/runtime/components/UnAuthInputs.vue.d.ts

@@ -0,0 +1,23 @@
+import type { TabItem } from './UnTab.vue.js';
+type __VLS_Props = {
+    type?: 'recover' | 'otp' | 'password';
+    userTypes?: TabItem[];
+    head?: string;
+    description?: string;
+    haveLoginType?: boolean;
+    forgetPass?: boolean;
+    loginPage?: string;
+    passLoginPage?: string;
+    forgetPage?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: Record<string, unknown>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnAuthShortHand.d.vue.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    link?: string | Record<string, unknown>;
+    textLink: string;
+    description?: 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/runtime/components/UnAuthShortHand.vue

@@ -0,0 +1,19 @@
+<template>
+  <p class="text-(xs text) font-extrabold gap-1">
+    {{ description }}
+    <NuxtLink
+      :to="link || '#'"
+      class="text-primary-500"
+    >
+      {{ textLink }}
+    </NuxtLink>
+  </p>
+</template>
+
+<script setup>
+defineProps({
+  link: { type: [String, Object], required: false },
+  textLink: { type: String, required: true },
+  description: { type: String, required: false }
+});
+</script>

package/dist/runtime/components/UnAuthShortHand.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    link?: string | Record<string, unknown>;
+    textLink: string;
+    description?: 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/runtime/components/UnCodeInput.d.vue.ts

@@ -0,0 +1,6 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $emit: typeof emit;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const emit: (event: "complete" | "change", ...args: any[]) => void;

package/dist/runtime/components/UnCodeInput.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-otp-input
+    id="code-input"
+    ref="otpInput"
+    :value="value"
+    dir="ltr"
+    input-classes="otp-input"
+    separator=""
+    :num-inputs="6"
+    :should-auto-focus="true"
+    :is-input-num="true"
+    @on-change="onChange"
+    @on-complete="emit('complete', $event)"
+  />
+</template>
+
+<script setup>
+import VOtpInput from "vue3-otp-input";
+const emit = defineEmits(["complete", "change"]);
+const value = defineModel();
+const onChange = ($event) => {
+  value.value = $event;
+  emit("change");
+};
+</script>
+
+<style>
+#code-input .otp-input {
+  @apply w-15 h-15 bg-white b-rd-2 text-center gap-2 <md:(w-12 h-12);
+}
+</style>

package/dist/runtime/components/UnCodeInput.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $emit: typeof emit;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const emit: (event: "complete" | "change", ...args: any[]) => void;

package/dist/runtime/components/UnInput.d.vue.ts

@@ -1,12 +1,12 @@
 import type { Input } from '../types/models.js';
 type __VLS_Props = {
     disabled?: boolean;
-    Input?: Input;
+    Input?: Partial<Input>;
     Type?: Input['type'];
     isError?: boolean;
     index?: number;
 };
-declare const Input: Input | undefined;
+declare const Input: Partial<Input> | undefined;
 type __VLS_ModelProps = {
     modelValue?: any;
 };

package/dist/runtime/components/UnInput.vue.d.ts

@@ -1,12 +1,12 @@
 import type { Input } from '../types/models.js';
 type __VLS_Props = {
     disabled?: boolean;
-    Input?: Input;
+    Input?: Partial<Input>;
     Type?: Input['type'];
     isError?: boolean;
     index?: number;
 };
-declare const Input: Input | undefined;
+declare const Input: Partial<Input> | undefined;
 type __VLS_ModelProps = {
     modelValue?: any;
 };

package/dist/runtime/components/UnLog.vue

@@ -15,6 +15,8 @@
 </template>
 
 <script setup>
+import VueJsonPretty from "vue-json-pretty";
+import "vue-json-pretty/lib/styles.css";
 defineProps({
   data: {
     type: [Number, Object, Array, String, Boolean],

package/dist/runtime/components/UnNormalInput.d.vue.ts

@@ -0,0 +1,51 @@
+interface Props {
+    className?: string;
+    valueClassName?: string;
+    focusClassName?: string;
+    labelClass?: string;
+    prependIcon?: string;
+    prependIconType?: string;
+    appendIcon?: string;
+    appendIconType?: string;
+    appendIconClass?: string;
+    appendText?: string;
+    inputType?: string;
+    placeholder?: string;
+    label?: string;
+    password?: boolean;
+    date?: boolean;
+    disabled?: boolean;
+    inputMode?: string;
+    iconColor?: string;
+    bgStyle?: string;
+    handler?: any;
+    focusable?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {
+    date: boolean;
+    password: boolean;
+    appendIcon: string;
+    label: string;
+    inputType: string;
+    placeholder: string;
+    disabled: boolean;
+    focusable: boolean;
+    className: string;
+    valueClassName: string;
+    focusClassName: string;
+    labelClass: string;
+    prependIcon: string;
+    appendIconType: string;
+    appendIconClass: string;
+    appendText: string;
+    inputMode: string;
+    iconColor: string;
+    bgStyle: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnNormalInput.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="flex flex-col gap-1.5 ">
+    <p
+      v-if="label"
+      :class="labelClass"
+    >
+      {{ label }}
+    </p>
+    <div
+      v-on-click-outside="() => focused = false"
+      class="flex relative px-3 py-1 gap-1 h-12 items-center bg-white"
+      :class="[value && !focused ? valueClassName : focused ? focusClassName : bgStyle, className]"
+    >
+      <UnNuxtIcon
+        v-if="prependIcon"
+        :name="prependIcon"
+        :icon-type="prependIconType"
+        :class="[iconColor ? iconColor : 'text-gray-400']"
+      />
+      <UnIRDatePicker
+        v-if="date"
+        v-model="value"
+        format="YYYY-MM-DD[T]HH:mm:ssZ"
+        class="text-text"
+        display-format="jDD jMMMM jYYYY"
+        :placeholder="placeholder"
+      />
+      <input
+        v-if="InputType !== 'textarea'"
+        v-model="value"
+        dir="rtl"
+        :type="InputType"
+        :inputmode="inputMode"
+        class="flex-grow bg-white placeholder-gray-200 text-text-head font-300 text-sm"
+        :disabled="disabled"
+        :placeholder="!focused ? placeholder : value || ''"
+        @focus="date ? InputType = 'date' : focused = true"
+      >
+      <textarea
+        v-else
+        v-model="value"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        class="border-none text-sm font-400 grow c-gray-900 placeholder:(c-gray-400) outline-none bg-white h-24"
+        @focus="date ? InputType = 'date' : ''"
+        @blur="date ? InputType = 'text' : ''"
+      />
+      <UnNuxtIcon
+        v-if="password"
+        :name="InputType === 'text' ? 'eye-slash' : 'eye'"
+        icon-type="svg"
+        class="!text-gray-200 cursor-pointer"
+        @click="InputType = InputType === 'text' ? 'password' : 'text'"
+      />
+      <UnNuxtIcon
+        v-if="appendIcon"
+        :name="appendIcon"
+        :icon-type="appendIconType"
+        :class="[iconColor ? iconColor : 'text-gray-400', appendIconClass]"
+        class="!svg:(w-3 h-3) bg-bg bg-opacity-30 justify-center rounded-full"
+        @click="$emit('append')"
+      />
+      <p
+        v-if="appendText"
+        dir="ltr"
+        class="font-400 text-xs text-text-head whitespace-nowrap"
+      >
+        {{ appendText }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { vOnClickOutside } from "@vueuse/components";
+import { ref } from "#imports";
+const props = defineProps({
+  className: { type: String, required: false, default: "rounded-2xl bg-bg" },
+  valueClassName: { type: String, required: false, default: "border-(1 solid gray-200) bg-bg" },
+  focusClassName: { type: String, required: false, default: "border-(2 solid primary-500) !bg-bg" },
+  labelClass: { type: String, required: false, default: "text-(xs text-head) font-400 leading-6" },
+  prependIcon: { type: String, required: false, default: "" },
+  prependIconType: { type: String, required: false },
+  appendIcon: { type: String, required: false, default: "" },
+  appendIconType: { type: String, required: false, default: "svg" },
+  appendIconClass: { type: String, required: false, default: "" },
+  appendText: { type: String, required: false, default: "" },
+  inputType: { type: String, required: false, default: "text" },
+  placeholder: { type: String, required: false, default: "" },
+  label: { type: String, required: false, default: "" },
+  password: { type: Boolean, required: false, default: false },
+  date: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  inputMode: { type: String, required: false, default: "" },
+  iconColor: { type: String, required: false, default: "" },
+  bgStyle: { type: String, required: false, default: "bg-bg border-(1 solid gray-200)" },
+  handler: { type: null, required: false },
+  focusable: { type: Boolean, required: false, default: false }
+});
+defineEmits(["append", "update:modelValue"]);
+const value = defineModel();
+const focused = ref(false);
+const InputType = ref(props.inputType);
+</script>
+
+<style>
+input {
+  outline: none;
+}
+</style>

package/dist/runtime/components/UnNormalInput.vue.d.ts

@@ -0,0 +1,51 @@
+interface Props {
+    className?: string;
+    valueClassName?: string;
+    focusClassName?: string;
+    labelClass?: string;
+    prependIcon?: string;
+    prependIconType?: string;
+    appendIcon?: string;
+    appendIconType?: string;
+    appendIconClass?: string;
+    appendText?: string;
+    inputType?: string;
+    placeholder?: string;
+    label?: string;
+    password?: boolean;
+    date?: boolean;
+    disabled?: boolean;
+    inputMode?: string;
+    iconColor?: string;
+    bgStyle?: string;
+    handler?: any;
+    focusable?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {
+    date: boolean;
+    password: boolean;
+    appendIcon: string;
+    label: string;
+    inputType: string;
+    placeholder: string;
+    disabled: boolean;
+    focusable: boolean;
+    className: string;
+    valueClassName: string;
+    focusClassName: string;
+    labelClass: string;
+    prependIcon: string;
+    appendIconType: string;
+    appendIconClass: string;
+    appendText: string;
+    inputMode: string;
+    iconColor: string;
+    bgStyle: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnTimer.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    time: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    timestamp: import("vue").ShallowRef<number>;
+    pause: import("@vueuse/shared").Fn;
+    resume: import("@vueuse/shared").Fn;
+    diff: import("vue").ComputedRef<number>;
+    isExpired: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnTimer.vue

@@ -0,0 +1,31 @@
+<template>
+  <time
+    dir="ltr"
+    class="text-center font-black text-base text-primary-500 "
+  >
+    {{ diff > d ? Math.floor(diff / d) + ":" : "" }}
+    {{ diff > h ? Math.floor(diff % d / h) + ":" : "" }}
+    {{ diff > m ? Math.floor(diff % h / m) + ":" : "" }}
+    {{ Math.floor(diff % m) }}
+  </time>
+</template>
+
+<script setup>
+import { computed, moment, useTimestamp, watch } from "#imports";
+const props = defineProps({
+  time: { type: String, required: true }
+});
+const m = 60;
+const h = 60 * m;
+const d = 24 * h;
+defineEmits(["complete"]);
+const value = defineModel();
+const { timestamp, pause, resume } = useTimestamp({ controls: true, interval: 330 });
+const diff = computed(() => (moment(props.time).valueOf() - timestamp.value) / 1e3);
+const isExpired = computed(() => diff.value <= 0);
+value.value = isExpired.value;
+watch(isExpired, () => {
+  value.value = isExpired.value;
+});
+defineExpose({ timestamp, pause, resume, diff, isExpired });
+</script>

package/dist/runtime/components/UnTimer.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    time: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    timestamp: import("vue").ShallowRef<number>;
+    pause: import("@vueuse/shared").Fn;
+    resume: import("@vueuse/shared").Fn;
+    diff: import("vue").ComputedRef<number>;
+    isExpired: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsource/ui",
-  "version": "2.1.5",
+  "version": "2.2.1",
   "private": false,
   "description": "nuxt ui kit for unsource env",
   "repository": "https://github.com/alisa2142/unsource-ui",
@@ -36,9 +36,9 @@
   },
   "dependencies": {
     "@neshan-maps-platform/vue3-openlayers": "^2.0.1",
-    "@nuxt/kit": "^4.2.0",
+    "@nuxt/kit": "^3.20.0",
     "@nuxtjs/device": "^3.2.4",
-    "@nuxtjs/i18n": "^8.5.6",
+    "@nuxtjs/i18n": "^10.1.2",
     "@persian-tools/persian-tools": "^4.0.4",
     "@types/big.js": "^6.2.2",
     "@types/numeral": "^2.0.5",
@@ -57,6 +57,8 @@
     "socket.io-client": "^4.8.1",
     "swiper": "^11.2.10",
     "unocss-preset-scrollbar": "^3.2.0",
+    "vue-json-pretty": "^2.6.0",
+    "vue3-otp-input": "^0.5.40",
     "vue3-persian-datetime-picker": "^1.2.2",
     "vue3-toastify": "^0.2.8"
   },
@@ -81,13 +83,12 @@
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^3.19.3",
     "@nuxt/test-utils": "^3.19.2",
-    "@nuxt/vite-builder": "~3.15.4",
     "@types/node": "latest",
     "@unhead/vue": "^1.11.20",
     "@unocss/nuxt": "^66.5.3",
     "changelogen": "^0.6.2",
     "eslint": "^9.37.0",
-    "nuxt": "^3.19.3",
+    "nuxt": "^3.20.0",
     "sass": "^1.93.2",
     "sass-embedded": "^1.93.2",
     "typescript": "~5.9.3",