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

package/components/FSWrapGroup.vue

@@ -1,6 +1,7 @@
 <template>
   <v-slide-group
     class="fs-wrap-group"
+    ref="wrapGroupRef"
     :style="style"
     v-bind="$attrs"
   >
@@ -14,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, ref } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -40,6 +41,8 @@ export default defineComponent({
 
     const darks = getColors(ColorEnum.Dark);
 
+    const wrapGroupRef = ref(null);
+
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => ({
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),
@@ -47,9 +50,26 @@ export default defineComponent({
       "--fs-group-hover-color": darks.dark
     }));
 
+    const goToStart = () => {
+      if (wrapGroupRef.value) {
+        wrapGroupRef.value.scrollOffset = 0;
+      }
+    };
+
+    const goToEnd = () => {
+      if (wrapGroupRef.value) {
+        const contentSize = wrapGroupRef.value.$el.children[1].children[0].clientWidth;
+        const containerSize = wrapGroupRef.value.$el.clientWidth;
+        wrapGroupRef.value.scrollOffset = (contentSize - containerSize);
+      }
+    };
+
     return {
+      wrapGroupRef,
       style,
-      getChildren
+      getChildren,
+      goToStart,
+      goToEnd
     };
   }
 });

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/FSButtonFile.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <FSButton
+      prependIcon="mdi-upload-outline"
+      :label="$tr('ui.button.import-file', 'Import file')"
+      :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: "FSButtonFile",
+  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/FSButtonFileIcon.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <FSButton
+      icon="mdi-upload-outline"
+      variant="icon"
+      :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: "FSButtonFileIcon",
+  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/FSButtonFileLabel.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <FSButton
+      :label="$tr('ui.button.import-file', 'Import file')"
+      :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: "FSButtonFileLabel",
+  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>