bonkers-ui 1.0.9 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",

package/src/components/ui-alert/_types.ts

@@ -0,0 +1,6 @@
+export enum EAlertTypes {
+	PRIMARY = "PRIMARY",
+	SECONDARY = "SECONDARY",
+	ERROR = "ERROR",
+	WARNING = "WARNING",
+}

package/src/components/ui-alert/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ui-alert.vue";
+export { EAlertTypes } from "./_types";

package/src/components/ui-alert/ui-alert.stories.ts

@@ -0,0 +1,38 @@
+import UiAlert from "./ui-alert.vue";
+import type { Story } from "@storybook/vue3";
+import { EAlertTypes } from "./_types";
+
+export default {
+	title: "Components/ui-alert",
+	component: UiAlert,
+	argTypes: {
+		kind: {
+			control: { type: "select" },
+			options: Object.values(EAlertTypes),
+			description: "The button kinds",
+		},
+	},
+	args: {
+		slot: "some description text: lorem",
+		kind: EAlertTypes.WARNING
+	}
+};
+
+type TComponentProps = InstanceType<typeof UiAlert>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiAlert },
+	setup() {
+		return { args };
+	},
+	template: `
+		<ui-alert
+			:kind="args.kind"
+			:icon="['far', 'face-smile']"
+		>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+		</ui-alert>
+	`
+});
+
+export const Default = Template.bind({});

package/src/components/ui-alert/ui-alert.vue

@@ -0,0 +1,40 @@
+<template>
+	<div
+		class="ui-alert flex gap-sm p-sm border rounded-lg"
+		:class="[
+			(!kind || kind === EAlertTypes.PRIMARY) && 'border-primary',
+			kind === EAlertTypes.WARNING && 'border-warning',
+			kind === EAlertTypes.ERROR && 'border-error',
+			kind === EAlertTypes.SECONDARY && 'border-secondary',
+		]"
+	>
+		<ui-icon
+			:icon-name="icon"
+			:size="ESize.SM"
+			:class="[
+				(!kind || kind === EAlertTypes.PRIMARY) && 'text-primary',
+				kind === EAlertTypes.WARNING && 'text-warning',
+				kind === EAlertTypes.ERROR && 'text-error',
+				kind === EAlertTypes.SECONDARY && 'text-secondary',
+			]"
+		/>
+		<ui-typography
+			:size="ETypographySizes.XS"
+			line-height
+		>
+			<slot />
+		</ui-typography>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import UiTypography, { ETypographySizes } from "../ui-typography";
+	import UiIcon, { type TIconName } from "../ui-icon";
+	import { ESize } from "../../_types/sizing";
+	import { EAlertTypes } from "./_types";
+
+	defineProps<{
+		icon: TIconName
+		kind?: EAlertTypes
+	}>();
+</script>

package/src/components/ui-badge/ui-badge.stories.ts

@@ -32,7 +32,7 @@ const Template: Story<TComponentProps> = (args) => ({
 		return { args };
 	},
 	template: `
-		<ui-badge :icon="['far', 'face-smile']" v-bind="args">
+		<ui-badge :icon="['far', 'face-smile']" v-bind="args" class="inline-flex">
 			{{ args.slot }}
 		</ui-badge>
 	`,

package/src/components/ui-badge/ui-badge.vue

@@ -1,6 +1,6 @@
 <template>
-	<span
-		class="ui-badge rounded-full inline-flex items-center"
+	<div
+		class="ui-badge rounded-full flex items-center content-center gap-xxs"
 		:class="[
 			(!size || size === EBadgeSize.SMALL) && 'px-xs py-xxs',
 			(!kind || kind === EBadgeKind.PRIMARY) && 'bg-primary-alt-300 text-primary-alt-700',
@@ -14,24 +14,23 @@
 	>
 		<ui-icon
 			v-if="icon"
-			class="mr-xxs"
 			:size="ESize.SM"
 			:icon-name="icon"
 		/>
 
 		<ui-typography
-			is="span"
+			v-if="slots.default"
 			:size="getBadgeSize"
 			:weight="ETextWeight.SEMI_BOLD"
 			class="whitespace-nowrap"
 		>
 			<slot />
 		</ui-typography>
-	</span>
+	</div>
 </template>
 
 <script lang="ts" setup>
-	import { computed } from "vue";
+	import { computed, useSlots } from "vue";
 	import { EBadgeKind, EBadgeSize } from "./_typings";
 	import UiIcon, { type TIconName } from "../ui-icon";
 	import { ESize } from "../../_types/sizing";
@@ -43,6 +42,8 @@
 		icon?: TIconName;
 	}>();
 
