@teammodlr/ui-kit 2.1.5 → 2.1.7

package/src/components/dialog/Dialog.vue

@@ -1,60 +1,118 @@
 <template>
-    <div>
-        <MModal ref="modal" :title="title" :canClickOutside="false" :onClose="onClose">
-            <template #body>
-                {{ content }}
-            </template>
-
-            <template #footer>
-            <div style="display: flex; flex-grow: 1; justify-content: end;">
-                <MButton :variant="okVariant" @click="handleOk">
-                    {{ okText ?? 'Okay' }}
-                </MButton>
-                <MButton style="margin-left: 8px;" @click="handleCancel">
-                    {{ cancelText ?? 'Cancel' }}
-                </MButton>
+    <Teleport to="body">
+        <div :class="style.root">
+            <div :class="backdropClasses">
             </div>
-        </template>
-        </MModal>
-    </div>
-</template>
+            <div ref="wrapper" :class="style.wrapper">
+                <div ref="dialog" :class="style.dialog" :style="{
+                    // top: y + 'px',
+                    // left: x + 'px',
+                    zIndex: zIndex,
+                    width: width
+                }">
+                    <div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
+                    <div :class="style.content">
+                        <button role="button" :class="style.close">x</button>
+                        <div :class="style.header" ref="handle">
+                            <div :class="style.title">
+                                <slot name="title">
+                                    Title
+                                </slot>
+                            </div>
+                        </div>
+                        <div>
+                            <slot></slot>
+                        </div>
+                        <div :class="style.footer">
+                            <slot name="footer"></slot>
+                        </div>
+                    </div>
+                    <div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
+                </div>
+            </div>
+        </div>
 
+    </Teleport>
+</template>
 <script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue';
