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

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

@@ -0,0 +1,130 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import {Template, baseConfig, TemplateWithSlots} from './constants';
+import { ref } from 'vue';
+
+import MaCard from '../index.vue';
+import MaButton from '../../button/index.vue';
+import MaEmpty from '../../empty/index.vue';
+
+const meta: Meta<typeof MaCard> = {
+    title: 'Core/MaCard',
+    ...baseConfig,
+};
+
+export default meta;
+
+export const Default: StoryFn = TemplateWithSlots.bind({});
+Default.args = {
+    headerIcon: 'send',
+};
+
+export const NoContentPadding: StoryFn = TemplateWithSlots.bind({});
+NoContentPadding.args = {
+    headerIcon: 'send',
+    noContentPadding: true,
+};
+
+export const Closable: StoryFn = (args: any) => ({
+    components: {
+        MaCard,
+        MaButton,
+    },
+    setup() {
+        return {
+            args,
+        };
+    },
+    template: `<ma-card closable contentIcon="send">
+        <template #title>
+            Place text here
+        </template>
+        <template #description>
+            Place your description here
+        </template>
+        <template #contentTitle>
+            Place text here
+        </template>
+        <template #contentDescription>
+            <p>Lorem ipsum dolor sit amet consectetur. Fames volutpat enim dui facilisis semper etiam accumsan dictum ornare.</p>
+            <p>Lorem ipsum dolor sit amet consectetur. Fames volutpat enim dui </p>
+        </template>
+        <template #footerDescription>
+            Place your description here
+        </template>
+        <template #footerTitle>
+            Place text here
+        </template>
+        <template #footerActions>
+            <ma-button class="mr-4">Action Button</ma-button>
+            <ma-button variant="ghost">Action Button</ma-button>
+        </template>
+    </ma-card>`,
+});
+
+export const Collapse: StoryFn = (args: any) => ({
+    components: {
+        MaCard,
+        MaButton,
+        MaEmpty,
+    },
+    setup() {
+        const collapse = ref(false);
+        return {
+            args,
+            collapse,
+        };
+    },
+    template: `<ma-card collapsable v-model:collapse="collapse" headerIcon="send">
+        <template #title>Place title here </template>
+        <template #description>Lorem ipsum dolor sit amet consectetur. Pellentesque pellentesque sed velit mattis in facilisis urna.</template>
+        <ma-empty>
+            <template #title>Place a title here</template>
+            <template #description>Place a description here</template>
+        </ma-empty>
+        <template #footerDescription>
+            Place your description here
+        </template>
+        <template #footerTitle>
+            Place text here
+        </template>
+        <template #footerActions>
+            <ma-button class="mr-4">Action Button</ma-button>
+            <ma-button variant="ghost">Action Button</ma-button>
+        </template>
+    </ma-card>`,
+});
+
+export const AllSlots: StoryFn = (args: any) => ({
+    components: {
+        MaCard,
+    },
+    setup() {
+        return {
+            args,
+        };
+    },
+    template: `<ma-card>
+    <template #title>#title</template>
+    <template #description>#description</template>
+    <template #headerContent>#headerContent</template>
+    <template #headerActions>#headerActions</template>
+    <template #contentTitle>#contentTitle</template>
+    <template #contentDescription>#contentDescription</template>
+    <template #footerTitle>#footerTitle</template>
+    <template #footerDescription>#footerDescription</template>
+    <template #footer>#footer</template>
+    <template #footerActions>#footerActions</template>
+    <p>
+        #defaultSlot
+    </p>
+  </ma-card>`,
+});
+
+export const Small: StoryFn = Template.bind({});
+Small.args = {
+    title: 'Place text here',
+    description: 'Place your description here',
+    headerIcon: 'send',
+    size: 'small',
+    closable: true,
+};

