v-dialogs - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0

package.json

 {
   "name": "v-dialogs",
-  "description": "A simple and powerful dialog, dialog type including Modal, Alert, Mask and Toast, based on Vue2",
-  "version": "2.2.0",
+  "description": "A simple style useful dialog component collection for Vue3",
+  "version": "3.0.0",
   "author": "TerryZ <[e-mail]>",
-  "license": "MIT",
-  "main": "dist/v-dialogs.js",
+  "type": "module",
   "files": [
@@ -12,14 +11,31 @@ "/dist",
   ],
+  "main": "./dist/v-dialogs.umd.cjs",
+  "module": "./dist/v-dialogs.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./types/index.d.ts",
+        "default": "./dist/v-dialogs.js"
+      },
+      "require": "./dist/v-dialogs.umd.cjs"
+    }
+  },
+  "typings": "types/index.d.ts",
+  "license": "MIT",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
-    "test:unit": "mocha-webpack --webpack-config webpack.config.js --require tests/unit/setup.js tests/unit/**/*.spec.js",
-    "cover": "cross-env NODE_ENV=coverage nyc --reporter=lcov --reporter=text npm run test:unit"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 4173",
+    "test:unit": "vitest",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "dts": "vue-tsc --declaration --emitDeclarationOnly"
   },
-  "typings": "types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TerryZ/v-dialogs.git"
+  },
   "keywords": [
     "front-end",
-    "web",
     "vue",
-    "vuejs",
     "dialog",
@@ -33,59 +49,31 @@ "alert",
   ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/TerryZ/v-dialogs.git"
+  "peerDependencies": {
+    "vue": "^3.2.0"
   },
   "dependencies": {
+    "vue": "^3.4.27"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ],
   "devDependencies": {
-    "@vue/test-utils": "^1.2.2",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "babel-runtime": "^6.26.0",
-    "chai": "^4.3.4",
-    "codecov": "^3.5.0",
-    "jsdom": "^15.1.1",
-    "jsdom-global": "^3.0.2",
-    "mocha": "^6.2.1",
-    "mocha-webpack": "^1.1.0",
-    "nyc": "^14.1.1",
-    "istanbul-instrumenter-loader": "^3.0.1",
-    "typescript": "^4.3.5",
-    "cross-env": "^5.0.5",
-    "css-loader": "^3.2.0",
-    "file-loader": "^5.1.0",
-    "sass": "^1.43.4",
-    "sass-loader": "^7.3.1",
-    "vue": "^2.6.14",
-    "vue-loader": "^15.9.0",
-    "vue-style-loader": "^4.1.3",
-    "vue-template-compiler": "^2.6.14",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^3.1.14",
-    "webpack-node-externals": "^1.7.2"
-  },
-  "peerDependencies": {
-    "vue": ">2.6.11"
-  },
-  "nyc": {
-    "include": [
-      "src/components/Alert.js",
-      "src/components/Modal.js",
-      "src/components/Toast.js",
-      "src/components/Mask.js",
-      "src/utils/options.js"
-    ],
-    "instrument": false,
-    "sourceMap": false
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/test-utils": "^2.4.6",
+    "autoprefixer": "^10.4.19",
+    "bootstrap": "^5.3.3",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.26.0",
+    "jsdom": "^24.1.0",
+    "postcss": "^8.4.38",
+    "sass": "^1.77.6",
+    "typescript": "^5.4.5",
+    "prettier": "^3.3.0",
+    "vite": "^5.2.12",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vitest": "^1.6.0",
+    "vue-router": "^4.3.2",
+    "vue-tsc": "^2.0.19"
   }
 }

README.md

@@ -9,18 +9,28 @@ # [v-dialogs](https://terryz.github.io/vue/#/dialog)
 
-A simple and clean instructional dialog plugin for **Vue2**, dialog type including **Modal**, **Alert**, **Mask** and **Toast**
+A simple style useful dialog component collection for **Vue3**
 
