@energysage/es-ds-components 3.0.0-alpha.6 → 3.0.0-alpha.7

package/components/es-form-input.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import InputText from 'primevue/inputtext';
+import InputMask from 'primevue/inputmask';
+// Prevents attributes from being applied to first <div>
+// v-bind="$attr" is on the input instead
+defineOptions({
+    inheritAttrs: false,
+});
+
+defineProps({
+    /**
+     * Required
+     */
+    required: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Disabled
+     */
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Type
+     */
+    type: {
+        type: String,
+        default: 'text',
+        validator: (val: string) => ['text', 'email', 'number', 'password', 'tel', 'maskedTel'].includes(val),
+    },
+    /**
+     * ID
+     * required
+     */
+    id: {
+        type: String,
+        required: true,
+    },
+    /**
+     * state
+     */
+    state: {
+        type: [Boolean, null],
+        default: null,
+    },
+    labelSrOnly: {
+        type: Boolean,
+        default: false,
+    },
+    phoneMaskValue: {
+        type: String,
+        default: '(999) 999-9999',
+        required: false,
+    },
+});
+
+const slots = useSlots();
+
+const hasSuccess = () => !!slots.successMessage;
+const hasMessage = () => !!slots.message;
+const hasError = () => !!slots.errorMessage;
+const hasExtraContext = () => !!slots.extraContext;
+</script>
+
+<template>
+    <div
+        class="input-wrapper justify-content-end"
+        :class="$attrs.class"
+        :required="required">
+        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+        <label
+            :for="id"
+            class="label justify-content-start"
+            :class="{ 'sr-only': labelSrOnly }">
+            <slot name="label" />
+            <span
+                v-if="required"
+                class="text-danger">
+                *
+            </span>
+        </label>
+        <p
+            v-if="hasExtraContext()"
+            class="mb-25 font-size-75">
+            <slot name="extraContext" />
+        </p>
+        <div class="input-holder position-relative">
+            <!-- prefix icons are decorative only so are aria-hidden -->
+            <span
+                v-if="$slots.prefixIcon"
+                aria-hidden="true"
+                class="prefix-icon position-absolute">
+                <slot name="prefixIcon" />
+            </span>
+            <component
+                :is="type === 'maskedTel' ? InputMask : InputText"
+                :id="id"
+                v-bind="{ ...$attrs, class: undefined }"
+                :type="type"
+                class="es-form-input form-control w-100"
+                :class="{
+                    'has-prefix-icon': $slots.prefixIcon,
+                    'is-invalid': state === false,
+                }"
+                :mask="phoneMaskValue"
+                :disabled="disabled"
+                :invalid="state === false" />
+            <small
+                v-if="hasMessage() && ((!hasSuccess() && state) || state == null)"
+                class="text-muted">
+                <slot name="message" />
+            </small>
+            <small
+                v-if="state === false && (hasError() || required)"
+                class="text-danger">
+                <slot
+                    v-if="hasError()"
+                    name="errorMessage" />
+                <template v-else-if="required"> This field is required. </template>
+            </small>
+            <small
+                v-if="state && hasSuccess()"
+                class="text-success">
+                <slot name="successMessage" />
+            </small>
+        </div>
+    </div>
+</template>

package/components/es-form-msg.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    timeout: {
+        type: Number,
+        default: 20,
+        required: false,
+    },
+    variant: {
+        type: String,
+        default: 'danger',
+        required: false,
+        validator: (val: string) => ['danger', 'success', 'primary'].includes(val),
+    },
+});
+
+const emit = defineEmits(['hidden']);
+
+const hide = () => {
+    emit('hidden');
+};
+
+watch(
+    () => props.show,
+    (newValue, oldValue) => {
+        if (newValue && !oldValue) {
+            setTimeout(() => {
+                hide();
+            }, props.timeout * 1000);
+        }
+    },
+);
+</script>
+
+<template>
+    <transition>
+        <div
+            v-if="show"
+            role="alert"
+            aria-live="polite"
+            aria-atomic="true"
+            class="alert es-form-msg my-100 alert-dismissible"
+            :class="`alert-${variant}`">
+            <div class="d-flex pr-100">
+                <div class="icon-wrapper flex-shrink-0 mr-100">
+                    <icon-circle-alert v-if="variant === 'danger'" />
+                    <icon-circle-check v-if="variant === 'success'" />
+                    <icon-info v-if="variant === 'primary'" />
+                </div>
+                <slot />
+            </div>
+            <button
+                type="button"
+                aria-label="Close"
+                class="close"
+                @click="hide">
+                <icon-x />
+            </button>
+        </div>
+    </transition>
+</template>
+
+<style lang="scss" scoped>
+.form-msg {
+    flex: 0 0 100%;
+    padding-right: 2.5rem;
+}
+
+.v-enter-active,
+.v-leave-active {
+    transition: opacity 0.15s;
+}
+
+.v-enter-from,
+.v-leave-to {
+    opacity: 0;
+}
+</style>

