npm - jabroni-outfit - Versions diffs - 1.3.0 - Mend

jabroni-outfit 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/LICENSE +21 -0
package/README.md +3 -0
package/biome.json +35 -0
package/dist/jabroni-outfit.es.js +11065 -0
package/dist/jabroni-outfit.umd.js +68 -0
package/index.html +112 -0
package/package.json +37 -0
package/src/example.ts +14 -0
package/src/index.ts +12 -0
package/src/store/default-state.ts +33 -0
package/src/store/persistent-state.ts +36 -0
package/src/store/store.ts +50 -0
package/src/store/types.ts +16 -0
package/src/ui/default-scheme.ts +35 -0
package/src/ui/index.ts +59 -0
package/src/ui/scheme-parser.ts +44 -0
package/src/ui/styles.ts +21 -0
package/src/ui/types.ts +19 -0
package/src/utils/index.ts +17 -0
package/src/vite-env.d.ts +1 -0
package/tsconfig.json +23 -0
package/vite.config.js +30 -0

package/index.html ADDED Viewed

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    body {
+      background: linear-gradient(180deg, black, coral);
+      height: 100vh;
+      overflow: hidden;
+      margin: 0;
+    }
+    .codepen-container {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 60vw;
+      height: auto;
+    }
+    .vt323-regular {
+      font-family: "VT323", monospace;
+      font-weight: 400;
+      font-style: normal;
+    }
+    main * {
+      color: #fedfdf;
+      text-align: center;
+      font-family: "VT323", monospace;
+      font-weight: 400;
+      margin: 1rem
+    }
+    main h1 {
+      font-size: 6rem;
+    }
+    main h2 {
+      font-size: 3rem;
+    }
+    main a {
+      color: darksalmon;
+    }
+  </style>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
+  <!-- <script src="./dist/jabroni-outfit.umd.js"></script> -->
+  <!-- <script type="module" src="./src/example.ts"></script> -->
+  <!-- <script src="https://unpkg.com/jabroni-outfit@1.1.0/dist/jabroni-outfit.umd.js"></script> -->
+</head>
+<body>
+  <div class="codepen-container">
+    <main>
+      <h1>Jabroni Outfit</h1>
+      <h2>out-of-the-box gui and persistent-state library based on vue</h2>
+      <h3><a href="https://github.com/smartacephale/jabroni-outfit">https://github.com/smartacephale/jabroni-outfit</a>
+      </h3>
+      <br>
+    </main>
+    <iframe height="400px" style="width: 100%;" scrolling="no" title="Untitled"
+      src="https://codepen.io/smartacephale/embed/bGPawde?default-tab=&editable=true&theme-id=dark" frameborder="no"
+      loading="lazy" allowtransparency="true" allowfullscreen="true">
+      See the Pen <a href="https://codepen.io/smartacephale/pen/bGPawde">
+        Untitled</a> by smartacephale (<a href="https://codepen.io/smartacephale">@smartacephale</a>)
+      on <a href="https://codepen.io">CodePen</a>.
+    </iframe>
+  </div>
+  <script>
+    const {
+      JabroniOutfitStore,
+      JabroniOutfitUI,
+      defaultStateWithDurationAndPrivacy,
+      defaultSchemeWithPrivateFilter
+    } = window.jabronioutfit;
+    const myState = {
+      gradientColor1: { value: "red", persistent: false, watch: true },
+      gradientColor2: { value: "coral", persistent: false, watch: true },
+      gradientColor3: { value: "orange", persistent: false, watch: true },
+      gradientEnabled: { value: true, persistent: false, watch: true },
+      uiEnabled: { value: true, persistent: true, watch: true }
+    }
+    const store = new JabroniOutfitStore(myState);
+    const ui = 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" }],
+    });
+    function drawGradient() {
+      const { gradientColor1, gradientColor2, gradientColor3, gradientEnabled } = store.stateLocale;
+      if (!gradientEnabled) { document.body.style.background = 'coral'; return; }
+      document.body.style.background = `radial-gradient(${gradientColor1}, ${gradientColor2}, ${gradientColor3})`;
+    }
+    drawGradient();
+    store.subscribe(drawGradient);
+  </script>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,37 @@
+{
+  "name": "jabroni-outfit",
+  "description": "out-of-the-box gui and persistent-state library based on vue",
+  "version": "1.3.0",
+  "license": "MIT",
+  "keywords": ["gui", "tweaks", "ui", "persistent-state", "state-management"],
+  "author": "smartacephale atm.mormon@protonmail.com (https://github.com/smartacephale)",
+  "type": "module",
+  "homepage": "https://github.com/smartacephale/jabroni-outfit#readme",
+  "main": "./dist/jabroni-outfit.umd.js",
+  "module": "./dist/jabroni-outfit.es.js",
+  "repository": "github:smartacephale/jabroni-outfit",
+  "bugs": {
+    "url": "https://github.com/smartacephale/jabroni-outfit/issues",
+    "email": "atm.mormon@protonmail.com"
+  },
+  "browser": "./dist/jabroni-outfit.es.js",
+  "unpkg": "./dist/jabroni-outfit.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/jabroni-outfit.es.js",
+      "require": "./dist/jabroni-outfit.umd.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.3",
+    "vite": "^5.4.0"
+  },
+  "dependencies": {
+    "vue": "^3.4.37"
+  }
+}

