@mobileaction/action-kit 1.42.7-beta.2 → 1.42.7-beta.4

package/src/components/table/stories/data/fields.ts

@@ -0,0 +1,110 @@
+import { h } from 'vue';
+import { MaIcon, MaAppIcon } from '@/index';
+
+export const Fields = [
+    {
+        field: 'keyword',
+        headerName: 'Keyword',
+        filter: 'agTextColumnFilter',
+        pinned: true,
+        cellRenderer: 'agGroupCellRenderer',
+        minWidth: 250,
+    },
+    {
+        field: 'trackId',
+        headerName: 'App',
+        pinned: true,
+        cellClass: 'flex items-center justify-center',
+        sortable: false,
+        cellRenderer: {
+            props: ['params'],
+            setup(props: any) {
+                return () => props.params.data?.trackId?  h('div', {
+                    class: 'flex items-center h-full',
+                }, [
+                    h(MaAppIcon, {
+                        appIcon: 'https://is2-ssl.mzstatic.com/image/thumb/Purple116/v4/d6/38/28/d6382878-36fe-bcdc-d5c2-b74289a73bc3/AppIcon-0-1x_U007emarketing-0-10-0-85-220.png/60x60.png',
+                        appName: 'Calm',
+                        appDescription: 'Health & Fitness',
+                        platform: 'ios',
+                        size: 'xx-small',
+                        showTooltip: true,
+                    }),
+                ]): null;
+            },
+        },
+    },
+    {
+        field: 'rank',
+        headerName: 'Rank',
+        filter: 'agNumberColumnFilter',
+        filterParams: {
+            buttons: ['reset', 'apply'],
+        },
+        type: 'numericColumn',
+        aggFunc: 'sum',
+        headerClass: 'right-aligned',
+    },
+    {
+        field: 'searchVolume',
+        headerName: 'Search Volume',
+        filter: 'agNumberColumnFilter',
+        type: 'numericColumn',
+        aggFunc: 'sum',
+        headerClass: 'right-aligned',
+    },
+    {
+        field: 'change',
+        headerName: 'Change',
+        filter: 'agNumberColumnFilter',
+        type: 'numericColumn',
+        aggFunc: 'sum',
+        headerClass: 'right-aligned',
+    },
+    {
+        field: 'chance',
+        headerName: 'Chance',
+        filter: 'agNumberColumnFilter',
+        type: 'numericColumn',
+        aggFunc: 'sum',
+        valueFormatter: ({ value }: { value: number }) => value.toFixed(0),
+        headerClass: 'right-aligned',
+    },
+    {
+        field: 'numberOfApps',
+        headerName: 'Number of Apps',
+        filter: 'agNumberColumnFilter',
+        type: 'numericColumn',
+        aggFunc: 'sum',
+        headerClass: 'right-aligned',
+    },
+    {
+        field: 'relevancyScore',
+        headerName: 'Relevancy Score',
+        filter: 'agNumberColumnFilter',
+        type: 'numericColumn',
+        aggFunc: 'sum',
+        headerClass: 'right-aligned',
+    },
+    {
+        field: 'runningSearchAds',
+        headerName: 'Search Ads',
+        filter: 'agBooleanColumnFilter',
+        cellDataType: 'boolean',
+        cellRenderer: {
+            props: ['params'],
+            setup(props: any) {
+                return () => {
+                    const { value } = props.params;
+                    if (value === undefined) return null;
+
+                    if (value) {
+                        return h(MaIcon, { name: 'tick-circle-bold', class: 'text-green-500' });
+                    } else {
+                        return h(MaIcon, { name: 'close-circle-bold', class: 'text-red-500' });
+                    }
+                };
+            },
+        },
+    },
+];

package/src/components/table/stories/default.stories.ts

