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

package/src/components/side-menu-2/menu-item/index.vue

@@ -0,0 +1,54 @@
+<script lang="ts">
+export default {
+    name: 'MaSideMenuItem2',
+};
+</script>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ButtonTarget } from '@/components/button/types';
+import MaBadge from '@/components/badge/index.vue';
+
+export interface MaSideMenuItem2 {
+    href?: string,
+    target?: ButtonTarget;
+    text?: string;
+    active?: boolean,
+    proBadge?: boolean,
+}
+
+const props = defineProps<MaSideMenuItem2>();
+
+const tag = computed(() => (props?.href ? 'a' : 'button'));
+
+const buttonClassNames = computed(() => [
+    `ma-side-menu-item-2`,
+    {
+        'active': props.active,
+    },
+]);
+
+</script>
+<template>
+  <component
+    :is="tag"
+    role="button"
+    :target="props?.target"
+    :class="buttonClassNames"
+    :href="props?.href"
+    v-bind="$attrs"
+  >
+    <span>
+      {{ props?.text }}
+      <slot />
+    </span>
+    <ma-badge
+      v-if="props.proBadge"
+      variant="green"
+      type="secondary"
+      icon="crown-bold"
+      size="small"
+      shape="rounded"
+    />
+  </component>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

package/src/components/side-menu-2/menu-item/stories/constants.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import MaSideMenuItem2 from '../index.vue';
+
+import { ButtonTargets } from '@/components/button/types';
+
+export const baseConfig: Meta<typeof MaSideMenuItem2> = {
+    component: MaSideMenuItem2,
+    parameters: {
+        backgrounds: {
+            default: 'sideMenu',
+            values: [
+                {
+                    name: 'sideMenu',
+                    value: '#F9FAFB',
+                },
+            ],
+        },
+        docs: {
+            description: {
+                component: `<p>Figma Designs <a href="https://www.figma.com/design/vcN3ndaRRYUYYlJOY6FOej/MA---Side-Menu?node-id=2908-36001&m=dev" target="_blank">here!</a></p><p>
+                </p>`,
+            },
+        },
+    },
+    argTypes: {
+        target: {
+            control: { type: 'select' },
+            options: ButtonTargets,
+        },
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaSideMenuItem2 },
+    setup() {
+        return { args };
+    },
+    template: `<ma-side-menu-item-2 v-bind="args" />`,
+});

package/src/components/side-menu-2/menu-item/stories/default.stories.ts

@@ -0,0 +1,83 @@
+import type { Meta, StoryFn, StoryObj } from '@storybook/vue3';
+import { baseConfig, Template } from './constants';
+
+import MaSideMenuItem2 from '../index.vue';
+import { ref } from 'vue';
+
+const meta: Meta<typeof MaSideMenuItem2> = {
+    title: 'Advanced/MaSideMenu2/Item',
+    ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaSideMenuItem2>;
+
+export const Default: Story = Template.bind({});
+Default.args = {
+    text: 'App Profile',
+};
+
+export const Active: Story = Template.bind({});
+Active.args = {
+    text: 'App Profile',
+    active: true,
+};
+
+export const WithProBadge: Story = Template.bind({});
+WithProBadge.args = {
+    text: 'App Profile',
+    proBadge: true,
+};
+
+export const ActiveWithProBadge: Story = Template.bind({});
+ActiveWithProBadge.args = {
+    text: 'App Profile',
+    proBadge: true,
+    active: true,
+};
+
+export const SideMenu: StoryFn = (args: any) => ({
+    components: { MaSideMenuItem2 },
+    setup() {
+        const activeNumber = ref(1);
+        const items = [
+            {
+                name: 'App Profile',
+            },
+            {
+                name: 'Publisher Profile',
+            },
+            {
+                name: 'Featured Apps',
+            },
+            {
+                name: 'Category Rankings',
+                proBadge: true,
+            },
+            {
+                name: 'Reviews',
+            },
+            {
+                name: 'Similar Apps',
+                proBadge: true,
+            },
+            {
+                name: 'Sales metrics',
+                proBadge: true,
+            },
+            {
+                name: 'In-App Events',
+            },
+            {
+                name: 'Promational Content',
+            },
+        ];
+        return { args, activeNumber, items };
+    },
+    template: `<ul class="flex flex-col gap-y-1">
+        <li v-for="(item, keyItem) in items" :key="item.name">
+            <ma-side-menu-item-2 @click="activeNumber=keyItem" :active="activeNumber === keyItem" :pro-badge="item?.proBadge">{{ item.name }}</ma-side-menu-item-2>
+        </li>
+    </ul>`,
+});

package/src/components/side-menu-2/side-menu-2.test.ts

@@ -0,0 +1,64 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MaSideMenuButton2 from './menu-button/index.vue';
+import MaSideMenuItem2 from './menu-item/index.vue';
+import MaIcon from '@/components/icon/index.vue';
+import MaBadge from '@/components/badge/index.vue';
+
+describe('MaSideMenuButton2', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(MaSideMenuButton2);
+        expect(wrapper.exists()).toBe(true);
+        expect(wrapper.findComponent(MaIcon).exists()).toBe(true);
+    });
+
+    it('renders with provided text', () => {
+        const wrapper = mount(MaSideMenuButton2, {
+            props: { text: 'Menu' },
+        });
+        expect(wrapper.text()).toContain('Menu');
+    });
+
+    it('applies active class when active is true', () => {
+        const wrapper = mount(MaSideMenuButton2, {
+            props: { active: true },
+        });
+        expect(wrapper.classes()).toContain('active');
+    });
+
+    it('renders the active icon when active', () => {
+        const wrapper = mount(MaSideMenuButton2, {
+            props: { icon: 'radar', activeIcon: 'radar-bold', active: true },
+        });
+        const icon = wrapper.findComponent(MaIcon);
+        expect(icon.props('name')).toBe('radar-bold');
+    });
+});
+
+describe('MaSideMenuItem2', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(MaSideMenuItem2);
+        expect(wrapper.exists()).toBe(true);
+    });
+
+    it('renders with provided text', () => {
+        const wrapper = mount(MaSideMenuItem2, {
+            props: { text: 'Dashboard' },
+        });
+        expect(wrapper.text()).toContain('Dashboard');
+    });
+
+    it('applies active class when active is true', () => {
+        const wrapper = mount(MaSideMenuItem2, {
+            props: { active: true },
+        });
+        expect(wrapper.classes()).toContain('active');
+    });
+
+    it('renders the pro badge when proBadge is true', () => {
+        const wrapper = mount(MaSideMenuItem2, {
+            props: { proBadge: true },
+        });
+        expect(wrapper.findComponent(MaBadge).exists()).toBe(true);
+    });
+});

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

