@teammodlr/ui-kit 2.1.4 → 2.1.6

package/src/components/select/Select.vue

@@ -14,7 +14,7 @@
             <div :class="selectComputedClasses">
                 <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
                     <MTag
-                        v-for="value in selected"
+                        v-for="value in selectedMax"
                         :key="value"
                         :closeable="true"
                         @close="removeSelected(value)"
@@ -22,6 +22,11 @@
                     >
                         {{ getSelectedLabel(value) }}
                     </MTag>
+                    <template v-if="selectedCountNotShown > 0">
+                        <MTag :size="size">
+                            +{{ selectedCountNotShown }} more
+                        </MTag>
+                    </template>
                 </template>
                 <template v-else-if="!multiple && selected">
                     {{ getSelectedLabel(selected) }}
@@ -40,9 +45,22 @@
                 >
                     <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"/> -->
-                            <input type="text" ref="searchRef" v-model="search" placeholder="Search" :class="style.searchInput" />
+                        <div  v-if="searchable || (multiple && selectAll)" :class="style.search">
+                            <div v-if="multiple && selectAll" :class="style.checkAll">
+                                <button
+                                    role="button"
+                                    type="button"
+                                    :class="{
+                                        [style.checkAllButton]: true,
+                                        [style.checkAllButtonActive]: computedOptions.length > 0 && computedOptions.length === selected.length
+                                    }"
+                                    @click.prevent="toggleAllItems"
+                                    aria-description="Select all items"
+                                >
+                                    <svg v-if="computedOptions.length > 0 && computedOptions.length === selected.length" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path></svg>
+                                </button>
+                            </div>
+                            <input v-if="searchable" 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"
@@ -52,8 +70,12 @@
                                         [style.optionFocused]: selectedIndex === index
                                     }"
                                  @click.prevent="option.onClick"
-                                 @hover="selectedIndex = index">
-                                {{ option.label }}
+                                 @hover="selectedIndex = index"
+                            >
+                                <span :class="style.optionIcon">
+                                    <svg v-if="option.active" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path></svg>
+                                </span>
+                                <span :class="style.optionLabel">{{ option.label }}</span>
                             </div>
                             <template v-if="computedOptions.length === 0">
                                 <div :class="style.noResults">
@@ -86,7 +108,6 @@ import {
     defineExpose,
     type PropType
 } from "vue";
-import MInput from "../input/Input.vue";
 import MTag from "../tag/Tag.vue";
 import * as style from "./style";
 import { scale } from "../../styles/transitions.css";
