Uno Admin Dashboard

Uno Documentation

Utils Function

Currency Format

currency.ts

export function currency(amount: number, fraction = 2, currencyCode = "USD") {
  return new Intl.NumberFormat(undefined, {
    style: "currency",
    currency: currencyCode,
    currencyDisplay: "narrowSymbol",
    maximumFractionDigits: fraction,
  }).format(amount);
}

export function formatK(amount: number, fraction = 1, currencyCode = "USD") {
  return new Intl.NumberFormat(undefined, {
    style: "currency",
    notation: "compact",
    compactDisplay: "short",
    currency: currencyCode,
    maximumFractionDigits: fraction,
  }).format(amount);
}

Date Format

dateFormat.ts

import { useDateFormat } from "@vueuse/core";

export function dateFormat(date: Date | string, formatString = "DD MMM YYYY") {
  const formatted = useDateFormat(new Date(date), formatString);
  return formatted.value;
}
Phone Number Format

libPhoneNumber.ts

import { CountryCode, parsePhoneNumberFromString } from "libphonenumber-js";

export function formatPhoneNumber(number: string, country: CountryCode = "US") {
  const phoneNumber = parsePhoneNumberFromString(number, country);
  if (phoneNumber) return phoneNumber.formatInternational();
  return null;
}
CSS Merger & Priorities Function

utils.ts

import type { Ref } from "vue";
import type { Updater } from "@tanstack/vue-table";

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

export function valueUpdater>(
  updaterOrValue: T,
  ref: Ref
) {
  ref.value =
    typeof updaterOrValue === "function"
      ? updaterOrValue(ref.value)
      : updaterOrValue;
}