@dative-gpi/foundation-shared-components 1.0.178 → 1.0.179-fsdialogmulform

package/components/FSDialogMultiFormBody.vue

@@ -3,10 +3,45 @@
     gap="24px"
   >
     <FSPagination
+      v-if="$props.mode === 'pagination'"
       width="calc(100% - 16px)"
       :pages="$props.steps"
       :modelValue="currentStep - 1"
     />
+    <FSTabs
+      v-else-if="$props.mode === 'tabs'"
+      :tab="currentStep - 1"
+      :color="$props.tabsColor"
+      @update:tab="(val) => currentStep = val + 1"
+    >
+      <FSTab
+        v-for="(step, index) in $props.steps"
+        :key="index"
+      >
+        <slot
+          :name="`tab-${index + 1}`"
+        >
+          <FSRow>
+            <FSIcon
+              v-if="hasSlot(`tab-${index + 1}-icon`)"
+            >
+              <slot
+                :name="`tab-${index + 1}-icon`"
+              />
+            </FSIcon>
+            <FSSpan
+              :font="index + 1 === currentStep ? 'text-button' : 'text-body'"
+            >
+              <slot
+                :name="`tab-${index + 1}-label`"
+              >
+                {{ $tr('ui.common.step-number', 'Step {0}', step) }}
+              </slot>
+            </FSSpan>
+          </FSRow>
+        </slot>
+      </FSTab>
+    </FSTabs>
     <FSWindow
       width="100%"
       :modelValue="currentStep - 1"
@@ -78,6 +113,11 @@ import FSButton from "./FSButton.vue";
 import FSForm from "./FSForm.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
