bonkers-ui 1.0.21 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "private": false,
   "scripts": {
     "storybook": "start-storybook -p 6006",

package/src/components/ui-card-result/ui-card-result.vue

@@ -24,7 +24,7 @@
 				<slot name="sidebar" />
 			</div>
 
-			<main class="p-sm bg-white w-full">
+			<main class="p-sm bg-white w-full overflow-hidden">
 				<ui-typography
 					v-if="header"
 					class="mb-xs"

package/src/components/ui-icon-wrapper/index.ts

@@ -1 +1,2 @@
 export { default } from "./ui-icon-wrapper.vue";
+export { EIconWrapperTypes } from "./_typings";

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

@@ -20,14 +20,13 @@
 			<slot name="prefix-icon" />
 
 			<input
-				class="bg-transparent border-0 outline-none w-full"
+				v-model="inputModel"
+				class="bg-transparent border-0 outline-none w-full placeholder:text-secondary-alt placeholder:italic"
 				:type="type || 'text'"
 				:placeholder="placeholder"
-				:value="modelValue"
 				:pattern="pattern"
 				:maxlength="maxlength"
 				:minlength="minlength"
-				@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
 			>
 
 			<slot name="postfix-icon" />
@@ -43,10 +42,11 @@
 </template>
 
 <script lang="ts" setup>
+	import { computed } from "vue";
 	import { EInputKinds, EInputType } from "./_typings";
 	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
 
-	defineProps<{
+	const props = defineProps<{
 		placeholder?: string;
 		modelValue: string;
 		disabled?: boolean;
@@ -59,12 +59,15 @@
 		minlength?: string;
 	}>();
 
-	defineEmits(["update:modelValue"]);
-</script>
+	const emit = defineEmits(["update:modelValue"]);
+
+	const inputModel = computed({
+		get() {
+			return props.modelValue;
+		},
+		set(value) {
+			emit("update:modelValue", value);
+		}
+	});
 
-<style scoped>
-	.ui-input__wrapper input::placeholder {
-		color: var(--color-secondary-alt-500);
-		font-style: italic;
-	}
-</style>
+</script>

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

@@ -1,4 +1,8 @@
 export enum EListItemTypes {
+	DEFAULT = "DEFAULT",
+	PROGRESS = "PROGRESS"
+}
+export enum EListItemSizes {
     DEFAULT = "DEFAULT",
-    PROGRESS = "PROGRESS"
+	COMPACT = "COMPACT"
 }

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

@@ -1,2 +1,3 @@
 export { default } from "./ui-list-item.vue";
 export { EListItemTypes } from "./_types";
+export { EListItemSizes } from "./_types";

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

@@ -1,6 +1,6 @@
 import UiListItem from "./ui-list-item.vue";
 import type { Story } from "@storybook/vue3";
-import { EListItemTypes } from "./_types";
+import { EListItemSizes, EListItemTypes } from "./_types";
 
 export default {
 	title: "Components/ui-list-item",
@@ -9,12 +9,27 @@ export default {
 		kind: {
 			control: { type: "select" },
 			options: Object.values(EListItemTypes),
-			description: "The Element title",
-		}
+			description: "The Element kind",
+		},
+		size: {
+			control: { type: "select" },
+			options: Object.values(EListItemSizes),
+			description: "The Element size"
+		},
+		title: {
+			control: { type: "text" },
+			description: "The Element title"
+		},
+		slot: {
+			control: { type: "text" },
+			description: "The slot text or component",
+		},
 	},
 	args: {
 		title: "default text",
-		kind: EListItemTypes.DEFAULT
+		kind: EListItemTypes.DEFAULT,
+		size: EListItemSizes.COMPACT,
+		slot: "default slot"
 	},
 };
 
@@ -27,9 +42,18 @@ const Template: Story<TComponentProps> = (args) => ({
 	},
 	template:/*html*/`
 			<ul>
-				<ui-list-item v-for= "item in 5" :key="item" :icon="['far', 'face-smile']" :title="args.title" :kind="args.kind" class="pb-md">
+				<ui-list-item :icon="['far', 'face-smile']" title="title only" :kind="args.kind" :size="args.size">
+					{{args.slot}}
+				</ui-list-item>
+
+				<ui-list-item :icon="['far', 'face-smile']" :kind="args.kind" :size="args.size">
+					text only
+				</ui-list-item>
+
+				<ui-list-item v-for= "item in 5" :key="item" :icon="['far', 'face-smile']" :title="args.title" :kind="args.kind" :size="args.size">
 					{{ args.title }}
 				</ui-list-item>
+				<ui-list-item class="compact-list-item"  :icon="['far', 'face-smile']" :size="args.size" :title="args.title">
 			</ul>
 	`,
 });

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

@@ -1,10 +1,17 @@
 
 <template>
-	<li class="ui-list-item flex gap-xs relative group">
+	<li
+		class="ui-list-item flex gap-xs relative group"
+		:class="[
+			size === EListItemSizes.DEFAULT && 'pb-md',
+			size === EListItemSizes.COMPACT && 'pb-xs'
+		]"
+	>
 		<div
 			v-if="kind===EListItemTypes.PROGRESS"
 			class="ui-list-item__line bg-primary-300 h-full absolute w-xxs left-xs -translate-x-2/4 top-sm group-last:hidden"
 		/>
+		
 		<ui-icon
 			v-if="icon"
 			:kind="pickKind"
@@ -12,14 +19,15 @@
 			:icon-name="icon"
 			:size="ESize.SM"
 		/>
-
-		<slot>
+		<div>
 			<ui-typography
+				v-if="title"
 				:weight="ETextWeight.SEMI_BOLD"
 			>
 				{{ title }}
 			</ui-typography>
-		</slot>
+			<slot />
+		</div>
 	</li>
 </template>
 
@@ -29,13 +37,17 @@
 	import UiTypography, { ETextWeight } from "../ui-typography";
 	import { ESize } from "../../_types/sizing";
 	import { EListItemTypes } from "./_types";
+	import { EListItemSizes } from "./_types";
 
 	const props = withDefaults(defineProps<{
-		icon: TIconName;
-		title: string;
-		kind?:EListItemTypes;
+		icon: TIconName
+		title?: string
+		kind?: EListItemTypes
+		size: EListItemSizes
 	}>(), {
-		kind: EListItemTypes.DEFAULT
+		kind: EListItemTypes.DEFAULT,
+		size: EListItemSizes.COMPACT,
+		title: ""
 	});
 
 	const pickKind = computed(()=>{