@privyid/persona 1.1.2 → 1.2.1

package/dist/components/richtext/popup/RichtextPopupImageEdit.vue

@@ -1,65 +0,0 @@
-<template>
-  <p-button
-    variant="ghost"
-    size="sm"
-    icon
-    title="Align left"
-    :active="editor.isActive('image', { imageAlign: 'left' })"
-    @click="editor.chain().focus().setImageAlign('left').run()">
-    <IconAlignLeft />
-  </p-button>
-  <p-button
-    variant="ghost"
-    size="sm"
-    icon
-    title="Align center"
-    :active="editor.isActive('image', { imageAlign: 'center' })"
-    @click="editor.chain().focus().setImageAlign('center').run()">
-    <IconAlignCenter />
-  </p-button>
-  <p-button
-    variant="ghost"
-    size="sm"
-    icon
-    title="Align right"
-    :active="editor.isActive('image', { imageAlign: 'right' })"
-    @click="editor.chain().focus().setImageAlign('right').run()">
-    <IconAlignRight />
-  </p-button>
-  <div class="flex items-center w-32 px-4 border-l dark:border-dark-default">
-    <p-input-range
-      v-model="scale"
-      min="25"
-      max="100"
-      step="25" />
-  </div>
-  <p-button
-    variant="ghost"
-    icon
-    size="sm"
-    @click="editor.chain().focus().deleteSelection().run()">
-    <IconDelete />
-  </p-button>
-</template>
-
-<script lang="ts" setup>
-import pButton from '../../button/Button.vue'
-import pInputRange from '../../input-range/InputRange.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 IconDelete from '@privyid/persona-icon/vue/trash/20.vue'
-import { useRichtextEditor } from '..'
-import { computed } from 'vue-demi'
-import { withoutUnit, withUnit } from '../../table'
-
-const editor = useRichtextEditor()
-const scale  = computed({
-  get () {
-    return withoutUnit(editor.value.getAttributes('image').imageWidth ?? '100%')
-  },
-  set (value) {
-    return editor.value.commands.updateAttributes('image', { imageWidth: withUnit(value) })
-  },
-})
-</script>

package/dist/components/richtext/popup/RichtextPopupLinkDetail.vue

@@ -1,95 +0,0 @@
-<template>
-  <template v-if="isEdit">
-    <LinkEdit
-      v-model="formURL"
-      @cancel="cancel"
-      @submit="save" />
-  </template>
-  <template v-else>
-    <p-button
-      :href="url"
-      target="_blank"
-      variant="link"
-      size="sm">
-      <span class="truncate max-w-52">{{ url }}</span>
-      <IconNewPage />
-    </p-button>
-    <div class="px-2 border-l dark:border-dark-default">
-      <p-button
-        size="sm"
-        icon
-        variant="ghost"
-        title="Edit hyperlink"
-        @click="edit()">
-        <IconEdit />
-      </p-button>
-      <p-button
-        size="sm"
-        icon
-        variant="ghost"
-        title="Remove hyperlink"
-        @click="remove()">
-        <IconDelete />
-      </p-button>
-    </div>
-  </template>
-</template>
-
-<script lang="ts" setup>
-import LinkEdit from './RichtextPopupLinkEdit.vue'
-import pButton from '../../button/Button.vue'
-import IconEdit from '@privyid/persona-icon/vue/edit/20.vue'
-import IconNewPage from '@privyid/persona-icon/vue/new-page/16.vue'
-import IconDelete from '@privyid/persona-icon/vue/trash/20.vue'
-import {
-  ref,
-  computed,
-  watch,
-  nextTick,
-} from 'vue-demi'
-import { withHttps } from 'ufo'
-import { useRichtextEditor } from '..'
-
-const editor = useRichtextEditor()
-const url    = computed(() => {
-  return editor.value.getAttributes('link').href
-})
-
-const isEdit  = ref(false)
-const formURL = ref('')
-
-watch(url, () => {
-  nextTick(() => {
-    if (isEdit.value)
-      cancel()
-  })
-})
-
-function edit () {
-  formURL.value = url.value
-  isEdit.value  = true
-}
-
-function save () {
-  editor.value.chain()
-    .focus()
-    .extendMarkRange('link')
-    .setLink({ href: withHttps(formURL.value) })
-    .run()
-
-  cancel()
-}
-
-function cancel () {
-  formURL.value = ''
-  isEdit.value  = false
-}
-
-function remove () {
-  editor.value.chain()
-    .focus()
-    .extendMarkRange('link')
-    .unsetLink()
-    .run()
-}
-</script>

