neko-ui 2.6.7 → 2.7.0

package/es/@moneko/sso/api.md

@@ -1,158 +0,0 @@
-[TOC]
-
-# SSO React 共享状态对象
-
-> Shared Store Object `共享状态对象`
-> 通过 useSyncExternalStore 衔接的外部状态管理
-
-## 安装依赖
-
-```shell
-npm install shared-store-object -S
-# or
-yarn add shared-store-object -S
-```
-
-## 使用方式
-
-> 页面 render 后在任意位置使用, 可通过简单的方式进行创建、修改、回收（回收的对象将无法继续使用）
-
-```jsx
-// 引入 或 import { sso } from '@moneko/react';
-import sso from 'shared-store-object';
-
-// 创建公共状态
-const like = sso({
-  count: 0,
-  inc() {
-    store.count++;
-  },
-});
-
-// 使用
-const App = () => {
-  const { count, inc } = like;
-
-  return (
-    <div>
-      <p>{count}</p>
-      <button onClick={inc}>inc</button>
-      {/* 直接修改 */}
-      <button onClick={() => like.count++}>add</button>
-      {/* 函数函数修改 */}
-      <button onClick={() => like('count', (prev) => prev + 1)}>func</button>
-    </div>
-  );
-};
-
-// 也可以直接在 react 函数外操作
-like.count++;
-```
-
-## 计算属性
-
-> 在第二个入参中配置计算属性
-
-```jsx
-// 使用
-const store = sso(
-  {
-    count: 0,
-    inc() {
-      store.count++;
-    },
-  },
-  // 在这里配置计算属性
-  {
-    age() {
-      return store.count * 2 + 1;
-    },
-  },
-);
-
-const App = () => {
-  const { count, age } = store;
-
-  return (
-    <div>
-      <p>count: {count}</p>
-      <p>age: {age}</p>
-      <button onClick={() => store.inc()}>add</button>
-    </div>
-  );
-};
-```
-
-## 回收
-
-> 当作 react 的 useState 来使用，并在组件卸载时手动回收
-
-```jsx
-// 使用
-const App = () => {
-  const store = useRef(sso({ count: 0 }));
-  // 结构出 deps 对象
-  const { count } = store.current;
-
-  useEffect(() => {
-    return () => {
-      // 回收之后将无法继续使用store
-      store.current();
-    };
-  }, []);
-  return (
-    <div>
-      <p>{count}</p>
-      <button onClick={() => store.count++}>add</button>
-    </div>
-  );
-};
-```
-
-## 配置项
-
-> 通过 `next` 参数传递的 `iteration` 函数决定是否需要进行迭代
-
-### 全局
-
-> 所有的 sso 都将使用这个配置
-
-```javascript
-sso.config({
-  next(iteration, key, data) {
-    console.log('global', key, data);
-    // 不执行 iteration 函数数据将不会改变
-    iteration();
-  },
-});
-```
-
-### 私有
-
-> 为单独的对象设置私有的配置, 权限高于全局配置
-
-```typescript
-const app = sso({
-  count: 0,
-});
-
-app((): Partial<SSOConfig> => {
-  return {
-    next(iteration, key, data) {
-      console.log('app', key, data);
-      // 不执行 iteration 函数数据将不会改变
-      iteration();
-    },
-  };
-});
-```
-
-## 批量更新
-
-> 当使用 React < 18 时使用批量更新。
-
-```javascript
-sso.config({
-  next: ReactDOM.unstable_batchedUpdates,
-});
-```

package/lib/@introduce/api.md

