@weni/unnnic-system 2.0.12 → 2.0.14

package/src/components/TableNext/TablePagination.vue

@@ -0,0 +1,95 @@
+<template>
+  <section class="table-pagination">
+    <p class="table-pagination__count">
+      {{ tablePagination }}
+    </p>
+
+    <Pagination
+      :modelValue="modelValue"
+      @update:model-value="$emit('update:model-value', $event)"
+      :max="pages"
+      :show="5"
+    />
+  </section>
+</template>
+
+<script>
+import Pagination from '../Pagination/Pagination.vue';
+import UnnnicI18n from '../../mixins/i18n';
+
+export default {
+  name: 'TablePagination',
+
+  mixins: [UnnnicI18n],
+
+  components: {
+    Pagination,
+  },
+
+  props: {
+    modelValue: {
+      type: Number,
+      required: true,
+    },
+    total: {
+      type: Number,
+      required: false,
+    },
+    interval: {
+      type: Number,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      defaultTranslations: {
+        pagination: {
+          'pt-br': '{from} - {to} de {total}',
+          en: '{from} - {to} of {total}',
+          es: '{from} - {to} de {total}',
+        },
+      },
+    };
+  },
+
+  computed: {
+    tablePagination() {
+      const { modelValue, interval, total } = this;
+
+      return this.i18n('pagination', {
+        from: total === 0 ? 0 : (modelValue - 1) * interval + 1,
+        to: Math.min(modelValue * interval, total),
+        total,
+      });
+    },
+
+    pages() {
+      return Math.ceil(this.total / this.interval);
+    },
+    showTotal() {
+      return typeof this.total === 'number';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+.table-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: $unnnic-spacing-sm $unnnic-spacing-nano;
+
+  height: min-content;
+
+  &__count {
+    color: $unnnic-color-neutral-dark;
+    font-size: $unnnic-font-size-body-gt;
+    font-family: $unnnic-font-family-secondary;
+  }
+}
+</style>

package/src/components/TableNext/validation.js

@@ -0,0 +1,52 @@
+const validateHeader = (cell) => {
+  const isContentString = typeof cell.content !== 'string';
+  if (isContentString) {
+    throw new Error('Each item in "headers" must have "content" as a string.');
+  }
+
+  const isSortableBoolean = 'isSortable' in cell && typeof cell.isSortable !== 'boolean';
+  if (isSortableBoolean) {
+    throw new Error('Each item in "headers" that contains “isSortable” must assign it as boolean');
+  }
+};
+
+export const validateHeaders = (headers) => {
+  if (!Array.isArray(headers)) {
+    throw new Error('Property headers needs to be an array.');
+  }
+
+  if (headers.length === 0) {
+    throw new Error('Property headers must not to be an empty array.');
+  }
+
+  headers.forEach(validateHeader);
+
+  return true;
+};
+
+const validateRow = (cell) => {
+  const isContentArray = !('content' in cell) || !Array.isArray(cell.content);
+  if (isContentArray) {
+    throw new Error('Each item in "rows" must have "content" as an array.');
+  }
+
+  const isLinkObject = 'link' in cell && typeof cell.link !== 'object' && typeof cell.link !== 'undefined';
+  if (isLinkObject) {
+    throw new Error('Each item in "rows" that contains “link” must assign it as object');
+  }
+
+  const isLinkWithoutUrl = cell.link && !('url' in cell.link);
+  if (isLinkWithoutUrl) {
+    throw new Error('Each item in "rows" with "link" must contain "url".');
+  }
+};
+
+export const validateRows = (rows) => {
+  if (!Array.isArray(rows)) {
+    throw new Error('Property rows needs to be an array.');
+  }
+
+  rows.forEach(validateRow);
+
+  return true;
+};

package/src/components/index.js

@@ -79,6 +79,7 @@ import EmojiPicker from './EmojiPicker/EmojiPicker.vue';
 import ChartFunnel from './ChartFunnel/ChartFunnel.vue';
 import Disclaimer from './Disclaimer/Disclaimer.vue';
 import Drawer from './Drawer/Drawer.vue';
+import TableNext from './TableNext/TableNext.vue';
 
 export const components = {
   unnnicFormElement: formElement,
@@ -163,6 +164,7 @@ export const components = {
   unnnicChartFunnel: ChartFunnel,
   unnnicDisclaimer: Disclaimer,
   unnnicDrawer: Drawer,
+  unnnicTableNext: TableNext,
 };
 
 export const unnnicFontSize = fontSize;
@@ -248,3 +250,4 @@ export const unnnicEmojiPicker = EmojiPicker;
 export const unnnicChartFunnel = ChartFunnel;
 export const unnnicDisclaimer = Disclaimer;
 export const unnnicDrawer = Drawer;
+export const unnnicTableNext = TableNext;

package/src/stories/SelectSmart2.stories.js

@@ -0,0 +1,59 @@
+import unnnicSelectSmart from '../components/SelectSmart/SelectSmart.vue';
+
+export default {
+  title: 'Form/SelectSmart2',
+  component: unnnicSelectSmart,
+  argTypes: {
+    'on-update:model-value': { action: '@update:model-value' },
+    size: { control: { type: 'select', options: ['md', 'sm'] } },
+    type: { control: { type: 'select', options: ['normal', 'error'] } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicSelectSmart,
+  },
+
+  data() {
+    return {
+      selected: [],
+      options: [
+        {
+          value: 't1',
+          label: 'teste 1'
+        },
+        {
+          value: 't2',
+          label: 'teste 2'
+        },
+        {
+          value: 't3',
+          label: 'teste 3'
+        },
+      ]
+    };
+  },
+
+  template: `
+    <div>
+      <pre>v-model: {{ content }}</pre>
+      <unnnic-select-smart :options="options" v-model="selected" multiple :selectFirst="false" />
+    </div>
+  `,
+
+  methods: {},
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Label',
+  placeholder: 'Placeholder',
+  maxLength: 150,
+  disabled: false,
+  type: 'normal',
+  errors: [],
+};

package/src/stories/TableNext.stories.js

@@ -0,0 +1,103 @@
+import UnnnicTableNext from '../components/TableNext/TableNext.vue';
+import UnnnicButton from '../components/Button/Button.vue';
+
+export default {
+  title: 'example/TableNext',
+  component: UnnnicTableNext,
+  argTypes: {},
+  render: (args) => ({
+    components: {
+      UnnnicTableNext,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        pagination: 1,
+        table: {
+          headers: [
+            {
+              content: 'ID',
+            },
+            {
+              content: 'Name',
+            },
+            {
+              content: 'Age',
+            },
+            {
+              content: 'Country',
+            },
+            {
+              content: 'Add with friend',
+            },
+          ],
+          rows: [],
+        },
+      };
+    },
+    template: `
+    <UnnnicTableNext
+      v-bind="args"
+      :headers="table.headers"
+      :rows="args.rows || table.rows"
+      v-model:pagination="pagination"
+      :paginationTotal="125"
+    />
+    `,
+  }),
+};
+const addButton = {
+  component: UnnnicButton,
+  props: {
+    text: 'Add',
+    type: 'tertiary',
+    iconLeft: 'add',
+    size: 'small',
+  },
+  events: {
+    click: (event) => {
+      event.preventDefault();
+      // eslint-disable-next-line no-alert
+      console.log('click');
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    rows: [
+      {
+        content: ['1', 'Alice', '30', 'USA', addButton],
+        link: {
+          url: 'https://weni.ai/',
+          target: '_blank',
+        },
+      },
+      {
+        content: ['2', 'Bob', '25', 'Canada', addButton],
+        link: {
+          url: 'https://weni.ai/',
+        },
+      },
+      {
+        content: ['3', 'Charlie', '35', 'UK', addButton],
+      },
+      {
+        content: ['4', 'Diana', '28', 'Australia', addButton],
+      },
+      {
+        content: ['5', 'Ethan', '22', 'New Zealand', addButton],
+      },
+    ],
+  },
+};
+
+export const WithoutResults = { args: {} };
+
+export const Loading = {
+  args: {
+    isLoading: true,
+  },
+};