@dative-gpi/foundation-shared-components 1.0.189-update-fs-card → 1.0.190-feat-time-normalization

package/components/FSPlayButtons.vue

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

package/components/FSRouterLink.vue

@@ -1,9 +1,9 @@
 <template>
-  <component
-    :is="wrapperComponent"
-    v-bind="mergedProps"
-    @click="onClick"
-    @auxclick="onAuxClick"
+  <router-link
+    :to="$props.to"
+    @auxclick="handleRoutingEvent($event, $props.to)"
+    @click="handleRoutingEvent($event, $props.to)"
+    v-bind="$attrs"
   >
     <template
       v-for="(_, name) in $slots"
@@ -14,99 +14,29 @@
         v-bind="{ ...slotData }"
       />
     </template>
-  </component>
+  </router-link>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
-import { RouterLink, type RouteLocation } from "vue-router";
+import { defineComponent, type PropType } from "vue";
+import { 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 | 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"
+      type: Object as PropType<RouteLocation>,
+      required: true
     }
   },
-  setup(props, { attrs, slots }) {
+  setup() {
     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 {
-      wrapperComponent,
-      mergedProps,
-      slots,
-      onClick,
-      onAuxClick
+      handleRoutingEvent
     };
   }
 });
-</script>
+</script>

package/components/agenda/FSAgendaHorizontalEvent.vue

@@ -29,7 +29,7 @@
       />
     </template>
   </FSAgendaHorizontalEvent>
-  <FSCard
+  <FSClickable
     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"
     />
-  </FSCard>
+  </FSClickable>
 </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 FSCard from '../FSCard.vue';
