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

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-page {
+    height: 4px;
+    border-radius: 4px;
+    min-width: var(--fs-pagination-page-width);
+    background-color: var(--fs-pagination-background-color);
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &.fs-pagination-active-page {
+        background-color: var(--fs-pagination-active-background-color);
+    }
+}

package/styles/components/fs_time_field.scss

@@ -0,0 +1,3 @@
+.fs-time-field-select {
+    min-width: 180px;
+}

package/styles/components/fs_timeslot_field.scss

@@ -0,0 +1,75 @@
+.fs-time-slot-field {
+  padding: 0px !important;
+  width: 100%;
+
+  & > .v-input__control > .v-field {
+      border: 1px solid var(--fs-time-slot-field-border-color) !important;
+      cursor: var(--fs-time-slot-field-cursor) !important;
+      border-radius: 4px !important;
+      padding: 0 16px !important;
+      gap: 8px;
+
+      &--error {
+          border-color: var(--fs-time-slot-field-error-border-color) !important;
+      }
+
+      &:not(.v-field--error):focus-within {
+          border-color: var(--fs-time-slot-field-active-border-color) !important;
+      }
+
+      & > .v-field__outline {
+          display: none;
+      }
+
+      & > .v-field__field > .v-field__input {
+          @extend .text-body;
+      
+          padding-inline: 0 !important;
+          color: var(--fs-time-slot-field-color);
+          cursor: var(--fs-time-slot-field-cursor) !important;
+      
+          @include web {
+              min-height: 38px !important;
+              height: 38px !important;
+          }
+      
+          @include mobile {
+              min-height: 34px !important;
+              height: 34px !important;
+          }
+
+          & > .v-select__selection {
+              height: 100%;
+          }
+      }
+
+      & > .v-field__clearable {
+          margin-inline: 0px;
+      }
+
+      & > .v-field__append-inner {
+          color: var(--fs-time-slot-field-color);
+
+          & > i {
+              margin-inline-start: 0px;
+          }
+      }
+  }
+}
+
+.fs-time-slot-field-label {
+  color: var(--fs-time-slot-field-color);
+}
+
+.fs-time-slot-field-messages {
+  align-self: stretch;
+  color: var(--fs-time-slot-field-error-color);
+}
+
+.fs-time-slot-field-description {
+  color: var(--fs-time-slot-field-color);
+}
+
+.fs-time-slot-field-number > .fs-row {
+  padding: 0px !important;
+}

package/styles/components/index.scss

@@ -8,6 +8,7 @@
 @import "fs_chip.scss";
 @import "fs_clock.scss";
 @import "fs_col.scss";
+@import "fs_color_field.scss";
 @import "fs_color.scss";
 @import "fs_color_icon.scss";
 @import "fs_container.scss";
@@ -23,7 +24,11 @@
 @import "fs_icon_field.scss";
 @import "fs_icon.scss";
 @import "fs_image.scss";
+@import "fs_label.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";
@@ -41,5 +46,7 @@
 @import "fs_text_field.scss";
 @import "fs_text.scss";
 @import "fs_tile.scss";
+@import "fs_time_field.scss";
+@import "fs_timeslot_field.scss";
 @import "fs_tooltip.scss";
 @import "fs_wrap_group.scss";

package/styles/globals/text_fonts.scss

@@ -56,6 +56,24 @@
     }
 }
 
