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

package/src/components/dropdown/index.vue

@@ -0,0 +1,66 @@
+<script lang="ts">
+export default {
+    name: 'MaDropdown',
+};
+</script>
+<script setup lang="ts">
+import { Dropdown as ADropdown, DropdownProps } from 'ant-design-vue';
+import { MaDropdownPlacement, MaDropdownTrigger } from './types';
+import { ComputedRef, WritableComputedRef, computed, useAttrs } from 'vue';
+
+export interface MaDropdownProps {
+    destroyPopupOnHide?: boolean,
+    disabled?: boolean,
+    placement?: MaDropdownPlacement,
+    trigger?: MaDropdownTrigger[],
+    visible?: boolean,
+    overlayClassName?: string,
+}
+
+const props = withDefaults(defineProps<MaDropdownProps>(), {
+    destroyPopupOnHide: false,
+    disabled: false,
+    placement: 'bottomLeft',
+    trigger: () => ['hover'],
+    visible: undefined,
+});
+const emits = defineEmits(['update:visible', 'visibleChange']);
+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-dropdown-overlay', props?.overlayClassName].join(' ')
+);
+
+const bindings = computed(() => ({ ...attrs, ...props } as unknown as DropdownProps));
+
+</script>
+<template>
+  <a-dropdown
+    v-bind="bindings"
+    v-model:visible="visibleStatus"
+    prefix-cls="antd-dropdown"
+    :overlay-class-name="overlayClassName"
+    :destroy-popup-on-hide="props.destroyPopupOnHide"
+    :disabled="props.disabled"
+    :placement="props.placement"
+    :trigger="props.trigger"
+  >
+    <slot />
+    <template #overlay>
+      <div v-if="$slots.overlay">
+        <slot name="overlay" />
+      </div>
+    </template>
+  </a-dropdown>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

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

