@cloudbase/weda-ui 3.1.0 → 3.1.3

package/dist/web/actions/index.d.ts

@@ -0,0 +1,2 @@
+export { default as showToast } from "./showToast";
+export { default as showModal } from "./showModal";

package/dist/web/actions/index.js

@@ -0,0 +1,2 @@
+export { default as showToast } from './showToast';
+export { default as showModal } from './showModal';

package/dist/web/actions/showModal/index.d.ts

@@ -0,0 +1,3 @@
+export default function showModal({ data }: {
+    data: any;
+}): Promise<unknown>;

package/dist/web/actions/showModal/index.js

@@ -0,0 +1,66 @@
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
+import { Modal, Button, Text, ConfigProvider } from 'tea-component';
+import { noop } from '../../utils/constant';
+const ModalShow = forwardRef(function ModalShow(props, ref) {
+    const [visible, setVisible] = useState(false);
+    // 渲染之后，马上显示
+    useEffect(() => {
+        setVisible(true);
+    }, []);
+    // 实例 ref 到外部
+    useImperativeHandle(ref, () => ({ setVisible }));
+    return React.createElement(Modal, { ...props, visible: visible });
+});
+function show(options) {
+    const el = document.createElement('div');
+    const instanceRef = React.createRef();
+    ReactDOM.render(React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement(ModalShow, { ...options, ref: instanceRef, onExited: () => ReactDOM.unmountComponentAtNode(el) })), el);
+    return {
+        destroy: () => {
+            if (instanceRef.current) {
+                instanceRef.current.setVisible(false);
+            }
+        },
+    };
+}
+export default async function showModal({ data }) {
+    const { title, content, showCancel, cancelText = '取消', cancelColor, confirmText = '确定', confirmColor, success = noop, fail = noop, complete = noop, } = data;
+    return new Promise((resolve) => {
+        const base = { cancel: false, confirm: false, content: null };
+        const modal = show({
+            caption: title,
+            children: (React.createElement(React.Fragment, null,
+                React.createElement(Modal.Body, null, content),
+                React.createElement(Modal.Footer, null,
+                    React.createElement(Button
+                    // type="primary"
+                    , { 
+                        // type="primary"
+                        onClick: () => {
+                            resolve({ ...base, confirm: true });
+                            modal.destroy();
+                        } },
+                        React.createElement(Text, { style: { color: confirmColor } }, confirmText)),
+                    showCancel && (React.createElement(Button, { onClick: () => {
+                            resolve({ ...base, cancel: true });
+                            modal.destroy();
+                        } },
+                        React.createElement(Text, { style: { color: cancelColor } }, cancelText)))))),
+            onClose: () => {
+                resolve({ ...base, cancel: true });
+                modal.destroy();
+            },
+        });
+    }).then((res) => {
+        success && success(res);
+        return res;
+    }, (e) => {
+        // console.log(e);
+        fail && fail();
+        complete && complete();
+        throw e;
+    });
+}

package/dist/web/actions/showToast/index.d.ts

@@ -0,0 +1 @@
+export default function showToast(): void;

package/dist/web/actions/showToast/index.js

@@ -0,0 +1,3 @@
+export default function showToast( /* { data, event } */) {
+    // console.log({ data, event });
+}

package/dist/web/components/auth/index.d.ts

@@ -0,0 +1,10 @@
+declare function Auth({ className }: {
+    className: any;
+}): JSX.Element;
+declare namespace Auth {
+    namespace propTypes {
+        const className: PropTypes.Requireable<string>;
+    }
+}
+export default Auth;
+import * as PropTypes from "prop-types";

package/dist/web/components/auth/index.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import classNames from '../../utils/classnames';
+import { getCloudInstance } from '../../utils/tcb';
+import { CloudbaseAuthenticator, onAuthUIStateChange, AUTHSTATE, LOGINTYPE, CloudbaseSignOut, } from '@cloudbase/ui-react';
+export default function Auth({ className }) {
+    const cls = classNames({
+        [className]: className,
+    });
+    const [authState, setAuthState] = React.useState(AUTHSTATE.SIGNIN);
+    const [user, setUser] = React.useState({});
+    const [tcb, setTcb] = React.useState(undefined);
+    React.useEffect(() => {
+        async function createTcb() {
+            // 创建Tcb实例
+            const app = await getCloudInstance();
+            setTcb(app);
+            // console.log('<<<<<weda', app);
+            onAuthUIStateChange(app, (nextAuthState, authData) => {
+                // console.log('call');
+                // console.log('<<<<<nextAuthState', nextAuthState);
+                // console.log('<<<<<authData', authData);
+                setAuthState(nextAuthState);
+                setUser(authData);
+            });
+        }
+        createTcb();
+    }, []);
+    // console.log('<<<<<<<wedaaaa', tcb);
+    return tcb ? (authState === AUTHSTATE.SIGNEDIN && user ? (React.createElement("div", { className: cls },
+        React.createElement("header", { className: "tcb-header" },
+            React.createElement(CloudbaseSignOut, { app: tcb })))) : (React.createElement("div", { className: cls },
+        React.createElement(CloudbaseAuthenticator, { userLoginType: LOGINTYPE.PHONE, isUsePassword: false, app: tcb })))) : null;
+}
+Auth.propTypes = {
+    className: PropTypes.string,
+};

