@tsed/tailwind-formio 3.0.0-alpha.1 → 3.0.0-alpha.11

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/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;
   }
 }
 

package/styles/choices.css

@@ -153,6 +153,7 @@
       }
     }
   }
+
   &[data-type=select-multiple] {
     &:after {
       @apply h-0 w-0 border-solid absolute border-0 h-full top-0 m-0 right-1.5;
@@ -168,14 +169,16 @@
       @apply pb-0;
     }
   }
-}
 
-.choices__list--multiple .choices__item {
-  @apply rounded-sm;
+  .choices__list--multiple .choices__item {
+    @apply rounded-md bg-primary border-0 text-xs py-1 px-2;
+    font-weight: 600;
+  }
 }
 
-.is-open .choices__inner , .is-flipped.is-open .choices__inner {
-  @apply rounded-md rounded-b-none;
+
+.is-open .choices__inner, .is-flipped.is-open .choices__inner {
+  @apply rounded-md;
 }
 
 .choices__list {
@@ -188,7 +191,8 @@
     .choices__item {
       @apply w-full;
     }
-    .choices__item.choices__item--selectable{
+
+    .choices__item.choices__item--selectable {
       margin-bottom: -0.375rem;
     }
   }
@@ -201,12 +205,13 @@
     }
 
     .choices__item {
-      @apply inline-block align-middle rounded py-1 px-2.5 text-xs font-semibold mr-1 mb-1 bg-primary-500 border-1 border-solid border-primary-600 text-white ;
+      @apply inline-flex align-middle rounded py-1 px-2.5 text-xs font-semibold mr-1 mb-1 bg-primary-500 border-1 border-solid border-primary-600 text-white ;
       word-break: break-all;
       box-sizing: border-box;
 
       &.is-highlighted {
         @apply bg-secondary-500 border-secondary-600;
+
         .choices__button {
           @apply border-secondary-600;
         }
@@ -214,8 +219,8 @@
     }
   }
 
-  &--dropdown {
-    @apply invisible absolute z-5 w-full bg-white border-1 border-solid border-gray-300 rounded overflow-hidden break-all top-full;
+  &--dropdown[aria-expanded=true] {
+    @apply invisible absolute z-5 w-full bg-white border-1 border-solid border-gray-300 rounded-md overflow-hidden break-all top-full;
     will-change: visibility;
 
     &.is-active {
@@ -310,7 +315,6 @@
   }
 }
 
-
 .choices__heading {
   @apply font-semibold p-2.5 border-solid border-gray-200 text-gray-600;
   font-size: inherit;
@@ -337,3 +341,34 @@
 .choices__placeholder {
   @apply opacity-50;
 }
+
+/**
+ * Choices Size rendering
+ */
+.form-group.-size-small {
+  .choices {
+    .choices__inner {
+      @apply px-2;
+      padding-top: 3px;
+      min-height: 32px;
+      font-size: 14px;
+    }
+
+    &[data-type*=select-one] .choices__inner {
+      padding-bottom: 1px;
+    }
+
+    .choices__list--multiple .choices__item {
+      @apply py-0.5 px-1 text-xs;
+      margin-bottom: 3px;
+    }
+
+    .choices__input {
+      margin-bottom: 1px;
+    }
+    &[data-type*=select-multiple] .choices__button,
+    &[data-type*=text] .choices__button{
+      margin: 0 -2px 0 6px;
+    }
+  }
+}

package/styles/form-edit.css

@@ -1,17 +1,16 @@
+.form-edit-container {
+  @apply flex flex-col space-y-5;
+}
+
 .form-edit {
-  @apply border-b-1 border-solid border-gray-200 sm:flex mb-5;
+  @apply flex space-y-5 space-x-5 pb-5;
+  @apply border-b-1 border-solid border-gray-200;
 
   &__settings {
-    @apply flex-1 flex flex-wrap -mx-2;
-
+    @apply flex-1 grid grid-cols-3 gap-5;
     > div {
       > .form-group {
-        @apply pb-0 px-2 w-full sm:w-auto;
-        min-width: 25%;
-
-        &:last-child {
-          @apply mb-5;
-        }
+        @apply pb-0 w-full sm:w-auto;
 
         .form-text {
           @apply p-0 h-0 -mb-1;
@@ -21,24 +20,17 @@
   }
 
   &__actions {
-    @apply flex flex-col justify-end mb-2;
+    @apply flex flex-col justify-center;
+
     .btn-save {
-     @apply mb-4 leading-normal;
+     @apply leading-normal;
     }
 
     > div {
-      @apply flex flex-col pl-5;
-
-      > * {
-        @apply mb-3;
-      }
+      @apply flex flex-col space-y-5;
 
       > div {
-        @apply flex flex-row -mx-2;
-
-        > * {
-          @apply mx-2;
-        }
+        @apply flex flex-row space-x-3;
       }
     }
   }

package/styles/form.css

@@ -23,14 +23,19 @@
   @apply mb-5;
 }
 
+
 .form-control {
   @apply appearance-none bg-white leading-normal px-3 py-2 block w-full rounded-md border-1 border-gray-300 shadow-sm;
+}
 
-  &.form-control-sm {
+.form-group.-size-small {
+  .form-control {
     @apply px-2 py-1 text-sm;
+    min-height: 32px;
   }
 }
 
+
 .form-control:disabled, .form-control[readonly] {
   @apply bg-gray-200 border-transparent shadow-none;
 }
@@ -148,7 +153,7 @@ textarea.form-control {
 }
 
 .field-required:after {
-  @apply z-1 ml-1;
+  @apply z-0 ml-1;
 }
 
 .formio-component hr,

package/styles/index.css

@@ -5,6 +5,7 @@
 @import "card.css";
 @import "form.css";
 @import "choices.css";
+@import "react-select.css";
 @import "input-group.css";
 @import "checkbox.css";
 @import "tooltip.css";

package/styles/react-select.css

@@ -0,0 +1,105 @@
+
+.react-select-container {
+  display: block;
+  flex: 1;
+
+  .react-select__control {
+    @apply appearance-none bg-white leading-normal w-full rounded-md border-1 border-gray-300;
+
+    &--is-focused {
+      @apply outline-none border-primary-300 ring ring-primary-50 ring-opacity-50;
+      outline-offset: theme('outline.none[1]');
+      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+      border-color: theme('colors.blue.600');
+    }
+  }
+
+  .react-select__multi-value {
+    @apply bg-primary-600 text-white rounded-md;
+
+    &__label {
+      @apply text-white text-xs py-1 px-2;
+      font-weight: 600;
+    }
+
+    &__remove {
+      @apply opacity-80;
+
+      &:hover {
+        @apply bg-transparent text-white opacity-100;
+      }
+    }
+  }
+
+  .react-select__value-container.react-select__value-container--is-multi {
+    @apply px-2 py-1;
+  }
+}
+
+.form-group.-with-before {
+  .react-select-container .react-select__control {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.form-group.-with-after {
+  .react-select-container .react-select__control {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+/**
+ * React Select size rendering
+ */
+.form-group.-size-small {
+  .react-select-container {
+    .react-select__control {
+      min-height: 28px;
+    }
+
+    .react-select__value-container {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .react-select__indicator {
+      padding: 3px;
+    }
+
+    .react-select__multi-value {
+      &__label {
+        @apply text-white text-xs py-0.5 px-1;
+        font-weight: 600;
+      }
+
+      &__remove {
+        @apply opacity-80;
+
+        &:hover {
+          @apply bg-transparent text-white opacity-100;
+        }
+      }
+    }
+
+    .react-select__input-container {
+      margin-top: 1px;
+      margin-bottom: 1px;
+    }
+
+    .react-select__placeholder {
+      @apply text-gray-500;
+    }
+
+    .react-select__option,
+    .react-select__placeholder,
+    .react-select__single-value {
+      @apply text-sm;
+    }
+
+    .react-select__value-container.react-select__value-container--is-multi {
+      @apply px-1 py-0;
+    }
+  }
+}

package/styles/tables.css

@@ -5,7 +5,7 @@
 
   th,
   td {
-    @apply p-3 align-top text-left border-t-1 border-solid border-gray-300;
+    @apply p-3 align-top text-left border-t-1 border-solid border-gray-300 dark:border-gray-700;
 
     &.align-middle {
       vertical-align: middle;
@@ -17,23 +17,30 @@
   }
 
   thead th {
-    @apply border-b-2 border-solid border-gray-300;
+    @apply border-b-2 border-solid border-gray-300 dark:border-gray-700;
     border-style: solid;
   }
 
   tbody + tbody {
-    @apply border-t-2 border-solid border-gray-300;
+    @apply border-t-2 border-solid border-gray-300 dark:border-gray-700;
     border-style: solid;
   }
 }
 
 .table-cell-header {
+  @apply flex flex-col space-y-2;
   &__label {
-    @apply flex;
+    @apply flex items-center justify-center;
+
     > span:first-child {
       @apply flex-1;
     }
   }
+
+  &__sort {
+    @apply flex items-center justify-center;
+  }
+
   &__filter {
     @apply mt-1;
   }
@@ -51,11 +58,11 @@
 /* Border versions - Add or remove borders all around the table and between all the columns. */
 
 .table-bordered {
-  @apply border-1 border-solid border-gray-300;
+  @apply border-1 border-solid border-gray-300 dark:border-gray-700;
 
   th,
   td {
-    @apply border-1 border-solid border-gray-300;
+    @apply border-1 border-solid border-gray-300 dark:border-gray-700;
   }
 
   thead {
@@ -79,7 +86,7 @@
 
 .table-striped {
   tbody tr:nth-of-type(odd) {
-    @apply bg-gray-100;
+    @apply bg-gray-100 dark:bg-gray-800;
   }
 }
 
@@ -87,69 +94,29 @@
 
 .table-hover {
   tbody tr {
-    @apply hover:text-gray-900 hover:bg-gray-200;
+    @apply hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-100;
   }
 }
 
 .table-group {
-  @apply border-1 border-gray-300;
+  @apply border-1 border-gray-300 dark:border-gray-700;
+
+  &.border-top-0 {
+    @apply border-t-0;
+  }
+
   .table {
     @apply border-t-0 mb-0;
     thead th {
       @apply border-t-0;
     }
   }
+
   .pagination-group {
-    @apply border-t-1 border-gray-300 p-3;
+    @apply border-t-1 border-gray-300 dark:border-gray-700 p-3;
   }
 }
-/*
-// Dark styles
-//
-// Same table markup, but inverted color scheme: dark background and light text.
-
-// stylelint-disable-next-line no-duplicate-selectors
-//.table {
-//  .thead-dark {
-//    th {
-//      color: $table-dark-color;
-//      background-color: $table-dark-bg;
-//      border-color: $table-dark-border-color;
-//    }
-//  }
-//
-//  .thead-light {
-//    th {
-//      color: $table-head-color;
-//      background-color: $table-head-bg;
-//      border-color: $table-border-color;
-//    }
-//  }
-//}*/
-/*
-// Responsive tables
-//
-// Generate series of `.table-responsive-*` classes for configuring the screen
-// size of where your table will overflow.
 
 .table-responsive {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($next, $grid-breakpoints);
-
-    &#{$infix} {
-      @include media-breakpoint-down($breakpoint) {
-        display: block;
-        width: 100%;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-
-        // Prevent double border on horizontal scroll due to use of `display: block;`
-        > .table-bordered {
-          border: 0;
-        }
-      }
-    }
-  }
+  @apply block w-full overflow-x-auto;
 }
-*/

package/styles/tabs.css

@@ -1,63 +1,81 @@
 .tw-tabs {
-  &__header {
-    @apply overflow-auto;
+    &__header {
+        @apply overflow-auto;
 
-    &-wrapper {
-      @apply relative flex items-center pt-1 px-1;
-    }
-    &-border {
-      @apply  border-b-1 border-gray-300 absolute bottom-0 left-0 right-0 z-1;
-    }
-  }
+        &-wrapper{
+            @apply relative flex items-center pt-1 gap-1;
 
-  &__button {
-    @apply flex items-center border-1 border-b-0 border-gray-300 relative outline-none focus:outline-none bg-gray-100 text-gray-700 hover:text-secondary focus:text-secondary px-4 py-2;
+            > [role="tablist"] {
+                @apply relative flex items-center gap-1;
+            }
+        }
 
-    &-label {
-      @apply text-sm whitespace-nowrap;
-    }
-    &-icon {
-      @apply mr-2 -ml-1 -mt-px;
-    }
+        .btn {
+            @apply px-3;
+        }
 
-    &-border {
-      @apply border-transparent z-1 absolute top-0 right-0 left-0 border-t-2;
-      &.-active {
-        @apply border-primary;
-      }
-    }
-    &-wrapper {
-      @apply relative  mr-1;
-
-      &:last-child{
-        @apply mr-0;
-      }
-
-      &.-active {
-        @apply z-2;
-      }
-      &.-back{
-        @apply -ml-2 mr-0;
-      }
+        &-border {
+            @apply border-b-1 border-gray-300 absolute bottom-0 left-0 right-0 z-1;
+        }
     }
 
-    &.-active {
-      @apply text-primary bg-white;
+    &__button {
+        @apply flex items-center border-1 border-b-0 border-gray-300 relative outline-none focus:outline-none bg-gray-100 text-gray-700 hover:text-secondary focus:text-secondary px-4 py-2;
+
+        &-label {
+            @apply text-sm whitespace-nowrap;
+        }
+
+        &-icon {
+            @apply mr-2 -ml-1 -mt-px;
+        }
+
+        &-border {
+            @apply border-transparent z-1 absolute top-0 right-0 left-0 border-t-2;
+        }
+
+        &-wrapper {
+            @apply relative ;
+
+            &.-active {
+                @apply z-2;
+
+                .tw-tabs__button {
+                    @apply text-primary bg-white;
+                }
+
+                .tw-tabs__button-border {
+                    @apply border-primary;
+                }
+            }
+
+            &.-reverse {
+                .tw-tabs__button {
+                    @apply bg-white;
+
+                    &.-active {
+                        @apply bg-gray-100;
+                    }
+                }
+            }
+        }
     }
 
-    &.-reverse {
-      @apply bg-white;
-      &.-active {
-        @apply bg-gray-100;
-      }
+    &__body {
+        @apply grid grid-rows-1 overflow-hidden;
     }
 
-    &.-back {
-      @apply text-secondary bg-white px-2 border-transparent;
+    &__panel {
+        @apply col-start-1 col-end-1 row-start-1 row-end-1 transition-all duration-300 ease-in-out;
+
+        &.-active {
+            @apply z-1 opacity-100 visible;
+            height: auto;
+        }
 
-      .tabs__button-icon {
-        @apply m-0;
-      }
+        &:not(.-active) {
+            @apply z-0 opacity-0 invisible;
+            height: 0;
+        }
     }
-  }
 }

package/tsconfig.app.json

@@ -6,6 +6,6 @@
     "declaration": false,
     "composite": false
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.mts", "tailwind.config.ts"],
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules", "dist", "src/**/*.spec.ts", "src/**/*.spec.tsx"]
 }