@@ -156,9 +177,16 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
+        selectAll: {
+            type: Boolean,
+            default: false
+        },
+        max: {
+            type: Number,
+            default: 5
+        }
     },
     components: {
-        MInput,
         MTag
     },
     setup(props, {emit}) {
@@ -176,7 +204,6 @@ export default defineComponent({
         const width = ref<number>(0);
         const keyboardNavigation = ref<boolean>(false);
 
-
         const {focus, blur} = useInteractive(container);
         // TODO: Add debounce on keyboard movement (hover flicks it back up)
         const {
@@ -188,7 +215,7 @@ export default defineComponent({
             formLoading
         } = useInput(props, {focus, emit, withListeners: false});
 
-        const {popper} = usePopper({
+        const {popper, updatePopper} = usePopper({
             placement,
             transfer,
             reference: container,
@@ -220,6 +247,27 @@ export default defineComponent({
             }
         });
 
+        const selectedMax = computed(() => {
+            if (props.max <= 0) {
+                return selected.value;
+            }
+
+            if (props.multiple && Array.isArray(selected.value) && selected.value.length > props.max) {
+                return selected.value.slice(0, props.max);
+            }
+
+            return selected.value;
+        });
+
+        const selectedCountNotShown = computed(() => {
+
+            if (props.multiple && Array.isArray(selected.value) && props.max > 0) {
+                return selected.value.length - props.max;
+            }
+
+            return 0;
+        });
+
         const computedConsistentWidth = computed(() => {
             if (props.consistentWidth) {
                 return {
@@ -250,7 +298,7 @@ export default defineComponent({
                     }
 
                     let value = option[props.optionValue];
-                    let active = false;
+                    let active: boolean;
                     if (props.multiple && Array.isArray(selected.value)) {
                         active = selected.value.includes(value);
                     } else {
@@ -263,13 +311,6 @@ export default defineComponent({
                         active: active,
                         onClick: () => handleOptionClick(value)
                     }
-                }).filter((option) => {
-                    if (props.multiple && Array.isArray(selected.value)) {
-                        // Filter out selected options
-                        return !selected.value.includes(option.value);
-                    }
-
-                    return true;
                 });
 
                 if (props.allowBlank) {
@@ -294,7 +335,7 @@ export default defineComponent({
                 }
 
                 let value = option[props.optionValue];
-                let active = false;
+                let active: boolean;
                 if (props.multiple && Array.isArray(selected.value)) {
                     active = selected.value.includes(value);
                 } else {
@@ -307,13 +348,6 @@ export default defineComponent({
                     active: active,
                     onClick: () => handleOptionClick(value)
                 }
-            }).filter((option) => {
-                if (props.multiple && Array.isArray(selected.value)) {
-                    // Filter out selected options
-                    return !selected.value.includes(option.value);
-                }
-
-                return true;
             });
 
             if (props.allowBlank) {
@@ -328,6 +362,26 @@ export default defineComponent({
             return options;
         });
 
+        function toggleAllItems() {
+            if (!props.multiple) {
+                return;
+            }
+
+            if (computedOptions.value.length === 0) {
+                return;
+            }
+
+            if (Array.isArray(selected.value)) {
+                if (selected.value.length === computedOptions.value.length) {
+                    selected.value = [];
+                } else {
+                    selected.value = computedOptions.value.map((option) => option.value);
+                }
+            } else {
+                selected.value = [];
+            }
+        }
+
         function openSelect() {
             if (disabled.value || loading.value) {
                 return;
@@ -379,6 +433,8 @@ export default defineComponent({
                 } else {
                     selected.value = [value];
                 }
+
+                updatePopper();
             } else {
                 selected.value = value;
                 open.value = false;
@@ -396,9 +452,15 @@ export default defineComponent({
                 if (index !== -1) {
                     selected.value.splice(index, 1);
                 }
+
+                updatePopper();
             }
         }
 
+        useEventListener('resize', () => {
+            open.value = false;
+        });
+
         function handleKeyDown(e: Event) {
             if (computedOptions.value.length === 0) {
                 return;
@@ -464,11 +526,6 @@ export default defineComponent({
             }
         }
 
-        function focusOut(e: Event) {
-            console.log(e);
-
-        }
-
         const transitionName = computed(() => {
             return `m-transition__${props.transitionName}`;
         });
@@ -495,7 +552,7 @@ export default defineComponent({
             return [
                 style.base,
                 {
-                    [style.selectedTags]: props.multiple,
+                    [style.selectedTags]: props.multiple && Array.isArray(selected.value) && selected.value.length > 0,
                     [style.focused]: open.value,
                     // [`m-select--${props.size}`]: props.size,
                     'm-select--disabled': disabled.value || loading.value,
@@ -539,6 +596,13 @@ export default defineComponent({
 
         watch(open, (value: boolean) => {
             nextTick(() => {
+                if (!value) {
+                    search.value = "";
+                }
+
+                if (props.searchable && searchRef.value) {
+                    searchRef.value.focus();
+                }
                 if (value && optionsRef.value) {
                     const index = computedOptions.value.findIndex((i) => i.value === selected.value);
                     if (index !== -1) {
@@ -580,12 +644,13 @@ export default defineComponent({
             selectRef,
             popper,
             focusSelect,
-            focusOut,
 
             id,
             isOpen,
             open,
             selected,
+            selectedMax,
+            selectedCountNotShown,
             computedOptions,
             selectedIndex,
             search,
@@ -603,7 +668,8 @@ export default defineComponent({
             inputListeners,
             style,
             focused,
-            scale
+            scale,
+            toggleAllItems
         }
     }
 });

package/src/components/select/examples/multiple.vue

@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-const options = Array.from({ length: 5 }, (_, i) => ({
+const options = Array.from({ length: 10 }, (_, i) => ({
     id: i,
     name: `Option ${i+1}`
 }));

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

@@ -1,6 +1,5 @@
 import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
 import { themeVars } from "../../../styles/theme.css";
-import { fonts } from "../../../styles/typography.css";
 
 const sizes = {
     xs: '26px',
@@ -48,7 +47,6 @@ export const base = style({
         [vars.backgroundColor]: '#FFFFFF',
         [vars.cursor]: 'text',
     },
-    height: vars.height,
     minHeight: vars.height,
     width: '100%',
     borderRadius: vars.radius,
@@ -88,6 +86,8 @@ export const selectedTags = style({
     flexWrap: 'wrap',
     alignItems: 'center',
     gap: themeVars.space[1],
+    paddingTop: themeVars.space[1.5],
+    paddingBottom: themeVars.space[1.5],
 });
 
 export const block = style({
@@ -200,6 +200,8 @@ export const search = style({
     position: 'sticky',
     top: 0,
     zIndex: 1,
+    borderBottom: `1px solid ${themeVars.color.gray[200]}`,
+    display: 'flex',
 });
 
 export const searchInput = style({
@@ -208,8 +210,8 @@ export const searchInput = style({
     outline: 'none',
     width: '100%',
     fontSize: themeVars.fontSize.base,
-    borderBottom: `1px solid ${themeVars.color.gray[200]}`,
     color: themeVars.color.gray[800],
+    flexShrink: 1
 });
 
 export const options = style({
@@ -237,6 +239,7 @@ export const option = style({
     transition: "background-color 0.05s ease-in-out",
     backgroundColor: vars.optionBackgroundColor,
     borderRadius: borderRadiuses.md,
+    userSelect: "none",
     ':hover': {
         vars: {
             [vars.optionColor]: themeVars.color.gray[800],
@@ -245,6 +248,7 @@ export const option = style({
     }
 });
 
+
 export const optionFocused = style({
     vars: {
         [vars.optionColor]: themeVars.color.gray[800],
@@ -259,18 +263,85 @@ export const optionFocused = style({
 });
 
 export const optionSelected = style({
-    vars: {
-        [vars.optionColor]: themeVars.color.blue[50],
-        [vars.optionBackgroundColor]: themeVars.color.blue[500],
-    },
+    // vars: {
+    //     [vars.optionColor]: themeVars.color.blue[50],
+    //     [vars.optionBackgroundColor]: themeVars.color.blue[500],
+    // },
+    // ':hover': {
+    //     vars: {
+    //         [vars.optionColor]: themeVars.color.blue[50],
+    //         [vars.optionBackgroundColor]: themeVars.color.blue[600],
+    //     },
+    // }
+});
+
+export const optionLabel = style({
+
+});
+
+export const checkAll = style({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: themeVars.space[5],
+    margin: `0 ${themeVars.space[2]}`,
+    flexShrink: 0,
+    flex: 1
+});
+
+export const checkAllButton = style({
+    flexShrink: 0,
+    alignItems: 'center',
+    cursor: 'pointer',
+    justifyContent: 'center',
+    marginLeft: themeVars.space[2.5],
+    width: themeVars.space[6],
+    height: themeVars.space[6],
+    borderRadius: borderRadiuses.md,
+    color: themeVars.color.blue[500],
+    border: `2px solid ${themeVars.color.gray[200]}`,
+    padding: 0,
+    background: 'none',
+    outline: 'none',
     ':hover': {
-        vars: {
-            [vars.optionColor]: themeVars.color.blue[50],
-            [vars.optionBackgroundColor]: themeVars.color.blue[600],
-        },
+        borderColor: themeVars.color.gray[300],
+    }
+});
+
+export const checkAllButtonActive = style({
+    border: `1px solid ${themeVars.color.blue[500]}`,
+    background: themeVars.color.blue[500],
+    color: 'white',
+    ':hover': {
+        borderColor: themeVars.color.blue[600],
+        background: themeVars.color.blue[600],
     }
 });
 
+globalStyle(`${checkAllButtonActive} > svg`, {
+    position: 'relative',
+    top: '1px',
+    width: themeVars.space[4],
+    height: themeVars.space[4],
+    color: 'white'
+});
+
+export const optionIcon = style({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: themeVars.space[5],
+    marginLeft: '-2px'
+});
+
+globalStyle(`${optionIcon} > svg`, {
+    position: 'relative',
+    top: '1px',
+    width: themeVars.space[5],
+    height: themeVars.space[5],
+    color: themeVars.color.blue[500],
+});
+
 export const noResults = style({
     padding: `${themeVars.space[2]} 0`,
     display: 'flex',
@@ -283,3 +354,12 @@ export const noResults = style({
     color: themeVars.color.gray[500],
     fontSize: themeVars.fontSize.small,
 });
+
+export const clearable = style({
+    width: themeVars.space[4],
+    height: themeVars.space[4],
+    position: 'absolute',
+    right: themeVars.space[2],
+    top: '0',
+    display: 'flex',
+})

package/src/components/tag/style/Tag.css.ts

@@ -1,6 +1,5 @@
 import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
 import { themeVars } from "../../../styles/theme.css";
-import { fonts } from "../../../styles/typography.css";
 
 const sizes = {
     xs: '18px',

package/src/components/tree/Tree.vue

@@ -0,0 +1,126 @@
+<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,
+  setup: function (props) {
+    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, {
+      indentRef: toRef(props, 'indent'),
+      expandOnClickRef: toRef(props, 'expandOnClick'),
+      nodePropsRef: toRef(props, 'nodeProps'),
+      handleSwitcherClick
+    });
+
+    // const { watchProps } = props;
+    //
+    // watchEffect(() => {
+    //     initUncontrolledExpandedKeys(undefined);
+    // })
+
+    function handleSwitcherClick(node: TmNode): void {
+      console.log('i')
+      toggleExpand(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,71 @@
+<template>
+    <div
+        @click="handleLineClick"
+        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>
+        {{node.rawNode.label}}
+    </div>
+</template>
+
+<script lang="ts">
+import {ref, defineComponent, type PropType, inject, computed} from "vue";
+import type {TmNode} from "./types";
+import {treeInjectionKey} from "./types";
+
+export default defineComponent({
+    name: 'TreeNode',
+    props: {
+        node: {
+            type: Object as PropType<TmNode>,
+            required: true
+        }
+    },
+    setup(props) {
+        const NTree = inject(treeInjectionKey)!;
+        const {
+            nodePropsRef,
+            indentRef,
+            handleSwitcherClick: handleSwitcherClickTree
+        } = NTree;
+
+        const selfElRef = ref<HTMLDivElement | null>(null);
+
+        function _handleClick (e: MouseEvent): void {
+            const { value: expandOnClick } = NTree.expandOnClickRef;
+            const { node } = props
+            if (!expandOnClick && !node.isLeaf) {
+                handleSwitcherClick();
+            }
+        }
+
+        function handleSwitcherClick(): void {
+            const { node } = props;
+
+            if (!node.isLastChild && !node.shallowLoaded) {
+                return;
+            }
+
+            handleSwitcherClickTree(node)
+        }
+
+        const indentCount = computed(() => {
+            return props.node.level;
+        })
+
+        function handleLineClick (e: MouseEvent) {
+            _handleClick(e);
+        }
+
+        return {
+            selfElRef,
+            handleLineClick,
+            indentCount
+        }
+    }
+});
+</script>

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

@@ -0,0 +1,33 @@
+<template>
+    <MTree :data="data"/>
+</template>
+<script lang="ts" setup>
+import {ref} from 'vue'
+import type {TreeOption} from "../types";
+
+function createData (level = 4, baseKey = ''): TreeOption[] | undefined {
+    if (!level) return undefined
+
+    const result: TreeOption[] = [];
+    for (let index = 0; index < (20 - level); index++) {
+        const key = '' + baseKey + level + index;
+        result.push({
+            label: createLabel(level),
+            key,
+            children: createData(level - 1, key)
+        });
+    }
+
+    return result;
+}
+
+function createLabel (level: number): string {
+    if (level === 4) return 'Out of Tao, One is born'
+    if (level === 3) return 'Out of One, Two'
+    if (level === 2) return 'Out of Two, Three'
+    if (level === 1) return 'Out of Three, the created universe'
+    return ''
+}
+
+const data = ref(createData());
+</script>