@privyid/persona 0.3.0 → 0.5.0

package/dist/components/filterbar/pinned/Select.vue

@@ -2,23 +2,26 @@
   <Dropdown
     v-model="isOpen"
     variant="input"
+    size="sm"
     class="filterbar__select"
     :class="{'filterbar--active': selected !== undefined }"
+    divider
     caret>
     <template #button-content>
       {{ selected ? selected.text : schema.label }}
     </template>
-    <Caption
-      class="px-3 py-2"
-      bold>
+    <Subheading
+      class="px-4 pt-4 pb-1"
+      weight="medium"
+      overline>
       {{ schema.label }}
-    </Caption>
+    </Subheading>
     <template
       v-for="(item, i) in items"
       :key="i">
       <Radio
         v-model="model"
-        apperance="option"
+        appearance="option"
         :value="item.value"
         @click="close">
         {{ item.text }}
@@ -33,15 +36,15 @@ import {
   defineComponent,
   ref
 } from "vue-demi";
-import Caption from "../../caption/Caption.vue";
+import Subheading from "../../subheading/Subheading.vue";
 import Dropdown from "../../dropdown/Dropdown.vue";
 import Radio from "../../radio/Radio.vue";
 import { useOptionsProp } from "../../select/adapter/adapter";
-import { useVModel } from "../../input/use-input";
+import { useVModel } from "../../input";
 import { isEqual } from "../../utils/value";
 export default defineComponent({
   components: {
-    Caption,
+    Subheading,
     Dropdown,
     Radio
   },

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

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
-import { FilterSelect } from '../use-filterbar';
-import { SelectItem } from '../../select/use-select';
+import { FilterSelect } from '..';
+import { SelectItem } from '../../select';
 declare const _default: import("vue-demi").DefineComponent<{
     schema: {
         type: PropType<FilterSelect>;

package/dist/components/filterbar/pinned/Toggle.vue

@@ -2,6 +2,7 @@
   <Button
     class="filterbar__item filterbar--pinned"
     variant="input"
+    size="sm"
     :class="{ 'filterbar--active': model }"
     @click="toggle">
     {{ schema.label }}
@@ -11,7 +12,7 @@
 <script>
 import { defineComponent } from "vue-demi";
 import Button from "../../button/Button.vue";
-import { useVModel } from "../../checkbox/use-checkbox";
+import { useVModel } from "../../checkbox";
 export default defineComponent({
   components: { Button },
   props: {

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-import { FilterToggle } from '../use-filterbar';
+import { FilterToggle } from '..';
 declare const _default: import("vue-demi").DefineComponent<{
     schema: {
         type: PropType<FilterToggle>;

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

@@ -0,0 +1,103 @@
+<template>
+  <div
+    class="form-group"
+    :class="classNames">
+    <label class="form-group__label">
+      <IconInfo
+        v-if="hint"
+        v-p-tooltip="hint"
+        class="form-group__hint" />
+      {{ label }}<sup v-if="required">*</sup>
+      <p-caption v-if="caption">{{ caption }}</p-caption>
+    </label>
+
+    <slot />
+
+    <transition
+      name="slide-up"
+      mode="out-in">
+      <p
+        v-if="error"
+        class="form-group__error">
+        {{ error }}
+      </p>
+      <p
+        v-else-if="description"
+        class="form-group__description">
+        {{ description }}
+      </p>
+    </transition>
+  </div>
+</template>
+
+<script>
+import IconInfo from "@carbon/icons-vue/lib/information--filled/16";
+import pCaption from "../caption/Caption.vue";
+import { pTooltip } from "../tooltip";
+import { computed, defineComponent } from "vue-demi";
+export default defineComponent({
+  components: { pCaption, IconInfo },
+  directives: { pTooltip },
+  props: {
+    required: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    caption: {
+      type: String,
+      default: ""
+    },
+    description: {
+      type: String,
+      default: ""
+    },
+    hint: {
+      type: String,
+      default: ""
+    },
+    error: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props) {
+    const classNames = computed(() => {
+      const result = [];
+      if (props.error)
+        result.push("form-group--error", "state--error");
+      return result;
+    });
+    return { classNames };
+  }
+});
+</script>
+
+<style lang="postcss">
+.form-group {
+  @apply flex flex-col mb-4;
+
+  &__label {
+    @apply font-bold text-xs mb-2 relative;
+
+    > sup {
+      @apply text-danger;
+    }
+  }
+
+  &__description {
+    @apply text-xs;
+  }
+
+  &__error {
+    @apply text-xs text-danger;
+  }
+
+  &__hint {
+    @apply absolute bottom-0 right-0 text-accent cursor-pointer focus:outline-none;
+  }
+}
+</style>

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

@@ -0,0 +1,61 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    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;
+    };
+}, {
+    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<{
+    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;
+    };
+}>>, {
+    error: string;
+    caption: string;
+    required: boolean;
+    label: string;
+    description: string;
+    hint: string;
+}>;
+export default _default;

package/dist/components/global/context.d.ts

@@ -0,0 +1,24 @@
+declare type Lang = 'id' | 'en';
+/**
+ * Simple vuex-like-store for global configuaration
+ */
+export interface AppContext {
+    lang: Lang;
+}
+export declare function initAppContext(context?: Partial<AppContext>): void;
+export declare function useAppContext(): AppContext;
+export declare function setLang(lang: Lang): void;
+export declare function getLang(): Lang;
+/**
+ * Return reactive global lang setting
+ * @example
+ * const lang = useLang()
+ *
+ * // set lang
+ * lang.value = 'en'
+ *
+ * // get lang
+ * console.log(lang.value)
+ */
+export declare function useLang(): import("vue-demi").Ref<Lang>;
+export {};

package/dist/components/global/context.mjs

@@ -0,0 +1,18 @@
+import defu from "defu";
+import { reactive, toRef } from "vue-demi";
+let appContext = reactive({ lang: "en" });
+export function initAppContext(context) {
+  appContext = reactive(defu(context, { lang: "en" }));
+}
+export function useAppContext() {
+  return appContext;
+}
+export function setLang(lang) {
+  appContext.lang = lang;
+}
+export function getLang() {
+  return appContext.lang;
+}
+export function useLang() {
+  return toRef(appContext, "lang");
+}

package/dist/components/global/router.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Universal router which compatible in many enviroment
+ */
+interface RouterCompat {
+    /**
+     * redirect to URL
+     */
+    toURL: (url: string) => unknown | Promise<unknown>;
+    /**
+      * Get current URL
+      */
+    getURL: () => string;
+}
+/**
+ * Init router compat
+ * @param router RouterInstance
+ */
+export declare function installRouter(router: RouterCompat): void;
+/**
+ * Use Router Compat
+ */
+export declare function useRouter(): RouterCompat;
+export {};

package/dist/components/global/router.mjs

@@ -0,0 +1,7 @@
+let appRouter;
+export function installRouter(router) {
+  appRouter = router;
+}
+export function useRouter() {
+  return appRouter;
+}

package/dist/components/global/use-singleton.d.ts

@@ -1,6 +1,21 @@
-import { DefineComponent } from 'vue-demi';
+import { DefineComponent, Ref } from 'vue-demi';
 export declare type Component = DefineComponent<{}, {}, any>;
 export declare type ComponentInstance<C extends Component> = InstanceType<C>;
+export interface GlobalInstance<C extends Component> {
+    component: C;
+    ref: Ref<ComponentInstance<C>>;
+}
+/**
+ * Reset all instances
+ */
+export declare function resetInstance(): Promise<void>;
+/**
+ * Create global component, return one if component is exist
+ * @param component Vue Component
+ */
 export declare function useSingleton<C extends Component>(component: C): Promise<ComponentInstance<C>>;
+/**
+ * Remove global component
+ * @param component Vue Component
+ */
 export declare function removeSingleton<C extends Component>(component: C): Promise<void>;
-export declare function resetSingleton(): Promise<void>;

package/dist/components/global/use-singleton.mjs

@@ -1,3 +1,4 @@
+import PQueue from "p-queue";
 import {
   createApp,
   h,
@@ -9,7 +10,8 @@ import {
 } from "vue-demi";
 let instances;
 let container;
-export async function useSingleton(component) {
+const queue = new PQueue({ concurrency: 1 });
+async function createInstance(id, component) {
   if (!instances)
     instances = shallowRef(/* @__PURE__ */ new Map());
   if (!container) {
@@ -17,8 +19,8 @@ export async function useSingleton(component) {
     const app = createApp({
       name: "GlobalContainer",
       render: () => {
-        return [...instances.value.entries()].map(([element, cRef]) => {
-          return h(element, { ref: cRef });
+        return [...instances.value.values()].map((item) => {
+          return h(item.component, { ref: item.ref });
         });
       }
     });
@@ -27,26 +29,32 @@ export async function useSingleton(component) {
     target.id = "global";
     container = app;
   }
-  let instance = instances.value.get(component);
+  let instance = instances.value.get(id);
   if (!instance) {
-    instance = ref();
-    instances.value.set(component, instance);
+    instance = { component, ref: ref() };
+    instances.value.set(id, instance);
     triggerRef(instances);
     await nextTick();
   }
-  return unref(instance);
+  return unref(instance.ref);
 }
-export async function removeSingleton(component) {
+async function removeInstance(id) {
   if (instances && container) {
-    instances.value.delete(component);
+    instances.value.delete(id);
     triggerRef(instances);
     await nextTick();
   }
 }
-export async function resetSingleton() {
+export async function resetInstance() {
   if (instances) {
     instances.value.clear();
     triggerRef(instances);
     await nextTick();
   }
 }
+export async function useSingleton(component) {
+  return await queue.add(() => createInstance(component, component));
+}
+export async function removeSingleton(component) {
+  return await queue.add(() => removeInstance(component));
+}

package/dist/components/heading/Heading.vue

@@ -17,6 +17,14 @@ export default defineComponent({
     element: {
       type: String,
       default: "h3"
+    },
+    weight: {
+      type: String,
+      default: "normal"
+    },
+    transform: {
+      type: String,
+      default: "normalcase"
     }
   },
   setup(props) {
@@ -25,6 +33,10 @@ export default defineComponent({
     });
     const classNames = computed(() => {
       const result = [`${props.element}`];
+      if (props.transform)
+        result.push(`heading--${props.transform}`);
+      if (props.weight)
+        result.push(`heading--${props.weight}`);
       return result;
     });
     return {
@@ -55,5 +67,43 @@ export default defineComponent({
   &6 {
     @apply text-xl;
   }
+
+  &eading {
+    /**
+    * Weight variant
+    * of heading
+    */
+    &--normal {
+      @apply font-normal;
+    }
+
+    &--medium {
+      @apply font-medium;
+    }
+
+    &--bold {
+      @apply font-bold;
+    }
+
+    /**
+    * Text transform
+    * of heading
+    */
+    &--normalcase {
+      @apply normal-case;
+    }
+
+    &--lowercase {
+      @apply lowercase;
+    }
+
+    &--capitalize {
+      @apply capitalize;
+    }
+
+    &--uppercase {
+      @apply uppercase;
+    }
+  }
 }
 </style>

package/dist/components/heading/Heading.vue.d.ts

@@ -1,10 +1,18 @@
 import { PropType } from 'vue-demi';
-declare type ElementVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+import { ElementVariant, TransformVariant, WeightVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     element: {
         type: PropType<ElementVariant>;
         default: string;
     };
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
 }, {
     elementNames: import("vue-demi").ComputedRef<ElementVariant>;
     classNames: import("vue-demi").ComputedRef<string[]>;
@@ -13,7 +21,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<ElementVariant>;
         default: string;
     };
+    weight: {
+        type: PropType<WeightVariant>;
+        default: string;
+    };
+    transform: {
+        type: PropType<TransformVariant>;
+        default: string;
+    };
 }>>, {
+    weight: WeightVariant;
+    transform: TransformVariant;
     element: ElementVariant;
 }>;
 export default _default;

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

@@ -0,0 +1,3 @@
+export declare type ElementVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export declare type WeightVariant = 'normal' | 'medium' | 'bold';
+export declare type TransformVariant = 'normalcase' | 'lowercase' | 'capitalize' | 'uppercase';