@tuya-miniapp/smart-ui 2.3.8-beta-4 → 2.3.8-beta-5

package/example/dist/toast/demo/index.js

@@ -0,0 +1,84 @@
+import { SmartComponent } from '../../common/component';
+import ToastInstance from '../../toast/toast';
+SmartComponent({
+    methods: {
+        showToast() {
+            ToastInstance({
+                context: this,
+                message: I18n.t('promptContent'),
+            });
+        },
+        showLongToast() {
+            ToastInstance({
+                context: this,
+                message: I18n.t('toastDemoTip1'),
+            });
+        },
+        showLoadingToast() {
+            ToastInstance.loading({
+                context: this,
+                message: I18n.t('loading') + '...',
+                forbidClick: true,
+            });
+        },
+        showCustomLoadingToast() {
+            ToastInstance.loading({
+                context: this,
+                message: I18n.t('loading') + '...',
+                forbidClick: true,
+                loadingType: 'spinner',
+            });
+        },
+        showSuccessToast() {
+            ToastInstance.success({ context: this, message: I18n.t('successMessage') });
+        },
+        showFailToast() {
+            ToastInstance.fail({ context: this, message: I18n.t('failurePrompt') });
+        },
+        showWarnToast() {
+            ToastInstance.warn({ context: this, message: I18n.t('warningPrompt') });
+        },
+        showCustomizedToast() {
+            const text = (second) => `${I18n.t('countdown')} ${second} ${I18n.t('second')}`;
+            const toast = ToastInstance.loading({
+                context: this,
+                duration: 0,
+                forbidClick: true,
+                message: text(3),
+            });
+            let second = 3;
+            const timer = setInterval(() => {
+                second--;
+                if (second) {
+                    toast === null || toast === void 0 ? void 0 : toast.setData({ message: text(second) });
+                }
+                else {
+                    clearInterval(timer);
+                    ToastInstance.clear();
+                }
+            }, 1000);
+        },
+        showCustomizedWidthToast() {
+            ToastInstance.loading({
+                context: this,
+                message: I18n.t('loading') + '...',
+                forbidClick: true,
+                width: 200,
+            });
+        },
+        showBottomToast() {
+            ToastInstance({
+                context: this,
+                position: 'bottom',
+                message: I18n.t('promptContent'),
+            });
+        },
+        showTopToast() {
+            ToastInstance({
+                context: this,
+                position: 'top',
+                message: I18n.t('promptContent'),
+            });
+        }
+    },
+});

package/example/dist/toast/demo/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-toast": "../../toast/index",
+    "smart-button": "../../button/index",
+    "demo-block": "../../../components/demo-block/index"
+  }
+}

package/example/dist/toast/demo/index.wxml

@@ -0,0 +1,33 @@
+<demo-block title="{{I18n.t('textPrompt')}}" padding>
+  <smart-button type="primary" bind:tap="showToast" class="demo-margin-right">{{I18n.t('textPrompt')}}</smart-button>
+  <smart-button type="primary" bind:tap="showLongToast">{{I18n.t('longTextPrompt')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('loadingPrompt')}}" padding>
+  <smart-button type="primary" bind:tap="showLoadingToast" class="demo-margin-right">{{I18n.t('loadingPrompt')}}</smart-button>
+  <smart-button type="primary" bind:tap="showCustomLoadingToast">{{I18n.t('customLoadingIcon')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('successFailurePrompt')}}" padding>
+  <smart-button type="info" bind:tap="showSuccessToast" class="demo-margin-right">{{I18n.t('successMessage')}}</smart-button>
+  <smart-button type="danger" bind:tap="showFailToast">{{I18n.t('failurePrompt')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('warningPrompt')}}" padding>
+  <smart-button type="info" bind:tap="showWarnToast" class="demo-margin-right">{{I18n.t('warningPrompt')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('dynamicUpdateNotification')}}" padding>
+  <smart-button type="primary" bind:tap="showCustomizedToast">{{I18n.t('dynamicUpdateNotification')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('customWidth')}}" padding>
+  <smart-button type="primary" bind:tap="showCustomizedWidthToast">{{I18n.t('customWidth')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('position')}}" padding>
+  <smart-button type="primary" bind:tap="showBottomToast" class="demo-margin-right">{{I18n.t('customWidth')}}</smart-button>
+  <smart-button type="primary" bind:tap="showTopToast">{{I18n.t('customWidth')}}</smart-button>
+</demo-block>
+
+<smart-toast id="smart-toast" />