package/dist/web/components/button/index.css

@@ -0,0 +1,27 @@
+.weda-button.weui-btn.weui-btn_primary:not(.weui-btn_disabled):active {
+  background-color: var(--weui-TAG-TEXT-BLUE);
+}
+
+.weda-button.weui-btn_primary {
+  background-color: var(--weui-BRAND);
+}
+
+.weda-button.weui-btn.weui-btn_primary.weui-btn_wechat:not(.weui-btn_disabled):active {
+  background-color: var(--weui-TAG-TEXT-GREEN);
+}
+
+.weda-button.weui-btn_primary.weui-btn_wechat {
+  background-color: var(--weui-WECHAT);
+}
+
+.weda-button.weda-button-mini {
+  font-size: smaller;
+}
+.weda-button.weda-button-large {
+  font-size: large;
+  display: block;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  text-align: center;
+  width: 100%;
+}

package/dist/web/components/button/index.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+import './index.css';
+declare const Button: ({ text, size, type, contentSlot, formType, loading, disabled, events, className, style, id, }: PropsType) => JSX.Element;
+export interface PropsType extends CommonPropsType {
+    /**
+     * 内容
+     */
+    text?: string;
+    /**
+     * 样式类型
+     */
+    type?: 'primary' | 'warn' | 'wechat' | 'default';
+    /**
+     * 大小
+     */
+    size?: 'default' | 'mini' | 'large';
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 加载中
+     */
+    loading?: boolean;
+    /**
+     * 用于 form 类型
+     */
+    formType?: 'button' | 'submit' | 'reset';
+    contentSlot?: string;
+}
+export default Button;

package/dist/web/components/button/index.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Button as TeaButton, ConfigProvider, } from 'tea-component';
+import classNames from '../../utils/classnames';
+import { usePlatform } from '../../utils/platform';
+import './index.css';
+import { emptyObject } from '../../utils/constant';
+// 不用 react-weui 而直接用底层实现的原因是 react-weui 不能支持表单类型
+const Button = ({ text, size, type, contentSlot, formType, loading, disabled, events = emptyObject, className, style, id, }) => {
+    const platform = usePlatform();
+    const isH5 = platform === 'h5';
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-button': true,
+        'weda-button-large': size === 'large',
+        'weda-button-mini': size === 'mini',
+        'weui-btn': isH5,
+        'weui-btn_mini': isH5 && size === 'mini',
+        'weui-btn_primary': isH5 && (type === 'primary' || type === 'wechat'),
+        'weui-btn_default': isH5 && type === 'default',
+        'weui-btn_warn': isH5 && type === 'warn',
+        'weui-btn_wechat': isH5 && type === 'wechat',
+        'weui-btn_disabled': isH5 && disabled,
+        [className]: className,
+    });
+    const onClick = (e) => {
+        if (events.tap) {
+            events.tap({}, { originEvent: e });
+        }
+    };
+    if (platform === 'h5') {
+        return (React.createElement("button", { className: cls, disabled: disabled, type: formType, style: style, id: id, onClick: onClick },
+            loading && (React.createElement("span", { className: "weui-btn_loading" },
+                React.createElement("i", { className: "weui-loading" }))),
+            text ? text : contentSlot));
+    }
+    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement(TeaButton, { loading: loading, onClick: onClick, disabled: disabled, htmlType: formType, type: toTeaButtonType(type), style: style, className: cls, id: id }, text ? text : contentSlot)));
+};
+function toTeaButtonType(type) {
+    if (type === 'primary')
+        return type;
+    if (type === 'warn')
+        return 'error';
+    if (type === 'default')
+        return 'primary';
+    return 'primary';
+}
+export default Button;

package/dist/web/components/calendar/index.css

