@dative-gpi/foundation-shared-components 0.0.13 → 0.0.14

package/components/fields/FSTimeField.vue

@@ -1,12 +1,52 @@
 <template>
-  <FSNumberField
-    class="fs-time-field"
-    :editable="$props.editable"
-    :modelValue="innerTime"
-    @update:modelValue="onSubmitValue"
-    v-bind="$attrs"
-  >
-    <template #append> 
+  <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>
+    <FSRow>
+      <FSNumberField
+        :editable="$props.editable"
+        :hideHeader="true"
+        :rules="$props.rules"
+        :messages="messages"
+        :validateOn="validateOn"
+        :validationValue="$props.modelValue"
+        :modelValue="innerTime"
+        @update:modelValue="onSubmitValue"
+        v-bind="$attrs"
+        >
+        <template v-for="(_, name) in slots" v-slot:[name]="slotData">
+          <slot :name="name" v-bind="slotData" />
+        </template>
+      </FSNumberField>
       <FSSelectField
         class="fs-time-field-select"
         :editable="$props.editable"
@@ -16,32 +56,78 @@
         :modelValue="selectedUnit.id"
         @update:modelValue="onSubmitTimeScale"
       />
-    </template>
-  </FSNumberField>
+    </FSRow>
+    <slot name="description">
+      <FSSpan
+        v-if="$props.description"
+        class="fs-time-field-description"
+        font="text-underline"
+        :style="style"
+      >
+        {{ $props.description }}
+      </FSSpan>
+    </slot>
+  </FSCol>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, PropType, ref } from "vue";
 
 import { getTimeScaleIndex, timeScale } from "@dative-gpi/foundation-shared-components/utils";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useRules, useSlots } 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 FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSTimeField",
   components: {
     FSNumberField,
-    FSSelectField
+    FSSelectField,
+    FSSpan,
+    FSCol,
+    FSRow
   },
   props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
     modelValue: {
       type: Number,
       required: false,
       default: null
     },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    rules: {
+      type: Array as PropType<Function[]>,
+      required: false,
+      default: () => []
+    },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -50,6 +136,17 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   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);
+    const darks = getColors(ColorEnum.Dark);
+    
     const innerTime = ref(props.modelValue);
     const selectedUnit = ref(timeScale[0]);
 
@@ -58,10 +155,6 @@ export default defineComponent({
       innerTime.value = props.modelValue / selectedUnit.value.id;
     }
 
-    const errors = useColors().getColors(ColorEnum.Error);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
-
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       if (!props.editable) {
         return {
@@ -81,6 +174,8 @@ export default defineComponent({
       };
     });
 
+    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
+
     const onSubmitValue = (value: number): void => {
       innerTime.value = value;
       emit("update:modelValue", innerTime.value * selectedUnit.value.id);
@@ -92,12 +187,15 @@ export default defineComponent({
     };
 
     return {
-      style,
-      innerTime,
       selectedUnit,
+      validateOn,
+      innerTime,
       timeScale,
-      onSubmitValue,
+      messages,
+      blurred,
+      style,
       onSubmitTimeScale,
+      onSubmitValue
     };
   }
 });

package/components/fields/FSTimeSlotField.vue

@@ -32,55 +32,61 @@
       </FSRow>
     </slot>
     <FSRow>
-      <FSSelectField
-        class="fs-time-slot-field-select"
-        :editable="$props.editable"
-        :items="daysObject"
-        :hideHeader="true"
-        :clearable="false"
-        :style="style"
-        :modelValue="dayStart"
-        @update:modelValue="onChangeDayStart"
+      <FSRow
+        :wrap="false"
       >
-        <template v-for="(_, name) in slots" v-slot:[name]="slotData">
-          <slot :name="name" v-bind="slotData" />
-        </template>
-        <template #append>
-          <FSClock
-            class="fs-time-slot-field-number"
-            :editable="$props.editable"
-            :color="ColorEnum.Light"
-            :reminder="false"
-            :slider="false"
-            :style="style"
-            :modelValue="$props.modelValue[0][1]"
-            @update:modelValue="onChangeHourStart"
-          />
-        </template>
-      </FSSelectField>
-      <FSSelectField
-        class="fs-time-slot-field-select"
-        :editable="$props.editable"
-        :items="daysObject"
-        :hideHeader="true"
-        :clearable="false"
-        :style="style"
-        :modelValue="dayEnd"
-        @update:modelValue="onChangeDayEnd"
+        <FSSelectField
+          :editable="$props.editable"
+          :items="daysObject"
+          :hideHeader="true"
+          :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"
+          :color="ColorEnum.Light"
+          :reminder="false"
+          :slider="false"
+          :style="style"
+          :modelValue="$props.modelValue[0][1]"
+          @update:modelValue="onChangeHourStart"
+        />
+      </FSRow>
+      <FSRow
+        :wrap="false"
       >
-        <template #append>
-          <FSClock
-            class="fs-time-slot-field-number"
-            :editable="$props.editable"
-            :color="ColorEnum.Light"
-            :reminder="false"
-            :slider="false"
-            :style="style"
-            :modelValue="$props.modelValue[1][1]"
-            @update:modelValue="onChangeHourEnd"
-          />
-        </template>
-      </FSSelectField>
+        <FSSelectField
+          class="fs-time-slot-field-select"
+          :editable="$props.editable"
+          :items="daysObject"
+          :hideHeader="true"
+          :clearable="false"
+          :style="style"
+          :modelValue="dayEnd"
+          @update:modelValue="onChangeDayEnd"
+        />
+        <FSClock
+          class="fs-time-slot-field-number"
+          :editable="$props.editable"
+          :color="ColorEnum.Light"
+          :reminder="false"
+          :slider="false"
+          :style="style"
+          :modelValue="$props.modelValue[1][1]"
+          @update:modelValue="onChangeHourEnd"
+        />
+      </FSRow>
     </FSRow>
     <slot name="description">
       <FSSpan
@@ -244,19 +250,19 @@ export default defineComponent({
     };
 
     return {
-      ColorEnum,
       daysObject,
-      dayStart,
-      dayEnd,
       validateOn,
+      ColorEnum,
+      dayStart,
       messages,
       blurred,
+      dayEnd,
       slots,
       style,
-      onChangeDayStart,
       onChangeHourStart,
-      onChangeDayEnd,
-      onChangeHourEnd
+      onChangeDayStart,
+      onChangeHourEnd,
+      onChangeDayEnd
     };
   }
 });