+import FSSpan from "./FSSpan.vue";
+import FSTabs from "./FSTabs.vue";
+import FSTab from "./FSTab.vue";
+import FSIcon from "./FSIcon.vue";
+import FSWindow from "./FSWindow.vue";
 
 export default defineComponent({
   name: "FSDialogMultiFormBody",
@@ -87,7 +127,12 @@ export default defineComponent({
     FSButton,
     FSForm,
     FSCol,
-    FSRow
+    FSRow,
+    FSSpan,
+    FSTabs,
+    FSTab,
+    FSIcon,
+    FSWindow
   },
   props: {
     subtitle: {
@@ -178,10 +223,20 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    }
+    },
+    mode: {
+      type: String as PropType<"pagination" | "tabs">,
+      required: false,
+      default: "pagination"
+    },
+    tabsColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
   },
   emits: ["click:cancelButton", "click:submitButton"],
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
@@ -189,6 +244,8 @@ export default defineComponent({
     const valid = ref(false);
     const valids = ref(Array.from({ length: props.steps }, () => false));
 
+    const hasSlot = (name: string) => !!slots[name];
+
     const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
@@ -246,6 +303,7 @@ export default defineComponent({
       maxHeight,
       valids,
       valid,
+      hasSlot,
       onPrevious,
       onSubmit
     };

package/components/FSTab.vue

@@ -18,7 +18,9 @@
             {{ $props.prependIcon }}
           </FSIcon>
         </slot>
-        <slot>
+        <slot
+          name="label"
+        >
           <FSSpan
             v-if="$props.label"
             font="text-button"

package/components/fields/periodicField/FSPeriodicField.vue

@@ -4,7 +4,7 @@
     :wrap="false"
   >
     <FSRadioGroup
-      :values="availablePeriods"
+      :values="availablePeriod"
       :disabled="disabled"
       v-model="selectedPeriod"
     />
@@ -18,25 +18,25 @@
         :vertical="true"
       />
       <FSPeriodicDailyField
-        v-if="selectedPeriod === CronPeriod.Daily"
+        v-if="selectedPeriod === 'daily'"
         :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
       />
       <FSPeriodicWeeklyField
-        v-else-if="selectedPeriod === CronPeriod.Weekly"
+        v-else-if="selectedPeriod === 'weekly'"
         :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
       />
       <FSPeriodicMonthlyField
-        v-else-if="selectedPeriod === CronPeriod.Monthly"
+        v-else-if="selectedPeriod === 'monthly'"
         :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
       />
       <FSPeriodicYearlyField
-        v-else-if="selectedPeriod === CronPeriod.Yearly"
+        v-else-if="selectedPeriod === 'yearly'"
         :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
@@ -48,8 +48,8 @@
 <script lang="ts">
 import { ref, defineComponent, type PropType, watch } from "vue";
 
-import { CronPeriod } from "@dative-gpi/foundation-shared-domain/enums";
-import { availablePeriods, getCronPeriod } from "@dative-gpi/foundation-shared-components/tools";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
+import { getCronPeriod } from "@dative-gpi/foundation-shared-components/tools";
 
 import FSPeriodicMonthlyField from "./FSPeriodicMonthlyField.vue";
 import FSPeriodicWeeklyField from "./FSPeriodicWeeklyField.vue";
@@ -59,7 +59,6 @@ import FSRadioGroup from "../../FSRadioGroup.vue";
 import FSDivider from "../../FSDivider.vue";
 import FSRow from "../../FSRow.vue";
 
-
 export default defineComponent({
   name: "FSPeriodicField",
   components: {
@@ -84,14 +83,22 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { $tr } = useTranslationsProvider();
+
+    const availablePeriod = [
+      { label: $tr("ui.common.daily", "Daily")    , value: "daily"  , item: { default : "0 12 */1 * *"} },
+      { label: $tr("ui.common.weekly", "Weekly")  , value: "weekly" , item: { default : "0 12 * * 1"} },
+      { label: $tr("ui.common.monthly", "Monthly"), value: "monthly", item: { default : "0 12 1 * *"} },
+      { label: $tr("ui.common.yearly", "Yearly")  , value: "yearly" , item: { default : "0 12 1 1 *"} }
+    ];
     
-    const selectedPeriod = ref(CronPeriod.Daily);
+    const selectedPeriod = ref("daily");
 
     watch(() => selectedPeriod.value, () => {
-      if (getCronPeriod(props.modelValue).value == selectedPeriod.value) {
+      if (getCronPeriod(props.modelValue) === selectedPeriod.value) {
         return;
       }
-      const period = availablePeriods.find((item) => item.value == selectedPeriod.value);
+      const period = availablePeriod.find((item) => item.value === selectedPeriod.value);
       if (!period) {
         return;
       }
@@ -99,13 +106,12 @@ export default defineComponent({
     });
 
     watch(() => props.modelValue, () => {
-      selectedPeriod.value = getCronPeriod(props.modelValue).value;
+      selectedPeriod.value = getCronPeriod(props.modelValue);
     }, { immediate: true });
 
     return {
-      availablePeriods,
-      selectedPeriod,
-      CronPeriod
+      availablePeriod,
+      selectedPeriod
     };
   }
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.178",
+  "version": "1.0.179-fsdialogmulform",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.178",
-    "@dative-gpi/foundation-shared-services": "1.0.178"
+    "@dative-gpi/foundation-shared-domain": "1.0.179-fsdialogmulform",
+    "@dative-gpi/foundation-shared-services": "1.0.179-fsdialogmulform"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "231d210bbd4400f3a7c3f8efb35384c6bfc6d2cd"
+  "gitHead": "8571f4f0c114a518e8aba31a0777a9de4afad316"
 }

package/tools/index.ts

@@ -1,5 +1,4 @@
 export * from "./alertsTools";
 export * from "./chartsTools";
-export * from "./cronTools";
 export * from "./reportsTools";
 export * from "./timeRangeTools";

package/tools/timeRangeTools.ts

@@ -122,4 +122,18 @@ export const dayLabel = (day: Days | number): string => {
     default:
       return $tr("ui.common.all-days", "All days");
   }
-}
+}
+
+export const getCronPeriod = (value: string) => {
+  const cronArray = value.split(" ");
+  if (cronArray[3] !== "*") {
+    return $tr("ui.common.yearly", "Yearly");
+  }
+  else if (!cronArray[2].includes("*") || cronArray[2].includes("-")) {
+    return $tr("ui.common.monthly", "Monthly");
+  }
+  else if (cronArray[4] !== "*") {
+    return $tr("ui.common.weekly", "Weekly");
+  }
+  return $tr("ui.common.daily", "Daily");
+};

package/components/timelines/FSTimeline.vue

@@ -1,16 +0,0 @@
-<template>
-  <v-timeline
-    v-bind="$attrs"
-  >
-    <slot/>
-  </v-timeline>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "FSTimeline",
-  inheritAttrs: false
-});
-</script>

package/components/timelines/FSTimelineItem.vue

@@ -1,29 +0,0 @@
-<template>
-  <v-timeline-item
-    v-bind="$attrs"
-  >
-    <template
-      v-slot:opposite
-    >
-      <slot
-        name="opposite"
-      />
-    </template>
-    <template
-      v-slot:icon
-    >
-      <slot
-        name="icon"
-      />
-    </template>
-    <slot/>
-  </v-timeline-item>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "FSTimelineItem",
-  inheritAttrs: false
-});
-</script>

package/tools/cronTools.ts

@@ -1,25 +0,0 @@
-import { CronPeriod } from "@dative-gpi/foundation-shared-domain/enums";
-import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-
-const { $tr } = useTranslationsProvider();
-
-export const availablePeriods = [
-  { label: $tr("ui.common.daily", "Daily"), value: CronPeriod.Daily, item: { default: "0 12 */1 * *" } },
-  { label: $tr("ui.common.weekly", "Weekly"), value: CronPeriod.Weekly, item: { default: "0 12 * * 1" } },
-  { label: $tr("ui.common.monthly", "Monthly"), value: CronPeriod.Monthly, item: { default: "0 12 1 * *" } },
-  { label: $tr("ui.common.yearly", "Yearly"), value: CronPeriod.Yearly, item: { default: "0 12 1 1 *" } },
-];
-
-export const getCronPeriod = (value: string) => {
-  const cronArray = value.split(" ");
-  if (cronArray[3] !== "*") {
-    return availablePeriods.find(c => c.value == CronPeriod.Yearly)!;
-  }
-  else if (!cronArray[2].includes("*") || cronArray[2].includes("-")) {
-    return availablePeriods.find(c => c.value == CronPeriod.Monthly)!;
-  }
-  else if (cronArray[4] !== "*") {
-    return availablePeriods.find(c => c.value == CronPeriod.Weekly)!;
-  }
-  return availablePeriods.find(c => c.value == CronPeriod.Daily)!;
-}