@teammodlr/ui-kit 2.0.40 → 2.1.1

package/src/components/dialog/types.ts

@@ -0,0 +1,34 @@
+import type { Variant } from '../../types/props';
+import type { VNodeChild } from 'vue';
+
+export type DialogContentType = string;
+
+export type DialogContentRender = (props: any) => VNodeChild;
+
+export interface DialogOptions {
+    title?: string,
+    render?: DialogContentRender,
+    content: DialogContentType,
+    onClose?: () => void,
+    onOpen?: () => void,
+    onOk?: () => void,
+    onCancel?: () => void,
+    okVariant?: Variant,
+    okText?: DialogContentType,
+    cancelText?: DialogContentType,
+}
+
+export interface DialogResponse {
+    result: boolean,
+    data: any
+}
+
+export interface DialogApiInjection {
+    create: (options: DialogOptions) => Dialog
+    destroyAll: () => void
+}
+
+
+export interface Dialog extends DialogOptions {
+    destroy: () => void
+}

package/src/components/dialog/useDialog.ts

@@ -0,0 +1,12 @@
+import { inject } from 'vue';
+import type { DialogApiInjection } from './types';
+
+export function useDialog(): DialogApiInjection {
+    const api = inject('m-dialog', null);
+
+    if (api === null) {
+        throw new Error('m-dialog api is not provided, ensure the component is wrapped in <m-dialog-provider />.');
+    }
+
+    return api;
+}

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as MRenderer } from './renderer/renderer';
 export { default as MAvatar } from './avatar/Avatar.vue';
 export { default as MAvatarGroup } from './avatargroup/AvatarGroup.vue';
 export { default as MBadge } from './badge/Badge.vue';
@@ -39,3 +40,5 @@ 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 MDialog } from './dialog/Dialog.vue';
+export { default as MDialogProvider } from './dialog/DialogProvider.vue';

package/src/components/messageprovider/MessageProvider.vue

@@ -1,13 +1,13 @@
 <template>
     <slot />
-    <template v-if="messageList.length">
+    <template>
         <Teleport :to="teleportTo ?? 'body'">
             <transition
                 type="animation"
-                :enter-active-class="scale.enterActive"
-                :leave-active-class="scale.leaveActive"
-                :enter-from-class="scale.enterFrom"
-                :leave-to-class="scale.leaveTo"
+                :enter-active-class="modalScale.enterActive"
+                :leave-active-class="modalScale.leaveActive"
+                :enter-from-class="modalScale.enterFrom"
+                :leave-to-class="modalScale.leaveTo"
             >
             <div :class="classes">
                 <MMessage v-for="message in messageList" 
@@ -39,7 +39,7 @@ import type { PropType } from 'vue';
 import MMessage from './Message.vue';
 import { useCachedUid } from '../../composables/useCachedUid';
 import * as style from './style';