package/example/dist/toast/icons.d.ts

@@ -0,0 +1,3 @@
+export declare const Success: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20class%3D%22icon%22%20width%3D%22200px%22%20height%3D%22200.00px%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M639.232%20815.232a315.306667%20315.306667%200%200%201-127.061333%2025.898667%20314.922667%20314.922667%200%200%201-127.232-25.898667%20337.92%20337.92%200%200%201-104.832-71.338667%20337.834667%20337.834667%200%200%201-71.338667-104.832%20314.88%20314.88%200%200%201-25.898667-127.232%20317.013333%20317.013333%200%200%201%2025.728-127.061333%20335.445333%20335.445333%200%200%201%2071.338667-105.173333%20333.653333%20333.653333%200%200%201%20105.002667-71.168c39.68-17.066667%2081.92-25.6%20126.890666-25.6%2044.928%200%2087.296%208.533333%20127.061334%2025.6%2039.722667%2017.066667%2074.752%2040.789333%20105.002666%2071.168a339.2%20339.2%200%200%201%2071.338667%20105.173333c17.28%2039.765333%2025.898667%2082.133333%2025.898667%20127.061333a316.714667%20316.714667%200%200%201-25.728%20127.232%20337.322667%20337.322667%200%200%201-176.213334%20176.213334z%20m-178.901333-149.930667a32.128%2032.128%200%200%200%2016.256%204.053334c11.733333%200%2021.12-5.546667%2028.16-16.597334l150.058666-235.434666c2.261333-3.413333%204.266667-6.954667%205.930667-10.666667a26.453333%2026.453333%200%200%200%202.56-11.050667%2023.466667%2023.466667%200%200%200-8.96-19.114666%2031.146667%2031.146667%200%200%200-20.181333-7.296c-9.728%200-17.877333%205.290667-24.405334%2015.914666l-134.485333%20215.808-63.701333-81.28a35.413333%2035.413333%200%200%200-11.690667-10.88%2028.16%2028.16%200%200%200-13.056-3.029333%2026.325333%2026.325333%200%200%200-19.84%208.32%2028.032%2028.032%200%200%200-7.936%2020.138667c0%207.466667%202.816%2014.677333%208.448%2021.674666l79.274667%2097.28c4.309333%205.376%208.832%209.472%2013.568%2012.16z%22%2F%3E%3C%2Fsvg%3E";
+export declare const Alarm: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20class%3D%22icon%22%20width%3D%22200px%22%20height%3D%22200.00px%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M512%2053.248c129.707%203.413%20237.739%2048.299%20324.096%20134.656S967.339%20382.293%20970.752%20512c-3.413%20129.707-48.299%20237.739-134.656%20324.096S641.707%20967.339%20512%20970.752c-129.707-3.413-237.739-48.299-324.096-134.656S56.661%20641.707%2053.248%20512c3.413-129.707%2048.299-237.739%20134.656-324.096S382.293%2056.661%20512%2053.248z%20m0%20196.608c-17.749%200-32.427%206.485-44.032%2019.456-11.605%2012.971-16.725%2028.331-15.36%2046.08l23.552%20262.144c1.365%209.557%205.291%2017.237%2011.776%2023.04%206.485%205.803%2014.507%208.704%2024.064%208.704s17.579-2.901%2024.064-8.704c6.485-5.803%2010.411-13.483%2011.776-23.04l23.552-262.144c1.365-17.749-3.755-33.109-15.36-46.08-11.605-12.971-26.283-19.456-44.032-19.456z%20m0%20524.288c15.019-0.683%2027.477-5.803%2037.376-15.36%209.899-9.557%2014.848-21.845%2014.848-36.864%200-15.019-4.949-27.477-14.848-37.376-9.899-9.899-22.357-14.848-37.376-14.848-15.019%200-27.477%204.949-37.376%2014.848-9.899%209.899-14.848%2022.357-14.848%2037.376%200%2015.019%204.949%2027.307%2014.848%2036.864%209.899%209.557%2022.357%2014.677%2037.376%2015.36z%22%2F%3E%3C%2Fsvg%3E";
+export declare const Error: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20class%3D%22icon%22%20width%3D%22200px%22%20height%3D%22200.00px%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M134.997333%20512a377.002667%20377.002667%200%201%201%20754.005334%200%20377.002667%20377.002667%200%200%201-754.005334%200zM512%2051.2C257.493333%2051.2%2051.2%20257.493333%2051.2%20512c0%20254.464%20206.293333%20460.8%20460.8%20460.8%20254.506667%200%20460.8-206.336%20460.8-460.8%200-254.506667-206.293333-460.8-460.8-460.8z%20m177.749333%20638.506667a41.898667%2041.898667%200%200%201-59.264%200L512%20571.221333l-118.485333%20118.485334a41.898667%2041.898667%200%200%201-59.221334-59.221334L452.778667%20512%20334.293333%20393.514667a41.898667%2041.898667%200%200%201%2059.221334-59.264L512%20452.736l118.485333-118.485333a41.898667%2041.898667%200%201%201%2059.264%2059.264L571.264%20512l118.485333%20118.485333a41.898667%2041.898667%200%200%201%200%2059.221334z%22%2F%3E%3C%2Fsvg%3E";

