@invopop/popui 0.0.66 → 0.0.67
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/dist/DatePicker.svelte +9 -3
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -0
- package/package.json +1 -1
package/dist/DatePicker.svelte
CHANGED
|
@@ -17,6 +17,7 @@ import {
|
|
|
17
17
|
import { Icon } from "@steeze-ui/svelte-icon";
|
|
18
18
|
import { Calendar } from "@invopop/ui-icons";
|
|
19
19
|
import clsx from "clsx";
|
|
20
|
+
import { clickOutside } from "./clickOutside.js";
|
|
20
21
|
const dispatch = createEventDispatcher();
|
|
21
22
|
export let label = "Date";
|
|
22
23
|
export let position = "left";
|
|
@@ -29,7 +30,7 @@ $:
|
|
|
29
30
|
$:
|
|
30
31
|
styles = clsx({
|
|
31
32
|
"border-workspace-accent focus:border-workspace-accent shadow-active": isOpen,
|
|
32
|
-
"border-neutral-200": !isOpen
|
|
33
|
+
"border-neutral-200 hover:border-neutral-300": !isOpen
|
|
33
34
|
});
|
|
34
35
|
let datePickerEl;
|
|
35
36
|
let selectedLabel = label;
|
|
@@ -184,8 +185,10 @@ function getDisplayFromValue(value) {
|
|
|
184
185
|
<div>
|
|
185
186
|
<div class="relative">
|
|
186
187
|
<button
|
|
187
|
-
on:click={() =>
|
|
188
|
-
|
|
188
|
+
on:click={() => {
|
|
189
|
+
isOpen = !isOpen
|
|
190
|
+
}}
|
|
191
|
+
class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-8 border rounded-md text-neutral-800 placeholder-neutral-800 text-base"
|
|
189
192
|
>
|
|
190
193
|
{selectedLabel}
|
|
191
194
|
</button>
|
|
@@ -202,10 +205,13 @@ function getDisplayFromValue(value) {
|
|
|
202
205
|
leaveFrom="transform opacity-100 scale-100"
|
|
203
206
|
leaveTo="transform opacity-0 scale-95"
|
|
204
207
|
>
|
|
208
|
+
<!-- @ts-ignore -->
|
|
205
209
|
<div
|
|
206
210
|
class:left-0={position === 'left'}
|
|
207
211
|
class:right-0={position === 'right'}
|
|
208
212
|
class="bg-white inline-flex flex-col shadow rounded-lg absolute right-0 top-2 z-40"
|
|
213
|
+
use:clickOutside
|
|
214
|
+
on:click_outside={cancel}
|
|
209
215
|
>
|
|
210
216
|
<div class="flex border-b border-neutral-100 h-[300px]">
|
|
211
217
|
<div class="flex flex-col space-y-2 items-start p-3 border-r border-neutral-100">
|
package/dist/index.d.ts
CHANGED
|
@@ -33,6 +33,7 @@ import InputText from './InputText.svelte';
|
|
|
33
33
|
import InputTextarea from './InputTextarea.svelte';
|
|
34
34
|
import InputToggle from './InputToggle.svelte';
|
|
35
35
|
import MenuItem from './MenuItem.svelte';
|
|
36
|
+
import MenuItemCollapsible from './MenuItemCollapsible.svelte';
|
|
36
37
|
import ProfileAvatar from './ProfileAvatar.svelte';
|
|
37
38
|
import ProfileSelector from './ProfileSelector.svelte';
|
|
38
39
|
import SectionLayout from './SectionLayout.svelte';
|
|
@@ -50,4 +51,4 @@ import twTheme from './tw.theme.js';
|
|
|
50
51
|
import { resolveIcon } from './helpers.js';
|
|
51
52
|
import { getCountryName } from './helpers.js';
|
|
52
53
|
import { getStatusType } from './helpers.js';
|
|
53
|
-
export { BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, Breadcrumbs, ButtonFile, CardCheckbox, CardRelation, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, ProfileAvatar, ProfileSelector, SectionLayout, SeparatorHorizontal, ShortcutWrapper, StatusLabel, Tabs, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, UuidCopy, twTheme, resolveIcon, getCountryName, getStatusType };
|
|
54
|
+
export { BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, Breadcrumbs, ButtonFile, CardCheckbox, CardRelation, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, ProfileAvatar, ProfileSelector, SectionLayout, SeparatorHorizontal, ShortcutWrapper, StatusLabel, Tabs, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, UuidCopy, twTheme, resolveIcon, getCountryName, getStatusType };
|
package/dist/index.js
CHANGED
|
@@ -33,6 +33,7 @@ import InputText from './InputText.svelte'
|
|
|
33
33
|
import InputTextarea from './InputTextarea.svelte'
|
|
34
34
|
import InputToggle from './InputToggle.svelte'
|
|
35
35
|
import MenuItem from './MenuItem.svelte'
|
|
36
|
+
import MenuItemCollapsible from './MenuItemCollapsible.svelte'
|
|
36
37
|
import ProfileAvatar from './ProfileAvatar.svelte'
|
|
37
38
|
import ProfileSelector from './ProfileSelector.svelte'
|
|
38
39
|
import SectionLayout from './SectionLayout.svelte'
|
|
@@ -85,6 +86,7 @@ export {
|
|
|
85
86
|
InputTextarea,
|
|
86
87
|
InputToggle,
|
|
87
88
|
MenuItem,
|
|
89
|
+
MenuItemCollapsible,
|
|
88
90
|
ProfileAvatar,
|
|
89
91
|
ProfileSelector,
|
|
90
92
|
SectionLayout,
|