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

package/components/FSTagField.vue

@@ -1,39 +1,75 @@
 <template>
-    <FSCol>
-        <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"
-            @keydown.enter="onAdd"
-            v-bind="$attrs"
-        >
-            <template #append-inner>
-                <FSIcon
-                    class="fs-tag-field-icon"
-                    size="m"
-                    :style="style"
-                    @click="onAdd"
-                >
-                    mdi-tag-outline
-                </FSIcon>
-            </template>
-            <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-                <slot :name="name" v-bind="slotData" />
-            </template>
-        </FSTextField>
-        <FSTagGroup
-            :tags="$props.value"
-            :variant="$props.variant"
-            :color="$props.tagColor"
-            :editable="$props.editable"
-            @remove="onRemove"
-        />
-    </FSCol>
+  <FSCol>
+    <FSTextField
+      :label="$props.label"
+      :description="$props.description"
+      :type="type"
+      :color="$props.color"
+      :required="$props.required"
+      :editable="$props.editable"
+      :error="messages.length > 0"
+      :modelValue="innerValue"
+      @update:modelValue="(value) => innerValue = value"
+      @keydown.enter="onAdd"
+      v-bind="$attrs"
+    >
+      <template #label>
+        <slot name="label">
+          <FSRow :wrap="false">
+            <FSSpan
+              v-if="$props.label"
+              class="fs-tag-field-label"
+              font="text-overline"
+              :style="style"
+            >
+              {{ $props.label }}
+            </FSSpan>
+            <FSSpan
+              v-if="$props.label && $props.required"
+              class="fs-tag-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-tag-field-messages"
+              font="text-overline"
+              :style="style"
+            >
+              {{ messages.join(", ") }}
+            </FSSpan>
+          </FSRow>
+        </slot>
+      </template>
+      <template #append-inner>
+        <slot name="append-inner">
+          <FSIcon
+            class="fs-tag-field-icon"
+            size="m"
+            :style="style"
+            @click="onAdd"
+          >
+            mdi-tag-outline
+          </FSIcon>
+        </slot>
+      </template>
+      <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </FSTextField>
+    <FSTagGroup
+      :tags="$props.modelValue"
+      :variant="$props.tagVariant"
+      :color="$props.tagColor"
+      :editable="$props.editable"
+      @remove="onRemove"
+    />
+  </FSCol>
 </template>
 
 <script lang="ts">
@@ -44,109 +80,132 @@ import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
 
 import FSTextField from "./FSTextField.vue";
 import FSTagGroup from "./FSTagGroup.vue";
-import FSCol from "./FSCol.vue"
+import FSSpan from "./FSSpan.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
 
 export default defineComponent({
-    name: "FSTagField",
-    components: {
-        FSTextField,
-        FSTagGroup,
-        FSCol
+  name: "FSTagField",
+  components: {
+    FSTextField,
+    FSTagGroup,
+    FSSpan,
+    FSCol,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
     },
-    props: {
-        label: {
-            type: String,
-            required: false,
-            default: null
-        },
-        description: {
-            type: String,
-            required: false,
-            default: null
-        },
-        value: {
-            type: Array as PropType<string[]>,
-            required: false,
-            default: () => []
-        },
-        variant: {
-            type: String as PropType<"standard" | "full">,
-            required: false,
-            default: "full"
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Primary
-        },
-        tagColor: {
-            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
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorBase.Dark
+    },
+    tagVariant: {
+      type: String as PropType<"standard" | "full">,
+      required: false,
+      default: "full"
     },
-    emits: ["update:value"],
-    setup(props, { emit }) {
-        const { value, editable } = toRefs(props);
+    tagColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorBase.Primary
+    },
+    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, { emit }) {
+    const { modelValue, rules, editable } = toRefs(props);
 
-        const innerValue = ref("");
+    const innerValue = ref("");
 
-        const darks = useColors().getColors(ColorBase.Dark);
+    const errors = useColors().getColors(ColorBase.Error);
+    const darks = useColors().getColors(ColorBase.Dark);
 
-        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
-            if (!editable.value) {
-                return {
-                    "--fs-tag-field-cursor"   : "default",
-                    "--fs-tag-field-base-text": darks.light,
-                    "--fs-tag-field-dark-text": darks.light
-                };
-            }
-            return {
-                "--fs-tag-field-cursor"   : "pointer",
-                "--fs-tag-field-base-text": darks.base,
-                "--fs-tag-field-dark-text": darks.dark
-            };
-        });
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      if (!editable.value) {
+        return {
+          "--fs-tag-field-cursor"   : "default",
+          "--fs-tag-field-base-text": darks.light,
+          "--fs-tag-field-dark-text": darks.light
+        };
+      }
+      return {
+        "--fs-tag-field-cursor"     : "pointer",
+        "--fs-tag-field-base-text"  : darks.base,
+        "--fs-tag-field-dark-text"  : darks.dark,
+        "--fs-tag-field-error-color": errors.base
+      };
+    });
 
