Merge pull request #1130 from privy-open-source/refactor/script-setup

refactor: rename `toast` to `popup`

Author: adenvt

package.json

@@ -46,7 +46,7 @@
     "@vitest/browser": "^0.25.3",
     "@vitest/coverage-c8": "0.24.5",
     "@vue/eslint-config-typescript": "12.0.0",
-    "autoprefixer": "10.4.16",
+    "autoprefixer": "10.4.17",
     "browserslist-to-esbuild": "^1.2.0",
     "eslint": "8.56.0",
     "eslint-config-standard-with-typescript": "latest",
@@ -69,13 +69,14 @@
     "tailwindcss": "3.4.1",
     "typescript": "5.3.3",
     "ufo": "^1.0.1",
-    "vitepress": "1.0.0-rc.36",
+    "vitepress": "1.0.0-rc.40",
     "vitest": "0.24.5",
     "vue-tsc": "1.8.27"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.0.4",
     "@fontsource/dm-sans": "5.0.18",
+    "@jill64/universal-sanitizer": "^1.0.2",
     "@juggle/resize-observer": "^3.4.0",
     "@privyid/persona-icon": "workspace:^",
     "@splidejs/splide": "^4.1.4",
@@ -92,19 +93,17 @@
     "fuse.js": "7.0.0",
     "interactjs": "1.10.26",
     "lodash-es": "4.17.21",
-    "marked": "^5.0.0",
+    "marked": "^11.0.0",
     "nanodelay": "2.0.2",
     "pdfjs-dist": "^3.10.111",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
-    "sanitize-html": "^2.8.1",
     "scroll-into-view": "^1.16.2",
     "tabbable": "6.2.0",
     "vue-collapsed": "^1.2.5",
     "vue-content-loader": "^2.0.1",
     "vue-demi": "0.14.6",
     "vue-router": "4.2.5",
-    "vue3-iframe": "^0.0.7",
     "vuedraggable": "next",
     "webfontloader": "1.6.28",
     "zxcvbn": "^4.4.2"
@@ -116,5 +115,8 @@
   },
   "workspaces": [
     "packages/*"
-  ]
+  ],
+  "resolutions": {
+    "@vue/runtime-core": "3.4.15"
+  }
 }

packages/persona/package.json

@@ -59,6 +59,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "1.5.4",
+    "@jill64/universal-sanitizer": "^1.0.2",
     "@juggle/resize-observer": "3.4.0",
     "@nuxt/kit": "3.9.3",
     "@splidejs/splide": "4.1.4",
@@ -76,10 +77,9 @@
     "fuse.js": "7.0.0",
     "interactjs": "1.10.26",
     "lodash-es": "4.17.21",
-    "marked": "5.1.2",
+    "marked": "11.1.1",
     "nanodelay": "2.0.2",
     "pdfjs-dist": "3.11.174",
-    "sanitize-html": "2.11.0",
     "scroll-into-view": "1.16.2",
     "tabbable": "6.2.0",
     "vue-collapsed": "1.2.9",

packages/persona/src/module.ts

