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

package/src/components/slider/stories/example.mdx

@@ -0,0 +1,69 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Core/MaSlider/Examples" />
+
+## Single
+
+```bash
+import { MaSlider } from "@mobileaction/action-kit";
+const value = ref(20);
+
+<ma-slider
+    v-model:value="value"
+/>
+
+```
+
+## Range
+
+```bash
+import { MaSlider } from "@mobileaction/action-kit";
+const value = ref([20, 50]);
+
+<ma-slider
+    v-model:value="value"
+    range
+/>
+
+```
+
+## Slots
+
+\#mark
+
+```bash
+import { MaSlider } from "@mobileaction/action-kit";
+const value1 = ref(0);
+
+const marks = reactive({
+0: '0°C',
+26: '26°C',
+37: '37°C',
+100: {
+  style: {
+    color: '#f50',
+  },
+  label: '100°C',
+},
+});
+
+<ma-slider
+    v-model:value="value1"
+    dots
+    vertical
+    :marks="marks"
+    :min="0"
+    :max="1000"
+    included
+
+>
+      <template #mark="{ label, point }">
+        <template v-if="point === 100">
+          <strong>{{ label }}</strong>
+        </template>
+        <template v-else>{{ label }}</template>
+      </template>
+</ma-slider>
+
+
+```

package/src/components/slider/types.ts

@@ -0,0 +1,12 @@
+export const MaSliderPlacements = [
+    "bottomLeft",
+    "bottom",
+    "bottomRight",
+    "topLeft",
+    "top",
+    "topRight",
+    "right",
+    "left"
+] as const;
+
+export type MaSliderPlacement = (typeof MaSliderPlacements)[number];

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

