@aotearoan/neon 7.3.1-beta.1 → 7.3.3-beta.1

package/README.md

@@ -1,5 +1,3 @@
-<img src="./logo.png">
-
 ![GitHub package.json version](https://img.shields.io/github/package-json/v/aotearoan/neon)
 ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@aotearoan/neon)
 ![GitHub last commit](https://img.shields.io/github/last-commit/aotearoan/neon)
@@ -23,47 +21,44 @@ or yarn:
 
 Import components and supporting classes like so:
 <pre>
-import { Component, Vue } from 'vue-property-decorator';
-import { NeonLogo } from '@aotearoan/neon';
+import { NeonButton } from '@aotearoan/neon';
 
-@Component({
+export default defineComponent({
+  name: 'SomeComponent',
   components: {
-    NeonLogo,
+    NeonButton,
   },
-})
-export default class App extends Vue {}
+  ...
+});
 </pre>
 
 ### SASS
 
-<p>To use a theme without any customization simply import the basic theme file</p>
+To import the theme:
 <pre>
-@use '~@aotearoan/neon/theme';
+@use '@aotearoan/neon/theme';
 </pre>
-<p>If, however you would like to override/customize the theme then you need to include the following:</p>
+
+Alternatively the theme can be imported with a list of used components to minimise the final package size:
 <pre>
-.app {
-  &.neon {
-    // override colors, palettes and other basic variables here BEFORE importing the theme, e.g. $neon-color-primary: #bada55
-    @use '~@aotearoan/neon/theme';
-    // include custom app SASS here (you can use neon's defined variables, mixins and functions)
-    &.neon-mode--dark {
-      // override dark mode specific variables here, e.g. $neon-border-color: #bada55
-      @use '~@aotearoan/neon/theme/dark';
-      // include custom app dark mode SASS here (you can use neon's defined variables, mixins and functions)
-    }
-    &.neon-mode--light {
-      // override light mode specific variables here, e.g. $neon-border-color: #bada55
-      @use '~@aotearoan/neon/theme/light';
-      // include custom app light mode SASS here (you can use neon's defined variables, mixins and functions)
-    }
-  }
-}
-</pre>
+@use '@aotearoan/neon/theme' with (
+  $neon-components: (
+      NeonAlert,
+      NeonButton,
+      NeonCard,
+      NeonCardBody,
+      NeonCardFooter,
+      NeonCardHeader,
+      NeonDrawer,
+  ),
+);</pre>
+
+### HTML
 
-Finally, the theme and mode (light/dark) need to be set on the document:
-<pre>&lt;html class="app neon neon-mode--dark"&gt;</pre>
+Add the necessary _app_ & _Neon_ styles to the HTML element as well as the light/dark mode, e.g.to set dark mode by
+default:
 
-[![Stargazers repo roster for @aotearoan/neon](https://reporoster.com/stars/aotearoan/neon)](https://github.com/aotearoan/neon/stargazers)
+<pre>&lt;html class="app neon neon-mode--dark"></pre>
+For more information on dynamically changing the mode
+see [Dark mode](https://aotearoan.github.io/neon/design/theming#dark-mode).
 
-[![Forkers repo roster for @aotearoan/neon](https://reporoster.com/forks/aotearoan/neon)](https://github.com/aotearoan/neon/network/members)

package/dist/common/icons/feather.js

@@ -0,0 +1,2 @@
+var feather = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor"\n     stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="neon-svg--stroke">\n    <path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path>\n    <line x1="16" y1="8" x2="2" y2="22"></line>\n    <line x1="17.5" y1="15" x2="9" y2="15"></line>\n</svg>\n';
+export { feather as default };

package/dist/common/icons/neon-logo.js

@@ -0,0 +1,2 @@
+var neonLogo = '<svg width="100%" height="100%" viewBox="0 0 1289 335"\n     xmlns="http://www.w3.org/2000/svg" xml:space="preserve"\n     style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:2;">\n    <path class="neon-svg--fill"\n          stroke-linecap="square"\n          d="M54.328,318.534c-4.431,-0 -8.081,-1.434 -10.948,-4.301c-2.867,-2.868 -4.301,-6.517 -4.301,-10.948l0,-274.873c0,-4.432 1.434,-8.081 4.301,-10.948c2.867,-2.868 6.517,-4.301 10.948,-4.301c4.692,-0 8.602,1.824 11.73,5.474l186.898,245.548l0,-235.773c0,-4.432 1.434,-8.081 4.301,-10.948c2.867,-2.868 6.517,-4.301 10.948,-4.301c4.171,-0 7.755,1.433 10.753,4.301c2.997,2.867 4.496,6.516 4.496,10.948l0,274.873c0,4.431 -1.499,8.08 -4.496,10.948c-2.998,2.867 -6.582,4.301 -10.753,4.301c-2.085,-0 -4.171,-0.391 -6.256,-1.173c-2.085,-0.782 -3.78,-2.086 -5.083,-3.91l-187.289,-245.548l0,235.382c0,4.431 -1.499,8.08 -4.496,10.948c-2.998,2.867 -6.582,4.301 -10.753,4.301Z"\n          style="fill-rule:nonzero;"/>\n    <path class="neon-svg--fill"\n          stroke-linecap="square"\n          d="M356.962,43.661c-4.171,-0 -7.755,-1.499 -10.752,-4.497c-2.998,-2.998 -4.497,-6.582 -4.497,-10.752c0,-4.432 1.499,-8.081 4.497,-10.948c2.997,-2.868 6.581,-4.301 10.752,-4.301l228.735,-0c4.171,-0 7.755,1.433 10.753,4.301c2.997,2.867 4.496,6.516 4.496,10.948c0,4.17 -1.499,7.754 -4.496,10.752c-2.998,2.998 -6.582,4.497 -10.753,4.497l-228.735,-0Zm33.235,137.632c-3.649,-0.261 -7.038,-1.825 -10.166,-4.692c-3.128,-2.868 -4.692,-6.517 -4.692,-10.948c0,-3.91 1.434,-7.299 4.301,-10.166c2.867,-2.868 6.386,-4.562 10.557,-5.083l162.265,-0c4.171,-0 7.755,1.498 10.753,4.496c2.997,2.998 4.496,6.582 4.496,10.753c0,4.431 -1.499,8.145 -4.496,11.143c-2.998,2.998 -6.582,4.497 -10.753,4.497l-162.265,-0Zm-33.235,137.241c-4.171,-0 -7.755,-1.434 -10.752,-4.301c-2.998,-2.868 -4.497,-6.517 -4.497,-10.948c0,-4.171 1.499,-7.755 4.497,-10.753c2.997,-2.998 6.581,-4.496 10.752,-4.496l228.735,-0c4.171,-0 7.755,1.498 10.753,4.496c2.997,2.998 4.496,6.582 4.496,10.753c0,4.431 -1.499,8.08 -4.496,10.948c-2.998,2.867 -6.582,4.301 -10.753,4.301l-228.735,-0Z"\n          style="fill-rule:nonzero;"/>\n    <circle class="neon-svg--fill" r="165" cx="790" cy="167.5"/>\n    <path class="neon-svg--fill"\n          stroke-linecap="square"\n          d="M1018.14,318.534c-4.171,-0 -7.755,-1.499 -10.752,-4.497c-2.998,-2.998 -4.497,-6.582 -4.497,-10.752l0,-274.873c0,-4.171 1.499,-7.755 4.497,-10.753c2.997,-2.998 6.581,-4.496 10.752,-4.496l213.486,-0c4.171,-0 7.69,1.433 10.557,4.301c2.867,2.867 4.301,6.516 4.301,10.948l0,274.873c0,4.431 -1.434,8.08 -4.301,10.948c-2.867,2.867 -6.386,4.301 -10.557,4.301c-4.431,-0 -8.081,-1.434 -10.948,-4.301c-2.867,-2.868 -4.301,-6.517 -4.301,-10.948l0,-262.752l-182.988,-0l0,262.752c0,4.17 -1.499,7.754 -4.496,10.752c-2.998,2.998 -6.582,4.497 -10.753,4.497Z"\n          style="fill-rule:nonzero;"/>\n    </svg>\n';
+export { neonLogo as default };

package/dist/common/utils/RegisterIcons.js

@@ -18,6 +18,7 @@ import dot from "../icons/dot.js";
 import download from "../icons/download.js";
 import ellipsis from "../icons/ellipsis.js";
 import exclamationCircle from "../icons/exclamation-circle.js";
+import feather from "../icons/feather.js";
 import github from "../icons/github.js";
 import hammer from "../icons/hammer.js";
 import heart from "../icons/heart.js";
@@ -26,11 +27,13 @@ import htmlLogo from "../icons/html-logo.js";
 import images from "../icons/images.js";
 import infoCircle from "../icons/info-circle.js";
 import linkExternal from "../icons/link-external.js";
+import loading from "../icons/loading.js";
 import lock from "../icons/lock.js";
 import mail from "../icons/mail.js";
 import menu from "../icons/menu.js";
 import minus from "../icons/minus.js";
 import moon from "../icons/moon.js";
+import neonLogo from "../icons/neon-logo.js";
 import palette from "../icons/palette.js";
 import plus from "../icons/plus.js";
 import send from "../icons/send.js";
@@ -41,8 +44,6 @@ import timesCircle from "../icons/times-circle.js";
 import user from "../icons/user.js";
 import visibilityOff from "../icons/visibility-off.js";
 import visibilityOn from "../icons/visibility-on.js";
-import loading from "../icons/loading.js";
-import logo from "../icons/logo.js";
 class RegisterIcons {
   static register() {
     NeonIconRegistry.addIcon("align-center", alignCenter);
@@ -64,6 +65,7 @@ class RegisterIcons {
     NeonIconRegistry.addIcon("download", download);
     NeonIconRegistry.addIcon("ellipsis", ellipsis);
     NeonIconRegistry.addIcon("exclamation-circle", exclamationCircle);
+    NeonIconRegistry.addIcon("feather", feather);
     NeonIconRegistry.addIcon("github", github);
     NeonIconRegistry.addIcon("hammer", hammer);
     NeonIconRegistry.addIcon("heart", heart);
@@ -72,12 +74,13 @@ class RegisterIcons {
     NeonIconRegistry.addIcon("images", images);
     NeonIconRegistry.addIcon("info-circle", infoCircle);
     NeonIconRegistry.addIcon("link-external", linkExternal);
+    NeonIconRegistry.addIcon("loading", loading);
     NeonIconRegistry.addIcon("lock", lock);
-    NeonIconRegistry.addIcon("logo", logo);
     NeonIconRegistry.addIcon("mail", mail);
     NeonIconRegistry.addIcon("menu", menu);
     NeonIconRegistry.addIcon("minus", minus);
     NeonIconRegistry.addIcon("moon", moon);
+    NeonIconRegistry.addIcon("neon-logo", neonLogo);
     NeonIconRegistry.addIcon("palette", palette);
     NeonIconRegistry.addIcon("plus", plus);
     NeonIconRegistry.addIcon("send", send);
@@ -88,7 +91,6 @@ class RegisterIcons {
     NeonIconRegistry.addIcon("user", user);
     NeonIconRegistry.addIcon("visibility-off", visibilityOff);
     NeonIconRegistry.addIcon("visibility-on", visibilityOn);
-    NeonIconRegistry.addIcon("loading", loading);
   }
 }
 export { RegisterIcons };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
-  "description": "Neon is a lightweight design library of VueJS components with minimal dependencies. It supports light and dark modes and can be extended to support multiple themes",
-  "version": "7.3.1-beta.1",
+  "description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
+  "version": "7.3.3-beta.1",
   "module": "dist/neon.js",
   "types": "dist/neon.d.ts",
   "exports": {
@@ -45,6 +45,10 @@
     "theming",
     "mode",
     "web",
+    "SASS",
+    "scss",
+    "css",
+    "variables",
     "application",
     "javascript",
     "typescript",

package/dist/common/icons/logo.js

@@ -1,2 +0,0 @@
-var logo = '<svg width="100%" height="100%" viewBox="0 0 1289 335"\n     xmlns="http://www.w3.org/2000/svg" xml:space="preserve"\n     style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:2;">\n    <path class="neon-svg--fill"\n          stroke-linecap="square"\n          d="M54.328,318.534c-4.431,-0 -8.081,-1.434 -10.948,-4.301c-2.867,-2.868 -4.301,-6.517 -4.301,-10.948l0,-274.873c0,-4.432 1.434,-8.081 4.301,-10.948c2.867,-2.868 6.517,-4.301 10.948,-4.301c4.692,-0 8.602,1.824 11.73,5.474l186.898,245.548l0,-235.773c0,-4.432 1.434,-8.081 4.301,-10.948c2.867,-2.868 6.517,-4.301 10.948,-4.301c4.171,-0 7.755,1.433 10.753,4.301c2.997,2.867 4.496,6.516 4.496,10.948l0,274.873c0,4.431 -1.499,8.08 -4.496,10.948c-2.998,2.867 -6.582,4.301 -10.753,4.301c-2.085,-0 -4.171,-0.391 -6.256,-1.173c-2.085,-0.782 -3.78,-2.086 -5.083,-3.91l-187.289,-245.548l0,235.382c0,4.431 -1.499,8.08 -4.496,10.948c-2.998,2.867 -6.582,4.301 -10.753,4.301Z"\n          style="fill-rule:nonzero;"/>\n    <path class="neon-svg--fill"\n          stroke-linecap="square"\n          d="M356.962,43.661c-4.171,-0 -7.755,-1.499 -10.752,-4.497c-2.998,-2.998 -4.497,-6.582 -4.497,-10.752c0,-4.432 1.499,-8.081 4.497,-10.948c2.997,-2.868 6.581,-4.301 10.752,-4.301l228.735,-0c4.171,-0 7.755,1.433 10.753,4.301c2.997,2.867 4.496,6.516 4.496,10.948c0,4.17 -1.499,7.754 -4.496,10.752c-2.998,2.998 -6.582,4.497 -10.753,4.497l-228.735,-0Zm33.235,137.632c-3.649,-0.261 -7.038,-1.825 -10.166,-4.692c-3.128,-2.868 -4.692,-6.517 -4.692,-10.948c0,-3.91 1.434,-7.299 4.301,-10.166c2.867,-2.868 6.386,-4.562 10.557,-5.083l162.265,-0c4.171,-0 7.755,1.498 10.753,4.496c2.997,2.998 4.496,6.582 4.496,10.753c0,4.431 -1.499,8.145 -4.496,11.143c-2.998,2.998 -6.582,4.497 -10.753,4.497l-162.265,-0Zm-33.235,137.241c-4.171,-0 -7.755,-1.434 -10.752,-4.301c-2.998,-2.868 -4.497,-6.517 -4.497,-10.948c0,-4.171 1.499,-7.755 4.497,-10.753c2.997,-2.998 6.581,-4.496 10.752,-4.496l228.735,-0c4.171,-0 7.755,1.498 10.753,4.496c2.997,2.998 4.496,6.582 4.496,10.753c0,4.431 -1.499,8.08 -4.496,10.948c-2.998,2.867 -6.582,4.301 -10.753,4.301l-228.735,-0Z"\n          style="fill-rule:nonzero;"/>\n    <circle class="neon-svg--fill" r="165" cx="790" cy="167.5"/>\n    <path class="neon-svg--fill"\n          stroke-linecap="square"\n          d="M1018.14,318.534c-4.171,-0 -7.755,-1.499 -10.752,-4.497c-2.998,-2.998 -4.497,-6.582 -4.497,-10.752l0,-274.873c0,-4.171 1.499,-7.755 4.497,-10.753c2.997,-2.998 6.581,-4.496 10.752,-4.496l213.486,-0c4.171,-0 7.69,1.433 10.557,4.301c2.867,2.867 4.301,6.516 4.301,10.948l0,274.873c0,4.431 -1.434,8.08 -4.301,10.948c-2.867,2.867 -6.386,4.301 -10.557,4.301c-4.431,-0 -8.081,-1.434 -10.948,-4.301c-2.867,-2.868 -4.301,-6.517 -4.301,-10.948l0,-262.752l-182.988,-0l0,262.752c0,4.17 -1.499,7.754 -4.496,10.752c-2.998,2.998 -6.582,4.497 -10.753,4.497Z"\n          style="fill-rule:nonzero;"/>\n    </svg>\n';
-export { logo as default };