@personizely/ui 0.0.42

package/src/components/ui/dialog/Dialog.vue

@@ -0,0 +1,78 @@
+<template>
+  <DialogRoot v-bind="forwarded">
+    <DialogTrigger v-if="$slots.trigger" as-child>
+      <slot name="trigger" />
+    </DialogTrigger>
+
+    <DialogContent :class="props.class" @hide="$emit('hide')">
+      <DialogHeader>
+        <DialogTitle v-if="title || $slots.title">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </DialogTitle>
+        <DialogDescription v-if="description || $slots.description">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </DialogDescription>
+      </DialogHeader>
+
+      <div v-if="$slots.default" class="text-sm overflow-auto p-2">
+        <slot />
+      </div>
+
+      <DialogFooter v-if="$slots.footer">
+        <slot name="footer" />
+      </DialogFooter>
+
+      <DialogClose
+        v-if="!removeCloseButton"
+        as-child
+        class="absolute right-4 top-4"
+      >
+        <Button
+          size="sm"
+          icon="x"
+          variant="ghost"
+        />
+      </DialogClose>
+    </DialogContent>
+  </DialogRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  DialogClose,
+  DialogRoot,
+  type DialogRootEmits,
+  type DialogRootProps
+} from 'reka-ui'
+import { Button } from '@/components/ui/button'
+import DialogTrigger from './DialogTrigger.vue'
+import DialogHeader from './DialogHeader.vue'
+import DialogTitle from './DialogTitle.vue'
+import DialogDescription from './DialogDescription.vue'
+import DialogContent from './DialogContent.vue'
+import DialogFooter from './DialogFooter.vue'
+import type { HTMLAttributes } from 'vue'
+import { useDelegatedProps } from '@/composables/delegated-props'
+import { useEmitAsProps } from '@/composables/emits-as-props'
+import { useForwardPropsEmits } from '@/composables/forward-props-emits'
+
+const props = withDefaults(defineProps<DialogRootProps & {
+  class?: HTMLAttributes['class'],
+  title?: string,
+  description?: string,
+  removeCloseButton?: boolean
+}>(), {
+  removeCloseButton: false
+})
+const emits = defineEmits<DialogRootEmits & {
+  hide: []
+}>()
+
+const delegatedProps = useDelegatedProps(props, ['class', 'title', 'description', 'removeCloseButton'])
+const delegatedEmits = useEmitAsProps(emits, ['hide'])
+const forwarded = useForwardPropsEmits(delegatedProps, delegatedEmits)
+</script>

package/src/components/ui/dialog/DialogContent.vue

@@ -0,0 +1,46 @@
+<template>
+  <DialogPortal :to="options.portalTo">
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      @after-leave="$emit('hide')"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-[50%] top-[50%] z-50 flex w-full max-h-[90dvh] max-w-xl flex-col gap-4 transform-[translate(-50%,-50%)] border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2 data-[state=closed]:slide-out-to-top-1/2 data-[state=open]:slide-in-from-top-1/2 sm:rounded-lg',
+          props.class,
+        )"
+    >
+      <slot />
+    </DialogContent>
+  </DialogPortal>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits
+} from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import { getOptions } from '@/options-provider'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits & {
+  hide: []
+}>()
+const options = getOptions()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/components/ui/dialog/DialogDescription.vue

@@ -0,0 +1,24 @@
+<template>
+  <DialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/dialog/DialogFooter.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse p-2 sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>

package/src/components/ui/dialog/DialogHeader.vue

@@ -0,0 +1,16 @@
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-1.5 p-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/src/components/ui/dialog/DialogTitle.vue

@@ -0,0 +1,29 @@
+<template>
+  <DialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'text-lg font-medium leading-none tracking-tight',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/dialog/DialogTrigger.vue

@@ -0,0 +1,11 @@
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
+
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>

package/src/components/ui/dialog/index.ts

