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

package/components/FSRow.vue

@@ -1,115 +1,121 @@
 <template>
-    <div
-        :style="style"
-        :class="classes"
-        v-bind="$attrs"
-    >
-        <slot />
-    </div>
+  <div
+    :style="style"
+    :class="classes"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, toRefs } from "vue";
+import { computed, defineComponent, PropType } from "vue";
+
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 export default defineComponent({
-    name: "FSRow",
-    props: {
-        width: {
-            type: String as PropType<"hug" | "fill" | string>,
-            required: false,
-            default: "fill"
-        },
-        height: {
-            type: String as PropType<"hug" | "fill" | string>,
-            required: false,
-            default: "hug"
-        },
-        align: {
-            type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
-            required: false,
-            default: "top-left"
-        },
-        wrap: {
-            type: Boolean,
-            required: false,
-            default: true
-        },
-        gap: {
-            type: Number,
-            required: false,
-            default: 8
-        }
+  name: "FSRow",
+  props: {
+    width: {
+      type: String as PropType<"hug" | "fill" | string>,
+      required: false,
+      default: "fill"
+    },
+    height: {
+      type: String as PropType<"hug" | "fill" | string>,
+      required: false,
+      default: "hug"
+    },
+    align: {
+      type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
+      required: false,
+      default: "top-left"
+    },
+    wrap: {
+      type: Boolean,
+      required: false,
+      default: true
     },
-    setup(props) {
-        const { width, height, align, wrap, gap } = toRefs(props);
-        
-        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => ({
-            "--fs-row-flex-wrap": wrap.value ? "wrap" : "nowrap",
-            "--fs-row-gap": `${gap.value}px`,
-            "--fs-row-width": width.value,
-            "--fs-row-height": height.value
-        }));
+    padding: {
+      type: [String, Number],
+      required: false,
+      default: "0"
+    },
+    gap: {
+      type: [String, Number],
+      required: false,
+      default: "8px"
+    }
+  },
+  setup(props) {
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => ({
+      "--fs-row-flex-wrap": props.wrap ? "wrap" : "nowrap",
+      "--fs-row-padding"  : sizeToVar(props.padding),
+      "--fs-row-gap"      : sizeToVar(props.gap),
+      "--fs-row-width"    : sizeToVar(props.width),
+      "--fs-row-height"   : sizeToVar(props.height)
+    }));
 
-        const classes = computed((): string[] => {
-            const classes = ["fs-row"];
-            switch (width.value) {
-                case "hug":
-                    classes.push("fs-row-width-hug");
-                    break;
-                case "fill":
-                    classes.push("fs-row-width-fill");
-                    break;
-                default: 
-                    classes.push("fs-row-width-fixed");
-                    break;
-            }
-            switch (height.value) {
-                case "hug":
-                    classes.push("fs-row-height-hug");
-                    break;
-                case "fill":
-                    classes.push("fs-row-height-fill");
-                    break;
-                default: 
-                    classes.push("fs-row-height-fixed");
-                    break;
-            }
-            switch (align.value) {
-                case "top-left":
-                    classes.push("fs-row-top-left");
-                    break;
-                case "top-center":
-                    classes.push("fs-row-top-center");
-                    break;
-                case "top-right":
-                    classes.push("fs-row-top-right");
-                    break;
-                case "center-left":
-                    classes.push("fs-row-center-left");
-                    break;
-                case "center-center":
-                    classes.push("fs-row-center-center");
-                    break;
-                case "center-right":
-                    classes.push("fs-row-center-right");
-                    break;
-                case "bottom-left":
-                    classes.push("fs-row-bottom-left");
-                    break;
-                case "bottom-center":
-                    classes.push("fs-row-bottom-center");
-                    break;
-                case "bottom-right":
-                    classes.push("fs-row-bottom-right");
-                    break;
-            }
-            return classes;
-        });
+    const classes = computed((): string[] => {
+      const classNames = ["fs-row"];
+      switch (props.width) {
+        case "hug":
+          classNames.push("fs-row-width-hug");
+          break;
+        case "fill":
+          classNames.push("fs-row-width-fill");
+          break;
+        default: 
+          classNames.push("fs-row-width-fixed");
+          break;
+      }
+      switch (props.height) {
+        case "hug":
+          classNames.push("fs-row-height-hug");
+          break;
+        case "fill":
+          classNames.push("fs-row-height-fill");
+          break;
+        default: 
+          classNames.push("fs-row-height-fixed");
+          break;
+      }
+      switch (props.align) {
+        case "top-left":
+          classNames.push("fs-row-top-left");
+          break;
+        case "top-center":
+          classNames.push("fs-row-top-center");
+          break;
+        case "top-right":
+          classNames.push("fs-row-top-right");
+          break;
+        case "center-left":
+          classNames.push("fs-row-center-left");
+          break;
+        case "center-center":
+          classNames.push("fs-row-center-center");
+          break;
+        case "center-right":
+          classNames.push("fs-row-center-right");
+          break;
+        case "bottom-left":
+          classNames.push("fs-row-bottom-left");
+          break;
+        case "bottom-center":
+          classNames.push("fs-row-bottom-center");
+          break;
+        case "bottom-right":
+          classNames.push("fs-row-bottom-right");
+          break;
+      }
+      return classNames;
+    });
 
-        return {
-            style,
-            classes
-        };
-    }
+    return {
+      style,
+      classes
+    };
+  }
 });
 </script>

