@privyid/persona 1.2.0 → 1.2.1

package/dist/components/textarea/Textarea.vue

@@ -1,162 +0,0 @@
-<template>
-  <div
-    data-testid="textarea"
-    :class="classNames">
-    <textarea
-      ref="textarea"
-      v-model="model"
-      data-testid="textarea-input"
-      class="textarea__input"
-      v-bind="$attrs"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :readonly="readonly"
-      :rows="rows"
-      :maxlength="maxlength"
-      :aria-valuemax="maxlength"
-      @beforeinput="checkOnInput(accept, $event)"
-      @input="handleInput" />
-    <div
-      v-if="showCounter"
-      data-testid="calendar-counter"
-      class="textarea__counter">
-      {{ charactersLength }}<span v-if="maxlength">/{{ maxlength }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {
-  checkOnInput,
-  useVModel
-} from "../input";
-import {
-  computed,
-  onMounted,
-  watch,
-  ref
-} from "vue-demi";
-defineOptions({ inheritAttrs: false });
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: void 0
-  },
-  placeholder: {
-    type: String,
-    default: ""
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  error: {
-    type: Boolean,
-    default: false
-  },
-  autoGrow: {
-    type: Boolean,
-    default: false
-  },
-  resize: {
-    type: Boolean,
-    default: false
-  },
-  showCounter: {
-    type: Boolean,
-    default: false
-  },
-  rows: {
-    type: [Number, String],
-    default: 3
-  },
-  maxlength: {
-    type: [Number, String],
-    default: void 0
-  },
-  accept: {
-    type: String,
-    default: void 0
-  }
-});
-defineEmits(["input", "update:modelValue"]);
-const textarea = ref();
-const model = useVModel(props);
-const classNames = computed(() => {
-  const results = ["textarea"];
-  if (props.resize)
-    results.push("textarea--resize");
-  if (props.disabled)
-    results.push("textarea--disabled");
-  if (props.autoGrow)
-    results.push("textarea--autogrow");
-  if (props.readonly)
-    results.push("textarea--readonly");
-  if (props.error)
-    results.push("textarea--error", "state--error");
-  return results;
-});
-const charactersLength = computed(() => model.value ? model.value.length : "0");
-watch(() => props.autoGrow, (value) => {
-  if (value)
-    calculateRowHeight();
-  else
-    textarea.value.style.removeProperty("height");
-}, { flush: "post" });
-onMounted(() => {
-  if (props.autoGrow && textarea.value)
-    calculateRowHeight();
-});
-function calculateRowHeight() {
-  textarea.value.style.height = "auto";
-  textarea.value.style.height = `${textarea.value.scrollHeight}px`;
-}
-function handleInput() {
-  if (props.autoGrow)
-    calculateRowHeight();
-}
-</script>
-
-<style lang="postcss">
-.textarea {
-  @apply flex flex-auto relative;
-
-  &__input {
-    @apply p-3 rounded border border-solid border-subtlest hover:border-subtle focus:border-subtle placeholder:text-muted w-full outline-none text-default bg-default resize-none min-h-[46px] focus:ring-4 focus:ring-subtle/10 focus:z-1;
-    @apply dark:border-dark-subtlest hover:dark:border-dark-subtle focus:dark:border-dark-subtle placeholder:dark:text-dark-muted dark:text-dark-default dark:bg-dark-default focus:dark:ring-dark-subtle/10;
-
-    .textarea--readonly & {
-      @apply hover:border-subtlest focus:border-subtlest focus:ring-0 focus:z-0;
-      @apply hover:dark:border-dark-subtlest focus:dark:border-dark-subtlest;
-    }
-
-    .textarea--disabled & {
-      @apply bg-base border-subtle pointer-events-none text-muted;
-      @apply dark:bg-dark-base dark:border-dark-subtle dark:text-dark-muted;
-    }
-
-    .textarea--resize & {
-      @apply resize-y;
-    }
-
-    .textarea--autogrow & {
-      @apply overflow-hidden;
-    }
-
-    .state--error &,
-    .textarea--error & {
-      @apply border-danger-emphasis hover:border-danger-emphasis focus:ring-danger focus:border-danger-emphasis;
-      @apply dark:border-dark-danger-emphasis hover:dark:border-dark-danger-emphasis focus:dark:ring-dark-danger focus:dark:border-dark-danger-emphasis;
-    }
-  }
-
-  &__counter {
-    @apply text-right text-muted text-xs absolute bottom-1 right-1 pointer-events-none z-1;
-    @apply dark:text-dark-muted;
-  }
-}
-</style>

package/dist/components/textarea/Textarea.vue.d.ts

