@privyid/persona 0.17.1 → 0.19.0

package/dist/components/select/Select.vue

@@ -15,9 +15,21 @@
         :placeholder="placeholder"
         :disabled="disabled"
         :readonly="readonly"
+        :clearable="clearable"
+        @clear.prevent="onClear"
         @focus="onFocus">
-        <template #append>
-          <IconArrow class="select__caret" />
+        <template
+          v-if="!noCaret"
+          #append>
+          <slot
+            name="caret"
+            :is-open="isOpen"
+            :toggle="toggleOpen">
+            <IconArrow
+              class="select__caret"
+              data-testid="select-caret-icon"
+              @click="toggleOpen" />
+          </slot>
         </template>
       </p-input>
     </template>
@@ -33,11 +45,17 @@
     </template>
 
     <template v-else>
+      <DropdownHeader
+        v-if="sectionLabel"
+        data-testid="select-label">
+        {{ sectionLabel }}
+      </DropdownHeader>
       <DropdownItem
         v-for="(item, i) in items"
         :key="i"
         data-testid="select-item"
         :class="{ selected: isSelected(item) }"
+        :disabled="Boolean(item.disabled)"
         @click="select(item)">
         <div class="select__option">
           <div class="select__option-text">
@@ -62,7 +80,7 @@
           width="14"
           height="14" />
         <slot name="loading">
-          {{ loadingText }}
+          <span>{{ loadingText }}</span>
         </slot>
       </div>
     </template>
@@ -72,9 +90,10 @@
 <script>
 import Dropdown from "../dropdown/Dropdown.vue";
 import DropdownItem from "../dropdown/DropdownItem.vue";
+import DropdownHeader from "../dropdown/DropdownHeader.vue";
 import pInput from "../input/Input.vue";
