bonkers-ui 1.0.61 → 1.0.63

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

@@ -1,57 +0,0 @@
-import { ref } from "vue";
-import UiInputRange from "./ui-input-range.vue";
-import type { Story } from "@storybook/vue3";
-
-export default {
-	title: "Components/ui-input-range",
-	component: UiInputRange,
-	argTypes: {
-		min: {
-			control: {
-				type: "number" 
-			},
-			description: "The Element min value",
-		},
-		max: {
-			control: {
-				type: "number" 
-			},
-			description: "The Element max value",
-		},
-		step: {
-			control: {
-				type: "number" 
-			},
-			description: "The Element max value",
-		}
-	},
-	args: {
-		min: 0,
-		max: 100,
-		step: 1,
-	},
-};
-
-type TComponentProps = InstanceType<typeof UiInputRange>["$props"];
-
-const Template: Story<TComponentProps> = (args) => ({
-	components: {
-		UiInputRange 
-	},
-	setup() {
-		const modelValue = ref(50);
-
-		return {
-			args,
-			modelValue 
-		};
-	},
-	template: /*html*/`
-		<div :style="{border: '1px solid'}">
-			<ui-input-range v-bind="args" v-model:modelValue="modelValue"/>
-		</div>
-		<div>{{ modelValue }}</div>
-	`,
-});
-
-export const Default = Template.bind({});

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

@@ -1,138 +0,0 @@
-<template>
-	<div
-		class="ui-input-range relative box-content h-lg py-xs"
-	>
-		<input
-			ref="track"
-			v-model.number="rangeModel"
-			class="absolute left-0 top-0 h-full w-full cursor-pointer appearance-none bg-transparent"
-			type="range"
-			:min="min"
-			:max="max"
-			:step="step"
-			@touchmove="moveHandler"
-		>
-
-		<div
-			class="pointer-events-none absolute left-0 top-1/2 h-xs w-full -translate-y-1/2 rounded bg-secondary-alt"
-		/>
-
-		<div
-			class="pointer-events-none absolute left-0 top-1/2 h-xs -translate-y-1/2 rounded bg-primary"
-			:style="{
-				width: getPercentage + '%',
-			}"
-		/>
-
-		<div
-			class="
-				ui-input-range__thumb
-				pointer-events-none
-				absolute
-				box-content
-				h-xs
-				w-xs
-				-translate-x-1/2
-				-translate-y-1/2
-				rounded-full
-				border-white
-				bg-primary
-			"
-			:style="{left: getPercentage + '%'}"
-		/>
-	</div>
-</template>
-
-<script lang="ts" setup>
-	import { computed, ref, watch } from "vue";
-
-	const props = defineProps<{
-		modelValue: number;
-		min: string | number;
-		max: string | number;
-		step: string | number;
-	}>();
-
-	const emit = defineEmits<{
-		(e: "update:modelValue", state: number): void
-	}>();
-
-	const rangeModel = computed({
-		get() {
-			return props.modelValue;
-		},
-		set(value) {
-			emit("update:modelValue", value);
-		}
-	});
-
-	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(() => {
-		return Math.round(((+props.modelValue - +props.min) / (+props.max - +props.min)) * 100);
-	});
-
-	const parseMouseMove = (e: MouseEvent | TouchEvent) => {
-		if (track.value) {
-			const CLICK = "clientX";
-
-			const {
-				left: trackStart,
-				width: trackLength,
-			} = track.value.getBoundingClientRect();
-
-			const clickOffset = "touches" in e ? e.touches[0][CLICK] : e[CLICK];
-
-			// It is possible for left to be NaN, force to number
-			const clickPos = Math.min(Math.max((clickOffset - trackStart ) / trackLength, 0), 1) || 0;
-
-			const mousePositionInPercent = parseFloat(String(props.min)) + clickPos * (+props.max - +props.min);
-
-			const newValue = Math.round((mousePositionInPercent) / +props.step) * +props.step;
-
-			return parseFloat(Math.min(newValue, +props.max).toFixed(2));
-		}
-	};
-
-	const moveHandler = (e: MouseEvent | TouchEvent) => {
-		const newValue = parseMouseMove(e);
-
-		if (newValue) {
-			rangeModel.value = newValue;
-		}
-	};
-
-</script>
-
-<style scoped>
-	input[type="range"]::-webkit-slider-thumb {
-		appearance: none;
-		height: 10px;
-		width: 10px;
-		transform: scale(4);
-		background-color: transparent;
-		border: 0;
-		box-shadow: none;
-	}
-
-	input[type="range"]::-moz-range-thumb {
-		appearance: none;
-		background-color: transparent;
-		border: 0;
-		box-shadow: none;
-	}
-
-	.ui-input-range__thumb {
-		top: 50%;
-		border-width: 12px;
-		box-shadow: 0 0 0 4px var(--color-primary);
-	}
-</style>

