@privyid/persona 1.2.1 → 1.2.2-dev.1

package/dist/components/checkbox/Checkbox.vue

@@ -0,0 +1,213 @@
+<template>
+  <label
+    data-testid="checkbox"
+    class="checkbox"
+    :class="classNames"
+    @click.prevent="toggle">
+    <span class="checkbox__icon">
+      <!-- checked icon -->
+      <icon-inderteminate v-if="indeterminate" />
+      <icon-checkbox v-else />
+    </span>
+    <span class="checkbox__label">
+      <slot :is-checked="model" />
+    </span>
+    <input
+      type="checkbox"
+      :checked="model"
+      :name="name"
+      :disabled="disabled || readonly"
+      :value="value">
+  </label>
+</template>
+
+<script setup>
+import { useVModel } from ".";
+import { computed } from "vue";
+import IconCheckbox from "./icon/IconCheckbox.vue";
+import IconInderteminate from "./icon/IconInderteminate.vue";
+defineOptions({
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+});
+const props = defineProps({
+  name: {
+    type: String,
+    default: void 0
+  },
+  modelValue: {
+    type: void 0,
+    default: false
+  },
+  value: {
+    type: void 0,
+    default: true
+  },
+  uncheckedValue: {
+    type: void 0,
+    default: false
+  },
+  checked: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  indeterminate: {
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(["change", "update:modelValue"]);
+const model = useVModel(props);
+const classNames = computed(() => {
+  const result = [];
+  if (model.value)
+    result.push("checkbox--checked");
+  if (props.indeterminate)
+    result.push("checkbox--indeterminate");
+  if (props.disabled)
+    result.push("checkbox--disabled");
+  if (props.readonly)
+    result.push("checkbox--readonly");
+  return result;
+});
+function toggle() {
+  if (!props.readonly && !props.disabled) {
+    const value = !model.value;
+    model.value = value;
+    emit("change", value);
+  }
+}
+defineSlots();
+</script>
+
+<style lang="postcss">
+.checkbox {
+  @apply inline-flex space-x-2 relative cursor-pointer select-none items-baseline;
+
+  /**
+  * hide default appearance
+  * checkbox
+  */
+  > input[type="checkbox"] {
+    @apply appearance-none w-0 h-0 opacity-0 absolute;
+  }
+
+  /**
+  * replace default appearance
+  * with custom icon
+  */
+  &__icon {
+    @apply w-4 h-4 inline-flex shrink-0 border rounded-tn border-subtle 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;
+    }
+  }
+
+  /**
+  * active checkbox with
+  * wtf-you-want custom appearance
+  */
+  &[appearance="none"] {
+    &.checkbox {
+      &--checked {
+        .card {
+          @apply border-brand-accent;
+          @apply dark:border-dark-brand-accent;
+        }
+      }
+    }
+
+    > .checkbox__icon {
+      @apply hidden;
+    }
+
+    > .checkbox__label {
+      @apply ml-0;
+    }
+  }
+
+  /**
+  * give color of
+  * checkbox label
+  */
+  &__label {
+    @apply text-default;
+    @apply dark:text-dark-default;
+  }
+
+  /**
+  * checkbox checked
+  */
+  &--checked,
+  &--indeterminate {
+    .checkbox__icon {
+      @apply bg-brand-accent border-brand-accent;
+      @apply dark:bg-dark-brand-accent dark:border-dark-brand-accent;
+
+      > svg {
+        @apply fill-default;
+        @apply dark:fill-dark-inverse;
+      }
+    }
+  }
+
+  /**
+  * disable checkbox
+  */
+  &--disabled {
+    @apply opacity-50;
+
+    &:not(.checkbox--checked, .checkbox--indeterminate) {
+      .checkbox__icon {
+        @apply bg-base border-subtle;
+        @apply dark:bg-dark-base dark:border-dark-subtle;
+
+        > svg {
+          @apply fill-base;
+          @apply dark:fill-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];
+
+    .checkbox__label {
+      @apply ml-4;
+    }
+
+    &:hover,
+    &:focus-visible {
+      @apply bg-default-alpha;
+      @apply dark:bg-dark-default-alpha;
+    }
+  }
+}
+</style>

package/dist/components/checkbox/Checkbox.vue.d.ts

@@ -0,0 +1,105 @@
+import type { PropType, VNode } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default(props: {
+            isChecked: boolean;
+        }): VNode[];
+    }> & {
+        default(props: {
+            isChecked: boolean;
+        }): VNode[];
+    };
+    refs: {};
+    rootEl: HTMLLabelElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    value: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    uncheckedValue: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: unknown) => void;
+    change: (args_0: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    value: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    uncheckedValue: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+    onChange?: ((args_0: boolean) => any) | undefined;
+}>, {
+    value: any;
+    name: string;
+    modelValue: any;
+    disabled: boolean;
+    readonly: boolean;
+    checked: boolean;
+    uncheckedValue: any;
+    indeterminate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/checkbox/icon/IconCheckbox.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    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>
+</template>

package/dist/components/checkbox/icon/IconCheckbox.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/checkbox/icon/IconInderteminate.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 14 2"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <rect
+      width="14"
+      height="2" />
+  </svg>
+</template>

package/dist/components/checkbox/icon/IconInderteminate.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,7 @@
+import type { InputProps } from '../input';
+export interface CheckboxProps extends InputProps<unknown> {
+    checked: boolean;
+    value: unknown;
+    uncheckedValue: unknown;
+}
+export declare function useVModel(props: CheckboxProps): import("vue").Ref<boolean, boolean>;

package/dist/components/checkbox/index.mjs

@@ -0,0 +1,34 @@
+import { syncRef } from "@vueuse/shared";
+import {
+  computed,
+  getCurrentInstance,
+  ref
+} from "vue";
+import { valueIn, isEqual } from "../utils/value.mjs";
+function isChecked(modelValue, checked) {
+  if (Array.isArray(modelValue))
+    return valueIn(modelValue, checked);
+  return isEqual(modelValue, checked);
+}
+export function useVModel(props) {
+  const { emit } = getCurrentInstance();
+  const localValue = ref(isChecked(props.modelValue, props.value) || props.checked);
+  const model = computed({
+    get() {
+      return isChecked(props.modelValue, props.value) || props.checked;
+    },
+    set(value) {
+      const newValue = value ? props.value : props.uncheckedValue;
+      if (Array.isArray(props.modelValue)) {
+        if (value) {
+          if (!valueIn(props.modelValue, newValue))
+            emit("update:modelValue", [...props.modelValue, newValue]);
+        } else
+          emit("update:modelValue", props.modelValue.filter((old) => !isEqual(old, props.value)));
+      } else
+        emit("update:modelValue", newValue);
+    }
+  });
+  syncRef(localValue, model, { immediate: false });
+  return localValue;
+}

package/dist/components/collapse/Collapse.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-collapse
+    data-testid="collapse"
+    class="collapses"
+    :class="classNames"
+    :when="model || isToggleable">
+    <slot />
+  </v-collapse>
+</template>
+
+<script setup>
+import { computed, inject } from "vue";
+import { useVModel } from "../input";
+import { NAVBAR_SETTINGS } from "../navbar";
+import { useMediaQuery } from "@vueuse/core";
+import { Collapse as vCollapse } from "vue-collapsed";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  isNav: {
+    type: Boolean,
+    default: false
+  }
+});
+defineEmits(["update:modelValue"]);
+const model = useVModel(props);
+const context = inject(NAVBAR_SETTINGS, void 0, true);
+const lg = useMediaQuery("(min-width: 1024px)");
+const md = useMediaQuery("(min-width: 768px)");
+const sm = useMediaQuery("(min-width: 640px)");
+const isToggleable = computed(() => {
+  if (context?.toggleable?.value === "lg")
+    return lg.value;
+  if (context?.toggleable?.value === "md")
+    return md.value;
+  if (context?.toggleable?.value === "sm")
+    return sm.value;
+  return model.value;
+});
+const classNames = computed(() => {
+  const result = [""];
+  if (model.value)
+    result.push("collapse--show");
+  else
+    result.push("collapse--hide");
+  if (props.isNav)
+    result.push("navbar--collapse");
+  return result;
+});
+</script>
+
+<style lang="postcss">
+.collapses {
+  @apply transition-[height] duration-300 ease-out;
+}
+</style>

package/dist/components/collapse/Collapse.vue.d.ts

@@ -0,0 +1,42 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isNav: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isNav: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
+}>, {
+    modelValue: boolean;
+    isNav: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};