@teammodlr/ui-kit 2.1.49 → 2.1.52

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

@@ -1,19 +1,19 @@
-import MBadge from '../Badge.vue';
-
-import { MBadgeBasic } from './index';
-
-import {
-    variantArgType,
-    createStory,
-    sizeArgType
-} from '../../../__storybook__';
-
-export default {
-    component: MBadge,
-    title: 'Components/Badge',
-    argTypes: {
-        ...variantArgType()
-    }
-};
-
-export const Basic = createStory(MBadgeBasic);
+import MBadge from '../Badge.vue';
+
+import { MBadgeBasic } from './index';
+
+import {
+    variantArgType,
+    createStory,
+    sizeArgType
+} from '../../../__storybook__';
+
+export default {
+    component: MBadge,
+    title: 'Components/Badge',
+    argTypes: {
+        ...variantArgType()
+    }
+};
+
+export const Basic = createStory(MBadgeBasic);

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

@@ -1,16 +1,16 @@
-import MBreadcrumb from '../Breadcrumb.vue';
-import MBreadcrumbItem from '../BreadcrumbItem.vue';
-
-import { MBreadcrumbBasic } from './index';
-
-import { createStory } from '../../../__storybook__';
-
-export default {
-    component: MBreadcrumb,
-    subcomponents: {
-        MBreadcrumbItem
-    },
-    title: 'Components/Breadcrumb'
-};
-
-export const Basic = createStory(MBreadcrumbBasic);
+import MBreadcrumb from '../Breadcrumb.vue';
+import MBreadcrumbItem from '../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/button/examples/index.stories.ts

@@ -1,37 +1,37 @@
-import MButton from '../Button.vue';
-import {
-    MButtonBasic,
-    MButtonSize,
-    MButtonRounded,
-    MButtonVariant,
-    MButtonVariantSecondary,
-    MButtonDisabled,
-    MButtonIconLeft,
-    MButtonIcon,
-    MButtonLink
-} from './index';
-
-import {
-    variantArgType,
-    createStory,
-    sizeArgType
-} from '../../../__storybook__';
-
-export default {
-    component: MButton,
-    title: 'Components/Buttons/Button',
-    argTypes: {
-        ...variantArgType(),
-        ...sizeArgType()
-    }
-};
-
-export const Basic = createStory(MButtonBasic);
-export const Size = createStory(MButtonSize);
-export const Rounded = createStory(MButtonRounded);
-export const Colors = createStory(MButtonVariant);
-export const ColorsSecondary = createStory(MButtonVariantSecondary);
-export const Disabled = createStory(MButtonDisabled);
-export const IconLeft = createStory(MButtonIconLeft);
-export const Icon = createStory(MButtonIcon);
-export const Link = createStory(MButtonLink);
+import MButton from '../Button.vue';
+import {
+    MButtonBasic,
+    MButtonSize,
+    MButtonRounded,
+    MButtonVariant,
+    MButtonVariantSecondary,
+    MButtonDisabled,
+    MButtonIconLeft,
+    MButtonIcon,
+    MButtonLink
+} from './index';
+
+import {
+    variantArgType,
+    createStory,
+    sizeArgType
+} from '../../../__storybook__';
+
+export default {
+    component: MButton,
+    title: 'Components/Buttons/Button',
+    argTypes: {
+        ...variantArgType(),
+        ...sizeArgType()
+    }
+};
+
+export const Basic = createStory(MButtonBasic);
+export const Size = createStory(MButtonSize);
+export const Rounded = createStory(MButtonRounded);
+export const Colors = createStory(MButtonVariant);
+export const ColorsSecondary = createStory(MButtonVariantSecondary);
+export const Disabled = createStory(MButtonDisabled);
+export const IconLeft = createStory(MButtonIconLeft);
+export const Icon = createStory(MButtonIcon);
+export const Link = createStory(MButtonLink);

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

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

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

@@ -1,16 +1,16 @@
-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);
+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/collapse/Collapse.vue

