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

package/components/FSButton.vue

@@ -1,7 +1,6 @@
 <template>
-  <FSCard
+  <FSClickable
     v-if="$props.variant !== 'icon'"
-    :clickable="true"
     :disabled="$props.disabled"
     :padding="padding"
     :variant="$props.variant"
@@ -9,6 +8,7 @@
     :load="$props.load"
     :href="$props.href"
     :to="$props.to"
+    :style="style"
     @click.stop="onClick"
     v-bind="$attrs"
   >
@@ -87,62 +87,93 @@
         </FSIcon>
       </slot>
     </FSCol>
-  </FSCard>
-  <FSRouterLink
+  </FSClickable>
+  <FSRow
     v-else
-    :to="$props.to"
-    :href="$props.href"
+    width="hug"
     :class="iconClasses"
+    :style="style"
     @click.stop="onClick"
+    v-bind="$attrs"
   >
-    <FSRow
-      width="hug"
-      align="center-left"
-      v-bind="$attrs"
+    <template
+      v-if="$props.load"
     >
-      <template
-        v-if="$props.load"
+      <v-progress-circular
+        class="fs-button-load"
+        width="2"
+        size="20"
+        :indeterminate="true"
+        :color="loadColor"
+      />
+    </template>
+    <template
+      v-else-if="$props.href"
+    >
+      <a
+        :href="$props.href"
       >
-        <v-progress-circular
-          class="fs-button-load"
-          width="2"
-          size="20"
-          :indeterminate="true"
-          :color="loadColor"
-        />
-      </template>
-      <template
-        v-else
+        <FSIcon
+          v-if="$props.icon"
+          :size="$props.iconSize"
+        >
+          {{ $props.icon }}
+        </FSIcon>
+        <FSSpan
+          v-if="$props.label"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </a>
+    </template>
+    <template
+      v-else-if="$props.to"
+    >
+      <FSRouterLink
+        :to="$props.to"
       >
         <FSIcon
           v-if="$props.icon"
-          :color="iconVariantColor"
           :size="$props.iconSize"
         >
           {{ $props.icon }}
         </FSIcon>
-        <FSText
+        <FSSpan
           v-if="$props.label"
-          :color="iconVariantColor"
         >
           {{ $props.label }}
-        </FSText>
-      </template>
-    </FSRow>
-  </FSRouterLink>
+        </FSSpan>
+      </FSRouterLink>
+    </template>
+    <template
+      v-else
+    >
+      <FSIcon
+        v-if="$props.icon"
+        :size="$props.iconSize"
+      >
+        {{ $props.icon }}
+      </FSIcon>
+      <FSSpan
+        v-if="$props.label"
+      >
+        {{ $props.label }}
+      </FSSpan>
+    </template>
+  </FSRow>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, useSlots } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue, useSlots } from "vue";
 import { type RouteLocation } from "vue-router";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import FSRouterLink from './FSRouterLink.vue';
