vfit 0.1.0

package/dist/fitscale.es.js

@@ -0,0 +1,68 @@
+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";
+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);
+    }
+  });
+  return r.observe(o), r;
+}
+const _ = /* @__PURE__ */ m({
+  __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(o) {
+    const e = p({
+      scale: "scale(1)",
+      top: "auto",
+      bottom: "auto",
+      left: "auto",
+      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}`;
+      });
+    }, { 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 })
+    }, [
+      h(n.$slots, "default", {}, void 0, !0)
+    ], 6));
+  }
+}), F = (o, e) => {
+  const t = o.__vccOpts || o;
+  for (const [r, n] of e)
+    t[r] = n;
+  return t;
+}, $ = /* @__PURE__ */ F(_, [["__scopeId", "data-v-d7520246"]]), 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;
+      }), t.provide(u, e), t.config.globalProperties.$fitScale = e, t.component("FitContainer", $);
+    }
+  };
+}
+function E() {
+  return f(u, l(1));
+}
+export {
+  $ as FitContainer,
+  u as FitScaleKey,
+  N as createFitScale,
+  E as useFitScale
+};

package/dist/fitscale.umd.js

@@ -0,0 +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"})});

package/dist/style.css

@@ -0,0 +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}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "vfit",
+  "version": "0.1.0",
+  "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",
+  "main": "dist/fitscale.umd.js",
+  "module": "dist/fitscale.es.js",
+  "exports": {
+    ".": {
+      "types": "dist/index.d.ts",
+      "import": "dist/fitscale.es.js",
+      "require": "dist/fitscale.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.0"
+  }
+}