@@ -0,0 +1 @@
+export { default as Dialog } from './Dialog.vue'

package/src/components/ui/drawer/Drawer.vue

@@ -0,0 +1,88 @@
+<template>
+  <DialogRoot v-bind="forwarded">
+    <DrawerTrigger v-if="$slots.trigger" as-child>
+      <slot name="trigger" />
+    </DrawerTrigger>
+
+    <DrawerContent
+      :side="side"
+      :class="props.class"
+      :disable-overlay="disableOverlay"
+      :disable-outside-pointer-events="disableOutsidePointerEvents"
+      @hide="$emit('hide')"
+    >
+      <DrawerHeader v-if="$slots.header || $slots.title || title">
+        <slot name="header">
+          <DrawerTitle
+            v-if="$slots.title || title"
+          >
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DrawerTitle>
+
+          <DrawerDescription
+            v-if="$slots.description || description"
+          >
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DrawerDescription>
+        </slot>
+      </DrawerHeader>
+
+      <div class="text-sm max-h-[90dvh] overflow-auto px-6 py-1">
+        <slot />
+      </div>
+
+      <DrawerFooter v-if="$slots.footer">
+        <slot name="footer" />
+      </DrawerFooter>
+
+      <DialogClose as-child class="absolute right-4 top-4">
+        <Button icon="x" variant="ghost" size="sm" />
+      </DialogClose>
+    </DrawerContent>
+  </DialogRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  DialogClose,
+  DialogRoot,
+  type DialogRootEmits,
+  type DialogRootProps
+} from 'reka-ui'
+import { Button } from '@/components/ui/button'
+import type { HTMLAttributes } from 'vue'
+import DrawerTrigger from './DrawerTrigger.vue'
+import DrawerContent from './DrawerContent.vue'
+import DrawerHeader from './DrawerHeader.vue'
+import DrawerFooter from './DrawerFooter.vue'
+import DrawerTitle from './DrawerTitle.vue'
+import DrawerDescription from './DrawerDescription.vue'
+import { type DrawerVariants } from './'
+import { useDelegatedProps } from '@/composables/delegated-props'
+import { useEmitAsProps } from '@/composables/emits-as-props'
+import { useForwardPropsEmits } from '@/composables/forward-props-emits'
+
+const props = withDefaults(defineProps<DialogRootProps & {
+  class?: HTMLAttributes['class']
+  title?: string
+  side?: DrawerVariants['side']
+  description?: string
+  disableOverlay?: boolean
+  disableOutsidePointerEvents?: boolean
+}>(), {
+  side: 'right',
+  disableOverlay: false,
+  disableOutsidePointerEvents: true
+})
+const emits = defineEmits<DialogRootEmits & {
+  hide: []
+}>()
+
+const delegatedProps = useDelegatedProps(props, ['class', 'title', 'side', 'description', 'disableOverlay', 'disableOutsidePointerEvents'])
+const delegatedEmits = useEmitAsProps(emits, ['hide'])
+const forwarded = useForwardPropsEmits(delegatedProps, delegatedEmits)
+</script>

package/src/components/ui/drawer/DrawerContent.vue