@@ -0,0 +1,143 @@
+<script lang="ts">
+import { computed, defineComponent, provide, ref, type ExtractPropTypes, type ExtractPublicPropTypes, type InjectionKey, type PropType, type Ref, type Slots } from 'vue';
+import { active } from '../pagination/style';
+import { merge } from 'treemate/lib/utils';
+import { call, type MaybeArray } from '../../call';
+import type { HeaderClickInfo, OnItemHeaderClick, OnItemHeaderClickImpl, OnUpdateExpandedNames, OnUpdateExpandedNamesImpl } from './interface';
+import { useMergedState } from 'vooks'
+
+export const collapseProps = {
+    accordion: {
+        type: Boolean,
+        default: false
+    },
+    displayDirective: {
+        type: String as PropType<'if' | 'show'>,
+        default: 'if'
+    },
+    arrowPlacement: {
+        type: String as PropType<'left' | 'right'>,
+        default: 'left'
+    },
+    defaultExpandedNames: {
+        type: [Array, String] as PropType<
+            string | number | Array<string | number> | null
+        >,
+        default: null
+    },
+    expandedNames: [Array, String] as PropType<
+        string | number | Array<string | number> | null
+    >,
+    onItemHeaderClick: [Function, Array] as PropType<
+        MaybeArray<OnItemHeaderClick>
+    >,
+    'onUpdate:expandedNames': [Function, Array] as PropType<
+        MaybeArray<OnUpdateExpandedNames>
+    >,
+    onUpdateExpandedNames: [Function, Array] as PropType<
+        MaybeArray<OnUpdateExpandedNames>
+    >,
+} as const;
+
+export type CollapseProps = ExtractPublicPropTypes<typeof collapseProps>;
+
+export interface CollapseInjection {
+    props: ExtractPropTypes<typeof collapseProps>,
+    expandedNamesRef: Ref<string | number | Array<string | number> | null>,
+    slots: Slots,
+    toggleItem: (
+        collapse: boolean,
+        name: string | number,
+        event: MouseEvent
+    ) => void
+}
+
+export const collapseInjectionKey: InjectionKey<CollapseInjection> = Symbol('collapse');
+export default defineComponent({
+    name: 'Collapse',
+    props: collapseProps,
+    setup(props, { slots }) {
+        const uncontrolledExpandedNamesRef = ref<
+            string | number | Array<string | number> | null
+        >(props.defaultExpandedNames)
+        const controlledExpandedNamesRef = computed(() => props.expandedNames)
+        const mergedExpandedNamesRef = useMergedState(
+            controlledExpandedNamesRef,
+            uncontrolledExpandedNamesRef
+        )
+
+        function doUpdateExpandedNames(
+            names: Array<string | number> | string | number
+        ): void {
+            const {
+                onUpdateExpandedNames
+            } = props;
+
+            if (onUpdateExpandedNames) {
+                call(onUpdateExpandedNames as OnUpdateExpandedNamesImpl, names)
+            }
+
+            uncontrolledExpandedNamesRef.value = names;
+        }
+
+        function doItemHeaderClick<T extends string | number>(
+            info: HeaderClickInfo<T>
+        ): void {
+            const { onItemHeaderClick } = props
+            if (onItemHeaderClick) {
+                call(onItemHeaderClick as OnItemHeaderClickImpl, info)
+            }
+        }
+
+        function toggleItem(
+            collapse: boolean,
+            name: string | number,
+            event: MouseEvent
+        ): void {
+            const { accordion } = props
+            const { value: expandedNames } = mergedExpandedNamesRef
+            if (accordion) {
+                if (collapse) {
+                    doUpdateExpandedNames([name])
+                    doItemHeaderClick({ name, expanded: true, event })
+                } else {
+                    doUpdateExpandedNames([])
+                    doItemHeaderClick({ name, expanded: false, event })
+                }
+            } else {
+                if (!Array.isArray(expandedNames)) {
+                    doUpdateExpandedNames([name])
+                    doItemHeaderClick({ name, expanded: true, event })
+                } else {
+                    const activeNames = expandedNames.slice()
+                    const index = activeNames.findIndex(
+                        (activeName) => name === activeName
+                    )
+                    if (~index) {
+                        activeNames.splice(index, 1)
+                        doUpdateExpandedNames(activeNames)
+                        doItemHeaderClick({ name, expanded: false, event })
+                    } else {
+                        activeNames.push(name)
+                        doUpdateExpandedNames(activeNames)
+                        doItemHeaderClick({ name, expanded: true, event })
+                    }
+                }
+            }
+        }
+
+        provide(collapseInjectionKey, {
+            props,
+            expandedNamesRef: mergedExpandedNamesRef,
+            slots,
+            toggleItem
+        })
+    }
+});
+</script>
+
+<template>
+    <div class="collapse">
+        <slot />
+    </div>
+</template>

