yuyeon 0.0.6 → 0.0.7

package/lib/components/pagination/YPagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YPagination.mjs","names":["computed","defineComponent","shallowRef","useModelDuplex","useRender","useRefs","useResizeObserver","getRangeArr","toStyleSizeValue","propsFactory","YButton","YIconPageControl","pressYPaginationProps","start","type","Number","String","default","modelValue","props","disabled","Boolean","length","validator","val","totalVisible","showEndButton","gap","color","activeColor","YPagination","name","components","emits","value","change","control","setup","_ref","slots","emit","page","parseInt","itemCount","resizeObservedRef","entries","target","contentRect","firstItem","querySelector","listWidth","width","itemWidth","offsetWidth","parseFloat","getComputedStyle","marginRight","calcItemCount","fixedCount","fixedWidth","Math","max","floor","toFixed","innerWidth","controls","prevDisabled","nextDisabled","first","onClick","e","preventDefault","prev","to","next","min","last","range","isNaN","MAX_SAFE_INTEGER","even","middle","left","right","rangeLength","rangeStart","ceil","refs","updateRef","changePage","event","arguments","undefined","items","map","item","index","ref","active","key","ellipsis","styles","_createVNode"],"sources":["../../../src/components/pagination/YPagination.tsx"],"sourcesContent":["import {\r\n  ComponentPublicInstance,\r\n  computed,\r\n  defineComponent,\r\n  shallowRef,\r\n} from 'vue';\r\n\r\nimport { useModelDuplex } from '../../composables/communication';\r\nimport { useRender } from '../../composables/component';\r\nimport { useRefs } from '../../composables/ref';\r\nimport { useResizeObserver } from '../../composables/resize-observer';\r\nimport { getRangeArr } from '../../util/common';\r\nimport { toStyleSizeValue } from '../../util/ui';\r\nimport { propsFactory } from '../../util/vue-component';\r\nimport { YButton } from '../button';\r\nimport { YIconPageControl } from '../icons/YIconPageControl';\r\n\r\nimport './YPagination.scss';\r\n\r\nexport const pressYPaginationProps = propsFactory(\r\n  {\r\n    start: {\r\n      type: [Number, String],\r\n      default: 1,\r\n    },\r\n    modelValue: {\r\n      type: Number,\r\n      default: (props: any) => props.start as number,\r\n    },\r\n    disabled: Boolean,\r\n    length: {\r\n      type: [Number, String],\r\n      default: 1,\r\n      validator: (val: number) => val % 1 === 0,\r\n    },\r\n    totalVisible: [Number, String],\r\n    showEndButton: Boolean,\r\n    gap: {\r\n      type: [String, Number],\r\n      default: 4,\r\n    },\r\n    color: String,\r\n    activeColor: String,\r\n  },\r\n  'y-pagination',\r\n);\r\n\r\nexport const YPagination = defineComponent({\r\n  name: 'YPagination',\r\n  components: {\r\n    YButton,\r\n  },\r\n  props: {\r\n    ...pressYPaginationProps(),\r\n  },\r\n  emits: {\r\n    'update:modelValue': (value: number) => true,\r\n    change: (value: number, control?: string) => true,\r\n  },\r\n  setup(props, { slots, emit }) {\r\n    const page = useModelDuplex(props);\r\n\r\n    const length = computed(() => parseInt(props.length as string, 10));\r\n    const start = computed(() => parseInt(props.start as string, 10));\r\n\r\n    const itemCount = shallowRef(-1);\r\n\r\n    const { resizeObservedRef } = useResizeObserver((entries) => {\r\n      if (1 > entries.length) return;\r\n      const { target, contentRect } = entries[0];\r\n\r\n      const firstItem = target.querySelector(\r\n        '.y-pagination__list > *',\r\n      ) as HTMLElement;\r\n      if (firstItem) {\r\n        const listWidth = contentRect.width;\r\n        const itemWidth =\r\n          firstItem.offsetWidth +\r\n          parseFloat(getComputedStyle(firstItem).marginRight) * 2;\r\n        itemCount.value = calcItemCount(listWidth, itemWidth);\r\n      }\r\n    });\r\n\r\n    function calcItemCount(listWidth: number, itemWidth: number) {\r\n      const fixedCount = props.showEndButton ? 5 : 3;\r\n      const fixedWidth = itemWidth * fixedCount;\r\n      const gap = +(props.gap ?? 4);\r\n      return Math.max(\r\n        0,\r\n        Math.floor(\r\n          +((listWidth - fixedWidth - gap) / (itemWidth + gap)).toFixed(2),\r\n        ),\r\n      );\r\n    }\r\n\r\n    const totalVisible = computed(() => {\r\n      if (props.totalVisible) return parseInt(props.totalVisible as string, 10);\r\n      else if (itemCount.value >= 0) return itemCount.value;\r\n      return calcItemCount(innerWidth, 58);\r\n    });\r\n\r\n    const controls = computed(() => {\r\n      const prevDisabled = !!props.disabled || page.value <= start.value;\r\n      const nextDisabled =\r\n        !!props.disabled || page.value >= start.value + length.value - 1;\r\n      return {\r\n        first: {\r\n          disabled: prevDisabled,\r\n          onClick: (e: MouseEvent) => {\r\n            e.preventDefault();\r\n            page.value = 1;\r\n            emit('change', 1, 'first');\r\n          },\r\n        },\r\n        prev: {\r\n          disabled: prevDisabled,\r\n          onClick: (e: MouseEvent) => {\r\n            e.preventDefault();\r\n            const to = Math.max(1, page.value - 1);\r\n            page.value = to;\r\n            emit('change', to, 'prev');\r\n          },\r\n        },\r\n        next: {\r\n          disabled: nextDisabled,\r\n          onClick: (e: MouseEvent) => {\r\n            e.preventDefault();\r\n            const to = Math.min(+length.value, page.value + 1);\r\n            page.value = to;\r\n            emit('change', to, 'next');\r\n          },\r\n        },\r\n        last: {\r\n          disabled: nextDisabled,\r\n          onClick: (e: MouseEvent) => {\r\n            e.preventDefault();\r\n            const to = +length.value;\r\n            page.value = +length.value;\r\n            emit('change', to, 'last');\r\n          },\r\n        },\r\n      };\r\n    });\r\n\r\n    const range = computed(() => {\r\n      if (\r\n        length.value <= 0 ||\r\n        isNaN(length.value) ||\r\n        length.value > Number.MAX_SAFE_INTEGER\r\n      )\r\n        return [];\r\n      if (totalVisible.value <= 1) return [page.value];\r\n      if (length.value <= totalVisible.value) {\r\n        return getRangeArr(length.value, start.value);\r\n      }\r\n      const even = totalVisible.value % 2 === 0;\r\n      const middle = even\r\n        ? totalVisible.value / 2\r\n        : Math.floor(totalVisible.value / 2);\r\n      const left = even ? middle : middle + 1;\r\n      const right = length.value - middle;\r\n\r\n      if (left - page.value >= 0) {\r\n        return [\r\n          ...getRangeArr(Math.max(1, totalVisible.value - 1), start.value),\r\n          'ellipsis',\r\n          length.value,\r\n        ];\r\n      } else if (page.value - right >= (even ? 1 : 0)) {\r\n        const rangeLength = totalVisible.value - 1;\r\n        const rangeStart = length.value - rangeLength + start.value;\r\n        return [\r\n          start.value,\r\n          'ellipsis',\r\n          ...getRangeArr(rangeLength, rangeStart),\r\n        ];\r\n      } else {\r\n        const rangeLength = Math.max(1, totalVisible.value - 3);\r\n        const rangeStart =\r\n          rangeLength === 1\r\n            ? page.value\r\n            : page.value - Math.ceil(rangeLength / 2) + start.value;\r\n        return [\r\n          start.value,\r\n          'ellipsis',\r\n          ...getRangeArr(rangeLength, rangeStart),\r\n          'ellipsis',\r\n          length.value,\r\n        ];\r\n      }\r\n    });\r\n\r\n    const { refs, updateRef } = useRefs<ComponentPublicInstance>();\r\n\r\n    function changePage(event: Event, to = 1) {\r\n      event.preventDefault();\r\n      page.value = to;\r\n      emit('change', to);\r\n    }\r\n\r\n    const items = computed(() => {\r\n      return range.value.map((item, index) => {\r\n        const ref = (e: any) => updateRef(e, index);\r\n\r\n        if (item === 'ellipsis') {\r\n          return {\r\n            active: false,\r\n            key: `ellipsis-${index}`,\r\n            page: item,\r\n            props: {\r\n              ref,\r\n              ellipsis: true,\r\n              disabled: true, // TODO: skipper\r\n            },\r\n          };\r\n        } else {\r\n          const active = item === page.value;\r\n          return {\r\n            active,\r\n            key: `item-${item}`,\r\n            page: item,\r\n            props: {\r\n              ref,\r\n              ellipsis: false,\r\n              disabled: !!props.disabled || +props.length < 2,\r\n              color: active ? props.activeColor : props.color,\r\n              onClick: (e: MouseEvent) => changePage(e, item),\r\n            },\r\n          };\r\n        }\r\n      });\r\n    });\r\n\r\n    const styles = computed(() => {\r\n      let gap = undefined;\r\n      if (props.gap) {\r\n        const value = +props.gap;\r\n        if (!isNaN(value)) {\r\n          gap = toStyleSizeValue(value);\r\n        } else if (typeof props.gap === 'string') {\r\n          gap = props.gap;\r\n        }\r\n      }\r\n      return {\r\n        '--y-pagination__gap': gap,\r\n      };\r\n    });\r\n\r\n    useRender(() => {\r\n      return (\r\n        <div\r\n          class={['y-pagination']}\r\n          role={'navigation'}\r\n          style={styles.value}\r\n          ref={resizeObservedRef}\r\n        >\r\n          <ul class={['y-pagination__list']}>\r\n            {props.showEndButton && (\r\n              <li key=\"first\" class=\"y-pagination__first\">\r\n                {slots.first ? (\r\n                  slots.first(controls.value.first)\r\n                ) : (\r\n                  <YButton {...controls.value.first}>\r\n                    <YIconPageControl type={'first'}></YIconPageControl>\r\n                  </YButton>\r\n                )}\r\n              </li>\r\n            )}\r\n            <li key=\"prev\" class=\"y-pagination__prev\">\r\n              {slots.prev ? (\r\n                slots.prev(controls.value.prev)\r\n              ) : (\r\n                <YButton {...controls.value.prev}>\r\n                  <YIconPageControl type={'prev'}></YIconPageControl>\r\n                </YButton>\r\n              )}\r\n            </li>\r\n            {items.value.map((item, index) => {\r\n              return (\r\n                <li\r\n                  key={item.key}\r\n                  class={[\r\n                    'y-pagination__item',\r\n                    { 'y-pagination__item--active': item.active },\r\n                  ]}\r\n                >\r\n                  <YButton {...item.props}>\r\n                    {item.props.ellipsis ? '...' : item.page}\r\n                  </YButton>\r\n                </li>\r\n              );\r\n            })}\r\n            <li key=\"next\" class=\"y-pagination__next\">\r\n              {slots.next ? (\r\n                slots.next(controls.value.next)\r\n              ) : (\r\n                <YButton {...controls.value.next}>\r\n                  <YIconPageControl type={'next'}></YIconPageControl>\r\n                </YButton>\r\n              )}\r\n            </li>\r\n            {props.showEndButton && (\r\n              <li key=\"last\" class=\"y-pagination__last\">\r\n                {slots.last ? (\r\n                  slots.last(controls.value.last)\r\n                ) : (\r\n                  <YButton {...controls.value.last}>\r\n                    <YIconPageControl type={'last'}></YIconPageControl>\r\n                  </YButton>\r\n                )}\r\n              </li>\r\n            )}\r\n          </ul>\r\n        </div>\r\n      );\r\n    });\r\n\r\n    return {\r\n      itemCount,\r\n      page,\r\n      refs,\r\n    };\r\n  },\r\n});\r\n"],"mappings":"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"}
+{"version":3,"file":"YPagination.mjs","names":["computed","defineComponent","shallowRef","useModelDuplex","useRender","useRefs","useResizeObserver","getRangeArr","toStyleSizeValue","propsFactory","YButton","YIconPageControl","pressYPaginationProps","start","type","Number","String","default","modelValue","props","disabled","Boolean","length","validator","val","totalVisible","showEndButton","gap","color","activeColor","firstIcon","lastIcon","prevIcon","nextIcon","YPagination","name","components","emits","value","change","control","setup","_ref","slots","emit","page","parseInt","itemCount","resizeObservedRef","entries","target","contentRect","firstItem","querySelector","listWidth","width","itemWidth","offsetWidth","parseFloat","getComputedStyle","marginRight","calcItemCount","fixedCount","fixedWidth","Math","max","floor","toFixed","innerWidth","controls","prevDisabled","nextDisabled","first","onClick","e","preventDefault","prev","to","next","min","last","range","isNaN","MAX_SAFE_INTEGER","even","middle","left","right","rangeLength","rangeStart","ceil","refs","updateRef","changePage","event","arguments","undefined","items","map","item","index","ref","active","key","ellipsis","styles","_createVNode"],"sources":["../../../src/components/pagination/YPagination.tsx"],"sourcesContent":["import {\r\n  ComponentPublicInstance,\r\n  computed,\r\n  defineComponent,\r\n  shallowRef,\r\n} from 'vue';\r\n\r\nimport { useModelDuplex } from '../../composables/communication';\r\nimport { useRender } from '../../composables/component';\r\nimport { useRefs } from '../../composables/ref';\r\nimport { useResizeObserver } from '../../composables/resize-observer';\r\nimport { getRangeArr } from '../../util/common';\r\nimport { toStyleSizeValue } from '../../util/ui';\r\nimport { propsFactory } from '../../util/vue-component';\r\nimport { YButton } from '../button';\r\nimport { YIconPageControl } from '../icons/YIconPageControl';\r\n\r\nimport './YPagination.scss';\r\n\r\nexport const pressYPaginationProps = propsFactory(\r\n  {\r\n    start: {\r\n      type: [Number, String],\r\n      default: 1,\r\n    },\r\n    modelValue: {\r\n      type: Number,\r\n      default: (props: any) => props.start as number,\r\n    },\r\n    disabled: Boolean,\r\n    length: {\r\n      type: [Number, String],\r\n      default: 1,\r\n      validator: (val: number) => val % 1 === 0,\r\n    },\r\n    totalVisible: [Number, String],\r\n    showEndButton: Boolean,\r\n    gap: {\r\n      type: [String, Number],\r\n      default: 4,\r\n    },\r\n    color: String,\r\n    activeColor: String,\r\n    firstIcon: String,\r\n    lastIcon: String,\r\n    prevIcon: String,\r\n    nextIcon: String,\r\n  },\r\n  'y-pagination',\r\n);\r\n\r\nexport const YPagination = defineComponent({\r\n  name: 'YPagination',\r\n  components: {\r\n    YButton,\r\n  },\r\n  props: {\r\n    ...pressYPaginationProps(),\r\n  },\r\n  emits: {\r\n    'update:modelValue': (value: number) => true,\r\n    change: (value: number, control?: string) => true,\r\n  },\r\n  setup(props, { slots, emit }) {\r\n    const page = useModelDuplex(props);\r\n\r\n    const length = computed(() => parseInt(props.length as string, 10));\r\n    const start = computed(() => parseInt(props.start as string, 10));\r\n\r\n    const itemCount = shallowRef(-1);\r\n\r\n    const { resizeObservedRef } = useResizeObserver((entries) => {\r\n      if (1 > entries.length) return;\r\n      const { target, contentRect } = entries[0];\r\n\r\n      const firstItem = target.querySelector(\r\n        '.y-pagination__list > *',\r\n      ) as HTMLElement;\r\n      if (firstItem) {\r\n        const listWidth = contentRect.width;\r\n        const itemWidth =\r\n          firstItem.offsetWidth +\r\n          parseFloat(getComputedStyle(firstItem).marginRight) * 2;\r\n        itemCount.value = calcItemCount(listWidth, itemWidth);\r\n      }\r\n    });\r\n\r\n    function calcItemCount(listWidth: number, itemWidth: number) {\r\n      const fixedCount = props.showEndButton ? 5 : 3;\r\n      const fixedWidth = itemWidth * fixedCount;\r\n      const gap = +(props.gap ?? 4);\r\n      return Math.max(\r\n        0,\r\n        Math.floor(\r\n          +((listWidth - fixedWidth - gap) / (itemWidth + gap)).toFixed(2),\r\n        ),\r\n      );\r\n    }\r\n\r\n    const totalVisible = computed(() => {\r\n      if (props.totalVisible) return parseInt(props.totalVisible as string, 10);\r\n      else if (itemCount.value >= 0) return itemCount.value;\r\n      return calcItemCount(innerWidth, 58);\r\n    });\r\n\r\n    const controls = computed(() => {\r\n      const prevDisabled = !!props.disabled || page.value <= start.value;\r\n      const nextDisabled =\r\n        !!props.disabled || page.value >= start.value + length.value - 1;\r\n      return {\r\n        first: {\r\n          disabled: prevDisabled,\r\n          onClick: (e: MouseEvent) => {\r\n            e.preventDefault();\r\n            page.value = 1;\r\n            emit('change', 1, 'first');\r\n          },\r\n        },\r\n        prev: {\r\n          disabled: prevDisabled,\r\n          onClick: (e: MouseEvent) => {\r\n            e.preventDefault();\r\n            const to = Math.max(1, page.value - 1);\r\n            page.value = to;\r\n            emit('change', to, 'prev');\r\n          },\r\n        },\r\n        next: {\r\n          disabled: nextDisabled,\r\n          onClick: (e: MouseEvent) => {\r\n            e.preventDefault();\r\n            const to = Math.min(+length.value, page.value + 1);\r\n            page.value = to;\r\n            emit('change', to, 'next');\r\n          },\r\n        },\r\n        last: {\r\n          disabled: nextDisabled,\r\n          onClick: (e: MouseEvent) => {\r\n            e.preventDefault();\r\n            const to = +length.value;\r\n            page.value = +length.value;\r\n            emit('change', to, 'last');\r\n          },\r\n        },\r\n      };\r\n    });\r\n\r\n    const range = computed(() => {\r\n      if (\r\n        length.value <= 0 ||\r\n        isNaN(length.value) ||\r\n        length.value > Number.MAX_SAFE_INTEGER\r\n      )\r\n        return [];\r\n      if (totalVisible.value <= 1) return [page.value];\r\n      if (length.value <= totalVisible.value) {\r\n        return getRangeArr(length.value, start.value);\r\n      }\r\n      const even = totalVisible.value % 2 === 0;\r\n      const middle = even\r\n        ? totalVisible.value / 2\r\n        : Math.floor(totalVisible.value / 2);\r\n      const left = even ? middle : middle + 1;\r\n      const right = length.value - middle;\r\n\r\n      if (left - page.value >= 0) {\r\n        return [\r\n          ...getRangeArr(Math.max(1, totalVisible.value - 1), start.value),\r\n          'ellipsis',\r\n          length.value,\r\n        ];\r\n      } else if (page.value - right >= (even ? 1 : 0)) {\r\n        const rangeLength = totalVisible.value - 1;\r\n        const rangeStart = length.value - rangeLength + start.value;\r\n        return [\r\n          start.value,\r\n          'ellipsis',\r\n          ...getRangeArr(rangeLength, rangeStart),\r\n        ];\r\n      } else {\r\n        const rangeLength = Math.max(1, totalVisible.value - 3);\r\n        const rangeStart =\r\n          rangeLength === 1\r\n            ? page.value\r\n            : page.value - Math.ceil(rangeLength / 2) + start.value;\r\n        return [\r\n          start.value,\r\n          'ellipsis',\r\n          ...getRangeArr(rangeLength, rangeStart),\r\n          'ellipsis',\r\n          length.value,\r\n        ];\r\n      }\r\n    });\r\n\r\n    const { refs, updateRef } = useRefs<ComponentPublicInstance>();\r\n\r\n    function changePage(event: Event, to = 1) {\r\n      event.preventDefault();\r\n      page.value = to;\r\n      emit('change', to);\r\n    }\r\n\r\n    const items = computed(() => {\r\n      return range.value.map((item, index) => {\r\n        const ref = (e: any) => updateRef(e, index);\r\n\r\n        if (item === 'ellipsis') {\r\n          return {\r\n            active: false,\r\n            key: `ellipsis-${index}`,\r\n            page: item,\r\n            props: {\r\n              ref,\r\n              ellipsis: true,\r\n              disabled: true, // TODO: skipper\r\n            },\r\n          };\r\n        } else {\r\n          const active = item === page.value;\r\n          return {\r\n            active,\r\n            key: `item-${item}`,\r\n            page: item,\r\n            props: {\r\n              ref,\r\n              ellipsis: false,\r\n              disabled: !!props.disabled || +props.length < 2,\r\n              color: active ? props.activeColor : props.color,\r\n              onClick: (e: MouseEvent) => changePage(e, item),\r\n            },\r\n          };\r\n        }\r\n      });\r\n    });\r\n\r\n    const styles = computed(() => {\r\n      let gap = undefined;\r\n      if (props.gap) {\r\n        const value = +props.gap;\r\n        if (!isNaN(value)) {\r\n          gap = toStyleSizeValue(value);\r\n        } else if (typeof props.gap === 'string') {\r\n          gap = props.gap;\r\n        }\r\n      }\r\n      return {\r\n        '--y-pagination__gap': gap,\r\n      };\r\n    });\r\n\r\n    useRender(() => {\r\n      return (\r\n        <div\r\n          class={['y-pagination']}\r\n          role={'navigation'}\r\n          style={styles.value}\r\n          ref={resizeObservedRef}\r\n        >\r\n          <ul class={['y-pagination__list']}>\r\n            {props.showEndButton && (\r\n              <li key=\"first\" class=\"y-pagination__first\">\r\n                {slots.first ? (\r\n                  slots.first(controls.value.first)\r\n                ) : (\r\n                  <YButton {...controls.value.first}>\r\n                    <YIconPageControl type={'first'} first={props.firstIcon}></YIconPageControl>\r\n                  </YButton>\r\n                )}\r\n              </li>\r\n            )}\r\n            <li key=\"prev\" class=\"y-pagination__prev\">\r\n              {slots.prev ? (\r\n                slots.prev(controls.value.prev)\r\n              ) : (\r\n                <YButton {...controls.value.prev}>\r\n                  <YIconPageControl type={'prev'} prev={props.prevIcon}></YIconPageControl>\r\n                </YButton>\r\n              )}\r\n            </li>\r\n            {items.value.map((item, index) => {\r\n              return (\r\n                <li\r\n                  key={item.key}\r\n                  class={[\r\n                    'y-pagination__item',\r\n                    { 'y-pagination__item--active': item.active },\r\n                  ]}\r\n                >\r\n                  <YButton {...item.props}>\r\n                    {item.props.ellipsis ? '...' : item.page}\r\n                  </YButton>\r\n                </li>\r\n              );\r\n            })}\r\n            <li key=\"next\" class=\"y-pagination__next\">\r\n              {slots.next ? (\r\n                slots.next(controls.value.next)\r\n              ) : (\r\n                <YButton {...controls.value.next}>\r\n                  <YIconPageControl type={'next'} next={props.nextIcon}></YIconPageControl>\r\n                </YButton>\r\n              )}\r\n            </li>\r\n            {props.showEndButton && (\r\n              <li key=\"last\" class=\"y-pagination__last\">\r\n                {slots.last ? (\r\n                  slots.last(controls.value.last)\r\n                ) : (\r\n                  <YButton {...controls.value.last}>\r\n                    <YIconPageControl type={'last'} last={props.lastIcon}></YIconPageControl>\r\n                  </YButton>\r\n                )}\r\n              </li>\r\n            )}\r\n          </ul>\r\n        </div>\r\n      );\r\n    });\r\n\r\n    return {\r\n      itemCount,\r\n      page,\r\n      refs,\r\n    };\r\n  },\r\n});\r\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;
+    }
+  }
 }