bonkers-ui 1.0.61 → 1.0.62

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

@@ -1,92 +0,0 @@
-<template>
-	<label
-		class="
-		ui-radio-compact
-		relative
-		"
-	>
-		<input
-			v-model="radioModel"
-			type="radio"
-			:name="name"
-			:value="value"
-			class="group peer absolute appearance-none"
-			:disabled="disabled"
-		>
-		<div
-			class="
-			ui-radio-compact_content
-			box-border
-			grid
-			cursor-pointer
-			items-center
-			justify-items-center
-			rounded-xl
-			border
-			border-secondary-alt-500
-			bg-white
-			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
-			"
-		>
-
-			<ui-typography
-				class="px-md py-sm"
-				:size="ETypographySizes.MD"
-				line-height
-				:align="ETextAlign.CENTER"
-			>
-				<slot />
-			</ui-typography>
-
-		</div>
-	</label>
-</template>
-
-<script lang="ts" setup>
-	import { computed } from "vue";
-	import UiTypography, { ETypographySizes, ETextAlign } from "../ui-typography";
-
-	const props = defineProps<{
-		modelValue: string | number | boolean;
-		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-radio-fancy/_typings.ts

@@ -1,5 +0,0 @@
-export enum ERadioSizes {
-	DEFAULT = "default",
-	MINIMAL = "minimal",
-	COMPACT = "compact"
-}

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

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

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

@@ -1,81 +0,0 @@
-import { ERadioSizes } from "./_typings";
-import UiRadioFancy from "../ui-radio-fancy";
-import { ICON_DEFAULT } from "./../../CONSTANTS";
-import UiTypography, { ETypographySizes } from "../ui-typography";
-import type { Meta } from "@storybook/vue3";
-import { ref } from "vue";
-
-const meta: Meta<typeof UiRadioFancy> =  {
-	title: "Components/ui-radio-fancy",
-	component: UiRadioFancy,
-	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {
-		disabled: {
-			control: {
-				type: "boolean"
-			},
-			description: "The full width size",
-		},
-		radioSize: {
-			control: {
-				type: "select"
-			},
-			options: Object.values(ERadioSizes),
-			description: "The radio kinds",
-		},
-	},
-};
-
-export default meta;
-
-export const Default = {
-	args: {
-		iconName: ICON_DEFAULT,
-		default: "Description",
-		invertOrder: false,
-		disabled: false,
-		radioSize: ERadioSizes.DEFAULT
-	},
-};
-
-export const Compact = {
-	args: {
-		default: "1",
-		radioSize: ERadioSizes.COMPACT
-	},
-
-	render: (args) => ({
-		components: {
-			UiRadioFancy,
-			UiTypography
-		},
-		setup() {
-			const modelValue = ref("1");
-			return {
-				args,
-				ETypographySizes,
-				modelValue
-			};
-		},
-		template: /*html*/`
-		<div class="flex gap-sm" :style="{}">
-			<ui-radio-fancy v-for="item in 2"
-				:key="item"
-				:value="String(item)"
-				v-model="modelValue"
-				name="radio" title="title"
-				:radioSize="args.radioSize"
-				:disabled="args.disabled"
-			>
-				<ui-typography :size="ETypographySizes.MD">
-					{{item}}
-				</ui-typography>
-			</ui-radio-fancy>
-		</div>
-		`,
-		args: {
-			default: "1",
-			radioSize: ERadioSizes.COMPACT
-		},
-	}),
-};

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

@@ -1,132 +0,0 @@
-<template>
-	<label
-		class="
-			ui-radio-fancy
-			relative
-
-		"
-		:class="disabled && 'pointer-events-none'"
-	>
-		<input
-			v-model="radioModel"
-			type="radio"
-			:name="name"
-			:value="value"
-			class="group peer absolute appearance-none"
-			:disabled="disabled"
-		>
-		<div
-			class="
-				ui-radio-fancy__content
-				box-border
-				h-full
-				w-full
-				cursor-pointer 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',
-				radioSize === ERadioSizes.MINIMAL && 'flex gap-sm align-middle',
-				radioSize === ERadioSizes.COMPACT && 'grid cursor-pointer grid-flow-col px-md'
-
-			]"
-		>
-			<div
-				v-if="radioSize === ERadioSizes.DEFAULT && iconName"
-			>
-				<ui-icon
-					:icon-name="iconName"
-					:size="ESize.MD"
-					class=" mb-md peer-checked:text-primary-500"
-					:class="[value === modelValue && 'text-primary',
-						disabled && 'text-secondary-alt-400',
-						disabled && value === modelValue && 'text-primary-300'
-					]"
-				/>
-			</div>
-			<div v-else-if="radioSize === ERadioSizes.MINIMAL && iconName">
-				<ui-icon
-					:icon-name="iconName"
-					:size="ESize.MD"
-					:class="[value === modelValue && 'text-primary',
-						disabled && 'text-secondary-alt-400',
-						disabled && value === modelValue && 'text-primary-300'
-					]"
-				/>
-
-			</div>
-			<div
-				v-else-if="radioSize === ERadioSizes.COMPACT"
-			/>
-			<ui-typography
-				:size="ETypographySizes.SM"
-				:kind="EColors.SECONDARY"
-				class="pt-xxs"
-			>
-				<slot />
-			</ui-typography>
-		</div>
-	</label>
-</template>
-
-<script lang="ts" setup>
-	import { computed } from "vue";
-	import UiTypography, { ETypographySizes } from "../ui-typography";
-	import type { TIconName } from "../ui-icon";
-	import { ESize } from "../../_types/sizing";
-	import { EColors } from "../../_types/colors";
-	import { ERadioSizes } from "./_typings";
-	import uiIcon from "../ui-icon";
-
-	const props = withDefaults(defineProps<{
-		modelValue: string | number | boolean;
-		name: string;
-		value: string | number | boolean;
-		iconName?: TIconName;
-		disabled?: boolean;
-		radioSize?: ERadioSizes;
-	}>(), {
-		radioSize: ERadioSizes.DEFAULT,
-		iconName: undefined
-	});
-	const emit = defineEmits(["update:modelValue"]);
-	const radioModel = computed({
-		get() {
-			return props.modelValue;
-		},
-		set(value) {
-			emit("update:modelValue", value);
-		}
-	});
-</script>