package/src/example.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { defaultStateWithDurationAndPrivacy } from "./store/default-state";
+import { JabroniOutfitStore } from "./store/store";
+import { JabroniOutfitUI } from "./ui";
+import { defaultSchemeWithPrivateFilter } from "./ui/default-scheme";
+const store = new JabroniOutfitStore(defaultStateWithDurationAndPrivacy);
+const ui = new JabroniOutfitUI(store, defaultSchemeWithPrivateFilter);
+console.log(store, ui);
+store.subscribe((subj) => {
+  const satisfy = /filter/gi.test(Object.keys(subj)[0]);
+  console.log({ ...subj, satisfy });
+});

package/src/index.ts ADDED Viewed

@@ -0,0 +1,12 @@
+export { JabroniOutfitStore } from "./store/store";
+export {
+  defaultStateWithDurationAndPrivacy,
+  defaultStateInclExclMiscPagination,
+  defaultStateWithDuration
+} from "./store/default-state";
+export { JabroniOutfitUI } from "./ui";
+export {
+  defaultSchemeWithPrivateFilter,
+  DefaultScheme,
+  extendDefaultScheme
+} from "./ui/default-scheme";

package/src/store/default-state.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import type { StateOptions } from "./types";
+export const stateOptions = {
+  EXCLUDE: {
+    filterExclude: { value: false, persistent: true, watch: true },
+    filterExcludeWords: { value: "", persistent: true, watch: "filterExclude" },
+  },
+  INCLUDE: {
+    filterInclude: { value: false, persistent: true, watch: true },
+    filterIncludeWords: { value: "", persistent: true, watch: "filterInclude" },
+  },
+  MISC: {
+    infiniteScrollEnabled: { value: true, persistent: true, watch: true },
+    uiEnabled: { value: true, persistent: true, watch: true }
+  },
+  DURATION_FILTER: {
+    filterDuration: { value: false, persistent: true, watch: true },
+    filterDurationFrom: { value: 0, type: 'number', persistent: true, watch: 'filterDuration' },
+    filterDurationTo: { value: 600, type: 'number', persistent: true, watch: 'filterDuration' }
+  },
+  PRIVACY_FILTER: {
+    filterPrivate: { value: false, persistent: true, watch: true },
+    filterPublic: { value: false, persistent: true, watch: true }
+  },
+  PAGINATION: {
+    pagIndexLast: { value: 1, persistent: false, watch: true },
+    pagIndexCur: { value: 1, persistent: false, watch: true }
+  }
+}
+export const defaultStateInclExclMiscPagination: StateOptions = Object.assign({}, stateOptions.EXCLUDE, stateOptions.INCLUDE, stateOptions.MISC, stateOptions.PAGINATION);
+export const defaultStateWithDuration: StateOptions = Object.assign({}, defaultStateInclExclMiscPagination, stateOptions.DURATION_FILTER);
+export const defaultStateWithDurationAndPrivacy: StateOptions = Object.assign({}, defaultStateWithDuration, stateOptions.PRIVACY_FILTER);

