@dative-gpi/foundation-shared-components 0.0.8 → 0.0.9

package/components/FSSubmitDialog.vue

@@ -0,0 +1,165 @@
+<template>
+  <FSDialog
+    cardClasses="fs-submit-dialog"
+    :width="$props.width"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template #header>
+      <slot name="header">
+        <FSCol v-if="$props.title">
+          <FSSpan font="text-h2">
+            {{ $props.title }}
+          </FSSpan>
+          <FSSpan v-if="$props.subtitle">
+            {{ $props.subtitle }}
+          </FSSpan>
+        </FSCol>
+      </slot>
+    </template>
+    <template #body>
+      <slot name="body" />
+    </template>
+    <template #footer>
+      <slot name="footer">
+        <FSRow
+          class="fs-submit-dialog-actions"
+          align="top-right"
+          :wrap="false"
+        >
+          <FSButton
+            :prependIcon="$props.leftButtonPrependIcon"
+            :label="cancelButtonLabel"
+            :appendIcon="$props.leftButtonAppendIcon"
+            :variant="$props.leftButtonVariant"
+            :color="$props.leftButtonColor"
+            @click="() => $emit('update:modelValue', false)"
+          />
+          <FSButton
+            :prependIcon="$props.rightButtonPrependIcon"
+            :label="submitButtonLabel"
+            :appendIcon="$props.rightButtonAppendIcon"
+            :variant="$props.rightButtonVariant"
+            :color="$props.rightButtonColor"
+            :editable="$props.editable"
+            @click="() => $emit('click:rightButton')"
+          />
+        </FSRow>
+      </slot>
+    </template>
+  </FSDialog>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useTranslationsProvider } from "@dative-gpi/foundation-shared-services";
+
+import FSDialog from "./FSDialog.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSSubmitDialog",
+  components: {
+    FSDialog,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    width: {
+      type: [String, Number],
+      required: false,
+      default: "auto"
+    },
+    title: {
+      type: String,
+      required: false,
+      default: null
+    },
+    subtitle: {
+      type: String,
+      required: false,
+      default: null
+    },
+    leftButtonPrependIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    leftButtonLabel: {
+      type: String,
+      required: false,
+      default: null
+    },
+    leftButtonAppendIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    leftButtonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    rightButtonPrependIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    rightButtonLabel: {
+      type: String,
+      required: false,
+      default: null
+    },
+    rightButtonAppendIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    rightButtonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "full"
+    },
+    leftButtonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    rightButtonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { $tr } = useTranslationsProvider();
+
+    const cancelButtonLabel = computed(() => {
+      return props.leftButtonLabel ?? $tr("ui.button.cancel", "Cancel");
+    });
+
+    const submitButtonLabel = computed(() => {
+      return props.rightButtonLabel ??  $tr("ui.button.validate", "Validate");
+    });
+
+    return {
+      ColorEnum,
+      cancelButtonLabel,
+      submitButtonLabel
+    };
+  }
+});
+</script>

package/components/FSSwitch.vue

@@ -1,129 +1,130 @@
 <template>