package/example/dist/toast/icons.js

@@ -0,0 +1,6 @@
+import Warning from '@tuya-miniapp/icons/dist/svg/Warning';
+import CheckmarkCircle from '@tuya-miniapp/icons/dist/svg/CheckmarkCircle';
+import Cancel from '@tuya-miniapp/icons/dist/svg/Cancel';
+export const Success = CheckmarkCircle;
+export const Alarm = Warning;
+export const Error = Cancel;

package/example/dist/toast/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-toast{word-wrap:break-word;align-items:center;background-color:var(--toast-background-color,rgba(0,0,0,.7));border-radius:var(--toast-border-radius,10px);box-sizing:initial;color:var(--toast-text-color,#fff);display:flex;flex-direction:column;font-size:var(--toast-font-size,14px);justify-content:center;line-height:var(--toast-line-height,20px);white-space:pre-wrap}.smart-toast__container{left:50%;max-width:var(--toast-max-width,70%);position:fixed;top:50%;transform:translate(-50%,-50%);width:-webkit-fit-content;width:fit-content}.smart-toast--text{min-width:var(--toast-text-min-width,96px);padding:var(--toast-text-padding,8px 12px)}.smart-toast--icon{min-height:var(--toast-default-min-height,88px);padding:var(--toast-default-padding,16px);width:var(--toast-default-width,88px)}.smart-toast--icon .smart-toast__icon{font-size:var(--toast-icon-size,36px)}.smart-toast--icon .smart-toast__text{padding-top:8px}.smart-toast__loading{margin:10px 0}.smart-toast--top{transform:translateY(-30vh) translate(-50%,-50%)}.smart-toast--bottom{transform:translateY(30vh) translate(-50%,-50%)}

package/example/dist/toast/index.d.ts

@@ -0,0 +1 @@
+export {};

package/example/dist/toast/index.js

@@ -0,0 +1,57 @@
+import { Success, Alarm, Error } from './icons';
+import { SmartComponent } from '../common/component';
+import { contextRef } from './toast';
+import { getCurrentPage } from '../common/utils';
+import appLog from '../common/appLog';
+SmartComponent({
+    props: {
+        show: Boolean,
+        mask: Boolean,
+        message: String,
+        forbidClick: Boolean,
+        zIndex: {
+            type: Number,
+            value: 1000,
+        },
+        type: {
+            type: String,
+            value: 'text',
+        },
+        loadingType: {
+            type: String,
+            value: 'circular',
+        },
+        position: {
+            type: String,
+            value: 'middle',
+        },
+        width: {
+            type: Number,
+        },
+    },
+    data: {
+        success: Success,
+        error: Error,
+        warn: Alarm,
+    },
+    mounted: function () {
+        if (!this.id)
+            return;
+        if (contextRef.value[`#${this.id}`]) {
+            console.error(`Toast component #${this.id} repeated!`);
+            appLog.info(`Toast component #${this.id} repeated!`);
+        }
+        contextRef.value[`#${this.id}`] = getCurrentPage();
+        appLog.info(`Toast #${this.id} mounted`);
+    },
+    destroyed: function () {
+        if (!this.id)
+            return;
+        contextRef.value[`#${this.id}`] = null;
+        appLog.info(`Toast #${this.id} destroyed`);
+    },
+    methods: {
+        // for prevent touchmove
+        noop() { },
+    },
+});

package/example/dist/toast/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-icon": "../icon/index",
+    "smart-loading": "../loading/index",
+    "smart-overlay": "../overlay/index",
+    "smart-transition": "../transition/index"
+  }
+}

