bonkers-ui 1.0.61 → 1.0.63

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

@@ -1,173 +0,0 @@
-<template>
-	<label
-		class="ui-checkbox grid cursor-pointer"
-		:class="[
-			slots.default && 'items-center gap-sm',
-			(!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 && 'ui-checkbox_disabled',
-		]"
-	>
-		<input
-			v-model="checkboxModel"
-			class="absolute appearance-none"
-			type="checkbox"
-			:value="value"
-			:disabled="disabled"
-		>
-		<span
-			class="
-				ui-checkbox_custom
-				relative
-				flex
-				h-md
-				w-md
-				items-center
-				justify-center
-				rounded
-				border
-				border-secondary-alt-500
-				hover:border-secondary-alt-700
-				"
-			:class="invertOrder && 'order-last'"
-		>
-			<svg
-				class="ui-checkbox__icon text-white"
-				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
-			v-if="slots.default"
-			class="ui-checkbox__slot-wrapper"
-		>
-			<slot />
-		</span>
-	</label>
-</template>
-
-<script lang="ts" setup>
-	import { useSlots, computed } from "vue";
-	import { EJustify } from "../../_types/align";
-
-	const slots = useSlots();
-
-	const props = defineProps<{
-		modelValue: boolean | unknown[];
-		justify?: EJustify;
-		invertOrder?: boolean;
-		disabled?: boolean;
-		value?: string;
-	}>();
-
-	const emit = defineEmits<{
-		(e: "update:modelValue", state: typeof props.modelValue): void
-	}>();
-
-	const checkboxModel = computed({
-		get() {
-			return props.modelValue;
-		},
-		set(value) {
-			emit("update:modelValue", value);
-		}
-	});
-
-</script>
-
-<style scoped>
-	.ui-checkbox {
-		grid-template-columns: auto auto;
-	}
-
-	.ui-checkbox_custom {
-		transition: background-color ease-in-out 0.3s 0.3s, border-width ease-in-out 0.2s;
-	}
-
-	.ui-checkbox__icon {
-		stroke-dasharray: 70;
-		stroke-dashoffset: 70;
-		transition: stroke-dashoffset 0.3s ease-in-out;
-	}
-
-	input + .ui-checkbox_custom:active {
-		transition: background-color ease-in-out 0.1s;
-		background-color: var(--color-secondary-alt-200);
-	}
-
-	input + .ui-checkbox_custom:active,
-	input:focus + .ui-checkbox_custom {
-		box-shadow: var(--shadow-border-primary);
-	}
-
-	input:disabled + .ui-checkbox_custom {
-		background-color: var(--color-secondary-alt-200);
-		border-color: var(--color-secondary-alt-400);
-	}
-
-	input:checked + .ui-checkbox_custom .ui-checkbox__icon {
-		stroke-dashoffset: 0;
-	}
-
-	input:checked + .ui-checkbox_custom > svg {
-		opacity: 1;
-	}
-
-	input:checked + .ui-checkbox_custom {
-		border-width: 0;
-		background-color: var(--color-primary);
-		transition: background-color ease-in-out 0.1s, border-width ease-in-out 0.1s, box-shadow ease-in-out 0.2s;
-		animation: cb-pop 0.5s ease-in-out;
-	}
-
-	input:checked + .ui-checkbox_custom:hover {
-		background-color: var(--color-primary-600);
-	}
-
-	input:checked + .ui-checkbox_custom:active {
-		background-color: var(--color-primary-700);
-	}
-
-	input:checked:disabled + .ui-checkbox_custom {
-		background-color: var(--color-primary-300);
-		border: 1px solid var(--color-primary-400);
-	}
-
-	.ui-checkbox_disabled {
-		pointer-events: none;
-		cursor: default;
-	}
-
-	@keyframes cb-pop {
-		0% {
-			transform: scale(1);
-		}
-
-		33% {
-			transform: scale(0.95);
-		}
-
-		66% {
-			transform: scale(1.05);
-		}
-
-		100% {
-			transform: scale(1);
-		}
-	}
-</style>

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

