@dative-gpi/foundation-shared-components 0.0.29 → 0.0.31

package/components/FSButton.vue

@@ -6,9 +6,11 @@
     :height="['40px', '36px']"
     :variant="$props.variant"
     :color="$props.color"
+    :load="$props.load"
     :padding="padding"
     :style="style"
     :width="width"
+    @click="$emit('click')"
     v-bind="$attrs"
   >
     <FSRow
@@ -42,24 +44,37 @@
     </FSRow>
   </FSClickable>
   <FSRow
-    v-else-if="$props.icon"
+    v-else
     align="center-center"
     width="hug"
     :class="iconClasses"
     :style="style"
+    @click.stop="onClick"
     v-bind="$attrs"
   >
-    <FSIcon
-      size="l"
-    >
-      {{ $props.icon }}
-    </FSIcon>
-    <FSSpan
-      v-if="$props.label"
-      font="text-overline"
-    >
-      {{ $props.label }}
-    </FSSpan>
+    <template v-if="$props.load">
+      <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="l"
+      >
+        {{ $props.icon }}
+      </FSIcon>
+      <FSSpan
+        v-if="$props.label"
+        font="text-overline"
+      >
+        {{ $props.label }}
+      </FSSpan>
+    </template>
   </FSRow>
 </template>
 
@@ -118,13 +133,19 @@ export default defineComponent({
       required: false,
       default: false
     },
+    load: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     editable: {
       type: Boolean,
       required: false,
       default: true
     }
   },
