@bcc-code/component-library-vue 0.0.0-dev.e513497 → 0.0.0-dev.ece6979

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/theme.css CHANGED
@@ -1,10 +1,10 @@
1
1
  /* Layer order: Tailwind base/utilities first, then PrimeVue so component styles win */
2
2
  @layer theme, base, tailwind, primevue;
3
- @import "@bcc-code/design-tokens/css";
3
+ @import '@bcc-code/design-tokens/css';
4
4
 
5
- @import "tailwindcss";
6
- @import "@bcc-code/design-tokens/tailwind";
7
- @import "@bcc-code/design-tokens/primevue/overrides";
5
+ @import 'tailwindcss';
6
+ @import '@bcc-code/design-tokens/tailwind';
7
+ @import '@bcc-code/design-tokens/primevue/overrides';
8
8
 
9
9
 
10
10
  /* === ./styles/theme.css === */
@@ -1852,6 +1852,12 @@
1852
1852
  --p-form-field-lg-font-size: var(--icon-size-md);
1853
1853
  }
1854
1854
 
1855
+ .p-autocomplete .p-autocomplete-clear-icon {
1856
+ /** middle-align the icon */
1857
+ top: calc(50% - var(--icon-size-sm) / 2);
1858
+ margin-top: 0;
1859
+ }
1860
+
1855
1861
  .p-autocomplete-clearable .p-inputtext {
1856
1862
  flex-grow: 1;
1857
1863
  }
@@ -1888,6 +1894,21 @@
1888
1894
  --p-select-placeholder-color: var(--color-dark-neutral-1000);
1889
1895
  }
1890
1896
 
1897
+ /**
1898
+ * Fix issue with icons inside Input within an InputGroup being hidden when Input is in focus
1899
+ **/
1900
+ .p-inputicon {
1901
+ z-index: 2;
1902
+ }
1903
+
1904
+ .p-dialog-close-button .p-icon {
1905
+ height: var(--icon-size-sm);
1906
+ width: var(--icon-size-sm);
1907
+ }
1908
+ .p-dialog .p-button-icon:empty {
1909
+ display: none;
1910
+ }
1911
+
1891
1912
 
1892
1913
 
1893
1914
 
@@ -2358,8 +2379,13 @@
2358
2379
  --p-avatar-background: var(--ctx-background);
2359
2380
  --p-avatar-color: var(--ctx-text);
2360
2381
  --bcc-avatar-border: var(--ctx-border);
2361
- @apply overflow-hidden shrink-0 ctx-gray-subtler;
2382
+ @apply overflow-hidden shrink-0 ctx-gray-subtler text-sm;
2383
+ }
2384
+
2385
+ .bcc-avatar .icon {
2386
+ height: var(--icon-size-sm);
2362
2387
  }
2388
+
2363
2389
  .bcc-avatar.male,
