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

package/components/fields/FSTimeSlotField.vue

@@ -0,0 +1,263 @@
+<template>
+  <FSCol>
+    <slot v-if="!$props.hideHeader" name="label">
+      <FSRow :wrap="false">
+        <FSSpan
+          v-if="$props.label"
+          class="fs-time-slot-field-label"
+          font="text-overline"
+          :style="style"
+        >
+          {{ $props.label }}
+        </FSSpan>
+        <FSSpan
+          v-if="$props.label && $props.required"
+          class="fs-time-slot-field-label"
+          style="margin-left: -8px;"
+          font="text-overline"
+          :ellipsis="false"
+          :style="style"
+        >
+          *
+        </FSSpan>
+        <v-spacer style="min-width: 40px;" />
+        <FSSpan
+          v-if="messages.length > 0"
+          class="fs-time-slot-field-messages"
+          font="text-overline"
+          :style="style"
+        >
+          {{ messages.join(", ") }}
+        </FSSpan>
+      </FSRow>
+    </slot>
+    <FSRow>
+      <FSSelectField
+        class="fs-time-slot-field-select"
+        :editable="$props.editable"
+        :items="daysObject"
+        :hideHeader="true"
+        :clearable="false"
+        :style="style"
+        :modelValue="dayStart"
+        @update:modelValue="onChangeDayStart"
+      >
+        <template v-for="(_, name) in slots" v-slot:[name]="slotData">
+          <slot :name="name" v-bind="slotData" />
+        </template>
+        <template #append>
+          <FSClock
+            class="fs-time-slot-field-number"
+            :editable="$props.editable"
+            :color="ColorEnum.Light"
+            :reminder="false"
+            :slider="false"
+            :style="style"
+            :modelValue="$props.modelValue[0][1]"
+            @update:modelValue="onChangeHourStart"
+          />
+        </template>
+      </FSSelectField>
+      <FSSelectField
+        class="fs-time-slot-field-select"
+        :editable="$props.editable"
+        :items="daysObject"
+        :hideHeader="true"
+        :clearable="false"
+        :style="style"
+        :modelValue="dayEnd"
+        @update:modelValue="onChangeDayEnd"
+      >
+        <template #append>
+          <FSClock
+            class="fs-time-slot-field-number"
+            :editable="$props.editable"
+            :color="ColorEnum.Light"
+            :reminder="false"
+            :slider="false"
+            :style="style"
+            :modelValue="$props.modelValue[1][1]"
+            @update:modelValue="onChangeHourEnd"
+          />
+        </template>
+      </FSSelectField>
+    </FSRow>
+    <slot name="description">
+      <FSSpan
+        v-if="$props.description"
+        class="fs-time-slot-field-description"
+        font="text-underline"
+        :style="style"
+      >
+        {{ $props.description }}
+      </FSSpan>
+    </slot>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useColors, useRules, useSlots } 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 FSSelectField from "./FSSelectField.vue";
+import FSClock from "../FSClock.vue";
+import FSSpan from "../FSSpan.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSTimeSlotField",
+  components: {
+    FSSelectField,
+    FSClock,
+    FSSpan,
+    FSCol,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<number[][]>,
+      required: true,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    rules: {
+      type: Array as PropType<Function[]>,
+      required: false,
+      default: () => []
+    },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { validateOn, blurred, getMessages } = useRules();
+    const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots.label;
+    delete slots.description;
+
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+    
+    const daysObject: { id: number; label: string }[]  = Object.keys(Days).reduce((acc, key) => {
+      if(isNaN(Number(key))){
+        acc.push({
+          id: Days[key],
+          label: key
+        });
+      }
+      return acc;
+    }, []);
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      if (!props.editable) {
+        return {
+          "--fs-time-slot-field-cursor"             : "default",
+          "--fs-time-slot-field-border-color"       : lights.base,
+          "--fs-time-slot-field-color"              : lights.dark,
+          "--fs-time-slot-field-active-border-color": lights.base
+        };
+      }
+      return {
+        "--fs-time-slot-field-cursor"             : "text",
+        "--fs-time-slot-field-border-color"       : lights.dark,
+        "--fs-time-slot-field-color"              : darks.base,
+        "--fs-time-slot-field-active-border-color": darks.dark,
+        "--fs-time-slot-field-error-color"        : errors.base,
+        "--fs-time-slot-field-error-border-color" : errors.base
+      };
+    });
+
+    const dayStart = computed((): number => {
+      return props.modelValue[1][0] === 7 ? 7 : props.modelValue[0][0];
+    });
+
+    const dayEnd = computed((): number => {
+      return props.modelValue[0][0] === 7 ? 7 : props.modelValue[1][0];
+    });
+
+    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
+
+    const onChangeDayStart = (value: number) => {
+      if (value === 7) {
+        emit("update:modelValue", [[7, props.modelValue[0][1]], [7, props.modelValue[1][1]]]);
+        return;
+      }
+      if (props.modelValue[1][0] === 7) {
+        emit("update:modelValue", [[value, props.modelValue[0][1]], [value, props.modelValue[1][1]]]);
+        return;
+      }
+      emit("update:modelValue", [[value, props.modelValue[0][1]], props.modelValue[1]]);
+    };
+
+    const onChangeHourStart = (value: number) => {
+      emit("update:modelValue", [[props.modelValue[0][0], value], props.modelValue[1]]);
+    };
+
+    const onChangeDayEnd = (value: number) => {
+      if (value === 7) {
+        emit("update:modelValue", [[7, props.modelValue[0][1]], [7, props.modelValue[1][1]]]);
+        return;
+      }
+      if (props.modelValue[0][0] === 7) {
+        emit("update:modelValue", [[value, props.modelValue[0][1]], [value, props.modelValue[1][1]]]);
+        return;
+      }
+      emit("update:modelValue", [props.modelValue[0], [value, props.modelValue[1][1]]]);
+    };
+
+    const onChangeHourEnd = (value: number) => {
+      emit("update:modelValue", [props.modelValue[0], [props.modelValue[1][0], value]]);
+    };
+
+    return {
+      ColorEnum,
+      daysObject,
+      dayStart,
+      dayEnd,
+      validateOn,
+      messages,
+      blurred,
+      slots,
+      style,
+      onChangeDayStart,
+      onChangeHourStart,
+      onChangeDayEnd,
+      onChangeHourEnd
+    };
+  }
+});
+</script>

