Little bit of maintenance and cleanup

composer.json

@@ -2,7 +2,7 @@
   "name"       : "haariga/craft-gonzo",
   "description": "Component Library from your templates Folder",
   "type"       : "craft-plugin",
-  "version"    : "2.0.0-alpha-2",
+  "version"    : "2.0.0-alpha-3",
   "keywords"   : [
     "craft",
     "cms",
@@ -28,6 +28,7 @@
     }
   ],
   "require"    : {
+    "roave/security-advisories": "dev-latest",
     "craftcms/cms"     : "^4.2.0",
     "nystudio107/craft-plugin-vite": "^4.0.6"
   },
@@ -39,11 +40,14 @@
   "extra"      : {
     "name"         : "Craft Gonzo",
     "handle"       : "craft-gonzo",
-    "schemaVersion": "2.0.0-alpha.1",
+    "schemaVersion": "2.0.0-alpha.3",
     "hasCpSettings": false,
     "hasCpSection" : false,
     "changelogUrl" : "https://raw.githubusercontent.com/haariga/craft-gonzo/master/CHANGELOG.md",
-    "class"        : "haariga\\craftgonzo\\CraftGonzo"
+    "class"        : "haariga\\craftgonzo\\CraftGonzo",
+    "branch-alias": {
+      "develop": "2.0.x-dev"
+    }
   },
   "config": {
     "allow-plugins": {

src/web/assets/src/css/components/global.pcss

@@ -36,24 +36,4 @@ body {
   grid-area: footer;
 }
 
-.gonzo-componentView {
-  display: grid;
-  grid-template-rows: max-content 1fr max(450px);
-  overflow: hidden;
-  grid-template-areas: "componentHeader"
-"componentRender"
-"componentFiles";
-}
-
-.gonzo-componentHeader {
-  grid-area: componentHeader;
-}
 
-.gonzo-componentRender {
-  grid-area: componentRender;
-}
-
-.gonzo-componentFiles {
-  grid-area: componentFiles;
-  max-width: calc(100vw - 340px);
-}

src/web/assets/src/vue/components/Component/ComponentFiles.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="h-full">
     <div class="p-4 border-b border-0 border-solid border-b-slate-800">
       <button
         v-for="tab in tabNames"
@@ -11,7 +11,7 @@
         {{ tab }}
       </button>
     </div>
-    <div>
+    <div class="overflow-scroll h-full">
       <FilePreviewWrapper
         :file-type="activeTab"
         :slug="files[activeTab].path ?? ''"

src/web/assets/src/vue/components/Component/RenderComponent.vue

@@ -1,12 +1,14 @@
 <template>
   <iframe
+    v-if="url"
     contenteditable="true"
     :src="url"
     frameborder="0"
     class="max-w-full w-full"
     :height="iFrameSize.height"
     ref="iframe"
   ></iframe>
+  <div v-else>No component found.</div>
 </template>
 
 <script setup lang="ts">
@@ -21,7 +23,9 @@ interface IProps {
 const props = defineProps<IProps>();
 
 const url = computed(() => {
-  return '/patternlib/component/render' + props.url + '/' + props.variant.name;
+  return (
+    '/patternlib/component/render' + props.url + '/' + props.variant?.name ?? ''
+  );
 });
 
 const iframe = ref<HTMLIFrameElement | null>(null);

src/web/assets/src/vue/views/ComponentView.vue

@@ -74,6 +74,32 @@ const variant = computed(() => {
 });
 
 const activeVariant = computed(() => {
-  return variant.value.name ?? 'Default';
+  return variant.value?.name ?? 'Default';
 });
 </script>
+
+<style>
+.gonzo-componentView {
+  display: grid;
+  grid-template-rows: max-content minmax(50vh, 80vh) max(450px);
+  overflow: hidden;
+  grid-template-areas:
+    'componentHeader'
+    'componentRender'
+    'componentFiles';
+}
+
+.gonzo-componentHeader {
+  grid-area: componentHeader;
+}
+
+.gonzo-componentRender {
+  grid-area: componentRender;
+  overflow-y: scroll;
+}
+
+.gonzo-componentFiles {
+  grid-area: componentFiles;
+  max-width: calc(100vw - 340px);
+}
+</style>