yuyeon 0.2.2 → 0.2.3-rc.1

package/lib/components/switch/YSwitch.scss

@@ -1,204 +1,211 @@
-@use '../../styles/variables';
-
-.y-switch {
-  --y-switch__color: var(--y-theme-primary);
-  font-size: 1rem;
-
-  &__slot {
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    color: inherit;
-    min-height: inherit;
-    position: relative;
-  }
-
-  &__input {
-    width: 3em;
-    height: 1.5em;
-    position: relative;
-    display: inline-flex;
-    user-select: none;
-    color: inherit;
-    flex: 0 0 auto;
-
-    input[role='switch'] {
-      position: absolute;
-      opacity: 0;
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-      user-select: none;
-    }
-  }
-  &:not(&--loading) &__input:active &__thumb {
-    width: 1em;
-  }
-
-  &__track {
-    width: 100%;
-    height: 100%;
-    border-radius: 2em;
-    background-color: #e0e0e0;
-    position: absolute;
-    left: 0;
-    top: 0;
-    transition: 300ms;
-  }
-
-  &__thumb {
-    width: 1.1em;
-    height: 1.1em;
-    align-self: center;
-    left: 0.185em;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #fff;
-    pointer-events: none;
-    position: relative;
-    transition: 180ms cubic-bezier(0.78, 0.04, 0.9, 0.18);
-    will-change: left, transform;
-  }
-
-  &__spinner {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    animation: rotate 2s linear infinite;
-    contain: paint;
-
-    @keyframes spinner-blur {
-      0% {
-        filter: blur(4px);
-      }
-      50% {
-        filter: blur(1px);
-      }
-      100% {
-        filter: blur(4px);
-      }
-    }
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 2px;
-      left: 2px;
-      right: 2px;
-      bottom: 2px;
-      border-radius: 50%;
-      border-width: 2px 2px 0 0;
-      border-style: solid;
-      border-color: var(--y-switch__color) transparent;
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      background: linear-gradient(
-        0deg,
-        transparent 60%,
-        rgba(var(--y-switch__color), 0.4)
-      );
-      filter: blur(4px);
-      animation: spinner-blur 3s infinite;
-    }
-  }
-
-  &--active {
-    .y-switch__track {
-      background-color: var(--y-switch__color);
-    }
-
-    .y-switch__thumb {
-      left: calc(100% - 1.1em - 0.24em);
-    }
-  }
-
-  &--active:not(&--loading):active &__thumb {
-    left: 1.8em;
-  }
-
-  &--focused {
-    .y-switch__thumb:before {
-      content: '';
-      position: absolute;
-      top: 2px;
-      bottom: 2px;
-      left: 2px;
-      right: 2px;
-      border-radius: 50%;
-      background-color: rgba(var(--y-switch__color), 0.4);
-    }
-  }
-
-  &--stick-out {
-    .y-switch__thumb {
-      box-shadow:
-        2px 2px 5px -2px rgba(0, 0, 0, 0.54),
-        1px 1px 4px rgba(0, 0, 0, 0.12),
-        0 0 0 1px rgba(0, 0, 0, 0.08);
-    }
-
-    .y-switch__track {
-      width: 80%;
-      height: 74%;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      box-shadow: inset 0 0 4px -1px rgba(0, 0, 0, 0.34);
-    }
-  }
-
-  &--disabled {
-    opacity: 0.8;
-    filter: brightness(0.88);
-
-    .y-switch__thumb {
-      opacity: 0.4;
-    }
-  }
-  &--disabled &__slot,
-  &--disabled &__input input {
-    cursor: default;
-  }
-
-  &__state {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    contain: content;
-  }
-
-  &__state-label {
-    font-size: 12px;
-    color: #ffffff;
-    position: absolute;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    transition: transform 180ms cubic-bezier(0.16, 0.85, 0.36, 0.96);
-
-    &--on {
-      left: -40px;
-    }
-    &--off {
-      right: 10px;
-    }
-  }
-
-  &--active &__state-label {
-    transform: translateX(50px);
-  }
-
-  &--stick-out &__state-label--off {
-    right: 7px;
-  }
-}
+@use '../../styles/variables';
+
+.y-switch {
+  --y-switch__color: var(--y-theme-primary);
+  --y-switch__color-rgb: var(--y-theme-primary-rgb);
+  font-size: 1rem;
+
+  &__slot {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    color: inherit;
+    min-height: inherit;
+    position: relative;
+  }
+
+  &__input {
+    width: 3em;
+    height: 1.5em;
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    color: inherit;
+    flex: 0 0 auto;
+
+    input[role='switch'] {
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+
+  &:not(&--loading) &__input:active &__thumb {
+    transform: scaleX(0.94);
+    transform-origin: left;
+  }
+
+  &.y-switch--active:not(&--loading) &__input:active &__thumb {
+    transform-origin: right;
+  }
+
+  &__track {
+    width: 100%;
+    height: 100%;
+    border-radius: 2em;
+    background-color: var(--y-theme-surface-variant);
+    position: absolute;
+    left: 0;
+    top: 0;
+    transition: 300ms;
+  }
+
+  &__thumb {
+    width: 1.1em;
+    height: 1.1em;
+    align-self: center;
+    left: 0.185em;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--y-theme-surface);
+    pointer-events: none;
+    position: relative;
+    transition: 180ms cubic-bezier(0.78, 0.04, 0.9, 0.18);
+    will-change: left, transform;
+  }
+
+  &__spinner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    animation: rotate 2s linear infinite;
+    contain: paint;
+
+    @keyframes spinner-blur {
+      0% {
+        filter: blur(4px);
+      }
+      50% {
+        filter: blur(1px);
+      }
+      100% {
+        filter: blur(4px);
+      }
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      right: 2px;
+      bottom: 2px;
+      border-radius: 50%;
+      border-width: 2px 2px 0 0;
+      border-style: solid;
+      border-color: var(--y-switch__color) transparent;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(
+        0deg,
+        transparent 60%,
+        rgba(var(--y-switch__color), 0.4)
+      );
+      filter: blur(4px);
+      animation: spinner-blur 3s infinite;
+    }
+  }
+
+  &--active {
+    .y-switch__track {
+      background-color: var(--y-switch__color);
+    }
+
+    .y-switch__thumb {
+      left: calc(100% - 1.1em - 0.24em);
+    }
+  }
+
+  &--active:not(&--loading):active &__thumb {
+    left: 1.8em;
+  }
+
+  &--focused {
+    .y-switch__thumb:before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      bottom: 2px;
+      left: 2px;
+      right: 2px;
+      border-radius: 50%;
+      background-color: rgba(var(--y-switch__color-rgb), 0.4);
+    }
+  }
+
+  &--stick-out {
+    .y-switch__thumb {
+      box-shadow:
+        2px 2px 5px -2px rgba(var(--y-theme-shadow-rgb, 0, 0, 0), 0.54),
+        1px 1px 4px rgba(var(--y-theme-shadow-rgb, 0, 0, 0), 0.12),
+        0 0 0 1px rgba(var(--y-theme-shadow-rgb, 0, 0, 0), 0.08);
+    }
+
+    .y-switch__track {
+      width: 80%;
+      height: 74%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      box-shadow: inset 0 0 4px -1px rgba(var(--y-theme-shadow-rgb, 0, 0, 0), 0.34);
+    }
+  }
+
+  &--disabled {
+    opacity: 0.8;
+    filter: brightness(0.88);
+
+    .y-switch__thumb {
+      opacity: 0.4;
+    }
+  }
+  &--disabled &__slot,
+  &--disabled &__input input {
+    cursor: default;
+  }
+
+  &__state {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    contain: content;
+  }
+
+  &__state-label {
+    font-size: 12px;
+    color: var(--y-theme-on-primary);
+    position: absolute;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    transition: transform 180ms cubic-bezier(0.16, 0.85, 0.36, 0.96);
+
+    &--on {
+      left: -40px;
+    }
+    &--off {
+      right: 10px;
+    }
+  }
+
+  &--active &__state-label {
+    transform: translateX(50px);
+  }
+
+  &--stick-out &__state-label--off {
+    right: 7px;
+  }
+}

