@teammodlr/ui-kit 1.0.2 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",
@@ -8,8 +8,6 @@
   "files": [
     "lib",
     "src",
-    "!./src/__storybook__",
-    "!src/components/**/examples",
     "*.d.ts"
   ],
   "exports": {

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

@@ -0,0 +1,6 @@
+<template>
+    <MAvatar
+        src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+        variant="rounded"
+        />
+</template>

package/src/components/avatar/examples/custom-size.vue

@@ -0,0 +1,7 @@
+<template>
+    <MAvatar
+        src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+        variant="rounded"
+        size="100px"
+        />
+</template>

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

@@ -0,0 +1,28 @@
+import MAvatar from "../Avatar.vue";
+
+import {
+    MAvatarBasic,
+    MAvatarSize,
+    MAvatarCustomSize,
+    MAvatarVariant,
+    MAvatarSlot
+} from "./index";
+
+import {
+    colorArgType,
+    createStory, sizeArgType
+} from "@/__storybook__";
+
+export default {
+    component: MAvatar,
+    title: 'Components/Avatar',
+    argTypes: {
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MAvatarBasic);
+export const Sizes = createStory(MAvatarSize);
+export const CustomSize = createStory(MAvatarCustomSize);
+export const Variants = createStory(MAvatarVariant);
+export const Slots = createStory(MAvatarSlot);

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

@@ -0,0 +1,5 @@
+export { default as MAvatarBasic } from './basic.vue';
+export { default as MAvatarSize } from './sizes.vue';
+export { default as MAvatarCustomSize } from './custom-size.vue';
+export { default as MAvatarVariant } from './variants.vue';
+export { default as MAvatarSlot } from './slots.vue';

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

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            size="xs"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            size="sm"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            size="md"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            size="lg"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            size="xl"
+            /><br /><br />
+    </div>
+</template>

package/src/components/avatar/examples/slots.vue

@@ -0,0 +1,7 @@
+<template>
+    <MAvatar
+        variant="rounded"
+    >
+        BV
+    </MAvatar>
+</template>

package/src/components/avatar/examples/variants.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="square"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="circle"
+            /><br /><br />
+    </div>
+</template>

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

@@ -0,0 +1,11 @@
+
+
+<template>
+    <MAvatarGroup>
+        <MAvatar src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp" variant="circle" />
+        <MAvatar src="https://cdn.vuetifyjs.com/images/lists/2.jpg" variant="circle" />
+        <MAvatar src="https://cdn.vuetifyjs.com/images/lists/3.jpg" variant="circle" />
+        <MAvatar src="https://cdn.vuetifyjs.com/images/lists/4.jpg" variant="circle" />
+        <MAvatar src="https://cdn.vuetifyjs.com/images/lists/5.jpg" variant="circle" />
+    </MAvatarGroup>
+</template>

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

@@ -0,0 +1,28 @@
+import MAvatarGroup from "../AvatarGroup.vue";
+import MAvatar from "../../avatar/Avatar.vue";
+
+import {
+    MAvatarGroupBasic
+} from "./index";
+
+import {
+    createStory
+} from "@/__storybook__";
+
+export default {
+    component: MAvatarGroup,
+    subcomponents: {
+        MAvatar
+    },
+    title: 'Components/Avatar Group',
+    argTypes: {
+        size: {
+            control: {
+                type: 'select',
+                options: ['xs', 'sm', 'md', 'lg', 'xl']
+            }
+        },
+    }
+}
+
+export const Basic = createStory(MAvatarGroupBasic);

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

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

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

@@ -0,0 +1,9 @@
+<template>
+    <div>
+        <MBreadcrumb>
+            <MBreadcrumbItem>Home</MBreadcrumbItem>
+            <MBreadcrumbItem>Category One</MBreadcrumbItem>
+            <MBreadcrumbItem>Category Two</MBreadcrumbItem>
+        </MBreadcrumb>  
+    </div>
+</template>

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

@@ -0,0 +1,20 @@
+import MBreadcrumb from "../Breadcrumb.vue";
+import MBreadcrumbItem from "../../breadcrumbitem/BreadcrumbItem.vue";
+
+import {
+    MBreadcrumbBasic
+} from "./index";
+
+import {
+    createStory
+} from "@/__storybook__";
+
+export default {
+    component: MBreadcrumb,
+    subcomponents: {
+        MBreadcrumbItem
+    },
+    title: 'Components/Breadcrumb',
+}
+
+export const Basic = createStory(MBreadcrumbBasic);

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

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

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

@@ -0,0 +1,3 @@
+<template>
+    <MButton>Hello World</MButton>
+</template>

package/src/components/button/examples/colors-secondary.vue

@@ -0,0 +1,8 @@
+<template>
+    <MButton secondary>Default</MButton><br/><br/>
+    <MButton color="gray" secondary>Gray</MButton><br/><br/>
+    <MButton color="blue" secondary>Blue</MButton><br/><br/>
+    <MButton color="green" secondary>Green</MButton><br/><br/>
+    <MButton color="red" secondary>Red</MButton><br/><br/>
+    <MButton color="yellow" secondary>Yellow</MButton><br/><br/>
+</template>

package/src/components/button/examples/colors.vue

@@ -0,0 +1,8 @@
+<template>
+    <MButton>Default</MButton><br/><br/>
+    <MButton color="gray">Gray</MButton><br/><br/>
+    <MButton color="blue">Blue</MButton><br/><br/>
+    <MButton color="green">Green</MButton><br/><br/>
+    <MButton color="red">Red</MButton><br/><br/>
+    <MButton color="yellow">Yellow</MButton><br/><br/>
+</template>

package/src/components/button/examples/disabled.vue

@@ -0,0 +1,3 @@
+<template>
+    <MButton disabled>You can't click me</MButton>
+</template>

package/src/components/button/examples/icon.vue

@@ -0,0 +1,10 @@
+<template>
+    <MButton>
+        <template #icon-left>
+            <svg style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
+            </svg>
+        </template>
+        Hello World
+    </MButton>
+</template>

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

@@ -0,0 +1,33 @@
+import MButton from "../Button.vue";
+import {
+    MButtonBasic,
+    MButtonSize,
+    MButtonRounded,
+    MButtonColor,
+    MButtonColorSecondary,
+    MButtonDisabled,
+    MButtonIcon
+} from "./index";
+
+import {
+    colorArgType,
+    createStory,
+    sizeArgType
+} from "@/__storybook__";
+
+export default {
+    component: MButton,
+    title: 'Components/Buttons/Button',
+    argTypes: {
+        ...colorArgType(),
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MButtonBasic);
+export const Size = createStory(MButtonSize);
+export const Rounded = createStory(MButtonRounded);
+export const Colors = createStory(MButtonColor);
+export const ColorsSecondary = createStory(MButtonColorSecondary);
+export const Disabled = createStory(MButtonDisabled);
+export const Icon = createStory(MButtonIcon);

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

@@ -0,0 +1,7 @@
+export { default as MButtonBasic } from './basic.vue';
+export { default as MButtonSize } from './size.vue';
+export { default as MButtonRounded } from './rounded.vue';
+export { default as MButtonColor } from './colors.vue';
+export { default as MButtonColorSecondary } from './colors-secondary.vue';
+export { default as MButtonDisabled } from './disabled.vue';
+export { default as MButtonIcon } from './icon.vue';

package/src/components/button/examples/rounded.vue

@@ -0,0 +1,7 @@
+<template>
+    <MButton size="xs" rounded>Extra Small</MButton><br/><br/>
+    <MButton size="sm" rounded>Small</MButton><br/><br/>
+    <MButton size="md" rounded>Default</MButton><br/><br/>
+    <MButton size="lg" rounded>Large</MButton><br/><br/>
+    <MButton size="xl" rounded>Extra Large</MButton><br/><br/>
+</template>

package/src/components/button/examples/size.vue

@@ -0,0 +1,7 @@
+<template>
+    <MButton size="xs">Extra Small</MButton><br/><br/>
+    <MButton size="sm">Small</MButton><br/><br/>
+    <MButton size="md">Default</MButton><br/><br/>
+    <MButton size="lg">Large</MButton><br/><br/>
+    <MButton size="xl">Extra Large</MButton><br/><br/>
+</template>

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

@@ -0,0 +1,9 @@
+<template>
+    <MButtonGroup>
+        <MButton>Hello</MButton>
+        <MButton>Hello</MButton>
+        <MButton>Hello</MButton>
+        <MButton color="red" secondary>Hello</MButton>
+        <MButton color="green">Hello</MButton>
+    </MButtonGroup>
+</template>

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

@@ -0,0 +1,21 @@
+import MButtonGroup from "../ButtonGroup.vue";
+import MButton from "../../button/Button.vue";
+import {
+    MButtonGroupBasic
+} from "./index";
+
+import {
+    createStory,
+    sizeArgType
+} from "@/__storybook__";
+
+export default {
+    component: MButtonGroup,
+    subcomponents: { MButton },
+    title: 'Components/Buttons/Group',
+    argTypes: {
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MButtonGroupBasic);

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

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

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

@@ -0,0 +1,9 @@
+<template>
+    <MCheckbox v-model="checked" label="Test" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const checked = ref(false);
+</script>

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

@@ -0,0 +1,21 @@
+import MCheckbox from "../Checkbox.vue";
+import {
+    MCheckboxBasic,
+    MCheckboxSlot
+} from "./index";
+
+import {
+    createStory, sizeArgType, colorArgType
+} from "@/__storybook__";
+
+export default {
+    component: MCheckbox,
+    title: 'Components/Checkbox',
+    argTypes: {
+        ...sizeArgType(),
+        ...colorArgType()
+    }
+}
+
+export const Basic = createStory(MCheckboxBasic);
+export const Slot = createStory(MCheckboxSlot);

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

@@ -0,0 +1,3 @@
+export { default as MCheckboxBasic } from './basic.vue';
+export { default as MCheckboxSlot } from './slot.vue';
+

package/src/components/checkbox/examples/slot.vue

@@ -0,0 +1,11 @@
+<template>
+    <MCheckbox v-model="checked">
+        Weapon
+    </MCheckbox>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const checked = ref(false);
+</script>

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

@@ -0,0 +1,73 @@
+<template>
+    <MDropdown>
+        <MButton>
+            Menu
+        </MButton>
+
+        <template #menu>
+            <MDropdownList>
+                <MDropdownItem hotkey="Ctrl+L"  @click="handleClick">
+                    Item One
+                </MDropdownItem>
+                <MDropdownItem>
+                    Item Two
+                </MDropdownItem>
+
+                <MDropdown>
+                    <MDropdownItem>
+                        <template #icon-right>
+                            <svg style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                                <path fill-rule="evenodd"
+                                    d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                                    clip-rule="evenodd" />
+                            </svg>
+
+                        </template>
+                        Item Three (Parent)
+                    </MDropdownItem>
+
+                    <template #menu>
+                        <MDropdownList>
+                            <MDropdownItem @click="handleClick">
+                                Child One
+                            </MDropdownItem>
+                            <MDropdown>
+                                <MDropdownItem>
+                                    <template #icon-right>
+                                        <svg style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg"
+                                            viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                                            <path fill-rule="evenodd"
+                                                d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                                                clip-rule="evenodd" />
+                                        </svg>
+
+                                    </template>
+                                    Item Three (Parent)
+                                </MDropdownItem>
+
+                                <template #menu>
+                                    <MDropdownList>
+                                        <MDropdownItem @click="handleClick">
+                                            Child One
+                                        </MDropdownItem>
+                                        <MDropdownItem>
+                                            Child Two
+                                        </MDropdownItem>
+                                    </MDropdownList>
+                                </template>
+                            </MDropdown>
+                        </MDropdownList>
+                    </template>
+                </MDropdown>
+            </MDropdownList>
+        </template>
+    </MDropdown>
+</template>
+
+<script lang="ts" setup>
+
+const handleClick = () => {
+    alert('hi');
+}
+</script>

package/src/components/dropdown/examples/context.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <div style="background: #eee; width: 500px; height: 500px;" @contextmenu="handleContextMenu">
+
+        </div>
+
+        <MDropdown :virtual="position" :open="showing">
+            <template #menu>
+                <MDropdownList>
+                    <MDropdownItem>
+                        Item One
+                    </MDropdownItem>
+                    <MDropdownItem>
+                        Item Two
+                    </MDropdownItem>
+
+                    <MDropdown>
+                        <MDropdownItem>
+                            <template #icon-right>
+                                <svg style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                                    <path fill-rule="evenodd"
+                                        d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                                        clip-rule="evenodd" />
+                                </svg>
+
+                            </template>
+                            Item Three (Parent)
+                        </MDropdownItem>
+
+                        <template #menu>
+                            <MDropdownList>
+                                <MDropdownItem @click="handleClick">
+                                    Child One
+                                </MDropdownItem>
+                                <MDropdownItem>
+                                    Child Two
+                                </MDropdownItem>
+                            </MDropdownList>
+                        </template>
+                    </MDropdown>
+                </MDropdownList>
+            </template>
+        </MDropdown>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, ref, reactive } from 'vue';
+
+const showing = ref(false);
+const position = reactive({
+    x: 0,
+    y: 0
+})
+
+const handleContextMenu = (e: MouseEvent) => {
+    e.preventDefault();
+    showing.value = false;
+    nextTick().then(() => {
+        showing.value = true;
+
+        position.x = e.clientX;
+        position.y = e.clientY;
+    })
+}
+
+const handleClick = () => {
+    alert('hi');
+}
+</script>

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

@@ -0,0 +1,23 @@
+import MDropdown from '../Dropdown.vue';
+import MDropdownList from '../DropdownList.vue';
+import MDropdownItem from '../DropdownItem.vue';
+import MButton from '../../button/Button.vue';
+
+import {
+    MDropdownBasic,
+    MDropdownContext
+} from './index';
+import { createStory } from '@/__storybook__';
+
+export default {
+    component: MDropdown,
+    subcomponents: {
+        MDropdownList,
+        MDropdownItem,
+        MButton
+    },
+    title: 'Components/Dropdown'
+}
+
+export const Basic = createStory(MDropdownBasic);
+export const Context = createStory(MDropdownContext);

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

@@ -0,0 +1,2 @@
+export { default as MDropdownBasic } from './basic.vue';
+export { default as MDropdownContext } from './context.vue';

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

@@ -0,0 +1,73 @@
+<template>
+    <MForm @submit="onSubmit" :loading="loading">
+        <MInput
+            label="Email"
+            placeholder="Email Address" 
+            name="email" 
+            v-model="email" 
+            :rules="[rules.isRequired, rules.isEmail]"
+        />
+
+        <MInput
+            label="Name"
+            placeholder="Name" 
+            name="name" 
+            v-model="name" 
+            :rules="[rules.isRequired]"
+        />
+
+        <MSelect
+            label="Option"
+            v-model="option"
+            :options="options"
+            :option-value="'id'"
+            :option-label="'name'"
+            :rules="[rules.isRequired]"
+            />
+
+        <MCheckbox
+            label="Agree to terms"
+            v-model="agree"
+            :rules="[rules.isRequired]"
+        >
+            Something here!
+        </MCheckbox>
+
+
+        <MButton type="submit" color="blue">Submit</MButton>
+    </MForm>
+</template>
+
+<script lang="ts" setup>
+import { MCheckbox, MSelect } from '@/components';
+import { ref } from 'vue';
+
+const rules = {
+    isEmail: (v: any) => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid',
+    isRequired: (v: any) => !!v || 'Field is required',
+}
+
+const options = Array.from({ length: 50 }, (_, i) => ({
+    id: i+1,
+    name: `Option ${i+1}`
+}));
+
+const loading = ref(false);
+const email = ref('');
+const name = ref('');
+const option = ref('');
+const agree = ref(false);
+
+
+function onSubmit(valid: boolean) {
+    if (valid) {
+        loading.value = true;
+        setTimeout(() => {
+            console.log('submit', { email: email.value, name: name.value });
+            loading.value = false;
+        }, 3000);
+    } else {
+        console.log('invalid');
+    }
+}
+</script>