@weni/unnnic-system 2.35.0 → 2.36.1-alpha.0

package/src/components/SelectTime/index.vue

@@ -0,0 +1,220 @@
+<template>
+  <section
+    v-onClickOutside="() => (active = false)"
+    class="unnnic-select-time"
+  >
+    <DropdownSkeleton
+      ref="dropdown-skeleton"
+      type="manual"
+      :modelValue="active"
+      position=""
+      useAbsolutePosition
+    >
+      <TextInput
+        :modelValue="modelValue"
+        :iconRight="active ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+        nativeType="time"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        class="unnnic-select-time__input"
+        @focus="active = true"
+        @blur="handleBlur"
+        @update:model-value="handleInput"
+        @keydown.enter="handleBlur({ close: true })"
+      />
+
+      <template #inside="props">
+        <section
+          :style="{ width: props.width }"
+          class="unnnic-select-time__options"
+        >
+          <section
+            v-for="hour in options"
+            :ref="`hour-${hour.value}`"
+            :key="hour.value"
+            :class="{
+              'unnnic-select-time__options__item': true,
+              'unnnic-select-time__options__item--selected':
+                modelValue === hour.value,
+            }"
+            @click="handleClickTimeOption(hour.value)"
+          >
+            {{ hour.label }}
+          </section>
+        </section>
+      </template>
+    </DropdownSkeleton>
+  </section>
+</template>
+
+<script>
+import { vOnClickOutside } from '@vueuse/components';
+
+import DropdownSkeleton from '../Dropdown/DropdownSkeleton.vue';
+import TextInput from '../Input/TextInput.vue';
+
+import { hoursTimesOptions } from '../../utils/hours';
+
+export default {
+  name: 'SelectTime',
+  components: {
+    DropdownSkeleton,
+    TextInput,
+  },
+
+  directives: {
+    onClickOutside: vOnClickOutside,
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array,
+      default: () => hoursTimesOptions,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      active: false,
+    };
+  },
+  methods: {
+    handleInput(text) {
+      const { value } =
+        this.options.find((hour) => hour.value.includes(text)) || {};
+
+      if (value) {
+        const hourRef = this.$refs[`hour-${value}`][0];
+        if (hourRef) {
+          hourRef.scrollIntoView({ behavior: 'smooth' });
+        }
+      }
+
+      this.$emit('update:modelValue', text);
+    },
+
+    handleBlur({ close = false } = {}) {
+      if (this.modelValue) {
+        const cleanValue = this.modelValue.replace(/[^0-9]/g, '');
+
+        if (cleanValue.length > 0) {
+          let formattedTime = '';
+
+          if (cleanValue.length === 4) {
+            // Format: 0101 -> 01:01, 1310 -> 13:10
+            const hours = cleanValue.substring(0, 2);
+            const minutes = cleanValue.substring(2, 4);
+
+            if (parseInt(hours) <= 23 && parseInt(minutes) <= 59) {
+              formattedTime = `${hours}:${minutes}`;
+            }
+          } else if (cleanValue.length === 3) {
+            // Format: 123 -> 01:23
+            const hours = `0${cleanValue.substring(0, 1)}`;
+            const minutes = cleanValue.substring(1, 3);
+
+            if (parseInt(minutes) <= 59) {
+              formattedTime = `${hours}:${minutes}`;
+            }
+          } else if (cleanValue.length === 2) {
+            // Format: 12 -> 12:00
+            const hours = cleanValue;
+            formattedTime = `${hours}:00`;
+          } else if (cleanValue.length === 1) {
+            // Format: 1 -> 01:00
+            const hours = `0${cleanValue}`;
+            formattedTime = `${hours}:00`;
+          }
+
+          this.$emit('update:modelValue', formattedTime);
+        }
+      }
+
+      if (close) {
+        this.active = false;
+      }
+    },
+    handleClickTimeOption(value) {
+      this.$emit('update:modelValue', value);
+      this.active = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+:deep(.unnnic-select-time__input) {
+  &::-webkit-calendar-picker-indicator {
+    background: none;
+    display: none;
+  }
+}
+
+.unnnic-select-time {
+  &__options {
+    @function calc-max-height($value) {
+      @return ($value * $unnnic-font-size) - ($unnnic-spacing-xs * 2);
+    }
+    margin-top: $unnnic-spacing-nano;
+    border-radius: $unnnic-border-radius-sm;
+    box-shadow: $unnnic-shadow-level-near;
+    background-color: $unnnic-color-background-snow;
+    cursor: pointer;
+    display: grid;
+    max-height: calc-max-height(9.25);
+    overflow-y: auto;
+
+    &__item {
+      margin: 0px $unnnic-spacing-nano;
+      background-color: $unnnic-color-background-snow;
+      padding: $unnnic-spacing-stack-nano $unnnic-inline-xs;
+      max-width: 100%;
+      font-family: $unnnic-font-family-secondary;
+      color: $unnnic-color-neutral-darkest;
+      font-weight: $unnnic-font-weight-regular;
+
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      -webkit-line-clamp: 1;
+
+      &:hover {
+        border-radius: $unnnic-border-radius-sm;
+        background-color: $unnnic-color-neutral-light;
+      }
+
+      &--selected {
+        color: $unnnic-color-weni-600;
+        font-weight: $unnnic-font-weight-bold;
+      }
+    }
+
+    &::-webkit-scrollbar {
+      width: $unnnic-spacing-inline-nano;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: $unnnic-color-neutral-cleanest;
+      border-radius: $unnnic-border-radius-pill;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: $unnnic-color-neutral-soft;
+      border-radius: $unnnic-border-radius-pill;
+    }
+  }
+}
+</style>

package/src/components/index.js

@@ -86,6 +86,8 @@ import ModalNext from './ModalNext/ModalNext.vue';
 import ModalDialog from './ModalDialog/ModalDialog.vue';
 import Tour from './Tour/Tour.vue';
 import Navigator from './Navigator/index.vue';
+import SelectTime from './SelectTime/index.vue';
+import DataTable from './DataTable/index.vue';
 
 export const components = {
   unnnicFormElement: formElement,
@@ -177,6 +179,8 @@ export const components = {
   unnnicTableNext: TableNext,
   unnnicTour: Tour,
   unnnicNavigator: Navigator,
+  unnnicSelectTime: SelectTime,
+  unnnicDataTable: DataTable,
 };
 
 export const unnnicFontSize = fontSize;
@@ -269,3 +273,5 @@ export const unnnicDrawer = Drawer;
 export const unnnicTableNext = TableNext;
 export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
+export const unnnicSelectTime = SelectTime;
+export const unnnicDataTable = DataTable;

package/src/stories/DataTable.stories.js

@@ -0,0 +1,332 @@
+import UnnnicDataTable from '../components/DataTable/index.vue';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Data Display/DataTable',
+  component: UnnnicDataTable,
+  tags: ['autodocs'],
+  args: {
+    page: 1,
+  },
+  argTypes: {
+    headers: {
+      description:
+        'Array of header items defining the structure of the table header.',
+      control: 'object',
+    },
+    items: {
+      description: 'Array of row items defining the content of the table rows.',
+      control: 'object',
+    },
+    size: {
+      description:
+        'The size of the table. Options are `sm` for small and `md` for medium.',
+      control: { type: 'select' },
+      options: ['sm', 'md'],
+    },
+    page: {
+      description: 'The current page number for pagination.',
+      control: 'number',
+    },
+    pageTotal: {
+      description: 'The total number of pages available for pagination.',
+      control: 'number',
+    },
+    pageInterval: {
+      description: 'The number of items displayed per page.',
+      control: 'number',
+    },
+    isLoading: {
+      description: 'Indicates whether the table data is loading.',
+      control: 'boolean',
+    },
+    hideHeaders: {
+      description: 'Determines if the table headers should be hidden.',
+      control: 'boolean',
+    },
+    height: {
+      description: 'The height of the table.',
+      control: 'text',
+    },
+    maxHeight: {
+      description: 'The maximum height of the table.',
+      control: 'text',
+    },
+    clickable: {
+      description: 'Indicates whether the table rows should be clickable.',
+      control: 'boolean',
+    },
+    fixedHeaders: {
+      description:
+        'Indicates whether the table headers should be fixed in scroll.',
+      control: 'boolean',
+    },
+    hidePagination: {
+      description: 'Indicates whether the pagination should be hidden.',
+      control: 'boolean',
+    },
+    locale: {
+      description: 'The locale for the table translations.',
+      control: { type: 'select' },
+      options: ['en', 'pt-br', 'es'],
+    },
+  },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    setup() {
+      const sort = ({ order, header }) => {
+        action('update:sort')({ order, header });
+        if (order === 'asc')
+          args.items = args.items.sort((a, b) => a.id - b.id);
+        if (order === 'desc')
+          args.items = args.items.sort((a, b) => b.id - a.id);
+      };
+      const updatePage = (page) => {
+        action('update:page')(page);
+        args.page = page;
+      };
+      const itemClick = (item) => {
+        action('itemClick')(item);
+      };
+
+      return { args, sort, updatePage, itemClick };
+    },
+    template: `
+    <UnnnicDataTable
+      v-bind="args"
+      :headers="args.headers"
+      :items="args.items"
+      :pageTotal="125"
+      :pageInterval="5"
+      @update:sort="sort"
+      @update:page="updatePage"
+      @itemClick="itemClick"
+    >
+    </UnnnicDataTable>
+    `,
+  }),
+};
+
+const headers = [
+  {
+    title: 'ID',
+    itemKey: 'id',
+    isSortable: true,
+  },
+  {
+    title: 'Name',
+    itemKey: 'name',
+  },
+  {
+    title: 'Age',
+    itemKey: 'age',
+  },
+  {
+    title: 'Country',
+    itemKey: 'country',
+  },
+];
+
+const items = [
+  {
+    id: '1',
+    name: 'Eduardo',
+    age: 27,
+    country: 'Brazil',
+  },
+  {
+    id: '2',
+    name: 'Marcus',
+    age: 27,
+    country: 'Brazil',
+  },
+  {
+    id: '3',
+    name: 'Paulo',
+    age: 29,
+    country: 'Brazil',
+  },
+  {
+    id: '4',
+    name: 'Cristian',
+    age: 27,
+    country: 'Brazil',
+  },
+  {
+    id: '5',
+    name: 'Aldemylla',
+    age: 27,
+    country: 'Brazil',
+  },
+];
+
+export const Default = {
+  args: {
+    headers,
+    items,
+  },
+};
+
+export const Clickable = {
+  args: {
+    headers,
+    items,
+    clickable: true,
+  },
+};
+
+export const WithHeightLimit = {
+  args: {
+    headers,
+    items,
+    height: '165px',
+  },
+};
+
+export const FixedHeaders = {
+  args: {
+    headers,
+    items,
+    fixedHeaders: true,
+    height: '165px',
+  },
+};
+
+export const Medium = {
+  args: {
+    headers,
+    items,
+    size: 'md',
+  },
+};
+
+export const Small = {
+  args: {
+    headers,
+    items,
+    size: 'sm',
+  },
+};
+
+export const HideHeaders = {
+  args: {
+    headers,
+    items,
+    hideHeaders: true,
+  },
+};
+
+export const SlotHeader = {
+  args: { headers, items },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    setup() {
+      const sort = ({ order, header }) => {
+        action('update:sort')({ order, header });
+        if (order === 'asc')
+          args.items = args.items.sort((a, b) => a.id - b.id);
+        if (order === 'desc')
+          args.items = args.items.sort((a, b) => b.id - a.id);
+      };
+      const updatePage = (page) => {
+        action('update:page')(page);
+        args.page = page;
+      };
+      const itemClick = (item) => {
+        action('itemClick')(item);
+      };
+
+      return { args, sort, updatePage, itemClick };
+    },
+    template: `
+    <UnnnicDataTable
+      v-bind="args"
+      :headers="args.headers"
+      :items="args.items"
+      :pageTotal="125"
+      :pageInterval="5"
+      @update:sort="sort"
+      @update:page="updatePage"
+      @itemClick="itemClick"
+    >
+      <template #header-name="{ header }">
+        <button>
+          {{ header.title }}
+        </button>
+      </template>
+    </UnnnicDataTable>
+    `,
+  }),
+};
+
+export const SlotItem = {
+  args: { headers, items },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    setup() {
+      const sort = ({ order, header }) => {
+        action('update:sort')({ order, header });
+        if (order === 'asc')
+          args.items = args.items.sort((a, b) => a.id - b.id);
+        if (order === 'desc')
+          args.items = args.items.sort((a, b) => b.id - a.id);
+      };
+      const updatePage = (page) => {
+        action('update:page')(page);
+        args.page = page;
+      };
+      const itemClick = (item) => {
+        action('itemClick')(item);
+      };
+
+      return { args, sort, updatePage, itemClick };
+    },
+    template: `
+    <UnnnicDataTable
+      v-bind="args"
+      :headers="args.headers"
+      :items="args.items"
+      :pageTotal="125"
+      :pageInterval="5"
+      @update:sort="sort"
+      @update:page="updatePage"
+      @itemClick="itemClick"
+    >
+      <template #body-id="{ item }">
+        <button>
+          {{ item.id }}
+        </button>
+      </template>
+    </UnnnicDataTable>
+    `,
+  }),
+};
+
+export const HidePagination = {
+  args: {
+    headers,
+    items,
+    hidePagination: true,
+  },
+};
+
+export const WithoutResults = {
+  args: {
+    headers,
+    items: [],
+  },
+};
+
+export const Loading = {
+  args: {
+    headers,
+    items,
+    isLoading: true,
+  },
+};

