@dative-gpi/foundation-shared-components 0.0.88 → 0.0.90

package/components/fields/FSRichTextField.vue

@@ -1,8 +1,14 @@
 <template>
   <FSCol>
-    <FSRow v-if="!readonly">
-      <slot name="label">
-        <FSRow :wrap="false">
+    <FSRow
+      v-if="!readonly"
+    >
+      <slot
+        name="label"
+      >
+        <FSRow
+          :wrap="false"
+        >
           <FSSpan
             v-if="$props.label"
             class="fs-rich-text-field-label"
@@ -24,7 +30,9 @@
         </FSRow>
       </slot>
       <v-spacer />
-      <template v-if="$props.editable">
+      <template
+        v-if="$props.editable"
+      >
         <FSIcon
           class="fs-rich-text-field-icon"
           :color="toolbarColors.undo"
@@ -33,7 +41,9 @@
         >
           mdi-undo-variant
         </FSIcon>
-        <v-divider vertical />
+        <v-divider
+          vertical
+        />
         <FSIcon
           class="fs-rich-text-field-icon"
           :style="style"
@@ -62,7 +72,9 @@
         >
           mdi-format-paragraph
         </FSIcon>
-        <v-divider vertical />
+        <v-divider
+          vertical
+        />
         <FSIcon
           class="fs-rich-text-field-icon"
           :color="toolbarColors.bold"
@@ -103,7 +115,9 @@
         >
           mdi-link
         </FSIcon>
-        <v-divider vertical />
+        <v-divider
+          vertical
+        />
         <FSIcon
           class="fs-rich-text-field-icon"
           :style="style"
@@ -146,7 +160,9 @@
       @keypress.enter.stop="toggleLink"
       v-model="linkUrl"
     />
-    <slot name="description">
+    <slot
+      name="description"
+    >
       <FSSpan
         v-if="!readonly && $props.description"
         class="fs-rich-text-field-description"
@@ -211,9 +227,9 @@ export default defineComponent({
       default: false
     },
     rows: {
-        type: Number,
-        required: false,
-        default: 5
+      type: Number,
+      required: false,
+      default: 5
     },
     variant: {
       type: String as PropType<"standard" | "readonly">,
@@ -326,7 +342,7 @@ export default defineComponent({
           }
           else {
             return {
-              "--fs-rich-text-field-undo-cursor"        : canUndo ? "pointer" : "default",
+              "--fs-rich-text-field-undo-cursor"        : canUndo.value ? "pointer" : "default",
               "--fs-rich-text-field-icon-cursor"        : "pointer",
               "--fs-rich-text-field-border-color"       : lights.dark,
               "--fs-rich-text-field-color"              : darks.base,
@@ -335,13 +351,13 @@ export default defineComponent({
               "--fs-rich-text-field-min-height"         : minHeight
             };
           }
-        };
+        }
         case "readonly": return {
-            "--fs-rich-text-field-border-color"       : "transparent",
-            "--fs-rich-text-field-color"              : darks.base,
-            "--fs-rich-text-field-active-border-color": "transparent",
-            "--fs-rich-text-field-link-color"         : linkColors.value.dark,
-            "--fs-rich-text-field-min-height"         : minHeight
+          "--fs-rich-text-field-border-color"       : "transparent",
+          "--fs-rich-text-field-color"              : darks.base,
+          "--fs-rich-text-field-active-border-color": "transparent",
+          "--fs-rich-text-field-link-color"         : linkColors.value.dark,
+          "--fs-rich-text-field-min-height"         : minHeight
         }
       }
     });

package/components/fields/FSSearchField.vue

@@ -11,8 +11,13 @@
     v-model="innerValue"
     v-bind="$attrs"
   >
-    <template v-if="$props.prependInnerIcon" #prepend-inner>
-      <slot name="prepend-inner">
+    <template
+      v-if="$props.prependInnerIcon"
+      #prepend-inner
+    >
+      <slot
+        name="prepend-inner"
+      >
         <FSButton
           variant="icon"
           :icon="$props.prependInnerIcon"
