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

package/src/components/tabs-2/types.ts

@@ -0,0 +1,106 @@
+import { VNode } from 'vue';
+
+export const MaTabsTypes = [
+    'rounded',
+    'rounded-dark',
+    'line',
+] as const;
+
+export const MaTabsSizes = [
+    'small',
+    'medium',
+] as const;
+
+export const MaTabPanePlacements = [
+    'left',
+    'right',
+] as const;
+
+export type MaTabsType = (typeof MaTabsTypes)[number];
+export type MaTabsSize = (typeof MaTabsSizes)[number];
+export type MaTabPanePlacement = (typeof MaTabPanePlacements)[number];
+
+export interface MaTabsProps {
+  /**
+  * Basic style of tabs
+  */
+  type?: MaTabsType;
+
+  /**
+  * Current Tab's key
+  */
+  activeKey: string;
+
+  /**
+  * Preset tab button size
+  */
+  size?: MaTabsSize;
+
+  /**
+  * The status of the left and right buttons of the content scroller being always visible
+  * @default false
+  */
+  alwaysShowScrollerButtons?: boolean;
+}
+
+export interface MaTabPaneProps {
+  /**
+  * TabPane's key
+  */
+  tabKey?: string;
+
+  /**
+  * title of the tab button
+  */
+  title?: string;
+
+  /**
+  * badge text of the tab button
+  */
+  badgeText?: string;
+
+  /**
+  * app icon of the tab button
+  */
+  appIcon?: string;
+
+  /**
+  * regular icon of the tab
+  */
+  icon?: string;
+
+  /**
+  * Disabled a tab.
+  */
+  disabled?: boolean;
+
+  /**
+  * regular icon placement
+  */
+  iconPlacement?: string;
+}
+
+export interface MaTabButtonProps extends MaTabPaneProps {
+  /**
+  * Preset tab button size
+  */
+  size?: MaTabsSize;
+
+  /**
+  * active state
+  */
+  isActive?: boolean;
+
+  /**
+  * Basic style of tabs
+  */
+  type?: MaTabsType;
+}
+
+
+export interface ChildTabComponent {
+  props: MaTabPaneProps;
+  slots: {
+    [name: string]: (() => VNode[]) | undefined;
+  };
+}

package/src/components/tag-input/assets/styles.scss

