jabroni-outfit 1.4.3 → 1.4.5

package/package.json

@@ -1,17 +1,9 @@
 {
   "name": "jabroni-outfit",
   "description": "out-of-the-box gui and persistent-state library based on vue",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "license": "MIT",
-  "keywords": [
-    "gui",
-    "tweaks",
-    "ui",
-    "persistent-state",
-    "state-management",
-    "typescript",
-    "vue"
-  ],
+  "keywords": ["gui", "tweaks", "ui", "persistent-state", "state-management", "typescript", "vue"],
   "author": "smartacephale atm.mormon@protonmail.com (https://github.com/smartacephale)",
   "type": "module",
   "homepage": "https://github.com/smartacephale/jabroni-outfit#readme",
@@ -32,10 +24,7 @@
       "types": "./dist/index.d.ts"
     }
   },
-  "files": [
-    "src/**/*",
-    "dist/**/*"
-  ],
+  "files": ["src/**/*", "dist/**/*"],
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",

package/src/test/example.ts

@@ -8,9 +8,7 @@ const example1 = () => {
   (defaultSchemeWithPrivateFilter as any).privateFilter.push(
     { type: "button", innerText: "check access 🔓", callback: () => { } });
   const store = new JabroniOutfitStore(defaultStateWithDurationAndPrivacy);
-  const ui = new JabroniOutfitUI(store, defaultSchemeWithPrivateFilter);
-
-  console.log(store, ui);
+  new JabroniOutfitUI(store, defaultSchemeWithPrivateFilter);
 
   store.subscribe((subj) => {
     const satisfy = /filter/gi.test(Object.keys(subj)[0]);
@@ -29,12 +27,12 @@ const example2 = () => {
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   const store = new JabroniOutfitStore(myState as any);
 
-  const ui = new JabroniOutfitUI(store, {
+  new JabroniOutfitUI(store, {
     gradientColor1: [{ type: "text", model: "stateLocale.gradientColor1", placeholder: "color", labelBefore: "color1" }],
     gradientColor2: [{ type: "text", model: "stateLocale.gradientColor2", placeholder: "color", labelBefore: "color2" }],
     gradientColor3: [{ type: "text", model: "stateLocale.gradientColor3", placeholder: "color", labelBefore: "color3" }],
     gradientEnabled: [{ type: "checkbox", model: "stateLocale.gradientEnabled", labelBefore: "gradient enabled" }],
-  });
+  }, '#lol', { fixed: false });
 
   function drawGradient() {
     // biome-ignore lint/suspicious/noExplicitAny: <explanation>
@@ -47,5 +45,5 @@ const example2 = () => {
   store.subscribe(drawGradient);
 }
 
-// example1();
+example1();
 example2();

package/src/ui/index.ts

@@ -1,15 +1,29 @@
 import { createApp } from "vue";
 import { DefaultScheme } from "./default-scheme";
-import type { Scheme } from "./types";
+import type { Scheme, UIPosition } from "./types";
 import type { JabroniOutfitStore } from "../store/store";
 import App from "./vue-templates/App.vue"
 import { parseDom } from "billy-herrington-utils";
 
 export class JabroniOutfitUI {
-  constructor({ state, stateLocale }: JabroniOutfitStore, scheme: Scheme = DefaultScheme) {
-    const root = parseDom('<div id="tapermonkey-app" class="taper-class" style="position: relative; z-index: 999999;"></div>');
-    document.body.appendChild(root);
-    const app = createApp(App, { state, stateLocale, scheme });
-    app.mount("#tapermonkey-app");
+  private getRoot(rootSelector: string | undefined) {
+    let root: string | undefined = rootSelector;
+    if (!root) {
+      const rootEl = parseDom('<div id="tapermonkey-app" style="position: relative; z-index: 999999;"></div>');
+      document.body.appendChild(rootEl);
+      root = "#tapermonkey-app";
+    }
+    document.querySelector(root)?.classList.add('taper-class');
+    return root;
+  }
+
+  constructor(
+    { state, stateLocale }: JabroniOutfitStore,
+    scheme: Scheme = DefaultScheme,
+    rootSelector?: string,
+    position: UIPosition = { fixed: true, right: true, bottom: true }
+  ) {
+    const app = createApp(App, { state, stateLocale, scheme, position });
+    app.mount(this.getRoot(rootSelector));
   }
 }

package/src/ui/types.ts

@@ -16,4 +16,12 @@ export type SchemeRow = SchemeRowEl[];
 
 export interface Scheme {
   [key: string]: SchemeRow
-}
+}
+
+export interface UIPosition {
+  fixed: boolean,
+  left?: boolean,
+  right?: boolean,
+  top?: boolean,
+  bottom?: boolean
+}

package/src/ui/vue-templates/App.vue

@@ -2,20 +2,32 @@
 import Config from './icons/Config.vue';
 import Close from './icons/Close.vue';
 import Gen from './Gen.vue';
-import type { Scheme } from '../types';
+import type { Scheme, UIPosition } from '../types';
 import type { Reactive } from 'vue';
 import type { RecordV } from '../../store/types';
 
-const { state, stateLocale, scheme } = defineProps<{
+const { state, stateLocale, scheme, position } = defineProps<{
   state: Reactive<RecordV>,
   stateLocale: Reactive<RecordV>,
-  scheme?: Scheme
+  scheme?: Scheme,
+  position: UIPosition
 }>();
 
+const optClasses = {
+  fixed: 'fixed',
+  right: 'right-0',
+  left: 'left-0',
+  top: 'top-0',
+  bottom: 'bottom-0'
+}
+
+const pos = Object.entries(position).filter(([_, v]) => v)
+  .map(([k, _]) => optClasses[k]).join(' ');
+
 </script>
 <template>
-  <div class="fixed bottom-0 right-0 z-9999 rounded bg-zinc-800 max-w-full p-2 m-2"
-    :class="state.hidden ? 'hover:bg-gray-600' : ''" v-if="state.uiEnabled">
+  <div class="z-9999 rounded bg-zinc-800 max-w-full p-2 m-2"
+    :class="`${state.hidden ? 'hover:bg-gray-600' : ''} ${pos}`" v-if="state.uiEnabled">
 
     <div class="flex items-center cursor-pointer py-1 px-2 m-1 rounded"
       :class="!state.hidden ? 'hover:bg-zinc-900' : ''" @click="state.hidden = !state.hidden">

package/src/ui/vue-templates/RowElement.vue

@@ -37,7 +37,6 @@ const updateValue = ({ target: { checked, value } }) => {
   if (!model?.startsWith("state")) return;
   const [stateName, stateProp] = model.split('.');
   const val = type === 'checkbox' ? checked : value;
-  console.log('change', val);
   props[stateName][stateProp] = val;
 };