@dative-gpi/foundation-shared-components 0.0.22 → 0.0.23

package/components/FSButton.vue

@@ -1,6 +1,7 @@
 <template>
   <FSClickable
     v-if="!['icon'].includes($props.variant)"
+    :fullWidth="$props.fullWidth"
     :editable="$props.editable"
     :height="['40px', '36px']"
     :variant="$props.variant"

package/components/FSClickable.vue

@@ -13,6 +13,7 @@
   </FSCard>
   <a
     v-else
+    :class="anchorClasses"
     :href="href"
   >
     <FSCard
@@ -69,6 +70,11 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
+    fullWidth: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -132,6 +138,14 @@ export default defineComponent({
       return classNames;
     });
 
+    const anchorClasses = computed((): string[] => {
+      const classNames: string[] = [];
+      if (!props.fullWidth) {
+        classNames.push("fs-clickable-anchor-full-width");
+      }
+      return classNames;
+    });
+
     const href = computed((): string | null => {
       if (!props.to) {
         return null;
@@ -151,6 +165,7 @@ export default defineComponent({
     };
 
     return {
+      anchorClasses,
       classes,
       style,
       href,

package/components/FSImage.vue

@@ -11,9 +11,9 @@
     <template #placeholder>
       <FSLoader
         class="fs-load-image"
+        height="100%"
+        width="100%"
         :borderRadius="$props.borderRadius"
-        :height="computedHeight"
-        :width="computedWidth"
       />
     </template>
   </v-img>

package/components/FSLabel.vue

@@ -18,7 +18,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
-import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSLoader from "./FSLoader.vue";
@@ -61,7 +61,6 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
     const { slots } = useSlots();
 

package/components/FSLoader.vue

@@ -31,13 +31,13 @@ export default defineComponent({
       default: "4px"
     },
     variant: {
-      type: String as PropType<"standard" | "button" | "input" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
       required: false,
       default: "standard"
     }
   },
   setup(props) {
-    const { isMobileSized, isExtraSmall } = useBreakpoints();
+    const { isMobileSized } = useBreakpoints();
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       return {
@@ -51,16 +51,17 @@ export default defineComponent({
       switch (props.variant) {
         case "standard":       return sizeToVar(props.height);
         case "button": 
-        case "input":          return isMobileSized.value ? "36px" : "40px";
+        case "input":          
+        case "field":          return isMobileSized.value ? "36px" : "40px";
         case "chip":           return isMobileSized.value ? "20px" : "24px";
-        case "text-h1":        return isMobileSized.value ? "29px" : "36px";
-        case "text-h2":        return isMobileSized.value ? "22px" : "27px";
-        case "text-h3":        return isMobileSized.value ? "17px" : "21px";
-        case "text-h4":        return isMobileSized.value ? "14px" : "16px";
+        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 ? "12px" : "14px";
+        case "text-button":    return isMobileSized.value ? "14px" : "16px";
         case "text-overline":
-        case "text-underline": return isMobileSized.value ? "10px" : "12px";
+        case "text-underline": return "16px";
       }
     });
 
@@ -69,6 +70,7 @@ export default defineComponent({
         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)";

package/components/FSSpan.vue

@@ -4,7 +4,9 @@
     :style="style"
     v-bind="$attrs"
   >
-    <slot />
+    <slot>
+      {{ $props.label }}
+    </slot>
   </span>
 </template>
 
@@ -16,6 +18,11 @@ import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
 export default defineComponent({
   name: "FSSpan",
   props: {
+    label: {
+      type: [String, null, undefined],
+      required: false,
+      default: null
+    },
     font: {
       type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
       required: false,

package/components/FSText.vue

@@ -4,7 +4,9 @@
     :style="style"
     v-bind="$attrs"
   >
-    <slot />
+    <slot>
+      {{ $props.label }}
+    </slot>
   </span>
 </template>
 
@@ -17,6 +19,11 @@ import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/m
 export default defineComponent({
   name: "FSText",
   props: {
+    label: {
+      type: [String, null, undefined],
+      required: false,
+      default: null
+    },
     font: {
       type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
       required: false,

package/components/fields/FSColorField.vue

@@ -23,7 +23,6 @@
             <template #prepend-inner>
               <slot name="prepend-inner">
                 <FSIcon
-                  size="xl"
                   :color="innerColor"
                 >
                   mdi-circle
@@ -51,12 +50,12 @@
             <template #prepend-inner>
               <slot name="prepend-inner">
                 <FSIcon
-                  icon="mdi-circle"
-                  size="xl"
                   :color="ColorEnum.Dark"
                   :editable="$props.editable"
                   :style="{ opacity: getPercentageFromHex(innerOpacity) }"
-                />
+                >
+                  mdi-circle
+                </FSIcon>
               </slot>
             </template>
             <template #append> 

package/package.json

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

package/styles/components/fs_clickable.scss

@@ -28,4 +28,8 @@
 a:has(.fs-clickable) {
     text-decoration: none;
     padding: 0 !important;
+}
+
+.fs-clickable-achor-full-width {
+    width: 100%;
 }