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

package/src/components/popover-2/assets/styles.scss

@@ -0,0 +1,171 @@
+.ma-popover-2 {
+    @apply z-[90] top-0 left-0 outline-0;
+    &.v-popper__popper--hidden {
+        @apply opacity-0 pointer-events-none transition;
+        transition: opacity 0.15s;
+    }
+    &.v-popper__popper--shown {
+        opacity: 1;
+        transition: opacity 0.15s;
+        transform-origin: 100% 100%;
+        transform: scaleY(1);
+    }
+    .v-popper__backdrop {
+        @apply absolute top-0 left-0 w-full h-full hidden;
+    }
+    .v-popper__wrapper {
+        transform: scale(0.5);
+        transition: transform 0.1s ease-in-out;
+        .v-popper__inner {
+            @apply p-2 rounded-xl border-0 bg-white relative box-border overflow-y-auto;
+            box-shadow: 0px 16px 40px -8px rgba(88, 92, 95, 0.16);
+            .resize-observer {
+                @apply absolute top-0 left-0 z-[-1] w-full h-full border-none bg-transparent pointer-events-none block overflow-hidden opacity-0;
+            }
+            .resize-observer object {
+                @apply block absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-[-1];
+            }
+            > div {
+                @apply relative z-[1] max-w-[inherit] max-h-[inherit];
+            }
+        }
+    }
+    &.no-arrow {
+        .v-popper__wrapper {
+            .v-popper__arrow-container {
+                @apply hidden;
+            }
+        }
+    }
+    &.overlay-no-padding {
+        .v-popper__wrapper {
+            .v-popper__inner {
+                @apply p-0;
+            }
+        }
+    }
+    &.v-popper__popper--show-to .v-popper__wrapper {
+        transform: scale(1);
+    }
+    &.v-popper__popper--show-from .v-popper__wrapper {
+        transform: scale(0.5);
+    }
+    // for mobile
+    &.v-popper__popper--no-positioning {
+        @apply fixed z-[9999] top-0 left-0 w-full h-full flex items-end;
+        .v-popper__backdrop {
+            @apply block bg-primary-dark bg-opacity-[.7];
+        }
+        .v-popper__wrapper {
+            @apply w-full pointer-events-auto transition-all duration-300 ease-in-out;
+            .v-popper__inner {
+                @apply rounded-b-none;
+            }
+        }
+        .v-popper__popper--hidden {
+            @apply translate-y-1/2;
+        }
+    }
+}
+
+// floating-vue defaults css's for arrow
+.v-popper__arrow-container {
+    @apply absolute w-[10px] h-[10px];
+}
+
+.v-popper__popper--arrow-overflow .v-popper__arrow-container,
+.v-popper__popper--no-positioning .v-popper__arrow-container {
+    @apply hidden;
+}
+
+.v-popper__arrow-inner,
+.v-popper__arrow-outer {
+    @apply border-solid absolute top-0 left-0 w-0 h-0;
+}
+
+.v-popper__arrow-inner {
+    @apply invisible border-[7px];
+}
+
+.v-popper__arrow-outer {
+    @apply border-[6px];
+}
+
+.v-popper__popper[data-popper-placement^="top"] {
+    .v-popper__arrow-inner,
+    .v-popper__arrow-outer {
+        @apply border-b-0 border-l-transparent border-r-transparent border-b-transparent;
+    }
+
+    .v-popper__arrow-inner {
+        @apply top-[-2px];
+    }
+}
+
+.v-popper__popper[data-popper-placement^="bottom"] {
+    .v-popper__arrow-container {
+        @apply top-0;
+    }
+
+    .v-popper__arrow-inner,
+    .v-popper__arrow-outer {
+        @apply border-t-0 border-l-transparent border-r-transparent border-t-transparent;
+    }
+
+    .v-popper__arrow-inner {
+        @apply top-[-4px];
+    }
+
+    .v-popper__arrow-outer {
+        @apply top-[-6px];
+    }
+}
+
+.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-inner,
+.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-inner {
+    @apply top-[-2px];
+}
+
+.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-outer,
+.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-outer {
+    @apply top-[-1px];
+}
+
+.v-popper__popper[data-popper-placement^="right"] {
+    .v-popper__arrow-inner,
+    .v-popper__arrow-outer {
+        @apply border-l-0 border-l-transparent border-t-transparent border-b-transparent;
+    }
+
+    .v-popper__arrow-inner {
+        @apply left-[-4px];
+    }
+
+    .v-popper__arrow-outer {
+        @apply left-[-6px];
+    }
+}
+
+.v-popper__popper[data-popper-placement^="left"] {
+    .v-popper__arrow-container {
+        @apply right-[-10px];
+    }
+
+    .v-popper__arrow-inner,
+    .v-popper__arrow-outer {
+        @apply border-r-0 border-t-transparent border-r-transparent border-b-transparent;
+    }
+
+    .v-popper__arrow-inner {
+        @apply left-[-2px];
+    }
+}
+
+.v-popper--theme-dropdown {
+    .v-popper__arrow-inner {
+        @apply visible border-white;
+    }
+    .v-popper__arrow-outer {
+        @apply border-white;
+    }
+}

