@aotearoan/neon 28.2.0 → 28.4.0

package/dist/src/model/navigation/breadcrumbs/NeonBreadcrumbLink.d.ts

@@ -1,8 +1,8 @@
 export interface NeonBreadcrumbLink {
     /**
-     * The url of a breadcrumb link.
+     * * The url of a breadcrumb link. If left empty the link will be rendered as text.
      */
-    url: string;
+    url?: string;
     /**
      * The display label of a breadcrumb link.
      */

package/dist/src/model/navigation/breadcrumbs/NeonBreadcrumbResponsiveStyle.d.ts

@@ -0,0 +1,4 @@
+export declare enum NeonBreadcrumbResponsiveStyle {
+    Swiper = "swiper",
+    BackOnly = "back-only"
+}

package/dist/src/model/presentation/empty-state/NeonEmptyStateType.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Describes the different layout types for the <a href="/presentation/empty-state">NeonEmptyState</a> component.
+ */
+export declare enum NeonEmptyStateType {
+    /** Standard empty state layout. */
+    EmptyState = "empty-state",
+    /** Error state layout. */
+    Error = "error"
+}

package/dist/src/model/user-input/button/NeonButtonModel.d.ts

@@ -0,0 +1,19 @@
+import type { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';
+import type { NeonButtonStyle } from './NeonButtonStyle';
+/**
+ * Model describing a button
+ */
+export interface NeonButtonModel {
+    /** The button label */
+    label?: string;
+    /** Button url (renders button as an anchor element) */
+    href?: string;
+    /** button disabled state */
+    disabled?: boolean;
+    /** Button icon */
+    icon?: string;
+    /** Button color */
+    color?: NeonFunctionalColor;
+    /** Button style */
+    style?: NeonButtonStyle;
+}

package/dist/src/neon.d.ts

@@ -20,6 +20,7 @@ export { default as NeonDrawer } from './components/layout/drawer/NeonDrawer.vue
 export { default as NeonDropdown } from './components/presentation/dropdown/NeonDropdown.vue';
 export { default as NeonDropdownMenu } from './components/navigation/dropdown-menu/NeonDropdownMenu.vue';
 export { default as NeonDropZone } from './components/user-input/drop-zone/NeonDropZone.vue';
+export { default as NeonEmptyState } from './components/presentation/empty-state/NeonEmptyState.vue';
 export { default as NeonExpansionIndicator } from './components/presentation/expansion-indicator/NeonExpansionIndicator.vue';
 export { default as NeonExpansionPanel } from './components/presentation/expansion-panel/NeonExpansionPanel.vue';
 export { default as NeonFieldGroup } from './components/user-input/field-group/NeonFieldGroup.vue';
@@ -42,6 +43,7 @@ export { default as NeonLabelledContent } from './components/presentation/labell
 export { default as NeonLinearProgress } from './components/feedback/linear-progress/NeonLinearProgress.vue';
 export { default as NeonLink } from './components/navigation/link/NeonLink.vue';
 export { default as NeonList } from './components/user-input/list/NeonList.vue';
+export { default as NeonListLayout } from './components/layout/list-layout/NeonListLayout.vue';
 export { default as NeonMenu } from './components/navigation/menu/NeonMenu.vue';
 export { default as NeonMobileMenu } from './components/navigation/mobile-menu/NeonMobileMenu.vue';
 export { default as NeonModal } from './components/layout/modal/NeonModal.vue';
@@ -85,6 +87,8 @@ export { NeonBadgeSize } from '@/model/presentation/badge/NeonBadgeSize';
 export type { NeonBannerMessage } from '@/model/feedback/banner/NeonBannerMessage';
 export type { NeonBannerModel } from '@/model/feedback/banner/NeonBannerModel';
 export type { NeonBreadcrumbLink } from './model/navigation/breadcrumbs/NeonBreadcrumbLink';
+export { NeonBreadcrumbResponsiveStyle } from './model/navigation/breadcrumbs/NeonBreadcrumbResponsiveStyle';
+export type { NeonButtonModel } from './model/user-input/button/NeonButtonModel';
 export { NeonButtonSize } from '@/model/user-input/button/NeonButtonSize';
 export { NeonButtonStyle } from '@/model/user-input/button/NeonButtonStyle';
 export { NeonButtonType } from '@/model/user-input/button/NeonButtonType';
@@ -98,6 +102,7 @@ export type { NeonDropdownMenuItem } from '@/model/presentation/dropdown/NeonDro
 export { NeonDropdownPlacement } from '@/model/presentation/dropdown/NeonDropdownPlacement';
 export type { NeonDropdownPlacementObject } from '@/model/presentation/dropdown/NeonDropdownPlacementObject';
 export { NeonDropdownStyle } from '@/model/presentation/dropdown/NeonDropdownStyle';
+export { NeonEmptyStateType } from './model/presentation/empty-state/NeonEmptyStateType';
 export type { NeonFilterItem } from './model/user-input/filter/NeonFilterItem';
 export type { NeonFilterListItem } from '@/model/user-input/filter-list/NeonFilterListItem';
 export { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';

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.2.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/_breadcrumbs.scss

@@ -1,4 +1,5 @@
 @use '../includes/svg';
+@use '../includes/responsive';
 
 @mixin breadcrumbs {
   .neon-breadcrumbs {
@@ -75,5 +76,49 @@
         text-decoration: underline;
       }
     }
+
+    .neon-breadcrumbs__link-text {
+      display: flex;
+      align-items: center;
+      cursor: default;
+      color: var(--neon-color-text-secondary);
+      white-space: nowrap;
+      font-size: var(--neon-font-size-xs);
+      line-height: var(--neon-line-height-one);
+
+      &:not(:last-child) {
+        font-weight: var(--neon-font-weight-semi-bold);
+      }
+
+      &:last-child {
+        color: var(--neon-color-text-tertiary);
+      }
+    }
+  }
+
+  @include responsive.responsive(mobile-large) {
+    .neon-breadcrumbs--responsive-back-only {
+      .neon-breadcrumbs--breadcrumbs-only {
+        display: none;
+      }
+
+      .neon-breadcrumbs__separator,
+      .neon-breadcrumbs__back-label,
+      .neon-breadcrumbs__link-text:last-child,
+      .neon-breadcrumbs__link.neon-link {
+        display: none;
+      }
+
+      .neon-breadcrumbs__back.neon-link:not(:last-child) {
+        border-right: none;
+      }
+
+      .neon-breadcrumbs__back.neon-link {
+        .neon-breadcrumbs__back-icon {
+          width: 24rem;
+          height: 24rem;
+        }
+      }
+    }
   }
 }

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;"}