@privyid/persona 1.1.2 → 1.2.1

package/dist/components/checkbox/Checkbox.vue

@@ -1,232 +0,0 @@
-<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 lang="ts" setup>
-import { useVModel } from '.'
-import type { PropType, VNode } from 'vue-demi'
-import { computed } from 'vue-demi'
-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: undefined,
-  },
-  modelValue: {
-    type   : undefined as PropType<any>,
-    default: false,
-  },
-  value: {
-    type   : undefined as PropType<any>,
-    default: true,
-  },
-  uncheckedValue: {
-    type   : undefined as PropType<any>,
-    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': [boolean],
-  'update:modelValue': [unknown],
-}>()
-
-const model = useVModel(props)
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  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<{
-  'default'(props: { isChecked: boolean }): VNode[],
-}>()
-</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/icon/IconCheckbox.vue

@@ -1,13 +0,0 @@
-<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/IconInderteminate.vue

@@ -1,12 +0,0 @@
-<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/index.d.ts

@@ -1,7 +0,0 @@
-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-demi").Ref<boolean, boolean>;

package/dist/components/checkbox/index.mjs

@@ -1,34 +0,0 @@
-import { syncRef } from "@vueuse/shared";
-import {
-  computed,
-  getCurrentInstance,
-  ref
-} from "vue-demi";
-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

@@ -1,71 +0,0 @@
-<template>
-  <v-collapse
-    data-testid="collapse"
-    class="collapses"
-    :class="classNames"
-    :when="model || isToggleable">
-    <slot />
-  </v-collapse>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject } from 'vue-demi'
-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': [boolean],
-}>()
-
-const model   = useVModel(props)
-const context = inject(NAVBAR_SETTINGS, undefined, 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: string[] = ['']
-
-  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>