@privyid/persona 0.3.0 → 0.5.0

package/dist/components/navbar-menu/NavbarNavMenu.vue

@@ -0,0 +1,62 @@
+<template>
+  <NavbarNav
+    v-for="(menu, i) in menus"
+    :key="i"
+    :align="menu.align">
+    <template
+      v-for="(item, id) in menu.items"
+      :key="id">
+      <NavItemDropdown v-if="item.submenu">
+        <template #button-content>
+          <template v-if="item.icon && typeof item.icon === 'string'">
+            <img
+              :src="item.icon"
+              alt="icon-menu">
+          </template>
+          <template v-else-if="item.icon">
+            <component :is="item.icon" />
+          </template>
+          {{ item.label }}
+        </template>
+        <DropdownItem
+          v-for="(submenu, idx) in item.submenu"
+          :key="idx">
+          {{ submenu.label }}
+        </DropdownItem>
+      </NavItemDropdown>
+      <NavItem
+        v-else
+        :href="item.url"
+        :class="{ 'nav__item--no-label' : !item.label }">
+        <template
+          #icon>
+          <template v-if="item.icon && typeof item.icon === 'string'">
+            <img
+              :src="item.icon"
+              alt="icon-menu">
+          </template>
+          <template v-else-if="item.icon">
+            <component :is="item.icon" />
+          </template>
+        </template>
+        {{ item.label }}
+      </NavItem>
+    </template>
+  </NavbarNav>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import NavbarNav from "../navbar/NavbarNav.vue";
+export default defineComponent({
+  components: { NavbarNav },
+  props: {
+    menus: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup() {
+  }
+});
+</script>

package/dist/components/navbar-menu/NavbarNavMenu.vue.d.ts

@@ -0,0 +1,16 @@
+import { PropType } from 'vue';
+import { Menu } from '../sidebar-menu';
+declare const _default: import("vue").DefineComponent<{
+    menus: {
+        type: PropType<Menu[]>;
+        default: () => Menu[];
+    };
+}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    menus: {
+        type: PropType<Menu[]>;
+        default: () => Menu[];
+    };
+}>>, {
+    menus: Menu[];
+}>;
+export default _default;

package/dist/components/overlay/Overlay.vue

