@dative-gpi/foundation-shared-components 1.0.14 → 1.0.16

package/components/FSButton.vue

@@ -2,19 +2,20 @@
   <FSClickable
     v-if="$props.variant !== 'icon'"
     :editable="$props.editable"
-    :height="['40px', '36px']"
+    :padding="$props.padding"
     :variant="$props.variant"
+    :height="$props.height"
     :color="$props.color"
+    :width="$props.width"
     :load="$props.load"
     :href="$props.href"
-    :padding="padding"
     :to="$props.to"
     :style="style"
-    :width="width"
     @click.stop="onClick"
     v-bind="$attrs"
   >
     <FSRow
+      v-if="$props.axis === 'horizontal'"
       align="center-center"
       width="fill"
       :wrap="false"
@@ -51,6 +52,43 @@
         </FSIcon>
       </slot>
     </FSRow>
+    <FSCol
+      v-else
+      align="center-center"
+      width="fill"
+    >
+      <slot
+        name="prepend"
+        v-bind="{ color: $props.color, colors }"
+      >
+        <FSIcon
+          v-if="$props.prependIcon || $props.icon"
+          :size="$props.iconSize"
+        >
+          {{ $props.prependIcon ?? $props.icon }}
+        </FSIcon>
+      </slot>
+      <slot
+        v-bind="{ color: $props.color, colors }"
+      >
+        <FSSpan
+          v-if="$props.label"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </slot>
+      <slot
+        name="append"
+        v-bind="{ color: $props.color, colors }"
+      >
+        <FSIcon
+          v-if="$props.appendIcon"
+          :size="$props.iconSize"
+        >
+          {{ $props.appendIcon }}
+        </FSIcon>
+      </slot>
+    </FSCol>
   </FSClickable>
   <FSRow
     v-else