@@ -1,11 +0,0 @@
-export enum EIconType {
-	FAR = "far",
-	FAS = "fas",
-	FAB = "fab",
-	FAL = "fal",
-	FAD = "fad",
-	FAT = "fat",
-	BRANDS = "fa-brands",
-}
-
-export type TIconName = [EIconType, string];

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

@@ -1,3 +0,0 @@
-export { default } from "./ui-icon.vue";
-export { ESize } from "../../_types/sizing";
-export type { TIconName } from "./_typings";

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

@@ -1,43 +0,0 @@
-import UiIcon from "./ui-icon.vue";
-import type { Story } from "@storybook/vue3";
-import { ESize } from "../../_types/sizing";
-
-export default {
-	title: "Components/ui-icon",
-	component: UiIcon,
-	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {
-		size: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(ESize),
-			description: "The Element size",
-		}
-
-	},
-	args: {
-		size: ESize.LG,
-	},
-};
-
-type TComponentProps = InstanceType<typeof UiIcon>["$props"];
-
-const Template: Story<TComponentProps> = (args) => ({
-	// Components used in your story `template` are defined in the `components` object
-	components: {
-		UiIcon 
-	},
-	// The story's `args` need to be mapped into the template through the `setup()` method
-	setup() {
-		return {
-			args 
-		};
-	},
-	// And then the `args` are bound to your component with `v-bind="args"`
-	template: `
-		<ui-icon v-bind="args" :icon-name="['far', 'face-smile']" />
-	`,
-});
-
-export const Default = Template.bind({});

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

@@ -1,27 +0,0 @@
-<template>
-	<font-awesome-icon
-		class="ui-icon"
-		:icon="iconName"
-		:class="[
-			size === ESize.XXS && 'h-xxs w-xxs',
-			size === ESize.XS && 'h-xs w-xs',
-			size === ESize.SM && 'h-sm w-sm',
-			size === ESize.MD && 'h-md w-md',
-			size === ESize.LG && 'h-lg w-lg',
-			size === ESize.XL && 'h-xl w-xl',
-			size === ESize.XXL && 'h-xxl w-xxl',
-		]"
-	/>
-</template>
-
-<script lang="ts" setup>
-	import { ESize } from "../../_types/sizing";
-	import type { TIconName } from "./_typings";
-
-	withDefaults(defineProps<{
-		size?: ESize;
-		iconName: TIconName;
-	}>(), {
-		size: ESize.SM
-	});	
-</script>

package/src/components/ui-icon-wrapper/_typings.ts

@@ -1,11 +0,0 @@
-export enum EIconWrapperTypes {
-	DEFAULT = "DEFAULT",
-	PRIMARY = "PRIMARY",
-	SECONDARY = "SECONDARY",
-}
-export enum EIconWrapperSizes {
-	DEFAULT = "default",
-	SMALL = "sm",
-	MEDIUM = "md",
-	LARGE = "lg"
-}

package/src/components/ui-icon-wrapper/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./ui-icon-wrapper.vue";
-export { EIconWrapperTypes, EIconWrapperSizes } from "./_typings";

package/src/components/ui-icon-wrapper/ui-icon-wrapper.stories.ts

