Skip to content
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

Jump to bottom

docs: added calendar component document #432

Merged
merged 4 commits into from
Apr 7, 2024
Merged

docs: added calendar component document #432

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
b18f344
docs: added calendar component document
baiwusanyu-c Apr 3, 2024
70cbf06
feat: added calendar component dark mode
baiwusanyu-c Apr 3, 2024
801728d
test: updated unit test snap
baiwusanyu-c Apr 3, 2024
4aa36ec
test: updated unit test
baiwusanyu-c Apr 7, 2024
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
2 changes: 1 addition & 1 deletion components/Button/__test__/__snapshots__/button.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`Test: KButton > props: disabled 1`] = `"<button style="border-radius: 4

exports[`Test: KButton > props: disabled value change 1`] = `"<button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-cur-disabled k-button--disabled k-button--primary__animate" aria-hidden="true"> true </button>"`;

exports[`Test: KButton > props: ghost 1`] = `"<button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--success__ghost k-button--success__active k-button--success__focus k-button--success__border" aria-hidden="true"> </button><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--error__ghost k-button--error__active k-button--error__focus k-button--error__border" aria-hidden="true"> </button><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--warning__ghost k-button--warning__active k-button--warning__focus k-button--warning__border" aria-hidden="true"> </button><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--info__ghost k-button--info__active k-button--info__focus k-button--info__border" aria-hidden="true"> </button><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__ghost k-button--primary__active k-button--primary__focus k-button--primary__border" aria-hidden="true"> </button>"`;
exports[`Test: KButton > props: ghost 1`] = `"<button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--success__ghost k-button--success__ghost--dark k-button--success__active k-button--success__focus k-button--success__border" aria-hidden="true"> </button><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--error__ghost k-button--error__ghost--dark k-button--error__active k-button--error__focus k-button--error__border" aria-hidden="true"> </button><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--warning__ghost k-button--warning__ghost--dark k-button--warning__active k-button--warning__focus k-button--warning__border" aria-hidden="true"> </button><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--info__ghost k-button--info__ghost--dark k-button--info__active k-button--info__focus k-button--info__border" aria-hidden="true"> </button><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__ghost k-button--primary__ghost--dark k-button--primary__active k-button--primary__focus k-button--primary__border" aria-hidden="true"> </button>"`;

exports[`Test: KButton > props: icon 1`] = `"<button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--primary__fill k-button--primary__hover__fill k-button--primary__active k-button--primary__focus" aria-hidden="true"><span class="k-icon--base k-icon-transition icon-carbon-settings k-button--primary__icon k-button--primary__icon__fill" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span> </button>"`;

Expand Down
1 change: 1 addition & 0 deletions components/Button/src/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@
`${prefixCls}--base`,
{
[`${typePrefixCls}__ghost`]: !plain && ghost,
[`${typePrefixCls}__ghost--dark`]: !plain && ghost,
[`${typePrefixCls}__fill`]: !plain && !ghost,
[`${typePrefixClsHover}__fill`]: !plain && !ghost,
[typePrefixCls]: plain && !ghost,
Expand Down
38 changes: 19 additions & 19 deletions components/Calendar/__test__/__snapshots__/calendar.spec.ts.snap
View file
Open in desktop

Large diffs are not rendered by default.

74 changes: 55 additions & 19 deletions components/Calendar/__test__/calendar.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,15 @@ describe('Test: KCalendar', () => {
});
expect(instance).toBeTruthy();
expect(host!.innerHTML.includes('k-calendar--test')).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
});
test('props: value', async () => {
//@ts-ignore
const instance = new KCalendarValue({
target: host
});
expect(instance).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
const cellS = host.querySelector('.k-calendar-date-s');
expect(cellS.innerHTML).matchSnapshot();
});

test('props: locale', async () => {
Expand All @@ -56,12 +56,16 @@ describe('Test: KCalendar', () => {
target: host
});
expect(instance).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
const monthBtn = host.querySelectorAll('button')[1];
expect(monthBtn.innerHTML.includes('月')).toBeTruthy();
monthBtn.click();
const th = host.querySelectorAll('.k-calendar-thead')[0];
expect(th.innerHTML.includes('周一')).toBeTruthy();
const btns = host.querySelectorAll('.k-button');
expect(btns[0].innerHTML.includes('年')).toBeTruthy();
expect(btns[1].innerHTML.includes('月')).toBeTruthy();

btns[1].click();
await tick();
expect(host.innerHTML).matchSnapshot();
const v = host.querySelectorAll('.k-calendar-date-value')[0];
expect(v.innerHTML.includes('一月')).toBeTruthy();
});

test('props: fullscreen is false and mode is year', async () => {
Expand All @@ -74,7 +78,14 @@ describe('Test: KCalendar', () => {
}
});
expect(instance).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
expect(host.querySelector('.k-calendar-date-s-card')).toBeTruthy();
expect(host.querySelector('.k-calendar-card')).toBeTruthy();
expect(host.querySelector('.k-calendar-header-card')).toBeTruthy();
expect(host.querySelector('.k-calendar-thead-card')).toBeTruthy();
expect(host.querySelector('.k-calendar-cell-card')).toBeTruthy();
expect(host.querySelector('.k-calendar-panel-card')).toBeTruthy();
expect(host.querySelector('.k-calendar-date-s-card')).toBeTruthy();
expect(host.querySelector('.k-calendar-date-card-m')).not.toBeTruthy();
});

