@bcc-code/component-library-vue 0.0.0-dev.f3ffbc4 → 0.0.0-dev.f41f3d5

package/dist-types/components/custom/BccAppNavigation/BccAppNavigation.vue.d.ts

@@ -5,6 +5,7 @@ export type BccAppNavigationItem = {
     title: string;
     icon: Component;
     pin?: number;
+    is?: VueComponent;
     /** Any additional properties will be passed to the component.
      * @example
      * {

package/dist-types/components/custom/BccImage/BccImage.vue.d.ts

@@ -0,0 +1,54 @@
+import { type StyleValue } from 'vue';
+import type { LightboxItemInput } from '../BccLightbox/types';
+export type { LightboxItem, LightboxItemInput, LightboxMediaType } from '../BccLightbox/types';
+export type ImageProps = {
+    /** Image URL for the thumbnail and lightbox (when `imgs` is not set). */
+    src?: string;
+    /** Enables click-to-preview in the global lightbox. */
+    preview?: boolean;
+    /** Inline style applied to the thumbnail `<img>`. */
+    imageStyle?: StyleValue;
+    /** Class applied to the thumbnail `<img>`. */
+    imageClass?: string | Record<string, boolean> | Array<string | Record<string, boolean>>;
+    /** Gallery items for the lightbox. Falls back to `src` when omitted. */
+    imgs?: LightboxItemInput[];
+    /** Index of the item shown when the lightbox opens. */
+    index?: number;
+    /** Allow looping when navigating a gallery. */
+    loop?: boolean;
+    /** Close the lightbox when clicking the backdrop. */
+    maskClosable?: boolean;
+    /** Accessible label for the preview trigger button. */
+    previewAriaLabel?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    image?: (props: typeof __VLS_1) => any;
+} & {
+    previewicon?: (props: typeof __VLS_3) => any;
+} & {
+    indicatoricon?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (event: Event) => any;
+    show: () => any;
+    hide: () => any;
+}, string, import("vue").PublicProps, Readonly<ImageProps> & Readonly<{
+    onError?: ((event: Event) => any) | undefined;
+    onShow?: (() => any) | undefined;
+    onHide?: (() => any) | undefined;
+}>, {
+    index: number;
+    loop: boolean;
+    maskClosable: boolean;
+    preview: boolean;
+    previewAriaLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist-types/components/custom/BccLightbox/BccLightbox.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist-types/components/custom/BccLightbox/BccLightboxMedia.vue.d.ts

@@ -0,0 +1,18 @@
+import type { LightboxItem } from './types';
+type __VLS_Props = {
+    item: LightboxItem;
+    zoomEnabled: boolean;
+};
+declare function rotateLeft(): void;
+declare function rotateRight(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    isImage: import("vue").ComputedRef<boolean>;
+    rotateLeft: typeof rotateLeft;
+    rotateRight: typeof rotateRight;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    swipe: (direction: "left" | "right") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSwipe?: ((direction: "left" | "right") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist-types/components/custom/BccLightbox/composables.d.ts

@@ -0,0 +1,23 @@
+import { type Ref } from 'vue';
+import { openLightbox } from './state';
+import { type LightboxApi } from './types';
+export declare function useLightbox(): LightboxApi;
+/** Open the global lightbox without using inject (e.g. imperative usage). */
+export declare const openBccLightbox: typeof openLightbox;
+/** Close the global lightbox without using inject. */
+export declare const closeBccLightbox: LightboxApi['close'];
+export declare function usePinchPan(zoomEnabled: Ref<boolean>, options?: {
+    swipeEnabled?: Ref<boolean>;
+    onSwipe?: (direction: 'left' | 'right') => void;
+    swipeThreshold?: number;
+}): {
+    scale: Ref<number, number>;
+    transformStyle: import("vue").ComputedRef<{
+        transform: string;
+    }>;
+    reset: () => void;
+    onPointerDown: (event: PointerEvent) => void;
+    onPointerMove: (event: PointerEvent) => void;
+    onPointerUp: (event: PointerEvent) => void;
+    onWheel: (event: WheelEvent) => void;
+};

package/dist-types/components/custom/BccLightbox/detectMedia.d.ts

@@ -0,0 +1,4 @@
+import type { LightboxItem, LightboxItemInput, LightboxMediaType } from './types';
+export declare function detectMediaType(src: string, type?: LightboxMediaType): LightboxMediaType;
+export declare function normalizeLightboxItem(input: LightboxItemInput): LightboxItem;
+export declare function normalizeLightboxItems(items: LightboxItemInput[]): LightboxItem[];

package/dist-types/components/custom/BccLightbox/index.d.ts

@@ -0,0 +1,6 @@
+export { default as BccLightbox } from './BccLightbox.vue';
+export { closeBccLightbox, openBccLightbox, useLightbox, usePinchPan } from './composables';
+export { detectMediaType, normalizeLightboxItem, normalizeLightboxItems } from './detectMedia';
+export { installBccLightbox, LightboxStore } from './state';
+export { LIGHTBOX_KEY } from './types';
+export type { LightboxApi, LightboxItem, LightboxItemInput, LightboxMediaType, LightboxOpenOptions, LightboxState, } from './types';

package/dist-types/components/custom/BccLightbox/state.d.ts

@@ -0,0 +1,33 @@
+import type { App } from 'vue';
+import { type LightboxOpenOptions } from './types';
+export declare function openLightbox(options: LightboxOpenOptions): void;
+export declare function closeLightbox(): void;
+declare function setLightboxIndex(index: number): void;
+declare function goToPreviousItem(): void;
+declare function goToNextItem(): void;
+declare function canGoPrevious(): boolean;
+declare function canGoNext(): boolean;
+export declare const LightboxStore: {
+    state: {
+        readonly visible: boolean;
+        readonly items: readonly {
+            readonly src: string;
+            readonly type?: import("./types").LightboxMediaType | undefined;
+            readonly alt?: string | undefined;
+            readonly title?: string | undefined;
+            readonly poster?: string | undefined;
+        }[];
+        readonly index: number;
+        readonly loop: boolean;
+        readonly maskClosable: boolean;
+    };
+    openLightbox: typeof openLightbox;
+    closeLightbox: typeof closeLightbox;
+    setLightboxIndex: typeof setLightboxIndex;
+    goToPreviousItem: typeof goToPreviousItem;
+    goToNextItem: typeof goToNextItem;
+    canGoPrevious: typeof canGoPrevious;
+    canGoNext: typeof canGoNext;
+};
+export declare function installBccLightbox(app: App): void;
+export {};

package/dist-types/components/custom/BccLightbox/types.d.ts

@@ -0,0 +1,31 @@
+import type { InjectionKey } from 'vue';
+export type LightboxMediaType = 'image' | 'video';
+export type LightboxItem = {
+    src: string;
+    type?: LightboxMediaType;
+    alt?: string;
+    title?: string;
+    /** Poster image for video items. */
+    poster?: string;
+};
+export type LightboxItemInput = string | LightboxItem;
+export type LightboxOpenOptions = {
+    items: LightboxItemInput[];
+    index?: number;
+    loop?: boolean;
+    maskClosable?: boolean;
+    onShow?: () => void;
+    onHide?: () => void;
+};
+export type LightboxState = {
+    visible: boolean;
+    items: LightboxItem[];
+    index: number;
+    loop: boolean;
+    maskClosable: boolean;
+};
+export type LightboxApi = {
+    open: (options: LightboxOpenOptions) => void;
+    close: () => void;
+};
+export declare const LIGHTBOX_KEY: InjectionKey<LightboxApi>;

package/dist-types/components/custom/BccNpsScore/BccNpsScore.vue.d.ts

@@ -25,12 +25,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
 }>, {
     reverse: boolean;
+    disabled: boolean;
     min: number;
     max: number;
     leftLabel: string;
     rightLabel: string;
     labelPosition: "top" | "bottom";
-    disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist-types/components/custom/BccReact/BccReact.vue.d.ts

@@ -4,9 +4,9 @@ declare const __VLS_export: import("vue").DefineComponent<ReactProps, {}, {}, {}
 }, string, import("vue").PublicProps, Readonly<ReactProps> & Readonly<{
     onToggle?: ((id: string) => any) | undefined;
 }>, {
-    placeholder: string;
     top: boolean;
     emojis: ReactInfo[];
+    placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist-types/components/custom/index.d.ts

@@ -2,13 +2,14 @@
  * Custom BCC components (not based on PrimeVue).
  * Add new custom components here and export them from this file.
  */
+export * from './BccLightbox';
 export { default as BccAppNavigation } from './BccAppNavigation/BccAppNavigation.vue';
 export { default as BccBadge } from './BccBadge/BccBadge.vue';
 export { default as BccCapacityIndicator } from './BccCapacityIndicator/BccCapacityIndicator.vue';
-export { default as BccCircleLoader } from './BccCircleLoader/BccCircleLoader.vue';
 export { default as BccDialKnob } from './BccDialKnob/BccDialKnob.vue';
 export { default as BccFrame } from './BccFrame/BccFrame.vue';
 export { default as BccGraphic } from './BccGraphic/BccGraphic.vue';
+export { default as BccImage } from './BccImage/BccImage.vue';
 export { default as BccNpsResult } from './BccNpsResult/BccNpsResult.vue';
 export { default as BccNpsScore } from './BccNpsScore/BccNpsScore.vue';
 export { default as BccReact } from './BccReact/BccReact.vue';
@@ -22,6 +23,7 @@ export type { CapacityIndicatorProps } from './BccCapacityIndicator/BccCapacityI
 export type { KnobProps, KnobSlots } from './BccDialKnob/BccDialKnob.vue';
 export type { FrameProps } from './BccFrame/BccFrame.vue';
 export type { GraphicProps } from './BccGraphic/BccGraphic.vue';
+export type { ImageProps } from './BccImage/BccImage.vue';
 export type { NpsResultProps } from './BccNpsResult/BccNpsResult.vue';
 export type { NpsScoreProps } from './BccNpsScore/BccNpsScore.vue';
 export type { ReactInfo, ReactProps } from './BccReact/types';

package/dist-types/components/wrapped/BccButton.vue.d.ts

@@ -5,11 +5,12 @@ export type ButtonProps = {
     iconRight?: boolean;
     iconClass?: PrimeButtonProps['iconClass'];
     size?: PrimeButtonProps['size'];
+    loadingIcon?: VueComponent;
     useCtx?: boolean;
-} & /* @vue-ignore */ Omit<PrimeButtonProps, 'icon' | 'iconPos'>;
-declare var __VLS_14: {};
+} & /* @vue-ignore */ Omit<PrimeButtonProps, 'icon' | 'iconPos' | 'loadingIcon'>;
+declare var __VLS_20: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_20) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist-types/components/wrapped/BccCheckbox.vue.d.ts

@@ -2,6 +2,9 @@ import { type CheckboxProps as PrimeCheckboxProps } from 'primevue/checkbox';
 export type CheckboxProps = PrimeCheckboxProps & {
     label?: string;
     labelLeft?: boolean;
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    labelClass?: string;
+    fluid?: boolean;
 };
 declare var __VLS_18: {};
 type __VLS_Slots = {} & {

package/dist-types/components/wrapped/BccMessage.vue.d.ts

@@ -5,10 +5,15 @@ export type MessageProps = Omit<PrimeMessageProps, 'icon'> & {
     iconRight?: VueComponent | boolean;
     title?: string;
     message?: string;
+    noShadow?: boolean;
 };
-declare var __VLS_19: {};
+declare var __VLS_19: {}, __VLS_21: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_19) => any;
+} & {
+    title?: (props: typeof __VLS_21) => any;
+} & {
+    message?: (props: typeof __VLS_23) => any;
 };
 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>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist-types/components/wrapped/BccRadioButton.vue.d.ts

