@privyid/persona 0.27.0 → 1.0.0-rc.2

package/dist/components/accordion/Accordion.vue

@@ -2,34 +2,38 @@
   <div
     :class="classNames"
     data-testid="accordion">
-    <slot>
-      <Item
-        v-for="(item, i) in items"
-        :key="i"
-        :title="item.title"
-        :disabled="item.disabled">
-        <div class="p-4">
-          {{ item.content }}
-        </div>
-      </Item>
-    </slot>
+    <AccordionItems
+      v-model="model"
+      :no-caret="noCaret"
+      :multiple="multiple">
+      <slot>
+        <Item
+          v-for="(item, i) in items"
+          :key="i"
+          :title="item.title"
+          :disabled="item.disabled">
+          <div class="p-4">
+            {{ item.content }}
+          </div>
+        </Item>
+      </slot>
+    </AccordionItems>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useVModel } from '@vueuse/core'
-import { type AccordionItem, ACCORDION_CONTEXT } from '.'
+import { useVModel } from '../input'
+import { type AccordionItem } from '.'
 import type { PropType } from 'vue-demi'
-import {
-  computed,
-  provide,
-  readonly,
-} from 'vue-demi'
+import { computed } from 'vue-demi'
 import Item from './AccordionItem.vue'
-
-defineOptions({ name: 'Accordion' })
+import AccordionItems from './AccordionItems.vue'
 
 const props = defineProps({
+  modelValue: {
+    type   : [Number, Array] as PropType<number | number[]>,
+    default: undefined,
+  },
   multiple: {
     type   : Boolean,
     default: false,
@@ -42,10 +46,6 @@ const props = defineProps({
     type   : Boolean,
     default: false,
   },
-  modelValue: {
-    type   : String,
-    default: undefined,
-  },
   noCaret: {
     type   : Boolean,
     default: false,
@@ -56,11 +56,11 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits<{
-  'update:modelValue': [string],
+defineEmits<{
+  'update:modelValue': [unknown],
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emit, { passive: true })
+const model = useVModel(props)
 
 const classNames = computed(() => {
   const result: string[] = ['accordion']
@@ -73,17 +73,6 @@ const classNames = computed(() => {
 
   return result
 })
-
-function setOpenItem (id: string): void {
-  modelValue.value = id
-}
-
-provide(ACCORDION_CONTEXT, {
-  openItem: readonly(modelValue),
-  multiple: props.multiple,
-  noCaret : props.noCaret,
-  setOpenItem,
-})
 </script>
 
 <style lang="postcss">

package/dist/components/accordion/AccordionItem.vue

@@ -2,8 +2,7 @@
   <div
     :class="classNames"
     data-testid="accordion-item"
-    :disabled="disabled"
-    :data-accordion-item-id="uid">
+    :disabled="disabled">
     <slot
       name="activator"
       :toggle="toggle"
@@ -16,7 +15,7 @@
           {{ title }}
         </Subheading>
         <slot
-          v-if="!hideCaret"
+          v-if="!noCaret"
           name="caret"
           :expanded="model">
           <ChevronUp
@@ -31,32 +30,26 @@
       </div>
     </slot>
 
-    <Collapse
-      :when="model"
+    <p-collapse
+      :model-value="model"
       class="accordion__item__content"
       data-testid="accordion-item-content">
       <slot :expanded="model" />
-    </Collapse>
+    </p-collapse>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useVModel } from '@vueuse/core'
-import { ACCORDION_CONTEXT, generateId } from '.'
-import {
-  computed,
-  inject,
-  watch,
-} from 'vue-demi'
+import { useVModel } from '../input'
+import type { VNode } from 'vue-demi'
+import { computed, watch } from 'vue-demi'
 
 import Subheading from '../subheading/Subheading.vue'
-import { Collapse } from 'vue-collapsed'
+import pCollapse from '../collapse/Collapse.vue'
 import ChevronUp from '@privyid/persona-icon/vue/chevron-up/16.vue'
 import ChevronDown from '@privyid/persona-icon/vue/chevron-down/16.vue'
 
-const uid = generateId(undefined, 'accordion-item')
-
-const parentData = inject(ACCORDION_CONTEXT)
+defineOptions({ name: 'AccordionItem' })
 
 const props = defineProps({
   modelValue: {
@@ -82,11 +75,7 @@ const emit  = defineEmits<{
   'collapse': [],
 }>()
 
-const model = useVModel(props, 'modelValue', emit, { passive: true })
-
-const hideCaret = computed(() => {
-  return props.noCaret || (parentData?.noCaret)
-})
+const model = useVModel(props)
 
 const classNames = computed(() => {
   const result: string[] = ['accordion__item']
@@ -103,32 +92,22 @@ const classNames = computed(() => {
 })
 
 function toggle () {
-  if (props.disabled)
-    return
-
-  model.value = !model.value
-
-  if (!model.value && !parentData?.multiple)
-    parentData?.setOpenItem('')
+  if (!props.disabled)
+    model.value = !model.value
 }
 
-watch(
-  () => parentData?.openItem.value,
-  () => {
-    model.value = parentData?.openItem.value === uid.value && !parentData?.multiple
-  },
-)
-watch(
-  () => model.value,
-  (value) => {
-    if (value && !parentData?.multiple) parentData?.setOpenItem(uid.value)
-
-    if (value)
-      emit('expand')
-    else
-      emit('collapse')
-  },
-)
+watch(model, (value) => {
+  if (value)
+    emit('expand')
+  else
+    emit('collapse')
+})
+
+defineSlots<{
+  'activator'(props: { toggle: () => void, expanded: boolean }): VNode[],
+  'caret'(props: { expanded: boolean }): VNode[],
+  'default'(props: { expanded: boolean }): VNode[],
+}>()
 </script>
 
 <style lang="postcss">
@@ -178,9 +157,5 @@ watch(
       @apply opacity-50;
     }
   }
-
-  &__content {
-    @apply transition-[height] duration-300 ease-out;
-  }
 }
 </style>

package/dist/components/accordion/AccordionItems.vue

@@ -0,0 +1,55 @@
+<script>
+import {
+  defineComponent,
+  h,
+  mergeProps
+} from "vue-demi";
+import { findAllChildren } from "../utils/vnode";
+import pAccordionItem from "./AccordionItem.vue";
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: [Number, Array],
+      default: void 0
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    noCaret: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { slots, emit }) {
+    function setValue(isExpand, i) {
+      if (props.multiple) {
+        const value = Array.isArray(props.modelValue) ? props.modelValue : [];
+        if (isExpand)
+          emit("update:modelValue", [...value, i]);
+        else
+          emit("update:modelValue", value.filter((x) => x !== i));
+      } else {
+        if (isExpand)
+          emit("update:modelValue", i);
+        else if (props.modelValue === i)
+          emit("update:modelValue");
+      }
+    }
+    return () => {
+      const items = findAllChildren(slots.default(), "AccordionItem");
+      return items.map((item, i) => {
+        const isExpand = props.multiple && Array.isArray(props.modelValue) ? props.modelValue.includes(i) : props.modelValue === i;
+        return h(pAccordionItem, mergeProps(item.props, {
+          "noCaret": item.props.noCaret ?? props.noCaret,
+          "modelValue": isExpand,
+          "onUpdate:modelValue": (value) => {
+            setValue(value, i);
+          }
+        }), item.children);
+      });
+    };
+  }
+});
+</script>

package/dist/components/accordion/AccordionItems.vue.d.ts

@@ -0,0 +1,41 @@
+/**
+ * TODO: Migrate this component to script setup after defineRender has been release
+ * https://github.com/vuejs/rfcs/discussions/585
+ */
+import type { PropType } from 'vue-demi';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: PropType<number | number[]>;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
+    [key: string]: any;
+}>[], unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<number | number[]>;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: number | number[];
+    multiple: boolean;
+    noCaret: boolean;
+}, {}>;
+export default _default;

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

@@ -1,14 +1,7 @@
-import { type ComputedRef, type MaybeRefOrGetter, type InjectionKey, type Ref } from 'vue';
 export interface AccordionItem {
     title: string;
     content: string;
     disabled?: boolean;
+    noCaret?: boolean;
 }
-export declare const ACCORDION_CONTEXT: InjectionKey<{
-    openItem: Readonly<Ref<string | undefined>>;
-    multiple: boolean;
-    noCaret: boolean;
-    setOpenItem: (id: string) => void;
-}>;
 export declare function defineAccordion(items: AccordionItem[]): AccordionItem[];
-export declare const generateId: (id?: MaybeRefOrGetter<string | undefined>, suffix?: string) => ComputedRef<string>;

package/dist/components/accordion/index.mjs

@@ -1,10 +1,3 @@
-import {
-  computed,
-  toValue
-} from "vue";
-export const ACCORDION_CONTEXT = Symbol("accordion");
 export function defineAccordion(items) {
   return items;
 }
-const getId = (suffix = "") => `${suffix}__${Math.random().toString().slice(2, 8)}`;
-export const generateId = (id, suffix) => computed(() => toValue(id) ?? getId(suffix));

package/dist/components/avatar/Avatar.vue

@@ -14,103 +14,117 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
+import type { PropType } from 'vue-demi'
 import {
   computed,
-  defineComponent,
   onMounted,
   ref,
-  watch
-} from "vue-demi";
+  watch,
+} from 'vue-demi'
 import {
   createAlias,
   createSpinner,
-  dummyAvatar
-} from "./utils/create-image";
-import loadImage from "./utils/load-image";
-export default defineComponent({
-  props: {
-    variant: {
-      type: String,
-      default: void 0
-    },
-    src: {
-      type: String,
-      default: void 0
-    },
-    fallbackSrc: {
-      type: String,
-      default: dummyAvatar()
-    },
-    name: {
-      type: String,
-      default: void 0
-    },
-    size: {
-      type: String,
-      default: "md"
-    },
-    imgClass: {
-      type: [
-        String,
-        Array,
-        Object
-      ],
-      default: void 0
-    }
+  dummyAvatar,
+} from './utils/create-image'
+import loadImage from './utils/load-image'
+import type { TypeVariant, SizeVariant } from '.'
+
+const props = defineProps({
+  variant: {
+    type   : String as PropType<TypeVariant>,
+    default: undefined,
   },
-  emits: ["imgloaded", "imgerror"],
-  setup(props, { emit }) {
-    const imageSrc = ref(createSpinner(50));
-    const classNames = computed(() => {
-      const result = ["avatar"];
-      if (props.size)
-        result.push(`avatar--${props.size}`);
-      return result;
-    });
-    const type = computed(() => {
-      if (props.variant)
-        return props.variant;
-      if (!props.src && props.name)
-        return "alias";
-      return "image";
-    });
-    function init() {
-      if (type.value === "alias")
-        loadAlias();
-      else
-        load();
-    }
-    function load() {
-      imageSrc.value = createSpinner(50);
-      loadImage(props.src).then(() => {
-        imageSrc.value = props.src;
-        emit("imgloaded", props.src);
-      }).catch((error) => {
-        imageSrc.value = props.fallbackSrc;
-        emit("imgerror", error);
-      });
-    }
-    function loadAlias() {
-      imageSrc.value = createAlias(props.name);
-    }
-    watch(() => [
-      props.src,
-      props.name,
-      props.variant
-    ], () => {
-      init();
-    });
-    onMounted(() => {
-      init();
-    });
-    return {
-      classNames,
-      type,
-      imageSrc
-    };
-  }
-});
+  src: {
+    type   : String,
+    default: undefined,
+  },
+  fallbackSrc: {
+    type   : String,
+    default: dummyAvatar(),
+  },
+  name: {
+    type   : String,
+    default: undefined,
+  },
+  size: {
+    type   : String as PropType<SizeVariant>,
+    default: 'md',
+  },
+  imgClass: {
+    type: [
+      String,
+      Array,
+      Object,
+    ],
+    default: undefined,
+  },
+})
+
+const emit = defineEmits<{
+  'imgloaded': [string],
+  'imgerror': [Error],
+}>()
+
+const imageSrc = ref(createSpinner(50))
+
+const classNames = computed(() => {
+  const result: string[] = ['avatar']
+
+  // eslint-disable-next-line unicorn/explicit-length-check
+  if (props.size)
+    result.push(`avatar--${props.size}`)
+
+  return result
+})
+
+const type = computed<TypeVariant>(() => {
+  if (props.variant)
+    return props.variant
+
+  if (!props.src && props.name)
+    return 'alias'
+
+  return 'image'
+})
+
+function init () {
+  if (type.value === 'alias')
+    loadAlias()
+  else
+    load()
+}
+
+function load () {
+  imageSrc.value = createSpinner(50)
+
+  loadImage(props.src)
+    .then(() => {
+      imageSrc.value = props.src
+
+      emit('imgloaded', props.src)
+    })
+    .catch((error) => {
+      imageSrc.value = props.fallbackSrc
+      emit('imgerror', error)
+    })
+}
+
+function loadAlias () {
+  imageSrc.value = createAlias(props.name)
+}
+
+watch(() => [
+  props.src,
+  props.name,
+  props.variant,
+], () => {
+  init()
+})
+
+onMounted(() => {
+  init()
+})
 </script>
 
 <style lang="postcss">

package/dist/components/badge/Badge.vue

@@ -6,34 +6,34 @@
   </span>
 </template>
 
-<script>
-import {
-  defineComponent,
-  computed
-} from "vue-demi";
-export default defineComponent({
-  props: {
-    color: {
-      type: String,
-      default: "default"
-    },
-    variant: {
-      type: String,
-      default: "default"
-    }
+<script lang="ts" setup>
+import type { PropType } from 'vue-demi'
+import { computed } from 'vue-demi'
+import type { StyleVariant } from '.'
+import type { ColorVariant } from '../button'
+
+const props = defineProps({
+  color: {
+    type   : String as PropType<ColorVariant>,
+    default: 'default',
   },
-  setup(props) {
-    const classNames = computed(() => {
-      const result = ["badge"];
-      if (props.color)
-        result.push(`badge--${props.color}`);
-      if (props.variant)
-        result.push(`badge--variant-${props.variant}`);
-      return result;
-    });
-    return { classNames };
-  }
-});
+  variant: {
+    type   : String as PropType<StyleVariant>,
+    default: 'default',
+  },
+})
+
+const classNames = computed(() => {
+  const result: string[] = ['badge']
+
+  if (props.color)
+    result.push(`badge--${props.color}`)
+
+  if (props.variant)
+    result.push(`badge--variant-${props.variant}`)
+
+  return result
+})
 </script>
 
 <style lang="postcss">
@@ -82,7 +82,7 @@ export default defineComponent({
 
         &:not([class^='text-'], [class*='text-']) {
           @apply text-state-emphasis;
-          @apply dark:text-dark-state-emphasis dark:text-dark-on-emphasis;
+          @apply dark:text-dark-on-emphasis;
         }
       }