@dative-gpi/foundation-shared-components 0.0.8 → 0.0.9

package/components/FSRadioGroup.vue

@@ -1,73 +1,71 @@
 <template>
-    <FSCol width="hug">
-        <FSRadio
-            v-for="item in $props.values"
-            :key="item.value"
-            :label="item.label"
-            :description="item.description"
-            :value="item.value"
-            :selected="isSelected(item.value)"
-            :color="$props.color"
-            :editable="$props.editable"
-            @update:value="onToggle"
-        />
-    </FSCol>
+  <FSCol width="hug">
+    <FSRadio
+      v-for="item in $props.values"
+      :key="item.value"
+      :label="item.label"
+      :description="item.description"
+      :selected="isSelected(item.value)"
+      :color="$props.color"
+      :editable="$props.editable"
+      :modelValue="item.value"
+      @update:modelValue="onToggle"
+    />
+  </FSCol>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, toRefs } from "vue";
+import { defineComponent, PropType } from "vue";
 
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSRadio from "./FSRadio.vue";
 import FSCol from "./FSCol.vue";
 
 export default defineComponent({
-    name: "FSRadioGroup",
-    components: {
-        FSRadio,
-        FSCol
+  name: "FSRadioGroup",
+  components: {
+    FSRadio,
+    FSCol
+  },
+  props: {
+    values: {
+      type: Array as PropType<{ value: String | Boolean | Number, label?: String, description?: string }[]>,
+      required: true,
+      default: false
     },
-    props: {
-        values: {
-            type: Array as PropType<Array<{ value: String | Boolean | Number, label?: String, description?: string }>>,
-            required: true,
-            default: false
-        },
-        modelValue: {
-            type: [String, Boolean, Number],
-            required: false,
-            default: 0
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Primary
-        },
-        editable: {
-            type: Boolean,
-            required: false,
-            default: true
-        }
+    modelValue: {
+      type: [String, Boolean, Number],
+      required: false,
+      default: 0
     },
-    emits: ["update:modelValue"],
-    setup(props, { emit }) {
-        const { modelValue } = toRefs(props);
-
-        const isSelected = (item: String | Boolean | Number): boolean => {
-            return item == modelValue.value;
-        };
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const isSelected = (item: String | Boolean | Number): boolean => {
+      return item == props.modelValue;
+    };
 
-        const onToggle = (item: String | Boolean | Number): void => {
-            if (item != modelValue.value) {
-                emit("update:modelValue", item);
-            }
-        };
+    const onToggle = (item: String | Boolean | Number): void => {
+      if (item != props.modelValue) {
+        emit("update:modelValue", item);
+      }
+    };
 
-        return {
-            isSelected,
-            onToggle
-        };
-    }
+    return {
+      isSelected,
+      onToggle
+    };
+  }
 });
 </script>

package/components/FSRemoveDialog.vue

@@ -0,0 +1,123 @@
+<template>
+  <FSSubmitDialog
+    :rightButtonLabel="$tr('ui.button.remove', 'Remove')"
+    :rightButtonColor="ColorEnum.Error"
+    :title="title"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template #body>
+      <FSCol
+        gap="16px"
+      >
+        <FSRow>
+          <FSIcon
+            :color="ColorEnum.Error"
+          >
+            mdi-alert-outline
+          </FSIcon>
+          <FSRow
+            gap="2px"
+          >
+            <FSSpan>
+              {{ $tr("ui.remove-dialog.body-regular", "This action is") }}
+            </FSSpan>
+            <FSSpan
+              font="text-button"
+            >
+              {{ $tr("ui.remove-dialog.body-bold", "definitive") }}
+            </FSSpan>
+          </FSRow>
+        </FSRow>
+        <FSSpan>
+          {{ $tr("ui.remove-dialog.final-warning", "Once removed, entities won't be retrievable") }}
+        </FSSpan>
+      </FSCol>
+    </template>
+    <template #footer v-if="$props.removing">
+      <FSRow
+        align="center-right"
+        :height="footerHeight"
+      >
+        <FSSpan>
+          {{ $props.removeCurrent }} / {{ $props.removeTotal }}
+        </FSSpan>
+        <v-progress-circular
+          :color="ColorEnum.Dark"
+          :indeterminate="true"
+        />
+      </FSRow>
+    </template>
+  </FSSubmitDialog>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+
+import { useTranslationsProvider } from "@dative-gpi/foundation-shared-services/composables";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSSubmitDialog from "./FSSubmitDialog.vue";
+import FSIcon from "./FSIcon.vue";
+import FSSpan from "./FSSpan.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSRemoveDialog",
+  components: {
+    FSSubmitDialog,
+    FSIcon,
+    FSSpan,
+    FSCol,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    removing: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    removeTotal: {
+      type: Number,
+      required: true
+    },
+    removeCurrent: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { isMobileSized } = useBreakpoints();
+    const { $tr } = useTranslationsProvider();
+
+    const title = computed((): string => {
+      if (props.removeTotal > 1) {
+        return $tr("ui.remove-dialog.remove-plural", "Remove {0} entities", props.removeTotal.toString());
+      }
+      else {
+        return $tr("ui.remove-dialog.remove-singular", "Remove an entity");
+      }
+    });
+
+    const footerHeight = computed((): string => {
+      return isMobileSized.value ? "36px" : "40px";
+    });
+    
+    return {
+      ColorEnum,
+      footerHeight,
+      title
+    };
+  }
+})
+</script>

