bonkers-ui 1.0.59 → 1.0.61

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bonkers-ui",
-    "version": "v1.0.59",
+    "version": "v1.0.61",
     "private": false,
     "scripts": {
         "storybook": "storybook dev -p 6006",
@@ -22,31 +22,31 @@
         "eslint-plugin-tailwindcss": "^3.13.0",
         "storybook-addon-designs": "^6.3.1",
         "vue": "^3.3.4",
-        "vue-router": "^4.2.4"
+        "vue-router": "^4.2.5"
     },
     "devDependencies": {
-        "@storybook/addon-essentials": "^7.3.2",
-        "@storybook/addon-links": "^7.3.2",
-        "@storybook/addon-mdx-gfm": "^7.3.2",
-        "@storybook/vue3": "^7.3.2",
-        "@storybook/vue3-vite": "^7.3.2",
+        "@storybook/addon-essentials": "^7.4.5",
+        "@storybook/addon-links": "^7.4.5",
+        "@storybook/addon-mdx-gfm": "^7.4.5",
+        "@storybook/vue3": "^7.4.5",
+        "@storybook/vue3-vite": "^7.4.5",
         "@typescript-eslint/eslint-plugin": "^5.59.9",
         "@typescript-eslint/parser": "^5.59.9",
-        "@vitejs/plugin-vue": "^4.3.3",
-        "@vue/eslint-config-typescript": "^11.0.3",
+        "@vitejs/plugin-vue": "^4.3.4",
+        "@vue/eslint-config-typescript": "^12.0.0",
         "@vue/test-utils": "^2.4.1",
-        "eslint": "8.47.0",
-        "eslint-plugin-storybook": "^0.6.13",
+        "eslint": "8.50.0",
+        "eslint-plugin-storybook": "^0.6.14",
         "eslint-plugin-vue": "^9.17.0",
         "gh-pages": "^6.0.0",
         "husky": "4.3.8",
         "jsdom": "^22.1.0",
         "lint-staged": "^14.0.1",
-        "postcss": "^8.4.28",
+        "postcss": "^8.4.30",
         "postcss-html": "^1.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "storybook": "^7.3.2",
+        "storybook": "^7.4.5",
         "storybook-tailwind-dark-mode": "^1.0.22",
         "stylelint": "^15.10.3",
         "stylelint-config-recommended": "^13.0.0",
@@ -54,12 +54,12 @@
         "stylelint-config-standard": "^34.0.0",
         "tailwindcss": "^3.3.3",
         "ts-node": "^10.9.1",
-        "typescript": "^5.1.6",
+        "typescript": "^5.2.2",
         "vite": "^4.4.9",
-        "vitest": "^0.34.2",
+        "vitest": "^0.34.5",
         "vue-eslint-parser": "^9.3.1",
         "vue-loader": "^17.2.2",
-        "vue-tsc": "^1.8.8"
+        "vue-tsc": "^1.8.13"
     },
     "resolutions": {
         "strip-ansi": "^6.0.1",

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

@@ -12,7 +12,6 @@
 			<ui-typography
 				v-if="slots.default"
 				:size="getBadgeSize"
-				:weight="ETextWeight.SEMI_BOLD"
 				class="whitespace-nowrap"
 				line-height
 				:class="[

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

@@ -1,53 +1,20 @@
+import { ICON_DEFAULT } from "../../CONSTANTS";
 import UiCardCta from "../ui-card-cta";
-import type { Story } from "@storybook/vue3";
+import type { Meta } from "@storybook/vue3";
 
 export default {
 	title: "Components/ui-card-cta",
 	component: UiCardCta,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {
-		invertOrder: {
-			control: {
-				type: "boolean" 
-			},
-			description: "The Element order",
-		},
-		disabled: {
-			control: {
-				type: "boolean" 
-			},
-			description: "The full width size",
-		},
-	},
+} satisfies Meta<typeof UiCardCta>;
+
+export const Default = {
 	args: {
+		iconName: ICON_DEFAULT,
 		slot: "Description",
 		invertOrder: false,
-		disabled: false
+		disabled: false,
+		title: "Title",
+		description: "Description"
 	},
 };
-
-type TComponentProps = InstanceType<typeof UiCardCta>["$props"];
-
-const Template: Story<TComponentProps> = (args) => ({
-	components: {
-		UiCardCta 
-	},
-	setup() {
-		return {
-			args 
-		};
-	},
-	template: /*html*/ `
-		<ui-card-cta v-bind="args" :icon-name="['far', 'face-smile']">
-			<template #title>
-				Title
-			</template>
-
-			<template #description>
-				{{args.slot}}
-			</template>
-		</ui-card-cta>
-		`
-});
-
-export const Default = Template.bind({});

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

@@ -2,12 +2,14 @@
 	<button
 		class="
 			ui-card-cta
+			group
 			w-full
 			rounded-2xl
 			border
 			border-secondary-alt-500
 			bg-white
 			p-sm
+			text-left
 			shadow-md
 			outline-0
 			hover:border-secondary-700
@@ -18,12 +20,13 @@
 		:disabled="disabled"
 	>
 		<span
-			class="ui-card-cta__wrapper grid w-full items-center gap-sm"
-			:class="[
-				invertOrder && 'ui-card-cta_inverted',
-			]"
+			class="group-disabled:opcity-50 grid w-full items-center gap-sm"
+			:class="{
+				'grid-cols-[auto,1fr]': !invertOrder,
+				'grid-cols-[1fr,auto]': invertOrder,
+			}"
 		>
