🦄 refactor: added vue components instead of html

internal/app.go

@@ -53,11 +53,6 @@ func NewApp() error {
 		views = html.NewFileSystem(http.Dir("../web/views"), ".html")
 	}
 	views.Delims("{#", "#}")
-	views.AddFunc(
-		"arr", func(els ...any) []any {
-			return els
-		},
-	)
 
 	app := fiber.New(fiber.Config{
 		DisableStartupMessage: true,
@@ -71,11 +66,13 @@ func NewApp() error {
 	app.Static("/", "../web/public")
 	app.Static("/uploads", "./uploads")
 
+	app.Static("/_/components", "../web/views/admin/components")
+
 	app.Use(func(c *fiber.Ctx) error {
 		// init install
-		mainPath := strings.Split(c.Path(), "/")[1]
+		// TODO fix fatal error
 		if !db.IsInstalled() {
-			if c.Path() != "/_/install" && mainPath != "api" {
+			if c.Path() != "/_/install" && strings.Split(c.Path(), "/")[1] != "api" {
 				return c.Redirect("/_/install")
 			}
 		} else if c.Path() == "/_/install" {

web/util/importTemplate.js

@@ -0,0 +1,5 @@
+export default async function importTemplate(name) {
+  const res = await fetch(name);
+  const html = await res.text();
+  return html;
+}

web/views/admin/components/drawer.js

@@ -0,0 +1,90 @@
+export default {
+  data() {
+    return {
+      isVisible: ref(false),
+      isTransitioning: ref(false),
+    }
+  },
+
+  setup(props) {
+    watch(() => props.isOpen, (val) => {
+      this.isTransitioning.value = true;
+
+      if (val) {
+        const drawerContent = document.getElementsByClassName("drawer__content")[0];
+        drawerContent.scrollTop = 0;
+
+        toggleBackgroundScrolling(true);
+        this.isVisible.value = true;
+      } else {
+        toggleBackgroundScrolling(false);
+        setTimeout(() => (this.isVisible.value = false), props.speed);
+      }
+
+      setTimeout(() => (this.isTransitioning.value = false), props.speed);
+    })
+  },
+
+
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+
+    isOpen: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    maxWidth: {
+      type: String,
+      required: false,
+      default: "500px",
+    },
+
+    backgroundColor: {
+      type: String,
+      required: false,
+      default: "#fafafa",
+    },
+  },
+
+  methods: {
+    toggleBackgroundScrolling(enable) {
+      const body = document.querySelector("body")
+      body.style.overflow = enable ? "hidden" : null
+    },
+
+    closeDrawer() {
+      if (!this.isTransitioning.value) {
+        emit("close")
+      }
+    },
+  },
+
+  template: `<div>
+  <div class="drawer" :class="{ 'is-open': isOpen, 'is-visible': isVisible }">
+    <div class="drawer__overlay" :style="{ transitionDuration: '200 ms' }"></div>
+    <div class="drawer__content" v-click-outside="closeDrawer" :style="{
+      maxWidth: maxWidth,
+      transitionDuration: '200 ms',
+      backgroundColor: backgroundColor,
+    }">
+      <div class="pb-4">
+        <h2>{{ title }}</h2>
+      </div>
+
+      <slot />
+      <div class="pt-4">
+        <slot name="footer">
+          <button class="btn" @click="closeDrawer">Close</button>
+        </slot>
+      </div>
+    </div>
+
+  </div>
+</div>`
+}
+

web/views/admin/components/form/button.js

@@ -0,0 +1,34 @@
+export default {
+  data() { },
+
+  setup(props) { },
+
+  props: {
+    color: {
+      type: String,
+      default: 'indigo'
+    },
+    name: {
+      type: String,
+      default: 'Name'
+    },
+    ico: String,
+  },
+
+  template: `<button
+  class="group relative inline-flex items-center overflow-hidden rounded px-8 py-3 text-white"
+  :class="color ? 'bg-'+color+'-600 active:bg-'+color+'-500' : 'bg-green-600 active:bg-indigo-500', ico ? 'focus:outline-none focus:ring' : ''">
+
+  <span class="absolute -start-full transition-all group-hover:start-4" v-if="ico==='row'">
+    <svg class="h-5 w-5 rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+    </svg>
+  </span>
+
+  <span class="text-sm font-medium" :class="ico ? 'transition-all group-hover:ms-4' : ''">
+    {{name}}
+  </span>
+</button>`
+}
+

web/views/admin/components/form/input.html → web/views/admin/components/form/input.js

@@ -1,56 +1,96 @@
-{# $fieldId := index . 0 #}
-{# $fieldType := index . 1 #}
-{# $fieldRules := index . 2 #}
-{# $fieldSpan := index . 3 #}
-{# $fieldIco := index . 4 #}
-
-<div>
-  <label for="{# $fieldId #}"
+export default {
+  data(props) {
+    return {
+      placeholder: "Enter " + props.id,
+    }
+  },
+
+  components: {
+    VField: Field,
+  },
+
+  emits: ['update:modelValue'],
+
+  computed: {
+    model: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit('update:modelValue', value);
+      },
+    },
+  },
+
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+      required: true
+    },
+    id: {
+      type: String,
+      default: 'name'
+    },
+    type: {
+      type: String,
+      default: 'text'
+    },
+    name: {
+      type: String,
+      default: 'Name'
+    },
+    color: {
+      type: String,
+      default: 'indigo'
+    },
+    rules: String,
+    ico: String,
+    error: String,
+  },
+
+  template: `<div>
+  <label :for="id"
     class="relative block rounded border border-gray-200 pe-10 shadow-sm text-sm focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600"
-    :class="{ 'border-red-500': errors.{# $fieldId #} }">
+    :class="error? 'border-red-500' : ''">
 
-    <v-field type="{# $fieldType #}" name="{# $fieldId #}" rules="{# $fieldRules #}" id="{# $fieldId #}"
+    <v-field :type="type" :name="id" :rules="rules" :id="id" 
+      v-model="model"
       class="w-full peer border-none bg-transparent placeholder-transparent focus:border-transparent focus:outline-none focus:ring-0"
-      placeholder="Enter {# $fieldId #}" autocomplete="on" v-model="state.{# $fieldId #}"></v-field>
+      :placeholder="placeholder" autocomplete="on"></v-field>
 
-    <span
-      class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
-      {# $fieldSpan #}
+    <span class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs">
+      {{name}}
     </span>
 
     <span class="absolute inset-y-0 end-0 grid place-content-center px-4">
-      {# if eq $fieldIco "email" #}
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-        class="w-5 h-5 text-gray-400" :class="{ 'text-red-500': errors.{# $fieldId #} }">
+        class="w-5 h-5 text-gray-400" :class="error? 'border-red-500' : ''" v-if="ico==='email'">
         <path stroke-linecap="round"
           d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
       </svg>
-      {# end #}
 
-      {# if eq $fieldIco "password" #}
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-        class="w-5 h-5 text-gray-400" :class="{ 'text-red-500': errors.{# $fieldId #} }">
+        class="w-5 h-5 text-gray-400" :class="error? 'border-red-500' : ''" v-if="ico==='password'">
         <path stroke-linecap="round" stroke-linejoin="round"
           d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a7.464 7.464 0 01-1.15 3.993m1.989 3.559A11.209 11.209 0 008.25 10.5a3.75 3.75 0 117.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 01-3.6 9.75m6.633-4.596a18.666 18.666 0 01-2.485 5.33" />
       </svg>
-      {# end #}
 
-      {# if eq $fieldIco "domain" #}
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-        class="w-5 h-5 text-gray-400" :class="{ 'text-red-500': errors.{# $fieldId #} }">
+        class="w-5 h-5 text-gray-400" :class="error? 'border-red-500' : ''" v-if="ico==='domain'">
         <path stroke-linecap="round" stroke-linejoin="round"
           d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
       </svg>
-      {# end #}
 
-      {# if eq $fieldIco "key" #}
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-        class="w-5 h-5 text-gray-400" :class="{ 'text-red-500': errors.{# $fieldId #} }">
+        class="w-5 h-5 text-gray-400" :class="error? 'border-red-500' : ''" v-if="ico==='key'">
         <path stroke-linecap="round" stroke-linejoin="round"
           d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
       </svg>
-      {# end #}
+
     </span>
   </label>
-  <span class="text-sm text-red-500 pl-4" v-if="errors.{# $fieldId #}">{{ errors.{# $fieldId #} }}</span>
-</div>
+  <span class="text-sm text-red-500 pl-4" v-if="error">{{ error }}</span>
+</div>`
+}
+

web/views/admin/components/menu.html

@@ -1,10 +1,8 @@
 <div class="flex h-screen flex-col justify-between border-e bg-white" id="menu">
   <div class="py-6">
 
-
-
     <ul>
-      <li>
+       <li>
         <a href="/_/products"
           class="flex items-center px-6 text-sm font-medium text-gray-500 p-4 hover:bg-gray-50 hover:text-gray-500 {# if eq .Menu "products" #}bg-gray-100{# else #}bg-white{# end #}">Products</a>
       </li>

web/views/admin/index.html

@@ -1,5 +1,5 @@
 <div id="app">
-  <div class="grid grid-cols-1 gap-4 lg:grid-cols-[1fr_120px] lg:gap-8">
+  <div class="grid grid-cols-1 gap-4 pb-4 lg:grid-cols-[1fr_120px] lg:gap-8">
     <div>
       <h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">Main page</h1>
     </div>
@@ -11,7 +11,7 @@ <h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">Main page</h1>
 
 </div>
 
-<script>
+<script type="module">
   Vue.createApp({
     methods: {},