@mindful-web/marko-web-search 1.0.0

package/.eslintignore

@@ -0,0 +1 @@
+*.marko.js

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Parameter1 LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/browser/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('../../../eslintrc.browser');

package/browser/index.js

@@ -0,0 +1,9 @@
+const ToggleFilterContainer = () => import(/* webpackChunkName: "marko-web-search-toggle-filter-container" */ './toggle-filters-button.vue');
+const ToggleFilter = () => import(/* webpackChunkName: "marko-web-search-toggle-filter" */ './toggle-filter-button.vue');
+const SortSelect = () => import(/* webpackChunkName: "marko-web-search-sort-select" */ './sort-select.vue');
+
+export default (Browser) => {
+  Browser.register('MarkoWebSearchToggleFilterContainer', ToggleFilterContainer);
+  Browser.register('MarkoWebSearchToggleFilter', ToggleFilter);
+  Browser.register('MarkoWebSearchSortSelect', SortSelect);
+};

package/browser/sort-select.vue

@@ -0,0 +1,37 @@
+<template>
+  <select class="custom-select" @change="onChange">
+    <option
+      v-for="option in options"
+      :key="option.id"
+      :selected="option.id === selectedId"
+      :value="option.id"
+    >
+      {{ option.label }}
+    </option>
+  </select>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+    selectedId: {
+      type: String,
+      default: 'PUBLISHED',
+    },
+  },
+  methods: {
+    onChange(event) {
+      const { value } = event.target;
+      const url = new URL(window.location);
+      const params = new URLSearchParams(window.location.search);
+      params.set('sortField', value);
+      url.search = `${params}`;
+      window.location.href = `${url}`;
+    },
+  },
+};
+</script>

package/browser/toggle-filter-button.vue

@@ -0,0 +1,69 @@
+<template>
+  <button
+    :class="className"
+    type="button"
+    :aria-label="buttonLabel"
+    @click="toggle"
+  >
+    <span>{{ label }}</span>
+    <component :is="icon" />
+  </button>
+</template>
+
+<script>
+import IconChevronDown from '@mindful-web/marko-web-icons/browser/chevron-down.vue';
+import IconChevronUp from '@mindful-web/marko-web-icons/browser/chevron-up.vue';
+
+export default {
+  components: {
+    IconChevronDown,
+    IconChevronUp,
+  },
+  props: {
+    className: {
+      type: String,
+      default: 'marko-web-search-toggle-filter',
+    },
+    target: {
+      type: String,
+      required: true,
+    },
+    toggleClass: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+  },
+  data: () => ({
+    expanded: true,
+    iconName: 'chevron-up',
+    expandedIconName: 'chevron-down',
+  }),
+
+  computed: {
+    buttonLabel() {
+      return `Toggle ${this.label} Filter`;
+    },
+    icon() {
+      if (this.expanded) return `icon-${this.expandedIconName}`;
+      return `icon-${this.iconName}`;
+    },
+  },
+
+  watch: {
+    expanded() {
+      const element = document.querySelector(this.target);
+      element.classList.toggle(this.toggleClass);
+    },
+  },
+
+  methods: {
+    toggle() {
+      this.expanded = !this.expanded;
+    },
+  },
+};
+</script>

package/browser/toggle-filters-button.vue

@@ -0,0 +1,87 @@
+<template>
+  <button
+    :class="className"
+    type="button"
+    :aria-label="buttonLabel"
+    @click="toggle"
+  >
+    <span>{{ label }}</span>
+    <component :is="icon" />
+  </button>
+</template>
+
+<script>
+import IconChevronDown from '@mindful-web/marko-web-icons/browser/chevron-down.vue';
+import IconChevronUp from '@mindful-web/marko-web-icons/browser/chevron-up.vue';
+
+export default {
+  components: {
+    IconChevronDown,
+    IconChevronUp,
+  },
+  props: {
+    className: {
+      type: String,
+      default: 'marko-web-search-toggle-filter-container',
+    },
+    openMediaQuery: {
+      type: String,
+      default: '(min-width: 992px)',
+    },
+    target: {
+      type: String,
+      required: true,
+    },
+    toggleClass: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      default: 'Filters',
+    },
+    buttonLabel: {
+      type: String,
+      default: 'Toggle Filters',
+    },
+  },
+  data: () => ({
+    expanded: false,
+    iconName: 'chevron-up',
+    expandedIconName: 'chevron-down',
+  }),
+
+  computed: {
+    icon() {
+      if (this.expanded) return `icon-${this.expandedIconName}`;
+      return `icon-${this.iconName}`;
+    },
+  },
+
+  watch: {
+    expanded() {
+      const element = document.querySelector(this.target);
+      element.classList.toggle(this.toggleClass);
+    },
+  },
+
+  mounted() {
+    const mql = window.matchMedia(this.openMediaQuery);
+    this.handleMediaQueryState(mql.matches);
+    mql.addEventListener('change', ({ matches }) => {
+      this.handleMediaQueryState(matches);
+    });
+  },
+
+  methods: {
+    handleMediaQueryState(matches) {
+      this.expanded = matches;
+    },
+
+    toggle() {
+      this.hasUserInteraction = true;
+      this.expanded = !this.expanded;
+    },
+  },
+};
+</script>

