bonkers-ui 1.0.55 → 1.0.56

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

@@ -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-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"

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

@@ -8,7 +8,9 @@ export default {
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
 		origin: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EBadgeOrigin),
 			description: "The Element origin",
 		}
@@ -22,9 +24,13 @@ export default {
 type TComponentProps = InstanceType<typeof UiNotificationBadge>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiNotificationBadge },
+	components: {
+		UiNotificationBadge 
+	},
 	setup() {
-		return { args };
+		return {
+			args 
+		};
 	},
 	template: /*html*/`
 		<div class="relative rounded-full bg-primary w-lg h-lg">

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

@@ -8,7 +8,9 @@ export default {
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
 		kind: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EOrderCardTypes),
 			description: "The Element kinds",
 		},
@@ -23,10 +25,14 @@ export default {
 type TComponentProps = InstanceType<typeof UiOrderCard>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiOrderCard },
+	components: {
+		UiOrderCard 
+	},
 	setup() {
 
-		return { args };
+		return {
+			args 
+		};
 	},
 
 	template: /*html*/`

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

@@ -74,7 +74,7 @@
 	});
 
 	const pickKind = computed(()=>{
-		switch(props.kind){
+		switch (props.kind) {
 			case EOrderCardTypes.WARNING: return EColors.WARNING_700;
 			default: return EColors.PRIMARY_700;
 		}

package/src/components/ui-plain-radio/ui-plain-radio.stories.ts

@@ -6,17 +6,25 @@ import { ref } from "vue";
 
 export default {
 	title: "Components/ui-plain-radio",
-	component: UiPlainRadio, ETypographySizes, EColors,
+	component: UiPlainRadio,
+	ETypographySizes,
+	EColors,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
 		disabled: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 		},
 		header: {
-			control: { type: "text" },
+			control: {
+				type: "text" 
+			},
 		},
 		subHeader: {
-			control: { type: "text" },
+			control: {
+				type: "text" 
+			},
 		}
 	},
 	args: {
@@ -29,12 +37,19 @@ export default {
 type TComponentProps = InstanceType<typeof UiPlainRadio>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiPlainRadio },
+	components: {
+		UiPlainRadio 
+	},
 
 	setup() {
 		const modelValue = ref("1");
 
-		return { modelValue, args, ETypographySizes, EColors };
+		return {
+			modelValue,
+			args,
+			ETypographySizes,
+			EColors 
+		};
 
 	},
 

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

@@ -12,15 +12,21 @@ export default {
 		// 	description: "The button kinds",
 		// },
 		min: {
-			control: { type: "number" },
+			control: {
+				type: "number" 
+			},
 			description: "The minimum value",
 		},
 		max: {
-			control: { type: "number" },
+			control: {
+				type: "number" 
+			},
 			description: "The maximum value",
 		},
 		current: {
-			control: { type: "number" },
+			control: {
+				type: "number" 
+			},
 		}
 	},
 } satisfies Meta<typeof UiProgress>;

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

@@ -9,16 +9,22 @@ 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",
 		},
 	},
@@ -34,12 +40,17 @@ type TComponentProps = InstanceType<typeof UiRadio>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
 	// Components used in your story `template` are defined in the `components` object
-	components: { UiRadio },
+	components: {
+		UiRadio 
+	},
 	// The story's `args` need to be mapped into the template through the `setup()` method
 	setup() {
 		const modelValue = ref("value4");
 
-		return { args, modelValue };
+		return {
+			args,
+			modelValue 
+		};
 	},
 	// And then the `args` are bound to your component with `v-bind="args"`
 	template: `

package/src/components/ui-radio-fancy/ui-radio-fancy.stories.ts

@@ -10,15 +10,21 @@ export default {
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
 		invertOrder: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "The Element order",
 		},
 		disabled: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "The full width size",
 		},
 		radioSize: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(ERadioSizes),
 			description: "The radio kinds",
 		},
@@ -34,11 +40,18 @@ export default {
 type TComponentProps = InstanceType<typeof UiRadioFancy>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiRadioFancy },
+	components: {
+		UiRadioFancy 
+	},
 	setup() {
 		const modelValue = ref("1");
 
-		return { modelValue, EIconType, args, ERadioSizes };
+		return {
+			modelValue,
+			EIconType,
+			args,
+			ERadioSizes 
+		};
 	},
 	template: /*html*/`
 		<div class="grid gap-sm" :style="{'grid-template-columns': 'repeat(auto-fit, minmax(160px, 1fr))'}">

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