@@ -0,0 +1,222 @@
+.antd-slider {
+  @apply box-border text-primary-dark text-sm leading-[1.5715] relative h-3 cursor-pointer touch-none m-0 p-0 list-none tabular-nums;
+  &-vertical {
+    @apply w-3 h-full mx-2.5 my-1.5 px-1 py-0;
+    .antd-slider-rail {
+      @apply w-2 h-full rounded-lg;
+    }
+    .antd-slider-track {
+      @apply w-2;
+    }
+    .antd-slider-handle {
+      @apply -ml-2 -mt-1.5;
+    }
+    .antd-slider-handle:focus  {
+        @apply border-primary-dark-blue outline-none;
+    }
+    .antd-slider-mark {
+      @apply w-[18px] h-full left-3 top-0;
+    }
+    .antd-slider-mark-text {
+      @apply whitespace-nowrap left-3.5;
+    }
+    .antd-slider-step {
+      @apply w-2 h-full;
+    }
+    .antd-slider-dot {
+      @apply -mb-1 left-0.5 top-auto;
+    }
+    .antd-slider-tooltip-inner {
+      @apply min-w-[unset];
+    }
+  }
+  &-with-marks {
+    @apply mb-[28px];
+  }
+ &-rail {
+   @apply absolute w-full h-2 bg-gray-200 rounded-lg;
+ }
+  &-track {
+    @apply absolute h-2 bg-primary-dark-blue rounded-lg;
+    transition: background-color 0.3s;
+  }
+  &-handle {
+    @apply absolute w-6 h-6 mt-[-10px] bg-white border-primary-dark-blue border-2 rounded-full cursor-pointer;
+  }
+  &-handle-dragging.antd-slider-handle-dragging.antd-slider-handle-dragging {
+    @apply border-primary-dark-blue border-2;
+  }
+  &-handle {
+    .antd-slider-tooltip-open {
+      @apply border-primary-dark-blue;
+    }
+  }
+  &-handle:focus  {
+    @apply border-primary-dark-blue;
+    outline: none;
+  }
+  &:hover {
+    .antd-slider-track {
+      @apply bg-primary-dark-blue;
+    }
+    .antd-slider-handle:not(.antd-slider-tooltip-open) {
+      @apply border-primary-dark-blue
+    }
+  }
+  &-mark {
+    @apply absolute top-[14px] left-0 w-full font-medium;
+    &-text {
+      @apply absolute inline-block text-primary-dark text-center break-keep	cursor-pointer select-none font-medium;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+      &-active {
+        @apply border-primary-dark-blue;
+      }
+    }
+  }
+  &-step {
+    @apply absolute w-full h-2 rounded-full bg-transparent;
+  }
+  &-dot {
+    @apply absolute top-[-2px] w-3 h-3 -ml-1 bg-white border-gray-200 border-2 rounded-full cursor-pointer;
+    &:first-child {
+      @apply -ml-1;
+    }
+    &:last-child {
+      @apply -ml-1;
+    }
+    &-active {
+      @apply -ml-1 border-primary-dark-blue;
+    }
+  }
+  &-disabled {
+    @apply cursor-not-allowed;
+    .antd-slider-rail {
+     @apply bg-gray-200;
+    }
+    .antd-slider-track {
+      @apply bg-gray-200 #{!important};
+    }
+    .antd-slider-handle, .antd-slider-dot {
+      @apply bg-white border-gray-200 cursor-not-allowed shadow-none #{!important};
+    }
+    .antd-slider-mark-text, .antd-slider-dot {
+      @apply cursor-not-allowed;
+    }
+  }
+}
+
+.antd-slider-tooltip {
+  @apply box-border m-0 p-0 text-primary-dark font-medium list-none absolute z-[1070] block w-max max-w-[250px] leading-[1.5715] tabular-nums	text-xs visible;
+  &-hidden {
+    @apply hidden;
+  }
+  &-placement-top, &-placement-topLeft, &-placement-topRight {
+    @apply pb-2;
+    .antd-slider-tooltip-arrow {
+      bottom: -5.07106781px;
+    }
+    .antd-slider-tooltip-arrow-content {
+      box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
+      transform: translateY(-6.53553391px) rotate(45deg);
+    }
+  }
+  &-placement-right, &-placement-rightTop, &-placement-rightBottom {
+    @apply pl-2;
+    .antd-slider-tooltip-arrow {
+      left: -5.07106781px;
+    }
+    .antd-slider-tooltip-arrow-content {
+      box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
+      transform: translateX(6.53553391px) rotate(45deg);
+    }
+  }
+  &-placement-bottom, &-placement-bottomLeft, &-placement-bottomRight {
+    @apply pt-2;
+    .ant-tooltip-arrow-content {
+      box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07);
+      transform: translateY(6.53553391px) rotate(45deg);
+    }
+  }
+  &-placement-left, &-placement-leftTop, &-placement-leftBottom {
+    @apply pr-2;
+    .ant-tooltip-arrow-content {
+      box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
+      transform: translateX(-6.53553391px) rotate(45deg);
+    }
+  }
+  &-placement-top {
+    .antd-slider-tooltip-arrow {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+  &-placement-topLeft {
+    .antd-slider-tooltip-arrow {
+      left: 13px;
+    }
+  }
+  &-placement-topRight {
+    .antd-slider-tooltip-arrow {
+      right: 13px;
+    }
+  }
+  &-placement-bottomLeft{
+    .antd-slider-tooltip-arrow {
+      left: 13px;
+    }
+  }
+  &-placement-bottomRight {
+    .antd-slider-tooltip-arrow {
+      right: 13px;
+    }
+  }
+  &-placement-right {
+    .antd-slider-tooltip-arrow {
+      @apply top-1/2;
+      transform: translateY(-50%);
+    }
+  }
+  &-placement-left {
+    .antd-slider-tooltip-arrow {
+      right: -5.07106781px;
+    }
+    .antd-slider-tooltip-arrow-content, {
+      box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
+      transform: translateX(-6.53553391px) rotate(45deg);
+    }
+    .antd-slider-tooltip-arrow {
+      @apply top-1/2;
+      transform: translateY(-50%);
+    }
+  }
+  &-placement-bottom {
+    .antd-slider-tooltip-arrow {
+      top: -5.07106781px;
+    }
+    .antd-slider-tooltip-arrow-content, {
+      box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07);
+      transform: translateY(6.53553391px) rotate(45deg);
+    }
+    .antd-slider-tooltip-arrow {
+      @apply left-1/2;
+      transform: translateX(-50%);
+    }
+  }
+  &-inner {
+    @apply rounded-lg min-w-[30px] min-h-[32px] text-left bg-white text-primary-dark;
+    padding: 6px 8px;
+    text-decoration: none;
+    word-wrap: break-word;
+    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  }
+  &-arrow {
+    @apply absolute block w-[13.07106781px] h-[13.07106781px] overflow-hidden bg-transparent pointer-events-none;
+    &-content {
+      @apply absolute top-0 right-0 bottom-0 left-0 block w-[5px] h-[5px] m-auto bg-white pointer-events-auto;
+      content: '';
+    }
+  }
+}
+