-  setup(props) {
+  emits: ["click"],
+  setup(props, { emit }) {
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -163,6 +184,16 @@ export default defineComponent({
       return classNames;
     });
 
+    const loadColor = computed((): string => {
+      switch (props.color) {
+        case ColorEnum.Primary:
+        case ColorEnum.Success:
+        case ColorEnum.Warning:
+        case ColorEnum.Error  : return ["standard"].includes(props.variant) ? colors.value.dark : colors.value.light;
+        default               : return ["standard"].includes(props.variant) ? darks.dark : darks.light;
+      }
+    });
+
     const padding = computed((): string | number => {
       switch (props.variant) {
         case "standard":
@@ -178,12 +209,20 @@ export default defineComponent({
       return "fit-content";
     });
 
+    const onClick = () => {
+      if (props.editable && !props.load) {
+        emit("click");
+      }
+    };
+
     return {
       iconClasses,
+      loadColor,
       padding,
       colors,
       style,
-      width
+      width,
+      onClick
     };
   }
 });

package/components/FSClickable.vue

@@ -15,6 +15,15 @@
         <slot :name="name" v-bind="slotData" />
       </template>
     </FSCard>
+    <template v-if="$props.load">
+      <v-progress-circular
+        class="fs-clickable-load"
+        width="2"
+        size="24"
+        :indeterminate="true"
+        :color="loadColor"
+      />
+    </template>
   </button>
   <a
     v-else
@@ -31,6 +40,15 @@
         <slot :name="name" v-bind="slotData" />
       </template>
     </FSCard>
+    <template v-if="$props.load">
+      <v-progress-circular
+        class="fs-clickable-load"
+        width="2"
+        size="24"
+        :indeterminate="true"
+        :color="loadColor"
+      />
+    </template>
   </a>
 </template>
 
@@ -85,6 +103,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    load: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -99,6 +122,7 @@ export default defineComponent({
     const textColors = computed(() => getContrasts(props.color));
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       if (!props.editable) {
@@ -157,7 +181,7 @@ export default defineComponent({
     });
 
     const href = computed((): string | null => {
-      if (!props.to) {
+      if (!props.to || !props.editable || props.load) {
         return null;
       }
       if (typeof props.to === "string") {
@@ -168,14 +192,25 @@ export default defineComponent({
       }
     });
 
+    const loadColor = computed((): string => {
+      switch (props.color) {
+        case ColorEnum.Primary:
+        case ColorEnum.Success:
+        case ColorEnum.Warning:
+        case ColorEnum.Error  : return ["standard"].includes(props.variant) ? colors.value.dark : colors.value.light;
+        default               : return ["standard"].includes(props.variant) ? darks.dark : darks.light;
+      }
+    });
+
     const onClick = () => {
-      if (props.editable) {
+      if (!props.to && props.editable && !props.load) {
         emit("click");
       }
     };
 
     return {
       wrapperClasses,
+      loadColor,
       classes,
       style,
       href,

package/components/FSLoader.vue

@@ -9,7 +9,8 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
-import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 export default defineComponent({
@@ -25,6 +26,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    padding: {
+      type: [String, Number],
+      required: false,
+      default: "0"
+    },
     borderRadius: {
       type: [String, Number],
       required: false,
@@ -38,29 +44,34 @@ export default defineComponent({
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
+    const { getColors } = useColors();
+
+    const backgrounds = getColors(ColorEnum.Background);
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       return {
-        "--fs-loader-border-radius": ["chip"].includes(props.variant) ? "50px" : sizeToVar(props.borderRadius),
-        "--fs-loader-height": sizeToVar(getHeight.value),
-        "--fs-loader-width" : sizeToVar(getWidth.value)
+        "--fs-loader-background-color": backgrounds.base,
+        "--fs-loader-border-radius"   : ["chip"].includes(props.variant) ? "50px" : sizeToVar(props.borderRadius),
+        "--fs-loader-padding"         : sizeToVar(props.padding),
+        "--fs-loader-height"          : sizeToVar(getHeight.value),
+        "--fs-loader-width"           : sizeToVar(getWidth.value)
       };
     });
 
     const getHeight = computed((): string | number => {
       switch (props.variant) {
-        case "standard":       return sizeToVar(props.height);
-        case "button": 
-        case "input":          
-        case "field":          return isMobileSized.value ? "36px" : "40px";
-        case "chip":           return isMobileSized.value ? "20px" : "24px";
-        case "text-h1":        return isMobileSized.value ? "32px" : "40px";
-        case "text-h2":        return isMobileSized.value ? "24px" : "32px";
-        case "text-h3":        return isMobileSized.value ? "20px" : "24px";
-        case "text-h4":        return isMobileSized.value ? "16px" : "20px";
-        case "text-body":
-        case "text-button":    return isMobileSized.value ? "14px" : "16px";
-        case "text-overline":
+        case "standard"      : return sizeToVar(props.height);
+        case "button"        :
+        case "input"         :
+        case "field"         : return isMobileSized.value ? "36px" : "40px";
+        case "chip"          : return isMobileSized.value ? "20px" : "24px";
+        case "text-h1"       : return isMobileSized.value ? "32px" : "40px";
+        case "text-h2"       : return isMobileSized.value ? "24px" : "32px";
+        case "text-h3"       : return isMobileSized.value ? "20px" : "24px";
+        case "text-h4"       : return isMobileSized.value ? "16px" : "20px";
+        case "text-body"     :
+        case "text-button"   : return isMobileSized.value ? "14px" : "16px";
+        case "text-overline" :
         case "text-underline": return "16px";
       }
     });
@@ -68,14 +79,14 @@ export default defineComponent({
     const getWidth = computed((): string | number => {
       switch (props.variant) {
         case "standard": return sizeToVar(props.width);
-        case "button":   return isMobileSized ? "36px" : "40px";
-        case "input":    return isMobileSized ? "calc(50% - 124px)" : "calc(50% - 132px)";
-        case "field":    return "100%";
-        case "chip":     return "8vw";
-        case "text-h1":  return "calc(50% - 32px)";
-        case "text-h2":  return "calc(60% - 32px)";
-        case "text-h3":  return "calc(65% - 32px)";
-        default:         return "calc(75% - 32px)";
+        case "button"  : return isMobileSized ? "36px" : "40px";
+        case "input"   : return isMobileSized ? "calc(50% - 124px)" : "calc(50% - 132px)";
+        case "field"   : return "100%";
+        case "chip"    : return "8vw";
+        case "text-h1" : return "calc(50% - 32px)";
+        case "text-h2" : return "calc(60% - 32px)";
+        case "text-h3" : return "calc(65% - 32px)";
+        default        : return "calc(75% - 32px)";
       }
     });
 

package/composables/useBreakpoints.ts

@@ -1,11 +1,13 @@
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, ref } from "vue";
 
 let initialized = false;
 
 export const useBreakpoints = () => {
+    const windowHeight = ref(window.innerHeight);
     const windowWidth = ref(window.innerWidth);
 
     const onSizeChange = (): void => {
+        windowHeight.value = window.innerHeight;
         windowWidth.value = window.innerWidth;
     };
 
@@ -29,6 +31,8 @@ export const useBreakpoints = () => {
     return {
         isTouchScreenEnabled,
         isMobileSized,
-        isExtraSmall
+        isExtraSmall,
+        windowHeight,
+        windowWidth
     };
 }

package/package.json

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

package/styles/components/fs_button.scss

@@ -2,7 +2,7 @@
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
     color: var(--fs-button-color) !important;
 
-    &:not(.fs-button-disabled):hover {
+    &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
         color: var(--fs-button-hover-color) !important;
         cursor: pointer !important;
     }

package/styles/components/fs_clickable.scss

@@ -28,8 +28,41 @@
 a:has(.fs-clickable) {
     text-decoration: none;
     padding: 0 !important;
+    position: relative !important;
+    width: fit-content;
+}
+
+button:has(.fs-clickable) {
+    position: relative !important;
+    width: fit-content;
 }
 
 .fs-clickable-wrapper-full-width {
-    width: 100%;
+    width: 100% !important;
+}
+
+.fs-clickable-load {
+    cursor: default;
+    position: absolute !important;
+    width: 100% !important;
+    left: 0;
+    top: 0;
+
+    @include web {
+        height: 40px !important;
+        padding: 8px 0;
+    }
+
+    @include mobile {
+        height: 36px !important;
+        padding: 6px 0;
+    }
+
+    & > svg {
+        height: 24px !important;
+    }
+}
+
+*:has(~ .fs-clickable-load) > * {
+    opacity: 0;
 }

package/styles/components/fs_loader.scss

@@ -1,4 +1,6 @@
 .fs-loader {
+    background-color: var(--fs-loader-background-color) !important;
+    margin: var(--fs-loader-padding);
     min-height: var(--fs-loader-height);
     height: var(--fs-loader-height);
     min-width: var(--fs-loader-width);