@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/fields/FSSelectField.vue

@@ -1,202 +1,364 @@
 <template>
-  <FSCol>
-    <template
-      v-if="isExtraSmall"
+  <FSCol
+    v-if="$props.loading"
+  >
+    <FSLoader
+      v-if="!$props.hideHeader"
+      variant="text-overline"
+    />
+    <FSLoader
+      v-if="$props.loading"
+      width="100%"
+      :height="['40px', '36px']"
+    />
+  </FSCol>
+  <FSCol
+    v-else-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"
+      @click="openMobileOverlay"
+      v-bind="$attrs"
     >
-      <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"
       >
-        <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="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
-            name="selection-mobile"
-            v-bind="mobileSelectionProps"
+            v-if="selectedItem"
+            name="item-append"
+            v-bind="{ item: selectedItem }"
           />
-        </template>
-        <template
-          #append-inner
-        >
           <slot
-            name="append-inner"
+            name="clear"
           >
             <FSButton
-              icon="mdi-chevron-down"
+              v-if="$props.clearable && $props.editable && !!$props.modelValue"
+              icon="mdi-close"
               variant="icon"
-              :editable="$props.editable"
               :color="ColorEnum.Dark"
-              @click="openMobileOverlay"
+              @click="onClear"
             />
           </slot>
-        </template>
-      </FSTextField>
-      <FSDialogMenu
-        v-model="dialog"
+        </FSRow>
+      </template>
+      <template
+        #append-inner
       >
-        <template
-          #body
+        <FSButton
+          icon="mdi-chevron-down"
+          variant="icon"
+          :editable="$props.editable"
+          :color="ColorEnum.Dark"
+          @click="openMobileOverlay"
+        />
+      </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"
         >
-          <FSFadeOut
-            :height="height"
+          <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>
+    <FSDialogMenu
+      v-model="dialog"
+    >
+      <template
+        #body
+      >
+        <FSFadeOut
+          :maxHeight="maxHeight"
+        >
+          <FSCol
+            gap="12px"
           >
-            <FSCol
-              v-if="$props.multiple"
-              gap="12px"
+            <FSRow
+              v-for="(item, index) in $props.items"
+              :key="index"
             >
-              <FSRow
-                v-for="(item, index) in $props.items"
-                :key="index"
+              <FSCheckbox
+                v-if="$props.multiple"
+                :label="item[$props.itemTitle!]"
+                :editable="$props.editable"
+                :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
+                @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
               >
-                <FSCheckbox
-                  :label="item[$props.itemTitle]"
-                  :editable="$props.editable"
-                  :modelValue="$props.modelValue?.includes(item[$props.itemValue])"
-                  @update:modelValue="() => onCheckboxChange(item[$props.itemValue])"
+                <template
+                  #label="{ font }"
                 >
-                  <template
-                    #label="{ font }"
+                  <FSRow
+                    align="center-left"
+                    :wrap="false"
                   >
                     <slot
-                      name="item-label"
-                      v-bind="mobileItemProps(item, font)"
+                      name="item-prepend"
+                      v-bind="{ item }"
                     />
-                  </template>
-                </FSCheckbox>
-              </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 }"
+                    <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-label"
-                  v-bind="mobileItemProps(item, font)"
+                  name="item-append"
+                  v-bind="{ item }"
                 />
-              </template>
-            </FSRadioGroup>
-          </FSFadeOut>
-        </template>
-      </FSDialogMenu>
-    </template>
-    <template
+              </FSRow>
+            </FSRow>
+          </FSCol>
+        </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>
+  </FSCol>
+  <FSBaseField
+    v-else
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :label="$props.label"
+    :messages="messages"
+  >
+    <FSToggleSet
+      v-if="$props.toggleSet"
+      :editable="$props.editable"
+      :multiple="$props.multiple"
+      :required="$props.required"
+      :values="$props.items"
+      :rules="$props.rules"
+      :modelValue="$props.modelValue"
+      @update:modelValue="$emit('update:modelValue', $event)"
+      v-bind="$attrs"
+    >
+      <template
+        v-for="(_, name) in toggleSetSlots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="`toggle-set-${name}`"
+          v-bind="slotData"
+        />
+      </template>
+    </FSToggleSet>
+    <FSCol
       v-else
     >
-      <FSBaseField
-        :description="$props.description"
-        :hideHeader="$props.hideHeader"
-        :required="$props.required"
-        :editable="$props.editable"
-        :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"
+        :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-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="$emit('update:modelValue', $event)"
-          v-bind="$attrs"
+        <template
+          v-for="(_, name) in selectSlots"
+          v-slot:[name]="slotData"
         >
-          <template
-            v-for="(_, name) in $slots"
-            v-slot:[name]="slotData"
-          >
-            <slot
-              :name="name"
-              v-bind="slotData"
-            />
-          </template>
-          <template
-            #item="{ props, item }"
+          <slot
+            :name="`select-${name}`"
+            v-bind="slotData"
+          />
+        </template>
+        <template
+          #item="{ props, item }"
+        >
+          <v-list-item
+            v-bind="{ ...props, title: '' }"
           >
