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

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/modal.css

@@ -2,6 +2,7 @@
 .formio-dialog.formio-dialog-theme-default.component-settings{
   .formio-dialog-close.btn {
     @apply px-4 text-xs text-gray-500 bg-transparent hover:bg-red-600 focus:bg-red-600 hover:text-white focus:text-white focus:shadow-none;
+    @apply mt-2 mr-2;
 
     &:before {
       @apply text-md p-0 text-current;

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,25 @@
 
 .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;
+
   .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/tsconfig.app.json

@@ -0,0 +1,11 @@
+{
+  "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,12 +1,14 @@
 {
-  "extends": "@tsed/config/tsconfig.web.json",
   "compilerOptions": {
-    "outDir": "lib",
-    "rootDir": "src",
-    "allowJs": true
+    "baseUrl": ".",
+    "composite": true,
+    "noEmit": true
   },
-  "include": ["src"],
+  "include": [],
   "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
     {
       "path": "./tsconfig.node.json"
     }

package/tsconfig.node.json

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

package/vite.config.mts

@@ -0,0 +1,86 @@
+import {fileURLToPath} from "node:url";
+// @ts-ignore
+import compile from "lodash/template";
+import {globbySync} from "globby";
+import {extname, relative} from "path";
+import preserveDirectives from "rollup-preserve-directives";
+import {defineConfig} from "vite";
+import dts from "vite-plugin-dts";
+import {resolve} from "node:path";
+
+const ejsPlugin = () => {
+  const opts = {
+    evaluate: /\{%([\s\S]+?)%\}/g,
+    interpolate: /\{\{([\s\S]+?)\}\}/g,
+    escape: /\{\{\{([\s\S]+?)\}\}\}/g,
+    variable: "ctx"
+  };
+
+  return {
+    name: "vite-plugin-ejs",
+    transform(src: string, id: string) {
+      // Vérifie si le fichier est un fichier .ejs
+      if (id.endsWith(".ejs")) {
+        const template = compile(src, opts);
+
+        // Renvoie le contenu JavaScript
+        return {
+          code: `export default ${template.toString()}`,
+          map: null
+        };
+      }
+    }
+  };
+};
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    ejsPlugin(),
+    dts({
+      tsconfigPath: "./tsconfig.app.json",
+      aliasesExclude: [],
+      include: ["src/**/*.{ts,tsx}"],
+      exclude: ["**/*.spec.{ts,tsx}", "**/*.stories.{ts,tsx}", "**/__*__/**"]
+    })
+  ],
+  resolve: {
+    alias: {}
+  },
+  build: {
+    sourcemap: true,
+    lib: {
+      entry: resolve(import.meta.dirname, "src/index.ts"),
+      formats: ["es"]
+    },
+    copyPublicDir: false,
+    rollupOptions: {
+      external: (source, importer) => {
+        return source.includes("node_modules");
+      },
+      plugins: [preserveDirectives() as any],
+      input: Object.fromEntries(
+        globbySync("src/**/*.{ts,tsx}", {
+          ignore: ["**/*.spec.{ts,tsx}", "**/*.stories.{ts,tsx}", "**/__*__/**"]
+        }).map((file) => {
+          return [
+            // The name of the entry point
+            // src/nested/foo.ts becomes nested/foo
+            relative("src", file.slice(0, file.length - extname(file).length)),
+            // The absolute path to the entry file
+            // src/nested/foo.ts becomes /project/src/nested/foo.ts
+            fileURLToPath(new URL(file, import.meta.url))
+          ];
+        })
+      ),
+      output: {
+        assetFileNames: "assets/[name][extname]",
+        chunkFileNames: "chunks/[name].js",
+        entryFileNames: "[name].js",
+        globals: {
+          react: "React"
+        }
+      }
+    }
+  }
+});

package/.eslintignore

@@ -1,14 +0,0 @@
-**/node_modules
-docs
-docs-references
-**/lib
-**/build
-**/dist
-**/coverage
-**/.nyc_output
-**/node_modules
-*-lock.json
-*.lock
-benchmarks.*
-**/generated
-src/**/*.ejs.js

package/.eslintrc.js

@@ -1,7 +0,0 @@
-module.exports = {
-  extends: [require.resolve("@tsed/config/eslint/node")],
-  rules: {
-    "import/no-anonymous-default-export": 0,
-    "jsx-a11y/anchor-is-valid": 0
-  }
-};