@teammodlr/ui-kit 1.0.2 → 1.0.5

package/src/components/form/examples/index.stories.ts

@@ -0,0 +1,23 @@
+import MForm from '../Form.vue';
+import MInput from '../../input/Input.vue';
+import MButton from '../../button/Button.vue';
+import MSelect from '../../select/Select.vue';
+import MCheckbox from '../../checkbox/Checkbox.vue';
+
+import {
+    MFormBasic
+} from './index';
+import { createStory } from '@/__storybook__';
+
+export default {
+    component: MForm,
+    subcomponents: {
+        MInput,
+        MButton,
+        MSelect,
+        MCheckbox
+    },
+    title: 'Components/Form'
+}
+
+export const Basic = createStory(MFormBasic);

package/src/components/form/examples/index.ts

@@ -0,0 +1 @@
+export { default as MFormBasic } from './basic.vue';

package/src/components/image/examples/basic.vue

@@ -0,0 +1,5 @@
+<template>
+    <MImage 
+        src="https://images.unsplash.com/photo-1672745256937-4e60a4534413?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=976&q=80"
+        />
+</template>

package/src/components/image/examples/index.stories.ts

@@ -0,0 +1,12 @@
+import { createStory } from "@/__storybook__";
+import MImage from "../Image.vue";
+import {
+    MImageBasic,
+} from "./index";
+
+export default {
+    component: MImage,
+    title: 'Components/Image',
+}
+
+export const Basic = createStory(MImageBasic);

package/src/components/image/examples/index.ts

@@ -0,0 +1 @@
+export { default as MImageBasic } from './basic.vue';

package/src/components/input/examples/basic.vue

@@ -0,0 +1,7 @@
+<template>
+    <MInput 
+        label="Email"
+        name="email"
+        placeholder="Email Address"
+        />
+</template>

package/src/components/input/examples/index.stories.ts

