@bcc-code/component-library-vue 0.8.0 → 0.8.4

package/dist/theme.css

@@ -1916,62 +1916,63 @@
 
 /* from ./BccAppNavigation/BccAppNavigation.css */
 @layer components {
-    .bcc-app-navigation {
-        @apply justify-center items-center flex pb-inset-bottom-2 absolute inset-x-0 bottom-0 z-20 w-full overflow-visible;
-    }
-    .bcc-app-navigation .nav {
-        @apply justify-center items-center flex dark:border-default mx-auto border border-white p-0.5;
-    
-        border-radius: 20px;
-        background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(243, 244, 246, 0.4) 100%);
-        backdrop-filter: blur(12px) saturate(160%);
-        -webkit-backdrop-filter: blur(12px) saturate(160%);
-    
-        max-width: min(96%, var(--container-lg));
-        box-shadow:
+	.bcc-app-nav {
+		@apply pb-inset-bottom-2 absolute inset-x-0 bottom-0 z-20 flex w-full items-center justify-center overflow-visible;
+	}
+	.bcc-app-nav .bcc-app-nav-container {
+		@apply dark:border-default mx-auto flex items-center justify-center border border-white p-0.5;
+
+		border-radius: 20px;
+		background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(243, 244, 246, 0.4) 100%);
+		backdrop-filter: blur(12px) saturate(160%);
+		-webkit-backdrop-filter: blur(12px) saturate(160%);
+
+		max-width: min(96%, var(--container-lg));
+		box-shadow:
             /* inner bevel (top-left highlight, bottom-right shade) */
-            inset 0 0 32px white,
-            inset 1px 0 4px -1px rgba(0, 0, 0, 0.3),
-            inset 1px -2px 0 -1px white,
-            inset -1px 2px 0 -1px white,
-            0px -1px 1px -2px rgba(16, 24, 40, 0.05),
-            0px 4px 6px -2px rgba(16, 24, 40, 0.05),
-            0px 12px 16px -4px rgba(16, 24, 40, 0.1);
-    }
-    .dark .bcc-app-navigation {
-        @apply backdrop-blur-sm;
-        background: transparent;
-        box-shadow: none;
-    }
-    
-    .bcc-app-navigation .navbar-btn {
-        @apply col text-text-subtlest relative h-12 min-w-16 rounded-xl border border-transparent px-2 opacity-90 transition-all focus:outline-none;
-    }
-    
-    .bcc-app-navigation .navbar-btn--active {
-        @apply text-brand-default bg-dark-neutral-alpha-500-a border-white opacity-100;
-        box-shadow:
+			inset 0 0 32px white,
+			inset 1px 0 4px -1px rgba(0, 0, 0, 0.3),
+			inset 1px -2px 0 -1px white,
+			inset -1px 2px 0 -1px white,
+			0px -1px 1px -2px rgba(16, 24, 40, 0.05),
+			0px 4px 6px -2px rgba(16, 24, 40, 0.05),
+			0px 12px 16px -4px rgba(16, 24, 40, 0.1);
+	}
+	.dark .bcc-app-nav {
+		@apply backdrop-blur-sm;
+		background: transparent;
+		box-shadow: none;
+	}
+
+	.bcc-app-nav .bcc-app-nav-item {
+		@apply col text-text-subtlest relative h-12 min-w-16 cursor-pointer rounded-xl border border-transparent px-2 opacity-90 transition-all select-none focus:outline-none;
+	}
+
+	.bcc-app-nav .bcc-app-nav-item--active {
+		@apply text-brand-default bg-dark-neutral-alpha-500-a border-white opacity-100;
+		box-shadow:
             /* inner bevel (top-left highlight, bottom-right shade) */
-            inset 1px 0 4px -1px rgba(0, 100, 50, 0.3),
-            inset 1px 2px 0 -1px white,
-            inset -1px -2px 0 -1px white,
-            inset 0 0 1px 0 rgba(0, 100, 50, 0.1),
-            inset 0 -3px 2px 0 rgba(0, 100, 50, 0.1);
-    }
-    
-    .dark .bcc-app-navigation .navbar-btn--active {
-        @apply bg-neutral-alpha-500-a text-brand-bold border-transparent;
-        box-shadow:
+			inset 1px 0 4px -1px rgba(0, 100, 50, 0.3),
+			inset 1px 2px 0 -1px white,
+			inset -1px -2px 0 -1px white,
+			inset 0 0 1px 0 rgba(0, 100, 50, 0.1),
+			inset 0 -3px 2px 0 rgba(0, 100, 50, 0.1);
+	}
+
+	.dark .bcc-app-nav .bcc-app-nav-item--active {
+		@apply bg-neutral-alpha-500-a text-brand-bold border-transparent;
+		box-shadow:
             /* inner bevel (top-left highlight, bottom-right shade) */
-            inset 1px 0 4px -1px var(--blue-500),
-            inset 1px 2px 0 -1px var(--blue-900),
-            inset -1px -2px 0 -1px var(--blue-900),
-            inset 0 0 1px 0 var(--blue-300),
-            inset 0 -3px 2px 0 var(--blue-300);
-    }
+			inset 1px 0 4px -1px var(--blue-500),
+			inset 1px 2px 0 -1px var(--blue-900),
+			inset -1px -2px 0 -1px var(--blue-900),
+			inset 0 0 1px 0 var(--blue-300),
+			inset 0 -3px 2px 0 var(--blue-300);
+	}
 }
 
 