@@ -16,6 +16,12 @@ import { defineComponent } from "vue-demi";
 import useLoading from "./utils/use-loading";
 import Icon from "./assets/icon-white.svg";
 export default defineComponent({
+  props: {
+    icon: {
+      type: String,
+      default: Icon
+    }
+  },
   setup() {
     const loading = useLoading({ elapsed: false });
     function show() {
@@ -27,8 +33,7 @@ export default defineComponent({
     return {
       show,
       hide,
-      loading,
-      icon: Icon
+      loading
     };
   }
 });
@@ -48,7 +53,7 @@ export default defineComponent({
 }
 
 .overlay {
-  @apply fixed top-0 left-0 right-0 bottom-0 w-screen h-screen z-50 bg-overlay-primary flex items-center justify-center select-none will-change-[transform,opacity];
+  @apply fixed top-0 left-0 right-0 bottom-0 w-screen h-screen z-50 bg-emphasis/20 flex items-center justify-center select-none will-change-[transform,opacity];
 
   &__icon {
     @apply w-10 md:w-16 animate-[overlayLoading_1s_ease-in-out_infinite];

package/dist/components/overlay/Overlay.vue.d.ts

@@ -1,7 +1,18 @@
-declare const _default: import("vue-demi").DefineComponent<{}, {
+declare const _default: import("vue-demi").DefineComponent<{
+    icon: {
+        type: StringConstructor;
+        default: any;
+    };
+}, {
     show: () => void;
     hide: () => void;
     loading: import("vue-demi").WritableComputedRef<boolean>;
-    icon: any;
-}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{}>>, {}>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        default: any;
+    };
+}>>, {
+    icon: string;
+}>;
 export default _default;

package/dist/components/progress/Progress.vue

@@ -0,0 +1,200 @@
+<template>
+  <div
+    class="progress"
+    data-testid="progress"
+    :class="classNames">
+    <div class="progress__items">
+      <slot />
+    </div>
+
+    <div
+      v-if="titleVariant === 'general'"
+      data-testid="progress-title-general"
+      class="progress__title">
+      <template v-if="item.slots?.title">
+        <component :is="item.slots.title" />
+      </template>
+      <template v-else>
+        {{ item.title }}
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { findLast } from "lodash-es";
+import {
+  defineComponent,
+  computed
+} from "vue-demi";
+import { findAllChildren, toBoolean } from "../utils/vnode";
+export default defineComponent({
+  props: {
+    variant: {
+      type: String,
+      default: "dot"
+    },
+    titleVariant: {
+      type: String,
+      default: "specific"
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots }) {
+    const classNames = computed(() => {
+      const result = [];
+      if (props.variant)
+        result.push(`progress--${props.variant}`);
+      if (props.titleVariant)
+        result.push(`progress--${props.titleVariant}`);
+      if (props.vertical)
+        result.push("progress--vertical");
+      else
+        result.push("progress--horizontal");
+      return result;
+    });
+    const item = computed(() => {
+      const vnodes = findAllChildren(slots.default(), "ProgressItem");
+      const activeNode = findLast(vnodes, (vnode) => {
+        return toBoolean(vnode.props?.active);
+      });
+      return {
+        title: activeNode?.props?.title ?? "",
+        slots: activeNode?.children ?? {}
+      };
+    });
+    return {
+      classNames,
+      item
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.progress {
+  &__items {
+    @apply flex overflow-hidden;
+  }
+
+  &__item {
+    @apply flex-1 flex justify-center relative;
+
+    &:first-child .progress__bar {
+      @apply hidden;
+    }
+  }
+
+  &__content {
+    @apply flex flex-col space-y-2;
+  }
+
+  &__point {
+    @apply w-7 h-7 rounded-full bg-muted flex items-center justify-center text-default;
+  }
+
+  &__bar {
+    @apply absolute rounded-full transition-[background-position] ease-linear duration-150;
+    @apply from-[theme(backgroundColor.accent.emphasis)_50%] to-[theme(backgroundColor.muted)_50%];
+  }
+
+  &__title {
+    @apply truncate text-sm text-center w-full text-default;
+  }
+
+  & > .progress__title {
+    @apply pt-2;
+  }
+
+  &--active {
+    .progress__point {
+      @apply bg-accent-emphasis text-on-emphasis;
+    }
+  }
+
+  &--horizontal {
+    @apply w-full;
+
+    .progress__items {
+      @apply flex-row;
+    }
+
+    .progress__content {
+      @apply justify-start items-center;
+    }
+
+    .progress__bar {
+      @apply w-[calc(100%_-_3rem)] h-1 top-5 right-[calc(50%_+_1.5rem)];
+      @apply bg-gradient-to-r bg-[length:210%_100%] bg-right;
+    }
+
+    .progress--active + .progress--active {
+      .progress__bar {
+        @apply bg-left;
+      }
+    }
+  }
+
+  &--vertical {
+    @apply h-full;
+
+    > .progress__title {
+      @apply hidden;
+    }
+
+    .progress__items {
+      @apply flex-col items-center justify-between h-full space-y-2;
+    }
+
+    .progress__content {
+      @apply justify-center items-center;
+    }
+
+    .progress__bar {
+      @apply h-[calc(100%_-_4.25rem)] w-1 bottom-[calc(50%_+_2.25rem)] left-1/2 -translate-x-1/2;
+      @apply bg-gradient-to-b bg-bottom bg-[length:100%_210%];
+    }
+
+    .progress--active + .progress--active {
+      .progress__bar {
+        @apply bg-top;
+      }
+    }
+  }
+
+  &--dot {
+    .progress__point-item {
+      @apply w-3 h-3 rounded-full bg-default;
+    }
+  }
+
+  &--counter {
+    counter-reset: progress;
+
+    .progress__point {
+      counter-increment: progress;
+
+      &-item::before {
+        content: counter(progress);
+
+        @apply text-sm font-medium;
+      }
+    }
+  }
+
+  &--specific {
+    > .progress__title {
+      @apply hidden;
+    }
+  }
+
+  &--general {
+    .progress__content > .progress__title {
+      @apply hidden;
+    }
+  }
+}
+</style>

package/dist/components/progress/Progress.vue.d.ts

@@ -0,0 +1,42 @@
+import { PropType, Slots } from 'vue-demi';
+export declare type IconVariant = 'dot' | 'counter';
+export declare type TitleVariant = 'specific' | 'general';
+interface ProgressLabel {
+    title: string;
+    slots: Slots;
+}
+declare const _default: import("vue-demi").DefineComponent<{
+    variant: {
+        type: PropType<IconVariant>;
+        default: string;
+    };
+    titleVariant: {
+        type: PropType<TitleVariant>;
+        default: string;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    item: import("vue-demi").ComputedRef<ProgressLabel>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    variant: {
+        type: PropType<IconVariant>;
+        default: string;
+    };
+    titleVariant: {
+        type: PropType<TitleVariant>;
+        default: string;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    variant: IconVariant;
+    vertical: boolean;
+    titleVariant: TitleVariant;
+}>;
+export default _default;

package/dist/components/progress/ProgressItem.vue

@@ -0,0 +1,50 @@
+<template>
+  <div
+    class="progress__item"
+    data-testid="progress-item"
+    :class="classNames">
+    <div class="progress__content">
+      <div class="progress__bar" />
+      <div class="progress__point">
+        <slot name="icon">
+          <div
+            data-testid="progress-point-item"
+            class="progress__point-item" />
+        </slot>
+      </div>
+      <div
+        data-testid="progress-title"
+        class="progress__title">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent } from "vue-demi";
+export default defineComponent({
+  name: "ProgressItem",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const classNames = computed(() => {
+      const result = [];
+      if (props.active)
+        result.push("progress--active");
+      return result;
+    });
+    return { classNames };
+  }
+});
+</script>

package/dist/components/progress/ProgressItem.vue.d.ts

@@ -0,0 +1,25 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    title: string;
+    active: boolean;
+}>;
+export default _default;

package/dist/components/radio/Radio.vue

@@ -4,15 +4,10 @@
     class="radio"
     :class="classNames"
     @click.prevent="toggle">
-    <input
-      type="radio"
-      :value="model"
-      :name="name"
-      :disabled="disabled || readonly">
     <span class="radio__icon">
-      <IconCheck v-if="apperance === 'option'" />
+      <IconCheck v-if="appearance === 'option'" />
       <svg
-        v-else-if="apperance === 'checkbox'"
+        v-else-if="appearance === 'checkbox'"
         width="10"
         height="10"
         viewBox="0 0 14 10"
@@ -21,8 +16,7 @@
         <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"
-          fill="white" />
+          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>
 
       <svg
@@ -35,19 +29,23 @@
         <circle
           cx="7"
           cy="7"
-          r="6.25"
-          fill="white" />
+          r="6.25" />
       </svg>
     </span>
     <span class="radio__label">
       <slot />
     </span>
+    <input
+      type="radio"
+      :value="model"
+      :name="name"
+      :disabled="disabled || readonly">
   </label>
 </template>
 
 <script>
-import { useVModel } from "./use-radio";
-import IconCheck from "@carbon/icons-vue/lib/checkmark--filled/16";
+import { useVModel } from ".";
+import IconCheck from "@carbon/icons-vue/lib/checkmark/16";
 import {
   computed,
   defineComponent
@@ -93,7 +91,7 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    apperance: {
+    appearance: {
       type: String,
       default: "radio"
     }
@@ -113,8 +111,8 @@ export default defineComponent({
         result.push("radio--readonly");
       if (props.disabled)
         result.push("radio--disabled");
-      if (props.apperance)
-        result.push(`radio--${props.apperance}`);
+      if (props.appearance)
+        result.push(`radio--${props.appearance}`);
       return result;
     });
     function toggle() {
@@ -132,41 +130,63 @@ export default defineComponent({
 
 <style lang="postcss">
 .radio {
-  @apply inline-flex gap-2 relative cursor-pointer select-none items-baseline;
+  @apply inline-flex space-x-2 relative cursor-pointer select-none items-baseline;
 
   & > input[type="radio"] {
     @apply appearance-none w-0 h-0 opacity-0 absolute;
   }
 
   &__icon {
-    @apply w-5 h-5 border rounded-full border-secondary-25 inline-flex items-center justify-center bg-white;
+    @apply w-5 h-5 border rounded-full border-subtle inline-flex items-center justify-center bg-default;
 
-    & > svg {
-      @apply w-3;
+    > svg {
+      @apply w-3 fill-default;
     }
   }
 
-  &--disabled {
+  &__label {
+    @apply text-default;
+  }
+
+  &&--disabled {
     @apply opacity-50;
+
+    &:not(.radio--checked) {
+      .radio__icon {
+        @apply bg-inactive border-subtle;
+
+        > svg {
+          @apply fill-inactive;
+        }
+      }
+    }
   }
 
-  &--checked {
+  &&--checked {
     .radio__icon {
-      @apply bg-primary-100 border-primary-100;
+      @apply bg-accent-emphasis border-accent-emphasis;
+    }
+
+    &.radio--checkbox {
+      .radio__icon {
+        > svg {
+          @apply fill-default;
+        }
+      }
     }
   }
 
-  &--checkbox {
+  &&--checkbox {
     .radio__icon {
-      @apply rounded-tn;
+      @apply rounded-sm;
     }
   }
 
-  &--option {
+  &&--option {
     .radio__icon {
       @apply order-2 border-none invisible bg-transparent;
 
-      & > svg {
+      > svg {
         @apply w-4;
       }
     }
@@ -175,19 +195,56 @@ export default defineComponent({
       @apply flex-grow;
     }
 
+    .dropdown__menu > .dropdown__subitem > & {
+      .radio__label {
+        @apply ml-0;
+      }
+    }
+
     &.radio--checked {
       .radio__icon {
-        @apply text-primary-100 visible;
+        @apply text-accent visible;
+
+        > svg {
+          @apply fill-accent-emphasis;
+        }
       }
     }
   }
 
-  .dropdown__menu & {
-    @apply px-3 py-2 cursor-pointer text-body-100 w-full select-none text-left;
+  &&--none {
+    .radio__icon {
+      @apply hidden;
+    }
+
+    &.radio--disabled {
+      .card {
+        @apply bg-subtle hover:shadow-none hover:cursor-default;
+      }
+    }
+  }
+
+  .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];
+
+    &:not(.radio--option) {
+      .radio__label {
+        @apply ml-4;
+      }
+    }
 
     &:hover,
     &:focus-visible {
-      @apply bg-background-75;
+      @apply bg-subtle;
     }
   }
 }