@dative-gpi/foundation-shared-components 0.0.72 → 0.0.74

package/components/FSCard.vue

@@ -84,6 +84,11 @@ export default defineComponent({
       required: false,
       default: "4px"
     },
+    borderStyle: {
+      type: String as PropType<"solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset" | "none">,
+      required: false,
+      default: "solid"
+    },
     elevation: {
       type: Boolean,
       required: false,
@@ -108,6 +113,7 @@ export default defineComponent({
       switch (props.variant) {
         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),
@@ -118,6 +124,7 @@ export default defineComponent({
         }
         case "background": 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),
@@ -128,6 +135,7 @@ export default defineComponent({
         }
         case "gradient": 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),

package/components/FSCheckbox.vue

@@ -8,7 +8,7 @@
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
-      @click.prevent
+      @click.prevent.stop="onToggle"
       @blur="blurred = true"
       v-bind="$attrs"
     >
@@ -17,7 +17,6 @@
           align="center-left"
           width="hug"
           :style="style"
-          @click.stop="onToggle"
         >
           <FSIcon
             class="fs-checkbox"

package/components/FSClickable.vue

@@ -136,7 +136,7 @@ export default defineComponent({
     type: {
       type: String as PropType<"button" | "submit">,
       required: false,
-      default: "submit"
+      default: "button"
     },
     color: {
       type: String as PropType<ColorBase>,
@@ -153,6 +153,11 @@ export default defineComponent({
       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,
@@ -180,6 +185,7 @@ export default defineComponent({
       if (!props.editable) {
         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,
@@ -191,6 +197,7 @@ export default defineComponent({
       switch (props.variant) {
         case "standard": 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,
@@ -206,6 +213,7 @@ export default defineComponent({
         };
         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,
@@ -221,6 +229,7 @@ export default defineComponent({
         };
         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,

package/components/FSEditImage.vue

@@ -1,21 +1,16 @@
 <template>
   <FSRow
-    width="fill"
     gap="24px"
   >
-    <FSCard
+    <FSImage
       class="fs-edit-image"
-      :borderRadius="$props.borderRadius"
-      :padding="$props.padding"
-    >
-      <FSImage
-        :borderRadius="$props.borderRadius"
-        :aspectRatio="$props.aspectRatio"
-        :height="$props.height"
-        :imageB64="realSource"
-        :width="$props.width"
-      />
-    </FSCard>
+      :aspectRatio="$props.aspectRatio"
+      :imageId="$props.imageId"
+      :height="$props.height"
+      :imageB64="realSource"
+      :width="$props.width"
+      :style="style"
+    />
     <FSCol
       height="fill"
       align="bottom-left"
@@ -43,14 +38,16 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
-import { FileImage } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum, FileImage } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButtonRemoveIcon from "./buttons/FSButtonRemoveIcon.vue";
 import FSButtonFileIcon from "./buttons/FSButtonFileIcon.vue";
 import FSImage from "./FSImage.vue";
-import FSCard from "./FSCard.vue";
 import FSText from "./FSText.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSEditImage",
@@ -58,8 +55,9 @@ export default defineComponent({
     FSButtonRemoveIcon,
     FSButtonFileIcon,
     FSImage,
-    FSCard,
-    FSText
+    FSText,
+    FSCol,
+    FSRow
   },
   props: {
     height: {
@@ -72,12 +70,7 @@ export default defineComponent({
       required: false,
       default: null
     },
-    padding: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "8px"
-    },
-    modelValue: {
+    imageId: {
       type: String as PropType<string | null>,
       required: false,
       default: null
@@ -87,18 +80,27 @@ export default defineComponent({
       required: false,
       default: null
     },
-    borderRadius: {
-      type: [String, Number],
+    modelValue: {
+      type: String as PropType<string | null>,
       required: false,
-      default: "4px"
+      default: null
     }
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { getColors } = useColors();
     const { readFile } = useFiles();
 
+    const lights = getColors(ColorEnum.Light);
+
     const fileSelected = ref<FileImage>({ fileName: "", fileContent: null });
 
+    const style = computed((): { [key: string] : string | undefined } => {
+      return {
+        "--fs-edit-image-border-color": lights.dark
+      };
+    });
+
     const realSource = computed(() => {
       if (fileSelected.value && fileSelected.value.fileName) {
         return fileSelected.value.fileContent as string;
@@ -122,6 +124,7 @@ export default defineComponent({
     return {
       fileSelected,
       realSource,
+      style,
       onUpload,
       onRemove
     };

package/components/FSImage.vue

@@ -145,14 +145,14 @@ export default defineComponent({
     });
 
     const source = computed((): string | undefined => {
-      if (props.imageId) {
-        return IMAGE_RAW_URL(props.imageId);
-      }
-      else if (props.imageB64) {
+      if (props.imageB64) {
         if (imageType.value && imageData.value) {
           return `${imageType.value},${imageData.value}`;
         }
       }
+      else if (props.imageId) {
+        return IMAGE_RAW_URL(props.imageId);
+      }
     });
 
     const imageData = computed((): string | null => {

package/components/tiles/FSTile.vue

@@ -1,6 +1,7 @@
 <template>
   <FSClickable
     v-if="$props.href || $props.to || $attrs.onClick"
+    variant="background"
     class="fs-tile"
     padding="12px"
     :height="height"

package/package.json

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

package/styles/components/fs_card.scss

@@ -1,6 +1,7 @@
 .fs-card {
+    border: var(--fs-card-border-size) var(--fs-card-border-style);
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     border-radius: var(--fs-card-border-radius);
-    border: var(--fs-card-border-size) solid;
     padding: var(--fs-card-padding);
     height: var(--fs-card-height);
     width: var(--fs-card-width);

package/styles/components/fs_clickable.scss

@@ -1,6 +1,6 @@
 .fs-clickable {
+    border: var(--fs-clickable-border-size) var(--fs-clickable-border-style) !important;
     border-radius: var(--fs-clickable-border-radius) !important;
-    border: var(--fs-clickable-border-size) solid !important;
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
     
@@ -8,6 +8,12 @@
     border-color: var(--fs-clickable-border-color) !important;
     color: var(--fs-clickable-color) !important;
 
+    & .fs-card {
+        background-color: var(--fs-clickable-background-color) !important;
+        border-color: var(--fs-clickable-border-color) !important;
+        color: var(--fs-clickable-color) !important;
+    }
+
     &.fs-clickable-disabled {
         cursor: default;
     }
@@ -16,12 +22,24 @@
         background-color: var(--fs-clickable-hover-background-color) !important;
         border-color: var(--fs-clickable-hover-border-color) !important;
         color: var(--fs-clickable-hover-color) !important;
+
+        & .fs-card {
+            background-color: var(--fs-clickable-hover-background-color) !important;
+            border-color: var(--fs-clickable-hover-border-color) !important;
+            color: var(--fs-clickable-hover-color) !important;
+        }
     }
 
     &:not(.fs-clickable-disabled):active {
         background-color: var(--fs-clickable-active-background-color) !important;
         border-color: var(--fs-clickable-active-border-color) !important;
         color: var(--fs-clickable-active-color) !important;
+
+        & .fs-card {
+            background-color: var(--fs-clickable-active-background-color) !important;
+            border-color: var(--fs-clickable-active-border-color) !important;
+            color: var(--fs-clickable-active-color) !important;
+        }
     }
 }
 

package/styles/components/fs_edit_image.scss

@@ -1,3 +1,3 @@
 .fs-edit-image {
-    border-style: dashed;
+    border: 1px dashed var(--fs-edit-image-border-color);
 }