@dative-gpi/foundation-shared-components 0.0.6 → 0.0.8

package/components/FSSearchField.vue

@@ -1,30 +1,31 @@
 <template>
-    <FSTextField
-        :label="$props.label"
-        :description="$props.description"
-        :type="type"
-        :color="$props.color"
-        :required="$props.required"
-        :editable="$props.editable"
-        :value="innerValue"
-        @update:value="(value) => innerValue = value"
-        v-bind="$attrs"
-    >
-        <template #append>
-            <FSButton
-                :prependIcon="$props.buttonPrependIcon"
-                :label="$props.buttonLabel"
-                :appendIcon="$props.buttonAppendIcon"
-                :variant="$props.buttonVariant"
-                :color="$props.buttonColor"
-                :editable="$props.editable"
-                @click="onUpdate"
-            />
-        </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"
+      :color="$props.color"
+      :required="$props.required"
+      :editable="$props.editable"
+      :modelValue="innerValue"
+      @update:modelValue="(value) => innerValue = value"
+      v-bind="$attrs"
+  >
+    <template #append>
+      <slot name="append">
+        <FSButton
+          :prependIcon="$props.buttonPrependIcon"
+          :label="$props.buttonLabel"
+          :appendIcon="$props.buttonAppendIcon"
+          :variant="$props.buttonVariant"
+          :color="$props.buttonColor"
+          :editable="$props.editable"
+          @click="onUpdate"
+        />
+      </slot>
+    </template>
+    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </FSTextField>
 </template>
 
 <script lang="ts">
@@ -37,86 +38,86 @@ import FSButton from "./FSButton.vue";
 import FSIcon from "./FSIcon.vue";
 
 export default defineComponent({
-    name: "FSSearchField",
-    components: {
-        FSTextField,
-        FSButton,
-        FSIcon
+  name: "FSSearchField",
+  components: {
+    FSTextField,
+    FSButton,
+    FSIcon
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
     },
-    props: {
-        label: {
-            type: String,
-            required: false,
-            default: null
-        },
-        description: {
-            type: String,
-            required: false,
-            default: null
-        },
-        buttonPrependIcon: {
-            type: String,
-            required: false,
-            default: "mdi-magnify"
-        },
-        buttonLabel: {
-            type: String,
-            required: false,
-            default: null
-        },
-        buttonAppendIcon: {
-            type: String,
-            required: false,
-            default: null
-        },
-        buttonVariant: {
-            type: String as PropType<"standard" | "full" | "icon">,
-            required: false,
-            default: "standard"
-        },
-        value: {
-            type: String,
-            required: false,
-            default: null
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Dark
-        },
-        buttonColor: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Primary
-        },
-        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, { emit }) {
-        const { editable } = toRefs(props);
+    buttonPrependIcon: {
+      type: String,
+      required: false,
+      default: "mdi-magnify"
+    },
+    buttonLabel: {
+      type: String,
+      required: false,
+      default: null
+    },
+    buttonAppendIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    buttonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: null
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorBase.Dark
+    },
+    buttonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorBase.Primary
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { editable } = toRefs(props);
 
-        const innerValue: Ref<String> = ref(props.value);
+    const innerValue: Ref<String> = ref(props.modelValue);
 
-        const onUpdate = (): void => {
-            if (!editable.value) {
-                return;
-            }
-            emit("update:value", innerValue.value);
-        };
+    const onUpdate = (): void => {
+      if (!editable.value) {
+        return;
+      }
+      emit("update:modelValue", innerValue.value);
+    };
 
-        return {
-            innerValue,
-            onUpdate
-        };
-    }
+    return {
+      innerValue,
+      onUpdate
+    };
+  }
 });
 </script>

package/components/FSSlider.vue

