bonkers-ui 1.0.27 → 1.0.28
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.
- package/package.json +1 -1
- package/src/components/ui-card-simple/index.ts +1 -1
- package/src/components/ui-icon/ui-icon.vue +5 -3
- package/src/components/ui-result-card-range/_types.ts +8 -0
- package/src/components/ui-result-card-range/index.ts +1 -0
- package/src/components/ui-result-card-range/ui-result-card-range.stories.ts +68 -0
- package/src/components/ui-result-card-range/ui-result-card-range.vue +46 -0
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default } from "./ui-card
|
|
1
|
+
export { default } from "./ui-result-card.vue";
|
|
@@ -18,8 +18,10 @@
|
|
|
18
18
|
import { ESize } from "../../_types/sizing";
|
|
19
19
|
import type { TIconName } from "./_typings";
|
|
20
20
|
|
|
21
|
-
defineProps<{
|
|
22
|
-
size
|
|
21
|
+
withDefaults(defineProps<{
|
|
22
|
+
size?: ESize;
|
|
23
23
|
iconName: TIconName;
|
|
24
|
-
}>()
|
|
24
|
+
}>(), {
|
|
25
|
+
size: ESize.SM
|
|
26
|
+
});
|
|
25
27
|
</script>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./ui-result-card-range.vue";
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import UiResultCardRange from "../ui-result-card-range";
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: "Components/ui-result-card-range",
|
|
5
|
+
component: UiResultCardRange,
|
|
6
|
+
argTypes: {
|
|
7
|
+
slot: {
|
|
8
|
+
control: { type: "text" },
|
|
9
|
+
description: "The slot text or component",
|
|
10
|
+
},
|
|
11
|
+
title: {
|
|
12
|
+
control: { type: "text" },
|
|
13
|
+
description: "The title text",
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
args: {
|
|
17
|
+
title: "This is a Title",
|
|
18
|
+
slot: "This is the body",
|
|
19
|
+
},
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const Template = (args) => ({
|
|
23
|
+
components: { UiResultCardRange },
|
|
24
|
+
setup() {
|
|
25
|
+
return { args };
|
|
26
|
+
},
|
|
27
|
+
template:/*html*/`
|
|
28
|
+
<ui-result-card-range :icon-name="['far', 'fa-face-smile']" :title="args.title">
|
|
29
|
+
{{args.slot}}
|
|
30
|
+
</ui-result-card-range>
|
|
31
|
+
`,
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
const TemplateAll = (args) => ({
|
|
35
|
+
components: { UiResultCardRange },
|
|
36
|
+
setup() {
|
|
37
|
+
return { args };
|
|
38
|
+
},
|
|
39
|
+
template:/*html*/`
|
|
40
|
+
<div class="ui-result-card-range grid gap-sm w-full">
|
|
41
|
+
|
|
42
|
+
<ui-result-card-range style="grid-column: 1 / 1"
|
|
43
|
+
:icon-name="['far', 'fa-face-smile']" :title="args.title">
|
|
44
|
+
{{args.slot}}
|
|
45
|
+
</ui-result-card-range>
|
|
46
|
+
|
|
47
|
+
<ui-result-card-range style="grid-column: 2 / 2"
|
|
48
|
+
:icon-name="['far', 'fa-face-smile']" :title="args.title">
|
|
49
|
+
{{args.slot}}
|
|
50
|
+
|
|
51
|
+
</ui-result-card-range>
|
|
52
|
+
|
|
53
|
+
<ui-result-card-range style="grid-column: 1 / 3; flex-direction: row; justify-content: space-between;">
|
|
54
|
+
|
|
55
|
+
<b>25/02/2022</b>
|
|
56
|
+
<b>→</b>
|
|
57
|
+
<b>26/01/2023</b>
|
|
58
|
+
|
|
59
|
+
</ui-result-card-range>
|
|
60
|
+
</div>
|
|
61
|
+
`,
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
export const singleCard = Template.bind({
|
|
65
|
+
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
export const FullCard = TemplateAll.bind({});
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="
|
|
4
|
+
ui-result-card-range
|
|
5
|
+
w-full
|
|
6
|
+
flex
|
|
7
|
+
flex-col
|
|
8
|
+
items-center
|
|
9
|
+
border
|
|
10
|
+
border-secondary-alt-300
|
|
11
|
+
bg-secondary-alt-200
|
|
12
|
+
rounded-2xl
|
|
13
|
+
text-secondary-500 p-md"
|
|
14
|
+
>
|
|
15
|
+
<ui-icon
|
|
16
|
+
v-if="iconName"
|
|
17
|
+
class="rounded-full mb-md"
|
|
18
|
+
:size="ESize.MD"
|
|
19
|
+
:icon-name="iconName"
|
|
20
|
+
/>
|
|
21
|
+
<ui-typography
|
|
22
|
+
v-if="title"
|
|
23
|
+
class="mb-xs"
|
|
24
|
+
:size="ETypographySizes.MD"
|
|
25
|
+
:weight="ETextWeight.BOLD"
|
|
26
|
+
:align="ETextAlign.CENTER"
|
|
27
|
+
>
|
|
28
|
+
{{ title }}
|
|
29
|
+
</ui-typography>
|
|
30
|
+
|
|
31
|
+
<slot />
|
|
32
|
+
</div>
|
|
33
|
+
</template>
|
|
34
|
+
|
|
35
|
+
<script lang="ts" setup>
|
|
36
|
+
import uiIcon, { ESize, type TIconName } from "../ui-icon";
|
|
37
|
+
import UiTypography, { ETextWeight, ETypographySizes, ETextAlign } from "../ui-typography";
|
|
38
|
+
|
|
39
|
+
defineProps<{
|
|
40
|
+
iconName?: TIconName;
|
|
41
|
+
title?: string;
|
|
42
|
+
size?: string;
|
|
43
|
+
description?: string;
|
|
44
|
+
}>();
|
|
45
|
+
|
|
46
|
+
</script>
|