bonkers-ui 1.0.54 → 1.0.56

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

@@ -2,7 +2,7 @@
 	<div class="ui-card-result">
 		<div
 			v-if="exclusiveText"
-			class="bg-primary rounded-2xl px-sm pb-lg -mb-lg"
+			class="-mb-lg rounded-2xl bg-primary px-sm pb-lg"
 			@click="exclusiveClickAction"
 		>
 			<ui-typography
@@ -17,14 +17,27 @@
 			</ui-typography>
 		</div>
 
-		<div class="grid relative border border-secondary-alt-400 rounded-2xl overflow-hidden bg-white">
-			<div class="ui-card-result__header grid gap-xs justify-between items-center rounded-lg bg-secondary-alt-200 p-xs m-xs mb-sm">
+		<div class="relative grid overflow-hidden rounded-2xl border border-secondary-alt-400 bg-white">
+			<div
+				class="
+				ui-card-result__header
+				m-xs
+				mb-sm
+				grid
+				items-center
+				justify-between
+				gap-xs
+				rounded-lg
+				bg-secondary-alt-200
+				p-xs
+			"
+			>
 				<ui-typography
 					v-if="header"
 					line-height
-					class="flex-1 line-clamp"
+					class="line-clamp flex-1"
 					:size="ETypographySizes.SM"
-					:weight="ETextWeight.SEMI_BOLD"
+					:weight="ETextWeight.BOLD "
 					:kind="EColors.SECONDARY"
 				>
 					{{ header }}
@@ -33,14 +46,14 @@
 				<slot name="sidebar" />
 			</div>
 
-			<main class="p-sm pt-0 w-full overflow-hidden bg-white">
+			<main class="w-full overflow-hidden bg-white p-sm pt-0">
 				<slot />
 			</main>
 		</div>
 
 		<div
 			v-if="exclusiveTextBottom"
-			class="bg-secondary-alt-200 rounded-2xl px-sm pt-lg -mt-lg border border-secondary-alt-400"
+			class="-mt-lg rounded-2xl border border-secondary-alt-400 bg-secondary-alt-200 px-sm pt-lg"
 			@click="exclusiveBottomClickAction"
 		>
 			<ui-typography

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

@@ -13,9 +13,13 @@ export default {
 type TComponentProps = InstanceType<typeof UiCardSimple>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiCardSimple },
+	components: {
+		UiCardSimple 
+	},
 	setup() {
-		return { args };
+		return {
+			args 
+		};
 	},
 	template: /*html*/`
 

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

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="ui-card-simple rounded-3xl shadow-md py-md px-sm bg-white"
+		class="ui-card-simple rounded-3xl bg-white px-sm py-md shadow-md"
 	>
 		<ui-typography
 			v-if="slots.title"

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

@@ -9,20 +9,28 @@ export default {
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
 		justify: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EJustify),
 			description: "The Element justify",
 		},
 		invertOrder: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "The Element order",
 		},
 		disabled: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "The Element disabled state",
 		},
 		modelValue: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "The Element disabled state",
 		},
 
@@ -40,12 +48,17 @@ type TComponentProps = InstanceType<typeof UiCheckbox>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
 	// Components used in your story `template` are defined in the `components` object
-	components: { UiCheckbox },
+	components: {
+		UiCheckbox 
+	},
 	// The story's `args` need to be mapped into the template through the `setup()` method
 	setup() {
 		const modelValue = ref(true);
 
-		return { args, modelValue };
+		return {
+			args,
+			modelValue 
+		};
 	},
 	// And then the `args` are bound to your component with `v-bind="args"`
 	template: `

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

@@ -14,13 +14,25 @@
 	>
 		<input
 			v-model="checkboxModel"
-			class="appearance-none absolute"
+			class="absolute appearance-none"
 			type="checkbox"
 			:value="value"
 			:disabled="disabled"
 		>
 		<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"
+			class="
+				ui-checkbox_custom
+				relative
+				flex
+				h-md
+				w-md
+				items-center
+				justify-center
+				rounded
+				border
+				border-secondary-alt-500
+				hover:border-secondary-alt-700
+				"
 			:class="invertOrder && 'order-last'"
 		>
 			<svg
