@weni/unnnic-system 3.12.8-alpha.0 → 3.13.0

package/src/stories/MultiSelect.stories.js

@@ -1,160 +1,62 @@
-import UnnnicMultiSelect from '../components/MultiSelect/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 },
-];
+import UnnnicMultiSelect from '../components/MultiSelect/MultiSelect.vue';
 
 export default {
   title: 'Form/MultiSelect',
   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.',
-    },
-  },
+  argTypes: {},
   render: (args) => ({
-    components: { UnnnicMultiSelect },
+    components: {
+      UnnnicMultiSelect,
+    },
     setup() {
-      const handleSearch = (value) => {
-        args.search = value;
-      };
-      return { args, handleSearch };
+      return { args };
     },
     data() {
       return {
-        exampleValue: [],
+        groups: [
+          {
+            title: 'Permissões Gerais',
+            selected: 0,
+            items: [
+              {
+                title: 'Moderador',
+                description:
+                  'Gerencia membros do projeto e administra o rocket',
+              },
+              {
+                title: 'Contribuidor',
+                description: 'Consegue editar o projeto',
+              },
+              {
+                title: 'Vizualizador',
+                description: 'Apenas vizualiza o projeto',
+              },
+            ],
+          },
+          {
+            title: 'Permissões do módulo chat',
+            selected: 0,
+            items: [
+              {
+                title: 'Gerente de Atendimento',
+                description:
+                  'Consegue responder mensagens e criar grupos no Rocket',
+              },
+              {
+                title: 'Agente',
+                description: 'Consegue responder mensagens no Rocket',
+              },
+            ],
+          },
+        ],
       };
     },
     template: `
-      <div style="width: 300px;">
-        <p>modelValue: {{ exampleValue }}</p>
-        <unnnic-multi-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
+      <div>
+        <UnnnicMultiSelect v-bind="args" v-model="groups" />
       </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 Disabled = {
-  args: {
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-    disabled: true,
-  },
-};
-
-export const WithSearch = {
-  args: {
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-    enableSearch: true,
-    search: '',
-  },
-};
+export const Medium = { args: {} };

package/src/components/MultiSelect/MultSelectOption.vue

@@ -1,49 +0,0 @@
-<template>
-  <div :class="['unnnic-multi-select-option']">
-    <UnnnicCheckbox
-      :modelValue="props.active"
-      :disabled="props.disabled"
-      :label="props.label"
-      @update:model-value="emit('update:modelValue', !props.active)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import UnnnicCheckbox from '../Checkbox/Checkbox.vue';
-
-defineOptions({
-  name: 'UnnnicMultiSelectOption',
-});
-
-const emit = defineEmits<{
-  'update:modelValue': [boolean];
-}>();
-
-interface SelectOptionProps {
-  label: string;
-  disabled?: boolean;
-  active?: boolean;
-  focused?: boolean;
-}
-
-const props = withDefaults(defineProps<SelectOptionProps>(), {
-  disabled: false,
-  active: false,
-  focused: false,
-});
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.unnnic-multi-select-option {
-  border-radius: $unnnic-radius-1;
-  font: $unnnic-font-emphasis;
-}
-</style>