yuyeon 0.2.3-rc.9 → 0.3.0-rc.0

package/lib/components/switch/YSwitch.scss

@@ -1,211 +1,211 @@
-@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;
-  }
-}
+@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/YDataTableBody.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDataTableBody.mjs","names":["mergeProps","useRender","defineComponent","propsFactory","YDataTableRow","useHeader","useSelection","pressYDataTableBodyProps","items","type","Array","default","loading","Boolean","String","loadingText","hideNoData","noDataText","rowProps","Function","Object","rowHeight","Number","YDataTableBody","name","props","emits","setup","_ref","slots","emit","columns","isSelected","toggleSelect","_createVNode","value","length","_Fragment","body","map","item","index","stateProps","raw","internalItem","onClick","event","el","onDblclick","onContextmenu","onMousedown","onKeydown","slotProps","key","_mergeProps"],"sources":["../../../src/components/table/YDataTableBody.tsx"],"sourcesContent":["import { type PropType, mergeProps } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { defineComponent, propsFactory } from '@/util/component';\n\nimport { YDataTableRow } from './YDataTableRow';\nimport { useHeader } from './composibles/header';\nimport { useSelection } from './composibles/selection';\nimport { DataTableItem, RowProps } from './types';\n\nexport const pressYDataTableBodyProps = propsFactory(\n  {\n    items: {\n      type: Array as PropType<readonly DataTableItem[]>,\n      default: () => [],\n    },\n    loading: [Boolean, String],\n    loadingText: String,\n    hideNoData: Boolean,\n    noDataText: {\n      type: String,\n      default: '',\n    },\n    rowProps: [Function, Object] as PropType<RowProps<any>>,\n    rowHeight: Number,\n    'onClick:row': Function as PropType<(e: Event, value: any) => void>,\n    'onDblclick:row': Function as PropType<(e: Event, value: any) => void>,\n    'onContextmenu:row': Function as PropType<(e: Event, value: any) => void>,\n    'onMousedown:row': Function as PropType<(e: Event, value: any) => void>,\n    'onKeydown:row': Function as PropType<(e: Event, value: any) => void>,\n  },\n  'YDataTableBody',\n);\n\nexport const YDataTableBody = defineComponent({\n  name: 'YDataTableBody',\n  props: {\n    ...pressYDataTableBodyProps(),\n  },\n  emits: ['click:row', 'dblclick:row', 'contextmenu:row', 'mousedown:row'],\n  setup(props, { slots, emit }) {\n    const { columns } = useHeader();\n    const { isSelected, toggleSelect } = useSelection();\n\n    useRender(() => {\n      if (props.loading) {\n        return (\n          <tr>\n            <td colspan={columns.value.length} class={'y-data-table__loading'}>\n              {slots.loading ? slots.loading() : <div>{props.loadingText}</div>}\n            </td>\n          </tr>\n        );\n      }\n      if (!props.loading && props.items.length < 1 && !props.hideNoData) {\n        return (\n          <tr key=\"no-data\" class=\"y-data-table__no-data\">\n            <td colspan={columns.value.length}>\n              {slots['no-data']?.() ?? props.noDataText}\n            </td>\n          </tr>\n        );\n      }\n      return (\n        <>\n          {slots.body\n            ? slots.body?.(props)\n            : props.items.map((item, index) => {\n                const stateProps = {\n                  index,\n                  item: item.raw,\n                  internalItem: item,\n                  columns: columns.value,\n                  isSelected,\n                  toggleSelect,\n                };\n\n                function onClick(event: Event, el: null | Element) {\n                  props['onClick:row']?.(event, { ...stateProps, el });\n                }\n\n                function onDblclick(event: Event, el: null | Element) {\n                  props['onDblclick:row']?.(event, { ...stateProps, el });\n                }\n\n                function onContextmenu(event: Event, el: null | Element) {\n                  props['onContextmenu:row']?.(event, {\n                    ...stateProps,\n                    el,\n                  });\n                }\n\n                function onMousedown(event: Event, el: null | Element) {\n                  props['onMousedown:row']?.(event, { ...stateProps, el });\n                }\n\n              function onKeydown(event: Event, el: null | Element) {\n                props['onKeydown:row']?.(event, { ...stateProps, el });\n              }\n\n                const slotProps = {\n                  ...stateProps,\n                  props: mergeProps(\n                    {\n                      key: `item__${item.key ?? item.index}`,\n                      item,\n                      index,\n                    },\n                    typeof props.rowProps === 'function'\n                      ? props.rowProps({\n                          item: stateProps.item,\n                          index: stateProps.index,\n                          internalItem: stateProps.internalItem,\n                        })\n                      : props.rowProps,\n                  ),\n                  onClick,\n                  onContextmenu,\n                  onDblclick,\n                  onMousedown,\n                  onKeydown,\n                };\n\n                return (\n                  <>\n                    {slots.item ? (\n                      slots.item(slotProps)\n                    ) : (\n                      <YDataTableRow\n                        v-slots={slots}\n                        {...slotProps.props}\n                        onClick={props['onClick:row'] && onClick}\n                        onContextmenu={\n                          props['onContextmenu:row'] && onContextmenu\n                        }\n                        onDblclick={props['onDblclick:row'] && onDblclick}\n                        onMousedown={props['onMousedown:row'] && onMousedown}\n                        onKeydown={props['onKeydown:row'] && onKeydown}\n                      ></YDataTableRow>\n                    )}\n                  </>\n                );\n              })}\n        </>\n      );\n    });\n\n    // end\n    return {};\n  },\n});\n\nexport type YDataTableBody = InstanceType<typeof YDataTableBody>;\n"],"mappings":"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"}
+{"version":3,"file":"YDataTableBody.mjs","names":["mergeProps","useRender","defineComponent","propsFactory","YDataTableRow","useHeader","useSelection","pressYDataTableBodyProps","items","type","Array","default","loading","Boolean","String","loadingText","hideNoData","noDataText","rowProps","Function","Object","rowHeight","Number","YDataTableBody","name","props","emits","setup","_ref","slots","emit","columns","isSelected","toggleSelect","_createVNode","value","length","_Fragment","body","map","item","index","stateProps","raw","internalItem","onClick","event","el","onDblclick","onContextmenu","onMousedown","onKeydown","slotProps","key","_mergeProps"],"sources":["../../../src/components/table/YDataTableBody.tsx"],"sourcesContent":["import { type PropType, mergeProps } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { defineComponent, propsFactory } from '@/util/component';\r\n\r\nimport { YDataTableRow } from './YDataTableRow';\r\nimport { useHeader } from './composibles/header';\r\nimport { useSelection } from './composibles/selection';\r\nimport { DataTableItem, RowProps } from './types';\r\n\r\nexport const pressYDataTableBodyProps = propsFactory(\r\n  {\r\n    items: {\r\n      type: Array as PropType<readonly DataTableItem[]>,\r\n      default: () => [],\r\n    },\r\n    loading: [Boolean, String],\r\n    loadingText: String,\r\n    hideNoData: Boolean,\r\n    noDataText: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    rowProps: [Function, Object] as PropType<RowProps<any>>,\r\n    rowHeight: Number,\r\n    'onClick:row': Function as PropType<(e: Event, value: any) => void>,\r\n    'onDblclick:row': Function as PropType<(e: Event, value: any) => void>,\r\n    'onContextmenu:row': Function as PropType<(e: Event, value: any) => void>,\r\n    'onMousedown:row': Function as PropType<(e: Event, value: any) => void>,\r\n    'onKeydown:row': Function as PropType<(e: Event, value: any) => void>,\r\n  },\r\n  'YDataTableBody',\r\n);\r\n\r\nexport const YDataTableBody = defineComponent({\r\n  name: 'YDataTableBody',\r\n  props: {\r\n    ...pressYDataTableBodyProps(),\r\n  },\r\n  emits: ['click:row', 'dblclick:row', 'contextmenu:row', 'mousedown:row'],\r\n  setup(props, { slots, emit }) {\r\n    const { columns } = useHeader();\r\n    const { isSelected, toggleSelect } = useSelection();\r\n\r\n    useRender(() => {\r\n      if (props.loading) {\r\n        return (\r\n          <tr>\r\n            <td colspan={columns.value.length} class={'y-data-table__loading'}>\r\n              {slots.loading ? slots.loading() : <div>{props.loadingText}</div>}\r\n            </td>\r\n          </tr>\r\n        );\r\n      }\r\n      if (!props.loading && props.items.length < 1 && !props.hideNoData) {\r\n        return (\r\n          <tr key=\"no-data\" class=\"y-data-table__no-data\">\r\n            <td colspan={columns.value.length}>\r\n              {slots['no-data']?.() ?? props.noDataText}\r\n            </td>\r\n          </tr>\r\n        );\r\n      }\r\n      return (\r\n        <>\r\n          {slots.body\r\n            ? slots.body?.(props)\r\n            : props.items.map((item, index) => {\r\n                const stateProps = {\r\n                  index,\r\n                  item: item.raw,\r\n                  internalItem: item,\r\n                  columns: columns.value,\r\n                  isSelected,\r\n                  toggleSelect,\r\n                };\r\n\r\n                function onClick(event: Event, el: null | Element) {\r\n                  props['onClick:row']?.(event, { ...stateProps, el });\r\n                }\r\n\r\n                function onDblclick(event: Event, el: null | Element) {\r\n                  props['onDblclick:row']?.(event, { ...stateProps, el });\r\n                }\r\n\r\n                function onContextmenu(event: Event, el: null | Element) {\r\n                  props['onContextmenu:row']?.(event, {\r\n                    ...stateProps,\r\n                    el,\r\n                  });\r\n                }\r\n\r\n                function onMousedown(event: Event, el: null | Element) {\r\n                  props['onMousedown:row']?.(event, { ...stateProps, el });\r\n                }\r\n\r\n              function onKeydown(event: Event, el: null | Element) {\r\n                props['onKeydown:row']?.(event, { ...stateProps, el });\r\n              }\r\n\r\n                const slotProps = {\r\n                  ...stateProps,\r\n                  props: mergeProps(\r\n                    {\r\n                      key: `item__${item.key ?? item.index}`,\r\n                      item,\r\n                      index,\r\n                    },\r\n                    typeof props.rowProps === 'function'\r\n                      ? props.rowProps({\r\n                          item: stateProps.item,\r\n                          index: stateProps.index,\r\n                          internalItem: stateProps.internalItem,\r\n                        })\r\n                      : props.rowProps,\r\n                  ),\r\n                  onClick,\r\n                  onContextmenu,\r\n                  onDblclick,\r\n                  onMousedown,\r\n                  onKeydown,\r\n                };\r\n\r\n                return (\r\n                  <>\r\n                    {slots.item ? (\r\n                      slots.item(slotProps)\r\n                    ) : (\r\n                      <YDataTableRow\r\n                        v-slots={slots}\r\n                        {...slotProps.props}\r\n                        onClick={props['onClick:row'] && onClick}\r\n                        onContextmenu={\r\n                          props['onContextmenu:row'] && onContextmenu\r\n                        }\r\n                        onDblclick={props['onDblclick:row'] && onDblclick}\r\n                        onMousedown={props['onMousedown:row'] && onMousedown}\r\n                        onKeydown={props['onKeydown:row'] && onKeydown}\r\n                      ></YDataTableRow>\r\n                    )}\r\n                  </>\r\n                );\r\n              })}\r\n        </>\r\n      );\r\n    });\r\n\r\n    // end\r\n    return {};\r\n  },\r\n});\r\n\r\nexport type YDataTableBody = InstanceType<typeof YDataTableBody>;\r\n"],"mappings":"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"}

package/lib/components/table/YDataTableCell.mjs

@@ -17,6 +17,9 @@ export const YDataTableCell = defineComponent({
     fixedOffset: {
       type: Number
     },
+    rightOffset: {
+      type: Number
+    },
     width: {
       type: [Number, String]
     },
@@ -41,10 +44,10 @@ export const YDataTableCell = defineComponent({
     const offsetStyle = computed(() => {
       const ret = {};
       if (props.fixed && props.fixedOffset !== undefined) {
-        if (props.fixed === 'lead') {
-          ret['left'] = toStyleSizeValue(props.fixedOffset);
-        } else if (props.fixed === 'last') {
+        if (props.fixed.startsWith('lead')) {
           ret['left'] = toStyleSizeValue(props.fixedOffset);
+        } else if (props.fixed.startsWith('trail')) {
+          ret['right'] = toStyleSizeValue(props.rightOffset);
         }
       }
       return ret;
@@ -54,7 +57,8 @@ export const YDataTableCell = defineComponent({
       return _createVNode(ElTag, _mergeProps({
         "class": [`y-data-table__${ElTag}`, 'y-data-table-cell', {
           'y-data-table-cell--fixed': props.fixed,
-          [`y-data-table-cell--fixed-${props.fixed}`]: props.fixed,
+          'y-data-table-cell--fixed-last': props.fixed?.endsWith('last'),
+          [`y-data-table-cell--fixed-${props.fixed?.replace('-last', '')}`]: props.fixed,
           [`y-data-table-cell--align-${props.align}`]: props.align
         }],
         "style": {

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

@@ -1 +1 @@
-{"version":3,"file":"YDataTableCell.mjs","names":["computed","useRender","defineComponent","toStyleSizeValue","YDataTableCell","name","functional","props","type","String","default","fixed","fixedOffset","Number","width","maxWidth","height","align","emits","setup","_ref","slots","emit","attrs","offsetStyle","ret","undefined","ElTag","_createVNode","_mergeProps","value","e"],"sources":["../../../src/components/table/YDataTableCell.tsx"],"sourcesContent":["import { type CSSProperties, type PropType, computed } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { defineComponent } from '@/util/component';\r\nimport { toStyleSizeValue } from '@/util/ui';\r\n\r\nexport const YDataTableCell = defineComponent({\r\n  name: 'YDataTableCell',\r\n  functional: true,\r\n  props: {\r\n    type: {\r\n      type: String as PropType<'head' | 'data'>,\r\n      default: 'data',\r\n    },\r\n    fixed: {\r\n      type: String as PropType<'lead' | 'last'>,\r\n    },\r\n    fixedOffset: {\r\n      type: Number as PropType<number>,\r\n    },\r\n    width: {\r\n      type: [Number, String] as PropType<string | number>,\r\n    },\r\n    maxWidth: {\r\n      type: [Number, String] as PropType<string | number>,\r\n    },\r\n    height: {\r\n      type: [Number, String] as PropType<string | number>,\r\n    },\r\n    align: {\r\n      type: String as PropType<'start' | 'center' | 'end'>,\r\n      default: 'start',\r\n    },\r\n  },\r\n  emits: ['click'],\r\n  setup(props, { slots, emit, attrs }) {\r\n    const offsetStyle = computed(() => {\r\n      const ret: CSSProperties = {};\r\n      if (props.fixed && props.fixedOffset !== undefined) {\r\n        if (props.fixed === 'lead') {\r\n          ret['left'] = toStyleSizeValue(props.fixedOffset);\r\n        } else if (props.fixed === 'last') {\r\n          ret['left'] = toStyleSizeValue(props.fixedOffset);\r\n        }\r\n      }\r\n      return ret;\r\n    });\r\n\r\n    useRender(() => {\r\n      const ElTag = props.type === 'head' ? 'th' : 'td';\r\n      return (\r\n        <ElTag\r\n          class={[\r\n            `y-data-table__${ElTag}`,\r\n            'y-data-table-cell',\r\n            {\r\n              'y-data-table-cell--fixed': props.fixed,\r\n              [`y-data-table-cell--fixed-${props.fixed}`]: props.fixed,\r\n              [`y-data-table-cell--align-${props.align}`]: props.align,\r\n            },\r\n          ]}\r\n          style={{\r\n            width: toStyleSizeValue(props.width),\r\n            height: toStyleSizeValue(props.height),\r\n            maxWidth: toStyleSizeValue(props.maxWidth),\r\n            ...offsetStyle.value,\r\n          }}\r\n          {...attrs}\r\n          onClick={(e) => emit('click', e)}\r\n        >\r\n          {slots.default?.()}\r\n        </ElTag>\r\n      );\r\n    });\r\n  },\r\n});\r\n\r\nexport type YDataTableCell = InstanceType<typeof YDataTableCell>;\r\n"],"mappings":";AAAA,SAA4CA,QAAQ,QAAQ,KAAK;AAAC,SAEzDC,SAAS;AAAA,SACTC,eAAe;AAAA,SACfC,gBAAgB;AAEzB,OAAO,MAAMC,cAAc,GAAGF,eAAe,CAAC;EAC5CG,IAAI,EAAE,gBAAgB;EACtBC,UAAU,EAAE,IAAI;EAChBC,KAAK,EAAE;IACLC,IAAI,EAAE;MACJA,IAAI,EAAEC,MAAmC;MACzCC,OAAO,EAAE;IACX,CAAC;IACDC,KAAK,EAAE;MACLH,IAAI,EAAEC;IACR,CAAC;IACDG,WAAW,EAAE;MACXJ,IAAI,EAAEK;IACR,CAAC;IACDC,KAAK,EAAE;MACLN,IAAI,EAAE,CAACK,MAAM,EAAEJ,MAAM;IACvB,CAAC;IACDM,QAAQ,EAAE;MACRP,IAAI,EAAE,CAACK,MAAM,EAAEJ,MAAM;IACvB,CAAC;IACDO,MAAM,EAAE;MACNR,IAAI,EAAE,CAACK,MAAM,EAAEJ,MAAM;IACvB,CAAC;IACDQ,KAAK,EAAE;MACLT,IAAI,EAAEC,MAA8C;MACpDC,OAAO,EAAE;IACX;EACF,CAAC;EACDQ,KAAK,EAAE,CAAC,OAAO,CAAC;EAChBC,KAAKA,CAACZ,KAAK,EAAAa,IAAA,EAA0B;IAAA,IAAxB;MAAEC,KAAK;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAH,IAAA;IACjC,MAAMI,WAAW,GAAGxB,QAAQ,CAAC,MAAM;MACjC,MAAMyB,GAAkB,GAAG,CAAC,CAAC;MAC7B,IAAIlB,KAAK,CAACI,KAAK,IAAIJ,KAAK,CAACK,WAAW,KAAKc,SAAS,EAAE;QAClD,IAAInB,KAAK,CAACI,KAAK,KAAK,MAAM,EAAE;UAC1Bc,GAAG,CAAC,MAAM,CAAC,GAAGtB,gBAAgB,CAACI,KAAK,CAACK,WAAW,CAAC;QACnD,CAAC,MAAM,IAAIL,KAAK,CAACI,KAAK,KAAK,MAAM,EAAE;UACjCc,GAAG,CAAC,MAAM,CAAC,GAAGtB,gBAAgB,CAACI,KAAK,CAACK,WAAW,CAAC;QACnD;MACF;MACA,OAAOa,GAAG;IACZ,CAAC,CAAC;IAEFxB,SAAS,CAAC,MAAM;MACd,MAAM0B,KAAK,GAAGpB,KAAK,CAACC,IAAI,KAAK,MAAM,GAAG,IAAI,GAAG,IAAI;MACjD,OAAAoB,YAAA,CAAAD,KAAA,EAAAE,WAAA;QAAA,SAEW,CACJ,iBAAgBF,KAAM,EAAC,EACxB,mBAAmB,EACnB;UACE,0BAA0B,EAAEpB,KAAK,CAACI,KAAK;UACvC,CAAE,4BAA2BJ,KAAK,CAACI,KAAM,EAAC,GAAGJ,KAAK,CAACI,KAAK;UACxD,CAAE,4BAA2BJ,KAAK,CAACU,KAAM,EAAC,GAAGV,KAAK,CAACU;QACrD,CAAC,CACF;QAAA,SACM;UACLH,KAAK,EAAEX,gBAAgB,CAACI,KAAK,CAACO,KAAK,CAAC;UACpCE,MAAM,EAAEb,gBAAgB,CAACI,KAAK,CAACS,MAAM,CAAC;UACtCD,QAAQ,EAAEZ,gBAAgB,CAACI,KAAK,CAACQ,QAAQ,CAAC;UAC1C,GAAGS,WAAW,CAACM;QACjB;MAAC,GACGP,KAAK;QAAA,WACCQ,CAAC,IAAKT,IAAI,CAAC,OAAO,EAAES,CAAC;MAAC;QAAArB,OAAA,EAAAA,CAAA,MAE/BW,KAAK,CAACX,OAAO,GAAG,CAAC;MAAA;IAGxB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YDataTableCell.mjs","names":["computed","useRender","defineComponent","toStyleSizeValue","YDataTableCell","name","functional","props","type","String","default","fixed","fixedOffset","Number","rightOffset","width","maxWidth","height","align","emits","setup","_ref","slots","emit","attrs","offsetStyle","ret","undefined","startsWith","ElTag","_createVNode","_mergeProps","endsWith","replace","value","e"],"sources":["../../../src/components/table/YDataTableCell.tsx"],"sourcesContent":["import { type CSSProperties, type PropType, computed } from 'vue';\r\n\r\nimport type { FixedPropType } from '@/components/table/types';\r\nimport { useRender } from '@/composables/component';\r\nimport { defineComponent } from '@/util/component';\r\nimport { toStyleSizeValue } from '@/util/ui';\r\n\r\nexport const YDataTableCell = defineComponent({\r\n  name: 'YDataTableCell',\r\n  functional: true,\r\n  props: {\r\n    type: {\r\n      type: String as PropType<'head' | 'data'>,\r\n      default: 'data',\r\n    },\r\n    fixed: {\r\n      type: String as PropType<FixedPropType>,\r\n    },\r\n    fixedOffset: {\r\n      type: Number as PropType<number>,\r\n    },\r\n    rightOffset: {\r\n      type: Number as PropType<number>,\r\n    },\r\n    width: {\r\n      type: [Number, String] as PropType<string | number>,\r\n    },\r\n    maxWidth: {\r\n      type: [Number, String] as PropType<string | number>,\r\n    },\r\n    height: {\r\n      type: [Number, String] as PropType<string | number>,\r\n    },\r\n    align: {\r\n      type: String as PropType<'start' | 'center' | 'end'>,\r\n      default: 'start',\r\n    },\r\n  },\r\n  emits: ['click'],\r\n  setup(props, { slots, emit, attrs }) {\r\n    const offsetStyle = computed(() => {\r\n      const ret: CSSProperties = {};\r\n      if (props.fixed && props.fixedOffset !== undefined) {\r\n        if (props.fixed.startsWith('lead')) {\r\n          ret['left'] = toStyleSizeValue(props.fixedOffset);\r\n        } else if (props.fixed.startsWith('trail')) {\r\n          ret['right'] = toStyleSizeValue(props.rightOffset);\r\n        }\r\n      }\r\n      return ret;\r\n    });\r\n\r\n    useRender(() => {\r\n      const ElTag = props.type === 'head' ? 'th' : 'td';\r\n      return (\r\n        <ElTag\r\n          class={[\r\n            `y-data-table__${ElTag}`,\r\n            'y-data-table-cell',\r\n            {\r\n              'y-data-table-cell--fixed': props.fixed,\r\n              'y-data-table-cell--fixed-last': props.fixed?.endsWith('last'),\r\n              [`y-data-table-cell--fixed-${props.fixed?.replace('-last', '')}`]:\r\n                props.fixed,\r\n              [`y-data-table-cell--align-${props.align}`]: props.align,\r\n            },\r\n          ]}\r\n          style={{\r\n            width: toStyleSizeValue(props.width),\r\n            height: toStyleSizeValue(props.height),\r\n            maxWidth: toStyleSizeValue(props.maxWidth),\r\n            ...offsetStyle.value,\r\n          }}\r\n          {...attrs}\r\n          onClick={(e) => emit('click', e)}\r\n        >\r\n          {slots.default?.()}\r\n        </ElTag>\r\n      );\r\n    });\r\n  },\r\n});\r\n\r\nexport type YDataTableCell = InstanceType<typeof YDataTableCell>;\r\n"],"mappings":";AAAA,SAA4CA,QAAQ,QAAQ,KAAK;AAAC,SAGzDC,SAAS;AAAA,SACTC,eAAe;AAAA,SACfC,gBAAgB;AAEzB,OAAO,MAAMC,cAAc,GAAGF,eAAe,CAAC;EAC5CG,IAAI,EAAE,gBAAgB;EACtBC,UAAU,EAAE,IAAI;EAChBC,KAAK,EAAE;IACLC,IAAI,EAAE;MACJA,IAAI,EAAEC,MAAmC;MACzCC,OAAO,EAAE;IACX,CAAC;IACDC,KAAK,EAAE;MACLH,IAAI,EAAEC;IACR,CAAC;IACDG,WAAW,EAAE;MACXJ,IAAI,EAAEK;IACR,CAAC;IACDC,WAAW,EAAE;MACXN,IAAI,EAAEK;IACR,CAAC;IACDE,KAAK,EAAE;MACLP,IAAI,EAAE,CAACK,MAAM,EAAEJ,MAAM;IACvB,CAAC;IACDO,QAAQ,EAAE;MACRR,IAAI,EAAE,CAACK,MAAM,EAAEJ,MAAM;IACvB,CAAC;IACDQ,MAAM,EAAE;MACNT,IAAI,EAAE,CAACK,MAAM,EAAEJ,MAAM;IACvB,CAAC;IACDS,KAAK,EAAE;MACLV,IAAI,EAAEC,MAA8C;MACpDC,OAAO,EAAE;IACX;EACF,CAAC;EACDS,KAAK,EAAE,CAAC,OAAO,CAAC;EAChBC,KAAKA,CAACb,KAAK,EAAAc,IAAA,EAA0B;IAAA,IAAxB;MAAEC,KAAK;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAH,IAAA;IACjC,MAAMI,WAAW,GAAGzB,QAAQ,CAAC,MAAM;MACjC,MAAM0B,GAAkB,GAAG,CAAC,CAAC;MAC7B,IAAInB,KAAK,CAACI,KAAK,IAAIJ,KAAK,CAACK,WAAW,KAAKe,SAAS,EAAE;QAClD,IAAIpB,KAAK,CAACI,KAAK,CAACiB,UAAU,CAAC,MAAM,CAAC,EAAE;UAClCF,GAAG,CAAC,MAAM,CAAC,GAAGvB,gBAAgB,CAACI,KAAK,CAACK,WAAW,CAAC;QACnD,CAAC,MAAM,IAAIL,KAAK,CAACI,KAAK,CAACiB,UAAU,CAAC,OAAO,CAAC,EAAE;UAC1CF,GAAG,CAAC,OAAO,CAAC,GAAGvB,gBAAgB,CAACI,KAAK,CAACO,WAAW,CAAC;QACpD;MACF;MACA,OAAOY,GAAG;IACZ,CAAC,CAAC;IAEFzB,SAAS,CAAC,MAAM;MACd,MAAM4B,KAAK,GAAGtB,KAAK,CAACC,IAAI,KAAK,MAAM,GAAG,IAAI,GAAG,IAAI;MACjD,OAAAsB,YAAA,CAAAD,KAAA,EAAAE,WAAA;QAAA,SAEW,CACJ,iBAAgBF,KAAM,EAAC,EACxB,mBAAmB,EACnB;UACE,0BAA0B,EAAEtB,KAAK,CAACI,KAAK;UACvC,+BAA+B,EAAEJ,KAAK,CAACI,KAAK,EAAEqB,QAAQ,CAAC,MAAM,CAAC;UAC9D,CAAE,4BAA2BzB,KAAK,CAACI,KAAK,EAAEsB,OAAO,CAAC,OAAO,EAAE,EAAE,CAAE,EAAC,GAC9D1B,KAAK,CAACI,KAAK;UACb,CAAE,4BAA2BJ,KAAK,CAACW,KAAM,EAAC,GAAGX,KAAK,CAACW;QACrD,CAAC,CACF;QAAA,SACM;UACLH,KAAK,EAAEZ,gBAAgB,CAACI,KAAK,CAACQ,KAAK,CAAC;UACpCE,MAAM,EAAEd,gBAAgB,CAACI,KAAK,CAACU,MAAM,CAAC;UACtCD,QAAQ,EAAEb,gBAAgB,CAACI,KAAK,CAACS,QAAQ,CAAC;UAC1C,GAAGS,WAAW,CAACS;QACjB;MAAC,GACGV,KAAK;QAAA,WACCW,CAAC,IAAKZ,IAAI,CAAC,OAAO,EAAEY,CAAC;MAAC;QAAAzB,OAAA,EAAAA,CAAA,MAE/BY,KAAK,CAACZ,OAAO,GAAG,CAAC;MAAA;IAGxB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/table/YDataTableHead.mjs

@@ -1,8 +1,9 @@
-import { Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { Fragment as _Fragment, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 import { useRender } from "../../composables/component.mjs";
 import { wrapInArray } from "../../util/index.mjs";
 import { defineComponent, propsFactory } from "../../util/component/index.mjs";
 import { toStyleSizeValue } from "../../util/ui.mjs";
+import { YButton } from "../button/YButton.mjs";
 import { YIconCheckbox } from "../icons/YIconCheckbox.mjs";
 import { YIconSort } from "../icons/YIconSort.mjs";
 import { YDataTableCell } from "./YDataTableCell.mjs";
@@ -52,11 +53,18 @@ export const YDataTableHead = defineComponent({
     } = useHeader();
     const getFixedStyles = (column, y) => {
       if (!props.sticky && !column.fixed) return undefined;
+      let fixedOffset = {};
+      if (column.fixed === true || column.fixed === 'left') {
+        fixedOffset.left = toStyleSizeValue(column.fixedOffset);
+      }
+      if (column.fixed === 'right') {
+        fixedOffset.right = toStyleSizeValue(column.rightOffset);
+      }
       return {
         position: 'sticky',
         zIndex: column.fixed ? 4 : props.sticky ? 3 : undefined,
-        left: column.fixed ? toStyleSizeValue(column.fixedOffset) : undefined,
-        top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined
+        top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined,
+        ...fixedOffset
       };
     };
     function onClick(e) {
@@ -83,7 +91,7 @@ export const YDataTableHead = defineComponent({
       return _createVNode(YDataTableCell, _mergeProps({
         "type": "head",
         "align": column.align,
-        "fixed": column.fixed ? column.lastFixed ? 'last' : 'lead' : undefined,
+        "fixed": column.fixed ? (column.fixed === 'right' ? 'trail' : 'lead') + (column.lastFixed ? '-last' : '') : undefined,
         "class": ['y-data-table-header', {
           'y-data-table-header--sortable': column.sortable,
           'y-data-table-header--sorted': isSorted(column),
@@ -118,16 +126,20 @@ export const YDataTableHead = defineComponent({
             return slots[headerSlotName]?.(headerSlotProps);
           }
           if (column.key === 'data-table-select') {
-            return slots['header.data-table-select']?.(headerSlotProps) ?? (showSelectAll && _createVNode(YIconCheckbox, _mergeProps({
-              "checked": allSelected.value,
-              "indeterminate": !allSelected.value && someSelected.value,
-              "disabled": selectables.value.length < 1
-            }, {
-              onClick: e => {
+            return slots['header.data-table-select']?.(headerSlotProps) ?? (showSelectAll && _createVNode(YButton, {
+              "variation": 'text,small',
+              "disabled": selectables.value.length < 1,
+              "onClick": e => {
                 e.stopPropagation();
                 selectAll(!allSelected.value);
               }
-            }), null));
+            }, {
+              default: () => [_createVNode(YIconCheckbox, {
+                "checked": allSelected.value,
+                "indeterminate": !allSelected.value && someSelected.value,
+                "disabled": selectables.value.length < 1
+              }, null)]
+            }));
           }
           return _createVNode("div", {
             "class": "y-data-table-header__content"