@@ -0,0 +1,57 @@
+<template>
+  <DialogPortal :to="options.portalTo">
+    <DialogOverlay
+      v-if="!disableOverlay"
+      class="fixed inset-0 z-50 bg-black/80 ata-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      @after-leave="$emit('hide')"
+    />
+    <DialogContent
+      :class="cn(drawerVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+    </DialogContent>
+  </DialogPortal>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits
+} from 'reka-ui'
+import { type DrawerVariants, drawerVariants } from '.'
+import { cn } from '@/utils/tailwind'
+import { getOptions } from '@/options-provider'
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class']
+  side?: DrawerVariants['side']
+  disableOverlay?: boolean
+}
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  disableOverlay: false
+})
+
+const emits = defineEmits<DialogContentEmits & {
+  hide: []
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, side: _side, disableOverlay: _disableOverlay, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const options = getOptions()
+</script>

package/src/components/ui/drawer/DrawerDescription.vue

@@ -0,0 +1,22 @@
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { DialogDescription, type DialogDescriptionProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

package/src/components/ui/drawer/DrawerFooter.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2 px-6',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>

package/src/components/ui/drawer/DrawerHeader.vue

@@ -0,0 +1,16 @@
+<template>
+  <div
+    :class="
+      cn('flex flex-col gap-y-2 text-center px-6 sm:text-left', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>

package/src/components/ui/drawer/DrawerTitle.vue

@@ -0,0 +1,22 @@
+<template>
+  <DialogTitle
+    :class="cn('text-lg font-medium text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { DialogTitle, type DialogTitleProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

package/src/components/ui/drawer/DrawerTrigger.vue

@@ -0,0 +1,11 @@
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
+
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>

package/src/components/ui/drawer/index.ts

@@ -0,0 +1,21 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Drawer } from './Drawer.vue'
+
+export const drawerVariants = cva('fixed z-50 flex flex-col gap-4 bg-background py-6 px-0 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
+  variants: {
+    side: {
+      top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+      bottom:
+            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+      left: 'inset-y-0 left-0 h-full w-1/3 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left max-w-full',
+      right:
+            'inset-y-0 right-0 h-full w-1/3 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right max-w-full'
+    }
+  },
+  defaultVariants: {
+    side: 'right'
+  }
+})
+
+export type DrawerVariants = VariantProps<typeof drawerVariants>

package/src/components/ui/dropdown-menu/DropdownCheckboxGroupMenu.vue

@@ -0,0 +1,87 @@
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <DropdownMenuTrigger as-child>
+      <slot name="trigger" />
+    </DropdownMenuTrigger>
+
+    <DropdownMenuContent
+      :class="cn('min-w-32', props.class)"
+      :side-offset="4"
+      :align-offset="4"
+      :align="align"
+      :side="side"
+    >
+      <template v-if="label || $slots.label">
+        <DropdownMenuLabel>
+          <slot name="label">
+            {{ label }}
+          </slot>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+      </template>
+      <DropdownMenuCheckboxItem
+        v-for="(item, index) in items"
+        :key="index"
+        :value="item.value"
+        :model-value="modelValue.includes(item.value)"
+        @update:model-value="updateValue(item, $event)"
+        @select="$emit('select', item)"
+      >
+        <span>{{ item.label }}</span>
+        <DropdownMenuHelp v-if="item.help">
+          {{ item.help }}
+        </DropdownMenuHelp>
+      </DropdownMenuCheckboxItem>
+    </DropdownMenuContent>
+  </DropdownMenuRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  DropdownMenuRoot,
+  type DropdownMenuRootEmits,
+  type DropdownMenuRootProps,
+  type DropdownMenuContentProps
+} from 'reka-ui'
+import DropdownMenuTrigger from './DropdownMenuTrigger.vue'
+import DropdownMenuContent from './DropdownMenuContent.vue'
+import DropdownMenuSeparator from './DropdownMenuSeparator.vue'
+import DropdownMenuHelp from './DropdownMenuHelp.vue'
+import DropdownMenuLabel from './DropdownMenuLabel.vue'
+import DropdownMenuCheckboxItem from './DropdownMenuCheckboxItem.vue'
+import type { MenuCheckboxItem } from './'
+import { type HTMLAttributes, provide } from 'vue'
+import { cn } from '@/utils/tailwind'
+import { useDelegatedProps } from '@/composables/delegated-props'
+import { useEmitAsProps } from '@/composables/emits-as-props'
+import { useForwardPropsEmits } from '@/composables/forward-props-emits'
+
+const modelValue = defineModel<any[]>({
+  required: true
+})
+
+const props = defineProps<DropdownMenuRootProps & Pick<DropdownMenuContentProps, 'side' | 'align'> & {
+  items: MenuCheckboxItem[]
+  label?: string,
+  class?: HTMLAttributes['class']
+}>()
+const emits = defineEmits<DropdownMenuRootEmits & {
+  select: [item: MenuCheckboxItem]
+}>()
+
+const delegatedProps = useDelegatedProps(props, ['align', 'side', 'label', 'items', 'class', 'modelValue'])
+const delegatedEmits = useEmitAsProps(emits, ['select', 'update:modelValue'])
+const forwarded = useForwardPropsEmits(delegatedProps, delegatedEmits)
+
+provide('hasDropdown', true)
+
+const updateValue = (item: MenuCheckboxItem, checked: boolean) => {
+  const value = [...modelValue.value]
+  if (checked) {
+    value.push(item.value)
+  } else {
+    value.splice(value.indexOf(item.value), 1)
+  }
+  modelValue.value = value
+}
+</script>

