@privyid/persona 1.2.0 → 1.2.1-rc.0

package/dist/components/richtext/index.md

@@ -1,146 +0,0 @@
----
-title: Richtext · Components
-description: Feature-rich WYSWYG text editor
----
-
-<script setup>
-  import pRichtext from './Richtext.vue'
-  import { ref } from 'vue-demi'
-
-  const result = ref()
-</script>
-
-# Richtext
-
-> Feature-rich WYSWYG text editor
-
-## Usage
-
-### Simple Usage
-
-<preview>
-  <p-richtext />
-</preview>
-
-```vue
-<template>
-  <p-richtext />
-</template>
-```
-
-## Control Variants
-
-Richtext has 2 control variants, `simple` and `advanced`. Default is `simple`
-
-<preview class="flex-col space-y-4">
-  <p-richtext variant="simple" />
-  <p-richtext variant="advanced" />
-</preview>
-
-```vue
-<template>
-  <p-richtext variant="simple" />
-  <p-richtext variant="advanced" />
-</template>
-```
-
-## Placeholder
-
-<preview>
-  <p-richtext placeholder="Write something" />
-</preview>
-
-```vue
-<template>
-  <p-richtext placeholder="Write something" />
-</template>
-```
-
-## Disabled State
-<preview>
-  <p-richtext disabled />
-</preview>
-
-```vue
-<template>
-  <p-richtext disabled />
-</template>
-```
-
-## Readonly State
-<preview>
-  <p-richtext readonly />
-</preview>
-
-```vue
-<template>
-  <p-richtext readonly />
-</template>
-```
-
-## Error State
-<preview>
-  <p-richtext error />
-</preview>
-
-```vue
-<template>
-  <p-richtext error />
-</template>
-```
-
-## Binding v-model
-
-Textarea value can be binding with `v-model`.
-
-<preview>
-  <p-richtext v-model="result" />
-</preview>
-
-**result:**
-
-<pre class="truncate"><code>{{ result || '-' }}</code></pre>
-
-```vue
-<template>
-  <p-richtext v-model="result" />
-</template>
-```
-
-## API
-
-### Props
-
-| Props          |   Type    | Default | Description                         |
-|----------------|:---------:|:-------:|-------------------------------------|
-| `placeholder`  | `String`  |   `-`   | Input's placeholder                 |
-| `disabled`     | `Boolean` | `false` | Disable state                       |
-| `readonly`     | `Boolean` | `false` | Readonly state                      |
-| `error`        | `Boolean` | `false` | Error state                         |
-| `accept`       | `String`  |   `-`   | Whitelist character can be inputted |
-| `modelValue`   | `String`  |   `-`   | `v-model` value                     |
-
-### Slots
-
-<table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td colspan="2" class="text-center">There no slots here</td>
-    </tr>
-  </tbody>
-</table>
-
-### Events
-
-| Name    | Arguments           | Description               |
-|---------|---------------------|---------------------------|
-| `input` | Native Input Object | Event when value inputted |
-
-## See Also
-- [Input](/components/input/index)

package/dist/components/richtext/index.mjs

@@ -1,7 +0,0 @@
-import {
-  inject
-} from "vue-demi";
-export const RICHTEXT_CONTEXT = Symbol("Richtext");
-export function useRichtextEditor() {
-  return inject(RICHTEXT_CONTEXT).editor;
-}

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

@@ -1,64 +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 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/RichtextPopupImageEdit.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/popup/RichtextPopupLinkDetail.vue

@@ -1,79 +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 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/RichtextPopupLinkDetail.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/popup/RichtextPopupLinkEdit.vue

@@ -1,64 +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 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();
-const emit = defineEmits(["update:modelValue", "submit", "cancel"]);
-onMounted(() => {
-  setTimeout(() => {
-    input.value?.input.focus();
-  }, 300);
-});
-function submit() {
-  emit("submit", model.value);
-}
-function cancel() {
-  emit("cancel");
-}
-</script>

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

@@ -1,22 +0,0 @@
-declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: string) => void;
-    cancel: () => void;
-    submit: (args_0: string) => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-    onCancel?: (() => any) | undefined;
-    onSubmit?: ((args_0: string) => any) | undefined;
-}>, {
-    modelValue: string;
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-export default _default;

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.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ringbar/Ringbar.spec.mjs

@@ -1,39 +0,0 @@
-import { render } from "@testing-library/vue";
-import Ringbar from "./Ringbar.vue";
-it("should mounted properly", () => {
-  const screen = render({
-    components: { Ringbar },
-    template: "<Ringbar />"
-  });
-  const ringbar = screen.queryByTestId("ringbar");
-  expect(ringbar).toBeInTheDocument();
-});
-it("should able to progress value based on prop `value`", () => {
-  const screen = render({
-    components: { Ringbar },
-    template: '<Ringbar value="45" />'
-  });
-  const ringbar = screen.queryByTestId("ringbar-ring");
-  const expected = (1 - 0.45) * 50.2654825;
-  expect(ringbar).toBeInTheDocument();
-  expect(ringbar).toHaveAttribute("stroke-dashoffset", expected.toPrecision(11));
-});
-it("should has style indeterminate if prop `indeterminate` set to true", () => {
-  const screen = render({
-    components: { Ringbar },
-    template: "<Ringbar indeterminate />"
-  });
-  const ringbar = screen.queryByTestId("ringbar");
-  expect(ringbar).toBeInTheDocument();
-  expect(ringbar).toHaveClass("ringbar--indeterminate");
-});
-it("should able to change size using prop `size`", () => {
-  const screen = render({
-    components: { Ringbar },
-    template: '<Ringbar size="sm" />'
-  });
-  const ringbar = screen.queryByTestId("ringbar");
-  expect(ringbar).toBeInTheDocument();
-  expect(ringbar).toHaveClass("ringbar--sm");
-  expect(ringbar).not.toHaveClass("ringbar--md");
-});

package/dist/components/ringbar/Ringbar.vue

@@ -1,148 +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 setup>
-import { useProgressbar } from "../progressbar";
-import { computed } from "vue-demi";
-import {} from "../button";
-const props = defineProps({
-  value: {
-    type: [Number, String],
-    default: 0
-  },
-  min: {
-    type: [Number, String],
-    default: 0
-  },
-  max: {
-    type: [Number, String],
-    default: 100
-  },
-  size: {
-    type: String,
-    default: "md"
-  },
-  indeterminate: {
-    type: Boolean,
-    default: false
-  },
-  direction: {
-    type: String,
-    default: "cw"
-  }
-});
-const presentage = useProgressbar(props);
-const classNames = computed(() => {
-  const result = [];
-  if (props.indeterminate)
-    result.push("ringbar--indeterminate");
-  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>