@teammodlr/ui-kit 2.1.5 → 2.1.7

package/src/components/tree/TreeNodeToggle.vue

@@ -0,0 +1,36 @@
+<template>
+    <div
+        @click="onClick"
+        style="width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; vertical-align: bottom;"
+    >
+        <template v-if="!hide">
+            <svg v-if="expanded" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>
+            <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
+        </template>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, type PropType} from "vue";
+import type {TmNode} from "./types";
+
+export default defineComponent({
+    name: "TreeNodeToggle",
+    props: {
+        expanded: Boolean,
+        selected: Boolean,
+        onClick: Function as PropType<(e: MouseEvent) => void>,
+        hide: Boolean,
+        node: {
+            type: Object as PropType<TmNode>,
+            required: true
+        }
+    },
+    setup (props) {
+
+        return {
+
+        }
+    }
+})
+</script>

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

@@ -0,0 +1,13 @@
+<template>
+    <MTree :data="data" label-field="name" key-field="id" @dblclick="dblclick"/>
+</template>
+<script lang="ts" setup>
+import {ref} from 'vue'
+import type {TmNode} from "../../../../lib/components/tree/types";
+
+const data = ref([{"children":[{"children":[{"name":"Advertising & Marketing","weight":1,"type":"N","childrenCount":0,"id":"b5511a25-f9d4-402f-9f49-7bb9cff0bd97"},{"children":[],"name":"Finance","weight":1,"type":"N","childrenCount":0,"id":"b21ac382-ae7d-4cb0-b504-10a7ef6eac55"},{"children":[],"name":"Information Technology","weight":1,"type":"N","childrenCount":0,"id":"af71b879-0ea0-4cf6-8b70-4e764f08210b"},{"children":[],"name":"Legal","weight":1,"type":"N","childrenCount":0,"id":"c7d58cb8-d70c-4f70-99fb-7e8fdbb44b80"},{"children":[],"name":"Management","weight":1,"type":"N","childrenCount":0,"id":"2fef19d7-c744-4c36-9066-b077d1641f58"}],"name":"Cost Centers","weight":1,"type":"N","childrenCount":5,"id":"9bb9a4e9-749e-468a-9d39-d98625d8f3a1"},{"children":[{"children":[{"children":[{"children":[],"name":"Brisbane 01","weight":1,"type":"N","childrenCount":0,"id":"3beab845-9660-4cc3-8943-deb5672a72d1"},{"children":[],"name":"Brisbane 02","weight":1,"type":"N","childrenCount":0,"id":"812c3874-2103-4e35-b129-861811e9e582"},{"children":[],"name":"Brisbane 03","weight":1,"type":"N","childrenCount":0,"id":"df622e95-b7d9-41f5-9bd3-473bd0305b02"},{"children":[],"name":"Brisbane 04","weight":1,"type":"N","childrenCount":0,"id":"926b904c-4392-4bbb-b824-acaa1f62bb00"}],"name":"Queensland","weight":1,"type":"N","childrenCount":4,"id":"09661d2c-a90f-4c18-991b-d69500ffbdd5"},{"children":[{"children":[],"name":"Melbourne 01","weight":1,"type":"N","childrenCount":0,"id":"9ac3ce45-1bef-43dc-a3ac-227b1759b720"},{"children":[],"name":"Melbourne 02","weight":1,"type":"N","childrenCount":0,"id":"c66ec03a-431a-43e6-94aa-6b72dae73f98"},{"children":[],"name":"Melbourne 03","weight":1,"type":"N","childrenCount":0,"id":"3177b5e0-1b6e-4c7e-90bd-8e55b85880a4"},{"children":[],"name":"Melbourne 04","weight":1,"type":"N","childrenCount":0,"id":"88a1dd59-1b17-47fe-9a66-710cdff04a4f"},{"children":[],"name":"Melbourne 05","weight":1,"type":"N","childrenCount":0,"id":"400ac864-de9d-4afe-802e-880e41bb227c"}],"name":"Victoria","weight":1,"type":"N","childrenCount":5,"id":"063612b1-2cf3-47a6-a4c3-8fb552146d07"},{"children":[{"children":[],"name":"Sydney 01","weight":1,"type":"N","childrenCount":0,"id":"fed2081a-edf5-4823-bdc8-2860dd6e8a5d"},{"children":[],"name":"Sydney 02","weight":1,"type":"N","childrenCount":0,"id":"1b80744b-f2d3-4bbf-b4e5-63d9318d9538"},{"children":[],"name":"Sydney 03","weight":1,"type":"N","childrenCount":0,"id":"3aa2f7f7-8299-4ac9-95d8-d98f97cddda3"},{"children":[],"name":"Sydney 04","weight":1,"type":"N","childrenCount":0,"id":"657b512c-e77e-495a-bb75-bee4c8cd8ee0"},{"children":[],"name":"Sydney 05","weight":1,"type":"N","childrenCount":0,"id":"da5efcc4-3e88-4b5c-a0c5-7c096c5b83c5"},{"children":[],"name":"Sydney 06","weight":1,"type":"N","childrenCount":0,"id":"10fcae0f-3614-4e44-ace4-0c0423f19952"}],"name":"New South Wales","weight":1,"type":"N","childrenCount":6,"id":"3bdf2a0f-41ef-411c-9749-84301dd8088f"},{"children":[{"children":[],"name":"Perth 01","weight":1,"type":"N","childrenCount":0,"id":"0880d1ac-c7d3-4059-b0a8-25bed41496c7"},{"children":[],"name":"Perth 02","weight":1,"type":"N","childrenCount":0,"id":"0998eb28-769d-4a11-a609-10043a7d482f"}],"name":"Western Australia","weight":1,"type":"N","childrenCount":2,"id":"1b8c1791-fc09-4d2e-b681-cd58f027f2fe"},{"children":[{"children":[],"name":"Darwin 01","weight":1,"type":"N","childrenCount":0,"id":"068e40e2-6fde-4d65-a11c-357f694af697"},{"children":[],"name":"Darwin 02","weight":1,"type":"N","childrenCount":0,"id":"1411b083-7c4e-4810-b92e-372f521f2e7c"},{"children":[],"name":"Darwin 03","weight":1,"type":"N","childrenCount":0,"id":"4684a7ea-aabe-47d2-81fc-00d68196d3f6"},{"children":[],"name":"Darwin 04","weight":1,"type":"N","childrenCount":0,"id":"3fdd5254-639f-4efb-bd40-5c0dc5c1c314"}],"name":"Northern Territory","weight":1,"type":"N","childrenCount":4,"id":"c2ca2fa5-07ce-4529-8745-94567d785736"}],"name":"Australia","weight":1,"type":"N","childrenCount":5,"id":"70a043fc-e70c-4a30-8fbb-7784123c85a5"},{"children":[{"children":[],"name":"Auckland 01","weight":1,"type":"N","childrenCount":0,"id":"6293f121-f50e-42b4-a996-15263c45c3ee"},{"children":[],"name":"Auckland 02","weight":1,"type":"N","childrenCount":0,"id":"2cd3eda8-ab87-46da-8300-27261ee91d68"},{"children":[],"name":"Auckland 03","weight":1,"type":"N","childrenCount":0,"id":"88e6c0ae-e891-4faf-9b62-4270207fea91"},{"children":[],"name":"Wellington 01","weight":1,"type":"N","childrenCount":0,"id":"13ecbd3f-0b53-4a96-8627-07886173c8a6"},{"children":[],"name":"Wellington 02","weight":1,"type":"N","childrenCount":0,"id":"767b982c-ac81-44aa-90a3-b2f276919779"}],"name":"New Zealand","weight":1,"type":"N","childrenCount":5,"id":"c987df16-0757-4d04-97ec-386a423aef8d"},{"children":[],"name":"Online","weight":1,"type":"N","childrenCount":0,"id":"367a3afb-cc66-42d7-a022-f7f92683d768"}],"name":"Profit Centers","weight":1,"type":"N","childrenCount":3,"id":"782c9acf-dfdb-4e60-ace9-0f420aeecae6"}],"name":"All Departments","type":"N","childrenCount":2,"id":"a4b0784f-3d57-4a4d-a849-9700b27e6a6f"}]);
+
+function dblclick(node: TmNode) {
+    console.log(node);
+}
+</script>

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

