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

package/src/components/popconfirm/types.ts

@@ -0,0 +1,16 @@
+export const PopconfirmPlacements = [
+    'top',
+    'left',
+    'right',
+    'bottom',
+    'topLeft',
+    'topRight',
+    'bottomLeft',
+    'bottomRight',
+    'leftTop',
+    'leftBottom',
+    'rightTop',
+    'rightBottom'
+] as const;
+
+export type PopconfirmPlacement = (typeof PopconfirmPlacements)[number];

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

@@ -0,0 +1,214 @@
+.antd-popover {
+  @apply box-border absolute top-[-9999px] left-[-9999px] z-[90] block m-0 p-0 before:absolute before:left-[-7px] before:z-[-9999] before:opacity-[0.0001] before:content-["_"] before:right-0 before:-inset-y-1;
+}
+.antd-popover-wrap {
+  @apply relative;
+}
+.antd-popover-hidden,
+.antd-popover-menu-hidden,
+.antd-popover-menu-submenu-hidden {
+  @apply hidden;
+}
+.antd-popover.antd-slide-down-enter.antd-slide-down-enter-active.antd-popover-placement-bottomLeft,
+.antd-popover.antd-slide-down-appear.antd-slide-down-appear-active.antd-popover-placement-bottomLeft,
+.antd-popover.antd-slide-down-enter.antd-slide-down-enter-active.antd-popover-placement-bottomCenter,
+.antd-popover.antd-slide-down-appear.antd-slide-down-appear-active.antd-popover-placement-bottomCenter,
+.antd-popover.antd-slide-down-enter.antd-slide-down-enter-active.antd-popover-placement-bottomRight,
+.antd-popover.antd-slide-down-appear.antd-slide-down-appear-active.antd-popover-placement-bottomRight {
+  animation-name: antSlideUpIn;
+}
+.antd-popover.antd-slide-up-enter.antd-slide-up-enter-active.antd-popover-placement-topLeft,
+.antd-popover.antd-slide-up-appear.antd-slide-up-appear-active.antd-popover-placement-topLeft,
+.antd-popover.antd-slide-up-enter.antd-slide-up-enter-active.antd-popover-placement-topCenter,
+.antd-popover.antd-slide-up-appear.antd-slide-up-appear-active.antd-popover-placement-topCenter,
+.antd-popover.antd-slide-up-enter.antd-slide-up-enter-active.antd-popover-placement-topRight,
+.antd-popover.antd-slide-up-appear.antd-slide-up-appear-active.antd-popover-placement-topRight {
+  animation-name: antSlideDownIn;
+}
+.antd-popover.antd-slide-down-leave.antd-slide-down-leave-active.antd-popover-placement-bottomLeft,
+.antd-popover.antd-slide-down-leave.antd-slide-down-leave-active.antd-popover-placement-bottomCenter,
+.antd-popover.antd-slide-down-leave.antd-slide-down-leave-active.antd-popover-placement-bottomRight {
+  animation-name: antSlideUpOut;
+}
+.antd-popover.antd-slide-up-leave.antd-slide-up-leave-active.antd-popover-placement-topLeft,
+.antd-popover.antd-slide-up-leave.antd-slide-up-leave-active.antd-popover-placement-topCenter,
+.antd-popover.antd-slide-up-leave.antd-slide-up-leave-active.antd-popover-placement-topRight {
+  animation-name: antSlideDownOut;
+}
+.antd-popover-button {
+  @apply whitespace-nowrap;
+}
+.antd-popover-button.antd-btn-group > .antd-btn-loading,
+.antd-popover-button.antd-btn-group > .antd-btn-loading + .antd-btn {
+  @apply cursor-default pointer-events-none;
+}
+.antd-popover-button.antd-btn-group > .antd-btn-loading + .antd-btn::before {
+  @apply block;
+}
+.antd-popover-button.antd-btn-group > .antd-btn:last-child:not(:first-child):not(.antd-btn-icon-only) {
+  @apply px-2;
+}
+
+.ma-popover-overlay {
+  .antd-popover-content {
+    .antd-popover-inner {
+      @apply bg-white p-3 border border-gray-100 border-solid shadow-lg rounded-lg;
+    }
+  }
+
+  &.overlay-arrow {
+    &.antd-popover-placement-top,
+    &.antd-popover-placement-topLeft,
+    &.antd-popover-placement-topRight {
+      @apply pb-2.5;
+      .antd-popover-arrow {
+        @apply mb-2;
+      }
+    }
+    &.antd-popover-placement-right,
+    &.antd-popover-placement-rightTop,
+    &.antd-popover-placement-rightBottom {
+      @apply pl-2.5;
+      .antd-popover-arrow {
+        @apply ml-2;
+      }
+    }
+    &.antd-popover-placement-bottom,
+    &.antd-popover-placement-bottomLeft,
+    &.antd-popover-placement-bottomRight {
+      @apply pt-2.5;
+      .antd-popover-arrow {
+        @apply mt-2;
+      }
+    }
+    &.antd-popover-placement-left,
+    &.antd-popover-placement-leftTop,
+    &.antd-popover-placement-leftBottom {
+      @apply pr-2.5;
+      .antd-popover-arrow {
+        @apply mr-2;
+      }
+    }
+    .antd-popover-arrow {
+      @apply absolute block w-3 h-3 pointer-events-none;
+      background: transparent;
+    }
+    .antd-popover-arrow-content {
+      @apply absolute block w-3 h-3 bg-white content-[""] pointer-events-auto rounded-sm;
+    }
+    &.antd-popover-placement-top .antd-popover-arrow,
+    &.antd-popover-placement-topLeft .antd-popover-arrow,
+    &.antd-popover-placement-topRight .antd-popover-arrow {
+      @apply -bottom-[3px];
+    }
+    &.antd-popover-placement-top .antd-popover-arrow-content,
+    &.antd-popover-placement-topLeft .antd-popover-arrow-content,
+    &.antd-popover-placement-topRight .antd-popover-arrow-content {
+      @apply rotate-45;
+    }
+    &.antd-popover-placement-top .antd-popover-arrow {
+      @apply -translate-x-2/4 left-2/4;
+    }
+    &.antd-popover-placement-topLeft .antd-popover-arrow {
+      @apply left-3;
+    }
+    &.antd-popover-placement-topRight .antd-popover-arrow {
+      @apply right-3;
+    }
+    &.antd-popover-placement-right .antd-popover-arrow,
+    &.antd-popover-placement-rightTop .antd-popover-arrow,
+    &.antd-popover-placement-rightBottom .antd-popover-arrow {
+      @apply -left-[3px];
+    }
+    &.antd-popover-placement-right .antd-popover-arrow-content,
+    &.antd-popover-placement-rightTop .antd-popover-arrow-content,
+    &.antd-popover-placement-rightBottom .antd-popover-arrow-content {
+      @apply shadow-[-3px_3px_7px_rgba(0,0,0,0.07)] rotate-45;
+    }
+    &.antd-popover-placement-right .antd-popover-arrow {
+      @apply -translate-y-2/4 top-2/4;
+    }
+    &.antd-popover-placement-rightTop .antd-popover-arrow {
+      @apply top-2;
+    }
+    &.antd-popover-placement-rightBottom .antd-popover-arrow {
+      @apply bottom-2;
+    }
+    &.antd-popover-placement-left .antd-popover-arrow,
+    &.antd-popover-placement-leftTop .antd-popover-arrow,
+    &.antd-popover-placement-leftBottom .antd-popover-arrow {
+      @apply -right-[3px];
+    }
+    &.antd-popover-placement-left .antd-popover-arrow-content,
+    &.antd-popover-placement-leftTop .antd-popover-arrow-content,
+    &.antd-popover-placement-leftBottom .antd-popover-arrow-content {
+      @apply shadow-[3px_-3px_7px_rgba(0,0,0,0.07)] rotate-45;
+    }
+    &.antd-popover-placement-left .antd-popover-arrow {
+      @apply -translate-y-2/4 top-2/4;
+    }
+    &.antd-popover-placement-leftTop .antd-popover-arrow {
+      @apply top-2;
+    }
+    &.antd-popover-placement-leftBottom .antd-popover-arrow {
+      @apply bottom-2;
+    }
+    &.antd-popover-placement-bottom .antd-popover-arrow,
+    &.antd-popover-placement-bottomLeft .antd-popover-arrow,
+    &.antd-popover-placement-bottomRight .antd-popover-arrow {
+      @apply -top-[3px];
+    }
+    &.antd-popover-placement-bottom .antd-popover-arrow-content,
+    &.antd-popover-placement-bottomLeft .antd-popover-arrow-content,
+    &.antd-popover-placement-bottomRight .antd-popover-arrow-content {
+      @apply shadow-[-3px_-3px_7px_rgba(0,0,0,0.07)] rotate-45;
+    }
+    &.antd-popover-placement-bottom .antd-popover-arrow {
+      @apply -translate-x-2/4 left-2/4;
+    }
+    &.antd-popover-placement-bottomLeft .antd-popover-arrow {
+      @apply left-3;
+    }
+    &.antd-popover-placement-bottomRight .antd-popover-arrow {
+      @apply right-3;
+    }
+  }
+  &.overlay-no-padding {
+    .antd-popover-inner {
+      @apply p-0;
+      .antd-popover-inner-content {
+        > div > div {
+          @apply p-3;
+        }
+      }
+    }
+  }
+
+  .ak-menu {
+    @apply p-0 space-y-2;
+    &.ant-menu-vertical {
+      @apply border-r-0;
+    }
+    .ak-menu-item {
+      @apply px-3 py-2 rounded-[8px] border border-transparent cursor-pointer h-auto;
+
+      &:hover:not(&--selected) {
+        @apply hover:bg-gray-100 border-gray-100;
+        color: inherit;
+      }
+      &--selected {
+        @apply border border-primary-jordy-blue bg-blue-50;
+        &.ant-menu-item-selected {
+          @apply bg-blue-50;
+        }
+      }
+      &--disabled {
+        @apply text-gray-400 cursor-not-allowed;
+      }
+      &.ant-menu-item-selected {
+        color: inherit;
+        background-color: inherit;
+      }
+    }
+  }
+}

