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

package/src/components/pagination/pagination.test.ts

@@ -0,0 +1,361 @@
+import { DefineComponent } from 'vue';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { breakpoints } from '@/utils/breakpoints';
+import MaSelect from '@/components/select/index.vue';
+import MaPagination from './index.vue';
+import type { MaPaginationProps } from './index.vue';
+
+const MaPaginationComponent = MaPagination as unknown as DefineComponent;
+
+vi.mock('lodash/debounce', () => {
+  return {
+    default: vi.fn((fn) => fn)
+  }
+});
+
+const mockResizeWidth = (width: number): void => {
+  window.innerWidth = width;
+  const resizeEvent = document.createEvent('Event');
+  resizeEvent.initEvent('resize', true, true);
+  window.dispatchEvent(resizeEvent);
+};
+
+describe('pagination component', () => {
+  let wrapper: any;
+  const findItems = (): any => wrapper.findAll('.page-item');
+  const findButtons = (): any => wrapper.findAll('.page-link');
+  const propsData: MaPaginationProps = {
+    current: 3,
+    perPage: 5,
+    totalItems: 30,
+  };
+  const createComponent = (props = propsData, options = {}) => {
+    wrapper = mount(MaPaginationComponent, {
+      props: {
+        ...props,
+      },
+      ...options,
+    })
+  };
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+
+  it('should change pagination limits on resize', () => {
+    createComponent();
+
+    mockResizeWidth(breakpoints.xs + 1);
+    expect(wrapper.vm.paginationLimit).toBe(0);
+    expect(wrapper.vm.maxAdjacentPages).toBe(0);
+
+    mockResizeWidth(breakpoints.sm);
+    expect(wrapper.vm.paginationLimit).toBe(0);
+    expect(wrapper.vm.maxAdjacentPages).toBe(0);
+
+    mockResizeWidth(breakpoints.md);
+    expect(wrapper.vm.paginationLimit).toBe(0);
+    expect(wrapper.vm.maxAdjacentPages).toBe(0);
+
+    mockResizeWidth(breakpoints.lg);
+    expect(wrapper.vm.paginationLimit).toBe(3);
+    expect(wrapper.vm.maxAdjacentPages).toBe(1);
+
+    mockResizeWidth(breakpoints.xl);
+    expect(wrapper.vm.paginationLimit).toBe(5);
+    expect(wrapper.vm.maxAdjacentPages).toBe(2);
+
+    mockResizeWidth(breakpoints['2xl']);
+    expect(wrapper.vm.paginationLimit).toBe(7);
+    expect(wrapper.vm.maxAdjacentPages).toBe(3);
+  });
+
+  it('emits current event when page changes', () => {
+    createComponent({
+      ...propsData,
+      current: 1,
+      totalItems: 75,
+    });
+    const buttons = findButtons();
+    const nextButton = buttons.at(buttons.length - 1);
+    nextButton.trigger('click');
+
+    expect(wrapper.emitted('update:current')).toHaveLength(1);
+    expect(wrapper.emitted('change')).toHaveLength(1);
+    expect(wrapper.emitted('update:current')[0]).toEqual([2]);
+    expect(wrapper.emitted('change')[0]).toEqual([2, 1, 5]);
+  });
+
+  it('emits perPage event when perPage size changes', () => {
+    createComponent();
+    wrapper.findComponent(MaSelect).vm.$emit('update:value', 10);
+
+    expect(wrapper.emitted('update:perPage')).toHaveLength(1);
+    expect(wrapper.emitted('perPageChange')).toHaveLength(1);
+    expect(wrapper.emitted('update:perPage')[0]).toEqual([10]);
+    expect(wrapper.emitted('perPageChange')[0]).toEqual([10, 5]);
+  });
+
+  it('should not render when totalItems is 0', async () => {
+    createComponent({
+      ...propsData,
+      totalItems: 0,
+      mode: 'advanced',
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.text()).toBe('');
+  });
+
+  it('should not render when one page fits all items if mode is simple', async () => {
+    createComponent({
+      ...propsData,
+      totalItems: 5,
+      mode: 'simple'
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.text()).toBe('');
+  });
+
+  it('shows one page if mode is advanced', async () => {
+    createComponent({
+      ...propsData,
+      current: 1,
+      perPage: 1,
+      totalItems: 1,
+      mode: 'advanced'
+    })
+
+    const items = findItems();
+
+    expect(items.length).toBe(3);
+    expect(items.at(0).classes()).toEqual(expect.arrayContaining(['jump-prev']));
+    expect(items.at(1).text()).toBe('1');
+    expect(items.at(2).classes()).toEqual(expect.arrayContaining(['jump-next']));
+  });
+
+  it('disables all items if disabled prop is true', () => {
+    createComponent({
+      ...propsData,
+      disabled: true,
+    });
+
+    expect(findItems().every((el: any) => el.classes().includes('disabled'))).toBe(true);
+    expect(findButtons().every((el: any) => el.element.tagName === 'SPAN')).toBe(true);
+  });
+
+  it('should be full radius all items if rounded prop is true', () => {
+    createComponent({
+      ...propsData,
+      rounded: true,
+    });
+
+    expect(findItems().every((el: any) => el.classes().includes('full-radius'))).toBe(true);
+  });
+
+  describe('with a total of 4 pages and 3rd page active', () => {
+    beforeEach(() => {
+      mockResizeWidth(breakpoints.lg);
+      createComponent({
+        ...propsData,
+        totalItems: 20,
+      });
+    });
+
+    it('shows 3rd page as active and enables all buttons', () => {
+      const items = findItems();
+
+      expect(items.at(3).classes()).toEqual(expect.arrayContaining(['active']));
+    });
+
+    it('shows all pages on desktop', () => {
+      const items = findItems();
+
+      expect(items.length).toBe(6);
+      expect(items.at(0).classes()).toEqual(expect.arrayContaining(['jump-prev']));
+      expect(items.at(1).text()).toBe('1');
+      expect(items.at(2).text()).toBe('2');
+      expect(items.at(3).text()).toBe('3');
+      expect(items.at(4).text()).toBe('4');
+      expect(items.at(5).classes()).toEqual(expect.arrayContaining(['jump-next']));
+    });
+
+    it('shows all pages on mobile', () => {
+      mockResizeWidth(breakpoints.sm);
+      const items = findItems();
+
+      expect(items.length).toBe(6);
+      expect(items.at(0).classes()).toEqual(expect.arrayContaining(['jump-prev']));
+      expect(items.at(1).text()).toBe('1');
+      expect(items.at(2).text()).toBe('2');
+      expect(items.at(3).text()).toBe('3');
+      expect(items.at(4).text()).toBe('4');
+      expect(items.at(5).classes()).toEqual(expect.arrayContaining(['jump-next']));
+    });
+  });
+
+  describe('with a total of 15 pages and first page active', () => {
+    beforeEach(() => {
+      mockResizeWidth(breakpoints.lg);
+      createComponent({
+        ...propsData,
+        current: 1,
+        totalItems: 75,
+      });
+    });
+
+    it('shows 1st page as active and disables previous button', () => {
+      const items = findItems();
+      const buttons = findButtons();
+
+      expect(items.at(0).classes()).toEqual(expect.arrayContaining(['disabled']));
+      expect(buttons.at(0).element.tagName).toBe('SPAN');
+      expect(buttons.at(buttons.length - 1).element.tagName).not.toBe('SPAN');
+    });
+
+    it('shows first 2 pages and collapse right side on desktop', () => {
+      const items = findItems();
+
+      expect(items.length).toBe(6);
+      expect(items.at(0).classes()).toEqual(expect.arrayContaining(['jump-prev']));
+      expect(items.at(1).text()).toBe('1');
+      expect(items.at(2).text()).toBe('2');
+      expect(items.at(3).text()).toBe('...');
+      expect(items.at(4).text()).toBe('15');
+      expect(items.at(5).classes()).toEqual(expect.arrayContaining(['jump-next']));
+    });
+
+    it('shows first 4 pages and collapse right side on desktop', async () => {
+      mockResizeWidth(breakpoints['2xl']);
+      await wrapper.vm.$nextTick();
+      const items = findItems();
+
+      expect(items.length).toBe(8);
+      expect(items.at(0).classes()).toEqual(expect.arrayContaining(['jump-prev']));
+      expect(items.at(1).text()).toBe('1');
+      expect(items.at(2).text()).toBe('2');
+      expect(items.at(3).text()).toBe('3');
+      expect(items.at(4).text()).toBe('4');
+      expect(items.at(5).text()).toBe('...');
+      expect(items.at(6).text()).toBe('15');
+      expect(items.at(7).classes()).toEqual(expect.arrayContaining(['jump-next']));
+    });
+  });
+
+  describe('with a total of 15 pages and 8th page active', () => {
+    beforeEach(() => {
+      mockResizeWidth(breakpoints['2xl']);
+      createComponent({
+        ...propsData,
+        current: 8,
+        totalItems: 75,
+      });
+    });
+
+    it('shows pages 4 to 12 and collapses both sides on desktop', () => {
+      const items = findItems();
+
+      expect(items.length).toBe(13);
+      expect(items.at(0).classes()).toEqual(expect.arrayContaining(['jump-prev']));
+      expect(items.at(1).text()).toBe('1');
+      expect(items.at(2).text()).toBe('...');
+      expect(items.at(3).text()).toBe('5');
+      expect(items.at(4).text()).toBe('6');
+      expect(items.at(5).text()).toBe('7');
+      expect(items.at(6).text()).toBe('8');
+      expect(items.at(7).text()).toBe('9');
+      expect(items.at(8).text()).toBe('10');
+      expect(items.at(9).text()).toBe('11');
+      expect(items.at(10).text()).toBe('...');
+      expect(items.at(11).text()).toBe('15');
+      expect(items.at(12).classes()).toEqual(expect.arrayContaining(['jump-next']));
+    });
+
+    it('shows page 8 and collapses both sides on mobile', async () => {
+      mockResizeWidth(breakpoints.sm);
+      await wrapper.vm.$nextTick();
+      const items = findItems();
+
+      expect(items.length).toBe(7);
+      expect(items.at(0).classes()).toEqual(expect.arrayContaining(['jump-prev']));
+      expect(items.at(1).text()).toBe('1');
+      expect(items.at(2).text()).toBe('...');
+      expect(items.at(3).text()).toBe('8');
+      expect(items.at(4).text()).toBe('...');
+      expect(items.at(5).text()).toBe('15');
+      expect(items.at(6).classes()).toEqual(expect.arrayContaining(['jump-next']));
+    });
+  });
+
+  describe('with a total of 15 pages and 15th page active', () => {
+    beforeEach(() => {
+      mockResizeWidth(breakpoints['2xl']);
+      createComponent({
+        ...propsData,
+        current: 15,
+        totalItems: 75,
+      });
+    });
+
+    it('shows 15th page as active and disables next button', () => {
+      const items = findItems();
+      const buttons = findButtons();
+
+      expect(buttons.at(0).element.tagName).not.toBe('SPAN');
+      expect(items.at(6).classes()).toEqual(expect.arrayContaining(['active']));
+      expect(buttons.at(buttons.length - 1).element.tagName).toBe('SPAN');
+      expect(items.at(buttons.length - 1).classes()).toEqual(expect.arrayContaining(['disabled']));
+    });
+
+    it('shows pages 11 to 15 and collapses left side on desktop', () => {
+      const items = findItems();
+
+      expect(items.length).toBe(8);
+      expect(items.at(0).classes()).toEqual(expect.arrayContaining(['jump-prev']));
+      expect(items.at(1).text()).toBe('1');
+      expect(items.at(2).text()).toBe('...');
+      expect(items.at(3).text()).toBe('12');
+      expect(items.at(4).text()).toBe('13');
+      expect(items.at(5).text()).toBe('14');
+      expect(items.at(6).text()).toBe('15');
+      expect(items.at(7).classes()).toEqual(expect.arrayContaining(['jump-next']));
+    });
+
+    it('shows pages 14 to 15 and collapes left side on mobile', async () => {
+      mockResizeWidth(breakpoints.sm);
+      await wrapper.vm.$nextTick();
+      const items = findItems();
+
+      expect(items.length).toBe(6);
+      expect(items.at(0).classes()).toEqual(expect.arrayContaining(['jump-prev']));
+      expect(items.at(1).text()).toBe('1');
+      expect(items.at(2).text()).toBe('...');
+      expect(items.at(3).text()).toBe('14');
+      expect(items.at(4).text()).toBe('15');
+      expect(items.at(5).classes()).toEqual(expect.arrayContaining(['jump-next']));
+    });
+
+    it('shows total items as a page option if page size options dont includes', async () => {
+      createComponent({
+        ...propsData,
+        current: 1,
+        perPage: 1,
+        totalItems: 1,
+        mode: 'advanced',
+        pageSizeOptions: [10, 20, 50, 100]
+      })
+
+      expect(wrapper.vm.selectOptions.length).toBe(5);
+      expect(wrapper.vm.selectOptions.at(0).value).toBe(1)
+      expect(wrapper.vm.selectOptions.at(1).value).toBe(10)
+      expect(wrapper.vm.selectOptions.at(2).value).toBe(20)
+      expect(wrapper.vm.selectOptions.at(3).value).toBe(50)
+      expect(wrapper.vm.selectOptions.at(4).value).toBe(100)
+    });
+  });
+});

package/src/components/pagination/stories/constants.ts

@@ -0,0 +1,50 @@
+import { defineComponent, reactive } from "vue";
+import { Meta, StoryFn } from "@storybook/vue3";
+import MaPagination from "@/components/pagination/index.vue";
+import { MaPaginationMode, MaPaginationSize } from "@/components/pagination/types";
+
+export default defineComponent({
+  components: { MaPagination }
+})
+
+export const baseConfig: Meta<typeof MaPagination> = {
+  component: MaPagination,
+  parameters: {
+    docs: {
+      description: {
+        component: `<p>You can check details from <a href="https://www.figma.com/file/LsEcZ7CR3mf1vzBpCRgN7m/Design-Foundation_VD?type=design&node-id=28-57814&mode=design&t=idnALvySWnoLyxlz-0" target="_blank">here</a></p>`,
+      },
+    },
+  },
+  argTypes: {
+    mode: {
+      control: { type: 'select' },
+      options: MaPaginationMode
+    },
+    size: {
+      control: { type: 'select' },
+      options: MaPaginationSize,
+    },
+  },
+};
+
+export const Template: StoryFn = (args: any) => ({
+  components: { MaPagination },
+  setup() {
+    const pagination = reactive({
+      current: 1,
+      perPage: 10,
+      totalItems: 3000,
+    });
+
+    return { pagination, args };
+  },
+  template: `
+      <ma-pagination
+        v-model:current="pagination.current"
+        v-model:perPage="pagination.perPage"
+        :total-items="pagination.totalItems"
+        v-bind="args"
+      />
+    `,
+});

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { baseConfig, Template } from './constants';
+
+import type MaPagination from '../index.vue';
+
+const meta: Meta<typeof MaPagination> = {
+  title: 'Advanced/MaPagination/Default',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaPagination>;
+
+export const Advanced: Story = Template.bind({});
+
+Advanced.args = {};

package/src/components/pagination/types.ts

@@ -0,0 +1,31 @@
+export const MaPaginationMode = [
+  'simple',
+  'advanced',
+] as const;
+
+export type MaPaginationMode = (typeof MaPaginationMode)[number];
+
+export const MaPaginationSize = [
+  'small',
+  'medium',
+  'large',
+] as const;
+
+export type MaPaginationSize = (typeof MaPaginationSize)[number];
+
+export type MaPaginationLimit = {
+  xs: number,
+  sm: number,
+  md: number,
+  lg: number,
+  default: number,
+}
+
+export type MaPaginationItem = {
+  key: string | number,
+  pageNumber: number,
+  label: string | number,
+  isEllipsis: boolean,
+  isActive: boolean,
+  isDisabled: boolean,
+}

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

@@ -0,0 +1,22 @@
+.ak-popconfirm {
+  @apply font-euclid;
+  &-header {
+    @apply max-w-lg flex gap-2;
+    &--icon {
+      @apply text-orange-300;
+    }
+    &-content {
+      @apply mb-2;
+      &--title {
+        @apply text-base font-medium;
+      }
+      &--description {
+        @apply text-gray-500 text-sm;
+      }
+    }
+  }
+  &-buttons {
+    @apply flex gap-2 justify-end;
+  }
+}
+

package/src/components/popconfirm/index.vue

@@ -0,0 +1,129 @@
+<script lang="ts">
+export default {
+    name: 'MaPopconfirm',
+};
+</script>
+<script setup lang="ts">
+import MaPopover from '../popover/index.vue';
+import { ComputedRef, computed, WritableComputedRef } from 'vue';
+import { MaPopoverProps } from '../popover/index.vue';
+import { PopconfirmPlacement } from '@/components/popconfirm/types';
+import MaButton, { MaButtonProps } from '@/components/button/index.vue';
+import MaIcon from '@/components/icon/index.vue';
+
+export interface MaPopconfirmProps {
+        placement?: PopconfirmPlacement,
+        title?: string,
+        description: string,
+        okText?: string,
+        cancelText?: string,
+        visible?: boolean,
+        icon?: string,
+        popoverProps?: MaPopoverProps
+        okButtonProps?: MaButtonProps,
+        cancelButtonProps?: MaButtonProps,
+        showCancel?: boolean,
+        showArrow?: boolean,
+        okButtonLoading?: boolean,
+        cancelButtonLoading?: boolean,
+        showIcon?: boolean
+    }
+
+const emits = defineEmits(['update:visible', 'visibleChange', 'cancel', 'confirm']);
+const handleCancel = () => {
+    emits('cancel');
+    visibleStatus.value = false;
+};
+const handleConfirm = () => {
+    emits('confirm');
+};
+
+const props = withDefaults(defineProps<MaPopconfirmProps>(), {
+    placement: 'top',
+    visible: undefined,
+    okText: 'Ok',
+    cancelText: 'Cancel',
+    icon: 'warning',
+    showCancel: true,
+    showArrow: true,
+    showIcon: true,
+});
+
+const popoverArgs: ComputedRef<MaPopoverProps> = computed(() => ({
+    trigger: ['click'],
+    ...props.popoverProps,
+    placement: props.placement,
+    visible: props.visible,
+    showArrow: props.showArrow,
+}));
+const okButtonArgs: ComputedRef<MaButtonProps> = computed(() => ({
+    ...props.okButtonProps,
+    variant: 'stroke',
+    color: 'red',
+    size: 'small',
+    loading: props.okButtonLoading,
+}));
+const cancelButtonArgs: ComputedRef<MaButtonProps> = computed(() => ({
+    ...props.okButtonProps,
+    variant: 'stroke',
+    size: 'small',
+    loading: props.cancelButtonLoading,
+}));
+
+const visibleStatus: WritableComputedRef<boolean> = computed({
+    get(){
+        return typeof props.visible === 'boolean'? props.visible: undefined;
+    },
+    set(data: boolean){
+        emits('update:visible', data);
+        emits('visibleChange', data);
+    },
+});
+</script>
+<template>
+  <ma-popover
+    v-model:visible="visibleStatus"
+    v-bind="popoverArgs"
+  >
+    <template #overlay>
+      <div class="ak-popconfirm">
+        <div class="ak-popconfirm-header">
+          <slot name="icon" />
+          <ma-icon
+            v-if="!$slots.icon && showIcon"
+            class="ak-popconfirm-header--icon"
+            :name="props.icon"
+          />
+          <div class="ak-popconfirm-header-content">
+            <h1 class="ak-popconfirm-header--title">
+              {{ props.title }}
+            </h1>
+            <p class="ak-popconfirm-header--description">
+              {{ props.description }}
+            </p>
+          </div>
+        </div>
+        <div class="ak-popconfirm-buttons">
+          <ma-button
+            v-if="!$slots.cancelButton && props.showCancel"
+            v-bind="cancelButtonArgs"
+            @click="handleCancel"
+          >
+            {{ props.cancelText }}
+          </ma-button>
+          <slot name="cancelButton" />
+          <ma-button
+            v-if="!$slots.okButton"
+            v-bind="okButtonArgs"
+            @click="handleConfirm"
+          >
+            {{ props.okText }}
+          </ma-button>
+          <slot name="okButton" />
+        </div>
+      </div>
+    </template>
+    <slot />
+  </ma-popover>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

package/src/components/popconfirm/stories/constants.ts

@@ -0,0 +1,53 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+
+import { defineComponent, ref } from 'vue';
+import MaPopconfirm from '@/components/popconfirm/index.vue';
+import MaButton from '@/components/button/index.vue';
+import { PopconfirmPlacements } from '@/components/popconfirm/types';
+import IconList from '../../icon/icons.json';
+
+
+export default defineComponent({
+    components: { MaPopconfirm },
+});
+
+export const baseConfig: Meta<typeof MaPopconfirm> = {
+    component: MaPopconfirm,
+    parameters: {
+        layout: 'centered',
+        docs: {
+        },
+    },
+    argTypes: {
+        placement: {
+            control: 'select',
+            options: PopconfirmPlacements,
+        },
+        icon: {
+            control: 'select',
+            options: IconList,
+        },
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaPopconfirm, MaButton },
+    setup() {
+        const visible = ref(args?.visible);
+
+        const handleVisible = (status: boolean) => {
+            args.visible = status;
+        };
+
+        return { args, visible, handleVisible };
+    },
+    template: `
+      <ma-popconfirm
+          @visibleChange="handleVisible"
+          v-bind="args"
+      >
+          <ma-button>Popconfirm Trigger</ma-button>
+      </ma-popconfirm>
+
+    `,
+});

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { baseConfig, Template } from './constants';
+
+import type MaPopconfirm from '../index.vue';
+
+const meta: Meta<typeof MaPopconfirm> = {
+  title: 'Core/MaPopconfirm/Default',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaPopconfirm>;
+
+export const Default: Story = Template.bind({});
+Default.args = {
+  title: 'Warning',
+  description: 'Are you sure to delete this task?',
+};