@energysage/es-ds-components 3.0.0-alpha.2 → 3.0.0-alpha.3

package/components/es-radio-button.vue

@@ -0,0 +1,62 @@
+<template>
+    <div :class="`custom-control custom-radio custom-control${inline ? '-inline' : ''}`">
+        <radio-button
+            class="custom-control-input"
+            input-class="custom-radio-input"
+            v-model="localValue"
+            :disabled="disabled"
+            :input-id="`${value}-${groupName}`"
+            :name="groupName"
+            :value="value" />
+        <label :for="`${value}-${groupName}`" class="custom-control-label">{{ displayName }}</label>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    displayName: {
+        type: String,
+        required: true,
+        default: "",
+    },
+    groupName: {
+        type: String,
+        required: false,
+        default: "",
+    },
+    inline: {
+        type: Boolean,
+        default: false,
+    },
+    modelValue: {
+        type: String,
+        required: true,
+        default: "",
+    },
+    value: {
+        type: String,
+        required: true,
+        default: "",
+    },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const localValue = ref(props.modelValue);
+
+// Watch for changes to the local value and emit them
+watch(localValue, (newValue) => {
+    emit('update:modelValue', newValue);
+});
+
+// Watch for prop changes and update the local value
+watch(() => props.modelValue, (newValue) => {
+    localValue.value = newValue;
+});
+
+</script>

package/nuxt.config.ts

@@ -1,2 +1,41 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
-export default defineNuxtConfig({})
+export default defineNuxtConfig({
+
+    compatibilityDate: '2024-04-03',
+
+    // https://nuxt.com/docs/getting-started/styling#the-css-property
+    css: [
+        '@energysage/es-bs-base/scss/bootstrap.scss',
+    ],
+
+    // https://google-fonts.nuxtjs.org/options
+    googleFonts: {
+        preload: true,
+        download: false,
+        display: 'swap',
+        families: {
+            'Plus+Jakarta+Sans': {
+                wght: '200..800',
+                ital: '200..800',
+            },
+        },
+    },
+
+    modules: [
+        // https://google-fonts.nuxtjs.org/getting-started/setup
+        '@nuxtjs/google-fonts',
+        // https://v3.primevue.org/nuxt
+        'nuxt-primevue'
+    ],
+
+    primevue: {
+        options: {
+            unstyled: true
+        }
+    },
+
+    sourcemap: {
+        server: true,
+        client: true
+    },
+})

package/package.json

@@ -1,15 +1,25 @@
 {
-  "name": "@energysage/es-ds-components",
-  "version": "3.0.0-alpha.2",
-  "private": false,
-  "description": "An EnergySage Vue component library",
-  "main": "./nuxt.config.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "EnergySage",
-  "license": "MIT",
-  "devDependencies": {
-    "nuxt": "^3.12.4"
-  }
+    "name": "@energysage/es-ds-components",
+    "version": "3.0.0-alpha.3",
+    "private": false,
+    "type": "module",
+    "description": "An EnergySage Vue component library",
+    "main": "./nuxt.config.ts",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "EnergySage",
+    "license": "MIT",
+    "dependencies": {
+        "@energysage/es-ds-styles": "^3.0.0-alpha.3",
+        "@nuxtjs/google-fonts": "^3.2.0",
+        "nuxt": "^3.12.4",
+        "primevue": "^3.53.0",
+        "prismjs": "^1.29.0",
+        "vue": "^3.4.34"
+    },
+    "devDependencies": {
+        "nuxt-primevue": "^3.0.0",
+        "sass": "^1.77.8"
+    }
 }

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "../es-ds-docs/.nuxt/tsconfig.json"
+}