test('props: fullscreen is false and mode is month', async () => {
Expand All @@ -87,7 +98,14 @@ describe('Test: KCalendar', () => {
}
});
expect(instance).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
expect(host.querySelector('.k-calendar-date-s-card')).toBeTruthy();
expect(host.querySelector('.k-calendar-card')).toBeTruthy();
expect(host.querySelector('.k-calendar-header-card')).toBeTruthy();
expect(host.querySelector('.k-calendar-thead-card')).not.toBeTruthy();
expect(host.querySelector('.k-calendar-cell-card')).toBeTruthy();
expect(host.querySelector('.k-calendar-panel-card')).toBeTruthy();
expect(host.querySelector('.k-calendar-date-s-card')).toBeTruthy();
expect(host.querySelector('.k-calendar-date-card-m')).toBeTruthy();
});

test('props: mode', async () => {
Expand All @@ -96,12 +114,18 @@ describe('Test: KCalendar', () => {
target: host
});
expect(instance).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
let cells = host.querySelectorAll('.k-calendar-cell');
expect(cells.length).toBe(12);
let cellS = host.querySelector('.k-calendar-date-s');
expect(cellS.innerHTML).matchSnapshot();
const monthBtn = host.querySelectorAll('button')[0];
expect(monthBtn.innerHTML.includes('Year')).toBeTruthy();
monthBtn.click();
await tick();
expect(host.innerHTML).matchSnapshot();
cells = host.querySelectorAll('.k-calendar-cell');
expect(cells.length).toBe(42);
cellS = host.querySelector('.k-calendar-date-s');
expect(cellS.innerHTML).matchSnapshot();
});

