@dative-gpi/foundation-shared-components 0.0.58 → 0.0.60

package/components/FSButton.vue

@@ -6,6 +6,7 @@
     :variant="$props.variant"
     :color="$props.color"
     :load="$props.load"
+    :href="$props.href"
     :padding="padding"
     :to="$props.to"
     :style="style"
@@ -60,6 +61,23 @@
         :color="loadColor"
       />
     </template>
+    <template v-else-if="$props.href">
+      <a
+        :href="$props.href"
+      >
+        <FSIcon
+          v-if="$props.icon"
+          size="l"
+        >
+          {{ $props.icon }}
+        </FSIcon>
+        <FSSpan
+          v-if="$props.label"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </a>
+    </template>
     <template v-else-if="$props.to">
       <router-link
         :to="$props.to"
@@ -115,7 +133,12 @@ export default defineComponent({
   },
   props: {
     to: {
-      type: [String, Object] as PropType<string | RouteLocation>,
+      type: [String, Object] as PropType<string | RouteLocation | null>,
+      required: false,
+      default: null
+    },
+    href: {
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -232,7 +255,7 @@ export default defineComponent({
     });
 
     const onClick = (event: MouseEvent) => {
-      if (!props.to && props.editable && !props.load) {
+      if (!props.to && !props.href && props.editable && !props.load) {
         emit("click", event);
       }
     };

package/components/FSClickable.vue

@@ -1,9 +1,8 @@
 <template>
-  <button
-    v-if="!href"
-    :type="$props.type"
+  <a
+    v-if="$props.href"
+    :href="$props.href"
     :style="style"
-    @click.stop="onClick"
   >
     <FSCard
       :height="$props.height"
@@ -25,11 +24,11 @@
         :color="loadColor"
       />
     </template>
-  </button>
+  </a>
   <router-link
-    v-else
+    v-else-if="$props.to"
     :style="style"
-    :to="href"
+    :to="$props.to"
   >
     <FSCard
       :height="$props.height"
@@ -52,6 +51,33 @@
       />
     </template>
   </router-link>
+  <button
+    v-else
+    :type="$props.type"
+    :style="style"
+    @click.stop="onClick"
+  >
+    <FSCard
+      :height="$props.height"
+      :width="$props.width"
+      :class="classes"
+      :style="style"
+      v-bind="$attrs"
+    >
+      <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </FSCard>
+    <template v-if="$props.load">
+      <v-progress-circular
+        class="fs-clickable-load"
+        width="2"
+        size="24"
+        :indeterminate="true"
+        :color="loadColor"
+      />
+    </template>
+  </button>
 </template>
 
 <script lang="ts">
@@ -81,7 +107,12 @@ export default defineComponent({
       default: null
     },
     to: {
-      type: [String, Object] as PropType<string | RouteLocation>,
+      type: [String, Object] as PropType<string | RouteLocation | null>,
+      required: false,
+      default: null
+    },
+    href: {
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -93,7 +124,7 @@ export default defineComponent({
     type: {
       type: String as PropType<"button" | "submit">,
       required: false,
-      default: "button"
+      default: "submit"
     },
     color: {
       type: String as PropType<ColorBase>,
@@ -200,18 +231,6 @@ export default defineComponent({
       return classNames;
     });
 
-    const href = computed((): string | null => {
-      if (!props.to || !props.editable || props.load) {
-        return null;
-      }
-      if (typeof props.to === "string") {
-        return props.to;
-      }
-      else {
-        return router.resolve(props.to).href;
-      }
-    });
-
     const loadColor = computed((): string => {
       switch (props.color) {
         case ColorEnum.Primary:
@@ -223,7 +242,7 @@ export default defineComponent({
     });
 
     const onClick = (event: MouseEvent) => {
-      if (!props.to && props.editable && !props.load) {
+      if (!props.to && !props.href && props.editable && !props.load) {
         emit("click", event);
       }
     };
@@ -232,7 +251,6 @@ export default defineComponent({
       loadColor,
       classes,
       style,
-      href,
       onClick
     };
   }

package/components/FSLink.vue

@@ -1,8 +1,18 @@
 <template>
+  <a
+    v-if="$props.href"
+    :href="$props.href"
+    :style="style"
+  >
+    <slot>
+      {{ $props.label }}
+    </slot>
+  </a>
   <router-link
+    v-else-if="$props.to"
+    :to="$props.to"
     :class="classes"
     :style="style"
-    :to="href"
     v-slot="props"
     v-bind="$attrs"
   >
@@ -28,9 +38,14 @@ export default defineComponent({
       default: null
     },
     to: {
-      type: [String, Object] as PropType<string | RouteLocation>,
+      type: [String, Object] as PropType<string | RouteLocation | null>,
       required: false,
-      default: "_blank"
+      default: null
+    },
+    href: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     font: {
       type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
@@ -96,19 +111,9 @@ export default defineComponent({
       }
     });
 
-    const href = computed((): string => {
-      if (typeof props.to === "string") {
-        return props.to;
-      }
-      else {
-        return router.resolve(props.to).href;
-      }
-    });
-
     return {
       classes,
-      style,
-      href
+      style
     };
   }
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.58",
+  "version": "0.0.60",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.58",
-    "@dative-gpi/foundation-shared-services": "0.0.58",
+    "@dative-gpi/foundation-shared-domain": "0.0.60",
+    "@dative-gpi/foundation-shared-services": "0.0.60",
     "@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": "13e01a0600c89855de090bcd7dd75bb768a96888"
+  "gitHead": "094e1265a607ecec7b13b0478c5fd0463b15c5d5"
 }