@dative-gpi/foundation-shared-components 0.0.7 → 0.0.9

package/components/FSCheckbox.vue

@@ -1,44 +1,49 @@
 <template>
-    <FSCol width="hug">
-        <FSRow width="hug" align="center-left">
-            <FSIcon
-                class="fs-checkbox"
-                size="checkbox"
-                :style="style"
-                @click="onToggle"
-            >
-                {{ icon }}
-            </FSIcon>
-            <slot name="default">
-                <FSSpan
-                    v-if="$props.label"
-                    class="fs-checkbox-label"
-                    :style="style"
-                    :font="font"
-                    @click="onToggle"
-                >
-                    {{ $props.label }}
-                </FSSpan>
-            </slot>
-        </FSRow>
-        <slot name="description">
-            <FSSpan
-                v-if="$props.description"
-                class="fs-checkbox-description"
-                font="text-underline"
-                :style="style"
-            >
-                {{ $props.description }}
-            </FSSpan>
-        </slot>
-    </FSCol>
+  <FSCol
+    width="hug"
+  >
+    <FSRow
+      width="hug"
+      align="center-left"
+    >
+      <FSIcon
+        class="fs-checkbox"
+        size="l"
+        :style="style"
+        @click.stop="onToggle"
+      >
+        {{ icon }}
+      </FSIcon>
+      <slot>
+        <FSSpan
+          v-if="$props.label"
+          class="fs-checkbox-label"
+          :style="style"
+          :font="font"
+          @click.stop="onToggle"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </slot>
+    </FSRow>
+    <slot name="description">
+      <FSSpan
+        v-if="$props.description"
+        class="fs-checkbox-description"
+        font="text-underline"
+        :style="style"
+      >
+        {{ $props.description }}
+      </FSSpan>
+    </slot>
+  </FSCol>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, toRefs } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
 
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
@@ -46,81 +51,83 @@ import FSRow from "./FSRow.vue";
 import FSCol from "./FSCol.vue";
 
 export default defineComponent({
-    name: "FSCheckbox",
-    components: {
-        FSIcon,
-        FSSpan,
-        FSRow,
-        FSCol
+  name: "FSCheckbox",
+  components: {
+    FSIcon,
+    FSSpan,
+    FSRow,
+    FSCol
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
     },
-    props: {
-        label: {
-            type: String,
-            required: false,
-            default: null
-        },
-        description: {
-            type: String,
-            required: false,
-            default: null
-        },
-        value: {
-            type: Boolean,
-            required: false,
-            default: false
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Primary
-        },
-        editable: {
-            type: Boolean,
-            required: false,
-            default: true
-        }
+    description: {
+      type: String,
+      required: false,
+      default: null
     },
-    emits: ["update:value"],
-    setup(props, { emit }) {
-        const { value, color, editable } = toRefs(props);
-
-        const colors = useColors().getColors(color.value);
-
-        const lights = useColors().getColors(ColorBase.Light);
-        const darks = useColors().getColors(ColorBase.Dark);
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    indeterminate: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const colors = computed(() => useColors().getColors(props.color));
+    const lights = useColors().getColors(ColorEnum.Light);
+    const darks = useColors().getColors(ColorEnum.Dark);
 
-        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
-            if (!editable.value) {
-                return {
-                    "--fs-checkbox-cursor": "default",
-                    "--fs-checkbox-checkbox-color": lights.dark,
-                    "--fs-checkbox-color": lights.dark
-                };
-            }
-            return {
-                "--fs-checkbox-cursor": "pointer",
-                "--fs-checkbox-checkbox-color": value.value ? colors.base : darks.base,
-                "--fs-checkbox-color": darks.base
-            }
-        });
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      if (!props.editable) {
+        return {
+          "--fs-checkbox-cursor"        : "default",
+          "--fs-checkbox-checkbox-color": lights.dark,
+          "--fs-checkbox-color"         : lights.dark
+        };
+      }
+      return {
+        "--fs-checkbox-cursor"        : "pointer",
+        "--fs-checkbox-checkbox-color": (props.modelValue || props.indeterminate) ? colors.value.base : darks.base,
+        "--fs-checkbox-color"         : darks.base
+      }
+    });
 
-        const icon = computed((): string => value.value ? "mdi-checkbox-marked" : "mdi-checkbox-blank-outline");
+    const icon = computed((): string => props.modelValue ? "mdi-checkbox-marked" : props.indeterminate ? "mdi-minus-box" : "mdi-checkbox-blank-outline");
 
-        const font = computed((): string => value.value ? "text-button" : "text-body");
+    const font = computed((): string => props.modelValue ? "text-button" : "text-body");
 
-        const onToggle = (): void => {
-            if (!editable.value) {
-                return;
-            }
-            emit("update:value", !value.value);
-        };
+    const onToggle = (): void => {
+      if (!props.editable) {
+        return;
+      }
+      emit("update:modelValue", !props.modelValue);
+    };
 
-        return {
-            style,
-            icon,
-            font,
-            onToggle
-        };
-    }
+    return {
+      style,
+      icon,
+      font,
+      onToggle
+    };
+  }
 });
 </script>

