bonkers-ui 1.0.9 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.9",
+  "version": "1.0.12",
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
@@ -13,48 +13,48 @@
     "i": "yarn install --frozen-lockfile"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/free-regular-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-brands-svg-icons": "^6.2.0",
+    "@fortawesome/free-regular-svg-icons": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/vue-fontawesome": "^3.0.1",
-    "vue": "^3.2.37"
+    "vue": "^3.2.38"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-vite": "^0.1.36",
-    "@storybook/vue3": "^6.5.9",
+    "@storybook/builder-vite": "^0.2.2",
+    "@storybook/vue3": "^6.5.10",
     "@types/jest": "^28.1.3",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
-    "@vitejs/plugin-vue": "^2.3.3",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
+    "@vitejs/plugin-vue": "^3.0.3",
     "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/test-utils": "^2.0.0",
     "@vue/vue3-jest": "^27.0.0",
     "babel-jest": "27",
-    "eslint": "^8.18.0",
-    "eslint-plugin-vue": "^9.1.1",
+    "eslint": "^8.23.0",
+    "eslint-plugin-vue": "^9.4.0",
     "gh-pages": "^4.0.0",
     "husky": "^8.0.1",
     "jest": "27.3.1",
     "lint-staged": "^13.0.2",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.16",
     "postcss-html": "^1.4.1",
-    "storybook-tailwind-dark-mode": "^1.0.12",
-    "stylelint": "^14.9.1",
-    "stylelint-config-recommended": "^8.0.0",
+    "storybook-tailwind-dark-mode": "^1.0.13",
+    "stylelint": "^14.11.0",
+    "stylelint-config-recommended": "^9.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard": "^26.0.0",
-    "tailwindcss": "^3.1.4",
+    "stylelint-config-standard": "^28.0.0",
+    "tailwindcss": "^3.1.8",
     "ts-jest": "^27.0.7",
-    "typescript": "^4.7.4",
-    "vite": "^2.9.12",
+    "typescript": "^4.8.2",
+    "vite": "^3.0.9",
     "vue-eslint-parser": "^9.0.3",
     "vue-loader": "^17.0.0",
-    "vue-tsc": "^0.39.0"
+    "vue-tsc": "^0.40.5"
   },
   "jest": {
     "preset": "ts-jest",

package/src/components/ui-alert/_types.ts

@@ -0,0 +1,6 @@
+export enum EAlertTypes {
+	PRIMARY = "PRIMARY",
+	SECONDARY = "SECONDARY",
+	ERROR = "ERROR",
+	WARNING = "WARNING",
+}

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

@@ -0,0 +1,2 @@
+export { default } from "./ui-alert.vue";
+export { EAlertTypes } from "./_types";

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

@@ -0,0 +1,38 @@
+import UiAlert from "./ui-alert.vue";
+import type { Story } from "@storybook/vue3";
+import { EAlertTypes } from "./_types";
+
+export default {
+	title: "Components/ui-alert",
+	component: UiAlert,
+	argTypes: {
+		kind: {
+			control: { type: "select" },
+			options: Object.values(EAlertTypes),
+			description: "The button kinds",
+		},
+	},
+	args: {
+		slot: "some description text: lorem",
+		kind: EAlertTypes.WARNING
+	}
+};
+
+type TComponentProps = InstanceType<typeof UiAlert>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiAlert },
+	setup() {
+		return { args };
+	},
+	template: `
+		<ui-alert
+			:kind="args.kind"
+			:icon="['far', 'face-smile']"
+		>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+		</ui-alert>
+	`
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,40 @@
+<template>
+	<div
+		class="ui-alert flex gap-sm p-sm border rounded-lg"
+		:class="[
+			(!kind || kind === EAlertTypes.PRIMARY) && 'border-primary',
+			kind === EAlertTypes.WARNING && 'border-warning',
+			kind === EAlertTypes.ERROR && 'border-error',
+			kind === EAlertTypes.SECONDARY && 'border-secondary',
+		]"
+	>
+		<ui-icon
+			:icon-name="icon"
+			:size="ESize.SM"
+			:class="[
+				(!kind || kind === EAlertTypes.PRIMARY) && 'text-primary',
+				kind === EAlertTypes.WARNING && 'text-warning',
+				kind === EAlertTypes.ERROR && 'text-error',
+				kind === EAlertTypes.SECONDARY && 'text-secondary',
+			]"
+		/>
+		<ui-typography
+			:size="ETypographySizes.XS"
+			line-height
+		>
+			<slot />
+		</ui-typography>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import UiTypography, { ETypographySizes } from "../ui-typography";
+	import UiIcon, { type TIconName } from "../ui-icon";
+	import { ESize } from "../../_types/sizing";
+	import { EAlertTypes } from "./_types";
+
+	defineProps<{
+		icon: TIconName
+		kind?: EAlertTypes
+	}>();
+</script>

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

