vfit 1.0.3 → 1.0.6

package/README.md

@@ -86,3 +86,7 @@ app.use(createFitScale({ target: '#app', designHeight: 1080, designWidth: 1920,
 - 使用 `unit='px'` 时，`top/left` 随缩放变化，`right/bottom` 保持实际像素距离不变
 - 使用 `right` 时，缩放原点为右上角；同时设置 `bottom` 与 `right` 时为右下角
 - 首次接入时，务必引入样式：`import 'vfit/style.css'`
+
+## React 支持
+
+该库的 React 版本请访问 [vfit-react](https://www.npmjs.com/package/vfit-react)。

package/dist/fitscale.es.js

@@ -83,7 +83,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const FitContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1b23da3b"]]);
+const FitContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e29d4044"]]);
 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{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"})});
+(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-e29d4044"]]);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-1b23da3b]{position:absolute;transform-origin:0 0;z-index:300;will-change:transform}
+.fit-container[data-v-e29d4044]{position:absolute;transform-origin:0 0;z-index:300;will-change:transform}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vfit",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "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,13 @@
     "vue-plugin"
   ],
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/v-plugin/vfit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/v-plugin/vfit/issues"
+  },
   "homepage": "https://web-vfit.netlify.app",
   "type": "module",
   "main": "dist/fitscale.umd.js",