@@ -1,158 +0,0 @@
-[TOC]
-
-# 组件开发说明
-
-!> 这里将会了解到如何开始一个新组件的开发、文档、案例demo
-!> 文档将会通过源码中的 `interface`、`enum` 及对应的 `jsdoc` 实时生成
-
-<div>
-
-```treeview
-项目根目录
-`-- components
-    `-- hero
-        |-- index.tsx 源码
-        `-- README.mdx 生成文档路由 如果你不需要文档, 可以不用创建该文件
-```
-
-</div>
-
-## 初始
-
-!> 下面我们开始开发一个名为 hero 的组件
-!> 在项目根目录/components 下新建一个组件名命名的文件夹, 用于存放 hero 源码
-
-## hero
-
-在 `components` 中新建 `hero` 文件夹
-
-### index.tsx
-
-在 `hero` 中新建文件: `index.tsx`
-
-```tsx
-// 组件源码
-
-/** API
- * @since 1.0.0
- */
-export interface HeroProps {
-  /** 自定义类名 */
-  class?: string;
-  /** 描述文字 */
-  label: string;
-}
-
-function Hero(props: HeroProps) {
-  return <div class={props.class}>{props.label}</div>;
-}
-
-export default Hero;
-```
-
-在 `components/index.ts` 文件中导出
-
-```js
-export { default as Hero, type HeroProps } from './hero';
-```
-
-#### jsdoc
-
-| 属性    | 描述                                                            |
-| ------- | --------------------------------------------------------------- |
-| @since  | 该API在此版本及之后生效                                         |
-| @author | 作者, 一般填写 Github 用户名, 或者邮件地址                      |
-| @ignore | 不生成的列, 比如不需要 `必要` 这列单元格, 则 `@ignore optional` |
-
-### README.mdx
-
-文档路由, 用来生成对应的文档地址及导航菜单
-在 `hero` 中新建文件: `README.mdx`
-
-```md
----
-title: 文档组件菜单标题
-subtitle: 文档组件菜单副标题
-type: 将文档进行分组
-icon: 🔘
-order: 0 # 顺序, 这部分为 yaml 语法
----
-
-### 这是组件文档页面
-
-> 描述
-```
-
-### examples
-
-在 `hero` 中新建文件夹: `examples`
-
-!> examples 下的 \*.md 文件将作为案例代码进行渲染
-
-#### demo1.md
-
-在 `examples` 中新建文件: `demo1.md`
-
-```md
----
-title: 这里描述代码块的标题, 比如 "最简单的使用方式"
-description: 这里对代码块进行详细的说明, 每一个代码块都将作为一个完整的案例进行展示,并且可以直接在页面上修改实时渲染
-order: 1 # 排序
----
-
-<Hero label="label" />
-```
-
-## 注意事项
-
-### cssModule
-
-- **\*.global.less 结尾命名的文件不会启用 cssModule**
-
-- **cssModule 使用时，样式文件中以 - 连接单词，代码中使用时应通过驼峰导入，例如**
-
-  ```less
-  // ./index.less
-  .user-name {
-    color: #000;
-    background-color: #fff;
-  }
-  ```
-
-  ```jsx
-  import styles from './index.less';
-
-  const Demo = () => {
-    return <div class={styles.userName}>{styles.userName}</div>;
-  };
-
-  export default Demo;
-  ```
-
-### 文档
-
-文档地址根据 components 下的 `README.mdx` 文件根据所在目录生成
-
-#### gfm
-
-- **README.mdx 中默认不支持 gfm, 比如 table，如需要如需要使用可通过以下方式导入外部.md 文件在 .mdx 文件中使用**
-
-  ```jsx
-  import readme from './readme.md?raw';
-
-  <n-md text={readme} />;
-  ```
-
-  或者安装 [**remark-gfm**](https://www.npmjs.com/package/remark-gfm), 并在 `config/index.ts` 中配置, 这会导致 bundle 体积变大
-
-  ```js
-  import remarkGfm from 'remark-gfm';
-
-  export default {
-    mdx: {
-      remarkPlugins: [remarkGfm],
-    },
-  };
-  ```
-
-!> 更多 api 请查看 [neko-ui](https://monako97.github.io/neko-ui) 组件

package/lib/@introduce/getting-started/api.md

@@ -1,34 +0,0 @@
-[TOC]
-
-# 快速开始
-
-> 这是一个基于 SolidJS、Typescript 开发的适用于任何技术栈的 WebComponents 组件库, 你可以在其他任意 web 框架中像 `div` 一样使用它
-
-## 安装
-
-```shell
-npm install neko-ui -S
-# or
-yarn add neko-ui -S
-```
-
-## 使用
-
-```jsx
-import 'neko-ui'; // 在使用前引入一次就行, 建议在入口文件进行
-
-function View() {
-  return <n-input />;
-}
-```
-
-## 直接在原生html5、js中使用
-
-```html
-<!-- 引入 CDN 资源 -->
-<script src="https://cdn.jsdelivr.net/npm/neko-ui/lib/index.js"></script>
-<!-- 使用 -->
-<body>
-  <n-input></n-input>
-</body>
-```

package/lib/@introduce/html/doc.md

@@ -1,45 +0,0 @@
-[TOC]
-
-# 在 原生 js 和 html 中使用, 通过 `addEventListener` 进行事件绑定
-
-当案例中的代码为
-
-```jsx
-<n-select
-  label="无后缀,无前缀"
-  options={[
-    { label: 'A', value: 'A' },
-    { label: 'B', value: 'B' },
-  ]}
-  onChange={(e) => {
-    console.log(e.detail);
-  }}
-/>
-```
-
-## 原生 HTML 中对应的写法为
-
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-  </head>
-  <body>
-    <n-select id="select" label="无后缀,无前缀"></n-select>
-  </body>
-  <script>
-    const select = document.querySelector('#select');
-
-    select.options = [
-      { label: 'A', value: 'A' },
-      { label: 'B', value: 'B' },
-    ];
-    select.addEventListener('change', function (e) {
-      console.log(e.detail);
-    });
-  </script>
-</html>
-```