package/components/lists/FSDataTableUI.vue

@@ -222,6 +222,7 @@
             <v-spacer />
             <FSRow
               align="center-right"
+              width="hug"
               :wrap="false"
             >
               <FSText
@@ -229,16 +230,13 @@
               >
                 {{ $tr("ui.data-table.rows-per-page", "Rows per page") }}
               </FSText>
-              <FSRow
-                width="120px"
-              >
-                <FSSelectField
-                  :clearable="false"
-                  :hideHeader="true"
-                  :items="rowsPerPageOptions"
-                  v-model="innerRowsPerPage"
-                />
-              </FSRow>
+              <FSSelectField
+                class="fs-data-table-rows-per-page"
+                :clearable="false"
+                :hideHeader="true"
+                :items="rowsPerPageOptions"
+                v-model="innerRowsPerPage"
+              />
             </FSRow>
             <FSToggleSet
               v-if="innerRowsPerPage !== -1"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.13",
-    "@dative-gpi/foundation-shared-services": "0.0.13",
+    "@dative-gpi/foundation-shared-domain": "0.0.14",
+    "@dative-gpi/foundation-shared-services": "0.0.14",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "c99a5f4be0427449b3b00ef6d467528bae8b1ada"
+  "gitHead": "e0e44041b264a555d7eccfb49ae4deaf933bd436"
 }

package/styles/components/fs_autocomplete_field.scss

@@ -1,5 +1,6 @@
 .fs-autocomplete-field {
     padding: 0px !important;
+    min-width: 240px;
     width: 100%;
 
     & > .v-input__control > .v-field {
@@ -24,6 +25,8 @@
         & > .v-field__field > .v-field__input {
             @extend .text-body;
         
+            flex-wrap: nowrap;
+            overflow: hidden;
             padding-inline: 0 !important;
             color: var(--fs-autocomplete-field-color);
             cursor: var(--fs-autocomplete-field-cursor) !important;
@@ -37,32 +40,6 @@
                 min-height: 34px !important;
                 height: 34px !important;
             }
-
-            & > .v-autocomplete__selection {
-                @include web {
-                    margin-top: -16px;
-                    height: 38px !important;
-                }
-            
-                @include mobile {
-                    margin-top: -15px;
-                    height: 34px !important;
-                }
-            }
-
-            & > input {
-                @include web {
-                    top: 16px;
-                    margin-top: -16px;
-                    height: 38px !important;
-                }
-            
-                @include mobile {
-                    top: 17px;
-                    margin-top: -17px;
-                    height: 34px !important;
-                }
-            }
         }
 
         & > .v-field__clearable {
@@ -71,40 +48,6 @@
 
         & > .v-field__append-inner {
             color: var(--fs-autocomplete-field-color);
-
-            & > i {
-                margin-inline-start: 0px;
-            }
-        }
-    }
-}
-
-.fs-autocomplete-multiple-field {
-    & > .v-input__control > .v-field {
-        & > .v-field__field > .v-field__input {
-            & > .v-autocomplete__selection {
-                @include web {
-                    margin-top: -16px;
-                    height: 38px !important;
-                }
-            
-                @include mobile {
-                    margin-top: -15px;
-                    height: 34px !important;
-                }
-            }
-
-            & > input {
-                @include web {
-                    margin-top: -16px;
-                    height: 38px !important;
-                }
-            
-                @include mobile {
-                    margin-top: -17px;
-                    height: 34px !important;
-                }
-            }
         }
     }
 }

