@per-diem-calculator/vanilla 1.0.0

package/src/ts/views/Location/template-row.html

@@ -0,0 +1,146 @@
+<li
+    data-pdc="location-row"
+    class="group [.pdc-row-open]:animate-row-location-open
+        sm:[.pdc-row-open]:animate-row-location-open-sm
+        [.pdc-row-close]:animate-row-location-close
+        sm:[.pdc-row-close]:animate-row-location-close-sm
+        [.pdc-row-delete]:animate-row-delete [.pdc-row-add]:animate-row-add
+        sm:[.pdc-row-add]:animate-row-add-sm relative flex h-0 items-start
+        overflow-hidden bg-white ring-2 ring-transparent transition-shadow
+        duration-500 [.pdc-row-initial]:h-[var(--row-location-open)]
+        sm:[.pdc-row-initial]:h-[var(--row-location-open-sm)]"
+>
+    <!-- Row sidebar: number, toggle -->
+    <div
+        data-pdc="location-row-sidebar"
+        class="relative z-10 mr-4 ml-2 h-[var(--row-location-open)] sm:mr-6
+            sm:ml-4 sm:h-[var(--row-location-open-sm)]"
+    >
+        <div
+            data-pdc="location-row-toggle"
+            class="my-6 flex h-12 w-full items-center text-neutral-800
+                transition-colors hover:cursor-pointer *:hover:cursor-pointer
+                group-not-[.pdc-row-close]:hover:[&_button_svg]:!-rotate-0
+                group-[.pdc-row-close]:hover:[&_button_svg]:!-rotate-180"
+        >
+            <button
+                title="Toggle row"
+                tabindex="0"
+                type="button"
+                class="focus-visible:border-primary-800 rounded-full border-3
+                    border-transparent transition-colors focus:outline-none"
+            >
+                <svg
+                    inert
+                    class="size-5 shrink-0 fill-none stroke-current
+                        transition-transform duration-500
+                        group-[.pdc-row-add]:-rotate-180
+                        group-[.pdc-row-close]:rotate-0
+                        group-[.pdc-row-initial]:-rotate-180
+                        group-[.pdc-row-open]:-rotate-180 sm:size-6"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M19 9l-7 7-7-7"
+                    />
+                </svg>
+            </button>
+            <h3
+                data-pdc="location-row-number"
+                class="ml-2 text-2xl font-semibold select-none"
+            ></h3>
+        </div>
+    </div>
+
+    <!-- Row contents: summary, details -->
+    <div
+        class="relative z-10 flex h-[var(--row-location-open)] w-full
+            items-start overflow-hidden sm:h-[var(--row-location-open-sm)]"
+    >
+        <!-- Summary -->
+        <div
+            data-pdc="location-row-toggle"
+            class="ml-1 flex h-24 w-full items-center justify-between
+                hover:cursor-pointer"
+        >
+            <div
+                data-pdc="location-row-summary"
+                inert
+                class="group-[.pdc-row-open]:animate-row-open-summary
+                    group-[.pdc-row-close]:animate-row-close-summary
+                    group-[.pdc-row-initial]:opacity-y-0 w-[77.5%]
+                    overflow-hidden text-sm
+                    group-[.pdc-row-add]:translate-y-[-200%]
+                    group-[.pdc-row-add]:opacity-0
+                    group-[.pdc-row-initial]:translate-y-[-200%] sm:text-base"
+            >
+                <p data-pdc="location-row-summary-dates" class="truncate">
+                    &nbsp;
+                </p>
+                <p data-pdc="location-row-summary-countrycity" class="truncate">
+                    &nbsp;
+                </p>
+            </div>
+
+            <!-- Delete row button -->
+            <button
+                tabindex="-1"
+                type="button"
+                data-pdc="delete-row"
+                title="Delete location"
+                class="hover:text-error-600 focus-visible:text-error-600
+                    focus-visible:border-b-primary-800
+                    group-[.pdc-row-open]:animate-row-open-deletebtn
+                    group-[.pdc-row-close]:animate-row-close-deletebtn mr-3
+                    border-b-4 border-b-transparent px-4 py-3 text-neutral-200
+                    **:transition-colors **:duration-300 **:ease-out
+                    group-[.pdc-row-add]:translate-x-[200%]
+                    group-[.pdc-row-initial]:translate-x-[200%]
+                    hover:cursor-pointer focus:outline-none"
+            >
+                <svg
+                    inert
+                    class="size-7 fill-current sm:size-8"
+                    data-pdc-unstyled="Delete Location"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 16 16"
+                >
+                    <path
+                        d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"
+                    />
+                    <path
+                        d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"
+                    />
+                </svg>
+            </button>
+        </div>
+
+        <!-- Details -->
+        <div
+            data-pdc="location-row-details"
+            class="group-[.pdc-row-open]:animate-row-open-details
+                group-[.pdc-row-add]:animate-row-open-details
+                group-[.pdc-row-close]:animate-row-close-details absolute top-0
+                left-[-100%] w-full overflow-hidden border-l-2
+                border-l-neutral-200 transition-colors
+                group-[.pdc-row-initial]:[transform:translateX(100%)]
+                group-[.pdc-row-initial]:opacity-100"
+        >
+            <pdc-location-date pdc="start" styled="true"></pdc-location-date>
+            <pdc-location-date pdc="end" styled="true"></pdc-location-date>
+            <pdc-location-category
+                pdc="category"
+                styled="true"
+            ></pdc-location-category>
+            <pdc-location-select
+                pdc="country"
+                styled="true"
+            ></pdc-location-select>
+            <pdc-location-select pdc="city" styled="true"></pdc-location-select>
+        </div>
+    </div>
+</li>

