bonkers-ui 1.0.38 → 1.0.40

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.
Files changed (9) hide show
  1. package/package.json +1 -1
  2. package/src/components/ui-card-result/ui-card-result.vue +20 -14
  3. package/src/components/ui-input/ui-input.vue +20 -15
  4. package/src/components/ui-list-item/ui-list-item.vue +1 -2
  5. package/src/components/ui-plain-radio/ui-plain-radio.vue +21 -16
  6. package/src/components/ui-select/ui-select.vue +19 -22
  7. package/src/components/ui-toggle/ui-toggle.vue +15 -11
  8. package/src/components/ui-typography/_typings.ts +2 -2
  9. package/src/components/ui-typography/ui-typography.vue +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bonkers-ui",
3
- "version": "1.0.38",
3
+ "version": "1.0.40",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "storybook": "start-storybook -p 6006",
package/src/components/ui-card-result/ui-card-result.vue CHANGED
@@ -16,22 +16,22 @@
16
16
  </ui-typography>
17
17
  </div>
18
18
 
19
- <div class="flex border border-secondary-alt-400 rounded-2xl overflow-hidden">
20
- <main class="p-sm bg-white w-full overflow-hidden">
21
- <div class="flex gap-xs justify-between items-center rounded-lg bg-secondary-alt-200 p-xs mb-sm">
22
- <ui-typography
23
- v-if="header"
24
- line-height
25
- class="flex-1 truncate"
26
- :size="ETypographySizes.SM"
27
- :weight="ETextWeight.SEMI_BOLD"
28
- >
29
- {{ header }}
30
- </ui-typography>
19
+ <div class="grid border border-secondary-alt-400 rounded-2xl overflow-hidden bg-white">
20
+ <div class="ui-card-result__header grid gap-xs justify-between items-center rounded-lg bg-secondary-alt-200 p-xs m-xs mb-sm">
21
+ <ui-typography
22
+ v-if="header"
23
+ line-height
24
+ class="flex-1 truncate"
25
+ :size="ETypographySizes.SM"
26
+ :weight="ETextWeight.SEMI_BOLD"
27
+ >
28
+ {{ header }}
29
+ </ui-typography>
31
30
 
32
- <slot name="sidebar" />
33
- </div>
31
+ <slot name="sidebar" />
32
+ </div>
34
33
 
34
+ <main class="p-sm w-full overflow-hidden bg-white">
35
35
  <slot />
36
36
  </main>
37
37
  </div>
@@ -67,3 +67,9 @@
67
67
  }>();
68
68
 
69
69
  </script>
70
+
71
+ <style scoped>
72
+ .ui-card-result__header {
73
+ grid-template-columns: 1fr auto;
74
+ }
75
+ </style>
package/src/components/ui-input/ui-input.vue CHANGED
@@ -1,12 +1,14 @@
1
1
  <template>
2
2
  <div class="ui-input">
3
- <ui-typography
4
- v-if="heading"
5
- :weight="ETextWeight.BOLD"
6
- class="mb-sm"
7
- >
8
- {{ heading }}
9
- </ui-typography>
3
+ <slot name="header">
4
+ <ui-typography
5
+ v-if="heading"
6
+ :weight="ETextWeight.BOLD"
7
+ class="mb-sm"
8
+ >
9
+ {{ heading }}
10
+ </ui-typography>
11
+ </slot>
10
12
  <label
11
13
  class="ui-input__wrapper flex w-full rounded-lg border bg-white items-center p-sm gap-xs"
12
14
  :class="[
@@ -33,13 +35,16 @@
33
35
 
34
36
  <slot name="postfix-icon" />
35
37
  </label>
36
- <ui-typography
37
- v-if="subLabel"
38
- :size="ETypographySizes.SM"
39
- class="mt-sm"
40
- >
41
- {{ subLabel }}
42
- </ui-typography>
38
+
39
+ <slot name="subLabel">
40
+ <ui-typography
41
+ v-if="subLabel"
42
+ :size="ETypographySizes.SM"
43
+ class="mt-sm"
44
+ >
45
+ {{ subLabel }}
46
+ </ui-typography>
47
+ </slot>
43
48
  </div>
44
49
  </template>
45
50
 
@@ -49,7 +54,7 @@
49
54
 
