@cherrywind/flexible 0.0.2-alpha

package/README.md

@@ -0,0 +1,139 @@
+# Flexible
+
+A lightweight and flexible layout system for responsive web design, inspired by the popular flexible.js.
+
+[中文文档](./README.zh-CN.md)
+
+## Features
+
+- 🚀 Lightweight and fast
+- 📱 Responsive design support
+- 🔄 Automatic viewport adaptation
+- 🎯 Customizable breakpoints
+- 🎨 CSS variable support
+- 🧹 Clean API with cleanup function
+
+## Installation
+
+```bash
+npm install @your-scope/flexible
+# or
+yarn add @your-scope/flexible
+# or
+pnpm add @your-scope/flexible
+```
+
+## Usage
+
+### Basic Usage
+
+```typescript
+import { flexible } from '@your-scope/flexible';
+
+// Initialize with default settings
+const cleanup = flexible();
+
+// Clean up when needed
+cleanup();
+```
+
+### With Custom Options
+
+```typescript
+import { flexible } from '@your-scope/flexible';
+
+const cleanup = flexible({
+  breakpoints: [1024, 768],
+  containers: [1920, 1024, 768],
+  basicContainer: 1920,
+  scope: {
+    element: document.querySelector('.container'),
+    cssVarName: '--custom-rem'
+  }
+});
+```
+
+## API
+
+### Options
+
+```typescript
+interface FlexibleOptions {
+  /**
+   * An array of breakpoints in pixels, from largest to smallest.
+   * Defaults to [768].
+   */
+  breakpoints?: number[];
+  /**
+   * An array of container widths that corresponds to breakpoints.
+   * Must have exactly one more item than breakpoints array.
+   */
+  containers?: number[];
+  /**
+   * The base container width used as reference for calculations.
+   * Defaults to the last item in containers array.
+   */
+  basicContainer?: number;
+  /**
+   * Whether to set the CSS variable on a specific scope element.
+   */
+  scope?: {
+    element?: HTMLElement;
+    cssVarName?: string;
+  } | false;
+}
+```
+
+### Return Value
+
+The `flexible` function returns a cleanup function that removes all event listeners:
+
+```typescript
+const cleanup = flexible();
+// Later...
+cleanup();
+```
+
+## Examples
+
+### Basic Example
+
+```typescript
+import { flexible } from '@your-scope/flexible';
+
+// Initialize with default settings
+const cleanup = flexible();
+
+// The font size will be automatically adjusted based on viewport width
+// 100rem = 100vw = design width
+```
+
+### Custom Breakpoints Example
+
+```typescript
+import { flexible } from '@your-scope/flexible';
+
+const cleanup = flexible({
+  breakpoints: [1024, 768],
+  containers: [1920, 1024, 768],
+  basicContainer: 1920
+});
+```
+
+### Custom Scope Example
+
+```typescript
+import { flexible } from '@your-scope/flexible';
+
+const container = document.querySelector('.container');
+const cleanup = flexible({
+  scope: {
+    element: container,
+    cssVarName: '--container-rem'
+  }
+});
+```
+
+## License
+
+MIT

package/README.zh-CN.md

@@ -0,0 +1,139 @@
+# Flexible
+
+一个轻量级且灵活的响应式布局系统，灵感来源于流行的 flexible.js。
+
+[English Documentation](./README.md)
+
+## 特性
+
+- 🚀 轻量级且快速
+- 📱 支持响应式设计
+- 🔄 自动视口适配
+- 🎯 可自定义断点
+- 🎨 支持 CSS 变量
+- 🧹 提供清理函数的简洁 API
+
+## 安装
+
+```bash
+npm install @your-scope/flexible
+# 或
+yarn add @your-scope/flexible
+# 或
+pnpm add @your-scope/flexible
+```
+
+## 使用方法
+
+### 基础用法
+
+```typescript
+import { flexible } from '@your-scope/flexible';
+
+// 使用默认设置初始化
+const cleanup = flexible();
+
+// 需要时清理
+cleanup();
+```
+
+### 自定义配置
+
+```typescript
+import { flexible } from '@your-scope/flexible';
+
+const cleanup = flexible({
+  breakpoints: [1024, 768],
+  containers: [1920, 1024, 768],
+  basicContainer: 1920,
+  scope: {
+    element: document.querySelector('.container'),
+    cssVarName: '--custom-rem'
+  }
+});
+```
+
+## API
+
+### 配置选项
+
+```typescript
+interface FlexibleOptions {
+  /**
+   * 断点数组（像素单位），从大到小排序。
+   * 默认为 [768]。
+   */
+  breakpoints?: number[];
+  /**
+   * 与断点对应的容器宽度数组。
+   * 数组长度必须比断点数组多一个。
+   */
+  containers?: number[];
+  /**
+   * 用于计算的基础容器宽度。
+   * 默认为 containers 数组的最后一项。
+   */
+  basicContainer?: number;
+  /**
+   * 是否在特定作用域元素上设置 CSS 变量。
+   */
+  scope?: {
+    element?: HTMLElement;
+    cssVarName?: string;
+  } | false;
+}
+```
+
+### 返回值
+
+`flexible` 函数返回一个清理函数，用于移除所有事件监听器：
+
+```typescript
+const cleanup = flexible();
+// 之后...
+cleanup();
+```
+
+## 示例
+
+### 基础示例
+
+```typescript
+import { flexible } from '@your-scope/flexible';
+
+// 使用默认设置初始化
+const cleanup = flexible();
+
+// 字体大小将根据视口宽度自动调整
+// 100rem = 100vw = 设计宽度
+```
+
+### 自定义断点示例
+
+```typescript
+import { flexible } from '@your-scope/flexible';
+
+const cleanup = flexible({
+  breakpoints: [1024, 768],
+  containers: [1920, 1024, 768],
+  basicContainer: 1920
+});
+```
+
+### 自定义作用域示例
+
+```typescript
+import { flexible } from '@your-scope/flexible';
+
+const container = document.querySelector('.container');
+const cleanup = flexible({
+  scope: {
+    element: container,
+    cssVarName: '--container-rem'
+  }
+});
+```
+
+## 许可证
+
+MIT 

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=(a={})=>{const{breakpoints:i=[768],containers:e,basicContainer:l=e==null?void 0:e.at(-1),scope:d}=a,c=o=>!e||!l?1:e.length-1===i.length?l/e[o]:1,t=()=>{const o=document.documentElement,r=o.clientWidth;let s=r/100;for(let n=0;n<i.length;n++)if(r<=i[n]){s=r*c(n);break}if(d){const{element:n=document.documentElement,cssVarName:m="--local-scope-rem"}=d;n.style.setProperty(m,s+"px")}else o.style.fontSize=s+"px"};return window.addEventListener("load",t),window.addEventListener("resize",t),window.addEventListener("orientationchange",t),()=>{window.removeEventListener("load",t),window.removeEventListener("resize",t),window.removeEventListener("orientationchange",t)}};exports.flexible=w;