package/components/FSSearchField.vue

@@ -1,122 +1,131 @@
 <template>
-    <FSTextField
-        :label="$props.label"
-        :description="$props.description"
-        :type="type"
-        :color="$props.color"
-        :required="$props.required"
-        :editable="$props.editable"
-        :value="innerValue"
-        @update:value="(value) => innerValue = value"
-        v-bind="$attrs"
+  <FSTextField
+    :label="$props.label"
+    :description="$props.description"
+    :color="$props.color"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    @keydown.enter="$emit('update:modelValue', innerValue)"
+    v-model="innerValue"
+    v-bind="$attrs"
+  >
+    <template
+      v-if="!$props.instant"
+      #append
     >
-        <template #append>
-            <FSButton
-                :prependIcon="$props.buttonPrependIcon"
-                :label="$props.buttonLabel"
-                :appendIcon="$props.buttonAppendIcon"
-                :variant="$props.buttonVariant"
-                :color="$props.buttonColor"
-                :editable="$props.editable"
-                @click="onUpdate"
-            />
-        </template>
-        <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-            <slot :name="name" v-bind="slotData" />
-        </template>
-    </FSTextField>
+      <slot name="append">
+        <FSButton
+          :prependIcon="$props.buttonPrependIcon"
+          :label="$props.buttonLabel"
+          :appendIcon="$props.buttonAppendIcon"
+          :variant="$props.buttonVariant"
+          :color="$props.buttonColor"
+          :editable="$props.editable"
+          @click="$emit('update:modelValue', innerValue)"
+        />
+      </slot>
+    </template>
+    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </FSTextField>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, Ref, ref, toRefs } from "vue";
+import { defineComponent, PropType, ref, watch } from "vue";
 
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSTextField from "./FSTextField.vue";
 import FSButton from "./FSButton.vue";
-import FSIcon from "./FSIcon.vue";
 
 export default defineComponent({
-    name: "FSSearchField",
-    components: {
-        FSTextField,
-        FSButton,
-        FSIcon
+  name: "FSSearchField",
+  components: {
+    FSTextField,
+    FSButton
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
     },
-    props: {
-        label: {
-            type: String,
-            required: false,
-            default: null
-        },
-        description: {
-            type: String,
-            required: false,
-            default: null
-        },
-        buttonPrependIcon: {
-            type: String,
-            required: false,
-            default: "mdi-magnify"
-        },
-        buttonLabel: {
-            type: String,
-            required: false,
-            default: null
-        },
-        buttonAppendIcon: {
-            type: String,
-            required: false,
-            default: null
-        },
-        buttonVariant: {
-            type: String as PropType<"standard" | "full" | "icon">,
-            required: false,
-            default: "standard"
-        },
-        value: {
-            type: String,
-            required: false,
-            default: null
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Dark
-        },
-        buttonColor: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Primary
-        },
-        required: {
-            type: Boolean,
-            required: false,
-            default: false
-        },
-        editable: {
-            type: Boolean,
-            required: false,
-            default: true
-        }
+    description: {
+      type: String,
+      required: false,
+      default: null
     },
-    emits: ["update:value"],
-    setup(props, { emit }) {
-        const { editable } = toRefs(props);
-
-        const innerValue: Ref<String> = ref(props.value);
+    buttonPrependIcon: {
+      type: String,
+      required: false,
+      default: "mdi-magnify"
+    },
+    buttonLabel: {
+      type: String,
+      required: false,
+      default: null
+    },
+    buttonAppendIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    buttonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: null
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
+    buttonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    instant: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const innerValue = ref(props.modelValue);
 
-        const onUpdate = (): void => {
-            if (!editable.value) {
-                return;
-            }
-            emit("update:value", innerValue.value);
-        };
+    watch(innerValue, () => {
+      if (props.instant) {
+        emit("update:modelValue", innerValue.value);
+      }
+    });
 
-        return {
-            innerValue,
-            onUpdate
-        };
-    }
+    return {
+      innerValue
+    };
+  }
 });
 </script>