package/example/dist/toast/index.wxml

@@ -0,0 +1,33 @@
+<smart-overlay
+  wx:if="{{ mask || forbidClick }}"
+  show="{{ show }}"
+  z-index="{{ zIndex }}"
+  custom-style="{{ mask ? '' : 'background-color: transparent;' }}"
+/>
+<smart-transition
+  show="{{ show }}"
+  custom-style="z-index: {{ zIndex }}"
+  custom-class="smart-toast__container smart-toast--{{ position }}"
+>
+  <view
+    class="smart-toast smart-toast--{{ (type === 'text' || type === 'html') ? 'text' : 'icon' }}"
+    catch:touchmove="noop"
+    style="{{ width ? ('width: ' + width + 'px') : '' }}"
+  >
+  
+    <!-- text only -->
+    <text wx:if="{{ type === 'text' }}">{{ message }}</text>
+
+    <!-- html only -->
+    <rich-text wx:elif="{{ type === 'html' }}" nodes="{{ message }}"></rich-text>
+
+    <!-- with icon -->
+    <block wx:else>
+      <smart-loading wx:if="{{ type === 'loading' }}" size="60" color="white" type="{{loadingType}}" />
+      <smart-icon wx:else color="white" class="smart-toast__icon" style="transform:scale({{ type === 'success' ? 1.4 : 1 }})" name="{{ type === 'success' ? success : type === 'fail' ? error : type === 'warn' ? warn : success }}" />
+      <text wx:if="{{ message }}" class="smart-toast__text">{{ message }}</text>
+    </block>
+
+    <slot />
+  </view>
+</smart-transition>

