@bcc-code/component-library-vue 0.0.0-dev.ee26b9d → 0.0.0-dev.f28f614
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 +43614 -40824
- package/dist/component-library.umd.cjs +885 -689
- package/dist/index.css +1 -1
- package/dist/theme.css +220 -115
- 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/BccCapacityIndicator/BccCapacityIndicator.vue.d.ts +3 -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/BccMessage.vue.d.ts +4 -2
- 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,37 +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
|
|
|
1866
|
+
.p-autocomplete-chip.p-chip {
|
|
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);
|
|
1870
|
+
}
|
|
1841
1871
|
|
|
1842
1872
|
/**
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
.p-menu-overlay,
|
|
1848
|
-
.p-multiselect-overlay,
|
|
1849
|
-
.p-select-overlay,
|
|
1850
|
-
.p-treeselect-overlay {
|
|
1851
|
-
margin: var(--p-anchor-gutter) 0;
|
|
1873
|
+
* BccSelect
|
|
1874
|
+
**/
|
|
1875
|
+
.p-select {
|
|
1876
|
+
--p-icon-size: var(--icon-size-sm);
|
|
1852
1877
|
}
|
|
1853
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
|
+
|
|
1854
1913
|
|
|
1855
1914
|
|
|
1856
1915
|
/* === ./components/custom/styles.css === */
|
|
1857
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
|
+
|
|
1858
1938
|
/* from ./BccBadge/BccBadge.css */
|
|
1859
1939
|
@layer components {
|
|
1860
1940
|
.bcc-badge {
|
|
@@ -1862,6 +1942,13 @@ GUTTER FIX
|
|
|
1862
1942
|
|
|
1863
1943
|
@apply bg-ctx text-ctx;
|
|
1864
1944
|
}
|
|
1945
|
+
|
|
1946
|
+
.bcc-badge.capital {
|
|
1947
|
+
@apply inline-flex;
|
|
1948
|
+
}
|
|
1949
|
+
.bcc-badge.gradient {
|
|
1950
|
+
@apply ctx-gradient;
|
|
1951
|
+
}
|
|
1865
1952
|
.bcc-badge.sm {
|
|
1866
1953
|
@apply w-4 h-4 text-heading-xs;
|
|
1867
1954
|
}
|
|
@@ -1872,7 +1959,7 @@ GUTTER FIX
|
|
|
1872
1959
|
@apply w-6 h-6 text-heading-md;
|
|
1873
1960
|
}
|
|
1874
1961
|
.bcc-badge.xl {
|
|
1875
|
-
@apply w-8 h-8 text-heading-
|
|
1962
|
+
@apply w-8 h-8 text-heading-md;
|
|
1876
1963
|
}
|
|
1877
1964
|
|
|
1878
1965
|
.bcc-badge .bcc-badge-icon {
|
|
@@ -1909,7 +1996,7 @@ GUTTER FIX
|
|
|
1909
1996
|
}
|
|
1910
1997
|
|
|
1911
1998
|
.bcc-badge.squared {
|
|
1912
|
-
@apply rounded;
|
|
1999
|
+
@apply rounded-sm;
|
|
1913
2000
|
}
|
|
1914
2001
|
}
|
|
1915
2002
|
|
|
@@ -1959,6 +2046,7 @@ GUTTER FIX
|
|
|
1959
2046
|
|
|
1960
2047
|
.bcc-capacity-indicator.is-warning {
|
|
1961
2048
|
@apply ctx-yellow-subtlest;
|
|
2049
|
+
--bcc-capacity-indicator-circle: var(--ctx-background);
|
|
1962
2050
|
}
|
|
1963
2051
|
|
|
1964
2052
|
.bcc-capacity-indicator.is-full {
|
|
@@ -2011,8 +2099,8 @@ GUTTER FIX
|
|
|
2011
2099
|
.bcc-frame--raised {
|
|
2012
2100
|
--ctx-background: var(--color-elevation-surface-raised-default);
|
|
2013
2101
|
}
|
|
2014
|
-
.bcc-frame--
|
|
2015
|
-
@apply rounded;
|
|
2102
|
+
.bcc-frame--rounded {
|
|
2103
|
+
@apply rounded-md;
|
|
2016
2104
|
}
|
|
2017
2105
|
.bcc-frame--raised.bcc-frame--shadow {
|
|
2018
2106
|
@apply shadow-raised;
|
|
@@ -2083,43 +2171,53 @@ GUTTER FIX
|
|
|
2083
2171
|
@apply relative w-full;
|
|
2084
2172
|
}
|
|
2085
2173
|
|
|
2086
|
-
.bcc-nps-result
|
|
2174
|
+
.bcc-nps-result.xs {
|
|
2175
|
+
@apply w-24;
|
|
2176
|
+
}
|
|
2177
|
+
.bcc-nps-result.sm {
|
|
2178
|
+
@apply w-36;
|
|
2179
|
+
}
|
|
2180
|
+
.bcc-nps-result.md {
|
|
2181
|
+
@apply w-48;
|
|
2182
|
+
}
|
|
2183
|
+
.bcc-nps-result.lg {
|
|
2184
|
+
@apply w-60;
|
|
2185
|
+
}
|
|
2186
|
+
.bcc-nps-result.xl {
|
|
2187
|
+
@apply w-72;
|
|
2188
|
+
}
|
|
2189
|
+
|
|
2190
|
+
.bcc-nps-result .bcc-nps-result-gauge-dial {
|
|
2087
2191
|
transform-origin: center;
|
|
2088
2192
|
}
|
|
2089
2193
|
|
|
2090
|
-
.bcc-nps-result.animated .result-gauge-dial {
|
|
2194
|
+
.bcc-nps-result.animated .bcc-nps-result-gauge-dial {
|
|
2091
2195
|
transition-delay: 0.3s;
|
|
2092
2196
|
transition: all .7s cubic-bezier(0, 0, 0.3, 1.5);
|
|
2093
2197
|
}
|
|
2094
2198
|
|
|
2095
|
-
.bcc-nps-result-labels.lg {
|
|
2096
|
-
@apply bottom-[2em];
|
|
2097
|
-
}
|
|
2098
2199
|
.bcc-nps-result-labels {
|
|
2099
|
-
@apply absolute bottom-
|
|
2100
|
-
}
|
|
2101
|
-
.bcc-nps-result-labels.sm {
|
|
2102
|
-
@apply bottom-0;
|
|
2200
|
+
@apply absolute text-base bottom-1/4 translate-y-1/2 flex w-full flex-col items-center justify-center;
|
|
2103
2201
|
}
|
|
2104
2202
|
|
|
2105
|
-
.bcc-nps-result-labels.lg .bcc-nps-result-labels--heading {
|
|
2106
|
-
@apply text-heading-xl leading-tight;
|
|
2107
|
-
}
|
|
2108
2203
|
.bcc-nps-result-labels--heading {
|
|
2109
|
-
@apply text-
|
|
2204
|
+
@apply text-[1.25em] font-semibold leading-none;
|
|
2110
2205
|
}
|
|
2111
|
-
.bcc-nps-result-labels
|
|
2112
|
-
@apply text-
|
|
2206
|
+
.bcc-nps-result-labels--label {
|
|
2207
|
+
@apply text-[0.75em] text-subtlest;
|
|
2113
2208
|
}
|
|
2114
2209
|
|
|
2115
|
-
.bcc-nps-result
|
|
2116
|
-
@apply text-
|
|
2210
|
+
.bcc-nps-result.md .bcc-nps-result-labels {
|
|
2211
|
+
@apply text-lg;
|
|
2117
2212
|
}
|
|
2118
|
-
.bcc-nps-result-labels
|
|
2119
|
-
@apply text-
|
|
2213
|
+
.bcc-nps-result.lg .bcc-nps-result-labels {
|
|
2214
|
+
@apply text-xl;
|
|
2215
|
+
}
|
|
2216
|
+
.bcc-nps-result.xl .bcc-nps-result-labels {
|
|
2217
|
+
@apply text-2xl;
|
|
2120
2218
|
}
|
|
2121
|
-
.bcc-nps-result
|
|
2122
|
-
@apply text-
|
|
2219
|
+
.bcc-nps-result.full .bcc-nps-result-labels {
|
|
2220
|
+
@apply text-lg;
|
|
2123
2221
|
}
|
|
2124
2222
|
}
|
|
2125
2223
|
|
|
@@ -2302,75 +2400,74 @@ GUTTER FIX
|
|
|
2302
2400
|
|
|
2303
2401
|
/* from ./BccAvatar/BccAvatar.css */
|
|
2304
2402
|
@layer components {
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
.bcc-avatar.M {
|
|
2313
|
-
@apply ctx-blue-subtler;
|
|
2314
|
-
}
|
|
2315
|
-
.bcc-avatar.female,
|
|
2316
|
-
.bcc-avatar.F {
|
|
2317
|
-
@apply ctx-purple-subtler;
|
|
2318
|
-
}
|
|
2319
|
-
.bcc-avatar.male.child,
|
|
2320
|
-
.bcc-avatar.M.child {
|
|
2321
|
-
@apply ctx-teal-subtler;
|
|
2322
|
-
}
|
|
2323
|
-
.bcc-avatar.female.child,
|
|
2324
|
-
.bcc-avatar.F.child {
|
|
2325
|
-
@apply ctx-magenta-subtler;
|
|
2326
|
-
}
|
|
2327
|
-
.bcc-avatar.bordered {
|
|
2328
|
-
@apply border-2 border-ctx;
|
|
2329
|
-
}
|
|
2330
|
-
.bcc-avatar.xs {
|
|
2331
|
-
@apply size-5 text-xs;
|
|
2332
|
-
}
|
|
2333
|
-
.bcc-avatar.sm {
|
|
2334
|
-
@apply size-6 text-sm;
|
|
2335
|
-
}
|
|
2336
|
-
.bcc-avatar.md {
|
|
2337
|
-
@apply size-8 text-base;
|
|
2338
|
-
}
|
|
2339
|
-
.bcc-avatar.lg {
|
|
2340
|
-
@apply size-10 text-lg;
|
|
2341
|
-
}
|
|
2342
|
-
.bcc-avatar.xl {
|
|
2343
|
-
@apply size-12 text-xl;
|
|
2344
|
-
}
|
|
2345
|
-
.bcc-avatar.xxl {
|
|
2346
|
-
@apply size-20 text-3xl;
|
|
2347
|
-
}
|
|
2348
|
-
.bcc-avatar.xxxl {
|
|
2349
|
-
@apply size-24 text-4xl;
|
|
2350
|
-
}
|
|
2403
|
+
.bcc-avatar {
|
|
2404
|
+
--p-avatar-background: var(--ctx-background);
|
|
2405
|
+
--p-avatar-color: var(--ctx-text);
|
|
2406
|
+
--bcc-avatar-border: var(--ctx-border);
|
|
2407
|
+
--p-icon-size: var(--icon-size-sm);
|
|
2408
|
+
@apply ctx-gray-subtler shrink-0 overflow-hidden text-sm;
|
|
2409
|
+
}
|
|
2351
2410
|
|
|
2352
|
-
|
|
2353
|
-
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2411
|
+
.bcc-avatar.male,
|
|
2412
|
+
.bcc-avatar.M {
|
|
2413
|
+
@apply ctx-blue-subtler;
|
|
2414
|
+
}
|
|
2415
|
+
.bcc-avatar.female,
|
|
2416
|
+
.bcc-avatar.F {
|
|
2417
|
+
@apply ctx-purple-subtler;
|
|
2418
|
+
}
|
|
2419
|
+
.bcc-avatar.male.child,
|
|
2420
|
+
.bcc-avatar.M.child {
|
|
2421
|
+
@apply ctx-teal-subtler;
|
|
2422
|
+
}
|
|
2423
|
+
.bcc-avatar.female.child,
|
|
2424
|
+
.bcc-avatar.F.child {
|
|
2425
|
+
@apply ctx-magenta-subtler;
|
|
2426
|
+
}
|
|
2427
|
+
.bcc-avatar.bordered {
|
|
2428
|
+
@apply border-ctx border-2;
|
|
2429
|
+
}
|
|
2430
|
+
.bcc-avatar.xs {
|
|
2431
|
+
@apply size-5 text-xs;
|
|
2432
|
+
--p-icon-size: var(--icon-size-xs);
|
|
2433
|
+
}
|
|
2434
|
+
.bcc-avatar.sm {
|
|
2435
|
+
@apply size-6 text-xs;
|
|
2436
|
+
--p-icon-size: var(--icon-size-xs);
|
|
2437
|
+
}
|
|
2438
|
+
/* .bcc-avatar.md {
|
|
2439
|
+
same as default
|
|
2440
|
+
}*/
|
|
2441
|
+
.bcc-avatar.lg {
|
|
2442
|
+
@apply text-md size-10;
|
|
2443
|
+
--p-icon-size: var(--icon-size-md);
|
|
2444
|
+
}
|
|
2445
|
+
.bcc-avatar.xl {
|
|
2446
|
+
@apply size-12 text-xl;
|
|
2447
|
+
--p-icon-size: var(--icon-size-lg);
|
|
2448
|
+
}
|
|
2449
|
+
.bcc-avatar.xxl {
|
|
2450
|
+
@apply size-20 text-3xl;
|
|
2451
|
+
--p-icon-size: var(--icon-size-xl);
|
|
2452
|
+
}
|
|
2453
|
+
.bcc-avatar.xxxl {
|
|
2454
|
+
@apply size-24 text-4xl;
|
|
2455
|
+
--p-icon-size: var(--icon-size-xl);
|
|
2456
|
+
}
|
|
2364
2457
|
|
|
2458
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.lg ~ .p-badge,
|
|
2459
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.xl ~ .p-badge {
|
|
2460
|
+
transform: translate(40%, -40%);
|
|
2461
|
+
}
|
|
2365
2462
|
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
}
|
|
2463
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl ~ .p-badge,
|
|
2464
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.xxl ~ .p-badge {
|
|
2465
|
+
transform: translate(20%, -20%);
|
|
2466
|
+
}
|
|
2371
2467
|
}
|
|
2372
2468
|
|
|
2373
2469
|
|
|
2470
|
+
|
|
2374
2471
|
/* from ./BccTabs/BccTabs.css */
|
|
2375
2472
|
@layer components {
|
|
2376
2473
|
.bcc-tabs-fill.p-tabs {
|
|
@@ -2389,6 +2486,9 @@ GUTTER FIX
|
|
|
2389
2486
|
height: 100%;
|
|
2390
2487
|
overflow: auto;
|
|
2391
2488
|
}
|
|
2489
|
+
.bcc-tabs-fluid.p-tabs {
|
|
2490
|
+
width: 100%;
|
|
2491
|
+
}
|
|
2392
2492
|
}
|
|
2393
2493
|
|
|
2394
2494
|
|
|
@@ -2411,24 +2511,29 @@ GUTTER FIX
|
|
|
2411
2511
|
|
|
2412
2512
|
|
|
2413
2513
|
|
|
2414
|
-
:root,
|
|
2514
|
+
:root,
|
|
2515
|
+
:host {
|
|
2415
2516
|
--font-sans: 'Archivo', system-ui, sans-serif;
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2517
|
+
@apply m-0 p-0 font-sans antialiased;
|
|
2518
|
+
-webkit-font-smoothing: antialiased;
|
|
2519
|
+
-moz-osx-font-smoothing: grayscale;
|
|
2520
|
+
line-height: 1.2;
|
|
2521
|
+
}
|
|
2419
2522
|
|
|
2523
|
+
hr {
|
|
2524
|
+
border-color: var(--color-border-default);
|
|
2420
2525
|
}
|
|
2421
2526
|
|
|
2422
2527
|
b,
|
|
2423
2528
|
strong,
|
|
2424
2529
|
.bold {
|
|
2425
|
-
|
|
2426
|
-
|
|
2530
|
+
font-weight: bold;
|
|
2531
|
+
--ctx-text: var(--ctx-text-bold);
|
|
2427
2532
|
}
|
|
2428
2533
|
|
|
2429
2534
|
/* Disable state */
|
|
2430
2535
|
:disabled,
|
|
2431
2536
|
.disabled {
|
|
2432
|
-
|
|
2433
|
-
|
|
2537
|
+
cursor: not-allowed;
|
|
2538
|
+
pointer-events: none;
|
|
2434
2539
|
}
|
|
@@ -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;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { BCC_CONTEXT } from '@/contexts';
|
|
1
2
|
export type CapacityIndicatorProps = {
|
|
2
3
|
/** Total capacity; use -1 for “unlimited” (shows an infinity-style icon instead of a bar). */
|
|
3
4
|
total: number;
|
|
@@ -11,6 +12,8 @@ export type CapacityIndicatorProps = {
|
|
|
11
12
|
squared?: boolean;
|
|
12
13
|
/** When true, applies warning/full color states (e.g. color change at high usage). */
|
|
13
14
|
colored?: boolean;
|
|
15
|
+
/** Design context (e.g. neutral, brand) used for background and text color. */
|
|
16
|
+
context?: BCC_CONTEXT;
|
|
14
17
|
};
|
|
15
18
|
declare const __VLS_export: import("vue").DefineComponent<CapacityIndicatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CapacityIndicatorProps> & Readonly<{}>, {
|
|
16
19
|
size: "xs" | "sm" | "base" | "lg";
|
|
@@ -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;
|