@energysage/es-ds-components 0.0.1 → 3.0.0-alpha.10

package/components/es-popover.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import OverlayPanel from 'primevue/overlaypanel';
+
+const props = defineProps({
+    target: {
+        type: String,
+        required: true,
+    },
+    triggers: {
+        type: String,
+        required: false,
+        default: 'focus',
+    },
+    show: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+    variant: {
+        type: String,
+        required: false,
+        default: 'dark',
+        validator: (val: string) => ['light', 'dark'].includes(val as string),
+    },
+});
+
+const op = ref<InstanceType<typeof OverlayPanel> | null>(null);
+const slots = useSlots();
+const hasTitle = computed(() => !!slots.title);
+const closePanel = () => {
+    op.value?.hide();
+};
+const showPanel = (event: Event) => {
+    op.value?.show(event);
+};
+
+onMounted(() => {
+    const targetElement = document.getElementById(props.target);
+    if (targetElement) {
+        const triggers = props.triggers.split(' ').map((trigger) => (trigger === 'hover' ? 'mouseover' : trigger));
+        // eslint-disable-next-line no-restricted-syntax
+        for (const trigger of triggers) {
+            targetElement.addEventListener(trigger, showPanel);
+        }
+    }
+});
+
+watch(
+    () => props.show,
+    (newVal) => {
+        if (newVal) {
+            const targetElement = document.getElementById(props.target);
+            if (targetElement) {
+                const event = new MouseEvent('click', {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true,
+                });
+                targetElement.dispatchEvent(event);
+            }
+        } else {
+            closePanel();
+        }
+    },
+);
+</script>
+
+<template>
+    <overlay-panel
+        ref="op"
+        :dismissable="true"
+        append-to="body"
+        :pt="{
+            root: {
+                class: `popover b-popover ${props.variant === 'light' ? 'es-popover-light' : 'es-popover-dark'}`,
+            },
+            transition: {
+                enterFromClass: 'es-popover-enter-from',
+                enterActiveClass: 'es-popover-enter-active',
+                leaveActiveClass: 'es-popover-leave-active',
+                leaveToClass: 'es-popover-leave-to',
+            },
+        }">
+        <div class="arrow"></div>
+        <template v-if="hasTitle">
+            <!-- Title slot content -->
+            <h3 class="popover-header">
+                <slot name="title" />
+                <button
+                    class="es-popover-close p-0 float-right bg-transparent"
+                    @click="closePanel">
+                    <icon-x
+                        height="20px"
+                        width="20px" />
+                </button>
+            </h3>
+        </template>
+        <!-- Popover Content -->
+        <div class="popover-body">
+            <div class="d-flex">
+                <slot />
+                <button
+                    v-if="!hasTitle"
+                    class="es-popover-close p-0 pl-50 mb-auto bg-transparent"
+                    @click="closePanel">
+                    <icon-x
+                        height="20px"
+                        width="20px" />
+                </button>
+            </div>
+        </div>
+    </overlay-panel>
+</template>

