@dative-gpi/foundation-shared-components 0.1.120 → 1.0.0

package/components/fields/FSColorField.vue

@@ -7,96 +7,40 @@
     <template
       #activator="{ props }"
     >
-      <FSCol>
-        <FSRow
-          height="fill"
+      <FSBaseField
+        class="fs-color-field"
+        :hideHeader="$props.hideHeader"
+        :required="$props.required"
+        :editable="$props.editable"
+        :modelValue="innerColor"
+        :description="$props.description"
+        :label="$props.label"
+        :style="style"
+        :width="$props.width"
+        v-bind="$attrs"
+      >
+        <FSCard
+          width="100%"
+          padding="8px"
           v-bind="props"
+          :class="{ 'fs-color-field-disabled': !$props.editable }"
         >
-          <FSTextField
-            class="fs-color-field"
-            :hideHeader="$props.hideHeader"
-            :required="$props.required"
-            :editable="$props.editable"
-            :clearable="false"
-            :readonly="true"
-            :modelValue="innerColor"
-            v-bind="$attrs"
+          <FSRow
+            align="center-center"
           >
-            <template
-              #prepend-inner
-            >
-              <slot
-                name="prepend-inner"
-              >
-                <FSIcon
-                  :color="innerColor"
-                >
-                  mdi-circle
-                </FSIcon>
-              </slot>
-            </template>
-            <template
-              #append
-            >
-              <FSButton
-                prependIcon="mdi-pencil"
-                variant="full"
-                :editable="$props.editable"
-                v-bind="props"
-              />
-            </template>
-          </FSTextField>
-          <FSTextField
-            v-if="$props.allowOpacity && !$props.onlyBaseColors"
-            class="fs-color-field-opacity"
-            :label="$tr('ui.color-field.opacity', 'Opacity')"
-            :hideHeader="$props.hideHeader"
-            :required="$props.required"
-            :editable="$props.editable"
-            :clearable="false"
-            :readonly="true"
-            :modelValue="(Math.round(getPercentageFromHex(innerOpacity) * 100)) + ' %'"
-          >
-            <template
-              #prepend-inner
-            >
-              <slot
-                name="prepend-inner"
-              >
-                <FSIcon
-                  :color="ColorEnum.Dark"
-                  :editable="$props.editable"
-                  :style="{ opacity: getPercentageFromHex(innerOpacity) }"
-                >
-                  mdi-circle
-                </FSIcon>
-              </slot>
-            </template>
-            <template
-              #append
+            <FSIcon
+              :color="innerColor"
+              size="20px"
+              icon="mdi-circle-half"
+            />
+            <FSText
+              font="text-overline"
             >
-              <FSButton
-                prependIcon="mdi-pencil"
-                variant="full"
-                :editable="$props.editable"
-                v-bind="props"
-              />
-            </template>
-          </FSTextField>
-        </FSRow>
-        <slot
-          name="description"
-        >
-          <FSSpan
-            v-if="$props.description"
-            class="fs-color-field-description"
-            font="text-underline"
-            :style="style"
-          >
-            {{ $props.description }}
-          </FSSpan>
-        </slot>
-      </FSCol>
+              {{ innerColor }}
+            </FSText>
+          </FSRow>
+        </FSCard>
+      </FSBaseField>
     </template>
     <FSCard
       :elevation="true"
@@ -133,30 +77,35 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { getPercentageFromHex, getHexFromPercentage } from "@dative-gpi/foundation-shared-components/utils";
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSTextField from "./FSTextField.vue";
-import FSButton from "../FSButton.vue";
+import FSBaseField from "./FSBaseField.vue";
 import FSCard from "../FSCard.vue";
 import FSIcon from "../FSIcon.vue";
+import FSText from "../FSText.vue";
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
   name: "FSColorField",
   components: {
-    FSTextField,
-    FSButton,
+    FSBaseField,
+    FSText,
     FSCard,
     FSIcon,
     FSCol,
     FSRow
   },
   props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     description: {
       type: String as PropType<string | null>,
       required: false,
@@ -196,6 +145,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fill"
     }
   },
   emits: ["update:modelValue", "update:opacity"],
@@ -209,18 +163,25 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const menu = ref(false);
-    const innerColor = ref(props.modelValue.toString().substring(0, 7));
+
+    const innerColor = ref(getColors(props.modelValue).base);
     const innerOpacity = ref(getHexFromPercentage(props.opacityValue));
     const fullColor = ref(innerColor.value + innerOpacity.value);
 
     const style = computed((): { [key: string]: string | undefined } => {
       if (!props.editable) {
         return {
-          "--fs-color-field-color": lights.dark
+          "--fs-color-field-cursor"             : "default",
+          "--fs-color-field-border-color"       : lights.base,
+          "--fs-color-field-color"              : lights.dark,
+          "--fs-color-field-colorvalue"         : fullColor.value,
         };
       }
       return {
-        "--fs-color-field-color": darks.base
+        "--fs-color-field-cursor"             : "pointer",
+        "--fs-color-field-border-color"       : lights.dark,
+        "--fs-color-field-color"              : darks.base,
+        "--fs-color-field-colorvalue"         : fullColor.value,
       };
     });
 