package/src/components/ui-list-item/_types.ts

@@ -1,13 +0,0 @@
-export enum EListItemTypes {
-	DEFAULT = "DEFAULT",
-	PROGRESS = "PROGRESS"
-}
-export enum EListItemSpacing {
-	DEFAULT = "DEFAULT",
-	COMPACT = "COMPACT"
-}
-
-export enum EListItemSize {
-	SM = "SM",
-	MD = "MD"
-}

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

@@ -1,2 +0,0 @@
-export { default } from "./ui-list-item.vue";
-export { EListItemTypes, EListItemSpacing, EListItemSize } from "./_types";

package/src/components/ui-list-item/ui-list-item.stories.ts

@@ -1,77 +0,0 @@
-import UiListItem from "../ui-list-item";
-import { EListItemSize, EListItemSpacing, EListItemTypes } from "./_types";
-import { ICON_DEFAULT } from "./../../CONSTANTS";
-
-export default {
-	title: "Components/ui-list-item",
-	component: UiListItem,
-	argTypes: {
-		kind: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(EListItemTypes),
-			description: "The Element kind",
-		},
-		size: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(EListItemSize),
-			description: "The Element size"
-		},
-		spacing: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(EListItemSpacing),
-			description: "The Element spacing"
-		},
-		title: {
-			control: {
-				type: "text" 
-			},
-			description: "The Element title"
-		},
-		slot: {
-			control: {
-				type: "text" 
-			},
-			description: "The slot text or component",
-		},
-	},
-	args: {
-		title: "default text",
-		kind: EListItemTypes.DEFAULT,
-		size: EListItemSize.SM,
-		spacing: EListItemSpacing.DEFAULT,
-		slot: "default slot"
-	},
-};
-
-export const Default = (args) => ({
-	components: {
-		UiListItem 
-	},
-	setup() {
-		return {
-			args,
-			ICON_DEFAULT 
-		};
-	},
-	template: /*html*/`
-			<ul>
-				<ui-list-item v-bind="args" :icon="ICON_DEFAULT" title="title only" icon-class="text-secondary-alt" />
-
-				<ui-list-item :icon="ICON_DEFAULT" :kind="args.kind" :spacing="args.spacing">
-					text only
-				</ui-list-item>
-
-				<ui-list-item v-bind="args" v-for= "item in 5" :key="item" :icon="ICON_DEFAULT">
-					{{ args.title }}
-				</ui-list-item>
-
-				<ui-list-item v-bind="args" icon-class="text-secondary-alt" :icon="ICON_DEFAULT" />
-			</ul>
-	`,
-});

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

