@hemia/lume-registry 0.0.2 → 0.0.3
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/package.json +1 -1
- package/registry/vue/alert/alert.vue +3 -3
- package/registry/vue/button/button.vue +9 -9
- package/registry/vue/field/field-description.vue +1 -1
- package/registry/vue/field/field-group.vue +1 -1
- package/registry/vue/field/field-separator.vue +1 -1
- package/registry/vue/textfield/textfield.vue +17 -20
package/package.json
CHANGED
|
@@ -14,11 +14,11 @@ const alertVariants = cva(
|
|
|
14
14
|
tonal:
|
|
15
15
|
"border-transparent bg-lume-destructive/10 text-lume-destructive dark:bg-lume-destructive/30 dark:text-lume-destructive-200",
|
|
16
16
|
success:
|
|
17
|
-
"
|
|
17
|
+
"bg-green-50 border-green-200/50 text-green-800 dark:bg-green-900/30 dark:text-green-200 dark:border-green-800/50",
|
|
18
18
|
warning:
|
|
19
|
-
"
|
|
19
|
+
"bg-amber-50 border-amber-200/50 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200 dark:border-amber-800/50",
|
|
20
20
|
info:
|
|
21
|
-
"
|
|
21
|
+
"bg-blue-50 border-blue-200/50 text-blue-800 dark:bg-blue-900/30 dark:text-blue-200 dark:border-blue-800/50",
|
|
22
22
|
},
|
|
23
23
|
},
|
|
24
24
|
defaultVariants: {
|
|
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority"
|
|
|
3
3
|
import { cn } from "@hemia/lume-vue"
|
|
4
4
|
|
|
5
5
|
const buttonVariants = cva(
|
|
6
|
-
"group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-
|
|
6
|
+
"group/button inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-xl border border-transparent bg-clip-padding text-sm font-medium transition-all outline-none select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lume-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
7
7
|
{
|
|
8
8
|
variants: {
|
|
9
9
|
variant: {
|
|
@@ -18,14 +18,14 @@ const buttonVariants = cva(
|
|
|
18
18
|
link: "text-lume-primary underline-offset-4 hover:underline",
|
|
19
19
|
},
|
|
20
20
|
size: {
|
|
21
|
-
default: "h-
|
|
22
|
-
xs: "h-
|
|
23
|
-
sm: "h-
|
|
24
|
-
lg: "h-
|
|
25
|
-
icon: "size-
|
|
26
|
-
"icon-xs": "size-
|
|
27
|
-
"icon-sm": "size-
|
|
28
|
-
"icon-lg": "size-
|
|
21
|
+
default: "h-8 px-4 py-2",
|
|
22
|
+
xs: "h-6 rounded-sm px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
|
|
23
|
+
sm: "h-7 rounded-lg px-3",
|
|
24
|
+
lg: "h-9 rounded-xl px-4",
|
|
25
|
+
icon: "size-8",
|
|
26
|
+
"icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
|
|
27
|
+
"icon-sm": "size-7",
|
|
28
|
+
"icon-lg": "size-9",
|
|
29
29
|
},
|
|
30
30
|
},
|
|
31
31
|
defaultVariants: {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { cva } from "class-variance-authority"
|
|
3
3
|
import { cn } from "@hemia/lume-vue"
|
|
4
4
|
|
|
5
|
-
const fieldDescriptionVariants = cva("text-[0.8rem] text-muted-foreground")
|
|
5
|
+
const fieldDescriptionVariants = cva("text-[0.8rem] text-lume-muted-foreground")
|
|
6
6
|
|
|
7
7
|
const props = defineProps<{
|
|
8
8
|
class?: string
|
|
@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority"
|
|
|
3
3
|
import { cn } from "@hemia/lume-vue"
|
|
4
4
|
|
|
5
5
|
const fieldGroupVariants = cva(
|
|
6
|
-
"flex flex-wrap items-center gap-2
|
|
6
|
+
"flex flex-wrap items-center gap-2"
|
|
7
7
|
)
|
|
8
8
|
|
|
9
9
|
const props = defineProps<{
|
|
@@ -4,12 +4,12 @@ import { cn } from "@hemia/lume-vue"
|
|
|
4
4
|
import { Field, FieldLabel, FieldDescription, FieldGroup } from "../field/index"
|
|
5
5
|
|
|
6
6
|
const textfieldVariants = cva(
|
|
7
|
-
"flex h-9 w-full min-w-0 rounded-lg border border-lume-input bg-transparent px-2.5 py-1 text-base transition-colors
|
|
7
|
+
"flex h-9 w-full min-w-0 rounded-lg border border-lume-input bg-transparent px-2.5 py-1 text-base transition-colors file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-lume-foreground placeholder:text-lume-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-lume-input/50 disabled:opacity-50 md:text-sm dark:bg-lume-input/30 dark:disabled:bg-lume-input/80",
|
|
8
8
|
{
|
|
9
9
|
variants: {
|
|
10
10
|
variant: {
|
|
11
11
|
default: "",
|
|
12
|
-
error: "bg-lume-background border-lume-destructive
|
|
12
|
+
error: "bg-lume-background border-lume-destructive",
|
|
13
13
|
},
|
|
14
14
|
size: {
|
|
15
15
|
default: "",
|
|
@@ -91,30 +91,31 @@ const getInputPaddingClass = () => {
|
|
|
91
91
|
<template>
|
|
92
92
|
<Field :class="props.class">
|
|
93
93
|
<FieldLabel v-if="label" :for="forId">{{ label }}</FieldLabel>
|
|
94
|
-
|
|
95
|
-
|
|
94
|
+
|
|
95
|
+
<FieldGroup>
|
|
96
|
+
|
|
96
97
|
<component
|
|
97
98
|
v-if="prependIcon"
|
|
98
99
|
:is="prependIcon"
|
|
99
100
|
class="text-lume-muted-foreground flex shrink-0 items-center"
|
|
100
101
|
:class="iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4'"
|
|
101
102
|
/>
|
|
102
|
-
|
|
103
|
+
|
|
103
104
|
<div
|
|
105
|
+
:aria-invalid="!!error"
|
|
104
106
|
:class="cn(
|
|
105
107
|
textfieldVariants({ variant: error ? 'error' : variant, size }),
|
|
106
|
-
'flex flex-1 items-center
|
|
108
|
+
'flex flex-1 items-center gap-2',
|
|
109
|
+
error
|
|
110
|
+
? 'border-lume-destructive ring-2 ring-lume-destructive/20 dark:border-lume-destructive/50 dark:ring-lume-destructive/40'
|
|
111
|
+
: 'focus-within:ring-2 focus-within:ring-lume-ring/25'
|
|
107
112
|
)"
|
|
108
113
|
>
|
|
109
|
-
<!-- Prepend-inner icon (inside, at start) -->
|
|
110
114
|
<component
|
|
111
115
|
v-if="prependInnerIcon"
|
|
112
116
|
:is="prependInnerIcon"
|
|
113
117
|
class="text-lume-muted-foreground flex shrink-0 items-center"
|
|
114
|
-
:class="
|
|
115
|
-
iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4',
|
|
116
|
-
'me-1.5'
|
|
117
|
-
]"
|
|
118
|
+
:class="iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4'"
|
|
118
119
|
/>
|
|
119
120
|
<input
|
|
120
121
|
:id="forId"
|
|
@@ -122,26 +123,21 @@ const getInputPaddingClass = () => {
|
|
|
122
123
|
:value="modelValue"
|
|
123
124
|
:placeholder="placeholder"
|
|
124
125
|
:disabled="disabled"
|
|
125
|
-
:aria-invalid="!!error"
|
|
126
126
|
:class="cn(
|
|
127
|
-
'flex-1 bg-transparent
|
|
127
|
+
'flex-1 bg-transparent placeholder:text-lume-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 w-full min-w-0 outline-none focus:outline-none focus-visible:outline-none',
|
|
128
128
|
getInputPaddingClass()
|
|
129
129
|
)"
|
|
130
130
|
:style="{ '--tf-padding-x': '0.625rem' }"
|
|
131
131
|
@input="onInput"
|
|
132
132
|
/>
|
|
133
|
-
<!-- Append-inner icon (inside, at end) -->
|
|
134
133
|
<component
|
|
135
134
|
v-if="appendInnerIcon"
|
|
136
135
|
:is="appendInnerIcon"
|
|
137
136
|
class="text-lume-muted-foreground flex shrink-0 items-center"
|
|
138
|
-
:class="
|
|
139
|
-
iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4',
|
|
140
|
-
'ms-1.5'
|
|
141
|
-
]"
|
|
137
|
+
:class="iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4'"
|
|
142
138
|
/>
|
|
143
139
|
</div>
|
|
144
|
-
|
|
140
|
+
|
|
145
141
|
<component
|
|
146
142
|
v-if="appendIcon"
|
|
147
143
|
:is="appendIcon"
|
|
@@ -149,8 +145,9 @@ const getInputPaddingClass = () => {
|
|
|
149
145
|
:class="iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4'"
|
|
150
146
|
/>
|
|
151
147
|
</FieldGroup>
|
|
148
|
+
|
|
152
149
|
<FieldDescription v-if="description && !error">{{ description }}</FieldDescription>
|
|
153
|
-
<p v-if="error" class="text-[0.8rem] font-medium text-destructive">
|
|
150
|
+
<p v-if="error" class="text-[0.8rem] font-medium text-lume-destructive">
|
|
154
151
|
{{ error }}
|
|
155
152
|
</p>
|
|
156
153
|
</Field>
|