@dative-gpi/foundation-shared-components 0.0.9 → 0.0.11

package/components/FSButton.vue

@@ -1,10 +1,10 @@
 <template>
   <v-btn
-    v-if="!['icon'].includes($props.variant)"
+    v-if="!['icon'].includes(props.variant)"
     :ripple="false"
     :style="style"
     :class="classes"
-    :disabled="!$props.editable"
+    :disabled="!props.editable"
     v-bind="$attrs"
   >
     <FSRow
@@ -12,33 +12,33 @@
       width="hug"
       :wrap="false"
     >
-      <slot name="prepend" v-bind="{ color: $props.color, colors }">
+      <slot name="prepend" v-bind="{ color: props.color, colors }">
         <FSIcon
-          v-if="$props.prependIcon"
+          v-if="props.prependIcon"
           size="l"
         >
-          {{ $props.prependIcon }}
+          {{ props.prependIcon }}
         </FSIcon>
       </slot>
-      <slot v-bind="{ color: $props.color, colors }">
+      <slot v-bind="{ color: props.color, colors }">
         <FSSpan
-          v-if="$props.label"
+          v-if="props.label"
         >
-          {{ $props.label }}
+          {{ props.label }}
         </FSSpan>
       </slot>
-      <slot name="append" v-bind="{ color: $props.color, colors }">
+      <slot name="append" v-bind="{ color: props.color, colors }">
         <FSIcon
-          v-if="$props.appendIcon"
+          v-if="props.appendIcon"
           size="l"
         >
-          {{ $props.appendIcon }}
+          {{ props.appendIcon }}
         </FSIcon>
       </slot>
     </FSRow>
   </v-btn>
   <FSRow
-    v-else-if="$props.icon"
+    v-else-if="props.icon"
     align="center-center"
     width="hug"
     :style="style"
@@ -48,19 +48,20 @@
     <FSIcon
       size="l"
     >
-      {{ $props.icon }}
+      {{ props.icon }}
     </FSIcon>
     <FSSpan
-      v-if="$props.label"
+      v-if="props.label"
       font="text-overline"
     >
-      {{ $props.label }}
+      {{ props.label }}
     </FSSpan>
   </FSRow>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, getCurrentInstance, PropType } from "vue";
