@privyid/persona 1.1.1 → 1.2.0

package/dist/components/button/Button.vue

@@ -15,110 +15,79 @@
   </component>
 </template>
 
-<script lang="ts" setup>
-import type {
-  PropType,
-  VNode,
-} from 'vue-demi'
+<script setup>
 import {
   computed,
   inject,
-  resolveComponent,
-} from 'vue-demi'
-import type { RouteLocationRaw } from 'vue-router'
-import type {
-  ColorVariant,
-  SizeVariant,
-  StyleVariant,
-  TypeVariant,
-} from '.'
-import { BUTTONGROUP_SETTING } from '../button-group'
-import { INPUTGROUP_SETTING } from '../input-group'
-import Spinner from '../spinner/SpinnerRinggo.vue'
-
+  resolveComponent
+} from "vue-demi";
+import { BUTTONGROUP_SETTING } from "../button-group";
+import { INPUTGROUP_SETTING } from "../input-group";
+import Spinner from "../spinner/SpinnerRinggo.vue";
 const props = defineProps({
   variant: {
-    type   : String as PropType<StyleVariant>,
-    default: 'solid',
+    type: String,
+    default: "solid"
   },
   color: {
-    type   : String as PropType<ColorVariant>,
-    default: 'default',
+    type: String,
+    default: "default"
   },
   size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
+    type: String,
+    default: "md"
   },
   icon: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   pill: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   href: {
-    type   : [String, Object] as PropType<RouteLocationRaw>,
-    default: undefined,
+    type: [String, Object],
+    default: void 0
   },
   type: {
-    type   : String as PropType<TypeVariant>,
-    default: 'button',
+    type: String,
+    default: "button"
   },
   disabled: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   loading: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const inputSetting  = inject(INPUTGROUP_SETTING, undefined, false)
-const buttonSetting = inject(BUTTONGROUP_SETTING, undefined, false)
-
+    type: Boolean,
+    default: false
+  }
+});
+const inputSetting = inject(INPUTGROUP_SETTING, void 0, false);
+const buttonSetting = inject(BUTTONGROUP_SETTING, void 0, false);
 const classNames = computed(() => {
-  const result: string[] = ['btn']
-
+  const result = ["btn"];
   if (props.color)
-    result.push(`btn--${props.color}`)
-
+    result.push(`btn--${props.color}`);
   if (props.variant)
-    result.push(`btn--variant-${props.variant}`)
-
+    result.push(`btn--variant-${props.variant}`);
   if (props.loading)
-    result.push('btn--loading')
-
-  // eslint-disable-next-line unicorn/explicit-length-check
+    result.push("btn--loading");
   if (inputSetting?.size?.value)
-    result.push(`btn--${inputSetting?.size.value}`)
-  // eslint-disable-next-line unicorn/explicit-length-check
+    result.push(`btn--${inputSetting?.size.value}`);
   else if (buttonSetting?.size?.value)
-    result.push(`btn--${buttonSetting?.size.value}`)
-  // eslint-disable-next-line unicorn/explicit-length-check
+    result.push(`btn--${buttonSetting?.size.value}`);
   else if (props.size)
-    result.push(`btn--${props.size}`)
-
+    result.push(`btn--${props.size}`);
   if (props.icon)
-    result.push('btn--icon')
-
+    result.push("btn--icon");
   if (props.pill)
-    result.push('btn--pill')
-
-  return result
-})
-
+    result.push("btn--pill");
+  return result;
+});
 const tagName = computed(() => {
-  return props.href
-    ? resolveComponent('nuxt-link')
-    : 'button'
-})
-
-defineSlots<{
-  loading(): VNode[],
-  default(): VNode[],
-}>()
+  return props.href ? resolveComponent("nuxt-link") : "button";
+});
+defineSlots();
 </script>
 
 <style lang="postcss">

package/dist/components/button/Button.vue.d.ts

@@ -0,0 +1,108 @@
+import type { PropType, VNode } from 'vue-demi';
+import type { RouteLocationRaw } from 'vue-router';
+import type { ColorVariant, SizeVariant, StyleVariant, TypeVariant } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        loading(): VNode[];
+        default(): VNode[];
+    }> & {
+        loading(): VNode[];
+        default(): VNode[];
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    icon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    href: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    icon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    href: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    size: SizeVariant;
+    type: TypeVariant;
+    disabled: boolean;
+    icon: boolean;
+    pill: boolean;
+    variant: StyleVariant;
+    color: ColorVariant;
+    href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+    loading: 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;
+    };
+};

