nitro-web 0.0.112 → 0.0.114

package/components/auth/auth.api.js

@@ -309,6 +309,7 @@ export async function getStore(user) {
 
 export async function signinAndGetStore(user, isDesktop, getStore) {
   if (user.loginActive === false) throw 'This user is not available.'
+  if (!getStore) throw new Error('Please provide a getStore function')
   user.desktop = isDesktop
 
   const jwt = jsonwebtoken.sign({ _id: user._id }, JWT_SECRET, { expiresIn: '30d' })

package/components/partials/element/dropdown.tsx

@@ -17,6 +17,8 @@ type DropdownProps = {
     isSelected?: boolean,
     icon?: React.ReactNode,
     iconLeft?: React.ReactNode,
+    /** Prevent the dropdown from closing when the option is clicked */
+    preventCloseOnClick?: boolean,
     className?: string 
   }[]
   /** Whether the dropdown is hoverable **/
@@ -25,6 +27,7 @@ type DropdownProps = {
   menuContent?: React.ReactNode
   menuClassName?: string
   menuOptionClassName?: string
+  /** force open the menu */
   menuIsOpen?: boolean
   menuToggles?: boolean
   /** The minimum width of the menu **/
@@ -137,9 +140,9 @@ export const Dropdown = forwardRef(function Dropdown({
     if (!isHoverable && !menuIsOpen && ((menuToggles || e.key) || !isActive)) setIsActive(!isActive)
   }
 
-  function onClick(option: { onClick?: Function }, e: React.MouseEvent) {
+  function onClick(option: { onClick?: Function, preventCloseOnClick?: boolean }, e: React.MouseEvent) {
     if (option.onClick) option.onClick(e)
-    if (!menuIsOpen) setIsActive(!isActive)
+    if (!menuIsOpen && !option?.preventCloseOnClick) setIsActive(!isActive)
   }
 
   return (

package/components/partials/element/table.tsx

@@ -1,4 +1,4 @@
-import { JSX, useState, useCallback } from 'react'
+import { JSX, useState, useCallback, Fragment } from 'react'
 import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
 import { Checkbox, queryObject, queryString, twMerge } from 'nitro-web'
 
@@ -14,6 +14,7 @@ export interface TableColumn {
   /** Use if the value is different from the sortBy */
   sortByValue?: string 
   align?: 'left' | 'center' | 'right'
+  isHidden?: boolean 
 }
 
 export type TableRow = {
@@ -83,6 +84,7 @@ export function Table<T extends TableRow>({
       rowLinesMax: typeof col.rowLinesMax != 'undefined' ? col.rowLinesMax : rowLinesMax,
       sortByValue: col.sortByValue || col.value,
       align: col.align || 'left',
+      isHidden: col.isHidden ?? false,
     }))
     return cols
   }, [columnsProp])
@@ -139,6 +141,8 @@ export function Table<T extends TableRow>({
               const sideColorPadding = sideColor && rows.length > 0 ? sideColor.width + 5 : 0
               const pl = sideColorPadding + (j == 0 ? columnPaddingX : columnGap)
               const pr = j == columns.length - 1 ? columnPaddingX : columnGap
+
+              if (col.isHidden) return <Fragment key={j} />
               return (
                 <div
                   key={j}
@@ -209,6 +213,7 @@ export function Table<T extends TableRow>({
             return (
               <div 
                 key={`${row._id}-${i}`}
+                id={`row-${row._id}-${i}`}
                 onClick={rowOnClick ? () => rowOnClick(row) : undefined}
                 className={twMerge(
                   `table-row relative ${rowOnClick ? 'cursor-pointer' : ''} ${isSelected ? 'is-selected' : ''}`, rowClassName
@@ -219,6 +224,8 @@ export function Table<T extends TableRow>({
                     const sideColor = j == 0 && rowSideColor ? rowSideColor(row) : undefined
                     const pl = j == 0 ? columnPaddingX : columnGap
                     const pr = j == columns.length - 1 ? columnPaddingX : columnGap
+
+                    if (col.isHidden) return <Fragment key={j} />
                     return (
                       <div
                         key={j}

package/components/partials/form/field.tsx

@@ -7,7 +7,7 @@ import { Errors, type Error } from 'nitro-web/types'
 import { MailIcon, CalendarIcon, FunnelIcon, SearchIcon, EyeIcon, EyeOffIcon } from 'lucide-react'
 import { memo } from 'react'
 
-type FieldType = 'text' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color'
+type FieldType = 'text' | 'number' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color'
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 type FieldExtraProps = {
@@ -35,7 +35,7 @@ type IconWrapperProps = {
 }
 // Discriminated union (https://stackoverflow.com/a/77351290/1900648)
 export type FieldProps = (
-  | ({ type?: 'text' | 'password' | 'email' | 'filter' | 'search' } & InputProps & FieldExtraProps)
+  | ({ type?: 'text' | 'number' | 'password' | 'email' | 'filter' | 'search' } & InputProps & FieldExtraProps)
   | ({ type: 'textarea' } & TextareaProps & FieldExtraProps)
   | ({ type: 'currency' } & FieldCurrencyProps & FieldExtraProps)
   | ({ type: 'color' } & FieldColorProps & FieldExtraProps)
@@ -67,7 +67,7 @@ function FieldBase({ state, icon, iconPos: ip, errorTitle, ...props }: FieldProp
   
   // Input type
   const [inputType, setInputType] = useState(() => { // eslint-disable-line
-    return type == 'password' ? 'password' : (type == 'textarea' ? 'textarea' : 'text')
+    return type == 'password' ? 'password' : (type == 'textarea' ? 'textarea' : (type == 'number' ? 'number' : 'text'))
   })
   
   // Value: Input is always controlled if state is passed in
@@ -76,7 +76,7 @@ function FieldBase({ state, icon, iconPos: ip, errorTitle, ...props }: FieldProp
     const v = deepFind(state, props.name) as string | undefined
     value = v ?? ''
   }
-
+  
   // Icon
   if (type == 'password') {
     Icon = <IconWrapper 
@@ -104,7 +104,7 @@ function FieldBase({ state, icon, iconPos: ip, errorTitle, ...props }: FieldProp
   const commonProps = { id: id, value: value, className: inputClassName }
 
   // Type has to be referenced as props.type for TS to be happy
-  if (!type || type == 'text' || type == 'password' || type == 'email' || type == 'filter' || type == 'search') {
+  if (!type || type == 'text' || type == 'number' || type == 'password' || type == 'email' || type == 'filter' || type == 'search') {
     return (
       <FieldContainer error={error} className={props.className}>
         {Icon}<input {...props} {...commonProps} type={inputType} />

package/components/partials/styleguide.tsx

@@ -412,6 +412,10 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
           </div>
           <Field name="password" type="password"/>
         </div>
+        <div>
+          <label for="search3number">Number</label>
+          <Field name="number" id="search3number" type="number" placeholder="Number..." />
+        </div>
         <div>
           <label for="search3">Search</label>
           <Field name="search" id="search3" type="search" placeholder="Search..." />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.112",
+  "version": "0.0.114",
   "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 🚀",

package/types/components/auth/auth.api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auth.api.d.ts","sourceRoot":"","sources":["../../../components/auth/auth.api.js"],"names":[],"mappings":"AAmQA,qGAyCC;AAED;;GAKC;AAED,0FAOC;AAED;;;;iBAkDC;AAED,mDAOC;AAED,4CAYC;AAED,kFAiBC;AA5YD;;;;;;;;;;;;;;;;;;EAqBC;AAmED,0DAEC;AAkCD,mDAEC;AAnBD,iDAeC;AA9BD,2DAaC;AAuBD,sEAuBC;AAED,kEAuBC;AAED,sEAqCC;AAED,2DAwBC;AA1ND,4DA+DC"}
+{"version":3,"file":"auth.api.d.ts","sourceRoot":"","sources":["../../../components/auth/auth.api.js"],"names":[],"mappings":"AAmQA,qGAyCC;AAED;;GAKC;AAED,0FAQC;AAED;;;;iBAkDC;AAED,mDAOC;AAED,4CAYC;AAED,kFAiBC;AA7YD;;;;;;;;;;;;;;;;;;EAqBC;AAmED,0DAEC;AAkCD,mDAEC;AAnBD,iDAeC;AA9BD,2DAaC;AAuBD,sEAuBC;AAED,kEAuBC;AAED,sEAqCC;AAED,2DAwBC;AA1ND,4DA+DC"}