@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/richtext/Richtext.vue

@@ -1,295 +0,0 @@
-<template>
-  <div
-    class="richtext"
-    :class="classNames">
-    <template v-if="editor">
-      <div
-        class="richtext__controls">
-        <ToolbarAdvance v-if="variant === 'advanced'" />
-        <ToolbarSimple v-else />
-      </div>
-      <FloatingMenu
-        :editor="editor"
-        :should-show="({ editor }) => editor.isActive('image')"
-        :tippy-options="{ placement: 'top' }">
-        <div class="richtext__floating-menu">
-          <ImageEdit />
-        </div>
-      </FloatingMenu>
-      <FloatingMenu
-        :editor="editor"
-        :should-show="({ editor }) => editor.isActive('link')"
-        :tippy-options="{ placement: 'top' }">
-        <div class="richtext__floating-menu">
-          <LinkDetail />
-        </div>
-      </FloatingMenu>
-    </template>
-    <editor-content
-      v-model="model"
-      class="richtext__input"
-      rows="3"
-      :editor="editor" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import {
-  computed,
-  provide,
-  watch,
-} from 'vue-demi'
-import type { EditorOptions } from '@tiptap/vue-3'
-import {
-  useEditor,
-  EditorContent,
-  FloatingMenu,
-} from '@tiptap/vue-3'
-
-import StarterKit from '@tiptap/starter-kit'
-import Highlight from '@tiptap/extension-highlight'
-import Underline from '@tiptap/extension-underline'
-import TextAlign from '@tiptap/extension-text-align'
-import TextStyle from '@tiptap/extension-text-style'
-import Placeholder from '@tiptap/extension-placeholder'
-import FontFamily from '@tiptap/extension-font-family'
-import Image from '@tiptap/extension-image'
-import ImageAlign from './tiptap/image-align'
-import FontSize from 'tiptap-extension-font-size'
-import Table from '@tiptap/extension-table'
-import TableCell from '@tiptap/extension-table-cell'
-import TableHeader from '@tiptap/extension-table-header'
-import TableRow from '@tiptap/extension-table-row'
-import Link from '@tiptap/extension-link'
-
-import ToolbarSimple from './RichtextToolbarSimple.vue'
-import ToolbarAdvance from './RichtextToolbarAdvance.vue'
-
-import ImageEdit from './popup/RichtextPopupImageEdit.vue'
-import LinkDetail from './popup/RichtextPopupLinkDetail.vue'
-
-import { useVModel } from '../input'
-import { defuFn } from 'defu'
-import type { ControlVariant } from '.'
-import { RICHTEXT_CONTEXT } from '.'
-
-type Options = Partial<Omit<EditorOptions, 'content' | 'onUpdate' | 'element'>>
-
-const props = defineProps({
-  modelValue: {
-    type   : String,
-    default: undefined,
-  },
-  variant: {
-    type   : String as PropType<ControlVariant>,
-    default: 'simple' as ControlVariant,
-  },
-  placeholder: {
-    type   : String,
-    default: '',
-  },
-  readonly: {
-    type   : Boolean,
-    default: false,
-  },
-  disabled: {
-    type   : Boolean,
-    default: false,
-  },
-  error: {
-    type   : Boolean,
-    default: false,
-  },
-  options: {
-    type   : Object as PropType<Options>,
-    default: () => ({}),
-  },
-})
-
-const model  = useVModel(props)
-const editor = useEditor(defuFn<Options, [Partial<EditorOptions>]>(props.options,
-  {
-    editable: !props.disabled && !props.readonly,
-    content : props.modelValue,
-    onUpdate: () => {
-      model.value = editor.value?.isEmpty
-        ? undefined
-        : editor.value?.getHTML()
-    },
-    extensions: [
-      StarterKit,
-      TextAlign.configure({ types: ['heading', 'paragraph'] }),
-      Highlight.configure({ multicolor: true }),
-      TextStyle,
-      Underline,
-      FontFamily,
-      FontSize,
-      Image.configure({ allowBase64: true }),
-      ImageAlign,
-      Placeholder.configure({ placeholder: props.placeholder }),
-      Link.configure({
-        defaultProtocol: 'https',
-        openOnClick    : false,
-      }),
-      Table.configure({ resizable: true }),
-      TableRow,
-      TableHeader,
-      TableCell,
-    ],
-  },
-))
-
-watch(() => [props.disabled, props.readonly], ([disabled, readonly]) => {
-  if (editor.value)
-    editor.value.setEditable(!disabled && !readonly)
-})
-
-const classNames = computed(() => {
-  const results: string[] = []
-
-  if (props.disabled)
-    results.push('richtext--disabled')
-
-  if (props.readonly)
-    results.push('richtext--readonly')
-
-  if (props.error)
-    results.push('richtext--error', 'state--error')
-
-  return results
-})
-
-watch(() => props.modelValue, (value) => {
-  if (value !== editor.value.getHTML())
-    editor.value.commands.setContent(value ?? '')
-})
-
-defineEmits<{
-  'update:modelValue': [string],
-}>()
-
-provide(RICHTEXT_CONTEXT, { editor })
-
-defineExpose({ editor })
-</script>
-
-<style lang="postcss">
-.richtext {
-  --p-richtext-min-height: 120px;
-
-  @apply flex flex-col w-full;
-
-  &__controls {
-    @apply rounded-t bg-default border border-b-0 border-default py-1 flex flex-wrap;
-    @apply dark:bg-dark-default dark:border-dark-default;
-  }
-
-  &__controls-group {
-    @apply px-1 flex flex-shrink-0 select-none items-start space-x-1;
-    @apply dark:border-dark-default;
-
-    &:not(:last-child) {
-      @apply border-r;
-    }
-  }
-
-  &__input {
-    @apply w-full;
-  }
-
-  &__floating-menu {
-    @apply z-tooltip px-1 py-1 rounded text-xs flex space-x-1 drop-shadow-sm;
-    @apply bg-default text-subtle;
-    @apply dark:bg-dark-default dark:text-dark-subtle;
-  }
-
-  .tiptap {
-    @apply p-3 rounded rounded-t-none border border-solid border-subtlest hover:border-subtle focus:border-subtle placeholder:text-muted w-full outline-none text-default bg-default resize-none min-h-[var(--p-richtext-min-height)] focus:ring-4 focus:ring-subtle/10 focus:z-1;
-    @apply dark:border-dark-subtlest hover:dark:border-dark-subtle focus:dark:border-dark-subtle placeholder:dark:text-dark-muted dark:text-dark-default dark:bg-dark-default focus:dark:ring-dark-subtle/10;
-
-    p.is-editor-empty:first-child::before {
-      @apply content-[attr(data-placeholder)] h-0 float-left;
-      @apply text-muted pointer-events-none;
-      @apply dark:text-dark-muted;
-    }
-
-    img.ProseMirror-selectednode,
-    figure.ProseMirror-selectednode > img {
-      @apply ring ring-subtle;
-      @apply dark:ring-dark-subtle;
-    }
-
-    table {
-      @apply table table-fixed border-collapse w-full;
-
-      .column-resize-handle {
-        @apply bg-brand-accent/20 w-1 absolute top-0 -bottom-0.5 -right-0.5 z-1;
-      }
-
-      td,
-      th {
-        @apply relative bg-default;
-        @apply dark:bg-dark-default;
-
-        &.selectedCell {
-          @apply bg-brand-accent/20;
-          @apply dark:bg-brand-accent/20;
-        }
-      }
-
-    }
-
-    .tableWrapper {
-      @apply overflow-x-auto;
-    }
-
-    &.resize-cursor {
-      @apply cursor-col-resize;
-    }
-
-    ul,
-    ol {
-      @apply pl-6 my-4;
-    }
-
-    ul {
-      @apply list-disc;
-    }
-
-    ol {
-      @apply list-decimal;
-    }
-  }
-
-  &--disabled {
-    .tiptap {
-      @apply bg-base border-subtle pointer-events-none text-muted;
-      @apply dark:bg-dark-base dark:border-dark-subtle dark:text-dark-muted;
-    }
-  }
-
-  .state--error,
-  &--error {
-    .tiptap {
-      @apply border-danger-emphasis hover:border-danger-emphasis focus:ring-danger focus:border-danger-emphasis;
-      @apply dark:border-dark-danger-emphasis hover:dark:border-dark-danger-emphasis focus:dark:ring-dark-danger focus:dark:border-dark-danger-emphasis;
-    }
-  }
-
-  &__counter {
-    @apply text-right text-muted text-xs absolute bottom-1 right-1 pointer-events-none z-1;
-    @apply dark:text-dark-muted;
-  }
-
-  .btn.btn--variant-ghost[active="true"] {
-    @apply bg-emphasis-alpha border-subtle-alpha text-brand-accent;
-    @apply dark:bg-dark-emphasis-alpha dark:border-r-dark-subtle-alpha dark:text-dark-brand-accent;
-  }
-
-  .dropdown__item.dropdown__item--active {
-    @apply bg-emphasis-alpha border-subtle-alpha;
-    @apply dark:bg-dark-emphasis-alpha dark:border-r-dark-subtle-alpha;
-  }
-}
-</style>

