Skip to content

feat(date-range): preset feature #325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(date-range): preset feature #325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
949e93f
feat(date-range): added preset
lorka1 Jan 7, 2025
da19963
fix(date-range): changed preset and style
lorka1 Jan 8, 2025
4b10efb
Merge branch 'main' into 319
AnteSuvala Jan 9, 2025
846c63d
Merge branch 'main' into 319
AnteSuvala Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions packages/demo/src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,16 @@
import AutocompleteDemo from './FormFieldDemos/AutocompleteDemo.svelte';
import CheckboxDemo from './FormFieldDemos/CheckboxDemo.svelte';
import ChipsDemo from './FormFieldDemos/ChipsDemo.svelte';
import CkEditorDemo from './FormFieldDemos/CkEditorDemo.svelte';
import DateRangeDemo from './FormFieldDemos/DateRangeDemo.svelte';
import CkEditorDemo from './FormFieldDemos/CkEditorDemo.svelte'; */
import DateRangeDemo from './FormFieldDemos/DateRangeDemo.svelte'; /*
import DatepickerDemo from './FormFieldDemos/DatepickerDemo.svelte';
import FileListDemo from './FormFieldDemos/FileListDemo.svelte';
import MultiSearchDemo from './FormFieldDemos/MultiSearchDemo.svelte';
import QuillDemo from './FormFieldDemos/QuillDemo.svelte';
import RadioDemo from './FormFieldDemos/RadioDemo.svelte';
import RangeDemo from './FormFieldDemos/RangeDemo.svelte';
import SliderDemo from './FormFieldDemos/SliderDemo.svelte';
import RangeDemo from './FormFieldDemos/RangeDemo.svelte';
import SelectDemo from './FormFieldDemos/SelectDemo.svelte';
import SliderDemo from './FormFieldDemos/SliderDemo.svelte';
import TextareaDemo from './FormFieldDemos/TextareaDemo.svelte';
import ToggleDemo from './FormFieldDemos/ToggleDemo.svelte';
//EDITORS
Expand Down Expand Up @@ -91,7 +92,7 @@
<!-- <QuillDemo /> -->
<!-- <RadioDemo /> -->
<!-- <RangeDemo /> -->
<!-- <SelectDemo />-->
<!-- <SelectDemo /> -->
<!-- <SliderDemo /> -->
<!-- <TextareaDemo /> -->
<!-- <ToggleDemo /> -->
Expand Down
4 changes: 2 additions & 2 deletions packages/demo/src/FormFieldDemos/DateRangeDemo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@
<jp-date-range label="datepicker display format full" displayFormat="full" />
<jp-date-range minSelectableDays="2" label="minSelectableDays" />
<jp-date-range maxSelectableDays="10" label="maxSelectableDays" />
<jp-date-range minDate="2024-10-2" label="minDate string format" />
<jp-date-range minDate="2025-1-5" label="minDate string format" />
<jp-date-range {minDate} label="minDate date format" />
<jp-date-range maxDate="2024-10-2" label="maxDate string format" />
<jp-date-range maxDate="2025-1-3" label="maxDate string format" />
<jp-date-range {maxDate} label="maxDate date format" />
<jp-date-range label="required" required="true" />
<jp-date-range label="testiranje pozicije na dnu zaslona" /> -->
Expand Down
60 changes: 53 additions & 7 deletions packages/lib/src/form-fields/date-range/date-range.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,20 +93,65 @@
left: 0;
right: 0;
bottom: 0;

&-content {
position: absolute;
display: flex;
flex-direction: row;
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.16);
background-color: var(--background-primary);
}
}

&-presets {
z-index: 100;
display: flex;
flex-direction: column;
justify-content: center;
max-width: calc(280px + 2rem);
max-height: 395px;
padding: 1rem;
overflow-y: auto;
border-bottom-right-radius: 0.25rem;
background-color: var(--background-primary);
box-sizing: border-box;

> button {
display: flex;
justify-content: space-between;
align-items: center;
border: none;
gap: 0.75rem;
padding: 0.75rem;
text-align: left;
outline: none;
background-color: var(--background-primary);
border-radius: 0.25rem;

&:hover {
background-color: var(--background-secondary);
}

&:focus{
background-color: var(--primary-color);
color: var(--text-on-primary);
}
}
&-active {
background-color: var(--primary-color) !important;
color: var(--text-on-primary);
}
}

&-menu {
z-index: 100;
position: absolute;
display: flex;
flex-direction: column;
max-width: calc(280px + 2rem);
max-height: 395px;
padding: 1rem;
overflow-y: auto;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.16);
background-color: var(--background-primary);
box-sizing: border-box;

Expand Down Expand Up @@ -181,19 +226,20 @@
&-cell {
& button {
flex: 1 1 0;
padding: 0.25rem 1rem;
padding: 0.75rem 1rem;
width: 100%;
border: 0;
border-radius: 50%;
border-radius: 999px;
background-color: transparent;

&:not(:disabled):hover {
background-color: var(--primary-color);
color: var(--text-on-primary);
}
}

&-active {
background-color: var(--primary-color);
background-color: var(--primary-color) !important;
color: var(--text-on-primary);
}

Expand Down
Loading
Loading