@dative-gpi/foundation-shared-components 1.0.136 → 1.0.137-editable-components

package/components/FSCheckbox.vue

@@ -50,6 +50,7 @@
         v-if="$props.description"
         class="fs-checkbox-description"
         font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/FSRadio.vue

@@ -50,6 +50,7 @@
         v-if="$props.description"
         class="fs-radio-description"
         font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/FSSlider.vue

@@ -35,7 +35,7 @@
       :elevation="0"
       :tickSize="4"
       :modelValue="$props.modelValue ?? undefined"
-      @update:modelValue="(value) => $emit('update:modelValue', value)"
+      @update:modelValue="$emit('update:modelValue', $event)"
       v-bind="$attrs"
     >
       <template
@@ -55,6 +55,7 @@
         v-if="$props.description"
         class="fs-slider-description"
         font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/FSSwitch.vue

@@ -1,29 +1,25 @@
 <template>
-  <FSRow
-    width="hug"
-    align="top-left"
-    gap="16px"
+  <FSCol
     padding="8px 0px"
-    :wrap="false"
   >
-    <v-switch
-      v-if="variant == 'left'"
-      class="fs-switch"
-      hide-details
-      inset
-      :validateOn="validateOn"
-      :rules="$props.rules"
-      :ripple="false"
-      :style="style"
-      :modelValue="$props.modelValue"
-      @update:modelValue="onToggle"
-      v-bind="$attrs"
-    />
-    <slot>
-      <FSCol
-        width="hug"
-        v-if="$props.label || $props.description || $slots.description"
-      >
+    <FSRow
+      gap="16px"
+      :wrap="false"
+    >
+      <v-switch
+        v-if="variant == 'left'"
+        class="fs-switch"
+        hide-details
+        inset
+        :validateOn="validateOn"
+        :rules="$props.rules"
+        :ripple="false"
+        :style="style"
+        :modelValue="$props.modelValue"
+        @update:modelValue="onToggle"
+        v-bind="$attrs"
+      />
+      <FSCol>
         <FSSpan
           v-if="$props.label"
           class="fs-switch-label"
@@ -41,33 +37,31 @@
             class="fs-switch-description"
             font="text-overline"
             :style="style"
+            :lineClamp="2"
           >
             {{ $props.description }}
           </FSSpan>
         </slot>
-        <slot
-          name="footer"
-        />
       </FSCol>
-    </slot>
-    <FSRow
-      v-if="variant == 'right'"
-      align="center-right"
-    >
-      <v-switch
-        class="fs-switch"
-        hide-details
-        inset
-        :validateOn="validateOn"
-        :rules="$props.rules"
-        :ripple="false"
-        :style="style"
-        :modelValue="$props.modelValue"
-        @update:modelValue="onToggle"
-        v-bind="$attrs"
-      />
+      <FSRow
+        v-if="variant == 'right'"
+        align="center-right"
+      >
+        <v-switch
+          class="fs-switch"
+          hide-details
+          inset
+          :validateOn="validateOn"
+          :rules="$props.rules"
+          :ripple="false"
+          :style="style"
+          :modelValue="$props.modelValue"
+          @update:modelValue="onToggle"
+          v-bind="$attrs"
+        />
+      </FSRow>
     </FSRow>
-  </FSRow>
+  </FSCol>
 </template>
 
 <script lang="ts">

package/components/deviceOrganisations/FSStatusRichCard.vue

