laif-ds 0.2.71 → 0.2.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_virtual/index6.js +2 -2
- package/dist/_virtual/index7.js +2 -2
- package/dist/agent-docs/components/AppForm.md +2 -0
- package/dist/agent-docs/components/AppTimePicker.md +3 -1
- package/dist/agent-docs/components/DatePicker.md +6 -0
- package/dist/agent-docs/components/FilePreview.md +142 -99
- package/dist/components/ui/app-kanban.js +149 -118
- package/dist/components/ui/app-time-picker.js +117 -99
- package/dist/components/ui/app-tooltip.js +49 -68
- package/dist/components/ui/chat-message.js +1 -1
- package/dist/components/ui/date-picker.js +219 -202
- package/dist/components/ui/dropdown-menu.js +50 -49
- package/dist/components/ui/file-preview/index.js +460 -0
- package/dist/components/ui/file-uploader.js +1 -1
- package/dist/components/ui/message-input.js +1 -1
- package/dist/index.d.ts +100 -10
- package/dist/index.js +1 -1
- package/dist/lib/file-preview.js +100 -21
- package/dist/node_modules/eventemitter3/index2.js +1 -1
- package/dist/node_modules/style-to-object/cjs/index.js +1 -1
- package/dist/styles.v3.css +1 -1
- package/package.json +2 -1
- package/dist/components/ui/file-preview.js +0 -263
package/dist/_virtual/index6.js
CHANGED
package/dist/_virtual/index7.js
CHANGED
|
@@ -214,6 +214,8 @@ Date picker component with optional range selection via `calendarRange`. Use `da
|
|
|
214
214
|
- `availableDates`: Array of specific dates that are selectable
|
|
215
215
|
- `showTime`: Show time picker columns (HH, MM)
|
|
216
216
|
- `withSeconds`: Show seconds column in the time picker (requires `showTime`)
|
|
217
|
+
- `minuteStep`: Minute step interval for the time picker
|
|
218
|
+
- `secondStep`: Second step interval for the time picker
|
|
217
219
|
- And other DatePicker props
|
|
218
220
|
|
|
219
221
|
**Example with English locale:**
|
|
@@ -24,6 +24,8 @@ Standalone time picker component for selecting hours, minutes, and optionally se
|
|
|
24
24
|
| `variant` | `"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"` | `"default"` | Visual variant of the trigger. |
|
|
25
25
|
| `useUtc` | `boolean` | `false` | Use UTC time instead of local time. Shows a "UTC" badge. |
|
|
26
26
|
| `withSeconds` | `boolean` | `false` | Show a seconds column in the time picker. |
|
|
27
|
+
| `minuteStep` | `number` | `1` | Step interval for minute options (`1`-`59`). |
|
|
28
|
+
| `secondStep` | `number` | `1` | Step interval for second options (`1`-`59`). |
|
|
27
29
|
| `minTime` | `Date` | `undefined` | Minimum selectable time. Hours/minutes/seconds before this are disabled. |
|
|
28
30
|
| `maxTime` | `Date` | `undefined` | Maximum selectable time. Hours/minutes/seconds after this are disabled. |
|
|
29
31
|
| `id` | `string` | `undefined` | HTML `id` for the trigger element. |
|
|
@@ -35,7 +37,7 @@ Standalone time picker component for selecting hours, minutes, and optionally se
|
|
|
35
37
|
|
|
36
38
|
### Time Selection
|
|
37
39
|
|
|
38
|
-
- **Columns**: The popover displays scrollable columns for hours (00–23) and minutes
|
|
40
|
+
- **Columns**: The popover displays scrollable columns for hours (00–23) and minutes. Minute values follow `minuteStep` and an optional seconds column follows `secondStep` when `withSeconds` is `true`.
|
|
39
41
|
- **Scroll-to-selected**: When the popover opens, the selected value is automatically scrolled into view.
|
|
40
42
|
- **Display format**: The trigger shows time in `HH:MM` format (or `HH:MM:SS` with `withSeconds`).
|
|
41
43
|
|
|
@@ -49,6 +49,8 @@ Date picker component that supports both **single date** and **date range** sele
|
|
|
49
49
|
| `onChange` | `(date: Date \| undefined) => void` | `undefined` | Called when the date changes. |
|
|
50
50
|
| `showTime` | `boolean` | `false` | Show time picker columns (HH, MM) alongside the calendar. |
|
|
51
51
|
| `withSeconds` | `boolean` | `false` | Show seconds column in the time picker (requires `showTime`). |
|
|
52
|
+
| `minuteStep` | `number` | `1` | Step interval for minute options (`1`-`59`, requires `showTime`). |
|
|
53
|
+
| `secondStep` | `number` | `1` | Step interval for second options (`1`-`59`, useful with `withSeconds`). |
|
|
52
54
|
|
|
53
55
|
### Range Mode Props (mode="range")
|
|
54
56
|
|
|
@@ -76,6 +78,7 @@ Date picker component that supports both **single date** and **date range** sele
|
|
|
76
78
|
|
|
77
79
|
- **Activation**: Set `showTime` to display hour and minute columns next to the calendar.
|
|
78
80
|
- **Seconds**: Set `withSeconds` alongside `showTime` to add a seconds column.
|
|
81
|
+
- **Steps**: Use `minuteStep` and `secondStep` to control minute/second increments in their respective columns.
|
|
79
82
|
- **Auto-close**: When `showTime` is enabled, the popover stays open after selecting a date so the user can adjust the time. Without `showTime`, the popover closes on date selection.
|
|
80
83
|
- **Format auto-detection**: If no `dateFormat` is provided, the component automatically uses `"dd/MM/yyyy HH:mm"` (or `"dd/MM/yyyy HH:mm:ss"` with `withSeconds`).
|
|
81
84
|
- **Time preservation**: When changing the date, the previously selected time is preserved.
|
|
@@ -241,6 +244,7 @@ export function DateTimePicker() {
|
|
|
241
244
|
value={date}
|
|
242
245
|
onChange={setDate}
|
|
243
246
|
showTime
|
|
247
|
+
minuteStep={5}
|
|
244
248
|
label="Data e ora"
|
|
245
249
|
placeholder="Seleziona data e ora"
|
|
246
250
|
/>
|
|
@@ -263,6 +267,8 @@ export function DateTimeWithSeconds() {
|
|
|
263
267
|
onChange={setDate}
|
|
264
268
|
showTime
|
|
265
269
|
withSeconds
|
|
270
|
+
minuteStep={5}
|
|
271
|
+
secondStep={10}
|
|
266
272
|
label="Data e ora con secondi"
|
|
267
273
|
/>
|
|
268
274
|
);
|
|
@@ -1,99 +1,142 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
1
|
+
# FilePreview
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
Compact file chip with name, format/size info, optional remove button, and optional action menu (preview/download/remove). Automatically adapts its preview based on file type (image, text, generic).
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Props
|
|
10
|
+
|
|
11
|
+
| Prop | Type | Default | Description |
|
|
12
|
+
| ---------------- | ------------------------------------------------------------------------------------ | ------------ | --------------------------------------------------------------------------------------------------------------- |
|
|
13
|
+
| `file` | `File \| { name: string; url: string; type?: string }` | **required** | File object or remote descriptor with `url`. |
|
|
14
|
+
| `clickable` | `boolean` | `true` | Whether the chip container is interactive (click/keyboard). |
|
|
15
|
+
| `onClick` | `(event: React.MouseEvent \| React.KeyboardEvent) => void \| Promise<void> \| false` | `undefined` | Optional container click handler. Takes precedence over `onPreview`. Not allowed when `showActionMenu` is true. |
|
|
16
|
+
| `onRemove` | `(url: string) => void \| Promise<void>` | `undefined` | Called when user removes the file. |
|
|
17
|
+
| `onPreview` | `(url: string) => void \| Promise<void>` | `undefined` | Called when user clicks Preview from the action menu. |
|
|
18
|
+
| `onDownload` | `(url: string) => void \| Promise<void>` | `undefined` | Called when user clicks Download from the action menu. |
|
|
19
|
+
| `showActionMenu` | `boolean` | `false` | Show overflow menu (Preview/Download/Delete if provided). |
|
|
20
|
+
| `showThumbnail` | `boolean` | `true` | Controls whether a thumbnail/text preview is rendered when available. |
|
|
21
|
+
| `variant` | `"default" \| "outline" \| "ghost"` | `"default"` | Visual style of the chip container. |
|
|
22
|
+
| `size` | `"default" \| "sm"` | `"default"` | Visual size of the chip container and its internal elements. |
|
|
23
|
+
| `className` | `string` | `""` | Additional classes for the wrapper. |
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## Behavior
|
|
28
|
+
|
|
29
|
+
- **Automatic preview**:
|
|
30
|
+
- Images: thumbnail preview (falls back to an icon if the image cannot be loaded).
|
|
31
|
+
- Text: small snippet (first 100 chars) only when `file` is a native `File`.
|
|
32
|
+
- Generic: file-type icon and labels.
|
|
33
|
+
- **Format & size**: Displays file size (if available) and format label (e.g., PDF, JPG).
|
|
34
|
+
- **Actions**:
|
|
35
|
+
- Inline remove button if `onRemove` is provided and `showActionMenu` is false.
|
|
36
|
+
- Popover action menu when `showActionMenu` is true, using `onPreview`, `onDownload`, `onRemove`.
|
|
37
|
+
- **Container click**:
|
|
38
|
+
- If `clickable` is `false`, the container is not interactive.
|
|
39
|
+
- If `onClick` is provided, it takes precedence over `onPreview` when the container is activated.
|
|
40
|
+
- Otherwise, if `onPreview` is provided, it is used when the container is activated.
|
|
41
|
+
- When `showActionMenu` is `true`, `clickable` and `onClick` props are not allowed.
|
|
42
|
+
- **Thumbnails**:
|
|
43
|
+
- Images: if `showThumbnail` is `false`, an icon is shown instead of the image.
|
|
44
|
+
- Text: if `showThumbnail` is `false` (or a preview can't be extracted), an icon is shown instead of the text snippet.
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
## Examples
|
|
49
|
+
|
|
50
|
+
### Image
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
import { FilePreview } from "laif-ds";
|
|
54
|
+
|
|
55
|
+
export function ImagePreview() {
|
|
56
|
+
return (
|
|
57
|
+
<FilePreview
|
|
58
|
+
file={{
|
|
59
|
+
name: "photo.jpg",
|
|
60
|
+
url: "https://picsum.photos/id/237/200/200",
|
|
61
|
+
type: "image/jpeg",
|
|
62
|
+
}}
|
|
63
|
+
onPreview={(url) => console.log("preview", url)}
|
|
64
|
+
onDownload={(url) => console.log("download", url)}
|
|
65
|
+
/>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### With Remove Button
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
import { FilePreview } from "laif-ds";
|
|
74
|
+
|
|
75
|
+
export function RemovablePreview() {
|
|
76
|
+
return (
|
|
77
|
+
<FilePreview
|
|
78
|
+
file={{
|
|
79
|
+
name: "document.docx",
|
|
80
|
+
url: "https://example.com/document.docx",
|
|
81
|
+
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
|
82
|
+
}}
|
|
83
|
+
onRemove={(url) => console.log("remove", url)}
|
|
84
|
+
onPreview={(url) => console.log("preview", url)}
|
|
85
|
+
onDownload={(url) => console.log("download", url)}
|
|
86
|
+
/>
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### With Action Menu
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
import { FilePreview } from "laif-ds";
|
|
95
|
+
|
|
96
|
+
export function WithMenu() {
|
|
97
|
+
return (
|
|
98
|
+
<FilePreview
|
|
99
|
+
file={{
|
|
100
|
+
name: "presentation.ppt",
|
|
101
|
+
url: "https://example.com/presentation.ppt",
|
|
102
|
+
type: "application/vnd.ms-powerpoint",
|
|
103
|
+
}}
|
|
104
|
+
showActionMenu
|
|
105
|
+
onPreview={(url) => console.log("preview", url)}
|
|
106
|
+
onDownload={(url) => console.log("download", url)}
|
|
107
|
+
onRemove={(url) => console.log("remove", url)}
|
|
108
|
+
/>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### With Custom Click Handler
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
import { FilePreview } from "laif-ds";
|
|
117
|
+
|
|
118
|
+
export function CustomClick() {
|
|
119
|
+
return (
|
|
120
|
+
<FilePreview
|
|
121
|
+
file={{
|
|
122
|
+
name: "document.pdf",
|
|
123
|
+
url: "https://example.com/document.pdf",
|
|
124
|
+
type: "application/pdf",
|
|
125
|
+
}}
|
|
126
|
+
variant="outline"
|
|
127
|
+
size="sm"
|
|
128
|
+
onClick={(event) => console.log("custom click handler", event)}
|
|
129
|
+
onRemove={(url) => console.log("remove", url)}
|
|
130
|
+
/>
|
|
131
|
+
);
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
---
|
|
136
|
+
|
|
137
|
+
## Notes
|
|
138
|
+
|
|
139
|
+
- **Thumbnails**: Image previews use object-fit to contain within the chip.
|
|
140
|
+
- **Security**: For local `File` previews, temporary object URLs are created and revoked on unmount/change.
|
|
141
|
+
- **Internationalization**: Text labels in the action menu can be adjusted at call sites when needed.
|
|
142
|
+
- **Async support**: All callback functions (`onClick`, `onRemove`, `onPreview`, `onDownload`) support async operations and can return Promise<void>.
|