@dative-gpi/foundation-shared-components 1.0.189-update-fs-card → 1.0.190-feat-time-normalization

package/components/FSClickable.vue

@@ -1,61 +1,363 @@
 <template>
-  <FSCard
-    :variant="$props.variant"
-    :color="$props.color"
-    :clickable="$props.clickable"
-    v-bind="$attrs"
+  <a
+    v-if="$props.href"
+    :href="$props.href"
+    :style="style"
+    :class="$props.class"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+    @mousedown="active = true"
+    @mouseup="active = false"
   >
+    <FSCard
+      height="100%"
+      width="100%"
+      :borderRadius="$props.borderRadius"
+      :borderStyle="$props.borderStyle"
+      :padding="$props.padding"
+      :class="classes"
+      v-bind="$attrs"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="{ ...slotData, contentVariant }"
+        />
+      </template>
+    </FSCard>
+    <template
+      v-if="$props.load"
+    >
+      <v-progress-circular
+        class="fs-clickable-load"
+        width="2"
+        size="24"
+        :indeterminate="true"
+        :color="loadColor"
+      />
+    </template>
+  </a>
+  <FSRouterLink
+    v-else-if="$props.to"
+    :style="style"
+    :to="$props.to"
+    :class="$props.class"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+    @mousedown="active = true"
+    @mouseup="active = false"
+  >
+    <FSCard
+      height="100%"
+      width="100%"
+      :borderRadius="$props.borderRadius"
+      :borderStyle="$props.borderStyle"
+      :padding="$props.padding"
+      :class="classes"
+      v-bind="$attrs"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="{ ...slotData, contentVariant }"
+        />
+      </template>
+    </FSCard>
+    <template
+      v-if="$props.load"
+    >
+      <v-progress-circular
+        class="fs-clickable-load"
+        width="2"
+        size="24"
+        :indeterminate="true"
+        :color="loadColor"
+      />
+    </template>
+  </FSRouterLink>
+  <button
+    v-else
+    :type="$props.type"
+    :style="style"
+    :class="$props.class"
+    :disabled="$props.load || $props.disabled"
+    @click.stop="onClick"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+    @mousedown="active = true"
+    @mouseup="active = false"
+  >
+    <FSCard
+      height="100%"
+      width="100%"
+      :borderRadius="$props.borderRadius"
+      :borderStyle="$props.borderStyle"
+      :padding="$props.padding"
+      :class="classes"
+      v-bind="$attrs"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="{ ...slotData, contentVariant }"
+        />
+      </template>
+    </FSCard>
     <template
-      v-for="(_, name) in $slots"
-      v-slot:[name]="slotData"
+      v-if="$props.load"
     >
-      <slot
-        :name="name"
-        v-bind="{ ...slotData }"
+      <v-progress-circular
+        class="fs-clickable-load"
+        width="2"
+        size="24"
+        :indeterminate="true"
+        :color="loadColor"
       />
     </template>
-  </FSCard>
+  </button>
 </template>
 
 <script lang="ts">
-/**
- * @deprecated FSClickable is deprecated. Please use <FSCard :clickable="true" :variant="CardVariants.Standard" :color="ColorEnum.Light" ... /> instead.
- * Clickable prop to true is not necessary as it is will listen to any click listener or href, to prop.
- * This component will be removed in a future release.
- */
-import { defineComponent, type PropType, onMounted } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+import { type RouteLocation } from "vue-router";
 
-import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
+import FSRouterLink from "./FSRouterLink.vue";
 import FSCard from "./FSCard.vue";
 
 export default defineComponent({
   name: "FSClickable",
   components: {
+    FSRouterLink,
     FSCard
   },
   props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "0"
+    },
+    class: {
+      type: [String, Array] as PropType<string | string[] | null>,
+      required: false,
+      default: null
+    },
+    to: {
+      type: Object as PropType<RouteLocation | null>,
+      required: false,
+      default: null
+    },
+    href: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     variant: {
-      type: String as PropType<CardVariant>,
+      type: String as PropType<"standard" | "background" | "full">,
       required: false,
-      default: CardVariants.Standard
+      default: "standard"
+    },
+    type: {
+      type: String as PropType<"button" | "submit">,
+      required: false,
+      default: "button"
     },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Light
     },
