@dative-gpi/foundation-shared-components 0.0.48 → 0.0.49

package/components/FSClickable.vue

@@ -1,11 +1,13 @@
 <template>
   <button
     v-if="!href"
-    :class="wrapperClasses"
     :type="$props.type"
+    :style="style"
     @click.stop="onClick"
   >
     <FSCard
+      :height="$props.height"
+      :width="$props.width"
       :class="classes"
       :style="style"
       v-bind="$attrs"
@@ -26,10 +28,12 @@
   </button>
   <router-link
     v-else
-    :class="wrapperClasses"
+    :style="style"
     :to="href"
   >
     <FSCard
+      :height="$props.height"
+      :width="$props.width"
       :class="classes"
       :style="style"
       v-bind="$attrs"
@@ -96,10 +100,15 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
-    fullWidth: {
-      type: Boolean,
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
       required: false,
-      default: false
+      default: null
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+      required: false,
+      default: null
     },
     load: {
       type: Boolean,
@@ -128,7 +137,9 @@ export default defineComponent({
           "--fs-clickable-border-radius"   : sizeToVar(props.borderRadius),
           "--fs-clickable-background-color": lights.light,
           "--fs-clickable-border-color"    : lights.dark,
-          "--fs-clickable-color"           : lights.dark
+          "--fs-clickable-color"           : lights.dark,
+          "--fs-clickable-height"          : sizeToVar(props.height),
+          "--fs-clickable-width"           : sizeToVar(props.width)
         };
       }
       switch (props.variant) {
@@ -143,7 +154,9 @@ export default defineComponent({
           "--fs-clickable-hover-color"            : colors.value.baseContrast,
           "--fs-clickable-active-background-color": colors.value.dark,
           "--fs-clickable-active-border-color"    : colors.value.darkContrast,
-          "--fs-clickable-active-color"           : colors.value.darkContrast
+          "--fs-clickable-active-color"           : colors.value.darkContrast,
+          "--fs-clickable-height"                 : sizeToVar(props.height),
+          "--fs-clickable-width"                  : sizeToVar(props.width)
         };
         case "full": return {
           "--fs-clickable-border-size"            : props.border ? "1px" : "0",
@@ -156,7 +169,9 @@ export default defineComponent({
           "--fs-clickable-hover-color"            : colors.value.baseContrast,
           "--fs-clickable-active-background-color": colors.value.dark,
           "--fs-clickable-active-border-color"    : colors.value.dark,
-          "--fs-clickable-active-color"           : colors.value.darkContrast
+          "--fs-clickable-active-color"           : colors.value.darkContrast,
+          "--fs-clickable-height"                 : sizeToVar(props.height),
+          "--fs-clickable-width"                  : sizeToVar(props.width)
         };
       }
     });
@@ -169,14 +184,6 @@ export default defineComponent({
       return classNames;
     });
 
-    const wrapperClasses = computed((): string[] => {
-      const classNames: string[] = [];
-      if (props.fullWidth) {
-        classNames.push("fs-clickable-wrapper-full-width");
-      }
-      return classNames;
-    });
-
     const href = computed((): string | null => {
       if (!props.to || !props.editable || props.load) {
         return null;
@@ -206,7 +213,6 @@ export default defineComponent({
     };
 
     return {
-      wrapperClasses,
       loadColor,
       classes,
       style,

package/components/FSLink.vue

@@ -3,9 +3,10 @@
     :class="classes"
     :style="style"
     :to="href"
+    v-slot="props"
     v-bind="$attrs"
   >
-    <slot>
+    <slot v-bind="props">
       {{ $props.label }}
     </slot>
   </router-link>

package/components/fields/FSAutocompleteField.vue

@@ -45,6 +45,7 @@
       :itemValue="$props.itemValue"
       :readonly="!$props.editable"
       :clearable="$props.editable && !!$props.modelValue"
+      :returnObject="$props.returnObject"
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
@@ -127,6 +128,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    returnObject: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     required: {
       type: Boolean,
       required: false,

package/components/fields/FSSelectField.vue

@@ -43,6 +43,7 @@
       :itemValue="$props.itemValue"
       :readonly="!$props.editable"
       :clearable="$props.editable && $props.clearable"
+      :returnObject="$props.returnObject"
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
@@ -119,6 +120,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    returnObject: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     required: {
       type: Boolean,
       required: false,

package/components/lists/FSDataTableUI.vue

@@ -423,6 +423,7 @@
                 width="120px"
               >
                 <FSSelectField
+                  class="fs-data-table-rows-per-page"
                   :clearable="false"
                   :hideHeader="true"
                   :items="rowsPerPageOptions"

package/components/selects/FSSelectTimeZone.vue

@@ -1,32 +1,38 @@
 <template>
   <FSSelectField
     itemTitle="id"
-    :items="entities"
+    :items="timeZones"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
-    <template #selection>
-      <FSRow>
-        <FSSpan font="text-underline" :style="style">
-          {{ entities.find((entity) => entity.id === $props.modelValue)?.id }}
-        </FSSpan>
-      </FSRow>
+    <template #append-inner>
+      <slot name="append-inner">
+        <FSChip
+          v-if="offset"
+          variant="standard"
+          :color="ColorEnum.Dark"
+          :label="offset"
+        />
+      </slot>
     </template>
   </FSSelectField>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted } from "vue";
+import { computed, defineComponent, onMounted } from "vue";
 
 import { useTimeZones } from "@dative-gpi/foundation-shared-services/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSelectField from "../fields/FSSelectField.vue";
+import FSChip from "../FSChip.vue";
 
 export default defineComponent({
   name: "FSSelectTimeZone",
   components: {
-    FSSelectField
+    FSSelectField,
+    FSChip
   },
   props: {
     modelValue: {
@@ -36,15 +42,21 @@ export default defineComponent({
     },
   },
   emits: ["update:modelValue"],
-  setup() {
-    const { getMany, entities } = useTimeZones();
+  setup(props) {
+    const { getMany: getTimeZones, entities: timeZones } = useTimeZones();
+
+    const offset = computed((): string => {
+      return timeZones.value.find((entity) => entity.id === props.modelValue)?.offset;
+    });
 
     onMounted(() => {
-      getMany();
+      getTimeZones();
     });
 
     return {
-      entities
+      ColorEnum,
+      timeZones,
+      offset
     };
   }
 });

package/package.json

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

package/styles/components/fs_clickable.scss

@@ -26,19 +26,17 @@
 }
 
 a:has(.fs-clickable) {
+    position: relative !important;
     text-decoration: none;
     padding: 0 !important;
-    position: relative !important;
-    width: fit-content;
+    height: var(--fs-clickable-height);
+    width: var(--fs-clickable-width);
 }
 
 button:has(.fs-clickable) {
     position: relative !important;
-    width: fit-content;
-}
-
-.fs-clickable-wrapper-full-width {
-    width: 100% !important;
+    height: var(--fs-clickable-height);
+    width: var(--fs-clickable-width);
 }
 
 .fs-clickable-load {