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

package/src/components/modal/assets/with-tab.scss

@@ -0,0 +1,8 @@
+.ma-modal-with-tab-template {
+  .ak-modal__header__top {
+    @apply pb-0;
+  }
+  .ma-tabs-content {
+    @apply hidden;
+  }
+}

package/src/components/modal/components/renderContent.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+import { defineComponent, VNode } from 'vue';
+
+export default defineComponent({
+  props: {
+    content: {
+      type: Object as () => VNode,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () => props.content;
+  },
+});
+</script>

package/src/components/modal/index.ts

@@ -0,0 +1,54 @@
+import { createApp, h } from 'vue';
+import { MaModalTypes } from './types';
+
+import MaModal from './index.vue';
+import { MaModalProps } from './types';
+
+
+MaModalTypes.forEach(type => {
+    MaModal[type] = (props: MaModalProps) => {
+        props.type = type;
+        const container = document.createElement('div');
+        const component = h(MaModal, props);
+        const modal = createApp({
+            render: () => component,
+        });
+        modal.mount(container);
+        document.body.appendChild(container);
+
+        const externalOnCancel = props?.onCancel;
+        const externalOnOk = props?.onOk;
+
+        const cleanUp = () => {
+            modal.unmount();
+            document.body.removeChild(container);
+        };
+
+        props.onCancel = () => {
+            if (typeof externalOnCancel === 'function') {
+                externalOnCancel(null);
+            }
+            cleanUp();
+        };
+        props.onOk = async () => {
+            try {
+                if (typeof externalOnOk === 'function') {
+                    await externalOnOk(null);
+                }
+                cleanUp();
+            } catch (e) {
+                console.error(e);
+            }
+        };
+
+        return {
+            destroy: () => {
+                modal.unmount();
+                document.body.removeChild(container);
+            },
+        };
+    };
+});
+
+
+export default MaModal;

package/src/components/modal/index.vue

@@ -0,0 +1,205 @@
+<script lang="ts">
+export default {
+    name: 'MaModal',
+};
+</script>
+<script setup lang="ts">
+import { VNode, computed, useAttrs, useSlots } from 'vue';
+import { Modal as AModal, ModalProps } from 'ant-design-vue';
+import { MaModalTypeIcon, MaModalProps } from '@/components/modal/types';
+import MaIcon from '../icon/index.vue';
+import MaButton from '../button/index.vue';
+import RenderContent from './components/renderContent.vue';
+import MaTypography from '@/components/typography/index.vue';
+import { ButtonColor } from '@/components/button/types';
+const props = withDefaults(defineProps<MaModalProps>(), {
+    visible: true,
+    closable: false,
+    mask: true,
+    maskClosable: true,
+    width: 447,
+    bodyTitle: '',
+});
+
+const emits = defineEmits(['update:visible', 'ok', 'cancel', 'closed']);
+
+const slots = useSlots();
+const attrs = useAttrs();
+
+const visibleStatus = computed({
+    get() {
+        return props.visible;
+    },
+    set(value: boolean) {
+        emits('update:visible', value);
+        if (!value) {
+            emits('closed');
+        }
+    },
+});
+
+const icon = computed(() =>
+    props?.icon || (props.type && MaModalTypeIcon[props.type]? MaModalTypeIcon[props.type]: null)
+);
+
+const okButtonColor = computed<ButtonColor>(() => {
+    const colorMap: Record<string, ButtonColor> = {
+        success: 'green',
+        error: 'red',
+        warning: 'dark',
+        info: 'blue',
+        confirm: 'dark',
+    };
+    return colorMap[props.type] ?? 'blue';
+});
+
+const footerStatus = computed(() =>
+    slots?.footer || props.okText || props.cancelText
+);
+
+const classNames = computed(() => [
+    'ma-modal',
+    'ak-modal',
+    { [`ak-modal--${props.type}`]: !!props.type },
+    { 'ak-modal--no-space': props?.noSpace },
+]);
+
+const headerIconClassNames = computed(() => [
+    'ak-modal__header-icon',
+    { [`ak-modal__header-icon--${props.type}`]: !!props.type },
+]);
+
+const confirmHeaderClassNames = computed(() => [
+    'ak-modal__header',
+    { ['ak-modal__header--right']: props.closable },
+    { ['ak-modal__header--center']: !props.closable },
+]);
+
+const contentIsVNode = computed(() => typeof props.content === 'object' && typeof props.content?.type === 'string');
+const hasBodyTitleSlot = computed(() => !!slots?.['body-title']);
+const hasHeader = computed(() => props.title || slots.title);
+const hasConfirmHeader = computed(() => props.bodyTitle || hasBodyTitleSlot.value || (props.closable && !hasHeader.value));
+
+const bindings = computed(() => ({
+    ...attrs,
+    ...props,
+    visible: visibleStatus.value,
+    'onUpdate:visible': undefined,
+    onOk: confirm,
+    onCancel: close,
+    title: undefined,
+    footer: null,
+    closable: false,
+    class: classNames.value,
+    prefixCls: 'antd-modal',
+}) as unknown as ModalProps);
+
+const close = () => {
+    visibleStatus.value = false;
+    emits('cancel');
+};
+
+const confirm = () => {
+    emits('ok');
+};
+
+</script>
+<template>
+  <a-modal
+    v-bind="bindings"
+    v-model:visible="visibleStatus"
+  >
+    <div
+      v-if="hasHeader"
+      :class="['ak-modal__header', 'ak-modal__header__top']"
+    >
+      <slot name="title">
+        <div
+          v-if="title || $slots.title"
+          class="ak-modal__header__title ma-body-3-medium"
+        >
+          {{ title }}
+        </div>
+      </slot>
+      <ma-button
+        v-if="closable"
+        class="ak-modal__header__close"
+        icon="close"
+        size="x-small"
+        variant="lighter"
+        @click="close"
+      />
+    </div>
+    <div class="ak-modal__body">
+      <div
+        v-if="icon"
+        :class="headerIconClassNames"
+      >
+        <ma-icon
+          :name="icon"
+        />
+      </div>
+      <div
+        v-if="hasConfirmHeader"
+        :class="confirmHeaderClassNames"
+      >
+        <div
+          v-if="bodyTitle || hasBodyTitleSlot"
+          class="ak-modal__header__title ma-body-2-medium"
+        >
+          <slot name="body-title" />
+          {{ bodyTitle }}
+        </div>
+        <ma-button
+          v-if="closable"
+          class="ak-modal__header__close"
+          icon="close"
+          size="x-small"
+          variant="lighter"
+          @click="close"
+        />
+      </div>
+      <div class="ak-modal__content">
+        <div
+          v-if="content"
+          class="ak-modal__description ma-body-4-regular"
+        >
+          <render-content
+            v-if="contentIsVNode"
+            :content="(content as VNode)"
+          />
+          <template v-else>
+            {{ content }}
+          </template>
+        </div>
+        <slot name="content" />
+        <slot />
+      </div>
+    </div>
+    <div
+      v-if="footerStatus"
+      class="ak-modal__footer"
+    >
+      <ma-button
+        v-if="cancelText"
+        variant="stroke"
+        v-bind="cancelButtonProps"
+        @click="close"
+      >
+        {{ cancelText }}
+      </ma-button>
+      <ma-button
+        v-if="okText"
+        class="ak-modal__ok-button"
+        :loading="confirmLoading"
+        :color="okButtonColor"
+        v-bind="okButtonProps"
+        @click="confirm"
+      >
+        {{ okText }}
+      </ma-button>
+      <slot name="footer" />
+    </div>
+  </a-modal>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

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

@@ -0,0 +1,213 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { ref } from 'vue';
+import { MaModalTypes } from '../types';
+
+import MaModal from '../index';
+import MaButton from '../../button/index.vue';
+import IconList from '../../icon/icons.json';
+import MaIcon from '@/components/icon/index.vue';
+import MaBadge from '@/components/badge/index.vue';
+import { MaTabs2 as MaTabs, MaTabPane2 as MaTabPane } from '@/index';
+import '../assets/with-tab.scss';
+
+export const baseConfig: Meta<typeof MaModal> = {
+    component: MaModal,
+    parameters: {
+        docs: {
+            description: {
+                component: `<p>
+                    You can check details from <a href="https://antdv.com/components/modal" target="_blank">here</a>
+                </p><p>
+                    You can use <b><ma-modal></b> component instead of <b><a-modal></b> component with all the same properties and the same slots.
+                </p>
+                `,
+            },
+        },
+    },
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: [null, ...MaModalTypes],
+            defaultValue: null,
+        },
+        icon: {
+            control: { type: 'select' },
+            options: IconList,
+        },
+    },
+};
+
+export const functionsBaseConfig = JSON.parse(JSON.stringify(baseConfig));
+functionsBaseConfig.parameters.docs.description.component = `<div>
+<p>MaModal allows function usage without component definition in the template with all the same props.</p>
+<p>The type prop also function name. These are <b>info</b>, <b>success</b>, <b>confirm</b>, <b>warning</b>, <b>error</b></p>
+<p><b>MaModal.info({...args})</b></p>
+</div>
+`;
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaModal, MaButton },
+    setup() {
+        const visible = ref(false);
+
+        if (!args.bodyTitle) {
+            args.title = args.title || 'Lorem ipsum dolor sit amet consectetur.';
+        }
+        args.content = args.content || 'Lorem ipsum dolor sit amet consectetur.';
+
+        const openModal = () => {
+            visible.value = true;
+        };
+
+        const onOk = () => {
+            args.confirmLoading = true;
+            setTimeout(() => {
+                args.confirmLoading = false;
+                visible.value = false;
+            }, 1500);
+        };
+
+        return { args, visible, openModal, onOk };
+    },
+    template: `
+    <div>
+        <ma-modal v-bind="args" v-model:visible="visible" @ok="onOk" />
+        <ma-button @click="openModal">Open Modal</ma-button>
+    </div>
+    `,
+});
+
+export const Template2: StoryFn = (args: any) => ({
+    components: { MaModal, MaButton },
+    setup() {
+        const visible = ref(false);
+        args.content = args.content || 'Lorem ipsum dolor sit amet consectetur.';
+        const openModal = () => {
+            visible.value = true;
+        };
+
+        const onOk = () => {
+            args.confirmLoading = true;
+            setTimeout(() => {
+                args.confirmLoading = false;
+                visible.value = false;
+            }, 1500);
+        };
+
+        return { args, visible, openModal, onOk };
+    },
+    template: `
+    <div>
+        <ma-modal v-bind="args" v-model:visible="visible" @ok="onOk" />
+        <ma-button @click="openModal">Open Modal</ma-button>
+    </div>
+    `,
+});
+
+const customTitle = `
+<div class="flex items-center space-x-2">
+  <div class="w-[44px] h-[44px] bg-purple-50 rounded-full flex justify-center items-center">
+      <ma-icon name="send" class="text-primary-purple" />
+  </div>
+  <div class="flex flex-col">
+    <div class="ma-body-3-medium text-gray-900">
+      <div class="flex items-center space-x-2">
+        <span>
+          Place title here
+        </span>
+        <ma-badge type="secondary" variant="blue">BADGE</ma-badge>
+      </div>
+    </div>
+    <div class="ma-body-4-regular text-gray-500">
+      Place your description here
+    </div>
+  </div>
+</div>`;
+export const CustomTemplate: StoryFn = (args: any) => ({
+    components: { MaModal, MaButton, MaIcon, MaBadge },
+    setup() {
+
+        const visible = ref(false);
+        const openModal = () => {
+            visible.value = true;
+        };
+
+        return { args, visible, openModal };
+    },
+    template: `
+    <div>
+        <ma-modal v-model:visible="visible" closable>
+            <template #title>
+              ${customTitle}
+            </template>
+            <template #content>
+                <div>This text came from content slot!</div>
+            </template>
+            <div>
+                This text came from default slot!
+            </div>
+            <template #footer>
+                <div>This text came from footer slot!</div>
+            </template>
+        </ma-modal>
+        <ma-button @click="openModal">Open Modal</ma-button>
+    </div>
+    `,
+});
+export const WithTabTemplate: StoryFn = (args: any) => ({
+    components: { MaModal, MaButton, MaIcon, MaBadge, MaTabs, MaTabPane },
+    setup() {
+
+        const visible = ref(false);
+        const key = ref('1');
+        const openModal = () => {
+            visible.value = true;
+        };
+
+        return { args, visible, key, openModal };
+    },
+    template: `
+    <div>
+        <ma-modal
+            v-model:visible="visible"
+            closable
+            class="ma-modal-with-tab-template"
+        >
+            <template #title>
+              <div class="flex flex-col space-y-3">
+                ${customTitle}
+                <ma-tabs v-model:active-key="key">
+                  <ma-tab-pane tab-key="1" title="Tab Menu"></ma-tab-pane>
+                  <ma-tab-pane tab-key="2" title="Tab Menu"></ma-tab-pane>
+                  <ma-tab-pane tab-key="3" title="Tab Menu"></ma-tab-pane>
+                  <ma-tab-pane tab-key="4" title="Tab Menu"></ma-tab-pane>
+                </ma-tabs>
+              </div>
+            </template>
+            <template #content>
+                <div>This text came from content slot!</div>
+            </template>
+            <div>
+                This text came from default slot!
+            </div>
+            <template #footer>
+                <div>This text came from footer slot!</div>
+            </template>
+        </ma-modal>
+        <ma-button @click="openModal">Open Modal</ma-button>
+    </div>
+    `,
+});
+
+export const FunctionsTemplate: StoryFn = (args: any) => ({
+    components: { MaModal, MaButton },
+    setup() {
+        const openModal = () => {
+            MaModal[args.type]({
+                ...args,
+            });
+        };
+        return { openModal };
+    },
+    template: `<div><ma-button @click="openModal">Open Modal</ma-button></div>`,
+});

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

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { baseConfig, CustomTemplate, Template, Template2, WithTabTemplate } from './constants';
+
+import type MaModal from '../index.vue';
+
+const meta: Meta<typeof MaModal> = {
+  title: 'Core/MaModal/Default',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaModal>;
+
+export const Default: Story = Template.bind({});
+Default.args = {
+  title: 'Lorem ipsum dolor sit amet consectetur.',
+  closable: true,
+  content:
+    'Lorem ipsum dolor sit amet consectetur. Metus sit urna quis tincidunt convallis.'
+};
+
+export const Custom: Story = CustomTemplate.bind({});
+export const WithTab: Story = WithTabTemplate.bind({});
+
+export const Success: Story = Template.bind({});
+Success.args = {
+  bodyTitle: 'Lorem ipsum dolor sit amet consectetur.',
+  type: 'success',
+  okText: 'Yes',
+  cancelText: 'Cancel',
+};
+
+export const Confirm: Story = Template.bind({});
+Confirm.args = {
+  bodyTitle: 'Lorem ipsum dolor sit amet consectetur.',
+  type: 'confirm',
+  okText: 'Continue',
+  cancelText: 'Cancel',
+};
+
+export const Error: Story = Template.bind({});
+Error.args = {
+  bodyTitle: 'Lorem ipsum dolor sit amet consectetur.',
+  type: 'error',
+  okText: 'Yes, Delete',
+  cancelText: 'Cancel',
+};
+
+export const Warning: Story = Template.bind({});
+Warning.args = {
+  bodyTitle: 'Lorem ipsum dolor sit amet consectetur.',
+  type: 'warning',
+  okText: 'Ok',
+};
+
+export const Info: Story = Template.bind({});
+Info.args = {
+  bodyTitle: 'Lorem ipsum dolor sit amet consectetur.',
+  type: 'info',
+};
+
+export const NoSpace: Story = Template.bind({});
+NoSpace.args = {
+  bodyTitle: 'No space was added for the custom content modal',
+  noSpace: true,
+  closable: true,
+};
+
+export const OnlyClosable: Story = Template2.bind({});
+OnlyClosable.args = {
+  closable: true,
+  content: 'Lorem ipsum dolor sit amet consectetur. Metus sit urna quis tincidunt convallis.',
+};

package/src/components/modal/stories/functions.stories.ts

@@ -0,0 +1,82 @@
+import { h } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { functionsBaseConfig, FunctionsTemplate } from './constants';
+
+import { MaModal } from '@/index';
+
+const meta: Meta<typeof MaModal> = {
+    title: 'Core/MaModal/Functions',
+    ...functionsBaseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaModal>;
+
+export const Info: Story = FunctionsTemplate.bind({});
+Info.args = {
+    type: 'info',
+    bodyTitle: 'This is modal title...',
+    content: h('div', {}, [
+        h('p', 'some messages...some messages...'),
+        h('p', 'The modal will close 1 second after the ok button is clicked.'),
+    ]),
+    okText: 'Ok',
+    cancelText: 'Cancel',
+    onCancel() {
+        console.log('onCancel!');
+    },
+    onOk() {
+        console.log('onOk!');
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve(true);
+            }, 1000);
+        });
+    },
+};
+
+export const Success: Story = FunctionsTemplate.bind({});
+Success.args = {
+    type: 'success',
+    bodyTitle: 'This is modal title...',
+    content: 'This is modal content...',
+    okText: 'Ok',
+    cancelText: 'Cancel',
+};
+
+export const Confirm: Story = FunctionsTemplate.bind({});
+Confirm.args = {
+    type: 'confirm',
+    bodyTitle: 'This is modal title...',
+    content: 'This is modal content...',
+    okText: 'Ok',
+    cancelText: 'Cancel',
+};
+
+export const Error: Story = FunctionsTemplate.bind({});
+Error.args = {
+    type: 'error',
+    bodyTitle: 'This is modal title...',
+    content: 'This is modal content...',
+    okText: 'Ok',
+    cancelText: 'Cancel',
+};
+
+export const Warning: Story = FunctionsTemplate.bind({});
+Warning.args = {
+    type: 'warning',
+    bodyTitle: 'This is modal title...',
+    content: 'This is modal content...',
+    okText: 'Ok',
+    cancelText: 'Cancel',
+};
+
+export const Blank: Story = FunctionsTemplate.bind({});
+Blank.args = {
+    type: 'blank',
+    title: 'This is modal title...',
+    content: h('div', {}, [
+        h('p', 'some messages...some messages...'),
+    ]),
+};