package/components/es-form-radio-card.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useFocus } from '@vueuse/core';
+
+const inputElem = useTemplateRef('input-elem');
+const { focused: inputFocused } = useFocus(inputElem);
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+interface IProps {
+    id: string;
+    name: string;
+    value: any;
+    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);
+    }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const model = defineModel<any>();
+const isChecked = computed(() => props.value === model.value);
+</script>
+
+<template>
+    <label
+        class="es-form-radio-card es-card interactive w-100 btn btn-outline-primary"
+        :class="{ active: isChecked, disabled: props.disabled, focus: isChecked || inputFocused }"
+        @click="handleRadioButtonClick">
+        <input
+            :id="id"
+            ref="input-elem"
+            v-model="model"
+            :disabled="props.disabled"
+            type="radio"
+            name="props.name"
+            :value="props.value"
+            :checked="isChecked"
+            @click="handleRadioButtonClick" />
+        <slot>
+            {{ displayName }}
+        </slot>
+    </label>
+</template>

package/components/es-form-radio-cards.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+interface Option {
+    id: string;
+    text: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: any;
+    disabled?: boolean;
+    inline?: boolean;
+}
+
+interface Props {
+    id: string;
+    label: string;
+    name?: string;
+    options?: Option[];
+    inline?: boolean;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    modelValue?: any;
+    hasIcon?: boolean;
+    labelClass?: string;
+    labelSrOnly?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+    name: '',
+    options: undefined,
+    inline: false,
+    modelValue: undefined,
+    hasIcon: false,
+    labelClass: 'font-size-h3',
+    labelSrOnly: false,
+});
+
+const emit = defineEmits(['update:model-value']);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function handleUpdate(value: any) {
+    emit('update:model-value', value);
+}
+</script>
+
+<template>
+    <fieldset
+        :id="`${props.id}-fieldset`"
+        class="form-group">
+        <legend
+            :id="`${props.id}-legend`"
+            class="font-size-h1 font-weight-bolder mb-200 pb-0 text-dark"
+            :class="{ 'sr-only': props.labelSrOnly }"
+            tabindex="-1">
+            {{ props.label }}
+        </legend>
+        <div>
+            <div
+                :id="`${props.id}-radiogroup`"
+                role="radiogroup"
+                tabindex="-1"
+                class="es-form-radio-cards d-flex justify-content-center btn-group-vertical"
+                :class="{ 'has-icon': props.hasIcon }">
+                <slot :options="options">
+                    <es-form-radio-card
+                        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"
+                        @update:model-value="handleUpdate">
+                        <span :class="props.labelClass">
+                            {{ option.text }}
+                        </span>
+                    </es-form-radio-card>
+                </slot>
+            </div>
+        </div>
+    </fieldset>
+</template>

package/components/es-form-textarea.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+// Prevents attributes from being applied to first <div>
+// v-bind="$attr" is on the input instead
+defineOptions({
+    inheritAttrs: false,
+});
+
+defineProps({
+    /**
+     * Required
+     */
+    required: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Disabled
+     */
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * ID
+     * required
+     */
+    id: {
+        type: String,
+        required: true,
+    },
+    /**
+     * state
+     */
+    state: {
+        type: [Boolean, null],
+        default: null,
+    },
+});
+const model = defineModel<string>();
+
+const slots = useSlots();
+
+const hasSuccess = () => !!slots.successMessage;
+const hasMessage = () => !!slots.message;
+const hasError = () => !!slots.errorMessage;
+</script>
+
+<template>
+    <div
+        class="input-wrapper justify-content-end"
+        :required="required">
+        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+        <label
+            :for="id"
+            class="label justify-content-start">
+            <slot name="label" />
+
+            <span
+                v-if="required"
+                class="text-danger">
+                *
+            </span>
+        </label>
+
+        <div class="input-holder">
+            <textarea
+                :id="id"
+                v-model="model"
+                v-bind="$attrs"
+                class="es-form-textarea w-100 form-control"
+                :class="{ 'is-invalid': state === false }"
+                :disabled="disabled"
+                :invalid="state === false" />
+            <small
+                v-if="hasMessage() && ((!hasSuccess() && state) || state == null)"
+                class="text-muted">
+                <slot name="message" />
+            </small>
+            <small
+                v-if="state === false && (hasError() || required)"
+                class="text-danger">
+                <slot
+                    v-if="hasError()"
+                    name="errorMessage" />
+                <template v-else-if="required"> This field is required. </template>
+            </small>
+            <small
+                v-if="state && hasSuccess()"
+                class="text-success">
+                <slot name="successMessage" />
+            </small>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+.es-form-textarea {
+    min-height: 8.125rem;
+}
+
+.es-form-textarea:disabled,
+.es-form-textarea[readonly] {
+    border: 0;
+}
+
+.is-invalid {
+    color: variables.$danger;
+}
+
+.form-inline .input-wrapper {
+    display: flex;
+    flex: 0 0 100%;
+
+    label {
+        flex: 0 0 30%;
+    }
+
+    .input-holder {
+        flex: 0 0 70%;
+    }
+}
+</style>

