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

package/components/buttons/FSButtonFileMini.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <FSButton
+      prependIcon="mdi-upload-outline"
+      :color="ColorEnum.Light"
+      @click="onClick"
+      v-bind="$attrs"
+    />
+    <form>
+      <input
+        v-show="false"
+        type="file"
+        ref="input"
+        :accept="$props.accept"
+        @input="onInput"
+      />
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonFileMini",
+  components: {
+    FSButton
+  },
+  props: {
+    accept: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    readFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {    
+    const input = ref(null);
+
+    const clear = () => {
+      input.value!.form && input.value!.form.reset();
+    };
+
+    const onClick = () => {
+      input.value!.click();
+    }
+
+    const onInput = () => {
+      const file = input.value!.files && input.value!.files[0];
+      if (!file) {
+        return;
+      }
+      if (!props.readFile) {
+        emit("update:modelValue", file);
+        clear();
+      }
+      else {
+        const reader = new FileReader();
+        reader.addEventListener("load", (fileEv) => {
+          emit("update:modelValue", fileEv.target && fileEv.target.result);
+          clear();
+        });
+        reader.readAsDataURL(file);
+      }
+    };
+
+    return {
+      ColorEnum,
+      input,
+      onClick,
+      onInput
+    };
+  }
+});
+</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>

package/components/buttons/FSButtonRedoLabel.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    :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: "FSButtonRedoLabel",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonRedoMini.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    prependIcon="mdi-redo-variant"
+    :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: "FSButtonRedoMini",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonRemove.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    prependIcon="mdi-delete-outline"
+    :label="$tr('ui.button.remove', 'Remove')"
+    :color="ColorEnum.Error"
+    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: "FSButtonRemove",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonRemoveIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    icon="mdi-delete-outline"
+    variant="icon"
+    :color="ColorEnum.Error"
+    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: "FSButtonRemoveIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonRemoveLabel.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    :label="$tr('ui.button.remove', 'Remove')"
+    :color="ColorEnum.Error"
+    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: "FSButtonRemoveLabel",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonRemoveMini.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    prependIcon="mdi-delete-outline"
+    :color="ColorEnum.Error"
+    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: "FSButtonRemoveMini",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonSave.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    prependIcon="mdi-content-save-outline"
+    :label="$tr('ui.button.save', 'Save')"
+    :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: "FSButtonSave",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonSaveIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    icon="mdi-content-save-outline"
+    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: "FSButtonSaveIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonSaveLabel.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    :label="$tr('ui.button.save', 'Save')"
+    :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: "FSButtonSaveLabel",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonSaveMini.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    prependIcon="mdi-content-save-outline"
+    :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: "FSButtonSaveMini",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonSearch.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    prependIcon="mdi-magnify"
+    :label="$tr('ui.button.search', 'Search')"
+    :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: "FSButtonSearch",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>