@dative-gpi/foundation-shared-components 0.0.144 → 0.0.146

package/components/FSDialogMenu.vue

@@ -5,6 +5,7 @@
     v-bind="$attrs"
   >
     <FSCard
+      width="calc(100vw - 48px)"
       padding="8px"
       gap="24px"
       :color="$props.color"

package/components/FSSlideGroup.vue

@@ -108,25 +108,29 @@ export default defineComponent({
     const goToStart = () => {
       if (slideGroupRef.value) {
         const scrollElement = (slideGroupRef.value as any).$el.children[1];
-        scrollElement.scrollTo({ left: -scrollElement.scrollLeft, behavior: "smooth" });
+        if (scrollElement && scrollElement.scrollTo) {
+          scrollElement.scrollTo({ left: -scrollElement.scrollLeft, behavior: "smooth" });
+        }
       }
     };
 
     const goToEnd = () => {
       if (slideGroupRef.value) {
         const scrollElement = (slideGroupRef.value as any).$el.children[1];
-        scrollElement.scrollTo({ left: scrollElement.scrollWidth - scrollElement.scrollLeft, behavior: "smooth" });
+        if (scrollElement && scrollElement.scrollTo) {
+          scrollElement.scrollTo({ left: scrollElement.scrollWidth - scrollElement.scrollLeft, behavior: "smooth" });
+        }
       }
     };
 
     const goToPrev = () => {
-      if (slideGroupRef.value) {
+      if (slideGroupRef.value && (slideGroupRef.value as any).scrollTo) {
         (slideGroupRef.value as any).scrollTo("prev");
       }
     };
 
     const goToNext = () => {
-      if (slideGroupRef.value) {
+      if (slideGroupRef.value && (slideGroupRef.value as any).scrollTo) {
         (slideGroupRef.value as any).scrollTo("next");
         forceActive.value = false;
       }

package/components/autocompletes/FSAutocompleteLanguage.vue

@@ -27,29 +27,23 @@
       </FSRow>
     </template>
     <template
-      #autocomplete-item="{ props, item }"
+      #item-label="{ item, font }"
     >
-      <v-list-item
-        v-bind="{ ...props, title: '' }"
+      <FSRow
+        align="center-left"
+        :wrap="false"
       >
-        <FSRow
-          align="center-left"
+        <FSIcon
+          v-if="item.raw.icon"
+        >
+          {{ item.raw.icon }}
+        </FSIcon>
+        <FSSpan
+          :font="font"
         >
-          <FSCheckbox
-            v-if="$props.multiple"
-            :modelValue="$props.modelValue?.includes(item.value)"
-            @click="props.onClick"
-          />
-          <FSIcon
-            v-if="item.raw.icon"
-          >
-            {{ item.raw.icon }}
-          </FSIcon>
-          <FSSpan>
-            {{ item.raw.label }}
-          </FSSpan>
-        </FSRow>
-      </v-list-item>
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
     </template>
   </FSAutocompleteField>
 </template>

package/components/autocompletes/FSAutocompleteTimeZone.vue

@@ -1,7 +1,7 @@
 <template>
   <FSAutocompleteField
+    itemTitle="id"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
-    :customFilter="customFilter"
     :multiple="$props.multiple"
     :loading="loading"
     :items="timeZones"
@@ -26,27 +26,21 @@
       </FSRow>
     </template>
     <template
-      #autocomplete-item="{ props, item }"
+      #item-label="{ item, font }"
     >
-      <v-list-item
-        v-bind="{ ...props, title: '' }"
+      <FSRow
+        align="center-left"
+        :wrap="false"
       >
-        <FSRow
-          align="center-left"
+        <FSChip
+          :label="item.raw.offset"
+        />
+        <FSSpan
+          :font="font"
         >
-          <FSCheckbox
-            v-if="$props.multiple"
-            :modelValue="$props.modelValue?.includes(item.value)"
-            @click="props.onClick"
-          />
-          <FSChip
-            :label="item.raw.offset"
-          />
-          <FSSpan>
-            {{ item.raw.id }}
-          </FSSpan>
-        </FSRow>
-      </v-list-item>
+          {{ item.raw.id }}
+        </FSSpan>
+      </FSRow>
     </template>
     <template
       #toggle-set-item="props"
@@ -76,9 +70,9 @@ import { computed, defineComponent, PropType } from "vue";
 import { TimeZoneFilters, TimeZoneInfos } from "@dative-gpi/foundation-shared-domain/models";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 import { useTimeZones } from "@dative-gpi/foundation-shared-services/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
-import FSCheckbox from "../FSCheckbox.vue"
 import FSButton from "../FSButton.vue";
 import FSChip from "../FSChip.vue";
 import FSSpan from "../FSSpan.vue";
@@ -88,7 +82,6 @@ export default defineComponent({
   name: "FSAutocompleteTimeZone",
   components: {
     FSAutocompleteField,
-    FSCheckbox,
     FSButton,
     FSChip,
     FSSpan,
@@ -128,10 +121,6 @@ export default defineComponent({
       return getManyTimeZones({ ...props.timeZoneFilters, search: search ?? undefined });
     };
 
-    const customFilter = (_: any, search: string, item: any): boolean => {
-      return item.raw.id.toLowerCase().includes(search.toLowerCase());
-    };
-
     const { toggleSet, search, init, onUpdate } = useAutocomplete(
       timeZones,
       [() => props.timeZoneFilters],
@@ -143,11 +132,11 @@ export default defineComponent({
     );
 
     return {
+      ColorEnum,
       timeZones,
       toggleSet,
       loading,
       search,
-      customFilter,
       onUpdate
     };
   }

package/components/fields/FSAutocompleteField.vue

@@ -77,6 +77,7 @@
           #body
         >
           <FSSearchField
+            :hideHeader="true"
             v-model="search"
           />
           <FSFadeOut
@@ -229,9 +230,14 @@
                 >
                   <slot
                     name="item-label"
-                    v-bind="{ item }"
+                    v-bind="{
+                      item,
+                      font: $props.modelValue === item.raw[$props.itemTitle] ? 'text-button' : 'text-body'
+                    }"
                   >
-                    <FSSpan>
+                    <FSSpan
+                      :font="$props.modelValue === item.raw[$props.itemTitle] ? 'text-button' : 'text-body'"
+                    >
                       {{ item.raw[$props.itemTitle] }}
                     </FSSpan>
                   </slot>
@@ -553,7 +559,7 @@ export default defineComponent({
           emit("update:modelValue", [...props.modelValue, value]);
         }
       }
-      else {
+      else if (props.modelValue != null) {
         if (props.modelValue === value) {
           emit("update:modelValue", []);
         }
@@ -561,6 +567,9 @@ export default defineComponent({
           emit("update:modelValue", [props.modelValue, value]);
         }
       }
+      else {
+        emit("update:modelValue", [value]);
+      }
     };
 
     const onClick = () => {

package/components/fields/FSSelectField.vue

@@ -457,7 +457,7 @@ export default defineComponent({
           emit("update:modelValue", [...props.modelValue, value]);
         }
       }
-      else {
+      else if (props.modelValue != null) {
         if (props.modelValue === value) {
           emit("update:modelValue", []);
         }
@@ -465,6 +465,9 @@ export default defineComponent({
           emit("update:modelValue", [props.modelValue, value]);
         }
       }
+      else {
+        emit("update:modelValue", [value]);
+      }
     };
 
     return {

package/components/fields/FSTreeViewField.vue

@@ -0,0 +1,519 @@
+<template>
+  <template
+    v-if="$props.loading"
+  >
+    <FSCol>
+      <FSLoader
+        v-if="!$props.hideHeader"
+        variant="text-overline"
+      />
+      <FSLoader
+        v-if="$props.loading"
+        width="100%"
+        :height="['40px', '36px']"
+      />
+    </FSCol>
+  </template>
+  <template
+    v-else
+  >
+    <FSCol>
+      <template
+        v-if="isExtraSmall"
+      >
+        <FSTextField
+          class="fs-tree-view-field"
+          :validationValue="$props.modelValue"
+          :description="$props.description"
+          :hideHeader="$props.hideHeader"
+          :clearable="$props.clearable"
+          :editable="$props.editable"
+          :required="$props.required"
+          :validateOn="validateOn"
+          :label="$props.label"
+          :rules="$props.rules"
+          :messages="messages"
+          :readonly="true"
+          :style="style"
+          :modelValue="innerValue"
+          @update:modelValue="$emit('update:modelValue', $event)"
+          @click="openMobileOverlay"
+          v-bind="$attrs"
+        >
+          <template
+            v-for="(_, name) in fieldSlots"
+            v-slot:[name]="slotData"
+          >
+            <slot
+              :name="name"
+              v-bind="slotData"
+            />
+          </template>
+        </FSTextField>
+        <FSDialogMenu
+          v-model="dialog"
+        >
+          <template
+            #body
+          >
+            <FSFadeOut
+              :height="height"
+            >
+              <v-treeview
+                :itemTitle="$props.itemTitle"
+                :itemValue="$props.itemValue"
+                :items="treeItems"
+              >
+                <template
+                  v-for="(_, name) in menuSlots"
+                  v-slot:[name]="slotData"
+                >
+                  <slot
+                    :name="name"
+                    v-bind="slotData"
+                  />
+                </template>
+                <template
+                  #prepend="{ item }"
+                >
+                  <FSCheckbox
+                    v-if="$props.multiple"
+                    :class="listItemClass(item[$props.itemValue])"
+                    :editable="$props.editable"
+                    :modelValue="$props.modelValue?.includes(item[$props.itemValue])"
+                    @update:modelValue="() => onCheckboxChange(item[$props.itemValue])"
+                  >
+                    <template
+                      #label="{ font }"
+                    >
+                      <slot
+                        name="menu-prepend"
+                        :item="item"
+                      />
+                      <FSSpan
+                        :font="font"
+                      >
+                        {{ item[$props.itemTitle] }}
+                      </FSSpan>
+                    </template>
+                  </FSCheckbox>
+                  <FSRadio
+                    v-if="!$props.multiple"
+                    :selected="$props.modelValue === item[$props.itemValue]"
+                    :class="listItemClass(item[$props.itemValue])"
+                    :editable="$props.editable"
+                    :modelValue="item[$props.itemValue]"
+                    @update:modelValue="onRadioChange"
+                  >
+                    <template
+                      #label="{ font }"
+                    >
+                      <slot
+                        name="menu-prepend"
+                        :item="item"
+                      />
+                      <FSSpan
+                        :font="font"
+                      >
+                        {{ item[$props.itemTitle] }}
+                      </FSSpan>
+                    </template>
+                  </FSRadio>
+                </template>
+                <template
+                  #title
+                />
+              </v-treeview>
+            </FSFadeOut>
+          </template>
+        </FSDialogMenu>
+      </template>
+      <template
+        v-else
+      >
+        <v-menu
+          :closeOnContentClick="false"
+          :modelValue="menu && $props.editable"
+          @update:modelValue="menu = $event"
+        >
+          <template
+            #activator="{ props }"
+          >
+            <FSTextField
+              class="fs-tree-view-field"
+              :validationValue="$props.modelValue"
+              :description="$props.description"
+              :hideHeader="$props.hideHeader"
+              :clearable="$props.clearable"
+              :editable="$props.editable"
+              :required="$props.required"
+              :validateOn="validateOn"
+              :label="$props.label"
+              :rules="$props.rules"
+              :messages="messages"
+              :readonly="true"
+              :style="style"
+              :modelValue="innerValue"
+              @update:modelValue="$emit('update:modelValue', $event)"
+              v-bind="{ ...$attrs, ...props }"
+            >
+              <template
+                v-for="(_, name) in fieldSlots"
+                v-slot:[name]="slotData"
+              >
+                <slot
+                  :name="name"
+                  v-bind="slotData"
+                />
+              </template>
+            </FSTextField>
+          </template>
+          <v-treeview
+            :itemTitle="$props.itemTitle"
+            :itemValue="$props.itemValue"
+            :items="treeItems"
+          >
+            <template
+              v-for="(_, name) in menuSlots"
+              v-slot:[name]="slotData"
+            >
+              <slot
+                :name="name"
+                v-bind="slotData"
+              />
+            </template>
+            <template
+              #prepend="{ item }"
+            >
+              <FSCheckbox
+                v-if="$props.multiple"
+                :class="listItemClass(item[$props.itemValue])"
+                :editable="$props.editable"
+                :modelValue="$props.modelValue?.includes(item[$props.itemValue])"
+                @update:modelValue="() => onCheckboxChange(item[$props.itemValue])"
+              >
+                <template
+                  #label="{ font }"
+                >
+                  <slot
+                    name="menu-prepend"
+                    :item="item"
+                  />
+                  <FSSpan
+                    :font="font"
+                  >
+                    {{ item[$props.itemTitle] }}
+                  </FSSpan>
+                </template>
+              </FSCheckbox>
+              <FSRadio
+                v-if="!$props.multiple"
+                :selected="$props.modelValue === item[$props.itemValue]"
+                :class="listItemClass(item[$props.itemValue])"
+                :editable="$props.editable"
+                :modelValue="item[$props.itemValue]"
+                @update:modelValue="onRadioChange"
+              >
+                <template
+                  #label="{ font }"
+                >
+                  <slot
+                    name="menu-prepend"
+                    :item="item"
+                  />
+                  <FSSpan
+                    :font="font"
+                  >
+                    {{ item[$props.itemTitle] }}
+                  </FSSpan>
+                </template>
+              </FSRadio>
+            </template>
+            <template
+              #title
+            />
+          </v-treeview>
+        </v-menu>
+      </template>
+    </FSCol>
+  </template>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from "vue";
+
+import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import { VTreeview } from "vuetify/labs/VTreeview";
+
+import FSDialogMenu from "../FSDialogMenu.vue";
+import FSTextField from "./FSTextField.vue";
+import FSCheckbox from "../FSCheckbox.vue";
+import FSFadeOut from "../FSFadeOut.vue";
+import FSLoader from "../FSLoader.vue";
+import FSRadio from "../FSRadio.vue";
+import FSSpan from "../FSSpan.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSTreeViewField",
+  components: {
+    VTreeview,
+    FSDialogMenu,
+    FSTextField,
+    FSCheckbox,
+    FSFadeOut,
+    FSLoader,
+    FSRadio,
+    FSSpan,
+    FSCol,
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    items: {
+      type: Array as PropType<any[]>,
+      required: true
+    },
+    itemValue: {
+      type: String,
+      required: false,
+      default: "id"
+    },
+    itemTitle: {
+      type: String,
+      required: false,
+      default: "label"
+    },
+    itemParent: {
+      type: String,
+      required: false,
+      default: "parentId"
+    },
+    exclude: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    modelValue: {
+      type: [Array, String, Number] as PropType<(string | number)[] | string | number | null>,
+      required: false,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    rules: {
+      type: Array as PropType<any[]>,
+      required: false,
+      default: () => []
+    },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { validateOn, getMessages } = useRules();
+    const { isExtraSmall } = useBreakpoints();
+    const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots.label;
+    delete slots.description;
+    delete slots["menu-prepend"];
+
+    const backgrounds = getColors(ColorEnum.Background);
+
+    const dialog = ref(false);
+    const menu = ref(false);
+
+    const style = computed((): { [key: string]: string | undefined | null } => {
+      if (!props.editable) {
+        return {
+          "--fs-tree-view-field-cursor": "default"
+        };
+      }
+      else {
+        return {
+          "--fs-tree-view-field-cursor"          : "pointer",
+          "--fs-tree-view-field-background-color": backgrounds.base
+        };
+      }
+    });
+
+    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
+
+    const height = computed(() => {
+      const other = 8 + 8; // Paddings
+      return `calc(100vh - 40px - ${other}px)`;
+    });
+
+    const fieldSlots = computed((): any => {
+      return Object.keys(slots).filter(k => !k.startsWith("menu-")).reduce((acc, key) => {
+        acc[key] = slots[key];
+        return acc;
+      }, {});
+    });
+
+    const menuSlots = computed((): any => {
+      return Object.keys(slots).filter(k => k.startsWith("menu-")).reduce((acc, key) => {
+        acc[key.substring("menu-".length)] = slots[key];
+        return acc;
+      }, {});
+    });
+
+    const innerValue = computed((): string | null => {
+      if (props.multiple) {
+        if (Array.isArray(props.modelValue)) {
+          return props.modelValue.map((value: any) => {
+            const item = props.items.find((item: Object) => item[props.itemValue] === value);
+            if (item) {
+              return item[props.itemTitle];
+            }
+          }).filter(value => !!value).join(", ");
+        }
+      }
+      if (props.modelValue) {
+        const item = props.items.find((item: Object) => item[props.itemValue] === props.modelValue);
+        if (item) {
+          return item[props.itemTitle];
+        }
+      }
+      return null;
+    });
+
+    const treeItems = computed((): any[] => {
+      const filter = ((parentId: string | null) => {
+        return props.items.filter((item: any) => {
+          if (props.exclude.includes(item[props.itemValue])) {
+            return false;
+          }
+          return item[props.itemParent] == parentId;
+        });
+      });
+      const process = ((item: any) => {
+        if (props.items.some((child: any) => child[props.itemParent] === item[props.itemValue])) {
+          return {
+            ...item,
+            children: filter(item[props.itemValue]).map(process)
+          };
+        }
+        return item;
+      });
+      return filter(null).map(process);
+    });
+
+    const listItemClass = (value: string): string[] => {
+      const classNames: string[] = [];
+      if (props.multiple) {
+        if (Array.isArray(props.modelValue)) {
+          if (props.modelValue.includes(value)) {
+            classNames.push("fs-tree-view-item-selected");
+          }
+        }
+        else if (props.modelValue === value) {
+          classNames.push("fs-tree-view-item-selected");
+        }
+      }
+      else {
+        if (props.modelValue === value) {
+          classNames.push("fs-tree-view-item-selected");
+        }
+      }
+      return classNames;
+    };
+
+    const openMobileOverlay = () => {
+      if (!props.editable) {
+        return;
+      }
+      dialog.value = true;
+    };
+
+    const onRadioChange = (value: any): void => {
+      emit("update:modelValue", value);
+      dialog.value = false;
+      menu.value = false;
+    };
+
+    const onCheckboxChange = (value: string) => {
+      if (Array.isArray(props.modelValue)) {
+        if (props.modelValue.includes(value)) {
+          emit("update:modelValue", props.modelValue.filter((item: any) => item !== value));
+        }
+        else {
+          emit("update:modelValue", [...props.modelValue, value]);
+        }
+      }
+      else if (props.modelValue != null) {
+        if (props.modelValue === value) {
+          emit("update:modelValue", []);
+        }
+        else {
+          emit("update:modelValue", [props.modelValue, value]);
+        }
+      }
+      else {
+        emit("update:modelValue", [value]);
+      }
+    };
+
+    return {
+      isExtraSmall,
+      innerValue,
+      fieldSlots,
+      validateOn,
+      menuSlots,
+      treeItems,
+      messages,
+      dialog,
+      height,
+      style,
+      menu,
+      openMobileOverlay,
+      onCheckboxChange,
+      onRadioChange,
+      listItemClass
+    };
+  }
+});
+</script>

package/components/lists/FSDataTableUI.vue

@@ -112,6 +112,7 @@
     >
       <v-data-table
         v-if="!isExtraSmall"
+        loadingText=""
         :selectStrategy="$props.singleSelect ? 'single' : 'all'"
         :groupBy="$props.groupBy ? [$props.groupBy] : []"
         :headers="extraHeaders.concat(innerHeaders)"
@@ -120,6 +121,7 @@
         :showSelect="$props.showSelect"
         :hover="!$props.sortDraggable"
         :itemValue="$props.itemValue"
+        :loading="$props.loading"
         :rowProps="rowProps"
         :fixedHeader="true"
         :items="innerItems"
@@ -408,9 +410,27 @@
         v-else
         class="fs-data-table-iterator"
         :itemsPerPage="innerRowsPerPage"
+        :loading="$props.loading"
         :items="innerItems"
         :page="innerPage"
       >
+        <template
+          #loader
+        >
+          <v-progress-linear
+            height="2"
+            :indeterminate="true"
+          />
+        </template>
+        <template
+          #no-data
+        >
+          <FSText
+            font="text-overline"
+          >
+            {{ $tr("ui.data-table.empty", "No data") }}
+          </FSText>
+        </template>
         <template
           #default="{ items }"
         >
@@ -560,9 +580,27 @@
     >
       <v-data-iterator
         class="fs-data-table-iterator"
-        :items="innerItems"
+        :loading="$props.loading"
         :itemsPerPage="size"
+        :items="innerItems"
       >
+        <template
+          #loader
+        >
+          <v-progress-linear
+            height="2"
+            :indeterminate="true"
+          />
+        </template>
+        <template
+          #no-data
+        >
+          <FSText
+            font="text-overline"
+          >
+            {{ $tr("ui.data-table.empty", "No data") }}
+          </FSText>
+        </template>
         <template
           #default="{ items }"
         >
@@ -782,6 +820,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     mode: {
       type: String as PropType<"table" | "iterator">,
       required: false,

package/composables/index.ts

@@ -4,4 +4,5 @@ export * from "./useColors";
 export * from "./useDebounce";
 export * from "./useRules";
 export * from "./useSlots";
-export * from "./useTables";
+export * from "./useTables";
+export * from "./useTreeView";

package/composables/useTreeView.ts

@@ -0,0 +1,47 @@
+import { onMounted, Ref, watch } from "vue";
+import _ from "lodash";
+
+import { useDebounce } from "./useDebounce";
+
+export const useTreeView = <TInfos>(
+  entities: Ref<TInfos[]>,
+  filters: (() => any)[],
+  emit: (event: "update:modelValue", value: string[] | string | null) => void,
+  customFetch: () => Promise<any>,
+  customUpdate: ((item: TInfos[] | TInfos | null) => void) | null = null,
+  toId: (item: TInfos) => string | null = (item: TInfos) => (item as any).id,
+  debounceInterval: number = 1000
+) => {
+  const { debounce } = useDebounce();
+
+  const debouncedFetch = () => debounce(customFetch, debounceInterval);
+
+  const onUpdate = (value: string[] | string | null) => {
+    if (customUpdate) {
+      if (Array.isArray(value)) {
+        const items = value.map(v => entities.value.find(e => toId(e) === v) || null).filter(e => e !== null) as TInfos[];
+        customUpdate(items);
+      }
+      else {
+        customUpdate((value && entities.value.find(e => toId(e) === value)) || null);
+      }
+    }
+    else {
+      emit("update:modelValue", value);
+    }
+  };
+
+  watch(filters, (newValue, oldValue) => {
+    if (!_.isEqual(newValue, oldValue)) {
+      debouncedFetch();
+    }
+  });
+
+  onMounted((): void => {
+    customFetch();
+  });
+
+  return {
+    onUpdate
+  };
+}

package/models/rules.ts

@@ -64,4 +64,10 @@ export const TimeRules = {
 
 export const ToggleRules = {
     required: (message: string | undefined = undefined) => (value: boolean) => value || (message ?? $tr("ui.rules.required", "Required"))
+};
+
+export const TreeViewRules = {
+    required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | undefined = undefined) => (value: string[]) => { console.log(value); return (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.tree-view-min", "Must select at least {0} elements", min.toString())); },
+    max: (max: number, message: string | undefined = undefined) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.tree-view-max", "Must select at most {0} elements", max.toString()))
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.144",
+  "version": "0.0.146",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.144",
-    "@dative-gpi/foundation-shared-services": "0.0.144",
+    "@dative-gpi/foundation-shared-domain": "0.0.146",
+    "@dative-gpi/foundation-shared-services": "0.0.146",
     "@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": "e894b5045c2f95bea5635cc4eb3c17dd0934ff2e"
+  "gitHead": "b3b909100302b8a5efac8d887620fd8d9e01a8e6"
 }

package/styles/components/fs_button.scss

@@ -11,4 +11,9 @@
     &:has(.fs-button-load) {
         cursor: default !important;
     }
+
+    & > a, a:hover, a:visited, a:active {
+        color: inherit;
+        text-decoration: none;
+    }
 }

package/styles/components/fs_checkbox.scss

@@ -3,8 +3,7 @@
     color: var(--fs-checkbox-checkbox-color) !important;
 }
 
-.fs-checkbox-label,
-.fs-checkbox-label :not(.fs-checkbox) {
+.fs-checkbox-label {
     cursor: var(--fs-checkbox-cursor) !important;
     color: var(--fs-checkbox-color) !important;
     user-select: none;

package/styles/components/fs_radio.scss

@@ -3,8 +3,7 @@
     color: var(--fs-radio-radio-color) !important;
 }
 
-.fs-radio-label,
-.fs-radio-label :not(.fs-radio) {
+.fs-radio-label  {
     cursor: var(--fs-radio-cursor) !important;
     color: var(--fs-radio-color) !important;
     user-select: none;

package/styles/components/fs_select_field.scss

@@ -33,21 +33,15 @@
     color: var(--fs-select-field-color);
 }
 
-.v-overlay-container > .v-overlay > .v-select__content {
-    box-shadow: 0px 5px 8px 0px #00000029;
-    max-width: none !important;
-    border-radius: 4px;
-
-    & > .v-list {
-        @extend .fs-hide-y-scrollbar;
+.v-overlay-container > .v-overlay > .v-select__content > .v-list {
+    @extend .fs-hide-y-scrollbar;
 
-        background-color: var(--fs-select-field-background-color);
-        padding: 2px 8px 2px 16px;
-        border-radius: 4px;
+    background-color: var(--fs-select-field-background-color);
+    padding: 2px 8px 2px 16px;
+    border-radius: 4px;
 
-        & .v-list-item {
-            border-radius: 4px !important;
-            margin-top: 2px !important;
-        }
+    & .v-list-item {
+        border-radius: 4px !important;
+        margin-top: 2px !important;
     }
 }

package/styles/components/fs_text.scss

@@ -1,5 +1,5 @@
 .fs-text {
-    color: var(--fs-text-color);
+    color: var(--fs-text-color) !important;
 
     @extend .fs-span;
 }

package/styles/components/fs_tree_view_field.scss

@@ -0,0 +1,53 @@
+.fs-tree-view-field > .v-input__control > .v-field > .v-field__field > .v-field__input {
+    cursor: var(--fs-tree-view-field-cursor) !important;
+}
+
+.v-overlay__content > .v-treeview {
+    max-height: 310px !important;
+}
+
+.v-treeview.v-list {
+    @extend .fs-hide-y-scrollbar;
+
+    background-color: var(--fs-select-field-background-color);
+    padding: 2px 8px 2px 16px;
+    border-radius: 4px;
+
+    & .v-list-item {
+        border-radius: 4px !important;
+        margin-top: 2px;
+    }
+}
+
+.v-treeview-item:has(.v-list-item__prepend > .fs-tree-view-item-selected) > .v-list-item__overlay {
+    opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier)) !important;
+}
+
+.v-treeview-item:not(:has(.v-list-item__prepend > .fs-tree-view-item-selected)) > .v-list-item__overlay {
+    display: none;
+}
+
+.fs-dialog-menu {
+    .v-treeview.v-list {
+        display: flex;
+        flex-direction: column;
+        padding: 0px !important;
+        gap: 12px !important;
+    }
+
+    .v-treeview-item {
+        cursor: default;
+        padding-inline: 0px !important;
+        min-height: 20px !important;
+        padding: 0px !important;
+        margin: 0px !important;
+
+        & > .v-list-item__overlay {
+            display: none;
+        }
+
+        & > .v-ripple__container {
+            display: none;
+        }
+    }
+}

package/styles/components/index.scss

@@ -58,5 +58,6 @@
 @import "fs_timeslot_field.scss";
 @import "fs_tooltip.scss";
 @import "fs_translate_field.scss";
+@import "fs_tree_view_field.scss";
 @import "fs_window.scss";
 @import "fs_wrap_group.scss";

package/styles/globals/scrollbars.scss

@@ -12,7 +12,7 @@
 
 @include clickscreen {
   .fs-hide-x-scrollbar {
-    overflow-x: scroll;
+    overflow-x: scroll !important;
 
     &::-webkit-scrollbar {
       height: 8px;
@@ -28,7 +28,7 @@
   }
 
   .fs-hide-y-scrollbar {
-    overflow-y: scroll;
+    overflow-y: scroll !important;
 
     &::-webkit-scrollbar {
       width: 8px;