@weni/unnnic-system 3.28.2-alpha.2 → 3.28.2-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.28.2-alpha.2",
+  "version": "3.28.2-alpha.3",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/Table/Table.vue

@@ -1,6 +1,10 @@
 <template>
+  <UiTable v-if="version === '2'">
+    <slot />
+  </UiTable>
+
   <div
-    v-show="true"
+    v-else
     class="unnnic-table"
   >
     <div class="header">
@@ -28,15 +32,30 @@
 </template>
 
 <script>
+import { computed } from 'vue';
+import { Table as UiTable } from '@/components/ui/table';
+
 export default {
   name: 'UnnnicTable',
 
-  components: {},
+  components: {
+    UiTable,
+  },
+
+  provide() {
+    return {
+      unnnicTableVersion: computed(() => this.version),
+    };
+  },
 
   props: {
     items: {
       type: Array,
     },
+    version: {
+      type: String,
+      default: '1',
+    },
   },
 
   data() {

package/src/components/Table/TableRow.vue

@@ -1,5 +1,16 @@
 <template>
-  <div class="table-row">
+  <UiTableRow
+    v-if="isVersion2"
+    v-bind="$attrs"
+  >
+    <slot />
+  </UiTableRow>
+
+  <div
+    v-else
+    class="table-row"
+    v-bind="$attrs"
+  >
     <template
       v-for="(header, index) in headers"
       :key="header.id"
@@ -26,17 +37,31 @@
 </template>
 
 <script>
+import { computed, inject, unref } from 'vue';
+import UiTableRow from '@/components/ui/table/TableRow.vue';
+
 export default {
   name: 'UnnnicTableRow',
 
+  components: {
+    UiTableRow,
+  },
+
+  inheritAttrs: false,
+
   props: {
     headers: {
       type: Array,
     },
   },
 
-  data() {
-    return {};
+  setup() {
+    const tableVersion = inject('unnnicTableVersion', '1');
+    const isVersion2 = computed(() => unref(tableVersion) === '2');
+
+    return {
+      isVersion2,
+    };
   },
 };
 </script>

package/src/components/index.ts

@@ -10,6 +10,7 @@ import sidebar from './Sidebar/index.vue';
 import sidebarItem from './Sidebar/SidebarItem.vue';
 import table from './Table/Table.vue';
 import tableRow from './Table/TableRow.vue';
+import { TableBody, TableCell, TableHead, TableHeader } from './ui/table';
 import dropdown from './Dropdown/Dropdown.vue';
 import dropdownItem from './Dropdown/DropdownItem.vue';
 import avatarIcon from './AvatarIcon/AvatarIcon.vue';
@@ -138,6 +139,10 @@ export const components: ComponentsMap = {
   unnnicSidebarItem: sidebarItem,
   unnnicTable: table,
   unnnicTableRow: tableRow,
+  unnnicTableBody: TableBody,
+  unnnicTableCell: TableCell,
+  unnnicTableHead: TableHead,
+  unnnicTableHeader: TableHeader,
   unnnicAvatarIcon: avatarIcon,
   unnnicIcon: icon,
   unnnicIconSvg: icon,
@@ -261,6 +266,10 @@ export const unnnicSidebar = sidebar;
 export const unnnicSidebarItem = sidebarItem;
 export const unnnicTable = table;
 export const unnnicTableRow = tableRow;
+export const unnnicTableBody = TableBody;
+export const unnnicTableCell = TableCell;
+export const unnnicTableHead = TableHead;
+export const unnnicTableHeader = TableHeader;
 export const unnnicDropdown = dropdown as VueComponent;
 export const unnnicDropdownItem = dropdownItem;
 export const unnnicAvatarIcon = avatarIcon;
@@ -383,6 +392,10 @@ export const UnnnicSidebar = sidebar;
 export const UnnnicSidebarItem = sidebarItem;
 export const UnnnicTable = table;
 export const UnnnicTableRow = tableRow;
+export const UnnnicTableBody = TableBody;
+export const UnnnicTableCell = TableCell;
+export const UnnnicTableHead = TableHead;
+export const UnnnicTableHeader = TableHeader;
 export const UnnnicDropdown = dropdown as VueComponent;
 export const UnnnicDropdownItem = dropdownItem;
 export const UnnnicAvatarIcon = avatarIcon;

package/src/components/ui/table/Table.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div class="relative w-full overflow-auto">
+    <table :class="cn('unnnic-table', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-table {
+  border-collapse: collapse;
+  width: 100%;
+  caption-side: bottom;
+
+  @include unnnic-font-body;
+  color: $unnnic-color-fg-base;
+}
+</style>

package/src/components/ui/table/TableBody.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <tbody :class="cn(props.class)">
+    <slot />
+  </tbody>
+</template>

package/src/components/ui/table/TableCell.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <td :class="cn('unnnic-table-cell', props.class)">
+    <slot />
+  </td>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-table-cell {
+  vertical-align: middle;
+
+  padding: $unnnic-space-4 0;
+
+  &:not(:last-child) {
+    padding-right: $unnnic-space-4;
+  }
+}
+</style>

package/src/components/ui/table/TableHead.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <th :class="cn('unnnic-table-head', props.class)">
+    <slot />
+  </th>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-table-head {
+  @include unnnic-font-caption-1;
+  color: $unnnic-color-fg-base;
+  text-align: left;
+  align-items: center;
+
+  pointer-events: none;
+}
+</style>

package/src/components/ui/table/TableHeader.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <thead :class="cn('unnnic-table-header', props.class)">
+    <slot />
+  </thead>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-table-header {
+  * {
+    padding-bottom: $unnnic-space-2;
+  }
+}
+</style>

package/src/components/ui/table/TableRow.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { computed, useAttrs } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+
+const attrs = useAttrs();
+const isClickable = computed(() => Boolean(attrs.onClick));
+</script>
+
+<template>
+  <tr
+    :class="
+      cn(
+        'unnnic-table-row',
+        'transition-colors data-[state=selected]:bg-muted',
+        isClickable && 'cursor-pointer',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </tr>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-table-row {
+  & > :first-child {
+    padding-left: $unnnic-space-3;
+  }
+
+  & > :last-child {
+    padding-right: $unnnic-space-3;
+  }
+
+  border-bottom: 1px solid $unnnic-color-border-base;
+
+  &:hover {
+    background-color: $unnnic-color-bg-soft;
+  }
+}
+</style>

package/src/components/ui/table/index.ts

@@ -0,0 +1,6 @@
+export { default as Table } from './Table.vue';
+export { default as TableBody } from './TableBody.vue';
+export { default as TableCell } from './TableCell.vue';
+export { default as TableHead } from './TableHead.vue';
+export { default as TableHeader } from './TableHeader.vue';
+export { default as TableRow } from './TableRow.vue';

package/src/stories/Table.stories.js

@@ -2,11 +2,24 @@ import unnnicTable from '../components/Table/Table.vue';
 import unnnicTableRow from '../components/Table/TableRow.vue';
 import unnnicButton from '../components/Button/Button.vue';
 import unnnicCheckbox from '../components/Checkbox/Checkbox.vue';
+import {
+  TableHeader,
+  TableBody,
+  TableHead,
+  TableCell,
+} from '@/components/ui/table';
+import UnnnicTag from '@/components/Tag/Tag.vue';
+import { action } from 'storybook/actions';
 
 export default {
   title: 'example/Table',
   component: unnnicTable,
-  argTypes: {},
+  argTypes: {
+    version: {
+      control: { type: 'select' },
+      options: ['1', '2'],
+    },
+  },
 };
 
 const Template = (args, { argTypes }) => ({
@@ -21,6 +34,7 @@ const Template = (args, { argTypes }) => ({
     <div>
       <unnnic-table
         v-bind="$props"
+        version="1"
         :items="table.items"
         :style="{ maxHeight: '280px', maxWidth: '800px', }"
       >
@@ -142,4 +156,63 @@ const Template = (args, { argTypes }) => ({
 });
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+  version: '1',
+};
+
+export const Version2 = {
+  render: () => ({
+    components: {
+      unnnicTable,
+      unnnicTableRow,
+      TableHeader,
+      TableBody,
+      TableHead,
+      TableCell,
+      UnnnicTag,
+    },
+    setup() {
+      return {
+        onRowClick: action('click'),
+      };
+    },
+    template: `
+      <unnnic-table version="2">
+        <TableHeader>
+          <unnnic-table-row>
+            <TableHead>
+              Invoice
+            </TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Method</TableHead>
+            <TableHead>
+              Amount
+            </TableHead>
+          </unnnic-table-row>
+        </TableHeader>
+        <TableBody>
+          <unnnic-table-row>
+            <TableCell>
+              INV001
+            </TableCell>
+            <TableCell><UnnnicTag scheme="green" text="Paid" /></TableCell>
+            <TableCell>Credit Card</TableCell>
+            <TableCell>
+              $250.00
+            </TableCell>
+          </unnnic-table-row>
+          <unnnic-table-row @click="onRowClick">
+            <TableCell>
+              INV002
+            </TableCell>
+            <TableCell><UnnnicTag scheme="red" text="Pending" /></TableCell>
+            <TableCell>Bank Transfer</TableCell>
+            <TableCell>
+              $199.00
+            </TableCell>
+          </unnnic-table-row>
+        </TableBody>
+      </unnnic-table>
+    `,
+  }),
+};