@dative-gpi/foundation-shared-components 1.0.44 → 1.0.46

package/components/FSLoader.vue

@@ -69,8 +69,7 @@ export default defineComponent({
         case "text-h4"       : return isMobileSized.value ? "16px" : "20px";
         case "text-body"     :
         case "text-button"   : return isMobileSized.value ? "14px" : "16px";
-        case "text-overline" :
-        case "text-overline": return "16px";
+        case "text-overline" : return "16px";
       }
     });
 

package/components/FSSpan.vue

@@ -37,6 +37,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    align: {
+      type: String as PropType<"left" | "center" | "right">,
+      required: false,
+      default: "left"
     }
   },
   setup(props) {

package/components/buttons/FSButtonDragIcon.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    icon="mdi-drag"
+    variant="icon"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonCopyIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/deviceOrganisations/FSStatusesRow.vue

@@ -30,7 +30,7 @@
 import { defineComponent, type PropType } from "vue";
 
 import type { FSDeviceAlert, FSDeviceConnectivity, FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
-import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
+import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSConnectivity from "./FSConnectivity.vue";
 import FSWorstAlert from "./FSWorstAlert.vue";

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -31,7 +31,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref } from "vue";
 
-import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
+import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
 import type { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 

package/components/deviceOrganisations/FSWorstAlertCard.vue

@@ -60,7 +60,7 @@ import { computed, defineComponent, type PropType } from "vue";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import type { FSDeviceAlert} from "@dative-gpi/foundation-shared-components/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
+import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSButton from "../FSButton.vue";

package/components/fields/FSEntityFieldUI.vue

@@ -0,0 +1,257 @@
+<template>
+  <FSBaseField
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :label="$props.label"
+    :messages="messages"
+  >
+    <FSCol
+      gap="12px"
+    >
+      <FSRow>
+        <FSSelectField
+          :hideHeader="true"
+          :modelValue="$props.entityType"
+          @update:modelValue="$emit('update:entityType', $event)"
+          :items="actualEntityTypes"
+          :clearable="false"
+        />
+        <template
+          v-if="itemsCount > 0"
+        >
+          <FSButton
+            :label="$tr('ui.entity-field.edit', 'Edit')"
+            icon="mdi-pencil"
+            @click="$emit('click:select')"
+          />
+        </template>
+        <template
+          v-else
+        >
+          <FSButton
+            :label="$tr('ui.entity-field.select', 'Select')"
+            icon="mdi-plus-circle-multiple-outline"
+            @click="$emit('click:select')"
+          />
+        </template>
+      </FSRow>
+      <FSRow>
+        <template
+          v-if="itemsCount > 0"
+        >
+          <FSColor
+            :color="ColorEnum.Primary"
+            :border="false"
+            width="100%"
+          >
+            <FSRow
+              padding="4px"
+              align="center-center"
+            >
+              <FSIcon
+                :icon="entityIcon"
+              />
+              <FSSpan
+                font="text-overline"
+              >
+                {{ $tr('ui.entity-field.selected', '{0} selected(s)', itemsCount) }}
+              </FSSpan>
+            </FSRow>
+          </FSColor>
+        </template>
+
+        <template
+          v-else
+        >
+          <FSColor
+            :color="ColorEnum.Light"
+            :border="false"
+            width="100%"
+          >
+            <FSRow
+              padding="4px"
+              align="center-center"
+            >
+              <FSIcon
+                :icon="entityIcon"
+              />
+              <FSSpan
+                font="text-overline"
+              >
+                {{ $tr('ui.entity-field.no-entity-selected', 'No entity selected') }}
+              </FSSpan>
+            </FSRow>
+          </FSColor>
+        </template>
+      </FSRow>
+
+      <FSFadeOut
+        v-if="$props.showEntities && itemsCount > 0"
+        maxHeight="220px"
+        width="100%"
+      >
+        <slot
+          name="items"
+        />
+      </FSFadeOut>
+    </FSCol>
+  </FSBaseField>
+</template>
+
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
+import { ColorEnum } from "../../models";
+import { useTranslations } from "@dative-gpi/bones-ui";
+
+import FSRow from "../FSRow.vue";
+import FSCol from "../FSCol.vue";
+import FSBaseField from "./FSBaseField.vue";
+import FSSelectField from "./FSSelectField.vue";
+import FSButton from "../FSButton.vue";
+import FSIcon from "../FSIcon.vue";
+import FSColor from "../FSColor.vue";
+
+export default defineComponent({
+  name: "FSEntityFieldUI",
+  components: {
+    FSBaseField,
+    FSSelectField,
+    FSButton,
+    FSIcon,
+    FSColor,
+    FSRow,
+    FSCol
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    itemsCount: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    rules: {
+      type: Array as PropType<any[]>,
+      required: false,
+      default: () => []
+    },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    entityType: {
+      type: Number as PropType<EntityType>,
+      required: true
+    },
+    allowedEntityTypes: {
+      type: Array as PropType<EntityType[]>,
+      required: false,
+      default: () => []
+    },
+    showEntities: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:entityType", "click:select"],
+  setup(props) {
+    const { $tr } = useTranslations();
+
+    const actualEntityTypes = computed(() => {
+      const items = [
+        {
+          id: EntityType.Model,
+          label: $tr("ui.entity-type.models", "Models")
+        },
+        {
+          id: EntityType.Group,
+          label: $tr("ui.entity-type.groups", "Groups")
+        },
+        {
+          id: EntityType.Location,
+          label: $tr("ui.entity-type.locations", "Locations")
+        },
+        {
+          id: EntityType.Device,
+          label: $tr("ui.entity-type.devices", "Devices")
+        },
+        {
+          id: EntityType.User,
+          label: $tr("ui.entity-type.users", "Users")
+        },
+        {
+          id: EntityType.Dashboard,
+          label: $tr("ui.entity-type.dashboards", "Dashboards")
+        },
+        {
+          id: EntityType.Folder,
+          label: $tr("ui.entity-type.folders", "Folders")
+        }
+      ];
+
+      if(props.allowedEntityTypes.length) {
+        return items.filter(item => props.allowedEntityTypes.includes(item.id));
+      } else {
+        return items;
+      }
+    });
+
+    const entityIcon = computed(() => {
+      switch(props.entityType) {
+        case EntityType.Model:
+          return "mdi-cube";
+        case EntityType.Group:
+          return "mdi-account-group";
+        case EntityType.Location:
+          return "mdi-map-marker";
+        case EntityType.Device:
+          return "mdi-cellphone";
+        case EntityType.User:
+          return "mdi-account";
+        case EntityType.Dashboard:
+          return "mdi-view-dashboard";
+        case EntityType.Folder:
+          return "mdi-folder";
+        default:
+          return "mdi-cube";
+      }
+    });
+
+    return {
+      ColorEnum,
+      entityIcon,
+      actualEntityTypes
+    };
+  }
+});
+</script>

package/components/fields/FSSelectField.vue

@@ -462,7 +462,6 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSSelectField",
   components: {
-    FSDialogMenu,
     FSDialogMenu,
     FSSlideGroup,
     FSBaseField,

package/components/fields/FSTermField.vue

@@ -83,7 +83,7 @@ import _ from "lodash";
 import { DateRules, NumberRules, TextRules } from "@dative-gpi/foundation-shared-components/models";
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { useRules } from "@dative-gpi/foundation-shared-components/composables";
-import { DateSetting } from "@dative-gpi/foundation-shared-domain/models";
+import { DateSetting } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectDateSetting from "../selects/FSSelectDateSetting.vue";
 import FSDateTimeRangeField from "./FSDateTimeRangeField.vue";

package/components/fields/FSTextArea.vue

@@ -7,6 +7,15 @@
     :editable="$props.editable"
     :messages="messages"
   >
+    <template
+      v-if="$slots.label"
+      v-slot:label="slotData"
+    >
+      <slot
+        name="label"
+        v-bind="slotData"
+      />
+    </template>
     <v-textarea
       class="fs-text-area"
       variant="outlined"
@@ -26,7 +35,7 @@
       v-bind="$attrs"
     >
       <template
-        v-for="(_, name) in $slots"
+        v-for="(_, name) in slots"
         v-slot:[name]="slotData"
       >
         <slot
@@ -56,7 +65,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import { useColors, useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useBreakpoints, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSBaseField from "./FSBaseField.vue";
@@ -130,6 +139,9 @@ export default defineComponent({
     const { validateOn, getMessages } = useRules();
     const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots.label;
 
     const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
@@ -185,7 +197,8 @@ export default defineComponent({
       ColorEnum,
       messages,
       classes,
-      style
+      style,
+      slots
     };
   }
 });

package/components/fields/FSTimeSlotField.vue

@@ -65,7 +65,7 @@ import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { Days } from "@dative-gpi/foundation-shared-domain/models";
+import { Days } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectField from "./FSSelectField.vue";
 import FSBaseField from "./FSBaseField.vue";

package/components/fields/FSTimeStepField.vue

@@ -55,7 +55,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import type { TimeUnit } from "@dative-gpi/foundation-shared-domain/models";
+import type { TimeUnit } from "@dative-gpi/foundation-shared-domain/enums";
 
 import { useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { timeSteps } from "@dative-gpi/foundation-shared-components/utils";
@@ -131,14 +131,14 @@ export default defineComponent({
       return Object.keys(slots).filter(k => k.startsWith("number-")).reduce((acc, key) => {
         acc[key.substring("number-".length)] = slots[key];
         return acc;
-      }, {});
+      }, {} as {[index: string]: any});
     });
 
     const selectSlots = computed((): any => {
       return Object.keys(slots).filter(k => k.startsWith("select-")).reduce((acc, key) => {
         acc[key.substring("select-".length)] = slots[key];
         return acc;
-      }, {});
+      }, {} as {[index: string]: any});
     });
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));

