accomadesc 0.2.13 → 0.2.15

package/dist/BookingRequest.svelte

@@ -9,6 +9,7 @@
   import OccuPlanPicker from './occuplan/OccuPlanPicker.svelte';
   import { slide } from 'svelte/transition';
   import type { DateTime } from 'luxon';
+  import { randomID } from './names/gen.ts';
 
   const {
     endpoint,
@@ -25,16 +26,18 @@
     submitText,
     invalidText,
     maxCharsAllowed = 300,
+    preview = false,
     translateFunc,
     formatDateFunc,
   }: BookingRequestContent & I18nFacade = $props();
 
+  const id = randomID();
+
   let name = $state('');
   let email = $state('');
   let message = $state('');
   let arrival: DateTime | undefined = $state();
   let leave: DateTime | undefined = $state();
-  let disabled = $state(false);
   let inputDatesEngaged = $state(false);
 
   let currentCharsCount = $derived(message.length);
@@ -50,8 +53,7 @@
   let errored = $state(false);
   let successfullySent = $state(false);
   let sending = $state(false);
-
-  //https://popnapdkcdnabruxkjti.supabase.co/storage/v1/object/public/ical/81e66599-ac3c-4ad6-b261-fceeb784f9e9/050edcb4-680e-4542-96df-3ae4a2af89a5
+  let disabled = $derived(preview || errored || successfullySent);
 
   const url = calUrl;
   const oStateID = `i-${url}-${OCCUPATION_STATE}`;
@@ -128,31 +130,31 @@
 
   <form onsubmit={createRequest}>
     <input type="hidden" value={userID} />
-    <label for="name-input">
+    <label for={`${id}-name-input`}>
       <span class:disabled>{@html translateFunc ? translateFunc(nameLabel) : 'Name'}:</span>
     </label>
     <div class="input-wrapper">
       <TextInput
-        id="name-input"
+        id={`${id}name-input`}
         type="text"
         marginForMessage={false}
         bind:value={name}
         enabled={!disabled}
       />
     </div>
-    <label for="email-input">
+    <label for={`${id}-email-input`}>
       <span class:disabled>{@html translateFunc ? translateFunc(emailLabel) : 'Email'}:</span>
     </label>
     <div class="input-wrapper">
       <TextInput
-        id="email-input"
+        id={`${id}-email-input`}
         type="email"
         marginForMessage={false}
         bind:value={email}
         enabled={!disabled}
       />
     </div>
-    <label for="date-input">
+    <label for={`${id}-date-input`}>
       <span class:disabled
         >{@html translateFunc ? translateFunc(dateEntryLabel) : 'Vacation Dates'}:</span
       >
@@ -165,7 +167,8 @@
       {/if}
       <div class="date-input-wrapper" id="engage-date-buttons">
         <Button
-          id="date-input"
+          enabled={!disabled}
+          id={`${id}-date-input`}
           iconName="edit"
           size={1.8}
           clicked={engageDateInput}
@@ -190,18 +193,19 @@
     </label>
 
     <div class="message-wrapper">
