@dative-gpi/foundation-shared-components 1.0.36 → 1.0.37

package/components/fields/FSAutocompleteField.vue

@@ -49,7 +49,7 @@
             #prepend-inner
           >
             <slot
-              v-if="selectedItem"
+              v-if="selectedItem && showExtra"
               name="item-prepend"
               v-bind="{ item: selectedItem }"
             />
@@ -61,7 +61,7 @@
               :wrap="false"
             >
               <slot
-                v-if="selectedItem"
+                v-if="selectedItem && showExtra"
                 name="item-append"
                 v-bind="{ item: selectedItem }"
               />
@@ -73,7 +73,7 @@
                   icon="mdi-close"
                   variant="icon"
                   :color="ColorEnum.Dark"
-                  @click="$emit('update:modelValue', null)"
+                  @click="onClear"
                 />
               </slot>
             </FSRow>
@@ -218,7 +218,7 @@
           >
             <FSButton
               variant="icon"
-              :label="$tr('ui.autocomplete.add-item', 'Add new item')"
+              :label="$tr('ui.autocomplete-field.add-item', 'Add new item')"
               :color="ColorEnum.Primary"
               @click="$emit('add:item', search)"
             />
@@ -228,7 +228,7 @@
             padding="4px 3px"
           >
             <FSSpan>
-              {{ $tr("ui.common.no-data", "No data") }}
+              {{ $tr("ui.autocomplete-field.no-data", "No data") }}
             </FSSpan>
           </FSRow>
         </template>
@@ -286,11 +286,11 @@
             :rules="$props.rules"
             :hideDetails="true"
             :menuIcon="null"
-            :class="classes"
             :style="style"
             :modelValue="$props.modelValue"
             @update:modelValue="onSingleChange"
             @click="onClick"
+            @blur="onBlur"
             v-model:search="search"
             v-bind="$attrs"
           >
@@ -360,7 +360,7 @@
               #prepend-inner
             >
               <slot
-                v-if="selectedItem && addExtra"
+                v-if="selectedItem && showExtra"
                 name="item-prepend"
                 v-bind="{ item: selectedItem }"
               />
@@ -370,7 +370,7 @@
               #selection="{ index }"
             >
               <FSSpan
-                v-if="index === $props.modelValue.length - 1 && addExtra"
+                v-if="index === $props.modelValue.length - 1 && showExtra"
               >
                 {{ $props.placeholder }}
               </FSSpan>
@@ -382,7 +382,7 @@
                 :wrap="false"
               >
                 <slot
-                  v-if="selectedItem"
+                  v-if="selectedItem && showExtra"
                   name="item-append"
                   v-bind="{ item: selectedItem }"
                 />
@@ -394,7 +394,7 @@
                     icon="mdi-close"
                     variant="icon"
                     :color="ColorEnum.Dark"
-                    @click="$emit('update:modelValue', null)"
+                    @click="onClear"
                   />
                 </slot>
               </FSRow>
@@ -418,7 +418,7 @@
             >
               <FSRow
                 v-if="allowAddItem"
-                padding="17px"
+                padding="15px"
               >
                 <FSButton
                   variant="icon"
@@ -433,7 +433,7 @@
             >
               <FSRow
                 v-if="!allowAddItem"
-                padding="17px"
+                padding="15px"
               >
                 <FSSpan>
                   {{ $tr("ui.common.no-data", "No data") }}