package/src/components/collapse/CollapseItem.vue

@@ -0,0 +1,123 @@
+<script lang="ts">
+import { useMemo } from 'vooks';
+import { computed, defineComponent, inject, toRef } from 'vue'
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import { collapseInjectionKey } from './Collapse.vue';
+import MCollapseItemContent from './CollapseItemContent.vue';
+import * as style from './style';
+export const collapseItemProps = {
+    title: String,
+    name: [String, Number] as PropType<string | number>,
+    disabled: Boolean,
+    displayDirective: String as PropType<'if' | 'show'>,
+} as const
+
+export type CollapseItemProps = ExtractPublicPropTypes<typeof collapseItemProps>
+
+export default defineComponent({
+    name: 'CollapseItem',
+    props: collapseItemProps,
+    setup(props) {
+        const randomName = Math.random().toString(36).substring(7);
+        const mergedNameRef = useMemo(() => {
+            return props.name ?? randomName;
+        })
+
+        const collapse = inject(collapseInjectionKey);
+        if (!collapse) {
+            throw new Error('<MCollapseItem> must be placed inside <MCollapse>.')
+        }
+
+        const {
+            expandedNamesRef,
+            props: collapseProps,
+            slots: collapseSlots,
+        } = collapse;
+
+        const collapsedRef = computed<boolean>(() => {
+            const { value: expandedNames } = expandedNamesRef
+            if (Array.isArray(expandedNames)) {
+                const { value: name } = mergedNameRef
+                return !~expandedNames.findIndex(
+                    (expandedName) => expandedName === name
+                )
+            } else if (expandedNames) {
+                const { value: name } = mergedNameRef
+                return name !== expandedNames
+            }
+            return true
+        });
+
+        const computedContentClasses = computed(() => {
+            return {
+                [style.collapseItem]: true
+            }
+        });
+
+        const computedHeaderClasses = computed(() => {
+            return {
+                [style.collapseItemHeader]: true
+            }
+        });
+
+        const computedHeaderMainClasses = computed(() => {
+            return {
+                [style.collapseItemHeaderMain]: true
+            }
+        });
+
+        const computedIconClasses = computed(() => {
+            return {
+                [style.collapseItemHeaderArrow]: true,
+                [style.collapseItemHeaderArrowActive]: !collapsedRef.value
+            }
+        });
+
+        return {
+            computedContentClasses,
+            computedHeaderClasses,
+            computedHeaderMainClasses,
+            computedIconClasses,
+            collapseSlots,
+            randomName,
+            collapsed: collapsedRef,
+            mergedDisplayDirective: computed<'if' | 'show'>(() => {
+                const { displayDirective } = props;
+                if (displayDirective) {
+                    return displayDirective;
+                } else {
+                    return collapseProps.displayDirective;
+                }
+            }),
+            arrowPlacement: computed<'left' | 'right'>(() => {
+                return collapseProps.arrowPlacement;
+            }),
+            handleClick(e: MouseEvent) {
+                if (collapse && !props.disabled) {
+                    collapse.toggleItem(collapsedRef.value, mergedNameRef.value, e)
+                }
+            }
+        }
+    }
+});
+</script>
+
+<template>
+    <div :class="computedContentClasses">
+        <div @click="handleClick" :class="computedHeaderClasses">
+            <div :class="computedHeaderMainClasses">
+                <svg :class="computedIconClasses" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                    class="lucide lucide-chevron-right">
+                    <path d="m9 18 6-6-6-6" />
+                </svg>
+                <slot name="header">
+                    {{ title }}
+                </slot>
+            </div>
+        </div>
+        <MCollapseItemContent :displayDirective="mergedDisplayDirective" :show="!collapsed">
+            <slot />
+        </MCollapseItemContent>
+    </div>
+</template>

