feat(maz-ui): MazTable - new component

LouisMazel · Dec 23, 2023 · 9efa5a2 · 9efa5a2
1 parent bf62efd
commit 9efa5a2
Show file tree

Hide file tree

Showing 10 changed files with 1,307 additions and 2 deletions.
diff --git a/packages/docs/docs/.vitepress/configs/components.mts b/packages/docs/docs/.vitepress/configs/components.mts
@@ -7,13 +7,11 @@ export const components = {
       items: [
         { text: 'MazBtn', link: '/components/maz-btn' },
         { text: 'MazCheckbox', link: '/components/maz-checkbox' },
-        { text: 'MazDropzone', link: '/components/maz-dropzone' },
         { text: 'MazInput', link: '/components/maz-input' },
         { text: 'MazInputCode', link: '/components/maz-input-code' },
         { text: 'MazInputNumber', link: '/components/maz-input-number' },
         { text: 'MazInputPrice', link: '/components/maz-input-price' },
         { text: 'MazInputTags', link: '/components/maz-input-tags' },
-        { text: 'MazPicker', link: '/components/maz-picker' },
         { text: 'MazPhoneNumberInput', link: '/components/maz-phone-number-input' },
         { text: 'MazRadio', link: '/components/maz-radio' },
         { text: 'MazRadioButtons', link: '/components/maz-radio-buttons' },
@@ -23,6 +21,14 @@ export const components = {
         { text: 'MazTextarea', link: '/components/maz-textarea' },
       ]
     },
+    {
+      text: 'Data',
+      items: [
+        { text: 'MazDropzone', link: '/components/maz-dropzone' },
+        { text: 'MazPicker', link: '/components/maz-picker' },
+        { text: 'MazTable (data-table)', link: '/components/maz-table' },
+      ]
+    },
     {
       text: 'UI',
       items: [

diff --git a/packages/docs/docs/components/competitions.ts b/packages/docs/docs/components/competitions.ts
@@ -0,0 +1,145 @@
+export const competitions = [
+  {
+    "id": "0262672d-7c7a-4d30-866e-edb88b5a5336",
+    "name": "UEFA Champions League",
+    "code": "CL",
+    "type": "CUP",
+    "areaName": "Europe",
+    "matchday": 6,
+    "logoUrl": "https://crests.football-data.org/CL.png",
+    "groups": 1,
+    "index": 1
+  },
+  {
+    "id": "08d15e97-a319-4772-9b82-f1877369b40f",
+    "name": "Premier League",
+    "code": "PL",
+    "type": "LEAGUE",
+    "areaName": "England",
+    "matchday": 18,
+    "logoUrl": "https://crests.football-data.org/PL.png",
+    "groups": 1,
+    "index": 2
+  },
+  {
+    "id": "17e62396-bbcb-42f5-acff-caed11534976",
+    "name": "Serie A",
+    "code": "SA",
+    "type": "LEAGUE",
+    "areaName": "Italy",
+    "matchday": 17,
+    "logoUrl": "https://crests.football-data.org/SA.png",
+    "groups": 0,
+    "index": 3
+  },
+  {
+    "id": "3726264e-ba3a-4a9f-b4a4-8fc33e12747c",
+    "name": "FIFA World Cup",
+    "code": "WC",
+    "type": "CUP",
+    "areaName": "World",
+    "matchday": 8,
+    "logoUrl": "https://crests.football-data.org/qatar.png",
+    "groups": 1,
+    "index": 4
+  },
+  {
+    "id": "555dc3f4-e592-46af-b634-59f07a201f2e",
+    "name": "Primeira Liga",
+    "code": "PPL",
+    "type": "LEAGUE",
+    "areaName": "Portugal",
+    "matchday": 15,
+    "logoUrl": "https://crests.football-data.org/PPL.png",
+    "groups": 0,
+    "index": 5
+  },
+  {
+    "id": "59bbdfa0-86d8-4a74-b701-435747c55a42",
+    "name": "Primera Division",
+    "code": "PD",
+    "type": "LEAGUE",
+    "areaName": "Spain",
+    "matchday": 18,
+    "logoUrl": "https://crests.football-data.org/PD.png",
+    "groups": 1,
+    "index": 6
+  },
+  {
+    "id": "6ae53332-3d27-4781-912d-d9c4e69657f9",
+    "name": "Ligue 1",
+    "code": "FL1",
+    "type": "LEAGUE",
+    "areaName": "France",
+    "matchday": 17,
+    "logoUrl": "https://crests.football-data.org/FL1.png",
+    "groups": 4,
+    "index": 7
+  },
+  {
+    "id": "747c79ee-89c8-436a-b0ea-53f05f180007",
+    "name": "European Championship",
+    "code": "EC",
+    "type": "CUP",
+    "areaName": "Europe",
+    "matchday": 1,
+    "logoUrl": "https://crests.football-data.org/EUR.svg",
+    "groups": 1,
+    "index": 8
+  },
+  {
+    "id": "7a32d897-6b22-4212-8ffe-049ae912c346",
+    "name": "Eredivisie",
+    "code": "DED",
+    "type": "LEAGUE",
+    "areaName": "Netherlands",
+    "matchday": 18,
+    "logoUrl": "https://crests.football-data.org/ED.png",
+    "groups": 0,
+    "index": 9
+  },
+  {
+    "id": "ab57e2dc-272c-45e6-b13e-57617a13b753",
+    "name": "Championship",
+    "code": "ELC",
+    "type": "LEAGUE",
+    "areaName": "England",
+    "matchday": 23,
+    "logoUrl": "https://crests.football-data.org/ELC.png",
+    "groups": 0,
+    "index": 10
+  },
+  {
+    "id": "b84e3295-7315-46c7-b979-6d9d784e5460",
+    "name": "Campeonato Brasileiro Série A",
+    "code": "BSA",
+    "type": "LEAGUE",
+    "areaName": "Brazil",
+    "matchday": 38,
+    "logoUrl": "https://crests.football-data.org/764.svg",
+    "groups": 0,
+    "index": 11
+  },
+  {
+    "id": "cafad3ce-1783-4652-9248-4bcad024dd98",
+    "name": "Copa Libertadores",
+    "code": "CLI",
+    "type": "CUP",
+    "areaName": "South America",
+    "matchday": 11,
+    "logoUrl": "https://crests.football-data.org/CLI.svg",
+    "groups": 0,
+    "index": 12
+  },
+  {
+    "id": "ed945bea-9a58-450a-8d62-7baa7722b5e7",
+    "name": "Bundesliga",
+    "code": "BL1",
+    "type": "LEAGUE",
+    "areaName": "Germany",
+    "matchday": 16,
+    "logoUrl": "https://crests.football-data.org/BL1.png",
+    "groups": 0,
+    "index": 13
+  }
+]
diff --git a/packages/docs/docs/components/maz-table.md b/packages/docs/docs/components/maz-table.md
@@ -0,0 +1,116 @@
+---
+title: MazTable
+description: MazTable is designed to be a reusable data table with advanced features. Pagination, Search, Column Sorting, Row Selection, UI options, Loading and Slots.
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+## Key Features
+
+1. Pagination (prop `pagination`)
+   * The component supports pagination with buttons to go to the first, previous, next, and last page.
+   * You can display only the pagination elements (input and buttons) and make API calls to your server to get elements by using the prop `pagination` with `no-paginate-rows`.
+2. Search (prop `search`): It includes a search feature with a search bar where users can enter a query to filter displayed data. You can choose the column where the search will be activated.
+3. Column Sorting (prop: `sortable`): Columns are sortable, indicated by arrow icons. Sorting can be activated by clicking on the column header.
+4. Row Selection (prop `select-value="key"`): There is a dedicated column for selection with a checkbox for each row. Users can individually or collectively select/deselect rows.
+5. Customizable Page Size: Users can choose the number of items to display per page using a dropdown list.
+6. Loading Indicator (prop `loading`): A loading indicator (MazLoadingBar) is displayed when data is being loaded.
+
+## Available models
+
+* v-model: `string[] | undefined` (list of selected key)
+* v-model:search-query: `string | undefined`
+* v-model:page: `number`
+* v-model:page-size: `number`
+
+## Basic usage
+
+You can use MazTable and his child component to build a simple table and enjoy the style.
+
+<MazTable size="sm" :headers="['#', 'Lastname', 'Firstname', 'Age']">
+  <MazTableRow>
+    <MazTableCell>
+      1
+    </MazTableCell>
+    <MazTableCell>
+      Louis
+    </MazTableCell>
+    <MazTableCell>
+      Mazel
+    </MazTableCell>
+    <MazTableCell>
+      33
+    </MazTableCell>
+  </MazTableRow>
+</MazTable>
+
+```vue
+<template>
+  <MazTable size="sm" :headers="['#', 'Lastname', 'Firstname', 'Age']">
+    <MazTableRow>
+      <MazTableCell>
+        1
+      </MazTableCell>
+      <MazTableCell>
+        Louis
+      </MazTableCell>
+      <MazTableCell>
+        Mazel
+      </MazTableCell>
+      <MazTableCell>
+        33
+      </MazTableCell>
+    </MazTableRow>
+  </MazTable>
+</template>
+
+<script lang="ts" setup>
+  import MazTable from 'maz-ui/components/MazTable'
+</script>
+```
+
+<MazTable
+  size="sm"
+  search
+  pagination
+  sortable
+  selectable
+  :headers="[
+    { label:'#', key: 'index', align: 'center' },
+    { label:'Name', key: 'name' },
+    { label: 'Code', key: 'code'  },
+    { label: 'Type', key: 'type' },
+    { label: 'Area', key: 'areaName' },
+    { label: 'Matchday', key: 'matchday' },
+  ]"
+  :rows="competitions"
+>
+</MazTable>
+
+<script lang="ts" setup>
+  import {competitions} from './competitions.ts'
+</script>
+
+## Advanced
+
+## Props & Events emitted
+
+## MazTable
+
+<!--@include: ./../.vitepress/generated-docs/maz-table.doc.md-->
+
+## MazTableCell
+
+<!--@include: ./../.vitepress/generated-docs/maz-table-cell.doc.md-->
+
+## MazTableRow
+
+<!--@include: ./../.vitepress/generated-docs/maz-table-row.doc.md-->
+
+## MazTableTitle
+
+<!--@include: ./../.vitepress/generated-docs/maz-table-title.doc.md-->
diff --git a/packages/lib/components/MazLoadingBar.vue b/packages/lib/components/MazLoadingBar.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="m-loading-bar">
+    <div></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { Color } from './types'
+  import { computed } from 'vue'
+
+  const props = withDefaults(
+    defineProps<{
+      /** The color of the loading bar */
+      color?: Color
+      /** Height of the bar */
+      height?: string
+    }>(),
+    { color: 'primary', height: '0.125rem' },
+  )
+
+  const colorCSVariables = computed(() => ({
+    alpha: `var(--maz-color-${props.color}-alpha-20)`,
+    main: `var(--maz-color-${props.color})`,
+  }))
+</script>
+
+<style lang="postcss" scoped>
+  .m-loading-bar {
+    @apply maz-relative maz-block maz-h-0.5 maz-w-full maz-overflow-hidden maz-bg-primary-alpha-20;
+
+    background-color: v-bind('colorCSVariables.alpha');
+    overflow: hidden;
+
+    div {
+      background-color: v-bind('colorCSVariables.main');
+
+      &::before {
+        content: '';
+
+        @apply maz-absolute;
+
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        will-change: left, right;
+        animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      }
+
+      &::after {
+        content: '';
+
+        @apply maz-absolute;
+
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        will-change: left, right;
+        animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        animation-delay: 1.15s;
+      }
+    }
+  }
+
+  @keyframes indeterminate {
+    0% {
+      left: -35%;
+      right: 100%;
+    }
+
+    60% {
+      left: 100%;
+      right: -90%;
+    }
+
+    100% {
+      left: 100%;
+      right: -90%;
+    }
+  }
+
+  @keyframes indeterminate-short {
+    0% {
+      left: -200%;
+      right: 100%;
+    }
+
+    60% {
+      left: 107%;
+      right: -8%;
+    }
+
+    100% {
+      left: 107%;
+      right: -8%;
+    }
+  }
+</style>