@@ -0,0 +1,99 @@
+$sizes: (
+  "sm": (
+    "wrapper": "px-3 min-h-[2rem]",
+    "tag": "text-sm px-1 gap-1",
+    "input": "text-xs",
+    "icon": "w-2 h-2"
+  ),
+  "md": (
+    "wrapper": "px-3 py-[calc(0.5rem_-_1px)]",
+    "tag": "text-sm gap-2 px-2",
+    "input": "text-sm",
+    "icon": "w-2.5 h-2.5"
+  ),
+  "lg": (
+    "wrapper": "px-3 py-[calc(0.625rem_-_1px)]",
+    "tag": "text-sm gap-2 px-2 py-1",
+    "input": "text-sm",
+    "icon": "w-3 h-3"
+  )
+);
+
+.ma-tag-input-wrapper {
+  @apply flex items-center flex-nowrap gap-2 border-gray-300 border rounded-lg bg-white cursor-text transition-colors duration-300 font-euclid relative;
+  &:has(input:focus) {
+    @apply border-primary-jordy-blue;
+  }
+  .ma-tag-wrapper {
+    @apply flex flex-wrap gap-2 max-w-full;
+    .single-tag {
+      @apply flex items-center text-gray-900 bg-gray-100 rounded-md transition-colors duration-300 cursor-default font-medium max-w-full;
+      span {
+        @apply block whitespace-nowrap overflow-hidden text-ellipsis;
+      }
+      &:hover {
+        @apply bg-gray-200;
+      }
+      .ak-icon {
+        @apply w-2 h-2 text-gray-400 transition-colors duration-300 cursor-pointer flex-none;
+        &:hover {
+          @apply text-gray-600;
+        }
+      }
+    }
+  }
+  .ma-tag-input {
+    @apply flex-none max-w-full;
+    > input {
+      @apply outline-none w-full max-w-full min-w-[.5rem] text-sm font-euclid font-medium text-gray-900 whitespace-nowrap text-ellipsis;
+      &::placeholder {
+        @apply font-normal whitespace-nowrap text-ellipsis;
+      }
+    }
+  }
+  .ma-tag-input-prefix,
+  .ma-tag-input-suffix {
+    @apply text-gray-400;
+  }
+  .ma-tag-input-suffix {
+    @apply ml-auto;
+  }
+  &.has-prefix,
+  &.has-suffix {
+    .ma-tag-wrapper {
+      @apply max-w-[calc(100%_-_1.5rem)];
+    }
+  }
+  &.has-prefix.has-suffix {
+    .ma-tag-wrapper {
+      @apply max-w-[calc(100%_-_3rem)];
+    }
+  }
+  &--disabled {
+    @apply bg-gray-100 border-gray-300 cursor-not-allowed;
+    .ma-tag-wrapper {
+      @apply cursor-not-allowed;
+      .ak-icon {
+        @apply cursor-not-allowed;
+      }
+    }
+  }
+  @each $size, $value in $sizes {
+    &--#{$size} {
+      @apply #{map-get($value, 'wrapper')};
+      .ma-tag-wrapper {
+        .single-tag {
+          @apply #{map-get($value, 'tag')};
+        }
+        .ak-icon {
+          @apply #{map-get($value, 'icon')};
+        }
+      }
+      .ma-tag-input {
+        > input {
+          @apply #{map-get($value, 'input')};
+        }
+      }
+    }
+  }
+}

package/src/components/tag-input/index.vue

