@soave/ui 0.1.0 → 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/dist/adapters/css-variables.d.ts +2 -0
- package/dist/adapters/css-variables.mjs +228 -0
- package/dist/adapters/headless.d.ts +7 -0
- package/dist/adapters/headless.mjs +7 -0
- package/dist/adapters/index.d.ts +5 -0
- package/dist/adapters/index.mjs +11 -0
- package/dist/adapters/tailwind.d.ts +2 -0
- package/dist/adapters/tailwind.mjs +443 -0
- package/dist/adapters/types.d.ts +38 -0
- package/dist/adapters/types.mjs +10 -0
- package/dist/build.config.mjs +1 -1
- package/dist/components/ui/Alert.vue +18 -16
- package/dist/components/ui/AlertDescription.vue +13 -3
- package/dist/components/ui/AlertTitle.vue +13 -3
- package/dist/components/ui/Button.vue +30 -4
- package/dist/components/ui/Card.vue +27 -3
- package/dist/components/ui/CardContent.vue +13 -3
- package/dist/components/ui/CardDescription.vue +13 -3
- package/dist/components/ui/CardFooter.vue +13 -3
- package/dist/components/ui/CardHeader.vue +13 -3
- package/dist/components/ui/CardTitle.vue +13 -3
- package/dist/components/ui/Checkbox.vue +23 -2
- package/dist/components/ui/Dialog.vue +31 -9
- package/dist/components/ui/DialogDescription.vue +13 -3
- package/dist/components/ui/DialogFooter.vue +13 -3
- package/dist/components/ui/DialogHeader.vue +13 -3
- package/dist/components/ui/DialogTitle.vue +13 -3
- package/dist/components/ui/DropdownMenuContent.vue +16 -13
- package/dist/components/ui/DropdownMenuItem.vue +11 -17
- package/dist/components/ui/Input.vue +26 -3
- package/dist/components/ui/PopoverContent.vue +16 -12
- package/dist/components/ui/RadioGroup.vue +12 -7
- package/dist/components/ui/RadioItem.vue +31 -10
- package/dist/components/ui/Select.vue +8 -1
- package/dist/components/ui/SelectContent.vue +31 -5
- package/dist/components/ui/SelectItem.vue +20 -16
- package/dist/components/ui/SelectTrigger.vue +39 -7
- package/dist/components/ui/SelectValue.vue +13 -2
- package/dist/components/ui/Sheet.vue +32 -24
- package/dist/components/ui/SheetDescription.vue +13 -6
- package/dist/components/ui/SheetFooter.vue +13 -6
- package/dist/components/ui/SheetHeader.vue +13 -6
- package/dist/components/ui/SheetTitle.vue +13 -6
- package/dist/components/ui/Switch.vue +23 -3
- package/dist/components/ui/Textarea.vue +26 -3
- package/dist/components/ui/Toast.vue +38 -29
- package/dist/components/ui/Toaster.vue +12 -16
- package/dist/components/ui/TooltipContent.vue +18 -15
- package/dist/components/ui/UIProvider.vue +6 -2
- package/dist/composables/index.d.ts +1 -1
- package/dist/composables/index.mjs +1 -1
- package/dist/composables/useUIConfig.d.ts +16 -5
- package/dist/composables/useUIConfig.mjs +26 -9
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +1 -0
- package/dist/styles/css-variables.css +1 -0
- package/dist/styles/index.d.ts +1 -0
- package/dist/styles/index.mjs +1 -0
- package/dist/types/alert.d.ts +2 -0
- package/dist/types/card.d.ts +5 -0
- package/dist/types/composables.d.ts +122 -0
- package/dist/types/composables.mjs +0 -0
- package/dist/types/config.d.ts +8 -0
- package/dist/types/dialog.d.ts +7 -0
- package/dist/types/dropdown.d.ts +8 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.mjs +1 -0
- package/dist/types/popover.d.ts +6 -0
- package/dist/types/radio.d.ts +4 -0
- package/dist/types/select.d.ts +21 -0
- package/dist/types/sheet.d.ts +19 -0
- package/dist/types/toast.d.ts +2 -0
- package/dist/types/tooltip.d.ts +6 -0
- package/package.json +9 -1
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import type { Ref } from "vue";
|
|
2
|
+
/**
|
|
3
|
+
* Button の状態
|
|
4
|
+
*/
|
|
5
|
+
export interface ButtonState {
|
|
6
|
+
variant: "primary" | "secondary" | "ghost" | "outline" | "destructive";
|
|
7
|
+
size: "sm" | "md" | "lg";
|
|
8
|
+
disabled: boolean;
|
|
9
|
+
loading: boolean;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Input の状態
|
|
13
|
+
*/
|
|
14
|
+
export interface InputState {
|
|
15
|
+
size: "sm" | "md" | "lg";
|
|
16
|
+
disabled: boolean;
|
|
17
|
+
readonly: boolean;
|
|
18
|
+
error: string | undefined;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Dialog の状態
|
|
22
|
+
*/
|
|
23
|
+
export interface DialogState {
|
|
24
|
+
is_open: boolean;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Card の状態
|
|
28
|
+
*/
|
|
29
|
+
export interface CardState {
|
|
30
|
+
padding: "sm" | "md" | "lg" | "none";
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Checkbox の状態
|
|
34
|
+
*/
|
|
35
|
+
export interface CheckboxState {
|
|
36
|
+
checked: boolean;
|
|
37
|
+
disabled: boolean;
|
|
38
|
+
indeterminate: boolean;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Radio の状態
|
|
42
|
+
*/
|
|
43
|
+
export interface RadioState {
|
|
44
|
+
checked: boolean;
|
|
45
|
+
disabled: boolean;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Switch の状態
|
|
49
|
+
*/
|
|
50
|
+
export interface SwitchState {
|
|
51
|
+
checked: boolean;
|
|
52
|
+
disabled: boolean;
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Textarea の状態
|
|
56
|
+
*/
|
|
57
|
+
export interface TextareaState {
|
|
58
|
+
size: "sm" | "md" | "lg";
|
|
59
|
+
disabled: boolean;
|
|
60
|
+
readonly: boolean;
|
|
61
|
+
error: string | undefined;
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* Select の状態
|
|
65
|
+
*/
|
|
66
|
+
export interface SelectState {
|
|
67
|
+
size: "sm" | "md" | "lg";
|
|
68
|
+
disabled: boolean;
|
|
69
|
+
is_open: boolean;
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* Toast の状態
|
|
73
|
+
*/
|
|
74
|
+
export interface ToastState {
|
|
75
|
+
variant: "default" | "success" | "error" | "warning" | "info";
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Tooltip の状態
|
|
79
|
+
*/
|
|
80
|
+
export interface TooltipState {
|
|
81
|
+
is_open: boolean;
|
|
82
|
+
side: "top" | "right" | "bottom" | "left";
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* Popover の状態
|
|
86
|
+
*/
|
|
87
|
+
export interface PopoverState {
|
|
88
|
+
is_open: boolean;
|
|
89
|
+
}
|
|
90
|
+
/**
|
|
91
|
+
* Dropdown の状態
|
|
92
|
+
*/
|
|
93
|
+
export interface DropdownState {
|
|
94
|
+
is_open: boolean;
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Sheet の状態
|
|
98
|
+
*/
|
|
99
|
+
export interface SheetState {
|
|
100
|
+
is_open: boolean;
|
|
101
|
+
side: "top" | "right" | "bottom" | "left";
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Alert の状態
|
|
105
|
+
*/
|
|
106
|
+
export interface AlertState {
|
|
107
|
+
variant: "default" | "info" | "success" | "warning" | "destructive";
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* 汎用的なコンポーネント状態
|
|
111
|
+
*/
|
|
112
|
+
export interface ComponentState {
|
|
113
|
+
[key: string]: unknown;
|
|
114
|
+
}
|
|
115
|
+
/**
|
|
116
|
+
* Headless Composable の戻り値型
|
|
117
|
+
* ロジック情報のみを返し、スタイル情報は返さない
|
|
118
|
+
*/
|
|
119
|
+
export interface HeadlessComposableReturn<T extends ComponentState> {
|
|
120
|
+
state: Readonly<Ref<T>>;
|
|
121
|
+
aria_attributes: Readonly<Ref<Record<string, string | boolean | undefined>>>;
|
|
122
|
+
}
|
|
File without changes
|
package/dist/types/config.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import type { ButtonVariant, ButtonSize } from "./button";
|
|
|
2
2
|
import type { InputSize } from "./input";
|
|
3
3
|
import type { CardPadding } from "./card";
|
|
4
4
|
import type { AlertVariant } from "./alert";
|
|
5
|
+
import type { StyleAdapter } from "../adapters/types";
|
|
5
6
|
/**
|
|
6
7
|
* UIコンポーネントのグローバル設定
|
|
7
8
|
*/
|
|
@@ -11,6 +12,13 @@ export interface UIConfig {
|
|
|
11
12
|
card: CardConfig;
|
|
12
13
|
alert: AlertConfig;
|
|
13
14
|
}
|
|
15
|
+
/**
|
|
16
|
+
* UIProvider のコンテキスト(設定 + Adapter)
|
|
17
|
+
*/
|
|
18
|
+
export interface UIProviderContext {
|
|
19
|
+
config: UIConfig;
|
|
20
|
+
adapter: StyleAdapter;
|
|
21
|
+
}
|
|
14
22
|
export interface ButtonConfig {
|
|
15
23
|
default_variant: ButtonVariant;
|
|
16
24
|
default_size: ButtonSize;
|
package/dist/types/dialog.d.ts
CHANGED
|
@@ -2,6 +2,8 @@ import type { Ref, DeepReadonly } from "vue";
|
|
|
2
2
|
export interface DialogProps {
|
|
3
3
|
open?: boolean;
|
|
4
4
|
modal?: boolean;
|
|
5
|
+
showCloseButton?: boolean;
|
|
6
|
+
unstyled?: boolean;
|
|
5
7
|
}
|
|
6
8
|
export interface DialogReturn {
|
|
7
9
|
is_open: DeepReadonly<Ref<boolean>>;
|
|
@@ -11,18 +13,23 @@ export interface DialogReturn {
|
|
|
11
13
|
}
|
|
12
14
|
export interface DialogContentProps {
|
|
13
15
|
class?: string;
|
|
16
|
+
unstyled?: boolean;
|
|
14
17
|
}
|
|
15
18
|
export interface DialogHeaderProps {
|
|
16
19
|
class?: string;
|
|
20
|
+
unstyled?: boolean;
|
|
17
21
|
}
|
|
18
22
|
export interface DialogTitleProps {
|
|
19
23
|
class?: string;
|
|
24
|
+
unstyled?: boolean;
|
|
20
25
|
}
|
|
21
26
|
export interface DialogDescriptionProps {
|
|
22
27
|
class?: string;
|
|
28
|
+
unstyled?: boolean;
|
|
23
29
|
}
|
|
24
30
|
export interface DialogFooterProps {
|
|
25
31
|
class?: string;
|
|
32
|
+
unstyled?: boolean;
|
|
26
33
|
}
|
|
27
34
|
export interface DialogTriggerProps {
|
|
28
35
|
as_child?: boolean;
|
package/dist/types/dropdown.d.ts
CHANGED
|
@@ -3,10 +3,18 @@ export type DropdownAlign = "start" | "center" | "end";
|
|
|
3
3
|
export interface DropdownProps {
|
|
4
4
|
side?: DropdownSide;
|
|
5
5
|
align?: DropdownAlign;
|
|
6
|
+
class?: string;
|
|
7
|
+
unstyled?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface DropdownContentProps {
|
|
10
|
+
class?: string;
|
|
11
|
+
unstyled?: boolean;
|
|
6
12
|
}
|
|
7
13
|
export interface DropdownItemProps {
|
|
8
14
|
disabled?: boolean;
|
|
9
15
|
destructive?: boolean;
|
|
16
|
+
class?: string;
|
|
17
|
+
unstyled?: boolean;
|
|
10
18
|
}
|
|
11
19
|
export interface DropdownContext {
|
|
12
20
|
is_open: boolean;
|
package/dist/types/index.d.ts
CHANGED
package/dist/types/index.mjs
CHANGED
package/dist/types/popover.d.ts
CHANGED
|
@@ -4,6 +4,12 @@ export interface PopoverProps {
|
|
|
4
4
|
side?: PopoverSide;
|
|
5
5
|
align?: PopoverAlign;
|
|
6
6
|
modal?: boolean;
|
|
7
|
+
class?: string;
|
|
8
|
+
unstyled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export interface PopoverContentProps {
|
|
11
|
+
class?: string;
|
|
12
|
+
unstyled?: boolean;
|
|
7
13
|
}
|
|
8
14
|
export interface PopoverContext {
|
|
9
15
|
is_open: boolean;
|
package/dist/types/radio.d.ts
CHANGED
|
@@ -3,11 +3,15 @@ export type RadioSize = "sm" | "md" | "lg";
|
|
|
3
3
|
export interface RadioGroupProps {
|
|
4
4
|
disabled?: boolean;
|
|
5
5
|
orientation?: "horizontal" | "vertical";
|
|
6
|
+
class?: string;
|
|
7
|
+
unstyled?: boolean;
|
|
6
8
|
}
|
|
7
9
|
export interface RadioItemProps {
|
|
8
10
|
value: string;
|
|
9
11
|
size?: RadioSize;
|
|
10
12
|
disabled?: boolean;
|
|
13
|
+
class?: string;
|
|
14
|
+
unstyled?: boolean;
|
|
11
15
|
}
|
|
12
16
|
export interface RadioGroupContext {
|
|
13
17
|
model_value: Ref<string>;
|
package/dist/types/select.d.ts
CHANGED
|
@@ -4,6 +4,25 @@ export interface SelectProps {
|
|
|
4
4
|
size?: SelectSize;
|
|
5
5
|
disabled?: boolean;
|
|
6
6
|
placeholder?: string;
|
|
7
|
+
unstyled?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface SelectTriggerProps {
|
|
10
|
+
class?: string;
|
|
11
|
+
unstyled?: boolean;
|
|
12
|
+
}
|
|
13
|
+
export interface SelectContentProps {
|
|
14
|
+
class?: string;
|
|
15
|
+
unstyled?: boolean;
|
|
16
|
+
}
|
|
17
|
+
export interface SelectItemProps {
|
|
18
|
+
value: string;
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
class?: string;
|
|
21
|
+
unstyled?: boolean;
|
|
22
|
+
}
|
|
23
|
+
export interface SelectValueProps {
|
|
24
|
+
class?: string;
|
|
25
|
+
unstyled?: boolean;
|
|
7
26
|
}
|
|
8
27
|
export interface SelectOption {
|
|
9
28
|
value: string;
|
|
@@ -16,10 +35,12 @@ export interface SelectContext {
|
|
|
16
35
|
disabled: Ref<boolean>;
|
|
17
36
|
size: Ref<SelectSize>;
|
|
18
37
|
placeholder: Ref<string>;
|
|
38
|
+
trigger_ref: Ref<HTMLElement | null>;
|
|
19
39
|
updateValue: (value: string) => void;
|
|
20
40
|
open: () => void;
|
|
21
41
|
close: () => void;
|
|
22
42
|
toggle: () => void;
|
|
43
|
+
setTriggerRef: (element: HTMLElement | null) => void;
|
|
23
44
|
}
|
|
24
45
|
export declare const SELECT_KEY: InjectionKey<SelectContext>;
|
|
25
46
|
export interface SelectTriggerReturn {
|
package/dist/types/sheet.d.ts
CHANGED
|
@@ -2,6 +2,25 @@ export type SheetSide = "top" | "right" | "bottom" | "left";
|
|
|
2
2
|
export interface SheetProps {
|
|
3
3
|
open?: boolean;
|
|
4
4
|
side?: SheetSide;
|
|
5
|
+
showCloseButton?: boolean;
|
|
6
|
+
class?: string;
|
|
7
|
+
unstyled?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface SheetHeaderProps {
|
|
10
|
+
class?: string;
|
|
11
|
+
unstyled?: boolean;
|
|
12
|
+
}
|
|
13
|
+
export interface SheetTitleProps {
|
|
14
|
+
class?: string;
|
|
15
|
+
unstyled?: boolean;
|
|
16
|
+
}
|
|
17
|
+
export interface SheetDescriptionProps {
|
|
18
|
+
class?: string;
|
|
19
|
+
unstyled?: boolean;
|
|
20
|
+
}
|
|
21
|
+
export interface SheetFooterProps {
|
|
22
|
+
class?: string;
|
|
23
|
+
unstyled?: boolean;
|
|
5
24
|
}
|
|
6
25
|
export interface SheetContext {
|
|
7
26
|
is_open: boolean;
|
package/dist/types/toast.d.ts
CHANGED
package/dist/types/tooltip.d.ts
CHANGED
|
@@ -7,6 +7,12 @@ export interface TooltipProps {
|
|
|
7
7
|
delay_duration?: number;
|
|
8
8
|
skip_delay_duration?: number;
|
|
9
9
|
disabled?: boolean;
|
|
10
|
+
class?: string;
|
|
11
|
+
unstyled?: boolean;
|
|
12
|
+
}
|
|
13
|
+
export interface TooltipContentProps {
|
|
14
|
+
class?: string;
|
|
15
|
+
unstyled?: boolean;
|
|
10
16
|
}
|
|
11
17
|
export interface TooltipReturn {
|
|
12
18
|
is_open: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@soave/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "soave UI - Composable-First UI Framework for Vue 3 / Nuxt 4",
|
|
5
5
|
"author": "Arata Ouchi (Original SIN Architecture)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -25,6 +25,14 @@
|
|
|
25
25
|
"./components": {
|
|
26
26
|
"import": "./dist/components/ui/index.mjs",
|
|
27
27
|
"types": "./dist/components/ui/index.d.ts"
|
|
28
|
+
},
|
|
29
|
+
"./adapters": {
|
|
30
|
+
"import": "./dist/adapters/index.mjs",
|
|
31
|
+
"types": "./dist/adapters/index.d.ts"
|
|
32
|
+
},
|
|
33
|
+
"./styles/css-variables.css": {
|
|
34
|
+
"import": "./dist/styles/css-variables.css",
|
|
35
|
+
"default": "./dist/styles/css-variables.css"
|
|
28
36
|
}
|
|
29
37
|
},
|
|
30
38
|
"files": [
|