@privyid/persona 1.1.2 → 1.2.0

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

@@ -15,7 +15,7 @@
       :key="size.name">
       <p-dropdown-item
         :active="editor.isActive({ fontSize: size.value })"
-        @click="setSize(size.value as string)">
+        @click="setSize(size.value)">
         <span :class="size.className">
           {{ size.text }}
         </span>
@@ -24,58 +24,51 @@
   </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[] = [
+<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: "Default",
+    value: "",
+    className: "text-base"
   },
   {
-    text     : 'Tiny',
-    value    : '11px',
-    className: 'text-tn',
+    text: "Tiny",
+    value: "11px",
+    className: "text-tn"
   },
   {
-    text     : 'Extra small',
-    value    : '12px',
-    className: 'text-xs',
+    text: "Extra small",
+    value: "12px",
+    className: "text-xs"
   },
   {
-    text     : 'Small',
-    value    : '14px',
-    className: 'text-sm',
+    text: "Small",
+    value: "14px",
+    className: "text-sm"
   },
   {
-    text     : 'Normal',
-    value    : '16px',
-    className: 'text-base',
+    text: "Normal",
+    value: "16px",
+    className: "text-base"
   },
   {
-    text     : 'Large',
-    value    : '18px',
-    className: 'text-lg',
+    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()
+    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

@@ -21,8 +21,8 @@
           variant="ghost"
           size="sm"
           :title="color.text"
-          :active="isActive(color.value as string)"
-          @click="setHightlight(color.value as string)">
+          :active="isActive(color.value)"
+          @click="setHightlight(color.value)">
           <span
             class="richtext__highlight-pallete"
             :class="color.class" />
@@ -40,76 +40,68 @@
   </p-dropdown>
 </template>
 
-<script lang="ts" 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 type { SelectItem } from '../../select'
-import { ref } from 'vue-demi'
-
-const editor = useRichtextEditor()
-const isShow = ref(false)
-
-const colors: SelectItem[] = [
+<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: "Yellow",
+    value: "#F6E789",
+    class: "bg-yellow-20"
   },
   {
-    text : 'Orange',
-    value: '#F9CD84',
-    class: 'bg-orange-20',
+    text: "Orange",
+    value: "#F9CD84",
+    class: "bg-orange-20"
   },
   {
-    text : 'Red',
-    value: '#F08A89',
-    class: 'bg-red-20',
+    text: "Red",
+    value: "#F08A89",
+    class: "bg-red-20"
   },
   {
-    text : 'Lime',
-    value: '#B7EB61',
-    class: 'bg-lime-30',
+    text: "Lime",
+    value: "#B7EB61",
+    class: "bg-lime-30"
   },
   {
-    text : 'Green',
-    value: '#84D495',
-    class: 'bg-green-20',
+    text: "Green",
+    value: "#84D495",
+    class: "bg-green-20"
   },
   {
-    text : 'Blue',
-    value: '#3887DB',
-    class: 'bg-blue-20',
+    text: "Blue",
+    value: "#3887DB",
+    class: "bg-blue-20"
   },
   {
-    text : 'Lightblue',
-    value: '#71D2DF',
-    class: 'bg-lightblue-20',
+    text: "Lightblue",
+    value: "#71D2DF",
+    class: "bg-lightblue-20"
   },
   {
-    text : 'Purple',
-    value: '#C8A8EF',
-    class: 'bg-purple-20',
-  },
-]
-
-function isActive (color: string) {
-  return editor.value.isActive('highlight', { color })
+    text: "Purple",
+    value: "#C8A8EF",
+    class: "bg-purple-20"
+  }
+];
+function isActive(color) {
+  return editor.value.isActive("highlight", { color });
 }
-
-function setHightlight (color?: string) {
-  editor.value.chain().focus().setHighlight({ color }).run()
-
-  isShow.value = false
+function setHightlight(color) {
+  editor.value.chain().focus().setHighlight({ color }).run();
+  isShow.value = false;
 }
-
-function unsetHightlight () {
-  editor.value.chain().focus().unsetHighlight().run()
-
-  isShow.value = false
+function unsetHightlight() {
+  editor.value.chain().focus().unsetHighlight().run();
+  isShow.value = false;
 }
 </script>
 

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

@@ -17,11 +17,10 @@
   </p-button>
 </template>
 
-<script lang="ts" 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 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

@@ -14,21 +14,19 @@
   </p-dropzone>
 </template>
 
-<script lang="ts" 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: unknown) {
+<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()
+      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

@@ -21,33 +21,24 @@
   </p-dropdown>
 </template>
 
-<script lang="ts" 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 () {
+<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()
+    return;
+  editor.value.chain().focus().extendMarkRange("link").setLink({ href: withHttps(url.value) }).run();
+  close();
 }
-
-function close () {
-  isShow.value = false
-  url.value    = ''
+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-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

@@ -26,20 +26,18 @@
   </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 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: 'bullet' | 'ordered') {
-  if (type === 'bullet')
-    editor.value.chain().focus().toggleBulletList().run()
+<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()
+    editor.value.chain().focus().toggleOrderedList().run();
 }
 </script>

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

@@ -14,7 +14,7 @@
 
     <div class="richtext__table-grid">
       <template
-        v-for="i in (MAX_ROWS * MAX_COLS)"
+        v-for="i in MAX_ROWS * MAX_COLS"
         :key="i">
         <button
           class="richtext__table-size-item"
@@ -29,62 +29,46 @@
   </p-dropdown>
 </template>
 
-<script lang="ts" 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)
-
+<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: number) {
-  const x = index % MAX_ROWS
-  const y = Math.ceil(index / MAX_COLS)
-
+  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: y,
-  }
+    y
+  };
 }
-
-function isHovered (index: number) {
-  const cursor  = getXY(hover.value)
-  const current = getXY(index)
-
-  return current.x <= cursor.x
-    && current.y <= cursor.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: number) {
-  const { x: cols, y: rows } = getXY(index)
-
-  editor.value?.chain()
-    .focus()
-    .insertTable({
-      rows,
-      cols,
-      withHeaderRow: false,
-    })
-    .run()
-
-  hover.value  = 0
-  isShow.value = false
+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: number) {
-  hover.value = index
+function setHover(index) {
+  hover.value = index;
 }
 </script>
 

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

@@ -37,54 +37,42 @@
   </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 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 type { Component } from 'vue-demi'
-import { computed } from 'vue-demi'
-
+<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',
-] as const
-
-type Alignment = typeof alignment[number]
-
-const ICONS: Record<Alignment, Component> = {
-  left   : IconAlignLeft,
-  center : IconAlignCenter,
-  right  : IconAlignRight,
-  justify: IconAlignJustify,
-}
-
-const editor = useRichtextEditor()
-
+  "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'
-})
-
+  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: Alignment) {
-  editor.value?.chain().focus().setTextAlign(align).run()
+  return ICONS[current.value];
+});
+function setAlign(align) {
+  editor.value?.chain().focus().setTextAlign(align).run();
 }
 </script>

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

@@ -37,13 +37,12 @@
   </p-button>
 </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 { useRichtextEditor } from '..'
-
-const editor = useRichtextEditor()
+<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

@@ -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;