vfit 1.0.7 → 2.0.1

package/dist/fitscale.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, computed, inject, ref, watch, createElementBlock, openBlock, normalizeStyle, renderSlot } from "vue";
+import { inject, ref, reactive, computed, watch, defineComponent, createElementBlock, openBlock, normalizeStyle, unref, renderSlot } from "vue";
 function observeScale(target, designHeight, onScale, scaleMode = "auto", designWidth = 1920) {
   const observer = new ResizeObserver((entries) => {
     for (const entry of entries) {
@@ -23,7 +23,47 @@ function observeScale(target, designHeight, onScale, scaleMode = "auto", designW
   observer.observe(target);
   return observer;
 }
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const FitScaleKey = Symbol("FitScale");
+function useFitScale() {
+  const injectedFitScale = inject(FitScaleKey, ref(1));
+  return injectedFitScale;
+}
+function useFitPosition(props, options = {}) {
+  const position = reactive({
+    scale: `scale(1)`,
+    top: "auto",
+    bottom: "auto",
+    left: "auto",
+    right: "auto",
+    translate: "translate(0, 0)"
+  });
+  const origin = computed(() => {
+    if (options.origin) return options.origin;
+    const hasRight = props.right !== void 0;
+    const hasBottom = props.bottom !== void 0;
+    if (hasRight && hasBottom) return "100% 100%";
+    if (hasRight) return "100% 0";
+    if (hasBottom) return "0 100%";
+    return "0 0";
+  });
+  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}) translateZ(0)`;
+    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 {
+        const needScale = options.scaleKeys ? options.scaleKeys.includes(key) : key === "left" || key === "top";
+        position[key] = val == void 0 ? "auto" : `${needScale ? val * s : val}${props.unit}`;
+      }
+    });
+  }, { immediate: true });
+  return { position, origin };
+}
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "FitContainer",
   props: {
     scale: { type: Number, default: 0 },
@@ -35,41 +75,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     z: { type: Number, default: 300 }
   },
   setup(__props) {
-    const position = reactive({
-      scale: `scale(1)`,
-      top: "auto",
-      bottom: "auto",
-      left: "auto",
-      right: "auto"
-    });
     const props = __props;
-    const origin = computed(() => {
-      const hasRight = props.right !== void 0;
-      const hasBottom = props.bottom !== void 0;
-      if (hasRight && hasBottom) return "100% 100%";
-      if (hasRight) return "100% 0";
-      if (hasBottom) return "0 100%";
-      return "0 0";
-    });
-    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}) translateZ(0)`;
-      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 {
-          const needScale = key === "left" || key === "top";
-          position[key] = val == void 0 ? "auto" : `${needScale ? val * s : val}${props.unit}`;
-        }
-      });
-    }, { immediate: true });
+    const { position, origin } = useFitPosition(props);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "fit-container",
-        style: normalizeStyle({ transform: position.scale, transformOrigin: origin.value, top: position.top, bottom: position.bottom, left: position.left, right: position.right, zIndex: props.z })
+        style: normalizeStyle({ transform: unref(position).scale, transformOrigin: unref(origin), top: unref(position).top, bottom: unref(position).bottom, left: unref(position).left, right: unref(position).right, zIndex: props.z })
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ], 4);
@@ -83,8 +94,131 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const FitContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8e8d335b"]]);
-const FitScaleKey = Symbol("FitScale");
+const FitContainer = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-42c37d40"]]);
+const _sfc_main$4 = /* @__PURE__ */ 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(__props) {
+    const props = __props;
+    const { position, origin } = useFitPosition(props);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "vfit-lt",
+        style: normalizeStyle({ transform: unref(position).scale, transformOrigin: unref(origin), top: unref(position).top, left: unref(position).left, zIndex: props.z })
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 4);
+    };
+  }
+});
+const VFitLT = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-1533313f"]]);
+const _sfc_main$3 = /* @__PURE__ */ 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(__props) {
+    const props = __props;
+    const { position, origin } = useFitPosition(props, {
+      origin: "100% 0",
+      scaleKeys: ["top", "right"]
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "vfit-rt",
+        style: normalizeStyle({ transform: unref(position).scale, transformOrigin: unref(origin), top: unref(position).top, right: unref(position).right, zIndex: props.z })
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 4);
+    };
+  }
+});
+const VFitRT = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-dfa9fc63"]]);
+const _sfc_main$2 = /* @__PURE__ */ 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(__props) {
+    const props = __props;
+    const { position, origin } = useFitPosition(props, {
+      origin: "0 100%",
+      scaleKeys: ["bottom", "left"]
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "vfit-lb",
+        style: normalizeStyle({ transform: unref(position).scale, transformOrigin: unref(origin), bottom: unref(position).bottom, left: unref(position).left, zIndex: props.z })
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 4);
+    };
+  }
+});
+const VFitLB = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-e2439afc"]]);
+const _sfc_main$1 = /* @__PURE__ */ 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(__props) {
+    const props = __props;
+    const { position, origin } = useFitPosition(props, {
+      origin: "100% 100%",
+      scaleKeys: ["bottom", "right"]
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "vfit-rb",
+        style: normalizeStyle({ transform: unref(position).scale, transformOrigin: unref(origin), bottom: unref(position).bottom, right: unref(position).right, zIndex: props.z })
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 4);
+    };
+  }
+});
+const VFitRB = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-33198615"]]);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VFitCenter",
+  props: {
+    scale: { type: Number, default: 0 },
+    z: { type: Number, default: 300 }
+  },
+  setup(__props) {
+    const props = __props;
+    const { position, origin } = useFitPosition(props, {
+      origin: "50% 50%",
+      scaleKeys: []
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "vfit-center",
+        style: normalizeStyle({ transform: unref(position).scale, transformOrigin: unref(origin), zIndex: props.z })
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 4);
+    };
+  }
+});
+const VFitCenter = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-289ce2dd"]]);
 function createFitScale(options = {}) {
   const fitScale = ref(1);
   return {
@@ -97,16 +231,21 @@ function createFitScale(options = {}) {
       app.provide(FitScaleKey, fitScale);
       app.config.globalProperties.$fitScale = fitScale;
       app.component("FitContainer", FitContainer);
+      app.component("vfit-lt", VFitLT);
+      app.component("vfit-rt", VFitRT);
+      app.component("vfit-lb", VFitLB);
+      app.component("vfit-rb", VFitRB);
+      app.component("vfit-center", VFitCenter);
     }
   };
 }
