@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/utils/svg.js

@@ -0,0 +1,129 @@
+/**
+ * @param {string} path
+ * @param {Object} [options]
+ * @param {number} [options.size=24]
+ * @param {boolean} [options.outline] Outline path
+ * @return {string}
+ */
+export function pathToSVG(path, options = {}) {
+  const svgSize = 24;
+  const outline = options.outline;
+  /* eslint-disable indent */
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${svgSize}" height="${svgSize}" preserveAspectRatio="none">`,
+      outline
+       ? `
+        <mask id="m">
+          <rect width="24" height="24" fill="white"/>
+          <path fill="black" d="${path}"/>
+        </mask>
+        <rect width="24" height="24" fill="black" mask="url(#m)"/>
+      `
+      : `<path fill="black" d="${path}"/>`,
+    '</svg>',
+  ].join('');
+  /* eslint-enable indent */
+}
+
+/**
+ * @param {string} path
+ * @param {Object} [options]
+ * @param {number} [options.size=24]
+ * @param {boolean} [options.outline] Outline path
+ * @return {string}
+ */
+export function maskedPathToSVG(path, options = {}) {
+  const svgSize = 24;
+  const outline = options.outline;
+  /* eslint-disable indent */
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${svgSize}" height="${svgSize}" preserveAspectRatio="none">`,
+      outline
+       ? `
+       <defs>
+          <path id="p" d="${path}"/>
+        </defs>
+        <mask id="m">
+          <use href="#p" fill="white"/>
+          <use href="#p" fill="black" transform="scale(0.9166666666666667) translate(1 1)"/>
+        </mask>
+        <use href="#p" fill="black" mask="url(#m)"/>
+      `
+      : `<path fill="black" d="${path}"/>`,
+    '</svg>',
+  ].join('');
+  /* eslint-enable indent */
+}
+
+/**
+ * @param {string} path
+ * @param {Object} [options]
+ * @param {number} [options.size=24]
+ * @param {string} [options.outline] Outline path
+ * @return {string}
+ */
+export function auto9SliceSVG(path, options = {}) {
+  const pathSize = options.size ?? 24;
+  const svgSize = 24;
+  const outline = options.outline;
+  /* eslint-disable indent */
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${svgSize}" height="${svgSize}">`,
+      '<defs>',
+        `<path id="p" d="${path}"/>`,
+        '<g id="g">',
+          '<use href="#p" transform="translate(0 0)"/>',
+          `<use href="#p" transform="translate(${svgSize - pathSize} 0)"/>`,
+          `<use href="#p" transform="translate(${svgSize - pathSize} ${svgSize - pathSize})"/>`,
+          `<use href="#p" transform="translate(0 ${svgSize - pathSize})"/>`,
+          '<path d="',
+            `M${pathSize / 2} 0`,
+            `H${svgSize - (pathSize / 2)}`,
+            `V${pathSize / 2}`,
+            `H${svgSize}`,
+            `V${svgSize - (pathSize / 2)}`,
+            `H${svgSize - (pathSize / 2)}`,
+            `V${svgSize}`,
+            `H${pathSize / 2}`,
+            `V${svgSize - (pathSize / 2)}`,
+            'H0',
+            `V${pathSize / 2}`,
+            `H${pathSize / 2}`,
+            'Z',
+          '"/>',
+        '</g>',
+      '</defs>',
+      outline
+      ? [
+        '<mask id="m">',
+          '<use href="#g" fill="white"/>',
+          `<use href="#g" fill="black" transform="scale(0.5) translate(${pathSize / 2} ${pathSize / 2})" />`,
+          `<use href="#g" fill="black" transform="scale(0.5) translate(${svgSize - (pathSize / 2)} ${pathSize / 2})" />`,
+          `<use href="#g" fill="black" transform="scale(0.5) translate(${svgSize - (pathSize / 2)} ${svgSize - (pathSize / 2)})" />`,
+          `<use href="#g" fill="black" transform="scale(0.5) translate(${pathSize / 2} ${svgSize - (pathSize / 2)})" />`,
+        '</mask>',
+        '<path d="',
+          'M0 0',
+          `H${svgSize}`,
+          `V${svgSize}`,
+          'H0',
+          'Z',
+        '" fill="black" mask="url(#m)"/>',
+      ].join('') : '<use href="#g" fill="black"/>',
+    '</svg>',
+  ].join('');
+  /* eslint-enable indent */
+}
+
+/**
+ * Uses UTF-8 charset instead of base64 for better compression
+ * @param {string} svg
+ * @return {string}
+ */
+export function svgToCSSURL(svg) {
+  return `url('data:image/svg+xml;charset=UTF-8,${svg
+    .replaceAll('\n', ' ')
+    .replaceAll('#', '%23')
+    .replaceAll('(', '%28')
+    .replaceAll(')', '%29')}')`;
+}

package/.browserslistrc

@@ -1,4 +0,0 @@
-# Browsers that we support
-
-> 1%
-not op_mini all

package/.eslintrc.json

