@muenchen/muc-patternlab-vue 1.13.0-beta.3 → 1.13.0-beta.4

package/dist/style.css

@@ -1 +1 @@
-.m-banner--success[data-v-53bc7eca]{background-color:#f1f6f3;border-bottom:1px solid #3a7f53}.m-callout--success[data-v-e6cf4104]{background-color:#f1f6f3;border-color:#95b9a2}.m-callout--success .m-callout__icon[data-v-e6cf4104]{background-color:#3a7f53;box-shadow:0 .3125rem .625rem #005a9f33}.m-callout--error[data-v-e6cf4104]{background-color:#f8f2f2;border-color:#c79a9b}.m-callout--error .m-callout__icon[data-v-e6cf4104]{background-color:#984447;box-shadow:0 .3125rem .625rem #005a9f33}.card[data-v-acf0a1dd]{cursor:pointer;border:solid 1px var(--color-neutrals-blue);border-bottom:solid 5px var(--color-brand-main-blue);transition:background-color ease-in .15s}.card[data-v-acf0a1dd]:hover{background-color:#f1f1f1}.card-content[data-v-acf0a1dd]{padding:32px 24px}.card-header[data-v-acf0a1dd]{display:flex}.card-tagline[data-v-acf0a1dd]{font-size:16px;font-family:Open Sans,sans-serif;color:#005a9f;font-weight:700;line-height:24px;word-wrap:break-word;padding-bottom:4px}.muc-divider[data-v-acf0a1dd]{margin-top:16px;margin-bottom:16px}@media all and (min-width: 992px){.card-container[data-v-6740df8f]{padding-left:0;padding-right:0;display:grid;grid-template-columns:repeat(auto-fit,384px);grid-column-gap:32px;grid-row-gap:32px}}@media all and (max-width: 992px){.card-container[data-v-6740df8f]{padding-left:0;padding-right:0;display:inline-grid;grid-template-columns:1fr;grid-row-gap:32px}}.divider-border[data-v-a2b37f5b]{border-bottom:1px solid var(--color-neutrals-blue)}.display-listbox[data-v-d28d341e]{display:block!important}.muc-divider[data-v-9ad3adc7]{margin-top:8px;margin-bottom:16px}
+.m-banner--success[data-v-53bc7eca]{background-color:#f1f6f3;border-bottom:1px solid #3a7f53}.m-callout--success[data-v-e6cf4104]{background-color:#f1f6f3;border-color:#95b9a2}.m-callout--success .m-callout__icon[data-v-e6cf4104]{background-color:#3a7f53;box-shadow:0 .3125rem .625rem #005a9f33}.m-callout--error[data-v-e6cf4104]{background-color:#f8f2f2;border-color:#c79a9b}.m-callout--error .m-callout__icon[data-v-e6cf4104]{background-color:#984447;box-shadow:0 .3125rem .625rem #005a9f33}.card[data-v-acf0a1dd]{cursor:pointer;border:solid 1px var(--color-neutrals-blue);border-bottom:solid 5px var(--color-brand-main-blue);transition:background-color ease-in .15s}.card[data-v-acf0a1dd]:hover{background-color:#f1f1f1}.card-content[data-v-acf0a1dd]{padding:32px 24px}.card-header[data-v-acf0a1dd]{display:flex}.card-tagline[data-v-acf0a1dd]{font-size:16px;font-family:Open Sans,sans-serif;color:#005a9f;font-weight:700;line-height:24px;word-wrap:break-word;padding-bottom:4px}.muc-divider[data-v-acf0a1dd]{margin-top:16px;margin-bottom:16px}@media all and (min-width: 992px){.card-container[data-v-6740df8f]{padding-left:0;padding-right:0;display:grid;grid-template-columns:repeat(auto-fit,384px);grid-column-gap:32px;grid-row-gap:32px}}@media all and (max-width: 992px){.card-container[data-v-6740df8f]{padding-left:0;padding-right:0;display:inline-grid;grid-template-columns:1fr;grid-row-gap:32px}}.divider-border[data-v-a2b37f5b]{border-bottom:1px solid var(--color-neutrals-blue)}.display-listbox[data-v-0f229e1b]{display:block!important}.muc-divider[data-v-9ad3adc7]{margin-top:8px;margin-bottom:16px}

package/package.json

@@ -3,7 +3,7 @@
   "author": "FabianWilms",
   "description": "A vue component library of some of the components available from https://patternlab.muenchen.space",
   "license": "MIT",
-  "version": "1.13.0-beta.3",
+  "version": "1.13.0-beta.4",
   "private": false,
   "module": "./dist/muc-patternlab-vue.es.js",
   "types": "./dist/types/index.d.ts",
@@ -77,7 +77,7 @@
     "storybook": "^8.0.9",
     "typescript": "~5.5.0",
     "vite": "^5.0.11",
-    "vite-plugin-dts": "^3.0.0",
+    "vite-plugin-dts": "^4.0.0",
     "vitest": "^2.0.0",
     "vue-tsc": "^2.0.0"
   }

package/src/components/Form/MucSelect.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="m-form-group">
+  <div
+    class="m-form-group"
+    ref="selectComponentRef"
+  >
     <label class="m-label">
       {{ label }}
     </label>
@@ -10,9 +13,8 @@
       <input
         type="text"
         class="m-input m-combobox m-combobox--single"
-        :value="outputTransformed"
-        @click="toggleItemList"
-        readonly
+        v-model="searchValue"
+        @click="openItemList"
       />
       <span
         class="m-input__trigger"
@@ -32,7 +34,7 @@
         @mouseleave="emptyActiveItem"
       >
         <li
-          v-for="(option, index) in props.items"
+          v-for="(option, index) in displayedItems"
           :key="index"
           class="option"
           @mouseenter="activeItem = option"
@@ -41,6 +43,12 @@
         >
           {{ option }}
         </li>
+        <li
+          v-if="noItemsFound"
+          class="option"
+        >
+          {{ noItemFoundMessage }}
+        </li>
       </ul>
     </div>
     <p
@@ -53,7 +61,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
+
+import useOnClickOutside from "../../composables/useOnClickOutside";
+
+/**
+ * Ref ot the component
+ */
+const selectComponentRef = ref();
 
 /**
  * Exposed selected value / values
@@ -72,6 +87,11 @@ const showItems = ref<boolean>(false);
  */
 const lastClickedItem = ref<string>();
 
+/**
+ * If no items found after filtering
+ */
+const noItemsFound = ref<boolean>(false);
+
 /**
  * Index of currently actively hovered item or selected item
  */
@@ -98,9 +118,15 @@ const props = withDefaults(
      * Allow multiple selectable items
      */
     multiple?: boolean;
+
+    /**
+     * Optional message shown no item is found after filtering
+     */
+    noItemFoundMessage?: string;
   }>(),
   {
     multiple: false,
+    noItemFoundMessage: "No items found.",
   }
 );
 
