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

package/components/FSFileButton.vue

@@ -0,0 +1,245 @@
+<template>
+  <div>
+    <v-btn
+      v-if="!['icon'].includes($props.variant)"
+      :ripple="false"
+      :style="style"
+      :class="classes"
+      :disabled="!$props.editable"
+      @click="onClick"
+      v-bind="$attrs"
+    >
+      <FSRow
+        align="center-center"
+        :wrap="false"
+      >
+        <slot name="prepend" v-bind="{ color: $props.color, colors }">
+          <FSIcon
+            v-if="$props.prependIcon"
+            size="l"
+          >
+            {{ $props.prependIcon }}
+          </FSIcon>
+        </slot>
+        <slot v-bind="{ color: $props.color, colors }">
+          <FSSpan
+            v-if="$props.label"
+            font="text-body"
+          >
+            {{ $props.label }}
+          </FSSpan>
+        </slot>
+        <slot name="append" v-bind="{ color: $props.color, colors }">
+          <FSIcon
+            v-if="$props.appendIcon"
+            size="l"
+          >
+            {{ $props.appendIcon }}
+          </FSIcon>
+        </slot>
+      </FSRow>
+    </v-btn>
+    <FSRow
+      v-else-if="$props.icon"
+      width="hug"
+      :style="style"
+      :class="classes"
+      v-bind="$attrs"
+    >
+      <FSIcon
+        size="l"
+      >
+        {{ $props.icon }}
+      </FSIcon>
+    </FSRow>
+    <form>
+      <input
+        v-show="false"
+        type="file"
+        ref="input"
+        :accept="$props.accept"
+        @input="onInput"
+      />
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from "vue";
+
+import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+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: "FSButtonFile",
+  components: {
+    FSSpan,
+    FSIcon,
+    FSRow
+  },
+  props: {
+    accept: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    readFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    prependIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    appendIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    variant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { slots } = useSlots();
+
+    const textColors = computed(() => useColors().getContrasts(props.color));
+    const colors = computed(() => useColors().getColors(props.color));
+    const lights = useColors().getColors(ColorEnum.Light);
+    
+    const input = ref(null);
+
+    const isEmpty = computed(() => {
+      return !slots.default && !props.label;
+    });
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      if (!props.editable) {
+        switch (props.variant) {
+          case "standard":
+          case "full": return {
+            "--fs-button-padding": !isEmpty.value ? "0 16px" : "0",
+            "--fs-button-background-color": lights.base,
+            "--fs-button-border-color": lights.dark,
+            "--fs-button-color": lights.dark
+          }
+          case "icon": return {
+            "--fs-button-color": lights.dark
+          }
+        }
+      }
+      switch (props.variant) {
+        case "standard": return {
+          "--fs-button-padding"                : !isEmpty.value ? "0 16px" : "0",
+          "--fs-button-background-color"       : colors.value.light,
+          "--fs-button-border-color"           : colors.value.base,
+          "--fs-button-color"                  : textColors.value.base,
+          "--fs-button-hover-background-color" : colors.value.base,
+          "--fs-button-hover-border-color"     : colors.value.base,
+          "--fs-button-hover-color"            : textColors.value.light,
+          "--fs-button-active-background-color": colors.value.dark,
+          "--fs-button-active-border-color"    : colors.value.dark,
+          "--fs-button-active-color"           : textColors.value.light
+        };
+        case "full": return {
+          "--fs-button-padding"                : !isEmpty.value ? "0 16px" : "0",
+          "--fs-button-background-color"       : colors.value.base,
+          "--fs-button-border-color"           : colors.value.base,
+          "--fs-button-color"                  : textColors.value.light,
+          "--fs-button-hover-background-color" : colors.value.base,
+          "--fs-button-hover-border-color"     : colors.value.base,
+          "--fs-button-hover-color"            : textColors.value.light,
+          "--fs-button-active-background-color": colors.value.dark,
+          "--fs-button-active-border-color"    : colors.value.dark,
+          "--fs-button-active-color"           : textColors.value.light
+        };
+        case "icon": return {
+          "--fs-button-color"      : textColors.value.base,
+          "--fs-button-hover-color": textColors.value.dark
+        };
+      }
+    });
+
+    const classes = computed((): string[] => {
+      const classNames = [];
+      if (!props.editable) {
+        classNames.push("fs-button--disabled");
+      }
+      switch (props.variant) {
+        case "icon":
+          classNames.push("fs-button-icon");
+          break;
+        default:
+          classNames.push("fs-button");
+          break;
+      }
+      return classNames;
+    });
+
+    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 {
+      colors,
+      style,
+      classes,
+      input,
+      onClick,
+      onInput
+    };
+  }
+});
+</script>

package/components/FSHeaderButton.vue