-      {#if successfullySent}
-        <div class="success">
+      {#if preview}<div>[PREVIEW]</div>{/if}
+      {#if successfullySent || preview}
+        <div class="messsage success">
           {translateFunc ? translateFunc(successfullySentText) : 'Successfully Sent Email'}
         </div>
       {/if}
-      {#if errored}
-        <div class="error">
+      {#if errored || preview}
+        <div class="message error">
           {translateFunc ? translateFunc(sentErroredText) : 'Error Occurred Sending Email'}
         </div>
       {/if}
-      {#if invalid}
-        <div class="error">
+      {#if invalid || preview}
+        <div class="message error">
           {translateFunc ? translateFunc(invalidText) : 'Dates Are Not Available'}
         </div>
       {/if}
@@ -228,7 +232,6 @@
     background-color: var(--main-bg-color);
     color: var(--main-font-color);
 
-    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -245,6 +248,7 @@
     row-gap: 0.5rem;
 
     label {
+      align-content: center;
       grid-column-start: start;
       grid-column-end: gap-start;
     }
@@ -278,7 +282,7 @@
       grid-column-start: start;
       grid-column-end: end;
       display: flex;
-      justify-content: flex-start;
+      justify-content: space-between;
     }
     .button-wrapper {
       grid-column-start: start;
@@ -293,6 +297,11 @@
     color: var(--alert-font-color);
   }
 
+  .message {
+    display: flex;
+    justify-content: space-between;
+  }
+
   .success {
     color: var(--accept-font-color);
     font-weight: bolder;

package/dist/ContactForm.svelte

@@ -4,6 +4,7 @@
   import TextInput from './basic/TextInput.svelte';
   import Notes from './basic/Notes.svelte';
   import type { ContactFormContent, I18nFacade } from './types.js';
+  import { randomID } from './names/gen.ts';
 
   const {
     userID,
@@ -16,9 +17,12 @@
     successfullySentText,
     sentErroredText,
     maxCharsAllowed = 300,
+    preview = false,
     translateFunc,
   }: ContactFormContent & I18nFacade = $props();
 
+  const id = randomID();
+
   let name = $state('');
   let email = $state('');
   let question = $state('');
@@ -33,7 +37,8 @@
   let currentCharsCount = $derived(question.length);
   let showMaxCharsMessage = $derived(currentCharsCount > maxCharsAllowed - 50);
   let canSubmit: boolean = $derived(
-    name.length > 0 &&
+    !preview &&
+      name.length > 0 &&
       email.length > 0 &&
       question.length > 0 &&
       question.length <= maxCharsAllowed,
@@ -74,24 +79,43 @@
     }, 15000);
   };
 
-  let disabled = $derived(errored || successfullySent);
+  let disabled = $derived(preview || errored || successfullySent);
 </script>
 
 <div class="wrapper">
   {#if explainer}
     <div class="explainer">{@html translateFunc ? translateFunc(explainer) : ''}</div>
   {/if}
+
   <form onsubmit={submitMessage}>
     <input type="hidden" value={userID} />
-    <label class:disabled>
-      {@html translateFunc ? translateFunc(nameLabel) : 'Name'}:
-      <TextInput type="text" marginForMessage={false} bind:value={name} enabled={!disabled} />
+    <label for={`${id}-name`}>
+      <span class:disabled>{@html translateFunc ? translateFunc(nameLabel) : 'Name'}:</span>
     </label>
-    <label class:disabled>
-      {@html translateFunc ? translateFunc(emailLabel) : 'Email'}:
-      <TextInput type="email" marginForMessage={false} bind:value={email} enabled={!disabled} />
+    <div class="input-wrapper">
+      <TextInput
+        id={`${id}-name`}
+        type="text"
+        marginForMessage={false}
+        bind:value={name}
+        enabled={!disabled}
+      />
+    </div>
+    <label for={`${id}-email`}>
+      <span class:disabled>{@html translateFunc ? translateFunc(emailLabel) : 'Email'}:</span>
     </label>
-    <label class="row-label"
+
+    <div class="input-wrapper">
+      <TextInput
+        id={`${id}-email`}
+        type="email"
+        marginForMessage={false}
+        bind:value={email}
+        enabled={!disabled}
+      />
+    </div>
+
+    <label class="notes-input"
       ><div class:disabled>
         {@html translateFunc
           ? translateFunc(questionLabel)
@@ -99,19 +123,22 @@
             >&nbsp;({currentCharsCount}/{maxCharsAllowed})</span
           >{/if}:
       </div>
-
-      <Notes {disabled} changed={questionChanged} />
+      <Notes id={`${id}-notes`} {disabled} changed={questionChanged} />
     </label>
-    {#if successfullySent}
-      <div class="success">
-        {translateFunc ? translateFunc(successfullySentText) : 'Successfully Sent Email'}
-      </div>
-    {/if}
-    {#if errored}
-      <div class="error">
-        {translateFunc ? translateFunc(sentErroredText) : 'Error Occurred Sending Email'}
-      </div>
-    {/if}
+
+    <div class="message-wrapper">
+      {#if preview}<div>[PREVIEW]</div>{/if}
+      {#if successfullySent || preview}
+        <div class="success">
+          {translateFunc ? translateFunc(successfullySentText) : 'Successfully Sent Email'}
+        </div>
+      {/if}
+      {#if errored || preview}
+        <div class="error">
+          {translateFunc ? translateFunc(sentErroredText) : 'Error Occurred Sending Email'}
+        </div>
+      {/if}
+    </div>
     <div class="button-wrapper">
       <Button
         enabled={canSubmit && !disabled}
@@ -128,13 +155,13 @@
 <style>
   .explainer {
     margin-bottom: 1rem;
+    grid-column: span 2;
   }
 
   .wrapper {
     background-color: var(--main-bg-color);
     color: var(--main-font-color);
 
-    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -147,22 +174,42 @@
   }
 
   form {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 0.5rem;
-  }
+    display: grid;
+    grid-template-columns: [start] 1fr [gap-start] 0.5fr [gap-end] 3fr [end];
+    row-gap: 0.5rem;
+
+    label {
+      align-content: center;
+      grid-column-start: start;
+      grid-column-end: gap-start;
+    }
 
-  label {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    justify-content: space-between;
-  }
+    .message-wrapper {
+      margin-top: 1rem;
+      grid-column-start: start;
+      grid-column-end: end;
+      display: flex;
+      justify-content: space-between;
+    }
+    .button-wrapper {
+      grid-column-start: start;
+      grid-column-end: end;
+      display: flex;
+      justify-content: flex-start;
+    }
+    .input-wrapper {
+      grid-column-start: gap-end;
+      grid-column-end: end;
+    }
 
-  .row-label {
-    flex-direction: column;
-    gap: 0.2rem;
+    .notes-input {
+      margin-top: 2rem;
+      grid-column-start: start;
+      grid-column-end: end;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
   }
 
   .max-chars-message {

package/dist/PricingShort.svelte

@@ -5,7 +5,7 @@
   import type { I18nFacade, PricingShortContent, PricingEntry } from './types.js';
 
   let {
-    global = undefined,
+    global,
     entries = [],
     ranges = [],
     staticRanges = [],

package/dist/types.d.ts

@@ -263,6 +263,7 @@ export interface ContactFormContent {
     sentErroredText: string;
     maxCharsAllowed?: number;
     explainer?: string;
+    preview?: boolean;
 }
 export interface BookingRequest {
     id: string;
@@ -282,9 +283,9 @@ export interface BookingRequestContent {
     sentErroredText: string;
     invalidText: string;
     messageLabel: string;
-    numberOfNightsLabel: string;
     maxCharsAllowed?: number;
     explainer?: string;
+    preview?: boolean;
 }
 export type Block = Text | Photo | PhotoGallery | Calendar | CalendarAvailable | CalendarGrid | CalendarRows | Pricing | PricingShort | AmenitiesCore | Weather | LeafletMap | AccoCard | AccoDescription | ContactForm | BookingRequest | undefined;
 export interface FontSpec {

package/package.json

@@ -1,10 +1,12 @@
 {
 	"name": "accomadesc",
-	"version": "0.2.13",
+	"version": "0.2.15",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
 		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -49,8 +51,7 @@
 		"svelte": "^5.20.5",
 		"svelte-check": "^4.1.4",
 		"typescript": "^5.8.2",
-		"vite": "^6.2.0",
-		"vitest": "^2.1.9"
+		"vite": "^6.2.0"
 	},
 	"dependencies": {
 		"@dinero.js/currencies": "2.0.0-alpha.14",
@@ -62,7 +63,6 @@
 		"luxon": "^3.5.0",
 		"squirrelly": "^9.1.0"
 	},
-	"packageManager": "pnpm@10.5.2+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b",
 	"pnpm": {
 		"onlyBuiltDependencies": [
 			"esbuild"