-    clickable: {
+    border: {
       type: Boolean,
       required: false,
       default: true
+    },
+    borderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
+    },
+    borderStyle: {
+      type: String as PropType<"solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset" | "none">,
+      required: false,
+      default: "solid"
+    },
+    load: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  setup() {
-    onMounted(() => {
-      console.warn('[DEPRECATED] <FSClickable> is deprecated. Please use <FSCard :clickable="true" :variant="CardVariants.Standard"  :color="ColorEnum.Light" ... /> instead. Clickable prop to true is not necessary as it is will listen to any click listener or href, to prop. This component will be removed in a future release.');
+  emits: ["click"],
+  setup(props, { emit }) {
+    const { getColors } = useColors();
+
+    const colors = computed(() => getColors(props.color));
+    const backgrounds = getColors(ColorEnum.Background);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
+    const hover = ref(false);
+    const active = ref(false);
+
+    const style = computed((): StyleValue => {
+      if (props.disabled) {
+        return {
+          "--fs-clickable-border-size"     : props.border ? "1px" : "0",
+          "--fs-clickable-border-style"    : props.borderStyle,
+          "--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-height"          : sizeToVar(props.height),
+          "--fs-clickable-width"           : sizeToVar(props.width)
+        };
+      }
+      switch (props.variant) {
+        case "standard":
+          switch (props.color) {
+            case ColorEnum.Dark :
+            case ColorEnum.Light: return {
+              "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+              "--fs-clickable-border-style"           : props.borderStyle,
+              "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
+              "--fs-clickable-background-color"       : backgrounds.base,
+              "--fs-clickable-border-color"           : lights.dark,
+              "--fs-clickable-color"                  : lights.lightContrast!,
+              "--fs-clickable-hover-background-color" : lights.base,
+              "--fs-clickable-hover-border-color"     : lights.dark,
+              "--fs-clickable-hover-color"            : lights.baseContrast!,
+              "--fs-clickable-active-background-color": lights.dark,
+              "--fs-clickable-active-border-color"    : lights.dark,
+              "--fs-clickable-active-color"           : lights.darkContrast!,
+              "--fs-clickable-height"                 : sizeToVar(props.height),
+              "--fs-clickable-width"                  : sizeToVar(props.width)
+            };
+            default: return {
+              "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+              "--fs-clickable-border-style"           : props.borderStyle,
+              "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
+              "--fs-clickable-background-color"       : colors.value.light,
+              "--fs-clickable-border-color"           : colors.value.lightContrast!,
+              "--fs-clickable-color"                  : colors.value.lightContrast!,
+              "--fs-clickable-hover-background-color" : colors.value.base,
+              "--fs-clickable-hover-border-color"     : colors.value.base,
+              "--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-height"                 : sizeToVar(props.height),
+              "--fs-clickable-width"                  : sizeToVar(props.width)
+            };
+          }
+        case "background": return {
+          "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+          "--fs-clickable-border-style"           : props.borderStyle,
+          "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
+          "--fs-clickable-background-color"       : backgrounds.base,
+          "--fs-clickable-border-color"           : lights.dark,
+          "--fs-clickable-color"                  : darks.base,
+          "--fs-clickable-hover-background-color" : colors.value.base,
+          "--fs-clickable-hover-border-color"     : colors.value.baseContrast!,
+          "--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-height"                 : sizeToVar(props.height),
+          "--fs-clickable-width"                  : sizeToVar(props.width)
+        };
+        case "full": return {
+          "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+          "--fs-clickable-border-style"           : props.borderStyle,
+          "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
+          "--fs-clickable-background-color"       : colors.value.base,
+          "--fs-clickable-border-color"           : colors.value.base,
+          "--fs-clickable-color"                  : colors.value.baseContrast!,
+          "--fs-clickable-hover-background-color" : colors.value.base,
+          "--fs-clickable-hover-border-color"     : colors.value.base,
+          "--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-height"                 : sizeToVar(props.height),
+          "--fs-clickable-width"                  : sizeToVar(props.width)
+        };
+      }
+    });
+
+    const contentVariant = computed((): "base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast" => {
+      if (active.value) {
+        return "darkContrast";
+      }
+      if (hover.value) {
+        return "baseContrast";
+      }
+      switch (props.variant) {
+        case "standard"  : return "lightContrast";
+        case "background": return "base";
+        case "full"      : return "baseContrast";
+      }
+    });
+
+    const classes = computed((): string[] => {
+      const classNames: string[] = ["fs-clickable"];
+      if (props.disabled) {
+        classNames.push("fs-clickable-disabled");
+      }
+      return classNames;
+    });
+
+    const loadColor = computed((): string => {
+      switch (props.color) {
+        case ColorEnum.Primary:
+        case ColorEnum.Success:
+        case ColorEnum.Warning:
+        case ColorEnum.Error  : return ["full"].includes(props.variant) ? colors.value.light : colors.value.dark;
+        default               : return ["full"].includes(props.variant) ? darks.soft : darks.dark;
+      }
     });
+
+    const onClick = (event: MouseEvent) => {
+      if (!props.to && !props.href && !props.disabled && !props.load) {
+        emit("click", event);
+      }
+    };
+
     return {
+      contentVariant,
+      loadColor,
+      classes,
+      active,
+      hover,
+      style,
+      onClick
     };
   }
 });

package/components/FSDialogContent.vue

@@ -6,44 +6,37 @@
     :color="$props.color"
     :width="cardWidth"
   >
-    <FSCol>
-      <slot
-        name="header"
-        v-bind="{ title: $props.title, subtitle: $props.subtitle }"
-      >
-        <FSCol>
-          <FSRow
-            align="center-left"
-            :wrap="false"
-          >
-            <FSText
-              font="text-h2"
-            >
-              {{ $props.title }}
-            </FSText>
-            <FSRow
-              align="center-right"
-            >
-              <FSButton
-                icon="mdi-close"
-                variant="icon"
-                :color="ColorEnum.Dark"
-                @click="$emit('update:modelValue', false)"
-              />
-            </FSRow>
-          </FSRow>
+    <template
+      #header
+    >
+      <FSCol>
+        <FSRow
+          align="center-left"
+          :wrap="false"
+        >
           <FSText
-            v-if="$props.subtitle"
+            font="text-h2"
           >
-            {{ $props.subtitle }}
+            {{ $props.title }}
           </FSText>
-        </FSCol>
-      </slot>
-      <slot
-        name="body"
-      />
-      <slot />
-    </FSCol>
+          <FSRow
+            align="center-right"
+          >
+            <FSButton
+              icon="mdi-close"
+              variant="icon"
+              :color="ColorEnum.Dark"
+              @click="$emit('update:modelValue', false)"
+            />
+          </FSRow>
+        </FSRow>
+        <FSText
+          v-if="$props.subtitle"
+        >
+          {{ $props.subtitle }}
+        </FSText>
+      </FSCol>
+    </template>
     <template
       v-for="(_, name) in $slots"
       v-slot:[name]="slotData"

package/components/FSDialogFormBody.vue

@@ -23,6 +23,7 @@
             name="left-footer"
           />
           <FSRow
+            v-if="$props.showCancelButton || $props.showSubmitButton"
             class="fs-dialog-actions"
             align="top-right"
             :wrap="false"

package/components/FSEditImageUI.vue

@@ -135,25 +135,36 @@
         />
       </FSRow>
     </FSRow>
-    <template
+    <FSClickable
       v-else
+      borderStyle="dashed"
+      variant="background"
+      :height="$props.height"
+      :width="$props.width"
+      @click="() => invisibleButtonRef.input.click()"
     >
-      <FSButtonFileMini
-        class="fs-edit-image-hidden-button"
-        ref="invisibleButtonRef"
-        accept=".jpg,.jpeg,.png"
-        :readFile="false"
-        @update:metadata="onUpload"
-      />
-      <FSCardPlaceholder
-        v-if="invisibleButtonRef"
-        :height="$props.height"
-        :width="$props.width"
-        icon="mdi-plus-box-outline"
-        :label="$tr('edit-image.add-image', 'Add an image.')"
-        @click="() => invisibleButtonRef!.input.click()"
-      />
-    </template>
+      <FSRow
+        align="center-center"
+        :wrap="false"
+      >
+        <FSIcon>
+          mdi-plus-box-outline
+        </FSIcon>
+        <FSText
+          font="text-body"
+          :lineClamp="2"
+        >
+          {{ $tr('edit-image.add-image', 'Add an image.') }}
+        </FSText>
+        <FSButtonFileMini
+          class="fs-edit-image-hidden-button"
+          ref="invisibleButtonRef"
+          accept=".jpg,.jpeg,.png"
+          :readFile="false"
+          @update:metadata="onUpload"
+        />
+      </FSRow>
+    </FSClickable>
   </FSCol>
 </template>
 
@@ -166,7 +177,7 @@ import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSButtonRemoveMini from "./buttons/FSButtonRemoveMini.vue";
 import FSButtonFileMini from "./buttons/FSButtonFileMini.vue";
-import FSCardPlaceholder from "./FSCardPlaceholder.vue";
+import FSClickable from "./FSClickable.vue";
 import FSImageUI from "./FSImageUI.vue";
 import FSCard from "./FSCard.vue";
 import FSText from "./FSText.vue";
@@ -177,8 +188,8 @@ export default defineComponent({
   name: "FSEditImageUI",
   components: {
     FSButtonRemoveMini,
-    FSCardPlaceholder,
     FSButtonFileMini,
+    FSClickable,
     FSImageUI,
     FSCard,
     FSText,

package/components/FSImageCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <FSCard
+  <FSClickable
     class="fs-image-card"
     :height="height"
     :width="width"
@@ -22,20 +22,20 @@
         </FSSpan>
       </FSRow>
     </FSRow>
-  </FSCard>
+  </FSClickable>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import FSCard from "./FSCard.vue";
+import FSClickable from "./FSClickable.vue";
 import FSSpan from "./FSSpan.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSImageCard",
   components: {
-    FSCard,
+    FSClickable,
     FSSpan,
     FSRow
   },

package/components/FSLink.vue

@@ -1,7 +1,19 @@
 <template>
+  <a
+    v-if="$props.href"
+    :href="$props.href"
+    :class="classes"
+    :style="style"
+  >
+    <slot>
+      <FSSpan>
+        {{ $props.label }}
+      </FSSpan>
+    </slot>
+  </a>
   <FSRouterLink
+    v-else-if="$props.to"
     :to="$props.to"
-    :href="$props.href"
     :class="classes"
     :style="style"
     v-bind="$attrs"

package/components/FSOptionItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <FSCard
+  <FSClickable
     :disabled="$props.disabled"
     :height="['32px', '28px']"
     :padding="$props.padding"
@@ -47,7 +47,7 @@
         </FSIcon>
       </slot>
     </FSRow>
-  </FSCard>
+  </FSClickable>
 </template>
 
 <script lang="ts">
@@ -56,7 +56,7 @@ import { computed, defineComponent, type PropType } from "vue";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import FSCard from "./FSCard.vue";
+import FSClickable from "./FSClickable.vue";
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
 import FSRow from "./FSRow.vue";
@@ -64,7 +64,7 @@ import FSRow from "./FSRow.vue";
 export default defineComponent({
   name: "FSOptionItem",
   components: {
-    FSCard,
+    FSClickable,
     FSSpan,
     FSIcon,
     FSRow

package/components/FSOptionsMenu.vue

@@ -41,13 +41,12 @@
             :scrollOutside="false"
             maxHeight="80dvh"
           >
-            <FSCard
+            <FSClickable
               v-for="(item, index) in $props.items"
               width="100%"
               padding="8px"
               height="40px"
               :key="index"
-              :color="ColorEnum.Light"
               :border="false"
               @click="onClickItem(item)"
             >
@@ -69,7 +68,7 @@
                   </FSText>
                 </FSRow>
               </slot>
-            </FSCard>
+            </FSClickable>
           </FSFadeOut>
         </FSCol>
       </slot>
@@ -82,7 +81,7 @@ import { defineComponent, ref, type PropType } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import { CardVariants, ColorEnum, type ColorBase } from '@dative-gpi/foundation-shared-components/models';
+import { ColorEnum, type ColorBase } from '@dative-gpi/foundation-shared-components/models';
 
 import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
 import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
@@ -91,6 +90,7 @@ import FSMenu from '@dative-gpi/foundation-shared-components/components/FSMenu.v
 import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
 import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
 import FSButton from '@dative-gpi/foundation-shared-components/components/FSButton.vue';
+import FSClickable from '@dative-gpi/foundation-shared-components/components/FSClickable.vue';
 
 export default defineComponent({
   name: "FSInformationsMenu",
@@ -101,7 +101,8 @@ export default defineComponent({
     FSText,
     FSButton,
     FSCol,
-    FSIcon
+    FSIcon,
+    FSClickable
   },
   props: {
     items: {
@@ -157,7 +158,6 @@ export default defineComponent({
       ColorEnum,
       modelValue,
       lightColors,
-      CardVariants,
       onClickItem
     };
   }