-import { scale } from '../../styles/transitions.css';
+import { modalScale } from '../../styles/transitions.css';
 export type MessageProviderInst = MessageApiInjection;
 
 interface PrivateMessageReactive extends MessageReactive {
@@ -144,7 +144,7 @@ export default defineComponent({
                 messageList: messageListRef,
                 onInternalAfterLeave,
                 classes,
-                scale
+                modalScale
             },
             api,
         )

package/src/components/messageprovider/style/Message.css.ts

@@ -35,7 +35,8 @@ export const base = style({
     fontSize: themeVars.fontSize.base,
     color: themeVars.color.font.text,
     alignItems: "center",
-    transition: "top 0.3s ease-out 0.5s, bottom 0.3s ease-out 0.5s",
+    willChange: "top, bottom, width",
+    transition: "top 0.3s ease-out 0.5s, bottom 0.3s ease-out 0.5s, width 0.3s ease-out 0.5s",
 })
 
 export const placement = styleVariants({

package/src/components/modal/Modal.vue

@@ -7,7 +7,7 @@
             :enter-from-class="fade.enterFrom"
             :leave-to-class="fade.leaveTo"
         >
-            <div v-show="isOpen" :class="style.background" :style="{zIndex: zIndex}" @click="closeOutside">
+            <div v-show="isOpen" :class="style.background" :style="{zIndex: zIndex}" @mousedown="closeOutside">
                 <Transition
                     type="animation"
                     :enter-active-class="modalScale.enterActive"
@@ -46,11 +46,10 @@
 import type {PropType} from "vue";
 import type {Size} from "../../types/props";
 import {defineComponent, ref, computed, watch, nextTick} from 'vue';
-import {useFocusTrap} from '@vueuse/integrations/useFocusTrap'
 import * as style from './style';
 import { modalScale, fade } from "../../styles/transitions.css";
 import {useZIndex} from "../../composables/useZIndex";
-import { useMagicKeys, watchOnce } from "@vueuse/core";
+import { useEventListener, useMagicKeys } from "@vueuse/core";
 
 export default defineComponent({
     name: "MModal",
@@ -67,6 +66,10 @@ export default defineComponent({
             type: Boolean,
             default: true
         },
+        onClose: {
+            type: Function as PropType<() => void>,
+            default: () => {}
+        },
         zIndex: {
             type: Number
         }
@@ -77,11 +80,13 @@ export default defineComponent({
         const isOpen = ref(false);
         const target = ref();
         const zIndex = ref(props.zIndex ?? nextZIndex());
-        const {hasFocus, activate, deactivate} = useFocusTrap(target, {
-            immediate: true,
-            escapeDeactivates: false,
-            allowOutsideClick: true
-        });
+
+        const clickInside = ref(false);
+        // const {hasFocus, activate, deactivate} = useFocusTrap(target, {
+        //     immediate: true,
+        //     escapeDeactivates: false,
+        //     allowOutsideClick: true
+        // });
 
         const { escape } = useMagicKeys()
 
@@ -98,13 +103,19 @@ export default defineComponent({
             ];
         });
 
+        useEventListener(target, 'mousedown', handleMouseDown);
+        useEventListener(document, 'mouseup', handleMouseUp);
+
         const closeOutside = () => {
-            if (props.canClickOutside) {
+            if (props.canClickOutside && !clickInside.value) {
                 close();
             }
         };
 
         const close = () => {
+            if (props.onClose) {
+                props.onClose();
+            }
             ownerScrollbarClose();
             isOpen.value = false;
         };
@@ -115,6 +126,18 @@ export default defineComponent({
             isOpen.value = true;
         };
 
+        function handleMouseUp(event: MouseEvent) {
+            nextTick(() => {
+                if (clickInside.value) {
+                    clickInside.value = false;
+                }
+            });
+        }
+
+        function handleMouseDown(event: MouseEvent) {
+            clickInside.value = true;
+        }
+
         function ownerScrollbarOpen() {
             let ownerWindow = window;
             let documentElement = ownerWindow.document.documentElement;
@@ -144,16 +167,18 @@ export default defineComponent({
                 zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
                 emit('open');
                 nextTick(() => {
-                    activate()
+                    // activate()
                 })
             } else {
-                deactivate()
+                // deactivate()
             }
         });
 
         return {
             close,
             closeOutside,
+            handleMouseUp,
+            handleMouseDown,
             open,
             target,
             style,

package/src/components/radio/Radio.vue

@@ -1,17 +1,18 @@
 <template>
-    <label :class="style.base" @click.prevent="toggle">
+    <label :class="style.base">
         <input
-                v-model="checked"
-                type="radio"
-                :aria-checked="checked ? 'true' : 'false'"
-                :aria-disabled="(disabled || loading) ? 'true' : 'false'"
-                :aria-labelledby="`${id}-label`"
-                :disabled="disabled || loading"
-                :name="name"
-                :id="id"
-                :class="style.input"
-                v-bind="$attrs"
-                v-on="inputListeners"
+            v-model="pick"
+            :value="value"
+            type="radio"
+            :aria-checked="checked ? 'true' : 'false'"
+            :aria-disabled="(disabled || loading) ? 'true' : 'false'"
+            :aria-labelledby="`${id}-label`"
+            :disabled="disabled || loading"
+            :name="name"
+            :id="id"
+            v-bind="$attrs"
+            v-on="inputListeners"
+            :class="style.input"
         />
         <span :class="classes"></span>
         <span :class="style.label" :id="`${id}-label`">
@@ -27,10 +28,11 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, toRef, ref, type PropType, watch, computed, defineExpose } from 'vue';
-import {useInput} from '../../composables/useInput';
-import {useInteractive} from "../../composables/useInteractive";
-import type {Size} from '../../types/props';
+import type { PropType } from 'vue';
+import { computed, defineComponent, defineExpose, ref, toRef } from 'vue';
+import { useInput } from '../../composables/useInput';
+import { useInteractive } from "../../composables/useInteractive";
+import type { Size } from '../../types/props';
 import * as style from './style';
 
 export default defineComponent({
@@ -53,6 +55,10 @@ export default defineComponent({
         loading: {
             type: Boolean,
             default: false
+        },
+        value: {
+            type: [String, Number, Boolean],
+            default: null
         }
     },
     setup(props, {slots, emit}) {
@@ -74,8 +80,16 @@ export default defineComponent({
 
         const disabled = computed(() => formDisabled || formLoading || props.disabled || props.loading);
         const name = toRef(props, 'name');
-        const checked = ref(false);
+        const checked = computed(() => props.modelValue === props.value);
         const hasSlot = computed(() => !!(slots.default));
+        const pick = computed({
+            get() {
+                return props.modelValue;
+            },
+            set(value) {
+                emit('update:modelValue', value);
+            }
+        });
 
         const classes = computed(() => {
             return [
@@ -92,21 +106,6 @@ export default defineComponent({
             return formError.value || props.error;
         });
 
-        watch(() => props.modelValue, (value) => {
-            checked.value = !!value;
-        }, {immediate: true});
-
-        watch(() => checked.value, (value) => {
-            emit('update:modelValue', value);
-        });
-
-        function toggle() {
-            if (disabled.value) {
-                return;
-            }
-            checked.value = !checked.value;
-        }
-
         defineExpose({
             focus,
             blur,
@@ -122,9 +121,9 @@ export default defineComponent({
             disabled,
             name,
             checked,
+            pick,
             radioRef,
             inputError,
-            toggle,
             style,
             classes,
             hasSlot,

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

@@ -1,9 +1,8 @@
 <template>
-    <MRadio v-model="checked" label="Test" />
+    <MRadio label="Test" name="item" value="sms" v-model="selected" />
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-
-const checked = ref(false);
+const selected = ref('');
 </script>

package/src/components/radio/examples/group.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <MRadio label="SMS" name="item" value="sms" v-model="selected" /><br />
+        <MRadio label="Email" name="item" value="email" v-model="selected" />
+        <div>
+            Selected: {{ selected }}
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const selected = ref('sms');
+</script>

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

@@ -1,6 +1,7 @@
 import MRadio from "../Radio.vue";
 import {
     MRadioBasic,
+    MRadioGroup,
 } from "./index";
 
 import {
@@ -17,3 +18,4 @@ export default {
 }
 
 export const Basic = createStory(MRadioBasic);
+export const Group = createStory(MRadioGroup);

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

@@ -1,2 +1,3 @@
 export { default as MRadioBasic } from './basic.vue';
+export { default as MRadioGroup } from './group.vue';
 

package/src/components/renderer/examlpes/basic.vue

@@ -0,0 +1,23 @@
+<template>
+    <MRenderer :h="renderMessage" :props="{ message: msg }">
+    </MRenderer>
+</template>
+  
+<script setup lang="ts">
+import { h, ref } from 'vue'
+const msg = ref('some content')
+
+function renderMessage({ message }: { message: string }) {
+    return h('p', [
+        'Here are ',
+        h(
+            'span',
+            {
+                style: 'color: red'
+            },
+            [message]
+        ),
+        ' that using render function',
+    ])
+}
+</script>

package/src/components/renderer/examlpes/index.stories.ts

@@ -0,0 +1,18 @@
+import MRenderer from "../renderer";
+import {
+    MRendererBasic,
+} from "./index";
+
+import {
+    createStory, sizeArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MRenderer,
+    title: 'Components/Renderer',
+    argTypes: {
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MRendererBasic);

package/src/components/renderer/examlpes/index.ts

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

package/src/components/renderer/props.ts

@@ -0,0 +1,15 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+
+export const rendererProps = {
+    h: {
+        type: Function,
+        default: null
+    },
+    props: {
+        type: Object as PropType<Record<string, any>>,
+        default: undefined
+    }
+}
+
+export type RendererProps = ExtractPropTypes<typeof rendererProps>

package/src/components/renderer/renderer.ts

@@ -0,0 +1,16 @@
+import { defineComponent, renderSlot } from 'vue';
+import { rendererProps } from './props';
+
+export default defineComponent({
+    name: "Renderer",
+    props: rendererProps,
+    setup(props, { slots }) {
+        return () => {
+            if (typeof props.h !== 'function') {
+                return renderSlot(slots, 'default', props.props);
+            }
+
+            return props.h(props.props);
+        }
+    }
+})

package/src/components/select/Select.vue

@@ -41,7 +41,8 @@
                     <div :class="style.menu" v-if="isOpen" ref="popper" :style="computedConsistentWidth"
                          :aria-hidden="isOpen ? 'false' : 'true'">
                         <div v-if="searchable" :class="style.search">
-                            <MInput v-model="search" placeholder="Search" size="sm" ref="searchRef"/>
+                            <!-- <MInput v-model="search" placeholder="Search" size="sm" ref="searchRef"/> -->
+                            <input type="text" ref="searchRef" v-model="search" placeholder="Search" :class="style.searchInput" />
                         </div>
                         <div :class="style.options">
                             <div v-for="(option, index) in computedOptions" :key="index" ref="optionsRef"
@@ -54,6 +55,11 @@
                                  @hover="selectedIndex = index">
                                 {{ option.label }}
                             </div>
+                            <template v-if="computedOptions.length === 0">
+                                <div :class="style.noResults">
+                                    No results
+                                </div>
+                            </template>
                         </div>
                     </div>
                 </Transition>

package/src/components/select/style/Select.css.ts

@@ -63,6 +63,7 @@ export const base = style({
     lineHeight: vars.height,
     boxSizing: 'border-box',
     resize: 'none',
+    cursor: 'pointer',
     boxShadow: 'none',
     transition: `color .3s ${themeVars.transition.default},
         background-color .3s ${themeVars.transition.default},
@@ -194,13 +195,23 @@ export const placeholder = style({
 })
 
 export const search = style({
-    padding: `${themeVars.space[1]} ${themeVars.space[1]} 0`,
+    // padding: `${themeVars.space[1]} ${themeVars.space[1]} 0`,
     backgroundColor: '#FFFFFF',
     position: 'sticky',
     top: 0,
     zIndex: 1,
 });
 
+export const searchInput = style({
+    padding: `${themeVars.space[2.5]} ${themeVars.space[2.5]}`,
+    border: 'none',
+    outline: 'none',
+    width: '100%',
+    fontSize: themeVars.fontSize.base,
+    borderBottom: `1px solid ${themeVars.color.gray[200]}`,
+    color: themeVars.color.gray[800],
+});
+
 export const options = style({
     padding: themeVars.space[1],
     display: 'flex',
@@ -259,3 +270,16 @@ export const optionSelected = style({
         },
     }
 });
+
+export const noResults = style({
+    padding: `${themeVars.space[2]} 0`,
+    display: 'flex',
+    // flexDirection: 'column',
+    alignItems: 'center',
+    textAlign: 'center',
+    justifyContent: 'center',
+    gap: themeVars.space[0.5],
+    width: '100%',
+    color: themeVars.color.gray[500],
+    fontSize: themeVars.fontSize.small,
+});

package/src/composables/index.ts

@@ -1,3 +1,4 @@
 export { useMessage } from '../components/messageprovider/useMessage';
+export { useDialog } from '../components/dialog/useDialog';
 export { usePopper } from './usePopper';
-export { useZIndex } from './useZIndex';
+export { useZIndex } from './useZIndex';

package/src/composables/useZIndex.ts

@@ -1,6 +1,5 @@
 import type {InjectionKey, Ref} from "vue";
 import {computed, inject, ref, unref} from "vue";
-import {isNumber} from "@vueuse/core";
 
 const zIndex = ref(0);
 export const initialZIndex = 1000;
@@ -11,7 +10,10 @@ export const useZIndex = (override?: Ref<number>) => {
 
     const initial = computed(() => {
         const fromInjection = unref(injection);
-        return isNumber(fromInjection) ? fromInjection : initialZIndex;
+        if (fromInjection === undefined || isNaN(fromInjection)) {
+            return initialZIndex;
+        }
+        return fromInjection;
     });
 
     const current = computed(() => {
@@ -28,4 +30,4 @@ export const useZIndex = (override?: Ref<number>) => {
         current,
         nextZIndex
     }
-}
+}

package/src/examples/modal/modal.stories.ts

@@ -0,0 +1,9 @@
+import Modal from "./modal.vue";
+import {createStory} from "../../__storybook__";
+
+export default {
+    component: Modal,
+    title: 'Examples/Modals'
+}
+
+export const Basic = createStory(Modal);

package/src/examples/modal/modal.vue

@@ -0,0 +1,52 @@
+<template>
+    <MModal ref="modal" title="I am a modal" size="md" :canClickOutside="true" :canBounceOnOpen="false" :canSlideIn="true">
+        <template #body>
+            <div>
+                <MSelect
+                    v-model="value"
+                    :options="options"
+                    :option-value="'id'"
+                    :option-label="'name'"
+                    blank
+                    searchable
+                    />
+            </div>
+        </template>
+        <template #footer>
+            <div style="display: flex; flex-grow: 1; justify-content: end;">
+                <MButton variant="primary" @click="modal?.close()">
+                    Okay
+                </MButton>
+                <MButton style="margin-left: 8px;" @click="modal?.close()">
+                    Cancel
+                </MButton>
+            </div>
+        </template>
+    </MModal>
+
+    <div style="position: relative; width: 100%; height: 1000px;">
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; top: 0; left: 0;">Top Left</button>
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; top: 0; right: 0;">Top Right</button>
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; bottom: 0; left: 0;">Bottom
+            Left</button>
+        <button @click="open" style="position: absolute; width: 100px; height: 50px; bottom: 0; right: 0;">Bottom
+            Right</button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const modal = ref<any>(null);
+// make list of options with 1000 items
+const options = Array.from({ length: 50 }, (_, i) => ({
+    id: i,
+    name: `Option ${i+1}`
+}));
+
+const value = ref();
+const open = (event: MouseEvent) => {
+    modal.value.open(event.target);
+};
+
+</script>

package/src/exports/nuxt.plugin.js

@@ -1,5 +1,5 @@
 import { defineNuxtPlugin } from '#app'
-import create from '../src/create'
+import create from '../create'
 
 export default defineNuxtPlugin((nuxtApp) => {
     const UI = create(nuxtApp.$config.modlrUiOptions)