accomadesc 0.0.14 → 0.1.1

package/dist/index.d.ts

@@ -2,12 +2,17 @@ import { randomName, randomID } from './names/gen.js';
 import Avatar from './basic/Avatar.svelte';
 import Button from './basic/Button.svelte';
 import Icon from './basic/Icon.svelte';
+import Notes from './basic/Notes.svelte';
 import Spinner from './basic/Spinner.svelte';
 import TextInput from './basic/TextInput.svelte';
 import AccoCard from './AccoCard.svelte';
 import AccoDescription from './AccoDescription.svelte';
 import AmenitiesCore from './AmenitiesCore.svelte';
+import BookingRequest from './BookingRequest.svelte';
 import Calendar from './Calendar.svelte';
+import CalendarGrid from './CalendarGrid.svelte';
+import CalendarRows from './CalendarRows.svelte';
+import ContactForm from './ContactForm.svelte';
 import CalendarAvailable from './CalendarAvailable.svelte';
 import LeafletMap from './LeafletMap.svelte';
 import Photo from './Photo.svelte';
@@ -17,6 +22,6 @@ import PricingShort from './PricingShort.svelte';
 import Section from './Section.svelte';
 import Text from './Text.svelte';
 import Weather from './Weather.svelte';
-export type { GridPhoto, LeafletMap as LeafletMapI, LeafletMapContent, Calendar as CalendarI, CalendarContent, CalendarAvailable as CalendarAvailableI, CalendarAvailableContent, Text as TextI, TextContent, Weather as WeatherI, WeatherContent, Photo as PhotoI, PhotoContent, PhotoGallery as PhotoGalleryI, PhotoGalleryContent, Pricing as PricingI, PricingContent, PricingShort as PricingShortI, PricingShortContent, PricingEntry, PricingRange, StaticRangeDate, StaticPricingRange, AmenitiesCore as AmenitiesCoreI, AmenitiesCoreContent, AccoCard as AccoCardI, AccoCardContent, CardContent, AccoDescription as AccoDescriptionI, AccoDescriptionContent, Section as SectionI, I18nFacade, Acco as AccoI, } from './types.js';
-export { PRICING_COLUMNS } from './types.js';
-export { randomID, randomName, Avatar, Button, Icon, Spinner, TextInput, AccoCard, AccoDescription, AmenitiesCore, Calendar, CalendarAvailable, LeafletMap, Photo, PhotoGallery, Pricing, PricingShort, Section, Text, Weather, };
+export type { GridPhoto, LeafletMap as LeafletMapI, LeafletMapContent, Calendar as CalendarI, CalendarContent, CalendarAvailable as CalendarAvailableI, CalendarAvailableContent, CalendarGrid as CalendarGridI, CalendarGridContent, CalendarRows as CalendarRowsI, CalendarRowsContent, Text as TextI, TextContent, Weather as WeatherI, WeatherContent, Photo as PhotoI, PhotoContent, PhotoGallery as PhotoGalleryI, PhotoGalleryContent, Pricing as PricingI, PricingContent, PricingShort as PricingShortI, PricingShortContent, PricingEntry, PricingRange, PricingColumn, StaticRangeDate, StaticPricingRange, AmenitiesCore as AmenitiesCoreI, AmenitiesCoreContent, AccoCard as AccoCardI, AccoCardContent, ContactForm as ContactFormI, ContactFormContent, BookingRequest as BookingRequestI, BookingRequestContent, CardContent, AccoDescription as AccoDescriptionI, AccoDescriptionContent, Section as SectionI, I18nFacade, Block, Acco as AccoI, } from './types.js';
+export { PRICING_COLUMNS, isAccoCard, isText, isPhoto, isGallery, isLeafletMap, isWeather, isAmenitiesCore, isCalendarAvailable, isCalendar, isCalendarGrid, isCalendarRows, isPricing, isPricingShort, isAccoDescription, isBookingRequest, isContactForm, } from './types.js';
+export { randomID, randomName, Avatar, Button, Icon, Spinner, TextInput, AccoCard, AccoDescription, AmenitiesCore, Calendar, CalendarAvailable, LeafletMap, Photo, PhotoGallery, Pricing, PricingShort, Section, Text, Weather, BookingRequest, ContactForm, CalendarRows, CalendarGrid, Notes, };