-import IconArrow from "@carbon/icons-vue/lib/chevron--down/16";
-import IconCheck from "@carbon/icons-vue/lib/checkmark--filled/16";
+import IconArrow from "@privyid/persona-icon/vue/chevron-down/20.vue";
+import IconCheck from "@privyid/persona-icon/vue/checkmark-circle-solid/20.vue";
 import IconLoading from "../spinner/SpinnerRing.vue";
 import {
   computed,
@@ -83,15 +102,19 @@ import {
   ref,
   watch
 } from "vue-demi";
+import { findSelected } from ".";
 import BasicAdapter from "./adapter/basic-adapter";
 import useLoading from "../overlay/utils/use-loading";
 import { isEqual } from "../utils/value";
 import { tryOnMounted } from "@vueuse/shared";
-import { onStartTyping } from "@vueuse/core";
+import {
+  onStartTyping
+} from "@vueuse/core";
 export default defineComponent({
   components: {
     Dropdown,
     DropdownItem,
+    DropdownHeader,
     pInput,
     IconArrow,
     IconCheck,
@@ -107,7 +130,7 @@ export default defineComponent({
         Object,
         Date
       ],
-      default: ""
+      default: void 0
     },
     selected: {
       type: Object,
@@ -150,9 +173,21 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
     size: {
       type: String,
       default: "md"
+    },
+    sectionLabel: {
+      type: String,
+      default: void 0
+    },
+    noCaret: {
+      type: Boolean,
+      default: false
     }
   },
   models: {
@@ -178,21 +213,11 @@ export default defineComponent({
       isLoading
     };
     const items = props.adapter.setup(context);
-    const model = computed({
-      get() {
-        return items.value.find((item) => isEqual(item.value, props.modelValue)) ?? {
-          text: "",
-          value: void 0
-        };
-      },
-      set(selected) {
-        emit("change", selected);
-        emit("update:modelValue", selected.value);
-        emit("update:selected", selected);
-        if (isOpen.value)
-          emit("userInput", selected);
-      }
-    });
+    const localModel = ref(findSelected(items.value, props.modelValue));
+    const toggleOpen = () => {
+      if (!props.disabled && !props.readonly)
+        isOpen.value = !isOpen.value;
+    };
     const classNames = computed(() => {
       const result = [];
       if (isOpen.value)
@@ -207,22 +232,36 @@ export default defineComponent({
     });
     const search = computed({
       get() {
-        return isOpen.value ? keyword.value : model.value?.text;
+        return isOpen.value ? keyword.value : localModel.value?.text;
       },
       set(value) {
         if (value !== search.value)
           keyword.value = value;
       }
     });
+    watch(() => props.modelValue, (value) => {
+      localModel.value = findSelected(items.value, value);
+    });
     function select(item) {
-      model.value = item;
+      localModel.value = item;
+      emit("change", item);
+      emit("update:selected", item);
+      emit("update:modelValue", item?.value);
+      if (isOpen.value)
+        emit("userInput", item);
     }
     function onFocus() {
       if (!props.disabled && !props.readonly)
         isOpen.value = true;
     }
+    function onClear() {
+      if (isOpen.value)
+        keyword.value = "";
+      else
+        select();
+    }
     function isSelected(item) {
-      return isEqual(item.value, model.value.value);
+      return isEqual(item.value, localModel.value?.value);
     }
     watch(isOpen, (value) => {
       if (!value)
@@ -239,13 +278,14 @@ export default defineComponent({
     });
     return {
       classNames,
-      model,
       isOpen,
       isLoading,
       search,
       items,
+      toggleOpen,
       select,
       onFocus,
+      onClear,
       isSelected
     };
   }
@@ -265,8 +305,9 @@ export default defineComponent({
   }
 
   &__caret {
-    @apply transition-transform duration-150 text-subtle pointer-events-none;
+    @apply transition-transform duration-150 text-subtle;
     @apply dark:text-dark-subtle;
+    @apply cursor-pointer;
   }
 
   &__option {

package/dist/components/select/Select.vue.d.ts

@@ -4,8 +4,8 @@ import { Adapter } from './adapter/adapter';
 import { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
-        default: string;
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        default: undefined;
     };
     selected: {
         type: PropType<SelectItem>;
@@ -46,24 +46,37 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         type: PropType<SizeVariant>;
         default: string;
     };
+    sectionLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
-    model: import("vue-demi").WritableComputedRef<SelectItem>;
     isOpen: import("vue-demi").Ref<boolean>;
     isLoading: import("vue-demi").WritableComputedRef<boolean>;
     search: import("vue-demi").WritableComputedRef<string>;
     items: import("vue-demi").Ref<SelectItem[]>;
-    select: (item: SelectItem) => void;
+    toggleOpen: () => void;
+    select: (item?: SelectItem) => void;
     onFocus: () => void;
+    onClear: () => void;
     isSelected: (item: SelectItem) => boolean;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:selected" | "userInput")[], "change" | "update:modelValue" | "update:selected" | "userInput", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
-        default: string;
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        default: undefined;
     };
     selected: {
         type: PropType<SelectItem>;
@@ -104,10 +117,22 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         type: PropType<SizeVariant>;
         default: string;
     };
+    sectionLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -122,8 +147,11 @@ declare const _default: import("vue-demi").DefineComponent<{
     adapter: Adapter;
     options: string[] | SelectItem[];
     placeholder: string;
+    noCaret: boolean;
     selected: SelectItem;
+    clearable: boolean;
     emptyText: string;
     loadingText: string;
+    sectionLabel: string;
 }, {}>;
 export default _default;

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

@@ -1,6 +1,7 @@
 export interface SelectItem {
     text: string;
     value: unknown;
+    disabled?: boolean;
 }
 export interface SelectProps {
     modelValue: unknown;
@@ -8,3 +9,4 @@ export interface SelectProps {
     options?: SelectItem[] | string[];
 }
 export declare function defineOptions(options: SelectItem[]): SelectItem[];
+export declare function findSelected(items: SelectItem[], value: unknown): SelectItem;

package/dist/components/select/index.mjs

@@ -1,3 +1,7 @@
+import { isEqual } 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 };
+}

package/dist/components/sidebar/Sidebar.vue.d.ts

@@ -69,9 +69,9 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    fixed: boolean;
     variant: StyleVariant;
     type: TypeVariant;
-    fixed: boolean;
     modelValue: boolean;
     align: AlignVariant;
     toggleable: ToggleableVariant;

package/dist/components/sidebar/SidebarNav.vue

@@ -3,8 +3,12 @@
     v-if="title"
     class="sidebar__title"
     data-testid="sidebar-title"
-    :class="{ 'sidebar__title__collapsible' : (collapsible && type !== 'narrow') }"
-    @click.prevent="collapse">
+    :class="{
+      'sidebar__title__collapsible': (collapsible && type !== 'narrow'),
+      'sidebar__title--collapsed': !isExpand,
+    }"
+    v-bind="$attrs"
+    @click.prevent="toggleExpand">
     <Caption
       weight="bold"
       transform="capitalize">
@@ -23,17 +27,22 @@
       data-testid="sidebar-title-caret"
       class="sidebar__title__caret" />
   </div>
-  <Nav
+  <Collapse
     v-if="!bottom"
-    class="sidebar__nav"
-    data-testid="sidebar-nav"
-    vertical
-    :title="title"
-    :variant="variant"
-    :condensed="condensed"
-    :align="align">
-    <slot />
-  </Nav>
+    :model-value="isExpand">
+    <Nav
+      ref="root"
+      class="sidebar__nav"
+      :class="{ 'sidebar__nav--collapsed' : !isExpand }"
+      data-testid="sidebar-nav"
+      vertical
+      :title="title"
+      :variant="variant"
+      :condensed="condensed"
+      :align="align">
+      <slot />
+    </Nav>
+  </Collapse>
   <template v-else>
     <div class="sidebar__bottom">
       <Nav
@@ -55,20 +64,24 @@
 import {
   computed,
   defineComponent,
-  inject
+  inject,
+  ref
 } from "vue-demi";
 import Nav from "../nav/Nav.vue";
 import Caption from "../caption/Caption.vue";
 import Text from "../text/Text.vue";
 import { SIDEBAR_SETTINGS } from ".";
+import Collapse from "../collapse/Collapse.vue";
 import IconArrow from "@privyid/persona-icon/vue/chevron-down/16.vue";
 export default defineComponent({
   components: {
     Nav,
     Caption,
     Text,
-    IconArrow
+    IconArrow,
+    Collapse
   },
+  inheritAttrs: false,
   props: {
     title: {
       type: String,
@@ -100,25 +113,24 @@ export default defineComponent({
     const variant = settings?.variant;
     const align = settings?.align;
     const type = settings?.type;
+    const isExpand = ref(true);
     const classNames = computed(() => {
       const result = [""];
       if (props.bottom)
         result.push("sidebar__nav--bottom");
       return result;
     });
-    function collapse(event) {
-      if (props.collapsible && props.title && type !== "narrow") {
-        const title = event.target.closest(".sidebar__title");
-        title?.classList.toggle("sidebar__title--collapsed");
-        title?.nextElementSibling?.classList.toggle("sidebar__nav--collapsed");
-      }
+    function toggleExpand() {
+      if (props.collapsible)
+        isExpand.value = !isExpand.value;
     }
     return {
+      isExpand,
       variant,
       align,
       type,
       classNames,
-      collapse
+      toggleExpand
     };
   }
 });
@@ -138,10 +150,6 @@ export default defineComponent({
     .nav__title {
       @apply hidden;
     }
-
-    &&--collapsed {
-      @apply hidden;
-    }
   }
 
   &&--narrow {
@@ -213,7 +221,7 @@ export default defineComponent({
     @apply relative z-1 flex items-center justify-between -mb-9 px-3 mt-5;
 
     &__collapsible {
-      @apply cursor-pointer;
+      @apply cursor-pointer select-none;
     }
 
     &__caret {
@@ -222,7 +230,7 @@ export default defineComponent({
 
     &&--collapsed {
       .sidebar__title__caret {
-        @apply rotate-0 ease-in-out duration-150;
+        @apply rotate-0;
       }
     }
 

package/dist/components/sidebar/SidebarNav.vue.d.ts

@@ -24,11 +24,12 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }, {
+    isExpand: import("vue-demi").Ref<boolean>;
     variant: import("../nav").StyleVariant | undefined;
     align: import("../nav").AlignVariant | undefined;
     type: import(".").TypeVariant | undefined;
     classNames: import("vue-demi").ComputedRef<string[]>;
-    collapse: (event: Event) => void;
+    toggleExpand: () => void;
 }, 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;