@@ -483,7 +483,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue, type Slot } from "vue";
+import { computed, defineComponent, type PropType, ref, type Slot, type StyleValue } from "vue";
 
 import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -627,7 +627,7 @@ export default defineComponent({
 
     const dialog = ref(false);
     const search = ref("");
-    const addExtra = ref(true);
+    const showExtra = ref(true);
 
     const style = computed((): StyleValue => {
       if (!props.editable) {
@@ -670,14 +670,6 @@ export default defineComponent({
       };
     });
 
-    const classes = computed((): string[] => {
-      const classNames = ["fs-autocomplete-field"];
-      if (props.multiple) {
-        classNames.push("fs-autocomplete-multiple-field");
-      }
-      return classNames;
-    });
-
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
     const searchItems = computed((): any[] => {
@@ -723,7 +715,7 @@ export default defineComponent({
     });
 
     const mobileValue = computed((): string | null => {
-      if (props.multiple) {
+      if (props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
         return props.placeholder;
       }
       if (selectedItem.value) {
@@ -740,13 +732,11 @@ export default defineComponent({
     };
 
     const onRadioChange = (value: string | null) => {
-      addExtra.value = true;
       emit("update:modelValue", value);
       dialog.value = false;
     };
 
     const onCheckboxChange = (value: string) => {
-      addExtra.value = true;
       if (Array.isArray(props.modelValue)) {
         if (props.modelValue.includes(value)) {
           emit("update:modelValue", props.modelValue.filter((item: any) => item !== value));
@@ -769,15 +759,24 @@ export default defineComponent({
     };
 
     const onSingleChange = (value: string) => {
-      addExtra.value = true;
       emit("update:modelValue", value);
+      if (value && !Array.isArray(value)) {
+        showExtra.value = true;
+      }
+    };
+
+    const onClear = () => {
+      emit("update:modelValue", null);
+      search.value = "";
     };
 
     const onClick = (): void => {
-      addExtra.value = false;
-      if (props.modelValue && !props.multiple) {
-        search.value = "";
-      }
+      search.value = "";
+      showExtra.value = false;
+    };
+
+    const onBlur = () => {
+      showExtra.value = true;
     };
 
     return {
@@ -793,9 +792,8 @@ export default defineComponent({
       ColorEnum,
       listStyle,
       maxHeight,
-      addExtra,
+      showExtra,
       messages,
-      classes,
       dialog,
       search,
       slots,
@@ -804,7 +802,9 @@ export default defineComponent({
       onCheckboxChange,
       onSingleChange,
       onRadioChange,
-      onClick
+      onClear,
+      onClick,
+      onBlur
     };
   }
 });

package/components/fields/FSSelectField.vue

@@ -1,48 +1,86 @@
 <template>
-  <FSCol>
+  <template
+    v-if="$props.loading"
+  >
+    <FSCol>
+      <FSLoader
+        v-if="!$props.hideHeader"
+        variant="text-overline"
+      />
+      <FSLoader
+        v-if="$props.loading"
+        width="100%"
+        :height="['40px', '36px']"
+      />
+    </FSCol>
+  </template>
+  <template
+    v-else
+  >
     <template
       v-if="isExtraSmall"
     >
-      <FSTextField
-        :validationValue="$props.modelValue"
-        :description="$props.description"
-        :hideHeader="$props.hideHeader"
-        :clearable="$props.clearable"
-        :editable="$props.editable"
-        :required="$props.required"
-        :validateOn="validateOn"
-        :label="$props.label"
-        :rules="$props.rules"
-        :messages="messages"
-        :readonly="true"
-        :modelValue="mobileValue"
-        @update:modelValue="$emit('update:modelValue', $event)"
-        @click="openMobileOverlay"
-        v-bind="$attrs"
-      >
-        <template
-          v-for="(_, name) in $slots"
-          v-slot:[name]="slotData"
-        >
-          <slot
-            :name="name"
-            v-bind="slotData"
-          />
-        </template>
-        <template
-          v-if="mobileSelectionProps"
-          #prepend-inner
-        >
-          <slot
-            name="selection-mobile"
-            v-bind="mobileSelectionProps"
-          />
-        </template>
-        <template
-          #append-inner
+      <FSCol>
+        <FSTextField
+          :validationValue="$props.modelValue"
+          :description="$props.description"
+          :hideHeader="$props.hideHeader"
+          :clearable="$props.clearable"
+          :editable="$props.editable"
+          :required="$props.required"
+          :validateOn="validateOn"
+          :label="$props.label"
+          :rules="$props.rules"
+          :messages="messages"
+          :readonly="true"
+          :modelValue="mobileValue"
+          @click="openMobileOverlay"
+          v-bind="$attrs"
         >
-          <slot
-            name="append-inner"
+          <template
+            v-for="(_, name) in $slots"
+            v-slot:[name]="slotData"
+          >
+            <slot
+              :name="name"
+              v-bind="slotData"
+            />
+          </template>
+          <template
+            #prepend-inner
+          >
+            <slot
+              v-if="selectedItem"
+              name="item-prepend"
+              v-bind="{ item: selectedItem }"
+            />
+          </template>
+          <template
+            #clear
+          >
+            <FSRow
+              :wrap="false"
+            >
+              <slot
+                v-if="selectedItem"
+                name="item-append"
+                v-bind="{ item: selectedItem }"
+              />
+              <slot
+                name="clear"
+              >
+                <FSButton
+                  v-if="$props.clearable && $props.editable && !!$props.modelValue"
+                  icon="mdi-close"
+                  variant="icon"
+                  :color="ColorEnum.Dark"
+                  @click="onClear"
+                />
+              </slot>
+            </FSRow>
+          </template>
+          <template
+            #append-inner
           >
             <FSButton
               icon="mdi-chevron-down"
@@ -51,9 +89,45 @@
               :color="ColorEnum.Dark"
               @click="openMobileOverlay"
             />
-          </slot>
-        </template>
-      </FSTextField>
+          </template>
+        </FSTextField>
+        <FSSlideGroup
+          v-if="$props.multiple && Array.isArray($props.modelValue)"
+        >
+          <FSCard
+            v-for="(item, index) in $props.items.filter((item: any) => $props.modelValue.includes(item[$props.itemValue!]))"
+            variant="standard"
+            :height="['40px', '36px']"
+            :color="ColorEnum.Light"
+            :border="false"
+            :key="index"
+          >
+            <FSRow
+              align="center-left"
+              padding="0 8px"
+              :wrap="false"
+            >
+              <slot
+                name="item-prepend"
+                v-bind="{ item }"
+              />
+              <FSSpan>
+                {{ item[$props.itemTitle!] }}
+              </FSSpan>
+              <slot
+                name="item-append"
+                v-bind="{ item }"
+              />
+              <FSButton
+                icon="mdi-close"
+                variant="icon"
+                :color="ColorEnum.Dark"
+                @click="() => onCheckboxChange(item[$props.itemValue!])"
+              />
+            </FSRow>
+          </FSCard>
+        </FSSlideGroup>
+      </FSCol>
       <FSDialogMenu
         v-model="dialog"
       >
@@ -64,7 +138,6 @@
             :maxHeight="maxHeight"
           >
             <FSCol
-              v-if="$props.multiple"
               gap="12px"
             >
               <FSRow
@@ -72,40 +145,78 @@
                 :key="index"
               >
                 <FSCheckbox
-                  :label="item[$props.itemTitle]"
+                  v-if="$props.multiple"
+                  :label="item[$props.itemTitle!]"
                   :editable="$props.editable"
-                  :modelValue="$props.modelValue?.includes(item[$props.itemValue])"
-                  @update:modelValue="() => onCheckboxChange(item[$props.itemValue])"
+                  :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
+                  @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
                 >
                   <template
                     #label="{ font }"
                   >
-                    <slot
-                      name="item-label"
-                      v-bind="mobileItemProps(item, font)"
-                    />
+                    <FSRow
+                      align="center-left"
+                      :wrap="false"
+                    >
+                      <slot
+                        name="item-prepend"
+                        v-bind="{ item }"
+                      />
+                      <FSSpan
+                        :font="font"
+                      >
+                        {{ item[$props.itemTitle!] }}
+                      </FSSpan>
+                    </FSRow>
                   </template>
                 </FSCheckbox>
+                <FSRadio
+                  v-else
+                  :selected="$props.modelValue === item[$props.itemValue!]"
+                  :label="item[$props.itemTitle!]"
+                  :editable="$props.editable"
+                  :item="item"
+                  :modelValue="item[$props.itemValue!]"
+                  @update:modelValue="() => onRadioChange(item[$props.itemValue!])"
+                >
+                  <template
+                    #label="{ font }"
+                  >
+                    <FSRow
+                      align="center-left"
+                      :wrap="false"
+                    >
+                      <slot
+                        name="item-prepend"
+                        v-bind="{ item }"
+                      />
+                      <FSSpan
+                        :font="font"
+                      >
+                        {{ item[$props.itemTitle!] }}
+                      </FSSpan>
+                    </FSRow>
+                  </template>
+                </FSRadio>
+                <FSRow
+                  align="center-right"
+                >
+                  <slot
+                    name="item-append"
+                    v-bind="{ item }"
+                  />
+                </FSRow>
               </FSRow>
             </FSCol>
-            <FSRadioGroup
-              v-else
-              gap="12px"
-              :values="$props.items.map((item: any) => ({ value: item[$props.itemValue], label: item[$props.itemTitle], item: item }))"
-              :editable="$props.editable"
-              :modelValue="$props.modelValue"
-              @update:modelValue="onRadioChange"
-            >
-              <template
-                #label="{ item, font }"
-              >
-                <slot
-                  name="item-label"
-                  v-bind="mobileItemProps(item, font)"
-                />
-              </template>
-            </FSRadioGroup>
           </FSFadeOut>
+          <FSRow
+            v-if="!$props.items || $props.items.length === 0"
+            padding="4px 3px"
+          >
+            <FSSpan>
+              {{ $tr("ui.select-field.no-data", "No data") }}
+            </FSSpan>
+          </FSRow>
         </template>
       </FSDialogMenu>
     </template>
@@ -120,139 +231,241 @@
         :label="$props.label"
         :messages="messages"
       >
-        <v-select
-          class="fs-select-field"
-          variant="outlined"
-          :clearable="$props.clearable && $props.editable && !!$props.modelValue"
-          :itemTitle="$props.itemTitle"
-          :itemValue="$props.itemValue"
-          :readonly="!$props.editable"
+        <FSToggleSet
+          v-if="$props.toggleSet"
+          :editable="$props.editable"
           :multiple="$props.multiple"
-          :validateOn="validateOn"
-          :persistentClear="true"
-          :listProps="listStyle"
-          :returnObject="false"
-          :items="$props.items"
+          :required="$props.required"
+          :values="$props.items"
           :rules="$props.rules"
-          :hideDetails="true"
-          :menuIcon="null"
-          :style="style"
           :modelValue="$props.modelValue"
           @update:modelValue="$emit('update:modelValue', $event)"
           v-bind="$attrs"
         >
           <template
-            v-for="(_, name) in $slots"
+            v-for="(_, name) in toggleSetSlots"
             v-slot:[name]="slotData"
           >
             <slot
-              :name="name"
+              :name="`toggle-set-${name}`"
               v-bind="slotData"
             />
           </template>
-          <template
-            #item="{ props, item }"
+        </FSToggleSet>
+        <FSCol
+          v-else
+        >
+          <v-select
+            class="fs-select-field"
+            variant="outlined"
+            :clearable="$props.clearable && $props.editable && !!$props.modelValue"
+            :itemTitle="$props.itemTitle"
+            :itemValue="$props.itemValue"
+            :readonly="!$props.editable"
+            :multiple="$props.multiple"
+            :validateOn="validateOn"
+            :persistentClear="true"
+            :listProps="listStyle"
+            :returnObject="false"
+            :items="$props.items"
+            :rules="$props.rules"
+            :hideDetails="true"
+            :menuIcon="null"
+            :style="style"
+            :modelValue="$props.modelValue"
+            @update:modelValue="onSingleChange"
+            v-bind="$attrs"
           >
-            <v-list-item
-              v-bind="{ ...props, title: '' }"
+            <template
+              v-for="(_, name) in selectSlots"
+              v-slot:[name]="slotData"
             >
-              <FSRow
-                align="center-left"
+              <slot
+                :name="`select-${name}`"
+                v-bind="slotData"
+              />
+            </template>
+            <template
+              #item="{ props, item }"
+            >
+              <v-list-item
+                v-bind="{ ...props, title: '' }"
               >
-                <FSCheckbox
-                  v-if="$props.multiple"
-                  :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue])"
-                  @click="props.onClick"
+                <FSRow
+                  align="center-left"
+                  :wrap="false"
                 >
-                  <template
-                    #label="{ font }"
+                  <FSCheckbox
+                    v-if="$props.multiple"
+                    :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue!])"
+                    @click="props.onClick"
                   >
-                    <slot
-                      name="item-label"
-                      v-bind="{ item, font }"
+                    <template
+                      #label="{ font }"
                     >
+                      <slot
+                        name="item-prepend"
+                        v-bind="{ item: item.raw }"
+                      />
                       <FSSpan
                         :font="font"
                       >
-                        {{ item.raw[$props.itemTitle] }}
+                        {{ item.raw[$props.itemTitle!] }}
                       </FSSpan>
-                    </slot>
-                  </template>
-                </FSCheckbox>
-                <FSSpan
-                  v-else
-                >
-                  <slot
-                    name="item-label"
-                    v-bind="{ item }"
+                    </template>
+                  </FSCheckbox>
+                  <template
+                    v-else
                   >
-                    <FSSpan>
-                      {{ item.raw[$props.itemTitle] }}
+                    <slot
+                      name="item-prepend"
+                      v-bind="{ item: item.raw }"
+                    />
+                    <FSSpan
+                      :font="$props.modelValue === item.raw[$props.itemTitle!] ? 'text-button' : 'text-body'"
+                    >
+                      {{ item.raw[$props.itemTitle!] }}
                     </FSSpan>
-                  </slot>
-                </FSSpan>
-              </FSRow>
-            </v-list-item>
-          </template>
-          <template
-            #clear
-          >
-            <slot
-              name="clear"
+                  </template>
+                  <FSRow
+                    align="center-right"
+                  >
+                    <slot
+                      name="item-append"
+                      v-bind="{ item: item.raw }"
+                    />
+                  </FSRow>
+                </FSRow>
+              </v-list-item>
+            </template>
+            <template
+              #prepend-inner
             >
-              <FSButton
-                v-if="$props.clearable && $props.editable && !!$props.modelValue"
-                icon="mdi-close"
-                variant="icon"
-                :color="ColorEnum.Dark"
-                @click="$emit('update:modelValue', null)"
+              <slot
+                v-if="selectedItem"
+                name="item-prepend"
+                v-bind="{ item: selectedItem }"
               />
-            </slot>
-          </template>
-          <template
-            #append-inner
-          >
-            <slot
-              name="append-inner"
+            </template>
+            <template
+              v-if="$props.multiple"
+              #selection="{ index }"
             >
-              <FSButton
-                icon="mdi-chevron-down"
-                variant="icon"
-                :editable="$props.editable"
-                :color="ColorEnum.Dark"
-              />
-            </slot>
-          </template>
-          <template
-            #no-data
+              <FSSpan
+                v-if="index === $props.modelValue.length - 1"
+              >
+                {{ $props.placeholder }}
+              </FSSpan>
+            </template>
+            <template
+              #clear
+            >
+              <FSRow
+                :wrap="false"
+              >
+                <slot
+                  v-if="selectedItem"
+                  name="item-append"
+                  v-bind="{ item: selectedItem }"
+                />
+                <slot
+                  name="clear"
+                >
+                  <FSButton
+                    v-if="$props.clearable && $props.editable && !!$props.modelValue"
+                    icon="mdi-close"
+                    variant="icon"
+                    :color="ColorEnum.Dark"
+                    @click="onClear"
+                  />
+                </slot>
+              </FSRow>
+            </template>
+            <template
+              #append-inner
+            >
+              <slot
+                name="append-inner"
+              >
+                <FSButton
+                  icon="mdi-chevron-down"
+                  variant="icon"
+                  :editable="$props.editable"
+                  :color="ColorEnum.Dark"
+                />
+              </slot>
+            </template>
+            <template
+              #no-data
+            >
+              <FSRow
+                v-if="!$props.items || $props.items.length === 0"
+                padding="15px"
+              >
+                <FSSpan>
+                  {{ $tr("ui.select-field.no-data", "No data") }}
+                </FSSpan>
+              </FSRow>
+            </template>
+          </v-select>
+          <FSSlideGroup
+            v-if="$props.multiple && Array.isArray($props.modelValue)"
           >
-            <FSRow
-              padding="17px"
+            <FSCard
+              v-for="(item, index) in $props.items.filter((item: any) => $props.modelValue.includes(item[$props.itemValue!]))"
+              variant="standard"
+              :height="['40px', '36px']"
+              :color="ColorEnum.Light"
+              :border="false"
+              :key="index"
             >
-              <FSSpan>
-                {{ $tr("ui.common.no-data", "No data") }}
-              </FSSpan>
-            </FSRow>
-          </template>
-        </v-select>
+              <FSRow
+                align="center-left"
+                padding="0 8px"
+              >
+                <slot
+                  name="item-prepend"
+                  v-bind="{ item }"
+                />
+                <FSSpan>
+                  {{ item[$props.itemTitle!] }}
+                </FSSpan>
+                <slot
+                  name="item-append"
+                  v-bind="{ item }"
+                />
+                <FSButton
+                  icon="mdi-close"
+                  variant="icon"
+                  :color="ColorEnum.Dark"
+                  @click="() => onCheckboxChange(item[$props.itemValue!])"
+                />
+              </FSRow>
+            </FSCard>
+          </FSSlideGroup>
+        </FSCol>
       </FSBaseField>
     </template>
-  </FSCol>
+  </template>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, ref, type Slot, type StyleValue } from "vue";
 
-import { useBreakpoints, useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSDialogMenu from "../FSDialogMenu.vue";
-import FSRadioGroup from "../FSRadioGroup.vue";
+import FSSlideGroup from "../FSSlideGroup.vue";
+import FSToggleSet from "../FSToggleSet.vue";
 import FSBaseField from "./FSBaseField.vue";
 import FSTextField from "./FSTextField.vue";
 import FSCheckbox from "../FSCheckbox.vue";
 import FSFadeOut from "../FSFadeOut.vue";
 import FSButton from "../FSButton.vue";
+import FSLoader from "../FSLoader.vue";
+import FSRadio from "../FSRadio.vue";
+import FSCard from "../FSCard.vue";
 import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -261,12 +474,17 @@ export default defineComponent({
   name: "FSSelectField",
   components: {
     FSDialogMenu,
-    FSRadioGroup,
+    FSDialogMenu,
+    FSSlideGroup,
     FSBaseField,
     FSTextField,
+    FSToggleSet,
     FSCheckbox,
     FSFadeOut,
     FSButton,
+    FSLoader,
+    FSRadio,
+    FSCard,
     FSSpan,
     FSCol,
     FSRow
@@ -277,6 +495,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    placeholder: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     description: {
       type: String as PropType<string | null>,
       required: false,
@@ -297,21 +520,21 @@ export default defineComponent({
       default: "label"
     },
     modelValue: {
-      type: [Array, String, Number] as PropType<(string | number)[] | string | number | null>,
+      type: [Array, String, Number] as PropType<(string | number)[] | string | number | null | any>,
       required: false,
       default: null
     },
-    hideHeader: {
+    multiple: {
       type: Boolean,
       required: false,
       default: false
     },
-    required: {
+    hideHeader: {
       type: Boolean,
       required: false,
       default: false
     },
-    multiple: {
+    required: {
       type: Boolean,
       required: false,
       default: false
@@ -335,6 +558,16 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    toggleSet: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -342,6 +575,10 @@ export default defineComponent({
     const { validateOn, getMessages } = useRules();
     const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots.label;
+    delete slots.description;
 
     const backgrounds = getColors(ColorEnum.Background);
     const errors = getColors(ColorEnum.Error);
@@ -369,7 +606,21 @@ export default defineComponent({
       };
     });
 
-    const listStyle = computed((): { [key: string] : object } => {
+    const selectSlots = computed((): { [key: string]: Slot<any> } => {
+      return Object.keys(slots).filter(k => k.startsWith("select-")).reduce((acc: { [key: string]: Slot<any> }, key) => {
+        acc[key.substring("select-".length)] = slots[key];
+        return acc;
+      }, {});
+    });
+
+    const toggleSetSlots = computed((): { [key: string]: Slot<any> } => {
+      return Object.keys(slots).filter(k => k.startsWith("toggle-set-")).reduce((acc: { [key: string]: Slot<any> }, key) => {
+        acc[key.substring("toggle-set-".length)] = slots[key];
+        return acc;
+      }, {});
+    });
+
+    const listStyle = computed((): { style: StyleValue } => {
       return {
         style: style.value
       };
@@ -377,64 +628,46 @@ export default defineComponent({
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
-    const maxHeight = computed(() => {
-      const other = 8 + 8; // Paddings
-      return `calc(100vh - 40px - ${other}px)`;
+    const selectedItem = computed((): any => {
+      if (props.multiple) {
+        return null;
+      }
+      if (Array.isArray(props.modelValue) && props.modelValue.length > 0) {
+        return props.items.find((item: any) => item[props.itemValue] === props.modelValue[0]) ?? null;
+      }
+      else if (props.modelValue) {
+        return props.items.find((item: any) => item[props.itemValue] === props.modelValue) ?? null;
+      }
+      return null;
     });
 
-    const mobileValue = computed((): string | null => {
-      if (props.multiple) {
-        if (Array.isArray(props.modelValue)) {
-          return props.modelValue.map((value: any) => {
-            const item = props.items.find((item: object) => item[props.itemValue] === value);
-            if (item) {
-              return item[props.itemTitle];
-            }
-          }).filter(value => !!value).join(", ");
-        }
+    const selectedItems = computed((): any[] => {
+      if (Array.isArray(props.modelValue) && props.modelValue.length > 0) {
+        return props.items.filter((item: any) => props.modelValue.includes(item[props.itemValue]));
       }
-      if (props.modelValue) {
-        const item = props.items.find((item: object) => item[props.itemValue] === props.modelValue);
+      else if (props.modelValue) {
+        const item = props.items.find((item: any) => item[props.itemValue] === props.modelValue);
         if (item) {
-          return item[props.itemTitle];
+          return [item];
         }
       }
-      return null;
+      return [];
     });
 
-    const mobileSelectionProps = computed((): any | null => {
-      const item = props.items.find((item: any) => item[props.itemValue] === props.modelValue);
-      if (item) {
-        return {
-          item: {
-            title: "",
-            value: item[props.itemValue],
-            props: {
-              title: item[props.itemTitle],
-              value: item[props.itemValue]
-            },
-            raw: { ...item }
-          },
-          font: "text-body"
-        };
-      }
-      return null;
+    const maxHeight = computed(() => {
+      const other = 8 + 8; // Paddings
+      return `calc(100vh - 40px - ${other}px)`;
     });
 
-    const mobileItemProps = (item: any, font: "text-body" | "text-button" | null): any => {
-      return {
-        item: {
-          title: "",
-          value: item[props.itemValue],
-          props: {
-            title: item[props.itemTitle],
-            value: item[props.itemValue]
-          },
-          raw: { ...item }
-        },
-        font
+    const mobileValue = computed((): string | null => {
+      if (props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
+        return props.placeholder;
       }
-    };
+      if (selectedItem.value) {
+        return selectedItem.value[props.itemTitle];
+      }
+      return null;
+    });
 
     const openMobileOverlay = () => {
       if (!props.editable) {
@@ -470,10 +703,21 @@ export default defineComponent({
       }
     };
 
+    const onSingleChange = (value: string) => {
+      emit("update:modelValue", value);
+    };
+
+    const onClear = () => {
+      emit("update:modelValue", null);
+    };
+
     return {
-      mobileSelectionProps,
+      toggleSetSlots,
+      selectedItems,
       isExtraSmall,
+      selectedItem,
       mobileValue,
+      selectSlots,
       validateOn,
       ColorEnum,
       listStyle,
@@ -483,8 +727,9 @@ export default defineComponent({
       style,
       openMobileOverlay,
       onCheckboxChange,
-      mobileItemProps,
-      onRadioChange
+      onSingleChange,
+      onRadioChange,
+      onClear
     };
   }
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.36",
+  "version": "1.0.37",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.36",
-    "@dative-gpi/foundation-shared-services": "1.0.36"
+    "@dative-gpi/foundation-shared-domain": "1.0.37",
+    "@dative-gpi/foundation-shared-services": "1.0.37"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "687d6ae60b16a75dc332400cd6eee19cb306767b"
+  "gitHead": "5781e3801d2832ab2567a82e425f369f4f20fbfa"
 }