nutui-uniapp - npm Package Compare versions

Comparing version 1.7.15 to 1.7.16

components/composables.ts

@@ -1,1 +0,2 @@
-export * from './toast/use-toast'
+export { useNotify } from './notify/use-notify'
+export { useToast } from './toast/use-toast'

components/notify/index.ts

@@ -1,3 +0,2 @@
-export type * from './notify'
-export type * from './type'
-export type * from './use-notify'
+export * from './types'
+export * from './notify'

components/notify/notify.ts

 import type { ExtractPropTypes } from 'vue'
-import { commonProps, isBoolean, makeNumberProp, makeStringProp } from '../_utils'
-import type { Position } from '../_constants/types'
-import { UPDATE_VISIBLE_EVENT } from '../_constants'
-import type { NotifyType } from './type'
+import { commonProps, isBoolean, makeNumberProp, makeNumericProp, makeStringProp } from '../_utils'
+import { CLICK_EVENT, CLOSED_EVENT, CLOSE_EVENT, UPDATE_VISIBLE_EVENT } from '../_constants'
+import type { NotifyOptions, NotifyPosition, NotifyType } from './types'
 
+export const notifyDefaultOptionsKey = '__NOTIFY_OPTIONS__'
+
+export const notifyDefaultOptions: Required<Pick<
+  NotifyOptions,
+  'visible' | 'type' | 'msg' | 'position' | 'duration' | 'zIndex'
+>> = {
+  visible: false,
+  type: 'danger',
+  msg: '',
+  position: 'top',
+  duration: 3000,
+  zIndex: 9999,
+} as const
+
 export const notifyProps = {
   ...commonProps,
   /**
-   * @description 字体颜色
+   * @description 显示与否
    */
-  customColor: makeStringProp(''),
+  visible: {
+    type: Boolean,
+    default: notifyDefaultOptions.visible,
+  },
   /**
+   * @description 配置注入的key
+   */
+  selector: String,
+  /**
+   * @description 提示的信息类型，可选值为`base` `primary` `success` `danger` `warning`
+   */
+  type: makeStringProp<NotifyType>(notifyDefaultOptions.type),
+  /**
    * @description 展示文案，支持通过`\n`换行
    */
-  msg: makeStringProp(''),
+  msg: makeStringProp(notifyDefaultOptions.msg),
   /**
+   * @description 自定义位置，可选值为 `top` `bottom`
+   */
+  position: makeStringProp<NotifyPosition>(notifyDefaultOptions.position),
+  /**
    * @description 展示时长(ms)，值为 0 时，notify 不会消失
    */
-  duration: makeNumberProp(3000),
+  duration: makeNumberProp(notifyDefaultOptions.duration),
   /**
@@ -26,2 +54,10 @@ * @description 自定义类名
   /**
+   * @description 组件z-index
+   */
+  zIndex: makeNumberProp(notifyDefaultOptions.zIndex),
+  /**
+   * @description 字体颜色
+   */
+  customColor: makeStringProp(''),
+  /**
    * @description 背景颜色
@@ -31,22 +67,18 @@ */
   /**
-   * @description 提示的信息类型，可选值为`primary` `success` `danger` `warning`
+   * @description 是否留出顶部安全距离（默认为状态栏高度）
    */
-  type: makeStringProp<NotifyType>('danger'),
+  safeAreaInsetTop: Boolean,
   /**
-   * @description 显示与否
+   * @description 是否留出底部安全距离（启用后通过 `safeHeight` 指定距离）
    */
-  visible: Boolean,
+  safeAreaInsetBottom: Boolean,
   /**
-   * @description 自定义位置，可选值为 `top` `bottom` `left` `right` `center`
+   * @description 自定义安全距离
    */
-  position: makeStringProp<Position>('top'),
+  safeHeight: makeNumericProp(''),
   /**
-   * @description 是否留出顶部安全距离（默认为状态栏高度）
+   * @description 点击时的回调函数
    */
-  safeAreaInsetTop: Boolean,
+  onClick: Function,
   /**
-   * @description 顶部安全高度（默认为状态栏高度）
-   */
-  safeHeight: Number,
-  /**
    * @description 关闭时的回调函数
@@ -56,12 +88,16 @@ */
   /**
-   * @description 点击时的回调函数
+   * @description 关闭动画完成时回调函数
    */
-  onClick: Function,
+  onClosed: Function,
 }
+
 export type NotifyProps = ExtractPropTypes<typeof notifyProps>
 
 export const notifyEmits = {
-  [UPDATE_VISIBLE_EVENT]: (val: boolean) => isBoolean(val),
+  [UPDATE_VISIBLE_EVENT]: (value: boolean) => isBoolean(value),
+  [CLICK_EVENT]: () => true,
+  [CLOSE_EVENT]: () => true,
+  [CLOSED_EVENT]: () => true,
 }
 
 export type NotifyEmits = typeof notifyEmits