@@ -1,69 +0,0 @@
-import UiIconWrapper from "../ui-icon-wrapper";
-import UiIcon from "../ui-icon";
-import UiNotificationBadge, { EBadgeOrigin } from "../ui-notification-badge";
-import { EIconWrapperSizes, EIconWrapperTypes } from "./_typings";
-import type { Story } from "@storybook/vue3";
-
-export default {
-	title: "Components/ui-icon-wrapper",
-	component: UiIconWrapper,
-	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {
-		kind: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(EIconWrapperTypes),
-			description: "The Icon Wrapper kinds",
-		},
-		size: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(EIconWrapperSizes),
-			description: "The Icon Wrapper sizes",
-		}
-	},
-	args: {
-		slot: "icon",
-	},
-};
-
-type TComponentProps = InstanceType<typeof UiIconWrapper>["$props"];
-
-const Template: Story<TComponentProps> = (args) => ({
-	components: {
-		UiIconWrapper,
-		UiIcon,
-		UiNotificationBadge 
-	},
-	setup() {
-		return {
-			args,
-			EBadgeOrigin,
-			EIconWrapperSizes,
-			EIconWrapperTypes 
-		};
-	},
-	template: /*html*/`
-		<ui-icon-wrapper :kind="EIconWrapperTypes.PRIMARY" v-bind="args" class="mb-sm">
-			<p> ${args.slot} </p>
-			<UiNotificationBadge :origin=EBadgeOrigin.OFFSET_TOP_RIGHT>
-				1
-			</UiNotificationBadge>
-		</ui-icon-wrapper>
-
-		<ui-icon-wrapper :kind="EIconWrapperTypes.SECONDARY" v-bind="args" class="mb-sm">
-			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Emblem-person-blue.svg/640px-Emblem-person-blue.svg.png" width="20" height="20" />
-		</ui-icon-wrapper>
-
-		<ui-icon-wrapper v-bind="args">
-			<ui-icon :icon-name="['far', 'face-smile']" :size=EIconWrapperSizes.SM :style="{color: 'black'}" />
-			<UiNotificationBadge slot="badge" :origin=EBadgeOrigin.DEFAULT>
-				2
-			</UiNotificationBadge>
-		</ui-icon-wrapper>
-		`
-});
-
-export const Default = Template.bind({});

package/src/components/ui-icon-wrapper/ui-icon-wrapper.vue

@@ -1,44 +0,0 @@
-<template>
-	<div
-		class="icon-wrapper relative grid h-fit w-fit place-items-center rounded-2xl"
-		:class="[
-			kind === EIconWrapperTypes.PRIMARY && 'bg-primary text-white',
-			kind === EIconWrapperTypes.SECONDARY && 'bg-secondary-alt-200 text-black',
-			kind === EIconWrapperTypes.DEFAULT && 'border-2 border-primary bg-white text-primary ',
-
-			size === EIconWrapperSizes.DEFAULT && 'p-sm',
-			size === EIconWrapperSizes.SMALL && 'p-xs',
-			size === EIconWrapperSizes.MEDIUM && 'icon-wrapper_offset-md p-md',
-			size === EIconWrapperSizes.LARGE && 'icon-wrapper_offset-lg p-lg',
-		]"
-	>
-		<slot />
-	</div>
-</template>
-
-<script lang="ts" setup>
-	import { EIconWrapperSizes, EIconWrapperTypes } from "./_typings";
-
-	type TProps = {
-		kind?: EIconWrapperTypes;
-		size?: EIconWrapperSizes;
-	}
-
-	withDefaults(defineProps<TProps>(),{
-		kind: EIconWrapperTypes.DEFAULT,
-		size: EIconWrapperSizes.DEFAULT,
-	});
-
-</script>
-
-<style scoped>
-	.icon-wrapper_offset-md :deep(.notification-badge) {
-		top: 4px;
-		right: 4px;
-	}
-
-	.icon-wrapper_offset-lg :deep(.notification-badge) {
-		top: 8px;
-		right: 8px;
-	}
-</style>

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