@@ -4,6 +4,7 @@ export type RadioButtonProps = PrimeRadioButtonProps & {
     labelLeft?: boolean;
     justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
     labelClass?: string;
+    fluid?: boolean;
 };
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {

package/dist-types/components/wrapped/index.d.ts

@@ -7,7 +7,6 @@ export { default as BccButton } from './BccButton.vue';
 export { default as BccCheckbox } from './BccCheckbox.vue';
 export { default as BccChip } from './BccChip/BccChip.vue';
 export { default as BccConfirmDialog } from './BccConfirmDialog/BccConfirmDialog.vue';
-export { default as BccImage } from './BccImage.vue';
 export { default as BccInput } from './BccInput.vue';
 export { default as BccMenu } from './BccMenu/BccMenu.vue';
 export { default as BccMessage } from './BccMessage.vue';
@@ -20,7 +19,6 @@ export type { AvatarProps } from './BccAvatar/BccAvatar.vue';
 export type { ButtonProps } from './BccButton.vue';
 export type { CheckboxProps } from './BccCheckbox.vue';
 export type { ChipProps } from './BccChip/BccChip.vue';
-export type { ImageProps } from './BccImage.vue';
 export type { InputProps } from './BccInput.vue';
 export type { BccMenuItem, MenuProps } from './BccMenu/BccMenu.vue';
 export type { MessageProps } from './BccMessage.vue';

package/dist-types/index.d.ts

@@ -57,6 +57,7 @@ export { default as BccDivider } from 'primevue/divider';
 export { default as BccDock } from 'primevue/dock';
 export { default as BccDrawer } from 'primevue/drawer';
 export { default as BccDynamicDialog } from 'primevue/dynamicdialog';
+export { default as BccEditor } from 'primevue/editor';
 export { default as BccFieldset } from 'primevue/fieldset';
 export { default as BccFileUpload } from 'primevue/fileupload';
 export { default as BccFloatLabel } from 'primevue/floatlabel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcc-code/component-library-vue",
-  "version": "0.0.0-dev.f3ffbc4",
+  "version": "0.0.0-dev.f41f3d5",
   "type": "module",
   "description": "Extended Vue component library based on PrimeVue and BCC design tokens",
   "repository": "https://github.com/bcc-code/bcc-design.git",
@@ -30,6 +30,8 @@
     },
     "./style.css": "./dist/index.css",
     "./theme.css": "./dist/theme.css",
