@firstnoodle-ui/bui 0.0.13

package/src/utils/array.ts

@@ -0,0 +1,11 @@
+/**
+ * Modulo function that works with negative numbers as well
+ */
+export const loopRange = (index: number, length: number): number => {
+  return ((index % length) + length) % length;
+};
+
+export const range = (start: number, end: number): number[] => {
+  const length = end - start + 1;
+  return Array.from({ length }, (_, i) => start + i);
+};

package/src/utils/clamp.ts

@@ -0,0 +1 @@
+export const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);

package/src/utils/debounce.ts

@@ -0,0 +1,8 @@
+// eslint-disable-next-line ts/no-unsafe-function-type
+export const debounce = (fn: Function, timeout: number = 300) => {
+  let timer: ReturnType<typeof setTimeout>;
+  return (...args: any[]) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn.apply(this, args), timeout);
+  };
+};

package/src/utils/index.ts

@@ -0,0 +1,5 @@
+export * from "./array";
+export * from "./clamp";
+export * from "./debounce";
+export * from "./scrollbarWidth";
+export * from "./scrollIntoView";

package/src/utils/scrollIntoView.ts

@@ -0,0 +1,25 @@
+export const scrollIntoView = (container: HTMLElement, selected: HTMLElement): void => {
+  if (!selected) {
+    container.scrollTop = 0;
+    return;
+  }
+
+  const offsetParents = [];
+  let pointer = selected.offsetParent as HTMLElement;
+  while (pointer && container !== pointer && container.contains(pointer)) {
+    offsetParents.push(pointer);
+    pointer = pointer.offsetParent as HTMLElement;
+  }
+
+  const top = selected.offsetTop + offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0);
+  const bottom = top + selected.offsetHeight;
+  const viewRectTop = container.scrollTop;
+  const viewRectBottom = viewRectTop + container.clientHeight;
+
+  if (top < viewRectTop) {
+    container.scrollTop = top;
+  }
+  else if (bottom > viewRectBottom) {
+    container.scrollTop = bottom - container.clientHeight;
+  }
+};

package/src/utils/scrollbarWidth.ts

@@ -0,0 +1,27 @@
+let width: number | undefined;
+
+export const scrollbarWidth = (): number => {
+  if (scrollbarWidth !== undefined)
+    return <number>width;
+
+  const outer = document.createElement("div");
+  outer.className = "el-scrollbar__wrap";
+  outer.style.visibility = "hidden";
+  outer.style.width = "100px";
+  outer.style.position = "absolute";
+  outer.style.top = "-9999px";
+  document.body.appendChild(outer);
+
+  const widthNoScroll = outer.offsetWidth;
+  outer.style.overflow = "scroll";
+
+  const inner = document.createElement("div");
+  inner.style.width = "100%";
+  outer.appendChild(inner);
+
+  const widthWithScroll = inner.offsetWidth;
+  outer.parentNode?.removeChild(outer);
+  width = widthNoScroll - widthWithScroll;
+
+  return width;
+};

package/tsconfig.app.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "files": []
+}

package/tsconfig.node.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "moduleDetection": "force",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"],
+    "allowImportingTsExtensions": true,
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,27 @@
+import { resolve } from "node:path";
+import tailwindcss from "@tailwindcss/vite";
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+
+import Dts from "vite-plugin-dts";
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    Dts({ tsconfigPath: resolve(__dirname, "tsconfig.app.json") }),
+    tailwindcss(),
+  ],
+  build: {
+    lib: {
+      formats: ["es"],
+      name: "bui",
+      fileName: (_, name) => `${name}.mjs`,
+      entry: {
+        index: resolve(__dirname, "src/index.ts"),
+      },
+    },
+    rollupOptions: {
+      external: ["vue", "tailwindcss"],
+    },
+  },
+});