@hashtagcms/admin-ui-kit 1.0.6

package/packages/components/src/title-bar.vue

@@ -0,0 +1,76 @@
+<template>
+  <div
+    class="btn-toolbar justify-content-between border-bottom mb-2 pb-2"
+    role="toolbar"
+  >
+    <div class="btn-group" role="group">
+      <small style="position: relative; top: 5px" v-if="showExpand">
+        <left-menu-toggle
+          data-icon-css="fa fa-arrow-left hand"
+          data-icon-css-off="fa fa-arrow-right hand"
+        ></left-menu-toggle
+      ></small>
+      <h4 class="moduleTitle" v-html="title"></h4>
+    </div>
+    <div class="input-group actionToolbar">
+      <copy-paste
+        :data-copy-paste-auto-init="dataCopyPasteAutoInit"
+        :data-show-copy="dataShowCopy"
+        :data-show-paste="dataShowPaste"
+      ></copy-paste>
+      <button
+        v-if="showBackButton"
+        aria-label="Back"
+        class="btn btn-outline-secondary"
+        title="Back"
+        type="button"
+        @click="goBack()"
+      >
+        {{ backTitle }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import CopyPaste from "./library/copy-paste.vue";
+import LeftMenuShowHide from "./library/left-menu-show-hide.vue";
+
+export default {
+  components: {
+    "copy-paste": CopyPaste,
+    "left-menu-toggle": LeftMenuShowHide,
+  },
+  mounted() {},
+  props: [
+    "dataTitle",
+    "dataBackUrl",
+    "dataBackTitle",
+    "dataShowCopy",
+    "dataShowPaste",
+    "dataCopyPasteAutoInit",
+    "dataShowExpand",
+  ],
+  computed: {
+    showBackButton() {
+      return typeof this.dataBackUrl !== "undefined";
+    },
+    showExpand() {
+      return typeof this.dataShowExpand !== "undefined";
+    },
+  },
+  data() {
+    return {
+      title: this.dataTitle,
+      backUrl: this.dataBackUrl,
+      backTitle:
+        typeof this.dataBackTitle === "undefined" ? "Back" : this.dataBackTitle,
+    };
+  },
+  methods: {
+    goBack() {
+      window.location.href = this.backUrl;
+    },
+  },
+};
+</script>

package/packages/components/src/top-nav.vue

@@ -0,0 +1,96 @@
+<template>
+  <nav class="navbar navbar-expand-lg bg-light border-bottom">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="/" target="_blank"
+        ><img class="cms-logo" :src="logo" :height="logoHeight" />
+        {{ siteName }}
+      </a>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarScroll"
+        aria-controls="navbarScroll"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarScroll">
+        <ul
+          class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll"
+          style="--bs-scroll-height: 100px"
+        >
+          <li class="nav-item">
+            <global-site-button
+              :data-current-site="dataCurrentSite"
+              :data-supported-sites="dataSupportedSites"
+              :data-is-admin="dataIsAdmin"
+            ></global-site-button>
+          </li>
+        </ul>
+        <div class="d-flex">
+          Welcome &nbsp; <span class="text-success">{{ userName }}!</span>
+          <ul
+            class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll ms-1"
+            style="--bs-scroll-height: 100px"
+          >
+            <li class="nav-item">
+              <a href="/logout" @click.prevent="logout">Logout</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+import AdminConfig from "@hashtagcms/helpers/admin-config";
+import GlobalSiteButton from "./global-site-button.vue";
+export default {
+  components: {
+    "global-site-button": GlobalSiteButton,
+  },
+  mounted() {
+    //console.log('dataCurrentSite '+this.dataCurrentSite);
+  },
+  props: [
+    "dataUsername",
+    "dataSiteName",
+    "dataCurrentSite",
+    "dataSupportedSites",
+    "dataIsAdmin",
+    "dataSiteCombo",
+    "dataLogo",
+    "dataLogoHeight",
+  ],
+  computed: {
+    logo() {
+      return typeof this.dataLogo !== "undefined" && this.dataLogo !== ""
+        ? this.dataLogo
+        : AdminConfig.admin_asset("img/logo-transparent.png");
+    },
+  },
+  data() {
+    return {
+      siteName: this.dataSiteName || "hashtagcms.org",
+      userName: this.dataUsername,
+      isLoggedIn: !!(this.dataUsername && this.dataUsername !== ""),
+      siteCombo: !(
+        typeof this.dataSiteCombo == "undefined" ||
+        this.dataSiteCombo === "false"
+      ),
+      logoHeight:
+        typeof this.dataLogoHeight === "undefined" || this.dataLogoHeight === ""
+          ? 50
+          : this.dataLogoHeight,
+    };
+  },
+  methods: {
+    logout(event) {
+      document.getElementById("logout-form").submit();
+    },
+  },
+};
+</script>

package/packages/helpers/README.md

@@ -0,0 +1,88 @@
+# @hashtagcms/helpers
+
+A utility toolbelt for HashtagCMS development. This package provides essential classes for API communication, form handling, configuration management, and event management.
+
+## 📦 Installation
+
+```bash
+npm install @hashtagcms/helpers
+```
+
+## 🚀 Usage
+
+```javascript
+import { Toast, Loader } from "@hashtagcms/helpers/common";
+import Form from "@hashtagcms/helpers/form";
+import AdminConfig from "@hashtagcms/helpers/admin-config";
+```
+
+## 🛠 API Reference
+
+### `Form`
+
+A robust class for handling form state, validation, and submission via Axios.
+
+**Usage:**
+
+```javascript
+let myForm = new Form({ name: "", email: "" });
+
+// Submit
+myForm
+  .post("/api/user/create")
+  .then((data) => console.log("Saved!"))
+  .catch((errors) => console.log(myForm.errors.get("email")));
+```
+
+**Features:**
+
+- **`post(url)`, `put(url)`, `delete(url)`**: wrappers for API calls.
+- **`reset()`**: Clears fields and errors.
+- **`errors.get('field')`**: Retrieve validation error for a field.
+- **`data()`**: Returns the clean data object for submission.
+
+### `AdminConfig` (Default Export)
+
+A singleton that manages application-wide settings passed from the server (usually via `window.Laravel`).
+
+**Methods:**
+
+- **`admin_path(path)`**: Generates a full URL for the admin panel.
+- **`admin_asset(path)`**: Generates a URL for theme assets.
+- **`get_media(path)`**: Generates a URL for media files.
+
+### `EventBus`
+
+A lightweight wrapper around `mitt` to handle cross-component communication.
+
+```javascript
+import { EventBus } from "@hashtagcms/helpers/event-bus";
+
+// Send
+EventBus.emit("my-event", { id: 1 });
+
+// Listen
+EventBus.on("my-event", (data) => {
+  console.log(data.id);
+});
+```
+
+### `Common` Utilities
+
+Exported from `@hashtagcms/helpers/common`:
+
+- **`Toast`**: Displays global toast notifications.
+  - `Toast.show(vm, message, timeout, position)`
+- **`Loader`**: Controls the global loading spinner.
+  - `Loader.show(vm, msg)`, `Loader.hide(vm)`
+- **`Modal`**: Controls the global modal dialog.
+- **`queryBuilder`**: Helper to parse URL query parameters.
+- **`CopyToClipboard(text)`**: Async helper to copy text to clipboard.
+- **`PasteFromClipboard()`**: Async helper to read from clipboard.
+
+## ⚠️ Dependencies
+
+This package depends on:
+
+- `axios`: For HTTP requests.
+- `mitt`: For event handling.

package/packages/helpers/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@hashtagcms/helpers",
+  "version": "1.0.0",
+  "description": "Helper utilities for HashtagCMS",
+  "author": "HashtagCMS",
+  "license": "MIT",
+  "homepage": "https://hashtagcms.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hashtagcms/admin-ui-kit.git"
+  },
+  "main": "src/common.js",
+  "exports": {
+    "./*": "./src/*.js"
+  },
+  "dependencies": {
+    "mitt": "^3.0.1",
+    "axios": "^1.8.4"
+  }
+}

