@teammodlr/ui-kit 2.1.51 → 2.1.52

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
+}

package/src/components/collapse/style/Collapse.css.ts

@@ -0,0 +1,87 @@
+import {
+    createVar,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+const vars = {
+    gap: createVar(),
+    fontSize: createVar(),
+    fontColor: createVar(),
+    borderColor: createVar(),
+    headerPadding: createVar()
+}
+
+export const wrapper = style({
+    width: '100%',
+    display: 'block'
+})
+
+export const collapseItem = style({
+    vars: {
+        [vars.gap]: '16px',
+        [vars.fontSize]: '15px',
+        [vars.fontColor]: themeVars.color.gray[800],
+        [vars.borderColor]: themeVars.color.gray[200],
+        [vars.headerPadding]: '16px 0 0 0'
+    },
+    display: 'block',
+    fontSize: vars.fontSize,
+    color: vars.fontColor,
+    marginTop: vars.gap,
+    selectors: {
+        '&:not(:first-child)': {
+            borderTop: `1px solid ${vars.borderColor}`
+        }
+
+    }
+});
+
+export const collapseItemHeader = style({
+    fontSize: vars.fontSize,
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    position: 'relative',
+    color: vars.fontColor,
+    padding: vars.headerPadding
+});
+
+
+export const collapseItemHeaderMain = style({
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    width: '100%',
+    cursor: 'pointer',
+    flex: 1,
+    gap: '6px'
+});
+
+export const collapseItemHeaderArrow = style({
+    cursor: 'pointer',
+    display: 'flex',
+    width: '16px',
+    height: '16px',
+    color: vars.fontColor,
+    transform: 'rotate(0deg)',
+    transition: 'transform .2s ease-in-out',
+    verticalAlign: 'middle',
+    position: 'relative',
+    top: '1px'
+})
+
+export const collapseItemHeaderArrowActive = style({
+    transform: 'rotate(90deg)',
+})
+
+export const collapseItemContentWrapper = style({
+    display: 'block',
+    fontSize: vars.fontSize,
+    color: vars.fontColor,
+});
+
+export const collapseItemContentInner = style({
+    paddingTop: vars.gap,
+})

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

@@ -0,0 +1 @@
+export * from './Collapse.css';

package/src/components/index.ts

@@ -1,48 +1,51 @@
-export { default as MRenderer } from './renderer/renderer';
-export { default as MConfigProvider } from './configprovider/ConfigProvider.vue';
-export { default as MAvatar } from './avatar/Avatar.vue';
-export { default as MAvatarGroup } from './avatargroup/AvatarGroup.vue';
-export { default as MBadge } from './badge/Badge.vue';
-export { default as MBreadcrumb } from './breadcrumb/Breadcrumb.vue';
-export { default as MBreadcrumbItem } from './breadcrumb/BreadcrumbItem.vue';
-export { default as MButton } from './button/Button.vue';
-export { default as MButtonGroup } from './buttongroup/ButtonGroup.vue';
-export { default as MCheckbox } from './checkbox/Checkbox.vue';
-export { default as MColorPicker } from './colorpicker/ColorPicker.vue';
-export { default as MDropdown } from './dropdown/Dropdown.vue';
-export { default as MDropdownItem } from './dropdown/DropdownItem.vue';
-export { default as MDropdownList } from './dropdown/DropdownList.vue';
-export { default as MDropdownSeperator } from './dropdown/DropdownSeperator.vue';
-export { default as MDropdownHeading } from './dropdown/DropdownHeading.vue';
-export { default as MDropdownWrapper } from './dropdown/DropdownWrapper.vue';
-export { default as MForm } from './form/Form.vue';
-export { default as MImage } from './image/Image.vue';
-export { default as MInput } from './input/Input.vue';
-export { default as MLink } from './link/Link.vue';
-export { default as MMessageProvider } from './messageprovider/MessageProvider.vue';
-export { default as MModal } from './modal/Modal.vue';
-export { default as MPagination } from './pagination/Pagination.vue';
-export { default as MRadio } from './radio/Radio.vue';
-export { default as MRadioButton } from './radiobutton/RadioButton.vue';
-export { default as MRadioButtonGroup } from './radiobuttongroup/RadioButtonGroup.vue';
-export { default as MSelect } from './select/Select.vue';
-export { default as MSkeleton } from './skeleton/Skeleton.vue';
-export { default as MSlider } from './slider/Slider.vue';
-export { default as MSwitch } from './switch/Switch.vue';
-export { default as MTab } from './tab/Tab.vue';
-export { default as MTabGroup } from './tab/TabGroup.vue';
-export { default as MTable } from './table/Table.vue';
-export { default as MTableBody } from './table/TableBody.vue';
-export { default as MTableCell } from './table/TableCell.vue';
-export { default as MTableHead } from './table/TableHead.vue';
-export { default as MTableHeadRow } from './table/TableHeadRow.vue';
-export { default as MTableRow } from './table/TableRow.vue';
-export { default as MTag } from './tag/Tag.vue';
-export { default as MTextarea } from './textarea/Textarea.vue';
-export { default as MTooltip } from './tooltip/Tooltip.vue';
-export { default as MTransfer } from './transfer/Transfer.vue';
-export { default as MVirtualScroll } from './virtualscroll/VirtualScroll.vue';
-export { default as MConfirm } from './confirm/Confirm.vue';
-export { default as MConfirmProvider } from './confirm/ConfirmProvider.vue';
-export { default as MDialog } from './dialog/Dialog.vue';
-export { default as MTree } from './tree/Tree.vue';
+export { default as MRenderer } from './renderer/renderer';
+export { default as MCollapse } from './collapse/Collapse.vue';
+export { default as MCollapseItem } from './collapse/CollapseItem.vue';
+export { default as MCollapseItemContent } from './collapse/CollapseItemContent.vue';
+export { default as MConfigProvider } from './configprovider/ConfigProvider.vue';
+export { default as MAvatar } from './avatar/Avatar.vue';
+export { default as MAvatarGroup } from './avatargroup/AvatarGroup.vue';
+export { default as MBadge } from './badge/Badge.vue';
+export { default as MBreadcrumb } from './breadcrumb/Breadcrumb.vue';
+export { default as MBreadcrumbItem } from './breadcrumb/BreadcrumbItem.vue';
+export { default as MButton } from './button/Button.vue';
+export { default as MButtonGroup } from './buttongroup/ButtonGroup.vue';
+export { default as MCheckbox } from './checkbox/Checkbox.vue';
+export { default as MColorPicker } from './colorpicker/ColorPicker.vue';
+export { default as MDropdown } from './dropdown/Dropdown.vue';
+export { default as MDropdownItem } from './dropdown/DropdownItem.vue';
+export { default as MDropdownList } from './dropdown/DropdownList.vue';
+export { default as MDropdownSeperator } from './dropdown/DropdownSeperator.vue';
+export { default as MDropdownHeading } from './dropdown/DropdownHeading.vue';
+export { default as MDropdownWrapper } from './dropdown/DropdownWrapper.vue';
+export { default as MForm } from './form/Form.vue';
+export { default as MImage } from './image/Image.vue';
+export { default as MInput } from './input/Input.vue';
+export { default as MLink } from './link/Link.vue';
+export { default as MMessageProvider } from './messageprovider/MessageProvider.vue';
+export { default as MModal } from './modal/Modal.vue';
+export { default as MPagination } from './pagination/Pagination.vue';
+export { default as MRadio } from './radio/Radio.vue';
+export { default as MRadioButton } from './radiobutton/RadioButton.vue';
+export { default as MRadioButtonGroup } from './radiobuttongroup/RadioButtonGroup.vue';
+export { default as MSelect } from './select/Select.vue';
+export { default as MSkeleton } from './skeleton/Skeleton.vue';
+export { default as MSlider } from './slider/Slider.vue';
+export { default as MSwitch } from './switch/Switch.vue';
+export { default as MTab } from './tab/Tab.vue';
+export { default as MTabGroup } from './tab/TabGroup.vue';
+export { default as MTable } from './table/Table.vue';
+export { default as MTableBody } from './table/TableBody.vue';
+export { default as MTableCell } from './table/TableCell.vue';
+export { default as MTableHead } from './table/TableHead.vue';
+export { default as MTableHeadRow } from './table/TableHeadRow.vue';
+export { default as MTableRow } from './table/TableRow.vue';
+export { default as MTag } from './tag/Tag.vue';
+export { default as MTextarea } from './textarea/Textarea.vue';
+export { default as MTooltip } from './tooltip/Tooltip.vue';
+export { default as MTransfer } from './transfer/Transfer.vue';
+export { default as MVirtualScroll } from './virtualscroll/VirtualScroll.vue';
+export { default as MConfirm } from './confirm/Confirm.vue';
+export { default as MConfirmProvider } from './confirm/ConfirmProvider.vue';
+export { default as MDialog } from './dialog/Dialog.vue';
+export { default as MTree } from './tree/Tree.vue';