@yup/taro-ui 1.0.0 → 1.2.0

package/README.md

@@ -106,8 +106,8 @@ src/components/
     │   ├── demo2.tsx          # 示例2
     │   └── ...
     └── style/                 # 样式目录
-        ├── index.ts           # 样式入口（用于按需加载）
-        └── index.less         # 组件样式
+        ├── index.ts           # 样式入口（用于按需加载）导入index.less
+        └── index.less         # 组件样式入口
 ```
 
 ### 组件编写规范
@@ -152,6 +152,8 @@ export type { ButtonProps } from './components/button';
 import './index.less';
 ```
 
+> **⚠️ 重要提示：** 每新增一个组件时，需要在 `src/style/index.less` 中手动导入组件的 less 文件，这个样式文件用于提供给全局样式导入。
+
 ### Demo 编写规范
 
 ```tsx
@@ -225,6 +227,42 @@ toc: content
 
 ---
 
+## 新增组件流程
+
+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/components/city-selector/style/index.js

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

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

@@ -91,8 +91,8 @@ page {
   margin-left: 0;
 }
 .ypmini-dialog-footer-btn {
-  height: 40px;
-  line-height: 40px;
+  height: 80px;
+  line-height: 80px;
 }
 .ypmini-dialog-btn {
   flex: 1;

package/es/components/icon/style/iconfont.css

@@ -1,11 +1,11 @@
 @font-face {
-  font-family: "iconfont";
+  font-family: "ypiconfont";
   /* Project id 5088009 */
-  src: url('iconfont.woff2?t=1767782477263') format('woff2'), url('iconfont.woff?t=1767782477263') format('woff'), url('iconfont.ttf?t=1767782477263') format('truetype');
+  src: url('https://at.alicdn.com/t/c/font_5088009_asy85y6kx4o.woff2?t=1768016348526') format('woff2'), url('https://at.alicdn.com/t/c/font_5088009_asy85y6kx4o.woff?t=1768016348526') format('woff'), url('https://at.alicdn.com/t/c/font_5088009_asy85y6kx4o.ttf?t=1768016348526') format('truetype');
 }
 .iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
+  font-family: "ypiconfont" !important;
+  font-size: 32px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

package/es/components/media-uploader/style/index.css

@@ -1,5 +1,5 @@
 :root,
-pgae {
+page {
   --ypmini-media-uploader-button-width: calc(106px * var(--ypmini-hd));
   --ypmini-media-uploader-button-height: calc(106px * var(--ypmini-hd));
   --ypmini-media-uploader-button-border-radius: calc(8px * var(--ypmini-hd));

package/es/components/picker-view/style/index.css

@@ -13,6 +13,7 @@ page {
 .ypmini-picker-view-wrapper {
   position: relative;
   height: 100%;
+  min-height: 400px;
 }
 .ypmini-picker-view {
   height: 100%;
@@ -24,11 +25,11 @@ page {
   background: var(--ypmini-picker-view-indicator-background-color);
   z-index: 0;
 }
-.ypmini-picker-view-column::first-child .ypmini-picker-view-indicator {
+.ypmini-picker-view-column:first-child .ypmini-picker-view-indicator {
   border-top-left-radius: var(--ypmini-picker-view-indicator-border-radius);
   border-bottom-left-radius: var(--ypmini-picker-view-indicator-border-radius);
 }
-.ypmini-picker-view-column::last-child .ypmini-picker-view-indicator {
+.ypmini-picker-view-column:last-child .ypmini-picker-view-indicator {
   border-top-right-radius: var(--ypmini-picker-view-indicator-border-radius);
   border-bottom-right-radius: var(--ypmini-picker-view-indicator-border-radius);
 }
@@ -41,7 +42,6 @@ page {
   height: var(--ypmini-picker-view-column-height);
   background: var(--ypmini-picker-view-indicator-background-color);
   z-index: 0;
-  border-radius: 16px;
   border-bottom: unset;
   border-top: unset;
 }

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

@@ -55,7 +55,7 @@ page {
   border-radius: var(--ypmini-popup-border-radius) var(--ypmini-popup-border-radius) 0 0;
 }
 .ypmini-popup-header {
-  padding: 16px;
+  padding: 32px;
   display: flex;
   max-width: 100%;
   align-items: center;
@@ -65,7 +65,7 @@ page {
   color: var(--ypmini-popup-cancel-text-font-color);
   font-weight: 400;
   font-size: var(--ypmini-popup-cancel-text-fontsize);
-  flex: 0 0 56px;
+  flex: 0 0 60px;
   white-space: nowrap;
   text-align: left;
 }
@@ -85,7 +85,7 @@ page {
   color: var(--ypmini-popup-confirm-text-font-color);
   font-weight: 400;
   font-size: var(--ypmini-popup-confirm-text-fontsize);
-  flex: 0 0 56px;
+  flex: 0 0 60px;
   white-space: nowrap;
   text-align: right;
 }

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

@@ -0,0 +1,54 @@
+:root,
+page {
+  --radio-button-font-size: calc(17px * var(--ypmini-hd));
+  --radio-button-border-radius: calc(8px * var(--ypmini-hd));
+  --radio-button-background-color: #f5f7fc;
+  --radio-button-text-color: #000000d9;
+  --radio-button-checked-background-color: #e0f3ff;
+  --radio-button-checked-text-color: var(--ypmini-primary-color);
+  --radio-button-checked-border-color: var(--ypmini-primary-color);
+  --radio-button-height: calc(52px * var(--ypmini-hd));
+  --radio-default-size: calc(16px * var(--ypmini-hd));
+}
+.ypmini-taro-radio-default-inner {
+  width: var(--radio-default-size);
+  height: var(--radio-default-size);
+  border-radius: 100%;
+}
+.ypmini-taro-radio-default-inner-checked::before {
+  content: "☑️";
+}
+.ypmini-taro-radio-button-inner {
+  background-color: var(--radio-button-background-color);
+  color: var(--radio-button-text-color);
+  font-size: var(--radio-button-font-size);
+  text-align: center;
+  padding: 0px 32px;
+  height: var(--radio-button-height);
+  line-height: var(--radio-button-height);
+  box-sizing: border-box;
+  border-radius: var(--radio-button-border-radius);
+}
+.ypmini-taro-radio-button-inner-checked {
+  background-color: var(--radio-button-checked-background-color);
+  color: var(--radio-button-checked-text-color);
+  border-color: var(--radio-button-checked-border-color);
+  border-width: 2px;
+  border-style: solid;
+}
+.ypmini-radio-group {
+  display: flex;
+  width: 100%;
+}
+.ypmini-radio-group-block {
+  display: block;
+}
+.ypmini-radio-group-button {
+  display: flex;
+}
+.ypmini-radio-group .ypmini-taro-radio-button {
+  flex: 1;
+}
+.ypmini-radio-group .ypmini-taro-radio:not(:first-child) {
+  margin-left: 24px;
+}

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

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

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

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

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

@@ -1,6 +1,16 @@
 import React from 'react';
-import { SwitchProps as TaroSwitchProps } from '@tarojs/components';
-export interface SwitchProps extends TaroSwitchProps {
+import { ViewProps } from '@tarojs/components';
+export interface SwitchProps extends Omit<ViewProps, 'onChange'> {
+    /** 是否选中 */
+    checked?: boolean;
+    /** 默认是否选中 */
+    defaultChecked?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 开关打开时的背景颜色 */
+    color?: string;
+    /** 状态改变时触发 */
+    onChange?: (checked: boolean) => void;
 }
 declare const Switch: React.FC<SwitchProps>;
 export default Switch;

package/es/components/switch/index.js

@@ -1 +1 @@
-import{objectWithoutProperties as r,objectSpread2 as a}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as o}from"react/jsx-runtime";import s from"classnames";import{Switch as t}from"@tarojs/components";var e=["className"],m=function(m){var i=m.className,c=r(m,e);return o(t,a({className:s("ypmini-switch",i),color:"#0092ff"},c))};export{m as default};
+import{objectWithoutProperties as e,slicedToArray as i,objectSpread2 as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a}from"react/jsx-runtime";import{useState as c,useEffect as r}from"react";import s from"classnames";import{View as t}from"@tarojs/components";var l=["className","style","checked","defaultChecked","disabled","color","onChange"],n=function(n){var d=n.className,m=n.style,h=n.checked,p=n.defaultChecked,u=void 0!==p&&p,f=n.disabled,y=void 0!==f&&f,v=n.color,k=n.onChange,b=e(n,l),j=c(u),w=i(j,2),C=w[0],N=w[1],g=void 0!==h,x=g?h:C;r(function(){g||N(u)},[u,g]);var P=o(o({},m),x&&v?{"--ypmini-switch-checked-color":v}:{});return a(t,o(o({className:s("ypmini-switch",d,{"ypmini-switch-checked":x,"ypmini-switch-disabled":y}),style:P,onClick:function(){if(!y){var e=!x;g||N(e),null==k||k(e)}}},b),{},{children:a(t,{className:"ypmini-switch-handle"})}))};export{n as default};

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

@@ -1,38 +1,45 @@
 :root,
 page {
-  --ypmini-witch-defalt-background-color: #e9edf3;
-  --ypmini-switch-inner-size: calc(var(--ypmini-hd) * 16px);
-  --yomini-switch-border-radius: calc(var(--ypmini-hd) * 12px);
-  --yomini-switch-width: calc(var(--ypmini-hd) * 24px);
-  --yomini-switch-height: calc(var(--ypmini-hd) * 48px);
+  --ypmini-switch-width: calc(var(--ypmini-hd) * 48px);
+  --ypmini-switch-height: calc(var(--ypmini-hd) * 24px);
+  --ypmini-switch-border-radius: calc(var(--ypmini-hd) * 12px);
+  --ypmini-switch-handle-size: calc(var(--ypmini-hd) * 18px);
+  --ypmini-switch-handle-margin: calc(var(--ypmini-hd) * 3px);
+  --ypmini-switch-background-color: #e9edf3;
+  --ypmini-switch-checked-color: var(--ypmini-primary-color);
+  --ypmini-switch-handle-color: #fff;
+  --ypmini-switch-duration: 200ms;
+  --ypmini-switch-disabled-opacity: 0.4;
 }
 .ypmini-switch {
-  height: var(--yomini-switch-width);
-  width: var(--yomini-switch-height);
-  border-radius: var(--yomini-switch-border-radius);
-}
-.ypmini-switch .weui-switch {
-  height: var(--yomini-switch-width);
-  width: var(--yomini-switch-height);
-  border-radius: var(--yomini-switch-border-radius);
-}
-.ypmini-switch .weui-switch:checked {
-  background-color: var(--ypmini-primary-color);
-}
-.ypmini-switch .weui-switch:checked:after {
-  transform: translate(46px);
-}
-.ypmini-switch .weui-switch::before,
-.ypmini-switch .weui-switch::after {
-  width: var(--ypmini-switch-inner-size);
-  height: var(--ypmini-switch-inner-size);
-  border-radius: var(--ypmini-switch-inner-size);
-  left: 8px;
-}
-.ypmini-switch .weui-switch:before {
-  display: none;
-  background-color: var(--ypmini-witch-defalt-background-color);
-}
-.ypmini-switch .weui-switch::after {
-  top: 6px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: var(--ypmini-switch-width);
+  height: var(--ypmini-switch-height);
+  border-radius: var(--ypmini-switch-border-radius);
+  background-color: var(--ypmini-switch-background-color);
+  transition: background-color var(--ypmini-switch-duration) ease;
+  cursor: pointer;
+}
+.ypmini-switch-checked {
+  background-color: var(--ypmini-switch-checked-color);
+}
+.ypmini-switch-checked .ypmini-switch-handle {
+  transform: translateX(calc(var(--ypmini-switch-width) - var(--ypmini-switch-handle-size) - var(--ypmini-switch-handle-margin) * 2));
+}
+.ypmini-switch-disabled {
+  opacity: var(--ypmini-switch-disabled-opacity);
+  cursor: not-allowed;
+}
+.ypmini-switch-handle {
+  position: absolute;
+  left: var(--ypmini-switch-handle-margin);
+  width: var(--ypmini-switch-handle-size);
+  height: var(--ypmini-switch-handle-size);
+  border-radius: 50%;
+  background-color: var(--ypmini-switch-handle-color);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform var(--ypmini-switch-duration) ease;
 }

package/es/style/index.css

@@ -19,6 +19,34 @@ page {
   --ypmini-font-size-mini: calc(13px * var(--ypmini-hd));
   --ypmini-mask-background: rgba(0, 0, 0, 0.65);
 }
+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%;
+}
 :root,
 page {
   --ypmini-border-radius: calc(8px * var(--ypmini-hd));
@@ -230,6 +258,275 @@ page {
   margin-top: 0px;
 }
 :root,
+page {
+  --ypmini-city-selector-column-item-height: calc(48px * var(--ypmini-hd));
+  --ypmini-city-selector-column-item-font-size: var(--ypmini-font-size-default);
+}
+.ypmini-city-selector-wrapper {
+  position: relative;
+  height: 100%;
+  border-top: 1px solid var(--ypmini-border-color);
+}
+.ypmini-city-selector {
+  display: flex;
+  height: 100%;
+}
+.ypmini-city-selector-column {
+  flex: 1;
+}
+.ypmini-city-selector-column.ypmini-city-selector-column-secondary {
+  flex: 0 0 50%;
+}
+.ypmini-city-selector-column.ypmini-city-selector-column-secondary:first-child {
+  flex: 0 0 50%;
+}
+.ypmini-city-selector-column:first-child {
+  flex: 0 0 33.33%;
+}
+.ypmini-city-selector-column:not(:first-child):not(:last-child) {
+  border-right: 1px solid var(--ypmini-border-color);
+}
+.ypmini-city-selector-column-item-active {
+  font-weight: bold;
+  color: var(--ypmini-primary-color);
+}
+.ypmini-city-selector-column-1 {
+  background: #f5f6fa;
+}
+.ypmini-city-selector-column-1 .ypmini-city-selector-column-item-active {
+  position: relative;
+  background: #fff;
+}
+.ypmini-city-selector-column-1 .ypmini-city-selector-column-item-active:before {
+  position: absolute;
+  content: " ";
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 6px;
+  height: 40px;
+  border-radius: 0px 4px 4px 0px;
+  background: var(--ypmini-primary-color);
+}
+.ypmini-city-selector-column-item {
+  position: relative;
+  height: var(--ypmini-city-selector-column-item-height);
+  display: flex;
+  align-items: center;
+  padding-left: 24px;
+  font-size: var(--ypmini-city-selector-column-item-font-size);
+}
+.ypmini-city-selector-count-badge {
+  position: absolute;
+  right: 24px;
+  width: 28px;
+  height: 28px;
+  background: var(--ypmini-primary-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 20px;
+  color: #fff;
+  border-radius: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ypmini-city-selector-dot-badge {
+  position: absolute;
+  border-radius: 100%;
+  top: 50%;
+  right: 24px;
+  width: 12px;
+  height: 12px;
+  transform: translateY(-50%);
+  background: var(--ypmini-primary-color);
+}
+.ypmini-city-selector-checked-icon {
+  font-size: 32px;
+  position: absolute;
+  right: 24px;
+  color: var(--ypmini-primary-color);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ypmini-city-selector-panel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 24px;
+  border-radius: 24px 24px 0px 0px;
+  background: #ffffff;
+  box-shadow: 0px -4px 8px rgba(50, 52, 60, 0.1);
+}
+.ypmini-city-selector-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.ypmini-city-selector-panel-title {
+  color: var(--ypmini-color-text);
+  font-weight: bold;
+  font-size: 32px;
+}
+.ypmini-city-selector-panel-count {
+  color: rgba(0, 0, 0, 0.45);
+  font-weight: 400;
+  font-size: 28px;
+}
+.ypmini-city-selector-panel-selected {
+  margin-top: 8px;
+  margin-left: -16px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.ypmini-city-selector-panel-selected-item {
+  margin-left: 16px;
+  margin-top: 16px;
+  border-radius: 8px;
+  padding: 0px 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 56px;
+  background: var(--ypmini-primary-secondary-color);
+  color: var(--ypmini-primary-color);
+  font-weight: 400;
+  font-size: var(--ypmini-font-size-mini);
+  white-space: nowrap;
+}
+.ypmini-city-selector-panel-selected-item .ypmini-city-selector-panel-selected-item-close-icon {
+  font-size: 24px;
+  margin-left: 8px;
+}
+.ypmini-city-selector-panel-footer {
+  display: flex;
+  margin-top: 24px;
+}
+.ypmini-city-selector-panel-footer .ypmini-city-selector-panel-footer-btn-clear {
+  width: 220px;
+}
+.ypmini-city-selector-panel-footer .ypmini-taro-button:not(:first-child) {
+  margin-left: 20px;
+}
+.ypmini-datepicker-view {
+  height: 100%;
+}
+:root,
+page {
+  --ypmini-dialog-background: #fff;
+  --ypmini-dialog-border-radius: calc(12px * var(--ypmini-hd));
+  --ypmini-dialog-mask-background: var(--ypmini-mask-background);
+  --ypmini-dialog-z-index: 1100;
+  --ypmini-dialog-duration: 200ms;
+  --ypmini-dialog-width: calc(300px * var(--ypmini-hd));
+  --ypmini-dialog-title-font-size: var(--ypmini-font-size-large);
+  --ypmini-dialog-title-color: rgba(0, 0, 0, 0.85);
+  --ypmini-dialog-content-font-size: var(--ypmini-font-size-default);
+  --ypmini-dialog-content-color: rgba(0, 0, 0, 0.65);
+  --ypmini-dialog-btn-font-size: var(--ypmini-font-size-default);
+  --ypmini-dialog-btn-cancel-color: rgba(0, 0, 0, 0.65);
+  --ypmini-dialog-btn-confirm-color: var(--ypmini-primary-color);
+}
+.ypmini-dialog-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--ypmini-dialog-z-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+.ypmini-dialog-wrapper-visible {
+  pointer-events: auto;
+}
+.ypmini-dialog-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--ypmini-dialog-mask-background);
+  opacity: 0;
+  transition: opacity var(--ypmini-dialog-duration) ease;
+}
+.ypmini-dialog-mask-visible {
+  opacity: 1;
+}
+.ypmini-dialog {
+  padding: 48px 32px 32px 32px;
+  position: relative;
+  width: var(--ypmini-dialog-width);
+  background: var(--ypmini-dialog-background);
+  border-radius: var(--ypmini-dialog-border-radius);
+  overflow: hidden;
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity var(--ypmini-dialog-duration) ease, transform var(--ypmini-dialog-duration) ease;
+}
+.ypmini-dialog-visible {
+  opacity: 1;
+  transform: scale(1);
+}
+.ypmini-dialog-header {
+  text-align: center;
+  font-size: var(--ypmini-dialog-title-font-size);
+  font-weight: bold;
+  color: var(--ypmini-dialog-title-color);
+  line-height: 48px;
+}
+.ypmini-dialog-close {
+  font-size: 48px;
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ypmini-dialog-body {
+  margin-top: 24px;
+  margin-bottom: 32px;
+  text-align: center;
+  font-size: var(--ypmini-dialog-content-font-size);
+  color: var(--ypmini-dialog-content-color);
+  line-height: 1.6;
+  word-break: break-word;
+}
+.ypmini-dialog-footer {
+  display: flex;
+}
+.ypmini-dialog-footer.ypmini-dialog-footer-vertical {
+  display: block;
+}
+.ypmini-dialog-footer.ypmini-dialog-footer-vertical .ypmini-dialog-btn:not(:first-child) {
+  margin-top: 24px;
+  margin-left: 0;
+}
+.ypmini-dialog-footer-btn {
+  height: 80px;
+  line-height: 80px;
+}
+.ypmini-dialog-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--ypmini-dialog-btn-font-size);
+}
+.ypmini-dialog-btn:not(:first-child) {
+  margin-left: 22px;
+}
+.ypmini-dialog-btn-cancel {
+  color: var(--ypmini-dialog-btn-cancel-color);
+}
+.ypmini-dialog-btn-confirm {
+  color: var(--ypmini-dialog-btn-confirm-color);
+  font-weight: bold;
+}
+:root,
 page {
   --form-item-label-width: calc(60px * var(--ypmini-hd));
 }
@@ -264,13 +561,13 @@ page {
   font-size: 38px;
 }
 @font-face {
-  font-family: "iconfont";
+  font-family: "ypiconfont";
   /* Project id 5088009 */
-  src: url('iconfont.woff2?t=1767782477263') format('woff2'), url('iconfont.woff?t=1767782477263') format('woff'), url('iconfont.ttf?t=1767782477263') format('truetype');
+  src: url('https://at.alicdn.com/t/c/font_5088009_asy85y6kx4o.woff2?t=1768016348526') format('woff2'), url('https://at.alicdn.com/t/c/font_5088009_asy85y6kx4o.woff?t=1768016348526') format('woff'), url('https://at.alicdn.com/t/c/font_5088009_asy85y6kx4o.ttf?t=1768016348526') format('truetype');
 }
 .iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
+  font-family: "ypiconfont" !important;
+  font-size: 32px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -418,6 +715,252 @@ page {
   font-size: 32px;
 }
 :root,
+page {
+  --ypmini-media-uploader-button-width: calc(106px * var(--ypmini-hd));
+  --ypmini-media-uploader-button-height: calc(106px * var(--ypmini-hd));
+  --ypmini-media-uploader-button-border-radius: calc(8px * var(--ypmini-hd));
+  --ypmini-media-uploader-button-border-color: #e9edf3;
+  --ypmini-media-uploader-horizal-sapce: calc(12px * var(--ypmini-hd));
+  --ypmini-media-uploader-vertical-sapce: calc(12px * var(--ypmini-hd));
+}
+.ypmini-media-uploader-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--ypmini-media-uploader-vertical-sapce));
+  margin-left: calc(-1 * var(--ypmini-media-uploader-horizal-sapce));
+}
+.ypmini-media-uploader-cell {
+  width: var(--ypmini-media-uploader-button-width);
+  height: var(--ypmini-media-uploader-button-height);
+  border-radius: var(--ypmini-media-uploader-button-border-radius);
+  border: 2px dashed var(--ypmini-media-uploader-button-border-color);
+  overflow: hidden;
+  margin-top: var(--ypmini-media-uploader-vertical-sapce);
+  margin-left: var(--ypmini-media-uploader-horizal-sapce);
+  border: unset;
+  position: relative;
+}
+.ypmini-media-uploader-cell.ypmini-media-uploader-cell-single {
+  margin-top: 0;
+  margin-left: 0;
+}
+.ypmini-media-uploader-cell-delete {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+  height: 48px;
+  width: 48px;
+  border-radius: 0px 16px 0px 16px;
+  background: rgba(0, 0, 0, 0.65);
+}
+.ypmini-media-uploader-cell-delete .ypmini-media-uploader-cell-delete-icon {
+  font-size: 32px;
+  color: #fff;
+}
+.ypmini-media-uploader-image-view {
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+}
+.ypmini-media-uploader-process-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.65);
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ypmini-media-uploader-process-bar {
+  width: calc(100% - (34px * var(--ypmini-hd)));
+  height: 12px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.45);
+}
+.ypmini-media-uploader-process-bar-inner {
+  height: 100%;
+  width: 30%;
+  border-radius: 6px;
+  background: #ffffff;
+}
+.ypmini-media-uploader-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ypmini-media-uploader-button-width);
+  height: var(--ypmini-media-uploader-button-height);
+  border-radius: var(--ypmini-media-uploader-button-border-radius);
+  border: 2px dashed var(--ypmini-media-uploader-button-border-color);
+}
+.ypmini-media-uploader-button.ypmini-media-uploader-button-single {
+  margin-top: 0;
+  margin-left: 0;
+}
+.ypmini-media-uploader-button .ypmini-media-uploader-icon {
+  font-size: 66px;
+  color: #e9edf3;
+}
+:root,
+page {
+  --ypmini-picker-view-column-font-size: var(--ypmini-font-size-large);
+  --ypmini-picker-view-column-font-color: #00000040;
+  --ypmini-picker-view-column-active-fot-color: ##000000a6;
+  --ypmini-picker-view-column-active-font-size: var(--ypmini-font-size-max);
+  --ypmini-picker-view-column-height: calc(var(--ypmini-hd) * 52px);
+  --ypmini-picker-view-indicator-background-color: #f5f7fc;
+  --ypmini-picker-view-indicator-border-radius: calc(var(--ypmini-hd) * 8px);
+  --ypmini-picker-view-disabled-mask-index: 100;
+  --ypmini-picker-view-disabled-mask-background-color: rgba(255, 255, 255, 0.6);
+}
+.ypmini-picker-view-wrapper {
+  position: relative;
+  height: 100%;
+  min-height: 400px;
+}
+.ypmini-picker-view {
+  height: 100%;
+}
+.ypmini-picker-view-column {
+  z-index: 20;
+}
+.ypmini-picker-view-column .ypmini-picker-view-indicator {
+  background: var(--ypmini-picker-view-indicator-background-color);
+  z-index: 0;
+}
+.ypmini-picker-view-column:first-child .ypmini-picker-view-indicator {
+  border-top-left-radius: var(--ypmini-picker-view-indicator-border-radius);
+  border-bottom-left-radius: var(--ypmini-picker-view-indicator-border-radius);
+}
+.ypmini-picker-view-column:last-child .ypmini-picker-view-indicator {
+  border-top-right-radius: var(--ypmini-picker-view-indicator-border-radius);
+  border-bottom-right-radius: var(--ypmini-picker-view-indicator-border-radius);
+}
+.ypmini-picker-view-column-item {
+  height: var(--ypmini-picker-view-column-height);
+  line-height: var(--ypmini-picker-view-column-height);
+  font-size: var(--ypmini-picker-view-column-font-size);
+}
+.ypmini-picker-view-indicator {
+  height: var(--ypmini-picker-view-column-height);
+  background: var(--ypmini-picker-view-indicator-background-color);
+  z-index: 0;
+  border-bottom: unset;
+  border-top: unset;
+}
+.ypmini-picker-view-indicator::before {
+  display: none;
+}
+.ypmini-picker-view-indicator::after {
+  display: none;
+}
+.ypmini-picker-view-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: var(--ypmini-picker-view-disabled-mask-index);
+  background-color: var(--ypmini-picker-view-disabled-mask-background-color);
+}
+:root,
+page {
+  --ypmini-popup-background: #fff;
+  --ypmini-popup-border-radius: calc(12px * var(--ypmini-hd));
+  --ypmini-popup-mask-background: rgba(0, 0, 0, 0.5);
+  --ypmini-popup-z-index: 1000;
+  --ypmini-popup-duration: 300ms;
+  --ypmini-popup-title-font-size: var(--ypmini-font-size-large);
+  --ypmini-popup-title-font-color: rgba(0, 0, 0, 0.85);
+  --ypmini-popup-confirm-text-font-color: var(--ypmini-primary-color);
+  --ypmini-popup-cancel-text-font-color: rgba(0, 0, 0, 0.65);
+  --ypmini-popup-confirm-text-font-size: var(--ypmini-font-size-default);
+  --ypmini-popup-cancel-text-font-size: var(--ypmini-font-size-default);
+}
+.ypmini-popup-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--ypmini-popup-z-index);
+  pointer-events: none;
+}
+.ypmini-popup-wrapper-visible {
+  pointer-events: auto;
+}
+.ypmini-popup-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--ypmini-popup-mask-background);
+  opacity: 0;
+  transition: opacity var(--ypmini-popup-duration) ease;
+}
+.ypmini-popup-mask-visible {
+  opacity: 1;
+}
+.ypmini-popup {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--ypmini-popup-background);
+  transform: translateY(100%);
+  transition: transform var(--ypmini-popup-duration) ease;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+.ypmini-popup-visible {
+  transform: translateY(0);
+}
+.ypmini-popup-round {
+  border-radius: var(--ypmini-popup-border-radius) var(--ypmini-popup-border-radius) 0 0;
+}
+.ypmini-popup-header {
+  padding: 32px;
+  display: flex;
+  max-width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+.ypmini-popup-header-cancel {
+  color: var(--ypmini-popup-cancel-text-font-color);
+  font-weight: 400;
+  font-size: var(--ypmini-popup-cancel-text-fontsize);
+  flex: 0 0 60px;
+  white-space: nowrap;
+  text-align: left;
+}
+.ypmini-popup-header-title {
+  flex: 1;
+  text-align: center;
+  color: var(--ypmini-popup-title-font-color);
+  font-weight: 500;
+  font-size: var(--ypmini-font-size-large);
+  margin-left: 44px;
+  margin-right: 44px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ypmini-popup-header-confirm {
+  color: var(--ypmini-popup-confirm-text-font-color);
+  font-weight: 400;
+  font-size: var(--ypmini-popup-confirm-text-fontsize);
+  flex: 0 0 60px;
+  white-space: nowrap;
+  text-align: right;
+}
+:root,
 page {
   --radio-button-font-size: calc(17px * var(--ypmini-hd));
   --radio-button-border-radius: calc(8px * var(--ypmini-hd));
@@ -471,6 +1014,146 @@ page {
 .ypmini-radio-group .ypmini-taro-radio:not(:first-child) {
   margin-left: 24px;
 }
+.ypmini-safe-area-view {
+  box-sizing: border-box;
+}
+:root,
+page {
+  --ypmini-switch-width: calc(var(--ypmini-hd) * 48px);
+  --ypmini-switch-height: calc(var(--ypmini-hd) * 24px);
+  --ypmini-switch-border-radius: calc(var(--ypmini-hd) * 12px);
+  --ypmini-switch-handle-size: calc(var(--ypmini-hd) * 18px);
+  --ypmini-switch-handle-margin: calc(var(--ypmini-hd) * 3px);
+  --ypmini-switch-background-color: #e9edf3;
+  --ypmini-switch-checked-color: var(--ypmini-primary-color);
+  --ypmini-switch-handle-color: #fff;
+  --ypmini-switch-duration: 200ms;
+  --ypmini-switch-disabled-opacity: 0.4;
+}
+.ypmini-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: var(--ypmini-switch-width);
+  height: var(--ypmini-switch-height);
+  border-radius: var(--ypmini-switch-border-radius);
+  background-color: var(--ypmini-switch-background-color);
+  transition: background-color var(--ypmini-switch-duration) ease;
+  cursor: pointer;
+}
+.ypmini-switch-checked {
+  background-color: var(--ypmini-switch-checked-color);
+}
+.ypmini-switch-checked .ypmini-switch-handle {
+  transform: translateX(calc(var(--ypmini-switch-width) - var(--ypmini-switch-handle-size) - var(--ypmini-switch-handle-margin) * 2));
+}
+.ypmini-switch-disabled {
+  opacity: var(--ypmini-switch-disabled-opacity);
+  cursor: not-allowed;
+}
+.ypmini-switch-handle {
+  position: absolute;
+  left: var(--ypmini-switch-handle-margin);
+  width: var(--ypmini-switch-handle-size);
+  height: var(--ypmini-switch-handle-size);
+  border-radius: 50%;
+  background-color: var(--ypmini-switch-handle-color);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform var(--ypmini-switch-duration) ease;
+}
+page,
+:root {
+  --ypmini-tag-size-default-height: calc(var(--ypmini-hd) * 22px);
+  --ypmini-tag-size-default-font-size: calc(var(--ypmini-hd) * 12px);
+  --ypmini-tag-size-small-height: calc(var(--ypmini-hd) * 18px);
+  --ypmini-tag-size-small-font-size: calc(var(--ypmini-hd) * 12px);
+  --ypmini-tag-default-background-color: #f5f7fc;
+  --ypmini-tag-primary-background-color: var(--ypmini-primary-secondary-color);
+  --ypmini-tag-success-background-color: #dff2ec;
+  --ypmini-tag-warning-background-color: #ffebec;
+  --ypmini-tag-default-font-color: rgba(0, 0, 0, 0.65);
+  --ypmini-tag-primary-font-color: var(--ypmini-primary-color);
+  --ypmini-tag-success-font-color: #06b578;
+  --ypmini-tag-warning-font-color: #e8362e;
+  --ypmini-tag-default-font-size: calc(var(--ypmini-hd) * 12px);
+  --ypmini-tag-small-font-size: calc(var(--ypmini-hd) * 10px);
+}
+.ypmini-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--ypmini-tag-size-default-height);
+  padding: 0px 12px;
+  font-weight: 400;
+  border-radius: 8px;
+  font-size: var(--ypmini-tag-size-default-font-size);
+}
+.ypmini-tag-size-default {
+  padding: 0px 12px;
+  font-size: var(--ypmini-tag-size-default-font-size);
+  height: var(--ypmini-tag-size-default-height);
+}
+.ypmini-tag-size-small {
+  padding: 0px 8px;
+  font-size: var(--ypmini-tag-size-small-font-size);
+  height: var(--ypmini-tag-size-small-height);
+}
+.ypmini-tag-outlined {
+  box-sizing: border-box;
+}
+.ypmini-tag-default {
+  background: var(--ypmini-tag-default-background-color);
+  color: var(--ypmini-tag-default-font-color);
+}
+.ypmini-tag-default--outlined {
+  --ypmini-tag-default-outlined-border-color: var(--ypmini-tag-default-font-color);
+  border: 1px solid var(--ypmini-tag-default-outlined-border-color);
+}
+.ypmini-tag-default--solid {
+  border: unset;
+  background: var(--ypmini-tag-default-background-color);
+  color: var(--ypmini-tag-default-font-color);
+}
+.ypmini-tag-primary {
+  background: var(--ypmini-tag-primary-background-color);
+  color: var(--ypmini-tag-primary-font-color);
+}
+.ypmini-tag-primary--outlined {
+  --ypmini-tag-primary-outlined-border-color: var(--ypmini-tag-primary-font-color);
+  border: 1px solid var(--ypmini-tag-primary-outlined-border-color);
+}
+.ypmini-tag-primary--solid {
+  border: unset;
+  background: var(--ypmini-tag-primary-background-color);
+  color: var(--ypmini-tag-primary-font-color);
+}
+.ypmini-tag-warning {
+  background: var(--ypmini-tag-warning-background-color);
+  color: var(--ypmini-tag-warning-font-color);
+}
+.ypmini-tag-warning--outlined {
+  --ypmini-tag-warning-outlined-border-color: var(--ypmini-tag-warning-font-color);
+  border: 1px solid var(--ypmini-tag-warning-outlined-border-color);
+}
+.ypmini-tag-warning--solid {
+  border: unset;
+  background: var(--ypmini-tag-warning-background-color);
+  color: var(--ypmini-tag-warning-font-color);
+}
+.ypmini-tag-success {
+  background: var(--ypmini-tag-success-background-color);
+  color: var(--ypmini-tag-success-font-color);
+}
+.ypmini-tag-success--outlined {
+  --ypmini-tag-success-outlined-border-color: var(--ypmini-tag-success-font-color);
+  border: 1px solid var(--ypmini-tag-success-outlined-border-color);
+}
+.ypmini-tag-success--solid {
+  border: unset;
+  background: var(--ypmini-tag-success-background-color);
+  color: var(--ypmini-tag-success-font-color);
+}
 :root,
 page {
   --toast-z-index: 9999;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yup/taro-ui",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "鱼泡 Taro UI组件库",
   "type": "module",
   "main": "es/index.js",
@@ -67,7 +67,6 @@
     "@tarojs/runtime": "3.6.37",
     "@tarojs/taro": "3.6.37",
     "@tarojs/taro-h5": "^4.1.9",
-    "@types/minimatch": "5.1.2",
     "@types/node-sass": "^4.11.8",
     "@yangzw/bruce-std": "^1.3.6",
     "@yup/taro-checkbox": "^0.17.0",
@@ -100,7 +99,7 @@
     "less-plugin-autoprefix": "^2.0.0",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
-    "react-dom": "18.2.0",
+    "react-dom": "18.3.1",
     "rimraf": "^6.1.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-ignore": "^1.0.10",
@@ -121,8 +120,8 @@
   "peerDependencies": {
     "@tarojs/components": "3.6.37",
     "@tarojs/taro": "3.6.37",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "dependencies": {
     "classnames": "^2.3.2",