@@ -233,6 +194,16 @@ export default defineComponent({
       emit("update:opacity", getPercentageFromHex(innerOpacity.value));
     };
 
+    const reset = (): void => {
+      innerColor.value = getColors(props.modelValue)['base'];
+      innerOpacity.value = getHexFromPercentage(props.opacityValue);
+      fullColor.value = innerColor.value + innerOpacity.value;
+    };
+
+    watch(() => props.modelValue, () => {
+      reset();
+    });
+
     return {
       getPercentageFromHex,
       getBasePaletteColors,

package/components/fields/FSDateField.vue

@@ -19,7 +19,6 @@
         :modelValue="epochToLongDateFormat($props.modelValue)"
         @update:modelValue="onClear"
         @click="openMobileOverlay"
-        @blur="blurred = true"
       >
         <template
           #prepend-inner
@@ -95,7 +94,6 @@
             :validationValue="$props.modelValue"
             :modelValue="epochToLongDateFormat($props.modelValue)"
             @update:modelValue="onClear"
-            @blur="blurred = true"
             v-bind="props"
           >
             <template
@@ -149,10 +147,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import _ from "lodash";
 
-import { useBreakpoints, useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSDialogMenu from "../FSDialogMenu.vue";
@@ -216,31 +215,15 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { validateOn, blurred, getMessages} = useRules();
     const { epochToLongDateFormat } = useAppTimeZone();
+    const { validateOn, getMessages} = useRules();
     const { isExtraSmall } = useBreakpoints();
-    const { getColors } = useColors();
 
     const dialog = ref(false);
     const menu = ref(false);
+    
     const innerDate = ref<number | null>(props.modelValue);
 
-    const errors = getColors(ColorEnum.Error);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
-
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      if (!props.editable) {
-        return {
-          "--fs-date-field-color": lights.dark
-        };
-      }
-      return {
-        "--fs-date-field-color"      : darks.base,
-        "--fs-date-field-error-color": errors.base
-      };
-    });
-
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
     const openMobileOverlay = () => {
@@ -261,15 +244,19 @@ export default defineComponent({
       menu.value = false;
     };
 
+    watch(() => props.modelValue, () => {
+      if (!_.isEqual(innerDate.value, props.modelValue)) {
+        innerDate.value = props.modelValue;
+      }
+    });
+
     return {
       isExtraSmall,
       validateOn,
       ColorEnum,
       innerDate,
       messages,
-      blurred,
       dialog,
-      style,
       menu,
       epochToLongDateFormat,
       openMobileOverlay,

package/components/fields/FSDateRangeField.vue

@@ -15,7 +15,6 @@
     :modelValue="toShortDateFormat"
     @click="onClick"
     @update:modelValue="onClear"
-    @blur="blurred = true"
   >
     <template
       #prepend-inner
@@ -59,11 +58,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import _ from "lodash";
 
-import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSDialogSubmit from "../FSDialogSubmit.vue";
 import FSCalendarTwin from "../FSCalendarTwin.vue";
@@ -122,29 +122,13 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { epochToShortDateFormat } = useAppTimeZone();
-    const { getColors } = useColors();
-
-    const errors = getColors(ColorEnum.Error);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
 
     const dialog = ref(false);
+    
     const innerDateRange = ref<number[] | null>(props.modelValue);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      if (!props.editable) {
-        return {
-          "--fs-date-field-color": lights.dark
-        };
-      }
-      return {
-        "--fs-date-field-color"      : darks.base,
-        "--fs-date-field-error-color": errors.base
-      };
-    });
-
     const toShortDateFormat = computed((): string => {
       if (!props.modelValue || !Array.isArray(props.modelValue) || !props.modelValue.length) {
         return "";
@@ -170,15 +154,19 @@ export default defineComponent({
       dialog.value = false;
     };
 
+    watch(() => props.modelValue, () => {
+      if (!_.isEqual(innerDateRange.value, props.modelValue)) {
+        innerDateRange.value = props.modelValue;
+      }
+    });
+
     return {
-      ColorEnum,
+      toShortDateFormat,
+      innerDateRange,
       validateOn,
+      ColorEnum,
       messages,
-      blurred,
-      style,
       dialog,
-      toShortDateFormat,
-      innerDateRange,
       onClick,
       onClear,
       onSubmit

package/components/fields/FSDateTimeField.vue

@@ -19,7 +19,6 @@
         :modelValue="epochToLongTimeFormat($props.modelValue)"
         @update:modelValue="onClear"
         @click="openMobileOverlay"
-        @blur="blurred = true"
       >
         <template
           #prepend-inner
@@ -115,7 +114,6 @@
             :validationValue="$props.modelValue"
             :modelValue="epochToLongTimeFormat($props.modelValue)"
             @update:modelValue="onClear"
-            @blur="blurred = true"
             v-bind="props"
           >
             <template
@@ -195,10 +193,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
-import { useBreakpoints, useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSDialogMenu from "../FSDialogMenu.vue";
@@ -267,39 +265,16 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getUserOffsetMillis, epochToLongTimeFormat } = useAppTimeZone();
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { isExtraSmall } = useBreakpoints();
-    const { getColors } = useColors();
 
     const dialog = ref(false);
     const menu = ref(false);
     const tabs = ref(0);
+
     const innerDate = ref<number | null>(null);
     const innerTime = ref(0);
 
-    const errors = getColors(ColorEnum.Error);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
-
-    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 + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
-      innerDate.value = props.modelValue - innerTime.value;
-    }
-
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      if (!props.editable) {
-        return {
-          "--fs-date-field-color": lights.dark
-        };
-      }
-      return {
-        "--fs-date-field-color"      : darks.base,
-        "--fs-date-field-error-color": errors.base
-      };
-    });
-
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
     const openMobileOverlay = () => {
@@ -321,6 +296,23 @@ export default defineComponent({
       menu.value = false;
     };
 
+    const reset = (): void => {
+      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 + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
+        innerDate.value = props.modelValue - innerTime.value;
+      }
+      else {
+        innerDate.value = null;
+        innerTime.value = 0;
+      }
+    };
+
+    watch(() => props.modelValue, () => {
+      reset();
+    }, { immediate: true });
+
     watch([menu, dialog], (): void => {
       if (!menu.value && !dialog.value) {
         setTimeout(() => tabs.value = 0, 290);
@@ -334,9 +326,7 @@ export default defineComponent({
       innerDate,
       innerTime,
       messages,
-      blurred,
       dialog,
-      style,
       menu,
       tabs,
       epochToLongTimeFormat,

package/components/fields/FSDateTimeRangeField.vue

@@ -15,7 +15,6 @@
     :modelValue="toShortTimeFormat"
     @click="onClick"
     @update:modelValue="onClear"
-    @blur="blurred = true"
   >
     <template
       #prepend-inner
@@ -77,11 +76,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
-import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSDialogSubmit from "../FSDialogSubmit.vue";
 import FSCalendarTwin from "../FSCalendarTwin.vue";
@@ -147,51 +146,14 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getUserOffsetMillis, epochToShortTimeFormat } = useAppTimeZone();
-    const { validateOn, blurred, getMessages } = useRules();
-    const { getColors } = useColors();
-
-    const errors = getColors(ColorEnum.Error);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
+    const { validateOn, getMessages } = useRules();
 
     const dialog = ref(false);
+
     const innerDateRange = ref<number[] | null>(null);
     const innerTimeRight = ref(0);
     const innerTimeLeft = ref(0);
 
-    if (props.modelValue && Array.isArray(props.modelValue)) {
-      // FSClock just gives two numbers without consideration for the time zone
-      // We must adjust the time to the user's time zone
-      switch (props.modelValue.length) {
-        case 0: {
-          break;
-        }
-        case 1: {
-          innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
-          innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value];
-          break;
-        }
-        default: {
-          innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
-          innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
-          innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
-          break;
-        }
-      }
-    }
-
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      if (!props.editable) {
-        return {
-          "--fs-date-field-color": lights.dark
-        };
-      }
-      return {
-        "--fs-date-field-color"      : darks.base,
-        "--fs-date-field-error-color": errors.base
-      };
-    });
-
     const toShortTimeFormat = computed((): string => {
       if (!props.modelValue || !Array.isArray(props.modelValue) || !props.modelValue.length) {
         return "";
@@ -235,22 +197,52 @@ export default defineComponent({
       dialog.value = false;
     };
 
+    const reset = (): void => {
+      if (props.modelValue && Array.isArray(props.modelValue)) {
+        // FSClock just gives two numbers without consideration for the time zone
+        // We must adjust the time to the user's time zone
+        switch (props.modelValue.length) {
+          case 0: {
+            break;
+          }
+          case 1: {
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
+            innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value];
+            break;
+          }
+          default: {
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
+            innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
+            innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
+            break;
+          }
+        }
+      }
+      else {
+        innerDateRange.value = null;
+        innerTimeLeft.value = 0;
+        innerTimeRight.value = 0;
+      }
+    };
+
+    watch(() => props.modelValue, () => {
+      reset();
+    }, { immediate: true });
+
     return {
-      ColorEnum,
-      validateOn,
-      messages,
-      blurred,
-      style,
-      dialog,
       toShortTimeFormat,
       innerDateLeft,
       innerTimeLeft,
       innerDateRight,
       innerTimeRight,
       innerDateRange,
-      onClick,
+      validateOn,
+      ColorEnum,
+      messages,
+      dialog,
+      onSubmit,
       onClear,
-      onSubmit
+      onClick
     };
   }
 });