package/packages/helpers/src/admin-config.js

@@ -0,0 +1,9 @@
+/**
+ * Admin Configuration Helper
+ * Re-exporting from SDK
+ */
+import { AdminConfig } from "@hashtagcms/admin-sdk";
+
+const adminConfig = new AdminConfig();
+export { AdminConfig };
+export default adminConfig;

package/packages/helpers/src/common.js

@@ -0,0 +1,89 @@
+/**
+ * Created by marghoob.suleman on 8/23/17.
+ */
+import { EventBus } from "./event-bus";
+import {
+  queryBuilder,
+  Storage,
+  Utils,
+  Fetcher,
+  CopyToClipboard,
+  PasteFromClipboard,
+  IsJson,
+  LeftMenu,
+  TitleCase
+} from "@hashtagcms/admin-sdk";
+
+// Initialize SDK LeftMenu with EventBus
+if (LeftMenu && typeof LeftMenu.init === 'function') {
+  LeftMenu.init(EventBus);
+}
+
+export {
+  queryBuilder,
+  Storage,
+  Utils,
+  Fetcher,
+  CopyToClipboard,
+  PasteFromClipboard,
+  IsJson,
+  LeftMenu,
+  TitleCase
+};
+
+/**
+ * Toast
+ * Dependecy: library/toastBox.vue
+ *
+ */
+export class Toast {
+  static show(vm, message = "", timeout = 1000, position) {
+    vm.$root.$refs.globalToaster.show(message, timeout, position);
+  }
+  static hide(vm) {
+    vm.$root.$refs.globalToaster.hide();
+  }
+}
+
+/**
+ * Loader
+ * Dependecy: library/loader.vue
+ *
+ */
+export class Loader {
+  static show(vm, message = null, position = null) {
+    vm.$root.$refs.globalLoader.show(message, position);
+  }
+  static hide(vm) {
+    vm.$root.$refs.globalLoader.hide();
+  }
+}
+
+/**
+ * Modal
+ * Dependency: library/modalBox.vue
+ *
+ */
+export class Modal {
+  static show(vm, message = "", position, callback, timeout) {
+    vm.$root.$refs.globalModalBox.show(message, position, callback, timeout);
+  }
+  static hide(vm) {
+    vm.$root.$refs.globalModalBox.hide();
+  }
+  static open(vm = null, modalRef = null, callback = null) {
+    if (vm != null && modalRef != null) {
+      vm.$refs[modalRef].open(callback);
+    }
+  }
+  static close(vm = null, modalRef = null) {
+    if (vm != null && modalRef != null) {
+      vm.$refs[modalRef].hide();
+    }
+  }
+}
+
+
+
+
+

