@dative-gpi/foundation-shared-components 0.0.7 → 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
-        },
-        value: {
-            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:value"],
-    setup(props, { emit }) {
-        const { value } = toRefs(props);
-
-        const isSelected = (item: String | Boolean | Number): boolean => {
-            return item == value.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 != value.value) {
-                emit("update:value", 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>