bonkers-ui 1.0.60 → 1.0.62

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

@@ -1,57 +0,0 @@
-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', '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

@@ -1,83 +0,0 @@
-<template>
-	<div
-		class="ui-order-card relative mt-sm rounded-md pt-md text-center"
-		:class="[
-			kind === EOrderCardTypes.DEFAULT && 'bg-primary-300 text-white',
-			kind === EOrderCardTypes.WARNING && 'bg-warning-300 text-warning-700'
-		]"
-	>
-		<ui-icon
-			:icon-name="iconName"
-			:size="ESize.LG"
-			class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-300"
-			: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="rounded-b-lg py-sm text-white"
-			: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-plain-radio/index.ts

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

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

@@ -1,74 +0,0 @@
-import UiPlainRadio from "./ui-plain-radio.vue";
-import { ETypographySizes } from "../ui-typography";
-import  EColors  from "../ui-typography";
-import type { Story } from "@storybook/vue3";
-import { ref } from "vue";
-
-export default {
-	title: "Components/ui-plain-radio",
-	component: UiPlainRadio,
-	ETypographySizes,
-	EColors,
-	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {
-		disabled: {
-			control: {
-				type: "boolean" 
-			},
-		},
-		header: {
-			control: {
-				type: "text" 
-			},
-		},
-		subHeader: {
-			control: {
-				type: "text" 
-			},
-		}
-	},
-	args: {
-		disabled: false,
-		header: "Header",
-		subHeader: "SubHeader"
-	},
-};
-
-type TComponentProps = InstanceType<typeof UiPlainRadio>["$props"];
-
-const Template: Story<TComponentProps> = (args) => ({
-	components: {
-		UiPlainRadio 
-	},
-
-	setup() {
-		const modelValue = ref("1");
-
-		return {
-			modelValue,
-			args,
-			ETypographySizes,
-			EColors 
-		};
-
-	},
-
-	template: /*html*/ `
-		<div :style="{display: 'grid', gridGap: '5px'}">
-			<ui-plain-radio
-				v-for="item in 2"
-				:name="String(item)"
-				:key="item"
-				:value="String(item)"
-				v-model="modelValue"
-				:header="args.header"
-				:sub-header="args.subHeader"
-				title="title"
-				:disabled="args.disabled"
-			>
-			</ui-plain-radio>
-		</div>
-	`,
-});
-
-export const Default = Template.bind({});

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

@@ -1,119 +0,0 @@
-<template>
-	<label
-		class="ui-plain-radio relative mb-sm"
-		:for="name + value"
-	>
-
-		<input
-			:id="name + value"
-			v-model="radioModel"
-			:value="value"
-			name="ui-plain-radio"
-			type="radio"
-			:disabled="disabled"
-			class="peer absolute appearance-none"
-		>
-
-		<div
-			class="ui-plain-radio__content
-				box-border
-				grid
-				h-full
-				w-full
-				cursor-pointer
-				grid-flow-col
-				items-center
-				justify-start
-				gap-sm rounded-xl
-				border
-				border-secondary-alt-500
-				bg-white
-				p-sm
-				before:absolute
-				before:-z-10
-
-				before:box-border
-				before:rounded-[16px]
-				before:bg-primary-300
-				hover:border-secondary-alt-700
-				peer-checked:border-transparent
-
-				peer-checked:shadow-selected-shadow
-				peer-checked:hover:shadow-border-selected
-				peer-checked:active:shadow-border-primary
-				peer-checked:active:before:-bottom-xs
-				peer-checked:active:before:-left-xs
-				peer-checked:active:before:-right-xs
-
-				peer-checked:active:before:-top-xs
-				peer-focus:before:-bottom-xs
-
-				peer-focus:before:-left-xs
-				peer-focus:before:-right-xs
-				peer-focus:before:-top-xs
-				peer-active:before:-bottom-xxs
-
-				peer-active:before:-left-xxs
-				peer-active:before:-right-xxs
-				peer-active:before:-top-xxs"
-			:class="disabled
-				&& 'pointer-events-none border-secondary-alt-400 peer-checked:shadow-border-primary-disabled'"
-		>
-			<ui-radio
-				v-model="radioModel"
-				:value="value.toString()"
-				:name="name"
-				:disabled="disabled"
-				class="pointer-events-none"
-			/>
-
-			<span>
-				<slot name="header">
-					<ui-typography
-						:size="ETypographySizes.SM"
-						:kind="EColors.SECONDARY"
-						:weight="ETextWeight.SEMI_BOLD"
-						line-height
-					>
-						{{ header }}
-					</ui-typography>
-				</slot>
-
-				<slot name="subHeader">
-					<ui-typography
-						:size="ETypographySizes.XS"
-						:kind="EColors.SECONDARY_ALT"
-					>
-						{{ subHeader }}
-					</ui-typography>
-				</slot>
-			</span>
-		</div>
-	</label>
-</template>
-
-<script lang="ts" setup>
-	import { computed } from "vue";
-	import UiRadio from "../ui-radio";
-	import UiTypography, { ETypographySizes, EColors, ETextWeight } from "../ui-typography";
-
-	const props = defineProps<{
-		modelValue: string | number | boolean;
-		header?: string;
-		subHeader?: string;
-		name: string;
-		value: string | number | boolean;
-		disabled?: boolean;
-	}>();
-
-	const emit = defineEmits(["update:modelValue"]);
-
-	const radioModel = computed({
-		get() {
-			return props.modelValue;
-		},
-		set(value) {
-			emit ("update:modelValue", value);
-		}
-	});
-</script>

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

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

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

