@dative-gpi/foundation-shared-components 1.0.36 → 1.0.37-report-v1

package/components/lists/FSHeaderButton.vue

@@ -24,7 +24,7 @@
         <FSSpan
           font="text-overline"
         >
-          {{ $tr("ui.data-table.column-options", "Options for this column") }}
+          {{ $tr("data-table.column-options", "Options for this column") }}
         </FSSpan>
         <FSCol
           padding="6px"
@@ -33,7 +33,7 @@
             prependIcon="mdi-eye-off-outline"
             class="fs-header-button-chip"
             variant="borderless"
-            :label="$tr('ui.data-table.hide-column', 'Hide column')"
+            :label="$tr('data-table.hide-column', 'Hide column')"
             :height="[30, 24]"
             :editable="true"
             @click="$emit('update:hide')"
@@ -43,7 +43,7 @@
             class="fs-header-button-chip"
             variant="borderless"
             prependIcon="mdi-chevron-left"
-            :label="$tr('ui.data-table.move-left', 'Move to the left')"
+            :label="$tr('data-table.move-left', 'Move to the left')"
             :height="[30, 24]"
             :editable="true"
             @click="$emit('update:left')"
@@ -53,7 +53,7 @@
             class="fs-header-button-chip"
             variant="borderless"
             prependIcon="mdi-chevron-right"
-            :label="$tr('ui.data-table.move-right', 'Move to the right')"
+            :label="$tr('data-table.move-right', 'Move to the right')"
             :height="[30, 24]"
             :editable="true"
             @click="$emit('update:right')"

package/components/lists/FSHiddenButton.vue

@@ -11,7 +11,7 @@
         :height="[30, 24]"
         :color="ColorEnum.Light"
         :editable="true"
-        :label="$tr('ui.data-table.hidden-columns', '{0} hidden column(s)', $props.headers.length.toString())"
+        :label="$tr('data-table.hidden-columns', '{0} hidden column(s)', $props.headers.length.toString())"
         v-bind="props"
       />
     </template>
@@ -21,21 +21,19 @@
       :border="false"
     >
       <FSCol
-        padding="16px 0px 24px 16px"
+        padding="24px"
         gap="12px"
       >
         <FSCol
-          padding="0 16px 0 0"
           gap="12px"
         >
           <FSSpan
             font="text-overline"
           >
-            {{ $tr("ui.data-table.show-columns", "Show columns") }}
+            {{ $tr("data-table.show-columns", "Show columns") }}
           </FSSpan>
         </FSCol>
         <FSFadeOut
-          padding="0 8px 0 0"
           maxHeight="360px"
         >
           <FSCol

package/components/lists/FSLoadDataTable.vue

@@ -13,13 +13,16 @@
       <FSLoader
         variant="button"
       />
-      <v-spacer />
-      <FSLoader
-        variant="button"
-      />
-      <FSLoader
-        variant="button"
-      />
+      <FSRow
+        align="center-right"
+      >
+        <FSLoader
+          variant="button"
+        />
+        <FSLoader
+          variant="button"
+        />
+      </FSRow>
     </FSRow>
     <FSRow>
       <FSLoader

package/components/lists/FSSimpleList.vue

