rei-kit 2.19.0 → 2.20.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.
- package/README.md +3 -3
- package/dist/components/ActivityGrid.vue.d.ts +52 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +326 -143
- package/dist/index.js.map +1 -1
- package/dist/styles.css +37 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# rei-kit
|
|
2
2
|
|
|
3
|
-
**One kit. Every look.**
|
|
3
|
+
**One kit. Every look.** 97 accessible components for Vue 3 and Tailwind 4.
|
|
4
4
|
Change the **material** with one attribute and the **palette** with another —
|
|
5
5
|
every component follows, and none of them knows your brand.
|
|
6
6
|
|
|
@@ -112,7 +112,7 @@ Each claim here is enforced by something that fails, not by a promise.
|
|
|
112
112
|
|
|
113
113
|
| Standard | How it is held |
|
|
114
114
|
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
115
|
-
| **Open for extension, closed for edits** | A new look is a token, a material or a palette — never an edit to a component. Materials and palettes restyle all
|
|
115
|
+
| **Open for extension, closed for edits** | A new look is a token, a material or a palette — never an edit to a component. Materials and palettes restyle all 97 without touching one, and a test fails if a component holds a colour. |
|
|
116
116
|
| **Single responsibility** | One part, one job. Label-and-error wiring lives in `FormField`, not in five inputs; taking the page behind a layer out of reach lives in one helper the modal, the sheet and the guide share. |
|
|
117
117
|
| **Depend on roles, not values** | Components read `primary`, `surface`, `--shadow-card` — never a hex or a pixel shadow. An app's brand wins in both modes, tested. |
|
|
118
118
|
| **WAI-ARIA Authoring Practices** | Menus, comboboxes, tabs, sliders, dialogs and accordions follow their APG pattern: arrows move, Tab leaves, Escape closes, focus returns. Behaviour tests drive each with the keyboard. |
|
|
@@ -128,7 +128,7 @@ Each claim here is enforced by something that fails, not by a promise.
|
|
|
128
128
|
|
|
129
129
|
| | |
|
|
130
130
|
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
131
|
-
| Components |
|
|
131
|
+
| Components | 97 (`AuthForm`, `BaseTable`, `BaseCombobox`, `BaseSlider`, `TabShell`, `BaseModal`, `BaseTabs`, `BaseTooltip`, `BasePagination`, `BaseBreadcrumb`, `BaseDisclosure`, `BaseAccordion`, `NavLinks`, `OfflineBanner`, `FabButton`, `BaseButton`, `BaseCard`, `BaseInput`, `BaseSelect`, `BaseTextarea`, `BaseCheckbox`, `BaseSwitch`, `BaseRadioGroup`, `BaseMenu`, `BaseAvatar`, `BaseSpinner`, `BaseAlert`, `BaseBadge`, `BaseSheet`, `ProgressBar`, `PriceCard`, `ToastHost`, `TabBar`, `GoogleButton`, `LocaleLinks`, `LocaleSheet`, `AuthShell`, `TourShell`, `InstallPrompt`, `UpdatePrompt`, `InstallSettings`, `SkeletonList`, `PageContainer`, `ErrorBoundary`, etc.) |
|
|
132
132
|
| Composables | 16 (`useToast`, `useTheme`, `useMaterial`, `usePalette`, `useToday`, `useMediaQuery`, `useInstall`, `watchInstallability`, `createTabTransition`, `useThemeSync`, `useVisualViewport`, etc.) |
|
|
133
133
|
| Utilities | 33 (`applyTheme`, `applyMaterial`, `applyPalette`, `MATERIALS`, `PALETTES`, `formatDate`, `fieldErrors`, `toAuthMessageKey`, `createAuthGuard`, `createQueryDefaults`, `createWriteReport`, `toRedirectPath`, `Supabase error mapper`, i18n runtime, etc.) |
|
|
134
134
|
| Entry Points | `rei-kit`, `rei-kit/app`, `rei-kit/web`, `rei-kit/pwa`, `rei-kit/supabase`, `rei-kit/mobile.css`, `rei-kit/web.css`, and each stylesheet on its own |
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { WeekStart } from '../utils/date';
|
|
2
|
+
/**
|
|
3
|
+
* A year of days, as a grid you can read at a glance.
|
|
4
|
+
*
|
|
5
|
+
* ## It is a table, and that is not a detail
|
|
6
|
+
*
|
|
7
|
+
* Weekdays are the rows and weeks are the columns, so the markup is a
|
|
8
|
+
* `<table>` and the visual layout falls out of it. The obvious way — one
|
|
9
|
+
* CSS grid flowing column by column — puts the DOM in a different order
|
|
10
|
+
* from the picture, and anything laid over that order afterwards
|
|
11
|
+
* (`role="grid"`, arrow keys, a reader's own table navigation) then
|
|
12
|
+
* describes a shape that is not on screen.
|
|
13
|
+
*
|
|
14
|
+
* ## One stop, not three hundred and sixty-five
|
|
15
|
+
*
|
|
16
|
+
* Every day is reachable, and the whole grid is a single stop in the tab
|
|
17
|
+
* order: the arrows move between days, Home and End go to the ends of a
|
|
18
|
+
* week, and Enter chooses. A grid of focusable cells is the other way this
|
|
19
|
+
* is written, and it costs somebody using a keyboard a year of presses to
|
|
20
|
+
* get past a picture.
|
|
21
|
+
*
|
|
22
|
+
* ## The colours are yours
|
|
23
|
+
*
|
|
24
|
+
* `levelFor` returns a class, the same contract as `ToneDot`'s `fill` and
|
|
25
|
+
* `BaseTimeline`'s: the kit does not know whether four of something is a
|
|
26
|
+
* lot, or which hue your product uses for "done". `dayLabel` is the same
|
|
27
|
+
* for words — the kit has no language, and a date reads differently in
|
|
28
|
+
* every one.
|
|
29
|
+
*/
|
|
30
|
+
type __VLS_Props = {
|
|
31
|
+
/** The days to draw, as `YYYY-MM-DD`, oldest first. */
|
|
32
|
+
days: readonly string[];
|
|
33
|
+
/** Names the grid, e.g. "Your year". Already translated. */
|
|
34
|
+
label: string;
|
|
35
|
+
/** A class for one day's square, e.g. `bg-positive/40`. */
|
|
36
|
+
levelFor: (key: string) => string;
|
|
37
|
+
/** What a reader hears on a day: the date, and what happened. Translated. */
|
|
38
|
+
dayLabel: (key: string) => string;
|
|
39
|
+
/** Which days lead somewhere. Unset, the grid is a picture and nothing else. */
|
|
40
|
+
isSelectable?: ((key: string) => boolean) | undefined;
|
|
41
|
+
/** `1` Monday, `0` Sunday. */
|
|
42
|
+
weekStartsOn?: WeekStart | undefined;
|
|
43
|
+
/** Open on the most recent weeks — a year otherwise starts far off-screen. */
|
|
44
|
+
startAtEnd?: boolean | undefined;
|
|
45
|
+
};
|
|
46
|
+
declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
47
|
+
select: (key: string) => any;
|
|
48
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
49
|
+
onSelect?: (key: string) => any;
|
|
50
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
51
|
+
declare const _default: typeof __VLS_export;
|
|
52
|
+
export default _default;
|
package/dist/index.d.ts
CHANGED
|
@@ -90,6 +90,11 @@ export { default as LocaleLinks } from './components/LocaleLinks.vue';
|
|
|
90
90
|
export { default as GoogleButton } from './components/GoogleButton.vue';
|
|
91
91
|
export { default as TabBar } from './components/TabBar.vue';
|
|
92
92
|
export type { TabItem } from './components/TabBar.vue';
|
|
93
|
+
/**
|
|
94
|
+
* `ActivityGrid`, a year at a glance — a real table, so the DOM order is
|
|
95
|
+
* the picture's order, and one tab stop rather than three hundred odd.
|
|
96
|
+
*/
|
|
97
|
+
export { default as ActivityGrid } from './components/ActivityGrid.vue';
|
|
93
98
|
export { default as AvatarStack } from './components/AvatarStack.vue';
|
|
94
99
|
export { default as BaseCalendar } from './components/BaseCalendar.vue';
|
|
95
100
|
export { default as BaseChip } from './components/BaseChip.vue';
|