@yup/taro-ui 0.0.8 → 1.0.0

package/README.md

@@ -1,3 +1,230 @@
 # yp-taro-ui
 
-鱼泡Taro UI实现（抖音小程序）
+鱼泡 Taro UI 组件库（抖音小程序）
+
+## 安装
+
+```bash
+npm install @yup/taro-ui
+# 或
+yarn add @yup/taro-ui
+```
+
+## 按需加载
+
+配合 `babel-plugin-import` 插件实现按需加载，自动引入组件样式。
+
+### 安装插件
+
+```bash
+npm install babel-plugin-import --save-dev
+```
+
+### 配置 babel
+
+在 `babel.config.js` 或 `.babelrc` 中添加：
+
+```js
+{
+  "plugins": [
+    ["import", {
+      "libraryName": "@yup/taro-ui",
+      "libraryDirectory": "es/components",
+      "style": true
+    }]
+  ]
+}
+```
+
+### 使用
+
+配置后可以直接按需引入组件：
+
+```tsx
+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         # 组件样式
+```
+
+### 组件编写规范
+
+1. **命名规范**
+   - 组件目录：小写 + 连字符（如 `date-picker-view`）
+   - 组件名：大驼峰（如 `DatePickerView`）
+   - 样式类名前缀：`ypmini-组件名`（如 `ypmini-button`）
+
+2. **类型定义**
+   - 导出组件的 Props 类型
+   - 使用 JSDoc 注释说明每个属性
+
+```tsx
+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';
+```
+
+### 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` 配置中添加路由映射
+
+---
+
+## 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(r,t,e){return(t=y(t))in r?Object.defineProperty(r,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):r[t]=e,r}function n(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,c=!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){c=!0,o=r}finally{try{if(!l&&null!=e.return&&(a=e.return(),Object(a)!==a))return}finally{if(c)throw o}}return u}}function o(){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 i(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 a(r){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach(function(t){e(r,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach(function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(n,t))})}return r}function u(r,t){if(null==r)return{};var e,n,o=l(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 l(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 c(r,e){return t(r)||n(r,e)||b(r,e)||o()}function f(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 y(r){var t=f(r,"string");return"symbol"==typeof t?t:t+""}function s(r){return s="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},s(r)}function b(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 defineProperty,n as iterableToArrayLimit,o as nonIterableRest,a as objectSpread2,u as objectWithoutProperties,l as objectWithoutPropertiesLoose,c as slicedToArray,f as toPrimitive,y as toPropertyKey,s as typeof,b 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/index.d.ts

@@ -1,10 +1,10 @@
 import { ButtonProps as TaroButtonProps } from '@tarojs/components';
 import React from 'react';