package/src/store/persistent-state.ts ADDED Viewed

@@ -0,0 +1,36 @@
+import { type Reactive, reactive, watch } from 'vue'
+import type { RecordV } from './types';
+export class PersistentState {
+  public state: Reactive<RecordV>;
+  constructor(state_: RecordV, private key = "state_acephale") {
+    this.key = key;
+    this.state = reactive(state_);
+    this.sync();
+    this.watchPersistence();
+  }
+  sync() {
+    this.trySetFromLocalStorage();
+    window.addEventListener('focus', this.trySetFromLocalStorage);
+  }
+  watchPersistence() {
+    watch(this.state, (value) => {
+      this.saveToLocalStorage(this.key, value);
+    });
+  }
+  saveToLocalStorage(key: string, value: RecordV) {
+    localStorage.setItem(key, JSON.stringify(value));
+  }
+  trySetFromLocalStorage = () => {
+    const localStorageValue = localStorage.getItem(this.key);
+    if (localStorageValue !== null) {
+      const parsedState = JSON.parse(localStorageValue) as RecordV;
+      Object.assign(this.state, parsedState);
+    }
+  }
+}

package/src/store/store.ts ADDED Viewed

@@ -0,0 +1,50 @@
+import { type Reactive, reactive, watch } from "vue";
+import type { NotifyApply, RecordV, StateOption, StateOptions } from "./types";
+import { PersistentState } from "./persistent-state";
+import { parseIntegerOr } from "../utils";
+import { defaultStateInclExclMiscPagination } from "./default-state";
+export class JabroniOutfitStore {
+  private callbacks: (NotifyApply)[] = [];
+  public state: Reactive<RecordV> | undefined;
+  public stateLocale: Reactive<RecordV> | undefined;
+  constructor(options: StateOptions = defaultStateInclExclMiscPagination) {
+    this.parseState(options);
+  }
+  subscribe(callback: NotifyApply) {
+    this.callbacks.push(callback);
+  }
+  notify(subject: RecordV) {
+    this.callbacks.forEach(cb => cb(subject));
+  }
+  parseState = (st: StateOptions) => {
+    const persistent = {};
+    const nonpersistent = {};
+    Object.entries(st).forEach(([k, v]: [string, StateOption]) => {
+      ((v.persistent ? persistent : nonpersistent) as RecordV)[k] = v.value;
+    });
+    Object.assign(this, {
+      state: new PersistentState(persistent).state,
+      stateLocale: reactive(nonpersistent)
+    });
+    Object.entries(st).forEach(([k, v]: [string, StateOption]) => {
+      if (!v.watch) return;
+      const state = (v.persistent ? this.state : this.stateLocale) as Reactive<RecordV>;
+      watch(() => state[k], (a, b) => {
+        if (v.type === 'number') state[k] = parseIntegerOr(a as string, b as number);
+        const isWatchBool = typeof v.watch === 'boolean';
+        if (isWatchBool || state[v.watch as string]) {
+          const subject = isWatchBool ? k : v.watch as string;
+          this.notify({ [subject]: state[subject] } as RecordV);
+        }
+      }, { deep: true });
+    });
+  }
+}

package/src/store/types.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import type { Reactive } from "vue";
+export interface StateOption {
+  value: string | number | boolean;
+  persistent: boolean;
+  watch: boolean | string;
+  type: string;
+};
+export type StateOptions = Record<string, StateOption>
+export type NotifyApply = (input: RecordV) => void;
+export type RecordV = Record<string, string | number | boolean>;
+export type StoreState = Reactive<RecordV>;

package/src/ui/default-scheme.ts ADDED Viewed

