@bcc-code/component-library-vue 0.0.0-dev.edf8c5a → 0.0.0-dev.f0229a6
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 +45012 -42101
- package/dist/component-library.umd.cjs +1671 -1475
- package/dist/index.css +1 -1
- package/dist/theme.css +299 -166
- 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/BccRadioButton.vue.d.ts +18 -0
- package/dist-types/components/wrapped/BccSelectButton.vue.d.ts +17 -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 +11 -0
- package/dist-types/index.d.ts +14 -7
- 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,99 +1825,212 @@
|
|
|
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
|
-
|
|
1854
|
-
|
|
1855
|
-
.p-select-
|
|
1856
|
-
|
|
1857
|
-
|
|
1873
|
+
* BccSelect
|
|
1874
|
+
**/
|
|
1875
|
+
.p-select {
|
|
1876
|
+
--p-icon-size: var(--icon-size-sm);
|
|
1877
|
+
}
|
|
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
|
+
.p-togglebutton {
|
|
1913
|
+
font-size: var(--text-sm);
|
|
1914
|
+
border: 0;
|
|
1915
|
+
}
|
|
1916
|
+
|
|
1917
|
+
.p-togglebutton-sm {
|
|
1918
|
+
font-size: var(--text-sm);
|
|
1919
|
+
}
|
|
1920
|
+
|
|
1921
|
+
.p-togglebutton-lg {
|
|
1922
|
+
font-size: var(--text-md);
|
|
1858
1923
|
}
|
|
1859
1924
|
|
|
1860
1925
|
|
|
1861
1926
|
|
|
1927
|
+
|
|
1862
1928
|
/* === ./components/custom/styles.css === */
|
|
1863
1929
|
|
|
1930
|
+
/* from ./BccAppNavigation/BccAppNavigation.css */
|
|
1931
|
+
@layer components {
|
|
1932
|
+
.bcc-app-nav {
|
|
1933
|
+
@apply bg-elevation-surface-default dark:border-brand-800 sticky inset-x-0 bottom-0 z-20 overflow-visible shadow-md sm:rounded-t-xl dark:border-t;
|
|
1934
|
+
}
|
|
1935
|
+
.bcc-app-nav-container {
|
|
1936
|
+
@apply center pb-inset-bottom-1 mx-auto max-w-lg pt-1;
|
|
1937
|
+
}
|
|
1938
|
+
|
|
1939
|
+
.bcc-app-nav-item {
|
|
1940
|
+
@apply ctx-gray-subtlest text-ctx relative flex h-12 flex-1 flex-col items-center justify-center gap-1 transition-colors focus:ring-0 focus:outline-none;
|
|
1941
|
+
}
|
|
1942
|
+
|
|
1943
|
+
.bcc-nav-item-icon {
|
|
1944
|
+
@apply size-6 opacity-50;
|
|
1945
|
+
}
|
|
1946
|
+
|
|
1947
|
+
.bcc-nav-item-badge {
|
|
1948
|
+
@apply absolute top-0 right-1 opacity-75;
|
|
1949
|
+
}
|
|
1950
|
+
|
|
1951
|
+
.bcc-nav-item-title {
|
|
1952
|
+
@apply text-heading-xs text-center opacity-50;
|
|
1953
|
+
}
|
|
1954
|
+
|
|
1955
|
+
.bcc-app-nav-item--active {
|
|
1956
|
+
@apply text-selected;
|
|
1957
|
+
}
|
|
1958
|
+
|
|
1959
|
+
.bcc-app-nav-item--active .bcc-nav-item-icon,
|
|
1960
|
+
.bcc-app-nav-item--active .bcc-nav-item-badge,
|
|
1961
|
+
.bcc-app-nav-item--active .bcc-nav-item-title {
|
|
1962
|
+
@apply opacity-100;
|
|
1963
|
+
}
|
|
1964
|
+
}
|
|
1965
|
+
|
|
1966
|
+
|
|
1967
|
+
|
|
1864
1968
|
/* from ./BccBadge/BccBadge.css */
|
|
1865
1969
|
@layer components {
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
@apply bg-ctx text-ctx;
|
|
1870
|
-
}
|
|
1871
|
-
.bcc-badge.sm {
|
|
1872
|
-
@apply w-4 h-4 text-heading-xs;
|
|
1873
|
-
}
|
|
1874
|
-
.bcc-badge.md {
|
|
1875
|
-
@apply h-5 w-5 text-heading-sm;
|
|
1876
|
-
}
|
|
1877
|
-
.bcc-badge.lg {
|
|
1878
|
-
@apply w-6 h-6 text-heading-md;
|
|
1879
|
-
}
|
|
1880
|
-
.bcc-badge.xl {
|
|
1881
|
-
@apply w-8 h-8 text-heading-lg;
|
|
1882
|
-
}
|
|
1970
|
+
.bcc-badge {
|
|
1971
|
+
@apply inline-flex shrink-0 items-center justify-center gap-1 rounded-full leading-none whitespace-nowrap;
|
|
1883
1972
|
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
}
|
|
1887
|
-
.bcc-badge.lg .bcc-badge-icon {
|
|
1888
|
-
@apply size-5;
|
|
1889
|
-
}
|
|
1890
|
-
.bcc-badge.xl .bcc-badge-icon {
|
|
1891
|
-
@apply size-6;
|
|
1892
|
-
}
|
|
1973
|
+
@apply bg-ctx text-ctx;
|
|
1974
|
+
}
|
|
1893
1975
|
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1976
|
+
.bcc-badge.capital {
|
|
1977
|
+
@apply inline-flex;
|
|
1978
|
+
}
|
|
1979
|
+
.bcc-badge.gradient {
|
|
1980
|
+
@apply ctx-gradient;
|
|
1981
|
+
}
|
|
1982
|
+
.bcc-badge.sm {
|
|
1983
|
+
@apply text-heading-xs h-4 w-4;
|
|
1984
|
+
}
|
|
1985
|
+
.bcc-badge.md {
|
|
1986
|
+
@apply text-heading-sm h-5 w-5;
|
|
1987
|
+
}
|
|
1988
|
+
.bcc-badge.lg {
|
|
1989
|
+
@apply text-heading-md h-6 w-6;
|
|
1990
|
+
}
|
|
1991
|
+
.bcc-badge.xl {
|
|
1992
|
+
@apply text-heading-md h-8 w-8;
|
|
1993
|
+
}
|
|
1906
1994
|
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1995
|
+
.bcc-badge .bcc-badge-icon {
|
|
1996
|
+
@apply size-4;
|
|
1997
|
+
}
|
|
1998
|
+
.bcc-badge.lg .bcc-badge-icon {
|
|
1999
|
+
@apply size-5;
|
|
2000
|
+
}
|
|
2001
|
+
.bcc-badge.xl .bcc-badge-icon {
|
|
2002
|
+
@apply size-6;
|
|
2003
|
+
}
|
|
1911
2004
|
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
2005
|
+
.bcc-badge.bcc-badge-text {
|
|
2006
|
+
@apply w-auto px-2;
|
|
2007
|
+
}
|
|
2008
|
+
.bcc-badge-text.lg,
|
|
2009
|
+
.bcc-badge-text.xl {
|
|
2010
|
+
@apply px-3;
|
|
2011
|
+
}
|
|
2012
|
+
.bcc-badge-text.border.lg,
|
|
2013
|
+
.bcc-badge-text.border.xl {
|
|
2014
|
+
@apply px-2;
|
|
2015
|
+
}
|
|
2016
|
+
.bcc-badge-text.bordered.lg,
|
|
2017
|
+
.bcc-badge-text.bordered.xl {
|
|
2018
|
+
@apply px-1;
|
|
2019
|
+
}
|
|
1916
2020
|
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
2021
|
+
.bcc-badge.border {
|
|
2022
|
+
@apply border-1;
|
|
2023
|
+
border-color: var(--ctx-background-pressed);
|
|
2024
|
+
}
|
|
2025
|
+
|
|
2026
|
+
.bcc-badge.bordered {
|
|
2027
|
+
@apply border-2;
|
|
2028
|
+
border-color: var(--ctx-background-pressed);
|
|
2029
|
+
}
|
|
2030
|
+
|
|
2031
|
+
.bcc-badge.squared {
|
|
2032
|
+
@apply rounded-sm;
|
|
2033
|
+
}
|
|
1920
2034
|
}
|
|
1921
2035
|
|
|
1922
2036
|
|
|
@@ -1965,6 +2079,7 @@ GUTTER FIX
|
|
|
1965
2079
|
|
|
1966
2080
|
.bcc-capacity-indicator.is-warning {
|
|
1967
2081
|
@apply ctx-yellow-subtlest;
|
|
2082
|
+
--bcc-capacity-indicator-circle: var(--ctx-background);
|
|
1968
2083
|
}
|
|
1969
2084
|
|
|
1970
2085
|
.bcc-capacity-indicator.is-full {
|
|
@@ -2017,8 +2132,8 @@ GUTTER FIX
|
|
|
2017
2132
|
.bcc-frame--raised {
|
|
2018
2133
|
--ctx-background: var(--color-elevation-surface-raised-default);
|
|
2019
2134
|
}
|
|
2020
|
-
.bcc-frame--
|
|
2021
|
-
@apply rounded;
|
|
2135
|
+
.bcc-frame--rounded {
|
|
2136
|
+
@apply rounded-md;
|
|
2022
2137
|
}
|
|
2023
2138
|
.bcc-frame--raised.bcc-frame--shadow {
|
|
2024
2139
|
@apply shadow-raised;
|
|
@@ -2089,43 +2204,53 @@ GUTTER FIX
|
|
|
2089
2204
|
@apply relative w-full;
|
|
2090
2205
|
}
|
|
2091
2206
|
|
|
2092
|
-
.bcc-nps-result
|
|
2207
|
+
.bcc-nps-result.xs {
|
|
2208
|
+
@apply w-24;
|
|
2209
|
+
}
|
|
2210
|
+
.bcc-nps-result.sm {
|
|
2211
|
+
@apply w-36;
|
|
2212
|
+
}
|
|
2213
|
+
.bcc-nps-result.md {
|
|
2214
|
+
@apply w-48;
|
|
2215
|
+
}
|
|
2216
|
+
.bcc-nps-result.lg {
|
|
2217
|
+
@apply w-60;
|
|
2218
|
+
}
|
|
2219
|
+
.bcc-nps-result.xl {
|
|
2220
|
+
@apply w-72;
|
|
2221
|
+
}
|
|
2222
|
+
|
|
2223
|
+
.bcc-nps-result .bcc-nps-result-gauge-dial {
|
|
2093
2224
|
transform-origin: center;
|
|
2094
2225
|
}
|
|
2095
2226
|
|
|
2096
|
-
.bcc-nps-result.animated .result-gauge-dial {
|
|
2227
|
+
.bcc-nps-result.animated .bcc-nps-result-gauge-dial {
|
|
2097
2228
|
transition-delay: 0.3s;
|
|
2098
2229
|
transition: all .7s cubic-bezier(0, 0, 0.3, 1.5);
|
|
2099
2230
|
}
|
|
2100
2231
|
|
|
2101
|
-
.bcc-nps-result-labels.lg {
|
|
2102
|
-
@apply bottom-[2em];
|
|
2103
|
-
}
|
|
2104
2232
|
.bcc-nps-result-labels {
|
|
2105
|
-
@apply absolute bottom-
|
|
2106
|
-
}
|
|
2107
|
-
.bcc-nps-result-labels.sm {
|
|
2108
|
-
@apply bottom-0;
|
|
2233
|
+
@apply absolute text-base bottom-1/4 translate-y-1/2 flex w-full flex-col items-center justify-center;
|
|
2109
2234
|
}
|
|
2110
2235
|
|
|
2111
|
-
.bcc-nps-result-labels.lg .bcc-nps-result-labels--heading {
|
|
2112
|
-
@apply text-heading-xl leading-tight;
|
|
2113
|
-
}
|
|
2114
2236
|
.bcc-nps-result-labels--heading {
|
|
2115
|
-
@apply text-
|
|
2237
|
+
@apply text-[1.25em] font-semibold leading-none;
|
|
2116
2238
|
}
|
|
2117
|
-
.bcc-nps-result-labels
|
|
2118
|
-
@apply text-
|
|
2239
|
+
.bcc-nps-result-labels--label {
|
|
2240
|
+
@apply text-[0.75em] text-subtlest;
|
|
2119
2241
|
}
|
|
2120
2242
|
|
|
2121
|
-
.bcc-nps-result
|
|
2122
|
-
@apply text-
|
|
2243
|
+
.bcc-nps-result.md .bcc-nps-result-labels {
|
|
2244
|
+
@apply text-lg;
|
|
2123
2245
|
}
|
|
2124
|
-
.bcc-nps-result-labels
|
|
2125
|
-
@apply text-
|
|
2246
|
+
.bcc-nps-result.lg .bcc-nps-result-labels {
|
|
2247
|
+
@apply text-xl;
|
|
2126
2248
|
}
|
|
2127
|
-
.bcc-nps-result
|
|
2128
|
-
@apply text-
|
|
2249
|
+
.bcc-nps-result.xl .bcc-nps-result-labels {
|
|
2250
|
+
@apply text-2xl;
|
|
2251
|
+
}
|
|
2252
|
+
.bcc-nps-result.full .bcc-nps-result-labels {
|
|
2253
|
+
@apply text-lg;
|
|
2129
2254
|
}
|
|
2130
2255
|
}
|
|
2131
2256
|
|
|
@@ -2308,75 +2433,74 @@ GUTTER FIX
|
|
|
2308
2433
|
|
|
2309
2434
|
/* from ./BccAvatar/BccAvatar.css */
|
|
2310
2435
|
@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
|
-
}
|
|
2436
|
+
.bcc-avatar {
|
|
2437
|
+
--p-avatar-background: var(--ctx-background);
|
|
2438
|
+
--p-avatar-color: var(--ctx-text);
|
|
2439
|
+
--bcc-avatar-border: var(--ctx-border);
|
|
2440
|
+
--p-icon-size: var(--icon-size-sm);
|
|
2441
|
+
@apply ctx-gray-subtler shrink-0 overflow-hidden text-sm;
|
|
2442
|
+
}
|
|
2357
2443
|
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2444
|
+
.bcc-avatar.male,
|
|
2445
|
+
.bcc-avatar.M {
|
|
2446
|
+
@apply ctx-blue-subtler;
|
|
2447
|
+
}
|
|
2448
|
+
.bcc-avatar.female,
|
|
2449
|
+
.bcc-avatar.F {
|
|
2450
|
+
@apply ctx-purple-subtler;
|
|
2451
|
+
}
|
|
2452
|
+
.bcc-avatar.male.child,
|
|
2453
|
+
.bcc-avatar.M.child {
|
|
2454
|
+
@apply ctx-teal-subtler;
|
|
2455
|
+
}
|
|
2456
|
+
.bcc-avatar.female.child,
|
|
2457
|
+
.bcc-avatar.F.child {
|
|
2458
|
+
@apply ctx-magenta-subtler;
|
|
2459
|
+
}
|
|
2460
|
+
.bcc-avatar.bordered {
|
|
2461
|
+
@apply border-ctx border-2;
|
|
2462
|
+
}
|
|
2463
|
+
.bcc-avatar.xs {
|
|
2464
|
+
@apply size-5 text-xs;
|
|
2465
|
+
--p-icon-size: var(--icon-size-xs);
|
|
2466
|
+
}
|
|
2467
|
+
.bcc-avatar.sm {
|
|
2468
|
+
@apply size-6 text-xs;
|
|
2469
|
+
--p-icon-size: var(--icon-size-xs);
|
|
2470
|
+
}
|
|
2471
|
+
/* .bcc-avatar.md {
|
|
2472
|
+
same as default
|
|
2473
|
+
}*/
|
|
2474
|
+
.bcc-avatar.lg {
|
|
2475
|
+
@apply text-md size-10;
|
|
2476
|
+
--p-icon-size: var(--icon-size-md);
|
|
2477
|
+
}
|
|
2478
|
+
.bcc-avatar.xl {
|
|
2479
|
+
@apply size-12 text-xl;
|
|
2480
|
+
--p-icon-size: var(--icon-size-lg);
|
|
2481
|
+
}
|
|
2482
|
+
.bcc-avatar.xxl {
|
|
2483
|
+
@apply size-20 text-3xl;
|
|
2484
|
+
--p-icon-size: var(--icon-size-xl);
|
|
2485
|
+
}
|
|
2486
|
+
.bcc-avatar.xxxl {
|
|
2487
|
+
@apply size-24 text-4xl;
|
|
2488
|
+
--p-icon-size: var(--icon-size-xl);
|
|
2489
|
+
}
|
|
2370
2490
|
|
|
2491
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.lg ~ .p-badge,
|
|
2492
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.xl ~ .p-badge {
|
|
2493
|
+
transform: translate(40%, -40%);
|
|
2494
|
+
}
|
|
2371
2495
|
|
|
2372
|
-
|
|
2373
|
-
|
|
2374
|
-
|
|
2375
|
-
|
|
2376
|
-
}
|
|
2496
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl ~ .p-badge,
|
|
2497
|
+
.p-overlaybadge .bcc-avatar.p-avatar-circle.xxl ~ .p-badge {
|
|
2498
|
+
transform: translate(20%, -20%);
|
|
2499
|
+
}
|
|
2377
2500
|
}
|
|
2378
2501
|
|
|
2379
2502
|
|
|
2503
|
+
|
|
2380
2504
|
/* from ./BccTabs/BccTabs.css */
|
|
2381
2505
|
@layer components {
|
|
2382
2506
|
.bcc-tabs-fill.p-tabs {
|
|
@@ -2395,6 +2519,9 @@ GUTTER FIX
|
|
|
2395
2519
|
height: 100%;
|
|
2396
2520
|
overflow: auto;
|
|
2397
2521
|
}
|
|
2522
|
+
.bcc-tabs-fluid.p-tabs {
|
|
2523
|
+
width: 100%;
|
|
2524
|
+
}
|
|
2398
2525
|
}
|
|
2399
2526
|
|
|
2400
2527
|
|
|
@@ -2417,24 +2544,30 @@ GUTTER FIX
|
|
|
2417
2544
|
|
|
2418
2545
|
|
|
2419
2546
|
|
|
2420
|
-
:root,
|
|
2547
|
+
:root,
|
|
2548
|
+
:host {
|
|
2421
2549
|
--font-sans: 'Archivo', system-ui, sans-serif;
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
|
|
2550
|
+
@apply m-0 p-0 font-sans antialiased;
|
|
2551
|
+
-webkit-font-smoothing: antialiased;
|
|
2552
|
+
-moz-osx-font-smoothing: grayscale;
|
|
2553
|
+
line-height: 1.2;
|
|
2554
|
+
font-kerning: normal;
|
|
2555
|
+
}
|
|
2425
2556
|
|
|
2557
|
+
hr {
|
|
2558
|
+
border-color: var(--color-border-default);
|
|
2426
2559
|
}
|
|
2427
2560
|
|
|
2428
2561
|
b,
|
|
2429
2562
|
strong,
|
|
2430
2563
|
.bold {
|
|
2431
|
-
|
|
2432
|
-
|
|
2564
|
+
font-weight: bold;
|
|
2565
|
+
--ctx-text: var(--ctx-text-bold);
|
|
2433
2566
|
}
|
|
2434
2567
|
|
|
2435
2568
|
/* Disable state */
|
|
2436
2569
|
:disabled,
|
|
2437
2570
|
.disabled {
|
|
2438
|
-
|
|
2439
|
-
|
|
2571
|
+
cursor: not-allowed;
|
|
2572
|
+
pointer-events: none;
|
|
2440
2573
|
}
|
|
@@ -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;
|