package/dist/index.js

@@ -3,12 +3,17 @@ import { randomName, randomID } from './names/gen.js';
 import Avatar from './basic/Avatar.svelte';
 import Button from './basic/Button.svelte';
 import Icon from './basic/Icon.svelte';
+import Notes from './basic/Notes.svelte';
 import Spinner from './basic/Spinner.svelte';
 import TextInput from './basic/TextInput.svelte';
 import AccoCard from './AccoCard.svelte';
 import AccoDescription from './AccoDescription.svelte';
 import AmenitiesCore from './AmenitiesCore.svelte';
+import BookingRequest from './BookingRequest.svelte';
 import Calendar from './Calendar.svelte';
+import CalendarGrid from './CalendarGrid.svelte';
+import CalendarRows from './CalendarRows.svelte';
+import ContactForm from './ContactForm.svelte';
 import CalendarAvailable from './CalendarAvailable.svelte';
 import LeafletMap from './LeafletMap.svelte';
 import Photo from './Photo.svelte';
@@ -18,5 +23,5 @@ import PricingShort from './PricingShort.svelte';
 import Section from './Section.svelte';
 import Text from './Text.svelte';
 import Weather from './Weather.svelte';
-export { PRICING_COLUMNS } from './types.js';
-export { randomID, randomName, Avatar, Button, Icon, Spinner, TextInput, AccoCard, AccoDescription, AmenitiesCore, Calendar, CalendarAvailable, LeafletMap, Photo, PhotoGallery, Pricing, PricingShort, Section, Text, Weather, };
+export { PRICING_COLUMNS, isAccoCard, isText, isPhoto, isGallery, isLeafletMap, isWeather, isAmenitiesCore, isCalendarAvailable, isCalendar, isCalendarGrid, isCalendarRows, isPricing, isPricingShort, isAccoDescription, isBookingRequest, isContactForm, } from './types.js';
+export { randomID, randomName, Avatar, Button, Icon, Spinner, TextInput, AccoCard, AccoDescription, AmenitiesCore, Calendar, CalendarAvailable, LeafletMap, Photo, PhotoGallery, Pricing, PricingShort, Section, Text, Weather, BookingRequest, ContactForm, CalendarRows, CalendarGrid, Notes, };

package/dist/names/gen.js

