feat: inputs clean up

@factor/andrewpowers/package.json

@@ -2,10 +2,10 @@
   "name": "@factor/andrewpowers",
   "version": "5.5.49",
   "dependencies": {
-    "@factor/api": "5.5.49",
-    "@factor/plugin-blog-engine": "5.5.49",
-    "@factor/plugin-highlight-code": "5.5.49",
-    "@factor/ui": "5.5.49",
+    "@factor/api": "workspace:5.5.49",
+    "@factor/plugin-blog-engine": "workspace:5.5.49",
+    "@factor/plugin-highlight-code": "workspace:5.5.49",
+    "@factor/ui": "workspace:5.5.49",
     "postcss": "^8.4.16",
     "tailwindcss": "^3.1.8"
   },

@factor/api/package.json

@@ -21,7 +21,7 @@
     "@iconify-json/carbon": "^1.1.7",
     "@iconify-json/heroicons-outline": "^1.1.4",
     "@medv/finder": "^2.1.0",
-    "@sinclair/typebox": "^0.24.37",
+    "@sinclair/typebox": "^0.24.38",
     "@types/bcrypt": "^5.0.0",
     "@types/compression": "^1.7.2",
     "@types/cors": "^2.8.12",
@@ -146,8 +146,8 @@
   },
   "devDependencies": {
     "@babel/parser": "^7.19.0",
-    "@factor/api": "5.5.49",
-    "@playwright/test": "^1.25.1",
+    "@factor/api": "workspace:5.5.49",
+    "@playwright/test": "^1.25.2",
     "@tailwindcss/forms": "^0.5.3",
     "@types/body-parser": "^1.19.2",
     "@types/compression": "^1.7.2",

@factor/api/plugin-env/index.ts

@@ -97,6 +97,7 @@ export type FactorControlSettings = {
   commands?: CliCommand<string>[]
   mode?: "development" | "production"
   isApp?: boolean
+  isTest?: boolean
   version: string
 }
 
@@ -121,8 +122,8 @@ export class FactorEnv<
   mode = this.utils.vue.ref<"development" | "production" | undefined>(
     process.env.NODE_ENV as "development" | "production",
   )
-  isApp = this.utils.vue.ref(!!process.env.IS_VITE)
-  isTest = this.utils.vue.ref(!!process.env.IS_TEST)
+  isApp = this.utils.vue.ref(this.settings.isApp || !!process.env.IS_VITE)
+  isTest = this.utils.vue.ref(this.settings.isTest || !!process.env.IS_TEST)
   isServer = this.utils.vue.computed(() => !this.isApp.value)
   isProd = this.utils.vue.computed(() => this.mode.value === "production")
   isDev = this.utils.vue.computed(() => this.mode.value === "development")

@factor/api/plugin-media/index.ts

@@ -10,8 +10,8 @@ import { QueryUnsplash } from "./query-unsplash"
 import { mediaTable } from "./tables"
 
 type FactorMediaSettings = {
-  factorUser: FactorUser
-  factorDb: FactorDb
+  factorUser?: FactorUser
+  factorDb?: FactorDb
   factorServer: FactorServer
   factorAws: FactorAws
   bucket: string
@@ -51,7 +51,7 @@ export class FactorMedia extends FactorPlugin<FactorMediaSettings> {
   constructor(settings: FactorMediaSettings) {
     super("media", settings)
 
-    this.factorDb.addTables([mediaTable])
+    this.factorDb?.addTables([mediaTable])
   }
 
   async uploadFile(params: {

@factor/api/plugin-media/queries.ts

@@ -9,8 +9,8 @@ import type { FactorMedia, MediaConfig } from "."
 
 type SaveMediaSettings = {
   factorMedia: FactorMedia
-  factorDb: FactorDb
-  factorAws: FactorAws
+  factorDb?: FactorDb
+  factorAws?: FactorAws
 }
 
 abstract class MediaQuery extends Query<SaveMediaSettings> {
@@ -33,7 +33,8 @@ export class QuerySaveMedia extends MediaQuery {
 
     if (!file) throw this.stop("no file in request")
     if (!userId) throw this.stop("no userId (bearer)")
-
+    if (!this.factorAws) throw this.stop("no factorAws")
+    if (!this.factorDb) throw this.stop("no factorDb")
     const mime = file?.mimetype
     const bucket = this.factorMedia.bucket
     const mediaId = this.utils.objectId()
@@ -89,6 +90,7 @@ export class QueryMediaIndex extends MediaQuery {
     params: MediaIndexParams,
     meta: EndpointMeta,
   ): Promise<EndpointResponse<MediaConfig[]>> {
+    if (!this.factorDb) throw this.stop("no factorDb")
     const { _action } = params
 
     const userId = params.userId || meta.bearer?.userId
@@ -119,6 +121,8 @@ export class QueryMediaAction extends MediaQuery {
     params: MediaActionParams,
     meta: EndpointMeta,
   ): Promise<EndpointResponse<MediaConfig[]>> {
+    if (!this.factorDb) throw this.stop("no factorDb")
+    if (!this.factorAws) throw this.stop("no factorAws")
     const { _action, url } = params
 
     const userId = params.userId || meta.bearer?.userId

@factor/fiction/package.json

@@ -2,10 +2,10 @@
   "name": "@factor/fiction",
   "version": "5.5.49",
   "dependencies": {
-    "@factor/api": "5.5.49",
-    "@factor/plugin-blog-engine": "5.5.49",
-    "@factor/plugin-highlight-code": "5.5.49",
-    "@factor/ui": "5.5.49",
+    "@factor/api": "workspace:5.5.49",
+    "@factor/plugin-blog-engine": "workspace:5.5.49",
+    "@factor/plugin-highlight-code": "workspace:5.5.49",
+    "@factor/ui": "workspace:5.5.49",
     "postcss": "^8.4.16",
     "tailwindcss": "^3.1.8"
   },

@factor/plugin-blog-engine/package.json

@@ -5,9 +5,9 @@
   "author": "Kaption Co.",
   "bugs": "https://github.com/fiction-com/factor/issues",
   "dependencies": {
-    "@factor/api": "5.5.49",
-    "@factor/plugin-highlight-code": "5.5.49",
-    "@factor/ui": "5.5.49",
+    "@factor/api": "workspace:5.5.49",
+    "@factor/plugin-highlight-code": "workspace:5.5.49",
+    "@factor/ui": "workspace:5.5.49",
     "@types/string-similarity": "^4.0.0",
     "string-similarity": "^4.0.4"
   },

@factor/plugin-docs-engine/package.json

@@ -5,9 +5,9 @@
   "author": "Kaption Co.",
   "bugs": "https://github.com/fiction-com/factor/issues",
   "dependencies": {
-    "@factor/api": "5.5.49",
-    "@factor/plugin-highlight-code": "5.5.49",
-    "@factor/ui": "5.5.49",
+    "@factor/api": "workspace:5.5.49",
+    "@factor/plugin-highlight-code": "workspace:5.5.49",
+    "@factor/ui": "workspace:5.5.49",
     "@types/string-similarity": "^4.0.0",
     "dayjs": "^1.11.5",
     "string-similarity": "^4.0.4"

@factor/plugin-highlight-code/package.json

@@ -3,7 +3,7 @@
   "description": "Add a syntax highlighting component to your Factor app.",
   "version": "5.5.49",
   "dependencies": {
-    "@factor/api": "5.5.49",
+    "@factor/api": "workspace:5.5.49",
     "highlight.js": "^11.6.0"
   },
   "license": "MIT",

@factor/plugin-notify/package.json

@@ -4,7 +4,7 @@
   "version": "5.5.49",
   "author": "Kaption Co.",
   "dependencies": {
-    "@factor/api": "5.5.49"
+    "@factor/api": "workspace:5.5.49"
   },
   "gitHead": "435e8535660c83acb445295cfb98a21b32c69434",
   "license": "MIT",

@factor/plugin-stripe/package.json

@@ -2,7 +2,7 @@
   "name": "@factor/plugin-stripe",
   "version": "5.5.49",
   "dependencies": {
-    "@factor/api": "5.5.49",
+    "@factor/api": "workspace:5.5.49",
     "@stripe/stripe-js": "^1.35.0",
     "express": "^4.18.1",
     "stripe": "^9.16.0"

@factor/supereon/package.json

@@ -2,10 +2,10 @@
   "name": "@factor/supereon",
   "version": "5.5.49",
   "dependencies": {
-    "@factor/api": "5.5.49",
-    "@factor/plugin-blog-engine": "5.5.49",
-    "@factor/plugin-highlight-code": "5.5.49",
-    "@factor/ui": "5.5.49",
+    "@factor/api": "workspace:5.5.49",
+    "@factor/plugin-blog-engine": "workspace:5.5.49",
+    "@factor/plugin-highlight-code": "workspace:5.5.49",
+    "@factor/ui": "workspace:5.5.49",
     "postcss": "^8.4.16",
     "tailwindcss": "^3.1.8"
   },

@factor/ui/ElButton.vue

@@ -2,7 +2,7 @@
   <component
     :is="to ? 'router-link' : href ? 'a' : 'button'"
     :to="to"
-    class="relative select-none items-center rounded-lg border font-medium ring-offset-2 focus:outline-none focus:ring-2"
+    class="relative select-none items-center rounded-lg border ring-offset-2 focus:outline-none focus:ring-2"
     :class="btnClass"
     :href="href"
   >
@@ -96,14 +96,16 @@ const btnClass = vue.computed(() => {
     out =
       "border-slate-200 text-slate-500  hover:border-slate-400 focus:ring-primary-100"
   } else if (btn == "theme") {
-    out = "border-theme-300 text-theme-700 bg-theme-100 hover:bg-theme-200"
+    out = "border-input-border text-input-text  bg-input-bg hover:opacity-90"
   } else {
     out =
       "border-slate-300 text-slate-700 bg-white hover:border-slate-400 focus:ring-primary-100"
   }
 
   let sizeClasses = "px-2.5 py-1.5 text-sm"
-  if (props.size == "md") {
+  if (btn == "theme") {
+    sizeClasses = "px-input-x py-input-y text-input-size"
+  } else if (props.size == "md") {
     sizeClasses = "px-3 py-1.5 text-base"
   } else if (props.size == "sm") {
     sizeClasses = "px-2 py-1 text-xs"

@factor/ui/InputCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <label class="inline-flex cursor-pointer items-center">
+  <label class="text-input-size inline-flex cursor-pointer items-center">
     <input
       v-bind="attrs"
       type="checkbox"
@@ -8,9 +8,7 @@
       @input="handleEmit($event.target)"
     />
 
-    <span
-      class="checkbox-label text-input-size text-theme-700 hover:text-theme-500"
-    >
+    <span class="checkbox-label text-theme-700 hover:text-theme-500">
       <template v-if="slots.default"> <slot /></template>
       <template v-else>{{ text }}</template>
     </span>
@@ -43,12 +41,12 @@ const handleEmit = (target: EventTarget | null): void => {
 const classes = [
   "form-checkbox",
   "cursor-pointer",
-  "mt-0.5",
-  "mr-4",
-  "h-5",
-  "w-5",
+  "mt-[.1em]",
+  "mr-[.8em]",
+  "h-[.9em]",
+  "w-[.9em]",
   "appearance-none",
-  "rounded-md",
+  "rounded-[.25em]",
   "border",
   "focus:outline-none",
   "focus:ring-0",

@factor/ui/InputCheckboxMulti.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="my-4">
+  <div class="text-input-size my-4">
     <div v-if="li.length == 0" class="text-input-placeholder">No Items</div>
     <div v-for="(item, i) of li" v-else :key="i" class="my-2">
       <label class="inline-flex cursor-pointer items-center">
@@ -10,7 +10,7 @@
           :checked="isSelected(item.value)"
           @input="selectValue(item)"
         />
-        <span class="checkbox-label text-input-size text-theme-700 select-none">
+        <span class="checkbox-label text-theme-700 select-none">
           {{ item.name }}
         </span>
       </label>
@@ -77,11 +77,11 @@ const selectValue = (item: ListItem): void => {
 
 const classes = [
   "form-checkbox",
-  "mr-4",
-  "h-5",
-  "w-5",
+  "mr-[.8em]",
+  "h-[.9em]",
+  "w-[.9em]",
   "appearance-none",
-  "rounded-md",
+  "rounded-[.25em]",
   "border",
   "focus:outline-none",
   "focus:ring-0",

@factor/ui/InputColor.vue

@@ -0,0 +1,63 @@
+<template>
+  <label class="text-input-size inline-flex cursor-pointer items-center">
+    <div
+      class="wrap"
+      :style="{ background: modelValue || `#dfdfdf` }"
+      :class="classes"
+    >
+      <input
+        v-bind="attrs"
+        type="color"
+        class="h-[2em] w-[2em] cursor-pointer opacity-0"
+        :value="modelValue"
+        @input="handleEmit($event.target)"
+      />
+    </div>
+
+    <span class="text-theme-700 hover:text-theme-500">
+      {{ modelValue || "Select Color" }}
+    </span>
+  </label>
+</template>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { vue } from "@factor/api"
+
+defineProps({
+  modelValue: { type: String, default: "" },
+})
+const emit = defineEmits<{
+  (event: "update:modelValue", payload: string): void
+}>()
+
+const attrs = vue.useAttrs()
+const handleEmit = (target: EventTarget | null): void => {
+  const el = target as HTMLInputElement
+  emit("update:modelValue", el.value)
+}
+
+const classes = [
+  "f-color-picker",
+  "cursor-pointer",
+  "mt-0.5",
+  "mr-[.9em]",
+  "rounded-full",
+  "active:opacity-75",
+  "ring-2",
+  "ring-white",
+  "flex",
+]
+</script>
+<style lang="less">
+.f-color-picker::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+.f-color-picker::-webkit-color-swatch {
+  border: none;
+}
+</style>

@factor/ui/InputElBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="text-theme-400 hover:text-theme-500 max-w-[50px] grow cursor-pointer select-none"
+    class="text-theme-400 hover:text-theme-500 text-input-size max-w-[5em] grow cursor-pointer select-none"
   >
     <div
       class="hover:bg-theme-200 hover:border-theme-400 flex aspect-square items-center justify-center rounded-md border p-1"
@@ -17,14 +17,14 @@
         <div
           class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
         >
-          <div v-if="icon" class="text-3xl" :class="icon"></div>
-          <div v-else class="text-lg font-bold">{{ label }}</div>
+          <div v-if="icon" class="text-[1.8em]" :class="icon"></div>
+          <div v-else class="text-[1.3em] font-bold">{{ label }}</div>
         </div>
       </div>
     </div>
     <div
       v-if="icon"
-      class="mt-1 text-center text-xs"
+      class="mt-1 text-center text-[.9em]"
       :class="selected ? 'text-theme-500' : ' '"
     >
       {{ String(label) || "No Label" }}