refactor: update my servers include file to handle CSS values

This commit updates the `myservers1.php` file in the `dynamix.my.servers` plugin. It adds functionality to handle CSS values in addition to the existing file handling logic. The code now checks for CSS values in the local manifest and includes them in the rendered HTML if found.
test: add notification component directory
2026-01-02 06:30:02 -06:00 · 2024-09-30 11:56:37 -07:00 · 2024-09-27 15:39:23 -04:00 · 2024-09-27 15:35:54 -04:00
7 changed files with 255 additions and 6 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -52,6 +52,9 @@ typings/
 # Visual Studio Code workspace
 .vscode/sftp.json

+# Jetbrains
+.idea
+
 # OSX
 .DS_Store

--- a/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/myservers1.php
+++ b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/myservers1.php
@@ -46,17 +46,25 @@ $localManifest = json_decode(file_get_contents($localManifestFile), true);

 $searchText = 'unraid-components.client.mjs';
 $fileValue = null;
+$cssValues = [];

 foreach ($localManifest as $key => $value) {
    if (strpos($key, $searchText) !== false && isset($value["file"])) {
        $fileValue = $value["file"];
        break;
    }
+
+    if (strpos($key, $searchText) !== false && isset($value["css"])) {
+        $cssValues = $value["css"];
+        break;
+    }
 }

 if ($fileValue !== null) {
    $prefixedPath = '/plugins/dynamix.my.servers/unraid-components/';
    echo '<script src="' . $prefixedPath . $fileValue . '"></script>';
+
+    echo '<link rel="stylesheet" href="' . $prefixedPath . '_nuxt/unraid-components-DNhg-Rqp.css">' . PHP_EOL;
 } else {
    echo '<script>console.error("%cNo matching key containing \'' . $searchText . '\' found.", "font-weight: bold; color: white; background-color: red");</script>';
 }
