@yup/taro-ui 0.1.0 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # yp-taro-ui
 
-鱼泡Taro UI实现（抖音小程序）
+鱼泡 Taro UI 组件库（抖音小程序）
 
 ## 安装
 
@@ -44,11 +44,225 @@ npm install babel-plugin-import --save-dev
 import { Button, Input } from '@yup/taro-ui';
 ```
 
-插件会自动转换为：
+---
+
+## 开发指南
+
+### 环境要求
+
+- Node.js >= 16
+- npm >= 8 或 yarn >= 1.22
+
+### 开发命令
+
+```bash
+# 安装依赖
+npm install
+
+# 启动文档开发服务（端口 8888）
+npm run dev
+# 或
+npm start
+
+# 构建文档
+npm run build:doc
+
+# 构建组件库
+npm run build:components
+
+# 代码检查
+npm run lint
+```
+
+### 发布说明
+
+```bash
+# 构建并发布（手动更新版本号）
+npm run release
+
+# 自动更新 patch 版本并发布
+npm run release:patch
+```
+
+发布前请确保：
+1. 代码已通过 lint 检查
+2. 组件功能测试通过
+3. 文档已更新
+
+---
+
+## 组件编写规范
+
+### 目录结构
+
+每个组件遵循以下目录结构：
+
+```
+src/components/
+└── button/                    # 组件目录（小写，kebab-case）
+    ├── index.tsx              # 组件主文件
+    ├── demos/                 # 示例目录
+    │   ├── demo1.tsx          # 示例1
+    │   ├── demo2.tsx          # 示例2
+    │   └── ...
+    └── style/                 # 样式目录
+        ├── index.ts           # 样式入口（用于按需加载）导入index.less
+        └── index.less         # 组件样式入口
+```
+
+### 组件编写规范
+
+1. **命名规范**
+   - 组件目录：小写 + 连字符（如 `date-picker-view`）
+   - 组件名：大驼峰（如 `DatePickerView`）
+   - 样式类名前缀：`ypmini-组件名`（如 `ypmini-button`）
+
+2. **类型定义**
+   - 导出组件的 Props 类型
+   - 使用 JSDoc 注释说明每个属性
 
 ```tsx