@@ -0,0 +1,170 @@
+<template>
+  <component
+    v-if="$props.modelStatus"
+    class="fs-status-rich-card"
+    variant="standard"
+    :is="$attrs.onClick ? FSClickable : FSCard"
+    :padding="$props.padding"
+    :height="$props.height"
+    :width="$props.width"
+    :color="color"
+    :style="style"
+  >
+    <FSCol
+      align="center-center"
+      :gap="$props.gap"
+    >
+      <FSRow
+        align="top-center"
+      >
+        <FSIcon
+          v-if="icon"
+        >
+          {{ icon }}
+        </FSIcon>
+        <FSText
+          v-if="value"
+          font="text-button"
+        >
+          {{ value }}
+        </FSText>
+      </FSRow>
+      <FSText
+        font="text-overline"
+        align="center"
+        :lineClamp="$props.titleClamp"
+      >
+        {{ title }}
+      </FSText>
+      <slot
+        name="footer"
+        v-bind="{ color }"
+      />
+    </FSCol>
+    <div
+      class="fs-status-rich-card-corner"
+    >
+      <slot
+        name="corner"
+        v-bind="{ color }"
+      />
+    </div>
+  </component>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+
+import { ColorEnum, type FSDeviceStatusGroup, type FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSClickable from "../FSClickable.vue";
+import FSCard from "../FSCard.vue";
+import FSIcon from "../FSChip.vue";
+import FSText from "../FSText.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSStatusRichCard",
+  components: {
+    FSClickable,
+    FSCard,
+    FSIcon,
+    FSText,
+    FSCol
+  },
+  props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "100px"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "160px"
+    },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "12px"
+    },
+    gap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
+    },
+    title: {
+      type: [String, null] as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    titleClamp: {
+      type: Number,
+      required: false,
+      default: 2
+    },
+    color: {
+      type: [String, null] as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    fillBackground: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modelStatus: {
+      type: Object as PropType<FSModelStatus | undefined>,
+      required: true
+    },
+    statusGroup: {
+      type: Object as PropType<FSDeviceStatusGroup | undefined>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+
+    const color = computed((): string => {
+      return props.color ?? props.statusGroup?.color ?? props.modelStatus?.colorDefault ?? ColorEnum.Primary;
+    });
+
+    const icon = computed((): string | null => {
+      return props.statusGroup?.icon ?? props.modelStatus?.iconDefault ?? null;
+    });
+
+    const title = computed((): string => {
+      return props.title ?? props.modelStatus?.label;
+    });
+
+    const value = computed((): string | null => {
+      if (props.statusGroup?.label) {
+        return props.statusGroup.label;
+      }
+      if (props.statusGroup?.value && !isNaN(parseFloat(props.statusGroup?.value))) {
+        return `${parseFloat(props.statusGroup.value).toLocaleString("fullwide", { maximumFractionDigits: 2 })} ${props.statusGroup.unit}`;
+      }
+      if (props.statusGroup?.value) {
+        return `${props.statusGroup?.value} ${props.statusGroup?.unit}`;
+      }
+      return null;
+    });
+
+    const style = computed((): StyleValue => ({
+      "--fs-status-rich-card-background-color": props.fillBackground ? getColors(color.value).light : "transparent",
+      "--fs-status-rich-card-border-color": props.fillBackground ? getColors(color.value).base : getColors(ColorEnum.Light).dark
+    }));
+
+    return {
+      FSClickable,
+      FSCard,
+      color,
+      style,
+      title,
+      value,
+      icon
+    };
+  }
+});
+</script>

package/components/fields/FSBaseField.vue

@@ -54,6 +54,7 @@
         v-if="$props.description"
         class="fs-base-field-description"
         font="text-overline"
+        :lineClamp="2"
       >
         {{ $props.description }}
       </FSSpan>

package/components/fields/FSEntityFieldUI.vue

@@ -14,18 +14,20 @@
         :wrap="false"
       >
         <FSSelectField
+          :editable="$props.editable"
+          :items="actualEntityTypes"
           :hideHeader="true"
+          :clearable="false"
           :modelValue="$props.entityType"
           @update:modelValue="$emit('update:entityType', $event)"
-          :items="actualEntityTypes"
-          :clearable="false"
         />
         <template
           v-if="itemsCount > 0"
         >
           <FSButton
-            :label="$tr('ui.common.edit', 'Edit')"
             icon="mdi-pencil"
+            :label="$tr('ui.common.edit', 'Edit')"
+            :editable="$props.editable"
             @click="$emit('click:select')"
           />
         </template>
@@ -33,8 +35,9 @@
           v-else
         >
           <FSButton
-            :label="$tr('ui.common.select', 'Select')"
             icon="mdi-plus-circle-multiple-outline"
+            :label="$tr('ui.common.select', 'Select')"
+            :editable="$props.editable"
             @click="$emit('click:select')"
           />
         </template>

package/components/fields/FSRichTextField.vue

@@ -215,7 +215,8 @@
       <FSSpan
         v-if="!readonly && $props.description"
         class="fs-rich-text-field-description"
-        font="text-underline"
+        font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/fields/FSTranslateRichTextField.vue

@@ -32,7 +32,9 @@
             >
               {{ $tr('translate-rich-text-field.translate-in', 'Translate in {0}', language.label) }}
             </FSSpan>
-            <FSIcon>{{ language.icon }}</FSIcon>
+            <FSIcon>
+              {{ language.icon }}
+            </FSIcon>
           </FSRow>
         </template>
       </FSRichTextField>

package/components/tiles/FSGroupTileUI.vue

@@ -97,6 +97,13 @@
           :imageId="$props.imageId"
           :width="imageSize"
         />
+        <FSIconCard
+          v-else-if="$props.icon"
+          backgroundVariant="standard"
+          :backgroundColor="ColorEnum.Background"
+          :icon="$props.icon"
+          :size="imageSize"
+        />
       </FSRow>
     </FSCol>
   </FSTile>
