@hashtagcms/admin-ui-kit 1.0.6

package/dist/admin-ui-kit.min.js.LICENSE.txt

@@ -0,0 +1,175 @@
+/*!
+ * HashtagCMS Admin UI Kit v1.0.7
+ * Copyright (c) 2026 Marghoob Suleman
+ * Link: https://hashtagcms.org
+ * Licensed under MIT
+ */
+
+/*!
+ * secure-ls - v1.2.6
+ * URL - https://github.com/softvar/secure-ls
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2016-2024 Varun Malhotra
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ *
+ * Dependencies used -
+ *  1. crypto-js - ^4.2.0
+ *  2. lz-string - ^1.5.0
+ */
+
+/*! ./Base64 */
+
+/*! ./SecureLS */
+
+/*! ./WordArray */
+
+/*! ./cipher-core */
+
+/*! ./constants */
+
+/*! ./core */
+
+/*! ./enc-base64 */
+
+/*! ./enc-utf8 */
+
+/*! ./evpkdf */
+
+/*! ./hmac */
+
+/*! ./md5 */
+
+/*! ./sha1 */
+
+/*! ./sha256 */
+
+/*! ./utils */
+
+/*! crypto */
+
+/*! crypto-js/aes */
+
+/*! crypto-js/pbkdf2 */
+
+/*! crypto-js/rabbit */
+
+/*! crypto-js/rc4 */
+
+/*! crypto-js/tripledes */
+
+/*! lz-string/libs/lz-string */
+
+/*!**********************!*\
+  !*** ./src/index.js ***!
+  \**********************/
+
+/*!**********************!*\
+  !*** ./src/utils.js ***!
+  \**********************/
+
+/*!***********************!*\
+  !*** ./src/Base64.js ***!
+  \***********************/
+
+/*!************************!*\
+  !*** crypto (ignored) ***!
+  \************************/
+
+/*!*************************!*\
+  !*** ./src/SecureLS.js ***!
+  \*************************/
+
+/*!*************************!*\
+  !*** ./src/enc-utf8.js ***!
+  \*************************/
+
+/*!**************************!*\
+  !*** ./src/WordArray.js ***!
+  \**************************/
+
+/*!**************************!*\
+  !*** ./src/constants.js ***!
+  \**************************/
+
+/*!***************************************!*\
+  !*** ./node_modules/crypto-js/aes.js ***!
+  \***************************************/
+
+/*!***************************************!*\
+  !*** ./node_modules/crypto-js/md5.js ***!
+  \***************************************/
+
+/*!***************************************!*\
+  !*** ./node_modules/crypto-js/rc4.js ***!
+  \***************************************/
+
+/*!****************************************!*\
+  !*** ./node_modules/crypto-js/core.js ***!
+  \****************************************/
+
+/*!****************************************!*\
+  !*** ./node_modules/crypto-js/hmac.js ***!
+  \****************************************/
+
+/*!****************************************!*\
+  !*** ./node_modules/crypto-js/sha1.js ***!
+  \****************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/crypto-js/evpkdf.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/crypto-js/pbkdf2.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/crypto-js/rabbit.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/crypto-js/sha256.js ***!
+  \******************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/crypto-js/tripledes.js ***!
+  \*********************************************/
+
+/*!**********************************************!*\
+  !*** ./node_modules/crypto-js/enc-base64.js ***!
+  \**********************************************/
+
+/*!***********************************************!*\
+  !*** ./node_modules/crypto-js/cipher-core.js ***!
+  \***********************************************/
+
+/*!**************************************************!*\
+  !*** ./node_modules/lz-string/libs/lz-string.js ***!
+  \**************************************************/
+
+/**!
+ * Sortable 1.15.6
+ * @author	RubaXa   <trash@rubaxa.org>
+ * @author	owenm    <owen23355@gmail.com>
+ * @license MIT
+ */

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@hashtagcms/admin-ui-kit",
+  "version": "1.0.6",
+  "description": "The official Admin UI Kit for HashtagCMS, bundled with essential UI components, utility helpers, and design system styles.",
+  "author": "HashtagCMS",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/admin-ui-kit.min.js",
+  "files": [
+    "dist",
+    "packages"
+  ],
+  "homepage": "https://hashtagcms.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hashtagcms/admin-ui-kit.git"
+  },
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "test": "vitest run",
+    "dev": "webpack --mode development --progress --color",    
+    "build": "webpack --mode production --progress --color",
+    "watch": "webpack --mode development --watch --progress --color",
+    "playground": "vite --config vite.playground.config.js"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/test-utils": "^2.4.6",
+    "babel-loader": "^9.1.0",
+    "css-loader": "^6.8.0",
+    "jsdom": "^27.0.1",
+    "mini-css-extract-plugin": "^2.7.0",
+    "sass": "^1.69.0",
+    "sass-loader": "^13.3.0",
+    "vitest": "^3.2.4",
+    "vue-loader": "^17.3.0",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.0"
+  },
+  "dependencies": {
+    "@hashtagcms/admin-sdk": "^1.0.2",
+    "axios": "^1.6.0",
+    "mitt": "^3.0.1",
+    "motion": "^10.16.4",
+    "secure-ls": "^2.0.0"
+  }
+}