package/example/dist/toast/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-toast{word-wrap:break-word;align-items:center;background-color:var(--toast-background-color,rgba(0,0,0,.7));border-radius:var(--toast-border-radius,10px);box-sizing:initial;color:var(--toast-text-color,#fff);display:flex;flex-direction:column;font-size:var(--toast-font-size,14px);justify-content:center;line-height:var(--toast-line-height,20px);white-space:pre-wrap}.smart-toast__container{left:50%;max-width:var(--toast-max-width,70%);position:fixed;top:50%;transform:translate(-50%,-50%);width:-webkit-fit-content;width:fit-content}.smart-toast--text{min-width:var(--toast-text-min-width,96px);padding:var(--toast-text-padding,8px 12px)}.smart-toast--icon{min-height:var(--toast-default-min-height,88px);padding:var(--toast-default-padding,16px);width:var(--toast-default-width,88px)}.smart-toast--icon .smart-toast__icon{font-size:var(--toast-icon-size,36px)}.smart-toast--icon .smart-toast__text{padding-top:8px}.smart-toast__loading{margin:10px 0}.smart-toast--top{transform:translateY(-30vh) translate(-50%,-50%)}.smart-toast--bottom{transform:translateY(30vh) translate(-50%,-50%)}

package/example/dist/toast/toast.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="miniprogram-api-typings" />
+/// <reference types="miniprogram-api-typings" />
+type ToastMessage = string | number;
+type ToastContext = WechatMiniprogram.Component.TrivialInstance | WechatMiniprogram.Page.TrivialInstance;
+interface ToastOptions {
+    show?: boolean;
+    type?: string;
+    mask?: boolean;
+    zIndex?: number;
+    context?: (() => ToastContext) | ToastContext;
+    position?: string;
+    duration?: number;
+    selector?: string;
+    forbidClick?: boolean;
+    ignoreQueue?: boolean;
+    loadingType?: string;
+    message?: ToastMessage;
+    onClose?: () => void;
+    width?: number;
+}
+export declare const contextRef: {
+    value: Record<string, ToastContext | null>;
+};
+declare function Toast(toastOptions: ToastOptions | ToastMessage): WechatMiniprogram.Component.TrivialInstance | undefined;
+declare namespace Toast {
+    var loading: (options: ToastMessage | ToastOptions) => WechatMiniprogram.Component.TrivialInstance | undefined;
+    var success: (options: ToastMessage | ToastOptions) => WechatMiniprogram.Component.TrivialInstance | undefined;
+    var fail: (options: ToastMessage | ToastOptions) => WechatMiniprogram.Component.TrivialInstance | undefined;
+    var warn: (options: ToastMessage | ToastOptions) => WechatMiniprogram.Component.TrivialInstance | undefined;
+    var clear: () => void;
+    var setDefaultOptions: (options: ToastOptions) => void;
+    var resetDefaultOptions: () => void;
+}
+export default Toast;

package/example/dist/toast/toast.js

@@ -0,0 +1,81 @@
+import appLog from '../common/appLog';
+import { getCurrentPage } from '../common/utils';
+import { isObj } from '../common/validator';
+const defaultOptions = {
+    type: 'text',
+    mask: false,
+    message: '',
+    show: true,
+    zIndex: 1000,
+    duration: 2000,
+    ignoreQueue: false,
+    position: 'middle',
+    forbidClick: false,
+    loadingType: 'circular',
+    selector: '#smart-toast',
+    width: '',
+};
+const queueRef = {
+    value: [],
+};
+// @ts-expect-error
+let currentOptions = Object.assign({}, defaultOptions);
+function parseOptions(message) {
+    return isObj(message) ? message : { message };
+}
+export const contextRef = {
+    value: {},
+};
+function Toast(toastOptions) {
+    const options = Object.assign(Object.assign({}, currentOptions), parseOptions(toastOptions));
+    appLog.info('start open Toast');
+    const context = (typeof options.context === 'function' ? options.context() : options.context) ||
+        contextRef.value[options.selector] ||
+        getCurrentPage();
+    const toast = context.selectComponent(options.selector);
+    appLog.info(`toast selector: ${options.selector}`);
+    appLog.info(`toast component ${toast ? 'success' : 'fail'}`);
+    if (!toast) {
+        console.warn(`未找到 ${options.selector || '#smart-toast'} 节点，请确认 selector 及 context 是否正确`);
+        appLog.info(`未找到 ${options.selector || '#smart-toast'} 节点，请确认 selector 及 context 是否正确`);
+        return;
+    }
+    delete options.context;
+    delete options.selector;
+    toast.clear = () => {
+        toast.setData({ show: false });
+        if (options.onClose) {
+            options.onClose();
+        }
+    };
+    queueRef.value.push(toast);
+    toast.setData(options);
+    clearTimeout(toast.timer);
+    if (options.duration != null && options.duration > 0) {
+        toast.timer = setTimeout(() => {
+            toast.clear();
+            queueRef.value = queueRef.value.filter(item => item !== toast);
+            appLog.info(`toast ${options.selector} cleared`);
+        }, options.duration);
+    }
+    return toast;
+}
+const createMethod = (type) => (options) => Toast(Object.assign({ type }, parseOptions(options)));
+Toast.loading = createMethod('loading');
+Toast.success = createMethod('success');
+Toast.fail = createMethod('fail');
+Toast.warn = createMethod('warn');
+Toast.clear = () => {
+    queueRef.value.forEach(toast => {
+        toast.clear();
+    });
+    queueRef.value = [];
+};
+Toast.setDefaultOptions = (options) => {
+    Object.assign(currentOptions, options);
+};
+Toast.resetDefaultOptions = () => {
+    // @ts-expect-error
+    currentOptions = Object.assign({}, defaultOptions);
+};
+export default Toast;

package/example/dist/transition/demo/index.css

@@ -0,0 +1 @@
+@import '../../common/index.css';.block{background-color:#1989fa;height:100px;left:50%;margin:-50px 0 0 -50px;position:fixed;top:50%;width:100px}.smart-enter-active-class,.smart-leave-active-class{transition-property:background-color,transform}.smart-enter-class,.smart-leave-to-class{background-color:red;transform:rotate(-1turn) translate3d(-100%,-100%,0)}

package/example/dist/transition/demo/index.d.ts

@@ -0,0 +1 @@
+export {};

package/example/dist/transition/demo/index.js

@@ -0,0 +1,67 @@
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        show: false,
+        name: 'fade',
+        showCustom: false,
+    },
+    methods: {
+        onClickFade() {
+            this.trigger('fade');
+        },
+        onClickFadeUp() {
+            this.trigger('fade-up');
+        },
+        onClickFadeDown() {
+            this.trigger('fade-down');
+        },
+        onClickFadeLeft() {
+            this.trigger('fade-left');
+        },
+        onClickFadeRight() {
+            this.trigger('fade-right');
+        },
+        onClickSlideUp() {
+            this.trigger('slide-up');
+        },
+        onClickSlideDown() {
+            this.trigger('slide-down');
+        },
+        onClickSlideLeft() {
+            this.trigger('slide-left');
+        },
+        onClickSlideRight() {
+            this.trigger('slide-right');
+        },
+        trigger(name) {
+            this.setData({ name, show: true });
+            setTimeout(() => {
+                this.setData({ show: false });
+            }, 500);
+        },
+        onClickCustom() {
+            this.setData({ showCustom: true });
+            setTimeout(() => {
+                this.setData({ showCustom: false });
+            }, 1000);
+        },
+        onBeforeEnter() {
+            console.log('before enter');
+        },
+        onEnter() {
+            console.log('enter');
+        },
+        onAfterEnter() {
+            console.log('after enter');
+        },
+        onBeforeLeave() {
+            console.log('before leave');
+        },
+        onLeave() {
+            console.log('leave');
+        },
+        onAfterLeave() {
+            console.log('after leave');
+        },
+    },
+});