-function useFitScale() {
-  const injectedFitScale = inject(FitScaleKey, ref(1));
-  return injectedFitScale;
-}
 export {
   FitContainer,
-  FitScaleKey,
+  VFitCenter,
+  VFitLB,
+  VFitLT,
+  VFitRB,
+  VFitRT,
   createFitScale,
   useFitScale
 };

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}) translateZ(0)`;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-8e8d335b"]]);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",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"})});

package/dist/index.d.ts

@@ -1,6 +1,11 @@
-import type { App, Ref } from 'vue';
+import type { App } from 'vue';
+import { useFitScale } from './useFitScale';
 import FitContainer from './components/FitContainer.vue';
-export declare const FitScaleKey: unique symbol;
+import VFitLT from './components/VFitLT.vue';
+import VFitRT from './components/VFitRT.vue';
+import VFitLB from './components/VFitLB.vue';
+import VFitRB from './components/VFitRB.vue';
+import VFitCenter from './components/VFitCenter.vue';
 export type FitScaleOptions = {
     target?: string | HTMLElement;
     designHeight?: number;
@@ -10,5 +15,4 @@ export type FitScaleOptions = {
 export declare function createFitScale(options?: FitScaleOptions): {
     install(app: App): void;
 };
-export declare function useFitScale(): Ref<number>;
-export { FitContainer };
+export { FitContainer, VFitLT, VFitRT, VFitLB, VFitRB, VFitCenter, useFitScale };

package/dist/style.css

@@ -1 +1 @@
-.fit-container[data-v-8e8d335b]{position:absolute;transform-origin:0 0;z-index:300;will-change:transform;backface-visibility:hidden;perspective:1000px}
+.fit-container[data-v-42c37d40],.vfit-lt[data-v-1533313f]{position:absolute;transform-origin:0 0;z-index:300;will-change:transform;backface-visibility:hidden;perspective:1000px}.vfit-rt[data-v-dfa9fc63]{position:absolute;transform-origin:100% 0;z-index:300;will-change:transform;backface-visibility:hidden;perspective:1000px}.vfit-lb[data-v-e2439afc]{position:absolute;transform-origin:0 100%;z-index:300;will-change:transform;backface-visibility:hidden;perspective:1000px}.vfit-rb[data-v-33198615]{position:absolute;transform-origin:100% 100%;z-index:300;will-change:transform;backface-visibility:hidden;perspective:1000px}.vfit-center[data-v-289ce2dd]{position:absolute;top:50%;left:50%;transform-origin:50% 50%;z-index:300;will-change:transform;backface-visibility:hidden;perspective:1000px}

package/dist/useFitPosition.d.ts

@@ -0,0 +1,15 @@
+export declare function useFitPosition(props: any, options?: {
+    origin?: string;
+    scaleKeys?: string[];
+    extraTransform?: string;
+}): {
+    position: {
+        scale: string;
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+        translate: string;
+    };
+    origin: import("vue").ComputedRef<string>;
+};

package/dist/useFitScale.d.ts

@@ -0,0 +1,3 @@
+import { type Ref } from 'vue';
+export declare const FitScaleKey: unique symbol;
+export declare function useFitScale(): Ref<number>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vfit",
-  "version": "1.0.7",
+  "version": "2.0.1",
   "description": "A tiny Vue 3 plugin to auto-fit UI scale based on container size, plus a FitContainer component for easy positioning.",
   "keywords": [
     "vue3",
@@ -26,9 +26,9 @@
   "module": "dist/fitscale.es.js",
   "exports": {
     ".": {
-      "types": "dist/index.d.ts",
-      "import": "dist/fitscale.es.js",
-      "require": "dist/fitscale.umd.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/fitscale.es.js",
+      "require": "./dist/fitscale.umd.js"
     },
     "./style.css": "./dist/style.css"
   },