package/lib/@introduce/react/doc.md

@@ -1,49 +0,0 @@
-[TOC]
-
-# 在 React 中使用, 通过 `addEventListener` 进行事件绑定
-
-当案例中的代码为
-
-```jsx
-<n-select
-  label="无后缀,无前缀"
-  options={[
-    { label: 'A', value: 'A' },
-    { label: 'B', value: 'B' },
-  ]}
-  onChange={(e) => {
-    console.log(e.detail);
-  }}
-/>
-```
-
-## React中对应的写法为
-
-```jsx
-import { useEffect, useRef } from 'react';
-import type { SelectElement } from 'neko-ui';
-
-function Demo() {
-  const el = useRef<SelectElement>(null);
-
-  useEffect(() => {
-    if (el.current) {
-      // 设置对象、数组类型的属性
-      el.current.options = [
-        { label: 'A', value: 'A' },
-        { label: 'B', value: 'B' },
-      ];
-      // 绑定事件
-      el.current?.addEventListener('change', (e) => {
-        const [val, item] = e.detail;
-
-        console.log(val, item);
-      });
-    }
-  }, []);
-  // 非函数、对象、数组类型的属性可以直接在jsx标签中设置
-  return <n-select ref={el} label="无后缀,无前缀" />;
-}
-
-export default Demo;
-```

package/lib/@introduce/solid/doc.md

@@ -1,39 +0,0 @@
-[TOC]
-
-# 在 Solid.js 中可直接使用
-
-当案例中的代码为
-
-```jsx
-<n-select
-  label="无后缀,无前缀"
-  options={[
-    { label: 'A', value: 'A' },
-    { label: 'B', value: 'B' },
-  ]}
-  onChange={(e) => {
-    console.log(e.detail);
-  }}
-/>
-```
-
-## Solid.js 中对应的写法为
-
-```tsx
-function Demo() {
-  return (
-    <n-select
-      label="无后缀,无前缀"
-      options={[
-        { label: 'A', value: 'A' },
-        { label: 'B', value: 'B' },
-      ]}
-      onChange={(e) => {
-        console.log(e.detail);
-      }}
-    />
-  );
-}
-
-export default Demo;
-```

package/lib/@introduce/vue/doc.md

@@ -1,54 +0,0 @@
-[TOC]
-
-# 在 Vue 中使用
-
-当案例中的代码为
-
-```jsx
-<n-input onChange={(e) => console.log(e)} />
-```
-
-在 `Vue` 中, 事件绑定需要将 onXxx 替换为 @xxx
-
-## 忽略自定义元素
-
-你需要先在入口处(常见为`app.js`)添加这段代码
-
-### Vue 2
-
-```js
-Vue.config.ignoredElements = [
-  // 忽略所有“ion-”开头的元素 (仅在 vue 2.5+ 支持)
-  /^n-[a-z]/,
-  // 或指定名称, 忽略 n-input 元素
-  'n-input',
-];
-```
-
-### Vue 3
-
-```js
-const app = Vue.createApp({});
-
-app.config.isCustomElement = (tag) => /^n-[a-z]/.test(tag);
-```
-
-## Vue 中对应的写法为
-
-```html
-<template>
-  <n-input @change="handleChange" />
-</template>
-<script>
-  export default {
-    data() {
-      return {};
-    },
-    methods: {
-      handleChange(e) {
-        console.log(e.detail);
-      },
-    },
-  };
-</script>
-```