package/src/components/modal/types.ts

@@ -0,0 +1,43 @@
+import { ModalProps } from 'ant-design-vue';
+import { MaButtonProps } from '../button/index.vue';
+import { VNode } from 'vue';
+
+export const MaModalTypes = [
+    'info',
+    'success',
+    'confirm',
+    'warning',
+    'error',
+    'blank',
+] as const;
+
+export const MaModalTypeIcon: {
+    [K in MaModalPropType]: string
+} = {
+    'info': 'info-circle-2-bold',
+    'success': 'tick-circle-bold',
+    'confirm': 'warning',
+    'warning': 'warning',
+    'error': 'close-circle-bold',
+    'blank': null,
+};
+export type MaModalPropType = (typeof MaModalTypes)[number];
+
+export interface MaModalProps extends Omit<ModalProps, 'okButtonProps' | 'cancelButtonProps'> {
+  visible?: boolean;
+  type?: MaModalPropType,
+  title?: string,
+  bodyTitle?: string,
+  content?: string|VNode;
+  confirmLoading?: boolean,
+  closable?: boolean,
+  okText?: string,
+  okButtonProps?: MaButtonProps,
+  cancelText?: string,
+  cancelButtonProps?: MaButtonProps,
+  mask?: boolean,
+  maskClosable?: boolean,
+  width?: number,
+  icon?: string,
+  noSpace?: boolean,
+}