@aotearoan/neon 28.3.0 → 28.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
-  "version": "28.3.0",
+  "version": "28.4.0",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",

package/src/sass/components/_card-list.scss

@@ -21,7 +21,14 @@
 
     &__header {
       align-items: center;
+      user-select: none;
       margin-bottom: var(--neon-space-16);
+      font-size: var(--neon-font-size-xs);
+      color: var(--neon-color-text-primary);
+
+      @include responsive.responsive(mobile-large) {
+        display: none;
+      }
     }
 
     &__total {
@@ -36,6 +43,18 @@
 
     &__cards {
       border-top: var(--neon-border);
+      position: relative;
+
+      .neon-splash-loader {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: var(--neon-z-index-above);
+      }
     }
 
     .neon-card-list__card {

package/src/sass/components/_empty-state.scss

@@ -0,0 +1,47 @@
+@use '../includes/responsive';
+
+@mixin empty-state {
+  .neon-empty-state {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: var(--neon-space-32);
+    width: 100%;
+    height: 100%;
+    max-width: var(--neon-max-width-empty-state);
+    text-align: center;
+
+    .neon-empty-state__title {
+      padding-top: 0;
+    }
+
+    .neon-empty-state__illustration {
+      width: 100%;
+    }
+
+    .neon-empty-state__ctas {
+      justify-content: center;
+    }
+
+    .neon-empty-state__cta {
+      margin-bottom: var(--neon-space-8);
+    }
+
+    &.neon-empty-state--error {
+      .neon-empty-state__title {
+        color: var(--neon-color-disabled-text);
+      }
+
+      .neon-empty-state__subtitle {
+        font-size: var(--neon-h1-size);
+      }
+    }
+
+    @include responsive.responsive(larger-than-mobile-large) {
+      align-items: center;
+
+      .neon-empty-state__title {
+        align-content: center;
+      }
+    }
+  }
+}

package/src/sass/components/_header.scss

@@ -3,6 +3,8 @@
 
 @mixin header {
   .neon-header {
+    margin-top: var(--neon-space-24);
+    margin-bottom: var(--neon-space-40);
     gap: var(--neon-space-24);
 
     &__content {

package/src/sass/components/_list-layout.scss

@@ -0,0 +1,37 @@
+@use '../includes/responsive';
+
+@mixin list-layout {
+  .neon-list-layout {
+    position: relative;
+    padding-bottom: calc(var(--neon-space-20) + var(--neon-height-mobile-menu) + var(--neon-border-width));
+    gap: 0;
+    width: 100%;
+    max-width: 100%;
+    flex: 1 0 auto;
+  }
+
+  /* All min-height logic */
+  @include responsive.responsive(larger-than-mobile-large) {
+    .neon-page--with-footer {
+      .neon-list-layout {
+        min-height: calc(100% - (var(--neon-footer-height) + var(--neon-border-width-footer) + var(--neon-top-nav-height)));
+      }
+    }
+  }
+
+  @include responsive.responsive(tablet) {
+    .neon-list-layout {
+      max-width: 100%;
+    }
+  }
+
+  .neon-page--left.neon-page--with-side-nav {
+    @include responsive.responsive(larger-than-tablet) {
+      .neon-list-layout {
+        max-width: calc(100% - 2 * var(--neon-gutter));
+        margin-left: var(--neon-gutter);
+        margin-right: var(--neon-gutter);
+      }
+    }
+  }
+}

package/src/sass/components/_page-container.scss

@@ -4,6 +4,7 @@
 
 @mixin page-container {
   .neon-page-container {
+    position: relative;
     padding-bottom: calc(var(--neon-space-20) + var(--neon-height-mobile-menu) + var(--neon-border-width));
     gap: var(--neon-gutter);
     width: 100%;

package/src/sass/components/components.scss

@@ -66,3 +66,5 @@
 @forward './filter';
 @forward './search-filter';
 @forward './filter-bar';
+@forward './empty-state';
+@forward './list-layout';

package/src/sass/core/_transitions.scss

@@ -10,4 +10,19 @@
       opacity: 0;
     }
   }
+
+  .neon-splash-transition {
+    &-enter-active {
+      transition: opacity ease-in-out var(--neon-animation-speed-fast);
+    }
+
+    &-leave-active {
+      transition: opacity ease-in-out var(--neon-animation-speed-slowest);
+    }
+
+    &-enter-from,
+    &-leave-to {
+      opacity: 0;
+    }
+  }
 }

package/src/sass/global/base-html.scss

@@ -21,10 +21,6 @@
     line-height: var(--neon-line-height-ratio);
 
     @include layout.min-height(100);
-
-    @include responsive.responsive(mobile-large) {
-      font-size: 17px; // don't use rems here - body font must be defined in pixels
-    }
   }
 
   .neon-closable--open {

package/src/sass/includes/_dependencies.scss

@@ -141,6 +141,8 @@
           NeonFilter: [NeonButton, NeonInput, NeonLink, NeonStack, NeonSwitch, NeonExpansionIndicator, NeonIcon, NeonLink, NeonFieldGroup, NeonDropdown, NeonBadge],
           NeonSearchFilter: [NeonButton, NeonInput, NeonLink, NeonStack, NeonSwitch, NeonExpansionIndicator, NeonIcon, NeonLink, NeonFieldGroup, NeonDropdown, NeonBadge],
           NeonFilterBar: [NeonInline, NeonSwiper],
+          NeonEmptyState: [NeonButton, NeonIcon, NeonInline, NeonStack, NeonExpansionIndicator, NeonLink],
+          NeonListLayout: [NeonBreadcrumbs, NeonButton, NeonCard, NeonCardBody, NeonCardHeader, NeonCardList, NeonEmptyState, NeonExpansionIndicator, NeonHeader, NeonIcon, NeonInline, NeonLink, NeonNote, NeonPagination, NeonSelectableCard, NeonStack, NeonSwiper, NeonSwitch],
   );
 
   $neon-flattened-components: [];

package/src/sass/theme.scss

@@ -312,4 +312,12 @@ $neon-components: null !default;
   @if index($neon-flattened-components, NeonFilterBar) {
     @include components.filter-bar;
   }
+
+  @if index($neon-flattened-components, NeonEmptyState) {
+    @include components.empty-state;
+  }
+
+  @if index($neon-flattened-components, NeonListLayout) {
+    @include components.list-layout;
+  }
 }

package/src/sass/variables-global.scss

@@ -1396,4 +1396,11 @@
    * Width of the filter content when open
    */
   --neon-width-filter-content: 250rem;
+
+  /* empty state */
+  /**
+   * @component NeonEmptyState
+   * Max width of the empty state content
+   */
+  --neon-max-width-empty-state: 416rem;
 }

package/dist/components/feedback/alert/container/NeonDialogContainer.cjs2.js

@@ -1,2 +0,0 @@
-"use strict";const o=require("../../../../utils/feedback/dialog/NeonDialogService.cjs.js"),l=require("vue"),a=require("../../dialog/NeonDialog.vue.cjs.js"),i=l.defineComponent({name:"NeonDialogContainer",components:{NeonDialog:a},props:{modelValue:{type:Object}},setup(n,{emit:e}){return{onButtonClick:t=>{e("update:modelValue",{...n.modelValue,open:!1}),setTimeout(()=>{e("update:modelValue",o.NeonDialogService.defaultDialogMessage)},1e3),o.NeonDialogService.resolve(t)}}}});module.exports=i;
-//# sourceMappingURL=NeonDialogContainer.cjs2.js.map

package/dist/components/feedback/alert/container/NeonDialogContainer.cjs2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NeonDialogContainer.cjs2.js","sources":["../../../../../src/components/feedback/alert/container/NeonDialogContainer.ts"],"sourcesContent":["import type { NeonDialogMessage } from '@/model/feedback/dialog/NeonDialogMessage';\nimport { NeonDialogService } from '@/utils/feedback/dialog/NeonDialogService';\nimport { defineComponent } from 'vue';\nimport NeonDialog from '../../dialog/NeonDialog.vue';\n\n/**\n * This is an internal component for rendering alerts.\n */\nexport default defineComponent({\n  name: 'NeonDialogContainer',\n  components: {\n    NeonDialog,\n  },\n  props: {\n    modelValue: { type: Object as () => NeonDialogMessage },\n  },\n  setup(props, { emit }) {\n    const onButtonClick = (choice: boolean) => {\n      emit('update:modelValue', { ...props.modelValue, open: false });\n      setTimeout(() => {\n        emit('update:modelValue', NeonDialogService.defaultDialogMessage);\n      }, 1000);\n      NeonDialogService.resolve(choice);\n    };\n\n    return {\n      onButtonClick,\n    };\n  },\n});\n"],"names":["NeonDialogContainer","defineComponent","NeonDialog","props","emit","choice","NeonDialogService"],"mappings":"4JAQAA,EAAeC,kBAAgB,CAC7B,KAAM,sBACN,WAAY,CACV,WAAAC,CAAA,EAEF,MAAO,CACL,WAAY,CAAE,KAAM,MAAA,CAAkC,EAExD,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CASrB,MAAO,CACL,cATqBC,GAAoB,CACzCD,EAAK,oBAAqB,CAAE,GAAGD,EAAM,WAAY,KAAM,GAAO,EAC9D,WAAW,IAAM,CACfC,EAAK,oBAAqBE,EAAAA,kBAAkB,oBAAoB,CAClE,EAAG,GAAI,EACPA,EAAAA,kBAAkB,QAAQD,CAAM,CAClC,CAGE,CAEJ,CACF,CAAC"}

package/dist/components/feedback/alert/container/NeonDialogContainer.es2.js

@@ -1,25 +0,0 @@
-import { NeonDialogService as o } from "../../../../utils/feedback/dialog/NeonDialogService.es.js";
-import { defineComponent as a } from "vue";
-import l from "../../dialog/NeonDialog.vue.es.js";
-const u = a({
-  name: "NeonDialogContainer",
-  components: {
-    NeonDialog: l
-  },
-  props: {
-    modelValue: { type: Object }
-  },
-  setup(t, { emit: e }) {
-    return {
-      onButtonClick: (n) => {
-        e("update:modelValue", { ...t.modelValue, open: !1 }), setTimeout(() => {
-          e("update:modelValue", o.defaultDialogMessage);
-        }, 1e3), o.resolve(n);
-      }
-    };
-  }
-});
-export {
-  u as default
-};
-//# sourceMappingURL=NeonDialogContainer.es2.js.map

package/dist/components/feedback/alert/container/NeonDialogContainer.es2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NeonDialogContainer.es2.js","sources":["../../../../../src/components/feedback/alert/container/NeonDialogContainer.ts"],"sourcesContent":["import type { NeonDialogMessage } from '@/model/feedback/dialog/NeonDialogMessage';\nimport { NeonDialogService } from '@/utils/feedback/dialog/NeonDialogService';\nimport { defineComponent } from 'vue';\nimport NeonDialog from '../../dialog/NeonDialog.vue';\n\n/**\n * This is an internal component for rendering alerts.\n */\nexport default defineComponent({\n  name: 'NeonDialogContainer',\n  components: {\n    NeonDialog,\n  },\n  props: {\n    modelValue: { type: Object as () => NeonDialogMessage },\n  },\n  setup(props, { emit }) {\n    const onButtonClick = (choice: boolean) => {\n      emit('update:modelValue', { ...props.modelValue, open: false });\n      setTimeout(() => {\n        emit('update:modelValue', NeonDialogService.defaultDialogMessage);\n      }, 1000);\n      NeonDialogService.resolve(choice);\n    };\n\n    return {\n      onButtonClick,\n    };\n  },\n});\n"],"names":["NeonDialogContainer","defineComponent","NeonDialog","props","emit","choice","NeonDialogService"],"mappings":";;;AAQA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA,IACL,YAAY,EAAE,MAAM,OAAA;AAAA,EAAkC;AAAA,EAExD,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AASrB,WAAO;AAAA,MACL,eAToB,CAACC,MAAoB;AACzC,QAAAD,EAAK,qBAAqB,EAAE,GAAGD,EAAM,YAAY,MAAM,IAAO,GAC9D,WAAW,MAAM;AACf,UAAAC,EAAK,qBAAqBE,EAAkB,oBAAoB;AAAA,QAClE,GAAG,GAAI,GACPA,EAAkB,QAAQD,CAAM;AAAA,MAClC;AAAA,IAGE;AAAA,EAEJ;AACF,CAAC;"}