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

package/{models/FSButtons.ts → aliases/FSButton.ts}

@@ -1,7 +1,10 @@
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { useTranslationsProvider } from "@dative-gpi/foundation-shared-services";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
 
+const { $tr } = useTranslationsProvider();
+
 export const FSButtonsAliases = {
     FSButtonSearch: FSButton,
     FSButtonSearchMini: FSButton,
@@ -20,92 +23,92 @@ export const FSButtonsAliases = {
 export const FSButtonsProps = {
     FSButtonSearch: {
         prependIcon: "mdi-magnify",
-        label: "Search",
+        label: $tr("ui.button.search", "Search"),
         variant: "standard",
-        color: ColorBase.Primary
+        color: ColorEnum.Primary
     },
     FSButtonSearchMini: {
         prependIcon: "mdi-magnify",
         label: undefined,
         variant: "standard",
-        color: ColorBase.Primary
+        color: ColorEnum.Primary
     },
     FSButtonSearchIcon: {
         icon: "mdi-magnify",
         label: undefined,
         variant: "icon",
-        color: ColorBase.Primary
+        color: ColorEnum.Primary
     },
     FSButtonRemove: {
         prependIcon: "mdi-delete-outline",
-        label: "Remove",
+        label: $tr("ui.button.remove", "Remove"),
         variant: "standard",
-        color: ColorBase.Error
+        color: ColorEnum.Error
     },
     FSButtonRemoveMini: {
         prependIcon: "mdi-delete-outline",
         label: undefined,
         variant: "standard",
-        color: ColorBase.Error
+        color: ColorEnum.Error
     },
     FSButtonRemoveIcon: {
         icon: "mdi-delete-outline",
         label: undefined,
         variant: "icon",
-        color: ColorBase.Error
+        color: ColorEnum.Error
     },
     FSButtonSave: {
         prependIcon: "mdi-content-save-outline",
-        label: "Save",
+        label: $tr("ui.button.save", "Save"),
         variant: "standard",
-        color: ColorBase.Primary
+        color: ColorEnum.Primary
     },
     FSButtonSaveMini: {
         prependIcon: "mdi-content-save-outline",
         label: undefined,
         variant: "standard",
-        color: ColorBase.Primary
+        color: ColorEnum.Primary
     },
     FSButtonSaveIcon: {
         icon: "mdi-content-save-outline",
         label: undefined,
         variant: "icon",
-        color: ColorBase.Primary
+        color: ColorEnum.Primary
     },
     FSButtonCancel: {
         prependIcon: "mdi-cancel",
-        label: "Cancel",
+        label: $tr("ui.button.cancel", "Cancel"),
         variant: "standard",
-        color: ColorBase.Light
+        color: ColorEnum.Light
     },
     FSButtonCancelMini: {
         prependIcon: "mdi-cancel",
         label: undefined,
         variant: "standard",
-        color: ColorBase.Light
+        color: ColorEnum.Light
     },
     FSButtonCancelIcon: {
         icon: "mdi-cancel",
         label: undefined,
         variant: "icon",
-        color: ColorBase.Light
+        color: ColorEnum.Light
     },
     FSButtonDocumentation: {
         prependIcon: "mdi-file-document-outline",
-        label: "Documentation",
+        label: $tr("ui.button.documentation", "Documentation"),
         variant: "standard",
-        color: ColorBase.Light
+        color: ColorEnum.Light
     },
     FSButtonDocumentationMini: {
         prependIcon: "mdi-file-document-outline",
         label: undefined,
         variant: "standard",
-        color: ColorBase.Light
+        color: ColorEnum.Light
     },
     FSButtonDocumentationIcon: {
         icon: "mdi-file-document-outline",
         label: undefined,
         variant: "icon",
-        color: ColorBase.Light
+        color: ColorEnum.Light
     }
 }

package/aliases/index.ts

@@ -0,0 +1 @@
+export * from "./FSButton";

package/components/FSAutocompleteField.vue

@@ -0,0 +1,207 @@
+<template>
+  <FSCol>
+    <slot v-if="!$props.hideHeader" name="label">
+      <FSRow :wrap="false">
+        <FSSpan
+          v-if="$props.label"
+          class="fs-autocomplete-field-label"
+          font="text-overline"
+          :style="style"
+        >
+          {{ $props.label }}
+        </FSSpan>
+        <FSSpan
+          v-if="$props.label && $props.required"
+          class="fs-autocomplete-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-autocomplete-field-messages"
+          font="text-overline"
+          :style="style"
+        >
+          {{ messages.join(", ") }}
+        </FSSpan>
+      </FSRow>
+    </slot>
+    <v-autocomplete
+      menuIcon="mdi-chevron-down"
+      clearIcon="mdi-close"
+      variant="outlined"
+      :style="style"
+      :class="classes"
+      :hideDetails="true"
+      :items="$props.items"
+      :autoSelectFirst="true"
+      :multiple="$props.multiple"
+      :error="messages.length > 0"
+      :itemTitle="$props.itemTitle"
+      :itemValue="$props.itemValue"
+      :readonly="!$props.editable"
+      :clearable="$props.editable"
+      :modelValue="$props.modelValue"
+      @update:modelValue="(value) => $emit('update:modelValue', value)"
+      v-model:search="innerSearch"
+      v-bind="$attrs"
+    >
+      <template v-for="(_, name) in slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </v-autocomplete>
+    <slot name="description">
+      <FSSpan
+        v-if="$props.description"
+        class="fs-autocomplete-field-description"
+        font="text-underline"
+        :style="style"
+      >
+        {{ $props.description }}
+      </FSSpan>
+    </slot>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, watch } 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: "FSAutocompleteField",
+  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] as PropType<string[] | string>,
+      required: false,
+      default: null
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    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", "update:search"],
+  setup: (props, { emit }) => {    
+    const { slots } = useSlots();
+    delete slots.label;
+    delete slots.description;
+
+    const innerSearch = ref("");
+
+    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-autocomplete-field-cursor"             : "default",
+          "--fs-autocomplete-field-border-color"       : lights.base,
+          "--fs-autocomplete-field-color"              : lights.dark,
+          "--fs-autocomplete-field-active-border-color": lights.base
+        };
+      }
+      return {
+        "--fs-autocomplete-field-cursor"             : "text",
+        "--fs-autocomplete-field-border-color"       : lights.dark,
+        "--fs-autocomplete-field-color"              : darks.base,
+        "--fs-autocomplete-field-active-border-color": darks.dark,
+        "--fs-autocomplete-field-error-color"        : errors.base,
+        "--fs-autocomplete-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;
+    });
+
+    const classes = computed((): string[] => {
+      const classNames = ["fs-autocomplete-field"];
+      if (props.multiple) {
+        classNames.push("fs-autocomplete-multiple-field");
+      }
+      return classNames;
+    });
+
+    watch(innerSearch, () => {
+      emit("update:search", innerSearch.value);
+    });
+
+    return {
+      messages,
+      slots,
+      style,
+      classes,
+      innerSearch
+    };
+  }
+});
+</script>

