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

package/components/FSText.vue

@@ -1,78 +1,88 @@
 <template>
-    <span
-        :class="classes"
-        :style="style"
-        v-bind="$attrs"
-    >
-        <slot />
-    </span>
+  <span
+    :class="classes"
+    :style="style"
+    v-bind="$attrs"
+  >
+    <slot />
+  </span>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, toRefs, useSlots } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
-    name: "FSText",
-    props: {
-        font: {
-            type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
-            required: false,
-            default: "text-body"
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Dark
-        },
-        variant: {
-            type: String as PropType<"base" | "light" | "dark">,
-            required: false,
-            default: "dark"
-        },
-        ellipsis: {
-            type: Boolean,
-            required: false,
-            default: true
-        }
+  name: "FSText",
+  props: {
+    font: {
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      required: false,
+      default: "text-body"
     },
-    setup(props) {
-        const { color, font, variant } = toRefs(props);
-
-        const colors = useColors().getColors(color.value);
-        const slots = useSlots();
+    lineClamp: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    ellipsis: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
+    variant: {
+      type: String as PropType<"base" | "light" | "dark">,
+      required: false,
+      default: "dark"
+    }
+  },
+  setup(props) {
+    const { slots } = useSlots();
 
-        const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
-            switch (variant.value) {
-                case "base": return {
-                    "--fs-text-color": colors.base
-                };
-                case "light": return {
-                    "--fs-text-color": colors.light
-                };
-                case "dark": return {
-                    "--fs-text-color": colors.dark
-                };
-            }
-        });
+    const colors = computed(() => useColors().getColors(props.color));
 
-        const classes = computed((): string[] => {
-            const classes = ["fs-text", font.value];
-            if (props.ellipsis) {
-                classes.push("fs-span-ellipsis");
-            }
-            if (!slots.default) {
-                classes.push("fs-span-pre-wrap");
-            }
-            return classes;
-        });
+    const classes = computed((): string[] => {
+      const classNames = ["fs-text", props.font];
+      if (!slots.default) {
+        classNames.push("fs-span-pre-wrap");
+      }
+      if (props.lineClamp > 1) {
+        classNames.push("fs-span-line-clamp");
+      }
+      else if (props.ellipsis) {
+        classNames.push("fs-span-ellipsis");
+      }
+      return classNames;
+    });
 
-        return {
-            classes,
-            style
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      switch (props.variant) {
+        case "base": return {
+          "--fs-span-line-clamp": props.lineClamp.toString(),
+          "--fs-text-color"     : colors.value.base
         };
-    }
+        case "light": return {
+          "--fs-span-line-clamp": props.lineClamp.toString(),
+          "--fs-text-color"     : colors.value.light
+        };
+        case "dark": return {
+          "--fs-span-line-clamp": props.lineClamp.toString(),
+          "--fs-text-color"     : colors.value.dark
+        };
+      }
+    });
+
+    return {
+      classes,
+      style
+    };
+  }
 });
 </script>

package/components/FSTextArea.vue

@@ -0,0 +1,209 @@
+<template>
+  <FSCol>
+    <slot v-if="!$props.hideHeader" 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
+      clearIcon="mdi-close"
+      variant="outlined"
+      hide-details
+      :style="style"
+      :class="classes"
+      :rows="$props.rows"
+      :rules="$props.rules"
+      :noResize="!$props.resize"
+      :autoGrow="$props.autoGrow"
+      :readonly="!$props.editable"
+      :clearable="$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 } from "vue";
+
+import { useColors, useBreakpoints } 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: "FSTextArea",
+  components: {
+    FSSpan,
+    FSCol,
+    FSRow
+  },
+  inheritAttrs: false,
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: null
+    },
+    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
+    },
+    hideHeader: {
+      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 { isMobileSized } = useBreakpoints();
+
+    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> => {
+      let height: string | undefined = undefined;
+      let minHeight: string | undefined = undefined;
+      if (!props.autoGrow) {
+        const base = isMobileSized.value ? 30 : 42;
+        const row = isMobileSized.value ? 16 : 20;
+        minHeight = `${base}px`;
+        if (props.rows > 1) {
+          height = `${base + (props.rows - 1) * row}px`;
+        }
+        else {
+          height = `${base}px`;
+        }
+      }
+      if (!props.editable) {
+        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"       : lights.dark,
+        "--fs-text-area-color"              : darks.base,
+        "--fs-text-area-active-border-color": darks.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 classNames = ["fs-text-area"];
+      if (props.autoGrow) {
+        classNames.push("fs-text-area-auto-grow");
+      }
+      return classNames;
+    });
+
+    return {
+      messages,
+      style,
+      classes
+    };
+  }
+});
+</script>

package/components/FSTextField.vue

@@ -1,169 +1,172 @@
 <template>