package/components/es-form.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps({
+    inline: {
+        type: Boolean,
+        default: false,
+    },
+});
+</script>
+
+<template>
+    <form
+        :class="{ 'form-inline': props.inline }"
+        v-bind="$attrs">
+        <slot />
+    </form>
+</template>

package/components/es-modal.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import PrimeDialog from 'primevue/dialog';
+
+const props = defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
+    hideFooter: {
+        type: Boolean,
+        default: false,
+    },
+    size: {
+        type: String,
+        default: 'md',
+        validator: (val) => ['sm', 'md', 'lg', 'xl'].includes(val),
+    },
+    bodyClass: {
+        type: String,
+        required: false,
+        default: '',
+    },
+});
+
+const modalPt = {
+    root: {
+        class: 'modal-dialog modal-dialog-scrollable modal-content',
+    },
+    header: {
+        class: 'modal-header',
+    },
+    title: {
+        class: 'modal-title',
+    },
+    closeButton: {
+        class: 'close',
+    },
+    content: {
+        class: `modal-body ${props.bodyClass}`,
+    },
+    footer: {
+        class: 'modal-footer',
+    },
+    mask: {
+        class: 'es-modal-mask',
+    },
+    // https://vuejs.org/guide/built-ins/transition
+    transition: {
+        enterActiveClass: 'es-modal-enter-active',
+        enterFromClass: 'es-modal-enter-from',
+        enterToClass: 'es-modal-enter-to',
+        leaveActiveClass: 'es-modal-leave-active',
+        leaveFromClass: 'es-modal-leave-from',
+        leaveToClass: 'es-modal-leave-to',
+    },
+};
+
+const emit = defineEmits(['hidden']);
+
+const onChange = (visible: boolean) => {
+    if (!visible) {
+        emit('hidden');
+    }
+};
+
+const getSizeClass = computed(() => {
+    const modalSize = props.size === '' ? 'modal-md' : `modal-${props.size}`;
+    return modalSize;
+});
+</script>
+
+<template>
+    <prime-dialog
+        :id="id"
+        modal
+        :class="getSizeClass"
+        :pt="modalPt"
+        dismissable-mask
+        @update:visible="onChange">
+        <template #header>
+            <h5
+                :id="`${id}_header`"
+                class="modal-title h2">
+                <slot name="modal-title" />
+            </h5>
+        </template>
+
+        <template #closeicon>
+            <icon-x
+                class="text-gray-900"
+                height="2rem"
+                width="2rem" />
+        </template>
+
+        <slot />
+
+        <template
+            v-if="!hideFooter"
+            #footer>
+            <slot name="modal-footer" />
+        </template>
+    </prime-dialog>
+</template>

package/components/es-nav-bar-account-menu.vue

@@ -0,0 +1,67 @@
+<script lang="js">
+export default {
+    name: 'EsNavBarAccountMenu',
+    props: {
+        authItems: {
+            type: Array,
+            default: () => [],
+        },
+        loggedOut: {
+            type: Object,
+            required: true,
+        },
+    },
+};
+</script>
+
+<template>
+    <div class="icon-dropdown">
+        <div class="nav-item">
+            <div class="nav-link dropdown-toggle d-none d-lg-flex flex-nowrap py-100">
+                <icon-person
+                    class="align-self-center account-icon"
+                    width="20px"
+                    height="20px" />
+                <span class="sr-only">
+                    {{ loggedOut.menuButtonText }}
+                </span>
+            </div>
+            <div class="menu">
+                <ul
+                    class="loggedIn dropdown-menu account-menu rounded mt-0 py-100 list-unstyled"
+                    style="display: none">
+                    <li
+                        v-for="item in authItems"
+                        :key="item.name">
+                        <es-nav-bar-link
+                            class="dropdown-item nav-link"
+                            :href="item.link">
+                            <span class="mx-50">
+                                {{ item.name }}
+                            </span>
+                        </es-nav-bar-link>
+                    </li>
+                </ul>
+                <ul
+                    class="loggedOut dropdown-menu account-menu rounded mt-0"
+                    style="display: none">
+                    <li class="d-flex justify-content-center">
+                        <es-button
+                            :href="loggedOut.signIn.link"
+                            class="m-100 w-100 text-white font-weight-bold">
+                            {{ loggedOut.signIn.name }}
+                        </es-button>
+                    </li>
+                    <li class="d-flex justify-content-center">
+                        <es-button
+                            :href="loggedOut.createAccount.link"
+                            :outline="true"
+                            class="mx-100 w-100 font-weight-bold">
+                            {{ loggedOut.createAccount.name }}
+                        </es-button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>