@@ -64,7 +76,7 @@
 	}>();
 
 	const emit = defineEmits<{
-		(e: "update:modelValue", state: unknown): void
+		(e: "update:modelValue", state: typeof props.modelValue): void
 	}>();
 
 	const checkboxModel = computed({

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

@@ -1,3 +1,3 @@
 export { default } from "./ui-icon.vue";
 export { ESize } from "../../_types/sizing";
-export type { TIconName }from "./_typings";
+export type { TIconName } from "./_typings";

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

@@ -8,7 +8,9 @@ export default {
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
 		size: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(ESize),
 			description: "The Element size",
 		}
@@ -23,10 +25,14 @@ type TComponentProps = InstanceType<typeof UiIcon>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
 	// Components used in your story `template` are defined in the `components` object
-	components: { UiIcon },
+	components: {
+		UiIcon 
+	},
 	// The story's `args` need to be mapped into the template through the `setup()` method
 	setup() {
-		return { args };
+		return {
+			args 
+		};
 	},
 	// And then the `args` are bound to your component with `v-bind="args"`
 	template: `

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

@@ -10,12 +10,16 @@ export default {
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
 		kind: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EIconWrapperTypes),
 			description: "The Icon Wrapper kinds",
 		},
 		size: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EIconWrapperSizes),
 			description: "The Icon Wrapper sizes",
 		}
@@ -28,9 +32,18 @@ export default {
 type TComponentProps = InstanceType<typeof UiIconWrapper>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiIconWrapper, UiIcon, UiNotificationBadge },
+	components: {
+		UiIconWrapper,
+		UiIcon,
+		UiNotificationBadge 
+	},
 	setup() {
-		return { args, EBadgeOrigin, EIconWrapperSizes, EIconWrapperTypes };
+		return {
+			args,
+			EBadgeOrigin,
+			EIconWrapperSizes,
+			EIconWrapperTypes 
+		};
 	},
 	template: /*html*/`
 		<ui-icon-wrapper :kind="EIconWrapperTypes.PRIMARY" v-bind="args" class="mb-sm">

package/src/components/ui-icon-wrapper/ui-icon-wrapper.vue

@@ -1,15 +1,15 @@
 <template>
 	<div
-		class="icon-wrapper w-fit h-fit grid place-items-center relative rounded-2xl"
+		class="icon-wrapper relative grid h-fit w-fit place-items-center rounded-2xl"
 		:class="[
-			kind === EIconWrapperTypes.PRIMARY && 'text-white bg-primary',
-			kind === EIconWrapperTypes.SECONDARY && 'text-black bg-secondary-alt-200',
-			kind === EIconWrapperTypes.DEFAULT && 'text-primary bg-white border-2 border-primary ',
+			kind === EIconWrapperTypes.PRIMARY && 'bg-primary text-white',
+			kind === EIconWrapperTypes.SECONDARY && 'bg-secondary-alt-200 text-black',
+			kind === EIconWrapperTypes.DEFAULT && 'border-2 border-primary bg-white text-primary ',
 
-			size === EIconWrapperSizes.DEFAULT && 'py-sm px-sm',
-			size === EIconWrapperSizes.SMALL && 'py-xs px-xs',
-			size === EIconWrapperSizes.MEDIUM && 'py-md px-md icon-wrapper_offset-md',
-			size === EIconWrapperSizes.LARGE && 'py-lg px-lg icon-wrapper_offset-lg',
+			size === EIconWrapperSizes.DEFAULT && 'p-sm',
+			size === EIconWrapperSizes.SMALL && 'p-xs',
+			size === EIconWrapperSizes.MEDIUM && 'icon-wrapper_offset-md p-md',
+			size === EIconWrapperSizes.LARGE && 'icon-wrapper_offset-lg p-lg',
 		]"
 	>
 		<slot />

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

@@ -10,21 +10,29 @@ export default {
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
 		placeholder: {
-			control: { type: "text" },
+			control: {
+				type: "text" 
+			},
 			description: "Placeholder",
 		},
 		kind: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EInputKinds),
 			description: "The input kinds",
 		},
 		type: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EInputType),
 			description: "The input type",
 		},
 		disabled: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "The Element disabled state",
 		},
 	},
