@bcc-code/component-library-vue 0.0.0-dev.00675f2
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/README.md +193 -0
- package/dist/component-library.js +72287 -0
- package/dist/component-library.umd.cjs +11694 -0
- package/dist/index.css +1 -0
- package/dist/theme.css +2597 -0
- package/dist-types/components/custom/BccAppNavigation/BccAppNavigation.vue.d.ts +32 -0
- package/dist-types/components/custom/BccBadge/BccBadge.vue.d.ts +34 -0
- package/dist-types/components/custom/BccCapacityIndicator/BccCapacityIndicator.vue.d.ts +26 -0
- package/dist-types/components/custom/BccCircleLoader/BccCircleLoader.vue.d.ts +11 -0
- package/dist-types/components/custom/BccDialKnob/BccDialKnob.vue.d.ts +64 -0
- package/dist-types/components/custom/BccFrame/BccFrame.vue.d.ts +39 -0
- package/dist-types/components/custom/BccGraphic/BccGraphic.vue.d.ts +47 -0
- package/dist-types/components/custom/BccNpsResult/BccNpsResult.vue.d.ts +21 -0
- package/dist-types/components/custom/BccNpsScore/BccNpsScore.vue.d.ts +36 -0
- package/dist-types/components/custom/BccReact/BccReact.vue.d.ts +12 -0
- package/dist-types/components/custom/BccReact/BccReactEmoji.vue.d.ts +4 -0
- package/dist-types/components/custom/BccReact/types.d.ts +18 -0
- package/dist-types/components/custom/BccStepIndicator/BccStepIndicator.vue.d.ts +28 -0
- package/dist-types/components/custom/BccTag/BccTag.vue.d.ts +28 -0
- package/dist-types/components/custom/BccTopNavigation/BccTopNavigation.vue.d.ts +55 -0
- package/dist-types/components/custom/index.d.ts +30 -0
- package/dist-types/components/wrapped/BccAvatar/BccAvatar.vue.d.ts +19 -0
- package/dist-types/components/wrapped/BccButton.vue.d.ts +22 -0
- package/dist-types/components/wrapped/BccCheckbox.vue.d.ts +18 -0
- package/dist-types/components/wrapped/BccChip/BccChip.vue.d.ts +18 -0
- package/dist-types/components/wrapped/BccImage.vue.d.ts +17 -0
- package/dist-types/components/wrapped/BccInput.vue.d.ts +48 -0
- package/dist-types/components/wrapped/BccMenu/BccMenu.vue.d.ts +28 -0
- package/dist-types/components/wrapped/BccMessage.vue.d.ts +21 -0
- package/dist-types/components/wrapped/BccRadioButton.vue.d.ts +19 -0
- package/dist-types/components/wrapped/BccSelectButton.vue.d.ts +20 -0
- package/dist-types/components/wrapped/BccTabs/BccTabs.vue.d.ts +40 -0
- package/dist-types/components/wrapped/BccToggle/BccToggle.vue.d.ts +30 -0
- package/dist-types/components/wrapped/BccToggleButton.vue.d.ts +21 -0
- package/dist-types/components/wrapped/index.d.ts +31 -0
- package/dist-types/composables/animatedNumber.d.ts +4 -0
- package/dist-types/contexts.d.ts +52 -0
- package/dist-types/index.d.ts +151 -0
- package/dist-types/setup.d.ts +2 -0
- package/dist-types/types.d.ts +4 -0
- package/package.json +105 -0
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import type { VueComponent } from '@/types';
|
|
2
|
+
import { type InputNumberProps } from 'primevue/inputnumber';
|
|
3
|
+
import { type InputTextProps } from 'primevue/inputtext';
|
|
4
|
+
export type InputProps = {
|
|
5
|
+
id?: string;
|
|
6
|
+
size?: InputTextProps['size'];
|
|
7
|
+
icon?: VueComponent;
|
|
8
|
+
iconRight?: VueComponent | boolean;
|
|
9
|
+
loading?: boolean;
|
|
10
|
+
numeric?: boolean;
|
|
11
|
+
} & /* @vue-ignore */ (InputTextProps | ({
|
|
12
|
+
numeric: true;
|
|
13
|
+
} & InputNumberProps));
|
|
14
|
+
declare const __VLS_export: import("vue").DefineComponent<({
|
|
15
|
+
id?: string;
|
|
16
|
+
size?: InputTextProps["size"];
|
|
17
|
+
icon?: VueComponent;
|
|
18
|
+
iconRight?: VueComponent | boolean;
|
|
19
|
+
loading?: boolean;
|
|
20
|
+
numeric?: boolean;
|
|
21
|
+
} & InputTextProps) | ({
|
|
22
|
+
id?: string;
|
|
23
|
+
size?: InputTextProps["size"];
|
|
24
|
+
icon?: VueComponent;
|
|
25
|
+
iconRight?: VueComponent | boolean;
|
|
26
|
+
loading?: boolean;
|
|
27
|
+
numeric?: boolean;
|
|
28
|
+
} & {
|
|
29
|
+
numeric: true;
|
|
30
|
+
} & InputNumberProps), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<({
|
|
31
|
+
id?: string;
|
|
32
|
+
size?: InputTextProps["size"];
|
|
33
|
+
icon?: VueComponent;
|
|
34
|
+
iconRight?: VueComponent | boolean;
|
|
35
|
+
loading?: boolean;
|
|
36
|
+
numeric?: boolean;
|
|
37
|
+
} & InputTextProps) | ({
|
|
38
|
+
id?: string;
|
|
39
|
+
size?: InputTextProps["size"];
|
|
40
|
+
icon?: VueComponent;
|
|
41
|
+
iconRight?: VueComponent | boolean;
|
|
42
|
+
loading?: boolean;
|
|
43
|
+
numeric?: boolean;
|
|
44
|
+
} & {
|
|
45
|
+
numeric: true;
|
|
46
|
+
} & InputNumberProps)> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
47
|
+
declare const _default: typeof __VLS_export;
|
|
48
|
+
export default _default;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { VueComponent } from '@/types';
|
|
2
|
+
import { type MenuMethods as PrimeMenuMethods, type MenuProps as PrimeMenuProps } from 'primevue/menu';
|
|
3
|
+
import type { MenuItem } from 'primevue/menuitem';
|
|
4
|
+
/** Menu item model for BccMenu: icon can be a PrimeVue icon class string or a Vue icon component. */
|
|
5
|
+
export type BccMenuItem = Omit<MenuItem, 'icon' | 'items'> & {
|
|
6
|
+
icon?: VueComponent;
|
|
7
|
+
items?: BccMenuItem[];
|
|
8
|
+
};
|
|
9
|
+
export type MenuProps = {
|
|
10
|
+
model?: BccMenuItem[];
|
|
11
|
+
} & Omit<PrimeMenuProps, 'model'>;
|
|
12
|
+
declare var __VLS_16: {
|
|
13
|
+
item: MenuItem;
|
|
14
|
+
label: string | ((...args: any) => string) | undefined;
|
|
15
|
+
props: import("primevue").MenuRouterBindProps;
|
|
16
|
+
};
|
|
17
|
+
type __VLS_Slots = {} & {
|
|
18
|
+
item?: (props: typeof __VLS_16) => any;
|
|
19
|
+
};
|
|
20
|
+
declare const __VLS_base: import("vue").DefineComponent<MenuProps, PrimeMenuMethods, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
21
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
22
|
+
declare const _default: typeof __VLS_export;
|
|
23
|
+
export default _default;
|
|
24
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
25
|
+
new (): {
|
|
26
|
+
$slots: S;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { VueComponent } from '@/types';
|
|
2
|
+
import { type MessageProps as PrimeMessageProps } from 'primevue/message';
|
|
3
|
+
export type MessageProps = Omit<PrimeMessageProps, 'icon'> & {
|
|
4
|
+
icon?: boolean | VueComponent;
|
|
5
|
+
iconRight?: VueComponent | boolean;
|
|
6
|
+
title?: string;
|
|
7
|
+
message?: string;
|
|
8
|
+
};
|
|
9
|
+
declare var __VLS_19: {};
|
|
10
|
+
type __VLS_Slots = {} & {
|
|
11
|
+
default?: (props: typeof __VLS_19) => any;
|
|
12
|
+
};
|
|
13
|
+
declare const __VLS_base: import("vue").DefineComponent<MessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MessageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
14
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
15
|
+
declare const _default: typeof __VLS_export;
|
|
16
|
+
export default _default;
|
|
17
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
18
|
+
new (): {
|
|
19
|
+
$slots: S;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { type RadioButtonProps as PrimeRadioButtonProps } from 'primevue/radiobutton';
|
|
2
|
+
export type RadioButtonProps = PrimeRadioButtonProps & {
|
|
3
|
+
label?: string;
|
|
4
|
+
labelLeft?: boolean;
|
|
5
|
+
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
|
|
6
|
+
};
|
|
7
|
+
declare var __VLS_6: {};
|
|
8
|
+
type __VLS_Slots = {} & {
|
|
9
|
+
default?: (props: typeof __VLS_6) => any;
|
|
10
|
+
};
|
|
11
|
+
declare const __VLS_base: import("vue").DefineComponent<RadioButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RadioButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
12
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
13
|
+
declare const _default: typeof __VLS_export;
|
|
14
|
+
export default _default;
|
|
15
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
16
|
+
new (): {
|
|
17
|
+
$slots: S;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { VueComponent } from '@/types';
|
|
2
|
+
import { type SelectButtonProps as PrimeSelectButtonProps } from 'primevue/selectbutton';
|
|
3
|
+
export type SelectButtonProps = PrimeSelectButtonProps & {
|
|
4
|
+
optionIcon?: string | ((option: unknown) => VueComponent | null);
|
|
5
|
+
};
|
|
6
|
+
declare var __VLS_9: {
|
|
7
|
+
option: any;
|
|
8
|
+
};
|
|
9
|
+
type __VLS_Slots = {} & {
|
|
10
|
+
option?: (props: typeof __VLS_9) => any;
|
|
11
|
+
};
|
|
12
|
+
declare const __VLS_base: import("vue").DefineComponent<SelectButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SelectButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
13
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
14
|
+
declare const _default: typeof __VLS_export;
|
|
15
|
+
export default _default;
|
|
16
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
17
|
+
new (): {
|
|
18
|
+
$slots: S;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { VueComponent } from '@/types';
|
|
2
|
+
import { type TabsProps as PrimeTabsProps } from 'primevue/tabs';
|
|
3
|
+
import { type BadgeProps } from '../../custom';
|
|
4
|
+
export interface TabItem {
|
|
5
|
+
title: string;
|
|
6
|
+
icon?: VueComponent;
|
|
7
|
+
badge?: BadgeProps;
|
|
8
|
+
as?: VueComponent;
|
|
9
|
+
value?: string;
|
|
10
|
+
}
|
|
11
|
+
export type TabsProps = Omit<PrimeTabsProps, 'value'> & {
|
|
12
|
+
tabs: TabItem[];
|
|
13
|
+
fill?: boolean;
|
|
14
|
+
modelValue?: number;
|
|
15
|
+
noPanels?: boolean;
|
|
16
|
+
fluid?: boolean;
|
|
17
|
+
bold?: boolean;
|
|
18
|
+
};
|
|
19
|
+
type __VLS_Props = TabsProps;
|
|
20
|
+
type __VLS_ModelProps = {
|
|
21
|
+
modelValue?: number;
|
|
22
|
+
};
|
|
23
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
24
|
+
declare var __VLS_48: `tab-${number}`, __VLS_49: {};
|
|
25
|
+
type __VLS_Slots = {} & {
|
|
26
|
+
[K in NonNullable<typeof __VLS_48>]?: (props: typeof __VLS_49) => any;
|
|
27
|
+
};
|
|
28
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
29
|
+
"update:modelValue": (value: number) => any;
|
|
30
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
31
|
+
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
|
|
32
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
33
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
34
|
+
declare const _default: typeof __VLS_export;
|
|
35
|
+
export default _default;
|
|
36
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
37
|
+
new (): {
|
|
38
|
+
$slots: S;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { VueComponent } from '@/types';
|
|
2
|
+
import { type ToggleSwitchProps } from 'primevue';
|
|
3
|
+
export type ToggleProps = ToggleSwitchProps & {
|
|
4
|
+
/** Text shown next to the switch; also used for the label’s `for` attribute. */
|
|
5
|
+
label?: string;
|
|
6
|
+
/** Custom icon component rendered inside the toggle handle (replaces check/cross when set). */
|
|
7
|
+
icon?: VueComponent;
|
|
8
|
+
/** When true, shows check/cross icons in the handle based on checked state. */
|
|
9
|
+
withIcon?: boolean;
|
|
10
|
+
/** When true, shows a loading spinner in the handle and typically disables interaction. */
|
|
11
|
+
loading?: boolean;
|
|
12
|
+
/** Applies “toggled” visual state (e.g. for post-click feedback) independent of current value. */
|
|
13
|
+
wasToggled?: boolean;
|
|
14
|
+
/** When true, applies context-aware styling (e.g. from design tokens/theme). */
|
|
15
|
+
useCtx?: boolean;
|
|
16
|
+
};
|
|
17
|
+
type __VLS_Props = ToggleProps;
|
|
18
|
+
type __VLS_ModelProps = {
|
|
19
|
+
modelValue: boolean;
|
|
20
|
+
};
|
|
21
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
22
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
23
|
+
"update:modelValue": (value: boolean) => any;
|
|
24
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
25
|
+
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
26
|
+
}>, {
|
|
27
|
+
defaultValue: string | boolean;
|
|
28
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
29
|
+
declare const _default: typeof __VLS_export;
|
|
30
|
+
export default _default;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { VueComponent } from '@/types';
|
|
2
|
+
import { type ToggleButtonProps as PrimeToggleButtonProps } from 'primevue/togglebutton';
|
|
3
|
+
export type ToggleButtonProps = Omit<PrimeToggleButtonProps, 'onIcon' | 'offIcon'> & {
|
|
4
|
+
/** Custom icon component rendered inside the button when checked. */
|
|
5
|
+
onIcon?: VueComponent;
|
|
6
|
+
/** Custom icon component rendered inside the button when unchecked. */
|
|
7
|
+
offIcon?: VueComponent;
|
|
8
|
+
};
|
|
9
|
+
declare var __VLS_14: {};
|
|
10
|
+
type __VLS_Slots = {} & {
|
|
11
|
+
default?: (props: typeof __VLS_14) => any;
|
|
12
|
+
};
|
|
13
|
+
declare const __VLS_base: import("vue").DefineComponent<ToggleButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToggleButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
14
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
15
|
+
declare const _default: typeof __VLS_export;
|
|
16
|
+
export default _default;
|
|
17
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
18
|
+
new (): {
|
|
19
|
+
$slots: S;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Wrapped PrimeVue components with BCC defaults or extensions.
|
|
3
|
+
* Add new wrapped components here and export them from this file.
|
|
4
|
+
*/
|
|
5
|
+
export { default as BccAvatar } from './BccAvatar/BccAvatar.vue';
|
|
6
|
+
export { default as BccButton } from './BccButton.vue';
|
|
7
|
+
export { default as BccCheckbox } from './BccCheckbox.vue';
|
|
8
|
+
export { default as BccChip } from './BccChip/BccChip.vue';
|
|
9
|
+
export { default as BccConfirmDialog } from './BccConfirmDialog/BccConfirmDialog.vue';
|
|
10
|
+
export { default as BccImage } from './BccImage.vue';
|
|
11
|
+
export { default as BccInput } from './BccInput.vue';
|
|
12
|
+
export { default as BccMenu } from './BccMenu/BccMenu.vue';
|
|
13
|
+
export { default as BccMessage } from './BccMessage.vue';
|
|
14
|
+
export { default as BccRadioButton } from './BccRadioButton.vue';
|
|
15
|
+
export { default as BccSelectButton } from './BccSelectButton.vue';
|
|
16
|
+
export { default as BccTabs } from './BccTabs/BccTabs.vue';
|
|
17
|
+
export { default as BccToggle } from './BccToggle/BccToggle.vue';
|
|
18
|
+
export { default as BccToggleButton } from './BccToggleButton.vue';
|
|
19
|
+
export type { AvatarProps } from './BccAvatar/BccAvatar.vue';
|
|
20
|
+
export type { ButtonProps } from './BccButton.vue';
|
|
21
|
+
export type { CheckboxProps } from './BccCheckbox.vue';
|
|
22
|
+
export type { ChipProps } from './BccChip/BccChip.vue';
|
|
23
|
+
export type { ImageProps } from './BccImage.vue';
|
|
24
|
+
export type { InputProps } from './BccInput.vue';
|
|
25
|
+
export type { BccMenuItem, MenuProps } from './BccMenu/BccMenu.vue';
|
|
26
|
+
export type { MessageProps } from './BccMessage.vue';
|
|
27
|
+
export type { RadioButtonProps } from './BccRadioButton.vue';
|
|
28
|
+
export type { SelectButtonProps } from './BccSelectButton.vue';
|
|
29
|
+
export type { TabItem, TabsProps } from './BccTabs/BccTabs.vue';
|
|
30
|
+
export type { ToggleProps } from './BccToggle/BccToggle.vue';
|
|
31
|
+
export type { ToggleButtonProps } from './BccToggleButton.vue';
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
export declare enum COLORS {
|
|
2
|
+
BRAND = "brand",
|
|
3
|
+
NEUTRAL = "neutral",
|
|
4
|
+
DANGER = "danger",
|
|
5
|
+
WARNING = "warning",
|
|
6
|
+
SUCCESS = "success",
|
|
7
|
+
INFO = "info",
|
|
8
|
+
GRAY = "gray",
|
|
9
|
+
BLUE = "blue",
|
|
10
|
+
TEAL = "teal",
|
|
11
|
+
GREEN = "green",
|
|
12
|
+
BROWN = "brown",
|
|
13
|
+
YELLOW = "yellow",
|
|
14
|
+
ORANGE = "orange",
|
|
15
|
+
RED = "red",
|
|
16
|
+
PURPLE = "purple",
|
|
17
|
+
MAGENTA = "magenta"
|
|
18
|
+
}
|
|
19
|
+
export declare enum LEVELS {
|
|
20
|
+
SUBTLEST = "subtlest",
|
|
21
|
+
SUBTLER = "subtler",
|
|
22
|
+
SUBTLE = "subtle",
|
|
23
|
+
BOLD = "bold",
|
|
24
|
+
BOLDER = "bolder",
|
|
25
|
+
BOLDEST = "boldest"
|
|
26
|
+
}
|
|
27
|
+
/** Colors that have all level variants (default, bolder, boldest, etc.). */
|
|
28
|
+
type FullLevelColors = COLORS.BRAND | COLORS.NEUTRAL;
|
|
29
|
+
type AccentColors = COLORS.GRAY | COLORS.BLUE | COLORS.TEAL | COLORS.GREEN | COLORS.BROWN | COLORS.YELLOW | COLORS.ORANGE | COLORS.RED | COLORS.PURPLE | COLORS.MAGENTA;
|
|
30
|
+
type Severities = COLORS.INFO | COLORS.SUCCESS | COLORS.WARNING | COLORS.DANGER;
|
|
31
|
+
type SeverityLevels = LEVELS.SUBTLEST | LEVELS.BOLDER;
|
|
32
|
+
/** Accent colors only have these four levels (no default, bolder, boldest). */
|
|
33
|
+
type AccentLevels = LEVELS.SUBTLEST | LEVELS.SUBTLER | LEVELS.SUBTLE | LEVELS.BOLDER;
|
|
34
|
+
/** Context token for color C at level L (helper to avoid ambiguous > in template literal). */
|
|
35
|
+
type ContextToken<C extends COLORS, L extends LEVELS> = `${C}-${L}`;
|
|
36
|
+
export type LEVELS_MAP<L extends LEVELS, C extends COLORS> = {
|
|
37
|
+
[K in L]: ContextToken<C, K>;
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* Type with only the specified context levels for all colors.
|
|
41
|
+
* For brand/neutral, any level in L is allowed.
|
|
42
|
+
* For accent colors, only levels in L that are also in AccentLevels (subtlest, subtler, subtle, bold) are allowed.
|
|
43
|
+
*/
|
|
44
|
+
export type ONLY_LEVELS<L extends LEVELS, C extends COLORS = COLORS> = {
|
|
45
|
+
[K in C]: LEVELS_MAP<L, K>;
|
|
46
|
+
};
|
|
47
|
+
/** Type with all context levels: brand/neutral have all levels, accent colors have only subtlest, subtler, subtle, bold. */
|
|
48
|
+
export type ALL_LEVELS = ONLY_LEVELS<AccentLevels, AccentColors> & ONLY_LEVELS<LEVELS, FullLevelColors> & ONLY_LEVELS<SeverityLevels, Severities>;
|
|
49
|
+
export declare const BCC_CONTEXTS: Readonly<ALL_LEVELS>;
|
|
50
|
+
export declare const BCC_CONTEXT_LIST: readonly BCC_CONTEXT[];
|
|
51
|
+
export type BCC_CONTEXT = ContextToken<AccentColors, AccentLevels> | ContextToken<FullLevelColors, LEVELS> | ContextToken<Severities, SeverityLevels> | Severities;
|
|
52
|
+
export {};
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @bcc-code/component-library-vue
|
|
3
|
+
*
|
|
4
|
+
* Vue component library with PrimeVue and BCC design tokens. You only need this
|
|
5
|
+
* package: no separate Tailwind or PrimeVue install.
|
|
6
|
+
*
|
|
7
|
+
* Usage: In your main.ts file, import the library and use the setup function.
|
|
8
|
+
* import { BccComponentLibrary } from '@bcc-code/component-library-vue';
|
|
9
|
+
* app.use(BccComponentLibrary);
|
|
10
|
+
*
|
|
11
|
+
* For styling, you have two options:
|
|
12
|
+
* 1. Recommended (full Tailwind: utility classes + tree-shaking in your app):
|
|
13
|
+
* - vite.config: plugins: [..., tailwindcss()] with import tailwindcss from '@tailwindcss/vite'
|
|
14
|
+
* - Main CSS file: @import "@bcc-code/component-library-vue/theme.css";
|
|
15
|
+
* Tailwind runs in your build and only bundles classes you use.
|
|
16
|
+
* 2. Alternative: Pre-built CSS only (no Tailwind in your app; library styles + components only):
|
|
17
|
+
* - main.ts: import "@bcc-code/component-library-vue/style.css";
|
|
18
|
+
*/
|
|
19
|
+
import type { ConfirmationOptions } from 'primevue/confirmationoptions';
|
|
20
|
+
import './style.css';
|
|
21
|
+
export { default as BccPreset } from '@bcc-code/design-tokens/primevue';
|
|
22
|
+
export { BCC_CONTEXTS, type BCC_CONTEXT } from './contexts';
|
|
23
|
+
export { default as BccComponentLibrary } from './setup';
|
|
24
|
+
export * from './types';
|
|
25
|
+
export * from './components/custom';
|
|
26
|
+
export * from './components/wrapped';
|
|
27
|
+
export { default as BccAccordion } from 'primevue/accordion';
|
|
28
|
+
export { default as BccAccordionContent } from 'primevue/accordioncontent';
|
|
29
|
+
export { default as BccAccordionHeader } from 'primevue/accordionheader';
|
|
30
|
+
export { default as BccAccordionPanel } from 'primevue/accordionpanel';
|
|
31
|
+
export { default as BccAccordionTab } from 'primevue/accordiontab';
|
|
32
|
+
export { default as BccAnimateOnScroll } from 'primevue/animateonscroll';
|
|
33
|
+
export { default as BccAutoComplete } from 'primevue/autocomplete';
|
|
34
|
+
export { default as BccAvatarGroup } from 'primevue/avatargroup';
|
|
35
|
+
export { default as BccBadgeDirective } from 'primevue/badgedirective';
|
|
36
|
+
export { default as BccBlockUI } from 'primevue/blockui';
|
|
37
|
+
export { default as BccBreadcrumb } from 'primevue/breadcrumb';
|
|
38
|
+
export { default as BccButtonGroup } from 'primevue/buttongroup';
|
|
39
|
+
export { default as BccCard } from 'primevue/card';
|
|
40
|
+
export { default as BccCarousel } from 'primevue/carousel';
|
|
41
|
+
export { default as BccCascadeSelect } from 'primevue/cascadeselect';
|
|
42
|
+
export { default as BccCheckboxGroup } from 'primevue/checkboxgroup';
|
|
43
|
+
export { default as BccChip } from 'primevue/chip';
|
|
44
|
+
export { default as BccChips } from 'primevue/chips';
|
|
45
|
+
export { default as BccColorPicker } from 'primevue/colorpicker';
|
|
46
|
+
export { default as BccColumn } from 'primevue/column';
|
|
47
|
+
export { default as BccColumnGroup } from 'primevue/columngroup';
|
|
48
|
+
export { default as BccConfig } from 'primevue/config';
|
|
49
|
+
export { default as BccConfirmPopup } from 'primevue/confirmpopup';
|
|
50
|
+
export { default as BccContextMenu } from 'primevue/contextmenu';
|
|
51
|
+
export { default as BccDataTable } from 'primevue/datatable';
|
|
52
|
+
export { default as BccDataView } from 'primevue/dataview';
|
|
53
|
+
export { default as BccDatePicker } from 'primevue/datepicker';
|
|
54
|
+
export { default as BccDeferredContent } from 'primevue/deferredcontent';
|
|
55
|
+
export { default as BccDialog } from 'primevue/dialog';
|
|
56
|
+
export { default as BccDivider } from 'primevue/divider';
|
|
57
|
+
export { default as BccDock } from 'primevue/dock';
|
|
58
|
+
export { default as BccDrawer } from 'primevue/drawer';
|
|
59
|
+
export { default as BccDynamicDialog } from 'primevue/dynamicdialog';
|
|
60
|
+
export { default as BccFieldset } from 'primevue/fieldset';
|
|
61
|
+
export { default as BccFileUpload } from 'primevue/fileupload';
|
|
62
|
+
export { default as BccFloatLabel } from 'primevue/floatlabel';
|
|
63
|
+
export { default as BccFluid } from 'primevue/fluid';
|
|
64
|
+
export { default as BccFocusTrap } from 'primevue/focustrap';
|
|
65
|
+
export { default as BccGalleria } from 'primevue/galleria';
|
|
66
|
+
export { default as BccIconField } from 'primevue/iconfield';
|
|
67
|
+
export { default as BccIftaLabel } from 'primevue/iftalabel';
|
|
68
|
+
export { default as BccImageCompare } from 'primevue/imagecompare';
|
|
69
|
+
export { default as BccInplace } from 'primevue/inplace';
|
|
70
|
+
export { default as BccInputChips } from 'primevue/inputchips';
|
|
71
|
+
export { default as BccInputGroup } from 'primevue/inputgroup';
|
|
72
|
+
export { default as BccInputGroupAddon } from 'primevue/inputgroupaddon';
|
|
73
|
+
export { default as BccInputIcon } from 'primevue/inputicon';
|
|
74
|
+
export { default as BccInputMask } from 'primevue/inputmask';
|
|
75
|
+
export { default as BccInputNumber } from 'primevue/inputnumber';
|
|
76
|
+
export { default as BccInputOtp } from 'primevue/inputotp';
|
|
77
|
+
export { default as BccInputText } from 'primevue/inputtext';
|
|
78
|
+
export { default as BccKeyFilter } from 'primevue/keyfilter';
|
|
79
|
+
export { default as BccKnob } from 'primevue/knob';
|
|
80
|
+
export { default as BccListbox } from 'primevue/listbox';
|
|
81
|
+
export { default as BccMegaMenu } from 'primevue/megamenu';
|
|
82
|
+
export { default as BccMenubar } from 'primevue/menubar';
|
|
83
|
+
export { default as BccMeterGroup } from 'primevue/metergroup';
|
|
84
|
+
export { default as BccMultiSelect } from 'primevue/multiselect';
|
|
85
|
+
export { default as BccOrderList } from 'primevue/orderlist';
|
|
86
|
+
export { default as BccOrganizationChart } from 'primevue/organizationchart';
|
|
87
|
+
export { default as BccOverlayBadge } from 'primevue/overlaybadge';
|
|
88
|
+
export { default as BccPaginator } from 'primevue/paginator';
|
|
89
|
+
export { default as BccPanel } from 'primevue/panel';
|
|
90
|
+
export { default as BccPanelMenu } from 'primevue/panelmenu';
|
|
91
|
+
export { default as BccPassword } from 'primevue/password';
|
|
92
|
+
export { default as BccPickList } from 'primevue/picklist';
|
|
93
|
+
export { default as BccPopover } from 'primevue/popover';
|
|
94
|
+
export { default as BccPortal } from 'primevue/portal';
|
|
95
|
+
export { default as BccProgressBar } from 'primevue/progressbar';
|
|
96
|
+
export { default as BccProgressSpinner } from 'primevue/progressspinner';
|
|
97
|
+
export { default as BccRadioButtonGroup } from 'primevue/radiobuttongroup';
|
|
98
|
+
export { default as BccRating } from 'primevue/rating';
|
|
99
|
+
export { default as BccRipple } from 'primevue/ripple';
|
|
100
|
+
export { default as BccRow } from 'primevue/row';
|
|
101
|
+
export { default as BccScrollPanel } from 'primevue/scrollpanel';
|
|
102
|
+
export { default as BccScrollTop } from 'primevue/scrolltop';
|
|
103
|
+
export { default as BccSelect } from 'primevue/select';
|
|
104
|
+
export { default as BccSkeleton } from 'primevue/skeleton';
|
|
105
|
+
export { default as BccSlider } from 'primevue/slider';
|
|
106
|
+
export { default as BccSpeedDial } from 'primevue/speeddial';
|
|
107
|
+
export { default as BccSplitButton } from 'primevue/splitbutton';
|
|
108
|
+
export { default as BccSplitter } from 'primevue/splitter';
|
|
109
|
+
export { default as BccSplitterPanel } from 'primevue/splitterpanel';
|
|
110
|
+
export { default as BccStep } from 'primevue/step';
|
|
111
|
+
export { default as BccStepItem } from 'primevue/stepitem';
|
|
112
|
+
export { default as BccStepList } from 'primevue/steplist';
|
|
113
|
+
export { default as BccStepPanel } from 'primevue/steppanel';
|
|
114
|
+
export { default as BccStepPanels } from 'primevue/steppanels';
|
|
115
|
+
export { default as BccStepper } from 'primevue/stepper';
|
|
116
|
+
export { default as BccSteps } from 'primevue/steps';
|
|
117
|
+
export { default as BccStyleClass } from 'primevue/styleclass';
|
|
118
|
+
export { default as BccTab } from 'primevue/tab';
|
|
119
|
+
export { default as BccTabList } from 'primevue/tablist';
|
|
120
|
+
export { default as BccTabMenu } from 'primevue/tabmenu';
|
|
121
|
+
export { default as BccTabPanel } from 'primevue/tabpanel';
|
|
122
|
+
export { default as BccTabPanels } from 'primevue/tabpanels';
|
|
123
|
+
export { default as PrimevueTabs } from 'primevue/tabs';
|
|
124
|
+
export { default as BccTabView } from 'primevue/tabview';
|
|
125
|
+
export { default as BccTerminal } from 'primevue/terminal';
|
|
126
|
+
export { default as BccTerminalService } from 'primevue/terminalservice';
|
|
127
|
+
export { default as BccTextarea } from 'primevue/textarea';
|
|
128
|
+
export { default as BccTieredMenu } from 'primevue/tieredmenu';
|
|
129
|
+
export { default as BccTimeline } from 'primevue/timeline';
|
|
130
|
+
export { default as BccToast } from 'primevue/toast';
|
|
131
|
+
export { default as BccToastService } from 'primevue/toastservice';
|
|
132
|
+
export { default as BccToolbar } from 'primevue/toolbar';
|
|
133
|
+
export { default as BccTooltip } from 'primevue/tooltip';
|
|
134
|
+
export { default as BccTree } from 'primevue/tree';
|
|
135
|
+
export { default as BccTreeSelect } from 'primevue/treeselect';
|
|
136
|
+
export { default as BccTreeTable } from 'primevue/treetable';
|
|
137
|
+
export { useDialog } from 'primevue/usedialog';
|
|
138
|
+
export { useToast } from 'primevue/usetoast';
|
|
139
|
+
export { default as BccVirtualScroller } from 'primevue/virtualscroller';
|
|
140
|
+
export { default as useAnimatedNumber } from './composables/animatedNumber';
|
|
141
|
+
import type { VueComponent } from './types';
|
|
142
|
+
interface UseConfirmOptions extends Omit<ConfirmationOptions, 'icon' | 'acceptIcon' | 'rejectIcon'> {
|
|
143
|
+
icon?: VueComponent | undefined;
|
|
144
|
+
acceptIcon?: VueComponent | undefined;
|
|
145
|
+
rejectIcon?: VueComponent | undefined;
|
|
146
|
+
}
|
|
147
|
+
type UseConfirmReturn = {
|
|
148
|
+
require: (option: UseConfirmOptions) => void;
|
|
149
|
+
close: () => void;
|
|
150
|
+
};
|
|
151
|
+
export declare function useConfirm(): UseConfirmReturn;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { Component, FunctionalComponent, RenderFunction, VNode } from 'vue';
|
|
2
|
+
export type VueComponent = string | Component | FunctionalComponent | VNode | RenderFunction;
|
|
3
|
+
export type IInterval = ReturnType<typeof setInterval>;
|
|
4
|
+
export type ITimeout = ReturnType<typeof setTimeout>;
|
package/package.json
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@bcc-code/component-library-vue",
|
|
3
|
+
"version": "0.0.0-dev.00675f2",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "Extended Vue component library based on PrimeVue and BCC design tokens",
|
|
6
|
+
"repository": "https://github.com/bcc-code/bcc-design.git",
|
|
7
|
+
"license": "Apache-2.0",
|
|
8
|
+
"publishConfig": {
|
|
9
|
+
"access": "public"
|
|
10
|
+
},
|
|
11
|
+
"packageManager": "pnpm@9.15.0",
|
|
12
|
+
"files": [
|
|
13
|
+
"dist",
|
|
14
|
+
"dist-types",
|
|
15
|
+
"dist-css"
|
|
16
|
+
],
|
|
17
|
+
"main": "./dist/component-library.umd.cjs",
|
|
18
|
+
"module": "./dist/component-library.js",
|
|
19
|
+
"types": "./dist-types/index.d.ts",
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"import": {
|
|
23
|
+
"types": "./dist-types/index.d.ts",
|
|
24
|
+
"default": "./dist/component-library.js"
|
|
25
|
+
},
|
|
26
|
+
"require": {
|
|
27
|
+
"types": "./dist-types/index.d.ts",
|
|
28
|
+
"default": "./dist/component-library.umd.cjs"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
"./style.css": "./dist/index.css",
|
|
32
|
+
"./theme.css": "./dist/theme.css",
|
|
33
|
+
"./archivo-font.css": "./dist/archivo-font.css",
|
|
34
|
+
"./tailwind.css": "./dist-css/tailwind.css"
|
|
35
|
+
},
|
|
36
|
+
"scripts": {
|
|
37
|
+
"start": "storybook dev -p 6006",
|
|
38
|
+
"build-storybook": "storybook build",
|
|
39
|
+
"build": "run-p typecheck build:types build:vite",
|
|
40
|
+
"build:vite": "rimraf dist && vite build && node scripts/build-theme-css.mjs",
|
|
41
|
+
"build:types": "rimraf dist-types && vue-tsc -p tsconfig.build.json",
|
|
42
|
+
"generate:semantic": "node scripts/restructure-semantic-primitives.mjs",
|
|
43
|
+
"generate:semantic-css": "node scripts/generate-semantic-css.mjs",
|
|
44
|
+
"generate:context-modes": "node scripts/generate-context-modes.mjs",
|
|
45
|
+
"generate:context-css": "node scripts/generate-context-css.mjs",
|
|
46
|
+
"generate": "pnpm run generate:semantic && pnpm run generate:semantic-css && pnpm run generate:context-modes && pnpm run generate:context-css",
|
|
47
|
+
"sync:primevue-icon-patches": "node scripts/sync-primevue-icon-patches.mjs",
|
|
48
|
+
"typecheck": "vue-tsc --noEmit",
|
|
49
|
+
"lint": "eslint src/**/*.ts src/**/*.vue",
|
|
50
|
+
"lint:fix": "eslint --fix src/**/*.ts src/**/*.vue",
|
|
51
|
+
"test:unit": "vitest run",
|
|
52
|
+
"release-channel": "node ./scripts/release-channel.cjs",
|
|
53
|
+
"create-version": "node ./scripts/version.cjs"
|
|
54
|
+
},
|
|
55
|
+
"dependencies": {
|
|
56
|
+
"@bcc-code/design-tokens": "^5.1.65",
|
|
57
|
+
"@bcc-code/icons-vue": "^1.4.0",
|
|
58
|
+
"@primeuix/themes": "^2.0.3",
|
|
59
|
+
"@tailwindcss/vite": "^4.1.18",
|
|
60
|
+
"primevue": "^4.5.4",
|
|
61
|
+
"tailwindcss": "^4.0.0"
|
|
62
|
+
},
|
|
63
|
+
"peerDependencies": {
|
|
64
|
+
"vue": "^3.5.0"
|
|
65
|
+
},
|
|
66
|
+
"devDependencies": {
|
|
67
|
+
"@eslint/js": "^9.39.2",
|
|
68
|
+
"@primevue/auto-import-resolver": "^4.5.4",
|
|
69
|
+
"@storybook/addon-docs": "^10.2.8",
|
|
70
|
+
"@storybook/manager-api": "^8.6.14",
|
|
71
|
+
"@storybook/theming": "^8.6.14",
|
|
72
|
+
"@storybook/vue3": "^10.0.0",
|
|
73
|
+
"@storybook/vue3-vite": "^10.0.0",
|
|
74
|
+
"@types/node": "^22.0.0",
|
|
75
|
+
"@vitejs/plugin-vue": "^6.0.0",
|
|
76
|
+
"@vue/eslint-config-prettier": "^10.2.0",
|
|
77
|
+
"@vue/test-utils": "^2.4.6",
|
|
78
|
+
"@vue/tsconfig": "^0.7.0",
|
|
79
|
+
"autoprefixer": "^10.4.20",
|
|
80
|
+
"eslint": "^9.39.2",
|
|
81
|
+
"eslint-plugin-prettier": "^5.5.5",
|
|
82
|
+
"eslint-plugin-vue": "^10.7.0",
|
|
83
|
+
"globals": "^17.3.0",
|
|
84
|
+
"jiti": "^2.6.1",
|
|
85
|
+
"npm-run-all": "^4.1.5",
|
|
86
|
+
"postcss": "^8.4.49",
|
|
87
|
+
"prettier": "^3.8.1",
|
|
88
|
+
"prettier-plugin-tailwindcss": "^0.7.2",
|
|
89
|
+
"remark-gfm": "^4.0.0",
|
|
90
|
+
"rimraf": "^6.0.0",
|
|
91
|
+
"storybook": "^10.0.0",
|
|
92
|
+
"typescript": "~5.7.0",
|
|
93
|
+
"typescript-eslint": "^8.54.0",
|
|
94
|
+
"unplugin-vue-components": "^31.0.0",
|
|
95
|
+
"vite": "^7.3.0",
|
|
96
|
+
"vitest": "^4.0.18",
|
|
97
|
+
"vue": "^3.5.0",
|
|
98
|
+
"vue-tsc": "^3.2.4"
|
|
99
|
+
},
|
|
100
|
+
"pnpm": {
|
|
101
|
+
"patchedDependencies": {
|
|
102
|
+
"@primevue/icons": "patches/@primevue__icons.patch"
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|