jabroni-outfit 1.6.4 → 2.0.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jabroni-outfit",
-  "description": "out-of-the-box gui and persistent-state library based on vue",
-  "version": "1.6.4",
+  "description": "Small GUI and persistent state lib based on Vue.",
+  "version": "2.0.7",
   "license": "MIT",
   "keywords": [
     "gui",
@@ -14,22 +14,22 @@
   ],
   "author": "smartacephale atm.mormon@protonmail.com (https://github.com/smartacephale)",
   "type": "module",
-  "homepage": "https://github.com/smartacephale/jabroni-outfit#readme",
+  "homepage": "https://github.com/smartacephale/jabroni-outfit-GUI#readme",
   "main": "dist/jabroni-outfit.umd.js",
   "module": "dist/jabroni-outfit.es.js",
   "types": "dist/index.d.ts",
-  "repository": "github:smartacephale/jabroni-outfit",
+  "repository": "github:smartacephale/jabroni-outfit-GUI",
   "bugs": {
-    "url": "https://github.com/smartacephale/jabroni-outfit/issues",
+    "url": "https://github.com/smartacephale/jabroni-outfit-GUI/issues",
     "email": "atm.mormon@protonmail.com"
   },
   "browser": "dist/jabroni-outfit.es.js",
   "unpkg": "dist/jabroni-outfit.es.js",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/jabroni-outfit.es.js",
-      "require": "./dist/jabroni-outfit.umd.cjs",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/jabroni-outfit.umd.cjs"
     }
   },
   "files": [
@@ -42,19 +42,19 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.2",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.41",
-    "tailwindcss": "^3.4.10",
-    "tailwindcss-scoped-preflight": "^3.4.3",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "autoprefixer": "^10.4.23",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.5.3",
-    "vite": "^6.3.5",
-    "vite-plugin-css-injected-by-js": "^3.5.1",
-    "vite-plugin-dts": "^4.0.3",
-    "vue-tsc": "^2.0.29"
+    "vite": "^7.3.0",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vue-tsc": "^3.2.1"
   },
   "dependencies": {
-    "billy-herrington-utils": "^1.1.1",
-    "vue": "^3.4.37"
+    "billy-herrington-utils": "^1.4.2",
+    "vue": "^3.5.26"
   }
 }

package/src/app.ts

@@ -0,0 +1,39 @@
+import './style/index.css';
+import { parseDom } from 'billy-herrington-utils';
+import { createApp } from 'vue';
+import App from './components/App.vue';
+import { SchemeParser } from './scheme/parser';
+import type { JabronioStore } from './store';
+import type { SchemeInput } from './types';
+
+const DEFAULT_ROOT = 'jabroni-outfit-root';
+
+export class JabronioGUI {
+  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(
+    scheme: SchemeInput,
+    store: JabronioStore,
+    rootSelector = DEFAULT_ROOT,
+    position = 'fixed right-0 bottom-0',
+  ) {
+    const parsed = SchemeParser.parse(scheme, store);
+    this.app = createApp(App, {
+      state: store.state,
+      scheme: parsed.scheme,
+      position,
+    });
+    this.app.mount(this.getRoot(rootSelector));
+  }
+}

