@codeandfunction/callaloo 1.13.0 → 1.13.2

package/dist/types.d.ts

@@ -4,18 +4,32 @@ export declare enum Align {
     Right = "right"
 }
 export interface BannerProps {
+    /** Set the horizontal alignment of content. The property can be one of `CLAlign`, e.g. `CLAlign.Left`  */
+    align?: Align;
+    /** Sets the aria-label on the banner if the `onClick` property has been set. It should be used when the `onClick` property has been set. */
     ariaLabel?: string;
+    /** The border radius size. The property can be one of `CLBorderRadius`, e.g. `CLBorderRadius.Medium`. */
     borderRadius?: BorderRadius;
+    /** A `boolean` value which dictates the busy state of the Banner. When set to `true`, it utilizes the `<CLSkeleton />` component. */
     busy?: boolean;
-    title?: string;
+    /** Sets the height of the Banner, it's default value is `auto`. */
+    height?: string;
+    /** The text to be displayed as the message. */
     message?: string;
+    /** A callback function to handle click events. It should be used when in conjunction with the `ariaLabel` property. */
+    onClick?: GenericFunction;
+    /** A callback function to handle when the banner is dismissed. */
+    onDismiss?: GenericFunction;
+    /** When set to `false` it will not render a Banner with rounded corners. */
+    rounded?: boolean;
+    /** Sets a custom ID used for unit tests. */
+    testId?: string;
+    /** Sets the style/theme. The property can be one of `CLThemes`, e.g. `CLThemes.Primary`. */
     theme?: BannerThemes;
+    /** Set the text of the title which should be displayed. */
+    title?: string;
+    /** Sets the width of the Banner, it's default value is `100%`. */
     width?: string;
-    height?: string;
-    rounded?: boolean;
-    align?: Align;
-    onDismiss?: (event?: Event) => void;
-    onClick?: (event?: Event) => void;
 }
 export type BadgeThemes = Exclude<Themes, Themes.Transparent>;
 export type BannerThemes = Exclude<Themes, Themes.Transparent>;
@@ -44,30 +58,55 @@ export declare enum CardTypes {
     XLarge = "xlarge"
 }
 export interface CardProps {
+    /** When set to `true`, it elelvates the card to indicate it's active state. */
     active?: boolean;
+    /** Set the horizontal alignment of content. The property can be one of `CLAlign`, e.g. `CLAlign.Left`  */
     align?: Align;
+    /** The border radius size. The property can be one of `CLBorderRadius`, e.g. `CLBorderRadius.Medium`. */
     borderRadius?: BorderRadius;
+    /** A `boolean` value which dictates the busy state of the card. When set to `true`, it utilizes the `<CLSkeleton />` component. */
     busy?: boolean;
+    /** Appears below the title. Can be used to provide meta data, e.g. the time and date. */
     byline?: string;
+    /** The `elevated` property displays a shadow to indicate elevation. */
     elevated?: boolean;
+    /** A callback function which provides a reference to the button. */
     forwardRef?: (elem: HTMLDivElement) => void;
+    /** Sets the height of the Card, it's default value is `auto`. */
     height?: string;
+    /** Provide a URL for the entire Card to behave as a link. */
     href?: string;
+    /** Provide a URL/relative path to an image to be displayed. */
     image?: string;
+    /** Set the alt text for an image, when the image prop has been set. */
     imageAltText?: string;
+    /** Set the position of the image. If the row prop is not set, the image can be set to appear to the left or right of the slot content. */
     imageOrder?: Order;
+    /** Sets the height of the image, it's default value is `auto`. */
     imageHeight?: string;
+    /** Sets the width of the image, it's default value is `auto`. */
     imageWidth?: string;
-    onClick?: (event?: Event) => void;
+    /** A callback function to handle click events. */
+    onClick?: GenericFunction;
+    /** When set to `false`, it will remove any horizontal and vertical padding of the slot content. */
     padded?: boolean;
+    /** When set to `false` it will not render a Card with rounded corners. */
     rounded?: boolean;
+    /** Sets where to display the linked URL. */
     target?: LinkTarget;
+    /** Sets a custom ID used for unit tests. */
     testId?: string;
+    /** Set the text of the title which should be displayed. */
     title?: string;
+    /** Set the title type. The property can be one of `CLHeadingTypes`, e.g. `CLHeadingTypes.Title` */
     titleType?: HeadingTypes;
+    /** Set the title heading level. The property can be one of `CLHeadingLevels`, e.g. `CLHeadingLevels.H1` */
     titleHLevel?: HeadingLevels;
+    /** Sets the style/theme. The property can be one of `CLThemes`, e.g. `CLThemes.Primary`. */
     theme?: Themes;
+    /** Sets the Card type. The property can be one of `CLCardTypes`, e.g. `CLCardTypes.Medium`. */
     type?: CardTypes;
+    /** Sets the width of the Card, it's default value is `auto`. */
     width?: string;
 }
 export type CheckboxThemes = Exclude<Themes, Themes.Transparent | Themes.Outline | Themes.OutlineDanger | Themes.OutlineInfo | Themes.OutlinePrimary | Themes.OutlineSecondary | Themes.OutlineSuccess | Themes.OutlineWarning>;
