@privyid/persona 1.1.2 → 1.2.0

package/dist/components/filterbar/pinned/PinnedToggle.vue.d.ts

@@ -6,15 +6,15 @@ declare const _default: import("vue-demi").DefineComponent<import("vue-demi").Ex
         required: true;
     };
     modelValue: {
-        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | ObjectConstructor | DateConstructor)[];
+        type: (StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor | NumberConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | ObjectConstructor | DateConstructor)[];
+        type: (StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor | NumberConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | ObjectConstructor | DateConstructor)[];
+        type: (StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor | NumberConstructor)[];
         default: boolean;
     };
     checked: {
@@ -24,21 +24,21 @@ declare const _default: import("vue-demi").DefineComponent<import("vue-demi").Ex
 }>, {
     model: import("vue-demi").Ref<boolean, boolean>;
     toggle: () => void;
-}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
     schema: {
         type: PropType<FilterToggle>;
         required: true;
     };
     modelValue: {
-        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | ObjectConstructor | DateConstructor)[];
+        type: (StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor | NumberConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | ObjectConstructor | DateConstructor)[];
+        type: (StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor | NumberConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | ObjectConstructor | DateConstructor)[];
+        type: (StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor | NumberConstructor)[];
         default: boolean;
     };
     checked: {
@@ -49,11 +49,172 @@ declare const _default: import("vue-demi").DefineComponent<import("vue-demi").Ex
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    value: string | number | boolean | Date | Record<string, any> | unknown[];
-    modelValue: string | number | boolean | Date | Record<string, any> | unknown[];
+    value: string | number | boolean | Date | unknown[] | Record<string, any>;
+    modelValue: string | number | boolean | Date | unknown[] | Record<string, any>;
     checked: boolean;
-    uncheckedValue: string | number | boolean | Date | Record<string, any> | unknown[];
+    uncheckedValue: string | number | boolean | Date | unknown[] | Record<string, any>;
 }, {}, {
-    Button: any;
+    Button: {
+        new (...args: any[]): import("vue-demi").CreateComponentPublicInstanceWithMixins<Readonly<import("vue-demi").ExtractPropTypes<{
+            variant: {
+                type: PropType<import("../../button").StyleVariant>;
+                default: string;
+            };
+            color: {
+                type: PropType<import("../../button").ColorVariant>;
+                default: string;
+            };
+            size: {
+                type: PropType<import("../../button").SizeVariant>;
+                default: string;
+            };
+            icon: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            pill: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            href: {
+                type: PropType<import("vue-router").RouteLocationRaw>;
+                default: undefined;
+            };
+            type: {
+                type: PropType<import("../../button").TypeVariant>;
+                default: string;
+            };
+            disabled: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            loading: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & Readonly<{}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, import("vue-demi").PublicProps, {
+            size: import("../../button").SizeVariant;
+            type: import("../../button").TypeVariant;
+            disabled: boolean;
+            icon: boolean;
+            pill: boolean;
+            variant: import("../../button").StyleVariant;
+            color: import("../../button").ColorVariant;
+            href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+            loading: boolean;
+        }, true, {}, {}, import("vue").GlobalComponents, import("vue-demi").GlobalDirectives, string, {}, any, import("vue-demi").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("vue-demi").ExtractPropTypes<{
+            variant: {
+                type: PropType<import("../../button").StyleVariant>;
+                default: string;
+            };
+            color: {
+                type: PropType<import("../../button").ColorVariant>;
+                default: string;
+            };
+            size: {
+                type: PropType<import("../../button").SizeVariant>;
+                default: string;
+            };
+            icon: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            pill: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            href: {
+                type: PropType<import("vue-router").RouteLocationRaw>;
+                default: undefined;
+            };
+            type: {
+                type: PropType<import("../../button").TypeVariant>;
+                default: string;
+            };
+            disabled: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            loading: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & Readonly<{}>, {}, {}, {}, {}, {
+            size: import("../../button").SizeVariant;
+            type: import("../../button").TypeVariant;
+            disabled: boolean;
+            icon: boolean;
+            pill: boolean;
+            variant: import("../../button").StyleVariant;
+            color: import("../../button").ColorVariant;
+            href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+            loading: boolean;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue-demi").ComponentOptionsBase<Readonly<import("vue-demi").ExtractPropTypes<{
+        variant: {
+            type: PropType<import("../../button").StyleVariant>;
+            default: string;
+        };
+        color: {
+            type: PropType<import("../../button").ColorVariant>;
+            default: string;
+        };
+        size: {
+            type: PropType<import("../../button").SizeVariant>;
+            default: string;
+        };
+        icon: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        pill: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        href: {
+            type: PropType<import("vue-router").RouteLocationRaw>;
+            default: undefined;
+        };
+        type: {
+            type: PropType<import("../../button").TypeVariant>;
+            default: string;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        loading: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, {
+        size: import("../../button").SizeVariant;
+        type: import("../../button").TypeVariant;
+        disabled: boolean;
+        icon: boolean;
+        pill: boolean;
+        variant: import("../../button").StyleVariant;
+        color: import("../../button").ColorVariant;
+        href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+        loading: boolean;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue-demi").GlobalDirectives, string, import("vue-demi").ComponentProvideOptions> & import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps & (new () => {
+        $slots: Readonly<{
+            loading(): import("vue-demi").VNode[];
+            default(): import("vue-demi").VNode[];
+        }> & {
+            loading(): import("vue-demi").VNode[];
+            default(): import("vue-demi").VNode[];
+        };
+    });
 }, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/form-group/FormGroup.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/form-group/FormGroup.spec.mjs

@@ -0,0 +1,127 @@
+import { render } from "@testing-library/vue";
+import pFormGroup from "./FormGroup.vue";
+import { ref, nextTick } from "vue-demi";
+it("should mounted properly", () => {
+  const screen = render({
+    components: { pFormGroup },
+    template: "<p-form-group />"
+  });
+  const formGroup = screen.queryByTestId("form-group");
+  expect(formGroup).toBeInTheDocument();
+});
+it("should able to show label", () => {
+  const screen = render({
+    components: { pFormGroup },
+    template: '<p-form-group label="Lorem Ipsum" />'
+  });
+  const label = screen.queryByTestId("form-group-label");
+  expect(label).toBeInTheDocument();
+  expect(label).toHaveTextContent("Lorem Ipsum");
+});
+it("should able to show caption if prop `caption` was provided", () => {
+  const screen = render({
+    components: { pFormGroup },
+    template: `
+      <p-form-group
+        label="Lorem Ipsum"
+        caption="This is caption"
+      />
+    `
+  });
+  const caption = screen.queryByTestId("form-group-caption");
+  expect(caption).toBeInTheDocument();
+  expect(caption).toHaveTextContent("This is caption");
+});
+it("should able to show description if prop `description` was provided", () => {
+  const screen = render({
+    components: { pFormGroup },
+    template: `
+      <p-form-group
+        label="Lorem Ipsum"
+        description="This is description"
+      />
+    `
+  });
+  const description = screen.queryByTestId("form-group-description");
+  expect(description).toBeInTheDocument();
+  expect(description).toHaveTextContent("This is description");
+});
+it("should able to show hint icon if prop `hint` was provided", () => {
+  const screen = render({
+    components: { pFormGroup },
+    template: `
+      <p-form-group
+        label="Lorem Ipsum"
+        hint="This is tooltip hint"
+      />
+    `
+  });
+  const hint = screen.queryByTestId("form-group-hint");
+  expect(hint).toBeInTheDocument();
+});
+it("should able to show required badge if prop `required` was provided", () => {
+  const screen = render({
+    components: { pFormGroup },
+    template: `
+      <p-form-group
+        label="Lorem Ipsum"
+        required
+      />
+    `
+  });
+  const required = screen.queryByTestId("form-group-required");
+  expect(required).toBeInTheDocument();
+});
+it("should able to show error if prop `error` was provided, and replacing the description", () => {
+  const screen = render({
+    components: { pFormGroup },
+    template: `
+      <p-form-group
+        label="Lorem Ipsum"
+        error="Error, fix this please"
+        description="This is description"
+      />
+    `
+  });
+  const error = screen.queryByTestId("form-group-error");
+  const description = screen.queryByTestId("form-group-description");
+  expect(error).toBeInTheDocument();
+  expect(error).toHaveTextContent("Error, fix this please");
+  expect(description).not.toBeInTheDocument();
+});
+it("should render with horizontal layout if prop `horizontal` was provided", () => {
+  const screen = render({
+    components: { pFormGroup },
+    template: `
+      <p-form-group
+        label="Lorem Ipsum"
+        horizontal
+      />
+    `
+  });
+  const formGroup = screen.queryByTestId("form-group");
+  expect(formGroup).toBeInTheDocument();
+  expect(formGroup).toHaveClass("form-group--horizontal");
+});
+it("should able to show error icon if prop `error-icon` was provided and prop `error` provided too", async () => {
+  const errMsg = ref("Please fill this field");
+  const screen = render({
+    components: { pFormGroup },
+    template: `
+      <p-form-group
+        label="Lorem Ipsum"
+        description="This is description"
+        :error="errMsg"
+        error-icon
+      />
+    `,
+    setup() {
+      return { errMsg };
+    }
+  });
+  const errorIcon = screen.queryByTestId("form-group-error-icon");
+  expect(errorIcon).toBeInTheDocument();
+  errMsg.value = "";
+  await nextTick();
+  expect(errorIcon).not.toBeInTheDocument();
+});

package/dist/components/form-group/FormGroup.vue

@@ -60,69 +60,55 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import IconInfo from '@privyid/persona-icon/vue/information-circle-solid/20.vue'
-import pCaption from '../caption/Caption.vue'
-import { vPMd } from '../markdown/'
-import { vPTooltip } from '../tooltip'
-import type { VNode } from 'vue-demi'
-import { computed } from 'vue-demi'
-
+<script setup>
+import IconInfo from "@privyid/persona-icon/vue/information-circle-solid/20.vue";
+import pCaption from "../caption/Caption.vue";
+import { vPMd } from "../markdown/";
+import { vPTooltip } from "../tooltip";
+import { computed } from "vue-demi";
 const props = defineProps({
   required: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   label: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   caption: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   description: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   hint: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   error: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   horizontal: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   errorIcon: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
+    type: Boolean,
+    default: false
+  }
+});
 const classNames = computed(() => {
-  const result: string[] = []
-
+  const result = [];
   if (props.error)
-    result.push('form-group--error', 'state--error')
-
+    result.push("form-group--error", "state--error");
   if (props.horizontal)
-    result.push('form-group--horizontal')
-
-  return result
-})
-
-defineSlots<{
-  'hint'(): VNode[],
-  'label'(): VNode[],
-  'caption'(): VNode[],
-  'error-icon'(): VNode[],
-  'error'(): VNode[],
-  'description'(): VNode[],
-}>()
+    result.push("form-group--horizontal");
+  return result;
+});
+defineSlots();
 </script>
 
 <style lang="postcss">

package/dist/components/form-group/FormGroup.vue.d.ts

@@ -0,0 +1,105 @@
+import type { VNode } from 'vue-demi';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        hint(): VNode[];
+        label(): VNode[];
+        caption(): VNode[];
+        'error-icon'(): VNode[];
+        error(): VNode[];
+        description(): VNode[];
+    }> & {
+        hint(): VNode[];
+        label(): VNode[];
+        caption(): VNode[];
+        'error-icon'(): VNode[];
+        error(): VNode[];
+        description(): VNode[];
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    caption: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    hint: {
+        type: StringConstructor;
+        default: string;
+    };
+    error: {
+        type: StringConstructor;
+        default: string;
+    };
+    horizontal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    errorIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    caption: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    hint: {
+        type: StringConstructor;
+        default: string;
+    };
+    error: {
+        type: StringConstructor;
+        default: string;
+    };
+    horizontal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    errorIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    caption: string;
+    label: string;
+    required: boolean;
+    error: string;
+    description: string;
+    hint: string;
+    horizontal: boolean;
+    errorIcon: boolean;
+}, {}, {}, {}, string, import("vue-demi").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;
+    };
+};