@@ -0,0 +1,234 @@
+<template>
+  <FSCol
+    gap="12px"
+  >
+    <FSSearchField
+      v-if="$props.searchable"
+      :hideHeader="true"
+      :modelValue="actualSearch"
+      @update:modelValue="onSearch"
+    />
+    <FSFadeOut
+      v-if="$props.direction == 'column'"
+      :maxHeight="$props.maxHeight"
+      :maskHeight="0"
+    >
+      <FSCol>
+        <template
+          v-if="$props.loading"
+        >
+          <FSLoader
+            v-for="i in 4"
+            :key="i"
+            width="100%"
+            height="50px"
+          />
+        </template>
+        <template
+          v-else
+        >
+          <FSSimpleListItem
+            v-for="item in filteredItems"
+            :key="item.id"
+            :id="item.id"
+            :label="item[$props.itemLabel ?? 'label']"
+            :icon="item.icon"
+            :imageId="item.imageId"
+            :showEdit="$props.showEdit"
+            :showRemove="$props.showRemove"
+            :showDraggable="$props.showDraggable"
+            :tileProps="$props.tileProps ? $props.tileProps(item) : undefined"
+            width="100%"
+            @click:edit="$emit('click:edit', $event)"
+            @click:remove="$emit('click:remove', $event)"
+          />
+        </template>
+      </FSCol>
+    </FSFadeOut>
+    <template
+      v-else-if="$props.direction == 'row'"
+    >
+      <FSRow
+        v-if="$props.loading"
+      >
+        <FSLoader
+          v-for="i in 4"
+          :key="i"
+          width="100px"
+          height="50px"
+        />
+      </FSRow>
+      <FSRow
+        v-else
+      >
+        <FSSimpleListItem 
+          v-for="item in filteredItems"
+          :key="item.id"
+          :id="item.id"
+          :label="item[$props.itemLabel ?? 'label']"
+          :icon="item.icon"
+          :imageId="item.imageId"
+          :showEdit="$props.showEdit"
+          :showRemove="$props.showRemove"
+          :showDraggable="$props.showDraggable"
+          :tileProps="$props.tileProps ? $props.tileProps(item) : undefined"
+          width="fit-content"
+          @click:edit="$emit('click:edit', $event)"
+          @click:remove="$emit('click:remove', $event)"
+        />
+      </FSRow>
+    </template>
+    <FSSlideGroup
+      v-else
+    >
+      <template
+        v-if="$props.loading"
+      >
+        <FSLoader
+          v-for="i in 4"
+          :key="i"
+          width="100%"
+          height="50px"
+        />
+      </template>
+      <template
+        v-else
+      >
+        <FSSimpleListItem
+          v-for="item in filteredItems"
+          :key="item.id"
+          :id="item.id"
+          :label="item[$props.itemLabel ?? 'label']"
+          :icon="item.icon"
+          :imageId="item.imageId"
+          :showEdit="$props.showEdit"
+          :showRemove="$props.showRemove"
+          :showDraggable="$props.showDraggable"
+          :tileProps="$props.tileProps ? $props.tileProps(item) : undefined"
+          width="fit-content"
+          @click:edit="$emit('click:edit', $event)"
+          @click:remove="$emit('click:remove', $event)"
+        />
+      </template>
+    </FSSlideGroup>
+  </FSCol>
+</template>
+
+
+<script lang="ts">
+import { computed } from "vue";
+import { defineComponent, type PropType, ref, watch } from "vue";
+
+import { ColorEnum } from "../../models"
+import { filterItems } from "../../utils";
+
+import FSRow from "../FSRow.vue";
+import FSCol from "../FSCol.vue";
+import FSLoader from '../FSLoader.vue';
+import FSFadeOut from "../FSFadeOut.vue";
+import FSSlideGroup from "../FSSlideGroup.vue"
+import FSSearchField from "../fields/FSSearchField.vue";
+import FSSimpleListItem from "./FSSimpleListItem.vue";
+
+export default defineComponent({
+  name: "FSSimpleList",
+  components: {
+    FSRow,
+    FSCol,
+    FSFadeOut,
+    FSLoader,
+    FSSlideGroup,
+    FSSearchField,
+    FSSimpleListItem
+  },
+  props: {
+    items: {
+      type: Array as PropType<{id: string, label?: string, icon?: string, imageId?: string | null, [index: string]: any}[]>,
+      required: true
+    },
+    tileProps: {
+      type: Function as PropType<(item: any) => Record<string, any>>,
+      required: false
+    },
+    showEdit: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    showRemove: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    showDraggable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    searchable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    search: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    noFilter: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    maxHeight: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
+      required: false,
+      default: undefined
+    },
+    direction: {
+      type: String as PropType<"row" | "column" | "slided">,
+      required: false,
+      default: "column"
+    },
+    itemLabel: {
+      type: String as PropType<string>,
+      required: false,
+      default: "label"
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["click:edit", "click:remove", "update:search"],
+  setup(props, { emit }) {
+    const actualSearch = ref<string | null>(props.search);
+    const filteredItems = computed(() => {
+      if(!actualSearch.value) {
+        return props.items;
+      }
+      return filterItems(props.items, actualSearch.value);
+    });
+
+    const onSearch = (value: string) => {
+      if(props.noFilter) {
+        emit("update:search", value);
+      } else {
+        actualSearch.value = value;
+      }
+    }
+
+    watch(() => props.search, (value) => {
+      actualSearch.value = value;
+    });
+
+    return {
+      actualSearch,
+      filteredItems,
+      ColorEnum,
+      onSearch,
+    }
+  }
+});
+</script>

package/components/lists/FSSimpleListItem.vue

@@ -0,0 +1,132 @@
+<template>
+  <FSTile
+    v-bind="$props.tileProps"
+    :width="$props.width"
+    height="fit-content"
+    :editable="false"
+  >
+    <slot
+      name="item"
+      :item="{ label, icon, imageId, id }"
+    >
+      <FSRow
+        align="center-left"
+        height="24px"
+        :wrap="false"
+      >
+        <FSButtonDragIcon
+          v-if="showDraggable"
+        />
+        <slot
+          name="itemContent"
+          :item="{ label, icon, imageId, id }"
+        >
+          <!-- TODO : add draggable option -->
+          <FSImage
+            v-if="$props.imageId"
+            width="24px"
+            height="24px"
+            :imageId="$props.imageId"
+            :thumbnail="true"
+          />
+          <FSIcon
+            size="24px"
+            v-else-if="$props.icon"
+            :icon="$props.icon"
+          />
+          <FSSpan
+            font="text-overline"
+          >
+            {{ $props.label }}
+          </FSSpan>
+        </slot>
+        <FSRow
+          v-if="showEdit || showRemove"
+          align="center-right"
+          :wrap="false"
+        >
+          <FSButtonEditIcon
+            v-if="showEdit"
+            @click="$emit('click:edit', $props.id)"
+          />
+          <FSButtonRemoveIcon
+            v-if="showRemove"
+            @click="$emit('click:remove', $props.id)"
+          />
+        </FSRow>
+      </FSRow>
+    </slot>
+  </FSTile>
+</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 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,
+    FSButtonEditIcon,
+    FSButtonDragIcon,
+    FSButtonRemoveIcon,
+  },
+  props: {
+    tileProps: {
+      type: Object as PropType<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
+    },
+    width:{
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
+      required: false,
+      default: undefined
+    },
+    id: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: String,
+      required: false
+    },
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false
+    }
+  },
+  emits: ["click:edit", "click:remove"]
+});
+</script>