yuyeon 0.0.0 → 0.0.2

package/lib/components/tooltip/YTooltip.mjs

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

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

@@ -0,0 +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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"}

package/lib/components/tooltip/YTooltip.scss

@@ -0,0 +1,19 @@
+.y-tooltip {
+  font-size: 0.875rem;
+
+  .y-layer__content {
+    padding: 4px 8px;
+
+    .y-plate {
+      border-radius: 6px;
+      background: rgba(0, 0, 0, 0.8);
+      position: absolute;
+      inset: 0;
+    }
+  }
+
+  &__content {
+    position: relative;
+    color: #fff;
+  }
+}

package/lib/components/tooltip/index.mjs

@@ -0,0 +1,2 @@
+export * from "./YTooltip.mjs";
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/tooltip/index.ts"],"sourcesContent":["export * from './YTooltip';\r\n"],"mappings":""}

package/lib/components/transitions/expand-transition.mjs

@@ -0,0 +1,88 @@
+import { Transition, defineComponent, h } from 'vue';
+import { kebabToCamel } from "../../util/string.mjs";
+export function createExpandTransition() {
+  let isHorizon = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  const direction = isHorizon ? 'h' : 'v';
+  const name = `expand-${direction}-transition`;
+  const sizeProperty = isHorizon ? 'width' : 'height';
+  const offsetProperty = kebabToCamel(`offset-${sizeProperty}`);
+  function getExpandTransitionHooks() {
+    function resetStyle(el) {
+      if (el._originStyle) {
+        el.style.overflow = el._originStyle.overflow;
+        const size = el._originStyle[sizeProperty];
+        if (size != null) {
+          el.style[sizeProperty] = size;
+        }
+      }
+      delete el._originStyle;
+    }
+    return {
+      onBeforeEnter(el) {
+        el._parent = el.parentNode;
+        el._originStyle = {
+          transition: el.style.transition,
+          overflow: el.style.overflow,
+          [sizeProperty]: el.style[sizeProperty]
+        };
+      },
+      onEnter(el) {
+        const originStyle = el._originStyle;
+        el.style.setProperty('transition', 'none', 'important');
+        el.style.overflow = 'hidden';
+        const offsetSize = `${el[offsetProperty]}px`;
+        el.style[sizeProperty] = '0';
+        el.getBoundingClientRect();
+        el.style.transition = originStyle?.transition ?? '';
+        requestAnimationFrame(() => {
+          el.style[sizeProperty] = offsetSize;
+        });
+      },
+      onAfterEnter(el) {
+        resetStyle(el);
+      },
+      onEnterCancelled(el) {
+        resetStyle(el);
+      },
+      onLeave(el) {
+        el._originStyle = {
+          transition: '',
+          overflow: el.style.overflow,
+          [sizeProperty]: el.style[sizeProperty]
+        };
+        el.style.overflow = 'hidden';
+        el.style[sizeProperty] = `${el[offsetProperty]}px`;
+        el.getBoundingClientRect();
+        requestAnimationFrame(() => {
+          el.style[sizeProperty] = '0';
+        });
+      },
+      onAfterLeave(el) {
+        resetStyle(el);
+      },
+      onLeaveCancelled(el) {
+        resetStyle(el);
+      }
+    };
+  }
+  return defineComponent({
+    name,
+    props: {
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      return () => h(Transition, {
+        name: props.disabled ? '' : name,
+        css: !props.disabled,
+        ...(props.disabled ? {} : getExpandTransitionHooks())
+      }, slots.default);
+    }
+  });
+}
+//# sourceMappingURL=expand-transition.mjs.map