package/src/components/slider/index.vue

@@ -0,0 +1,100 @@
+<script lang="ts">
+export default {
+    name: 'MaSlider',
+};
+</script>
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import { Slider as ASlider, SliderProps } from 'ant-design-vue';
+import { MaSliderPlacement } from '@/components/slider/types';
+import { SliderMarks } from 'ant-design-vue/lib/slider';
+
+export interface MaSliderProps {
+    value?: number| number[]
+    autoFocus?: boolean;
+    disabled?: boolean;
+    dots?: boolean;
+    included?: boolean;
+    max?: number;
+    min?: number;
+    range?: boolean;
+    step?: number;
+    vertical?: boolean;
+    marks?: SliderMarks,
+    tooltipPlacement?: MaSliderPlacement;
+    tipFormatter?: () => {},
+}
+
+const props = withDefaults(defineProps<MaSliderProps>(), {
+    autoFocus: false,
+    disabled: false,
+    dots: false,
+    included: true,
+    max: 100,
+    min: 0,
+    range: false,
+    step: 1,
+    vertical: false,
+});
+const emits = defineEmits(['update:value', 'change']);
+const attrs = useAttrs();
+
+const valueForSlider = computed<[number, number] | number>({
+    get() {
+        if (props.range) {
+            return Array.isArray(props.value) && props.value.length === 2
+                ? [props.value[0], props.value[1]]
+                : [props.min, props.max];
+        } else {
+            return typeof props.value === 'number' ? props.value : props.min;
+        }
+    },
+    set(value) {
+        emits('update:value', value);
+        emits('change', value);
+    },
+});
+
+const sliderClass = computed(() => {
+    return [
+        'ma-slider',
+        'ak-slider',
+    ];
+});
+
+const bindings = computed(() => ({ ...attrs, ...props } as unknown as SliderProps));
+
+</script>
+<template>
+  <a-slider
+    v-bind="bindings"
+    v-model:value="valueForSlider"
+    :class="sliderClass"
+    :autofocus="props.autoFocus"
+    :disabled="props.disabled"
+    :dots="props.dots"
+    :included="props.included"
+    :max="props.max"
+    :min="props.min"
+    :range="props.range"
+    :step="props.step"
+    :vertical="props.vertical"
+    :marks="props.marks"
+    :tip-formatter="props.tipFormatter"
+    :tooltip-placement="props.tooltipPlacement"
+    prefix-cls="antd-slider"
+    tooltip-prefix-cls="antd-slider-tooltip"
+  >
+    <template #mark="scope">
+      <slot
+        name="mark"
+        v-bind="scope"
+      />
+    </template>
+  </a-slider>
+</template>
+
+<style lang="scss" src="./assets/styles.scss"></style>
+
+
+

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