package/example/dist/transition/demo/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-cell": "../../cell/index",
+    "smart-transition": "../../transition/index",
+    "demo-block": "../../../components/demo-block/index"
+  }
+}

package/example/dist/transition/demo/index.wxml

@@ -0,0 +1,35 @@
+<demo-block title="{{I18n.t('basicUsage')}}" padding>
+  <smart-cell title="Fade" bind:click="onClickFade" is-link />
+  <smart-cell title="Fade Up" bind:click="onClickFadeUp" is-link />
+  <smart-cell title="Fade Down" bind:click="onClickFadeDown" is-link />
+  <smart-cell title="Fade Left" bind:click="onClickFadeLeft" is-link />
+  <smart-cell title="Fade Right" bind:click="onClickFadeRight" is-link />
+  <smart-cell title="Slide Up" bind:click="onClickSlideUp" is-link />
+  <smart-cell title="Slide Down" bind:click="onClickSlideDown" is-link />
+  <smart-cell title="Slide Left" bind:click="onClickSlideLeft" is-link />
+  <smart-cell title="Slide Right" bind:click="onClickSlideRight" is-link />
+  <smart-cell title="Custom" bind:click="onClickCustom" is-link />
+
+  <smart-transition
+    show="{{ show }}"
+    name="{{ name }}"
+    custom-class="block"
+  />
+
+  <smart-transition
+    show="{{ showCustom }}"
+    name=""
+    duration="{{ { enter: 300, leave: 1000 } }}"
+    custom-class="block"
+    enter-class="smart-enter-class"
+    enter-active-class="smart-enter-active-class"
+    leave-active-class="smart-leave-active-class"
+    leave-to-class="smart-leave-to-class"
+    bind:before-enter="onBeforeEnter"
+    bind:enter="onEnter"
+    bind:after-enter="onAfterEnter"
+    bind:before-leave="onBeforeLeave"
+    bind:leave="onLeave"
+    bind:after-leave="onAfterLeave"
+  />
+</demo-block>

package/example/dist/transition/demo/index.wxss

