@tsed/tailwind-formio 2.3.6 → 3.0.0-alpha.10

package/src/templates/stories/__fixtures__/useEditForm.jsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from "react";
+
+function useFetch(url, opts) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  function fetchData() {
+    fetch(url, opts)
+      .then((res) => res.json())
+      .then((data) => {
+        setData(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err);
+        setLoading(false);
+      });
+  }
+
+  useEffect(() => {
+    fetchData();
+  }, [url, opts.method]);
+
+  return { data, loading, error, fetchData };
+}
+
+async function updateSubmission(model, submissionId, submission) {
+  const response = await fetch(`https://local.dev/form/${model}/submissions/${submissionId}`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json"
+    },
+    body: JSON.stringify(submission)
+  });
+
+  const data = await response.json();
+
+  if (!response.ok) {
+    const error = new Error("Update submission failed");
+    error.errors = [data];
+    throw error;
+  }
+
+  return data;
+}
+
+export function useEditForm({ model, submissionId }) {
+  const form = useFetch(`https://local.dev/form/${model}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json"
+    }
+  });
+
+  const submission = useFetch(`https://local.dev/form/${model}/submissions/${submissionId}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json"
+    }
+  });
+
+  function onSubmit(submission) {
+    return updateSubmission(model, submissionId, submission.data).then((data) => {
+      return {
+        ...submission,
+        data
+      };
+    });
+  }
+
+  return {
+    form: form.data,
+    data: submission.data,
+    loading: form.loading || submission.loading,
+    error: form.error || submission.error,
+    onSubmit
+  };
+}

package/src/templates/stories/breadcrumbs.stories.jsx

@@ -1,6 +1,7 @@
-import { COLORS_LIST } from "@tsed/tailwind/colors";
 import React from "react";
 