@@ -5,11 +5,15 @@ export default {
 	component: UiResultCardRange,
 	argTypes: {
 		slot: {
-			control: { type: "text" },
+			control: {
+				type: "text" 
+			},
 			description: "The slot text or component",
 		},
 		title: {
-			control: { type: "text" },
+			control: {
+				type: "text" 
+			},
 			description: "The title text",
 		},
 	},
@@ -20,11 +24,15 @@ export default {
 };
 
 const Template = (args) => ({
-	components: { UiResultCardRange },
+	components: {
+		UiResultCardRange 
+	},
 	setup() {
-		return { args };
+		return {
+			args 
+		};
 	},
-	template:/*html*/`
+	template: /*html*/`
 		<ui-result-card-range :icon-name="['far', 'face-smile']" :title="args.title">
 			{{args.slot}}
 		</ui-result-card-range>
@@ -32,11 +40,15 @@ const Template = (args) => ({
 });
 
 const TemplateAll = (args) => ({
-	components: { UiResultCardRange },
+	components: {
+		UiResultCardRange 
+	},
 	setup() {
-		return { args };
+		return {
+			args 
+		};
 	},
-	template:/*html*/`
+	template: /*html*/`
     <div class="ui-result-card-range grid gap-sm w-full">
 
 		<ui-result-card-range style="grid-column: 1 / 1"
@@ -61,8 +73,6 @@ const TemplateAll = (args) => ({
     `,
 });
 
-export const singleCard = Template.bind({
-
-});
+export const SingleCard = Template.bind({});
 
 export const FullCard = TemplateAll.bind({});

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

@@ -9,17 +9,18 @@ export default {
 	component: UiRipple,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {},
-	args: {
-		// slot: "Some text",
-	},
 };
 
 type TComponentProps = InstanceType<typeof UiRipple>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiRipple },
+	components: {
+		UiRipple
+	},
 	setup() {
-		return { args };
+		return {
+			args
+		};
 	},
 	template: `
 		<div
@@ -34,9 +35,15 @@ const Template: Story<TComponentProps> = (args) => ({
 		`,
 });
 const Template2: Story<TComponentProps> = (args) => ({
-	components: { UiRipple, UiButton, UiTypography },
+	components: {
+		UiRipple,
+		UiButton,
+		UiTypography
+	},
 	setup() {
-		return { args };
+		return {
+			args
+		};
 	},
 	template: `
 		<div class="flex">

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

@@ -36,7 +36,7 @@
 	const inputsRefs = ref<VNodeRef>();
 
 	const animateRipple = (e:MouseEvent)=> {
-		if(tiBtn.value){
+		if (tiBtn.value) {
 			const pos = tiBtn.value.getBoundingClientRect();
 
 			ripples.value.push({

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

@@ -7,7 +7,9 @@ export default {
 	component: UiSelect,
 	argTypes: {
 		disabled: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "The Element disabled state",
 		}
 	},
@@ -19,11 +21,17 @@ export default {
 type TComponentProps = InstanceType<typeof UiSelect>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiSelect },
+	components: {
+		UiSelect 
+	},
 	setup() {
 		const list = ["Option 1", "Option 2", "Option 3"];
 		const valueModel = ref(list[0]);
-		return { args, valueModel, list };
+		return {
+			args,
+			valueModel,
+			list 
+		};
 	},
 	template: /*html*/`
 		<ui-select v-bind="args" v-model="valueModel" heading="Heading" subLabel="Sub Label">

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

@@ -1,2 +1,2 @@
 export { default } from "./ui-snackbar.vue";
-export { ESnackbarTypes }from "./_types";
+export { ESnackbarTypes } from "./_types";

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

@@ -8,12 +8,16 @@ export default {
 
 	argTypes: {
 		kind: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(ESnackbarTypes),
 			description: "The button kinds",
 		},
 		title: {
-			controls: { type: "text" },
+			controls: {
+				type: "text" 
+			},
 		},
 	}
 } satisfies Meta<typeof UiSnackbar>;

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

@@ -8,7 +8,9 @@ export default {
 	title: "Components/ui-table",
 	argTypes: {
 		kind: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(ETableKind),
 			description: "The row kind",
 		},
@@ -21,14 +23,14 @@ export default {
 type MyComponentProps = InstanceType<typeof UiTableRow>["$props"];
 
 const Template = (args: MyComponentProps) => ({
-	components:{
+	components: {
 		// UiTable,
 		UiTableRow,
 		UiTableCell,
 		UiTypography,
 		UiTable
 	},
-	setup(){
+	setup() {
 
 		const defaultList = {
 			text1: "some text",
@@ -48,7 +50,7 @@ const Template = (args: MyComponentProps) => ({
 			}
 		];
 
-		return{
+		return {
 			ETextWeight,
 			ETypographySizes,
 			args,

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

@@ -11,11 +11,17 @@ export default {
 type TComponentProps = InstanceType<typeof UiTabs>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiTabs },
+	components: {
+		UiTabs 
+	},
 	setup() {
 		const value = ref("Tab1");
 		const value2 = ref("Tab1");
-		return { args, value, value2 };
+		return {
+			args,
+			value,
+			value2 
+		};
 	},
 	template: `
 		<ui-tabs v-bind="args" :tabs="['Tab1', 'Tab2', 'Tab3']" v-model:modelValue="value" />