vfit 0.1.1 → 0.1.2

package/dist/fitscale.es.js

@@ -1,15 +1,22 @@
-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((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);
+import { defineComponent, reactive, inject, ref, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass, renderSlot } from "vue";
+function observeScale(target, designHeight, onScale) {
+  const observer = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const rectHeight = entry.contentRect.height;
+      const rectWidth = entry.contentRect.width;
+      let scaleVal;
+      if (rectWidth / rectHeight < 1.7666666666666666) {
+        scaleVal = rectWidth / 1920 * 0.98;
+      } else {
+        scaleVal = rectHeight / designHeight;
+      }
+      onScale(scaleVal);
     }
   });
-  return r.observe(o), r;
+  observer.observe(target);
+  return observer;
 }
-const _ = /* @__PURE__ */ m({
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "FitContainer",
   props: {
     scale: { type: Number, default: 0 },
@@ -19,50 +26,70 @@ const _ = /* @__PURE__ */ m({
     right: { type: Number },
     unit: { type: String, default: "px" }
   },
-  setup(o) {
-    const e = p({
-      scale: "scale(1)",
+  setup(__props) {
+    const position = reactive({
+      scale: `scale(1)`,
       top: "auto",
       bottom: "auto",
       left: "auto",
       right: "auto"
-    }), t = o, r = f(u, l(1));
-    return d([() => t.scale, r], () => {
-      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}`;
+    });
+    const props = __props;
+    const fitScale = inject(FitScaleKey, ref(1));
+    watch([() => props.scale, fitScale], () => {
+      const s = props.scale && props.scale > 0 ? props.scale : (fitScale == null ? void 0 : fitScale.value) ?? 1;
+      position.scale = `scale(${s})`;
+      const styleKey = ["top", "bottom", "left", "right"];
+      styleKey.forEach((key) => {
+        const val = props[key];
+        if (props.unit === "%") {
+          position[key] = val == void 0 ? "auto" : `${val}${props.unit}`;
+        } else {
+          position[key] = val == void 0 ? "auto" : `${val * s}${props.unit}`;
+        }
       });
-    }, { 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(c.$slots, "default", {}, void 0, !0)
-    ], 6));
+    }, { immediate: true });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["fit-container", { "fit-container-right": props.right !== void 0 }]),
+        style: normalizeStyle({ transform: position.scale, top: position.top, bottom: position.bottom, left: position.left, right: position.right })
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 6);
+    };
   }
-}), F = (o, e) => {
-  const t = o.__vccOpts || o;
-  for (const [r, c] of e)
-    t[r] = c;
-  return t;
-}, $ = /* @__PURE__ */ F(_, [["__scopeId", "data-v-1ab0024a"]]), u = Symbol("FitScale");
-function N(o = {}) {
-  const e = l(1);
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const FitContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1ab0024a"]]);
+const FitScaleKey = Symbol("FitScale");
+function createFitScale(options = {}) {
+  const fitScale = ref(1);
   return {
-    install(t) {
-      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", $);
+    install(app) {
+      const rootEl = typeof options.target === "string" ? document.querySelector(options.target) : options.target;
+      const target = rootEl || document.querySelector("#app");
+      observeScale(target, options.designHeight ?? 1080, (v) => {
+        fitScale.value = v;
+      });
+      app.provide(FitScaleKey, fitScale);
+      app.config.globalProperties.$fitScale = fitScale;
+      app.component("FitContainer", FitContainer);
     }
   };
 }
-function E() {
-  return f(u, l(1));
+function useFitScale() {
+  const injectedFitScale = inject(FitScaleKey, ref(1));
+  return injectedFitScale;
 }
 export {
-  $ as FitContainer,
-  u as FitScaleKey,
-  N as createFitScale,
-  E as useFitScale
+  FitContainer,
+  FitScaleKey,
+  createFitScale,
+  useFitScale
 };

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vfit",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "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",
@@ -25,6 +25,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
     "typescript": "^5.6.3",
-    "vite": "^5.4.0"
+    "vite": "^5.4.0",
+    "terser": "^5.31.0"
   }
 }