package/packages/helpers/src/dashboard.js

@@ -0,0 +1,16 @@
+import { Dashboard } from "@hashtagcms/admin-sdk";
+
+export const {
+  data,
+  labelsCategories,
+  datasCategories,
+  labelsContent,
+  datasContent,
+  bgColors,
+  borderColors,
+  createChart,
+  makeData,
+  init
+} = Dashboard;
+
+export { Dashboard };

package/packages/helpers/src/editor.js

@@ -0,0 +1,163 @@
+import { AdminConfig, CleanForUrl } from "@hashtagcms/admin-sdk";
+
+// Global AdminConfig instance wrapper if needed, or valid assuming window.AdminConfig is set.
+// But better to use the class to be safe if window.AdminConfig isn't ready.
+const adminConfig = new AdminConfig();
+
+export const EditorHelper = (function () {
+  let makeRichEditor = (selector, settings) => {
+    selector = document.querySelector(selector);
+    let defaultSettings = {
+      selector: "#" + selector.id,
+      height: 500,
+      theme: "silver",
+      plugins:
+        "code print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern",
+      toolbar1:
+        "formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist | removeformat | customGallery | image |  code ",
+      image_advtab: true,
+      template_popup_height: 400,
+      template_popup_width: 320,
+      valid_elements: "*[*]",
+      valid_children: "*[*]",
+      document_base_url: adminConfig.get("app_url") + "/",
+      allow_script_urls: true,
+      convert_urls: false,
+      relative_urls: false,
+      remove_script_host: false,
+      content_css: ["//fonts.googleapis.com/css?family=Lato:300,300i,400,400i"],
+      setup: function (editor) {
+        editor.ui.registry.addButton("customGallery", {
+          text: "Insert Image",
+          onAction: function (_) {
+            if (Vue?.$refs?.imageGallery) {
+              Vue.$refs.imageGallery.open(editor);
+            }
+          },
+        });
+      },
+    };
+    defaultSettings = { ...defaultSettings, ...settings };
+    selector.editor = tinymce.init(defaultSettings);
+  };
+
+  return { makeRichEditor: makeRichEditor };
+})();
+
+/** Page Manager **/
+export const PageManager = {
+  action: null,
+  content_type: null,
+  id: null,
+  init: function (action, content_type, id) {
+    this.action = action;
+    this.content_type = content_type;
+    this.id = id;
+
+    if (PageManager.action === "add") {
+      document
+        .getElementById("lang_name")
+        .addEventListener("change", PageManager.autoUpdateFields);
+      document
+        .getElementById("lang_title")
+        .addEventListener("change", PageManager.autoUpdateUrls);
+      document
+        .getElementById("link_rewrite")
+        .addEventListener("keyup", PageManager.linkRewriteUpdated);
+      document
+        .getElementById("category_id")
+        .addEventListener("change", PageManager.getParentCategory);
+    } else {
+      this.getParentCategory();
+    }
+  },
+  isBlank: function (elem) {
+    return document.getElementById(elem).value.replace(/\s/g, "") === "";
+  },
+
+  autoUpdateFields: function () {
+    let value = this.value;
+    try {
+      if (PageManager.isBlank("lang_title")) {
+        document.getElementById("lang_title").value =
+          value[0].toUpperCase() + value.slice(1);
+        document.getElementById("alias").value = CleanForUrl(
+          value.toUpperCase(),
+          "_",
+        );
+        let active_key = CleanForUrl(value.toLowerCase(), "-");
+        document.getElementById("lang_active_key").value = active_key;
+        document.getElementById("link_rewrite").value = active_key;
+      }
+    } catch (e) {
+      console.error(e.message);
+    }
+  },
+  autoUpdateUrls: function () {
+    let value = this.value;
+    if (document.getElementById("link_rewrite").edited !== true) {
+      value = CleanForUrl(value.toUpperCase(), "_");
+      value = value.substr(0, 60); //it's limit
+      document.getElementById("alias").value = value;
+
+      let active_key = CleanForUrl(value.toLowerCase(), "-");
+      active_key = value.substr(0, 128); //it's limit
+      document.getElementById("lang_active_key").value = active_key;
+      document.getElementById("link_rewrite").value = active_key;
+    }
+  },
+  linkRewriteUpdated: function () {
+    document.getElementById("link_rewrite").edited = true;
+  },
+  getParentCategory() {
+    let parentcombo = document.getElementById("parent_id");
+    let category_id = document.getElementById("category_id").value;
+    document.getElementById("parent_id").value = "";
+
+    parentcombo.length = 0;
+    parentcombo.options[0] = new Option("Select", "");
+
+    if (category_id > 0) {
+      showHideBlock(true);
+      let path = adminConfig.admin_path("page/getParentCategory", {
+        content_type: PageManager.content_type,
+        category_id: category_id,
+      });
+      axios
+        .get(path)
+        .then(function (res) {
+          //console.log(res);
+          updateCombo(res.data);
+        })
+        .catch(function (res) {
+          //console.log(res);
+          showHideBlock(false);
+        });
+    } else {
+      showHideBlock(false);
+    }
+
+    function updateCombo(res) {
+      if (res.length > 0) {
+        let index = 1;
+        for (let i = 0; i < res.length; i++) {
+          let current = res[i];
+          if (current.id !== PageManager.id) {
+            parentcombo.options[index] = new Option(
+              current.lang.name,
+              current.id,
+            );
+            index++;
+          }
+        }
+      } else {
+        showHideBlock(false);
+      }
+    }
+
+    function showHideBlock(show) {
+      document.getElementById("parent_div").style.display =
+        show === true ? "" : "none";
+    }
+  },
+};

