aloha-vue 1.0.3 → 1.0.6

package/docs/package.json

@@ -11,7 +11,7 @@
     "build-css": "node-sass --include-path scss styles/styles.scss public/styles.css"
   },
   "dependencies": {
-    "aloha-css": "1.0.7",
+    "aloha-css": "1.0.8",
     "lodash-es": "^4.17.21",
     "vue": "3.2.31",
     "vue-router": "4.0.14",

package/docs/src/main.js

@@ -4,6 +4,7 @@ import store from "./store/index";
 import router from "./router/index";
 import i18nPlugin from "../../src/plugins/i18nPlugin";
 // import alohaPlugin from "../src/plugins/alohaPlugin";
+import AIconPlugin from "../../src/plugins/AIconPlugin";
 
 import de from "./i18n/de.json";
 import en from "./i18n/en.json";
@@ -23,6 +24,18 @@ const TRANSLATIONS = {
   ru: { ...ruGlobal, ...ru },
 };
 APP.use(i18nPlugin, TRANSLATIONS, "de");
+APP.use(AIconPlugin, {
+  Plus2: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 18 18"
+    height="18"
+    width="18"
+  >
+    <path
+      d="M 17.986481,14.773554 14.757239,17.986512 9.0000154,12.245611 3.2427918,17.986512 0.01353176,14.773554 9.0163185,5.770767 Z"
+    />
+  </svg>`,
+});
 // APP.use(alohaPlugin, {
 //   framework: "bootstrap",
 // });

package/docs/src/views/PageTable/PageTable.js

@@ -104,6 +104,49 @@ export default {
           callback: this.clickMe,
         },
       ],
+      tableActions: [
+        {
+          label: "Aloha1",
+          title: "Aloha1 Title",
+          isHidden: false,
+          callback: this.clickMe,
+          disabled: true,
+          type: "button",
+          class: "a_btn a_btn_primary",
+          icon: "Plus",
+        },
+        {
+          label: "Aloha2",
+          title: "Aloha2 Title",
+          callback: this.clickMe,
+          disabled: false,
+          class: "a_btn a_btn_secondary",
+        },
+        {
+          label: "Aloha link",
+          title: "Aloha link Title",
+          disabled: false,
+          class: "a_btn a_btn_secondary",
+          type: "link",
+          to: "/spinner",
+        },
+        {
+          label: "Aloha3",
+          title: "Aloha3 Title",
+          disabled: false,
+          type: "dropdown",
+          class: "a_btn a_btn_secondary",
+          children: [
+            {
+              label: "Aloha4",
+              title: "Aloha4 Title",
+              callback: this.clickMe,
+              disabled: false,
+            },
+          ],
+        },
+      ],
+      modelQuickSearch: "",
     };
   },
   created() {
@@ -132,7 +175,7 @@ export default {
       this.data = DATA;
     },
 
-    clickMe({ row, rowIndex }) {
+    clickMe({ row, rowIndex } = {}) {
       console.log("row, rowIndex", row, rowIndex);
     },
   },

package/docs/src/views/PageTable/PageTable.pug

@@ -6,9 +6,30 @@ div
     :is-loading-options="isLoadingOptions"
     label="Example table"
     :row-actions="rowActions"
+    :table-actions="tableActions"
+    preview="right"
+    :is-quick-search="true"
+    v-model:modelQuickSearch="modelQuickSearch"
     @change-columns-ordering="changeColumnsOrdering"
   )
     template(
       v-slot:slot1="vm"
     )
       pre {{ vm.column }}
+
+    template(
+      v-slot:tableDetailsLabel="vm"
+    )
+      span Details {{ vm.rowIndex }}
+
+    template(
+      v-slot:tableDetailsBody="vm"
+    )
+      pre {{ vm }}
+
+    template(
+      v-slot:tableActions
+    )
+      button.a_btn.a_btn_primary Click me
+
+  span modelQuickSearch: {{ modelQuickSearch }}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "author": "Ilia Brykin",
   "dependencies": {
     "@popperjs/core": "2.11.5",
-    "aloha-css": "1.0.6",
-    "lodash-es": "^4.17.21"
+    "aloha-css": "1.0.8",
+    "lodash-es": "^4.17.21",
+    "vue": "3.2.37"
   }
 }

package/src/AIcon/AIcon.js

@@ -1,3 +1,8 @@
+import {
+  h,
+  inject,
+} from "vue";
+
 import Aloha from "./Icons/Aloha";
 import AngleDown from "./Icons/AngleDown";
 import AngleLeft from "./Icons/AngleLeft";
@@ -24,66 +29,59 @@ import OptionHorizontal from "./Icons/OptionHorizontal";
 import OptionVertical from "./Icons/OptionVertical";
 import Plus from "./Icons/Plus";
 import Reset from "./Icons/Reset";
+import Search from "./Icons/Search";
 
 import {
-  h,
-} from "vue";
+  assign,
+} from "lodash-es";
 
 export default {
   name: "AIcon",
   props: {
     icon: {
       type: String,
-      required: false,
-    },
-    width: {
-      type: [Number, String],
-      default: 16,
-    },
-    height: {
-      type: [Number, String],
-      default: 16,
-    },
-    iconColor: {
-      type: String,
-      default: "currentColor",
-      required: false,
+      required: true,
     },
     ariLabel: {
       type: String,
       required: false,
+      default: undefined,
     },
   },
-  data() {
+  setup() {
+    const ICONS_PLUGIN = inject("icons", {});
+    const icons = assign({}, {
+      Aloha,
+      AngleDown,
+      AngleLeft,
+      AngleRight,
+      AngleUp,
+      ChevronDown,
+      ChevronLeft,
+      ChevronRight,
+      ChevronUp,
+      Cog,
+      Close,
+      Cross,
+      Dnd,
+      DoubleAngleDown,
+      DoubleAngleLeft,
+      DoubleAngleRight,
+      DoubleAngleUp,
+      EyeClose,
+      EyeOpen,
+      Lock,
+      Minus,
+      Ok,
+      OptionHorizontal,
+      OptionVertical,
+      Plus,
+      Reset,
+      Search,
+    }, ICONS_PLUGIN);
+
     return {
-      icons: {
-        Aloha,
-        AngleDown,
-        AngleLeft,
-        AngleRight,
-        AngleUp,
-        ChevronDown,
-        ChevronLeft,
-        ChevronRight,
-        ChevronUp,
-        Cog,
-        Close,
-        Cross,
-        Dnd,
-        DoubleAngleDown,
-        DoubleAngleLeft,
-        DoubleAngleRight,
-        DoubleAngleUp,
-        EyeClose,
-        EyeOpen,
-        Lock,
-        Minus,
-        Ok,
-        OptionHorizontal,
-        OptionVertical,
-        Reset,
-        Plus,
-      },
+      icons,
     };
   },
   computed: {
@@ -91,37 +89,20 @@ export default {
       return this.icons[this.icon];
     },
 
-    attributesSvgLocal() {
-      const ATTRIBUTES = {
-        viewBox: "0 0 18 18",
-        role: "presentation",
-        width: this.width,
-        height: this.height,
-        class: "a_icon__svg",
-      };
-      return ATTRIBUTES;
-    },
-
     attributesLocal() {
       const ATTRIBUTES = {
         class: "a_icon",
+        innerHTML: this.iconSvg,
       };
       if (this.ariLabel) {
         ATTRIBUTES["aria-label"] = this.ariLabel;
       } else {
-        ATTRIBUTES["aria-hidden"] = "true";
+        ATTRIBUTES.ariaHidden = true;
       }
       return ATTRIBUTES;
     },
   },
   render() {
-    return h("i", this.attributesLocal, [
-      h("svg", this.attributesSvgLocal, [
-        h("g", {
-          fill: this.iconColor,
-          innerHTML: this.iconSvg,
-        }),
-      ]),
-    ]);
+    return h("i", this.attributesLocal);
   },
 };

package/src/AIcon/Icons/Aloha.js

@@ -1,20 +1,27 @@
-export default `<g
-     transform="matrix(0.26617655,0,0,0.26617655,-33.607656,-85.223817)"
+export default `<svg
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 18 18"
+   height="18"
+   width="18"
+>
+  <g
+   transform="matrix(0.26617655,0,0,0.26617655,-33.607656,-85.223817)"
   >
     <path
-       style="fill:#35495e;fill-opacity:1;stroke:#ff0000;stroke-width:0;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none"
-       d="m 139.13004,365.87267 -4.53409,7.81862 h 51.05837 l -4.53409,-7.81862 z"
+      style="fill:#35495e;fill-opacity:1;stroke:#ff0000;stroke-width:0;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none"
+      d="m 139.13004,365.87267 -4.53409,7.81862 h 51.05837 l -4.53409,-7.81862 z"
     />
     <path
-       style="fill:#41b883;fill-opacity:1;stroke:#ff0000;stroke-width:0;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none"
-       d="m 134.59595,373.69129 -4.51704,7.7892 h 60.09245 l -4.51704,-7.7892 z"
+      style="fill:#41b883;fill-opacity:1;stroke:#ff0000;stroke-width:0;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none"
+      d="m 134.59595,373.69129 -4.51704,7.7892 h 60.09245 l -4.51704,-7.7892 z"
     />
     <path
-       style="fill:#41b883;fill-opacity:1;stroke:#ff0000;stroke-width:0;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none"
-       d="m 160.07266,329.49377 -16.90595,29.1543 -16.90594,29.15378 h 7.67291 l 13.03745,-22.48287 13.03745,-22.48236 13.03745,22.48236 13.03744,22.48287 h 7.80159 l -16.90594,-29.15378 z"
+      style="fill:#41b883;fill-opacity:1;stroke:#ff0000;stroke-width:0;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none"
+      d="m 160.07266,329.49377 -16.90595,29.1543 -16.90594,29.15378 h 7.67291 l 13.03745,-22.48287 13.03745,-22.48236 13.03745,22.48236 13.03744,22.48287 h 7.80159 l -16.90594,-29.15378 z"
     />
     <path
-       style="fill:#35495e;fill-opacity:1;stroke:#ff0000;stroke-width:0;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none"
-       d="m 160.00903,342.83634 -13.03745,22.48287 -13.03796,22.48286 h 8.03103 l 9.02632,-15.56546 9.02581,-15.56494 9.02632,15.56494 9.02581,15.56546 h 8.01501 l -13.03744,-22.48286 z"
+      style="fill:#35495e;fill-opacity:1;stroke:#ff0000;stroke-width:0;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none"
+      d="m 160.00903,342.83634 -13.03745,22.48287 -13.03796,22.48286 h 8.03103 l 9.02632,-15.56546 9.02581,-15.56494 9.02632,15.56494 9.02581,15.56546 h 8.01501 l -13.03744,-22.48286 z"
     />
-  </g>`;
+  </g>
+</svg>`;

package/src/AIcon/Icons/AngleDown.js

@@ -1,7 +1,14 @@
-export default `<g
-  transform="matrix(0.03156311,0,0,0.03156319,-1.3887768,-8.0260815)"
+export default `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 18 18"
+  height="18"
+  width="18"
 >
-  <path
-    d="m 614.286,420.571 q 0,7.429 -5.714,13.143 L 342.286,700 q -5.714,5.714 -13.143,5.714 -7.429,0 -13.143,-5.714 L 49.714,433.714 Q 44,428 44,420.571 q 0,-7.429 5.714,-13.143 l 28.571,-28.571 q 5.714,-5.714 13.143,-5.714 7.429,0 13.143,5.714 L 329.142,603.428 553.713,378.857 q 5.714,-5.714 13.143,-5.714 7.429,0 13.143,5.714 l 28.571,28.571 q 5.714,5.714 5.714,13.143 z"
-  />
-</g>`;
+  <g
+    transform="matrix(0.03156311,0,0,0.03156319,-1.3887768,-8.0260815)"
+  >
+    <path
+      d="m 614.286,420.571 q 0,7.429 -5.714,13.143 L 342.286,700 q -5.714,5.714 -13.143,5.714 -7.429,0 -13.143,-5.714 L 49.714,433.714 Q 44,428 44,420.571 q 0,-7.429 5.714,-13.143 l 28.571,-28.571 q 5.714,-5.714 13.143,-5.714 7.429,0 13.143,5.714 L 329.142,603.428 553.713,378.857 q 5.714,-5.714 13.143,-5.714 7.429,0 13.143,5.714 l 28.571,28.571 q 5.714,5.714 5.714,13.143 z"
+    />
+  </g>
+</svg>`;

package/src/AIcon/Icons/AngleLeft.js

@@ -1,7 +1,14 @@
-export default `<g
-  transform="matrix(0.03156311,0,0,0.03156311,2.9398546,-8.3145754)"
+export default `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 18 18"
+  height="18"
+  width="18"
 >
-  <path
-    d="m 358.286,310.857 q 0,7.429 -5.714,13.143 L 128.001,548.571 352.572,773.142 q 5.714,5.714 5.714,13.143 0,7.429 -5.714,13.143 l -28.571,28.571 q -5.714,5.714 -13.143,5.714 -7.429,0 -13.143,-5.714 L 31.429,561.713 q -5.714,-5.714 -5.714,-13.143 0,-7.429 5.714,-13.143 L 297.715,269.141 q 5.714,-5.714 13.143,-5.714 7.429,0 13.143,5.714 l 28.571,28.571 q 5.714,5.714 5.714,13.143 z"
-  />
-</g>`;
+  <g
+    transform="matrix(0.03156311,0,0,0.03156311,2.9398546,-8.3145754)"
+  >
+    <path
+      d="m 358.286,310.857 q 0,7.429 -5.714,13.143 L 128.001,548.571 352.572,773.142 q 5.714,5.714 5.714,13.143 0,7.429 -5.714,13.143 l -28.571,28.571 q -5.714,5.714 -13.143,5.714 -7.429,0 -13.143,-5.714 L 31.429,561.713 q -5.714,-5.714 -5.714,-13.143 0,-7.429 5.714,-13.143 L 297.715,269.141 q 5.714,-5.714 13.143,-5.714 7.429,0 13.143,5.714 l 28.571,28.571 q 5.714,5.714 5.714,13.143 z"
+    />
+  </g>
+</svg>`;

package/src/AIcon/Icons/AngleRight.js

@@ -1,7 +1,14 @@
-export default `<g
-  transform="matrix(0.03156322,0,0,0.03156322,3.5170168,-8.314699)"
+export default `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 18 18"
+  height="18"
+  width="18"
 >
-  <path
-    d="m 340,548.571 q 0,7.429 -5.714,13.143 L 68,828 q -5.714,5.714 -13.143,5.714 -7.429,0 -13.143,-5.714 L 13.143,799.429 q -5.714,-5.714 -5.714,-13.143 0,-7.429 5.714,-13.143 L 237.714,548.572 13.143,324.001 q -5.714,-5.714 -5.714,-13.143 0,-7.429 5.714,-13.143 l 28.571,-28.571 q 5.714,-5.714 13.143,-5.714 7.429,0 13.143,5.714 L 334.286,535.43 Q 340,541.144 340,548.573 Z"
-  />
-</g>`;
+  <g
+    transform="matrix(0.03156322,0,0,0.03156322,3.5170168,-8.314699)"
+  >
+    <path
+      d="m 340,548.571 q 0,7.429 -5.714,13.143 L 68,828 q -5.714,5.714 -13.143,5.714 -7.429,0 -13.143,-5.714 L 13.143,799.429 q -5.714,-5.714 -5.714,-13.143 0,-7.429 5.714,-13.143 L 237.714,548.572 13.143,324.001 q -5.714,-5.714 -5.714,-13.143 0,-7.429 5.714,-13.143 l 28.571,-28.571 q 5.714,-5.714 13.143,-5.714 7.429,0 13.143,5.714 L 334.286,535.43 Q 340,541.144 340,548.573 Z"
+    />
+  </g>
+</svg>`;

package/src/AIcon/Icons/AngleUp.js

@@ -1,7 +1,14 @@
-export default `<g
-  transform="matrix(0.03156311,0,0,0.03156311,-1.38884,-8.603185)"
+export default `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 18 18"
+  height="18"
+  width="18"
 >
-  <path
-    d="m 614.286,676.571 q 0,7.429 -5.714,13.143 l -28.571,28.571 q -5.714,5.714 -13.143,5.714 -7.429,0 -13.143,-5.714 L 329.144,493.714 104.573,718.285 q -5.714,5.714 -13.143,5.714 -7.429,0 -13.143,-5.714 L 49.716,689.714 Q 44.002,684 44.002,676.571 q 0,-7.429 5.714,-13.143 L 316.002,397.142 q 5.714,-5.714 13.143,-5.714 7.429,0 13.143,5.714 l 266.286,266.286 q 5.714,5.714 5.714,13.143 z"
-  />
-</g>`;
+  <g
+    transform="matrix(0.03156311,0,0,0.03156311,-1.38884,-8.603185)"
+  >
+    <path
+      d="m 614.286,676.571 q 0,7.429 -5.714,13.143 l -28.571,28.571 q -5.714,5.714 -13.143,5.714 -7.429,0 -13.143,-5.714 L 329.144,493.714 104.573,718.285 q -5.714,5.714 -13.143,5.714 -7.429,0 -13.143,-5.714 L 49.716,689.714 Q 44.002,684 44.002,676.571 q 0,-7.429 5.714,-13.143 L 316.002,397.142 q 5.714,-5.714 13.143,-5.714 7.429,0 13.143,5.714 l 266.286,266.286 q 5.714,5.714 5.714,13.143 z"
+    />
+  </g>
+</svg>`;

package/src/AIcon/Icons/ChevronDown.js

@@ -1,3 +1,10 @@
-export default `<path
+export default `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 18 18"
+  height="18"
+  width="18"
+>
+  <path
     d="m 0.01351943,8.9836828 3.22924197,-3.21295 5.7572232,5.7409002 5.7572244,-5.7409002 3.22926,3.21295 -9.0027874,9.0027902 z"
-/>`;
+  />
+</svg>`;

package/src/AIcon/Icons/ChevronLeft.js

@@ -1 +1,10 @@
-export default `<path d="M 9.0163153,0.01351902 12.229272,3.2427606 6.4883717,8.999984 12.229272,14.757207 9.0163153,17.986468 0.01352691,8.9836807 Z"></path>`;
+export default `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="18"
+  height="18"
+  viewBox="0 0 18 18"
+>
+  <path
+    d="M 9.0163139,0.01351944 12.229272,3.2427614 6.4883699,8.9999844 12.229272,14.757208 9.0163139,17.986468 0.01352691,8.9836814 Z"
+  />
+</svg>`;

package/src/AIcon/Icons/ChevronRight.js

@@ -1,3 +1,10 @@
-export default `<path
-    d="M 3.226445,17.986481 0.01348804,14.757239 5.754389,9.0000159 0.01348804,3.2427919 3.226445,0.01353188 12.229233,9.0163189 Z"
-/>`;
+export default `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 18 18"
+  height="18"
+  width="18"
+>
+  <path
+     d="M 3.226445,17.986481 0.01348804,14.757239 5.754389,9.0000159 0.01348804,3.2427919 3.226445,0.01353188 12.229233,9.0163189 Z"
+  />
+</svg>`;

package/src/AIcon/Icons/ChevronUp.js

@@ -1,3 +1,10 @@
-export default `<path
+export default `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 18 18"
+  height="18"
+  width="18"
+>
+  <path
     d="M 17.986481,14.773554 14.757239,17.986512 9.0000154,12.245611 3.2427918,17.986512 0.01353176,14.773554 9.0163185,5.770767 Z"
-/>`;
+  />
+</svg>`;

package/src/AIcon/Icons/Close.js

@@ -1,16 +1,23 @@
-export default `<g
-     transform="matrix(0.79646021,-0.79646021,0.79646021,0.79646021,-5.3362832,9.0000003)"
+export default `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 18 18"
+  height="18"
+  width="18"
+>
+  <g
+    transform="matrix(0.79646021,-0.79646021,0.79646021,0.79646021,-5.3362832,9.0000003)"
   >
     <rect
-       width="4.599999"
-       height="18"
-       x="6.7000003"
-       y="-5e-07"
+      width="4.599999"
+      height="18"
+      x="6.7000003"
+      y="-5e-07"
     />
     <rect
-       width="17.999996"
-       height="4.5999999"
-       x="5e-07"
-       y="6.6999998"
+      width="17.999996"
+      height="4.5999999"
+      x="5e-07"
+      y="6.6999998"
     />
-  </g>`;
+  </g>
+</svg>`;

package/src/AIcon/Icons/Cog.js

@@ -1,6 +1,13 @@
-export default `<g
-  transform="matrix(0.01757813,0,0,0.01759352,0,-0.00784671)">
-  <path
-    d="m 512,0.446 q 29.435,0 66.007,4.46 l 33.896,135.582 4.46,0.892 q 43.707,12.488 83.846,34.787 l 4.46,1.784 119.526,-71.359 q 54.411,42.815 92.767,93.658 l -71.359,119.526 2.676,4.46 q 22.299,39.248 34.787,82.954 l 0.892,5.352 135.582,33.896 q 4.46,38.355 4.46,65.114 0,30.327 -4.46,66.007 l -135.582,33.896 -0.892,5.352 q -13.38,43.707 -34.787,82.954 l -2.676,4.46 71.359,119.526 q -42.815,54.411 -92.767,93.658 l -119.526,-72.251 -4.46,2.676 q -39.248,22.299 -83.846,34.787 l -4.46,1.784 -33.896,134.689 q -38.355,4.46 -66.007,4.46 -29.435,0 -66.007,-4.46 l -33.896,-134.689 -4.46,-1.784 Q 363.93,870.129 323.791,847.83 l -4.46,-2.676 -119.526,72.251 Q 146.286,874.59 107.038,823.747 l 71.359,-119.526 -2.676,-4.46 Q 153.422,659.622 141.825,616.807 L 140.041,611.455 5.352,577.559 Q 0,540.096 0,511.552 0,482.117 5.352,446.438 l 134.689,-33.896 1.784,-5.352 q 11.595,-42.815 33.896,-82.954 l 2.676,-4.46 -71.359,-119.526 q 41.924,-54.411 93.658,-93.658 l 118.633,71.359 4.46,-1.784 q 40.139,-22.299 83.846,-34.787 l 4.46,-0.892 33.896,-135.582 q 38.355,-4.46 66.007,-4.46 z m 0,320.222 q -79.387,0 -135.582,56.195 -56.195,56.195 -56.195,135.135 0,78.94 56.195,135.135 56.195,56.195 135.582,56.195 79.387,0 135.582,-56.195 56.195,-56.195 56.195,-135.135 0,-78.94 -56.195,-135.135 Q 591.387,320.668 512,320.668 Z"
-  />
-</g>`;
+export default `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="18"
+  height="18"
+  viewBox="0 0 18 18"
+>
+  <g
+    transform="matrix(0.01757813,0,0,0.01759352,0,-0.00784671)">
+    <path
+      d="m 512,0.446 q 29.435,0 66.007,4.46 l 33.896,135.582 4.46,0.892 q 43.707,12.488 83.846,34.787 l 4.46,1.784 119.526,-71.359 q 54.411,42.815 92.767,93.658 l -71.359,119.526 2.676,4.46 q 22.299,39.248 34.787,82.954 l 0.892,5.352 135.582,33.896 q 4.46,38.355 4.46,65.114 0,30.327 -4.46,66.007 l -135.582,33.896 -0.892,5.352 q -13.38,43.707 -34.787,82.954 l -2.676,4.46 71.359,119.526 q -42.815,54.411 -92.767,93.658 l -119.526,-72.251 -4.46,2.676 q -39.248,22.299 -83.846,34.787 l -4.46,1.784 -33.896,134.689 q -38.355,4.46 -66.007,4.46 -29.435,0 -66.007,-4.46 l -33.896,-134.689 -4.46,-1.784 Q 363.93,870.129 323.791,847.83 l -4.46,-2.676 -119.526,72.251 Q 146.286,874.59 107.038,823.747 l 71.359,-119.526 -2.676,-4.46 Q 153.422,659.622 141.825,616.807 L 140.041,611.455 5.352,577.559 Q 0,540.096 0,511.552 0,482.117 5.352,446.438 l 134.689,-33.896 1.784,-5.352 q 11.595,-42.815 33.896,-82.954 l 2.676,-4.46 -71.359,-119.526 q 41.924,-54.411 93.658,-93.658 l 118.633,71.359 4.46,-1.784 q 40.139,-22.299 83.846,-34.787 l 4.46,-0.892 33.896,-135.582 q 38.355,-4.46 66.007,-4.46 z m 0,320.222 q -79.387,0 -135.582,56.195 -56.195,56.195 -56.195,135.135 0,78.94 56.195,135.135 56.195,56.195 135.582,56.195 79.387,0 135.582,-56.195 56.195,-56.195 56.195,-135.135 0,-78.94 -56.195,-135.135 Q 591.387,320.668 512,320.668 Z"
+    />
+  </g>
+</svg>`;

package/src/AIcon/Icons/Cross.js

@@ -1,14 +1,21 @@
-export default `<g>
+export default `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 18 18"
+  height="18"
+  width="18"
+>
+  <g>
     <rect
-       width="4.599999"
-       height="18"
-       x="6.7000003"
-       y="-5e-07"
+      width="4.599999"
+      height="18"
+      x="6.7000003"
+      y="-5e-07"
     />
     <rect
-       width="17.999996"
-       height="4.5999999"
-       x="5e-07"
-       y="6.6999998"
+      width="17.999996"
+      height="4.5999999"
+      x="5e-07"
+      y="6.6999998"
     />
-  </g>`;
+  </g>
+</svg>`;

package/src/AIcon/Icons/Dnd.js

@@ -1,30 +1,37 @@
-export default `<circle
-  cx="5.625"
-  cy="2.25"
-  r="2.25"
-/>
-<circle
-  cx="5.625"
-  cy="9"
-  r="2.25"
-/>
-<circle
-  cx="5.625"
-  cy="15.75"
-  r="2.25"
-/>
-<circle
-  cx="12.375"
-  cy="2.25"
-  r="2.25"
-/>
-<circle
-  cx="12.375"
-  cy="9"
-  r="2.25"
-/>
-<circle
-  cx="12.375"
-  cy="15.750003"
-  r="2.25"
-/>`;
+export default `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="18"
+  height="18"
+  viewBox="0 0 18 18"
+>
+  <circle
+    cx="5.625"
+    cy="2.25"
+    r="2.25"
+  />
+  <circle
+    cx="5.625"
+    cy="9"
+    r="2.25"
+  />
+  <circle
+    cx="5.625"
+    cy="15.75"
+    r="2.25"
+  />
+  <circle
+    cx="12.375"
+    cy="2.25"
+    r="2.25"
+  />
+  <circle
+    cx="12.375"
+    cy="9"
+    r="2.25"
+  />
+  <circle
+    cx="12.375"
+    cy="15.750003"
+    r="2.25"
+  />
+</svg>`;