package/lib/components/transitions/expand-transition.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"expand-transition.mjs","names":["Transition","defineComponent","h","kebabToCamel","createExpandTransition","isHorizon","arguments","length","undefined","direction","name","sizeProperty","offsetProperty","getExpandTransitionHooks","resetStyle","el","_originStyle","style","overflow","size","onBeforeEnter","_parent","parentNode","transition","onEnter","originStyle","setProperty","offsetSize","getBoundingClientRect","requestAnimationFrame","onAfterEnter","onEnterCancelled","onLeave","onAfterLeave","onLeaveCancelled","props","disabled","type","Boolean","default","setup","_ref","slots","css"],"sources":["../../../src/components/transitions/expand-transition.ts"],"sourcesContent":["import { PropType, Transition, defineComponent, h } from 'vue';\n\nimport { kebabToCamel } from '../../util/string';\n\ntype HTMLParentElement = (Node & ParentNode & HTMLElement) | null;\ninterface HTMLExpandElement extends HTMLElement {\n  _parent?: HTMLParentElement;\n  _originStyle?: {\n    transition: string;\n    overflow: string;\n    height?: string | null;\n    width?: string | null;\n  };\n}\n\nexport function createExpandTransition(isHorizon = false) {\n  const direction = isHorizon ? 'h' : 'v';\n  const name = `expand-${direction}-transition`;\n  const sizeProperty = isHorizon ? 'width' : 'height';\n  const offsetProperty = kebabToCamel(`offset-${sizeProperty}`) as\n    | 'offsetWidth'\n    | 'offsetHeight';\n\n  function getExpandTransitionHooks(): Record<string, any> {\n    function resetStyle(el: HTMLExpandElement) {\n      if (el._originStyle) {\n        el.style.overflow = el._originStyle.overflow;\n        const size = el._originStyle[sizeProperty];\n        if (size != null) {\n          el.style[sizeProperty] = size;\n        }\n      }\n      delete el._originStyle;\n    }\n\n    return {\n      onBeforeEnter(el: HTMLExpandElement) {\n        el._parent = el.parentNode as HTMLParentElement;\n        el._originStyle = {\n          transition: el.style.transition,\n          overflow: el.style.overflow,\n          [sizeProperty]: el.style[sizeProperty],\n        };\n      },\n      onEnter(el: HTMLExpandElement) {\n        const originStyle = el._originStyle;\n        el.style.setProperty('transition', 'none', 'important');\n        el.style.overflow = 'hidden';\n        const offsetSize = `${el[offsetProperty]}px`;\n        el.style[sizeProperty] = '0';\n        el.getBoundingClientRect();\n        el.style.transition = originStyle?.transition ?? '';\n\n        requestAnimationFrame(() => {\n          el.style[sizeProperty] = offsetSize;\n        });\n      },\n      onAfterEnter(el: HTMLExpandElement) {\n        resetStyle(el);\n      },\n      onEnterCancelled(el: HTMLExpandElement) {\n        resetStyle(el);\n      },\n      onLeave(el: HTMLExpandElement) {\n        el._originStyle = {\n          transition: '',\n          overflow: el.style.overflow,\n          [sizeProperty]: el.style[sizeProperty],\n        };\n        el.style.overflow = 'hidden';\n        el.style[sizeProperty] = `${el[offsetProperty]}px`;\n        el.getBoundingClientRect();\n\n        requestAnimationFrame(() => {\n          el.style[sizeProperty] = '0';\n        })\n      },\n      onAfterLeave(el: HTMLExpandElement) {\n        resetStyle(el);\n      },\n      onLeaveCancelled(el: HTMLExpandElement) {\n        resetStyle(el);\n      },\n    };\n  }\n\n  return defineComponent({\n    name,\n    props: {\n      disabled: {\n        type: Boolean as PropType<boolean>,\n        default: false,\n      },\n    },\n    setup(props, { slots }) {\n      return () =>\n        h(\n          Transition,\n          { name: props.disabled ? '' : name, css: !props.disabled, ...(props.disabled ? {} : getExpandTransitionHooks()) },\n          slots.default,\n        );\n    },\n  });\n}\n"],"mappings":"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"}

package/lib/components/transitions/index.mjs

@@ -0,0 +1,4 @@
+import { createExpandTransition } from "./expand-transition.mjs";
+export const YExpandVTransition = createExpandTransition(false);
+export const YExpandHTransition = createExpandTransition(true);
+//# sourceMappingURL=index.mjs.map

