@meistrari/tela-build 1.2.0 → 1.2.1
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/components/tela/button/button.vue +12 -7
- package/components/tela/icon-button/icon-button.vue +1 -1
- package/components/tela/input/tela-input.vue +1 -1
- package/components/tela/select-menu/select-menu-item.vue +1 -1
- package/components/tela/select-menu/select-menu-trigger.vue +2 -2
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { NuxtLink } from '#components'
|
|
3
3
|
|
|
4
4
|
export type ButtonSize = 'sm' | 'md' | 'lg'
|
|
5
|
-
export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'success' | 'danger'
|
|
5
|
+
export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'success' | 'danger' | 'ghost-danger'
|
|
6
6
|
|
|
7
7
|
export type ButtonProps = {
|
|
8
8
|
size?: ButtonSize
|
|
@@ -32,34 +32,39 @@ const sizeStyle = computed(() => (({
|
|
|
32
32
|
}) as Record<ButtonSize, string>)[resolvedSize.value] ?? '')
|
|
33
33
|
|
|
34
34
|
const variantStyle = computed(() => (({
|
|
35
|
-
primary: fold`
|
|
35
|
+
'primary': fold`
|
|
36
36
|
bg-gray-900 text-white
|
|
37
37
|
hover:bg-gray-800
|
|
38
38
|
active:bg-gray-700
|
|
39
39
|
focus-visible:ring-0.5px focus-visible:ring-cyan-600
|
|
40
40
|
`,
|
|
41
|
-
secondary: fold`
|
|
41
|
+
'secondary': fold`
|
|
42
42
|
bg-white text-gray-900 border-gray-300 border-0.5px
|
|
43
43
|
hover:bg-gray-50 hover:border-gray-300 hover:shadow-subtle
|
|
44
44
|
active:bg-gray-100 active:border-gray-400/60
|
|
45
45
|
focus-visible:ring-0.5px focus-visible:ring-cyan-600
|
|
46
46
|
`,
|
|
47
|
-
ghost: fold`
|
|
47
|
+
'ghost': fold`
|
|
48
48
|
bg-transparent text-gray-900
|
|
49
49
|
hover:bg-gray-100
|
|
50
50
|
focus-visible:ring-0.5px focus-visible:ring-cyan-600
|
|
51
51
|
`,
|
|
52
|
-
disabled: fold`
|
|
52
|
+
'disabled': fold`
|
|
53
53
|
bg-gray-100 text-gray-400 !cursor-not-allowed
|
|
54
54
|
`,
|
|
55
|
-
loading: fold`
|
|
55
|
+
'loading': fold`
|
|
56
56
|
bg-gray-200 text-gray-600
|
|
57
57
|
`,
|
|
58
|
-
danger: fold`
|
|
58
|
+
'danger': fold`
|
|
59
59
|
bg-red-100 text-red-500
|
|
60
60
|
hover:bg-red-100/80
|
|
61
61
|
focus:outline-red-600
|
|
62
62
|
`,
|
|
63
|
+
'ghost-danger': fold`
|
|
64
|
+
bg-transparent text-red-600
|
|
65
|
+
hover:bg-red-50 hover:text-red-700
|
|
66
|
+
focus:outline-red-600
|
|
67
|
+
`,
|
|
63
68
|
}) as Record<ButtonVariant | 'disabled' | 'loading', string>)[resolvedVariant.value] ?? '')
|
|
64
69
|
|
|
65
70
|
const resolvedStyle = computed(() => [
|
|
@@ -40,7 +40,7 @@ const style = computed(() => {
|
|
|
40
40
|
|
|
41
41
|
const color = ({
|
|
42
42
|
primary: 'bg-#01292F !text-white hover:bg-#153A40 b-#011D21 hover:b-#123137',
|
|
43
|
-
secondary: 'bg-transparent text-
|
|
43
|
+
secondary: 'bg-transparent text-icon hover:bg-gray-100 hover:text-gray-950 active:text-gray-800 disabled:bg-gray-100 disabled:!text-gray-300',
|
|
44
44
|
} as Record<typeof props.color, string>)[props.color]
|
|
45
45
|
|
|
46
46
|
const disabled = props.disabled && 'cursor-not-allowed !bg-#ECF0F2 !text-#617275 !b-0'
|
|
@@ -22,7 +22,7 @@ const forwardedProps = useForwardProps(delegatedProps)
|
|
|
22
22
|
v-bind="forwardedProps"
|
|
23
23
|
:class="
|
|
24
24
|
cn(
|
|
25
|
-
'relative flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-[12px]
|
|
25
|
+
'relative flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-[12px] pl-[10px] pr-[8px] py-[7px] text-body-14-medium font-460 outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
|
26
26
|
props.class,
|
|
27
27
|
)
|
|
28
28
|
"
|
|
@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps)
|
|
|
20
20
|
<SelectTrigger
|
|
21
21
|
v-bind="forwardedProps"
|
|
22
22
|
:class="cn(
|
|
23
|
-
'group flex h-32px w-full items-center gap-[12px] justify-between rounded-[10px] border-[0.5px] border-
|
|
23
|
+
'group flex h-32px w-full items-center gap-[12px] justify-between rounded-[10px] border-[0.5px] border-strong bg-white-1000 pl-[12px] pr-[8px] py-[7px] text-body-14-semibold font-520 select-none text-start',
|
|
24
24
|
'data-[placeholder]:text-gray-900 data-[state=open]:text-gray-500 hover:bg-gray-100 data-[state=open]:bg-gray-100 focus-visible:outline-none [&>span]:truncate',
|
|
25
25
|
'focus-visible:ring-[0.5px] focus-visible:ring-cyan-600 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:border-gray-200 disabled:text-gray-400',
|
|
26
26
|
props.class,
|
|
@@ -28,7 +28,7 @@ const forwardedProps = useForwardProps(delegatedProps)
|
|
|
28
28
|
>
|
|
29
29
|
<slot />
|
|
30
30
|
<SelectIcon as-child>
|
|
31
|
-
<TelaIcon name="i-ph-caret-down" :size="props.triggerIconSize" color="gray-500" class="shrink-0 transition-all ease-out duration-150 group-data-[state=open]:rotate-180" />
|
|
31
|
+
<TelaIcon name="i-ph-caret-down-bold" :size="props.triggerIconSize" color="gray-500" class="shrink-0 transition-all ease-out duration-150 group-data-[state=open]:rotate-180" />
|
|
32
32
|
</SelectIcon>
|
|
33
33
|
</SelectTrigger>
|
|
34
34
|
</template>
|