package/components/FSSelectField.vue

@@ -0,0 +1,188 @@
+<template>
+  <FSCol>
+    <slot v-if="!$props.hideHeader" name="label">
+      <FSRow :wrap="false">
+        <FSSpan
+          v-if="$props.label"
+          class="fs-select-field-label"
+          font="text-overline"
+          :style="style"
+        >
+          {{ $props.label }}
+        </FSSpan>
+        <FSSpan
+          v-if="$props.label && $props.required"
+          class="fs-select-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-select-field-messages"
+          font="text-overline"
+          :style="style"
+        >
+          {{ messages.join(", ") }}
+        </FSSpan>
+      </FSRow>
+    </slot>
+    <v-select
+      class="fs-select-field"
+      menuIcon="mdi-chevron-down"
+      clearIcon="mdi-close"
+      variant="outlined"
+      :hideDetails="true"
+      :items="$props.items"
+      :itemTitle="$props.itemTitle"
+      :itemValue="$props.itemValue"
+      :readonly="!$props.editable"
+      :clearable="$props.editable && $props.clearable"
+      :error="messages.length > 0"
+      :style="style"
+      :modelValue="$props.modelValue"
+      @update:modelValue="(value) => $emit('update:modelValue', value)"
+      v-bind="$attrs"
+    >
+      <template v-for="(_, name) in slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </v-select>
+    <slot name="description">
+      <FSSpan
+        v-if="$props.description"
+        class="fs-select-field-description"
+        font="text-underline"
+        :style="style"
+      >
+        {{ $props.description }}
+      </FSSpan>
+    </slot>
+  </FSCol>
+</template>
+
+<script lang="ts">
+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";
+
+import FSSpan from "./FSSpan.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSSelectField",
+  components: {
+    FSSpan,
+    FSCol,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
+    items: {
+      type: Array as PropType<any[]>,
+      required: true
+    },
+    itemValue: {
+      type: String,
+      required: false,
+      default: "id"
+    },
+    itemTitle: {
+      type: String,
+      required: false,
+      default: "label"
+    },
+    modelValue: {
+      type: [Array, String, Number] as PropType<(string | number)[] | string | number>,
+      required: false,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    rules: {
+      type: Array as PropType<Function[]>,
+      required: false,
+      default: () => []
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { slots } = useSlots();
+    delete slots.label;
+    delete slots.description;
+
+    const errors = useColors().getColors(ColorEnum.Error);
+    const lights = useColors().getColors(ColorEnum.Light);
+    const darks = useColors().getColors(ColorEnum.Dark);
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      if (!props.editable) {
+        return {
+          "--fs-select-field-cursor"             : "default",
+          "--fs-select-field-border-color"       : lights.base,
+          "--fs-select-field-color"              : lights.dark,
+          "--fs-select-field-active-border-color": lights.base
+        };
+      }
+      return {
+        "--fs-select-field-cursor"             : "pointer",
+        "--fs-select-field-border-color"       : lights.dark,
+        "--fs-select-field-color"              : darks.base,
+        "--fs-select-field-active-border-color": darks.dark,
+        "--fs-select-field-error-color"        : errors.base,
+        "--fs-select-field-error-border-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;
+    });
+
+    return {
+      messages,
+      slots,
+      style
+    };
+  }
+});
+</script>