vfit 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/fitscale.es.js +74 -117
- package/dist/fitscale.umd.js +1 -1
- package/package.json +4 -5
package/dist/fitscale.es.js
CHANGED
|
@@ -1,84 +1,64 @@
|
|
|
1
1
|
import { defineComponent, reactive, inject, ref, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass, renderSlot } from "vue";
|
|
2
|
-
function
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
const _0x3a94a0 = parseInt(_0x4ff46b(193)) / 1 + parseInt(_0x4ff46b(189)) / 2 * (parseInt(_0x4ff46b(192)) / 3) + parseInt(_0x4ff46b(199)) / 4 * (-parseInt(_0x4ff46b(198)) / 5) + -parseInt(_0x4ff46b(195)) / 6 * (-parseInt(_0x4ff46b(200)) / 7) + -parseInt(_0x4ff46b(196)) / 8 * (parseInt(_0x4ff46b(197)) / 9) + parseInt(_0x4ff46b(188)) / 10 * (-parseInt(_0x4ff46b(191)) / 11) + parseInt(_0x4ff46b(194)) / 12;
|
|
15
|
-
if (_0x3a94a0 === _0x217f6f) break;
|
|
16
|
-
else _0x396afb["push"](_0x396afb["shift"]());
|
|
17
|
-
} catch (_0x557b6c) {
|
|
18
|
-
_0x396afb["push"](_0x396afb["shift"]());
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
})(_0x5e3a, 653108);
|
|
22
|
-
function observeScale(_0x47f0dd, _0x319e73, _0x1b6eac) {
|
|
23
|
-
const _0x546310 = new ResizeObserver((_0x9a2e4f) => {
|
|
24
|
-
const _0x35b442 = _0x5b39;
|
|
25
|
-
for (const _0x4bf30e of _0x9a2e4f) {
|
|
26
|
-
const _0x322e1f = _0x4bf30e[_0x35b442(187)][_0x35b442(190)], _0x10af9e = _0x4bf30e[_0x35b442(187)]["width"];
|
|
27
|
-
let _0x2780a2;
|
|
28
|
-
_0x10af9e / _0x322e1f < 1.7666666666666666 ? _0x2780a2 = _0x10af9e / 1920 * 0.98 : _0x2780a2 = _0x322e1f / _0x319e73, _0x1b6eac(_0x2780a2);
|
|
2
|
+
function observeScale(target, designHeight, onScale) {
|
|
3
|
+
const observer = new ResizeObserver((entries) => {
|
|
4
|
+
for (const entry of entries) {
|
|
5
|
+
const rectHeight = entry.contentRect.height;
|
|
6
|
+
const rectWidth = entry.contentRect.width;
|
|
7
|
+
let scaleVal;
|
|
8
|
+
if (rectWidth / rectHeight < 1.7666666666666666) {
|
|
9
|
+
scaleVal = rectWidth / 1920 * 0.98;
|
|
10
|
+
} else {
|
|
11
|
+
scaleVal = rectHeight / designHeight;
|
|
12
|
+
}
|
|
13
|
+
onScale(scaleVal);
|
|
29
14
|
}
|
|
30
15
|
});
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
function _0x5e3a() {
|
|
34
|
-
const _0x2496c4 = ["height", "6360915jgmmHX", "39oTIYPi", "2614wKzJKD", "9664764UuFarW", "78baZmcJ", "2444240fjGScu", "36FHZamq", "5TAXYRD", "439788uhDQcL", "455014cFiuQc", "contentRect", "10ImcMkP", "140062BisBzb"];
|
|
35
|
-
_0x5e3a = function() {
|
|
36
|
-
return _0x2496c4;
|
|
37
|
-
};
|
|
38
|
-
return _0x5e3a();
|
|
16
|
+
observer.observe(target);
|
|
17
|
+
return observer;
|
|
39
18
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
return _0x516097;
|
|
58
|
-
}, _0x3700(_0x4ccf37, _0x32cead);
|
|
59
|
-
}
|
|
60
|
-
function _0xda13() {
|
|
61
|
-
const _0xfc6c74 = ["auto", "scale(1)", "div", "scale", "left", "unit", "scale(", "663644JGVBnw", "756593rToWWV", "default", "top", "6062693DerMNQ", "forEach", "15258080dmMyDO", "right", "3592iuPECl", "bottom", "1749PUsjdg", "3400062kbRaDz", "3079435NAAHxG"];
|
|
62
|
-
_0xda13 = function() {
|
|
63
|
-
return _0xfc6c74;
|
|
64
|
-
};
|
|
65
|
-
return _0xda13();
|
|
66
|
-
}
|
|
67
|
-
const _sfc_main = 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"(_0x13ac5f) {
|
|
68
|
-
const _0x156e9b = _0x3700, _0x46dff0 = reactive({ "scale": _0x156e9b(308), "top": _0x156e9b(327), "bottom": _0x156e9b(327), "left": _0x156e9b(327), "right": _0x156e9b(327) }), _0x32030a = _0x13ac5f, _0x35cc12 = inject(FitScaleKey, ref(1));
|
|
69
|
-
return watch([() => _0x32030a[_0x156e9b(310)], _0x35cc12], () => {
|
|
70
|
-
const _0x42ae48 = _0x156e9b, _0xa4ef78 = _0x32030a[_0x42ae48(310)] && _0x32030a["scale"] > 0 ? _0x32030a[_0x42ae48(310)] : (_0x35cc12 == null ? void 0 : _0x35cc12["value"]) ?? 1;
|
|
71
|
-
_0x46dff0[_0x42ae48(310)] = _0x42ae48(313) + _0xa4ef78 + ")";
|
|
72
|
-
const _0x22d343 = [_0x42ae48(317), _0x42ae48(323), _0x42ae48(311), "right"];
|
|
73
|
-
_0x22d343[_0x42ae48(319)]((_0x17de75) => {
|
|
74
|
-
const _0x5cceb8 = _0x42ae48, _0x35e2e0 = _0x32030a[_0x17de75];
|
|
75
|
-
_0x32030a[_0x5cceb8(312)] === "%" ? _0x46dff0[_0x17de75] = _0x35e2e0 == void 0 ? _0x5cceb8(327) : "" + _0x35e2e0 + _0x32030a["unit"] : _0x46dff0[_0x17de75] = _0x35e2e0 == void 0 ? "auto" : "" + _0x35e2e0 * _0xa4ef78 + _0x32030a["unit"];
|
|
19
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
20
|
+
__name: "FitContainer",
|
|
21
|
+
props: {
|
|
22
|
+
scale: { type: Number, default: 0 },
|
|
23
|
+
top: { type: Number },
|
|
24
|
+
bottom: { type: Number },
|
|
25
|
+
left: { type: Number },
|
|
26
|
+
right: { type: Number },
|
|
27
|
+
unit: { type: String, default: "px" }
|
|
28
|
+
},
|
|
29
|
+
setup(__props) {
|
|
30
|
+
const position = reactive({
|
|
31
|
+
scale: `scale(1)`,
|
|
32
|
+
top: "auto",
|
|
33
|
+
bottom: "auto",
|
|
34
|
+
left: "auto",
|
|
35
|
+
right: "auto"
|
|
76
36
|
});
|
|
77
|
-
|
|
78
|
-
const
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
37
|
+
const props = __props;
|
|
38
|
+
const fitScale = inject(FitScaleKey, ref(1));
|
|
39
|
+
watch([() => props.scale, fitScale], () => {
|
|
40
|
+
const s = props.scale && props.scale > 0 ? props.scale : (fitScale == null ? void 0 : fitScale.value) ?? 1;
|
|
41
|
+
position.scale = `scale(${s})`;
|
|
42
|
+
const styleKey = ["top", "bottom", "left", "right"];
|
|
43
|
+
styleKey.forEach((key) => {
|
|
44
|
+
const val = props[key];
|
|
45
|
+
if (props.unit === "%") {
|
|
46
|
+
position[key] = val == void 0 ? "auto" : `${val}${props.unit}`;
|
|
47
|
+
} else {
|
|
48
|
+
position[key] = val == void 0 ? "auto" : `${val * s}${props.unit}`;
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
}, { immediate: true });
|
|
52
|
+
return (_ctx, _cache) => {
|
|
53
|
+
return openBlock(), createElementBlock("div", {
|
|
54
|
+
class: normalizeClass(["fit-container", { "fit-container-right": props.right !== void 0 }]),
|
|
55
|
+
style: normalizeStyle({ transform: position.scale, top: position.top, bottom: position.bottom, left: position.left, right: position.right })
|
|
56
|
+
}, [
|
|
57
|
+
renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
|
58
|
+
], 6);
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
});
|
|
82
62
|
const _export_sfc = (sfc, props) => {
|
|
83
63
|
const target = sfc.__vccOpts || sfc;
|
|
84
64
|
for (const [key, val] of props) {
|
|
@@ -86,52 +66,29 @@ const _export_sfc = (sfc, props) => {
|
|
|
86
66
|
}
|
|
87
67
|
return target;
|
|
88
68
|
};
|
|
89
|
-
const
|
|
90
|
-
const
|
|
91
|
-
|
|
92
|
-
const
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
const
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
69
|
+
const FitContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1ab0024a"]]);
|
|
70
|
+
const FitScaleKey = Symbol("FitScale");
|
|
71
|
+
function createFitScale(options = {}) {
|
|
72
|
+
const fitScale = ref(1);
|
|
73
|
+
return {
|
|
74
|
+
install(app) {
|
|
75
|
+
const rootEl = typeof options.target === "string" ? document.querySelector(options.target) : options.target;
|
|
76
|
+
const target = rootEl || document.querySelector("#app");
|
|
77
|
+
observeScale(target, options.designHeight ?? 1080, (v) => {
|
|
78
|
+
fitScale.value = v;
|
|
79
|
+
});
|
|
80
|
+
app.provide(FitScaleKey, fitScale);
|
|
81
|
+
app.config.globalProperties.$fitScale = fitScale;
|
|
82
|
+
app.component("FitContainer", FitContainer);
|
|
100
83
|
}
|
|
101
|
-
}
|
|
102
|
-
})(_0x513e, 674638);
|
|
103
|
-
const FitScaleKey = Symbol(_0x4fe986(189));
|
|
104
|
-
function _0x1654(_0x103f76, _0x500394) {
|
|
105
|
-
const _0x513e78 = _0x513e();
|
|
106
|
-
return _0x1654 = function(_0x165485, _0x595dcc) {
|
|
107
|
-
_0x165485 = _0x165485 - 166;
|
|
108
|
-
let _0x4c826e = _0x513e78[_0x165485];
|
|
109
|
-
return _0x4c826e;
|
|
110
|
-
}, _0x1654(_0x103f76, _0x500394);
|
|
111
|
-
}
|
|
112
|
-
function createFitScale(_0x500c9d = {}) {
|
|
113
|
-
const _0x5d8b1f = ref(1);
|
|
114
|
-
return { "install"(_0x31a6a0) {
|
|
115
|
-
const _0x5c10fa = _0x1654, _0xcd811f = typeof _0x500c9d["target"] === _0x5c10fa(177) ? document[_0x5c10fa(176)](_0x500c9d["target"]) : _0x500c9d[_0x5c10fa(178)], _0x4dd71f = _0xcd811f || document["querySelector"](_0x5c10fa(171));
|
|
116
|
-
observeScale(_0x4dd71f, _0x500c9d[_0x5c10fa(179)] ?? 1080, (_0x49c801) => {
|
|
117
|
-
const _0x48cc90 = _0x5c10fa;
|
|
118
|
-
_0x5d8b1f[_0x48cc90(168)] = _0x49c801;
|
|
119
|
-
}), _0x31a6a0[_0x5c10fa(174)](FitScaleKey, _0x5d8b1f), _0x31a6a0[_0x5c10fa(187)][_0x5c10fa(181)][_0x5c10fa(185)] = _0x5d8b1f, _0x31a6a0[_0x5c10fa(173)](_0x5c10fa(188), _0x12e950);
|
|
120
|
-
} };
|
|
84
|
+
};
|
|
121
85
|
}
|
|
122
86
|
function useFitScale() {
|
|
123
|
-
const
|
|
124
|
-
return
|
|
125
|
-
}
|
|
126
|
-
function _0x513e() {
|
|
127
|
-
const _0xfca304 = ["822680xuEkaQ", "value", "32379204QoromE", "7181016gmKVpU", "#app", "4THCEmZ", "component", "provide", "3909849nBeJTi", "querySelector", "string", "target", "designHeight", "2042230sCwFca", "globalProperties", "620cwxmbL", "63nHsAlL", "1YQrvew", "$fitScale", "114651vCQbaR", "config", "FitContainer", "FitScale", "144582CxRYQn"];
|
|
128
|
-
_0x513e = function() {
|
|
129
|
-
return _0xfca304;
|
|
130
|
-
};
|
|
131
|
-
return _0x513e();
|
|
87
|
+
const injectedFitScale = inject(FitScaleKey, ref(1));
|
|
88
|
+
return injectedFitScale;
|
|
132
89
|
}
|
|
133
90
|
export {
|
|
134
|
-
|
|
91
|
+
FitContainer,
|
|
135
92
|
FitScaleKey,
|
|
136
93
|
createFitScale,
|
|
137
94
|
useFitScale
|
package/dist/fitscale.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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){const n=new ResizeObserver(t=>{for(const n of t){const t=n.contentRect.height;const i=n.contentRect.width;let c;if(i/t<1.7666666666666666){c=i/1920*.98}else{c=t/e}o(c)}});n.observe(t);return n}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"}},setup(t){const o=e.reactive({scale:`scale(1)`,top:"auto",bottom:"auto",left:"auto",right:"auto"});const n=t;const i=e.inject(r,e.ref(1));e.watch([()=>n.scale,i],()=>{const t=n.scale&&n.scale>0?n.scale:(i==null?void 0:i.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{o[e]=i==void 0?"auto":`${i*t}${n.unit}`}})},{immediate:true});return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["fit-container",{"fit-container-right":n.right!==void 0}]),style:e.normalizeStyle({transform:o.scale,top:o.top,bottom:o.bottom,left:o.left,right:o.right})},[e.renderSlot(t.$slots,"default",{},void 0,true)],6))}});const i=(t,e)=>{const o=t.__vccOpts||t;for(const[n,i]of e){o[n]=i}return o};const c=i(n,[["__scopeId","data-v-1ab0024a"]]);const r=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});e.provide(r,n);e.config.globalProperties.$fitScale=n;e.component("FitContainer",c)}}}function a(){const t=e.inject(r,e.ref(1));return t}t.FitContainer=c;t.FitScaleKey=r;t.createFitScale=s;t.useFitScale=a;Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vfit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "A tiny Vue 3 plugin to auto-fit UI scale based on container size, plus a FitContainer component for easy positioning.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
"types": "dist/index.d.ts",
|
|
12
12
|
"import": "dist/fitscale.es.js",
|
|
13
13
|
"require": "dist/fitscale.umd.js"
|
|
14
|
-
}
|
|
14
|
+
},
|
|
15
|
+
"./style.css": "./dist/style.css"
|
|
15
16
|
},
|
|
16
17
|
"files": [
|
|
17
18
|
"dist"
|
|
@@ -26,8 +27,6 @@
|
|
|
26
27
|
"@vitejs/plugin-vue": "^5.0.4",
|
|
27
28
|
"typescript": "^5.6.3",
|
|
28
29
|
"vite": "^5.4.0",
|
|
29
|
-
"terser": "^5.31.0"
|
|
30
|
-
"javascript-obfuscator": "^4.1.0",
|
|
31
|
-
"vite-plugin-javascript-obfuscator": "^3.1.0"
|
|
30
|
+
"terser": "^5.31.0"
|
|
32
31
|
}
|
|
33
32
|
}
|