@weni/unnnic-system 3.9.1-alpha.4 → 3.9.2

package/src/stories/SelectSmart.stories.js

@@ -303,3 +303,292 @@ Secondary.args = {
     { value: '7', label: 'Option 7' },
   ],
 };
+
+/**
+ * Infinite Scroll Example
+ *
+ * This story demonstrates the infinite scroll feature.
+ * Scroll to the bottom of the options list to load more items.
+ *
+ * Features:
+ * - Loads 20 items per page
+ * - Simulates API delay (500ms)
+ * - Shows loading state while fetching
+ * - Stops loading when reaching the last page (5 pages total = 100 items)
+ * - Works with autocomplete and search
+ */
+export const InfiniteScroll = {
+  render: (args) => ({
+    components: {
+      unnnicFormElement,
+      unnnicSelectSmart,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        selectedOptions: [],
+        options: [],
+        currentPage: 1,
+        totalPages: 5,
+        itemsPerPage: 20,
+      };
+    },
+    computed: {
+      hasMoreData() {
+        return this.currentPage <= this.totalPages;
+      },
+    },
+    mounted() {
+      this.loadInitialOptions();
+    },
+    methods: {
+      async loadInitialOptions() {
+        await new Promise((resolve) => setTimeout(resolve, 300));
+
+        const newOptions = Array.from({ length: this.itemsPerPage }, (_, i) => {
+          const itemNumber = (this.currentPage - 1) * this.itemsPerPage + i + 1;
+          return {
+            value: `item-${itemNumber}`,
+            label: `Item ${itemNumber}`,
+            description: `Description for item ${itemNumber}`,
+          };
+        });
+
+        this.options.push(...newOptions);
+        this.currentPage++;
+      },
+      async handleScrollEnd() {
+        if (!this.hasMoreData) {
+          this.$refs.selectSmart?.finishInfiniteScroll();
+          return;
+        }
+
+        try {
+          await new Promise((resolve) => setTimeout(resolve, 500));
+
+          const newOptions = Array.from(
+            { length: this.itemsPerPage },
+            (_, i) => {
+              const itemNumber =
+                (this.currentPage - 1) * this.itemsPerPage + i + 1;
+              return {
+                value: `item-${itemNumber}`,
+                label: `Item ${itemNumber}`,
+                description: `Description for item ${itemNumber}`,
+              };
+            },
+          );
+
+          this.options.push(...newOptions);
+          this.currentPage++;
+        } catch (error) {
+          console.error('Error loading options:', error);
+        } finally {
+          this.$refs.selectSmart?.finishInfiniteScroll();
+        }
+      },
+    },
+    template: `
+        <unnnicFormElement label="Select with Infinite Scroll" message="Try scrolling to the bottom of the list">
+          <unnnicSelectSmart
+            ref="selectSmart"
+            v-model="selectedOptions"
+            :options="options"
+            :infinite-scroll="true"
+            :infinite-scroll-distance="20"
+            :infinite-scroll-can-load-more="() => hasMoreData"
+            :autocomplete="true"
+            :autocomplete-icon-left="true"
+            :autocomplete-clear-on-focus="true"
+            multiple
+            @scroll-end="handleScrollEnd"
+          />
+        </unnnicFormElement>
+    `,
+  }),
+};
+
+/**
+ * Infinite Scroll Simple Example
+ *
+ * A simpler version without multiple selection and descriptions.
+ * Useful for single selection scenarios.
+ */
+export const InfiniteScrollSimple = {
+  render: (args) => ({
+    components: {
+      unnnicFormElement,
+      unnnicSelectSmart,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        selectedOption: [],
+        options: [],
+        currentPage: 1,
+        totalPages: 3,
+      };
+    },
+    mounted() {
+      this.loadInitialOptions();
+    },
+    methods: {
+      async loadInitialOptions() {
+        await new Promise((resolve) => setTimeout(resolve, 300));
+
+        const newOptions = Array.from({ length: 15 }, (_, i) => {
+          const itemNumber = (this.currentPage - 1) * 15 + i + 1;
+          return {
+            value: `option-${itemNumber}`,
+            label: `Option ${itemNumber}`,
+          };
+        });
+
+        this.options.push(...newOptions);
+        this.currentPage++;
+      },
+      async handleScrollEnd() {
+        if (this.currentPage > this.totalPages) {
+          this.$refs.selectSmart?.finishInfiniteScroll();
+          return;
+        }
+
+        try {
+          await new Promise((resolve) => setTimeout(resolve, 400));
+
+          const newOptions = Array.from({ length: 15 }, (_, i) => {
+            const itemNumber = (this.currentPage - 1) * 15 + i + 1;
+            return {
+              value: `option-${itemNumber}`,
+              label: `Option ${itemNumber}`,
+            };
+          });
+
+          this.options.push(...newOptions);
+          this.currentPage++;
+        } catch (error) {
+          console.error('Error:', error);
+        } finally {
+          this.$refs.selectSmart?.finishInfiniteScroll();
+        }
+      },
+    },
+    template: `
+      <unnnicFormElement label="Simple Infinite Scroll">
+        <unnnicSelectSmart
+          ref="selectSmart"
+          v-model="selectedOption"
+          :options="options"
+          :infinite-scroll="true"
+          :infinite-scroll-distance="10"
+          :infinite-scroll-can-load-more="() => currentPage <= totalPages"
+          :autocomplete="true"
+          @scroll-end="handleScrollEnd"
+        />
+      </unnnicFormElement>
+    `,
+  }),
+};
+
+/**
+ * External Search with Debounce Example
+ *
+ * Demonstrates how to use SelectSmart with external API search and debounce.
+ * The component disables internal filtering and lets the parent control the options.
+ *
+ * Features:
+ * - Debounced search (500ms delay)
+ * - Simulates API calls
+ * - Shows loading state during search
+ * - External filter control via disableInternalFilter prop
+ */
+export const ExternalSearchWithDebounce = {
+  render: (args) => ({
+    components: {
+      unnnicFormElement,
+      unnnicSelectSmart,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        selected: [],
+        options: [],
+        allOptions: [],
+        isSearching: false,
+        searchDebounceTimer: null,
+      };
+    },
+    mounted() {
+      this.allOptions = Array.from({ length: 50 }, (_, i) => ({
+        value: `item-${i + 1}`,
+        label: `Item ${i + 1}`,
+        description: `Description for item ${i + 1}`,
+      }));
+      this.options = [...this.allOptions];
+    },
+    methods: {
+      handleSearchValueUpdate(searchValue) {
+        if (this.searchDebounceTimer) {
+          clearTimeout(this.searchDebounceTimer);
+        }
+
+        if (!searchValue || searchValue.trim() === '') {
+          this.options = [...this.allOptions];
+          this.isSearching = false;
+          return;
+        }
+
+        this.isSearching = true;
+
+        this.searchDebounceTimer = setTimeout(async () => {
+          try {
+            await new Promise((resolve) => setTimeout(resolve, 500));
+
+            const searchTerm = searchValue.toLowerCase();
+            const results = this.allOptions.filter((option) =>
+              option.label.toLowerCase().includes(searchTerm),
+            );
+
+            this.options = results;
+          } catch (error) {
+            console.error('Search error:', error);
+            this.options = [];
+          } finally {
+            this.isSearching = false;
+          }
+        }, 500);
+      },
+    },
+    beforeUnmount() {
+      if (this.searchDebounceTimer) {
+        clearTimeout(this.searchDebounceTimer);
+      }
+    },
+    template: `
+      <div>
+        <unnnicFormElement 
+          label="Search with API (Debounced)" 
+          message="Internal filter is disabled - parent controls filtering"
+        >
+          <unnnicSelectSmart
+            v-model="selected"
+            :options="options"
+            :disable-internal-filter="true"
+            :is-loading="isSearching"
+            :autocomplete="true"
+            :autocomplete-icon-left="true"
+            :autocomplete-clear-on-focus="true"
+            multiple
+            @update:search-value="handleSearchValueUpdate"
+          />
+        </unnnicFormElement>
+      </div>
+    `,
+  }),
+};