package/dist/components/button/index.md

@@ -0,0 +1,337 @@
+---
+title: Button · Components
+description: Base button component
+---
+
+<script setup>
+  import pButton from './Button.vue'
+  import pBanner from '../banner/Banner.vue'
+  import IconPersona from '@privyid/persona-icon/vue/persona/20.vue'
+</script>
+
+# Button
+
+> Base button component
+
+## Usage
+
+### Simple Button
+
+<preview>
+  <p-button>Click me</p-button>
+</preview>
+
+```vue
+<template>
+  <p-button>Click me</p-button>
+</template>
+```
+
+### Button with icon
+
+<preview>
+  <p-button color="info" icon><IconPersona /></p-button>
+</preview>
+
+```vue
+<template>
+  <p-button color="info" icon><IconPersona /></p-button>
+</template>
+
+<script setup>
+  import IconPersona from '@privyid/persona-icon/vue/persona/20.vue'
+</script>
+```
+
+### Button with icon + text
+
+<preview>
+  <div class="flex flex-col items-center space-gap-3 md:flex-row">
+    <p-button color="info"><IconPersona /> Click Me</p-button>
+    <p-button color="info">Click Me <IconPersona /></p-button>
+  </div>
+</preview>
+
+```vue
+<template>
+  <p-button color="info"><IconPersona /> Click Me</p-button>
+  <p-button color="info">Click Me <IconPersona /></p-button>
+</template>
+
+<script setup>
+  import IconPersona from '@privyid/persona-icon/vue/persona/20.vue'
+</script>
+```
+
+## Variants
+
+Button has 4 variants, `solid`, `outline`, `ghost`, `link`. Default is `solid`
+
+### Default color
+
+<preview>
+  <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
+    <p-button variant="solid">Click me</p-button>
+    <p-button variant="outline">Click me</p-button>
+    <p-button variant="ghost">Click me</p-button>
+    <p-button variant="link">Click me</p-button>
+  </div>
+</preview>
+
+```vue
+<template>
+  <p-button variant="solid">Click me</p-button>
+  <p-button variant="outline">Click me</p-button>
+  <p-button variant="ghost">Click me</p-button>
+  <p-button variant="link">Click me</p-button>
+</template>
+```
+
+### With Color
+<preview>
+  <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
+    <p-button color="info" variant="solid">Click me</p-button>
+    <p-button variant="outline">Click me</p-button>
+    <p-button color="info" variant="ghost">Click me</p-button>
+    <p-button variant="link">Click me</p-button>
+  </div>
+</preview>
+
+```vue
+<template>
+  <p-button color="info" variant="solid">Click me</p-button>
+  <p-button variant="outline">Click me</p-button>
+  <p-button color="info" variant="ghost">Click me</p-button>
+  <p-button variant="link">Click me</p-button>
+</template>
+```
+
+## Colors
+
+Button solid and ghost available in 5 different colors `primary`, `info`, `success`, `warning` and `danger`.
+
+<preview>
+  <div class="grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-5">
+    <p-button color="primary">Click me</p-button>
+    <p-button color="info">Click me</p-button>
+    <p-button color="success">Click me</p-button>
+    <p-button color="warning">Click me</p-button>
+    <p-button color="danger">Click me</p-button>
+  </div>
+</preview>
+
+```vue
+<template>
+  <p-button color="primary">Click me</p-button>
+  <p-button color="info">Click me</p-button>
+  <p-button color="success">Click me</p-button>
+  <p-button color="warning">Click me</p-button>
+  <p-button color="danger">Click me</p-button>
+</template>
+```
+
+<!-- It's also available in ghost variants. -->
+<preview label="ghost variant">
+  <div class="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-5">
+    <p-button variant="ghost" color="primary">Click me</p-button>
+    <p-button variant="ghost" color="info">Click me</p-button>
+    <p-button variant="ghost" color="success">Click me</p-button>
+    <p-button variant="ghost" color="warning">Click me</p-button>
+    <p-button variant="ghost" color="danger">Click me</p-button>
+  </div>
+</preview>
+
+```vue
+<template>
+  <p-button variant="ghost" color="primary">Click me</p-button>
+  <p-button variant="ghost" color="info">Click me</p-button>
+  <p-button variant="ghost" color="success">Click me</p-button>
+  <p-button variant="ghost" color="warning">Click me</p-button>
+  <p-button variant="ghost" color="danger">Click me</p-button>
+</template>
+```
+
+Button link and button outline are available in emphasis color to accommodate dark background (inverse).
+<preview label="link variant">
+  <div class="flex items-center space-x-4">
+    <p-button variant="outline">Click me</p-button>
+    <div class="px-4 py-3 bg-inverse dark:bg-dark-inverse">
+      <p-button variant="outline" color="emphasis">Click me</p-button>
+    </div>
+    <p-button variant="link">Click me</p-button>
+    <div class="px-4 py-3 bg-inverse dark:bg-dark-inverse">
+      <p-button variant="link" color="emphasis">Click me</p-button>
+    </div>
+  </div>
+</preview>
+
+```vue
+<template>
+  <p-button variant="outline">Click me</p-button>
+  <p-button variant="outline" color="emphasis">Click me</p-button>
+  <p-button variant="link">Click me</p-button>
+  <p-button variant="link" color="emphasis">Click me</p-button>
+</template>
+```
+
+## Sizing
+
+There are 4 size variants that can be use: `xs`, `sm`, `md`, `lg`. default is `md`
+
+<preview class="flex-col items-center gap-3 md:flex-row">
+  <p-button color="info" size="xs">Click me</p-button>
+  <p-button color="info" size="sm">Click me</p-button>
+  <p-button color="info" size="md">Click me</p-button>
+  <p-button color="info" size="lg">Click me</p-button>
+</preview>
+
+```vue
+<template>
+  <p-button color="info" size="xs">Click me</p-button>
+  <p-button color="info" size="sm">Click me</p-button>
+  <p-button color="info" size="md">Click me</p-button>
+  <p-button color="info" size="lg">Click me</p-button>
+</template>
+```
+
+## Pill mode
+
+You can add prop `pill` to make button more rounded
+
+<preview class="flex-col items-center gap-3 md:flex-row">
+  <p-button color="info" size="xs" pill>Click me</p-button>
+  <p-button color="info" size="sm" pill>Click me</p-button>
+  <p-button color="info" size="md" pill>Click me</p-button>
+  <p-button color="info" size="lg" pill>Click me</p-button>
+</preview>
+
+```vue
+<template>
+  <p-button color="info" size="xs" pill>Click me</p-button>
+  <p-button color="info" size="sm" pill>Click me</p-button>
+  <p-button color="info" size="md" pill>Click me</p-button>
+  <p-button color="info" size="lg" pill>Click me</p-button>
+</template>
+```
+
+## Icon mode
+
+You can add prop `icon` to make button more square, it's suitable for button with icon only
+
+<preview class="items-center gap-3">
+  <p-button color="info" size="xs" icon><IconPersona /></p-button>
+  <p-button color="info" size="sm" icon><IconPersona /></p-button>
+  <p-button color="info" size="md" icon><IconPersona /></p-button>
+  <p-button color="info" size="lg" icon><IconPersona /></p-button>
+</preview>
+
+```vue
+<template>
+  <p-button color="info" size="xs" icon><IconPersona /></p-button>
+  <p-button color="info" size="sm" icon><IconPersona /></p-button>
+  <p-button color="info" size="md" icon><IconPersona /></p-button>
+  <p-button color="info" size="lg" icon><IconPersona /></p-button>
+</template>
+```
+
+You can also combine with `pill` mode to make round button
+
+<preview class="items-center gap-3">
+  <p-button color="info" size="xs" icon pill><IconPersona /></p-button>
+  <p-button color="info" size="sm" icon pill><IconPersona /></p-button>
+  <p-button color="info" size="md" icon pill><IconPersona /></p-button>
+  <p-button color="info" size="lg" icon pill><IconPersona /></p-button>
+</preview>
+
+```vue
+<template>
+  <p-button color="info" size="xs" icon pill><IconPersona /></p-button>
+  <p-button color="info" size="sm" icon pill><IconPersona /></p-button>
+  <p-button color="info" size="md" icon pill><IconPersona /></p-button>
+  <p-button color="info" size="lg" icon pill><IconPersona /></p-button>
+</template>
+```
+
+## Disable state
+
+<preview label="link variant">
+  <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
+    <p-button color="info" variant="solid" disabled>Click me</p-button>
+    <p-button variant="outline" disabled>Click me</p-button>
+    <p-button variant="ghost" color="info" disabled>Click me</p-button>
+    <p-button variant="link" disabled>Click me</p-button>
+  </div>
+</preview>
+
+```vue
+<template>
+  <p-button color="info" variant="solid" disabled>Click me</p-button>
+  <p-button variant="outline" disabled>Click me</p-button>
+  <p-button variant="ghost" color="info" disabled>Click me</p-button>
+  <p-button variant="link" disabled>Click me</p-button>
+</template>
+```
+
+## Loading state
+
+<preview label="link variant">
+  <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
+    <p-button color="info" variant="solid" loading>Click me</p-button>
+    <p-button variant="outline" loading>Click me</p-button>
+    <p-button variant="ghost" color="info" loading>Click me</p-button>
+    <p-button variant="link" loading>Click me</p-button>
+  </div>
+</preview>
+
+```vue
+<template>
+  <p-button color="info" variant="solid" loading>Click me</p-button>
+  <p-button variant="outline" loading>Click me</p-button>
+  <p-button variant="ghost" color="info" loading>Click me</p-button>
+  <p-button variant="link" loading>Click me</p-button>
+</template>
+```
+
+## Variables
+Button use local CSS variables on `.btn` for enhanced real-time customization.
+
+```sass
+--p-button-xs-padding-x: theme(spacing.2);
+--p-button-sm-padding-x: theme(spacing.4);
+--p-button-md-padding-x: theme(spacing.5);
+--p-button-lg-padding-x: theme(spacing.8);
+
+/** only work in button variant link */
+--p-button-xs-padding-y: theme(spacing[0.5]);
+--p-button-sm-padding-y: theme(spacing.1);
+--p-button-md-padding-y: theme(spacing[2.5]);
+--p-button-lg-padding-y: theme(spacing.4);
+```
+
+## API
+
+### Props
+
+| Props      |              Type              | Default | Description                                                                               |
+|------------|:------------------------------:|:-------:|-------------------------------------------------------------------------------------------|
+| `variant`  |            `String`            | `solid` | Button style variant, valid value is `solid`, `outline`, `ghost` and `link`               |
+| `color`    |            `String`            |   `-`   | Button color variant, valid value is `primary`, `info`, `success`, `warning` and `danger` |
+| `size`     |            `String`            |  `md`   | Size of button, valid value is `xs`, `sm`, `md`, `lg`                                     |
+| `pill`     |           `Boolean`            | `false` | Enable pill mode                                                                          |
+| `icon`     |           `Boolean`            | `false` | Enable icon mode                                                                          |
+| `disabled` |           `Boolean`            | `false` | Disable state                                                                             |
+| `loading`  |           `Boolean`            | `false` | Enable loading state                                                                      |
+| `href`     | `String` or `RouteLocationRaw` |   `-`   | Place url in the button to make button-like permalink                                     |
+
+### Slots
+
+| Name      | Description                |
+|-----------|----------------------------|
+| `default` | Content to place in button |
+| `loading` | Content when loading       |
+
+### Events
+
+| Name    | Arguments               | Description                  |
+|---------|-------------------------|------------------------------|
+| `click` | Native DOM Event object | Event when button is clicked |