-            <v-list-item
-              v-bind="{ ...props, title: '' }"
+            <FSRow
+              align="center-left"
+              :wrap="false"
             >
-              <FSRow
-                align="center-left"
+              <FSCheckbox
+                v-if="$props.multiple"
+                :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue!])"
+                @click="props.onClick"
               >
-                <FSCheckbox
-                  v-if="$props.multiple"
-                  :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue])"
-                  @click="props.onClick"
+                <template
+                  #label="{ font }"
                 >
-                  <template
-                    #label="{ font }"
+                  <slot
+                    name="item-prepend"
+                    v-bind="{ item: item.raw }"
+                  />
+                  <FSSpan
+                    :font="font"
                   >
-                    <slot
-                      name="item-label"
-                      v-bind="{ item, font }"
-                    >
-                      <FSSpan
-                        :font="font"
-                      >
-                        {{ item.raw[$props.itemTitle] }}
-                      </FSSpan>
-                    </slot>
-                  </template>
-                </FSCheckbox>
+                    {{ item.raw[$props.itemTitle!] }}
+                  </FSSpan>
+                </template>
+              </FSCheckbox>
+              <template
+                v-else
+              >
+                <slot
+                  name="item-prepend"
+                  v-bind="{ item: item.raw }"
+                />
                 <FSSpan
-                  v-else
+                  :font="$props.modelValue === item.raw[$props.itemTitle!] ? 'text-button' : 'text-body'"
                 >
-                  <slot
-                    name="item-label"
-                    v-bind="{ item }"
-                  >
-                    <FSSpan>
-                      {{ item.raw[$props.itemTitle] }}
-                    </FSSpan>
-                  </slot>
+                  {{ item.raw[$props.itemTitle!] }}
                 </FSSpan>
+              </template>
+              <FSRow
+                align="center-right"
+              >
+                <slot
+                  name="item-append"
+                  v-bind="{ item: item.raw }"
+                />
               </FSRow>
-            </v-list-item>
-          </template>
-          <template
-            #clear
+            </FSRow>
+          </v-list-item>
+        </template>
+        <template
+          #prepend-inner
+        >
+          <slot
+            v-if="selectedItem"
+            name="item-prepend"
+            v-bind="{ item: selectedItem }"
+          />
+        </template>
+        <template
+          v-if="$props.multiple"
+          #selection="{ index }"
+        >
+          <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"
             >
@@ -205,55 +367,94 @@
                 icon="mdi-close"
                 variant="icon"
                 :color="ColorEnum.Dark"
-                @click="$emit('update:modelValue', null)"
+                @click="onClear"
               />
             </slot>
-          </template>
-          <template
-            #append-inner
+          </FSRow>
+        </template>
+        <template
+          #append-inner
+        >
+          <slot
+            name="append-inner"
           >
-            <slot
-              name="append-inner"
-            >
-              <FSButton
-                icon="mdi-chevron-down"
-                variant="icon"
-                :editable="$props.editable"
-                :color="ColorEnum.Dark"
-              />
-            </slot>
-          </template>
-          <template
-            #no-data
+            <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"
           >
-            <FSRow
-              padding="17px"
-            >
-              <FSSpan>
-                {{ $tr("ui.common.no-data", "No data") }}
-              </FSSpan>
-            </FSRow>
-          </template>
-        </v-select>
-      </FSBaseField>
-    </template>
-  </FSCol>
+            <FSSpan>
+              {{ $tr("ui.select-field.no-data", "No data") }}
+            </FSSpan>
+          </FSRow>
+        </template>
+      </v-select>
+      <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"
+          >
+            <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>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } 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";
@@ -262,12 +463,16 @@ export default defineComponent({
   name: "FSSelectField",
   components: {
     FSDialogMenu,
-    FSRadioGroup,
+    FSSlideGroup,
     FSBaseField,
     FSTextField,
+    FSToggleSet,
     FSCheckbox,
     FSFadeOut,
     FSButton,
+    FSLoader,
+    FSRadio,
+    FSCard,
     FSSpan,
     FSCol,
     FSRow
@@ -278,6 +483,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,
@@ -298,21 +508,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
@@ -336,6 +546,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"],
@@ -343,6 +563,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);
@@ -351,7 +575,7 @@ export default defineComponent({
 
     const dialog = ref(false);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-select-field-cursor"             : "default",
@@ -370,7 +594,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
       };
@@ -378,64 +616,46 @@ export default defineComponent({
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
-    const height = 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) {
@@ -471,21 +691,33 @@ 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,
+      maxHeight,
       messages,
       dialog,
-      height,
       style,
       openMobileOverlay,
       onCheckboxChange,
-      mobileItemProps,
-      onRadioChange
+      onSingleChange,
+      onRadioChange,
+      onClear
     };
   }
 });