@aotearoan/neon 28.1.2 → 28.2.0

package/dist/src/components/user-input/search-filter/NeonSearchFilter.vue.d.ts

@@ -0,0 +1,2 @@
+export * from './NeonSearchFilter.js';
+export { default } from './NeonSearchFilter.js';

package/dist/src/model/user-input/filter/NeonFilterItem.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Model describing a filter item. See <a href="/user-input/filter">NeonFilter</a>.
+ */
+export interface NeonFilterItem {
+    /** Display label for this item. */
+    label: string;
+    /** Count of items matching this filter option. */
+    count: number;
+    /** Boolean indicating if this item is selected. */
+    selected: boolean;
+    /** Boolean indicating if this item is disabled. */
+    disabled?: boolean;
+}

package/dist/src/neon.d.ts

@@ -25,6 +25,8 @@ export { default as NeonExpansionPanel } from './components/presentation/expansi
 export { default as NeonFieldGroup } from './components/user-input/field-group/NeonFieldGroup.vue';
 export { default as NeonField } from './components/user-input/field/NeonField.vue';
 export { default as NeonFile } from './components/user-input/file/NeonFile.vue';
+export { default as NeonFilter } from './components/user-input/filter/NeonFilter.vue';
+export { default as NeonFilterBar } from './components/layout/filter-bar/NeonFilterBar.vue';
 export { default as NeonFilterList } from './components/user-input/filter-list/NeonFilterList.vue';
 export { default as NeonFooter } from './components/layout/footer/NeonFooter.vue';
 export { default as NeonGrid } from './components/layout/grid/NeonGrid.vue';
@@ -53,6 +55,7 @@ export { default as NeonPassword } from './components/user-input/password/NeonPa
 export { default as NeonRangeSlider } from './components/user-input/range-slider/NeonRangeSlider.vue';
 export { default as NeonSideNav } from './components/layout/side-nav/NeonSideNav.vue';
 export { default as NeonSearch } from './components/user-input/search/NeonSearch.vue';
+export { default as NeonSearchFilter } from './components/user-input/search-filter/NeonSearchFilter.vue';
 export { default as NeonSelect } from './components/user-input/select/NeonSelect.vue';
 export { default as NeonSelectableCard } from './components/layout/card-list/selectable-card/NeonSelectableCard.vue';
 export { default as NeonSkeletonLoader } from './components/feedback/skeleton-loader/NeonSkeletonLoader.vue';
@@ -95,6 +98,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 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';
 export type { NeonGridModel } from '@/model/layout/grid/NeonGridModel';

package/dist/src/utils/common/debounce/NeonDebounceUtils.d.ts