@@ -32,7 +32,7 @@ const Template: Story<TComponentProps> = (args) => ({
 		return { args };
 	},
 	template: `
-		<ui-badge :icon="['far', 'face-smile']" v-bind="args">
+		<ui-badge :icon="['far', 'face-smile']" v-bind="args" class="inline-flex">
 			{{ args.slot }}
 		</ui-badge>
 	`,

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

@@ -1,6 +1,6 @@
 <template>
-	<span
-		class="ui-badge rounded-full inline-flex items-center"
+	<div
+		class="ui-badge rounded-full flex items-center content-center gap-xxs"
 		:class="[
 			(!size || size === EBadgeSize.SMALL) && 'px-xs py-xxs',
 			(!kind || kind === EBadgeKind.PRIMARY) && 'bg-primary-alt-300 text-primary-alt-700',
@@ -14,24 +14,23 @@
 	>
 		<ui-icon
 			v-if="icon"
-			class="mr-xxs"
 			:size="ESize.SM"
 			:icon-name="icon"
 		/>
 
 		<ui-typography
-			is="span"
+			v-if="slots.default"
 			:size="getBadgeSize"
 			:weight="ETextWeight.SEMI_BOLD"
 			class="whitespace-nowrap"
 		>
 			<slot />
 		</ui-typography>
-	</span>
+	</div>
 </template>
 
 <script lang="ts" setup>
-	import { computed } from "vue";
+	import { computed, useSlots } from "vue";
 	import { EBadgeKind, EBadgeSize } from "./_typings";
 	import UiIcon, { type TIconName } from "../ui-icon";
 	import { ESize } from "../../_types/sizing";
@@ -43,6 +42,8 @@
 		icon?: TIconName;
 	}>();
 