@@ -0,0 +1,185 @@
+<script lang="ts">
+export default {
+  name: 'MaTagInput',
+};
+</script>
+<script setup lang="ts">
+import { ref, WritableComputedRef, computed, useSlots } from "vue";
+import { MaTagInputSize } from "./types";
+import { MaIcon } from "@/index";
+
+export interface MaTagInputProps {
+    tags?: string[],
+    placeholder?: string,
+    separator?: string[],
+    size?: MaTagInputSize,
+    disabled?: boolean,
+    prefixIcon?: string,
+    suffixIcon?: string,
+    tagCharLimit?: number,
+}
+
+const props = withDefaults(defineProps<MaTagInputProps>(), {
+    separator: () => ['Enter', ','],
+    tags: () => [] as string[],
+    size: 'md',
+    disabled: false,
+    placeholder: '',
+});
+
+const emits = defineEmits(["update:tags", "change", "added", "removed", "error"]);
+
+const slots = useSlots();
+
+const inputValue = ref('');
+const tagInputRef = ref(null);
+
+const value: WritableComputedRef<string[]> = computed({
+    get(){
+        return props.tags
+    },
+    set(data) {
+        emits("update:tags", data);
+        emits("change", data);
+    }
+});
+
+const hasPrefix = computed(() => slots.prefix || props?.prefixIcon);
+const hasSuffix = computed(() => slots.suffix || props?.suffixIcon);
+
+const classNames = computed(() => [
+    'ma-tag-input-wrapper',
+    `ma-tag-input-wrapper--${props.size}`,
+    {
+        'ma-tag-input-wrapper--disabled': props.disabled
+    },
+    {
+        'has-prefix': hasPrefix.value
+    },
+    {
+        'has-suffix': hasSuffix.value
+    },
+]);
+
+const inputMinCharLength = computed(() =>
+    inputValue.value.length > activePlaceholder.value.length? inputValue.value.length: activePlaceholder.value.length
+);
+
+const tagInputStyle = computed(() => ({
+    width: `${(inputMinCharLength.value * 8.2) + 6}px`
+}));
+
+const activePlaceholder = computed( () =>
+    props?.placeholder && value.value.length === 0? props.placeholder: ''
+);
+
+const handleKeyDown = (e: KeyboardEvent) => {
+    if(props.separator.includes(e.key)) {
+        e.preventDefault();
+        addTag(inputValue.value);
+    } else if (e.key === 'Backspace' && inputValue.value === '' && value.value.length > 0) {
+        removeTag(value.value[value.value.length - 1]);
+    } else if (props?.tagCharLimit && props.tagCharLimit <= inputValue.value.length && e.key !== 'Backspace') {
+        e.preventDefault();
+    }
+};
+
+const addTag = (tag: string = "") => {
+    const text = tag.trim();
+    if(!text) {
+        return setError("There is no text to add!");
+    } else if(value.value.includes(text)) {
+        return setError(`This tag already exists '${text}'`);
+    } else if(props?.tagCharLimit && tag.length > props.tagCharLimit) {
+        return setError(`You can enter tags up to ${props.tagCharLimit} characters`);
+    }
+
+    value.value.push(text);
+    emits("added", text);
+    emits("change", value.value);
+    inputValue.value = '';
+
+};
+
+const removeTag = (tag: string) => {
+    if(props.disabled) {
+        return;
+    }
+  const index = value.value.indexOf(tag);
+  if (index !== -1) {
+    value.value.splice(index, 1);
+    emits("removed", tag);
+    emits("change", value.value);
+  }
+};
+
+const handleOverallClick = () => {
+    tagInputRef.value.focus();
+}
+
+const handlePaste = (e: ClipboardEvent) => {
+    setTimeout(() => {
+        const text = (e.target as HTMLInputElement).value || "";
+        let tagList = [text];
+        for (const separator of props.separator) {
+            tagList = tagList.flatMap(tag => tag.split(separator));
+        }
+        tagList.forEach((tag: string) => {
+            addTag(tag);
+        });
+    }, 0);
+}
+
+const setError = (msg: string) => {
+    emits("error", msg);
+};
+
+</script>
+<template>
+    <div :class="classNames" @click="handleOverallClick">
+        <div
+            class="ma-tag-input-prefix"
+            v-if="hasPrefix"
+        >
+            <slot name="prefix"></slot>
+            <ma-icon
+                size="xs"
+                :name="props.prefixIcon"
+                v-if="props.prefixIcon"
+            />
+        </div>
+        <div class="ma-tag-wrapper">
+            <span class="single-tag" v-for="tag in tags" :key="tag">
+                <span>{{ tag }}</span>
+                <ma-icon
+                    size="xs"
+                    @click="removeTag(tag)"
+                    name="close"
+                />
+            </span>
+            <div
+                class="ma-tag-input"
+                :style="tagInputStyle"
+            >
+                <input
+                    :disabled="props.disabled"
+                    ref="tagInputRef"
+                    :placeholder="activePlaceholder"
+                    :maxlength="props?.tagCharLimit"
+                    @keydown="handleKeyDown"
+                    @paste="handlePaste"
+                    v-model="inputValue"
+                />
+            </div>
+        </div>
+        <div class="ma-tag-input-suffix" v-if="hasSuffix">
+            <slot name="suffix"></slot>
+            <ma-icon
+                size="xs"
+                :name="props.suffixIcon"
+                v-if="props.suffixIcon"
+            />
+        </div>
+      </div>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

