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

package/components/FSTag.vue

@@ -1,102 +1,106 @@
 <template>
-    <FSRow
-        class="fs-tag"
-        width="hug"
-        align="center-left"
-        :style="style"
-        v-bind="$attrs"
-    >
-        <slot name="default" v-bind="{ color, colors }">
-            <FSSpan class="fs-tag-label">
-                {{ $props.label }}
-            </FSSpan>
-        </slot>
-        <slot name="button" v-bind="{ color, colors }">
-            <v-btn
-                v-if="$props.editable"
-                class="fs-tag-button"
-                :ripple="false"
-                @click="$emit('remove')"
-            >
-                <FSIcon size="s">
-                    mdi-close
-                </FSIcon>
-            </v-btn>
-        </slot>
-    </FSRow>
+  <FSRow
+    class="fs-tag"
+    width="hug"
+    align="center-left"
+    :style="style"
+    :wrap="false"
+    v-bind="$attrs"
+  >
+    <slot v-bind="{ color: $props.color, colors }">
+      <FSSpan
+        v-if="$props.label"
+        class="fs-tag-label"
+      >
+        {{ $props.label }}
+      </FSSpan>
+    </slot>
+    <slot name="button" v-bind="{ color: $props.color, colors }">
+      <v-btn
+        v-if="$props.editable"
+        class="fs-tag-button"
+        :ripple="false"
+        @click="$emit('remove')"
+      >
+        <FSIcon
+          size="s"
+        >
+          mdi-close
+        </FSIcon>
+      </v-btn>
+    </slot>
+  </FSRow>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, toRefs } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
 
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
-    name: "FSTag",
-    components: {
-        FSIcon,
-        FSSpan,
-        FSRow
+  name: "FSTag",
+  components: {
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
     },
-    props: {
-        label: {
-            type: String,
-            required: true
-        },
-        variant: {
-            type: String as PropType<"standard" | "full">,
-            required: false,
-            default: "full"
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Primary
-        },
-        editable: {
-            type: Boolean,
-            required: false,
-            default: true
-        }
+    variant: {
+      type: String as PropType<"standard" | "full">,
+      required: false,
+      default: "full"
     },
-    emits: ["remove"],
-    setup(props) {
-        const { variant, color } = toRefs(props);
-
-        const textColors = useColors().getContrasts(color.value);
-        const colors = useColors().getColors(color.value);
-
-        const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
-            switch (variant.value) {
-                case "standard": return {
-                    "--fs-tag-background-color": colors.light,
-                    "--fs-tag-color": textColors.base,
-                    "--fs-tag-hover-background-color": colors.base,
-                    "--fs-tag-hover-color": textColors.light,
-                    "--fs-tag-active-background-color": colors.dark,
-                    "--fs-tag-active-color": textColors.light
-                };
-                case "full": return {
-                    "--fs-tag-background-color": colors.base,
-                    "--fs-tag-color": textColors.light,
-                    "--fs-tag-hover-background-color": colors.base,
-                    "--fs-tag-hover-color": textColors.light,
-                    "--fs-tag-active-background-color": colors.dark,
-                    "--fs-tag-active-color": textColors.light
-                };
-            }
-        });
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["remove"],
+  setup(props) {
+    const textColors = computed(() => useColors().getContrasts(props.color));
+    const colors = computed(() => useColors().getColors(props.color));
 
-        return {
-            colors,
-            color,
-            style
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      switch (props.variant) {
+        case "standard": return {
+          "--fs-tag-background-color"       : colors.value.light,
+          "--fs-tag-color"                  : textColors.value.base,
+          "--fs-tag-hover-background-color" : colors.value.base,
+          "--fs-tag-hover-color"            : textColors.value.light,
+          "--fs-tag-active-background-color": colors.value.dark,
+          "--fs-tag-active-color"           : textColors.value.light
         };
-    }
+        case "full": return {
+          "--fs-tag-background-color"       : colors.value.base,
+          "--fs-tag-color"                  : textColors.value.light,
+          "--fs-tag-hover-background-color" : colors.value.base,
+          "--fs-tag-hover-color"            : textColors.value.light,
+          "--fs-tag-active-background-color": colors.value.dark,
+          "--fs-tag-active-color"           : textColors.value.light
+        };
+      }
+    });
+
+    return {
+      colors,
+      style
+    };
+  }
 });
 </script>

package/components/FSTagField.vue

@@ -3,17 +3,15 @@
     <FSTextField
       :label="$props.label"
       :description="$props.description"
-      :type="type"
-      :color="$props.color"
+      :hideHeader="$props.hideHeader"
       :required="$props.required"
       :editable="$props.editable"
       :error="messages.length > 0"
-      :modelValue="innerValue"
-      @update:modelValue="(value) => innerValue = value"
       @keydown.enter="onAdd"
+      v-model="innerValue"
       v-bind="$attrs"
     >
-      <template #label>
+      <template v-if="!$props.hideHeader" #label>
         <slot name="label">
           <FSRow :wrap="false">
             <FSSpan
@@ -48,14 +46,13 @@
       </template>
       <template #append-inner>
         <slot name="append-inner">
