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

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

@@ -0,0 +1,240 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { baseConfig } from './constants';
+import { reactive, ref } from 'vue';
+
+import MaForm from '../index.vue';
+import MaFormItem from '../../form-item/index.vue';
+import MaInput from '../../input/index.vue';
+import MaButton from '../../button/index.vue';
+import MaCheckbox from '../../checkbox/index.vue';
+import MaRadio from '../../radio/index.vue';
+import MaSelect from '../../select/index.vue';
+import MaNumericInput from '../../numeric-input/index.vue';
+import { Rule } from 'ant-design-vue/lib/form';
+import DumySelectOptions from '../../select/stories/options.json';
+
+const meta: Meta<typeof MaForm> = {
+    title: 'Core/MaForm',
+    ...baseConfig,
+};
+
+export default meta;
+
+export const LoginExample: StoryFn = (args: any) => ({
+    components: { MaForm, MaFormItem, MaInput, MaButton },
+    setup() {
+        const formState = reactive({
+            email: '',
+            password: '',
+        });
+
+        const waitSubmit = ref(false);
+
+        const onFinish = (values: any) => {
+            waitSubmit.value = true;
+            console.log('Success:', values);
+            setTimeout(() => {
+                waitSubmit.value = false;
+                formState.email = '';
+                formState.password = '';
+            }, 2000);
+        };
+
+        const onFinishFailed = (errorInfo: any) => {
+            console.log('Failed:', errorInfo);
+        };
+
+        return { args, formState, onFinish, onFinishFailed, waitSubmit };
+    },
+    template: `
+    <ma-form
+        class="w-96 flex flex-col gap-8"
+        layout="vertical"
+        :model="formState"
+        name="basic"
+        @finish="onFinish"
+        @finishFailed="onFinishFailed"
+    >
+        <ma-form-item
+            name="email"
+            :rules="[{ required: true, message: 'Please input your email!', trigger: 'blur' }, { type: 'email', trigger: 'blur' }]"
+        >
+            <ma-input
+                v-model:value="formState.email"
+                title="E-mail"
+                type="email"
+                size="large"
+                placeholder="ellen@mobileaction.co"
+                prefix-icon="message-text"
+            />
+        </ma-form-item>
+
+        <ma-form-item
+        name="password"
+        :rules="[{ required: true, message: 'Please input your password!' }, {min: 8}]"
+        >
+            <ma-input
+                v-model:value="formState.password"
+                placeholder="Set a strong password"
+                title="Password"
+                type="password"
+                size="large"
+                hintText="At least 8 characters, one upper, one lower character "
+            />
+        </ma-form-item>
+
+        <ma-form-item>
+            <ma-button
+                :loading="waitSubmit"
+                class="w-full mt-4"
+                html-type="submit"
+                size="medium"
+            >
+                Create a free account
+            </ma-button>
+        </ma-form-item>
+    </ma-form>
+  `,
+});
+
+export const AllInputs: StoryFn = (args: any) => ({
+    components: {
+        MaForm,
+        MaFormItem,
+        MaInput,
+        MaButton,
+        MaCheckbox,
+        MaRadio,
+        MaSelect,
+        MaNumericInput,
+    },
+    setup() {
+        const formState = reactive({
+            input: '',
+            checkbox: false,
+            radio: false,
+            select: '',
+            numericInput: '',
+            textarea: '',
+        });
+
+        const onFinish = (values: any) => {
+            console.log('Success:', values);
+        };
+
+        const onFinishFailed = (errorInfo: any) => {
+            console.log('Failed:', errorInfo);
+        };
+
+        const validateCheckbox = async (_rule: Rule, value: boolean) => {
+            if (value) {
+                return Promise.resolve();
+            }
+            return Promise.reject();
+        };
+
+        return {
+            args,
+            formState,
+            onFinish,
+            onFinishFailed,
+            validateCheckbox,
+            DumySelectOptions,
+        };
+    },
+    template: `
+    <ma-form
+        class="w-96"
+        :model="formState"
+        name="inputs"
+        @finish="onFinish"
+        @finishFailed="onFinishFailed"
+    >
+        <ma-form-item
+            name="input"
+            :rules="[{ required: true, trigger: 'change' }]"
+        >
+            <ma-input
+                placeholder="This is a placeholder..."
+                v-model:value="formState.input"
+            />
+        </ma-form-item>
+
+        <ma-form-item
+            name="numericInput"
+            :rules="[{ required: true }]"
+        >
+            <ma-numeric-input
+                v-model:value="formState.numericInput"
+                title="Input"
+            />
+        </ma-form-item>
+
+        <ma-form-item
+            name="checkbox"
+            :rules="[
+                {
+                    validator: validateCheckbox,
+                    message: 'you need to agree!',
+                    trigger: 'change'
+                }
+            ]"
+        >
+            <ma-checkbox
+                v-model:checked="formState.checkbox"
+            >
+                Checkbox
+            </ma-checkbox>
+        </ma-form-item>
+
+        <ma-form-item
+            name="radio"
+            :rules="[
+                {
+                    validator: validateCheckbox,
+                    message: 'you need to agree!'
+                }
+            ]"
+        >
+            <ma-radio
+                v-model:checked="formState.radio"
+            >
+                Radio
+            </ma-radio>
+        </ma-form-item>
+
+        <ma-form-item
+            name="select"
+            :rules="[{ required: true }]"
+        >
+            <ma-select
+                v-model:value="formState.select"
+                allowClear
+                :options="DumySelectOptions"
+            >
+                Radio
+            </ma-select>
+        </ma-form-item>
+
+        <ma-form-item
+            name="textarea"
+            :rules="[{ required: true, trigger: 'change' }]"
+        >
+            <ma-input
+                type="textarea"
+                placeholder="This is a placeholder..."
+                v-model:value="formState.input"
+            />
+        </ma-form-item>
+
+        <ma-form-item>
+            <ma-button
+                class="w-full mt-4"
+                html-type="submit"
+            >
+                Submit
+            </ma-button>
+        </ma-form-item>
+    </ma-form>
+  `,
+});

