@visualizevalue/mint-app-base 0.1.54 → 0.1.56

package/components/CodeEditor.client.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="code-editor">
     <CodeMirror
+      ref="cmRef"
       :value="modelValue"
       :options="cmOptions"
-      height="100%"
       :placeholder="placeholder"
       @change="$emit('update:modelValue', $event)"
+      height="100%"
       original-style
     />
   </div>
@@ -16,7 +17,6 @@ import CodeMirror from 'codemirror-editor-vue3'
 import 'codemirror/addon/display/placeholder.js'
 import 'codemirror/mode/htmlmixed/htmlmixed.js'
 import 'codemirror/mode/javascript/javascript.js'
-// import 'codemirror/theme/ayu-mirage.css'
 
 const props = defineProps({
   modelValue: String,
@@ -25,16 +25,26 @@ const props = defineProps({
     type: String,
     default: 'text/javascript'
   },
+  theme: {
+    type: String,
+    default: 'default'
+  },
 })
 const emit = defineEmits(['update:modelValue'])
 
 const cmOptions = computed(() => ({
   mode: props.mode,
-  // theme: 'ayu-mirage',
+  theme: props.theme,
   indentUnit: 2,
   tabSize: 2,
   indentWithTab: false
 }))
+
+const cmRef = ref()
+
+defineExpose({
+  cmRef,
+})
 </script>
 
 <style scoped>

package/components/Mint/Detail.client.vue

@@ -13,13 +13,14 @@ const { component } = useCreateMintRendererComponent(props.collection)
 
 <template>
   <div class="mint-detail">
-    <MintSelectRenderer :collection="collection" class="borderless" />
+    <Actions class="borderless">
+      <MintSelectRenderer :collection="collection" />
+      <MintAction :collection="collection" />
+    </Actions>
 
     <MintPreview />
 
     <component :is="components[component]" class="card" />
-
-    <MintAction :collection="collection" />
   </div>
 </template>
 
@@ -33,9 +34,14 @@ const { component } = useCreateMintRendererComponent(props.collection)
     padding: var(--spacer);
   }
 