package/components/FSRichTextField.vue

@@ -24,7 +24,7 @@
         </FSRow>
       </slot>
       <v-spacer />
-      <template v-if="editable">
+      <template v-if="$props.editable">
         <FSIcon
           class="fs-rich-text-field-icon"
           :color="toolbarColors.undo"
@@ -141,8 +141,9 @@
       :contenteditable="!readonly && $props.editable"
     />
     <FSTextField
-      v-if="isLink && editable"
+      v-if="isLink && $props.editable"
       v-model="linkUrl"
+      :hideHeader="true"
       @keypress.enter.stop="toggleLink"
     />
     <slot name="description">
@@ -161,14 +162,14 @@
 <script lang="ts">
 import { $createParagraphNode, $getSelection, $isElementNode, $isRangeSelection, $setSelection, CAN_UNDO_COMMAND, createEditor, ElementNode, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, ParagraphNode, UNDO_COMMAND } from "lexical";
 import { $createHeadingNode, HeadingNode, HeadingTagType, registerRichText } from "@lexical/rich-text";
-import { computed, defineComponent, onMounted, PropType, ref, toRefs } from "vue";
 import { createEmptyHistoryState, registerHistory } from "@lexical/history";
+import { computed, defineComponent, onMounted, PropType, ref } from "vue";
 import { $createLinkNode, $isLinkNode, LinkNode } from "@lexical/link";
 import { $wrapNodes } from "@lexical/selection";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { getAncestor, getSelectedNode } from "@dative-gpi/foundation-shared-components/utils";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSTextField from "./FSTextField.vue";
 import FSIcon from "./FSIcon.vue";
