@astii/autofit - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/esm/autoFit.js

@@ -19,4 +19,4 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
     injectCssVar({
-      vw: "".concat(100 / dw, "vw"),
-      vh: "".concat(100 / dh, "vh")
+      pxw: "".concat(100 / dw, "vw"),
+      pxh: "".concat(100 / dh, "vh")
     });
@@ -23,0 +23,0 @@ } else {

dist/umd/autofit.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.autoFit=t():e.autoFit=t()}(self,(function(){return function(){var e={550:function(e){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r},e.exports.__esModule=!0,e.exports.default=e.exports},854:function(e){e.exports=function(e){if(Array.isArray(e))return e},e.exports.__esModule=!0,e.exports.default=e.exports},984:function(e){e.exports=function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,u,a=[],c=!0,l=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);c=!0);}catch(e){l=!0,o=e}finally{try{if(!c&&null!=n.return&&(u=n.return(),Object(u)!==u))return}finally{if(l)throw o}}return a}},e.exports.__esModule=!0,e.exports.default=e.exports},374:function(e){e.exports=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.__esModule=!0,e.exports.default=e.exports},760:function(e,t,n){var r=n(854),o=n(984),i=n(960),u=n(374);e.exports=function(e,t){return r(e)||o(e,t)||i(e,t)||u()},e.exports.__esModule=!0,e.exports.default=e.exports},960:function(e,t,n){var r=n(550);e.exports=function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}},e.exports.__esModule=!0,e.exports.default=e.exports}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};return function(){"use strict";n.r(r),n.d(r,{autoFit:function(){return i},autoScale:function(){return e}});var e=function(e){var t=e.dw,n=e.dh,r=(void 0===n&&window.innerHeight,window.innerWidth/t),o=document.querySelector("meta[name=viewport]");if(!o){var i=document.createElement("meta");i.setAttribute("name","viewport"),document.head.appendChild(i)}o.setAttribute("content","width=".concat(window.innerWidth,", initial-scale=").concat(r,", user-scalable=no"))},t=n(760),o=n.n(t),i=function(e){var t=e.dw,n=e.dh,r=void 0===n?100:n,o=e.fitType,i=void 0===o?"viewport":o;/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)&&u(),"viewport"===i?c({vw:"".concat(100/t,"vw"),vh:"".concat(100/r,"vh")}):(a(),c({rem:"".concat(t/10,"rem")}),window.addEventListener("resize",a))},u=function(){var e;null===(e=document.querySelector('meta[name="viewport"]'))||void 0===e||e.remove();var t=document.createElement("meta");t.name="viewport",t.content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no",document.head.appendChild(t)},a=function(){var e=document.documentElement,t=e.clientWidth/10;e.style.fontSize=t+"px"},c=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=Object.entries(e).map((function(e){var t=o()(e,2),n=t[0],r=t[1];return"--".concat(n,": ").concat(r,";")})).join("\n");if(t){var n=document.createElement("style");n.innerHTML=":root {\n      ".concat(t,"\n    }"),document.head.appendChild(n)}}}(),r}()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.autoFit=t():e.autoFit=t()}(self,(function(){return function(){var e={550:function(e){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r},e.exports.__esModule=!0,e.exports.default=e.exports},854:function(e){e.exports=function(e){if(Array.isArray(e))return e},e.exports.__esModule=!0,e.exports.default=e.exports},984:function(e){e.exports=function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,u,a=[],c=!0,l=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);c=!0);}catch(e){l=!0,o=e}finally{try{if(!c&&null!=n.return&&(u=n.return(),Object(u)!==u))return}finally{if(l)throw o}}return a}},e.exports.__esModule=!0,e.exports.default=e.exports},374:function(e){e.exports=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.__esModule=!0,e.exports.default=e.exports},760:function(e,t,n){var r=n(854),o=n(984),i=n(960),u=n(374);e.exports=function(e,t){return r(e)||o(e,t)||i(e,t)||u()},e.exports.__esModule=!0,e.exports.default=e.exports},960:function(e,t,n){var r=n(550);e.exports=function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}},e.exports.__esModule=!0,e.exports.default=e.exports}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};return function(){"use strict";n.r(r),n.d(r,{autoFit:function(){return i},autoScale:function(){return e}});var e=function(e){var t=e.dw,n=e.dh,r=(void 0===n&&window.innerHeight,window.innerWidth/t),o=document.querySelector("meta[name=viewport]");if(!o){var i=document.createElement("meta");i.setAttribute("name","viewport"),document.head.appendChild(i)}o.setAttribute("content","width=".concat(window.innerWidth,", initial-scale=").concat(r,", user-scalable=no"))},t=n(760),o=n.n(t),i=function(e){var t=e.dw,n=e.dh,r=void 0===n?100:n,o=e.fitType,i=void 0===o?"viewport":o;/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)&&u(),"viewport"===i?c({pxw:"".concat(100/t,"vw"),pxh:"".concat(100/r,"vh")}):(a(),c({rem:"".concat(t/10,"rem")}),window.addEventListener("resize",a))},u=function(){var e;null===(e=document.querySelector('meta[name="viewport"]'))||void 0===e||e.remove();var t=document.createElement("meta");t.name="viewport",t.content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no",document.head.appendChild(t)},a=function(){var e=document.documentElement,t=e.clientWidth/10;e.style.fontSize=t+"px"},c=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=Object.entries(e).map((function(e){var t=o()(e,2),n=t[0],r=t[1];return"--".concat(n,": ").concat(r,";")})).join("\n");if(t){var n=document.createElement("style");n.innerHTML=":root {\n      ".concat(t,"\n    }"),document.head.appendChild(n)}}}(),r}()}));

package.json

 {
   "name": "@astii/autofit",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "autofit",
@@ -5,0 +5,0 @@ "module": "dist/esm/index.js",

README.md

@@ -6,16 +6,59 @@ # @astii/autofit
 
-## Install
+## Usage
 
 ```bash
-$ pnpm install
+$ yarn add @astii/autofit
 ```
 
-```bash
-$ npm run dev
-$ npm run build
+### autoScale
+
+```tsx
+//entry of app
+import { autoFit, autoScale } from "@astii/autofit";
+
+autoScale({ dw: 375 });
 ```
 
+### autoFit
+
+```tsx
+//entry of app
+import { autoFit, autoScale } from "@astii/autofit";
+
+autoFit({ dw: 375, dh: 667 });
+```
+
+#### with "viewport"
+
+"px" need convert to **"vw"** and **"vh"**
+
+```css
+.card {
+  /* width: 300px;
+  height: 300px; */
+  width: calc(300 * var(--pxw));
+  height: calc(300 * var(--pxh));
+}
+```
+
+#### with "rem"
+
+"px" need convert to **"rem"**
+
+```css
+.card {
+  /* width: 300px;
+  height: 300px; */
+  width: calc(300 / var(--rem));
+  height: calc(300 / var(--rem));
+}
+```
+
 ## Options
 
-TODO
+| Name    | Type                | Default            | Description   |
+| ------- | ------------------- | ------------------ | ------------- |
+| dw      | number              | -                  | design width  |
+| dh      | number              | window.innerHeight(viewport mode default to 100) | design height |
+| fitType | "viewport" \| "rem" | "viewport"         | autoFit type  |
 
@@ -22,0 +65,0 @@ ## LICENSE

No alert changes

Improved metrics

Total package byte prevSize

10539

increased by10.09%

Number of lines in readme file

67

increased by179.17%

No dependency changes