jabroni-outfit 1.6.5 → 2.0.8

package/src/test/umd-example.js

@@ -1,31 +1,62 @@
-const {
-  JabroniOutfitStore,
-  JabroniOutfitUI,
-  defaultStateWithDurationAndPrivacy,
-  defaultSchemeWithPrivateFilter
-} = window.jabronioutfit;
+const { JabronioStore, JabronioGUI } = 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 example = () => {
+  const customState = {
+    myFancyVariable: true,
+  };
+  const store = new JabronioStore(customState);
 
-const ui = new JabroniOutfitUI(store, {
-  gradientColor1: [{ type: "text", model: "localState.gradientColor1", placeholder: "color", labelBefore: "color1" }],
-  gradientColor2: [{ type: "text", model: "localState.gradientColor2", placeholder: "color", labelBefore: "color2" }],
-  gradientColor3: [{ type: "text", model: "localState.gradientColor3", placeholder: "color", labelBefore: "color3" }],
-  gradientEnabled: [{ type: "checkbox", model: "localState.gradientEnabled", labelBefore: "gradient enabled" }],
-});
+  const scheme = [
+    {
+      title: 'Colors',
+      collapsed: true,
+      content: [
+        {
+          $color1: 'coral',
+        },
+        {
+          color2: 'crimson',
+        },
+        {
+          $color3: 'tomato',
+        },
+        {
+          size: 100,
+          type: 'range',
+          max: '500',
+          min: '0',
+        },
+        {
+          gradientEnabled: true,
+          label: 'gradient enabled',
+        },
+        {
+          reset: () => {
+            store.state.$color1 = 'darkslateblue';
+            store.state.color2 = 'maroon';
+            store.state.$color3 = 'darksalmon';
+          },
+        },
+      ],
+    },
+  ];
 
-function drawGradient() {
-  const { gradientColor1, gradientColor2, gradientColor3, gradientEnabled } = store.localState;
-  if (!gradientEnabled) { document.body.style.background = 'coral'; return; }
-  document.body.style.background = `radial-gradient(${gradientColor1}, ${gradientColor2}, ${gradientColor3})`;
-}
+  new JabronioGUI(scheme, store);
 
-drawGradient();
-store.subscribe(drawGradient);
+  function drawGradient() {
+    const { $color1, color2, $color3, gradientEnabled, size } = store.state;
+    if (!gradientEnabled) {
+      document.body.style.background = '#000';
+      return;
+    }
+    document.body.style.background = `repeating-radial-gradient(${$color1}, ${color2}, ${$color3} ${size}%)`;
+  }
+
+  drawGradient();
+
+  store.subscribe(() => {
+    drawGradient();
+  });
+};
+
+example();

package/src/types/index.ts

@@ -0,0 +1,48 @@
+import type { Reactive } from 'vue';
+import type { SchemeElement } from '../scheme/scheme-element';
+
+export type Primitive = string | number | boolean;
+
+export type StoreStateRaw = Record<string, Primitive>;
+
+export type StoreState = Reactive<StoreStateRaw>;
+
+export type StoreStateOptions = Record<
+  string,
+  { watch?: string; value: Primitive } | Primitive
+>;
+
+export type Callback<T> = (...args: T[]) => void;
+
+type _RawSchemeElement = Partial<SchemeElement> & {
+  [x: string]: Primitive | (() => void);
+};
+
+export type SchemeGroup<T> = {
+  title: string;
+  content: T[];
+  // by default collapsed is false and title is ''
+  collapsed: boolean;
+  id: string;
+};
+
+export type RawSchemeElement = Partial<
+  Exclude<_RawSchemeElement, keyof SchemeGroup<_RawSchemeElement>>
+>;
+
+export type SchemeSection<T> = T | SchemeGroup<T>;
+
+export type SchemeInput = Partial<SchemeSection<RawSchemeElement>>[];
+
+export type SchemeParsed = SchemeGroup<SchemeElement>[];
+
+export type HTMLInputType = 'checkbox' | 'text' | 'number' | 'range' | '';
+
+export type HTMLTagOrInputType = keyof HTMLElementTagNameMap | HTMLInputType;
+
+export type HTMLTag = keyof HTMLElementTagNameMap;
+
+export type ExtractValuesByKey<
+  T extends readonly any[],
+  K extends string,
+> = Extract<T[number], { [P in K]: any }>[K];

