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

package/components/FSSearchField.vue

@@ -6,18 +6,27 @@
     :hideHeader="$props.hideHeader"
     :required="$props.required"
     :editable="$props.editable"
+    :placeholder="placeholder"
     @keydown.enter="$emit('update:modelValue', innerValue)"
     v-model="innerValue"
     v-bind="$attrs"
   >
-    <template
-      v-if="!$props.instant"
-      #append
-    >
+    <template v-if="$props.prependInnerIcon" #prepend-inner>
+      <slot name="prepend-inner">
+        <FSButton
+          variant="icon"
+          :icon="$props.prependInnerIcon"
+          :editable="$props.editable"
+          :color="ColorEnum.Dark"
+          @click="$emit('update:modelValue', innerValue)"
+        />
+      </slot>
+    </template>
+    <template v-if="!['instant'].includes($props.variant)" #append>
       <slot name="append">
         <FSButton
           :prependIcon="$props.buttonPrependIcon"
-          :label="$props.buttonLabel"
+          :label="buttonLabel"
           :appendIcon="$props.buttonAppendIcon"
           :variant="$props.buttonVariant"
           :color="$props.buttonColor"
@@ -33,8 +42,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, watch } from "vue";
+import { computed, defineComponent, PropType, ref, watch } from "vue";
 
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSTextField from "./FSTextField.vue";
@@ -57,11 +67,26 @@ export default defineComponent({
       required: false,
       default: null
     },
-    buttonPrependIcon: {
+    placeholder: {
+      type: String,
+      required: false,
+      default: null
+    },
+    prependInnerIcon: {
       type: String,
       required: false,
       default: "mdi-magnify"
     },
+    variant: {
+      type: String as PropType<"standard" | "instant">,
+      required: false,
+      default: "instant"
+    },
+    buttonPrependIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
     buttonLabel: {
       type: String,
       required: false,
@@ -97,11 +122,6 @@ export default defineComponent({
       required: false,
       default: false
     },
-    instant: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
     required: {
       type: Boolean,
       required: false,
@@ -115,15 +135,28 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { $tr } = useTranslationsProvider();
+
     const innerValue = ref(props.modelValue);
 
+    const placeholder = computed(() => {
+      return props.placeholder ?? $tr('ui.search.placeholder', 'Search...');
+    });
+
+    const buttonLabel = computed(() => {
+      return props.buttonLabel ?? $tr('ui.button.search', 'Search');
+    });
+
     watch(innerValue, () => {
-      if (props.instant) {
+      if (["instant"].includes(props.variant)) {
         emit("update:modelValue", innerValue.value);
       }
     });
 
     return {
+      ColorEnum,
+      placeholder,
+      buttonLabel,
       innerValue
     };
   }

package/components/FSSelectField.vue

@@ -140,13 +140,15 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
+    const { getColors } = useColors();
     const { slots } = useSlots();
+    
     delete slots.label;
     delete slots.description;
 
-    const errors = useColors().getColors(ColorEnum.Error);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       if (!props.editable) {

package/components/FSSlideGroup.vue

@@ -36,8 +36,9 @@ export default defineComponent({
   },
   setup(props) {
     const { getChildren } = useSlots();
+    const { getColors } = useColors();
 
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       return {

package/components/FSSlider.vue

@@ -101,9 +101,11 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const colors = computed(() => useColors().getColors(props.color));
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const { getColors } = useColors();
+
+    const colors = computed(() => getColors(props.color));
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       if (!props.editable) {

package/components/FSSubmitDialog.vue

@@ -54,8 +54,8 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useTranslationsProvider } from "@dative-gpi/foundation-shared-services";
 
 import FSDialog from "./FSDialog.vue";
 import FSRow from "./FSRow.vue";

package/components/FSSwitch.vue

@@ -87,10 +87,12 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const colors = computed(() => useColors().getColors(props.color));
-    const backgrounds = useColors().getColors(ColorEnum.Background);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const { getColors } = useColors();
+
+    const colors = computed(() => getColors(props.color));
+    const backgrounds = getColors(ColorEnum.Background);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       if (!props.editable) {

package/components/FSTabs.vue

@@ -40,11 +40,12 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { getColors, getContrasts } = useColors();
     const { getChildren } = useSlots();
 
-    const textColors = computed(() => useColors().getContrasts(props.color));
-    const colors = computed(() => useColors().getColors(props.color));
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const textColors = computed(() => getContrasts(props.color));
+    const colors = computed(() => getColors(props.color));
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => ({
       "--fs-group-color"                 : darks.base,

package/components/FSTag.vue

@@ -73,8 +73,10 @@ export default defineComponent({
   },
   emits: ["remove"],
   setup(props) {
-    const textColors = computed(() => useColors().getContrasts(props.color));
-    const colors = computed(() => useColors().getColors(props.color));
+    const { getColors, getContrasts } = useColors();
+
+    const textColors = computed(() => getContrasts(props.color));
+    const colors = computed(() => getColors(props.color));
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       switch (props.variant) {

package/components/FSTagField.vue

@@ -141,10 +141,11 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { getColors } = useColors();
 
-    const errors = useColors().getColors(ColorEnum.Error);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const innerValue = ref("");
 

package/components/FSText.vue

@@ -44,9 +44,10 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { getColors } = useColors();
     const { slots } = useSlots();
 
-    const colors = computed(() => useColors().getColors(props.color));
+    const colors = computed(() => getColors(props.color));
 
     const classes = computed((): string[] => {
       const classNames = ["fs-text", props.font];

package/components/FSTextArea.vue

@@ -139,10 +139,11 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props) {
     const { isMobileSized } = useBreakpoints();
+    const { getColors } = useColors();
 
-    const errors = useColors().getColors(ColorEnum.Error);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       let height: string | undefined = undefined;

package/components/FSTextField.vue

@@ -124,13 +124,15 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
+    const { getColors } = useColors();
     const { slots } = useSlots();
+
     delete slots.label;
     delete slots.description;
 
-    const errors = useColors().getColors(ColorEnum.Error);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       if (!props.editable) {

package/components/FSWrapGroup.vue

@@ -35,8 +35,9 @@ export default defineComponent({
   },
   setup(props) {
     const { getChildren } = useSlots();
+    const { getColors } = useColors();
 
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       return {

package/components/deviceOrganisations/FSConnectivity.vue

@@ -57,9 +57,10 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
-import { useTimeZone, useTranslationsProvider } from "@dative-gpi/foundation-shared-services/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
 import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
+import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSColorIcon from "../FSColorIcon.vue";
 import FSCard from "../FSCard.vue";

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -62,8 +62,9 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
-import { useTimeZone, useTranslationsProvider } from "@dative-gpi/foundation-shared-services/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
+import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 import { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 

package/components/lists/FSDataTableUI.vue

@@ -412,7 +412,7 @@ 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 FSFilterButton from "./FSFilterButton.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,7 +71,7 @@
 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 FSFadeOut from "../FSFadeOut.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

@@ -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";
 

package/components/tiles/FSGroupTileUI.vue

@@ -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";
 

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,4 @@
 export * from "./useBreakpoints";
 export * from "./useColors";
+export * from "./useDebounce";
 export * from "./useSlots";

package/composables/useDebounce.ts

@@ -0,0 +1,22 @@
+import { ref, Ref } from "vue";
+
+export const useDebounce = () => {
+    const timeOutId: Ref<NodeJS.Timeout | null> = ref(null);
+
+    const debounce = (callback: Function, wait: number, ...args: any[]): void => {
+        cancel();
+        timeOutId.value = setTimeout(() => callback(...args), wait);
+    };
+
+    const cancel = (): void => {
+        if (timeOutId.value) {
+            clearTimeout(timeOutId.value);
+            timeOutId.value = null;
+        }
+    };
+
+    return {
+        debounce,
+        cancel
+    };
+}