package/dist/components/richtext/RichtextToolbarAdvance.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="richtext__controls-group">
-    <History />
-    <TextHeading />
-    <FontSize />
-    <FontFamily />
-  </div>
-  <div class="richtext__controls-group">
-    <TextFormat />
-  </div>
-  <div class="richtext__controls-group">
-    <TextAlign />
-    <List />
-  </div>
-  <div class="richtext__controls-group">
-    <Highlight />
-  </div>
-  <div class="richtext__controls-group">
-    <Link />
-    <Image />
-    <Table />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import History from './control/RichtextControlHistory.vue'
-import TextAlign from './control/RichtextControlTextAlign.vue'
-import TextHeading from './control/RichtextControlTextHeading.vue'
-import TextFormat from './control/RichtextControlTextFormat.vue'
-import FontFamily from './control/RichtextControlFontFamily.vue'
-import FontSize from './control/RichtextControlFontSize.vue'
-import Highlight from './control/RichtextControlHighlight.vue'
-import Image from './control/RichtextControlImage.vue'
-import Table from './control/RichtextControlTable.vue'
-import Link from './control/RichtextControlLink.vue'
-import List from './control/RichtextControlList.vue'
-</script>

package/dist/components/richtext/RichtextToolbarSimple.vue

@@ -1,158 +0,0 @@
-<template>
-  <template
-    v-for="(group, _i) of controls"
-    :key="_i">
-    <div
-      class="richtext__controls-group">
-      <template
-        v-for="control of group"
-        :key="control.name">
-        <p-button
-          variant="ghost"
-          size="sm"
-          :active="control.isActive?.(editor)"
-          icon
-          :disabled="control.isEnabled?.(editor) === false"
-          @click="control.action(editor)">
-          <component :is="control.icon" />
-        </p-button>
-      </template>
-    </div>
-  </template>
-</template>
-
-<script lang="ts" setup>
-import pButton from '../button/Button.vue'
-import IconBold from '@privyid/persona-icon/vue/bold/20.vue'
-import IconItalic from '@privyid/persona-icon/vue/italic/20.vue'
-import IconUnderline from '@privyid/persona-icon/vue/underlined/20.vue'
-import IconStrikethrough from '@privyid/persona-icon/vue/strikethrough/20.vue'
-import IconAlignLeft from '@privyid/persona-icon/vue/align-left/20.vue'
-import IconAlignCenter from '@privyid/persona-icon/vue/align-center/20.vue'
-import IconAlignRight from '@privyid/persona-icon/vue/align-right/20.vue'
-import IconAlignJustify from '@privyid/persona-icon/vue/align-justify/20.vue'
-import IconBulletList from '@privyid/persona-icon/vue/list-bullets/20.vue'
-import IconOrderedList from '@privyid/persona-icon/vue/list-numbers/20.vue'
-import { useRichtextEditor } from '.'
-import type { Component } from 'vue-demi'
-import type { Editor } from '@tiptap/vue-3'
-
-const editor = useRichtextEditor()
-
-interface ControlItem {
-  name: string,
-  icon: Component,
-  action: (editor?: Editor) => void,
-  isActive?: (editor?: Editor) => boolean,
-  isEnabled?: (editor?: Editor) => boolean,
-}
-
-const controls: Array<ControlItem[]> = [
-  [
-    {
-      name: 'bold',
-      icon: IconBold,
-      action (editor) {
-        editor?.chain().focus().toggleBold().run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive('bold')
-      },
-    },
-    {
-      name: 'italic',
-      icon: IconItalic,
-      action (editor) {
-        editor?.chain().focus().toggleItalic().run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive('italic')
-      },
-    },
-    {
-      name: 'underline',
-      icon: IconUnderline,
-      action (editor) {
-        editor?.chain().focus().toggleUnderline().run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive('underline')
-      },
-    },
-    {
-      name: 'strikethrough',
-      icon: IconStrikethrough,
-      action (editor) {
-        editor?.chain().focus().toggleStrike().run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive('strike')
-      },
-    },
-  ],
-  [
-    {
-      name: 'align-left',
-      icon: IconAlignLeft,
-      action (editor) {
-        editor?.chain().focus().setTextAlign('left').run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive({ textAlign: 'left' })
-      },
-    },
-    {
-      name: 'align-center',
-      icon: IconAlignCenter,
-      action (editor) {
-        editor?.chain().focus().setTextAlign('center').run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive({ textAlign: 'center' })
-      },
-    },
-    {
-      name: 'align-right',
-      icon: IconAlignRight,
-      action (editor) {
-        editor?.chain().focus().setTextAlign('right').run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive({ textAlign: 'right' })
-      },
-    },
-    {
-      name: 'align-justify',
-      icon: IconAlignJustify,
-      action (editor) {
-        editor?.chain().focus().setTextAlign('justify').run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive({ textAlign: 'justify' })
-      },
-    },
-  ],
-  [
-    {
-      name: 'bullet-list',
-      icon: IconBulletList,
-      action (editor) {
-        editor?.chain().focus().toggleBulletList().run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive('bulletList')
-      },
-    },
-    {
-      name: 'ordered-list',
-      icon: IconOrderedList,
-      action (editor) {
-        editor?.chain().focus().toggleOrderedList().run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive('orderedList')
-      },
-    },
-  ],
-]
-</script>

