@bridge-ui/vue 0.1.1 → 0.2.0

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.
Files changed (33) hide show
  1. package/ai/skills/bridge-ui-components/SKILL.md +1 -0
  2. package/dist/Components/CalendarRange/CalendarRange.vue_vue_type_script_setup_true_lang.js +135 -109
  3. package/dist/Components/CalendarRange/calendarRange.types.d.ts +17 -5
  4. package/dist/Components/CalendarRange/composables/useCalendarRange.d.ts +4 -2
  5. package/dist/Components/CalendarRange/composables/useCalendarRange.js +85 -86
  6. package/dist/Components/DateTimeRangePicker/DateTimeRangePicker.vue_vue_type_script_setup_true_lang.js +1 -6
  7. package/dist/Components/Drawer/composables/useDrawer.js +1 -1
  8. package/dist/Components/FieldOverlay/FieldOverlay.vue_vue_type_script_setup_true_lang.js +35 -35
  9. package/dist/Components/FieldOverlay/composables/useFieldOverlay.d.ts +1 -0
  10. package/dist/Components/FieldOverlay/composables/useFieldOverlay.js +21 -19
  11. package/dist/Components/FieldOverlay/fieldOverlay.types.d.ts +11 -3
  12. package/dist/Components/Listbox/composables/useListbox.js +1 -1
  13. package/dist/Components/Modal/composables/useModal.js +1 -1
  14. package/dist/Components/TimePanel/composables/useTimePanel.d.ts +4 -0
  15. package/dist/Components/TimePanel/composables/useTimePanel.js +13 -12
  16. package/dist/Components/TimeRangePicker/TimeRangePicker.vue_vue_type_script_setup_true_lang.js +103 -89
  17. package/dist/Components/TimeRangePicker/composables/useTimeRangePicker.d.ts +4 -2
  18. package/dist/Components/TimeRangePicker/composables/useTimeRangePicker.js +55 -54
  19. package/dist/Components/TimeRangePicker/timeRangePicker.types.d.ts +1 -7
  20. package/dist/index.js +32 -32
  21. package/dist/theme.css +2 -0
  22. package/docs/README.md +4 -0
  23. package/docs/ScrollUtilities.md +89 -0
  24. package/docs/components/Autocomplete.md +2 -0
  25. package/docs/components/CalendarRange.md +4 -3
  26. package/docs/components/DateRangePicker.md +3 -2
  27. package/docs/components/Drawer.md +21 -21
  28. package/docs/components/FieldOverlay.md +19 -8
  29. package/docs/components/Modal.md +19 -19
  30. package/docs/components/Select.md +2 -0
  31. package/docs/components/TimePanel.md +2 -0
  32. package/docs/components/TimeRangePicker.md +0 -1
  33. package/package.json +2 -2
