@yup/taro-ui 0.1.0 → 1.1.0

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

@@ -0,0 +1,93 @@
+: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;
+}

package/es/components/media-uploader/style/index.d.ts

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

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

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

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/components/tag/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ViewProps } from '@tarojs/components';
+export interface TagProps extends ViewProps {
+    /**
+     * 颜色类型
+     */
+    color?: 'default' | 'primary' | 'warning' | 'success';
+    /**
+     * 大小规格
+     */
+    size?: 'default' | 'small';
+    /**
+     * 填充样式 outlined 外边框填充， solid 无外边框
+     */
+    variant?: "outlined" | 'solid';
+}
+declare const Tag: React.FC<TagProps>;
+export default Tag;

package/es/components/tag/index.js

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

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

@@ -0,0 +1,92 @@
+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);
+}

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

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

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

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

package/es/global/global.css

@@ -2,6 +2,7 @@
 page {
   --ypmini-hd: 2;
   --ypmini-primary-color: #0092ff;
+  --ypmini-primary-secondary-color: #e0f3ff;
   --ypmini-color-text: rgba(0, 0, 0, 0.85);
   --ypmini-color-text-light: var(--ypmini-primary-color);
   --ypmini-color-text-weak: rgba(0, 0, 0, 0.45);
@@ -15,4 +16,6 @@ page {
   --ypmini-font-size-large: calc(17px * var(--ypmini-hd));
   --ypmini-font-size-default: calc(15px * var(--ypmini-hd));
   --ypmini-font-size-middle: calc(14px * var(--ypmini-hd));
+  --ypmini-font-size-mini: calc(13px * var(--ypmini-hd));
+  --ypmini-mask-background: rgba(0, 0, 0, 0.65);
 }

package/es/global/theme-default.css

@@ -2,6 +2,7 @@
 page {
   --ypmini-hd: 2;
   --ypmini-primary-color: #0092ff;
+  --ypmini-primary-secondary-color: #e0f3ff;
   --ypmini-color-text: rgba(0, 0, 0, 0.85);
   --ypmini-color-text-light: var(--ypmini-primary-color);
   --ypmini-color-text-weak: rgba(0, 0, 0, 0.45);
@@ -15,4 +16,6 @@ page {
   --ypmini-font-size-large: calc(17px * var(--ypmini-hd));
   --ypmini-font-size-default: calc(15px * var(--ypmini-hd));
   --ypmini-font-size-middle: calc(14px * var(--ypmini-hd));
+  --ypmini-font-size-mini: calc(13px * var(--ypmini-hd));
+  --ypmini-mask-background: rgba(0, 0, 0, 0.65);
 }

package/es/index.d.ts

@@ -10,3 +10,23 @@ export { default as DatePickerView } from './components/date-picker-view';
 export { default as Switch } from './components/switch';
 export { default as Popup } from './components/popup';
 export { default as SafeArea } from './components/safe-area';
+export { default as MediaUploader } from './components/media-uploader';
+export { default as Dialog } from './components/dialog';
+export { default as CitySelector } from './components/city-selector';
+export { default as Tag } from './components/tag';
+export { default as Avatar } from './components/avatar';
+export type * from './components/media-uploader';
+export type * from './components/dialog';
+export type * from './components/button';
+export type * from './components/popup';
+export type * from './components/date-picker-view';
+export type * from './components/picker-view';
+export type * from './components/form';
+export type * from './components/radio';
+export type * from './components/input';
+export type * from './components/checkbox';
+export type * from './components/icon';
+export type * from './components/switch';
+export type * from './components/city-selector';
+export type * from './components/tag';
+export type * from './components/avatar';

package/es/index.js

@@ -1 +1 @@
-export{default as Button}from"./components/button/index.js";export{default as Checkbox}from"./components/checkbox/index.js";export{default as Input}from"./components/input/index.js";export{default as Radio}from"./components/radio/index.js";export{default as Form}from"./components/form/index.js";import"./components/toast/index.js";export{default as Icon}from"./components/icon/index.js";export{default as PickerView}from"./components/picker-view/index.js";export{default as DatePickerView}from"./components/date-picker-view/index.js";export{default as Switch}from"./components/switch/index.js";export{default as Popup}from"./components/popup/index.js";export{default as SafeArea}from"./components/safe-area/index.js";export{default as Toast}from"./components/toast/toast.js";
+export{default as Button}from"./components/button/index.js";export{default as Checkbox}from"./components/checkbox/index.js";export{default as Input}from"./components/input/index.js";export{default as Radio}from"./components/radio/index.js";export{default as Form}from"./components/form/index.js";import"./components/toast/index.js";export{default as Icon}from"./components/icon/index.js";export{default as PickerView}from"./components/picker-view/index.js";export{default as DatePickerView}from"./components/date-picker-view/index.js";export{default as Switch}from"./components/switch/index.js";export{default as Popup}from"./components/popup/index.js";export{default as SafeArea}from"./components/safe-area/index.js";export{default as MediaUploader}from"./components/media-uploader/index.js";export{default as Dialog}from"./components/dialog/index.js";export{default as CitySelector}from"./components/city-selector/index.js";export{default as Tag}from"./components/tag/index.js";export{default as Avatar}from"./components/avatar/index.js";export{default as Toast}from"./components/toast/toast.js";