@@ -22,8 +27,13 @@
         />
       </slot>
     </template>
-    <template v-if="!['instant'].includes($props.variant)" #append>
-      <slot name="append">
+    <template
+      v-if="!['instant'].includes($props.variant)"
+      #append
+    >
+      <slot
+        name="append"
+      >
         <FSButton
           :prependIcon="$props.buttonPrependIcon"
           :label="buttonLabel"
@@ -35,8 +45,14 @@
         />
       </slot>
     </template>
-    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-      <slot :name="name" v-bind="slotData" />
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
     </template>
   </FSTextField>
 </template>
@@ -154,10 +170,10 @@ export default defineComponent({
     });
 
     return {
-      ColorEnum,
       placeholder,
       buttonLabel,
-      innerValue
+      innerValue,
+      ColorEnum
     };
   }
 });

package/components/fields/FSSelectField.vue

@@ -1,102 +1,194 @@
 <template>
   <FSCol>
-    <slot v-if="!$props.hideHeader" name="label">
-      <FSRow
-        :wrap="false"
+    <template
+      v-if="isExtraSmall"
+    >
+      <FSTextField
+        :label="$props.label"
+        :description="$props.description"
+        :hideHeader="$props.hideHeader"
+        :required="$props.required"
+        :clearable="$props.clearable"
+        :editable="$props.editable"
+        :readonly="true"
+        :rules="$props.rules"
+        :messages="messages"
+        :validateOn="validateOn"
+        :validationValue="$props.modelValue"
+        :modelValue="mobileValue"
+        @update:modelValue="$emit('update:modelValue', $event)"
+        @click="openMobileOverlay"
+        @blur="blurred = true"
+        v-bind="$attrs"
       >
-        <FSSpan
-          v-if="$props.label"
-          class="fs-select-field-label"
-          font="text-overline"
-          :style="style"
+        <template
+          v-for="(_, name) in $slots"
+          v-slot:[name]="slotData"
         >
-          {{ $props.label }}
-        </FSSpan>
-        <FSSpan
-          v-if="$props.label && $props.required"
-          class="fs-select-field-label"
-          style="margin-left: -8px;"
-          font="text-overline"
-          :ellipsis="false"
-          :style="style"
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+        <template
+          #append-inner
         >
-          *
-        </FSSpan>
-        <v-spacer style="min-width: 40px;" />
-        <FSSpan
-          v-if="messages.length > 0"
-          class="fs-select-field-messages"
-          font="text-overline"
-          :style="style"
+          <slot
+            name="append-inner"
+          >
+            <FSButton
+              icon="mdi-chevron-down"
+              variant="icon"
+              :editable="$props.editable"
+              :color="ColorEnum.Dark"
+              @click="openMobileOverlay"
+            />
+          </slot>
+        </template>
+      </FSTextField>
+      <FSDialogMenu
+        v-model="dialog"
+      >
+        <template
+          #body
         >
-          {{ messages.join(", ") }}
-        </FSSpan>
-      </FSRow>
-    </slot>
-    <v-select
-      class="fs-select-field"
-      variant="outlined"
-      :menuIcon="null"
-      :style="style"
-      :listProps="listStyle"
-      :hideDetails="true"
-      :items="$props.items"
-      :itemTitle="$props.itemTitle"
-      :itemValue="$props.itemValue"
-      :readonly="!$props.editable"
-      :clearable="$props.editable && !!$props.modelValue"
-      :returnObject="$props.returnObject"
-      :rules="$props.rules"
-      :validateOn="validateOn"
-      :modelValue="$props.modelValue"
-      @update:modelValue="(value) => $emit('update:modelValue', value)"
-      @blur="blurred = true"
-      v-bind="$attrs"
+          <FSFadeOut
+            height="calc(90vh - 164px)"
+          >
+            <FSCol
+              v-if="$props.multiple"
+              gap="12px"
+            >
+              <FSRow
+                v-for="(item, index) in $props.items"
+                :key="index"
+              >
+                <FSCheckbox
+                  :label="item[$props.itemTitle]"
+                  :editable="$props.editable"
+                  :modelValue="$props.modelValue?.includes(item[$props.itemValue])"
+                  @update:modelValue="() => onCheckboxChange(item[$props.itemValue])"
+                />
+              </FSRow>
+            </FSCol>
+            <FSRadioGroup
+              v-else
+              gap="12px"
+              :values="$props.items.map((item: any) => ({ value: item[$props.itemValue], label: item[$props.itemTitle] }))"
+              :modelValue="$props.modelValue"
+              :editable="$props.editable"
+              @update:modelValue="onRadioChange"
+            />
+          </FSFadeOut>
+        </template>
+      </FSDialogMenu>
+    </template>
+    <template
+      v-else
     >
