@v-c/notification 2.0.0 → 2.0.1

package/dist/NotificationList/index.js

@@ -1,7 +1,7 @@
-import Notification from "../Notification.js";
-import { useNotificationContext } from "../NotificationProvider.js";
 import useListPosition from "../hooks/useListPosition/index.js";
 import useStack from "../hooks/useStack.js";
+import Notification from "../Notification.js";
+import { useNotificationContext } from "../NotificationProvider.js";
 import Content from "./Content.js";
 import { TransitionGroup, computed, createVNode, defineComponent, isVNode, mergeProps, ref, shallowRef, toRef, watch, watchEffect } from "vue";
 import { clsx } from "@v-c/util";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/notification",
   "type": "module",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "publishConfig": {
     "access": "public"
   },
@@ -15,6 +15,10 @@
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
+  "files": [
+    "dist",
+    "package.json"
+  ],
   "peerDependencies": {
     "vue": "^3.0.0"
   },

package/bump.config.ts

@@ -1,6 +0,0 @@
-import { defineConfig } from 'bumpp'
-
-export default defineConfig({
-  commit: 'chore(release): @v-c/notification %s',
-  tag: '@v-c/notification@%s',
-})

package/docs/context.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { h } from 'vue'
-import { useNotification } from '../src'
-import motion from './motion'
-
-const [{ open }, holder] = useNotification({ motion })
-const NOTICE = {
-  content: h('span', ['simple show']),
-  onclose() {
-    console.log('simple close')
-  },
-}
-function handleClick() {
-  open({
-    ...NOTICE,
-    props: {
-      'data-testid': 'my-data-testid',
-    },
-  })
-}
-</script>
-
-<template>
-  <div>
-    <button @click="handleClick">
-      simple show
-    </button>
-    <holder />
-  </div>
-</template>
-
-<style lang="less">
-@import "./index.less";
-</style>

package/docs/hooks.vue

@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import { useNotification } from '../src'
-import motion from './motion'
-
-const [notice, contextHolder] = useNotification({ motion, closable: true })
-</script>
-
-<template>
-  <div>
-    <!-- Default     -->
-    <button
-      @click="() => {
-        notice.open({
-          content: `${new Date().toISOString()}`,
-        })
-      }"
-    >
-      Basic
-    </button>
-    <button
-      @click="() => {
-        notice.open({
-          content: `${Array(Math.round(Math.random() * 5) + 1)
-            .fill(1)
-            .map(() => new Date().toISOString())
-            .join('\n')}`,
-          duration: null,
-        })
-      }"
-    >
-      Not Auto Close
-    </button>
-
-    <button
-      @click="() => {
-        notice.open({
-          content: `${Array(5)
-            .fill(1)
-            .map(() => new Date().toISOString())
-            .join('\n')}`,
-          duration: null,
-        });
-      }"
-    >
-      Not Auto Close
-    </button>
-  </div>
-
-  <div>
-    <button
-      @click="() => {
-        notice.open({
-          content: `No Close! ${new Date().toISOString()}`,
-          duration: null,
-          closable: false,
-          key: 'No Close',
-          onClose: () => {
-            console.log('Close!!!');
-          },
-        });
-      }"
-    >
-      No Closable
-    </button>
-
-    <button
-      @click="() => {
-        notice.close('No Close');
-      }"
-    >
-      Force Close No Closable
-    </button>
-  </div>
-
-  <div>
-    <button
-      @click="() => {
-        notice.destroy();
-      }"
-    >
-      Destroy All
-    </button>
-  </div>
-  <contextHolder />
-</template>
-
-<style scoped>
-
-</style>

package/docs/index.less

