@yup/taro-ui 0.0.6 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/es/components/button/index.d.ts +6 -3
  2. package/es/components/button/index.js +1 -1
  3. package/es/components/button/style/index.css +31 -5
  4. package/es/components/checkbox/index.d.ts +1 -1
  5. package/es/components/checkbox/style/index.css +29 -7
  6. package/es/components/form/form-item.d.ts +1 -1
  7. package/es/components/form/style/index.css +28 -6
  8. package/es/components/input/index.d.ts +2 -2
  9. package/es/components/input/index.js +1 -1
  10. package/es/components/input/style/index.css +33 -4
  11. package/es/components/radio/index.d.ts +1 -1
  12. package/es/components/radio/index.js +1 -1
  13. package/es/components/radio/radio-group.d.ts +1 -1
  14. package/es/components/radio/radio-group.js +1 -1
  15. package/es/components/radio/style/group.css +28 -2
  16. package/es/components/radio/style/radio.css +29 -7
  17. package/es/components/toast/style/index.css +25 -3
  18. package/es/components/toast/toast.d.ts +9 -0
  19. package/es/global.css +5 -4
  20. package/es/index.d.ts +0 -1
  21. package/es/style/index.css +441 -0
  22. package/package.json +8 -4
package/es/components/button/index.d.ts CHANGED
@@ -2,17 +2,20 @@ import { ButtonProps as TaroButtonProps } from '@tarojs/components';
2
2
  import React from 'react';
3
3
  export interface ButtonProps extends Omit<TaroButtonProps, 'type'> {
4
4
  /**
5
- * 按钮样式类型
5
+ * 按钮样式类型 primary 主题色样式按钮 default 默认样式 secondary 次级样式
6
6
  */
7
7
  styleType?: 'primary' | 'default' | 'secondary';
8
8
  /**
9
- * 是否启用禁用样式(启用禁用样式按钮依然可以点击和disabled有区别 只是样式支持)
9
+ * 是否启用禁用样式(启用禁用样式按钮依然可以点击和disabled有区别 只是样式支持),如果想要按钮有禁用样式 但是依然可点击可以用这个属性
10
10
  */
11
11
  disabledStyle?: boolean;
12
12
  /**
13
- * 是否块级标签
13
+ * 是否块级标签默认是
14
14
  */
15
15
  block?: boolean;
16
+ /**
17
+ * icon的支持
18
+ */
16
19
  icon?: React.ReactNode;
17
20
  }
18
21
  declare const Button: React.FC<ButtonProps>;
package/es/components/button/index.js CHANGED
@@ -1 +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 e,Text as i}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=s.disabled,b=s.disabledStyle,y=s.icon,j=t(s,n);return o.jsx(e,a(a({className:r("ypmini-taro-button",{"ypmini-taro-button-primary":"primary"===m,"ypmini-taro-button-primary-disabled":"primary"===m&&(u||b),"ypmini-taro-button-secondary":"secondary"===m,"ypmini-taro-button-secondary-disabled":"secondary"===m&&(u||b),"ypmini-taro-button-default":"default"===m,"ypmini-taro-button-default-disabled":"default"===m&&(u||b),"ypmini-taro-button-block":p},c),disabled:u},j),{},{children:y?o.jsxs(i,{className:"ypmini-taro-button-icon-wrapper",children:[o.jsx(i,{className:"ypmini-taro-button-icon",children:y}),o.jsx(i,{className:"ypmini-taro-button-icon-content",children:l})]}):l}))};export{s as default};
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};
package/es/components/button/style/index.css CHANGED
@@ -1,7 +1,29 @@
1
1
  :root,