-      <template v-for="(_, name) in slots" v-slot:[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-      <template #clear>
-        <slot name="clear">
-          <FSButton
-            v-if="$props.editable && $props.modelValue"
-            icon="mdi-close"
-            variant="icon"
-            :color="ColorEnum.Dark"
-            @click="$emit('update:modelValue', null)"
-          />
-        </slot>
-      </template>
-      <template #append-inner>
-        <slot name="append-inner">
-          <FSButton
-            icon="mdi-chevron-down"
-            variant="icon"
-            :editable="$props.editable"
-            :color="ColorEnum.Dark"
-          />
-        </slot>
-      </template>
-    </v-select>
-    <slot name="description">
-      <FSSpan
-        v-if="$props.description"
-        class="fs-select-field-description"
-        font="text-underline"
-        :style="style"
+      <FSBaseField
+        :label="$props.label"
+        :description="$props.description"
+        :hideHeader="$props.hideHeader"
+        :required="$props.required"
+        :editable="$props.editable"
+        :messages="messages"
       >
-        {{ $props.description }}
-      </FSSpan>
-    </slot>
+        <v-select
+          class="fs-select-field"
+          variant="outlined"
+          :menuIcon="null"
+          :style="style"
+          :listProps="listStyle"
+          :hideDetails="true"
+          :items="$props.items"
+          :itemTitle="$props.itemTitle"
+          :itemValue="$props.itemValue"
+          :readonly="!$props.editable"
+          :clearable="$props.clearable && $props.editable && !!$props.modelValue"
+          :returnObject="$props.returnObject"
+          :rules="$props.rules"
+          :validateOn="validateOn"
+          :multiple="$props.multiple"
+          :modelValue="$props.modelValue"
+          @update:modelValue="$emit('update:modelValue', $event)"
+          @blur="blurred = true"
+          v-bind="$attrs"
+        >
+          <template
+            #item="{ props, item }"
+          >
+            <v-list-item
+              v-bind="{ ...props, title: '' }"
+            >
+              <FSRow
+                align="center-left"
+              >
+                <FSCheckbox
+                  v-if="$props.multiple"
+                  :modelValue="$props.modelValue?.includes(item.raw.id)"
+                />
+                <FSSpan>
+                  {{ item.raw.label }}
+                </FSSpan>
+              </FSRow>
+            </v-list-item>
+          </template>
+          <template
+            v-for="(_, name) in $slots"
+            v-slot:[name]="slotData"
+          >
+            <slot
+              :name="name"
+              v-bind="slotData"
+            />
+          </template>
+          <template
+            #clear
+          >
+            <slot
+              name="clear"
+            >
+              <FSButton
+                v-if="$props.clearable && $props.editable && !!$props.modelValue"
+                icon="mdi-close"
+                variant="icon"
+                :color="ColorEnum.Dark"
+                @click="$emit('update:modelValue', null)"
+              />
+            </slot>
+          </template>
+          <template
+            #append-inner
+          >
+            <slot
+              name="append-inner"
+            >
+              <FSButton
+                icon="mdi-chevron-down"
+                variant="icon"
+                :editable="$props.editable"
+                :color="ColorEnum.Dark"
+              />
+            </slot>
+          </template>
+        </v-select>
+      </FSBaseField>
+    </template>
   </FSCol>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, PropType, ref } from "vue";
 