@@ -1,112 +0,0 @@
-import type { AcceptVariant } from '../input';
-import type { PropType } from 'vue-demi';
-declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    error: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    autoGrow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    resize: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showCounter: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    rows: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    maxlength: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    accept: {
-        type: PropType<AcceptVariant>;
-        default: undefined;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    input: (args_0: string) => void;
-    "update:modelValue": (args_0: string) => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    error: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    autoGrow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    resize: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showCounter: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    rows: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    maxlength: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    accept: {
-        type: PropType<AcceptVariant>;
-        default: undefined;
-    };
-}>> & Readonly<{
-    onInput?: ((args_0: string) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-}>, {
-    modelValue: string;
-    disabled: boolean;
-    error: boolean;
-    resize: boolean;
-    readonly: boolean;
-    accept: AcceptVariant;
-    placeholder: string;
-    maxlength: string | number;
-    showCounter: boolean;
-    rows: string | number;
-    autoGrow: boolean;
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/textarea/index.md

@@ -1,194 +0,0 @@
----
-title: Textarea · Components
-description: Base textarea form input.
----
-
-<script setup>
-  import pTextarea from './Textarea.vue'
-  import { ref } from 'vue-demi'
-
-  const result = ref()
-</script>
-
-# Textarea
-
-> Base textarea form input
-
-## Usage
-
-### Simple Usage
-
-<preview>
-  <p-textarea />
-</preview>
-
-```vue
-<template>
-  <p-textarea />
-</template>
-```
-
-## Placeholder
-
-<preview>
-  <p-textarea placeholder="Write something" />
-</preview>
-
-```vue
-<template>
-  <p-textarea placeholder="Write something" />
-</template>
-```
-
-## Disabled State
-<preview>
-  <p-textarea disabled />
-</preview>
-
-```vue
-<template>
-  <p-textarea disabled />
-</template>
-```
-
-## Readonly State
-<preview>
-  <p-textarea readonly />
-</preview>
-
-```vue
-<template>
-  <p-textarea readonly />
-</template>
-```
-
-## Error State
-<preview>
-  <p-textarea error />
-</preview>
-
-```vue
-<template>
-  <p-textarea error />
-</template>
-```
-
-## Resizeable
-Enable resize button via prop `resize`
-
-<preview>
-  <p-textarea resize />
-</preview>
-
-```vue
-<template>
-  <p-textarea resize />
-</template>
-```
-
-## Auto Grow
-
-Auto adjust textarea based on text height.
-
-<preview>
-  <p-textarea rows="1" auto-grow />
-</preview>
-
-```vue
-<template>
-  <p-textarea rows="1" auto-grow />
-</template>
-```
-
-## Counter
-
-Show character counter with prop `show-counter`
-
-<preview class="flex-col space-y-3">
-  <p-textarea show-counter />
-  <p-textarea show-counter maxlength="50" />
-</preview>
-
-```vue
-<template>
-  <p-textarea show-counter />
-  <p-textarea show-counter maxlength="50" />
-</template>
-```
-
-## Accept Character
-
-You can filter what characters are allowed to be input using the prop `accept`. The value can be RegExp, or using available preset.
-
-<preview class="flex-col space-y-4">
-  <p-textarea accept="0-9" placeholder="Numeric Only (Manual)" />
-  <p-textarea accept="numeric" placeholder="Numeric Only (using Preset)" />
-</preview>
-
-```vue
-<template>
-  <p-textarea accept="0-9" placeholder="Numeric Only (Manual)" />
-  <p-textarea accept="numeric" placeholder="Numeric Only (using Preset)" />
-</template>
-```
-
-👉 See [Available Preset](../input/#available-preset) for more information
-
-## Binding v-model
-
-Textarea value can be binding with `v-model`.
-
-<preview>
-  <p-textarea v-model="result" />
-</preview>
-
-**result:**
-
-<pre class="truncate"><code>{{ result || '-' }}</code></pre>
-
-```vue
-<template>
-  <p-textarea 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                         |
-| `autogrow`     | `Boolean` | `false` | Enable auto-resize                  |
-| `resize`       | `Boolean` | `false` | Enable resize                       |
-| `show-counter` | `Boolean` | `false` | Show character counter              |
-| `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/time/Time.vue

@@ -1,222 +0,0 @@
-<template>
-  <p-card
-    data-testid="time"
-    class="time"
-    element="div">
-    <div class="time__container">
-      <TimeItem
-        v-model="hour"
-        :options="hourOptions"
-        time-type="hour"
-        class="time__items--hour" />
-
-      <div class="time__separator">
-        {{ timeSeparator }}
-      </div>
-
-      <TimeItem
-        v-model="minute"
-        :options="minuteOptions"
-        time-type="minute"
-        class="time__items--minute" />
-
-      <TimeItem
-        v-if="is12Hour"
-        v-model="ampm"
-        :options="periodOptions"
-        time-type="ampm"
-        class="time__items--ampm" />
-    </div>
-    <template
-      v-if="$slots.default"
-      #footer>
-      <div class="time__action">
-        <slot :confirm="confirm" />
-      </div>
-    </template>
-  </p-card>
-</template>
-
-<script setup>
-import pCard from "../card/Card.vue";
-import TimeItem from "./TimeItem.vue";
-import {
-  watch,
-  computed,
-  nextTick,
-  onBeforeMount,
-  ref
-} from "vue-demi";
-import { watchDebounced } from "@vueuse/core";
-import { useVModel } from "../input";
-import {
-  format,
-  formatISO,
-  isDate,
-  parse,
-  startOfDay
-} from "date-fns";
-import {
-  getHourUnits,
-  getMinuteUnits,
-  parseTime,
-  validateInterval
-} from "./utils";
-const props = defineProps({
-  modelValue: {
-    type: [Date, Object],
-    default: void 0
-  },
-  timeSeparator: {
-    type: String,
-    default: ":"
-  },
-  is12Hour: {
-    type: Boolean,
-    default: false
-  },
-  hourInterval: {
-    type: Number,
-    default: 1,
-    validator: (value, prop) => {
-      return validateInterval("hour", value, prop.is12Hour);
-    }
-  },
-  minuteInterval: {
-    type: Number,
-    default: 1,
-    validator: (value) => {
-      return validateInterval("minute", value);
-    }
-  },
-  min: {
-    type: Date,
-    default: void 0
-  },
-  max: {
-    type: Date,
-    default: void 0
-  }
-});
-const emit = defineEmits(["update:modelValue", "context", "change"]);
-const model = useVModel(props);
-const localModel = ref(startOfDay(/* @__PURE__ */ new Date()));
-const hour = ref("00");
-const minute = ref("00");
-const ampm = ref("AM");
-const timeLabel = computed(() => {
-  const time = `${hour.value}:${minute.value}`;
-  return props.is12Hour ? `${time} ${ampm.value}` : time;
-});
-const timeFormat = computed(() => props.is12Hour ? "hh:mm a" : "HH:mm");
-const hourOptions = computed(() => {
-  return getHourUnits(localModel.value, props.is12Hour, props.hourInterval, props.min, props.max);
-});
-const minuteOptions = computed(() => {
-  return getMinuteUnits(localModel.value, Number(hour.value), props.minuteInterval, props.min, props.max);
-});
-const periodOptions = computed(() => {
-  return ["AM", "PM"];
-});
-watchDebounced([
-  hour,
-  minute,
-  ampm
-], () => {
-  const date = parse(timeLabel.value, timeFormat.value, localModel.value);
-  emit("change", getContext(date));
-}, { flush: "post", debounce: 300 });
-watch(model, init);
-onBeforeMount(init);
-function init() {
-  try {
-    if (!model.value)
-      return;
-    if (isDate(model.value)) {
-      localModel.value = new Date(model.value);
-      const { hh, mm, a } = parseTime(localModel.value, timeFormat.value);
-      assignTime(hh, mm, a);
-    } else {
-      const { hh, mm, a } = model.value;
-      assignTime(hh, mm, a);
-      localModel.value = parse(timeLabel.value, timeFormat.value, /* @__PURE__ */ new Date());
-      !props.is12Hour && a && console.warn("Please provide is12Hour props to parse time to 12 Hour Format");
-    }
-  } catch (error) {
-    console.warn(error);
-  }
-}
-function confirm() {
-  try {
-    localModel.value = parse(timeLabel.value, timeFormat.value, localModel.value);
-    model.value = isDate(model.value) ? new Date(localModel.value) : {
-      hh: hour.value,
-      mm: minute.value,
-      a: props.is12Hour ? ampm.value : void 0
-    };
-    emit("context", getContext(localModel.value));
-  } catch (error) {
-    console.warn(error);
-  }
-}
-async function assignTime(hh, mm, a) {
-  hour.value = hh ?? "00";
-  minute.value = mm ?? "00";
-  ampm.value = a ?? "AM";
-  await nextTick();
-}
-function getContext(date) {
-  return {
-    time: format(date, timeFormat.value),
-    date,
-    dateISO: formatISO(date)
-  };
-}
-</script>
-
-<style lang="postcss">
-.time {
-  --p-card-padding-x: 2rem;
-  --p-card-padding-y: 2rem;
-
-  @apply flex flex-col shadow-xl;
-  @apply max-w-[320px] overflow-hidden;
-
-  &.card {
-    @apply border-transparent dark:border-transparent;
-  }
-
-  &__container {
-    @apply flex items-center justify-center w-full min-h-[144px] space-x-2;
-  }
-
-  &__separator {
-    @apply px-2.5 py-3;
-  }
-
-  &__action {
-    @apply grid grid-flow-col auto-cols-fr;
-
-    &--cancel,
-    &--confirm {
-      @apply mx-2;
-    }
-  }
-
-  .card__body {
-    @apply pb-6;
-  }
-
-  .card__footer {
-    @apply pt-0;
-  }
-
-  .splide__track {
-    @apply px-2;
-  }
-
-  .dropdown__subitem & {
-    @apply shadow-none;
-  }
-}
-</style>