bonkers-ui 1.0.17 → 1.0.19

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

@@ -0,0 +1,38 @@
+import UiNotificationBadge from ".";
+import type { Story } from "@storybook/vue3";
+import { EBadgeOrigin } from "./_types";
+
+export default {
+	title: "Components/ui-notification-badge",
+	component: UiNotificationBadge,
+	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+	argTypes: {
+		origin: {
+			control: { type: "select" },
+			options: Object.values(EBadgeOrigin),
+			description: "The Element origin",
+		}
+	},
+	args: {
+		slot: "1",
+		origin: EBadgeOrigin.OFFSET_TOP_RIGHT,
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiNotificationBadge>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiNotificationBadge },
+	setup() {
+		return { args };
+	},
+	template: /*html*/`
+		<div class="relative rounded-full bg-primary w-lg h-lg">
+			<ui-notification-badge :origin="args.origin">
+				{{args.slot}}
+			</ui-notification-badge>
+		</div>
+		`
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,28 @@
+<template>
+	<div
+		class="notification-badge absolute min-w-sm h-sm font-bold text-xxs rounded-full border border-white text-white bg-error text-center leading-none"
+		:class="[
+			origin === EBadgeOrigin.DEFAULT && 'top-0 right-0',
+			origin === EBadgeOrigin.OFFSET_TOP_RIGHT && '-top-xxs -right-xxs',
+		]"
+	>
+		<slot />
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import { EBadgeOrigin } from "./_types";
+
+	withDefaults(defineProps<{
+		origin?: EBadgeOrigin,
+	}>(),{
+		origin: EBadgeOrigin.DEFAULT,
+	});
+
+</script>
+
+<style>
+	.notification-badge {
+		padding: 2px;
+	}
+</style>

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

@@ -0,0 +1,4 @@
+export enum EOrderCardTypes {
+    DEFAULT = "DEFAULT",
+    WARNING = "WARNING"
+}

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

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

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

@@ -0,0 +1,51 @@
+import UiOrderCard from "./ui-order-card.vue";
+import type { Story } from "@storybook/vue3";
+import { EOrderCardTypes } from "./_types";
+
+export default {
+	title: "Components/ui-order-card",
+	component: UiOrderCard,
+	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+	argTypes: {
+		kind: {
+			control: { type: "select" },
+			options: Object.values(EOrderCardTypes),
+			description: "The Element kinds",
+		},
+	},
+
+	args: {
+		slot: "But we still need your gas and electricity meter readings before processing it.",
+		kind: EOrderCardTypes.DEFAULT
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiOrderCard>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiOrderCard },
+	setup() {
+
+		return { args };
+	},
+
+	template: /*html*/`
+		<ui-order-card v-bind="args" :iconName="['far', 'fa-face-smile']">
+			<template #title>
+				Thank you for your order!
+			</template>
+
+			<template #textBody>
+				{{args.slot}}
+			</template>
+
+			<template #footer>
+				We’ll send a confirmation email to william.moran@bonkers.ie
+			</template>
+		</ui-order-card>
+
+		
+	`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,83 @@
+<template>
+	<div
+		class="ui-order-card relative text-center rounded-md pt-md mt-sm"
+		:class="[
+			kind === EOrderCardTypes.DEFAULT && 'text-white bg-primary-300',
+			kind === EOrderCardTypes.WARNING && 'bg-warning-300 text-warning-700'
+		]"
+	>
+		<ui-icon
+			:icon-name="iconName"
+			:size="ESize.LG"
+			class="absolute top-0 left-1/2 bg-primary-300 rounded-full -translate-x-1/2 -translate-y-1/2"
+			:class="[
+				kind === EOrderCardTypes.DEFAULT && 'text-white',
+				kind === EOrderCardTypes.WARNING && 'bg-warning-300 text-white'
+			]"
+		/>
+		<ui-typography
+			v-if="$slots.title"
+			class="pt-sm"
+			:class="[
+				kind === EOrderCardTypes.DEFAULT && 'text-primary-700',
+				kind === EOrderCardTypes.WARNING && 'text-warning-700'
+			]"
+			:kind="pickKind"
+			:size="ETypographySizes.XL"
+			:weight="ETextWeight.BOLD"
+		>
+			<slot name="title" />
+		</ui-typography>
+
+		<ui-typography
+			v-if="$slots.textBody"
+			class="mb-sm p-sm"
+			:class="[
+				kind === EOrderCardTypes.DEFAULT && 'text-primary-700',
+				kind === EOrderCardTypes.WARNING && 'text-warning-700'
+			]"
+			:size="ETypographySizes.MD"
+			:weight="ETextWeight.REGULAR"
+		>
+			<slot name="textBody" />
+		</ui-typography>
+
+		<ui-typography
+			v-if="$slots.footer"
+			class="py-sm text-white rounded-b-lg"
+			:class="[
+				kind === EOrderCardTypes.DEFAULT && 'bg-primary-700',
+				kind === EOrderCardTypes.WARNING && 'bg-warning-700'
+			]"
+			:size="ETypographySizes.XXS"
+			:weight="ETextWeight.REGULAR"
+		>
+			<slot name="footer" />
+		</ui-typography>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import { computed } from "vue";
+	import { ESize } from "../../_types/sizing";
+	import { EColors } from "../../_types/colors";
+	import UiTypography, { ETextWeight, ETypographySizes } from "../ui-typography";
+	import type { TIconName } from "../ui-icon";
+	import UiIcon from "../ui-icon";
+	import { EOrderCardTypes } from "./_types";
+
+	const props = withDefaults(defineProps<{
+		iconName: TIconName;
+		kind?: EOrderCardTypes;
+	}>(), {
+		kind: EOrderCardTypes.DEFAULT
+	});
+
+	const pickKind = computed(()=>{
+		switch(props.kind){
+			case EOrderCardTypes.WARNING: return EColors.WARNING_700;
+			default: return EColors.PRIMARY_700;
+		}
+	});
+
+</script>

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