@@ -76,6 +115,8 @@ export declare enum DarkMode {
     Off = "light",
     System = "system"
 }
+export type GenericFunction = (event?: Event) => void;
+export type GenericFocusFunction = (event: FocusEvent) => void;
 export type HeadingThemes = Extract<Themes, Themes.Light | Themes.Dark>;
 export declare enum HeadingLevels {
     H1 = "h1",
@@ -95,6 +136,16 @@ export declare enum HeadingTypes {
     Large = "large",
     XLarge = "xlarge"
 }
+export declare enum IconSizes {
+    Tiny = "tiny",
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+    XLarge = "xlarge",
+    XXLarge = "xxlarge",
+    XXXLarge = "xxxlarge",
+    XXXXLarge = "xxxxlarge"
+}
 export declare enum IconNames {
     Activity = "tabler:activity",
     Ai = "tabler:ai",
@@ -230,7 +281,6 @@ export declare enum IconNames {
     ListTree = "tabler:list-tree",
     LogIn = "tabler:login",
     LogOut = "tabler:logout",
-    Music = "tabler:music",
     Palette = "tabler:palette",
     Paint = "tabler:paint",
     Marquee = "tabler:marquee",
@@ -242,15 +292,23 @@ export declare enum IconNames {
     MessageDots = "tabler:message-dots",
     MoodDollar = "tabler:mood-dollar",
     MoodHeart = "tabler:mood-heart",
+    MoodKid = "tabler:mood-kid",
+    MoodNerd = "tabler:mood-nerd",
+    MoodNeutral = "tabler:mood-neutral",
     MoodPuzzled = "tabler:mood-puzzled",
     MoodSadSquint = "tabler:mood-sad-squint",
     MoodSmile = "tabler:mood-smile",
+    MoodTongue = "tabler:mood-tongue",
+    MoodTongueWink = "tabler:mood-tongue-wink",
+    MoodTongueWink2 = "tabler:mood-tongue-wink-2",
     MoodWink2 = "tabler:mood-wink-2",
     MoodWrrr = "tabler:mood-wrrr",
+    Moon = "tabler:moon",
     Mouse = "tabler:mouse",
     MoreHorizontal = "tabler:dots",
     MoreVertical = "tabler:dots-vertical",
     Movie = "tabler:movie",
+    Music = "tabler:music",
     NewSection = "tabler:new-section",
     PlusCircle = "tabler:circle-plus",
     Plus = "tabler:plus",
@@ -288,6 +346,7 @@ export declare enum IconNames {
     WindowMinimize = "tabler:window-minimize"
 }
 export type InlineTextHtmlTags = 'a' | 'abbr' | 'b' | 'bdi' | 'bdo' | 'br' | 'cite' | 'code' | 'data' | 'dfn' | 'em' | 'i' | 'kbd' | 'mark' | 'q' | 'rp' | 'rt' | 'ruby' | 's' | 'samp' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'time' | 'u' | 'var' | 'wbr';
+export type InputThemes = Extract<Themes, Themes.Danger | Themes.Default | Themes.Success | Themes.Warning>;
 export declare enum InputTypes {
     Color = "color",
     Date = "date",
@@ -316,14 +375,23 @@ export declare enum MessageType {
     Warning = "warning"
 }
 export interface NavItem {
+    /** Sets the aria-label on the NavLink element. */
     ariaLabel?: string;
+    /** Sets the external attribute on the NavLink element. If set, it adds an icon indicating that the link will open a new tab/window. */
     external?: boolean;
+    /** Sets the href attribute on the NavLink element. */
     href?: string;
+    /** Sets the ID attribute on the NavLink element. */
     id: string;
+    /** The text to be displayed as the label. */
     label: string;
-    onClick?: (event?: Event) => void;
+    /** A callback function to handle click events. */
+    onClick?: GenericFunction;
+    /** Sets the rel attribute on the NavLink element. */
     rel?: string;
+    /** Sets the target attribute on the NavLink element. The property can be one of `CLLinkTarget`, e.g. `CLLinkTarget.Self` */
     target?: LinkTarget;
+    /** Sets the theme of the NavLink element. The property can be one of `CLSimpleThemes`, e.g. `CLThemes.Default` */
     theme?: SimpleThemes;
 }
 export interface Option {
@@ -331,44 +399,6 @@ export interface Option {
     value: string | number | null;
 }
 export type PillThemes = Exclude<Themes, Themes.Transparent>;
-export interface InputProps {
-    ariaLabel?: string;
-    autoComplete?: boolean;
-    borderRadius?: BorderRadius;
-    busy?: boolean;
-    checked?: boolean;
-    disabled?: boolean;
-    fluid?: boolean;
-    form?: string;
-    grouped?: boolean;
-    id?: string;
-    label?: string;
-    maxLength?: number;
-    minLength?: number;
-    messages?: string[];
-    messageType?: MessageType;
-    name: string;
-    options?: Option[];
-    pattern?: string;
-    pill?: string;
-    placeholder?: string;
-    prefix?: string | IconNames;
-    readonly?: boolean;
-    required?: boolean;
-    resizable?: boolean;
-    rounded?: boolean;
-    rows?: number;
-    size?: Sizes;
-    spellCheck?: boolean;
-    suffix?: string | IconNames;
-    type?: InputTypes;
-    theme?: Themes;
-    value?: string | number;
-    onInput?: (event: Event) => void;
-    onBlur?: (event: FocusEvent) => void;
-    onFocus?: (event: FocusEvent) => void;
-    onChange?: (event: Event) => void;
-}
 export declare enum Order {
     After = "after",
     Before = "before"
@@ -377,6 +407,11 @@ export declare enum Orientation {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
+export declare enum PaginationType {
+    Dots = "dots",
+    Hidden = "hidden",
+    Numbered = "numbered"
+}
 export declare enum Placement {
     Bottom = "bottom",
     BottomEnd = "bottom-end",
@@ -401,10 +436,7 @@ export declare enum Sizes {
     Small = "small",
     Medium = "medium",
     Large = "large",
-    XLarge = "xlarge",
-    XXLarge = "xlarge",
-    XXXLarge = "xlarge",
-    XXXXLarge = "xlarge"
+    XLarge = "xlarge"
 }
 export type SpinnerThemes = Exclude<Themes, Themes.Transparent | Themes.Outline | Themes.OutlineDanger | Themes.OutlineInfo | Themes.OutlinePrimary | Themes.OutlineSecondary | Themes.OutlineSuccess | Themes.OutlineWarning>;
 export declare enum TableTypes {
@@ -443,16 +475,28 @@ export declare enum Themes {
     Dark = "dark"
 }
 export interface ToastProps {
+    /** The action label text to be displayed. */
     actionLabel?: string;
+    /** The border radius size. The property can be one of `CLBorderRadius`, e.g. `CLBorderRadius.Medium`. */
     borderRadius?: BorderRadius;
     /** Time in seconds e.g 5 = 5 seconds */
     dismissTimer?: number;
+    /** The icon to be displayed. The property can be one of `CLIconNames`, e.g. `CLIconNames.Info`. */
     icon?: IconNames;
-    iconSize?: Sizes;
+    /** The size of the icon. The property can be one of `CLSizes`, e.g. `CLSizes.Medium */
+    iconSize?: IconSizes;
+    /** The text to be displayed as the message. */
     message?: string;
-    onAction?: (event?: Event) => void;
-    onDismiss: () => void;
+    /** A callback function to handle click events. */
+    onAction?: GenericFunction;
+    /** A callback function to handle when the toast is dismissed. */
+    onDismiss: GenericFunction;
+    /** When set to `false` it will not render a Toast with rounded corners. */
     rounded?: boolean;
+    /** Sets a custom ID used for unit tests. */
+    testId?: string;
+    /** Set the text of the title which should be displayed. */
     title?: string;
+    /** Sets the width of the Toast, it's default value is `24rem`. */
     width?: string;
 }

package/dist/{helper.d.ts → utils/helper.d.ts}

@@ -3,6 +3,13 @@ export interface IAnimate {
     stop: () => void;
 }
 export declare const animate: () => IAnimate;
-export declare const getMaxZIndex: () => number;
-export declare const hasSlotContent: (slots: any, slotName: string, component: string) => boolean;
+interface ChildIsVisibleInput {
+    parent: HTMLElement;
+    child: HTMLElement;
+    threshold?: number;
+}
+export declare const childIsVisible: ({ parent, child, threshold, }: ChildIsVisibleInput) => boolean;
 export declare const debounce: (fn: () => void, ms?: number) => (this: any, ...args: any | any[]) => void;
+export declare const hasSlotContent: (slots: any, slotName: string, component: string) => boolean;
+export declare const getMaxZIndex: () => number;
+export {};

package/dist/utils/tests.d.ts

@@ -0,0 +1,9 @@
+import { VueWrapper } from '@vue/test-utils';
+interface Input {
+    defaultProps: Record<string, any>;
+    component: any;
+    componentProps?: Record<string, any>;
+}
+export declare const renderComponent: (input: Input) => VueWrapper;
+export declare const sleep: (ms: number) => Promise<unknown>;
+export {};

package/package.json

@@ -1,24 +1,45 @@
 {
   "name": "@codeandfunction/callaloo",
-  "description": "a simple vue component library",
+  "description": "Callaloo is a Vue UI library. It is easy to integrate into any Vue3+ project, has a small footprint, can be easily themed, and provides commonly used components.",
   "author": {
     "name": "Anthony Cholmondeley",
     "url": "https://callaloo.codeandfunction.com"
   },
-  "version": "1.13.0",
+  "keywords": [
+    "callaloo",
+    "vue",
+    "vue3",
+    "vue.js",
+    "simple",
+    "ui library",
+    "a11y",
+    "component library"
+  ],
+  "version": "1.13.2",
   "license": "MIT",
   "type": "module",
   "scripts": {
     "build:lib": "yarn export:icons && vite build && npm pack",
     "build:watch": "vite build --watch",
     "build:web": "yarn export:icons && yarn storybook build",
+    "coverage": "vitest run --coverage",
     "export:icons": "npx tsx export-icons.ts",
     "lint": "yarn lint:js && yarn lint:prettier",
     "lint:js": "eslint 'src/**/*.{ts,vue}'",
     "lint:js:fix": "eslint 'src/**/*.{ts,vue}' --fix",
     "lint:prettier": "prettier --check 'src/**/*.{ts,vue}'",
     "start": "yarn export:icons && storybook dev -p 4400 --no-open",
-    "test-storybook": "test-storybook --url http://127.0.0.1:4400"
+    "test": "vitest --run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui --coverage",
+    "test:storybook": "test-storybook --url http://127.0.0.1:4400",
+    "prepare": "husky",
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+      "src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}": [
+          "yarn test"
+      ]
   },
   "files": [
     "dist"
@@ -38,46 +59,53 @@
   ],
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
-    "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.14.0",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.15.0",
     "@floating-ui/vue": "^1.1.5",
-    "@iconify-json/tabler": "^1.2.7",
+    "@iconify-json/tabler": "^1.2.8",
     "@iconify/types": "^2.0.0",
-    "@storybook/addon-a11y": "^8.4.2",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/cli": "^8.4.2",
-    "@storybook/core-server": "^8.4.2",
-    "@storybook/test": "^8.4.2",
+    "@storybook/addon-a11y": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/cli": "^8.4.5",
+    "@storybook/core-server": "^8.4.5",
+    "@storybook/test": "^8.4.5",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/vue3": "^8.4.2",
-    "@storybook/vue3-vite": "^8.4.2",
-    "@types/node": "22.9.0",
-    "@typescript-eslint/eslint-plugin": "8.13.0",
-    "@typescript-eslint/parser": "8.13.0",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@storybook/vue3": "^8.4.5",
+    "@storybook/vue3-vite": "^8.4.5",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "22.10.1",
+    "@typescript-eslint/eslint-plugin": "8.16.0",
+    "@typescript-eslint/parser": "8.16.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vitest/coverage-c8": "~0.33.0",
-    "@vitest/coverage-v8": "2.1.4",
-    "@vitest/ui": "2.1.4",
+    "@vitest/coverage-istanbul": "2.1.6",
+    "@vitest/coverage-v8": "2.1.6",
+    "@vitest/ui": "^2.1.6",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
-    "eslint": "9.14.0",
+    "eslint": "9.15.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-vue": "^9.30.0",
+    "eslint-plugin-vue": "^9.31.0",
     "glob": "^11.0.0",
     "globals": "^15.12.0",
-    "playwright": "^1.48.2",
-    "prettier": "^3.3.3",
-    "sass": "^1.80.6",
-    "storybook": "^8.4.2",
-    "typescript": "^5.6.3",
-    "vite": "5.4.10",
+    "husky": "^9.1.7",
+    "jsdom": "^25.0.1",
+    "lint-staged": "^15.2.10",
+    "lodash": "^4.17.21",
+    "playwright": "^1.49.0",
+    "prettier": "^3.4.1",
+    "sass": "^1.81.0",
+    "storybook": "^8.4.5",
+    "typescript": "^5.7.2",
+    "vite": "5.4.11",
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-lib-inject-css": "^2.1.1",
-    "vite-tsconfig-paths": "^5.1.0",
-    "vitest": "2.1.4",
-    "vue": "^3.5.12",
-    "vue-router": "^4.4.5",
+    "vite-tsconfig-paths": "^5.1.3",
+    "vitest": "2.1.6",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
     "vue-tsc": "^2.1.10"
   },
   "packageManager": "yarn@4.5.0",