@@ -1,265 +0,0 @@
-@notificationPrefixCls: vc-notification;
-
-.@{notificationPrefixCls} {
-  // ====================== Notification ======================
-  position: fixed;
-  z-index: 1000;
-  display: flex;
-  max-height: 100vh;
-  padding: 10px;
-  align-items: flex-end;
-  width: 340px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  height: 100vh;
-  box-sizing: border-box;
-  pointer-events: none;
-  flex-direction: column;
-
-  // Position
-  &-top,
-  &-topLeft,
-  &-topRight {
-    top: 0;
-  }
-
-  &-bottom,
-  &-bottomRight,
-  &-bottomLeft {
-    bottom: 0;
-  }
-
-  &-bottomRight,
-  &-topRight {
-    right: 0;
-  }
-
-  // ========================= Notice =========================
-  &-notice {
-    position: relative;
-    display: block;
-    box-sizing: border-box;
-    line-height: 1.5;
-    width: 100%;
-
-    &-wrapper {
-      pointer-events: auto;
-      position: relative;
-      display: block;
-      box-sizing: border-box;
-      border-radius: 3px 3px;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-      margin: 0 0 16px;
-      border: 1px solid #999;
-      border: 0px solid rgba(0, 0, 0, 0);
-      background: #fff;
-      width: 300px;
-    }
-
-    // Content
-    &-content {
-      padding: 7px 20px 7px 10px;
-    }
-
-    &-closable &-content {
-      padding-right: 20px;
-    }
-
-    &-close {
-      position: absolute;
-      top: 3px;
-      right: 5px;
-      color: #000;
-      font-weight: 700;
-      font-size: 16px;
-      line-height: 1;
-      text-decoration: none;
-      text-shadow: 0 1px 0 #fff;
-      outline: none;
-      cursor: pointer;
-      opacity: 0.2;
-      filter: alpha(opacity=20);
-      border: 0;
-      background-color: #fff;
-
-      &-x:after {
-        content: '×';
-      }
-
-      &:hover {
-        text-decoration: none;
-        opacity: 1;
-        filter: alpha(opacity=100);
-      }
-    }
-
-    // Progress
-    &-progress {
-      position: absolute;
-      left: 3px;
-      right: 3px;
-      border-radius: 1px;
-      overflow: hidden;
-      appearance: none;
-      -webkit-appearance: none;
-      display: block;
-      inline-size: 100%;
-      block-size: 2px;
-      border: 0;
-
-      &,
-      &::-webkit-progress-bar {
-        background-color: rgba(0, 0, 0, 0.04);
-      }
-
-      &::-moz-progress-bar {
-        background-color: #31afff;
-      }
-
-      &::-webkit-progress-value {
-        background-color: #31afff;
-      }
-    }
-  }
-
-  &-fade {
-    overflow: hidden;
-    transition: all 0.3s;
-  }
-
-  &-fade-appear-prepare {
-    pointer-events: none;
-    opacity: 0 !important;
-  }
-
-  &-fade-appear-start {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-
-  &-fade-appear-active {
-    transform: translateX(0);
-    opacity: 1;
-  }
-
-  // .fade-effect() {
-  //   animation-duration: 0.3s;
-  //   animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
-  //   animation-fill-mode: both;
-  // }
-
-  // &-fade-appear,
-  // &-fade-enter {
-  //   opacity: 0;
-  //   animation-play-state: paused;
-  //   .fade-effect();
-  // }
-
-  // &-fade-leave {
-  //   .fade-effect();
-  //   animation-play-state: paused;
-  // }
-
-  // &-fade-appear&-fade-appear-active,
-  // &-fade-enter&-fade-enter-active {
-  //   animation-name: rcNotificationFadeIn;
-  //   animation-play-state: running;
-  // }
-
-  // &-fade-leave&-fade-leave-active {
-  //   animation-name: rcDialogFadeOut;
-  //   animation-play-state: running;
-  // }
-
-  // @keyframes rcNotificationFadeIn {
-  //   0% {
-  //     opacity: 0;
-  //   }
-  //   100% {
-  //     opacity: 1;
-  //   }
-  // }
-
-  // @keyframes rcDialogFadeOut {
-  //   0% {
-  //     opacity: 1;
-  //   }
-  //   100% {
-  //     opacity: 0;
-  //   }
-  // }
-
-  // ========================= Stack =========================
-  &-stack {
-    & > .@{notificationPrefixCls}-notice {
-      &-wrapper {
-        transition: all 0.3s;
-        position: absolute;
-        top: 12px;
-        opacity: 1;
-
-        &:not(:nth-last-child(-n + 3)) {
-          opacity: 0;
-          right: 34px;
-          width: 252px;
-          overflow: hidden;
-          color: transparent;
-          pointer-events: none;
-        }
-
-        &:nth-last-child(1) {
-          right: 10px;
-        }
-
-        &:nth-last-child(2) {
-          right: 18px;
-          width: 284px;
-          color: transparent;
-          overflow: hidden;
-        }
-
-        &:nth-last-child(3) {
-          right: 26px;
-          width: 268px;
-          color: transparent;
-          overflow: hidden;
-        }
-      }
-    }
-
-    &&-expanded {
-      & > .@{notificationPrefixCls}-notice {
-        &-wrapper {
-          &:not(:nth-last-child(-n + 1)) {
-            opacity: 1;
-            width: 300px;
-            right: 10px;
-            overflow: unset;
-            color: inherit;
-            pointer-events: auto;
-          }
-
-          &::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            right: 0;
-            top: -16px;
-            width: 100%;
-            height: calc(100% + 32px);
-            background: transparent;
-            pointer-events: auto;
-            color: rgb(0,0,0);
-          }
-        }
-      }
-    }
-
-    &.@{notificationPrefixCls}-bottomRight {
-      & > .@{notificationPrefixCls}-notice-wrapper {
-        top: unset;
-        bottom: 12px;
-      }
-    }
-  }
-}