package/packages/components/README.md

@@ -0,0 +1,92 @@
+# @hashtagcms/components
+
+A collection of robust, reusable Vue.js components designed for building HashtagCMS admin interfaces. These components are optimized for server-side rendering integration (using `data-` attributes) and modern SPA capabilities.
+
+## 📦 Installation
+
+```bash
+npm install @hashtagcms/components
+```
+
+## 🚀 Usage
+
+Import components directly in your Vue application:
+
+```javascript
+import { ActionBar, TabularView } from "@hashtagcms/components";
+
+// Or import individual files
+import ActionBar from "@hashtagcms/components/action-bar";
+```
+
+## 🛠 Component Reference
+
+### `ActionBar`
+
+A versatile toolbar that sits at the top of module pages. It handles adding new items, searching, layout switching (grid/table), and language toggling.
+
+**Props:**
+
+- `data-controller-name`: The current controller (e.g., `'site'`).
+- `data-controller-title`: Page title.
+- `data-action-fields`: Array of enabled actions (e.g., `['edit', 'delete']`).
+- `data-fields`: Fields available for search.
+- `data-show-search`: Boolean to toggle search button.
+
+### `TabularView`
+
+The powerhouse grid component for displaying lists of data.
+
+**Features:**
+
+- **Dynamic Columns**: Renders columns based on `data-headers`.
+- **Actions**: Automatically generates Edit/Delete/Approve buttons based on permissions.
+- **Smart Rendering**: Handles images, videos, and nested object values (e.g., `lang.name`) automatically.
+- **Inline Editing**: Supports inline toggle switches for boolean states (like `publish_status`).
+
+**Props:**
+
+- `data-list`: JSON string of the data rows.
+- `data-headers`: Configuration for columns.
+- `data-user-rights`: Array of permissions (e.g., `['edit', 'delete']`).
+- `data-action-as-ajax`: Actions that should trigger an API call instead of navigation.
+
+### `SearchBar`
+
+A dynamic search form that allows users to query data with specific logic.
+
+**Features:**
+
+- **Field Selection**: Dropdown to choose which field to search.
+- **Operators**: Supports `=`, `!=`, `>`, `<`, `like%`, etc.
+- **Type Detection**: Automatically switches input type to `date` for date fields.
+
+### `Pagination`
+
+A Bootstrap-styled pagination component that synchronizes with Laravel's pagination response.
+
+**Props:**
+
+- `data-paginator`: The full pagination object from Laravel.
+- `data-total`: Total number of records.
+- `data-show-download`: Helper to show/hide export options.
+
+### `ModulePermission`
+
+A specialized component for managing role-based access control (RBAC) matrices.
+
+### `InfoPopup`
+
+A modal wrapper used by `TabularView` and others to display quick information or read-only details without leaving the page.
+
+### Library Components
+
+We also export smaller utility components found in `src/library`:
+
+- `ToastBox`: Notification toaster.
+- `Loader`: Full-screen or partial loading spinner.
+- `ModalBox`: Generic dialog wrapper.
+
+## 🤝 Integration Note
+
+Most components are designed to accept data via `props`. When used in a mixed Blade/Vue environment, standard practice is to pass JSON-encoded strings to the `data-` attributes, which the components automatically parse.

package/packages/components/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@hashtagcms/components",
+  "version": "1.0.0",
+  "description": "Vue.js components 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/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./*": "./src/*.vue",
+    "./library/*": "./src/library/*.vue"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.13"
+  },
+  "dependencies": {
+    "@hashtagcms/helpers": "*",
+    "@hashtagcms/styles": "*",
+    "sortablejs": "^1.15.2",
+    "pluralize": "^8.0.0",
+    "axios": "^1.6.0"
+  }
+}

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