@@ -1,5 +1,5 @@
-import adjectives from './adjectives.json';
-import plants from './plants.json';
+import adjectives from './adjectives.json' with { type: 'json' };
+import plants from './plants.json' with { type: 'json' };
 const rndAdjective = () => {
     let i = Math.floor(Math.random() * adjectives.length);
     return adjectives[i];
@@ -12,7 +12,7 @@ const rndSpecies = () => {
 };
 const capWord = (w) => {
     const [firstLetter, ...rest] = w;
-    return `${firstLetter.toLocaleUpperCase()}${rest.join("")}`.trim();
+    return `${firstLetter.toLocaleUpperCase()}${rest.join('')}`.trim();
 };
 const rndName = () => {
     const adj = rndAdjective();

package/dist/occuplan/OccuPlanAvailableInfo.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { DateTime } from 'luxon';
+  import { normalizeDate } from '../helpers/normalizeDate.js';
+  import type { AvailableSpans } from './state.svelte.js';
+  import { getContext, setContext, type Snippet } from 'svelte';
+  import { OCCUPATION_STATE, OccupationState } from './state.svelte.js';
+  import Spinner from '../basic/Spinner.svelte';
+  import { browser } from '$app/environment';
+
+  let {
+    url,
+    search = [3, 7, 14],
+    maxFutureDate = normalizeDate(DateTime.utc().plus({ years: 1 })),
+    children,
+  }: {
+    url: string;
+    search?: number[];
+    maxFutureDate?: DateTime;
+    children: Snippet<[AvailableSpans]>;
+  } = $props();
+
+  const oStateID = `i-${url}-${OCCUPATION_STATE}`;
+  let occupationState: OccupationState = $state(getContext(oStateID));
+
+  $effect(() => {
+    if (!occupationState && browser) {
+      occupationState = new OccupationState(url);
+      setContext(oStateID, occupationState);
+    }
+  });
+  let av = $derived(occupationState ? occupationState.calcAvailability(search, maxFutureDate) : {});
+</script>
+
+{#if !occupationState || occupationState.loading}
+  <Spinner />
+{/if}
+
+{@render children(av)}

package/dist/occuplan/OccuPlanAvailableInfo.svelte.d.ts

@@ -0,0 +1,12 @@
+import { DateTime } from 'luxon';
+import type { AvailableSpans } from './state.svelte.js';
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    url: string;
+    search?: number[];
+    maxFutureDate?: DateTime;
+    children: Snippet<[AvailableSpans]>;
+};
+declare const OccuPlanAvailableInfo: import("svelte").Component<$$ComponentProps, {}, "">;
+type OccuPlanAvailableInfo = ReturnType<typeof OccuPlanAvailableInfo>;
+export default OccuPlanAvailableInfo;

package/dist/occuplan/OccuPlanGrid.svelte

@@ -0,0 +1,356 @@
+<script lang="ts">
+  import { DateTime, type MonthNumbers } from 'luxon';
+  import * as Sqrl from 'squirrelly';
+  import {
+    defaultMonthHeaderFormat,
+    defaultMonthLabels,
+    defaultWeekdayLabels,
+    OCCUPATION_STATE,
+    OccupationState,
+    occupationTypeFormatting,
+    realFirstMonth,
+    type FirstMonth,
+    type OccupationType,
+    type OccuplanTranslations,
+  } from './state.svelte.js';
+  import { getContext, setContext } from 'svelte';
+  import Button from '../basic/Button.svelte';
+  import { browser } from '$app/environment';
+  import Spinner from '../basic/Spinner.svelte';
+
+  let {
+    url,
+    header = '',
+    footer = '',
+    nextPage = '>',
+    prevPage = '<',
+    weekdayLabels = defaultWeekdayLabels,
+    monthLabels = defaultMonthLabels,
+    monthHeaderFormat = defaultMonthHeaderFormat,
+    numberOfMonth = 12,
+    maxWidth = '1200px',
+    firstMonth = DateTime.utc().month,
+    maxDate = DateTime.utc().plus({ years: 2 }),
+    minDate = DateTime.utc(),
+    typeLabels = {
+      one: 'BOOKING',
+      two: 'RESERVATION',
+      three: 'PERSONAL',
+    },
+  }: OccuplanTranslations & {
+    url: string;
+    numberOfMonth?: number;
+    firstMonth?: FirstMonth;
+    minDate?: DateTime;
+    maxDate?: DateTime;
+    maxWidth?: string;
+  } = $props();
+
+  const oStateID = `i-${url}-${OCCUPATION_STATE}`;
+  let occupationState: OccupationState = $state(getContext(oStateID));
+  $effect(() => {
+    if (!occupationState && browser) {
+      occupationState = new OccupationState(url);
+      setContext(oStateID, occupationState);
+    }
+  });
+
+  let formatFun = $derived(Sqrl.compile(monthHeaderFormat, { useWith: true }));
+  const monthHeader = (monthNum: MonthNumbers, year: number): string => {
+    const monthLabel = monthLabels[monthNum];
+    return formatFun({ month: monthLabel, year }, Sqrl.defaultConfig);
+  };
+
+  let page: number = $state(0);
+  let rfMonth: DateTime = $derived(realFirstMonth(firstMonth, numberOfMonth, page));
+
+  let currentMaxDate = $derived(rfMonth.plus({ month: numberOfMonth }));
+
+  let months: DateTime[] = $derived.by(() => {
+    const result = [];
+
+    let fMonth: DateTime = DateTime.utc(rfMonth.year, rfMonth.month, 1);
+
+    result.push(fMonth);
+
+    let nMonth = fMonth.plus({ months: 1 });
+    for (let c = 1; c < numberOfMonth; c++) {
+      result.push(nMonth);
+      nMonth = nMonth.plus({ months: 1 });
+    }
+    return result;
+  });
+
+  const nextClicked = () => {
+    page += 1;
+  };
+
+  const prevClicked = () => {
+    page -= 1;
+  };
+
+  let monthGridTemplateColumns = `[rowLegend] 1fr [d1] 1fr [d2] 1fr [d3] 1fr [d4] 1fr [d5] 1fr [d6] 1fr [d7] 1fr`;
+
+  let monthGridTemplateRows = (m: DateTime): string => {
+    let res = `[columnLegend] 1fr [w${m.weekNumber}] 1fr`;
+    let n = m.plus({ weeks: 1 });
+    for (let w = 1; w <= 5; w++) {
+      res += ` [w${n.weekNumber}] 1fr`;
+      n = n.plus({ weeks: 1 });
+    }
+    return res;
+  };
+
+  const weeks = (m: DateTime): DateTime[] => {
+    let n = m.plus({ weeks: 1 });
+    let res: DateTime[] = [m, n];
+    for (let i = 1; i <= 4; i++) {
+      n = n.plus({ weeks: 1 });
+      res.push(n);
+    }
+    return res;
+  };
+
+  const days = (m: DateTime): DateTime[] => {
+    //find first
+    let firstDay = m.startOf('week');
+
+    //find last
+    let lastDayOfMonth = m.endOf('month');
+    let lastDay = lastDayOfMonth.endOf('week');
+
+    let n = firstDay.plus({ days: 1 });
+    let res: DateTime[] = [firstDay];
+
+    while (n <= lastDay) {
+      res.push(n);
+      n = n.plus({ days: 1 });
+    }
+
+    return res;
+  };
+
+  const hiddenWeekNum = (m: DateTime, w: DateTime): boolean => {
+    let lastDayOfMonth = m.endOf('month');
+    let firstDayOfWeek = w.startOf('week');
+    return lastDayOfMonth < firstDayOfWeek;
+  };
+
+  let foundOccupationTypes: OccupationType[] = $derived(
+    occupationState?.occupations.reduce((res, occupation) => {
+      if (!res.includes(occupation.type)) {
+        res.push(occupation.type);
+      }
+      return res;
+    }, [] as OccupationType[]),
+  );
+</script>
+
+{#if !occupationState || occupationState.loading}
+  <Spinner />
+{/if}
+
+<section class="occuplan-wrapper" style="max-width: {maxWidth};">
+  <header class="occupation-plan-header">
+    <div class="header-controls">
+      {#if rfMonth >= minDate}
+        <Button text={`${prevPage}`} clicked={prevClicked} />
+      {/if}
+    </div>
+    <div class="header-label"><h3>{@html header}</h3></div>
+    <div class="header-controls">
+      {#if currentMaxDate <= maxDate}
+        <Button text={`${nextPage}`} clicked={nextClicked} />
+      {/if}
+    </div>
+  </header>
+  <main>
+    {#each months as m (`${m.year}-${m.month}`)}
+      <div class="month">
+        <header class="month-header">{monthHeader(m.month as MonthNumbers, m.year)}</header>
+        <div
+          style="
+            grid-template-columns: {monthGridTemplateColumns};
+            grid-template-rows: {monthGridTemplateRows(m)};
+          "
+          class="days"
+        >
+          <div class="weekday-header" style="grid-area: columnLegend / d1 / columnLegend / d1;">
+            {weekdayLabels[1]}
+          </div>
+          <div class="weekday-header" style="grid-area: columnLegend / d2 / columnLegend / d2;">
+            {weekdayLabels[2]}
+          </div>
+          <div class="weekday-header" style="grid-area: columnLegend / d3 / columnLegend / d3;">
+            {weekdayLabels[3]}
+          </div>
+          <div class="weekday-header" style="grid-area: columnLegend / d4 / columnLegend / d4;">
+            {weekdayLabels[4]}
+          </div>
+          <div class="weekday-header" style="grid-area: columnLegend / d5 / columnLegend / d5;">
+            {weekdayLabels[5]}
+          </div>
+          <div class="weekday-header" style="grid-area: columnLegend / d6 / columnLegend / d6;">
+            {weekdayLabels[6]}
+          </div>
+          <div class="weekday-header" style="grid-area: columnLegend / d7 / columnLegend / d7;">
+            {weekdayLabels[7]}
+          </div>
+
+          {#each days(m) as d (`${d.year}-${d.month}-${d.day}`)}
+            <div
+              class:weekend={[6, 7].includes(d.weekday)}
+              class:other-month={m.month !== d.month}
+              class="day"
+              style="
+                grid-area: w{d.weekNumber} / d{d.weekday} / w{d.weekNumber} / d{d.weekday};
+                {occupationState?.occupationStyle(
+                { day: d.day, month: d.month as MonthNumbers, year: d.year },
+                false,
+                maxDate,
+              )}
+                "
+            >
+              {d.day}
+            </div>
+          {/each}
+
+          {#each weeks(m) as w (`${w.year}-${w.month}-${w.weekNumber}`)}
+            <div
+              class:hidden={hiddenWeekNum(m, w)}
+              class="week-number"
+              style="grid-area: w{w.weekNumber} / rowLegend / w{w.weekNumber} / rowLegend;"
+            >
+              {w.weekNumber}
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/each}
+  </main>
+  <footer>
+    <div class="legend">
+      {#each foundOccupationTypes as t}
+        {@const format = occupationTypeFormatting(t)}
+        <span>{typeLabels[t]}</span>
+        <div
+          id="occupation-type-{t}-legend"
+          class="legend-entry-marker"
+          style="background-color: {format.bgColor};"
+        >
+          &nbsp;
+        </div>
+      {/each}
+    </div>
+    <div class="footer-content">
+      {@html footer}
+    </div>
+  </footer>
+</section>
+
+<style>
+  .footer-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  .legend-entry-marker {
+    outline: var(--occuplan-grid-border);
+  }
+
+  .month-header {
+    text-align: center;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .occupation-plan-header {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .header-label {
+    text-transform: capitalize;
+    font-weight: bold;
+    font-variant: small-caps;
+  }
+
+  .week-number {
+    text-align: left;
+    font-style: italic;
+    font-weight: lighter;
+    background-color: var(--occuplan-bg-color-weeknum);
+    color: var(--occuplan-font-color-weeknum);
+  }
+
+  .weekday-header {
+    text-align: center;
+    background-color: var(--occuplan-bg-color-days-header);
+    color: var(--occuplan-font-color-days-header);
+    grid-area: columnLegend / d1 / columnLegend / d1;
+  }
+
+  .day {
+    text-align: center;
+  }
+
+  .weekend {
+    font-weight: bold;
+  }
+
+  .occuplan-wrapper {
+    height: 100%;
+    width: calc(100% - 0.5rem);
+    padding: 0.5rem;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    border: var(--occuplan-main-border);
+    color: var(--occuplan-font-color-main);
+    background-color: var(--occuplan-bg-color-main);
+  }
+
+  main {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+    gap: 1rem;
+    width: 100%;
+  }
+
+  .month {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .days {
+    display: grid;
+  }
+
+  footer {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 1rem;
+  }
+
+  .legend {
+    display: grid;
+    grid-template-columns: [label] 1fr [marker] 1rem;
+    column-gap: 1rem;
+    text-transform: capitalize;
+    font-variant: small-caps;
+  }
+  .header-controls {
+    width: 2rem;
+  }
+</style>

package/dist/occuplan/OccuPlanGrid.svelte.d.ts

@@ -0,0 +1,13 @@
+import { DateTime } from 'luxon';
+import { type FirstMonth, type OccuplanTranslations } from './state.svelte.js';
+type $$ComponentProps = OccuplanTranslations & {
+    url: string;
+    numberOfMonth?: number;
+    firstMonth?: FirstMonth;
+    minDate?: DateTime;
+    maxDate?: DateTime;
+    maxWidth?: string;
+};
+declare const OccuPlanGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type OccuPlanGrid = ReturnType<typeof OccuPlanGrid>;
+export default OccuPlanGrid;