Merge pull request #18 from Sapiens-OSS/number

added missing schema types

app.vue

@@ -10,9 +10,12 @@ import { LoadLocalStorage } from "./scripts/localStorage";
 import { LoadDummyStorage } from "./scripts/dummy";
 import { LoadIndexedDBSource } from "./scripts/indexeddb";
 
+const runtimeConfig = useRuntimeConfig();
+
 useHead({
   titleTemplate: (title) =>
     title ? `${title} | Sapiens Web Builder` : `Sapiens Web Builder`,
+  link: [{ rel: "icon", href: `${runtimeConfig.app.baseURL}favicon.ico` }],
 });
 
 // LoadDummyStorage();

components/SchemaArray.vue

@@ -1,6 +1,5 @@
 <template>
-  <div v-if="props.schema?.enum">
-  </div>
+  <div v-if="props.schema?.enum"></div>
   <div v-else>
     <div class="border-b border-zinc-700 pb-1">
       <div
@@ -17,6 +16,7 @@
         <div class="ml-4 mt-4 flex-shrink-0">
           <button
             @click="() => model.push(null)"
+            v-if="allowedAdd"
             type="button"
             class="relative inline-flex items-center rounded-md bg-orange-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600"
           >
@@ -37,6 +37,7 @@
             deleteAction: () => {
               model.splice(itemIdx, 1);
             },
+            allowedDelete: () => allowedRemove,
           }"
         />
       </div>
@@ -45,7 +46,6 @@
 </template>
 
 <script setup lang="ts">
-import { TrashIcon } from "@heroicons/vue/20/solid";
 import calculateSchemaTitle from "~/scripts/utils/calculateSchemaTitle";
 
 const props = defineProps<{
@@ -63,10 +63,22 @@ const model = computed({
   },
 });
 
-// This is NOT instantaneous, so everything that depends on this value in the setup needs to work with this being null
-model.value ??= [];
-
 const properties = computed(
   () => props.schema.properties ?? props.schema.items
 );
+
+const minimum = computed(() => props.schema.min ?? props.schema.minimum);
+const maximum = computed(() => props.schema.max ?? props.schema.maximum);
+
+// This is NOT instantaneous, so everything that depends on this value in the setup needs to work with this being null
+model.value ??= Array.apply(null, Array(minimum.value ?? 0)).map(
+  function () {}
+);
+
+const allowedRemove = computed(() =>
+  minimum.value != null ? model.value?.length > minimum.value : true
+);
+const allowedAdd = computed(() =>
+  maximum.value != null ? model.value?.length < minimum.value : true
+);
 </script>

components/SchemaBoolean.vue

@@ -0,0 +1,57 @@
+<template>
+  <SwitchGroup as="div" class="flex items-center justify-between">
+    <span class="flex flex-grow flex-col">
+      <SwitchLabel
+        as="span"
+        class="text-sm font-medium leading-6 text-zinc-100"
+        passive
+        >{{ calculateSchemaTitle(props.schema) }}</SwitchLabel
+      >
+      <SwitchDescription as="span" class="text-sm text-zinc-400"
+        >{{ props.schema.description ?? "No description provided." }}</SwitchDescription
+      >
+    </span>
+    <Switch
+      v-model="model"
+      :class="[
+        model ? 'bg-orange-600' : 'bg-zinc-800',
+        'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-orange-600 focus:ring-offset-2',
+      ]"
+    >
+      <span
+        aria-hidden="true"
+        :class="[
+          model ? 'translate-x-5' : 'translate-x-0',
+          'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+        ]"
+      />
+    </Switch>
+  </SwitchGroup>
+</template>
+
+<script setup lang="ts">
+import {
+  Switch,
+  SwitchDescription,
+  SwitchGroup,
+  SwitchLabel,
+} from "@headlessui/vue";
+import calculateSchemaTitle from "~/scripts/utils/calculateSchemaTitle";
+
+const props = defineProps<{
+  schema: any;
+  modelValue: any;
+}>();
+const emit = defineEmits(["update:modelValue"]);
+
+const model = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit("update:modelValue", value);
+  },
+});
+
+model.value ??= props.schema.default ?? false;
+</script>

components/SchemaNumber.vue

@@ -9,7 +9,10 @@
       >{{ calculateSchemaTitle(props.schema) }}
 
       <button
