@dative-gpi/foundation-shared-components 0.0.21 → 0.0.22

package/components/FSColor.vue

@@ -1,15 +1,12 @@
 <template>
-  <FSRow
-    class="fs-color"
-    :width="$props.width"
-    :height="$props.height"
-    :align="$props.align"
-    :wrap="$props.wrap"
-    :gap="$props.gap"
+  <FSCard
+    :border="$props.border"
+    :class="classes"
     :style="style"
+    v-bind="$attrs"
   >
     <slot v-bind="{ color: $props.color, colors }" />
-  </FSRow>
+  </FSCard>
 </template>
 
 <script lang="ts">
@@ -18,39 +15,19 @@ import { computed, defineComponent, PropType, ref, Ref } from "vue";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import FSRow from "./FSRow.vue";
+import FSCard from "./FSCard.vue";
 
 export default defineComponent({
   name: "FSColor",
   components: {
-    FSRow
+    FSCard
   },
   props: {
-    width: {
-      type: String as PropType<"hug" | "fill" | string>,
-      required: false,
-      default: "hug"
-    },
-    height: {
-      type: String as PropType<"hug" | "fill" | string>,
-      required: false,
-      default: "hug"
-    },
-    align: {
-      type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
-      required: false,
-      default: "center-left"
-    },
-    wrap: {
+    border: {
       type: Boolean,
       required: false,
       default: true
     },
-    gap: {
-      type: [String, Number],
-      required: false,
-      default: "8px"
-    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
@@ -64,13 +41,23 @@ export default defineComponent({
 
     const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
       "--fs-color-background-color": colors.value.light,
+      "--fs-color-border-color"    : colors.value.base,
       "--fs-color-color"           : colors.value.base,
       "--fs-color-light"           : colors.value.light,
       "--fs-color-base"            : colors.value.base,
       "--fs-color-dark"            : colors.value.dark
     });
 
+    const classes = computed((): string[] => {
+      const classNames = ["fs-color"];
+      if (props.border) {
+        classNames.push("fs-color-border");
+      }
+      return classNames;
+    });
+
     return {
+      classes,
       colors,
       style
     };

package/components/FSContainer.vue

@@ -20,7 +20,7 @@ export default defineComponent({
     padding: {
       type: [String, Number],
       required: false,
-      default: 8
+      default: "8px"
     },
     border: {
       type: Boolean,

package/components/FSLabel.vue

@@ -5,7 +5,9 @@
     :style="style"
     v-bind="$attrs"
   >
-    {{ $props.label }}
+    <slot>
+      {{ $props.label }}
+    </slot>
   </span>
   <FSLoader
     v-else

package/components/FSLink.vue

@@ -5,7 +5,9 @@
     :href="href"
     v-bind="$attrs"
   >
-    <slot />
+    <slot>
+      {{ $props.label }}
+    </slot>
   </a>
 </template>
 
@@ -19,10 +21,15 @@ import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/m
 export default defineComponent({
   name: "FSLink",
   props: {
+    label: {
+      type: [String, null, undefined],
+      required: false,
+      default: null
+    },
     to: {
-        type: [String, Object] as PropType<string | RouteLocation>,
-        required: false,
-        default: "_blank"
+      type: [String, Object] as PropType<string | RouteLocation>,
+      required: false,
+      default: "_blank"
     },
     font: {
       type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,

package/components/lists/FSDataTableUI.vue

@@ -49,7 +49,7 @@
         />
       </template>
       <FSHiddenButton
-        v-if="hiddenHeaders.length > 0"
+        v-if="innerMode === 'table' && hiddenHeaders.length > 0"
         :headers="hiddenHeaders"
         :color="$props.color"
         @update:show="(value) => updateHeader(value, 'hidden', false)"
@@ -359,7 +359,7 @@
         </template>
       </v-data-iterator>
     </template>
-    <template v-else-if="innerMode === 'iterator'">
+    <template v-else>
       <v-data-iterator
         class="fs-data-table-iterator"
         :items="innerItems"

package/components/selects/FSSelectTimeZone.vue

@@ -0,0 +1,42 @@
+<template>
+  <FSSelectField
+    :items="entities"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+
+import { useTimeZones } from "@dative-gpi/foundation-shared-services/composables";
+
+import FSSelectField from "../fields/FSSelectField.vue";
+
+export default defineComponent({
+  name: "FSSelectTimeZone",
+  components: {
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: String,
+      required: false,
+      default: null
+    },
+  },
+  emits: ["update:modelValue"],
+  setup() {
+    const { getMany, entities } = useTimeZones();
+
+    onMounted(() => {
+      getMany();
+    });
+
+    return {
+      entities
+    };
+  }
+});
+</script>

package/components/tiles/FSGroupTileUI.vue

@@ -40,16 +40,20 @@
               align="center-left"
             >
               <FSColor
-                align="center-center"
                 padding="0 8px"
                 height="24px"
                 :color="ColorEnum.Primary"
+                :border="false"
               >
-                <FSText
-                  font="text-overline"
+                <FSRow
+                  align="center-center"
                 >
-                  {{ groupsLabel }}
-                </FSText>
+                  <FSText
+                    font="text-overline"
+                  >
+                    {{ groupsLabel }}
+                  </FSText>
+                </FSRow>
               </FSColor>
               <FSSpan
                 font="text-overline"
@@ -61,16 +65,20 @@
               align="center-left"
             >
               <FSColor
-                align="center-center"
                 padding="0 8px"
                 height="24px"
                 :color="ColorEnum.Success"
+                :border="false"
               >
-                <FSText
-                  font="text-overline"
+                <FSRow
+                  align="center-center"
                 >
-                  {{ deviceOrganisationsLabel }}
-                </FSText>
+                  <FSText
+                    font="text-overline"
+                  >
+                    {{ deviceOrganisationsLabel }}
+                  </FSText>
+                </FSRow>
               </FSColor>
               <FSSpan
                 font="text-overline"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.21",
-    "@dative-gpi/foundation-shared-services": "0.0.21",
+    "@dative-gpi/foundation-shared-domain": "0.0.22",
+    "@dative-gpi/foundation-shared-services": "0.0.22",
     "@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": "27642f99177d57e7349dd826e922442a6c0720cb"
+  "gitHead": "2186455ca7eff6f916918d62b02874df3dd58150"
 }

package/styles/components/fs_color.scss

@@ -1,5 +1,6 @@
 .fs-color {
-    background-color: var(--fs-color-background-color);
+    display: flex;
+    background-color: var(--fs-color-background-color) !important;
+    border-color: var(--fs-color-border-color) !important;
     color: var(--fs-color-color);
-    border-radius: 4px;
 }