@dative-gpi/foundation-shared-components 1.0.194 → 1.1.0

package/components/FSOptionsMenu.vue

@@ -41,12 +41,13 @@
             :scrollOutside="false"
             maxHeight="80dvh"
           >
-            <FSClickable
+            <FSCard
               v-for="(item, index) in $props.items"
               width="100%"
               padding="8px"
               height="40px"
               :key="index"
+              :color="ColorEnum.Light"
               :border="false"
               @click="onClickItem(item)"
             >
@@ -68,7 +69,7 @@
                   </FSText>
                 </FSRow>
               </slot>
-            </FSClickable>
+            </FSCard>
           </FSFadeOut>
         </FSCol>
       </slot>
@@ -81,7 +82,7 @@ import { defineComponent, ref, type PropType } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import { ColorEnum, type ColorBase } from '@dative-gpi/foundation-shared-components/models';
+import { CardVariants, ColorEnum, type ColorBase } from '@dative-gpi/foundation-shared-components/models';
 
 import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
 import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
@@ -90,7 +91,6 @@ import FSMenu from '@dative-gpi/foundation-shared-components/components/FSMenu.v
 import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
 import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
 import FSButton from '@dative-gpi/foundation-shared-components/components/FSButton.vue';
-import FSClickable from '@dative-gpi/foundation-shared-components/components/FSClickable.vue';
 
 export default defineComponent({
   name: "FSInformationsMenu",
@@ -101,8 +101,7 @@ export default defineComponent({
     FSText,
     FSButton,
     FSCol,
-    FSIcon,
-    FSClickable
+    FSIcon
   },
   props: {
     items: {
@@ -158,6 +157,7 @@ export default defineComponent({
       ColorEnum,
       modelValue,
       lightColors,
+      CardVariants,
       onClickItem
     };
   }

package/components/FSPlayButtons.vue

@@ -3,7 +3,7 @@
     width="hug"
     gap="4px"
   >
-    <FSClickable
+    <FSCard
       variant="full"
       :color="ColorEnum.Light"
       borderRadius="50%"
@@ -14,8 +14,8 @@
         size="18px"
         icon="mdi-skip-backward"
       />
-    </FSClickable>
-    <FSClickable
+    </FSCard>
+    <FSCard
       variant="full"
       :color="ColorEnum.Light"
       borderRadius="50%"
@@ -26,8 +26,8 @@
         size="18px"
         :icon="$props.modelValue ? 'mdi-pause' : 'mdi-play'"
       />
-    </FSClickable>
-    <FSClickable
+    </FSCard>
+    <FSCard
       variant="full"
       :color="ColorEnum.Light"
       borderRadius="50%"
@@ -38,7 +38,7 @@
         size="18px"
         icon="mdi-skip-forward"
       />
-    </FSClickable>
+    </FSCard>
   </FSRow>
 </template>
 
@@ -48,12 +48,12 @@ import { defineComponent } from "vue";
 import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
 
 import FSIcon from '@dative-gpi/foundation-shared-components/components/FSIcon.vue';
-import FSClickable from '@dative-gpi/foundation-shared-components/components/FSClickable.vue';
+import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
 
 export default defineComponent({
   name: "FSPlayButtons",
   components: {
-    FSClickable,
+    FSCard,
     FSIcon
   },
   props: {

package/components/FSRouterLink.vue

@@ -1,9 +1,9 @@
 <template>
-  <router-link
-    :to="$props.to"
-    @auxclick="handleRoutingEvent($event, $props.to)"
-    @click="handleRoutingEvent($event, $props.to)"
-    v-bind="$attrs"
+  <component
+    :is="wrapperComponent"
+    v-bind="mergedProps"
+    @click="onClick"
+    @auxclick="onAuxClick"
   >
     <template
       v-for="(_, name) in $slots"
@@ -14,29 +14,99 @@
         v-bind="{ ...slotData }"
       />
     </template>
-  </router-link>
+  </component>
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
-import { type RouteLocation } from "vue-router";
-
+import { computed, defineComponent, type PropType } from "vue";
+import { RouterLink, type RouteLocation } from "vue-router";
 import { useRouting } from "@dative-gpi/foundation-shared-services/composables";
 
 export default defineComponent({
   name: "FSRouterLink",
   props: {
     to: {
-      type: Object as PropType<RouteLocation>,
-      required: true
+      type: Object as PropType<RouteLocation | null>,
+      default: null
+    },
+    href: {
+      type: String as PropType<string | null>,
+      default: null
+    },
+    passive: {
+      type: Boolean as PropType<boolean | null>,
+      default: null
+    },
+    type: {
+      type: String as PropType<"button" | "submit" | "reset">,
+      default: "button"
+    },
+    defaultWrapper: {
+      type: String as PropType<"div" | "a" | "button">,
+      default: "button"
+    },
+    passiveWrapper: {
+      type: String as PropType<"div" | "a" | "button">,
+      default: "div"
     }
   },
-  setup() {
+  setup(props, { attrs, slots }) {
     const { handleRoutingEvent } = useRouting();
 
+    const actualPassive = computed(() => {
+      if (props.passive !== null) {return props.passive;}
+      return !props.to && !props.href && !attrs.onClick;
+    });
+
+    const wrapperComponent = computed(() => {
+      if (actualPassive.value) {
+        return props.passiveWrapper;
+      }
+      if (props.href) {
+        return "a";
+      }
+      if (props.to) {
+        return RouterLink;
+      }
+      return props.defaultWrapper;
+    });
+
+    const componentProps = computed(() => {
+      if (wrapperComponent.value === RouterLink) {
+        return { to: props.to };
+      } else if (wrapperComponent.value === "a") {
+        return { href: props.href };
+      } else if (wrapperComponent.value === "button") {
+        return { type: props.type };
+      } else {
+        return {};
+      }
+    });
+
+    const mergedProps = computed(() => ({
+      ...componentProps.value,
+      ...attrs
+    }));
+
+    const onClick = (event: MouseEvent) => {
+      if (props.to) {
+        handleRoutingEvent(event, props.to);
+      }
+    };
+
+    const onAuxClick = (event: MouseEvent) => {
+      if (props.to) {
+        handleRoutingEvent(event, props.to);
+      }
+    };
+
     return {
-      handleRoutingEvent
+      wrapperComponent,
+      mergedProps,
+      slots,
+      onClick,
+      onAuxClick
     };
   }
 });
-</script>
+</script>

package/components/FSSlideGroup.vue

@@ -2,7 +2,7 @@
   <v-slide-group
     class="fs-slide-group"
     ref="slideGroupRef"
-    :showArrows="true"
+    :showArrows="$props.showArrows"
     :id="elementId"
     :style="style"
     v-bind="$attrs"
@@ -83,6 +83,10 @@ export default defineComponent({
       type: Number,
       required: false,
       default: 250
+    },
+    showArrows: {
+      type: [Boolean, String] as PropType<boolean | string>,
+      default: true
     }
   },
   setup(props) {

package/components/agenda/FSAgendaHorizontalEvent.vue

@@ -29,7 +29,7 @@
       />
     </template>
   </FSAgendaHorizontalEvent>
-  <FSClickable
+  <FSCard
     v-if="$props.variant !== 'current' || $props.dayStart < $props.now"
     :class="`fs-agenda-event fs-agenda-event-${$props.variant}`"
     :variant="$props.variant === 'current' ? 'full' : 'standard'"
@@ -50,7 +50,7 @@
       :variant="$props.variant"
       :width="width"
     />
-  </FSClickable>
+  </FSCard>
 </template>
 
 <script lang="ts">
@@ -58,13 +58,13 @@ import { defineComponent, computed, type StyleValue, type PropType } from 'vue';
 
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
-import FSClickable from '../FSClickable.vue';
+import FSCard from '../FSCard.vue';
 
 
 export default defineComponent({
   name: 'FSAgendaHorizontalEvent',
   components: {
-    FSClickable
+    FSCard
   },
   emits: ['click'],
   props: {

package/components/agenda/FSAgendaVerticalEvent.vue

@@ -28,7 +28,7 @@
       />
     </template>
   </FSAgendaVerticalEvent>
-  <FSClickable
+  <FSCard
     v-if="$props.variant !== 'current' || $props.dayStart < $props.now"
     :class="`fs-agenda-event fs-agenda-vertical-event fs-agenda-event-${$props.variant}`"
     :variant="$props.variant === 'current' ? 'full' : 'standard'"
@@ -48,7 +48,7 @@
       :timeEnd="epochToShortTimeOnlyFormat($props.end)"
       :variant="$props.variant"
     />
-  </FSClickable>
+  </FSCard>
 </template>
 
 <script lang="ts">
@@ -56,12 +56,12 @@ import { defineComponent, computed, type StyleValue, type PropType } from 'vue';
 
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
-import FSClickable from '../FSClickable.vue';
+import FSCard from '../FSCard.vue';
 
 export default defineComponent({
   name: 'FSAgendaVerticalEvent',
   components: {
-    FSClickable
+    FSCard
   },
   emits: ['click'],
   props: {

package/components/deviceOrganisations/FSStatusRichCard.vue

@@ -1,10 +1,9 @@
 <template>
-  <component
+  <FSCard
     v-if="$props.modelStatus"
     class="fs-status-rich-card"
     topRightPadding="2px"
     variant="standard"
-    :is="$attrs.onClick ? FSClickable : FSCard"
     :padding="$props.padding"
     :height="$props.height"
     :width="$props.width"
@@ -50,7 +49,7 @@
         v-bind="{ color }"
       />
     </template>
-  </component>
+  </FSCard>
 </template>
 
 <script lang="ts">
@@ -59,7 +58,6 @@ import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 import { ColorEnum, type FSDeviceStatusGroup, type FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import FSClickable from "../FSClickable.vue";
 import FSCard from "../FSCard.vue";
 import FSIcon from "../FSChip.vue";
 import FSText from "../FSText.vue";
@@ -68,7 +66,6 @@ import FSCol from "../FSCol.vue";
 export default defineComponent({
   name: "FSStatusRichCard",
   components: {
-    FSClickable,
     FSCard,
     FSIcon,
     FSText,
@@ -158,8 +155,6 @@ export default defineComponent({
     }));
 
     return {
-      FSClickable,
-      FSCard,
       color,
       style,
       title,

package/components/lists/FSFilterButton.vue

@@ -40,6 +40,7 @@
             :height="['30px', '24px']"
             :variant="getAllVariant()"
             :color="$props.color"
+            align="center-left"
             :clickable="true"
             @click="onToggleAll"
           />
@@ -63,7 +64,9 @@
               :height="['30px', '24px']"
               :color="$props.color"
               :label="filter.text"
+              align="center-left"
               :clickable="true"
+              :border="false"
               :key="index"
               @click="() => onToggle(filter)"
             >
@@ -85,7 +88,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref } from "vue";
 
-import { type ColorBase, ColorEnum, type FSDataTableColumn, type FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
+import { type CardVariant, CardVariants, type ColorBase, ColorEnum, type FSDataTableColumn, type FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
 import FSSearchField from "../fields/FSSearchField.vue";
@@ -153,21 +156,21 @@ export default defineComponent({
       return props.filters;
     });
 
-    const getVariant = (filter: FSDataTableFilter): "standard" | "full" | "borderless" => {
+    const getVariant = (filter: FSDataTableFilter): CardVariant => {
       if (singlePick.value || props.filters.filter(f => f.hidden).length > 0) {
         if (filter.hidden) {
-          return "borderless";
+          return CardVariants.Background;
         }
-        return "full";
+        return CardVariants.Full;
       }
-      return "borderless";
+      return CardVariants.Background;
     };
 
-    const getAllVariant = (): "standard" | "full" => {
+    const getAllVariant = (): CardVariant => {
       if (singlePick.value || props.filters.filter(f => f.hidden).length > 0) {
-        return "standard";
+        return CardVariants.Background;
       }
-      return "full";
+      return CardVariants.Full;
     };
 
     const onToggle = (filter: FSDataTableFilter): void => {

package/components/lists/FSHeaderButton.vue

@@ -32,7 +32,8 @@
           <FSChip
             prependIcon="mdi-eye-off-outline"
             class="fs-header-button-chip"
-            variant="borderless"
+            variant="background"
+            :border="false"
             :label="$tr('data-table.hide-column', 'Hide column')"
             :height="[30, 24]"
             :clickable="true"
@@ -41,7 +42,8 @@
           <FSChip
             v-if="!$props.first"
             class="fs-header-button-chip"
-            variant="borderless"
+            variant="background"
+            :border="false"
             prependIcon="mdi-chevron-left"
             :label="$tr('data-table.move-left', 'Move to the left')"
             :height="[30, 24]"
@@ -51,7 +53,8 @@
           <FSChip
             v-if="!$props.last"
             class="fs-header-button-chip"
-            variant="borderless"
+            variant="background"
+            :border="false"
             prependIcon="mdi-chevron-right"
             :label="$tr('data-table.move-right', 'Move to the right')"
             :height="[30, 24]"

package/components/tiles/FSTile.vue

@@ -1,67 +1,26 @@
 <template>
   <FSCol
     class="fs-tile"
-    :height="$props.height"
+    :style="style"
     :width="$props.width"
+    :height="$props.height"
   >
-    <FSClickable
-      v-if="($props.href || $props.to || $attrs.onClick)"
-      variant="background"
-      class="fs-tile"
-      padding="12px"
-      :href="$props.href"
-      width="100%"
-      height="100%"
-      topRightPadding="1px"
-      :to="$props.to"
-      :style="style"
-      v-bind="$attrs"
-    >
-      <slot />
-      <template 
-        v-if="$props.selectable"
-        #top-right
-      >
-        <FSCard
-          padding="8px"
-          :border="false"
-        >
-          <FSCheckbox
-            :modelValue="$props.modelValue"
-            @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-          />
-        </FSCard>
-      </template>
-    </FSClickable>
-
-    <FSClickable
-      v-else-if="$props.selectable && $props.singleSelect"
-      padding="12px"
-      :variant="variant"
-      :color="color"
-      :style="style"
-      width="100%"
-      height="100%"
-      @click="() => $emit('update:modelValue', !$props.modelValue)"
-      v-bind="$attrs"
-    >
-      <slot />
-    </FSClickable>
-    
     <FSCard
-      v-else
-      variant="background"
       class="fs-tile"
+      :variant="selectionState.variant"
+      :color="selectionState.color"
       padding="12px"
-      :style="style"
       width="100%"
       height="100%"
       topRightPadding="1px"
+      :to="$props.to"
+      :href="$props.href"
+      v-on="selectionState.listeners"
       v-bind="$attrs"
     >
       <slot />
       <template 
-        v-if="$props.selectable"
+        v-if="selectionState.showCheckbox"
         #top-right
       >
         <FSCard
@@ -74,8 +33,7 @@
           />
         </FSCard>
       </template>
-    </FSCard>  
-    
+    </FSCard>
     <div
       v-if="$props.leftColor"
       class="fs-tile-left"
@@ -96,17 +54,15 @@ import { type RouteLocation } from "vue-router";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-components/models";
 
-import FSClickable from "../FSClickable.vue";
-import FSCheckbox from "../FSCheckbox.vue";
 import FSCard from "../FSCard.vue";
+import FSCheckbox from "../FSCheckbox.vue";
 
 export default defineComponent({
   name: "FSTile",
   inheritAttrs: false,
   components: {
-    FSClickable,
-    FSCheckbox,
-    FSCard
+    FSCard,
+    FSCheckbox
   },
   props: {
     to: {
@@ -161,7 +117,7 @@ export default defineComponent({
     },
   },
   emits: ["update:modelValue"],
-  setup(props) {
+  setup(props, { emit }) {
     const { getGradients } = useColors();
 
     const style = computed((): StyleValue => {
@@ -177,18 +133,28 @@ export default defineComponent({
       return result;
     });
 
-    const variant = computed((): "standard" | "background" => {
-      return (props.singleSelect && props.modelValue) ? "standard" : "background";
-    });
-
-    const color = computed((): ColorBase => {
-      return (props.singleSelect && props.modelValue) ? props.activeColor : ColorEnum.Background;
+    const selectionState = computed(() => {
+      const isSingleSelect = props.selectable && props.singleSelect && !props.href && !props.to;
+      const showCheckbox = props.selectable && !isSingleSelect;
+      const variant: "standard" | "background" = (isSingleSelect && props.modelValue) ? "standard" : "background";
+      const color: ColorBase = (isSingleSelect && props.modelValue) ? props.activeColor : ColorEnum.Background;
+      const onClick = () => { emit("update:modelValue", !props.modelValue); };
+      const listeners: Record<string, (...args: any[]) => void> = {};
+      if (isSingleSelect) {
+        listeners.click = onClick;
+      }
+      return {
+        isSingleSelect,
+        showCheckbox,
+        variant,
+        color,
+        listeners
+      };
     });
 
     return {
+      selectionState,
       ColorEnum,
-      variant,
-      color,
       style
     };
   }

package/models/index.ts

@@ -12,4 +12,5 @@ export * from "./modelStatuses";
 export * from "./rules";
 export * from "./tables";
 export * from "./toggleSets";
-export * from "./translations";
+export * from "./variants";
+export * from "./translations";

package/models/variants.ts

@@ -0,0 +1,7 @@
+export type CardVariant = "background" | "standard" | "full" | "gradient";
+export enum CardVariants {
+  Background = "background",
+  Standard = "standard",
+  Full = "full",
+  Gradient = "gradient"
+}

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.0.194",
+  "version": "1.1.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,8 +13,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.194",
-    "@dative-gpi/foundation-shared-services": "1.0.194"
+    "@dative-gpi/foundation-shared-domain": "1.1.0",
+    "@dative-gpi/foundation-shared-services": "1.1.0"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -38,5 +38,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "def5664a8d5b97efeba050d6c166f1a3b9fb33e8"
+  "gitHead": "87757abf5add0aa83bd9a3e8171b7d4ea9862ea2"
 }

package/styles/components/fs_button.scss

@@ -1,20 +1,15 @@
 .fs-button-icon {
+    text-decoration: none;
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    color: var(--fs-button-color) !important;
 
     &.fs-button-disabled,
     &:has(.fs-button-load) {
         cursor: default !important;
     }
 
-    & > a, a:hover, a:visited, a:active {
-        color: inherit;
-        text-decoration: none;
-    }
-
     @include clickscreen {
         &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
-            color: var(--fs-button-hover-color) !important;
+            filter: brightness(0.8) !important;
             cursor: pointer !important;
         }
     }