@@ -0,0 +1,17 @@
+<template>
+  
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "FSHeaderButton",
+  props: {
+  },
+  setup(props) {
+    return {
+    };
+  }
+});
+</script>

package/components/FSIcon.vue

@@ -1,32 +1,32 @@
 <template>
-    <v-icon
-        :class="classes"
-        v-bind="$attrs"
-    >
-        <slot />
-    </v-icon>
+  <v-icon
+    :class="classes"
+    v-bind="$attrs"
+  >
+    <slot />
+  </v-icon>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, toRefs } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
 export default defineComponent({
-    name: "FSIcon",
-    props: {
-        size: {
-            type: String as PropType<"s" | "m" | "l">,
-            required: false,
-            default: "m"
-        }
-    },
-    setup(props) {
-        const { size } = toRefs(props);
-
-        const classes = computed((): string[] => ["fs-icon", `fs-icon-${size.value}`]);
-
-        return {
-            classes
-        };
+  name: "FSIcon",
+  props: {
+    size: {
+      type: String as PropType<"s" | "m" | "l">,
+      required: false,
+      default: "m"
     }
+  },
+  setup(props) {
+    const classes = computed((): string[] => {
+      return [`fs-icon-${props.size}`];
+    });
+
+    return {
+      classes
+    };
+  }
 });
 </script>

package/components/FSIconField.vue

@@ -0,0 +1,232 @@
+<template>
+  <FSCol>
+    <FSTextField
+      :label="$props.label"
+      :description="$props.description"
+      :hideHeader="$props.hideHeader"
+      :required="$props.required"
+      :editable="$props.editable"
+      :error="messages.length > 0"
+      v-model="innerValue"
+      v-bind="$attrs"
+    >
+      <template v-if="!$props.hideHeader" #label>
+        <slot name="label">
+          <FSRow :wrap="false">
+            <FSSpan
+              v-if="$props.label"
+              class="fs-icon-field-label"
+              font="text-overline"
+              :style="style"
+            >
+              {{ $props.label }}
+            </FSSpan>
+            <FSSpan
+              v-if="$props.label && $props.required"
+              class="fs-icon-field-label"
+              style="margin-left: -8px;"
+              font="text-overline"
+              :ellipsis="false"
+              :style="style"
+            >
+              *
+            </FSSpan>
+            <v-spacer style="min-width: 40px;" />
+            <FSSpan
+              v-if="messages.length > 0"
+              class="fs-icon-field-messages"
+              font="text-overline"
+              :style="style"
+            >
+              {{ messages.join(", ") }}
+            </FSSpan>
+          </FSRow>
+        </slot>
+      </template>
+      <template #append-inner>
+        <FSIcon
+          v-if="$props.modelValue"
+          size="l"
+        >
+          {{ $props.modelValue }}
+        </FSIcon>
+      </template>
+    </FSTextField>
+    <FSToggleSet
+      class="fs-icon-field-set"
+      variant="slide"
+      :values="icons"
+      :required="$props.required"
+      :editable="$props.editable"
+      :buttonColor="$props.buttonColor"
+      :activeColor="$props.activeColor"
+      :modelValue="$props.modelValue"
+      @update:modelValue="(value) => $emit('update:modelValue', value)"
+    />
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from "vue";
+
+import { Icons, sortByLevenshteinDistance } from "@dative-gpi/foundation-shared-components/utils";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { FSToggle } from "@dative-gpi/foundation-shared-components/models";
+
+import FSTextField from "./FSTextField.vue";
+import FSToggleSet from "./FSToggleSet.vue";
+import FSIcon from "./FSIcon.vue";
+import FSCol from "./FSCol.vue";
+
+export default defineComponent({
+  name: "FSIconField",
+  components: {
+    FSTextField,
+    FSToggleSet,
+    FSIcon,
+    FSCol,
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
+    preSelection: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
+    buttonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    activeVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: null
+    },
+    buttonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    activeColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    rules: {
+      type: Array as PropType<Function[]>,
+      required: false,
+      default: () => []
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const errors = useColors().getColors(ColorEnum.Error);
+    const lights = useColors().getColors(ColorEnum.Light);
+    const darks = useColors().getColors(ColorEnum.Dark);
+
+    const innerValue = ref(null);
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      if (!props.editable) {
+        return {
+          "--fs-icon-field-color": lights.dark
+        };
+      }
+      return {
+        "--fs-icon-field-color"      : darks.base,
+        "--fs-icon-field-error-color": errors.base
+      };
+    });
+
+    const messages = computed((): string[] => {
+      const messages = [];
+      for (const rule of props.rules) {
+        const message = rule(props.modelValue);
+        if (typeof(message) === "string") {
+          messages.push(message);
+        }
+      }
+      return messages;
+    });
+
+    const icons = computed((): FSToggle[] => {
+      const innerIcons: FSToggle[] = [];
+      if (!innerValue.value || innerValue.value.length < 3) {
+        if (props.preSelection && props.preSelection.length) {
+          innerIcons.push(...props.preSelection.map((icon: string) => ({
+            id: icon,
+            prependIcon: icon
+          })));
+        }
+        else {
+          innerIcons.push(...Icons.slice(0, 32).map((icon) => ({
+            id: icon.name,
+            prependIcon: icon.name
+          })));
+        }
+      }
+      else {
+        const matchingIcons = Icons.filter((icon) => {
+          return icon.fullText.toLowerCase().includes(innerValue.value.toLowerCase());
+        }).sort((a, b) => sortByLevenshteinDistance(a.name, b.name, innerValue.value));
+        innerIcons.push(...matchingIcons.slice(0, Math.min(32, matchingIcons.length)).map((icon) => ({
+          id: icon.name,
+          prependIcon: icon.name
+        })));
+      }
+      if (props.modelValue) {
+        const selectedIcon = innerIcons.find((icon) => icon.id === props.modelValue);
+        if (selectedIcon) {
+          innerIcons.splice(innerIcons.indexOf(selectedIcon), 1);
+          innerIcons.unshift(selectedIcon);
+        }
+        else {
+          innerIcons.unshift({
+            id: props.modelValue,
+            prependIcon: props.modelValue
+          });
+        }
+      }
+      return innerIcons;
+    });
+
+    return {
+      innerValue,
+      messages,
+      style,
+      icons
+    };
+  }
+})
+</script>