package/src/components/card/stories/examples.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Core/MaCard/AllSlotsExample" />
+
+# MaCard Slot Examples
+
+## Slots
+
+1. \#default
+2. \#title
+3. \#description
+4. \#headerContent
+5. \#headerActions
+6. \#contentTitle
+7. \#contentDescription
+8. \#footerTitle
+9. \#footerDescription
+10. \#footer
+11. \#footerActions
+
+```bash
+   <ma-card>
+    <template #title>#title</template>
+    <template #description>#description</template>
+    <template #headerContent>#headerContent</template>
+    <template #headerActions>#headerActions</template>
+    <template #contentTitle>#contentTitle</template>
+    <template #contentDescription>#contentDescription</template>
+    <template #footerTitle>#footerTitle</template>
+    <template #footerDescription>#footerDescription</template>
+    <template #footer>#footer</template>
+    <template #footerActions>#footerActions</template>
+    <p>
+        Default slot area
+    </p>
+  </ma-card>
+```

package/src/components/card/stories/footer.stories.ts

@@ -0,0 +1,122 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { baseConfig } from './constants';
+
+import MaCard from '../index.vue';
+import MaButton from '../../button/index.vue';
+
+const meta: Meta<typeof MaCard> = {
+  title: 'Core/MaCard/Footer',
+  ...baseConfig,
+};
+
+export default meta;
+
+export const Default: StoryFn = (args: any) => ({
+  components: {
+    MaCard,
+    MaButton,
+  },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `<ma-card>
+    <template #footerTitle>
+        Place text here
+    </template>
+    <template #footerDescription>
+        Place your description here
+    </template>
+    <template #footerActions>
+        <ma-button type="link" class="mr-2">Text Link</ma-button>
+        <ma-button type="link">Text Link</ma-button>
+    </template>
+    </ma-card>`,
+});
+
+export const FooterActions: StoryFn = (args: any) => ({
+  components: {
+    MaCard,
+    MaButton,
+  },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `<ma-card headerIcon="send" title="Place text here" description="Place your description here">
+    <template #footerActions>
+        <ma-button type="link" class="mr-2">Text Link</ma-button>
+        <ma-button type="link">Text Link</ma-button>
+    </template>
+    </ma-card>`,
+});
+
+export const FooterActions2: StoryFn = (args: any) => ({
+  components: {
+    MaCard,
+    MaButton,
+  },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `<ma-card headerIcon="send" title="Place text here" description="Place your description here">
+    <template #footerTitle>
+        Place text here
+    </template>
+    <template #footerDescription>
+        Place your description here
+    </template>
+    <template #footerActions>
+        <ma-button class="mr-2">Action Button</ma-button>
+        <ma-button variant="stroke">Action Button</ma-button>
+    </template>
+    </ma-card>`,
+});
+
+export const FooterActions3: StoryFn = (args: any) => ({
+  components: {
+    MaCard,
+    MaButton,
+  },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `<ma-card headerIcon="send" title="Place text here" description="Place your description here">
+    <template #footer>
+        <div class="w-full flex justify-between">
+            <ma-button>Action Button</ma-button>
+            <ma-button variant="stroke">Action Button</ma-button>
+        </div>
+    </template>
+    </ma-card>`,
+});
+
+export const FooterCenter: StoryFn = (args: any) => ({
+  components: {
+    MaCard,
+    MaButton,
+  },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `<ma-card footerAlignment="center" headerIcon="send" title="Place text here" description="Place your description here">
+        <template #footerTitle>
+            Place text here
+        </template>
+        <template #footerDescription>
+            Place your description here
+        </template>
+        <template #footerActions>
+            <ma-button class="mr-2">Action Button</ma-button>
+            <ma-button variant="stroke">Action Button</ma-button>
+        </template>
+    </ma-card>`,
+});

package/src/components/card/stories/header.stories.ts