package/src/components/ui-result-card-range/_types.ts

@@ -1,8 +0,0 @@
-export enum EResultCardRangeSizes {
-	DEFAULT = "DEFAULT",
-}
-
-export enum EResultCardRangeTypes {
-	DEFAULT = "DEFAULT",
-	FULL = "FULL",
-}

package/src/components/ui-result-card-range/index.ts

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

package/src/components/ui-result-card-range/ui-result-card-range.stories.ts

@@ -1,78 +0,0 @@
-import UiResultCardRange from "../ui-result-card-range";
-
-export default {
-	title: "Components/ui-result-card-range",
-	component: UiResultCardRange,
-	argTypes: {
-		slot: {
-			control: {
-				type: "text" 
-			},
-			description: "The slot text or component",
-		},
-		title: {
-			control: {
-				type: "text" 
-			},
-			description: "The title text",
-		},
-	},
-	args: {
-		title: "This is a Title",
-		slot: "This is the body",
-	},
-};
-
-const Template = (args) => ({
-	components: {
-		UiResultCardRange 
-	},
-	setup() {
-		return {
-			args 
-		};
-	},
-	template: /*html*/`
-		<ui-result-card-range :icon-name="['far', 'face-smile']" :title="args.title">
-			{{args.slot}}
-		</ui-result-card-range>
-    `,
-});
-
-const TemplateAll = (args) => ({
-	components: {
-		UiResultCardRange 
-	},
-	setup() {
-		return {
-			args 
-		};
-	},
-	template: /*html*/`
-    <div class="ui-result-card-range grid gap-sm w-full">
-
-		<ui-result-card-range style="grid-column: 1 / 1"
-		 	:icon-name="['far', 'face-smile']" :title="args.title">
-			{{args.slot}}
-		</ui-result-card-range>
-
-		<ui-result-card-range style="grid-column: 2 / 2"
-			 :icon-name="['far', 'face-smile']" :title="args.title">
-			 {{args.slot}}
-
-		</ui-result-card-range>
-
-		<ui-result-card-range style="grid-column: 1 / 3; flex-direction: row; justify-content: space-between;">
-
-				<b>25/02/2022</b>
-				<b>→</b>
-				<b>26/01/2023</b>
-
-		</ui-result-card-range>
-	</div>
-    `,
-});
-
-export const SingleCard = Template.bind({});
-
-export const FullCard = TemplateAll.bind({});

package/src/components/ui-result-card-range/ui-result-card-range.vue

@@ -1,46 +0,0 @@
-<template>
-	<div
-		class="
-			ui-result-card-range
-			flex
-			w-full
-			flex-col
-			items-center
-			rounded-3xl
-			border-4
-			border-secondary-alt-300
-			bg-secondary-alt-200
-			p-md text-secondary-500"
-	>
-		<ui-icon
-			v-if="iconName"
-			class="mb-md"
-			:size="ESize.MD"
-			:icon-name="iconName"
-		/>
-		<ui-typography
-			v-if="title"
-			class="mb-xs"
-			:size="ETypographySizes.MD"
-			:weight="ETextWeight.SEMI_BOLD"
-			:align="ETextAlign.CENTER"
-		>
-			{{ title }}
-		</ui-typography>
-
-		<slot />
-	</div>
-</template>
-
-<script lang="ts" setup>
-	import uiIcon, { ESize, type TIconName } from "../ui-icon";
-	import UiTypography, { ETextWeight, ETypographySizes, ETextAlign } from "../ui-typography";
-
-	defineProps<{
-		iconName?: TIconName;
-		title?: string;
-		size?: string;
-		description?: string;
-	}>();
-
-</script>

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

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

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

