@revojs/ui 0.3.6 → 0.3.7
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/vue/components/card.vue +2 -1
- package/dist/vue/components/checkbox.vue +2 -2
- package/dist/vue/components/entry.vue +3 -3
- package/dist/vue/components/input.vue +1 -1
- package/dist/vue/components/notification.vue +3 -3
- package/dist/vue/components/radio-group.vue +1 -1
- package/dist/vue/components/radio.vue +2 -2
- package/dist/vue/components/select.vue +15 -2
- package/dist/vue/components/shell.vue +1 -1
- package/dist/vue/components/stepper.vue +1 -1
- package/dist/vue/components/switch.vue +5 -5
- package/dist/vue/components/tags-input.vue +1 -1
- package/dist/vue/components/textarea.vue +1 -1
- package/package.json +4 -4
|
@@ -6,10 +6,11 @@
|
|
|
6
6
|
direction="horizontal"
|
|
7
7
|
align="center"
|
|
8
8
|
justify="between"
|
|
9
|
+
padding="1"
|
|
9
10
|
class="shrink-0 border-b border-border"
|
|
10
11
|
>
|
|
11
12
|
<slot name="header">
|
|
12
|
-
<span v-if="label" :id="labelId" class="min-w-0 flex-1 truncate px-
|
|
13
|
+
<span v-if="label" :id="labelId" class="min-w-0 flex-1 truncate px-4 py-3 text-sm/5 font-normal">
|
|
13
14
|
{{ label }}
|
|
14
15
|
</span>
|
|
15
16
|
</slot>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
is="label"
|
|
4
4
|
direction="horizontal"
|
|
5
5
|
align="start"
|
|
6
|
-
gap="
|
|
6
|
+
gap="2"
|
|
7
7
|
class="group select-none"
|
|
8
8
|
:class="interactionVariants[interaction]"
|
|
9
9
|
>
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
|
|
22
22
|
<span
|
|
23
23
|
aria-hidden="true"
|
|
24
|
-
class="
|
|
24
|
+
class="flex size-5 shrink-0 items-center justify-center rounded-ui border peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring"
|
|
25
25
|
:class="[
|
|
26
26
|
modelValue || indeterminate ? 'border-transparent bg-primary' : 'border-input bg-background',
|
|
27
27
|
disabled
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
<slot name="prefix" />
|
|
22
22
|
</Stack>
|
|
23
23
|
|
|
24
|
-
<Stack gap="0" class="min-w-0 flex-1">
|
|
24
|
+
<Stack gap="0" class="min-w-0 flex-1 px-1">
|
|
25
25
|
<slot
|
|
26
26
|
><span class="truncate">{{ label }}</span></slot
|
|
27
27
|
>
|
|
@@ -42,8 +42,8 @@ const {
|
|
|
42
42
|
href,
|
|
43
43
|
label,
|
|
44
44
|
active = false,
|
|
45
|
-
padding = "
|
|
46
|
-
gap = "
|
|
45
|
+
padding = "4",
|
|
46
|
+
gap = "1",
|
|
47
47
|
direction = "horizontal",
|
|
48
48
|
align = "center",
|
|
49
49
|
justify = "between",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
3
|
:role="announce ? (variant === 'error' ? 'alert' : 'status') : undefined"
|
|
4
|
-
class="grid items-start gap-x-
|
|
4
|
+
class="grid items-start gap-x-1 gap-y-3 rounded-ui border p-4 text-sm"
|
|
5
5
|
:class="[
|
|
6
6
|
variants[variant],
|
|
7
7
|
icon === null ? 'grid-cols-[minmax(0,1fr)]' : 'grid-cols-[auto_minmax(0,1fr)]',
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
</slot>
|
|
16
16
|
</Stack>
|
|
17
17
|
|
|
18
|
-
<Stack gap="1" class="min-w-0">
|
|
18
|
+
<Stack gap="1" class="min-w-0 px-1">
|
|
19
19
|
<p v-if="label" class="text-sm/5 font-medium">{{ label }}</p>
|
|
20
20
|
|
|
21
21
|
<div v-if="subtext || $slots.default" class="text-sm/5 text-muted-foreground">
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
align="center"
|
|
30
30
|
gap="1"
|
|
31
31
|
wrap
|
|
32
|
-
class="self-center"
|
|
32
|
+
class="self-center px-1"
|
|
33
33
|
:class="icon === null ? '' : 'col-start-2 sm:col-start-auto'"
|
|
34
34
|
>
|
|
35
35
|
<slot name="actions" />
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<fieldset class="m-0 flex min-w-0 flex-col gap-3 border-0 p-0" :disabled="disabled">
|
|
3
|
-
<legend v-if="label" class="p-0 text-sm font-normal">
|
|
3
|
+
<legend v-if="label" class="mb-1 p-0 text-sm font-normal">
|
|
4
4
|
{{ label }}<span v-if="required" aria-hidden="true" class="text-destructive"> *</span>
|
|
5
5
|
</legend>
|
|
6
6
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
is="label"
|
|
4
4
|
direction="horizontal"
|
|
5
5
|
align="start"
|
|
6
|
-
gap="
|
|
6
|
+
gap="2"
|
|
7
7
|
class="group select-none"
|
|
8
8
|
:class="interactionVariants[interaction]"
|
|
9
9
|
>
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
<span
|
|
22
22
|
aria-hidden="true"
|
|
23
|
-
class="
|
|
23
|
+
class="flex size-5 shrink-0 items-center justify-center rounded-ui border peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring"
|
|
24
24
|
:class="[
|
|
25
25
|
modelValue === value ? 'border-primary bg-background' : 'border-input bg-background',
|
|
26
26
|
disabled ? '' : 'group-hover:bg-secondary-hover group-active:bg-secondary-active',
|
|
@@ -140,9 +140,10 @@
|
|
|
140
140
|
<span
|
|
141
141
|
v-if="section.group"
|
|
142
142
|
:id="`${listboxId}-group-${section.start}`"
|
|
143
|
-
class="
|
|
143
|
+
class="text-xs font-medium text-muted-foreground"
|
|
144
|
+
:class="groupSizes[size]"
|
|
144
145
|
>
|
|
145
|
-
<span class="block truncate
|
|
146
|
+
<span class="block truncate" :class="groupInsets[size]">{{ section.group }}</span>
|
|
146
147
|
</span>
|
|
147
148
|
|
|
148
149
|
<Button
|
|
@@ -279,6 +280,18 @@ const sizes: Record<SelectSize, string> = {
|
|
|
279
280
|
xs: "p-1",
|
|
280
281
|
};
|
|
281
282
|
|
|
283
|
+
const groupSizes: Record<SelectSize, string> = {
|
|
284
|
+
md: "p-2",
|
|
285
|
+
sm: "p-1",
|
|
286
|
+
xs: "p-1",
|
|
287
|
+
};
|
|
288
|
+
|
|
289
|
+
const groupInsets: Record<SelectSize, string> = {
|
|
290
|
+
md: "px-2",
|
|
291
|
+
sm: "px-2",
|
|
292
|
+
xs: "px-1",
|
|
293
|
+
};
|
|
294
|
+
|
|
282
295
|
const controlVariants: Record<SelectVariant, string> = {
|
|
283
296
|
default: "bg-secondary ring-1 ring-input focus-within:ring-2 focus-within:ring-ring",
|
|
284
297
|
ghost: "bg-transparent hover:bg-ghost-hover focus-within:bg-ghost-hover",
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<Stack direction="horizontal" align="center" gap="1" padding="1">
|
|
4
4
|
<slot name="prefix" />
|
|
5
5
|
|
|
6
|
-
<h1 v-if="label || $slots.heading" class="min-w-0 flex-1 truncate
|
|
6
|
+
<h1 v-if="label || $slots.heading" class="min-w-0 flex-1 truncate px-4 py-3 text-sm font-semibold">
|
|
7
7
|
<slot name="heading">{{ label }}</slot>
|
|
8
8
|
</h1>
|
|
9
9
|
<template v-else-if="headingLabel">
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
@click="select(item.value)"
|
|
19
19
|
>
|
|
20
20
|
<span
|
|
21
|
-
class="shrink-0 rounded-ui
|
|
21
|
+
class="flex min-w-5 shrink-0 items-center justify-center rounded-ui text-xs/5 font-medium tabular-nums"
|
|
22
22
|
:class="markers[state(index)]"
|
|
23
23
|
>
|
|
24
24
|
<Icon v-if="state(index) === 'complete'" :is="TickIcon" :size="16" />
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
<Stack
|
|
3
3
|
is="label"
|
|
4
4
|
direction="horizontal"
|
|
5
|
-
align="
|
|
6
|
-
gap="
|
|
5
|
+
align="start"
|
|
6
|
+
gap="2"
|
|
7
7
|
class="group select-none"
|
|
8
8
|
:class="interactionVariants[interaction]"
|
|
9
9
|
>
|
|
10
10
|
<input v-if="name" type="hidden" :name="name" :value="modelValue ? 'on' : 'off'" />
|
|
11
11
|
|
|
12
12
|
<button
|
|
13
|
-
class="relative flex h-
|
|
13
|
+
class="relative flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-ui p-0.5 outline-ring focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed"
|
|
14
14
|
:class="[
|
|
15
15
|
variants[state],
|
|
16
16
|
disabled
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
:disabled="disabled"
|
|
26
26
|
@click="$emit('update:modelValue', !modelValue)"
|
|
27
27
|
>
|
|
28
|
-
<span class="block size-
|
|
28
|
+
<span class="block size-4 rounded-ui shadow" :class="thumbVariants[state]" />
|
|
29
29
|
</button>
|
|
30
30
|
|
|
31
31
|
<Stack is="span" v-if="label || description || $slots.default" gap="0">
|
|
@@ -60,7 +60,7 @@ const interactionVariants: Record<ControlInteraction, string> = {
|
|
|
60
60
|
};
|
|
61
61
|
|
|
62
62
|
const thumbVariants: Record<SwitchState, string> = {
|
|
63
|
-
checked: "translate-x-
|
|
63
|
+
checked: "translate-x-4 bg-primary-foreground",
|
|
64
64
|
unchecked: "translate-x-0 bg-foreground",
|
|
65
65
|
};
|
|
66
66
|
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
v-model="draft"
|
|
31
31
|
type="text"
|
|
32
32
|
autocomplete="off"
|
|
33
|
-
class="min-w-24 flex-1 bg-transparent
|
|
33
|
+
class="min-w-24 flex-1 bg-transparent px-2 py-1 outline-none placeholder:opacity-50 pointer-coarse:text-[16px]/5"
|
|
34
34
|
:placeholder="modelValue.length === 0 ? placeholder : undefined"
|
|
35
35
|
:required="required && modelValue.length === 0"
|
|
36
36
|
:disabled="disabled"
|
|
@@ -43,7 +43,7 @@ const resizes: Record<TextareaResize, string> = {
|
|
|
43
43
|
};
|
|
44
44
|
|
|
45
45
|
const variants: Record<TextareaVariant, string> = {
|
|
46
|
-
default: "bg-secondary
|
|
46
|
+
default: "bg-secondary px-4 py-3 ring-1 ring-input ring-inset focus-visible:outline-offset-[-2px]",
|
|
47
47
|
plain: "bg-transparent p-0",
|
|
48
48
|
};
|
|
49
49
|
</script>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@revojs/ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.7",
|
|
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.7",
|
|
39
39
|
"@tailwindcss/vite": "^4.3.3",
|
|
40
|
-
"revojs": "0.3.
|
|
40
|
+
"revojs": "0.3.7",
|
|
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.7",
|
|
46
46
|
"@vitejs/plugin-vue": "^6.0.9"
|
|
47
47
|
},
|
|
48
48
|
"optionalDependencies": {
|