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

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

@@ -0,0 +1,82 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { CascaderSizes } from '../types';
+
+import { MaCascader, MaIcon } from '@/index';
+import { ref } from 'vue';
+
+export const baseConfig: Meta<typeof MaCascader> = {
+  component: MaCascader,
+  parameters: {
+    docs: {
+      description: {
+        component: `<p>Figma Designs <a href="https://www.figma.com/file/LsEcZ7CR3mf1vzBpCRgN7m/Design-Foundation_VD?type=design&node-id=4141-85886&mode=dev" target="_blank">here!</a></p><p>
+                </p>`,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: CascaderSizes,
+    },
+  },
+};
+
+export const Template: StoryFn = (args: any) => ({
+  components: { MaCascader },
+  setup() {
+    const value = ref(args?.value || []);
+    return { args, value };
+  },
+  template: `<div class="min-h-[20rem]"><ma-cascader v-bind="args" v-model:value="value" class="w-52" /></div>`,
+});
+
+export const TemplateOptionSlot: StoryFn = (args: any) => ({
+  components: { MaCascader, MaIcon },
+  setup() {
+    const value = ref(args?.value || []);
+    return { args, value };
+  },
+  template: `<div class="min-h-[20rem]">
+        <ma-cascader v-bind="args" v-model:value="value" class="w-52">
+            <template v-slot:option="{ option }">
+                <div class="truncate flex items-center gap-2">
+                    <ma-icon name="arcade-bulk" size="xs" class="flex-none" />
+                    {{ option.label }}
+                    <ma-icon name="arcade-bulk" size="xs" class="flex-none" />
+                </div>
+            </template>
+        </ma-cascader>
+    </div>`,
+});
+
+export const TemplateCustomInputLabel: StoryFn = (args: any) => ({
+  components: { MaCascader, MaIcon },
+  setup() {
+    const value = ref(args?.value || []);
+    return { args, value };
+  },
+  template: `<div class="min-h-[20rem]">
+        <ma-cascader v-bind="args" v-model:value="value" class="w-52">
+            <template v-slot:customLabel="{ label }">
+                Custom Slot => {{ label }}
+            </template>
+        </ma-cascader>
+    </div>`,
+});
+
+export const TemplateOverflow: StoryFn = (args: any) => ({
+  components: { MaCascader, MaIcon },
+  setup() {
+    const value = ref(args?.value || []);
+    return { args, value };
+  },
+  template: `<div class="flex justify-end min-h-[20rem]">
+        <ma-cascader v-bind="args" v-model:value="value" class="w-52">
+            <template v-slot:customLabel="{ label }">
+                Custom Slot => {{ label }}
+            </template>
+        </ma-cascader>
+    </div>`,
+});

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

@@ -0,0 +1,161 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import {
+    Template,
+    TemplateOptionSlot,
+    TemplateCustomInputLabel,
+    TemplateOverflow,
+    baseConfig,
+} from './constants';
+import options from './options.json';
+
+import { MaCascader } from '@/index';
+
+const meta: Meta<typeof MaCascader> = {
+    title: 'Core/MaCascader',
+    ...baseConfig,
+};
+
+export default meta;
+
+export const Default: StoryFn = Template.bind({});
+Default.args = {
+    options,
+    open: true,
+    placeholder: 'Select an option...',
+    prefixIcon: 'search-normal',
+};
+
+export const Multiple: StoryFn = Template.bind({});
+Multiple.args = {
+    options,
+    multiple: true,
+    placeholder: 'Choose your options...',
+    prefixIcon: 'search-normal',
+    allowClear: true,
+};
+
+export const Medium: StoryFn = Template.bind({});
+Medium.args = {
+    options,
+    size: 'medium',
+    placeholder: 'Medium element',
+    prefixIcon: 'search-normal',
+};
+
+export const Large: StoryFn = Template.bind({});
+Large.args = {
+    options,
+    size: 'large',
+    placeholder: 'Large element',
+    prefixIcon: 'search-normal',
+};
+
+export const Disabled: StoryFn = Template.bind({});
+Disabled.args = {
+    options,
+    disabled: true,
+    value: ['apps', 'social', 'messaging'],
+    prefixIcon: 'search-normal',
+};
+
+export const HasError: StoryFn = Template.bind({});
+HasError.args = {
+    options,
+    hasError: true,
+    placeholder: 'Has error',
+    prefixIcon: 'search-normal',
+};
+
+export const AllowClear: StoryFn = Template.bind({});
+AllowClear.args = {
+    options,
+    value: ['apps', 'social', 'messaging'],
+    allowClear: true,
+    prefixIcon: 'search-normal',
+    placeholder: 'Allow clear',
+};
+
+export const WithOptionIcon: StoryFn = Template.bind({});
+WithOptionIcon.args = {
+    multiple: true,
+    placeholder: 'with icon',
+    prefixIcon: 'search-normal',
+    options: [
+        {
+            label: 'Apps',
+            value: 'apps',
+            icon: 'mobile',
+            children: [
+                {
+                    value: 'social',
+                    label: 'Social',
+                    icon: 'rank',
+                    children: [
+                        {
+                            icon: 'message',
+                            value: 'messaging',
+                            label: 'Messaging',
+                        },
+                        {
+                            icon: 'play',
+                            value: 'media-sharing',
+                            label: 'Media Sharing',
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            label: 'Games',
+            value: 'games',
+            icon: 'arcade-bulk',
+            children: [
+                {
+                    value: 'productivity',
+                    label: 'Productivity',
+                    icon: 'bullhorn',
+                },
+                {
+                    value: 'lifestyle',
+                    label: 'Life Style',
+                    icon: 'bookmark',
+                },
+                {
+                    value: 'sport',
+                    label: 'Sport',
+                    icon: 'soccer-bulk',
+                },
+            ],
+        },
+    ],
+};
+
+export const CustomOptionSlot: StoryFn = TemplateOptionSlot.bind({});
+CustomOptionSlot.args = {
+    options,
+    placeholder: 'custom option slot...',
+    prefixIcon: 'search-normal',
+};
+
+export const CustomOptionSlotMultiple: StoryFn = TemplateOptionSlot.bind({});
+CustomOptionSlotMultiple.args = {
+    options,
+    multiple: true,
+    placeholder: 'custom option slot...',
+    prefixIcon: 'search-normal',
+};
+
+export const CustomInputLabel: StoryFn = TemplateCustomInputLabel.bind({});
+CustomInputLabel.args = {
+    options,
+    placeholder: 'custom option slot...',
+    prefixIcon: 'search-normal',
+    value: ['apps', 'social', 'messaging'],
+};
+
+export const Overflow: StoryFn = TemplateOverflow.bind({});
+Overflow.args = {
+    options,
+    placeholder: 'can be tested in fullscreen',
+    prefixIcon: 'search-normal',
+};

package/src/components/cascader/stories/options.json

@@ -0,0 +1,80 @@
+[
+  {
+    "label": "Apps",
+    "value": "apps",
+    "children": [
+      {
+        "value": "social",
+        "label": "Social",
+        "children": [
+          {
+            "value": "messaging",
+            "label": "Messaging"
+          },
+          {
+            "value": "media-sharing",
+            "label": "Media Sharing"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "label": "Games",
+    "value": "games",
+    "children": [
+      {
+        "value": "productivity",
+        "label": "Productivity",
+        "children": [
+          {
+            "value": "office-tools",
+            "label": "Office Tools"
+          },
+          {
+            "value": "personal-management",
+            "label": "Personal Management"
+          }
+        ]
+      },
+      {
+        "value": "entertainment",
+        "label": "Entertainment",
+        "children": [
+          {
+            "value": "streaming",
+            "label": "Streaming"
+          },
+          {
+            "value": "music",
+            "label": "Music"
+          }
+        ]
+      },
+      {
+        "value": "lifestyle",
+        "label": "Lifestyle",
+        "children": [
+          {
+            "value": "fitness",
+            "label": "Fitness",
+            "children": [
+              {
+                "value": "gym",
+                "label": "Gym"
+              },
+              {
+                "value": "home",
+                "label": "Home"
+              }
+            ]
+          },
+          {
+            "value": "travel",
+            "label": "Travel"
+          }
+        ]
+      }
+    ]
+  }
+]

package/src/components/cascader/types.ts

@@ -0,0 +1,17 @@
+export declare type SingleValueType = (string | number)[];
+export declare type CascaderValue = SingleValueType | SingleValueType[];
+
+export const CascaderSizes = [
+    "large",
+    "small",
+    "medium",
+] as const;
+
+export interface CascaderOptionType {
+    label: any;
+    value: string | number | null;
+    children?: CascaderOptionType[];
+    icon?: string;
+}
+
+export type CascaderSize = (typeof CascaderSizes)[number];

package/src/components/cascader/utils/index.test.ts

@@ -0,0 +1,56 @@
+import { existsInArray, extractAllValuesWithPath, findLabels } from "./index";
+import { CascaderOptionType, SingleValueType } from "../types";
+import { describe, expect, it, test } from "vitest";
+import options from '../stories/options.json';
+
+describe("extractAllValuesWithPath", () => {
+    test("correctly extracts paths from nested structures", () => {
+        const input: CascaderOptionType = {
+            label: "root",
+            value: "root",
+            children: [
+                { value: "child1", label: "child1", children: [{ value: "subchild1", label: "subchild1" }] },
+                { value: "child2", label: "child2" }
+            ]
+        };
+        const expectedOutput = [
+            ["root", "child1", "subchild1"],
+            ["root", "child2"]
+        ];
+        expect(extractAllValuesWithPath(input)).toEqual(expectedOutput);
+    });
+});
+
+describe('existsInArray', () => {
+    it('should return true if any array in needle exists in the haystack', () => {
+        const haystack = [[1, 2], [3, 4], [5, 6]];
+        const needle = [[3, 4], [7, 8]];
+        expect(existsInArray(haystack, needle)).toBe(true);
+    });
+
+    it('should return false if no array in needle exists in the haystack', () => {
+        const haystack = [[1, 2], [3, 4], [5, 6]];
+        const needle = [[7, 8], [9, 10]];
+        expect(existsInArray(haystack, needle)).toBe(false);
+    });
+});
+
+describe('findLabels', () => {
+    it('returns labels for given values', () => {
+        const values: SingleValueType = [options[0].value, options[0].children[0].value, options[0].children[0].children[0].value];
+        const labels = findLabels(values, options);
+        expect(labels).toEqual([options[0].label, options[0].children[0].label, options[0].children[0].children[0].label]);
+    });
+
+    it('returns empty array when no matches are found', () => {
+        const values: SingleValueType = ["non-existent"];
+        const labels = findLabels(values, options);
+        expect(labels).toEqual([]);
+    });
+
+    it('ignores undefined results for non-existent values', () => {
+        const values: SingleValueType = ["apps", "undefined-value"];
+        const labels = findLabels(values, options);
+        expect(labels).toEqual(["Apps"]);
+    });
+});

package/src/components/cascader/utils/index.ts

@@ -0,0 +1,66 @@
+import isEqual from 'lodash/isEqual';
+import { CascaderOptionType, SingleValueType } from '../types';
+
+/**
+ * Recursively extracts all paths from a nested structure of CascaderOptionType objects.
+ * Each path is an array of 'value' properties, representing a navigation route
+ * through the nested objects.
+ *
+ * @param option The root node of the cascader option type structure from which to begin extraction.
+ * @returns An array containing all possible paths, each represented as an array of values.
+ */
+export const extractAllValuesWithPath = (option: CascaderOptionType): Array<SingleValueType> => {
+    const results: Array<SingleValueType> = [];
+    const recurse = (currentOpt: CascaderOptionType, path: SingleValueType) => {
+        const currentPath = [...path, currentOpt.value];
+        if (currentOpt.children) {
+            currentOpt.children.forEach(child => recurse(child, currentPath));
+        } else {
+            results.push(currentPath);
+        }
+    };
+    recurse(option, []);
+    return results;
+};
+
+/**
+ * Checks if any of the arrays in the `haystack` exactly match any array in `needle`.
+ * @param {Array<SingleValueType>} haystack The array to search within.
+ * @param {Array<SingleValueType>} needle Arrays to search for.
+ * @returns {boolean} True if any array in `needle` is found in `haystack`, otherwise false.
+ */
+export const existsInArray = (haystack: SingleValueType[], needle: Array<SingleValueType>): boolean =>
+    needle.some(needleItem => haystack.some(haystackItem => isEqual(haystackItem, needleItem)));
+
+
+/**
+ * Recursively finds labels matching the given values within the provided options.
+ *
+ * @param {SingleValueType} values - A single value array of values to find labels for.
+ * @param {CascaderOptionType[]} options - An array of options with potential nested children to search through.
+ * @returns {string[]} An array of found labels.
+ */
+export const findLabels = (values: SingleValueType, options: CascaderOptionType[]): string[] => {
+    const resultLabels: string[] = [];
+
+    function searchLabel(value: string | number, options: CascaderOptionType[]): string {
+        for (const option of options) {
+            if (option.value === value) {
+                return option.label;
+            }
+            if (option.children) {
+                const foundLabel = searchLabel(value, option.children);
+                if (foundLabel) return foundLabel;
+            }
+        }
+    }
+
+    values.forEach(value => {
+        const label = searchLabel(value, options);
+        if (label) resultLabels.push(label);
+    });
+
+    return resultLabels;
+};
+
+

package/src/components/checkbox/group.vue

@@ -0,0 +1,64 @@
+<script lang="ts">
+export default {
+    name: 'MaCheckboxGroup',
+};
+</script>
+<script lang="ts" setup>
+import { type CheckboxGroupProps, CheckboxGroup } from 'ant-design-vue';
+import { MaCheckboxSize } from './types';
+import { computed, useAttrs } from 'vue';
+
+export interface MaCheckboxGroupProps extends CheckboxGroupProps {
+    hint?: string;
+    disabled?: boolean;
+    size?: MaCheckboxSize;
+    reverse?: boolean;
+}
+const props = withDefaults(defineProps<MaCheckboxGroupProps>(), {
+    size: 'md',
+});
+const attrs = useAttrs();
+
+const classNames = computed(() => [
+    'ak-checkbox-group',
+    'ma-checkbox-group',
+    `ak-checkbox--${props.size}`,
+    {
+        'ak-checkbox--reverse': props?.reverse,
+    },
+]);
+
+const bindings = computed(() => ({ ...attrs, ...props } as unknown as CheckboxGroupProps));
+
+</script>
+<template>
+  <CheckboxGroup
+    v-bind="bindings"
+    :class="classNames"
+    prefix-cls="antd-checkbox"
+  >
+    <template
+      v-for="(_, slot) in $slots"
+      #[slot]
+    >
+      <slot :name="slot" />
+      <div
+        v-if="props.hint"
+        :key="slot"
+        class="ak-checkbox__hint-text"
+      >
+        {{ props.hint }}
+      </div>
+    </template>
+    <template
+      v-if="$slots.label"
+      #label="scope"
+    >
+      <slot
+        name="label"
+        v-bind="scope"
+      />
+    </template>
+  </CheckboxGroup>
+</template>
+<style lang="scss" src="./styles.scss"></style>

package/src/components/checkbox/index.vue

@@ -0,0 +1,58 @@
+<script lang="ts">
+export default {
+    name: 'MaCheckbox',
+};
+</script>
+<script lang="ts" setup>
+import { computed, useAttrs } from 'vue';
+import { Checkbox, type CheckboxProps } from 'ant-design-vue';
+import { MaCheckboxSize } from './types';
+
+export interface MaCheckboxProps extends CheckboxProps {
+  hint?: string;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  size?: MaCheckboxSize;
+}
+const props = withDefaults(defineProps<MaCheckboxProps>(), {
+    indeterminate: undefined,
+    size: 'md',
+});
+const attrs = useAttrs();
+
+const classNames = computed(() => [
+    'ma-checkbox',
+    'ak-checkbox',
+    `ak-checkbox--${props.size}`,
+    {
+        'ak-checkbox--intermediate': typeof props?.indeterminate === 'boolean',
+    },
+]);
+
+const bindings = computed(() => ({ ...attrs, ...props } as unknown as MaCheckboxProps));
+
+</script>
+<template>
+  <Checkbox
+    v-bind="bindings"
+    :class="classNames"
+    :disabled="props?.disabled"
+    :indeterminate="props?.indeterminate"
+    prefix-cls="antd-checkbox"
+  >
+    <template
+      v-for="(_, slot) in $slots"
+      #[slot]
+    >
+      <slot :name="slot" />
+      <div
+        v-if="props.hint"
+        :key="slot"
+        class="ak-checkbox__hint-text"
+      >
+        {{ props.hint }}
+      </div>
+    </template>
+  </Checkbox>
+</template>
+<style lang="scss" src="./styles.scss"></style>