@@ -0,0 +1,132 @@
+<template>
+  <FSCol>
+    <slot name="label">
+      <FSRow :wrap="false">
+        <FSSpan
+          v-if="$props.label"
+          class="fs-slider-label"
+          font="text-overline"
+          :style="style"
+        >
+          {{ $props.label }}
+        </FSSpan>
+        <FSSpan
+          v-if="$props.label && $props.required"
+          class="fs-slider-label"
+          style="margin-left: -8px;"
+          font="text-overline"
+          :ellipsis="false"
+          :style="style"
+        >
+          *
+        </FSSpan>
+      </FSRow>
+    </slot>
+    <v-slider
+      class="fs-slider"
+      :ripple="false"
+      :style="style"
+      :elevation="0"
+      no-details
+      v-bind="$attrs"
+    >
+      <template v-for="(_, name) in slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </v-slider>
+    <slot name="description">
+      <FSSpan
+        v-if="$props.description"
+        class="fs-slider-description"
+        font="text-underline"
+        :style="style"
+      >
+        {{ $props.description }}
+      </FSSpan>
+    </slot>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, toRefs } from "vue";
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+import FSSpan from "./FSSpan.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+   name: "FSSlider",
+   components: {
+    FSSpan,
+    FSCol,
+    FSRow
+   },
+   props: {
+    label: {
+      type: String,
+      required: true,
+      default: null
+    },
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      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
+    }
+   },
+   setup(props) {
+    const { color, editable } = toRefs(props);
+
+    const colors = useColors().getColors(color.value);
+
+    const errors = useColors().getColors(ColorBase.Error);
+    const lights = useColors().getColors(ColorBase.Light);
+    const darks = useColors().getColors(ColorBase.Dark);
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      if (!editable.value) {
+        return {
+          "--fs-text-field-cursor"             : "default",
+          "--fs-text-field-border-color"       : lights.base,
+          "--fs-text-field-color"              : lights.dark,
+          "--fs-text-field-active-border-color": lights.base
+        };
+      }
+      return {
+        "--fs-text-field-cursor"             : "text",
+        "--fs-text-field-border-color"       : colors.base,
+        "--fs-text-field-color"              : darks.base,
+        "--fs-text-field-active-border-color": colors.dark,
+        "--fs-text-field-error-color"        : errors.base,
+        "--fs-text-field-error-border-color" : errors.base
+      };
+    });
+
+    return {
+      style
+    };
+   } 
+});
+</script>

package/components/FSSwitch.vue

@@ -7,7 +7,7 @@
                 inset
                 :style="style"
                 :ripple="false"
-                :modelValue="$props.value"
+                :modelValue="$props.modelValue"
                 @update:modelValue="onToggle"
                 v-bind="$attrs"
             />
@@ -64,7 +64,7 @@ export default defineComponent({
             required: false,
             default: null
         },
-        value: {
+        modelValue: {
             type: Boolean,
             required: false,
             default: false
@@ -80,9 +80,9 @@ export default defineComponent({
             default: true
         }
     },
-    emits: ["update:value"],
+    emits: ["update:modelValue"],
     setup(props, { emit }) {
-        const { value, color, editable } = toRefs(props);
+        const { modelValue, color, editable } = toRefs(props);
 
         const colors = useColors().getColors(color.value);
 
@@ -93,7 +93,7 @@ export default defineComponent({
         const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
             if (!editable.value) {
                 return {
-                    "--fs-switch-translate-x": value.value ? "8px" : "-8px",
+                    "--fs-switch-translate-x": modelValue.value ? "8px" : "-8px",
                     "--fs-switch-cursor": "default",
                     "--fs-switch-track-color": lights.dark,
                     "--fs-switch-thumb-color": backgrounds.base,
@@ -101,21 +101,21 @@ export default defineComponent({
                 };
             }
             return {
-                "--fs-switch-translate-x": value.value ? "8px" : "-8px",
+                "--fs-switch-translate-x": modelValue.value ? "8px" : "-8px",
                 "--fs-switch-cursor": "pointer",
-                "--fs-switch-track-color": value.value ? colors.base : darks.base,
+                "--fs-switch-track-color": modelValue.value ? colors.base : darks.base,
                 "--fs-switch-thumb-color": backgrounds.base,
                 "--fs-switch-color": darks.base
             };
         });
 
-        const font = computed((): string => value.value ? "text-button" : "text-body");
+        const font = computed((): string => modelValue.value ? "text-button" : "text-body");
 
         const onToggle = (): void => {
             if (!editable.value) {
                 return;
             }
-            emit("update:value", !value.value);
+            emit("update:modelValue", !modelValue.value);
         }
 
         return {