package/src/components/form/types.ts

@@ -0,0 +1,7 @@
+export const MaFormLayouts = [
+    "horizontal",
+    "vertical",
+    "inline"
+] as const;
+
+export type MaFormLayout = (typeof MaFormLayouts)[number];

package/src/components/form-item/index.vue

@@ -0,0 +1,20 @@
+<script lang="ts">
+export default {
+  name: 'MaFormItem',
+};
+</script>
+<script setup lang="ts">
+import { FormItem as AFormItem } from "ant-design-vue";
+
+</script>
+<template>
+    <a-form-item
+        v-bind="$attrs"
+        class="ma-form-item"
+        prefix-cls="antd-form"
+    >
+        <template v-for="(_, slot) in $slots" v-slot:[slot]>
+            <slot :name="slot" />
+        </template>
+    </a-form-item>
+</template>

package/src/components/icon/components/flagIcon.vue

@@ -0,0 +1,84 @@
+<script lang="ts">
+import { Ref, ref, computed, h, watch, PropType } from 'vue';
+import { IconSize, MaFlagIconRatio } from '../types';
+
+export interface MaFlagIconProps {
+  name?: string;
+  size?: IconSize;
+  ratio?: MaFlagIconRatio;
+}
+export default {
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+        size: {
+            type: String as PropType<IconSize>,
+            default: 'md'
+        },
+        ratio: {
+            type: String as PropType<MaFlagIconRatio>,
+            default: '4x3'
+        },
+    },
+
+    setup(props: MaFlagIconProps) {
+
+        const iconContent: Ref<string> = ref(null);
+
+        const iconName = computed(() => props.name.replace('flag-', ''));
+
+        const fetchSvg = async () => {
+            try {
+                const response = await fetch(`${import.meta.env.VITE_MA_CDN_FLAG_URL}/${props.ratio}/${iconName.value}.svg`);
+                iconContent.value = await response.text();
+            } catch (error) {
+                console.error('An error occurred while loading the SVG file:', error);
+            }
+        }
+
+        watch(
+            () => [props.name, props.ratio],
+            () => {
+                fetchSvg();
+            },
+        );
+
+        fetchSvg();
+
+        return {
+            iconContent
+        }
+    },
+
+    render({ iconContent, ratio }: { iconContent: string, ratio: MaFlagIconRatio }) {
+        if (!iconContent) {
+            return h('div')
+        }
+
+        const parser = new DOMParser();
+        const svgDoc = parser.parseFromString(iconContent, 'image/svg+xml');
+
+        if (!(svgDoc.documentElement instanceof SVGSVGElement)) {
+            console.error("Parsed content is not a valid SVG.");
+            return;
+        }
+        const svgElement: SVGSVGElement = svgDoc.documentElement;
+
+        const attrs = Array.from(svgElement.attributes).reduce<Record<string, string>>((acc, attr) => {
+            acc[attr.name] = attr.value;
+            return acc;
+        }, {});
+
+        if(ratio !== '1x1') {
+            attrs.class = "h-auto";
+        }
+
+        return h(svgElement.tagName, {
+            ...attrs,
+            innerHTML: svgElement.innerHTML
+        });
+    }
+}
+</script>

