@dative-gpi/foundation-shared-components 0.0.18 → 0.0.19

package/components/FSButton.vue

@@ -14,10 +14,10 @@
     >
       <slot name="prepend" v-bind="{ color: props.color, colors }">
         <FSIcon
-          v-if="props.prependIcon"
+          v-if="props.prependIcon || props.icon"
           size="l"
         >
-          {{ props.prependIcon }}
+          {{ props.prependIcon ?? props.icon }}
         </FSIcon>
       </slot>
       <slot v-bind="{ color: props.color, colors }">

package/components/FSDivider.vue

@@ -15,7 +15,7 @@
     />
     <FSText
       variant="light"
-      font="text-h4"
+      :font="$props.font"
     >
       <slot>
         {{ $props.label }}
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -52,6 +52,11 @@ export default defineComponent({
       type: String,
       required: false,
       default: null
+    },
+    font: {
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      required: false,
+      default: "text-body"
     }
   },
   setup(props) {

package/components/buttons/FSButtonCancel.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    prependIcon="mdi-cancel"
+    :label="$tr('ui.button.cancel', 'Cancel')"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonCancel",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonCancelIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    icon="mdi-cancel"
+    variant="icon"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonCancelIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonCancelLabel.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    :label="$tr('ui.button.cancel', 'Cancel')"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonCancelLabel",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonCancelMini.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    prependIcon="mdi-cancel"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonCancelMini",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonDuplicate.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    prependIcon="mdi-content-copy"
+    :label="$tr('ui.button.duplicate', 'Duplicate')"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonDuplicate",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonDuplicateIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    icon="mdi-content-copy"
+    variant="icon"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonDuplicateIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonDuplicateLabel.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    :label="$tr('ui.button.duplicate', 'Duplicate')"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonDuplicateLabel",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonDuplicateMini.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    prependIcon="mdi-content-copy"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonDuplicateMini",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonEdit.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    prependIcon="mdi-pencil-outline"
+    :label="$tr('ui.button.edit', 'Edit')"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonEdit",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonEditIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    icon="mdi-pencil-outline"
+    variant="icon"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonEditIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonEditLabel.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    :label="$tr('ui.button.edit', 'Edit')"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonEditLabel",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonEditMini.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    prependIcon="mdi-pencil-outline"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonEditMini",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonNext.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    appendIcon="mdi-chevron-right"
+    :label="$tr('ui.button.next', 'Next')"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonNext",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonNextIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    icon="mdi-chevron-right"
+    variant="icon"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonNextIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonNextLabel.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    :label="$tr('ui.button.next', 'Next')"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonNextLabel",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonNextMini.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    prependIcon="mdi-chevron-right"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonNextMini",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonPrevious.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    prependIcon="mdi-chevron-left"
+    :label="$tr('ui.button.previous', 'Previous')"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonPrevious",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonPreviousIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    icon="mdi-chevron-left"
+    variant="icon"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonPreviousIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonPreviousLabel.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    :label="$tr('ui.button.previous', 'Previous')"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonPreviousLabel",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonPreviousMini.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    prependIcon="mdi-chevron-left"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonPreviousMini",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonRedo.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    prependIcon="mdi-redo-variant"
+    :label="$tr('ui.button.redo', 'Redo')"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonRedo",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonRedoIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    icon="mdi-redo-variant"
+    variant="icon"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonRedoIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>