test('props: disabledDate', async () => {
Expand Down Expand Up @@ -141,7 +165,6 @@ describe('Test: KCalendar', () => {
const opContainer = host.querySelector('[data-kv-key="2024_YY_"]');
expect(opContainer.children.length).toBe(1);
expect(opContainer.children[0].innerHTML.includes('2024')).toBeTruthy();
expect(host.innerHTML).matchSnapshot();

const yearBtn = host.querySelectorAll('button')[0];
expect(yearBtn.innerHTML.includes('Year')).toBeTruthy();
Expand All @@ -154,7 +177,6 @@ describe('Test: KCalendar', () => {
const opContainer2 = host.querySelector('[data-kv-key="4_MM_Apr"]');
expect(opContainer2.children.length).toBe(1);
expect(opContainer2.children[0].innerHTML.includes('Apr')).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
});

test('slots: header', async () => {
Expand All @@ -163,7 +185,8 @@ describe('Test: KCalendar', () => {
target: host
});
expect(instance).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
const header = host.querySelector('[slot="header"]');
expect(header.innerHTML).matchSnapshot();
});

test('slots: monthFullCell', async () => {
Expand All @@ -172,7 +195,10 @@ describe('Test: KCalendar', () => {
target: host
});
expect(instance).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
const cells = host.querySelectorAll('[slot="monthFullCell"]');
expect(cells.length).toBe(12);
const cellS = host.querySelector('.k-calendar-date-s');
expect(cellS.innerHTML).matchSnapshot();
});

test('slots: monthCell', async () => {
Expand All @@ -181,7 +207,10 @@ describe('Test: KCalendar', () => {
target: host
});
expect(instance).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
const cells = host.querySelectorAll('[slot="monthCell"]');
expect(cells.length).toBe(12);
const cellS = host.querySelector('.k-calendar-date-s');
expect(cellS.innerHTML).matchSnapshot();
});

test('slots: dateCell', async () => {
Expand All @@ -190,7 +219,10 @@ describe('Test: KCalendar', () => {
target: host
});
expect(instance).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
const cells = host.querySelectorAll('[slot="dateCell"]');
expect(cells.length).toBe(42);
const cellS = host.querySelector('.k-calendar-date-s');
expect(cellS.innerHTML).matchSnapshot();
});

test('slots: dateFullCell', async () => {
Expand All @@ -199,15 +231,19 @@ describe('Test: KCalendar', () => {
target: host
});
expect(instance).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
const cells = host.querySelectorAll('[slot="dateFullCell"]');
expect(cells.length).toBe(42);
const cellS = host.querySelector('.k-calendar-date-s');
expect(cellS.innerHTML).matchSnapshot();
});

test('events: panelChange', async () => {
const mockFn = vi.fn();
let data: any = null;
//@ts-ignore
const instance = new KCalendar({
target: host
target: host,
value: dayjs('2024-04-07')
});
expect(instance).toBeTruthy();
//@ts-ignore
Expand Down
2 changes: 1 addition & 1 deletion components/Calendar/__test__/fixture/slot.header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@
</script>

<KCalendar fullscreen value={v}>
<div slot="header">header</div>
<div slot="header">{v.format('YYYY-MM-DD')}</div>
</KCalendar>
2 changes: 1 addition & 1 deletion components/Calendar/__test__/fixture/slot.monthCell.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
let v = dayjs('2024-04-25');
</script>

<KCalendar fullscreen value={v}>
<KCalendar fullscreen value={v} mode="month">
<div slot="monthCell" let:month>{month.instance.month()}</div>
</KCalendar>
2 changes: 1 addition & 1 deletion components/Calendar/__test__/fixture/slot.monthFullCell.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
let v = dayjs('2024-04-25');
</script>

<KCalendar fullscreen value={v}>
<KCalendar fullscreen value={v} mode="month">
<div slot="monthFullCell" let:month>{month.instance.month()}</div>
</KCalendar>
38 changes: 29 additions & 9 deletions components/Calendar/src/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
import { localeConfig } from './locale';
import { createEventDispatcher } from 'svelte';

export let fullscreen: KCalendarProps['fullscreen'] = false;
export let fullscreen: KCalendarProps['fullscreen'] = true;
export let locale: KCalendarProps['locale'] = localeConfig;
export let mode: KCalendarProps['mode'] = 'year';
export let disabledDate: KCalendarProps['disabledDate'] = undefined;
Expand Down Expand Up @@ -100,6 +100,14 @@
if (isDisabled) return;
selectValue = day;
doUpdateCellList(isMY, selectValue);
const monthValue = `${day.month() + 1}`;
if (monthValue !== hMonth.value) {
hMonth = hMonthList.find((v: any) => v.value === monthValue) as {
label: string;
value: string;
id: string;
};
}
dispatch('select', { date: selectValue, source: isMY });
}

Expand All @@ -112,6 +120,7 @@
const prefixCls = getPrefixCls('calendar');
$: cnames = clsx(
prefixCls,
`${prefixCls}--dark`,
{
[`${prefixCls}-card`]: !fullscreen
},
Expand All @@ -129,17 +138,24 @@
const selectGroupCls = clsx(`${prefixCls}-header-select-group`);
const btnGroupCls = clsx(`${prefixCls}-header-btn-group`);
const btnCls = clsx(`${prefixCls}-header-btn`);
const panelCls = clsx({
[`${prefixCls}-panel`]: fullscreen,
[`${prefixCls}-panel-card`]: !fullscreen
});
const panelCls = clsx(
{
[`${prefixCls}-panel`]: fullscreen,
[`${prefixCls}-panel-card`]: !fullscreen
},
`${prefixCls}-panel--dark`
);
const panelDateCls = clsx(`${prefixCls}-date-panel`);
const panelBodyCls = clsx(`${prefixCls}-body`);
const contentCls = clsx(`${prefixCls}-content`);
const theadCls = clsx({
[`${prefixCls}-thead`]: fullscreen,
[`${prefixCls}-thead-card`]: !fullscreen
});
const theadCls = clsx(
{
[`${prefixCls}-thead`]: fullscreen,
[`${prefixCls}-thead-card`]: !fullscreen
},
`${prefixCls}-thead--dark`,
`${prefixCls}-thead-card--dark`
);
const cellCls = clsx(`${prefixCls}-cell`, {
[`${prefixCls}-cell-card`]: !fullscreen
});
Expand All @@ -153,6 +169,8 @@
[`${prefixCls}-date-card-m`]: !fullscreen && isMY === 'month'
},
{
[`${prefixCls}-date-hover--dark`]:
!selectValue || !(selectValue && day.format(fm) === selectValue.format(fm)),
[`${prefixCls}-date-hover`]:
!selectValue || !(selectValue && day.format(fm) === selectValue.format(fm)),
[`${prefixCls}-date-v`]: day.format(fm) === value.format(fm),
Expand All @@ -175,6 +193,8 @@
name="header"
mode={isMY}
handleYearSelect={handleHYearSelect}
year={hYear}
month={hMonth}
yearList={hYearList}
handleMonthSelect={handleHMonthSelect}
monthList={hYearList}
Expand Down
4 changes: 1 addition & 3 deletions components/Calendar/src/types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@ import type Dayjs from 'dayjs';
export type KCalendarProps = {
value?: Dayjs;
disabledDate?: (currentDate: Dayjs) => boolean;
/**
* TODO: 是否全屏显示，为 false 时则为卡片模式
*/
fullscreen?: boolean;
locale: Record<string, any>;
mode?: 'month' | 'year';
Expand All @@ -16,3 +13,4 @@ export type KCalendarProps = {
};

// TODO: dark mode
// TODO: 月份切换失败
2 changes: 1 addition & 1 deletion components/Calendar/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ export function genCellMonthRange(
const row = [];
for (let j = 0; j < 3; j++) {
const month = i + j + 1; // 月份从 1 开始
const monthDate = dayjs(`${year}-${month.toString().padStart(2, '0')}-${centerDate.date()}`);
const monthDate = dayjs(`${year}-${month.toString().padStart(2, '0')}-01`);
row.push({
current: true,
instance: monthDate,
Expand Down
Loading
Loading