package/components/FSChip.vue

@@ -0,0 +1,140 @@
+<template>
+  <FSRow
+    width="hug"
+    align="center-left"
+    :class="classes"
+    :style="style"
+    :wrap="false"
+    v-bind="$attrs"
+  >
+    <slot name="prepend" v-bind="{ color: $props.color, colors }">
+      <FSIcon
+        v-if="$props.prependIcon"
+        size="s"
+      >
+        {{ $props.prependIcon }}
+      </FSIcon>
+    </slot>
+    <slot v-bind="{ color: $props.color, colors }">
+      <FSSpan
+        v-if="$props.label"
+        font="text-overline"
+        class="fs-chip-label"
+      >
+        {{ $props.label }}
+      </FSSpan>
+    </slot>
+    <slot name="append" v-bind="{ color: $props.color, colors }">
+      <FSIcon
+        v-if="$props.appendIcon"
+        size="s"
+      >
+        {{ $props.appendIcon }}
+      </FSIcon>
+    </slot>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSIcon from "./FSIcon.vue";
+import FSSpan from "./FSSpan.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSChip",
+  components: {
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    prependIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    appendIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    variant: {
+      type: String as PropType<"standard" | "full">,
+      required: false,
+      default: "full"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup(props) {
+    const colors = computed(() => useColors().getColors(props.color));
+    const backgrounds = useColors().getColors(ColorEnum.Background);
+
+    const textColors = computed(() => {
+      switch (props.variant) {
+        case "standard": return colors.value;
+        case "full": return useColors().getContrasts(props.color);
+      }
+    });
+
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      switch (props.variant) {
+        case "standard": return {
+          "--fs-chip-background-color"       : backgrounds.base,
+          "--fs-chip-border-color"           : colors.value.base,
+          "--fs-chip-color"                  : textColors.value.base,
+          "--fs-chip-hover-background-color" : backgrounds.base,
+          "--fs-chip-hover-border-color"     : colors.value.base,
+          "--fs-chip-hover-color"            : textColors.value.base,
+          "--fs-chip-active-background-color": backgrounds.base,
+          "--fs-chip-active-border-color"    : colors.value.dark,
+          "--fs-chip-active-color"           : textColors.value.dark
+        };
+        case "full": return {
+          "--fs-chip-background-color"       : colors.value.base,
+          "--fs-chip-border-color"           : colors.value.base,
+          "--fs-chip-color"                  : textColors.value.light,
+          "--fs-chip-hover-background-color" : colors.value.base,
+          "--fs-chip-hover-border-color"     : colors.value.base,
+          "--fs-chip-hover-color"            : textColors.value.light,
+          "--fs-chip-active-background-color": colors.value.dark,
+          "--fs-chip-active-border-color"    : colors.value.dark,
+          "--fs-chip-active-color"           : textColors.value.light
+        };
+      }
+    });
+
+    const classes = computed((): string[] => {
+      const classNames: string[] = ["fs-chip"];
+      if (props.editable) {
+        classNames.push("fs-chip-editable");
+      }
+      return classNames;
+    });
+
+    return {
+      colors,
+      style,
+      classes
+    };
+  }
+});
+</script>

