@bcc-code/component-library-vue 0.6.7 → 0.6.8

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/theme.css CHANGED
@@ -1820,86 +1820,26 @@
1820
1820
 
1821
1821
 
1822
1822
  /* === ./styles/component-overrides.css === */
1823
+ /** Our icons are a bit smaller that Primevue's default */
1823
1824
  .p-autocomplete .p-icon {
1824
- --p-icon-size: 20px;
1825
- --p-form-field-sm-font-size: 20px;
1826
- --p-form-field-lg-font-size: 24px;
1825
+ --p-icon-size: var(--icon-size-sm);
1826
+ --p-form-field-sm-font-size: var(--icon-size-sm);
1827
+ --p-form-field-lg-font-size: var(--icon-size-md);
1827
1828
  }
1828
1829
 
1830
+ .p-autocomplete-clearable .p-inputtext {
1831
+ flex-grow: 1;
1832
+ }
1829
1833
 
1834
+ /** Primevue 's component is missing the gap between input and dropdown */
1835
+ .p-autocomplete-overlay {
1836
+ margin-top: var(--p-anchor-gutter);
1837
+ }
1830
1838
 
1831
- /* === ./components/custom/styles.css === */
1832
-
1833
- /* from ./BccAvatar/BccAvatar.css */
1834
- @layer components {
1835
- .bcc-avatar {
1836
- --p-avatar-background: var(--ctx-background);
1837
- --p-avatar-color: var(--ctx-text);
1838
- --bcc-avatar-border: var(--ctx-border);
1839
- @apply overflow-hidden shrink-0 ctx-gray-subtler;
1840
- }
1841
- .bcc-avatar.male,
1842
- .bcc-avatar.M {
1843
- @apply ctx-blue-subtler;
1844
- }
1845
- .bcc-avatar.female,
1846
- .bcc-avatar.F {
1847
- @apply ctx-purple-subtler;
1848
- }
1849
- .bcc-avatar.male.child,
1850
- .bcc-avatar.M.child {
1851
- @apply ctx-teal-subtler;
1852
- }
1853
- .bcc-avatar.female.child,
1854
- .bcc-avatar.F.child {
1855
- @apply ctx-magenta-subtler;
1856
- }
1857
- .bcc-avatar.bordered {
1858
- @apply border-2 border-ctx;
1859
- }
1860
- .bcc-avatar.xs {
1861
- @apply size-5 text-xs;
1862
- }
1863
- .bcc-avatar.sm {
1864
- @apply size-6 text-sm;
1865
- }
1866
- .bcc-avatar.md {
1867
- @apply size-8 text-base;
1868
- }
1869
- .bcc-avatar.lg {
1870
- @apply size-10 text-lg;
1871
- }
1872
- .bcc-avatar.xl {
1873
- @apply size-12 text-xl;
1874
- }
1875
- .bcc-avatar.xxl {
1876
- @apply size-20 text-3xl;
1877
- }
1878
- .bcc-avatar.xxxl {
1879
- @apply size-24 text-4xl;
1880
- }
1881
-
1882
- .bcc-avatar.squared.lg {
1883
- @apply text-xl;
1884
- }
1885
- .bcc-avatar.squared.xl {
1886
- @apply text-2xl;
1887
- }
1888
- .bcc-avatar.squared.xxl {
1889
- @apply text-4xl;
1890
- }
1891
- .bcc-avatar.squared.xxxl {
1892
- @apply text-5xl;
1893
- }
1894
1839
 
1895
1840
 
1896
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
1897
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge,
1898
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
1899
- transform: translate(25%, -25%);
1900
- }
1901
- }
1902
1841
 
1842
+ /* === ./components/custom/styles.css === */
1903
1843
 
1904
1844
  /* from ./BccBadge/BccBadge.css */
