bonkers-ui 1.0.56 → 1.0.57

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 (5) hide show
  1. package/.eslintrc.js +1 -0
  2. package/package.json +1 -1
  3. package/src/components/ui-radio-fancy/_typings.ts +2 -1
  4. package/src/components/ui-radio-fancy/ui-radio-fancy.stories.ts +51 -35
  5. package/src/components/ui-radio-fancy/ui-radio-fancy.vue +11 -6
package/.eslintrc.js CHANGED
@@ -18,6 +18,7 @@ module.exports = {
18
18
  parser: "vue-eslint-parser",
19
19
  plugins: [
20
20
  "tailwindcss",
21
+ "eslint-plugin-storybook"
21
22
  ],
22
23
  overrides: [
23
24
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bonkers-ui",
3
- "version": "v1.0.56",
3
+ "version": "v1.0.57",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "storybook": "storybook dev -p 6006",
package/src/components/ui-radio-fancy/_typings.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export enum ERadioSizes {
2
2
  DEFAULT = "default",
3
- MINIMAL = "minimal"
3
+ MINIMAL = "minimal",
4
+ COMPACT = "compact"
4
5
  }
package/src/components/ui-radio-fancy/ui-radio-fancy.stories.ts CHANGED
@@ -1,65 +1,81 @@
1
1
  import { ERadioSizes } from "./_typings";
2
- import { ref } from "vue";
3
2
  import UiRadioFancy from "../ui-radio-fancy";
4
- import type { Story } from "@storybook/vue3";
5
- import { EIconType } from "../ui-icon/_typings";
3
+ import { ICON_DEFAULT } from "./../../CONSTANTS";
4
+ import UiTypography, { ETypographySizes } from "../ui-typography";
5
+ import type { Meta } from "@storybook/vue3";
6
+ import { ref } from "vue";
6
7
 
7
- export default {
8
+ const meta: Meta<typeof UiRadioFancy> = {
8
9
  title: "Components/ui-radio-fancy",
9
10
  component: UiRadioFancy,
10
11
  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
11
12
  argTypes: {
12
- invertOrder: {
13
- control: {
14
- type: "boolean"
15
- },
16
- description: "The Element order",
17
- },
18
13
  disabled: {
19
14
  control: {
20
- type: "boolean"
15
+ type: "boolean"
21
16
  },
22
17
  description: "The full width size",
23
18
  },
24
19
  radioSize: {
25
20
  control: {
26
- type: "select"
21
+ type: "select"
27
22
  },
28
23
  options: Object.values(ERadioSizes),
29
24
  description: "The radio kinds",
30
25
  },
31
26
  },
27
+ };
28
+
29
+ export default meta;
30
+
31
+ export const Default = {
32
32
  args: {
33
- slot: "Description",
33
+ iconName: ICON_DEFAULT,
34
+ default: "Description",
34
35
  invertOrder: false,
35
36
  disabled: false,
36
37
  radioSize: ERadioSizes.DEFAULT
37
38
  },
38
39
  };
39
40
 
40
- type TComponentProps = InstanceType<typeof UiRadioFancy>["$props"];
41
-
42
- const Template: Story<TComponentProps> = (args) => ({
43
- components: {
44
- UiRadioFancy
41
+ export const Compact = {
42
+ args: {
43
+ default: "1",
44
+ radioSize: ERadioSizes.COMPACT
45
45
  },
46
- setup() {
47
- const modelValue = ref("1");
48
46
 
49
- return {
50
- modelValue,
51
- EIconType,
52
- args,
53
- ERadioSizes
54
- };
55
- },
56
- template: /*html*/`
57
- <div class="grid gap-sm" :style="{'grid-template-columns': 'repeat(auto-fit, minmax(160px, 1fr))'}">
58
- <ui-radio-fancy v-for="item in 2" :key="item" :value="String(item)" v-model="modelValue" name="radio" title="title" :icon-name="[EIconType.FAR, 'face-smile']" :radioSize="args.radioSize" :disabled="args.disabled">
59
- {{args.slot}}
47
+ render: (args) => ({
48
+ components: {
49
+ UiRadioFancy,
50
+ UiTypography
51
+ },
52
+ setup() {
53
+ const modelValue = ref("1");
54
+ return {
55
+ args,
56
+ ETypographySizes,
57
+ modelValue
58
+ };
59
+ },
60
+ template: /*html*/`
61
+ <div class="flex gap-sm" :style="{}">
62
+ <ui-radio-fancy v-for="item in 2"
63
+ :key="item"
64
+ :value="String(item)"
65
+ v-model="modelValue"
66
+ name="radio" title="title"
67
+ :radioSize="args.radioSize"
68
+ :disabled="args.disabled"
69
+ >
70
+ <ui-typography :size="ETypographySizes.MD">
71
+ {{item}}
72
+ </ui-typography>
60
73
  </ui-radio-fancy>
61
74
  </div>
62
- `,
63
- });
64
-
65
- export const Default = Template.bind({});
75
+ `,
76
+ args: {
77
+ default: "1",
78
+ radioSize: ERadioSizes.COMPACT
79
+ },
80
+ }),
81
+ };
package/src/components/ui-radio-fancy/ui-radio-fancy.vue CHANGED
@@ -57,12 +57,13 @@
57
57
  :class="[
58
58
  disabled
59
59
  && 'pointer-events-none border-secondary-alt-400 peer-checked:shadow-border-primary-disabled',
60
- radioSize === ERadioSizes.DEFAULT && 'default',
61
- radioSize === ERadioSizes.MINIMAL && 'flex gap-sm align-middle'
60
+ radioSize === ERadioSizes.MINIMAL && 'flex gap-sm align-middle',
61
+ radioSize === ERadioSizes.COMPACT && 'grid cursor-pointer grid-flow-col px-md'
62
+
62
63
  ]"
63
64
  >
64
65
  <div
65
- v-if="radioSize === ERadioSizes.DEFAULT"
66
+ v-if="radioSize === ERadioSizes.DEFAULT && iconName"
66
67
  >
67
68
  <ui-icon
68
69
  :icon-name="iconName"
@@ -74,7 +75,7 @@
74
75
  ]"
75
76
  />
76
77
  </div>
77
- <div v-else-if="radioSize === ERadioSizes.MINIMAL">
78
+ <div v-else-if="radioSize === ERadioSizes.MINIMAL && iconName">
78
79
  <ui-icon
79
80
  :icon-name="iconName"
80
81
  :size="ESize.MD"
@@ -85,6 +86,9 @@
85
86
  />
86
87
 
87
88
  </div>
89
+ <div
90
+ v-else-if="radioSize === ERadioSizes.COMPACT"
91
+ />
88
92
  <ui-typography
89
93
  :size="ETypographySizes.SM"
90
94
  :kind="EColors.SECONDARY"
@@ -109,11 +113,12 @@
109
113
  modelValue: string | number | boolean;
110
114
  name: string;
111
115
  value: string | number | boolean;
112
- iconName: TIconName;
116
+ iconName?: TIconName;
113
117
  disabled?: boolean;
114
118
  radioSize?: ERadioSizes;
115
119
  }>(), {
116
- radioSize: ERadioSizes.DEFAULT
120
+ radioSize: ERadioSizes.DEFAULT,
121
+ iconName: undefined
117
122
  });
118
123
  const emit = defineEmits(["update:modelValue"]);
119
124
  const radioModel = computed({