@yup/taro-ui 0.0.1

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

@@ -0,0 +1,33 @@
+:root {
+  --form-item-label-width: 60px;
+}
+.ypmini-form.ypmini-form-vertical .ypmini-form-item .yp-form-item-label {
+  margin-bottom: 12px;
+  padding-top: 16px;
+}
+.ypmini-form.ypmini-form-vertical .ypmini-form-item:not(:first-child) {
+  margin-top: 16px;
+}
+.ypmini-form.ypmini-form-horizontal .ypmini-form-item {
+  display: flex;
+  align-items: center;
+}
+.ypmini-form.ypmini-form-horizontal .ypmini-form-item .yp-form-item-label {
+  width: var(--form-item-label-width);
+  text-align: left;
+}
+.ypmini-form.ypmini-form-horizontal .ypmini-form-item .yp-form-item-children {
+  flex: 1;
+}
+.ypmini-form.ypmini-form-horizontal .ypmini-form-item:not(:first-child) {
+  margin-top: 16px;
+}
+.ypmini-form-item-required .yp-form-item-label::before {
+  content: '*';
+  color: red;
+}
+.ypmini-form-item .yp-form-item-label {
+  color: #000000d9;
+  font-weight: bold;
+  font-size: 19px;
+}

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

@@ -0,0 +1 @@
+import './index.less';

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

@@ -0,0 +1 @@
+import './index.less';

package/es/components/form/style/index.less

@@ -0,0 +1,51 @@
+:root {
+  --form-item-label-width: 60px;
+}
+
+.ypmini-form {
+  &.ypmini-form-vertical {
+    .ypmini-form-item {
+      .yp-form-item-label {
+        margin-bottom: 12px;
+        padding-top: 16px;
+      }
+      &:not(:first-child) {
+        margin-top: 16px;
+      }
+    }
+  }
+  &.ypmini-form-horizontal {
+    .ypmini-form-item {
+      display: flex;
+      align-items: center;
+      .yp-form-item-label {
+        width: var(--form-item-label-width);
+        text-align: left;
+      }
+      .yp-form-item-children {
+        flex: 1;
+      }
+      &:not(:first-child) {
+        margin-top: 16px;
+      }
+    }
+  }
+}
+
+.ypmini-form-item-required {
+  .yp-form-item-label {
+    &::before {
+      content: '*';
+      color: red;
+    }
+  }
+}
+
+.ypmini-form-item {
+  .yp-form-item-label {
+    color: #000000d9;
+    font-weight: bold;
+    font-size: 19px;
+  }
+}
+

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { InputProps as TaroInputProps } from '@tarojs/components';
+export interface InputProps extends TaroInputProps {
+    /**
+     * 是否显示删除按钮
+     */
+    allowClear?: boolean;
+    /**
+     * 自定义删除按钮
+     */
+    clearIcon?: React.ReactNode;
+    /**
+     * 是否显示字数统计
+     */
+    showCount?: boolean;
+    /**
+     * 边框样式 outlined 边框 borderless 无边框
+     */
+    variant?: 'outlined' | 'borderless';
+}
+declare const Input: React.FC<InputProps>;
+export default Input;

package/es/components/input/index.js