package/src/components/popover-2/index.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed, ComputedRef, ref, watch } from 'vue';
+
+import { Popover2TriggerType, Popover2Placement } from './types';
+
+import { TriggerEvent, Dropdown as VDropdown } from 'floating-vue';
+
+defineOptions({
+    name: 'MaPopover2',
+});
+
+export interface MaPopover2Props {
+    visible?: boolean | undefined,
+    trigger?: Popover2TriggerType[],
+    autoHide?: boolean,
+    placement?: Popover2Placement,
+    disabled?: boolean,
+    isMobile?: boolean,
+    overlayClassName?: string,
+    showArrow?: boolean,
+    noPadding?: boolean,
+    popupContainer?: HTMLElement | null | string,
+    noAutoFocus?: boolean,
+    hideDelay?: number,
+    showDelay?: number,
+}
+
+const props = withDefaults(defineProps<MaPopover2Props>(), {
+    visible: false,
+    trigger: () => ['click'],
+    autoHide: true,
+    placement: 'bottom-start',
+    disabled: false,
+    isMobile: false,
+    overlayClassName: undefined,
+    showArrow: false,
+    noPadding: false,
+    noAutoFocus: false,
+    popupContainer: 'body',
+    hideDelay: 0,
+    showDelay: 0,
+});
+
+const emits = defineEmits(['update:visible', 'visibleChange']);
+
+const visibleStatus = ref(props.visible);
+
+const popoverClassName: ComputedRef<string> = computed(
+    () => [
+        'ma-popover-2',
+        props?.overlayClassName,
+        props?.showArrow ? undefined : 'no-arrow',
+        props.noPadding? 'overlay-no-padding': undefined,
+    ].filter(Boolean).join(' ')
+);
+
+// required for customize trigger; if trigger has click, then hide trigger should be empty
+const popperHideTrigger: ComputedRef<TriggerEvent[]> = computed(() => {
+    return props.trigger?.some((trigger) => trigger === 'click') ? [] : props.trigger;
+});
+
+const handleVisibilityChange = (status: boolean) => {
+    emits('update:visible', status);
+    emits('visibleChange', status);
+};
+
+watch(
+    () => props.visible,
+    () => {
+        if (props.visible !== visibleStatus.value) {
+            visibleStatus.value = props.visible;
+        }
+    }
+);
+</script>
+
+<template>
+  <v-dropdown
+    v-model:shown="visibleStatus"
+    v-bind="$attrs"
+    :triggers="trigger"
+    :popper-triggers="popperHideTrigger"
+    :distance="12"
+    :auto-hide="autoHide"
+    :placement="placement"
+    :disabled="disabled"
+    :positioning-disabled="isMobile"
+    :arrow-padding="24"
+    :popper-class="popoverClassName"
+    :container="popupContainer"
+    :no-auto-focus="noAutoFocus"
+    :delay="{ show: showDelay, hide: hideDelay }"
+    @apply-show="handleVisibilityChange(true)"
+    @apply-hide="handleVisibilityChange(false)"
+  >
+    <slot />
+    <template #popper>
+      <slot name="overlay" />
+    </template>
+  </v-dropdown>
+</template>
+
+<style lang="scss" src="./assets/styles.scss"></style>

package/src/components/popover-2/popover2.test.ts