package/components/FSClock.vue

@@ -0,0 +1,172 @@
+<template>
+  <FSCol
+    width="fill"
+    gap="16px"
+  >
+    <FSRow
+      align="center-center"
+    >
+      <FSTextField
+        v-if="$props.reminder"
+        :readonly="true"
+        :hideHeader="true"
+        :modelValue="epochToLongDateFormat($props.date)"
+      />
+      <v-text-field
+        class="fs-clock-field"
+        variant="outlined"
+        type="number"
+        hide-details
+        :style="style"
+        :readonly="!$props.editable"
+        :modelValue="innerHours.toString().padStart(2, '0')"
+        @update:modelValue="onChangeHours"
+      />
+      :
+      <v-text-field
+        class="fs-clock-field"
+        variant="outlined"
+        type="number"
+        hide-details
+        :style="style"
+        :readonly="!$props.editable"
+        :modelValue="innerMinutes.toString().padStart(2, '0')"
+        @update:modelValue="onChangeMinutes"
+      />
+    </FSRow>
+    <FSCol>
+      <FSSpan
+        font="text-overline"
+      >
+        {{ $tr("ui.clock.hours", "Hours") }}
+      </FSSpan>
+      <FSSlider
+        :readonly="!$props.editable"
+        :color="$props.color"
+        :step="1"
+        :max="23"
+        :min="0"
+        v-model="innerHours"
+      />
+    </FSCol>
+    <FSCol>
+      <FSSpan
+        font="text-overline"
+      >
+        {{ $tr("ui.clock.minutes", "Minutes") }}
+      </FSSpan>
+      <FSSlider
+        :readonly="!$props.editable"
+        :color="$props.color"
+        :step="1"
+        :max="59"
+        :min="0"
+        v-model="innerMinutes"
+      />
+    </FSCol>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, watch } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSTextField from "./FSTextField.vue";
+import FSSlider from "./FSSlider.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSClock",
+  components: {
+    FSTextField,
+    FSSlider,
+    FSCol,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    date: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    reminder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { epochToLongDateFormat } = useTimeZone();
+
+    const colors = computed(() => useColors().getColors(props.color));
+    const backgrounds = useColors().getColors(ColorEnum.Background);
+    const lights = useColors().getColors(ColorEnum.Light);
+    const darks = useColors().getColors(ColorEnum.Dark);
+
+    const innerHours = ref(props.modelValue ? Math.floor(props.modelValue / (60 * 60 * 1000)) : 0);
+    const innerMinutes = ref(props.modelValue ? Math.floor((props.modelValue % (60 * 60 * 1000)) / (60 * 1000)) : 0);
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      if (!props.editable) {
+        return {
+          "--fs-clock-field-cursor"             : "default",
+          "--fs-clock-field-background-color"   : backgrounds.base,
+          "--fs-clock-field-border-color"       : lights.base,
+          "--fs-clock-field-color"              : lights.dark,
+          "--fs-clock-field-active-border-color": lights.base
+        };
+      }
+      return {
+        "--fs-clock-field-cursor"             : "text",
+        "--fs-clock-field-background-color"   : colors.value.light,
+        "--fs-clock-field-border-color"       : colors.value.base,
+        "--fs-clock-field-color"              : darks.base,
+        "--fs-clock-field-active-border-color": colors.value.dark
+      };
+    });
+
+    const onChangeHours = (value: number): void => {
+      value = Math.min(23, Math.max(0, value));
+      innerHours.value = value;
+    };
+
+    const onChangeMinutes = (value: number): void => {
+      value = Math.min(59, Math.max(0, value));
+      innerMinutes.value = value;
+    };
+
+    watch([innerHours, innerMinutes], () => {
+      emit("update:modelValue", (innerHours.value * 60 * 60 * 1000) + (innerMinutes.value * 60 * 1000));
+    });
+
+    return {
+      style,
+      innerHours,
+      innerMinutes,
+      onChangeHours,
+      onChangeMinutes,
+      epochToLongDateFormat
+    };
+  }
+});
+</script>