@dative-gpi/foundation-shared-components 1.0.57 → 1.0.58-groupings

package/components/fields/FSClosableSearchField.vue

@@ -0,0 +1,83 @@
+<template>
+  <FSSearchField
+    :modelValue="$props.modelValue"
+    :appendInnerIcon="$props.closable ? $props.appendInnerIcon : null"
+    :clearable="false"
+    @click:appendInner="onCloseClicked"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSSearchField>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import FSSearchField from "./FSSearchField.vue";
+
+export default defineComponent({
+  name: "FSClosableSearchField",
+  components: {
+    FSSearchField
+  },
+  props: {
+    closable: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    unfocusOnClose: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    clearOnClose: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    appendInnerIcon: {
+      type: String as PropType<string | undefined>,
+      required: false,
+      default: 'mdi-close'
+    }
+  },
+  emits: ["update:modelValue", "close"],
+  setup(props, { emit }) {
+    const onCloseClicked = ($event: MouseEvent) => {
+      if(!props.closable) {
+        return;
+      }
+
+      if (props.unfocusOnClose) {
+        $event.preventDefault();
+        $event.stopPropagation();
+        (document.activeElement  as HTMLElement)?.blur();
+      }
+      if (props.clearOnClose) {
+        emit('update:modelValue', null);
+      }
+
+      emit('close');
+    };
+
+    return {
+      onCloseClicked
+    };
+  }
+});
+</script>

package/components/fields/FSColorField.vue

@@ -1,47 +1,46 @@
 <template>
-  <v-menu
-    :closeOnContentClick="false"
-    :modelValue="menu && $props.editable"
-    @update:modelValue="menu = $event"
+  <FSBaseField
+    class="fs-color-field"
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :disabled="$props.disabled"
+    :required="$props.required"
+    :label="$props.label"
+    :width="$props.width"
+    :style="style"
+    :modelValue="innerColor"
+    v-bind="$attrs"
   >
-    <template
-      #activator="{ props }"
+    <FSCard
+      :id="activatorId"
+      padding="8px"
+      width="100%"
+      :class="{ 'fs-color-field-disabled': $props.disabled }"
     >
-      <FSBaseField
-        class="fs-color-field"
-        :description="$props.description"
-        :hideHeader="$props.hideHeader"
-        :editable="$props.editable"
-        :required="$props.required"
-        :label="$props.label"
-        :width="$props.width"
-        :style="style"
-        :modelValue="innerColor"
-        v-bind="$attrs"
+      <FSRow
+        align="center-center"
       >
-        <FSCard
-          padding="8px"
-          width="100%"
-          :class="{ 'fs-color-field-disabled': !$props.editable }"
-          v-bind="props"
+        <FSIcon
+          icon="mdi-circle-half"
+          size="20px"
+          :color="innerColor"
+        />
+        <FSText
+          font="text-overline"
         >
-          <FSRow
-            align="center-center"
-          >
-            <FSIcon
-              icon="mdi-circle-half"
-              size="20px"
-              :color="innerColor"
-            />
-            <FSText
-              font="text-overline"
-            >
-              {{ innerColor }}
-            </FSText>
-          </FSRow>
-        </FSCard>
-      </FSBaseField>
-    </template>
+          {{ innerColor }}
+        </FSText>
+      </FSRow>
+    </FSCard>
+  </FSBaseField>
+  <FSMenu
+    origin="top left"
+    min-width="300px"
+    :activator="`#${activatorId}`"
+    :closeOnContentClick="false"
+    :modelValue="menu && !$props.disabled"
+    @update:modelValue="menu = $event"
+  >
     <FSCard
       :elevation="true"
       :border="false"
@@ -73,7 +72,7 @@
         />
       </FSCol>
     </FSCard>
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -87,6 +86,7 @@ import FSBaseField from "./FSBaseField.vue";
 import FSCard from "../FSCard.vue";
 import FSIcon from "../FSIcon.vue";
 import FSText from "../FSText.vue";
+import FSMenu from "../FSMenu.vue";
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
 
