Merge pull request #1050 from privy-open-source/release/0.26.0

release: `0.26.0`

.nvmrc

@@ -1 +1 @@
-20
+18

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@privyid/design-system",
-  "version": "0.25.2",
+  "version": "0.26.0",
   "packageManager": "[email protected]",
   "private": true,
   "type": "module",

packages/browserslist-config/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/browserslist-config",
   "description": "Browserslist shareable config for Persona project",
-  "version": "0.25.2",
+  "version": "0.26.0",
   "packageManager": "[email protected]",
   "license": "MIT",
   "repository": {

packages/eslint-config-persona/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/eslint-config-persona",
   "description": "Eslint shareable config for Persona project",
-  "version": "0.25.2",
+  "version": "0.26.0",
   "packageManager": "[email protected]",
   "license": "MIT",
   "repository": {

packages/persona-icon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/persona-icon",
   "description": "Persona icon package",
-  "version": "0.25.2",
+  "version": "0.26.0",
   "packageManager": "[email protected]",
   "type": "module",
   "main": "./dist/module.cjs",

packages/persona-icon/scripts/changelog.ts

@@ -5,7 +5,7 @@
 import { resolve } from 'node:path'
 import { readJSON } from 'fs-extra'
 import { name } from '../package.json'
-import { MetaData } from './types'
+import type { MetaData } from './types'
 import got from 'got'
 import ohash from 'ohash'
 import minimist from 'minimist'

packages/persona-icon/scripts/create-font.ts

@@ -11,7 +11,7 @@ import {
   basename,
 } from 'node:path'
 import { createHash } from 'node:crypto'
-import { Result } from 'webfont/dist/src/types/Result'
+import type { Result } from 'webfont/dist/src/types/Result'
 import { EOL } from 'node:os'
 
 const SVG_DIR  = resolve(__dirname, '../svg/')

packages/persona-icon/scripts/fix-svg.ts

@@ -1,4 +1,5 @@
-import SVGPath, { PathArray } from 'svg-path-commander'
+import type { PathArray } from 'svg-path-commander'
+import SVGPath from 'svg-path-commander'
 import { orderBy } from 'lodash-es'
 
 type Point = ReturnType<typeof SVGPath['getPointAtLength']>

packages/persona-icon/scripts/lint.ts

@@ -3,7 +3,7 @@
 /* eslint-disable unicorn/prefer-top-level-await */
 import { readJSON } from 'fs-extra'
 import { resolve } from 'node:path'
-import { MetaData } from './types'
+import type { MetaData } from './types'
 
 const META_FILE = resolve(__dirname, '../svg/meta.json')
 

packages/persona-icon/scripts/sync.ts

@@ -21,11 +21,12 @@ import {
   join,
 } from 'node:path'
 import { kebabCase, chunk } from 'lodash-es'
-import { Config, optimize } from 'svgo'
+import type { Config } from 'svgo'
+import { optimize } from 'svgo'
 import download from 'download'
 import ora from 'ora'
 import { ESLint } from 'eslint'
-import { ObjectData, MetaData } from './types'
+import type { ObjectData, MetaData } from './types'
 import { fixPath } from './fix-svg'
 import { createFont } from './create-font'
 import pAll from 'p-all'

packages/persona/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/persona",
   "description": "Persona core package",
-  "version": "0.25.2",
+  "version": "0.26.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/privy-open-source/design-system.git",

packages/tailwind-animation/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/tailwind-animation",
   "description": "Collection animation class for vue `<transition>`",
-  "version": "0.25.2",
+  "version": "0.26.0",
   "packageManager": "[email protected]",
   "license": "MIT",
   "repository": {

packages/tailwind-extended/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/tailwind-extended",
   "description": "Add missing tailwind utilities",
-  "version": "0.25.2",
+  "version": "0.26.0",
   "packageManager": "[email protected]",
   "license": "MIT",
   "repository": {

packages/tailwind-preset/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/tailwind-preset",
   "description": "Tailwind preset for Persona project",
-  "version": "0.25.2",
+  "version": "0.26.0",
   "packageManager": "[email protected]",
   "license": "MIT",
   "repository": {

src/.vitepress/config.ts

@@ -396,6 +396,10 @@ export default defineConfig({
               text: 'Dropzone',
               link: '/components/dropzone/',
             },
+            {
+              text: 'Popover',
+              link: '/components/popover/',
+            },
             {
               text: 'Spread',
               link: '/components/spread/',

src/.vitepress/theme/components/NuxtLink.vue

@@ -27,6 +27,7 @@
 
 <script lang="ts">
 import type { PropType } from 'vue-demi'
+import { hasProtocol } from 'ufo'
 import {
   computed,
   defineComponent,
@@ -50,7 +51,7 @@ export default defineComponent({
   setup (props) {
     const isExternalLink = computed(() => {
       return typeof props.href === 'string'
-        && (props.href.startsWith('http') || props.href.startsWith('#'))
+        && (hasProtocol(props.href) || props.href.startsWith('#'))
     })
 
     return { isExternalLink }

src/components/checkbox/index.ts

@@ -22,23 +22,20 @@ export interface CheckboxProps extends InputProps<unknown> {
 
 export function useVModel (props: CheckboxProps) {
   const { emit }   = getCurrentInstance()
-  const checked    = props.value
-  const unchecked  = props.uncheckedValue
-  const localValue = ref(isChecked(props.modelValue, checked) || props.checked)
-
-  const model = computed({
+  const localValue = ref(isChecked(props.modelValue, props.value) || props.checked)
+  const model      = computed({
     get () {
-      return isChecked(props.modelValue, checked) || props.checked
+      return isChecked(props.modelValue, props.value) || props.checked
     },
     set (value: boolean) {
-      const newValue = value ? checked : unchecked
+      const newValue = value ? props.value : props.uncheckedValue
 
       if (Array.isArray(props.modelValue)) {
         if (value) {
           if (!valueIn(props.modelValue, newValue))
             emit('update:modelValue', [...props.modelValue, newValue])
         } else
-          emit('update:modelValue', props.modelValue.filter((old) => !isEqual(old, checked)))
+          emit('update:modelValue', props.modelValue.filter((old) => !isEqual(old, props.value)))
       } else
         emit('update:modelValue', newValue)
 

src/components/dropdown/Dropdown.vue

@@ -197,8 +197,10 @@ defineEmits<{
 }>()
 
 const slots = defineSlots<{
-  prepend(): VNode[],
-  append(): VNode[],
+  'activator'(props: { isOpen: boolean, open: () => void, close: () => void, toggle: () => void }): VNode[],
+  'button-content'(): VNode[],
+  'prepend'(): VNode[],
+  'append'(): VNode[],
 }>()
 
 const root     = ref<HTMLDivElement>()

src/components/dropdown/index.md

@@ -17,7 +17,7 @@ description: Base dropdown button, suit for action menus
   import pText from '../text/Text.vue'
   import { ref } from "vue-demi"
 
-  const show = ref(false)
+  const show     = ref(false)
   const selected = ref('')
 </script>
 
@@ -29,7 +29,7 @@ description: Base dropdown button, suit for action menus
 
 ### Simple Usage
 <preview>
-  <p-dropdown text="Click Here" button-class="w-full" menu-size="lg">
+  <p-dropdown text="Click Here">
     <p-dropdown-item active>Item Text</p-dropdown-item>
     <p-dropdown-item>Item Text</p-dropdown-item>
     <p-dropdown-item>Item Text</p-dropdown-item>

src/components/popover/Popover.spec.ts

@@ -0,0 +1,46 @@
+import { fireEvent, render } from '@testing-library/vue'
+import pPopover from './Popover.vue'
+
+it('should able to show tooltip over activator element', async () => {
+  const screen = render({
+    components: { pPopover },
+    template  : `
+        <p-popover>
+          <template #activator="{ toggle }">
+            <a href="javascript:void" data-testid="activator" @click="toggle">
+              Remove?
+            </a>
+          </template>
+          <template #default>
+            <div class="flex items-center space-x-2">
+              <span>Are you sure?</span>
+              <p-button data-testid="confirm" @click="popoverPromise.finish(true)">
+                Yes
+              </p-button>
+              <p-button data-testid="cancel" @click="popoverPromise.finish(false)">
+                Cancel
+              </p-button>
+            </div>
+          </template>
+        </p-popover>
+      `,
+    setup () {
+      return {}
+    },
+  })
+
+  const popover   = screen.queryByTestId('popover')
+  const tooltip   = screen.queryByTestId('popover-tooltip')
+  const activator = screen.queryByTestId('activator')
+
+  expect(popover).toBeInTheDocument()
+  expect(tooltip).not.toBeVisible()
+
+  await fireEvent.click(activator)
+
+  expect(tooltip).toBeVisible()
+
+  await fireEvent.click(activator)
+
+  expect(tooltip).not.toBeVisible()
+})

src/components/popover/Popover.vue

@@ -0,0 +1,131 @@
+<template>
+  <div
+    ref="root"
+    data-testid="popover"
+    class="popover">
+    <slot
+      name="activator"
+      :is-show="isShow"
+      :toggle="toggle"
+      :show="show"
+      :hide="hide" />
+
+    <p-tooltip
+      ref="tooltip"
+      v-model="isShow"
+      class="popover__tooltip"
+      data-testid="popover-tooltip"
+      :color="color"
+      :placement="placement"
+      :target="root"
+      @show="$emit('show')"
+      @hide="$emit('hide')">
+      <slot
+        :is-show="isShow"
+        :toggle="toggle"
+        :show="show"
+        :hide="hide" />
+    </p-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType, VNode } from 'vue-demi'
+import type { Placement } from '@floating-ui/dom'
+import type { ColorVariant } from '../tooltip'
+import {
+  ref,
+  provide,
+  computed,
+} from 'vue-demi'
+import pTooltip from '../tooltip/Tooltip.vue'
+import { useVModel } from '../input'
+import { onClickOutside } from '@vueuse/core'
+import { POPOVER_CONTEXT } from '.'
+
+const props = defineProps({
+  modelValue: {
+    type   : Boolean,
+    default: false,
+  },
+  color: {
+    type   : String as PropType<ColorVariant>,
+    default: 'white',
+  },
+  placement: {
+    type   : String as PropType<Placement>,
+    default: 'top',
+  },
+  disabled: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+const root    = ref<HTMLDivElement>()
+const tooltip = ref<InstanceType<typeof pTooltip>>()
+const isShow  = useVModel(props)
+
+const tooltipEl = computed<HTMLElement>(() => tooltip.value.$el)
+
+onClickOutside(tooltipEl, () => {
+  if (isShow.value) {
+    // Add little delay too prevent race condition with v-model changing
+    setTimeout(() => {
+      hide()
+    })
+  }
+}, { ignore: [root] })
+
+function toggle () {
+  if (!props.disabled) {
+    if (isShow.value)
+      hide()
+    else
+      show()
+  }
+}
+
+function show () {
+  if (!props.disabled)
+    isShow.value = true
+}
+
+function hide () {
+  if (!props.disabled)
+    isShow.value = false
+}
+
+defineEmits<{
+  'show': [],
+  'hide': [],
+  'update:modelValue': [boolean],
+}>()
+
+defineSlots<{
+  'activator'(props: { isShow: boolean, show: () => void, hide: () => void, toggle: () => void }): VNode[],
+  'default'(props: { isShow: boolean, show: () => void, hide: () => void, toggle: () => void }): VNode[],
+}>()
+
+defineExpose({
+  isShow,
+  show,
+  hide,
+  toggle,
+})
+
+provide(POPOVER_CONTEXT, {
+  isShow,
+  show,
+  hide,
+  toggle,
+})
+</script>
+
+<style lang="postcss">
+.popover {
+  & > &__tooltip.tooltip {
+    @apply text-base;
+  }
+}
+</style>