@tsed/tailwind-formio 3.0.0-rc.9 → 3.0.1

package/dist/templates/tailwind/lucideIconsMapping.js

@@ -68,7 +68,9 @@ const e = {
   reset: "rotate-ccw",
   loader: "loader-circle",
   detail: "file-text",
-  spreadsheet: "file-spreadsheet"
+  spreadsheet: "file-spreadsheet",
+  "sort-up": "arrow-up-narrow-wide",
+  "sort-down": "arrow-down-narrow-wide"
 };
 export {
   e as LucideIconsMapping

package/dist/templates/tailwind/lucideIconsMapping.js.map

@@ -1 +1 @@
-{"version":3,"file":"lucideIconsMapping.js","sources":["../../../src/templates/tailwind/lucideIconsMapping.ts"],"sourcesContent":["export const LucideIconsMapping: Record<string, any> = {\n  remove: \"trash\",\n  \"question-sign\": \"circle-question-mark\",\n  \"new-window\": \"app-window\",\n  \"minus-square-o\": \"square-minus\",\n  cog: \"cog\",\n  move: \"move\",\n  wrench: \"wrench\",\n  save: \"save\",\n  copy: \"copy\",\n  calendar: \"calendar\",\n  file: \"file\",\n  wpforms: \"picture-in-picture-2\",\n  \"files-o\": \"files\",\n  refresh: \"refresh-cw\",\n  indent: \"list-indent-increase\",\n  tasks: \"rows-2\",\n  th: \"grid-3x3\",\n  \"th-list\": \"panel-top-open\",\n  \"folder-open\": \"folder-open\",\n  \"folder-o\": \"folder\",\n  \"user-secret\": \"user-round-x\",\n  table: \"table\",\n  pencil: \"pencil\",\n  code: \"code\",\n  terminal: \"terminal\",\n  home: \"house\",\n  html5: \"file-text\",\n  list: \"list\",\n  usd: \"dollar-sign\",\n  hashtag: \"hash\",\n  tags: \"tags\",\n  at: \"at-sign\",\n  font: \"type\",\n  asterisk: \"asterisk\",\n  plus: \"plus\",\n  \"plus-square\": \"list-check\",\n  \"plus-square-o\": \"square-plus\",\n  \"dot-circle-o\": \"circle-check\",\n  \"phone-square\": \"phone\",\n  \"clock-o\": \"clock\",\n  link: \"link\",\n  columns: \"columns-3\",\n  \"th-large\": \"layout-grid\",\n  \"list-alt\": \"app-window\",\n  \"square-o\": \"square\",\n  cubes: \"boxes\",\n  stop: \"square\",\n  \"check-square\": \"square-check\",\n  \"remove-circle\": \"x\",\n  \"circle-xmark\": \"circle-x\",\n  bars: \"list\",\n  edit: \"square-pen\",\n  time: \"clock\",\n  microphone: \"mic\",\n  video: \"video\",\n  \"times-circle\": \"circle-x\",\n  minus: \"minus\",\n  circle: \"circle\",\n  \"search-plus\": \"zoom-in\",\n  \"search-minus\": \"zoom-out\",\n  \"hand-paper-o\": \"pointer\",\n  undo: \"undo-2\",\n  redo: \"redo-2\",\n  repeat: \"repeat\",\n  data: \"database\",\n  \"paper-plane\": \"send\",\n  reset: \"rotate-ccw\",\n  loader: \"loader-circle\",\n  detail: \"file-text\",\n  spreadsheet: \"file-spreadsheet\"\n};\n"],"names":["LucideIconsMapping"],"mappings":"AAAO,MAAMA,IAA0C;AAAA,EACrD,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,KAAK;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,KAAK;AAAA,EACL,SAAS;AAAA,EACT,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,MAAM;AAAA,EACN,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AACf;"}
+{"version":3,"file":"lucideIconsMapping.js","sources":["../../../src/templates/tailwind/lucideIconsMapping.ts"],"sourcesContent":["export const LucideIconsMapping: Record<string, any> = {\n  remove: \"trash\",\n  \"question-sign\": \"circle-question-mark\",\n  \"new-window\": \"app-window\",\n  \"minus-square-o\": \"square-minus\",\n  cog: \"cog\",\n  move: \"move\",\n  wrench: \"wrench\",\n  save: \"save\",\n  copy: \"copy\",\n  calendar: \"calendar\",\n  file: \"file\",\n  wpforms: \"picture-in-picture-2\",\n  \"files-o\": \"files\",\n  refresh: \"refresh-cw\",\n  indent: \"list-indent-increase\",\n  tasks: \"rows-2\",\n  th: \"grid-3x3\",\n  \"th-list\": \"panel-top-open\",\n  \"folder-open\": \"folder-open\",\n  \"folder-o\": \"folder\",\n  \"user-secret\": \"user-round-x\",\n  table: \"table\",\n  pencil: \"pencil\",\n  code: \"code\",\n  terminal: \"terminal\",\n  home: \"house\",\n  html5: \"file-text\",\n  list: \"list\",\n  usd: \"dollar-sign\",\n  hashtag: \"hash\",\n  tags: \"tags\",\n  at: \"at-sign\",\n  font: \"type\",\n  asterisk: \"asterisk\",\n  plus: \"plus\",\n  \"plus-square\": \"list-check\",\n  \"plus-square-o\": \"square-plus\",\n  \"dot-circle-o\": \"circle-check\",\n  \"phone-square\": \"phone\",\n  \"clock-o\": \"clock\",\n  link: \"link\",\n  columns: \"columns-3\",\n  \"th-large\": \"layout-grid\",\n  \"list-alt\": \"app-window\",\n  \"square-o\": \"square\",\n  cubes: \"boxes\",\n  stop: \"square\",\n  \"check-square\": \"square-check\",\n  \"remove-circle\": \"x\",\n  \"circle-xmark\": \"circle-x\",\n  bars: \"list\",\n  edit: \"square-pen\",\n  time: \"clock\",\n  microphone: \"mic\",\n  video: \"video\",\n  \"times-circle\": \"circle-x\",\n  minus: \"minus\",\n  circle: \"circle\",\n  \"search-plus\": \"zoom-in\",\n  \"search-minus\": \"zoom-out\",\n  \"hand-paper-o\": \"pointer\",\n  undo: \"undo-2\",\n  redo: \"redo-2\",\n  repeat: \"repeat\",\n  data: \"database\",\n  \"paper-plane\": \"send\",\n  reset: \"rotate-ccw\",\n  loader: \"loader-circle\",\n  detail: \"file-text\",\n  spreadsheet: \"file-spreadsheet\",\n  \"sort-up\": \"arrow-up-narrow-wide\",\n  \"sort-down\": \"arrow-down-narrow-wide\"\n};\n"],"names":["LucideIconsMapping"],"mappings":"AAAO,MAAMA,IAA0C;AAAA,EACrD,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,KAAK;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,KAAK;AAAA,EACL,SAAS;AAAA,EACT,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,MAAM;AAAA,EACN,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,WAAW;AAAA,EACX,aAAa;AACf;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/tailwind-formio",
-  "version": "3.0.0-rc.9",
+  "version": "3.0.1",
   "description": "Tailwind templates for form.io forms.",
   "type": "module",
   "main": "dist/index.js",
@@ -66,8 +66,5 @@
     "url": "https://github.com/tsedio/tsed-formio/issues"
   },
   "homepage": "https://github.com/tsedio/tsed-formio/tree/master/packages/tailwind-formio",
-  "author": "Romain Lenzotti",
-  "publishConfig": {
-    "tag": "rc"
-  }
+  "author": "Romain Lenzotti"
 }