@@ -1,204 +0,0 @@
-{
-  "env": {
-    "browser": true
-  },
-  "ignorePatterns": ["*.min.js"],
-  "extends": [
-    "airbnb-base",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:jsdoc/recommended",
-    "plugin:github/recommended",
-    "plugin:node/recommended",
-    "plugin:unicorn/recommended"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "impliedStrict": true
-    },
-    "ecmaVersion": 2020,
-    "sourceType": "module",
-    "project": "./tsconfig.json"
-  },
-  "plugins": [
-    "@typescript-eslint",
-    "github",
-    "jsdoc",
-    "unicorn",
-    "eta"
-  ],
-  "root": true,
-  "rules": {
-    "object-curly-newline": ["error", {
-      "ObjectExpression": {  "multiline": true, "consistent": true },
-      "ObjectPattern": {  "multiline": true, "consistent": true },
-      "ImportDeclaration": {  "multiline": true, "consistent": true },
-      "ExportDeclaration": {  "multiline": true, "consistent": true }
-    }],
-    "no-param-reassign": ["error", { "props": false }],
-    "no-continue": 0,
-    "no-restricted-syntax": 0,
-    "require-await": 0,
-    "no-return-await": 0,
-    "eslint-comments/no-use": 0,
-    "filenames/match-regex": 0,
-    "prettier/prettier": 0,
-    "i18n-text/no-en": 0,
-    "import/no-namespace": 0,
-    "no-unused-vars": 0,
-    "import/namespace": 0,
-    "no-constructor-return": 0,
-    "default-case-last": 0,
-    "no-undef": 0,
-    "import/named": 0,
-    "no-empty": ["error", {"allowEmptyCatch": true}],
-    "no-promise-executor-return": 0,
-    "github/no-then": 0,
-    "@typescript-eslint/ban-ts-comment": ["warn", {
-      "ts-ignore": "allow-with-description"
-    }],
-    "@typescript-eslint/explicit-module-boundary-types": 0,
-    "@typescript-eslint/require-await": "error",
-    "no-void": "off",
-    "@typescript-eslint/no-floating-promises": "error",
-    "@typescript-eslint/return-await": ["error", "always"],
-
-    "import/extensions": ["error", "always", {
-      "js": "always",
-      "mjs": "never"
-    }],
-    "import/no-useless-path-segments": ["error", {
-      "noUselessIndex": false
-    }],
-    "import/order": ["error", {
-      "alphabetize": {
-        "caseInsensitive": false,
-        "order": "asc"
-      },
-      "groups": [
-        "builtin",
-        "external",
-        "parent",
-        "sibling",
-        "index"
-      ],
-      "newlines-between": "always",
-      "pathGroups": [{
-        "group": "external",
-        "pattern": "@dataprocs/**",
-        "position": "after"
-      }],
-      "pathGroupsExcludedImportTypes": ["builtin"]
-    }],
-    "import/prefer-default-export": 0,
-    "unicorn/no-useless-undefined": 0,
-    "unicorn/no-array-for-each": 0,
-    "unicorn/prefer-spread": 0,
-    "unicorn/no-null": 0,
-    "unicorn/filename-case": 0,
-    "unicorn/prefer-dom-node-append": 0,
-    "unicorn/prevent-abbreviations": 0,
-    "unicorn/explicit-length-check": 0,
-    "unicorn/catch-error-name": 0,
-    "unicorn/prefer-dom-node-dataset": 0,
-    "unicorn/no-array-reduce": 0,
-    "unicorn/no-this-assignment": 0,
-    "unicorn/prefer-ternary": ["error", "only-single-line"],
-    "unicorn/no-empty-file": 0,
-    "unicorn/prefer-query-selector": 0,
-    "unicorn/prefer-dom-node-remove": 0,
-    "unicorn/no-for-loop": 0,
-    "jsdoc/newline-after-description": [
-      "warn",
-      "never"
-    ],
-    "jsdoc/no-undefined-types": 0,
-    "jsdoc/require-param-description": 0,
-    "jsdoc/require-property-description": 0,
-    "jsdoc/require-returns": 0,
-    "jsdoc/require-returns-description": 0,
-    "jsdoc/valid-types": 0,
-    "max-len": ["error", 120, 2, {
-      "ignoreComments": true,
-      "ignoreRegExpLiterals": true,
-      "ignoreStrings": true,
-      "ignoreTemplateLiterals": true,
-      "ignoreUrls": true
-    }],
-    "consistent-return": "warn",
-    "no-console": ["error", {
-      "allow": [
-        "warn",
-        "error",
-        "time",
-        "timeEnd"
-      ]
-    }],
-    "no-plusplus": ["off"],
-    "node/no-unsupported-features/es-syntax": ["off", {
-      "ignores": [],
-      "version": ">=14.0.0"
-    }],
-    "prefer-destructuring": ["error", {
-      "AssignmentExpression": {
-        "array": false,
-        "object": false
-      },
-      "VariableDeclarator": {
-        "array": false,
-        "object": true
-      }
-    }, {
-      "enforceForRenamedProperties": false
-    }],
-    "sort-imports": ["error", {
-      "ignoreDeclarationSort": true
-    }],
-    "spaced-comment": ["error", "always", {
-      "block": {
-        "balanced": true,
-        "exceptions": ["-", "+"],
-        "markers": ["=", "!", ":", "::"]
-      },
-      "line": {
-        "exceptions": ["-", "+"],
-        "markers": ["=", "!", "/"]
-      }
-    }]
-  },
-  "settings": {
-    "jsdoc": {
-      "preferredTypes": {
-        "array": "Array",
-        "object": "Object",
-        "object.": "Object<>",
-        "object<>": "Object<>",
-        "symbol": "Symbol"
-      },
-      "tagNamePreference": {
-        "augment": "extends",
-        "constant": "const",
-        "property": "prop",
-        "returns": "return"
-      }
-    },
-    "html/html-extensions": [
-      ".html",
-      ".eta"
-    ]
-  },
-  "overrides": [
-    {
-      "files": [ "*.cjs"],
-      "rules": {
-        "import/no-nodejs-modules": 0,
-        "@typescript-eslint/no-var-requires": 0
-      }
-    },
-    {
-      "files": ["**/*.eta"],
-      "processor": "eta/eta"
-    }
-  ]
-  
-}