+
 /* from ./BccBadge/BccBadge.css */
 @layer components {
   .bcc-badge {

package/dist-types/components/custom/BccAppNavigation/BccAppNavigation.vue.d.ts

@@ -1,19 +1,32 @@
+import type { VueComponent } from '@/types';
 import { type Component } from 'vue';
 export type BccAppNavigationItem = {
     key: string;
-    link?: string;
     title: string;
     icon: Component;
     pin?: number;
+    /** Any additional properties will be passed to the component.
+     * @example
+     * {
+     *   href: '/',
+     *   target: '_blank',
+     * } or for router link:
+     * {
+     *   to: '/',
+     *   replace: true,
+     * }
+     */
+    [key: string]: unknown;
 };
-export type BccAppNavigationProps = {
+type __VLS_Props = {
     items: BccAppNavigationItem[];
-    modelValue: BccAppNavigationItem['key'] | null;
+    linkComponent?: VueComponent;
+    activeKey?: BccAppNavigationItem['key'] | null;
 };
-declare const __VLS_export: import("vue").DefineComponent<BccAppNavigationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:modelValue": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<BccAppNavigationProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (item: BccAppNavigationItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: BccAppNavigationItem) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist-types/components/custom/BccDialKnob/BccDialKnob.vue.d.ts

@@ -38,10 +38,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "drag:update": () => any;
     "drag:end": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
     "onDrag:start"?: (() => any) | undefined;
     "onDrag:update"?: (() => any) | undefined;
     "onDrag:end"?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     size: number;
     duration: number;

package/dist-types/components/custom/BccReact/BccReact.vue.d.ts

@@ -4,8 +4,8 @@ declare const __VLS_export: import("vue").DefineComponent<ReactProps, {}, {}, {}
 }, string, import("vue").PublicProps, Readonly<ReactProps> & Readonly<{
     onToggle?: ((id: string) => any) | undefined;
 }>, {
-    top: boolean;
     placeholder: string;
+    top: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist-types/components/custom/index.d.ts

@@ -16,7 +16,7 @@ export { default as BccReactEmoji } from './BccReact/BccReactEmoji.vue';
 export { default as BccStepIndicator } from './BccStepIndicator/BccStepIndicator.vue';
 export { default as BccTag } from './BccTag/BccTag.vue';
 export { default as BccTopNavigation } from './BccTopNavigation/BccTopNavigation.vue';
-export type { BccAppNavigationItem, BccAppNavigationProps } from './BccAppNavigation/BccAppNavigation.vue';
+export type { BccAppNavigationItem } from './BccAppNavigation/BccAppNavigation.vue';
 export type { BadgeProps } from './BccBadge/BccBadge.vue';
 export type { CapacityIndicatorProps } from './BccCapacityIndicator/BccCapacityIndicator.vue';
 export type { KnobProps, KnobSlots } from './BccDialKnob/BccDialKnob.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bcc-code/component-library-vue",
-	"version": "0.8.0",
+	"version": "0.8.4",
 	"type": "module",
 	"description": "Extended Vue component library based on PrimeVue and BCC design tokens",
 	"repository": "https://github.com/bcc-code/bcc-design.git",
@@ -53,7 +53,7 @@
 		"create-version": "node ./scripts/version.cjs"
 	},
 	"dependencies": {
-		"@bcc-code/design-tokens": "^5.1.42",
+		"@bcc-code/design-tokens": "^5.1.45",
 		"@bcc-code/icons-vue": "^1.4.0",
 		"@primeuix/themes": "^2.0.3",
 		"@tailwindcss/vite": "^4.1.18",