package/src/templates/tailwind/lucideIconsMapping.ts

@@ -68,5 +68,7 @@ export const LucideIconsMapping: Record<string, any> = {
   reset: "rotate-ccw",
   loader: "loader-circle",
   detail: "file-text",
-  spreadsheet: "file-spreadsheet"
+  spreadsheet: "file-spreadsheet",
+  "sort-up": "arrow-up-narrow-wide",
+  "sort-down": "arrow-down-narrow-wide"
 };

package/styles/choices.css

@@ -1,6 +1,7 @@
 .choices {
   @apply relative mb-4;
   font-size: inherit;
+  overflow: hidden;
 
   &:focus {
     @apply outline-none;
@@ -19,9 +20,15 @@
     @apply mb-0;
   }
 
-  &__inner {
-    @apply appearance-none bg-white leading-normal px-3 py-2 pb-0 block w-full rounded-md border-1 border-gray-300 shadow-sm;
-    min-height: 42px;
+  &.is-open {
+    overflow: visible;
+  }
+
+  .form-control.ui,
+  .choices__inner {
+    @apply shadow-none;
+    @apply appearance-none bg-white leading-normal pb-0 block w-full rounded-md border-1 border-gray-300;
+    min-height: 38px;
     font-size: inherit;
     line-height: inherit;
   }
@@ -54,6 +61,7 @@
   }
 
   &.is-disabled {
+    .form-control.ui,
     .choices__inner,
     .choices__input {
       @apply bg-gray-300 opacity-100 cursor-not-allowed;
@@ -68,18 +76,24 @@
   }
 
   [hidden] {
-    display: none !important
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: 0;
   }
 
   &[data-type*=select-one] {
-    @apply cursor-pointer;
-  }
-
-  &[data-type*=select-one] {
-    position: relative;
+    @apply cursor-pointer relative;
 
+    .form-control.ui,
     .choices__inner {
-      @apply pb-2;
+      @apply flex items-center;
+      padding: 0;
+
+      .choices__list {
+        @apply block;
+        padding: 0 16px 0 8px;
+      }
     }
 
     .choices__input {
@@ -104,7 +118,8 @@
       }
     }
 
-    .choices__item[data-value=''] .choices__button {
+    .choices__item[data-value=''] .choices__button,
+    .choices__item[data-placeholder] .choices__button {
       @apply hidden;
     }
 
@@ -155,6 +170,23 @@
   }
 
   &[data-type=select-multiple] {
+    .form-control.ui,
+    .choices__inner {
+      @apply flex gap-1 flex-wrap;
+      padding-top: 6px;
+
+      .choices__item {
+        @apply rounded-md bg-primary border-0 text-xs py-1 px-2;
+        font-weight: 600;
+      }
+
+      > .choices__input {
+        margin: 0;
+        padding: 0;
+        height: 24px;
+      }
+    }
+
     &:after {
       @apply h-0 w-0 border-solid absolute border-0 h-full top-0 m-0 right-1.5;
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
@@ -169,32 +201,31 @@
       @apply pb-0;
     }
   }
-
-  .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;
 }
 
 .choices__list {
   @apply m-0 pl-0;
   list-style: none;
 
+  &[aria-expanded] {
+    @apply absolute z-5 w-full bg-white border-1 border-solid border-gray-300 overflow-hidden break-all top-full;
+    margin-top: -1px;
+    border-bottom-left-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+    display: none;
+
+    &.is-active {
+      display: block;
+    }
+  }
+
   &--single {
-    @apply inline-block p-0 w-full;
+    @apply inline-block w-full;
+    padding: 4px 16px 4px 4px;
 
     .choices__item {
       @apply w-full;
     }
-
-    .choices__item.choices__item--selectable {
-      margin-bottom: -0.375rem;
-    }
   }
 
   &--multiple {
@@ -219,23 +250,12 @@
     }
   }
 
-  &--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 {
-      visibility: visible
-    }
-
+  &--dropdown {
     .choices__list {
       @apply relative overflow-auto;
       max-height: 300px;
       -webkit-overflow-scrolling: touch;
       will-change: scroll-position;
-
-      .choices__item--selectable.is-highlighted:after {
-        @apply opacity-50;
-      }
     }
 
     .choices__item {
@@ -243,6 +263,7 @@
       padding: 10px;
       font-size: 14px;
 
+      &--selectable.is-selected,
       &--selectable.is-highlighted {
         @apply bg-gray-200;
       }
@@ -284,30 +305,50 @@
   border-radius: .25rem .25rem 0 0
 }
 
+.is-open .choices__inner {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.is-flipped.is-open .choices__inner {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+
 @media (min-width: 640px) {
   .choices__list--dropdown {
     .choices__item--selectable {
-      padding-right: 100px;
+      &.is-highlighted[data-select-text] {
+        padding-right: 100px;
+      }
 
-      &:after {
+      &.is-highlighted[data-select-text]::after {
         content: attr(data-select-text);
         font-size: 12px;
-        opacity: 0;
         position: absolute;
         right: 10px;
         top: 50%;
         transform: translateY(-50%)
       }
+
+      &.is-selected::after {
+        content: none !important;
+      }
     }
   }
 
   [dir=rtl] .choices__list--dropdown {
     .choices__item--selectable {
       text-align: right;
-      padding-left: 100px;
       padding-right: 10px;
 
-      &:after {
+      &.is-highlighted[data-select-text] {
+        padding-left: 100px;
+      }
+
+      &.is-highlighted[data-select-text]::after {
         right: auto;
         left: 10px
       }
@@ -331,6 +372,22 @@
 
 .choices__input {
   @apply inline-block align-baseline bg-white pb-1 rounded-none border-0 max-w-full text-sm;
+  margin-bottom: 5px;
+  padding: 4px 0 4px 2px;
+
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  &::-ms-clear,
+  &::-ms-reveal {
+    display: none;
+    width: 0;
+    height: 0;
+  }
 }
 
 [dir=rtl] .choices__input {
@@ -347,28 +404,32 @@
  */
 .form-group.-size-small {
   .choices {
+
+    .form-control.ui,
     .choices__inner {
-      @apply px-2;
-      padding-top: 3px;
       min-height: 32px;
       font-size: 14px;
     }
 
-    &[data-type*=select-one] .choices__inner {
-      padding-bottom: 1px;
+    &[data-type*=select-multiple] .choices__inner {
+      padding-top: 3px;
     }
 
-    .choices__list--multiple .choices__item {
-      @apply py-0.5 px-1 text-xs;
-      margin-bottom: 3px;
+    .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{
+    &[data-type*=text] .choices__button {
       margin: 0 -2px 0 6px;
     }
   }
 }
+

package/styles/form.css

@@ -23,6 +23,12 @@
   @apply mb-5;
 }
 
+input.form-control,
+select.form-control {
+  min-height: 38px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
 
 .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;
@@ -32,6 +38,7 @@
   .form-control {
     @apply px-2 py-1 text-sm;
     min-height: 32px;
+    height: 32px;
   }
 }
 

package/styles/input-group.css

@@ -2,9 +2,6 @@
   @apply flex relative flex-wrap items-stretch w-full shadow-sm rounded;
   > .choices {
     @apply flex-1 mb-0;
-    .choices__inner {
-      @apply shadow-none;
-    }
   }
 }
 
@@ -12,8 +9,7 @@
 .input-group > .form-control-plaintext,
 .input-group > .custom-select,
 .input-group > .custom-file {
-  @apply relative flex-auto mb-0 mt-0 shadow-none;
-  width: 1%;
+  @apply relative mb-0 mt-0 shadow-none;
 
   + .form-control,
   + .custom-select,
@@ -104,45 +100,6 @@
   }
 }
 
-/*.input-group-lg > .form-control:not(textarea),
-.input-group-lg > .custom-select {
-  height: $input-height-lg;
-}*/
-
-/*.input-group-lg > .form-control,
-.input-group-lg > .custom-select,
-.input-group-lg > .input-group-prepend > .input-group-text,
-.input-group-lg > .input-group-append > .input-group-text,
-.input-group-lg > .input-group-prepend > .btn,
-.input-group-lg > .input-group-append > .btn {
-  padding: $input-padding-y-lg $input-padding-x-lg;
-  @include font-size($input-font-size-lg);
-  line-height: $input-line-height-lg;
-  @include border-radius($input-border-radius-lg);
-}
-
-.input-group-sm > .form-control:not(textarea),
-.input-group-sm > .custom-select {
-  height: $input-height-sm;
-}
-
-.input-group-sm > .form-control,
-.input-group-sm > .custom-select,
-.input-group-sm > .input-group-prepend > .input-group-text,
-.input-group-sm > .input-group-append > .input-group-text,
-.input-group-sm > .input-group-prepend > .btn,
-.input-group-sm > .input-group-append > .btn {
-  padding: $input-padding-y-sm $input-padding-x-sm;
-  @include font-size($input-font-size-sm);
-  line-height: $input-line-height-sm;
-  @include border-radius($input-border-radius-sm);
-}
-
-.input-group-lg > .custom-select,
-.input-group-sm > .custom-select {
-  padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
-}*/
-
 .input-group > .input-group-prepend > .btn,
 .input-group > .input-group-prepend > .input-group-text,
 .input-group > .input-group-append:not(:last-child) > .btn,

package/styles/react-select.css

@@ -58,7 +58,9 @@
     .react-select__control {
       min-height: 28px;
     }
-
+    .react-select__placeholder {
+      white-space: nowrap;
+    }
     .react-select__value-container {
       padding-top: 0;
       padding-bottom: 0;

package/styles/tables.css

@@ -33,7 +33,7 @@
     @apply flex items-center justify-center;
 
     > span:first-child {
-      @apply flex-1;
+      @apply flex-1 whitespace-nowrap overflow-hidden text-ellipsis;
     }
   }
 
@@ -99,7 +99,11 @@
 }
 
 .table-group {
-  @apply border-1 border-gray-300 dark:border-gray-700 flex flex-col w-full overflow-x-auto;
+  @apply border-1 border-gray-300 dark:border-gray-700 flex flex-col w-full;
+
+  .table-group-body {
+    @apply overflow-x-auto;
+  }
 
   &.border-top-0 {
     @apply border-t-0;
@@ -112,11 +116,11 @@
     }
   }
 
-  .pagination-group {
-    @apply border-t-1 border-gray-300 dark:border-gray-700 p-3;
+  .table-group-footer {
+    @apply overflow-hidden flex flex-wrap;
   }
 
-  .table-group-footer {
-    @apply overflow-hidden flex flex-wrap
+  .pagination-group {
+    @apply border-t-1 border-gray-300 dark:border-gray-700 p-3;
   }
 }