package/src/components/popover/index.vue

@@ -0,0 +1,73 @@
+<script lang="ts">
+export default {
+    name: 'MaPopover',
+};
+</script>
+<script setup lang="ts">
+import { Popover as APopover, PopoverProps } from 'ant-design-vue';
+import { PopoverPlacement, PopoverTriggerType } from './types';
+import { ComputedRef, WritableComputedRef, computed, useAttrs, useSlots } from 'vue';
+
+export interface MaPopoverProps {
+    placement?: PopoverPlacement,
+    trigger?: PopoverTriggerType[],
+    visible?: boolean,
+    overlayClassName?: string,
+    showArrow?: boolean,
+    autoAdjustOverflow?: boolean,
+    noPadding?: boolean,
+}
+
+const props = withDefaults(defineProps<MaPopoverProps>(), {
+    placement: 'bottomLeft',
+    trigger: () => ['hover'],
+    visible: undefined,
+    showArrow: false,
+    autoAdjustOverflow: false,
+    noPadding: false,
+});
+
+const emits = defineEmits(['update:visible', 'visibleChange']);
+const slots = useSlots();
+const attrs = useAttrs();
+
+const visibleStatus: WritableComputedRef<boolean> = computed({
+    get(){
+        return typeof props.visible === 'boolean'? props.visible: undefined;
+    },
+    set(data: boolean){
+        emits('update:visible', data);
+        emits('visibleChange', data);
+    },
+});
+
+const overlayClassName: ComputedRef<string> = computed(
+    () => [
+        'ma-popover-overlay',
+        props?.overlayClassName,
+        props?.showArrow? 'overlay-arrow': undefined,
+        slots?.extraOverlay || props.noPadding? 'overlay-no-padding': undefined,
+    ].join(' ')
+);
+
+const bindings = computed(() => ({ ...attrs, ...props } as unknown as PopoverProps));
+
+</script>
+<template>
+  <a-popover
+    v-bind="bindings"
+    v-model:visible="visibleStatus"
+    prefix-cls="antd-popover"
+    :overlay-class-name="overlayClassName"
+    :placement="props.placement"
+    :trigger="props.trigger"
+    :auto-adjust-overflow="props.autoAdjustOverflow"
+  >
+    <slot />
+    <template #content>
+      <slot name="overlay" />
+      <slot name="extraOverlay" />
+    </template>
+  </a-popover>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