package/dist/components/button-group/ButtonGroup.spec.d.ts

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

package/dist/components/button-group/ButtonGroup.spec.mjs

@@ -0,0 +1,47 @@
+import { render } from "@testing-library/vue";
+import ButtonGroup from "./ButtonGroup.vue";
+import Button from "../button/Button.vue";
+it("should render properly without any props", () => {
+  const screen = render({
+    components: { ButtonGroup, Button },
+    template: `
+      <Button-Group>
+        <Button>Button Text</Button>
+        <Button>Button Text</Button>
+      </Button-Group>
+    `
+  });
+  const button = screen.queryByTestId("btn-group");
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveClass("btn-group", "btn-group--md");
+});
+it('should have style "lg" if size props set to "lg"', () => {
+  const screen = render({
+    components: { ButtonGroup, Button },
+    template: `
+      <Button-Group size="lg">
+        <Button>Button Text</Button>
+      </Button-Group>
+    `
+  });
+  const buttonGroup = screen.queryByTestId("btn-group");
+  const button = screen.queryByTestId("btn");
+  expect(buttonGroup).toBeInTheDocument();
+  expect(buttonGroup).toHaveClass("btn-group", "btn-group--lg");
+  expect(buttonGroup).not.toHaveClass("btn-group--md");
+  expect(button).toHaveClass("btn--lg");
+});
+it('should have style "pill" if pill is provided', () => {
+  const screen = render({
+    components: { ButtonGroup, Button },
+    template: `
+      <Button-Group pill>
+        <Button>Button Text</Button>
+        <Button>Button Text</Button>
+      </Button-Group>
+    `
+  });
+  const button = screen.queryByTestId("btn-group");
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveClass("btn-group", "btn-group--pill");
+});