+import { useDefaults } from "vuetify";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -119,6 +120,8 @@ export default defineComponent({
     }
   },
   setup(props) {
+    props = useDefaults(props, getCurrentInstance().type.name)
+
     const textColors = computed(() => useColors().getContrasts(props.color));
     const colors = computed(() => useColors().getColors(props.color));
     const lights = useColors().getColors(ColorEnum.Light);
@@ -202,6 +205,7 @@ export default defineComponent({
     });
 
     return {
+      props,
       colors,
       style,
       classes

package/components/lists/{FSDataTable.vue → FSDataTableUI.vue}

@@ -64,9 +64,10 @@
         :singleSelect="$props.singleSelect"
         :headers="extraHeaders.concat(innerHeaders)"
         :groupBy="$props.groupBy ? [$props.groupBy] : []"
+        :sortBy="innerSortBy ? [innerSortBy] : []"
         :items="innerItems"
         :fixedHeader="true"
-        :multiSort="true"
+        :multiSort="false"
         :hover="true"
         :style="style"
         :class="classes"
@@ -75,7 +76,7 @@
         :modelValue="innerValue"
         @auxclick:row="onClickRow"
         @click:row="onClickRow"
-        v-model:sortBy="innerSortBy"
+        @update:sortBy="innerSortBy = $event ? $event[0] : null"
       >
         <template #no-data>
           <FSText
@@ -197,24 +198,26 @@
             padding="16px"
             gap="24px"
           >
-            <template v-if="$props.modelValue.length >= innerItems.length">
-              <FSRow
-                gap="2px"
-              >
-                <FSText
-                  font="text-button"
+            <template v-if="$props.modelValue.length">
+              <template v-if="$props.modelValue.length >= innerItems.length">
+                <FSRow
+                  gap="2px"
                 >
-                  {{ $tr("ui.data-table.all-selected-bold", "Warning:") }}
-                </FSText>
+                  <FSText
+                    font="text-button"
+                  >
+                    {{ $tr("ui.data-table.all-selected-bold", "Warning:") }}
+                  </FSText>
+                  <FSText>
+                    {{ $tr("ui.data-table.all-selected-regular", "All elements selected") }}
+                  </FSText>
+                </FSRow>
+              </template>
+              <template v-else>
                 <FSText>
-                  {{ $tr("ui.data-table.all-selected-regular", "All elements selected") }}
+                  {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
                 </FSText>
-              </FSRow>
-            </template>
-            <template v-else-if="$props.modelValue.length">
-              <FSText>
-                {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
-              </FSText>
+              </template>
             </template>
             <v-spacer />
             <FSRow
@@ -302,24 +305,26 @@
             padding="16px"
             gap="24px"
           >
-            <template v-if="$props.modelValue.length >= innerItems.length">
-              <FSRow
-                gap="2px"
-              >
-                <FSText
-                  font="text-button"
+            <template v-if="$props.modelValue.length">
+              <template v-if="$props.modelValue.length >= innerItems.length">
+                <FSRow
+                  gap="2px"
                 >
-                  {{ $tr("ui.data-table.all-selected-bold", "Attention:") }}
-                </FSText>
+                  <FSText
+                    font="text-button"
+                  >
+                    {{ $tr("ui.data-table.all-selected-bold", "Attention:") }}
+                  </FSText>
+                  <FSText>
+                    {{ $tr("ui.data-table.all-selected-regular", "All elements selected") }}
+                  </FSText>
+                </FSRow>
+              </template>
+              <template v-else>
                 <FSText>
-                  {{ $tr("ui.data-table.all-selected-regular", "All elements selected") }}
+                  {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
                 </FSText>
-              </FSRow>
-            </template>
-            <template v-else-if="$props.modelValue.length">
-              <FSText>
-                {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
-              </FSText>
+              </template>
             </template>
             <v-spacer />
             <FSRow
@@ -425,7 +430,7 @@ import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
-  name: "FSDataTable",
+  name: "FSDataTableUI",
   components: {
     FSDataIteratorItem,
     FSFilterButton,
@@ -447,6 +452,11 @@ export default defineComponent({
       type: Array as PropType<FSDataTableColumn[]>,
       required: true
     },
+    filters: {
+      type: Object as PropType<{ [key: string]: FSDataTableFilter[] }>,
+      required: false,
+      default: () => ({})
+    },
     sneakyHeaders: {
       type: Array as PropType<string[]>,
       required: false,
@@ -482,9 +492,9 @@ export default defineComponent({
       default: null
     },
     sortBy: {
-      type: Array as PropType<FSDataTableOrder[]>,
+      type: Object as PropType<FSDataTableOrder>,
       required: false,
-      default: () => []
+      default: null
     },
     modelValue: {
       type: Array as PropType<string[]>,
@@ -817,6 +827,14 @@ export default defineComponent({
           return v1.text.localeCompare(v2.text, undefined, { numeric: true });
         });
       }
+      for (const [key, filters] of Object.entries(props.filters)) {
+        for (const filter of filters) {
+          const fromDictionary = filterDictionary[key].find(f => f.value == filter.value);
+          if (fromDictionary) {
+            fromDictionary.hidden = filter.hidden;
+          }
+        }
+      }
       filters.value = filterDictionary;
     };
 

package/components/lists/FSFilterButton.vue

@@ -15,12 +15,13 @@
       />
     </template>
     <FSCard
+      class="fs-filter-button-menu"
       :elevation="true"
       :border="false"
     >
       <FSCol
         gap="16px"
-        padding="0 0 0 16px"
+        padding="6px 16px"
       >
         <FSSpan
           font="text-overline"
@@ -47,7 +48,7 @@
           <FSCol>
             <FSChip
               v-for="(filter, index) in searchedFilters"
-              class="fs-filter-button-filter"
+              class="fs-filter-button-chip"
               :key="index"
               :editable="true"
               :label="filter.text"

package/components/lists/FSHiddenButton.vue

@@ -13,12 +13,13 @@
       />
     </template>
     <FSCard
+      class="fs-hidden-button-menu"
       :elevation="true"
       :border="false"
     >
       <FSCol
         gap="16px"
-        padding="16px"
+        padding="6px 16px"
       >
         <FSSpan
           font="text-overline"
@@ -27,6 +28,7 @@
         </FSSpan>
         <FSChip
           v-for="(header, index) in $props.headers"
+          class="fs-hidden-button-chip"
           :color="$props.color"
           :label="header.text"
           :editable="true"

package/models/index.ts

@@ -3,7 +3,7 @@ export * from "./colors";
 export * from "./deviceAlerts";
 export * from "./deviceConnectivities";
 export * from "./deviceStatuses";
-export * from "./dispositions";
 export * from "./modelStatuses";
 export * from "./rules";
+export * from "./tables";
 export * from "./toggleSets";

package/models/rules.ts

@@ -1,6 +1,6 @@
 import { useTimeZone, useTranslationsProvider } from "@dative-gpi/foundation-shared-services/composables";
 
-const { epochToLongDateFormat } = useTimeZone();
+const { epochToLongDateFormat } = useTimeZone()!;
 const { $tr } = useTranslationsProvider();
 
 export const TextRules = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -9,8 +9,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.9",
-    "@dative-gpi/foundation-shared-services": "0.0.9",
+    "@dative-gpi/foundation-shared-domain": "0.0.11",
+    "@dative-gpi/foundation-shared-services": "0.0.11",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/history": "^0.12.5",
     "@lexical/link": "^0.12.5",
@@ -19,6 +19,7 @@
     "@lexical/selection": "^0.12.5",
     "@lexical/text": "^0.12.5",
     "@lexical/utils": "^0.12.5",
+    "@mdi/font": "^7.4.47",
     "blurhash": "^2.0.5",
     "color": "^4.2.3",
     "lexical": "^0.12.5",
@@ -29,5 +30,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "d079d93c7d8677f8269b97bc71820bc35dc46921"
+  "gitHead": "4f28939e7d42ab1ef8319c614fbc210b1291fd79"
 }

package/styles/components/fs_calendar.scss

@@ -52,8 +52,8 @@
     @extend .text-body;
 
     border-radius: 4px !important;
-    height: 48px !important;
-    width: 48px !important;
+    height: 40px !important;
+    width: 40px !important;
 }
 
 .v-date-picker-month__days {

package/styles/components/fs_filter_button.scss

@@ -1,3 +1,12 @@
+.fs-filter-button-menu {
+    @include web {
+        min-width: 200px !important;
+    }
+    @include mobile {
+        min-width: 180px !important;
+    }
+}
+
 .fs-filter-button-all {
     width: calc(100% - 16px) !important;
 }
@@ -7,6 +16,6 @@
     max-height: 360px;
 }
 
-.fs-filter-button-filter {
+.fs-filter-button-chip {
     width: 100%;
 }

package/styles/components/fs_hidden_button.scss

@@ -0,0 +1,12 @@
+.fs-hidden-button-menu {
+    @include web {
+        min-width: 200px !important;
+    }
+    @include mobile {
+        min-width: 180px !important;
+    }
+}
+
+.fs-hidden-button-chip {
+    width: calc(100% - 16px) !important;
+}

package/styles/components/index.scss

@@ -19,6 +19,7 @@
 @import "fs_fade_out.scss";
 @import "fs_filter_button.scss";
 @import "fs_header_button.scss";
+@import "fs_hidden_button.scss";
 @import "fs_icon_field.scss";
 @import "fs_icon.scss";
 @import "fs_image.scss";