bonkers-ui 1.0.52 → 1.0.53
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/src/components/ui-badge/ui-badge.vue +2 -2
- package/src/components/ui-card-cta/ui-card-cta.vue +4 -5
- package/src/components/ui-input/_typings.ts +2 -1
- package/src/components/ui-input-range/ui-input-range.stories.ts +4 -2
- package/src/components/ui-input-range/ui-input-range.vue +5 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
class="ui-badge relative text-white"
|
|
3
|
+
class="ui-badge relative text-white overflow-hidden"
|
|
4
4
|
:class="[
|
|
5
5
|
more && 'mr-sm',
|
|
6
6
|
]"
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<div class="relative z-[1] flex items-center content-center gap-xxs px-xs py-xxs">
|
|
9
9
|
<ui-icon
|
|
10
10
|
v-if="icon"
|
|
11
|
-
:size="ESize.
|
|
11
|
+
:size="ESize.XS"
|
|
12
12
|
:icon-name="icon"
|
|
13
13
|
/>
|
|
14
14
|
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
<ui-icon
|
|
29
29
|
v-if="iconName"
|
|
30
30
|
:icon-name="iconName"
|
|
31
|
-
:size="ESize.
|
|
32
|
-
class="text-secondary-
|
|
31
|
+
:size="ESize.SM"
|
|
32
|
+
class="text-secondary-400"
|
|
33
33
|
/>
|
|
34
34
|
</ui-icon-wrapper>
|
|
35
35
|
</slot>
|
|
@@ -39,8 +39,7 @@
|
|
|
39
39
|
:class="invertOrder && 'order-first'"
|
|
40
40
|
>
|
|
41
41
|
<ui-typography
|
|
42
|
-
:kind="EColors.
|
|
43
|
-
:weight="ETextWeight.SEMI_BOLD"
|
|
42
|
+
:kind="EColors.SECONDARY_400"
|
|
44
43
|
class="mb-xxs"
|
|
45
44
|
line-height
|
|
46
45
|
>
|
|
@@ -63,7 +62,7 @@
|
|
|
63
62
|
import UiTypography from "../ui-typography";
|
|
64
63
|
import UiIcon from "../ui-icon";
|
|
65
64
|
import UiIconWrapper from "../ui-icon-wrapper";
|
|
66
|
-
import { ETypographySizes
|
|
65
|
+
import { ETypographySizes } from "../ui-typography";
|
|
67
66
|
import { EColors } from "../../_types/colors";
|
|
68
67
|
import type { TIconName } from "../ui-icon";
|
|
69
68
|
import { ESize } from "../../_types/sizing";
|
|
@@ -35,8 +35,10 @@ const Template: Story<TComponentProps> = (args) => ({
|
|
|
35
35
|
|
|
36
36
|
return { args, modelValue };
|
|
37
37
|
},
|
|
38
|
-
template:
|
|
39
|
-
<
|
|
38
|
+
template: /*html*/`
|
|
39
|
+
<div :style="{border: '1px solid'}">
|
|
40
|
+
<ui-input-range v-bind="args" v-model:modelValue="modelValue"/>
|
|
41
|
+
</div>
|
|
40
42
|
<div>{{ modelValue }}</div>
|
|
41
43
|
`,
|
|
42
44
|
});
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
class="ui-input-range relative h-lg
|
|
3
|
+
class="ui-input-range relative h-lg py-xs box-content"
|
|
4
4
|
>
|
|
5
5
|
<input
|
|
6
|
-
ref="track"
|
|
7
6
|
v-model.number="rangeModel"
|
|
8
7
|
class="appearance-none absolute top-0 left-0 cursor-pointer bg-transparent w-full h-full"
|
|
9
8
|
type="range"
|
|
@@ -12,11 +11,13 @@
|
|
|
12
11
|
:step="step"
|
|
13
12
|
@touchmove="moveHandler"
|
|
14
13
|
>
|
|
14
|
+
|
|
15
15
|
<div
|
|
16
|
-
class="
|
|
16
|
+
class="h-xs w-full bg-secondary-alt rounded absolute top-1/2 left-0 -translate-y-1/2 pointer-events-none"
|
|
17
17
|
/>
|
|
18
|
+
|
|
18
19
|
<div
|
|
19
|
-
class="
|
|
20
|
+
class="h-xs bg-primary rounded absolute top-1/2 left-0 -translate-y-1/2 pointer-events-none"
|
|
20
21
|
:style="{
|
|
21
22
|
width: getPercentage + '%',
|
|
22
23
|
}"
|
|
@@ -116,10 +117,6 @@
|
|
|
116
117
|
box-shadow: none;
|
|
117
118
|
}
|
|
118
119
|
|
|
119
|
-
.ui-input-range__line {
|
|
120
|
-
top: 50%;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
120
|
.ui-input-range__thumb {
|
|
124
121
|
top: 50%;
|
|
125
122
|
border-width: 12px;
|