-import { useZIndex } from '../../composables/useZIndex';
-import { dialogProps } from './props';
-import  MModal from '../modal/Modal.vue';
+import {computed, defineComponent, type PropType, ref} from "vue";
+import {useZIndex} from "../../composables/useZIndex";
+import {useDraggable} from "@vueuse/core";
+import * as style from "./style";
 
 export default defineComponent({
     name: "Dialog",
-    props: dialogProps,
-    setup(props, { slots }) {
-        const modal = ref();
-
-        const { nextZIndex } = useZIndex();
-
-        async function handleCancel(event: MouseEvent) {
-            modal.value?.close();
-            if (props.onCancel) {
-                await props.onCancel(event)
+    props: {
+        title: {
+            type: String,
+            default: ""
+        },
+        draggable: {
+            type: Boolean,
+            default: false
+        },
+        backdrop: {
+            type: Boolean,
+            default: false,
+        },
+        onClose: {
+            type: Function as PropType<() => void>,
+            default: () => {
             }
+        },
+        zIndex: {
+            type: Number
+        },
+        width: {
+            type: [Number, String],
+            default: "500px"
+        },
+        transformOrigin: {
+            type: String as PropType<'center' | 'mouse'>,
+            default: 'mouse'
+        },
+        focusTrap: {
+            type: Boolean,
+            default: true
         }
+    },
+    emits: ['onOpen', 'onClose'],
+    setup(props, {slots}) {
+        const wrapper = ref<HTMLElement | null>(null);
+        const dialog = ref<HTMLElement | null>(null);
+        const handle = ref<HTMLElement | null>(null);
+        const {x, y} = useDraggable(dialog, {
+            handle: handle,
+            preventDefault: true,
+            // containerElement: wrapper,
+        });
+        const {nextZIndex} = useZIndex();
 
-        async function handleOk(event: MouseEvent) {
-            modal.value?.close();
-            if (props.onOk) {
-                props.onOk(event)
+        const backdropClasses = computed(() => {
+            return {
+                [style.backdrop]: true,
+                [style.backdropColor]: props.backdrop === true
             }
-        }
-        onMounted(() => {
-            modal.value?.open(null);
         });
+
+        const width = computed(() => {
+            return typeof props.width === "number" ? props.width + "px" : props.width;
+        });
+
+        const zIndex = ref(props.zIndex ?? nextZIndex());
         return {
-            modal,
-            handleOk,
-            handleCancel
+            slots,
+            wrapper,
+            dialog,
+            handle,
+            zIndex,
+            width,
+            x,
+            y,
+            style,
+            backdropClasses,
+            nextZIndex
         };
-    },
-    components: { MModal }
+    }
 });
 </script>

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

@@ -1,48 +1,16 @@
 <template>
     <div>
-        <button @click="showBasicDialog">
-            Show Basic</button>
-
-        <button @click="showDangerDialog">
-            Show Danger
-        </button>
+        <MDialog>
+            <input type="text" />
+            <input type="text" />
+            <template #footer>
+                Bootom
+            </template>
+        </MDialog>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { useDialog } from '../useDialog';
-
-const dialog = useDialog();
-
-async function showBasicDialog() {
-    const result = dialog.create({
-        title: 'Hello World',
-        content: 'This is a dialog',
-        okText: 'OK',
-        cancelText: 'Cancel',
-        onOk: () => {
-            console.log('OK');
-        },
-        onCancel: () => {
-            console.log('Cancel');
-        }
-    });
-}
+import { ref } from 'vue'
 
-async function showDangerDialog() {
-    const result = dialog.create({
-        title: 'Hello World',
-        content: 'This is a dialog',
-        okText: 'Continue',
-        okVariant: 'error',
-        cancelText: 'Cancel',
-        onOk: () => {
-            showBasicDialog()
-        },
-        onCancel: () => {
-            console.log('Cancel');
-        }
-    });
-}
 </script>

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

@@ -1,29 +1,18 @@
-import MDialogProvider from "../DialogProvider.vue";
+import MDialog from "../Dialog.vue";
 import {
-    MDialogProviderBasic,
+    MDialogBasic
 } from "./index";
 
-const Template = (args: any) => ({
-    components: {
-        MDialogProvider,
-        MDialogProviderBasic
-    },
-    setup() {
-
-        return {
-            args,
-        };
-    },
-    template: `
-        <m-dialog-provider v-bind="args">
-            <MDialogProviderBasic />
-        </m-dialog-provider>
-    `
-})
+import {
+    createStory, sizeArgType
+} from "../../../__storybook__";
 
 export default {
-    component: MDialogProvider,
-    title: 'Components/Dialog'
+    component: MDialog,
+    title: 'Components/Dialog',
+    argTypes: {
+        ...sizeArgType(),
+    }
 }
 
-export const Primary = Template.bind({});
+export const Basic = createStory(MDialogBasic);

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

@@ -1 +1 @@
-export { default as MDialogProviderBasic } from './basic.vue';
+export { default as MDialogBasic } from './basic.vue';

package/src/components/dialog/style/Dialog.css.ts

@@ -0,0 +1,99 @@
+import {createVar, globalKeyframes, style, styleVariants} from "@vanilla-extract/css";
+import {themeVars} from "../../../styles/theme.css";
+
+export const vars = {
+
+}
+
+export const root = style({
+
+});
+export const backdrop = style({
+    position: "fixed",
+    inset: 0,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    pointerEvents: "none",
+});
+
+export const backdropColor = style({
+    backgroundColor: 'rgba(0,0,0,.45)',
+});
+
+export const wrapper = style({
+    position: "fixed",
+    inset: 0,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    outline: 0,
+    overflow: "auto",
+    boxSizing: "border-box",
+});
+
+export const dialog = style({
+    boxSizing: "border-box",
+    margin: "0 auto",
+    padding: 0,
+    position: "relative",
+    top: "100px",
+    width: "auto",
+    maxWidth: `calc(100vw - 32px)`,
+    paddingBottom: "24px",
+});
+
+export const content = style({
+    position: "relative",
+    backgroundColor: "#FFF",
+    backgroundClip: "padding-box",
+    border: 0,
+    borderRadius: themeVars.rounded.default,
+    pointerEvents: "auto",
+    padding: `20px 24px`,
+    boxShadow: `0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05)`
+})
+
+export const header = style({
+    color: themeVars.color.font.default,
+    backgroundColor: "#FFF",
+    marginBottom: themeVars.space[2],
+});
+
+export const footer = style({
+    textAlign: "end",
+    background: `0 0`,
+    marginTop: themeVars.space[2],
+})
+
+export const title = style({
+    margin: 0,
+    color: themeVars.color.font.default,
+    fontWeight: 600,
+    lineHeight: 1.5,
+    wordWrap: "break-word",
+});
+
+export const close = style({
+    position: "absolute",
+    top: `17px`,
+    insetInlineEnd: `17px`,
+    padding: 0,
+    background: `0 0`,
+    borderRadius: themeVars.rounded.small,
+    width: `22px`,
+    height: `22px`,
+    border: 0,
+    outline: 0,
+    cursor: `pointer`,
+    selectors: {
+        '&:hover': {
+            backgroundColor: `hsla(0,0%,45.1%,0.1)`,
+        }
+    }
+})

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

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

package/src/components/dialog/types.ts

@@ -1,34 +0,0 @@
-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/index.ts

@@ -40,5 +40,7 @@ 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 MDialogProvider } from './dialog/DialogProvider.vue';
+export { default as MTree } from './tree/Tree.vue';

package/src/components/select/Select.vue

@@ -596,6 +596,10 @@ export default defineComponent({
 
         watch(open, (value: boolean) => {
             nextTick(() => {
+                if (!value) {
+                    search.value = "";
+                }
+
                 if (props.searchable && searchRef.value) {
                     searchRef.value.focus();
                 }

package/src/components/tree/Tree.vue

@@ -0,0 +1,137 @@
+<template>
+  <div style="height: 200px;" ref="selfElRef">
+    <VVirtualList
+        ref="virtualListInstRef"
+        :items="nodesRef"
+        itemResizable
+        :itemSize="20"
+    >
+      <template v-slot:default="{ item }">
+        <TreeNode :node="item"/>
+      </template>
+    </VVirtualList>
+  </div>
+</template>
+
+<script lang="ts">
+import {type VirtualListInst, VVirtualList} from 'vueuc'
+import {computed, defineComponent, provide, ref, toRef} from 'vue'
+import {createTreeMateOptions, treeProps} from "./props";
+import type {Key, TmNode, TreeOption} from "./types";
+import {
+  createTreeMate,
+} from 'treemate'
+import TreeNode from "./TreeNode.vue";
+import {treeInjectionKey} from "./types";
+import {call} from "../../call";
+import useMergedState from "../../composables/useMergedState";
+
+export default defineComponent({
+  components: {TreeNode, VVirtualList},
+  name: 'Tree',
+  props: treeProps,
+  emits: ['update:expandedKeys', 'dblclick'],
+  setup: function (props, {emit}) {
+    const selfElRef = ref<HTMLDivElement | null>(null);
+    const virtualListInstRef = ref<VirtualListInst | null>(null)
+
+    function getScrollContainer(): HTMLElement | null | undefined {
+      return virtualListInstRef.value?.listElRef
+    }
+
+    function getScrollContent(): HTMLElement | null | undefined {
+      return virtualListInstRef.value?.itemsElRef
+    }
+
+    const displayTreeMateRef = computed(() => {
+      return createTreeMate<TreeOption>(
+          props.data,
+          createTreeMateOptions(
+              props.keyField,
+              props.childrenField,
+              'disabled',
+              props.getChildren
+          )
+      )
+    });
+
+    const dataTreeMateRef = displayTreeMateRef;
+    const controlledExpandedKeysRef = toRef(props, 'expandedKeys')
+    const uncontrolledExpandedKeysRef = ref<Key[]>([])
+    const mergedExpandedKeysRef = useMergedState(
+        controlledExpandedKeysRef,
+        uncontrolledExpandedKeysRef
+    )
+    const nodesRef = computed(() => {
+      return displayTreeMateRef.value.getFlattenedNodes(mergedExpandedKeysRef.value);
+    });
+
+    provide(treeInjectionKey, {
+      mergedExpandedKeysRef,
+      indentRef: toRef(props, 'indent'),
+      expandOnClickRef: toRef(props, 'expandOnClick'),
+      nodePropsRef: toRef(props, 'nodeProps'),
+      labelFieldRef: toRef(props, 'labelField'),
+      keyFieldRef: toRef(props, 'keyField'),
+      handleDoubleClick,
+      handleToggleClick
+    });
+
+    // const { watchProps } = props;
+    //
+    // watchEffect(() => {
+    //     initUncontrolledExpandedKeys(undefined);
+    // })
+
+    function handleToggleClick(node: TmNode): void {
+
+      toggleExpand(node);
+    }
+
+    function handleDoubleClick(node: TreeOption): void {
+      emit('dblclick', node);
+    }
+
+    function toggleExpand(node: TmNode): void {
+      const {key} = node;
+      const {value: mergedExpandedKeys} = mergedExpandedKeysRef
+      const index = mergedExpandedKeys.findIndex(
+          (expandedNodeId) => expandedNodeId === key
+      )
+
+      if (~index) {
+        const expandedKeysAfterChange = Array.from(mergedExpandedKeys);
+        expandedKeysAfterChange.splice(index, 1);
+        doUpdateExpandedKeys(expandedKeysAfterChange);
+      } else {
+        const nodeToBeExpanded = displayTreeMateRef.value.getNode(key);
+        if (!nodeToBeExpanded || nodeToBeExpanded.isLeaf) {
+          return;
+        }
+
+        let nextKeys: Key[] = mergedExpandedKeys.concat(key);
+
+        doUpdateExpandedKeys(nextKeys)
+      }
+    }
+
+    function getOptionsByKeys(keys: Key[]): Array<TreeOption | null> {
+      const {getNode} = dataTreeMateRef.value;
+      return keys.map((key) => getNode(key)?.rawNode || null);
+    }
+
+    function doUpdateExpandedKeys(
+        value: Key[],
+    ): void {
+      uncontrolledExpandedKeysRef.value = value;
+    }
+
+    return {
+      nodesRef,
+      displayTreeMateRef,
+      selfElRef
+    }
+  }
+})
+
+</script>

package/src/components/tree/TreeNode.vue

@@ -0,0 +1,103 @@
+<template>
+  <div
+    @dblclick="doDoubleClick"
+      style="display: flex;"
+  >
+    <template v-if="indentCount > 0">
+      <div v-for="i in indentCount" style="flex-grow: 0; flex-shrink: 0; height: 0;">
+        <div :key="i" style="width: 16px;"></div>
+      </div>
+    </template>
+    <TreeNodeToggle
+        :hide="node.isLeaf"
+        :node="node"
+        :expanded="expanded"
+        @click="handleToggleClick"
+    />
+    {{ labelField }}
+  </div>
+</template>
+
+<script lang="ts">
+import {ref, defineComponent, type PropType, inject, computed} from "vue";
+import type {TmNode, TreeOption} from "./types";
+import {treeInjectionKey} from "./types";
+import TreeNodeToggle from "@/components/tree/TreeNodeToggle.vue";
+import type {TreeNode} from "treemate";
+
+export default defineComponent({
+  name: 'TreeNode',
+  components: {TreeNodeToggle},
+  props: {
+    node: {
+      type: Object as PropType<TmNode>,
+      required: true
+    }
+  },
+  setup(props) {
+    const NTree = inject(treeInjectionKey)!;
+    const {
+      nodePropsRef,
+      labelFieldRef,
+      keyFieldRef,
+      indentRef,
+      handleToggleClick: handleToggleClickTree,
+      handleDoubleClick
+    } = NTree;
+
+    const selfElRef = ref<HTMLDivElement | null>(null);
+
+    function _handleClick(e: MouseEvent): void {
+      const {value: expandOnClick} = NTree.expandOnClickRef;
+      const {node} = props
+      if (!expandOnClick && !node.isLeaf) {
+        handleToggleClick();
+      }
+    }
+
+    function handleToggleClick(): void {
+      const {node} = props;
+
+
+      if (!node.isLastChild && !node.shallowLoaded) {
+        return;
+      }
+
+      handleToggleClickTree(node)
+    }
+
+    function doDoubleClick(e: MouseEvent) {
+      // get only id and name from node
+      let node = props.node;
+      let nodeData = {
+        [keyFieldRef.value]: node.rawNode[keyFieldRef.value],
+        [labelFieldRef.value]: node.rawNode[labelFieldRef.value]
+      } as TreeOption;
+      handleDoubleClick(nodeData);
+    }
+    const indentCount = computed(() => {
+      return props.node.level;
+    })
+
+    function handleLineClick(e: MouseEvent) {
+      _handleClick(e);
+    }
+
+    const labelField = computed(() => {
+      return props.node.rawNode[labelFieldRef.value];
+    })
+
+    const expanded = computed(() => NTree.mergedExpandedKeysRef.value.includes(props.node.key));
+
+    return {
+      selfElRef,
+      handleLineClick,
+      indentCount,
+      labelField,
+      expanded: expanded,
+      handleToggleClick,
+      doDoubleClick
+    }
+  }
+});
+</script>