@bcc-code/component-library-vue 0.0.0-dev.edf8c5a → 0.0.0-dev.fd035f5
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 +36068 -35404
- package/dist/component-library.umd.cjs +879 -683
- package/dist/index.css +1 -1
- package/dist/theme.css +215 -118
- 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/BccNpsResult/BccNpsResult.vue.d.ts +2 -2
- 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 +2 -2
- package/dist-types/components/wrapped/BccButton.vue.d.ts +1 -0
- 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/BccTabs/BccTabs.vue.d.ts +2 -0
- package/dist-types/components/wrapped/BccToggle/BccToggle.vue.d.ts +12 -1
- package/dist-types/components/wrapped/index.d.ts +7 -0
- package/dist-types/index.d.ts +14 -5
- package/package.json +103 -100
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 === */
|
|
@@ -649,7 +649,8 @@
|
|
|
649
649
|
|
|
650
650
|
/* Capitalize first letter */
|
|
651
651
|
@utility capital {
|
|
652
|
-
|
|
652
|
+
@apply inline-block;
|
|
653
|
+
|
|
653
654
|
&::first-letter {
|
|
654
655
|
text-transform: uppercase;
|
|
655
656
|
}
|
|
@@ -1824,43 +1825,116 @@
|
|
|
1824
1825
|
/** Custom styles to fix primevue components that are not custom or wrapped. */
|
|
1825
1826
|
|
|
1826
1827
|
/**
|
|
1827
|
-
|
|
1828
|
+
* GUTTER FIX
|
|
1829
|
+
* Primevue's dropwdown components are all missing the gap between input and dropdown
|
|
1830
|
+
**/
|
|
1831
|
+
.p-autocomplete-overlay,
|
|
1832
|
+
.p-menu-overlay,
|
|
1833
|
+
.p-multiselect-overlay,
|
|
1834
|
+
.p-select-overlay,
|
|
1835
|
+
.p-datepicker-panel,
|
|
1836
|
+
.p-treeselect-overlay {
|
|
1837
|
+
margin: var(--p-anchor-gutter) 0;
|
|
1838
|
+
}
|
|
1839
|
+
|
|
1840
|
+
/* This fix is to ensure overlay badge is contained within the size of the component it wraps */
|
|
1841
|
+
.p-overlaybadge {
|
|
1842
|
+
display: inline-block;
|
|
1843
|
+
}
|
|
1844
|
+
|
|
1845
|
+
/**
|
|
1846
|
+
* BccAutocomplete
|
|
1828
1847
|
**/
|
|
1829
1848
|
|
|
1830
1849
|
/** Our icons are a bit smaller that Primevue's default */
|
|
1831
1850
|
.p-autocomplete .p-icon {
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1851
|
+
--p-icon-size: var(--icon-size-sm);
|
|
1852
|
+
--p-form-field-sm-font-size: var(--icon-size-sm);
|
|
1853
|
+
--p-form-field-lg-font-size: var(--icon-size-md);
|
|
1854
|
+
}
|
|
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;
|
|
1835
1860
|
}
|
|
1836
1861
|
|
|
1837
1862
|
.p-autocomplete-clearable .p-inputtext {
|
|
1838
|
-
|
|
1863
|
+
flex-grow: 1;
|
|
1839
1864
|
}
|
|
1840
1865
|
|
|
1841
1866
|
.p-autocomplete-chip.p-chip {
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1867
|
+
padding-block-start: calc(var(--p-autocomplete-padding-y) / 2);
|
|
1868
|
+
padding-block-end: calc(var(--p-autocomplete-padding-y) / 2);
|
|
1869
|
+
border-radius: var(--p-autocomplete-chip-border-radius);
|
|
1845
1870
|
}
|
|
1846
1871
|
|
|
1847
|
-
|
|
1848
1872
|
/**
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
.p-menu-overlay,
|
|
1854
|
-
.p-multiselect-overlay,
|
|
1855
|
-
.p-select-overlay,
|
|
1856
|
-
.p-treeselect-overlay {
|
|
1857
|
-
margin: var(--p-anchor-gutter) 0;
|
|
1873
|
+
* BccSelect
|
|
1874
|
+
**/
|
|
1875
|
+
.p-select {
|
|
1876
|
+
--p-icon-size: var(--icon-size-sm);
|
|
1858
1877
|
}
|
|
1859
1878
|
|
|
1879
|
+
.p-select.inline-select {
|
|
1880
|
+
@apply mx-auto inline-flex w-auto items-center border-0 bg-transparent shadow-none;
|
|
1881
|
+
--p-icon-size: 1.25em;
|
|
1882
|
+
--p-select-dropdown-width: 1.5em;
|
|
1883
|
+
--p-select-min-height: auto;
|
|
1884
|
+
}
|
|
1885
|
+
|
|
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;
|
|
1890
|
+
}
|
|
1891
|
+
|
|
1892
|
+
.p-select.inline-select.inverse {
|
|
1893
|
+
--p-select-color: var(--color-neutral-0);
|
|
1894
|
+
--p-select-dropdown-color: var(--color-neutral-0);
|
|
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);
|
|
1907
|
+
}
|
|
1908
|
+
.p-dialog .p-button-icon:empty {
|
|
1909
|
+
display: none;
|
|
1910
|
+
}
|
|
1911
|
+
|
|
1912
|
+
|
|
1860
1913
|
|
|
1861
1914
|
|
|
1862
1915
|
/* === ./components/custom/styles.css === */
|
|
1863
1916
|
|
|
1917
|
+
/* from ./BccAppNavigation/BccAppNavigation.css */
|
|
1918
|
+
@layer components {
|
|
1919
|
+
.bcc-app-nav {
|
|
1920
|
+
@apply sticky inset-x-0 bottom-0 z-20 overflow-visible bg-elevation-surface-default shadow-md sm:rounded-t-xl;
|
|
1921
|
+
}
|
|
1922
|
+
.bcc-app-nav .bcc-app-nav-container {
|
|
1923
|
+
@apply center pb-inset-bottom-1 mx-auto max-w-lg pt-1;
|
|
1924
|
+
}
|
|
1925
|
+
|
|
1926
|
+
.bcc-app-nav .bcc-app-nav-item {
|
|
1927
|
+
@apply flex flex-col items-center justify-center relative h-12 flex-1 gap-1 ctx-gray-subtlest transition-colors focus:outline-none focus:ring-0 text-ctx;
|
|
1928
|
+
@apply opacity-50;
|
|
1929
|
+
}
|
|
1930
|
+
|
|
1931
|
+
.bcc-app-nav .bcc-app-nav-item--active {
|
|
1932
|
+
@apply text-selected opacity-100;
|
|
1933
|
+
}
|
|
1934
|
+
}
|
|
1935
|
+
|
|
1936
|
+
|
|
1937
|
+
|
|
1864
1938
|
/* from ./BccBadge/BccBadge.css */
|
|
1865
1939
|
@layer components {
|
|
1866
1940
|
.bcc-badge {
|
|
@@ -1868,6 +1942,13 @@ GUTTER FIX
|
|
|
1868
1942
|
|
|
1869
1943
|
@apply bg-ctx text-ctx;
|
|
1870
1944
|
}
|
|
1945
|
+
|
|
1946
|
+
.bcc-badge.capital {
|
|
1947
|
+
@apply inline-flex;
|
|
1948
|
+
}
|
|
1949
|
+
.bcc-badge.gradient {
|
|
1950
|
+
@apply ctx-gradient;
|
|
1951
|
+
}
|
|
1871
1952
|
.bcc-badge.sm {
|
|
1872
1953
|
@apply w-4 h-4 text-heading-xs;
|
|
1873
1954
|
}
|
|
@@ -1878,7 +1959,7 @@ GUTTER FIX
|
|
|
1878
1959
|
@apply w-6 h-6 text-heading-md;
|
|
1879
1960
|
}
|
|
1880
1961
|
.bcc-badge.xl {
|
|
1881
|
-
@apply w-8 h-8 text-heading-
|
|
1962
|
+
@apply w-8 h-8 text-heading-md;
|
|
1882
1963
|
}
|
|
1883
1964
|
|
|
1884
1965
|
.bcc-badge .bcc-badge-icon {
|
|
@@ -2017,8 +2098,8 @@ GUTTER FIX
|
|
|
2017
2098
|
.bcc-frame--raised {
|
|
2018
2099
|
--ctx-background: var(--color-elevation-surface-raised-default);
|
|
2019
2100
|
}
|
|
2020
|
-
.bcc-frame--
|
|
2021
|
-
@apply rounded;
|
|
2101
|
+
.bcc-frame--rounded {
|
|
2102
|
+
@apply rounded-md;
|
|
2022
2103
|
}
|
|
2023
2104
|
.bcc-frame--raised.bcc-frame--shadow {
|
|
2024
2105
|
@apply shadow-raised;
|
|
@@ -2089,43 +2170,53 @@ GUTTER FIX
|
|
|
2089
2170
|
@apply relative w-full;
|
|
2090
2171
|
}
|
|
2091
2172
|
|
|
2092
|
-
.bcc-nps-result
|
|
2173
|
+
.bcc-nps-result.xs {
|
|
2174
|
+
@apply w-24;
|
|
2175
|
+
}
|
|
2176
|
+
.bcc-nps-result.sm {
|
|
2177
|
+
@apply w-36;
|
|
2178
|
+
}
|
|
2179
|
+
.bcc-nps-result.md {
|
|
2180
|
+
@apply w-48;
|
|
2181
|
+
}
|
|
2182
|
+
.bcc-nps-result.lg {
|
|
2183
|
+
@apply w-60;
|
|
2184
|
+
}
|
|
2185
|
+
.bcc-nps-result.xl {
|
|
2186
|
+
@apply w-72;
|
|
2187
|
+
}
|
|
2188
|
+
|
|
2189
|
+
.bcc-nps-result .bcc-nps-result-gauge-dial {
|
|
2093
2190
|
transform-origin: center;
|
|
2094
2191
|
}
|
|
2095
2192
|
|
|
2096
|
-
.bcc-nps-result.animated .result-gauge-dial {
|
|
2193
|
+
.bcc-nps-result.animated .bcc-nps-result-gauge-dial {
|
|
2097
2194
|
transition-delay: 0.3s;
|
|
2098
2195
|
transition: all .7s cubic-bezier(0, 0, 0.3, 1.5);
|
|
2099
2196
|
}
|
|
2100
2197
|
|
|
2101
|
-
.bcc-nps-result-labels.lg {
|
|
2102
|
-
@apply bottom-[2em];
|
|
2103
|
-
}
|
|
2104
2198
|
.bcc-nps-result-labels {
|
|
2105
|
-
@apply absolute bottom-
|
|
2106
|
-
}
|
|
2107
|
-
.bcc-nps-result-labels.sm {
|
|
2108
|
-
@apply bottom-0;
|
|
2199
|
+
@apply absolute text-base bottom-1/4 translate-y-1/2 flex w-full flex-col items-center justify-center;
|
|
2109
2200
|
}
|
|
2110
2201
|
|
|
2111
|
-
.bcc-nps-result-labels.lg .bcc-nps-result-labels--heading {
|
|
2112
|
-
@apply text-heading-xl leading-tight;
|
|
2113
|
-
}
|
|
2114
2202
|
.bcc-nps-result-labels--heading {
|
|
2115
|
-
@apply text-
|
|
2203
|
+
@apply text-[1.25em] font-semibold leading-none;
|
|
2116
2204
|
}
|
|
2117
|
-
.bcc-nps-result-labels
|
|
2118
|
-
@apply text-
|
|
2205
|
+
.bcc-nps-result-labels--label {
|
|
2206
|
+
@apply text-[0.75em] text-subtlest;
|
|
2119
2207
|
}
|
|
2120
2208
|
|
|
2121
|
-
.bcc-nps-result
|
|
2122
|
-
@apply text-
|
|
2209
|
+
.bcc-nps-result.md .bcc-nps-result-labels {
|
|
2210
|
+
@apply text-lg;
|
|
2123
2211
|
}
|
|
2124
|
-
.bcc-nps-result-labels
|
|
2125
|
-
@apply text-
|
|
2212
|
+
.bcc-nps-result.lg .bcc-nps-result-labels {
|
|
2213
|
+
@apply text-xl;
|
|
2214
|
+
}
|
|
2215
|
+
.bcc-nps-result.xl .bcc-nps-result-labels {
|
|
2216
|
+
@apply text-2xl;
|
|
2126
2217
|
}
|
|
2127
|
-
.bcc-nps-result
|
|
2128
|
-
@apply text-
|
|
2218
|
+
.bcc-nps-result.full .bcc-nps-result-labels {
|
|
2219
|
+
@apply text-lg;
|
|
2129
2220
|
}
|
|
2130
2221
|
}
|
|
2131
2222
|
|
|
@@ -2308,75 +2399,74 @@ GUTTER FIX
|
|
|
2308
2399
|
|
|
2309
2400
|
/* from ./BccAvatar/BccAvatar.css */
|
|
2310
2401
|
@layer components {
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
.bcc-avatar.M {
|
|
2319
|
-
@apply ctx-blue-subtler;
|
|
2320
|
-
}
|
|
2321
|
-
.bcc-avatar.female,
|
|
2322
|
-
.bcc-avatar.F {
|
|
2323
|
-
@apply ctx-purple-subtler;
|
|
2324
|
-
}
|
|
2325
|
-
.bcc-avatar.male.child,
|
|
2326
|
-
.bcc-avatar.M.child {
|
|
2327
|
-
@apply ctx-teal-subtler;
|
|
2328
|
-
}
|
|
2329
|
-
.bcc-avatar.female.child,
|
|
2330
|
-
.bcc-avatar.F.child {
|
|
2331
|
-
@apply ctx-magenta-subtler;
|
|
2332
|
-
}
|
|
2333
|
-
.bcc-avatar.bordered {
|
|
2334
|
-
@apply border-2 border-ctx;
|
|
2335
|
-
}
|
|
2336
|
-
.bcc-avatar.xs {
|
|
2337
|
-
@apply size-5 text-xs;
|
|
2338
|
-
}
|
|
2339
|
-
.bcc-avatar.sm {
|
|
2340
|
-
@apply size-6 text-sm;
|
|
2341
|
-
}
|
|
2342
|
-
.bcc-avatar.md {
|
|
2343
|
-
@apply size-8 text-base;
|
|
2344
|
-
}
|
|
2345
|
-
.bcc-avatar.lg {
|
|
2346
|
-
@apply size-10 text-lg;
|
|
2347
|
-
}
|
|
2348
|
-
.bcc-avatar.xl {
|
|
2349
|
-
@apply size-12 text-xl;
|
|
2350
|
-
}
|
|
2351
|
-
.bcc-avatar.xxl {
|
|
2352
|
-
@apply size-20 text-3xl;
|
|
2353
|
-
}
|
|
2354
|
-
.bcc-avatar.xxxl {
|
|
2355
|
-
@apply size-24 text-4xl;
|
|
2356
|
-
}
|
|
2402
|
+
.bcc-avatar {
|
|
2403
|
+
--p-avatar-background: var(--ctx-background);
|
|
2404
|
+
--p-avatar-color: var(--ctx-text);
|
|
2405
|
+
--bcc-avatar-border: var(--ctx-border);
|
|
2406
|
+
--p-icon-size: var(--icon-size-sm);
|
|
2407
|
+
@apply ctx-gray-subtler shrink-0 overflow-hidden text-sm;
|
|
2408
|
+
}
|
|
2357
2409
|
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2410
|
+
.bcc-avatar.male,
|
|
2411
|
+
.bcc-avatar.M {
|
|
2412
|
+
@apply ctx-blue-subtler;
|
|
2413
|
+
}
|
|
2414
|
+
.bcc-avatar.female,
|
|
2415
|
+
.bcc-avatar.F {
|
|
2416
|
+
@apply ctx-purple-subtler;
|
|
2417
|
+
}
|
|
2418
|
+
.bcc-avatar.male.child,
|
|
2419
|
+
.bcc-avatar.M.child {
|
|
2420
|
+
@apply ctx-teal-subtler;
|
|
2421
|
+
}
|
|
2422
|
+
.bcc-avatar.female.child,
|
|
2423
|
+
.bcc-avatar.F.child {
|
|
2424
|
+
@apply ctx-magenta-subtler;
|
|
2425
|
+
}
|
|
2426
|
+
.bcc-avatar.bordered {
|
|
2427
|
+
@apply border-ctx border-2;
|
|
2428
|
+
}
|
|
2429
|
+
.bcc-avatar.xs {
|
|
2430
|
+
@apply size-5 text-xs;
|
|
2431
|
+
--p-icon-size: var(--icon-size-xs);
|
|
2432
|
+
}
|
|
2433
|
+
.bcc-avatar.sm {
|
|
2434
|
+
@apply size-6 text-xs;
|
|
2435
|
+
--p-icon-size: var(--icon-size-xs);
|
|
2436
|
+
}
|
|
2437
|
+
/* .bcc-avatar.md {
|
|
2438
|
+
same as default
|
|
2439
|
+
}*/
|
|
2440
|
+
.bcc-avatar.lg {
|
|
2441
|
+
@apply text-md size-10;
|
|
2442
|
+
--p-icon-size: var(--icon-size-md);
|
|
2443
|
+
}
|
|
2444
|
+
.bcc-avatar.xl {
|
|
2445
|
+
@apply size-12 text-xl;
|
|
2446
|
+
--p-icon-size: var(--icon-size-lg);
|
|
2447
|
+
}
|
|
2448
|
+
.bcc-avatar.xxl {
|
|
2449
|
+
@apply size-20 text-3xl;
|
|
2450
|
+
--p-icon-size: var(--icon-size-xl);
|
|
2451
|
+
}
|
|
2452
|
+
.bcc-avatar.xxxl {
|
|
2453
|
+
@apply size-24 text-4xl;
|
|
2454
|
+
--p-icon-size: var(--icon-size-xl);
|
|
2455
|
+
}
|
|
2370
2456
|
|
|
2457
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.lg ~ .p-badge,
|
|
2458
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.xl ~ .p-badge {
|
|
2459
|
+
transform: translate(40%, -40%);
|
|
2460
|
+
}
|
|
2371
2461
|
|
|
2372
|
-
|
|
2373
|
-
|
|
2374
|
-
|
|
2375
|
-
|
|
2376
|
-
}
|
|
2462
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl ~ .p-badge,
|
|
2463
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.xxl ~ .p-badge {
|
|
2464
|
+
transform: translate(20%, -20%);
|
|
2465
|
+
}
|
|
2377
2466
|
}
|
|
2378
2467
|
|
|
2379
2468
|
|
|
2469
|
+
|
|
2380
2470
|
/* from ./BccTabs/BccTabs.css */
|
|
2381
2471
|
@layer components {
|
|
2382
2472
|
.bcc-tabs-fill.p-tabs {
|
|
@@ -2395,6 +2485,9 @@ GUTTER FIX
|
|
|
2395
2485
|
height: 100%;
|
|
2396
2486
|
overflow: auto;
|
|
2397
2487
|
}
|
|
2488
|
+
.bcc-tabs-fluid.p-tabs {
|
|
2489
|
+
width: 100%;
|
|
2490
|
+
}
|
|
2398
2491
|
}
|
|
2399
2492
|
|
|
2400
2493
|
|
|
@@ -2417,24 +2510,28 @@ GUTTER FIX
|
|
|
2417
2510
|
|
|
2418
2511
|
|
|
2419
2512
|
|
|
2420
|
-
:root,
|
|
2513
|
+
:root,
|
|
2514
|
+
:host {
|
|
2421
2515
|
--font-sans: 'Archivo', system-ui, sans-serif;
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
|
|
2516
|
+
@apply m-0 p-0 font-sans antialiased;
|
|
2517
|
+
-webkit-font-smoothing: antialiased;
|
|
2518
|
+
-moz-osx-font-smoothing: grayscale;
|
|
2519
|
+
}
|
|
2425
2520
|
|
|
2521
|
+
hr {
|
|
2522
|
+
border-color: var(--color-border-default);
|
|
2426
2523
|
}
|
|
2427
2524
|
|
|
2428
2525
|
b,
|
|
2429
2526
|
strong,
|
|
2430
2527
|
.bold {
|
|
2431
|
-
|
|
2432
|
-
|
|
2528
|
+
font-weight: bold;
|
|
2529
|
+
--ctx-text: var(--ctx-text-bold);
|
|
2433
2530
|
}
|
|
2434
2531
|
|
|
2435
2532
|
/* Disable state */
|
|
2436
2533
|
:disabled,
|
|
2437
2534
|
.disabled {
|
|
2438
|
-
|
|
2439
|
-
|
|
2535
|
+
cursor: not-allowed;
|
|
2536
|
+
pointer-events: none;
|
|
2440
2537
|
}
|
|
@@ -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>;
|
|
@@ -2,7 +2,7 @@ export type NpsResultProps = {
|
|
|
2
2
|
/** NPS score between -100 and 100; drives the gauge needle angle and position. */
|
|
3
3
|
score: number;
|
|
4
4
|
/** Controls the size of the gauge and optional text (lg, md, sm, xs). */
|
|
5
|
-
size?: '
|
|
5
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
6
6
|
/** Text shown as the main heading; defaults to the numeric score when unset. */
|
|
7
7
|
display?: string;
|
|
8
8
|
/** Secondary label shown under the main heading. */
|
|
@@ -13,7 +13,7 @@ export type NpsResultProps = {
|
|
|
13
13
|
animated?: boolean;
|
|
14
14
|
};
|
|
15
15
|
declare const __VLS_export: import("vue").DefineComponent<NpsResultProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NpsResultProps> & Readonly<{}>, {
|
|
16
|
-
size: "
|
|
16
|
+
size: "xs" | "sm" | "md" | "lg" | "xl" | "full";
|
|
17
17
|
hideText: boolean;
|
|
18
18
|
animated: boolean;
|
|
19
19
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -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';
|
|
@@ -11,8 +11,8 @@ export type AvatarProps = Omit<PrimeAvatarProps, 'shape' | 'size'> & {
|
|
|
11
11
|
squared?: boolean;
|
|
12
12
|
/** Adds a visible border around the avatar. */
|
|
13
13
|
bordered?: boolean;
|
|
14
|
-
/** Controls the avatar dimensions; maps to CSS size classes (xs through xxl). */
|
|
15
|
-
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
|
14
|
+
/** Controls the avatar dimensions; maps to CSS size classes (xs through xxl). Default: md */
|
|
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;
|
|
@@ -3,6 +3,7 @@ import { type ButtonProps as PrimeButtonProps } from 'primevue/button';
|
|
|
3
3
|
export type ButtonProps = {
|
|
4
4
|
icon?: VueComponent;
|
|
5
5
|
iconRight?: boolean;
|
|
6
|
+
iconClass?: PrimeButtonProps['iconClass'];
|
|
6
7
|
size?: PrimeButtonProps['size'];
|
|
7
8
|
useCtx?: boolean;
|
|
8
9
|
} & /* @vue-ignore */ Omit<PrimeButtonProps, 'icon' | 'iconPos'>;
|
|
@@ -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
|
+
};
|