+  > menu {
+    justify-content: space-between;
+  }
+
   @media (--md) {
     grid-template-columns: 40% 1fr;
 
+    > menu,
     .mint-select-renderer {
       grid-column: span 2;
     }

package/components/Mint/Preview.client.vue

@@ -1,16 +1,18 @@
 <template>
   <article class="mint-preview">
+    <Embed v-if="animationUrl" :src="animationUrl" />
+
     <div class="static">
       <Image v-if="image" :src="image" alt="Preview" />
       <ImagePreview v-else />
     </div>
 
-    <Embed v-if="animationUrl" :src="animationUrl" />
-
-    <h1 :class="{ '': !name }">{{ name || 'Token' }}</h1>
-    <p :class="{ '': !description }">
-      {{ description || 'No description' }}
-    </p>
+    <div class="text">
+      <h1 :class="{ '': !name }">{{ name || 'Token' }}</h1>
+      <p :class="{ '': !description }">
+        {{ description || 'No description' }}
+      </p>
+    </div>
   </article>
 </template>
 
@@ -20,8 +22,23 @@ const { image, animationUrl, name, description } = useCreateMintData()
 
 <style scoped>
 .mint-preview {
-  height: 100%;
-  place-content: center;
+  position: sticky;
+  top: var(--spacer);
+  height: min-content;
+  place-content: start center;
+  border-radius: var(--card-border-radius);
+  display: grid;
+  grid-template-columns: 20% 1fr;
+  gap: var(--spacer);
+
+  > * {
+    grid-column: span 2;
+  }
+
+  .embed {
+    border-radius: var(--card-border-radius);
+    border: var(--border);
+  }
 
   svg {
     box-shadow: var(--border-shadow);
@@ -29,18 +46,22 @@ const { image, animationUrl, name, description } = useCreateMintData()
 
   .image,
   svg {
-    margin-bottom: var(--spacer-sm);
+    border-radius: var(--card-border-radius);
     width: 100%;
   }
 
-  .static {
-    &:has(+ .embed) {
-      width: 30%;
-    }
+  .text {
+    height: 100%;
+    align-content: center;
   }
 
-  .embed {
-    margin: var(--spacer-sm) 0;
+  &:has(.embed) {
+    > .static {
+      grid-column: 1;
+    }
+    > .text {
+      grid-column: 2;
+    }
   }
 
   h1 {

package/components/Mint/Renderer/P5.client.vue

@@ -1,20 +1,32 @@
 <template>
   <div class="mint-renderer-p5">
-
     <Tabs initial="base">
+
       <template #menu="{ active, select }">
-        <Button @click="select('base')" :class="{ active: active === 'base' }">Static</Button>
-        <Button @click="select('script')" :class="{ active: active === 'script' }">P5 Script</Button>
+        <Button
+          @click="select('base')"
+          :class="{ active: active === 'base' }"
+        >Static</Button>
+        <Button
+          @click="select('script')"
+          :class="{ active: active === 'script' }"
+        >P5 Script</Button>
       </template>
+
       <template #content="{ active }">
+        <!-- We only hide the form to maintain the file select state -->
         <MintRendererBase v-show="active === 'base'" decouple-artifact />
-        <CodeEditor v-show="active === 'script'" v-model="script" class="full" />
+        <!-- We force rerender the code editor on active -->
+        <CodeEditor v-if="active === 'script'" v-model="script" class="full" ref="codeEditor" />
       </template>
+
     </Tabs>
   </div>
 </template>
 
 <script setup>
+import { watchDebounced } from '@vueuse/core'
+
 const {
   artifact,
   image,
@@ -24,9 +36,15 @@ const {
 const script = ref(DEFAULT_P5_SCRIPT)
 
 // Keep the animationURL (for the preview) up to date
-watchEffect(() => {
+const updateUrl = () => {
   animationUrl.value = getP5HtmlUri('Preview', script.value)
-})
+}
+watchDebounced(
+  script,
+  updateUrl,
+  { debounce: 500, maxWait: 3000 },
+)
+onMounted(updateUrl)
 
 // Encode the artifact as per how the P5Renderer.sol contract expects it.
 watchEffect(() => {
@@ -44,6 +62,8 @@ watchEffect(() => {
   display: flex;
   flex-direction: column;
   gap: 0;
+  overflow: hidden;
+  width: 100%;
 
   > .tabs {
     height: min-content;
@@ -51,7 +71,8 @@ watchEffect(() => {
 
   > .tabs-content {
     border: var(--border);
-    border-top: 0;
+    border-radius: var(--card-border-radius);
+    overflow: hidden;
     height: 100%;
 
     > * {

package/components/Page/Frame.vue

@@ -33,9 +33,9 @@ watch(props, () => updateBreadcrumbs())
   &.inset {
     gap: var(--spacer);
     padding: var(--spacer);
-    overflow-x: hidden;
 
     > *:not(.borderless) {
+      border-radius: var(--card-border-radius);
       border: var(--border);
       padding: var(--spacer);
     }

package/components/Tabs.vue

@@ -17,7 +17,6 @@ const select = k => active.value = k
 
 <style>
 .tabs {
-  border-bottom: var(--border);
   padding: 0 var(--size-1);
   margin: 0;
   display: flex;
@@ -33,6 +32,10 @@ const select = k => active.value = k
       border-bottom-color: var(--background);
     }
   }
+
+  .tabs-content {
+    border-top: var(--border);
+  }
 }
 </style>
 

package/composables/collections.ts

@@ -256,11 +256,11 @@ export const useOnchainStore = () => {
               }),
             ])
 
-            this.collections[address].renderers.push({
+            this.collections[address].renderers[index] = {
               address: rendererAddress.toLowerCase() as `0x${string}`,
               name,
               version,
-            })
+            }
 
             index ++
           } catch (e) {

package/composables/createMint.ts

@@ -50,7 +50,9 @@ export const useCreateMintRendererComponent = (collection: Collection) => {
   })
 
   const component = computed(() => appConfig.knownRenderers
-    .find((r: Renderer) => r.address.toLowerCase() === rendererAddress.value)?.component || 'Base'
+    .find((r) =>
+      r.address.toLowerCase() === rendererAddress.value
+    )?.component || 'Base'
   )
 
   return {

package/nuxt.config.ts

@@ -69,6 +69,8 @@ export default defineNuxtConfig({
       config.optimizeDeps.include = config.optimizeDeps.include || []
       config.optimizeDeps.include.push('@visualizevalue/mint-app-base > eventemitter3')
       config.optimizeDeps.include.push('@visualizevalue/mint-app-base > buffer/')
+      config.optimizeDeps.include.push('@visualizevalue/mint-app-base > codemirror')
+      config.optimizeDeps.include.push('@visualizevalue/mint-app-base > codemirror-editor-vue3')
     }
   },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.54",
+  "version": "0.1.56",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {

package/utils/p5Script.ts

@@ -6,11 +6,30 @@ function setup() {
 
   createCanvas(dimension, dimension)
 
-  background(150)
+  background(255)
 }
 
 function draw() {
-  // ...
+	const width  = dimension/16
+  			offset = width / 2
+
+ 	fill(0)
+  strokeWeight(0)
+
+  rect(
+    dimension/3 - offset, dimension/3,
+    width, dimension/3
+  )
+
+  rect(
+    dimension/2 - offset, dimension/2.5,
+    width, dimension/5
+  )
+
+  rect(
+    dimension - dimension/3 - offset, dimension/3,
+    width, dimension/3
+  )
 }
 `