1905
1845
  @layer components {
@@ -2322,27 +2262,6 @@
2322
2262
 
2323
2263
 
2324
2264
 
2325
- /* from ./BccTabs/BccTabs.css */
2326
- @layer components {
2327
- .bcc-tabs-fill.p-tabs {
2328
- height: 100%;
2329
- overflow: hidden;
2330
- }
2331
- .bcc-tabs-fill.p-tabs > .p-tablist {
2332
- flex-shrink: 0;
2333
- }
2334
- .bcc-tabs-fill.p-tabs > .p-tabpanels {
2335
- height: 100%;
2336
- overflow: hidden;
2337
- padding: 0;
2338
- }
2339
- .bcc-tabs-fill.p-tabs > .p-tabpanels > .p-tabpanel {
2340
- height: 100%;
2341
- overflow: auto;
2342
- }
2343
- }
2344
-
2345
-
2346
2265
  /* from ./BccTag/BccTag.css */
2347
2266
 
2348
2267
  @layer components {
@@ -2364,6 +2283,101 @@
2364
2283
  }
2365
2284
 
2366
2285
 
2286
+
2287
+ /* === ./components/wrapped/styles.css === */
2288
+
2289
+ /* from ./BccAvatar/BccAvatar.css */
2290
+ @layer components {
2291
+ .bcc-avatar {
2292
+ --p-avatar-background: var(--ctx-background);
2293
+ --p-avatar-color: var(--ctx-text);
2294
+ --bcc-avatar-border: var(--ctx-border);
2295
+ @apply overflow-hidden shrink-0 ctx-gray-subtler;
2296
+ }
2297
+ .bcc-avatar.male,
2298
+ .bcc-avatar.M {
2299
+ @apply ctx-blue-subtler;
2300
+ }
2301
+ .bcc-avatar.female,
2302
+ .bcc-avatar.F {
2303
+ @apply ctx-purple-subtler;
2304
+ }
2305
+ .bcc-avatar.male.child,
2306
+ .bcc-avatar.M.child {
2307
+ @apply ctx-teal-subtler;
2308
+ }
2309
+ .bcc-avatar.female.child,
2310
+ .bcc-avatar.F.child {
2311
+ @apply ctx-magenta-subtler;
2312
+ }
2313
+ .bcc-avatar.bordered {
2314
+ @apply border-2 border-ctx;
2315
+ }
2316
+ .bcc-avatar.xs {
2317
+ @apply size-5 text-xs;
2318
+ }
2319
+ .bcc-avatar.sm {
2320
+ @apply size-6 text-sm;
2321
+ }
2322
+ .bcc-avatar.md {
2323
+ @apply size-8 text-base;
2324
+ }
2325
+ .bcc-avatar.lg {
2326
+ @apply size-10 text-lg;
2327
+ }
2328
+ .bcc-avatar.xl {
2329
+ @apply size-12 text-xl;
2330
+ }
2331
+ .bcc-avatar.xxl {
2332
+ @apply size-20 text-3xl;
2333
+ }
2334
+ .bcc-avatar.xxxl {
2335
+ @apply size-24 text-4xl;
2336
+ }
2337
+
2338
+ .bcc-avatar.squared.lg {
2339
+ @apply text-xl;
2340
+ }
2341
+ .bcc-avatar.squared.xl {
2342
+ @apply text-2xl;
2343
+ }
2344
+ .bcc-avatar.squared.xxl {
2345
+ @apply text-4xl;
2346
+ }
2347
+ .bcc-avatar.squared.xxxl {
2348
+ @apply text-5xl;
2349
+ }
2350
+
2351
+
2352
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
2353
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge,
2354
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
2355
+ transform: translate(25%, -25%);
2356
+ }
2357
+ }
2358
+
2359
+
2360
+ /* from ./BccTabs/BccTabs.css */
2361
+ @layer components {
2362
+ .bcc-tabs-fill.p-tabs {
2363
+ height: 100%;
2364
+ overflow: hidden;
2365
+ }
2366
+ .bcc-tabs-fill.p-tabs > .p-tablist {
2367
+ flex-shrink: 0;
2368
+ }
2369
+ .bcc-tabs-fill.p-tabs > .p-tabpanels {
2370
+ height: 100%;
2371
+ overflow: hidden;
2372
+ padding: 0;
2373
+ }
2374
+ .bcc-tabs-fill.p-tabs > .p-tabpanels > .p-tabpanel {
2375
+ height: 100%;
2376
+ overflow: auto;
2377
+ }
2378
+ }
2379
+
2380
+
2367
2381
  /* from ./BccToggle/BccToggle.css */