package/components/FSImage.vue

@@ -0,0 +1,142 @@
+<template>
+  <v-img
+    class="fs-image"
+    :src="source"
+    :cover="$props.cover"
+    :width="computedWidth"
+    :height="computedHeight"
+    v-bind="$attrs"
+  >
+    <template #placeholder>
+      <v-skeleton-loader
+        type="image"
+      />
+    </template>
+  </v-img>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted } from "vue";
+
+import { useImageRaw, useImageBlurHash } from "@dative-gpi/foundation-shared-services";
+
+export default defineComponent({
+  name: "FSImage",
+  props: {
+    imageId: {
+      type: String,
+      required: true
+    },
+    cover: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    width: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    height: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    aspectRatio: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  setup(props) {
+    const { fetching: fetchingRaw, fetch: fetchRaw, fetched: image } = useImageRaw();
+    const { fetching: fetchingBlurHash, fetch: fetchBlurHash, fetched: blurHash } = useImageBlurHash();
+
+    const computedWidth = computed((): number => {
+      if (props.width) {
+        return props.width;
+      }
+      if (props.height) {
+        if (props.aspectRatio) {
+          const split = props.aspectRatio.split('/');
+          if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
+            return props.height * (parseFloat(split[0]) / parseFloat(split[1]));
+          }
+        }
+        return props.height;
+      }
+      return 0;
+    });
+
+    const computedHeight = computed((): number => {
+      if (props.height) {
+        return props.height;
+      }
+      if (props.width) {
+        if (props.aspectRatio) {
+          const split = props.aspectRatio.split('/');
+          if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
+            return props.width * (parseFloat(split[1]) / parseFloat(split[0]));
+          }
+        }
+        return props.width;
+      }
+      return 0;
+    });
+
+    const source = computed((): string | null => {
+      if (fetchingRaw.value) {
+        return null;
+      }
+      if (image.value) {
+        return image.value;
+      }
+      if (fetchingBlurHash.value) {
+        return null;
+      }
+      if (blurHash.value) {
+        return blurHash.value.blurHash;
+      }
+      return null;
+    });
+
+    // const pixels = () => {
+    //   if (this.value && this.isValid)
+    //     return decode(this.value, this.width, this.height, this.punch);
+    //   return [];
+    // }
+
+    // const isValid = () => {
+    //   return this.value && isBlurhashValid(this.value).result;
+    // }
+
+    // const reset = () => {
+    //   const ctx = (this.$el as HTMLCanvasElement).getContext("2d");
+    //   this.$nextTick(() => {
+    //     if (this.pixels.length) {
+    //       const imageData = ctx!.createImageData(this.width, this.height);
+    //       imageData.data.set(this.pixels);
+    //       ctx!.putImageData(imageData, 0, 0);
+    //     }
+    //   });
+    // }
+
+    onMounted(() => {
+      fetch();
+    });
+
+    const fetch = async () => {
+      await fetchRaw(props.imageId);
+      if (!image.value) {
+        await fetchBlurHash(props.imageId);
+      }
+    }
+
+    return {
+      source,
+      computedWidth,
+      computedHeight
+    };
+  }
+});
+</script>