50
55
  withDefaults(defineProps<{
51
56
  placeholder?: string;
52
- modelValue: string;
57
+ modelValue: string | number;
53
58
  disabled?: boolean;
54
59
  kind?: EInputKinds;
55
60
  heading?: string;
package/src/components/ui-list-item/ui-list-item.vue CHANGED
@@ -15,7 +15,7 @@
15
15
  <slot name="icon">
16
16
  <ui-icon
17
17
  v-if="icon"
18
- class="bg-white z-[1] mt-[0.2em]"
18
+ class="bg-white z-[1]"
19
19
  :class="iconClass"
20
20
  :icon-name="icon"
21
21
  :size="ESize.SM"
@@ -26,7 +26,6 @@
26
26
  <ui-typography
27
27
  v-if="title"
28
28
  :weight="ETextWeight.SEMI_BOLD"
29
- line-height
30
29
  >
31
30
  {{ title }}
32
31
 
package/src/components/ui-plain-radio/ui-plain-radio.vue CHANGED
@@ -69,20 +69,25 @@
69
69
  />
70
70
 
71
71
  <span>
72
- <ui-typography
73
- :size="ETypographySizes.SM"
74
- :kind="EColors.SECONDARY"
75
- :weight="ETextWeight.SEMI_BOLD"
76
- line-height
77
- >
78
- {{ header }}
79
- </ui-typography>
80
- <ui-typography
81
- :size="ETypographySizes.XS"
82
- :kind="EColors.SECONDARY_ALT"
83
- >
84
- {{ subHeader }}
85
- </ui-typography>
72
+ <slot name="header">
73
+ <ui-typography
74
+ :size="ETypographySizes.SM"
75
+ :kind="EColors.SECONDARY"
76
+ :weight="ETextWeight.SEMI_BOLD"
77
+ line-height
78
+ >
79
+ {{ header }}
80
+ </ui-typography>
81
+ </slot>
82
+
83
+ <slot name="subHeader">
84
+ <ui-typography
85
+ :size="ETypographySizes.XS"
86
+ :kind="EColors.SECONDARY_ALT"
87
+ >
88
+ {{ subHeader }}
89
+ </ui-typography>
90
+ </slot>
86
91
  </span>
87
92
  </div>
88
93
  </label>
@@ -95,8 +100,8 @@
95
100
 
96
101
  const props = defineProps<{
97
102
  modelValue: string;
98
- header: string;
99
- subHeader: string;
103
+ header?: string;
104
+ subHeader?: string;
100
105
  name: string;
101
106
  value: string;
102
107
  disabled?: boolean;
package/src/components/ui-select/ui-select.vue CHANGED
@@ -1,12 +1,14 @@
1
1
  <template>
2
2
  <div class="ui-select">
3
- <ui-typography
4
- v-if="heading"
5
- :weight="ETextWeight.SEMI_BOLD"
6
- class="mb-sm"
7
- >
8
- {{ heading }}
9
- </ui-typography>
3
+ <slot name="heading">
4
+ <ui-typography
5
+ v-if="heading"
6
+ :weight="ETextWeight.SEMI_BOLD"
7
+ class="mb-sm"
8
+ >
9
+ {{ heading }}
10
+ </ui-typography>
11
+ </slot>
10
12
  <div
11
13
  class="relative rounded-lg border bg-white border-secondary-alt-500 hover:border-secondary-alt-700"
12
14
  :class="[disabled && 'pointer-events-none bg-secondary-alt-200 border-secondary-alt-300']"
@@ -18,17 +20,19 @@
18
20
  <slot />
19
21
  </select>
20
22
 
21
- <div class="ui-select__icon-wrapper absolute right-sm">
23
+ <div class="absolute right-sm top-1/2 -translate-y-1/2">
22
24
  <slot name="postfix-icon" />
23
25
  </div>
24
26
  </div>
25
- <ui-typography
26
- v-if="subLabel"
27
- :size="ETypographySizes.SM"
28
- class="mt-sm"
29
- >
30
- {{ subLabel }}
31
- </ui-typography>
27
+ <slot name="subLabel">
28
+ <ui-typography
29
+ v-if="subLabel"
30
+ :size="ETypographySizes.SM"
31
+ class="mt-sm"
32
+ >
33
+ {{ subLabel }}
34
+ </ui-typography>
35
+ </slot>
32
36
  </div>
33
37
  </template>
34
38
 
@@ -54,10 +58,3 @@
54
58
  }
55
59
  });
56
60
  </script>
57
-
58
- <style scoped>
59
- .ui-select__icon-wrapper {
60
- top: 50%;
61
- transform: translateY(-50%);
62
- }
63
- </style>
package/src/components/ui-toggle/ui-toggle.vue CHANGED
@@ -2,12 +2,14 @@
2
2
  <div
3
3
  class="ui-toggle"
4
4
  >
5
- <ui-typography
6
- :weight="ETextWeight.BOLD"
7
- class="mb-sm"
8
- >
9
- {{ header }}
10
- </ui-typography>
5
+ <slot name="header">
6
+ <ui-typography
7
+ :weight="ETextWeight.BOLD"
8
+ class="mb-sm"
9
+ >
10
+ {{ header }}
11
+ </ui-typography>
12
+ </slot>
11
13
 
12
14
  <label
13
15
  class="rounded-full cursor-pointer flex gap-sm"
@@ -49,11 +51,13 @@
49
51
  </span>
50
52
  </span>
51
53
 
52
- <ui-typography
53
- :size="ETypographySizes.SM"
54
- class="w-full"
55
- line-height
56
- >{{ title }}</ui-typography>
54
+ <slot name="title">
55
+ <ui-typography
56
+ :size="ETypographySizes.SM"
57
+ class="w-full"
58
+ line-height
59
+ >{{ title }}</ui-typography>
60
+ </slot>
57
61
  </label>
58
62
  </div>
59
63
  </template>
package/src/components/ui-typography/_typings.ts CHANGED
@@ -13,8 +13,8 @@ export enum ETypographySizes {
13
13
 
14
14
  export enum ETextWeight {
15
15
  LIGHT = "light", // 300
16
- REGULAR = "regular", // 400
17
- SEMI_BOLD = "semi_bold", // 600
16
+ REGULAR = "regular", // 500
17
+ SEMI_BOLD = "semi_bold", // 700
18
18
  BOLD = "bold", // 900
19
19
  }
20
20
 
package/src/components/ui-typography/ui-typography.vue CHANGED
@@ -73,7 +73,7 @@
73
73
  kind === EColors.SECONDARY_ALT_700 && 'text-secondary-alt-700',
74
74
 
75
75
  weight === ETextWeight.LIGHT && 'font-light',
76
- weight === ETextWeight.REGULAR && 'font-normal',
76
+ weight === ETextWeight.REGULAR && 'font-medium',
77
77
  weight === ETextWeight.SEMI_BOLD && 'font-bold',
78
78
  weight === ETextWeight.BOLD && 'font-black',
79
79