@@ -0,0 +1,96 @@
+import { DefineComponent } from 'vue';
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import { waitFor } from '@testing-library/vue';
+import MaPopover2 from './index.vue';
+
+const MaPopover2Component = MaPopover2 as unknown as DefineComponent;
+
+describe('MaPopover2', () => {
+
+    const div = document.createElement('div');
+    div.id = 'root';
+    document.body.appendChild(div);
+
+    it('should mount component with default props ✔ ', async () => {
+        const wrapper = mount(MaPopover2Component, {
+            attachTo: '#root',
+            props: {
+                visible: true,
+                popupContainer: '#buttonTestId',
+            },
+            slots: {
+                default: '<button id="buttonTestId">Trigger Element</button>',
+                overlay: '<div>Overlay Content</div>',
+            },
+        });
+
+        await waitFor(() => {
+            expect(wrapper.find('.ma-popover-2').exists()).toBe(true);
+        });
+
+        wrapper.unmount();
+    });
+
+    it('applies conditional classes based on props ✔', async () => {
+        const wrapper = mount(MaPopover2Component, {
+            attachTo: '#root',
+            props: {
+                visible: true,
+                showArrow: false,
+                noPadding: true,
+                popupContainer: '#buttonTestId',
+            },
+            slots: {
+                default: '<button id="buttonTestId">Trigger Element</button>',
+                overlay: '<div>Overlay Content</div>',
+            },
+        });
+
+        await waitFor(() => {
+            const popover = wrapper.find('.ma-popover-2');
+            expect(popover.exists()).toBe(true);
+            expect(popover.classes()).toContain('no-arrow');
+            expect(popover.classes()).toContain('overlay-no-padding');
+        });
+    });
+
+    it('emits update:visible and visibleChange events when visibleStatus changes ✔', async () => {
+        const wrapper = mount(MaPopover2Component, {
+            props: {
+                visible: false,
+                popupContainer: '#buttonTestId',
+            },
+            slots: {
+                default: '<button id="buttonTestId">Trigger Element</button>',
+                overlay: '<div>Overlay Content</div>',
+            },
+        });
+
+        const button = wrapper.find('button');
+        await button.trigger('click');
+
+        await waitFor(() => {
+            expect(wrapper.emitted()).toHaveProperty('update:visible');
+            expect(wrapper.emitted('update:visible')[0]).toEqual([true]);
+            expect(wrapper.emitted()).toHaveProperty('visibleChange');
+            expect(wrapper.emitted('visibleChange')[0]).toEqual([true]);
+        });
+    });
+
+    it('renders slots correctly ✔', async () => {
+        mount(MaPopover2Component, {
+            props: {
+                visible: true,
+            },
+            slots: {
+                default: '<button id="buttonTestId">Trigger Element</button>',
+                overlay: '<div>Overlay Content</div>',
+            },
+        });
+
+        expect(document.body.innerHTML).toContain('Trigger Element');
+        expect(document.body.innerHTML).toContain('Overlay Content');
+    });
+
+});

package/src/components/popover-2/stories/constants.ts