@@ -0,0 +1,416 @@
+/* weda_calendar */
+
+.weda-calendar {
+  font-size: 1rem;
+}
+
+/* pc 日历样式 start */
+.weda-calendar.weda-calendar-pc {
+  background: #ffffff;
+  border: 0.03571rem solid #dcdcdc;
+  box-sizing: border-box;
+  box-shadow: 0 0.21429rem 1rem 0.14286rem rgba(0, 0, 0, 0.05),
+    0 0.57143rem 0.71429rem 0.07143rem rgba(0, 0, 0, 0.06), 0 0.35714rem 0.35714rem -0.21429rem rgba(0, 0, 0, 0.1);
+  border-radius: 0.21429rem;
+  min-width: 40rem;
+}
+
+.weda-calendar-pc .weda-calendar__control_h5 {
+  display: none;
+}
+
+.weda-calendar-pc .weda-calendar__control_pc {
+  padding: 2.28571rem;
+  display: flex;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.weda-calendar-pc .weda-calendar__control-section {
+  display: flex;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+  margin-right: 1.14286rem;
+}
+
+.weda-calendar-pc .weda-calendar__control-section:last-child {
+  margin-right: 0;
+}
+
+.weda-calendar-pc
+  .weda-calendar__control-section
+  .weda-calendar__control-section-cell {
+  height: 100%;
+  margin-right: 0.57143rem;
+}
+
+.weda-calendar-pc
+  .weda-calendar__control-section
+  .weda-calendar__control-section-cell:last-child {
+  margin-right: 0;
+}
+
+.weda-calendar-pc .weda-calendar__control_pc .weda-calendar__current-date {
+  font-size: 1em;
+  line-height: 1.57142em;
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.weda-calendar-pc .weda-calendar__panel {
+  position: relative;
+  padding: 0 2.28571rem 2.28571rem 2.28571rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.weda-calendar .weda-calendar__table {
+  font-size: inherit;
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.weda-calendar .weda-calendar__table .weda-calendar__table-head {
+  display: block;
+  width: 100%;
+  margin-bottom: 0.57143rem;
+  box-sizing: border-box;
+}
+
+.weda-calendar .weda-calendar__table .weda-calendar__table-head-row,
+.weda-calendar .weda-calendar__table .weda-calendar__table-body-row {
+  display: flex;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  width: 100%;
+  padding-bottom: 0;
+}
+
+.weda-calendar .weda-calendar__table .weda-calendar__table-head-cell {
+  cursor: default;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  height: 100%;
+  padding: 0;
+  font-size: 1em;
+  line-height: 1.57142em;
+  color: rgba(0, 0, 0, 0.6);
+  margin-right: 0.85714rem;
+  position: relative;
+}
+
+.weda-calendar .weda-calendar__table .weda-calendar__table-head-cell:last-child,
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell:last-child {
+  margin-right: 0;
+}
+
+.weda-calendar .weda-calendar__table .weda-calendar__table-body {
+  width: 100%;
+}
+
+.weda-calendar .weda-calendar__table .weda-calendar__table-body-cell {
+  flex: 1;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  border-top: 0.07143rem solid #e7e7e7;
+  padding: 0;
+  height: 6.24286rem;
+  display: flex;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  align-items: flex-end;
+  margin-left: 0;
+  margin-right: 0.85714rem;
+  position: relative;
+  justify-content: flex-start;
+  color: rgba(0, 0, 0, 0.26);
+}
+
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-disabled,
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-invalid {
+  cursor: not-allowed;
+}
+
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-invalid {
+  background: #f3f3f3;
+}
+
+.weda-calendar .weda-calendar__table .weda-calendar__table-body-cell.is-now {
+  border-top-color: #0052d9;
+  background: #ecf2fe;
+}
+
+.weda-calendar .weda-calendar__table .weda-calendar__table-body-cell-value {
+  font-size: 1em;
+  font-weight: 400;
+  line-height: 1.57142em;
+  color: rgba(0, 0, 0, 0.9);
+  margin-top: 0.21429rem;
+  position: relative;
+}
+
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-disabled
+  .weda-calendar__table-body-cell-value {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell
+  .weda-calendar__table-body-cell-marked {
+  position: absolute;
+  width: 0.42857rem;
+  height: 0.42857rem;
+  border-radius: 50%;
+  left: 50%;
+  transform: translate(-50%);
+  bottom: -0.71429rem;
+}
+
+/* pc 日历样式 end */
+
+/* h5 日历样式 start */
+
+.weda-calendar.weda-calendar-h5 {
+  background: #ffffff;
+  width: 100%;
+  opacity: 0.9;
+}
+
+.weda-calendar-h5 .weda-calendar__control_pc {
+  display: none;
+}
+
+.weda-calendar__control_h5 {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 1.14286rem 1.14286rem 0 1.14286rem;
+  position: relative;
+  text-align: center;
+}
+.weda-calendar__control_h5 .wedatea2td-icon-arrowleft--line,
+.weda-calendar__control_h5 .wedatea2td-icon-arrowright--line {
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+
+.weda-calendar__control_h5
+  .weda-calendar_prevMonth.wedatea2td-icon-arrowleft--line,
+.weda-calendar__control_h5
+  .weda-calendar_nextMonth.wedatea2td-icon-arrowright--line {
+  position: absolute;
+  top: 1.21429rem;
+  width: 1.42857em;
+  height: 1.42857em;
+}
+
+.weda-calendar__control_h5
+  .weda-calendar_prevMonth.wedatea2td-icon-arrowleft--line {
+  left: 1.14286rem;
+}
+.weda-calendar__control_h5
+  .weda-calendar_nextMonth.wedatea2td-icon-arrowright--line {
+  right: 1.14286rem;
+}
+
+.weda-calendar__control_h5 .weda-calendar__current-date {
+  font-size: 1em;
+  line-height: 1.57142em;
+  font-weight: bold;
+}
+
+.weda-calendar-h5 .weda-calendar__panel {
+  height: 21.85714em;
+  padding: 1.42857rem 1.14286rem 1.14286rem 1.14286rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.weda-calendar-h5 .weda-calendar__table {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  justify-self: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+
+.weda-calendar-h5 .weda-calendar__table .weda-calendar__table-head {
+  margin-bottom: 0;
+}
+
+.weda-calendar-h5 .weda-calendar__table .weda-calendar__table-head-cell {
+  font-size: 0.85714em;
+  line-height: 1.42857rem;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 0.85714em;
+  line-height: 1.428571em;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.weda-calendar-h5 .weda-calendar__table-body {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  justify-self: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.weda-calendar-h5 .weda-calendar__table-body .weda-calendar__table-body-row {
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  flex: 1;
+}
+
+.weda-calendar-h5 .weda-calendar__table-body .weda-calendar__table-body-cell {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: none;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 0.85714em;
+  line-height: 1.42857em;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  flex-direction: row;
+}
+
+.weda-calendar-h5 .weda-calendar__table .weda-calendar__table-body-cell.is-now {
+  border: none;
+  background: transparent;
+}
+
+.weda-calendar-h5
+  .weda-calendar__table-body
+  .weda-calendar__table-body-cell-value {
+  font-size: 1em;
+  text-align: center;
+  border-radius: 50%;
+  width: 2.85714rem;
+  line-height: 2.85714em;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-now
+  .weda-calendar__table-body-cell-value {
+  color: #fff;
+}
+
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-now
+  .weda-calendar__table-body-cell-bg {
+  position: absolute;
+  width: 1.714285em;
+  height: 1.714285em;
+  background: #0052d9;
+  border-radius: 100%;
+  left: calc(50% - 0.85714em);
+  top: calc(50% - 0.85714em);
+  z-index: -1;
+}
+
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell
+  .weda-calendar__table-body-cell-marked {
+  width: 0.28571rem;
+  height: 0.28571rem;
+  top: calc(50% + 1rem);
+}
+
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-disabled
+  .weda-calendar__table-body-cell-value {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-invalid {
+  background: transparent;
+}
+
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-invalid
+  .weda-calendar__table-body-cell-value {
+  color: #c5c5c5;
+}
+
+/* h5 日历样式 end */

package/dist/web/components/calendar/index.d.ts

@@ -0,0 +1,19 @@
+declare function Calendar({ className, style, initVisible, initValue, configData, }: {
+    className: any;
+    style: any;
+    initVisible: any;
+    initValue: any;
+    configData?: readonly [];
+}): JSX.Element;
+declare namespace Calendar {
+    namespace propTypes {
+        const className: PropTypes.Requireable<string>;
+        const style: PropTypes.Requireable<object>;
+        const initValue: PropTypes.Requireable<string>;
+        const platform: PropTypes.Requireable<string>;
+        const initVisible: PropTypes.Requireable<boolean>;
+        const configData: PropTypes.Requireable<any[]>;
+    }
+}
+export default Calendar;
+import * as PropTypes from "prop-types";