rei-kit 2.15.0 → 2.16.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 +4 -4
- package/dist/components/ColorPicker.vue.d.ts +58 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +308 -167
- package/dist/index.js.map +1 -1
- package/dist/styles.css +92 -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.** 91 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 91 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. |
|
|
@@ -124,11 +124,11 @@ Each claim here is enforced by something that fails, not by a promise.
|
|
|
124
124
|
|
|
125
125
|
## Status
|
|
126
126
|
|
|
127
|
-
**v2.
|
|
127
|
+
**v2.16.0 — three consumers.**
|
|
128
128
|
|
|
129
129
|
| | |
|
|
130
130
|
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
131
|
-
| Components |
|
|
131
|
+
| Components | 91 (`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,58 @@
|
|
|
1
|
+
export interface ColorSwatch {
|
|
2
|
+
/** A hex value, `#rgb` or `#rrggbb`. */
|
|
3
|
+
value: string;
|
|
4
|
+
/** What to call it. Already translated. */
|
|
5
|
+
label: string;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* A colour, as a hex value.
|
|
9
|
+
*
|
|
10
|
+
* ## A native `input[type="color"]`, painted
|
|
11
|
+
*
|
|
12
|
+
* The same decision as `BaseSlider`: the platform's own picker is better
|
|
13
|
+
* than anything a page can build. It is the one the reader already knows, it
|
|
14
|
+
* has the eyedropper on the desktops that have one, and on a phone it is a
|
|
15
|
+
* full-screen control no web page matches. What it does not have is a look
|
|
16
|
+
* that matches the rest of the kit, so the look is all that is replaced.
|
|
17
|
+
*
|
|
18
|
+
* ## What the kit supplies and what the app does
|
|
19
|
+
*
|
|
20
|
+
* `swatches` are the app's, values **and** names. A kit that shipped a row
|
|
21
|
+
* of colours would be shipping a product decision, and one that shipped
|
|
22
|
+
* unnamed colours would be shipping a set of buttons a screen reader reads
|
|
23
|
+
* as nothing. `PALETTES` is a ready source for an app that wants the kit's
|
|
24
|
+
* own ten.
|
|
25
|
+
*
|
|
26
|
+
* The hex field appears only when `hexLabel` is given, for the same reason
|
|
27
|
+
* `BaseChip` grows a remove button only when it is told what to call it: a
|
|
28
|
+
* control whose name the kit had to invent speaks a language the app does
|
|
29
|
+
* not.
|
|
30
|
+
*
|
|
31
|
+
* ## The value contract
|
|
32
|
+
*
|
|
33
|
+
* In and out as `#rrggbb`, lowercase — the way dates are `YYYY-MM-DD` and
|
|
34
|
+
* times are `HH:mm`. Short hex (`#abc`) and capitals are accepted from a
|
|
35
|
+
* reader typing and normalised on the way out, so an app never has to
|
|
36
|
+
* compare two spellings of the same colour.
|
|
37
|
+
*/
|
|
38
|
+
type __VLS_Props = {
|
|
39
|
+
/** Names the control. Already translated. */
|
|
40
|
+
label: string;
|
|
41
|
+
/** The colour, as `#rrggbb`. Required: a picker with no colour shows none. */
|
|
42
|
+
modelValue: string;
|
|
43
|
+
/** Colours to offer beside the picker. The app's values and names. */
|
|
44
|
+
swatches?: readonly ColorSwatch[] | undefined;
|
|
45
|
+
/** Names the hex field. Without it, there is no hex field. */
|
|
46
|
+
hexLabel?: string | undefined;
|
|
47
|
+
hint?: string | undefined;
|
|
48
|
+
error?: string | undefined;
|
|
49
|
+
disabled?: boolean | undefined;
|
|
50
|
+
labelHidden?: boolean | undefined;
|
|
51
|
+
};
|
|
52
|
+
declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
53
|
+
"update:modelValue": (value: string) => any;
|
|
54
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
55
|
+
"onUpdate:modelValue"?: (value: string) => any;
|
|
56
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
57
|
+
declare const _default: typeof __VLS_export;
|
|
58
|
+
export default _default;
|
package/dist/index.d.ts
CHANGED
|
@@ -100,6 +100,8 @@ export { default as BaseLink } from './components/BaseLink.vue';
|
|
|
100
100
|
export { default as BaseRating } from './components/BaseRating.vue';
|
|
101
101
|
export { default as BaseSeparator } from './components/BaseSeparator.vue';
|
|
102
102
|
export { default as BaseSkeleton } from './components/BaseSkeleton.vue';
|
|
103
|
+
export { default as ColorPicker } from './components/ColorPicker.vue';
|
|
104
|
+
export type { ColorSwatch } from './components/ColorPicker.vue';
|
|
103
105
|
export { default as CopyButton } from './components/CopyButton.vue';
|
|
104
106
|
export { default as DescriptionList } from './components/DescriptionList.vue';
|
|
105
107
|
export type { DescriptionItem } from './components/DescriptionList.vue';
|