@@ -0,0 +1,89 @@
1
+ # Scroll utilities
2
+
3
+ CSS utilities for overflow scrollers. They ship in `theme.css` — no extra import.
4
+
5
+ Not a component. Put the class on the element that has `overflow-y-auto` / `overflow-x-auto`.
6
+
7
+ ## Classes
8
+
9
+ | Class | Role |
10
+ | ------------------------- | ---------------------------------------------------------------------- |
11
+ | `bridge-scroll-fade` | Vertical fade (alias of `-y`). |
12
+ | `bridge-scroll-fade-y` | Vertical fade on the overflow scroller. |
13
+ | `bridge-scroll-fade-x` | Horizontal fade on the overflow scroller. |
14
+ | `bridge-scroll-fade-none` | Disable the fade. Works in any class order. |
15
+ | `bridge-soft-scrollbar` | Thin, rounded thumb. |
16
+ | `bridge-hide-scrollbar` | Hide the scrollbar; wheel / keyboard / programmatic scroll still work. |
17
+
18
+ ## Examples
19
+
20
+ ### Vertical fade
21
+
22
+ ```vue
23
+ <div class="bridge-scroll-fade-y overflow-y-auto">…</div>
24
+ ```
25
+
26
+ ### Horizontal fade
27
+
28
+ ```vue
29
+ <div class="flex bridge-scroll-fade-x overflow-x-auto">…</div>
30
+ ```
31
+
32
+ ### Hide scrollbar
33
+
34
+ ```vue
35
+ <div class="bridge-scroll-fade-y bridge-hide-scrollbar overflow-y-auto">
36
+
37
+ </div>
38
+ ```
39
+
40
+ ### Fade size
41
+
42
+ Depth defaults to `12%` of the container, capped at `40px`. Override with `--bridge-scroll-fade-size`:
43
+
44
+ ```vue
45
+ <div
46
+ class="bridge-scroll-fade-y overflow-y-auto [--bridge-scroll-fade-size:1.5rem]"
47
+ >
48
+
49
+ </div>
50
+ ```
51
+
52
+ ### Disable the fade
53
+
54
+ ```vue
55
+ <div class="bridge-scroll-fade-y bridge-scroll-fade-none overflow-y-auto">
56
+
57
+ </div>
58
+ ```
59
+
60
+ ### Soft scrollbar
61
+
62
+ ```vue
63
+ <div class="bridge-soft-scrollbar overflow-y-auto">…</div>
64
+ ```
65
+
66
+ Do not pair `bridge-scroll-fade-*` with `bridge-soft-scrollbar` on the same node — the mask dissolves the thumb at the edges. Use fade + `bridge-hide-scrollbar` when the fade is the overflow hint.
67
+
68
+ Do not put `bridge-scroll-fade-x` and `bridge-scroll-fade-y` on the same node — both set `mask-image`, and the later rule wins.
69
+
70
+ Put background and border on a wrapper; put `bridge-scroll-fade-*` on the inner scroller so the mask dissolves content, not the card chrome.
71
+
72
+ ## Behavior
73
+
74
+ - Scroll-aware when the browser supports scroll-driven animations: crisp start edge at rest, both edges mid-scroll, crisp end edge at the end.
75
+ - If content does not overflow, no fade.
76
+ - Without scroll-driven animations, no fade. Wheel / keyboard / programmatic scroll still work.
77
+ - `bridge-scroll-fade-x` follows reading direction (RTL included).
78
+
79
+ ## TimePanel
80
+
81
+ TimePanel columns use `bridge-scroll-fade-y` and `bridge-hide-scrollbar` by default. Add `bridge-scroll-fade-none` via `classes.column` to disable the fade.
82
+
83
+ ## Also used by
84
+
85
+ | Component | Classes |
86
+ | ------------------------------- | ------------------------------------------------------------------------ |
87
+ | Select / Listbox | `bridge-soft-scrollbar` on the options scroller. |
88
+ | Modal / Drawer `scroll="paper"` | `bridge-scroll-fade-y` and `bridge-hide-scrollbar` on the panel. |
89
+ | FieldOverlay drawer | Inner `bridge-scroll-fade-x`; vertical fade comes from `scroll="paper"`. |
@@ -2,6 +2,8 @@
2
2
 
3
3
  Combobox with single/multiple value, search, async data, and optional free-solo input.
4
4
 
5
+ The options list uses `bridge-soft-scrollbar`. See [Scroll utilities](../ScrollUtilities.md).
6
+
5
7
  ## Import
6
8
 
7
9
  ```ts
@@ -1,7 +1,8 @@
1
1
  # CalendarRange
2
2
 
3
- Dual-month calendar for selecting a date range. Shared year/month selectors with
4
- two date panels (`orientation="horizontal"` side-by-side, or `"vertical"` stacked).
3
+ Dual-month calendar for selecting a date range. Year sits on the left and nav
4
+ on the right; month selectors sit inward from the header midpoint
5
+ (`orientation="horizontal"` side-by-side, or `"vertical"` stacked).
5
6
 
6
7
  ## Import
7
8
 
@@ -28,7 +29,7 @@ import { CalendarRange } from "@bridge-ui/vue/Components/CalendarRange";
28
29
  ```vue
