vfit 0.1.13 → 1.0.1

package/README.md

@@ -13,7 +13,7 @@ npm i vfit
 import { createFitScale } from 'vfit'
 import 'vfit/style.css'
 
-app.use(createFitScale({ target: '#app', designHeight: 1080 }))
+app.use(createFitScale({ target: '#app', designHeight: 1080, designWidth: 1920, scaleMode: 'auto' }))
 ```
 
 ## 快速上手
@@ -63,9 +63,14 @@ app.use(createFitScale({ target: '#app', designHeight: 1080 }))
 
 ## API 精简版
 
-- `createFitScale({ target?, designHeight? })`
+- `createFitScale({ target?, designHeight?, designWidth?, scaleMode? })`
   - `target`：监听缩放的容器（默认 `#app`）
   - `designHeight`：设计稿高度（默认 `1080`）
+  - `designWidth`：设计稿宽度（默认 `1920`）
+  - `scaleMode`：`'height' | 'width' | 'auto'`（默认 `auto`）
+    - `height`：按高度缩放，比例为 `容器高度 / 设计稿高度`
+    - `width`：按宽度缩放，比例为 `容器宽度 / 设计稿宽度`
+    - `auto`：根据容器宽高比与设计比（`设计稿宽度 / 设计稿高度`）自动选择按宽或按高
 - `useFitScale()`：在组件内获取当前缩放值 `Ref<number>`
 - `FitContainer` 组件属性：
   - `top/bottom/left/right?: number`
@@ -75,4 +80,5 @@ app.use(createFitScale({ target: '#app', designHeight: 1080 }))
 ## 小贴士
 
 - 使用 `right` 时，缩放原点为右上角（更易实现右侧对齐元素）
+- 同时设置 `bottom` 与 `right` 时，原点为右下角，对齐更稳定
 - 首次接入时，务必引入样式：`import 'vfit/style.css'`

package/dist/fitscale.es.js

@@ -1,14 +1,21 @@
 import { defineComponent, reactive, computed, inject, ref, watch, createElementBlock, openBlock, normalizeStyle, renderSlot } from "vue";
