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

package/components/lists/FSDataTableUI.vue

@@ -22,7 +22,6 @@
         <FSButton
           v-if="filterableHeaders.length > 0"
           prependIcon="mdi-filter-variant"
-          padding="0 7px"
           :variant="showFilters ? 'full' : 'standard'"
           @click="showFilters = !showFilters"
         />
@@ -833,7 +832,7 @@ export default defineComponent({
     mode: {
       type: String as PropType<"table" | "iterator">,
       required: false,
-      default: "table"
+      default: "iterator"
     },
     disableTable: {
       type: Boolean,
@@ -906,8 +905,8 @@ export default defineComponent({
     const elementId = `id${uuidv4()}`;
 
     const modeOptions: FSToggle[] = [
-      { id: "table", prependIcon: "mdi-table" },
-      { id: "iterator", prependIcon: "mdi-apps" }
+      { id: "iterator", prependIcon: "mdi-view-grid-outline" },
+      { id: "table", prependIcon: "mdi-format-list-bulleted" }
     ];
 
     const rowsPerPageOptions: { id: number, label: string }[] = [

package/components/lists/FSSimpleList.vue

@@ -0,0 +1,133 @@
+<template>
+  <component
+    :is="$props.direction == 'row' ? FSRow : FSCol"
+    v-bind="$attrs"
+  >
+    <FSTile
+      v-for="item in items"
+      :key="item.id"
+      v-bind="tileProps(item)"
+      :width="$props.direction == 'row' ? 'fit-content' : '100%'"
+      height="fit-content"
+    >
+      <slot
+        name="item"
+        :item="item"
+      >
+        <FSRow
+          align="center-left"
+        >
+          <FSButtonDragIcon
+            v-if="showDraggable"
+          />
+          <slot
+            name="itemContent"
+            :item="item"
+          >
+            <!-- TODO : add draggable option -->
+            <FSImage
+              v-if="item.imageId"
+              :imageId="item.imageId"
+              width="24px"
+              height="24px"
+            />
+            <FSIcon
+              size="24px"
+              v-else-if="item.icon"
+              :icon="item.icon"
+            />
+            <FSSpan>{{ item[itemLabel] }}</FSSpan>
+          </slot>
+          <FSRow
+            align="center-right"
+          >
+            <FSButtonEditIcon
+              v-if="showEdit"
+              @click="$emit('click:edit', item.id)"
+            />
+            <FSButtonRemoveIcon
+              v-if="showRemove"
+              @click="$emit('click:remove', item.id)"
+            />
+          </FSRow>
+        </FSRow>
+      </slot>
+    </FSTile>
+  </component>
+</template>
+
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { ColorEnum } from "../../models"
+
+import FSRow from "../FSRow.vue";
+import FSCol from "../FSCol.vue";
+import FSImage from "../FSImage.vue";
+import FSIcon from "../FSIcon.vue";
+import FSSpan from "../FSSpan.vue";
+import FSTile from "../tiles/FSTile.vue";
+import FSButtonRemoveIcon from "../buttons/FSButtonRemoveIcon.vue";
+import FSButtonEditIcon from "../buttons/FSButtonEditIcon.vue";
+import FSButtonDragIcon from "../buttons/FSButtonDragIcon.vue";
+
+export default defineComponent({
+  name: "FSSimpleList",
+  components: {
+    FSRow,
+    FSCol,
+    FSTile,
+    FSImage,
+    FSIcon,
+    FSSpan,
+    FSButtonRemoveIcon,
+    FSButtonEditIcon,
+    FSButtonDragIcon,
+  },
+  props: {
+    items: {
+      type: Array as PropType<{id: string, label?: string, icon?: string, imageId?: string, [index: string]: any}[]>,
+      required: true
+    },
+    tileProps: {
+      type: Function as PropType<(item: any) => Record<string, any>>,
+      required: false,
+      default: () => () => ({})
+    },
+    showEdit: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    showRemove: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    showDraggable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    direction: {
+      type: String as PropType<"row" | "column">,
+      required: false,
+      default: "column"
+    },
+    itemLabel: {
+      type: String,
+      required: false,
+      default: "label"
+    }
+  },
+  emits: ["click:edit", "click:remove"],
+  setup(){
+    return {
+      ColorEnum,
+      FSRow,
+      FSCol
+    }
+  }
+});
+</script>

package/components/map/FSMap.vue

@@ -117,7 +117,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, type Ref, provide, type PropType, ref, type StyleValue, watch, onUnmounted } from "vue";
+import { computed, defineComponent, onMounted, type Ref, provide, type PropType, ref, type StyleValue, watch, onUnmounted, markRaw } from "vue";
 
 import type {} from "leaflet.markercluster";
 import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng, LatLngBounds, type FitBoundsOptions } from "leaflet";
@@ -361,7 +361,7 @@ export default defineComponent({
         maxBoundsViscosity: 1.0
       };
 
-      map.value = createMap(leafletContainer.value, mapOptions);
+      map.value = markRaw(createMap(leafletContainer.value, mapOptions));
       setView(props.center[0], props.center[1], defaultZoom);
       
       map.value.on('click', (e: L.LeafletMouseEvent) => {

package/components/selects/FSSelectAutoRefresh.vue

@@ -13,7 +13,7 @@ import type { PropType} from "vue";
 import { computed, defineComponent } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { AutoRefresh } from "@dative-gpi/foundation-shared-domain/models";
+import { AutoRefresh } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectField from "../fields/FSSelectField.vue";
 

package/components/selects/FSSelectDashboardVariableType.vue

@@ -13,7 +13,7 @@ import type { PropType} from "vue";
 import { computed, defineComponent } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { DashboardVariableType } from "@dative-gpi/foundation-shared-domain/models";
+import { DashboardVariableType } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectField from "../fields/FSSelectField.vue";
 

package/components/selects/FSSelectDateSetting.vue

@@ -13,7 +13,7 @@
 import { computed, defineComponent, type PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { DateSetting } from "@dative-gpi/foundation-shared-domain/models";
+import { DateSetting } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectField from "../fields/FSSelectField.vue";
 

package/components/selects/FSSelectDays.vue

@@ -13,7 +13,7 @@ import type { PropType} from "vue";
 import { computed, defineComponent } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { Days } from "@dative-gpi/foundation-shared-domain/models";
+import { Days } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectField from "../fields/FSSelectField.vue";
 

package/components/selects/FSSelectListMode.vue

@@ -0,0 +1,51 @@
+<template>
+  <FSSelectField
+    :clearable="false"
+    :items="items"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      #item-prepend="{ item }"
+    >
+      <v-icon>{{ item.icon }}</v-icon>
+    </template>
+  </FSSelectField>
+</template>
+  
+  <script lang="ts">
+import type { PropType} from "vue";
+import { defineComponent } from "vue";
+  
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { ListModes } from "@dative-gpi/foundation-shared-domain/enums";
+  
+import FSSelectField from "../fields/FSSelectField.vue";
+  
+export default defineComponent({
+  name: "FSSelectViewMode",
+  components: {
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: String as PropType<ListModes>,
+      required: true
+    },
+  },
+  emits: ["update:modelValue"],
+  setup() {
+    const { $tr } = useTranslationsProvider();
+  
+    const items = [
+      { id: ListModes.Table, label: $tr("ui.common.table-mode", "Table"), icon: "mdi-format-list-bulleted" },
+      { id: ListModes.Iterator, label: $tr("ui.common.tile-mode", "Tuile"), icon: "mdi-view-grid-outline" },
+    ];
+  
+    return {
+      items
+    };
+  }
+});
+  </script>

package/components/selects/FSSelectMonths.vue

@@ -13,7 +13,7 @@ import type { PropType} from "vue";
 import { computed, defineComponent } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { Months } from "@dative-gpi/foundation-shared-domain/models";
+import { Months } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectField from "../fields/FSSelectField.vue";
 

package/components/tiles/FSTile.vue

@@ -1,89 +1,93 @@
 <template>
-  <FSClickable
-    v-if="$props.singleSelect"
+  <FSCol
     class="fs-tile"
-    padding="12px"
-    :variant="variant"
-    :height="height"
-    :color="color"
-    :style="style"
-    @click="() => $emit('update:modelValue', !$props.modelValue)"
-    v-bind="$attrs"
+    :height="$props.height"
+    :width="$props.width"
   >
-    <slot />
-    <div
-      v-if="$props.bottomColor"
-      class="fs-tile-bottom"
+    <FSClickable
+      v-if="$props.singleSelect"
+      padding="12px"
+      :variant="variant"
+      :color="color"
       :style="style"
-    />
-  </FSClickable>
-  <FSClickable
-    v-else-if="$props.href || $props.to || $attrs.onClick"
-    variant="background"
-    class="fs-tile"
-    padding="12px"
-    :color="ColorEnum.Background"
-    :href="$props.href"
-    :height="height"
-    :to="$props.to"
-    :style="style"
-    v-bind="$attrs"
-  >
-    <slot />
-    <FSCard
-      v-if="$props.editable"
-      class="fs-tile-checkbox"
+      width="100%"
+      height="100%"
+      @click="() => $emit('update:modelValue', !$props.modelValue)"
+      v-bind="$attrs"
+    >
+      <slot />
+    </FSClickable>
+    <FSClickable
+      v-else-if="$props.href || $props.to || $attrs.onClick"
       variant="background"
+      class="fs-tile"
+      padding="12px"
       :color="ColorEnum.Background"
-      :border="false"
+      :href="$props.href"
+      width="100%"
+      height="100%"
+      :to="$props.to"
+      :style="style"
       v-bind="$attrs"
     >
-      <FSCheckbox
-        :modelValue="$props.modelValue"
-        @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-      />
-    </FSCard>
-    <div
-      class="fs-tile-bottom"
-      :style="style"
-    />
-  </FSClickable>
-  <FSCard
-    v-else
-    variant="background"
-    class="fs-tile"
-    padding="12px"
-    :color="color"
-    :style="style"
-    :height="height"
-    v-bind="$attrs"
-  >
-    <slot />
+      <slot />
+      <FSCard
+        v-if="$props.editable"
+        class="fs-tile-checkbox"
+        variant="background"
+        :color="ColorEnum.Background"
+        :border="false"
+        v-bind="$attrs"
+      >
+        <FSCheckbox
+          :modelValue="$props.modelValue"
+          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+        />
+      </FSCard>
+    </FSClickable>
     <FSCard
-      v-if="$props.editable"
-      class="fs-tile-checkbox"
+      v-else
       variant="background"
-      :border="false"
+      class="fs-tile"
+      padding="12px"
+      :color="color"
+      :style="style"
+      width="100%"
+      height="100%"
       v-bind="$attrs"
     >
-      <FSCheckbox
-        :modelValue="$props.modelValue"
-        @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-      />
-    </FSCard>
+      <slot />
+      <FSCard
+        v-if="$props.editable"
+        class="fs-tile-checkbox"
+        variant="background"
+        :border="false"
+        v-bind="$attrs"
+      >
+        <FSCheckbox
+          :modelValue="$props.modelValue"
+          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+        />
+      </FSCard>
+    </FSCard>  
+    <div
+      v-if="$props.leftColor"
+      class="fs-tile-left"
+      :style="style"
+    />
     <div
       v-if="$props.bottomColor"
       class="fs-tile-bottom"
       :style="style"
     />
-  </FSCard>  
+  </FSCol>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 import { type RouteLocation } from "vue-router";
 
-import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-components/models";
 
 import FSClickable from "../FSClickable.vue";
@@ -123,6 +127,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    leftColor: {
+      type: [Array, String] as PropType<ColorBase[] | ColorBase | null>,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -132,25 +141,33 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    }
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [170, 156]
+    },
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const { isMobileSized } = useBreakpoints();
     const { getGradients } = useColors();
 
     const style = computed((): StyleValue => {
+      const result: StyleValue = {};
       if (props.bottomColor) {
         const bottomColors = getGradients(props.bottomColor);
-        return {
-          "--fs-tile-border-color": bottomColors.base
-        };
+        result["--fs-tile-bottom-border-color"] = bottomColors.base;
       }
-      return {};
-    });
-
-    const height = computed((): number => {
-      return isMobileSized.value ? 156 : 170;
+      if (props.leftColor) {
+        const leftColors = getGradients(props.leftColor);
+        result["--fs-tile-left-border-color"] = leftColors.base;
+      }
+      return result;
     });
 
     const variant = computed((): "standard" | "background" => {
@@ -164,7 +181,6 @@ export default defineComponent({
     return {
       ColorEnum,
       variant,
-      height,
       color,
       style
     };

package/models/deviceAlerts.ts

@@ -1,4 +1,4 @@
-import type { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
+import type { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
 
 export interface FSDeviceAlert {
     id: string;

package/models/deviceConnectivities.ts

@@ -1,4 +1,4 @@
-import type { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
+import type { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/enums";
 
 export interface FSDeviceConnectivity {
     id: string;

package/models/rules.ts

@@ -3,7 +3,7 @@ import { useDateFormat } from "@dative-gpi/foundation-shared-services/composable
 import { validateExpression } from "@dative-gpi/foundation-shared-domain/tools";
 
 import { getTimeBestString } from "../utils";
-import type { TimeUnit } from "@/shared/foundation-shared-domain";
+import type { TimeUnit } from "@/shared/foundation-shared-domain/enums";
 
 const { epochToLongDateFormat } = useDateFormat()!;
 const { $tr } = useTranslationsProvider();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.44",
+  "version": "1.0.46",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.44",
-    "@dative-gpi/foundation-shared-services": "1.0.44"
+    "@dative-gpi/foundation-shared-domain": "1.0.46",
+    "@dative-gpi/foundation-shared-services": "1.0.46"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "4fc1ee85626231a579c6b9565da9b7b93f5f4ebd"
+  "gitHead": "2798111f89f8a6eefc603e3777cce7b08cd9f56b"
 }

package/styles/components/fs_span.scss

@@ -1,6 +1,7 @@
 .fs-span {
-    padding-inline-end: 2px;
+    // padding-inline-end: 2px;
     max-width: 100%;
+    text-align: left;
 }
 
 .fs-span-line-clamp {

package/styles/components/fs_text_area.scss

@@ -1,7 +1,6 @@
 .fs-text-area:not(.fs-text-area-auto-grow) {
     & > .v-input__control > .v-field {
         border: 1px solid var(--fs-text-area-border-color) !important;
-        height: var(--fs-text-area-height);
 
         &--error {
             border-color: var(--fs-text-area-error-border-color) !important;
@@ -25,6 +24,10 @@
             color: var(--fs-text-area-color);
             padding: 0;
         }
+
+        & > .v-field__clearable {
+            align-items: flex-start;
+        }
         
         @include web {
             padding: 11px 16px !important;
@@ -33,6 +36,10 @@
         @include mobile {
             padding: 10px 16px !important;
         }
+    } 
+
+    & > .v-input__append  {
+        padding-top: 0px;
     }
 }
 
@@ -61,6 +68,10 @@
             color: var(--fs-text-area-color);
             padding: 0;
         }
+
+        & > .v-field__clearable {
+            align-items: flex-start;
+        }
         
         @include web {
             padding: 11px 16px !important;
@@ -70,4 +81,8 @@
             padding: 10px 16px !important;
         }
     }
+
+    & > .v-input__append  {
+        padding-top: 0px;
+    }
 }

package/styles/components/fs_tile.scss

@@ -1,16 +1,28 @@
 .fs-tile {
     position: relative;
-    border-bottom-left-radius: 0px !important;
-    border-bottom-right-radius: 0px !important;
 }
 
 .fs-tile-bottom {
     position: absolute;
-    bottom: -1px;
-    left: -1px;
-    width: calc(100% + 2px);
+    bottom: 0px;
+    left: 0;
+    width: 100%;
     height: 3px;
-    background: var(--fs-tile-border-color);
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    background: var(--fs-tile-bottom-border-color);
+}
+
+
+.fs-tile-left {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 3px;
+    border-bottom-left-radius: 4px;
+    border-top-left-radius: 4px;
+    background: var(--fs-tile-left-border-color);
 }
 
 .fs-tile-checkbox {

package/utils/statuses.ts

@@ -1,5 +1,5 @@
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
+import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/enums";
 
 const { $tr } = useTranslationsProvider();
 

package/utils/time.ts

@@ -1,6 +1,6 @@
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
-import { TimeUnit } from "@dative-gpi/foundation-shared-domain/models"
+import { TimeUnit } from "@dative-gpi/foundation-shared-domain/enums"
 
 const { $tr } = useTranslationsProvider();