vfit 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,32 @@
+# vfit
+
+A tiny Vue 3 plugin and component to auto-fit UI scale based on container size.
+
+## Install
+
+```
+npm i vfit
+```
+
+## Use
+
+```ts
+import { createFitScale } from 'vfit'
+app.use(createFitScale({ target: '#app', designHeight: 1080 }))
+```
+
+## Component
+
+```vue
+<template>
+  <FitContainer :top="50" :left="50" :unit="'%'">
+    <!-- content -->
+  </FitContainer>
+</template>
+```
+
+## API
+
+- createFitScale(options)
+- useFitScale()
+- FitContainer

package/dist/fitscale.es.js

@@ -1,10 +1,10 @@
-import { defineComponent as m, reactive as p, inject as f, ref as l, watch as d, createElementBlock as g, openBlock as v, normalizeStyle as y, normalizeClass as b, renderSlot as h } from "vue";
+import { defineComponent as m, reactive as p, inject as f, ref as l, watch as d, createElementBlock as g, openBlock as b, normalizeStyle as v, normalizeClass as y, renderSlot as h } from "vue";
 function S(o, e, t) {
-  const r = new ResizeObserver((n) => {
-    for (const s of n) {
-      const a = s.contentRect.height, c = s.contentRect.width;
-      let i;
-      c / a < 1.7666666666666666 ? i = c / 1920 * 0.98 : i = a / e, t(i);
+  const r = new ResizeObserver((c) => {
+    for (const a of c) {
+      const i = a.contentRect.height, n = a.contentRect.width;
+      let s;
+      n / i < 1.7666666666666666 ? s = n / 1920 * 0.98 : s = i / e, t(s);
     }
   });
   return r.observe(o), r;
@@ -28,31 +28,31 @@ const _ = /* @__PURE__ */ m({
       right: "auto"
     }), t = o, r = f(u, l(1));
     return d([() => t.scale, r], () => {
-      const n = t.scale && t.scale > 0 ? t.scale : (r == null ? void 0 : r.value) ?? 1;
-      e.scale = `scale(${n})`, ["top", "bottom", "left", "right"].forEach((a) => {
-        const c = t[a];
-        t.unit === "%" ? e[a] = c == null ? "auto" : `${c}${t.unit}` : e[a] = c == null ? "auto" : `${c * n}${t.unit}`;
+      const c = t.scale && t.scale > 0 ? t.scale : (r == null ? void 0 : r.value) ?? 1;
+      e.scale = `scale(${c})`, ["top", "bottom", "left", "right"].forEach((i) => {
+        const n = t[i];
+        t.unit === "%" ? e[i] = n == null ? "auto" : `${n}${t.unit}` : e[i] = n == null ? "auto" : `${n * c}${t.unit}`;
       });
-    }, { immediate: !0 }), (n, s) => (v(), g("div", {
-      class: b(["fit-container", { "fit-container-right": t.right !== void 0 }]),
-      style: y({ transform: e.scale, top: e.top, bottom: e.bottom, left: e.left, right: e.right })
+    }, { immediate: !0 }), (c, a) => (b(), g("div", {
+      class: y(["fit-container", { "fit-container-right": t.right !== void 0 }]),
+      style: v({ transform: e.scale, top: e.top, bottom: e.bottom, left: e.left, right: e.right })
     }, [
-      h(n.$slots, "default", {}, void 0, !0)
+      h(c.$slots, "default", {}, void 0, !0)
     ], 6));
   }
 }), F = (o, e) => {
   const t = o.__vccOpts || o;
-  for (const [r, n] of e)
-    t[r] = n;
+  for (const [r, c] of e)
+    t[r] = c;
   return t;
-}, $ = /* @__PURE__ */ F(_, [["__scopeId", "data-v-d7520246"]]), u = Symbol("FitScale");
+}, $ = /* @__PURE__ */ F(_, [["__scopeId", "data-v-1ab0024a"]]), u = Symbol("FitScale");
 function N(o = {}) {
   const e = l(1);
   return {
     install(t) {
-      const n = (typeof o.target == "string" ? document.querySelector(o.target) : o.target) || document.querySelector("#app");
-      S(n, o.designHeight ?? 1080, (s) => {
-        e.value = s;
+      const c = (typeof o.target == "string" ? document.querySelector(o.target) : o.target) || document.querySelector("#app");
+      S(c, o.designHeight ?? 1080, (a) => {
+        e.value = a;
       }), t.provide(u, e), t.config.globalProperties.$fitScale = e, t.component("FitContainer", $);
     }
   };

package/dist/fitscale.umd.js

@@ -1 +1 @@
-(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.FitScale={},c.Vue))})(this,function(c,e){"use strict";function m(n,o,t){const i=new ResizeObserver(r=>{for(const a of r){const l=a.contentRect.height,s=a.contentRect.width;let u;s/l<1.7666666666666666?u=s/1920*.98:u=l/o,t(u)}});return i.observe(n),i}const d=((n,o)=>{const t=n.__vccOpts||n;for(const[i,r]of o)t[i]=r;return t})(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"}},setup(n){const o=e.reactive({scale:"scale(1)",top:"auto",bottom:"auto",left:"auto",right:"auto"}),t=n,i=e.inject(f,e.ref(1));return e.watch([()=>t.scale,i],()=>{const r=t.scale&&t.scale>0?t.scale:(i==null?void 0:i.value)??1;o.scale=`scale(${r})`,["top","bottom","left","right"].forEach(l=>{const s=t[l];t.unit==="%"?o[l]=s==null?"auto":`${s}${t.unit}`:o[l]=s==null?"auto":`${s*r}${t.unit}`})},{immediate:!0}),(r,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["fit-container",{"fit-container-right":t.right!==void 0}]),style:e.normalizeStyle({transform:o.scale,top:o.top,bottom:o.bottom,left:o.left,right:o.right})},[e.renderSlot(r.$slots,"default",{},void 0,!0)],6))}}),[["__scopeId","data-v-d7520246"]]),f=Symbol("FitScale");function p(n={}){const o=e.ref(1);return{install(t){const r=(typeof n.target=="string"?document.querySelector(n.target):n.target)||document.querySelector("#app");m(r,n.designHeight??1080,a=>{o.value=a}),t.provide(f,o),t.config.globalProperties.$fitScale=o,t.component("FitContainer",d)}}}function y(){return e.inject(f,e.ref(1))}c.FitContainer=d,c.FitScaleKey=f,c.createFitScale=p,c.useFitScale=y,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.FitScale={},c.Vue))})(this,function(c,e){"use strict";function m(n,o,t){const i=new ResizeObserver(r=>{for(const s of r){const l=s.contentRect.height,a=s.contentRect.width;let u;a/l<1.7666666666666666?u=a/1920*.98:u=l/o,t(u)}});return i.observe(n),i}const d=((n,o)=>{const t=n.__vccOpts||n;for(const[i,r]of o)t[i]=r;return t})(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"}},setup(n){const o=e.reactive({scale:"scale(1)",top:"auto",bottom:"auto",left:"auto",right:"auto"}),t=n,i=e.inject(f,e.ref(1));return e.watch([()=>t.scale,i],()=>{const r=t.scale&&t.scale>0?t.scale:(i==null?void 0:i.value)??1;o.scale=`scale(${r})`,["top","bottom","left","right"].forEach(l=>{const a=t[l];t.unit==="%"?o[l]=a==null?"auto":`${a}${t.unit}`:o[l]=a==null?"auto":`${a*r}${t.unit}`})},{immediate:!0}),(r,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["fit-container",{"fit-container-right":t.right!==void 0}]),style:e.normalizeStyle({transform:o.scale,top:o.top,bottom:o.bottom,left:o.left,right:o.right})},[e.renderSlot(r.$slots,"default",{},void 0,!0)],6))}}),[["__scopeId","data-v-1ab0024a"]]),f=Symbol("FitScale");function p(n={}){const o=e.ref(1);return{install(t){const r=(typeof n.target=="string"?document.querySelector(n.target):n.target)||document.querySelector("#app");m(r,n.designHeight??1080,s=>{o.value=s}),t.provide(f,o),t.config.globalProperties.$fitScale=o,t.component("FitContainer",d)}}}function y(){return e.inject(f,e.ref(1))}c.FitContainer=d,c.FitScaleKey=f,c.createFitScale=p,c.useFitScale=y,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -1 +1 @@
-.fit-container[data-v-d7520246]{position:absolute;transform-origin:0 0;z-index:300}.fit-container-right[data-v-d7520246]{transform-origin:100% 0}
+.fit-container[data-v-1ab0024a]{position:absolute;transform-origin:0 0;z-index:300}.fit-container-right[data-v-1ab0024a]{transform-origin:100% 0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vfit",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A tiny Vue 3 plugin to auto-fit UI scale based on container size, plus a FitContainer component for easy positioning.",
   "license": "MIT",
   "type": "module",