@privyid/persona 1.2.1 → 1.2.2-dev.1

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

@@ -0,0 +1,78 @@
+import type { PropType } from 'vue';
+import type { EditorOptions } from '@tiptap/vue-3';
+import type { ControlVariant } from '.';
+type Options = Partial<Omit<EditorOptions, 'content' | 'onUpdate' | 'element'>>;
+declare const _default: import("vue").DefineComponent<import("vue").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").ShallowRef<import("@tiptap/vue-3").Editor | undefined, import("@tiptap/vue-3").Editor | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: string) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").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").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/richtext/RichtextToolbarAdvance.vue

@@ -0,0 +1,37 @@
+<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 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

@@ -0,0 +1,146 @@
+<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 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",
+      icon: IconBold,
+      action(editor2) {
+        editor2?.chain().focus().toggleBold().run();
+      },
+      isActive(editor2) {
+        return !!editor2?.isActive("bold");
+      }
+    },
+    {
+      name: "italic",
+      icon: IconItalic,
+      action(editor2) {
+        editor2?.chain().focus().toggleItalic().run();
+      },
+      isActive(editor2) {
+        return !!editor2?.isActive("italic");
+      }
+    },
+    {
+      name: "underline",
+      icon: IconUnderline,
+      action(editor2) {
+        editor2?.chain().focus().toggleUnderline().run();
+      },
+      isActive(editor2) {
+        return !!editor2?.isActive("underline");
+      }
+    },
+    {
+      name: "strikethrough",
+      icon: IconStrikethrough,
+      action(editor2) {
+        editor2?.chain().focus().toggleStrike().run();
+      },
+      isActive(editor2) {
+        return !!editor2?.isActive("strike");
+      }
+    }
+  ],
+  [
+    {
+      name: "align-left",
+      icon: IconAlignLeft,
+      action(editor2) {
+        editor2?.chain().focus().setTextAlign("left").run();
+      },
+      isActive(editor2) {
+        return !!editor2?.isActive({ textAlign: "left" });
+      }
+    },
+    {
+      name: "align-center",
+      icon: IconAlignCenter,
+      action(editor2) {
+        editor2?.chain().focus().setTextAlign("center").run();
+      },
+      isActive(editor2) {
+        return !!editor2?.isActive({ textAlign: "center" });
+      }
+    },
+    {
+      name: "align-right",
+      icon: IconAlignRight,
+      action(editor2) {
+        editor2?.chain().focus().setTextAlign("right").run();
+      },
+      isActive(editor2) {
+        return !!editor2?.isActive({ textAlign: "right" });
+      }
+    },
+    {
+      name: "align-justify",
+      icon: IconAlignJustify,
+      action(editor2) {
+        editor2?.chain().focus().setTextAlign("justify").run();
+      },
+      isActive(editor2) {
+        return !!editor2?.isActive({ textAlign: "justify" });
+      }
+    }
+  ],
+  [
+    {
+      name: "bullet-list",
+      icon: IconBulletList,
+      action(editor2) {
+        editor2?.chain().focus().toggleBulletList().run();
+      },
+      isActive(editor2) {
+        return !!editor2?.isActive("bulletList");
+      }
+    },
+    {
+      name: "ordered-list",
+      icon: IconOrderedList,
+      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").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/control/RichtextControlFontFamily.vue

@@ -0,0 +1,52 @@
+<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 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"
+];
+const editor = useRichtextEditor();
+function setFont(family) {
+  editor.value.chain().focus().setFontFamily(family).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;

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

@@ -0,0 +1,74 @@
+<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)">
+        <span :class="size.className">
+          {{ size.text }}
+        </span>
+      </p-dropdown-item>
+    </template>
+  </p-dropdown>
+</template>
+
+<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 IconSize from "@privyid/persona-icon/vue/font-size/20.vue";
+import { useRichtextEditor } from "..";
+const sizes = [
+  {
+    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) {
+  editor.value.chain().focus().setFontSize(fontSize).run();
+}
+</script>

package/dist/components/richtext/control/RichtextControlFontSize.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/control/RichtextControlHighlight.vue

@@ -0,0 +1,127 @@
+<template>
+  <p-dropdown
+    v-model="isShow"
+    icon
+    no-caret
+    variant="ghost"
+    size="sm"
+    menu-size="auto"
+    title="Highlight">
+    <template #button-content>
+      <IconHighlight />
+      <IconCaret />
+    </template>
+
+    <div class="richtext__highlight-container">
+      <template
+        v-for="(color, i) in colors"
+        :key="i">
+        <p-button
+          icon
+          variant="ghost"
+          size="sm"
+          :title="color.text"
+          :active="isActive(color.value)"
+          @click="setHightlight(color.value)">
+          <span
+            class="richtext__highlight-pallete"
+            :class="color.class" />
+        </p-button>
+      </template>
+      <p-button
+        icon
+        variant="ghost"
+        size="sm"
+        title="Remove highlight"
+        @click="unsetHightlight()">
+        <IconDelete class="richtext__highlight-pallete richtext__highlight-delete" />
+      </p-button>
+    </div>
+  </p-dropdown>
+</template>
+
+<script setup>
+import pButton from "../../button/Button.vue";
+import pDropdown from "../../dropdown/Dropdown.vue";
+import IconCaret from "@privyid/persona-icon/vue/caret-down/16.vue";
+import IconHighlight from "@privyid/persona-icon/vue/highlight/20.vue";
+import IconDelete from "@privyid/persona-icon/vue/close/16.vue";
+import { useRichtextEditor } from "..";
+import { ref } from "vue";
+const editor = useRichtextEditor();
+const isShow = ref(false);
+const colors = [
+  {
+    text: "Yellow",
+    value: "#F6E789",
+    class: "bg-yellow-20"
+  },
+  {
+    text: "Orange",
+    value: "#F9CD84",
+    class: "bg-orange-20"
+  },
+  {
+    text: "Red",
+    value: "#F08A89",
+    class: "bg-red-20"
+  },
+  {
+    text: "Lime",
+    value: "#B7EB61",
+    class: "bg-lime-30"
+  },
+  {
+    text: "Green",
+    value: "#84D495",
+    class: "bg-green-20"
+  },
+  {
+    text: "Blue",
+    value: "#3887DB",
+    class: "bg-blue-20"
+  },
+  {
+    text: "Lightblue",
+    value: "#71D2DF",
+    class: "bg-lightblue-20"
+  },
+  {
+    text: "Purple",
+    value: "#C8A8EF",
+    class: "bg-purple-20"
+  }
+];
+function isActive(color) {
+  return editor.value.isActive("highlight", { color });
+}
+function setHightlight(color) {
+  editor.value.chain().focus().setHighlight({ color }).run();
+  isShow.value = false;
+}
+function unsetHightlight() {
+  editor.value.chain().focus().unsetHighlight().run();
+  isShow.value = false;
+}
+</script>
+
+<style lang="postcss">
+.richtext__highlight {
+  &-container {
+    @apply grid grid-cols-[repeat(3,_2rem)] grid-rows-[repeat(3,_2rem)] gap-1 p-1;
+
+    > .btn {
+      @apply w-full h-full;
+    }
+  }
+
+  &-pallete {
+    @apply w-full h-full rounded-xs;
+  }
+
+  &-delete {
+    @apply border text-danger;
+    @apply dark:border-dark-default dark:text-dark-danger;
+  }
+}
+</style>

package/dist/components/richtext/control/RichtextControlHighlight.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/control/RichtextControlHistory.vue

@@ -0,0 +1,26 @@
+<template>
+  <p-button
+    variant="ghost"
+    size="sm"
+    icon
+    :disabled="!editor.can().chain().focus().undo().run()"
+    @click="editor.chain().focus().undo().run()">
+    <IconUndo />
+  </p-button>
+  <p-button
+    variant="ghost"
+    size="sm"
+    icon
+    :disabled="!editor.can().chain().focus().redo().run()"
+    @click="editor.chain().focus().redo().run()">
+    <IconRedo />
+  </p-button>
+</template>
+
+<script setup>
+import pButton from "../../button/Button.vue";
+import IconUndo from "@privyid/persona-icon/vue/undo/20.vue";
+import IconRedo from "@privyid/persona-icon/vue/redo/20.vue";
+import { useRichtextEditor } from "..";
+const editor = useRichtextEditor();
+</script>

package/dist/components/richtext/control/RichtextControlHistory.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/control/RichtextControlImage.vue

@@ -0,0 +1,32 @@
+<template>
+  <p-dropzone
+    v-slot="{ browse }"
+    accept="image/*"
+    @change="handleFiles($event)">
+    <p-button
+      variant="ghost"
+      size="sm"
+      icon
+      title="Insert image"
+      @click="browse">
+      <IconImage />
+    </p-button>
+  </p-dropzone>
+</template>
+
+<script setup>
+import pButton from "../../button/Button.vue";
+import pDropzone from "../../dropzone/Dropzone.vue";
+import IconImage from "@privyid/persona-icon/vue/image/20.vue";
+import { useRichtextEditor } from "..";
+import { toBase64 } from "../../utils/base64";
+const editor = useRichtextEditor();
+async function handleFiles(image) {
+  if (image instanceof File) {
+    editor.value.chain().focus().setImage({
+      src: await toBase64(image),
+      title: image.name
+    }).run();
+  }
+}
+</script>

package/dist/components/richtext/control/RichtextControlImage.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/control/RichtextControlLink.vue

@@ -0,0 +1,44 @@
+<template>
+  <p-dropdown
+    v-model="isShow"
+    icon
+    no-caret
+    variant="ghost"
+    size="sm"
+    menu-size="auto"
+    title="Add hyperlink">
+    <template #button-content>
+      <IconLink />
+    </template>
+
+    <div class="flex p-1 space-x-1">
+      <LinkEdit
+        v-if="isShow"
+        v-model="url"
+        @submit="setLink()"
+        @cancel="close()" />
+    </div>
+  </p-dropdown>
+</template>
+
+<script setup>
+import pDropdown from "../../dropdown/Dropdown.vue";
+import IconLink from "@privyid/persona-icon/vue/link/20.vue";
+import { useRichtextEditor } from "..";
+import { ref } from "vue";
+import LinkEdit from "../popup/RichtextPopupLinkEdit.vue";
+import { withHttps } from "ufo";
+const editor = useRichtextEditor();
+const url = ref("");
+const isShow = ref(false);
+function setLink() {
+  if (!url.value)
+    return;
+  editor.value.chain().focus().extendMarkRange("link").setLink({ href: withHttps(url.value) }).run();
+  close();
+}
+function close() {
+  isShow.value = false;
+  url.value = "";
+}
+</script>

package/dist/components/richtext/control/RichtextControlLink.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;