package/packages/helpers/src/error-message-handler.js

@@ -0,0 +1,50 @@
+import { Toast } from "./common";
+
+export class ErrorMessage {
+  constructor() {
+    this.errors = typeof error_messages == "undefined" ? [] : error_messages;
+    this.init();
+  }
+  init() {
+    let $this = this;
+    document.addEventListener("DOMContentLoaded", function () {
+      for (let i in $this.errors) {
+        $this.highlightField(i, $this.errors[i][0]);
+      }
+      $this.focusFirst();
+    });
+  }
+  highlightField(field, message) {
+    let f = field;
+    field = document.getElementById(f);
+
+    if (!field) {
+      console.error("Could not find " + f);
+      return false;
+    }
+    field.classList.add("is-invalid");
+
+    let div = document.createElement("div");
+    div.classList.add("alert", "alert-danger", "mt-03");
+
+    if (f.indexOf("lang_") !== -1) {
+      message = message.replace("lang ", "");
+    }
+    div.innerHTML = message;
+
+    field.parentNode.insertBefore(div, field.nextSibling);
+  }
+  focusFirst() {
+    for (let i in this.errors) {
+      let element = document.getElementById(i);
+      try {
+        if (element) {
+          element.focus();
+          break;
+        }
+      } catch (e) {
+        console.log(e.message);
+      }
+    }
+  }
+}

package/packages/helpers/src/event-bus.js

@@ -0,0 +1,4 @@
+// import Vue from 'vue';
+// export const EventBus = new Vue();
+import mitt from "mitt";
+export const EventBus = new mitt();

package/packages/helpers/src/form.js

@@ -0,0 +1,4 @@
+import { Form, Errors } from "@hashtagcms/admin-sdk";
+
+export { Errors };
+export default Form;