@@ -0,0 +1,237 @@
+<template>
+  <div class="container-fluid border-bottom mb-2 pb-2">
+    <div class="row">
+      <div class="col">
+        <div
+          class="btn-toolbar justify-content-between"
+          role="toolbar"
+          aria-label="Toolbar with button groups"
+        >
+          <div class="btn-group" role="group">
+            <h4 class="moduleTitle">{{ getTitle(controllerTitle) }}</h4>
+          </div>
+          <div class="input-group actionToolbar">
+            <language-button
+              v-if="hasLangMethod"
+              :data-languages="dataLanguages"
+              :data-selected-language="dataSelectedLanguage"
+              >English</language-button
+            >
+            <button
+              v-if="showAdd && showAddButtonBasedOnAction"
+              title="Add New"
+              @click="addNew"
+              type="button"
+              class="btn btn-outline-secondary"
+              aria-label="Add New"
+            >
+              <i class="fa fa-plus" aria-hidden="true"></i> Add New
+            </button>
+            <a
+              v-for="actionButton in moreActionButtons"
+              class="btn btn-outline-secondary"
+              :href="getAction(actionButton.action)"
+              :title="actionButton.label"
+            >
+              <i
+                v-if="actionButton.icon_css"
+                :class="actionButton.icon_css"
+                aria-hidden="true"
+              ></i>
+              <span v-if="getButtonType(actionButton) == 'button'">{{
+                actionButton.label
+              }}</span>
+            </a>
+            <button
+              v-if="showSearchButton"
+              title="Search"
+              @click="showHideSearch"
+              type="button"
+              :class="isActive"
+              aria-label="Search"
+            >
+              <i class="fa fa-search" aria-hidden="true"></i>
+            </button>
+            <button
+              v-if="fields.length > 0"
+              title="Change Layout"
+              @click="changeLayout()"
+              type="button"
+              class="btn btn-outline-secondary"
+              aria-label="Layout"
+            >
+              <i :class="layoutIcon" aria-hidden="true"></i>
+            </button>
+            <a v-if="showBack" class="btn btn-outline-secondary" :href="backURL"
+              >Back</a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col" v-if="showSearchPanel">
+        <search-bar
+          :class="searchAnim"
+          :data-controller-name="controllerName"
+          :data-selected-params="selectedParams"
+          :data-fields="fields"
+          :data-action-fields="actionFields"
+        ></search-bar>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import AdminConfig from "@hashtagcms/helpers/admin-config";
+import CmsModuleDropdown from "./cms-module-dropdown.vue";
+import LanguageButton from "./language-button.vue";
+import SearchBar from "./search-bar.vue";
+import { Toast } from "@hashtagcms/helpers/common";
+import Humanize from "@hashtagcms/helpers/humanize";
+
+export default {
+  components: {
+    "cms-module-dropdown": CmsModuleDropdown,
+    "language-button": LanguageButton,
+    "search-bar": SearchBar,
+  },
+  mounted() {
+    this.shouldShowSearchPanel();
+    //console.log(this.dataShowSearch);
+  },
+  props: [
+    "dataSelectedParams",
+    "dataControllerName",
+    "dataControllerTitle",
+    "dataFields",
+    "dataActionFields",
+    "dataLanguages",
+    "dataSelectedLanguage",
+    "dataMoreActions",
+    "dataShowAdd",
+    "dataHasLangMethod",
+    "dataCmsModules",
+    "dataShowSearch",
+    "dataShowBack",
+    "dataLayoutType",
+  ],
+  computed: {
+    backURL() {
+      return AdminConfig.admin_path(this.controllerName);
+    },
+    layoutIcon() {
+      return this.layoutType === "grid" ? "fa fa-th-list" : "fa fa-table";
+    },
+    showAddButtonBasedOnAction() {
+      return this.actionFields.indexOf("edit") !== -1;
+    },
+  },
+  data() {
+    return {
+      canAdd: true,
+      showSearchButton: !(
+        typeof this.dataShowSearch === "undefined" ||
+        this.dataShowSearch === "" ||
+        this.dataShowSearch === "false"
+      ),
+      showSearchPanel: false,
+      isActive: "btn btn-outline-secondary",
+      searchAnim: "",
+      moreActionButtons:
+        typeof this.dataMoreActions === "undefined" ||
+        this.dataMoreActions === ""
+          ? []
+          : JSON.parse(this.dataMoreActions),
+      showAdd:
+        typeof this.dataShowAdd === "undefined" || this.dataShowAdd === "true",
+      hasLangMethod: !(
+        typeof this.dataHasLangMethod === "undefined" ||
+        this.dataHasLangMethod === "false"
+      ),
+      cmsModules:
+        typeof this.dataCmsModules === "undefined" || this.dataCmsModules === ""
+          ? []
+          : JSON.parse(this.dataCmsModules),
+      selectedParams:
+        typeof this.dataSelectedParams === "undefined"
+          ? ""
+          : this.dataSelectedParams,
+      controllerName:
+        typeof this.dataControllerName === "undefined"
+          ? ""
+          : this.dataControllerName,
+      controllerTitle:
+        typeof this.dataControllerTitle === "undefined"
+          ? ""
+          : this.dataControllerTitle,
+      fields:
+        typeof this.dataFields === "undefined" || this.dataFields === ""
+          ? []
+          : this.dataFields,
+      actionFields:
+        typeof this.dataActionFields === "undefined" ||
+        this.dataActionFields === ""
+          ? []
+          : this.dataActionFields,
+      showBack: this.dataShowBack === "true",
+      layoutType:
+        typeof this.dataLayoutType === "undefined" || this.dataLayoutType === ""
+          ? "table"
+          : this.dataLayoutType,
+    };
+  },
+  methods: {
+    changeLayout() {
+      Toast.show(this, "Please wait. Changing listing style for you...", 5000);
+      this.layoutType = this.layoutType === "table" ? "grid" : "table";
+      if ("URLSearchParams" in window) {
+        let searchParams = new URLSearchParams(window.location.search);
+        searchParams.set("layout", this.layoutType);
+        window.location.search = searchParams.toString();
+      }
+    },
+    getAction(val) {
+      if (val.indexOf("http") === 0) {
+        return val;
+      }
+      return AdminConfig.admin_path(val);
+    },
+    maintainActiveSearch(animate = true) {
+      this.isActive =
+        this.showSearchPanel === true
+          ? "btn btn-success"
+          : "btn btn-outline-secondary";
+      this.searchAnim =
+        this.showSearchPanel === true && animate == true
+          ? "animated flipInX"
+          : "";
+    },
+    showHideSearch() {
+      this.showSearchPanel = !this.showSearchPanel;
+      this.maintainActiveSearch();
+    },
+    shouldShowSearchPanel() {
+      if (this.selectedParams !== "") {
+        if (JSON.parse(this.selectedParams).q) {
+          this.showSearchPanel = true;
+        }
+        this.maintainActiveSearch(false);
+      }
+    },
+    addNew() {
+      if (this.controllerName !== "") {
+        var controller_url = AdminConfig.admin_path(this.controllerName);
+        window.location.href = controller_url + "/create";
+      }
+    },
+    getButtonType(row) {
+      return !row.as || row.as === "button" ? "button" : row.as;
+    },
+    getTitle: function (text) {
+      return Humanize(text);
+    },
+  },
+};
+</script>