package/dist/components/richtext/popup/RichtextPopupLinkEdit.vue

@@ -1,74 +0,0 @@
-<template>
-  <p-input-group size="sm">
-    <p-input-group-addon>
-      <IconLink />
-    </p-input-group-addon>
-
-    <p-input
-      ref="input"
-      v-model="model"
-      placeholder="Enter URL"
-      title="Enter URL"
-      @keyup.esc.prevent="cancel()"
-      @keyup.enter.prevent="submit()" />
-  </p-input-group>
-  <p-button
-    size="sm"
-    icon
-    variant="ghost"
-    :disabled="!model"
-    title="Save"
-    @click="submit()">
-    <IconSubmit />
-  </p-button>
-  <p-button
-    size="sm"
-    icon
-    variant="ghost"
-    title="Cancel"
-    @click="cancel()">
-    <IconClose />
-  </p-button>
-</template>
-
-<script lang="ts" setup>
-import pInput from '../../input/Input.vue'
-import pInputGroup from '../../input-group/InputGroup.vue'
-import pInputGroupAddon from '../../input-group/InputGroupAddon.vue'
-import pButton from '../../button/Button.vue'
-import IconLink from '@privyid/persona-icon/vue/link/20.vue'
-import IconSubmit from '@privyid/persona-icon/vue/checkmark/20.vue'
-import IconClose from '@privyid/persona-icon/vue/close/20.vue'
-import { useVModel } from '../../input'
-import { onMounted, ref } from 'vue-demi'
-
-const props = defineProps({
-  modelValue: {
-    type   : String,
-    default: '',
-  },
-})
-
-const model = useVModel(props)
-const input = ref<InstanceType<typeof pInput>>()
-
-const emit = defineEmits<{
-  'update:modelValue': [string],
-  'submit': [string],
-  'cancel': [],
-}>()
-
-onMounted(() => {
-  setTimeout(() => {
-    input.value?.input.focus()
-  }, 300)
-})
-
-function submit () {
-  emit('submit', model.value)
-}
-
-function cancel () {
-  emit('cancel')
-}
-</script>

package/dist/components/richtext/tiptap/image-align.d.ts

@@ -1,43 +0,0 @@
-import { Extension } from '@tiptap/core';
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        imageAlign: {
-            /**
-             * Set image align
-             * @param align
-             * @example
-             *  editor
-             *   .commands
-             *   .setImageAlign('right')
-             */
-            setImageAlign: (align: string) => ReturnType;
-            /**
-             * Unset image align
-             * @returns
-             */
-            unsetImageAlign: () => ReturnType;
-        };
-    }
-}
-export interface ImageAlignOptions {
-    /**
-     * The types where the text align attribute can be applied.
-     * @default ['image']
-     * @example ['image', 'figure']
-     */
-    types: string[];
-    /**
-     * The alignments which are allowed.
-     * @default ['left', 'center', 'right']
-     * @example ['left', 'right']
-     */
-    alignments: string[];
-    /**
-     * The default alignment.
-     * @default 'left'
-     * @example 'center'
-     */
-    defaultAlignment: string;
-}
-export declare const Image: Extension<ImageAlignOptions, any>;
-export default Image;

package/dist/components/richtext/tiptap/image-align.mjs

@@ -1,60 +0,0 @@
-import { Extension } from "@tiptap/core";
-export const Image = Extension.create({
-  name: "image-align",
-  addOptions() {
-    return {
-      types: ["image"],
-      alignments: [
-        "left",
-        "center",
-        "right"
-      ],
-      defaultAlignment: "center"
-    };
-  },
-  addGlobalAttributes() {
-    return [
-      {
-        types: this.options.types,
-        attributes: {
-          imageWidth: {
-            default: "100%",
-            parseHTML(element) {
-              return element.style.width;
-            },
-            renderHTML(attributes) {
-              return { style: `width: ${attributes.imageWidth}` };
-            }
-          },
-          imageAlign: {
-            default: this.options.defaultAlignment,
-            parseHTML(element) {
-              return element.dataset.align;
-            },
-            renderHTML(attributes) {
-              const marginLeft = attributes.imageAlign === "left" ? "0" : "auto";
-              const marginRight = attributes.imageAlign === "right" ? "0" : "auto";
-              return {
-                "data-align": attributes.align,
-                "style": `margin-left: ${marginLeft}; margin-right: ${marginRight}`
-              };
-            }
-          }
-        }
-      }
-    ];
-  },
-  addCommands() {
-    return {
-      setImageAlign: (align) => ({ commands }) => {
-        if (!this.options.alignments.includes(align))
-          return false;
-        return this.options.types.map((type) => commands.updateAttributes(type, { imageAlign: align })).every(Boolean);
-      },
-      unsetImageAlign: () => ({ commands }) => {
-        return this.options.types.map((type) => commands.resetAttributes(type, "imageAlign")).every(Boolean);
-      }
-    };
-  }
-});
-export default Image;