-import FSText from "./FSText.vue";
+import FSRouterLink from "./FSRouterLink.vue";
+import FSClickable from "./FSClickable.vue";
+import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
-import FSCard from './FSCard.vue';
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
@@ -156,8 +187,8 @@ export default defineComponent({
   name: "FSButton",
   components: {
     FSRouterLink,
-    FSCard,
-    FSText,
+    FSClickable,
+    FSSpan,
     FSIcon,
     FSCol,
     FSRow
@@ -234,17 +265,32 @@ export default defineComponent({
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
+    const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
     const slots = useSlots();
 
-    const iconVariantColor = computed((): string => {
+    const style = computed((): StyleValue => {
       if (props.disabled) {
-        return ColorEnum.Light;
+        switch (props.variant) {
+          case "icon": return {
+            "--fs-button-color": lights.dark,
+          };
+        }
       }
-      if (props.color === ColorEnum.Light) {
-        return ColorEnum.Dark;
+      switch (props.variant) {
+        case "icon": switch (props.color) {
+          case ColorEnum.Dark:
+          case ColorEnum.Light: return {
+            "--fs-button-color"      : darks.base,
+            "--fs-button-hover-color": darks.dark,
+          };
+          default: return {
+            "--fs-button-color"      : colors.value.base,
+            "--fs-button-hover-color": colors.value.dark,
+          };
+        }
       }
-      return props.color;
+      return {};
     });
 
     const iconClasses = computed((): string[] => {
@@ -291,11 +337,11 @@ export default defineComponent({
     };
 
     return {
+      iconClasses,
+      loadColor,
       colors,
+      style,
       padding,
-      loadColor,
-      iconClasses,
-      iconVariantColor,
       onClick
     };
   }

package/components/FSCard.vue

@@ -1,187 +1,142 @@
 <template>
-  <FSRouterLink
+  <div
+    :class="classes"
     :style="style"
-    :to="$props.to"
-    :href="$props.href"
-    :type="actualWrapperType"
-    :passive="actualClickable ? false : true"
-    :class="['fs-card-wrapper', $props.class]"
-    v-on="wrapperListeners"
   >
-    <div
-      :class="classes"
+    <slot>
+      <FSCol
+        :gap="$props.gap"
+      >
+        <FSRow
+          v-if="$slots.header"
+        >
+          <slot
+            name="header"
+          />
+        </FSRow>
+        <FSRow
+          v-if="$slots.body"
+        >
+          <slot
+            name="body"
+          />
+        </FSRow>
+        <FSRow
+          v-if="$slots.footer"
+        >
+          <slot
+            name="footer"
+          />
+        </FSRow>
+      </FSCol>
+    </slot>
+    <FSRow
+      v-if="$slots['top-right']"
+      class="fs-card-top-right"
     >
       <slot
-        name="default"
-        v-bind="{ contentVariant }"
-      />
-      <v-progress-circular
-        v-if="$props.load"
-        class="fs-card-load__spinner"
-        width="2"
-        size="24"
-        :indeterminate="true"
-        :color="loadColor"
+        name="top-right"
       />
-      <FSRow
-        v-if="$slots['top-right'] && !$props.load"
-        class="fs-card-top-right"
-      >
-        <slot
-          name="top-right"
-        />
-      </FSRow>
-    </div>
-  </FSRouterLink>
+    </FSRow>
+  </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, type PropType, type StyleValue } from "vue";
-import { type RouteLocation } from "vue-router";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { type CardVariant, type ColorBase, ColorEnum, CardVariants, type ColorBaseVariations } from "@dative-gpi/foundation-shared-components/models";
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
+import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
-import FSRouterLink from "./FSRouterLink.vue";
 
 export default defineComponent({
   name: "FSCard",
   components: {
-    FSRouterLink,
+    FSCol,
     FSRow
   },
   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
     },
     maxWidth: {
       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>,
-      default: null
-    },
-    to: {
-      type: Object as PropType<RouteLocation | null>,
-      default: null
-    },
-    href: {
-      type: String as PropType<string | null>,
-      default: null
-    },
-    onClick: {
-      type: Function as PropType<(event: MouseEvent) => void | null>,
+    gap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: null
+      default: "8px"
     },
     variant: {
-      type: String as PropType<CardVariant>,
+      type: String as PropType<"background" | "standard" | "full" | "gradient">,
       required: false,
-      default: CardVariants.Background
-    },
-    clickable: {
-      type: Boolean as PropType<boolean | null>,
-      default: null
+      default: "background"
     },
     color: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      required: false,
       default: ColorEnum.Background
     },
     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"
     },
     borderColor: {
       type: [Array, String] as PropType<ColorBase | null | string>,
+      required: false,
       default: null
     },
     elevation: {
       type: Boolean,
+      required: false,
       default: false
     },
     topRightPadding: {
       type: [String, Number],
+      required: false,
       default: "4px"
-    },
-    type: {
-      type: String as PropType<"button" | "submit" | "reset" | null>,
-      default: null
-    },
-    load: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
     }
   },
-  setup(props, { emit }) {
+  setup(props) {
     const { getColors, getGradients } = useColors();
 
-    const active = ref(false);
-    const hover = ref(false);
-
-    const backgrounds = getColors(ColorEnum.Background);
-    const lights = getColors(ColorEnum.Light);
-
     const colors = computed(() => {
       if (Array.isArray(props.color)) {
         return getColors(props.color[0]);
       }
       return getColors(props.color);
     });
-
     const gradients = computed(() => getGradients(props.color, 135));
-
-    const actualClickable = computed((): boolean => {
-      if (props.clickable === false || props.disabled) {
-        return false;
-      }
-      return props.clickable || !!props.to || !!props.href || !!props.onClick;
-    });
-
-    const actualWrapperType = computed(() => {
-      if (props.type) {
-        return props.type;
-      }
-      return "button";
-    });
-
-    const contentVariant = computed((): ColorBaseVariations => {
-      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";
-      }
-      return "base";
-    });
+    const backgrounds = getColors(ColorEnum.Background);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const borderColor = computed((): ColorBase => {
       if (props.borderColor) {
@@ -204,76 +159,59 @@ export default defineComponent({
       }
     });
 
-    const loadColor = computed((): string => {
-      return colors.value[contentVariant.value] ?? colors.value.baseContrast!;
-    });
-
     const style = computed((): StyleValue => {
-      const baseStyle = {
-        "--fs-card-border-size"     : props.border ? "1px" : "0",
-        "--fs-card-border-style"    : props.borderStyle,
-        "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
-        "--fs-card-padding"         : sizeToVar(props.padding),
-        "--fs-card-height"          : sizeToVar(props.height),
-        "--fs-card-width"           : sizeToVar(props.width),
-        "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
-        "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
-      };
-      if (props.disabled) {
-        return {
-          ...baseStyle,
-          "--fs-card-background-color": lights.light,
-          "--fs-card-border-color"    : lights.dark,
-          "--fs-card-color"           : lights.lightContrast!
-        };
-      }
-      
       switch (props.variant) {
         case "background": return {
-          ...baseStyle,
+          "--fs-card-border-size"     : props.border ? "1px" : "0",
+          "--fs-card-border-style"    : props.borderStyle,
+          "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
+          "--fs-card-padding"         : sizeToVar(props.padding),
+          "--fs-card-height"          : sizeToVar(props.height),
+          "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": backgrounds.base,
           "--fs-card-border-color"    : borderColor.value,
-          "--fs-card-color"           : backgrounds.baseContrast!,
-          "--fs-card-hover-background-color" : colors.value.base,
-          "--fs-card-hover-border-color"     : colors.value.baseContrast!,
-          "--fs-card-hover-color"            : colors.value.baseContrast!
+          "--fs-card-color"           : darks.base,
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
-        case "standard": {
-          if (actualClickable.value && !Array.isArray(props.color) && [ColorEnum.Light, ColorEnum.Dark].includes(props.color as ColorEnum)) {
-            return {
-              ...baseStyle,
-              "--fs-card-background-color": backgrounds.base,
-              "--fs-card-border-color"    : lights.dark,
-              "--fs-card-color"           : backgrounds.baseContrast!,
-              "--fs-card-hover-background-color" : lights.base,
-              "--fs-card-hover-border-color"     : lights.dark,
-              "--fs-card-hover-color"            : lights.baseContrast!
-            };
-          }
-          return {
-            ...baseStyle,
-            "--fs-card-background-color": colors.value.light,
-            "--fs-card-border-color"    : borderColor.value,
-            "--fs-card-color"           : colors.value.lightContrast!,
-            "--fs-card-hover-background-color" : colors.value.base,
-            "--fs-card-hover-border-color"     : colors.value.base,
-            "--fs-card-hover-color"            : colors.value.baseContrast!
-          };
+        case "standard": return {
+          "--fs-card-border-size"     : props.border ? "1px" : "0",
+          "--fs-card-border-style"    : props.borderStyle,
+          "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
+          "--fs-card-padding"         : sizeToVar(props.padding),
+          "--fs-card-height"          : sizeToVar(props.height),
+          "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
+          "--fs-card-background-color": colors.value.light,
+          "--fs-card-border-color"    : borderColor.value,
+          "--fs-card-color"           : colors.value.lightContrast!,
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
         case "full": return {
-          ...baseStyle,
+          "--fs-card-border-size"     : props.border ? "1px" : "0",
+          "--fs-card-border-style"    : props.borderStyle,
+          "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
+          "--fs-card-padding"         : sizeToVar(props.padding),
+          "--fs-card-height"          : sizeToVar(props.height),
+          "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": colors.value.base,
           "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.baseContrast!,
-          "--fs-card-hover-background-color" : colors.value.base,
-          "--fs-card-hover-border-color"     : colors.value.base,
-          "--fs-card-hover-color"            : colors.value.baseContrast!
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
         case "gradient": return {
-          ...baseStyle,
+          "--fs-card-border-size"     : props.border ? "1px" : "0",
+          "--fs-card-border-style"    : props.borderStyle,
+          "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
+          "--fs-card-padding"         : sizeToVar(props.padding),
+          "--fs-card-height"          : sizeToVar(props.height),
+          "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": gradients.value.base,
           "--fs-card-border-color"    : borderColor.value,
-          "--fs-card-color"           : colors.value.lightContrast!
+          "--fs-card-color"           : colors.value.lightContrast!,
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
       }
     });
@@ -286,60 +224,21 @@ export default defineComponent({
           break;
         case "background":
           classNames.push("fs-card-background");
+          classNames.push("fs-card-clickable");
           break;
         default:
           classNames.push("fs-card-background");
           break;
       }
-
-      if (actualClickable.value) {
-        classNames.push("fs-card-clickable");
-      }
-      if (props.disabled) {
-        classNames.push("fs-card-disabled");
-      }
-      if (props.load) {
-        classNames.push("fs-card-load");
-      }
       if (props.elevation) {
         classNames.push("fs-card-elevation");
       }
-      
       return classNames;
     });
-    
-    const wrapperListeners = computed(() => {
-      if (actualClickable.value && !props.disabled) {
-        return {
-          mouseover: () => { hover.value = true },
-          mouseleave: () => { hover.value = false },
-          mousedown: () => { active.value = true },
-          mouseup: () => { active.value = false },
-          "click": onClick
-        };
-      }
-      return {};
-    });
-
-    const onClick = (event: MouseEvent) => {
-      if (!actualClickable.value || props.disabled || props.load || props.href || props.to) {
-        return;
-      }
-      emit("click", event);
-    };
 
     return {
-      actualWrapperType,
-      actualClickable,
-      contentVariant,
-      FSRouterLink,
-      loadColor,
       classes,
-      active,
-      hover,
-      style,
-      onClick,
-      wrapperListeners
+      style
     };
   }
 });