-## Examples and Documentation
+- **Alert** Interactive dialog boxes, for notifications that require explicit feedback from the user
+- **Modal** Modal container dialog, It is displayed at the center of the screen
+- **Drawer** Another modal container dialog, It is displayed at the edge of the screen, and it is the better choice for quickly viewing details
+- **Message** Silent message notification, displayed in the vertical center area of ​​the screen
+- **Toast** Silent message notification, displayed in the corner of the screen
+- **Mask** A screen mask that blocks user actions
 
-Explorer on
+If you are using vue 2.x version, please use [v-dialogs 2.x](https://github.com/TerryZ/v-dialogs/tree/dev-vue-2) version instead
 
-- [English site](https://terryz.github.io/vue/#/dialog)
-- [国内站点](https://terryz.gitee.io/vue/#/dialog)
+## Examples and Documentation
 
-The jQuery version: [bDialog](https://github.com/TerryZ/bDialog)
+Documentation and examples please visit below sites
 
-## The Dialog Icon
+- [Github pages](https://terryz.github.io/docs-vue3/dialog/)
 
-The icons in alert dialog used are made by [Elegant Themes](http://www.elegantthemes.com/blog/freebie-of-the-week/beautiful-flat-icons-for-free)
+## Features
 
-The control icon, toast icon used are come from [IconFont](http://www.iconfont.cn)
+- Simple style, makes it easier to apply in more UI
+- Provides 6 types of dialogs: **Modal**, **Drawer**, **Alert**, **Message**, **Mask** and **Toast**
+- Functional form of use
+- **Modal** and **Drawer** provide `DialogModalBox` and `DialogDrawerBox` component form
+- **Alert**, **Message** and **Toast** types provides message type quick access function
+- Built-in 4 languages: `Chinese`, `English`, `Japanese` and `Portuguese`
+- Globally instance(not recommended)
 
@@ -30,13 +40,23 @@ ## Installation
 ```sh
-npm i -S v-dialogs
+# npm
+npm i v-dialogs
+# yarn
+yarn add v-dialogs
+# pnpm
+pnpm add v-dialogs
 ```
 
-Include plugin in your project
+## API
 
-```js
-import Vue from 'vue'
-import Dialogs from 'v-dialogs'
-Vue.use(Dialogs, {
-  // global config options...
-})
+```ts
+type MessageContent = string | VNode
+type ComponentResult = VNode | Component
+type ComponentContent = ComponentResult | (() => ComponentResult)
+
+function DialogAlert(message?: MessageContent, callback?: Function, options?: AlertOptions): Function
+function DialogMessage(message?: MessageContent, callback?: Function, options?: MessageOptions): Function
+function DialogToast(message?: MessageContent, callback?: Function, options?: ToastOptions): Function
+function DialogMask(message?: MessageContent, callback?: Function, options?: MaskOptions): Function
+function DialogModal(component: ComponentContent, options?: ModalOptions): Function
+function DialogDrawer(component: ComponentContent, options?: DrawerOptions): Function
 ```
@@ -46,30 +66,25 @@
 
-### Alert
+### Confirm and Message
 
-```js
-// Globally instance open alert dialog
-// alert message
-this.$dlg.alert(message)
-// alert message with callback
-this.$dlg.alert(message, callback)
-// alert message with options
-this.$dlg.alert(message, options)
-// alert message with callaback and options
-this.$dlg.alert(message, callback, options)
+```ts
+import { DialogAlert, DialogMessage } from 'v-dialogs'
 
-// Functional open alert dialog
-import { DialogAlert } from 'v-dialogs'
-
-DialogAlert(message, [callback], [option])
+function deleteUser (userId) {
+  DialogAlert('Deleted data cannot be recovered, are you sure?', () => {
+    executeDeleteUser(userId).then(() => {
+      DialogMessage('Delete complete.', { messageType: 'success' })
+    })
+  }, { messageType: 'confirm' })
+}
 ```
 
-### Modal
+### Modal dialog
 
-```js
-import Profile from './Profile.vue'
+```ts
+import { DialogModal, DialogAlert } from 'v-dialogs'
+import UserProfile from './UserProfile.vue'
 
-// Globally instance open modal dialog
-this.$dlg.modal(Profile, {
-  width: 400,
-  height: 300,
+DialogModal(UserProfile, {
+  width: 900,
+  height: 600,
   title: 'User Profile',
@@ -81,80 +96,108 @@ params: {
   callback: data => {
-    this.$dlg.alert(`Received message: ${data}`)
+    DialogAlert(`Received message: ${data}`)
   }
 })
+```
 
-// Functional open modal dialog
-import { DialogModal } from 'v-dialogs'
+### Component form
 
-DialogModal(page, [options])
+```vue
+<template>
+  <div>
+    <DialogDrawerBox v-model:visible="visible" >
+      <UserProfile />
+    </DialogDrawerBox>
+
+    <button
+      type="button"
+      @click="openDialog"
+    >Open Drawer</button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { DialogDrawerBox } from 'v-dialogs'
+
+import UserProfile from './UserProfile.vue'
+
+const visible = ref(false)
+
+function openDialog () {
+  visible.value = true
+}
+</script>
 ```
 
-### Toast
+### Fetch data
 
-```js
-// Globally instance open toast dialog
-// show message in corner
-this.$dlg.toast(message)
-// show message with callback
-this.$dlg.toast(message, callback)
-// show message with options
-this.$dlg.toast(message, options)
-// show message with callaback and options
-this.$dlg.toast(message, callback, options)
+```ts
+import { DialogMask, DialogMessage, DialogAlert } from 'v-dialogs'
 
-// Functional open toast dialog
-import { DialogToast } from 'v-dialogs'
+function loadDataList () {
+  const destroy = DialogMask()
 
-DialogToast(message, [callback], [option])
+  fetchData()
+    .then(data => {
+      list.value = data.list
+      // Dismiss mask overlay
+      destroy()
+      DialogMessage('Data loaded successfully', { messageType: 'success' })
+    })
+    .catch(() => {
+      DialogAlert('Data Load Failure', { messageType: 'error' })
+    })
+}
 ```
 
-### Mask
+### Message type quick access
 
-```js
-// Globally instance open mask dialog
-// show default message
-this.$dlg.mask()
-// show specify message
-this.$dlg.mask('Data loading, please hold on a moment...')
+**Alert**, **Message** and **Toast** types provides message type quick access function
 
-// Functional open mask dialog
-import { DialogMask } from 'v-dialogs'
+```ts
+import {
+  DialogMessage
+  DialogMessageSuccess
+} from 'v-dialogs'
 
-DialogMask([message], [callback])
+DialogMessageSuccess('Saved successfully!')
+// Equivalent to
+DialogMessage('Saved successfully!', { messageType: 'success' })
 ```
 
-### DialogHelper
+## Globally instance
 
-#### close
+`v-dialogs` also provides a globally instance to open dialogs, you can use it in any component
 
+The default instance name is `$dlg`
+
 ```js
-import { DialogMask, DialogHelper } from 'v-dialogs'
+import { createApp } from 'vue'
+import dialogs from 'v-dialogs'
+import App from 'App.vue'
 
-const key = DialogMask()
-// do your job stuff
-job().then(() => {
-  // close mask with key
-  DialogHelper.close(key)
-})
+createApp(App).use(dialogs).mount('#app')
 ```
 
-#### closeAll
+> The global instance are only supported as a feature and are not recommended for use
 
+### Option API
+
 ```js
-import { DialogHelper } from 'v-dialogs'
+export default {
+  mounted () {
+    this.$dlg.message('Saved successfully!')
+  }
+}
+```
 
-fetchData()
-  .then(() => {
-    // do fetch data success work
-    ...
-  })
-  .catch(error => {
-    // login state timeout for example
-    if (error.isLoginTimeout) {
-      // close all opened dialogs
-      DialogHelper.closeAll()
-      // redirect to login page
-      router.push({ path: '/login' })
-    }
-  })
+### Composition API
+
+```js
+import { getCurrentInstance } from 'vue'
+
+// const $dlg = getCurrentInstance().appContext.config.globalProperties.$dlg
+const $dlg = getCurrentInstance().proxy.$dlg
+
+$dlg.message('Saved successfully!')
 ```

types/alert.d.ts

@@ -1,11 +0,15 @@
-import { DialogBaseOption } from './helper'
+import { DialogBaseOptions, DialogMessageType, MessageDialog } from './base'
 
-declare interface AlertOption extends DialogBaseOption {
+export declare interface AlertOptions extends DialogBaseOptions {
   /**
+   * Display the header
+   * @default true
+   */
+  header?: boolean
+  /**
    * The title text displayed in header
-   * - set to false to close header
    */
-  title?: boolean | string
+  title?: string
   /**
-   * Alert message type
+   * Message type
    * - `info` default
@@ -17,4 +21,7 @@ * - `warning`
    */
-  messageType?: 'info' | 'warning' | 'error' | 'success' | 'confirm'
-  /** Message type icon */
+  messageType?: DialogMessageType | 'confirm'
+  /**
+   * Message type icon
+   * @default true
+   */
   icon?: boolean
@@ -24,5 +31,6 @@ /** Shake the dialog when operating outside the dialog */
   /**
-   * The time(second) to automatically close dialog
+   * Use colorful shadow
+   * @default false
    */
-  closeTime?: boolean | number
+  colorfulShadow?: boolean
   /**
@@ -34,5 +42,9 @@ * Respond the cancel button click in `confirm` type alert
    * The dialog background overlay
+   * @default true
    */
   backdrop?: boolean
-  /** Click outside the dialog to close dialog */
+  /**
+   * Click outside the dialog to close dialog
+   * @default false
+   */
   backdropClose?: boolean
@@ -42,12 +54,40 @@ }
 /**
- * Display a alert dialog
+ * Open an alert dialog
  * @param message - The message to display
  * @param callback - respond the dialog close
- * @param options - custom options
- * @returns the dialog key
+ * @param options - dialog options
+ * @returns the method to close dialog
  */
-export function DialogAlert (
-  message: string,
-  callback?: Function,
-  options?: AlertOption
-): string
+export declare const DialogAlert: typeof MessageDialog<AlertOptions>
+/**
+ * Open an warning type alert dialog
+ * @param message - The message to display
+ * @param callback - respond the dialog close
+ * @param options - dialog options
+ * @returns the method to close dialog
+ */
+export declare const DialogAlertWarning: typeof MessageDialog<AlertOptions>
+/**
+ * Open an error type alert dialog
+ * @param message - The message to display
+ * @param callback - respond the dialog close
+ * @param options - dialog options
+ * @returns the method to close dialog
+ */
+export declare const DialogAlertError: typeof MessageDialog<AlertOptions>
+/**
+ * Open an success type alert dialog
+ * @param message - The message to display
+ * @param callback - respond the dialog close
+ * @param options - dialog options
+ * @returns the method to close dialog
+ */
+export declare const DialogAlertSuccess: typeof MessageDialog<AlertOptions>
+/**
+ * Open an confirm type alert dialog
+ * @param message - The message to display
+ * @param callback - respond the dialog close
+ * @param options - dialog options
+ * @returns the method to close dialog
+ */
+export declare const DialogAlertConfirm: typeof MessageDialog<AlertOptions>

types/index.d.ts

@@ -1,17 +0,11 @@
-import Vue from 'vue'
-import { DialogAlert } from './alert'
-import { DialogModal } from './modal'
-import { DialogToast } from './toast'
-import { DialogMask } from './mask'
-import { DialogHelper } from './helper'
+import { AppContext } from 'vue'
 
-export {
-  DialogAlert,
-  DialogModal,
-  DialogToast,
-  DialogMask,
-  DialogHelper
-}
+export * from './alert'
+export * from './message'
+export * from './toast'
+export * from './modal'
+export * from './drawer'
+export * from './mask'
 
-declare interface DialogInstallOption {
+declare interface DialogInstallOptions {
   /**
@@ -24,3 +18,3 @@ * The instance name of the dialog
    * import Dialogs from 'v-dialogs'
-   * Vue.use(Dialogs, {
+   * createApp().use(Dialogs, {
    *   instanceName: '$dialog'
@@ -37,6 +31,6 @@ * })
    * Globally install dialogs
-   * @param Vue - the Vue instance
-   * @param options - install options
+   * @param app - the Vue app instance
+   * @param options - globally install options
    */
-  install (Vue:Vue, options: DialogInstallOption): void
+  install (app:AppContext, options: DialogInstallOptions): void
 }

types/mask.d.ts

@@ -1,23 +0,33 @@
-import { DialogBaseOption } from './helper'
+import { DialogBaseOptions, MessageDialog } from './base'
 
-declare interface MaskOption extends DialogBaseOption {
-  /** Shake the dialog when operating outside the dialog */
-  shaking?: boolean
+export declare interface MaskOptions extends DialogBaseOptions {
   /**
-   * The time(second) to automatically close dialog
+   * The element that mask append to
+   * @default `body`
    */
-  closeTime?: boolean | number
+  appendTo?: string
+  /**
+   * Pill style border
+   * @default true
+   */
+  pill?: boolean
+  /**
+   * Display spinner icon
+   * @default true
+   */
+  icon?: boolean
+  /**
+   * Display the content panel
+   * @default true
+   */
+  panel?: boolean
 }
 
 /**
- * Display a mask layer
+ * Display a overlay mask
  * @param message - The message to display
  * @param callback - respond the dialog close
  * @param options - custom options
- * @returns the dialog key
+ * @returns the method to close dialog
  */
-export function DialogMask (
-  message?: string,
-  callback?: Function,
-  options?: MaskOption
-): string
+export declare const DialogMask: typeof MessageDialog<MaskOptions>

types/modal.d.ts

@@ -1,30 +0,45 @@
-import { Component } from 'vue'
-import { DialogBaseOption } from './helper'
+import { DialogBaseOptions, ContainerDialog, ContainerDialogBox } from './base'
 
-declare interface ModalOption extends DialogBaseOption {
+export declare interface ModalOptions extends DialogBaseOptions {
   /**
+   * Display the header
+   * @default true
+   */
+  header?: boolean
+  /**
    * The title text displayed in header
-   * - set to false to close header
    */
-  title?: boolean | string
-  /** Dialog width */
+  title?: string
+  /**
+   * Dialog width
+   * @default 700
+   */
   width?: number
-  /** Dialog height */
+  /**
+   * Dialog height
+   * @default 400
+   */
   height?: number
-  /** The parameters pass to component */
-  params?: any
-  /** Close dialog button in header */
+  /** The parameters pass to component as props */
+  params?: Record<string, unknown>
+  /**
+   * The close dialog button in header
+   * @default true
+   */
   closeButton?: boolean
-  /** Maximize dialog button in header */
+  /**
+   * Maximize dialog button in header
+   * @default true
+   */
   maxButton?: boolean
-  /** Open and maximize the modal dialog */
+  /**
+   * Open and maximize the modal dialog
+   * @default false
+   */
   fullscreen?: boolean
-  /** Shake the dialog when operating outside the dialog */
+  /**
+   * Shake the dialog when operating outside the dialog
+   * @default true
+   */
   shaking?: boolean
-  /** The dialog background overlay */
-  backdrop?: boolean
-  /** Click outside the dialog to close dialog */
-  backdropClose?: boolean
-  /** Dialog close callback */
-  callback?: Function
 }
@@ -36,7 +51,8 @@
  * @param options - custom options
- * @returns the dialog key
+ * @returns the method to close dialog
  */
-export function DialogModal (
-  component: Component,
-  options?: ModalOption
-): string
+export declare const DialogModal: typeof ContainerDialog<ModalOptions>
+/**
+ * Use component to display content in a modal dialog
+ */
+export declare const DialogModalBox: ContainerDialogBox<ModalOptions>

types/toast.d.ts

@@ -1,18 +0,6 @@
-import { DialogBaseOption } from './helper'
+import { DialogBaseOptions, DialogMessageType, MessageDialog } from './base'
 
-declare type ToastPosition = 'topLeft'
-  | 'topCenter'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomCenter'
-  | 'bottomRight'
-
-declare interface ToastOption extends DialogBaseOption {
+export declare interface ToastOptions extends DialogBaseOptions {
   /**
-   * The title text displayed in header
-   * - set to false to close header
-   */
-  title?: boolean | string
-  /**
-   * Toast message type
+   * Message type
    * - `info` default
@@ -23,35 +11,64 @@ * - `warning`
    */
-  messageType?: 'info' | 'warning' | 'error' | 'success'
-  /** Message type icon */
+  messageType?: DialogMessageType
+  /**
+   * Message type icon
+   * @default true
+   */
   icon?: boolean
   /**
-   * The time(second) to automatically close dialog
+   * Display close button
+   * @default false
    */
-  closeTime?: boolean | number
-  /** Display close button */
   closeButton?: boolean
   /**
-   * Toast dialog display position
+   * The number of milliseconds to automatically close the dialog
    *
-   * - `topLeft`
-   * - `topCenter`
-   * - `topRight`
-   * - `bottomLeft`
-   * - `bottomCenter`
-   * - `bottomRight` default
+   * set to 0 to disable auto close
+   *
+   * @default 3000
    */
-  position?: ToastPosition
+  duration?: number
+  /**
+   * The distance to the top of viewport
+   * @default 16
+   */
+  offset?: string | number
+  /**
+   * The placement of the toast dialog
+   * @default `top-right`
+   */
+  placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
 }
 
 /**
- * Display a toast dialog
+ * Open a toast dialog
  * @param message - The message to display
  * @param callback - respond the dialog close
- * @param options - custom options
- * @returns the dialog key
+ * @param options - dialog options
+ * @returns the method to close dialog
  */
-export function DialogToast (
-  message: string,
-  callback?: Function,
-  options?: ToastOption
-): string
+export declare const DialogToast: typeof MessageDialog<ToastOptions>
+/**
+ * Open an warning type toast dialog
+ * @param message - The message to display
+ * @param callback - respond the dialog close
+ * @param options - dialog options
+ * @returns the method to close dialog
+ */
+export declare const DialogToastWarning: typeof MessageDialog<ToastOptions>
+/**
+ * Open an error type toast dialog
+ * @param message - The message to display
+ * @param callback - respond the dialog close
+ * @param options - dialog options
+ * @returns the method to close dialog
+ */
+export declare const DialogToastError: typeof MessageDialog<ToastOptions>
+/**
+ * Open an success type toast dialog
+ * @param message - The message to display
+ * @param callback - respond the dialog close
+ * @param options - dialog options
+ * @returns the method to close dialog
+ */
+export declare const DialogToastSuccess: typeof MessageDialog<ToastOptions>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

21

decreased by-30%

Number of package files

13

increased by18.18%

Lines of code

2351

increased by150.64%

Number of lines in readme file

200

increased by27.39%

Is type module

Yes

Worsened metrics

Total package byte prevSize

115978

decreased by-92.08%

Dependency count

2

increased by100%

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedvue@^3.4.27