29
30
  <CalendarRange
30
31
  :custom-props="{
31
- panels: { class: 'gap-4' },
32
+ startHeader: { class: 'pr-2' },
32
33
  root: { 'data-testid': 'calendar-range' },
33
34
  }"
34
35
  />
@@ -1,7 +1,8 @@
1
1
  # DateRangePicker
2
2
 
3
- Inline dual-month picker for an inclusive date range (`[start, end]`). The header
4
- exposes year, start month, and end month selectors in one row.
3
+ Inline dual-month picker for an inclusive date range (`[start, end]`). Year sits
4
+ on the left and nav on the right; month selectors sit inward from the header
5
+ midpoint.
5
6
 
6
7
  ## Import
7
8
 
@@ -96,27 +96,27 @@ import { Drawer } from "@bridge-ui/vue/Components/Drawer";
96
96
 
97
97
  ## Props
98
98
 
99
- | Prop | Type | Default | Description |
100
- | --------------------- | ------------------- | ------- | ------------------------------------------------------------------------------------------ |
101
- | `ariaLabel` | `string` | — | Accessible name for the dialog (`aria-label`). |
102
- | `ariaLabelledBy` | `string` | — | Id of the element that labels the dialog (`aria-labelledby`). |
103
- | `autoFocus` | `boolean` | `false` | When true, focuses the first focusable element inside the drawer on open. |
104
- | `blur` | `DrawerBlur` | "none" | Backdrop blur on the overlay. |
105
- | `classes` | `DrawerClasses` | — | The classes to apply to the drawer. |
106
- | `closeOnEscape` | `boolean` | `true` | Whether the drawer closes on escape key press. |
107
- | `closeOnOverlay` | `boolean` | `true` | Whether the drawer closes on overlay click. |
108
- | `customProps` | `DrawerCustomProps` | — | Props forwarded to each drawer part. |
109
- | `disableEnforceFocus` | `boolean` | `false` | When true, focus is not trapped inside the drawer while open. |
110
- | `disableRestoreFocus` | `boolean` | `false` | When true, focus is not restored to the previously focused element on close. |
111
- | `disableScrollLock` | `boolean` | `false` | When true, body scroll is not locked while the drawer is open. |
112
- | `hideBackdrop` | `boolean` | `false` | When true, the backdrop overlay is not rendered. |
113
- | `keepMounted` | `boolean` | `false` | When true, the drawer stays mounted in the DOM after closing (hidden). |
114
- | `persistent` | `boolean` | `false` | When true, escape and overlay clicks do not close the drawer. |
115
- | `placement` | `DrawerPlacement` | "left" | Edge the panel docks to. |
116
- | `scroll` | `DrawerScroll` | "paper" | Where scroll happens: the page (`body`) or the drawer panel (`paper`). |
117
- | `size` | `DrawerSize` | "md" | Panel size along the placement axis (width for `left`/`right`, height for `top`/`bottom`). |
118
- | `teleportTo` | `string \| false` | "body" | Where to teleport the drawer. Pass `false` to render in place. |
119
- | `transition` | `DrawerTransition` | "slide" | Enter/leave animation for overlay and panel. |
99
+ | Prop | Type | Default | Description |
100
+ | --------------------- | ------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
101
+ | `ariaLabel` | `string` | — | Accessible name for the dialog (`aria-label`). |
102
+ | `ariaLabelledBy` | `string` | — | Id of the element that labels the dialog (`aria-labelledby`). |
103
+ | `autoFocus` | `boolean` | `false` | When true, focuses the first focusable element inside the drawer on open. |
104
+ | `blur` | `DrawerBlur` | "none" | Backdrop blur on the overlay. |
105
+ | `classes` | `DrawerClasses` | — | The classes to apply to the drawer. |
106
+ | `closeOnEscape` | `boolean` | `true` | Whether the drawer closes on escape key press. |
107
+ | `closeOnOverlay` | `boolean` | `true` | Whether the drawer closes on overlay click. |
108
+ | `customProps` | `DrawerCustomProps` | — | Props forwarded to each drawer part. |
109
+ | `disableEnforceFocus` | `boolean` | `false` | When true, focus is not trapped inside the drawer while open. |
110
+ | `disableRestoreFocus` | `boolean` | `false` | When true, focus is not restored to the previously focused element on close. |
111
+ | `disableScrollLock` | `boolean` | `false` | When true, body scroll is not locked while the drawer is open. |
112
+ | `hideBackdrop` | `boolean` | `false` | When true, the backdrop overlay is not rendered. |
113
+ | `keepMounted` | `boolean` | `false` | When true, the drawer stays mounted in the DOM after closing (hidden). |
114
+ | `persistent` | `boolean` | `false` | When true, escape and overlay clicks do not close the drawer. |
115
+ | `placement` | `DrawerPlacement` | "left" | Edge the panel docks to. |
116
+ | `scroll` | `DrawerScroll` | "paper" | Where scroll happens: the page (`body`) or the drawer panel (`paper`). `paper` uses `bridge-scroll-fade-y` and `bridge-hide-scrollbar`. |
117
+ | `size` | `DrawerSize` | "md" | Panel size along the placement axis (width for `left`/`right`, height for `top`/`bottom`). |
118
+ | `teleportTo` | `string \| false` | "body" | Where to teleport the drawer. Pass `false` to render in place. |
119
+ | `transition` | `DrawerTransition` | "slide" | Enter/leave animation for overlay and panel. |
120
120
 