+.text-h4 {
+    font-family: 'Montserrat', sans-serif !important;
+    font-style: normal !important;
+    font-weight: 500 !important;
+
+    @include web {
+        font-size: 16px !important;
+        line-height: 20px !important;
+        letter-spacing: -0.48px !important;
+    }
+
+    @include mobile {
+        font-size: 14px !important;
+        line-height: 16px !important;
+        letter-spacing: -0.41px !important;
+    }
+}
+
 .text-body {
     font-family: 'Montserrat', sans-serif !important;
     font-style: normal !important;

package/styles/main.scss

@@ -1,3 +1,5 @@
 // Warning: Imports are loaded in order. If you need to use a variable / property / mixin, import it after the file that defines it
 @import 'globals/index.scss';
-@import 'components/index.scss';
+@import 'components/index.scss';
+
+@import 'pages/index.scss';

package/styles/pages/fs_language_setter.scss

@@ -0,0 +1,55 @@
+.fs-load-language-setter {
+    @include web {
+        height: 40px;
+        max-width: 360px;
+    }
+    @include mobile {
+        height: 36px;
+        max-width: 360px;
+    }
+
+    & .v-skeleton-loader__image {
+        border-radius: 4px;
+        height: 100%;
+        width: 100%;
+    }
+}
+
+.fs-load-language-setter-icon {
+    @include mobile {
+        width: 72px;
+    }
+    @include web {
+        width: 76px;
+    }
+}
+
+.fs-language-setter {
+    & > .v-input__control > .v-field {
+        padding: 0px 8px 0px 12px !important;
+        gap: 0px;
+
+        & > .v-field__field > .v-field__input {
+            padding-top: 0px;
+            padding-bottom: 0px;
+
+            &  > .v-select__selection {
+                height: 100% !important;
+
+                & > .fs-row > .v-icon {
+                    padding-bottom: 2px;
+                }
+            }
+        }
+    }
+}
+
+.fs-language-setter-icon {
+    @include mobile {
+        width: 72px;
+    }
+
+    @include web {
+        width: 76px;
+    }
+}

package/styles/pages/index.scss

@@ -0,0 +1 @@
+@import "./fs_language_setter.scss";

package/utils/color.ts

@@ -0,0 +1,7 @@
+export const getPercentageFromHex = (hex: string): number => { 
+  return parseInt(hex, 16) / 255;
+}
+
+export const getHexFromPercentage = (percentage: number): string => {
+  return Math.round(percentage * 255).toString(16).padStart(2, "0");
+}

package/utils/css.ts

@@ -2,7 +2,8 @@ export const sizeToVar = (value: string | number | null, nullValue: string = "fi
     if (value == null) {
         return nullValue;
     }
-    return typeof value === 'string' ? value : `${value}${unit}`;
+
+    return typeof value === 'string' && isNaN(+value) ? value : `${value}${unit}`;
 };
 
 export const varToSize = (value: string): number => {

package/utils/index.ts

@@ -1,5 +1,7 @@
+export * from "./color";
 export * from "./css";
 export * from "./icons";
 export * from "./levenshtein";
 export * from "./lexical";
-export * from "./sort";
+export * from "./sort";
+export * from "./time";

package/utils/time.ts

@@ -0,0 +1,29 @@
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+
+const { $tr } = useTranslationsProvider();
+
+export const timeScale: any[] = [
+  { id: 1,      label: $tr("ui.time-field.second.singular", "Second"), plural: $tr("ui.time-field.second.plural", "Seconds") },
+  { id: 60,     label: $tr("ui.time-field.minute.singular", "Minute"), plural: $tr("ui.time-field.minute.plural", "Minutes") },
+  { id: 3600,   label: $tr("ui.time-field.hour.singular", "Hour"),     plural: $tr("ui.time-field.hour.plural", "Hours") },
+  { id: 86400,  label: $tr("ui.time-field.day.singular", "Day"),       plural: $tr("ui.time-field.day.plural", "Days") },
+  { id: 604800, label: $tr("ui.time-field.week.singular", "Week"),     plural: $tr("ui.time-field.week.plural", "Weeks") },
+];
+
+export const getTimeScaleIndex = (value: number): number => {
+  if (!value) {
+    return 0;
+  }
+  for (let i = timeScale.length - 1; i >= 0; i--) {
+    if (value % timeScale[i].id === 0) {
+      return i;
+    }
+  }
+  return 0;
+};
+
+export const getTimeBestString = (value: number): string => {
+  const unit = getTimeScaleIndex(value);
+  const figure = value / timeScale[unit].id;
+  return `${figure} ${figure === 1 ? timeScale[unit].label.toLowerCase() : timeScale[unit].plural.toLowerCaser()}`;
+}

package/components/FSHeaderButton.vue

@@ -1,17 +0,0 @@
-<template>
-  
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "FSHeaderButton",
-  props: {
-  },
-  setup(props) {
-    return {
-    };
-  }
-});
-</script>

package/components/lists/FSDataIteratorGroup.vue

@@ -1,7 +0,0 @@
-<template>
-  
-</template>
-
-<script lang="ts">
-
-</script>

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