@@ -0,0 +1,104 @@
+import { Meta, StoryFn } from "@storybook/vue3";
+import MaSlider from "@/components/slider/index.vue";
+import {defineComponent, ref} from "vue";
+import {MaSliderPlacements} from "@/components/slider/types";
+
+export default defineComponent({
+    components: { MaSlider }
+})
+
+export const baseConfig: Meta<typeof MaSlider> = {
+    component: MaSlider,
+    parameters: {
+        layout: 'centered',
+        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-63112&mode=design&t=Vnonp1BHxp803vy4-0" target="_blank">here</a>
+                </p> Ant Slider Docs <a href="https://antdv.com/components/slider" target="_blank">here!</a>`,
+            },
+        },
+    },
+    argTypes: {
+        tooltipPlacement: {
+            control: { type: 'select' },
+            options: MaSliderPlacements,
+        }
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaSlider },
+    setup() {
+        const value2 = ref<number>(0);
+
+        return { args, value2 };
+    },
+    template: `
+    <div class="w-80 h-40">
+        <ma-slider
+            v-model:value="value2"
+            v-bind="args"
+        >
+        </ma-slider>
+    </div>
+
+  `,
+});
+
+export const TemplateRange: StoryFn = (args: any) => ({
+    components: { MaSlider },
+    setup() {
+        const value2 = ref<[number, number]>([10,20]);
+
+        return { args, value2 };
+    },
+    template: `
+<div class="w-80 m-10">
+  <ma-slider
+      v-model:value="value2"
+      v-bind="args"
+      range
+      class="my-10"
+  >
+  </ma-slider>
+</div>
+  `,
+});
+
+export const TemplateSlot: StoryFn = (args: any) => ({
+    components: { MaSlider },
+    setup() {
+        const value = ref(0);
+
+        const marks = ref({
+            0: '0°C',
+            26: '26°C',
+            37: '37°C',
+            100: {
+                style: {
+                    color: '#f50',
+                },
+                label: '100°C',
+            },
+        });
+        return { args, value, marks };
+    },
+    template: `
+<div class="h-80" >
+    <ma-slider
+        v-model:value="value"
+        vertical
+        :marks="marks"
+        tooltip-placement="left"
+    >
+        <template #mark="{ label, point }">
+            <template v-if="point === 100">
+                <strong>{{ label }}</strong>
+            </template>
+            <template v-else>{{ label }}</template>
+        </template>
+    </ma-slider>
+</div>
+  `,
+});

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

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