package/dist/components/ringbar/Ringbar.vue

@@ -1,158 +0,0 @@
-<template>
-  <svg
-    data-testid="ringbar"
-    class="ringbar"
-    :class="classNames"
-    viewBox="0 0 18 18"
-    xmlns="http://www.w3.org/2000/svg">
-    <circle
-      class="ringbar__track"
-      cx="9"
-      cy="9"
-      r="8"
-      fill="transparent"
-      stroke-width="2px" />
-    <g class="ringbar__wrapper">
-      <circle
-        data-testid="ringbar-ring"
-        class="ringbar__ring"
-        cx="9"
-        cy="9"
-        r="8"
-        :stroke-dashoffset="(1 - presentage) * 50.2654825"
-        stroke-dasharray="50.2654825"
-        stroke-linecap="round"
-        stroke-width="2px"
-        fill="transparent" />
-    </g>
-  </svg>
-</template>
-
-<script lang="ts" setup>
-import { useProgressbar } from '../progressbar'
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import { type SizeVariant } from '../button'
-import type { DirectionVariant } from '.'
-
-const props = defineProps({
-  value: {
-    type   : [Number, String],
-    default: 0,
-  },
-  min: {
-    type   : [Number, String],
-    default: 0,
-  },
-  max: {
-    type   : [Number, String],
-    default: 100,
-  },
-  size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
-  },
-  indeterminate: {
-    type   : Boolean,
-    default: false,
-  },
-  direction: {
-    type   : String as PropType<DirectionVariant>,
-    default: 'cw',
-  },
-})
-
-const presentage = useProgressbar(props)
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (props.indeterminate)
-    result.push('ringbar--indeterminate')
-
-  // eslint-disable-next-line unicorn/explicit-length-check
-  if (props.size)
-    result.push(`ringbar--${props.size}`)
-
-  if (props.direction)
-    result.push(`ringbar--${props.direction}`)
-
-  return result
-})
-</script>
-
-<style lang="postcss">
-.ringbar {
-  &__track {
-    @apply stroke-[color:theme(backgroundColor.ground)];
-    @apply dark:stroke-[color:theme(backgroundColor.dark.ground)];
-  }
-
-  &__ring {
-    @apply transition-[stroke-dashoffset] will-change-[stroke-dashoffset] duration-75 ease-out;
-    @apply stroke-[color:theme(borderColor.info.emphasis)] origin-center;
-    @apply dark:stroke-[color:theme(borderColor.dark.info.emphasis)];
-  }
-
-  &__wrapper {
-    @apply origin-center -rotate-90;
-  }
-
-  &--indeterminate {
-    .ringbar__ring {
-      animation: 1.5s ease-in-out infinite spinner-ring;
-    }
-
-    .ringbar__wrapper {
-      animation: 2s spinner-spin linear infinite;
-    }
-  }
-
-  &--xs {
-    @apply w-4 h-4;
-  }
-
-  &--sm {
-    @apply w-5 h-5;
-  }
-
-  &--md {
-    @apply w-6 h-6;
-  }
-
-  &--lg {
-    @apply w-8 h-8;
-  }
-
-  &--ccw {
-    @apply -scale-x-100;
-  }
-}
-
-@keyframes spinner-spin {
-  from {
-    transform: rotate(0);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes spinner-ring {
-  0% {
-    stroke-dashoffset: 45.2389342;
-    transform: rotate(0);
-  }
-
-  50% {
-    stroke-dashoffset: 5.02654825;
-    transform: rotate(45deg);
-  }
-
-  100% {
-    stroke-dashoffset: 45.2389342;
-    transform: rotate(360deg);
-  }
-}
-</style>

package/dist/components/ringbar/index.d.ts

@@ -1 +0,0 @@
-export type DirectionVariant = 'cw' | 'ccw';