@privyid/persona 1.2.0 → 1.2.1

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

@@ -1,127 +0,0 @@
-<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-demi";
-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

@@ -1,2 +0,0 @@
-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/RichtextControlHistory.vue

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

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

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

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

@@ -1,44 +0,0 @@
-<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-demi";
-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

@@ -1,2 +0,0 @@
-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/RichtextControlList.vue

@@ -1,43 +0,0 @@
-<template>
-  <p-dropdown
-    icon
-    no-caret
-    variant="ghost"
-    size="sm"
-    menu-size="auto"
-    title="Text alignment">
-    <template #button-content>
-      <IconOrderedList v-if="editor.isActive('orderedList')" />
-      <IconBulletList v-else />
-      <IconCaret />
-    </template>
-    <p-dropdown-item
-      title="Bullet List"
-      :active="editor.isActive('bulletList')"
-      @click="toggleList('bullet')">
-      <IconBulletList />
-    </p-dropdown-item>
-    <p-dropdown-item
-      title="Ordered list"
-      :active="editor.isActive('orderedList')"
-      @click="toggleList('ordered')">
-      <IconOrderedList />
-    </p-dropdown-item>
-  </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 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();
-function toggleList(type) {
-  if (type === "bullet")
-    editor.value.chain().focus().toggleBulletList().run();
-  else
-    editor.value.chain().focus().toggleOrderedList().run();
-}
-</script>

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

@@ -1,2 +0,0 @@
-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/RichtextControlTable.vue

@@ -1,90 +0,0 @@
-<template>
-  <p-dropdown
-    v-model="isShow"
-    icon
-    no-caret
-    variant="ghost"
-    size="sm"
-    menu-size="auto"
-    title="Insert table">
-    <template #button-content>
-      <IconTable />
-      <IconCaret />
-    </template>
-
-    <div class="richtext__table-grid">
-      <template
-        v-for="i in MAX_ROWS * MAX_COLS"
-        :key="i">
-        <button
-          class="richtext__table-size-item"
-          :active="isHovered(i)"
-          @mouseenter="setHover(i)"
-          @click="insertTable(i)" />
-      </template>
-    </div>
-    <div class="py-1 text-center">
-      {{ hoverLabel }}
-    </div>
-  </p-dropdown>
-</template>
-
-<script setup>
-import pDropdown from "../../dropdown/Dropdown.vue";
-import IconCaret from "@privyid/persona-icon/vue/caret-down/16.vue";
-import IconTable from "@privyid/persona-icon/vue/table/20.vue";
-import { computed, ref } from "vue-demi";
-import { useRichtextEditor } from "..";
-const MAX_ROWS = 10;
-const MAX_COLS = 10;
-const editor = useRichtextEditor();
-const hover = ref(0);
-const isShow = ref(false);
-const hoverLabel = computed(() => {
-  const { x, y } = getXY(hover.value);
-  return `${x}x${y}`;
-});
-function getXY(index) {
-  const x = index % MAX_ROWS;
-  const y = Math.ceil(index / MAX_COLS);
-  return {
-    x: x === 0 ? MAX_ROWS : x,
-    y
-  };
-}
-function isHovered(index) {
-  const cursor = getXY(hover.value);
-  const current = getXY(index);
-  return current.x <= cursor.x && current.y <= cursor.y;
-}
-function insertTable(index) {
-  const { x: cols, y: rows } = getXY(index);
-  editor.value?.chain().focus().insertTable({
-    rows,
-    cols,
-    withHeaderRow: false
-  }).run();
-  hover.value = 0;
-  isShow.value = false;
-}
-function setHover(index) {
-  hover.value = index;
-}
-</script>
-
-<style lang="postcss">
-.richtext__table {
-  &-size-item {
-    @apply w-full h-full border border-default border-solid rounded-[2px];
-    @apply dark:border-dark-default;
-
-    &[active="true"] {
-      @apply bg-brand-accent/15;
-    }
-  }
-
-  &-grid {
-    @apply grid grid-cols-[repeat(10,_1rem)] grid-rows-[repeat(10,_1rem)] gap-0.5 p-2 pb-0;
-  }
-}
-</style>

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

@@ -1,2 +0,0 @@
-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/RichtextControlTextAlign.vue

@@ -1,78 +0,0 @@
-<template>
-  <p-dropdown
-    icon
-    no-caret
-    variant="ghost"
-    size="sm"
-    menu-size="auto"
-    title="Text alignment">
-    <template #button-content>
-      <component :is="currentIcon" />
-      <IconCaret />
-    </template>
-    <p-dropdown-item
-      title="Left"
-      :active="editor.isActive({ textAlign: 'left' })"
-      @click="setAlign('left')">
-      <IconAlignLeft />
-    </p-dropdown-item>
-    <p-dropdown-item
-      title="Center"
-      :active="editor.isActive({ textAlign: 'center' })"
-      @click="setAlign('center')">
-      <IconAlignCenter />
-    </p-dropdown-item>
-    <p-dropdown-item
-      title="Right"
-      :active="editor.isActive({ textAlign: 'right' })"
-      @click="setAlign('right')">
-      <IconAlignRight />
-    </p-dropdown-item>
-    <p-dropdown-item
-      title="Justify"
-      :active="editor.isActive({ textAlign: 'justify' })"
-      @click="setAlign('justify')">
-      <IconAlignJustify />
-    </p-dropdown-item>
-  </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 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 { useRichtextEditor } from "..";
-import { computed } from "vue-demi";
-const alignment = [
-  "left",
-  "center",
-  "right",
-  "justify"
-];
-const ICONS = {
-  left: IconAlignLeft,
-  center: IconAlignCenter,
-  right: IconAlignRight,
-  justify: IconAlignJustify
-};
-const editor = useRichtextEditor();
-const current = computed(() => {
-  if (editor.value?.isActive({ textAlign: "center" }))
-    return "center";
-  if (editor.value?.isActive({ textAlign: "right" }))
-    return "right";
-  if (editor.value?.isActive({ textAlign: "justify" }))
-    return "justify";
-  return "left";
-});
-const currentIcon = computed(() => {
-  return ICONS[current.value];
-});
-function setAlign(align) {
-  editor.value?.chain().focus().setTextAlign(align).run();
-}
-</script>

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