@@ -0,0 +1,35 @@
+import type { Scheme } from "./types";
+export const DefaultScheme: Scheme = {
+  excludeFilter: [
+    { type: "checkbox", model: "state.filterExclude", label: "exclude" },
+    { type: "text", model: "state.filterExcludeWords", placeholder: "regexp: word, word1|word2, f:full_word..." }
+  ],
+  includeFilter: [
+    { type: "checkbox", model: "state.filterInclude", label: "include" },
+    { type: "text", model: "state.filterIncludeWords", placeholder: "regexp: word, word1|word2, f:full_word..." }
+  ],
+  infiniteScroll: [
+    { type: "checkbox", model: "state.infiniteScrollEnabled", label: "infinite scroll" },
+    { type: "span", innerText: "{{ stateLocale.pagIndexCur }}/{{ stateLocale.pagIndexLast }}", "v-if": "stateLocale.pagIndexLast > 1" }
+  ],
+  durationFilter: [
+    { type: "checkbox", model: "state.filterDuration", label: "duration" },
+    { type: "number", model: "state.filterDurationFrom", step: "10", min: "0", max: "72000", labelBefore: "from" },
+    { type: "number", model: "state.filterDurationTo", step: "10", min: "0", max: "72000", labelBefore: "to" }
+  ],
+}
+export const extendDefaultScheme = (newScheme: Scheme) =>
+  Object.entries(DefaultScheme).reduce((acc, [k, v], i) => {
+    if (i === 2) Object.assign(acc, newScheme);
+    Object.assign(acc, { [k]: v });
+    return acc;
+  }, {});
+export const defaultSchemeWithPrivateFilter = extendDefaultScheme({
+  privateFilter: [
+    { type: "checkbox", model: "state.filterPrivate", label: "private" },
+    { type: "checkbox", model: "state.filterPublic", label: "public" },
+  ]
+});

package/src/ui/index.ts ADDED Viewed

@@ -0,0 +1,59 @@
+import { createApp, reactive } from "vue";
+import { parseDom } from "../utils";
+import { DefaultScheme } from "./default-scheme";
+import { schemeParser } from "./scheme-parser";
+import type { Scheme } from "./types";
+import type { JabroniOutfitStore } from "../store/store";
+export class JabroniOutfitUI {
+  template = (parsed: string) => `
+  <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="flex items-center cursor-pointer py-1 px-2 m-1 rounded"
+      :class="!state.hidden ? 'hover:bg-zinc-900' : ''" @click="state.hidden = !state.hidden">
+      <span class="m-auto flex mono">
+        <span v-if="state.hidden && stateLocale.pagIndexLast > 1" class="px-3 py-2 mr-2 bg-gray-700 text-zinc-300 font-mono rounded ">
+          {{ stateLocale.pagIndexCur }}/{{ stateLocale.pagIndexLast }}
+        </span>
+        <svg v-if="state.hidden" class="h-7 w-7 fill-gray-600 stroke-gray-400" xmlns="http://www.w3.org/2000/svg"
+          fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round"
+            d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z" />
+        </svg>
+        <svg v-if="!state.hidden" class="h-7 w-7 fill-gray-600 stroke-gray-400" xmlns="http://www.w3.org/2000/svg"
+          fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round"
+            d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+        </svg>
+      </span>
+    </div>
+    <template v-if="!state.hidden">${parsed}</template>
+  </div>`;
+  constructor({ state, stateLocale }: JabroniOutfitStore, scheme: Scheme = DefaultScheme) {
+    const root = parseDom('<div id="tapermonkey-app" style="position: relative; z-index: 999999;"></div>');
+    document.body.appendChild(root);
+    const { parsedScheme, callbacks } = schemeParser(scheme);
+    const template = this.template(parsedScheme);
+    const app = createApp({
+      setup: () => {
+        const cbState = reactive(Object.keys(callbacks).reduce(
+          (acc, k) => { acc[k] = false; return acc }, {} as Record<string, boolean>));
+        Object.entries(callbacks).forEach(([k, v]) => {
+          callbacks[k] = async () => {
+            await v();
+            cbState[k] = true;
+          }
+        });
+        return { state, stateLocale, ...callbacks, cbState };
+      },
+      template
+    });
+    app.mount("#tapermonkey-app");
+  }
+}