@@ -0,0 +1,16 @@
+import MTree from "../Tree.vue";
+
+import {
+    MTreeBasic
+} from "./index";
+
+import {
+    createStory,
+} from "../../../__storybook__";
+
+export default {
+    component: MTree,
+    title: "Components/Tree"
+}
+
+export const Basic = createStory(MTreeBasic)

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

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

package/src/components/tree/props.ts

@@ -0,0 +1,95 @@
+import type {ExtractPublicPropTypes, PropType} from "vue";
+import type {
+    TreeOptions,
+    Key,
+    TreeNodeProps,
+    OnUpdateIndeterminateKeys,
+    onUpdateExpandedKeys,
+    TreeNodeDoubleClick
+} from "./types";
+import type {TreeMateOptions} from "treemate";
+import type {MaybeArray} from "../../call";
+
+export const treeSharedProps = {
+    expandedKeys: Array as PropType<Key[]>,
+    defaultExpandAll: Boolean,
+    keyField: {
+        type: String,
+        default: 'key',
+    },
+    labelField: {
+        type: String,
+        default: 'label',
+    },
+    childrenField: {
+        type: String,
+        default: 'children',
+    },
+    onDblClick: Function as PropType<TreeNodeDoubleClick>,
+    onUpdateIndeterminateKeys: [Function, Array] as PropType<
+        MaybeArray<OnUpdateIndeterminateKeys>
+    >,
+    'onUpdate:indeterminateKeys': [Function, Array] as PropType<
+        MaybeArray<OnUpdateIndeterminateKeys>
+    >,
+    onUpdateExpandedKeys: [Function, Array] as PropType<
+        MaybeArray<onUpdateExpandedKeys>
+    >,
+    'onUpdate:expandedKeys': [Function, Array] as PropType<
+        MaybeArray<onUpdateExpandedKeys>
+    >
+} as const;
+
+export const treeProps= {
+    data: {
+        type: Array as PropType<TreeOptions>,
+        default: () => []
+    },
+    checkedKeys: Array as PropType<Key[]>,
+    defaultCheckedKeys: {
+        type: Array as PropType<Key[]>,
+        default: () => []
+    },
+    selectedKeys: Array as PropType<Key[]>,
+    defaultSelectedKeys: {
+        type: Array as PropType<Key[]>,
+        default: () => []
+    },
+    multiple: Boolean,
+    indent: {
+        type: Number,
+        default: 16
+    },
+    expandOnClick: Boolean,
+    virtualScroll: Boolean,
+    nodeProps: Function as PropType<TreeNodeProps>,
+    getChildren: Function as PropType<GetChildren>,
+    ...treeSharedProps,
+} as const;
+
+export type TreeProps = ExtractPublicPropTypes<typeof treeProps>;
+export type GetChildren = (option: any) => unknown
+
+export function createTreeMateOptions<T> (
+    keyField: string,
+    childrenField: string,
+    disabledField: string,
+    getChildren: GetChildren | undefined,
+): TreeMateOptions<T, T, T> {
+    const settledGetChildren: GetChildren = getChildren || ((node: T) => {
+        return (node as any)[childrenField]
+    });
+
+    return {
+        getIsGroup() {
+            return false;
+        },
+        getKey(node: T) {
+            return (node as any)[keyField]
+        },
+        getChildren: settledGetChildren,
+        getDisabled(node: T) {
+            return !!((node as any)[disabledField]);
+        }
+    }
+}