+    "./sfc-styles.css": "./dist/sfc-styles.css",
+    "./library-utilities.css": "./dist/library-utilities.css",
     "./archivo-font.css": "./dist/archivo-font.css",
     "./tailwind.css": "./dist-css/tailwind.css"
   },
@@ -37,7 +39,9 @@
     "start": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build": "run-p typecheck build:types build:vite",
-    "build:vite": "rimraf dist && vite build && node scripts/build-theme-css.mjs",
+    "build:vite": "rimraf dist && vite build && pnpm run build:sfc-styles && pnpm run build:library-utilities && node scripts/build-archivo-font.mjs && node scripts/build-theme-css.mjs",
+    "build:sfc-styles": "vite build --config vite.config.sfc-styles.ts && rimraf dist/sfc-styles.js",
+    "build:library-utilities": "tailwindcss -i src/library-utilities-input.css -o dist/library-utilities.css --minify",
     "build:types": "rimraf dist-types && vue-tsc -p tsconfig.build.json",
     "generate:semantic": "node scripts/restructure-semantic-primitives.mjs",
     "generate:semantic-css": "node scripts/generate-semantic-css.mjs",
@@ -54,7 +58,7 @@
     "create-version": "node ./scripts/version.cjs"
   },
   "dependencies": {
-    "@bcc-code/design-tokens": "^5.2.3",
+    "@bcc-code/design-tokens": "^5.2.5",
     "@bcc-code/icons-vue": "^1.4.0",
     "@primeuix/themes": "^2.0.3",
     "@tailwindcss/vite": "^4.1.18",
@@ -70,6 +74,7 @@
     "@primevue/auto-import-resolver": "^4.5.4",
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/vue3-vite": "^10.3.5",
+    "@tailwindcss/cli": "^4.2.4",
     "@types/node": "^22.0.0",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vue/eslint-config-prettier": "^10.2.0",
@@ -87,6 +92,7 @@
     "postcss": "^8.4.49",
     "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
+    "quill": "^2.0.3",
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.0",
     "storybook": "^10.3.5",

package/dist-types/components/custom/BccCircleLoader/BccCircleLoader.vue.d.ts

@@ -1,11 +0,0 @@
-type __VLS_Props = {
-    icon?: string;
-    size?: 'sm' | 'md' | 'base' | 'lg' | 'xl' | '2xl' | '3xl';
-    left?: boolean;
-    right?: boolean;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: "sm" | "md" | "base" | "lg" | "xl" | "2xl" | "3xl";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist-types/components/wrapped/BccImage.vue.d.ts

@@ -1,17 +0,0 @@
-import { type ImageProps as PrimeImageProps } from 'primevue/image';
-export type ImageProps = PrimeImageProps;
-declare var __VLS_9: {}, __VLS_17: {};
-type __VLS_Slots = {} & {
-    refresh?: (props: typeof __VLS_9) => any;
-} & {
-    undo?: (props: typeof __VLS_17) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<PrimeImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PrimeImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};