-    <FSCol>
-        <slot name="label">
-            <FSRow :wrap="false">
-                <FSSpan
-                    v-if="$props.label"
-                    class="fs-text-field-label"
-                    font="text-overline"
-                    :style="style"
-                >
-                    {{ $props.label }}
-                </FSSpan>
-                <FSSpan
-                    v-if="$props.label && $props.required"
-                    class="fs-text-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-text-field-messages"
-                    font="text-overline"
-                    :style="style"
-                >
-                    {{ messages.join(", ") }}
-                </FSSpan>
-            </FSRow>
-        </slot>
-        <v-text-field
-            class="fs-text-field"
-            variant="outlined"
-            hide-details
-            :style="style"
-            :type="$props.type"
-            :rules="$props.rules"
-            :readonly="!$props.editable"
-            :modelValue="$props.value"
-            @update:modelValue="(value) => $emit('update:value', value)"
-            v-bind="$attrs"
+  <FSCol>
+    <slot v-if="!$props.hideHeader" name="label">
+      <FSRow :wrap="false">
+        <FSSpan
+          v-if="$props.label"
+          class="fs-text-field-label"
+          font="text-overline"
+          :style="style"
         >
-            <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-                <slot :name="name" v-bind="slotData" />
-            </template>
-        </v-text-field>
-        <slot name="description">
-            <FSSpan
-                v-if="$props.description"
-                class="fs-text-field-description"
-                font="text-underline"
-                :style="style"
-            >
-                {{ $props.description }}
-            </FSSpan>
-        </slot>
-    </FSCol>
+          {{ $props.label }}
+        </FSSpan>
+        <FSSpan
+          v-if="$props.label && $props.required"
+          class="fs-text-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-text-field-messages"
+          font="text-overline"
+          :style="style"
+        >
+          {{ messages.join(", ") }}
+        </FSSpan>
+      </FSRow>
+    </slot>
+    <v-text-field
+      class="fs-text-field"
+      clearIcon="mdi-close"
+      variant="outlined"
+      hide-details
+      :style="style"
+      :type="$props.type"
+      :rules="$props.rules"
+      :readonly="!$props.editable"
+      :clearable="$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-text-field>
+    <slot name="description">
+      <FSSpan
+        v-if="$props.description"
+        class="fs-text-field-description"
+        font="text-underline"
+        :style="style"
+      >
+        {{ $props.description }}
+      </FSSpan>
+    </slot>
+  </FSCol>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, toRefs } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+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: "FSTextField",
-    components: {
-        FSSpan,
-        FSCol,
-        FSRow
+  name: "FSTextField",
+  components: {
+    FSSpan,
+    FSCol,
+    FSRow
+  },
+  inheritAttrs: false,
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
     },
-    inheritAttrs: false,
-    props: {
-        label: {
-            type: String,
-            required: true,
-            default: null
-        },
-        description: {
-            type: String,
-            required: false,
-            default: null
-        },
-        type: {
-            type: String as PropType<"text" | "password" | "number">,
-            required: false,
-            default: "text"
-        },
-        value: {
-            type: String,
-            required: false,
-            default: null
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Dark
-        },
-        required: {
-            type: Boolean,
-            required: false,
-            default: false
-        },
-        rules: {
-            type: Array as PropType<Function[]>,
-            required: false,
-            default: () => []
-        },
-        editable: {
-            type: Boolean,
-            required: false,
-            default: true
-        }
+    description: {
+      type: String,
+      required: false,
+      default: null
     },
-    emits: ["update:value"],
-    setup(props) {
-        const { color, 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> => {
-            if (!editable.value) {
-                return {
-                    "--fs-text-field-cursor"             : "default",
-                    "--fs-text-field-border-color"       : lights.base,
-                    "--fs-text-field-color"              : lights.dark,
-                    "--fs-text-field-active-border-color": lights.base
-                };
-            }
-            return {
-                "--fs-text-field-cursor"             : "text",
-                "--fs-text-field-border-color"       : colors.base,
-                "--fs-text-field-color"              : darks.base,
-                "--fs-text-field-active-border-color": colors.dark,
-                "--fs-text-field-error-color"        : errors.base,
-                "--fs-text-field-error-border-color" : errors.base
-            };
-        });
+    type: {
+      type: String as PropType<"text" | "password" | "number">,
+      required: false,
+      default: "text"
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: null
+    },
+    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 { slots } = useSlots();
+    delete slots.label;
+    delete slots.description;
 
-        const messages = computed(() => {
-            const messages = [];
-            for (const rule of props.rules) {
-                const message = rule(props.value);
-                if (typeof(message) === "string") {
-                    messages.push(message);
-                }
-            }
-            return messages;
-        });
+    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 {
-            messages,
-            style
+          "--fs-text-field-cursor"             : "default",
+          "--fs-text-field-border-color"       : lights.base,
+          "--fs-text-field-color"              : lights.dark,
+          "--fs-text-field-active-border-color": lights.base
         };
-    }
+      }
+      return {
+        "--fs-text-field-cursor"             : "text",
+        "--fs-text-field-border-color"       : lights.dark,
+        "--fs-text-field-color"              : darks.base,
+        "--fs-text-field-active-border-color": darks.dark,
+        "--fs-text-field-error-color"        : errors.base,
+        "--fs-text-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>