@@ -0,0 +1 @@
+@import '../../common/index.wxss';.block{background-color:#1989fa;height:100px;left:50%;margin:-50px 0 0 -50px;position:fixed;top:50%;width:100px}.smart-enter-active-class,.smart-leave-active-class{transition-property:background-color,transform}.smart-enter-class,.smart-leave-to-class{background-color:red;transform:rotate(-1turn) translate3d(-100%,-100%,0)}

package/example/dist/transition/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-transition{transition-timing-function:ease}.smart-fade-enter-active,.smart-fade-leave-active{transition-property:opacity}.smart-fade-enter,.smart-fade-leave-to{opacity:0}.smart-fade-down-enter-active,.smart-fade-down-leave-active,.smart-fade-left-enter-active,.smart-fade-left-leave-active,.smart-fade-right-enter-active,.smart-fade-right-leave-active,.smart-fade-up-enter-active,.smart-fade-up-leave-active{transition-property:opacity,transform}.smart-fade-up-enter,.smart-fade-up-leave-to{opacity:0;transform:translate3d(0,100%,0)}.smart-fade-down-enter,.smart-fade-down-leave-to{opacity:0;transform:translate3d(0,-100%,0)}.smart-fade-left-enter,.smart-fade-left-leave-to{opacity:0;transform:translate3d(-100%,0,0)}.smart-fade-right-enter,.smart-fade-right-leave-to{opacity:0;transform:translate3d(100%,0,0)}.smart-slide-down-enter-active,.smart-slide-down-leave-active,.smart-slide-left-enter-active,.smart-slide-left-leave-active,.smart-slide-right-enter-active,.smart-slide-right-leave-active,.smart-slide-up-enter-active,.smart-slide-up-leave-active{transition-property:transform}.smart-slide-up-enter,.smart-slide-up-leave-to{transform:translate3d(0,100%,0)}.smart-slide-down-enter,.smart-slide-down-leave-to{transform:translate3d(0,-100%,0)}.smart-slide-left-enter,.smart-slide-left-leave-to{transform:translate3d(-100%,0,0)}.smart-slide-right-enter,.smart-slide-right-leave-to{transform:translate3d(100%,0,0)}

package/example/dist/transition/index.d.ts

@@ -0,0 +1 @@
+export {};

package/example/dist/transition/index.js

@@ -0,0 +1,13 @@
+import { SmartComponent } from '../common/component';
+import { transition } from '../mixins/transition';
+SmartComponent({
+    classes: [
+        'enter-class',
+        'enter-active-class',
+        'enter-to-class',
+        'leave-class',
+        'leave-active-class',
+        'leave-to-class',
+    ],
+    mixins: [transition(true)],
+});

package/example/dist/transition/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/example/dist/transition/index.wxml

@@ -0,0 +1,9 @@
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  wx:if="{{ inited }}"
+  class="smart-transition custom-class {{ classes }}"
+  style="{{ computed.rootStyle({ currentDuration, display, customStyle }) }}"
+>
+  <slot />
+</view>

package/example/dist/transition/index.wxs

@@ -0,0 +1,17 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function rootStyle(data) {
+  return style([
+    {
+      '-webkit-transition-duration': data.currentDuration + 'ms',
+      'transition-duration': data.currentDuration + 'ms',
+    },
+    data.display ? null : 'display: none',
+    data.customStyle,
+  ]);
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

package/example/dist/transition/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-transition{transition-timing-function:ease}.smart-fade-enter-active,.smart-fade-leave-active{transition-property:opacity}.smart-fade-enter,.smart-fade-leave-to{opacity:0}.smart-fade-down-enter-active,.smart-fade-down-leave-active,.smart-fade-left-enter-active,.smart-fade-left-leave-active,.smart-fade-right-enter-active,.smart-fade-right-leave-active,.smart-fade-up-enter-active,.smart-fade-up-leave-active{transition-property:opacity,transform}.smart-fade-up-enter,.smart-fade-up-leave-to{opacity:0;transform:translate3d(0,100%,0)}.smart-fade-down-enter,.smart-fade-down-leave-to{opacity:0;transform:translate3d(0,-100%,0)}.smart-fade-left-enter,.smart-fade-left-leave-to{opacity:0;transform:translate3d(-100%,0,0)}.smart-fade-right-enter,.smart-fade-right-leave-to{opacity:0;transform:translate3d(100%,0,0)}.smart-slide-down-enter-active,.smart-slide-down-leave-active,.smart-slide-left-enter-active,.smart-slide-left-leave-active,.smart-slide-right-enter-active,.smart-slide-right-leave-active,.smart-slide-up-enter-active,.smart-slide-up-leave-active{transition-property:transform}.smart-slide-up-enter,.smart-slide-up-leave-to{transform:translate3d(0,100%,0)}.smart-slide-down-enter,.smart-slide-down-leave-to{transform:translate3d(0,-100%,0)}.smart-slide-left-enter,.smart-slide-left-leave-to{transform:translate3d(-100%,0,0)}.smart-slide-right-enter,.smart-slide-right-leave-to{transform:translate3d(100%,0,0)}

package/example/dist/tree-select/demo/index.d.ts

@@ -0,0 +1 @@
+export {};