package/lib/components/table/YDataTableHead.mjs

@@ -133,7 +133,7 @@ export const YDataTableHead = defineComponent({
             "class": "y-data-table-header__content"
           }, [_createVNode("span", {
             "class": "y-data-table-header__text"
-          }, [column.text]), _createVNode("span", {
+          }, [slots?.[`header-text.${column.key}`]?.(headerSlotProps) ?? column.text]), _createVNode("span", {
             "class": ['y-data-table-header__sorting-icon', {
               'y-data-table-header__sorting-icon--disabled': !column.sortable
             }],

package/lib/components/table/YDataTableHead.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDataTableHead.mjs","names":["useRender","wrapInArray","defineComponent","propsFactory","toStyleSizeValue","YIconCheckbox","YIconSort","YDataTableCell","useHeader","useSelection","useSorting","pressYDataTableHeadProps","multiSort","Boolean","sortAscIcon","type","String","default","sortDescIcon","dualSortIcon","sticky","YDataTableHead","name","components","props","setup","_ref","slots","toggleSort","sortBy","isSorted","someSelected","allSelected","selectAll","showSelectAll","selectables","columns","headers","getFixedStyles","column","y","fixed","undefined","position","zIndex","left","fixedOffset","top","onClick","e","getSortDirection","found","value","find","by","key","order","YDataTableTh","_ref2","x","_createVNode","_mergeProps","align","lastFixed","sortable","headerClasses","width","minWidth","maxWidth","rowspan","colspan","headerSlotName","headerSlotProps","length","stopPropagation","text","_Fragment","head","map","row"],"sources":["../../../src/components/table/YDataTableHead.tsx"],"sourcesContent":["import { type CSSProperties } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { wrapInArray } from '@/util';\r\nimport { defineComponent, propsFactory } from '@/util/component';\r\nimport { toStyleSizeValue } from '@/util/ui';\r\n\r\nimport { YIconCheckbox } from '../icons/YIconCheckbox';\r\nimport { YIconSort } from '../icons/YIconSort';\r\nimport { YDataTableCell } from './YDataTableCell';\r\nimport { useHeader } from './composibles/header';\r\nimport { useSelection } from './composibles/selection';\r\nimport { useSorting } from './composibles/sorting';\r\nimport { InternalDataTableHeader } from './types';\r\n\r\nexport const pressYDataTableHeadProps = propsFactory(\r\n  {\r\n    multiSort: Boolean,\r\n    sortAscIcon: {\r\n      type: String,\r\n      default: '@sortAsc',\r\n    },\r\n    sortDescIcon: {\r\n      type: String,\r\n      default: '@sortDesc',\r\n    },\r\n    dualSortIcon: Boolean,\r\n    sticky: Boolean,\r\n  },\r\n  'YDataTableHead',\r\n);\r\n\r\nexport const YDataTableHead = defineComponent({\r\n  name: 'YDataTableHead',\r\n  components: {\r\n    YDataTableCell,\r\n  },\r\n  props: {\r\n    ...pressYDataTableHeadProps(),\r\n  },\r\n  setup(props, { slots }) {\r\n    const { toggleSort, sortBy, isSorted } = useSorting();\r\n    const { someSelected, allSelected, selectAll, showSelectAll, selectables } =\r\n      useSelection();\r\n    const { columns, headers } = useHeader();\r\n\r\n    const getFixedStyles = (\r\n      column: InternalDataTableHeader,\r\n      y: number,\r\n    ): CSSProperties | undefined => {\r\n      if (!props.sticky && !column.fixed) return undefined;\r\n\r\n      return {\r\n        position: 'sticky',\r\n        zIndex: column.fixed ? 4 : props.sticky ? 3 : undefined,\r\n        left: column.fixed ? toStyleSizeValue(column.fixedOffset) : undefined,\r\n        top: props.sticky\r\n          ? `calc(var(--v-table-header-height) * ${y})`\r\n          : undefined,\r\n      };\r\n    };\r\n\r\n    function onClick(e: Event) {\r\n      //\r\n    }\r\n\r\n    function getSortDirection(column: InternalDataTableHeader) {\r\n      const found = sortBy.value.find((by) => by.key === column.key);\r\n      if (!found) {\r\n        return undefined;\r\n      }\r\n      if (found.order === 'asc') {\r\n        return 'asc';\r\n      }\r\n      if (found.order === 'desc') {\r\n        return 'desc';\r\n      }\r\n    }\r\n\r\n    const YDataTableTh = ({\r\n      column,\r\n      x,\r\n      y,\r\n    }: {\r\n      column: InternalDataTableHeader;\r\n      x: number;\r\n      y: number;\r\n    }) => {\r\n      return (\r\n        <YDataTableCell\r\n          type=\"head\"\r\n          align={column.align}\r\n          fixed={\r\n            column.fixed ? (column.lastFixed ? 'last' : 'lead') : undefined\r\n          }\r\n          class={[\r\n            'y-data-table-header',\r\n            {\r\n              'y-data-table-header--sortable': column.sortable,\r\n              'y-data-table-header--sorted': isSorted(column),\r\n              'y-data-table-header--select': column.key === 'data-table-select',\r\n            },\r\n            ...wrapInArray(column.headerClasses ?? []),\r\n          ]}\r\n          style={{\r\n            width: toStyleSizeValue(column.width),\r\n            minWidth: toStyleSizeValue(column.width),\r\n            maxWidth: toStyleSizeValue(column.maxWidth),\r\n            ...getFixedStyles(column, y),\r\n          }}\r\n          {...{ rowspan: column.rowspan, colspan: column.colspan }}\r\n          onClick={onClick}\r\n        >\r\n          {{\r\n            default: () => {\r\n              const headerSlotName = `header.${column.key}` as const;\r\n              const headerSlotProps = {\r\n                column,\r\n                selectAll,\r\n                isSorted,\r\n                toggleSort,\r\n                sortBy: sortBy.value,\r\n                someSelected: someSelected.value,\r\n                allSelected: allSelected.value,\r\n                selectables: selectables.value,\r\n                getSortDirection,\r\n              };\r\n\r\n              if (slots[headerSlotName]) {\r\n                return slots[headerSlotName]?.(headerSlotProps);\r\n              }\r\n\r\n              if (column.key === 'data-table-select') {\r\n                return (\r\n                  slots['header.data-table-select']?.(headerSlotProps) ??\r\n                  (showSelectAll && (\r\n                    <YIconCheckbox\r\n                      checked={allSelected.value}\r\n                      indeterminate={!allSelected.value && someSelected.value}\r\n                      disabled={selectables.value.length < 1}\r\n                      {...{\r\n                        onClick: (e: MouseEvent) => {\r\n                          e.stopPropagation();\r\n                          selectAll(!allSelected.value);\r\n                        },\r\n                      }}\r\n                    ></YIconCheckbox>\r\n                  ))\r\n                );\r\n              }\r\n\r\n              return (\r\n                <div class=\"y-data-table-header__content\">\r\n                  <span class=\"y-data-table-header__text\">{column.text}</span>\r\n                  <span\r\n                    class={[\r\n                      'y-data-table-header__sorting-icon',\r\n                      {\r\n                        'y-data-table-header__sorting-icon--disabled':\r\n                          !column.sortable,\r\n                      },\r\n                    ]}\r\n                    onClick={\r\n                      column.sortable\r\n                        ? (e) => {\r\n                            e.stopPropagation();\r\n                            toggleSort(column);\r\n                          }\r\n                        : undefined\r\n                    }\r\n                  >\r\n                    <YIconSort\r\n                      disabled={!column.sortable}\r\n                      direction={getSortDirection(column)}\r\n                    ></YIconSort>\r\n                  </span>\r\n                </div>\r\n              );\r\n            },\r\n          }}\r\n        </YDataTableCell>\r\n      );\r\n    };\r\n\r\n    useRender(() => {\r\n      return (\r\n        <>\r\n          {slots.head\r\n            ? slots.head?.(props)\r\n            : headers.value.map((row, y) => (\r\n                <tr>\r\n                  {row.map((column, x) => (\r\n                    <YDataTableTh column={column} x={x} y={y} />\r\n                  ))}\r\n                </tr>\r\n              ))}\r\n        </>\r\n      );\r\n    });\r\n  },\r\n});\r\n\r\nexport type YDataTableHead = InstanceType<typeof YDataTableHead>;\r\n"],"mappings":"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"}
+{"version":3,"file":"YDataTableHead.mjs","names":["useRender","wrapInArray","defineComponent","propsFactory","toStyleSizeValue","YIconCheckbox","YIconSort","YDataTableCell","useHeader","useSelection","useSorting","pressYDataTableHeadProps","multiSort","Boolean","sortAscIcon","type","String","default","sortDescIcon","dualSortIcon","sticky","YDataTableHead","name","components","props","setup","_ref","slots","toggleSort","sortBy","isSorted","someSelected","allSelected","selectAll","showSelectAll","selectables","columns","headers","getFixedStyles","column","y","fixed","undefined","position","zIndex","left","fixedOffset","top","onClick","e","getSortDirection","found","value","find","by","key","order","YDataTableTh","_ref2","x","_createVNode","_mergeProps","align","lastFixed","sortable","headerClasses","width","minWidth","maxWidth","rowspan","colspan","headerSlotName","headerSlotProps","length","stopPropagation","text","_Fragment","head","map","row"],"sources":["../../../src/components/table/YDataTableHead.tsx"],"sourcesContent":["import { type CSSProperties } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { wrapInArray } from '@/util';\nimport { defineComponent, propsFactory } from '@/util/component';\nimport { toStyleSizeValue } from '@/util/ui';\n\nimport { YIconCheckbox } from '../icons/YIconCheckbox';\nimport { YIconSort } from '../icons/YIconSort';\nimport { YDataTableCell } from './YDataTableCell';\nimport { useHeader } from './composibles/header';\nimport { useSelection } from './composibles/selection';\nimport { useSorting } from './composibles/sorting';\nimport { InternalDataTableHeader } from './types';\n\nexport const pressYDataTableHeadProps = propsFactory(\n  {\n    multiSort: Boolean,\n    sortAscIcon: {\n      type: String,\n      default: '@sortAsc',\n    },\n    sortDescIcon: {\n      type: String,\n      default: '@sortDesc',\n    },\n    dualSortIcon: Boolean,\n    sticky: Boolean,\n  },\n  'YDataTableHead',\n);\n\nexport const YDataTableHead = defineComponent({\n  name: 'YDataTableHead',\n  components: {\n    YDataTableCell,\n  },\n  props: {\n    ...pressYDataTableHeadProps(),\n  },\n  setup(props, { slots }) {\n    const { toggleSort, sortBy, isSorted } = useSorting();\n    const { someSelected, allSelected, selectAll, showSelectAll, selectables } =\n      useSelection();\n    const { columns, headers } = useHeader();\n\n    const getFixedStyles = (\n      column: InternalDataTableHeader,\n      y: number,\n    ): CSSProperties | undefined => {\n      if (!props.sticky && !column.fixed) return undefined;\n\n      return {\n        position: 'sticky',\n        zIndex: column.fixed ? 4 : props.sticky ? 3 : undefined,\n        left: column.fixed ? toStyleSizeValue(column.fixedOffset) : undefined,\n        top: props.sticky\n          ? `calc(var(--v-table-header-height) * ${y})`\n          : undefined,\n      };\n    };\n\n    function onClick(e: Event) {\n      //\n    }\n\n    function getSortDirection(column: InternalDataTableHeader) {\n      const found = sortBy.value.find((by) => by.key === column.key);\n      if (!found) {\n        return undefined;\n      }\n      if (found.order === 'asc') {\n        return 'asc';\n      }\n      if (found.order === 'desc') {\n        return 'desc';\n      }\n    }\n\n    const YDataTableTh = ({\n      column,\n      x,\n      y,\n    }: {\n      column: InternalDataTableHeader;\n      x: number;\n      y: number;\n    }) => {\n      return (\n        <YDataTableCell\n          type=\"head\"\n          align={column.align}\n          fixed={\n            column.fixed ? (column.lastFixed ? 'last' : 'lead') : undefined\n          }\n          class={[\n            'y-data-table-header',\n            {\n              'y-data-table-header--sortable': column.sortable,\n              'y-data-table-header--sorted': isSorted(column),\n              'y-data-table-header--select': column.key === 'data-table-select',\n            },\n            ...wrapInArray(column.headerClasses ?? []),\n          ]}\n          style={{\n            width: toStyleSizeValue(column.width),\n            minWidth: toStyleSizeValue(column.width),\n            maxWidth: toStyleSizeValue(column.maxWidth),\n            ...getFixedStyles(column, y),\n          }}\n          {...{ rowspan: column.rowspan, colspan: column.colspan }}\n          onClick={onClick}\n        >\n          {{\n            default: () => {\n              const headerSlotName = `header.${column.key}` as const;\n              const headerSlotProps = {\n                column,\n                selectAll,\n                isSorted,\n                toggleSort,\n                sortBy: sortBy.value,\n                someSelected: someSelected.value,\n                allSelected: allSelected.value,\n                selectables: selectables.value,\n                getSortDirection,\n              };\n\n              if (slots[headerSlotName]) {\n                return slots[headerSlotName]?.(headerSlotProps);\n              }\n\n              if (column.key === 'data-table-select') {\n                return (\n                  slots['header.data-table-select']?.(headerSlotProps) ??\n                  (showSelectAll && (\n                    <YIconCheckbox\n                      checked={allSelected.value}\n                      indeterminate={!allSelected.value && someSelected.value}\n                      disabled={selectables.value.length < 1}\n                      {...{\n                        onClick: (e: MouseEvent) => {\n                          e.stopPropagation();\n                          selectAll(!allSelected.value);\n                        },\n                      }}\n                    ></YIconCheckbox>\n                  ))\n                );\n              }\n\n              return (\n                <div class=\"y-data-table-header__content\">\n                  <span class=\"y-data-table-header__text\">\n                    {slots?.[`header-text.${column.key}`]?.(headerSlotProps) ??\n                      column.text}\n                  </span>\n                  <span\n                    class={[\n                      'y-data-table-header__sorting-icon',\n                      {\n                        'y-data-table-header__sorting-icon--disabled':\n                          !column.sortable,\n                      },\n                    ]}\n                    onClick={\n                      column.sortable\n                        ? (e) => {\n                            e.stopPropagation();\n                            toggleSort(column);\n                          }\n                        : undefined\n                    }\n                  >\n                    <YIconSort\n                      disabled={!column.sortable}\n                      direction={getSortDirection(column)}\n                    ></YIconSort>\n                  </span>\n                </div>\n              );\n            },\n          }}\n        </YDataTableCell>\n      );\n    };\n\n    useRender(() => {\n      return (\n        <>\n          {slots.head\n            ? slots.head?.(props)\n            : headers.value.map((row, y) => (\n                <tr>\n                  {row.map((column, x) => (\n                    <YDataTableTh column={column} x={x} y={y} />\n                  ))}\n                </tr>\n              ))}\n        </>\n      );\n    });\n  },\n});\n\nexport type YDataTableHead = InstanceType<typeof YDataTableHead>;\n"],"mappings":"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"}

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

@@ -147,7 +147,7 @@ export const YTreeView = defineComponent({
           expandedSet.value.add(key);
         }
         if (nodes.value[key].selected) {
-          expandedSet.value.add(key);
+          selectedSet.value.add(key);
         }
         if (nodes.value[key].active) {
           activeSet.value.add(key);