vfit 2.0.1 → 2.0.3

package/README.md

@@ -1,10 +1,12 @@
 # vfit
 
-官网：https://web-vfit.netlify.app
+官网：https://vfit.raychart.cn/
 
-作者：一颗烂土豆
+公众号：RayChart（获取全网最全的大屏适配调研方案）
 
-Vue 3 的轻量缩放与定位解决方案。通过插件提供全局缩放值，并内置 `FitContainer` 组件，让页面元素在不同分辨率下保持比例与位置一致。
+作者：RayChart
+
+Vue 3 的轻量缩放与定位解决方案。通过插件提供全局缩放值，并内置 `FitContainer` 与 5 个专用定位组件，让页面元素在不同分辨率下保持比例与位置一致。
 
 ## 安装与初始化
 
@@ -27,24 +29,23 @@ app.use(createFitScale({ target: '#app', designHeight: 1080, designWidth: 1920,
   - `%`：位置不随缩放变化，适合居中/相对位置
   - `px`：位置随缩放乘积变化，适合固定像素布局
 
-### 居中（百分比）
+### 居中（专用组件）
 
 ```vue
 <template>
   <div class="viewport">
-    <FitContainer :top="50" :left="50" unit="%">
+    <vfit-center>
       <div class="card">内容</div>
-    </FitContainer>
+    </vfit-center>
   </div>
 </template>
 
 <style scoped>
 .viewport { position: relative; width: 100%; height: 100vh; }
-.card { transform: translate(-50%, -50%); }
 </style>
 ```
 
-要点：`top/left` 为百分比时，位置不受缩放影响；仅内部内容按比例缩放。
+要点：居中组件自动完成定位与居中，内部内容按比例缩放。
 
 ### 像素定位（随缩放）
 
@@ -80,6 +81,10 @@ app.use(createFitScale({ target: '#app', designHeight: 1080, designWidth: 1920,
   - `top/bottom/left/right?: number`
   - `unit?: 'px' | '%'`（默认 `px`）
   - `scale?: number`（覆盖全局缩放）
+  - `z?: number`（默认 `300`）
+- 专用定位组件：
+  - `<vfit-lt>`、`<vfit-rt>`、`<vfit-lb>`、`<vfit-rb>`：支持 `top/left/right/bottom`、`unit`、`scale`、`z`
+  - `<vfit-center>`：支持 `scale`、`z`
 
 ## 小贴士
 

package/dist/fitscale.es.js

@@ -30,12 +30,11 @@ function useFitScale() {
 }
 function useFitPosition(props, options = {}) {
   const position = reactive({
-    scale: `scale(1)`,
+    scale: `scale(1) translateZ(0)`,
     top: "auto",
     bottom: "auto",
     left: "auto",
-    right: "auto",
-    translate: "translate(0, 0)"
+    right: "auto"
   });
   const origin = computed(() => {
     if (options.origin) return options.origin;
@@ -47,9 +46,18 @@ function useFitPosition(props, options = {}) {
     return "0 0";
   });
   const fitScale = inject(FitScaleKey, ref(1));
-  watch([() => props.scale, fitScale], () => {
+  watch([
+    () => props.scale,
+    () => props.unit,
+    () => props.top,
+    () => props.bottom,
+    () => props.left,
+    () => props.right,
+    fitScale
+  ], () => {
     const s = props.scale && props.scale > 0 ? props.scale : (fitScale == null ? void 0 : fitScale.value) ?? 1;
-    position.scale = `scale(${s}) translateZ(0)`;
+    const baseTransform = `scale(${s}) translateZ(0)`;
+    position.scale = options.extraTransform ? `${baseTransform} ${options.extraTransform}` : baseTransform;
     const styleKey = ["top", "bottom", "left", "right"];
     styleKey.forEach((key) => {
       const val = props[key];
@@ -206,7 +214,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { position, origin } = useFitPosition(props, {
       origin: "50% 50%",
-      scaleKeys: []
+      scaleKeys: [],
+      // No positioning props to scale
+      extraTransform: "translate(-50%, -50%)"
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {

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",r=1920){const i=new ResizeObserver(t=>{for(const i of t){const t=i.contentRect.height;const s=i.contentRect.width;let l;if(n==="height"){l=t/e}else if(n==="width"){l=s/r}else{const o=r/e;if(s/t<o){l=s/r}else{l=t/e}}o(l)}});i.observe(t);return i}const n=Symbol("FitScale");function r(){const t=e.inject(n,e.ref(1));return t}function i(t,o={}){const r=e.reactive({scale:`scale(1)`,top:"auto",bottom:"auto",left:"auto",right:"auto",translate:"translate(0, 0)"});const i=e.computed(()=>{if(o.origin)return o.origin;const e=t.right!==void 0;const n=t.bottom!==void 0;if(e&&n)return"100% 100%";if(e)return"100% 0";if(n)return"0 100%";return"0 0"});const s=e.inject(n,e.ref(1));e.watch([()=>t.scale,s],()=>{const e=t.scale&&t.scale>0?t.scale:(s==null?void 0:s.value)??1;r.scale=`scale(${e}) translateZ(0)`;const n=["top","bottom","left","right"];n.forEach(n=>{const i=t[n];if(t.unit==="%"){r[n]=i==void 0?"auto":`${i}${t.unit}`}else{const s=o.scaleKeys?o.scaleKeys.includes(n):n==="left"||n==="top";r[n]=i==void 0?"auto":`${s?i*e:i}${t.unit}`}})},{immediate:true});return{position:r,origin:i}}const s=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=t;const{position:n,origin:r}=i(o);return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:"fit-container",style:e.normalizeStyle({transform:e.unref(n).scale,transformOrigin:e.unref(r),top:e.unref(n).top,bottom:e.unref(n).bottom,left:e.unref(n).left,right:e.unref(n).right,zIndex:o.z})},[e.renderSlot(t.$slots,"default",{},void 0,true)],4))}});const l=(t,e)=>{const o=t.__vccOpts||t;for(const[n,r]of e){o[n]=r}return o};const c=l(s,[["__scopeId","data-v-42c37d40"]]);const u=e.defineComponent({__name:"VFitLT",props:{scale:{type:Number,default:0},top:{type:Number},left:{type:Number},unit:{type:String,default:"px"},z:{type:Number,default:300}},setup(t){const o=t;const{position:n,origin:r}=i(o);return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:"vfit-lt",style:e.normalizeStyle({transform:e.unref(n).scale,transformOrigin:e.unref(r),top:e.unref(n).top,left:e.unref(n).left,zIndex:o.z})},[e.renderSlot(t.$slots,"default",{},void 0,true)],4))}});const a=l(u,[["__scopeId","data-v-1533313f"]]);const f=e.defineComponent({__name:"VFitRT",props:{scale:{type:Number,default:0},top:{type:Number},right:{type:Number},unit:{type:String,default:"px"},z:{type:Number,default:300}},setup(t){const o=t;const{position:n,origin:r}=i(o,{origin:"100% 0",scaleKeys:["top","right"]});return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:"vfit-rt",style:e.normalizeStyle({transform:e.unref(n).scale,transformOrigin:e.unref(r),top:e.unref(n).top,right:e.unref(n).right,zIndex:o.z})},[e.renderSlot(t.$slots,"default",{},void 0,true)],4))}});const p=l(f,[["__scopeId","data-v-dfa9fc63"]]);const d=e.defineComponent({__name:"VFitLB",props:{scale:{type:Number,default:0},bottom:{type:Number},left:{type:Number},unit:{type:String,default:"px"},z:{type:Number,default:300}},setup(t){const o=t;const{position:n,origin:r}=i(o,{origin:"0 100%",scaleKeys:["bottom","left"]});return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:"vfit-lb",style:e.normalizeStyle({transform:e.unref(n).scale,transformOrigin:e.unref(r),bottom:e.unref(n).bottom,left:e.unref(n).left,zIndex:o.z})},[e.renderSlot(t.$slots,"default",{},void 0,true)],4))}});const m=l(d,[["__scopeId","data-v-e2439afc"]]);const y=e.defineComponent({__name:"VFitRB",props:{scale:{type:Number,default:0},bottom:{type:Number},right:{type:Number},unit:{type:String,default:"px"},z:{type:Number,default:300}},setup(t){const o=t;const{position:n,origin:r}=i(o,{origin:"100% 100%",scaleKeys:["bottom","right"]});return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:"vfit-rb",style:e.normalizeStyle({transform:e.unref(n).scale,transformOrigin:e.unref(r),bottom:e.unref(n).bottom,right:e.unref(n).right,zIndex:o.z})},[e.renderSlot(t.$slots,"default",{},void 0,true)],4))}});const g=l(y,[["__scopeId","data-v-33198615"]]);const b=e.defineComponent({__name:"VFitCenter",props:{scale:{type:Number,default:0},z:{type:Number,default:300}},setup(t){const o=t;const{position:n,origin:r}=i(o,{origin:"50% 50%",scaleKeys:[]});return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:"vfit-center",style:e.normalizeStyle({transform:e.unref(n).scale,transformOrigin:e.unref(r),zIndex:o.z})},[e.renderSlot(t.$slots,"default",{},void 0,true)],4))}});const v=l(b,[["__scopeId","data-v-289ce2dd"]]);function h(t={}){const r=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=>{r.value=t},t.scaleMode??"auto",t.designWidth??1920);e.provide(n,r);e.config.globalProperties.$fitScale=r;e.component("FitContainer",c);e.component("vfit-lt",a);e.component("vfit-rt",p);e.component("vfit-lb",m);e.component("vfit-rb",g);e.component("vfit-center",v)}}}t.FitContainer=c;t.VFitCenter=v;t.VFitLB=m;t.VFitLT=a;t.VFitRB=g;t.VFitRT=p;t.createFitScale=h;t.useFitScale=r;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",r=1920){const i=new ResizeObserver(t=>{for(const i of t){const t=i.contentRect.height;const s=i.contentRect.width;let l;if(n==="height"){l=t/e}else if(n==="width"){l=s/r}else{const o=r/e;if(s/t<o){l=s/r}else{l=t/e}}o(l)}});i.observe(t);return i}const n=Symbol("FitScale");function r(){const t=e.inject(n,e.ref(1));return t}function i(t,o={}){const r=e.reactive({scale:`scale(1) translateZ(0)`,top:"auto",bottom:"auto",left:"auto",right:"auto"});const i=e.computed(()=>{if(o.origin)return o.origin;const e=t.right!==void 0;const n=t.bottom!==void 0;if(e&&n)return"100% 100%";if(e)return"100% 0";if(n)return"0 100%";return"0 0"});const s=e.inject(n,e.ref(1));e.watch([()=>t.scale,()=>t.unit,()=>t.top,()=>t.bottom,()=>t.left,()=>t.right,s],()=>{const e=t.scale&&t.scale>0?t.scale:(s==null?void 0:s.value)??1;const n=`scale(${e}) translateZ(0)`;r.scale=o.extraTransform?`${n} ${o.extraTransform}`:n;const i=["top","bottom","left","right"];i.forEach(n=>{const i=t[n];if(t.unit==="%"){r[n]=i==void 0?"auto":`${i}${t.unit}`}else{const s=o.scaleKeys?o.scaleKeys.includes(n):n==="left"||n==="top";r[n]=i==void 0?"auto":`${s?i*e:i}${t.unit}`}})},{immediate:true});return{position:r,origin:i}}const s=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=t;const{position:n,origin:r}=i(o);return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:"fit-container",style:e.normalizeStyle({transform:e.unref(n).scale,transformOrigin:e.unref(r),top:e.unref(n).top,bottom:e.unref(n).bottom,left:e.unref(n).left,right:e.unref(n).right,zIndex:o.z})},[e.renderSlot(t.$slots,"default",{},void 0,true)],4))}});const l=(t,e)=>{const o=t.__vccOpts||t;for(const[n,r]of e){o[n]=r}return o};const c=l(s,[["__scopeId","data-v-42c37d40"]]);const a=e.defineComponent({__name:"VFitLT",props:{scale:{type:Number,default:0},top:{type:Number},left:{type:Number},unit:{type:String,default:"px"},z:{type:Number,default:300}},setup(t){const o=t;const{position:n,origin:r}=i(o);return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:"vfit-lt",style:e.normalizeStyle({transform:e.unref(n).scale,transformOrigin:e.unref(r),top:e.unref(n).top,left:e.unref(n).left,zIndex:o.z})},[e.renderSlot(t.$slots,"default",{},void 0,true)],4))}});const u=l(a,[["__scopeId","data-v-1533313f"]]);const f=e.defineComponent({__name:"VFitRT",props:{scale:{type:Number,default:0},top:{type:Number},right:{type:Number},unit:{type:String,default:"px"},z:{type:Number,default:300}},setup(t){const o=t;const{position:n,origin:r}=i(o,{origin:"100% 0",scaleKeys:["top","right"]});return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:"vfit-rt",style:e.normalizeStyle({transform:e.unref(n).scale,transformOrigin:e.unref(r),top:e.unref(n).top,right:e.unref(n).right,zIndex:o.z})},[e.renderSlot(t.$slots,"default",{},void 0,true)],4))}});const p=l(f,[["__scopeId","data-v-dfa9fc63"]]);const d=e.defineComponent({__name:"VFitLB",props:{scale:{type:Number,default:0},bottom:{type:Number},left:{type:Number},unit:{type:String,default:"px"},z:{type:Number,default:300}},setup(t){const o=t;const{position:n,origin:r}=i(o,{origin:"0 100%",scaleKeys:["bottom","left"]});return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:"vfit-lb",style:e.normalizeStyle({transform:e.unref(n).scale,transformOrigin:e.unref(r),bottom:e.unref(n).bottom,left:e.unref(n).left,zIndex:o.z})},[e.renderSlot(t.$slots,"default",{},void 0,true)],4))}});const m=l(d,[["__scopeId","data-v-e2439afc"]]);const y=e.defineComponent({__name:"VFitRB",props:{scale:{type:Number,default:0},bottom:{type:Number},right:{type:Number},unit:{type:String,default:"px"},z:{type:Number,default:300}},setup(t){const o=t;const{position:n,origin:r}=i(o,{origin:"100% 100%",scaleKeys:["bottom","right"]});return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:"vfit-rb",style:e.normalizeStyle({transform:e.unref(n).scale,transformOrigin:e.unref(r),bottom:e.unref(n).bottom,right:e.unref(n).right,zIndex:o.z})},[e.renderSlot(t.$slots,"default",{},void 0,true)],4))}});const g=l(y,[["__scopeId","data-v-33198615"]]);const b=e.defineComponent({__name:"VFitCenter",props:{scale:{type:Number,default:0},z:{type:Number,default:300}},setup(t){const o=t;const{position:n,origin:r}=i(o,{origin:"50% 50%",scaleKeys:[],extraTransform:"translate(-50%, -50%)"});return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:"vfit-center",style:e.normalizeStyle({transform:e.unref(n).scale,transformOrigin:e.unref(r),zIndex:o.z})},[e.renderSlot(t.$slots,"default",{},void 0,true)],4))}});const v=l(b,[["__scopeId","data-v-289ce2dd"]]);function h(t={}){const r=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=>{r.value=t},t.scaleMode??"auto",t.designWidth??1920);e.provide(n,r);e.config.globalProperties.$fitScale=r;e.component("FitContainer",c);e.component("vfit-lt",u);e.component("vfit-rt",p);e.component("vfit-lb",m);e.component("vfit-rb",g);e.component("vfit-center",v)}}}t.FitContainer=c;t.VFitCenter=v;t.VFitLB=m;t.VFitLT=u;t.VFitRB=g;t.VFitRT=p;t.createFitScale=h;t.useFitScale=r;Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import type { App } from 'vue';
-import { useFitScale } from './useFitScale';
 import FitContainer from './components/FitContainer.vue';
 import VFitLT from './components/VFitLT.vue';
 import VFitRT from './components/VFitRT.vue';
