[4.x] - IndexTable novo componente de listagem de itens

.prettierignore

@@ -1,6 +1,9 @@
 # Files
 *.md
+*.mdx
 
 # Folders
 .husky/*
 .vscode/*
+
+*.yml

.storybook/preview.ts

@@ -18,6 +18,7 @@ const preview: Preview = {
     schema,
     brand,
   },
+  tags: ['autodocs'],
 };
 
 export default preview;

.vscode/extensions.json

@@ -1,8 +1,9 @@
 {
   "recommendations": [
-    "Vue.volar", 
+    "Vue.volar",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "EditorConfig.EditorConfig"
-  ]  
+    "EditorConfig.EditorConfig",
+    "Tobermory.es6-string-html"
+  ]
 }

eslint.config.js

@@ -1,9 +1,9 @@
 import eslint from '@eslint/js';
-import tseslint from 'typescript-eslint';
 import vitest from '@vitest/eslint-plugin';
 import prettierSkipFormattingConfig from '@vue/eslint-config-prettier/skip-formatting';
 import pluginVue from 'eslint-plugin-vue';
 import globals from 'globals';
+import tseslint from 'typescript-eslint';
 
 const globalFiles = ['**/*.{vue,js,mjs,cjs,ts}'];
 
@@ -108,10 +108,11 @@ export default [
           memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
         },
       ],
+      '@typescript-eslint/no-empty-object-type': 'off', // Permite interfaces com uso de extends apenas
     },
   },
   {
-    files: ['**/*.spec.ts'],
+    files: ['**/*.{test,spec}.ts'],
     plugins: {
       vitest,
     },
@@ -123,6 +124,7 @@ export default [
       'vitest/valid-title': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/naming-convention': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
     },
   },
   ...pluginVue.configs['flat/recommended'],
@@ -160,7 +162,7 @@ export default [
           order: ['script', 'template', 'style'],
         },
       ],
-      'vue/multi-word-component-names': 'warn',
+      'vue/multi-word-component-names': 'off', // Desabilitada devido ao padrão do DS em que os componentes ao serem usados em outros projetos podem conter um nome composto
       'vue/block-tag-newline': 'error',
       'vue/component-api-style': ['error', ['script-setup']],
       'vue/no-setup-props-reactivity-loss': 'error',
@@ -170,4 +172,11 @@ export default [
       'vue/padding-line-between-blocks': ['error', 'always'],
     },
   },
+  {
+    files: ['**/*.stories.ts'],
+    name: 'ds/docs',
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
 ];

package.json

