@privyid/persona 1.2.0 → 1.2.1

package/dist/components/qrcode/index.md

@@ -1,248 +0,0 @@
----
-title: QR Code · Components
-description: QRCode Image Generator
----
-
-<script setup>
-  import pQrcode from './Qrcode.vue'
-  import pInput from '../input/Input.vue'
-  import { withBase } from 'vitepress'
-  import { ref } from 'vue-demi'
-
-  const Logo      = withBase('/assets/images/logo.svg')
-  const result    = ref()
-  const resultB64 = ref()
-
-  const text = ref('https://persona.privyid.dev')
-</script>
-
-# QR Code
-
-> QRCode Image Generator
-
-## Usage
-
-### Simple Usage
-
-<preview>
-  <p-qrcode data="https://persona.privyid.dev" />
-</preview>
-
-```vue
-<template>
-  <p-qrcode data="https://persona.privyid.dev" />
-</template>
-```
-
-### Simple QR Generator
-
-<preview>
-  <div class="flex flex-col">
-    <p-input v-model="text" />
-    <p-qrcode :data="text" />
-  </div>
-</preview>
-
-```vue
-<template>
-  <div class="flex flex-col">
-    <p-input v-model="text" />
-    <p-qrcode :data="text" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-const text = ref('https://persona.privyid.dev')
-</script>
-```
-
-## Sizing
-
-Adjust QR size using prop `size`. Default is `200`
-
-<preview class="space-x-3">
-  <p-qrcode size="50" data="Hello World" />
-  <p-qrcode size="100" data="Hello World" />
-  <p-qrcode size="150" data="Hello World" />
-</preview>
-
-```vue
-<template>
-  <p-qrcode size="50" data="Hello World" />
-  <p-qrcode size="100" data="Hello World" />
-  <p-qrcode size="150" data="Hello World" />
-</template>
-```
-
-## Variant
-
-There are 3 style variants: `square`, `rounded` and `dots`. Default value is `square`
-
-<preview>
-  <div class="grid grid-cols-3 gap-4">
-    <p-qrcode variant="square" data="Hello World" />
-    <p-qrcode variant="rounded" data="Hello World" />
-    <p-qrcode variant="dots" data="Hello World" />
-  </div>
-</preview>
-
-```vue
-<template>
-  <p-qrcode variant="square" data="Hello World" />
-  <p-qrcode variant="rounded" data="Hello World" />
-  <p-qrcode variant="dots" data="Hello World" />
-</template>
-
-```
-
-## Logo
-
-<preview class="space-x-3">
-  <!-- From local assets -->
-  <p-qrcode data="https://persona.privyid.dev" :logo="Logo" />
-  <!-- From URL -->
-  <p-qrcode data="https://persona.privyid.dev" logo="https://privy-open-source.github.io/design-system/assets/images/icon-privy.svg" />
-</preview>
-
-```vue
-<template>
-  <!-- From local assets -->
-  <p-qrcode data="https://persona.privyid.dev" :logo="Logo" />
-  <!-- From URL -->
-  <p-qrcode data="https://persona.privyid.dev" logo="https://privy-open-source.github.io/design-system/assets/images/icon-privy.svg" />
-</template>
-
-<script lang="ts" setup>
-import Logo from '../assets/logo.svg'
-</script>
-```
-
-## Color
-
-<preview>
-  <p-qrcode data="https://persona.privyid.dev" color="#0065D1" />
-</preview>
-
-```vue
-<template>
-  <p-qrcode
-    data="https://persona.privyid.dev"
-    color="#0065D1" />
-</template>
-
-```
-
-## Background Color
-
-<preview>
-  <p-qrcode data="https://persona.privyid.dev" color="#3887DB" bg-color="#14181E" />
-</preview>
-
-```vue
-<template>
-  <p-qrcode
-    data="https://persona.privyid.dev"
-    color="#3887DB"
-    bg-color="#14181E" />
-</template>
-
-```
-
-## Binding v-model
-
-You can binding the generated result with `v-model`.
-
-<preview class="flex-col">
-  <p-qrcode data="Lorem ipsum" v-model="result" />
-</preview>
-
-```vue
-<template>
-  <p-qrcode data="Lorem ipsum" v-model="result" />
-</template>
-
-<script lang="ts" setup>
-const result = ref<File>()
-</script>
-```
-
-**result**
-
-<pre class="truncate"><code>{{ result }}</code></pre>
-
-### Encode to base64
-
-If you prefer [base64-dataURI][data-uri] format, add modifier `.base64` to your `v-model`.
-
-<preview class="flex-col">
-  <p-qrcode data="Lorem ipsum" v-model.base64="resultB64" />
-</preview>
-
-**result**
-
-<pre class="truncate"><code>{{ resultB64 }}</code></pre>
-
-```vue
-<template>
-  <p-qrcode data="Lorem ipsum" v-model.base64="result" />
-</template>
-
-<script lang="ts" setup>
-const result = ref('')
-</script>
-```
-
-## API
-
-### Props
-
-| Props        |   Type   |  Default  | Description                                                                      |
-|--------------|:--------:|:---------:|----------------------------------------------------------------------------------|
-| `data`       |  `Any`   |    `-`    | QRCode contains data                                                             |
-| `size`       | `Number` |   `200`   | QRCode image's width and height                                                  |
-| `variant`    | `String` | `square`  | Style variant.<br/> valid value: `square`, `rounded`, `dots`                     |
-| `logo`       | `String` |    `-`    | QRCode logo url                                                                  |
-| `logoSize`   | `Number` |   `0.8`   | QRCode logo size                                                                 |
-| `logoMargin` | `Number` |    `8`    | QRCode logo margin                                                               |
-| `color`      | `String` | `#000000` | QRCode color                                                                     |
-| `bgColor`    | `String` | `#FFFFFF` | QRCode background color                                                          |
-| `ecc`        | `String` |    `M`    | QRCode error correction level.<br/> valid value: `L`, `M`, `H`, `Q`              |
-| `typeNumber` | `Number` |    `-`    | QRCode type number                                                               |
-| `mode`       | `String` |    `-`    | QRCode mode                                                                      |
-| `options`    | `Object` |    `-`    | Extends [Qr Code Styling](https://github.com/kozakdenys/qr-code-styling) options |
-| `modelValue` | `String` |    `-`    | Result of generated image                                                        |
-
-### 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
-
-<table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Arguments</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td colspan="3" class="text-center">There no props here</td>
-    </tr>
-  </tbody>
-</table>
-
-[data-uri]: https://en.wikipedia.org/wiki/Data_URI_scheme

package/dist/components/radio/Radio.spec.d.ts

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

package/dist/components/radio/Radio.spec.mjs

@@ -1,96 +0,0 @@
-import { fireEvent, render } from "@testing-library/vue";
-import { vi } from "vitest";
-import { ref } from "vue-demi";
-import Radio from "./Radio.vue";
-it("should render properly without any prop", () => {
-  const screen = render({
-    components: { Radio },
-    template: `
-      <Radio />
-    `
-  });
-  const radio = screen.getByTestId("radio");
-  expect(radio).toBeInTheDocument();
-  expect(radio).toHaveClass("radio", "radio--radio");
-});
-it("should checked at start if `checked` props is provided", () => {
-  const screen = render({
-    components: { Radio },
-    template: `
-      <Radio checked />
-    `
-  });
-  const radio = screen.getByTestId("radio");
-  expect(radio).toBeInTheDocument();
-  expect(radio).toHaveClass("radio--checked");
-});
-it("should have readonly style if `readonly` props is provided", () => {
-  const screen = render({
-    components: { Radio },
-    template: `
-      <Radio readonly />
-    `
-  });
-  const radio = screen.getByTestId("radio");
-  expect(radio).toBeInTheDocument();
-  expect(radio).toHaveClass("radio--readonly");
-});
-it("should have disabled style if `disabled` props is provided", () => {
-  const screen = render({
-    components: { Radio },
-    template: `
-      <Radio disabled />
-    `
-  });
-  const radio = screen.getByTestId("radio");
-  expect(radio).toBeInTheDocument();
-  expect(radio).toHaveClass("radio--disabled");
-});
-it('should have style checkbox if `appearance` set to "checkbox"', () => {
-  const screen = render({
-    components: { Radio },
-    template: `
-      <Radio appearance="checkbox" />
-    `
-  });
-  const radio = screen.getByTestId("radio");
-  expect(radio).toBeInTheDocument();
-  expect(radio).toHaveClass("radio--checkbox");
-  expect(radio).not.toHaveClass("radio--radio");
-});
-it("should modify state in v-model", async () => {
-  const model = ref();
-  const screen = render({
-    components: { Radio },
-    template: `
-      <Radio v-model="model" value="apple">Apple</Radio>
-      <Radio v-model="model" value="grape">Grape</Radio>
-    `,
-    setup() {
-      return { model };
-    }
-  });
-  const radioApple = screen.queryByText("Apple");
-  const radioGrape = screen.queryByText("Grape");
-  await fireEvent.click(radioApple);
-  expect(model.value).toBe("apple");
-  await fireEvent.click(radioGrape);
-  expect(model.value).toBe("grape");
-});
-it('should trigger event "change" when clicked', async () => {
-  const onChange = vi.fn();
-  const screen = render({
-    components: { Radio },
-    template: `
-      <Radio @change="onChange">
-        Apple
-      </Radio>
-    `,
-    setup() {
-      return { onChange };
-    }
-  });
-  const radioApple = screen.queryByText("Apple");
-  await fireEvent.click(radioApple);
-  expect(onChange).toBeCalledWith(true);
-});

package/dist/components/radio/Radio.vue

@@ -1,285 +0,0 @@
-<template>
-  <label
-    data-testid="radio"
-    class="radio"
-    :class="classNames"
-    @click.prevent="toggle">
-    <span class="radio__icon">
-      <IconCheck v-if="appearance === 'option'" />
-      <svg
-        v-else-if="appearance === 'checkbox'"
-        width="10"
-        height="10"
-        viewBox="0 0 14 10"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg">
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M3.81581 8.48528L5.23002 9.8995L6.64423 8.48528L13.7153 1.41421L12.3011 0L5.23002 7.07107L1.69449 3.53553L0.280273 4.94975L3.81581 8.48528Z" />
-      </svg>
-
-      <svg
-        v-else
-        width="10"
-        height="10"
-        viewBox="0 0 14 14"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg">
-        <circle
-          cx="7"
-          cy="7"
-          r="6" />
-      </svg>
-    </span>
-    <span class="radio__label">
-      <slot :is-checked="model" />
-    </span>
-    <input
-      type="radio"
-      :value="model"
-      :name="name"
-      :disabled="disabled || readonly">
-  </label>
-</template>
-
-<script setup>
-import { useVModel } from ".";
-import IconCheck from "@privyid/persona-icon/vue/checkmark/20.vue";
-import { computed } from "vue-demi";
-const props = defineProps({
-  name: {
-    type: String,
-    default: ""
-  },
-  modelValue: {
-    type: void 0,
-    default: false
-  },
-  value: {
-    type: void 0,
-    default: true
-  },
-  checked: {
-    type: Boolean,
-    default: false
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  appearance: {
-    type: String,
-    default: "radio"
-  }
-});
-defineEmits(["update:modelValue", "change"]);
-const model = useVModel(props);
-const classNames = computed(() => {
-  const result = [];
-  if (model.value)
-    result.push("radio--checked");
-  if (props.readonly)
-    result.push("radio--readonly");
-  if (props.disabled)
-    result.push("radio--disabled");
-  if (props.appearance)
-    result.push(`radio--${props.appearance}`);
-  return result;
-});
-function toggle() {
-  if (!props.disabled && !props.readonly)
-    model.value = true;
-}
-defineSlots();
-</script>
-
-<style lang="postcss">
-.radio {
-  @apply inline-flex space-x-2 relative cursor-pointer select-none items-baseline;
-
-  /**
-  * hide default appearance
-  * radio
-  */
-  & > input[type="radio"] {
-    @apply appearance-none w-0 h-0 opacity-0 absolute;
-  }
-
-  /**
-  * replace default appearance
-  * with custom icon
-  */
-  &__icon {
-    @apply w-4 h-4 border shrink-0 rounded-full border-subtle inline-flex items-center justify-center bg-default;
-    @apply dark:border-dark-subtle dark:bg-dark-default;
-
-    > svg {
-      @apply w-3 fill-default;
-      @apply dark:fill-dark-default;
-    }
-  }
-
-  /**
-  * give color of
-  * checkbox label
-  */
-  &__label {
-    @apply text-default grow;
-    @apply dark:text-dark-default;
-  }
-
-  /**
-  * disable radio
-  */
-  &&--disabled {
-    @apply opacity-50;
-
-    &:not(.radio--checked) {
-      .radio__icon {
-        @apply bg-base border-subtle;
-        @apply dark:bg-dark-base dark:border-dark-subtle;
-
-        > svg {
-          @apply fill-base;
-          @apply dark:fill-dark-base;
-        }
-      }
-    }
-  }
-
-  /**
-  * checked radio
-  */
-  &&--checked {
-    &:not(.radio--checkbox, .radio--option) {
-      .radio__icon {
-        @apply bg-default;
-        @apply dark:bg-dark-inverse;
-      }
-    }
-
-    .radio__icon {
-      @apply border-brand-accent;
-      @apply dark:border-dark-brand-accent;
-
-      > svg {
-        @apply fill-brand-accent;
-        @apply dark:fill-dark-brand-accent;
-      }
-    }
-
-    &.radio--checkbox {
-      .radio__icon {
-        @apply bg-brand-accent;
-        @apply dark:bg-dark-brand-accent;
-
-        > svg {
-          @apply fill-default;
-          @apply dark:fill-dark-inverse;
-        }
-      }
-    }
-  }
-
-  /**
-  * radio with checkbox
-  * appearance
-  */
-  &&--checkbox {
-    .radio__icon {
-      @apply rounded-tn;
-    }
-  }
-
-  /**
-  * radio with option
-  * appearance
-  */
-  &&--option {
-    .radio__icon {
-      @apply order-2 border-none invisible bg-transparent;
-
-      > svg {
-        @apply w-4;
-      }
-    }
-
-    .radio__label {
-      @apply grow;
-    }
-
-    .dropdown__menu > .dropdown__subitem > & {
-      .radio__label {
-        @apply ml-0;
-      }
-    }
-
-    &.radio--checked {
-      .radio__icon {
-        @apply text-info visible;
-        @apply dark:text-dark-info;
-
-        > svg {
-          @apply fill-brand-accent;
-          @apply dark:fill-dark-brand-accent;
-        }
-      }
-    }
-  }
-
-  /**
-  * radio with
-  * appearance none
-  */
-  &&--none {
-    .radio__icon {
-      @apply hidden;
-
-      + .radio__label {
-        @apply ml-0;
-      }
-    }
-
-    &.radio--disabled {
-      .card {
-        @apply bg-base hover:shadow-none hover:cursor-default;
-        @apply dark:bg-dark-base;
-      }
-    }
-  }
-
-  /**
-  * checkbox in
-  * dropdown menu
-  */
-  .dropdown__menu > .dropdown__subitem > .dropdown__item > &,
-  .dropdown__menu > .dropdown__subitem > & {
-    @apply w-full select-none;
-  }
-
-  .dropdown__menu > .dropdown__subitem > .dropdown__item > & {
-    @apply py-[2px];
-  }
-
-  .dropdown__menu > .dropdown__subitem > & {
-    @apply px-4 py-[10px];
-
-    &:not(.radio--option) {
-      .radio__label {
-        @apply ml-4;
-      }
-    }
-
-    &:hover,
-    &:focus-visible {
-      @apply bg-default-alpha;
-      @apply dark:bg-dark-default-alpha;
-    }
-  }
-}
-</style>