feat(core): composables split useNoti & useNotiProvide

packages/core/package.json

@@ -2,10 +2,8 @@
   "name": "@vue3-noti/core",
   "version": "1.0.0",
   "description": "",
-
   "source": "src/main.ts",
   "author": "",
-
   "license": "ISC",
   "keywords": [],
   "exports": {
@@ -21,5 +19,8 @@
   "scripts": {
     "clean": "rimraf dist",
     "build": "rimraf dist && rollup -c"
+  },
+  "dependencies": {
+    "@vueuse/core": "^10.3.0"
   }
 }

packages/core/rollup.config.js

@@ -29,6 +29,9 @@ module.exports = [
        * Bundle an index.esm for global import.
        */
       {
+        globals: {
+          vue: 'Vue',
+        },
         name: '@vue3-noti',
         format: 'esm',
         dir: 'dist',
@@ -49,6 +52,9 @@ module.exports = [
     ],
     output: [
       {
+        globals: {
+          vue: 'Vue',
+        },
         name: '@vue3-noti',
         format: 'cjs',
         dir: 'dist',
@@ -61,13 +67,18 @@ module.exports = [
   {
     input: source,
     external: ['vue', '@vueuse/core'], // External dependencies that are not bundled
+
     plugins: [
       typescript({
         clean: true,
       }),
     ],
     output: [
       {
+        globals: {
+          'vue': 'Vue',
+          '@vueuse/core': '@vueuse/core',
+        },
         name: '@vue3-noti',
         format: 'umd',
         dir: 'dist',
@@ -79,10 +90,14 @@ module.exports = [
   // d.ts for types
   {
     input: source,
+    external: ['vue', '@vueuse/core'], // External dependencies that are not bundled
     output: [{
       name: '@vue3-noti',
       format: 'es',
       dir: 'dist',
+      globals: {
+        vue: 'Vue',
+      },
       entryFileNames: 'index.d.ts',
     }],
     plugins: [dts()],

packages/core/src/composables/useNoti.ts

@@ -1,4 +1,8 @@
+import { inject } from 'vue'
+
+import { INJECT_KEY } from '../constant'
+
 export function useNoti() {
-  // eslint-disable-next-line no-console
-  console.log('useNoti run')
+  const noti = inject(INJECT_KEY)
+  return noti
 }

packages/core/src/composables/useNotiProvide.ts

@@ -0,0 +1,22 @@
+import { provide, ref } from 'vue'
+import { useToggle } from '@vueuse/core'
+import { DEFAULT_SETTING, INJECT_KEY } from '../constant'
+
+export function useNotiProvide() {
+  const notifications = ref('')
+  const option = ref(DEFAULT_SETTING)
+  const [isShow, toggleShow] = useToggle(false)
+
+  provide(INJECT_KEY, {
+    isShow,
+    toggleShow,
+    notifications,
+  })
+
+  return {
+    option,
+    isShow,
+    toggleShow,
+    notifications,
+  }
+}

packages/core/src/constant.ts

@@ -0,0 +1,11 @@
+import type { InjectionKey } from 'vue'
+import { NOTI_POSITION, NOTI_TYPE } from './types'
+import type { NotiContext } from './types'
+
+export const DEFAULT_SETTING = {
+  type: NOTI_TYPE.SUCCESS,
+  position: NOTI_POSITION.TOP_RIGHT,
+  timeout: 3000,
+}
+
+export const INJECT_KEY: InjectionKey<NotiContext> = Symbol('noti')

packages/core/src/main.ts

@@ -1 +1,3 @@
 export * from './composables/useNoti'
+export * from './composables/useNotiProvide'
+export * from './types'

packages/core/src/types.ts

@@ -0,0 +1,54 @@
+import type { Ref } from 'vue'
+
+export enum NOTI_TYPE {
+  SUCCESS = 'success',
+  WARNING = 'warning',
+  ERROR = 'error',
+  INFO = 'info',
+}
+
+/**
+ * An object containing constants for the position of notifications.
+ */
+export const NOTI_POSITION = {
+  /**
+   * Notifications appear at the top right of the screen and slide in from the right.
+   */
+  TOP_RIGHT: 'top-right',
+
+  /**
+   * Notifications appear at the top left of the screen and slide in from the left.
+   */
+  TOP_LEFT: 'top-left',
+
+  /**
+   * Notifications appear at the bottom right of the screen and slide in from the right.
+   */
+  BOTTOM_RIGHT: 'bottom-right',
+
+  /**
+   * Notifications appear at the bottom left of the screen and slide in from the left.
+   */
+  BOTTOM_LEFT: 'bottom-left',
+
+  /**
+   * Notifications appear at the middle top of the screen and slide in from the top.
+   */
+  MIDDLE_TOP: 'middle-top',
+
+  /**
+   * Notifications appear at the middle left of the screen and slide in from the left.
+   */
+  MIDDLE_LEFT: 'middle-left',
+
+  /**
+   * Notifications appear at the middle right of the screen and slide in from the right.
+   */
+  MIDDLE_RIGHT: 'middle-right',
+}
+
+export interface NotiContext {
+  isShow: Ref<boolean>
+  toggleShow: (val?: boolean) => void
+  notifications: Ref<string>
+}

packages/core/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "module": "es2015",
+    "target": "es2018",
+    "moduleResolution": "node",
+    "outDir": "./dist",
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "exclude": [
+    "node_modules"
+  ]
+}

playground/tsconfig.json

@@ -7,7 +7,7 @@
     "skipLibCheck": true,
 
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,