@@ -0,0 +1,24 @@
+import MInput from "../Input.vue";
+import {
+    MInputBasic,
+    MInputSuffix,
+    MInputPrefix,
+    MInputSizes
+} from "./index";
+
+import {
+    createStory, sizeArgType
+} from "@/__storybook__";
+
+export default {
+    component: MInput,
+    title: 'Components/Input',
+    argTypes: {
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MInputBasic);
+export const Suffix = createStory(MInputSuffix);
+export const Prefix = createStory(MInputPrefix);
+export const Sizes = createStory(MInputSizes);

package/src/components/input/examples/index.ts

@@ -0,0 +1,4 @@
+export { default as MInputBasic } from './basic.vue';
+export { default as MInputSuffix } from './suffix.vue';
+export { default as MInputPrefix } from './prefix.vue';
+export { default as MInputSizes } from './sizes.vue';

package/src/components/input/examples/prefix.vue

@@ -0,0 +1,7 @@
+<template>
+    <MInput placeholder="Brad Veryard" name="name">
+        <template #prefix>
+            Prefix
+        </template>
+    </MInput>
+</template>

package/src/components/input/examples/sizes.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>
+        <MInput clearable name="field_one" size="xs" /><br /><br />
+        <MInput clearable name="field_two" size="sm" /><br /><br />
+        <MInput clearable name="field_three" /><br /><br />
+        <MInput clearable name="field_four" size="lg" /><br /><br />
+        <MInput clearable name="field_five" size="xl" /><br /><br />
+    </div>
+</template>

package/src/components/input/examples/suffix.vue

@@ -0,0 +1,7 @@
+<template>
+    <MInput placeholder="Brad Veryard" name="name">
+        <template #suffix>
+            Suffix
+        </template>
+    </MInput>
+</template>

package/src/components/link/examples/basic.vue

@@ -0,0 +1,3 @@
+<template>
+    <MLink href="https://www.google.com">Google</MLink>
+</template>

package/src/components/link/examples/index.stories.ts

@@ -0,0 +1,20 @@
+import MLink from "../Link.vue";
+
+import {
+    MLinkBasic
+} from "./index";
+
+import {
+    createStory,
+    colorArgType
+} from "@/__storybook__";
+
+export default {
+    component: MLink,
+    title: 'Components/Link',
+    argTypes: {
+        ...colorArgType()
+    }
+}
+
+export const Basic = createStory(MLinkBasic);

package/src/components/link/examples/index.ts

@@ -0,0 +1 @@
+export { default as MLinkBasic } from './basic.vue';

package/src/components/messageprovider/examples/basic.vue

@@ -0,0 +1,19 @@
+<template>
+    <button @click="showMessage">Show</button>
+</template>
+
+<script lang="ts" setup>
+import { useMessage } from '../useMessage';
+
+const message = useMessage();
+
+const showMessage = () => {
+
+    const timeout = Math.floor(Math.random() * 10) + 1;
+
+    message.create(`Hello World - ${timeout}s`, {
+        timeout: timeout * 1000
+    });
+    
+};
+</script>

package/src/components/messageprovider/examples/index.stories.ts

@@ -0,0 +1,30 @@
+import MMessageProvider from "../MessageProvider.vue";
+import {
+    MMessageProviderBasic,
+
+} from "./index";
+
+const Template = (args: any) => ({
+    components: {
+        MMessageProvider,
+        MMessageProviderBasic
+    },
+    setup() {
+
+        return {
+            args,
+        };
+    },
+    template: `
+        <m-message-provider v-bind="args">
+            <MMessageProviderBasic />
+        </m-message-provider>
+    `
+})
+
+export default {
+    component: MMessageProvider,
+    title: 'Components/MessageProvider'
+}
+
+export const Primary = Template.bind({});

package/src/components/messageprovider/examples/index.ts

@@ -0,0 +1 @@
+export { default as MMessageProviderBasic } from './basic.vue';

package/src/components/messageprovider/examples/wrapper.vue

@@ -0,0 +1,9 @@
+<template>
+    <m-message-provider>
+        <slot />
+    </m-message-provider>
+</template> 
+
+<script lang="ts" setup>
+import MMessageProvider from '../MessageProvider.vue';
+</script>

package/src/components/select/examples/basic.vue

@@ -0,0 +1,20 @@
+<template>
+    <MSelect
+        v-model="value"
+        :options="options"
+        :option-value="'id'"
+        :option-label="'name'"
+        />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+// make list of options with 1000 items
+const options = Array.from({ length: 50 }, (_, i) => ({
+    id: i,
+    name: `Option ${i+1}`
+}));
+
+const value = ref();
+</script>

package/src/components/select/examples/index.stories.ts

@@ -0,0 +1,22 @@
+import MSelect from "../Select.vue";
+import {
+    MSelectBasic,
+    MSelectSearchable,
+    MSelectMultiple,
+} from "./index";
+
+import {
+    createStory, sizeArgType
+} from "@/__storybook__";
+
+export default {
+    component: MSelect,
+    title: 'Components/Select',
+    argTypes: {
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MSelectBasic);
+export const Searchable = createStory(MSelectSearchable);
+export const Multiple = createStory(MSelectMultiple);

package/src/components/select/examples/index.ts

@@ -0,0 +1,3 @@
+export { default as MSelectBasic } from './basic.vue';
+export { default as MSelectSearchable } from './searchable.vue';
+export { default as MSelectMultiple } from './multiple.vue';

package/src/components/select/examples/multiple.vue

@@ -0,0 +1,22 @@
+<template>
+    <MSelect
+        v-model="value"
+        :options="options"
+        :option-value="'id'"
+        :option-label="'name'"
+        multiple
+        searchable
+        />
+        {{ value }}
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const options = Array.from({ length: 50 }, (_, i) => ({
+    id: i,
+    name: `Option ${i+1}`
+}));
+
+const value = ref([]);
+</script>

package/src/components/select/examples/searchable.vue

@@ -0,0 +1,20 @@
+<template>
+    <MSelect
+        v-model="value"
+        :options="options"
+        :option-value="'id'"
+        :option-label="'name'"
+        searchable
+        />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const options = Array.from({ length: 50 }, (_, i) => ({
+    id: i,
+    name: `Option ${i+1}`
+}));
+
+const value = ref();
+</script>

package/src/components/skeleton/examples/basic.vue

@@ -0,0 +1,3 @@
+<template>
+    <MSkeleton />
+</template>

package/src/components/skeleton/examples/index.stories.ts

@@ -0,0 +1,24 @@
+import { createStory } from "@/__storybook__";
+import MSkeleton from "../Skeleton.vue";
+
+import {
+    MSkeletonBasic,
+    MSkeletonPost
+} from "./index";
+
+export default {
+    component: MSkeleton,
+    title: 'Components/Skeleton',
+    argTypes: {
+        variant: {
+            options: ['thumb', 'line', 'circle', 'block'],
+            control: {
+                type: 'select',
+                
+            }
+        }
+    }
+}
+
+export const Basic = createStory(MSkeletonBasic);
+export const Post = createStory(MSkeletonPost);

package/src/components/skeleton/examples/index.ts

@@ -0,0 +1,2 @@
+export { default as MSkeletonBasic } from './basic.vue';
+export { default as MSkeletonPost } from './post.vue';

package/src/components/skeleton/examples/post.vue

@@ -0,0 +1,8 @@
+<template>
+    <div>
+        <MSkeleton variant="thumb" style="margin-bottom: 10px;" />
+        <MSkeleton variant="heading" style="margin-bottom: 10px; width: 340px;"  />
+        <MSkeleton variant="line" style="margin-bottom: 6px;" />
+        <MSkeleton variant="line" />
+    </div>
+</template>

package/src/components/tab/examples/basic.vue

@@ -0,0 +1,19 @@
+<template>
+    <MTabGroup v-model="active">
+        <MTab value="one" label="One">
+            Hello Worlddsd
+        </MTab>
+        <MTab value="two" label="Two" disabled>
+            Hello World Two
+        </MTab>
+        <MTab value="three" label="Third">
+            Hello World Two dfndjfn
+        </MTab>
+    </MTabGroup>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const active = ref("one");
+</script>

package/src/components/tab/examples/index.stories.ts

@@ -0,0 +1,25 @@
+import MTabGroup from "../TabGroup.vue";
+import MTab from "../Tab.vue";
+import {
+    MTabsBasic,
+    MTabsVertical
+} from "./index";
+
+import {
+    createStory,
+    sizeArgType
+} from "@/__storybook__";
+
+export default {
+    component: MTabGroup,
+    subcomponents: {
+        MTab
+    },
+    title: 'Components/Tabs',
+    argTypes: {
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MTabsBasic);
+export const Vertical = createStory(MTabsVertical);

package/src/components/tab/examples/index.ts

@@ -0,0 +1,2 @@
+export { default as MTabsBasic } from './basic.vue';
+export { default as MTabsVertical } from './vertical.vue';

package/src/components/tab/examples/vertical.vue

@@ -0,0 +1,19 @@
+<template>
+    <MTabGroup v-model="active" vertical>
+        <MTab value="one" label="One">
+            Hello Worlddsd
+        </MTab>
+        <MTab value="two" label="Two" disabled>
+            Hello World Two
+        </MTab>
+        <MTab value="three" label="Third">
+            Hello World Two dfndjfn
+        </MTab>
+    </MTabGroup>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const active = ref("one");
+</script>

package/src/components/table/examples/basic.vue

@@ -0,0 +1,46 @@
+<template>
+    <MTable 
+        :headers="headers"
+        :items="items"
+        striped
+    >
+        <template #actions="{ item }">
+            <MButton
+                color="blue"
+                secondary
+                size="sm"
+            >
+                Edit - {{ item.name }}
+            </MButton>
+        </template>
+    </MTable>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { TableHeadItem } from "../types";
+
+let headers = ref<TableHeadItem[]>([
+    {
+        name: "Name",
+        key: "name",
+        width: 200
+    },
+    {
+        name: "Age",
+        key: "age",
+    },
+    {
+        name: "Actions",
+        key: "actions"
+    }
+]);
+
+let items = ref([
+    ...Array.from({ length: 30 }, () => ({
+        name: "John Doe",
+        age: 4
+    }))
+
+]);
+</script>

package/src/components/table/examples/index.stories.ts

@@ -0,0 +1,19 @@
+import MTable from "../Table.vue";
+import MButton from "../../button/Button.vue";
+import {
+    MTableBasic
+} from "./index";
+
+import {
+    createStory
+} from "@/__storybook__";
+
+export default {
+    component: MTable,
+    subcomponents: {
+        MButton
+    },
+    title: 'Components/Table',
+}
+
+export const Basic = createStory(MTableBasic);

package/src/components/table/examples/index.ts

@@ -0,0 +1 @@
+export { default as MTableBasic } from './basic.vue';

package/src/components/tooltip/examples/basic.vue

@@ -0,0 +1,8 @@
+<template>
+    <MTooltip>
+        <template #trigger>
+            <MButton>Top</MButton>
+        </template>
+        The top textdsfsdfsdf
+    </MTooltip>
+</template>

package/src/components/tooltip/examples/index.stories.ts

@@ -0,0 +1,21 @@
+import MTooltip from "../Tooltip.vue";
+import MButton from "@/components/button/Button.vue";
+import {
+    MTooltipBasic
+} from "./index";
+
+import {
+    createStory,
+    popperPositionArgType
+} from "@/__storybook__";
+
+export default {
+    component: MTooltip,
+    subcomponents: { MButton },
+    title: 'Components/Tooltip',
+    argTypes: {
+        ...popperPositionArgType()
+    }
+}
+
+export const Basic = createStory(MTooltipBasic);

package/src/components/tooltip/examples/index.ts

@@ -0,0 +1 @@
+export { default as MTooltipBasic } from "./basic.vue";

package/src/components/virtualscroll/examples/basic.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+const props = defineProps({
+    items: {
+        type: Array,
+        default: () => []
+    },
+    itemHeight: {
+        type: Number,
+        default: 50
+    },
+    buffer: {
+        type: Number,
+        default: 3
+    },
+    pageHeight: {
+        type: Number,
+        default: 400
+    }
+})
+</script>
+
+<template>
+    <div>
+        <MVirtualScroll 
+            v-slot="{ item, height }" 
+            v-bind="props"
+            :style="{
+                height: `${props.pageHeight}px`,
+                overflow: 'auto'
+            }"
+        >
+            <div :key="item.id" :style="{height: `${height}px`}">
+                {{ item.name }}
+            </div>
+        </MVirtualScroll>
+    </div>
+</template>

package/src/components/virtualscroll/examples/index.stories.ts

@@ -0,0 +1,31 @@
+import MVirtualScroll from "../VirtualScroll.vue";
+import {
+    MVirtualScrollBasic
+} from "./index";
+
+import {
+    createStory
+} from "@/__storybook__";
+
+export default {
+    component: MVirtualScroll,
+    title: 'Components/VirtualScroll'
+}
+
+const items = [] as any[];
+
+for (let i = 0; i < 1000; i++) {
+    items.push({
+        id: i + 1,
+        name: 'Some name here ' + (i + 1),
+    });
+}
+
+export const Basic = createStory(MVirtualScrollBasic).bind({});
+// @ts-ignore
+Basic.args = {
+    items: items,
+    itemHeight: 50,
+    buffer: 3,
+    pageHeight: 500,
+};

package/src/components/virtualscroll/examples/index.ts

@@ -0,0 +1 @@
+export { default as MVirtualScrollBasic } from './basic.vue';