Merge branch 'next' of https://github.com/jdf2e/nutui into next

src/packages/notify/demo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-cell :showIcon="true" :isLink="true" @click="notify1('通知内容')">
+    <nut-cell :showIcon="true" :isLink="true" @click="notify1('isVisible1')">
       <span>
         <label>基础用法</label>
       </span>
@@ -10,17 +10,22 @@
 </template>
 
 <script lang="ts">
-import { createApp } from 'vue';
+import { reactive, createApp } from 'vue';
 import { createComponent } from '@/utils/create';
-import notify from './index';
+import { Notify } from './notify';
 const { createDemo } = createComponent('notify');
-const app = createApp({});
-app.use(notify);
+// const app = createApp({});
+// app.use(notify);
 export default createDemo({
-  props: {},
   setup() {
-    const notify1 = () => {
-      notify('content');
+    const state = reactive({
+      isVisible1: false,
+      isVisible2: false,
+      isVisible3: false,
+      isVisible4: false
+    });
+    const notify1 = msg => {
+      Notify.text('hello');
     };
     return {
       notify1

src/packages/notify/index.ts

@@ -1,143 +0,0 @@
-import VanNotify from './index.vue';
-import {
-  createApp,
-  reactive,
-  Component,
-  nextTick,
-  getCurrentInstance,
-  h
-} from 'vue';
-
-let timer;
-let instance;
-const inBrowser = typeof window !== 'undefined';
-
-function isObject(val: unknown): val is Record<any, any> {
-  return val !== null && typeof val === 'object';
-}
-
-function parseOptions(message) {
-  return isObject(message) ? message : { message };
-}
-
-function useExpose(apis: Record<string, any>) {
-  const instance = getCurrentInstance();
-  if (instance) {
-    Object.assign(instance.proxy, apis);
-  }
-}
-function usePopupState() {
-  const state = reactive({
-    show: false
-  });
-
-  const toggle = (show: boolean) => {
-    state.show = show;
-  };
-
-  const open = (props: Record<string, any>) => {
-    Object.assign(state, props);
-
-    nextTick(() => {
-      toggle(true);
-    });
-  };
-
-  const close = () => {
-    toggle(false);
-  };
-
-  useExpose({ open, close, toggle });
-
-  return {
-    open,
-    close,
-    state,
-    toggle
-  };
-}
-function mountComponent(RootComponent: Component) {
-  const app = createApp(RootComponent);
-  const root = document.createElement('div');
-
-  document.body.appendChild(root);
-
-  return {
-    instance: app.mount(root),
-    unmount() {
-      app.unmount(root);
-      document.body.removeChild(root);
-    }
-  };
-}
-function initInstance() {
-  ({ instance } = mountComponent({
-    setup() {
-      const { state, toggle } = usePopupState();
-      return h('img', {});
-    }
-  }));
-}
-
-function Notify(options) {
-  if (!inBrowser) {
-    return;
-  }
-
-  if (!instance) {
-    initInstance();
-  }
-
-  options = {
-    ...Notify.currentOptions,
-    ...parseOptions(options)
-  };
-
-  instance.open(options);
-  clearTimeout(timer);
-
-  if (options.duration > 0) {
-    timer = setTimeout(Notify.clear, options.duration);
-  }
-
-  return instance;
-}
-
-function defaultOptions() {
-  return {
-    type: 'danger',
-    color: undefined,
-    message: '',
-    onClose: null,
-    onClick: null,
-    onOpened: null,
-    duration: 3000,
-    className: '',
-    background: undefined
-  };
-}
-
-Notify.clear = () => {
-  if (instance) {
-    instance.toggle(false);
-  }
-};
-
-Notify.currentOptions = defaultOptions();
-
-Notify.setDefaultOptions = options => {
-  Object.assign(Notify.currentOptions, options);
-};
-
-Notify.resetDefaultOptions = () => {
-  Notify.currentOptions = defaultOptions();
-};
-
-Notify.install = app => {
-  app.use(VanNotify);
-  app.config.globalProperties.$notify = Notify;
-};
-
-Notify.Component = VanNotify;
-
-export default Notify;

src/packages/notify/index.vue

@@ -1,25 +1,25 @@
 <template>
-  <view class="nut-notify">
-    <nut-popup
-      v-model="curVisible"
-      position="top"
-      :style="{ color: color, background: background }"
-      :overlay="false"
-      :lockScroll="false"
-      :class="['nut-notify', `nut-notify--${type}`, { className }]"
-      @click="handleClick"
-      @opened="handleOpened"
-      @closed="handleClosed"
+  <!-- <view class="nut-notify"> -->
+  <Transition name="toast-fade">
+    <view
+      :class="toastBodyClass"
+      v-show="state.mounted"
+      :style="{
+        bottom: center ? 'auto' : bottom + 'px',
+        'background-color': coverColor
+      }"
+      @click="clickCover"
     >
       <template v-if="$slots.default">
         <slot></slot>
       </template>
       <template v-else>{{ msg }}</template>
-    </nut-popup>
-  </view>
+    </view>
+  </Transition>
+  <!-- </view> -->
 </template>
 <script lang="ts">
-import { toRefs } from 'vue';
+import { toRefs, reactive, onMounted } from 'vue';
 import { createComponent } from '@/utils/create';
 import Popup from '@/packages/popup/index.vue';
 const { componentName, create } = createComponent('notify');
@@ -37,7 +37,13 @@ export default create({
   },
 
   setup(props, { slots }) {
-    return {};
+    const state = reactive({
+      mounted: false
+    });
+    onMounted(() => {
+      state.mounted = true;
+    });
+    return { state };
   }
 });
 </script>

src/packages/toast/demo.vue

@@ -40,7 +40,7 @@ const { createDemo } = createComponent('toast');
 export default createDemo({
   setup() {
     const textToast = msg => {
-      Toast.text(msg);
+      Toast.text(msg, { duration: 100000 });
     };
     const successToast = msg => {
       Toast.success(msg);