-        v-if="props.elementConfig?.deleteAction"
+        v-if="
+          props.elementConfig?.deleteAction &&
+          props.elementConfig?.allowedDelete()
+        "
         @click="props.elementConfig?.deleteAction"
         type="button"
         class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
@@ -26,6 +29,9 @@
         class="block w-full rounded-md bg-zinc-800/40 border-0 py-1.5 text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-orange-600 sm:text-sm sm:leading-6"
         :placeholder="'0'"
         :aria-describedby="`${componentID}-desc`"
+        :max="maximum"
+        :min="minimum"
+        :step="bump"
         v-model="model"
       />
     </div>
@@ -66,5 +72,14 @@ const model = computed({
 
 model.value ??= props.schema.default ?? 0;
 
+const minimum = computed(() => props.schema.min ?? props.schema.minimum);
+const maximum = computed(() => props.schema.max ?? props.schema.maximum);
+const bump = computed(() => {
+  if (minimum.value != null && maximum.value != null) {
+    return (maximum.value - minimum.value) / 100;
+  }
+  return 1;
+});
+
 const componentID = crypto.randomUUID();
 </script>

components/SchemaObject.vue

@@ -13,7 +13,10 @@
         </span>
       </DisclosureButton>
       <button
-        v-if="props.elementConfig?.deleteAction"
+        v-if="
+          props.elementConfig?.deleteAction &&
+          props.elementConfig?.allowedDelete()
+        "
         @click="props.elementConfig.deleteAction"
         type="button"
         class="bg-red-600 p-2 text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"

components/SchemaSelector.vue

@@ -14,6 +14,7 @@ import SchemaNotFound from "./SchemaNotFound.vue";
 import SchemaArray from "./SchemaArray.vue";
 import SchemaString from "./SchemaString.vue";
 import SchemaNumber from "./SchemaNumber.vue";
+import SchemaBoolean from "./SchemaBoolean.vue";
 
 const props = defineProps<{
   schema: Schema;
@@ -26,7 +27,9 @@ const emit = defineEmits(["update:modelValue"]);
 type SchemaEditor =
   | typeof SchemaObject
   | typeof SchemaArray
-  | typeof SchemaString;
+  | typeof SchemaString
+  | typeof SchemaNumber
+  | typeof SchemaBoolean;
 
 const model = computed({
   get() {
@@ -42,7 +45,10 @@ const objects: { [key: string]: any } = {
   object: SchemaObject,
   array: SchemaArray,
   string: SchemaString,
-  integer: SchemaNumber
+  number: SchemaNumber,
+  integer: SchemaNumber,
+  boolean: SchemaBoolean,
+
 };
 
 const figureOutComponentType: (schema: any) => SchemaEditor | null = (

components/SchemaString.vue

@@ -22,7 +22,10 @@
 
           <span>
             <TrashIcon
-              v-if="props.elementConfig?.deleteAction"
+              v-if="
+                props.elementConfig?.deleteAction &&
+                props.elementConfig?.allowedDelete()
+              "
               @click="props.elementConfig?.deleteAction"
               class="aspect-square cursor-pointer h-9 p-2 bg-red-600"
             />

layouts/default.vue

@@ -159,7 +159,8 @@
           </a>
         </div>
         <p class="mt-4 text-center text-xs leading-5 text-gray-500">
-          &copy; 2023 Sapiens Modding Community. All rights reserved.
+          &copy; {{ new Date().getFullYear() }} Sapiens Modding Community. All
+          rights reserved.
         </p>
       </div>
     </footer>
@@ -179,7 +180,6 @@ import { ArrowRightIcon } from "@heroicons/vue/20/solid";
 
 const navigation = [
   { name: "About", href: "/about" },
-  { name: "Docs", href: "/docs" },
   { name: "Community", href: "/community" },
 ];
 

nuxt.config.ts

@@ -9,16 +9,8 @@ export default defineNuxtConfig({
     },
   },
 
-  modules: ["@nuxt/content"],
-
-  content: {},
-
-  app: {
-    head: {
-      link: [{ rel: "icon", href: "/favicon.ico" }],
-    },
-  },
-
+  modules: [],
+
   // Run as a client-only app
   ssr: false,
 });

pages/community.vue

@@ -21,7 +21,8 @@
           </p>
           <div class="mt-10 flex">
             <a
-              href="#"
+              href="https://discord.gg/WnN8hj2Fyg"
+              target="_blank"
               class="rounded-md bg-orange-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600"
               >Join the Discord <span aria-hidden="true">&rarr;</span></a
             >