@akinon/ui-breadcrumb 0.3.0 → 0.5.0

package/dist/cjs/index.d.ts

@@ -1,10 +1,5 @@
-import './index.css';
-import type { BreadcrumbProps as AntBreadcrumbProps } from 'antd';
 import * as React from 'react';
-export type BreadcrumbProps = Omit<AntBreadcrumbProps, 'prefixCls' | 'className' | 'classNames' | 'rootClassName' | 'style' | 'styles' | 'separator'> & {
-    onAnyItemClick?: ({ href }: {
-        href: string;
-    }) => void;
-};
+import type { BreadcrumbProps } from './types';
+export type { BreadcrumbProps } from './types';
 export declare const Breadcrumb: (props: BreadcrumbProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,kBAAkB,EAChB,WAAW,GACX,WAAW,GACX,YAAY,GACZ,eAAe,GACf,OAAO,GACP,QAAQ,GACR,WAAW,CACd,GAAG;IAEF,cAAc,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,eAAe,sBAiChD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAY,MAAM,SAAS,CAAC;AAEzD,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,UAAU,UAAW,eAAe,sBAgGhD,CAAC"}

package/dist/cjs/index.js

@@ -1,11 +1,70 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Breadcrumb = void 0;
-require("./index.css");
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
 const Breadcrumb = (props) => {
     const { onAnyItemClick, items } = props;
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    const breadcrumbToken = token.Breadcrumb;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Breadcrumb'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-breadcrumb`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-breadcrumb`;
+        return {
+            [prefixCls]: {
+                paddingBottom: breadcrumbToken.paddingBottom,
+                color: breadcrumbToken.itemColor,
+                ['li:last-child']: {
+                    color: breadcrumbToken.lastItemColor
+                }
+            },
+            [prefixClsWithoutHash]: {
+                borderBottom: breadcrumbToken.borderBottom,
+                fontWeight: breadcrumbToken.fontWeight,
+                lineHeight: breadcrumbToken.lineHeight,
+                letterSpacing: breadcrumbToken.letterSpacing,
+                paddingLeft: breadcrumbToken.paddingLeft,
+                paddingRight: breadcrumbToken.paddingRight,
+                [`li ${prefixClsWithoutHash}-link`]: {
+                    ['&:hover']: {
+                        cursor: 'pointer'
+                    }
+                },
+                [`li:last-child ${prefixClsWithoutHash}-link`]: {
+                    ['&:hover']: {
+                        cursor: 'unset'
+                    }
+                },
+                ['a']: {
+                    color: breadcrumbToken.itemColor,
+                    paddingLeft: 0,
+                    paddingRight: 0,
+                    marginInline: breadcrumbToken.marginInline,
+                    height: breadcrumbToken.height,
+                    ['&:hover']: {
+                        color: 'unset',
+                        backgroundColor: 'unset'
+                    }
+                },
+                [`${prefixClsWithoutHash}-separator`]: {
+                    marginRight: breadcrumbToken.marginRight,
+                    marginLeft: breadcrumbToken.marginLeft,
+                    color: breadcrumbToken.separatorColor,
+                    ['&:nth-last-child(2)']: {
+                        color: breadcrumbToken.lastItemColor
+                    }
+                }
+            }
+        };
+    });
     if (onAnyItemClick) {
         const newItems = items === null || items === void 0 ? void 0 : items.map((item, i) => {
             // if it's last item, only return title
@@ -21,8 +80,8 @@ const Breadcrumb = (props) => {
                 } });
         });
         const newProps = Object.assign(Object.assign({}, props), { items: newItems });
-        return (React.createElement(antd_1.Breadcrumb, Object.assign({}, newProps, { items: newItems })));
+        return useStyle(React.createElement(antd_1.Breadcrumb, Object.assign({}, newProps)));
     }
-    return React.createElement(antd_1.Breadcrumb, Object.assign({}, props));
+    return useStyle(React.createElement(antd_1.Breadcrumb, Object.assign({}, props)));
 };
 exports.Breadcrumb = Breadcrumb;

package/dist/cjs/types.d.ts