package/components/fields/FSTranslateField.vue

@@ -62,6 +62,7 @@
             >
               <FSRow
                 :wrap="false"
+                align="center-left"
               >
                 <FSSpan
                   class="fs-translate-field-label"

package/components/fields/FSTranslateRichTextField.vue

@@ -24,6 +24,7 @@
         >
           <FSRow
             :wrap="false"
+            align="center-left"
           >
             <FSSpan
               class="fs-translate-field-label"

package/components/fields/FSTranslateTextArea.vue

@@ -0,0 +1,233 @@
+<template>
+  <FSTextArea
+    :editable="$props.editable"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #append
+    >
+      <FSButton
+        height="100%"
+        style=""
+        :prependIcon="$props.buttonPrependIcon"
+        :appendIcon="$props.buttonAppendIcon"
+        :variant="$props.buttonVariant"
+        :color="$props.buttonColor"
+        @click="dialog = true"
+      /> 
+      <slot
+        name="append"
+      />
+    </template>
+  </FSTextArea>
+  <FSDialogSubmit
+    :title="$tr('ui.translate-text-area.title', 'Handle translations')"
+    :submitButtonColor="$props.buttonColor"
+    @click:submitButton="onSubmit"
+    v-model="dialog"
+  >
+    <template
+      #body
+    >
+      <FSCol
+        gap="32px"
+      >
+        <FSTextArea
+          :label="$tr('ui.translate-text-area.default-value', 'Default value')"
+          :editable="false"
+          :rows="($attrs.rows as number)"
+          :modelValue="$props.modelValue"
+        />
+        <FSCol
+          gap="20px"
+        >
+          <FSTextArea
+            v-for="(language, index) in languages"
+            :editable="$props.editable"
+            :key="index"
+            :modelValue="getTranslation(language.code)"
+            :rows="($attrs.rows as number)"
+            @update:modelValue="setTranslation(language.code, $event)"
+          >
+            <template
+              #label
+            >
+              <FSRow
+                :wrap="false"
+                align="center-left"
+              >
+                <FSSpan
+                  font="text-overline"
+                  :style="style"
+                >
+                  {{ $tr("ui.translate-field.translate-in", "Translate in {0}", language.label) }}
+                </FSSpan>
+                <FSIcon>
+                  {{ language.icon }}
+                </FSIcon>
+              </FSRow> 
+            </template>
+          </FSTextArea>
+        </FSCol>
+      </FSCol>
+    </template>
+  </FSDialogSubmit>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
+
+import { useColors } from "../../composables";
+
+import FSDialogSubmit from "../FSDialogSubmit.vue";
+import FSTextArea from "./FSTextArea.vue";
+import FSButton from "../FSButton.vue";
+import FSIcon from "../FSIcon.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSTranslateTextArea",
+  components: {
+    FSDialogSubmit,
+    FSTextArea,
+    FSButton,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    buttonPrependIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: "mdi-translate"
+    },
+    buttonLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    buttonAppendIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    buttonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    property: {
+      type: String as PropType<string>,
+      required: false,
+      default: "label"
+    },
+    translations: {
+      type: Array as PropType<{ languageCode: string; [key: string]: string }[]>,
+      required: false,
+      default: () => []
+    },
+    buttonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue", "update:translations"],
+  setup(props, { emit }) {
+    const { languages } = useAppLanguages();
+    const { getColors } = useColors();
+    
+    const dialog = ref(false);
+
+    const innerTranslations = ref(props.translations);
+
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
+    const style = computed((): StyleValue => {
+      if (!props.editable) {
+        return {
+          "--fs-translate-field-color": lights.dark
+        };
+      }
+      return {
+        "--fs-translate-field-color": darks.base
+      };
+    });
+
+    const getTranslation = (languageCode: string): string => {
+      if (!innerTranslations.value) {
+        return "";
+      }
+      const translation = innerTranslations.value.find((t) => t.languageCode === languageCode);
+      if (!translation || !translation[props.property]) {
+        return "";
+      }
+      return translation[props.property];
+    };
+
+    const setTranslation = (languageCode: string, value: string): void => {
+      if (!innerTranslations.value) {
+        innerTranslations.value = [{
+          languageCode,
+          [props.property]: value
+        }]
+        return;
+      }
+      const translation = innerTranslations.value.find((t) => t.languageCode === languageCode);
+      if (translation) {
+        translation[props.property] = value;
+      }
+      else {
+        innerTranslations.value.push({
+          languageCode,
+          [props.property]: value
+        });
+      }
+    };
+
+    const onSubmit = (): void => {
+      dialog.value = false;
+      if (props.editable) {
+        emit("update:translations", innerTranslations.value);
+      }
+    };
+
+    return {
+      innerTranslations,
+      ColorEnum,
+      languages,
+      dialog,
+      style,
+      getTranslation,
+      setTranslation,
+      onSubmit
+    };
+  }
+});
+</script>