package/components/FSBadge.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-badge
+    v-if="$props.content"
+    :content="$props.content"
+    :color="$props.color"
+    :bordered="true"
+  >
+    <template v-slot:default>
+      <slot />
+    </template>
+  </v-badge>
+  <slot
+    v-else
+    name="default"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+export default defineComponent({
+  name: "FSBadge",
+  props: {
+    content: {
+      type: String,
+      required: false,
+      default: null
+    }, 
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    }
+  }
+});
+</script>

package/components/FSBreadcrumbs.vue

@@ -1,69 +1,63 @@
 <template>
-    <v-breadcrumbs v-bind="$attrs" :style="style" :items="$props.items">
-        <template #title="{ item }">
-            <FSSpan :class="classes(item)">
-                {{ item.title }}
-            </FSSpan>
-        </template>
-        <template #divider>
-            <FSIcon class="fs-breadcrumbs-divider" size="m">
-                mdi-chevron-right
-            </FSIcon>
-        </template>
-    </v-breadcrumbs>
+  <v-breadcrumbs v-bind="$attrs" :style="style" :items="$props.items">
+    <template #title="{ item }">
+      <FSSpan :class="classes(item)">
+        {{ item.title }}
+      </FSSpan>
+    </template>
+    <template #divider>
+      <FSIcon
+        class="fs-breadcrumbs-divider"
+        size="m"
+      >
+        mdi-chevron-right
+      </FSIcon>
+    </template>
+  </v-breadcrumbs>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, Ref, ref } from "vue";
 
+import { ColorEnum, FSBreadcrumbItem } 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 FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
 
-export interface FSBreadcrumbItem {
-    href: string | undefined,
-    replace: boolean | undefined,
-    to: string | undefined,
-    exact: boolean | undefined,
-    title: string,
-    disabled: boolean
-}
-
 export default defineComponent({
-    name: "FSBreadcrumbs",
-    components: {
-        FSSpan,
-        FSIcon
-    },
-    props: {
-        items: {
-            type: Array as PropType<Array<FSBreadcrumbItem>>,
-            required: true,
-        }
-    },
-    setup() {
-        const darks = useColors().getColors(ColorBase.Dark);
-
-        const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
-            "--fs-breadcrumbs-color": darks.dark,
-            "--fs-breadcrumbs-active-color": darks.base,
-            "--fs-breadcrumbs-disabled-color": darks.light
-        });
-
-        const classes = (item: FSBreadcrumbItem): string[] => {
-            const classes = ["fs-breadcrumbs-label"];
-            if (item.disabled) {
-                classes.push("fs-breadcrumbs-label--disabled");
-            }
-            return classes;
-        };
-
-        return {
-            style,
-            classes
-        };
+  name: "FSBreadcrumbs",
+  components: {
+    FSSpan,
+    FSIcon
+  },
+  props: {
+    items: {
+      type: Array as PropType<FSBreadcrumbItem[]>,
+      required: true,
     }
-})
+  },
+  setup() {
+    const darks = useColors().getColors(ColorEnum.Dark);
+
+    const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
+      "--fs-breadcrumbs-color": darks.dark,
+      "--fs-breadcrumbs-active-color": darks.base,
+      "--fs-breadcrumbs-disabled-color": darks.light
+    });
+
+    const classes = (item: FSBreadcrumbItem): string[] => {
+      const classNames = ["fs-breadcrumbs-label"];
+      if (item.disabled) {
+        classNames.push("fs-breadcrumbs-label--disabled");
+      }
+      return classNames;
+    };
+
+    return {
+      style,
+      classes
+    };
+  }
+});
 </script>