121
121
  ### v-model
122
122
 
@@ -2,9 +2,10 @@
2
2
 
3
3
  Switches between `Menu`, `Modal`, and `Drawer` shells for field pickers and listboxes.
4
4
  Dialog shells size to the picker: `modal` uses `w-fit` up to the viewport;
5
- `drawer` is full width and up to `90dvh`, and scrolls horizontally when dual
6
- calendars or time columns overflow. Nested pickers flush the bottom radius in a
7
- drawer so the shell meets the screen edge.
5
+ `drawer` is full width and up to `90dvh`. Dual calendars and time columns that
6
+ overflow the sheet width scroll on an inner scroller (`bridge-scroll-fade-x`).
7
+ Vertical fade comes from `scroll="paper"`. Nested pickers flush the bottom
8
+ radius in a drawer so the shell meets the screen edge.
8
9
 
9
10
  ## Import
10
11
 
@@ -38,7 +39,7 @@ import { FieldOverlay } from "@bridge-ui/vue/Components/FieldOverlay";
38
39
 
39
40
  ### customProps
40
41
 
41
- Forward props to the active shell via `customProps.menu`, `customProps.modal`, or `customProps.drawer`. Menu-only options such as `anchorEl`, `placement`, `disableAutoFocus`, and `rounded` go through `customProps.menu`.
42
+ Forward props to the active shell via `customProps.menu`, `customProps.modal`, or `customProps.drawer`. The drawer inner scroller accepts `customProps.drawerScroller`. Menu-only options such as `anchorEl`, `placement`, `disableAutoFocus`, and `rounded` go through `customProps.menu`.
42
43
 
43
44
  ```vue
44
45
  <FieldOverlay
@@ -64,6 +65,16 @@ Forward props to the active shell via `customProps.menu`, `customProps.modal`, o
64
65
  >
65
66
  <PickerContent />
66
67
  </FieldOverlay>
68
+
69
+ <FieldOverlay
70
+ v-model="open"
71
+ overlay="drawer"
72
+ :custom-props="{
73
+ drawerScroller: { class: 'bridge-scroll-fade-none' },
74
+ }"
75
+ >
76
+ <PickerContent />
77
+ </FieldOverlay>
67
78
  ```
68
79
 