-import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors, useRules } 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 FSBaseField from "./FSBaseField.vue";
+import FSCheckbox from "../FSCheckbox.vue";
+import FSFadeOut from "../FSFadeOut.vue";
 import FSButton from "../FSButton.vue";
 import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
@@ -105,6 +197,11 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSSelectField",
   components: {
+    FSDialogMenu,
+    FSRadioGroup,
+    FSBaseField,
+    FSCheckbox,
+    FSFadeOut,
     FSButton,
     FSSpan,
     FSCol,
@@ -155,6 +252,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     rules: {
       type: Array as PropType<any[]>,
       required: false,
@@ -165,6 +267,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -172,13 +279,12 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props) {
+  setup(props, { emit }) {
     const { validateOn, blurred, getMessages } = useRules();
+    const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
-    const { slots } = useSlots();
-    
-    delete slots.label;
-    delete slots.description;
+
+    const dialog = ref(false);
 
     const backgrounds = getColors(ColorEnum.Background);
     const errors = getColors(ColorEnum.Error);
@@ -200,12 +306,11 @@ export default defineComponent({
         "--fs-select-field-border-color"       : lights.dark,
         "--fs-select-field-color"              : darks.base,
         "--fs-select-field-active-border-color": darks.dark,
-        "--fs-select-field-error-color"        : errors.base,
         "--fs-select-field-error-border-color" : errors.base
       };
     });
 
-    const listStyle = computed((): any => {
+    const listStyle = computed((): { [key: string] : Object } => {
       return {
         style: style.value
       };
@@ -213,14 +318,70 @@ export default defineComponent({
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
+    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(", ");
+        }
+      }
+      if (props.modelValue) {
+        const item = props.items.find((item: Object) => item[props.itemValue] === props.modelValue);
+        if (item) {
+          return item[props.itemTitle];
+        }
+      }
+      return null;
+    });
+
+    const openMobileOverlay = () => {
+      if (!props.editable) {
+        return;
+      }
+      dialog.value = true;
+    };
+
+    const onRadioChange = (value: any) => {
+      emit('update:modelValue', value);
+      dialog.value = false;
+    };
+
+    const onCheckboxChange = (value: any) => {
+      if (Array.isArray(props.modelValue)) {
+        if (props.modelValue.includes(value)) {
+          emit('update:modelValue', props.modelValue.filter((item: any) => item !== value));
+        }
+        else {
+          emit('update:modelValue', [...props.modelValue, value]);
+        }
+      }
+      else {
+        if (props.modelValue === value) {
+          emit('update:modelValue', []);
+        }
+        else {
+          emit('update:modelValue', [props.modelValue, value]);
+        }
+      }
+    };
+
     return {
+      isExtraSmall,
+      mobileValue,
       validateOn,
       ColorEnum,
       listStyle,
       messages,
       blurred,
-      slots,
-      style
+      dialog,
+      style,
+      openMobileOverlay,
+      onCheckboxChange,
+      onRadioChange
     };
   }
 });

package/components/fields/FSTagField.vue

@@ -15,11 +15,21 @@
       v-model="innerValue"
       v-bind="$attrs"
     >
-      <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="slotData"
+        />
       </template>
-      <template #append-inner>
-        <slot name="append-inner">
+      <template
+        #append-inner
+      >
+        <slot
+          name="append-inner"
+        >
           <FSButton
             variant="icon"
             icon="mdi-tag-outline"
@@ -49,9 +59,7 @@ import { useColors, useRules } from "@dative-gpi/foundation-shared-components/co
 import FSTextField from "./FSTextField.vue";
 import FSTagGroup from "../FSTagGroup.vue";
 import FSButton from "../FSButton.vue";
-import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSTagField",
@@ -59,9 +67,7 @@ export default defineComponent({
     FSTextField,
     FSTagGroup,
     FSButton,
-    FSSpan,
-    FSCol,
-    FSRow
+    FSCol
   },
   props: {
     label: {