@@ -1,6 +1,6 @@
 /**
  * Debounce utility used for debouncing user input. This has the benefit of also providing a global default which can
- * also be set to 0 for improving test code (no need to wait for input). The default debounce timeout is set to 300ms.
+ * also be set to 0 for improving test code (no need to wait for input). The default debounce timeout is set to 0ms.
  */
 export declare class NeonDebounceUtils {
     private static debounceTimeout;

package/dist/utils/common/debounce/NeonDebounceUtils.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var s=Object.defineProperty;var b=(i,e,t)=>e in i?s(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var r=(i,e,t)=>b(i,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=class o{static setGlobalDebounceTimeout(e){o.debounceTimeout=e}static debounce(e,t=o.debounceTimeout){let u;return t>0?(...a)=>{u&&clearTimeout(u),u=window.setTimeout(()=>e(...a),t)}:e}};r(o,"debounceTimeout",300);let c=o;exports.NeonDebounceUtils=c;
+"use strict";var s=Object.defineProperty;var b=(i,e,t)=>e in i?s(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var r=(i,e,t)=>b(i,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=class o{static setGlobalDebounceTimeout(e){o.debounceTimeout=e}static debounce(e,t=o.debounceTimeout){let u;return t>0?(...a)=>{u&&clearTimeout(u),u=window.setTimeout(()=>e(...a),t)}:e}};r(o,"debounceTimeout",0);let c=o;exports.NeonDebounceUtils=c;
 //# sourceMappingURL=NeonDebounceUtils.cjs.js.map

package/dist/utils/common/debounce/NeonDebounceUtils.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonDebounceUtils.cjs.js","sources":["../../../../src/utils/common/debounce/NeonDebounceUtils.ts"],"sourcesContent":["/**\n * Debounce utility used for debouncing user input. This has the benefit of also providing a global default which can\n * also be set to 0 for improving test code (no need to wait for input). The default debounce timeout is set to 300ms.\n */\nexport class NeonDebounceUtils {\n  private static debounceTimeout = 300;\n\n  /**\n   * Set a global debounce timeout value. NOTE: Set this to 0 to disable debounce & receive all input events immediately.\n   * This is useful for testing purposes.\n   *\n   * @param debounceTimeout The debounce timeout in milliseconds.\n   */\n  public static setGlobalDebounceTimeout(debounceTimeout: number) {\n    NeonDebounceUtils.debounceTimeout = debounceTimeout;\n  }\n\n  /**\n   * Debounce a function, i.e. prevent triggering the function until a certain amount of time has passed without further\n   * input.\n   *\n   * @param fn Function to debounce.\n   * @param timeout Debounce timeout in milliseconds, uses the global setting by default.\n   *\n   * @returns Debounced function or in the case the timeout is set to 0 the original function parameter.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  public static debounce(fn: (...args: any[]) => void, timeout = NeonDebounceUtils.debounceTimeout) {\n    let timer: number;\n\n    if (timeout > 0) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      return (...args: any[]) => {\n        if (timer) {\n          clearTimeout(timer);\n        }\n        timer = window.setTimeout(() => fn(...args), timeout);\n      };\n    }\n\n    return fn;\n  }\n}\n"],"names":["_NeonDebounceUtils","debounceTimeout","fn","timeout","timer","args","__publicField","NeonDebounceUtils"],"mappings":"oPAIO,MAAMA,EAAN,MAAMA,CAAkB,CAS7B,OAAc,yBAAyBC,EAAyB,CAC9DD,EAAkB,gBAAkBC,CACtC,CAYA,OAAc,SAASC,EAA8BC,EAAUH,EAAkB,gBAAiB,CAChG,IAAII,EAEJ,OAAID,EAAU,EAEL,IAAIE,IAAgB,CACrBD,GACF,aAAaA,CAAK,EAEpBA,EAAQ,OAAO,WAAW,IAAMF,EAAG,GAAGG,CAAI,EAAGF,CAAO,CACtD,EAGKD,CACT,CACF,EArCEI,EADWN,EACI,kBAAkB,KAD5B,IAAMO,EAANP"}
+{"version":3,"file":"NeonDebounceUtils.cjs.js","sources":["../../../../src/utils/common/debounce/NeonDebounceUtils.ts"],"sourcesContent":["/**\n * Debounce utility used for debouncing user input. This has the benefit of also providing a global default which can\n * also be set to 0 for improving test code (no need to wait for input). The default debounce timeout is set to 0ms.\n */\nexport class NeonDebounceUtils {\n  private static debounceTimeout = 0;\n\n  /**\n   * Set a global debounce timeout value. NOTE: Set this to 0 to disable debounce & receive all input events immediately.\n   * This is useful for testing purposes.\n   *\n   * @param debounceTimeout The debounce timeout in milliseconds.\n   */\n  public static setGlobalDebounceTimeout(debounceTimeout: number) {\n    NeonDebounceUtils.debounceTimeout = debounceTimeout;\n  }\n\n  /**\n   * Debounce a function, i.e. prevent triggering the function until a certain amount of time has passed without further\n   * input.\n   *\n   * @param fn Function to debounce.\n   * @param timeout Debounce timeout in milliseconds, uses the global setting by default.\n   *\n   * @returns Debounced function or in the case the timeout is set to 0 the original function parameter.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  public static debounce(fn: (...args: any[]) => void, timeout = NeonDebounceUtils.debounceTimeout) {\n    let timer: number;\n\n    if (timeout > 0) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      return (...args: any[]) => {\n        if (timer) {\n          clearTimeout(timer);\n        }\n        timer = window.setTimeout(() => fn(...args), timeout);\n      };\n    }\n\n    return fn;\n  }\n}\n"],"names":["_NeonDebounceUtils","debounceTimeout","fn","timeout","timer","args","__publicField","NeonDebounceUtils"],"mappings":"oPAIO,MAAMA,EAAN,MAAMA,CAAkB,CAS7B,OAAc,yBAAyBC,EAAyB,CAC9DD,EAAkB,gBAAkBC,CACtC,CAYA,OAAc,SAASC,EAA8BC,EAAUH,EAAkB,gBAAiB,CAChG,IAAII,EAEJ,OAAID,EAAU,EAEL,IAAIE,IAAgB,CACrBD,GACF,aAAaA,CAAK,EAEpBA,EAAQ,OAAO,WAAW,IAAMF,EAAG,GAAGG,CAAI,EAAGF,CAAO,CACtD,EAGKD,CACT,CACF,EArCEI,EADWN,EACI,kBAAkB,GAD5B,IAAMO,EAANP"}

package/dist/utils/common/debounce/NeonDebounceUtils.es.js

@@ -28,7 +28,7 @@ const u = class u {
     } : e;
   }
 };
-c(u, "debounceTimeout", 300);
+c(u, "debounceTimeout", 0);
 let r = u;
 export {
   r as NeonDebounceUtils

package/dist/utils/common/debounce/NeonDebounceUtils.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonDebounceUtils.es.js","sources":["../../../../src/utils/common/debounce/NeonDebounceUtils.ts"],"sourcesContent":["/**\n * Debounce utility used for debouncing user input. This has the benefit of also providing a global default which can\n * also be set to 0 for improving test code (no need to wait for input). The default debounce timeout is set to 300ms.\n */\nexport class NeonDebounceUtils {\n  private static debounceTimeout = 300;\n\n  /**\n   * Set a global debounce timeout value. NOTE: Set this to 0 to disable debounce & receive all input events immediately.\n   * This is useful for testing purposes.\n   *\n   * @param debounceTimeout The debounce timeout in milliseconds.\n   */\n  public static setGlobalDebounceTimeout(debounceTimeout: number) {\n    NeonDebounceUtils.debounceTimeout = debounceTimeout;\n  }\n\n  /**\n   * Debounce a function, i.e. prevent triggering the function until a certain amount of time has passed without further\n   * input.\n   *\n   * @param fn Function to debounce.\n   * @param timeout Debounce timeout in milliseconds, uses the global setting by default.\n   *\n   * @returns Debounced function or in the case the timeout is set to 0 the original function parameter.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  public static debounce(fn: (...args: any[]) => void, timeout = NeonDebounceUtils.debounceTimeout) {\n    let timer: number;\n\n    if (timeout > 0) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      return (...args: any[]) => {\n        if (timer) {\n          clearTimeout(timer);\n        }\n        timer = window.setTimeout(() => fn(...args), timeout);\n      };\n    }\n\n    return fn;\n  }\n}\n"],"names":["_NeonDebounceUtils","debounceTimeout","fn","timeout","timer","args","__publicField","NeonDebounceUtils"],"mappings":";;;AAIO,MAAMA,IAAN,MAAMA,EAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS7B,OAAc,yBAAyBC,GAAyB;AAC9D,IAAAD,EAAkB,kBAAkBC;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,OAAc,SAASC,GAA8BC,IAAUH,EAAkB,iBAAiB;AAChG,QAAII;AAEJ,WAAID,IAAU,IAEL,IAAIE,MAAgB;AACzB,MAAID,KACF,aAAaA,CAAK,GAEpBA,IAAQ,OAAO,WAAW,MAAMF,EAAG,GAAGG,CAAI,GAAGF,CAAO;AAAA,IACtD,IAGKD;AAAA,EACT;AACF;AArCEI,EADWN,GACI,mBAAkB;AAD5B,IAAMO,IAANP;"}
+{"version":3,"file":"NeonDebounceUtils.es.js","sources":["../../../../src/utils/common/debounce/NeonDebounceUtils.ts"],"sourcesContent":["/**\n * Debounce utility used for debouncing user input. This has the benefit of also providing a global default which can\n * also be set to 0 for improving test code (no need to wait for input). The default debounce timeout is set to 0ms.\n */\nexport class NeonDebounceUtils {\n  private static debounceTimeout = 0;\n\n  /**\n   * Set a global debounce timeout value. NOTE: Set this to 0 to disable debounce & receive all input events immediately.\n   * This is useful for testing purposes.\n   *\n   * @param debounceTimeout The debounce timeout in milliseconds.\n   */\n  public static setGlobalDebounceTimeout(debounceTimeout: number) {\n    NeonDebounceUtils.debounceTimeout = debounceTimeout;\n  }\n\n  /**\n   * Debounce a function, i.e. prevent triggering the function until a certain amount of time has passed without further\n   * input.\n   *\n   * @param fn Function to debounce.\n   * @param timeout Debounce timeout in milliseconds, uses the global setting by default.\n   *\n   * @returns Debounced function or in the case the timeout is set to 0 the original function parameter.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  public static debounce(fn: (...args: any[]) => void, timeout = NeonDebounceUtils.debounceTimeout) {\n    let timer: number;\n\n    if (timeout > 0) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      return (...args: any[]) => {\n        if (timer) {\n          clearTimeout(timer);\n        }\n        timer = window.setTimeout(() => fn(...args), timeout);\n      };\n    }\n\n    return fn;\n  }\n}\n"],"names":["_NeonDebounceUtils","debounceTimeout","fn","timeout","timer","args","__publicField","NeonDebounceUtils"],"mappings":";;;AAIO,MAAMA,IAAN,MAAMA,EAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS7B,OAAc,yBAAyBC,GAAyB;AAC9D,IAAAD,EAAkB,kBAAkBC;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,OAAc,SAASC,GAA8BC,IAAUH,EAAkB,iBAAiB;AAChG,QAAII;AAEJ,WAAID,IAAU,IAEL,IAAIE,MAAgB;AACzB,MAAID,KACF,aAAaA,CAAK,GAEpBA,IAAQ,OAAO,WAAW,MAAMF,EAAG,GAAGG,CAAI,GAAGF,CAAO;AAAA,IACtD,IAGKD;AAAA,EACT;AACF;AArCEI,EADWN,GACI,mBAAkB;AAD5B,IAAMO,IAANP;"}

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.1.2",
+  "version": "28.2.0",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",
@@ -116,6 +116,8 @@
     "sass": "^1.62.1",
     "scss-parser": "^1.0.6",
     "ts-jest": "^29.1.0",
+    "ts-node": "^10.9.1",
+    "tslib": "^2.8.1",
     "typedoc": "^0.24.8",
     "typescript": "~5.0.4",
     "vite": "^6.3.4",

package/src/sass/components/_filter-bar.scss

@@ -0,0 +1,55 @@
+@use '../includes/responsive';
+
+@mixin filter-bar {
+  .neon-filter-bar {
+    .neon-swiper {
+      // display dropdowns as modals when overflowing as the overflow horizontal scrolling prevents the dropdown from
+      // being displayed. See https://github.com/w3c/csswg-drafts/issues/4092
+      @include responsive.responsive(mobile-large) {
+        .neon-dropdown__content {
+          position: fixed;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+
+        .neon-dropdown__click-blocker {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100vw;
+          height: 100vh;
+          background-color: var(--neon-background-color-overlay);
+          z-index: var(--neon-z-index-below-top);
+        }
+      }
+
+      @include responsive.responsive(larger-than-mobile-large) {
+        &,
+        .neon-swiper__container {
+          overflow: visible;
+        }
+      }
+    }
+
+    .neon-filter-bar__filters {
+      gap: var(--neon-space-8);
+    }
+
+    .neon-filter-bar__sort {
+      flex-direction: row;
+      margin-left: auto;
+
+      .neon-select {
+        .neon-dropdown__button.neon-button {
+          &,
+          &:focus-within {
+            border: none;
+          }
+
+          font-weight: var(--neon-font-weight-bold);
+        }
+      }
+    }
+  }
+}

package/src/sass/components/_filter.scss

@@ -0,0 +1,53 @@
+@use '../includes/responsive';
+@use '../includes/scrollbars';
+
+@mixin filter {
+  .neon-filter {
+    .neon-filter__content {
+      flex: 1;
+      padding: var(--neon-space-16);
+      width: var(--neon-width-filter-content);
+
+      @include responsive.responsive(mobile-large) {
+        flex: 1 0 auto;
+      }
+
+      .neon-filter__items {
+        overflow-y: auto;
+        @include scrollbars.scrollbars;
+      }
+
+      .neon-filter__title {
+        user-select: none;
+        font-size: var(--neon-font-size-xl);
+        font-weight: var(--neon-font-weight-medium);
+      }
+
+      .neon-filter__item {
+        user-select: none;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .neon-filter__item-count--disabled {
+        cursor: not-allowed;
+        color: var(--neon-color-disabled-text);
+      }
+
+      &__cta {
+        margin-top: auto;
+      }
+
+      .neon-link.neon-filter__reset-link {
+        --neon-color-link: var(--neon-color-text-tertiary);
+        --neon-color-link-visited: var(--neon-color-text-tertiary);
+        --neon-color-link-hover: var(--neon-color-text-secondary);
+
+        &:not(:hover) {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}

package/src/sass/components/_search-filter.scss

@@ -0,0 +1,25 @@
+@use '../includes/responsive';
+
+@mixin search-filter {
+  .neon-search-filter {
+    .neon-search-filter__content {
+      flex: 1;
+      padding: var(--neon-space-16);
+      width: var(--neon-width-filter-content);
+
+      @include responsive.responsive(mobile-large) {
+        flex: 1 0 auto;
+      }
+
+      .neon-search-filter__title {
+        user-select: none;
+        font-size: var(--neon-font-size-xl);
+        font-weight: var(--neon-font-weight-medium);
+      }
+
+      &__cta {
+        margin-top: auto;
+      }
+    }
+  }
+}

package/src/sass/components/components.scss

@@ -63,3 +63,6 @@
 @forward './sticky-buttons';
 @forward './breadcrumbs';
 @forward './header';
+@forward './filter';
+@forward './search-filter';
+@forward './filter-bar';

package/src/sass/includes/_dependencies.scss

@@ -138,6 +138,9 @@
           NeonStickyButtons: [],
           NeonBreadcrumbs: [NeonIcon, NeonLink, NeonSwiper],
           NeonHeader: [NeonBreadcrumbs, NeonButton, NeonExpansionIndicator, NeonIcon, NeonInline, NeonLink, NeonNote, NeonSwiper, NeonStack],
+          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],
   );
 
   $neon-flattened-components: [];

package/src/sass/theme.scss

@@ -300,4 +300,16 @@ $neon-components: null !default;
   @if index($neon-flattened-components, NeonHeader) {
     @include components.header;
   }
+
+  @if index($neon-flattened-components, NeonFilter) {
+    @include components.filter;
+  }
+
+  @if index($neon-flattened-components, NeonSearchFilter) {
+    @include components.search-filter;
+  }
+
+  @if index($neon-flattened-components, NeonFilterBar) {
+    @include components.filter-bar;
+  }
 }

package/src/sass/variables-global.scss

@@ -1389,4 +1389,11 @@
    * Min height of the sticky buttons container
    */
   --neon-min-height-sticky-buttons: 72rem;
+
+  /* filter */
+  /**
+   * @component NeonFilter
+   * Width of the filter content when open
+   */
+  --neon-width-filter-content: 250rem;
 }