WDS-125 extend select options menu

.changeset/four-readers-battle.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feat**(`SSelect`): add option groups with headers and select all buttons

.changeset/thin-mirrors-fly.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SSelect`): make select options menu width same as trigger's one

packages/ui/etc/api/ui.api.md

@@ -536,7 +536,7 @@ shortcuts: DatePickerOptions;
 // @public (undocumented)
 export const SDropdown: DefineComponent<__VLS_TypePropsToRuntimeProps_10<{
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
@@ -545,7 +545,7 @@ inline?: boolean | undefined;
 noAutoClose?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_10<{
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
@@ -560,7 +560,7 @@ export const SELECT_API_KEY: InjectionKey<SelectApi<any>>;
 // Warning: (ae-forgotten-export) The symbol "UseSelectModelReturn" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export interface SelectApi<T> extends DeepReadonly<UnwrapRef<UseSelectModelReturn<T>>> {
+export interface SelectApi<T> extends UnwrapRef<UseSelectModelReturn<T>> {
     // (undocumented)
     readonly disabled: boolean;
     // (undocumented)
@@ -573,7 +573,7 @@ export interface SelectApi<T> extends DeepReadonly<UnwrapRef<UseSelectModelRetur
     // (undocumented)
     readonly noAutoClose: boolean;
     // (undocumented)
-    readonly options: DeepReadonly<UnwrapRef<SelectOption<T>>[]>;
+    readonly options: UnwrapRef<SelectOption<T>[] | SelectOptionGroup<T>[]>;
     // (undocumented)
     readonly size: SelectSize;
 }
@@ -595,6 +595,16 @@ export interface SelectOption<T = any> {
     value: T;
 }
 
+// @public (undocumented)
+export interface SelectOptionGroup<T = any> {
+    // (undocumented)
+    header?: string;
+    // (undocumented)
+    items: SelectOption<T>[];
+    // (undocumented)
+    selectAllBtn?: boolean;
+}
+
 // @public (undocumented)
 export const SelectOptionType: {
     readonly RadioOrCheckbox: "rad-or-check";
@@ -903,6 +913,7 @@ hideDelay: {
 type: (StringConstructor | NumberConstructor)[];
 default: number;
 };
+sameWidth: BooleanConstructor;
 }, () => (VNode<RendererNode, RendererElement, {
 [key: string]: any;
 }> | null)[], unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("update:show" | "click-outside")[], "update:show" | "click-outside", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<    {
@@ -933,6 +944,7 @@ hideDelay: {
 type: (StringConstructor | NumberConstructor)[];
 default: number;
 };
+sameWidth: BooleanConstructor;
 }>> & {
 "onUpdate:show"?: ((...args: any[]) => any) | undefined;
 "onClick-outside"?: ((...args: any[]) => any) | undefined;
@@ -944,6 +956,7 @@ skidding: string | number;
 distance: string | number;
 showDelay: string | number;
 hideDelay: string | number;
+sameWidth: boolean;
 }>;
 
 // @public (undocumented)
@@ -953,15 +966,24 @@ wrapperAttrs: {
 type: ObjectConstructor;
 default: null;
 };
+innerWrapperAttrs: {
+type: ObjectConstructor;
+default: null;
+};
 }, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<    {
 eager: BooleanConstructor;
 wrapperAttrs: {
 type: ObjectConstructor;
 default: null;
 };
+innerWrapperAttrs: {
+type: ObjectConstructor;
+default: null;
+};
 }>>, {
 eager: boolean;
 wrapperAttrs: Record<string, any>;
+innerWrapperAttrs: Record<string, any>;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
@@ -981,8 +1003,8 @@ lineHeight?: number | undefined;
 percent: number;
 lineHeight: number;
 }>>>, {
-percent: number;
 lineHeight: number;
+percent: number;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
@@ -1038,15 +1060,15 @@ radioSelector: string;
 // @public (undocumented)
 export const SSelect: DefineComponent<__VLS_TypePropsToRuntimeProps_9<{
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
 size?: SelectSize | undefined;
 noAutoClose?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_9<{
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 label?: string | undefined;
@@ -1062,12 +1084,13 @@ export const SSelectBase: DefineComponent<__VLS_WithDefaults_9<__VLS_TypePropsTo
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 size?: SelectSize | undefined;
 label?: string | null | undefined;
 mandatory?: boolean | undefined;
 syncMenuAndInputWidths?: boolean | undefined;
 noAutoClose?: boolean | undefined;
+sameWidthPopper?: boolean | undefined;
 }>, {
 size: "md";
 options: () => never[];
@@ -1083,12 +1106,13 @@ label: null;
 disabled?: boolean | undefined;
 multiple?: boolean | undefined;
 modelValue?: any;
-options?: SelectOption<any>[] | undefined;
+options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
 size?: SelectSize | undefined;
 label?: string | null | undefined;
 mandatory?: boolean | undefined;
 syncMenuAndInputWidths?: boolean | undefined;
 noAutoClose?: boolean | undefined;
+sameWidthPopper?: boolean | undefined;
 }>, {
 size: "md";
 options: () => never[];
@@ -1105,10 +1129,10 @@ modelValue: any;
 multiple: boolean;
 size: SelectSize;
 disabled: boolean;
-options: SelectOption[];
+options: SelectOption[] | SelectOptionGroup[];
 label: string | null;
-syncMenuAndInputWidths: boolean;
 noAutoClose: boolean;
+syncMenuAndInputWidths: boolean;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
@@ -1378,11 +1402,11 @@ onSelect?: ((args_0: TableRow[], args_1: TableRow) => any) | undefined;
 }, {
 data: TableRow[];
 height: string | number;
+maxHeight: string | number;
 defaultSort: {
 prop: string;
 order: TableColumnSortOrder;
 } | null;
-maxHeight: string | number;
 fit: boolean;
 showHeader: boolean;
 highlightCurrentRow: boolean;
@@ -1546,10 +1570,11 @@ default: boolean;
 }>>, {
 type: "default" | "details" | "selection" | "expand";
 width: string;
+minWidth: string;
 label: string;
 sortable: boolean | "custom";
+selectable: TableColumnRowSelectableFunc_2;
 prop: string;
-minWidth: string;
 sortMethod: <T>(a: T, b: T) => number;
 sortBy: TableColumnSortBy_2;
 sortOrders: TableColumnSortOrder_2[];
@@ -1559,7 +1584,6 @@ align: "left" | "right" | "center";
 headerAlign: "left" | "right" | "center" | null;
 className: string;
 labelClassName: string;
-selectable: TableColumnRowSelectableFunc_2;
 reserveSelection: boolean;
 }>;
 
@@ -1741,9 +1765,9 @@ secondaryButtonText: string;
 "onClick:secondary-button"?: ((...args: any[]) => any) | undefined;
 }, {
 placement: BasePlacement;
+content: string;
 header: string;
 wrapperTag: string | object;
-content: string;
 primaryButtonText: string;
 secondaryButtonText: string;
 }>;

packages/ui/src/components/Popover/SPopover.ts

@@ -1,5 +1,5 @@
 import { Ref, cloneVNode, PropType } from 'vue'
-import { Placement, placements, Instance } from '@popperjs/core'
+import { Placement, placements, Instance, State } from '@popperjs/core'
 import { not, or } from '@vueuse/core'
 import { usePopper } from '@/composables/popper'
 import { PopoverApi, POPOVER_API_KEY } from './api'
@@ -129,6 +129,7 @@ export default /* @__PURE__ */ defineComponent({
       type: [Number, String],
       default: 0,
     },
+    sameWidth: Boolean,
   },
   emits: ['update:show', 'click-outside'],
   setup(props, { slots, emit }) {
@@ -162,6 +163,20 @@ export default /* @__PURE__ */ defineComponent({
             name: 'offset',
             options: { offset: computed(() => [skidding.value, distance.value]) },
           },
+          shallowReactive({
+            name: 'sameWidth',
+            enabled: props.sameWidth,
+            phase: 'beforeWrite' as const,
+            requires: ['computeStyles'],
+            fn: ({ state }: { state: State }) => {
+              state.styles.popper.width = `${state.rects.reference.width}px`
+            },
+            effect: ({ state }: { state: State }) => {
+              if (state.elements.reference instanceof HTMLElement) {
+                state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`
+              }
+            },
+          }),
         ],
       }),
     })