2
2
  page {
3
- --border-radius: 8px;
4
- --button-height: 48px;
3
+ --ypmini-hd: 2;
4
+ --yp-color-primary: #0092ff;
5
+ --yp-color-text: rgba(0, 0, 0, 0.85);
6
+ --yp-color-text-light: #0092ff;
7
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
8
+ --yp-border-color: #e9edf3;
9
+ --yp-color-text-primary: #333;
10
+ --yp-color-text-link: var(--yp-color-primary);
11
+ --yp-color-text-secondary: #666;
12
+ --yp-color-text-disabled: #ccc;
13
+ --yp-color-text-placeholder: #999;
14
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
15
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
16
+ --yp-radio-button-checked-color: var(--yp-color-primary);
17
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
18
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
19
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
20
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
21
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
22
+ }
23
+ :root,
24
+ page {
25
+ --border-radius: calc(8px * var(--ypmini-hd));
26
+ --button-height: calc(48px * var(--ypmini-hd));
5
27
  --default-button-background: #f5f7fc;
6
28
  --default-button-text-color: rgba(0, 0, 0, 0.65);
7
29
  --primary-button-background: var(--yp-color-primary);
@@ -12,16 +34,17 @@ page {
12
34
  --secondary-button-text-color: #ffffff;
13
35
  }
14
36
  .ypmini-taro-button {
15
- padding: 0px 24px;
37
+ padding: 0 48px;
16
38
  border: unset;
17
39
  font-weight: bold;
18
- font-size: 17px;
40
+ font-size: 34px;
19
41
  width: auto;
20
42
  height: var(--button-height);
21
43
  line-height: var(--button-height);
22
44
  color: var(--yp-color-text);
23
45
  border-radius: var(--border-radius);
24
46
  display: inline-block;
47
+ white-space: nowrap;
25
48
  }
26
49
  .ypmini-taro-button:after {
27
50
  display: none;
@@ -64,5 +87,8 @@ page {
64
87
  .ypmini-taro-button-icon {
65
88
  display: flex;
66
89
  align-items: center;
67
- margin-right: 4px;
90
+ margin-right: 8px;
91
+ }
92
+ taro-button-core + taro-button-core {
93
+ margin-top: 0;
68
94
  }
package/es/components/checkbox/index.d.ts CHANGED
@@ -3,7 +3,7 @@ import { CheckboxProps as YpCheckboxProps } from '@yup/taro-checkbox/dist/types/
3
3
  import CheckboxGroup from './checkbox-group';
4
4
  export interface CheckboxProps extends YpCheckboxProps {
5
5
  /**
6
- * 多选类型
6
+ * 多选内置样式类型 button按钮样式，default 原始样式，默认button样式，如果需要自定义覆盖复选框样式可以通过icon props函数属性覆盖
7
7
  */
8
8
  type?: 'button' | 'default';
9
9
  }
package/es/components/checkbox/style/index.css CHANGED
@@ -1,20 +1,42 @@
1
1
  :root,
2
2
  page {
3
- --checkbox-button-font-size: 17px;
4
- --checkbox-button-border-radius: 8px;
3
+ --ypmini-hd: 2;
4
+ --yp-color-primary: #0092ff;
5
+ --yp-color-text: rgba(0, 0, 0, 0.85);
6
+ --yp-color-text-light: #0092ff;
7
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
8
+ --yp-border-color: #e9edf3;
9
+ --yp-color-text-primary: #333;
10
+ --yp-color-text-link: var(--yp-color-primary);
11
+ --yp-color-text-secondary: #666;
12
+ --yp-color-text-disabled: #ccc;
13
+ --yp-color-text-placeholder: #999;
14
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
15
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
16
+ --yp-radio-button-checked-color: var(--yp-color-primary);
17
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
18
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
19
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
20
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
21
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
22
+ }
23
+ :root,
24
+ page {
25
+ --checkbox-button-font-size: calc(17px * var(--ypmini-hd));
26
+ --checkbox-button-border-radius: calc(8px * var(--ypmini-hd));
5
27
  --checkbox-button-background-color: #f5f7fc;
6
28
  --checkbox-button-text-color: #000000d9;
7
29
  --checkbox-button-checked-background-color: #e0f3ff;
8
30
  --checkbox-button-checked-text-color: var(--yp-color-primary);
9
31
  --checkbox-button-checked-border-color: var(--yp-color-primary);
10
- --checkbox-button-height: 52px;
32
+ --checkbox-button-height: calc(52px * var(--ypmini-hd));
11
33
  }
12
34
  .ypmini-checkbox-button {
13
35
  background-color: var(--checkbox-button-background-color);
14
36
  color: var(--checkbox-button-text-color);
15
37
  font-size: var(--checkbox-button-font-size);
16
38
  text-align: center;
17
- padding: 0px 16px;
39
+ padding: 0px 32px;
18
40
  height: var(--checkbox-button-height);
19
41
  line-height: var(--checkbox-button-height);
20
42
  box-sizing: border-box;
@@ -24,7 +46,7 @@ page {
24
46
  background-color: var(--checkbox-button-checked-background-color);
25
47
  color: var(--checkbox-button-checked-text-color);
26
48
  border-color: var(--checkbox-button-checked-border-color);
27
- border-width: 1px;
49
+ border-width: 2px;
28
50
  border-style: solid;
29
51
  }
30
52
  .ypmini-checkbox-group {
@@ -37,10 +59,10 @@ page {
37
59
  margin-top: 0px;
38
60
  }
39
61
  .ypmini-checkbox-group.ypmini-checkbox-group-block .ypmini-checkbox:not(:first-child) {
40
- margin-top: 12px;
62
+ margin-top: 24px;
41
63
  margin-left: 0px;
42
64
  }
43
65
  .ypmini-checkbox-group .ypmini-checkbox:not(:first-child) {
44
- margin-left: 12px;
66
+ margin-left: 24px;
45
67
  margin-top: 0px;
46
68
  }
package/es/components/form/form-item.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { FormItemProps as YpFormItemProps } from '@yup/taro-form';
3
3
  export interface FormItemProps extends YpFormItemProps {
4
4
  /**
5
- * 带有必填星号的label
5
+ * 带有必填星号的样式（并不代表表单有必填校验规则，如果要添加必填校验规则 需要通过rules传递）
6
6
  */
7
7
  required?: boolean;
8
8
  }
package/es/components/form/style/index.css CHANGED
@@ -1,13 +1,35 @@
1
1
  :root,
2
2
  page {
3
- --form-item-label-width: 60px;
3
+ --ypmini-hd: 2;
4
+ --yp-color-primary: #0092ff;
5
+ --yp-color-text: rgba(0, 0, 0, 0.85);
6
+ --yp-color-text-light: #0092ff;
7
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
8
+ --yp-border-color: #e9edf3;
9
+ --yp-color-text-primary: #333;
10
+ --yp-color-text-link: var(--yp-color-primary);
11
+ --yp-color-text-secondary: #666;
12
+ --yp-color-text-disabled: #ccc;
13
+ --yp-color-text-placeholder: #999;
14
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
15
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
16
+ --yp-radio-button-checked-color: var(--yp-color-primary);
17
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
18
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
19
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
20
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
21
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
22
+ }
23
+ :root,
24
+ page {
25
+ --form-item-label-width: calc(60px * var(--ypmini-hd));
4
26
  }
5
27
  .ypmini-form.ypmini-form-vertical .ypmini-form-item .yp-form-item-label {
6
- margin-bottom: 12px;
7
- padding-top: 16px;
28
+ margin-bottom: 24px;
29
+ padding-top: 32px;
8
30
  }
9
31
  .ypmini-form.ypmini-form-vertical .ypmini-form-item:not(:first-child) {
10
- margin-top: 16px;
32
+ margin-top: 32px;
11
33
  }
12
34
  .ypmini-form.ypmini-form-horizontal .ypmini-form-item {
13
35
  display: flex;
@@ -21,7 +43,7 @@ page {
21
43
  flex: 1;
22
44
  }
23
45
  .ypmini-form.ypmini-form-horizontal .ypmini-form-item:not(:first-child) {
24
- margin-top: 16px;
46
+ margin-top: 32px;
25
47
  }
26
48
  .ypmini-form-item-required .yp-form-item-label::before {
27
49
  content: '*';
@@ -30,5 +52,5 @@ page {
30
52
  .ypmini-form-item .yp-form-item-label {
31
53
  color: #000000d9;
32
54
  font-weight: bold;
33
- font-size: 19px;
55
+ font-size: 38px;
34
56
  }
package/es/components/input/index.d.ts CHANGED
@@ -10,11 +10,11 @@ export interface InputProps extends TaroInputProps {
10
10
  */
11
11
  clearIcon?: React.ReactNode;
12
12
  /**
13
- * 是否显示字数统计
13
+ * 是否显示尾部字数统计
14
14
  */
15
15
  showCount?: boolean;
16
16
  /**
17
- * 边框样式 outlined 边框 borderless 无边框
17
+ * 边框样式 outlined 边框 borderless 无边框样式
18
18
  */
19
19
  variant?: 'outlined' | 'borderless';
20
20
  }
package/es/components/input/index.js CHANGED
@@ -1 +1 @@
1
- import{objectWithoutProperties as e,slicedToArray as l,objectSpread2 as a}from"../../_virtual/_rollupPluginBabelHelpers.js";import{j as t}from"../../node_modules/react/jsx-runtime.js";import n from"react";import o from"../../node_modules/classnames/index.js";import{View as r,Input as s,Text as i}from"@tarojs/components";var u=["variant","allowClear","showCount","clearIcon","className","style","onClick","onInput","maxlength","placeholderStyle","defaultValue"],c=function(c){c.variant,c.allowClear;var p=c.showCount;c.clearIcon;var m=c.className,d=c.style,h=c.onClick,j=c.onInput,x=c.maxlength;c.placeholderStyle;var f=c.defaultValue,y=e(c,u),v=n.useState(f||""),g=l(v,2),C=g[0],N=g[1];return n.useEffect(function(){"value"in y&&N(y.value||"")},[y]),t.jsxs(r,{className:o("ypmini-taro-input-wrapper",m),style:d,onClick:h,children:[t.jsx(s,a({placeholderStyle:"font-size: 17px;color: #00000040;",placeholderTextColor:"#00000040",value:C,onInput:function(e){N(e.detail.value),j&&j(e)},maxlength:x,className:"ypmini-taro-input"},y)),t.jsx(r,{className:"ypmini-taro-input-clear"}),p?t.jsxs(r,{className:"ypmini-taro-input-count",children:[t.jsx(i,{className:o("ypmini-taro-input-count-current",{"ypmini-taro-input-count-current-light":(null==C?void 0:C.length)>0}),children:null==C?void 0:C.length}),x?t.jsxs(t.Fragment,{children:["/",t.jsx(i,{className:"ypmini-taro-input-count-total",children:x||0})]}):null]}):null]})};export{c as default};
1
+ import{objectWithoutProperties as e,slicedToArray as l,objectSpread2 as a}from"../../_virtual/_rollupPluginBabelHelpers.js";import{j as t}from"../../node_modules/react/jsx-runtime.js";import n from"react";import o from"../../node_modules/classnames/index.js";import{View as r,Input as s,Text as i}from"@tarojs/components";var u=["variant","allowClear","showCount","clearIcon","className","style","onClick","onInput","maxlength","placeholderStyle","defaultValue"],c=function(c){var p=c.variant,m=void 0===p?"outlined":p;c.allowClear;var d=c.showCount;c.clearIcon;var h=c.className,j=c.style,v=c.onClick,x=c.onInput,y=c.maxlength;c.placeholderStyle;var f=c.defaultValue,g=e(c,u),C=n.useState(f||""),N=l(C,2),w=N[0],I=N[1];return n.useEffect(function(){"value"in g&&I(g.value||"")},[g]),t.jsxs(r,{className:o("ypmini-taro-input-wrapper",{"ypmini-taro-input-borderless-wrapper":"borderless"===m},h),style:j,onClick:v,children:[t.jsx(s,a({placeholderStyle:"font-size: 17px;color: #00000040;",placeholderTextColor:"#00000040",value:w,onInput:function(e){I(e.detail.value),x&&x(e)},maxlength:y,className:"ypmini-taro-input"},g)),t.jsx(r,{className:"ypmini-taro-input-clear"}),d?t.jsxs(r,{className:"ypmini-taro-input-count",children:[t.jsx(i,{className:o("ypmini-taro-input-count-current",{"ypmini-taro-input-count-current-light":(null==w?void 0:w.length)>0}),children:null==w?void 0:w.length}),y?t.jsxs(t.Fragment,{children:["/",t.jsx(i,{className:"ypmini-taro-input-count-total",children:y||0})]}):null]}):null]})};export{c as default};
package/es/components/input/style/index.css CHANGED
@@ -1,4 +1,26 @@
1
1
  :root,
2
+ page {
3
+ --ypmini-hd: 2;
4
+ --yp-color-primary: #0092ff;
5
+ --yp-color-text: rgba(0, 0, 0, 0.85);
6
+ --yp-color-text-light: #0092ff;
7
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
8
+ --yp-border-color: #e9edf3;
9
+ --yp-color-text-primary: #333;
10
+ --yp-color-text-link: var(--yp-color-primary);
11
+ --yp-color-text-secondary: #666;
12
+ --yp-color-text-disabled: #ccc;
13
+ --yp-color-text-placeholder: #999;
14
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
15
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
16
+ --yp-radio-button-checked-color: var(--yp-color-primary);
17
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
18
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
19
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
20
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
21
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
22
+ }
23
+ :root,
2
24
  page {
3
25
  --input-placeholder-color: rgba(0, 0, 0, 0.25);
4
26
  --input-text-color: var(--yp-color-text);
@@ -7,24 +29,31 @@ page {
7
29
  .ypmini-taro-input-wrapper {
8
30
  display: flex;
9
31
  font-size: var(--input-font-size);
10
- padding: 16px 12px;
11
- border-radius: 8px;
12
- border: 1px solid #e9edf3;
32
+ padding: 32px 24px;
33
+ border-radius: 16px;
34
+ border: 2px solid #e9edf3;
13
35
  box-sizing: border-box;
14
36
  }
37
+ .ypmini-taro-input-borderless-wrapper {
38
+ border: unset;
39
+ }
15
40
  .ypmini-taro-input {
16
41
  color: var(--input-text-color);
17
42
  flex: 1;
18
43
  border: none;
19
44
  }
45
+ .ypmini-taro-input input::placeholder {
46
+ color: var(--input-placeholder-color);
47
+ }
20
48
  .ypmini-input-placeholder {
21
49
  color: var(--input-placeholder-color);
22
50
  }
23
51
  .ypmini-taro-input-count {
24
52
  color: rgba(0, 0, 0, 0.45);
25
- font-size: 15px;
53
+ font-size: 30px;
26
54
  display: flex;
27
55
  align-items: center;
56
+ margin-left: 8px;
28
57
  }
29
58
  .ypmini-taro-input-count .ypmini-taro-input-count-current-light {
30
59
  color: var(--yp-color-text-light);
package/es/components/radio/index.d.ts CHANGED
@@ -3,7 +3,7 @@ import { RadioProps as YpRadioProps } from '@yup/taro-radio';
3
3
  import RadioGroup from './radio-group';
4
4
  export interface RadioProps extends YpRadioProps {
5
5
  /**
6
- * button按钮样式，auto默认选中样式
6
+ * 单选内置样式类型 button按钮样式，default 原始样式，默认button样式，如果需要自定义覆盖复选框样式可以通过icon props函数属性覆盖
7
7
  */
8
8
  type?: 'button' | 'default';
9
9
  }
package/es/components/radio/index.js CHANGED
@@ -1 +1 @@
1
- import{objectWithoutProperties as r,objectSpread2 as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{j as t}from"../../node_modules/react/jsx-runtime.js";import{View as e}from"@tarojs/components";import i from"../../node_modules/classnames/index.js";import a from"@yup/taro-radio";import s from"./radio-group.js";var n=["children","type"],m=function(s){var m=s.children;s.type;var p=r(s,n);return t.jsx(a,o({className:"ypmini-taro-radio",icon:function(r){return t.jsx(e,{className:i("ypmini-taro-radio-button",{"ypmini-taro-radio-button-checked":r}),children:m})}},p))};m.Group=s;export{m as default};
1
+ import{objectWithoutProperties as o,objectSpread2 as r}from"../../_virtual/_rollupPluginBabelHelpers.js";import{j as t}from"../../node_modules/react/jsx-runtime.js";import{View as i}from"@tarojs/components";import e from"../../node_modules/classnames/index.js";import n from"@yup/taro-radio";import a from"./radio-group.js";var s=["children","type"],m=function(a){var m=a.children,p=a.type,u=void 0===p?"button":p,d=o(a,s);return t.jsx(n,r({className:e("ypmini-taro-radio",{"ypmini-taro-radio-button":"button"===u}),icon:function(o){return t.jsx(i,{className:e("ypmini-taro-radio-button-inner",{"ypmini-taro-radio-button-inner-checked":o}),children:m})}},d))};m.Group=a;export{m as default};
package/es/components/radio/radio-group.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { RadioGroupProps as YpRadioGroupProps } from '@yup/taro-radio/dist/types/type';
3
3
  export interface RadioGroupProps extends YpRadioGroupProps {
4
4
  /**
5
- * button按钮样式，auto默认选中样式
5
+ * 单选组内置样式类型 button按钮样式，default 原始样式，默认button样式，如果需要自定义覆盖复选框样式可以通过icon props函数属性覆盖
6
6
  */
7
7
  type?: 'button' | 'default';
8
8
  }
package/es/components/radio/radio-group.js CHANGED
@@ -1 +1 @@
1
- import{objectWithoutProperties as o,objectSpread2 as r}from"../../_virtual/_rollupPluginBabelHelpers.js";import{j as e}from"../../node_modules/react/jsx-runtime.js";import i from"../../node_modules/classnames/index.js";import t from"@yup/taro-radio";var a=["children","type","block"],p=function(p){var s=p.children,l=p.type,n=p.block,u=void 0!==n&&n,m=o(p,a);return e.jsx(t.Group,r(r({className:i("ypmini-radio-group",{"ypmini-radio-group--button":"button"===l,"ypmini-radio-group--block":u})},m),{},{children:s}))};export{p as default};
1
+ import{objectWithoutProperties as o,objectSpread2 as r}from"../../_virtual/_rollupPluginBabelHelpers.js";import{j as e}from"../../node_modules/react/jsx-runtime.js";import i from"../../node_modules/classnames/index.js";import t from"@yup/taro-radio";var a=["children","type","block"],p=function(p){var s=p.children,l=p.type,n=p.block,u=void 0!==n&&n,m=o(p,a);return e.jsx(t.Group,r(r({className:i("ypmini-radio-group",{"ypmini-radio-group-button":"button"===l,"ypmini-radio-group-block":u})},m),{},{children:s}))};export{p as default};
package/es/components/radio/style/group.css CHANGED
@@ -1,12 +1,38 @@
1
+ :root,
2
+ page {
3
+ --ypmini-hd: 2;
4
+ --yp-color-primary: #0092ff;
5
+ --yp-color-text: rgba(0, 0, 0, 0.85);
6
+ --yp-color-text-light: #0092ff;
7
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
8
+ --yp-border-color: #e9edf3;
9
+ --yp-color-text-primary: #333;
10
+ --yp-color-text-link: var(--yp-color-primary);
11
+ --yp-color-text-secondary: #666;
12
+ --yp-color-text-disabled: #ccc;
13
+ --yp-color-text-placeholder: #999;
14
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
15
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
16
+ --yp-radio-button-checked-color: var(--yp-color-primary);
17
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
18
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
19
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
20
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
21
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
22
+ }
1
23
  .ypmini-radio-group {
2
24
  display: flex;
25
+ width: 100%;
3
26
  }
4
27
  .ypmini-radio-group-block {
5
28
  display: block;
6
29
  }
7
- .ypmini-radio-group .ypmini-taro-radio {
30
+ .ypmini-radio-group-button {
31
+ display: flex;
32
+ }
33
+ .ypmini-radio-group .ypmini-taro-radio-button {
8
34
  flex: 1;
9
35
  }
10
36
  .ypmini-radio-group .ypmini-taro-radio:not(:first-child) {
11
- margin-left: 12px;
37
+ margin-left: 24px;
12
38
  }
package/es/components/radio/style/radio.css CHANGED
@@ -1,29 +1,51 @@
1
1
  :root,
2
2
  page {
3
- --radio-button-font-size: 17px;
4
- --radio-button-border-radius: 8px;
3
+ --ypmini-hd: 2;
4
+ --yp-color-primary: #0092ff;
5
+ --yp-color-text: rgba(0, 0, 0, 0.85);
6
+ --yp-color-text-light: #0092ff;
7
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
8
+ --yp-border-color: #e9edf3;
9
+ --yp-color-text-primary: #333;
10
+ --yp-color-text-link: var(--yp-color-primary);
11
+ --yp-color-text-secondary: #666;
12
+ --yp-color-text-disabled: #ccc;
13
+ --yp-color-text-placeholder: #999;
14
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
15
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
16
+ --yp-radio-button-checked-color: var(--yp-color-primary);
17
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
18
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
19
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
20
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
21
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
22
+ }
23
+ :root,
24
+ page {
25
+ --radio-button-font-size: calc(17px * var(--ypmini-hd));
26
+ --radio-button-border-radius: calc(8px * var(--ypmini-hd));
5
27
  --radio-button-background-color: #f5f7fc;
6
28
  --radio-button-text-color: #000000d9;
7
29
  --radio-button-checked-background-color: #e0f3ff;
8
30
  --radio-button-checked-text-color: var(--yp-color-primary);
9
31
  --radio-button-checked-border-color: var(--yp-color-primary);
10
- --radio-button-height: 52px;
32
+ --radio-button-height: calc(52px * var(--ypmini-hd));
11
33
  }
12
- .ypmini-taro-radio-button {
34
+ .ypmini-taro-radio-button-inner {
13
35
  background-color: var(--radio-button-background-color);
14
36
  color: var(--radio-button-text-color);
15
37
  font-size: var(--radio-button-font-size);
16
38
  text-align: center;
17
- padding: 0px 16px;
39
+ padding: 0px 32px;
18
40
  height: var(--radio-button-height);
19
41
  line-height: var(--radio-button-height);
20
42
  box-sizing: border-box;
21
43
  border-radius: var(--radio-button-border-radius);
22
44
  }
23
- .ypmini-taro-radio-button-checked {
45
+ .ypmini-taro-radio-button-inner-checked {
24
46
  background-color: var(--radio-button-checked-background-color);
25
47
  color: var(--radio-button-checked-text-color);
26
48
  border-color: var(--radio-button-checked-border-color);
27
- border-width: 1px;
49
+ border-width: 2px;
28
50
  border-style: solid;
29
51
  }
package/es/components/toast/style/index.css CHANGED
@@ -1,4 +1,26 @@
1
1
  :root,
2
+ page {
3
+ --ypmini-hd: 2;
4
+ --yp-color-primary: #0092ff;
5
+ --yp-color-text: rgba(0, 0, 0, 0.85);
6
+ --yp-color-text-light: #0092ff;
7
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
8
+ --yp-border-color: #e9edf3;
9
+ --yp-color-text-primary: #333;
10
+ --yp-color-text-link: var(--yp-color-primary);
11
+ --yp-color-text-secondary: #666;
12
+ --yp-color-text-disabled: #ccc;
13
+ --yp-color-text-placeholder: #999;
14
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
15
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
16
+ --yp-radio-button-checked-color: var(--yp-color-primary);
17
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
18
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
19
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
20
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
21
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
22
+ }
23
+ :root,
2
24
  page {
3
25
  --toast-z-index: 9999;
4
26
  }
@@ -9,8 +31,8 @@ page {
9
31
  transform: translate(-50%, -50%);
10
32
  background: rgba(0, 0, 0, 0.7);
11
33
  color: #fff;
12
- padding: 12px;
13
- border-radius: 4px;
34
+ padding: 24px;
35
+ border-radius: 8px;
14
36
  display: flex;
15
37
  align-items: center;
16
38
  z-index: var(--toast-z-index);
@@ -19,5 +41,5 @@ page {
19
41
  word-break: break-word;
20
42
  }
21
43
  .ypmini-toast-content {
22
- font-size: 14px;
44
+ font-size: 28px;
23
45
  }
package/es/components/toast/toast.d.ts CHANGED
@@ -1,8 +1,17 @@
1
1
  import React from 'react';
2
2
  import { ViewProps } from '@tarojs/components';
3
3
  export interface ToastProps extends ViewProps {
4
+ /**
5
+ * 轻提示内容
6
+ */
4
7
  content?: React.ReactNode;
8
+ /**
9
+ * 轻提示持续显示时间，单位毫秒 默认2000
10
+ */
5
11
  duration?: number;
12
+ /**
13
+ * 样式类名
14
+ */
6
15
  className?: string;
7
16
  }
8
17
  export interface ToastRefType {
package/es/global.css CHANGED
@@ -1,5 +1,6 @@
1
1
  :root,
2
2
  page {
3
+ --ypmini-hd: 2;
3
4
  --yp-color-primary: #0092ff;
4
5
  --yp-color-text: rgba(0, 0, 0, 0.85);
5
6
  --yp-color-text-light: #0092ff;
@@ -10,12 +11,12 @@ page {
10
11
  --yp-color-text-secondary: #666;
11
12
  --yp-color-text-disabled: #ccc;
12
13
  --yp-color-text-placeholder: #999;
13
- --yp-font-size-default: 17px;
14
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
14
15
  --yp-radio-circle-checked-color: var(--yp-color-primary);
15
16
  --yp-radio-button-checked-color: var(--yp-color-primary);
16
17
  --yp-checkbox-circle-checked-color: var(--yp-color-primary);
17
18
  --yp-checkbox-button-checked-color: var(--yp-color-primary);
18
- --yp-border-radius-base: 4px;
19
- --yp-border-radius-button: 8px;
20
- --yp-space-horizontal-base: 12px;
19
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
20
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
21
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
21
22
  }
package/es/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import './global';
2
1
  export { default as Button } from './components/button';
3
2
  export { default as Checkbox } from './components/checkbox';
4
3
  export { default as Input } from './components/input';
package/es/style/index.css ADDED
@@ -0,0 +1,441 @@
1
+ :root,
2
+ page {
3
+ --ypmini-hd: 2;
4
+ --yp-color-primary: #0092ff;
5
+ --yp-color-text: rgba(0, 0, 0, 0.85);
6
+ --yp-color-text-light: #0092ff;
7
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
8
+ --yp-border-color: #e9edf3;
9
+ --yp-color-text-primary: #333;
10
+ --yp-color-text-link: var(--yp-color-primary);
11
+ --yp-color-text-secondary: #666;
12
+ --yp-color-text-disabled: #ccc;
13
+ --yp-color-text-placeholder: #999;
14
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
15
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
16
+ --yp-radio-button-checked-color: var(--yp-color-primary);
17
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
18
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
19
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
20
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
21
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
22
+ }
23
+
24
+ :root,
25
+ page {
26
+ --ypmini-hd: 2;
27
+ --yp-color-primary: #0092ff;
28
+ --yp-color-text: rgba(0, 0, 0, 0.85);
29
+ --yp-color-text-light: #0092ff;
30
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
31
+ --yp-border-color: #e9edf3;
32
+ --yp-color-text-primary: #333;
33
+ --yp-color-text-link: var(--yp-color-primary);
34
+ --yp-color-text-secondary: #666;
35
+ --yp-color-text-disabled: #ccc;
36
+ --yp-color-text-placeholder: #999;
37
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
38
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
39
+ --yp-radio-button-checked-color: var(--yp-color-primary);
40
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
41
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
42
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
43
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
44
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
45
+ }
46
+ :root,
47
+ page {
48
+ --border-radius: calc(8px * var(--ypmini-hd));
49
+ --button-height: calc(48px * var(--ypmini-hd));
50
+ --default-button-background: #f5f7fc;
51
+ --default-button-text-color: rgba(0, 0, 0, 0.65);
52
+ --primary-button-background: var(--yp-color-primary);
53
+ --primary-button-disabled-background: #99d3ff;
54
+ --primary-button-disabled-text-color: rgba(255, 255, 255, 0.45);
55
+ --primary-button-text-color: #fff;
56
+ --secondary-button-background: #00cbff;
57
+ --secondary-button-text-color: #ffffff;
58
+ }
59
+ .ypmini-taro-button {
60
+ padding: 0 48px;
61
+ border: unset;
62
+ font-weight: bold;
63
+ font-size: 34px;
64
+ width: auto;
65
+ height: var(--button-height);
66
+ line-height: var(--button-height);
67
+ color: var(--yp-color-text);
68
+ border-radius: var(--border-radius);
69
+ display: inline-block;
70
+ white-space: nowrap;
71
+ }
72
+ .ypmini-taro-button:after {
73
+ display: none;
74
+ }
75
+ .ypmini-taro-button-primary {
76
+ background: var(--primary-button-background);
77
+ color: var(--primary-button-text-color);
78
+ }
79
+ .ypmini-taro-button-primary.ypmini-taro-button-primary-disabled {
80
+ color: var(--primary-button-disabled-text-color);
81
+ background: var(--primary-button-disabled-background);
82
+ }
83
+ .ypmini-taro-button-default {
84
+ background: var(--default-button-background);
85
+ color: var(--default-button-text-color);
86
+ }
87
+ .ypmini-taro-button-default.ypmini-taro-button-default-disabled {
88
+ opacity: 0.6;
89
+ }
90
+ .ypmini-taro-button-default.ypmini-taro-button-default-disabled.ypmini-taro-button-default.ypmini-taro-button-default-disabled[disabled] {
91
+ color: var(--default-button-text-color);
92
+ }
93
+ .ypmini-taro-button-secondary {
94
+ background: var(--secondary-button-background);
95
+ color: var(--secondary-button-text-color);
96
+ }
97
+ .ypmini-taro-button-secondary.ypmini-taro-button-secondary-disabled {
98
+ opacity: 0.6;
99
+ }
100
+ .ypmini-taro-button-secondary.ypmini-taro-button-secondary-disabled.ypmini-taro-button-secondary.ypmini-taro-button-secondary-disabled[disabled] {
101
+ color: var(--secondary-button-text-color);
102
+ }
103
+ .ypmini-taro-button-block {
104
+ display: block;
105
+ }
106
+ .ypmini-taro-button-icon-wrapper {
107
+ display: flex;
108
+ align-items: center;
109
+ }
110
+ .ypmini-taro-button-icon {
111
+ display: flex;
112
+ align-items: center;
113
+ margin-right: 8px;
114
+ }
115
+ taro-button-core + taro-button-core {
116
+ margin-top: 0;
117
+ }
118
+
119
+ :root,
120
+ page {
121
+ --ypmini-hd: 2;
122
+ --yp-color-primary: #0092ff;
123
+ --yp-color-text: rgba(0, 0, 0, 0.85);
124
+ --yp-color-text-light: #0092ff;
125
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
126
+ --yp-border-color: #e9edf3;
127
+ --yp-color-text-primary: #333;
128
+ --yp-color-text-link: var(--yp-color-primary);
129
+ --yp-color-text-secondary: #666;
130
+ --yp-color-text-disabled: #ccc;
131
+ --yp-color-text-placeholder: #999;
132
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
133
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
134
+ --yp-radio-button-checked-color: var(--yp-color-primary);
135
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
136
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
137
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
138
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
139
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
140
+ }
141
+ :root,
142
+ page {
143
+ --checkbox-button-font-size: calc(17px * var(--ypmini-hd));
144
+ --checkbox-button-border-radius: calc(8px * var(--ypmini-hd));
145
+ --checkbox-button-background-color: #f5f7fc;
146
+ --checkbox-button-text-color: #000000d9;
147
+ --checkbox-button-checked-background-color: #e0f3ff;
148
+ --checkbox-button-checked-text-color: var(--yp-color-primary);
149
+ --checkbox-button-checked-border-color: var(--yp-color-primary);
150
+ --checkbox-button-height: calc(52px * var(--ypmini-hd));
151
+ }
152
+ .ypmini-checkbox-button {
153
+ background-color: var(--checkbox-button-background-color);
154
+ color: var(--checkbox-button-text-color);
155
+ font-size: var(--checkbox-button-font-size);
156
+ text-align: center;
157
+ padding: 0px 32px;
158
+ height: var(--checkbox-button-height);
159
+ line-height: var(--checkbox-button-height);
160
+ box-sizing: border-box;
161
+ border-radius: var(--checkbox-button-border-radius);
162
+ }
163
+ .ypmini-checkbox-button-checked {
164
+ background-color: var(--checkbox-button-checked-background-color);
165
+ color: var(--checkbox-button-checked-text-color);
166
+ border-color: var(--checkbox-button-checked-border-color);
167
+ border-width: 2px;
168
+ border-style: solid;
169
+ }
170
+ .ypmini-checkbox-group {
171
+ display: flex;
172
+ align-items: center;
173
+ flex-wrap: wrap;
174
+ }
175
+ .ypmini-checkbox-group.ypmini-checkbox-group-block {
176
+ display: block;
177
+ margin-top: 0px;
178
+ }
179
+ .ypmini-checkbox-group.ypmini-checkbox-group-block .ypmini-checkbox:not(:first-child) {
180
+ margin-top: 24px;
181
+ margin-left: 0px;
182
+ }
183
+ .ypmini-checkbox-group .ypmini-checkbox:not(:first-child) {
184
+ margin-left: 24px;
185
+ margin-top: 0px;
186
+ }
187
+
188
+ :root,
189
+ page {
190
+ --ypmini-hd: 2;
191
+ --yp-color-primary: #0092ff;
192
+ --yp-color-text: rgba(0, 0, 0, 0.85);
193
+ --yp-color-text-light: #0092ff;
194
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
195
+ --yp-border-color: #e9edf3;
196
+ --yp-color-text-primary: #333;
197
+ --yp-color-text-link: var(--yp-color-primary);
198
+ --yp-color-text-secondary: #666;
199
+ --yp-color-text-disabled: #ccc;
200
+ --yp-color-text-placeholder: #999;
201
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
202
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
203
+ --yp-radio-button-checked-color: var(--yp-color-primary);
204
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
205
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
206
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
207
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
208
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
209
+ }
210
+ :root,
211
+ page {
212
+ --form-item-label-width: calc(60px * var(--ypmini-hd));
213
+ }
214
+ .ypmini-form.ypmini-form-vertical .ypmini-form-item .yp-form-item-label {
215
+ margin-bottom: 24px;
216
+ padding-top: 32px;
217
+ }
218
+ .ypmini-form.ypmini-form-vertical .ypmini-form-item:not(:first-child) {
219
+ margin-top: 32px;
220
+ }
221
+ .ypmini-form.ypmini-form-horizontal .ypmini-form-item {
222
+ display: flex;
223
+ align-items: center;
224
+ }
225
+ .ypmini-form.ypmini-form-horizontal .ypmini-form-item .yp-form-item-label {
226
+ width: var(--form-item-label-width);
227
+ text-align: left;
228
+ }
229
+ .ypmini-form.ypmini-form-horizontal .ypmini-form-item .yp-form-item-children {
230
+ flex: 1;
231
+ }
232
+ .ypmini-form.ypmini-form-horizontal .ypmini-form-item:not(:first-child) {
233
+ margin-top: 32px;
234
+ }
235
+ .ypmini-form-item-required .yp-form-item-label::before {
236
+ content: '*';
237
+ color: red;
238
+ }
239
+ .ypmini-form-item .yp-form-item-label {
240
+ color: #000000d9;
241
+ font-weight: bold;
242
+ font-size: 38px;
243
+ }
244
+
245
+ :root,
246
+ page {
247
+ --ypmini-hd: 2;
248
+ --yp-color-primary: #0092ff;
249
+ --yp-color-text: rgba(0, 0, 0, 0.85);
250
+ --yp-color-text-light: #0092ff;
251
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
252
+ --yp-border-color: #e9edf3;
253
+ --yp-color-text-primary: #333;
254
+ --yp-color-text-link: var(--yp-color-primary);
255
+ --yp-color-text-secondary: #666;
256
+ --yp-color-text-disabled: #ccc;
257
+ --yp-color-text-placeholder: #999;
258
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
259
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
260
+ --yp-radio-button-checked-color: var(--yp-color-primary);
261
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
262
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
263
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
264
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
265
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
266
+ }
267
+ :root,
268
+ page {
269
+ --input-placeholder-color: rgba(0, 0, 0, 0.25);
270
+ --input-text-color: var(--yp-color-text);
271
+ --input-font-size: var(--yp-font-size-default);
272
+ }
273
+ .ypmini-taro-input-wrapper {
274
+ display: flex;
275
+ font-size: var(--input-font-size);
276
+ padding: 32px 24px;
277
+ border-radius: 16px;
278
+ border: 2px solid #e9edf3;
279
+ box-sizing: border-box;
280
+ }
281
+ .ypmini-taro-input-borderless-wrapper {
282
+ border: unset;
283
+ }
284
+ .ypmini-taro-input {
285
+ color: var(--input-text-color);
286
+ flex: 1;
287
+ border: none;
288
+ }
289
+ .ypmini-taro-input input::placeholder {
290
+ color: var(--input-placeholder-color);
291
+ }
292
+ .ypmini-input-placeholder {
293
+ color: var(--input-placeholder-color);
294
+ }
295
+ .ypmini-taro-input-count {
296
+ color: rgba(0, 0, 0, 0.45);
297
+ font-size: 30px;
298
+ display: flex;
299
+ align-items: center;
300
+ margin-left: 8px;
301
+ }
302
+ .ypmini-taro-input-count .ypmini-taro-input-count-current-light {
303
+ color: var(--yp-color-text-light);
304
+ }
305
+
306
+ :root,
307
+ page {
308
+ --ypmini-hd: 2;
309
+ --yp-color-primary: #0092ff;
310
+ --yp-color-text: rgba(0, 0, 0, 0.85);
311
+ --yp-color-text-light: #0092ff;
312
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
313
+ --yp-border-color: #e9edf3;
314
+ --yp-color-text-primary: #333;
315
+ --yp-color-text-link: var(--yp-color-primary);
316
+ --yp-color-text-secondary: #666;
317
+ --yp-color-text-disabled: #ccc;
318
+ --yp-color-text-placeholder: #999;
319
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
320
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
321
+ --yp-radio-button-checked-color: var(--yp-color-primary);
322
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
323
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
324
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
325
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
326
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
327
+ }
328
+ .ypmini-radio-group {
329
+ display: flex;
330
+ width: 100%;
331
+ }
332
+ .ypmini-radio-group-block {
333
+ display: block;
334
+ }
335
+ .ypmini-radio-group-button {
336
+ display: flex;
337
+ }
338
+ .ypmini-radio-group .ypmini-taro-radio-button {
339
+ flex: 1;
340
+ }
341
+ .ypmini-radio-group .ypmini-taro-radio:not(:first-child) {
342
+ margin-left: 24px;
343
+ }
344
+
345
+ :root,
346
+ page {
347
+ --ypmini-hd: 2;
348
+ --yp-color-primary: #0092ff;
349
+ --yp-color-text: rgba(0, 0, 0, 0.85);
350
+ --yp-color-text-light: #0092ff;
351
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
352
+ --yp-border-color: #e9edf3;
353
+ --yp-color-text-primary: #333;
354
+ --yp-color-text-link: var(--yp-color-primary);
355
+ --yp-color-text-secondary: #666;
356
+ --yp-color-text-disabled: #ccc;
357
+ --yp-color-text-placeholder: #999;
358
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
359
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
360
+ --yp-radio-button-checked-color: var(--yp-color-primary);
361
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
362
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
363
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
364
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
365
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
366
+ }
367
+ :root,
368
+ page {
369
+ --radio-button-font-size: calc(17px * var(--ypmini-hd));
370
+ --radio-button-border-radius: calc(8px * var(--ypmini-hd));
371
+ --radio-button-background-color: #f5f7fc;
372
+ --radio-button-text-color: #000000d9;
373
+ --radio-button-checked-background-color: #e0f3ff;
374
+ --radio-button-checked-text-color: var(--yp-color-primary);
375
+ --radio-button-checked-border-color: var(--yp-color-primary);
376
+ --radio-button-height: calc(52px * var(--ypmini-hd));
377
+ }
378
+ .ypmini-taro-radio-button-inner {
379
+ background-color: var(--radio-button-background-color);
380
+ color: var(--radio-button-text-color);
381
+ font-size: var(--radio-button-font-size);
382
+ text-align: center;
383
+ padding: 0px 32px;
384
+ height: var(--radio-button-height);
385
+ line-height: var(--radio-button-height);
386
+ box-sizing: border-box;
387
+ border-radius: var(--radio-button-border-radius);
388
+ }
389
+ .ypmini-taro-radio-button-inner-checked {
390
+ background-color: var(--radio-button-checked-background-color);
391
+ color: var(--radio-button-checked-text-color);
392
+ border-color: var(--radio-button-checked-border-color);
393
+ border-width: 2px;
394
+ border-style: solid;
395
+ }
396
+
397
+ :root,
398
+ page {
399
+ --ypmini-hd: 2;
400
+ --yp-color-primary: #0092ff;
401
+ --yp-color-text: rgba(0, 0, 0, 0.85);
402
+ --yp-color-text-light: #0092ff;
403
+ --yp-color-text-weak: rgba(0, 0, 0, 0.45);
404
+ --yp-border-color: #e9edf3;
405
+ --yp-color-text-primary: #333;
406
+ --yp-color-text-link: var(--yp-color-primary);
407
+ --yp-color-text-secondary: #666;
408
+ --yp-color-text-disabled: #ccc;
409
+ --yp-color-text-placeholder: #999;
410
+ --yp-font-size-default: calc(17px * var(--ypmini-hd));
411
+ --yp-radio-circle-checked-color: var(--yp-color-primary);
412
+ --yp-radio-button-checked-color: var(--yp-color-primary);
413
+ --yp-checkbox-circle-checked-color: var(--yp-color-primary);
414
+ --yp-checkbox-button-checked-color: var(--yp-color-primary);
415
+ --yp-border-radius-base: calc(4px * var(--ypmini-hd));
416
+ --yp-border-radius-button: calc(8px * var(--ypmini-hd));
417
+ --yp-space-horizontal-base: calc(12px * var(--ypmini-hd));
418
+ }
419
+ :root,
420
+ page {
421
+ --toast-z-index: 9999;
422
+ }
423
+ .ypmini-toast-container {
424
+ position: fixed;
425
+ top: 50%;
426
+ left: 50%;
427
+ transform: translate(-50%, -50%);
428
+ background: rgba(0, 0, 0, 0.7);
429
+ color: #fff;
430
+ padding: 24px;
431
+ border-radius: 8px;
432
+ display: flex;
433
+ align-items: center;
434
+ z-index: var(--toast-z-index);
435
+ max-width: 80%;
436
+ height: auto;
437
+ word-break: break-word;
438
+ }
439
+ .ypmini-toast-content {
440
+ font-size: 28px;
441
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yup/taro-ui",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "description": "鱼泡 Taro UI组件库",
5
5
  "type": "module",
6
6
  "main": "es/index.js",
@@ -81,6 +81,7 @@
81
81
  "eslint-webpack-plugin": "^5.0.2",
82
82
  "globals": "^15.9.0",
83
83
  "gulp": "^5.0.0",
84
+ "gulp-clean-css": "^4.3.0",
84
85
  "gulp-concat": "^2.6.1",
85
86
  "gulp-copy": "^4.0.1",
86
87
  "gulp-less": "^5.0.0",
@@ -116,8 +117,11 @@
116
117
  "react-dom": "^18.2.0"
117
118
  },
118
119
  "dependencies": {
119
- "@yup/taro-checkbox": "^0.9.1",
120
- "@yup/taro-form": "^0.9.1",
121
- "@yup/taro-radio": "^0.9.1"
120
+ "@yup/taro-checkbox": "^0.13.7",
121
+ "@yup/taro-form": "^0.13.7",
122
+ "@yup/taro-radio": "^0.13.7"
123
+ },
124
+ "overrides": {
125
+ "minimatch": "^5.1.0"
122
126
  }
123
127
  }