More button templates

src/fontawesome.ts

@@ -18,6 +18,7 @@ import {
   faLanguage,
   faPen,
   faPersonRunning,
+  faPlus,
   faRightToBracket,
   faRotate,
   faTriangleExclamation,
@@ -37,6 +38,7 @@ library.add(
   faLightbulb,
   faPen,
   faPersonRunning,
+  faPlus,
   faRightToBracket,
   faRotate,
   faSquareMinus,

src/schema-form/JsonSchemaForm.vue

@@ -93,19 +93,4 @@ function onError(errors: Error[]) {
 ::v-deep(input[type="checkbox"], input[type="radio"]) {
   @apply mr-2;
 }
-::v-deep(.btn) {
-  @apply mink-button;
-}
-::v-deep(.btn-danger) {
-  @apply button-danger;
-}
-::v-deep(.array-item-remove::before) {
-  content: "–";
-}
-::v-deep(.array-item-move-up::before) {
-  content: "↑";
-}
-::v-deep(.array-item-move-down::before) {
-  content: "↓";
-}
 </style>

src/schema-form/theme/AddButton.vue

@@ -1,13 +1,9 @@
 <script setup lang="ts">
 import ActionButton from "@/components/ActionButton.vue";
-
-defineProps<{
-  disabled?: boolean;
-  onClick: () => {};
-}>();
 </script>
 
 <template>
-  <!-- eslint-disable -->
-  <ActionButton :disabled @click="onClick">+</ActionButton>
+  <ActionButton v-bind="$props">
+    <icon icon="plus" />
+  </ActionButton>
 </template>

src/schema-form/theme/MoveDownButton.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import ActionButton from "@/components/ActionButton.vue";
+</script>
+
+<template>
+  <ActionButton v-bind="$props">
+    <icon :icon="['fas', 'angles-down']" />
+  </ActionButton>
+</template>

src/schema-form/theme/MoveUpButton.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import ActionButton from "@/components/ActionButton.vue";
+</script>
+
+<template>
+  <ActionButton v-bind="$props">
+    <icon :icon="['fas', 'angles-up']" />
+  </ActionButton>
+</template>

src/schema-form/theme/RemoveButton.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import ActionButton from "@/components/ActionButton.vue";
+</script>
+
+<template>
+  <ActionButton v-bind="$props">
+    <icon :icon="['far', 'trash-can']" />
+  </ActionButton>
+</template>

src/schema-form/theme/form-theme.ts

@@ -1,13 +1,16 @@
 import React from "react";
 import { applyPureVueInReact } from "veaury";
-import type { ThemeProps } from "@rjsf/core";
+import type { FormProps, ThemeProps } from "@rjsf/core";
 import type {
   FieldProps,
   IconButtonProps,
   RegistryFieldsType,
 } from "@rjsf/utils";
 import type { Component } from "vue";
 import AddButtonVue from "./AddButton.vue";
+import RemoveButtonVue from "./RemoveButton.vue";
+import MoveUpButtonVue from "./MoveUpButton.vue";
+import MoveDownButtonVue from "./MoveDownButton.vue";
 
 // Rename and retype the Veaury converter to allow specifying return type better.
 const toReact = <P = {}>(component: Component) =>
@@ -30,9 +33,12 @@ class MyField extends React.Component<FieldProps> {
 
 const fields: RegistryFieldsType = { BooleanField: MyField };
 
-const templates = {
+const templates: FormProps["templates"] = {
   ButtonTemplates: {
     AddButton: toReact<IconButtonProps>(AddButtonVue),
+    RemoveButton: toReact<IconButtonProps>(RemoveButtonVue),
+    MoveUpButton: toReact<IconButtonProps>(MoveUpButtonVue),
+    MoveDownButton: toReact<IconButtonProps>(MoveDownButtonVue),
   },
 };