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

package/components/FSLoadTile.vue

@@ -0,0 +1,93 @@
+<template>
+  <FSCard
+    class="fs-load-tile"
+    padding="11px"
+    :style="style"
+    :width="width"
+    :height="height"
+  >
+    <FSRow
+      align="center-center"
+      height="fill"
+      gap="24px"
+    >
+      <v-skeleton-loader
+        type="article"
+      />
+      <v-skeleton-loader
+        type="image"
+      />
+    </FSRow>
+    <FSContainer
+      v-if="$props.editable"
+      class="fs-tile-checkbox"
+      :border="false"
+    >
+      <FSCheckbox
+        :modelValue="$props.modelValue"
+        @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+      />
+    </FSContainer>
+  </FSCard>  
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSContainer from "./FSContainer.vue";
+import FSCheckbox from "./FSCheckbox.vue";
+import FSCard from "./FSCard.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSTile",
+  components: {
+    FSContainer,
+    FSCheckbox,
+    FSCard,
+    FSCol,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup() {
+    const { isMobileSized } = useBreakpoints();
+
+    const backgroundColors = useColors().getColors(ColorEnum.Background);
+
+    const width = computed(() => {
+      return isMobileSized.value ? 336 : 352;
+    });
+
+    const height = computed(() => {
+      return isMobileSized.value ? 156 : 170;
+    });
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      return {
+        "--fs-load-tile-background-color": backgroundColors.base
+      };
+    });
+
+    return {
+      width,
+      height,
+      style
+    };
+  }
+});
+</script>

package/components/FSNumberField.vue

@@ -1,65 +1,63 @@
 <template>
-    <FSTextField
-        type="number"
-        :label="$props.label"
-        :description="$props.description"
-        :color="$props.color"
-        :required="$props.required"
-        :editable="$props.editable"
-        :value="$props.value?.toString()"
-        @update:value="(value) => $emit('update:value', isNaN(parseFloat(value)) ? 0 : parseFloat(value))"
-        v-bind="$attrs"
-    >
-        <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-            <slot :name="name" v-bind="slotData" />
-        </template>
-    </FSTextField>
+  <FSTextField
+    type="number"
+    :label="$props.label"
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :modelValue="$props.modelValue?.toString()"
+    @update:modelValue="(value) => $emit('update:modelValue', isNaN(parseFloat(value)) ? 0 : parseFloat(value))"
+    v-bind="$attrs"
+  >
+    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </FSTextField>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
-
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { defineComponent } from "vue";
 
 import FSTextField from "./FSTextField.vue";
 
 export default defineComponent({
-    name: "FSNumberField",
-    components: {
-        FSTextField
+  name: "FSNumberField",
+  components: {
+    FSTextField
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
     },
-    props: {
-        label: {
-            type: String,
-            required: false,
-            default: null
-        },
-        description: {
-            type: String,
-            required: false,
-            default: null
-        },
-        value: {
-            type: Number,
-            required: false,
-            default: null
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Dark
-        },
-        required: {
-            type: Boolean,
-            required: false,
-            default: false
-        },
-        editable: {
-            type: Boolean,
-            required: false,
-            default: true
-        }
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
     },
-    emits: ["update:value"]
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"]
 });
 </script>

package/components/FSPasswordField.vue

@@ -1,119 +1,119 @@
 <template>
-    <FSTextField
-        :label="$props.label"
-        :description="$props.description"
-        :type="type"
-        :color="$props.color"
-        :required="$props.required"
-        :editable="$props.editable"
-        :value="$props.value"
-        @update:value="(value) => $emit('update:value', value)"
-        v-bind="$attrs"
-    >
-        <template #append-inner>
-            <FSIcon
-                class="fs-password-field-icon"
-                size="m"
-                :style="style"
-                @click="onToggle"
-            >
-                {{ icon }}
-            </FSIcon>
-        </template>
-        <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-            <slot :name="name" v-bind="slotData" />
-        </template>
-    </FSTextField>
+  <FSTextField
+    :label="$props.label"
+    :description="$props.description"
+    :type="type"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :modelValue="$props.modelValue"
+    @update:modelValue="(value) => $emit('update:modelValue', value)"
+    v-bind="$attrs"
+  >
+    <template #append-inner>
+      <slot name="append-inner">
+        <FSButton
+          variant="icon"
+          :icon="icon"
+          :editable="$props.editable"
+          :color="ColorEnum.Dark"
+          @click="onToggle"
+        />
+      </slot>
+    </template>
+    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </FSTextField>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, toRefs } from "vue";
+import { computed, defineComponent, ref } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSTextField from "./FSTextField.vue";
-import FSIcon from "./FSIcon.vue";
+import FSButton from "./FSButton.vue";
 
 export default defineComponent({
-    name: "FSPasswordField",
-    components: {
-        FSTextField,
-        FSIcon
+  name: "FSPasswordField",
+  components: {
+    FSTextField,
+    FSButton
+  },
+  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: String,
-            required: false,
-            default: null
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Dark
-        },
-        required: {
-            type: Boolean,
-            required: false,
-            default: false
-        },
-        editable: {
-            type: Boolean,
-            required: false,
-            default: true
-        }
+    description: {
+      type: String,
+      required: false,
+      default: null
     },
-    emits: ["update:value"],
-    setup(props) {
-        const { editable } = toRefs(props);
-
-        const stars = ref(true);
+    modelValue: {
+      type: String,
+      required: false,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const lights = useColors().getColors(ColorEnum.Light);
+    const darks = useColors().getColors(ColorEnum.Dark);
 
-        const lights = useColors().getColors(ColorBase.Light);
-        const darks = useColors().getColors(ColorBase.Dark);
+    const stars = ref(true);
 
-        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
-            if (!editable.value) {
-                return {
-                    "--fs-password-field-cursor"   : "default",
-                    "--fs-password-field-base-text": lights.dark,
-                    "--fs-password-field-dark-text": lights.dark
-                };
-            }
-            return {
-                "--fs-password-field-cursor"   : "pointer",
-                "--fs-password-field-base-text": darks.base,
-                "--fs-password-field-dark-text": darks.dark
-            };
-        });
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      if (!props.editable) {
+        return {
+          "--fs-password-field-cursor"   : "default",
+          "--fs-password-field-color": lights.dark,
+          "--fs-password-field-hover-color": lights.dark
+        };
+      }
+      return {
+        "--fs-password-field-cursor"   : "pointer",
+        "--fs-password-field-color": darks.base,
+        "--fs-password-field-hover-color": darks.dark
+      };
+    });
 
