@privyid/persona 0.21.0 → 0.22.0

package/dist/components/select/SelectInput.vue

@@ -0,0 +1,102 @@
+<template>
+  <div
+    class="input"
+    :class="containerClass"
+    data-testid="input-container">
+    <span
+      v-if="$slots.prepend"
+      class="input__prepend">
+      <slot name="prepend" />
+    </span>
+    <div
+      class="input__form"
+      data-testid="input"
+      :disabled="disabled"
+      :readonly="readonly"
+      :class="classNames"
+      :tabindex="1"
+      v-bind="$attrs">
+      <slot />
+    </div>
+    <span
+      v-if="$slots.append"
+      class="input__append">
+      <slot name="append" />
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  inject,
+  PropType,
+  VNode,
+} from 'vue-demi'
+import { SizeVariant } from '../button'
+import { INPUTGROUP_SETTING } from '../input-group'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  size: {
+    type   : String as PropType<SizeVariant>,
+    default: 'md',
+  },
+  disabled: {
+    type   : Boolean,
+    default: false,
+  },
+  readonly: {
+    type   : Boolean,
+    default: false,
+  },
+  error: {
+    type   : Boolean,
+    default: false,
+  },
+  containerClass: {
+    type: [
+      String,
+      Array,
+      Object,
+    ],
+    default: undefined,
+  },
+})
+
+const slots = defineSlots<{
+  prepend(): VNode[],
+  append(): VNode[],
+}>()
+
+const setting = inject(INPUTGROUP_SETTING, undefined, false)
+
+const classNames = computed(() => {
+  const result: string[] = []
+
+  // eslint-disable-next-line unicorn/explicit-length-check
+  if (setting?.size.value)
+    result.push(`input--${setting?.size.value}`)
+  // eslint-disable-next-line unicorn/explicit-length-check
+  else if (props.size)
+    result.push(`input--${props.size}`)
+
+  if (props.disabled)
+    result.push('input--disabled')
+
+  if (props.readonly)
+    result.push('input--readonly')
+
+  if (props.error)
+    result.push('input--error', 'state--error')
+
+  if (slots.prepend)
+    result.push('input--has-prepend')
+
+  if (slots.append)
+    result.push('input--has-append')
+
+  return result
+})
+</script>

package/dist/components/select/SelectTags.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="select__tags">
+    <template
+      v-for="(item, i) in shownItems"
+      :key="i">
+      <p-label
+        data-testid="select-tag"
+        variant="light"
+        size="xs">
+        {{ item.text }}
+      </p-label>
+    </template>
+    <template v-if="items.length > displayLimit">
+      <p-label
+        data-testid="select-tag-others"
+        variant="light"
+        size="xs">
+        {{ otherText }}
+      </p-label>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, computed } from 'vue-demi'
+import { SelectItem } from '.'
+import pLabel from '../label/Label.vue'
+
+const props = defineProps({
+  items: {
+    type   : Array as PropType<SelectItem[]>,
+    default: () => ([]),
+  },
+  displayLimit: {
+    type   : Number,
+    default: 2,
+  },
+  limitText: {
+    type   : String,
+    default: '+{n} Other(s)',
+  },
+})
+
+const shownItems = computed(() => {
+  return props.items.slice(0, props.displayLimit)
+})
+
+const otherText = computed(() => {
+  return props.limitText.replaceAll('{n}', String(props.items.length - props.displayLimit))
+})
+</script>
+
+<style lang="postcss">
+.select__tags {
+  @apply flex space-x-1 items-center min-h-6;
+}
+</style>

package/dist/components/select/adapter/adapter.d.ts