@@ -0,0 +1,25 @@
+import { h } from 'vue';
+import { StoryFn } from '@storybook/vue3';
+
+import data from './data/data.json';
+import { Fields } from './data/fields';
+
+import TablePreview from '../preview.vue';
+
+export default {
+  title: 'Advanced/Table',
+  parameters: {
+    docs: {
+      disable: true,
+    },
+  },
+};
+
+export const Default: StoryFn = () =>
+  h(TablePreview, { data, columns: Fields });
+export const AdvancedFilter: StoryFn = () =>
+  h(TablePreview, { data, columns: Fields, advancedFilter: true });
+export const StickyHeader: StoryFn = () =>
+  h(TablePreview, { data, columns: Fields, domLayout: 'autoHeight' });
+export const StatusBar: StoryFn = () =>
+  h(TablePreview, { data, columns: Fields, showStatusBar: true });

package/src/components/table/stories/table.mdx

@@ -0,0 +1,51 @@
+import  { Meta }  from  '@storybook/blocks';
+
+<Meta title="Advanced/Table" />
+
+# AgGrid Table
+
+Action-Kit only includes theme codes and a preview for using AG Grid.
+
+For AG Grid usage, please refer to the [official documentation.](https://www.ag-grid.com/vue-data-grid/getting-started/)
+
+You can import the style codes of AG Grid's theme created for Mobile Action from this file.
+
+```bash
+
+import  "@mobileaction/action-kit/dist/table.css"
+
+```
+
+To apply the AG Grid Mobile Action theme, simply add the **ag-theme-ma** class to the AgGridVue component
+
+```bash
+
+<ag-grid-vue class="ag-theme-ma"  ... />
+
+```
+
+To apply borderless variant add the **ag-theme-ma--borderless** class to the AgGridVue component
+
+```bash
+
+<ag-grid-vue class="ag-theme-ma ag-theme-ma--borderless"  ... />
+
+```
+
+To apply no border radius variant add the **no-rounded** class to the AgGridVue component
+
+```bash
+
+<ag-grid-vue class="ag-theme-ma no-rounded"  ... />
+
+```
+
+**MobileAction AgGrid usage rules**
+
+[Confluence document](https://mobileaction.atlassian.net/wiki/spaces/ENG/pages/1807384583/AG+Grid+Table+Columns+Rulesets+for+MA+Dashboard) for cell rulesets
+
+* Table widths will fit into their respective areas.
+* Right-aligned columns will have their menu and filter buttons aligned to the right. For this, the `right-aligned` headerClass needs to be added to the columns.
+* All numeric columns, except for lead columns and string columns, will be right-aligned.
+* Lead columns will be pinned. If the width of the lead cell is too large in mobile view, it will not be pinned for the mobile view.
+* Grand total rows will be pinned at the bottom. If a custom total row is being created instead of a grand total, the row should be given the `ma-total-row` className to inherit the total row styles.

package/src/components/tabs/assets/styles.scss

@@ -0,0 +1,435 @@
+.antd-tabs-top,
+.antd-tabs-bottom {
+  @apply flex-col;
+}
+.antd-tabs-top > .antd-tabs-nav,
+.antd-tabs-bottom > .antd-tabs-nav,
+.antd-tabs-top > div > .antd-tabs-nav,
+.antd-tabs-bottom > div > .antd-tabs-nav {
+  @apply mt-0 mx-0;
+}
+// .antd-tabs-top > .antd-tabs-nav::before,
+// .antd-tabs-bottom > .antd-tabs-nav::before,
+// .antd-tabs-top > div > .antd-tabs-nav::before,
+// .antd-tabs-bottom > div > .antd-tabs-nav::before {
+//   @apply absolute content-[""] border-b-gray-200 border-b border-solid inset-x-0;
+// }
+.antd-tabs-top > .antd-tabs-nav .antd-tabs-ink-bar,
+.antd-tabs-bottom > .antd-tabs-nav .antd-tabs-ink-bar,
+.antd-tabs-top > div > .antd-tabs-nav .antd-tabs-ink-bar,
+.antd-tabs-bottom > div > .antd-tabs-nav .antd-tabs-ink-bar {
+  @apply h-0.5;
+}
+.antd-tabs-top > .antd-tabs-nav .antd-tabs-ink-bar-animated,
+.antd-tabs-bottom > .antd-tabs-nav .antd-tabs-ink-bar-animated,
+.antd-tabs-top > div > .antd-tabs-nav .antd-tabs-ink-bar-animated,
+.antd-tabs-bottom > div > .antd-tabs-nav .antd-tabs-ink-bar-animated {
+  transition:
+    width 0.3s,
+    left 0.3s,
+    right 0.3s;
+}
+.antd-tabs-top > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs-bottom > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs-top > div > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs-bottom > div > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs-top > .antd-tabs-nav .antd-tabs-nav-wrap::after,
+.antd-tabs-bottom > .antd-tabs-nav .antd-tabs-nav-wrap::after,
+.antd-tabs-top > div > .antd-tabs-nav .antd-tabs-nav-wrap::after,
+.antd-tabs-bottom > div > .antd-tabs-nav .antd-tabs-nav-wrap::after {
+  @apply w-[30px] inset-y-0;
+}
+.antd-tabs-top > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs-bottom > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs-top > div > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs-bottom > div > .antd-tabs-nav .antd-tabs-nav-wrap::before {
+  @apply shadow-[inset_10px_0_8px_-8px_rgba(0,0,0,0.08)] left-0;
+}
+.antd-tabs-top > .antd-tabs-nav .antd-tabs-nav-wrap::after,
+.antd-tabs-bottom > .antd-tabs-nav .antd-tabs-nav-wrap::after,
+.antd-tabs-top > div > .antd-tabs-nav .antd-tabs-nav-wrap::after,
+.antd-tabs-bottom > div > .antd-tabs-nav .antd-tabs-nav-wrap::after {
+  @apply shadow-[inset_-10px_0_8px_-8px_rgba(0,0,0,0.08)] right-0;
+}
+.antd-tabs-top > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-left::before,
+.antd-tabs-bottom > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-left::before,
+.antd-tabs-top > div > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-left::before,
+.antd-tabs-bottom > div > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-left::before {
+  @apply opacity-100;
+}
+.antd-tabs-top > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-right::after,
+.antd-tabs-bottom > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-right::after,
+.antd-tabs-top > div > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-right::after,
+.antd-tabs-bottom > div > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-right::after {
+  @apply opacity-100;
+}
+.antd-tabs-top > .antd-tabs-nav::before,
+.antd-tabs-top > div > .antd-tabs-nav::before {
+  @apply bottom-0;
+}
+.antd-tabs-top > .antd-tabs-nav .antd-tabs-ink-bar,
+.antd-tabs-top > div > .antd-tabs-nav .antd-tabs-ink-bar {
+  @apply bottom-0;
+}
+.antd-tabs-bottom > .antd-tabs-nav,
+.antd-tabs-bottom > div > .antd-tabs-nav {
+  @apply order-1 mt-4 mb-0;
+}
+.antd-tabs-bottom > .antd-tabs-nav::before,
+.antd-tabs-bottom > div > .antd-tabs-nav::before {
+  @apply top-0;
+}
+.antd-tabs-bottom > .antd-tabs-nav .antd-tabs-ink-bar,
+.antd-tabs-bottom > div > .antd-tabs-nav .antd-tabs-ink-bar {
+  @apply top-0;
+}
+.antd-tabs-bottom > .antd-tabs-content-holder,
+.antd-tabs-bottom > div > .antd-tabs-content-holder {
+  @apply order-none;
+}
+.antd-tabs-left > .antd-tabs-nav,
+.antd-tabs-right > .antd-tabs-nav,
+.antd-tabs-left > div > .antd-tabs-nav,
+.antd-tabs-right > div > .antd-tabs-nav {
+  @apply flex-col min-w-[50px];
+}
+.antd-tabs-left > .antd-tabs-nav .antd-tabs-tab,
+.antd-tabs-right > .antd-tabs-nav .antd-tabs-tab,
+.antd-tabs-left > div > .antd-tabs-nav .antd-tabs-tab,
+.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-tab {
+  @apply text-center;
+}
+.antd-tabs-left > .antd-tabs-nav .antd-tabs-tab + .antd-tabs-tab,
+.antd-tabs-right > .antd-tabs-nav .antd-tabs-tab + .antd-tabs-tab,
+.antd-tabs-left > div > .antd-tabs-nav .antd-tabs-tab + .antd-tabs-tab,
+.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-tab + .antd-tabs-tab {
+  @apply mt-4 mb-0 mx-0;
+}
+.antd-tabs-left > .antd-tabs-nav .antd-tabs-nav-wrap,
+.antd-tabs-right > .antd-tabs-nav .antd-tabs-nav-wrap,
+.antd-tabs-left > div > .antd-tabs-nav .antd-tabs-nav-wrap,
+.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-nav-wrap {
+  @apply flex-col;
+}
+.antd-tabs-left > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs-right > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs-left > div > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs-left > .antd-tabs-nav .antd-tabs-nav-wrap::after,
+.antd-tabs-right > .antd-tabs-nav .antd-tabs-nav-wrap::after,
+.antd-tabs-left > div > .antd-tabs-nav .antd-tabs-nav-wrap::after,
+.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-nav-wrap::after {
+  @apply h-[30px] inset-x-0;
+}
+.antd-tabs-left > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs-right > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs-left > div > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-nav-wrap::before {
+  @apply top-0;
+}
+.antd-tabs-left > .antd-tabs-nav .antd-tabs-nav-wrap::after,
+.antd-tabs-right > .antd-tabs-nav .antd-tabs-nav-wrap::after,
+.antd-tabs-left > div > .antd-tabs-nav .antd-tabs-nav-wrap::after,
+.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-nav-wrap::after {
+  @apply bottom-0;
+}
+.antd-tabs-left > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-top::before,
+.antd-tabs-right > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-top::before,
+.antd-tabs-left > div > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-top::before,
+.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-top::before {
+  @apply opacity-100;
+}
+.antd-tabs-left > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-bottom::after,
+.antd-tabs-right > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-bottom::after,
+.antd-tabs-left > div > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-bottom::after,
+.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-nav-wrap.antd-tabs-nav-wrap-ping-bottom::after {
+  @apply opacity-100;
+}
+.antd-tabs-left > .antd-tabs-nav .antd-tabs-ink-bar,
+.antd-tabs-right > .antd-tabs-nav .antd-tabs-ink-bar,
+.antd-tabs-left > div > .antd-tabs-nav .antd-tabs-ink-bar,
+.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-ink-bar {
+  @apply w-0.5;
+}
+.antd-tabs-left > .antd-tabs-nav .antd-tabs-ink-bar-animated,
+.antd-tabs-right > .antd-tabs-nav .antd-tabs-ink-bar-animated,
+.antd-tabs-left > div > .antd-tabs-nav .antd-tabs-ink-bar-animated,
+.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-ink-bar-animated {
+  @apply transition-[height] duration-[0.3s,top] delay-[0.3s];
+}
+.antd-tabs-left > .antd-tabs-nav .antd-tabs-nav-list,
+.antd-tabs-right > .antd-tabs-nav .antd-tabs-nav-list,
+.antd-tabs-left > div > .antd-tabs-nav .antd-tabs-nav-list,
+.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-nav-list,
+.antd-tabs-left > .antd-tabs-nav .antd-tabs-nav-operations,
+.antd-tabs-right > .antd-tabs-nav .antd-tabs-nav-operations,
+.antd-tabs-left > div > .antd-tabs-nav .antd-tabs-nav-operations,
+.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-nav-operations {
+  @apply flex-[1_0_auto] flex-col;
+}
+.antd-tabs-left > .antd-tabs-nav .antd-tabs-ink-bar,
+.antd-tabs-left > div > .antd-tabs-nav .antd-tabs-ink-bar {
+  @apply right-0;
+}
+.antd-tabs-left > .antd-tabs-content-holder,
+.antd-tabs-left > div > .antd-tabs-content-holder {
+  @apply -ml-px border-l-gray-100 border-l border-solid;
+}
+.antd-tabs-card > .antd-tabs-content-holder,
+.antd-tabs-card > div > .antd-tabs-content-holder {
+  @apply border-none ml-0;
+}
+.antd-tabs-left > .antd-tabs-content-holder > .antd-tabs-content > .antd-tabs-tabpane,
+.antd-tabs-left > div > .antd-tabs-content-holder > .antd-tabs-content > .antd-tabs-tabpane {
+  @apply pl-1;
+}
+.antd-tabs-left > .antd-tabs-nav-list,
+.antd-tabs-left > div > .antd-tabs-nav-list {
+  @apply pr-1;
+}
+
+.antd-tabs-left .antd-tabs-nav-list,
+.antd-tabs-right .antd-tabs-nav-list {
+  @apply gap-2;
+}
+
+.antd-tabs-right > .antd-tabs-nav-list,
+.antd-tabs-right > div > .antd-tabs-nav-list {
+  @apply p-2;
+}
+
+.antd-tabs-right > .antd-tabs-nav,
+.antd-tabs-right > div > .antd-tabs-nav {
+  @apply order-1;
+}
+.antd-tabs-right > .antd-tabs-nav .antd-tabs-ink-bar,
+.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-ink-bar {
+  @apply left-0;
+}
+.antd-tabs-right > .antd-tabs-content-holder,
+.antd-tabs-right > div > .antd-tabs-content-holder {
+  @apply order-none -mr-px border-r-gray-100 border-r border-solid;
+}
+
+.antd-tabs-card > .antd-tabs-content-holder,
+.antd-tabs-card > div > .antd-tabs-content-holder {
+  @apply border-none;
+}
+.antd-tabs-right > .antd-tabs-content-holder > .antd-tabs-content > .antd-tabs-tabpane,
+.antd-tabs-right > div > .antd-tabs-content-holder > .antd-tabs-content > .antd-tabs-tabpane {
+  @apply pr-3;
+}
+.antd-tabs-dropdown {
+  @apply box-border text-gray-900 text-sm absolute top-[-9999px] left-[-9999px] z-[1050] block m-0 p-0;
+  font-variant: tabular-nums;
+  list-style: none;
+  font-feature-settings: "tnum";
+}
+.antd-tabs-dropdown-hidden {
+  @apply hidden;
+}
+.antd-tabs-dropdown-menu {
+  @apply max-h-[200px] overflow-x-hidden overflow-y-auto text-left list-none bg-white bg-clip-padding shadow-[0_3px_6px_-4px_rgba(0,0,0,0.12),0_6px_16px_0_rgba(0,0,0,0.08),0_9px_28px_8px_rgba(0,0,0,0.05)] m-0 px-0 py-1 rounded-sm outline-none;
+}
+.antd-tabs-dropdown-menu-item {
+  @apply flex items-center min-w-[120px] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer transition-all duration-[0.3s] m-0 px-3 py-[5px];
+}
+.antd-tabs-dropdown-menu-item > span {
+  @apply flex-1 whitespace-nowrap;
+}
+.antd-tabs-dropdown-menu-item-remove {
+  @apply flex-none text-xs cursor-pointer ml-3 border-0 hover:text-gray-900 bg-transparent;
+}
+.antd-tabs-dropdown-menu-item:hover {
+  @apply bg-gray-100;
+}
+.antd-tabs-dropdown-menu-item-disabled,
+.antd-tabs-dropdown-menu-item-disabled:hover {
+  @apply text-gray-500 cursor-not-allowed bg-transparent;
+  .ma-icon {
+    @apply text-gray-200;
+  }
+}
+.antd-tabs-card > .antd-tabs-nav .antd-tabs-tab,
+.antd-tabs-card > div > .antd-tabs-nav .antd-tabs-tab {
+  @apply m-0 rounded-full text-gray-500 transition-all duration-[0.3s] ease-[cubic-bezier(0.645,0.045,0.355,1)];
+}
+.antd-tabs-card > .antd-tabs-nav .antd-tabs-tab-active,
+.antd-tabs-card > div > .antd-tabs-nav .antd-tabs-tab-active {
+  @apply bg-gray-200 #{!important};
+}
+.antd-tabs-card > .antd-tabs-nav .antd-tabs-ink-bar,
+.antd-tabs-card > div > .antd-tabs-nav .antd-tabs-ink-bar {
+  @apply invisible;
+}
+.antd-tabs-card.antd-tabs-top > .antd-tabs-nav .antd-tabs-tab + .antd-tabs-tab,
+.antd-tabs-card.antd-tabs-bottom > .antd-tabs-nav .antd-tabs-tab + .antd-tabs-tab,
+.antd-tabs-card.antd-tabs-top > div > .antd-tabs-nav .antd-tabs-tab + .antd-tabs-tab,
+.antd-tabs-card.antd-tabs-bottom > div > .antd-tabs-nav .antd-tabs-tab + .antd-tabs-tab {
+  @apply ml-1;
+}
+.antd-tabs-card.antd-tabs-top > .antd-tabs-nav .antd-tabs-tab,
+.antd-tabs-card.antd-tabs-top > div > .antd-tabs-nav .antd-tabs-tab {
+  @apply rounded-3xl bg-white;
+}
+.antd-tabs-card.antd-tabs-left > .antd-tabs-nav .antd-tabs-tab + .antd-tabs-tab,
+.antd-tabs-card.antd-tabs-right > .antd-tabs-nav .antd-tabs-tab + .antd-tabs-tab,
+.antd-tabs-card.antd-tabs-left > div > .antd-tabs-nav .antd-tabs-tab + .antd-tabs-tab,
+.antd-tabs-card.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-tab + .antd-tabs-tab {
+  @apply mt-0.5;
+}
+
+.antd-tabs-card.antd-tabs-right > .antd-tabs-nav .antd-tabs-tab-active,
+.antd-tabs-card.antd-tabs-right > div > .antd-tabs-nav .antd-tabs-tab-active {
+  @apply border-l-white;
+}
+.antd-tabs {
+  @apply box-border text-sm leading-[1.5715] flex overflow-hidden font-euclid;
+  font-variant: tabular-nums;
+  list-style: none;
+  font-feature-settings: "tnum";
+}
+.antd-tabs > .antd-tabs-nav,
+.antd-tabs > div > .antd-tabs-nav {
+  @apply relative flex flex-none items-center;
+}
+.antd-tabs > .antd-tabs-nav .antd-tabs-nav-wrap,
+.antd-tabs > div > .antd-tabs-nav .antd-tabs-nav-wrap {
+  @apply relative flex flex-[auto] self-stretch overflow-hidden whitespace-nowrap translate-x-0;
+}
+.antd-tabs > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs > div > .antd-tabs-nav .antd-tabs-nav-wrap::before,
+.antd-tabs > .antd-tabs-nav .antd-tabs-nav-wrap::after,
+.antd-tabs > div > .antd-tabs-nav .antd-tabs-nav-wrap::after {
+  @apply absolute z-[1] opacity-0 transition-opacity duration-[0.3s] content-[""] pointer-events-none;
+}
+.antd-tabs > .antd-tabs-nav .antd-tabs-nav-list,
+.antd-tabs > div > .antd-tabs-nav .antd-tabs-nav-list {
+  @apply relative flex transition-transform duration-[0.3s];
+}
+.antd-tabs > .antd-tabs-nav .antd-tabs-nav-operations,
+.antd-tabs > div > .antd-tabs-nav .antd-tabs-nav-operations {
+  @apply flex self-stretch;
+}
+.antd-tabs > .antd-tabs-nav .antd-tabs-nav-operations-hidden,
+.antd-tabs > div > .antd-tabs-nav .antd-tabs-nav-operations-hidden {
+  @apply absolute invisible pointer-events-none;
+}
+.antd-tabs > .antd-tabs-nav .antd-tabs-nav-more,
+.antd-tabs > div > .antd-tabs-nav .antd-tabs-nav-more {
+  @apply relative px-4 py-2 border-0 bg-transparent;
+}
+.antd-tabs > .antd-tabs-nav .antd-tabs-nav-more::after,
+.antd-tabs > div > .antd-tabs-nav .antd-tabs-nav-more::after {
+  @apply absolute h-[5px] translate-y-full content-[""] bottom-0 inset-x-0;
+}
+.antd-tabs > .antd-tabs-nav .antd-tabs-nav-add,
+.antd-tabs > div > .antd-tabs-nav .antd-tabs-nav-add {
+  @apply min-w-[40px] border cursor-pointer transition-all duration-[0.3s] ease-[cubic-bezier(0.645,0.045,0.355,1)] ml-0.5 px-2 py-0 rounded-[2px_2px_0_0] border-solid outline-none;
+}
+.antd-tabs > .antd-tabs-nav .antd-tabs-nav-add:hover,
+.antd-tabs > div > .antd-tabs-nav .antd-tabs-nav-add:hover {
+  @apply text-gray-900;
+}
+.antd-tabs > .antd-tabs-nav .antd-tabs-nav-add:active,
+.antd-tabs > div > .antd-tabs-nav .antd-tabs-nav-add:active,
+.antd-tabs > .antd-tabs-nav .antd-tabs-nav-add:focus,
+.antd-tabs > div > .antd-tabs-nav .antd-tabs-nav-add:focus {
+  @apply text-gray-900;
+}
+.antd-tabs-extra-content {
+  @apply flex-none;
+}
+.antd-tabs-centered > .antd-tabs-nav .antd-tabs-nav-wrap:not([class*="antd-tabs-nav-wrap-ping"]),
+.antd-tabs-centered > div > .antd-tabs-nav .antd-tabs-nav-wrap:not([class*="antd-tabs-nav-wrap-ping"]) {
+  @apply justify-center;
+}
+.antd-tabs-ink-bar {
+  @apply absolute pointer-events-none bg-gray-900;
+}
+.antd-tabs-tab {
+  @apply relative inline-flex items-center text-sm cursor-pointer border-0 outline-none;
+}
+.antd-tabs-tab-btn {
+  @apply flex gap-1 items-center transition-all duration-[0.3s] outline-none text-gray-500 text-xs font-medium px-3 py-2;
+  .ma-icon {
+    @apply text-gray-200 transition-all duration-[0.3s];
+  }
+  &:hover {
+    @apply text-gray-900;
+    .ma-icon {
+      @apply text-gray-900;
+    }
+  }
+}
+.antd-tabs-tab-remove {
+  @apply flex-none text-[rgba(0,0,0,0.45)] text-xs cursor-pointer transition-all duration-[0.3s] ml-2 -mr-1 border-[none] hover:text-[rgba(0,0,0,0.85)];
+  background: transparent;
+  outline: none;
+}
+.antd-tabs-tab.antd-tabs-tab-active .antd-tabs-tab-btn {
+  @apply text-gray-900;
+  .ma-icon {
+    @apply text-gray-900;
+  }
+}
+.antd-tabs-tab {
+  &:not(.antd-tabs-tab-active) {
+    .ak-badge--dark--primary {
+      @apply bg-white text-gray-500 border-gray-200;
+    }
+  }
+}
+.antd-tabs-tab.antd-tabs-tab-disabled {
+  @apply cursor-not-allowed;
+  .antd-tabs-tab-btn {
+    @apply text-gray-300;
+    .ma-icon {
+      @apply text-gray-200;
+    }
+    .ma-badge {
+      @apply bg-gray-200;
+    }
+  }
+}
+.antd-tabs-tab.antd-tabs-tab-disabled .antd-tabs-tab-btn:focus,
+.antd-tabs-tab.antd-tabs-tab-disabled .antd-tabs-tab-remove:focus,
+.antd-tabs-tab.antd-tabs-tab-disabled .antd-tabs-tab-btn:active,
+.antd-tabs-tab.antd-tabs-tab-disabled .antd-tabs-tab-remove:active {
+  @apply text-gray-300;
+}
+.antd-tabs-tab .antd-tabs-tab-remove .anticon {
+  @apply m-0;
+}
+.antd-tabs-tab .anticon {
+  @apply mr-3;
+}
+.antd-tabs-tab + .antd-tabs-tab {
+  @apply ml-8 mr-0 my-0;
+}
+.antd-tabs-content {
+  @apply flex w-full;
+}
+.antd-tabs-content-holder {
+  @apply flex-[auto] min-w-0 min-h-0;
+}
+.antd-tabs-content-animated {
+  @apply transition-[margin] duration-[0.3s];
+}
+.antd-tabs-tabpane {
+  @apply flex-none w-full;
+  outline: none;
+}
+
+// .antd-tabs-dropdown {
+//   .antd-tabs-dropdown-content {
+//     @apply rounded-xl;
+//     ul {
+//       li {
+//         span {
+//           @apply  text-gray-900 text-xs font-medium;
+//         }
+//       }
+//     }
+//   }
+// }

package/src/components/tabs/components/tabPane.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TabPane as ATabPane } from 'ant-design-vue';
+</script>
+<template>
+    <a-tab-pane tab="test" v-bind="$attrs">
+        <template v-for="(_, slot) in $slots" v-slot:[slot]>
+            <slot :name="slot" />
+        </template>
+    </a-tab-pane>
+</template>
+<style scoped></style>

package/src/components/tabs/index.vue

@@ -0,0 +1,65 @@
+<script lang="ts">
+export default {
+    name: 'MaTabs',
+};
+</script>
+<script setup lang="ts">
+import { WritableComputedRef, computed, useAttrs } from 'vue';
+import { MaTabPosition, MaTabType } from './types';
+import { Tabs as ATabs, TabsProps } from 'ant-design-vue';
+import MaIcon from '../icon/index.vue';
+export interface MaTabsProps {
+    activeKey?: string,
+    animated?: boolean,
+    destroyInactiveTabPane?: boolean,
+    tabPosition?: MaTabPosition,
+    type?: MaTabType,
+}
+
+const props = withDefaults(defineProps<MaTabsProps>(), {
+    animated: false,
+    destroyInactiveTabPane: false,
+    tabPosition: 'top',
+    type: 'line',
+});
+const emits = defineEmits(['update:activeKey']);
+const attrs = useAttrs();
+
+const currentTab: WritableComputedRef<string> = computed({
+    get(){
+        return props?.activeKey;
+    },
+    set(data){
+        emits('update:activeKey', data);
+    },
+});
+
+const bindings = computed(() => ({ ...attrs, ...props } as unknown as TabsProps));
+
+</script>
+<template>
+  <a-tabs
+    v-model:activeKey="currentTab"
+    class="ak-tabs"
+    :animated="props?.animated"
+    :destroy-inactive-tab-pane="props?.destroyInactiveTabPane"
+    :tab-position="props?.tabPosition"
+    :type="type"
+    prefix-cls="antd-tabs"
+    v-bind="bindings"
+  >
+    <template
+      v-for="(_, slot) in $slots"
+      #[slot]
+    >
+      <slot :name="slot" />
+    </template>
+    <template #moreIcon>
+      <ma-icon
+        name="ellipsis-horizontal"
+        size="xs"
+      />
+    </template>
+  </a-tabs>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>