package/packages/components/src/category-platform.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <modal-box ref="platformbox" @onClose="hideSpinner">
+      <template #title> Select Platform </template>
+      <template #content>
+        <div class="row">
+          <div class="col-auto">
+            <select
+              v-model="currentPlatform"
+              class="form-select select-medium"
+              @change="editNow()"
+            >
+              <option value="">Select a platform</option>
+              <option v-for="platform in platforms" :value="platform.id">
+                {{ platform.name }}
+              </option>
+            </select>
+          </div>
+          <div class="col-auto">
+            <button
+              class="btn btn-success btn-from-submit"
+              type="button"
+              @click="editNow()"
+            >
+              Edit Now
+            </button>
+          </div>
+        </div>
+      </template>
+    </modal-box>
+  </div>
+</template>
+
+<script>
+import AdminConfig from "@hashtagcms/helpers/admin-config";
+import { EventBus } from "@hashtagcms/helpers/event-bus";
+import { Toast } from "@hashtagcms/helpers/common";
+import ModalBox from "./library/modal-box.vue";
+
+export default {
+  components: {
+    "modal-box": ModalBox,
+  },
+  mounted() {
+    this.verifyAction();
+  },
+  props: ["dataPlatforms"],
+  data() {
+    return {
+      modelCss: "modal",
+      showHide: true,
+      platforms:
+        this.dataPlatforms && this.dataPlatforms != "null"
+          ? JSON.parse(this.dataPlatforms)
+          : [],
+      currentPlatform: "",
+      currentTarget: null,
+    };
+  },
+  methods: {
+    verifyAction: function () {
+      let $this = this;
+      EventBus.on("list-view-pre-edit", function (current) {
+        $this.currentTarget = current;
+        $this.open();
+      });
+    },
+    editNow() {
+      let platform_id = this.currentPlatform;
+      if (platform_id === "") {
+        Toast.show(this, "Please select a platform");
+        return false;
+      }
+      let target = this.currentTarget;
+      let id = target.getAttribute("data-rowid");
+      window.location = AdminConfig.admin_path(
+        `category/edit/${id}/${platform_id}`,
+      );
+    },
+    open() {
+      // console.log(this.platforms);
+      if (this.platforms.length > 1) {
+        this.$refs.platformbox.open();
+      } else {
+        this.currentPlatform = this.platforms[0].id;
+        this.editNow();
+      }
+    },
+    close() {
+      this.$refs.platformbox.close();
+    },
+    hideSpinner() {
+      EventBus.emit("list-view-hide-spinner", this);
+    },
+  },
+};
+</script>