@insymetri/styleguide 0.1.24 → 0.1.26
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.
|
@@ -67,6 +67,13 @@
|
|
|
67
67
|
mobile: 'h-48 rounded-control text-default',
|
|
68
68
|
} as const
|
|
69
69
|
|
|
70
|
+
const itemDensityClasses = {
|
|
71
|
+
compact: 'py-4 text-tiny',
|
|
72
|
+
default: 'py-6 text-small',
|
|
73
|
+
comfortable: 'py-8 text-small',
|
|
74
|
+
mobile: 'py-10 text-default',
|
|
75
|
+
} as const
|
|
76
|
+
|
|
70
77
|
let inputValue = $state('')
|
|
71
78
|
let open = $state(false)
|
|
72
79
|
|
|
@@ -139,7 +146,10 @@
|
|
|
139
146
|
value={getItemValue(item)}
|
|
140
147
|
label={isSimpleItem(item) ? item.label : getItemValue(item)}
|
|
141
148
|
disabled={getItemDisabled?.(item) ?? false}
|
|
142
|
-
class=
|
|
149
|
+
class={cn(
|
|
150
|
+
'flex items-center gap-8 px-12 text-dropdown-item rounded-6 cursor-default transition-all duration-fast outline-none hover:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[selected]:bg-dropdown-item-selected data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed motion-reduce:transition-none',
|
|
151
|
+
itemDensityClasses[density.value]
|
|
152
|
+
)}
|
|
143
153
|
>
|
|
144
154
|
{#snippet children({selected})}
|
|
145
155
|
{#if renderItem}
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
<div class={cn('flex flex-col gap-4', className)}>
|
|
44
44
|
<DatePicker.Root bind:value {onValueChange} {disabled}>
|
|
45
45
|
{#if label}
|
|
46
|
-
<DatePicker.Label class="text-small-emphasis text-
|
|
46
|
+
<DatePicker.Label class="text-small-emphasis text-secondary">{label}</DatePicker.Label>
|
|
47
47
|
{/if}
|
|
48
48
|
<DatePicker.Input
|
|
49
49
|
class={cn(
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
items: Item[]
|
|
17
17
|
value?: string | undefined
|
|
18
18
|
placeholder?: string
|
|
19
|
+
label?: string
|
|
19
20
|
disabled?: boolean
|
|
20
21
|
onSelect?: (value: string) => void
|
|
21
22
|
matchTriggerWidth?: boolean
|
|
@@ -28,6 +29,7 @@
|
|
|
28
29
|
items,
|
|
29
30
|
value = $bindable(),
|
|
30
31
|
placeholder = 'Select...',
|
|
32
|
+
label,
|
|
31
33
|
disabled = false,
|
|
32
34
|
onSelect,
|
|
33
35
|
matchTriggerWidth = false,
|
|
@@ -45,6 +47,13 @@
|
|
|
45
47
|
mobile: 'h-48 rounded-control text-default',
|
|
46
48
|
} as const
|
|
47
49
|
|
|
50
|
+
const itemDensityClasses = {
|
|
51
|
+
compact: 'py-4 text-tiny',
|
|
52
|
+
default: 'py-6 text-small',
|
|
53
|
+
comfortable: 'py-8 text-small',
|
|
54
|
+
mobile: 'py-10 text-default',
|
|
55
|
+
} as const
|
|
56
|
+
|
|
48
57
|
let open = $state(false)
|
|
49
58
|
let triggerEl = $state<HTMLElement | null>(null)
|
|
50
59
|
let triggerWidth = $state<number | undefined>(undefined)
|
|
@@ -65,6 +74,10 @@
|
|
|
65
74
|
})
|
|
66
75
|
</script>
|
|
67
76
|
|
|
77
|
+
<div class="flex flex-col">
|
|
78
|
+
{#if label}
|
|
79
|
+
<span class="text-small-emphasis text-secondary mb-4">{label}</span>
|
|
80
|
+
{/if}
|
|
68
81
|
<DropdownMenu.Root bind:open>
|
|
69
82
|
<DropdownMenu.Trigger
|
|
70
83
|
bind:ref={triggerEl}
|
|
@@ -79,7 +92,7 @@
|
|
|
79
92
|
{#if renderSelected && selectedItem}
|
|
80
93
|
{@render renderSelected(selectedItem)}
|
|
81
94
|
{:else}
|
|
82
|
-
<span
|
|
95
|
+
<span>{selectedLabel}</span>
|
|
83
96
|
{/if}
|
|
84
97
|
<IIIcon iconName="caret-down" class="w-14 h-14 shrink-0" />
|
|
85
98
|
</DropdownMenu.Trigger>
|
|
@@ -98,7 +111,8 @@
|
|
|
98
111
|
<DropdownMenu.Item
|
|
99
112
|
disabled={item.disabled}
|
|
100
113
|
class={cn(
|
|
101
|
-
'flex items-center justify-between gap-12 px-12
|
|
114
|
+
'flex items-center justify-between gap-12 px-12 rounded-6 text-dropdown-item cursor-default outline-none data-[highlighted]:bg-dropdown-item-hover data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
|
|
115
|
+
itemDensityClasses[density.value],
|
|
102
116
|
value === item.value && 'text-dropdown-item-selected'
|
|
103
117
|
)}
|
|
104
118
|
onSelect={() => handleSelect(item)}
|
|
@@ -127,3 +141,4 @@
|
|
|
127
141
|
</DropdownMenu.Content>
|
|
128
142
|
</DropdownMenu.Portal>
|
|
129
143
|
</DropdownMenu.Root>
|
|
144
|
+
</div>
|
package/dist/style/colors.css
CHANGED