@privyid/persona 1.1.2 → 1.2.0

package/dist/components/richtext/Richtext.vue

@@ -33,93 +33,81 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
+<script setup>
 import {
   computed,
   provide,
-  watch,
-} from 'vue-demi'
-import type { EditorOptions } from '@tiptap/vue-3'
+  watch
+} from "vue-demi";
 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'>>
-
+  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 { RICHTEXT_CONTEXT } from ".";
 const props = defineProps({
   modelValue: {
-    type   : String,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   variant: {
-    type   : String as PropType<ControlVariant>,
-    default: 'simple' as ControlVariant,
+    type: String,
+    default: "simple"
   },
   placeholder: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   readonly: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   disabled: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   error: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   options: {
-    type   : Object as PropType<Options>,
-    default: () => ({}),
-  },
-})
-
-const model  = useVModel(props)
-const editor = useEditor(defuFn<Options, [Partial<EditorOptions>]>(props.options,
+    type: Object,
+    default: () => ({})
+  }
+});
+const model = useVModel(props);
+const editor = useEditor(defuFn(
+  props.options,
   {
     editable: !props.disabled && !props.readonly,
-    content : props.modelValue,
+    content: props.modelValue,
     onUpdate: () => {
-      model.value = editor.value?.isEmpty
-        ? undefined
-        : editor.value?.getHTML()
+      model.value = editor.value?.isEmpty ? void 0 : editor.value?.getHTML();
     },
     extensions: [
       StarterKit,
-      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
       Highlight.configure({ multicolor: true }),
       TextStyle,
       Underline,
@@ -129,49 +117,37 @@ const editor = useEditor(defuFn<Options, [Partial<EditorOptions>]>(props.options
       ImageAlign,
       Placeholder.configure({ placeholder: props.placeholder }),
       Link.configure({
-        defaultProtocol: 'https',
-        openOnClick    : false,
+        defaultProtocol: "https",
+        openOnClick: false
       }),
       Table.configure({ resizable: true }),
       TableRow,
       TableHeader,
-      TableCell,
-    ],
-  },
-))
-
+      TableCell
+    ]
+  }
+));
 watch(() => [props.disabled, props.readonly], ([disabled, readonly]) => {
   if (editor.value)
-    editor.value.setEditable(!disabled && !readonly)
-})
-
+    editor.value.setEditable(!disabled && !readonly);
+});
 const classNames = computed(() => {
-  const results: string[] = []
-
+  const results = [];
   if (props.disabled)
-    results.push('richtext--disabled')
-
+    results.push("richtext--disabled");
   if (props.readonly)
-    results.push('richtext--readonly')
-
+    results.push("richtext--readonly");
   if (props.error)
-    results.push('richtext--error', 'state--error')
-
-  return results
-})
-
+    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 })
+    editor.value.commands.setContent(value ?? "");
+});
+defineEmits(["update:modelValue"]);
+provide(RICHTEXT_CONTEXT, { editor });
+defineExpose({ editor });
 </script>
 
 <style lang="postcss">

package/dist/components/richtext/Richtext.vue.d.ts