@@ -62,7 +62,7 @@ export default defineNuxtModule<ModuleOptions>({
       config.optimizeDeps?.include?.push(
         '@testing-library/user-event',
         'interactjs',
-        'sanitize-html',
+        '@jill64/universal-sanitizer',
         'scroll-into-view',
         'webfontloader',
         'zxcvbn',

packages/tailwind-preset/index.js

@@ -317,7 +317,7 @@ module.exports = {
           DEFAULT : 1085,
           backdrop: 1080,
         },
-        toast: 1090,
+        notify: 1090,
       },
       minWidth : ({ theme }) => ({ ...theme('spacing') }),
       maxWidth : ({ theme }) => ({ ...theme('spacing') }),

src/.vitepress/config.ts

@@ -385,6 +385,10 @@ export default defineConfig({
               text: 'Overlay',
               link: '/components/overlay/',
             },
+            {
+              text: 'Popup',
+              link: '/components/popup/',
+            },
             {
               text: 'Toast',
               link: '/components/toast/',

src/components/cropper/Cropper.spec.ts

@@ -13,6 +13,7 @@ import { resolve } from 'node:path'
 import { delay } from 'nanodelay'
 import { nextTick, ref } from 'vue-demi'
 import { createSpinner } from '../avatar/utils/create-image'
+import type * as VueUse from '@vueuse/core'
 
 // eslint-disable-next-line unicorn/prefer-module
 const blob = readFileSync(resolve(__dirname, '../../public/assets/images/img-sample-crop.jpg'))
@@ -24,6 +25,20 @@ vi.mock('./utils/use-pinch.ts', () => ({ usePinch }))
 
 vi.mock('../input-range/utils/use-drag.ts', () => ({ default: vi.fn() }))
 
+vi.mock('@vueuse/core', async () => {
+  const vueuse        = await vi.importActual('@vueuse/core')
+  const useThrottleFn = (handler: () => void) => {
+    return (...args: any[]) => {
+      handler.apply(this, args)
+    }
+  }
+
+  return {
+    ...vueuse as typeof VueUse,
+    useThrottleFn,
+  }
+})
+
 afterEach(() => {
   vi.restoreAllMocks()
 })
@@ -183,13 +198,13 @@ it('should able to zoomIn / zoomOut using mouse wheel', async () => {
   // Zoom in
   await fireEvent.wheel(container, { deltaY: 60 })
 
-  expect(preview).toHaveStyle({ transform: 'rotate(0deg) translate(0px, 0px) scale(1.1)' })
+  expect(preview).toHaveStyle({ transform: 'rotate(0deg) translate(0px, 0px) scale(1.6)' })
 
   // Zoom out
   await fireEvent.wheel(container, { deltaY: -60 })
   await fireEvent.wheel(container, { deltaY: -60 })
 
-  expect(preview).toHaveStyle({ transform: 'rotate(0deg) translate(0px, 0px) scale(0.9)' })
+  expect(preview).toHaveStyle({ transform: 'rotate(0deg) translate(0px, 0px) scale(0.5)' })
 })
 
 it('should able to move using keyboard arrow', async () => {

src/components/cropper/Cropper.vue

@@ -109,7 +109,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watchDebounced } from '@vueuse/core'
+import { watchDebounced, useThrottleFn } from '@vueuse/core'
 import { useClamp } from '@vueuse/math'
 import type {
   PropType,
@@ -322,15 +322,12 @@ function crop (): string {
   }
 }
 
-function onMouseWheel (event: WheelEvent) {
+const onMouseWheel = useThrottleFn((event: WheelEvent) => {
   if (image.value)
     image.value.focus()
 
-  if (event.deltaY > 0)
-    zoomIn()
-  else
-    zoomOut()
-}
+  scale.value += event.deltaY * 0.01
+}, 1000 / 30 /* Limit 30 Fps */)
 
 function onImageLoaded () {
   emit('load')

src/components/cropper/index.ts

@@ -1,42 +1,3 @@
-import { createSpinner } from '../avatar/utils/create-image'
-import type { MaybeRef } from '@vueuse/core'
-import {
-  tryOnMounted,
-  tryOnBeforeUnmount,
-} from '@vueuse/core'
-import type { Ref } from 'vue-demi'
-import {
-  ref,
-  unref,
-  watch,
-} from 'vue-demi'
-
-export function usePreview (file: MaybeRef<string | globalThis.File>, fallback = createSpinner(512, 512)): Ref<string> {
-  const preview = ref(fallback)
-
-  watch(() => unref(file), (value) => {
-    if (preview.value?.startsWith('blob'))
-      window.URL.revokeObjectURL(preview.value)
-
-    preview.value = value instanceof globalThis.File
-      ? window.URL.createObjectURL(value)
-      : (value ?? fallback)
-  })
-
-  tryOnMounted(() => {
-    const value = unref(file)
-
-    if (value) {
-      preview.value = value instanceof globalThis.File
-        ? window.URL.createObjectURL(value)
-        : value
-    }
-  })
-
-  tryOnBeforeUnmount(() => {
-    if (preview.value?.startsWith('blob'))
-      window.URL.revokeObjectURL(preview.value)
-  })
-
-  return preview
-}
+export {
+  usePreview,
+} from './utils/use-preview'

src/components/cropper/utils/use-preview.ts

@@ -0,0 +1,29 @@
+import { createSpinner } from '../../avatar/utils/create-image'
+import type { MaybeRef } from '@vueuse/core'
+import type { Ref } from 'vue-demi'
+import {
+  ref,
+  unref,
+  watchEffect,
+} from 'vue-demi'
+
+export function usePreview (file: MaybeRef<string | globalThis.File>, fallback = createSpinner(512, 512)): Ref<string> {
+  const preview = ref(fallback)
+
+  watchEffect((onCleanup) => {
+    const value = unref(file)
+
+    if (value instanceof globalThis.File) {
+      const url = window.URL.createObjectURL(value)
+
+      onCleanup(() => {
+        window.URL.revokeObjectURL(url)
+      })
+
+      preview.value = url
+    } else
+      preview.value = value ?? fallback
+  })
+
+  return preview
+}

src/components/dialog/Dialog.vue

@@ -3,12 +3,15 @@
     v-if="context"
     :key="id"
     v-model="modal"
+    v-bind="context.attrs"
     class="dialog"
     :title="context.title"
     :size="context.size"
     :centered="context.centered"
     :dismissable="context.dismissable"
     :no-close-on-backdrop="context.noCloseOnBackdrop"
+    @show="onModalShow"
+    @hide="onModalHide"
     @close="onCancel">
     <template #header>
       <Heading
@@ -32,11 +35,13 @@
         :cancel-color="context.cancel.color"
         :cancel-variant="context.cancel.variant"
         :cancel-text="context.cancel.text"
+        :cancel-attrs="context.cancel.attrs"
         :confirm-class="context.confirm.className"
         :confirm-visible="context.confirm.visible"
         :confirm-color="context.confirm.color"
         :confirm-variant="context.confirm.variant"
         :confirm-text="context.confirm.text"
+        :confirm-attrs="context.confirm.attrs"
         @confirm="onConfirm"
         @cancel="onCancel" />
     </template>
@@ -50,40 +55,52 @@ import Heading from '../heading/Heading.vue'
 import DialogFooter from './DialogFooter.vue'
 import type { DialogContext } from '.'
 import { vPMd } from '../markdown'
+import { until } from '@vueuse/core'
 
-const id      = ref<symbol>()
-const modal   = ref(false)
-const context = ref<DialogContext>()
+const id         = ref<symbol>()
+const modal      = ref(false)
+const processing = ref(false)
+const context    = ref<DialogContext>()
 
-function show (options: DialogContext) {
+async function show (options: DialogContext) {
   id.value      = Symbol('DialogId')
   context.value = options
 
-  nextTick(() => {
-    modal.value = true
-  })
-}
+  await nextTick()
+
+  modal.value      = true
+  processing.value = true
 
-function hide () {
-  modal.value = false
+  // Wait animation done
+  await until(processing).toBe(false)
 }
 
-function onConfirm () {
-  hide()
+async function hide () {
+  modal.value      = false
+  processing.value = true
 
   // Wait animation done
-  setTimeout(() => {
-    context.value.onConfirm()
-  }, 150)
+  await until(processing).toBe(false)
 }
 
-function onCancel () {
-  hide()
+async function onConfirm () {
+  await hide()
 
-  // Wait animation done
-  setTimeout(() => {
-    context.value.onCancel()
-  }, 150)
+  context.value.onConfirm()
+}
+
+async function onCancel () {
+  await hide()
+
+  context.value.onCancel()
+}
+
+function onModalHide () {
+  processing.value = false
+}
+
+function onModalShow () {
+  processing.value = false
 }
 
 defineExpose({