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

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
+    };
+}

package/models/rules.ts

@@ -1,4 +1,5 @@
-import { useTimeZone, useTranslationsProvider } from "@dative-gpi/foundation-shared-services/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 const { epochToLongDateFormat } = useTimeZone()!;
 const { $tr } = useTranslationsProvider();

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
-  "version": "0.0.10",
+  "sideEffects": false,
+  "version": "0.0.12",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -9,9 +10,10 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.10",
-    "@dative-gpi/foundation-shared-services": "0.0.10",
+    "@dative-gpi/foundation-shared-domain": "0.0.12",
+    "@dative-gpi/foundation-shared-services": "0.0.12",
     "@fontsource/montserrat": "^5.0.16",
+    "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
     "@lexical/link": "^0.12.5",
     "@lexical/plain-text": "^0.12.5",
@@ -30,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "765222a4eb6a5cdd690f64bc0ae3c5415081e0f0"
+  "gitHead": "73c686b3b0343ac4b42d34c2aa7cf7604ad0d298"
 }

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_link.scss

@@ -0,0 +1,6 @@
+.fs-link {
+    color: var(--fs-link-color);
+    text-decoration: none;
+
+    @extend .fs-span;
+}

package/styles/components/fs_load_data_table.scss

@@ -0,0 +1,77 @@
+.fs-load-data-table {
+    position: relative;
+}
+
+.fs-load-data-table .fs-row:first-of-type .v-skeleton-loader__button {
+    margin: 0;
+
+    @include web {
+        height: 40px !important;
+        min-width: 40px;
+    }
+
+    @include mobile {
+        height: 36px !important;
+        min-width: 36px;
+    }
+}
+
+.fs-load-data-table .fs-row:first-of-type .v-skeleton-loader:first-of-type {
+    @include web {
+        min-width: calc(50% - 132px);
+    }
+
+    @include mobile {
+        min-width: calc(50% - 124px);
+    }
+
+    & .v-skeleton-loader__button {
+        min-width: 100%;
+    }
+}
+
+.fs-load-data-table .fs-row:nth-of-type(2) .v-skeleton-loader__chip {
+    margin: 0;
+    border-radius: 50px !important;
+    min-width: 10vw;
+
+    @include web {
+        height: 24px !important;
+    }
+
+    @include mobile {
+        height: 20px !important;
+    }
+}
+
+.fs-load-data-table .v-skeleton-loader:has(.v-skeleton-loader__table-row-divider),
+.fs-load-data-table .v-skeleton-loader:has(.v-skeleton-loader__table-thead) {
+    background-color: var(--fs-load-tile-background-color);
+    min-width: 100%;
+}
+
+.fs-load-data-table .v-skeleton-loader__table-row {
+    margin: 0 -8px;
+}
+
+.fs-load-data-table .fs-row:last-of-type .v-skeleton-loader__button {
+    margin: 0;
+
+    @include web {
+        height: 40px !important;
+        min-width: 40px;
+    }
+
+    @include mobile {
+        height: 36px !important;
+        min-width: 36px;
+    }
+}
+
+.fs-load-data-table .fs-row:last-of-type .v-skeleton-loader:first-of-type {
+    min-width: 120px;
+
+    & .v-skeleton-loader__button {
+        min-width: 100%;
+    }
+}

package/styles/components/fs_pagination.scss

@@ -0,0 +1,11 @@
+.fs-pagination {
+    height: 4px;
+    min-width: 12%;
+    border-radius: 4px;
+    background-color: var(--fs-pagination-background-color);
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &.fs-pagination-active {
+        background-color: var(--fs-pagination-active-background-color);
+    }
+}

package/styles/components/index.scss

@@ -23,7 +23,10 @@
 @import "fs_icon_field.scss";
 @import "fs_icon.scss";
 @import "fs_image.scss";
+@import "fs_link.scss";
+@import "fs_load_data_table.scss";
 @import "fs_load_tile.scss";
+@import "fs_pagination.scss";
 @import "fs_password_field.scss";
 @import "fs_radio.scss";
 @import "fs_rich_text_field.scss";

package/index.ts

@@ -1,6 +0,0 @@
-export * from "./aliases";
-export * from "./composables";
-export * from "./models";
-export * from "./plugins";
-export * from "./themes";
-export * from "./utils";