package/components/es-progress-circle.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+const props = defineProps({
+    height: {
+        type: String,
+        default: '50px',
+    },
+    value: {
+        type: Number,
+        required: true,
+    },
+    showPercentage: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const computedHeight = computed(() => {
+    const height = props.height.replace(/[^0-9]/g, '');
+    return parseInt(height, 10);
+});
+const fillLength = computed(() => computedHeight.value * Math.PI * (props.value / 100) * (90 / computedHeight.value));
+</script>
+
+<template>
+    <div v-bind="$attrs">
+        <!-- Based on prior art from es-cdgm codebase -->
+        <svg
+            viewBox="0 0 100 100"
+            :height="height"
+            :width="height">
+            <circle
+                class="inner-circle"
+                :cx="50"
+                :cy="50"
+                stroke-width="8"
+                r="45%" />
+            <!-- The first argument in `stoke-dasharray` is the amount of the circle we want colored
+                The second is the gap before the next stroke starts
+                Since we don't want another stroke to start, we use a number greater than the
+                circumference of the circle (ex: 300). -->
+            <template v-if="fillLength > 0">
+                <circle
+                    class="progress-circle"
+                    :stroke-dasharray="`${fillLength} 300`"
+                    :cx="50"
+                    :cy="50"
+                    r="45%"
+                    stroke-width="8"
+                    stroke-linecap="round"
+                    transform="rotate(-90, 50, 50)" />
+            </template>
+            <template v-if="showPercentage">
+                <text
+                    x="50%"
+                    y="52%"
+                    class="font-weight-boldest text-gray-700 font-size-base"
+                    dominant-baseline="middle"
+                    alignment-baseline="middle"
+                    text-anchor="middle">
+                    {{ value }}%
+                </text>
+            </template>
+        </svg>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+.inner-circle {
+    // position: relative;
+    fill: transparent;
+    stroke: variables.$gray-200;
+}
+
+.progress-circle {
+    // position: relative;
+    fill: transparent;
+    stroke: variables.$blue-400;
+}
+</style>

package/components/es-progress.vue

@@ -0,0 +1,36 @@
+<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 progressBarPt = {
+    value: {
+        class: 'EsProgressValue progress-bar',
+        style: {
+            height: props.height,
+            borderRadius: props.value === 100 ? '0' : '0 0.125rem 0.125rem 0',
+        },
+    },
+};
+</script>
+<template>
+    <progress-bar
+        class="bg-gray-200 rounded-0"
+        :pt="progressBarPt"
+        :show-value="showValue"
+        :value="value"
+        v-bind="$attrs">
+    </progress-bar>
+</template>

package/components/es-radio-button-group.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+interface IOptions {
+    id: string;
+    text: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: any;
+    disabled?: boolean;
+}
+
+interface IProps {
+    id: string;
+    label: string;
+    name?: string;
+    options?: IOptions[];
+    inline?: boolean;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    modelValue?: any;
+}
+const props = withDefaults(defineProps<IProps>(), {
+    inline: false,
+    name: '',
+    options: undefined,
+    modelValue: undefined,
+});
+
+defineEmits(['update:model-value']);
+</script>
+
+<template>
+    <fieldset
+        :id="id"
+        class="form-group">
+        <legend
+            :id="`${props.id}-legend`"
+            class="font-size-100"
+            tabindex="-1">
+            {{ props.label }}
+        </legend>
+        <slot :options="options">
+            <es-radio-button
+                v-for="option in options"
+                :id="option.id"
+                :key="option.value"
+                :disabled="option?.disabled || false"
+                :name="props.name"
+                :value="option.value"
+                :model-value="props.modelValue"
+                :inline="props.inline || false"
+                :display-name="option.text"
+                @update:model-value="$emit('update:model-value', option.value)" />
+        </slot>
+    </fieldset>
+</template>

package/components/es-radio-button.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+interface IProps {
+    name: string;
+    value: any;
+    id: string;
+    disabled?: boolean;
+    inline?: boolean;
+    displayName?: string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+    disabled: false,
+    inline: false,
+    displayName: '',
+});
+
+// Need to define the implicit emit from v-model, so that it can also get fired
+// from the label clicks
+const emit = defineEmits(['update:modelValue']);
+function handleRadioButtonClick() {
+    if (!props.disabled) {
+        emit('update:modelValue', props.value);
+    }
+}
+
+// Similar to the API of https://bootstrap-vue.org/docs/components/form-radio#changing-the-option-field-names
+// the value can be a string, number, or simple object. Avoid using complex types in values.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const model = defineModel<any>();
+const isChecked = computed(() => props.value === model.value);
+</script>
+
+<template>
+    <div
+        class="custom-control custom-radio"
+        :class="{ 'custom-control-inline': props.inline }">
+        <input
+            :id="id"
+            v-model="model"
+            :disabled="props.disabled"
+            type="radio"
+            :name="props.name"
+            class="custom-control-input"
+            :value="props.value"
+            :checked="isChecked"
+            @click="handleRadioButtonClick" />
+        <label
+            class="custom-control-label"
+            :for="id"
+            @click="handleRadioButtonClick">
+            <slot>
+                {{ displayName }}
+            </slot>
+        </label>
+    </div>
+</template>

package/components/es-rating.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import Rating from 'primevue/rating';
+
+interface IProps {
+    rating?: number;
+    readOnly?: boolean;
+    width?: string;
+    height?: string;
+    rounded?: boolean;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+    rating: 0,
+    readOnly: true,
+    width: '20px',
+    height: '20px',
+    rounded: true, // Round rating to nearest .5
+});
+
+const model = defineModel<number>();
+model.value = props.rating;
+
+// Rounds to nearest .5
+const round = (value: number) => (value ? Math.round(value * 2) / 2 : 0);
+const localRating = computed(() => (props.rounded ? round(model.value as number) : model.value || 0));
+
+const showFocus = ref(false);
+</script>
+
+<template>
+    <div
+        v-if="readOnly"
+        :aria-label="`${localRating} out of 5 stars`"
+        class="bg-transparent rounded-0 text-orange rating">
+        <div
+            v-for="i in 5"
+            :key="i"
+            aria-hidden="true">
+            <span v-if="i <= localRating">
+                <icon-star-full
+                    :width="width"
+                    :height="height" />
+            </span>
+            <span v-else-if="i - 0.5 === localRating">
+                <icon-star-half
+                    :width="width"
+                    :height="height" />
+            </span>
+            <span v-else>
+                <icon-star-empty
+                    :width="width"
+                    :height="height" />
+            </span>
+        </div>
+    </div>
+    <div v-else>
+        <rating
+            v-model="model"
+            :cancel="false"
+            :readonly="readOnly"
+            v-bind="$attrs"
+            :pt="{
+                root: {
+                    class: 'bg-transparent rounded-0 text-orange rating reactive',
+                },
+                item: (options) => {
+                    return {
+                        class: [
+                            {
+                                reactiveStar: true,
+                                focused: options.context.focused,
+                            },
+                        ],
+                    };
+                },
+            }"
+            @focus="showFocus = true"
+            @blur="showFocus = false">
+            <template #officon>
+                <icon-star-empty
+                    :width="width"
+                    :height="height" />
+            </template>
+            <template #onicon>
+                <icon-star-full
+                    :width="width"
+                    :height="height" />
+            </template>
+        </rating>
+    </div>
+</template>
+
+<style lang="scss">
+.rating {
+    height: auto !important;
+    width: auto;
+    padding: 0 !important;
+    align-items: center !important;
+    justify-content: center;
+    display: inline-flex !important;
+    text-align: center;
+    width: auto;
+    display: inline-flex !important;
+    outline: 0;
+}
+.reactive {
+    cursor: pointer !important;
+}
+
+.reactiveStar {
+    transition: all 0.15s ease-in-out;
+
+    &:hover {
+        transform: scale(1.5);
+    }
+    &.focused {
+        transform: scale(1.5);
+    }
+}
+</style>