vfit 1.0.0 → 1.0.3

package/README.md

@@ -1,5 +1,9 @@
 # vfit
 
+官网：https://web-vfit.netlify.app
+
+作者：一颗烂土豆
+
 Vue 3 的轻量缩放与定位解决方案。通过插件提供全局缩放值，并内置 `FitContainer` 组件，让页面元素在不同分辨率下保持比例与位置一致。
 
 ## 安装与初始化
@@ -13,7 +17,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 +67,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`
@@ -78,6 +83,6 @@ app.use(createFitScale({ target: '#app', designHeight: 1080, scaleMode: 'auto' }
 
 ## 小贴士
 
-- 使用 `right` 时，缩放原点为右上角（更易实现右侧对齐元素）
-- 同时设置 `bottom` 与 `right` 时，原点为右下角，对齐更稳定
-- 首次接入时，务必引入样式：`import 'vfit/style.css'`
+- 使用 `unit='px'` 时，`top/left` 随缩放变化，`right/bottom` 保持实际像素距离不变
+- 使用 `right` 时，缩放原点为右上角；同时设置 `bottom` 与 `right` 时为右下角
+- 首次接入时，务必引入样式：`import 'vfit/style.css'`

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;
         }
@@ -61,7 +61,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (props.unit === "%") {
           position[key] = val == void 0 ? "auto" : `${val}${props.unit}`;
         } else {
-          position[key] = val == void 0 ? "auto" : `${val * s}${props.unit}`;
+          const needScale = key === "left" || key === "top";
+          position[key] = val == void 0 ? "auto" : `${needScale ? val * s : val}${props.unit}`;
         }
       });
     }, { immediate: true });
@@ -82,7 +83,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const FitContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1954a495"]]);
+const FitContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1b23da3b"]]);
 const FitScaleKey = Symbol("FitScale");
 function createFitScale(options = {}) {
   const fitScale = ref(1);
@@ -92,7 +93,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{const r=e==="left"||e==="top";o[e]=i==void 0?"auto":`${r?i*t:i}${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-1b23da3b"]]);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 l(){const t=e.inject(c,e.ref(1));return t}t.FitContainer=r;t.FitScaleKey=c;t.createFitScale=s;t.useFitScale=l;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/dist/style.css

@@ -1 +1 @@
-.fit-container[data-v-1954a495]{position:absolute;transform-origin:0 0;z-index:300;will-change:transform}
+.fit-container[data-v-1b23da3b]{position:absolute;transform-origin:0 0;z-index:300;will-change:transform}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vfit",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "A tiny Vue 3 plugin to auto-fit UI scale based on container size, plus a FitContainer component for easy positioning.",
   "keywords": [
     "vue3",
@@ -13,6 +13,7 @@
     "vue-plugin"
   ],
   "license": "MIT",
+  "homepage": "https://web-vfit.netlify.app",
   "type": "module",
   "main": "dist/fitscale.umd.js",
   "module": "dist/fitscale.es.js",
@@ -29,15 +30,22 @@
     "README.md"
   ],
   "scripts": {
-    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.json"
+    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.json",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "pnpm": {
+    "overrides": {}
   },
   "peerDependencies": {
     "vue": ">=3.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
+    "terser": "^5.31.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.0",
-    "terser": "^5.31.0"
+    "vitepress": "^1.6.4"
   }
-}
+}