package/src/stories/SelectTime.stories.js

@@ -0,0 +1,25 @@
+import unnnicSelectTime from '../components/SelectTime/index.vue';
+
+export default {
+  title: 'Select/SelectTime',
+  component: unnnicSelectTime,
+  argTypes: {},
+  render: (args) => ({
+    components: {
+      unnnicSelectTime,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        exampleValue: '',
+      };
+    },
+    template: `
+      <unnnicSelectTime v-bind="args" v-model="exampleValue" />
+    `,
+  }),
+};
+
+export const Default = {};

package/src/utils/hours.js

@@ -0,0 +1,100 @@
+const hoursTimesOptions = [
+  {
+    label: '00:00',
+    value: '00:00',
+  },
+  {
+    label: '01:00',
+    value: '01:00',
+  },
+  {
+    label: '02:00',
+    value: '02:00',
+  },
+  {
+    label: '03:00',
+    value: '03:00',
+  },
+  {
+    label: '04:00',
+    value: '04:00',
+  },
+  {
+    label: '05:00',
+    value: '05:00',
+  },
+  {
+    label: '06:00',
+    value: '06:00',
+  },
+  {
+    label: '07:00',
+    value: '07:00',
+  },
+  {
+    label: '08:00',
+    value: '08:00',
+  },
+  {
+    label: '09:00',
+    value: '09:00',
+  },
+  {
+    label: '10:00',
+    value: '10:00',
+  },
+  {
+    label: '11:00',
+    value: '11:00',
+  },
+  {
+    label: '12:00',
+    value: '12:00',
+  },
+  {
+    label: '13:00',
+    value: '13:00',
+  },
+  {
+    label: '14:00',
+    value: '14:00',
+  },
+  {
+    label: '15:00',
+    value: '15:00',
+  },
+  {
+    label: '16:00',
+    value: '16:00',
+  },
+  {
+    label: '17:00',
+    value: '17:00',
+  },
+  {
+    label: '18:00',
+    value: '18:00',
+  },
+  {
+    label: '19:00',
+    value: '19:00',
+  },
+  {
+    label: '20:00',
+    value: '20:00',
+  },
+  {
+    label: '21:00',
+    value: '21:00',
+  },
+  {
+    label: '22:00',
+    value: '22:00',
+  },
+  {
+    label: '23:00',
+    value: '23:00',
+  },
+];
+
+export { hoursTimesOptions };