@@ -0,0 +1,57 @@
+import {objectWithoutProperties as _objectWithoutProperties,slicedToArray as _slicedToArray,objectSpread2 as _objectSpread2}from'../../_virtual/_rollupPluginBabelHelpers.js';import {j as jsxRuntimeExports}from'../../node_modules/react/jsx-runtime.js';import React from'react';import cns from'../../node_modules/classnames/index.js';import {View,Input as Input$1,Text}from'@tarojs/components';var _excluded = ["variant", "allowClear", "showCount", "clearIcon", "className", "style", "onClick", "onInput", "maxlength", "placeholderStyle", "defaultValue"];
+var Input = function Input(_ref) {
+  _ref.variant;
+    _ref.allowClear;
+    var showCount = _ref.showCount;
+    _ref.clearIcon;
+    var className = _ref.className,
+    style = _ref.style,
+    onClick = _ref.onClick,
+    onInput = _ref.onInput,
+    maxlength = _ref.maxlength;
+    _ref.placeholderStyle;
+    var defaultValue = _ref.defaultValue,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React.useState(defaultValue || ''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    innerValue = _React$useState2[0],
+    setInnerValue = _React$useState2[1];
+  var handleChange = function handleChange(e) {
+    setInnerValue(e.detail.value);
+    onInput && onInput(e);
+  };
+  // 受控
+  React.useEffect(function () {
+    if ("value" in props) {
+      setInnerValue(props.value || "");
+    }
+  }, [props]);
+  return jsxRuntimeExports.jsxs(View, {
+    className: cns("ypmini-taro-input-wrapper", className),
+    style: style,
+    onClick: onClick,
+    children: [jsxRuntimeExports.jsx(Input$1, _objectSpread2({
+      placeholderStyle: "font-size: 17px;color: #00000040;",
+      placeholderTextColor: "#00000040",
+      value: innerValue,
+      onInput: handleChange,
+      maxlength: maxlength,
+      className: "ypmini-taro-input"
+    }, props)), jsxRuntimeExports.jsx(View, {
+      className: "ypmini-taro-input-clear"
+    }), showCount ? jsxRuntimeExports.jsxs(View, {
+      className: "ypmini-taro-input-count",
+      children: [jsxRuntimeExports.jsx(Text, {
+        className: cns("ypmini-taro-input-count-current", {
+          "ypmini-taro-input-count-current-light": (innerValue === null || innerValue === void 0 ? void 0 : innerValue.length) > 0
+        }),
+        children: innerValue === null || innerValue === void 0 ? void 0 : innerValue.length
+      }), maxlength ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+        children: ["/", jsxRuntimeExports.jsx(Text, {
+          className: "ypmini-taro-input-count-total",
+          children: maxlength || 0
+        })]
+      }) : null]
+    }) : null]
+  });
+};export{Input as default};

package/es/components/input/style/css.js

@@ -0,0 +1 @@
+import './index.css';

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

@@ -0,0 +1,30 @@
+:root {
+  --input-placeholder-color: rgba(0, 0, 0, 0.25);
+  --input-text-color: var(--yp-color-text);
+  --input-font-size: var(--yp-font-size-default);
+}
+.ypmini-taro-input-wrapper {
+  display: flex;
+  font-size: var(--input-font-size);
+  padding: 16px 12px;
+  border-radius: 8px;
+  border: 1px solid #e9edf3;
+  box-sizing: border-box;
+}
+.ypmini-taro-input {
+  color: var(--input-text-color);
+  flex: 1;
+  border: none;
+}
+.ypmini-input-placeholder {
+  color: var(--input-placeholder-color);
+}
+.ypmini-taro-input-count {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+}
+.ypmini-taro-input-count .ypmini-taro-input-count-current-light {
+  color: var(--yp-color-text-light);
+}

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

@@ -0,0 +1 @@
+import './index.less';

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

@@ -0,0 +1 @@
+import './index.less';

package/es/components/input/style/index.less

@@ -0,0 +1,36 @@
+:root {
+  --input-placeholder-color: rgba(0, 0, 0, 0.25);
+  --input-text-color: var(--yp-color-text);
+  --input-font-size: var(--yp-font-size-default);
+}
+
+.ypmini-taro-input-wrapper {
+
+  display: flex;
+  font-size: var(--input-font-size);
+  padding: 16px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(233, 237, 243, 1);
+  box-sizing: border-box;
+}
+
+.ypmini-taro-input {
+  color: var(--input-text-color);
+  flex: 1;
+  border: none;
+}
+
+.ypmini-input-placeholder {
+  color: var(--input-placeholder-color);
+}
+
+.ypmini-taro-input-count {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+
+  .ypmini-taro-input-count-current-light {
+    color: var(--yp-color-text-light);
+  }
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RadioProps as YpRadioProps } from '@yup/taro-radio';
+import RadioGroup from './radio-group';
+export interface RadioProps extends YpRadioProps {
+    /**
+     * button按钮样式，auto默认选中样式
+     */
+    type?: 'button' | 'default';
+}
+declare const Radio: React.FC<RadioProps> & {
+    Group: typeof RadioGroup;
+};
+export default Radio;

package/es/components/radio/index.js