@@ -1,74 +0,0 @@
-export enum EInputKinds {
-	PRIMARY = "PRIMARY",
-	SECONDARY = "SECONDARY",
-	ERROR = "ERROR",
-}
-
-export enum EInputType {
-	TEXT = "text",
-	NUMBER = "number",
-	TEL = "tel",
-	PASSWORD = "password",
-	EMAIL = "email",
-	DATE = "date",
-}
-
-export enum EAutocomplete {
-	OFF = "off",
-	ON = "on", // dont forget to add name attribute to input (custom one)
-	NAME = "name", // full name
-	GIVEN_NAME = "given-name",
-	ADDITIONAL_NAME = "additional-name",
-	FAMILY_NAME = "family-name",
-
-	HONORIFIC_PREFIX = "honorific-prefix",
-	NICKNAME = "nickname",
-
-	EMAIL = "email",
-	USERNAME = "username",
-	NEW_PASSWORD = "new-password",
-	CURRENT_PASSWORD = "current-password",
-	ORGANIZATION_TITLE = "organization-title",
-	ORGANIZATION = "organization",
-	STREET_ADDRESS = "street-address",
-	SHIPPING = "shipping",
-	BUILDING = "building",
-	ADDRESS_LINE1 = "address-line1",
-	ADDRESS_LINE2 = "address-line2",
-	ADDRESS_LINE3 = "address-line3",
-	ADDRESS_LEVEL4 = "address-level4",
-	ADDRESS_LEVEL3 = "address-level3",
-	ADDRESS_LEVEL2 = "address-level2",
-	ADDRESS_LEVEL1 = "address-level1",
-	COUNTRY = "country",
-	COUNTRY_NAME = "country-name",
-	POSTAL_CODE = "postal-code",
-	CC_NAME = "cc-name",
-	CC_GIVEN_NAME = "cc-given-name",
-	CC_ADDITIONAL_NAME = "cc-additional-name",
-	CC_FAMILY_NAME = "cc-family-name",
-	CC_NUMBER = "cc-number",
-	CC_EXP = "cc-exp",
-	CC_EXP_MONTH = "cc-exp-month",
-	CC_EXP_YEAR = "cc-exp-year",
-	CC_CSC = "cc-csc",
-	CC_TYPE = "cc-type",
-	TRANSACTION_CURRENCY = "transaction-currency",
-	TRANSACTION_AMOUNT = "transaction-amount",
-	LANGUAGE = "language",
-	BIRTHDAY = "bday",
-	BIRTHDAY_DAY = "bday-day",
-	BIRTHDAY_MONTH = "bday-month",
-	BIRTHDAY_YEAR = "bday-year",
-	SEX = "sex",
-	TEL= "tel",
-	TEL_COUNTRY_CODE = "tel-country-code",
-	TEL_NATIONAL = "tel-national",
-	TEL_AREA_CODE = "tel-area-code",
-	TEL_LOCAL = "tel-local",
-	TEL_EXTENSION = "tel-extension",
-	IMPP = "impp",
-	URL = "url",
-	PHOTO = "photo",
-	WEBAUTHN = "webauthn",
-}

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

@@ -1,2 +0,0 @@
-export { default } from "./ui-input.vue";
-export { EInputType, EInputKinds, EAutocomplete } from "./_typings";

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

@@ -1,111 +0,0 @@
-import type { Story } from "@storybook/vue3";
-import UiInput from "./ui-input.vue";
-import Icon from "../../_samples/icon.vue";
-import { ref } from "vue";
-import { EInputKinds, EInputType, EAutocomplete } from "./_typings";
-
-export default {
-	title: "Components/ui-input",
-	component: UiInput,
-	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {
-		placeholder: {
-			control: {
-				type: "text"
-			},
-			description: "Placeholder",
-		},
-		kind: {
-			control: {
-				type: "select"
-			},
-			options: Object.values(EInputKinds),
-			description: "The input kinds",
-		},
-		type: {
-			control: {
-				type: "select"
-			},
-			options: Object.values(EInputType),
-			description: "The input type",
-		},
-		disabled: {
-			control: {
-				type: "boolean"
-			},
-			description: "The Element disabled state",
-		},
-		autocomplete: {
-			control: {
-				type: "select"
-			},
-			option: Object.values(EAutocomplete),
-			description: "The Element autocomplete state",
-		}
-	},
-	args: {
-		placeholder: "Placeholder",
-		kind: undefined,
-		disabled: false,
-		type: EInputType.TEXT,
-		autocomplete: EAutocomplete.OFF
-	}
-};
-
-type MyComponentProps = InstanceType<typeof UiInput>["$props"];
-
-const Template: Story<MyComponentProps> = (args: MyComponentProps) => ({
-	components: {
-		UiInput
-	},
-	setup() {
-		const valueModel = ref("");
-		return {
-			args,
-			valueModel
-		};
-	},
-	template: /*html*/`
-		<ui-input v-bind="args" v-model="valueModel" heading="Heading" sub-label="Sub Label" pattern="[\\d]{9}" />
-	`
-});
-
-const TemplateAll: Story<MyComponentProps> = (args: MyComponentProps) => ({
-	components: {
-		UiInput,
-		Icon
-	},
-	setup() {
-		const valueModel = ref("");
-
-		return {
-			args,
-			valueModel
-		};
-	},
-	template: /*html*/`
-		<div :style="{
-			display: 'grid',
-			gridGap: '12px'
-		}">
-			<ui-input v-bind="args" v-model="valueModel">
-				<template v-slot:prefix-icon>
-					<span class="text-secondary-alt"> € </span>
-				</template>
-			</ui-input>
-			<ui-input v-bind="args" v-model="valueModel">
-				<template v-slot:prefix-icon>
-					<Icon :size="16" class="text-secondary-alt" />
-				</template>
-			</ui-input>
-			<ui-input v-bind="args" v-model="valueModel">
-				<template v-slot:postfix-icon>
-					<Icon :size="16"  class="text-secondary-alt" />
-				</template>
-			</ui-input>
-		</div>
-	`
-});
-
-export const Default = Template.bind({});
-export const AllInputs = TemplateAll.bind({});

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

