vfit 1.0.1 → 1.0.3

package/README.md

@@ -1,5 +1,9 @@
 # vfit
 
+官网：https://web-vfit.netlify.app
+
+作者：一颗烂土豆
+
 Vue 3 的轻量缩放与定位解决方案。通过插件提供全局缩放值，并内置 `FitContainer` 组件，让页面元素在不同分辨率下保持比例与位置一致。
 
 ## 安装与初始化
@@ -79,6 +83,6 @@ app.use(createFitScale({ target: '#app', designHeight: 1080, designWidth: 1920,
 
 ## 小贴士
 
-- 使用 `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

@@ -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);

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",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"})});
+(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/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.1",
+  "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"
   }
-}
+}