-			<slot name="icon">
+			<slot name="iconSlot">
 				<ui-icon-wrapper>
 					<ui-icon
 						v-if="iconName"
@@ -34,25 +37,28 @@
 				</ui-icon-wrapper>
 			</slot>
 			<span
-				v-if="$slots.title && $slots.description"
 				class="w-full"
 				:class="invertOrder && 'order-first'"
 			>
-				<ui-typography
-					:kind="EColors.SECONDARY_400"
-					class="mb-xxs"
-					line-height
-				>
-					<slot name="title" />
-				</ui-typography>
+				<slot name="titleSlot">
+					<ui-typography
+						:kind="EColors.SECONDARY_400"
+						class="mb-xxs"
+						line-height
+					>
+						{{ title }}
+					</ui-typography>
+				</slot>
 
-				<ui-typography
-					:kind="EColors.SECONDARY_300"
-					:size="ETypographySizes.SM"
-					line-height
-				>
-					<slot name="description" />
-				</ui-typography>
+				<slot name="descriptionSlot">
+					<ui-typography
+						:kind="EColors.SECONDARY_300"
+						:size="ETypographySizes.SM"
+						line-height
+					>
+						{{ description }}
+					</ui-typography>
+				</slot>
 			</span>
 		</span>
 	</button>
@@ -70,25 +76,8 @@
 	defineProps<{
 		invertOrder?: boolean;
 		disabled?: boolean;
-		iconName?: TIconName
+		iconName?: TIconName;
+		title?: string;
+		description?: string;
 	}>();
-
 </script>
-
-<style scoped>
-	.ui-card-cta {
-		text-align: unset;
-	}
-
-	.ui-card-cta__wrapper {
-		grid-template-columns: auto 1fr;
-	}
-
-	.ui-card-cta:disabled .ui-card-cta__wrapper {
-		opacity: 0.5;
-	}
-
-	.ui-card-cta_inverted {
-		grid-template-columns: 1fr auto;
-	}
-</style>

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

@@ -12,3 +12,63 @@ export enum EInputType {
 	EMAIL = "email",
 	DATE = "date",
 }