package/dist/index.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Initializes a flexible layout system that sets a CSS variable for rem units
+ * based on the viewport width and adaptively scales according to breakpoints.
+ *
+ * @param options - Configuration options for the flexible layout
+ * @returns A cleanup function to remove event listeners
+ */
+export declare const flexible: (options?: FlexibleOptions) => (() => void);
+
+/**
+ * Options for the flexible layout function.
+ */
+export declare interface FlexibleOptions {
+    /**
+     * An array of breakpoints in pixels, from largest to smallest.
+     * Defaults to [768].
+     */
+    breakpoints?: number[];
+    /**
+     * An array of container widths that corresponds to breakpoints.
+     * Must have exactly one more item than breakpoints array.
+     * For example, if breakpoints is [768], containers could be [375, 1920],
+     * where 375 is the width for viewport <= 768px and 1920 is for viewport > 768px.
+     */
+    containers?: number[];
+    /**
+     * The base container width used as reference for calculations.
+     * Only effective when containers is provided.
+     * Used as the baseline container width for ratio calculations.
+     * Defaults to the last item in containers array (containers?.at(-1)),
+     * which typically represents the largest viewport width.
+     */
+    basicContainer?: number;
+    /**
+     * Whether to set the CSS variable on a specific scope element.
+     * Defaults to false, which means setting the font size on the document element.
+     * If an object is provided, it can specify the element and CSS variable name.
+     */
+    scope?: false | {
+        /**
+         * The scope element to set the CSS variable on.
+         * Defaults to document.documentElement.
+         */
+        element?: HTMLElement;
+        /**
+         * The CSS variable name to use for the base rem value.
+         * Defaults to "--local-scope-rem".
+         */
+        cssVarName?: string;
+    };
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,22 @@
+const m = (a = {}) => {
+  const { breakpoints: i = [768], containers: e, basicContainer: d = e == null ? void 0 : e.at(-1), scope: l } = a, c = (o) => !e || !d ? 1 : e.length - 1 === i.length ? d / e[o] : 1, t = () => {
+    const o = document.documentElement, r = o.clientWidth;
+    let s = r / 100;
+    for (let n = 0; n < i.length; n++)
+      if (r <= i[n]) {
+        s = r * c(n);
+        break;
+      }
+    if (l) {
+      const { element: n = document.documentElement, cssVarName: w = "--local-scope-rem" } = l;
+      n.style.setProperty(w, s + "px");
+    } else
+      o.style.fontSize = s + "px";
+  };
+  return window.addEventListener("load", t), window.addEventListener("resize", t), window.addEventListener("orientationchange", t), () => {
+    window.removeEventListener("load", t), window.removeEventListener("resize", t), window.removeEventListener("orientationchange", t);
+  };
+};
+export {
+  m as flexible
+};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@cherrywind/flexible",
+  "version": "0.0.2-alpha",
+  "private": false,
+  "keywords": [
+    "flexible"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/susanforme/utils"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    "require": "./dist/index.cjs",
+    "import": "./dist/index.js"
+  },
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "lint": "cross-env oxlint && eslint \"{src,test}/**/*.{ts,tsx}\" --config eslint.config.mjs",
+    "preview": "vite preview",
+    "release": "changeset",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}