package/src/components/tag-input/stories/constants.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+
+import { MaTagInputSizes } from "../types";
+import { MaTagInput } from '@/index';
+import Icons from "@/components/icon/icons.json";
+
+export const baseConfig: Meta<typeof MaTagInput> = {
+    component: MaTagInput,
+    parameters: {
+        docs: {
+            description: {
+                component: `<p>MaTagInput is a tag component that allows users to input multiple tags, separated by a specific character.</p>`,
+            },
+        },
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: MaTagInputSizes,
+        },
+        prefixIcon: {
+            control: { type: 'select' },
+            options: Icons,
+        },
+        suffixIcon: {
+            control: { type: 'select' },
+            options: Icons,
+        },
+        tags: {
+            description: '(v-model:tags) An array of strings that represent the tags added by the user. Use the v-model:tags to bind and sync the list of tags.'
+        },
+        separator: {
+            description: "An array includes strings that represent the key in JavaScript's KeyboardEvent key property, which will be used to detect when the user intends to add a tag. By default, this is set to ['Enter', ',']"
+        },
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaTagInput },
+    setup() {
+        const handleUpdate = (data: string[]) => {
+            args.tags = data;
+        }
+        const handleError = (e: string) => {
+            console.error(e);
+        }
+        return { args, handleUpdate, handleError };
+    },
+    template: `<ma-tag-input @error="handleError" @update:tags="handleUpdate" v-bind="args" />`,
+});