@@ -0,0 +1,129 @@
+import type { Meta, StoryFn, StoryObj } from '@storybook/vue3';
+import { baseConfig, Template } from './constants';
+
+import MaCard from '../index.vue';
+import MaButton from '../../button/index.vue';
+import { ref } from 'vue';
+
+const meta: Meta<typeof MaCard> = {
+  title: 'Core/MaCard/Header',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaCard>;
+
+export const Default: Story = Template.bind({});
+Default.args = {
+  title: 'Place text here',
+  description: 'Place your description here',
+};
+
+export const WithAvatar: Story = Template.bind({});
+WithAvatar.args = {
+  title: 'Place text here',
+  description: 'Place your description here',
+  headerAvatar: 'https://i.pravatar.cc/300',
+};
+
+export const WithIcon: Story = Template.bind({});
+WithIcon.args = {
+  title: 'Place text here',
+  description: 'Place your description here',
+  headerIcon: 'send',
+};
+
+export const AlingmentCenter: Story = Template.bind({});
+AlingmentCenter.args = {
+  title: 'Place text here',
+  description: 'Place your description here',
+  headerIcon: 'send',
+  headerAlignment: 'center',
+};
+
+export const HeaderActions: StoryFn = (args: any) => ({
+  components: {
+    MaCard,
+    MaButton,
+  },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `<ma-card title="Place text here" description="Place your description here">
+    <template #headerActions>
+        <ma-button type="link" class="mr-2">Text Link</ma-button>
+        <ma-button type="link">Text Link</ma-button>
+    </template>
+    </ma-card>`,
+});
+
+export const HeaderActionsWithCenter: StoryFn = (args: any) => ({
+  components: {
+    MaCard,
+    MaButton,
+  },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `<ma-card headerAlignment="center" headerAvatar="https://i.pravatar.cc/300" title="Place text here" description="Place your description here">
+    <template #headerActions>
+        <ma-button type="link" class="mr-2">Text Link</ma-button>
+        <ma-button type="link">Text Link</ma-button>
+    </template>
+    </ma-card>`,
+});
+
+export const HeaderActions2: StoryFn = (args: any) => ({
+  components: {
+    MaCard,
+    MaButton,
+  },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `<ma-card headerIcon="send" title="Place text here" description="Place your description here">
+    <template #headerActions>
+        <ma-button class="mr-2">Action Button</ma-button>
+        <ma-button variant="stroke">Action Button</ma-button>
+    </template>
+    </ma-card>`,
+});
+
+export const HeaderClosable: StoryFn = (args: any) => ({
+  components: {
+    MaCard,
+    MaButton,
+  },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `<ma-card closable headerIcon="send" title="Place text here" description="Place your description here">
+
+    </ma-card>`,
+});
+
+export const HeaderCollapse: StoryFn = (args: any) => ({
+  components: {
+    MaCard,
+    MaButton,
+  },
+  setup() {
+    const collapse = ref(true);
+    return {
+      args,
+      collapse,
+    };
+  },
+  template: `<ma-card v-model:collapse="collapse" collapsable headerIcon="send" title="Place text here" description="Place your description here">
+
+    </ma-card>`,
+});

package/src/components/card/types.ts

@@ -0,0 +1,21 @@
+export const MaCardAlignments = [
+    "left",
+    "center",
+] as const;
+
+export const MaCardSizes = [
+    "small",
+    "default",
+] as const;
+
+export const MaCardIconColors = [
+    "blue",
+    "green",
+    "orange",
+    "red",
+    "purple"
+] as const;
+
+export type MaCardAlignment = (typeof MaCardAlignments)[number];
+export type MaCardIconColor = (typeof MaCardIconColors)[number];
+export type MaCardSize = (typeof MaCardSizes)[number];

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

@@ -0,0 +1,162 @@
+.ma-cascader {
+  @apply relative overflow-visible;
+
+  &__button {
+    @apply outline-none;
+    .ma-cascader-selector {
+      @apply bg-white border border-gray-300 rounded-lg flex items-center relative min-w-[4rem] min-h-[2rem] transition-colors duration-300;
+      .ma-cascader-selector-prefix {
+        .ma-icon {
+          @apply text-gray-400 flex-none;
+        }
+      }
+      .ma-cascader-clear-button {
+        @apply hidden absolute right-1;
+      }
+      .ma-cascader-suffix-arrow {
+        @apply w-4 h-4 text-gray-500 ml-auto flex-none;
+      }
+      > span {
+        @apply text-sm text-gray-900 truncate;
+        &.ma-cascader-placeholder {
+          @apply text-gray-400 transition-colors duration-300;
+        }
+      }
+      &:not(.ma-cascader-selector--disabled, .ma-cascader-selector--error) {
+        &:hover {
+          @apply border-primary-dark-blue bg-blue-25;
+          > span {
+            &.ma-cascader-placeholder {
+              @apply text-gray-900;
+            }
+          }
+          .ma-cascader-clear-button {
+            @apply block;
+          }
+        }
+      }
+      &--opened {
+        @apply border-primary-dark-blue bg-blue-25;
+        &::before {
+          @apply content-[''] w-[calc(100%_+_12px)] h-[calc(100%_+_12px)] border-2 border-gray-100 rounded-xl absolute -left-1.5 -top-1.5;
+        }
+      }
+      &--disabled {
+        @apply bg-gray-50 cursor-not-allowed border-none;
+        > span {
+          @apply text-gray-300;
+          &.ma-cascader-placeholder {
+            @apply text-gray-300;
+          }
+        }
+        .ma-icon {
+          @apply text-gray-300;
+        }
+      }
+      &--error {
+        @apply bg-red-25 border-red-400;
+        .ma-icon,
+        .ma-cascader-selector-prefix .ma-icon {
+          @apply text-red-500;
+        }
+        > span {
+          @apply text-red-500;
+          &.ma-cascader-placeholder {
+            @apply text-red-500;
+          }
+        }
+      }
+      &--small {
+        @apply p-1.5 gap-1.5 h-8;
+        .ma-cascader-selector-prefix {
+          .ma-icon {
+            @apply w-5 h-5;
+          }
+        }
+      }
+      &--medium {
+        @apply p-2 gap-2 h-9;
+        .ma-cascader-selector-prefix {
+          .ma-icon {
+            @apply w-5 h-5;
+          }
+        }
+      }
+      &--large {
+        @apply p-2.5 gap-2.5 h-10;
+        .ma-cascader-selector-prefix {
+          .ma-icon {
+            @apply w-6 h-6;
+          }
+        }
+      }
+    }
+  }
+
+  &__panel {
+    @apply absolute z-[100] bg-white shadow-lg rounded-2xl px-2 flex flex-row mt-3;
+    .ma-cascader-options {
+      @apply py-2 flex flex-col gap-1 max-h-60 overflow-y-auto;
+      &::-webkit-scrollbar {
+        @apply w-1;
+      }
+      &::-webkit-scrollbar-track {
+        @apply bg-transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+        @apply outline-none rounded-2xl bg-gray-200;
+      }
+      &:not(:first-of-type) {
+        @apply pl-2 ml-2 border-l border-soft-200;
+      }
+      li {
+        @apply flex items-center gap-2 w-full rounded-xl transition-colors duration-300 pl-2;
+        &.ma-active-option {
+          @apply bg-indigo-25;
+          button {
+            @apply font-medium;
+          }
+        }
+        &:hover {
+          @apply bg-indigo-25;
+        }
+        .ma-checkbox {
+          .antd-checkbox {
+            @apply top-0;
+          }
+        }
+        button {
+          @apply flex items-center gap-2 w-full text-sm text-gray-900 py-2 pr-2;
+          > span {
+            @apply truncate max-w-[8rem] mr-auto;
+            > .ma-icon {
+              @apply text-gray-600;
+            }
+          }
+          > .ma-icon {
+            @apply text-primary-dark;
+          }
+        }
+      }
+    }
+  }
+
+  .ma-cascader-enter-active,
+  .ma-cascader-leave-active {
+    @apply transition ease-out duration-200;
+  }
+
+  .ma-cascader-enter-from,
+  .ma-cascader-leave-to {
+    @apply opacity-0 translate-y-1;
+  }
+
+  .ma-cascader-enter-to,
+  .ma-cascader-leave-from {
+    @apply opacity-100 translate-y-0;
+  }
+
+  .ma-cascader-leave-active {
+    @apply transition ease-in duration-150;
+  }
+}