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

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

@@ -7,7 +7,7 @@
     v-bind="$attrs"
   >
     <template
-      v-for="(_, name) in $slots"
+      v-for="(_, name) in slots"
       v-slot:[name]="slotData"
     >
       <slot
@@ -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>
@@ -58,6 +56,8 @@ import { computed, defineComponent, PropType, ref, watch } from "vue";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import { useSlots } from "../../composables";
+
 import FSTextField from "./FSTextField.vue";
 import FSButton from "../FSButton.vue";
 
@@ -122,6 +122,10 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { $tr } = useTranslationsProvider();
+    const { slots } = useSlots();
+
+    delete slots["prepend-inner"];
+    delete slots.append;
 
     const innerValue = ref(props.modelValue);
 
@@ -150,6 +154,7 @@ export default defineComponent({
       buttonLabel,
       innerValue,
       ColorEnum,
+      slots,
       onSearch
     };
   }

package/components/fields/FSTagField.vue

@@ -15,7 +15,7 @@
       v-bind="$attrs"
     >
       <template
-        v-for="(_, name) in $slots"
+        v-for="(_, name) in slots"
         v-slot:[name]="slotData"
       >
         <slot
@@ -26,17 +26,16 @@
       <template
         #append-inner
       >
+        <FSButton
+          variant="icon"
+          icon="mdi-tag-outline"
+          :editable="$props.editable"
+          :color="ColorEnum.Dark"
+          @click="onAdd"
+        />
         <slot
           name="append-inner"
-        >
-          <FSButton
-            variant="icon"
-            icon="mdi-tag-outline"
-            :editable="$props.editable"
-            :color="ColorEnum.Dark"
-            @click="onAdd"
-          />
-        </slot>
+        />
       </template>
     </FSTextField>
     <FSTagGroup
@@ -52,8 +51,8 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
+import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSTextField from "./FSTextField.vue";
 import FSTagGroup from "../FSTagGroup.vue";
@@ -119,6 +118,9 @@ export default defineComponent({
   setup(props, { emit }) {
     const {validateOn, getMessages} = useRules();
     const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots["append-inner"];
 
     const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
@@ -170,6 +172,7 @@ export default defineComponent({
       validateOn,
       ColorEnum,
       messages,
+      slots,
       style,
       onRemove,
       onAdd

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

@@ -6,7 +6,7 @@
     v-bind="$attrs"
   >
     <template
-      v-for="(_, name) in $slots"
+      v-for="(_, name) in slots"
       v-slot:[name]="slotData"
     >
       <slot
@@ -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
@@ -90,7 +89,7 @@ import { computed, defineComponent, onMounted, PropType, ref } from "vue";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useLanguages } from "@dative-gpi/foundation-shared-services/composables";
 
-import { useColors } from "../../composables";
+import { useColors, useSlots } from "../../composables";
 
 import FSDialogSubmit from "../FSDialogSubmit.vue";
 import FSTextField from "./FSTextField.vue";
@@ -160,6 +159,9 @@ export default defineComponent({
   setup(props, { emit }) {
     const { getMany: getManyLanguages, fetching: fetchingLanguages, entities: languages } = useLanguages();
     const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots.append;
 
     const innerTranslations = ref(props.translations);
     const dialog = ref(false);
@@ -226,6 +228,7 @@ export default defineComponent({
       ColorEnum,
       languages,
       dialog,
+      slots,
       style,
       getTranslation,
       setTranslation,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.160",
+  "version": "0.0.162",
   "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.162",
+    "@dative-gpi/foundation-shared-services": "0.0.162",
     "@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": "bc6eb7f88688792ee99ea10e71b4a53df55b464f"
 }

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;