package/src/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,72 @@
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <DropdownMenuTrigger as-child>
+      <slot name="trigger" />
+    </DropdownMenuTrigger>
+
+    <DropdownMenuContent
+      :class="props.class"
+      :side-offset="4"
+      :align="align"
+      :side="side"
+    >
+      <template v-if="label || $slots.label">
+        <DropdownMenuLabel>
+          <slot name="label">
+            {{ label }}
+          </slot>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+      </template>
+
+      <template v-for="(item, index) in items" :key="index">
+        <DropdownMenuPart :item="item" @select="$emit('select', $event)">
+          <template v-if="$slots['item-icon']" #item-icon="{ item }">
+            <slot name="item-icon" v-bind="{ item }" />
+          </template>
+          <template v-if="$slots['item-label']" #item-label="{ item }">
+            <slot name="item-label" v-bind="{ item }" />
+          </template>
+          <template v-if="$slots['item-help']" #item-help="{ item }">
+            <slot name="item-help" v-bind="{ item }" />
+          </template>
+        </DropdownMenuPart>
+        <DropdownMenuSeparator v-if="index !== items.length - 1 && ('items' in item || 'items' in items[index + 1])" />
+      </template>
+    </DropdownMenuContent>
+  </DropdownMenuRoot>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, provide } from 'vue'
+import {
+  DropdownMenuRoot,
+  type DropdownMenuRootEmits,
+  type DropdownMenuRootProps,
+  type DropdownMenuContentProps
+} from 'reka-ui'
+import DropdownMenuTrigger from './DropdownMenuTrigger.vue'
+import DropdownMenuContent from './DropdownMenuContent.vue'
+import DropdownMenuSeparator from './DropdownMenuSeparator.vue'
+import DropdownMenuLabel from './DropdownMenuLabel.vue'
+import DropdownMenuPart from './DropdownMenuPart.vue'
+import type { MenuItem, MenuItemWithChildren, MenuGroupItem } from './'
+import { useDelegatedProps } from '@/composables/delegated-props'
+import { useEmitAsProps } from '@/composables/emits-as-props'
+import { useForwardPropsEmits } from '@/composables/forward-props-emits'
+
+const props = defineProps<DropdownMenuRootProps & Pick<DropdownMenuContentProps, 'side' | 'align'> & {
+  items: (MenuItem | MenuItemWithChildren | MenuGroupItem)[]
+  label?: string,
+  class?: HTMLAttributes['class']
+}>()
+const emits = defineEmits<DropdownMenuRootEmits & {
+  select: [item: MenuItem]
+}>()
+
+provide('hasDropdown', true)
+
+const delegatedProps = useDelegatedProps(props, ['align', 'side', 'label', 'items', 'class'])
+const delegatedEmits = useEmitAsProps(emits, ['select'])
+const forwarded = useForwardPropsEmits(delegatedProps, delegatedEmits)
+</script>