package/components/build-href.marko

@@ -0,0 +1,14 @@
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+import { cleanPath } from "@mindful-web/utils";
+import { get } from "@mindful-web/object-path";
+
+$ const { req, $markoWebSearch: search } = out.global;
+$ const path = defaultValue(input.path, req.path);
+$ const rootAlias = get(search, "config.rootAlias");
+
+$ const omit = rootAlias && rootAlias !== "search" ? { assignedToWebsiteSectionIds: true } : {}
+
+$ const queryString = search.buildQueryString(input.queryValues, omit);
+$ const href = `/${cleanPath(path)}${queryString}`;
+
+<${input.renderBody} href=href />

package/components/build-href.marko.js

@@ -0,0 +1,46 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-search$1.0.0/components/build-href.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    cleanPath = module_utils_module.cleanPath,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { req, $markoWebSearch: search } = out.global;
+
+  const path = defaultValue(input.path, req.path);
+
+  const rootAlias = get(search, "config.rootAlias");
+
+  const omit = rootAlias && rootAlias !== "search" ? { assignedToWebsiteSectionIds: true } : {}
+
+  const queryString = search.buildQueryString(input.queryValues, omit);
+
+  const href = `/${cleanPath(path)}${queryString}`;
+
+  marko_dynamicTag(out, input.renderBody, function() {
+    return {
+        href: href
+      };
+  }, null, null, null, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-search$1.0.0/components/build-href.marko"
+  };

package/components/filters/content-types.marko

@@ -0,0 +1,12 @@
+import { isFunction } from '@mindful-web/utils';
+
+$ const { $markoWebSearch: search, i18n } = out.global;
+
+$ const title = isFunction(i18n) ? i18n("Content Types") : "Content Types";
+
+<marko-web-search-filter-block
+  filter-key="contentTypes"
+  items=search.config.contentTypeObjects
+>
+  <@title value=title />
+</marko-web-search-filter-block>

package/components/filters/content-types.marko.js

