feat(admin): preview nav icons and editable url (#498)

.eslintrc.js

@@ -18,7 +18,7 @@ module.exports = {
       'error',
       'PascalCase',
       {
-        registeredComponentsOnly: false
+        registeredComponentsOnly: true
       }
     ],
     'vue/singleline-html-element-content-newline': [0],

package.json

@@ -116,6 +116,7 @@
     "vue3-router": "npm:vue-router@next"
   },
   "devDependencies": {
+    "@iconify/json": "^1.1.359",
     "@nuxt/types": "^2.15.7",
     "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/eslint-config": "^6.0.1",
@@ -130,7 +131,9 @@
     "eslint-plugin-prettier": "^3.4.0",
     "prettier": "^2.3.1",
     "siroc": "^0.9.3",
-    "standard-version": "^9.3.0"
+    "standard-version": "^9.3.0",
+    "vite-plugin-components": "^0.11.2",
+    "vite-plugin-icons": "^0.6.3"
   },
   "peerDependencies": {
     "vuex": "^3.6.2"

src/admin/app/components/Preview.vue

@@ -1,35 +1,62 @@
 <script setup lang="ts">
 import { onBeforeMount, ref, watch } from 'vue3'
-import { fetchPreviewOrigin, previewUrl, previewPath } from '../composables/preview'
+import { fetchPreviewOrigin, previewUrl, previewPath, previewOrigin } from '../composables/preview'
 
 const iframe = ref<HTMLIFrameElement>()
+const url = ref(previewUrl.value)
 
 onBeforeMount(() => fetchPreviewOrigin())
 
 watch(
   [previewUrl, iframe],
   () => {
-    if (!iframe.value) return
-    try {
-      iframe.value.contentWindow.$nuxt.$router.push(previewPath.value)
-    } catch (e) {
-      // fallback to hard refresh when working with cross-origin
-      iframe.value.src = previewUrl.value
-    }
+    url.value = previewUrl.value
+    updateIframe(previewUrl.value)
   },
   { flush: 'post' }
 )
 
+function updateIframe(url: string) {
+  if (!iframe.value) return
+  if (!url.startsWith(previewOrigin.value)) return updateIframeHard(url)
+
+  try {
+    iframe.value.contentWindow.$nuxt.$router.push(previewPath.value)
+  } catch (e) {
+    // fallback to hard refresh when working with cross-origin
+    updateIframeHard(url)
+  }
+}
+
+function updateIframeHard(url: string) {
+  if (iframe.value) iframe.value.src = url
+}
+
 function refresh() {
   iframe.value.src += ''
 }
+
+function onUrlInput() {
+  if (url.value === previewUrl.value) return
+
+  updateIframe(url.value)
+}
 </script>
 
 <template>
   <div class="h-full flex-1 grid grid-rows-[min-content,1fr]">
-    <div class="p-2 flex d-border-primary border-b">
-      <div class="flex-auto my-auto px-2">{{ previewUrl }}</div>
-      <button class="border d-border-primary rounded px-2 py-1" @click="refresh">Refresh</button>
+    <div class="p-2 flex d-border-primary border-b gap-2">
+      <button class="px-1 opacity-50 hover:opacity-100" @click="refresh">
+        <heroicons-outline:refresh />
+      </button>
+      <input
+        v-model="url"
+        class="flex-auto my-auto px-2 bg-gray-400 bg-opacity-10 rounded px-2 py-1"
+        @keydown.enter="onUrlInput"
+      />
+      <a :href="url" target="_blank" class="px-1 opacity-50 hover:opacity-100 block flex">
+        <heroicons-outline:external-link class="m-auto" />
+      </a>
     </div>
     <iframe ref="iframe" :src="previewOrigin" class="w-full h-full" />
   </div>

src/admin/vite.config.ts

@@ -2,6 +2,8 @@ import { join, resolve } from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import WindiCSS from 'vite-plugin-windicss'
+import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
+import ViteComponents from 'vite-plugin-components'
 import { dependencies, devDependencies } from '../../package.json'
 
 const r = path => resolve(__dirname, path)
@@ -20,7 +22,16 @@ export default defineConfig({
       scan: {
         include: [r('app/**/*')]
       }
-    })
+    }),
+    ViteComponents({
+      dirs: [],
+      customComponentResolvers: [
+        ViteIconsResolver({
+          componentPrefix: ''
+        })
+      ]
+    }),
+    ViteIcons()
   ],
   resolve: {
     alias: {

yarn.lock

@@ -1354,6 +1354,16 @@
   resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.28.tgz#a5ad7996f42e43e4acbb4e0010d663746d0e9997"
   integrity sha512-bprfNmYt1opFUFEtD2XfY/kEsm13bzHQgU80uMjhuK0DJ914IjolT1GytpkdM6tJ4MBvyiJPP+bTtWO+BZ7c7w==
 
+"@iconify/json-tools@^1.0.10":
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/@iconify/json-tools/-/json-tools-1.0.10.tgz#d9a7050dbbe8bb29d684d4b3f9446ed2d0bea3cc"
+  integrity sha512-LFelJDOLZ6JHlmlAkgrvmcu4hpNPB91KYcr4f60D/exzU1eNOb4/KCVHIydGHIQFaOacIOD+Xy+B7P1z812cZg==
+
+"@iconify/json@^1.1.359":
+  version "1.1.359"
+  resolved "https://registry.yarnpkg.com/@iconify/json/-/json-1.1.359.tgz#283a7a1a8557f695d435f655458ad3e4ac785f76"
+  integrity sha512-3yewVDlIDMBkbl3vAGFMuqywj2MwnKrAuST9OsIqipQu5v0r1cpvwt5VvalY/RvYE80Z0hO4rOzwCIaDdMhgsw==
+
 "@intlify/shared@^9.0.0":
   version "9.1.6"
   resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.1.6.tgz#d03c9301898d6ddffe2a54c03e7664174fbcdfd9"
@@ -13365,6 +13375,25 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
+vite-plugin-components@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/vite-plugin-components/-/vite-plugin-components-0.11.2.tgz#83cd0ebf3388329464ccaf6e259a416492a728a3"
+  integrity sha512-FfW88iOmOHx1GlGJ2KT3r51Oyu7pntgkMxv7X7WxwPS69lOCWzmDO0n2+TWiWYPDpboDLJsPKBDeSBN1BhTtXQ==
+  dependencies:
+    chokidar "^3.5.1"
+    debug "^4.3.2"
+    fast-glob "^3.2.5"
+    magic-string "^0.25.7"
+    minimatch "^3.0.4"
+
+vite-plugin-icons@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/vite-plugin-icons/-/vite-plugin-icons-0.6.3.tgz#b60ee401e4f15187758de583de7a94f44c323701"
+  integrity sha512-h+DNh9xMBhISNBZ/broslVRk/DbgDXV71u2Ienoz8G0W81+tzbtPHsE6imnwqW93h0qtS1VnVyOQlqsKcheLtw==
+  dependencies:
+    "@iconify/json-tools" "^1.0.10"
+    vue-template-es2015-compiler "^1.9.1"
+
 vite-plugin-vue2@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/vite-plugin-vue2/-/vite-plugin-vue2-1.5.1.tgz#3b1bd0b1ccccfe2a4be272b3b35cd46527a6d9ff"