package/src/components/popover/stories/apps.json

@@ -0,0 +1,47 @@
+[
+    {
+        "appName": "WhatsApp Messenger",
+        "appDescription": "Social Networking",
+        "appIcon": "https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/e9/91/c7/e991c770-c2b5-e28a-2f50-dd38cb56595b/AppIcon-0-0-1x_U007emarketing-0-0-0-6-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/60x60.png"
+    },
+    {
+        "appName": "X",
+        "appDescription": "News",
+        "appIcon": "https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/d4/12/05/d4120593-cdda-cd23-a4ec-12b2212adeea/ProductionAppIcon-1x_U007emarketing-0-7-0-0-0-85-220.png/60x60.png"
+    },
+    {
+        "appName": "Instagram",
+        "appDescription": "Photo & Video",
+        "appIcon": "https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/6b/e6/49/6be649ff-ebc7-12d6-79e6-1d00d0447d2b/Prod-0-1x_U007emarketing-0-7-0-85-220.png/60x60.png"
+    },
+    {
+        "appName": "Snapchat",
+        "appDescription": "Photo & Video",
+        "appIcon": "https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/37/ca/d7/37cad7ef-425b-c171-40b7-233dfd0b67a0/AppIcon-0-0-1x_U007emarketing-0-0-0-5-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/60x60.png"
+    },
+    {
+        "appName": "Subway Surfers",
+        "appDescription": "Games",
+        "appIcon": "https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/d3/6e/29/d36e297e-6285-041a-b645-6c07ad61527d/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/60x60.png"
+    },
+    {
+        "appName": "YouTube: Watch, Listen, Stream",
+        "appDescription": "Photo & Video",
+        "appIcon": "https://is1-ssl.mzstatic.com/image/thumb/Purple126/v4/21/29/cb/2129cb69-0572-5503-59d8-9ffd793a2a5e/logo_youtube_color-1x_U007emarketing-0-6-0-85-220.png/60x60.png"
+    },
+    {
+        "appName": "Picsart AI Photo Editor",
+        "appDescription": "Photo & Video",
+        "appIcon": "https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/33/fe/46/33fe46b3-76a9-d3f8-64f2-fc46ed0aa283/AppIcon-0-1x_U007emarketing-0-7-0-sRGB-85-220.png/60x60.png"
+    },
+    {
+        "appName": "TikTok",
+        "appDescription": "Entertainment",
+        "appIcon": "https://is1-ssl.mzstatic.com/image/thumb/Purple126/v4/ce/fb/fc/cefbfc87-0015-b945-713b-0ede6c685bbe/AppIcon_TikTok-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/60x60.png"
+    },
+    {
+        "appName": "CapCut - Video Editor",
+        "appDescription": "Photo & Video",
+        "appIcon": "https://is1-ssl.mzstatic.com/image/thumb/Purple126/v4/4f/06/6d/4f066d7a-4c85-48ff-a1cd-6e08bd25780a/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/60x60.png"
+    }
+]

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

