@dative-gpi/foundation-shared-components 0.1.120 → 1.0.0

package/components/FSAccordion.vue

@@ -3,7 +3,8 @@
     variant="accordion"
   >
     <template
-      v-for="component in getChildren()"
+      v-for="(component, index) in getChildren()"
+      :key="index"
     >
       <component
         :is="component"

package/components/FSAccordionPanel.vue

@@ -22,6 +22,7 @@
           </FSIcon>
           <FSSpan
             class="fs-accordion-panel-title"
+            :lineClamp="$props.lineClampTitle"
           >
             {{ $props.title }}
           </FSSpan>
@@ -35,22 +36,29 @@
         name="content"
       >
         <FSText
+          v-if="$props.variant === 'standard'"
           :lineClamp="$props.lineClampContent"
         >
           {{ $props.content }}
         </FSText>
+        <FSRichTextField
+          v-else-if="$props.variant === 'rich-text'"
+          variant="readonly"
+          :modelValue="$props.content"
+        />
       </slot>
     </template>
   </v-expansion-panel>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
+import FSRichTextField from "./fields/FSRichTextField.vue";
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
 import FSText from "./FSText.vue";
@@ -59,6 +67,7 @@ import FSRow from "./FSRow.vue";
 export default defineComponent({
   name: "FSAccordionPanel",
   components: {
+    FSRichTextField,
     FSIcon,
     FSSpan,
     FSText,
@@ -90,6 +99,11 @@ export default defineComponent({
       required: false,
       default: "16px"
     },
+    lineClampTitle: {
+      type: Number,
+      required: false,
+      default: 2
+    },
     lineClampContent: {
       type: Number,
       required: false,
@@ -109,6 +123,11 @@ export default defineComponent({
       type: String,
       required: false,
       default: ""
+    },
+    variant: {
+      type: String as PropType<"standard" | "rich-text">,
+      required: false,
+      default: "standard"
     }
   },
   setup(props) {

package/components/FSBadge.vue

@@ -5,7 +5,9 @@
     :color="$props.color"
     :bordered="true"
   >
-    <template v-slot:default>
+    <template
+      v-slot:default
+    >
       <slot />
     </template>
   </v-badge>
@@ -16,9 +18,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSBadge",

package/components/FSBreadcrumbs.vue

@@ -27,9 +27,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, Ref, ref } from "vue";
+import type { PropType, Ref} from "vue";
+import { defineComponent, ref } from "vue";
 
-import { ColorEnum, FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
+import type { FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSpan from "./FSSpan.vue";

package/components/FSButton.vue

@@ -25,7 +25,7 @@
       >
         <FSIcon
           v-if="$props.prependIcon || $props.icon"
-          size="l"
+          :size="$props.iconSize"
         >
           {{ $props.prependIcon ?? $props.icon }}
         </FSIcon>
@@ -45,7 +45,7 @@
       >
         <FSIcon
           v-if="$props.appendIcon"
-          size="l"
+          :size="$props.iconSize"
         >
           {{ $props.appendIcon }}
         </FSIcon>
@@ -79,7 +79,7 @@
       >
         <FSIcon
           v-if="$props.icon"
-          size="l"
+          :size="$props.iconSize"
         >
           {{ $props.icon }}
         </FSIcon>
@@ -98,7 +98,7 @@
       >
         <FSIcon
           v-if="$props.icon"
-          size="l"
+          :size="$props.iconSize"
         >
           {{ $props.icon }}
         </FSIcon>
@@ -114,7 +114,7 @@
     >
       <FSIcon
         v-if="$props.icon"
-        size="l"
+        :size="$props.iconSize"
       >
         {{ $props.icon }}
       </FSIcon>
@@ -128,11 +128,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
-import { RouteLocation } from "vue-router";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
+import type { RouteLocation } from "vue-router";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSClickable from "./FSClickable.vue";
 import FSSpan from "./FSSpan.vue";
@@ -178,6 +180,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    iconSize: {
+      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
+      required: false,
+      default: "l"
+    },
     variant: {
       type: String as PropType<"standard" | "full" | "icon">,
       required: false,

package/components/FSCalendar.vue

@@ -13,6 +13,7 @@
     </FSRow>
     <FSCol
       class="fs-calendar"
+      :height="['380px', '375px']"
       :style="style"
     >
       <FSRow
@@ -64,10 +65,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, ref } from "vue";
 
 import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSButton from "./FSButton.vue";

package/components/FSCalendarTwin.vue

@@ -14,8 +14,9 @@
     </FSRow>
     <FSRow
       class="fs-calendar-twin"
-      align="center-center"
+      align="top-center"
       width="hug"
+      :height="['380px', '375px']"
       :style="style"
     >
       <FSCol
@@ -111,10 +112,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, onMounted, ref } from "vue";
 
 import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSButton from "./FSButton.vue";

package/components/FSCard.vue

@@ -34,9 +34,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 

package/components/FSCardPlaceholder.vue

@@ -0,0 +1,80 @@
+<template>
+  <FSClickable
+    borderStyle="dashed"
+    padding="24px"
+    :height="$props.height"
+    :width="$props.width"
+    :border="true"
+    @click="$emit('click')"
+    v-bind="$attrs"
+  >
+    <FSRow
+      align="center-center"
+    >
+      <FSIcon
+        v-if="$props.icon"
+        :color="ColorEnum.Light"
+        variant="dark"
+      >
+        {{ $props.icon }}
+      </FSIcon>
+      <FSText
+        v-if="$props.label"
+        :color="ColorEnum.Light"
+        variant="dark"
+      >
+        {{ $props.label }}
+      </FSText>
+    </FSRow>
+  </FSClickable>
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "../models";
+
+import FSClickable from "./FSClickable.vue";
+import FSIcon from "./FSIcon.vue";
+import FSText from "./FSText.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSCardPlaceholder",
+  components: {
+    FSClickable,
+    FSIcon,
+    FSText,
+    FSRow
+  },
+  props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fit-content"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "100%"
+    },
+    icon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    }
+  },
+  emits: ["click"],
+  setup() {
+    return {
+      ColorEnum
+    };
+  }
+});
+</script>

package/components/FSCheckbox.vue

@@ -10,13 +10,13 @@
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
       @click.prevent.stop="onToggle"
-      @blur="blurred = true"
       v-bind="$attrs"
     >
       <template
         #input
       >
         <FSRow
+          class="fs-checkbox-label"
           align="center-left"
           width="hug"
           :style="style"
@@ -28,10 +28,12 @@
           >
             {{ icon }}
           </FSIcon>
-          <slot>
+          <slot
+            name="label"
+            v-bind="{ font }"
+          >
             <FSSpan
               v-if="$props.label"
-              class="fs-checkbox-label"
               :style="style"
               :font="font"
             >
@@ -57,10 +59,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
@@ -119,7 +123,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
@@ -165,7 +169,6 @@ export default defineComponent({
     return {
       validateOn,
       messages,
-      blurred,
       style,
       icon,
       font,

package/components/FSChip.vue

@@ -44,9 +44,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 

package/components/FSClickable.vue

@@ -123,10 +123,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
-import { RouteLocation } from "vue-router";
+import type { PropType} from "vue";
+import { computed, defineComponent, ref } from "vue";
+import type { RouteLocation } from "vue-router";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 

package/components/FSClock.vue

@@ -52,9 +52,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
@@ -106,8 +106,8 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const innerHours = ref(props.modelValue ? Math.floor(props.modelValue / (60 * 60 * 1000)) : 0);
-    const innerMinutes = ref(props.modelValue ? Math.floor((props.modelValue % (60 * 60 * 1000)) / (60 * 1000)) : 0);
+    const innerHours = ref(0);
+    const innerMinutes = ref(0);
 
     const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
@@ -146,6 +146,20 @@ export default defineComponent({
       innerMinutes.value = number;
     };
 
+    const reset = (): void => {
+      innerHours.value = props.modelValue ? Math.floor(props.modelValue / (60 * 60 * 1000)) : 0;
+      innerMinutes.value = props.modelValue ? Math.floor((props.modelValue % (60 * 60 * 1000)) / (60 * 1000)) : 0;
+    };
+
+    watch(() => props.modelValue, () => {
+      if (
+        innerHours.value !== (props.modelValue ? Math.floor(props.modelValue / (60 * 60 * 1000)) : 0) ||
+        innerMinutes.value !== (props.modelValue ? Math.floor((props.modelValue % (60 * 60 * 1000)) / (60 * 1000)) : 0)
+      ) {
+        reset();
+      }
+    }, { immediate: true });
+
     watch([innerHours, innerMinutes], () => {
       emit("update:modelValue", (innerHours.value * 60 * 60 * 1000) + (innerMinutes.value * 60 * 1000));
     });

package/components/FSCol.vue

@@ -9,7 +9,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
@@ -40,14 +41,20 @@ export default defineComponent({
       type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
       required: false,
       default: "top-left"
+    },
+    overflow: {
+      type: String as PropType<"visible" | "hidden" | "scroll" | "auto" | "inherit" | "initial" | "unset">,
+      required: false,
+      default: "visible"
     }
   },
   setup(props) {
     const style = computed((): { [key: string] : string | null | undefined } => ({
-      "--fs-col-padding": sizeToVar(props.padding),
-      "--fs-col-gap"    : sizeToVar(props.gap),
-      "--fs-col-width"  : sizeToVar(props.width),
-      "--fs-col-height" : sizeToVar(props.height)
+      "--fs-col-overflow": props.overflow,
+      "--fs-col-padding" : sizeToVar(props.padding),
+      "--fs-col-gap"     : sizeToVar(props.gap),
+      "--fs-col-width"   : sizeToVar(props.width),
+      "--fs-col-height"  : sizeToVar(props.height)
     }));
 
     const classes = computed((): string[] => {

package/components/FSColor.vue

@@ -12,9 +12,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSCard from "./FSCard.vue";

package/components/FSColorIcon.vue

@@ -16,13 +16,15 @@
         <slot />
       </FSIcon>
     </FSRow>  
-</FSColor>
+  </FSColor>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSColor from "./FSColor.vue";