@@ -39,12 +47,12 @@ export default {
 type MyComponentProps = InstanceType<typeof UiInput>["$props"];
 
 const Template: Story<MyComponentProps> = (args: MyComponentProps) => ({
-	components:{
+	components: {
 		UiInput
 	},
-	setup(){
+	setup() {
 		const valueModel = ref("");
-		return{
+		return {
 			args,
 			valueModel
 		};
@@ -55,14 +63,14 @@ const Template: Story<MyComponentProps> = (args: MyComponentProps) => ({
 });
 
 const TemplateAll: Story<MyComponentProps> = (args: MyComponentProps) => ({
-	components:{
+	components: {
 		UiInput,
 		Icon
 	},
-	setup(){
+	setup() {
 		const valueModel = ref("");
 
-		return{
+		return {
 			args,
 			valueModel
 		};

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

@@ -10,7 +10,7 @@
 			</ui-typography>
 		</slot>
 		<label
-			class="ui-input__wrapper flex w-full rounded-lg border bg-white items-center p-sm gap-xs"
+			class="ui-input__wrapper flex w-full items-center gap-xs rounded-lg border bg-white p-sm"
 			:class="[
 				kind === EInputKinds.SECONDARY && 'border-secondary-alt-500 hover:border-secondary-alt-700',
 				kind === EInputKinds.PRIMARY && 'border-primary',
@@ -25,7 +25,7 @@
 				:autocomplete="getAutoComplete()"
 				:value="modelValue"
 				:pattern="pattern"
-				class="bg-transparent border-0 outline-none w-full placeholder:text-secondary-alt placeholder:italic"
+				class="w-full border-0 bg-transparent outline-none placeholder:italic placeholder:text-secondary-alt"
 				:type="type"
 				:placeholder="placeholder"
 				:maxlength="maxlength"
@@ -85,8 +85,8 @@
 	defineEmits(["update:modelValue"]);
 
 	const getAutoComplete =()=> {
-		if(props.autocomplete !== "") return props.autocomplete;
-		switch(props.type) {
+		if (props.autocomplete !== "") return props.autocomplete;
+		switch (props.type) {
 			case EInputType.PASSWORD: return "current-password";
 			case EInputType.EMAIL: return "email";
 			default: return "off";

package/src/components/ui-input-range/ui-input-range.stories.ts

@@ -6,16 +6,22 @@ export default {
 	title: "Components/ui-input-range",
 	component: UiInputRange,
 	argTypes: {
-		min:{
-			control: { type: "number" },
+		min: {
+			control: {
+				type: "number" 
+			},
 			description: "The Element min value",
 		},
-		max:{
-			control: { type: "number" },
+		max: {
+			control: {
+				type: "number" 
+			},
 			description: "The Element max value",
 		},
-		step:{
-			control: { type: "number" },
+		step: {
+			control: {
+				type: "number" 
+			},
 			description: "The Element max value",
 		}
 	},
@@ -29,11 +35,16 @@ export default {
 type TComponentProps = InstanceType<typeof UiInputRange>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiInputRange },
+	components: {
+		UiInputRange 
+	},
 	setup() {
 		const modelValue = ref(50);
 
-		return { args, modelValue };
+		return {
+			args,
+			modelValue 
+		};
 	},
 	template: /*html*/`
 		<div :style="{border: '1px solid'}">

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

@@ -1,11 +1,11 @@
 <template>
 	<div
-		class="ui-input-range relative h-lg py-xs box-content"
+		class="ui-input-range relative box-content h-lg py-xs"
 	>
 		<input
 			ref="track"
 			v-model.number="rangeModel"
-			class="appearance-none absolute top-0 left-0 cursor-pointer bg-transparent w-full h-full"
+			class="absolute left-0 top-0 h-full w-full cursor-pointer appearance-none bg-transparent"
 			type="range"
 			:min="min"
 			:max="max"
@@ -14,11 +14,11 @@
 		>
 
 		<div
-			class="h-xs w-full bg-secondary-alt rounded absolute top-1/2 left-0 -translate-y-1/2 pointer-events-none"
+			class="pointer-events-none absolute left-0 top-1/2 h-xs w-full -translate-y-1/2 rounded bg-secondary-alt"
 		/>
 
 		<div
-			class="h-xs bg-primary rounded absolute top-1/2 left-0 -translate-y-1/2 pointer-events-none"
+			class="pointer-events-none absolute left-0 top-1/2 h-xs -translate-y-1/2 rounded bg-primary"
 			:style="{
 				width: getPercentage + '%',
 			}"
@@ -27,16 +27,16 @@
 		<div
 			class="
 				ui-input-range__thumb
-				w-xs
-				h-xs
-				bg-primary
+				pointer-events-none
 				absolute
-				border-white
-				rounded-full
 				box-content
-				-translate-y-1/2
+				h-xs
+				w-xs
 				-translate-x-1/2
-				pointer-events-none
+				-translate-y-1/2
+				rounded-full
+				border-white
+				bg-primary
 			"
 			:style="{left: getPercentage + '%'}"
 		/>
@@ -67,9 +67,9 @@
 	});
 
 	watch(()=>[props.min, props.max], () => {
-		if(rangeModel.value < +props.min){
+		if (rangeModel.value < +props.min) {
 			rangeModel.value = +props.min;
-		}else if(rangeModel.value > +props.max){
+		} else if (rangeModel.value > +props.max) {
 			rangeModel.value = +props.max;
 		}
 	});
@@ -81,7 +81,7 @@
 	});
 
 	const parseMouseMove = (e: MouseEvent | TouchEvent) => {
-		if(track.value){
+		if (track.value) {
 			const CLICK = "clientX";
 
 			const {
@@ -105,7 +105,7 @@
 	const moveHandler = (e: MouseEvent | TouchEvent) => {
 		const newValue = parseMouseMove(e);
 
-		if(newValue){
+		if (newValue) {
 			rangeModel.value = newValue;
 		}
 	};

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

@@ -7,26 +7,36 @@ export default {
 	component: UiListItem,
 	argTypes: {
 		kind: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EListItemTypes),
 			description: "The Element kind",
 		},
 		size: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EListItemSize),
 			description: "The Element size"
 		},
 		spacing: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EListItemSpacing),
 			description: "The Element spacing"
 		},
 		title: {
-			control: { type: "text" },
+			control: {
+				type: "text" 
+			},
 			description: "The Element title"
 		},
 		slot: {
-			control: { type: "text" },
+			control: {
+				type: "text" 
+			},
 			description: "The slot text or component",
 		},
 	},
@@ -40,11 +50,16 @@ export default {
 };
 
 export const Default = (args) => ({
-	components: { UiListItem },
+	components: {
+		UiListItem 
+	},
 	setup() {
-		return { args, ICON_DEFAULT };
+		return {
+			args,
+			ICON_DEFAULT 
+		};
 	},
-	template:/*html*/`
+	template: /*html*/`
 			<ul>
 				<ui-list-item v-bind="args" :icon="ICON_DEFAULT" title="title only" icon-class="text-secondary-alt" />
 

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

@@ -1,7 +1,7 @@
 
 <template>
 	<li
-		class="ui-list-item grid grid-flow-col justify-start gap-xs relative group text-secondary"
+		class="ui-list-item group relative grid grid-flow-col justify-start gap-xs text-secondary"
 		:class="[
 			size === EListItemSize.SM && 'text-sm',
 			size === EListItemSize.MD && 'text-md',
@@ -11,7 +11,17 @@
 	>
 		<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"
+			class="
+				ui-list-item__line
+				absolute
+				left-xs
+				top-sm
+				h-full
+				w-xxs
+				-translate-x-2/4
+				bg-primary-300
+				group-last:hidden
+			"
 		/>
 
 		<slot name="icon">
@@ -48,6 +58,7 @@
 	import UiTypography, { ETextWeight } from "../ui-typography";
 	import { ESize } from "../../_types/sizing";
 	import { EListItemTypes, EListItemSpacing, EListItemSize } from "./_types";
+	import { HTMLAttributes } from "vue";
 
 	withDefaults(defineProps<{
 		icon?: TIconName
@@ -55,7 +66,7 @@
 		kind?: EListItemTypes
 		size?: EListItemSize
 		spacing?: EListItemSpacing
-		iconClass?: string
+		iconClass?: HTMLAttributes["class"]
 	}>(), {
 		kind: EListItemTypes.DEFAULT,
 		size: EListItemSize.SM,

package/src/components/ui-modal/ui-backdrop/ui-backdrop.vue

@@ -4,10 +4,10 @@
 			class="
 				backdrop-color
 				fixed
-				backdrop-blur-sm
-				transition-all
 				inset-0
 				z-0
+				backdrop-blur-sm
+				transition-all
 				"
 		/>
 

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

@@ -12,16 +12,22 @@ export default {
 	component: UiModal,
 	argTypes: {
 		title: {
-			control: { type: "text" },
+			control: {
+				type: "text" 
+			},
 			description: "The modal title text",
 		},
 		modalSize: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EModalSizes),
 			description: "The modal kinds",
 		},
 		modalVisible: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "Control Modal Visibility",
 		},
 
@@ -36,11 +42,20 @@ export default {
 type TComponentProps = InstanceType<typeof UiModal>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiModal, UiBackdrop, UiButton, UiIcon, UiTypography },
+	components: {
+		UiModal,
+		UiBackdrop,
+		UiButton,
+		UiIcon,
+		UiTypography 
+	},
 	setup() {
-		return { args, ESize };
+		return {
+			args,
+			ESize 
+		};
 	},
-	template:/*html*/`
+	template: /*html*/`
 			<ui-modal
 					class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
 					:title="args.title"