-    <FSCol width="hug">
-        <FSRow width="hug" align="center-left">
-            <v-switch
-                class="fs-switch"
-                hide-details
-                inset
-                :style="style"
-                :ripple="false"
-                :modelValue="$props.modelValue"
-                @update:modelValue="onToggle"
-                v-bind="$attrs"
-            />
-            <slot name="default">
-                <FSSpan
-                    v-if="$props.label"
-                    class="fs-switch-label"
-                    :style="style"
-                    :font="font"
-                    @click="onToggle"
-                >
-                    {{ $props.label }}
-                </FSSpan>
-            </slot>
-        </FSRow>
-        <slot name="description">
-            <FSSpan
-                v-if="$props.description"
-                class="fs-switch-description"
-                font="text-underline"
-                :style="style"
-            >
-                {{ $props.description }}
-            </FSSpan>
-        </slot>
-    </FSCol>
+  <FSCol
+    width="hug"
+  >
+    <FSRow
+      width="hug"
+      align="center-left"
+    >
+      <v-switch
+        class="fs-switch"
+        hide-details
+        inset
+        :style="style"
+        :ripple="false"
+        :modelValue="$props.modelValue"
+        @update:modelValue="onToggle"
+        v-bind="$attrs"
+      />
+      <slot>
+        <FSSpan
+            v-if="$props.label"
+            class="fs-switch-label"
+            :style="style"
+            :font="font"
+            @click.stop="onToggle"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </slot>
+    </FSRow>
+    <slot name="description">
+      <FSSpan
+        v-if="$props.description"
+        class="fs-switch-description"
+        font="text-underline"
+        :style="style"
+      >
+        {{ $props.description }}
+      </FSSpan>
+    </slot>
+  </FSCol>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, toRefs } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
 
 import FSSpan from "./FSSpan.vue";
 import FSRow from "./FSRow.vue";
 import FSCol from "./FSCol.vue";
 
 export default defineComponent({
-    name: "FSSwitch",
-    components: {
-        FSSpan,
-        FSRow,
-        FSCol
+  name: "FSSwitch",
+  components: {
+    FSSpan,
+    FSRow,
+    FSCol
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
     },
-    props: {
-        label: {
-            type: String,
-            required: false,
-            default: null
-        },
-        description: {
-            type: String,
-            required: false,
-            default: null
-        },
-        modelValue: {
-            type: Boolean,
-            required: false,
-            default: false
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Primary
-        },
-        editable: {
-            type: Boolean,
-            required: false,
-            default: true
-        }
+    description: {
+      type: String,
+      required: false,
+      default: null
     },
-    emits: ["update:modelValue"],
-    setup(props, { emit }) {
-        const { modelValue, color, editable } = toRefs(props);
-
-        const colors = useColors().getColors(color.value);
-
-        const backgrounds = useColors().getColors(ColorBase.Background);
-        const lights = useColors().getColors(ColorBase.Light);
-        const darks = useColors().getColors(ColorBase.Dark);
-
-        const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
-            if (!editable.value) {
-                return {
-                    "--fs-switch-translate-x": modelValue.value ? "8px" : "-8px",
-                    "--fs-switch-cursor": "default",
-                    "--fs-switch-track-color": lights.dark,
-                    "--fs-switch-thumb-color": backgrounds.base,
-                    "--fs-switch-color": lights.dark
-                };
-            }
-            return {
-                "--fs-switch-translate-x": modelValue.value ? "8px" : "-8px",
-                "--fs-switch-cursor": "pointer",
-                "--fs-switch-track-color": modelValue.value ? colors.base : darks.base,
-                "--fs-switch-thumb-color": backgrounds.base,
-                "--fs-switch-color": darks.base
-            };
-        });
-
-        const font = computed((): string => modelValue.value ? "text-button" : "text-body");
-
-        const onToggle = (): void => {
-            if (!editable.value) {
-                return;
-            }
-            emit("update:modelValue", !modelValue.value);
-        }
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const colors = computed(() => useColors().getColors(props.color));
+    const backgrounds = useColors().getColors(ColorEnum.Background);
+    const lights = useColors().getColors(ColorEnum.Light);
+    const darks = useColors().getColors(ColorEnum.Dark);
 
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      if (!props.editable) {
         return {
-            editable,
-            style,
-            font,
-            onToggle
+          "--fs-switch-translate-x": props.modelValue ? "8px" : "-8px",
+          "--fs-switch-cursor"     : "default",
+          "--fs-switch-track-color": lights.dark,
+          "--fs-switch-thumb-color": backgrounds.base,
+          "--fs-switch-color"      : lights.dark
         };
+      }
+      return {
+        "--fs-switch-translate-x": props.modelValue ? "8px" : "-8px",
+        "--fs-switch-cursor"     : "pointer",
+        "--fs-switch-track-color": props.modelValue ? colors.value.base : darks.base,
+        "--fs-switch-thumb-color": backgrounds.base,
+        "--fs-switch-color"      : darks.base
+      };
+    });
+
+    const font = computed((): string => props.modelValue ? "text-button" : "text-body");
+
+    const onToggle = (): void => {
+      if (!props.editable) {
+        return;
+      }
+      emit("update:modelValue", !props.modelValue);
     }
+
+    return {
+      style,
+      font,
+      onToggle
+    };
+  }
 });
 </script>

package/components/FSTab.vue

@@ -1,79 +1,79 @@
 <template>
-    <v-tab
-        class="fs-tab"
-        :ripple="false"
-        v-bind="$attrs"
-    >
+  <v-tab
+    class="fs-tab"
+    :ripple="false"
+    v-bind="$attrs"
+  >
+    <slot>
+      <FSRow align="center-left">
+        <slot name="prepend">
+          <FSIcon v-if="$props.prependIcon" size="m">
+            {{ $props.prependIcon }}
+          </FSIcon>
+        </slot>
         <slot>
