@weni/unnnic-system 3.12.2 → 3.12.3-alpha.0

package/src/stories/LayerManager.stories.js

@@ -0,0 +1,364 @@
+import { ref } from 'vue';
+import UnnnicButton from '../components/Button/Button.vue';
+import UnnnicToast from '../components/Toast/Toast.vue';
+
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from '../components/ui/dialog';
+
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerClose,
+} from '../components/ui/drawer';
+
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from '../components/ui/popover';
+
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from '../components/ui/tooltip';
+
+export default {
+  title: 'Utilities/Layer Manager',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Minimal stories that prove the global layer manager keeps dialogs, drawers, tooltips, popovers and toasts in the right stacking order.',
+      },
+    },
+  },
+};
+
+export const DialogWithTooltipAndPopover = {
+  name: 'Dialog + Tooltip + Popover',
+  render: () => ({
+    components: {
+      Dialog,
+      DialogTrigger,
+      DialogContent,
+      DialogHeader,
+      DialogTitle,
+      DialogFooter,
+      DialogClose,
+      Tooltip,
+      TooltipTrigger,
+      TooltipContent,
+      Popover,
+      PopoverTrigger,
+      PopoverContent,
+      UnnnicButton,
+    },
+    template: `
+      <Dialog>
+        <DialogTrigger>
+          <UnnnicButton text="Open dialog" type="primary" />
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog surface</DialogTitle>
+          </DialogHeader>
+
+          <div style="padding: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">
+            <Tooltip>
+              <TooltipTrigger>
+                <UnnnicButton text="Tooltip" type="secondary" />
+              </TooltipTrigger>
+              <TooltipContent>This tooltip should appear above the dialog.</TooltipContent>
+            </Tooltip>
+
+            <Popover>
+              <PopoverTrigger>
+                <UnnnicButton text="Popover" type="primary" />
+              </PopoverTrigger>
+              <PopoverContent>
+                <section style="padding: 16px;">
+                  <p style="margin: 0; color: #67738B;">
+                    Popover content should also float above.
+                  </p>
+                </section>
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          <DialogFooter>
+            <DialogClose>
+              <UnnnicButton text="Close" type="tertiary" />
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    `,
+  }),
+};
+
+export const DrawerWithTooltipAndPopover = {
+  name: 'Drawer + Tooltip + Popover',
+  render: () => ({
+    components: {
+      Drawer,
+      DrawerTrigger,
+      DrawerContent,
+      DrawerHeader,
+      DrawerTitle,
+      DrawerDescription,
+      DrawerFooter,
+      DrawerClose,
+      Tooltip,
+      TooltipTrigger,
+      TooltipContent,
+      Popover,
+      PopoverTrigger,
+      PopoverContent,
+      UnnnicButton,
+    },
+    template: `
+      <Drawer>
+        <DrawerTrigger>
+          <UnnnicButton text="Open drawer" type="primary" />
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Drawer surface</DrawerTitle>
+            <DrawerDescription>Interact with floating layers.</DrawerDescription>
+          </DrawerHeader>
+
+          <div style="padding: 24px; display: flex; flex-direction: column; gap: 16px;">
+            <Tooltip>
+              <TooltipTrigger>
+                <UnnnicButton text="Tooltip" type="secondary" />
+              </TooltipTrigger>
+              <TooltipContent>Tooltip should appear above the drawer.</TooltipContent>
+            </Tooltip>
+
+            <Popover>
+              <PopoverTrigger>
+                <UnnnicButton text="Popover" type="primary" />
+              </PopoverTrigger>
+              <PopoverContent>
+                <section style="padding: 16px;">
+                  <p style="margin: 0; color: #67738B;">
+                    Popover content should remain on top too.
+                  </p>
+                </section>
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          <DrawerFooter>
+            <DrawerClose>
+              <UnnnicButton text="Close drawer" type="tertiary" />
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    `,
+  }),
+};
+
+export const DrawerNextToDialog = {
+  name: 'Drawer + Dialog',
+  render: () => ({
+    components: {
+      Drawer,
+      DrawerContent,
+      DrawerHeader,
+      DrawerTitle,
+      DrawerDescription,
+      DrawerFooter,
+      DrawerClose,
+      Dialog,
+      DialogContent,
+      DialogHeader,
+      DialogTitle,
+      DialogFooter,
+      DialogClose,
+      UnnnicButton,
+    },
+    setup() {
+      const drawerOpen = ref(false);
+      const dialogOpen = ref(false);
+      return { drawerOpen, dialogOpen };
+    },
+    template: `
+      <div>
+        <div style="display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;">
+          <UnnnicButton text="Open drawer" type="primary" @click="drawerOpen = true" />
+        </div>
+
+        <Drawer v-model:open="drawerOpen">
+          <DrawerContent size="large">
+            <DrawerHeader>
+              <DrawerTitle>Drawer</DrawerTitle>
+            </DrawerHeader>
+            <div style="padding: 24px; color: #67738B; display: grid; gap: 16px;">
+              Keep this drawer open and toggle the dialog.
+
+              <UnnnicButton text="Open dialog" @click="dialogOpen = true" />
+            </div>
+          </DrawerContent>
+        </Drawer>
+
+        <Dialog v-model:open="dialogOpen">
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Dialog overlay</DialogTitle>
+            </DialogHeader>
+            <div style="padding: 24px; color: #67738B;">
+              This dialog must appear above the drawer and its overlay.
+            </div>
+            <DialogFooter>
+              <DialogClose>
+                <UnnnicButton text="Close dialog" type="tertiary" />
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    `,
+  }),
+};
+
+export const NestedDialogs = {
+  name: 'Dialog nested',
+  render: () => ({
+    components: {
+      Dialog,
+      DialogTrigger,
+      DialogContent,
+      DialogHeader,
+      DialogTitle,
+      DialogFooter,
+      DialogClose,
+      Tooltip,
+      TooltipTrigger,
+      TooltipContent,
+      UnnnicButton,
+    },
+    setup() {
+      const parentOpen = ref(false);
+      const childOpen = ref(false);
+      return { parentOpen, childOpen };
+    },
+    template: `
+      <Dialog v-model:open="parentOpen">
+        <DialogTrigger>
+          <UnnnicButton text="Open parent dialog" type="primary" />
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Parent dialog</DialogTitle>
+          </DialogHeader>
+          <div style="padding: 24px; display: flex; flex-direction: column; gap: 12px;">
+            <p style="margin: 0; color: #67738B;">Open the child dialog to stack overlays.</p>
+            <UnnnicButton text="Open child dialog" type="primary" @click="childOpen = true" />
+          </div>
+          <DialogFooter>
+            <DialogClose>
+              <UnnnicButton text="Close parent" type="tertiary" />
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog v-model:open="childOpen">
+        <DialogContent size="small">
+          <DialogHeader>
+            <DialogTitle>Child dialog</DialogTitle>
+          </DialogHeader>
+          <div style="padding: 24px; display: flex; flex-direction: column; gap: 8px;">
+            <Tooltip>
+              <TooltipTrigger>
+                <UnnnicButton text="Tooltip here" type="secondary" />
+              </TooltipTrigger>
+              <TooltipContent>Tooltip stays on top of both dialogs.</TooltipContent>
+            </Tooltip>
+          </div>
+          <DialogFooter>
+            <DialogClose>
+              <UnnnicButton text="Close child" type="primary" />
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    `,
+  }),
+};
+
+export const DialogWithToast = {
+  name: 'Dialog + Toast',
+  render: () => ({
+    components: {
+      Dialog,
+      DialogContent,
+      DialogHeader,
+      DialogTitle,
+      DialogFooter,
+      DialogClose,
+      UnnnicToast,
+      UnnnicButton,
+    },
+    setup() {
+      const dialogOpen = ref(false);
+      const toastVisible = ref(false);
+      const toastKey = ref(0);
+
+      const showToast = () => {
+        toastKey.value += 1;
+        toastVisible.value = true;
+      };
+
+      return { dialogOpen, toastVisible, toastKey, showToast };
+    },
+    template: `
+      <div style="display: flex; gap: 16px;">
+        <UnnnicButton text="Open dialog" type="primary" @click="dialogOpen = true" />
+        <UnnnicButton text="Show toast" type="secondary" @click="showToast" />
+      </div>
+
+      <Dialog v-model:open="dialogOpen">
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog layer</DialogTitle>
+          </DialogHeader>
+          <div style="padding: 24px; color: #67738B;">
+            Use the buttons to compare dialog and toast layers.
+          </div>
+          <DialogFooter>
+            <DialogClose>
+              <UnnnicButton text="Close dialog" type="tertiary" />
+            </DialogClose>
+            <UnnnicButton text="Show toast" type="primary" @click="showToast" />
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <UnnnicToast
+        v-if="toastVisible"
+        :key="toastKey"
+        title="Toast layer"
+        description="Toasts should always float above dialogs."
+        type="success"
+        :timeout="0"
+        @close="toastVisible = false"
+      />
+    `,
+  }),
+};

