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

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.8",
+  "version": "3.0.0",
   "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,6 +20,10 @@
     @apply mb-0;
   }
 
+  &.is-open {
+    overflow: visible;
+  }
+
   &__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;
@@ -68,7 +73,10 @@
   }
 
   [hidden] {
-    display: none !important
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: 0;
   }
 
   &[data-type*=select-one] {
@@ -104,7 +112,8 @@
       }
     }
 
-    .choices__item[data-value=''] .choices__button {
+    .choices__item[data-value=''] .choices__button,
+    .choices__item[data-placeholder] .choices__button {
       @apply hidden;
     }
 
@@ -176,25 +185,29 @@
   }
 }
 
-
-.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 +232,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 +245,7 @@
       padding: 10px;
       font-size: 14px;
 
+      &--selectable.is-selected,
       &--selectable.is-highlighted {
         @apply bg-gray-200;
       }
@@ -284,30 +287,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 +354,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 {
@@ -372,3 +411,4 @@
     }
   }
 }
+

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