@weni/unnnic-system 3.27.1 → 3.28.1

package/src/stories/PopoverOption.stories.js

@@ -1,4 +1,5 @@
 import { PopoverOption } from '../components/ui/popover';
+import UnnnicTag from '../components/Tag/Tag.vue';
 import colorsList from '../utils/colorsList';
 
 export default {
@@ -73,3 +74,55 @@ export const Default = {
     `,
   }),
 };
+
+export const WithTag = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Uses the default slot to render custom content, such as a label alongside a status tag. The option keeps the `space-between` layout, so the tag stays aligned to the end.',
+      },
+      source: {
+        code: `<UnnnicPopoverOption v-for="option in options" :key="option.value">
+  <span class="popover-option__label">{{ option.label }}</span>
+  <UnnnicTag
+    type="default"
+    size="small"
+    :scheme="statusConfig[option.status].scheme"
+    :text="statusConfig[option.status].text"
+  />
+</UnnnicPopoverOption>`,
+      },
+    },
+  },
+  render: () => ({
+    components: { PopoverOption, UnnnicTag },
+    data() {
+      return {
+        options: [
+          { label: 'John Doe', value: 'john-doe', status: 'online' },
+          { label: 'Jane Doe', value: 'jane-doe', status: 'lunch' },
+          { label: 'James Smith', value: 'james-smith', status: 'offline' },
+        ],
+        statusConfig: {
+          online: { scheme: 'green', text: 'Online' },
+          lunch: { scheme: 'orange', text: 'Lunch' },
+          offline: { scheme: 'gray', text: 'Offline' },
+        },
+      };
+    },
+    template: `
+    <section style="display: flex; flex-direction: column; gap: 8px; width: 280px;">
+      <PopoverOption v-for="option in options" :key="option.value" :label="option.label">
+        <span style="flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ option.label }}</span>
+        <unnnic-tag
+          type="default"
+          size="small"
+          :scheme="statusConfig[option.status].scheme"
+          :text="statusConfig[option.status].text"
+        />
+      </PopoverOption>
+    </section>
+    `,
+  }),
+};

package/src/stories/Select.stories.js

@@ -1,4 +1,5 @@
 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' },
@@ -181,6 +182,124 @@ export const WithSearch = {
   },
 };
 
+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 },