@movvjs/svelte-schedule-view 0.3.0 → 0.4.1-beta-1

package/dist/schedule-view/Calender.svelte

@@ -0,0 +1,246 @@
+<script>import { dayjs } from "../dayjs";
+import { t } from "../i18n";
+import { range } from "lodash-es";
+import { clickOutside } from "./actions/clickOutside";
+export let format = "YYYY-MM-DD HH:mm:ss";
+export let maxYear = dayjs().year();
+export let minYear = 1980;
+export let disabledDate = (date) => false;
+let on = false;
+let target = dayjs().locale("en");
+let resolveFn;
+let rejectFn;
+let time = "am";
+let hour = 0;
+let minute = 0;
+let stdt = null;
+let selectedYear;
+let selectedMonth;
+$:
+  calendar = function() {
+    {
+      const cal = [];
+      const startWeek = target.startOf("month").week();
+      let endWeek = target.endOf("month").week();
+      let done = false;
+      if (endWeek === 1) {
+        let start = target.startOf("month");
+        let weekIndex = -1;
+        while (!done) {
+          start = start.add(1, "week").startOf("week");
+          weekIndex++;
+          done = target.month() !== start.month();
+        }
+        endWeek = startWeek + weekIndex;
+      }
+      for (let week = startWeek; week <= endWeek; week++) {
+        const days = Array(7).fill(0).map((n, i) => {
+          let day = target.week(week).startOf("week").clone().add(n + i, "day");
+          return day;
+        });
+        cal.push(days);
+      }
+      return cal;
+    }
+  }();
+$:
+  hour = function() {
+    if (time === "am") {
+      if (hour < 12)
+        return hour;
+      else
+        return hour === 12 ? 0 : hour - 12;
+    } else {
+      if (hour >= 12)
+        return hour;
+      else
+        return hour === 0 ? 12 : hour + 12;
+    }
+  }();
+export function open(startDate) {
+  return new Promise((resolve, reject) => {
+    resolveFn = resolve;
+    rejectFn = reject;
+    stdt = null;
+    let start = startDate;
+    if (start) {
+      target = dayjs(start).locale("en").startOf("month");
+      stdt = dayjs(start);
+      time = dayjs(start).hour() < 12 ? "am" : "pm";
+      hour = dayjs(start).hour();
+      minute = dayjs(start).minute();
+    }
+    on = true;
+  });
+}
+function cancel() {
+  close();
+  rejectFn();
+}
+function close() {
+  on = false;
+}
+function prev() {
+  target = target.subtract(1, "month").startOf("month");
+}
+function next() {
+  target = target.add(1, "month").startOf("month");
+}
+function select(date) {
+  if (disabledDate(date))
+    return;
+  stdt = date;
+}
+function complete() {
+  if (!stdt)
+    return;
+  resolveFn(stdt.hour(hour).minute(minute).second(0).format(format));
+  close();
+}
+</script>
+
+<article class="indie_calendar-comp-box" class:on use:clickOutside on:outclick={() => on && cancel()}>
+	{#if on}
+		<div class="title">
+			<p class="days">{target.format('YYYY.MM')}</p>
+
+			<div class="btns">
+				<button type="button" class="btn_cal prev" on:click={() => prev()}>이전 달력</button>
+				<!-- 클릭 시 scroll-select-box에 클래스 on 추가 -->
+				<button type="button" class="btn_calendar" on:click={() => (selectedYear = target.year())}>년도 선택</button>
+				<button type="button" class="btn_cal next" on:click={() => next()}>다음 달력</button>
+			</div>
+		</div>
+
+		<div class="calender_box">
+			<table class="indie_tbl_in_calendar">
+				<thead>
+					<tr>
+						<th>{dayjs().isoWeekday(7).format('ddd')}</th>
+						<th>{dayjs().isoWeekday(1).format('ddd')}</th>
+						<th>{dayjs().isoWeekday(2).format('ddd')}</th>
+						<th>{dayjs().isoWeekday(3).format('ddd')}</th>
+						<th>{dayjs().isoWeekday(4).format('ddd')}</th>
+						<th>{dayjs().isoWeekday(5).format('ddd')}</th>
+						<th>{dayjs().isoWeekday(6).format('ddd')}</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each calendar as week}
+						<tr>
+							{#each week as day}
+								<td
+									class:past={day.isBefore(target, 'month') || day.isAfter(target, 'month') || disabledDate(day)}
+									class:today={day.isSame(dayjs(), 'day')}
+									class:select={stdt && day.isSame(stdt, 'day')}>
+									<a href={null} on:click={() => select(day)}>{day.format('D')}</a>
+								</td>
+							{/each}
+						</tr>
+						<!-- content here -->
+					{/each}
+				</tbody>
+			</table>
+		</div>
+
+		<!-- 최종 완료 -->
+		<!-- disabled 추가 시 회색으로 변경 -->
+		<button type="button" class="indie_btn_nor blue lg btn_sec" disabled={!stdt} on:click|stopPropagation={complete}>
+			{$t('calender.selection-completed')}
+		</button>
+
+		<!-- <div class="time_box">
+			<p class="sbj">
+				The start time of the vehicle <br />
+				Please choose.
+			</p>
+			<p class="indie_select_line_form black">
+				<span>
+					<select>
+						<option>AM</option>
+						<option>PM</option>
+					</select>
+				</span>
+				<span>
+					<select>
+						<option>09</option>
+						<option>08</option>
+						<option>07</option>
+					</select>
+				</span>
+				<span>
+					<select>
+						<option>00</option>
+						<option>01</option>
+						<option>02</option>
+					</select>
+				</span>
+			</p>
+		</div> -->
+
+		<!-- 년도 선택 팝업 - 클래스 on 추가 시 표시 -->
+		<div class="scroll-select-box" class:on={!!selectedYear}>
+			<div class="title">
+				<p>{$t('calender.please-select-year')}</p>
+				<button type="button" class="btn_close" on:click={() => (selectedYear = null)}>Close</button>
+			</div>
+			<div class="select_b">
+				<ul class="list">
+					<!-- 클릭 시 li에 - 클래스 on 추가 -->
+					{#each range(maxYear, minYear - 1, -1) as year}
+						<li class:on={selectedYear === year}><a href={null} on:click={() => (selectedYear = year)}>{year}</a></li>
+					{/each}
+				</ul>
+			</div>
+			<div class="btns">
+				<!-- 
+              년도 클릭 전 disabled 추가 후 - Close로 변경
+              년도 클릭 시 disabled 제거 후 - Next로 변경 
+          -->
+				<button
+					type="button"
+					class="indie_btn_nor blue lg btn_sec"
+					on:click={() => {
+						target = target.set('year', selectedYear)
+						selectedYear = null
+						selectedMonth = target.month()
+					}}>{$t('calender.next')}</button>
+			</div>
+		</div>
+
+		<!-- 달 선택 팝업 (위에 년도 선택 후) - 클래스 on 추가 시 표시 -->
+		<div class="scroll-select-box" class:on={!!selectedMonth}>
+			<div class="title">
+				<p>{$t('calender.please-select-month')}</p>
+				<button type="button" class="btn_close" on:click={() => (selectedMonth = null)}>Close</button>
+			</div>
+			<div class="select_b">
+				<ul class="list">
+					<!-- 클릭 시 li에 - 클래스 on 추가 -->
+					{#each range(1, 13, 1) as month}
+						<li class:on={selectedMonth === month}>
+							<a
+								href={null}
+								on:click={() => {
+									selectedMonth = month
+								}}>{month}</a>
+						</li>
+					{/each}
+				</ul>
+			</div>
+			<div class="btns">
+				<!-- 
+              달 클릭 전 disabled 추가 후 - Select a year로 변경
+              달 클릭 시 disabled 제거 후 - Complete로 변경 
+          -->
+				<button
+					type="button"
+					class="indie_btn_nor blue lg btn_sec"
+					on:click={() => {
+						target = target.set('month', selectedMonth - 1) // ex) 3 = 4월
+						selectedMonth = null
+					}}>{$t('calender.complete')}</button>
+			</div>
+		</div>
+	{/if}
+</article>

package/dist/schedule-view/Calender.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { Dayjs } from 'dayjs';
+declare const __propDef: {
+    props: {
+        format?: string;
+        maxYear?: number;
+        minYear?: number;
+        disabledDate?: (date: Dayjs) => boolean;
+        open?: (startDate: string) => Promise<string>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CalenderProps = typeof __propDef.props;
+export type CalenderEvents = typeof __propDef.events;
+export type CalenderSlots = typeof __propDef.slots;
+export default class Calender extends SvelteComponent<CalenderProps, CalenderEvents, CalenderSlots> {
+    get open(): (startDate: string) => Promise<string>;
+}
+export {};

package/dist/schedule-view/Layout.svelte

@@ -6,10 +6,13 @@ import { env } from "../store/env";
 import { Alert, Confirm } from "./components/notifications";
 import Loader from "./components/loader/Loader.svelte";
 import { onMount } from "svelte";
-init({
-  fallbackLocale: "en",
-  initialLocale: "en"
-});
+export let initI18n;
+if (initI18n) {
+  init({
+    fallbackLocale: "en",
+    initialLocale: "en"
+  });
+}
 env.subscribe(($env) => {
   locale.set($env.locale);
   dayjs.locale($env.locale);

package/dist/schedule-view/Layout.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponent } from "svelte";
 import './assets/scss/indie_booking.scss';
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        initI18n: boolean;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/schedule-view/Schedule.svelte

@@ -30,6 +30,7 @@ const {
   fullName,
   selectedPrice
 } = copiedBooking;
+export let initI18n = true;
 let on = false;
 let resolver;
 $:
@@ -160,7 +161,7 @@ async function save() {
 </script>
 
 <Toaster />
-<Layout>
+<Layout {initI18n}>
 	<section class="indie_pop_wrap scroll" class:on>
 		{#if on}
 			<div class="pop_base full_2 indie_passengers_info_pop">

package/dist/schedule-view/Schedule.svelte.d.ts

@@ -13,6 +13,7 @@ export interface InitOption {
 import type { Locale, Target } from './types';
 declare const __propDef: {
     props: {
+        initI18n?: boolean;
         init?: (options: InitOption) => {
             open: ({ code }: {
                 code: string;

package/dist/schedule-view/actions/clickOutside.d.ts

@@ -0,0 +1,3 @@
+export declare function clickOutside(node: Node): {
+    destroy(): void;
+};

package/dist/schedule-view/actions/clickOutside.js

@@ -0,0 +1,15 @@
+// 바깥 영역 클릭시 이벤트
+// TODO: 다국어 두개 이상일 때 문제 발생하는 부분 있음. 수정 필요
+export function clickOutside(node) {
+    const handleClick = event => {
+        if (!node.contains(event.target)) {
+            node.dispatchEvent(new CustomEvent('outclick'));
+        }
+    };
+    document.addEventListener('click', handleClick, true);
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+}