Skip to content

Commit

Permalink
feat(auto-catalog): remove indexType prop, close #3537
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mister-Hope
Mister-Hope committed Oct 28, 2023
1 parent 896681d commit add17d9
Show file tree
Hide file tree
Showing 6 changed files with 228 additions and 149 deletions.
1 change: 1 addition & 0 deletions demo/auto-catalog/src/README.md
View file
Expand Up @@ -10,4 +10,5 @@ actions:
---

<AutoCatalog />
<AutoCatalog index />
<AutoCatalog base="/not-exist/" />
7 changes: 0 additions & 7 deletions docs/auto-catalog/src/config.md
View file
Expand Up @@ -169,13 +169,6 @@ Max level of catalog.

Whether display index number for catalog.

### indexType

- Type: `ul | ol`
- Default: `ul`

Index type for catalog, only available when `index` is `true`.

### hideHeading

- Type: `boolean`
Expand Down
7 changes: 0 additions & 7 deletions docs/auto-catalog/src/zh/config.md
View file
Expand Up @@ -171,13 +171,6 @@ Catalog 的最大层级

是否在目录列表中显示索引

### indexType

- 类型: `ul | ol`
- 默认值: `ul`

索引列表的展示类型，仅显示索引时生效

### hideHeading

- 类型: `boolean`
Expand Down
260 changes: 143 additions & 117 deletions packages/auto-catalog/src/client/components/AutoCatalog.ts
View file
Expand Up @@ -29,9 +29,9 @@ export interface AutoCatalogProps {

interface CatalogInfo {
title: string;
icon: string | null | undefined;
icon: string | null;
base: string;
order: number | null | undefined;
order: number | null;
level: number;
path: string;
children?: CatalogInfo[];
Expand Down Expand Up @@ -76,18 +76,6 @@ export default defineComponent({
*/
index: Boolean,

/**
* Index type for catalog, only available when `index` is `true`
*
* 索引列表的展示类型，仅显示索引时生效
*
* @default 'ul'
*/
indexType: {
type: String,
default: "ul",
},

/**
* Whether hide `Category` title
*
Expand All @@ -105,6 +93,25 @@ export default defineComponent({
const router = useRouter();
const siteData = useSiteData();

const CatalogIcon = (icon?: string | null): VNode | null =>
icon && iconComponent ? h(iconComponent, { icon }) : null;

const CatalogLink = ({
title,
path,
icon,
class: className,
}: {
title: string;
path: string;
icon?: string | null;
class: string;
}): VNode =>
h(VPLink, { class: className, to: path }, () => [
CatalogIcon(icon),
title || path,
]);

const shouldIndex = (meta: RouteMeta): boolean => {
const index = <boolean | undefined>meta[AUTO_CATALOG_INDEX_META_KEY];

Expand Down Expand Up @@ -147,7 +154,9 @@ export default defineComponent({

return {
title: <string>meta[AUTO_CATALOG_TITLE_META_KEY] || "",
icon: <string | null | undefined>meta[AUTO_CATALOG_ICON_META_KEY],
icon:
<string | null | undefined>meta[AUTO_CATALOG_ICON_META_KEY] ||
null,
base: path.replace(/\/[^/]+\/?$/, "/"),
order:
<number | null | undefined>meta[AUTO_CATALOG_ORDER_META_KEY] ||
Expand Down Expand Up @@ -235,112 +244,129 @@ export default defineComponent({

const info = computed(() => getCatalogInfo());

return (): VNode =>
h("div", { class: "vp-catalog" }, [
props.hideHeading
? null
: h("h2", { class: "vp-catalog-main-title" }, locale.value.title),

info.value.length
? info.value.map(
({ children = [], icon, path, title }, mainIndex) => [
h(
"h3",
{
id: title,
class: [
"vp-catalog-child-title",
{ "has-children": children.length },
],
},
[
h(
"a",
{
href: `#${title}`,
class: "header-anchor",
"aria-hidden": true,
},
"#",
),
h(VPLink, { class: "vp-catalog-title", to: path }, () => [
props.index ? `${mainIndex + 1}.` : null,
icon && iconComponent ? h(iconComponent, { icon }) : null,
title || path,
]),
return (): VNode => {
const isDeep = info.value.some((item) => item.children);

const items = info.value.map(({ children = [], icon, path, title }) => {
const childLink = CatalogLink({
title,
path,
icon,
class: "vp-catalog-title",
});

return isDeep
? [
h(
"h3",
{
id: title,
class: [
"vp-catalog-child-title",
{ "has-children": children.length },
],
),
children.length
? h(
props.index && props.indexType === "ol" ? "ol" : "ul",
{ class: "vp-catalog-child-catalogs" },
children.map(
({ children = [], icon, path, title }, index) =>
h("li", { class: "vp-child-catalog" }, [
},
[
h(
"a",
{
href: `#${title}`,
class: "header-anchor",
"aria-hidden": true,
},
"#",
),
childLink,
],
),
children.length
? h(
props.index ? "ol" : "ul",
{ class: "vp-child-catalogs" },
children.map(({ children = [], icon, path, title }) =>
h("li", { class: "vp-child-catalog" }, [
h(
"div",
{
class: [
"vp-catalog-sub-title",
{ "has-children": children.length },
],
},
[
h(
"div",
"a",
{
class: [
"vp-catalog-sub-title",
{ "has-children": children.length },
],
href: `#${title}`,
class: "header-anchor",
},
[
h(
"a",
{ href: `#${title}`, class: "header-anchor" },
"#",
),
h(
VPLink,
{ class: "vp-catalog-title", to: path },
() => [
props.index
? `${mainIndex + 1}.${index + 1}`
: null,
icon && iconComponent
? h(iconComponent, { icon })
: null,
title || path,
],
),
],
"#",
),
children.length
? h(
"div",
{ class: "v-sub-catalogs" },
children.map(
({ icon, path, title }, subIndex) =>
h(
VPLink,
{
class: "vp-sub-catalog",
to: path,
},
() => [
props.index &&
props.indexType !== "ol"
? `${mainIndex + 1}.${index + 1}.${
subIndex + 1
}`
: null,
icon && iconComponent
? h(iconComponent, { icon })
: null,
title || path,
],
),
),
)
: null,
]),
),
)
: null,
],
)
: h("p", { class: "vp-empty-catalog" }, locale.value.empty),
]);
h(CatalogLink, {
title,
path,
icon,
class: "vp-catalog-title",
}),
],
),
children.length
? h(
props.index ? "ol" : "div",
{
class: props.index
? "vp-sub-catalogs"
: "vp-sub-catalogs-wrapper",
},
children.map(({ icon, path, title }) => {
const subLink = h(CatalogLink, {
title,
path,
icon,
class: "",
});

return props.index
? h(
"li",
{ class: "vp-sub-catalog" },
subLink,
)
: h(CatalogLink, {
title,
path,
icon,
class: "vp-sub-catalog-link",
});
}),
)
: null,
]),
),
)
: null,
]
: h("div", { class: "vp-catalog-child-title" }, childLink);
});

return h(
"div",
{ class: ["vp-catalog-wrapper", { index: props.index }] },
[
props.hideHeading
? null
: h("h2", { class: "vp-catalog-main-title" }, locale.value.title),
info.value.length
? props.index
? h(
"ol",
{ class: "vp-catalogs" },
items.map((item) => h("li", { class: "vp-catalog" }, item)),
)
: items
: h("p", { class: "vp-empty-catalog" }, locale.value.empty),
],
);
};
},
});
5 changes: 3 additions & 2 deletions packages/auto-catalog/src/client/helpers/component.ts
View file
Expand Up @@ -15,8 +15,9 @@ export const defineAutoCatalogIconComponent = (
autoCatalogIconComponent = options;
};

export const useAutoCatalogIconComponent = (): AutoCatalogIconComponent =>
inject(autoCatalogSymbol)!;
export const useAutoCatalogIconComponent = ():
| AutoCatalogIconComponent
| undefined => inject(autoCatalogSymbol);

export const injectAutoCatalogIconComponent = (app: App): void => {
app.provide(autoCatalogSymbol, autoCatalogIconComponent);
Expand Down

0 comments on commit add17d9

Please sign in to comment.