@@ -0,0 +1,18 @@
+import {objectWithoutProperties as _objectWithoutProperties,objectSpread2 as _objectSpread2}from'../../_virtual/_rollupPluginBabelHelpers.js';import {j as jsxRuntimeExports}from'../../node_modules/react/jsx-runtime.js';import {View}from'@tarojs/components';import cns from'../../node_modules/classnames/index.js';import YpRadio from'@yup/taro-radio';import RadioGroup from'./radio-group.js';var _excluded = ["children", "type"];
+var Radio = function Radio(_ref) {
+  var children = _ref.children;
+    _ref.type;
+    var rstProps = _objectWithoutProperties(_ref, _excluded);
+  return jsxRuntimeExports.jsx(YpRadio, _objectSpread2({
+    className: 'ypmini-taro-radio',
+    icon: function icon(checked) {
+      return jsxRuntimeExports.jsx(View, {
+        className: cns("ypmini-taro-radio-button", {
+          'ypmini-taro-radio-button-checked': checked
+        }),
+        children: children
+      });
+    }
+  }, rstProps));
+};
+Radio.Group = RadioGroup;export{Radio as default};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { RadioGroupProps as YpRadioGroupProps } from '@yup/taro-radio/dist/types/type';
+export interface RadioGroupProps extends YpRadioGroupProps {
+    /**
+     * button按钮样式，auto默认选中样式
+     */
+    type?: 'button' | 'default';
+}
+declare const RadioGroup: React.FC<RadioGroupProps>;
+export default RadioGroup;

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

@@ -0,0 +1,16 @@
+import {objectWithoutProperties as _objectWithoutProperties,objectSpread2 as _objectSpread2}from'../../_virtual/_rollupPluginBabelHelpers.js';import {j as jsxRuntimeExports}from'../../node_modules/react/jsx-runtime.js';import cns from'../../node_modules/classnames/index.js';import YpRadio from'@yup/taro-radio';var _excluded = ["children", "type", "block"];
+var RadioGroup = function RadioGroup(_ref) {
+  var children = _ref.children,
+    type = _ref.type,
+    _ref$block = _ref.block,
+    block = _ref$block === void 0 ? false : _ref$block,
+    rst = _objectWithoutProperties(_ref, _excluded);
+  return jsxRuntimeExports.jsx(YpRadio.Group, _objectSpread2(_objectSpread2({
+    className: cns("ypmini-radio-group", {
+      'ypmini-radio-group--button': type === 'button',
+      'ypmini-radio-group--block': block
+    })
+  }, rst), {}, {
+    children: children
+  }));
+};export{RadioGroup as default};

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

@@ -0,0 +1,2 @@
+import './radio.css';
+import './group.css';

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

@@ -0,0 +1,12 @@
+.ypmini-radio-group {
+  display: flex;
+}
+.ypmini-radio-group-block {
+  display: block;
+}
+.ypmini-radio-group .ypmini-taro-radio {
+  flex: 1;
+}
+.ypmini-radio-group .ypmini-taro-radio:not(:first-child) {
+  margin-left: 12px;
+}

package/es/components/radio/style/group.less

