bonkers-ui 1.0.52 → 1.0.54

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bonkers-ui",
-    "version": "v1.0.52",
+    "version": "v1.0.54",
     "private": false,
     "scripts": {
         "storybook": "storybook dev -p 6006",

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

@@ -16,16 +16,11 @@ export default {
 			options: Object.values(EBadgeSize),
 			description: "The Element size",
 		},
-		more: {
-			control: { type: "boolean" },
-			description: "The Element more",
-		}
 	},
 	args: {
 		slot: "default text",
 		kind: EBadgeKind.PRIMARY,
 		size: EBadgeSize.SMALL,
-		more: false,
 	},
 };
 

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

@@ -1,14 +1,11 @@
 <template>
 	<div
-		class="ui-badge relative text-white"
-		:class="[
-			more && 'mr-sm',
-		]"
+		class="ui-badge relative text-white overflow-hidden"
 	>
 		<div class="relative z-[1] flex items-center content-center gap-xxs px-xs py-xxs">
 			<ui-icon
 				v-if="icon"
-				:size="ESize.SM"
+				:size="ESize.XS"
 				:icon-name="icon"
 			/>
 
@@ -26,16 +23,6 @@
 			</ui-typography>
 		</div>
 
-		<div
-			v-if="more"
-			class="absolute top-0 left-[15px] w-full h-full bg-primary-300 rounded-full border border-white"
-		/>
-
-		<div
-			v-if="more"
-			class="absolute top-0 left-xs w-full h-full bg-primary-400 rounded-full border border-white"
-		/>
-
 		<div
 			class="absolute rounded-full top-0 left-0 w-full h-full"
 			:class="[
@@ -44,7 +31,6 @@
 				kind === EBadgeKind.ERROR && 'bg-error-600',
 				kind === EBadgeKind.ACCENT && 'bg-accent-600',
 				elipsis && 'max-w-full',
-				more && 'border border-white',
 			]"
 		/>
 	</div>
@@ -62,7 +48,6 @@
 		kind?: EBadgeKind;
 		icon?: TIconName;
 		elipsis?: boolean;
-		more?: boolean;
 	}>();
 
 	const slots = useSlots();

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

@@ -28,8 +28,8 @@
 					<ui-icon
 						v-if="iconName"
 						:icon-name="iconName"
-						:size="ESize.MD"
-						class="text-secondary-700"
+						:size="ESize.SM"
+						class="text-secondary-400"
 					/>
 				</ui-icon-wrapper>
 			</slot>
@@ -39,8 +39,7 @@
 				:class="invertOrder && 'order-first'"
 			>
 				<ui-typography
-					:kind="EColors.SECONDARY"
-					:weight="ETextWeight.SEMI_BOLD"
+					:kind="EColors.SECONDARY_400"
 					class="mb-xxs"
 					line-height
 				>
@@ -63,7 +62,7 @@
 	import UiTypography from "../ui-typography";
 	import UiIcon from "../ui-icon";
 	import UiIconWrapper from "../ui-icon-wrapper";
-	import { ETypographySizes, ETextWeight } from "../ui-typography";
+	import { ETypographySizes } from "../ui-typography";
 	import { EColors } from "../../_types/colors";
 	import type { TIconName } from "../ui-icon";
 	import { ESize } from "../../_types/sizing";

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