package/src/utils/index.ts

@@ -0,0 +1,32 @@
+export function uuidv4() {
+  var d = Date.now();
+  var d2 =
+    (typeof performance !== 'undefined' &&
+      performance.now &&
+      performance.now() * 1000) ||
+    0;
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    var r = Math.random() * 16;
+    if (d > 0) {
+      r = ((d + r) % 16) | 0;
+      d = Math.floor(d / 16);
+    } else {
+      r = ((d2 + r) % 16) | 0;
+      d2 = Math.floor(d2 / 16);
+    }
+    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+  });
+}
+
+export function propsDifference<
+  T extends Record<string, unknown>,
+  U extends object,
+>(obj1: T | U, obj2: T | U): { d1: string[]; d2: string[] } {
+  const o1k = Object.getOwnPropertyNames(obj1);
+  const o2k = Object.getOwnPropertyNames(obj2);
+
+  const d1 = o1k.filter((e) => o2k.every((e2) => e2 !== e));
+  const d2 = o2k.filter((e) => o1k.every((e2) => e2 !== e));
+
+  return { d1, d2 };
+}

package/src/utils/shorthand.ts

@@ -0,0 +1,16 @@
+import { JabronioGUI } from '../app';
+import { setupScheme } from '../scheme/default-scheme';
+import { JabronioStore } from '../store';
+
+export function jabroniInit<T extends Parameters<typeof setupScheme>>(
+  a: T[0],
+  b: T[1],
+) {
+  const scheme = setupScheme(a, b);
+  const store = new JabronioStore();
+  const gui = new JabronioGUI(scheme, store);
+  return {
+    store,
+    gui,
+  };
+}

package/src/store/store.ts