--- a/web/components/Notifications/Sidebar.vue
+++ b/web/components/Notifications/Sidebar.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const visible = ref<boolean>(false);
+
+const showSidebar = () => {
+  console.log('showSidebar');
+  visible.value = true;
+};
+</script>
+
+<template>
+  <div class="card flex justify-center">
+    <Drawer v-model:visible="visible" header="Drawers" position="right" class="!w-full md:!w-80 lg:!w-[30rem]">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    </Drawer>
+    <Button label="Open" class="p-button-rounded p-button-outlined" @click="showSidebar" />
+  </div>
+</template>
--- a/web/components/UserProfile.ce.vue
+++ b/web/components/UserProfile.ce.vue
@@ -127,6 +127,8 @@ onBeforeMount(() => {

      <div class="block w-2px h-24px bg-gamma" />

+      <NotificationsSidebar />
+
      <OnClickOutside class="flex items-center justify-end h-full" :options="{ ignore: [clickOutsideIgnoreTarget] }" @trigger="outsideDropdown">
        <UpcDropdownTrigger ref="clickOutsideIgnoreTarget" :t="t" />
        <UpcDropdown ref="clickOutsideTarget" :t="t" />
--- a/web/nuxt.config.ts
+++ b/web/nuxt.config.ts
@@ -1,5 +1,6 @@
 import { readFileSync } from 'fs';
 import { parse } from 'dotenv';
+import Aura from '@primevue/themes/aura';
 const envConfig = parse(readFileSync('.env'));
 console.log('\n');
 console.log('==============================');
@@ -50,7 +51,8 @@ export default defineNuxtConfig({
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss',
    'nuxt-custom-elements',
-    "@nuxt/eslint"
+    "@nuxt/eslint",
+    '@primevue/nuxt-module'
  ],
  components: [
    { path: '~/components/Brand', prefix: 'Brand' },
@@ -58,6 +60,7 @@ export default defineNuxtConfig({
    { path: '~/components/Ui', prefix: 'Ui' },
    { path: '~/components/UserProfile', prefix: 'Upc' },
    { path: '~/components/UpdateOs', prefix: 'UpdateOs' },
+    { path: '~/components/Notifications', prefix: 'Notifications' },
    '~/components',
  ],
  // typescript: {
@@ -76,6 +79,14 @@ export default defineNuxtConfig({
      },
    },
  },
+  primevue: {
+    /* Configuration */
+    options: {
+      theme: {
+        preset: Aura
+      }
+    }
+  },
  customElements: {
    entries: [
      {
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -6,12 +6,14 @@
  "packages": {
    "": {
      "name": "connect-components",
+      "version": "3.10.0",
      "hasInstallScript": true,
      "dependencies": {
        "@apollo/client": "^3.10.4",
        "@headlessui/vue": "^1.7.22",
        "@heroicons/vue": "^2.1.3",
        "@pinia/nuxt": "^0.5.1",
+        "@primevue/themes": "^4.0.7",
        "@vue/apollo-composable": "^4.0.2",
        "@vueuse/components": "^10.9.0",
        "@vueuse/integrations": "^10.9.0",
@@ -24,6 +26,7 @@
        "hex-to-rgba": "^2.0.1",
        "marked": "^12.0.2",
        "marked-base-url": "^1.1.3",
+        "primevue": "^4.0.7",
        "semver": "^7.6.2",
        "vue-i18n": "^9.13.1",
        "wretch": "^2.8.1"
@@ -35,6 +38,7 @@
        "@nuxt/devtools": "^1.3.1",
        "@nuxt/eslint": "^0.3.12",
        "@nuxtjs/tailwindcss": "^6.12.0",
+        "@primevue/nuxt-module": "^4.0.7",
        "@tailwindcss/typography": "^0.5.13",
        "@types/crypto-js": "^4.2.2",
        "@types/node": "^18",
@@ -46,8 +50,7 @@
        "nuxt": "^3.11.2",
        "nuxt-custom-elements": "^2.0.0-beta.18",
        "terser": "^5.31.0"
-      },
-      "version": "3.10.0"
+      }
    },
    "node_modules/@aashutoshrathi/word-wrap": {
      "version": "1.2.6",
@@ -5147,6 +5150,111 @@
      "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
      "dev": true
    },
+    "node_modules/@primeuix/styled": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.5.tgz",
+      "integrity": "sha512-pVoGn/uPkVm/DyF3TR3EmH/pL/dP4nR42FcYbVduFq9VfO3KVeOEqvcCULHXos66RZO9MCbCFUoLy6ctf9GUGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.0.5"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/utils": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.0.5.tgz",
+      "integrity": "sha512-ntUiUgtRtkF8KuaxHffzhYxQxoXk6LAPHm7CVlFjdqS8Rx8xRkLkZVyo84E+pO2hcNFkOGVP/GxHhQ2s94O8zA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/auto-import-resolver": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@primevue/auto-import-resolver/-/auto-import-resolver-4.0.7.tgz",
+      "integrity": "sha512-wGhVhWIWH+edWqsG7ttggg7PSLv8mkCprCQ1mlkf7RFwxTK1VT6CCdZIqmH+nyEPCn3AOpwN7zuqtXpy9axqKg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@primevue/metadata": "4.0.7"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.7.tgz",
+      "integrity": "sha512-SvWiNBEeR6hm4wjnze+rITUjHMFLwIzpRFlq+GqmJyZmjJy4h8UUksi0EoyqAWCAwKgmwlxY6XNqGJmMVyOguQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.0.5",
+        "@primeuix/utils": "^0.0.5"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.7.tgz",
+      "integrity": "sha512-tj4dfRdV5iN6O0mbkpjhMsGlT3wZTqOPL779ndY5gKuCwN5zcFmKmABWVQmr/ClRivnMkw6Yr1x6gRTV/N0ydg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.0.5",
+        "@primevue/core": "4.0.7"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/metadata": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@primevue/metadata/-/metadata-4.0.7.tgz",
+      "integrity": "sha512-xhmmbT7euA29Td6v+iIE90z0dNI/a/8lJGzhdFhJgC0VznF3KZOz0n9SIBUdA9bQjTxpjEeCDL28ARpWtwTMrA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/nuxt-module": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@primevue/nuxt-module/-/nuxt-module-4.0.7.tgz",
+      "integrity": "sha512-RDV9irkfYHWD3Cv5fTrDFBHzN128LW4HgxhrhgsnUsd/hYPJOk7qNjsaMZHlOg33TD1pd+FGyYdrIkXNTNnyRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.7.3",
+        "@primeuix/styled": "^0.0.5",
+        "@primeuix/utils": "^0.0.5",
+        "@primevue/auto-import-resolver": "4.0.7",
+        "@primevue/metadata": "4.0.7",
+        "pathe": "^1.1.2",
+        "primevue": "4.0.7",
+        "unplugin-vue-components": "0.27.0"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/themes": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.7.tgz",
+      "integrity": "sha512-ZbDUrpBmtuqdeegNwUaJTubaLDBBJWOc4Z6UoQM3DG2c7EAE19wQbuh+cG9zqA7sT/Xsp+ACC/Z9e4FnfqB55g==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.0.5"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
    "node_modules/@repeaterjs/repeater": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/@repeaterjs/repeater/-/repeater-3.0.4.tgz",
@@ -15828,6 +15936,21 @@
        "renderkid": "^3.0.0"
      }
    },
+    "node_modules/primevue": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.7.tgz",
+      "integrity": "sha512-88qazHqldkqsCxvhjnjO65XMBfJyHQoFW3BQvrJYO6RqPheHB4f7cY61eqtBpJAjnM5x+YKTZiWx/gBuUzqT7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.0.5",
+        "@primeuix/utils": "^0.0.5",
+        "@primevue/core": "4.0.7",
+        "@primevue/icons": "4.0.7"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
    "node_modules/proc-log": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.2.0.tgz",
@@ -16355,10 +16478,11 @@
      "dev": true
    },
    "node_modules/resolve": {
-      "version": "1.22.4",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
-      "integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==",
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "is-core-module": "^2.13.0",
        "path-parse": "^1.0.7",
@@ -18380,6 +18504,87 @@
        "node": ">=14.0.0"
      }
    },
+    "node_modules/unplugin-vue-components": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.27.0.tgz",
+      "integrity": "sha512-77eTEy23sQ0UpzGWnZ9I2mY3cnmXwklz4ITcn3JfxjCoX643ghImkiZ4nFm58sxbdVcc4Fo/o4LIoFnlqEqsSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/utils": "^0.7.7",
+        "@rollup/pluginutils": "^5.1.0",
+        "chokidar": "^3.6.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "local-pkg": "^0.5.0",
+        "magic-string": "^0.30.10",
+        "minimatch": "^9.0.4",
+        "resolve": "^1.22.8",
+        "unplugin": "^1.10.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@babel/parser": "^7.15.8",
+        "@nuxt/kit": "^3.2.2",
+        "vue": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@babel/parser": {
+          "optional": true
+        },
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/local-pkg": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
+      "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.4.2",
+        "pkg-types": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
    "node_modules/unplugin-vue-router": {
      "version": "0.7.0",
      "resolved": "https://registry.npmjs.org/unplugin-vue-router/-/unplugin-vue-router-0.7.0.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -29,6 +29,7 @@
    "@nuxt/devtools": "^1.3.1",
    "@nuxt/eslint": "^0.3.12",
    "@nuxtjs/tailwindcss": "^6.12.0",
+    "@primevue/nuxt-module": "^4.0.7",
    "@tailwindcss/typography": "^0.5.13",
    "@types/crypto-js": "^4.2.2",
    "@types/node": "^18",
@@ -46,6 +47,7 @@
    "@headlessui/vue": "^1.7.22",
    "@heroicons/vue": "^2.1.3",
    "@pinia/nuxt": "^0.5.1",
+    "@primevue/themes": "^4.0.7",
    "@vue/apollo-composable": "^4.0.2",
    "@vueuse/components": "^10.9.0",
    "@vueuse/integrations": "^10.9.0",
@@ -58,6 +60,7 @@
    "hex-to-rgba": "^2.0.1",
    "marked": "^12.0.2",
    "marked-base-url": "^1.1.3",
+    "primevue": "^4.0.7",
    "semver": "^7.6.2",
    "vue-i18n": "^9.13.1",
    "wretch": "^2.8.1"
Author	SHA1	Message	Date
Zack Spear	fbbda5926b	refactor: update my servers include file to handle CSS values This commit updates the `myservers1.php` file in the `dynamix.my.servers` plugin. It adds functionality to handle CSS values in addition to the existing file handling logic. The code now checks for CSS values in the local manifest and includes them in the rendered HTML if found.	2024-09-30 11:56:37 -07:00
mdatelle	8a0a053a80	test: add notification component directory	2024-09-27 15:39:23 -04:00
mdatelle	026d643b49	test: add poc drawer component	2024-09-27 15:35:54 -04:00