@@ -1,79 +0,0 @@
-
-<template>
-	<li
-		class="ui-list-item group relative grid grid-flow-col justify-start gap-xs text-secondary"
-		:class="[
-			size === EListItemSize.SM && 'text-sm',
-			size === EListItemSize.MD && 'text-md',
-			spacing === EListItemSpacing.DEFAULT && 'pb-sm',
-			spacing === EListItemSpacing.COMPACT && 'pb-xs'
-		]"
-	>
-		<div
-			v-if="kind === EListItemTypes.PROGRESS"
-			class="
-				ui-list-item__line
-				absolute
-				left-xs
-				top-sm
-				h-full
-				w-xxs
-				-translate-x-2/4
-				bg-primary-300
-				group-last:hidden
-			"
-		/>
-
-		<slot name="icon">
-			<ui-icon
-				v-if="icon"
-				class="bg-white"
-				:class="iconClass"
-				:icon-name="icon"
-				:size="ESize.SM"
-			/>
-		</slot>
-
-		<div>
-			<ui-typography
-				v-if="title"
-				:weight="ETextWeight.SEMI_BOLD"
-			>
-				{{ title }}
-			</ui-typography>
-
-			<ui-typography
-				v-if="$slots.default"
-				:class="[title && 'mt-xxs']"
-				:weight="ETextWeight.LIGHT"
-			>
-				<slot />
-			</ui-typography>
-		</div>
-	</li>
-</template>
-
-<script lang="ts" setup>
-	import UiIcon, { type TIconName } from "../ui-icon";
-	import UiTypography, { ETextWeight } from "../ui-typography";
-	import { ESize } from "../../_types/sizing";
-	import { EListItemTypes, EListItemSpacing, EListItemSize } from "./_types";
-	import { HTMLAttributes } from "vue";
-
-	withDefaults(defineProps<{
-		icon?: TIconName
-		title?: string
-		kind?: EListItemTypes
-		size?: EListItemSize
-		spacing?: EListItemSpacing
-		iconClass?: HTMLAttributes["class"]
-	}>(), {
-		kind: EListItemTypes.DEFAULT,
-		size: EListItemSize.SM,
-		spacing: EListItemSpacing.COMPACT,
-		title: "",
-		icon: undefined,
-		iconClass: "",
-	});
-
-</script>

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

@@ -1,6 +0,0 @@
-export enum EModalSizes {
-	SM = "sm",
-	MD = "md",
-	LG = "lg",
-	RESPONSIVE = "responsive",
-}

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

@@ -1,2 +0,0 @@
-export { default } from "./ui-modal.vue";
-export { EModalSizes } from "./_typings";

package/src/components/ui-modal/ui-backdrop/index.ts

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

package/src/components/ui-modal/ui-backdrop/ui-backdrop.vue

@@ -1,22 +0,0 @@
-<template>
-	<div>
-		<div
-			class="
-				backdrop-color
-				fixed
-				inset-0
-				z-0
-				backdrop-blur-sm
-				transition-all
-				"
-		/>
-
-		<slot />
-	</div>
-</template>
-
-<style lang="css" scoped>
-	.backdrop-color {
-		background-color: rgb(0 0 0 / 50%);
-	}
-</style>

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

@@ -1,85 +0,0 @@
-import type { Story } from "@storybook/vue3";
-import UiModal from "./ui-modal.vue";
-import UiButton from "../ui-button";
-import UiBackdrop from "./ui-backdrop";
-import UiIcon from "../ui-icon";
-import UiTypography from "../ui-typography";
-import { ESize } from "../../_types/sizing";
-import { EModalSizes } from "./_typings";
-
-export default {
-	title: "Components/ui-modal",
-	component: UiModal,
-	argTypes: {
-		title: {
-			control: {
-				type: "text" 
-			},
-			description: "The modal title text",
-		},
-		modalSize: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(EModalSizes),
-			description: "The modal kinds",
-		},
-		modalVisible: {
-			control: {
-				type: "boolean" 
-			},
-			description: "Control Modal Visibility",
-		},
-
-	},
-	args: {
-		title: "Password Updated",
-		body: "You can now use your new security info to sign in to your account",
-		modalSize: ESize.SM,
-	}
-};
-
-type TComponentProps = InstanceType<typeof UiModal>["$props"];
-
-const Template: Story<TComponentProps> = (args) => ({
-	components: {
-		UiModal,
-		UiBackdrop,
-		UiButton,
-		UiIcon,
-		UiTypography 
-	},
-	setup() {
-		return {
-			args,
-			ESize 
-		};
-	},
-	template: /*html*/`
-			<ui-modal
-					class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
-					:title="args.title"
-					:modalSize="args.modalSize"
-				>
-					<template #icon>
-						<ui-icon class="text-primary"  :icon-name="['far', 'circle-check']" :size=ESize.XL  />
-					</template>
-
-					<template #default>
-						{{args.body}}
-					</template>
-
-					<template #footer>
-						<ui-button
-							fullWidth
-						>
-							Ok
-						</ui-button>
-					</template>
-			</ui-modal>
-
-			<ui-backdrop />
-			`
-});
-
-export const Default = Template.bind({});

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