package/src/components/icon/components/maIcon.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, ref, watchEffect } from 'vue';
+import { type IconSize } from '../types';
+import { useUniqueIds } from "../composables/useUniqueIds";
+
+export interface MaIconProps {
+    name: string;
+    size?: IconSize;
+    spin?: boolean;
+}
+
+const props = withDefaults(defineProps<MaIconProps>(), {
+    size: 'md',
+});
+
+const { updateSVGIds } = useUniqueIds();
+
+
+const iconElement = ref();
+
+const subFolders = ['pay'];
+
+const icon = computed(() =>
+    defineAsyncComponent(
+        function () {
+            const folder = subFolders.find(folder => props.name.startsWith(`${folder}-`));
+            if(folder){
+                return import(`../icons/${folder}/${props.name.replace(`${folder}-`, '')}.svg`);
+            }
+            return import(`../icons/${props.name}.svg`);
+        }.bind({ name: props.name }),
+    ),
+);
+
+watchEffect(() => {
+    if (iconElement.value) {
+        const svgElement = iconElement.value.$el;
+        updateSVGIds(svgElement);
+    }
+
+});
+
+</script>
+
+<template>
+    <component :is="icon" ref="iconElement" />
+</template>

package/src/components/icon/composables/useUniqueIds.ts

@@ -0,0 +1,62 @@
+/**
+ * useUniqueIds Composable
+ *
+ * This composable provides a method to ensure that all `id` attributes within an SVG element are unique.
+ * This is crucial when using SVGs with gradients or patterns in a Single Page Application (SPA) where
+ * multiple instances of the same SVG might exist in the DOM at the same time. Duplicated `id` attributes
+ * can lead to incorrect referencing within the SVG, causing visual glitches.
+ *
+ * @returns {Object} An object containing the `updateSVGIds` method.
+ */
+
+const generateRandomID = (prefix = '') => {
+    return prefix + Array(2).fill(0).map(() => Math.random().toString(36).substr(2, 9)).join('-');
+};
+
+export const useUniqueIds = () => {
+    /**
+     * Update all 'id' attributes within the provided SVG element to be unique.
+     *
+     * @param {HTMLElement} svgElement - The SVG element whose ids need to be made unique.
+     */
+    const updateSVGIds = (svgElement: HTMLElement) => {
+        const elementsWithId = svgElement.querySelectorAll('[id]');
+
+        elementsWithId.forEach((element) => {
+            const oldId = element.id;
+            const newId = generateRandomID('id');
+            element.id = newId;
+
+            // Update IDs for fill and stroke attributes
+            const elementsUsingThisId = svgElement.querySelectorAll(`[fill="url(#${oldId})"], [stroke="url(#${oldId})"]`);
+            elementsUsingThisId.forEach((el) => {
+                if (el.hasAttribute('fill')) {
+                    el.setAttribute('fill', `url(#${newId})`);
+                }
+                if (el.hasAttribute('stroke')) {
+                    el.setAttribute('stroke', `url(#${newId})`);
+                }
+            });
+
+            // Search for all 'use' elements and update any matching IDs
+            const useElements = svgElement.querySelectorAll('use');
+            useElements.forEach((useElement: Element) => {
+                const hrefValue = useElement.getAttribute('xlink:href') || useElement.getAttribute('href');
+                if (hrefValue === `#${oldId}`) {
+                    if (useElement.hasAttribute('xlink:href')) {
+                        useElement.setAttribute('xlink:href', `#${newId}`);
+                    }
+                    if (useElement.hasAttribute('href')) {
+                        useElement.setAttribute('href', `#${newId}`);
+                    }
+                }
+            });
+        });
+    };
+
+
+
+    return {
+        updateSVGIds,
+    };
+};