package/styles/components/fs_color_field.scss

@@ -14,4 +14,8 @@
   background: none !important;
   min-width: auto !important;
   width: 100% !important;
+}
+
+.fs-color-field-description {
+    color: var(--fs-color-field-color);
 }

package/styles/components/fs_data_table.scss

@@ -80,13 +80,18 @@
     background-color: var(--fs-data-table-background-color);
 }
 
+.fs-data-table-rows-per-page > .fs-select-field {
+    min-width: 120px !important;
+    width: 120px !important;
+}
+
 .fs-data-table-pagination {
     @include web {
-        width: 172px;
+        max-width: 200px;
     }
 
     @include mobile {
-        width: 172px;
+        max-width: 194px;
     }
 }
 

package/styles/components/fs_rich_text_field.scss

@@ -1,5 +1,6 @@
 .fs-rich-text-field {
     width: 100%;
+    min-width: 240px;
     outline: none !important;
     border: 1px solid var(--fs-rich-text-field-border-color) !important;
     border-radius: 4px !important;
@@ -63,5 +64,4 @@
 
 .editor-link {
     color: var(--fs-rich-text-field-link-color);
-    text-decoration: underline;
 }

package/styles/components/fs_select_field.scss

@@ -1,5 +1,6 @@
 .fs-select-field {
     padding: 0px !important;
+    min-width: 240px;
     width: 100%;
 
     & > .v-input__control > .v-field {
@@ -24,6 +25,8 @@
         & > .v-field__field > .v-field__input {
             @extend .text-body;
         
+            flex-wrap: nowrap;
+            overflow: hidden;
             padding-inline: 0 !important;
             color: var(--fs-select-field-color);
             cursor: var(--fs-select-field-cursor) !important;
@@ -49,10 +52,6 @@
 
         & > .v-field__append-inner {
             color: var(--fs-select-field-color);
-
-            & > i {
-                margin-inline-start: 0px;
-            }
         }
     }
 }

package/styles/components/fs_switch.scss

@@ -1,4 +1,5 @@
 .fs-switch-size {
+    min-width: 40px !important;
     width: 40px !important;
     min-height: 24px !important;
     height: 24px !important;
@@ -37,11 +38,10 @@
     color: var(--fs-switch-color) !important;
 }
 
-.v-switch__track {
-    width: 40px !important;
-    height: 24px !important;
-    background-color: var(--fs-switch-track-color) !important;
+.v-switch--inset .v-switch__track {
+    @extend .fs-switch-size;
 
+    background-color: var(--fs-switch-track-color) !important;
 }
 
 .v-switch__thumb {

package/styles/components/fs_text_area.scss

@@ -1,5 +1,6 @@
 .fs-text-area:not(.fs-text-area-auto-grow) {
     padding: 0px !important;
+    min-width: 240px;
     width: 100%;
 
     & > .v-input__control > .v-field {
@@ -47,6 +48,7 @@
 
 .fs-text-area-auto-grow {
     padding: 0px !important;
+    min-width: 240px;
     width: 100%;
 
     & > .v-input__control > .v-field {

package/styles/components/fs_text_field.scss

@@ -1,5 +1,6 @@
 .fs-text-field {
     padding: 0px !important;
+    min-width: 240px;
     width: 100%;
 
     & > .v-input__control > .v-field {

package/styles/components/fs_time_field.scss

@@ -1,3 +1,16 @@
 .fs-time-field-select {
     min-width: 180px;
+}
+
+.fs-time-field-label {
+    color: var(--fs-time-field-color);
+}
+
+.fs-time-field-messages {
+    align-self: stretch;
+    color: var(--fs-time-field-error-color);
+}
+
+.fs-time-field-description {
+    color: var(--fs-time-field-color);
 }