@@ -0,0 +1,120 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { PopoverTriggerTypes, PopoverPlacements } from '../types';
+import { ref } from 'vue';
+
+import { MaTabPane, MaTabs, MaButton, MaPopover, MaAppIcon, MaSelect } from '@/index';
+import DummyApps from '@/components/popover/stories/apps.json';
+
+export const baseConfig: Meta<typeof MaPopover> = {
+    component: MaPopover,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: `<p>Figma Designs <a href="https://www.figma.com/file/LsEcZ7CR3mf1vzBpCRgN7m/Design-Foundation_VD?type=design&node-id=842-117482&mode=dev" target="_blank">here!</a></p><p>
+                </p><p>
+            In the popover component, the <b>overlay</b> slot is the area that will be visible when it's activated. <br/> The <b>default slot</b>, on the other hand, is the slot of the carrier element.
+            </p><p>The most important difference between <b>dropdown</b> and <b>popover</b> is that the popover does not close when you <b>click</b> or <b>focus</b> on an element in the overlay.</p><p>
+            If the user needs to operate within the overlay, popover should be used instead of dropdown.
+            </p>`,
+            },
+        },
+    },
+    argTypes: {
+        trigger: {
+            control: 'check',
+            options: PopoverTriggerTypes,
+            defaultValue: 'bottomLeft',
+        },
+        placement: {
+            control: 'select',
+            options: PopoverPlacements,
+        },
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaPopover, MaButton, MaTabs, MaTabPane, MaAppIcon, MaSelect },
+    setup() {
+        const visible = ref(args?.visible);
+
+        const handleVisible = (status: boolean) => {
+            args.visible = status;
+        };
+
+        return {
+            args,
+            visible,
+            handleVisible,
+        };
+    },
+    template: `<ma-popover @visibleChange="handleVisible" 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-lg">Popover Content</h1>
+            <p class="text-gray-700 mt-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+        </div>
+    </template>
+  </ma-popover>`,
+});
+
+export const TemplateCustomContent: StoryFn = (args: any) => ({
+    components: { MaPopover, MaButton, MaTabs, MaTabPane, MaAppIcon, MaSelect },
+    setup() {
+        const visible = ref(args?.visible);
+        const activeKey = ref('1');
+
+        const data = ref('');
+        const filteredApps = ref([...DummyApps]);
+
+        const handleSearch = (searchTerm: string) => {
+            filteredApps.value = DummyApps.filter(app => app.appName.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1);
+        };
+        const selectApp = (app: any) => {
+            data.value = app.appName;
+        };
+
+        const handleVisible = (status: boolean) => {
+            args.visible = status;
+        };
+
+        return {
+            args,
+            visible,
+            handleVisible,
+            activeKey,
+            handleSearch,
+            selectApp,
+            data,
+            filteredApps,
+        };
+    },
+    template: `<ma-popover @visibleChange="handleVisible" v-bind="args" :destroyTooltipOnHide="true">
+    <ma-button variant="stroke" right-icon="arrow-down-circle" @click="handleVisible(true)">Click</ma-button>
+    <template #overlay>
+        <ma-tabs type="card" v-model:activeKey="activeKey" v-bind="args">
+            <ma-tab-pane key="1" tab="Tab 1">
+                <ma-select autofocus placeholder="Select App" v-model:value="data" v-bind="args" @search="handleSearch" style="width: 510px;">
+                    <template #dropdownRender>
+                            <ma-app-icon
+                                v-for="app in filteredApps"
+                                :key="app.appName"
+                                :appName="app.appName"
+                                :appDescription="app.appDescription"
+                                :appIcon="app.appIcon"
+                                :closable="false"
+                                size="xx-small"
+                                @click="selectApp(app)"
+                                class="pb-2"
+                            />
+                    </template>
+                </ma-select>
+            </ma-tab-pane>
+            <ma-tab-pane key="2" tab="Tab 2">
+            <p class="text-gray-700 max-w-lg">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+            </ma-tab-pane>
+        </ma-tabs>
+    </template>
+  </ma-popover>`,
+});

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { baseConfig, Template, TemplateCustomContent } from './constants';
+
+import type MaDropdown from '../index.vue';
+
+const meta: Meta<typeof MaDropdown> = {
+    title: 'Core/MaPopover',
+    ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaDropdown>;
+
+export const Default: Story = Template.bind({});
+Default.args = {
+    visible: false,
+    trigger: ['click'],
+};
+
+export const CustomContent: Story = TemplateCustomContent.bind({});
+CustomContent.args = {
+    visible: false,
+    trigger: ['click'],
+};
+
+export const OverlayArrow: Story = Template.bind({});
+OverlayArrow.args = {
+    visible: true,
+    trigger: ['click'],
+    showArrow: true,
+    placement: 'topLeft',
+};

package/src/components/popover/types.ts

@@ -0,0 +1,30 @@
+export const PopoverPlacements = [
+    'top',
+    'left',
+    'right',
+    'bottom',
+    'topLeft',
+    'topRight',
+    'bottomLeft',
+    'bottomRight',
+    'leftTop',
+    'leftBottom',
+    'rightTop',
+    'rightBottom',
+] as const;
+
+export const PopoverTypes = [
+    'primary',
+    'secondary',
+] as const;
+
+export const PopoverTriggerTypes = [
+    'hover',
+    'focus',
+    'click',
+    'contextmenu',
+] as const;
+
+export type PopoverPlacement = (typeof PopoverPlacements)[number];
+export type PopoverType = (typeof PopoverTypes)[number];
+export type PopoverTriggerType = (typeof PopoverTriggerTypes)[number];