bonkers-ui 1.0.37 → 1.0.39

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 (10) hide show
  1. package/package.json +3 -3
  2. package/src/components/ui-card-result/ui-card-result.vue +14 -14
  3. package/src/components/ui-input/ui-input.vue +19 -14
  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-radio-fancy/ui-radio-fancy.vue +5 -3
  7. package/src/components/ui-select/ui-select.vue +19 -22
  8. package/src/components/ui-toggle/ui-toggle.vue +15 -11
  9. package/src/components/ui-typography/_typings.ts +2 -2
  10. 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.37",
3
+ "version": "1.0.39",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "storybook": "start-storybook -p 6006",
@@ -28,7 +28,7 @@
28
28
  "@storybook/addon-essentials": "^6.5.16",
29
29
  "@storybook/addon-links": "^6.5.16",
30
30
  "@storybook/addon-postcss": "^2.0.0",
31
- "@storybook/builder-vite": "^0.4.0",
31
+ "@storybook/builder-vite": "^0.2.7",
32
32
  "@storybook/vue3": "^6.5.16",
33
33
  "@typescript-eslint/eslint-plugin": "^5.50.0",
34
34
  "@typescript-eslint/parser": "^5.50.0",
@@ -51,7 +51,7 @@
51
51
  "tailwindcss": "^3.2.4",
52
52
  "ts-node": "^10.9.1",
53
53
  "typescript": "^4.9.5",
54
- "vite": "^4.1.0",
54
+ "vite": "^4.1.1",
55
55
  "vitest": "^0.28.3",
56
56
  "vue-eslint-parser": "^9.1.0",
57
57
  "vue-loader": "^17.0.1",
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="flex 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>
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
 
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-radio-fancy/ui-radio-fancy.vue CHANGED
@@ -96,7 +96,7 @@
96
96
  </template>
97
97
 
98
98
  <script lang="ts" setup>
99
- import { computed } from "vue";
99
+ import { computed, withDefaults } from "vue";
100
100
  import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
101
101
  import type { TIconName } from "../ui-icon";
102
102
  import { ESize } from "../../_types/sizing";
@@ -104,14 +104,16 @@
104
104
  import { ERadioSizes } from "./_typings";
105
105
  import uiIcon from "../ui-icon";
106
106
 
107
- const props = defineProps<{
107
+ const props = withDefaults(defineProps<{
108
108
  modelValue: string;
109
109
  name: string;
110
110
  value: string | number;
111
111
  iconName: TIconName;
112
112
  disabled?: boolean;
113
113
  radioSize?: ERadioSizes;
114
- }>();
114
+ }>(), {
115
+ radioSize: ERadioSizes.DEFAULT
116
+ });
115
117
  const emit = defineEmits(["update:modelValue"]);
116
118
  const radioModel = computed({
117
119
  get() {
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