@@ -186,7 +187,7 @@ export default defineComponent({
   props: {
     label: {
       type: String,
-      required: true,
+      required: false,
       default: null
     },
     description: {
@@ -199,15 +200,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorBase.Dark
-    },
     linkColor: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorBase.Primary
+      default: ColorEnum.Primary
     },
     required: {
       type: Boolean,
@@ -232,13 +228,11 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { modelValue, color, linkColor, rows, variant, editable } = toRefs(props);
-
-    const colors = useColors().getColors(color.value);
-    const linkColors = useColors().getColors(linkColor.value);
+    const { isMobileSized } = useBreakpoints();
 
-    const lights = useColors().getColors(ColorBase.Light);
-    const darks = useColors().getColors(ColorBase.Dark);
+    const linkColors = computed(()=> useColors().getColors(props.linkColor));
+    const lights = useColors().getColors(ColorEnum.Light);
+    const darks = useColors().getColors(ColorEnum.Dark);
 
     const canUndo = ref(false);
     const isLink = ref(false);
@@ -285,38 +279,38 @@ export default defineComponent({
       registerRichText(editor);
       registerHistory(editor, createEmptyHistoryState(), 250);
 
-      if (modelValue.value != null) {
+      if (props.modelValue != null) {
         editor.update((): void => {
-          editor.setEditorState(editor.parseEditorState(modelValue.value));
+          editor.setEditorState(editor.parseEditorState(props.modelValue));
         });
       }
     });
 
     const readonly = computed((): boolean => {
-      return variant.value === "readonly";
+      return props.variant === "readonly";
     });
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       let minHeight: string | undefined = undefined;
-      const base = useBreakpoints().isMobileSized() ? 30 : 42;
-      const row = useBreakpoints().isMobileSized() ? 16 : 20;
-      if (rows.value > 1) {
-        minHeight = `${base + (rows.value - 1) * row}px`;
+      const base = isMobileSized.value ? 30 : 42;
+      const row = isMobileSized.value ? 16 : 20;
+      if (props.rows > 1) {
+        minHeight = `${base + (props.rows - 1) * row}px`;
       }
       else {
         minHeight = `${base}px`;
       }
 
-      switch (variant.value) {
+      switch (props.variant) {
         case "standard": {
-          if (!editable.value) {
+          if (!props.editable) {
             return {
               "--fs-rich-text-field-undo-cursor"        : "default",
               "--fs-rich-text-field-icon-cursor"        : "default",
               "--fs-rich-text-field-border-color"       : lights.base,
               "--fs-rich-text-field-color"              : lights.dark,
               "--fs-rich-text-field-active-border-color": lights.base,
-              "--fs-rich-text-field-link-color"         : linkColors.light,
+              "--fs-rich-text-field-link-color"         : linkColors.value.light,
               "--fs-rich-text-field-min-height"         : minHeight
             };
           }
@@ -324,10 +318,10 @@ export default defineComponent({
             return {
               "--fs-rich-text-field-undo-cursor"        : canUndo ? "pointer" : "default",
               "--fs-rich-text-field-icon-cursor"        : "pointer",
-              "--fs-rich-text-field-border-color"       : colors.base,
+              "--fs-rich-text-field-border-color"       : lights.dark,
               "--fs-rich-text-field-color"              : darks.base,
-              "--fs-rich-text-field-active-border-color": colors.dark,
-              "--fs-rich-text-field-link-color"         : linkColors.dark,
+              "--fs-rich-text-field-active-border-color": darks.dark,
+              "--fs-rich-text-field-link-color"         : linkColors.value.dark,
               "--fs-rich-text-field-min-height"         : minHeight
             };
           }
@@ -336,14 +330,14 @@ export default defineComponent({
             "--fs-rich-text-field-border-color"       : "transparent",
             "--fs-rich-text-field-color"              : darks.base,
             "--fs-rich-text-field-active-border-color": "transparent",
-            "--fs-rich-text-field-link-color"         : linkColors.dark,
+            "--fs-rich-text-field-link-color"         : linkColors.value.dark,
             "--fs-rich-text-field-min-height"         : minHeight
         }
       }
     });
 
     const toolbarColors = computed((): {[code: string]: string} => {
-      if (editable.value) {
+      if (props.editable) {
         return {
           undo: canUndo.value ? darks.base : lights.base,
           bold: isBold.value ? darks.base : lights.base,
@@ -538,7 +532,6 @@ export default defineComponent({
 
     return {
       readonly,
-      editable,
       style,
       id,
       editor,

package/components/FSRow.vue

@@ -1,115 +1,121 @@
 <template>
-    <div
-        :style="style"
-        :class="classes"
-        v-bind="$attrs"
-    >
-        <slot />
-    </div>
+  <div
+    :style="style"
+    :class="classes"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, toRefs } from "vue";
+import { computed, defineComponent, PropType } from "vue";
+
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 export default defineComponent({
-    name: "FSRow",
-    props: {
-        width: {
-            type: String as PropType<"hug" | "fill" | string>,
-            required: false,
-            default: "fill"
-        },
-        height: {
-            type: String as PropType<"hug" | "fill" | string>,
-            required: false,
-            default: "hug"
-        },
-        align: {
-            type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
-            required: false,
-            default: "top-left"
-        },
-        wrap: {
-            type: Boolean,
-            required: false,
-            default: true
-        },
-        gap: {
-            type: Number,
-            required: false,
-            default: 8
-        }
+  name: "FSRow",
+  props: {
+    width: {
+      type: String as PropType<"hug" | "fill" | string>,
+      required: false,
+      default: "fill"
+    },
+    height: {
+      type: String as PropType<"hug" | "fill" | string>,
+      required: false,
+      default: "hug"
+    },
+    align: {
+      type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
+      required: false,
+      default: "top-left"
+    },
+    wrap: {
+      type: Boolean,
+      required: false,
+      default: true
     },
-    setup(props) {
-        const { width, height, align, wrap, gap } = toRefs(props);
-        
-        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => ({
-            "--fs-row-flex-wrap": wrap.value ? "wrap" : "nowrap",
-            "--fs-row-gap": `${gap.value}px`,
-            "--fs-row-width": width.value,
-            "--fs-row-height": height.value
-        }));
+    padding: {
+      type: [String, Number],
+      required: false,
+      default: "0"
+    },
+    gap: {
+      type: [String, Number],
+      required: false,
+      default: "8px"
+    }
+  },
+  setup(props) {
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => ({
+      "--fs-row-flex-wrap": props.wrap ? "wrap" : "nowrap",
+      "--fs-row-padding"  : sizeToVar(props.padding),
+      "--fs-row-gap"      : sizeToVar(props.gap),
+      "--fs-row-width"    : sizeToVar(props.width),
+      "--fs-row-height"   : sizeToVar(props.height)
+    }));
 
-        const classes = computed((): string[] => {
-            const classes = ["fs-row"];
-            switch (width.value) {
-                case "hug":
-                    classes.push("fs-row-width-hug");
-                    break;
-                case "fill":
-                    classes.push("fs-row-width-fill");
-                    break;
-                default: 
-                    classes.push("fs-row-width-fixed");
-                    break;
-            }
-            switch (height.value) {
-                case "hug":
-                    classes.push("fs-row-height-hug");
-                    break;
-                case "fill":
-                    classes.push("fs-row-height-fill");
-                    break;
-                default: 
-                    classes.push("fs-row-height-fixed");
-                    break;
-            }
-            switch (align.value) {
-                case "top-left":
-                    classes.push("fs-row-top-left");
-                    break;
-                case "top-center":
-                    classes.push("fs-row-top-center");
-                    break;
-                case "top-right":
-                    classes.push("fs-row-top-right");
-                    break;
-                case "center-left":
-                    classes.push("fs-row-center-left");
-                    break;
-                case "center-center":
-                    classes.push("fs-row-center-center");
-                    break;
-                case "center-right":
-                    classes.push("fs-row-center-right");
-                    break;
-                case "bottom-left":
-                    classes.push("fs-row-bottom-left");
-                    break;
-                case "bottom-center":
-                    classes.push("fs-row-bottom-center");
-                    break;
-                case "bottom-right":
-                    classes.push("fs-row-bottom-right");
-                    break;
-            }
-            return classes;
-        });
+    const classes = computed((): string[] => {
+      const classNames = ["fs-row"];
+      switch (props.width) {
+        case "hug":
+          classNames.push("fs-row-width-hug");
+          break;
+        case "fill":
+          classNames.push("fs-row-width-fill");
+          break;
+        default: 
+          classNames.push("fs-row-width-fixed");
+          break;
+      }
+      switch (props.height) {
+        case "hug":
+          classNames.push("fs-row-height-hug");
+          break;
+        case "fill":
+          classNames.push("fs-row-height-fill");
+          break;
+        default: 
+          classNames.push("fs-row-height-fixed");
+          break;
+      }
+      switch (props.align) {
+        case "top-left":
+          classNames.push("fs-row-top-left");
+          break;
+        case "top-center":
+          classNames.push("fs-row-top-center");
+          break;
+        case "top-right":
+          classNames.push("fs-row-top-right");
+          break;
+        case "center-left":
+          classNames.push("fs-row-center-left");
+          break;
+        case "center-center":
+          classNames.push("fs-row-center-center");
+          break;
+        case "center-right":
+          classNames.push("fs-row-center-right");
+          break;
+        case "bottom-left":
+          classNames.push("fs-row-bottom-left");
+          break;
+        case "bottom-center":
+          classNames.push("fs-row-bottom-center");
+          break;
+        case "bottom-right":
+          classNames.push("fs-row-bottom-right");
+          break;
+      }
+      return classNames;
+    });
 
-        return {
-            style,
-            classes
-        };
-    }
+    return {
+      style,
+      classes
+    };
+  }
 });
 </script>