package/src/components/collapse/CollapseItemContent.vue

@@ -0,0 +1,58 @@
+<script lang="ts">
+import { computed, defineComponent, ref, toRef, type PropType } from 'vue'
+import { useFalseUntilTruthy } from 'vooks'
+import { collapseItemContentWrapper, collapseItemContentInner } from './style'
+export default defineComponent({
+    name: 'CollapseItemContent',
+    props: {
+        displayDirective: {
+            type: String as PropType<'if' | 'show'>,
+            required: true
+        },
+        show: Boolean
+    },
+    setup(props, { slots }) {
+        const onceTrueRef = useFalseUntilTruthy(toRef(props, 'show'))
+        const useVShow = ref(props.displayDirective === 'show' && onceTrueRef.value)
+
+        const wrapperClassesComputed = computed(() => {
+            return {
+                [collapseItemContentWrapper]: true
+            }
+        })
+
+        const innerClassesComputed = computed(() => {
+            return {
+                [collapseItemContentInner]: true
+            }
+        })
+
+        return {
+            onceTrue: onceTrueRef,
+            useVShow,
+            slots,
+            wrapperClassesComputed,
+            innerClassesComputed
+        }
+    }
+});
+</script>
+
+<template>
+    <div>
+        <div v-if="displayDirective === 'if' ? show : onceTrue">
+            <div :class="wrapperClassesComputed">
+                <div :class="innerClassesComputed">
+                    <slot />
+                </div>
+            </div>
+        </div>
+        <div v-show="displayDirective === 'show' && onceTrue" v-if="!show">
+            <div :class="wrapperClassesComputed">
+                <div :class="innerClassesComputed">
+                    <slot />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,13 @@
+<template>
+    <m-collapse :default-expanded-names="['1', '2']">
+        <m-collapse-item title="Ben is gay" name="1">
+            <div>yrs</div>
+        </m-collapse-item>
+        <m-collapse-item title="right" name="2">
+            <div>nice</div>
+        </m-collapse-item>
+        <m-collapse-item title="right" name="3">
+            <div>very good</div>
+        </m-collapse-item>
+    </m-collapse>
+</template>

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import MCollapse from '../Collapse.vue';
+import MCollapseItem from '../CollapseItem.vue';
+import { MCollapseBasic } from './index';
+import { createStory, sizeArgType } from '../../../__storybook__';
+
+
+const meta: Meta<typeof MCollapse> = {
+    title: 'Components/Collapse',
+    component: MCollapse,
+    subcomponents: { MCollapse },
+    argTypes: {
+    }
+}
+
+export default meta;
+type Story = StoryObj<typeof MCollapse>;
+export const Default = createStory(MCollapseBasic) as Story;

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

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

package/src/components/collapse/interface.ts

@@ -0,0 +1,38 @@
+export type OnUpdateExpandedNames = <
+    T extends string[] &
+    number[] &
+    Array<string | number> &
+    (string | number | null) &
+    (string | null) &
+    (number | null)
+>(
+    value: T
+) => void
+
+export type OnUpdateExpandedNamesImpl = <
+    T extends
+    | string[]
+    | number[]
+    | Array<string | number>
+    | (string | number | null)
+    | (string | null)
+    | (number | null)
+>(
+    value: T
+) => void
+
+export type OnItemHeaderClick = <T extends string & number & (string | number) >(
+    info: HeaderClickInfo<T>
+) => void
+
+export type OnItemHeaderClickImpl = <
+    T extends string | number | (string | number)
+>(
+    info: HeaderClickInfo<T>
+) => void
+
+export interface HeaderClickInfo<T> {
+    name: T
+    expanded: boolean
+    event: MouseEvent
+}