@@ -5,6 +5,7 @@ export interface AdapterContext {
     keyword: Ref<string>;
     isOpen: Ref<boolean>;
     isLoading: Ref<boolean>;
+    menuEl: Ref<HTMLDivElement>;
 }
 export interface Adapter {
     setup: (context: AdapterContext) => Ref<SelectItem[]>;

package/dist/components/select/adapter/async-adapter.d.ts

@@ -2,4 +2,16 @@ import { SelectItem } from '..';
 import { watch } from 'vue-demi';
 export type LoadFn = (keyword: string, page: number, perPage: number) => Promise<SelectItem[]>;
 export type WatchDeps = Parameters<typeof watch>[0];
-export default function defineAsyncAdapter(loadFn: LoadFn, deps?: WatchDeps): import("./adapter").Adapter;
+export interface AsyncAdapterOptions {
+    /**
+     * Default perPage
+     * @default 20
+     */
+    perPage: number;
+    /**
+     * Typing debounce time
+     * @default 500
+     */
+    debounceTime: number;
+}
+export default function defineAsyncAdapter(loadFn: LoadFn, deps?: WatchDeps, opts?: Partial<AsyncAdapterOptions>): import("./adapter").Adapter;

package/dist/components/select/adapter/async-adapter.mjs

@@ -1,24 +1,20 @@
 import { tryOnMounted } from "@vueuse/shared";
 import { defineAdapter } from "./adapter.mjs";
 import { onFinishTyping, onStartTyping } from "../utils/use-on-typing.mjs";
-import {
-  getCurrentInstance,
-  ref,
-  watch
-} from "vue-demi";
+import { ref, watch } from "vue-demi";
 import { onScrollBottom } from "../utils/use-on-scroll.mjs";
-export default function defineAsyncAdapter(loadFn, deps) {
+import defu from "defu";
+export default function defineAsyncAdapter(loadFn, deps, opts) {
+  const config = defu(opts, { perPage: 20, debounceTime: 500 });
   return defineAdapter({
-    setup({ isLoading, keyword }) {
+    setup({ isLoading, keyword, menuEl }) {
       const options = ref([]);
       const page = ref(1);
       const isFinish = ref(false);
       const isTyping = ref(false);
-      const vm = getCurrentInstance();
-      const menuDiv = ref();
       function load() {
         isLoading.value = true;
-        loadFn(keyword.value, page.value, 20).then((result) => {
+        loadFn(keyword.value, page.value, config.perPage).then((result) => {
           if (Array.isArray(result) && result.length > 0) {
             options.value.push(...result);
             page.value++;
@@ -41,9 +37,6 @@ export default function defineAsyncAdapter(loadFn, deps) {
         });
       }
       tryOnMounted(() => {
-        if (vm?.proxy?.$el) {
-          menuDiv.value = vm.proxy.$el.querySelector(".dropdown__menu");
-        }
         load();
       });
       onStartTyping(keyword, () => {
@@ -53,11 +46,11 @@ export default function defineAsyncAdapter(loadFn, deps) {
       onFinishTyping(keyword, () => {
         isTyping.value = false;
         load();
-      });
+      }, config.debounceTime);
       watch(isTyping, (value) => {
         isLoading.value = value;
       });
-      onScrollBottom(menuDiv, () => {
+      onScrollBottom(menuEl, () => {
         if (!isLoading.value && !isFinish.value)
           load();
       });

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

@@ -2,6 +2,7 @@ export interface SelectItem {
     text: string;
     value: unknown;
     disabled?: boolean;
+    [key: string]: unknown;
 }
 export interface SelectProps {
     modelValue: unknown;
@@ -10,3 +11,4 @@ export interface SelectProps {
 }
 export declare function defineOptions(options: SelectItem[]): SelectItem[];
 export declare function findSelected(items: SelectItem[], value: unknown): SelectItem;
+export declare function filterSelected(items: SelectItem[], value: unknown[]): SelectItem[];

package/dist/components/select/index.mjs

@@ -1,7 +1,10 @@
-import { isEqual } from "../utils/value.mjs";
+import { isEqual, valueIn } from "../utils/value.mjs";
 export function defineOptions(options) {
   return options;
 }
 export function findSelected(items, value) {
   return items.find((item) => isEqual(item.value, value)) ?? { text: "", value: void 0 };
 }
+export function filterSelected(items, value) {
+  return Array.isArray(value) ? items.filter((item) => valueIn(value, item.value)) : [];
+}

package/dist/components/sheet/Sheet.vue

@@ -62,10 +62,9 @@ const props = defineProps({
   },
 })
 
-// eslint-disable-next-line func-call-spacing
 const emit = defineEmits<{
-  (event: 'update:modelValue', value: boolean): void,
-  (event: 'close', value: Event): void,
+  'update:modelValue': [boolean],
+  'close': [Event],
 }>()
 
 const target = ref<HTMLDivElement>()

package/dist/components/sidebar/Sidebar.vue

@@ -10,124 +10,113 @@
     <div
       ref="sidebarMenus"
       data-testid="sidebar-menus"
-      :data-sidebar-menu="brandHeight"
-      :data-bottom-menu="isBottomMenu"
-      class="sidebar__menus"
-      :style="{ 'padding-bottom': bottomHeight }">
-      <slot />
-
-      <div
-        v-if="$slots.bottom"
-        data-testid="sidebar-bottom"
-        class="sidebar__bottom">
-        <slot name="bottom" />
-      </div>
+      class="sidebar__menus">
+      <SidebarContent>
+        <slot />
+      </SidebarContent>
+    </div>
+    <div
+      ref="bottom"
+      data-testid="sidebar-bottom"
+      class="sidebar__bottom">
+      <SidebarContent bottom>
+        <slot />
+      </SidebarContent>
+      <slot name="bottom" />
     </div>
   </aside>
 </template>
 
-<script>
-import { templateRef, useElementSize } from "@vueuse/core";
+<script lang="ts" setup>
 import {
-  defineComponent,
+  PropType,
   computed,
-  ref,
   provide,
-  onMounted
-} from "vue-demi";
-import { SIDEBAR_SETTINGS } from ".";
-import { useSelector } from "../pdf-object/utils/use-selector";
-import { useVModel } from "../input";
-export default defineComponent({
-  props: {
-    variant: {
-      type: String,
-      default: "pills"
-    },
-    align: {
-      type: String,
-      default: "left"
-    },
-    type: {
-      type: String,
-      default: "wide"
-    },
-    fixed: {
-      type: Boolean,
-      default: false
-    },
-    sticky: {
-      type: Boolean,
-      default: false
-    },
-    toggleable: {
-      type: String,
-      default: void 0
-    },
-    modelValue: {
-      type: Boolean,
-      default: true
-    }
+  ref,
+} from 'vue-demi'
+import { SIDEBAR_SETTINGS, TypeVariant } from '.'
+import { useVModel } from '../input'
+import { StyleVariant, AlignVariant } from '../nav'
+import { ToggleableVariant } from '../navbar'
+import SidebarContent from './SidebarContent.vue'
+
+const props = defineProps({
+  variant: {
+    type   : String as PropType<StyleVariant>,
+    default: 'pills',
+  },
+  align: {
+    type   : String as PropType<AlignVariant>,
+    default: 'left',
+  },
+  type: {
+    type   : String as PropType<TypeVariant>,
+    default: 'wide',
   },
+  fixed: {
+    type   : Boolean,
+    default: false,
+  },
+  sticky: {
+    type   : Boolean,
+    default: false,
+  },
+  toggleable: {
+    type   : String as PropType<ToggleableVariant>,
+    default: undefined,
+  },
+  modelValue: {
+    type   : Boolean,
+    default: true,
+  },
+})
+
+defineOptions({
   models: {
-    prop: "modelValue",
-    event: "update:modelValue"
+    prop : 'modelValue',
+    event: 'update:modelValue',
   },
-  emits: ["update:modelValue"],
-  setup(props, { slots }) {
-    provide(SIDEBAR_SETTINGS, {
-      variant: props.variant,
-      align: props.align,
-      type: props.type
-    });
-    const sidebar = templateRef("sidebar");
-    const sidebarBrand = useSelector(".sidebar__brand", sidebar);
-    const brand = useElementSize(sidebarBrand);
-    const sidebarMenus = templateRef("sidebarMenus");
-    const sidebarBottom = useSelector(".sidebar__bottom", sidebarMenus);
-    const { height } = useElementSize(sidebarBottom);
-    const brandHeight = computed(() => {
-      return slots.brand ? `${brand.height.value + titleHeight.value + 16}px` : 0;
-    });
-    const bottomHeight = computed(() => {
-      return isBottomMenu.value && !isDefault.value || !isBottomMenu.value && isDefault.value ? 0 : `${height.value + 16}px`;
-    });
-    const model = useVModel(props);
-    const classNames = computed(() => {
-      const result = [""];
-      if (props.type)
-        result.push(`sidebar--${props.type}`);
-      if (props.align)
-        result.push(`sidebar--${props.align}`);
-      if (props.variant)
-        result.push(`sidebar--${props.variant}`);
-      if (props.fixed)
-        result.push("sidebar--fixed");
-      if (props.sticky)
-        result.push("sidebar--sticky");
-      if (props.toggleable)
-        result.push(`sidebar--toggleable sidebar--toggleable-${props.toggleable}`);
-      if (props.toggleable && props.fixed && model.value)
-        result.push("sidebar--show");
-      return result;
-    });
-    const titleHeight = ref(0);
-    const isBottomMenu = ref(false);
-    const isDefault = ref(false);
-    onMounted(() => {
-      titleHeight.value = document.querySelectorAll(".sidebar .nav--has-title").length * 0.25 * 20;
-      isBottomMenu.value = document.querySelectorAll(".sidebar .sidebar__nav--bottom").length > 0;
-      isDefault.value = document.querySelectorAll(".sidebar .sidebar__nav:not(.sidebar__nav--bottom)").length > 0;
-    });
-    return {
-      classNames,
-      bottomHeight,
-      brandHeight,
-      isBottomMenu,
-      isDefault
-    };
-  }
-});
+})
+
+defineEmits<{
+  'update:modelValue': [boolean],
+}>()
+
+const model  = useVModel(props)
+const bottom = ref<HTMLDivElement>()
+
+const classNames = computed(() => {
+  const result: string[] = ['']
+
+  if (props.type)
+    result.push(`sidebar--${props.type}`)
+
+  if (props.align)
+    result.push(`sidebar--${props.align}`)
+
+  if (props.variant)
+    result.push(`sidebar--${props.variant}`)
+
+  if (props.fixed)
+    result.push('sidebar--fixed')
+
+  if (props.sticky)
+    result.push('sidebar--sticky')
+
+  if (props.toggleable)
+    result.push(`sidebar--toggleable sidebar--toggleable-${props.toggleable}`)
+
+  if (props.toggleable && props.fixed && model.value)
+    result.push('sidebar--show')
+
+  return result
+})
+
+provide(SIDEBAR_SETTINGS, {
+  variant: props.variant,
+  align  : props.align,
+  type   : props.type,
+})
 </script>
 
 <style lang="postcss">
@@ -141,7 +130,7 @@ export default defineComponent({
   --p-sidebar-padding-x: theme(spacing.2);
   --p-sidebar-padding-y: theme(spacing.4);
 
-  @apply bg-[color:var(--p-sidebar-bg)] px-[var(--p-sidebar-padding-x)] py-[var(--p-sidebar-padding-y)];
+  @apply bg-[color:var(--p-sidebar-bg)] px-[var(--p-sidebar-padding-x)] py-[var(--p-sidebar-padding-y)] flex flex-col items-stretch;
   @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
 
   /**
@@ -165,10 +154,10 @@ export default defineComponent({
   * Fixed sidebar
   */
   &&--fixed {
-    @apply fixed z-[var(--p-sidebar-z-index)] top-0 h-full shadow-lg overflow-y-auto;
+    @apply fixed z-[var(--p-sidebar-z-index)] top-0 h-full shadow-lg;
 
     .sidebar__menus {
-      @apply relative min-h-[calc(100%-v-bind(brandHeight))];
+      @apply flex-grow h-full overflow-y-auto py-2;
     }
 
     &:not(.sidebar--right) {
@@ -176,12 +165,8 @@ export default defineComponent({
     }
 
     .sidebar__bottom {
-      @apply absolute -bottom-2 w-[calc(100%+1rem)] -left-2 bg-[color:var(--p-sidebar-bg)];
+      @apply w-full bg-[color:var(--p-sidebar-bg)] flex-shrink-0 pt-2;
       @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
-
-      .sidebar__nav {
-        @apply px-2;
-      }
     }
 
     /**

package/dist/components/sidebar/SidebarBrand.vue

@@ -56,7 +56,7 @@ export default defineComponent({
     @apply dark:text-dark-default;
 
     a {
-      @apply no-underline cursor-pointer hover:no-underline;
+      @apply no-underline cursor-pointer;
 
       & > img {
         @apply max-w-full h-auto;

package/dist/components/sidebar/SidebarContent.vue

@@ -0,0 +1,27 @@
+<template>
+  <render />
+</template>
+
+<script lang="ts" setup>
+import { VNode, h } from 'vue-demi'
+import { findAllChildren, toBoolean } from '../utils/vnode'
+
+const props = defineProps({
+  bottom: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+const slots = defineSlots<{
+  default:() => VNode[],
+}>()
+
+const render = () => {
+  const navs = props.bottom
+    ? findAllChildren(slots.default(), 'SidebarNav').filter((vnode) => toBoolean(vnode.props?.bottom))
+    : findAllChildren(slots.default(), '*').filter((vnode) => toBoolean(vnode.props?.bottom) !== true)
+
+  return navs.map((nav) => h(nav))
+}
+</script>