2368
2382
  @layer components {
2369
2383
  .p-toggleswitch.useCtx {
@@ -0,0 +1,16 @@
1
+ type Props = {
2
+ currentStep: number;
3
+ steps: string[];
4
+ additionalText: boolean;
5
+ showStepLabel?: boolean;
6
+ headingFn?: (currentStep: number, totalSteps: number) => {};
7
+ };
8
+ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
9
+ steps: string[];
10
+ currentStep: number;
11
+ additionalText: boolean;
12
+ showStepLabel: boolean;
13
+ headingFn: (currentStep: number, totalSteps: number) => {};
14
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
15
+ declare const _default: typeof __VLS_export;
16
+ export default _default;
@@ -2,7 +2,6 @@
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 BccAvatar } from './BccAvatar/BccAvatar.vue';
6
5
  export { default as BccBadge } from './BccBadge/BccBadge.vue';
7
6
  export { default as BccCapacityIndicator } from './BccCapacityIndicator/BccCapacityIndicator.vue';
8
7
  export { default as BccCircleLoader } from './BccCircleLoader/BccCircleLoader.vue';
@@ -13,10 +12,7 @@ export { default as BccNpsResult } from './BccNpsResult/BccNpsResult.vue';
13
12
  export { default as BccNpsScore } from './BccNpsScore/BccNpsScore.vue';
14
13
  export { default as BccReact } from './BccReact/BccReact.vue';
15
14
  export { default as BccReactEmoji } from './BccReact/BccReactEmoji.vue';
16
- export { default as BccTabs } from './BccTabs/BccTabs.vue';
17
15
  export { default as BccTag } from './BccTag/BccTag.vue';
18
- export { default as BccToggle } from './BccToggle/BccToggle.vue';
19
- export type { AvatarProps } from './BccAvatar/BccAvatar.vue';
20
16
  export type { BadgeProps } from './BccBadge/BccBadge.vue';
21
17
  export type { CapacityIndicatorProps } from './BccCapacityIndicator/BccCapacityIndicator.vue';
22
18
  export type { KnobProps, KnobSlots } from './BccDialKnob/BccDialKnob.vue';
@@ -25,6 +21,4 @@ export type { GraphicProps } from './BccGraphic/BccGraphic.vue';
25
21
  export type { NpsResultProps } from './BccNpsResult/BccNpsResult.vue';
26
22
  export type { NpsScoreProps } from './BccNpsScore/BccNpsScore.vue';
27
23
  export type { ReactInfo, ReactProps } from './BccReact/types';
28
- export type { TabItem, TabsProps } from './BccTabs/BccTabs.vue';
29
24
  export type { TagProps } from './BccTag/BccTag.vue';
30
- export type { ToggleProps } from './BccToggle/BccToggle.vue';
@@ -1,6 +1,6 @@
1
1
  import type { VueComponent } from '@/types';
2
2
  import { type TabsProps as PrimeTabsProps } from 'primevue/tabs';
3
- import { type BadgeProps } from '../BccBadge/BccBadge.vue';
3
+ import { type BadgeProps } from '../../custom';
4
4
  export interface TabItem {
5
5
  title: string;
6
6
  icon?: VueComponent;
@@ -2,13 +2,19 @@
2
2
  * Wrapped PrimeVue components with BCC defaults or extensions.
3
3
  * Add new wrapped components here and export them from this file.
4
4
  */
5
+ export { default as BccAvatar } from './BccAvatar/BccAvatar.vue';
5
6
  export { default as BccButton } from './BccButton.vue';
6
7
  export { default as BccCheckbox } from './BccCheckbox.vue';
7
8
  export { default as BccInput } from './BccInput.vue';
8
9
  export { default as BccMessage } from './BccMessage.vue';
10
+ export { default as BccTabs } from './BccTabs/BccTabs.vue';
11
+ export { default as BccToggle } from './BccToggle/BccToggle.vue';
9
12
  export { default as BccToggleButton } from './BccToggleButton.vue';
13
+ export type { AvatarProps } from './BccAvatar/BccAvatar.vue';
10
14
  export type { ButtonProps } from './BccButton.vue';
11
15
  export type { CheckboxProps } from './BccCheckbox.vue';
12
16
  export type { InputProps } from './BccInput.vue';
13
17
  export type { MessageProps } from './BccMessage.vue';
18
+ export type { TabItem, TabsProps } from './BccTabs/BccTabs.vue';
19
+ export type { ToggleProps } from './BccToggle/BccToggle.vue';
14
20
  export type { ToggleButtonProps } from './BccToggleButton.vue';
@@ -133,7 +133,6 @@ export { default as BccTieredMenu } from 'primevue/tieredmenu';
133
133
  export { default as BccTimeline } from 'primevue/timeline';
134
134
  export { default as BccToast } from 'primevue/toast';
135
135
  export { default as BccToastService } from 'primevue/toastservice';
136
- export { default as BccToggleSwitch } from 'primevue/toggleswitch';
137
136
  export { default as BccToolbar } from 'primevue/toolbar';
138
137
  export { default as BccTooltip } from 'primevue/tooltip';
139
138
  export { default as BccTree } from 'primevue/tree';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bcc-code/component-library-vue",
3
- "version": "0.6.7",
3
+ "version": "0.6.8",
4
4
  "type": "module",
5
5
  "description": "Extended Vue component library based on PrimeVue and BCC design tokens",
6
6
  "repository": "https://github.com/bcc-code/bcc-design.git",