@@ -1,90 +0,0 @@
-<template>
-	<div
-		class="
-				ui-modal
-				max-height max-width
-				inset-0
-				z-10
-				flex
-				w-full
-				flex-col
-				items-center
-				overflow-y-scroll
-				rounded-2xl
-				bg-white
-				p-md
-				shadow-md
-			"
-		:class="[
-			modalSize === EModalSizes.SM &&'h-fit max-w-[24rem]',
-			modalSize === EModalSizes.MD &&'h-fit max-w-[32rem]',
-			modalSize === EModalSizes.LG &&'h-fit max-w-[40rem]',
-			modalSize === EModalSizes.RESPONSIVE && 'h-full',
-		]"
-	>
-		<div
-			v-if="$slots.icon"
-			class="mb-sm mt-md"
-		>
-			<slot name="icon" />
-		</div>
-
-		<slot name="title">
-			<ui-typography
-				v-if="title"
-				class="my-md"
-				:weight="ETextWeight.BOLD"
-				:align="ETextAlign.CENTER"
-				:size="ETypographySizes.LG"
-			>
-				{{ title }}
-			</ui-typography>
-		</slot>
-
-		<ui-typography
-			is="div"
-			v-if="$slots.default"
-			:weight="ETextWeight.REGULAR"
-			:align="ETextAlign.CENTER"
-			line-height
-			class="mb-md w-full overflow-y-auto text-secondary"
-		>
-			<slot />
-		</ui-typography>
-
-		<div
-			v-if="$slots.footer"
-			class="mt-auto w-full"
-		>
-			<slot name="footer" />
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-	import { ETypographySizes } from "../ui-typography/";
-	import UiTypography, { ETextWeight, ETextAlign } from "../ui-typography";
-	import { EModalSizes } from "./_typings";
-
-	withDefaults(
-		defineProps<{
-			title?: string;
-			modalSize?: EModalSizes;
-		}>(),
-		{
-			title: undefined,
-			modalSize: EModalSizes.SM,
-		}
-	);
-
-</script>
-
-<style scoped>
-	.max-height{
-		max-height: calc(100vh - var(--md));
-	}
-
-	.max-width{
-		max-width: calc(100vw - var(--md));
-	}
-</style>

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

@@ -1,11 +0,0 @@
-export enum EBadgeOrigin {
-	DEFAULT = "default",
-	OFFSET_TOP_RIGHT = "offset-top-right"
-}
-
-export enum ENotificationBadgeSizes {
-	DEFAULT = "default",
-	SMALL = "sm",
-	MEDIUM = "md",
-	LARGE = "lg"
-}

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

@@ -1,2 +0,0 @@
-export { default } from "./ui-notification-badge.vue";
-export { EBadgeOrigin } from "./_types";

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

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

@@ -1,42 +0,0 @@
-<template>
-	<div
-		class="
-			notification-badge
-			absolute
-			h-sm
-			min-w-sm
-			rounded-full
-			border
-			border-white
-			bg-error
-			text-center
-			text-xxs
-			font-bold
-			leading-none
-			text-white
-		"
-		:class="[
-			origin === EBadgeOrigin.DEFAULT && 'right-0 top-0',
-			origin === EBadgeOrigin.OFFSET_TOP_RIGHT && '-right-xxs -top-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

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

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

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