bonkers-ui 1.0.29 → 1.0.31

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 +32 -26
  5. package/src/components/ui-radio-fancy/ui-radio-fancy.vue +34 -13
  6. package/src/components/ui-typography/ui-typography.vue +1 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bonkers-ui",
3
- "version": "1.0.29",
3
+ "version": "1.0.31",
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
+ BRAND = "brand",
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
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <label
3
- class="ui-radio grid cursor-pointer"
3
+ class="ui-radio grid cursor-pointer group grid-flow-col"
4
4
  :class="[
5
5
  slots.default && 'items-center gap-xs',
6
6
  (!justify || justify === EJustify.START) && 'justify-start',
@@ -19,13 +19,41 @@
19
19
  :name="name"
20
20
  :value="value"
21
21
  :disabled="disabled"
22
- class="appearance-none absolute"
22
+ class="appearance-none absolute peer"
23
23
  >
24
24
  <span
25
- class="ui-radio_custom block w-md h-md border border-secondary-alt rounded-full relative hover:border-secondary-alt-700 focus:border-secondary-alt-700"
25
+ class="
26
+ ui-radio_custom
27
+ relative
28
+ block
29
+ w-md
30
+ h-md
31
+ border
32
+ border-secondary-alt
33
+ rounded-full
34
+ bg-white
35
+ peer-disabled:border-secondary-alt-400
36
+ peer-disabled:bg-secondary-alt-200
37
+ peer-checked:border-primary
38
+ peer-checked:border-2
39
+ peer-checked:hover:border-primary-600
40
+ peer-focus:shadow-border-primary
41
+ group-hover:border-secondary-alt-700
42
+ group-focus:border-secondary-alt-700"
26
43
  :class="invertOrder && 'order-last'"
27
44
  >
28
- <span class="ui-radio__dot absolute top-2/4 left-2/4 w-xs h-xs block bg-primary rounded-full" />
45
+ <span
46
+ class="
47
+ ui-radio__dot
48
+ absolute
49
+ top-2/4
50
+ left-2/4
51
+ w-xs
52
+ h-xs
53
+ block
54
+ bg-primary
55
+ rounded-full"
56
+ />
29
57
  </span>
30
58
  <slot />
31
59
  </label>
@@ -57,43 +85,21 @@
57
85
  </script>
58
86
 
59
87
  <style>
60
- .ui-radio {
61
- grid-template-columns: auto auto;
62
- }
63
-
64
88
  .ui-radio__dot {
65
89
  transform: translate3d(-50%, -50%, 0) scale(0);
66
90
  transition: transform 0.2s ease-in-out;
67
91
  }
68
92
 
69
- input:disabled + .ui-radio_custom {
70
- border: 1px solid var(--color-secondary-alt-400);
71
- background-color: var(--color-secondary-alt-200);
72
- }
73
-
74
- input:focus + .ui-radio_custom {
75
- box-shadow: var(--shadow-border-primary);
76
- }
77
-
78
- input:checked + .ui-radio_custom {
79
- border: 2px solid var(--color-primary);
80
- }
81
-
82
93
  input:checked + .ui-radio_custom .ui-radio__dot {
83
94
  transform: translate3d(-50%, -50%, 0) scale(1);
84
95
  }
85
96
 
86
- input:checked + .ui-radio_custom:hover {
87
- border: 2px solid var(--color-primary-600);
88
- }
89
-
90
97
  input:checked + .ui-radio_custom:hover .ui-radio__dot {
91
98
  background-color: var(--color-primary-600);
92
99
  }
93
100
 
94
101
  input:checked:disabled + .ui-radio_custom {
95
102
  border: 2px solid var(--color-primary-300);
96
- background-color: var(--color-white);
97
103
  }
98
104
 
99
105
  input:checked:disabled + .ui-radio_custom .ui-radio__dot {
package/src/components/ui-radio-fancy/ui-radio-fancy.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <label
3
- class="ui-radio-fancy"
4
- :class="disabled && 'pointer-events-none opacity-50'"
3
+ class="ui-radio-fancy relative"
4
+ :class="disabled && 'pointer-events-none'"
5
5
  >
6
6
  <input
7
7
  v-model="radioModel"
@@ -22,19 +22,40 @@
22
22
  hover:border-secondary-alt-700
23
23
  cursor-pointer
24
24
  rounded-xl
25
- active:border-sm
26
- active:bg-secondary-alt-200
27
- peer-checked:active:outline-4
28
- peer-checked:active:outline
29
- peer-checked:active:outline-offset-4
30
25
  peer-checked:border-transparent
31
- active:outline
32
- active:outline-4
33
- active:outline-primary
34
- active:border-secondary-alt
26
+ peer-checked:active:shadow-border-primary
35
27
  peer-checked:hover:shadow-border-selected
36
- peer-checked:shadow-selected-shadow"
37
- :class="disabled && 'pointer-events-none opacity-50'"
28
+ peer-checked:shadow-selected-shadow
29
+ peer-focus:before:absolute
30
+ peer-focus:before:-top-xs
31
+ peer-focus:before:-bottom-xs
32
+ peer-focus:before:-left-xs
33
+ peer-focus:before:-right-xs
34
+ peer-focus:before:bg-primary-300
35
+ peer-focus:before:rounded-[20px]
36
+ peer-focus:before:box-border
37
+ peer-focus:before:-z-10
38
+ peer-active:before:absolute
39
+ peer-active:before:-top-xxs
40
+ peer-active:before:-bottom-xxs
41
+ peer-active:before:-left-xxs
42
+ peer-active:before:-right-xxs
43
+ peer-active:before:bg-primary-300
44
+ peer-active:before:rounded-[16px]
45
+ peer-active:before:box-border
46
+ peer-active:before:-z-10
47
+ active:bg-secondary-alt-200
48
+ active:before:absolute
49
+ active:before:-top-xs
50
+ active:before:-bottom-xs
51
+ active:before:-left-xs
52
+ active:before:-right-xs
53
+ active:before:bg-primary-300
54
+ active:before:rounded-[20px]
55
+ active:before:box-border
56
+ active:before:-z-10
57
+ "
58
+ :class="disabled && 'pointer-events-none'"
38
59
  >
39
60
  <ui-icon
40
61
  :icon-name="iconName"
package/src/components/ui-typography/ui-typography.vue CHANGED
@@ -84,7 +84,7 @@
84
84
  textTransform === ETextTransform.LOWERCASE && 'lowercase',
85
85
  textTransform === ETextTransform.UPPERCASE && 'uppercase',
86
86
 
87
- lineHeight && 'ui-typography_line-height',
87
+ lineHeight && 'leading-4',
88
88
  underline && 'underline',
89
89
  ]"
90
90
  >
@@ -107,9 +107,3 @@
107
107
  is?: string;
108
108
  }>();
109
109
  </script>
110
-
111
- <style scoped>
112
- .ui-typography_line-height {
113
- line-height: var(--base-line-height);
114
- }
115
- </style>