+
+export enum EAutocomplete {
+	OFF = "off",
+	ON = "on", // dont forget to add name attribute to input (custom one)
+	NAME = "name", // full name
+	GIVEN_NAME = "given-name",
+	ADDITIONAL_NAME = "additional-name",
+	FAMILY_NAME = "family-name",
+
+	HONORIFIC_PREFIX = "honorific-prefix",
+	NICKNAME = "nickname",
+
+	EMAIL = "email",
+	USERNAME = "username",
+	NEW_PASSWORD = "new-password",
+	CURRENT_PASSWORD = "current-password",
+	ORGANIZATION_TITLE = "organization-title",
+	ORGANIZATION = "organization",
+	STREET_ADDRESS = "street-address",
+	SHIPPING = "shipping",
+	BUILDING = "building",
+	ADDRESS_LINE1 = "address-line1",
+	ADDRESS_LINE2 = "address-line2",
+	ADDRESS_LINE3 = "address-line3",
+	ADDRESS_LEVEL4 = "address-level4",
+	ADDRESS_LEVEL3 = "address-level3",
+	ADDRESS_LEVEL2 = "address-level2",
+	ADDRESS_LEVEL1 = "address-level1",
+	COUNTRY = "country",
+	COUNTRY_NAME = "country-name",
+	POSTAL_CODE = "postal-code",
+	CC_NAME = "cc-name",
+	CC_GIVEN_NAME = "cc-given-name",
+	CC_ADDITIONAL_NAME = "cc-additional-name",
+	CC_FAMILY_NAME = "cc-family-name",
+	CC_NUMBER = "cc-number",
+	CC_EXP = "cc-exp",
+	CC_EXP_MONTH = "cc-exp-month",
+	CC_EXP_YEAR = "cc-exp-year",
+	CC_CSC = "cc-csc",
+	CC_TYPE = "cc-type",
+	TRANSACTION_CURRENCY = "transaction-currency",
+	TRANSACTION_AMOUNT = "transaction-amount",
+	LANGUAGE = "language",
+	BIRTHDAY = "bday",
+	BIRTHDAY_DAY = "bday-day",
+	BIRTHDAY_MONTH = "bday-month",
+	BIRTHDAY_YEAR = "bday-year",
+	SEX = "sex",
+	TEL= "tel",
+	TEL_COUNTRY_CODE = "tel-country-code",
+	TEL_NATIONAL = "tel-national",
+	TEL_AREA_CODE = "tel-area-code",
+	TEL_LOCAL = "tel-local",
+	TEL_EXTENSION = "tel-extension",
+	IMPP = "impp",
+	URL = "url",
+	PHOTO = "photo",
+	WEBAUTHN = "webauthn",
+}

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

@@ -1,2 +1,2 @@
 export { default } from "./ui-input.vue";