package/dist/components/richtext/control/RichtextControlFontFamily.vue

@@ -1,56 +0,0 @@
-<template>
-  <p-dropdown
-    icon
-    no-caret
-    variant="ghost"
-    size="sm"
-    title="Font family">
-    <template #button-content>
-      <IconFont />
-      <IconCaret />
-    </template>
-
-    <p-dropdown-item @click="unsetFont()">
-      Default
-    </p-dropdown-item>
-    <template
-      v-for="font in fonts"
-      :key="font">
-      <p-dropdown-item @click="setFont(font)">
-        <span :style="{ fontFamily: font }">
-          {{ font }}
-        </span>
-      </p-dropdown-item>
-    </template>
-  </p-dropdown>
-</template>
-
-<script lang="ts" setup>
-import pDropdown from '../../dropdown/Dropdown.vue'
-import pDropdownItem from '../../dropdown/DropdownItem.vue'
-import IconCaret from '@privyid/persona-icon/vue/caret-down/16.vue'
-import IconFont from '@privyid/persona-icon/vue/font-family/20.vue'
-import { useRichtextEditor } from '..'
-
-const fonts = [
-  'Arial',
-  'Verdana',
-  'Tahoma',
-  'Trebuchet MS',
-  'Times New Roman',
-  'Georgia',
-  'Garamond',
-  'Courier New',
-  'Brush Script MT',
-] as const
-
-const editor = useRichtextEditor()
-
-function setFont (family: string) {
-  editor.value.chain().focus().setFontFamily(family).run()
-}
-
-function unsetFont () {
-  editor.value.chain().focus().unsetFontFamily().run()
-}
-</script>

