@weni/unnnic-system 3.31.1-alpha.2 → 3.32.0

package/src/stories/Select.stories.js

@@ -0,0 +1,375 @@
+import UnnnicSelect from '../components/Select/index.vue';
+import UnnnicTag from '../components/Tag/Tag.vue';
+
+const options = [
+  { label: 'Option 1', value: 'option1', altValue: 'alt_value_option1' },
+  { label: 'Option 2', value: 'option2', altValue: 'alt_value_option2' },
+  { label: 'Option 3', value: 'option3', altValue: 'alt_value_option3' },
+  { label: 'Option 4', value: 'option4', altValue: 'alt_value_option4' },
+  { label: 'Option 5', value: 'option5', altValue: 'alt_value_option5' },
+  { label: 'Option 6', value: 'option6', altValue: 'alt_value_option6' },
+  { label: 'Option 7', value: 'option7', altValue: 'alt_value_option7' },
+  { label: 'Option 8', value: 'option8', altValue: 'alt_value_option8' },
+  { label: 'Option 9', value: 'option9', altValue: 'alt_value_option9' },
+  { label: 'Option 10', value: 'option10', disabled: true },
+];
+
+export default {
+  title: 'Form/Select',
+  component: UnnnicSelect,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Select is designed to solve common problems related to option selection.',
+      },
+    },
+  },
+  argTypes: {
+    options: {
+      description:
+        'List of items to be displayed in the options. If an item has a `disabled` key set to `true`, that item will be disabled. By default, the component looks for the `label` and `value` keys to display and update the model, but these are not required if you wish to customize them using the `itemLabel` and `itemValue` props, respectively.',
+    },
+    placeholder: {
+      description: 'Text to be displayed in the placeholder.',
+    },
+    label: {
+      description: 'Text to be displayed in the label.',
+    },
+    modelValue: {
+      description:
+        'Model variable. Its type will always match the return type of the key specified by `itemValue`, or the entire options object when `returnObject` prop is set to `true`.',
+    },
+    returnObject: {
+      description:
+        'Prop to indicate that the full option object should be returned in the v-model.',
+    },
+    itemLabel: {
+      description:
+        'Field of the option item that should be used to render the option label.',
+    },
+    itemValue: {
+      description:
+        'Field of the option item that should be used to return value to v-model.',
+    },
+    type: {
+      description: 'Select state type',
+    },
+    errors: {
+      description:
+        "Error message or messages. When it's an array, the messages will be separated by commas.",
+    },
+    message: {
+      description: 'Help or hint message.',
+    },
+    size: {
+      description: 'Select size',
+    },
+    optionsLines: {
+      description:
+        'Number of options to display at most; if exceeded, scrolling will be enabled.',
+    },
+    enableSearch: {
+      description:
+        'If true, enables a search field displayed inside the options popover. The `update:search` event is emitted on each input.',
+    },
+    search: {
+      description: 'Search value.',
+    },
+    locale: {
+      description: 'Locale for i18n translations.',
+    },
+    disabled: {
+      description: 'Disable the select.',
+    },
+    infiniteScroll: {
+      description:
+        'Enable infinite scroll functionality. When enabled, the component will emit a `scroll-end` event when the user scrolls near the bottom of the options list.',
+    },
+    infiniteScrollDistance: {
+      description:
+        'Distance in pixels from the bottom of the scroll area to trigger the `scroll-end` event. Default is 10.',
+    },
+    infiniteScrollCanLoadMore: {
+      description:
+        'Function that returns a boolean indicating whether more items can be loaded. Used to prevent unnecessary scroll-end events.',
+    },
+  },
+  render: (args) => ({
+    components: { UnnnicSelect },
+    setup() {
+      const handleSearch = (value) => {
+        args.search = value;
+      };
+      return { args, handleSearch };
+    },
+    data() {
+      return {
+        exampleValue: null,
+      };
+    },
+    template: `
+      <div style="width: 300px;">
+        <p>modelValue: {{ exampleValue }}</p>
+        <unnnic-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
+      </div>
+      
+    `,
+  }),
+};
+
+export const Default = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const ReturnObject = {
+  args: {
+    returnObject: true,
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const AlternativeValueKey = {
+  args: {
+    itemValue: 'altValue',
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const AlternativeValueLabel = {
+  args: {
+    itemLabel: 'altValue',
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const Clearable = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    clearable: true,
+  },
+};
+
+export const Disabled = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    disabled: true,
+  },
+};
+
+export const WithSearch = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    enableSearch: true,
+    search: '',
+  },
+};
+
+export const WithStatus = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Customizes option and selected content through the `#option` and `#selected` scoped slots. The status tag lives entirely in the consumer, keeping the Select decoupled from the concept of status.',
+      },
+      source: {
+        code: `<UnnnicSelect
+  v-model="selected"
+  :options="options"
+  label="Representative"
+  placeholder="Select a representative"
+  clearable
+>
+  <template #option="{ label, option }">
+    <span class="select-status__label">{{ label }}</span>
+    <UnnnicTag
+      type="default"
+      size="small"
+      :scheme="statusConfig[option.status].scheme"
+      :text="statusConfig[option.status].text"
+    />
+  </template>
+
+  <template #selected="{ label, option }">
+    <span class="select-status__label">{{ label }}</span>
+    <UnnnicTag
+      type="default"
+      size="small"
+      :scheme="statusConfig[option.status].scheme"
+      :text="statusConfig[option.status].text"
+    />
+  </template>
+</UnnnicSelect>`,
+      },
+    },
+  },
+  render: () => ({
+    components: { UnnnicSelect, UnnnicTag },
+    data() {
+      return {
+        emptyValue: null,
+        selectedValue: 'anna',
+        statusOptions: [
+          { label: 'Ana', value: 'ana', status: 'online' },
+          { label: 'Anna', value: 'anna', status: 'online' },
+          { label: 'Davi', value: 'davi', status: 'lunch' },
+          { label: 'João', value: 'joao', status: 'offline' },
+          { label: 'Ricardo', value: 'ricardo', status: 'offline' },
+        ],
+        statusConfig: {
+          online: { scheme: 'green', text: 'Online' },
+          lunch: { scheme: 'orange', text: 'Lunch' },
+          offline: { scheme: 'gray', text: 'Offline' },
+        },
+      };
+    },
+    template: `
+      <div style="width: 512px; display: flex; flex-direction: column; gap: 32px;">
+        <unnnic-select
+          v-model="emptyValue"
+          :options="statusOptions"
+          label="Representative"
+          placeholder="Select a representative"
+          clearable
+        >
+          <template #option="{ label, option }">
+            <span style="flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ label }}</span>
+            <unnnic-tag
+              type="default"
+              size="small"
+              :scheme="statusConfig[option.status].scheme"
+              :text="statusConfig[option.status].text"
+            />
+          </template>
+          <template #selected="{ label, option }">
+            <span style="flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ label }}</span>
+            <unnnic-tag
+              type="default"
+              size="small"
+              :scheme="statusConfig[option.status].scheme"
+              :text="statusConfig[option.status].text"
+            />
+          </template>
+        </unnnic-select>
+
+        <unnnic-select
+          v-model="selectedValue"
+          :options="statusOptions"
+          label="Representative"
+          placeholder="Select a representative"
+          clearable
+        >
+          <template #option="{ label, option }">
+            <span style="flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ label }}</span>
+            <unnnic-tag
+              type="default"
+              size="small"
+              :scheme="statusConfig[option.status].scheme"
+              :text="statusConfig[option.status].text"
+            />
+          </template>
+          <template #selected="{ label, option }">
+            <span style="flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ label }}</span>
+            <unnnic-tag
+              type="default"
+              size="small"
+              :scheme="statusConfig[option.status].scheme"
+              :text="statusConfig[option.status].text"
+            />
+          </template>
+        </unnnic-select>
+      </div>
+    `,
+  }),
+};
+
+export const WithInfiniteScroll = {
+  render: () => ({
+    components: { UnnnicSelect },
+    data() {
+      return {
+        selectedValue: null,
+        loadedOptions: [],
+        currentPage: 1,
+        totalPages: 10,
+        isLoading: false,
+      };
+    },
+    mounted() {
+      this.loadInitialOptions();
+    },
+    methods: {
+      loadInitialOptions() {
+        this.loadedOptions = this.generateOptions(1);
+      },
+      generateOptions(page) {
+        const startIndex = (page - 1) * 10 + 1;
+        return Array.from({ length: 10 }, (_, i) => ({
+          label: `Option ${startIndex + i}`,
+          value: `option${startIndex + i}`,
+        }));
+      },
+      async handleScrollEnd() {
+        if (this.currentPage >= this.totalPages || this.isLoading) {
+          return;
+        }
+
+        this.isLoading = true;
+
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+
+        this.currentPage++;
+        const newOptions = this.generateOptions(this.currentPage);
+        this.loadedOptions = [...this.loadedOptions, ...newOptions];
+
+        this.isLoading = false;
+
+        this.$refs.selectRef.finishInfiniteScroll();
+      },
+      canLoadMore() {
+        return this.currentPage < this.totalPages && !this.isLoading;
+      },
+    },
+    template: `
+      <div style="width: 300px;">
+        <h3>Infinite Scroll Example</h3>
+        <p style="color: #666; font-size: 14px;">
+          Scroll down in the options list to load more items.
+          <br />
+          Page: {{ currentPage }} / {{ totalPages }}
+          <br />
+          Total options: {{ loadedOptions.length }}
+        </p>
+        <p>Selected: {{ selectedValue }}</p>
+        <unnnic-select
+          ref="selectRef"
+          v-model="selectedValue"
+          :options="loadedOptions"
+          placeholder="Select an option"
+          label="Infinite Scroll Select"
+          :infinite-scroll="true"
+          :infinite-scroll-distance="10"
+          :infinite-scroll-can-load-more="canLoadMore"
+          @scroll-end="handleScrollEnd"
+        />
+      </div>
+    `,
+  }),
+};

