bonkers-ui 1.0.4 → 1.0.7

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

@@ -9,7 +9,7 @@
 			justify === EJustify.BETWEEN && 'justify-between',
 			justify === EJustify.EVENLY && 'justify-evenly',
 			justify === EJustify.CENTER && 'justify-center',
-			className
+			disabled && 'pointer-events-none',
 		]"
 	>
 		<input
@@ -18,11 +18,12 @@
 			type="radio"
 			:name="name"
 			:value="value"
+			:disabled="disabled"
 			class="appearance-none absolute"
 			@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
 		>
 		<span
-			class="ui-radio_custom block w-md h-md border border-2 border-primary rounded-full relative"
+			class="ui-radio_custom block w-md h-md border border-secondary-alt rounded-full relative hover:border-secondary-alt-700 focus:border-secondary-alt-700"
 			:class="invertOrder && 'order-last'"
 		>
 			<span class="ui-radio__dot absolute top-2/4 left-2/4 w-xs h-xs block bg-primary rounded-full" />
@@ -37,18 +38,18 @@
 	const slots = useSlots();
 	const props = defineProps<{
 		modelValue: string;
-		className?: string;
 		name: string;
 		value: string;
 		justify?: EJustify;
 		invertOrder?: boolean;
+		disabled?: boolean;
 	}>();
 
 	defineEmits(["update:modelValue"]);
 
 	const localValue = ref(props.modelValue);
 