package/src/components/tree/types.ts

@@ -0,0 +1,104 @@
+import type {HTMLAttributes, Ref, InjectionKey} from "vue";
+import type {TreeNode} from "treemate";
+import {createInjectionKey} from "../../utils/injection";
+
+export type Key = string | number
+
+export interface TreeOptionBase {
+    key?: Key,
+    label?: string,
+    children?: TreeOption[]
+}
+
+export type TreeOption = TreeOptionBase & Record<string, unknown>;
+export type TreeOptions = TreeOption[];
+
+export type TreeNodeProps = (
+    node: TreeOption,
+) => HTMLAttributes & Record<string, unknown>;
+
+export type TreeNodeDoubleClick = (info: {
+    option: TreeOption,
+}) => void;
+
+export interface TreeInjection {
+    mergedExpandedKeysRef: Ref<Key[]>,
+    indentRef: Ref<number>,
+    expandOnClickRef: Ref<boolean>,
+    nodePropsRef: Ref<TreeNodeProps | undefined>,
+    labelFieldRef: Ref<string>,
+    keyFieldRef: Ref<string>,
+    handleToggleClick: (node: TreeNode<TreeOption>) => void,
+    handleDoubleClick: (node: TreeOption) => void,
+}
+
+export const treeInjectionKey = createInjectionKey<TreeInjection>('tree')
+
+export type TmNode = TreeNode<TreeOption>
+
+export type OnUpdateCheckedKeys = (
+    value: Array<string & number>,
+    option: Array<TreeOption | null>,
+    meta: {
+        node: TreeOption | null
+        action: 'check' | 'uncheck'
+    }
+) => void
+export type OnUpdateCheckedKeysImpl = (
+    value: Key[],
+    option: Array<TreeOption | null>,
+    meta: {
+        node: TreeOption | null
+        action: 'check' | 'uncheck'
+    }
+) => void
+export type OnUpdateIndeterminateKeys = (
+    value: Array<string & number>,
+    option: Array<TreeOption | null>
+) => void
+export type OnUpdateIndeterminateKeysImpl = (
+    value: Key[],
+    option: Array<TreeOption | null>
+) => void
+export type OnUpdateSelectedKeys = (
+    value: Array<string & number>,
+    option: Array<TreeOption | null>,
+    meta: {
+        node: TreeOption | null
+        action: 'select' | 'unselect'
+    }
+) => void
+export type OnUpdateSelectedKeysImpl = (
+    value: Key[],
+    option: Array<TreeOption | null>,
+    meta: {
+        node: TreeOption | null
+        action: 'select' | 'unselect'
+    }
+) => void
+export type onUpdateExpandedKeys = (
+    value: Array<string & number>,
+    option: Array<TreeOption | null>,
+    meta:
+        | {
+        node: TreeOption
+        action: 'expand' | 'collapse'
+    }
+        | {
+        node: null
+        action: 'filter'
+    }
+) => void
+export type OnUpdateExpandedKeysImpl = (
+    value: Key[],
+    option: Array<TreeOption | null>,
+    meta:
+        | {
+        node: TreeOption
+        action: 'expand' | 'collapse'
+    }
+        | {
+        node: null
+        action: 'filter'
+    }
+) => void

package/src/composables/index.ts

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

package/src/composables/useMergedState.ts

@@ -0,0 +1,18 @@
+import { type Ref, watch, type ComputedRef, computed } from 'vue'
+
+export default function useMergedState<T> (
+    controlledStateRef: Ref<T | undefined>,
+    uncontrolledStateRef: Ref<T>
+): ComputedRef<T> {
+    watch(controlledStateRef, value => {
+        if (value !== undefined) {
+            uncontrolledStateRef.value = value
+        }
+    })
+    return computed(() => {
+        if (controlledStateRef.value === undefined) {
+            return uncontrolledStateRef.value
+        }
+        return controlledStateRef.value
+    })
+}

package/src/utils/injection.ts

@@ -0,0 +1,5 @@
+import type { InjectionKey } from 'vue'
+
+export function createInjectionKey<T> (key: string): InjectionKey<T> {
+    return key as any
+}

package/lib/components/dialog/useDialog.d.ts

@@ -1,2 +0,0 @@
-import type { DialogApiInjection } from './types';
-export declare function useDialog(): DialogApiInjection;

package/src/components/dialog/useDialog.ts

@@ -1,12 +0,0 @@
-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;
-}