@bcc-code/component-library-vue 0.0.0-dev.0ebcb8d → 0.0.0-dev.1ea37a1
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 +35940 -35286
- package/dist/component-library.umd.cjs +796 -600
- package/dist/index.css +1 -1
- package/dist/theme.css +248 -124
- 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 +1 -1
- 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/BccToggle/BccToggle.vue.d.ts +12 -1
- package/dist-types/components/wrapped/index.d.ts +5 -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,48 +1825,154 @@
|
|
|
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
|
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
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;
|
|
1863
1884
|
}
|
|
1864
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
|
+
|
|
1865
1913
|
|
|
1866
1914
|
|
|
1867
1915
|
/* === ./components/custom/styles.css === */
|
|
1868
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
|
+
|
|
1869
1976
|
/* from ./BccBadge/BccBadge.css */
|
|
1870
1977
|
@layer components {
|
|
1871
1978
|
.bcc-badge {
|
|
@@ -1873,6 +1980,13 @@ GUTTER FIX
|
|
|
1873
1980
|
|
|
1874
1981
|
@apply bg-ctx text-ctx;
|
|
1875
1982
|
}
|
|
1983
|
+
|
|
1984
|
+
.bcc-badge.capital {
|
|
1985
|
+
@apply inline-flex;
|
|
1986
|
+
}
|
|
1987
|
+
.bcc-badge.gradient {
|
|
1988
|
+
@apply ctx-gradient;
|
|
1989
|
+
}
|
|
1876
1990
|
.bcc-badge.sm {
|
|
1877
1991
|
@apply w-4 h-4 text-heading-xs;
|
|
1878
1992
|
}
|
|
@@ -1883,7 +1997,7 @@ GUTTER FIX
|
|
|
1883
1997
|
@apply w-6 h-6 text-heading-md;
|
|
1884
1998
|
}
|
|
1885
1999
|
.bcc-badge.xl {
|
|
1886
|
-
@apply w-8 h-8 text-heading-
|
|
2000
|
+
@apply w-8 h-8 text-heading-md;
|
|
1887
2001
|
}
|
|
1888
2002
|
|
|
1889
2003
|
.bcc-badge .bcc-badge-icon {
|
|
@@ -2022,8 +2136,8 @@ GUTTER FIX
|
|
|
2022
2136
|
.bcc-frame--raised {
|
|
2023
2137
|
--ctx-background: var(--color-elevation-surface-raised-default);
|
|
2024
2138
|
}
|
|
2025
|
-
.bcc-frame--
|
|
2026
|
-
@apply rounded;
|
|
2139
|
+
.bcc-frame--rounded {
|
|
2140
|
+
@apply rounded-md;
|
|
2027
2141
|
}
|
|
2028
2142
|
.bcc-frame--raised.bcc-frame--shadow {
|
|
2029
2143
|
@apply shadow-raised;
|
|
@@ -2094,43 +2208,53 @@ GUTTER FIX
|
|
|
2094
2208
|
@apply relative w-full;
|
|
2095
2209
|
}
|
|
2096
2210
|
|
|
2097
|
-
.bcc-nps-result
|
|
2211
|
+
.bcc-nps-result.xs {
|
|
2212
|
+
@apply w-24;
|
|
2213
|
+
}
|
|
2214
|
+
.bcc-nps-result.sm {
|
|
2215
|
+
@apply w-36;
|
|
2216
|
+
}
|
|
2217
|
+
.bcc-nps-result.md {
|
|
2218
|
+
@apply w-48;
|
|
2219
|
+
}
|
|
2220
|
+
.bcc-nps-result.lg {
|
|
2221
|
+
@apply w-60;
|
|
2222
|
+
}
|
|
2223
|
+
.bcc-nps-result.xl {
|
|
2224
|
+
@apply w-72;
|
|
2225
|
+
}
|
|
2226
|
+
|
|
2227
|
+
.bcc-nps-result .bcc-nps-result-gauge-dial {
|
|
2098
2228
|
transform-origin: center;
|
|
2099
2229
|
}
|
|
2100
2230
|
|
|
2101
|
-
.bcc-nps-result.animated .result-gauge-dial {
|
|
2231
|
+
.bcc-nps-result.animated .bcc-nps-result-gauge-dial {
|
|
2102
2232
|
transition-delay: 0.3s;
|
|
2103
2233
|
transition: all .7s cubic-bezier(0, 0, 0.3, 1.5);
|
|
2104
2234
|
}
|
|
2105
2235
|
|
|
2106
|
-
.bcc-nps-result-labels.lg {
|
|
2107
|
-
@apply bottom-[2em];
|
|
2108
|
-
}
|
|
2109
2236
|
.bcc-nps-result-labels {
|
|
2110
|
-
@apply absolute bottom-
|
|
2111
|
-
}
|
|
2112
|
-
.bcc-nps-result-labels.sm {
|
|
2113
|
-
@apply bottom-0;
|
|
2237
|
+
@apply absolute text-base bottom-1/4 translate-y-1/2 flex w-full flex-col items-center justify-center;
|
|
2114
2238
|
}
|
|
2115
2239
|
|
|
2116
|
-
.bcc-nps-result-labels.lg .bcc-nps-result-labels--heading {
|
|
2117
|
-
@apply text-heading-xl leading-tight;
|
|
2118
|
-
}
|
|
2119
2240
|
.bcc-nps-result-labels--heading {
|
|
2120
|
-
@apply text-
|
|
2241
|
+
@apply text-[1.25em] font-semibold leading-none;
|
|
2121
2242
|
}
|
|
2122
|
-
.bcc-nps-result-labels
|
|
2123
|
-
@apply text-
|
|
2243
|
+
.bcc-nps-result-labels--label {
|
|
2244
|
+
@apply text-[0.75em] text-subtlest;
|
|
2124
2245
|
}
|
|
2125
2246
|
|
|
2126
|
-
.bcc-nps-result
|
|
2127
|
-
@apply text-
|
|
2247
|
+
.bcc-nps-result.md .bcc-nps-result-labels {
|
|
2248
|
+
@apply text-lg;
|
|
2128
2249
|
}
|
|
2129
|
-
.bcc-nps-result-labels
|
|
2130
|
-
@apply text-
|
|
2250
|
+
.bcc-nps-result.lg .bcc-nps-result-labels {
|
|
2251
|
+
@apply text-xl;
|
|
2252
|
+
}
|
|
2253
|
+
.bcc-nps-result.xl .bcc-nps-result-labels {
|
|
2254
|
+
@apply text-2xl;
|
|
2131
2255
|
}
|
|
2132
|
-
.bcc-nps-result
|
|
2133
|
-
@apply text-
|
|
2256
|
+
.bcc-nps-result.full .bcc-nps-result-labels {
|
|
2257
|
+
@apply text-lg;
|
|
2134
2258
|
}
|
|
2135
2259
|
}
|
|
2136
2260
|
|
|
@@ -2313,78 +2437,74 @@ GUTTER FIX
|
|
|
2313
2437
|
|
|
2314
2438
|
/* from ./BccAvatar/BccAvatar.css */
|
|
2315
2439
|
@layer components {
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
.bcc-avatar.M {
|
|
2324
|
-
@apply ctx-blue-subtler;
|
|
2325
|
-
}
|
|
2326
|
-
.bcc-avatar.female,
|
|
2327
|
-
.bcc-avatar.F {
|
|
2328
|
-
@apply ctx-purple-subtler;
|
|
2329
|
-
}
|
|
2330
|
-
.bcc-avatar.male.child,
|
|
2331
|
-
.bcc-avatar.M.child {
|
|
2332
|
-
@apply ctx-teal-subtler;
|
|
2333
|
-
}
|
|
2334
|
-
.bcc-avatar.female.child,
|
|
2335
|
-
.bcc-avatar.F.child {
|
|
2336
|
-
@apply ctx-magenta-subtler;
|
|
2337
|
-
}
|
|
2338
|
-
.bcc-avatar.bordered {
|
|
2339
|
-
@apply border-2 border-ctx;
|
|
2340
|
-
}
|
|
2341
|
-
.bcc-avatar.xs {
|
|
2342
|
-
@apply size-5 text-xs;
|
|
2343
|
-
}
|
|
2344
|
-
.bcc-avatar.sm {
|
|
2345
|
-
@apply size-6 text-sm;
|
|
2346
|
-
}
|
|
2347
|
-
.bcc-avatar.md {
|
|
2348
|
-
@apply size-8 text-base;
|
|
2349
|
-
}
|
|
2350
|
-
.bcc-avatar.lg {
|
|
2351
|
-
@apply size-10 text-lg;
|
|
2352
|
-
}
|
|
2353
|
-
.bcc-avatar.xl {
|
|
2354
|
-
@apply size-12 text-xl;
|
|
2355
|
-
}
|
|
2356
|
-
.bcc-avatar.xxl {
|
|
2357
|
-
@apply size-20 text-3xl;
|
|
2358
|
-
}
|
|
2359
|
-
.bcc-avatar.xxxl {
|
|
2360
|
-
@apply size-24 text-4xl;
|
|
2361
|
-
}
|
|
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
|
+
}
|
|
2362
2447
|
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2373
|
-
|
|
2374
|
-
|
|
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
|
+
}
|
|
2375
2494
|
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
|
|
2379
|
-
|
|
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
|
+
}
|
|
2380
2499
|
|
|
2381
|
-
|
|
2382
|
-
|
|
2383
|
-
|
|
2384
|
-
|
|
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
|
+
}
|
|
2385
2504
|
}
|
|
2386
2505
|
|
|
2387
2506
|
|
|
2507
|
+
|
|
2388
2508
|
/* from ./BccTabs/BccTabs.css */
|
|
2389
2509
|
@layer components {
|
|
2390
2510
|
.bcc-tabs-fill.p-tabs {
|
|
@@ -2425,24 +2545,28 @@ GUTTER FIX
|
|
|
2425
2545
|
|
|
2426
2546
|
|
|
2427
2547
|
|
|
2428
|
-
:root,
|
|
2548
|
+
:root,
|
|
2549
|
+
:host {
|
|
2429
2550
|
--font-sans: 'Archivo', system-ui, sans-serif;
|
|
2430
|
-
|
|
2431
|
-
|
|
2432
|
-
|
|
2551
|
+
@apply m-0 p-0 font-sans antialiased;
|
|
2552
|
+
-webkit-font-smoothing: antialiased;
|
|
2553
|
+
-moz-osx-font-smoothing: grayscale;
|
|
2554
|
+
}
|
|
2433
2555
|
|
|
2556
|
+
hr {
|
|
2557
|
+
border-color: var(--color-border-default);
|
|
2434
2558
|
}
|
|
2435
2559
|
|
|
2436
2560
|
b,
|
|
2437
2561
|
strong,
|
|
2438
2562
|
.bold {
|
|
2439
|
-
|
|
2440
|
-
|
|
2563
|
+
font-weight: bold;
|
|
2564
|
+
--ctx-text: var(--ctx-text-bold);
|
|
2441
2565
|
}
|
|
2442
2566
|
|
|
2443
2567
|
/* Disable state */
|
|
2444
2568
|
:disabled,
|
|
2445
2569
|
.disabled {
|
|
2446
|
-
|
|
2447
|
-
|
|
2570
|
+
cursor: not-allowed;
|
|
2571
|
+
pointer-events: none;
|
|
2448
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>;
|
|
@@ -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';
|
|
@@ -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;
|