@tsed/tailwind-formio 3.0.0-alpha.8 → 3.0.0-rc.1

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/vite.config.mts

@@ -38,7 +38,7 @@ export default defineConfig({
   plugins: [
     ejsPlugin(),
     dts({
-      tsconfigPath: "./tsconfig.app.json",
+      tsconfigPath: "../../tsconfig.app.json",
       aliasesExclude: [],
       include: ["src/**/*.{ts,tsx}"],
       exclude: ["**/*.spec.{ts,tsx}", "**/*.stories.{ts,tsx}", "**/__*__/**"]

package/tsconfig.app.json

@@ -1,11 +0,0 @@
-{
-  "extends": "@tsed/typescript/tsconfig.web.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "noEmit": true,
-    "declaration": false,
-    "composite": false
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["node_modules", "dist", "src/**/*.spec.ts", "src/**/*.spec.tsx"]
-}

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "composite": true,
-    "noEmit": true
-  },
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}

package/tsconfig.node.json

@@ -1,13 +0,0 @@
-{
-  "extends": "@tsed/typescript/tsconfig.web.json",
-  "compilerOptions": {
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "baseUrl": ".",
-    "noEmit": true,
-    "declaration": false,
-    "composite": false
-  },
-  "include": ["vite.config.mts", "tailwind.config.ts"],
-  "exclude": ["node_modules", "dist", "src/**/*.spec.ts", "src/**/*.spec.tsx"]
-}