@tsed/tailwind-formio 3.0.0-alpha.7 → 3.0.0-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/tailwind-formio",
-  "version": "3.0.0-alpha.7",
+  "version": "3.0.0-alpha.9",
   "description": "Tailwind templates for form.io forms.",
   "type": "module",
   "main": "dist/index.js",
@@ -52,11 +52,11 @@
   },
   "dependencies": {},
   "peerDependencies": {},
-  "repository": "https://github.com/TypedProject/tsed-formio",
+  "repository": "https://github.com/tsedio/tsed-formio",
   "bugs": {
-    "url": "https://github.com/TypedProject/tsed-formio/issues"
+    "url": "https://github.com/tsedio/tsed-formio/issues"
   },
-  "homepage": "https://github.com/TypedProject/tsed-formio/tree/master/packages/tailwind-formio",
+  "homepage": "https://github.com/tsedio/tsed-formio/tree/master/packages/tailwind-formio",
   "author": "Romain Lenzotti",
   "publishConfig": {
     "tag": "alpha"

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;
     }
   }
@@ -207,6 +211,7 @@
 
       &.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: 0;
+      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.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,91 @@
+
+.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 shadow-sm;
+
+    &--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__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__single-value {
+      @apply text-sm;
+    }
+
+    .react-select__value-container.react-select__value-container--is-multi {
+      @apply px-1 py-0;
+    }
+  }
+}