@@ -112,6 +138,23 @@ const toggleItemList = () => {
   activeItem.value = lastClickedItem.value;
 };
 
+/**
+ * Opens the list of items and sets the previously selected item as active
+ */
+const openItemList = () => {
+  showItems.value = true;
+  activeItem.value = lastClickedItem.value;
+  searchValue.value = "";
+};
+
+/**
+ * Closes the list after clicking outside the component
+ */
+useOnClickOutside(selectComponentRef, () => {
+  showItems.value = false;
+  searchValue.value = outputTransformed.value;
+});
+
 /**
  * Actions upon clicking an item
  * @param clickedValue clicked item value
@@ -158,6 +201,38 @@ const outputTransformed = computed(() => {
   return selectedValues.value.join(props.multiple ? ", " : " ");
 });
 
+watch(outputTransformed, (newOutput) => {
+  searchValue.value = newOutput;
+});
+
+/**
+ * Current search value
+ */
+const searchValue = ref<string>(outputTransformed.value);
+
+/**
+ * Determines whether all or only the searched elements are displayed
+ */
+const displayedItems = computed(() =>
+  searchValue.value == outputTransformed.value
+    ? props.items
+    : updateDisplayedItems(searchValue.value)
+);
+
+/**
+ * Filters the list of elements after entering the search string
+ * @param search the search string
+ * @return list of searched items
+ */
+const updateDisplayedItems = (search: string) => {
+  noItemsFound.value = false;
+  const filteredItems = props.items.filter((item) => item.includes(search));
+  if (filteredItems.length === 0) {
+    noItemsFound.value = true;
+  }
+  return filteredItems;
+};
+
 /**
  * Apply active class to hovered item
  * @param value of item
@@ -188,7 +263,7 @@ const displayOptions = computed(() =>
  * Switches between the selection modes according to multiple. Checkboxes are shown on the multiple select
  */
 const selectType = computed(() =>
-  props.multiple
+  props.multiple && !noItemsFound.value
     ? "m-input-wrapper--multiselect multiselect"
     : "m-input-wrapper--select"
 );

package/src/composables/useOnClickOutside.ts

@@ -0,0 +1,24 @@
+import { onBeforeUnmount, onMounted } from "vue";
+
+export default function useOnClickOutside(component: any, callback: any) {
+  if (!component) return;
+  const listener = (event: any) => {
+    if (
+      event.target !== component.value &&
+      event.composedPath().includes(component.value)
+    ) {
+      return;
+    }
+    if (typeof callback === "function") {
+      callback();
+    }
+  };
+  onMounted(() => {
+    window.addEventListener("click", listener);
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("click", listener);
+  });
+
+  return { listener };
+}