package/src/ts/views/Location/template.html

@@ -0,0 +1,130 @@
+<div
+    id="view-container"
+    class="group relative mx-auto max-w-xl overflow-hidden p-3
+        [transition:height_0.7s_ease] print:hidden"
+>
+    <!-- Heading, rows, error container -->
+    <div
+        id="locations-container"
+        class="relative z-10 overflow-hidden rounded-lg ring-2 ring-neutral-300
+            [transition:height_0.7s_eas]"
+    >
+        <div
+            class="border-b-2 border-b-neutral-200 bg-white p-4
+                text-neutral-900"
+        >
+            <h3 id="heading" class="text-xl font-semibold"></h3>
+            <p id="body" class="mt-2"></p>
+        </div>
+        <ul
+            id="rows"
+            class="z-10 overflow-hidden [transition:height_0.7s_ease]"
+        ></ul>
+        <!-- Error msg -->
+        <div
+            id="error"
+            class="bg-error-50 text-error-700 border-b-error-400 absolute
+                -top-16 z-20 flex h-16 w-full translate-y-0 border-b-3 p-4
+                font-medium transition-transform [.active]:translate-y-16"
+        ></div>
+    </div>
+
+    <!-- Add location button-->
+    <div
+        class="[.rows-open]:animate-rows-open-addRowBtn
+            [.rows-closed]:animate-rows-closed-addRowBtn relative z-0 -mt-5
+            w-full [transform:translateY(-100%)] text-center opacity-0"
+    >
+        <button
+            tabindex="-1"
+            type="button"
+            id="add-row"
+            title="Add additional location"
+            class="focus-visible:bg-primary-50 focus-visible:text-primary-800
+                focus-visible:ring-primary-800 hover:ring-primary-800
+                hover:text-primary-800 hover:bg-primary-50 translate-y-0
+                cursor-pointer rounded-full bg-neutral-50 p-1 text-neutral-300
+                ring-2 ring-neutral-300
+                transition-[box-shadow_background-color_transform] duration-500
+                hover:-translate-y-1 focus:outline-none focus-visible:ring-6"
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-8 fill-current transition-colors"
+                viewBox="0 0 16 16"
+            >
+                <path
+                    d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"
+                />
+            </svg>
+        </button>
+    </div>
+
+    <!-- Input for type of per diem (mie vs lodging vs both)-->
+    <fieldset
+        id="expense-category"
+        class="[.rows-open]:animate-rows-open-expenseCategoryBtn
+            [.rows-closed]:animate-rows-closed-expenseCategoryBtn relative mt-8
+            [transform:translateY(400%)] space-y-6 text-center print:hidden"
+    >
+        <div
+            class="*:hover:bg-primary-900 *:hover:text-primary-50
+                *:has-checked:bg-primary-900 *:has-checked:text-primary-50
+                bg-primary-50 text-primary-800 *:focus-visible:ring-primary-800
+                divide-primary-800 *:focus-visible:!bg-primary-50
+                *:focus-visible:!text-primary-800 border-primary-200 mx-auto
+                grid max-w-3xs grid-cols-3 divide-x overflow-hidden rounded-lg
+                border-2 text-center text-sm font-medium *:cursor-pointer
+                *:p-2.5 *:ring-2 *:ring-transparent
+                *:transition-[box-shadow_background-color_color] *:duration-500
+                *:select-none *:ring-inset *:focus:outline-none
+                *:focus-visible:ring-6 sm:max-w-2xs md:max-w-xs"
+        >
+            <label tabindex="-1" class="" for="mie">
+                <input
+                    type="radio"
+                    name="expenses-category"
+                    value="mie"
+                    id="mie"
+                    class="hidden"
+                />
+                M&IE
+            </label>
+            <label tabindex="-1" class="" for="lodging">
+                <input
+                    type="radio"
+                    name="expenses-category"
+                    value="lodging"
+                    id="lodging"
+                    class="hidden"
+                />
+                Lodging
+            </label>
+            <label tabindex="-1" class="" for="both">
+                <input
+                    type="radio"
+                    name="expenses-category"
+                    value="both"
+                    id="both"
+                    class="hidden"
+                    checked="true"
+                />
+                Both
+            </label>
+        </div>
+    </fieldset>
+
+    <!-- Button to trigger Expense view -->
+    <div
+        class="[.rows-open]:animate-rows-open-expensesCalculateBtn
+            [.rows-closed]:animate-rows-closed-expensesCalculateBtn mt-6 mb-8
+            w-full [transform:translateY(200%)] text-center print:hidden"
+    >
+        <pdc-button
+            styled="true"
+            id="calculate-expenses"
+            text="Calculate Expenses"
+            title="Calculate expenses"
+        ></pdc-button>
+    </div>
+</div>

package/src/ts/views/index.ts

@@ -0,0 +1,2 @@
+export { PdcExpenseView } from './Expense/Expense';
+export { PdcLocationView } from './Location/Location';

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+    "compilerOptions": {
+        "resolveJsonModule": true,
+        "types": ["vite/client"],
+
+        "target": "ES2022",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": ["ES2022", "DOM", "DOM.Iterable"],
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import legacy from '@vitejs/plugin-legacy';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+    plugins: [
+        legacy({
+            targets: ['defaults', 'not IE 11'],
+        }),
+        tailwindcss(),
+    ],
+});