@@ -14,13 +14,12 @@
 	>
 		<input
 			:id="value"
-			v-model="localValue"
+			v-model="radioModel"
 			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-secondary-alt rounded-full relative hover:border-secondary-alt-700 focus:border-secondary-alt-700"
@@ -33,7 +32,7 @@
 </template>
 
 <script lang="ts" setup>
-	import { ref, useSlots, watch } from "vue";
+	import { computed, useSlots } from "vue";
 	import { EJustify } from "../../_types/align";
 	const slots = useSlots();
 	const props = defineProps<{
@@ -45,13 +44,14 @@
 		disabled?: boolean;
 	}>();
 
-	defineEmits(["update:modelValue"]);
+	const emit = defineEmits(["update:modelValue"]);
 
-	const localValue = ref(props.modelValue);
-
-	watch(() => props.modelValue, (newValue) => {
-		if(newValue !== localValue.value){
-			localValue.value = newValue;
+	const radioModel = computed({
+		get() {
+			return props.modelValue;
+		},
+		set(value) {
+			emit("update:modelValue", value);
 		}
 	});
 </script>

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

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

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

@@ -0,0 +1,32 @@
+import { ref } from "vue";
+import UiRadioFancy from "./ui-radio-fancy.vue";
+import type { Story } from "@storybook/vue3";
+import { EIconType } from "../ui-icon/_typings";
+
+export default {
+	title: "Components/ui-radio-fancy",
+	component: UiRadioFancy,
+	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+	argTypes: {},
+	args: {},
+};
+
+type TComponentProps = InstanceType<typeof UiRadioFancy>["$props"];
+
+const Template: Story<TComponentProps> = () => ({
+	components: { UiRadioFancy },
+	setup() {
+		const modelValue = ref("1");
+
+		return { modelValue, EIconType };
+	},
+	template: /*html*/`
+		<div class="grid gap-sm" :style="{'grid-template-columns': 'repeat(auto-fit, minmax(160px, 1fr))'}">
+			<ui-radio-fancy v-for="item in 3" :key="item" :value="String(item)" v-model="modelValue" name="radio" title="title" :icon-name="[EIconType.FAR, 'face-smile']">
+				{{args.slot}}
+			</ui-radio-fancy>
+		</div>
+	`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,59 @@
+<template>
+	<label
+		class="ui-radio-item block p-sm border rounded-2xl hover:border-primary cursor-pointer bg-white"
+		:class="[
+			isActive ? 'border-primary pointer-events-none':'border-secondary-alt',
+		]"
+	>
+		<input
+			v-model="radioModel"
+			type="radio"
+			:name="name"
+			:value="value"
+			class="appearance-none absolute"
+		>
+
+		<ui-icon
+			:icon-name="iconName"
+			:size="ESize.MD"
+			class="mb-md"
+			:class="isActive && 'text-primary'"
+		/>
+		<ui-typography
+			:size="ETypographySizes.SM"
+			:kind="EColors.SECONDARY"
+			:weight="ETextWeight.SEMI_BOLD"
+		>
+			{{ title }}
+		</ui-typography>
+	</label>
+</template>
+
+<script lang="ts" setup>
+	import { computed } from "vue";
+	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+	import UiIcon, { type TIconName } from "../ui-icon";
+	import { ESize } from "../../_types/sizing";
+	import { EColors } from "../../_types/colors";
+
+	const props = defineProps<{
+		modelValue: string;
+		name: string;
+		value: string | number;
+		title: string;
+		iconName: TIconName;
+	}>();
+
+	const emit = defineEmits(["update:modelValue"]);
+
+	const radioModel = computed({
+		get() {
+			return props.modelValue;
+		},
+		set(value) {
+			emit("update:modelValue", value);
+		}
+	});
+
+	const isActive = computed(()=>props.modelValue === props.value);
+</script>

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

@@ -12,7 +12,6 @@ export default {
 		}
 	},
 	args: {
-		slot: "default text",
 		disabled: false,
 	},
 };
@@ -27,12 +26,20 @@ const Template: Story<TComponentProps> = (args) => ({
 		return { args, valueModel, list };
 	},
 	template: /*html*/`
-		<ui-select v-bind="args" :list="list" v-model:value="valueModel" heading="heading" subLabel="subLabel">
+		<ui-select v-bind="args" v-model="valueModel" heading="heading" subLabel="subLabel">
 			<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>
+
+			<option
+				v-for="item in list"
+				:key="item"
+				:value="item"
+			>
+				{{ item }}
+			</option>
 		</ui-select>
 	`,
 });

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

@@ -12,17 +12,10 @@
 			:class="[disabled && 'pointer-events-none bg-secondary-alt-200 border-secondary-alt-300']"
 		>
 			<select
-				v-model="localModel"
+				v-model="radioModel"
 				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>
+				<slot />
 			</select>
 
 			<div class="ui-select__icon-wrapper absolute right-sm">
@@ -40,23 +33,25 @@
 </template>
 
 <script lang="ts" setup>
-	import { ref, watch } from "vue";
+	import { computed } from "vue";
 	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
 
 	const props = defineProps<{
-		list: string[];
-		value: string;
+		modelValue: string;
 		heading?: string;
 		subLabel?: string;
 		disabled?: boolean;
 	}>();
 
-	defineEmits(["update:value"]);
+	const emit = defineEmits(["update:modelValue"]);
 
-	const localModel = ref(props.value);
-
-	watch(() => props.value, (value) => {
-		localModel.value = value;
+	const radioModel = computed({
+		get() {
+			return props.modelValue;
+		},
+		set(value) {
+			emit("update:modelValue", value);
+		}
 	});
 </script>
 

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

@@ -0,0 +1,4 @@
+export { default } from "./ui-table.vue";
+export { ETextAlign, ETextWeight } from "../ui-typography";
+export { default as UiTableCell } from "./ui-table-cell";
+export { default as UiTableRow, ERowKind } from "./ui-table-row";

package/src/components/ui-table/ui-table-cell/index.ts

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

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

@@ -0,0 +1,33 @@
+<template>
+	<ui-typography
+		is="td"
+		:size="ETypographySizes.SM"
+		:align="align"
+		:weight="weight"
+		class="p-sm"
+	>
+		<slot />
+
+		<ui-typography
+			v-if="$slots.subtext"
+			:size="ETypographySizes.XXS"
+			:weight="ETextWeight.SEMI_BOLD"
+			class="flex flex-col gap-xxs"
+			:kind="EColors.PRIMARY_ALT_700"
+			:class="$slots.default && 'pt-sm'"
+		>
+			<slot name="subtext" />
+		</ui-typography>
+	</ui-typography>
+</template>
+
+<script lang="ts" setup>
+	import { EColors } from "../../../_types/colors";
+	import UiTypography, { ETypographySizes, ETextAlign, ETextWeight } from "../../ui-typography";
+
+	defineProps<{
+		align?: ETextAlign;
+		weight?: ETextWeight;
+	}>();
+
+</script>

package/src/components/ui-table/ui-table-row/_typings.ts

@@ -0,0 +1,3 @@
+export enum ERowKind {
+	SECONDARY = "secondary"
+}

package/src/components/ui-table/ui-table-row/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ui-table-row.vue";
+export { ERowKind } from "./_typings";

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

@@ -0,0 +1,31 @@
+<template>
+	<tr
+		class="ui-table-row text-center"
+		:class="[kind === ERowKind.SECONDARY && 'bg-secondary-alt-200']"
+	>
+		<slot />
+	</tr>
+</template>
+
+<script lang="ts" setup>
+	import { ERowKind } from "./_typings";
+
+	defineProps<{
+		kind?: ERowKind;
+	}>();
+
+</script>
+
+<style scoped>
+	.ui-table-row ::v-deep(td:first-child) {
+		border-top-left-radius: var(--xs);
+		border-bottom-left-radius: var(--xs);
+		text-align: left;
+	}
+
+	.ui-table-row ::v-deep(td:last-child) {
+		border-top-right-radius: var(--xs);
+		border-bottom-right-radius: var(--xs);
+		text-align: right;
+	}
+</style>

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

@@ -0,0 +1,83 @@
+import UiTableRow, { ERowKind } from "./ui-table-row";
+import UiTableCell from "./ui-table-cell";
+import UiTypography, { ETextWeight, ETypographySizes } from "../ui-typography";
+
+export default {
+	title: "Components/ui-table",
+	argTypes: {
+		kind: {
+			control: { type: "select" },
+			options: ["empty"].concat(Object.values(ERowKind)),
+			description: "The row kind",
+		},
+	},
+	args: {
+		kind: ERowKind.SECONDARY,
+	},
+};
+
+type MyComponentProps = InstanceType<typeof UiTableRow>["$props"];
+
+const Template = (args: MyComponentProps) => ({
+	components:{
+		// UiTable,
+		UiTableRow,
+		UiTableCell,
+		UiTypography
+	},
+	setup(){
+
+		const defaultList = {
+			text1: "some text",
+			text2: "some text2",
+			text3: "some text3",
+			extraText: false
+		};
+		const list = [
+			defaultList,
+			defaultList,
+			defaultList,
+			defaultList,
+			defaultList,
+			{
+				...defaultList,
+				extraText: true
+			}
+		];
+
+		return{
+			ETextWeight,
+			ETypographySizes,
+			ERowKind,
+			args,
+			list
+		};
+	},
+	template:
+	/*html*/`
+		<table class='w-full'>
+				<ui-table-row v-for="(row, index) in list"
+											:key="index"
+											rounded
+											:kind="index % 2 === 0 && args.kind">
+					<ui-table-cell :weight='ETextWeight.SEMI_BOLD'>
+							{{row.text1}}
+					</ui-table-cell>
+
+					<ui-table-cell>
+						{{row.text2}}
+					</ui-table-cell>
+
+					<ui-table-cell :weight='ETextWeight.SEMI_BOLD'>
+							{{row.text3}}
+							<template #subtext v-if="row.extraText">
+								<p>23.620 cent x</p>
+								<p>4,200 kWh</p>
+				 			</template>
+					</ui-table-cell>
+				</ui-table-row>
+		</table>
+	`
+});
+
+export const Default = Template.bind({});

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

@@ -4,21 +4,20 @@
 			v-for="tab in tabs"
 			:key="tab"
 			class="rounded-full text-center"
-			:class="[localValue === tab && 'bg-white']"
+			:class="[tabsModel === tab && 'bg-white']"
 		>
 			<label class="block cursor-pointer py-xs px-md">
 				<input
-					v-model="localValue"
+					v-model="tabsModel"
 					type="radio"
 					class="appearance-none absolute"
 					:value="tab"
-					:name="name || 'default'"
-					@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
+					:name="name"
 				>
 				<ui-typography
 					is="span"
 					:size="ETypographySizes.XS"
-					:kind="localValue === tab?EColors.SECONDARY_500:EColors.SECONDARY_400"
+					:kind="tabsModel === tab ? EColors.SECONDARY_500 : EColors.SECONDARY_400"
 					:weight="ETextWeight.SEMI_BOLD"
 				>
 					{{ tab }}
@@ -29,23 +28,26 @@
 </template>
 
 <script lang="ts" setup>
-	import { ref, watch } from "vue";
+	import { computed } from "vue";
 	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
 	import { EColors } from "../../_types/colors";
 
-	const props = defineProps<{
+	const props = withDefaults(defineProps<{
 		tabs: string[];
 		modelValue: string;
-		name: string;
-	}>();
-
-	defineEmits(["update:modelValue"]);
+		name?: string;
+	}>(), {
+		name: "default"
+	});
 
-	const localValue = ref(props.modelValue);
+	const emit = defineEmits(["update:modelValue"]);
 
-	watch(() => props.modelValue, (newValue) => {
-		if(newValue !== localValue.value){
-			localValue.value = newValue;
+	const tabsModel = computed({
+		get() {
+			return props.modelValue;
+		},
+		set(value) {
+			emit("update:modelValue", value);
 		}
 	});
 

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

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