nitro-web 0.0.110 → 0.0.112

package/components/partials/element/dropdown.tsx

@@ -11,7 +11,14 @@ type DropdownProps = {
   css?: string
   /** The direction of the menu **/
   dir?: 'bottom-left'|'bottom-right'|'top-left'|'top-right'
-  options?: { label: string|React.ReactNode, onClick?: Function, isSelected?: boolean, icon?: React.ReactNode, className?: string }[]
+  options?: { 
+    label: string|React.ReactNode,
+    onClick?: Function,
+    isSelected?: boolean,
+    icon?: React.ReactNode,
+    iconLeft?: React.ReactNode,
+    className?: string 
+  }[]
   /** Whether the dropdown is hoverable **/
   isHoverable?: boolean
   /** The content to render inside the top of the dropdown **/
@@ -22,6 +29,7 @@ type DropdownProps = {
   menuToggles?: boolean
   /** The minimum width of the menu **/
   minWidth?: number | string
+  maxHeight?: number | string
   toggleCallback?: (isActive: boolean) => void
 }
 
@@ -39,6 +47,7 @@ export const Dropdown = forwardRef(function Dropdown({
   menuIsOpen, 
   menuToggles=true,
   minWidth,
+  maxHeight,
   toggleCallback,
 }: DropdownProps, ref) {
   // https://letsbuildui.dev/articles/building-a-dropdown-menu-component-with-react-hooks
@@ -156,7 +165,11 @@ export const Dropdown = forwardRef(function Dropdown({
         })
       }
       <ul
-        style={{ minWidth }}
+        style={{ 
+          minWidth: minWidth, 
+          maxHeight: maxHeight, 
+          ...(maxHeight ? { overflow: 'auto' } : {}),
+        }}
         class={
           twMerge(`${menuStyle} ${ready ? 'is-ready' : ''} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName||''}`)}
       >
@@ -170,6 +183,7 @@ export const Dropdown = forwardRef(function Dropdown({
                 className={twMerge(`${optionStyle} ${option.className} ${menuOptionClassName}`)}
                 onClick={(e: React.MouseEvent) => onClick(option, e)}
               >
+                { !!option.iconLeft && option.iconLeft }
                 <span class="flex-auto">{option.label}</span>
                 { !!option.icon && option.icon }
                 { option.isSelected && <CheckCircleIcon className="size-[22px] text-primary -my-1 -mx-0.5" /> }

package/components/partials/element/table.tsx

@@ -124,7 +124,7 @@ export function Table<T extends TableRow>({
   return (
     <div 
       style={{ marginTop: -rowGap }}
-      className={twMerge('overflow-x-auto thin-scrollbar', className)}
+      className={twMerge('overflow-x-auto thin-scrollbar min-h-full', className)}
     >
       <div 
         style={{ borderSpacing: `0 ${rowGap}px` }}

package/components/partials/form/field-currency.tsx

@@ -98,6 +98,16 @@ export function FieldCurrency({ currency='nzd', currencies, format, onChange, va
     let _format = format || defaultFormat
     const _currencies = currencies ?? defaultCurrencies
     const currencyObject = _currencies[currency as keyof typeof _currencies]
+    if (!currencyObject && currencies) {
+      console.error(
+        `The currency field "${props.name}" is using the currency "${currency}" which is not found in your currencies object`
+      )
+    } else if (!currencyObject && !currencies) {
+      console.error(
+        `The currency field "${props.name}" is using the currency "${currency}" which is not found in the 
+        default currencies, please provide a currencies object.`
+      )
+    }
     const symbol = currencyObject ? currencyObject.symbol : ''
     const digits = currencyObject ? currencyObject.digits : 2
 
@@ -160,13 +170,59 @@ export function FieldCurrency({ currency='nzd', currencies, format, onChange, va
   )
 }
 
-const defaultCurrencies = {
-  nzd: { symbol: '$', digits: 2 },
-  aud: { symbol: '$', digits: 2 },
-  usd: { symbol: '$', digits: 2 },
-  eur: { symbol: '€', digits: 2 },
-  gbp: { symbol: '£', digits: 2 },
-  btc: { symbol: '₿', digits: 8 },
+export const defaultCurrencies: { [key: string]: { name: string, symbol: string, digits: number } } = {
+  nzd: { name: 'New Zealand Dollar', symbol: '$', digits: 2 },
+  aud: { name: 'Australian Dollar', symbol: '$', digits: 2 },
+  usd: { name: 'US Dollar', symbol: '$', digits: 2 },
+  btc: { name: 'Bitcoin', symbol: '₿', digits: 8 },
+  aed: { name: 'UAE Dirham', symbol: 'د.إ', digits: 2 },
+  ars: { name: 'Argentine Peso', symbol: '$', digits: 2 },
+  bdt: { name: 'Bangladeshi Taka', symbol: '৳', digits: 2 },
+  bhd: { name: 'Bahraini Dinar', symbol: '.د.ب', digits: 3 },
+  brl: { name: 'Brazilian Real', symbol: 'R$', digits: 2 },
+  cad: { name: 'Canadian Dollar', symbol: '$', digits: 2 },
+  chf: { name: 'Swiss Franc', symbol: 'Fr', digits: 2 },
+  clp: { name: 'Chilean Peso', symbol: '$', digits: 0 },
+  cny: { name: 'Chinese Yuan', symbol: '¥', digits: 2 },
+  cop: { name: 'Colombian Peso', symbol: '$', digits: 2 },
+  czk: { name: 'Czech Koruna', symbol: 'Kč', digits: 2 },
+  dkk: { name: 'Danish Krone', symbol: 'kr', digits: 2 },
+  egp: { name: 'Egyptian Pound', symbol: '£', digits: 2 },
+  eur: { name: 'Euro', symbol: '€', digits: 2 },
+  gbp: { name: 'Great Britain Pound', symbol: '£', digits: 2 },
+  hkd: { name: 'Hong Kong Dollar', symbol: '$', digits: 2 },
+  huf: { name: 'Hungarian Forint', symbol: 'Ft', digits: 0 },
+  idr: { name: 'Indonesian Rupiah', symbol: 'Rp', digits: 0 },
+  ils: { name: 'Israeli Shekel', symbol: '₪', digits: 2 },
+  inr: { name: 'Indian Rupee', symbol: '₹', digits: 2 },
+  jod: { name: 'Jordanian Dinar', symbol: 'د.ا', digits: 3 },
+  jpy: { name: 'Japanese Yen', symbol: '¥', digits: 0 },
+  kes: { name: 'Kenyan Shilling', symbol: 'Sh', digits: 2 },
+  krw: { name: 'South Korean Won', symbol: '₩', digits: 0 },
+  kwd: { name: 'Kuwaiti Dinar', symbol: 'د.ك', digits: 3 },
+  lkr: { name: 'Sri Lankan Rupee', symbol: 'Rs', digits: 2 },
+  mad: { name: 'Moroccan Dirham', symbol: 'د.م.', digits: 2 },
+  mxn: { name: 'Mexican Peso', symbol: '$', digits: 2 },
+  myr: { name: 'Malaysian Ringgit', symbol: 'RM', digits: 2 },
+  ngn: { name: 'Nigerian Naira', symbol: '₦', digits: 2 },
+  nok: { name: 'Norwegian Krone', symbol: 'kr', digits: 2 },
+  omr: { name: 'Omani Rial', symbol: '﷼', digits: 3 },
+  pen: { name: 'Peruvian Sol', symbol: 'S/', digits: 2 },
+  php: { name: 'Philippine Peso', symbol: '₱', digits: 2 },
+  pkt: { name: 'Pakistani Rupee', symbol: '₨', digits: 2 },
+  pln: { name: 'Polish Zloty', symbol: 'zł', digits: 2 },
+  qar: { name: 'Qatari Riyal', symbol: '﷼', digits: 2 },
+  ron: { name: 'Romanian Leu', symbol: 'lei', digits: 2 },
+  rub: { name: 'Russian Ruble', symbol: '₽', digits: 2 },
+  sar: { name: 'Saudi Riyal', symbol: '﷼', digits: 2 },
+  sek: { name: 'Swedish Krona', symbol: 'kr', digits: 2 },
+  sgd: { name: 'Singapore Dollar', symbol: '$', digits: 2 },
+  thb: { name: 'Thai Baht', symbol: '฿', digits: 2 },
+  try: { name: 'Turkish Lira', symbol: '₺', digits: 2 },
+  twd: { name: 'New Taiwan Dollar', symbol: 'NT$', digits: 2 },
+  uah: { name: 'Ukrainian Hryvnia', symbol: '₴', digits: 2 },
+  vnd: { name: 'Vietnamese Dong', symbol: '₫', digits: 0 },
+  zar: { name: 'South African Rand', symbol: 'R', digits: 2 },
 }
 
 const defaultFormat = '¤#,##0.00'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.110",
+  "version": "0.0.112",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",