iryx-ui 0.0.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.
- package/README.md +161 -2
- package/dist/component-names.d.ts +1 -1
- package/dist/component-names.js +16 -1
- package/dist/components/Alert.js +5 -0
- package/dist/components/Alert.vue.d.ts +59 -0
- package/dist/components/Alert.vue_vue_type_script_setup_true_lang.js +74 -0
- package/dist/components/App.js +5 -0
- package/dist/components/App.vue.d.ts +36 -0
- package/dist/components/App.vue_vue_type_script_setup_true_lang.js +51 -0
- package/dist/components/Badge.js +5 -0
- package/dist/components/Badge.vue.d.ts +38 -0
- package/dist/components/Badge.vue_vue_type_script_setup_true_lang.js +48 -0
- package/dist/components/Button.vue.d.ts +1 -0
- package/dist/components/Button.vue_vue_type_script_setup_true_lang.js +4 -1
- package/dist/components/Card.js +5 -0
- package/dist/components/Card.vue.d.ts +49 -0
- package/dist/components/Card.vue_vue_type_script_setup_true_lang.js +58 -0
- package/dist/components/Checkbox.js +5 -0
- package/dist/components/Checkbox.vue.d.ts +46 -0
- package/dist/components/Checkbox.vue_vue_type_script_setup_true_lang.js +79 -0
- package/dist/components/Form.js +5 -0
- package/dist/components/Form.vue.d.ts +54 -0
- package/dist/components/Form.vue_vue_type_script_setup_true_lang.js +79 -0
- package/dist/components/FormField.js +5 -0
- package/dist/components/FormField.vue.d.ts +46 -0
- package/dist/components/FormField.vue_vue_type_script_setup_true_lang.js +93 -0
- package/dist/components/Input.js +5 -0
- package/dist/components/Input.vue.d.ts +29 -0
- package/dist/components/Input.vue_vue_type_script_setup_true_lang.js +57 -0
- package/dist/components/Label.js +5 -0
- package/dist/components/Label.vue.d.ts +23 -0
- package/dist/components/Label.vue_vue_type_script_setup_true_lang.js +41 -0
- package/dist/components/RadioGroup.js +5 -0
- package/dist/components/RadioGroup.vue.d.ts +41 -0
- package/dist/components/RadioGroup.vue_vue_type_script_setup_true_lang.js +72 -0
- package/dist/components/Select.js +5 -0
- package/dist/components/Select.vue.d.ts +42 -0
- package/dist/components/Select.vue_vue_type_script_setup_true_lang.js +84 -0
- package/dist/components/Switch.vue.d.ts +25 -2
- package/dist/components/Switch.vue_vue_type_script_setup_true_lang.js +45 -14
- package/dist/components/Textarea.js +5 -0
- package/dist/components/Textarea.vue.d.ts +28 -0
- package/dist/components/Textarea.vue_vue_type_script_setup_true_lang.js +57 -0
- package/dist/components/index.d.ts +12 -0
- package/dist/components/index.js +30 -6
- package/dist/composables/form.d.ts +67 -0
- package/dist/composables/form.js +20 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +29 -8
- package/dist/plugin.js +5 -5
- package/dist/theme/alert.d.ts +98 -0
- package/dist/theme/alert.js +36 -0
- package/dist/theme/badge.d.ts +92 -0
- package/dist/theme/badge.js +94 -0
- package/dist/theme/card.d.ts +110 -0
- package/dist/theme/card.js +42 -0
- package/dist/theme/checkbox.d.ts +89 -0
- package/dist/theme/checkbox.js +37 -0
- package/dist/theme/form.d.ts +68 -0
- package/dist/theme/form.js +14 -0
- package/dist/theme/index.d.ts +8 -0
- package/dist/theme/input.d.ts +60 -0
- package/dist/theme/input.js +27 -0
- package/dist/theme/label.d.ts +14 -0
- package/dist/theme/label.js +8 -0
- package/dist/theme/presets.d.ts +20 -0
- package/dist/theme/presets.js +21 -1
- package/dist/theme/radio-group.d.ts +71 -0
- package/dist/theme/radio-group.js +30 -0
- package/dist/theme/select.d.ts +56 -0
- package/dist/theme/select.js +20 -0
- package/dist/theme/switch.d.ts +27 -0
- package/dist/theme/switch.js +5 -1
- package/package.json +8 -8
- package/theme.css +66 -0
package/README.md
CHANGED
|
@@ -85,6 +85,42 @@ import { ArrowRight, Search } from 'lucide-vue-next'
|
|
|
85
85
|
|
|
86
86
|
When `loading` is set, a spinner appears in the leading position.
|
|
87
87
|
|
|
88
|
+
## The `IApp` wrapper
|
|
89
|
+
|
|
90
|
+
Wrap your app once to configure everything below it. Unlike the plugin options
|
|
91
|
+
(which are read at install time), `IApp`'s props are **reactive** — change them
|
|
92
|
+
and every component updates.
|
|
93
|
+
|
|
94
|
+
```vue
|
|
95
|
+
<template>
|
|
96
|
+
<IApp theme="emerald" appearance="system" dir="ltr">
|
|
97
|
+
<RouterView />
|
|
98
|
+
</IApp>
|
|
99
|
+
</template>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
It renders **no wrapper element** by default. Pass `as` (plus `class`) if you'd
|
|
103
|
+
rather it own your page shell:
|
|
104
|
+
|
|
105
|
+
```vue
|
|
106
|
+
<IApp as="div" class="min-h-screen bg-background text-foreground">
|
|
107
|
+
<RouterView />
|
|
108
|
+
</IApp>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
| Prop | What it does |
|
|
112
|
+
| --- | --- |
|
|
113
|
+
| `theme` | Applies a preset or custom theme, reactively. Removing it restores the defaults. |
|
|
114
|
+
| `appearance` | Startup `light` / `dark` / `system`. A stored user preference wins. Omit it and `IApp` won't touch dark mode at all. |
|
|
115
|
+
| `unstyled` | Strips built-in classes from every descendant. |
|
|
116
|
+
| `dir` / `locale` / `scrollBody` / `nonce` | Forwarded to Reka UI's `ConfigProvider`, so RTL and locale-aware primitives work. |
|
|
117
|
+
|
|
118
|
+
Per-component props still win over the app config, so `<IButton :unstyled="false">`
|
|
119
|
+
stays styled inside an `<IApp unstyled>`.
|
|
120
|
+
|
|
121
|
+
`IApp` is optional — the plugin options and `applyTheme()` / `useAppearance()`
|
|
122
|
+
still work on their own.
|
|
123
|
+
|
|
88
124
|
## Appearance (light / dark)
|
|
89
125
|
|
|
90
126
|
Dark mode is class-based: the `.dark` class on `<html>` flips every token.
|
|
@@ -181,10 +217,133 @@ app.use(createIryxUi({ unstyled: true }))
|
|
|
181
217
|
|
|
182
218
|
| Component | Description |
|
|
183
219
|
| --- | --- |
|
|
220
|
+
| `IApp` | Root wrapper — reactive global config, theme, appearance, RTL/locale |
|
|
221
|
+
| `IForm` | Validating form wrapper — any Standard Schema validator, or your own function |
|
|
222
|
+
| `IFormField` | Label, description, hint, help and error text around a control |
|
|
184
223
|
| `IButton` | Variants (`solid`, `outline`, `ghost`, `link`), five sizes, `loading` and `block` states, polymorphic via `as` / `asChild` |
|
|
185
|
-
| `
|
|
224
|
+
| `IInput` | Text field with `sm`/`md`/`lg` sizes, `invalid` state, `v-model` |
|
|
225
|
+
| `ITextarea` | Multi-line field with matching sizes and `invalid` state |
|
|
226
|
+
| `ILabel` | Field label with optional `required` asterisk |
|
|
227
|
+
| `ICheckbox` | Tri-state checkbox (`true` / `false` / `'indeterminate'`), optional `label` + `description` |
|
|
228
|
+
| `ISelect` | Listbox with keyboard nav and typeahead, driven by an `items` array |
|
|
229
|
+
| `IRadioGroup` | Radio list with labels wired up automatically; items take a `description` |
|
|
230
|
+
| `ISwitch` | Accessible toggle, optional `label` + `description` |
|
|
231
|
+
|
|
232
|
+
Every component supports `unstyled`, a `class` override, and multi-part ones take a `ui` prop for per-slot classes. More on the way.
|
|
233
|
+
|
|
234
|
+
### Forms
|
|
235
|
+
|
|
236
|
+
```vue
|
|
237
|
+
<script setup lang="ts">
|
|
238
|
+
import { ref } from 'vue'
|
|
239
|
+
|
|
240
|
+
const email = ref('')
|
|
241
|
+
const plan = ref('pro')
|
|
242
|
+
const framework = ref('vue')
|
|
243
|
+
</script>
|
|
244
|
+
|
|
245
|
+
<template>
|
|
246
|
+
<ILabel for="email" required>
|
|
247
|
+
Email
|
|
248
|
+
</ILabel>
|
|
249
|
+
<IInput id="email" v-model="email" type="email" placeholder="you@example.com" />
|
|
250
|
+
|
|
251
|
+
<ILabel class="gap-2">
|
|
252
|
+
<ICheckbox v-model="accepted" /> Accept terms
|
|
253
|
+
</ILabel>
|
|
254
|
+
|
|
255
|
+
<ISelect
|
|
256
|
+
v-model="framework"
|
|
257
|
+
placeholder="Pick one"
|
|
258
|
+
:items="['Vue', 'React', { label: 'Angular', value: 'ng', disabled: true }]"
|
|
259
|
+
/>
|
|
260
|
+
|
|
261
|
+
<IRadioGroup v-model="plan" :items="['free', 'pro']" />
|
|
262
|
+
</template>
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
`ISelect` and `IRadioGroup` accept plain strings or `{ label, value, disabled }` objects. Both also take a default slot if you'd rather compose the Reka primitives yourself.
|
|
266
|
+
|
|
267
|
+
### Validated forms
|
|
268
|
+
|
|
269
|
+
`IForm` handles client-side validation. It accepts any [Standard Schema](https://standardschema.dev) validator — Zod 3.24+, Valibot, ArkType — so Iryx doesn't depend on a validation library. Wrap each control in an `IFormField` with a `name` matching the schema path and errors wire themselves up.
|
|
270
|
+
|
|
271
|
+
```vue
|
|
272
|
+
<script setup lang="ts">
|
|
273
|
+
import { reactive } from 'vue'
|
|
274
|
+
import * as z from 'zod'
|
|
275
|
+
|
|
276
|
+
const schema = z.object({
|
|
277
|
+
email: z.string().email('That doesn\'t look like an email'),
|
|
278
|
+
password: z.string().min(8, 'Use at least 8 characters'),
|
|
279
|
+
})
|
|
280
|
+
|
|
281
|
+
const state = reactive({ email: '', password: '' })
|
|
282
|
+
|
|
283
|
+
function onSubmit(event) {
|
|
284
|
+
console.log(event.data) // only fires when valid
|
|
285
|
+
}
|
|
286
|
+
</script>
|
|
287
|
+
|
|
288
|
+
<template>
|
|
289
|
+
<IForm :state="state" :schema="schema" @submit="onSubmit">
|
|
290
|
+
<IFormField name="email" label="Email" required description="We'll never share it.">
|
|
291
|
+
<IInput v-model="state.email" type="email" />
|
|
292
|
+
</IFormField>
|
|
293
|
+
<IFormField name="password" label="Password" help="At least 8 characters.">
|
|
294
|
+
<IInput v-model="state.password" type="password" />
|
|
295
|
+
</IFormField>
|
|
296
|
+
<IButton type="submit">
|
|
297
|
+
Create account
|
|
298
|
+
</IButton>
|
|
299
|
+
</IForm>
|
|
300
|
+
</template>
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
The control inside a field automatically inherits its `id`, invalid styling and `aria-describedby` — no wiring needed. On a failed submit, focus moves to the first invalid control.
|
|
304
|
+
|
|
305
|
+
**Validation timing** — `validate-on` defaults to `['blur', 'change']`; submit always validates everything.
|
|
306
|
+
|
|
307
|
+
**Custom rules** — pass `validate` for anything a schema can't express (it runs alongside the schema, and works without one):
|
|
308
|
+
|
|
309
|
+
```vue
|
|
310
|
+
<IForm
|
|
311
|
+
:state="state"
|
|
312
|
+
:validate="s => s.email.endsWith('@corp.com') ? [] : [{ name: 'email', message: 'Must be a work email' }]"
|
|
313
|
+
/>
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
**Server errors and manual control** — grab a template ref to the form and call `validate()`, `clear(name?)` or `setErrors()`. `IFormField` also takes a plain `error` prop that bypasses validation entirely.
|
|
317
|
+
|
|
318
|
+
### Labels and descriptions
|
|
319
|
+
|
|
320
|
+
`ICheckbox` and `ISwitch` render bare by default. Give them a `label` and/or `description` and they render a wired-up layout instead — the text is clickable, and the description is linked with `aria-describedby`. `IRadioGroup` items take a `description` too.
|
|
321
|
+
|
|
322
|
+
```vue
|
|
323
|
+
<template>
|
|
324
|
+
<ICheckbox
|
|
325
|
+
v-model="accepted"
|
|
326
|
+
label="Accept terms"
|
|
327
|
+
description="You agree to the terms of service and privacy policy."
|
|
328
|
+
/>
|
|
329
|
+
|
|
330
|
+
<ISwitch
|
|
331
|
+
v-model="notify"
|
|
332
|
+
label="Push notifications"
|
|
333
|
+
description="Send alerts to this device."
|
|
334
|
+
/>
|
|
335
|
+
|
|
336
|
+
<IRadioGroup
|
|
337
|
+
v-model="plan"
|
|
338
|
+
:items="[
|
|
339
|
+
{ label: 'Free', value: 'free', description: 'Up to 3 projects.' },
|
|
340
|
+
{ label: 'Pro', value: 'pro', description: 'Unlimited projects.' },
|
|
341
|
+
]"
|
|
342
|
+
/>
|
|
343
|
+
</template>
|
|
344
|
+
```
|
|
186
345
|
|
|
187
|
-
|
|
346
|
+
Use the `#label` / `#description` slots instead of the props when you need markup (a link, a badge) inside the text.
|
|
188
347
|
|
|
189
348
|
## License
|
|
190
349
|
|
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
* Consumed by the Vue plugin (global registration) and the Nuxt module
|
|
4
4
|
* (auto-imports). Keep in sync with `src/components/index.ts`.
|
|
5
5
|
*/
|
|
6
|
-
export declare const componentNames: readonly ["Button", "Switch"];
|
|
6
|
+
export declare const componentNames: readonly ["Alert", "App", "Badge", "Button", "Card", "Checkbox", "Form", "FormField", "Input", "Label", "RadioGroup", "Select", "Switch", "Textarea"];
|
|
7
7
|
export type ComponentName = (typeof componentNames)[number];
|
package/dist/component-names.js
CHANGED
|
@@ -1,4 +1,19 @@
|
|
|
1
1
|
//#region src/component-names.ts
|
|
2
|
-
var e = [
|
|
2
|
+
var e = [
|
|
3
|
+
"Alert",
|
|
4
|
+
"App",
|
|
5
|
+
"Badge",
|
|
6
|
+
"Button",
|
|
7
|
+
"Card",
|
|
8
|
+
"Checkbox",
|
|
9
|
+
"Form",
|
|
10
|
+
"FormField",
|
|
11
|
+
"Input",
|
|
12
|
+
"Label",
|
|
13
|
+
"RadioGroup",
|
|
14
|
+
"Select",
|
|
15
|
+
"Switch",
|
|
16
|
+
"Textarea"
|
|
17
|
+
];
|
|
3
18
|
//#endregion
|
|
4
19
|
export { e as componentNames };
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import type { Component } from 'vue';
|
|
2
|
+
export interface AlertProps {
|
|
3
|
+
/** Render as a different element or component. */
|
|
4
|
+
as?: string;
|
|
5
|
+
variant?: 'info' | 'success' | 'warning' | 'danger';
|
|
6
|
+
/** Heading text above the body. */
|
|
7
|
+
title?: string;
|
|
8
|
+
/** Body text. Ignored when the default slot is used. */
|
|
9
|
+
description?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Leading icon. Defaults to one matching the variant; pass a component to
|
|
12
|
+
* override it, or `false` to drop it entirely.
|
|
13
|
+
*/
|
|
14
|
+
icon?: Component | false;
|
|
15
|
+
/** Render a dismiss button that emits `close`. */
|
|
16
|
+
closable?: boolean;
|
|
17
|
+
/** Accessible name for the dismiss button — override for non-English apps. */
|
|
18
|
+
closeLabel?: string;
|
|
19
|
+
/** Skip built-in classes; you take over styling entirely. */
|
|
20
|
+
unstyled?: boolean;
|
|
21
|
+
class?: string;
|
|
22
|
+
/** Override classes per slot, e.g. `{ title: 'text-base' }`. */
|
|
23
|
+
ui?: {
|
|
24
|
+
root?: string;
|
|
25
|
+
icon?: string;
|
|
26
|
+
content?: string;
|
|
27
|
+
title?: string;
|
|
28
|
+
description?: string;
|
|
29
|
+
close?: string;
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
|
|
33
|
+
type __VLS_Slots = {} & {
|
|
34
|
+
icon?: (props: typeof __VLS_8) => any;
|
|
35
|
+
} & {
|
|
36
|
+
title?: (props: typeof __VLS_15) => any;
|
|
37
|
+
} & {
|
|
38
|
+
default?: (props: typeof __VLS_17) => any;
|
|
39
|
+
} & {
|
|
40
|
+
close?: (props: typeof __VLS_19) => any;
|
|
41
|
+
};
|
|
42
|
+
declare const __VLS_base: import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
43
|
+
close: () => any;
|
|
44
|
+
}, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
|
|
45
|
+
onClose?: (() => any) | undefined;
|
|
46
|
+
}>, {
|
|
47
|
+
icon: Component | false;
|
|
48
|
+
as: string;
|
|
49
|
+
closeLabel: string;
|
|
50
|
+
unstyled: boolean;
|
|
51
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
52
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
53
|
+
declare const _default: typeof __VLS_export;
|
|
54
|
+
export default _default;
|
|
55
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
56
|
+
new (): {
|
|
57
|
+
$slots: S;
|
|
58
|
+
};
|
|
59
|
+
};
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { useIryxUiConfig as e } from "../config.js";
|
|
2
|
+
import { alertTheme as t } from "../theme/alert.js";
|
|
3
|
+
import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
|
|
4
|
+
import { CircleAlert as _, CircleCheck as v, Info as y, TriangleAlert as b, X as x } from "lucide-vue-next";
|
|
5
|
+
import { Primitive as S } from "reka-ui";
|
|
6
|
+
//#region src/components/Alert.vue?vue&type=script&setup=true&lang.ts
|
|
7
|
+
var C = ["aria-label"], w = /*@__PURE__*/ l({
|
|
8
|
+
__name: "Alert",
|
|
9
|
+
props: {
|
|
10
|
+
as: { default: "div" },
|
|
11
|
+
variant: {},
|
|
12
|
+
title: {},
|
|
13
|
+
description: {},
|
|
14
|
+
icon: {
|
|
15
|
+
type: Boolean,
|
|
16
|
+
default: void 0
|
|
17
|
+
},
|
|
18
|
+
closable: { type: Boolean },
|
|
19
|
+
closeLabel: { default: "Close" },
|
|
20
|
+
unstyled: {
|
|
21
|
+
type: Boolean,
|
|
22
|
+
default: void 0
|
|
23
|
+
},
|
|
24
|
+
class: {},
|
|
25
|
+
ui: {}
|
|
26
|
+
},
|
|
27
|
+
emits: ["close"],
|
|
28
|
+
setup(l) {
|
|
29
|
+
let w = l, T = {
|
|
30
|
+
info: y,
|
|
31
|
+
success: v,
|
|
32
|
+
warning: b,
|
|
33
|
+
danger: _
|
|
34
|
+
}, E = n(() => {
|
|
35
|
+
if (w.icon !== !1) return w.icon ?? T[w.variant ?? "info"];
|
|
36
|
+
}), D = n(() => w.variant === "danger" || w.variant === "warning" ? "alert" : "status"), O = e(), k = n(() => w.unstyled ?? O.unstyled), A = n(() => t({
|
|
37
|
+
variant: w.variant,
|
|
38
|
+
withTitle: !!w.title
|
|
39
|
+
})), j = n(() => k.value ? [w.ui?.root, w.class] : A.value.root({ class: [w.ui?.root, w.class] })), M = n(() => k.value ? w.ui?.icon : A.value.icon({ class: w.ui?.icon })), N = n(() => k.value ? w.ui?.content : A.value.content({ class: w.ui?.content })), P = n(() => k.value ? w.ui?.title : A.value.title({ class: w.ui?.title })), F = n(() => k.value ? w.ui?.description : A.value.description({ class: w.ui?.description })), I = n(() => k.value ? w.ui?.close : A.value.close({ class: w.ui?.close }));
|
|
40
|
+
return (e, t) => (d(), r(h(S), {
|
|
41
|
+
as: w.as,
|
|
42
|
+
role: D.value,
|
|
43
|
+
class: u(j.value)
|
|
44
|
+
}, {
|
|
45
|
+
default: g(() => [
|
|
46
|
+
E.value || e.$slots.icon ? (d(), a("div", {
|
|
47
|
+
key: 0,
|
|
48
|
+
class: u(M.value)
|
|
49
|
+
}, [f(e.$slots, "icon", {}, () => [(d(), r(p(E.value), { "aria-hidden": "true" }))])], 2)) : i("", !0),
|
|
50
|
+
o("div", { class: u(N.value) }, [w.title || e.$slots.title ? (d(), a("p", {
|
|
51
|
+
key: 0,
|
|
52
|
+
class: u(P.value)
|
|
53
|
+
}, [f(e.$slots, "title", {}, () => [s(m(w.title), 1)])], 2)) : i("", !0), w.description || e.$slots.default ? (d(), a("div", {
|
|
54
|
+
key: 1,
|
|
55
|
+
class: u(F.value)
|
|
56
|
+
}, [f(e.$slots, "default", {}, () => [s(m(w.description), 1)])], 2)) : i("", !0)], 2),
|
|
57
|
+
w.closable ? (d(), a("button", {
|
|
58
|
+
key: 1,
|
|
59
|
+
type: "button",
|
|
60
|
+
"aria-label": w.closeLabel,
|
|
61
|
+
class: u(I.value),
|
|
62
|
+
onClick: t[0] ||= (t) => e.$emit("close")
|
|
63
|
+
}, [f(e.$slots, "close", {}, () => [c(h(x), { "aria-hidden": "true" })])], 10, C)) : i("", !0)
|
|
64
|
+
]),
|
|
65
|
+
_: 3
|
|
66
|
+
}, 8, [
|
|
67
|
+
"as",
|
|
68
|
+
"role",
|
|
69
|
+
"class"
|
|
70
|
+
]));
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
//#endregion
|
|
74
|
+
export { w as default };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import type { ConfigProviderProps } from 'reka-ui';
|
|
2
|
+
import type { Appearance } from '../composables/appearance';
|
|
3
|
+
import type { Theme, ThemePresetName } from '../theme/presets';
|
|
4
|
+
export interface AppProps extends /* @vue-ignore */ ConfigProviderProps {
|
|
5
|
+
/**
|
|
6
|
+
* Render bare Reka UI primitives without Iryx's classes, for everything
|
|
7
|
+
* below. Reactive, unlike the install-time plugin option.
|
|
8
|
+
*/
|
|
9
|
+
unstyled?: boolean;
|
|
10
|
+
/** Colour theme: a preset name (`'emerald'`…) or a custom theme. */
|
|
11
|
+
theme?: Theme | ThemePresetName;
|
|
12
|
+
/** Startup appearance. A preference the user already stored wins over this. */
|
|
13
|
+
appearance?: Appearance;
|
|
14
|
+
/**
|
|
15
|
+
* Element to render as the root. Defaults to `template`, i.e. no wrapper —
|
|
16
|
+
* pass `div` (with `class`) if you want App to own your page shell.
|
|
17
|
+
*/
|
|
18
|
+
as?: string;
|
|
19
|
+
class?: string;
|
|
20
|
+
}
|
|
21
|
+
declare var __VLS_14: {};
|
|
22
|
+
type __VLS_Slots = {} & {
|
|
23
|
+
default?: (props: typeof __VLS_14) => any;
|
|
24
|
+
};
|
|
25
|
+
declare const __VLS_base: import("vue").DefineComponent<AppProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppProps> & Readonly<{}>, {
|
|
26
|
+
as: string;
|
|
27
|
+
unstyled: boolean;
|
|
28
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
29
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
30
|
+
declare const _default: typeof __VLS_export;
|
|
31
|
+
export default _default;
|
|
32
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
33
|
+
new (): {
|
|
34
|
+
$slots: S;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { defaultConfig as e, iryxUiConfigKey as t } from "../config.js";
|
|
2
|
+
import { initAppearance as n, useAppearance as r } from "../composables/appearance.js";
|
|
3
|
+
import { applyTheme as i, clearTheme as a } from "../theme/presets.js";
|
|
4
|
+
import { computed as o, createBlock as s, createVNode as c, defineComponent as l, guardReactiveProps as u, normalizeClass as d, normalizeProps as f, openBlock as p, provide as m, reactive as h, renderSlot as g, unref as _, watch as v, withCtx as y } from "vue";
|
|
5
|
+
import { ConfigProvider as b, Primitive as x } from "reka-ui";
|
|
6
|
+
//#region src/components/App.vue?vue&type=script&setup=true&lang.ts
|
|
7
|
+
var S = /*@__PURE__*/ l({
|
|
8
|
+
__name: "App",
|
|
9
|
+
props: {
|
|
10
|
+
unstyled: {
|
|
11
|
+
type: Boolean,
|
|
12
|
+
default: void 0
|
|
13
|
+
},
|
|
14
|
+
theme: {},
|
|
15
|
+
appearance: {},
|
|
16
|
+
as: { default: "template" },
|
|
17
|
+
class: {}
|
|
18
|
+
},
|
|
19
|
+
setup(l) {
|
|
20
|
+
let S = l;
|
|
21
|
+
m(t, h({
|
|
22
|
+
...e,
|
|
23
|
+
unstyled: o(() => S.unstyled ?? e.unstyled)
|
|
24
|
+
})), v(() => S.theme, (e) => {
|
|
25
|
+
e ? i(e) : a();
|
|
26
|
+
}, { immediate: !0 });
|
|
27
|
+
let C = !1;
|
|
28
|
+
v(() => S.appearance, (e) => {
|
|
29
|
+
e && (C ? r().setAppearance(e) : (n(e), C = !0));
|
|
30
|
+
}, { immediate: !0 });
|
|
31
|
+
let w = o(() => ({
|
|
32
|
+
dir: S.dir,
|
|
33
|
+
locale: S.locale,
|
|
34
|
+
scrollBody: S.scrollBody,
|
|
35
|
+
nonce: S.nonce,
|
|
36
|
+
useId: S.useId
|
|
37
|
+
}));
|
|
38
|
+
return (e, t) => (p(), s(_(b), f(u(w.value)), {
|
|
39
|
+
default: y(() => [c(_(x), {
|
|
40
|
+
as: S.as,
|
|
41
|
+
class: d(S.class)
|
|
42
|
+
}, {
|
|
43
|
+
default: y(() => [g(e.$slots, "default")]),
|
|
44
|
+
_: 3
|
|
45
|
+
}, 8, ["as", "class"])]),
|
|
46
|
+
_: 3
|
|
47
|
+
}, 16));
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
//#endregion
|
|
51
|
+
export { S as default };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
export interface BadgeProps {
|
|
2
|
+
/** Render as a different element or component. */
|
|
3
|
+
as?: string;
|
|
4
|
+
/** Merge props onto the immediate child instead of rendering an element. */
|
|
5
|
+
asChild?: boolean;
|
|
6
|
+
variant?: 'neutral' | 'success' | 'warning' | 'danger' | 'info';
|
|
7
|
+
/** `soft` is a tinted background; `solid` is a filled block of colour. */
|
|
8
|
+
tone?: 'soft' | 'solid';
|
|
9
|
+
size?: 'sm' | 'md' | 'lg';
|
|
10
|
+
/** Show a small leading dot in the current text colour. */
|
|
11
|
+
dot?: boolean;
|
|
12
|
+
/** Text content. Ignored when the default slot is used. */
|
|
13
|
+
label?: string;
|
|
14
|
+
/** Skip built-in classes; you take over styling entirely. */
|
|
15
|
+
unstyled?: boolean;
|
|
16
|
+
class?: string;
|
|
17
|
+
/** Override classes per slot, e.g. `{ dot: 'size-3' }`. */
|
|
18
|
+
ui?: {
|
|
19
|
+
root?: string;
|
|
20
|
+
dot?: string;
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
declare var __VLS_8: {};
|
|
24
|
+
type __VLS_Slots = {} & {
|
|
25
|
+
default?: (props: typeof __VLS_8) => any;
|
|
26
|
+
};
|
|
27
|
+
declare const __VLS_base: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
|
|
28
|
+
as: string;
|
|
29
|
+
unstyled: boolean;
|
|
30
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
31
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
32
|
+
declare const _default: typeof __VLS_export;
|
|
33
|
+
export default _default;
|
|
34
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
35
|
+
new (): {
|
|
36
|
+
$slots: S;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { useIryxUiConfig as e } from "../config.js";
|
|
2
|
+
import { badgeTheme as t } from "../theme/badge.js";
|
|
3
|
+
import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createTextVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderSlot as u, toDisplayString as d, unref as f, withCtx as p } from "vue";
|
|
4
|
+
import { Primitive as m } from "reka-ui";
|
|
5
|
+
//#region src/components/Badge.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
+
var h = /*@__PURE__*/ s({
|
|
7
|
+
__name: "Badge",
|
|
8
|
+
props: {
|
|
9
|
+
as: { default: "span" },
|
|
10
|
+
asChild: { type: Boolean },
|
|
11
|
+
variant: {},
|
|
12
|
+
tone: {},
|
|
13
|
+
size: {},
|
|
14
|
+
dot: { type: Boolean },
|
|
15
|
+
label: {},
|
|
16
|
+
unstyled: {
|
|
17
|
+
type: Boolean,
|
|
18
|
+
default: void 0
|
|
19
|
+
},
|
|
20
|
+
class: {},
|
|
21
|
+
ui: {}
|
|
22
|
+
},
|
|
23
|
+
setup(s) {
|
|
24
|
+
let h = s, g = e(), _ = n(() => h.unstyled ?? g.unstyled), v = n(() => t({
|
|
25
|
+
variant: h.variant,
|
|
26
|
+
tone: h.tone,
|
|
27
|
+
size: h.size
|
|
28
|
+
})), y = n(() => _.value ? [h.ui?.root, h.class] : v.value.root({ class: [h.ui?.root, h.class] })), b = n(() => _.value ? h.ui?.dot : v.value.dot({ class: h.ui?.dot }));
|
|
29
|
+
return (e, t) => (l(), r(f(m), {
|
|
30
|
+
as: h.as,
|
|
31
|
+
"as-child": h.asChild,
|
|
32
|
+
class: c(y.value)
|
|
33
|
+
}, {
|
|
34
|
+
default: p(() => [h.dot ? (l(), a("span", {
|
|
35
|
+
key: 0,
|
|
36
|
+
class: c(b.value),
|
|
37
|
+
"aria-hidden": "true"
|
|
38
|
+
}, null, 2)) : i("", !0), u(e.$slots, "default", {}, () => [o(d(h.label), 1)])]),
|
|
39
|
+
_: 3
|
|
40
|
+
}, 8, [
|
|
41
|
+
"as",
|
|
42
|
+
"as-child",
|
|
43
|
+
"class"
|
|
44
|
+
]));
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
//#endregion
|
|
48
|
+
export { h as default };
|
|
@@ -21,6 +21,7 @@ type __VLS_Slots = {} & {
|
|
|
21
21
|
};
|
|
22
22
|
declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
|
|
23
23
|
as: string;
|
|
24
|
+
unstyled: boolean;
|
|
24
25
|
type: "button" | "submit" | "reset";
|
|
25
26
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
26
27
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -14,7 +14,10 @@ var p = /*@__PURE__*/ a({
|
|
|
14
14
|
block: { type: Boolean },
|
|
15
15
|
loading: { type: Boolean },
|
|
16
16
|
disabled: { type: Boolean },
|
|
17
|
-
unstyled: {
|
|
17
|
+
unstyled: {
|
|
18
|
+
type: Boolean,
|
|
19
|
+
default: void 0
|
|
20
|
+
},
|
|
18
21
|
type: { default: "button" },
|
|
19
22
|
class: {}
|
|
20
23
|
},
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
export interface CardProps {
|
|
2
|
+
/** Render as a different element or component. */
|
|
3
|
+
as?: string;
|
|
4
|
+
/** Merge props onto the immediate child instead of rendering an element. */
|
|
5
|
+
asChild?: boolean;
|
|
6
|
+
variant?: 'outline' | 'soft';
|
|
7
|
+
/** Inner spacing. `none` leaves padding entirely to you. */
|
|
8
|
+
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
9
|
+
/** Heading text. Rendered in the header alongside `description`. */
|
|
10
|
+
title?: string;
|
|
11
|
+
/** Secondary text under the title. */
|
|
12
|
+
description?: string;
|
|
13
|
+
/** Skip built-in classes; you take over styling entirely. */
|
|
14
|
+
unstyled?: boolean;
|
|
15
|
+
class?: string;
|
|
16
|
+
/** Override classes per slot, e.g. `{ footer: 'justify-end' }`. */
|
|
17
|
+
ui?: {
|
|
18
|
+
root?: string;
|
|
19
|
+
header?: string;
|
|
20
|
+
title?: string;
|
|
21
|
+
description?: string;
|
|
22
|
+
body?: string;
|
|
23
|
+
footer?: string;
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
|
|
27
|
+
type __VLS_Slots = {} & {
|
|
28
|
+
header?: (props: typeof __VLS_8) => any;
|
|
29
|
+
} & {
|
|
30
|
+
title?: (props: typeof __VLS_10) => any;
|
|
31
|
+
} & {
|
|
32
|
+
description?: (props: typeof __VLS_12) => any;
|
|
33
|
+
} & {
|
|
34
|
+
default?: (props: typeof __VLS_14) => any;
|
|
35
|
+
} & {
|
|
36
|
+
footer?: (props: typeof __VLS_16) => any;
|
|
37
|
+
};
|
|
38
|
+
declare const __VLS_base: import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {
|
|
39
|
+
as: string;
|
|
40
|
+
unstyled: boolean;
|
|
41
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
42
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
43
|
+
declare const _default: typeof __VLS_export;
|
|
44
|
+
export default _default;
|
|
45
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
46
|
+
new (): {
|
|
47
|
+
$slots: S;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { useIryxUiConfig as e } from "../config.js";
|
|
2
|
+
import { cardTheme as t } from "../theme/card.js";
|
|
3
|
+
import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, toDisplayString as f, unref as p, useSlots as m, withCtx as h } from "vue";
|
|
4
|
+
import { Primitive as g } from "reka-ui";
|
|
5
|
+
//#region src/components/Card.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
+
var _ = /*@__PURE__*/ c({
|
|
7
|
+
__name: "Card",
|
|
8
|
+
props: {
|
|
9
|
+
as: { default: "div" },
|
|
10
|
+
asChild: { type: Boolean },
|
|
11
|
+
variant: {},
|
|
12
|
+
padding: {},
|
|
13
|
+
title: {},
|
|
14
|
+
description: {},
|
|
15
|
+
unstyled: {
|
|
16
|
+
type: Boolean,
|
|
17
|
+
default: void 0
|
|
18
|
+
},
|
|
19
|
+
class: {},
|
|
20
|
+
ui: {}
|
|
21
|
+
},
|
|
22
|
+
setup(c) {
|
|
23
|
+
let _ = c, v = m(), y = n(() => !!(_.title || _.description || v.header || v.title || v.description)), b = e(), x = n(() => _.unstyled ?? b.unstyled), S = n(() => t({
|
|
24
|
+
variant: _.variant,
|
|
25
|
+
padding: _.padding
|
|
26
|
+
})), C = n(() => x.value ? [_.ui?.root, _.class] : S.value.root({ class: [_.ui?.root, _.class] })), w = n(() => x.value ? _.ui?.header : S.value.header({ class: _.ui?.header })), T = n(() => x.value ? _.ui?.title : S.value.title({ class: _.ui?.title })), E = n(() => x.value ? _.ui?.description : S.value.description({ class: _.ui?.description })), D = n(() => x.value ? _.ui?.body : S.value.body({ class: _.ui?.body })), O = n(() => x.value ? _.ui?.footer : S.value.footer({ class: _.ui?.footer }));
|
|
27
|
+
return (e, t) => (u(), r(p(g), {
|
|
28
|
+
as: _.as,
|
|
29
|
+
"as-child": _.asChild,
|
|
30
|
+
class: l(C.value)
|
|
31
|
+
}, {
|
|
32
|
+
default: h(() => [
|
|
33
|
+
y.value ? (u(), a("div", {
|
|
34
|
+
key: 0,
|
|
35
|
+
class: l(w.value)
|
|
36
|
+
}, [d(e.$slots, "header", {}, () => [_.title || e.$slots.title ? (u(), a("h3", {
|
|
37
|
+
key: 0,
|
|
38
|
+
class: l(T.value)
|
|
39
|
+
}, [d(e.$slots, "title", {}, () => [s(f(_.title), 1)])], 2)) : i("", !0), _.description || e.$slots.description ? (u(), a("p", {
|
|
40
|
+
key: 1,
|
|
41
|
+
class: l(E.value)
|
|
42
|
+
}, [d(e.$slots, "description", {}, () => [s(f(_.description), 1)])], 2)) : i("", !0)])], 2)) : i("", !0),
|
|
43
|
+
o("div", { class: l(D.value) }, [d(e.$slots, "default")], 2),
|
|
44
|
+
e.$slots.footer ? (u(), a("div", {
|
|
45
|
+
key: 1,
|
|
46
|
+
class: l(O.value)
|
|
47
|
+
}, [d(e.$slots, "footer")], 2)) : i("", !0)
|
|
48
|
+
]),
|
|
49
|
+
_: 3
|
|
50
|
+
}, 8, [
|
|
51
|
+
"as",
|
|
52
|
+
"as-child",
|
|
53
|
+
"class"
|
|
54
|
+
]));
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
//#endregion
|
|
58
|
+
export { _ as default };
|