@dative-gpi/foundation-shared-components 0.0.87 → 0.0.89

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: {

package/components/fields/FSTextArea.vue

@@ -1,38 +1,12 @@
 <template>
-  <FSCol>
-    <slot v-if="!$props.hideHeader" name="label">
-      <FSRow
-        :wrap="false"
-      >
-        <FSSpan
-          v-if="$props.label"
-          class="fs-text-area-label"
-          font="text-overline"
-          :style="style"
-        >
-          {{ $props.label }}
-        </FSSpan>
-        <FSSpan
-          v-if="$props.label && $props.required"
-          class="fs-text-area-label"
-          style="margin-left: -8px;"
-          font="text-overline"
-          :ellipsis="false"
-          :style="style"
-        >
-          *
-        </FSSpan>
-        <v-spacer style="min-width: 40px;" />
-        <FSSpan
-          v-if="messages.length > 0"
-          class="fs-text-area-messages"
-          font="text-overline"
-          :style="style"
-        >
-          {{ messages.join(", ") }}
-        </FSSpan>
-      </FSRow>
-    </slot>
+  <FSBaseField
+    :label="$props.label"
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :messages="messages"
+  >
     <v-textarea
       class="fs-text-area"
       variant="outlined"
@@ -43,20 +17,28 @@
       :noResize="!$props.resize"
       :autoGrow="$props.autoGrow"
       :readonly="!$props.editable"
-      :clearable="$props.editable && !!$props.modelValue"
+      :clearable="$props.clearable && $props.editable && !!$props.modelValue"
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
-      @update:modelValue="(value) => $emit('update:modelValue', value)"
+      @update:modelValue="$emit('update:modelValue', $event)"
       @blur="blurred = true"
       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 #clear>
+      <template
+        #clear
+      >
         <FSButton
-          v-if="$props.editable && $props.modelValue"
+          v-if="$props.clearable && $props.editable && !!$props.modelValue"
           icon="mdi-close"
           variant="icon"
           :color="ColorEnum.Dark"
@@ -64,17 +46,7 @@
         />
       </template>
     </v-textarea>
-    <slot name="description">
-      <FSSpan
-        v-if="$props.description"
-        class="fs-text-area-description"
-        font="text-underline"
-        :style="style"
-      >
-        {{ $props.description }}
-      </FSSpan>
-    </slot>
-  </FSCol>
+  </FSBaseField>
 </template>
 
 <script lang="ts">
@@ -83,16 +55,12 @@ import { computed, defineComponent, PropType } from "vue";
 import { useColors, useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSpan from "../FSSpan.vue";
-import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
+import FSBaseField from "./FSBaseField.vue";
 
 export default defineComponent({
   name: "FSTextArea",
   components: {
-    FSSpan,
-    FSCol,
-    FSRow
+    FSBaseField
   },
   props: {
     label: {
@@ -145,6 +113,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -165,7 +138,7 @@ export default defineComponent({
       let height: string | undefined = undefined;
       let minHeight: string | undefined = undefined;
       if (!props.autoGrow) {
-        const base = isMobileSized.value ? 30 : 42;
+        const base = isMobileSized.value ? 30 : 34;
         const row = isMobileSized.value ? 16 : 20;
         minHeight = `${base}px`;
         if (props.rows > 1) {
@@ -190,7 +163,6 @@ export default defineComponent({
         "--fs-text-area-border-color"       : lights.dark,
         "--fs-text-area-color"              : darks.base,
         "--fs-text-area-active-border-color": darks.dark,
-        "--fs-text-area-error-color"        : errors.base,
         "--fs-text-area-error-border-color" : errors.base,
         "--fs-text-area-min-height"         : minHeight,
         "--fs-text-area-height"             : height