diff --git a/.changeset/olive-snails-tie.md b/.changeset/olive-snails-tie.md new file mode 100644 index 000000000..53328610b --- /dev/null +++ b/.changeset/olive-snails-tie.md @@ -0,0 +1,8 @@ +--- +"@wizleap-inc/wiz-ui-react": minor +"@wizleap-inc/wiz-ui-next": minor +"@wizleap-inc/wiz-ui-constants": minor +"@wizleap-inc/wiz-ui-styles": minor +--- + +今日の日付を目立つようにする & キャンセル・適用ボタンの追加 diff --git a/.changeset/tender-vans-occur.md b/.changeset/tender-vans-occur.md new file mode 100644 index 000000000..6a9fee71e --- /dev/null +++ b/.changeset/tender-vans-occur.md @@ -0,0 +1,6 @@ +--- +"@wizleap-inc/wiz-ui-styles": minor +"@wizleap-inc/wiz-ui-example-react": minor +--- + +スクロールバーデザインを修正 diff --git a/examples/react/src/pages/home/index.tsx b/examples/react/src/pages/home/index.tsx index 4bea27a70..db66f2a10 100644 --- a/examples/react/src/pages/home/index.tsx +++ b/examples/react/src/pages/home/index.tsx @@ -18,6 +18,16 @@ export const Home = () => { +
+
test2
+
+
test
); diff --git a/packages/constants/component/aria-label.ts b/packages/constants/component/aria-label.ts index 374553272..6e982a5a7 100644 --- a/packages/constants/component/aria-label.ts +++ b/packages/constants/component/aria-label.ts @@ -36,4 +36,6 @@ export const ARIA_LABELS = { FULL_MODAL_VIEW: { CLOSE: "モーダルを閉じる", }, + APPLY: "適用", + CANCEL: "キャンセル", } as const; diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md index 084a446b0..9409694a4 100644 --- a/packages/styles/CHANGELOG.md +++ b/packages/styles/CHANGELOG.md @@ -1,5 +1,19 @@ # @wizleap-inc/wiz-ui-styles +## 0.36.0 + +### Minor Changes + +- [#1406](https://github.com/Wizleap-Inc/wiz-ui/pull/1406) [`d45ddae774b60d0bfca45911fff4e678f20368cd`](https://github.com/Wizleap-Inc/wiz-ui/commit/d45ddae774b60d0bfca45911fff4e678f20368cd) Thanks [@k-tada](https://github.com/k-tada)! - WizPanelSwitch のデザイン修正 + +- [#1425](https://github.com/Wizleap-Inc/wiz-ui/pull/1425) [`68514731756f38ac0fce1cc785ed29f8c26ae404`](https://github.com/Wizleap-Inc/wiz-ui/commit/68514731756f38ac0fce1cc785ed29f8c26ae404) Thanks [@RyushiAok](https://github.com/RyushiAok)! - Feat(timeline-item): 背景色として gray.200 を選択可能に + +## 0.35.1 + +### Patch Changes + +- [#1423](https://github.com/Wizleap-Inc/wiz-ui/pull/1423) [`ac0e286dbd06852327f369e47529f779e81dd28e`](https://github.com/Wizleap-Inc/wiz-ui/commit/ac0e286dbd06852327f369e47529f779e81dd28e) Thanks [@k-tada](https://github.com/k-tada)! - SnackBar の CSS に word-break を追加 + ## 0.35.0 ### Minor Changes diff --git a/packages/styles/bases/calendar.css.ts b/packages/styles/bases/calendar.css.ts index 08422e960..2f5ea8028 100644 --- a/packages/styles/bases/calendar.css.ts +++ b/packages/styles/bases/calendar.css.ts @@ -125,3 +125,11 @@ export const calendarItemInteractiveStyle = style([ }, }, ]); +export const calendarItemInteractiveTodayStyle = style([ + calendarItemInteractiveStyle, + { + border: `1px solid ${THEME.color.green[800]}`, + borderRadius: "50%", + boxSizing: "border-box", + }, +]); diff --git a/packages/styles/bases/panel-switch-input.css.ts b/packages/styles/bases/panel-switch-input.css.ts index 9283230fc..aedee99fe 100644 --- a/packages/styles/bases/panel-switch-input.css.ts +++ b/packages/styles/bases/panel-switch-input.css.ts @@ -4,17 +4,16 @@ import { THEME } from "@wizleap-inc/wiz-ui-constants"; export const panelSwitchStyle = style({ display: "flex", width: "max-content", - height: THEME.spacing.xl2, - backgroundColor: THEME.color.white["800"], + backgroundColor: THEME.color.gray["200"], borderRadius: THEME.spacing.xs2, - boxShadow: THEME.shadow.sm, }); export const panelSwitchBlockStyle = style({ + flex: 1, display: "flex", justifyContent: "center", alignItems: "center", - padding: `${THEME.spacing.no} ${THEME.spacing.sm}`, + padding: `${THEME.spacing.xs} ${THEME.spacing.sm}`, fontSize: THEME.fontSize.xs, borderTop: `1px solid ${THEME.color.gray["400"]}`, borderBottom: `1px solid ${THEME.color.gray["400"]}`, @@ -47,7 +46,7 @@ export const panelSwitchBlockRightStyle = style({ export const panelSwitchBlockColorStyle = styleVariants({ default: { - color: THEME.color.gray["600"], + color: THEME.color.gray["700"], }, active: { color: THEME.color.white["800"], diff --git a/packages/styles/bases/snackbar.css.ts b/packages/styles/bases/snackbar.css.ts index c493afc11..36f003c9f 100644 --- a/packages/styles/bases/snackbar.css.ts +++ b/packages/styles/bases/snackbar.css.ts @@ -6,6 +6,7 @@ export const snackbarStyle = style({ borderRadius: THEME.spacing.xs2, transitionDuration: "0.2s", boxShadow: THEME.shadow.sm, + wordBreak: "break-all", }); export const snackbarFixedStyle = style({ diff --git a/packages/styles/customs/timeline.css.ts b/packages/styles/customs/timeline.css.ts index 9fc0ca0a8..4716afc28 100644 --- a/packages/styles/customs/timeline.css.ts +++ b/packages/styles/customs/timeline.css.ts @@ -112,7 +112,6 @@ export const card = style({ width: "100%", borderRadius: THEME.spacing.xs2, overflow: "hidden", - backgroundColor: THEME.color.white[800], }); export const contents = style({ diff --git a/packages/styles/global.css b/packages/styles/global.css index 66ec06b23..ded7a644a 100644 --- a/packages/styles/global.css +++ b/packages/styles/global.css @@ -2,3 +2,21 @@ body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; } + +*::-webkit-scrollbar { + width: 12px; + height: 12px; +} + +*::-webkit-scrollbar-thumb { + background-color: #afb8b6; /* gray500 */ + border-radius: 6px; /* デザインシステム外だが、アクセシビリティのため少し大きめに設定 */ +} + +*::-webkit-scrollbar-track { + background-color: #eef0ef; /* gray300 */ +} + +*::-webkit-scrollbar-button { + display: none; +} diff --git a/packages/styles/package.json b/packages/styles/package.json index f07d9e1b1..b1bffec27 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -1,6 +1,6 @@ { "name": "@wizleap-inc/wiz-ui-styles", - "version": "0.35.0", + "version": "0.36.0", "main": "./dist/wiz-ui-styles.umd.js", "module": "./dist/wiz-ui-styles.es.js", "types": "./dist/index.d.ts", diff --git a/packages/wiz-ui-next/.storybook/preview.js b/packages/wiz-ui-next/.storybook/preview.js index 56ecfcf4d..cb2774ff4 100644 --- a/packages/wiz-ui-next/.storybook/preview.js +++ b/packages/wiz-ui-next/.storybook/preview.js @@ -16,6 +16,14 @@ export const parameters = { }, ], }, + screenshot: { + viewports: { + desktop: { + width: 1440, + height: 1024, + }, + }, + }, }; export const decorators = [withScreenshot]; diff --git a/packages/wiz-ui-next/CHANGELOG.md b/packages/wiz-ui-next/CHANGELOG.md index 953071bcd..6e25c96b0 100644 --- a/packages/wiz-ui-next/CHANGELOG.md +++ b/packages/wiz-ui-next/CHANGELOG.md @@ -1,5 +1,25 @@ # @wizleap-inc/wiz-ui-next +## 2.46.0 + +### Minor Changes + +- [#1407](https://github.com/Wizleap-Inc/wiz-ui/pull/1407) [`684209c361ebf26995bc9bb318d930082d2be2f9`](https://github.com/Wizleap-Inc/wiz-ui/commit/684209c361ebf26995bc9bb318d930082d2be2f9) Thanks [@k-tada](https://github.com/k-tada)! - PanelSwitch のデザイン変更 + +- [#1425](https://github.com/Wizleap-Inc/wiz-ui/pull/1425) [`68514731756f38ac0fce1cc785ed29f8c26ae404`](https://github.com/Wizleap-Inc/wiz-ui/commit/68514731756f38ac0fce1cc785ed29f8c26ae404) Thanks [@RyushiAok](https://github.com/RyushiAok)! - Feat(timeline-item): 背景色として gray.200 を選択可能に + +### Patch Changes + +- Updated dependencies [[`d45ddae774b60d0bfca45911fff4e678f20368cd`](https://github.com/Wizleap-Inc/wiz-ui/commit/d45ddae774b60d0bfca45911fff4e678f20368cd), [`68514731756f38ac0fce1cc785ed29f8c26ae404`](https://github.com/Wizleap-Inc/wiz-ui/commit/68514731756f38ac0fce1cc785ed29f8c26ae404)]: + - @wizleap-inc/wiz-ui-styles@0.36.0 + +## 2.45.2 + +### Patch Changes + +- Updated dependencies [[`ac0e286dbd06852327f369e47529f779e81dd28e`](https://github.com/Wizleap-Inc/wiz-ui/commit/ac0e286dbd06852327f369e47529f779e81dd28e)]: + - @wizleap-inc/wiz-ui-styles@0.35.1 + ## 2.45.1 ### Patch Changes diff --git a/packages/wiz-ui-next/package.json b/packages/wiz-ui-next/package.json index 04a8b687f..3802e12da 100644 --- a/packages/wiz-ui-next/package.json +++ b/packages/wiz-ui-next/package.json @@ -1,6 +1,6 @@ { "name": "@wizleap-inc/wiz-ui-next", - "version": "2.45.1", + "version": "2.46.0", "description": "A Vue3 UI Framework for Wizleap Inc.", "scripts": { "build": "vue-tsc --noEmit && vite build", diff --git a/packages/wiz-ui-next/src/components/base/calendar/calendar.stories.ts b/packages/wiz-ui-next/src/components/base/calendar/calendar.stories.ts index 55e26bf07..b95be4b66 100644 --- a/packages/wiz-ui-next/src/components/base/calendar/calendar.stories.ts +++ b/packages/wiz-ui-next/src/components/base/calendar/calendar.stories.ts @@ -179,3 +179,72 @@ FilledWeeks.parameters = { }, }, }; + +export const Today = Template.bind({}); +Today.args = { + currentMonth: new Date("2023-03"), + _today: new Date("2023-03-05"), +}; +Today.parameters = { + docs: { + description: { + story: + "本日の日付が丸で囲われるようになっています。通常利用では `_today` パラメータの設定は不要ですが、 `_today`パラメータを設定することで任意の日付を本日の日付として扱うことができます。", + }, + source: { + code: ` + + `, + }, + }, +}; + +export const DisabledToday = Template.bind({}); +DisabledToday.args = { + currentMonth: new Date("2023-03"), + _today: new Date("2023-03-05"), + disabledDate: (date: Date) => date.getDate() === 5, +}; +DisabledToday.parameters = { + docs: { + description: { + story: "本日の日付がdisabledの場合も丸で囲われます。", + }, + source: { + code: ` + + `, + }, + }, +}; + +export const SelectedToday = Template.bind({}); +SelectedToday.args = { + currentMonth: new Date("2023-03"), + _today: new Date("2023-03-05"), + activeDates: [{ date: new Date("2023-03-05"), state: "primary" }], +}; +SelectedToday.parameters = { + docs: { + description: { + story: "本日の日付がActiveの場合はActiveの見た目が優先されます。", + }, + source: { + code: ` + + `, + }, + }, +}; diff --git a/packages/wiz-ui-next/src/components/base/calendar/calendar.vue b/packages/wiz-ui-next/src/components/base/calendar/calendar.vue index 09b4ce34f..404740a07 100644 --- a/packages/wiz-ui-next/src/components/base/calendar/calendar.vue +++ b/packages/wiz-ui-next/src/components/base/calendar/calendar.vue @@ -50,7 +50,13 @@ ) " > -
+
{{ adjacent.current.day }}
@@ -99,6 +105,12 @@ const props = defineProps({ required: false, default: () => false, }, + // eslint-disable-next-line vue/prop-name-casing + _today: { + type: Date as PropType, + required: false, + default: new Date(), + }, }); const calendars = computed(() => { @@ -250,6 +262,17 @@ const updateSelectedDate = (row: number, col: number, day: string) => { } }; +const isToday = (row: number, col: number, day: string) => { + if (!isCurrentMonth(row, col)) return false; + const date = new Date( + props.currentMonth.getFullYear(), + props.currentMonth.getMonth(), + Number(day) + ); + + return date.toDateString() === (props._today || new Date()).toDateString(); +}; + const isActiveDate = computed(() => { const activeDatesSet = new Set( props.activeDates?.map((activeDate) => { diff --git a/packages/wiz-ui-next/src/components/base/index.ts b/packages/wiz-ui-next/src/components/base/index.ts index 6072f7f9a..b2e169f58 100644 --- a/packages/wiz-ui-next/src/components/base/index.ts +++ b/packages/wiz-ui-next/src/components/base/index.ts @@ -35,3 +35,4 @@ export * from "./popup-button-group"; export * from "./show-more-less"; export * from "./information-panel"; export * from "./loading-overlay"; +export * from "./panel-switch"; diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.stories.ts b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.stories.ts index aa92ec8d7..d023c2843 100644 --- a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.stories.ts +++ b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.stories.ts @@ -259,6 +259,7 @@ Test.play = async ({ canvasElement }) => { // その月の15日を選択 const body = within(canvasElement.ownerDocument.body); + const initialDate = new Date(date.getFullYear(), date.getMonth(), 1); const clickDate = new Date(date.getFullYear(), date.getMonth(), 15); const pastClickDate = new Date(date.getFullYear(), date.getMonth() - 1, 15); const clickDateEl = body.getByLabelText(_formatDateJp(clickDate)); @@ -270,11 +271,24 @@ Test.play = async ({ canvasElement }) => { `${_formatDateJp(clickDate)}-選択済み` ) ); + + // クリックした段階ではまだInputに反映されていないこと + await waitFor(() => + expect(button.textContent).toBe(_formatDateJp(initialDate)) + ); + + // 適用ボタンをクリック + const applyButton = body.getByText(ARIA_LABELS.APPLY); + await userEvent.click(applyButton); + // Input内が選択した日付になることを確認 await waitFor(() => expect(button.textContent).toBe(_formatDateJp(clickDate)) ); + // カレンダー再オープン + await userEvent.click(button); + // 月セレクターのPrevを1回押して操作月を1ヶ月前にする const monthSelectorPrev = body.getByLabelText( ARIA_LABELS.MONTH_SELECTOR_PREV @@ -296,6 +310,14 @@ Test.play = async ({ canvasElement }) => { ) ); + // Input内が選択した日付になることを確認 + await waitFor(() => + expect(button.textContent).toBe(_formatDateJp(new Date(clickDate))) + ); + + // 適用ボタンをクリック + await userEvent.click(applyButton); + // Input内が選択した日付になることを確認 await waitFor(() => expect(button.textContent).toBe(_formatDateJp(new Date(pastClickDate))) @@ -340,3 +362,48 @@ const date = ref(null); }, }, }; + +export const Today: StoryFn = (args) => ({ + components: { WizDatepicker, WizHStack }, + setup() { + const date = ref(new Date(2023, 2, 1)); + const isOpen = ref(true); + const setIsOpen = (value: boolean) => (isOpen.value = value); + const today = new Date(2023, 2, 5); + return { args, date, isOpen, setIsOpen, today }; + }, + template: ` + + `, +}); + +export const DisabledToday: StoryFn = (args) => ({ + components: { WizDatepicker, WizHStack }, + setup() { + const date = ref(new Date(2023, 2, 1)); + const isOpen = ref(true); + const setIsOpen = (value: boolean) => (isOpen.value = value); + const today = new Date(2023, 2, 15); + const disabledDate = (date: Date) => + date.getDate() >= 10 && date.getDate() < 17; + return { args, date, isOpen, setIsOpen, today, disabledDate }; + }, + template: ` + + `, +}); diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue index 9f740ac25..1f80c9c78 100644 --- a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue +++ b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue @@ -36,7 +36,7 @@
@@ -107,10 +107,10 @@ + + + + {{ ARIA_LABELS.CANCEL }} + + + {{ ARIA_LABELS.APPLY }} + +
@@ -147,11 +157,13 @@ import { PropType, computed, inject, ref } from "vue"; import { WizCalendar, + WizDivider, WizHStack, WizIcon, WizPopup, WizPopupContainer, WizText, + WizTextButton, WizVStack, } from "@/components"; import { @@ -231,6 +243,12 @@ const props = defineProps({ default: (date: Date) => `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`, }, + // eslint-disable-next-line vue/prop-name-casing + _today: { + type: Date as PropType, + required: false, + default: new Date(), + }, }); const emit = defineEmits(); @@ -239,7 +257,7 @@ const defaultCurrentMonth = props.modelValue || new Date(); const currentMonth = ref(defaultCurrentMonth); const setIsOpen = (value: boolean) => emit("update:isOpen", value); -const onClickCancel = () => emit("update:modelValue", null); +const tempDate = ref(props.modelValue); const clickToNextMonth = (e: KeyboardEvent | MouseEvent) => { e.preventDefault(); @@ -305,5 +323,24 @@ const variant = computed(() => { return "default"; }); -const handleClickCalendar = (date: Date) => (calendarValue.value = date); +const handleClickCalendar = (date: Date) => (tempDate.value = date); + +const onClickCancel = (e: MouseEvent) => { + e.stopPropagation(); + tempDate.value = null; + currentMonth.value = new Date(defaultCurrentMonth); + emit("update:modelValue", null); + setIsOpen(false); +}; + +const onClose = () => { + tempDate.value = calendarValue.value; + currentMonth.value = new Date(defaultCurrentMonth); + setIsOpen(false); +}; + +const onSubmit = () => { + calendarValue.value = tempDate.value; + setIsOpen(false); +}; diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts index feaec142b..ea608fe27 100644 --- a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts +++ b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts @@ -511,6 +511,16 @@ Test.play = async ({ canvasElement }) => { //左のCalenderから15日を選択 const body = within(canvasElement.ownerDocument.body); + const initialLeftDate = new Date( + intermediateDate.getFullYear(), + intermediateDate.getMonth(), + 0 + ); + const initialRightDate = new Date( + intermediateDate.getFullYear(), + intermediateDate.getMonth() + 1, + 0 + ); const leftClickDate = new Date( intermediateDate.getFullYear(), intermediateDate.getMonth() - 1, @@ -525,11 +535,26 @@ Test.play = async ({ canvasElement }) => { `${_formatDateJp(leftClickDate)}-選択済み` ) ); + + // クリックした段階ではまだInputに反映されていないこと + await waitFor(() => + expect(button.textContent).toBe( + `${_formatDateJp(initialLeftDate)}-${_formatDateJp(initialRightDate)}` + ) + ); + + // 適用ボタンをクリック + const applyButton = body.getByText(ARIA_LABELS.APPLY); + await userEvent.click(applyButton); + // Input内が選択した日付になることを確認 await waitFor(() => expect(button.textContent).toBe(_formatDateJp(leftClickDate) + "-終了日") ); + // カレンダー再オープン + await userEvent.click(button); + // 右のCalenderから15日を選択 const rightClickDate = new Date( intermediateDate.getFullYear(), @@ -545,12 +570,24 @@ Test.play = async ({ canvasElement }) => { `${_formatDateJp(rightClickDate)}-選択済み` ) ); + // クリックした段階ではまだInputに反映されていないこと + await waitFor(() => + expect(button.textContent).toBe(_formatDateJp(leftClickDate) + "-終了日") + ); + + // 適用ボタンをクリック + await userEvent.click(applyButton); + // Input内が選択した日付になることを確認 await waitFor(() => expect(button.textContent?.replace(/\s+/g, "")).toBe( `${_formatDateJp(leftClickDate)}-${_formatDateJp(rightClickDate)}` ) ); + + // カレンダー再オープン + await userEvent.click(button); + // data-is-selectedなボタンがrightClickedDate ~ leftClickedDateの間の数だけあることを確認 const diff = Math.floor( (rightClickDate.getTime() - leftClickDate.getTime()) / (1000 * 60 * 60 * 24) @@ -590,3 +627,81 @@ Test.play = async ({ canvasElement }) => { await userEvent.tab(); await userEvent.tab(); }; + +export const Today: StoryFn = (args) => ({ + components: { WizDateRangePicker }, + setup() { + const dateRange1 = ref({ + start: new Date(2000, 0, 15), + end: new Date(2000, 1, 15), + }); + const selectBoxValue1 = ref(); + const isOpen1 = ref(true); + const setIsOpen1 = (value: boolean) => (isOpen1.value = value); + const today = new Date(2000, 0, 28); + return { + dateRange1, + selectBoxValue1, + selectBoxOptions, + isOpen1, + setIsOpen1, + today, + args, + }; + }, + template: ` +
+ +
+ `, +}); + +export const DisabledToday: StoryFn = (args) => ({ + components: { WizDateRangePicker }, + setup() { + const dateRange1 = ref({ + start: new Date(2000, 0, 15), + end: new Date(2000, 1, 15), + }); + const selectBoxValue1 = ref(); + const isOpen1 = ref(true); + const setIsOpen1 = (value: boolean) => (isOpen1.value = value); + const today = new Date(2000, 0, 28); + const disabledDate = (date: Date) => + date.getDate() >= 20 && date.getDate() < 31; + return { + dateRange1, + selectBoxValue1, + selectBoxOptions, + isOpen1, + setIsOpen1, + today, + disabledDate, + args, + }; + }, + template: ` +
+ +
+ `, +}); diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue index 33b13a63f..71ce7dbeb 100644 --- a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue +++ b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue @@ -53,7 +53,7 @@ @@ -120,6 +120,7 @@ @click="handleDayClick" :disabledDate="disabledDate" :filledWeeks="true" + :_today="_today || new Date()" />
@@ -145,9 +146,19 @@ @click="handleDayClick" :disabledDate="disabledDate" :filledWeeks="true" + :_today="_today || new Date()" />
+ + + + {{ ARIA_LABELS.CANCEL }} + + + {{ ARIA_LABELS.APPLY }} + + @@ -163,6 +174,7 @@ import { computed, inject, PropType, ref } from "vue"; import { WizCalendar, WizCard, + WizDivider, WizHStack, WizICalendar, WizICancel, @@ -173,6 +185,7 @@ import { WizIExpandMore, WizPopup, WizPopupContainer, + WizTextButton, } from "@/components"; import { useClickOutside } from "@/hooks/use-click-outside"; import { formControlKey } from "@/hooks/use-form-control-provider"; @@ -237,6 +250,12 @@ const props = defineProps({ default: (date: Date) => `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`, }, + // eslint-disable-next-line vue/prop-name-casing + _today: { + type: Date as PropType, + required: false, + default: new Date(), + }, }); const emit = defineEmits(); @@ -263,10 +282,24 @@ const leftCalendarDate = computed(() => { ); return date; }); +const initializeRightCalendarDate = () => { + rightCalendarDate.value = new Date(); + const [start, end] = [props.modelValue.start, props.modelValue.end]; + if (end) { + rightCalendarDate.value = new Date(end); + } else if (start) { + rightCalendarDate.value = new Date( + start.getFullYear(), + start.getMonth() + 1, + 1 + ); + } else { + rightCalendarDate.value = new Date(); + } +}; const setIsOpen = (value: boolean) => emit("update:isOpen", value); -const onClickCancel = () => - emit("update:modelValue", { start: null, end: null }); +const tempDateRange = ref(props.modelValue); const moveToNextMonth = (e: KeyboardEvent | MouseEvent) => { e.preventDefault(); @@ -285,7 +318,7 @@ const selectedDates = computed(() => { date, state, }); - const [start, end] = [props.modelValue.start, props.modelValue.end]; + const [start, end] = [tempDateRange.value.start, tempDateRange.value.end]; if (start && end) { const secondaries: DateStatus[] = []; const tomorrowOfStart = new Date(start); @@ -306,17 +339,17 @@ const selectedDates = computed(() => { }); const handleDayClick = (date: Date) => { - const [start, end] = [props.modelValue.start, props.modelValue.end]; + const [start, end] = [tempDateRange.value.start, tempDateRange.value.end]; if (start && end) { - emit("update:modelValue", { start: date, end: null }); + tempDateRange.value = { start: date, end: null }; return; } if (start) { const [nextStart, nextEnd] = start > date ? [date, start] : [start, date]; - emit("update:modelValue", { start: nextStart, end: nextEnd }); + tempDateRange.value = { start: nextStart, end: nextEnd }; return; } - emit("update:modelValue", { start: date, end: null }); + tempDateRange.value = { start: date, end: null }; }; const toggleSelectBoxOpen = () => { @@ -349,4 +382,23 @@ const borderState = computed(() => { if (props.isOpen && !props.disabled) return "active"; return "default"; }); + +const onClickCancel = (e: MouseEvent) => { + e.stopPropagation(); + tempDateRange.value = { start: null, end: null }; + initializeRightCalendarDate(); + emit("update:modelValue", tempDateRange.value); + setIsOpen(false); +}; + +const onClose = () => { + tempDateRange.value = props.modelValue; + initializeRightCalendarDate(); + setIsOpen(false); +}; + +const onSubmit = () => { + emit("update:modelValue", tempDateRange.value); + setIsOpen(false); +}; diff --git a/packages/wiz-ui-next/src/components/base/inputs/index.ts b/packages/wiz-ui-next/src/components/base/inputs/index.ts index e1e0948f6..83272b14a 100644 --- a/packages/wiz-ui-next/src/components/base/inputs/index.ts +++ b/packages/wiz-ui-next/src/components/base/inputs/index.ts @@ -7,7 +7,6 @@ export * from "./selectbox"; export * from "./radio"; export * from "./radio-new"; export * from "./toggle-switch"; -export * from "./panel-switch"; export * from "./timepicker"; export * from "./date-picker"; export * from "./upload"; diff --git a/packages/wiz-ui-next/src/components/base/inputs/panel-switch/panel-switch.stories.ts b/packages/wiz-ui-next/src/components/base/inputs/panel-switch/panel-switch.stories.ts deleted file mode 100644 index 9a442ad81..000000000 --- a/packages/wiz-ui-next/src/components/base/inputs/panel-switch/panel-switch.stories.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { StoryFn, Meta } from "@storybook/vue3"; -import { ref } from "vue"; - -import { WizPanelSwitch } from "."; - -export default { - title: "Base/Input/PanelSwitch", - component: WizPanelSwitch, - argTypes: { - input: { - action: "input", - }, - }, -} as Meta; - -const Template: StoryFn = (args) => ({ - components: { WizPanelSwitch }, - setup() { - const value = ref(0); - return { value, args }; - }, - template: ` -
-

入力値：{{ value }}

- -
-`, -}); - -export const Default = Template.bind({}); -Default.args = { - items: [ - { label: "test1", value: 1 }, - { label: "test2", value: 2 }, - { label: "test3", value: 3 }, - { label: "test4", value: 4 }, - ], -}; diff --git a/packages/wiz-ui-next/src/components/base/inputs/panel-switch/index.ts b/packages/wiz-ui-next/src/components/base/panel-switch/index.ts similarity index 100% rename from packages/wiz-ui-next/src/components/base/inputs/panel-switch/index.ts rename to packages/wiz-ui-next/src/components/base/panel-switch/index.ts diff --git a/packages/wiz-ui-next/src/components/base/panel-switch/panel-switch.stories.ts b/packages/wiz-ui-next/src/components/base/panel-switch/panel-switch.stories.ts new file mode 100644 index 000000000..59453669e --- /dev/null +++ b/packages/wiz-ui-next/src/components/base/panel-switch/panel-switch.stories.ts @@ -0,0 +1,67 @@ +import { StoryFn, Meta } from "@storybook/vue3"; +import { ref } from "vue"; + +import { WizPanelSwitch } from "."; + +export default { + title: "Base/PanelSwitch", + component: WizPanelSwitch, + argTypes: { + modelValue: { + control: { type: "number" }, + }, + input: { + action: "input", + }, + }, +} as Meta; + +const Template: StoryFn = (args) => ({ + components: { WizPanelSwitch }, + setup() { + const value = ref(0); + return { value, args }; + }, + template: ` +
+

入力値：{{ value }}

+ +
+`, +}); + +const items = [ + { label: "test1", value: 1 }, + { label: "test2", value: 2 }, + { label: "test3", value: 3 }, + { label: "test4", value: 4 }, +]; + +export const Default = Template.bind({}); +Default.args = { + items, +}; + +export const Width = Template.bind({}); +Width.args = { + items, + width: "300px", +}; + +const ActiveTemplate: StoryFn = (args) => ({ + components: { WizPanelSwitch }, + setup() { + return { args }; + }, + template: ` +
+

入力値：{{ args.modelValue }}

+ +
+`, +}); +export const Active = ActiveTemplate.bind({}); +Active.args = { + items, + modelValue: 1, +}; diff --git a/packages/wiz-ui-next/src/components/base/inputs/panel-switch/panel-switch.vue b/packages/wiz-ui-next/src/components/base/panel-switch/panel-switch.vue similarity index 93% rename from packages/wiz-ui-next/src/components/base/inputs/panel-switch/panel-switch.vue rename to packages/wiz-ui-next/src/components/base/panel-switch/panel-switch.vue index 36935bb81..4d4033fd1 100644 --- a/packages/wiz-ui-next/src/components/base/inputs/panel-switch/panel-switch.vue +++ b/packages/wiz-ui-next/src/components/base/panel-switch/panel-switch.vue @@ -1,5 +1,5 @@