package/src/stories/SelectSmart.mdx

@@ -0,0 +1,152 @@
+import { Meta, Source, Story } from "@storybook/addon-docs/blocks";
+
+import * as SelectSmartStories from "./SelectSmart.stories";
+
+<Meta of={SelectSmartStories} />
+
+# SelectSmart
+
+SelectSmart is designed to solve common problems related to option selection.
+It combines three elements: Select, Autocomplete, and AutocompleteSelect, which
+originally didn't follow a consistent pattern and had some bugs. With SelectSmart,
+these components have been unified and improved and it also brings a new design.
+
+> It is a _self-closing_ component, which means it does not support child elements.
+
+> Available in small and medium versions, which can be toggled through the
+> `size` property, accepting the strings "sm" or "md".
+
+<Source
+  language="html"
+  dark
+  code={`
+    <UnnnicSelectSmart v-model="exampleValue" :options="exampleArray" />
+  `}
+/>
+
+---
+
+#### **IMPORTANT:**
+
+To ensure proper functioning of the component, it is fundamental to provide the `v-model`
+(or `value` and `@input`), even if it is empty (`[]`), since it is through this property
+that the selected options are controlled.
+
+The other one required property is `options`, which requires an array of objects in the following format:
+
+| Key         | Description                                                                                                                               | Type   |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------ |
+| value       | **Required.**<br/>Sets the option value. If it is empty, the _label_ of this object will be used as the _placeholder_ of the SelectSmart. | string |
+| label       | **Required.**<br/>Provides user-friendly text that represents the option to the user.                                                     | string |
+| description | _Not required._<br/>Provides an additional description for the option.                                                                    | string |
+
+<Source
+  language="json"
+  dark
+  code={`[
+  {
+    "value": "",
+    "label": "Select some option"  <---- Since the value of this object is empty, this will be the placeholder
+  },
+  {
+    "value": "1",
+    "label": "Option 1",
+  },
+  {
+    "value": "2",
+    "label": "Option 2",
+    "description": "This is the first option"
+  },
+]`}
+/>
+
+> The options will be presented in alphabetical order, following the value of each `label`,
+> regardless of the sequence in which the objects are supplied to the `:options` property.
+> However, if the `orderedByIndex` property is included, the options will be sorted
+> according to the arrangement given to `:options`.
+
+---
+
+<br />
+
+## Default
+
+Allows you to choose from a list.
+
+<Story of={SelectSmartStories.Default} />
+
+## Loading
+
+Variation that signals data loading. Use `isLoading` prop.
+
+<Story of={SelectSmartStories.Loading} />
+
+## Default option selected
+
+For the first option to be selected by default, it is essential that
+there is no object with its `value` field empty.
+
+If your intention is to set a specific option as the default, you can
+accomplish this using the `value` (or `v-model`) property. Make sure that this
+value is passed as an array, and that the object is structured according to the
+pattern of the other options.
+
+<Story of={SelectSmartStories.FirstSelected} />
+
+## Ordered by index
+
+If the `orderedByIndex` property is included, the options will
+be ordered according to the arrangement given to `:options`.
+
+<Story of={SelectSmartStories.OrderedByIndex} />
+
+## Disabled
+
+SelectSmart will respond to the value passed to the `disabled` property,
+becoming disabled when set to _true_ and remaining enabled when set to _false_.
+
+<Story of={SelectSmartStories.Disabled} />
+
+## With descriptions
+
+If you want a more detailed description for your options, you can include the
+`description` key inside the object corresponding to each option.
+
+<Story of={SelectSmartStories.WithDescriptions} />
+
+## Autocomplete
+
+To activate the search functionality, just include the `autocomplete` property.
+The search takes place based on the text of the `label`, without distinction
+between uppercase and lowercase, spaces and accents.
+
+If you want the search bar to be emptied when focusing on the component, use
+the `autocompleteClearOnFocus` property.
+
+Furthermore, it is possible to incorporate the magnifying glass icon on the side (left) of
+the search bar by using the `autocompleteIconLeft` property.
+
+<Story of={SelectSmartStories.Autocomplete} />
+
+## Enable Search By Value
+
+To activate the search by value functionality, just include the `enableSearchByValue` property.
+
+The search takes place based on the text of the `label` or `value`, without distinction
+between uppercase and lowercase, spaces and accents.
+
+<Story of={SelectSmartStories.EnableSearchByValue} />
+
+## Multiple
+
+To use the component version that allows the selection of
+several options, just pass the `multiple` property.
+
+You also have the freedom to customize the message that signals
+when no option has been selected, through the `multipleWithoutSelectsMessage` property.
+
+Typically, components involving multiple options offer a considerable range
+of choices. So, in order to improve the user experience, the `multiple` option
+automatically activates the `autocomplete` feature, it cannot be deactivated.
+
+<Story of={SelectSmartStories.Multiple} />