+import { COLORS_LIST } from "../../tailwind/colors.ts";
+
 export default {
   title: "Formiojs/Breadcrumbs",
   argTypes: {

package/src/templates/tailwind/address/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/alert/index.ts

@@ -0,0 +1,3 @@
+import form from "./form.ejs";
+
+export default { form };

package/src/templates/tailwind/builder/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/builderComponent/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/builderComponents/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/builderEditForm/form.ejs

@@ -47,14 +47,16 @@
   </div>
   <div class="bg-white p-2 flex justify-center">
     <button class="btn btn-primary mx-2" ref="saveButton">
+      <i class="{{ctx.iconClass('save')}} mr-2"></i>
       {{ctx.t('Save')}}
     </button>
     <button class="btn btn-dark mx-2" ref="cancelButton">
+      <i class="{{ctx.iconClass('x')}} mr-2"></i>
       {{ctx.t('Cancel')}}
     </button>
     <button class="btn btn-danger mx-2" ref="removeButton">
-      <i class="{{ctx.iconClass('remove')}} sm:mr-2"></i>
-      <span class="hidden sm:inline">{{ctx.t('Remove')}}</span>
+      <i class="{{ctx.iconClass('remove')}} mr-2"></i>
+      {{ctx.t('Remove')}}
     </button>
   </div>
 </div>

package/src/templates/tailwind/builderEditForm/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/builderPlaceholder/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/builderSidebar/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/builderSidebarGroup/form.ejs

@@ -17,7 +17,7 @@
   </div>
   <div
     id="group-{{ctx.groupKey}}"
-    class="collapse {{ctx.group.default ? ' show' : ''}}"
+    class="{{ctx.group.default ? ' show' : ''}}"
     data-parent="#{{ctx.groupId}}"
     data-default="{{ctx.group.default}}"
     aria-labelledby="heading-{{ctx.groupKey}}"

package/src/templates/tailwind/builderSidebarGroup/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/builderWizard/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/button/index.ts

@@ -1,4 +1,4 @@
-import form from "./form.ejs.js";
-import html from "./html.ejs.js";
+import form from "./form.ejs";
+import html from "./html.ejs";
 
 export default { form, html };

package/src/templates/tailwind/checkbox/index.ts

@@ -1,4 +1,4 @@
-import form from "./form.ejs.js";
-import html from "./html.ejs.js";
+import form from "./form.ejs";
+import html from "./html.ejs";
 
 export default { form, html };

package/src/templates/tailwind/columns/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/component/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/componentModal/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/components/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/container/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/datagrid/index.ts

@@ -1,4 +1,4 @@
-import form from "./form.ejs.js";
-import html from "./html.ejs.js";
+import form from "./form.ejs";
+import html from "./html.ejs";
 
 export default { form, html };

package/src/templates/tailwind/day/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/dialog/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/editgrid/index.ts

@@ -1,4 +1,4 @@
-import form from "./form.ejs.js";
-import html from "./html.ejs.js";
+import form from "./form.ejs";
+import html from "./html.ejs";
 
 export default { form, html };

package/src/templates/tailwind/editgridTable/index.ts

@@ -1,4 +1,4 @@
-import form from "./form.ejs.js";
-import html from "./html.ejs.js";
+import form from "./form.ejs";
+import html from "./html.ejs";
 
 export default { form, html };

package/src/templates/tailwind/errorsList/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/field/index.ts

@@ -1,4 +1,4 @@
-import align from "./align.ejs.js";
-import form from "./form.ejs.js";
+import align from "./align.ejs";
+import form from "./form.ejs";
 
 export default { form, align };

package/src/templates/tailwind/fieldset/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/file/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/html/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/icon/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/input/index.ts

@@ -1,4 +1,4 @@
-import form from "./form.ejs.js";
-import html from "./html.ejs.js";
+import form from "./form.ejs";
+import html from "./html.ejs";
 
 export default { form, html };

package/src/templates/tailwind/label/index.ts

@@ -1,2 +1,2 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 export default { form };

package/src/templates/tailwind/loader/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/loading/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/map/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/message/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/modalPreview/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/modaldialog/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/modaledit/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/multiValueRow/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/multiValueTable/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/multipleMasksInput/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/panel/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/pdf/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/pdfBuilder/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/pdfBuilderUpload/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/radio/index.ts

@@ -1,4 +1,4 @@
-import form from "./form.ejs.js";
-import html from "./html.ejs.js";
+import form from "./form.ejs";
+import html from "./html.ejs";
 
 export default { form, html };

package/src/templates/tailwind/resourceAdd/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/select/index.ts

@@ -1,4 +1,4 @@
-import form from "./form.ejs.js";
-import html from "./html.ejs.js";
+import form from "./form.ejs";
+import html from "./html.ejs";
 
 export default { form, html };

package/src/templates/tailwind/selectOption/index.ts

@@ -1,4 +1,4 @@
-import form from "./form.ejs.js";
-import html from "./html.ejs.js";
+import form from "./form.ejs";
+import html from "./html.ejs";
 
 export default { form, html };

package/src/templates/tailwind/signature/index.ts

@@ -1,4 +1,4 @@
-import form from "./form.ejs.js";
-import html from "./html.ejs.js";
+import form from "./form.ejs";
+import html from "./html.ejs";
 
 export default { form, html };

package/src/templates/tailwind/survey/index.ts

@@ -1,4 +1,4 @@
-import form from "./form.ejs.js";
-import html from "./html.ejs.js";
+import form from "./form.ejs";
+import html from "./html.ejs";
 
 export default { form, html };

package/src/templates/tailwind/tab/index.ts

@@ -1,4 +1,4 @@
-import flat from "./flat.ejs.js";
-import form from "./form.ejs.js";
+import flat from "./flat.ejs";
+import form from "./form.ejs";
 
 export default { flat, form };

package/src/templates/tailwind/table/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/tableComponents/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/tree/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/tree/partials/index.ts

@@ -1,5 +1,5 @@
-import edit from "./edit.ejs.js";
-import view from "./view.ejs.js";
+import edit from "./edit.ejs";
+import view from "./view.ejs";
 
 export default {
   treeView: {

package/src/templates/tailwind/webform/index.ts

@@ -1,4 +1,4 @@
-import builder from "./builder.ejs.js";
-import form from "./form.ejs.js";
+import builder from "./builder.ejs";
+import form from "./form.ejs";
 
 export default { form, builder };

package/src/templates/tailwind/well/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/wizard/index.ts

@@ -1,3 +1,3 @@
-import builder from "./builder.ejs.js";
-import form from "./form.ejs.js";
+import builder from "./builder.ejs";
+import form from "./form.ejs";
 export default { form, builder };

package/src/templates/tailwind/wizardHeader/index.ts

@@ -1,2 +1,2 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 export default { form };

package/src/templates/tailwind/wizardHeaderClassic/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/wizardHeaderVertical/index.ts

@@ -1,3 +1,3 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 
 export default { form };

package/src/templates/tailwind/wizardNav/index.ts

@@ -1,2 +1,2 @@
-import form from "./form.ejs.js";
+import form from "./form.ejs";
 export default { form };

package/styles/badge.css

@@ -4,7 +4,7 @@ Requires one of the contextual, color modifier classes for `color` and
  */
 
 .badge {
-  @apply inline-flex  py-px px-1.5 font-bold text-center whitespace-nowrap items-center rounded transition-colors;
+  @apply inline-flex px-1.5 font-bold text-center whitespace-nowrap items-center rounded transition-colors;
   font-size: 75%;
 
   &:empty {
@@ -17,8 +17,8 @@ Requires one of the contextual, color modifier classes for `color` and
 }
 
 a .badge {
-  &:hover, &:focus {
-    @apply no-underline
+  &:hover, &:focus, &:active {
+    @apply no-underline text-white;
   }
 }
 
@@ -46,7 +46,7 @@ a .badge.bg-primary, .badge-hover.bg-primary {
 
 a .badge.bg-secondary, .badge-hover.bg-secondary {
   &:hover, &:focus {
-    @apply hover:text-white hover:bg-secondary-800 focus:bg-secondary-800 hover:border-secondary-800 focus:border-secondary-800 focus:text-secondary-800;
+    @apply hover:text-white hover:bg-secondary-800 focus:bg-secondary-800 hover:border-secondary-800 focus:border-secondary-800;
   }
 }