@dative-gpi/foundation-shared-components 0.0.18 → 0.0.20

package/components/buttons/FSButtonSearchIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    icon="mdi-magnify"
+    variant="icon"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonSearchIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonSearchLabel.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    :label="$tr('ui.button.search', 'Search')"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonSearchLabel",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonSearchMini.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    prependIcon="mdi-magnify"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonSearchMini",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonUndo.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    prependIcon="mdi-undo-variant"
+    :label="$tr('ui.button.undo', 'Undo')"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonUndo",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonUndoIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    icon="mdi-undo-variant"
+    variant="icon"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonUndoIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonUndoLabel.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    :label="$tr('ui.button.undo', 'Undo')"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonUndo",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonUndoMini.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    prependIcon="mdi-undo-variant"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonUndoMini",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonUpdate.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    prependIcon="mdi-pencil-outline"
+    :label="$tr('ui.button.update', 'Update')"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonUpdate",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonUpdateIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    icon="mdi-pencil-outline"
+    variant="icon"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonUpdateIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonUpdateLabel.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    :label="$tr('ui.button.update', 'Update')"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonUpdateLabel",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonUpdateMini.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    prependIcon="mdi-pencil-outline"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonUpdateMini",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonValidate.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    prependIcon="mdi-check"
+    :label="$tr('ui.button.validate', 'Validate')"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonValidate",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonValidateIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    icon="mdi-check"
+    variant="icon"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonValidateIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonValidateLabel.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    :label="$tr('ui.button.validate', 'Validate')"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonValidateLabel",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonValidateMini.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    prependIcon="mdi-check"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonValidateMini",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/fields/FSIconField.vue

@@ -25,20 +25,21 @@
     </FSTextField>
     <FSToggleSet
       class="fs-icon-field-set"
+      ref="toggleSetRef"
       variant="slide"
-      :values="icons"
-      :required="$props.required"
-      :editable="$props.editable"
       :buttonColor="$props.buttonColor"
       :activeColor="$props.activeColor"
       :modelValue="$props.modelValue"