@@ -0,0 +1,94 @@
+export type BreadcrumbProps = Omit<
+  AntBreadcrumbProps,
+  'prefixCls' | 'style' | 'styles' | 'separator'
+> & {
+  /**
+   * This is a custom event that is triggered when any breadcrumb item is clicked. It takes href of the clicked item as parameter.
+   */
+  onAnyItemClick?: ({ href }: { href: string }) => void;
+};
+
+type PropertyKey = string | number | symbol;
+
+export interface SeparatorType {
+  separator?: React.ReactNode;
+  key?: React.Key;
+}
+
+interface MenuItem {
+  key?: React.Key;
+  title?: React.ReactNode;
+  label?: React.ReactNode;
+  path?: string;
+  href?: string;
+}
+
+export interface BreadcrumbItemProps extends SeparatorType {
+  prefixCls?: string;
+  href?: string;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface BreadcrumbItemType {
+  key?: React.Key;
+  /**
+   * Different with `path`. Directly set the link of this item.
+   */
+  href?: string;
+  /**
+   * Different with `href`. It will concat all prev `path` to the current one.
+   */
+  path?: string;
+  title?: React.ReactNode;
+  breadcrumbName?: string;
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+}
+
+export interface BreadcrumbSeparatorType {
+  type: 'separator';
+  separator?: React.ReactNode;
+}
+
+export type ItemType = Partial<BreadcrumbItemType & BreadcrumbSeparatorType>;
+
+export type InternalRouteType = Partial<
+  BreadcrumbItemType & BreadcrumbSeparatorType
+>;
+
+export interface AntBreadcrumbProps<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  T extends Record<PropertyKey, any> = Record<PropertyKey, any>
+> {
+  prefixCls?: string;
+  /**
+   * Routing parameters. <code>object</code><br /><br />
+   */
+  params?: T;
+  separator?: React.ReactNode;
+  style?: React.CSSProperties;
+  /**
+   * The additional css class
+   */
+  className?: string;
+  /**
+   * ClassName on the root element
+   */
+  rootClassName?: string;
+  children?: React.ReactNode;
+  /**
+   * The routing stack information of router
+   */
+  items?: ItemType[];
+  /**
+   * Custom item renderer. <code>(route, params, routes, paths) => ReactNode</code><br /><br />
+   */
+  itemRender?: (
+    route: ItemType,
+    params: T,
+    routes: ItemType[],
+    paths: string[]
+  ) => React.ReactNode;
+}

package/dist/esm/index.d.ts

@@ -1,10 +1,5 @@
-import './index.css';
-import type { BreadcrumbProps as AntBreadcrumbProps } from 'antd';
 import * as React from 'react';
-export type BreadcrumbProps = Omit<AntBreadcrumbProps, 'prefixCls' | 'className' | 'classNames' | 'rootClassName' | 'style' | 'styles' | 'separator'> & {
-    onAnyItemClick?: ({ href }: {
-        href: string;
-    }) => void;
-};
+import type { BreadcrumbProps } from './types';
+export type { BreadcrumbProps } from './types';
 export declare const Breadcrumb: (props: BreadcrumbProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,kBAAkB,EAChB,WAAW,GACX,WAAW,GACX,YAAY,GACZ,eAAe,GACf,OAAO,GACP,QAAQ,GACR,WAAW,CACd,GAAG;IAEF,cAAc,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,eAAe,sBAiChD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAY,MAAM,SAAS,CAAC;AAEzD,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,UAAU,UAAW,eAAe,sBAgGhD,CAAC"}

package/dist/esm/index.js

@@ -1,8 +1,67 @@
-import './index.css';
-import { Breadcrumb as AntBreadcrumb } from 'antd';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { Breadcrumb as AntBreadcrumb, ConfigProvider } from 'antd';
 import * as React from 'react';
 export const Breadcrumb = (props) => {
     const { onAnyItemClick, items } = props;
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const breadcrumbToken = token.Breadcrumb;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Breadcrumb'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-breadcrumb`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-breadcrumb`;
+        return {
+            [prefixCls]: {
+                paddingBottom: breadcrumbToken.paddingBottom,
+                color: breadcrumbToken.itemColor,
+                ['li:last-child']: {
+                    color: breadcrumbToken.lastItemColor
+                }
+            },
+            [prefixClsWithoutHash]: {
+                borderBottom: breadcrumbToken.borderBottom,
+                fontWeight: breadcrumbToken.fontWeight,
+                lineHeight: breadcrumbToken.lineHeight,
+                letterSpacing: breadcrumbToken.letterSpacing,
+                paddingLeft: breadcrumbToken.paddingLeft,
+                paddingRight: breadcrumbToken.paddingRight,
+                [`li ${prefixClsWithoutHash}-link`]: {
+                    ['&:hover']: {
+                        cursor: 'pointer'
+                    }
+                },
+                [`li:last-child ${prefixClsWithoutHash}-link`]: {
+                    ['&:hover']: {
+                        cursor: 'unset'
+                    }
+                },
+                ['a']: {
+                    color: breadcrumbToken.itemColor,
+                    paddingLeft: 0,
+                    paddingRight: 0,
+                    marginInline: breadcrumbToken.marginInline,
+                    height: breadcrumbToken.height,
+                    ['&:hover']: {
+                        color: 'unset',
+                        backgroundColor: 'unset'
+                    }
+                },
+                [`${prefixClsWithoutHash}-separator`]: {
+                    marginRight: breadcrumbToken.marginRight,
+                    marginLeft: breadcrumbToken.marginLeft,
+                    color: breadcrumbToken.separatorColor,
+                    ['&:nth-last-child(2)']: {
+                        color: breadcrumbToken.lastItemColor
+                    }
+                }
+            }
+        };
+    });
     if (onAnyItemClick) {
         const newItems = items === null || items === void 0 ? void 0 : items.map((item, i) => {
             // if it's last item, only return title
@@ -18,7 +77,7 @@ export const Breadcrumb = (props) => {
                 } });
         });
         const newProps = Object.assign(Object.assign({}, props), { items: newItems });