+import FSClickable from '../FSClickable.vue';
 
 
 export default defineComponent({
   name: 'FSAgendaHorizontalEvent',
   components: {
-    FSCard
+    FSClickable
   },
   emits: ['click'],
   props: {

package/components/agenda/FSAgendaVerticalEvent.vue

@@ -28,7 +28,7 @@
       />
     </template>
   </FSAgendaVerticalEvent>
-  <FSCard
+  <FSClickable
     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"
     />
-  </FSCard>
+  </FSClickable>
 </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 FSCard from '../FSCard.vue';
+import FSClickable from '../FSClickable.vue';
 
 export default defineComponent({
   name: 'FSAgendaVerticalEvent',
   components: {
-    FSCard
+    FSClickable
   },
   emits: ['click'],
   props: {

package/components/deviceOrganisations/FSStatusRichCard.vue

@@ -1,9 +1,10 @@
 <template>
-  <FSCard
+  <component
     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"
@@ -49,7 +50,7 @@
         v-bind="{ color }"
       />
     </template>
-  </FSCard>
+  </component>
 </template>
 
 <script lang="ts">
@@ -58,6 +59,7 @@ 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";
@@ -66,6 +68,7 @@ import FSCol from "../FSCol.vue";
 export default defineComponent({
   name: "FSStatusRichCard",
   components: {
+    FSClickable,
     FSCard,
     FSIcon,
     FSText,
@@ -155,6 +158,8 @@ export default defineComponent({
     }));
 
     return {
+      FSClickable,
+      FSCard,
       color,
       style,
       title,

package/components/lists/FSFilterButton.vue

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

package/components/lists/FSHeaderButton.vue

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

package/components/tiles/FSTile.vue

@@ -1,26 +1,67 @@
 <template>
   <FSCol
     class="fs-tile"
-    :style="style"
-    :width="$props.width"
     :height="$props.height"
+    :width="$props.width"
   >
-    <FSCard
+    <FSClickable
+      v-if="($props.href || $props.to || $attrs.onClick)"
+      variant="background"
       class="fs-tile"
-      :variant="selectionState.variant"
-      :color="selectionState.color"
       padding="12px"
+      :href="$props.href"
       width="100%"
       height="100%"
       topRightPadding="1px"
       :to="$props.to"
-      :href="$props.href"
-      v-on="selectionState.listeners"
+      :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"
+      padding="12px"
+      :style="style"
+      width="100%"
+      height="100%"
+      topRightPadding="1px"
       v-bind="$attrs"
     >
       <slot />
       <template 
-        v-if="selectionState.showCheckbox"
+        v-if="$props.selectable"
         #top-right
       >
         <FSCard
@@ -33,7 +74,8 @@
           />
         </FSCard>
       </template>
-    </FSCard>
+    </FSCard>  
+    
     <div
       v-if="$props.leftColor"
       class="fs-tile-left"
@@ -54,15 +96,17 @@ 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 FSCard from "../FSCard.vue";
+import FSClickable from "../FSClickable.vue";
 import FSCheckbox from "../FSCheckbox.vue";
+import FSCard from "../FSCard.vue";
 
 export default defineComponent({
   name: "FSTile",
   inheritAttrs: false,
   components: {
-    FSCard,
-    FSCheckbox
+    FSClickable,
+    FSCheckbox,
+    FSCard
   },
   props: {
     to: {
@@ -117,7 +161,7 @@ export default defineComponent({
     },
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {
+  setup(props) {
     const { getGradients } = useColors();
 
     const style = computed((): StyleValue => {
@@ -133,28 +177,18 @@ export default defineComponent({
       return result;
     });
 
-    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
-      };
+    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;
     });
 
     return {
-      selectionState,
       ColorEnum,
+      variant,
+      color,
       style
     };
   }

package/models/index.ts

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

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.0.189-update-fs-card",
+  "version": "1.0.190-feat-time-normalization",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,8 +13,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.189-update-fs-card",
-    "@dative-gpi/foundation-shared-services": "1.0.189-update-fs-card"
+    "@dative-gpi/foundation-shared-domain": "1.0.190-feat-time-normalization",
+    "@dative-gpi/foundation-shared-services": "1.0.190-feat-time-normalization"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -38,5 +38,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "351173f80c72b2923965cffa08c34f551759f6c3"
+  "gitHead": "5b6a1e99713533f6c226ea9b02466101980da6c4"
 }

package/styles/components/fs_button.scss

@@ -1,15 +1,20 @@
 .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 {
-            filter: brightness(0.8) !important;
+            color: var(--fs-button-hover-color) !important;
             cursor: pointer !important;
         }
     }

package/styles/components/fs_card.scss

@@ -2,11 +2,11 @@
     border: var(--fs-card-border-size) var(--fs-card-border-style);
     border-radius: var(--fs-card-border-radius);
     padding: var(--fs-card-padding);
-    height: 100%;
-    width: 100%;
+    height: var(--fs-card-height);
+    width: var(--fs-card-width);
+    max-width: var(--fs-card-max-width);
     position: relative;
     display: flex;
-    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     
     border-color: var(--fs-card-border-color);
     color: var(--fs-card-color);
@@ -24,81 +24,10 @@
         background: var(--fs-card-background-color);
     }
 
-    &-load {
-        content: "";
-
-        & > *:not(.fs-card-load__spinner) {
-            opacity: 0;
-        }
-    }
-
-    &-clickable {
-        cursor: pointer;
-
-        &.fs-card-disabled {
-            cursor: default;
-        }
-
-        &:not(.fs-card-disabled):active:not(:has( .fs-stopclick:hover)) {
-            background-color: var(--fs-card-active-background-color) !important;
-            border-color: var(--fs-card-active-border-color) !important;
-            color: var(--fs-card-active-color) !important;
-
-            & .fs-card-clickable {
-                transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-                background-color: var(--fs-card-active-background-color);
-            }
-        }
-
-        @include clickscreen {
-            &:not(.fs-card-disabled):hover:not(:has( .fs-stopclick:hover)) {
-                background-color: var(--fs-card-hover-background-color) !important;
-                border-color: var(--fs-card-hover-border-color) !important;
-                color: var(--fs-card-hover-color) !important;
-
-                & .fs-card-clickable {
-                    transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-                    background-color: var(--fs-card-hover-background-color);
-                }
-            }
-            // Désactive le hover si un parent a .fs-card-load
-            .fs-card-load & {
-                pointer-events: none;
-            }
-        }
-    }
-
     .fs-card-top-right {
         position: absolute;
         line-height: normal;
         right: var(--fs-card-top-right-padding);
         top: var(--fs-card-top-right-padding);
     }
-}
-
-.fs-card-wrapper {
-    display: block;
-    position: relative;
-    padding: 0 !important;
-    height: var(--fs-card-height);
-    width: var(--fs-card-width);
-    max-width: var(--fs-card-max-width);
-    background: none;
-    border: none;
-    text-decoration: none;
-    box-sizing: border-box;
-}
-
-.fs-card-load__spinner {
-    cursor: default;
-    position: absolute !important;
-    height: 100% !important;
-    width: 100% !important;
-    left: 0;
-    top: 0;
-    
-    & > svg {
-        height: 24px !important;
-    }
-}
-
+}