vueless 0.0.592 → 0.0.594

package/ui.form-select/{config.js → config.ts}

@@ -138,8 +138,9 @@ export default /*tw*/ {
     size: "md",
     labelAlign: "topInside",
     openDirection: "auto",
-    labelKey: "label",
     valueKey: "id",
+    labelKey: "label",
+    groupLabelKey: "label",
     optionsLimit: 0,
     visibleOptions: 8,
     multiple: false,

package/ui.form-select/{constants.js → constants.ts}

@@ -11,9 +11,4 @@ export const DIRECTION = {
 
 export const KEYS = {
   enter: "Enter",
-  tab: "Tab",
-};
-
-export const KEY_CODES = {
-  enter: 13,
 };

package/ui.form-select/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.form-select/storybook/{stories.js → stories.ts}

@@ -11,6 +11,20 @@ import UBadge from "../../ui.text-badge/UBadge.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import ULink from "../../ui.button-link/ULink.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { Props } from "../types.ts";
+
+interface USelectArgs extends Props {
+  slotTemplate?: string;
+  enum: "size" | "openDirection";
+}
+
+interface SelectOption {
+  id: string | number;
+  label: string;
+  badge?: string;
+}
+
 export default {
   id: "3080",
   title: "Form Inputs & Controls / Select",
@@ -31,18 +45,18 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(USelect.__name),
       story: {
         height: "280px",
       },
     },
-    ...getDocsDescription(USelect.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<USelectArgs> = (args: USelectArgs) => ({
   components: { USelect, UIcon, UBadge, ULink },
   setup() {
-    function getSelectedBadge(options, currentValue) {
+    function getSelectedBadge(options: SelectOption[], currentValue: string | number) {
       return options?.find((option) => option.id === currentValue);
     }
 
@@ -52,17 +66,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <USelect v-bind="args" v-model="args.modelValue">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </USelect>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<USelectArgs> = (args: USelectArgs, { argTypes }) => ({
   components: { USelect, URow },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `
@@ -79,7 +93,7 @@ const EnumVariantTemplate = (args, { argTypes }) => ({
   `,
 });
 
-const GroupValuesTemplate = (args) => ({
+const GroupValuesTemplate: StoryFn<USelectArgs> = (args: USelectArgs) => ({
   components: { USelect },
   setup() {
     return {
@@ -121,7 +135,6 @@ OpenDirection.args = { enum: "openDirection" };
 export const GroupValue = GroupValuesTemplate.bind({});
 GroupValue.args = {
   modelValue: "",
-  modelValueMultiple: [],
   groupValueKey: "libs",
   groupLabelKey: "language",
   labelKey: "name",
@@ -162,9 +175,6 @@ Description.args = { description: "some description text" };
 export const OptionsLimit2 = DefaultTemplate.bind({});
 OptionsLimit2.args = { optionsLimit: 2 };
 
-export const NoClear = DefaultTemplate.bind({});
-NoClear.args = { noClear: true };
-
 export const AddOption = DefaultTemplate.bind({});
 AddOption.args = { addOption: true };
 
@@ -179,7 +189,7 @@ OptionIsHidden.args = {
 };
 
 export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size", multiple: true, multipleModelValue: [] };
+Sizes.args = { enum: "size", multiple: true, modelValue: [] };
 
 export const SlotToggle = DefaultTemplate.bind({});
 SlotToggle.args = {

package/ui.form-select/types.ts

@@ -0,0 +1,134 @@
+import defaultConfig from "./config.ts";
+
+import type { Option } from "../ui.dropdown-list/types.ts";
+import type { ComponentConfig } from "../types.ts";
+
+export type Config = typeof defaultConfig;
+export type IconSize = "xs" | "sm" | "md";
+
+export interface Props {
+  /**
+   * Select value.
+   */
+  modelValue?: string | number | (string | number)[];
+
+  /**
+   * Select options.
+   */
+  options?: Option[];
+
+  /**
+   * Select label.
+   */
+  label?: string;
+
+  /**
+   * Label placement.
+   */
+  labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
+
+  /**
+   * Select placeholder.
+   */
+  placeholder?: string;
+
+  /**
+   * Select description.
+   */
+  description?: string;
+
+  /**
+   * Select error message.
+   */
+  error?: string;
+
+  /**
+   * Select size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Left icon name.
+   */
+  leftIcon?: string;
+
+  /**
+   * Right icon name.
+   */
+  rightIcon?: string;
+
+  /**
+   * Select open direction.
+   */
+  openDirection?: "auto" | "top" | "bottom";
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey?: string;
+
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey?: string;
+
+  /**
+   * Set a name of the property containing the group label.
+   */
+  groupLabelKey?: string;
+
+  /**
+   * Set a name of the property containing the group values.
+   */
+  groupValueKey?: string;
+
+  /**
+   * Number of options displayed in the dropdown.
+   */
+  optionsLimit?: number;
+
+  /**
+   * Number of options you can see without a scroll.
+   */
+  visibleOptions?: number;
+
+  /**
+   * Allow clearing selected value.
+   */
+  clearable?: boolean;
+
+  /**
+   * Allows multiple selection.
+   */
+  multiple?: boolean;
+
+  /**
+   * Allows to search value in a list.
+   */
+  searchable?: boolean;
+
+  /**
+   * Disable the select.
+   */
+  disabled?: boolean;
+
+  /**
+   * Show "Add new option" button in the list.
+   */
+  addOption?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.form-select/utilSelect.ts

@@ -0,0 +1,122 @@
+import type { Option } from "../ui.dropdown-list/types.ts";
+
+export function filterOptions(options: Option[], search: string, labelKey: string) {
+  if (!search) return options;
+
+  return options
+    .filter((option) => {
+      return interpolateLabel(option, labelKey).toLowerCase().includes(search.toLowerCase());
+    })
+    .sort((a, b) => {
+      const aOptionIndex = interpolateLabel(a, labelKey).indexOf(search);
+      const bOptionIndex = interpolateLabel(b, labelKey).indexOf(search);
+
+      return aOptionIndex - bOptionIndex;
+    });
+}
+
+export function filterGroups(
+  options: Option[],
+  search: string,
+  label: string,
+  groupValueKey: string,
+  groupLabelKey: string,
+): Option[] {
+  return options
+    .map((option) => {
+      const group = option[groupValueKey];
+
+      if (Array.isArray(group)) {
+        return {
+          [groupLabelKey]: option[groupLabelKey],
+          [groupValueKey]: filterOptions(group, search, label),
+        };
+      }
+    })
+    .reduce((accumulator: Option[], group) => {
+      if (!group) return accumulator;
+
+      const groupValues = group[groupValueKey];
+
+      if (Array.isArray(groupValues) && groupValues.length) {
+        accumulator.push({ groupLabel: String(group[groupLabelKey] || "") });
+
+        return accumulator.concat(groupValues);
+      }
+
+      return accumulator;
+    }, []);
+}
+
+export function removeSelectedValues(
+  options: Option[],
+  selectedValues: (string | number)[],
+  valueKey: string,
+  groupValueKey?: string,
+): Option[] {
+  if (!groupValueKey) {
+    return options.filter((option) => {
+      const value = option[valueKey];
+
+      return typeof value === "string" || typeof value === "number"
+        ? !selectedValues.includes(value)
+        : false;
+    });
+  }
+
+  return options
+    .map((option) => {
+      if (!Array.isArray(option[groupValueKey])) return;
+
+      const filteredGroup = option[groupValueKey].filter((item) => {
+        const value = item[valueKey];
+
+        return typeof value === "string" || typeof value === "number"
+          ? !selectedValues.includes(value) && !item.isSubGroup
+          : false;
+      });
+
+      return filteredGroup.length ? { ...option, [groupValueKey]: filteredGroup } : null;
+    })
+    .filter((option): option is Option => !!option);
+}
+
+export function getCurrentOption(
+  options: Option[],
+  selectedValue: string | number | Option,
+  valueKey: string,
+  groupValueKey?: string,
+) {
+  const value = typeof selectedValue === "object" ? selectedValue?.[valueKey] : selectedValue;
+
+  const currentOption = groupValueKey
+    ? getGroupOption(options, selectedValue, valueKey, groupValueKey)
+    : options.find((option) => option[valueKey] === value);
+
+  return currentOption || ({} as Option);
+}
+
+function getGroupOption(
+  options: Option[],
+  selectedValue: string | number | Option,
+  valueKey: string,
+  groupValueKey: string,
+) {
+  const group = options.find((option) => {
+    return Array.isArray(option[groupValueKey])
+      ? option[groupValueKey].find((value) => value[valueKey] === selectedValue)
+      : false;
+  });
+
+  const groupValues = group?.[groupValueKey] || [];
+
+  return Array.isArray(groupValues)
+    ? groupValues.find((value) => value[valueKey] === selectedValue)
+    : undefined;
+}
+
+function interpolateLabel(option: Option, label: string) {
+  const interpolatedLabel = label ? option[label] : option;
+
+  return interpolatedLabel !== "object" ? String(interpolatedLabel) : "";
+}

package/ui.form-switch/storybook/stories.ts

@@ -28,7 +28,9 @@ export default {
     ...getArgTypes(USwitch.__name),
   },
   parameters: {
-    ...getDocsDescription(USwitch.__name),
+    docs: {
+      ...getDocsDescription(USwitch.__name),
+    },
   },
 } as Meta;
 

package/ui.form-textarea/storybook/stories.ts

@@ -29,7 +29,9 @@ export default {
     modelValue: { control: { type: "text" } },
   },
   parameters: {
-    ...getDocsDescription(UTextarea.__name),
+    docs: {
+      ...getDocsDescription(UTextarea.__name),
+    },
   },
 } as Meta;
 

package/ui.image-avatar/storybook/stories.ts

@@ -26,7 +26,9 @@ export default {
     ...getArgTypes(UAvatar.__name),
   },
   parameters: {
-    ...getDocsDescription(UAvatar.__name),
+    docs: {
+      ...getDocsDescription(UAvatar.__name),
+    },
   },
 } as Meta;
 

package/ui.image-icon/storybook/stories.ts

@@ -27,7 +27,9 @@ export default {
     ...getArgTypes(UIcon.__name),
   },
   parameters: {
-    ...getDocsDescription(UIcon.__name),
+    docs: {
+      ...getDocsDescription(UIcon.__name),
+    },
   },
 } as Meta;
 

package/ui.loader/storybook/stories.ts

@@ -29,7 +29,9 @@ export default {
     ...getArgTypes(ULoader.__name),
   },
   parameters: {
-    ...getDocsDescription(ULoader.__name),
+    docs: {
+      ...getDocsDescription(ULoader.__name),
+    },
   },
 } as Meta;
 

package/ui.loader-overlay/storybook/stories.ts

@@ -27,11 +27,11 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(ULoaderOverlay.__name),
       story: {
         height: "420px",
       },
     },
-    ...getDocsDescription(ULoaderOverlay.__name),
   },
 } as Meta;
 

package/ui.loader-progress/storybook/stories.ts

@@ -25,7 +25,9 @@ export default {
     ...getArgTypes(ULoaderProgress.__name),
   },
   parameters: {
-    ...getDocsDescription(ULoaderProgress.__name),
+    docs: {
+      ...getDocsDescription(ULoaderProgress.__name),
+    },
   },
 } as Meta;
 

package/ui.navigation-progress/storybook/stories.ts

@@ -28,7 +28,9 @@ export default {
     ...getArgTypes(UProgress.__name),
   },
   parameters: {
-    ...getDocsDescription(UProgress.__name),
+    docs: {
+      ...getDocsDescription(UProgress.__name),
+    },
   },
 } as Meta;
 

package/ui.navigation-tab/storybook/stories.ts

@@ -26,7 +26,9 @@ export default {
     ...getArgTypes(UTab.__name),
   },
   parameters: {
-    ...getDocsDescription(UTab.__name),
+    docs: {
+      ...getDocsDescription(UTab.__name),
+    },
   },
 } as Meta;
 

package/ui.navigation-tabs/storybook/stories.ts

@@ -31,7 +31,9 @@ export default {
     ...getArgTypes(UTabs.__name),
   },
   parameters: {
-    ...getDocsDescription(UTabs.__name),
+    docs: {
+      ...getDocsDescription(UTabs.__name),
+    },
   },
 } as Meta;
 

package/ui.other-dot/storybook/stories.ts

@@ -26,7 +26,9 @@ export default {
     ...getArgTypes(UDot.__name),
   },
   parameters: {
-    ...getDocsDescription(UDot.__name),
+    docs: {
+      ...getDocsDescription(UDot.__name),
+    },
   },
 } as Meta;
 

package/ui.text-alert/storybook/stories.ts

@@ -31,7 +31,9 @@ export default {
     ...getArgTypes(UAlert.__name),
   },
   parameters: {
-    ...getDocsDescription(UAlert.__name),
+    docs: {
+      ...getDocsDescription(UAlert.__name),
+    },
   },
 } as Meta;
 

package/ui.text-badge/storybook/stories.ts

@@ -29,7 +29,9 @@ export default {
     ...getArgTypes(UBadge.__name),
   },
   parameters: {
-    ...getDocsDescription(UBadge.__name),
+    docs: {
+      ...getDocsDescription(UBadge.__name),
+    },
   },
 } as Meta;
 

package/ui.text-block/storybook/stories.ts

@@ -24,7 +24,9 @@ export default {
     ...getArgTypes(UText.__name),
   },
   parameters: {
-    ...getDocsDescription(UText.__name),
+    docs: {
+      ...getDocsDescription(UText.__name),
+    },
   },
   args: {},
 } as Meta;

