@matdata/yasr 5.10.0 → 5.11.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasr",
   "description": "Yet Another SPARQL Resultset GUI",
-  "version": "5.10.0",
+  "version": "5.11.0",
   "main": "build/yasr.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",
@@ -24,7 +24,7 @@
     "directory": "packages/yasr"
   },
   "dependencies": {
-    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@json2csv/plainjs": "^7.0.4",
     "@matdata/yasgui-utils": "^4.6.1",
     "@matdata/yasqe": "^4.6.1",

package/src/index.ts

@@ -2,20 +2,11 @@ import { EventEmitter } from "events";
 import { merge, filter, mapValues, uniqueId } from "lodash-es";
 import getDefaults from "./defaults";
 import type { Plugin } from "./plugins";
-import {
-  Storage as YStorage,
-  drawFontAwesomeIconAsSvg,
-  drawSvgStringAsElement,
-  removeClass,
-  addClass,
-  hasClass,
-} from "@matdata/yasgui-utils";
+import { Storage as YStorage, removeClass, addClass, hasClass } from "@matdata/yasgui-utils";
 import Parser from "./parsers";
 export { default as Parser } from "./parsers";
 import { addScript, addCss, sanitize } from "./helpers";
-import * as faDownload from "@fortawesome/free-solid-svg-icons/faDownload";
-import * as faQuestionCircle from "@fortawesome/free-solid-svg-icons/faQuestionCircle";
-import * as imgs from "./imgs";
+
 import "./main.scss";
 
 export interface PersistentConfig {
@@ -374,7 +365,8 @@ export class Yasr extends EventEmitter {
     this.downloadBtn.setAttribute("aria-label", "Download Results");
     this.downloadBtn.setAttribute("tabindex", "0"); // anchor elements with no href are not automatically included in the tabindex
     this.downloadBtn.setAttribute("role", "button");
-    const iconEl = drawSvgStringAsElement(drawFontAwesomeIconAsSvg(faDownload));
+    const iconEl = document.createElement("i");
+    addClass(iconEl, "fas", "fa-download");
     iconEl.setAttribute("aria-hidden", "true");
     this.downloadBtn.appendChild(iconEl);
     this.downloadBtn.addEventListener("click", () => {
@@ -455,12 +447,16 @@ export class Yasr extends EventEmitter {
     this.fullscreenBtn.setAttribute("tabindex", "0");
     this.fullscreenBtn.setAttribute("role", "button");
 
-    const fullscreenIcon = drawSvgStringAsElement(imgs.fullscreen);
+    const fullscreenIcon = document.createElement("i");
+    addClass(fullscreenIcon, "fas");
+    addClass(fullscreenIcon, "fa-expand");
     addClass(fullscreenIcon, "fullscreenIcon");
     fullscreenIcon.setAttribute("aria-hidden", "true");
     this.fullscreenBtn.appendChild(fullscreenIcon);
 
-    const fullscreenExitIcon = drawSvgStringAsElement(imgs.fullscreenExit);
+    const fullscreenExitIcon = document.createElement("i");
+    addClass(fullscreenExitIcon, "fas");
+    addClass(fullscreenExitIcon, "fa-compress");
     addClass(fullscreenExitIcon, "fullscreenExitIcon");
     fullscreenExitIcon.setAttribute("aria-hidden", "true");
     this.fullscreenBtn.appendChild(fullscreenExitIcon);
@@ -520,7 +516,9 @@ export class Yasr extends EventEmitter {
   private drawDocumentationButton() {
     this.documentationLink = document.createElement("a");
     addClass(this.documentationLink, "yasr_btn", "yasr_external_ref_btn");
-    this.documentationLink.appendChild(drawSvgStringAsElement(drawFontAwesomeIconAsSvg(faQuestionCircle)));
+    const icon = document.createElement("i");
+    addClass(icon, "fas", "fa-circle-question");
+    this.documentationLink.appendChild(icon);
     this.documentationLink.href = "https://docs.triply.cc/yasgui/";
     this.documentationLink.target = "_blank";
     this.documentationLink.rel = "noopener noreferrer";

package/src/main.scss

@@ -1,4 +1,6 @@
 @use "scss/variables.scss";
+@import "@fortawesome/fontawesome-free/css/fontawesome.css";
+@import "@fortawesome/fontawesome-free/css/solid.css";
 
 .yasr {
   display: flex;
@@ -14,17 +16,12 @@
   .yasr_btn {
     border: none;
     background: inherit;
-  }
-
-  .svgImg {
     display: flex;
-    flex-direction: row;
-    svg {
-      max-width: 100%;
-      max-height: 100%;
-      width: 15px;
-      height: 15px;
-      align-self: center;
+    align-items: center;
+    justify-content: center;
+
+    i {
+      font-size: 16px;
     }
   }
 
@@ -36,10 +33,6 @@
       color: inherit;
       text-decoration-color: inherit;
     }
-    .svgImg svg {
-      width: 18px;
-      height: 18px;
-    }
   }
 
   a {
@@ -174,15 +167,15 @@
   .yasr_fullscreenButton {
     border: none;
     background: none;
-
-    svg {
-      height: 20px;
-      width: 20px;
-    }
+    color: var(--yasgui-button-text, #505050);
 
     .fullscreenExitIcon {
       display: none;
     }
+
+    &:hover {
+      color: var(--yasgui-button-hover, #337ab7);
+    }
   }
 
   &.fullscreen {

package/src/plugins/boolean/index.scss

@@ -3,9 +3,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    svg {
-      margin-bottom: -10px;
-      margin-right: 7px;
+    i {
+      font-size: 30px;
+      margin-right: 12px;
     }
   }
 }

package/src/plugins/boolean/index.ts

@@ -5,11 +5,6 @@ import Yasr from "../../";
 import { Plugin } from "../";
 import "./index.scss";
 export interface PluginConfig {}
-import { drawSvgStringAsElement } from "@matdata/yasgui-utils";
-const cross =
-  '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="30" height="30" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g><path d="M83.288,88.13c-2.114,2.112-5.575,2.112-7.689,0L53.659,66.188c-2.114-2.112-5.573-2.112-7.687,0L24.251,87.907 c-2.113,2.114-5.571,2.114-7.686,0l-4.693-4.691c-2.114-2.114-2.114-5.573,0-7.688l21.719-21.721c2.113-2.114,2.113-5.573,0-7.686 L11.872,24.4c-2.114-2.113-2.114-5.571,0-7.686l4.842-4.842c2.113-2.114,5.571-2.114,7.686,0L46.12,33.591 c2.114,2.114,5.572,2.114,7.688,0l21.721-21.719c2.114-2.114,5.573-2.114,7.687,0l4.695,4.695c2.111,2.113,2.111,5.571-0.003,7.686 L66.188,45.973c-2.112,2.114-2.112,5.573,0,7.686L88.13,75.602c2.112,2.111,2.112,5.572,0,7.687L83.288,88.13z"/></g></svg>';
-const check =
-  '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="30" height="30" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M14.301,49.982l22.606,17.047L84.361,4.903c2.614-3.733,7.76-4.64,11.493-2.026l0.627,0.462 c3.732,2.614,4.64,7.758,2.025,11.492l-51.783,79.77c-1.955,2.791-3.896,3.762-7.301,3.988c-3.405,0.225-5.464-1.039-7.508-3.084 L2.447,61.814c-3.263-3.262-3.263-8.553,0-11.814l0.041-0.019C5.75,46.718,11.039,46.718,14.301,49.982z"/></svg>';
 
 export default class Boolean implements Plugin<PluginConfig> {
   private yasr: Yasr;
@@ -23,7 +18,9 @@ export default class Boolean implements Plugin<PluginConfig> {
     el.className = "booleanResult";
 
     const boolVal = this.yasr.results?.getBoolean();
-    el.appendChild(drawSvgStringAsElement(boolVal ? check : cross));
+    const icon = document.createElement("i");
+    icon.className = boolVal ? "fas fa-check" : "fas fa-xmark";
+    el.appendChild(icon);
     const textEl = document.createElement("span");
     textEl.textContent = boolVal ? "True" : "False";
     el.appendChild(textEl);

package/src/plugins/response/index.scss

@@ -44,19 +44,12 @@
       color: #337ab7;
       padding: 10px;
       margin: 10px;
-      svg {
+      i {
         margin-left: 0.5rem;
-        fill: #337ab7;
-        color: #337ab7;
       }
       &:hover {
         color: #255681;
         border-color: #337ab7;
-        fill: #255681;
-        svg {
-          color: #255681;
-          fill: #255681;
-        }
       }
     }
   }

package/src/plugins/response/index.ts

@@ -16,10 +16,8 @@ import "codemirror/mode/xml/xml.js";
 import "codemirror/mode/javascript/javascript.js";
 import "codemirror/lib/codemirror.css";
 import "codemirror/theme/material-palenight.css";
-import { drawSvgStringAsElement, addClass, removeClass, drawFontAwesomeIconAsSvg } from "@matdata/yasgui-utils";
-import * as faAlignIcon from "@fortawesome/free-solid-svg-icons/faAlignLeft";
+import { addClass, removeClass } from "@matdata/yasgui-utils";
 import { DeepReadonly } from "ts-essentials";
-import * as imgs from "../../imgs";
 
 export interface PluginConfig {
   maxLines: number;
@@ -51,7 +49,9 @@ export default class Response implements Plugin<PluginConfig> {
     return true;
   }
   public getIcon() {
-    return drawSvgStringAsElement(drawFontAwesomeIconAsSvg(faAlignIcon));
+    const icon = document.createElement("i");
+    icon.className = "fas fa-align-left";
+    return icon;
   }
   download(filename?: string) {
     if (!this.yasr.results) return;
@@ -146,7 +146,10 @@ export default class Response implements Plugin<PluginConfig> {
     const text = document.createElement("span");
     text.innerText = "Download result";
     downloadButton.appendChild(text);
-    downloadButton.appendChild(drawSvgStringAsElement(imgs.download));
+    const downloadIcon = document.createElement("i");
+    addClass(downloadIcon, "fas");
+    addClass(downloadIcon, "fa-download");
+    downloadButton.appendChild(downloadIcon);
     downloadButton.addEventListener("click", () => this.yasr.download());
     downloadButton.addEventListener("keydown", (event) => {
       if (event.code === "Space" || event.code === "Enter") this.yasr.download();

package/build/ts/src/imgs.d.ts

@@ -1,4 +0,0 @@
-export declare var download: string;
-export declare var pivot: string;
-export declare var fullscreen: string;
-export declare var fullscreenExit: string;

package/build/ts/src/imgs.js

@@ -1,5 +0,0 @@
-export var download = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" width="100%" height="100%" viewBox="0 0 100 100" xml:space="preserve"><g id="Captions"/><g id="Your_Icon"><path  d="M88,84v-2c0-2.961-0.859-4-4-4H16c-2.961,0-4,0.98-4,4v2c0,3.102,1.039,4,4,4h68 C87.02,88,88,87.039,88,84z M58,12H42c-5,0-6,0.941-6,6v22H16l34,34l34-34H64V18C64,12.941,62.939,12,58,12z"/></g></svg>';
-export var pivot = `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="100%" width="100%" version="1.1" y="0px" x="0px" viewBox="-949 951 122.65 124.00456"><switch transform="matrix(-1 0 0 1 -1741 23.496)"><foreignObject y="0" x="0" requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" width="1" height="1"/><g transform="matrix(.68779 .053686 -.048647 .75904 -208.42 303.24)"><path d="m-851.8 1025.3c-0.3-0.7-0.8-1.2-1.4-1.6l-28.9-18.3c-2.6-1.6-5.8 0.7-5.1 3.6l2.3 10.1c-17.7-0.4-32-14.6-32.5-32.3l10 2.3c2.9 0.7 5.2-2.5 3.6-5.1l-18.3-28.9c-0.9-1.4-2.6-2-4.2-1.3-0.7 0.3-1.2 0.8-1.6 1.4l-18.3 28.9c-1.6 2.6 0.7 5.8 3.6 5.1l10.1-2.3c0.5 25.9 21.5 46.9 47.5 47.3l-2.3 10c-0.7 2.9 2.5 5.2 5.1 3.6l28.9-18.3c1.6-0.8 2.2-2.6 1.5-4.2z"/></g><g><rect transform="scale(-1,1)" height="182.73" width="58.263" y="943.58" x="789.91"/><path d="m-555.88 62.924v-374.47h1252.1v748.94h-1252.1zm596.4 34.428c1.3908-1.3908 1.3477-2.0517-0.52029-7.9711-0.8688-2.7531-1.5838-5.0324-1.589-5.0651-0.0053-0.03273 1.2924-0.21249 2.8835-0.3995 6.1211-0.71941 14.098-3.8308 19.883-7.7551 12.823-8.6993 21.186-24.002 21.186-38.765 0-3.59 0.04131-3.7083 1.1917-3.425 0.65546 0.16137 3.3047 0.59645 5.8872 0.96682l4.6954 0.67342 1.3092-1.522c0.813-0.945 1.224-1.965 1.085-2.692-0.363-1.901-21.135-29.783-22.678-30.441-2.901-1.2375-3.406-0.57737-12.545 16.409-4.7338 8.7985-8.607 16.462-8.607 17.031 0 1.1765 2.2399 3.6338 3.3124 3.6338 0.39179 0 2.9648-0.71083 5.718-1.5796 2.7531-0.86879 5.0652-1.5838 5.138-1.589 0.36716-0.02595 0.04608 3.5333-0.65244 7.2269-2.3628 12.497-12.327 22.931-24.781 25.95-1.9718 0.47792-3.7039 0.75004-3.8492 0.6047-0.14534-0.14533 0.12002-2.6906 0.58972-5.6561 0.78639-4.9651 0.78618-5.4954-0.0053-6.6999-0.63994-0.98013-1.3213-1.308-2.7159-1.308-1.5863 0-3.9896 1.5653-16.275 10.6-15.151 11.143-16.136 12.125-14.661 14.622 0.9789 1.657 31.34 18.146 33.483 18.184 0.80111 0.01425 1.9333-0.45076 2.5159-1.0334z" transform="matrix(-1,0,0,1,-849.24,951)"/><rect transform="scale(-1,1)" height="134" width="5.8263" y="926.47" x="830.3"/><rect transform="matrix(0,1,1,0,0,0)" height="134" width="5.8263" y="-925.77" x="961.98"/></g></switch><rect height="122.65" width="11.491" y="951" x="-915.98" stroke-width="1.2986"/><rect transform="rotate(90)" height="122.65" width="11.491" y="826.35" x="985.27" stroke-width="1.2986"/></svg>`;
-export var fullscreen = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
-export var fullscreenExit = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>';
-//# sourceMappingURL=imgs.js.map

package/build/ts/src/imgs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"imgs.js","sourceRoot":"","sources":["../../../../../packages/yasr/src/imgs.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAI,QAAQ,GACjB,8YAA8Y,CAAC;AACjZ,MAAM,CAAC,IAAI,KAAK,GAAG,qyEAAqyE,CAAC;AACzzE,MAAM,CAAC,IAAI,UAAU,GACnB,8JAA8J,CAAC;AACjK,MAAM,CAAC,IAAI,cAAc,GACvB,6JAA6J,CAAC"}

package/src/imgs.ts

@@ -1,7 +0,0 @@
-export var download =
-  '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" width="100%" height="100%" viewBox="0 0 100 100" xml:space="preserve"><g id="Captions"/><g id="Your_Icon"><path  d="M88,84v-2c0-2.961-0.859-4-4-4H16c-2.961,0-4,0.98-4,4v2c0,3.102,1.039,4,4,4h68 C87.02,88,88,87.039,88,84z M58,12H42c-5,0-6,0.941-6,6v22H16l34,34l34-34H64V18C64,12.941,62.939,12,58,12z"/></g></svg>';
-export var pivot = `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="100%" width="100%" version="1.1" y="0px" x="0px" viewBox="-949 951 122.65 124.00456"><switch transform="matrix(-1 0 0 1 -1741 23.496)"><foreignObject y="0" x="0" requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" width="1" height="1"/><g transform="matrix(.68779 .053686 -.048647 .75904 -208.42 303.24)"><path d="m-851.8 1025.3c-0.3-0.7-0.8-1.2-1.4-1.6l-28.9-18.3c-2.6-1.6-5.8 0.7-5.1 3.6l2.3 10.1c-17.7-0.4-32-14.6-32.5-32.3l10 2.3c2.9 0.7 5.2-2.5 3.6-5.1l-18.3-28.9c-0.9-1.4-2.6-2-4.2-1.3-0.7 0.3-1.2 0.8-1.6 1.4l-18.3 28.9c-1.6 2.6 0.7 5.8 3.6 5.1l10.1-2.3c0.5 25.9 21.5 46.9 47.5 47.3l-2.3 10c-0.7 2.9 2.5 5.2 5.1 3.6l28.9-18.3c1.6-0.8 2.2-2.6 1.5-4.2z"/></g><g><rect transform="scale(-1,1)" height="182.73" width="58.263" y="943.58" x="789.91"/><path d="m-555.88 62.924v-374.47h1252.1v748.94h-1252.1zm596.4 34.428c1.3908-1.3908 1.3477-2.0517-0.52029-7.9711-0.8688-2.7531-1.5838-5.0324-1.589-5.0651-0.0053-0.03273 1.2924-0.21249 2.8835-0.3995 6.1211-0.71941 14.098-3.8308 19.883-7.7551 12.823-8.6993 21.186-24.002 21.186-38.765 0-3.59 0.04131-3.7083 1.1917-3.425 0.65546 0.16137 3.3047 0.59645 5.8872 0.96682l4.6954 0.67342 1.3092-1.522c0.813-0.945 1.224-1.965 1.085-2.692-0.363-1.901-21.135-29.783-22.678-30.441-2.901-1.2375-3.406-0.57737-12.545 16.409-4.7338 8.7985-8.607 16.462-8.607 17.031 0 1.1765 2.2399 3.6338 3.3124 3.6338 0.39179 0 2.9648-0.71083 5.718-1.5796 2.7531-0.86879 5.0652-1.5838 5.138-1.589 0.36716-0.02595 0.04608 3.5333-0.65244 7.2269-2.3628 12.497-12.327 22.931-24.781 25.95-1.9718 0.47792-3.7039 0.75004-3.8492 0.6047-0.14534-0.14533 0.12002-2.6906 0.58972-5.6561 0.78639-4.9651 0.78618-5.4954-0.0053-6.6999-0.63994-0.98013-1.3213-1.308-2.7159-1.308-1.5863 0-3.9896 1.5653-16.275 10.6-15.151 11.143-16.136 12.125-14.661 14.622 0.9789 1.657 31.34 18.146 33.483 18.184 0.80111 0.01425 1.9333-0.45076 2.5159-1.0334z" transform="matrix(-1,0,0,1,-849.24,951)"/><rect transform="scale(-1,1)" height="134" width="5.8263" y="926.47" x="830.3"/><rect transform="matrix(0,1,1,0,0,0)" height="134" width="5.8263" y="-925.77" x="961.98"/></g></switch><rect height="122.65" width="11.491" y="951" x="-915.98" stroke-width="1.2986"/><rect transform="rotate(90)" height="122.65" width="11.491" y="826.35" x="985.27" stroke-width="1.2986"/></svg>`;
-export var fullscreen =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
-export var fullscreenExit =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>';