diff --git a/packages/docs/components/index.md b/packages/docs/components/index.md
index 57fdd85b..5a639ac6 100644
--- a/packages/docs/components/index.md
+++ b/packages/docs/components/index.md
@@ -5,34 +5,32 @@
const { theme: { value: {sidebar } } } = useData();
const components = sidebar['/components/'];
+ const categories = import.meta.glob('./*/index.md', { eager: true });
+ const mod = import.meta.glob(`./*/*/index.md`, { eager: true });
+
+ const sections = Object.values(categories).map((md) => {
+ const { title, relativePath } = md.__pageData;
+ const sectionPath = relativePath.replace(/\/index\.md$/, '/');
+ const components = Object.fromEntries(Object.entries(mod).filter(([,{ __pageData }]) => {
+ return __pageData.filePath.startsWith(sectionPath)
+ }));
+
+ return {
+ title,
+ href: `/${sectionPath}`,
+ components,
+ }
+ });
Components are grouped following the [Atomic Design principles](https://bradfrost.com/blog/post/atomic-web-design/) with an extra `Primitives` group containing components that are not directly usable but should be used to create other components.
-
-
+
-## Primitives
+## {{ section.title }}
-
-
+
+
-## Atoms
-
-
-
-
-## Molecules
-
-
-
-
-## Organisms
-
-
- (
+ BaseClass: typeof Base,
+ message?: string,
+): BaseDecorator {
+ /**
+ * Class.
+ */
+ class Deprecated extends BaseClass {
+ /**
+ * Config.
+ */
+ static config: BaseConfig = {
+ name: 'Deprecated',
+ };
+
+ onMounted() {
+ if (isDev) {
+ console.warn(
+ `The ${this.$options.name} component is deprecated.`,
+ message ? `\n${message}` : '',
+ );
+ }
+ }
+ }
+
+ // @ts-ignore
+ return Deprecated;
+}
diff --git a/packages/ui/molecules/TableOfContent/TableOfContent.ts b/packages/ui/molecules/TableOfContent/TableOfContent.ts
index 06fccd44..ac422ec8 100644
--- a/packages/ui/molecules/TableOfContent/TableOfContent.ts
+++ b/packages/ui/molecules/TableOfContent/TableOfContent.ts
@@ -1,6 +1,7 @@
import { Base } from '@studiometa/js-toolkit';
import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
import { TableOfContentAnchor } from './TableOfContentAnchor.js';
+import { withDeprecation } from '../../decorators/withDeprecation.js';
export interface TableOfContentProps extends BaseProps {
$refs: {
@@ -18,8 +19,11 @@ export interface TableOfContentProps extends BaseProps {
/**
* TableOfContent class.
+ * @deprecated
*/
-export class TableOfContent extends Base {
+export class TableOfContent extends withDeprecation(Base)<
+ T & TableOfContentProps
+> {
/**
* Config.
*/
diff --git a/packages/ui/molecules/TableOfContent/TableOfContentAnchor.ts b/packages/ui/molecules/TableOfContent/TableOfContentAnchor.ts
index 769b4381..b64e5076 100644
--- a/packages/ui/molecules/TableOfContent/TableOfContentAnchor.ts
+++ b/packages/ui/molecules/TableOfContent/TableOfContentAnchor.ts
@@ -1,5 +1,6 @@
import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
import { AnchorScrollTo } from '../../atoms/index.js';
+import { withDeprecation } from '../../decorators/withDeprecation.js';
export interface TableOfContentAnchorProps extends BaseProps {
$options: {
@@ -9,10 +10,11 @@ export interface TableOfContentAnchorProps extends BaseProps {
/**
* TableOfContentAnchor class.
+ * @deprecated
*/
-export class TableOfContentAnchor extends AnchorScrollTo<
- T & TableOfContentAnchorProps
-> {
+export class TableOfContentAnchor extends withDeprecation(
+ AnchorScrollTo,
+) {
/**
* Config.
*/
@@ -52,7 +54,7 @@ export class TableOfContentAnchor extends Ancho
const shouldActivate =
entry.isIntersecting &&
entry.boundingClientRect.y < 100 &&
- entry.boundingClientRect.y > 100;
+ entry.boundingClientRect.y > -100;
this.$el.classList.toggle(this.$options.activeClass, shouldActivate);
this.$emit('should-activate', shouldActivate);
});
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 8b3aa1b4..4e1625f5 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@studiometa/ui",
- "version": "0.2.46",
+ "version": "0.2.47",
"description": "A set of opiniated, unstyled and accessible components",
"publishConfig": {
"access": "public"
@@ -29,7 +29,7 @@
},
"homepage": "https://github.com/studiometa/ui#readme",
"dependencies": {
- "@studiometa/js-toolkit": "^2.10.2",
- "deepmerge": "^4.2.2"
+ "@studiometa/js-toolkit": "^2.12.0",
+ "deepmerge": "^4.3.1"
}
}
-
-
- - {{ child.text }} - -