@bcc-code/component-library-vue 0.0.0-dev.aab0e5c → 0.0.0-dev.adea651
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/component-library.js +36242 -35610
- package/dist/component-library.umd.cjs +529 -516
- package/dist/index.css +1 -1
- package/dist/theme.css +174 -91
- package/dist-types/components/custom/BccAppNavigation/BccAppNavigation.vue.d.ts +32 -0
- package/dist-types/components/custom/BccBadge/BccBadge.vue.d.ts +2 -0
- package/dist-types/components/custom/BccDialKnob/BccDialKnob.vue.d.ts +1 -1
- package/dist-types/components/custom/BccReact/BccReact.vue.d.ts +1 -1
- package/dist-types/components/custom/BccStepIndicator/BccStepIndicator.vue.d.ts +5 -5
- package/dist-types/components/custom/BccTopNavigation/BccTopNavigation.vue.d.ts +47 -0
- package/dist-types/components/custom/index.d.ts +4 -0
- package/dist-types/components/wrapped/BccAvatar/BccAvatar.vue.d.ts +1 -1
- package/dist-types/components/wrapped/BccImage.vue.d.ts +17 -0
- package/dist-types/components/wrapped/BccMenu/BccMenu.vue.d.ts +14 -0
- package/dist-types/components/wrapped/BccToggle/BccToggle.vue.d.ts +12 -1
- package/dist-types/components/wrapped/index.d.ts +5 -0
- package/dist-types/index.d.ts +0 -2
- package/package.json +2 -2
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
|
|
3
|
+
@import '@bcc-code/design-tokens/css';
|
|
4
4
|
|
|
5
|
-
@import
|
|
6
|
-
@import
|
|
7
|
-
@import
|
|
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 === */
|
|
@@ -1824,7 +1824,6 @@
|
|
|
1824
1824
|
/* === ./styles/component-overrides.css === */
|
|
1825
1825
|
/** Custom styles to fix primevue components that are not custom or wrapped. */
|
|
1826
1826
|
|
|
1827
|
-
|
|
1828
1827
|
/**
|
|
1829
1828
|
* GUTTER FIX
|
|
1830
1829
|
* Primevue's dropwdown components are all missing the gap between input and dropdown
|
|
@@ -1833,6 +1832,7 @@
|
|
|
1833
1832
|
.p-menu-overlay,
|
|
1834
1833
|
.p-multiselect-overlay,
|
|
1835
1834
|
.p-select-overlay,
|
|
1835
|
+
.p-datepicker-panel,
|
|
1836
1836
|
.p-treeselect-overlay {
|
|
1837
1837
|
margin: var(--p-anchor-gutter) 0;
|
|
1838
1838
|
}
|
|
@@ -1853,6 +1853,12 @@
|
|
|
1853
1853
|
--p-form-field-lg-font-size: var(--icon-size-md);
|
|
1854
1854
|
}
|
|
1855
1855
|
|
|
1856
|
+
.p-autocomplete .p-autocomplete-clear-icon {
|
|
1857
|
+
/** middle-align the icon */
|
|
1858
|
+
top: calc(50% - var(--icon-size-sm) / 2);
|
|
1859
|
+
margin-top: 0;
|
|
1860
|
+
}
|
|
1861
|
+
|
|
1856
1862
|
.p-autocomplete-clearable .p-inputtext {
|
|
1857
1863
|
flex-grow: 1;
|
|
1858
1864
|
}
|
|
@@ -1865,34 +1871,108 @@
|
|
|
1865
1871
|
|
|
1866
1872
|
/**
|
|
1867
1873
|
* BccSelect
|
|
1868
|
-
**/
|
|
1874
|
+
**/
|
|
1869
1875
|
.p-select {
|
|
1870
1876
|
--p-icon-size: var(--icon-size-sm);
|
|
1871
1877
|
}
|
|
1872
1878
|
|
|
1873
|
-
.p-select.inline {
|
|
1874
|
-
@apply inline-flex
|
|
1879
|
+
.p-select.inline-select {
|
|
1880
|
+
@apply mx-auto inline-flex w-auto items-center border-0 bg-transparent shadow-none;
|
|
1875
1881
|
--p-icon-size: 1.25em;
|
|
1876
|
-
|
|
1877
|
-
|
|
1882
|
+
--p-select-dropdown-width: 1.5em;
|
|
1883
|
+
--p-select-min-height: auto;
|
|
1878
1884
|
}
|
|
1879
1885
|
|
|
1880
|
-
.p-select.inline .p-select-label {
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1886
|
+
.p-select.inline-select .p-select-label {
|
|
1887
|
+
@apply inline-block font-semibold;
|
|
1888
|
+
font-size: inherit;
|
|
1889
|
+
padding: 0 0 0 0.25em;
|
|
1884
1890
|
}
|
|
1885
1891
|
|
|
1886
|
-
.p-select.inline.inverse {
|
|
1887
|
-
|
|
1892
|
+
.p-select.inline-select.inverse {
|
|
1893
|
+
--p-select-color: var(--color-neutral-0);
|
|
1888
1894
|
--p-select-dropdown-color: var(--color-neutral-0);
|
|
1889
|
-
|
|
1895
|
+
--p-select-placeholder-color: var(--color-dark-neutral-1000);
|
|
1896
|
+
}
|
|
1897
|
+
|
|
1898
|
+
/**
|
|
1899
|
+
* Fix issue with icons inside Input within an InputGroup being hidden when Input is in focus
|
|
1900
|
+
**/
|
|
1901
|
+
.p-inputicon {
|
|
1902
|
+
z-index: 2;
|
|
1903
|
+
}
|
|
1904
|
+
|
|
1905
|
+
.p-dialog-close-button {
|
|
1906
|
+
--p-icon-size: var(--icon-size-sm);
|
|
1890
1907
|
}
|
|
1908
|
+
.p-dialog .p-button-icon:empty {
|
|
1909
|
+
display: none;
|
|
1910
|
+
}
|
|
1911
|
+
|
|
1891
1912
|
|
|
1892
1913
|
|
|
1893
1914
|
|
|
1894
1915
|
/* === ./components/custom/styles.css === */
|
|
1895
1916
|
|
|
1917
|
+
/* from ./BccAppNavigation/BccAppNavigation.css */
|
|
1918
|
+
@layer components {
|
|
1919
|
+
.bcc-app-nav {
|
|
1920
|
+
@apply pb-inset-bottom-2 absolute inset-x-0 bottom-0 z-20 flex w-full items-center justify-center overflow-visible;
|
|
1921
|
+
}
|
|
1922
|
+
.bcc-app-nav .bcc-app-nav-container {
|
|
1923
|
+
@apply dark:border-default mx-auto flex items-center justify-center border border-white p-0.5;
|
|
1924
|
+
|
|
1925
|
+
border-radius: 20px;
|
|
1926
|
+
background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(243, 244, 246, 0.4) 100%);
|
|
1927
|
+
backdrop-filter: blur(12px) saturate(160%);
|
|
1928
|
+
-webkit-backdrop-filter: blur(12px) saturate(160%);
|
|
1929
|
+
|
|
1930
|
+
max-width: min(96%, var(--container-lg));
|
|
1931
|
+
box-shadow:
|
|
1932
|
+
/* inner bevel (top-left highlight, bottom-right shade) */
|
|
1933
|
+
inset 0 0 32px white,
|
|
1934
|
+
inset 1px 0 4px -1px rgba(0, 0, 0, 0.3),
|
|
1935
|
+
inset 1px -2px 0 -1px white,
|
|
1936
|
+
inset -1px 2px 0 -1px white,
|
|
1937
|
+
0px -1px 1px -2px rgba(16, 24, 40, 0.05),
|
|
1938
|
+
0px 4px 6px -2px rgba(16, 24, 40, 0.05),
|
|
1939
|
+
0px 12px 16px -4px rgba(16, 24, 40, 0.1);
|
|
1940
|
+
}
|
|
1941
|
+
.dark .bcc-app-nav {
|
|
1942
|
+
@apply backdrop-blur-sm;
|
|
1943
|
+
background: transparent;
|
|
1944
|
+
box-shadow: none;
|
|
1945
|
+
}
|
|
1946
|
+
|
|
1947
|
+
.bcc-app-nav .bcc-app-nav-item {
|
|
1948
|
+
@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;
|
|
1949
|
+
}
|
|
1950
|
+
|
|
1951
|
+
.bcc-app-nav .bcc-app-nav-item--active {
|
|
1952
|
+
@apply text-brand-default bg-dark-neutral-alpha-500-a border-white opacity-100;
|
|
1953
|
+
box-shadow:
|
|
1954
|
+
/* inner bevel (top-left highlight, bottom-right shade) */
|
|
1955
|
+
inset 1px 0 4px -1px rgba(0, 100, 50, 0.3),
|
|
1956
|
+
inset 1px 2px 0 -1px white,
|
|
1957
|
+
inset -1px -2px 0 -1px white,
|
|
1958
|
+
inset 0 0 1px 0 rgba(0, 100, 50, 0.1),
|
|
1959
|
+
inset 0 -3px 2px 0 rgba(0, 100, 50, 0.1);
|
|
1960
|
+
}
|
|
1961
|
+
|
|
1962
|
+
.dark .bcc-app-nav .bcc-app-nav-item--active {
|
|
1963
|
+
@apply bg-neutral-alpha-500-a text-brand-bold border-transparent;
|
|
1964
|
+
box-shadow:
|
|
1965
|
+
/* inner bevel (top-left highlight, bottom-right shade) */
|
|
1966
|
+
inset 1px 0 4px -1px var(--blue-500),
|
|
1967
|
+
inset 1px 2px 0 -1px var(--blue-900),
|
|
1968
|
+
inset -1px -2px 0 -1px var(--blue-900),
|
|
1969
|
+
inset 0 0 1px 0 var(--blue-300),
|
|
1970
|
+
inset 0 -3px 2px 0 var(--blue-300);
|
|
1971
|
+
}
|
|
1972
|
+
}
|
|
1973
|
+
|
|
1974
|
+
|
|
1975
|
+
|
|
1896
1976
|
/* from ./BccBadge/BccBadge.css */
|
|
1897
1977
|
@layer components {
|
|
1898
1978
|
.bcc-badge {
|
|
@@ -1904,6 +1984,9 @@
|
|
|
1904
1984
|
.bcc-badge.capital {
|
|
1905
1985
|
@apply inline-flex;
|
|
1906
1986
|
}
|
|
1987
|
+
.bcc-badge.gradient {
|
|
1988
|
+
@apply ctx-gradient;
|
|
1989
|
+
}
|
|
1907
1990
|
.bcc-badge.sm {
|
|
1908
1991
|
@apply w-4 h-4 text-heading-xs;
|
|
1909
1992
|
}
|
|
@@ -2354,78 +2437,74 @@
|
|
|
2354
2437
|
|
|
2355
2438
|
/* from ./BccAvatar/BccAvatar.css */
|
|
2356
2439
|
@layer components {
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
.bcc-avatar.M {
|
|
2365
|
-
@apply ctx-blue-subtler;
|
|
2366
|
-
}
|
|
2367
|
-
.bcc-avatar.female,
|
|
2368
|
-
.bcc-avatar.F {
|
|
2369
|
-
@apply ctx-purple-subtler;
|
|
2370
|
-
}
|
|
2371
|
-
.bcc-avatar.male.child,
|
|
2372
|
-
.bcc-avatar.M.child {
|
|
2373
|
-
@apply ctx-teal-subtler;
|
|
2374
|
-
}
|
|
2375
|
-
.bcc-avatar.female.child,
|
|
2376
|
-
.bcc-avatar.F.child {
|
|
2377
|
-
@apply ctx-magenta-subtler;
|
|
2378
|
-
}
|
|
2379
|
-
.bcc-avatar.bordered {
|
|
2380
|
-
@apply border-2 border-ctx;
|
|
2381
|
-
}
|
|
2382
|
-
.bcc-avatar.xs {
|
|
2383
|
-
@apply size-5 text-xs;
|
|
2384
|
-
}
|
|
2385
|
-
.bcc-avatar.sm {
|
|
2386
|
-
@apply size-6 text-sm;
|
|
2387
|
-
}
|
|
2388
|
-
.bcc-avatar.md {
|
|
2389
|
-
@apply size-8 text-base;
|
|
2390
|
-
}
|
|
2391
|
-
.bcc-avatar.lg {
|
|
2392
|
-
@apply size-10 text-lg;
|
|
2393
|
-
}
|
|
2394
|
-
.bcc-avatar.xl {
|
|
2395
|
-
@apply size-12 text-xl;
|
|
2396
|
-
}
|
|
2397
|
-
.bcc-avatar.xxl {
|
|
2398
|
-
@apply size-20 text-3xl;
|
|
2399
|
-
}
|
|
2400
|
-
.bcc-avatar.xxxl {
|
|
2401
|
-
@apply size-24 text-4xl;
|
|
2402
|
-
}
|
|
2440
|
+
.bcc-avatar {
|
|
2441
|
+
--p-avatar-background: var(--ctx-background);
|
|
2442
|
+
--p-avatar-color: var(--ctx-text);
|
|
2443
|
+
--bcc-avatar-border: var(--ctx-border);
|
|
2444
|
+
--p-icon-size: var(--icon-size-sm);
|
|
2445
|
+
@apply ctx-gray-subtler shrink-0 overflow-hidden text-sm;
|
|
2446
|
+
}
|
|
2403
2447
|
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2414
|
-
|
|
2415
|
-
|
|
2448
|
+
.bcc-avatar.male,
|
|
2449
|
+
.bcc-avatar.M {
|
|
2450
|
+
@apply ctx-blue-subtler;
|
|
2451
|
+
}
|
|
2452
|
+
.bcc-avatar.female,
|
|
2453
|
+
.bcc-avatar.F {
|
|
2454
|
+
@apply ctx-purple-subtler;
|
|
2455
|
+
}
|
|
2456
|
+
.bcc-avatar.male.child,
|
|
2457
|
+
.bcc-avatar.M.child {
|
|
2458
|
+
@apply ctx-teal-subtler;
|
|
2459
|
+
}
|
|
2460
|
+
.bcc-avatar.female.child,
|
|
2461
|
+
.bcc-avatar.F.child {
|
|
2462
|
+
@apply ctx-magenta-subtler;
|
|
2463
|
+
}
|
|
2464
|
+
.bcc-avatar.bordered {
|
|
2465
|
+
@apply border-ctx border-2;
|
|
2466
|
+
}
|
|
2467
|
+
.bcc-avatar.xs {
|
|
2468
|
+
@apply size-5 text-xs;
|
|
2469
|
+
--p-icon-size: var(--icon-size-xs);
|
|
2470
|
+
}
|
|
2471
|
+
.bcc-avatar.sm {
|
|
2472
|
+
@apply size-6 text-xs;
|
|
2473
|
+
--p-icon-size: var(--icon-size-xs);
|
|
2474
|
+
}
|
|
2475
|
+
/* .bcc-avatar.md {
|
|
2476
|
+
same as default
|
|
2477
|
+
}*/
|
|
2478
|
+
.bcc-avatar.lg {
|
|
2479
|
+
@apply text-md size-10;
|
|
2480
|
+
--p-icon-size: var(--icon-size-md);
|
|
2481
|
+
}
|
|
2482
|
+
.bcc-avatar.xl {
|
|
2483
|
+
@apply size-12 text-xl;
|
|
2484
|
+
--p-icon-size: var(--icon-size-lg);
|
|
2485
|
+
}
|
|
2486
|
+
.bcc-avatar.xxl {
|
|
2487
|
+
@apply size-20 text-3xl;
|
|
2488
|
+
--p-icon-size: var(--icon-size-xl);
|
|
2489
|
+
}
|
|
2490
|
+
.bcc-avatar.xxxl {
|
|
2491
|
+
@apply size-24 text-4xl;
|
|
2492
|
+
--p-icon-size: var(--icon-size-xl);
|
|
2493
|
+
}
|
|
2416
2494
|
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2495
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.lg ~ .p-badge,
|
|
2496
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.xl ~ .p-badge {
|
|
2497
|
+
transform: translate(40%, -40%);
|
|
2498
|
+
}
|
|
2421
2499
|
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
|
|
2425
|
-
|
|
2500
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl ~ .p-badge,
|
|
2501
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.xxl ~ .p-badge {
|
|
2502
|
+
transform: translate(20%, -20%);
|
|
2503
|
+
}
|
|
2426
2504
|
}
|
|
2427
2505
|
|
|
2428
2506
|
|
|
2507
|
+
|
|
2429
2508
|
/* from ./BccTabs/BccTabs.css */
|
|
2430
2509
|
@layer components {
|
|
2431
2510
|
.bcc-tabs-fill.p-tabs {
|
|
@@ -2466,24 +2545,28 @@
|
|
|
2466
2545
|
|
|
2467
2546
|
|
|
2468
2547
|
|
|
2469
|
-
:root,
|
|
2548
|
+
:root,
|
|
2549
|
+
:host {
|
|
2470
2550
|
--font-sans: 'Archivo', system-ui, sans-serif;
|
|
2471
|
-
|
|
2472
|
-
|
|
2473
|
-
|
|
2551
|
+
@apply m-0 p-0 font-sans antialiased;
|
|
2552
|
+
-webkit-font-smoothing: antialiased;
|
|
2553
|
+
-moz-osx-font-smoothing: grayscale;
|
|
2554
|
+
}
|
|
2474
2555
|
|
|
2556
|
+
hr {
|
|
2557
|
+
border-color: var(--color-border-default);
|
|
2475
2558
|
}
|
|
2476
2559
|
|
|
2477
2560
|
b,
|
|
2478
2561
|
strong,
|
|
2479
2562
|
.bold {
|
|
2480
|
-
|
|
2481
|
-
|
|
2563
|
+
font-weight: bold;
|
|
2564
|
+
--ctx-text: var(--ctx-text-bold);
|
|
2482
2565
|
}
|
|
2483
2566
|
|
|
2484
2567
|
/* Disable state */
|
|
2485
2568
|
:disabled,
|
|
2486
2569
|
.disabled {
|
|
2487
|
-
|
|
2488
|
-
|
|
2570
|
+
cursor: not-allowed;
|
|
2571
|
+
pointer-events: none;
|
|
2489
2572
|
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { VueComponent } from '@/types';
|
|
2
|
+
import { type Component } from 'vue';
|
|
3
|
+
export type BccAppNavigationItem = {
|
|
4
|
+
key: string;
|
|
5
|
+
title: string;
|
|
6
|
+
icon: Component;
|
|
7
|
+
pin?: number;
|
|
8
|
+
/** Any additional properties will be passed to the component.
|
|
9
|
+
* @example
|
|
10
|
+
* {
|
|
11
|
+
* href: '/',
|
|
12
|
+
* target: '_blank',
|
|
13
|
+
* } or for router link:
|
|
14
|
+
* {
|
|
15
|
+
* to: '/',
|
|
16
|
+
* replace: true,
|
|
17
|
+
* }
|
|
18
|
+
*/
|
|
19
|
+
[key: string]: unknown;
|
|
20
|
+
};
|
|
21
|
+
type __VLS_Props = {
|
|
22
|
+
items: BccAppNavigationItem[];
|
|
23
|
+
linkComponent?: VueComponent;
|
|
24
|
+
activeKey?: BccAppNavigationItem['key'] | null;
|
|
25
|
+
};
|
|
26
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
27
|
+
select: (item: BccAppNavigationItem) => any;
|
|
28
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
29
|
+
onSelect?: ((item: BccAppNavigationItem) => any) | undefined;
|
|
30
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
31
|
+
declare const _default: typeof __VLS_export;
|
|
32
|
+
export default _default;
|
|
@@ -13,6 +13,7 @@ export type BadgeProps = {
|
|
|
13
13
|
squared?: boolean;
|
|
14
14
|
/** Design context (e.g. neutral, brand) used for background and text color. */
|
|
15
15
|
context?: BCC_CONTEXT;
|
|
16
|
+
gradient?: boolean;
|
|
16
17
|
};
|
|
17
18
|
declare var __VLS_1: {};
|
|
18
19
|
type __VLS_Slots = {} & {
|
|
@@ -21,6 +22,7 @@ type __VLS_Slots = {} & {
|
|
|
21
22
|
declare const __VLS_base: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
|
|
22
23
|
size: "sm" | "md" | "lg" | "xl";
|
|
23
24
|
context: BCC_CONTEXT;
|
|
25
|
+
gradient: boolean;
|
|
24
26
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
25
27
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
26
28
|
declare const _default: typeof __VLS_export;
|
|
@@ -44,6 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
|
|
|
44
44
|
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
|
|
45
45
|
}>, {
|
|
46
46
|
size: number;
|
|
47
|
+
duration: number;
|
|
47
48
|
colored: boolean;
|
|
48
49
|
arcWidth: number;
|
|
49
50
|
min: number;
|
|
@@ -51,7 +52,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
|
|
|
51
52
|
steps: number;
|
|
52
53
|
showHandle: boolean;
|
|
53
54
|
hideArrows: boolean;
|
|
54
|
-
duration: number;
|
|
55
55
|
animateRotations: number;
|
|
56
56
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
57
57
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -4,8 +4,8 @@ declare const __VLS_export: import("vue").DefineComponent<ReactProps, {}, {}, {}
|
|
|
4
4
|
}, string, import("vue").PublicProps, Readonly<ReactProps> & Readonly<{
|
|
5
5
|
onToggle?: ((id: string) => any) | undefined;
|
|
6
6
|
}>, {
|
|
7
|
-
top: boolean;
|
|
8
7
|
placeholder: string;
|
|
8
|
+
top: boolean;
|
|
9
9
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
10
10
|
declare const _default: typeof __VLS_export;
|
|
11
11
|
export default _default;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { type BCC_CONTEXT } from '@/contexts';
|
|
2
2
|
export type StepIndicatorProps = {
|
|
3
|
-
steps: string[];
|
|
4
|
-
|
|
5
|
-
|
|
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
|
-
|
|
24
|
-
|
|
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;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { type Component } from 'vue';
|
|
2
|
+
export type TopNavigationProps = {
|
|
3
|
+
title?: string | (() => string);
|
|
4
|
+
subtitle?: string | (() => string);
|
|
5
|
+
left?: ((...args: unknown[]) => Component | null) | Component | string | 'event-logo';
|
|
6
|
+
right?: ((...args: unknown[]) => Component | null) | Component | string;
|
|
7
|
+
hideBack?: boolean;
|
|
8
|
+
backTitle?: string;
|
|
9
|
+
};
|
|
10
|
+
type __VLS_Props = TopNavigationProps & {
|
|
11
|
+
relative?: boolean;
|
|
12
|
+
fixed?: boolean;
|
|
13
|
+
padded?: boolean;
|
|
14
|
+
transparent?: boolean;
|
|
15
|
+
glass?: boolean;
|
|
16
|
+
backTitle?: string;
|
|
17
|
+
force?: boolean;
|
|
18
|
+
titleLeft?: boolean;
|
|
19
|
+
};
|
|
20
|
+
declare var __VLS_1: {
|
|
21
|
+
title: {
|
|
22
|
+
title: string;
|
|
23
|
+
subtitle: string;
|
|
24
|
+
};
|
|
25
|
+
}, __VLS_13: {}, __VLS_20: {};
|
|
26
|
+
type __VLS_Slots = {} & {
|
|
27
|
+
default?: (props: typeof __VLS_1) => any;
|
|
28
|
+
} & {
|
|
29
|
+
right?: (props: typeof __VLS_13) => any;
|
|
30
|
+
} & {
|
|
31
|
+
bottom?: (props: typeof __VLS_20) => any;
|
|
32
|
+
};
|
|
33
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
34
|
+
back: () => any;
|
|
35
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
36
|
+
onBack?: (() => any) | undefined;
|
|
37
|
+
}>, {
|
|
38
|
+
hideBack: boolean;
|
|
39
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
40
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
41
|
+
declare const _default: typeof __VLS_export;
|
|
42
|
+
export default _default;
|
|
43
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
44
|
+
new (): {
|
|
45
|
+
$slots: S;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* Custom BCC components (not based on PrimeVue).
|
|
3
3
|
* Add new custom components here and export them from this file.
|
|
4
4
|
*/
|
|
5
|
+
export { default as BccAppNavigation } from './BccAppNavigation/BccAppNavigation.vue';
|
|
5
6
|
export { default as BccBadge } from './BccBadge/BccBadge.vue';
|
|
6
7
|
export { default as BccCapacityIndicator } from './BccCapacityIndicator/BccCapacityIndicator.vue';
|
|
7
8
|
export { default as BccCircleLoader } from './BccCircleLoader/BccCircleLoader.vue';
|
|
@@ -14,6 +15,8 @@ export { default as BccReact } from './BccReact/BccReact.vue';
|
|
|
14
15
|
export { default as BccReactEmoji } from './BccReact/BccReactEmoji.vue';
|
|
15
16
|
export { default as BccStepIndicator } from './BccStepIndicator/BccStepIndicator.vue';
|
|
16
17
|
export { default as BccTag } from './BccTag/BccTag.vue';
|
|
18
|
+
export { default as BccTopNavigation } from './BccTopNavigation/BccTopNavigation.vue';
|
|
19
|
+
export type { BccAppNavigationItem } from './BccAppNavigation/BccAppNavigation.vue';
|
|
17
20
|
export type { BadgeProps } from './BccBadge/BccBadge.vue';
|
|
18
21
|
export type { CapacityIndicatorProps } from './BccCapacityIndicator/BccCapacityIndicator.vue';
|
|
19
22
|
export type { KnobProps, KnobSlots } from './BccDialKnob/BccDialKnob.vue';
|
|
@@ -24,3 +27,4 @@ export type { NpsScoreProps } from './BccNpsScore/BccNpsScore.vue';
|
|
|
24
27
|
export type { ReactInfo, ReactProps } from './BccReact/types';
|
|
25
28
|
export type { StepIndicatorProps } from './BccStepIndicator/BccStepIndicator.vue';
|
|
26
29
|
export type { TagProps } from './BccTag/BccTag.vue';
|
|
30
|
+
export type { TopNavigationProps } from './BccTopNavigation/BccTopNavigation.vue';
|
|
@@ -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;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type ImageProps as PrimeImageProps } from 'primevue/image';
|
|
2
|
+
export type ImageProps = PrimeImageProps;
|
|
3
|
+
declare var __VLS_9: {}, __VLS_17: {};
|
|
4
|
+
type __VLS_Slots = {} & {
|
|
5
|
+
refresh?: (props: typeof __VLS_9) => any;
|
|
6
|
+
} & {
|
|
7
|
+
undo?: (props: typeof __VLS_17) => any;
|
|
8
|
+
};
|
|
9
|
+
declare const __VLS_base: import("vue").DefineComponent<PrimeImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PrimeImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
10
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
11
|
+
declare const _default: typeof __VLS_export;
|
|
12
|
+
export default _default;
|
|
13
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
14
|
+
new (): {
|
|
15
|
+
$slots: S;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { VueComponent } from '@/types';
|
|
2
|
+
import { type MenuMethods as PrimeMenuMethods, type MenuProps as PrimeMenuProps } from 'primevue/menu';
|
|
3
|
+
import type { MenuItem } from 'primevue/menuitem';
|
|
4
|
+
/** Menu item model for BccMenu: icon can be a PrimeVue icon class string or a Vue icon component. */
|
|
5
|
+
export type BccMenuItem = Omit<MenuItem, 'icon' | 'items'> & {
|
|
6
|
+
icon?: VueComponent;
|
|
7
|
+
items?: BccMenuItem[];
|
|
8
|
+
};
|
|
9
|
+
export type MenuProps = {
|
|
10
|
+
model?: BccMenuItem[];
|
|
11
|
+
} & Omit<PrimeMenuProps, 'model'>;
|
|
12
|
+
declare const __VLS_export: import("vue").DefineComponent<MenuProps, PrimeMenuMethods, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
13
|
+
declare const _default: typeof __VLS_export;
|
|
14
|
+
export default _default;
|
|
@@ -14,6 +14,17 @@ 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
|
-
|
|
17
|
+
type __VLS_Props = ToggleProps;
|
|
18
|
+
type __VLS_ModelProps = {
|
|
19
|
+
modelValue: boolean;
|
|
20
|
+
};
|
|
21
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
22
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
23
|
+
"update:modelValue": (value: boolean) => any;
|
|
24
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
25
|
+
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
26
|
+
}>, {
|
|
27
|
+
defaultValue: string | boolean;
|
|
28
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
18
29
|
declare const _default: typeof __VLS_export;
|
|
19
30
|
export default _default;
|
|
@@ -6,7 +6,10 @@ 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';
|
|
10
|
+
export { default as BccImage } from './BccImage.vue';
|
|
9
11
|
export { default as BccInput } from './BccInput.vue';
|
|
12
|
+
export { default as BccMenu } from './BccMenu/BccMenu.vue';
|
|
10
13
|
export { default as BccMessage } from './BccMessage.vue';
|
|
11
14
|
export { default as BccTabs } from './BccTabs/BccTabs.vue';
|
|
12
15
|
export { default as BccToggle } from './BccToggle/BccToggle.vue';
|
|
@@ -15,7 +18,9 @@ export type { AvatarProps } from './BccAvatar/BccAvatar.vue';
|
|
|
15
18
|
export type { ButtonProps } from './BccButton.vue';
|
|
16
19
|
export type { CheckboxProps } from './BccCheckbox.vue';
|
|
17
20
|
export type { ChipProps } from './BccChip/BccChip.vue';
|
|
21
|
+
export type { ImageProps } from './BccImage.vue';
|
|
18
22
|
export type { InputProps } from './BccInput.vue';
|
|
23
|
+
export type { BccMenuItem, MenuProps } from './BccMenu/BccMenu.vue';
|
|
19
24
|
export type { MessageProps } from './BccMessage.vue';
|
|
20
25
|
export type { TabItem, TabsProps } from './BccTabs/BccTabs.vue';
|
|
21
26
|
export type { ToggleProps } from './BccToggle/BccToggle.vue';
|
package/dist-types/index.d.ts
CHANGED
|
@@ -65,7 +65,6 @@ export { default as BccFocusTrap } from 'primevue/focustrap';
|
|
|
65
65
|
export { default as BccGalleria } from 'primevue/galleria';
|
|
66
66
|
export { default as BccIconField } from 'primevue/iconfield';
|
|
67
67
|
export { default as BccIftaLabel } from 'primevue/iftalabel';
|
|
68
|
-
export { default as BccImage } from 'primevue/image';
|
|
69
68
|
export { default as BccImageCompare } from 'primevue/imagecompare';
|
|
70
69
|
export { default as BccInplace } from 'primevue/inplace';
|
|
71
70
|
export { default as BccInputChips } from 'primevue/inputchips';
|
|
@@ -80,7 +79,6 @@ export { default as BccKeyFilter } from 'primevue/keyfilter';
|
|
|
80
79
|
export { default as BccKnob } from 'primevue/knob';
|
|
81
80
|
export { default as BccListbox } from 'primevue/listbox';
|
|
82
81
|
export { default as BccMegaMenu } from 'primevue/megamenu';
|
|
83
|
-
export { default as BccMenu } from 'primevue/menu';
|
|
84
82
|
export { default as BccMenubar } from 'primevue/menubar';
|
|
85
83
|
export { default as BccMeterGroup } from 'primevue/metergroup';
|
|
86
84
|
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.
|
|
3
|
+
"version": "0.0.0-dev.adea651",
|
|
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",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"create-version": "node ./scripts/version.cjs"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@bcc-code/design-tokens": "^5.1.
|
|
56
|
+
"@bcc-code/design-tokens": "^5.1.45",
|
|
57
57
|
"@bcc-code/icons-vue": "^1.4.0",
|
|
58
58
|
"@primeuix/themes": "^2.0.3",
|
|
59
59
|
"@tailwindcss/vite": "^4.1.18",
|