@@ -94,6 +94,7 @@ export default defineComponent({
   name: "FSColorField",
   components: {
     FSBaseField,
+    FSMenu,
     FSText,
     FSCard,
     FSIcon,
@@ -131,10 +132,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     },
     allowOpacity: {
       type: Boolean,
@@ -152,10 +153,11 @@ export default defineComponent({
       default: "fill"
     }
   },
-  emits: ["update:modelValue", "update:opacity"],
+  emits: ["update", "update:modelValue", "update:opacity"],
   setup(props, { emit }) {
     const { getColors, getBasePaletteColors } = useColors();
     const { slots } = useSlots();
+    const activatorId = `activator-${Math.random().toString(36).substring(7)}`;
 
     delete slots.description;
 
@@ -169,7 +171,7 @@ export default defineComponent({
     const fullColor = ref("#00000000");
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-color-field-cursor"             : "default",
           "--fs-color-field-border-color"       : lights.base,
@@ -191,6 +193,7 @@ export default defineComponent({
       fullColor.value = innerColor.value + innerOpacity.value;
       emit("update:modelValue", innerColor.value);
       emit("update:opacity", getPercentageFromHex(innerOpacity.value));
+      emit("update", { modelValue: innerColor.value, opacity: getPercentageFromHex(innerOpacity.value) });
     };
 
     const reset = (): void => {
@@ -214,6 +217,7 @@ export default defineComponent({
       getPercentageFromHex,
       getBasePaletteColors,
       innerOpacity,
+      activatorId,
       innerColor,
       fullColor,
       ColorEnum,

package/components/fields/FSCommentField.vue

@@ -5,9 +5,10 @@
     >
       <FSImage
         :imageId="userImageId"
-        :width="32"
-        :height="32"
+        width="32px"
+        height="32px"
         rounded="circle"
+        :thumbnail="true"
       />
       <FSTextArea
         :rows="5"
@@ -17,18 +18,21 @@
       />
     </FSRow>
     <FSRow>
-      <v-spacer></v-spacer>
-      <FSButtonCancel
-        v-if="showCancelButton"
-        @click="$emit('cancel')"
-      />
-      <FSButton
-        :color="ColorEnum.Primary"
-        :loading="creating"
-        prependIcon="mdi-send-outline"
-        :label="buttonLabel ?? $tr('ui.common.publish','Publish')"
-        @click="() => $emit('submit', innertext)"
-      />
+      <FSRow 
+        align="center-right"
+      >
+        <FSButtonCancel
+          v-if="showCancelButton"
+          @click="$emit('cancel')"
+        />
+        <FSButton
+          prependIcon="mdi-send-outline"
+          :color="ColorEnum.Primary"
+          :loading="creating"
+          :label="buttonLabel ?? $tr('ui.common.publish','Publish')"
+          @click="onSubmit"
+        />
+      </FSRow>
     </FSRow>
   </FSCol>
 </template>
@@ -80,13 +84,21 @@ export default defineComponent({
     },
   },
   emits: ["submit","cancel"],
-  setup(props) {
+  setup(props, { emit }) {
 
     const innertext = ref<string | undefined>(props.text);
+
+    const onSubmit = () => {
+      if (innertext.value) {
+        emit('submit', innertext.value);
+        innertext.value = '';
+      }
+    };
     
     return {
       innertext,
-      ColorEnum
+      ColorEnum,
+      onSubmit,
     };
   },
 })

package/components/fields/FSDateField.vue

@@ -10,7 +10,7 @@
         :color="$props.color"
         :hideHeader="$props.hideHeader"
         :required="$props.required"
-        :editable="$props.editable"
+        :disabled="$props.disabled"
         :readonly="true"
         :rules="$props.rules"
         :messages="messages"
@@ -29,7 +29,7 @@
             <FSButton
               variant="icon"
               icon="mdi-calendar"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :color="ColorEnum.Dark"
               @click="openMobileOverlay"
             />
@@ -71,9 +71,10 @@
     <template
       v-else
     >
-      <v-menu
+      <FSMenu
+        min-width="300px"
         :closeOnContentClick="false"
-        :modelValue="menu && $props.editable"
+        :modelValue="menu && !$props.disabled"
         @update:modelValue="menu = $event"
       >
         <template
@@ -86,7 +87,7 @@
             :color="$props.color"
             :hideHeader="$props.hideHeader"
             :required="$props.required"
-            :editable="$props.editable"
+            :disabled="$props.disabled"
             :readonly="true"
             :rules="$props.rules"
             :messages="messages"
@@ -105,7 +106,7 @@
                 <FSButton
                   variant="icon"
                   icon="mdi-calendar"
-                  :editable="$props.editable"
+                  :disabled="$props.disabled"
                   :color="ColorEnum.Dark"
                 />
               </slot>
@@ -141,7 +142,7 @@
             />
           </FSCol>
         </FSCard>
-      </v-menu>
+      </FSMenu>
     </template>
   </FSCol>
 </template>
@@ -159,6 +160,7 @@ import FSTextField from "./FSTextField.vue";
 import FSCalendar from "../FSCalendar.vue";
 import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -169,6 +171,7 @@ export default defineComponent({
     FSCalendar,
     FSButton,
     FSCard,
+    FSMenu,
     FSCol
   },
   props: {
@@ -207,10 +210,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -227,7 +230,7 @@ export default defineComponent({
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
     const openMobileOverlay = () => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       dialog.value = true;

package/components/fields/FSDateRangeField.vue

@@ -6,7 +6,7 @@
     :color="$props.color"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :readonly="true"
     :rules="$props.rules"
     :messages="messages"
@@ -15,6 +15,7 @@
     :modelValue="toShortDateFormat"
     @click="onClick"
     @update:modelValue="onClear"
+    v-bind="$attrs"
   >
     <template
       #prepend-inner
@@ -25,7 +26,7 @@
         <FSButton
           variant="icon"
           icon="mdi-calendar"
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Dark"
         />
       </slot>
@@ -114,10 +115,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -139,7 +140,7 @@ export default defineComponent({
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules, true));
 
     const onClick = (): void => {
-      if (props.editable) {
+      if (!props.disabled) {
         dialog.value = true;
       }
     };

package/components/fields/FSDateTimeField.vue

@@ -10,7 +10,7 @@
         :color="$props.color"
         :hideHeader="$props.hideHeader"
         :required="$props.required"
-        :editable="$props.editable"
+        :disabled="$props.disabled"
         :readonly="true"
         :rules="$props.rules"
         :messages="messages"
@@ -29,7 +29,7 @@
             <FSButton
               variant="icon"
               icon="mdi-calendar"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :color="ColorEnum.Dark"
               @click="openMobileOverlay"
             />
@@ -91,9 +91,10 @@
     <template
       v-else
     >
-      <v-menu
+      <FSMenu
+        min-width="300px"
         :closeOnContentClick="false"
-        :modelValue="menu && $props.editable"
+        :modelValue="menu && !$props.disabled"
         @update:modelValue="menu = $event"
       >
         <template
@@ -106,7 +107,7 @@
             :color="$props.color"
             :hideHeader="$props.hideHeader"
             :required="$props.required"
-            :editable="$props.editable"
+            :disabled="$props.disabled"
             :readonly="true"
             :rules="$props.rules"
             :messages="messages"
@@ -125,7 +126,7 @@
                 <FSButton
                   variant="icon"
                   icon="mdi-calendar"
-                  :editable="$props.editable"
+                  :disabled="$props.disabled"
                   :color="ColorEnum.Dark"
                 />
               </slot>
@@ -187,7 +188,7 @@
             </FSCol>
           </FSCard>
         </FSWindow>
-      </v-menu>
+      </FSMenu>
     </template>
   </FSCol>
 </template>
@@ -206,6 +207,7 @@ import FSWindow from "../FSWindow.vue";
 import FSButton from "../FSButton.vue";
 import FSClock from "../FSClock.vue";
 import FSCard from "../FSCard.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -218,6 +220,7 @@ export default defineComponent({
     FSButton,
     FSClock,
     FSCard,
+    FSMenu,
     FSCol
   },
   props: {
@@ -256,10 +259,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -279,7 +282,7 @@ export default defineComponent({
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
     const openMobileOverlay = () => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       dialog.value = true;
@@ -301,7 +304,7 @@ export default defineComponent({
       if (props.modelValue) {
         // FSClock just gives two numbers without consideration for the time zone
         // We must adjust the time to the user's time zone
-        innerTime.value = Math.floor((props.modelValue + getUserOffset()) % (24 * 60 * 60 * 1000));
+        innerTime.value = Math.floor((props.modelValue + getUserOffset(props.modelValue)) % (24 * 60 * 60 * 1000));
         innerDate.value = props.modelValue - innerTime.value;
       }
       else {