package/lib/components/transitions/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["createExpandTransition","YExpandVTransition","YExpandHTransition"],"sources":["../../../src/components/transitions/index.ts"],"sourcesContent":["import { createExpandTransition } from './expand-transition';\n\nexport const YExpandVTransition = createExpandTransition(false);\nexport const YExpandHTransition = createExpandTransition(true);\n\nexport type YExpandVTransition = InstanceType<typeof YExpandVTransition>;\nexport type YExpandHTransition = InstanceType<typeof YExpandHTransition>;\n"],"mappings":"SAASA,sBAAsB;AAE/B,OAAO,MAAMC,kBAAkB,GAAGD,sBAAsB,CAAC,KAAK,CAAC;AAC/D,OAAO,MAAME,kBAAkB,GAAGF,sBAAsB,CAAC,IAAI,CAAC"}

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

@@ -0,0 +1,92 @@
+import { createTextVNode as _createTextVNode, createVNode as _createVNode, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
+import { computed, defineComponent, provide, ref, watch } from 'vue';
+import { useRender } from "../../composables/component.mjs";
+import { getObjectValueByPath, hasOwnProperty } from "../../util/common.mjs";
+import { YTreeViewNode } from "./YTreeViewNode.mjs";
+import "./YTreeView.scss";
+export const YTreeView = defineComponent({
+  name: 'YTreeView',
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    itemKey: {
+      type: String,
+      default: 'id'
+    },
+    childrenKey: {
+      type: String,
+      default: 'children'
+    }
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const classes = computed(() => {
+      return {
+        'y-tree-view': true
+      };
+    });
+    const nodes = ref({});
+    const expanded = ref([]);
+    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] : {
+          selected: false,
+          indeterminate: false,
+          active: false,
+          opened: false,
+          vnode: null
+        };
+        const node = {
+          vnode: oldNode.vnode,
+          item,
+          parentKey,
+          childKeys: children.map(child => getObjectValueByPath(child, props.itemKey))
+        };
+        updateNodes(children, key);
+        nodes.value[key] = node;
+      }
+    }
+    updateNodes(props.items);
+    watch(() => props.items, neo => {
+      updateNodes(neo);
+    }, {
+      deep: true
+    });
+    function register(key, vnode) {
+      if (nodes.value[key]) {
+        nodes.value[key].vnode = vnode;
+      }
+    }
+    provide('tree-view', {
+      register
+    });
+    const renderLeaves = computed(() => {
+      return props.items;
+    });
+    useRender(() => {
+      return _createVNode(_Fragment, null, [_createVNode("div", {
+        "class": classes.value,
+        "role": "tree"
+      }, [renderLeaves.value.length > 0 ? renderLeaves.value.map(leaf => {
+        return _createVNode(YTreeViewNode, {
+          "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
+    };
+  }
+});
+//# sourceMappingURL=YTreeView.mjs.map

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

@@ -0,0 +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":";AAAA,SAGEA,QAAQ,EACRC,eAAe,EACfC,OAAO,EACPC,GAAG,EACHC,KAAK,QACA,KAAK;AAAC,SAEJC,SAAS;AAAA,SACTC,oBAAoB,EAAEC,cAAc;AAAA,SACpCC,aAAa;AAEtB;AAIA,OAAO,MAAMC,SAAS,GAAGR,eAAe,CAAC;EACvCS,IAAI,EAAE,WAAW;EACjBC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAEC,KAAwB;MAC9BC,OAAO,EAAEA,CAAA,KAAM;IACjB,CAAC;IACDC,OAAO,EAAE;MACPH,IAAI,EAAEI,MAA0B;MAChCF,OAAO,EAAE;IACX,CAAC;IACDG,WAAW,EAAE;MACXL,IAAI,EAAEI,MAA0B;MAChCF,OAAO,EAAE;IACX;EACF,CAAC;EACDI,KAAKA,CAACR,KAAK,EAAAS,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAME,OAAO,GAAGtB,QAAQ,CAAC,MAAM;MAC7B,OAAO;QACL,aAAa,EAAE;MACjB,CAAC;IACH,CAAC,CAAC;IAEF,MAAMuB,KAAK,GAAGpB,GAAG,CAAuB,CAAC,CAAC,CAAC;IAE3C,MAAMqB,QAAQ,GAAGrB,GAAG,CAAW,EAAE,CAAC;IAElC,SAASsB,WAAWA,CAACb,KAAY,EAAoC;MAAA,IAAlCc,SAAyB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;MACjE,KAAK,MAAMG,IAAI,IAAIlB,KAAK,EAAE;QACxB,MAAMmB,GAAG,GAAGzB,oBAAoB,CAACwB,IAAI,EAAEnB,KAAK,CAACK,OAAO,CAAC;QACrD,MAAMgB,QAAQ,GAAG1B,oBAAoB,CAACwB,IAAI,EAAEnB,KAAK,CAACO,WAAW,CAAC,IAAI,EAAE;QACpE,MAAMe,KAAK,GAAG1B,cAAc,CAACgB,KAAK,CAACW,KAAK,EAAEH,GAAG,CAAC;QAC9C,MAAMI,OAAO,GAAGF,KAAK,GACjBV,KAAK,CAACW,KAAK,CAACH,GAAG,CAAC,GAChB;UACEK,QAAQ,EAAE,KAAK;UACfC,aAAa,EAAE,KAAK;UACpBC,MAAM,EAAE,KAAK;UACbC,MAAM,EAAE,KAAK;UACbC,KAAK,EAAE;QACT,CAAC;QACL,MAAMC,IAAI,GAAG;UACXD,KAAK,EAAEL,OAAO,CAACK,KAAK;UACpBV,IAAI;UACJJ,SAAS;UACTgB,SAAS,EAAEV,QAAQ,CAACW,GAAG,CAAEC,KAAU,IACjCtC,oBAAoB,CAACsC,KAAK,EAAEjC,KAAK,CAACK,OAAO,CAC3C;QACF,CAAC;QAEDS,WAAW,CAACO,QAAQ,EAAED,GAAG,CAAC;QAE1BR,KAAK,CAACW,KAAK,CAACH,GAAG,CAAC,GAAGU,IAAI;MACzB;IACF;IAEAhB,WAAW,CAACd,KAAK,CAACC,KAAK,CAAC;IACxBR,KAAK,CACH,MAAMO,KAAK,CAACC,KAAK,EAChBiC,GAAU,IAAK;MACdpB,WAAW,CAACoB,GAAG,CAAC;IAClB,CAAC,EACD;MAAEC,IAAI,EAAE;IAAK,CACf,CAAC;IAED,SAASC,QAAQA,CAAChB,GAAoB,EAAES,KAAY,EAAE;MACpD,IAAIjB,KAAK,CAACW,KAAK,CAACH,GAAG,CAAC,EAAE;QACpBR,KAAK,CAACW,KAAK,CAACH,GAAG,CAAC,CAACS,KAAK,GAAGA,KAAK;MAChC;IACF;IAEAtC,OAAO,CAAC,WAAW,EAAE;MAAE6C;IAAS,CAAC,CAAC;IAElC,MAAMC,YAAY,GAAGhD,QAAQ,CAAC,MAAM;MAClC,OAAOW,KAAK,CAACC,KAAK;IACpB,CAAC,CAAC;IAEFP,SAAS,CAAC,MAAM;MACd,OAAA4C,YAAA,CAAAC,SAAA,SAAAD,YAAA;QAAA,SAEgB3B,OAAO,CAACY,KAAK;QAAA,QAAO;MAAM,IACnCc,YAAY,CAACd,KAAK,CAACN,MAAM,GAAG,CAAC,GAC5BoB,YAAY,CAACd,KAAK,CAACS,GAAG,CAAEQ,IAAI,IAAK;QAC/B,OAAAF,YAAA,CAAAzC,aAAA;UAAA,QACuB2C,IAAI;UAAA,SAAS;QAAC,GAAW9B,KAAK;MAGvD,CAAC,CAAC,GAAA4B,YAAA;QAAA,SAES;MAAsB,IAC9B5B,KAAK,CAAC,SAAS,CAAC,GAAGA,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAA4B,YAAA,gBAAAG,gBAAA,aAAuB,EAEhE;IAIT,CAAC,CAAC;IAEF,OAAO;MACL7B;IACF,CAAC;EACH;AACF,CAAC,CAAC"}

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

@@ -0,0 +1,46 @@
+.y-tree-view {
+}
+
+.y-tree-view-node {
+  &__container {
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
+    min-height: 2rem;
+    border-radius: 8px;
+    transition: all 180ms ease-in, border-radius 300ms 100ms ease-in-out;
+
+    &:hover {
+      background: rgba(124, 124, 124, 0.14);
+      border-radius: 4px;
+    }
+  }
+
+  &__expand-icon,
+  &__no-expand-icon {
+    display: inline-flex;
+    align-items: center;
+    width: 12px;
+    margin-right: 8px;
+  }
+
+  &__indents {
+    display: flex;
+  }
+
+  &__indent-spacer {
+    width: 1rem;
+  }
+
+  &__content {
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+  }
+
+  &__leading {
+    margin-right: 8px;
+    display: inline-flex;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,122 @@
+import { computed, defineComponent, h, inject } from 'vue';
+import { useRender } from "../../composables/component.mjs";
+import { getObjectValueByPath } from "../../util/common.mjs";
+import { YIconExpand } from "../icons/index.mjs";
+export const YTreeViewNode = defineComponent({
+  name: 'YTreeNode',
+  props: {
+    item: {
+      type: Object
+    },
+    itemKey: {
+      type: String,
+      default: 'id'
+    },
+    textKey: {
+      type: String,
+      default: 'text'
+    },
+    childrenKey: {
+      type: String,
+      default: 'children'
+    },
+    level: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const treeView = inject('tree-view');
+    const children = computed(() => {
+      return props.item?.[props.childrenKey] ?? [];
+    });
+    const imLeaf = computed(() => children.value.length < 1);
+    const classes = computed(() => {
+      return {
+        'y-tree-view-node': true,
+        'y-tree-view-node--leaf': imLeaf.value
+      };
+    });
+    const styles = computed(() => {
+      return {
+        '--tree-view-node--level': props.level
+      };
+    });
+    const contentText = computed(() => {
+      return getObjectValueByPath(props.item, props.textKey) ?? '';
+    });
+    const slotProps = computed(() => {
+      return {
+        level: props.level,
+        imLeaf: imLeaf.value
+      };
+    });
+    useRender(() => {
+      const leaves = children.value.map(item => {
+        return h(YTreeViewNode, {
+          ...props,
+          level: (props.level ?? 0) + 1,
+          item
+        }, slots);
+      });
+      const indentSpacer = [];
+      for (let i = 0; i < props.level; i += 1) {
+        indentSpacer.push(h('div', {
+          class: 'y-tree-view-node__indent-spacer'
+        }));
+      }
+      return h('div', {
+        class: classes.value,
+        style: styles.value,
+        '.role': 'treeitem',
+        'data-level': props.level
+      }, [h('div', {
+        class: 'y-tree-view-node__container'
+      }, [h('div', {
+        class: 'y-tree-view-node__indents'
+      }, indentSpacer), /* EXPAND */
+      !imLeaf.value ? h('i', {
+        class: 'y-tree-view-node__expand-icon'
+      }, [slots['expand-icon'] ? slots['expand-icon']() : h(YIconExpand, {
+        style: {
+          width: '12px',
+          height: '12px'
+        }
+      })]) : h('i', {
+        class: 'y-tree-view-node__no-expand-icon'
+      }), /* CONTENT */
+      h('div', {
+        class: 'y-tree-view-node__content'
+      }, [slots.leading && h('div', {
+        class: 'y-tree-view-node__leading'
+      }, slots.leading(slotProps.value)), h('div', {
+        class: 'y-tree-view-node__text'
+      }, slots.default ? slots.default?.({
+        text: contentText.value,
+        item: props.item
+      }) : contentText.value), slots.trailing && h('div', {
+        class: 'y-tree-view-node__trailing'
+      }, slots.trailing())])]), /* CHILDREN */
+      children.value.length > 0 ? h('div', {
+        class: {
+          'y-tree-view-node__leaves': true
+        },
+        role: 'tree'
+      }, leaves) : undefined]);
+    });
+    const myKey = computed(() => {
+      return getObjectValueByPath(props.item, props.itemKey);
+    });
+    return {
+      treeView,
+      myKey
+    };
+  },
+  created() {
+    this.treeView?.register?.(this.myKey, this);
+  }
+});
+//# sourceMappingURL=YTreeViewNode.mjs.map