@@ -1,52 +0,0 @@
-import { type Reactive, reactive, watch } from 'vue';
-import type { NotifyApply, RecordV, StateOption, StateOptions } from './types';
-import { PersistentState } from './persistent-state';
-import { defaultStateInclExclMiscPagination } from './default-state';
-import { parseIntegerOr } from 'billy-herrington-utils';
-
-export class JabroniOutfitStore {
-  private callbacks: NotifyApply[] = [];
-  public state: Reactive<RecordV> | undefined;
-  public localState: 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;
-    });
-
-    this.state = new PersistentState(persistent).state;
-    this.localState = reactive(nonpersistent);
-
-    Object.entries(st).forEach(([k, v]: [string, StateOption]) => {
-      if (!v.watch) return;
-      const state = (v.persistent ? this.state : this.localState) 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

@@ -1,16 +0,0 @@
-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/style.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/src/typings/vue.d.ts

@@ -1,6 +0,0 @@
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  const component: DefineComponent<object, object, any>
-  export default component
-}

package/src/ui/default-scheme.ts

@@ -1,89 +0,0 @@
-import type { Scheme } from "./types";
-
-export const DefaultScheme: Scheme = {
-  excludeFilter: [
-    { type: "checkbox", model: "state.filterExclude", label: "exclude" },
-    { type: "text", model: "state.filterExcludeWords", placeholder: "word, word1|word2, f:full_word..." }
-  ],
-  includeFilter: [
-    { type: "checkbox", model: "state.filterInclude", label: "include" },
-    { type: "text", model: "state.filterIncludeWords", placeholder: "word, word1|word2, f:full_word..." }
-  ],
-  infiniteScroll: [
-    { type: "checkbox", model: "state.infiniteScrollEnabled", label: "infinite scroll" },
-    {
-      type: "span", innerText:
-        "return `${localState.pagIndexCur}/${localState.pagIndexLast}`", "v-if": "return localState.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 customScheme: Scheme = {
-  sortFilter: [
-    {
-      type: "span", innerText: 'sort by:'
-    },
-    {
-      type: 'button',
-      innerText: 'views',
-      callback: () => {
-        //@ts-ignore
-        window.sortByViews?.();
-      },
-    },
-    {
-      type: 'button',
-      innerText: 'duration',
-      callback: () => {
-        //@ts-ignore
-        window.sortByDuration?.();
-      },
-    }],
-
-  privacyFilter: [
-    { type: "checkbox", model: "state.filterPrivate", label: "private" },
-    { type: "checkbox", model: "state.filterPublic", label: "public" }
-  ],
-
-  privacyAccess: [
-    { type: "checkbox", model: "state.autoRequestAccess", label: "auto friend request" },
-    {
-      type: 'button',
-      innerText: 'check access 🔓',
-      callback: () => {
-        //@ts-ignore
-        window.requestAccess?.();
-      }
-    }
-  ],
-
-  hdFilter: [
-    { type: "checkbox", model: "state.filterHD", label: "HD" },
-  ]
-}
-
-export const extendScheme = (scheme: Scheme, newScheme: Scheme) =>
-  Object.entries(scheme).reduce((acc, [k, v], i) => {
-    if (i === 2) Object.assign(acc, newScheme);
-    Object.assign(acc, { [k]: v });
-    return acc;
-  }, {});
-
-export const defaultSchemeWithPrivacyFilter = extendScheme(DefaultScheme, {
-  privacyFilter: customScheme.privacyFilter,
-  privacyAccess: customScheme.privacyAccess
-});
-
-export const defaultSchemeWithPrivacyFilterWithHD = extendScheme(defaultSchemeWithPrivacyFilter, {
-  hdFilter: customScheme.hdFilter
-});
-
-export const defaultSchemeWithPrivacyFilterWithHDwithSort = extendScheme(defaultSchemeWithPrivacyFilterWithHD, {
-  sortFilter: customScheme.sortFilter
-});
-

package/src/ui/index.ts

@@ -1,31 +0,0 @@
-import { createApp } from "vue";
-import { DefaultScheme } from "./default-scheme";
-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";
-
-const DEFAULT_ROOT = 'jabroni-outfit-root';
-
-export class JabroniOutfitUI {
-  public app: ReturnType<typeof createApp>;
-
-  private getRoot(rootSelector: string) {
-    if (rootSelector === DEFAULT_ROOT) {
-      const rootEl = parseDom(`<div id="${rootSelector}" style="position: relative; z-index: 999999;"></div>`);
-      document.body.appendChild(rootEl);
-    }
-    document.getElementById(rootSelector)?.classList.add('taper-class');
-    return `#${rootSelector}`;
-  }
-
-  constructor(
-    { state, localState }: JabroniOutfitStore,
-    scheme: Scheme = DefaultScheme,
-    rootSelector = DEFAULT_ROOT,
-    position: UIPosition = { fixed: true, right: true, bottom: true }
-  ) {
-    this.app = createApp(App, { state, localState, scheme, position });
-    this.app.mount(this.getRoot(rootSelector));
-  }
-}

package/src/ui/types.ts

@@ -1,27 +0,0 @@
-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
-}
-
-export interface UIPosition {
-  fixed: boolean,
-  left?: boolean,
-  right?: boolean,
-  top?: boolean,
-  bottom?: boolean
-}

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

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import Config from './icons/Config.vue';
-import Close from './icons/Close.vue';
-import Gen from './Gen.vue';
-import type { Scheme, UIPosition } from '../types';
-import type { Reactive } from 'vue';
-import type { RecordV } from '../../store/types';
-
-const { state, localState, scheme, position } = defineProps<{
-  state: Reactive<RecordV>,
-  localState: Reactive<RecordV>,
-  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="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">
-      <span class="m-auto flex mono">
-        <span v-if="state.hidden && localState.pagIndexLast as number > 1"
-          class="px-3 py-2 mr-2 bg-gray-700 text-zinc-300 font-mono rounded">
-          {{ localState.pagIndexCur }}/{{ localState.pagIndexLast }}
-        </span>
-        <Config v-if="state.hidden" />
-        <Close v-if="!state.hidden" />
-      </span>
-    </div>
-
-    <Gen :scheme="scheme" :localState="localState" :state="state" v-if="!state.hidden" />
-  </div>
-</template>
-
-<style scoped></style>

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

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { Reactive } from "vue";
-import type { RecordV } from "../../store/types";
-import type { Scheme } from "../types";
-import RowElement from './RowElement.vue'
-
-const { scheme, state, localState } = defineProps<{
-  state: Reactive<RecordV>,
-  localState: Reactive<RecordV>,
-  scheme?: Scheme
-}>()
-
-const rows = Object.values(scheme as Scheme);
-
-</script>
-
-<template>
-  <div v-for="row in rows" class="flex items-center bg-zinc-900 py-2 px-2 m-1 font-mono rounded">
-    <RowElement v-for="r in row" :element="r" :localState="localState" :state="state" />
-  </div>
-</template>

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

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { computed, type Reactive } from "vue";
-import type { RecordV } from "../../store/types";
-import type { SchemeRowEl } from "../types";
-
-const props = defineProps<{
-  element?: SchemeRowEl,
-  state: Reactive<RecordV>,
-  localState: Reactive<RecordV>,
-}>();
-
-const { element, state, localState } = props;
-
-const { type, model, innerText, label, labelBefore, callback, ...rest } = element as SchemeRowEl;
-
-const isInput = /checkbox|text|number/.test(type);
-const tag = isInput ? 'input' : type;
-const ctype = isInput ? type : "";
-const id = isInput ? model : (Math.random() * 10000000 | 0).toString(16);
-
-const componentStyles = {
-  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",
-}
-
-const innerTextValue = computed(() => {
-  if (!innerText?.includes('return')) return innerText || "";
-  const f = new Function('state', 'localState', `${innerText}`);
-  return f(state, localState);
-});
-
-const value = new Function('state', 'localState', `return ${model || ""}`)(state, localState);
-
-const updateValue = ({ target: { checked, value } }) => {
-  if (!(typeof model === 'string') || !/^state|localState/.test(model)) return;
-  const [stateName, stateProp] = (model).split('.');
-  const val = type === 'checkbox' ? checked : value;
-  props[stateName][stateProp] = val;
-};
-
-const vif = computed(() => {
-  if (!element?.['v-if']) return true;
-  const f = new Function('state', 'localState', `${element['v-if']}`);
-  return f(state, localState);
-});
-
-// button state
-// let callbackWrap: () => Promise<void> | undefined;
-// if (callback) {
-//   callbackWrap = async () => {
-//     callback();
-//   }
-// }
-
-</script>
-<template>
-  <label v-if="labelBefore" :for="id" class="text-zinc-300 mx-2 font-mono">{{ labelBefore }}</label>
-  <component v-if="vif" :id="id" :is="tag" :type="ctype" :class="componentStyles[type]" :checked="!!value"
-    :value="value" v-on:change="updateValue" v-on:input="updateValue" @click="callback" v-bind="rest">
-    {{ innerTextValue }}
-  </component>
-  <label v-if="label" :for="id" class="text-zinc-300 flex font-mono">{{ label }}</label>
-</template>

package/src/ui/vue-templates/icons/Close.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg 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>
-</template>

package/src/ui/vue-templates/icons/Config.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg 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>
-</template>