-import Button from '@yup/taro-ui/es/components/button';
-import '@yup/taro-ui/es/components/button/style';
-import Input from '@yup/taro-ui/es/components/input';
-import '@yup/taro-ui/es/components/input/style';
+export interface ButtonProps {
+  /**
+   * 按钮类型
+   */
+  type?: 'primary' | 'default';
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+}
 ```
+
+3. **组件导出**
+   - 在 `src/index.ts` 中导出组件
+   - 同时导出类型定义
+
+```tsx
+export { default as Button } from './components/button';
+export type { ButtonProps } from './components/button';
+```
+
+4. **样式规范**
+   - 使用 Less 编写样式
+   - 支持 CSS 变量自定义
+   - `style/index.ts` 内容：
+
+```ts
+import './index.less';
+```
+
+> **⚠️ 重要提示：** 每新增一个组件时，需要在 `src/style/index.less` 中手动导入组件的 less 文件，这个样式文件用于提供给全局样式导入。
+
+### Demo 编写规范
+
+```tsx
+/**
+ * title: 示例标题
+ * description: 示例描述
+ */
+export default () => {
+  return (
+    <div style={{ padding: 16 }}>
+      <h5>基础用法</h5>
+      <Button>按钮</Button>
+    </div>
+  );
+};
+```
+
+---
+
+## 文档编写
+
+### 文档目录
+
+```
+docs/components/
+└── button/
+    └── index.md              # 组件文档
+```
+
+### 文档模板
+
+```markdown
+---
+sidebar: true
+toc: content
+---
+
+# Button 按钮
+
+组件描述。
+
+## 何时使用
+
+- 使用场景1
+- 使用场景2
+
+## 示例
+
+<code src="../../../src/components/button/demos/demo1.tsx"></code>
+
+## API
+
+### 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `type` | 按钮类型 | `'primary'` \| `'default'` | `'default'` |
+
+### CSS 变量
+
+| 变量 | 说明 | 默认值 |
+| --- | --- | --- |
+| `--button-color` | 按钮颜色 | `#1890ff` |
+```
+
+### 添加新组件文档
+
+1. 在 `docs/components/` 下创建组件目录和 `index.md`
+2. 在 `.dumirc.ts` 的 `sidebars` 中添加组件导航
+3. 在 `.dumirc.ts` 的 `sidebar` 配置中添加路由映射
+
+---
+
+## 新增组件流程
+
+1. 在 `src/components` 中新增组件文件夹
+2. 在新增的组件文件目录中增加 `index.tsx` 出口
+3. 在新增的组件文件目录中增加 `style` 文件目录
+4. 在 `style` 文件目录中增加 `index.ts` 样式导出入口
+5. 在 `style` 目录下增加 `index.less` 入口作为 less 文件的导入入口
+6. 编写组件
+7. 编写 demo，在组件目录下增加 `demos` 文件目录，并在其中实现 demo
+8. 组件编写完成后在 `src/style/index.less` 中导入组件的 less 文件（提供给全局引入样式的方式使用）
+9. 在根目录 `docs/components` 目录下增加组件文档说明
+10. 在 `.dumirc.ts` 文件中增加文档的配置
+11. `yarn start` 启动文档查看
+
+---
+
+## designWidth 适配说明
+
+`@yup/taro-ui` 的 designWidth 为 **750**。
+
+如果你的项目 designWidth 为 375，显示效果会是两倍大。可以通过修改 Less 变量 `@hd` 进行适配：
+
+```js
+// config/index.js
+module.exports = {
+  // ...
+  less: {
+    modifyVars: {
+      "@hd": "1"
+    }
+  }
+}
+```
+
+---
+
+## License
+
+MIT

package/es/_virtual/_rollupPluginBabelHelpers.js

@@ -1 +1,3 @@
-function r(r,t){(null==t||t>r.length)&&(t=r.length);for(var e=0,n=Array(t);e<t;e++)n[e]=r[e];return n}function t(r){if(Array.isArray(r))return r}function e(t){if(Array.isArray(t))return r(t)}function n(r,t,e){return(t=m(t))in r?Object.defineProperty(r,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):r[t]=e,r}function o(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function i(r,t){var e=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=e){var n,o,i,a,u=[],l=!0,f=!1;try{if(i=(e=e.call(r)).next,0===t){if(Object(e)!==e)return;l=!1}else for(;!(l=(n=i.call(e)).done)&&(u.push(n.value),u.length!==t);l=!0);}catch(r){f=!0,o=r}finally{try{if(!l&&null!=e.return&&(a=e.return(),Object(a)!==a))return}finally{if(f)throw o}}return u}}function a(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function u(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function l(r,t){var e=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})),e.push.apply(e,n)}return e}function f(r){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?l(Object(e),!0).forEach(function(t){n(r,t,e[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(e)):l(Object(e)).forEach(function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(e,t))})}return r}function c(r,t){if(null==r)return{};var e,n,o=y(r,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(n=0;n<i.length;n++)e=i[n],-1===t.indexOf(e)&&{}.propertyIsEnumerable.call(r,e)&&(o[e]=r[e])}return o}function y(r,t){if(null==r)return{};var e={};for(var n in r)if({}.hasOwnProperty.call(r,n)){if(-1!==t.indexOf(n))continue;e[n]=r[n]}return e}function s(r,e){return t(r)||i(r,e)||O(r,e)||a()}function b(r){return e(r)||o(r)||O(r)||u()}function p(r,t){if("object"!=typeof r||!r)return r;var e=r[Symbol.toPrimitive];if(void 0!==e){var n=e.call(r,t||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(r)}function m(r){var t=p(r,"string");return"symbol"==typeof t?t:t+""}function v(r){return v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},v(r)}function O(t,e){if(t){if("string"==typeof t)return r(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(t,e):void 0}}export{r as arrayLikeToArray,t as arrayWithHoles,e as arrayWithoutHoles,n as defineProperty,o as iterableToArray,i as iterableToArrayLimit,a as nonIterableRest,u as nonIterableSpread,f as objectSpread2,c as objectWithoutProperties,y as objectWithoutPropertiesLoose,s as slicedToArray,b as toConsumableArray,p as toPrimitive,m as toPropertyKey,v as typeof,O as unsupportedIterableToArray};
+function r(r,t){(null==t||t>r.length)&&(t=r.length);for(var e=0,n=Array(t);e<t;e++)n[e]=r[e];return n}function t(r){if(Array.isArray(r))return r}function e(t){if(Array.isArray(t))return r(t)}function n(r,t,e,n,o,i,a){try{var u=r[i](a),f=u.value}catch(r){return void e(r)}u.done?t(f):Promise.resolve(f).then(n,o)}function o(r){return function(){var t=this,e=arguments;return new Promise(function(o,i){var a=r.apply(t,e);function u(r){n(a,o,i,u,f,"next",r)}function f(r){n(a,o,i,u,f,"throw",r)}u(void 0)})}}function i(r,t){var e="undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(!e){if(Array.isArray(r)||(e=S(r))||t&&r&&"number"==typeof r.length){e&&(r=e);var n=0,o=function(){};return{s:o,n:function(){return n>=r.length?{done:!0}:{done:!1,value:r[n++]}},e:function(r){throw r},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,u=!1;return{s:function(){e=e.call(r)},n:function(){var r=e.next();return a=r.done,r},e:function(r){u=!0,i=r},f:function(){try{a||null==e.return||e.return()}finally{if(u)throw i}}}}function a(r,t,e){return(t=j(t))in r?Object.defineProperty(r,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):r[t]=e,r}function u(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function f(r,t){var e=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=e){var n,o,i,a,u=[],f=!0,c=!1;try{if(i=(e=e.call(r)).next,0===t){if(Object(e)!==e)return;f=!1}else for(;!(f=(n=i.call(e)).done)&&(u.push(n.value),u.length!==t);f=!0);}catch(r){c=!0,o=r}finally{try{if(!f&&null!=e.return&&(a=e.return(),Object(a)!==a))return}finally{if(c)throw o}}return u}}function c(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function l(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function y(r,t){var e=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})),e.push.apply(e,n)}return e}function s(r){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?y(Object(e),!0).forEach(function(t){a(r,t,e[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(e)):y(Object(e)).forEach(function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(e,t))})}return r}function p(r,t){if(null==r)return{};var e,n,o=b(r,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(n=0;n<i.length;n++)e=i[n],-1===t.indexOf(e)&&{}.propertyIsEnumerable.call(r,e)&&(o[e]=r[e])}return o}function b(r,t){if(null==r)return{};var e={};for(var n in r)if({}.hasOwnProperty.call(r,n)){if(-1!==t.indexOf(n))continue;e[n]=r[n]}return e}function v(){
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+var r,t,e="function"==typeof Symbol?Symbol:{},n=e.iterator||"@@iterator",o=e.toStringTag||"@@toStringTag";function i(e,n,o,i){var f=n&&n.prototype instanceof u?n:u,c=Object.create(f.prototype);return m(c,"_invoke",function(e,n,o){var i,u,f,c=0,l=o||[],y=!1,s={p:0,n:0,v:r,a:p,f:p.bind(r,4),d:function(t,e){return i=t,u=0,f=r,s.n=e,a}};function p(e,n){for(u=e,f=n,t=0;!y&&c&&!o&&t<l.length;t++){var o,i=l[t],p=s.p,b=i[2];e>3?(o=b===n)&&(f=i[(u=i[4])?5:(u=3,3)],i[4]=i[5]=r):i[0]<=p&&((o=e<2&&p<i[1])?(u=0,s.v=n,s.n=i[1]):p<b&&(o=e<3||i[0]>n||n>b)&&(i[4]=e,i[5]=n,s.n=b,u=0))}if(o||e>1)return a;throw y=!0,n}return function(o,l,b){if(c>1)throw TypeError("Generator is already running");for(y&&1===l&&p(l,b),u=l,f=b;(t=u<2?r:f)||!y;){i||(u?u<3?(u>1&&(s.n=-1),p(u,f)):s.n=f:s.v=f);try{if(c=2,i){if(u||(o="next"),t=i[o]){if(!(t=t.call(i,f)))throw TypeError("iterator result is not an object");if(!t.done)return t;f=t.value,u<2&&(u=0)}else 1===u&&(t=i.return)&&t.call(i),u<2&&(f=TypeError("The iterator does not provide a '"+o+"' method"),u=1);i=r}else if((t=(y=s.n<0)?f:e.call(n,s))!==a)break}catch(t){i=r,u=1,f=t}finally{c=1}}return{value:t,done:y}}}(e,o,i),!0),c}var a={};function u(){}function f(){}function c(){}t=Object.getPrototypeOf;var l=[][n]?t(t([][n]())):(m(t={},n,function(){return this}),t),y=c.prototype=u.prototype=Object.create(l);function s(r){return Object.setPrototypeOf?Object.setPrototypeOf(r,c):(r.__proto__=c,m(r,o,"GeneratorFunction")),r.prototype=Object.create(y),r}return f.prototype=c,m(y,"constructor",c),m(c,"constructor",f),f.displayName="GeneratorFunction",m(c,o,"GeneratorFunction"),m(y),m(y,o,"Generator"),m(y,n,function(){return this}),m(y,"toString",function(){return"[object Generator]"}),(v=function(){return{w:i,m:s}})()}function m(r,t,e,n){var o=Object.defineProperty;try{o({},"",{})}catch(r){o=0}m=function(r,t,e,n){function i(t,e){m(r,t,function(r){return this._invoke(t,e,r)})}t?o?o(r,t,{value:e,enumerable:!n,configurable:!n,writable:!n}):r[t]=e:(i("next",0),i("throw",1),i("return",2))},m(r,t,e,n)}function d(r){if(null!=r){var t=r["function"==typeof Symbol&&Symbol.iterator||"@@iterator"],e=0;if(t)return t.call(r);if("function"==typeof r.next)return r;if(!isNaN(r.length))return{next:function(){return r&&e>=r.length&&(r=void 0),{value:r&&r[e++],done:!r}}}}throw new TypeError(typeof r+" is not iterable")}function h(r,e){return t(r)||f(r,e)||S(r,e)||c()}function O(r){return e(r)||u(r)||S(r)||l()}function g(r,t){if("object"!=typeof r||!r)return r;var e=r[Symbol.toPrimitive];if(void 0!==e){var n=e.call(r,t||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(r)}function j(r){var t=g(r,"string");return"symbol"==typeof t?t:t+""}function w(r){return w="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},w(r)}function S(t,e){if(t){if("string"==typeof t)return r(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(t,e):void 0}}export{r as arrayLikeToArray,t as arrayWithHoles,e as arrayWithoutHoles,o as asyncToGenerator,i as createForOfIteratorHelper,a as defineProperty,u as iterableToArray,f as iterableToArrayLimit,c as nonIterableRest,l as nonIterableSpread,s as objectSpread2,p as objectWithoutProperties,b as objectWithoutPropertiesLoose,v as regenerator,m as regeneratorDefine,d as regeneratorValues,h as slicedToArray,O as toConsumableArray,g as toPrimitive,j as toPropertyKey,w as typeof,S as unsupportedIterableToArray};

package/es/components/avatar/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ViewProps, ImageProps } from '@tarojs/components';
+export interface AvatarProps extends ViewProps {
+    /**
+     * 头像路径
+     */
+    src: string;
+    /**
+     * 大小规格
+     */
+    size?: 'default' | 'middle';
+    /**
+     * 头像图片属性
+     */
+    avatarImageProps?: ImageProps;
+}
+declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

package/es/components/avatar/index.js

@@ -0,0 +1 @@
+import{objectWithoutProperties as a,objectSpread2 as r}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as e}from"react/jsx-runtime";import s from"classnames";import{View as t,Image as o}from"@tarojs/components";var i=["src","size","className","avatarImageProps"],m=function(m){var c=m.src,l=m.size,p=void 0===l?"default":l,n=m.className,u=m.avatarImageProps,v=a(m,i);return e(t,r(r({className:s("ypmini-avatar","ypmini-avatar-".concat(p),n)},v),{},{children:e(o,r(r({mode:"aspectFill",className:"ypmini-avatar-image"},u||{}),{},{src:c}))}))};export{m as default};

package/es/components/avatar/style/index.css

@@ -0,0 +1,28 @@
+page,
+:root {
+  --ypmini-avatar-size-default: calc(24px * var(--ypmini-hd));
+  --ypmini-avatar-size-middle: calc(48px * var(--ypmini-hd));
+  --ypmini-avatar-border-radius: 100%;
+}
+.ypmini-avatar {
+  --size: var(--ypmini-avatar-size-default);
+  --border-radius: var(--ypmini-avatar-border-radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  width: var(--size);
+  height: var(--size);
+  border-radius: var(--border-radius);
+}
+.ypmini-avatar-default {
+  --size: var(--ypmini-avatar-size-default);
+}
+.ypmini-avatar-middle {
+  --size: var(--ypmini-avatar-size-middle);
+}
+.ypmini-avatar-image {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}

package/es/components/avatar/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../global/theme-default.less';
+import './index.less';

package/es/components/avatar/style/index.js

@@ -0,0 +1,2 @@
+import '../../../global/theme-default.css';
+import './index.css';

package/es/components/button/style/index.css

@@ -1,47 +1,48 @@
 :root,
 page {
-  --border-radius: calc(8px * var(--ypmini-hd));
-  --button-height-large: calc(48px * var(--ypmini-hd));
-  --button-height-default: calc(44px * var(--ypmini-hd));
-  --button-height-middle: calc(40px * var(--ypmini-hd));
-  --button-height-small: calc(32px * var(--ypmini-hd));
-  --button-font-size-samll: calc(14px * var(--ypmini-hd));
-  --button-font-size-moddle: calc(15px * var(--ypmini-hd));
-  --button-font-size-default: calc(17px * var(--ypmini-hd));
-  --button-font-size-large: calc(17px * var(--ypmini-hd));
-  --default-button-background: #f5f7fc;
-  --default-button-text-color: rgba(0, 0, 0, 0.65);
-  --primary-button-background: var(--ypmini-primary-color);
-  --primary-button-disabled-background: #99d3ff;
-  --primary-button-disabled-text-color: rgba(255, 255, 255, 0.45);
-  --primary-button-text-color: #fff;
-  --secondary-button-background: #00cbff;
-  --secondary-button-text-color: #ffffff;
-  --warning-button-background: #FF5A57;
-  --warning-button-text-color: #ffffff;
-  --warning-button-outlined-color: #E8362E;
-  --primary-button-outlined-color: var(--ypmini-primary-color);
-  --default-button-outlined-color: rgba(0, 0, 0, 0.65);
+  --ypmini-border-radius: calc(8px * var(--ypmini-hd));
+  --ypmini-button-height-large: calc(48px * var(--ypmini-hd));
+  --ypmini-button-height-default: calc(44px * var(--ypmini-hd));
+  --ypmini-button-height-middle: calc(40px * var(--ypmini-hd));
+  --ypmini-button-height-small: calc(32px * var(--ypmini-hd));
+  --ypmini-button-font-size-samll: calc(14px * var(--ypmini-hd));
+  --ypmini-button-font-size-moddle: calc(15px * var(--ypmini-hd));
+  --ypmini-button-font-size-default: calc(17px * var(--ypmini-hd));
+  --ypmini-button-font-size-large: calc(17px * var(--ypmini-hd));
+  --ypmini-default-button-background: #f5f7fc;
+  --ypmini-default-button-text-color: rgba(0, 0, 0, 0.65);
+  --ypmini-default-button-ghost-color: rgba(0, 0, 0, 0.65);
+  --ypmini-primary-button-background: var(--ypmini-primary-color);
+  --ypmini-primary-button-ghost-color: var(--ypmini-primary-color);
+  --ypmini-primary-button-disabled-background: #99d3ff;
+  --ypmini-primary-button-disabled-text-color: rgba(255, 255, 255, 0.45);
+  --ypmini-primary-button-text-color: #fff;
+  --ypmini-secondary-button-background: #00cbff;
+  --ypmini-secondary-button-text-color: #ffffff;
+  --ypmini-secondary-button-ghost-color: #00cbff;
+  --ypmini-warning-button-background: #FF5A57;
+  --ypmini-warning-button-text-color: #ffffff;
+  --ypmini-warning-button-ghost-color: #FF5A57;
+  --ypmini-warning-button-outlined-color: #E8362E;
+  --ypmini-primary-button-outlined-color: var(--ypmini-primary-color);
+  --ypmini-default-button-outlined-color: rgba(0, 0, 0, 0.65);
 }
 .ypmini-taro-button {
   padding: 0 24px;
   border: unset;
   font-weight: bold;
-  font-size: var(--button-font-size-default);
+  font-size: var(--ypmini-button-font-size-default);
   width: auto;
-  height: var(--button-height-default);
-  line-height: var(--button-height-default);
+  height: var(--ypmini-button-height-default);
+  line-height: var(--ypmini-button-height-default);
   color: var(--ypmini-color-text);
-  border-radius: var(--border-radius);
+  border-radius: var(--ypmini-border-radius);
   display: inline-block;
   white-space: nowrap;
 }
 .ypmini-taro-button:after {
   display: none;
 }
-.ypmini-taro-button-ghost {
-  background: transparent;
-}
 .ypmini-taro-button-shape-default {
   padding: 0 24px;
 }
@@ -50,87 +51,104 @@ page {
   border-radius: 1998px;
 }
 .ypmini-taro-button-size-large {
-  height: var(--button-height-large);
-  line-height: var(--button-height-large);
+  height: var(--ypmini-button-height-large);
+  line-height: var(--ypmini-button-height-large);
   font-weight: bold;
-  font-size: var(--button-font-size-large);
+  font-size: var(--ypmini-button-font-size-large);
 }
 .ypmini-taro-button-size-middle {
   font-weight: 400;
-  font-size: var(--button-font-size-middle);
-  height: var(--button-height-middle);
-  line-height: var(--button-height-middle);
+  font-size: var(--ypmini-button-font-size-middle);
+  height: var(--ypmini-button-height-middle);
+  line-height: var(--ypmini-button-height-middle);
 }
 .ypmini-taro-button-size-default {
-  height: var(--button-height-default);
-  line-height: var(--button-height-default);
+  height: var(--ypmini-button-height-default);
+  line-height: var(--ypmini-button-height-default);
 }
 .ypmini-taro-button-size-small {
   font-weight: 400;
-  font-size: var(--button-font-size-middle);
-  height: var(--button-height-small);
-  line-height: var(--button-height-small);
+  font-size: var(--ypmini-button-font-size-middle);
+  height: var(--ypmini-button-height-small);
+  line-height: var(--ypmini-button-height-small);
 }
 .ypmini-taro-button-warning {
-  background: var(--warning-button-background);
-  color: var(--warning-button-text-color);
+  background: var(--ypmini-warning-button-background);
+  color: var(--ypmini-warning-button-text-color);
 }
 .ypmini-taro-button-warning.ypmini-taro-button-warning-disabled {
   opacity: 0.6;
 }
 .ypmini-taro-button-warning.ypmini-taro-button-warning-disabled.ypmini-taro-button-warning.ypmini-taro-button-warning-disabled[disabled] {
-  color: var(--warning-button-text-color);
+  color: var(--ypmini-warning-button-text-color);
 }
 .ypmini-taro-button-warning.ypmini-taro-button-outlined {
-  border: 2px solid #E8362E;
-  color: #E8362E;
+  border: 2px solid var(--ypmini-warning-button-outlined-color);
+  color: var(--ypmini-warning-button-outlined-color);
   background: transparent;
 }
+.ypmini-taro-button-warning.ypmini-taro-button-ghost {
+  background: transparent;
+  color: var(--ypmini-warning-button-ghost-color);
+}
 .ypmini-taro-button-primary {
-  background: var(--primary-button-background);
-  color: var(--primary-button-text-color);
+  background: var(--ypmini-primary-button-background);
+  color: var(--ypmini-primary-button-text-color);
 }
 .ypmini-taro-button-primary.ypmini-taro-button-primary-disabled {
-  color: var(--primary-button-disabled-text-color);
-  background: var(--primary-button-disabled-background);
+  color: var(--ypmini-primary-button-disabled-text-color);
+  background: var(--ypmini-primary-button-disabled-background);
 }
 .ypmini-taro-button-primary.ypmini-taro-button-outlined {
-  border: 2px solid var(--primary-button-outlined-color);
-  color: var(--primary-button-outlined-color);
+  border: 2px solid var(--ypmini-primary-button-outlined-color);
+  color: var(--ypmini-primary-button-outlined-color);
+  background: transparent;
+}
+.ypmini-taro-button-primary.ypmini-taro-button-ghost {
   background: transparent;
+  color: var(--ypmini-primary-button-ghost-color);
 }
 .ypmini-taro-button-default {
-  background: var(--default-button-background);
-  color: var(--default-button-text-color);
+  background: var(--ypmini-default-button-background);
+  color: var(--ypmini-default-button-text-color);
 }
 .ypmini-taro-button-default.ypmini-taro-button-default-disabled {
   opacity: 0.6;
 }
 .ypmini-taro-button-default.ypmini-taro-button-default-disabled.ypmini-taro-button-default.ypmini-taro-button-default-disabled[disabled] {
-  color: var(--default-button-text-color);
+  color: var(--ypmini-default-button-text-color);
 }
 .ypmini-taro-button-default.ypmini-taro-button-outlined {
-  border: 2px solid var(--default-button-outlined-color);
-  color: var(--default-button-outlined-color);
+  border: 2px solid var(--ypmini-default-button-outlined-color);
+  color: var(--ypmini-default-button-outlined-color);
+  background: transparent;
+}
+.ypmini-taro-button-default.ypmini-taro-button-ghost {
   background: transparent;
+  color: var(--ypmini-default-button-ghost-color);
 }
 .ypmini-taro-button-secondary {
-  background: var(--secondary-button-background);
-  color: var(--secondary-button-text-color);
+  background: var(--ypmini-secondary-button-background);
+  color: var(--ypmini-secondary-button-text-color);
 }
 .ypmini-taro-button-secondary.ypmini-taro-button-secondary-disabled {
   opacity: 0.6;
 }
 .ypmini-taro-button-secondary.ypmini-taro-button-secondary-disabled.ypmini-taro-button-secondary.ypmini-taro-button-secondary-disabled[disabled] {
-  color: var(--secondary-button-text-color);
+  color: var(--ypmini-secondary-button-text-color);
 }
 .ypmini-taro-button-secondary.ypmini-taro-button-outlined {
-  border: 2px solid var(--secondary-button-background);
-  color: var(--secondary-button-background);
+  border: 2px solid var(--ypmini-secondary-button-background);
+  color: var(--ypmini-secondary-button-background);
+  background: transparent;
+}
+.ypmini-taro-button-secondary.ypmini-taro-button-ghost {
   background: transparent;
+  color: var(--ypmini-secondary-button-ghost-color);
 }
 .ypmini-taro-button-block {
   display: block;
+  width: 100%;
 }
 .ypmini-taro-button-icon-wrapper {
   display: flex;

package/es/components/city-selector/hooks/useLevel2Multiple.d.ts

@@ -0,0 +1,24 @@
+import { OptionTreeData, ValueType, CitySelectorProps } from '../type';
+export interface UseLevel2MultipleOption {
+    cityMap: {
+        [propsName: ValueType]: OptionTreeData;
+    };
+    defaultValue: ValueType[];
+    value?: ValueType[];
+    municipality: ValueType[];
+    max?: number;
+    onSelect?: CitySelectorProps['onSelect'];
+    onChange?: CitySelectorProps['onChange'];
+    onRemove: (item: OptionTreeData) => Promise<boolean>;
+    beforeSelect: (value: OptionTreeData[], selectedItem: OptionTreeData) => Promise<boolean>;
+}
+declare function useLevel2Multiple({ cityMap, defaultValue, municipality, beforeSelect, onRemove, onSelect, onChange, max, ...rst }: UseLevel2MultipleOption): {
+    handleClear: () => void;
+    handleRemove: (item: OptionTreeData) => Promise<void>;
+    selectedDataTopLevel: OptionTreeData;
+    handleLevel1Click: (item: OptionTreeData) => void;
+    handleLevel2Click: (item: OptionTreeData) => void;
+    level1SelectedData: OptionTreeData | undefined;
+    level2SelectedData: OptionTreeData[] | undefined;
+};
+export default useLevel2Multiple;

package/es/components/city-selector/hooks/useLevel2Multiple.js

@@ -0,0 +1 @@
+import{objectWithoutProperties as n,slicedToArray as e,toConsumableArray as l,asyncToGenerator as r,regenerator as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import u from"react";var a=["cityMap","defaultValue","municipality","beforeSelect","onRemove","onSelect","onChange","max"];function i(i){var o=i.cityMap,c=i.defaultValue;i.municipality;var v=i.beforeSelect,d=i.onRemove,f=i.onSelect,s=i.onChange,p=i.max,m=n(i,a),h=u.useState(),y=e(h,2),b=y[0],S=y[1],I=u.useState(),w=e(I,2),C=w[0],g=w[1],k=function(){var n=r(t().m(function n(e,r){var u;return t().w(function(n){for(;;)switch(n.n){case 0:return n.n=1,v(e,r);case 1:if(n.v){n.n=2;break}return n.a(2);case 2:if(!(p&&(null==e?void 0:e.length)>p)){n.n=3;break}return n.a(2);case 3:u=null==e?void 0:e.map(function(n){return n.id}),f&&(null==f||f(u)),s&&(null==s||s(u)),g(l(e));case 4:return n.a(2)}},n)}));return function(e,l){return n.apply(this,arguments)}}(),x=function(){var n=r(t().m(function n(e){var r;return t().w(function(n){for(;;)switch(n.n){case 0:r=null==e?void 0:e.map(function(n){return n.id}),s&&(null==s||s(r)),g(l(e));case 1:return n.a(2)}},n)}));return function(e){return n.apply(this,arguments)}}(),D=function(){var n=r(t().m(function n(e){var l;return t().w(function(n){for(;;)switch(n.n){case 0:return n.n=1,null==d?void 0:d(e);case 1:if(n.v){n.n=2;break}return n.a(2);case 2:l=null==C?void 0:C.filter(function(n){return n.id!==e.id}),x(l);case 3:return n.a(2)}},n)}));return function(e){return n.apply(this,arguments)}}();u.useEffect(function(){var n,e=null==c?void 0:c.map(function(n){return o[n]});if(g(e),null!=e&&null!==(n=e[0])&&void 0!==n&&n.parentId){var l,r=o[null==e||null===(l=e[0])||void 0===l?void 0:l.parentId];S(r)}},[o]),u.useEffect(function(){if("value"in m){var n,e,l=null==m||null===(n=m.value)||void 0===n?void 0:n.map(function(n){return o[n]});if(g(l),null!=l&&null!==(e=l[0])&&void 0!==e&&e.parentId){var r,t=o[null==l||null===(r=l[0])||void 0===r?void 0:r.parentId];S(t)}}},[o,null==m?void 0:m.value]);var L=u.useMemo(function(){var n;return o[null==C||null===(n=C[0])||void 0===n?void 0:n.parentId]},[C,o]);return{handleClear:function(){x([])},handleRemove:D,selectedDataTopLevel:L,handleLevel1Click:function(n){var e,l;(S(n),null!=n&&null!==(e=n.children)&&void 0!==e&&e[0])&&g([null==n||null===(l=n.children)||void 0===l?void 0:l[0]])},handleLevel2Click:function(n){var e,r;n.parentId===(null==C||null===(e=C[0])||void 0===e?void 0:e.parentId)?null!=C&&null!==(r=C.map(function(n){return n.id}))&&void 0!==r&&r.includes(n.id)?D(n):k([].concat(l(C||[]),[n]),n):k([n],n)},level1SelectedData:b,level2SelectedData:C}}export{i as default};

package/es/components/city-selector/hooks/useLevel2Single.d.ts

@@ -0,0 +1,19 @@
+import { OptionTreeData, ValueType, CitySelectorProps } from '../type';
+export interface UseLevel2SingleOption {
+    cityMap: {
+        [propsName: ValueType]: OptionTreeData;
+    };
+    defaultValue: ValueType;
+    value: ValueType;
+    municipality: ValueType[];
+    onChange?: CitySelectorProps['onChange'];
+    beforeSelect: (selectedItem: OptionTreeData) => Promise<boolean>;
+}
+declare function useLevel2Single({ cityMap, defaultValue, municipality, beforeSelect, onChange, ...rst }: UseLevel2SingleOption): {
+    selectedDataTopLevel: OptionTreeData;
+    handleLevel1Click: (item: OptionTreeData) => void;
+    handleLevel2Click: (item: OptionTreeData) => void;
+    level1SelectedData: OptionTreeData | undefined;
+    level2SelectedData: OptionTreeData | undefined;
+};
+export default useLevel2Single;

package/es/components/city-selector/hooks/useLevel2Single.js

@@ -0,0 +1 @@
+import{objectWithoutProperties as e,slicedToArray as n,asyncToGenerator as l,regenerator as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import a from"react";var u=["cityMap","defaultValue","municipality","beforeSelect","onChange"];function i(i){var r=i.cityMap,o=i.defaultValue;i.municipality;var c=i.beforeSelect,d=i.onChange,v=e(i,u),f=a.useState(),s=n(f,2),p=s[0],m=s[1],h=a.useState(),y=n(h,2),S=y[0],I=y[1],b=function(){var e=l(t().m(function e(n){return t().w(function(e){for(;;)switch(e.n){case 0:return e.n=1,null==c?void 0:c(n);case 1:e.v||d&&(null==d||d(null==n?void 0:n.id)),"value"in v||I(n);case 2:return e.a(2)}},e)}));return function(n){return e.apply(this,arguments)}}();return a.useEffect(function(){var e=r[o];if(I(e),null!=e&&e.parentId){var n=r[null==e?void 0:e.parentId];m(n)}},[r]),a.useEffect(function(){if("value"in v){var e=r[null==v?void 0:v.value];if(I(e),null!=e&&e.parentId){var n=r[null==e?void 0:e.parentId];m(n)}}},[r,null==v?void 0:v.value]),{selectedDataTopLevel:a.useMemo(function(){return r[null==S?void 0:S.parentId]},[S,r]),handleLevel1Click:function(e){(null==e?void 0:e.id)!==(null==p?void 0:p.id)&&function(e){m(e)}(e)},handleLevel2Click:function(e){(null==e?void 0:e.id)!==(null==S?void 0:S.id)&&b(e)},level1SelectedData:p,level2SelectedData:S}}export{i as default};

package/es/components/city-selector/hooks/useMultiple.d.ts

@@ -0,0 +1,28 @@
+import { OptionTreeData, ValueType, CitySelectorProps } from '../type';
+export interface UseMultipleOption {
+    cityMap: {
+        [propsName: ValueType]: OptionTreeData;
+    };
+    defaultValue: ValueType[];
+    value: ValueType[];
+    municipality: ValueType[];
+    max?: number;
+    onChange?: CitySelectorProps['onChange'];
+    onSelect?: CitySelectorProps['onSelect'];
+    onRemove: (item: OptionTreeData) => Promise<boolean>;
+    beforeSelect: (selectedItems: OptionTreeData[], selectedItem: OptionTreeData) => Promise<boolean>;
+}
+declare function useMultiple({ cityMap, defaultValue, municipality, beforeSelect, onSelect, onChange, onRemove, max, ...rst }: UseMultipleOption): {
+    selectedDataSecondaryLevel: OptionTreeData;
+    selectedDataTopLevel: OptionTreeData;
+    level1SelectedData: OptionTreeData | undefined;
+    level2SelectedData: OptionTreeData | undefined;
+    level3SelectedData: OptionTreeData[] | undefined;
+    handleLevel1Click: (item: OptionTreeData) => void;
+    handleLevel2Click: (item: OptionTreeData) => void;
+    handleLevel3Click: (item: OptionTreeData) => void;
+    municipalitySelectedData: OptionTreeData[] | undefined;
+    handleRemove: (item: OptionTreeData) => Promise<void>;
+    handleClear: () => void;
+};
+export default useMultiple;

package/es/components/city-selector/hooks/useMultiple.js

@@ -0,0 +1 @@
+import{objectWithoutProperties as n,slicedToArray as e,toConsumableArray as r,asyncToGenerator as t,regenerator as l}from"../../../_virtual/_rollupPluginBabelHelpers.js";import u from"react";import{isMunicipality as a}from"../util.js";var i=["cityMap","defaultValue","municipality","beforeSelect","onSelect","onChange","onRemove","max"];function o(o){var c=o.cityMap,d=o.defaultValue,v=o.municipality,f=o.beforeSelect,s=o.onSelect,p=o.onChange,m=o.onRemove,h=o.max,I=n(o,i),b=u.useState(),y=e(b,2),S=y[0],k=y[1],w=u.useState(),g=e(w,2),C=g[0],D=g[1],L=u.useState(),M=e(L,2),j=M[0],x=M[1],R=u.useState(),T=e(R,2),A=T[0],E=T[1],P=function(){var n=t(l().m(function n(e){var t;return l().w(function(n){for(;;)switch(n.n){case 0:t=null==e?void 0:e.map(function(n){return n.id}),E(r(e)),k([]),p&&(null==p||p(t));case 1:return n.a(2)}},n)}));return function(e){return n.apply(this,arguments)}}(),V=function(){var n=t(l().m(function n(e,t){var u,a;return l().w(function(n){for(;;)switch(n.n){case 0:return n.n=1,f(e,t);case 1:if(u=n.v,a=null==e?void 0:e.map(function(n){return n.id}),u){n.n=2;break}return n.a(2);case 2:if(!(h&&h<(null==e?void 0:e.length))){n.n=3;break}return n.a(2);case 3:E(r(e)),k([]),s&&(null==s||s(a)),p&&(null==p||p(a));case 4:return n.a(2)}},n)}));return function(e,r){return n.apply(this,arguments)}}(),_=function(n){var e=null==n?void 0:n.map(function(n){return n.id});p&&(null==p||p(e)),k(r(n)),E([])},B=function(){var n=t(l().m(function n(e,t){var u;return l().w(function(n){for(;;)switch(n.n){case 0:return n.n=1,f(e,t);case 1:if(n.v){n.n=2;break}return n.a(2);case 2:if(!(h&&h<(null==e?void 0:e.length))){n.n=3;break}return n.a(2);case 3:u=null==e?void 0:e.map(function(n){return n.id}),s&&(null==s||s(u)),p&&(null==p||p(u)),k(r(e)),E([]);case 4:return n.a(2)}},n)}));return function(e,r){return n.apply(this,arguments)}}(),G=function(){var n=t(l().m(function n(e){var t,u;return l().w(function(n){for(;;)switch(n.n){case 0:if(!a(e.parentId,v)){n.n=3;break}if(e.parentId===(null==S||null===(t=S[0])||void 0===t?void 0:t.parentId)){n.n=1;break}return B([e],e),n.a(2);case 1:if(null==S||null===(u=S.map(function(n){return n.id}))||void 0===u||!u.includes(e.id)){n.n=2;break}return H(e),n.a(2);case 2:return B([].concat(r(S||[]),[e]),e),n.a(2);case 3:x(e);case 4:return n.a(2)}},n)}));return function(e){return n.apply(this,arguments)}}(),H=function(){var n=t(l().m(function n(e){var t,u;return l().w(function(n){for(;;)switch(n.n){case 0:return n.n=1,m(e);case 1:if(n.v){n.n=2;break}return n.a(2);case 2:if(!a(e.parentId,v)){n.n=3;break}return t=null==S?void 0:S.filter(function(n){return n.id!==e.id}),_(r(t)),n.a(2);case 3:u=null==A?void 0:A.filter(function(n){return n.id!==e.id}),P(u);case 4:return n.a(2)}},n)}));return function(e){return n.apply(this,arguments)}}();u.useEffect(function(){var n,e=null==d?void 0:d.map(function(n){return c[n]});if(E(e),null!=e&&null!==(n=e[0])&&void 0!==n&&n.parentId){var r,t=c[null==e||null===(r=e[0])||void 0===r?void 0:r.parentId];x(t),t&&D(c[t.parentId])}},[c]),u.useEffect(function(){if("value"in I){var n,e,r,t,l=null==I||null===(n=I.value)||void 0===n?void 0:n.map(function(n){return c[n]});if(E(l),a(null==l||null===(e=l[0])||void 0===e?void 0:e.parentId,v))return void D(c[null==l||null===(t=l[0])||void 0===t?void 0:t.parentId]);if(null!=l&&null!==(r=l[0])&&void 0!==r&&r.parentId){var u,i=c[null==l||null===(u=l[0])||void 0===u?void 0:u.parentId];x(i),i&&D(c[i.parentId])}}},[c,I,v]);var W=u.useMemo(function(){var n,e,r;return null!=S&&S.length?c[null==S||null===(r=S[0])||void 0===r?void 0:r.parentId]:c[null===(n=c[null==A||null===(e=A[0])||void 0===e?void 0:e.parentId])||void 0===n?void 0:n.parentId]},[c,A,S]);return{selectedDataSecondaryLevel:u.useMemo(function(){var n;return c[null==A||null===(n=A[0])||void 0===n?void 0:n.parentId]},[c,A]),selectedDataTopLevel:W,level1SelectedData:C,level2SelectedData:j,level3SelectedData:A,handleLevel1Click:function(n){n.id!==(null==C?void 0:C.id)&&function(n){var e,r;D(n),a(n.id,v)?(k([null==n||null===(e=n.children)||void 0===e?void 0:e[0]]),x(void 0)):(x(null==n||null===(r=n.children)||void 0===r?void 0:r[0]),k([])),E([])}(n)},handleLevel2Click:function(n){(n.id!==(null==C?void 0:C.id)||a(n.parentId,v))&&G(n)},handleLevel3Click:function(n){!function(n){var e,t;n.parentId===(null==A||null===(e=A[0])||void 0===e?void 0:e.parentId)?null!=A&&null!==(t=A.map(function(n){return n.id}))&&void 0!==t&&t.includes(n.id)?H(n):V([].concat(r(A||[]),[n]),n):V([n],n)}(n)},municipalitySelectedData:S,handleRemove:H,handleClear:function(){null!=S&&S.length?_([]):P([])}}}export{o as default};

package/es/components/city-selector/hooks/useSingle.d.ts

@@ -0,0 +1,23 @@
+import { OptionTreeData, ValueType, CitySelectorProps } from '../type';
+export interface UseSingleOption {
+    cityMap: {
+        [propsName: ValueType]: OptionTreeData;
+    };
+    defaultValue: ValueType;
+    value: ValueType;
+    municipality: ValueType[];
+    onChange?: CitySelectorProps['onChange'];
+    beforeSelect: (item: OptionTreeData) => Promise<boolean>;
+}
+declare function useSingle({ cityMap, value, onChange, defaultValue, municipality, beforeSelect, ...rst }: UseSingleOption): {
+    selectedDataSecondaryLevel: OptionTreeData;
+    municipalitySelectedData: OptionTreeData | undefined;
+    selectedDataTopLevel: OptionTreeData;
+    level1SelectedData: OptionTreeData | undefined;
+    level2SelectedData: OptionTreeData | undefined;
+    level3SelectedData: OptionTreeData | undefined;
+    handleLevel1Click: (item: OptionTreeData) => void;
+    handleLevel2Click: (item: OptionTreeData) => void;
+    handleLevel3Click: (item: OptionTreeData) => void;
+};
+export default useSingle;