-            <FSRow align="center-left">
-                <slot name="prepend">
-                    <FSIcon v-if="$props.prependIcon" size="m">
-                        {{ $props.prependIcon }}
-                    </FSIcon>
-                </slot>
-                <slot name="default">
-                    <FSSpan v-if="$props.label" font="text-button">
-                        {{ $props.label }}
-                    </FSSpan>
-                </slot>
-                <v-spacer v-if="$props.tag" />
-                <slot name="tag">
-                    <FSSpan v-if="$props.tag" class="fs-tab-tag">
-                        {{ $props.tag }}
-                    </FSSpan>
-                </slot>
-                <slot name="append">
-                    <FSIcon v-if="$props.appendIcon" size="m">
-                        {{ $props.appendIcon }}
-                    </FSIcon>
-                </slot>
-            </FSRow>
+          <FSSpan v-if="$props.label" font="text-button">
+            {{ $props.label }}
+          </FSSpan>
+        </slot>
+        <v-spacer v-if="$props.tag" />
+        <slot name="tag">
+          <FSSpan v-if="$props.tag" class="fs-tab-tag">
+            {{ $props.tag }}
+          </FSSpan>
+        </slot>
+        <slot name="append">
+          <FSIcon v-if="$props.appendIcon" size="m">
+            {{ $props.appendIcon }}
+          </FSIcon>
         </slot>
-    </v-tab>
+      </FSRow>
+    </slot>
+  </v-tab>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
-    name: "FSTab",
-    components: {
-        FSSpan,
-        FSIcon,
-        FSRow
+  name: "FSTab",
+  components: {
+    FSSpan,
+    FSIcon,
+    FSRow
+  },
+  props: {
+    prependIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    tag: {
+      type: String,
+      required: false,
+      default: null
+    },
+    appendIcon: {
+      type: String,
+      required: false,
+      default: null
     },
-    props: {
-        prependIcon: {
-            type: String,
-            required: false,
-            default: null
-        },
-        label: {
-            type: String,
-            required: false,
-            default: null
-        },
-        tag: {
-            type: String,
-            required: false,
-            default: null
-        },
-        appendIcon: {
-            type: String,
-            required: false,
-            default: null
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Dark
-        }
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
     }
+  }
 });
 </script>

package/components/FSTabs.vue

@@ -1,69 +1,67 @@
 <template>
-    <v-tabs
-        class="fs-tabs"
-        selected-class="fs-tab-active"
-        show-arrows
-        grow
-        :style="style"
-        :modelValue="tab"
-        :slider-color="colors.base"
-        @update:modelValue="(v) => emit('update:tab', v)"
-        v-bind="$attrs"
+  <v-tabs
+    class="fs-tabs"
+    selectedClass="fs-tab-active"
+    :grow="true"
+    :style="style"
+    :showArrows="true"
+    :sliderColor="$props.color"
+    :modelValue="$props.tab"
+    @update:modelValue="(value) => $emit('update:tab', value)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(component, index) in getChildren()"
+      :key="index"
     >
-        <template v-for="(component, index) in $slots.default()" :key="index">
-            <component :is="component" v-bind="{ color, colors, style }" />
-        </template>
-    </v-tabs>
+      <component :is="component" />
+    </template>
+  </v-tabs>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, Ref, ref, toRefs } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
-    name: "FSTabs",
-    props: {
-        tab: {
-            type: Number,
-            required: false,
-            default: 0
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Primary
-        }
+  name: "FSTabs",
+  props: {
+    tab: {
+      type: Number,
+      required: false,
+      default: 0
     },
-    emits: ["update:tab"],
-    setup(props, { emit }) {
-        const { tab, color } = toRefs(props);
-
-        const textColors = useColors().getContrasts(color.value);
-        const colors = useColors().getColors(color.value);
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    }
+  },
+  setup(props) {
+    const { getChildren } = useSlots();
 
-        const darks = useColors().getColors(ColorBase.Dark);
+    const textColors = computed(() => useColors().getContrasts(props.color));
+    const colors = computed(() => useColors().getColors(props.color));
+    const darks = useColors().getColors(ColorEnum.Dark);
 
-        const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
-            "--fs-group-color": darks.base,
-            "--fs-group-hover-background-color": colors.light,
-            "--fs-group-hover-color": darks.dark,
-            "--fs-group-disabled-color": darks.light,
-            "--fs-group-light": colors.light,
-            "--fs-group-base": colors.base,
-            "--fs-group-dark": colors.dark,
-            "--fs-tab-tag-background-color": colors.base,
-            "--fs-tab-tag-color": textColors.light
-        });
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => ({
+      "--fs-group-color"                 : darks.base,
+      "--fs-group-hover-background-color": colors.value.light,
+      "--fs-group-hover-color"           : darks.dark,
+      "--fs-group-disabled-color"        : darks.light,
+      "--fs-group-light"                 : colors.value.light,
+      "--fs-group-base"                  : colors.value.base,
+      "--fs-group-dark"                  : colors.value.dark,
+      "--fs-tab-tag-background-color"    : colors.value.base,
+      "--fs-tab-tag-color"               : textColors.value.light
+    }));
 
-        return {
-            tab,
-            color,
-            colors,
-            style,
-            emit
-        };
-    }
+    return {
+      style,
+      getChildren
+    };
+  }
 });
 </script>