package/src/components/App.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { SchemeParsed, StoreState } from '../types';
+import Header from './Header.vue';
+import Section from './Section.vue';
+
+const props = defineProps<{
+  state: StoreState;
+  scheme: SchemeParsed;
+  position: string;
+}>();
+
+const scheme = computed(() => {
+  return props.scheme.filter((g) => g.title !== 'Badge');
+});
+</script>
+<template>
+  <div
+    v-if="props.state.uiEnabled"
+    id="jabroni-app"
+    :data-theme="props.state.darkmode ? 'dark' : 'bright'"
+    :class="`isolate ${props.position}
+            w-85 max-h-118 flex flex-col m-2
+            bg-white  border-2 border-black dark:border-gray-700 dark:bg-zinc-800 dark:text-zinc-300
+            shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]
+            text-black text-xs font-light`"
+  >
+    <Header :state="props.state" :scheme="props.scheme"/>
+
+    <div class="flex-1 overflow-y-auto p-2 space-y-2" v-if="props.state.hidden">
+      <Section :state="props.state" :group="group" v-for="group in scheme"/>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#jabroni-app {
+  font-family: monospace;
+}
+</style>

package/src/components/Badge.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { SchemeElement } from '../scheme/scheme-element';
+import type { SchemeGroup, StoreState } from '../types';
+
+const props = defineProps<{
+  state: StoreState;
+  group: SchemeGroup<SchemeElement>;
+}>();
+
+const el = computed(() => props.group.content[0]);
+
+function computedExpression(expr: string) {
+  return computed(() => {
+    const f = new Function('state', `${expr}`);
+    return f(props.state);
+  });
+}
+
+const vif = computedExpression(el.value?.vif || '');
+const textContent = computedExpression(el.value?.text || '');
+</script>
+<template>
+  <span
+    v-if="vif"
+    class="bg-black text-white px-1.5 py-1 text-[11px] font-semibold dark:border-2 dark:border-zinc-700 dark:bg-gray-600 dark:text-zinc-300"
+  >
+    {{ textContent }}</span
+  >
+</template>

package/src/components/Chevron.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import ChevronDown from './icons/ChevronDown.vue';
+import ChevronUp from './icons/ChevronUp.vue';
+
+const props = defineProps<{ collapsed: boolean }>();
+</script>
+<template>
+  <ChevronUp class="text-(--muted-foreground)" v-if="!props.collapsed"/>
+  <ChevronDown class="text-(--muted-foreground)" v-if="props.collapsed"/>
+</template>

package/src/components/Header.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { SchemeParsed, StoreState } from '../types';
+import Badge from './Badge.vue';
+import Minus from './icons/Minus.vue';
+import Sun from './icons/Sun.vue';
+
+const props = defineProps<{
+  state: StoreState;
+  scheme: SchemeParsed;
+}>();
+
+const badge = computed(() => {
+  return props.scheme.find((g) => g.title === 'Badge');
+});
+</script>
+<template>
+  <div
+    class="flex items-center justify-between p-2 border-b-2 border-black
+                bg-white hover:bg-gray-200 select-none
+                dark:border-gray-700 dark:bg-zinc-800 dark:hover:bg-gray-600"
+  >
+    <div class="flex items-center gap-2">
+      <Badge :state="props.state" :group="badge" v-if="!!badge"/>
+      <span class="font-medium tracking-widest text-[14px]">Config</span>
+    </div>
+    <div class="flex gap-2 items-center">
+      <Sun
+        class="text-lg hover:text-gray-500 cursor-pointer"
+        @click="props.state.darkmode = !props.state.darkmode"
+      />
+      <Minus
+        class="text-lg hover:text-gray-500 cursor-pointer"
+        @click="props.state.hidden = !props.state.hidden"
+      />
+    </div>
+  </div>
+</template>

package/src/components/RowButton.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SchemeElement } from '../scheme/scheme-element';
+import type { StoreState } from '../types';
+
+const props = defineProps<{
+  state: StoreState;
+  element: SchemeElement;
+}>();
+</script>
+<template>
+  <div class="col-span-2 pt-1">
+    <button
+      @click="props.element.callback"
+      class="w-full box-border border-2 border-black py-1 font-semibold text-[11px]
+                                   hover:bg-black hover:text-white transition-colors
+                dark:bg-gray-600 dark:border-zinc-800 dark:hover:bg-gray-500"
+    >
+      {{ props.element.name }}
+    </button>
+  </div>
+</template>

package/src/components/Section.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { SchemeElement } from '../scheme/scheme-element';
+import type { SchemeGroup, StoreState } from '../types';
+import Chevron from './Chevron.vue';
+import InputCheckbox from './inputs/InputCheckbox.vue';
+import InputNumber from './inputs/InputNumber.vue';
+import InputRange from './inputs/InputRange.vue';
+import InputText from './inputs/InputText.vue';
+import RowButton from './RowButton.vue';
+
+const props = defineProps<{
+  state: StoreState;
+  group: SchemeGroup<SchemeElement>;
+}>();
+
+function switchCollapsed() {
+  props.state[props.group.id] = !props.state[props.group.id];
+}
+
+const collapsed = computed(() => !!props.state[props.group.id]);
+</script>
+<template>
+  <div
+    class="border-2 border-black 
+                dark:border-gray-700 "
+  >
+    <div
+      @click="switchCollapsed"
+      class="border-b-2 border-black px-2 py-1 flex items-center gap-1
+                        cursor-pointer bg-gray-50 hover:bg-gray-200
+                dark:border-gray-700 dark:bg-zinc-800 dark:hover:bg-gray-600"
+    >
+      <Chevron :collapsed="!collapsed" class="text-sm"/>
+      <span class="font-medium">{{ props.group.title }}</span>
+    </div>
+
+    <div
+      v-if="!collapsed"
+      class="p-2 grid grid-cols-[90px_1fr] gap-y-2 gap-x-2 items-center"
+      v-for="se in props.group.content"
+    >
+      <InputText :state="props.state" :element="se" v-if="se.type === 'text'"/>
+      <InputNumber
+        :state="props.state"
+        :element="se"
+        v-if="se.type === 'number'"
+      />
+      <InputCheckbox
+        :state="  props.state"
+        :element="se"
+        v-if="se.type === 'checkbox'"
+      />
+      <InputRange
+        :state="props.state"
+        :element="se"
+        v-if="se.type === 'range'"
+      />
+      <RowButton
+        :state="props.state"
+        :element="se"
+        v-if="se.type === 'button'"
+      />
+    </div>
+  </div>
+</template>

package/src/components/icons/Check.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M20 6L9 17l-5-5"
+    ></path>
+  </svg>
+</template>

package/src/components/icons/ChevronDown.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="m6 9l6 6l6-6"
+    ></path>
+  </svg>
+</template>

package/src/components/icons/ChevronUp.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="m18 15l-6-6l-6 6"
+    ></path>
+  </svg>
+</template>

package/src/components/icons/Minus.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M5 12h14"
+    />
+  </svg>
+</template>

package/src/components/icons/Sun.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    >
+      <circle cx="12" cy="12" r="4"/>
+      <path
+        d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"
+      />
+    </g>
+  </svg>
+</template>

package/src/components/inputs/InputCheckbox.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { SchemeElement } from '../../scheme/scheme-element';
+import type { StoreState } from '../../types';
+import Check from '../icons/Check.vue';
+
+const props = defineProps<{
+  state: StoreState;
+  element: SchemeElement;
+}>();
+
+const name = computed(() => props.element.name as string);
+</script>
+<template>
+  <label>{{ props.element.label }}</label>
+  <label class="relative inline-flex items-center cursor-pointer">
+    <input type="checkbox" v-model="props.state[name]" class="peer sr-only">
+    <span
+      class="h-4 w-4 border-2 border-black flex items-center justify-center 
+        peer-checked:bg-black 
+        dark:peer-checked:bg-gray-600 dark:bg-zinc-700"
+    >
+      <Check
+        v-if="props.state[name]"
+        class="peer-checked:block text-black text-[12px] stroke-2"
+      />
+    </span>
+  </label>
+</template>

package/src/components/inputs/InputNumber.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { SchemeElement } from '../../scheme/scheme-element';
+import type { StoreState } from '../../types';
+
+const props = defineProps<{
+  state: StoreState;
+  element: SchemeElement;
+}>();
+
+const name = computed(() => props.element.name as string);
+</script>
+<template>
+  <label>{{ props.element.label }}</label>
+  <input
+    type="number"
+    v-model="props.state[name]"
+    class="w-full box-border border-2 px-1 py-1 focus:outline-none tw-input-colors"
+    :placeholder="props.element.placeholder || ''"
+    :min="props.element.min || ''"
+    :max="props.element.max || ''"
+    :step="props.element.step || ''"
+  >
+</template>

package/src/components/inputs/InputRange.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { SchemeElement } from '../../scheme/scheme-element';
+import type { StoreState } from '../../types';
+
+const props = defineProps<{
+  state: StoreState;
+  element: SchemeElement;
+}>();
+
+const name = computed(() => props.element.name as string);
+</script>
+<template>
+  <label>{{ props.element.label }}</label>
+  <div class="flex items-center gap-1 w-full">
+    <input
+      type="range"
+      min="0"
+      max="100"
+      v-model="props.state[name]"
+      class="custom-range"
+      style="width: calc(100% - 30px);"
+      oninput="this.nextElementSibling.value = this.value"
+    >
+
+    <input
+      type="number"
+      v-model="props.state[name]"
+      class="w-20 box-border border-2 px-1 py-1 text-center focus:outline-none tw-input-colors"
+      oninput="this.previousElementSibling.value = this.value"
+    >
+  </div>
+</template>
+
+<style scoped>
+.custom-range {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 5px;
+  background: black;
+  cursor: pointer;
+}
+
+.custom-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background: black;
+  border: 2px solid black;
+  cursor: pointer;
+}
+
+.custom-range::-moz-range-thumb {
+  width: 13px;
+  height: 13px;
+  background: black;
+  border: none;
+  border-radius: 0;
+  cursor: pointer;
+}
+
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+</style>

package/src/components/inputs/InputText.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { SchemeElement } from '../../scheme/scheme-element';
+import type { StoreState } from '../../types';
+
+const props = defineProps<{
+  state: StoreState;
+  element: SchemeElement;
+}>();
+
+const name = computed(() => props.element.name as string);
+</script>
+<template>
+  <label>{{ props.element.label }}</label>
+  <input
+    type="text"
+    v-model="props.state[name]"
+    class="w-full box-border border-2 px-1 py-1 focus:outline-none tw-input-colors"
+    :placeholder="props.element.placeholder || ''"
+  >
+</template>

package/src/index.ts

@@ -1,17 +1,4 @@
-import './style.css'
-export { JabroniOutfitStore } from "./store/store";
-export {
-  defaultStateWithDurationAndPrivacy,
-  defaultStateInclExclMiscPagination,
-  defaultStateWithDuration,
-  defaultStateWithDurationAndHD,
-  defaultStateWithDurationAndPrivacyAndHD,
-} from "./store/default-state";
-export { JabroniOutfitUI } from "./ui";
-export {
-  defaultSchemeWithPrivacyFilter,
-  defaultSchemeWithPrivacyFilterWithHD,
-  defaultSchemeWithPrivacyFilterWithHDwithSort,
-  DefaultScheme,
-  extendScheme
-} from "./ui/default-scheme";
+export { JabronioGUI } from './app';
+export { setupScheme } from './scheme/default-scheme';
+export { JabronioStore } from './store';
+export type { SchemeInput } from './types';