@@ -1,61 +0,0 @@
-import UiRipple from "./ui-ripple.vue";
-import UiButton from "../ui-button";
-import UiTypography from "../ui-typography";
-
-import type { Story } from "@storybook/vue3";
-
-export default {
-	title: "Components/ui-ripple",
-	component: UiRipple,
-	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {},
-};
-
-type TComponentProps = InstanceType<typeof UiRipple>["$props"];
-
-const Template: Story<TComponentProps> = (args) => ({
-	components: {
-		UiRipple
-	},
-	setup() {
-		return {
-			args
-		};
-	},
-	template: `
-		<div
-			:style="{
-				width: '500px',
-				height: '500px',
-				border: '2px solid red',
-			}"
-			 class="relative">
-			<ui-ripple v-bind="args" />
-		</div>
-		`,
-});
-const Template2: Story<TComponentProps> = (args) => ({
-	components: {
-		UiRipple,
-		UiButton,
-		UiTypography
-	},
-	setup() {
-		return {
-			args
-		};
-	},
-	template: `
-		<div class="flex">
-		<ui-button class="relative">
-			<ui-typography is="div">
-				<ui-ripple v-bind="args" />
-				hello world
-			</ui-typography>
-		</ui-button>
-		</div>
-		`,
-});
-
-export const Default = Template.bind({});
-export const WithButton = Template2.bind({});

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

@@ -1,83 +0,0 @@
-<template>
-	<div
-		ref="tiBtn"
-		class="ui-ripple"
-		@click="animateRipple"
-	>
-		<slot />
-
-		<transition-group>
-			<svg
-				v-for="val in ripples"
-				:ref="inputsRefs"
-				:key="val.id"
-				viewBox="0 0 100 100"
-				xmlns="http://www.w3.org/2000/svg"
-				class="ripple"
-				:style="{'top': val.y + 'px', 'left': val.x + 'px'}"
-				fill="currentColor"
-				@animationend="rippleEnd(val.id)"
-			>
-				<circle
-					cx="50"
-					cy="50"
-					r="50"
-				/>
-			</svg>
-		</transition-group>
-	</div>
-</template>
-
-<script lang="ts" setup>
-	import { ref, type VNodeRef } from "vue";
-
-	const ripples = ref<{x:number, y:number, id:string}[]>([]);
-	const tiBtn = ref<HTMLDivElement>();
-	const inputsRefs = ref<VNodeRef>();
-
-	const animateRipple = (e:MouseEvent)=> {
-		if (tiBtn.value) {
-			const pos = tiBtn.value.getBoundingClientRect();
-
-			ripples.value.push({
-				x: e.clientX - pos.left,
-				y: e.clientY - pos.top,
-				id: Math.random().toString(36).substr(2, 9)
-			});
-		}
-	};
-	const rippleEnd = (i: string)=> {
-		ripples.value = ripples.value.filter(val=>val.id !== i);
-	};
-</script>
-
-<style>
-	.ui-ripple {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-	}
-
-	.ripple {
-		position: absolute;
-		will-change: transform, opacity;
-		transform: translate3d(-50%, -50%, 0) scale(0);
-		mix-blend-mode: screen;
-		animation: ripple 1s ease-out forwards, fade 1s ease-out forwards;
-		z-index: 1;
-	}
-
-	@keyframes ripple {
-		0% { transform: translate3d(-50%, -50%, 0) scale(0); }
-		80% { transform: translate3d(-50%, -50%, 0) scale(10); }
-		100% { transform: translate3d(-50%, -50%, 0) scale(10); }
-	}
-
-	@keyframes fade {
-		0% { opacity: 1; }
-		100% { opacity: 0; }
-	}
-</style>

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

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

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

@@ -1,49 +0,0 @@
-import UiSelect from "./ui-select.vue";
-import type { Story } from "@storybook/vue3";
-import { ref } from "vue";
-
-export default {
-	title: "Components/ui-select",
-	component: UiSelect,
-	argTypes: {
-		disabled: {
-			control: {
-				type: "boolean"
-			},
-			description: "The Element disabled state",
-		}
-	},
-	args: {
-		disabled: false,
-	},
-};
-
-type TComponentProps = InstanceType<typeof UiSelect>["$props"];
-
-const Template: Story<TComponentProps> = (args) => ({
-	components: {
-		UiSelect
-	},
-	setup() {
-		const list = ["Option 1", "Option 2", "Option 3"];
-		const valueModel = ref(list[0]);
-		return {
-			args,
-			valueModel,
-			list
-		};
-	},
-	template: /*html*/`
-		<ui-select v-bind="args" v-model="valueModel" heading="Heading" subLabel="Sub Label">
-			<option
-				v-for="item in list"
-				:key="item"
-				:value="item"
-			>
-				{{ item }}
-			</option>
-		</ui-select>
-	`,
-});
-
-export const Default = Template.bind({});