@@ -0,0 +1,78 @@
+import type { PropType } from 'vue-demi';
+import type { EditorOptions } from '@tiptap/vue-3';
+import type { ControlVariant } from '.';
+type Options = Partial<Omit<EditorOptions, 'content' | 'onUpdate' | 'element'>>;
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    variant: {
+        type: PropType<ControlVariant>;
+        default: ControlVariant;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: PropType<Options>;
+        default: () => {};
+    };
+}>, {
+    editor: import("vue-demi").ShallowRef<import("@tiptap/vue-3").Editor | undefined, import("@tiptap/vue-3").Editor | undefined>;
+}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: string) => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    variant: {
+        type: PropType<ControlVariant>;
+        default: ControlVariant;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: PropType<Options>;
+        default: () => {};
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+}>, {
+    modelValue: string;
+    disabled: boolean;
+    error: boolean;
+    variant: ControlVariant;
+    options: Partial<Omit<EditorOptions, "element" | "content" | "onUpdate">>;
+    readonly: boolean;
+    placeholder: string;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/richtext/RichtextToolbarAdvance.vue

@@ -22,16 +22,16 @@
   </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 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/RichtextToolbarAdvance.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/richtext/RichtextToolbarSimple.vue

@@ -21,138 +21,126 @@
   </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[]> = [
+<script 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 ".";
+const editor = useRichtextEditor();
+const controls = [
   [
     {
-      name: 'bold',
+      name: "bold",
       icon: IconBold,
-      action (editor) {
-        editor?.chain().focus().toggleBold().run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive('bold')
+      action(editor2) {
+        editor2?.chain().focus().toggleBold().run();
       },
+      isActive(editor2) {
+        return !!editor2?.isActive("bold");
+      }
     },
     {
-      name: 'italic',
+      name: "italic",
       icon: IconItalic,
-      action (editor) {
-        editor?.chain().focus().toggleItalic().run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive('italic')
+      action(editor2) {
+        editor2?.chain().focus().toggleItalic().run();
       },
+      isActive(editor2) {
+        return !!editor2?.isActive("italic");
+      }
     },
     {
-      name: 'underline',
+      name: "underline",
       icon: IconUnderline,
-      action (editor) {
-        editor?.chain().focus().toggleUnderline().run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive('underline')
+      action(editor2) {
+        editor2?.chain().focus().toggleUnderline().run();
       },
+      isActive(editor2) {
+        return !!editor2?.isActive("underline");
+      }
     },
     {
-      name: 'strikethrough',
+      name: "strikethrough",
       icon: IconStrikethrough,
-      action (editor) {
-        editor?.chain().focus().toggleStrike().run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive('strike')
+      action(editor2) {
+        editor2?.chain().focus().toggleStrike().run();
       },
-    },
+      isActive(editor2) {
+        return !!editor2?.isActive("strike");
+      }
+    }
   ],
   [
     {
-      name: 'align-left',
+      name: "align-left",
       icon: IconAlignLeft,
-      action (editor) {
-        editor?.chain().focus().setTextAlign('left').run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive({ textAlign: 'left' })
+      action(editor2) {
+        editor2?.chain().focus().setTextAlign("left").run();
       },
+      isActive(editor2) {
+        return !!editor2?.isActive({ textAlign: "left" });
+      }
     },
     {
-      name: 'align-center',
+      name: "align-center",
       icon: IconAlignCenter,
-      action (editor) {
-        editor?.chain().focus().setTextAlign('center').run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive({ textAlign: 'center' })
+      action(editor2) {
+        editor2?.chain().focus().setTextAlign("center").run();
       },
+      isActive(editor2) {
+        return !!editor2?.isActive({ textAlign: "center" });
+      }
     },
     {
-      name: 'align-right',
+      name: "align-right",
       icon: IconAlignRight,
-      action (editor) {
-        editor?.chain().focus().setTextAlign('right').run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive({ textAlign: 'right' })
+      action(editor2) {
+        editor2?.chain().focus().setTextAlign("right").run();
       },
+      isActive(editor2) {
+        return !!editor2?.isActive({ textAlign: "right" });
+      }
     },
     {
-      name: 'align-justify',
+      name: "align-justify",
       icon: IconAlignJustify,
-      action (editor) {
-        editor?.chain().focus().setTextAlign('justify').run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive({ textAlign: 'justify' })
+      action(editor2) {
+        editor2?.chain().focus().setTextAlign("justify").run();
       },
-    },
+      isActive(editor2) {
+        return !!editor2?.isActive({ textAlign: "justify" });
+      }
+    }
   ],
   [
     {
-      name: 'bullet-list',
+      name: "bullet-list",
       icon: IconBulletList,
-      action (editor) {
-        editor?.chain().focus().toggleBulletList().run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive('bulletList')
+      action(editor2) {
+        editor2?.chain().focus().toggleBulletList().run();
       },
+      isActive(editor2) {
+        return !!editor2?.isActive("bulletList");
+      }
     },
     {
-      name: 'ordered-list',
+      name: "ordered-list",
       icon: IconOrderedList,
-      action (editor) {
-        editor?.chain().focus().toggleOrderedList().run()
-      },
-      isActive (editor) {
-        return !!editor?.isActive('orderedList')
-      },
-    },
-  ],
-]
+      action(editor2) {
+        editor2?.chain().focus().toggleOrderedList().run();
+      },
+      isActive(editor2) {
+        return !!editor2?.isActive("orderedList");
+      }
+    }
+  ]
+];
 </script>

package/dist/components/richtext/RichtextToolbarSimple.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue-demi").DefineComponent<{}, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -25,32 +25,28 @@
   </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 '..'
-
+<script 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()
+  "Arial",
+  "Verdana",
+  "Tahoma",
+  "Trebuchet MS",
+  "Times New Roman",
+  "Georgia",
+  "Garamond",
+  "Courier New",
+  "Brush Script MT"
+];
+const editor = useRichtextEditor();
+function setFont(family) {
+  editor.value.chain().focus().setFontFamily(family).run();
 }
-
-function unsetFont () {
-  editor.value.chain().focus().unsetFontFamily().run()
+function unsetFont() {
+  editor.value.chain().focus().unsetFontFamily().run();
 }
 </script>

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;