package/docs/maxCount.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { useNotification } from '../src'
-import motion from './motion.ts'
-import './index.less'
-
-const [notice, contextHolder] = useNotification({ maxCount: 3, motion })
-</script>
-
-<template>
-  <button
-    @click="() => {
-      notice.open({
-        content: `${new Date().toISOString()}`,
-      });
-    }"
-  >
-    Max Count
-  </button>
-  <contextHolder />
-</template>
-
-<style scoped>
-
-</style>

package/docs/motion.ts

@@ -1,33 +0,0 @@
-import type { TransitionGroupProps } from 'vue'
-
-const motion: TransitionGroupProps = {
-  appear: true,
-  name: 'vc-notification-fade',
-  // enterFromClass: 'vc-notification-fade-appear-start vc-notification-fade-appear-prepare',
-  // enterActiveClass: 'vc-notification-fade',
-  // enterToClass: 'vc-notification-fade-appear-active',
-  // leaveFromClass: 'vc-notification-fade-appear-active',
-  // leaveToClass: 'vc-notification-fade-appear-start vc-notification-fade-appear-prepare',
-  // leaveActiveClass: 'vc-notification-fade vc-notification-fade-appear-leave',
-  // moveClass: 'vc-notification-fade',
-  onBeforeLeave: (el) => {
-    const _el = el as HTMLDivElement
-    _el.style.height = `${_el.offsetHeight}px`
-  },
-  onLeave(el) {
-    setTimeout(() => {
-      const _el = el as HTMLDivElement
-      _el.style.height = '0px'
-      _el.style.opacity = '1'
-      _el.style.margin = '0px'
-    })
-  },
-  onAfterLeave(el) {
-    const _el = el as HTMLDivElement
-    _el.style.height = ''
-    _el.style.opacity = ''
-    _el.style.margin = ''
-  },
-}
-
-export default motion

package/docs/notification.stories.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import Context from './context.vue'
-import Hooks from './hooks.vue'
-import MaxCount from './maxCount.vue'
-import ShowProgress from './showProgress.vue'
-import Stack from './stack.vue'
-</script>
-
-<template>
-  <Story title="Notification">
-    <Variant title="Context">
-      <Context />
-    </Variant>
-
-    <Variant title="Hooks">
-      <Hooks />
-    </Variant>
-
-    <Variant title="MaxCount">
-      <MaxCount />
-    </Variant>
-
-    <Variant title="ShowProgress">
-      <ShowProgress />
-    </Variant>
-
-    <Variant title="Stack">
-      <Stack />
-    </Variant>
-  </Story>
-</template>

package/docs/showProgress.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { useNotification } from '../src'
-import motion from './motion.ts'
-import './index.less'
-
-const [notice, contextHolder] = useNotification({ showProgress: true, motion })
-</script>
-
-<template>
-  <button
-    @click="() => {
-      notice.open({
-        content: `${new Date().toISOString()}`,
-      });
-    }"
-  >
-    Show With Progress
-  </button>
-  <button
-    @click="() => {
-      notice.open({
-        content: `${new Date().toISOString()}`,
-        pauseOnHover: false,
-      });
-    }"
-  >
-    Not Pause On Hover
-  </button>
-  <contextHolder />
-</template>
-
-<style scoped>
-
-</style>

package/docs/stack.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { useNotification } from '../src'
-import motion from './motion.ts'
-import './index.less'
-
-const [{ open }, contextHolder] = useNotification({ motion, stack: true })
-
-function getConfig() {
-  return {
-    content: `${Array.from({ length: Math.round(Math.random() * 5) + 1 })
-      .fill(1)
-      .map(() => new Date().toISOString())
-      .join('\n')}`,
-    duration: null,
-  }
-}
-</script>
-
-<template>
-  <button
-    @click="() => {
-      open(getConfig());
-    }"
-  >
-    Top Right
-  </button>
-  <button
-    @click="() => {
-      open({ ...getConfig(), placement: 'bottomRight' });
-    }"
-  >
-    Bottom Right
-  </button>
-  <contextHolder />
-</template>
-
-<style scoped>
-
-</style>