@@ -0,0 +1,12 @@
+.ypmini-radio-group {
+  display: flex;
+  &-block {
+    display: block;
+  }
+  .ypmini-taro-radio {
+    flex: 1;
+    &:not(:first-child) {
+      margin-left: 12px;
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+import './radio.less';
+import './group.less';

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

@@ -0,0 +1,2 @@
+import './radio.less';
+import './group.less';

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

@@ -0,0 +1,28 @@
+:root {
+  --radio-button-font-size: 17px;
+  --radio-button-border-radius: 8px;
+  --radio-button-background-color: #f5f7fc;
+  --radio-button-text-color: #000000d9;
+  --radio-button-checked-background-color: #e0f3ff;
+  --radio-button-checked-text-color: var(--yp-color-primary);
+  --radio-button-checked-border-color: var(--yp-color-primary);
+  --radio-button-height: 52px;
+}
+.ypmini-taro-radio-button {
+  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 16px;
+  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-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: 1px;
+  border-style: solid;
+}

package/es/components/radio/style/radio.less

@@ -0,0 +1,32 @@
+:root {
+  --radio-button-font-size: 17px;
+  --radio-button-border-radius: 8px;
+  --radio-button-background-color: #f5f7fc;
+  --radio-button-text-color: #000000d9;
+  --radio-button-checked-background-color: #e0f3ff;
+  --radio-button-checked-text-color: var(--yp-color-primary);
+  --radio-button-checked-border-color: var(--yp-color-primary);
+  --radio-button-height: 52px;
+}
+.ypmini-taro-radio {
+
+  &-button {
+    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 16px;
+    height: var(--radio-button-height);
+    line-height: var(--radio-button-height);
+    box-sizing: border-box;
+    border-radius: var(--radio-button-border-radius);
+  }
+
+  &-button-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: 1px;
+    border-style: solid;
+  }
+}

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

@@ -0,0 +1,2 @@
+import Toast from "./toast";
+export default Toast;

package/es/components/toast/index.js

@@ -0,0 +1 @@
+import Toast from'./toast.js';import withToast from'./withToast.js';Toast.withToast = withToast;export{Toast as default};

package/es/components/toast/style/css.js

@@ -0,0 +1 @@
+import './index.css';

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

@@ -0,0 +1,22 @@
+:root {
+  --toast-z-index: 9999;
+}
+.ypmini-toast-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  padding: 12px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  z-index: var(--toast-z-index);
+  max-width: 80%;
+  height: auto;
+  word-break: break-word;
+}
+.ypmini-toast-content {
+  font-size: 14px;
+}

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

@@ -0,0 +1 @@
+import './index.less';

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

@@ -0,0 +1 @@
+import './index.less';

package/es/components/toast/style/index.less

@@ -0,0 +1,23 @@
+:root {
+  --toast-z-index: 9999;
+}
+.ypmini-toast-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0,0,0,0.7);
+  color: #fff;
+  padding: 12px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  z-index: var(--toast-z-index);
+  max-width: 80%;
+  height: auto;
+  word-break: break-word;
+}
+
+.ypmini-toast-content {
+  font-size: 14px;
+}

package/es/components/toast/toast.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ViewProps } from '@tarojs/components';
+export interface ToastProps extends ViewProps {
+    content?: React.ReactNode;
+    duration?: number;
+    className?: string;
+}
+export interface ToastRefType {
+    show: (options: ToastProps | string) => void;
+    hide: () => void;
+}
+declare const _default: {
+    createToast: Function;
+    show: (options: ToastProps) => void;
+    hide: () => void;
+    withToast: (Component: React.FC) => React.FC;
+};
+export default _default;

package/es/components/toast/toast.js

@@ -0,0 +1,89 @@
+import {slicedToArray as _slicedToArray,objectWithoutProperties as _objectWithoutProperties,objectSpread2 as _objectSpread2}from'../../_virtual/_rollupPluginBabelHelpers.js';import {j as jsxRuntimeExports}from'../../node_modules/react/jsx-runtime.js';import React,{useState}from'react';import {View,Text}from'@tarojs/components';import cns from'../../node_modules/classnames/index.js';import {isNumber}from'../../utils/is.js';var _excluded = ["content", "duration"],
+  _excluded2 = ["className"];
+var toastInstance = {};
+var Toast = React.forwardRef(function (props, ref) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    content = _useState4[0],
+    setContent = _useState4[1];
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    wrapperRstProps = _React$useState2[0],
+    setWrapperRstProps = _React$useState2[1];
+  var durationRef = React.useRef(2000);
+  var timer = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return {
+      show: function show(options) {
+        if (typeof options === 'string') {
+          setContent(options);
+        } else {
+          var _content = options.content,
+            _options$duration = options.duration,
+            duration = _options$duration === void 0 ? 2000 : _options$duration,
+            rst = _objectWithoutProperties(options, _excluded);
+          if (isNumber(duration)) {
+            durationRef.current = duration;
+          }
+          setWrapperRstProps(rst);
+          setContent(_content);
+        }
+        if (timer.current) {
+          clearTimeout(timer.current);
+        }
+        setVisible(true);
+        var t = setTimeout(function () {
+          setVisible(false);
+        }, durationRef.current);
+        timer.current = t;
+      },
+      hide: function hide() {
+        clearTimeout(timer.current);
+        setVisible(false);
+      }
+    };
+  });
+  if (!visible) return null;
+  var _ref = wrapperRstProps || {},
+    className = _ref.className,
+    rstProps = _objectWithoutProperties(_ref, _excluded2);
+  return jsxRuntimeExports.jsx(View, _objectSpread2(_objectSpread2({
+    className: cns('ypmini-toast-container', className)
+  }, rstProps), {}, {
+    children: jsxRuntimeExports.jsx(Text, {
+      className: 'ypmini-toast-content',
+      children: content
+    })
+  }));
+});
+function createToast() {
+  var _toastInstance;
+  if (!((_toastInstance = toastInstance) !== null && _toastInstance !== void 0 && _toastInstance.ref)) {
+    var ref = React.createRef();
+    var ToastWrapper = function ToastWrapper() {
+      return jsxRuntimeExports.jsx(Toast, {
+        ref: ref
+      });
+    };
+    toastInstance = {
+      ref: ref,
+      ToastWrapper: ToastWrapper
+    };
+  }
+  return toastInstance;
+}
+var Toast$1 = {
+  createToast: createToast,
+  show: function show(options) {
+    var _toastInstance2;
+    (_toastInstance2 = toastInstance) === null || _toastInstance2 === void 0 || (_toastInstance2 = _toastInstance2.ref) === null || _toastInstance2 === void 0 || (_toastInstance2 = _toastInstance2.current) === null || _toastInstance2 === void 0 || _toastInstance2.show(options);
+  },
+  hide: function hide() {
+    var _toastInstance3;
+    (_toastInstance3 = toastInstance) === null || _toastInstance3 === void 0 || (_toastInstance3 = _toastInstance3.ref) === null || _toastInstance3 === void 0 || (_toastInstance3 = _toastInstance3.current) === null || _toastInstance3 === void 0 || _toastInstance3.hide();
+  }
+};export{Toast$1 as default};