-function observeScale(target, designHeight, onScale) {
+function observeScale(target, designHeight, onScale, scaleMode = "auto", designWidth = 1920) {
   const observer = new ResizeObserver((entries) => {
     for (const entry of entries) {
       const rectHeight = entry.contentRect.height;
       const rectWidth = entry.contentRect.width;
       let scaleVal;
-      if (rectWidth / rectHeight < 1.7666666666666666) {
-        scaleVal = rectWidth / 1920 * 0.98;
-      } else {
+      if (scaleMode === "height") {
         scaleVal = rectHeight / designHeight;
+      } else if (scaleMode === "width") {
+        scaleVal = rectWidth / designWidth;
+      } else {
+        const designRatio = designWidth / designHeight;
+        if (rectWidth / rectHeight < designRatio) {
+          scaleVal = rectWidth / designWidth;
+        } else {
+          scaleVal = rectHeight / designHeight;
+        }
       }
       onScale(scaleVal);
     }
@@ -85,7 +92,7 @@ function createFitScale(options = {}) {
       const target = rootEl || document.querySelector("#app");
       observeScale(target, options.designHeight ?? 1080, (v) => {
         fitScale.value = v;
-      });
+      }, options.scaleMode ?? "auto", options.designWidth ?? 1920);
       app.provide(FitScaleKey, fitScale);
       app.config.globalProperties.$fitScale = fitScale;
       app.component("FitContainer", FitContainer);

package/dist/fitscale.umd.js

@@ -1 +1 @@
-(function(t,e){typeof exports==="object"&&typeof module!=="undefined"?e(exports,require("vue")):typeof define==="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis!=="undefined"?globalThis:t||self,e(t.FitScale={},t.Vue))})(this,function(t,e){"use strict";function o(t,e,o){const n=new ResizeObserver(t=>{for(const n of t){const t=n.contentRect.height;const r=n.contentRect.width;let i;if(r/t<1.7666666666666666){i=r/1920*.98}else{i=t/e}o(i)}});n.observe(t);return n}const n=e.defineComponent({__name:"FitContainer",props:{scale:{type:Number,default:0},top:{type:Number},bottom:{type:Number},left:{type:Number},right:{type:Number},unit:{type:String,default:"px"},z:{type:Number,default:300}},setup(t){const o=e.reactive({scale:`scale(1)`,top:"auto",bottom:"auto",left:"auto",right:"auto"});const n=t;const r=e.computed(()=>{const t=n.right!==void 0;const e=n.bottom!==void 0;if(t&&e)return"100% 100%";if(t)return"100% 0";if(e)return"0 100%";return"0 0"});const i=e.inject(c,e.ref(1));e.watch([()=>n.scale,i],()=>{const t=n.scale&&n.scale>0?n.scale:(i==null?void 0:i.value)??1;o.scale=`scale(${t})`;const e=["top","bottom","left","right"];e.forEach(e=>{const r=n[e];if(n.unit==="%"){o[e]=r==void 0?"auto":`${r}${n.unit}`}else{o[e]=r==void 0?"auto":`${r*t}${n.unit}`}})},{immediate:true});return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:"fit-container",style:e.normalizeStyle({transform:o.scale,transformOrigin:r.value,top:o.top,bottom:o.bottom,left:o.left,right:o.right,zIndex:n.z})},[e.renderSlot(t.$slots,"default",{},void 0,true)],4))}});const r=(t,e)=>{const o=t.__vccOpts||t;for(const[n,r]of e){o[n]=r}return o};const i=r(n,[["__scopeId","data-v-1954a495"]]);const c=Symbol("FitScale");function s(t={}){const n=e.ref(1);return{install(e){const r=typeof t.target==="string"?document.querySelector(t.target):t.target;const s=r||document.querySelector("#app");o(s,t.designHeight??1080,t=>{n.value=t});e.provide(c,n);e.config.globalProperties.$fitScale=n;e.component("FitContainer",i)}}}function a(){const t=e.inject(c,e.ref(1));return t}t.FitContainer=i;t.FitScaleKey=c;t.createFitScale=s;t.useFitScale=a;Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
+(function(t,e){typeof exports==="object"&&typeof module!=="undefined"?e(exports,require("vue")):typeof define==="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis!=="undefined"?globalThis:t||self,e(t.FitScale={},t.Vue))})(this,function(t,e){"use strict";function o(t,e,o,n="auto",i=1920){const r=new ResizeObserver(t=>{for(const r of t){const t=r.contentRect.height;const c=r.contentRect.width;let s;if(n==="height"){s=t/e}else if(n==="width"){s=c/i}else{const o=i/e;if(c/t<o){s=c/i}else{s=t/e}}o(s)}});r.observe(t);return r}const n=e.defineComponent({__name:"FitContainer",props:{scale:{type:Number,default:0},top:{type:Number},bottom:{type:Number},left:{type:Number},right:{type:Number},unit:{type:String,default:"px"},z:{type:Number,default:300}},setup(t){const o=e.reactive({scale:`scale(1)`,top:"auto",bottom:"auto",left:"auto",right:"auto"});const n=t;const i=e.computed(()=>{const t=n.right!==void 0;const e=n.bottom!==void 0;if(t&&e)return"100% 100%";if(t)return"100% 0";if(e)return"0 100%";return"0 0"});const r=e.inject(c,e.ref(1));e.watch([()=>n.scale,r],()=>{const t=n.scale&&n.scale>0?n.scale:(r==null?void 0:r.value)??1;o.scale=`scale(${t})`;const e=["top","bottom","left","right"];e.forEach(e=>{const i=n[e];if(n.unit==="%"){o[e]=i==void 0?"auto":`${i}${n.unit}`}else{o[e]=i==void 0?"auto":`${i*t}${n.unit}`}})},{immediate:true});return(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"fit-container",style:e.normalizeStyle({transform:o.scale,transformOrigin:i.value,top:o.top,bottom:o.bottom,left:o.left,right:o.right,zIndex:n.z})},[e.renderSlot(t.$slots,"default",{},void 0,true)],4))}});const i=(t,e)=>{const o=t.__vccOpts||t;for(const[n,i]of e){o[n]=i}return o};const r=i(n,[["__scopeId","data-v-1954a495"]]);const c=Symbol("FitScale");function s(t={}){const n=e.ref(1);return{install(e){const i=typeof t.target==="string"?document.querySelector(t.target):t.target;const s=i||document.querySelector("#app");o(s,t.designHeight??1080,t=>{n.value=t},t.scaleMode??"auto",t.designWidth??1920);e.provide(c,n);e.config.globalProperties.$fitScale=n;e.component("FitContainer",r)}}}function a(){const t=e.inject(c,e.ref(1));return t}t.FitContainer=r;t.FitScaleKey=c;t.createFitScale=s;t.useFitScale=a;Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export declare const FitScaleKey: unique symbol;
 export type FitScaleOptions = {
     target?: string | HTMLElement;
     designHeight?: number;
+    designWidth?: number;
+    scaleMode?: 'height' | 'width' | 'auto';
 };
 export declare function createFitScale(options?: FitScaleOptions): {
     install(app: App): void;

package/dist/scale.d.ts

@@ -1 +1 @@
-export declare function observeScale(target: HTMLElement, designHeight: number, onScale: (scale: number) => void): ResizeObserver;
+export declare function observeScale(target: HTMLElement, designHeight: number, onScale: (scale: number) => void, scaleMode?: 'height' | 'width' | 'auto', designWidth?: number): ResizeObserver;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vfit",
-  "version": "0.1.13",
+  "version": "1.0.1",
   "description": "A tiny Vue 3 plugin to auto-fit UI scale based on container size, plus a FitContainer component for easy positioning.",
   "keywords": [
     "vue3",