-export interface ButtonProps extends Omit<TaroButtonProps, 'type'> {
+export interface ButtonProps extends Omit<TaroButtonProps, 'type' | 'size'> {
     /**
-     * 按钮样式类型 primary 主题色样式按钮 default 默认样式 secondary 次级样式
+     * 按钮样式类型 主要是颜色控制 primary 主题色样式按钮 default 默认样式 secondary 次级主题色样式 warning 强调警告的颜色（红色背景）
      */
-    styleType?: 'primary' | 'default' | 'secondary';
+    styleType?: 'primary' | 'default' | 'secondary' | "warning";
     /**
      * 是否启用禁用样式(启用禁用样式按钮依然可以点击和disabled有区别 只是样式支持),如果想要按钮有禁用样式 但是依然可点击可以用这个属性
      */
@@ -17,6 +17,22 @@ export interface ButtonProps extends Omit<TaroButtonProps, 'type'> {
      * icon的支持
      */
     icon?: React.ReactNode;
+    /**
+     * 形状控制 default 默认形状，round 大圆角
+     */
+    shape?: "default" | "round";
+    /**
+     * 按钮大小规格 主要是高度控制
+     */
+    size?: "default" | "middle" | "small" | "large";
+    /**
+     * 填充样式 todo solid 背景完全填充的样式，outlined 有外边框，无背景的样式
+     */
+    variant?: "outlined" | 'solid';
+    /**
+     * 幽灵按钮 背景透明的按钮
+     */
+    ghost?: boolean;
 }
 declare const Button: React.FC<ButtonProps>;
 export default Button;

package/es/components/button/index.js

@@ -1 +1 @@
-import{objectWithoutProperties as t,objectSpread2 as a}from"../../_virtual/_rollupPluginBabelHelpers.js";import{j as o}from"../../node_modules/react/jsx-runtime.js";import{Button as i,Text as e}from"@tarojs/components";import r from"../../node_modules/classnames/index.js";var n=["children","styleType","className","block","disabled","disabledStyle","icon"],s=function(s){var l=s.children,d=s.styleType,m=void 0===d?"default":d,c=s.className,p=s.block,u=void 0===p||p,b=s.disabled,y=s.disabledStyle,j=s.icon,f=t(s,n);return o.jsx(i,a(a({className:r("ypmini-taro-button",{"ypmini-taro-button-primary":"primary"===m,"ypmini-taro-button-primary-disabled":"primary"===m&&(b||y),"ypmini-taro-button-secondary":"secondary"===m,"ypmini-taro-button-secondary-disabled":"secondary"===m&&(b||y),"ypmini-taro-button-default":"default"===m,"ypmini-taro-button-default-disabled":"default"===m&&(b||y),"ypmini-taro-button-block":u},c),disabled:b},f),{},{children:j?o.jsxs(e,{className:"ypmini-taro-button-icon-wrapper",children:[o.jsx(e,{className:"ypmini-taro-button-icon",children:j}),o.jsx(e,{className:"ypmini-taro-button-icon-content",children:l})]}):l}))};export{s as default};
+import{objectWithoutProperties as t,objectSpread2 as i}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{Button as n,Text as e}from"@tarojs/components";import r from"classnames";var l=["children","styleType","className","block","disabled","disabledStyle","icon","ghost","shape","size","variant"],s=function(s){var d=s.children,m=s.styleType,u=void 0===m?"default":m,p=s.className,b=s.block,y=void 0===b||b,c=s.disabled,f=s.disabledStyle,h=s.icon,g=s.ghost,v=s.shape,z=void 0===v?"default":v,N=s.size,j=void 0===N?"default":N,w=s.variant,k=void 0===w?"solid":w,S=t(s,l);return a(n,i(i({className:r("ypmini-taro-button",{"ypmini-taro-button-ghost":g,"ypmini-taro-button-outlined":"outlined"===k,"ypmini-taro-button-solid":"solid"===k,"ypmini-taro-button-size-default":"default"===j,"ypmini-taro-button-size-large":"large"===j,"ypmini-taro-button-size-small":"small"===j,"ypmini-taro-button-size-middle":"middle"===j,"ypmini-taro-button-shape-default":"default"===z,"ypmini-taro-button-shape-round":"round"===z,"ypmini-taro-button-primary":"primary"===u,"ypmini-taro-button-primary-disabled":"primary"===u&&(c||f),"ypmini-taro-button-secondary":"secondary"===u,"ypmini-taro-button-secondary-disabled":"secondary"===u&&(c||f),"ypmini-taro-button-default":"default"===u,"ypmini-taro-button-warning":"warning"===u,"ypmini-taro-button-warning-disabled":"warning"===u&&(c||f),"ypmini-taro-button-default-disabled":"default"===u&&(c||f),"ypmini-taro-button-block":y},p),disabled:c},S),{},{children:h?o(e,{className:"ypmini-taro-button-icon-wrapper",children:[a(e,{className:"ypmini-taro-button-icon",children:h}),a(e,{className:"ypmini-taro-button-icon-content",children:d})]}):d}))};export{s as default};

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

@@ -1,84 +1,154 @@
 :root,
 page {
-  --ypmini-hd: 2;
-  --yp-color-primary: #0092ff;
-  --yp-color-text: rgba(0, 0, 0, 0.85);
-  --yp-color-text-light: #0092ff;
-  --yp-color-text-weak: rgba(0, 0, 0, 0.45);
-  --yp-border-color: #e9edf3;
-  --yp-color-text-primary: #333;
-  --yp-color-text-link: var(--yp-color-primary);
-  --yp-color-text-secondary: #666;
-  --yp-color-text-disabled: #ccc;
-  --yp-color-text-placeholder: #999;
-  --yp-font-size-default: calc(17px * var(--ypmini-hd));
-  --yp-radio-circle-checked-color: var(--yp-color-primary);
-  --yp-radio-button-checked-color: var(--yp-color-primary);
-  --yp-checkbox-circle-checked-color: var(--yp-color-primary);
-  --yp-checkbox-button-checked-color: var(--yp-color-primary);
-  --yp-border-radius-base: calc(4px * var(--ypmini-hd));
-  --yp-border-radius-button: calc(8px * var(--ypmini-hd));
-  --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
-}
-:root,
-page {
-  --border-radius: calc(8px * var(--ypmini-hd));
-  --button-height: calc(48px * var(--ypmini-hd));
-  --default-button-background: #f5f7fc;
-  --default-button-text-color: rgba(0, 0, 0, 0.65);
-  --primary-button-background: var(--yp-color-primary);
-  --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;
+  --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 48px;
+  padding: 0 24px;
   border: unset;
   font-weight: bold;
-  font-size: 34px;
+  font-size: var(--ypmini-button-font-size-default);
   width: auto;
-  height: var(--button-height);
-  line-height: var(--button-height);
-  color: var(--yp-color-text);
-  border-radius: var(--border-radius);
+  height: var(--ypmini-button-height-default);
+  line-height: var(--ypmini-button-height-default);
+  color: var(--ypmini-color-text);
+  border-radius: var(--ypmini-border-radius);
   display: inline-block;
   white-space: nowrap;
 }
 .ypmini-taro-button:after {
   display: none;
 }
+.ypmini-taro-button-shape-default {
+  padding: 0 24px;
+}
+.ypmini-taro-button-shape-round {
+  padding: 0px 24px;
+  border-radius: 1998px;
+}
+.ypmini-taro-button-size-large {
+  height: var(--ypmini-button-height-large);
+  line-height: var(--ypmini-button-height-large);
+  font-weight: bold;
+  font-size: var(--ypmini-button-font-size-large);
+}
+.ypmini-taro-button-size-middle {
+  font-weight: 400;
+  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(--ypmini-button-height-default);
+  line-height: var(--ypmini-button-height-default);
+}
+.ypmini-taro-button-size-small {
+  font-weight: 400;
+  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(--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(--ypmini-warning-button-text-color);
+}
+.ypmini-taro-button-warning.ypmini-taro-button-outlined {
+  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(--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(--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(--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/button/style/index.d.ts

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

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

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

package/es/components/checkbox/checkbox-group.d.ts

@@ -1,10 +1,14 @@
 import React from 'react';
-import { CheckboxGroupProps as YpCheckboxGroupProps } from '@yup/taro-checkbox/dist/types/type';
-export interface CheckboxGroupProps extends YpCheckboxGroupProps {
+import { CheckboxGroupProps as YpCheckboxGroupProps, ValueType } from '@yup/taro-checkbox/dist/types/type';
+export interface CheckboxGroupProps extends Omit<YpCheckboxGroupProps, 'onChange'> {
     /**
      * 多选类型
      */
     type?: 'button' | 'default';
+    /**
+     * change事件
+     */
+    onChange?: (value: ValueType) => void;
 }
 declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
 export default CheckboxGroup;

package/es/components/checkbox/checkbox-group.js

@@ -1 +1 @@
-import{objectWithoutProperties as o,objectSpread2 as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{j as r}from"../../node_modules/react/jsx-runtime.js";import t from"../../node_modules/classnames/index.js";import p from"@yup/taro-checkbox";var s=["type","block"],c=function(c){var i=c.type,u=c.block,a=o(c,s);return r.jsx(p.Group,e({className:t("ypmini-checkbox-group",{"ypmini-checkbox-group-button":"button"===i,"ypmini-checkbox-group-block":u})},a))};export{c as default};
+import{objectWithoutProperties as o,objectSpread2 as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as r}from"react/jsx-runtime";import t from"classnames";import n from"../../node_modules/@yup/taro-checkbox/dist/index.js";var p=["type","block","onChange"],a=function(a){var i=a.type,c=a.block,u=a.onChange,m=o(a,p);return r(n.Group,e({onChange:u,className:t("ypmini-checkbox-group",{"ypmini-checkbox-group-button":"button"===i,"ypmini-checkbox-group-block":c})},m))};export{a as default};

package/es/components/checkbox/index.js

@@ -1 +1 @@
-import{objectWithoutProperties as o,objectSpread2 as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{j as r}from"../../node_modules/react/jsx-runtime.js";import t from"../../node_modules/classnames/index.js";import{View as s}from"@tarojs/components";import c from"@yup/taro-checkbox";import i from"./checkbox-group.js";var n=["className","children","type"],m=function(i){var m=i.className,a=i.children,p=i.type,u=void 0===p?"button":p,l=o(i,n);return r.jsx(c,e({className:t("ypmini-checkbox",m),icon:function(o){return"button"===u?r.jsx(s,{className:t("ypmini-checkbox-button",{"ypmini-checkbox-button-checked":o}),children:a}):a}},l))};m.Group=i;export{m as default};
+import{objectWithoutProperties as o,objectSpread2 as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as r}from"react/jsx-runtime";import t from"classnames";import{View as c}from"@tarojs/components";import i from"../../node_modules/@yup/taro-checkbox/dist/index.js";import n from"./checkbox-group.js";var s=["className","children","type"],m=function(n){var m=n.className,a=n.children,p=n.type,u=void 0===p?"button":p,l=o(n,s);return r(i,e({className:t("ypmini-checkbox",m),icon:function(o){return"button"===u?r(c,{className:t("ypmini-checkbox-button",{"ypmini-checkbox-button-checked":o}),children:a}):a}},l))};m.Group=n;export{m as default};

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

@@ -1,34 +1,12 @@
 :root,
-page {
-  --ypmini-hd: 2;
-  --yp-color-primary: #0092ff;
-  --yp-color-text: rgba(0, 0, 0, 0.85);
-  --yp-color-text-light: #0092ff;
-  --yp-color-text-weak: rgba(0, 0, 0, 0.45);
-  --yp-border-color: #e9edf3;
-  --yp-color-text-primary: #333;
-  --yp-color-text-link: var(--yp-color-primary);
-  --yp-color-text-secondary: #666;
-  --yp-color-text-disabled: #ccc;
-  --yp-color-text-placeholder: #999;
-  --yp-font-size-default: calc(17px * var(--ypmini-hd));
-  --yp-radio-circle-checked-color: var(--yp-color-primary);
-  --yp-radio-button-checked-color: var(--yp-color-primary);
-  --yp-checkbox-circle-checked-color: var(--yp-color-primary);
-  --yp-checkbox-button-checked-color: var(--yp-color-primary);
-  --yp-border-radius-base: calc(4px * var(--ypmini-hd));
-  --yp-border-radius-button: calc(8px * var(--ypmini-hd));
-  --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
-}
-:root,
 page {
   --checkbox-button-font-size: calc(17px * var(--ypmini-hd));
   --checkbox-button-border-radius: calc(8px * var(--ypmini-hd));
   --checkbox-button-background-color: #f5f7fc;
   --checkbox-button-text-color: #000000d9;
   --checkbox-button-checked-background-color: #e0f3ff;
-  --checkbox-button-checked-text-color: var(--yp-color-primary);
-  --checkbox-button-checked-border-color: var(--yp-color-primary);
+  --checkbox-button-checked-text-color: var(--ypmini-primary-color);
+  --checkbox-button-checked-border-color: var(--ypmini-primary-color);
   --checkbox-button-height: calc(52px * var(--ypmini-hd));
 }
 .ypmini-checkbox-button {

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

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

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

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