package/components/lists/FSDataTableUI.vue

@@ -412,14 +412,14 @@ import { useRouter } from "vue-router";
 
 import { ColorEnum, FSDataTableColumn, FSDataTableFilter, FSDataTableOrder, FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import { useTranslationsProvider } from "@dative-gpi/foundation-shared-services/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
 import FSDataIteratorItem from "./FSDataIteratorItem.vue";
+import FSSearchField from "../fields/FSSearchField.vue";
+import FSSelectField from "../fields/FSSelectField.vue";
 import FSFilterButton from "./FSFilterButton.vue";
 import FSHiddenButton from "./FSHiddenButton.vue";
 import FSHeaderButton from "./FSHeaderButton.vue";
-import FSSearchField from "../FSSearchField.vue";
-import FSSelectField from "../FSSelectField.vue";
 import FSContainer from "../FSContainer.vue";
 import FSToggleSet from "../FSToggleSet.vue";
 import FSCheckbox from "../FSCheckbox.vue";
@@ -546,10 +546,11 @@ export default defineComponent({
   setup(props, { emit }) {
     const { isExtraSmall } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
+    const { getColors } = useColors();
     const router = useRouter();
 
-    const backgrounds = useColors().getColors(ColorEnum.Background);
-    const lights = useColors().getColors(ColorEnum.Light);
+    const backgrounds = getColors(ColorEnum.Background);
+    const lights = getColors(ColorEnum.Light);
 
     const filters = ref<{ [key: string]: FSDataTableFilter[] }>({});
     const innerRowsPerPage = ref(props.rowsPerPage);
@@ -829,7 +830,7 @@ export default defineComponent({
       }
       for (const [key, filters] of Object.entries(props.filters)) {
         for (const filter of filters) {
-          const fromDictionary = filterDictionary[key].find(f => f.value == filter.value);
+          const fromDictionary = filterDictionary[key]?.find(f => f.value == filter.value);
           if (fromDictionary) {
             fromDictionary.hidden = filter.hidden;
           }

package/components/lists/FSFilterButton.vue

@@ -32,7 +32,7 @@
           class="fs-filter-button-all"
           :editable="true"
           :color="$props.color"
-          :variant="all ? 'full' : 'standard'"
+          :variant="getAllVariant()"
           :label="$tr('ui.data-table.all-values', 'All values')"
           @click="onToggleAll"
         />
@@ -71,9 +71,9 @@
 import { computed, defineComponent, PropType, ref } from "vue";
 
 import { ColorBase, ColorEnum, FSDataTableColumn, FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
-import { useTranslationsProvider } from "@dative-gpi/foundation-shared-services/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
-import FSSearchField from "../FSSearchField.vue";
+import FSSearchField from "../fields/FSSearchField.vue";
 import FSFadeOut from "../FSFadeOut.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
@@ -110,9 +110,9 @@ export default defineComponent({
   setup(props, { emit }) {
     const { $tr } = useTranslationsProvider();
 
+    const singlePick = ref(false);
     const expanded = ref(false);
     const search = ref(null);
-    const all = ref(!props.filters?.some(f => f.hidden) ?? true);
 
     const label = computed(() => {
       if (props.filters) {
@@ -132,32 +132,39 @@ export default defineComponent({
     });
 
     const getVariant = (filter: FSDataTableFilter): "standard" | "full" => {
-      if (all.value || filter.hidden) {
+      if (singlePick.value || props.filters.filter(f => f.hidden).length > 0) {
+        if (filter.hidden) {
+          return "standard";
+        }
+        return "full";
+      }
+      return "standard";
+    };
+
+    const getAllVariant = (): "standard" | "full" => {
+      if (singlePick.value || props.filters.filter(f => f.hidden).length > 0) {
         return "standard";
       }
       return "full";
     };
 
     const onToggle = (filter: FSDataTableFilter): void => {
-      if (all.value) {
-        all.value = false;
-        emit("update:filter", props.filters.map(f => ({ ...f, hidden: f.value !== filter.value })));
+      if (singlePick.value || props.filters.filter(f => f.hidden).length > 0) {
+        emit("update:filter", props.filters.map(f => ({ ...f, hidden: f.value === filter.value ? !f.hidden : f.hidden })));
       }
       else {
-        if (filter.hidden && !props.filters.some(f => !f.hidden && f.value !== filter.value)) {
-          all.value = true;
-        }
-        emit("update:filter", props.filters.map(f => ({ ...f, hidden: f.value === filter.value ? !f.hidden : f.hidden })));
+        emit("update:filter", props.filters.map(f => ({ ...f, hidden: f.value === filter.value ? false : true })));
       }
+      singlePick.value = true;
     };
 
     const onToggleAll = (): void => {
-      if (all.value) {
-        all.value = false;
+      if (singlePick.value || props.filters.filter(f => f.hidden).length > 0) {
+        singlePick.value = false;
+        emit("update:filter", props.filters.map(f => ({ ...f, hidden: false })));
       }
       else {
-        all.value = true;
-        emit("update:filter", props.filters.map(f => ({ ...f, hidden: false })));
+        singlePick.value = true;
       }
     };
 
@@ -167,8 +174,9 @@ export default defineComponent({
       expanded,
       search,
       label,
-      all,
+      singlePick,
       getVariant,
+      getAllVariant,
       onToggle,
       onToggleAll
     };

package/components/lists/FSHiddenButton.vue

@@ -69,6 +69,7 @@ export default defineComponent({
       default: ColorEnum.Primary
     }
   },
+  emits: ["update:show"],
   setup() {
     const expanded = ref(false);
 

package/components/lists/FSLoadDataTable.vue

@@ -0,0 +1,88 @@
+<template>
+  <FSCol
+    class="fs-load-data-table"
+    gap="16px"
+    :style="style"
+  >
+    <FSRow
+      align="bottom-center"
+    >
+      <v-skeleton-loader
+        type="button"
+      />
+      <v-skeleton-loader
+        type="button"
+      />
+      <v-spacer />
+      <v-skeleton-loader
+        type="button"
+      />
+      <v-skeleton-loader
+        type="button"
+      />
+    </FSRow>
+    <FSRow>
+      <v-skeleton-loader
+        type="chip"
+      />
+      <v-skeleton-loader
+        type="chip"
+      />
+      <v-skeleton-loader
+        type="chip"
+      />
+    </FSRow>
+    <v-skeleton-loader
+      type="table-row-divider@10"
+    />
+    <FSRow
+      align="bottom-right"
+    >
+      <v-skeleton-loader
+        type="button"
+      />
+      <v-skeleton-loader
+        type="button"
+      />
+      <v-skeleton-loader
+        type="button"
+      />
+      <v-skeleton-loader
+        type="button"
+      />
+    </FSRow>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSLoadDataTable",
+  components: {
+    FSCol,
+    FSRow
+  },
+  setup() {
+    const { getColors } = useColors();
+
+    const backgroundColors = getColors(ColorEnum.Background);
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      return {
+        "--fs-load-data-table-background-color": backgroundColors.base
+      };
+    });
+
+    return {
+      style
+    };
+  }
+});
+</script>

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -13,7 +13,7 @@
         align="center-center"
         gap="24px"
         :wrap="false"
-        :height="infoHeight"
+        :height="imageSize"
       >
         <FSCol
           gap="12px"
@@ -82,7 +82,7 @@ import FSWorstAlert from "../deviceOrganisations/FSWorstAlert.vue";
 import FSDivider from "../FSDivider.vue";
 import FSImage from "../FSImage.vue";
 import FSSpan from "../FSSpan.vue";
-import FSTile from "../FSTile.vue";
+import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
@@ -205,16 +205,12 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): string => {
+    const infoWidth = computed((): number => {
       let width = isMobileSized.value ? 288 : 304;
       if (props.imageId) {
         width -= imageSize.value;
       }
-      return `${width}px`;
-    });
-
-    const infoHeight = computed((): string => {
-      return `${imageSize.value}px`;
+      return width;
     });
 
     return {
@@ -224,8 +220,7 @@ export default defineComponent({
       carouselModelStatuses,
       carouselDeviceStatuses,
       imageSize,
-      infoWidth,
-      infoHeight
+      infoWidth
     };
   }
 });

package/components/tiles/FSGroupTileUI.vue

@@ -13,7 +13,7 @@
         align="center-center"
         gap="24px"
         :wrap="false"
-        :height="infoHeight"
+        :height="imageSize"
       >
         <FSCol
           gap="12px"
@@ -100,7 +100,7 @@ import FSImage from "../FSImage.vue";
 import FSColor from "../FSColor.vue";
 import FSSpan from "../FSSpan.vue";
 import FSText from "../FSText.vue";
-import FSTile from "../FSTile.vue";
+import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
@@ -167,16 +167,12 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): string => {
+    const infoWidth = computed((): number => {
       let width = isMobileSized.value ? 288 : 304;
       if (props.imageId) {
         width -= imageSize.value;
       }
-      return `${width}px`;
-    });
-
-    const infoHeight = computed((): string => {
-      return `${imageSize.value}px`;
+      return width;
     });
 
     return {
@@ -184,8 +180,7 @@ export default defineComponent({
       groupsLabel,
       deviceOrganisationsLabel,
       imageSize,
-      infoWidth,
-      infoHeight
+      infoWidth
     };
   }
 });

package/components/{FSLoadTile.vue → tiles/FSLoadTile.vue}

@@ -28,7 +28,7 @@
         @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
       />
     </FSContainer>
-  </FSCard>  
+  </FSCard>
 </template>
 
 <script lang="ts">
@@ -37,11 +37,11 @@ import { computed, defineComponent } from "vue";
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSContainer from "./FSContainer.vue";
-import FSCheckbox from "./FSCheckbox.vue";
-import FSCard from "./FSCard.vue";
-import FSCol from "./FSCol.vue";
-import FSRow from "./FSRow.vue";
+import FSContainer from "../FSContainer.vue";
+import FSCheckbox from "../FSCheckbox.vue";
+import FSCard from "../FSCard.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSTile",
@@ -64,10 +64,12 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ["update:modelValue"],
   setup() {
     const { isMobileSized } = useBreakpoints();
+    const { getColors } = useColors();
 
-    const backgroundColors = useColors().getColors(ColorEnum.Background);
+    const backgroundColors = getColors(ColorEnum.Background);
 
     const width = computed(() => {
       return isMobileSized.value ? 336 : 352;

package/components/{FSTile.vue → tiles/FSTile.vue}

@@ -31,9 +31,9 @@ import { computed, defineComponent, PropType } from "vue";
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSContainer from "./FSContainer.vue";
-import FSCheckbox from "./FSCheckbox.vue";
-import FSCard from "./FSCard.vue";
+import FSContainer from "../FSContainer.vue";
+import FSCheckbox from "../FSCheckbox.vue";
+import FSCard from "../FSCard.vue";
 
 export default defineComponent({
   name: "FSTile",
@@ -62,8 +62,9 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props) {
     const { isMobileSized } = useBreakpoints();
+    const { getGradients } = useColors();
 
-    const bottomColors = computed(() => useColors().getGradients(props.bottomColor));
+    const bottomColors = computed(() => getGradients(props.bottomColor));
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       return {

package/composables/index.ts

@@ -1,3 +1,5 @@
 export * from "./useBreakpoints";
 export * from "./useColors";
+export * from "./useDebounce";
+export * from "./useRules";
 export * from "./useSlots";

package/composables/useBreakpoints.ts

@@ -3,19 +3,21 @@ import { computed, onMounted, onUnmounted, ref } from "vue";
 export const useBreakpoints = () => {
     const windowWidth = ref(window.innerWidth);
 
-    const onWidthChange = () => windowWidth.value = window.innerWidth;
+    const onSizeChange = (): void => {
+        windowWidth.value = window.innerWidth;
+    };
 
     onMounted(() => {
-        window.addEventListener("resize", onWidthChange);
+        window.addEventListener("resize", onSizeChange);
     });
 
     onUnmounted(() => {
-        window.removeEventListener("resize", onWidthChange);
+        window.removeEventListener("resize", onSizeChange);
     });
 
-    const isTouchScreenEnabled = (): boolean => {
+    const isTouchScreenEnabled = computed((): boolean => {
         return navigator.maxTouchPoints > 0;
-    };
+    });
 
     const isMobileSized = computed((): boolean => {
         return windowWidth.value < 1264;