bonkers-ui 1.0.25 → 1.0.27

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/ui-button/ui-button.vue +14 -29
  3. package/src/components/ui-radio-fancy/ui-radio-fancy.vue +2 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bonkers-ui",
3
- "version": "1.0.25",
3
+ "version": "1.0.27",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "storybook": "start-storybook -p 6006",
package/src/components/ui-button/ui-button.vue CHANGED
@@ -1,10 +1,11 @@
1
1
  <template>
2
2
  <button
3
- class="ui-button justify-center grid text-base rounded-lg whitespace-nowrap font-bold leading-none touch-manipulation items-center"
3
+ class="ui-button grid justify-center items-center grid-flow-col text-base rounded-lg whitespace-nowrap font-bold leading-none touch-manipulation "
4
4
  :disabled="disabled"
5
5
  :class="[
6
6
  (!kind || kind === EButtonTypes.PRIMARY) && [primaryColor, primaryColorHover, primaryColorActive].join(' '),
7
- kind === EButtonTypes.SECONDARY && 'text-white bg-secondary hover:bg-secondary-600 active:bg-secondary-700 disabled:bg-secondary-300',
7
+ kind === EButtonTypes.SECONDARY
8
+ && 'text-white bg-secondary hover:bg-secondary-600 active:bg-secondary-700 disabled:bg-secondary-300',
8
9
  kind === EButtonTypes.WARNING && 'text-white bg-warning hover:bg-warning-600 active:bg-warning-700 disabled:bg-warning-300',
9
10
  kind === EButtonTypes.ERROR && 'text-white bg-error hover:bg-error-600 active:bg-error-700 disabled:bg-error-300',
10
11
  kind === EButtonTypes.PRIMARY_OVERLAY
@@ -20,35 +21,22 @@
20
21
  size === EButtonSizes.SMALL && 'py-xs px-md',
21
22
  size === EButtonSizes.MEDIUM && 'py-sm px-sm',
22
23
  size === EButtonSizes.LARGE && 'py-md px-md',
24
+ ($slots.default || $slots.postfix) && 'gap-sm',
23
25
  fullWidth && 'w-full',
24
26
  disabled && 'pointer-events-none',
25
27
  ]"
26
28
  >
27
- <span
28
- v-if="slots.prefix"
29
- class="ui-button__prefix"
30
- :class="(slots.default || slots.postfix) && 'mr-sm'"
31
- >
32
- <slot name="prefix" />
33
- </span>
29
+ <slot name="prefix" />
34
30
 
35
- <span>
36
- <slot />
37
- </span>
31
+ <slot />
38
32
 
39
- <span
40
- v-if="slots.postfix"
41
- class="ui-button__postfix"
42
- :class="(slots.default || slots.prefix) && 'ml-sm'"
43
- >
44
- <slot name="postfix" />
45
- </span>
33
+ <slot name="postfix" />
46
34
  </button>
47
35
  </template>
48
36
 
49
37
  <script lang="ts" setup>
50
38
  import { EButtonSizes, EButtonTypes } from "./_typings";
51
- import { useSlots } from "vue";
39
+
52
40
  type TProps = {
53
41
  kind?: EButtonTypes;
54
42
  size?: EButtonSizes;
@@ -56,17 +44,14 @@
56
44
  disabled?: boolean;
57
45
  }
58
46
 
59
- const slots = useSlots();
60
-
61
47
  const primaryColor = "text-white bg-primary disabled:bg-primary-300";
62
48
  const primaryColorHover = "hover:bg-primary-600 ";
63
49
  const primaryColorActive = "active:bg-primary-700 ";
64
50
 
65
- defineProps<TProps>();
51
+ withDefaults( defineProps<TProps>(), {
52
+ kind: EButtonTypes.PRIMARY,
53
+ size: EButtonSizes.DEFAULT,
54
+ fullWidth: false,
55
+ disabled: false,
56
+ });
66
57
  </script>
67
-
68
- <style>
69
- .ui-button {
70
- grid-template-columns: auto auto auto;
71
- }
72
- </style>
package/src/components/ui-radio-fancy/ui-radio-fancy.vue CHANGED
@@ -8,8 +8,7 @@
8
8
  type="radio"
9
9
  :name="name"
10
10
  :value="value"
11
- class="peer group fixed w-0"
12
- :class="disabled && 'pointer-events-none opacity-50'"
11
+ class="peer group appearance-none absolute"
13
12
  >
14
13
  <div
15
14
  class="
@@ -19,6 +18,7 @@
19
18
  py-sm px-sm
20
19
  border
21
20
  border-secondary-alt-500
21
+ bg-white
22
22
  hover:border-secondary-alt-700
23
23
  cursor-pointer
24
24
  rounded-xl
@@ -63,7 +63,6 @@
63
63
  modelValue: string;
64
64
  name: string;
65
65
  value: string | number;
66
- id: string;
67
66
  iconName: TIconName;
68
67
  disabled?: boolean;
69
68
  }>();