@@ -60,6 +60,29 @@ const Template: Story<TComponentProps> = (args) => ({
 			</template>
 
 			<template #default>
+
+				<div
+					class="flex gap-xs items-center mb-xs"
+				>
+					<ui-icon
+						class="text-primary"
+						:size="ESize.SM"
+						:icon-name="['far', 'face-smile']"
+					/>
+
+					<ui-icon
+						class="text-primary"
+						:size="ESize.SM"
+						:icon-name="['far', 'face-smile']"
+					/>
+
+					<ui-icon
+						class="text-secondary-alt-300"
+						:size="ESize.SM"
+						:icon-name="['far', 'face-smile']"
+					/>
+				</div>
+
 				<div class="flex flex-wrap gap-xs mb-sm">
 					<ui-badge
 						v-for="item in ['Free bank tranfers']"
@@ -75,29 +98,6 @@ const Template: Story<TComponentProps> = (args) => ({
 					>
 						more...
 					</ui-badge>
-
-					<div
-						class="flex gap-xs items-center justify-center"
-						:style="{marginLeft: 'auto'}"
-					>
-						<ui-icon
-							class="text-primary"
-							:size="ESize.SM"
-							:icon-name="['far', 'face-smile']"
-						/>
-
-						<ui-icon
-							class="text-primary"
-							:size="ESize.SM"
-							:icon-name="['far', 'face-smile']"
-						/>
-
-						<ui-icon
-							class="text-secondary-alt-300"
-							:size="ESize.SM"
-							:icon-name="['far', 'face-smile']"
-						/>
-					</div>
 				</div>
 
 				<ul>
@@ -118,12 +118,13 @@ const Template: Story<TComponentProps> = (args) => ({
 					</ui-list-item>
 				</ul>
 
-				<ui-typography class="mb-sm" underline :size="ETypographySizes.SM" :kind="EColors.SECONDARY">
-					Some link
-				</ui-typography>
+				<div :style="{display: 'grid', gridTemplateColumns: '1fr 1fr'}" class="items-center gap-sm mb-sm">
+					<ui-typography underline :size="ETypographySizes.SM" :kind="EColors.ACCENT">
+						Full Details
+					</ui-typography>
 
-				<div :style="{display: 'grid', gridTemplateColumns: '1fr 1fr'}" class="items-center gap-sm">
 					<ui-typography
+						class="text-right"
 						:weight="ETextWeight.BOLD"
 						:size="ETypographySizes.XL"
 						:kind="EColors.SECONDARY"
@@ -136,9 +137,8 @@ const Template: Story<TComponentProps> = (args) => ({
 							Monthly fee
 						</ui-typography>
 					</ui-typography>
-
-					<ui-button full-width>Some text</ui-button>
 				</div>
+				<ui-button full-width>Some text</ui-button>
 			</template>
 		</ui-card-result>
 

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

@@ -9,5 +9,6 @@ export enum EInputType {
 	NUMBER = "number",
 	TEL = "tel",
 	PASSWORD = "password",
-	EMAIL = "email"
+	EMAIL = "email",
+	DATE = "date",
 }

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

@@ -22,7 +22,7 @@
 			<slot name="prefix-icon" />
 
 			<input
-				:autocomplete="autocomplete"
+				:autocomplete="getAutoComplete()"
 				:value="modelValue"
 				:pattern="pattern"
 				class="bg-transparent border-0 outline-none w-full placeholder:text-secondary-alt placeholder:italic"
@@ -55,7 +55,7 @@
 	import { EInputKinds, EInputType } from "./_typings";
 	import UiTypography, { ETypographySizes, EColors } from "../ui-typography";
 
-	withDefaults(defineProps<{
+	const props = withDefaults(defineProps<{
 		placeholder?: string;
 		modelValue: string | number;
 		disabled?: boolean;
@@ -71,7 +71,7 @@
 	}>(), {
 		modelValue: "",
 		placeholder: "",
-		autocomplete: "off",
+		autocomplete: "",
 		heading: undefined,
 		subLabel: undefined,
 		pattern: undefined,
@@ -84,4 +84,13 @@
 
 	defineEmits(["update:modelValue"]);
 
+	const getAutoComplete =()=> {
+		if(props.autocomplete !== "") return props.autocomplete;
+		switch(props.type) {
+			case EInputType.PASSWORD: return "current-password";
+			case EInputType.EMAIL: return "email";
+			default: return "off";
+		}
+	};
+
 </script>

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

@@ -35,8 +35,10 @@ const Template: Story<TComponentProps> = (args) => ({
 
 		return { args, modelValue };
 	},
-	template: `
-		<ui-input-range v-bind="args" v-model:modelValue="modelValue"/>
+	template: /*html*/`
+		<div :style="{border: '1px solid'}">
+			<ui-input-range v-bind="args" v-model:modelValue="modelValue"/>
+		</div>
 		<div>{{ modelValue }}</div>
 	`,
 });

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

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="ui-input-range relative h-lg mx-xs py-xs box-content"
+		class="ui-input-range relative h-lg py-xs box-content"
 	>
 		<input
 			ref="track"
@@ -12,11 +12,13 @@
 			:step="step"
 			@touchmove="moveHandler"
 		>
+
 		<div
-			class="ui-input-range__line h-xs w-full bg-secondary-alt rounded absolute left-0 -z-10 -translate-y-1/2"
+			class="h-xs w-full bg-secondary-alt rounded absolute top-1/2 left-0 -translate-y-1/2 pointer-events-none"
 		/>
+
 		<div
-			class="ui-input-range__line h-xs bg-primary rounded absolute left-0 -z-10 -translate-y-1/2"
+			class="h-xs bg-primary rounded absolute top-1/2 left-0 -translate-y-1/2 pointer-events-none"
 			:style="{
 				width: getPercentage + '%',
 			}"
@@ -42,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-	import { computed, ref } from "vue";
+	import { computed, ref, watch } from "vue";
 
 	const props = defineProps<{
 		modelValue: number;
@@ -64,6 +66,14 @@
 		}
 	});
 
+	watch(()=>[props.min, props.max], () => {
+		if(rangeModel.value < +props.min){
+			rangeModel.value = +props.min;
+		}else if(rangeModel.value > +props.max){
+			rangeModel.value = +props.max;
+		}
+	});
+
 	const track = ref();
 
 	const getPercentage = computed(() => {
@@ -93,7 +103,11 @@
 	};
 
 	const moveHandler = (e: MouseEvent | TouchEvent) => {
-		rangeModel.value = parseMouseMove(e) || 0;
+		const newValue = parseMouseMove(e);
+
+		if(newValue){
+			rangeModel.value = newValue;
+		}
 	};
 
 </script>
@@ -116,10 +130,6 @@
 		box-shadow: none;
 	}
 
-	.ui-input-range__line {
-		top: 50%;
-	}
-
 	.ui-input-range__thumb {
 		top: 50%;
 		border-width: 12px;

package/src/components/ui-radio-fancy/ui-radio-fancy.vue

@@ -86,7 +86,6 @@
 			<ui-typography
 				:size="ETypographySizes.SM"
 				:kind="EColors.SECONDARY"
-				:weight="ETextWeight.SEMI_BOLD"
 				class="pt-xxs"
 			>
 				<slot />

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

@@ -14,7 +14,7 @@
 	>
 		<ui-icon
 			v-if="iconName"
-			class="rounded-full mb-md"
+			class="mb-md"
 			:size="ESize.MD"
 			:icon-name="iconName"
 		/>

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

@@ -42,7 +42,7 @@
 	import UiTypography, { ETypographySizes, EColors } from "../ui-typography";
 
 	const props = defineProps<{
-		modelValue: string;
+		modelValue: string | number;
 		heading?: string;
 		subLabel?: string;
 		disabled?: boolean;

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

@@ -0,0 +1,5 @@
+export enum ETableKind {
+	DEFAULT = "default",
+	SECONDARY = "secondary",
+	SECONDARY_INVERTED = "secondary-inverted",
+}

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

@@ -1,18 +1,20 @@
-import UiTableRow, { ERowKind } from "./ui-table-row";
+import UiTableRow from "./ui-table-row";
 import UiTableCell from "./ui-table-cell";
 import UiTypography, { ETextWeight, ETypographySizes } from "../ui-typography";
+import UiTable from "./ui-table.vue";
+import { ETableKind } from "./_types";
 
 export default {
 	title: "Components/ui-table",
 	argTypes: {
 		kind: {
 			control: { type: "select" },
-			options: ["empty"].concat(Object.values(ERowKind)),
+			options: Object.values(ETableKind),
 			description: "The row kind",
 		},
 	},
 	args: {
-		kind: ERowKind.SECONDARY,
+		kind: ETableKind.DEFAULT,
 	},
 };
 
@@ -23,7 +25,8 @@ const Template = (args: MyComponentProps) => ({
 		// UiTable,
 		UiTableRow,
 		UiTableCell,
-		UiTypography
+		UiTypography,
+		UiTable
 	},
 	setup(){
 
@@ -48,18 +51,16 @@ const Template = (args: MyComponentProps) => ({
 		return{
 			ETextWeight,
 			ETypographySizes,
-			ERowKind,
 			args,
 			list
 		};
 	},
 	template:
 	/*html*/`
-		<table class='w-full'>
+		<ui-table class='w-full' :kind="args.kind">
 				<ui-table-row v-for="(row, index) in list"
 											:key="index"
-											rounded
-											:kind="index % 2 === 0 && args.kind">
+											rounded>
 					<ui-table-cell :weight='ETextWeight.SEMI_BOLD'>
 							{{row.text1}}
 					</ui-table-cell>
@@ -76,7 +77,7 @@ const Template = (args: MyComponentProps) => ({
 				 			</template>
 					</ui-table-cell>
 				</ui-table-row>
-		</table>
+		</ui-table>
 	`
 });
 

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

@@ -0,0 +1,33 @@
+<template>
+	<table
+		:class="[
+			'ui-table',
+			kind === ETableKind.SECONDARY && 'ui-table__secondary',
+			kind === ETableKind.SECONDARY_INVERTED && 'ui-table__secondary-inverted',
+		]"
+	>
+		<slot />
+	</table>
+</template>
+
+<script lang="ts" setup>
+	import { ETableKind } from "./_types";
+
+	withDefaults(defineProps<{
+		kind?: ETableKind;
+	}>(), {
+		kind: ETableKind.SECONDARY_INVERTED,
+	});
+</script>
+
+<style scoped>
+	.ui-table__secondary::v-deep tr:nth-child(odd){
+		background-color: var(--color-secondary-alt-200);
+		border-radius: var(--xs);
+	}
+
+	.ui-table__secondary-inverted::v-deep tr:nth-child(even){
+		background-color: var(--color-secondary-alt-200);
+		border-radius: var(--xs);
+	}
+</style>

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

@@ -4,7 +4,6 @@
 	>
 		<slot name="header">
 			<ui-typography
-				:weight="ETextWeight.BOLD"
 				line-height
 				class="mb-sm"
 			>