@@ -1,40 +0,0 @@
-import type { Meta } from "@storybook/vue3";
-import UiProgress from ".";
-
-export default {
-	title: "Components/ui-progress",
-	component: UiProgress,
-
-	argTypes: {
-		// kind: {
-		// 	control: { type: "select" },
-		// 	options: Object.values(EAlertTypes),
-		// 	description: "The button kinds",
-		// },
-		min: {
-			control: {
-				type: "number" 
-			},
-			description: "The minimum value",
-		},
-		max: {
-			control: {
-				type: "number" 
-			},
-			description: "The maximum value",
-		},
-		current: {
-			control: {
-				type: "number" 
-			},
-		}
-	},
-} satisfies Meta<typeof UiProgress>;
-
-export const Default = {
-	args: {
-		min: 0,
-		max: 10,
-		current: 3,
-	},
-};

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

@@ -1,43 +0,0 @@
-<template>
-	<div class="ui-progress">
-		<div
-			class="relative h-xs w-full overflow-hidden rounded-lg bg-primary-200"
-		>
-			<div
-				class="
-					ui-progress__bar-fill
-					absolute
-					left-0
-					top-0
-					z-10
-					h-full
-					rounded-lg
-					bg-primary-alt-700
-					transition-all
-					duration-300
-				"
-				:style="{
-					width: filler + '%'
-				}"
-			/>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-	import { computed } from "vue";
-
-	const props = withDefaults(defineProps<{
-		min: number
-		max: number
-		current: number
-	}>(),{
-		min: 0,
-		max: 100,
-		current: 0
-	});
-
-	const filler = computed(() => {
-		return ((props.current - props.min) / (props.max - props.min)) * 100;
-	});
-</script>

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

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

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

@@ -1,74 +0,0 @@
-import UiRadio from "./ui-radio.vue";
-import type { Story } from "@storybook/vue3";
-import { ref } from "vue";
-import { EJustify } from "../../_types/align";
-
-export default {
-	title: "Components/ui-radio",
-	component: UiRadio,
-	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {
-		justify: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(EJustify),
-			description: "The Element justify",
-		},
-		invertOrder: {
-			control: {
-				type: "boolean" 
-			},
-			description: "The Element order",
-		},
-		disabled: {
-			control: {
-				type: "boolean" 
-			},
-			description: "The Element disabled state",
-		},
-	},
-	args: {
-		slot: "Some text",
-		justify: EJustify.START,
-		invertOrder: false,
-		disabled: false,
-	},
-};
-
-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 
-	},
-	// The story's `args` need to be mapped into the template through the `setup()` method
-	setup() {
-		const modelValue = ref("value4");
-
-		return {
-			args,
-			modelValue 
-		};
-	},
-	// And then the `args` are bound to your component with `v-bind="args"`
-	template: `
-		<div :style="{display: 'grid', gridGap: '3px'}">
-			<ui-radio v-bind="args" name="radio" value="value1" v-model="modelValue">
-				{{args.slot}}
-			</ui-radio>
-			<ui-radio v-bind="args" name="radio" value="value2" v-model="modelValue">
-				{{args.slot}}
-			</ui-radio>
-			<ui-radio v-bind="args" name="radio" value="value3" v-model="modelValue">
-				{{args.slot}}
-			</ui-radio>
-			<ui-radio v-bind="args" name="radio" disabled value="value4" v-model="modelValue">
-				{{args.slot}}
-			</ui-radio>
-		</div>
-	`,
-});
-
-export const Default = Template.bind({});

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