-export { EInputType, EInputKinds } from "./_typings";
+export { EInputType, EInputKinds, EAutocomplete } 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 { EInputKinds, EInputType } from "./_typings";
+import { EInputKinds, EInputType, EAutocomplete } from "./_typings";
 
 export default {
 	title: "Components/ui-input",
@@ -11,36 +11,44 @@ export default {
 	argTypes: {
 		placeholder: {
 			control: {
-				type: "text" 
+				type: "text"
 			},
 			description: "Placeholder",
 		},
 		kind: {
 			control: {
-				type: "select" 
+				type: "select"
 			},
 			options: Object.values(EInputKinds),
 			description: "The input kinds",
 		},
 		type: {
 			control: {
-				type: "select" 
+				type: "select"
 			},
 			options: Object.values(EInputType),
 			description: "The input type",
 		},
 		disabled: {
 			control: {
-				type: "boolean" 
+				type: "boolean"
 			},
 			description: "The Element disabled state",
 		},
+		autocomplete: {
+			control: {
+				type: "select"
+			},
+			option: Object.values(EAutocomplete),
+			description: "The Element autocomplete state",
+		}
 	},
 	args: {
 		placeholder: "Placeholder",
 		kind: undefined,
 		disabled: false,
-		type: EInputType.TEXT
+		type: EInputType.TEXT,
+		autocomplete: EAutocomplete.OFF
 	}
 };
 

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

@@ -23,7 +23,8 @@
 			<slot name="prefix-icon" />
 
 			<input
-				:autocomplete="getAutoComplete()"
+				:autocomplete="autocomplete || getAutoComplete"
+				:name="name || autocomplete || getAutoComplete"
 				:value="modelValue"
 				:pattern="pattern"
 				class="w-full border-0 bg-transparent outline-none placeholder:italic placeholder:text-secondary-alt"
@@ -32,7 +33,7 @@
 				:maxlength="maxlength"
 				:minlength="minlength"
 				@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
-				@focus="focusHandler || (()=>undefined)"
+				@focus="focusHandler || undefined"
 			>
 
 			<slot name="postfix-icon" />
@@ -53,7 +54,8 @@
 </template>
 
 <script lang="ts" setup>
-	import { EInputKinds, EInputType } from "./_typings";
+	import { computed } from "vue";
+	import { EAutocomplete, EInputKinds, EInputType } from "./_typings";
 	import UiTypography, { ETypographySizes, EColors } from "../ui-typography";
 
 	const props = withDefaults(defineProps<{
@@ -68,11 +70,13 @@
 		maxlength?: string;
 		minlength?: string;
 		focusHandler?: (e:FocusEvent) => void;
-		autocomplete?: string;
+		autocomplete?: EAutocomplete;
+		name?: string;
 	}>(), {
 		modelValue: "",
 		placeholder: "",
-		autocomplete: "",
+		autocomplete: undefined,
+		name: undefined,
 		heading: undefined,
 		subLabel: undefined,
 		pattern: undefined,
@@ -85,13 +89,12 @@
 
 	defineEmits(["update:modelValue"]);
 
-	const getAutoComplete =()=> {
-		if (props.autocomplete !== "") return props.autocomplete;
+	const getAutoComplete = computed(()=> {
 		switch (props.type) {
-			case EInputType.PASSWORD: return "current-password";
-			case EInputType.EMAIL: return "email";
-			default: return "off";
+			case EInputType.PASSWORD: return EAutocomplete.CURRENT_PASSWORD;
+			case EInputType.EMAIL: return EAutocomplete.EMAIL;
+			default: return undefined;
 		}
-	};
+	});
 
 </script>

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

@@ -1,7 +1,7 @@
 <template>
 	<div class="ui-progress">
 		<div
-			class="relative h-xs w-full overflow-hidden rounded-lg bg-primary-50"
+			class="relative h-xs w-full overflow-hidden rounded-lg bg-primary-200"
 		>
 			<div
 				class="

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

@@ -8,7 +8,7 @@ export default {
 	argTypes: {
 		disabled: {
 			control: {
-				type: "boolean" 
+				type: "boolean"
 			},
 			description: "The Element disabled state",
 		}
@@ -22,7 +22,7 @@ type TComponentProps = InstanceType<typeof UiSelect>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
 	components: {
-		UiSelect 
+		UiSelect
 	},
 	setup() {
 		const list = ["Option 1", "Option 2", "Option 3"];
@@ -30,17 +30,11 @@ const Template: Story<TComponentProps> = (args) => ({
 		return {
 			args,
 			valueModel,
-			list 
+			list
 		};
 	},
 	template: /*html*/`
 		<ui-select v-bind="args" v-model="valueModel" heading="Heading" subLabel="Sub Label">
-			<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"/>
-				</svg>
-			</template>
-
 			<option
 				v-for="item in list"
 				:key="item"

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

@@ -32,7 +32,20 @@
 			</select>
 
 			<div class="absolute right-sm top-1/2 -translate-y-1/2">
-				<slot name="postfix-icon" />
+				<slot name="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"
+						/>
+					</svg>
+				</slot>
 			</div>
 		</div>
 		<slot name="subLabel">

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

@@ -93,6 +93,7 @@
 </template>
 
 <script lang="ts" setup>
+	import type { Component } from "vue";
 	import { ETextAlign, ETextTransform, ETextWeight, ETypographySizes } from "./_typings";
 	import { EColors } from "../../_types/colors";
 
@@ -104,6 +105,6 @@
 		lineHeight?: boolean;
 		textTransform?: ETextTransform;
 		underline?: boolean;
-		is?: string;
+		is?: string | Component;
 	}>();
 </script>