2364
2390
  .bcc-avatar.M {
2365
2391
  @apply ctx-blue-subtler;
@@ -2382,36 +2408,44 @@
2382
2408
  .bcc-avatar.xs {
2383
2409
  @apply size-5 text-xs;
2384
2410
  }
2411
+ .bcc-avatar.xs .icon {
2412
+ height: var(--icon-size-xs);
2413
+ }
2385
2414
  .bcc-avatar.sm {
2386
- @apply size-6 text-sm;
2415
+ @apply size-6 text-xs;
2416
+ }
2417
+ .bcc-avatar.sm .icon {
2418
+ height: var(--icon-size-xs);
2387
2419
  }
2388
2420
  .bcc-avatar.md {
2389
- @apply size-8 text-base;
2421
+ /* same as default */
2422
+ }
2423
+ .bcc-avatar.md .icon {
2424
+ /* same as default */
2390
2425
  }
2391
2426
  .bcc-avatar.lg {
2392
- @apply size-10 text-lg;
2427
+ @apply size-10 text-md;
2428
+ }
2429
+ .bcc-avatar.lg .icon {
2430
+ height: var(--icon-size-md);
2393
2431
  }
2394
2432
  .bcc-avatar.xl {
2395
2433
  @apply size-12 text-xl;
2396
2434
  }
2435
+ .bcc-avatar.xl .icon {
2436
+ height: var(--icon-size-lg);
2437
+ }
2397
2438
  .bcc-avatar.xxl {
2398
2439
  @apply size-20 text-3xl;
2399
2440
  }
2441
+ .bcc-avatar.xxl .icon {
2442
+ height: var(--icon-size-xl);
2443
+ }
2400
2444
  .bcc-avatar.xxxl {
2401
2445
  @apply size-24 text-4xl;
2402
2446
  }
2403
-
2404
- .bcc-avatar.squared.lg {
2405
- @apply text-xl;
2406
- }
2407
- .bcc-avatar.squared.xl {
2408
- @apply text-2xl;
2409
- }
2410
- .bcc-avatar.squared.xxl {
2411
- @apply text-4xl;
2412
- }
2413
- .bcc-avatar.squared.xxxl {
2414
- @apply text-5xl;
2447
+ .bcc-avatar.xxxl .icon {
2448
+ height: var(--icon-size-xl);
2415
2449
  }
2416
2450
 
2417
2451
  .p-overlaybadge .bcc-avatar.p-avatar-circle.lg~.p-badge,
@@ -2466,24 +2500,28 @@
2466
2500
 
2467
2501
 
2468
2502
 
2469
- :root, :host {
2503
+ :root,
2504
+ :host {
2470
2505
  --font-sans: 'Archivo', system-ui, sans-serif;
2471
- @apply font-sans antialiased p-0 m-0;
2472
- -webkit-font-smoothing: antialiased;
2473
- -moz-osx-font-smoothing: grayscale;
2506
+ @apply m-0 p-0 font-sans antialiased;
2507
+ -webkit-font-smoothing: antialiased;
2508
+ -moz-osx-font-smoothing: grayscale;
2509
+ }
2474
2510
 
2511
+ hr {
2512
+ border-color: var(--color-border-default);
2475
2513
  }
2476
2514
 
2477
2515
  b,
2478
2516
  strong,
2479
2517
  .bold {
2480
- font-weight: bold;
2481
- --ctx-text: var(--ctx-text-bold);
2518
+ font-weight: bold;
2519
+ --ctx-text: var(--ctx-text-bold);
2482
2520
  }
2483
2521
 
2484
2522
  /* Disable state */
2485
2523
  :disabled,
2486
2524
  .disabled {
2487
- cursor: not-allowed;
2488
- pointer-events: none;
2525
+ cursor: not-allowed;
2526
+ pointer-events: none;
2489
2527
  }
@@ -1,8 +1,8 @@
1
1
  import { type BCC_CONTEXT } from '@/contexts';
2
2
  export type StepIndicatorProps = {
3
- steps: string[];
4
- additionalText?: boolean;
5
- showStepLabel?: boolean;
3
+ steps: string[] | number;
4
+ hideText?: boolean;
5
+ hideLabel?: boolean;
6
6
  left?: boolean;
7
7
  right?: boolean;
8
8
  context?: BCC_CONTEXT;
@@ -20,8 +20,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
20
20
  "onUpdate:modelValue"?: ((value: number) => any) | undefined;
21
21
  }>, {
22
22
  context: BCC_CONTEXT;
23
- additionalText: boolean;
24
- showStepLabel: boolean;
23
+ hideText: boolean;
24
+ hideLabel: boolean;
25
25
  headingFn: (currentStep: number, totalSteps: number) => string;
26
26
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
27
27
  declare const _default: typeof __VLS_export;
@@ -12,7 +12,7 @@ export type AvatarProps = Omit<PrimeAvatarProps, 'shape' | 'size'> & {
12
12
  /** Adds a visible border around the avatar. */
13
13
  bordered?: boolean;
14
14
  /** Controls the avatar dimensions; maps to CSS size classes (xs through xxl). Default: md */
15
- size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
15
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
16
16
  };
17
17
  declare const __VLS_export: import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
18
18
  declare const _default: typeof __VLS_export;
@@ -1,14 +1,18 @@
1
1
  import type { VueComponent } from '@/types';
2
+ import { type MenuProps as PrimeMenuProps } from 'primevue/menu';
2
3
  import type { MenuItem } from 'primevue/menuitem';
3
4
  /** Menu item model for BccMenu: icon can be a PrimeVue icon class string or a Vue icon component. */
4
5
  export type BccMenuItem = Omit<MenuItem, 'icon' | 'items'> & {
5
- icon?: string | VueComponent;
6
+ icon?: VueComponent;
6
7
  items?: BccMenuItem[];
7
8
  };
8
- declare const __VLS_export: import("vue").DefineComponent<{}, {
9
+ export type MenuProps = {
10
+ model?: BccMenuItem[];
11
+ } & Omit<PrimeMenuProps, 'model'>;
12
+ declare const __VLS_export: import("vue").DefineComponent<MenuProps, {
9
13
  toggle: (event: Event, target?: unknown) => void | undefined;
10
14
  show: (event: Event, target?: unknown) => void | undefined;
11
15
  hide: () => void | undefined;
12
- }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
16
+ }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
13
17
  declare const _default: typeof __VLS_export;
14
18
  export default _default;
@@ -14,6 +14,12 @@ export type ToggleProps = ToggleSwitchProps & {
14
14
  /** When true, applies context-aware styling (e.g. from design tokens/theme). */
15
15
  useCtx?: boolean;
16
16
  };
17
- declare const __VLS_export: import("vue").DefineComponent<ToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToggleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
17
+ declare const __VLS_export: import("vue").DefineComponent<ToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
18
+ "update:modelValue": (value: string | boolean | undefined) => any;
19
+ }, string, import("vue").PublicProps, Readonly<ToggleProps> & Readonly<{
20
+ "onUpdate:modelValue"?: ((value: string | boolean | undefined) => any) | undefined;
21
+ }>, {
22
+ defaultValue: string | boolean;
23
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
18
24
  declare const _default: typeof __VLS_export;
19
25
  export default _default;
@@ -6,6 +6,7 @@ export { default as BccAvatar } from './BccAvatar/BccAvatar.vue';
6
6
  export { default as BccButton } from './BccButton.vue';
7
7
  export { default as BccCheckbox } from './BccCheckbox.vue';
8
8
  export { default as BccChip } from './BccChip/BccChip.vue';
9
+ export { default as BccConfirmDialog } from './BccConfirmDialog/BccConfirmDialog.vue';
9
10
  export { default as BccInput } from './BccInput.vue';
10
11
  export { default as BccMenu } from './BccMenu/BccMenu.vue';
11
12
  export { default as BccMessage } from './BccMessage.vue';
@@ -17,7 +18,7 @@ export type { ButtonProps } from './BccButton.vue';
17
18
  export type { CheckboxProps } from './BccCheckbox.vue';
18
19
  export type { ChipProps } from './BccChip/BccChip.vue';
19
20
  export type { InputProps } from './BccInput.vue';
20
- export type { BccMenuItem } from './BccMenu/BccMenu.vue';
21
+ export type { BccMenuItem, MenuProps } from './BccMenu/BccMenu.vue';
21
22
  export type { MessageProps } from './BccMessage.vue';
22
23
  export type { TabItem, TabsProps } from './BccTabs/BccTabs.vue';
23
24
  export type { ToggleProps } from './BccToggle/BccToggle.vue';
@@ -80,7 +80,6 @@ export { default as BccKeyFilter } from 'primevue/keyfilter';
80
80
  export { default as BccKnob } from 'primevue/knob';
81
81
  export { default as BccListbox } from 'primevue/listbox';
82
82
  export { default as BccMegaMenu } from 'primevue/megamenu';
83
- export { BccMenu, type BccMenuItem } from './components/wrapped';
84
83
  export { default as BccMenubar } from 'primevue/menubar';
85
84
  export { default as BccMeterGroup } from 'primevue/metergroup';
86
85
  export { default as BccMultiSelect } from 'primevue/multiselect';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bcc-code/component-library-vue",
3
- "version": "0.0.0-dev.e513497",
3
+ "version": "0.0.0-dev.ece6979",
4
4
  "type": "module",
5
5
  "description": "Extended Vue component library based on PrimeVue and BCC design tokens",
6
6
  "repository": "https://github.com/bcc-code/bcc-design.git",