+	const slots = useSlots();
+
 	const getBadgeSize = computed(()=>{
 		switch (props.size) {
 			case EBadgeSize.MEDIUM:

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

@@ -18,7 +18,7 @@
 			kind === EButtonTypes.LINK && 'text-accent-alt hover:text-accent-alt-600 active:text-accent-alt-700 disabled:text-accent-alt-300',
 			(!size || size === EButtonSizes.DEFAULT) && 'py-sm px-md',
 			size === EButtonSizes.SMALL && 'py-xs px-md',
-			size === EButtonSizes.MEDIUM && 'py-xs px-xs',
+			size === EButtonSizes.MEDIUM && 'py-sm px-sm',
 			size === EButtonSizes.LARGE && 'py-md px-md',
 			fullWidth && 'w-full',
 			disabled && 'pointer-events-none',

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

@@ -68,9 +68,8 @@ const Template: Story<TComponentProps> = (args) => ({
 						class="mb-xs"
 						:key="item"
 						:icon="['far', 'face-smile']"
-					>
-						Feature item {{ item }}
-					</ui-list-item>
+						:title="'Feature item ' + item"
+					/>
 				</ul>
 
 				<ui-typography

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

@@ -49,7 +49,7 @@ const Template: Story<TComponentProps> = (args) => ({
 	},
 	// And then the `args` are bound to your component with `v-bind="args"`
 	template: `
-		<ui-checkbox v-bind="args" v-model:modelValue="args.modelValue">
+		<ui-checkbox v-bind="args" v-model="modelValue">
 			${args.slot}
 		</ui-checkbox>
 	`,

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

@@ -13,11 +13,11 @@
 		]"
 	>
 		<input
-			:checked="modelValue"
+			v-model="checkboxModel"
 			class="appearance-none absolute"
 			type="checkbox"
+			:value="value"
 			:disabled="disabled"
-			@input="$emit('update:modelValue', !!($event.target as HTMLInputElement)?.value)"
 		>
 		<span
 			class="ui-checkbox_custom w-md h-md flex items-center justify-center border border-secondary-alt-500 rounded relative hover:border-secondary-alt-700"
@@ -50,21 +50,32 @@
 </template>
 
 <script lang="ts" setup>
-	import { useSlots } from "vue";
+	import { useSlots, computed } from "vue";
 	import { EJustify } from "../../_types/align";
 
 	const slots = useSlots();
 
-	defineProps<{
-		modelValue: boolean;
+	const props = defineProps<{
+		modelValue: boolean | unknown[];
 		justify?: EJustify;
 		invertOrder?: boolean;
 		disabled?: boolean;
+		value?: string;
 	}>();
 
-	defineEmits<{
-		(e: "update:modelValue", state: boolean): void
+	const emit = defineEmits<{
+		(e: "update:modelValue", state: unknown): void
 	}>();
+
+	const checkboxModel = computed({
+		get() {
+			return props.modelValue;
+		},
+		set(value) {
+			emit("update:modelValue", value);
+		}
+	});
+
 </script>
 
 <style scoped>

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

@@ -1,28 +1,36 @@
 <template>
 	<div
-		class="ui-input-range relative h-lg"
+		class="ui-input-range relative h-xl mx-xs"
 	>
 		<input
-			class="appearance-none cursor-pointer bg-transparent w-full h-full"
+			ref="track"
+			v-model="rangeModel"
+			class="appearance-none absolute cursor-pointer bg-transparent w-full h-full"
 			type="range"
 			:min="min"
 			:max="max"
-			:value="modelValue"
 			:step="step"
-			@input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+			@touchmove="moveHandler"
 		>
-		<div class="ui-input-range__line h-xs w-full bg-secondary-alt rounded absolute left-0 -z-10" />
 		<div
-			class="ui-input-range__line h-xs bg-primary rounded absolute left-0 -z-10"
+			class="ui-input-range__line h-xs w-full bg-secondary-alt rounded absolute left-0 -z-10 -translate-y-1/2"
+		/>
+		<div
+			class="ui-input-range__line h-xs bg-primary rounded absolute left-0 -z-10 -translate-y-1/2"
 			:style="{
 				width: getPercentage + '%',
 			}"
 		/>
+
+		<div
+			class="ui-input-range__thumb bg-primary absolute border-8 border-white rounded-full box-content -translate-y-1/2 -translate-x-1/2"
+			:style="{left: getPercentage + '%'}"
+		/>
 	</div>
 </template>
 
 <script lang="ts" setup>
-	import { computed } from "vue";
+	import { computed, ref } from "vue";
 
 	const props = defineProps<{
 		modelValue: string | number;
@@ -31,42 +39,79 @@
 		step: string | number;
 	}>();
 
-	defineEmits<{
+	const emit = defineEmits<{
 		(e: "update:modelValue", state: string | number): void
 	}>();
 
+	const rangeModel = computed({
+		get() {
+			return props.modelValue;
+		},
+		set(value) {
+			emit("update:modelValue", value);
+		}
+	});
+
+	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) => {
+		rangeModel.value = parseMouseMove(e) || 0;
+	};
+
 </script>
 
 <style scoped>
 	input[type="range"]::-webkit-slider-thumb {
 		appearance: none;
-		background-color: var(--color-primary);
-		height: 13px;
-		width: 13px;
-		border-radius: 50%;
-		border: var(--xs) solid var(--color-white);
-		box-shadow: 0 0 0 4px var(--color-primary);
-		box-sizing: content-box;
-		z-index: 1;
+		height: 8px;
+		width: 8px;
+		transform: scale(5);
+		background-color: transparent;
+		border: 0;
+		box-shadow: none;
 	}
 
 	input[type="range"]::-moz-range-thumb {
 		appearance: none;
-		background-color: var(--color-primary);
-		height: 13px;
-		width: 13px;
-		border-radius: 50%;
-		border: var(--xs) solid var(--color-white);
-		box-shadow: 0 0 0 4px var(--color-primary);
-		box-sizing: content-box;
-		z-index: 1;
+		background-color: transparent;
+		border: 0;
+		box-shadow: none;
 	}
 
 	.ui-input-range__line {
 		top: 50%;
-		transform: translate3d(0, -50%, 0);
+	}
+
+	.ui-input-range__thumb {
+		top: 50%;
+		height: 13px;
+		width: 13px;
+		box-shadow: 0 0 0 4px var(--color-primary);
 	}
 </style>

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

@@ -1,33 +1,37 @@
-import UiIconList from "./ui-list-item.vue";
+import UiListItem from "./ui-list-item.vue";
 import type { Story } from "@storybook/vue3";
 
 export default {
 	title: "Components/ui-list-item",
-	component: UiIconList,
-	argTypes: {},
+	component: UiListItem,
+	argTypes: {
+		description: {
+			control: { type: "text" },
+			title: "The Element title",
+		}
+	},
 	args: {
-		slot: "default text",
+		slot: "some description text: lorem",
+		title: "default text",
 	}
 };
 
-type TComponentProps = InstanceType<typeof UiIconList>["$props"];
+type TComponentProps = InstanceType<typeof UiListItem>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiIconList },
+	components: { UiListItem },
 	setup() {
 		return { args };
 	},
 	template: `
-		<ul>
-			<ui-icon-list :icon="['far', 'face-smile']">
-				{{args.slot}}
-			</ui-icon-list>
-			<ui-icon-list :icon="['far', 'face-smile']">
-				{{args.slot}}
-			</ui-icon-list>
-			<ui-icon-list :icon="['far', 'face-smile']">
+		<ul class="grid gap-sm">
+			<ui-list-item :icon="['far', 'face-smile']" :title="args.title">
+			</ui-list-item>
+			<ui-list-item :icon="['far', 'face-smile']" :title="args.title">
 				{{args.slot}}
-			</ui-icon-list>
+			</ui-list-item>
+			<ui-list-item :icon="['far', 'face-smile']" :title="args.title">
+			</ui-list-item>
 		</ul>
 	`
 });

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

@@ -1,5 +1,5 @@
 <template>
-	<li class="ui-icon-list">
+	<li class="ui-icon-list flex">
 		<ui-icon
 			v-if="icon"
 			class="mr-xs"
@@ -7,23 +7,30 @@
 			:icon-name="icon"
 		/>
 
-		<ui-typography
-			is="span"
-			:weight="ETextWeight.SEMI_BOLD"
-			:size="ETypographySizes.SM"
-		>
-			<slot />
-		</ui-typography>
+		<div>
+			<ui-typography
+				:weight="ETextWeight.SEMI_BOLD"
+			>
+				{{ title }}
+			</ui-typography>
+			<p
+				v-if="$slots.default"
+				class="mt-xs"
+			>
+				<slot />
+			</p>
+		</div>
 	</li>
 </template>
 
 <script lang="ts" setup>
 	import UiIcon, { type TIconName } from "../ui-icon";
 	import { ESize } from "../../_types/sizing";
-	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+	import UiTypography, { ETextWeight } from "../ui-typography";
 
 	defineProps<{
 		icon?: TIconName;
+		title?: string;
 	}>();
 
 </script>

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

@@ -13,7 +13,7 @@
 		>
 			<select
 				v-model="localModel"
-				class="appearance-none bg-transparent border-0 m-0 outline-0 w-full p-sm cursor-pointer italic text-secondary-alt"
+				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)"
 			>
 				<option

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

@@ -10,7 +10,7 @@
 				<input
 					v-model="localValue"
 					type="radio"
-					class="appearance-none"
+					class="appearance-none absolute"
 					:value="tab"
 					:name="name || 'default'"
 					@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"

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

@@ -37,7 +37,7 @@ const Template: Story<TComponentProps> = (args) => ({
 		return { args, modelValue };
 	},
 	template: `
-		<ui-toggle v-bind="args" v-model:model-value="modelValue" header="Header" :title="args.slot" />
+		<ui-toggle v-bind="args" v-model="modelValue" header="Header" :title="args.slot" />
 	`,
 });
 

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

@@ -21,10 +21,10 @@
 				class="ui-input__input-wrapper block relative h-md"
 			>
 				<input
+					v-model="checkboxModel"
 					type="checkbox"
 					class="appearance-none absolute w-0 h-0 border-0"
-					:checked="modelValue"
-					@input="$emit('update:modelValue', !!($event.target as HTMLInputElement)?.value)"
+					:value="value"
 				>
 
 				<span class="ui-toggle__bg-block w-lg h-md bg-secondary-alt block rounded-full" />
@@ -60,19 +60,30 @@
 
 <script lang="ts" setup>
 	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+	import { computed } from "vue";
 
-	defineProps<{
+	const props = defineProps<{
 		header?: string;
 		title?: string;
-		modelValue: boolean;
+		modelValue: boolean | unknown[];
 		disabled?: boolean;
 		invertOrder?: boolean;
 		alignCenter?: boolean;
+		value?: string;
 	}>();
 
-	defineEmits<{
-		(e: "update:modelValue", state: boolean): void
+	const emit = defineEmits<{
+		(e: "update:modelValue", state: unknown): void
 	}>();
+
+	const checkboxModel = computed({
+		get() {
+			return props.modelValue;
+		},
+		set(value) {
+			emit("update:modelValue", value);
+		}
+	});
 </script>
 
 <style scoped>

package/src/main.css

@@ -18,3 +18,17 @@
 body {
 	font-family: var(--base-font);
 }
+
+*:focus,
+*:active {
+	outline: none;
+}
+
+input,
+textarea,
+button,
+select,
+label,
+a {
+	-webkit-tap-highlight-color: transparent;
+}