@energysage/es-ds-components 3.1.6 → 3.2.0

package/components/es-file-input.vue

@@ -48,6 +48,15 @@ const props = defineProps({
         default: false,
         required: false,
     },
+    /**
+     * When true, allows multiple file selection. When false, restricts to single file selection.
+     * Defaults to true to maintain backward compatibility.
+     */
+    multiple: {
+        type: Boolean,
+        default: true,
+        required: false,
+    },
 });
 
 let currentFiles: Array<File> = [];
@@ -204,6 +213,13 @@ async function verifyFiles(files: Array<File>) {
     // @ts-expect-error basically we're filtering out the non-Files here
     newValidFiles = newValidFiles.filter((file) => file && file.status === 'fulfilled').map((file) => file.value);
 
+    // If multiple is false, only keep the first file
+    if (!props.multiple && newValidFiles.length > 0) {
+        newValidFiles = [newValidFiles[0]];
+        // Clear existing files when single mode is enabled
+        currentFiles = [];
+    }
+
     // If the new file with name already exists in the current files
     // Don't upload the new file and display an error
     const duplicateFiles = newValidFiles.filter(({ name }) => currentFiles.some((file) => file.name === name));
@@ -211,7 +227,13 @@ async function verifyFiles(files: Array<File>) {
 
     // For new files with unused names, add them to files
     newValidFiles = newValidFiles.filter(({ name }) => !currentFiles.some((file) => file.name === name));
-    currentFiles = [...currentFiles, ...newValidFiles];
+
+    // In single file mode, replace existing files instead of adding to them
+    if (!props.multiple && newValidFiles.length > 0) {
+        currentFiles = newValidFiles;
+    } else {
+        currentFiles = [...currentFiles, ...newValidFiles];
+    }
 
     if (newValidFiles.length > 0) {
         emit('readyToUpload', newValidFiles);
@@ -328,7 +350,7 @@ const openFilePicker = () => {
             type="file"
             :accept="fileTypes.join(', ')"
             style="display: none"
-            multiple
+            :multiple="multiple"
             @change="onFileChanged($event)" />
     </div>
 </template>

package/components/es-progress.vue

@@ -1,36 +1,112 @@
 <script setup lang="ts">
 import ProgressBar from 'primevue/progressbar';
 
-const props = defineProps({
-    value: {
-        type: Number,
-        required: true,
-    },
-    height: {
-        type: String,
-        default: '0.3125rem',
-    },
-    showValue: {
-        type: Boolean,
-        default: false,
-    },
+const BASE_FONT_SIZE = 16;
+const DEFAULT_BAR_HEIGHT = 2;
+const DEFAULT_BORDER_WIDTH = 0.5;
+const DEFAULT_CIRCLE_GLOW_SIZE = 4;
+const DEFAULT_INSET_SHADOW_SIZE = 0.5;
+const DIFF_CIRCLE_SIZE_FROM_BAR_HEIGHT_IN_PX = 4;
+const DEFAULT_CIRCLE_DIMENSION = DEFAULT_BAR_HEIGHT + DIFF_CIRCLE_SIZE_FROM_BAR_HEIGHT_IN_PX;
+
+interface Props {
+    formatter?: Function;
+    height?: string;
+    showCircle?: boolean;
+    showValue?: boolean;
+    value: number;
+    valueClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    formatter: (val: number) => `${val}%`,
+    height: '0.125rem',
+    showCircle: true,
+    showValue: false,
+    valueClass: '',
 });
+
 const progressBarPt = {
     value: {
-        class: 'EsProgressValue progress-bar',
+        class: [
+            'EsProgressValue progress-bar overflow-visible position-relative rounded-sm',
+            {
+                'progress-bar--with-circle': props.showCircle,
+            },
+        ],
         style: {
             height: props.height,
-            borderRadius: props.value === 100 ? '0' : '0 0.125rem 0.125rem 0',
         },
     },
 };
+
+const barHeight = computed(() => {
+    let barHeight = DEFAULT_BAR_HEIGHT;
+
+    if (props.height.indexOf('rem') === props.height.length - 3) {
+        barHeight = parseFloat(props.height.replace('rem', '')) * BASE_FONT_SIZE;
+    } else if (props.height.indexOf('px') === props.height.length - 2) {
+        barHeight = parseInt(props.height.replace('px', ''), 10);
+    }
+
+    return barHeight;
+});
+const circleDimension = computed(
+    () => barHeight.value + (DIFF_CIRCLE_SIZE_FROM_BAR_HEIGHT_IN_PX * barHeight.value) / DEFAULT_BAR_HEIGHT,
+);
+
+const circleDimensionPx = computed(() => `${circleDimension.value}px`);
+const circleRightPx = computed(() => `${circleDimension.value * -0.5}px`);
+const circleBorderWidthPx = computed(
+    () => `${(DEFAULT_BORDER_WIDTH * circleDimension.value) / DEFAULT_CIRCLE_DIMENSION}px`,
+);
+const circleGlowSizePx = computed(
+    () => `${(DEFAULT_CIRCLE_GLOW_SIZE * circleDimension.value) / DEFAULT_CIRCLE_DIMENSION}px`,
+);
+const circleInsetShadowSizePx = computed(
+    () => `${(DEFAULT_INSET_SHADOW_SIZE * circleDimension.value) / DEFAULT_CIRCLE_DIMENSION}px`,
+);
+
+const verticalContainerPaddingPx = computed(() =>
+    props.showCircle ? `${(circleDimension.value - barHeight.value) / 2}px` : '0',
+);
 </script>
+
 <template>
-    <progress-bar
-        class="bg-gray-200 rounded-0"
-        :pt="progressBarPt"
-        :show-value="showValue"
-        :value="value"
-        v-bind="$attrs">
-    </progress-bar>
+    <div
+        class="es-progress"
+        :class="$attrs.class">
+        <progress-bar
+            class="bg-gray-200 rounded-sm"
+            :pt="progressBarPt"
+            :show-value="false"
+            :value="value"
+            v-bind="omit('class', $attrs)">
+        </progress-bar>
+        <div
+            v-if="showValue"
+            class="font-size-75 mt-25 text-right"
+            :class="valueClass">
+            {{ formatter(value) }}
+        </div>
+    </div>
 </template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+.es-progress {
+    padding-bottom: v-bind(verticalContainerPaddingPx);
+    padding-top: v-bind(verticalContainerPaddingPx);
+
+    :deep(.progress-bar--with-circle::after) {
+        border: v-bind(circleBorderWidthPx) solid variables.$warm-orange;
+        box-shadow:
+            0 0 v-bind(circleInsetShadowSizePx) v-bind(circleInsetShadowSizePx) variables.$warm-orange inset,
+            0 0 v-bind(circleGlowSizePx) 0 variables.$warm-orange;
+        height: v-bind(circleDimensionPx);
+        right: v-bind(circleRightPx);
+        width: v-bind(circleDimensionPx);
+    }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "3.1.6",
+    "version": "3.2.0",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",
@@ -17,7 +17,7 @@
     "author": "EnergySage",
     "license": "MIT",
     "dependencies": {
-        "@energysage/es-ds-styles": "^3.1.6",
+        "@energysage/es-ds-styles": "^3.2.0",
         "@nuxt/eslint": "^1.0.1",
         "@nuxtjs/google-fonts": "^3.2.0",
         "@vuelidate/core": "^2.0.3",

package/utils/omit.ts

@@ -0,0 +1,4 @@
+export const omit = (key: string, obj: any) => {
+    const { [key]: omitted, ...rest } = obj;
+    return rest;
+};