package/ui.text-empty/storybook/stories.ts

@@ -30,7 +30,9 @@ export default {
     ...getArgTypes(UEmpty.__name),
   },
   parameters: {
-    ...getDocsDescription(UEmpty.__name),
+    docs: {
+      ...getDocsDescription(UEmpty.__name),
+    },
   },
 } as Meta;
 

package/ui.text-file/storybook/stories.ts

@@ -26,7 +26,9 @@ export default {
     ...getArgTypes(UFile.__name),
   },
   parameters: {
-    ...getDocsDescription(UFile.__name),
+    docs: {
+      ...getDocsDescription(UFile.__name),
+    },
   },
 } as Meta;
 

package/ui.text-files/storybook/stories.ts

@@ -29,7 +29,9 @@ export default {
     ...getArgTypes(UFiles.__name),
   },
   parameters: {
-    ...getDocsDescription(UFiles.__name),
+    docs: {
+      ...getDocsDescription(UFiles.__name),
+    },
   },
 } as Meta;
 

package/ui.text-header/storybook/stories.ts

@@ -27,7 +27,9 @@ export default {
     ...getArgTypes(UHeader.__name),
   },
   parameters: {
-    ...getDocsDescription(UHeader.__name),
+    docs: {
+      ...getDocsDescription(UHeader.__name),
+    },
   },
 } as Meta;
 

package/ui.text-money/storybook/stories.ts

@@ -34,7 +34,9 @@ export default {
     ...getArgTypes(UMoney.__name),
   },
   parameters: {
-    ...getDocsDescription(UMoney.__name),
+    docs: {
+      ...getDocsDescription(UMoney.__name),
+    },
   },
 } as Meta;
 

package/ui.text-notify/storybook/stories.ts

@@ -28,11 +28,11 @@ export default {
   },
   parameters: {
     docs: {
+      ...getDocsDescription(UNotify.__name),
       story: {
         height: "280px",
       },
     },
-    ...getDocsDescription(UNotify.__name),
   },
 } as Meta;
 

package/utils/storybook.ts

@@ -65,13 +65,11 @@ export function getSlotNames(componentName: string | undefined) {
  * Create story param config to show component description with a link on GitHub.
  */
 export function getDocsDescription(componentName: string | undefined) {
-  if (!componentName) return;
+  if (!componentName) return {};
 
   return {
-    docs: {
-      description: {
-        component: `The \`${componentName}\` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/${COMPONENTS[componentName as ComponentNames]})`,
-      },
+    description: {
+      component: `The \`${componentName}\` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/${COMPONENTS[componentName as ComponentNames]})`,
     },
   };
 }