package/src/stories/ModalDialog.mdx

@@ -6,6 +6,9 @@ import * as ModalDialogStories from './ModalDialog.stories';
 
 # ModalDialog
 
+> **⚠️ DEPRECATED**: This component has been deprecated in favor of the new `Dialog` component. Please use `UnnnicDialog` 
+instead for new implementations. See the [Dialog documentation](?path=/docs/feedback-dialog--docs) for more information.
+
 The ModalDialog was designed to inform the user about a specific task, request information, or involve other tasks.
 
 <Source

package/src/stories/ModalDialog.stories.js

@@ -7,7 +7,7 @@ import iconsList from '../utils/iconList';
 import colorsList from '../utils/colorsList';
 
 export default {
-  title: 'Example/ModalDialog',
+  title: 'Feedback/ModalDialog',
   component: UnnnicModalDialog,
   argTypes: {
     type: {

package/src/stories/MultiSelectV2.stories.js

@@ -0,0 +1,158 @@
+import UnnnicMultiSelect from '../components/MultiSelectV2/index.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/MultiSelectV2',
+  component: UnnnicMultiSelect,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'MultiSelect is designed to solve common problems related to multiple 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 a list of the return type of the key specified by `itemValue`, or the entire options object when the `returnObject` property 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.',
+    },
+  },
+  render: (args) => ({
+    components: { UnnnicMultiSelect },
+    setup() {
+      const handleSearch = (value) => {
+        args.search = value;
+      };
+      return { args, handleSearch };
+    },
+    data() {
+      return {
+        exampleValue: [],
+      };
+    },
+    template: `
+      <p>modelValue: {{ exampleValue }}</p>
+      <unnnic-multi-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
+    `,
+  }),
+};
+
+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 Disabled = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    disabled: true,
+  },
+};
+
+export const WithSearch = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    enableSearch: true,
+    search: '',
+  },
+};

package/src/stories/Select.stories.js

@@ -0,0 +1,158 @@
+import UnnnicSelect from '../components/Select/index.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.',
+    },
+  },
+  render: (args) => ({
+    components: { UnnnicSelect },
+    setup() {
+      const handleSearch = (value) => {
+        args.search = value;
+      };
+      return { args, handleSearch };
+    },
+    data() {
+      return {
+        exampleValue: null,
+      };
+    },
+    template: `
+      <p>modelValue: {{ exampleValue }}</p>
+      <unnnic-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
+    `,
+  }),
+};
+
+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 Disabled = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    disabled: true,
+  },
+};
+
+export const WithSearch = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    enableSearch: true,
+    search: '',
+  },
+};