@dative-gpi/foundation-shared-components 1.0.79 → 1.0.81

package/components/calendar/FSSimpleMonthSelector.vue

@@ -40,9 +40,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import { useTranslations } from "@dative-gpi/bones-ui";
+import { Months } from '@dative-gpi/foundation-shared-domain/enums';
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSRow from "../FSRow.vue";
@@ -68,7 +69,7 @@ export default defineComponent({
       default: ColorEnum.Primary
     },
     month: {
-      type: Number,
+      type: Number as PropType<Months>,
       required: true
     },
     year: {
@@ -82,30 +83,30 @@ export default defineComponent({
 
     const monthToString = (month: number) => {
       switch(month) {
-        case 1:
-          return $tr("ui.common.january", "January");
-        case 2:
-          return $tr("ui.common.february", "February");
-        case 3:
-          return $tr("ui.common.march", "March");
-        case 4:
-          return $tr("ui.common.april", "April");
-        case 5:
-          return $tr("ui.common.may", "May");
-        case 6:
-          return $tr("ui.common.june", "June");
-        case 7:
-          return $tr("ui.common.july", "July");
-        case 8:
-          return $tr("ui.common.august", "August");
-        case 9:
-          return $tr("ui.common.september", "September");
-        case 10:
-          return $tr("ui.common.october", "October");
-        case 11:
-          return $tr("ui.common.november", "November");
-        case 12:
-          return $tr("ui.common.december", "December");
+        case Months.January:
+          return $tr("ui.months.january", "January");
+        case Months.February:
+          return $tr("ui.months.february", "February");
+        case Months.March:
+          return $tr("ui.months.march", "March");
+        case Months.April:
+          return $tr("ui.months.april", "April");
+        case Months.May:
+          return $tr("ui.months.may", "May");
+        case Months.June:
+          return $tr("ui.months.june", "June");
+        case Months.July:
+          return $tr("ui.months.july", "July");
+        case Months.August:
+          return $tr("ui.months.august", "August");
+        case Months.September:
+          return $tr("ui.months.september", "September");
+        case Months.October:
+          return $tr("ui.months.october", "October");
+        case Months.November:
+          return $tr("ui.months.november", "November");
+        case Months.December:
+          return $tr("ui.months.december", "December");
       }
     }
 

package/components/fields/FSDateTimeRangeField.vue

@@ -15,6 +15,7 @@
     :modelValue="toShortTimeFormat"
     @click="onClick"
     @update:modelValue="onClear"
+    v-bind="$attrs"
   >
     <template
       #prepend-inner

package/components/fields/FSTermField.vue

@@ -68,6 +68,7 @@
         </template>
         <FSDateTimeRangeField
           v-else-if="innerDateSetting === DateSetting.Pick"
+          minWidth="180px"
           :rules="[DateRules.required()]"
           :editable="$props.editable"
           :hideHeader="true"

package/components/fields/FSTranslateRichTextField.vue

@@ -7,7 +7,7 @@
     >
       <FSRichTextField
         :editable="false"
-        :label="$tr('ui.translateRichTextField.defaultValue', 'Default value')"
+        :label="$tr('ui.translate-rich-text-field.default-value', 'Default value')"
         :modelValue="$props.modelValue"
         v-bind="$attrs"
       />
@@ -30,7 +30,7 @@
               class="fs-translate-field-label"
               font="text-overline"
             >
-              {{ $tr('ui.translateRichTextField.translateIn', 'Translate in {0}', language.label) }}
+              {{ $tr('ui.translate-rich-text-field.translate-in', 'Translate in {0}', language.label) }}
             </FSSpan>
             <FSIcon>{{ language.icon }}</FSIcon>
           </FSRow>
@@ -40,10 +40,9 @@
     <FSRow
       :wrap="false"
     >
-      <FSButton
+      <FSButtonCancelLabel
         prependIcon="mdi-cancel"
         width="100%"
-        :label="$tr('ui.translateRichTextField.cancelButton.label', 'Cancel')"
         @click="onCancelTranslations"
       />
       <FSButton
@@ -51,7 +50,7 @@
         prependIcon="mdi-check"
         color="primary"
         width="100%"
-        :label="$tr('ui.translateRichTextField.validateButton.label', 'Validate translations')"
+        :label="$tr('ui.translate-rich-text-field.validate-button.label', 'Validate translations')"
         @click="onSubmitTranslations"
       />
     </FSRow>
@@ -70,7 +69,7 @@
         prependIcon="mdi-translate"
         color="primary"
         width="100%"
-        :label="$tr('ui.translateRichTextField.translateButton.label', 'Manage translations')"
+        :label="$tr('ui.translate-rich-text-field.translate-button.label', 'Manage translations')"
         @click="() => $emit('update:translationsExpanded', true)"
       />
     </template>
@@ -84,6 +83,7 @@ import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composab
 
 import { emptyLexicalState } from '../../utils';
 
+import FSButtonCancelLabel from '../buttons/FSButtonCancelLabel.vue';
 import FSRichTextField from './FSRichTextField.vue';
 import FSButton from '../FSButton.vue';
 import FSIcon from '../FSIcon.vue';
@@ -94,6 +94,7 @@ import FSRow from '../FSRow.vue';
 export default defineComponent({
   name: 'FSTranslateRichTextField',
   components: {
+    FSButtonCancelLabel,
     FSRichTextField,
     FSButton,
     FSIcon,

package/components/lists/FSDataTableUI.vue

@@ -832,7 +832,7 @@ export default defineComponent({
     mode: {
       type: String as PropType<"table" | "iterator">,
       required: false,
-      default: "iterator"
+      default: "table"
     },
     disableTable: {
       type: Boolean,
@@ -894,7 +894,7 @@ export default defineComponent({
     const innerSearch: Ref<string | null> = ref(null);
     const innerRowsPerPage = ref(props.rowsPerPage);
     const innerSortBy = ref(props.sortBy);
-    const innerMode = ref(props.mode);
+    const innerMode = ref(props.disableTable ? "iterator" : props.disableIterator ? "table" : props.mode);
     const innerPage = ref(props.page);
     const showFilters = ref(false);
     const resetable = ref(false);

package/components/lists/FSSimpleList.vue

@@ -11,86 +11,45 @@
       @update:modelValue="onSearch"
     />
     <FSFadeOut
+      v-if="$props.direction == 'column'"
       :maxHeight="$props.maxHeight"
       :maskHeight="0"
     >
-      <component
-        :is="$props.direction == 'row' ? FSRow : FSCol"
-      >
-        <template
-          v-if="$props.loading"
-        >
-          <FSLoader
-            v-for="i in 4"
-            :key="i"
-            :width="$props.direction == 'row' ? '220px' : '100%'"
-            height="50px"
-          />
-        </template>
-        <template
-          v-else
-        >
-          <FSTile
-            v-for="item in filteredItems"
-            :key="item.id"
-            v-bind="tileProps(item)"
-            :width="$props.direction == 'row' ? 'fit-content' : '100%'"
-            height="fit-content"
-            :editable="false"
-          >
-            <slot
-              name="item"
-              :item="item"
-            >
-              <FSRow
-                align="center-left"
-                height="24px"
-                :wrap="false"
-              >
-                <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
-                    font="text-overline"
-                  >
-                    {{ item[$props.itemLabel || 'label'] }}
-                  </FSSpan>
-                </slot>
-                <FSRow
-                  align="center-right"
-                  :wrap="false"
-                >
-                  <FSButtonEditIcon
-                    v-if="showEdit"
-                    @click="$emit('click:edit', item.id)"
-                  />
-                  <FSButtonRemoveIcon
-                    v-if="showRemove"
-                    @click="$emit('click:remove', item.id)"
-                  />
-                </FSRow>
-              </FSRow>
-            </slot>
-          </FSTile>
-        </template>
-      </component>
+      <FSCol>
+        <FSSimpleListItem 
+          loaderWidth="100%"
+          tileWidth="100%"
+          :filteredItems="filteredItems"
+          @click:edit="$emit('click:edit', $event)"
+          @click:remove="$emit('click:remove', $event)"
+          v-bind="$props"
+        />
+      </FSCol>
     </FSFadeOut>
+    <FSRow
+      v-else-if="$props.direction == 'row'"
+    >
+      <FSSimpleListItem 
+        loaderWidth="220px"
+        tileWidth="fit-content"
+        :filteredItems="filteredItems"
+        @click:edit="$emit('click:edit', $event)"
+        @click:remove="$emit('click:remove', $event)"
+        v-bind="$props"
+      />
+    </FSRow>
+    <FSSlideGroup
+      v-else
+    >
+      <FSSimpleListItem 
+        loaderWidth="220px"
+        tileWidth="fit-content"
+        :filteredItems="filteredItems"
+        @click:edit="$emit('click:edit', $event)"
+        @click:remove="$emit('click:remove', $event)"
+        v-bind="$props"
+      />
+    </FSSlideGroup>
   </FSCol>
 </template>
 
@@ -104,32 +63,20 @@ import { filterItems } from "../../utils";
 
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
-import FSIcon from "../FSIcon.vue";
-import FSSpan from "../FSSpan.vue";
-import FSImage from "../FSImage.vue";
-import FSLoader from "../FSLoader.vue";
-import FSTile from "../tiles/FSTile.vue";
 import FSFadeOut from "../FSFadeOut.vue";
+import FSSlideGroup from "../FSSlideGroup.vue"
 import FSSearchField from "../fields/FSSearchField.vue";
-import FSButtonEditIcon from "../buttons/FSButtonEditIcon.vue";
-import FSButtonDragIcon from "../buttons/FSButtonDragIcon.vue";
-import FSButtonRemoveIcon from "../buttons/FSButtonRemoveIcon.vue";
+import FSSimpleListItem from "./FSSimpleListItem.vue";
 
 export default defineComponent({
   name: "FSSimpleList",
   components: {
     FSRow,
     FSCol,
-    FSTile,
-    FSIcon,
-    FSSpan,
-    FSImage,
-    FSLoader,
     FSFadeOut,
+    FSSlideGroup,
     FSSearchField,
-    FSButtonEditIcon,
-    FSButtonDragIcon,
-    FSButtonRemoveIcon,
+    FSSimpleListItem
   },
   props: {
     items: {
@@ -177,7 +124,7 @@ export default defineComponent({
       default: undefined
     },
     direction: {
-      type: String as PropType<"row" | "column">,
+      type: String as PropType<"row" | "column" | "slided">,
       required: false,
       default: "column"
     },
@@ -219,8 +166,6 @@ export default defineComponent({
       filteredItems,
       ColorEnum,
       onSearch,
-      FSRow,
-      FSCol,
     }
   }
 });

package/components/lists/FSSimpleListItem.vue

@@ -0,0 +1,161 @@
+<template>
+  <template
+    v-if="$props.loading"
+  >
+    <FSLoader
+      v-for="i in 4"
+      :key="i"
+      :width="loaderWidth"
+      height="50px"
+    />
+  </template>
+  <template
+    v-else
+  >
+    <FSTile
+      v-for="item in filteredItems"
+      :key="item.id"
+      v-bind="tileProps(item)"
+      :width="tileWidth"
+      height="fit-content"
+      :editable="false"
+    >
+      <slot
+        name="item"
+        :item="item"
+      >
+        <FSRow
+          align="center-left"
+          height="24px"
+          :wrap="false"
+        >
+          <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
+              font="text-overline"
+            >
+              {{ item[$props.itemLabel || 'label'] }}
+            </FSSpan>
+          </slot>
+          <FSRow
+            align="center-right"
+            :wrap="false"
+          >
+            <FSButtonEditIcon
+              v-if="showEdit"
+              @click="$emit('click:edit', item.id)"
+            />
+            <FSButtonRemoveIcon
+              v-if="showRemove"
+              @click="$emit('click:remove', item.id)"
+            />
+          </FSRow>
+        </FSRow>
+      </slot>
+    </FSTile>
+  </template>
+</template>
+
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import FSRow from "../FSRow.vue";
+import FSIcon from "../FSIcon.vue";
+import FSSpan from "../FSSpan.vue";
+import FSImage from "../FSImage.vue";
+import FSLoader from "../FSLoader.vue";
+import FSTile from "../tiles/FSTile.vue";
+import FSButtonEditIcon from "../buttons/FSButtonEditIcon.vue";
+import FSButtonDragIcon from "../buttons/FSButtonDragIcon.vue";
+import FSButtonRemoveIcon from "../buttons/FSButtonRemoveIcon.vue";
+
+export default defineComponent({
+  name: "FSSimpleListItem",
+  components: {
+    FSRow,
+    FSTile,
+    FSIcon,
+    FSSpan,
+    FSImage,
+    FSLoader,
+    FSButtonEditIcon,
+    FSButtonDragIcon,
+    FSButtonRemoveIcon,
+  },
+  props: {
+    filteredItems: {
+      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
+    },
+    search: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    noFilter: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    itemLabel: {
+      type: String,
+      required: false,
+      default: "label"
+    },
+    loaderWidth:{
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
+      required: false,
+      default: undefined
+    },
+    tileWidth:{
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
+      required: false,
+      default: undefined
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["click:edit", "click:remove"]
+});
+</script>

package/components/tiles/FSChartTileUI.vue

@@ -1,8 +1,8 @@
 <template>
   <FSClickable
     padding="16px"
-    height="124px"
-    width="275px"
+    :width="['275px','336px']"
+    :height="['124px','156px']"
     v-bind="$attrs"
   >
     <template

package/components/tiles/FSGroupTileUI.vue

@@ -62,7 +62,7 @@
               <FSSpan
                 font="text-overline"
               >
-                {{ $tr("ui.group-tile.group(s)", "Group(s)") }}
+                {{ $tr("ui.group-tile.groups", "Group(s)") }}
               </FSSpan>
             </FSRow>
             <FSRow
@@ -87,7 +87,7 @@
               <FSSpan
                 font="text-overline"
               >
-                {{ $tr("ui.group-tile.device(s)", "Device(s)") }}
+                {{ $tr("ui.group-tile.devices", "Device(s)") }}
               </FSSpan>
             </FSRow>
           </FSCol>

package/models/tables.ts

@@ -37,7 +37,7 @@ export interface FSDataTableOrder {
 export interface FSDataTable {
   headers: FSDataTableColumn[];
   sortBy: FSDataTableOrder | null;
-  mode: "table" | "iterator";
+  mode: "table" | "iterator" | null;
   rowsPerPage: -1 | 10 | 30;
   filters: { [key: string]: FSDataTableFilter[] };
   page: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.79",
+  "version": "1.0.81",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.79",
-    "@dative-gpi/foundation-shared-services": "1.0.79"
+    "@dative-gpi/foundation-shared-domain": "1.0.81",
+    "@dative-gpi/foundation-shared-services": "1.0.81"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "2886eb5a54f6c71aab410a871de2fcbabd394e92"
+  "gitHead": "6cac3b3d9a0036419fad35a4745381ee28d0429c"
 }