@dative-gpi/foundation-shared-components 0.0.160 → 0.0.161

package/components/fields/FSIconField.vue

@@ -22,6 +22,9 @@
         >
           {{ $props.modelValue }}
         </FSIcon>
+        <slot
+          name="append-inner"
+        />
       </template>
     </FSTextField>
     <FSToggleSet

package/components/fields/FSNumberField.vue

@@ -1,5 +1,6 @@
 <template>
   <FSTextField
+    class="fs-number-field"
     :editable="$props.editable"
     :modelValue="$props.modelValue?.toString()"
     @update:modelValue="onUpdate"

package/components/fields/FSPasswordField.vue

@@ -18,17 +18,16 @@
     <template
       #append-inner
     >
+      <FSButton
+        variant="icon"
+        :editable="$props.editable"
+        :color="ColorEnum.Dark"
+        :icon="icon"
+        @click="onToggle"
+      />
       <slot
         name="append-inner"
-      >
-        <FSButton
-          variant="icon"
-          :editable="$props.editable"
-          :color="ColorEnum.Dark"
-          :icon="icon"
-          @click="onToggle"
-        />
-      </slot>
+      />
     </template>
   </FSTextField>
 </template>

package/components/fields/FSSearchField.vue

@@ -16,38 +16,36 @@
       />
     </template>
     <template
-      v-if="$props.prependInnerIcon"
       #prepend-inner
     >
+      <FSButton
+        v-if="$props.prependInnerIcon"
+        variant="icon"
+        :icon="$props.prependInnerIcon"
+        :editable="$props.editable"
+        :color="ColorEnum.Dark"
+        @click="onSearch"
+      />
       <slot
         name="prepend-inner"
-      >
-        <FSButton
-          variant="icon"
-          :icon="$props.prependInnerIcon"
-          :editable="$props.editable"
-          :color="ColorEnum.Dark"
-          @click="onSearch"
-        />
-      </slot>
+      />
     </template>
     <template
-      v-if="!['instant'].includes($props.variant)"
       #append
     >
+      <FSButton
+        v-if="!['instant'].includes($props.variant)"
+        :prependIcon="$props.buttonPrependIcon"
+        :label="buttonLabel"
+        :appendIcon="$props.buttonAppendIcon"
+        :variant="$props.buttonVariant"
+        :color="$props.buttonColor"
+        :editable="$props.editable"
+        @click="onSearch"
+      />
       <slot
         name="append"
-      >
-        <FSButton
-          :prependIcon="$props.buttonPrependIcon"
-          :label="buttonLabel"
-          :appendIcon="$props.buttonAppendIcon"
-          :variant="$props.buttonVariant"
-          :color="$props.buttonColor"
-          :editable="$props.editable"
-          @click="onSearch"
-        />
-      </slot>
+      />
     </template>
   </FSTextField>
 </template>

package/components/fields/FSTimeField.vue

@@ -20,7 +20,7 @@
         v-bind="$attrs"
       >
         <template
-          v-for="(_, name) in $slots"
+          v-for="(_, name) in numberSlots"
           v-slot:[name]="slotData"
         >
           <slot
@@ -37,7 +37,17 @@
         :items="timeScale"
         :modelValue="selectedUnit.id"
         @update:modelValue="onSubmitTimeScale"
-      />
+      >
+        <template
+          v-for="(_, name) in selectSlots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </FSSelectField>
     </FSRow>
   </FSBaseField>
 </template>
@@ -45,8 +55,8 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
+import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { getTimeScaleIndex, timeScale } from "@dative-gpi/foundation-shared-components/utils";
-import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSNumberField from "./FSNumberField.vue";
@@ -108,6 +118,10 @@ export default defineComponent({
   setup(props, { emit }) {
     const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots.label;
+    delete slots.description;
 
     const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
@@ -145,6 +159,20 @@ export default defineComponent({
       };
     });
 
+    const numberSlots = computed((): any => {
+      return Object.keys(slots).filter(k => k.startsWith("number-")).reduce((acc, key) => {
+        acc[key.substring("number-".length)] = slots[key];
+        return acc;
+      }, {});
+    });
+
+    const selectSlots = computed((): any => {
+      return Object.keys(slots).filter(k => k.startsWith("select-")).reduce((acc, key) => {
+        acc[key.substring("select-".length)] = slots[key];
+        return acc;
+      }, {});
+    });
+
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
     const onSubmitValue = (value: number): void => {
@@ -159,6 +187,8 @@ export default defineComponent({
 
     return {
       selectedUnit,
+      numberSlots,
+      selectSlots,
       validateOn,
       innerTime,
       timeScale,

package/components/fields/FSTranslateField.vue

@@ -17,19 +17,18 @@
     <template
       #append
     >
+      <FSButton
+        :prependIcon="$props.buttonPrependIcon"
+        :label="$props.buttonLabel"
+        :appendIcon="$props.buttonAppendIcon"
+        :variant="$props.buttonVariant"
+        :color="$props.buttonColor"
+        :load="fetchingLanguages"
+        @click="dialog = true"
+      />
       <slot
         name="append"
-      >
-        <FSButton
-          :prependIcon="$props.buttonPrependIcon"
-          :label="$props.buttonLabel"
-          :appendIcon="$props.buttonAppendIcon"
-          :variant="$props.buttonVariant"
-          :color="$props.buttonColor"
-          :load="fetchingLanguages"
-          @click="dialog = true"
-        />
-      </slot>
+      />
     </template>
   </FSTextField>
   <FSDialogSubmit

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.160",
+  "version": "0.0.161",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.160",
-    "@dative-gpi/foundation-shared-services": "0.0.160",
+    "@dative-gpi/foundation-shared-domain": "0.0.161",
+    "@dative-gpi/foundation-shared-services": "0.0.161",
     "@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": "fb4e1055e6dcf28c07dd57ab94cccc303e98ebbb"
+  "gitHead": "f6534cbfe0ebbaf134fd2734c7abd9ecad95fcc4"
 }

package/styles/components/fs_rich_text_field.scss

@@ -1,6 +1,6 @@
 .fs-rich-text-field {
     width: 100%;
-    min-width: 240px;
+    min-width: 120px;
     outline: none !important;
     border: 1px solid var(--fs-rich-text-field-border-color) !important;
     border-radius: 4px !important;

package/styles/components/fs_time_field.scss

@@ -1,7 +1,3 @@
-.fs-time-field-select {
-    min-width: 180px;
-}
-
 .fs-time-field-label {
     color: var(--fs-time-field-color);
 }

package/styles/globals/overrides.scss

@@ -34,8 +34,13 @@
         flex: 0 0 auto;
     }
 
-    &:not(.v-checkbox):not(.v-slider):not(.fs-small-input) {
-        min-width: 150px;
+    &:not(.v-checkbox):not(.v-slider):not(.fs-small-input):not(.fs-number-field) {
+        min-width: 120px;
+        width: 100%;
+    }
+
+    &.fs-number-field {
+        min-width: 80px;
         width: 100%;
     }
 
@@ -85,7 +90,7 @@
     }
 
     &:not(.fs-text-area) > .v-input__control > .v-field {
-        padding: 0 16px !important;
+        padding: 0 12px 0 16px !important;
 
         & > .v-field__field > .v-field__input {
             @extend .text-body;