bonkers-ui 1.0.16 → 1.0.18

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/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,
 	},
 };
@@ -26,14 +25,21 @@ const Template: Story<TComponentProps> = (args) => ({
 		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: /*html*/`
+		<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"
-				class="appearance-none absolute 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)"
+				v-model="radioModel"
+				class="appearance-none bg-transparent border-0 m-0 outline-0 w-full p-sm cursor-pointer italic text-secondary-alt"
 			>
-				<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/ui-typography.vue

@@ -4,13 +4,13 @@
 		class="ui-typography"
 		:class="[
 			'leading-none',
-			(!size || size === ETypographySizes.MD) && 'text-md',
-			size === ETypographySizes.XXS && 'text-xxs',
+			size === ETypographySizes.MD && 'text-md',
 			size === ETypographySizes.XS && 'text-xs',
 			size === ETypographySizes.SM && 'text-sm',
 			size === ETypographySizes.LG && 'text-lg',
 			size === ETypographySizes.XL && 'text-xl',
 			size === ETypographySizes.XXL && 'text-2xl',
+			size === ETypographySizes.XXS && 'text-xxs',
 			size === ETypographySizes.XXXL && 'text-3xl',
 			size === ETypographySizes.XXXXL && 'text-4xl',
 			size === ETypographySizes.XXXXXL && 'text-5xl',

package/src/main.css

@@ -1,7 +1,7 @@
-@import "_styles/variables/colors.css";
-@import "_styles/variables/spacing.css";
-@import "_styles/variables/font-sizes.css";
-@import "_styles/variables/shadow.css";
+@import url("_styles/variables/colors.css");
+@import url("_styles/variables/spacing.css");
+@import url("_styles/variables/font-sizes.css");
+@import url("_styles/variables/shadow.css");
 
 @tailwind base;
 @tailwind components;

package/tailwind.config.js

@@ -11,7 +11,14 @@ module.exports = {
 		spacing,
 		fontSize,
 		boxShadow,
-		extend: {},
+		extend: {
+			minHeight: (theme) => ({
+				...theme("spacing"),
+			}),
+			minWidth: (theme) => ({
+				...theme("spacing"),
+			}),
+		},
 	},
 	plugins: [],
 };

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

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

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

@@ -1,65 +0,0 @@
-<template>
-	<label
-		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',
-		]"
-	>
-		<input
-			:id="value"
-			v-model="localValue"
-			type="radio"
-			:name="name"
-			:value="value"
-			class="appearance-none absolute"
-			@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
-		>
-
-		<ui-icon
-			:icon-name="iconName"
-			:size="ESize.MD"
-			class="mb-md"
-		/>
-		<ui-typography
-			:size="ETypographySizes.SM"
-			:kind="isActive ? EColors.WHITE : EColors.SECONDARY"
-			:weight="ETextWeight.SEMI_BOLD"
-		>
-			{{ title }}
-		</ui-typography>
-	</label>
-</template>
-
-<script lang="ts" setup>
-	import { computed, ref, watch } 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;
-		title: string;
-		iconName: TIconName;
-	}>();
-
-	defineEmits(["update:modelValue"]);
-
-	const localValue = ref(props.modelValue);
-
-	watch(()=>props.modelValue, (newValue)=>{
-		if(newValue !== localValue.value){
-			localValue.value = newValue;
-		}
-	});
-
-	const isActive = computed(()=>props.modelValue === props.value);
-</script>
-
-<style>
-	.ui-radio-item input:checked + .ui-radio-custom {
-		background-color: #f5f5f5;
-	}
-</style>