bonkers-ui 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
@@ -9,7 +9,7 @@
     "lint:markup": "vue-tsc --noEmit",
     "test": "jest",
     "deploy": "gh-pages -d storybook-static",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && vue-tsc --noEmit",
     "i": "yarn install --frozen-lockfile"
   },
   "dependencies": {
@@ -54,7 +54,7 @@
     "vite": "^2.9.12",
     "vue-eslint-parser": "^9.0.3",
     "vue-loader": "^17.0.0",
-    "vue-tsc": "^0.38.1"
+    "vue-tsc": "^0.39.0"
   },
   "jest": {
     "preset": "ts-jest",

package/src/components/ui-card-cta/ui-card-cta.vue

@@ -17,7 +17,7 @@
 				:class="invertOrder && 'order-first'"
 			>
 				<ui-typography
-					:kind="ETypographyColors.SECONDARY"
+					:kind="EColors.SECONDARY"
 					:weight="ETextWeight.SEMI_BOLD"
 					class-name="mb-xxs"
 				>
@@ -25,7 +25,7 @@
 				</ui-typography>
 
 				<ui-typography
-					:kind="ETypographyColors.SECONDARY_300"
+					:kind="EColors.SECONDARY_300"
 					:size="ETypographySizes.SM"
 				>
 					<slot name="description" />
@@ -39,6 +39,7 @@
 	import { useSlots } from "vue";
 	import UiTypography from "../ui-typography";
 	import { ETypographyColors, ETypographySizes, ETextWeight } from "../ui-typography/_typings";
+	import { EColors } from "../../_types/colors";
 
 	const slots = useSlots();
 

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

@@ -18,7 +18,7 @@
 			class="appearance-none absolute"
 			type="checkbox"
 			:disabled="disabled"
-			@input="$emit('update:modelValue', $event.target.checked)"
+			@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"

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

@@ -18,7 +18,7 @@
 
 <script lang="ts" setup>
 	import { ESize } from "../../_types/sizing";
-	import { TIconName } from "./_typings";
+	import type { TIconName } from "./_typings";
 
 	defineProps<{
 		className?: string;

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

@@ -15,7 +15,7 @@
 			type="text"
 			:placeholder="placeholder"
 			:value="modelValue"
-			@input="$emit('update:modelValue', $event.target.value)"
+			@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
 		>
 		<div class="icon-wrapper">
 			<slot name="postfix-icon" />

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

@@ -19,7 +19,7 @@
 			:name="name"
 			:value="value"
 			class="appearance-none absolute"
-			@input="$emit('update:modelValue', $event.target.value)"
+			@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
 		>
 		<span
 			class="ui-radio_custom block w-md h-md border border-2 border-primary rounded-full relative"

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

@@ -12,7 +12,7 @@
 			:name="name"
 			:value="value"
 			class="appearance-none absolute"
-			@input="$emit('update:modelValue', $event.target.value)"
+			@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
 		>
 
 		<ui-icon
@@ -33,7 +33,7 @@
 <script lang="ts" setup>
 	import { computed, ref, watch } from "vue";
 	import UiTypography, { ETypographySizes, ETextWeight } from "../../ui-typography";
-	import UiIcon, { TIconName } from "../../ui-icon";
+	import UiIcon, { type TIconName } from "../../ui-icon";
 	import { ESize } from "../../../_types/sizing";
 	import { EColors } from "../../../_types/colors";
 

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

@@ -30,11 +30,11 @@
 </template>
 
 <script lang="ts" setup>
-	import { ref } from "vue";
+	import { ref, type VNodeRef } from "vue";
 
 	const ripples = ref<{x:number, y:number, id:string}[]>([]);
 	const tiBtn = ref<HTMLDivElement>();
-	const inputsRefs = ref<Array<HTMLSpanElement | null>>([]);
+	const inputsRefs = ref<VNodeRef>();
 
 	defineProps<{
 		className?: string;

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

@@ -42,7 +42,7 @@
 		emit("onFiled", generateString);
 	};
 
-	const inputHandler = (event:InputEvent, index:number)=>{
+	const inputHandler = (event:Event, index:number)=>{
 		if(index < props.inputsCount){
 			inputsRefs.value[index + 1]?.focus();
 		}
@@ -52,7 +52,7 @@
 		}
 	};
 
-	const focusHandler = (e:InputEvent) => {
+	const focusHandler = (e:FocusEvent) => {
 		if(e.target){
 			(e.target as HTMLInputElement).select();
 		}

package/src/stories/spacings/ui-spacings.vue

@@ -38,7 +38,7 @@
 	import spacings from "../../_spacing.json";
 	import { getCssVariableValue } from "../helper";
 
-	const spacingKeys = Object.keys(spacings);
+	const spacingKeys = Object.keys(spacings) as Array<keyof typeof spacings>;
 
 </script>
 

package/tsconfig.json

@@ -10,11 +10,15 @@
 		"resolveJsonModule": true,
 		"useDefineForClassFields": true,
 		"jsx": "preserve",
+		"noImplicitThis": true,
 		"isolatedModules": true,
+		"preserveValueImports": true,
+		"importsNotUsedAsValues": "error",
 		"importHelpers": true,
 		"moduleResolution": "node",
 		"skipLibCheck": true,
 		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
 		"allowSyntheticDefaultImports": true,
 		"sourceMap": true,
 		"baseUrl": ".",
@@ -22,7 +26,6 @@
 			"esnext",
 			"dom",
 			"dom.iterable",
-			"scripthost"
 		]
 	},
 	"include": [