@cherrywind/flexible 0.0.2-beta → 0.0.2-beta.1

package/README.md

@@ -12,6 +12,8 @@ A lightweight and flexible layout system for responsive web design, inspired by
 - 🎯 Customizable breakpoints
 - 🎨 CSS variable support
 - 🧹 Clean API with cleanup function
+- ⚡ Immediate layout application
+- 📐 Orientation change support
 
 ## Installation
 
@@ -44,8 +46,10 @@ import { flexible } from '@cherrywind/flexible';
 
 const cleanup = flexible({
   breakpoints: [1024, 768],
-  containers: [1920, 1024, 768],
-  basicContainer: 1920,
+  layouts: [375, 1024, 1920],
+  basicLayout: 1920,
+  immediate: true,
+  orientationchange: false,
   scope: {
     element: document.querySelector('.container'),
     cssVarName: '--custom-rem'
@@ -65,22 +69,49 @@ interface FlexibleOptions {
    */
   breakpoints?: number[];
   /**
-   * An array of container widths that corresponds to breakpoints.
+   * An array of layout widths that corresponds to breakpoints.
    * Must have exactly one more item than breakpoints array.
+   * For example, if breakpoints is [768], layouts could be [375, 1920],
+   * where 375 is the width for viewport <= 768px and 1920 is for viewport > 768px.
    */
-  containers?: number[];
+  layouts?: number[];
   /**
-   * The base container width used as reference for calculations.
-   * Defaults to the last item in containers array.
+   * The base layout width used as reference for calculations.
+   * Only effective when layouts is provided.
+   * Used as the baseline layout width for ratio calculations.
+   * Defaults to the last item in layouts array (layouts?.at(-1)),
+   * which typically represents the largest viewport width.
    */
-  basicContainer?: number;
+  basicLayout?: number;
+  /**
+   * Whether to apply the layout immediately on initialization.
+   * Defaults to false.
+   */
+  immediate?: boolean;
+  /**
+   * Whether to listen for orientation change events.
+   * Defaults to true.
+   */
+  orientationchange?: boolean;
   /**
    * 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?: {
-    element?: HTMLElement;
-    cssVarName?: string;
-  } | false;
+  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;
+      };
 }
 ```
 
@@ -115,8 +146,8 @@ import { flexible } from '@cherrywind/flexible';
 
 const cleanup = flexible({
   breakpoints: [1024, 768],
-  containers: [1920, 1024, 768],
-  basicContainer: 1920
+  layouts: [375, 1024, 1920],
+  basicLayout: 1920
 });
 ```
 
@@ -134,6 +165,28 @@ const cleanup = flexible({
 });
 ```
 
+### Immediate Layout Example
+
+```typescript
+import { flexible } from '@cherrywind/flexible';
+
+// Apply layout immediately without waiting for load event
+const cleanup = flexible({
+  immediate: true
+});
+```
+
+### Disable Orientation Change Example
+
+```typescript
+import { flexible } from '@cherrywind/flexible';
+
+// Disable orientation change handling
+const cleanup = flexible({
+  orientationchange: false
+});
+```
+
 ## License
 
 MIT

package/README.zh-CN.md

@@ -12,6 +12,8 @@
 - 🎯 可自定义断点
 - 🎨 支持 CSS 变量
 - 🧹 提供清理函数的简洁 API
+- ⚡ 支持立即应用布局
+- 📐 支持屏幕方向变化
 
 ## 安装
 
@@ -44,8 +46,10 @@ import { flexible } from '@cherrywind/flexible';
 
 const cleanup = flexible({
   breakpoints: [1024, 768],
-  containers: [1920, 1024, 768],
-  basicContainer: 1920,
+  layouts: [375, 1024, 1920],
+  basicLayout: 1920,
+  immediate: true,
+  orientationchange: false,
   scope: {
     element: document.querySelector('.container'),
     cssVarName: '--custom-rem'
@@ -65,22 +69,49 @@ interface FlexibleOptions {
    */
   breakpoints?: number[];
   /**
-   * 与断点对应的容器宽度数组。
+   * 与断点对应的布局宽度数组。
    * 数组长度必须比断点数组多一个。
+   * 例如，如果断点是 [768]，布局可以是 [375, 1920]，
+   * 其中 375 是视口宽度 <= 768px 时的宽度，1920 是视口宽度 > 768px 时的宽度。
    */
-  containers?: number[];
+  layouts?: number[];
   /**
-   * 用于计算的基础容器宽度。
-   * 默认为 containers 数组的最后一项。
+   * 用于计算的基础布局宽度。
+   * 仅在提供 layouts 时有效。
+   * 用作比例计算的基础布局宽度。
+   * 默认为 layouts 数组的最后一项（layouts?.at(-1)），
+   * 通常代表最大的视口宽度。
    */
-  basicContainer?: number;
+  basicLayout?: number;
+  /**
+   * 是否在初始化时立即应用布局。
+   * 默认为 false。
+   */
+  immediate?: boolean;
+  /**
+   * 是否监听屏幕方向变化事件。
+   * 默认为 true。
+   */
+  orientationchange?: boolean;
   /**
    * 是否在特定作用域元素上设置 CSS 变量。
+   * 默认为 false，表示在文档元素上设置字体大小。
+   * 如果提供对象，可以指定元素和 CSS 变量名。
    */
-  scope?: {
-    element?: HTMLElement;
-    cssVarName?: string;
-  } | false;
+  scope?:
+    | false
+    | {
+        /**
+         * 设置 CSS 变量的作用域元素。
+         * 默认为 document.documentElement。
+         */
+        element?: HTMLElement;
+        /**
+         * 用于基础 rem 值的 CSS 变量名。
+         * 默认为 "--local-scope-rem"。
+         */
+        cssVarName?: string;
+      };
 }
 ```
 
@@ -115,8 +146,8 @@ import { flexible } from '@cherrywind/flexible';
 
 const cleanup = flexible({
   breakpoints: [1024, 768],
-  containers: [1920, 1024, 768],
-  basicContainer: 1920
+  layouts: [375, 1024, 1920],
+  basicLayout: 1920
 });
 ```
 
@@ -134,6 +165,28 @@ const cleanup = flexible({
 });
 ```
 
+### 立即应用布局示例
+
+```typescript
+import { flexible } from '@cherrywind/flexible';
+
+// 立即应用布局，不等待 load 事件
+const cleanup = flexible({
+  immediate: true
+});
+```
+
+### 禁用屏幕方向变化示例
+
+```typescript
+import { flexible } from '@cherrywind/flexible';
+
+// 禁用屏幕方向变化处理
+const cleanup = flexible({
+  orientationchange: false
+});
+```
+
 ## 许可证
 
-MIT 
+MIT

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -17,20 +17,30 @@ export declare interface FlexibleOptions {
      */
     breakpoints?: number[];
     /**
-     * An array of container widths that corresponds to breakpoints.
+     * An array of layout 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],
+     * For example, if breakpoints is [768], layouts could be [375, 1920],
      * where 375 is the width for viewport <= 768px and 1920 is for viewport > 768px.
      */
-    containers?: number[];
+    layouts?: 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)),
+     * The base layout width used as reference for calculations.
+     * Only effective when layouts is provided.
+     * Used as the baseline layout width for ratio calculations.
+     * Defaults to the last item in layouts array (layouts?.at(-1)),
      * which typically represents the largest viewport width.
      */
-    basicContainer?: number;
+    basicLayout?: number;
+    /**
+     * Whether to apply the layout immediately on initialization.
+     * Defaults to false.
+     */
+    immediate?: boolean;
+    /**
+     * Whether to listen for orientation change events.
+     * Defaults to true.
+     */
+    orientationchange?: boolean;
     /**
      * Whether to set the CSS variable on a specific scope element.
      * Defaults to false, which means setting the font size on the document element.

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cherrywind/flexible",
-  "version": "0.0.2-beta",
+  "version": "0.0.2-beta.1",
   "private": false,
   "keywords": [
     "flexible"