package/src/components/icon/flags.json

@@ -0,0 +1,230 @@
+[
+  "ad",
+  "ae",
+  "af",
+  "ag",
+  "ai",
+  "al",
+  "am",
+  "ao",
+  "ar",
+  "as",
+  "at",
+  "au",
+  "aw",
+  "ax",
+  "az",
+  "ba",
+  "bb",
+  "bd",
+  "be",
+  "bf",
+  "bg",
+  "bh",
+  "bi",
+  "bj",
+  "bl",
+  "bm",
+  "bn",
+  "bo",
+  "bq",
+  "br",
+  "bs",
+  "bt",
+  "bw",
+  "by",
+  "bz",
+  "ca",
+  "cc",
+  "cd",
+  "cf",
+  "ch",
+  "ck",
+  "cl",
+  "cm",
+  "cn",
+  "co",
+  "cr",
+  "cu",
+  "cw",
+  "cx",
+  "cy",
+  "cz",
+  "de",
+  "dj",
+  "dk",
+  "dm",
+  "do",
+  "dz",
+  "ec",
+  "ee",
+  "eg",
+  "eh",
+  "er",
+  "es",
+  "et",
+  "fi",
+  "fj",
+  "fk",
+  "fm",
+  "fo",
+  "fr",
+  "ga",
+  "gb",
+  "gd",
+  "ge",
+  "gg",
+  "gh",
+  "gi",
+  "gl",
+  "gm",
+  "gn",
+  "gq",
+  "gr",
+  "gt",
+  "gu",
+  "gw",
+  "gy",
+  "hk",
+  "hn",
+  "hr",
+  "ht",
+  "hu",
+  "id",
+  "ie",
+  "il",
+  "im",
+  "in",
+  "io",
+  "iq",
+  "ir",
+  "is",
+  "it",
+  "je",
+  "jm",
+  "jo",
+  "jp",
+  "ke",
+  "kg",
+  "kh",
+  "ki",
+  "km",
+  "kn",
+  "kp",
+  "kr",
+  "kw",
+  "ky",
+  "kz",
+  "la",
+  "lb",
+  "lc",
+  "li",
+  "lk",
+  "lr",
+  "ls",
+  "lt",
+  "lu",
+  "lv",
+  "ly",
+  "ma",
+  "mc",
+  "md",
+  "me",
+  "mg",
+  "mh",
+  "mk",
+  "ml",
+  "mm",
+  "mn",
+  "mo",
+  "mp",
+  "mq",
+  "mr",
+  "ms",
+  "mt",
+  "mu",
+  "mv",
+  "mw",
+  "mx",
+  "my",
+  "mz",
+  "na",
+  "ne",
+  "nf",
+  "ng",
+  "ni",
+  "nl",
+  "no",
+  "np",
+  "nr",
+  "nu",
+  "nz",
+  "om",
+  "pa",
+  "pe",
+  "pf",
+  "pg",
+  "ph",
+  "pk",
+  "pl",
+  "pn",
+  "pr",
+  "ps",
+  "pt",
+  "pw",
+  "py",
+  "qa",
+  "ro",
+  "rs",
+  "ru",
+  "rw",
+  "sa",
+  "sb",
+  "sc",
+  "se",
+  "sg",
+  "si",
+  "sk",
+  "sl",
+  "sm",
+  "sn",
+  "so",
+  "sr",
+  "ss",
+  "st",
+  "sv",
+  "sx",
+  "sy",
+  "sz",
+  "tc",
+  "td",
+  "tg",
+  "th",
+  "tj",
+  "tk",
+  "tl",
+  "tm",
+  "tn",
+  "to",
+  "tr",
+  "tt",
+  "tv",
+  "tw",
+  "tz",
+  "ua",
+  "ug",
+  "us",
+  "uy",
+  "uz",
+  "vc",
+  "ve",
+  "vg",
+  "vi",
+  "vn",
+  "vu",
+  "ws",
+  "ye",
+  "za",
+  "zm",
+  "zw"
+]