@vxe-ui/core 3.4.35 → 3.4.37

package/es/src/core.js

@@ -1,4 +1,4 @@
-export const coreVersion = "3.4.35";
+export const coreVersion = "3.4.37";
 export const VxeCore = {
     coreVersion,
     uiVersion: '',

package/es/src/log.js

@@ -6,7 +6,7 @@ function createLog(type, name) {
         return msg;
     };
 }
-const version = "3.4.35";
+const version = "3.4.37";
 export const log = {
     create: createLog,
     warn: createLog('warn', `v${version}`),

package/es/src/mixins.js

@@ -1,6 +1,21 @@
 import XEUtils from 'xe-utils';
 import Vue from 'vue';
 import { handleCheckInfo } from './permission';
+import { scrollbarUtils } from './scrollbar-utils';
+const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils;
+function getVmInternalData($xeVm) {
+    // 新版本 $xeVm.internalData
+    // 老版本 $xeVm
+    return $xeVm.internalData || $xeVm;
+}
+function getVmReactData($xeVm) {
+    // 新版本 $xeVm.reactData
+    // 老版本 $xeVm
+    return $xeVm.reactData || $xeVm;
+}
+/**
+ * 组件尺寸上下文
+ */
 export const sizeMixin = Vue.extend({
     inject: {
         $xeSizeInfo: {
@@ -22,15 +37,28 @@ export const sizeMixin = Vue.extend({
         }
     }
 });
+/**
+ * 权限码处理
+ */
+export const permissionMixin = Vue.extend({
+    computed: {
+        computePermissionInfo() {
+            return handleCheckInfo(this.permissionCode, this.permissionMethod);
+        }
+    }
+});
+/**
+ * 虚拟滚动条是否启用
+ */
 export const vScrollbarMixin = Vue.extend({
     inject: {
-        $xeScrollbarInfo: {
+        $xeVmInfo: {
             default: null
         }
     },
     provide() {
         return {
-            $xeScrollbarInfo: {
+            $xeVmInfo: {
                 getIsVScrollbar: () => this.computeIsVScrollbar
             }
         };
@@ -38,20 +66,187 @@ export const vScrollbarMixin = Vue.extend({
     computed: {
         computeIsVScrollbar() {
             const { useScrollbar } = this;
-            const $xeScrollbarInfo = this.$xeScrollbarInfo;
-            return XEUtils.isBoolean(useScrollbar) ? useScrollbar : ($xeScrollbarInfo ? $xeScrollbarInfo.getIsVScrollbar() : null);
+            const $xeVmInfo = this.$xeVmInfo;
+            return XEUtils.isBoolean(useScrollbar) ? useScrollbar : ($xeVmInfo ? $xeVmInfo.getIsVScrollbar() : null);
         }
     }
 });
-export const permissionMixin = Vue.extend({
-    computed: {
-        computePermissionInfo() {
-            return handleCheckInfo(this.permissionCode, this.permissionMethod);
+export const initVScrollbarMixin = Vue.extend(Object.assign(Object.assign({}, {}), { methods: {
+        updateThumbSize() {
+            const $xeVm = this;
+            const reactData = getVmReactData($xeVm);
+            const viewEl = $xeVm.getScrollViewElem();
+            if (!viewEl) {
+                return;
+            }
+            if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                return;
+            }
+            const trackXEl = $xeVm.$refs.refTrackXElem;
+            const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+            const thumbXElem = $xeVm.$refs.refThumbXElem;
+            if (thumbXElem) {
+                thumbXElem.style.width = xThumbWidth + 'px';
+            }
+            reactData.xThumbWidth = xThumbWidth;
+            const trackYEl = $xeVm.$refs.refTrackYElem;
+            const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+            const thumbYElem = $xeVm.$refs.refThumbYElem;
+            if (thumbYElem) {
+                thumbYElem.style.height = yThumbHeight + 'px';
+            }
+            reactData.yThumbHeight = yThumbHeight;
+        },
+        updateThumbOffset() {
+            const $xeVm = this;
+            const reactData = getVmReactData($xeVm);
+            const internalData = getVmInternalData($xeVm);
+            const viewEl = $xeVm.getScrollViewElem();
+            if (!viewEl) {
+                return;
+            }
+            if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                return;
+            }
+            const { xThumbWidth, yThumbHeight } = reactData;
+            const trackXEl = $xeVm.$refs.refTrackXElem;
+            const thumbXElem = $xeVm.$refs.refThumbXElem;
+            const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
+            internalData.xThumbLeft = xThumbLeft;
+            if (thumbXElem && xThumbWidth) {
+                thumbXElem.style.width = xThumbWidth + 'px';
+                thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
+            }
+            const trackYEl = $xeVm.$refs.refTrackYElem;
+            const thumbYElem = $xeVm.$refs.refThumbYElem;
+            const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
+            internalData.yThumbTop = yThumbTop;
+            if (thumbYElem && yThumbHeight) {
+                thumbYElem.style.height = yThumbHeight + 'px';
+                thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
+            }
+        },
+        clickTrackXEvent(evnt) {
+            const $xeVm = this;
+            const reactData = getVmReactData($xeVm);
+            const trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const viewEl = $xeVm.getScrollViewElem();
+            if (!viewEl) {
+                return;
+            }
+            const { xThumbWidth } = reactData;
+            const trackRect = trackEl.getBoundingClientRect();
+            viewEl.scrollTo({
+                left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+                behavior: 'auto'
+            });
+        },
+        clickTrackYEvent(evnt) {
+            const $xeVm = this;
+            const reactData = getVmReactData($xeVm);
+            const trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const viewEl = $xeVm.getScrollViewElem();
+            if (!viewEl) {
+                return;
+            }
+            const { yThumbHeight } = reactData;
+            const trackRect = trackEl.getBoundingClientRect();
+            viewEl.scrollTo({
+                top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+                behavior: 'auto'
+            });
+        },
+        pointerdownThumbXEvent(evnt) {
+            const $xeVm = this;
+            const reactData = getVmReactData($xeVm);
+            const internalData = getVmInternalData($xeVm);
+            const thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const viewEl = $xeVm.getScrollViewElem();
+            if (!viewEl) {
+                return;
+            }
+            const { xThumbWidth } = reactData;
+            const trackEl = thumbEl.parentElement;
+            const trackRect = trackEl.getBoundingClientRect();
+            const pointerPosition = evnt.clientX - trackRect.left;
+            // 记录 thumb 的偏移
+            const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+            internalData.thumbDragOffset = pointerPosition - thumbOffset;
+        },
+        pointermoveThumbXEvent(evnt) {
+            const $xeVm = this;
+            const reactData = getVmReactData($xeVm);
+            const internalData = getVmInternalData($xeVm);
+            const { isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = $xeVm.getScrollViewElem();
+                if (!viewEl) {
+                    return;
+                }
+                const { xThumbWidth } = reactData;
+                const thumbEl = evnt.currentTarget;
+                const trackEl = thumbEl.parentElement;
+                const trackRect = trackEl.getBoundingClientRect();
+                // 更新偏移
+                viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+            }
+        },
+        cleatPointerThumbEvent(evnt) {
+            const $xeVm = this;
+            const internalData = getVmInternalData($xeVm);
+            const thumbEl = evnt.currentTarget;
+            thumbEl.releasePointerCapture(evnt.pointerId);
+            internalData.isThumbDrag = false;
+        },
+        pointerdownThumbYEvent(evnt) {
+            const $xeVm = this;
+            const reactData = getVmReactData($xeVm);
+            const internalData = getVmInternalData($xeVm);
+            const thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const viewEl = $xeVm.getScrollViewElem();
+            if (!viewEl) {
+                return;
+            }
+            const { yThumbHeight } = reactData;
+            const trackEl = thumbEl.parentElement;
+            const trackRect = trackEl.getBoundingClientRect();
+            const pointerPosition = evnt.clientY - trackRect.top;
+            // 记录 thumb 的偏移
+            const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+            internalData.thumbDragOffset = pointerPosition - thumbOffset;
+        },
+        pointermoveThumbYEvent(evnt) {
+            const $xeVm = this;
+            const reactData = getVmReactData($xeVm);
+            const internalData = getVmInternalData($xeVm);
+            const { isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = $xeVm.getScrollViewElem();
+                if (!viewEl) {
+                    return;
+                }
+                const { yThumbHeight } = reactData;
+                const thumbEl = evnt.currentTarget;
+                const trackEl = thumbEl.parentElement;
+                const trackRect = trackEl.getBoundingClientRect();
+                // 更新偏移
+                viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+            }
         }
-    }
-});
+    } }));
 export const globalMixins = {
     sizeMixin,
+    permissionMixin,
     vScrollbarMixin,
-    permissionMixin
+    initVScrollbarMixin
 };

package/es/src/popper-utils.js

@@ -35,7 +35,7 @@ export const popperUtils = {
         const { defaultTop, defaultLeft, placement, defaultPlacement, appendTo, teleportTo, marginSize, isMinWidth } = Object.assign({
             appendTo: '',
             teleportTo: false,
-            marginSize: 18,
+            marginSize: 12,
             isMinWidth: true
         }, options);
         let panelPlacement = 'bottom';

package/lib/index.umd.js

@@ -2529,6 +2529,7 @@ __webpack_require__.d(__webpack_exports__, {
   handleCheckInfo: function() { return /* reexport */ handleCheckInfo; },
   hasComponent: function() { return /* reexport */ hasComponent; },
   hasLanguage: function() { return /* reexport */ hasLanguage; },
+  initVScrollbarMixin: function() { return /* reexport */ initVScrollbarMixin; },
   interceptor: function() { return /* reexport */ interceptor; },
   log: function() { return /* reexport */ log; },
   menus: function() { return /* reexport */ menus; },
@@ -2572,7 +2573,7 @@ if (typeof window !== 'undefined') {
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
 ;// ./packages/src/core.ts
-const coreVersion = "3.4.35";
+const coreVersion = "3.4.37";
 const VxeCore = {
   coreVersion,
   uiVersion: '',
@@ -3225,7 +3226,7 @@ function createLog(type, name) {
     return msg;
   };
 }
-const version = "3.4.35";
+const version = "3.4.37";
 const log = {
   create: createLog,
   warn: createLog('warn', `v${version}`),
@@ -3877,7 +3878,7 @@ const popperUtils = {
     } = Object.assign({
       appendTo: '',
       teleportTo: false,
-      marginSize: 18,
+      marginSize: 12,
       isMinWidth: true
     }, options);
     let panelPlacement = 'bottom';
@@ -4026,6 +4027,26 @@ const popperUtils = {
 
 
 
+
+const {
+  getThumbOffsetSize,
+  getThumbSize,
+  getScrollFromClick,
+  getScrollFromDrag
+} = scrollbarUtils;
+function getVmInternalData($xeVm) {
+  // 新版本 $xeVm.internalData
+  // 老版本 $xeVm
+  return $xeVm.internalData || $xeVm;
+}
+function getVmReactData($xeVm) {
+  // 新版本 $xeVm.reactData
+  // 老版本 $xeVm
+  return $xeVm.reactData || $xeVm;
+}
+/**
+ * 组件尺寸上下文
+ */
 const sizeMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().extend({
   inject: {
     $xeSizeInfo: {
@@ -4049,15 +4070,28 @@ const sizeMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().extend(
     }
   }
 });
+/**
+ * 权限码处理
+ */
+const permissionMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().extend({
+  computed: {
+    computePermissionInfo() {
+      return handleCheckInfo(this.permissionCode, this.permissionMethod);
+    }
+  }
+});
+/**
+ * 虚拟滚动条是否启用
+ */
 const vScrollbarMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().extend({
   inject: {
-    $xeScrollbarInfo: {
+    $xeVmInfo: {
       default: null
     }
   },
   provide() {
     return {
-      $xeScrollbarInfo: {
+      $xeVmInfo: {
         getIsVScrollbar: () => this.computeIsVScrollbar
       }
     };
@@ -4067,22 +4101,213 @@ const vScrollbarMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().e
       const {
         useScrollbar
       } = this;
-      const $xeScrollbarInfo = this.$xeScrollbarInfo;
-      return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(useScrollbar) ? useScrollbar : $xeScrollbarInfo ? $xeScrollbarInfo.getIsVScrollbar() : null;
+      const $xeVmInfo = this.$xeVmInfo;
+      return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(useScrollbar) ? useScrollbar : $xeVmInfo ? $xeVmInfo.getIsVScrollbar() : null;
     }
   }
 });
-const permissionMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().extend({
-  computed: {
-    computePermissionInfo() {
-      return handleCheckInfo(this.permissionCode, this.permissionMethod);
+const initVScrollbarMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().extend({
+  ...{},
+  methods: {
+    updateThumbSize() {
+      const $xeVm = this;
+      const reactData = getVmReactData($xeVm);
+      const viewEl = $xeVm.getScrollViewElem();
+      if (!viewEl) {
+        return;
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return;
+      }
+      const trackXEl = $xeVm.$refs.refTrackXElem;
+      const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+      const thumbXElem = $xeVm.$refs.refThumbXElem;
+      if (thumbXElem) {
+        thumbXElem.style.width = xThumbWidth + 'px';
+      }
+      reactData.xThumbWidth = xThumbWidth;
+      const trackYEl = $xeVm.$refs.refTrackYElem;
+      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+      const thumbYElem = $xeVm.$refs.refThumbYElem;
+      if (thumbYElem) {
+        thumbYElem.style.height = yThumbHeight + 'px';
+      }
+      reactData.yThumbHeight = yThumbHeight;
+    },
+    updateThumbOffset() {
+      const $xeVm = this;
+      const reactData = getVmReactData($xeVm);
+      const internalData = getVmInternalData($xeVm);
+      const viewEl = $xeVm.getScrollViewElem();
+      if (!viewEl) {
+        return;
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return;
+      }
+      const {
+        xThumbWidth,
+        yThumbHeight
+      } = reactData;
+      const trackXEl = $xeVm.$refs.refTrackXElem;
+      const thumbXElem = $xeVm.$refs.refThumbXElem;
+      const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
+      internalData.xThumbLeft = xThumbLeft;
+      if (thumbXElem && xThumbWidth) {
+        thumbXElem.style.width = xThumbWidth + 'px';
+        thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
+      }
+      const trackYEl = $xeVm.$refs.refTrackYElem;
+      const thumbYElem = $xeVm.$refs.refThumbYElem;
+      const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
+      internalData.yThumbTop = yThumbTop;
+      if (thumbYElem && yThumbHeight) {
+        thumbYElem.style.height = yThumbHeight + 'px';
+        thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
+      }
+    },
+    clickTrackXEvent(evnt) {
+      const $xeVm = this;
+      const reactData = getVmReactData($xeVm);
+      const trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      const viewEl = $xeVm.getScrollViewElem();
+      if (!viewEl) {
+        return;
+      }
+      const {
+        xThumbWidth
+      } = reactData;
+      const trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+        behavior: 'auto'
+      });
+    },
+    clickTrackYEvent(evnt) {
+      const $xeVm = this;
+      const reactData = getVmReactData($xeVm);
+      const trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      const viewEl = $xeVm.getScrollViewElem();
+      if (!viewEl) {
+        return;
+      }
+      const {
+        yThumbHeight
+      } = reactData;
+      const trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+        behavior: 'auto'
+      });
+    },
+    pointerdownThumbXEvent(evnt) {
+      const $xeVm = this;
+      const reactData = getVmReactData($xeVm);
+      const internalData = getVmInternalData($xeVm);
+      const thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      const viewEl = $xeVm.getScrollViewElem();
+      if (!viewEl) {
+        return;
+      }
+      const {
+        xThumbWidth
+      } = reactData;
+      const trackEl = thumbEl.parentElement;
+      const trackRect = trackEl.getBoundingClientRect();
+      const pointerPosition = evnt.clientX - trackRect.left;
+      // 记录 thumb 的偏移
+      const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    },
+    pointermoveThumbXEvent(evnt) {
+      const $xeVm = this;
+      const reactData = getVmReactData($xeVm);
+      const internalData = getVmInternalData($xeVm);
+      const {
+        isThumbDrag,
+        thumbDragOffset
+      } = internalData;
+      if (isThumbDrag) {
+        const viewEl = $xeVm.getScrollViewElem();
+        if (!viewEl) {
+          return;
+        }
+        const {
+          xThumbWidth
+        } = reactData;
+        const thumbEl = evnt.currentTarget;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      }
+    },
+    cleatPointerThumbEvent(evnt) {
+      const $xeVm = this;
+      const internalData = getVmInternalData($xeVm);
+      const thumbEl = evnt.currentTarget;
+      thumbEl.releasePointerCapture(evnt.pointerId);
+      internalData.isThumbDrag = false;
+    },
+    pointerdownThumbYEvent(evnt) {
+      const $xeVm = this;
+      const reactData = getVmReactData($xeVm);
+      const internalData = getVmInternalData($xeVm);
+      const thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      const viewEl = $xeVm.getScrollViewElem();
+      if (!viewEl) {
+        return;
+      }
+      const {
+        yThumbHeight
+      } = reactData;
+      const trackEl = thumbEl.parentElement;
+      const trackRect = trackEl.getBoundingClientRect();
+      const pointerPosition = evnt.clientY - trackRect.top;
+      // 记录 thumb 的偏移
+      const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    },
+    pointermoveThumbYEvent(evnt) {
+      const $xeVm = this;
+      const reactData = getVmReactData($xeVm);
+      const internalData = getVmInternalData($xeVm);
+      const {
+        isThumbDrag,
+        thumbDragOffset
+      } = internalData;
+      if (isThumbDrag) {
+        const viewEl = $xeVm.getScrollViewElem();
+        if (!viewEl) {
+          return;
+        }
+        const {
+          yThumbHeight
+        } = reactData;
+        const thumbEl = evnt.currentTarget;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      }
     }
   }
 });
 const globalMixins = {
   sizeMixin,
+  permissionMixin,
   vScrollbarMixin,
-  permissionMixin
+  initVScrollbarMixin
 };
 ;// ./packages/index.ts