@@ -1,2 +0,0 @@
-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/RichtextControlTextFormat.vue

@@ -1,48 +0,0 @@
-<template>
-  <p-button
-    variant="ghost"
-    size="sm"
-    icon
-    title="Bold"
-    :active="editor.isActive('bold')"
-    @click="editor.chain().focus().toggleBold().run()">
-    <IconBold />
-  </p-button>
-  <p-button
-    variant="ghost"
-    size="sm"
-    icon
-    title="Italic"
-    :active="editor.isActive('italic')"
-    @click="editor.chain().focus().toggleItalic().run()">
-    <IconItalic />
-  </p-button>
-  <p-button
-    variant="ghost"
-    size="sm"
-    icon
-    title="Underline"
-    :active="editor.isActive('underline')"
-    @click="editor.chain().focus().toggleUnderline().run()">
-    <IconUnderline />
-  </p-button>
-  <p-button
-    variant="ghost"
-    size="sm"
-    icon
-    title="Strikethrough"
-    :active="editor.isActive('strikethrough')"
-    @click="editor.chain().focus().toggleStrike().run()">
-    <IconStrikethrough />
-  </p-button>
-</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 { useRichtextEditor } from "..";
-const editor = useRichtextEditor();
-</script>

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

@@ -1,2 +0,0 @@
-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/RichtextControlTextHeading.vue

@@ -1,93 +0,0 @@
-<template>
-  <p-dropdown
-    variant="ghost"
-    size="sm"
-    icon
-    no-caret>
-    <template #button-content>
-      {{ current }}
-      <IconCaret />
-    </template>
-    <p-dropdown-item
-      :active="editor.isActive('paragraph')"
-      @click="setParagraph()">
-      Paragraph
-    </p-dropdown-item>
-    <p-dropdown-item
-      :active="editor.isActive('heading', { level: 1 })"
-      @click="setHeading(1)">
-      <span class="text-4xl font-bold">
-        Heading 1
-      </span>
-    </p-dropdown-item>
-    <p-dropdown-item
-      :active="editor.isActive('heading', { level: 2 })"
-      @click="setHeading(2)">
-      <span class="text-3xl font-bold">
-        Heading 2
-      </span>
-    </p-dropdown-item>
-    <p-dropdown-item
-      :active="editor.isActive('heading', { level: 3 })"
-      @click="setHeading(3)">
-      <span class="text-2xl font-bold">
-        Heading 3
-      </span>
-    </p-dropdown-item>
-    <p-dropdown-item
-      :active="editor.isActive('heading', { level: 4 })"
-      @click="setHeading(4)">
-      <span class="text-xl font-bold">
-        Heading 4
-      </span>
-    </p-dropdown-item>
-    <p-dropdown-item
-      :active="editor.isActive('heading', { level: 5 })"
-      @click="setHeading(5)">
-      <span class="text-lg font-bold">
-        Heading 5
-      </span>
-    </p-dropdown-item>
-    <p-dropdown-item
-      :active="editor.isActive('heading', { level: 5 })"
-      @click="setHeading(6)">
-      <span class="text-base font-bold">
-        Heading 6
-      </span>
-    </p-dropdown-item>
-    <p-dropdown-item
-      :active="editor.isActive('codeBlock')"
-      @click="setCodeBlock()">
-      <span class="font-mono text-base">
-        Code Block
-      </span>
-    </p-dropdown-item>
-  </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 { useRichtextEditor } from "..";
-import { computed } from "vue-demi";
-const editor = useRichtextEditor();
-const current = computed(() => {
-  for (let i = 1; i <= 6; i++) {
-    if (editor.value.isActive("heading", { level: i }))
-      return `Heading ${i}`;
-  }
-  if (editor.value.isActive("codeBlock"))
-    return "Code Block";
-  return "Paragraph";
-});
-function setParagraph() {
-  editor.value.chain().focus().setParagraph().run();
-}
-function setHeading(level) {
-  editor.value.chain().focus().setHeading({ level }).run();
-}
-function setCodeBlock() {
-  editor.value.chain().focus().setCodeBlock().run();
-}
-</script>

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

@@ -1,2 +0,0 @@
-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/index.d.ts

@@ -1,7 +0,0 @@
-import type { Editor } from '@tiptap/vue-3';
-import { type InjectionKey, type ShallowRef } from 'vue-demi';
-export declare const RICHTEXT_CONTEXT: InjectionKey<{
-    editor: ShallowRef<Editor>;
-}>;
-export type ControlVariant = 'simple' | 'advanced';
-export declare function useRichtextEditor(): ShallowRef<Editor>;