bonkers-ui 1.0.59 → 1.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bonkers-ui",
-    "version": "v1.0.59",
+    "version": "v1.0.60",
     "private": false,
     "scripts": {
         "storybook": "storybook dev -p 6006",

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-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.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="