@@ -0,0 +1,108 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { MaDropdownTriggers, MaDropdownPlacements } from '../types';
+import { ref } from 'vue';
+
+import MaDropdown from '../index.vue';
+import MaButton from '../../button/index.vue';
+import MaMenu from '../../menu/index.vue';
+import MaMenuItem from '../../menu/components/MenuItem.vue';
+
+export const baseConfig: Meta<typeof MaDropdown> = {
+    component: MaDropdown,
+    parameters: {
+        docs: {
+            description: {
+                component: `<p>Figma Designs <a href="https://www.figma.com/file/LsEcZ7CR3mf1vzBpCRgN7m/Design-Foundation_VD?type=design&node-id=147-69278&mode=dev" target="_blank">here!</a></p><p>
+                </p><p>
+                Ant Dropdown Docs <a href="https://antdv.com/components/dropdown" target="_blank">here!</a>
+            </p><p>
+            In the dropdown 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: MaDropdownTriggers,
+            defaultValue: 'bottomLeft',
+        },
+        placement: {
+            control: 'select',
+            options: MaDropdownPlacements,
+        },
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaDropdown, MaButton },
+    setup() {
+        const visible = ref(false);
+        return { args, visible };
+    },
+    template: `<ma-dropdown v-model:visible="visible" v-bind="args">
+    <ma-button variant="filled" icon="arrow-down-circle" icon-alignment="right">
+    </ma-button>
+    <template #overlay>
+      <ul style="display: flex; flex-direction: column; gap: .2rem">
+        <li v-for="item in 5" :key="item">
+          <ma-button class="w-full" icon="tick" variant="ghost" size="small">Dropdown Item {{ item }}</ma-button>
+        </li>
+      </ul>
+    </template>
+  </ma-dropdown>`,
+});
+
+export const TemplateWithoutVisible: StoryFn = (args: any) => ({
+    components: { MaDropdown, MaButton },
+    setup() {
+        return { args };
+    },
+    template: `<ma-dropdown v-bind="args">
+    <ma-button variant="stroke" icon="arrow-down-circle" icon-alignment="right">
+    </ma-button>
+    <template #overlay>
+      <ul style="display: flex; flex-direction: column; gap: .2rem">
+        <li v-for="item in 5" :key="item">
+          <ma-button class="w-full" icon="tick" variant="ghost" size="small">Dropdown Item {{ item }}</ma-button>
+        </li>
+      </ul>
+    </template>
+  </ma-dropdown>`,
+});
+
+export const TemplateWithMenu: StoryFn = (args: any) => ({
+    components: { MaDropdown, MaButton, MaMenu, MaMenuItem },
+    setup() {
+        const visible = ref(false);
+        return { args, visible };
+    },
+    template: `<ma-dropdown v-model:visible="visible" v-bind="args">
+    <ma-button variant="stroke" icon="arrow-down-circle" icon-alignment="right">
+      Dropdown
+    </ma-button>
+    <template #overlay>
+      <ma-menu>
+        <ma-menu-item
+            v-for="item in 5"
+            :key="item"
+            :command="item"
+            :selected="item === 1"
+            :disabled="item === 5"
+        >
+            <template v-if="item === 1">
+                Selected Item {{ item }}
+            </template>
+            <template v-else-if="item === 5">
+                Disabled Item {{ item }}
+            </template>
+            <template v-else>
+                Dropdown Item {{ item }}
+            </template>
+        </ma-menu-item>
+      </ma-menu>
+    </template>
+  </ma-dropdown>`,
+});

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

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import {
+  baseConfig,
+  Template,
+  TemplateWithoutVisible,
+  TemplateWithMenu,
+} from './constants';
+
+import type MaDropdown from '../index.vue';
+
+const meta: Meta<typeof MaDropdown> = {
+  title: 'Core/MaDropdown',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaDropdown>;
+
+export const Default: Story = Template.bind({});
+Default.args = {};
+
+export const WithoutVisibleModel: Story = TemplateWithoutVisible.bind({});
+WithoutVisibleModel.args = {};
+
+export const TriggerClick: Story = TemplateWithoutVisible.bind({});
+TriggerClick.args = {
+  trigger: ['click'],
+};
+
+export const TriggerHover: Story = TemplateWithoutVisible.bind({});
+TriggerHover.args = {
+  trigger: ['hover'],
+};
+
+export const TriggerContextMenu: Story = TemplateWithoutVisible.bind({});
+TriggerContextMenu.args = {
+  trigger: ['contextmenu'],
+};
+
+export const WithMenuItem: Story = TemplateWithMenu.bind({});
+WithMenuItem.args = {
+  trigger: ['click'],
+};

package/src/components/dropdown/types.ts

@@ -0,0 +1,17 @@
+export const MaDropdownPlacements = [
+    "bottomLeft",
+    "bottom",
+    "bottomRight",
+    "topLeft",
+    "top",
+    "topRight",
+] as const;
+
+export const MaDropdownTriggers = [
+    "click",
+    "hover",
+    "contextmenu",
+] as const;
+
+export type MaDropdownPlacement = (typeof MaDropdownPlacements)[number];
+export type MaDropdownTrigger = (typeof MaDropdownTriggers)[number];

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

@@ -0,0 +1,7 @@
+.ma-ellipsis {
+    @apply max-w-full inline-block;
+    .slot-container,
+    * {
+        @apply overflow-hidden text-ellipsis whitespace-nowrap block w-full;
+    }
+}

package/src/components/ellipsis/index.vue

@@ -0,0 +1,141 @@
+<script lang="ts">
+export default {
+    name: 'MaEllipsis',
+};
+</script>
+<script setup lang="ts">
+import { ref, onMounted, watch, Ref, nextTick, computed, ComputedRef } from 'vue';
+import { useElementSize  } from '@vueuse/core';
+
+import MaTooltip, { MaTooltipProps } from '@/components/tooltip/index.vue';
+
+export interface MaEllipsisProps {
+    tooltipProps?: MaTooltipProps
+}
+
+const props = defineProps<MaEllipsisProps>();
+
+const slotContainer: Ref<HTMLElement> = ref(null);
+const isOverflow: Ref<boolean> = ref(false);
+const textContent: Ref<string> = ref('');
+
+const { width: slotContainerWidth } = useElementSize(slotContainer);
+
+const tooltipArgs: ComputedRef<MaTooltipProps> = computed(() => ({
+    overlayClassName: 'ma-app-icon-tooltip',
+    title: textContent.value,
+    type: 'primary',
+    ...props.tooltipProps,
+}));
+
+const isTextOverflowing = (element: HTMLElement): boolean => {
+    if (!element) return false;
+
+    const measuringElement = createMeasurerElement(element);
+    document.body.appendChild(measuringElement);
+
+    const initialWidth = measuringElement.getBoundingClientRect().width;
+
+    document.body.removeChild(measuringElement);
+
+    return parseInt(slotContainerWidth.value.toString()) < parseInt(initialWidth.toString());
+};
+
+const createMeasurerElement = (element: HTMLElement): HTMLDivElement => {
+    const measuringElement = document.createElement('div');
+    const style = window.getComputedStyle(element, null);
+
+    Object.assign(measuringElement.style, {
+        position: 'relative',
+        whiteSpace: 'nowrap',
+        right: '150%',
+        bottom: '150%',
+        font: style.font,
+        fontSize: style.fontSize,
+        fontWeight: style.fontWeight,
+        letterSpacing: style.letterSpacing,
+        padding: style.padding,
+        border: style.border,
+        margin: style.margin,
+        display: 'inline-block',
+        maxWidth: '100%',
+        background: 'red',
+    });
+
+    const clone = element.cloneNode(true) as HTMLElement;
+    copyComputedStyle(element, clone);
+    measuringElement.appendChild(clone);
+
+    return measuringElement;
+};
+
+const copyComputedStyle = (sourceElement: HTMLElement, targetElement: HTMLElement) => {
+    const computedStyle = window.getComputedStyle(sourceElement);
+    const includeStyles = [
+        'position',
+        'white-space',
+        'font',
+        'font-size',
+        'font-weight',
+        'letter-spacing',
+        'padding',
+        'border',
+        'margin',
+    ];
+
+    for (const key of includeStyles) {
+        targetElement.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key));
+    }
+
+    // Recursively copy styles for child elements if any
+    Array.from(sourceElement.children).forEach((child, index) => {
+        copyComputedStyle(child as HTMLElement, targetElement.children[index] as HTMLElement);
+    });
+};
+
+
+const checkOverflow = () => {
+    const element = slotContainer.value;
+
+    if (element) {
+        isOverflow.value = isTextOverflowing(element);
+    }
+};
+
+const setTextContent = () => {
+    textContent.value = slotContainer.value?.innerText || '';
+};
+
+onMounted(async () => {
+    await nextTick();
+    checkOverflow();
+    setTextContent();
+});
+
+watch(
+    slotContainerWidth,
+    async () => {
+        checkOverflow();
+        setTextContent();
+
+    }
+);
+</script>
+
+<template>
+  <div class="ma-ellipsis">
+    <ma-tooltip
+      :trigger="isOverflow ? ['hover'] : []"
+      v-bind="tooltipArgs"
+    >
+      <div
+        ref="slotContainer"
+        class="slot-container"
+      >
+        <slot />
+      </div>
+    </ma-tooltip>
+  </div>
+</template>
+
+<style lang="scss" src="./assets/styles.scss"></style>

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

@@ -0,0 +1,34 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+
+import MaCard from '../index.vue';
+
+export const baseConfig: Meta<typeof MaCard> = {
+    component: MaCard,
+    parameters: {
+        backgrounds: {
+            default: 'ma',
+            values: [
+                {
+                    name: 'ma',
+                    value: '#D0D5DD',
+                },
+            ],
+        },
+        docs: {
+            description: {
+                component: `<p>Ellipsis is a component that truncates a single line of text or paragraph with an ellipsis (…).</p><p>
+                </p>`,
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaCard },
+    setup() {
+        return { args };
+    },
+    template: `<ma-ellipsis v-bind="args"/>`,
+});

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { baseConfig } from './constants';
+
+import MaEllipsis from '../../ellipsis/index.vue';
+
+const meta: Meta<typeof MaEllipsis> = {
+  title: 'Core/MaEllipsis',
+  ...baseConfig,
+};
+
+export default meta;
+
+export const Default: StoryFn = (args: any) => ({
+  components: {
+    MaEllipsis,
+  },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `<ma-ellipsis>
+                    <p>Lorem ipsum dolor sit amet consectetur. Fames volutpat enim dui facilisis semper etiam accumsan dictum ornare.</p>
+    </ma-ellipsis>`,
+});

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

@@ -0,0 +1,76 @@
+.ma-empty {
+  @apply flex flex-col font-euclid items-center gap-1;
+  &__title {
+    @apply text-gray-500 font-medium;
+  }
+  &__description {
+    @apply text-gray-400 font-medium;
+  }
+  &__icon {
+    @apply mb-4;
+  }
+  &--large {
+    .ma-empty__title {
+      @apply text-base leading-6;
+    }
+    .ma-empty__description {
+      @apply text-sm leading-5;
+    }
+    .ma-empty__icon,
+    .ma-animation {
+      @apply w-[10.25rem] h-[10.25rem];
+    }
+  }
+  &--medium {
+    .ma-empty__title {
+      @apply text-sm leading-5;
+    }
+    .ma-empty__description {
+      @apply text-xs leading-4;
+    }
+    .ma-empty__icon,
+    .ma-animation {
+      @apply w-[7.5rem] h-[7.5rem];
+    }
+  }
+  &--small {
+    .ma-empty__title {
+      @apply text-sm leading-5;
+    }
+    .ma-empty__description {
+      @apply text-xs leading-4;
+    }
+    .ma-empty__icon,
+    .ma-animation {
+      @apply w-20 h-20;
+    }
+  }
+  &--general {
+    &.ma-empty--large {
+      .ma-empty__icon {
+        @apply w-[17rem];
+      }
+    }
+    &.ma-empty--medium {
+      .ma-empty__icon {
+        @apply w-[12.5rem];
+      }
+    }
+    &.ma-empty--small {
+      .ma-empty__icon {
+        @apply w-[8.25rem];
+      }
+    }
+  }
+  &--add-app {
+    .ak-icon {
+      @apply mb-0;
+      &--add-app {
+        @apply rounded-full;
+        g {
+          transform: translateY(2px);
+        }
+      }
+    }
+  }
+}

package/src/components/empty/index.vue

@@ -0,0 +1,54 @@
+<script lang="ts">
+export default {
+  name: 'MaEmpty',
+};
+</script>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { MaEmptySize, MaEmptyVariant, MaEmptyIcons } from './types';
+import { AnimationName } from "../animation/types";
+import MaAnimation, { MaAnimationProps } from "../animation/index.vue";
+import MaIcon from "../icon/index.vue";
+
+export interface MaRateProps {
+    size?: MaEmptySize,
+    variant?: MaEmptyVariant,
+    animation?: AnimationName,
+    animationProps?: MaAnimationProps,
+    title?: string,
+    description?: string,
+}
+
+const props = withDefaults(defineProps<MaRateProps>(), {
+    size: 'large',
+    variant: 'general',
+});
+
+const iconName = computed(() =>
+    props.variant && MaEmptyIcons[props.variant]? MaEmptyIcons[props.variant]: null
+);
+
+const className = computed(() => [
+    `ma-empty ma-empty--${props.variant} ma-empty--${props.size}`
+]);
+
+</script>
+<template>
+   <div :class="className">
+    <ma-animation :name="animation" v-if="props?.animation" v-bind="props?.animationProps" />
+    <slot name="icon" v-else-if="$slots.icon"></slot>
+    <ma-icon :name="iconName" v-else class="ma-empty__icon" />
+    <span class="ma-empty__title">
+        {{ title }}
+        <slot name="title"></slot>
+    </span>
+    <span class="ma-empty__description">
+        {{ description }}
+        <slot name="description"></slot>
+    </span>
+    <div class="ma-empty__content">
+        <slot></slot>
+    </div>
+   </div>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

package/src/components/empty/stories/animation.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { baseConfig, Template } from './constants';
+
+import type MaEmpty from '../index.vue';
+
+const meta: Meta<typeof MaEmpty> = {
+  title: 'Advanced/MaEmpty/Animation',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaEmpty>;
+
+export const Animation: Story = Template.bind({});
+Animation.args = {
+  title: 'Place a title here',
+  description: 'Place a description here',
+  animation: 'fly-waiting',
+  size: 'large',
+};
+
+export const AnimationProps: Story = Template.bind({});
+AnimationProps.args = {
+  title: 'Place a title here',
+  description: 'Place a description here',
+  animation: 'rocket',
+  size: 'large',
+  animationProps: {
+    rendererSettings: {
+      viewBoxOnly: true,
+      viewBoxSize: '90 104 160 175',
+    },
+  },
+};

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { MaEmptySizes, MaEmptyVariants } from "../types";
+import { Animations } from "../../animation/types";
+
+import MaEmpty from '../index.vue';
+
+export const baseConfig: Meta<typeof MaEmpty> = {
+    component: MaEmpty,
+    parameters: {
+        docs: {
+            description: {
+                component: `<p>Figma Designs <a href="https://www.figma.com/file/LsEcZ7CR3mf1vzBpCRgN7m/Design-Foundation_VD?type=design&node-id=588-71952&mode=dev" target="_blank">here!</a></p><p>
+                </p>`,
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: MaEmptyVariants,
+        },
+        size: {
+            control: { type: 'select' },
+            options: MaEmptySizes,
+        },
+        animation: {
+            control: { type: 'select' },
+            options: Animations,
+            description: 'if the animation prop is defined, its variant will be deactivated'
+        },
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaEmpty },
+    setup() {
+        return { args };
+    },
+    template: `<ma-empty v-bind="args" />`,
+});

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

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