package/src/components/tag-input/stories/default.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { baseConfig, Template } from './constants';
+
+import type MaTagInput from '../index.vue';
+
+const meta: Meta<typeof MaTagInput> = {
+  title: 'Advanced/MaTagInput',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaTagInput>;
+
+export const Default: Story = Template.bind({});
+Default.args = {
+  tags: ['free music', 'playlist', 'streaming'],
+  placeholder: 'Add a tag!',
+  prefixIcon: 'search-normal',
+};
+
+export const CustomSeparatorHyphen: Story = Template.bind({});
+CustomSeparatorHyphen.args = {
+  tags: ['free music', 'playlist', 'streaming'],
+  placeholder: 'Add a tag...',
+  separator: ['-'],
+};
+
+export const Disabled: Story = Template.bind({});
+Disabled.args = {
+  tags: ['free music', 'playlist', 'streaming'],
+  disabled: true,
+};
+
+export const Small: Story = Template.bind({});
+Small.args = {
+  tags: ['free music', 'playlist', 'streaming'],
+  size: 'sm',
+};
+
+export const Medium: Story = Template.bind({});
+Medium.args = {
+  tags: ['free music', 'playlist', 'streaming'],
+  size: 'md',
+};
+
+export const Large: Story = Template.bind({});
+Large.args = {
+  tags: ['free music', 'playlist', 'streaming'],
+  size: 'lg',
+};
+
+export const PrefixIcon: Story = Template.bind({});
+PrefixIcon.args = {
+  tags: ['free music', 'playlist', 'streaming'],
+  prefixIcon: 'search-normal',
+};
+
+export const SuffixIcon: Story = Template.bind({});
+SuffixIcon.args = {
+  tags: ['free music', 'playlist', 'streaming'],
+  suffixIcon: 'search-normal',
+};
+
+export const PrefixAndSuffixIcon: Story = Template.bind({});
+PrefixAndSuffixIcon.args = {
+  tags: ['free music', 'playlist', 'streaming'],
+  prefixIcon: 'search-normal',
+  suffixIcon: 'chevron-down',
+};
+
+export const TagCharacterLimit: Story = Template.bind({});
+TagCharacterLimit.args = {
+  tags: [],
+  tagCharLimit: 5,
+};

package/src/components/tag-input/types.ts

@@ -0,0 +1,3 @@
+export const MaTagInputSizes = ["sm", "md", "lg"] as const;
+
+export type MaTagInputSize = (typeof MaTagInputSizes)[number];

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

@@ -0,0 +1,122 @@
+.ma-toggle {
+  @apply flex flex-wrap font-euclid;
+
+  .antd-switch {
+    @apply text-[10px] leading-4 relative inline-block box-border min-w-[44px] h-6 align-middle bg-gray-200 cursor-pointer transition-all duration-[0.2s] select-none m-0 rounded-xl border-0 focus:shadow-[0_0_0_2px_rgba(0,0,0,0.1)] focus:hover:shadow-none;
+    font-variant: tabular-nums;
+    list-style: none;
+    font-feature-settings: "tnum";
+    -webkit-user-select: none;
+    -moz-user-select: none;
+  }
+  .antd-switch:focus {
+    outline: 0;
+  }
+  .antd-switch .antd-switch-handle::before {
+    @apply rounded-full;
+  }
+  .antd-switch:not(.antd-switch-disabled):active .antd-switch-handle::before {
+    @apply right-[-10%] left-0 shadow-[0px_12px_16px_-4px_rgba(16,24,40,0.08),0px_4px_6px_-2px_rgba(16,24,40,0.03)];
+  }
+  .antd-switch:not(.antd-switch-disabled):active.antd-switch-checked .antd-switch-handle::before {
+    @apply left-[-10%] right-0;
+  }
+  .antd-switch-checked {
+    @apply bg-primary-green focus:shadow-[0_0_0_2px_#e6f7ff];
+    .antd-switch-inner {
+      @apply text-white;
+    }
+  }
+  .antd-switch-checked .antd-switch-inner {
+    @apply ml-1 mr-[27px] my-0;
+  }
+  .antd-switch-checked .antd-switch-handle {
+    @apply left-[calc(100%_-_20px_-_3px)];
+  }
+  .antd-switch-checked .antd-switch-loading-icon {
+    @apply text-primary-green;
+  }
+  .antd-switch-loading,
+  .antd-switch-disabled {
+    @apply cursor-not-allowed bg-gray-300;
+    .antd-switch-inner {
+      @apply text-gray-400;
+    }
+  }
+  .antd-switch-loading *,
+  .antd-switch-disabled * {
+    @apply shadow-none cursor-not-allowed;
+  }
+  .antd-switch-inner {
+    @apply block text-gray-400 text-[10px] font-medium transition-[margin] duration-[0.2s] ml-[28px] mr-1 my-0;
+  }
+  .antd-switch-handle {
+    @apply absolute w-5 h-5 transition-all duration-[0.2s] ease-[ease-in-out] left-[3px] top-0.5 before:absolute before:bg-white before:shadow-[0_2px_4px_0_rgba(0,35,11,0.2)] before:transition-all before:duration-[0.2s] before:ease-[ease-in-out] before:content-[""] before:rounded-[9px] before:inset-0;
+  }
+  .antd-switch-loading-icon.anticon {
+    @apply relative text-[rgba(0,0,0,0.65)] align-top  top-[5px];
+  }
+
+  &--small {
+    .ma-toggle__switch {
+      @apply min-w-[36px] min-w-[36px] h-5;
+      .antd-switch-inner {
+        @apply text-[10px] mr-1 ml-[22px];
+      }
+      .antd-switch-handle {
+        @apply w-4 h-4;
+      }
+      .antd-switch-loading-icon {
+        @apply text-[8px] top-[4px];
+      }
+      &.antd-switch-checked .antd-switch-inner {
+        @apply ml-1 mr-[22px];
+      }
+      &.antd-switch-checked .antd-switch-handle {
+        @apply left-[calc(100%_-_16px_-_2px)];
+      }
+    }
+  }
+
+  &--large {
+    .ma-toggle__switch {
+      @apply min-w-[48px] h-[26px];
+      .antd-switch-handle {
+        @apply top-[3px] left-1;
+      }
+      .antd-switch-inner {
+        @apply text-[10px] ml-[26px] mr-[4px];
+      }
+      .antd-switch-loading-icon {
+        @apply text-base top-[2px];
+      }
+      &.antd-switch-checked .antd-switch-inner {
+        @apply ml-1 mr-[26px] my-0;
+      }
+      &.antd-switch-checked .antd-switch-handle {
+        @apply left-[calc(100%_-_20px_-_4px)];
+      }
+    }
+  }
+
+  &__titles {
+    @apply ml-2;
+
+    span {
+      @apply block;
+    }
+    &__title {
+      @apply font-medium text-gray-900 text-sm leading-5;
+    }
+    &__sub-title {
+      @apply text-gray-600 text-xs leading-4;
+    }
+  }
+  &--disabled {
+    .ma-toggle__titles {
+      span {
+        @apply text-gray-400;
+      }
+    }
+  }
+}