@@ -132,11 +170,12 @@ import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 import { type RouteLocation } from "vue-router";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSClickable from "./FSClickable.vue";
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
+import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
@@ -145,9 +184,25 @@ export default defineComponent({
     FSClickable,
     FSSpan,
     FSIcon,
+    FSCol,
     FSRow
   },
   props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => ["40px", "36px"]
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fit-content"
+    },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "0 16px"
+    },
     to: {
       type: [String, Object] as PropType<string | RouteLocation | null>,
       required: false,
@@ -188,16 +243,16 @@ export default defineComponent({
       required: false,
       default: "standard"
     },
+    axis: {
+      type: String as PropType<"horizontal" | "vertical">,
+      required: false,
+      default: "horizontal"
+    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Light
     },
-    fullWidth: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     load: {
       type: Boolean,
       required: false,
@@ -212,7 +267,6 @@ export default defineComponent({
   emits: ["click"],
   setup(props, { emit }) {
     const { getColors } = useColors();
-    const { slots } = useSlots();
 
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
@@ -260,21 +314,6 @@ export default defineComponent({
       }
     });
 
-    const padding = computed((): string | number => {
-      switch (props.variant) {
-        case "standard":
-        case "full":     return (!slots.default && !props.label) ? "0 7px" : "0 16px";
-        default:         return "0px";
-      }
-    });
-
-    const width = computed((): string | number => {
-      if (props.fullWidth) {
-        return "100%";
-      }
-      return "fit-content";
-    });
-
     const onClick = (event: MouseEvent) => {
       if (!props.to && !props.href && props.editable && !props.load) {
         emit("click", event);
@@ -284,10 +323,8 @@ export default defineComponent({
     return {
       iconClasses,
       loadColor,
-      padding,
       colors,
       style,
-      width,
       onClick
     };
   }

package/components/FSClickable.vue

@@ -11,6 +11,7 @@
     <FSCard
       :borderRadius="$props.borderRadius"
       :borderStyle="$props.borderStyle"
+      :padding="$props.padding"
       :height="$props.height"
       :width="$props.width"
       :class="classes"
@@ -51,6 +52,7 @@
     <FSCard
       :borderRadius="$props.borderRadius"
       :borderStyle="$props.borderStyle"
+      :padding="$props.padding"
       :height="$props.height"
       :width="$props.width"
       :class="classes"
@@ -92,6 +94,7 @@
     <FSCard
       :borderRadius="$props.borderRadius"
       :borderStyle="$props.borderStyle"
+      :padding="$props.padding"
       :height="$props.height"
       :width="$props.width"
       :class="classes"
@@ -148,6 +151,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "0"
+    },
     to: {
       type: [String, Object] as PropType<string | RouteLocation | null>,
       required: false,

package/components/FSIconCard.vue

@@ -46,7 +46,7 @@ export default defineComponent({
       default: null
     },
     backgroundVariant: {
-      type: String as PropType<"background" | "gradient">,
+      type: String as PropType<"background" | "standard" | "full" | "gradient">,
       required: false,
       default: "background"
     },

package/components/FSSwitch.vue

@@ -74,7 +74,7 @@ export default defineComponent({
       default: null
     },
     modelValue: {
-      type: Boolean,
+      type: Boolean as PropType<boolean | null>,
       required: false,
       default: false
     },

package/components/buttons/FSButtonAddMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-plus-circle-outline"
+    padding="0 7px"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonCancelMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-cancel"
+    padding="0 7px"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonDuplicateMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-content-copy"
+    padding="0 7px"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonEditMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-pencil-outline"
+    padding="0 7px"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonFileMini.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <FSButton
+      padding="0 7px"
       :prependIcon="$props.icon"
       :color="ColorEnum.Light"
       @click="onClick"

package/components/buttons/FSButtonNextMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-chevron-right"
+    padding="0 7px"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonPreviousMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-chevron-left"
+    padding="0 7px"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonRedoMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-redo-variant"
+    padding="0 7px"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonRemoveMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-delete-outline"
+    padding="0 7px"
     :color="ColorEnum.Error"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonSaveMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-content-save-outline"
+    padding="0 7px"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonSearchMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-magnify"
+    padding="0 7px"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonUndoMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-undo-variant"
+    padding="0 7px"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonUpdateMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-pencil-outline"
+    padding="0 7px"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonValidateMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-check"
+    padding="0 7px"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/lists/FSDataTableUI.vue

@@ -22,6 +22,7 @@
         <FSButton
           v-if="filterableHeaders.length > 0"
           prependIcon="mdi-filter-variant"
+          padding="0 7px"
           :variant="showFilters ? 'full' : 'standard'"
           @click="showFilters = !showFilters"
         />

package/components/map/FSMap.vue

@@ -65,6 +65,7 @@
             <FSButton
               v-if="$props.showFullScreen"
               prependIcon="mdi-fullscreen"
+              padding="0 7px"
               :elevation="true"
               @click="fullScreen = !fullScreen"
             />
@@ -86,10 +87,10 @@
             <FSButton
               v-if="$props.showMyLocation"
               prependIcon="mdi-crosshairs-gps"
+              padding="0 7px"
               color="primary"
               variant="full"
               :elevation="true"
-              :border="false"
               @click="locate"
             />
             <FSCol
@@ -98,17 +99,15 @@
             >
 
               <FSButton
-                class="fs-map-zoom-plus"
                 prependIcon="mdi-plus"
+                padding="0 7px"
                 :elevation="true"
-                :border="false"
                 @click="zoomIn"
               />
               <FSButton
-                class="fs-map-zoom-minus"
                 prependIcon="mdi-minus"
+                padding="0 7px"
                 :elevation="true"
-                :border="false"
                 @click="zoomOut"
               />
             </FSCol>

package/components/map/FSMapLayerButton.vue

@@ -1,19 +1,21 @@
 <template>
   <FSButton
     prependIcon="mdi-layers-outline"
+    padding="0 7px"
     :elevation="true"
     @click="dialog = true"
   />
   <FSDialog
     v-model="dialog"
-    title="Select Layers"
-    width="442px"
+    width="500px"
+    :title="$tr('ui.map.select-layer', 'Select layer')"
   >
     <template
       v-slot:body
     >
       <FSRow
         align="center-center"
+        padding="0 16px 0 0"
       >
         <FSImageCard
           v-for="layer in layers"

package/components/tiles/FSFolderTileUI.vue

@@ -1,7 +1,9 @@
 <template>
   <FSSimpleTileUI
-    :iconBackgroundColor="true"
+    iconBackgroundVariant="gradient"
+    :iconBackgroundColor="color"
     :bottomColor="color"
+    :iconBorder="false"
     :icon="$props.icon"
     v-bind="$attrs"
   />

package/components/tiles/FSSimpleTileUI.vue

@@ -36,13 +36,15 @@
         </FSCol>
         <FSImage
           v-if="$props.imageId"
+          :imageId="$props.imageId"
           :height="imageSize"
           :width="imageSize"
-          :imageId="$props.imageId"
         />
         <FSIconCard
           v-else
-          :backgroundColor="iconBackgroundColor"
+          :backgroundVariant="$props.iconBackgroundVariant"
+          :backgroundColor="$props.iconBackgroundColor"
+          :border="$props.iconBorder"
           :icon="$props.icon"
           :size="imageSize"
         />
@@ -90,16 +92,26 @@ export default defineComponent({
       required: false,
       default: null
     },
-    iconBackgroundColor: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     icon: {
       type: String as PropType<string>,
       required: false,
       default: "mdi-ab-testing"
     },
+    iconBackgroundVariant: {
+      type: String as PropType<"background" | "standard" | "full" | "gradient">,
+      required: false,
+      default: "background"
+    },
+    iconBackgroundColor: {
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      required: false,
+      default: ColorEnum.Background
+    },
+    iconBorder: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
     activeColor: {
       type: String as PropType<ColorBase>,
       required: false,

package/components/views/FSEntityHeader.vue

@@ -17,21 +17,23 @@
         <FSImage
           v-if="$props.imageId"
           :imageId="$props.imageId"
+          :cover="imageCover"
           :height="imageSize"
           :width="imageSize"
-          :cover="imageCover"
         />
         <FSIcon
           v-else-if="$props.icon && $props.color"
+          :color="$props.color"
           :icon="$props.icon"
           :size="imageSize"
-          :color="$props.color"
         />
         <FSIconCard
-          v-else-if="$props.icon && $props.iconBackgroundColors && $props.iconBackgroundColors.length > 0"
+          v-else-if="$props.icon && $props.iconBackgroundColor && $props.iconBackgroundColor.length > 0"
+          :backgroundVariant="$props.iconBackgroundVariant"
+          :backgroundColor="$props.iconBackgroundColor"
+          :border="$props.iconBorder"
           :icon="$props.icon"
           :size="imageSize"
-          :backgroundColor="$props.iconBackgroundColors"
         />
         <FSCol
           align="center-left"
@@ -137,16 +139,18 @@
         <FSImage
           v-if="$props.imageId"
           :imageId="$props.imageId"
+          :cover="imageCover"
           :height="imageSize"
           :width="imageSize"
-          :cover="imageCover"
         />
         <FSIconCard
-          v-else-if="$props.icon && $props.iconBackgroundColors && $props.iconBackgroundColors.length > 0"
+          v-else-if="$props.icon && $props.iconBackgroundColor && $props.iconBackgroundColor.length > 0"
+          iconSize="70px"
+          :backgroundVariant="$props.iconBackgroundVariant"
+          :backgroundColor="$props.iconBackgroundColor"
+          :border="$props.iconBorder"
           :icon="$props.icon"
           :size="imageSize"
-          iconSize="70px"
-          :backgroundColor="$props.iconBackgroundColors"
         />
         <FSIcon
           v-else-if="$props.icon"
@@ -210,7 +214,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { type ColorBase, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum, type ColorBase, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSBreadcrumbs from "../FSBreadcrumbs.vue";
@@ -240,20 +244,30 @@ export default defineComponent({
       required: false,
       default: null
     },
-    icon: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: null
     },
-    iconBackgroundColors: {
-      type: Array as PropType<string[]>,
+    icon: {
+      type: String as PropType<string>,
+      required: false,
+      default: "mdi-ab-testing"
+    },
+    iconBackgroundVariant: {
+      type: String as PropType<"background" | "standard" | "full" | "gradient">,
       required: false,
-      default: () => []
+      default: "background"
+    },
+    iconBackgroundColor: {
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      required: false,
+      default: ColorEnum.Background
+    },
+    iconBorder: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
     },
     title: {
       type: String as PropType<string | null>,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.14",
-    "@dative-gpi/foundation-shared-services": "1.0.14"
+    "@dative-gpi/foundation-shared-domain": "1.0.16",
+    "@dative-gpi/foundation-shared-services": "1.0.16"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "e073c5a79111956c451fe05f19c7829246d4784e"
+  "gitHead": "ed54fe2f03db8e7af8bbf5fcc585a2b4cd52f52e"
 }