@muenchen/muc-patternlab-vue 1.13.0-beta.6 → 1.13.0-beta.7

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)}.wrapper[data-v-a20e4a10]{display:flex}.wrapper[data-v-a20e4a10]>*{margin:0 8px}.centered-text[data-v-a20e4a10]{display:flex;justify-content:center;align-items:center;height:100%}.display-listbox[data-v-0f229e1b]{display:block!important}.muc-divider[data-v-5c768acc]{margin-top:8px;margin-bottom:16px}@media screen and (width >992px){.muc-intro-content[data-v-5c768acc]{width:66.6%}}
+.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)}.wrapper[data-v-a20e4a10]{display:flex}.wrapper[data-v-a20e4a10]>*{margin:0 8px}.centered-text[data-v-a20e4a10]{display:flex;justify-content:center;align-items:center;height:100%}.display-listbox[data-v-e39e3aae]{display:block!important}.muc-divider[data-v-5c768acc]{margin-top:8px;margin-bottom:16px}@media screen and (width >992px){.muc-intro-content[data-v-5c768acc]{width:66.6%}}

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.6",
+  "version": "1.13.0-beta.7",
   "private": false,
   "module": "./dist/muc-patternlab-vue.es.js",
   "types": "./dist/types/index.d.ts",

package/src/components/Form/MucSelect.stories.ts