package/dist/components/richtext/control/RichtextControlFontSize.vue

@@ -1,81 +0,0 @@
-<template>
-  <p-dropdown
-    icon
-    no-caret
-    variant="ghost"
-    size="sm"
-    title="Font size">
-    <template #button-content>
-      <IconSize />
-      <IconCaret />
-    </template>
-
-    <template
-      v-for="size in sizes"
-      :key="size.name">
-      <p-dropdown-item
-        :active="editor.isActive({ fontSize: size.value })"
-        @click="setSize(size.value as string)">
-        <span :class="size.className">
-          {{ size.text }}
-        </span>
-      </p-dropdown-item>
-    </template>
-  </p-dropdown>
-</template>
-
-<script lang="ts" setup>
-import pDropdown from '../../dropdown/Dropdown.vue'
-import pDropdownItem from '../../dropdown/DropdownItem.vue'
-import IconCaret from '@privyid/persona-icon/vue/caret-down/16.vue'
-import IconSize from '@privyid/persona-icon/vue/font-size/20.vue'
-import { useRichtextEditor } from '..'
-import type { SelectItem } from '../../select'
-
-const sizes: SelectItem[] = [
-  {
-    text     : 'Default',
-    value    : '',
-    className: 'text-base',
-  },
-  {
-    text     : 'Tiny',
-    value    : '11px',
-    className: 'text-tn',
-  },
-  {
-    text     : 'Extra small',
-    value    : '12px',
-    className: 'text-xs',
-  },
-  {
-    text     : 'Small',
-    value    : '14px',
-    className: 'text-sm',
-  },
-  {
-    text     : 'Normal',
-    value    : '16px',
-    className: 'text-base',
-  },
-  {
-    text     : 'Large',
-    value    : '18px',
-    className: 'text-lg',
-  },
-  {
-    text     : 'Extra large',
-    value    : '20px',
-    className: 'text-xl',
-  },
-]
-
-const editor = useRichtextEditor()
-
-function setSize (fontSize: string) {
-  editor.value.chain()
-    .focus()
-    .setFontSize(fontSize)
-    .run()
-}
-</script>