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

package/src/stories/Select.stories.js

@@ -0,0 +1,161 @@
+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: `
+      <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 Disabled = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    disabled: true,
+  },
+};
+
+export const WithSearch = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    enableSearch: true,
+    search: '',
+  },
+};

package/src/components/MultiSelect/MultiSelect.vue

@@ -1,297 +0,0 @@
-<template>
-  <div
-    :class="expand ? 'expand-multiselect' : 'normal-multiselect'"
-    tabindex="-1"
-  >
-    <span
-      v-if="label"
-      class="select-permission-label"
-      >{{ label }}</span
-    >
-    <div
-      class="select-permission"
-      tabindex="0"
-      @keypress="handleIsOpenKeyboard"
-      @click="active = !active"
-    >
-      <h6 class="title noselect">{{ inputTitle }}</h6>
-      <UnnnicIcon
-        :icon="active ? 'arrow-button-up-1' : 'arrow-button-down-1'"
-        size="sm"
-        scheme="neutral-dark"
-      />
-    </div>
-    <div
-      v-if="active"
-      v-on-click-outside="onClickOutside"
-      class="select-content"
-      tabindex="0"
-    >
-      <div>
-        <template
-          v-for="(group, indexGroup) in modelValue"
-          :key="`group-${indexGroup}`"
-        >
-          <h6
-            v-if="!hideGroupTitle"
-            :key="`title-${indexGroup}`"
-            class="title"
-          >
-            {{ group.title }}
-          </h6>
-          <section>
-            <template
-              v-for="(item, indexItem) in group.items"
-              :key="`item-${indexItem}`"
-            >
-              <div
-                v-if="hideRadio"
-                :key="indexItem + 'input'"
-                class="unnnic-radio-container unnnic-radio-container--sm"
-                style="cursor: pointer"
-                @click="change(indexGroup, indexItem)"
-              >
-                <strong>{{ item.title }}</strong>
-                <span>{{ item.description }}</span>
-              </div>
-              <UnnnicRadio
-                v-else
-                id=""
-                :key="'else' + indexItem + 'input'"
-                name=""
-                :modelValue="group.selected"
-                :value="indexItem"
-                size="sm"
-                class=""
-                @update:model-value="change(indexGroup, $event)"
-              >
-                <strong>{{ item.title }}</strong>
-                <span>{{ item.description }}</span>
-              </UnnnicRadio>
-            </template>
-          </section>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { vOnClickOutside } from '@vueuse/components';
-import UnnnicIcon from '../Icon.vue';
-import UnnnicRadio from '../Radio/Radio.vue';
-
-export default {
-  name: 'UnnnicMultiSelect',
-  components: {
-    UnnnicIcon,
-    UnnnicRadio,
-  },
-  directives: {
-    onClickOutside: vOnClickOutside,
-  },
-  props: {
-    isOpen: {
-      default: false,
-    },
-    expand: {
-      default: false,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
-    inputTitle: {
-      type: String,
-      default: 'Teste',
-    },
-    hideRadio: {
-      type: Boolean,
-      default: false,
-    },
-    hideGroupTitle: {
-      type: Boolean,
-      default: false,
-    },
-    unselectable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      active: false,
-    };
-  },
-
-  watch: {
-    isOpen() {
-      this.active = this.open;
-    },
-  },
-  methods: {
-    handleIsOpenKeyboard(event) {
-      if (
-        document.querySelector('.select-permission:focus-visible') &&
-        event.keyCode === 32
-      ) {
-        this.active = !this.active;
-      }
-    },
-
-    onClickOutside() {
-      if (!this.active) return;
-      this.active = false;
-    },
-
-    change(indexGroup, indexSelected) {
-      this.$emit(
-        'update:model-value',
-        this.modelValue.map((item, index) => {
-          if (index === indexGroup) {
-            let selected = indexSelected;
-            if (this.unselectable && item.selected === indexSelected) {
-              selected = -1;
-            }
-            return { ...item, selected };
-          }
-
-          return item;
-        }),
-      );
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.normal-multiselect,
-.expand-multiselect {
-  user-select: none;
-}
-
-.normal-multiselect {
-  position: relative;
-  max-width: 319px;
-
-  .select-content {
-    max-width: 319px;
-  }
-}
-
-.expand-multiselect {
-  position: relative;
-  width: 100%;
-
-  .select-content {
-    width: 100%;
-  }
-}
-
-.noselect {
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
-  -moz-user-select: none; /* Old versions of Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
-}
-
-.select-permission,
-.select-content > div {
-  padding: $unnnic-squish-xs;
-  background-color: $unnnic-color-neutral-snow;
-
-  border-radius: $unnnic-border-radius-sm;
-  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
-}
-.select-permission {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-
-  cursor: pointer;
-  .icon {
-    margin-left: $unnnic-spacing-inline-xs;
-  }
-}
-.select-permission-label {
-  display: block;
-
-  color: $unnnic-color-neutral-cloudy;
-  margin-bottom: $unnnic-spacing-stack-xs;
-
-  font-family: $unnnic-font-family-secondary;
-  font-size: $unnnic-font-size-body-gt;
-  line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-}
-
-.title {
-  font-family: $unnnic-font-family-secondary;
-  font-size: $unnnic-font-size-body-gt;
-  margin: 0;
-  font-weight: $unnnic-font-weight-regular;
-  color: $unnnic-color-neutral-dark;
-}
-
-.select-content {
-  position: absolute;
-  margin-top: $unnnic-spacing-stack-xs;
-
-  > div {
-    box-shadow: $unnnic-shadow-level-near;
-    .title {
-      margin-bottom: $unnnic-spacing-stack-sm;
-    }
-
-    & section {
-      display: flex;
-      flex-direction: column;
-
-      & + h6 {
-        margin-top: $unnnic-spacing-stack-sm;
-        padding-top: $unnnic-spacing-stack-sm;
-        border-top: $unnnic-border-width-thinner solid
-          $unnnic-color-neutral-darkest;
-      }
-
-      strong,
-      span {
-        display: block;
-        font-family: $unnnic-font-family-secondary;
-        font-size: $unnnic-font-size-body-gt;
-      }
-
-      strong {
-        font-weight: $unnnic-font-weight-regular;
-      }
-      span {
-        font-weight: $unnnic-font-weight-light;
-      }
-
-      .unnnic-radio-container {
-        & + .unnnic-radio-container {
-          margin-top: $unnnic-spacing-stack-sm;
-          padding-top: $unnnic-spacing-stack-sm;
-          border-top: $unnnic-border-width-thinner solid
-            $unnnic-color-neutral-lightest;
-        }
-
-        :deep(.unnnic-icon) {
-          margin-right: $unnnic-inline-xs;
-        }
-      }
-    }
-  }
-}
-</style>