@@ -7,7 +7,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: `Choose from an option from a given list - multiple can also be allowed. The design is similar to the text input with autocompletion.
+        component: `Choose from an option from a given list of objects or strings - multiple can also be allowed. The design is similar to the text input with autocompletion.
 
 [🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-combobox)
 `,
@@ -18,17 +18,52 @@ export default {
 
 export const Default = {
   args: {
-    modelValue: "Option 1",
-    items: ["Option 1", "Option 2", "Option 3", "Option 4"],
+    modelValue: {
+      id: "1",
+      name: "Object 1",
+      quantity: 1,
+    },
+    items: [
+      {
+        id: "1",
+        name: "Object 1",
+        quantity: 1,
+      },
+      {
+        id: "2",
+        name: "Object 2",
+        quantity: 2,
+      },
+      {
+        id: "3",
+        name: "Object 3",
+        quantity: 3,
+      },
+      {
+        id: "4",
+        name: "Object 4",
+        quantity: 4,
+      },
+    ],
     label: "This is a label",
     hint: "This is a hint",
+    itemTitle: "name",
   },
 };
 
 export const MultiSelect = {
   args: {
     ...Default.args,
-    label: "Select multiple options",
+    label: "Select multiple objects",
     multiple: true,
   },
 };
+
+export const StringSelect = {
+  args: {
+    modelValue: "String 1",
+    items: ["String 1", "String 2", "String 3", "String 4"],
+    label: "Select strings",
+    hint: "This is a hint",
+  },
+};

package/src/components/Form/MucSelect.vue

@@ -41,7 +41,10 @@
           :class="[isActiveClass(option), isSelectedClass(option)]"
           @click="clicked(option)"
         >
-          {{ option }}
+          <MucSelectItem
+            :item="option"
+            :item-label="itemTitle"
+          />
         </li>
         <li
           v-if="noItemsFound"
@@ -64,6 +67,8 @@
 import { computed, ref, watch } from "vue";
 
 import useOnClickOutside from "../../composables/useOnClickOutside";
+import MucSelectItem from "./MucSelectItem.vue";
+import { ItemAsObject, MucSelectItemTypes } from "./MucSelectTypes";
 
 /**
  * Ref ot the component
@@ -73,9 +78,12 @@ const selectComponentRef = ref();
 /**
  * Exposed selected value / values
  */
-const selectedValues = defineModel<string | string[]>("modelValue", {
-  default: [],
-});
+const selectedValues = defineModel<MucSelectItemTypes | MucSelectItemTypes[]>(
+  "modelValue",
+  {
+    default: [],
+  }
+);
 
 /**
  * If list of items is shown
@@ -85,7 +93,7 @@ const showItems = ref<boolean>(false);
 /**
  * Last interacted item - selected or deselected
  */
-const lastClickedItem = ref<string>();
+const lastClickedItem = ref<MucSelectItemTypes>();
 
 /**
  * If no items found after filtering
@@ -95,14 +103,14 @@ const noItemsFound = ref<boolean>(false);
 /**
  * Index of currently actively hovered item or selected item
  */
-const activeItem = ref<string>();
+const activeItem = ref<MucSelectItemTypes>();
 
 const props = withDefaults(
   defineProps<{
     /**
      * List of items to be available
      */
-    items: string[];
+    items: MucSelectItemTypes[];
 
     /**
      * Optional label shown above the input
@@ -123,10 +131,16 @@ const props = withDefaults(
      * Optional message shown no item is found after filtering
      */
     noItemFoundMessage?: string;
+
+    /**
+     * Property that contains the value to be displayed in the list when a list of objects is used
+     */
+    itemTitle?: string;
   }>(),
   {
     multiple: false,
     noItemFoundMessage: "No items found.",
+    itemTitle: "title",
   }
 );
 
@@ -159,7 +173,7 @@ useOnClickOutside(selectComponentRef, () => {
  * Actions upon clicking an item
  * @param clickedValue clicked item value
  */
-const clicked = (clickedValue: string) => {
+const clicked = (clickedValue: MucSelectItemTypes) => {
   lastClickedItem.value = clickedValue;
 
   props.multiple
@@ -173,32 +187,68 @@ const clicked = (clickedValue: string) => {
  * Update the modelValue with the given. Performs conversion to string if necessary.
  * @param newValue the new value
  */
-const updateMVSingle = (newValue: string) => {
-  if (typeof selectedValues.value === "object")
+const updateMVSingle = (newValue: MucSelectItemTypes) => {
+  if (Array.isArray(selectedValues.value))
     selectedValues.value = selectedValues.value.join(" ");
 
-  selectedValues.value = selectedValues.value === newValue ? "" : newValue;
+  if (
+    typeof selectedValues.value !== "string" &&
+    typeof newValue !== "string"
+  ) {
+    selectedValues.value =
+      selectedValues.value[props.itemTitle] === newValue[props.itemTitle]
+        ? ""
+        : newValue;
+  } else {
+    selectedValues.value = selectedValues.value === newValue ? "" : newValue;
+  }
 };
 
 /**
  * Update the modelValue with the given. Performs conversion to array if necessary.
  * @param newValue the new value
  */
-const updateMVMultiple = (newValue: string) => {
-  if (typeof selectedValues.value === "string")
+const updateMVMultiple = (newValue: MucSelectItemTypes) => {
+  if (!Array.isArray(selectedValues.value))
     selectedValues.value = [selectedValues.value];
 
-  selectedValues.value = selectedValues.value.includes(newValue)
-    ? selectedValues.value.filter((val: string) => val !== newValue)
-    : [...selectedValues.value, newValue];
+  if (Array.isArray(selectedValues.value)) {
+    if (typeof newValue === "string") {
+      selectedValues.value = selectedValues.value
+        .map((item: string) => item)
+        .includes(newValue)
+        ? selectedValues.value.filter((val: string) => val !== newValue)
+        : [...selectedValues.value, newValue];
+    } else {
+      selectedValues.value = selectedValues.value
+        .map((item: ItemAsObject) => item[props.itemTitle])
+        .includes(newValue[props.itemTitle])
+        ? selectedValues.value.filter(
+            (val: ItemAsObject) =>
+              val[props.itemTitle] !== newValue[props.itemTitle]
+          )
+        : [...selectedValues.value, newValue];
+    }
+  }
 };
 
 /**
  * Converts the displayed text depending on the selection mode
  */
 const outputTransformed = computed(() => {
-  if (typeof selectedValues.value === "string") return selectedValues.value;
-  return selectedValues.value.join(props.multiple ? ", " : " ");
+  if (typeof selectedValues.value === "string") {
+    return selectedValues.value;
+  } else if (!Array.isArray(selectedValues.value)) {
+    return selectedValues.value[props.itemTitle].toString();
+  } else if (
+    selectedValues.value.every((item: any) => typeof item === "string")
+  ) {
+    return selectedValues.value.join(props.multiple ? ", " : " ");
+  } else {
+    return selectedValues.value
+      .map((item) => item[props.itemTitle].toString())
+      .join(props.multiple ? ", " : " ");
+  }
 });
 
 watch(outputTransformed, (newOutput) => {
@@ -226,7 +276,18 @@ const displayedItems = computed(() =>
  */
 const updateDisplayedItems = (search: string) => {
   noItemsFound.value = false;
-  const filteredItems = props.items.filter((item) => item.includes(search));
+  const filteredItems = props.items.every(
+    (item: any) => typeof item === "string"
+  )
+    ? props.items.filter((item) =>
+        item.toLowerCase().includes(search.toLowerCase())
+      )
+    : props.items.filter((item: any) =>
+        item[props.itemTitle]
+          .toString()
+          .toLowerCase()
+          .includes(search.toLowerCase())
+      );
   if (filteredItems.length === 0) {
     noItemsFound.value = true;
   }
@@ -237,15 +298,30 @@ const updateDisplayedItems = (search: string) => {
  * Apply active class to hovered item
  * @param value of item
  */
-const isActiveClass = (value: string) =>
+const isActiveClass = (value: MucSelectItemTypes) =>
   value === activeItem.value ? "active" : "";
 
 /**
  * Apply selected class to selected items
  * @param value of item
  */
-const isSelectedClass = (value: string) =>
-  selectedValues.value.includes(value) ? "selected" : "";
+const isSelectedClass = (value: MucSelectItemTypes) => {
+  if (typeof value === "string")
+    return selectedValues.value.includes(value) ? "selected" : "";
+
+  if (Array.isArray(selectedValues.value)) {
+    return selectedValues.value
+      .map((item) => item[props.itemTitle])
+      .includes(value[props.itemTitle])
+      ? "selected"
+      : "";
+  }
+  if (typeof selectedValues.value !== "string") {
+    return selectedValues.value[props.itemTitle] === value[props.itemTitle]
+      ? "selected"
+      : "";
+  }
+};
 
 /**
  * Resets the currently activeItem

package/src/components/Form/MucSelectItem.vue

@@ -0,0 +1,25 @@
+<template>
+  <span>
+    {{ itemText }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { MucSelectItemTypes } from "./MucSelectTypes";
+
+const props = defineProps<{
+  item: MucSelectItemTypes;
+  itemLabel: string;
+}>();
+
+/**
+ * Defines the displayed value
+ */
+const itemText = computed(() =>
+  typeof props.item === "string"
+    ? props.item
+    : props.item[props.itemLabel].toString()
+);
+</script>

package/src/components/Form/MucSelectTypes.ts

@@ -0,0 +1,8 @@
+export interface ItemAsObject {
+  [key: string]: any;
+}
+
+/**
+ * Different possible types of items
+ */
+export type MucSelectItemTypes = string | ItemAsObject;