-          <FSIcon
-            class="fs-tag-field-icon"
-            size="m"
-            :style="style"
+          <FSButton
+            variant="icon"
+            icon="mdi-tag-outline"
+            :editable="$props.editable"
+            :color="ColorEnum.Dark"
             @click="onAdd"
-          >
-            mdi-tag-outline
-          </FSIcon>
+          />
         </slot>
       </template>
       <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
@@ -73,13 +70,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, toRefs } from "vue";
+import { computed, defineComponent, PropType, ref } from "vue";
 
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
 
 import FSTextField from "./FSTextField.vue";
 import FSTagGroup from "./FSTagGroup.vue";
+import FSButton from "./FSButton.vue";
 import FSSpan from "./FSSpan.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
@@ -89,6 +87,7 @@ export default defineComponent({
   components: {
     FSTextField,
     FSTagGroup,
+    FSButton,
     FSSpan,
     FSCol,
     FSRow
@@ -109,11 +108,6 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorBase.Dark
-    },
     tagVariant: {
       type: String as PropType<"standard" | "full">,
       required: false,
@@ -122,7 +116,12 @@ export default defineComponent({
     tagColor: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorBase.Primary
+      default: ColorEnum.Primary
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
     },
     required: {
       type: Boolean,
@@ -142,32 +141,28 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { modelValue, rules, editable } = toRefs(props);
 
-    const innerValue = ref("");
+    const errors = useColors().getColors(ColorEnum.Error);
+    const lights = useColors().getColors(ColorEnum.Light);
+    const darks = useColors().getColors(ColorEnum.Dark);
 
-    const errors = useColors().getColors(ColorBase.Error);
-    const darks = useColors().getColors(ColorBase.Dark);
+    const innerValue = ref("");
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
-      if (!editable.value) {
+      if (!props.editable) {
         return {
-          "--fs-tag-field-cursor"   : "default",
-          "--fs-tag-field-base-text": darks.light,
-          "--fs-tag-field-dark-text": darks.light
+          "--fs-tag-field-color": lights.dark
         };
       }
       return {
-        "--fs-tag-field-cursor"     : "pointer",
-        "--fs-tag-field-base-text"  : darks.base,
-        "--fs-tag-field-dark-text"  : darks.dark,
+        "--fs-tag-field-color"      : darks.base,
         "--fs-tag-field-error-color": errors.base
       };
     });
 
     const messages = computed((): string[] => {
       const messages = [];
-      for (const rule of rules.value) {
+      for (const rule of props.rules) {
         const message = rule(props.modelValue);
         if (typeof(message) === "string") {
           messages.push(message);
@@ -177,10 +172,10 @@ export default defineComponent({
     });
 
     const onAdd = (): void => {
-      if (!editable.value) {
+      if (!props.editable) {
         return;
       }
-      const tags = modelValue.value ?? [];
+      const tags = props.modelValue ?? [];
       if (!innerValue.value.length || tags.includes(innerValue.value)) {
         return;
       }
@@ -189,10 +184,10 @@ export default defineComponent({
     }
 
     const onRemove = (label: string): void => {
-      if (!editable.value) {
+      if (!props.editable) {
         return;
       }
-      const tags = modelValue.value ?? [];
+      const tags = props.modelValue ?? [];
       if (!tags.length || !tags.includes(label)) {
         return;
       }
@@ -200,6 +195,7 @@ export default defineComponent({
     }
 
     return {
+      ColorEnum,
       innerValue,
       messages,
       style,

package/components/FSTagGroup.vue

@@ -1,60 +1,53 @@
 <template>
-    <FSWrapGroup v-bind="$attrs">
-        <FSTag
-            v-for="(tag, index) in $props.tags"
-            :key="index"
-            :label="tag"
-            :variant="$props.variant"
-            :color="$props.color"
-            :editable="$props.editable"
-            @remove="() => $emit('remove', tag)"
-        />
-        <slot name="default" />
-    </FSWrapGroup>
+  <FSWrapGroup v-bind="$attrs">
+    <FSTag
+      v-for="(tag, index) in $props.tags"
+      :key="index"
+      :label="tag"
+      :variant="$props.variant"
+      :color="$props.color"
+      :editable="$props.editable"
+      @remove="() => $emit('remove', tag)"
+    />
+    <slot />
+  </FSWrapGroup>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSWrapGroup from "./FSWrapGroup.vue";
 import FSTag from "./FSTag.vue";
 
-export interface FSTagItem {
-    label: string,
-    variant: "standard" | "full",
-    color: ColorBase,
-    editable: boolean
-}
-
 export default defineComponent({
-    name: "FSTagGroup",
-    components: {
-        FSWrapGroup,
-        FSTag
+  name: "FSTagGroup",
+  components: {
+    FSWrapGroup,
+    FSTag
+  },
+  props: {
+    tags: {
+      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: ColorEnum.Primary
     },
-    props: {
-        tags: {
-            type: Array as PropType<Array<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
-        },
-        editable: {
-            type: Boolean,
-            required: false,
-            default: true
-        }
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
     }
+  }
 });
 </script>

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>