@filipgutica/ui 0.3.0 → 1.1.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 +98 -12
- package/dist/code-highlight-BuTmXL3w.js +85 -0
- package/dist/code-highlight.d.ts +6 -0
- package/dist/components/UiAlert.vue.d.ts +1 -3
- package/dist/components/UiBadge.vue.d.ts +2 -4
- package/dist/components/UiButton.vue.d.ts +3 -8
- package/dist/components/UiCard.vue.d.ts +19 -0
- package/dist/components/UiCheckbox.vue.d.ts +3 -4
- package/dist/components/UiCodeBlock.vue.d.ts +20 -0
- package/dist/components/UiInput.vue.d.ts +3 -6
- package/dist/components/UiRadioCard.vue.d.ts +17 -0
- package/dist/components/UiRadioCardGroup.vue.d.ts +27 -0
- package/dist/components/UiSelect.vue.d.ts +3 -5
- package/dist/components/UiSlider.vue.d.ts +18 -0
- package/dist/components/UiSurface.vue.d.ts +1 -4
- package/dist/control.d.ts +1 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.js +409 -96
- package/dist/open-vsx.js +27 -42
- package/dist/theme/index.d.ts +3 -0
- package/dist/theme/syntax.d.ts +5 -0
- package/dist/theme-CIwueiir.js +462 -0
- package/dist/theme.js +2 -375
- package/package.json +16 -4
- package/src/components.css +400 -38
- package/src/theme.css +96 -43
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @filipgutica/ui
|
|
2
2
|
|
|
3
|
-
A compact Vue 3 design system built on [Reka UI](https://reka-ui.com), with
|
|
3
|
+
A compact Vue 3.5+ design system built on [Reka UI](https://reka-ui.com), with
|
|
4
4
|
Tailwind CSS 4 tokens and safe VS Code/Open VSX color-theme normalization.
|
|
5
5
|
|
|
6
6
|
## Install
|
|
@@ -26,8 +26,10 @@ The first application-focused set includes:
|
|
|
26
26
|
|
|
27
27
|
- `UiButton` with primary, secondary, ghost, danger, and text variants
|
|
28
28
|
- `UiInput`, `UiSelect`, and `UiField` for consistent form controls
|
|
29
|
-
- `UiCheckbox`, `
|
|
30
|
-
- `
|
|
29
|
+
- `UiCheckbox`, `UiSlider`, `UiRadioCard`, and `UiRadioCardGroup` for user input
|
|
30
|
+
- `UiBadge`, `UiAlert`, and `UiProgress` for state and feedback
|
|
31
|
+
- `UiCard` for structured content, actions, and footer metadata
|
|
32
|
+
- `UiCodeBlock` for copyable, theme-aware source snippets
|
|
31
33
|
- `UiDialog`, built on Reka UI, for accessible modal interaction
|
|
32
34
|
|
|
33
35
|
Place `UiInput` or `UiSelect` inside `UiField`. The field supplies the control ID
|
|
@@ -36,7 +38,7 @@ ARIA relationship.
|
|
|
36
38
|
|
|
37
39
|
```vue
|
|
38
40
|
<template>
|
|
39
|
-
<UiButton variant="secondary" size="
|
|
41
|
+
<UiButton variant="secondary" size="sm">
|
|
40
42
|
Inspect evidence
|
|
41
43
|
</UiButton>
|
|
42
44
|
</template>
|
|
@@ -46,6 +48,67 @@ import { UiButton } from '@filipgutica/ui'
|
|
|
46
48
|
</script>
|
|
47
49
|
```
|
|
48
50
|
|
|
51
|
+
`UiSelect` retains native form and keyboard behavior. Browsers with
|
|
52
|
+
`appearance: base-select` support show a themed menu; other browsers use their
|
|
53
|
+
native menu.
|
|
54
|
+
|
|
55
|
+
`UiButton`, `UiInput`, `UiSelect`, `UiCheckbox`, and `UiSlider` share
|
|
56
|
+
`size="sm | md | lg"`
|
|
57
|
+
and default to the tighter `md` density. Existing `UiButton` values remain
|
|
58
|
+
compatible: `compact` retains its former compact treatment and `default` maps
|
|
59
|
+
to `lg`.
|
|
60
|
+
|
|
61
|
+
`UiCodeBlock` accepts source text through `code`, shows a copy action by default,
|
|
62
|
+
and highlights the selected language using the active theme. It can display a
|
|
63
|
+
title, line numbers, or wrapped lines; unknown languages stay readable as plain text:
|
|
64
|
+
|
|
65
|
+
```vue
|
|
66
|
+
<UiCodeBlock
|
|
67
|
+
title="Example.vue"
|
|
68
|
+
language="vue"
|
|
69
|
+
:code="snippet"
|
|
70
|
+
:line-numbers="true"
|
|
71
|
+
/>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Highlighting supports Vue, JavaScript (`js`), TypeScript (`ts`), HTML, CSS,
|
|
75
|
+
JSON, and Bash (`sh`/`shell`). Imported TextMate `tokenColors` are normalized
|
|
76
|
+
into a shared syntax palette; language-specific overrides and font styles are
|
|
77
|
+
not reproduced exactly. Themes saved before syntax support should be re-imported
|
|
78
|
+
to recover their syntax colors. Existing saved themes remain usable with themed fallbacks.
|
|
79
|
+
|
|
80
|
+
`UiSurface` remains exported for compatibility. New structured containers
|
|
81
|
+
should use `UiCard`.
|
|
82
|
+
|
|
83
|
+
## Design conventions
|
|
84
|
+
|
|
85
|
+
Use a compact system-font hierarchy: 14px for UI body text, 13px for
|
|
86
|
+
secondary text, and 18px for dialog titles. Treat Open VSX/VS Code themes as
|
|
87
|
+
the color authority, and use semantic tokens and package components instead of
|
|
88
|
+
hard-coded provider color keys.
|
|
89
|
+
Typography is package-owned through `--font-ui` and `--font-mono`; override
|
|
90
|
+
these once at the application root rather than restyling each component.
|
|
91
|
+
|
|
92
|
+
- Use shared control sizes `sm`, `md`, and `lg` (32px, 36px, and 44px); the
|
|
93
|
+
default is `md`. Keep layout on a 4px rhythm, with 12px, 16px, and 24px as
|
|
94
|
+
common gaps and insets.
|
|
95
|
+
- Choose `UiCard` for structured content and optional actions or footer data.
|
|
96
|
+
Choose `UiRadioCardGroup` with `UiRadioCard` for one-of-many rich options;
|
|
97
|
+
choose `UiDialog` for modal tasks that need focus management.
|
|
98
|
+
- Use one primary action per task, secondary buttons for supporting actions,
|
|
99
|
+
and danger styling only for destructive actions. Use `UiBadge` for a short
|
|
100
|
+
status, `UiAlert` for feedback, and `UiCodeBlock` for source code.
|
|
101
|
+
- Put `UiInput` and `UiSelect` in `UiField` with a visible label. Supply help
|
|
102
|
+
text or an error when needed so the field exposes the matching ARIA relationship.
|
|
103
|
+
- Select menus use the same surface, type, radius, and spacing tokens as other
|
|
104
|
+
controls. Keep option rows compact, show a checkmark for the selected value, and
|
|
105
|
+
use quiet hover fills with visible keyboard focus.
|
|
106
|
+
- Use raised surfaces and subtle borders for standalone cards. Align title, content,
|
|
107
|
+
and footer insets; use a quiet divider for footer metadata and avoid card shadows.
|
|
108
|
+
- Keep borders quiet and skip decorative grids. Preserve visible
|
|
109
|
+
`:focus-visible` states, use 44px targets for touch-oriented actions, and provide
|
|
110
|
+
an accessible name for every interactive control.
|
|
111
|
+
|
|
49
112
|
## VS Code themes
|
|
50
113
|
|
|
51
114
|
The browser-safe theme entry point parses VS Code JSON/JSONC and maps supported
|
|
@@ -93,13 +156,29 @@ Build the provider-neutral static assets:
|
|
|
93
156
|
pnpm docs:build
|
|
94
157
|
```
|
|
95
158
|
|
|
96
|
-
The docs use hash routes, so the static assets
|
|
159
|
+
The docs use hash routes and relative asset paths, so the static assets work
|
|
160
|
+
under a repository path without rewrite rules.
|
|
97
161
|
The local Vite server also provides the same-origin `/api/open-vsx` endpoint.
|
|
98
162
|
The theme picker uses this endpoint to search and import Open VSX themes.
|
|
99
163
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
164
|
+
### GitHub Pages
|
|
165
|
+
|
|
166
|
+
The GitHub Pages site URL is [filipgutica.github.io/ui](https://filipgutica.github.io/ui/).
|
|
167
|
+
The `docs.yml` workflow builds and deploys `docs-dist` on every push to `main`.
|
|
168
|
+
It can also be started manually from the Actions tab. In the repository's
|
|
169
|
+
**Settings → Pages**, select **GitHub Actions** as the build and deployment source.
|
|
170
|
+
|
|
171
|
+
GitHub Pages serves static files and cannot run the Open VSX API. The workflow
|
|
172
|
+
sets `VITE_STATIC_HOST=true` to disable live Open VSX search and imports;
|
|
173
|
+
built-in themes and local theme-file imports remain available. To build the
|
|
174
|
+
same static configuration locally:
|
|
175
|
+
|
|
176
|
+
```sh
|
|
177
|
+
VITE_STATIC_HOST=true pnpm docs:build
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
Other production hosts must provide `/api/open-vsx` for live Open VSX imports.
|
|
181
|
+
Netlify and Amplify can use a serverless adapter.
|
|
103
182
|
|
|
104
183
|
## Development
|
|
105
184
|
|
|
@@ -112,12 +191,19 @@ Commits follow the Conventional Commits format. Releases run from `main`:
|
|
|
112
191
|
|
|
113
192
|
- `fix:` publishes a patch release
|
|
114
193
|
- `feat:` publishes a minor release
|
|
194
|
+
- `feat!:` publishes a major release
|
|
115
195
|
- `BREAKING CHANGE:` or `[BREAKING CHANGE]` anywhere in a commit body publishes
|
|
116
196
|
a major release
|
|
117
197
|
- the same markers anywhere in an associated merged PR body publish a major
|
|
118
198
|
release
|
|
119
199
|
|
|
120
|
-
The `release.yml` workflow
|
|
121
|
-
|
|
122
|
-
`
|
|
123
|
-
|
|
200
|
+
The `release.yml` workflow runs on every push to `main`. When semantic-release
|
|
201
|
+
finds qualifying commits, it publishes the next version to npm, creates the
|
|
202
|
+
matching `v<version>` tag, and creates a GitHub Release. Configure an `NPM_TOKEN`
|
|
203
|
+
Actions secret with permission to publish `@filipgutica/ui`; contributors do not
|
|
204
|
+
publish locally or add a token to the repository.
|
|
205
|
+
|
|
206
|
+
Before the first token-backed release, remove the package's existing trusted
|
|
207
|
+
publisher in npm. The workflow retains `id-token: write` only for the provenance
|
|
208
|
+
attestations enabled in `package.json`; npm registry authentication comes from
|
|
209
|
+
the `NPM_TOKEN` secret.
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { createHighlighterCoreSync as e } from "shiki/core";
|
|
2
|
+
import { createJavaScriptRegexEngine as t } from "shiki/engine/javascript";
|
|
3
|
+
//#region src/code-highlight.ts
|
|
4
|
+
var n = {
|
|
5
|
+
bash: () => import("shiki/langs/bash.mjs"),
|
|
6
|
+
css: () => import("shiki/langs/css.mjs"),
|
|
7
|
+
html: () => import("shiki/langs/html.mjs"),
|
|
8
|
+
javascript: () => import("shiki/langs/javascript.mjs"),
|
|
9
|
+
json: () => import("shiki/langs/json.mjs"),
|
|
10
|
+
typescript: () => import("shiki/langs/typescript.mjs"),
|
|
11
|
+
vue: () => import("shiki/langs/vue.mjs")
|
|
12
|
+
}, r = e({
|
|
13
|
+
engine: t(),
|
|
14
|
+
langs: [],
|
|
15
|
+
themes: [{
|
|
16
|
+
name: "ui-semantic",
|
|
17
|
+
fg: "var(--color-code-text)",
|
|
18
|
+
bg: "var(--color-code)",
|
|
19
|
+
settings: [
|
|
20
|
+
{
|
|
21
|
+
scope: ["comment"],
|
|
22
|
+
settings: { foreground: "var(--color-syntax-comment)" }
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
scope: ["keyword", "storage"],
|
|
26
|
+
settings: { foreground: "var(--color-syntax-keyword)" }
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
scope: ["string"],
|
|
30
|
+
settings: { foreground: "var(--color-syntax-string)" }
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
scope: ["constant.numeric", "constant.language"],
|
|
34
|
+
settings: { foreground: "var(--color-syntax-number)" }
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
scope: ["entity.name.function", "support.function"],
|
|
38
|
+
settings: { foreground: "var(--color-syntax-function)" }
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
scope: [
|
|
42
|
+
"entity.name.type",
|
|
43
|
+
"entity.name.class",
|
|
44
|
+
"support.type",
|
|
45
|
+
"support.class"
|
|
46
|
+
],
|
|
47
|
+
settings: { foreground: "var(--color-syntax-type)" }
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
scope: ["variable"],
|
|
51
|
+
settings: { foreground: "var(--color-syntax-variable)" }
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
scope: ["keyword.operator"],
|
|
55
|
+
settings: { foreground: "var(--color-syntax-operator)" }
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
scope: ["punctuation"],
|
|
59
|
+
settings: { foreground: "var(--color-syntax-punctuation)" }
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
scope: ["entity.name.tag"],
|
|
63
|
+
settings: { foreground: "var(--color-syntax-tag)" }
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
scope: ["entity.other.attribute-name"],
|
|
67
|
+
settings: { foreground: "var(--color-syntax-attribute)" }
|
|
68
|
+
}
|
|
69
|
+
]
|
|
70
|
+
}]
|
|
71
|
+
}), i = async ({ code: e, language: t }) => {
|
|
72
|
+
let i = Object.entries(n).find(([e]) => e === t)?.[1];
|
|
73
|
+
if (!i) return e.split("\n").map((e) => [{ content: e }]);
|
|
74
|
+
r.getLoadedLanguages().includes(t) || await r.loadLanguage((await i()).default);
|
|
75
|
+
let a = t === "vue" && !/^\s*(?:<!--[\s\S]*?-->\s*)*<(?:template|script|style)(?=[\s>])/.test(e), o = a ? `<template>\n${e}\n</template>` : e, s = r.codeToTokens(o, {
|
|
76
|
+
lang: t,
|
|
77
|
+
theme: "ui-semantic"
|
|
78
|
+
}).tokens;
|
|
79
|
+
return (a ? s.slice(1, -1) : s).map((e) => e.map(({ content: e, color: t }) => ({
|
|
80
|
+
content: e,
|
|
81
|
+
color: t
|
|
82
|
+
})));
|
|
83
|
+
};
|
|
84
|
+
//#endregion
|
|
85
|
+
export { i as highlightCode };
|
|
@@ -5,9 +5,7 @@ declare var __VLS_8: {};
|
|
|
5
5
|
type __VLS_Slots = {} & {
|
|
6
6
|
default?: (props: typeof __VLS_8) => any;
|
|
7
7
|
};
|
|
8
|
-
declare const __VLS_base: import("vue").DefineComponent<UiAlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiAlertProps> & Readonly<{}>, {
|
|
9
|
-
tone: "neutral" | "info" | "success" | "warning" | "danger" | "error";
|
|
10
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
8
|
+
declare const __VLS_base: import("vue").DefineComponent<UiAlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiAlertProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
11
9
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
12
10
|
declare const _default: typeof __VLS_export;
|
|
13
11
|
export default _default;
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
export interface UiBadgeProps {
|
|
2
|
-
tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
|
|
2
|
+
tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'error';
|
|
3
3
|
}
|
|
4
4
|
declare var __VLS_8: {};
|
|
5
5
|
type __VLS_Slots = {} & {
|
|
6
6
|
default?: (props: typeof __VLS_8) => any;
|
|
7
7
|
};
|
|
8
|
-
declare const __VLS_base: import("vue").DefineComponent<UiBadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiBadgeProps> & Readonly<{}>, {
|
|
9
|
-
tone: "neutral" | "info" | "success" | "warning" | "danger";
|
|
10
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
8
|
+
declare const __VLS_base: import("vue").DefineComponent<UiBadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiBadgeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
11
9
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
12
10
|
declare const _default: typeof __VLS_export;
|
|
13
11
|
export default _default;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import type { UiControlSize } from '../control.js';
|
|
1
2
|
export interface UiButtonProps {
|
|
2
3
|
disabled?: boolean;
|
|
3
4
|
loading?: boolean;
|
|
4
|
-
size?: '
|
|
5
|
+
size?: UiControlSize | 'compact' | 'default';
|
|
5
6
|
type?: 'button' | 'submit' | 'reset';
|
|
6
7
|
variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'text';
|
|
7
8
|
}
|
|
@@ -9,13 +10,7 @@ declare var __VLS_8: {};
|
|
|
9
10
|
type __VLS_Slots = {} & {
|
|
10
11
|
default?: (props: typeof __VLS_8) => any;
|
|
11
12
|
};
|
|
12
|
-
declare const __VLS_base: import("vue").DefineComponent<UiButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiButtonProps> & Readonly<{}>, {
|
|
13
|
-
disabled: boolean;
|
|
14
|
-
loading: boolean;
|
|
15
|
-
size: "default" | "compact";
|
|
16
|
-
type: "button" | "submit" | "reset";
|
|
17
|
-
variant: "primary" | "secondary" | "ghost" | "danger" | "text";
|
|
18
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
13
|
+
declare const __VLS_base: import("vue").DefineComponent<UiButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
19
14
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
20
15
|
declare const _default: typeof __VLS_export;
|
|
21
16
|
export default _default;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export interface UiCardProps {
|
|
2
|
+
title?: string;
|
|
3
|
+
titleTag?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
4
|
+
}
|
|
5
|
+
type __VLS_Slots = {
|
|
6
|
+
actions?(): unknown;
|
|
7
|
+
default?(): unknown;
|
|
8
|
+
footer?(): unknown;
|
|
9
|
+
title?(): unknown;
|
|
10
|
+
};
|
|
11
|
+
declare const __VLS_base: import("vue").DefineComponent<UiCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiCardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
12
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
13
|
+
declare const _default: typeof __VLS_export;
|
|
14
|
+
export default _default;
|
|
15
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
16
|
+
new (): {
|
|
17
|
+
$slots: S;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import type { UiControlSize } from '../control.js';
|
|
1
2
|
export interface UiCheckboxProps {
|
|
2
3
|
disabled?: boolean;
|
|
3
4
|
modelValue?: boolean;
|
|
5
|
+
size?: UiControlSize;
|
|
4
6
|
}
|
|
5
7
|
declare var __VLS_15: {};
|
|
6
8
|
type __VLS_Slots = {} & {
|
|
@@ -10,10 +12,7 @@ declare const __VLS_base: import("vue").DefineComponent<UiCheckboxProps, {}, {},
|
|
|
10
12
|
"update:modelValue": (value: boolean) => any;
|
|
11
13
|
}, string, import("vue").PublicProps, Readonly<UiCheckboxProps> & Readonly<{
|
|
12
14
|
"onUpdate:modelValue"?: (value: boolean) => any;
|
|
13
|
-
}>, {
|
|
14
|
-
disabled: boolean;
|
|
15
|
-
modelValue: boolean;
|
|
16
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
15
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
17
16
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
18
17
|
declare const _default: typeof __VLS_export;
|
|
19
18
|
export default _default;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export interface UiCodeBlockProps {
|
|
2
|
+
code: string;
|
|
3
|
+
language?: string;
|
|
4
|
+
title?: string;
|
|
5
|
+
copyable?: boolean;
|
|
6
|
+
lineNumbers?: boolean;
|
|
7
|
+
wrap?: boolean;
|
|
8
|
+
}
|
|
9
|
+
type __VLS_Slots = {
|
|
10
|
+
actions?(): unknown;
|
|
11
|
+
};
|
|
12
|
+
declare const __VLS_base: import("vue").DefineComponent<UiCodeBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiCodeBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
13
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
14
|
+
declare const _default: typeof __VLS_export;
|
|
15
|
+
export default _default;
|
|
16
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
17
|
+
new (): {
|
|
18
|
+
$slots: S;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
@@ -1,19 +1,16 @@
|
|
|
1
|
+
import type { UiControlSize } from '../control.js';
|
|
1
2
|
export interface UiInputProps {
|
|
2
3
|
disabled?: boolean;
|
|
3
4
|
id?: string;
|
|
4
5
|
invalid?: boolean;
|
|
5
6
|
modelValue?: string;
|
|
7
|
+
size?: UiControlSize;
|
|
6
8
|
type?: 'text' | 'search' | 'email' | 'password' | 'url';
|
|
7
9
|
}
|
|
8
10
|
declare const __VLS_export: import("vue").DefineComponent<UiInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
9
11
|
"update:modelValue": (value: string) => any;
|
|
10
12
|
}, string, import("vue").PublicProps, Readonly<UiInputProps> & Readonly<{
|
|
11
13
|
"onUpdate:modelValue"?: (value: string) => any;
|
|
12
|
-
}>, {
|
|
13
|
-
disabled: boolean;
|
|
14
|
-
type: "text" | "search" | "email" | "password" | "url";
|
|
15
|
-
modelValue: string;
|
|
16
|
-
invalid: boolean;
|
|
17
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
14
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
18
15
|
declare const _default: typeof __VLS_export;
|
|
19
16
|
export default _default;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export interface UiRadioCardProps {
|
|
2
|
+
disabled?: boolean;
|
|
3
|
+
value: string;
|
|
4
|
+
}
|
|
5
|
+
declare var __VLS_8: {};
|
|
6
|
+
type __VLS_Slots = {} & {
|
|
7
|
+
default?: (props: typeof __VLS_8) => any;
|
|
8
|
+
};
|
|
9
|
+
declare const __VLS_base: import("vue").DefineComponent<UiRadioCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiRadioCardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
10
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
11
|
+
declare const _default: typeof __VLS_export;
|
|
12
|
+
export default _default;
|
|
13
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
14
|
+
new (): {
|
|
15
|
+
$slots: S;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
export interface UiRadioCardGroupProps {
|
|
2
|
+
disabled?: boolean;
|
|
3
|
+
loop?: boolean;
|
|
4
|
+
orientation?: 'horizontal' | 'vertical';
|
|
5
|
+
}
|
|
6
|
+
type __VLS_Props = UiRadioCardGroupProps;
|
|
7
|
+
type __VLS_ModelProps = {
|
|
8
|
+
modelValue: string;
|
|
9
|
+
};
|
|
10
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
11
|
+
declare var __VLS_10: {};
|
|
12
|
+
type __VLS_Slots = {} & {
|
|
13
|
+
default?: (props: typeof __VLS_10) => any;
|
|
14
|
+
};
|
|
15
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
16
|
+
"update:modelValue": (value: string) => any;
|
|
17
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
18
|
+
"onUpdate:modelValue"?: (value: string) => any;
|
|
19
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
20
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
21
|
+
declare const _default: typeof __VLS_export;
|
|
22
|
+
export default _default;
|
|
23
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
24
|
+
new (): {
|
|
25
|
+
$slots: S;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
import type { UiControlSize } from '../control.js';
|
|
1
2
|
export interface UiSelectProps {
|
|
2
3
|
disabled?: boolean;
|
|
3
4
|
id?: string;
|
|
4
5
|
invalid?: boolean;
|
|
5
6
|
modelValue?: string;
|
|
7
|
+
size?: UiControlSize;
|
|
6
8
|
}
|
|
7
9
|
declare var __VLS_10: {};
|
|
8
10
|
type __VLS_Slots = {} & {
|
|
@@ -12,11 +14,7 @@ declare const __VLS_base: import("vue").DefineComponent<UiSelectProps, {}, {}, {
|
|
|
12
14
|
"update:modelValue": (value: string) => any;
|
|
13
15
|
}, string, import("vue").PublicProps, Readonly<UiSelectProps> & Readonly<{
|
|
14
16
|
"onUpdate:modelValue"?: (value: string) => any;
|
|
15
|
-
}>, {
|
|
16
|
-
disabled: boolean;
|
|
17
|
-
modelValue: string;
|
|
18
|
-
invalid: boolean;
|
|
19
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
17
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
20
18
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
21
19
|
declare const _default: typeof __VLS_export;
|
|
22
20
|
export default _default;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { UiControlSize } from '../control.js';
|
|
2
|
+
export interface UiSliderProps {
|
|
3
|
+
disabled?: boolean;
|
|
4
|
+
id?: string;
|
|
5
|
+
label: string;
|
|
6
|
+
max?: number;
|
|
7
|
+
min?: number;
|
|
8
|
+
modelValue?: number;
|
|
9
|
+
size?: UiControlSize;
|
|
10
|
+
step?: number;
|
|
11
|
+
}
|
|
12
|
+
declare const __VLS_export: import("vue").DefineComponent<UiSliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
13
|
+
"update:modelValue": (value: number) => any;
|
|
14
|
+
}, string, import("vue").PublicProps, Readonly<UiSliderProps> & Readonly<{
|
|
15
|
+
"onUpdate:modelValue"?: (value: number) => any;
|
|
16
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
17
|
+
declare const _default: typeof __VLS_export;
|
|
18
|
+
export default _default;
|
|
@@ -6,10 +6,7 @@ declare var __VLS_8: {};
|
|
|
6
6
|
type __VLS_Slots = {} & {
|
|
7
7
|
default?: (props: typeof __VLS_8) => any;
|
|
8
8
|
};
|
|
9
|
-
declare const __VLS_base: import("vue").DefineComponent<UiSurfaceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiSurfaceProps> & Readonly<{}>, {
|
|
10
|
-
as: string;
|
|
11
|
-
padding: "none" | "compact" | "default";
|
|
12
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
9
|
+
declare const __VLS_base: import("vue").DefineComponent<UiSurfaceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiSurfaceProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
13
10
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
14
11
|
declare const _default: typeof __VLS_export;
|
|
15
12
|
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type UiControlSize = 'sm' | 'md' | 'lg';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
export { default as UiButton } from './components/UiButton.vue';
|
|
2
2
|
export type { UiButtonProps } from './components/UiButton.vue';
|
|
3
|
+
export { default as UiCard } from './components/UiCard.vue';
|
|
4
|
+
export type { UiCardProps } from './components/UiCard.vue';
|
|
5
|
+
export { default as UiCodeBlock } from './components/UiCodeBlock.vue';
|
|
6
|
+
export type { UiCodeBlockProps } from './components/UiCodeBlock.vue';
|
|
3
7
|
export { default as UiAlert } from './components/UiAlert.vue';
|
|
4
8
|
export type { UiAlertProps } from './components/UiAlert.vue';
|
|
5
9
|
export { default as UiBadge } from './components/UiBadge.vue';
|
|
@@ -14,7 +18,15 @@ export { default as UiInput } from './components/UiInput.vue';
|
|
|
14
18
|
export type { UiInputProps } from './components/UiInput.vue';
|
|
15
19
|
export { default as UiProgress } from './components/UiProgress.vue';
|
|
16
20
|
export type { UiProgressProps } from './components/UiProgress.vue';
|
|
21
|
+
export { default as UiRadioCard } from './components/UiRadioCard.vue';
|
|
22
|
+
export type { UiRadioCardProps } from './components/UiRadioCard.vue';
|
|
23
|
+
export { default as UiRadioCardGroup } from './components/UiRadioCardGroup.vue';
|
|
24
|
+
export type { UiRadioCardGroupProps } from './components/UiRadioCardGroup.vue';
|
|
17
25
|
export { default as UiSelect } from './components/UiSelect.vue';
|
|
18
26
|
export type { UiSelectProps } from './components/UiSelect.vue';
|
|
27
|
+
export { default as UiSlider } from './components/UiSlider.vue';
|
|
28
|
+
export type { UiSliderProps } from './components/UiSlider.vue';
|
|
29
|
+
/** @deprecated Use UiCard for structured content. */
|
|
19
30
|
export { default as UiSurface } from './components/UiSurface.vue';
|
|
20
31
|
export type { UiSurfaceProps } from './components/UiSurface.vue';
|
|
32
|
+
export type { UiControlSize } from './control.js';
|