-        const onAdd = (): void => {
-            if (!editable.value) {
-                return;
-            }
-            const tags = value.value ?? [];
-            if (!innerValue.value.length || tags.includes(innerValue.value)) {
-                return;
-            }
-            emit("update:value", tags.concat(innerValue.value));
-            innerValue.value = "";
+    const messages = computed((): string[] => {
+      const messages = [];
+      for (const rule of rules.value) {
+        const message = rule(props.modelValue);
+        if (typeof(message) === "string") {
+          messages.push(message);
         }
+      }
+      return messages;
+    });
 
-        const onRemove = (label: string): void => {
-            if (!editable.value) {
-                return;
-            }
-            const tags = value.value ?? [];
-            if (!tags.length || !tags.includes(label)) {
-                return;
-            }
-            emit("update:value", tags.filter(t => t !== label));
-        }
+    const onAdd = (): void => {
+      if (!editable.value) {
+        return;
+      }
+      const tags = modelValue.value ?? [];
+      if (!innerValue.value.length || tags.includes(innerValue.value)) {
+        return;
+      }
+      emit("update:modelValue", tags.concat(innerValue.value));
+      innerValue.value = "";
+    }
 
-        return {
-            innerValue,
-            style,
-            onAdd,
-            onRemove
-        };
+    const onRemove = (label: string): void => {
+      if (!editable.value) {
+        return;
+      }
+      const tags = modelValue.value ?? [];
+      if (!tags.length || !tags.includes(label)) {
+        return;
+      }
+      emit("update:modelValue", tags.filter(t => t !== label));
     }
+
+    return {
+      innerValue,
+      messages,
+      style,
+      onAdd,
+      onRemove
+    };
+  }
 });
 </script>

package/components/FSTextArea.vue

@@ -0,0 +1,207 @@
+<template>
+    <FSCol>
+        <slot name="label">
+            <FSRow :wrap="false">
+                <FSSpan
+                    v-if="$props.label"
+                    class="fs-text-area-label"
+                    font="text-overline"
+                    :style="style"
+                >
+                    {{ $props.label }}
+                </FSSpan>
+                <FSSpan
+                    v-if="$props.label && $props.required"
+                    class="fs-text-area-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-text-area-messages"
+                    font="text-overline"
+                    :style="style"
+                >
+                    {{ messages.join(", ") }}
+                </FSSpan>
+            </FSRow>
+        </slot>
+        <v-textarea
+            :class="classes"
+            variant="outlined"
+            hide-details
+            :style="style"
+            :rows="$props.rows"
+            :rules="$props.rules"
+            :noResize="!$props.resize"
+            :autoGrow="$props.autoGrow"
+            :readonly="!$props.editable"
+            :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-textarea>
+        <slot name="description">
+            <FSSpan
+                v-if="$props.description"
+                class="fs-text-area-description"
+                font="text-underline"
+                :style="style"
+            >
+                {{ $props.description }}
+            </FSSpan>
+        </slot>
+    </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, toRefs } from "vue";
+
+import { useColors, useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+import FSSpan from "./FSSpan.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+    name: "FSTextArea",
+    components: {
+        FSSpan,
+        FSCol,
+        FSRow
+    },
+    inheritAttrs: false,
+    props: {
+        label: {
+            type: String,
+            required: true,
+            default: null
+        },
+        description: {
+            type: String,
+            required: false,
+            default: null
+        },
+        modelValue: {
+            type: String,
+            required: false,
+            default: null
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Dark
+        },
+        required: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        rows: {
+            type: Number,
+            required: false,
+            default: 1
+        },
+        resize: {
+            type: Boolean,
+            required: false,
+            default: true
+        },
+        autoGrow: {
+            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 { color, rows, autoGrow, editable } = toRefs(props);
+
+        const colors = useColors().getColors(color.value);
+
+        const errors = useColors().getColors(ColorBase.Error);
+        const lights = useColors().getColors(ColorBase.Light);
+        const darks = useColors().getColors(ColorBase.Dark);
+
+        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+            let height: string | undefined = undefined;
+            let minHeight: string | undefined = undefined;
+            if (!autoGrow.value) {
+                const base = useBreakpoints().isMobileSized() ? 30 : 42;
+                const row = useBreakpoints().isMobileSized() ? 16 : 20;
+                minHeight = `${base}px`;
+                if (rows.value > 1) {
+                    height = `${base + (rows.value - 1) * row}px`;
+                }
+                else {
+                    height = `${base}px`;
+                }
+            }
+            if (!editable.value) {
+                return {
+                    "--fs-text-area-cursor"             : "default",
+                    "--fs-text-area-border-color"       : lights.base,
+                    "--fs-text-area-color"              : lights.dark,
+                    "--fs-text-area-active-border-color": lights.base,
+                    "--fs-text-area-min-height"         : minHeight,
+                    "--fs-text-area-height"             : height
+                };
+            }
+            return {
+                "--fs-text-area-cursor"             : "text",
+                "--fs-text-area-border-color"       : colors.base,
+                "--fs-text-area-color"              : darks.base,
+                "--fs-text-area-active-border-color": colors.dark,
+                "--fs-text-area-error-color"        : errors.base,
+                "--fs-text-area-error-border-color" : errors.base,
+                "--fs-text-area-min-height"         : minHeight,
+                "--fs-text-area-height"             : height
+            };
+        });
+
+        const messages = computed(() => {
+            const messages = [];
+            for (const rule of props.rules) {
+                const message = rule(props.modelValue);
+                if (typeof(message) === "string") {
+                    messages.push(message);
+                }
+            }
+            return messages;
+        });
+
+        const classes = computed((): string[] => {
+            const classes = ["fs-text-area"];
+            if (autoGrow.value) {
+                classes.push("fs-text-area-auto-grow");
+            }
+            return classes;
+        });
+
+        return {
+            messages,
+            style,
+            classes
+        };
+    }
+});
+</script>