@revojs/ui 0.3.10 → 0.3.11
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.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { IconComponent } from "./icon";
|
|
2
2
|
import type { StackProps } from "./stack";
|
|
3
|
+
export type CollapsibleSize = "md" | "sm";
|
|
3
4
|
export interface CollapsibleProps {
|
|
4
5
|
modelValue?: boolean;
|
|
5
6
|
label: string;
|
|
@@ -8,4 +9,5 @@ export interface CollapsibleProps {
|
|
|
8
9
|
disabled?: boolean;
|
|
9
10
|
bodyPadding?: StackProps["padding"];
|
|
10
11
|
bodyGap?: StackProps["gap"];
|
|
12
|
+
size?: CollapsibleSize;
|
|
11
13
|
}
|
|
@@ -1,38 +1,59 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<summary
|
|
11
|
-
class="flex cursor-pointer list-none items-center gap-1 rounded-ui p-3 text-sm font-medium outline-ring select-none hover:bg-ghost-hover active:bg-ghost-active focus-visible:outline-2 focus-visible:outline-offset-[-2px] [&::-webkit-details-marker]:hidden"
|
|
12
|
-
:class="disabled ? 'cursor-not-allowed opacity-50 hover:bg-transparent active:bg-transparent' : ''"
|
|
13
|
-
:tabindex="disabled ? -1 : undefined"
|
|
14
|
-
:aria-disabled="disabled || undefined"
|
|
15
|
-
@click="disabled && $event.preventDefault()"
|
|
2
|
+
<div class="relative w-full">
|
|
3
|
+
<details
|
|
4
|
+
:name="name"
|
|
5
|
+
:open="isOpen"
|
|
6
|
+
class="group/collapsible w-full rounded-ui"
|
|
7
|
+
:data-state="isOpen ? 'open' : 'closed'"
|
|
8
|
+
:data-disabled="disabled ? '' : undefined"
|
|
9
|
+
@toggle="handleToggle"
|
|
16
10
|
>
|
|
17
|
-
<
|
|
11
|
+
<summary
|
|
12
|
+
class="flex cursor-pointer list-none items-center gap-1 rounded-ui outline-ring select-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] [&::-webkit-details-marker]:hidden"
|
|
13
|
+
:class="[
|
|
14
|
+
sizes[size],
|
|
15
|
+
$slots.actions ? 'pr-10' : '',
|
|
16
|
+
disabled ? 'cursor-not-allowed opacity-50 hover:bg-transparent active:bg-transparent' : '',
|
|
17
|
+
]"
|
|
18
|
+
:tabindex="disabled ? -1 : undefined"
|
|
19
|
+
:aria-disabled="disabled || undefined"
|
|
20
|
+
@click="disabled && $event.preventDefault()"
|
|
21
|
+
>
|
|
22
|
+
<Icon v-if="iconPrefix" :is="iconPrefix" :size="20" />
|
|
18
23
|
|
|
19
|
-
|
|
24
|
+
<span class="min-w-0 truncate px-1" :class="size === 'md' ? 'flex-1' : ''">{{ label }}</span>
|
|
20
25
|
|
|
21
|
-
|
|
22
|
-
|
|
26
|
+
<Icon
|
|
27
|
+
:is="ArrowDownIcon"
|
|
28
|
+
:size="size === 'md' ? 20 : 16"
|
|
29
|
+
class="shrink-0 group-open/collapsible:rotate-180"
|
|
30
|
+
/>
|
|
31
|
+
</summary>
|
|
23
32
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
33
|
+
<Stack :padding="bodyPadding">
|
|
34
|
+
<Stack :gap="bodyGap" :class="size === 'md' ? 'px-1' : ''">
|
|
35
|
+
<slot />
|
|
36
|
+
</Stack>
|
|
27
37
|
</Stack>
|
|
38
|
+
</details>
|
|
39
|
+
|
|
40
|
+
<Stack
|
|
41
|
+
v-if="$slots.actions"
|
|
42
|
+
direction="horizontal"
|
|
43
|
+
align="center"
|
|
44
|
+
gap="0"
|
|
45
|
+
class="absolute top-0 right-1"
|
|
46
|
+
:class="actionHeights[size]"
|
|
47
|
+
>
|
|
48
|
+
<slot name="actions" />
|
|
28
49
|
</Stack>
|
|
29
|
-
</
|
|
50
|
+
</div>
|
|
30
51
|
</template>
|
|
31
52
|
|
|
32
53
|
<script setup lang="ts">
|
|
33
54
|
import ArrowDownIcon from "~icons/hugeicons/arrow-down-01";
|
|
34
55
|
import { ref, watch } from "vue";
|
|
35
|
-
import type { CollapsibleProps } from "../../components/collapsible";
|
|
56
|
+
import type { CollapsibleProps, CollapsibleSize } from "../../components/collapsible";
|
|
36
57
|
import Icon from "./icon.vue";
|
|
37
58
|
import Stack from "./stack.vue";
|
|
38
59
|
|
|
@@ -44,6 +65,7 @@ const {
|
|
|
44
65
|
disabled = false,
|
|
45
66
|
bodyPadding = "3",
|
|
46
67
|
bodyGap = "3",
|
|
68
|
+
size = "md",
|
|
47
69
|
} = defineProps<CollapsibleProps>();
|
|
48
70
|
|
|
49
71
|
const emit = defineEmits<{
|
|
@@ -52,6 +74,16 @@ const emit = defineEmits<{
|
|
|
52
74
|
|
|
53
75
|
const isOpen = ref(modelValue ?? false);
|
|
54
76
|
|
|
77
|
+
const actionHeights: Record<CollapsibleSize, string> = {
|
|
78
|
+
md: "h-11",
|
|
79
|
+
sm: "h-8",
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
const sizes: Record<CollapsibleSize, string> = {
|
|
83
|
+
md: "p-3 text-sm font-medium hover:bg-ghost-hover active:bg-ghost-active",
|
|
84
|
+
sm: "p-2 text-xs font-normal text-muted-foreground hover:text-foreground",
|
|
85
|
+
};
|
|
86
|
+
|
|
55
87
|
function handleToggle(event: Event) {
|
|
56
88
|
const value = (event.currentTarget as HTMLDetailsElement).open;
|
|
57
89
|
|
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
<template>
|
|
2
|
+
<div v-if="$slots.actions" class="group/navigate relative">
|
|
3
|
+
<Button
|
|
4
|
+
is="a"
|
|
5
|
+
:href="href"
|
|
6
|
+
font="normal"
|
|
7
|
+
layout="left"
|
|
8
|
+
:size="size"
|
|
9
|
+
:variant="active ? 'secondary' : 'ghost'"
|
|
10
|
+
:icon-prefix="iconPrefix"
|
|
11
|
+
:icon-suffix="iconSuffix"
|
|
12
|
+
:label="label"
|
|
13
|
+
:aria-current="active ? 'page' : undefined"
|
|
14
|
+
class="w-full pr-10"
|
|
15
|
+
:class="
|
|
16
|
+
active
|
|
17
|
+
? 'group-hover/navigate:bg-secondary-hover group-has-[[data-state=open]]/navigate:bg-secondary-hover'
|
|
18
|
+
: 'group-hover/navigate:bg-ghost-hover group-has-[[data-state=open]]/navigate:bg-ghost-hover'
|
|
19
|
+
"
|
|
20
|
+
/>
|
|
21
|
+
|
|
22
|
+
<Stack direction="horizontal" align="center" gap="0" class="absolute inset-y-0 right-1">
|
|
23
|
+
<slot name="actions" />
|
|
24
|
+
</Stack>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
2
27
|
<Button
|
|
28
|
+
v-else
|
|
3
29
|
is="a"
|
|
4
30
|
:href="href"
|
|
5
31
|
font="normal"
|
|
@@ -16,6 +42,7 @@
|
|
|
16
42
|
<script setup lang="ts">
|
|
17
43
|
import type { NavigateProps } from "../../components/navigate";
|
|
18
44
|
import Button from "./button.vue";
|
|
45
|
+
import Stack from "./stack.vue";
|
|
19
46
|
|
|
20
47
|
const { href, label, iconPrefix, iconSuffix, active = false, size = "md" } = defineProps<NavigateProps>();
|
|
21
48
|
</script>
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
class="min-w-0 text-sm"
|
|
10
10
|
:class="disabled ? 'opacity-50' : ''"
|
|
11
11
|
>
|
|
12
|
-
<Stack gap="0" class="min-w-
|
|
12
|
+
<Stack gap="0" class="min-w-32 flex-1">
|
|
13
13
|
<component :is="controlId ? 'label' : 'span'" :id="`${id}-label`" :for="controlId" class="font-normal">
|
|
14
14
|
{{ label }}
|
|
15
15
|
</component>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@revojs/ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.11",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -35,14 +35,14 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@iconify-json/hugeicons": "^1.2.35",
|
|
38
|
-
"@revojs/client": "0.3.
|
|
38
|
+
"@revojs/client": "0.3.11",
|
|
39
39
|
"@tailwindcss/vite": "^4.3.3",
|
|
40
|
-
"revojs": "0.3.
|
|
40
|
+
"revojs": "0.3.11",
|
|
41
41
|
"tailwindcss": "^4.3.3",
|
|
42
42
|
"unplugin-icons": "^24.0.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@revojs/tsconfig": "0.3.
|
|
45
|
+
"@revojs/tsconfig": "0.3.11",
|
|
46
46
|
"@vitejs/plugin-vue": "^6.0.9"
|
|
47
47
|
},
|
|
48
48
|
"optionalDependencies": {
|