bonkers-ui 1.0.43 → 1.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.43",
+  "version": "1.0.44",
   "private": false,
   "scripts": {
     "storybook": "start-storybook -p 6006",
@@ -14,13 +14,11 @@
     "i": "yarn install --frozen-lockfile"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-brands-svg-icons": "^6.2.1",
-    "@fortawesome/free-regular-svg-icons": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.3.0",
+    "@fortawesome/free-regular-svg-icons": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
-    "@vueuse/components": "^9.12.0",
-    "@vueuse/core": "^9.12.0",
     "vue": "^3.2.47"
   },
   "devDependencies": {
@@ -28,34 +26,34 @@
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-links": "^6.5.16",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-vite": "^0.2.7",
+    "@storybook/builder-vite": "^0.4.2",
     "@storybook/vue3": "^6.5.16",
-    "@typescript-eslint/eslint-plugin": "^5.50.0",
-    "@typescript-eslint/parser": "^5.50.0",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
+    "@vitejs/plugin-vue": "^4.1.0",
     "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/test-utils": "^2.2.9",
-    "eslint": "8.33.0",
+    "@vue/test-utils": "^2.3.2",
+    "eslint": "8.36.0",
     "eslint-plugin-vue": "^9.9.0",
     "gh-pages": "^5.0.0",
     "husky": "4.3.8",
-    "jsdom": "^21.1.0",
-    "lint-staged": "^13.1.0",
+    "jsdom": "^21.1.1",
+    "lint-staged": "^13.2.0",
     "postcss": "^8.4.21",
     "postcss-html": "^1.4.1",
     "storybook-tailwind-dark-mode": "^1.0.15",
-    "stylelint": "^14.16.1",
-    "stylelint-config-recommended": "^9.0.0",
+    "stylelint": "^15.3.0",
+    "stylelint-config-recommended": "^11.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard": "^29.0.0",
-    "tailwindcss": "^3.2.4",
+    "stylelint-config-standard": "^31.0.0",
+    "tailwindcss": "^3.2.7",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.1",
-    "vitest": "^0.28.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.2.1",
+    "vitest": "^0.29.7",
     "vue-eslint-parser": "^9.1.0",
     "vue-loader": "^17.0.1",
-    "vue-tsc": "^1.0.24"
+    "vue-tsc": "^1.2.0"
   },
   "lint-staged": {
     "*.{ts,tsx,vue}": [

package/src/components/ui-button/ui-button.test.ts

@@ -1,19 +1,9 @@
 import { mount } from "@vue/test-utils";
 import UiButton from "./ui-button.vue";
-import { test, expect } from "vitest";
 
-test("VButton.test.ts", async () => {
+test("VButton.test.ts", () => {
 	expect(UiButton).toBeTruthy();
 
-	it("renders props.msg when passed", () => {
-		const className = "message";
-		const wrapper = mount(UiButton, {
-			propsData: {
-				class: className
-			}
-		});
-
-		expect(wrapper.classes()).toContain(className);
-	});
-
+	const container = mount(UiButton as any);
+	expect(container).toBeTruthy();
 });

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

@@ -0,0 +1,22 @@
+<template>
+	<div>
+		<div
+			class="
+				backdrop-color
+				fixed
+				backdrop-blur-sm
+				transition-all
+				inset-0
+				z-0
+				"
+		/>
+
+		<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,8 +1,7 @@
-import { ref } from "vue";
 import type { Story } from "@storybook/vue3";
 import UiModal from "./ui-modal.vue";
 import UiButton from "../ui-button";
-import UiBackdrop from "../ui-backdrop";
+import UiBackdrop from "./ui-backdrop";
 import UiIcon from "../ui-icon";
 import UiTypography from "../ui-typography";
 import { ESize } from "../../_types/sizing";
@@ -39,64 +38,31 @@ type TComponentProps = InstanceType<typeof UiModal>["$props"];
 const Template: Story<TComponentProps> = (args) => ({
 	components: { UiModal, UiBackdrop, UiButton, UiIcon, UiTypography },
 	setup() {
-		const isVisible = ref(false);
-
-		const showModal = () => {
-			isVisible.value = true;
-		};
-
-		const closeModal = () => {
-			isVisible.value = false;
-		};
-
-		return { args, showModal, closeModal, isVisible, ESize };
+		return { args, ESize };
 	},
 	template:/*html*/`
-			<transition
-				name="ui-modal"
-				mode="out-in"
-				appear
-				enter-active-class="transition delay-100"
-				enter-from-class="opacity-0 translate-y-1/4"
-				enter-to-class="opacity-100 translate-y-0"
-				leave-active-class="transition"
-				leave-to-class="opacity-0 translate-y-1/4"
-				leave-from-class="opacity-100 translate-y-0"
-			>
-				<ui-modal
-					v-if="isVisible"
+			<ui-modal
 					:title="args.title"
 					:modalSize="args.modalSize"
-					:closeModal="closeModal"
 				>
 					<template #icon>
 						<ui-icon class="text-primary"  :icon-name="['far', 'circle-check']" :size=ESize.XL  />
 					</template>
-					<template #title>
-						<ui-typography class="text-2xl font-bold">{{ args.title }}</ui-typography>
-					</template>
 
-					<template #default >
+					<template #default>
 						{{args.body}}
 					</template>
+
 					<template #footer>
 						<ui-button
 							fullWidth
-							@click="closeModal"
 						>
 							Ok
 						</ui-button>
-						</template>
-				</ui-modal>
-			</transition>
-
-			<ui-backdrop v-if="isVisible" />
+					</template>
+			</ui-modal>
 
-			<div class="absolute" style="top: calc(50vh - 2rem); left: calc(50vw - 4rem)">
-				<ui-button @click="showModal">
-					Toggle Modal
-				</ui-button>
-			</div>
+			<ui-backdrop />
 			`
 });
 

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

@@ -1,6 +1,5 @@
 <template>
 	<div
-		v-on-click-outside="closeModal"
 		class="
 				ui-modal
 				absolute
@@ -8,7 +7,6 @@
 				flex flex-col
 				items-center
 				z-10
-				opacity-0
 				inset-0
 				rounded-2xl
 				shadow-md
@@ -28,15 +26,19 @@
 		>
 			<slot name="icon" />
 		</div>
-		<ui-typography
-			v-if="title"
-			class="my-md"
-			:weight="ETextWeight.BOLD"
-			:align="ETextAlign.CENTER"
-			:size="ETypographySizes.LG"
-		>
-			{{ title }}
-		</ui-typography>
+
+		<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
 			:weight="ETextWeight.REGULAR"
 			:align="ETextAlign.CENTER"
@@ -51,19 +53,19 @@
 		</div>
 	</div>
 </template>
+
 <script lang="ts" setup>
-	import { vOnClickOutside } from "@vueuse/components";
 	import { ETypographySizes } from "../ui-typography/";
 	import UiTypography, { ETextWeight, ETextAlign } from "../ui-typography";
 	import { EModalSizes } from "./_typings";
 
 	withDefaults(
 		defineProps<{
-			title: string;
+			title?: string;
 			modalSize?: EModalSizes;
-			closeModal: () => void;
 		}>(),
 		{
+			title: undefined,
 			modalSize: EModalSizes.SM,
 		}
 	);

package/tsconfig.json

@@ -12,8 +12,6 @@
 		"jsx": "preserve",
 		"noImplicitThis": true,
 		"isolatedModules": true,
-		"preserveValueImports": true,
-		"importsNotUsedAsValues": "error",
 		"importHelpers": true,
 		"moduleResolution": "node",
 		"skipLibCheck": true,

package/vitest.config.ts

@@ -2,14 +2,14 @@
 import { defineConfig, UserConfig } from "vite";
 import type { InlineConfig } from "vitest";
 
-import Vue from "@vitejs/plugin-vue";
+import vue from "@vitejs/plugin-vue";
 
 interface VitestConfigExport extends UserConfig {
 	test: InlineConfig;
 }
 
 export default defineConfig({
-	plugins: [Vue()],
+	plugins: [vue()],
 	test: {
 		globals: true,
 		environment: "jsdom",

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

@@ -1,42 +0,0 @@
-<template>
-	<transition-group
-		name="fade"
-		enter-active-class="transition-opacity duration-300"
-		leave-active-class="transition-opacity duration-300 opacity-0"
-		enter-from-class="opacity-0"
-		leave-to-class="opacity-0"
-	>
-		<div
-			v-if="visible"
-			class="
-				backdrop-color
-				fixed
-				backdrop-blur-sm
-				transition-all
-				inset-0
-				z-0
-				"
-		/>
-
-		<slot />
-	</transition-group>
-</template>
-
-<script lang="ts" setup>
-
-	withDefaults(
-		defineProps<{
-			visible?: boolean;
-		}>(),
-		{
-			visible: true,
-		}
-	);
-
-</script>
-
-<style lang="css" scoped>
-	.backdrop-color {
-		background-color: rgb(0 0 0 / 50%);
-	}
-</style>