@energysage/es-ds-components 3.0.0-alpha.8 → 3.0.0

package/components/icon/state-sc.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconStateSc',
     props: {

package/components/icon/state-sd.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconStateSd',
     props: {

package/components/icon/state-tn.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconStateTn',
     props: {

package/components/icon/state-tx.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconStateTx',
     props: {

package/components/icon/state-ut.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconStateUt',
     props: {

package/components/icon/state-va.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconStateVa',
     props: {

package/components/icon/state-vt.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconStateVt',
     props: {

package/components/icon/state-wa.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconStateWa',
     props: {

package/components/icon/state-wi.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconStateWi',
     props: {

package/components/icon/state-wv.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconStateWv',
     props: {

package/components/icon/state-wy.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconStateWy',
     props: {

package/components/icon/thumbs-up.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconThumbsUp',
     props: {

package/components/icon/trash-can.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconTrashCan',
     props: {

package/components/icon/twitter.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconTwitter',
     props: {

package/components/icon/verified.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconVerified',
     props: {

package/components/icon/wifi.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconWifi',
     props: {

package/components/icon/x.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'XIcon',
     props: {

package/components/icon/youtube.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconYoutube',
     props: {

package/composables/forms.ts

@@ -15,7 +15,7 @@ export function useEsForms<
 
     const isSubmitInProgress = computed(() => submitInProgress.value);
 
-    const getFields = (obj: unknown, valueKey = 'obj') => {
+    const getFields = (obj: any, valueKey = 'obj') => {
         let objKeys = null;
         try {
             objKeys = Object.keys(obj);

package/nuxt.config.ts

@@ -18,6 +18,11 @@ export default defineNuxtConfig({
         },
     },
 
+    // Configure how Nuxt auto-imports composables into your application.
+    imports: {
+        dirs: ['composables', 'types'],
+    },
+
     modules: [
         // https://google-fonts.nuxtjs.org/getting-started/setup
         '@nuxtjs/google-fonts',
@@ -66,6 +71,7 @@ export default defineNuxtConfig({
                 'primevue/progressbar',
                 'primevue/radiobutton',
                 'primevue/rating',
+                'primevue/selectbutton',
                 'primevue/skeleton',
                 'primevue/slider',
                 'primevue/tabpanel',
@@ -73,4 +79,7 @@ export default defineNuxtConfig({
             ],
         },
     },
+    typescript: {
+        typeCheck: true,
+    },
 });

package/package.json

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

package/types/es-carousel.ts

@@ -0,0 +1,12 @@
+export interface EsCarouselBreakpointInterface {
+    numScroll?: number;
+    numVisible: number;
+}
+
+export interface EsCarouselBreakpointsInterface {
+    sm?: EsCarouselBreakpointInterface;
+    md?: EsCarouselBreakpointInterface;
+    lg?: EsCarouselBreakpointInterface;
+    xl?: EsCarouselBreakpointInterface;
+    xxl?: EsCarouselBreakpointInterface;
+}

package/types/index.ts

@@ -0,0 +1 @@
+export type * from './es-carousel';

package/utils/forms.ts

@@ -0,0 +1,120 @@
+import {
+    helpers,
+    required,
+    minValue,
+    maxValue,
+    requiredIf,
+    numeric,
+    integer,
+    minLength,
+    maxLength,
+} from '@vuelidate/validators';
+
+// Only some vuelidate validators can be reused; others don't work well
+export const vuelidateRequired = required;
+export const vuelidateMinValue = minValue;
+export const vuelidateMaxValue = maxValue;
+export const vuelidateRequiredIf = requiredIf;
+export const vuelidateNumeric = numeric;
+export const vuelidateInteger = integer;
+export const vuelidateMinLength = minLength;
+export const vuelidateMaxLength = maxLength;
+export const vuelidateHelpers = helpers;
+
+/**
+ * @returns a function that takes a number, and returns another function which takes a string param
+ * that will ultimately be what you're comparing the pattern against N times.
+ */
+// eslint-disable-next-line max-len
+const matchesPatternNTimes =
+    (pattern: RegExp) =>
+    (N = 1) =>
+    (param: string) =>
+        [...String(param).matchAll(pattern)].length >= N;
+
+/**
+ * @param { Number } number of times the resulting function will need to match
+ * @returns { Function } function that will take a string param that will compare against a
+ * pattern N times. The pattern is defined in the functional closure.
+ *
+ * Usage: hasNumber(1)('s0me string')
+ */
+const hasNumber = matchesPatternNTimes(/[0-9]/g);
+
+/**
+ * @param { Number } number of times the resulting function will need to match
+ * @returns { Function } function that will take a string param that will compare against a
+ * pattern N times. The pattern is defined in the functional closure.
+ *
+ * Usage: hasSpecialCharacter(1)('some $tring')
+ */
+const hasSpecialCharacter = matchesPatternNTimes(/\W|_/g);
+
+/**
+ * @param { Number } number of times the resulting function will need to match
+ * @returns { Function } function that will take a string param that will compare against a
+ * pattern N times. The pattern is defined in the functional closure.
+ *
+ * Usage: hasUppercaseLetter(1)('some String')
+ */
+const hasUppercaseLetter = matchesPatternNTimes(/[A-Z]/g);
+
+/**
+ * @param { Number } number of times the resulting function will need to match
+ * @returns { Function } function that will take a string param that will compare against a
+ * pattern N times. The pattern is defined in the functional closure.
+ *
+ * Usage: hasLowercaseLetter(1)('some String')
+ */
+const hasLowercaseLetter = matchesPatternNTimes(/[a-z]/g);
+
+/**
+ * @param emailAddress Email Address
+ * @returns if valid
+ */
+export function vuelidateEmail(emailAddress: string) {
+    const valid = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z][\w]{1,}$/i.test(emailAddress);
+    return !helpers.req(emailAddress) || valid;
+}
+
+/**
+ * @param number US Based phone number
+ * @returns if valid
+ */
+export function vuelidatePhone(number: string) {
+    return !helpers.req(number) || /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,6}$/.test(number);
+}
+
+/**
+ * @returns if not required or string contains a number
+ */
+// eslint-disable-next-line max-len
+export const vuelidateHasNumber = (X: number) =>
+    helpers.withParams({ type: 'xTimes', value: X }, (value: string) => !helpers.req(value) || hasNumber(X)(value));
+
+/**
+ * @returns if not required or string contains a special character
+ */
+export const vuelidateHasSpecialCharacter = (X: number) =>
+    helpers.withParams(
+        { type: 'xTimes', value: X },
+        (value: string) => !helpers.req(value) || hasSpecialCharacter(X)(value),
+    );
+
+/**
+ * @returns if not required or string contains an uppercase letter
+ */
+export const vuelidateHasUppercaseLetter = (X: number) =>
+    helpers.withParams(
+        { type: 'xTimes', value: X },
+        (value: string) => !helpers.req(value) || hasUppercaseLetter(X)(value),
+    );
+
+/**
+ * @returns if not required or string contains an lowercase letter
+ */
+export const vuelidateHasLowercaseLetter = (X: number) =>
+    helpers.withParams(
+        { type: 'xTimes', value: X },
+        (value: string) => !helpers.req(value) || hasLowercaseLetter(X)(value),
+    );

package/utils/{get-es-footer-content.js → get-es-footer-content.ts}

@@ -76,6 +76,7 @@ export default (
         { text: 'Privacy policy', url: `${ES_DOMAIN}/privacy-policy/` },
         { text: 'Mobile terms of use', url: `${ES_DOMAIN}/mobile-terms-of-use/` },
         { text: 'Non-discrimination policy', url: `${ES_DOMAIN}/nondiscrimination/` },
+        { text: 'Your privacy choices' },
     ],
     copyrightText: '© Copyright 2009-{currentYear} EnergySage, Inc. All rights reserved.',
     trademarkText: `ENERGYSAGE is a registered trademark and the EnergySage logo is a trademark of EnergySage, Inc.

package/{lib-utils/mime-type-finder.js → utils/mime-type-finder.ts}

@@ -39,10 +39,10 @@ const mimeTypesAndHexes = [
 
 export const mimeTypes = mimeTypesAndHexes.map(({ mime }) => mime);
 
-export function getHumanReadableTypeFromMime(mimeType) {
+export function getHumanReadableTypeFromMime(mimeType: any) {
     return mimeTypesAndHexes.find((mimeTypeAndHex) => mimeTypeAndHex.mime === mimeType)?.humanReadable;
 }
 
-export default function findMimeType(hex) {
+export function findMimeType(hex: any) {
     return mimeTypesAndHexes.find((mimeType) => mimeType.hexes.includes(hex))?.mime;
 }

package/utils/vuelidate-keys.ts

@@ -0,0 +1,39 @@
+/**
+ * constants.js
+ *
+ * String constants that can be used when defining validations objects
+ */
+
+const REQUIRED = 'vuelidateRequired';
+const MIN_VALUE = 'vuelidateMinValue';
+const MAX_VALUE = 'vuelidateMaxValue';
+const REQUIRED_IF = 'vuelidateRequiredIf';
+const NUMERIC = 'vuelidateNumeric';
+const INTEGER = 'vuelidateInteger';
+const MIN_LENGTH = 'vuelidateMinLength';
+const MAX_LENGTH = 'vuelidateMaxLength';
+const HAS_NUMBER = 'vuelidateHasNumber';
+const HAS_SPECIAL_CHARACTER = 'vuelidateHasSpecialCharacter';
+const HAS_UPPERCASE_LETTER = 'vuelidateHasUppercaseLetter';
+const HAS_LOWERCASE_LETTER = 'vuelidateHasLowercaseLetter';
+const EMAIL = 'vuelidateEmail';
+const PHONE = 'vuelidatePhone';
+const HELPERS = 'vuelidateHelpers';
+
+export default {
+    REQUIRED,
+    REQUIRED_IF,
+    MIN_VALUE,
+    MAX_VALUE,
+    MIN_LENGTH,
+    MAX_LENGTH,
+    NUMERIC,
+    INTEGER,
+    EMAIL,
+    PHONE,
+    HAS_NUMBER,
+    HAS_SPECIAL_CHARACTER,
+    HAS_UPPERCASE_LETTER,
+    HAS_LOWERCASE_LETTER,
+    HELPERS,
+};