@visualizevalue/mint-app-base 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/app/assets/styles/base.css +9 -1
  2. package/app/assets/styles/forms.css +1 -6
  3. package/app/assets/styles/variables/colors.css +1 -2
  4. package/app/assets/styles/variables/ui.css +11 -10
  5. package/app/components/AppHeader.vue +14 -1
  6. package/app/components/Breadcrumbs.vue +16 -3
  7. package/app/components/Button/AddCollection.vue +1 -1
  8. package/app/components/Button/EditProfile.vue +1 -1
  9. package/app/components/Button/Profile/Discord.vue +1 -1
  10. package/app/components/Button/Profile/Email.vue +1 -1
  11. package/app/components/Button/Profile/Github.vue +1 -1
  12. package/app/components/Button/Profile/Twitter.vue +1 -1
  13. package/app/components/Button/Profile/Website.vue +1 -1
  14. package/app/components/Button.vue +2 -9
  15. package/app/components/Collection/Intro.vue +0 -1
  16. package/app/components/Collection/Withdraw.client.vue +1 -1
  17. package/app/components/Icon.vue +4 -2
  18. package/app/pages/[id]/[collection]/mint.vue +1 -1
  19. package/package.json +44 -44
package/app/assets/styles/base.css CHANGED
@@ -8,10 +8,10 @@ html {
8
8
  /*
9
9
  * Font settings
10
10
  */
11
+ font-size: var(--rem);
11
12
  font-family: var(--font-family);
12
13
  line-height: var(--line-height-base);
13
14
  font-weight: var(--font-weight);
14
- font-size: var(--rem);
15
15
  font-style: normal;
16
16
  letter-spacing: var(--letter-spacing);
17
17
  text-transform: var(--text-transform);
@@ -23,6 +23,14 @@ html {
23
23
  }
24
24
 
25
25
  body {
26
+ /*
27
+ * We treat font sizes are separate from the root em (--rem) seetting.
28
+ */
29
+ font-size: var(--font-base);
30
+
31
+ /*
32
+ * We prevent horizontal overflow
33
+ */
26
34
  overflow-x: hidden;
27
35
  }
28
36
 
package/app/assets/styles/forms.css CHANGED
@@ -5,6 +5,7 @@ textarea,
5
5
  select {
6
6
  width: 100%;
7
7
  font-family: var(--ui-font-family);
8
+ font-size: var(--ui-font-size);
8
9
  font-weight: var(--ui-font-weight);
9
10
  text-transform: var(--ui-text-transform);
10
11
  transition: all var(--speed);
@@ -62,12 +63,6 @@ select {
62
63
  &::-ms-input-placeholder {
63
64
  color: var(--border-color-light);
64
65
  }
65
-
66
- &.small {
67
- min-height: 0;
68
- font-size: var(--font-sm);
69
- padding: calc(var(--size-1) + var(--size-0)) var(--size-3);
70
- }
71
66
  }
72
67
 
73
68
  .form-item {
package/app/assets/styles/variables/colors.css CHANGED
@@ -5,8 +5,7 @@
5
5
  --black: rgb(0, 0, 0);
6
6
 
7
7
  /* COLORS */
8
- --blue: #3263D0;
9
- --primary: var(--blue);
8
+ --primary: blue;
10
9
 
11
10
  /*
12
11
  * Z-COLORS
package/app/assets/styles/variables/ui.css CHANGED
@@ -1,17 +1,18 @@
1
1
  :root {
2
2
 
3
- --ui-font-family: var(--font-family);
4
- --ui-font-weight: var(--font-weight);
5
- --ui-text-transform: var(--text-transform);
3
+ --ui-font-family: var(--font-family);
4
+ --ui-font-size: var(--font-sm);
5
+ --ui-font-weight: var(--font-weight);
6
+ --ui-text-transform: var(--text-transform);
7
+ --ui-letter-spacing: var(--letter-spacing);
8
+ --ui-line-height: var(--line-height);
6
9
 
7
- --ui-placeholder-color: var(--muted);
8
- --ui-color: var(--primary);
9
- --ui-color-visited: var(--primary);
10
- --ui-letter-spacing: var(--letter-spacing);
11
- --ui-line-height: var(--line-height);
10
+ --ui-color: var(--primary);
11
+ --ui-placeholder-color: var(--muted);
12
+ --ui-color-visited: var(--primary);
12
13
 
13
- --ui-padding-y: var(--spacer-sm);
14
- --ui-padding-x: var(--spacer-sm);
14
+ --ui-padding-y: var(--spacer-sm);
15
+ --ui-padding-x: var(--spacer);
15
16
 
16
17
  }
17
18
 
package/app/components/AppHeader.vue CHANGED
@@ -6,7 +6,13 @@
6
6
  <MintGasPricePopover />
7
7
 
8
8
  <Connect v-if="! isConnected" />
9
- <NuxtLink v-else :to="{ name: 'profile-address', params: { address: address?.toLowerCase() } }">
9
+ <NuxtLink v-else
10
+ :to="{
11
+ name: 'profile-address',
12
+ params: { address: address?.toLowerCase() }
13
+ }"
14
+ class="account"
15
+ >
10
16
  <Account :address="address" />
11
17
  </NuxtLink>
12
18
  </ClientOnly>
@@ -71,6 +77,13 @@ header {
71
77
  display: block;
72
78
  }
73
79
  }
80
+
81
+ .account {
82
+ font-family: var(--ui-font-family);
83
+ font-size: var(--ui-font-size);
84
+ letter-spacing: var(--ui-letter-spacing);
85
+ text-transform: var(--ui-text-transform);
86
+ }
74
87
  }
75
88
  </style>
76
89
 
package/app/components/Breadcrumbs.vue CHANGED
@@ -13,18 +13,31 @@ defineProps({
13
13
  })
14
14
  </script>
15
15
 
16
- <style scoped>
16
+ <style>
17
17
  :root {
18
- --breadcrumb-nav-color: var(--muted);
18
+ --breadcrumb-nav-color: var(--muted);
19
19
  --breadcrumb-nav-active-color: var(--muted);
20
- --breadcrumb-separator-color: var(--muted);
20
+ --breadcrumb-separator-color: var(--muted);
21
+
22
+ --breadcrumb-font-family: var(--ui-font-family);
23
+ --breadcrumb-font-size: var(--ui-font-size);
24
+ --breadcrumb-font-font-weight: var(--ui-font-weight);
25
+ --breadcrumb-text-transform: var(--ui-text-transform);
26
+ --breadcrumb-letter-spacing: var(--ui-letter-spacing);
21
27
  }
28
+ </style>
22
29
 
30
+ <style scoped>
23
31
  .breadcrumb {
24
32
  display: flex;
25
33
  align-items: center;
26
34
  justify-content: center;
27
35
  gap: var(--spacer-sm);
36
+ font-family: var(--breadcrumb-font-family);
37
+ font-weight: var(--breadcrumb-font-weight);
38
+ text-transform: var(--breadcrumb-text-transform);
39
+ font-size: var(--breadcrumb-font-size);
40
+ letter-spacing: var(--breadcrumb-letter-spacing);
28
41
 
29
42
  > span {
30
43
  white-space: nowrap;
package/app/components/Button/AddCollection.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <Button :to="{ name: `id-create`, params: { id } }" class="small">
2
+ <Button :to="{ name: `id-create`, params: { id } }">
3
3
  <Icon type="add"/>
4
4
  <span>Collection</span>
5
5
  </Button>
package/app/components/Button/EditProfile.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <Button :to="`https://app.ens.domains/${address}`" class="small">
2
+ <Button :to="`https://app.ens.domains/${address}`">
3
3
  <Icon type="edit" />
4
4
  <span>Edit Profile</span>
5
5
  </Button>
package/app/components/Button/Profile/Discord.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <Button v-if="validateURI(profile.url)" :to="validateURI(profile.url)" class="small">
2
+ <Button v-if="validateURI(profile.url)" :to="validateURI(profile.url)">
3
3
  <Icon type="website" />
4
4
  {{ getMainDomain(profile.url) }}
5
5
  </Button>
package/app/components/Button/Profile/Email.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <Button v-if="profile.email" :to="`mailto:${profile.email}`" class="small">
2
+ <Button v-if="profile.email" :to="`mailto:${profile.email}`">
3
3
  <Icon type="email" />
4
4
  <span>{{ profile.email }}</span>
5
5
  </Button>
package/app/components/Button/Profile/Github.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <Button v-if="profile.github" :to="`https://github.com/${profile.github}`" class="small">
2
+ <Button v-if="profile.github" :to="`https://github.com/${profile.github}`">
3
3
  <Icon type="github" />
4
4
  <span>{{ profile.github }}</span>
5
5
  </Button>
package/app/components/Button/Profile/Twitter.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <Button v-if="profile.twitter" :to="`https://x.com/${profile.twitter}`" class="small">
2
+ <Button v-if="profile.twitter" :to="`https://x.com/${profile.twitter}`">
3
3
  <Icon type="twitter" />
4
4
  <span>{{ profile.twitter }}</span>
5
5
  </Button>
package/app/components/Button/Profile/Website.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <Button v-if="validateURI(profile.url)" :to="validateURI(profile.url)" class="small">
2
+ <Button v-if="validateURI(profile.url)" :to="validateURI(profile.url)">
3
3
  <Icon type="website" />
4
4
  <span>{{ getMainDomain(profile.url) }}</span>
5
5
  </Button>
package/app/components/Button.vue CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  <script setup>
7
7
  defineProps({
8
- to: [String,Object],
8
+ to: [String, Object],
9
9
  target: {
10
10
  type: String,
11
11
  default: '_self',
@@ -23,7 +23,7 @@ defineProps({
23
23
  display: inline-flex;
24
24
  justify-content: center;
25
25
  align-items: center;
26
- gap: var(--ui-padding-x);
26
+ gap: calc(var(--ui-padding-x) / 2);
27
27
  letter-spacing: var(--ui-letter-spacing);
28
28
  line-height: var(--ui-line-height);
29
29
 
@@ -55,13 +55,6 @@ defineProps({
55
55
  height: 100%;
56
56
  }
57
57
 
58
- &.small,
59
- &.small > * {
60
- font-size: var(--font-sm);
61
- min-height: 0;
62
- gap: calc(var(--ui-padding-x) / 2);
63
- }
64
-
65
58
  &.link {
66
59
  display: inline-flex;
67
60
  align-self: baseline;
package/app/components/Collection/Intro.vue CHANGED
@@ -30,7 +30,6 @@
30
30
  <Button
31
31
  :to="{ name: 'id-collection-mint', params: { id, collection: collection.address } }"
32
32
  id="mint-new"
33
- class="small"
34
33
  >
35
34
  <Icon type="add" />
36
35
  <span>Mint New</span>
package/app/components/Collection/Withdraw.client.vue CHANGED
@@ -19,7 +19,7 @@
19
19
  },
20
20
  }" skip-confirmation auto-close-success @complete="onComplete">
21
21
  <template #start="{ start }">
22
- <Button @click="start" class="small">
22
+ <Button @click="start">
23
23
  <Icon type="withdraw" />
24
24
  <span>Withdraw ({{ balance.value }} {{ balance.format }})</span>
25
25
  </Button>
package/app/components/Icon.vue CHANGED
@@ -34,8 +34,10 @@ const symbol = computed(() => ICONS[props.type])
34
34
  <style scoped>
35
35
  .icon {
36
36
  display: inline-flex;
37
- width: var(--size-4);
38
- height: var(--size-4);
37
+ width: 1em;
38
+ height: 1em;
39
39
  align-items: center;
40
+ justify-content: center;
41
+ text-align: center;
40
42
  }
41
43
  </style>
package/app/pages/[id]/[collection]/mint.vue CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  <form @submit.stop.prevent="mint" class="card">
14
14
  <Actions>
15
- <select class="select small choose-mode" v-model="mode">
15
+ <select class="select choose-mode" v-model="mode">
16
16
  <option value="file" title="Data URI Encoded File Upload">DATA-URI</option>
17
17
  <option value="ipfs" title="Interplanetary File System">IPFS</option>
18
18
  <option value="http" title="Hypertext Transfer Protocol" disabled>HTTP</option>
package/package.json CHANGED
@@ -1,45 +1,45 @@
1
1
  {
2
- "name": "@visualizevalue/mint-app-base",
3
- "version": "0.1.2",
4
- "type": "module",
5
- "main": "./nuxt.config.ts",
6
- "scripts": {
7
- "build": "nuxt build",
8
- "dev": "nuxt dev --port 1618",
9
- "generate": "nuxt generate",
10
- "preview": "nuxt preview",
11
- "postinstall": "nuxt prepare"
12
- },
13
- "dependencies": {
14
- "@csstools/postcss-global-data": "^2.1.1",
15
- "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
16
- "@pinia/nuxt": "^0.5.3",
17
- "@tanstack/vue-query": ">=5.45.0",
18
- "@visualizevalue/mint-utils": "workspace:@visualizevalue/mint-utils@^0.0.1",
19
- "@vueuse/components": "^10.11.0",
20
- "@vueuse/core": "^11.0.3",
21
- "@vueuse/nuxt": "^11.0.3",
22
- "@wagmi/vue": "^0.0.40",
23
- "buffer": "^6.0.3",
24
- "eventemitter3": "^5.0.1",
25
- "feather-icons": "^4.29.2",
26
- "multiformats": "^13.2.2",
27
- "postcss-custom-media": "^10.0.6",
28
- "postcss-custom-selectors": "^7.1.10",
29
- "postcss-nested": "^6.0.1",
30
- "postcss-preset-env": "^9.5.13",
31
- "viem": "2.x",
32
- "vue-feather": "^2.0.0",
33
- "vue-router": "^4.3.2",
34
- "vue-virtual-scroller": "^2.0.0-beta.8"
35
- },
36
- "devDependencies": {
37
- "@types/node": "^22.5.4",
38
- "@vue/devtools-api": "^6.6.3",
39
- "@wagmi/core": "^2.13.5",
40
- "eventemitter3": "^5.0.1",
41
- "nuxt": "latest",
42
- "typescript": "^5.5.4",
43
- "vite": "^5.4.3"
44
- }
45
- }
2
+ "name": "@visualizevalue/mint-app-base",
3
+ "version": "0.1.4",
4
+ "type": "module",
5
+ "main": "./nuxt.config.ts",
6
+ "dependencies": {
7
+ "@csstools/postcss-global-data": "^2.1.1",
8
+ "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
9
+ "@pinia/nuxt": "^0.5.3",
10
+ "@tanstack/vue-query": ">=5.45.0",
11
+ "@visualizevalue/mint-utils": "npm:@visualizevalue/mint-utils@^0.0.1",
12
+ "@vueuse/components": "^10.11.0",
13
+ "@vueuse/core": "^11.0.3",
14
+ "@vueuse/nuxt": "^11.0.3",
15
+ "@wagmi/vue": "^0.0.40",
16
+ "buffer": "^6.0.3",
17
+ "eventemitter3": "^5.0.1",
18
+ "feather-icons": "^4.29.2",
19
+ "multiformats": "^13.2.2",
20
+ "postcss-custom-media": "^10.0.6",
21
+ "postcss-custom-selectors": "^7.1.10",
22
+ "postcss-nested": "^6.0.1",
23
+ "postcss-preset-env": "^9.5.13",
24
+ "viem": "2.x",
25
+ "vue-feather": "^2.0.0",
26
+ "vue-router": "^4.3.2",
27
+ "vue-virtual-scroller": "^2.0.0-beta.8"
28
+ },
29
+ "devDependencies": {
30
+ "@types/node": "^22.5.4",
31
+ "@vue/devtools-api": "^6.6.3",
32
+ "@wagmi/core": "^2.13.5",
33
+ "eventemitter3": "^5.0.1",
34
+ "nuxt": "latest",
35
+ "typescript": "^5.5.4",
36
+ "vite": "^5.4.3"
37
+ },
38
+ "scripts": {
39
+ "build": "nuxt build",
40
+ "dev": "nuxt dev --port 1618",
41
+ "generate": "nuxt generate",
42
+ "preview": "nuxt preview",
43
+ "postinstall": "nuxt prepare"
44
+ }
45
+ }