@@ -15,4 +14,5 @@ export type FitScaleOptions = {
 export declare function createFitScale(options?: FitScaleOptions): {
     install(app: App): void;
 };
-export { FitContainer, VFitLT, VFitRT, VFitLB, VFitRB, VFitCenter, useFitScale };
+export { FitContainer, VFitLT, VFitRT, VFitLB, VFitRB, VFitCenter };
+export { useFitScale } from './useFitScale';

package/dist/useFitPosition.d.ts

@@ -9,7 +9,6 @@ export declare function useFitPosition(props: any, options?: {
         bottom: string;
         left: string;
         right: string;
-        translate: string;
     };
     origin: import("vue").ComputedRef<string>;
 };

package/package.json

@@ -1,16 +1,35 @@
 {
   "name": "vfit",
-  "version": "2.0.1",
+  "version": "2.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",
     "vfit",
+    "vue-plugin",
     "scale",
     "responsive",
-    "container",
-    "positioning",
     "auto-scale",
-    "vue-plugin"
+    "screen-adaptation",
+    "scale-to-fit",
+    "responsive-scaling",
+    "fit-container",
+    "positioning",
+    "big-screen",
+    "large-screen",
+    "data-screen",
+    "data-wall",
+    "dashboard",
+    "data-visualization",
+    "可视化大屏",
+    "数据大屏",
+    "大屏可视化",
+    "大屏适配",
+    "屏幕自适应",
+    "自适应缩放",
+    "大屏组件",
+    "大屏布局",
+    "可视化适配",
+    "屏幕缩放"
   ],
   "license": "MIT",
   "repository": {
@@ -20,7 +39,7 @@
   "bugs": {
     "url": "https://github.com/v-plugin/vfit/issues"
   },
-  "homepage": "https://web-vfit.netlify.app",
+  "homepage": "https://vfit.raychart.cn/",
   "type": "module",
   "main": "dist/fitscale.umd.js",
   "module": "dist/fitscale.es.js",