+      :required="$props.required"
+      :editable="$props.editable"
+      :values="icons"
       @update:modelValue="(value) => $emit('update:modelValue', value)"
     />
   </FSCol>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import { computed, defineComponent, PropType, ref, watch } from "vue";
 
 import { Icons, sortByLevenshteinDistance } from "@dative-gpi/foundation-shared-components/utils";
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
@@ -129,6 +130,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
+    const toggleSetRef = ref(null);
     const innerValue = ref(null);
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
@@ -170,7 +172,11 @@ export default defineComponent({
       }
       if (props.modelValue) {
         const selectedIcon = innerIcons.find((icon) => icon.id === props.modelValue);
-        if (!selectedIcon) {
+        if (selectedIcon) {
+          innerIcons.splice(innerIcons.indexOf(selectedIcon), 1);
+          innerIcons.unshift(selectedIcon);
+        }
+        else {
           innerIcons.unshift({
             id: props.modelValue,
             prependIcon: props.modelValue
@@ -182,7 +188,14 @@ export default defineComponent({
 
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
+    watch(() => props.modelValue, () => {
+      if (toggleSetRef.value) {
+        toggleSetRef.value.goToStart();
+      }
+    });
+
     return {
+      toggleSetRef,
       innerValue,
       validateOn,
       messages,

package/components/lists/FSDataTableUI.vue

@@ -242,6 +242,7 @@
               v-if="innerRowsPerPage !== -1"
               class="fs-data-table-pagination"
               variant="slide"
+              :dash="pageOptions.length > 8"
               :values="pageOptions"
               :required="true"
               v-model="innerPage"
@@ -349,6 +350,7 @@
               v-if="innerRowsPerPage !== -1"
               class="fs-data-table-pagination"
               variant="slide"
+              :dash="pageOptions.length > 8"
               :values="pageOptions"
               :required="true"
               v-model="innerPage"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.18",
-    "@dative-gpi/foundation-shared-services": "0.0.18",
+    "@dative-gpi/foundation-shared-domain": "0.0.20",
+    "@dative-gpi/foundation-shared-services": "0.0.20",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "adb9af6cb91acce1d7207f464a8f493f94666c4b"
+  "gitHead": "9e8af5e1e592b3ae7725816cad435a497d2ffe91"
 }

package/styles/components/fs_button.scss

@@ -1,37 +1,9 @@
 .fs-button {
     padding: var(--fs-button-padding) !important;
-    border-radius: 4px !important;
-    border: 1px solid !important;
-    box-shadow: none !important;
-    
-    background-color: var(--fs-button-background-color) !important;
-    border-color: var(--fs-button-border-color) !important;
-    color: var(--fs-button-color) !important;
 
     &.fs-button-full-width {
         width: 100%;
     }
-
-    &:not(.fs-button--disabled):hover {
-        background-color: var(--fs-button-hover-background-color) !important;
-        color: var(--fs-button-hover-color) !important;
-    }
-
-    &:not(.fs-button--disabled):active {
-        background-color: var(--fs-button-active-background-color) !important;
-        border-color: var(--fs-button-active-border-color) !important;
-        color: var(--fs-button-active-color) !important;
-    }
-
-    @include web {
-        min-width: 40px !important;
-        height: 40px !important;
-    }
-
-    @include mobile {
-        min-width: 36px !important;
-        height: 36px !important;
-    }
 }
 
 .fs-button-icon {

package/styles/components/fs_clickable.scss

@@ -0,0 +1,26 @@
+.fs-clickable {
+    border-radius: var(--fs-clickable-border-radius) !important;
+    border: var(--fs-clickable-border-size) solid !important;
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    
+    background-color: var(--fs-clickable-background-color) !important;
+    border-color: var(--fs-clickable-border-color) !important;
+    color: var(--fs-clickable-color) !important;
+
+    &.fs-clickable-disabled {
+        cursor: default;
+    }
+
+    &:not(.fs-clickable-disabled):hover {
+        background-color: var(--fs-clickable-hover-background-color) !important;
+        border-color: var(--fs-clickable-hover-border-color) !important;
+        color: var(--fs-clickable-hover-color) !important;
+    }
+
+    &:not(.fs-clickable-disabled):active {
+        background-color: var(--fs-clickable-active-background-color) !important;
+        border-color: var(--fs-clickable-active-border-color) !important;
+        color: var(--fs-clickable-active-color) !important;
+    }
+}

package/styles/components/fs_data_table.scss

@@ -87,11 +87,11 @@
 
 .fs-data-table-pagination {
     @include web {
-        max-width: 200px;
+        max-width: 280px;
     }
 
     @include mobile {
-        max-width: 194px;
+        max-width: 274px;
     }
 }
 

package/styles/components/index.scss

@@ -6,6 +6,7 @@
 @import "fs_carousel.scss";
 @import "fs_checkbox.scss";
 @import "fs_chip.scss";
+@import "fs_clickable.scss";
 @import "fs_clock.scss";
 @import "fs_col.scss";
 @import "fs_color_field.scss";

package/styles/globals/overrides.scss

@@ -78,6 +78,7 @@ input[type=number]::-webkit-outer-spin-button {
     margin: 0; 
 }
 
+// Set the right z-index in overlays
 $nthOverlay: 25;
 @for $i from 1 through $nthOverlay {
   .v-overlay-container > :nth-child(#{$i}) {
@@ -96,8 +97,8 @@ $nthOverlay: 25;
 .v-slide-group__prev,
 .v-slide-group__next {
     color: var(--fs-group-color);
-    min-width: 24px !important;
-    width: 24px !important;
+    min-width: var(--fs-group-arrows-width) !important;
+    width: var(--fs-group-arrows-width) !important;
     flex: 1 1 0 !important;
 
     @include touchscreen {

package/utils/css.ts

@@ -1,8 +1,22 @@
-export const sizeToVar = (value: string | number | null, nullValue: string = "fit-content", unit: "px" | "%" | "em"| "vw" | "vh" = "px"): string => {
+import { useBreakpoints } from "../composables/useBreakpoints";
+
+const { isMobileSized, isExtraSmall } = useBreakpoints();
+
+export const sizeToVar = (value: string[] | number[] | string | number | null, nullValue: string = "fit-content", unit: "px" | "%" | "em"| "vw" | "vh" = "px"): string => {
     if (value == null) {
         return nullValue;
     }
-
+    if (Array.isArray(value)) {
+        if (isExtraSmall.value) {
+            const extraSmallValue = value[2] ?? value[1] ?? value[0];
+            return typeof extraSmallValue === 'string' && isNaN(+extraSmallValue) ? extraSmallValue : `${extraSmallValue}${unit}`;
+        }
+        if (isMobileSized.value) {
+            const mobileValue = value[1] ?? value[0];
+            return typeof mobileValue === 'string' && isNaN(+mobileValue) ? mobileValue : `${mobileValue}${unit}`;
+        }
+        return typeof value[0] === 'string' && isNaN(+value[0]) ? value[0] : `${value[0]}${unit}`;
+    }
     return typeof value === 'string' && isNaN(+value) ? value : `${value}${unit}`;
 };