-	watch(()=>props.modelValue, (newValue)=>{
+	watch(() => props.modelValue, (newValue) => {
 		if(newValue !== localValue.value){
 			localValue.value = newValue;
 		}
@@ -65,7 +66,37 @@
 		transition: transform 0.2s ease-in-out;
 	}
 
+	input:disabled + .ui-radio_custom {
+		border: 1px solid var(--color-secondary-alt-400);
+		background-color: var(--color-secondary-alt-200);
+	}
+
+	input:focus + .ui-radio_custom {
+		box-shadow: var(--shadow-border-primary);
+	}
+
+	input:checked + .ui-radio_custom {
+		border: 2px solid var(--color-primary);
+	}
+
 	input:checked + .ui-radio_custom .ui-radio__dot {
 		transform: translate3d(-50%, -50%, 0) scale(1);
 	}
+
+	input:checked + .ui-radio_custom:hover {
+		border: 2px solid var(--color-primary-600);
+	}
+
+	input:checked + .ui-radio_custom:hover .ui-radio__dot {
+		background-color: var(--color-primary-600);
+	}
+
+	input:checked:disabled + .ui-radio_custom {
+		border: 2px solid var(--color-primary-300);
+		background-color: var(--color-white);
+	}
+
+	input:checked:disabled + .ui-radio_custom .ui-radio__dot {
+		background-color: var(--color-primary-300);
+	}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
 	<label
-		class="ui-radio-item block p-sm border border-secondary-alt rounded-2xl hover:border-primary hover:text-primary cursor-pointer"
+		class="ui-radio-item block p-sm border border-secondary-alt rounded-2xl hover:border-primary cursor-pointer"
 		:class="[
 			isActive && 'bg-primary text-white pointer-events-none',
 		]"
@@ -18,7 +18,7 @@
 		<ui-icon
 			:icon-name="iconName"
 			:size="ESize.MD"
-			class-name="mb-md"
+			class="mb-md"
 		/>
 		<ui-typography
 			:size="ETypographySizes.SM"
@@ -37,8 +37,7 @@
 	import { ESize } from "../../../_types/sizing";
 	import { EColors } from "../../../_types/colors";
 
-	const props = defineProps< {
-		className?: string;
+	const props = defineProps<{
 		modelValue: string;
 		name: string;
 		value: string;

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

@@ -1,18 +1,12 @@
 import { ref } from "vue";
 import UiRadioFancy from "./ui-radio-list-fancy.vue";
-import { Story } from "@storybook/vue3";
+import type { Story } from "@storybook/vue3";
 
 export default {
 	title: "Components/ui-radio-list-fancy",
 	component: UiRadioFancy,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
-
-	},
+	argTypes: {},
 	args: {},
 };
 

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

@@ -1,7 +1,6 @@
 <template>
 	<div
 		class="ui-radio-fancy grid gap-sm"
-		:class="className"
 	>
 		<ui-radio-item
 			v-for="(item, index) in items"
@@ -10,7 +9,7 @@
 			:title="item.title"
 			:value="String(index)"
 			:name="name"
-			:icon-name="['far','face-smile']"
+			:icon-name="[EIconType.FAR,'face-smile']"
 			@update:model-value="$emit('update:modelValue', $event)"
 		/>
 	</div>
@@ -19,9 +18,9 @@
 <script lang="ts" setup>
 	import UiRadioItem from "./ui-radio-item";
 	import { ref, watch } from "vue";
+	import { EIconType } from "../ui-icon/_typings";
 
 	const props = defineProps< {
-		className? : string;
 		name: string;
 		modelValue: string;
 	}>();
@@ -31,15 +30,15 @@
 	const items = [
 		{
 			title: "title",
-			iconName: ["far", "face-smile"],
+			iconName: [EIconType.FAR, "face-smile"],
 		},
 		{
 			title: "title",
-			iconName: ["far", "face-smile"],
+			iconName: [EIconType.FAR, "face-smile"],
 		},
 		{
 			title: "title",
-			iconName: ["far", "face-smile"],
+			iconName: [EIconType.FAR, "face-smile"],
 		},
 	];
 

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

@@ -2,18 +2,13 @@ import UiRipple from "./ui-ripple.vue";
 import UiButton from "../ui-button";
 import UiTypography from "../ui-typography";
 
-import { Story } from "@storybook/vue3";
+import type { Story } from "@storybook/vue3";
 
 export default {
 	title: "Components/ui-ripple",
 	component: UiRipple,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
-	},
+	argTypes: {},
 	args: {
 		// slot: "Some text",
 	},
@@ -45,7 +40,7 @@ const Template2: Story<TComponentProps> = (args) => ({
 	},
 	template: `
 		<div class="flex">
-		<ui-button class-name="relative">
+		<ui-button class="relative">
 			<ui-typography is="div">
 				<ui-ripple v-bind="args" />
 				hello world

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

@@ -2,7 +2,6 @@
 	<div
 		ref="tiBtn"
 		class="ui-ripple"
-		:class="className"
 		@click="animateRipple"
 	>
 		<slot />
@@ -36,10 +35,6 @@
 	const tiBtn = ref<HTMLDivElement>();
 	const inputsRefs = ref<VNodeRef>();
 
-	defineProps<{
-		className?: string;
-	}>();
-
 	const animateRipple = (e:MouseEvent)=> {
 		if(tiBtn.value){
 			const pos = tiBtn.value.getBoundingClientRect();

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

@@ -0,0 +1 @@
+export { default } from "./ui-select.vue";

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

@@ -0,0 +1,41 @@
+import UiSelect from "./ui-select.vue";
+import type { Story } from "@storybook/vue3";
+import { ref } from "vue";
+
+export default {
+	title: "Components/ui-select",
+	component: UiSelect,
+	argTypes: {
+		disabled: {
+			control: { type: "boolean" },
+			description: "The Element disabled state",
+		}
+	},
+	args: {
+		slot: "default text",
+		disabled: false,
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiSelect>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiSelect },
+	setup() {
+		const list = ["Option 1", "Option 2", "Option 3"];
+		const valueModel = ref(list[0]);
+		return { args, valueModel, list };
+	},
+	template: `
+		<ui-select v-bind="args" :list="list" v-model:value="valueModel" heading="heading" subLabel="subLabel">
+			{{ args.slot }}
+			<template #postfix-icon>
+				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<path d="M13.25 6.8125L8.5 11.2812C8.34375 11.4375 8.15625 11.5 8 11.5C7.8125 11.5 7.625 11.4375 7.46875 11.3125L2.71875 6.8125C2.40625 6.53125 2.40625 6.0625 2.6875 5.75C2.96875 5.4375 3.4375 5.4375 3.75 5.71875L8 9.71875L12.2188 5.71875C12.5312 5.4375 13 5.4375 13.2812 5.75C13.5625 6.0625 13.5625 6.53125 13.25 6.8125Z" fill="currentColor"/>
+				</svg>
+			</template>
+		</ui-select>
+	`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,68 @@
+<template>
+	<div class="ui-select">
+		<ui-typography
+			v-if="heading"
+			:weight="ETextWeight.SEMI_BOLD"
+			class="mb-sm"
+		>
+			{{ heading }}
+		</ui-typography>
+		<div
+			class="relative rounded-lg border bg-white border-secondary-alt-500 hover:border-secondary-alt-700"
+			:class="[disabled && 'pointer-events-none bg-secondary-alt-200 border-secondary-alt-300']"
+		>
+			<select
+				v-model="localModel"
+				class="appearance-none bg-transparent border-0 m-0 outline-0 w-full p-sm cursor-pointer italic text-secondary-alt"
+				@change=" $emit('update:value', ($event.target as HTMLTextAreaElement)?.value)"
+			>
+				<option
+					v-for="item in list"
+					:key="item"
+					:value="item"
+				>
+					{{ item }}
+				</option>
+			</select>
+
+			<div class="ui-select__icon-wrapper absolute right-sm">
+				<slot name="postfix-icon" />
+			</div>
+		</div>
+		<ui-typography
+			v-if="subLabel"
+			:size="ETypographySizes.SM"
+			class="mt-sm"
+		>
+			{{ subLabel }}
+		</ui-typography>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import { ref, watch } from "vue";
+	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+
+	const props = defineProps<{
+		list: string[];
+		value: string;
+		heading?: string;
+		subLabel?: string;
+		disabled?: boolean;
+	}>();
+
+	defineEmits(["update:value"]);
+
+	const localModel = ref(props.value);
+
+	watch(() => props.value, (value) => {
+		localModel.value = value;
+	});
+</script>
+
+<style scoped>
+	.ui-select__icon-wrapper {
+		top: 50%;
+		transform: translateY(-50%);
+	}
+</style>

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

@@ -0,0 +1 @@
+export { default } from "./ui-tabs.vue";

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

@@ -0,0 +1,27 @@
+import { ref } from "vue";
+import UiTabs from "./ui-tabs.vue";
+import type { Story } from "@storybook/vue3";
+
+export default {
+	title: "Components/ui-tabs",
+	component: UiTabs,
+	argTypes: {},
+};
+
+type TComponentProps = InstanceType<typeof UiTabs>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiTabs },
+	setup() {
+		const value = ref("Tab1");
+		const value2 = ref("Tab1");
+		return { args, value, value2 };
+	},
+	template: `
+		<ui-tabs v-bind="args" :tabs="['Tab1', 'Tab2', 'Tab3']" v-model:modelValue="value" />
+		<br/>
+		<ui-tabs v-bind="args" :tabs="['Tab1', 'Tab2']" v-model:modelValue="value2" />
+	`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,58 @@
+<template>
+	<ul class="ui-tabs bg-secondary-alt-200 rounded-full grid grid-flow-col">
+		<li
+			v-for="tab in tabs"
+			:key="tab"
+			class="rounded-full text-center"
+			:class="[localValue === tab && 'bg-white']"
+		>
+			<label class="block cursor-pointer py-xs px-md">
+				<input
+					v-model="localValue"
+					type="radio"
+					class="appearance-none"
+					:value="tab"
+					:name="name || 'default'"
+					@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
+				>
+				<ui-typography
+					is="span"
+					:size="ETypographySizes.XS"
+					:kind="localValue === tab?EColors.SECONDARY_500:EColors.SECONDARY_400"
+					:weight="ETextWeight.SEMI_BOLD"
+				>
+					{{ tab }}
+				</ui-typography>
+			</label>
+		</li>
+	</ul>
+</template>
+
+<script lang="ts" setup>
+	import { ref, watch } from "vue";
+	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+	import { EColors } from "../../_types/colors";
+
+	const props = defineProps<{
+		tabs: string[];
+		modelValue: string;
+		name: string;
+	}>();
+
+	defineEmits(["update:modelValue"]);
+
+	const localValue = ref(props.modelValue);
+
+	watch(() => props.modelValue, (newValue) => {
+		if(newValue !== localValue.value){
+			localValue.value = newValue;
+		}
+	});
+
+</script>
+
+<style scoped>
+	.ui-tabs {
+		padding: 2px;
+	}
+</style>

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

@@ -0,0 +1 @@
+export { default } from "./ui-toggle.vue";

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

@@ -0,0 +1,39 @@
+import UiToggle from "./ui-toggle.vue";
+import type { Story } from "@storybook/vue3";
+import { ref } from "vue";
+
+export default {
+	title: "Components/ui-toggle",
+	component: UiToggle,
+	argTypes: {
+		disabled: {
+			control: { type: "boolean" },
+			description: "The Element disabled state",
+		},
+		invertOrder: {
+			control: { type: "boolean" },
+			description: "The Element order state",
+		}
+	},
+	args: {
+		slot: "default text",
+		disabled: false,
+		invertOrder: false,
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiToggle>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiToggle },
+	setup() {
+		const modelValue = ref(false);
+
+		return { args, modelValue };
+	},
+	template: `
+		<ui-toggle v-bind="args" v-model:model-value="modelValue" header="Header" :title="args.slot" />
+	`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,127 @@
+<template>
+	<div
+		class="ui-toggle"
+	>
+		<ui-typography
+			:weight="ETextWeight.BOLD"
+			class="mb-sm"
+		>
+			{{ header }}
+		</ui-typography>
+
+		<label
+			class="rounded-full cursor-pointer flex gap-sm"
+			:class="[
+				disabled && 'pointer-events-none ui-toggle_disabled',
+				invertOrder && 'flex-row-reverse',
+			]"
+		>
+			<span class="ui-input__input-wrapper block relative h-md">
+				<input
+					type="checkbox"
+					class="appearance-none absolute w-0 h-0 border-0"
+					:checked="modelValue"
+					@input="$emit('update:modelValue', !!($event.target as HTMLInputElement)?.value)"
+				>
+
+				<span class="ui-toggle__bg-block w-lg h-md bg-secondary-alt block rounded-full" />
+
+				<span class="ui-toggle__dot block bg-white absolute top-0 rounded-full">
+					<svg
+						class="ui-toggle__check-icon absolute"
+						:class="disabled ? 'text-primary-300' : 'text-primary'"
+						width="16"
+						height="12"
+						viewBox="0 0 16 12"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M1 4.40106L6.60071 10.1135L15.1694 1.71245"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</span>
+			</span>
+
+			<ui-typography
+				:size="ETypographySizes.SM"
+				class="w-full"
+				line-height
+			>{{ title }}</ui-typography>
+		</label>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+
+	defineProps<{
+		header?: string;
+		title?: string;
+		modelValue: boolean;
+		disabled?: boolean;
+		invertOrder?: boolean;
+	}>();
+
+	defineEmits<{
+		(e: "update:modelValue", state: boolean): void
+	}>();
+</script>
+
+<style scoped>
+	.ui-toggle__dot {
+		top: 50%;
+		width: 22px;
+		height: 22px;
+		transform: translate3d(1px, -50%, 0);
+		transition: transform 0.2s ease-in-out;
+	}
+
+	.ui-toggle__check-icon {
+		top: 50%;
+		left: 50%;
+		transform: translate3d(-50%, -50%, 0);
+		stroke-dasharray: 70;
+		stroke-dashoffset: 70;
+		transition: stroke-dashoffset 0.2s ease-in-out;
+	}
+
+	.ui-toggle:hover .ui-toggle__dot,
+	.ui-toggle:active .ui-toggle__dot,
+	.ui-toggle:focus .ui-toggle__dot {
+		box-shadow: var(--shadow-border-secondary);
+	}
+
+	.ui-toggle input:checked ~ .ui-toggle__dot {
+		transform: translate3d(calc(var(--lg) - 100% - 1px), -50%, 0);
+	}
+
+	.ui-toggle:hover input:checked ~ .ui-toggle__dot,
+	.ui-toggle:active input:checked ~ .ui-toggle__dot,
+	.ui-toggle:focus input:checked ~ .ui-toggle__dot {
+		box-shadow: var(--shadow-border-primary);
+	}
+
+	.ui-toggle__bg-block {
+		transition: background-color 0.2s ease-in-out;
+	}
+
+	.ui-toggle_disabled .ui-toggle__bg-block {
+		background-color: var(--color-secondary-alt-300);
+	}
+
+	.ui-toggle input:checked ~ .ui-toggle__bg-block {
+		background-color: var(--color-primary);
+	}
+
+	.ui-toggle input:checked ~ .ui-toggle__dot .ui-toggle__check-icon {
+		stroke-dashoffset: 0;
+	}
+
+	.ui-toggle_disabled input:checked ~ .ui-toggle__bg-block {
+		background-color: var(--color-primary-300);
+	}
+</style>

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

@@ -2,7 +2,7 @@ export enum ETypographySizes {
 	XXS = "xxs",
 	XS = "xs",
 	SM = "sm",
-	M = "m",
+	MD = "m",
 	LG = "lg",
 	XL = "xl",
 	XXL = "2xl",
@@ -11,37 +11,11 @@ export enum ETypographySizes {
 	XXXXXL = "5xl",
 }
 
-export enum ETypographyColors {
-	PRIMARY = "primary",
-	PRIMARY_300 = "primary-300",
-	PRIMARY_400 = "primary-400",
-	PRIMARY_600 = "primary-600",
-	PRIMARY_700 = "primary-700",
-
-	SECONDARY = "secondary",
-	SECONDARY_300 = "secondary-300",
-	SECONDARY_400 = "secondary-400",
-	SECONDARY_600 = "secondary-600",
-	SECONDARY_700 = "secondary-700",
-
-	ERROR = "error",
-	ERROR_300 = "error-300",
-	ERROR_400 = "error-400",
-	ERROR_600 = "error-600",
-	ERROR_700 = "error-700",
-
-	WARNING = "warning",
-	WARNING_300 = "warning-300",
-	WARNING_400 = "warning-400",
-	WARNING_600 = "warning-600",
-	WARNING_700 = "warning-700",
-}
-
 export enum ETextWeight {
-	LIGHT = "light",
-	REGULAR = "regular",
-	SEMI_BOLD = "semi_bold",
-	BOLD = "bold",
+	LIGHT = "light", // 300
+	REGULAR = "regular", // 400
+	SEMI_BOLD = "semi_bold", // 600
+	BOLD = "bold", // 900
 }
 
 export enum ETextAlign {

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

@@ -1,2 +1,2 @@
 export { default } from "./ui-typography.vue";
-export { ETypographySizes, ETextWeight, ETextAlign } from "./_typings";
+export { ETypographySizes, ETextWeight, ETextAlign, ETextTransform } from "./_typings";