@dative-gpi/foundation-shared-components 0.0.31 → 0.0.33

package/components/FSClickable.vue

@@ -25,10 +25,10 @@
       />
     </template>
   </button>
-  <a
+  <router-link
     v-else
     :class="wrapperClasses"
-    :href="href"
+    :to="href"
   >
     <FSCard
       :border="$props.border"
@@ -49,7 +49,7 @@
         :color="loadColor"
       />
     </template>
-  </a>
+  </router-link>
 </template>
 
 <script lang="ts">

package/components/FSForm.vue

@@ -1,5 +1,6 @@
 <template>
   <v-form
+    class="fs-form"
     ref="formRef"
     :validateOn="validateOn"
     @submit.stop="onSubmit"

package/components/FSIcon.vue

@@ -1,6 +1,7 @@
 <template>
   <v-icon
     :class="classes"
+    :color="color"
     v-bind="$attrs"
   >
     <slot />
@@ -10,6 +11,9 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorBase } from "@dative-gpi/foundation-shared-components/models";
+
 export default defineComponent({
   name: "FSIcon",
   props: {
@@ -17,15 +21,35 @@ export default defineComponent({
       type: String as PropType<"s" | "m" | "l">,
       required: false,
       default: "m"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: null
+    },
+    variant: {
+      type: String as PropType<"base" | "light" | "dark">,
+      required: false,
+      default: "base"
     }
   },
   setup(props) {
+    const { getColors } = useColors();
+
+    const color = computed((): string | null => {
+      if (props.color) {
+        return getColors(props.color)[props.variant];
+      }
+      return null;
+    });
+
     const classes = computed((): string[] => {
       return [`fs-icon-${props.size}`];
     });
 
     return {
-      classes
+      classes,
+      color
     };
   }
 });

package/components/FSLink.vue

@@ -1,14 +1,14 @@
 <template>
-  <a
+  <router-link
     :class="classes"
     :style="style"
-    :href="href"
+    :to="href"
     v-bind="$attrs"
   >
     <slot>
       {{ $props.label }}
     </slot>
-  </a>
+  </router-link>
 </template>
 
 <script lang="ts">

package/models/rules.ts

@@ -12,6 +12,7 @@ export const TextRules = {
     min: (min: number, message: string) => (value: string) => value.length >= min || (message ?? $tr("ui.rules.text-min", "Must be at least {0} characters", min.toString())),
     max: (max: number, message: string) => (value: string) => value.length <= max || (message ?? $tr("ui.rules.text-max", "Must be at most {0} characters", max.toString())),
     email: (message: string) => (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || (message ?? $tr("ui.rules.text-email", "Must be a valid email")),
+    phone: (message: string) => (value: string) => /^[\+]?([0-9]+[ -]?)+$/.test(value) || (message ?? $tr("ui.rules.text-phone", "Must be a valid phone number")),
     digit: (message: string) => (value: string) => /(?=.*\d)/.test(value) || (message ?? $tr("ui.rules.text-digit", "Must contain a digit")),
     uppercase: (message: string) => (value: string) => /(?=.*[A-Z])/.test(value) || (message ?? $tr("ui.rules.text-uppercase", "Must contain an uppercase letter")),
     lowercase: (message: string) => (value: string) => /(?=.*[a-z])/.test(value) || (message ?? $tr("ui.rules.text-lowercase", "Must contain a lowercase letter")),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.31",
+  "version": "0.0.33",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.31",
-    "@dative-gpi/foundation-shared-services": "0.0.31",
+    "@dative-gpi/foundation-shared-domain": "0.0.33",
+    "@dative-gpi/foundation-shared-services": "0.0.33",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "8bbb2596550d62f527c9f288316335094a788efc"
+  "gitHead": "c00c4149541805edb49a824ad08bf277e5b7752b"
 }

package/styles/components/fs_form.scss

@@ -0,0 +1,3 @@
+.fs-form {
+    width: 100%;
+}

package/styles/components/index.scss

@@ -21,6 +21,7 @@
 @import "fs_divider.scss";
 @import "fs_fade_out.scss";
 @import "fs_filter_button.scss";
+@import "fs_form.scss";
 @import "fs_header_button.scss";
 @import "fs_hidden_button.scss";
 @import "fs_icon_field.scss";