@@ -0,0 +1,40 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-search$1.0.0/components/filters/content-types.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    isFunction = module_utils_module.isFunction,
+    marko_web_search_filter_block_template = require("./filter-block.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_search_filter_block_tag = marko_loadTag(marko_web_search_filter_block_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { $markoWebSearch: search, i18n } = out.global;
+
+  const title = isFunction(i18n) ? i18n("Content Types") : "Content Types";
+
+  marko_web_search_filter_block_tag({
+      filterKey: "contentTypes",
+      items: search.config.contentTypeObjects,
+      title: {
+          value: title
+        }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-search$1.0.0/components/filters/content-types.marko",
+    tags: [
+      "./filter-block.marko"
+    ]
+  };

package/components/filters/filter-block.marko

@@ -0,0 +1,66 @@
+import { get, getAsArray, getAsObject } from "@mindful-web/object-path";
+import { dasherize } from "@mindful-web/inflector";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+import { isFunction } from '@mindful-web/utils';
+
+$ const { $markoWebSearch: search, i18n } = out.global;
+
+$ const blockName = "marko-web-search-filter";
+$ const items = getAsArray(input.items);
+$ const { title, filterKey } = input;
+$ const item = getAsObject(input.item);
+$ const itemIdPath = defaultValue(item.idPath, "id");
+$ const itemLabelPath = defaultValue(item.labelPath, "label");
+$ const titleModifier = dasherize(filterKey);
+
+<if(items.length)>
+  <marko-web-block name=blockName modifiers=input.modifiers>
+    <if(title)>
+      <if(title.renderBlock)>
+        <${title.renderBlock} />
+      </if>
+      <else>
+        <marko-web-browser-component
+          name="MarkoWebSearchToggleFilter"
+          props={
+            label: title.value,
+            target: `.${blockName}__items--${titleModifier}`,
+            toggleClass: `${blockName}__items--open`,
+          }
+        />
+      </else>
+    </if>
+    <marko-web-element
+      tag="ul"
+      block-name=blockName
+      name="items"
+      modifiers=["open", titleModifier]
+    >
+      <for|node| of=items>
+        $ const id = get(node, itemIdPath);
+        $ const label = get(node, itemLabelPath);
+        $ const value = search.isArrayParam(filterKey) ? [id] : id;
+        $ const isSelected = search.isInputValueSelectedFor(filterKey, value);
+        $ const modifiers = isSelected ? ["selected"] : [];
+        <marko-web-element ...item.element tag="li" block-name=blockName name="item" modifiers=modifiers>
+          <if(item.renderBody)>
+            <!-- custom filter item rendering -->
+            <${item.renderBody}
+              node=node
+              block-name=blockName
+              id=id
+              label=`${isFunction(i18n) ? i18n(label) : label}`
+              is-selected=isSelected
+            />
+          </if>
+          <else>
+            <!-- default item rendering -->
+            <marko-web-search-set-filter-value-link name=filterKey value=id reset-class=`${blockName}__clear-item`>
+              ${isFunction(i18n) ? i18n(label) : label}
+            </marko-web-search-set-filter-value-link>
+          </else>
+        </marko-web-element>
+      </for>
+    </marko-web-element>
+  </marko-web-block>
+</if>

package/components/filters/filter-block.marko.js

@@ -0,0 +1,151 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-search$1.0.0/components/filters/filter-block.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    getAsArray = module_objectPath_module.getAsArray,
+    getAsObject = module_objectPath_module.getAsObject,
+    module_inflector_module = require("@mindful-web/inflector"),
+    inflector_module = module_inflector_module.default || module_inflector_module,
+    dasherize = module_inflector_module.dasherize,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    isFunction = module_utils_module.isFunction,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_web_browser_component_template = require("@mindful-web/marko-web/components/browser-component.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template),
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_web_search_set_filter_value_link_template = require("../links/set-filter-value.marko"),
+    marko_web_search_set_filter_value_link_tag = marko_loadTag(marko_web_search_set_filter_value_link_template),
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_element_template = require("@mindful-web/marko-web/components/element/index.marko"),
+    marko_web_element_tag = marko_loadTag(marko_web_element_template),
+    marko_web_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { $markoWebSearch: search, i18n } = out.global;
+
+  const blockName = "marko-web-search-filter";
+
+  const items = getAsArray(input.items);
+
+  const { title, filterKey } = input;
+
+  const item = getAsObject(input.item);
+
+  const itemIdPath = defaultValue(item.idPath, "id");
+
+  const itemLabelPath = defaultValue(item.labelPath, "label");
+
+  const titleModifier = dasherize(filterKey);
+
+  if (items.length) {
+    marko_web_block_tag({
+        name: blockName,
+        tag: "div",
+        modifiers: input.modifiers,
+        renderBody: function(out) {
+          if (title) {
+            if (title.renderBlock) {
+              marko_dynamicTag(out, title.renderBlock, null, null, null, null, __component, "1");
+            } else {
+              marko_web_browser_component_tag({
+                  name: "MarkoWebSearchToggleFilter",
+                  props: {
+                      label: title.value,
+                      target: (("." + blockName) + "__items--") + titleModifier,
+                      toggleClass: blockName + "__items--open"
+                    }
+                }, out, __component, "2");
+            }
+          }
+
+          marko_web_element_tag({
+              name: "items",
+              tag: "ul",
+              blockName: blockName,
+              modifiers: [
+                  "open",
+                  titleModifier
+                ],
+              renderBody: function(out) {
+                var $for$0 = 0;
+
+                marko_forOf(items, function(node) {
+                  const id = get(node, itemIdPath);
+
+                  const label = get(node, itemLabelPath);
+
+                  const value = search.isArrayParam(filterKey) ? [id] : id;
+
+                  const isSelected = search.isInputValueSelectedFor(filterKey, value);
+
+                  const modifiers = isSelected ? ["selected"] : [];
+
+                  var $keyScope$0 = "[" + (($for$0++) + "]");
+
+                  marko_web_element_tag(marko_assign({
+                      name: "default",
+                      tag: "div"
+                    }, item.element, {
+                      tag: "li",
+                      blockName: blockName,
+                      name: "item",
+                      modifiers: modifiers,
+                      renderBody: function(out) {
+                        if (item.renderBody) {
+                          marko_dynamicTag(out, item.renderBody, function() {
+                            return {
+                                node: node,
+                                "block-name": blockName,
+                                id: id,
+                                label: "" + (isFunction(i18n) ? i18n(label) : label),
+                                "is-selected": isSelected
+                              };
+                          }, null, null, null, __component, "5" + $keyScope$0);
+                        } else {
+                          marko_web_search_set_filter_value_link_tag({
+                              name: filterKey,
+                              value: id,
+                              resetClass: blockName + "__clear-item",
+                              renderBody: function(out) {
+                                out.w(marko_escapeXml(isFunction(i18n) ? i18n(label) : label));
+                              }
+                            }, out, __component, "6" + $keyScope$0);
+                        }
+                      }
+                    }), out, __component, "4" + $keyScope$0);
+                });
+              }
+            }, out, __component, "3");
+        }
+      }, out, __component, "0");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-search$1.0.0/components/filters/filter-block.marko",
+    tags: [
+      "@mindful-web/marko-web/components/browser-component.marko",
+      "../links/set-filter-value.marko",
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web/components/element/block.marko"
+    ]
+  };

package/components/filters/filter-container.marko

@@ -0,0 +1,29 @@
+import { getAsObject } from "@mindful-web/object-path";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const blockName = "marko-web-search-filter-container";
+$ const title = getAsObject(input, "title");
+
+<marko-web-block name=blockName modifiers=input.modifiers>
+  <if(input.beforeTitle)>
+    <${input.beforeTitle} block-name=blockName />
+  </if>
+  <marko-web-element block-name=blockName name="title">
+    <if(title.renderBlock)>
+      <${title.renderBlock} />
+    </if>
+    <else>
+      <marko-web-browser-component
+        name="MarkoWebSearchToggleFilterContainer"
+        props={
+          label: title.value,
+          target: `.${blockName}__sections`,
+          toggleClass: `${blockName}__sections--open`,
+        }
+      />
+    </else>
+  </marko-web-element>
+  <marko-web-element block-name=blockName name="sections">
+    <${input.renderBody} />
+  </marko-web-element>
+</marko-web-block>

package/components/filters/filter-container.marko.js

@@ -0,0 +1,85 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-search$1.0.0/components/filters/filter-container.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    getAsObject = module_objectPath_module.getAsObject,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_web_browser_component_template = require("@mindful-web/marko-web/components/browser-component.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template),
+    marko_web_element_template = require("@mindful-web/marko-web/components/element/index.marko"),
+    marko_web_element_tag = marko_loadTag(marko_web_element_template),
+    marko_web_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const blockName = "marko-web-search-filter-container";
+
+  const title = getAsObject(input, "title");
+
+  marko_web_block_tag({
+      name: blockName,
+      tag: "div",
+      modifiers: input.modifiers,
+      renderBody: function(out) {
+        if (input.beforeTitle) {
+          marko_dynamicTag(out, input.beforeTitle, function() {
+            return {
+                "block-name": blockName
+              };
+          }, null, null, null, __component, "1");
+        }
+
+        marko_web_element_tag({
+            name: "title",
+            tag: "div",
+            blockName: blockName,
+            renderBody: function(out) {
+              if (title.renderBlock) {
+                marko_dynamicTag(out, title.renderBlock, null, null, null, null, __component, "3");
+              } else {
+                marko_web_browser_component_tag({
+                    name: "MarkoWebSearchToggleFilterContainer",
+                    props: {
+                        label: title.value,
+                        target: ("." + blockName) + "__sections",
+                        toggleClass: blockName + "__sections--open"
+                      }
+                  }, out, __component, "4");
+              }
+            }
+          }, out, __component, "2");
+
+        marko_web_element_tag({
+            name: "sections",
+            tag: "div",
+            blockName: blockName,
+            renderBody: function(out) {
+              marko_dynamicTag(out, input.renderBody, null, null, null, null, __component, "6");
+            }
+          }, out, __component, "5");
+      }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-search$1.0.0/components/filters/filter-container.marko",
+    tags: [
+      "@mindful-web/marko-web/components/browser-component.marko",
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web/components/element/block.marko"
+    ]
+  };