bonkers-ui 1.0.15 → 1.0.17

package/README.md

@@ -6,7 +6,9 @@ This template should help get you started developing with Vue 3 and TypeScript i
 - [webstorm](https://www.jetbrains.com/webstorm/)
 - [VS Code](https://code.visualstudio.com/)
   - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+  - [Volar-ts](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)
   - [editorconfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
+  - [tilewind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
 
 ## Setup project
 - `yarn i` to install all dependencies
@@ -32,3 +34,4 @@ This template should help get you started developing with Vue 3 and TypeScript i
 
 ## Flow to deploy github
 - To deploy github-pages use `yarn build-storybook` + `yarn deploy`
+v.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
@@ -35,7 +35,7 @@
     "@vue/test-utils": "^2.0.0",
     "@vue/vue3-jest": "^27.0.0",
     "babel-jest": "27",
-    "eslint": "^8.23.0",
+    "eslint": "8.22.0",
     "eslint-plugin-vue": "^9.4.0",
     "gh-pages": "^4.0.0",
     "husky": "^8.0.1",

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

@@ -1,4 +1,12 @@
-export enum EInputTypes {
+export enum EInputKinds {
 	PRIMARY = "primary",
 	ERROR = "error",
 }
+
+export enum EInputType {
+	TEXT = "text",
+	NUMBER = "number",
+	TEL = "tel",
+	PASSWORD = "password",
+	EMAIL = "email"
+}

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

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

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

@@ -2,7 +2,7 @@ import type { Story } from "@storybook/vue3";
 import UiInput from "./ui-input.vue";
 import Icon from "../../_samples/icon.vue";
 import { ref } from "vue";
-import { EInputTypes } from "./_typings";
+import { EInputKinds, EInputType } from "./_typings";
 
 export default {
 	title: "Components/ui-input",
@@ -15,9 +15,14 @@ export default {
 		},
 		kind: {
 			control: { type: "select" },
-			options: Object.values(EInputTypes),
+			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",
@@ -27,6 +32,7 @@ export default {
 		placeholder: "Placeholder",
 		kind: undefined,
 		disabled: false,
+		type: EInputType.TEXT
 	}
 };
 

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

@@ -1,4 +1,4 @@
-<template>
+EInputKinds<template>
 	<div class="ui-input">
 		<ui-typography
 			v-if="heading"
@@ -11,22 +11,23 @@
 			class="ui-input__wrapper flex w-full rounded-lg border bg-white items-center p-sm gap-xs"
 			:class="[
 				!kind && 'border-secondary-alt-500 hover:border-secondary-alt-700',
-				kind === EInputTypes.PRIMARY && 'border-primary',
-				kind === EInputTypes.ERROR && 'border-error',
+				kind === EInputKinds.PRIMARY && 'border-primary',
+				kind === EInputKinds.ERROR && 'border-error',
 
 				disabled && 'border-secondary-alt-300 bg-secondary-alt-200',
 			]"
 		>
 			<slot name="prefix-icon" />
-			
+
 			<input
 				class="bg-transparent border-0 outline-none w-full"
-				type="text"
+				:type="type || 'text'"
 				:placeholder="placeholder"
 				:value="modelValue"
+				:pattern="pattern"
 				@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
 			>
-			
+
 			<slot name="postfix-icon" />
 		</div>
 		<ui-typography
@@ -40,16 +41,18 @@
 </template>
 
 <script lang="ts" setup>
-	import { EInputTypes } from "./_typings";
+	import { EInputKinds, EInputType } from "./_typings";
 	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
 
 	defineProps<{
 		placeholder?: string;
 		modelValue: string;
 		disabled?: boolean;
-		kind?: EInputTypes;
+		kind?: EInputKinds;
 		heading?: string;
 		subLabel?: string;
+		type?: EInputType;
+		pattern?: string;
 	}>();
 
 	defineEmits(["update:modelValue"]);

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

@@ -1,11 +1,11 @@
 <template>
 	<div
-		class="ui-input-range relative h-xl mx-xs"
+		class="ui-input-range relative h-lg mx-xs py-xs box-content"
 	>
 		<input
 			ref="track"
 			v-model="rangeModel"
-			class="appearance-none absolute cursor-pointer bg-transparent w-full h-full"
+			class="appearance-none absolute top-0 left-0 cursor-pointer bg-transparent w-full h-full"
 			type="range"
 			:min="min"
 			:max="max"

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

@@ -26,9 +26,8 @@ const Template: Story<TComponentProps> = (args) => ({
 		const valueModel = ref(list[0]);
 		return { args, valueModel, list };
 	},
-	template: `
+	template: /*html*/`
 		<ui-select v-bind="args" :list="list" v-model:value="valueModel" heading="heading" subLabel="subLabel">
-			{{ args.slot }}
 			<template #postfix-icon>
 				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path d="M13.25 6.8125L8.5 11.2812C8.34375 11.4375 8.15625 11.5 8 11.5C7.8125 11.5 7.625 11.4375 7.46875 11.3125L2.71875 6.8125C2.40625 6.53125 2.40625 6.0625 2.6875 5.75C2.96875 5.4375 3.4375 5.4375 3.75 5.71875L8 9.71875L12.2188 5.71875C12.5312 5.4375 13 5.4375 13.2812 5.75C13.5625 6.0625 13.5625 6.53125 13.25 6.8125Z" fill="currentColor"/>

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

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