@tak-ps/vue-tabler 4.29.1 → 4.29.3

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v4.29.3
+
+- :bug: Fix incorrect border when using pre or post icons in TablerInput
+
+### v4.29.2
+
+- :bug: Upstream styling of label dropdowns
+
 ### v4.29.1
 
 - :bug: Fix tests

package/components/input/Input.vue

@@ -341,6 +341,32 @@ input:autofill {
     background-color: var(--tabler-input-bg, var(--tblr-bg-forms, var(--tblr-bg-surface, var(--tblr-body-bg))));
 }
 
+/*
+ * Tabler's input-group-flat strips the seam borders from the .form-control but
+ * not from the .input-group-text spans (icon, clear button, end adornment), so
+ * their inner borders survive as dividers - and get repainted blue by
+ * `.input-group-flat:focus-within .input-group-text` on focus. Drop every
+ * inner-facing span border, keeping only the group's outer outline.
+ */
+.input-group :deep(.input-group-text:not(:last-child)) {
+    border-right: 0;
+}
+
+.input-group :deep(.input-group-text:not(:first-child)) {
+    border-left: 0;
+}
+
+/*
+ * The .form-control also carries the standard 1px input drop shadow
+ * (--tblr-shadow-input) which the spans lack, leaving a faint horizontal line
+ * that starts only where the input does. A flat group should be flat - remove
+ * it inside the group entirely.
+ */
+.input-group :deep(.form-control),
+.input-group :deep(.input-group-text) {
+    box-shadow: none;
+}
+
 .tabler-input-with-end {
     padding-right: 3rem;
 }

package/components/internal/Label.vue

@@ -13,17 +13,16 @@
                     />
                 </template>
                 <template #dropdown>
-                    <div class='card'>
-                        <div class='card-header'>
-                            <div
-                                class='card-title'
-                                v-text='props.label'
-                            />
+                    <div
+                        class='py-1'
+                        style='min-width: 300px;'
+                    >
+                        <div class='px-3 pt-2 pb-1 fw-bold'>
+                            {{props.label}}
                         </div>
-                        <div
-                            class='card-body'
-                            v-text='props.description'
-                        />
+                    </div>
+                    <div class='px-3 pb-2'>
+                        {{props.description}}
                     </div>
                 </template>
             </dropdown>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "4.29.1",
+    "version": "4.29.3",
     "lib": "lib.ts",
     "main": "lib.ts",
     "module": "lib.ts",