yuyeon 0.0.4 → 0.0.7

package/lib/components/tooltip/YTooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YTooltip.mjs","names":["computed","defineComponent","mergeProps","nextTick","ref","watch","watchEffect","useModelDuplex","useRender","polyTransitionPropOptions","toKebabCase","bindClasses","YLayer","YPlate","NAME","KEBAB_NAME","YTooltipPropOptions","modelValue","type","Boolean","default","tooltipClasses","Array","String","Object","disabled","position","align","openOnHover","preventClip","YTooltip","name","props","transition","emits","setup","_ref","slots","emit","expose","el$","base$","baseSlot","baseEl","contentEl","classes","boundClasses","model","active","get","value","set","v","coordinatesStyles","$base","$content","rect","getBoundingClientRect","top","left","width","clientHeight","height","clientWidth","right","baseFromSlotEl","el","nodeType","base","$el","neo","content$","onMouseenter","e","onMouseleave","bindHover","addEventListener","unbindHover","removeEventListener","old","slotBase","_createVNode","_Fragment","$event","_len","arguments","length","args","_key","import","meta","env","DEV"],"sources":["../../../src/components/tooltip/YTooltip.tsx"],"sourcesContent":["import type { CSSProperties, PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  mergeProps,\n  nextTick,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { polyTransitionPropOptions } from '../../composables/transition';\nimport { toKebabCase } from '../../util/string';\nimport { bindClasses } from '../../util/vue-component';\nimport { YLayer } from '../layer';\nimport { YPlate } from '../plate';\n\nimport './YTooltip.scss';\n\nconst NAME = 'YTooltip';\nconst KEBAB_NAME = toKebabCase(NAME);\n\nconst YTooltipPropOptions = {\n  modelValue: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  tooltipClasses: {\n    type: [Array, String, Object] as PropType<\n      string[] | string | Record<string, any>\n    >,\n  },\n  disabled: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  position: {\n    type: String as PropType<'default' | 'top' | 'bottom' | 'left' | 'right'>,\n    default: 'default',\n  },\n  align: {\n    type: String as PropType<'center' | 'start' | 'end'>,\n    default: 'center',\n  },\n  openOnHover: {\n    type: Boolean as PropType<boolean>,\n    default: true,\n  },\n  preventClip: {\n    type: Boolean as PropType<boolean>,\n    default: true,\n  },\n};\n\n/**\n * #  Component\n */\nexport const YTooltip = defineComponent({\n  name: NAME,\n  props: {\n    ...YTooltipPropOptions,\n    transition: {\n      ...polyTransitionPropOptions.transition,\n      default: 'fade',\n    },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { slots, emit, expose }) {\n    const el$ = ref<typeof YLayer>();\n    const base$ = ref();\n    const baseSlot = ref();\n    const baseEl = ref<HTMLElement>();\n    const contentEl = ref<HTMLElement>();\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.tooltipClasses);\n      return {\n        ...boundClasses,\n        'y-tooltip': true,\n      };\n    });\n\n    const model = useModelDuplex(props);\n\n    const active = computed({\n      get: (): boolean => {\n        return !!model.value;\n      },\n      set: (v: boolean) => {\n        if (!(v && props.disabled)) model.value = v;\n      },\n    });\n\n    const coordinatesStyles = computed<CSSProperties>(() => {\n      const $base = baseEl.value;\n      if ($base) {\n        const { position, align } = props;\n        const $content = contentEl.value;\n        const rect = $base.getBoundingClientRect();\n\n        let top = rect.top;\n        let left = rect.left + rect.width / 2;\n\n        if ($content) {\n          if (position === 'top' || position === 'bottom') {\n            if (position === 'top') {\n              top -= $content.clientHeight;\n              top -= 8; // Offset\n            }\n\n            if (position === 'bottom') {\n              top += rect.height;\n              top += 8; // Offset\n            }\n\n            if (align === 'center') {\n              left -= $content.clientWidth / 2;\n            } else if (align === 'end') {\n              left = rect.right;\n              left -= $content.clientWidth;\n            }\n          }\n        }\n\n        return {\n          top: `${top}px`,\n          left: `${left}px`,\n        };\n      }\n      return {};\n    });\n\n    const baseFromSlotEl = computed(() => {\n      return baseSlot.value?.[0]?.el;\n    });\n\n    watchEffect(() => {\n      if (!base$.value) {\n        if (baseFromSlotEl.value?.nodeType !== 3) {\n          baseEl.value = baseFromSlotEl.value;\n        }\n        return;\n      }\n      const base = base$.value;\n      baseEl.value = base$.value?.$el ? base$.value?.$el : base;\n    });\n\n    watch(active, (neo) => {\n      if (neo) {\n        nextTick(() => {\n          const $content = el$.value?.content$;\n          contentEl.value = $content;\n        });\n      }\n    });\n\n    function onMouseenter(e: MouseEvent) {\n      if (props.openOnHover) {\n        active.value = true;\n      }\n    }\n\n    function onMouseleave(e: MouseEvent) {\n      if (props.openOnHover) {\n        active.value = false;\n      }\n    }\n\n    function bindHover(el: HTMLElement) {\n      el.addEventListener('mouseenter', onMouseenter);\n      el.addEventListener('mouseleave', onMouseleave);\n    }\n\n    function unbindHover(el: HTMLElement) {\n      el.removeEventListener('mouseenter', onMouseenter);\n      el.removeEventListener('mouseleave', onMouseleave);\n    }\n\n    watch(baseEl, (neo, old) => {\n      if (neo) {\n        bindHover(neo);\n      } else if (old) {\n        unbindHover(old);\n      }\n    });\n\n    useRender(() => {\n      const slotBase = slots.base?.({\n        active: active.value,\n        props: mergeProps({\n          ref: base$,\n        }),\n      });\n      baseSlot.value = slotBase;\n      return (\n        <>\n          {slotBase}\n          <YLayer\n            v-model={active.value}\n            ref={el$}\n            classes={classes.value}\n            scrim={false}\n            disabled={props.disabled}\n            content-styles={{ ...coordinatesStyles.value }}\n            transition={props.transition}\n          >\n            {{\n              default: (...args: any) => {\n                return (\n                  <>\n                    <YPlate></YPlate>\n                    <div class=\"y-tooltip__content\">\n                      {slots.default?.(...args) ?? ''}\n                    </div>\n                  </>\n                );\n              },\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    if (import.meta.env.DEV) {\n      return {\n        base$,\n        el$,\n        baseEl,\n        coordinatesStyles,\n        baseSlot,\n        active,\n      };\n    }\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"YTooltip.mjs","names":["computed","defineComponent","mergeProps","nextTick","ref","watch","watchEffect","useModelDuplex","useRender","polyTransitionPropOptions","toKebabCase","bindClasses","YLayer","YPlate","NAME","KEBAB_NAME","YTooltipPropOptions","modelValue","type","Boolean","default","tooltipClasses","Array","String","Object","disabled","position","align","openOnHover","preventClip","YTooltip","name","props","transition","emits","setup","_ref","slots","emit","expose","el$","base$","baseSlot","baseEl","contentEl","classes","boundClasses","model","active","get","value","set","v","coordinatesStyles","$base","$content","rect","getBoundingClientRect","top","left","width","clientHeight","height","clientWidth","right","baseFromSlotEl","el","nodeType","base","$el","neo","content$","onMouseenter","e","onMouseleave","bindHover","addEventListener","unbindHover","removeEventListener","old","slotBase","_createVNode","_Fragment","$event","_len","arguments","length","args","_key"],"sources":["../../../src/components/tooltip/YTooltip.tsx"],"sourcesContent":["import type { CSSProperties, PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  mergeProps,\n  nextTick,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { polyTransitionPropOptions } from '../../composables/transition';\nimport { toKebabCase } from '../../util/string';\nimport { bindClasses } from '../../util/vue-component';\nimport { YLayer } from '../layer';\nimport { YPlate } from '../plate';\n\nimport './YTooltip.scss';\n\nconst NAME = 'YTooltip';\nconst KEBAB_NAME = toKebabCase(NAME);\n\nconst YTooltipPropOptions = {\n  modelValue: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  tooltipClasses: {\n    type: [Array, String, Object] as PropType<\n      string[] | string | Record<string, any>\n    >,\n  },\n  disabled: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  position: {\n    type: String as PropType<'default' | 'top' | 'bottom' | 'left' | 'right'>,\n    default: 'default',\n  },\n  align: {\n    type: String as PropType<'center' | 'start' | 'end'>,\n    default: 'center',\n  },\n  openOnHover: {\n    type: Boolean as PropType<boolean>,\n    default: true,\n  },\n  preventClip: {\n    type: Boolean as PropType<boolean>,\n    default: true,\n  },\n};\n\n/**\n * #  Component\n */\nexport const YTooltip = defineComponent({\n  name: NAME,\n  props: {\n    ...YTooltipPropOptions,\n    transition: {\n      ...polyTransitionPropOptions.transition,\n      default: 'fade',\n    },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { slots, emit, expose }) {\n    const el$ = ref<typeof YLayer>();\n    const base$ = ref();\n    const baseSlot = ref();\n    const baseEl = ref<HTMLElement>();\n    const contentEl = ref<HTMLElement>();\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.tooltipClasses);\n      return {\n        ...boundClasses,\n        'y-tooltip': true,\n      };\n    });\n\n    const model = useModelDuplex(props);\n\n    const active = computed({\n      get: (): boolean => {\n        return !!model.value;\n      },\n      set: (v: boolean) => {\n        if (!(v && props.disabled)) model.value = v;\n      },\n    });\n\n    const coordinatesStyles = computed<CSSProperties>(() => {\n      const $base = baseEl.value;\n      if ($base) {\n        const { position, align } = props;\n        const $content = contentEl.value;\n        const rect = $base.getBoundingClientRect();\n\n        let top = rect.top;\n        let left = rect.left + rect.width / 2;\n\n        if ($content) {\n          if (position === 'top' || position === 'bottom') {\n            if (position === 'top') {\n              top -= $content.clientHeight;\n              top -= 8; // Offset\n            }\n\n            if (position === 'bottom') {\n              top += rect.height;\n              top += 8; // Offset\n            }\n\n            if (align === 'center') {\n              left -= $content.clientWidth / 2;\n            } else if (align === 'end') {\n              left = rect.right;\n              left -= $content.clientWidth;\n            }\n          }\n        }\n\n        return {\n          top: `${top}px`,\n          left: `${left}px`,\n        };\n      }\n      return {};\n    });\n\n    const baseFromSlotEl = computed(() => {\n      return baseSlot.value?.[0]?.el;\n    });\n\n    watchEffect(() => {\n      if (!base$.value) {\n        if (baseFromSlotEl.value?.nodeType !== 3) {\n          baseEl.value = baseFromSlotEl.value;\n        }\n        return;\n      }\n      const base = base$.value;\n      baseEl.value = base$.value?.$el ? base$.value?.$el : base;\n    });\n\n    watch(active, (neo) => {\n      if (neo) {\n        nextTick(() => {\n          const $content = el$.value?.content$;\n          contentEl.value = $content;\n        });\n      }\n    });\n\n    function onMouseenter(e: MouseEvent) {\n      if (props.openOnHover) {\n        active.value = true;\n      }\n    }\n\n    function onMouseleave(e: MouseEvent) {\n      if (props.openOnHover) {\n        active.value = false;\n      }\n    }\n\n    function bindHover(el: HTMLElement) {\n      el.addEventListener('mouseenter', onMouseenter);\n      el.addEventListener('mouseleave', onMouseleave);\n    }\n\n    function unbindHover(el: HTMLElement) {\n      el.removeEventListener('mouseenter', onMouseenter);\n      el.removeEventListener('mouseleave', onMouseleave);\n    }\n\n    watch(baseEl, (neo, old) => {\n      if (neo) {\n        bindHover(neo);\n      } else if (old) {\n        unbindHover(old);\n      }\n    });\n\n    useRender(() => {\n      const slotBase = slots.base?.({\n        active: active.value,\n        props: mergeProps({\n          ref: base$,\n        }),\n      });\n      baseSlot.value = slotBase;\n      return (\n        <>\n          {slotBase}\n          <YLayer\n            v-model={active.value}\n            ref={el$}\n            classes={classes.value}\n            scrim={false}\n            disabled={props.disabled}\n            content-styles={{ ...coordinatesStyles.value }}\n            transition={props.transition}\n          >\n            {{\n              default: (...args: any) => {\n                return (\n                  <>\n                    <YPlate></YPlate>\n                    <div class=\"y-tooltip__content\">\n                      {slots.default?.(...args) ?? ''}\n                    </div>\n                  </>\n                );\n              },\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    return {\n      base$,\n      el$,\n      baseEl,\n      coordinatesStyles,\n      baseSlot,\n      active,\n    };\n  },\n});\n"],"mappings":"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"}

package/lib/components/tree-view/YTreeView.mjs

@@ -1,9 +1,15 @@
 import { createTextVNode as _createTextVNode, createVNode as _createVNode, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
 import { computed, defineComponent, provide, ref, watch } from 'vue';
+import { useModelDuplex } from "../../composables/communication.mjs";
 import { useRender } from "../../composables/component.mjs";
-import { getObjectValueByPath, hasOwnProperty } from "../../util/common.mjs";
-import { YTreeViewNode } from "./YTreeViewNode.mjs";
+import { differenceBetween } from "../../util/array.mjs";
+import { deepEqual, getObjectValueByPath, hasOwnProperty } from "../../util/common.mjs";
+import { isColorValue } from "../../util/ui.mjs";
+import { chooseProps } from "../../util/vue-component.mjs";
+import { YTreeViewNode, pressYTreeViewNodeProps } from "./YTreeViewNode.mjs";
+import { getKeys } from "./util.mjs";
 import "./YTreeView.scss";
+const treeViewNodeProps = pressYTreeViewNodeProps();
 export const YTreeView = defineComponent({
   name: 'YTreeView',
   props: {
@@ -11,81 +17,274 @@ export const YTreeView = defineComponent({
       type: Array,
       default: () => []
     },
-    itemKey: {
+    expanded: {
+      type: [Array],
+      default: () => []
+    },
+    active: {
+      type: [Array],
+      default: () => []
+    },
+    multipleActive: Boolean,
+    activeStrategy: {
       type: String,
-      default: 'id'
+      // TODO: 'leaf'
+      default: 'independent'
     },
-    childrenKey: {
+    selected: {
+      type: [Array],
+      default: () => []
+    },
+    selectStrategy: {
       type: String,
-      default: 'children'
-    }
+      // TODO: 'leaf'
+      default: 'leaf'
+    },
+    returnItem: Boolean,
+    ...treeViewNodeProps
   },
+  emits: ['update:expanded', 'update:active', 'update:selected'],
   setup(props, _ref) {
     let {
-      slots
+      slots,
+      emit
     } = _ref;
-    const classes = computed(() => {
-      return {
-        'y-tree-view': true
-      };
-    });
     const nodes = ref({});
-    const expanded = ref([]);
+    const expanded = useModelDuplex(props, 'expanded');
+    const active = useModelDuplex(props, 'active');
+    const selected = useModelDuplex(props, 'selected');
+    const expandedSet = ref(new Set());
+    const selectedSet = ref(new Set());
+    const activeSet = ref(new Set());
+    const expandedCache = ref([]);
+
+    // Util Methods
+    function getDescendants(key) {
+      let descendants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      const {
+        childKeys
+      } = nodes.value[key];
+      descendants.push(...childKeys);
+      for (const childKey of childKeys) {
+        descendants = getDescendants(childKey, descendants);
+      }
+      return descendants;
+    }
+
+    // State Methods
     function updateNodes(items) {
       let parentKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       for (const item of items) {
         const key = getObjectValueByPath(item, props.itemKey);
         const children = getObjectValueByPath(item, props.childrenKey) ?? [];
         const exist = hasOwnProperty(nodes.value, key);
-        const oldNode = exist ? nodes.value[key] : {
+        const existNode = exist ? nodes.value[key] : {
+          vnode: null,
           selected: false,
           indeterminate: false,
           active: false,
-          opened: false,
-          vnode: null
+          expanded: false
         };
         const node = {
-          vnode: oldNode.vnode,
+          vnode: existNode.vnode,
           item,
           parentKey,
-          childKeys: children.map(child => getObjectValueByPath(child, props.itemKey))
+          childKeys: children.map(child => getObjectValueByPath(child, props.itemKey)),
+          expanded: children.length > 0 && existNode.expanded,
+          active: existNode.active,
+          indeterminate: existNode.indeterminate,
+          selected: existNode.selected
         };
         updateNodes(children, key);
         nodes.value[key] = node;
+        if (nodes.value[key].expanded) {
+          expandedSet.value.add(key);
+        }
+        if (nodes.value[key].selected) {
+          expandedSet.value.add(key);
+        }
+        if (nodes.value[key].active) {
+          activeSet.value.add(key);
+        }
+        issueVnodeState(key);
       }
     }
-    updateNodes(props.items);
+    function updateExpanded(key, to) {
+      if (!(key in nodes.value)) return;
+      const node = nodes.value[key];
+      if (to) {
+        expandedSet.value.add(key);
+        node.expanded = true;
+      } else {
+        expandedSet.value.delete(key);
+        node.expanded = false;
+        issueVnodeState(key);
+      }
+    }
+    function updateActive(key, to) {
+      if (!(key in nodes.value)) return;
+      const node = nodes.value[key];
+      let inactiveKey = !to ? key : '';
+      if (!props.multipleActive) {
+        [inactiveKey] = activeSet.value.keys();
+      }
+      if (to) {
+        activeSet.value.add(key);
+        node.active = true;
+      }
+      if (inactiveKey && inactiveKey in nodes.value) {
+        activeSet.value.delete(inactiveKey);
+        nodes.value[inactiveKey].active = false;
+        issueVnodeState(inactiveKey);
+      }
+      if (props.multipleActive && props.activeStrategy === 'cascade') {
+        for (const descendant of getDescendants(key)) {
+          if (descendant in nodes.value) {
+            to ? activeSet.value.add(descendant) : activeSet.value.delete(descendant);
+            nodes.value[descendant].active = to;
+            issueVnodeState(descendant);
+          }
+        }
+      }
+    }
+    function updateSelected(key, to) {
+      if (!(key in nodes.value)) return;
+      const node = nodes.value[key];
+      if (to) {
+        selectedSet.value.add(key);
+        node.selected = true;
+      }
+      if (!to && key in nodes.value) {
+        selectedSet.value.delete(key);
+        nodes.value[key].selected = false;
+        issueVnodeState(key);
+      }
+      if (props.selectStrategy === 'cascade') {
+        for (const descendant of getDescendants(key)) {
+          if (descendant in nodes.value) {
+            to ? selectedSet.value.add(descendant) : selectedSet.value.delete(descendant);
+            nodes.value[descendant].selected = to;
+            issueVnodeState(descendant);
+          }
+        }
+      }
+    }
+    function emitExpanded() {
+      const arr = [...expandedSet.value];
+      expanded.value = props.returnItem ? arr.map(key => nodes.value[key].item) : arr;
+    }
+    function emitActive() {
+      const arr = [...activeSet.value];
+      active.value = props.returnItem ? arr.map(key => nodes.value[key].item) : arr;
+    }
+    function emitSelected() {
+      const arr = [...selectedSet.value];
+      selected.value = props.returnItem ? arr.map(key => nodes.value[key].item) : arr;
+    }
+    function stateWatcher(value, stateSet, updater, emitter) {
+      const valuesOfKey = props.returnItem ? value.map(v => getObjectValueByPath(v, props.itemKey)) : value;
+      const old = [...stateSet.value];
+      if (deepEqual(old, valuesOfKey)) {
+        return;
+      }
+      old.forEach(key => updater(key, false));
+      valuesOfKey.forEach(key => updater(key, true));
+      emitter();
+    }
+    watch(expanded, neo => {
+      stateWatcher(neo, expandedSet, updateExpanded, emitExpanded);
+    });
+    watch(active, neo => {
+      stateWatcher(neo, activeSet, updateActive, emitActive);
+    });
+    watch(selected, neo => {
+      stateWatcher(neo, selectedSet, updateSelected, emitSelected);
+    });
     watch(() => props.items, neo => {
+      const oldKeys = Object.keys(nodes.value).map(nodeKey => getObjectValueByPath(nodes.value[nodeKey].item, props.itemKey));
+      const neoKeys = getKeys(neo, props.itemKey, props.childrenKey);
+      const diff = differenceBetween(oldKeys, neoKeys);
+      if (diff.length < 1 && neoKeys.length < oldKeys.length) {
+        return;
+      }
+      diff.forEach(k => delete nodes.value[k]);
+
+      // init
+      const oldSelected = [...selectedSet.value];
+      selectedSet.value.clear();
+      expandedSet.value.clear();
+      activeSet.value.clear();
       updateNodes(neo);
+      if (!deepEqual(oldSelected, [...selectedSet.value])) {
+        emitSelected();
+      }
     }, {
       deep: true
     });
+
+    // Provide & Issue
+    function issueVnodeState(key) {
+      const node = nodes.value[key];
+      if (node && node.vnode) {
+        node.vnode.active = node.active;
+        node.vnode.selected = node.selected;
+        node.vnode.indeterminate = node.indeterminate;
+        node.vnode.expanded = node.expanded;
+      }
+    }
     function register(key, vnode) {
       if (nodes.value[key]) {
         nodes.value[key].vnode = vnode;
       }
+      issueVnodeState(key);
     }
+    updateNodes(props.items);
     provide('tree-view', {
-      register
+      register,
+      updateExpanded,
+      updateActive,
+      updateSelected,
+      emitExpanded,
+      emitActive,
+      emitSelected
     });
     const renderLeaves = computed(() => {
       return props.items;
     });
+    const classes = computed(() => {
+      return {
+        'y-tree-view': true
+      };
+    });
+    const styles = computed(() => {
+      let color = props.activeColor;
+      if (props.activeColor && !isColorValue(props.activeColor)) {
+        color = `rgba(var(--y-theme--${props.activeColor}), 1)`;
+      }
+      return {
+        [`--y-tree-view__active-color`]: color
+      };
+    });
     useRender(() => {
       return _createVNode(_Fragment, null, [_createVNode("div", {
         "class": classes.value,
+        "style": styles.value,
         "role": "tree"
       }, [renderLeaves.value.length > 0 ? renderLeaves.value.map(leaf => {
         return _createVNode(YTreeViewNode, {
-          "item": leaf,
-          "level": 0
+          ...chooseProps(props, treeViewNodeProps),
+          item: leaf,
+          level: 0
         }, slots);
       }) : _createVNode("div", {
         "class": "y-tree-view__no-data"
       }, [slots['no-data'] ? slots['no-data']() : _createVNode("span", null, [_createTextVNode("No Data")])])])]);
     });
     return {
-      nodes
+      nodes,
+      expandedSet,
+      selectedSet,
+      activeSet
     };
   }
 });

package/lib/components/tree-view/YTreeView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YTreeView.mjs","names":["computed","defineComponent","provide","ref","watch","useRender","getObjectValueByPath","hasOwnProperty","YTreeViewNode","YTreeView","name","props","items","type","Array","default","itemKey","String","childrenKey","setup","_ref","slots","classes","nodes","expanded","updateNodes","parentKey","arguments","length","undefined","item","key","children","exist","value","oldNode","selected","indeterminate","active","opened","vnode","node","childKeys","map","child","neo","deep","register","renderLeaves","_createVNode","_Fragment","leaf","_createTextVNode"],"sources":["../../../src/components/tree-view/YTreeView.tsx"],"sourcesContent":["import {\r\n  PropType,\r\n  VNode,\r\n  computed,\r\n  defineComponent,\r\n  provide,\r\n  ref,\r\n  watch,\r\n} from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { getObjectValueByPath, hasOwnProperty } from '../../util/common';\r\nimport { YTreeViewNode } from './YTreeViewNode';\r\n\r\nimport './YTreeView.scss';\r\n\r\ntype NodeKey = string | number;\r\n\r\nexport const YTreeView = defineComponent({\r\n  name: 'YTreeView',\r\n  props: {\r\n    items: {\r\n      type: Array as PropType<any[]>,\r\n      default: () => [],\r\n    },\r\n    itemKey: {\r\n      type: String as PropType<string>,\r\n      default: 'id',\r\n    },\r\n    childrenKey: {\r\n      type: String as PropType<string>,\r\n      default: 'children',\r\n    },\r\n  },\r\n  setup(props, { slots }) {\r\n    const classes = computed(() => {\r\n      return {\r\n        'y-tree-view': true,\r\n      };\r\n    });\r\n\r\n    const nodes = ref<Record<NodeKey, any>>({});\r\n\r\n    const expanded = ref<string[]>([]);\r\n\r\n    function updateNodes(items: any[], parentKey: NodeKey | null = null) {\r\n      for (const item of items) {\r\n        const key = getObjectValueByPath(item, props.itemKey);\r\n        const children = getObjectValueByPath(item, props.childrenKey) ?? [];\r\n        const exist = hasOwnProperty(nodes.value, key);\r\n        const oldNode = exist\r\n          ? nodes.value[key]\r\n          : {\r\n              selected: false,\r\n              indeterminate: false,\r\n              active: false,\r\n              opened: false,\r\n              vnode: null,\r\n            };\r\n        const node = {\r\n          vnode: oldNode.vnode,\r\n          item,\r\n          parentKey,\r\n          childKeys: children.map((child: any) =>\r\n            getObjectValueByPath(child, props.itemKey),\r\n          ),\r\n        };\r\n\r\n        updateNodes(children, key);\r\n\r\n        nodes.value[key] = node;\r\n      }\r\n    }\r\n\r\n    updateNodes(props.items);\r\n    watch(\r\n      () => props.items,\r\n      (neo: any[]) => {\r\n        updateNodes(neo);\r\n      },\r\n      { deep: true },\r\n    );\r\n\r\n    function register(key: string | number, vnode: VNode) {\r\n      if (nodes.value[key]) {\r\n        nodes.value[key].vnode = vnode;\r\n      }\r\n    }\r\n\r\n    provide('tree-view', { register });\r\n\r\n    const renderLeaves = computed(() => {\r\n      return props.items;\r\n    });\r\n\r\n    useRender(() => {\r\n      return (\r\n        <>\r\n          <div class={classes.value} role=\"tree\">\r\n            {renderLeaves.value.length > 0 ? (\r\n              renderLeaves.value.map((leaf) => {\r\n                return (\r\n                  <YTreeViewNode item={leaf} level={0} v-slots={slots}>\r\n                  </YTreeViewNode>\r\n                );\r\n              })\r\n            ) : (\r\n              <div class=\"y-tree-view__no-data\">\r\n                {slots['no-data'] ? slots['no-data']() : <span>No Data</span>}\r\n              </div>\r\n            )}\r\n          </div>\r\n        </>\r\n      );\r\n    });\r\n\r\n    return {\r\n      nodes,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YTreeView = InstanceType<typeof YTreeView>;\r\n"],"mappings":"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"}
+{"version":3,"file":"YTreeView.mjs","names":["computed","defineComponent","provide","ref","watch","useModelDuplex","useRender","differenceBetween","deepEqual","getObjectValueByPath","hasOwnProperty","isColorValue","chooseProps","YTreeViewNode","pressYTreeViewNodeProps","getKeys","treeViewNodeProps","YTreeView","name","props","items","type","Array","default","expanded","active","multipleActive","Boolean","activeStrategy","String","selected","selectStrategy","returnItem","emits","setup","_ref","slots","emit","nodes","expandedSet","Set","selectedSet","activeSet","expandedCache","getDescendants","key","descendants","arguments","length","undefined","childKeys","value","push","childKey","updateNodes","parentKey","item","itemKey","children","childrenKey","exist","existNode","vnode","indeterminate","node","map","child","add","issueVnodeState","updateExpanded","to","delete","updateActive","inactiveKey","keys","descendant","updateSelected","emitExpanded","arr","emitActive","emitSelected","stateWatcher","stateSet","updater","emitter","valuesOfKey","v","old","forEach","neo","oldKeys","Object","nodeKey","neoKeys","diff","k","oldSelected","clear","deep","register","renderLeaves","classes","styles","color","activeColor","_createVNode","_Fragment","leaf","level","_createTextVNode"],"sources":["../../../src/components/tree-view/YTreeView.tsx"],"sourcesContent":["import {\n  PropType,\n  Ref,\n  VNode,\n  computed,\n  defineComponent,\n  provide,\n  ref,\n  watch,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { differenceBetween } from '../../util/array';\nimport {\n  deepEqual,\n  getObjectValueByPath,\n  hasOwnProperty,\n} from '../../util/common';\nimport { isColorValue } from '../../util/ui';\nimport { chooseProps } from '../../util/vue-component';\nimport { YTreeViewNode, pressYTreeViewNodeProps } from './YTreeViewNode';\nimport { getKeys } from './util';\n\nimport './YTreeView.scss';\nimport { NodeKey, NodeState } from './types';\n\nconst treeViewNodeProps = pressYTreeViewNodeProps();\n\nexport const YTreeView = defineComponent({\n  name: 'YTreeView',\n  props: {\n    items: {\n      type: Array as PropType<any[]>,\n      default: () => [],\n    },\n    expanded: {\n      type: [Array] as PropType<NodeKey[]>,\n      default: () => [],\n    },\n    active: {\n      type: [Array] as PropType<NodeKey[]>,\n      default: () => [],\n    },\n    multipleActive: Boolean,\n    activeStrategy: {\n      type: String as PropType<'independent' | 'cascade'>, // TODO: 'leaf'\n      default: 'independent',\n    },\n    selected: {\n      type: [Array] as PropType<NodeKey[]>,\n      default: () => [],\n    },\n    selectStrategy: {\n      type: String as PropType<'independent' | 'cascade'>, // TODO: 'leaf'\n      default: 'leaf',\n    },\n    returnItem: Boolean,\n    ...treeViewNodeProps,\n  },\n  emits: ['update:expanded', 'update:active', 'update:selected'],\n  setup(props, { slots, emit }) {\n    const nodes = ref<Record<NodeKey, any>>({});\n\n    const expanded = useModelDuplex(props, 'expanded');\n    const active = useModelDuplex(props, 'active');\n    const selected = useModelDuplex(props, 'selected');\n\n    const expandedSet = ref(new Set<NodeKey>());\n    const selectedSet = ref(new Set<NodeKey>());\n    const activeSet = ref(new Set<NodeKey>());\n\n    const expandedCache = ref<NodeKey[]>([]);\n\n    // Util Methods\n    function getDescendants(key: NodeKey, descendants: NodeKey[] = []) {\n      const { childKeys } = nodes.value[key];\n      descendants.push(...childKeys);\n      for (const childKey of childKeys) {\n        descendants = getDescendants(childKey, descendants);\n      }\n      return descendants;\n    }\n\n    // State Methods\n    function updateNodes(items: any[], parentKey: NodeKey | null = null) {\n      for (const item of items) {\n        const key = getObjectValueByPath(item, props.itemKey);\n        const children = getObjectValueByPath(item, props.childrenKey) ?? [];\n        const exist = hasOwnProperty(nodes.value, key);\n        const existNode = exist\n          ? nodes.value[key]\n          : {\n              vnode: null,\n              selected: false,\n              indeterminate: false,\n              active: false,\n              expanded: false,\n            };\n        const node: NodeState = {\n          vnode: existNode.vnode,\n          item,\n          parentKey,\n          childKeys: children.map((child: any) =>\n            getObjectValueByPath(child, props.itemKey),\n          ),\n          expanded: children.length > 0 && existNode.expanded,\n          active: existNode.active,\n          indeterminate: existNode.indeterminate,\n          selected: existNode.selected,\n        };\n\n        updateNodes(children, key);\n\n        nodes.value[key] = node;\n        if (nodes.value[key].expanded) {\n          expandedSet.value.add(key);\n        }\n        if (nodes.value[key].selected) {\n          expandedSet.value.add(key);\n        }\n        if (nodes.value[key].active) {\n          activeSet.value.add(key);\n        }\n\n        issueVnodeState(key);\n      }\n    }\n\n    function updateExpanded(key: NodeKey, to: boolean) {\n      if (!(key in nodes.value)) return;\n      const node = nodes.value[key];\n      if (to) {\n        expandedSet.value.add(key);\n        node.expanded = true;\n      } else {\n        expandedSet.value.delete(key);\n        node.expanded = false;\n        issueVnodeState(key);\n      }\n    }\n\n    function updateActive(key: NodeKey, to: boolean) {\n      if (!(key in nodes.value)) return;\n      const node = nodes.value[key];\n      let inactiveKey = !to ? key : '';\n      if (!props.multipleActive) {\n        [inactiveKey] = activeSet.value.keys();\n      }\n      if (to) {\n        activeSet.value.add(key);\n        node.active = true;\n      }\n      if (inactiveKey && inactiveKey in nodes.value) {\n        activeSet.value.delete(inactiveKey);\n        nodes.value[inactiveKey].active = false;\n        issueVnodeState(inactiveKey);\n      }\n\n      if (props.multipleActive && props.activeStrategy === 'cascade') {\n        for (const descendant of getDescendants(key)) {\n          if (descendant in nodes.value) {\n            to\n              ? activeSet.value.add(descendant)\n              : activeSet.value.delete(descendant);\n            nodes.value[descendant].active = to;\n            issueVnodeState(descendant);\n          }\n        }\n      }\n    }\n\n    function updateSelected(key: NodeKey, to: boolean) {\n      if (!(key in nodes.value)) return;\n      const node = nodes.value[key];\n\n      if (to) {\n        selectedSet.value.add(key);\n        node.selected = true;\n      }\n\n      if (!to && key in nodes.value) {\n        selectedSet.value.delete(key);\n        nodes.value[key].selected = false;\n        issueVnodeState(key);\n      }\n\n      if (props.selectStrategy === 'cascade') {\n        for (const descendant of getDescendants(key)) {\n          if (descendant in nodes.value) {\n            to\n              ? selectedSet.value.add(descendant)\n              : selectedSet.value.delete(descendant);\n            nodes.value[descendant].selected = to;\n            issueVnodeState(descendant);\n          }\n        }\n      }\n    }\n\n    function emitExpanded() {\n      const arr = [...expandedSet.value];\n      expanded.value = props.returnItem\n        ? arr.map((key) => nodes.value[key].item)\n        : arr;\n    }\n\n    function emitActive() {\n      const arr = [...activeSet.value];\n      active.value = props.returnItem\n        ? arr.map((key) => nodes.value[key].item)\n        : arr;\n    }\n\n    function emitSelected() {\n      const arr = [...selectedSet.value];\n      selected.value = props.returnItem\n        ? arr.map((key) => nodes.value[key].item)\n        : arr;\n    }\n\n    function stateWatcher(\n      value: any[],\n      stateSet: Ref<Set<NodeKey>>,\n      updater: (key: NodeKey, to: boolean) => void,\n      emitter: () => void,\n    ) {\n      const valuesOfKey = props.returnItem\n        ? value.map((v) => getObjectValueByPath(v, props.itemKey))\n        : value;\n      const old = [...stateSet.value];\n      if (deepEqual(old, valuesOfKey)) {\n        return;\n      }\n      old.forEach((key) => updater(key, false));\n      valuesOfKey.forEach((key) => updater(key, true));\n      emitter();\n    }\n\n    watch(expanded, (neo) => {\n      stateWatcher(neo, expandedSet, updateExpanded, emitExpanded);\n    });\n\n    watch(active, (neo) => {\n      stateWatcher(neo, activeSet, updateActive, emitActive);\n    });\n\n    watch(selected, (neo) => {\n      stateWatcher(neo, selectedSet, updateSelected, emitSelected);\n    });\n\n    watch(\n      () => props.items,\n      (neo: any[]) => {\n        const oldKeys = Object.keys(nodes.value).map((nodeKey) =>\n          getObjectValueByPath(nodes.value[nodeKey].item, props.itemKey),\n        );\n        const neoKeys = getKeys(neo, props.itemKey, props.childrenKey);\n        const diff = differenceBetween(oldKeys, neoKeys);\n        if (diff.length < 1 && neoKeys.length < oldKeys.length) {\n          return;\n        }\n        diff.forEach((k) => delete nodes.value[k]);\n\n        // init\n        const oldSelected = [...selectedSet.value];\n        selectedSet.value.clear();\n        expandedSet.value.clear();\n        activeSet.value.clear();\n        updateNodes(neo);\n        if (!deepEqual(oldSelected, [...selectedSet.value])) {\n          emitSelected();\n        }\n      },\n      { deep: true },\n    );\n\n    // Provide & Issue\n    function issueVnodeState(key: NodeKey) {\n      const node = nodes.value[key];\n      if (node && node.vnode) {\n        node.vnode.active = node.active;\n        node.vnode.selected = node.selected;\n        node.vnode.indeterminate = node.indeterminate;\n        node.vnode.expanded = node.expanded;\n      }\n    }\n\n    function register(key: NodeKey, vnode: VNode) {\n      if (nodes.value[key]) {\n        nodes.value[key].vnode = vnode;\n      }\n\n      issueVnodeState(key);\n    }\n\n    updateNodes(props.items);\n\n    provide('tree-view', {\n      register,\n      updateExpanded,\n      updateActive,\n      updateSelected,\n      emitExpanded,\n      emitActive,\n      emitSelected,\n    });\n\n    const renderLeaves = computed(() => {\n      return props.items;\n    });\n\n    const classes = computed(() => {\n      return {\n        'y-tree-view': true,\n      };\n    });\n\n    const styles = computed(() => {\n      let color = props.activeColor;\n      if (props.activeColor && !isColorValue(props.activeColor)) {\n        color = `rgba(var(--y-theme--${props.activeColor}), 1)`;\n      }\n      return {\n        [`--y-tree-view__active-color`]: color,\n      };\n    });\n\n    useRender(() => {\n      return (\n        <>\n          <div class={classes.value} style={styles.value} role=\"tree\">\n            {renderLeaves.value.length > 0 ? (\n              renderLeaves.value.map((leaf) => {\n                return (\n                  <YTreeViewNode\n                    v-slots={slots}\n                    {...{\n                      ...chooseProps(props, treeViewNodeProps),\n                      item: leaf,\n                      level: 0,\n                    }}\n                  ></YTreeViewNode>\n                );\n              })\n            ) : (\n              <div class=\"y-tree-view__no-data\">\n                {slots['no-data'] ? slots['no-data']() : <span>No Data</span>}\n              </div>\n            )}\n          </div>\n        </>\n      );\n    });\n\n    return {\n      nodes,\n      expandedSet,\n      selectedSet,\n      activeSet,\n    };\n  },\n});\n\nexport type YTreeView = InstanceType<typeof YTreeView>;\n"],"mappings":"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"}

package/lib/components/tree-view/YTreeView.scss

@@ -3,6 +3,7 @@
 
 .y-tree-view-node {
   &__container {
+    position: relative;
     display: flex;
     align-items: center;
     padding: 0 8px;
@@ -20,10 +21,20 @@
   &__no-expand-icon {
     display: inline-flex;
     align-items: center;
-    width: 12px;
+    width: 16px;
+    height: 16px;
     margin-right: 8px;
   }
 
+  &__expand-icon svg {
+    width: 10px;
+    height: 10px;
+  }
+
+  &--expanded > &__container > &__expand-icon svg {
+    transform: rotate(90deg);
+  }
+
   &__indents {
     display: flex;
   }
@@ -32,6 +43,18 @@
     width: 1rem;
   }
 
+  &__select {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 4px;
+    cursor: pointer;
+
+    > * {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
   &__content {
     font-size: 0.875rem;
     display: flex;
@@ -43,4 +66,14 @@
     display: inline-flex;
     align-items: center;
   }
+
+  &--active > &__container {
+    color: var(--y-tree-view__active-color);
+
+    > .y-plate {
+      background: currentColor;
+      opacity: 0.08;
+      border-radius: unset;
+    }
+  }
 }