components/notify/use-notify.ts

@@ -1,88 +0,62 @@
-import { type SetupContext, onUnmounted, ref, watch } from 'vue'
-import { UPDATE_VISIBLE_EVENT } from '../_constants'
-import type { NotifyEmits, NotifyProps } from './notify'
-import type { NotifyOptions } from './type'
+import { provide, ref } from 'vue'
+import { cloneDeep } from '../_utils'
+import type { NotifyInst, NotifyOptions, NotifyType } from './types'
+import { notifyDefaultOptions, notifyDefaultOptionsKey } from './notify'
 
-export function useNotify(props: NotifyProps, emit: SetupContext<NotifyEmits>['emit']) {
-  const clickCover = () => {
-    props.onClick && props.onClick()
+export function useNotify(selector = ''): NotifyInst {
+  const notifyOptionsKey = `${notifyDefaultOptionsKey}${selector || ''}`
+  const notifyOptions = ref<NotifyOptions>(cloneDeep(notifyDefaultOptions))
+
+  provide(notifyOptionsKey, notifyOptions)
+
+  function show(type: NotifyType, msg: string, options?: NotifyOptions) {
+    notifyOptions.value = Object.assign({
+      visible: true,
+      type,
+      msg,
+    }, options)
   }
-  let timer: NodeJS.Timeout | null | undefined
 
-  const clearTimer = () => {
-    if (timer) {
-      timer && clearTimeout(timer)
-      timer = null
-    }
+  function legacyShow(options: NotifyOptions) {
+    show(notifyDefaultOptions.type, options.msg || notifyDefaultOptions.msg, options)
   }
-  // watch show popup
-  const isShowPopup = ref<boolean>(false)
 
-  const notifyStatus = ref<NotifyOptions>({
-    type: props.type,
-    msg: props.msg,
-    customColor: props.customColor,
-    background: props.background,
-    duration: props.duration,
-    position: props.position,
-    safeAreaInsetTop: props.safeAreaInsetTop,
-  })
+  function showPrimary(msg: string, options?: NotifyOptions) {
+    show('primary', msg, options)
+  }
 
-  const errorMsg = (msg: string) => {
-    if (!msg) {
-      console.warn('[NutUI Notify]: msg不能为空')
-      /* eslint-disable no-useless-return */
-      return
-    }
+  function showSuccess(msg: string, options?: NotifyOptions) {
+    show('success', msg, options)
   }
 
-  const hideNotify = () => {
-    isShowPopup.value = false
-    emit(UPDATE_VISIBLE_EVENT, false)
+  function showDanger(msg: string, options?: NotifyOptions) {
+    show('danger', msg, options)
   }
 
-  const showNotify = (option: NotifyOptions) => {
-    errorMsg(option.msg)
-    notifyStatus.value = {
-      type: option.type || props.type,
-      position: option.position || props.position,
-      msg: option.msg || props.msg,
-      customColor: option.customColor || props.customColor,
-      background: option.background || props.background,
-      duration: option.duration || props.duration,
-      safeAreaInsetTop: option.safeAreaInsetTop || props.safeAreaInsetTop,
+  function showWarning(msg: string, options?: NotifyOptions) {
+    show('warning', msg, options)
+  }
 
-    }
+  function showCustom(msg: string, options?: NotifyOptions) {
+    show('custom', msg, options)
+  }
 
-    clearTimer()
-    isShowPopup.value = true
-    if (notifyStatus.value.duration && notifyStatus.value.duration > 0)
-      timer = setTimeout(hideNotify, notifyStatus.value.duration)
+  function hide() {
+    notifyOptions.value = Object.assign(cloneDeep(notifyOptions.value), {
+      visible: false,
+    })
   }
 
-  watch(
-    () => props.visible,
-    (newVal: boolean) => {
-      isShowPopup.value = newVal
-      const DURATION: number = notifyStatus.value.duration!
-      if (newVal && DURATION) {
-        timer = setTimeout(() => {
-          hideNotify()
-        }, DURATION)
-      }
-    },
-    { immediate: true },
-  )
+  return {
+    showNotify: legacyShow,
+    hideNotify: hide,
 
-  onUnmounted(() => {
-    clearTimer()
-  })
-
-  return {
-    clickCover,
-    showNotify,
-    hideNotify,
-    notifyStatus,
-    isShowPopup,
+    show,
+    primary: showPrimary,
+    success: showSuccess,
+    danger: showDanger,
+    warning: showWarning,
+    custom: showCustom,
+    hide,
   }
 }

components/tabbar/index.ts

@@ -0,1 +1,2 @@
+export * from './types'
 export * from './tabbar'

components/tabbar/tabbar.ts

@@ -1,4 +0,5 @@
-import type { ExtractPropTypes } from 'vue'
-import { commonProps, isNumber, isString, makeNumericProp, makeStringProp } from '../_utils'
+import type { ExtractPropTypes, InjectionKey } from 'vue'
+import { commonProps, isNumber, isString, makeNumericProp } from '../_utils'
 import { UPDATE_MODEL_EVENT } from '../_constants'
+import type { TabbarContext } from './types'
 
@@ -16,2 +17,6 @@ export const tabbarProps = {
   /**
+   * @description icon激活的颜色
+   */
+  activeColor: String,
+  /**
    * @description icon未激活的颜色
@@ -21,6 +26,2 @@ */
   /**
-   * @description icon激活的颜色
-   */
-  activeColor: String,
-  /**
    * @description 是否开启iphone系列全面屏底部安全区适配
@@ -33,10 +34,2 @@ */
   placeholder: Boolean,
-  /**
-   * @description icon的尺寸
-   */
-  size: makeStringProp('20px'),
-  /**
-   * @description 是否显示小红点
-   */
-  dot: Boolean,
 }
@@ -52,1 +45,3 @@
 export type TabBarEmits = typeof tabbarEmits
+
+export const TABBAR_CONTEXT_KEY: InjectionKey<TabbarContext> = Symbol('TABBAR_CONTEXT')

components/tabbaritem/tabbaritem.ts

@@ -9,6 +9,2 @@ import type { ExtractPropTypes } from 'vue'
   /**
-   * @description 标签页的标题
-   */
-  tabTitle: String,
-  /**
    * @description 标签名称，作为匹配的标识符
@@ -22,7 +18,7 @@ */
   /**
-   * @description 标签页的跳转链接
+   * @description 标签页的标题
    */
-  href: String,
+  tabTitle: String,
 }
 
 export type TabBarItemProps = ExtractPropTypes<typeof tabbaritemProps>

components/toast/index.ts

@@ -1,2 +0,2 @@
-export * from './type'
+export * from './types'
 export * from './toast'

components/toast/toast.ts

 import type { ExtractPropTypes } from 'vue'
 import { commonProps, isBoolean, makeNumberProp, makeNumericProp, makeStringProp } from '../_utils'
 import { CLOSED_EVENT, CLOSE_EVENT, UPDATE_VISIBLE_EVENT } from '../_constants'
-import type { ToastOptions, ToastSize, ToastType } from './type'
+import type { ToastOptions, ToastSize, ToastType } from './types'
 
@@ -6,0 +6,0 @@ export const toastDefaultOptionsKey = '__TOAST_OPTIONS__'

components/toast/use-toast.ts

 import { provide, ref } from 'vue'
 import { cloneDeep } from '../_utils'
-import type { ToastInst, ToastOptions, ToastType } from './type'
+import type { ToastInst, ToastOptions, ToastType } from './types'
 import { toastDefaultOptions, toastDefaultOptionsKey } from './toast'
 
-export function useToast(selector: string = ''): ToastInst {
+export function useToast(selector = ''): ToastInst {
+  const toastOptionsKey = `${toastDefaultOptionsKey}${selector || ''}`
   const toastOptions = ref<ToastOptions>(cloneDeep(toastDefaultOptions))
 
-  const toastOptionsKey: string = `${toastDefaultOptionsKey}${selector || ''}`
   provide(toastOptionsKey, toastOptions)
@@ -11,0 +11,0 @@

package.json

 {
   "name": "nutui-uniapp",
   "displayName": "nutui-uniapp 京东风格的轻量级移动端 Uniapp、Vue3 组件库",
-  "version": "1.7.15",
+  "version": "1.7.16",
   "description": "京东风格的轻量级移动端 Uniapp、Vue3 组件库（支持小程序开发）",
@@ -60,5 +60,5 @@ "author": "yang1206 <[e-mail]>",
   "peerDependencies": {
-    "@uni-helper/uni-app-types": ">=0.5.12",
+    "@uni-helper/uni-app-types": "^1.0.0-alpha.3",
     "vue": ">=3.2.0"
   }
 }

tags.json

@@ -1310,13 +1310,20 @@ {
     "attributes": [
+      "visible",
+      "selector",
       "type",
-      "visible",
       "msg",
+      "position",
       "duration",
+      "class-name",
+      "z-index",
       "custom-color",
       "background",
-      "class-name",
-      "position",
       "safe-area-inset-top",
+      "safe-area-inset-bottom",
       "safe-height",
+      "on-click",
+      "on-close",
+      "on-closed",
       "click",
+      "close",
       "closed"
@@ -1323,0 +1330,0 @@ ],

No alert changes

Improved metrics

Total package byte prevSize

2860285

increased by0.14%

Lines of code

38507

increased by0.35%

No dependency changes