@privyid/persona 0.3.0

package/dist/components/radio/Radio.vue

@@ -0,0 +1,194 @@
+<template>
+  <label
+    data-testid="radio"
+    class="radio"
+    :class="classNames"
+    @click.prevent="toggle">
+    <input
+      type="radio"
+      :value="model"
+      :name="name"
+      :disabled="disabled || readonly">
+    <span class="radio__icon">
+      <IconCheck v-if="apperance === 'option'" />
+      <svg
+        v-else-if="apperance === '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"
+          fill="white" />
+      </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.25"
+          fill="white" />
+      </svg>
+    </span>
+    <span class="radio__label">
+      <slot />
+    </span>
+  </label>
+</template>
+
+<script>
+import { useVModel } from "./use-radio";
+import IconCheck from "@carbon/icons-vue/lib/checkmark--filled/16";
+import {
+  computed,
+  defineComponent
+} from "vue-demi";
+export default defineComponent({
+  components: { IconCheck },
+  props: {
+    name: {
+      type: String,
+      default: ""
+    },
+    modelValue: {
+      type: [
+        String,
+        Number,
+        Boolean,
+        Array,
+        Object,
+        Date
+      ],
+      default: false
+    },
+    value: {
+      type: [
+        String,
+        Number,
+        Boolean,
+        Array,
+        Object,
+        Date
+      ],
+      default: true
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    apperance: {
+      type: String,
+      default: "radio"
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props) {
+    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.apperance)
+        result.push(`radio--${props.apperance}`);
+      return result;
+    });
+    function toggle() {
+      if (!props.disabled && !props.readonly)
+        model.value = true;
+    }
+    return {
+      model,
+      classNames,
+      toggle
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.radio {
+  @apply inline-flex gap-2 relative cursor-pointer select-none items-baseline;
+
+  & > input[type="radio"] {
+    @apply appearance-none w-0 h-0 opacity-0 absolute;
+  }
+
+  &__icon {
+    @apply w-5 h-5 border rounded-full border-secondary-25 inline-flex items-center justify-center bg-white;
+
+    & > svg {
+      @apply w-3;
+    }
+  }
+
+  &--disabled {
+    @apply opacity-50;
+  }
+
+  &--checked {
+    .radio__icon {
+      @apply bg-primary-100 border-primary-100;
+    }
+  }
+
+  &--checkbox {
+    .radio__icon {
+      @apply rounded-tn;
+    }
+  }
+
+  &--option {
+    .radio__icon {
+      @apply order-2 border-none invisible bg-transparent;
+
+      & > svg {
+        @apply w-4;
+      }
+    }
+
+    .radio__label {
+      @apply flex-grow;
+    }
+
+    &.radio--checked {
+      .radio__icon {
+        @apply text-primary-100 visible;
+      }
+    }
+  }
+
+  .dropdown__menu & {
+    @apply px-3 py-2 cursor-pointer text-body-100 w-full select-none text-left;
+
+    &:hover,
+    &:focus-visible {
+      @apply bg-background-75;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,81 @@
+import { PropType } from 'vue-demi';
+export interface ChangedInteface {
+    value: any;
+    state: boolean;
+}
+declare type ApperanceType = 'radio' | 'checkbox' | 'option';
+declare const _default: import("vue-demi").DefineComponent<{
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    value: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    apperance: {
+        type: PropType<ApperanceType>;
+        default: string;
+    };
+}, {
+    model: import("vue-demi").WritableComputedRef<boolean>;
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    toggle: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    value: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    apperance: {
+        type: PropType<ApperanceType>;
+        default: string;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    name: string;
+    value: string | number | boolean | unknown[] | Record<string, any> | Date;
+    disabled: boolean;
+    modelValue: string | number | boolean | unknown[] | Record<string, any> | Date;
+    readonly: boolean;
+    checked: boolean;
+    apperance: ApperanceType;
+}>;
+export default _default;

package/dist/components/radio/use-radio.d.ts

@@ -0,0 +1,3 @@
+import type { CheckboxProps } from '../checkbox/use-checkbox';
+export declare type RadioProps = Omit<CheckboxProps, 'uncheckedValue'>;
+export declare function useVModel(props: RadioProps): import("vue-demi").WritableComputedRef<boolean>;

package/dist/components/radio/use-radio.mjs

@@ -0,0 +1,17 @@
+import { computed, getCurrentInstance } from "vue-demi";
+import { isEqual } from "../utils/value.mjs";
+export function useVModel(props) {
+  const { emit } = getCurrentInstance();
+  const checked = props.value;
+  const model = computed({
+    get() {
+      return isEqual(props.modelValue, checked) || props.checked;
+    },
+    set(value) {
+      emit("change", value);
+      if (value)
+        emit("update:modelValue", checked);
+    }
+  });
+  return model;
+}

package/dist/components/select/Select.vue

@@ -0,0 +1,282 @@
+<template>
+  <Dropdown
+    v-model="isOpen"
+    class="select"
+    data-testid="select"
+    aria-label="select"
+    :disabled="disabled"
+    :class="classNames">
+    <template #activator>
+      <Input
+        v-model="search"
+        data-testid="select-search"
+        class="select__search"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        @focus="onFocus" />
+      <IconArrow class="select__caret" />
+    </template>
+
+    <template v-if="!isLoading && items.length === 0">
+      <div
+        data-testid="select-no-data"
+        class="select__empty">
+        <slot name="empty">
+          {{ emptyText }}
+        </slot>
+      </div>
+    </template>
+
+    <template v-else>
+      <DropdownItem
+        v-for="(item, i) in items"
+        :key="i"
+        data-testid="select-item"
+        :class="{ selected: isSelected(item) }"
+        @click="select(item)">
+        <div class="select__option">
+          <div class="select__option-text">
+            <slot
+              name="option"
+              :is-selected="isSelected(item)"
+              :item="item">
+              {{ item.text }}
+            </slot>
+          </div>
+          <IconCheck
+            class="select__option-checked" />
+        </div>
+      </DropdownItem>
+    </template>
+
+    <template v-if="isLoading">
+      <div
+        data-testid="select-loading"
+        class="select__loading">
+        <IconLoading
+          width="14"
+          height="14" />
+        <slot name="loading">
+          {{ loadingText }}
+        </slot>
+      </div>
+    </template>
+  </Dropdown>
+</template>
+
+<script>
+import Dropdown from "../dropdown/Dropdown.vue";
+import DropdownItem from "../dropdown/DropdownItem.vue";
+import Input from "../input/Input.vue";
+import IconArrow from "@carbon/icons-vue/lib/chevron--down/16";
+import IconCheck from "@carbon/icons-vue/lib/checkmark--filled/16";
+import IconLoading from "../spinner/SpinnerRing.vue";
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  ref,
+  watch
+} from "vue-demi";
+import BasicAdapter from "./adapter/basic-adapter";
+import useLoading from "../overlay/utils/use-loading";
+import { isEqual } from "../utils/value";
+import { tryOnMounted } from "@vueuse/shared";
+import { onStartTyping } from "@vueuse/core";
+export default defineComponent({
+  components: {
+    Dropdown,
+    DropdownItem,
+    Input,
+    IconArrow,
+    IconCheck,
+    IconLoading
+  },
+  props: {
+    modelValue: {
+      type: [
+        String,
+        Number,
+        Boolean,
+        Array,
+        Object,
+        Date
+      ],
+      default: ""
+    },
+    selected: {
+      type: Object,
+      default: () => {
+        return {
+          text: "",
+          value: void 0
+        };
+      }
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    emptyText: {
+      type: String,
+      default: "No Data"
+    },
+    loadingText: {
+      type: String,
+      default: "Loading..."
+    },
+    adapter: {
+      type: Object,
+      default: () => BasicAdapter
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: [
+    "change",
+    "update:modelValue",
+    "update:selected",
+    "userInput"
+  ],
+  setup(props, { emit }) {
+    const vm = getCurrentInstance();
+    const input = ref();
+    const keyword = ref("");
+    const isOpen = ref(false);
+    const isLoading = useLoading({ elapsed: false });
+    const context = {
+      props,
+      keyword,
+      isOpen,
+      isLoading
+    };
+    const items = props.adapter.setup(context);
+    const model = computed({
+      get() {
+        return items.value.find((item) => isEqual(item.value, props.modelValue)) ?? {
+          text: "",
+          value: void 0
+        };
+      },
+      set(selected) {
+        emit("change", selected);
+        emit("update:modelValue", selected.value);
+        emit("update:selected", selected);
+        if (isOpen.value)
+          emit("userInput", selected);
+      }
+    });
+    const classNames = computed(() => {
+      const result = [];
+      if (isOpen.value)
+        result.push("select--open");
+      if (props.disabled)
+        result.push("select--disabled");
+      if (props.readonly)
+        result.push("select--readonly");
+      return result;
+    });
+    const search = computed({
+      get() {
+        return isOpen.value ? keyword.value : model.value?.text;
+      },
+      set(value) {
+        if (value !== search.value)
+          keyword.value = value;
+      }
+    });
+    function select(item) {
+      model.value = item;
+    }
+    function onFocus() {
+      if (!props.disabled && !props.readonly)
+        isOpen.value = true;
+    }
+    function isSelected(item) {
+      return isEqual(item.value, model.value.value);
+    }
+    watch(isOpen, (value) => {
+      if (!value)
+        keyword.value = "";
+    }, { flush: "post" });
+    onStartTyping(() => {
+      if (isOpen.value && input.value && input.value !== document.activeElement)
+        input.value.focus();
+    });
+    tryOnMounted(() => {
+      if (vm?.proxy?.$el) {
+        input.value = vm.proxy.$el.querySelector(".select__search");
+      }
+    });
+    return {
+      classNames,
+      model,
+      isOpen,
+      isLoading,
+      search,
+      items,
+      select,
+      onFocus,
+      isSelected
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.select {
+  &__search {
+    @apply pr-8 truncate;
+  }
+
+  &__caret {
+    @apply absolute right-3 top-0 bottom-0 my-auto transition-transform duration-150 text-secondary-75 pointer-events-none;
+  }
+
+  &__option {
+    @apply flex items-center justify-between;
+
+    &-text {
+      @apply flex-grow truncate;
+    }
+
+    &-checked {
+      @apply flex-shrink-0 text-primary-100 invisible;
+
+      .selected & {
+        @apply visible;
+      }
+    }
+  }
+
+  &__empty,
+  &__loading {
+    @apply px-3 py-2 text-body-100 text-center;
+  }
+
+  &__loading {
+    @apply flex justify-center items-center gap-2;
+  }
+
+  &--open {
+    .select__caret {
+      @apply rotate-180;
+    }
+  }
+}
+</style>

package/dist/components/select/Select.vue.d.ts

@@ -0,0 +1,110 @@
+import { PropType } from 'vue-demi';
+import { SelectItem } from './use-select';
+import { Adapter } from './adapter/adapter';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        default: string;
+    };
+    selected: {
+        type: PropType<SelectItem>;
+        default: () => {
+            text: string;
+            value: any;
+        };
+    };
+    options: {
+        type: PropType<string[] | SelectItem[]>;
+        default: () => any[];
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    emptyText: {
+        type: StringConstructor;
+        default: string;
+    };
+    loadingText: {
+        type: StringConstructor;
+        default: string;
+    };
+    adapter: {
+        type: PropType<Adapter>;
+        default: () => Adapter;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    model: import("vue-demi").WritableComputedRef<SelectItem>;
+    isOpen: import("vue-demi").Ref<boolean>;
+    isLoading: import("vue-demi").WritableComputedRef<boolean>;
+    search: import("vue-demi").WritableComputedRef<string>;
+    items: import("vue-demi").Ref<SelectItem[]>;
+    select: (item: SelectItem) => void;
+    onFocus: () => void;
+    isSelected: (item: SelectItem) => boolean;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:selected" | "userInput")[], "change" | "update:modelValue" | "update:selected" | "userInput", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        default: string;
+    };
+    selected: {
+        type: PropType<SelectItem>;
+        default: () => {
+            text: string;
+            value: any;
+        };
+    };
+    options: {
+        type: PropType<string[] | SelectItem[]>;
+        default: () => any[];
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    emptyText: {
+        type: StringConstructor;
+        default: string;
+    };
+    loadingText: {
+        type: StringConstructor;
+        default: string;
+    };
+    adapter: {
+        type: PropType<Adapter>;
+        default: () => Adapter;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+    "onUpdate:selected"?: (...args: any[]) => any;
+    onUserInput?: (...args: any[]) => any;
+}, {
+    disabled: boolean;
+    modelValue: string | number | boolean | unknown[] | Record<string, any> | Date;
+    readonly: boolean;
+    options: string[] | SelectItem[];
+    placeholder: string;
+    selected: SelectItem;
+    adapter: Adapter;
+    emptyText: string;
+    loadingText: string;
+}>;
+export default _default;

package/dist/components/select/adapter/adapter.d.ts

@@ -0,0 +1,16 @@
+import { Ref } from 'vue-demi';
+import { SelectItem, SelectProps } from '../use-select';
+export interface AdapterContext {
+    props: SelectProps;
+    keyword: Ref<string>;
+    isOpen: Ref<boolean>;
+    isLoading: Ref<boolean>;
+}
+export interface Adapter {
+    setup: (context: AdapterContext) => Ref<SelectItem[]>;
+}
+/**
+ * normalizing props.options to SelectItem[]
+ */
+export declare function useOptionsProp(props: Pick<SelectProps, 'options'>): import("vue-demi").ComputedRef<SelectItem[]>;
+export declare function defineAdapter(adapter: Adapter): Adapter;