-        return (React.createElement(AntBreadcrumb, Object.assign({}, newProps, { items: newItems })));
+        return useStyle(React.createElement(AntBreadcrumb, Object.assign({}, newProps)));
     }
-    return React.createElement(AntBreadcrumb, Object.assign({}, props));
+    return useStyle(React.createElement(AntBreadcrumb, Object.assign({}, props)));
 };

package/dist/esm/types.d.ts

@@ -0,0 +1,94 @@
+export type BreadcrumbProps = Omit<
+  AntBreadcrumbProps,
+  'prefixCls' | 'style' | 'styles' | 'separator'
+> & {
+  /**
+   * This is a custom event that is triggered when any breadcrumb item is clicked. It takes href of the clicked item as parameter.
+   */
+  onAnyItemClick?: ({ href }: { href: string }) => void;
+};
+
+type PropertyKey = string | number | symbol;
+
+export interface SeparatorType {
+  separator?: React.ReactNode;
+  key?: React.Key;
+}
+
+interface MenuItem {
+  key?: React.Key;
+  title?: React.ReactNode;
+  label?: React.ReactNode;
+  path?: string;
+  href?: string;
+}
+
+export interface BreadcrumbItemProps extends SeparatorType {
+  prefixCls?: string;
+  href?: string;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface BreadcrumbItemType {
+  key?: React.Key;
+  /**
+   * Different with `path`. Directly set the link of this item.
+   */
+  href?: string;
+  /**
+   * Different with `href`. It will concat all prev `path` to the current one.
+   */
+  path?: string;
+  title?: React.ReactNode;
+  breadcrumbName?: string;
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+}
+
+export interface BreadcrumbSeparatorType {
+  type: 'separator';
+  separator?: React.ReactNode;
+}
+
+export type ItemType = Partial<BreadcrumbItemType & BreadcrumbSeparatorType>;
+
+export type InternalRouteType = Partial<
+  BreadcrumbItemType & BreadcrumbSeparatorType
+>;
+
+export interface AntBreadcrumbProps<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  T extends Record<PropertyKey, any> = Record<PropertyKey, any>
+> {
+  prefixCls?: string;
+  /**
+   * Routing parameters. <code>object</code><br /><br />
+   */
+  params?: T;
+  separator?: React.ReactNode;
+  style?: React.CSSProperties;
+  /**
+   * The additional css class
+   */
+  className?: string;
+  /**
+   * ClassName on the root element
+   */
+  rootClassName?: string;
+  children?: React.ReactNode;
+  /**
+   * The routing stack information of router
+   */
+  items?: ItemType[];
+  /**
+   * Custom item renderer. <code>(route, params, routes, paths) => ReactNode</code><br /><br />
+   */
+  itemRender?: (
+    route: ItemType,
+    params: T,
+    routes: ItemType[],
+    paths: string[]
+  ) => React.ReactNode;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-breadcrumb",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": false,
   "description": "A basic button react component.",
   "type": "module",
@@ -10,16 +10,15 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0"
+    "antd": "5.17.0",
+    "@akinon/ui-theme": "0.7.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2",
-    "@akinon/typescript-config": "0.2.0",
-    "@akinon/eslint-config": "0.1.0",
-    "@akinon/vite-config": "0.4.0"
+    "@akinon/typescript-config": "0.4.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -39,12 +38,8 @@
     "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
     "build:esm": "tsc --outDir dist/esm",
     "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
-    "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
+    "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
     "clean": "rimraf dist/",
-    "lint": "eslint *.ts*",
-    "test": "vitest run",
-    "test:ui": "vitest --ui",
-    "test:watch": "vitest watch",
     "typecheck": "tsc --noEmit"
   }
 }

package/dist/cjs/index.css

@@ -1,12 +0,0 @@
-.akinon-breadcrumb {
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
-  border-bottom: 1px solid var(--color-gray-900);
-
-  .akinon-breadcrumb-separator {
-    margin-left: 0.4rem;
-    margin-right: 0.4rem;
-  }
-}

package/dist/esm/index.css

@@ -1,12 +0,0 @@
-.akinon-breadcrumb {
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
-  border-bottom: 1px solid var(--color-gray-900);
-
-  .akinon-breadcrumb-separator {
-    margin-left: 0.4rem;
-    margin-right: 0.4rem;
-  }
-}