package/src/stories/Switch.stories.js

@@ -4,11 +4,9 @@ export default {
   title: 'Form/Switch',
   component: UnnnicSwitch,
   argTypes: {
-    label: { control: { type: 'text' } },
-    labelTooltip: { control: { type: 'text' } },
-    labelUseHtmlTooltip: { control: 'boolean' },
-    option: { control: { type: 'text' } },
-    helper: { control: { type: 'text' } },
+    size: { control: { type: 'select', options: ['small', 'medium'] } },
+    textLeft: { control: { type: 'text' } },
+    textRight: { control: { type: 'text' } },
     disabled: { control: { type: 'boolean' } },
   },
   render: (args) => ({
@@ -34,11 +32,8 @@ export default {
 
 export const Default = {
   args: {
-    label: 'Default',
-    labelTooltip: 'Tooltip',
-    labelUseHtmlTooltip: true,
-    option: 'Option',
-    helper: 'Helper text',
+    size: 'medium',
+    textRight: 'Default',
     disabled: false,
   },
 };

package/src/stories/Tab.stories.js

@@ -3,6 +3,9 @@ import unnnicTab from '../components/Tab/Tab.vue';
 export default {
   title: 'tabs/Tab',
   component: unnnicTab,
+  argTypes: {
+    size: { control: { type: 'select', options: ['md', 'sm'] } },
+  },
   render: (args) => ({
     components: {
       unnnicTab,
@@ -33,15 +36,6 @@ export default {
             Second description
           </p>
         </template>
-        <template #tab-head-third>
-          Third
-        </template>
-        <template #tab-panel-third>
-          <h2 class="title">Third Content</h2>
-          <p class="description">
-            Third description
-          </p>
-        </template>
       </unnnic-tab>
     `,
   }),
@@ -50,7 +44,6 @@ export default {
 export const Default = {
   args: {
     initialTab: 'first',
-    tabs: ['first', 'second', 'third'],
-    disabledTabs: ['third'],
+    tabs: ['first', 'second'],
   },
 };

package/src/stories/Tag.stories.js

@@ -1,4 +1,5 @@
 import UnnnicTag from '../components/Tag/Tag.vue';
+import colorsList from '../utils/colorsList';
 
 export default {
   title: 'Data Display/Tag',
@@ -7,30 +8,13 @@ export default {
   argTypes: {
     text: { control: { type: 'text' } },
     type: {
-      control: 'select',
-      options: ['default', 'brand', 'next'],
+      control: { type: 'select', options: ['default', 'indicator', 'brand'] },
     },
     scheme: {
-      control: 'select',
-      options: [
-        'green',
-        'blue',
-        'purple',
-        'red',
-        'orange',
-        'yellow',
-        'gray',
-        'teal',
-      ],
-    },
-    size: {
-      control: 'select',
-      options: ['small', 'medium'],
-    },
-    hasCloseIcon: { control: 'boolean' },
-    leftIcon: {
-      control: 'select',
-      options: [null, 'check_circle', 'sentiment_satisfied'],
+      control: {
+        type: 'select',
+        options: colorsList,
+      },
     },
   },
 };
@@ -50,10 +34,45 @@ export const LeftIcon = {
   },
 };
 
-export const Small = {
+export const RightIcon = {
   args: {
     text: 'Label',
     type: 'default',
-    size: 'small',
+    rightIcon: 'check_circle',
+  },
+};
+
+export const CloseIcon = {
+  args: {
+    text: 'Label',
+    type: 'default',
+    hasCloseIcon: true,
+  },
+};
+
+export const Next = {
+  args: {
+    text: 'Label',
+    type: 'next',
+    scheme: 'weni',
+  },
+};
+
+export const Indicator = {
+  args: {
+    text: 'Tag Name',
+    type: 'indicator',
+    count: 100,
+    clickable: true,
+    hasBackButton: false,
+    enableTooltip: true,
+    tooltipText: 'This is the amount',
+  },
+};
+
+export const Brand = {
+  args: {
+    text: 'Settings',
+    type: 'brand',
   },
 };

package/src/stories/TextArea.stories.js

@@ -37,7 +37,6 @@ export const Default = {
     errors: [],
     size: 'md',
     message: 'Helper text',
-    tooltip: 'Tooltip',
   },
 };
 
@@ -48,7 +47,7 @@ export const Error = {
     maxLength: 150,
     disabled: false,
     type: 'error',
-    errors: 'Error text',
+    error: 'Error text',
     size: 'md',
   },
 };
@@ -85,7 +84,7 @@ export const ErrorSm = {
     maxLength: 150,
     disabled: false,
     type: 'error',
-    errors: 'Error text',
+    error: 'Error text',
     size: 'sm',
   },
 };
@@ -101,14 +100,3 @@ export const DisabledSm = {
     message: 'Helper text',
   },
 };
-
-export const ResizeNone = {
-  args: {
-    label: 'Label',
-    placeholder: 'Placeholder',
-    maxLength: 150,
-    disabled: false,
-    type: 'normal',
-    resize: 'none',
-  },
-};

package/src/types/scheme-colors.d.ts

@@ -140,7 +140,6 @@ export type SchemeColor =
   | 'feedback-yellow'
   | 'feedback-blue'
   | 'feedback-grey'
-  | 'fg-base'
   | 'aux-blue'
   | 'aux-purple'
   | 'aux-orange'

package/src/utils/call.js

@@ -1,58 +1,30 @@
 import { createApp } from 'vue';
 import Alert from '../components/Alert/Alert.vue';
 import Modal from '../components/Modal/Modal.vue';
-import ToastInstance from '../components/Toast/ToastManager';
 import mitt from 'mitt';
 
 const emitter = mitt();
-const callAlert = ({ props, containerRef, seconds }) => {
-  if (props.version === '1.1' || containerRef) {
-    const AlertComponent = createApp(Alert, {
-      ...props,
-      seconds,
-      version: '1.1',
-      onClose: () => {
+
+const callAlert = ({ props, containerRef }) => {
+  const AlertComponent = createApp(Alert, {
+    ...props,
+    onClose: () => {
+      instance.$el.remove();
+    },
+    created() {
+      emitter.on(['close'], () => {
         instance.$el.remove();
-      },
-      created() {
-        emitter.on(['close'], () => {
-          instance.$el.remove();
-        });
-      },
-    });
-    const element = document.createElement('div');
-    const instance = AlertComponent.mount(element);
+      });
+    },
+  });
+  const element = document.createElement('div');
+  const instance = AlertComponent.mount(element);
 
-    if (containerRef) {
-      instance.$el.style.position = 'absolute';
-      containerRef.appendChild(instance.$el);
-    } else {
-      document.body.appendChild(instance.$el);
-    }
+  if (containerRef) {
+    instance.$el.style.position = 'absolute';
+    containerRef.appendChild(instance.$el);
   } else {
-    const typeMap = {
-      success: 'success',
-      error: 'error',
-      attention: 'attention',
-      default: 'informational',
-      'feedback-green': 'success',
-      'feedback-red': 'error',
-    };
-
-    const toastProps = {
-      timeout: seconds ? seconds * 1000 : 5000,
-      type: typeMap[props.scheme || props.type] || typeMap.default,
-
-      onClose: () => {
-        emitter.emit(['close']);
-      },
-    };
-
-    ToastInstance.show({
-      title: props.text,
-      description: '',
-      ...toastProps,
-    });
+    document.body.appendChild(instance.$el);
   }
 };