@@ -0,0 +1,142 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import MaPopover2 from '../index.vue';
+import { defineComponent } from 'vue';
+import { MaButton } from '@/index';
+import { Popover2TriggerTypes, Popover2Placements } from '../types';
+import vitestResults from '../../../../test-results.json';
+import { ref } from 'vue';
+
+export default defineComponent({
+    components: { MaPopover2 },
+});
+
+export const popover2BaseConfig: Meta<typeof MaPopover2> = {
+    component: MaPopover2,
+    parameters: {
+        layout: 'centered',
+        backgrounds: {
+            default: 'popover',
+            values: [
+                {
+                    name: 'popover',
+                    value: '#F9FAFB',
+                },
+            ],
+        },
+        docs: {
+            description: {
+                component: `<p>Figma Design is <a href="https://www.figma.com/design/LsEcZ7CR3mf1vzBpCRgN7m/Design-Foundation_VD?node-id=842-117482&m=dev" target="_blank">here!</a></p><p>Floating Vue Docs <a href="https://floating-vue.starpad.dev/guide/" target="_blank">here!</a></p><p>
+                </p><p><p>The floating card pops up when clicking/mouse hovering over an element.</p><p>A simple popup menu to provide extra information or operations. Comparing with Tooltip, besides providing information, the Popover card can also offer action elements like links and buttons.</p>`,
+            },
+        },
+        vitest: {
+            testFile: 'popover2.test.ts',
+            testResults: vitestResults,
+        },
+    },
+    argTypes: {
+        trigger: {
+            control: 'check',
+            options: Popover2TriggerTypes,
+            defaultValue: 'bottomLeft',
+        },
+        placement: {
+            control: 'select',
+            options: Popover2Placements,
+        },
+    },
+};
+
+export const popover2Template: StoryFn = (args: any) => ({
+    components: { MaPopover2, MaButton },
+    setup() {
+        return { args };
+    },
+    template: `
+           <ma-popover-2 v-bind="args">
+            <ma-button variant="stroke" right-icon="arrow-down-circle">Popover Trigger</ma-button>
+             <template #overlay>
+                <div class="max-w-lg">
+                    <h1 class="text-sm font-medium leading-5 text-gray-900">Popover Content</h1>
+                    <p class="text-xs font-normal leading-4 text-black">This is the popover content</p>
+                </div>
+            </template>
+           </ma-popover-2>
+  `,
+});
+
+export const popover2PlacementsTemplate: StoryFn = (args: any) => ({
+    components: { MaPopover2, MaButton },
+    setup() {
+        return { args };
+    },
+    template: `
+        <p class="mb-2">Placement Top</p>
+           <ma-popover-2 class="mb-8" placement="top">
+            <ma-button variant="stroke" right-icon="arrow-down-circle">Popover Trigger</ma-button>
+             <template #overlay>
+                <div class="max-w-lg">
+                    <h1 class="text-sm font-medium leading-5 text-gray-900">Popover Content</h1>
+                    <p class="text-xs font-normal leading-4 text-black">This is the popover content</p>
+                </div>
+            </template>
+           </ma-popover-2>
+           <p class="mb-2">Placement Right</p>
+           <ma-popover-2 class="mb-8" placement="right">
+            <ma-button variant="stroke" right-icon="arrow-down-circle">Popover Trigger</ma-button>
+             <template #overlay>
+                <div class="max-w-lg">
+                    <h1 class="text-sm font-medium leading-5 text-gray-900">Popover Content</h1>
+                    <p class="text-xs font-normal leading-4 text-black">This is the popover content</p>
+                </div>
+            </template>
+           </ma-popover-2>
+            <p class="mb-2">Placement Left</p>
+           <ma-popover-2 class="mb-8" placement="left">
+            <ma-button variant="stroke" right-icon="arrow-down-circle">Popover Trigger</ma-button>
+             <template #overlay>
+                <div class="max-w-lg">
+                    <h1 class="text-sm font-medium leading-5 text-gray-900">Popover Content</h1>
+                    <p class="text-xs font-normal leading-4 text-black">This is the popover content</p>
+                </div>
+            </template>
+           </ma-popover-2>
+            <p class="mb-2">Placement Bottom</p>
+           <ma-popover-2 class="mb-8" placement="bottom">
+            <ma-button variant="stroke" right-icon="arrow-down-circle">Popover Trigger</ma-button>
+             <template #overlay>
+                <div class="max-w-lg">
+                    <h1 class="text-sm font-medium leading-5 text-gray-900">Popover Content</h1>
+                    <p class="text-xs font-normal leading-4 text-black">This is the popover content</p>
+                </div>
+            </template>
+           </ma-popover-2>
+  `,
+});
+
+export const popover2FooterTemplate: StoryFn = (args: any) => ({
+    components: { MaPopover2, MaButton },
+    setup() {
+        const popoverVisible = ref(false);
+
+        const closePopover = () => {
+            popoverVisible.value = false;
+        };
+        return { args, popoverVisible, closePopover };
+    },
+    template: `
+           <ma-popover-2 v-bind="args" v-model:visible="popoverVisible">
+            <ma-button variant="stroke" right-icon="arrow-down-circle">Popover Trigger</ma-button>
+             <template #overlay>
+                <div class="max-w-lg">
+                    <h1 class="text-sm font-medium leading-5 text-gray-900">Popover Content</h1>
+                    <p class="text-xs font-normal leading-4 text-black">This is the popover content</p>
+                     <div class="flex items-end justify-end p-2 gap-2 border-t border-t-gray-100 mt-5" >
+                        <ma-button variant="stroke" @click="closePopover">Cancel</ma-button>
+                        <ma-button variant="filled">Continue</ma-button>
+                    </div>
+                </div>
+            </template>
+           </ma-popover-2>
+  `,
+});

package/src/components/popover-2/stories/default.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { popover2BaseConfig, popover2Template, popover2PlacementsTemplate, popover2FooterTemplate } from './constants';
+import MaPopover2  from '@/components/popover-2/index.vue';
+
+const meta: Meta<typeof MaPopover2> = {
+    title: 'Core/MaPopover2',
+    ...popover2BaseConfig,
+};
+export default meta;
+
+type Story = StoryObj<typeof MaPopover2>;
+
+export const Default: Story = popover2Template.bind({});
+Default.args = {};
+
+export const WithArrow: Story = popover2Template.bind({});
+WithArrow.args = {
+    showArrow: true,
+};
+
+export const Placements: Story = popover2PlacementsTemplate.bind({});
+Placements.args = {};
+
+export const Mobile: Story = popover2Template.bind({});
+Mobile.args = {
+    isMobile: true,
+};
+
+export const FooterExample: Story = popover2FooterTemplate.bind({});
+FooterExample.args = {};
+
+

package/src/components/popover-2/types.ts

@@ -0,0 +1,26 @@
+export const Popover2TriggerTypes = [
+    'click',
+    'hover',
+] as const;
+
+export const Popover2Placements = [
+    'auto',
+    'auto-start',
+    'auto-end',
+    'top',
+    'top-start',
+    'top-end',
+    'right',
+    'right-start',
+    'right-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'left',
+    'left-start',
+    'left-end',
+] as const;
+
+
+export type Popover2TriggerType = (typeof Popover2TriggerTypes)[number];
+export type Popover2Placement = (typeof Popover2Placements)[number];