package/src/ui/scheme-parser.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import { componentStyles } from "./styles";
+import type { Scheme, SchemeRowEl } from "./types";
+export function schemeParser(scheme: Scheme) {
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  const callbacks: Record<string, any> = {};
+  const parseElement = ({ type, model, innerText, label, labelBefore, callback, ...rest }: SchemeRowEl) => {
+    if (type === 'button' && !callback) return "";
+    const isInput = /checkbox|text|number/.test(type);
+    const tag = isInput ? 'input' : type;
+    const id = isInput ? model : (Math.random() * 10000000 | 0).toString(16);
+    const props: Record<string, string | undefined> = {
+      id,
+      "v-model": isInput ? model : "",
+      type: isInput ? type : "",
+      "@click": callback ? `cb${id}` : "",
+      class: componentStyles[type],
+      ...rest
+    }
+    if (callback) props[":style"] = `{ backgroundColor: cbState.cb${id} ? 'blue' : '' }`
+    if (callback) callbacks[`cb${id}`] = callback;
+    const propsToTags = Object.entries(props).filter(([_, v]) => v).map(([k, v]) => `${k}="${v}"`).join(" ");
+    const dom = `<${tag} ${propsToTags}>${innerText || ''}${isInput ? '' : `</${tag}>`}`;
+    let res = dom;
+    if (label || labelBefore) {
+      const labelStr = `<label for="${props.id}" class="${labelBefore ? componentStyles.labelBefore : componentStyles.label}">${label || labelBefore}</label>`;
+      res = (labelBefore ? [labelStr, dom] : [dom, labelStr]).join("\n");
+    }
+    return res;
+  }
+  const parsedScheme = Object.values(scheme).map(row => {
+    const parsedRow = row.map(r => parseElement(r)).join("\n");
+    return `<div class="${componentStyles.container}">${parsedRow}</div>`;
+  }).join("\n");
+  return { parsedScheme, callbacks };
+}