69
80
  ### Footer close
@@ -79,10 +90,10 @@ overlay. Use the picker slot callbacks in custom footers so Apply still commits.
79
90
 
80
91
  ## Props
81
92
 
82
- | Prop | Type | Default | Description |
83
- | ------------- | ------------------------- | -------- | ---------------------------------------------------------- |
84
- | `customProps` | `FieldOverlayCustomProps` | — | Extra props for nested shells (`menu`, `modal`, `drawer`). |
85
- | `overlay` | `FieldOverlayMode` | `"auto"` | Overlay shell: `menu`, `modal`, `drawer`, or `auto`. |
93
+ | Prop | Type | Default | Description |
94
+ | ------------- | ------------------------- | -------- | ----------------------------------------------------------------------------------------------------- |
95
+ | `customProps` | `FieldOverlayCustomProps` | — | Extra props for nested shells (`menu`, `modal`, `drawer`) and the drawer scroller (`drawerScroller`). |
96
+ | `overlay` | `FieldOverlayMode` | `"auto"` | Overlay shell: `menu`, `modal`, `drawer`, or `auto`. |
86
97
 
87
98
  ### v-model
88
99
 
@@ -115,25 +115,25 @@ const breakpoint = useBreakpoint();
115
115
 
116
116
  ## Props
117
117
 
118
- | Prop | Type | Default | Description |
119
- | --------------------- | ------------------ | --------------- | ------------------------------------------------------------------------------------------------------------------ |
120
- | `align` | `ModalAlign` | "middle-center" | Panel position on all breakpoints (`{row}-{column}` grid). Use `useBreakpoint` for a different align per viewport. |
121
- | `autoFocus` | `boolean` | `false` | When true, focuses the first focusable element inside the dialog on open. |
122
- | `blur` | `ModalBlur` | "none" | Backdrop blur on the overlay. |
123
- | `classes` | `ModalClasses` | — | The classes to apply to the modal. |
124
- | `closeOnEscape` | `boolean` | `true` | Whether the modal closes on escape key press. |
125
- | `closeOnOverlay` | `boolean` | `true` | Whether the modal closes on overlay click. |
126
- | `customProps` | `ModalCustomProps` | — | Props forwarded to each modal part. |
127
- | `disableEnforceFocus` | `boolean` | `false` | When true, focus is not trapped inside the modal while open. |
128
- | `disableRestoreFocus` | `boolean` | `false` | When true, focus is not restored to the previously focused element on close. |
129
- | `disableScrollLock` | `boolean` | `false` | When true, body scroll is not locked while the modal is open. |
130
- | `hideBackdrop` | `boolean` | `false` | When true, the backdrop overlay is not rendered. |
131
- | `keepMounted` | `boolean` | `false` | When true, the modal stays mounted in the DOM after closing (hidden). |
132
- | `persistent` | `boolean` | `false` | When true, escape and overlay clicks do not close the modal. |
133
- | `scroll` | `ModalScroll` | "body" | Where scroll happens: the page (`body`) or the dialog panel (`paper`). |
134
- | `size` | `ModalSize` | "md" | Max width of the dialog from the `sm` breakpoint up (`sm:max-w-*`). |
135
- | `teleportTo` | `string \| false` | "body" | Where to teleport the modal. Pass `false` to render in place. |
136
- | `transition` | `ModalTransition` | "fade" | Enter/leave animation for overlay and panel. |
118
+ | Prop | Type | Default | Description |
119
+ | --------------------- | ------------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
120
+ | `align` | `ModalAlign` | "middle-center" | Panel position on all breakpoints (`{row}-{column}` grid). Use `useBreakpoint` for a different align per viewport. |
121
+ | `autoFocus` | `boolean` | `false` | When true, focuses the first focusable element inside the dialog on open. |
122
+ | `blur` | `ModalBlur` | "none" | Backdrop blur on the overlay. |
123
+ | `classes` | `ModalClasses` | — | The classes to apply to the modal. |
124
+ | `closeOnEscape` | `boolean` | `true` | Whether the modal closes on escape key press. |
125
+ | `closeOnOverlay` | `boolean` | `true` | Whether the modal closes on overlay click. |
126
+ | `customProps` | `ModalCustomProps` | — | Props forwarded to each modal part. |
127
+ | `disableEnforceFocus` | `boolean` | `false` | When true, focus is not trapped inside the modal while open. |
128
+ | `disableRestoreFocus` | `boolean` | `false` | When true, focus is not restored to the previously focused element on close. |
129
+ | `disableScrollLock` | `boolean` | `false` | When true, body scroll is not locked while the modal is open. |
130
+ | `hideBackdrop` | `boolean` | `false` | When true, the backdrop overlay is not rendered. |
131
+ | `keepMounted` | `boolean` | `false` | When true, the modal stays mounted in the DOM after closing (hidden). |
132
+ | `persistent` | `boolean` | `false` | When true, escape and overlay clicks do not close the modal. |
133
+ | `scroll` | `ModalScroll` | "body" | Where scroll happens: the page (`body`) or the dialog panel (`paper`). `paper` uses `bridge-scroll-fade-y` and `bridge-hide-scrollbar`. |
134
+ | `size` | `ModalSize` | "md" | Max width of the dialog from the `sm` breakpoint up (`sm:max-w-*`). |
135
+ | `teleportTo` | `string \| false` | "body" | Where to teleport the modal. Pass `false` to render in place. |
136
+ | `transition` | `ModalTransition` | "fade" | Enter/leave animation for overlay and panel. |
137
137
 