+	const slots = useSlots();
+
 	const getBadgeSize = computed(()=>{
 		switch (props.size) {
 			case EBadgeSize.MEDIUM:

package/src/components/ui-button/ui-button.vue

@@ -18,7 +18,7 @@
 			kind === EButtonTypes.LINK && 'text-accent-alt hover:text-accent-alt-600 active:text-accent-alt-700 disabled:text-accent-alt-300',
 			(!size || size === EButtonSizes.DEFAULT) && 'py-sm px-md',
 			size === EButtonSizes.SMALL && 'py-xs px-md',
-			size === EButtonSizes.MEDIUM && 'py-xs px-xs',
+			size === EButtonSizes.MEDIUM && 'py-sm px-sm',
 			size === EButtonSizes.LARGE && 'py-md px-md',
 			fullWidth && 'w-full',
 			disabled && 'pointer-events-none',

package/src/components/ui-card-result/ui-card-result.stories.ts

@@ -68,9 +68,8 @@ const Template: Story<TComponentProps> = (args) => ({
 						class="mb-xs"
 						:key="item"
 						:icon="['far', 'face-smile']"
-					>
-						Feature item {{ item }}
-					</ui-list-item>
+						:title="'Feature item ' + item"
+					/>
 				</ul>
 
 				<ui-typography

package/src/components/ui-checkbox/ui-checkbox.stories.ts

@@ -49,7 +49,7 @@ const Template: Story<TComponentProps> = (args) => ({
 	},
 	// And then the `args` are bound to your component with `v-bind="args"`
 	template: `
-		<ui-checkbox v-bind="args" v-model:modelValue="args.modelValue">
+		<ui-checkbox v-bind="args" v-model="modelValue">
 			${args.slot}
 		</ui-checkbox>
 	`,

package/src/components/ui-checkbox/ui-checkbox.vue

@@ -13,11 +13,11 @@
 		]"
 	>
 		<input
-			:checked="modelValue"
+			v-model="checkboxModel"
 			class="appearance-none absolute"
 			type="checkbox"
+			:value="value"
 			:disabled="disabled"
-			@input="$emit('update:modelValue', !!($event.target as HTMLInputElement)?.value)"
 		>
 		<span
 			class="ui-checkbox_custom w-md h-md flex items-center justify-center border border-secondary-alt-500 rounded relative hover:border-secondary-alt-700"
@@ -50,21 +50,32 @@
 </template>
 
 <script lang="ts" setup>
-	import { useSlots } from "vue";
+	import { useSlots, computed } from "vue";
 	import { EJustify } from "../../_types/align";
 
 	const slots = useSlots();
 
-	defineProps<{
-		modelValue: boolean;
+	const props = defineProps<{
+		modelValue: boolean | unknown[];
 		justify?: EJustify;
 		invertOrder?: boolean;
 		disabled?: boolean;
+		value?: string;
 	}>();
 
-	defineEmits<{
-		(e: "update:modelValue", state: boolean): void
+	const emit = defineEmits<{
+		(e: "update:modelValue", state: unknown): void
 	}>();
+
+	const checkboxModel = computed({
+		get() {
+			return props.modelValue;
+		},
+		set(value) {
+			emit("update:modelValue", value);
+		}
+	});
+
 </script>
 
 <style scoped>

package/src/components/ui-list-item/ui-list-item.stories.ts

@@ -1,33 +1,37 @@
-import UiIconList from "./ui-list-item.vue";
+import UiListItem from "./ui-list-item.vue";
 import type { Story } from "@storybook/vue3";
 
 export default {
 	title: "Components/ui-list-item",
-	component: UiIconList,
-	argTypes: {},
+	component: UiListItem,
+	argTypes: {
+		description: {
+			control: { type: "text" },
+			title: "The Element title",
+		}
+	},
 	args: {
-		slot: "default text",
+		slot: "some description text: lorem",
+		title: "default text",
 	}
 };
 
-type TComponentProps = InstanceType<typeof UiIconList>["$props"];
+type TComponentProps = InstanceType<typeof UiListItem>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiIconList },
+	components: { UiListItem },
 	setup() {
 		return { args };
 	},
 	template: `
-		<ul>
-			<ui-icon-list :icon="['far', 'face-smile']">
-				{{args.slot}}
-			</ui-icon-list>
-			<ui-icon-list :icon="['far', 'face-smile']">
-				{{args.slot}}
-			</ui-icon-list>
-			<ui-icon-list :icon="['far', 'face-smile']">
+		<ul class="grid gap-sm">
+			<ui-list-item :icon="['far', 'face-smile']" :title="args.title">
+			</ui-list-item>
+			<ui-list-item :icon="['far', 'face-smile']" :title="args.title">
 				{{args.slot}}
-			</ui-icon-list>
+			</ui-list-item>
+			<ui-list-item :icon="['far', 'face-smile']" :title="args.title">
+			</ui-list-item>
 		</ul>
 	`
 });

package/src/components/ui-list-item/ui-list-item.vue

@@ -1,5 +1,5 @@
 <template>
-	<li class="ui-icon-list">
+	<li class="ui-icon-list flex">
 		<ui-icon
 			v-if="icon"
 			class="mr-xs"
@@ -7,23 +7,30 @@
 			:icon-name="icon"
 		/>
 
-		<ui-typography
-			is="span"
-			:weight="ETextWeight.SEMI_BOLD"
-			:size="ETypographySizes.SM"
-		>
-			<slot />
-		</ui-typography>
+		<div>
+			<ui-typography
+				:weight="ETextWeight.SEMI_BOLD"
+			>
+				{{ title }}
+			</ui-typography>
+			<p
+				v-if="$slots.default"
+				class="mt-xs"
+			>
+				<slot />
+			</p>
+		</div>
 	</li>
 </template>
 
 <script lang="ts" setup>
 	import UiIcon, { type TIconName } from "../ui-icon";
 	import { ESize } from "../../_types/sizing";
-	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+	import UiTypography, { ETextWeight } from "../ui-typography";
 
 	defineProps<{
 		icon?: TIconName;
+		title?: string;
 	}>();
 
 </script>

package/src/components/ui-toggle/ui-toggle.stories.ts

@@ -37,7 +37,7 @@ const Template: Story<TComponentProps> = (args) => ({
 		return { args, modelValue };
 	},
 	template: `
-		<ui-toggle v-bind="args" v-model:model-value="modelValue" header="Header" :title="args.slot" />
+		<ui-toggle v-bind="args" v-model="modelValue" header="Header" :title="args.slot" />
 	`,
 });
 

package/src/components/ui-toggle/ui-toggle.vue

@@ -21,10 +21,10 @@
 				class="ui-input__input-wrapper block relative h-md"
 			>
 				<input
+					v-model="checkboxModel"
 					type="checkbox"
 					class="appearance-none absolute w-0 h-0 border-0"
-					:checked="modelValue"
-					@input="$emit('update:modelValue', !!($event.target as HTMLInputElement)?.value)"
+					:value="value"
 				>
 
 				<span class="ui-toggle__bg-block w-lg h-md bg-secondary-alt block rounded-full" />
@@ -60,19 +60,30 @@
 
 <script lang="ts" setup>
 	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+	import { computed } from "vue";
 
-	defineProps<{
+	const props = defineProps<{
 		header?: string;
 		title?: string;
-		modelValue: boolean;
+		modelValue: boolean | unknown[];
 		disabled?: boolean;
 		invertOrder?: boolean;
 		alignCenter?: boolean;
+		value?: string;
 	}>();
 
-	defineEmits<{
-		(e: "update:modelValue", state: boolean): void
+	const emit = defineEmits<{
+		(e: "update:modelValue", state: unknown): void
 	}>();
+
+	const checkboxModel = computed({
+		get() {
+			return props.modelValue;
+		},
+		set(value) {
+			emit("update:modelValue", value);
+		}
+	});
 </script>
 
 <style scoped>