package/src/ui/styles.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { GM_addStyle } from "../utils";
+const style_ = `#tapermonkey-app *,#tapermonkey-app :before,#tapermonkey-app :after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}#tapermonkey-app :before,#tapermonkey-app :after{--tw-content: ""}#tapermonkey-app html,#tapermonkey-app :host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}#tapermonkey-app body{margin:0;line-height:inherit}#tapermonkey-app hr{height:0;color:inherit;border-top-width:1px}#tapermonkey-app abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}#tapermonkey-app h1,#tapermonkey-app h2,#tapermonkey-app h3,#tapermonkey-app h4,#tapermonkey-app h5,#tapermonkey-app h6{font-size:inherit;font-weight:inherit}#tapermonkey-app a{color:inherit;text-decoration:inherit}#tapermonkey-app b,#tapermonkey-app strong{font-weight:bolder}#tapermonkey-app code,#tapermonkey-app kbd,#tapermonkey-app samp,#tapermonkey-app pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}#tapermonkey-app small{font-size:80%}#tapermonkey-app sub,#tapermonkey-app sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}#tapermonkey-app sub{bottom:-.25em}#tapermonkey-app sup{top:-.5em}#tapermonkey-app table{text-indent:0;border-color:inherit;border-collapse:collapse}#tapermonkey-app button,#tapermonkey-app input,#tapermonkey-app optgroup,#tapermonkey-app select,#tapermonkey-app textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}#tapermonkey-app button,#tapermonkey-app select{text-transform:none}#tapermonkey-app button,#tapermonkey-app input:where([type=button]),#tapermonkey-app input:where([type=reset]),#tapermonkey-app input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}#tapermonkey-app :-moz-focusring{outline:auto}#tapermonkey-app :-moz-ui-invalid{box-shadow:none}#tapermonkey-app progress{vertical-align:baseline}#tapermonkey-app ::-webkit-inner-spin-button,#tapermonkey-app ::-webkit-outer-spin-button{height:auto}#tapermonkey-app [type=search]{-webkit-appearance:textfield;outline-offset:-2px}#tapermonkey-app ::-webkit-search-decoration{-webkit-appearance:none}#tapermonkey-app ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}#tapermonkey-app summary{display:list-item}#tapermonkey-app blockquote,#tapermonkey-app dl,#tapermonkey-app dd,#tapermonkey-app h1,#tapermonkey-app h2,#tapermonkey-app h3,#tapermonkey-app h4,#tapermonkey-app h5,#tapermonkey-app h6,#tapermonkey-app hr,#tapermonkey-app figure,#tapermonkey-app p,#tapermonkey-app pre{margin:0}#tapermonkey-app fieldset{margin:0;padding:0}#tapermonkey-app legend{padding:0}#tapermonkey-app ol,#tapermonkey-app ul,#tapermonkey-app menu{list-style:none;margin:0;padding:0}#tapermonkey-app dialog{padding:0}#tapermonkey-app textarea{resize:vertical}#tapermonkey-app input::-moz-placeholder,#tapermonkey-app textarea::-moz-placeholder{opacity:1;color:#9ca3af}#tapermonkey-app input::placeholder,#tapermonkey-app textarea::placeholder{opacity:1;color:#9ca3af}#tapermonkey-app button,#tapermonkey-app [role=button]{cursor:pointer}#tapermonkey-app :disabled{cursor:default}#tapermonkey-app img,#tapermonkey-app svg,#tapermonkey-app video,#tapermonkey-app canvas,#tapermonkey-app audio,#tapermonkey-app iframe,#tapermonkey-app embed,#tapermonkey-app object{display:block;vertical-align:middle}#tapermonkey-app img,#tapermonkey-app video{max-width:100%;height:auto}#tapermonkey-app [hidden]{display:none}#tapermonkey-app *,#tapermonkey-app :before,#tapermonkey-app :after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }#tapermonkey-app ::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }#tapermonkey-app .fixed{position:fixed}#tapermonkey-app .bottom-0{bottom:0}#tapermonkey-app .right-0{right:0}#tapermonkey-app .m-1{margin:.25rem}#tapermonkey-app .m-2{margin:.5rem}#tapermonkey-app .m-auto{margin:auto}#tapermonkey-app .mx-2{margin-left:.5rem;margin-right:.5rem}#tapermonkey-app .ml-2{margin-left:.5rem}#tapermonkey-app .ml-auto{margin-left:auto}#tapermonkey-app .mr-2{margin-right:.5rem}#tapermonkey-app .mr-4{margin-right:1rem}#tapermonkey-app .inline-block{display:inline-block}#tapermonkey-app .flex{display:flex}#tapermonkey-app .hidden{display:none}#tapermonkey-app .size-auto{width:auto;height:auto}#tapermonkey-app .h-7{height:1.75rem}#tapermonkey-app .h-8{height:2rem}#tapermonkey-app .w-24{width:6rem}#tapermonkey-app .w-7{width:1.75rem}#tapermonkey-app .w-full{width:100%}#tapermonkey-app .max-w-full{max-width:100%}#tapermonkey-app .cursor-pointer{cursor:pointer}#tapermonkey-app .items-center{align-items:center}#tapermonkey-app .rounded{border-radius:.25rem}#tapermonkey-app .rounded-sm{border-radius:.125rem}#tapermonkey-app .bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}#tapermonkey-app .bg-zinc-700{--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}#tapermonkey-app .bg-zinc-800{--tw-bg-opacity: 1;background-color:rgb(39 39 42 / var(--tw-bg-opacity))}#tapermonkey-app .bg-zinc-900{--tw-bg-opacity: 1;background-color:rgb(24 24 27 / var(--tw-bg-opacity))}#tapermonkey-app .fill-gray-600{fill:#4b5563}#tapermonkey-app .stroke-gray-400{stroke:#9ca3af}#tapermonkey-app .p-2{padding:.5rem}#tapermonkey-app .px-2{padding-left:.5rem;padding-right:.5rem}#tapermonkey-app .px-3{padding-left:.75rem;padding-right:.75rem}#tapermonkey-app .py-1{padding-top:.25rem;padding-bottom:.25rem}#tapermonkey-app .py-2{padding-top:.5rem;padding-bottom:.5rem}#tapermonkey-app .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}#tapermonkey-app .text-zinc-300{--tw-text-opacity: 1;color:rgb(212 212 216 / var(--tw-text-opacity))}#tapermonkey-app .accent-gray-700{accent-color:#374151}#tapermonkey-app .outline-none{outline:2px solid transparent;outline-offset:2px}#tapermonkey-app .invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.checked\:invert-0:checked{--tw-invert: invert(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:bg-gray-600:hover{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.hover\:bg-zinc-600:hover{--tw-bg-opacity: 1;background-color:rgb(82 82 91 / var(--tw-bg-opacity))}.hover\:bg-zinc-900:hover{--tw-bg-opacity: 1;background-color:rgb(24 24 27 / var(--tw-bg-opacity))}.focus\:outline-gray-600:focus{outline-color:#4b5563}`;
+GM_addStyle(style_);
+GM_addStyle(`
+      #tapermonkey-app .flex.items-center:first-child:hover { background: #3741512b; }
+      #tapermonkey-app input[type="text"]:hover { background: #52525b; }
+      #tapermonkey-app input[type="number"]:hover { background: #4b5563; }
+      #tapermonkey-app button:hover { background: #4b5563; }`);
+export const componentStyles = {
+  container: "flex items-center bg-zinc-900 py-2 px-2 m-1 font-mono rounded",
+  text: "w-full h-8 text-zinc-300 px-3 py-2 mx-2 rounded-sm bg-zinc-700 outline-none focus:outline-gray-600 hover:bg-zinc-600",
+  checkbox: "mx-2 size-auto invert checked:invert-0 accent-gray-700",
+  number: "w-24 h-8 text-zinc-300 rounded px-3 py-2 bg-gray-700 hover:bg-gray-600 outline-none focus:outline-gray-600",
+  button: "mx-2 size-auto text-zinc-300 rounded px-3 py-2 bg-gray-700 hover:bg-gray-600 ml-auto",
+  span: "text-zinc-300 ml-auto mr-4",
+  label: "text-zinc-300 flex font-mono",
+  labelBefore: "text-zinc-300 mx-2 font-mono",
+}

