@threadlabs/looma 0.39.2 → 0.39.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ui-combobox/ui-combobox.html +8 -3
- package/components/ui-combobox/ui-combobox.js +3 -2
- package/components/ui-dialog/ui-dialog.html +6 -52
- package/components/ui-input/ui-input.html +21 -3
- package/components/ui-input-group/ui-input-group.html +1 -0
- package/components/ui-select/ui-select.html +10 -3
- package/dist/index.js +1 -1
- package/docs/README.md +1 -1
- package/docs/catalog.json +1 -25
- package/docs/customizer.js +11 -3
- package/docs/site.mjs +9 -5
- package/docs/theme.mjs +8 -2
- package/package.json +1 -1
- package/styles/ui-combobox.css +16 -6
- package/styles/ui-dialog.css +6 -107
- package/styles/ui-input-group.css +1 -0
- package/styles/ui-input.css +24 -3
- package/styles/ui-select.css +10 -3
- package/theme-system.css +4 -1
- package/vanilla/UiDialog.js +2 -2
- package/vue/UiCombobox.vue +22 -6
- package/vue/UiDialog.d.ts +3 -3
- package/vue/UiDialog.vue +18 -111
- package/vue/UiInput.vue +30 -3
- package/vue/UiInputGroup.vue +1 -0
- package/vue/UiSelect.vue +16 -3
- package/vue/chunks/UiCombobox.js +1 -1
- package/vue/chunks/UiDialog.js +22 -14
- package/vue/chunks/UiInput.js +1 -1
- package/vue/chunks/UiInputGroup.js +1 -1
- package/vue/chunks/UiSelect.js +1 -1
- package/vue/components.css +105 -118
package/vue/UiCombobox.vue
CHANGED
|
@@ -2276,10 +2276,15 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
|
|
|
2276
2276
|
color: inherit;
|
|
2277
2277
|
}
|
|
2278
2278
|
:global(input:where([data-hn-ui-combobox])) {
|
|
2279
|
+
--_ui-combobox-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
|
|
2279
2280
|
appearance: none;
|
|
2280
2281
|
width: 100%;
|
|
2281
2282
|
min-inline-size: 0;
|
|
2282
2283
|
min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
|
|
2284
|
+
max-block-size: max(
|
|
2285
|
+
calc(var(--_row) - 2 * var(--ui-border-width)),
|
|
2286
|
+
calc(1em * var(--ui-line-height-tight) + 2 * var(--_ui-combobox-inset-block))
|
|
2287
|
+
);
|
|
2283
2288
|
box-sizing: border-box !important;
|
|
2284
2289
|
border: 0;
|
|
2285
2290
|
border-radius: inherit;
|
|
@@ -2287,7 +2292,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
|
|
|
2287
2292
|
color: inherit;
|
|
2288
2293
|
font: inherit;
|
|
2289
2294
|
line-height: var(--ui-line-height-tight);
|
|
2290
|
-
padding: var(--
|
|
2295
|
+
padding: var(--_ui-combobox-inset-block) var(--ui-space-3) !important;
|
|
2291
2296
|
margin: 0 !important;
|
|
2292
2297
|
outline: none;
|
|
2293
2298
|
}
|
|
@@ -2295,14 +2300,16 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
|
|
|
2295
2300
|
--_row: var(--ui-control-size-sm);
|
|
2296
2301
|
}
|
|
2297
2302
|
:global(:scope[data-ui-combobox-state~="size=sm"] input:where([data-hn-ui-combobox])) {
|
|
2298
|
-
|
|
2303
|
+
--_ui-combobox-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
|
|
2304
|
+
padding: var(--_ui-combobox-inset-block) var(--ui-space-2) !important;
|
|
2299
2305
|
font-size: var(--ui-font-size-sm);
|
|
2300
2306
|
}
|
|
2301
2307
|
:global(:scope[data-ui-combobox-state~="size=lg"]:where([data-hn-ui-combobox])) {
|
|
2302
2308
|
--_row: var(--ui-control-size-lg);
|
|
2303
2309
|
}
|
|
2304
2310
|
:global(:scope[data-ui-combobox-state~="size=lg"] input:where([data-hn-ui-combobox])) {
|
|
2305
|
-
|
|
2311
|
+
--_ui-combobox-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
|
|
2312
|
+
padding: var(--_ui-combobox-inset-block) var(--ui-space-4) !important;
|
|
2306
2313
|
font-size: var(--ui-font-size-md);
|
|
2307
2314
|
}
|
|
2308
2315
|
:global(button:where([data-hn-ui-combobox])) {
|
|
@@ -2448,6 +2455,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
|
|
|
2448
2455
|
display: none !important;
|
|
2449
2456
|
}
|
|
2450
2457
|
:global(:scope[data-ui-combobox-state~="multiple"] input:where([data-hn-ui-combobox])) {
|
|
2458
|
+
max-block-size: none;
|
|
2451
2459
|
flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
|
|
2452
2460
|
width: auto;
|
|
2453
2461
|
min-block-size: 1.75rem;
|
|
@@ -2631,10 +2639,15 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
|
|
|
2631
2639
|
color: inherit;
|
|
2632
2640
|
}
|
|
2633
2641
|
:global(input:where(:scope, :scope *):where([data-hn-ui-combobox])) {
|
|
2642
|
+
--_ui-combobox-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
|
|
2634
2643
|
appearance: none;
|
|
2635
2644
|
width: 100%;
|
|
2636
2645
|
min-inline-size: 0;
|
|
2637
2646
|
min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
|
|
2647
|
+
max-block-size: max(
|
|
2648
|
+
calc(var(--_row) - 2 * var(--ui-border-width)),
|
|
2649
|
+
calc(1em * var(--ui-line-height-tight) + 2 * var(--_ui-combobox-inset-block))
|
|
2650
|
+
);
|
|
2638
2651
|
box-sizing: border-box !important;
|
|
2639
2652
|
border: 0;
|
|
2640
2653
|
border-radius: inherit;
|
|
@@ -2642,7 +2655,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
|
|
|
2642
2655
|
color: inherit;
|
|
2643
2656
|
font: inherit;
|
|
2644
2657
|
line-height: var(--ui-line-height-tight);
|
|
2645
|
-
padding: var(--
|
|
2658
|
+
padding: var(--_ui-combobox-inset-block) var(--ui-space-3) !important;
|
|
2646
2659
|
margin: 0 !important;
|
|
2647
2660
|
outline: none;
|
|
2648
2661
|
}
|
|
@@ -2651,7 +2664,8 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
|
|
|
2651
2664
|
}
|
|
2652
2665
|
:global(:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
|
|
2653
2666
|
input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
|
|
2654
|
-
|
|
2667
|
+
--_ui-combobox-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
|
|
2668
|
+
padding: var(--_ui-combobox-inset-block) var(--ui-space-2) !important;
|
|
2655
2669
|
font-size: var(--ui-font-size-sm);
|
|
2656
2670
|
}
|
|
2657
2671
|
:global(:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
|
|
@@ -2659,7 +2673,8 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
|
|
|
2659
2673
|
}
|
|
2660
2674
|
:global(:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]
|
|
2661
2675
|
input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
|
|
2662
|
-
|
|
2676
|
+
--_ui-combobox-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
|
|
2677
|
+
padding: var(--_ui-combobox-inset-block) var(--ui-space-4) !important;
|
|
2663
2678
|
font-size: var(--ui-font-size-md);
|
|
2664
2679
|
}
|
|
2665
2680
|
:global(button:where(:scope, :scope *):where([data-hn-ui-combobox])) {
|
|
@@ -2814,6 +2829,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
|
|
|
2814
2829
|
}
|
|
2815
2830
|
:global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]
|
|
2816
2831
|
input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
|
|
2832
|
+
max-block-size: none;
|
|
2817
2833
|
flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
|
|
2818
2834
|
width: auto;
|
|
2819
2835
|
min-block-size: 1.75rem;
|
package/vue/UiDialog.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { PropType } from 'vue';
|
|
2
2
|
import { type InputBindings } from './props.js';
|
|
3
|
-
declare var
|
|
3
|
+
declare var __VLS_20: {}, __VLS_22: {};
|
|
4
4
|
type __VLS_Slots = {} & {
|
|
5
|
-
default?: (props: typeof
|
|
5
|
+
default?: (props: typeof __VLS_20) => any;
|
|
6
6
|
} & {
|
|
7
|
-
actions?: (props: typeof
|
|
7
|
+
actions?: (props: typeof __VLS_22) => any;
|
|
8
8
|
};
|
|
9
9
|
declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
10
10
|
alert: {
|
package/vue/UiDialog.vue
CHANGED
|
@@ -22,6 +22,8 @@ import {
|
|
|
22
22
|
vPropValidity,
|
|
23
23
|
vuePropInputs,
|
|
24
24
|
} from './props'
|
|
25
|
+
import UiIcon from './UiIcon.vue'
|
|
26
|
+
import UiIconButton from './UiIconButton.vue'
|
|
25
27
|
import UiScrollArea from './UiScrollArea.vue'
|
|
26
28
|
|
|
27
29
|
defineOptions({ inheritAttrs: false })
|
|
@@ -320,10 +322,16 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
|
|
|
320
322
|
ref="root"
|
|
321
323
|
>
|
|
322
324
|
<header data-hn-ui-dialog ref="headerElement">
|
|
323
|
-
<h2 v-if="checkedProps.label" class="title" data-hn-ui-dialog>{{ checkedProps.label }}</h2>
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
325
|
+
<h2 v-if="checkedProps.label" class="title" data-hn-ui-dialog>{{ checkedProps.label }}</h2>
|
|
326
|
+
<div class="close" data-hn-ui-dialog>
|
|
327
|
+
<UiIconButton
|
|
328
|
+
class="ui-icon-button"
|
|
329
|
+
size="sm"
|
|
330
|
+
:round="true"
|
|
331
|
+
label="Close"
|
|
332
|
+
ref="closeElement"
|
|
333
|
+
><UiIcon class="ui-icon" name="x" /></UiIconButton>
|
|
334
|
+
</div>
|
|
327
335
|
</header>
|
|
328
336
|
<div class="body" data-hn-ui-dialog ref="bodyElement">
|
|
329
337
|
<UiScrollArea class="ui-scroll-area" :trim="true"><slot /></UiScrollArea>
|
|
@@ -372,10 +380,6 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
|
|
|
372
380
|
|
|
373
381
|
/* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
|
|
374
382
|
|
|
375
|
-
/* A CSS-drawn X. */
|
|
376
|
-
|
|
377
|
-
/* A touch target, like Button on coarse pointers. */
|
|
378
|
-
|
|
379
383
|
@keyframes ui-dialog-enter {
|
|
380
384
|
from {
|
|
381
385
|
opacity: 0;
|
|
@@ -574,56 +578,10 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
|
|
|
574
578
|
}
|
|
575
579
|
|
|
576
580
|
:global(.close:where([data-hn-ui-dialog])) {
|
|
577
|
-
display:
|
|
578
|
-
|
|
579
|
-
flex: none;
|
|
581
|
+
display: flex !important;
|
|
582
|
+
align-items: center !important;
|
|
583
|
+
flex: none !important;
|
|
580
584
|
margin-inline-start: auto !important;
|
|
581
|
-
inline-size: var(--ui-control-size-sm);
|
|
582
|
-
block-size: var(--ui-control-size-sm);
|
|
583
|
-
padding: 0 !important;
|
|
584
|
-
border: 0;
|
|
585
|
-
border-radius: var(--ui-radius-round);
|
|
586
|
-
background: transparent;
|
|
587
|
-
color: var(--ui-text-secondary);
|
|
588
|
-
cursor: pointer;
|
|
589
|
-
transition:
|
|
590
|
-
background-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
591
|
-
color var(--ui-motion-fast) var(--ui-motion-ease);
|
|
592
|
-
}
|
|
593
|
-
:global(.close:where([data-hn-ui-dialog])::before),
|
|
594
|
-
:global(.close:where([data-hn-ui-dialog])::after) {
|
|
595
|
-
content: "";
|
|
596
|
-
grid-area: 1 / 1;
|
|
597
|
-
inline-size: 0.875rem;
|
|
598
|
-
block-size: 1.5px;
|
|
599
|
-
border-radius: 1px;
|
|
600
|
-
background: currentColor;
|
|
601
|
-
transform: rotate(45deg);
|
|
602
|
-
}
|
|
603
|
-
|
|
604
|
-
:global(.close:where([data-hn-ui-dialog])::after) {
|
|
605
|
-
transform: rotate(-45deg);
|
|
606
|
-
}
|
|
607
|
-
|
|
608
|
-
:global(.close:hover:where([data-hn-ui-dialog])) {
|
|
609
|
-
background: var(--ui-surface-muted);
|
|
610
|
-
color: var(--ui-text-primary);
|
|
611
|
-
}
|
|
612
|
-
|
|
613
|
-
:global(.close:focus-visible:where([data-hn-ui-dialog])) {
|
|
614
|
-
outline: var(--ui-focus-width) solid var(--ui-focus-ring);
|
|
615
|
-
outline-offset: var(--ui-focus-width);
|
|
616
|
-
}
|
|
617
|
-
@media (pointer: coarse) {
|
|
618
|
-
:global(.close:where([data-hn-ui-dialog])) {
|
|
619
|
-
inline-size: var(--ui-control-min-block-size);
|
|
620
|
-
block-size: var(--ui-control-min-block-size);
|
|
621
|
-
}
|
|
622
|
-
}
|
|
623
|
-
|
|
624
|
-
:global(html[data-ui-input-modality="touch"] :scope .close:where([data-hn-ui-dialog])) {
|
|
625
|
-
inline-size: var(--ui-control-min-block-size);
|
|
626
|
-
block-size: var(--ui-control-min-block-size);
|
|
627
585
|
}
|
|
628
586
|
|
|
629
587
|
:global(.body:where([data-hn-ui-dialog])) {
|
|
@@ -858,61 +816,10 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
|
|
|
858
816
|
}
|
|
859
817
|
|
|
860
818
|
:global(.close:where(:scope, :scope *):where([data-hn-ui-dialog])) {
|
|
861
|
-
display:
|
|
862
|
-
|
|
863
|
-
flex: none;
|
|
819
|
+
display: flex !important;
|
|
820
|
+
align-items: center !important;
|
|
821
|
+
flex: none !important;
|
|
864
822
|
margin-inline-start: auto !important;
|
|
865
|
-
inline-size: var(--ui-control-size-sm);
|
|
866
|
-
block-size: var(--ui-control-size-sm);
|
|
867
|
-
padding: 0 !important;
|
|
868
|
-
border: 0;
|
|
869
|
-
border-radius: var(--ui-radius-round);
|
|
870
|
-
background: transparent;
|
|
871
|
-
color: var(--ui-text-secondary);
|
|
872
|
-
cursor: pointer;
|
|
873
|
-
transition:
|
|
874
|
-
background-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
875
|
-
color var(--ui-motion-fast) var(--ui-motion-ease);
|
|
876
|
-
}
|
|
877
|
-
:global(.close:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope
|
|
878
|
-
*):where([data-hn-ui-dialog])::before),
|
|
879
|
-
:global(.close:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope
|
|
880
|
-
*):where([data-hn-ui-dialog])::after) {
|
|
881
|
-
content: "";
|
|
882
|
-
grid-area: 1 / 1;
|
|
883
|
-
inline-size: 0.875rem;
|
|
884
|
-
block-size: 1.5px;
|
|
885
|
-
border-radius: 1px;
|
|
886
|
-
background: currentColor;
|
|
887
|
-
transform: rotate(45deg);
|
|
888
|
-
}
|
|
889
|
-
|
|
890
|
-
:global(.close:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope
|
|
891
|
-
*):where([data-hn-ui-dialog])::after) {
|
|
892
|
-
transform: rotate(-45deg);
|
|
893
|
-
}
|
|
894
|
-
|
|
895
|
-
:global(.close:hover:where(:scope, :scope *):where([data-hn-ui-dialog])) {
|
|
896
|
-
background: var(--ui-surface-muted);
|
|
897
|
-
color: var(--ui-text-primary);
|
|
898
|
-
}
|
|
899
|
-
|
|
900
|
-
:global(.close:focus-visible:where(:scope, :scope *):where([data-hn-ui-dialog])) {
|
|
901
|
-
outline: var(--ui-focus-width) solid var(--ui-focus-ring);
|
|
902
|
-
outline-offset: var(--ui-focus-width);
|
|
903
|
-
}
|
|
904
|
-
@media (pointer: coarse) {
|
|
905
|
-
:global(.close:where(:scope, :scope *):where([data-hn-ui-dialog])) {
|
|
906
|
-
inline-size: var(--ui-control-min-block-size);
|
|
907
|
-
block-size: var(--ui-control-min-block-size);
|
|
908
|
-
}
|
|
909
|
-
}
|
|
910
|
-
|
|
911
|
-
:global(html[data-ui-input-modality="touch"]
|
|
912
|
-
:where(.ui-dialog)
|
|
913
|
-
.close:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
|
|
914
|
-
inline-size: var(--ui-control-min-block-size);
|
|
915
|
-
block-size: var(--ui-control-min-block-size);
|
|
916
823
|
}
|
|
917
824
|
|
|
918
825
|
:global(.body:where(:scope, :scope *):where([data-hn-ui-dialog])) {
|
package/vue/UiInput.vue
CHANGED
|
@@ -537,6 +537,14 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
|
|
|
537
537
|
syntax: "*";
|
|
538
538
|
inherits: false;
|
|
539
539
|
}
|
|
540
|
+
/* Normalize a unitless zero border to a length before the box calculation. */
|
|
541
|
+
@property --_ui-input-stroke {
|
|
542
|
+
syntax: "<length>";
|
|
543
|
+
inherits: false;
|
|
544
|
+
initial-value: 1px;
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
/* Cap Safari's excess text metrics without changing native date, file, color or range widgets. */
|
|
540
548
|
|
|
541
549
|
/* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
|
|
542
550
|
|
|
@@ -555,6 +563,12 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
|
|
|
555
563
|
|
|
556
564
|
@scope (.ui-input) to ([data-hn]) {
|
|
557
565
|
:global(:scope) {
|
|
566
|
+
--_ui-input-size: var(--ui-control-size-md);
|
|
567
|
+
--_ui-input-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
|
|
568
|
+
--_ui-input-stroke: var(
|
|
569
|
+
--ui-input-border-width,
|
|
570
|
+
var(--_ui-default-input-border-width, var(--ui-border-width))
|
|
571
|
+
);
|
|
558
572
|
box-sizing: border-box !important;
|
|
559
573
|
display: inline-block !important;
|
|
560
574
|
inline-size: var(--ui-input-inline-size, 100%);
|
|
@@ -564,7 +578,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
|
|
|
564
578
|
var(--_ui-default-input-min-block-size, var(--ui-control-size-md))
|
|
565
579
|
);
|
|
566
580
|
margin: 0 !important;
|
|
567
|
-
padding: var(--
|
|
581
|
+
padding: var(--_ui-input-inset-block) var(--ui-space-3) !important;
|
|
568
582
|
appearance: none;
|
|
569
583
|
padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3))
|
|
570
584
|
!important;
|
|
@@ -594,21 +608,34 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
|
|
|
594
608
|
box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
|
|
595
609
|
background-color var(--ui-motion-fast) var(--ui-motion-ease);
|
|
596
610
|
}
|
|
611
|
+
:global(:scope:is([type="text"], [type="search"], [type="tel"], [type="url"], [type="email"], [type="password"], [type="number"])) {
|
|
612
|
+
max-block-size: max(
|
|
613
|
+
calc(var(--_ui-input-size) - var(--_ui-default-input-frame-width, 0px)),
|
|
614
|
+
calc(
|
|
615
|
+
1em * var(--ui-line-height-tight) + 2 * var(--_ui-input-inset-block) +
|
|
616
|
+
2 * var(--_ui-input-stroke)
|
|
617
|
+
)
|
|
618
|
+
);
|
|
619
|
+
}
|
|
597
620
|
:global(:scope[data-ui-input-state~="size=sm"]) {
|
|
621
|
+
--_ui-input-size: var(--ui-control-size-sm);
|
|
622
|
+
--_ui-input-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
|
|
598
623
|
min-block-size: var(
|
|
599
624
|
--ui-input-min-block-size,
|
|
600
625
|
var(--_ui-default-input-min-block-size, var(--ui-control-size-sm))
|
|
601
626
|
);
|
|
602
|
-
padding: var(--
|
|
627
|
+
padding: var(--_ui-input-inset-block) var(--ui-space-2) !important;
|
|
603
628
|
font-size: var(--ui-font-size-sm);
|
|
604
629
|
}
|
|
605
630
|
|
|
606
631
|
:global(:scope[data-ui-input-state~="size=lg"]) {
|
|
632
|
+
--_ui-input-size: var(--ui-control-size-lg);
|
|
633
|
+
--_ui-input-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
|
|
607
634
|
min-block-size: var(
|
|
608
635
|
--ui-input-min-block-size,
|
|
609
636
|
var(--_ui-default-input-min-block-size, var(--ui-control-size-lg))
|
|
610
637
|
);
|
|
611
|
-
padding: var(--
|
|
638
|
+
padding: var(--_ui-input-inset-block) var(--ui-space-4) !important;
|
|
612
639
|
font-size: var(--ui-font-size-md);
|
|
613
640
|
}
|
|
614
641
|
@media (pointer: coarse) {
|
package/vue/UiInputGroup.vue
CHANGED
|
@@ -269,6 +269,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
|
|
|
269
269
|
Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
|
|
270
270
|
--_ui-default-input-border-width: 0;
|
|
271
271
|
--_ui-default-input-min-block-size: 0;
|
|
272
|
+
--_ui-default-input-frame-width: calc(2 * var(--ui-border-width));
|
|
272
273
|
--_ui-default-input-border: transparent;
|
|
273
274
|
--_ui-default-input-border-hover: transparent;
|
|
274
275
|
--_ui-default-input-focus-border: transparent;
|
package/vue/UiSelect.vue
CHANGED
|
@@ -300,13 +300,22 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
|
|
|
300
300
|
|
|
301
301
|
@scope (.ui-select) to ([data-hn]) {
|
|
302
302
|
:global(:scope:where([data-hn-ui-select])) {
|
|
303
|
+
--_ui-select-size: var(--ui-control-size-md);
|
|
304
|
+
--_ui-select-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
|
|
303
305
|
box-sizing: border-box !important;
|
|
304
306
|
display: inline-block !important;
|
|
305
307
|
inline-size: var(--ui-select-inline-size, 100%);
|
|
306
308
|
min-inline-size: 0;
|
|
309
|
+
max-block-size: max(
|
|
310
|
+
var(--_ui-select-size),
|
|
311
|
+
calc(
|
|
312
|
+
1em * var(--ui-line-height-tight) + 2 * var(--_ui-select-inset-block) +
|
|
313
|
+
2 * var(--ui-border-width)
|
|
314
|
+
)
|
|
315
|
+
);
|
|
307
316
|
min-block-size: var(--ui-control-size-md);
|
|
308
317
|
margin: 0 !important;
|
|
309
|
-
padding: var(--
|
|
318
|
+
padding: var(--_ui-select-inset-block) var(--ui-space-3) !important;
|
|
310
319
|
border: var(--ui-border-width) solid
|
|
311
320
|
var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
|
|
312
321
|
border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
|
|
@@ -390,8 +399,10 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
|
|
|
390
399
|
}
|
|
391
400
|
|
|
392
401
|
:global(:scope[data-ui-select-state~="size=sm"]:where([data-hn-ui-select])) {
|
|
402
|
+
--_ui-select-size: var(--ui-control-size-sm);
|
|
403
|
+
--_ui-select-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
|
|
393
404
|
min-block-size: var(--ui-control-size-sm);
|
|
394
|
-
padding: var(--
|
|
405
|
+
padding: var(--_ui-select-inset-block) var(--ui-space-2) !important;
|
|
395
406
|
padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1))
|
|
396
407
|
!important;
|
|
397
408
|
background-position: right var(--ui-space-2) center, center;
|
|
@@ -402,8 +413,10 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
|
|
|
402
413
|
}
|
|
403
414
|
|
|
404
415
|
:global(:scope[data-ui-select-state~="size=lg"]:where([data-hn-ui-select])) {
|
|
416
|
+
--_ui-select-size: var(--ui-control-size-lg);
|
|
417
|
+
--_ui-select-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
|
|
405
418
|
min-block-size: var(--ui-control-size-lg);
|
|
406
|
-
padding: var(--
|
|
419
|
+
padding: var(--_ui-select-inset-block) var(--ui-space-4) !important;
|
|
407
420
|
padding-inline-end: calc(var(--ui-space-4) + 1.5rem) !important;
|
|
408
421
|
background-position: right var(--ui-space-4) center, center;
|
|
409
422
|
font-size: var(--ui-font-size-md);
|
package/vue/chunks/UiCombobox.js
CHANGED
|
@@ -2160,6 +2160,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
|
|
|
2160
2160
|
}]]);
|
|
2161
2161
|
};
|
|
2162
2162
|
}
|
|
2163
|
-
}), [["__scopeId", "data-v-
|
|
2163
|
+
}), [["__scopeId", "data-v-5b47db0f"]]);
|
|
2164
2164
|
//#endregion
|
|
2165
2165
|
export { UiCombobox_default as t };
|
package/vue/chunks/UiDialog.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { C as useReflectedProp, S as useComponentHost, _ as nativeAttrs, a as checkHydratedRoot, s as createDispatch, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
2
2
|
import { d as propValidityState, h as vuePropInputs, i as checkPropInput, m as vPropValidity, r as acceptsControllerWrite, t as BINDING_INPUTS_PROP } from "./props.js";
|
|
3
|
+
import { t as UiIcon_default } from "./UiIcon.js";
|
|
4
|
+
import { t as UiIconButton_default } from "./UiIconButton.js";
|
|
3
5
|
import { t as UiScrollArea_default } from "./UiScrollArea.js";
|
|
4
|
-
import { computed, createCommentVNode, createElementBlock, createElementVNode,
|
|
6
|
+
import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withCtx, withDirectives } from "vue";
|
|
5
7
|
//#region .build/vue/UiDialog.vue?vue&type=script&setup=true&lang.ts
|
|
6
8
|
var _hoisted_1 = [
|
|
7
9
|
"aria-label",
|
|
@@ -20,6 +22,10 @@ var _hoisted_2 = {
|
|
|
20
22
|
class: "title",
|
|
21
23
|
"data-hn-ui-dialog": ""
|
|
22
24
|
};
|
|
25
|
+
var _hoisted_3 = {
|
|
26
|
+
class: "close",
|
|
27
|
+
"data-hn-ui-dialog": ""
|
|
28
|
+
};
|
|
23
29
|
//#endregion
|
|
24
30
|
//#region .build/vue/UiDialog.vue
|
|
25
31
|
var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
|
|
@@ -319,18 +325,20 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
319
325
|
"data-hn-ui-dialog": "",
|
|
320
326
|
ref_key: "headerElement",
|
|
321
327
|
ref: headerElement
|
|
322
|
-
}, [
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
328
|
+
}, [checkedProps.value.label ? (openBlock(), createElementBlock("h2", _hoisted_2, toDisplayString(checkedProps.value.label), 1)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3, [createVNode(UiIconButton_default, {
|
|
329
|
+
class: "ui-icon-button",
|
|
330
|
+
size: "sm",
|
|
331
|
+
round: true,
|
|
332
|
+
label: "Close",
|
|
333
|
+
ref_key: "closeElement",
|
|
334
|
+
ref: closeElement
|
|
335
|
+
}, {
|
|
336
|
+
default: withCtx(() => [createVNode(UiIcon_default, {
|
|
337
|
+
class: "ui-icon",
|
|
338
|
+
name: "x"
|
|
339
|
+
})]),
|
|
340
|
+
_: 1
|
|
341
|
+
}, 512)])], 512),
|
|
334
342
|
createElementVNode("div", {
|
|
335
343
|
class: "body",
|
|
336
344
|
"data-hn-ui-dialog": "",
|
|
@@ -354,6 +362,6 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
354
362
|
}]]);
|
|
355
363
|
};
|
|
356
364
|
}
|
|
357
|
-
}), [["__scopeId", "data-v-
|
|
365
|
+
}), [["__scopeId", "data-v-45428506"]]);
|
|
358
366
|
//#endregion
|
|
359
367
|
export { UiDialog_default as t };
|
package/vue/chunks/UiInput.js
CHANGED
package/vue/chunks/UiSelect.js
CHANGED