@@ -1,100 +0,0 @@
-<template>
-	<div class="ui-input">
-		<slot name="header">
-			<ui-typography
-				v-if="heading"
-				class="mb-xs"
-				:size="ETypographySizes.MD"
-				line-height
-			>
-				{{ heading }}
-			</ui-typography>
-		</slot>
-		<label
-			class="ui-input__wrapper flex w-full items-center gap-xs rounded-lg border bg-white p-sm"
-			:class="[
-				kind === EInputKinds.SECONDARY && 'border-secondary-alt-500 hover:border-secondary-alt-700',
-				kind === EInputKinds.PRIMARY && 'border-primary',
-				kind === EInputKinds.ERROR && 'border-error',
-
-				disabled && 'border-secondary-alt-300 bg-secondary-alt-200',
-			]"
-		>
-			<slot name="prefix-icon" />
-
-			<input
-				:autocomplete="autocomplete || getAutoComplete"
-				:name="name || autocomplete || getAutoComplete"
-				:value="modelValue"
-				:pattern="pattern"
-				class="w-full border-0 bg-transparent outline-none placeholder:italic placeholder:text-secondary-alt"
-				:type="type"
-				:placeholder="placeholder"
-				:maxlength="maxlength"
-				:minlength="minlength"
-				@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
-				@focus="focusHandler || undefined"
-			>
-
-			<slot name="postfix-icon" />
-		</label>
-
-		<slot name="subLabel">
-			<ui-typography
-				v-if="subLabel"
-				line-height
-				:size="ETypographySizes.SM"
-				:kind="EColors.SECONDARY_ALT"
-				class="mt-xs"
-			>
-				{{ subLabel }}
-			</ui-typography>
-		</slot>
-	</div>
-</template>
-
-<script lang="ts" setup>
-	import { computed } from "vue";
-	import { EAutocomplete, EInputKinds, EInputType } from "./_typings";
-	import UiTypography, { ETypographySizes, EColors } from "../ui-typography";
-
-	const props = withDefaults(defineProps<{
-		placeholder?: string;
-		modelValue: string | number;
-		disabled?: boolean;
-		kind?: EInputKinds;
-		heading?: string;
-		subLabel?: string;
-		type?: EInputType;
-		pattern?: string;
-		maxlength?: string;
-		minlength?: string;
-		focusHandler?: (e:FocusEvent) => void;
-		autocomplete?: EAutocomplete;
-		name?: string;
-	}>(), {
-		modelValue: "",
-		placeholder: "",
-		autocomplete: undefined,
-		name: undefined,
-		heading: undefined,
-		subLabel: undefined,
-		pattern: undefined,
-		maxlength: undefined,
-		minlength: undefined,
-		type: EInputType.TEXT,
-		focusHandler: ()=>undefined,
-		kind: EInputKinds.SECONDARY
-	});
-
-	defineEmits(["update:modelValue"]);
-
-	const getAutoComplete = computed(()=> {
-		switch (props.type) {
-			case EInputType.PASSWORD: return EAutocomplete.CURRENT_PASSWORD;
-			case EInputType.EMAIL: return EAutocomplete.EMAIL;
-			default: return undefined;
-		}
-	});
-
-</script>

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

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