uibee 2.8.5 → 2.8.6

package/dist/src/components/inputs/input.js

@@ -83,10 +83,32 @@ export default function Input(props) {
         const date = new Date(value);
         return isNaN(date.getTime()) ? null : date;
     }
+    function getDateDisplayValue() {
+        if (!value || !isDateType)
+            return value;
+        const date = getDateValue();
+        if (!date)
+            return value;
+        function pad(n) {
+            return n.toString().padStart(2, '0');
+        }
+        const yyyy = date.getFullYear();
+        const MM = pad(date.getMonth() + 1);
+        const dd = pad(date.getDate());
+        const hh = pad(date.getHours());
+        const mm = pad(date.getMinutes());
+        if (type === 'date')
+            return `${dd}.${MM}.${yyyy}`;
+        if (type === 'time')
+            return `${hh}:${mm}`;
+        if (type === 'datetime-local')
+            return `${dd}.${MM}.${yyyy} ${hh}:${mm}`;
+        return value;
+    }
     return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, className: className, children: _jsxs("div", { className: 'relative flex items-center', ref: containerRef, children: [displayIcon && (_jsx("div", { className: `
                             absolute left-3 text-login-200
                             ${isClickableType && !inputProps.disabled ? 'cursor-pointer hover:text-login-text' : 'pointer-events-none'}
-                        `, onClick: handleIconClick, children: displayIcon })), _jsx("input", { ...inputProps, ref: localRef, id: name, name: name, type: isClickableType ? 'text' : type, value: value, readOnly: isClickableType, onClick: () => isClickableType && !inputProps.disabled && setIsOpen(true), title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
+                        `, onClick: handleIconClick, children: displayIcon })), _jsx("input", { ...inputProps, ref: localRef, id: name, name: isClickableType ? undefined : name, type: isClickableType ? 'text' : type, value: isDateType ? getDateDisplayValue() : value, readOnly: isClickableType, onClick: () => isClickableType && !inputProps.disabled && setIsOpen(true), title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text placeholder-login-200
                         focus:outline-none focus:border-login focus:ring-1 focus:ring-login
@@ -96,5 +118,5 @@ export default function Input(props) {
                         input-reset
                         ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
                         ${isClickableType && !inputProps.disabled ? 'cursor-pointer' : ''}
-                    ` }), isOpen && isDateType && !inputProps.disabled && (_jsx(DateTimePickerPopup, { value: getDateValue(), onChange: handleDateChange, type: type, onClose: () => setIsOpen(false) })), isOpen && isColorType && !inputProps.disabled && (_jsx(ColorPickerPopup, { value: value || '', onChange: handleColorChange, onClose: () => setIsOpen(false) }))] }) }));
+                    ` }), isClickableType && (_jsx("input", { type: 'hidden', name: name, value: value })), isOpen && isDateType && !inputProps.disabled && (_jsx(DateTimePickerPopup, { value: getDateValue(), onChange: handleDateChange, type: type, onClose: () => setIsOpen(false) })), isOpen && isColorType && !inputProps.disabled && (_jsx(ColorPickerPopup, { value: value || '', onChange: handleColorChange, onClose: () => setIsOpen(false) }))] }) }));
 }

package/dist/src/components/inputs/shared/dateTimePickerPopup.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
 const MONTHS = [
     'January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December'
@@ -87,7 +87,8 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
         const daysInMonth = getDaysInMonth(year, month);
         const firstDay = getFirstDayOfMonth(year, month);
         const days = [];
-        for (let i = 0; i < firstDay; i++) {
+        const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1;
+        for (let i = 0; i < adjustedFirstDay; i++) {
             days.push(_jsx("div", { className: 'w-8 h-8' }, `empty-${i}`));
         }
         for (let i = 1; i <= daysInMonth; i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.8.5",
+  "version": "2.8.6",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/inputs/input.tsx

@@ -100,6 +100,29 @@ export default function Input(props: InputProps) {
         return isNaN(date.getTime()) ? null : date
     }
 
+    function getDateDisplayValue() {
+        if (!value || !isDateType) return value as string
+
+        const date = getDateValue()
+        if (!date) return value as string
+
+        function pad(n: number) {
+            return n.toString().padStart(2, '0')
+        }
+
+        const yyyy = date.getFullYear()
+        const MM = pad(date.getMonth() + 1)
+        const dd = pad(date.getDate())
+        const hh = pad(date.getHours())
+        const mm = pad(date.getMinutes())
+
+        if (type === 'date') return `${dd}.${MM}.${yyyy}`
+        if (type === 'time') return `${hh}:${mm}`
+        if (type === 'datetime-local') return `${dd}.${MM}.${yyyy} ${hh}:${mm}`
+
+        return value as string
+    }
+
     return (
         <FieldWrapper
             label={label}
@@ -125,9 +148,9 @@ export default function Input(props: InputProps) {
                     {...inputProps}
                     ref={localRef}
                     id={name}
-                    name={name}
+                    name={isClickableType ? undefined : name}
                     type={isClickableType ? 'text' : type}
-                    value={value}
+                    value={isDateType ? getDateDisplayValue() : value}
                     readOnly={isClickableType}
                     onClick={() => isClickableType && !inputProps.disabled && setIsOpen(true)}
                     title={label}
@@ -145,6 +168,9 @@ export default function Input(props: InputProps) {
                         ${isClickableType && !inputProps.disabled ? 'cursor-pointer' : ''}
                     `}
                 />
+                {isClickableType && (
+                    <input type='hidden' name={name} value={value as string} />
+                )}
                 {isOpen && isDateType && !inputProps.disabled && (
                     <DateTimePickerPopup
                         value={getDateValue()}

package/src/components/inputs/shared/dateTimePickerPopup.tsx

@@ -8,7 +8,7 @@ type DateTimePickerPopupProps = {
     onClose?: () => void
 }
 
-const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
 const MONTHS = [
     'January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December'
@@ -112,7 +112,9 @@ export default function DateTimePickerPopup({
         const firstDay = getFirstDayOfMonth(year, month)
         const days = []
 
-        for (let i = 0; i < firstDay; i++) {
+        const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1
+
+        for (let i = 0; i < adjustedFirstDay; i++) {
             days.push(<div key={`empty-${i}`} className='w-8 h-8' />)
         }