bonkers-ui 1.0.30 → 1.0.32

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/ui-icon/_typings.ts +1 -0
  3. package/src/components/ui-list-item/ui-list-item.vue +14 -10
  4. package/src/components/ui-radio/ui-radio.vue +1 -1
  5. package/src/components/ui-radio-fancy/ui-radio-fancy.vue +30 -11
  6. package/src/components/ui-typography/ui-typography.vue +1 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bonkers-ui",
3
- "version": "1.0.30",
3
+ "version": "1.0.32",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "storybook": "start-storybook -p 6006",
package/src/components/ui-icon/_typings.ts CHANGED
@@ -5,6 +5,7 @@ export enum EIconType {
5
5
  FAL = "fal",
6
6
  FAD = "fad",
7
7
  FAT = "fat",
8
+ BRANDS = "brands",
8
9
  }
9
10
 
10
11
  export type TIconName = [EIconType, string];
package/src/components/ui-list-item/ui-list-item.vue CHANGED
@@ -1,33 +1,37 @@
1
1
 
2
2
  <template>
3
3
  <li
4
- class="ui-list-item flex gap-xs relative group"
4
+ class="ui-list-item grid grid-flow-col justify-start gap-xs relative group"
5
5
  :class="[
6
6
  size === EListItemSizes.DEFAULT && 'pb-md',
7
7
  size === EListItemSizes.COMPACT && 'pb-xs'
8
8
  ]"
9
9
  >
10
10
  <div
11
- v-if="kind===EListItemTypes.PROGRESS"
11
+ v-if="kind === EListItemTypes.PROGRESS"
12
12
  class="ui-list-item__line bg-primary-300 h-full absolute w-xxs left-xs -translate-x-2/4 top-sm group-last:hidden"
13
13
  />
14
14
 
15
- <ui-icon
16
- v-if="icon"
17
- class="bg-white text-primary"
18
- :icon-name="icon"
19
- :size="ESize.SM"
20
- />
15
+ <slot name="icon">
16
+ <ui-icon
17
+ v-if="icon"
18
+ class="bg-white"
19
+ :icon-name="icon"
20
+ :size="ESize.SM"
21
+ />
22
+ </slot>
21
23
 
22
- <div>
24
+ <span>
23
25
  <ui-typography
24
26
  v-if="title"
25
27
  :weight="ETextWeight.SEMI_BOLD"
28
+ line-height
26
29
  >
27
30
  {{ title }}
31
+
28
32
  </ui-typography>
29
33
  <slot />
30
- </div>
34
+ </span>
31
35
  </li>
32
36
  </template>
33
37
 
package/src/components/ui-radio/ui-radio.vue CHANGED
@@ -34,10 +34,10 @@
34
34
  bg-white
35
35
  peer-disabled:border-secondary-alt-400
36
36
  peer-disabled:bg-secondary-alt-200
37
- peer-focus:shadow-border-primary
38
37
  peer-checked:border-primary
39
38
  peer-checked:border-2
40
39
  peer-checked:hover:border-primary-600
40
+ peer-focus:shadow-border-primary
41
41
  group-hover:border-secondary-alt-700
42
42
  group-focus:border-secondary-alt-700"
43
43
  :class="invertOrder && 'order-last'"
package/src/components/ui-radio-fancy/ui-radio-fancy.vue CHANGED
@@ -8,13 +8,14 @@
8
8
  type="radio"
9
9
  :name="name"
10
10
  :value="value"
11
- class="peer group appearance-none absolute"
11
+ class="peer group appearance-none absolute invisible"
12
12
  >
13
13
  <div
14
14
  class="
15
15
  ui-radio-fancy__content
16
16
  box-border
17
17
  w-full
18
+ h-full
18
19
  py-sm px-sm
19
20
  border
20
21
  border-secondary-alt-500
@@ -22,20 +23,38 @@
22
23
  hover:border-secondary-alt-700
23
24
  cursor-pointer
24
25
  rounded-xl
25
- active:bg-secondary-alt-200
26
26
  peer-checked:border-transparent
27
27
  peer-checked:active:shadow-border-primary
28
28
  peer-checked:hover:shadow-border-selected
29
29
  peer-checked:shadow-selected-shadow
30
- peer-checked:before:absolute
31
- peer-checked:before:-top-xs
32
- peer-checked:before:-bottom-xs
33
- peer-checked:before:-left-xs
34
- peer-checked:before:-right-xs
35
- peer-checked:before:bg-primary-300
36
- peer-checked:before:rounded-[20px]
37
- peer-checked:before:box-border
38
- peer-checked:before:-z-10
30
+ peer-focus:before:absolute
31
+ peer-focus:before:-top-xs
32
+ peer-focus:before:-bottom-xs
33
+ peer-focus:before:-left-xs
34
+ peer-focus:before:-right-xs
35
+ peer-focus:before:bg-primary-300
36
+ peer-focus:before:rounded-[20px]
37
+ peer-focus:before:box-border
38
+ peer-focus:before:-z-10
39
+ peer-active:before:absolute
40
+ peer-active:before:-top-xxs
41
+ peer-active:before:-bottom-xxs
42
+ peer-active:before:-left-xxs
43
+ peer-active:before:-right-xxs
44
+ peer-active:before:bg-primary-300
45
+ peer-active:before:rounded-[16px]
46
+ peer-active:before:box-border
47
+ peer-active:before:-z-10
48
+ active:bg-secondary-alt-200
49
+ active:before:absolute
50
+ active:before:-top-xs
51
+ active:before:-bottom-xs
52
+ active:before:-left-xs
53
+ active:before:-right-xs
54
+ active:before:bg-primary-300
55
+ active:before:rounded-[20px]
56
+ active:before:box-border
57
+ active:before:-z-10
39
58
  "
40
59
  :class="disabled && 'pointer-events-none'"
41
60
  >
package/src/components/ui-typography/ui-typography.vue CHANGED
@@ -3,7 +3,6 @@
3
3
  :is="is || 'p'"
4
4
  class="ui-typography"
5
5
  :class="[
6
- 'leading-none',
7
6
  size === ETypographySizes.MD && 'text-md',
8
7
  size === ETypographySizes.XS && 'text-xs',
9
8
  size === ETypographySizes.SM && 'text-sm',
@@ -84,7 +83,7 @@
84
83
  textTransform === ETextTransform.LOWERCASE && 'lowercase',
85
84
  textTransform === ETextTransform.UPPERCASE && 'uppercase',
86
85
 
87
- lineHeight && 'ui-typography_line-height',
86
+ lineHeight ? 'leading-normal' : 'leading-none',
88
87
  underline && 'underline',
89
88
  ]"
90
89
  >
@@ -107,9 +106,3 @@
107
106
  is?: string;
108
107
  }>();
109
108
  </script>
110
-
111
- <style scoped>
112
- .ui-typography_line-height {
113
- line-height: var(--base-line-height);
114
- }
115
- </style>