138
138
  ### v-model
139
139
 
@@ -2,6 +2,8 @@
2
2
 
3
3
  Dropdown select with single/multiple value, search, and async data.
4
4
 
5
+ The options list uses `bridge-soft-scrollbar`. See [Scroll utilities](../ScrollUtilities.md).
6
+
5
7
  ## Import
6
8
 
7
9
  ```ts
@@ -48,6 +48,8 @@ import { TimePanel } from "@bridge-ui/vue/Components/TimePanel";
48
48
 
49
49
  Time panel tokens live on `components.TimePanel` (`color`, `rounded`).
50
50
 
51
+ Columns use `bridge-scroll-fade-y` and `bridge-hide-scrollbar` by default. Add `bridge-scroll-fade-none` via `classes.column` to disable the fade. See [Scroll utilities](../ScrollUtilities.md).
52
+
51
53
  ## Events
52
54
 
53
55
  | Event | Payload | Description |
@@ -37,7 +37,6 @@ import { TimeRangePicker } from "@bridge-ui/vue/Components/TimeRangePicker";
37
37
  | `interval` | `number` | `1` | Minute step between options. |
38
38
  | `maxTime` | `Date` | — | Latest selectable time. |
39
39
  | `minTime` | `Date` | — | Earliest selectable time. |
40
- | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout of start / end time panels. |
41
40
  | `readOnly` | `boolean` | `false` | Prevents selection. |
42
41
  | `rounded` | `CalendarRounded` | `"md"` | Border radius of time tiles and chrome. |
43
42
  | `showFooter` | `boolean` | `false` | Shows Cancel / Apply. Selection is draft until Apply. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "type": "module",
3
3
  "license": "MIT",
4
- "version": "0.1.1",
4
+ "version": "0.2.0",
5
5
  "author": "BridgeUI",
6
6
  "sideEffects": false,
7
7
  "name": "@bridge-ui/vue",
@@ -83,7 +83,7 @@
83
83
  "vue": "^3.4.0"
84
84
  },
85
85
  "dependencies": {
86
- "@bridge-ui/core": "^0.1.1",
86
+ "@bridge-ui/core": "^0.2.0",
87
87
  "clsx": "^2.1.1",
88
88
  "es-toolkit": "^1.50.0",
89
89
  "tailwind-merge": "^3.6.0"