-        const type = computed((): string => stars.value ? "password" : "text");
+    const type = computed((): string => stars.value ? "password" : "text");
 
-        const icon = computed((): string => stars.value ? "mdi-eye-off-outline" : "mdi-eye-outline");
+    const icon = computed((): string => stars.value ? "mdi-eye-off-outline" : "mdi-eye-outline");
 
-        const onToggle = (): void => {
-            if (!editable.value) {
-                return;
-            }
-            stars.value = !stars.value;
-        };
+    const onToggle = (): void => {
+      if (!props.editable) {
+        return;
+      }
+      stars.value = !stars.value;
+    };
 
-        return {
-            type,
-            icon,
-            style,
-            onToggle
-        };
-    }
+    return {
+      ColorEnum,
+      type,
+      icon,
+      style,
+      onToggle
+    };
+  }
 });
 </script>

package/components/FSRadio.vue

@@ -1,44 +1,44 @@
 <template>
-    <FSCol width="hug">
-        <FSRow width="hug" align="center-left">
-            <FSIcon
-                class="fs-radio"
-                size="checkbox"
-                :style="style"
-                @click="onToggle"
-            >
-                {{ icon }}
-            </FSIcon>
-            <slot name="default">
-                <FSSpan
-                    v-if="$props.label"
-                    class="fs-radio-label"
-                    :style="style"
-                    :font="font"
-                    @click="onToggle"
-                >
-                    {{ $props.label }}
-                </FSSpan>
-            </slot>
-        </FSRow>
-        <slot name="description">
-            <FSSpan
-                v-if="$props.description"
-                class="fs-radio-description"
-                font="text-underline"
-                :style="style"
-            >
-                {{ $props.description }}
-            </FSSpan>
-        </slot>
-    </FSCol>
+  <FSCol width="hug">
+    <FSRow width="hug" align="center-left">
+      <FSIcon
+        class="fs-radio"
+        size="l"
+        :style="style"
+        @click.stop="onToggle"
+      >
+        {{ icon }}
+      </FSIcon>
+      <slot>
+        <FSSpan
+          v-if="$props.label"
+          class="fs-radio-label"
+          :style="style"
+          :font="font"
+          @click.stop="onToggle"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </slot>
+    </FSRow>
+    <slot name="description">
+      <FSSpan
+        v-if="$props.description"
+        class="fs-radio-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,87 +46,84 @@ import FSRow from "./FSRow.vue";
 import FSCol from "./FSCol.vue";
 
 export default defineComponent({
-    name: "FSRadio",
-    components: {
-        FSIcon,
-        FSSpan,
-        FSRow,
-        FSCol
+  name: "FSRadio",
+  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: [String, Boolean, Number],
-            required: true
-        },
-        selected: {
-            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, selected, color, editable } = toRefs(props);
-
-        const colors = useColors().getColors(color.value);
-
-        const lights = useColors().getColors(ColorBase.Light);
-        const darks = useColors().getColors(ColorBase.Dark);
+    modelValue: {
+      type: [String, Boolean, Number],
+      required: true
+    },
+    selected: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    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-radio-cursor": "default",
-                    "--fs-radio-radio-color": lights.dark,
-                    "--fs-radio-color": lights.dark
-                };
-            }
-            return {
-                "--fs-radio-cursor": selected.value ? "default" : "pointer",
-                "--fs-radio-radio-color": selected.value ? colors.base : darks.base,
-                "--fs-radio-color" : darks.base
-            };
-        });
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      if (!props.editable) {
+        return {
+          "--fs-radio-cursor"     : "default",
+          "--fs-radio-radio-color": lights.dark,
+          "--fs-radio-color"      : lights.dark
+        };
+      }
+      return {
+        "--fs-radio-cursor"     : props.selected ? "default" : "pointer",
+        "--fs-radio-radio-color": props.selected ? colors.value.base : darks.base,
+        "--fs-radio-color"      : darks.base
+      };
+    });
 
-        const icon = computed((): string => selected.value ? "mdi-radiobox-marked" : "mdi-radiobox-blank");
+    const icon = computed((): string => props.selected ? "mdi-radiobox-marked" : "mdi-radiobox-blank");
 
-        const font = computed((): string => selected.value ? "text-button" : "text-body");
+    const font = computed((): string => props.selected ? "text-button" : "text-body");
 
-        const onToggle = (): void => {
-            if (!editable.value) {
-                return;
-            }
-            if (!selected.value) {
-                emit("update:value", value.value);
-            }
-        };
+    const onToggle = (): void => {
+      if (!props.editable) {
+        return;
+      }
+      if (!props.selected) {
+        emit("update:modelValue", props.modelValue);
+      }
+    };
 
-        return {
-            style,
-            icon,
-            font,
-            onToggle
-        };
-    }
+    return {
+      style,
+      icon,
+      font,
+      onToggle
+    };
+  }
 });
 </script>