vfit 1.0.0 → 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, scaleMode: 'auto' }))
+app.use(createFitScale({ target: '#app', designHeight: 1080, designWidth: 1920, scaleMode: 'auto' }))
 ```
 
 ## 快速上手
@@ -63,13 +63,14 @@ app.use(createFitScale({ target: '#app', designHeight: 1080, scaleMode: 'auto' }
 
 ## API 精简版
 
-- `createFitScale({ target?, designHeight?, scaleMode? })`
+- `createFitScale({ target?, designHeight?, designWidth?, scaleMode? })`
   - `target`：监听缩放的容器（默认 `#app`）
   - `designHeight`：设计稿高度（默认 `1080`）
+  - `designWidth`：设计稿宽度（默认 `1920`）
   - `scaleMode`：`'height' | 'width' | 'auto'`（默认 `auto`）
     - `height`：按高度缩放，比例为 `容器高度 / 设计稿高度`
-    - `width`：按宽度缩放，比例为 `容器宽度 / 1920`（与之前逻辑一致）
-    - `auto`：根据容器宽高比与设计比（`1920 / 设计稿高度`）自动选择按宽或按高
+    - `width`：按宽度缩放，比例为 `容器宽度 / 设计稿宽度`
+    - `auto`：根据容器宽高比与设计比（`设计稿宽度 / 设计稿高度`）自动选择按宽或按高
 - `useFitScale()`：在组件内获取当前缩放值 `Ref<number>`
 - `FitContainer` 组件属性：
   - `top/bottom/left/right?: number`

package/dist/fitscale.es.js

@@ -1,5 +1,5 @@
 import { defineComponent, reactive, computed, inject, ref, watch, createElementBlock, openBlock, normalizeStyle, renderSlot } from "vue";
-function observeScale(target, designHeight, onScale, scaleMode = "auto") {
+function observeScale(target, designHeight, onScale, scaleMode = "auto", designWidth = 1920) {
   const observer = new ResizeObserver((entries) => {
     for (const entry of entries) {
       const rectHeight = entry.contentRect.height;
@@ -8,11 +8,11 @@ function observeScale(target, designHeight, onScale, scaleMode = "auto") {
       if (scaleMode === "height") {
         scaleVal = rectHeight / designHeight;
       } else if (scaleMode === "width") {
-        scaleVal = rectWidth / 1920 * 0.98;
+        scaleVal = rectWidth / designWidth;
       } else {
-        const designRatio = 1920 / designHeight;
+        const designRatio = designWidth / designHeight;
         if (rectWidth / rectHeight < designRatio) {
-          scaleVal = rectWidth / 1920 * 0.98;
+          scaleVal = rectWidth / designWidth;
         } else {
           scaleVal = rectHeight / designHeight;
         }
@@ -92,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.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,n="auto"){const i=new ResizeObserver(t=>{for(const i of t){const t=i.contentRect.height;const r=i.contentRect.width;let c;if(n==="height"){c=t/e}else if(n==="width"){c=r/1920*.98}else{const o=1920/e;if(r/t<o){c=r/1920*.98}else{c=t/e}}o(c)}});i.observe(t);return i}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");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"})});
+(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,7 @@ 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): {

package/dist/scale.d.ts

@@ -1 +1 @@
-export declare function observeScale(target: HTMLElement, designHeight: number, onScale: (scale: number) => void, scaleMode?: 'height' | 'width' | 'auto'): 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": "1.0.0",
+  "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",