@@ -1,108 +0,0 @@
-<template>
-	<label
-		class="ui-radio group grid cursor-pointer grid-flow-col"
-		:class="[
-			slots.default && 'items-center gap-xs',
-			(!justify || justify === EJustify.START) && 'justify-start',
-			justify === EJustify.END && 'justify-end',
-			justify === EJustify.AROUND && 'justify-around',
-			justify === EJustify.BETWEEN && 'justify-between',
-			justify === EJustify.EVENLY && 'justify-evenly',
-			justify === EJustify.CENTER && 'justify-center',
-			disabled && 'pointer-events-none',
-		]"
-	>
-		<input
-			:id="value"
-			v-model="radioModel"
-			type="radio"
-			:name="name.toString()"
-			:value="value"
-			:disabled="disabled"
-			class="peer absolute appearance-none"
-		>
-		<span
-			class="
-				ui-radio_custom
-				relative
-				block
-				h-md
-				w-md
-				rounded-full
-				border
-				border-secondary-alt
-				bg-white
-				group-hover:border-secondary-alt-700
-				group-focus:border-secondary-alt-700
-				peer-checked:border-2
-				peer-checked:border-primary
-				peer-checked:hover:border-primary-600
-				peer-focus:shadow-border-primary
-				peer-disabled:border-secondary-alt-400
-				peer-disabled:bg-secondary-alt-200"
-			:class="invertOrder && 'order-last'"
-		>
-			<span
-				class="
-						ui-radio__dot
-						absolute
-						left-2/4
-						top-2/4
-						block
-						h-xs
-						w-xs
-						rounded-full
-						bg-primary"
-			/>
-		</span>
-		<slot />
-	</label>
-</template>
-
-<script lang="ts" setup>
-	import { computed, useSlots } from "vue";
-	import { EJustify } from "../../_types/align";
-	const slots = useSlots();
-	const props = defineProps<{
-		modelValue: string | number | boolean;
-		name: string | number | boolean;
-		value: string;
-		justify?: EJustify;
-		invertOrder?: boolean;
-		disabled?: boolean;
-	}>();
-
-	const emit = defineEmits(["update:modelValue"]);
-
-	const radioModel = computed({
-		get() {
-			return props.modelValue;
-		},
-		set(value) {
-			emit("update:modelValue", value);
-		}
-	});
-</script>
-
-<style>
-	.ui-radio__dot {
-		transform: translate3d(-50%, -50%, 0) scale(0);
-		transition: transform 0.2s ease-in-out;
-	}
-
-	input:checked + .ui-radio_custom .ui-radio__dot {
-		transform: translate3d(-50%, -50%, 0) scale(1);
-	}
-
-	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);
-	}
-
-	input:checked:disabled + .ui-radio_custom .ui-radio__dot {
-		background-color: var(--color-primary-300);
-	}
-</style>

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

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

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

@@ -1,51 +0,0 @@
-import UiRadioCompact from "../ui-radio-compact";
-import UiTypography,  { ETypographySizes, ETextAlign } from "../ui-typography";
-import { ref } from "vue";
-import type { Meta } from "@storybook/vue3";
-
-const meta: Meta<typeof UiRadioCompact> = {
-	title: "Components/ui-radio-compact",
-	component: UiRadioCompact,
-	argTypes: {}
-};
-
-export default meta;
-
-export const Default = {
-	args: {
-		default: "1"
-	},
-	render: (args) => ({
-		components: {
-			UiRadioCompact,
-			UiTypography
-		},
-		setup() {
-			const modelValue = ref("1");
-			return {
-				args,
-				ETypographySizes,
-				ETextAlign,
-				modelValue
-			};
-		},
-		template: /*html*/`
-		<div class="flex flex-row gap-sm align-middle" :style="{}">
-			<ui-radio-compact v-for="item in 8"
-				:key="item"
-				:value="String(item)"
-				v-model="modelValue"
-				name="radio" title="title"
-
-			>
-					{{item}}
-				</ui-radio-compact>
-
-		</div>
-		`,
-		args: {
-			default: "1"
-		},
-	}),
-
-};