packages/ui/src/components/Popover/SPopoverWrappedTransition.vue

@@ -15,6 +15,10 @@ const props = defineProps({
     type: Object,
     default: null,
   },
+  innerWrapperAttrs: {
+    type: Object,
+    default: null,
+  },
 })
 
 const api = usePopoverApi()
@@ -55,6 +59,7 @@ onScopeDispose(() => {
       <span
         v-if="contentIf"
         v-show="contentShow"
+        v-bind="innerWrapperAttrs"
       >
         <slot />
       </span>

packages/ui/src/components/Select/SDropdown.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { SelectOption, SelectButtonType, SelectOptionType, SelectSize } from './types'
+import { SelectOption, SelectButtonType, SelectOptionType, SelectSize, SelectOptionGroup } from './types'
 import SSelectBase from './SSelectBase.vue'
 import SSelectButton from './SSelectButton.vue'
 import SSelectDropdown from './SSelectDropdown.vue'
 
 const props = defineProps<{
   modelValue?: any
-  options?: SelectOption[]
+  options?: SelectOption[] | SelectOptionGroup[]
   disabled?: boolean
   multiple?: boolean
   label?: string

packages/ui/src/components/Select/SSelect.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { SelectOption, SelectOptionType, SelectSize } from './types'
+import { SelectOption, SelectOptionGroup, SelectOptionType, SelectSize } from './types'
 import SSelectBase from './SSelectBase.vue'
 import SSelectInput from './SSelectInput.vue'
 import SSelectDropdown from './SSelectDropdown.vue'
 
 defineProps<{
   modelValue?: any
-  options?: SelectOption[]
+  options?: SelectOption[] | SelectOptionGroup[]
   disabled?: boolean
   multiple?: boolean
   label?: string
@@ -16,7 +16,10 @@ defineProps<{
 </script>
 
 <template>
-  <SSelectBase v-bind="{ ...$attrs, ...$props } as any">
+  <SSelectBase
+    v-bind="{ ...$attrs, ...$props } as any"
+    same-width-popper
+  >
     <template #control>
       <SSelectInput>
         <template #label="binding">

packages/ui/src/components/Select/SSelectBase.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectSize, SelectOption } from './types'
+import { SelectSize, SelectOption, SelectOptionGroup } from './types'
 import { useSelectModel } from './use-model'
 import { SelectApi, SELECT_API_KEY } from './api'
 import { and, not } from '@vueuse/core'
@@ -11,7 +11,7 @@ const props = withDefaults(
     multiple?: boolean
 
     modelValue?: any
-    options?: SelectOption[]
+    options?: SelectOption[] | SelectOptionGroup[]
 
     size?: SelectSize
 
@@ -41,6 +41,11 @@ const props = withDefaults(
      * Turn on this prop to disable auto-close.
      */
     noAutoClose?: boolean
+
+    /**
+     * Makes popper same width as trigger.
+     */
+    sameWidthPopper?: boolean
   }>(),
   {
     size: SelectSize.Md,
@@ -72,7 +77,7 @@ const [showPopper, togglePopper] = useToggle(false)
 // close popper if select is disabled
 whenever(and(disabled, showPopper), () => togglePopper(false), { immediate: true })
 
-const api = readonly({
+const api: SelectApi<any> = reactive({
   ...modeling,
   multiple,
   options,
@@ -82,7 +87,7 @@ const api = readonly({
   menuToggle: togglePopper,
   size,
   noAutoClose,
-}) as SelectApi<any>
+})
 
 provide(SELECT_API_KEY, api)
 </script>
@@ -91,6 +96,7 @@ provide(SELECT_API_KEY, api)
   <div>
     <SPopover
       v-model:show="showPopper"
+      :same-width="sameWidthPopper"
       placement="bottom-start"
       trigger="manual"
       distance="4"
@@ -107,6 +113,7 @@ provide(SELECT_API_KEY, api)
           name="s-select-dropdown-transition"
           eager
           :wrapper-attrs="{ 'class': 'z-10' }"
+          :inner-wrapper-attrs="{ 'class': { 'w-full': sameWidthPopper } }"
         >
           <slot name="dropdown" />
         </SPopoverWrappedTransition>