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

package/components/fields/FSTextField.vue

@@ -1,43 +1,12 @@
 <template>
-  <FSCol>
-    <slot
-      v-if="!$props.hideHeader"
-      name="label"
-    >
-      <FSRow
-        :wrap="false"
-      >
-        <FSSpan
-          v-if="$props.label"
-          class="fs-text-field-label"
-          font="text-overline"
-          :style="style"
-        >
-          {{ $props.label }}
-        </FSSpan>
-        <FSSpan
-          v-if="$props.label && $props.required"
-          class="fs-text-field-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-field-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-text-field
       class="fs-text-field"
       variant="outlined"
@@ -45,16 +14,16 @@
       :type="$props.type"
       :hideDetails="true"
       :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-for="(_, name) in $slots"
         v-slot:[name]="slotData"
       >
         <slot
@@ -66,7 +35,7 @@
         #clear
       >
         <FSButton
-          v-if="$props.editable && $props.modelValue"
+          v-if="$props.clearable && $props.editable && !!$props.modelValue"
           icon="mdi-close"
           variant="icon"
           :color="ColorEnum.Dark"
@@ -74,39 +43,23 @@
         />
       </template>
     </v-text-field>
-    <slot
-      name="description"
-    >
-      <FSSpan
-        v-if="$props.description"
-        class="fs-text-field-description"
-        font="text-underline"
-        :style="style"
-      >
-        {{ $props.description }}
-      </FSSpan>
-    </slot>
-  </FSCol>
+  </FSBaseField>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
-import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSBaseField from "./FSBaseField.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: "FSTextField",
   components: {
-    FSButton,
-    FSSpan,
-    FSCol,
-    FSRow
+    FSBaseField,
+    FSButton
   },
   props: {
     label: {
@@ -149,6 +102,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -159,10 +117,6 @@ export default defineComponent({
   setup(props) {
     const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
-    const { slots } = useSlots();
-
-    delete slots.label;
-    delete slots.description;
 
     const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
@@ -182,7 +136,6 @@ export default defineComponent({
         "--fs-text-field-border-color"       : lights.dark,
         "--fs-text-field-color"              : darks.base,
         "--fs-text-field-active-border-color": darks.dark,
-        "--fs-text-field-error-color"        : errors.base,
         "--fs-text-field-error-border-color" : errors.base
       };
     });
@@ -194,7 +147,6 @@ export default defineComponent({
       ColorEnum,
       messages,
       blurred,
-      slots,
       style
     };
   }

package/components/fields/FSTimeField.vue

@@ -1,36 +1,12 @@
 <template>
-  <FSCol>
-    <slot v-if="!$props.hideHeader" name="label">
-      <FSRow :wrap="false">
-        <FSSpan
-          v-if="$props.label"
-          class="fs-time-field-label"
-          font="text-overline"
-          :style="style"
-        >
-          {{ $props.label }}
-        </FSSpan>
-        <FSSpan
-          v-if="$props.label && $props.required"
-          class="fs-time-field-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-time-field-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"
+  >
     <FSRow>
       <FSNumberField
         :editable="$props.editable"
@@ -42,9 +18,15 @@
         :modelValue="innerTime"
         @update:modelValue="onSubmitValue"
         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" />
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
         </template>
       </FSNumberField>
       <FSSelectField
@@ -57,30 +39,19 @@
         @update:modelValue="onSubmitTimeScale"
       />
     </FSRow>
-    <slot name="description">
-      <FSSpan
-        v-if="$props.description"
-        class="fs-time-field-description"
-        font="text-underline"
-        :style="style"
-      >
-        {{ $props.description }}
-      </FSSpan>
-    </slot>
-  </FSCol>
+  </FSBaseField>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
 import { getTimeScaleIndex, timeScale } from "@dative-gpi/foundation-shared-components/utils";
-import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSNumberField from "./FSNumberField.vue";
 import FSSelectField from "./FSSelectField.vue";
-import FSSpan from "../FSSpan.vue";
-import FSCol from "../FSCol.vue";
+import FSBaseField from "./FSBaseField.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
@@ -88,8 +59,7 @@ export default defineComponent({
   components: {
     FSNumberField,
     FSSelectField,
-    FSSpan,
-    FSCol,
+    FSBaseField,
     FSRow
   },
   props: {
@@ -138,10 +108,6 @@ export default defineComponent({
   setup(props, { emit }) {
     const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
-    const { slots } = useSlots();
-
-    delete slots.label;
-    delete slots.description;
 
     const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
@@ -198,7 +164,6 @@ export default defineComponent({
       timeScale,
       messages,
       blurred,
-      slots,
       style,
       onSubmitTimeScale,
       onSubmitValue

package/components/fields/FSTimeSlotField.vue

@@ -1,36 +1,12 @@
 <template>
-  <FSCol>
-    <slot v-if="!$props.hideHeader" name="label">
-      <FSRow :wrap="false">
-        <FSSpan
-          v-if="$props.label"
-          class="fs-time-slot-field-label"
-          font="text-overline"
-          :style="style"
-        >
-          {{ $props.label }}
-        </FSSpan>
-        <FSSpan
-          v-if="$props.label && $props.required"
-          class="fs-time-slot-field-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-time-slot-field-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"
+  >
     <FSRow>
       <FSRow
         :wrap="false"
@@ -42,16 +18,11 @@
           :clearable="false"
           :style="style"
           :rules="$props.rules"
-          :messages="messages"
           :validateOn="validateOn"
           :validationValue="$props.modelValue"
           :modelValue="dayStart"
           @update:modelValue="onChangeDayStart"
-        >
-          <template v-for="(_, name) in slots" v-slot:[name]="slotData">
-            <slot :name="name" v-bind="slotData" />
-          </template>
-        </FSSelectField>
+        />
         <FSClock
           class="fs-time-slot-field-number"
           :editable="$props.editable"
@@ -86,39 +57,27 @@
         />
       </FSRow>
     </FSRow>
-    <slot name="description">
-      <FSSpan
-        v-if="$props.description"
-        class="fs-time-slot-field-description"
-        font="text-underline"
-        :style="style"
-      >
-        {{ $props.description }}
-      </FSSpan>
-    </slot>
-  </FSCol>
+  </FSBaseField>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
-import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { Days } from "@dative-gpi/foundation-shared-domain/models";
 
 import FSSelectField from "./FSSelectField.vue";
+import FSBaseField from "./FSBaseField.vue";
 import FSClock from "../FSClock.vue";
-import FSSpan from "../FSSpan.vue";
-import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSTimeSlotField",
   components: {
     FSSelectField,
+    FSBaseField,
     FSClock,
-    FSSpan,
-    FSCol,
     FSRow
   },
   props: {
@@ -167,10 +126,6 @@ export default defineComponent({
   setup(props, { emit }) {
     const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
-    const { slots } = useSlots();
-
-    delete slots.label;
-    delete slots.description;
 
     const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
@@ -285,7 +240,6 @@ export default defineComponent({
       messages,
       blurred,
       dayEnd,
-      slots,
       style,
       onChangeHourStart,
       onChangeDayStart,

package/components/lists/FSDataIteratorItem.vue

@@ -7,14 +7,20 @@
     :variant="variant"
   >
     <FSCol>
-      <slot name="item.top" v-bind="{ item: $props.item }" />
+      <slot
+        name="item.top"
+        v-bind="{ item: $props.item }"
+      />
       <FSRow
         v-for="(header, index) in $props.headers"
         align="center-left"
         :wrap="false"
         :key="index"
       >
-        <slot :name="`header.${header.value}`" v-bind="{ header }">
+        <slot
+          :name="`header.${header.value}`"
+          v-bind="{ header }"
+        >
           <FSRow
             align="center-left"
           >
@@ -25,7 +31,10 @@
             </FSText>
           </FSRow>
         </slot>
-        <slot :name="`item.${header.value}`" v-bind="{ item: $props.item }">
+        <slot
+          :name="`item.${header.value}`"
+          v-bind="{ item: $props.item }"
+        >
           <FSRow
             align="center-left"
           >
@@ -35,7 +44,10 @@
           </FSRow>
         </slot>
       </FSRow>
-      <slot name="item.bottom" v-bind="{ item: $props.item }" />
+      <slot
+        name="item.bottom"
+        v-bind="{ item: $props.item }"
+      />
     </FSCol>
     <FSCard
       v-if="$props.showSelect"