@@ -0,0 +1,127 @@
+$colors: (
+  "dark": "primary-dark",
+  "jordy": "primary-jordy-blue",
+  "blue": "primary-dark-blue",
+  "orange": "primary-orange",
+  "grey": "gray-400"
+);
+
+.ma-spin {
+  @apply overflow-hidden font-euclid;
+  &__icon {
+    @apply mx-auto w-12 h-12 text-gray-200;
+  }
+  &--round {
+    .ma-spin__icon {
+      animation: spin1 1s ease-in infinite;
+    }
+  }
+
+  &--three-circles {
+    .ma-spin__icon {
+      > :nth-child(2) {
+        transform-origin: center;
+        animation: spin1 1s linear infinite;
+      }
+      > :nth-child(1),
+      > :nth-child(3) {
+        transform-origin: center;
+        animation: spin-1 1s linear infinite;
+      }
+    }
+  }
+  &-container {
+    @apply relative;
+    .ma-spin__overlay {
+      @apply absolute box-border flex flex-col items-center justify-center w-full h-full bg-white z-[11] bg-opacity-90;
+    }
+  }
+  .tip {
+    @apply mt-2 text-base text-center;
+  }
+  .ma-spin__overlay {
+    @apply text-center;
+    .custom-indicator {
+      @apply flex flex-col items-center justify-center;
+    }
+  }
+}
+
+@each $variant, $color in $colors {
+  .ma-spin--#{$variant} {
+    &.ma-spin--round,
+    &.ma-spin--three-circles {
+      .ma-spin__icon {
+        @apply text-#{$color};
+      }
+    }
+    .tip {
+      @apply text-#{$color};
+    }
+    &.ma-spin--dots {
+      .ma-spin__icon {
+        rect {
+          @for $i from 1 through 8 {
+            &:nth-child(#{$i}) {
+              animation: dotColorChange-#{$variant} 1s infinite;
+              animation-delay: 0.14s * ($i - 1);
+            }
+          }
+        }
+      }
+    }
+    &.ma-spin--three-dots {
+      .ma-spin__icon {
+        circle {
+          @for $i from 1 through 3 {
+            &:nth-child(#{$i}) {
+              animation:
+                dotColorChange-#{$variant} 1.7s infinite 0.56s * ($i - 1),
+                dotMove 1.7s infinite 0.56s * ($i - 1);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes dotMove {
+  0% {
+    transform: translateY(-8px);
+  }
+  50% {
+    transform: translateY(0px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+
+@mixin spin($direction) {
+  @keyframes spin#{$direction} {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate($direction * 360deg);
+    }
+  }
+}
+
+@each $variant, $color in $colors {
+  @keyframes dotColorChange-#{$variant} {
+    0% {
+      @apply fill-#{$color};
+    }
+    50% {
+      @apply fill-gray-200;
+    }
+    100% {
+      @apply fill-gray-200;
+    }
+  }
+}
+
+@include spin(1);
+@include spin(-1);

package/src/components/spin/index.vue

@@ -0,0 +1,55 @@
+<script lang="ts">
+export default {
+  name: 'MaSpin',
+};
+</script>
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import { MaSpinColor, MaSpinType } from './types';
+import MaIcon from "../icon/index.vue";
+
+export interface MaSpinProps {
+    type?: MaSpinType,
+    color?: MaSpinColor,
+    spinning?: boolean,
+    tip?: string,
+}
+
+const props = withDefaults(defineProps<MaSpinProps>(), {
+    type: 'round',
+    color: 'dark',
+    spinning: true,
+});
+
+const slots = useSlots();
+
+const spinClasses = computed(() => [
+    `ma-spin ma-spin--${props.type} ma-spin--${props.color}`,
+    {
+        'ma-spin-container': slots?.default
+    }
+]);
+
+const spinIconClasses = computed(() => [
+    'ma-spin__icon',
+]);
+
+const iconName = computed(() => `spin-${props.type}`);
+
+</script>
+<template>
+    <div :class="spinClasses" v-bind="$attrs">
+        <div class="ma-spin__overlay" v-if="props.spinning">
+            <div class="custom-indicator" v-if="$slots.indicator">
+                <slot name="indicator"></slot>
+            </div>
+            <ma-icon :class="spinIconClasses" :name="iconName" v-if="props.spinning && !$slots.indicator" />
+            <div class="tip" v-if="$slots?.tip || props?.tip">
+                {{ props?.tip }}
+                <slot name="tip"></slot>
+            </div>
+        </div>
+        <slot></slot>
+    </div>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

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

@@ -0,0 +1,70 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { MaSpinTypes, MaSpinColors } from "../types";
+
+import MaSpin from '../index.vue';
+import MaAlert from '../../alert/index.vue';
+import MaIcon from "../../icon/index.vue";
+
+export const baseConfig: Meta<typeof MaSpin> = {
+    component: MaSpin,
+    parameters: {
+        docs: {
+            description: {
+                component: `<p>Figma Designs <a href="https://www.figma.com/file/LsEcZ7CR3mf1vzBpCRgN7m/Design-Foundation_VD?type=design&node-id=590-72152&mode=dev" target="_blank">here!</a></p><p>
+                </p><p>When used as a container, the default slot is used for content.</p>`,
+            },
+        },
+    },
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: MaSpinTypes,
+        },
+        color: {
+            control: { type: 'select' },
+            options: MaSpinColors,
+        },
+        tip: {
+            control: { type: 'text' },
+        },
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaSpin },
+    setup() {
+        return { args };
+    },
+    template: `<ma-spin v-bind="args" />`,
+});
+
+export const TemplateContainer: StoryFn = (args: any) => ({
+    components: { MaSpin, MaAlert },
+    setup() {
+        return { args };
+    },
+    template: `<ma-spin v-bind="args">
+        <ma-alert message="Alert message title" description="Further details about the context of this alert."></ma-alert>
+        <p class="pt-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.        </p>
+    </ma-spin>`,
+});
+
+export const TemplateCustomIndicator: StoryFn = (args: any) => ({
+    components: { MaSpin, MaIcon },
+    setup() {
+        return { args };
+    },
+    template: `<ma-spin v-bind="args"><template #indicator><ma-icon name="loader" spin /></template></ma-spin>`,
+});
+
+export const TemplateContainerIndicator: StoryFn = (args: any) => ({
+    components: { MaSpin, MaAlert, MaIcon },
+    setup() {
+        return { args };
+    },
+    template: `<ma-spin v-bind="args">
+        <ma-alert message="Alert message title" description="Further details about the context of this alert."></ma-alert>
+        <p class="pt-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.        </p>
+        <template #indicator><ma-icon name="loader" spin /></template>
+    </ma-spin>`,
+});

package/src/components/spin/stories/container.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import {
+  baseConfig,
+  TemplateContainer,
+  TemplateContainerIndicator,
+} from './constants';
+
+import type MaSpin from '../index.vue';
+
+const meta: Meta<typeof MaSpin> = {
+  title: 'Core/MaSpin/Container',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaSpin>;
+
+export const Container: Story = TemplateContainer.bind({});
+Container.args = {};
+
+export const WithTip: Story = TemplateContainer.bind({});
+WithTip.args = {
+  tip: 'Loading...',
+};
+
+export const CustomIndicator: Story = TemplateContainerIndicator.bind({});
+CustomIndicator.args = {
+  tip: 'Loading...',
+};

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { baseConfig, Template, TemplateCustomIndicator } from './constants';
+
+import type MaSpin from '../index.vue';
+
+const meta: Meta<typeof MaSpin> = {
+  title: 'Core/MaSpin/Default',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaSpin>;
+
+export const Default: Story = Template.bind({});
+Default.args = {};
+
+export const WithTip: Story = Template.bind({});
+WithTip.args = {
+  tip: 'Loading...',
+};
+
+export const CustomIndicator: Story = TemplateCustomIndicator.bind({});
+CustomIndicator.args = {
+  tip: 'Loading...',
+};

package/src/components/spin/types.ts

@@ -0,0 +1,17 @@
+export const MaSpinTypes = [
+    "round",
+    "dots",
+    "three-circles",
+    "three-dots",
+] as const;
+
+export const MaSpinColors = [
+    "dark",
+    "jordy",
+    "blue",
+    "orange",
+    "grey",
+] as const;
+
+export type MaSpinType = (typeof MaSpinTypes)[number];
+export type MaSpinColor = (typeof MaSpinColors)[number];

package/src/components/step-items/assets/styles.scss

@@ -0,0 +1,57 @@
+.ak-step-items {
+  @apply font-euclid flex pb-1 flex-col gap-4;
+  .ak-step-item {
+    @apply flex cursor-pointer gap-2 items-start relative;
+    &:last-of-type {
+      @apply flex-none pb-0;
+    }
+
+    &__dot {
+      @apply font-medium text-xs w-6 h-6 flex items-center justify-center rounded-full bg-gray-200 text-gray-500 transition-colors duration-300 flex-none;
+    }
+
+    .title-wrapper {
+      @apply flex-grow;
+    }
+
+    .ak-step-item__title {
+      @apply text-gray-500 text-lg font-medium m-0 p-0 whitespace-nowrap;
+    }
+
+    .ak-step-item__description {
+      @apply text-sm m-0 p-0 font-normal text-gray-400 whitespace-nowrap -ml-8;
+    }
+
+    &--active {
+      .ak-step-item__dot {
+        @apply text-white bg-primary-dark;
+      }
+      .title-wrapper {
+        .ak-step-item__title {
+          @apply text-primary-dark;
+        }
+        .ak-step-item__description {
+          @apply text-gray-400;
+        }
+      }
+    }
+
+    &--completed {
+      .ak-step-item__dot {
+        @apply text-white bg-primary-dark;
+      }
+      .title-wrapper {
+        .ak-step-item__title {
+          @apply text-primary-dark;
+        }
+        .ak-step-item__description {
+          @apply text-gray-400;
+        }
+      }
+    }
+
+    &--disabled {
+      @apply cursor-not-allowed;
+    }
+  }
+}

package/src/components/step-items/components/index.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ComputedRef, Ref, computed, inject, ref } from 'vue';
+
+export interface MaStepItemProps {
+    title?: string,
+    description?: string,
+    disabled?: boolean,
+}
+
+const props = withDefaults(defineProps<MaStepItemProps>(), {
+    disabled: false,
+    completedActive: false,
+});
+
+const selectCurrentStep: Ref<(index: number) => void> = inject('selectStep');
+const activeStep: ComputedRef<number> = inject('activeStep');
+
+const maStepItem: Ref<HTMLDivElement> = ref(null);
+
+const currentStepIndex = computed(() => Number(maStepItem.value?.getAttribute('data-index') || 0));
+const isActive = computed(() => currentStepIndex.value === activeStep?.value);
+const isCompleted = computed(() => !props.disabled && activeStep?.value > currentStepIndex.value);
+
+const stepClasses = computed(() => [
+    'ak-step-item',
+    {
+        'ak-step-item--disabled': props.disabled
+    },
+    {
+        'ak-step-item--active': isActive.value
+    },
+    {
+        'ak-step-item--completed': isCompleted.value
+    },
+]);
+
+const handleSelect = () => {
+    if(props.disabled) {
+        return;
+    }
+    if(selectCurrentStep?.value) {
+        selectCurrentStep.value(currentStepIndex.value);
+    }
+}
+
+</script>
+<template>
+    <div
+        ref="maStepItem"
+        :class="stepClasses"
+        @click="handleSelect"
+    >
+        <div class="ak-step-item__dot">
+          <span
+              class="step-number"
+              v-if="isCompleted"
+          >
+                {{ currentStepIndex + 1 }}
+            </span>
+            <span
+                class="step-number"
+                v-else
+            >
+                {{ currentStepIndex + 1 }}
+            </span>
+        </div>
+        <div class="title-wrapper">
+            <h3 class="ak-step-item__title" v-if="props?.title || $slots.title">
+                <slot name="title"></slot>
+                {{ props?.title }}
+                <slot name="titleSlot"></slot>
+            </h3>
+            <p class="ak-step-item__description" v-if="props?.description || $slots.description">
+                <slot name="description"></slot>
+                {{ props?.description }}
+                <slot name="descriptionSlot"></slot>
+            </p>
+        </div>
+    </div>
+    <slot></slot>
+</template>

package/src/components/step-items/index.vue

@@ -0,0 +1,68 @@
+<script lang="ts">
+export default {
+    name: 'MaStepItems',
+};
+</script>
+<script setup lang="ts">
+import { Ref, computed, onMounted, provide, ref, useSlots, watch } from "vue";
+
+export interface MaStepItemsProps {
+    current?: number,
+}
+
+const props = withDefaults(defineProps<MaStepItemsProps>(), {
+    current: 0,
+});
+
+const emits = defineEmits(["update:current", "change"]);
+
+const slots = useSlots();
+
+const maStepItems: Ref<HTMLDivElement> = ref();
+
+const stepsClasses = computed(() => [
+    'ak-step-items',
+]);
+
+const selectStep = ref((step: number) => {
+    activeStep.value = step;
+});
+
+const activeStep = computed({
+    get() {
+        return props.current
+    },
+    set(step: number) {
+        emits("update:current", step);
+        emits("change", step);
+    }
+})
+
+const setStepIndexes = () => {
+    maStepItems.value.querySelectorAll('.ak-step-item').forEach((step: Element, index: number) => {
+        step.setAttribute('data-index', index.toString());
+    });
+}
+
+provide('selectStep', selectStep);
+provide('activeStep', activeStep);
+
+watch(
+    () => slots.default,
+    () => {
+        setStepIndexes();
+    },
+);
+
+onMounted(() => {
+    setStepIndexes();
+});
+
+
+</script>
+<template>
+    <div ref="maStepItems" :class="stepsClasses">
+        <slot></slot>
+    </div>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

package/src/components/step-items/stories/constants.ts

@@ -0,0 +1,77 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import {MaStepItems, MaStepItem} from '@/index';
+import { ref } from 'vue';
+
+export const baseConfig: Meta<typeof MaStepItems> = {
+    component: MaStepItems,
+    parameters: {
+        docs: {
+            description: {
+                component: `<p><b>MaSteps</b> is a navigation bar that guides users through the steps of a task.</p><p>Figma Designs <a href="https://www.figma.com/file/LsEcZ7CR3mf1vzBpCRgN7m/Design-Foundation_VD?type=design&node-id=147-69290&mode=dev" target="_blank">here!</a></p><p>
+                </p>`,
+            },
+        },
+    },
+    argTypes: {
+    },
+};
+
+export const stepItemConfig: Meta<typeof MaStepItem> = {
+    component: MaStepItem,
+    parameters: {
+    },
+    argTypes: {
+        title: {
+            control: { type: 'text' },
+            description: 'string | slot'
+        },
+        description: {
+            control: { type: 'text' },
+            description: 'string | slot'
+        },
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaStepItems, MaStepItem },
+    setup() {
+        const handleUpdateCurrent = (data: number) => {
+            args.current = data;
+        }
+        return { args, handleUpdateCurrent };
+    },
+    template: `<ma-step-items @update:current="handleUpdateCurrent" v-bind="args">
+        <ma-step-item>
+            <template #title>Title 1</template>
+            <template #description>Description 1</template>
+        </ma-step-item>
+        <ma-step-item>
+            <template #title>Title 2</template>
+            <template #description>Description 2</template>
+        </ma-step-item>
+        <ma-step-item>
+            <template #title>Title 3</template>
+            <template #description>Description 3</template>
+        </ma-step-item>
+        <ma-step-item>
+            <template #title>Title 4</template>
+            <template #description>Description 4</template>
+        </ma-step-item>
+    </ma-step-items>`,
+});
+
+export const TemplateStepItem: StoryFn = (args: any) => ({
+    components: { MaStepItems, MaStepItem  },
+    setup() {
+        const current = ref(0);
+        return { args, current };
+    },
+    template: `<ma-step-items v-model:current="current">
+    <ma-step-item v-bind="args">
+    </ma-step-item>
+    <ma-step-item>
+        <template #title>Title</template>
+        <template #description>Description</template>
+    </ma-step-item>
+</ma-step-items>`,
+});