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

package/components/b-col.vue

@@ -0,0 +1,25 @@
+<template>
+    <div
+        class="col"
+        :class="{
+            [`col-${cols}`]: cols,
+            [`col-sm-${sm}`]: sm,
+            [`col-md-${md}`]: md,
+            [`col-lg-${lg}`]: lg,
+            [`col-xl-${xl}`]: xl,
+            [`col-xxl-${xxl}`]: xxl,
+        }">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  cols?: string,
+  sm?: string,
+  md?: string,
+  lg?: string,
+  xl?: string,
+  xxl?: string
+}>();
+</script>

package/components/b-container.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="container">
+        <slot />
+    </div>
+</template>

package/components/b-row.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="row">
+        <slot />
+    </div>
+</template>

package/components/es-breadcrumbs.vue

@@ -0,0 +1,60 @@
+<template>
+    <breadcrumb
+        :model="model"
+        :pt="{
+            menu: 'breadcrumb',
+            menuitem: 'breadcrumb-item'
+        }">
+        <template #item="{ item, props }">
+            <!--
+                primevue breadcrumb doesn't support an active non-link state out of the box,
+                so we have to implement it via this slot
+                https://v3.primevue.org/breadcrumb/#api.options.MenuItem
+            -->
+            <span v-if="item.active" aria-current="location" class="font-weight-bold">
+                {{ item.label }}
+            </span>
+            <!--
+                primevue breadcrumb doesn't support NuxtLink out of the box,
+                so we have to implement it via this slot
+                https://v3.primevue.org/breadcrumb/#router
+            -->
+            <nuxt-link v-else-if="item.to" :to="item.to">
+                {{ item.label }}
+            </nuxt-link>
+            <a v-else-if="item.url" :href="item.url" :target="item.target">
+                {{ item.label }}
+            </a>
+            <span v-else>
+                {{ item.label }}
+            </span>
+        </template>
+        <template #separator>
+            <span aria-hidden class="mx-50">/</span>
+        </template>
+    </breadcrumb>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    items: {
+        type: Array,
+        required: true
+    }
+});
+
+const route = useRoute();
+const model = computed(() => {
+    if (!props.items) {
+        return [];
+    }
+
+    return props.items.map(item => ({
+        ...item,
+        // mark breadcrumb as active if manually set or if it matches this route
+        active: item.active || route.path === item.to || route.path === item.href,
+        label: item.text,
+        url: item.href
+    }));
+});
+</script>

package/components/es-collapse.vue

@@ -0,0 +1,79 @@
+<template>
+    <panel
+        :collapsed="!expanded"
+        :pt="{
+            header: 'align-items-center d-flex justify-content-between position-relative py-100',
+            icons: 'h-100 position-absolute w-100',
+            root: border ? 'border-bottom border-top' : '',
+            toggler: {
+                class: 'es-collapse-toggler align-items-center btn btn-link d-flex h-100 inline justify-content-end rounded-0 p-0 position-absolute text-body w-100',
+            },
+            // https://vuejs.org/guide/built-ins/transition
+            transition: {
+                enterActiveClass: 'es-collapse-enter-active',
+                enterFromClass: 'es-collapse-enter-from',
+                enterToClass: 'es-collapse-enter-to',
+                leaveActiveClass: 'es-collapse-leave-active',
+                leaveFromClass: 'es-collapse-leave-from',
+                leaveToClass: 'es-collapse-leave-to'
+            },
+        }"
+        toggleable
+        @toggle="onClick">
+        <template #header>
+            <slot name="title" />
+        </template>
+        <template #togglericon>
+            <icon-chevron-down />
+        </template>
+        <slot />
+    </panel>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(['toggled', 'userClick']);
+const model = defineModel();
+const props = defineProps({
+    border: {
+        type: Boolean,
+        default: true,
+    },
+    isProgrammaticUntilUserInput: {
+        type: Boolean,
+        default: true
+    },
+    visible: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const userDeterminedState = ref(null);
+
+// directly determines the expanded/collapsed state of the panel
+const expanded = computed(() => {
+    // if we are meant to start ignoring the programmatic incoming state as soon as the
+    // user interacts with the collapse, and if the user has interacted with the collapse,
+    // use the value from the user's interaction
+    if (props.isProgrammaticUntilUserInput && userDeterminedState.value !== null) {
+        return userDeterminedState.value;
+    }
+
+    // otherwise, use the one-way visible prop or the two-way v-model value
+    return props.visible || model.value;
+});
+
+const onClick = ({ value }) => {
+    // save the state toggled by the user
+    // convert from "collapsed" semantics internal to the primevue panel
+    // to the "expanded" semantics exposed by this component
+    userDeterminedState.value = !value;
+
+    // inform the v-model (if any) that the state has changed
+    model.value = !value;
+
+    // emit events indicating the state has changed
+    emit('toggled', !value);
+    emit('userClick', !value);
+};
+</script>

package/components/icon-chevron-down.vue

@@ -0,0 +1,39 @@
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M3.293 8.293a1 1 0 0 1 1.414 0L12 15.586l7.293-7.293a1 1 0 1 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 0-1.414Z" />
+    </svg>
+</template>
+
+<script>
+export default {
+    name: 'IconChevronDown',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>

package/components/icon-chevron-right.vue

@@ -0,0 +1,39 @@
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M7.293 3.293a1 1 0 0 1 1.414 0l8 8a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L14.586 12 7.293 4.707a1 1 0 0 1 0-1.414Z" />
+    </svg>
+</template>
+
+<script>
+export default {
+    name: 'IconChevronRight',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energysage/es-ds-components",
-  "version": "0.0.1",
+  "version": "3.0.0-alpha.0",
   "private": false,
   "description": "An EnergySage Vue component library",
   "main": "./nuxt.config.ts",

package/components/TestComponent.vue

@@ -1,5 +0,0 @@
-<template>
-    <div>
-        This is a test component from es-ds-components
-    </div>
-</template>