package/es/components/toast/withToast.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function withToast<P>(WrappedComponent: React.ComponentType<P>): (props: any) => import("react/jsx-runtime").JSX.Element;

package/es/components/toast/withToast.js

@@ -0,0 +1,9 @@
+import {objectSpread2 as _objectSpread2}from'../../_virtual/_rollupPluginBabelHelpers.js';import {j as jsxRuntimeExports}from'../../node_modules/react/jsx-runtime.js';import Toast from'./toast.js';function withToast(WrappedComponent) {
+  var _Toast$createToast = Toast.createToast(),
+    ToastWrapper = _Toast$createToast.ToastWrapper;
+  return function (props) {
+    return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+      children: [jsxRuntimeExports.jsx(ToastWrapper, {}), jsxRuntimeExports.jsx(WrappedComponent, _objectSpread2({}, props))]
+    });
+  };
+}export{withToast as default};

package/es/global/global.less

@@ -0,0 +1 @@
+@import url('./theme-default.less');

package/es/global/index.d.ts

@@ -0,0 +1 @@
+import './global.less';

package/es/global/theme-default.less

@@ -0,0 +1,37 @@
+:root {
+  // 主题色
+  --yp-color-primary: #0092ff;
+  // 基础字体颜色
+  --yp-color-text: rgba(0, 0, 0, 0.85);
+  // 字体高亮
+  --yp-color-text-light: rgba(0, 146, 255, 1);
+  // 弱化的字体颜色
+  --yp-color-text-weak: rgba(0, 0, 0, 0.45);
+  // 边框颜色
+  --yp-border-color: rgba(233, 237, 243, 1);
+
+  // 字体颜色
+  --yp-color-text-primary: #333;
+  --yp-color-text-link:   var(--yp-color-primary);
+  --yp-color-text-secondary: #666;
+  --yp-color-text-disabled: #ccc;
+  --yp-color-text-placeholder: #999;
+
+  // 字体
+  --yp-font-size-default: 17px;
+
+  // radio组件背景色
+  --yp-radio-circle-checked-color: var(--yp-color-primary);
+  --yp-radio-button-checked-color: var(--yp-color-primary);
+
+  // checkbox组件背景色
+  --yp-checkbox-circle-checked-color: var(--yp-color-primary);
+  --yp-checkbox-button-checked-color: var(--yp-color-primary);
+
+  // 圆角
+  --yp-border-radius-base: 4px;
+  --yp-border-radius-button: 8px;
+
+  // 间距
+  --yp-space-horizontal-base: 12px; // 水平间距
+}