@@ -108,6 +115,7 @@ import { computed, defineComponent, type PropType } from "vue";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSIconCard from "../FSIconCard.vue";
 import FSImage from "../FSImage.vue";
 import FSColor from "../FSColor.vue";
 import FSSpan from "../FSSpan.vue";
@@ -118,6 +126,7 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSGroupTileUI",
   components: {
+    FSIconCard,
     FSImage,
     FSColor,
     FSSpan,
@@ -131,6 +140,10 @@ export default defineComponent({
       required: false,
       default: null
     },
+    icon: {
+      type: String,
+      required: false
+    },
     label: {
       type: String as PropType<string | null>,
       required: false,
@@ -183,7 +196,7 @@ export default defineComponent({
     });
 
     const infoWidth = computed((): string => {
-      if (!props.imageId) {
+      if (!props.imageId && !props.icon) {
         return "100%";
       }
       return `calc(100% - ${imageSize.value}px - 24px)`;

package/components/tiles/FSTile.vue

@@ -4,48 +4,52 @@
     :height="$props.height"
     :width="$props.width"
   >
-    <FSClickable
-      v-if="$props.singleSelect"
-      padding="12px"
-      :variant="variant"
-      :color="color"
-      :style="style"
-      width="100%"
-      height="100%"
-      @click="() => $emit('update:modelValue', !$props.modelValue)"
-      v-bind="$attrs"
-    >
-      <slot />
-    </FSClickable>
-    <FSClickable
-      v-else-if="$props.href || $props.to || $attrs.onClick"
-      variant="background"
-      class="fs-tile"
-      padding="12px"
-      :color="ColorEnum.Background"
-      :href="$props.href"
-      width="100%"
-      height="100%"
-      :to="$props.to"
-      :style="style"
-      v-bind="$attrs"
+    <template
+      v-if="$props.editable"
     >
-      <slot />
-      <FSCard
-        v-if="$props.editable"
-        class="fs-tile-checkbox"
+      <FSClickable
+        v-if="$props.singleSelect"
+        padding="12px"
+        :variant="variant"
+        :color="color"
+        :style="style"
+        width="100%"
+        height="100%"
+        @click="() => $emit('update:modelValue', !$props.modelValue)"
+        v-bind="$attrs"
+      >
+        <slot />
+      </FSClickable>
+      <FSClickable
+        v-else-if="$props.href || $props.to || $attrs.onClick"
         variant="background"
-        :height="['40px', '32px']"
-        :width="['40px', '32px']"
-        :border="false"
+        class="fs-tile"
+        padding="12px"
+        :color="ColorEnum.Background"
+        :href="$props.href"
+        width="100%"
+        height="100%"
+        :to="$props.to"
+        :style="style"
         v-bind="$attrs"
       >
-        <FSCheckbox
-          :modelValue="$props.modelValue"
-          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-        />
-      </FSCard>
-    </FSClickable>
+        <slot />
+        <FSCard
+          v-if="$props.editable"
+          class="fs-tile-checkbox"
+          variant="background"
+          :height="['40px', '32px']"
+          :width="['40px', '32px']"
+          :border="false"
+          v-bind="$attrs"
+        >
+          <FSCheckbox
+            :modelValue="$props.modelValue"
+            @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+          />
+        </FSCard>
+      </FSClickable>
+    </template>
     <FSCard
       v-else
       variant="background"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.136",
+  "version": "1.0.137-editable-components",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.136",
-    "@dative-gpi/foundation-shared-services": "1.0.136"
+    "@dative-gpi/foundation-shared-domain": "1.0.137-editable-components",
+    "@dative-gpi/foundation-shared-services": "1.0.137-editable-components"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "df237c4e7f1809136efb6d7bcf19a2ddd3a47e10"
+  "gitHead": "7aa074aa1903f6d293e4606d198321e9832f030d"
 }

package/styles/components/fs_status_rich_card.scss

@@ -0,0 +1,13 @@
+.fs-status-rich-card {
+  position: relative;
+  flex-grow: 1;
+  background-color: var(--fs-status-rich-card-background-color);
+  border-color: var(--fs-status-rich-card-border-color);
+}
+
+.fs-status-rich-card-corner {
+  position: absolute;
+  display: flex;
+  right: 2px;
+  top: 2px;
+}

package/styles/components/index.scss

@@ -55,6 +55,7 @@
 @import "fs_slide_group.scss";
 @import "fs_slider.scss";
 @import "fs_span.scss";
+@import "fs_status_rich_card.scss";
 @import "fs_switch.scss";
 @import "fs_tag.scss";
 @import "fs_tabs.scss";