@@ -23,7 +23,7 @@
     "postinstall": "npm run build"
   },
   "peerDependencies": {
-    "typescript": ">= 5.5.0",
+    "typescript": "5.5.0",
     "vue": ">= 3.4.29"
   },
   "dependencies": {

src/App.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import Page from './components/admin/page/Page.vue';
-import TextStyle from './components/ui/text-style/TextStyle.vue';
 import type { IAction } from './types';
 
 const action: IAction = {

src/components/admin/button-darkmode/ButtonDarkmode.vue

@@ -10,15 +10,15 @@ const colorSchemeStorageName = 'ds_color_scheme';
 const setColorScheme = (val: any) => {
   document.documentElement.setAttribute('data-theme', val);
 
-  if (val == ColorScheme.dark) {
+  if (val == ColorScheme.DARK) {
     iconMode.value = 'light_mode';
   } else {
     iconMode.value = 'dark_mode';
   }
 };
 
 const toggleDarkmode = () => {
-  const color = ColorSchemeService.get() === ColorScheme.dark ? ColorScheme.light : ColorScheme.dark;
+  const color = ColorSchemeService.get() === ColorScheme.DARK ? ColorScheme.LIGHT : ColorScheme.DARK;
   emit('changeSchemeColor', color);
   localStorage.setItem(colorSchemeStorageName, color);
   setColorScheme(color);

src/components/admin/platform-select/PlatformSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import Icon from '../../ui/icon/Icon.vue';
 import Tab from '../../ui/tab/Tab.vue';
 import TabItem from '../../ui/tab/TabItem.vue';
@@ -15,7 +15,11 @@ const props = defineProps<PlatformSelectProps>();
 
 const badgeConfigMerged = computed(() => ({ ...badgeConfigDefault, ...(props.badgeConfig ?? {}) }));
 
-const tab = ref(props.platformsList.find((item) => item.active)?.key);
+const tab = ref('');
+
+onMounted(() => {
+  tab.value = props.platformsList.find((item) => item.active)?.key ?? props.platformsList[0].key;
+});
 
 const emits = defineEmits(['change:platform']);
 
@@ -29,14 +33,15 @@ const hasBadge = (platform: IPlatform) => !!platform.badgeStatus;
 <template>
   <Tab v-model="tab" class="tab-container">
     <TabItem
-      v-for="platform in platformsList"
+      v-for="(platform, index) in platformsList"
+      :key="index"
       class="tab-item-btn"
       :class="{ '-item-disabled': platform.disabled }"
       :label="platform.name"
       :index="platform.key"
       @click="onChangeTab(platform)">
       <div class="tab-item-container">
-        <div class="badge-container" v-if="hasBadge(platform)">
+        <div v-if="hasBadge(platform)" class="badge-container">
           <Badge pill v-bind="badgeConfigMerged[platform.badgeStatus!]" />
         </div>
         <Icon :name="platform.icon" />

src/components/admin/table-list/TableList.vue

@@ -1,3 +1,13 @@
+<script lang="ts">
+/**
+ * ### TableList Component
+ *
+ * @deprecated Este componente está depreciado e será removido em versões futuras.
+ * Por favor, use o novo componente `IndexTable` em vez deste.
+ */
+export default {};
+</script>
+
 <script setup lang="ts">
 import { onMounted, watch, ref, reactive, onBeforeMount, computed } from 'vue';
 import { union, clone, omit, concat, isEqual } from 'lodash-es';
@@ -202,6 +212,8 @@ onMounted(() => {
   } else {
     queryParams.value = assignDefaultQueryParams();
   }
+
+  console.warn('ds - TableList is deprecated and will be removed in future versions. Please use IndexTable instead.');
 });
 
 let timerQ: ReturnType<typeof setTimeout>;

src/components/admin/table-list/index.ts

@@ -1,30 +1,29 @@
 export { default as TableListEmptyMessage } from './snippets/TableListEmptyMessage.vue';
 export { default as TableListEmptySearch } from './snippets/TableListEmptySearch.vue';
-export { default as TableListNav } from './table-list-nav/TableListNav.vue';
-export { default as TableListNavCustomFilter } from './table-list-nav/TableListNavCustomFilter.vue';
-export { default as TableListNavRefresh } from './table-list-nav/TableListNavRefresh.vue';
-export { default as TableListNavSearch } from './table-list-nav/TableListNavSearch.vue';
-export { default as TableListNavSortable } from './table-list-nav/TableListNavSortable.vue';
 export { default as TableListNavBulk } from './table-list-nav-bulk/TableListNavBulk.vue';
 export { default as TableListNavFilter } from './table-list-nav-filter/TableListNavFilter.vue';
 export { default as TableListNavFilterSidebar } from './table-list-nav-filter/TableListNavFilterSidebar.vue';
 export { default as TableListNavLoader } from './table-list-nav-loader/TableListNavLoader.vue';
 export { default as TableListNavPagination } from './table-list-nav-pagination/TableListNavPagination.vue';
+export { default as TableListNav } from './table-list-nav/TableListNav.vue';
+export { default as TableListNavCustomFilter } from './table-list-nav/TableListNavCustomFilter.vue';
+export { default as TableListNavRefresh } from './table-list-nav/TableListNavRefresh.vue';
+export { default as TableListNavSearch } from './table-list-nav/TableListNavSearch.vue';
+export { default as TableListNavSortable } from './table-list-nav/TableListNavSortable.vue';
 export { default as TableListTable } from './table-list-table/TableListTable.vue';
 export { default as TableListTabs } from './table-list-tabs/TableListTabs.vue';
 export { default as TableListTags } from './table-list-tags/TableListTags.vue';
-export { default as TableList } from './TableList.vue';
 export { default as TableListHeader } from './TableListHeader.vue';
 export { default as TableListItem } from './TableListItem.vue';
 export { default as TableListRow } from './TableListRow.vue';
+export { default as TableList } from './TableList.vue';
 
 export type {
+  ITableListConfig,
+  ITableListState,
   TBulkActions,
   TDialogDelete,
-  ITableListConfig,
-  TableListProps,
   TableListItemProps,
-  ITableListState,
   TableListNavBulkProps,
   TableListNavCustomFilterProps,
   TableListNavFilterProps,
@@ -35,6 +34,7 @@ export type {
   TableListNavRefreshProps,
   TableListNavSearchProps,
   TableListNavSortableProps,
+  TableListProps,
   TableListTablePros,
   TableListTabsProps,
   TableListTagsProps,

src/components/admin/table/Table.stories.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Table from './Table.vue';
+import TableBody from './TableBody.vue';
+import TableCell from './TableCell.vue';
+import TableHeadCell from './TableHeadCell.vue';
+import TableRow from './TableRow.vue';
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Table',
+  component: Table,
+  render: (args) => ({
+    components: { Table, TableHeadCell, TableBody, TableRow, TableCell },
+    setup() {
+      const products = [
+        { id: 1, name: 'Product 1', price: '$10' },
+        { id: 2, name: 'Product 2', price: '$20' },
+        { id: 3, name: 'Product 3', price: '$30' },
+      ];
+      return { args, products };
+    },
+    template: `
+    <Table v-bind="args">
+      <template #header>
+        <TableHeadCell>ID</TableHeadCell>
+        <TableHeadCell>Name</TableHeadCell>
+        <TableHeadCell>Price</TableHeadCell>
+      </template>
+      <TableBody>
+        <TableRow v-for="product in products" :key="product.id">
+          <TableCell>{{ product.id }}</TableCell>
+          <TableCell>{{ product.name }}</TableCell>
+          <TableCell>{{ product.price }}</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  `,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const minimum: Story = {
+  args: {},
+};

src/components/admin/table/Table.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { TableProps } from './types';
 
-defineEmits(['click']);
 defineProps<TableProps>();
 </script>
 

src/components/admin/table/TableRow.vue

@@ -9,7 +9,7 @@ const getComponent = () => {
 </script>
 
 <template>
-  <component :is="getComponent()" class="ui-table-row" :to="to" :class="{ '-head': head }">
+  <component :is="getComponent()" class="ui-table-row" :to="to" :class="{ '-head': head }" tabindex="0">
     <slot />
   </component>
 </template>

src/components/ui/form-checkbox/FormCheckbox.scss

@@ -21,7 +21,8 @@
     margin-top: var(--s-spacing-nano);
   }
 
-  &:hover {
+  &:hover,
+  &:focus {
     .ui-form-checkbox-checkmark {
       border-color: var(--s-color-border-highlight);
     }

src/components/ui/form-checkbox/FormCheckbox.vue

@@ -28,7 +28,7 @@ const update = (val: unknown) => {
 </script>
 
 <template>
-  <label class="ui-form-checkbox" :for="uid" :class="classList">
+  <label class="ui-form-checkbox" :for="uid" :class="classList" tabindex="0">
     <input
       v-model="model"
       type="checkbox"
@@ -40,9 +40,10 @@ const update = (val: unknown) => {
       :name="name"
       :disabled="disabled"
       :true-value="true"
+      :false-value="false"
       @update:modelValue="update" />
     <span class="ui-form-checkbox-checkmark"></span>
-    <div class="ui-form-checkbox-text" v-if="label || $slots.default">
+    <div v-if="label || $slots.default" class="ui-form-checkbox-text">
       <slot>{{ label }}</slot>
     </div>
   </label>

src/components/ui/form-radio/FormRadio.vue

@@ -10,7 +10,7 @@ const emit = defineEmits(['update:modelValue', 'update']);
 const uid = `ui-form-radio-${getCurrentInstance()?.uid}`;
 
 const isChecked = computed(() => {
-  return JSON.stringify(props.value) == JSON.stringify(props.modelValue);
+  return JSON.stringify(props.value) === JSON.stringify(props.modelValue);
 });
 
 const update = (val: string | boolean) => {
@@ -22,8 +22,8 @@ const update = (val: string | boolean) => {
 <template>
   <label class="ui-form-radio" :for="uid" :class="{ '-disabled': disabled }">
     <input
-      type="radio"
       :id="uid"
+      type="radio"
       :modelValue="modelValue"
       :value="value"
       :tabindex="tabindex"
@@ -33,7 +33,7 @@ const update = (val: string | boolean) => {
       :checked="isChecked"
       @input="update(value)" />
     <span class="ui-form-radio-checkmark" />
-    <div class="ui-form-radio-text" v-if="label || $slots.default">
+    <div v-if="label || $slots.default" class="ui-form-radio-text">
       <slot>{{ label }}</slot>
     </div>
   </label>