package/src/ui/types.ts ADDED Viewed

@@ -0,0 +1,19 @@
+export interface SchemeRowEl {
+  type: 'checkbox' | 'text' | 'number' | 'span' | 'button';
+  model?: string,
+  label?: string,
+  labelBefore?: string,
+  innerText?: string,
+  max?: string,
+  min?: string,
+  step?: string,
+  "v-if"?: string,
+  placeholder?: string
+  callback?: () => void
+}
+export type SchemeRow = SchemeRowEl[];
+export interface Scheme {
+  [key: string]: SchemeRow
+}

package/src/utils/index.ts ADDED Viewed

@@ -0,0 +1,17 @@
+export function parseIntegerOr(n: string, or: number) {
+  return Number.isInteger(Number.parseInt(n)) ? Number.parseInt(n) : or;
+}
+export function GM_addStyle(css: string) {
+  const head = document.getElementsByTagName('head')[0];
+  if (!head) { return; }
+  const style = document.createElement('style');
+  style.type = 'text/css';
+  style.innerHTML = css.replace(/;/g, ' !important;');
+  head.appendChild(style);
+}
+export function parseDom(html: string): HTMLElement {
+  const parsed = new DOMParser().parseFromString(html, 'text/html').body;
+  return parsed.children.length > 1 ? parsed : parsed.firstElementChild as HTMLElement;
+}

package/src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="vite/client" />

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "main.js"]
+}

package/vite.config.js ADDED Viewed

@@ -0,0 +1,30 @@
+import path from "node:path";
+import { defineConfig } from "vite";
+export default ({ mode }) => {
+  return defineConfig({
+    define: {
+      "process.env": {},
+      __VUE_OPTIONS_API__: false,
+      __VUE_PROD_DEVTOOLS__: false,
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
+    },
+    run: {
+      entry: path.resolve(__dirname, "./src/index.html")
+    },
+    resolve: {
+      alias: {
+        vue: 'vue/dist/vue.esm-bundler.js',
+      }
+    },
+    build: {
+      watch: false,
+      lib: {
+        minify: true,
+        entry: path.resolve(__dirname, "./src/index.ts"),
+        name: "jabronioutfit",
+        fileName: (format) => `jabroni-outfit.${format}.js`,
+      }
+    },
+  });
+};