feat(use-size): new package

packages/core/use-size/README.md

@@ -0,0 +1,10 @@
+# `@oku-ui/use-size`
+
+## Installation
+
+```sh
+$ pnpm add @oku-ui/use-size
+```
+
+## Usage
+...

packages/core/use-size/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@oku-ui/use-size",
+  "type": "module",
+  "version": "1.0.0",
+  "license": "MIT",
+  "source": "src/index.ts",
+  "funding": "https://github.com/sponsors/productdevbook",
+  "homepage": "https://oku-ui.com/primitives",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oku-ui/primitives.git"
+  },
+  "bugs": {
+    "url": "https://github.com/oku-ui/primitives/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "require": "./dist/use-size.cjs",
+      "import": "./dist/use-size.js"
+    }
+  },
+  "main": "dist/use-size.cjs",
+  "module": "dist/use-size.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "vite build --mode production",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.47"
+  },
+  "devDependencies": {
+    "@types/resize-observer-browser": "^0.1.7",
+    "tsconfig": "workspace:^"
+  }
+}

packages/core/use-size/src/index.ts

@@ -0,0 +1 @@
+export { useSize } from './use-size'

packages/core/use-size/src/use-size.ts

@@ -0,0 +1,75 @@
+/// <reference types="resize-observer-browser" />
+
+import type { WatchStopHandle } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+interface Size {
+  width: number
+  height: number
+}
+
+function useSize(element: HTMLElement | null) {
+  const size = ref<Size>()
+  let stopHandle: WatchStopHandle
+  let resizeObserver: ResizeObserver
+
+  onMounted(() => {
+    if (element) {
+      size.value = { width: element.offsetWidth, height: element.offsetHeight }
+
+      resizeObserver = new ResizeObserver((entries) => {
+        if (!Array.isArray(entries))
+          return
+
+        // Since we only observe the one element, we don't need to loop over the
+        // array
+        if (!entries.length)
+          return
+
+        const entry = entries[0]
+        let width: number
+        let height: number
+
+        if ('borderBoxSize' in entry) {
+          const borderSizeEntry = entry.borderBoxSize
+          // iron out differences between browsers
+          const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry
+          width = borderSize.inlineSize
+          height = borderSize.blockSize
+        }
+        else {
+        // for browsers that don't support `borderBoxSize`
+        // we calculate it ourselves to get the correct border box.
+          width = element.offsetWidth
+          height = element.offsetHeight
+        }
+
+        size.value = { width, height }
+      })
+
+      resizeObserver.observe(element)
+
+      stopHandle = watch(element, (newValue, oldValue) => {
+        if (oldValue)
+          resizeObserver.unobserve(oldValue)
+
+        if (newValue)
+          resizeObserver.observe(newValue)
+      })
+    }
+    else {
+      size.value = undefined
+    }
+  })
+
+  onUnmounted(() => {
+    if (element) {
+      stopHandle()
+      resizeObserver.unobserve(element)
+    }
+  })
+
+  return size
+}
+
+export { useSize }

packages/core/use-size/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "."
+  },
+  "include": [
+    "./"
+  ]
+}

packages/core/use-size/vite.config.ts

@@ -0,0 +1,48 @@
+import path, { resolve } from 'node:path'
+
+import Vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+
+// https://github.com/qmhc/vite-plugin-dts
+import dtsPlugin from 'vite-plugin-dts'
+
+// https://github.com/sxzz/unplugin-vue-macros
+import VueMacros from 'unplugin-vue-macros/vite'
+
+import * as pkg from './package.json'
+
+const externals = [
+  ...Object.keys(pkg.peerDependencies || {}),
+  ...Object.keys(pkg.dependencies || {}),
+]
+export default defineConfig({
+  plugins: [
+    dtsPlugin({
+      include: ['./src/**/*.ts', './src/**/*.tsx', './src/**/*.vue'],
+      skipDiagnostics: false,
+      staticImport: true,
+      outputDir: ['./dist/types'],
+      cleanVueFileName: false,
+    }),
+    VueMacros({
+      plugins: {
+        vue: Vue(),
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+    },
+  },
+  build: {
+    target: 'modules',
+    lib: {
+      entry: path.resolve(__dirname, './src/index.ts'),
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      external: externals,
+    },
+  },
+})