@dosgato/dialog 1.1.20 → 1.1.22

package/dist/imageposition/FieldImagePosition.svelte

@@ -0,0 +1,197 @@
+<script>import { isNotBlank, randomid } from 'txstate-utils';
+import FieldStandard from '../FieldStandard.svelte';
+import Button from '../Button.svelte';
+import arrowsIn from '@iconify-icons/ph/arrows-in';
+import { Dialog } from '..';
+import { modifierKey, ScreenReaderOnly } from '@txstate-mws/svelte-components';
+export let id = undefined;
+export let path;
+export let imageSrc;
+export let label = '';
+export let required = false;
+export let conditional = undefined;
+export let helptext = undefined;
+export let info = undefined;
+export let defaultValue = { x: 50, y: 50 };
+let initialVal;
+function init(v) {
+    if (v) {
+        initialVal = v;
+    }
+    else {
+        initialVal = defaultValue;
+    }
+}
+const boxes = [];
+const descid = randomid();
+const labelid = randomid();
+let modalOpen = false;
+function showModal() {
+    modalOpen = true;
+}
+function hideModal() {
+    modalOpen = false;
+}
+let x, y;
+function onSave(setVal) {
+    setVal({ x: x * 25, y: y * 25 });
+    hideModal();
+}
+function onSelectBox(newX, newY) {
+    x = newX;
+    y = newY;
+    boxes[x + y * 5].focus();
+}
+function onKeyDown(e) {
+    if (modifierKey(e))
+        return;
+    if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        y = Math.min(y + 1, 4);
+    }
+    else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        y = Math.max(y - 1, 0);
+    }
+    else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        x = Math.min(x + 1, 4);
+    }
+    else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        x = Math.max(0, x - 1);
+    }
+    boxes[y + x * 5].focus();
+}
+const positionText = {
+    0: {
+        0: 'Top Left Corner',
+        1: 'Upper Left',
+        2: 'Middle Left',
+        3: 'Lower Left',
+        4: 'Bottom Left Corner'
+    },
+    1: {
+        0: 'Top Left of Center',
+        1: 'Upper Left of Center',
+        2: 'Middle Left of Center',
+        3: 'Below Left of Center',
+        4: 'Bottom, Left of Center'
+    },
+    2: {
+        0: 'Top Center',
+        1: 'Upper Center',
+        2: 'Dead Center',
+        3: 'Below Center',
+        4: 'Bottom Center'
+    },
+    3: {
+        0: 'Top, Right of Center',
+        1: 'Upper Right of Center',
+        2: 'Middle Right of Center',
+        3: 'Below Right of Center',
+        4: 'Bottom, Right of Center'
+    },
+    4: {
+        0: 'Top Right Corner',
+        1: 'Upper Right',
+        2: 'Middle Right',
+        3: 'Lower Right',
+        4: 'Bottom Right Corner'
+    }
+};
+let dialogWasOpened = false;
+function onDialogOpen() {
+    if (!dialogWasOpened) {
+        x = (initialVal.x ?? 50) / 25;
+        y = (initialVal.y ?? 50) / 25;
+        dialogWasOpened = true;
+    }
+}
+</script>
+
+<FieldStandard bind:id {label} {path} {required} {defaultValue} conditional={conditional && isNotBlank(imageSrc)} {helptext} {descid} let:value let:setVal let:helptextid>
+  {@const _ = init(value)}
+  {#if isNotBlank(imageSrc)}
+    <Button icon={arrowsIn} on:click={showModal}>Adjust Image Position</Button>
+    {#if modalOpen}
+      <Dialog size="large" title={label} on:escape={hideModal} continueText="Save" cancelText="Cancel" on:continue={() => onSave(setVal)} {labelid}>
+        {@const _dialogopen = onDialogOpen()}
+        {#if info}
+          <section class="info">
+            {info}
+          </section>
+        {/if}
+        <section class="position">
+          <p>
+            Using the grid overlays, select a focal point in your image to determine how Gato will align, position, and scale your image
+            in the section. This will help ensure the focal point of your image is always in frame. By default, Gato will
+            use the center of the image.
+          </p>
+          <div class="image-container">
+            <img class="crop-image" src={imageSrc} alt="" />
+            <div class="overlay" role="radiogroup" aria-labelledby={labelid}>
+              {#each Array.from(Array(5).keys()) as col}
+                {#each Array.from(Array(5).keys()) as row}
+                  <div
+                    bind:this={boxes[col + row * 5]}
+                    class="box"
+                    class:side={row === 4}
+                    class:bottom={col === 4}
+                    role="radio"
+                    aria-checked={row === x && col === y}
+                    tabindex={row === x && col === y ? 0 : -1}
+                    on:click={() => onSelectBox(row, col)} on:keydown={onKeyDown}><ScreenReaderOnly>{positionText[row][col]}</ScreenReaderOnly></div>
+                {/each}
+              {/each}
+            </div>
+          </div>
+        </section>
+      </Dialog>
+    {/if}
+  {/if}
+</FieldStandard>
+
+<style>
+  section.position {
+    border: 1px dashed #767676;
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .image-container {
+    width: 75%;
+    position: relative;
+  }
+  .crop-image {
+    width: 100%;
+    display: block;
+  }
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+  }
+  .overlay .box {
+    background-color: rgba(0, 0, 0, 0.5);
+    border-bottom: 1px dashed white;
+    border-right: 1px dashed white;
+  }
+  .overlay .box[aria-checked="true"] {
+    background-color: rgba(255, 255, 0, 0.5);
+  }
+  .overlay .box.side {
+    border-right-width: 0;
+  }
+  .overlay .box.bottom {
+    border-bottom-width: 0;
+  }
+
+</style>
+

package/dist/imageposition/FieldImagePosition.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import { type ImagePositionOutput } from '..';
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        path: string;
+        imageSrc: string | undefined;
+        label?: string;
+        required?: boolean;
+        conditional?: boolean | undefined;
+        helptext?: string | undefined;
+        info?: string | undefined;
+        defaultValue?: ImagePositionOutput;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FieldImagePositionProps = typeof __propDef.props;
+export type FieldImagePositionEvents = typeof __propDef.events;
+export type FieldImagePositionSlots = typeof __propDef.slots;
+export default class FieldImagePosition extends SvelteComponentTyped<FieldImagePositionProps, FieldImagePositionEvents, FieldImagePositionSlots> {
+}
+export {};

package/dist/imageposition/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FieldImagePosition } from './FieldImagePosition.svelte';
+export * from './position.js';

package/dist/imageposition/index.js

@@ -0,0 +1,2 @@
+export { default as FieldImagePosition } from './FieldImagePosition.svelte';
+export * from './position.js';

package/dist/imageposition/position.d.ts

@@ -0,0 +1,4 @@
+export interface ImagePositionOutput {
+    x: number;
+    y: number;
+}

package/dist/imageposition/position.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -42,3 +42,4 @@ export * from './helpers.js';
 export * from './tree/index.js';
 export * from './cropper/index.js';
 export * from './code/index.js';
+export * from './imageposition/index.js';

package/dist/index.js

@@ -42,3 +42,4 @@ export * from './helpers.js';
 export * from './tree/index.js';
 export * from './cropper/index.js';
 export * from './code/index.js';
+export * from './imageposition/index.js';

package/dist/tree/Tree.svelte.d.ts

@@ -6,10 +6,10 @@ declare class __sveltets_Render<T extends TreeItemFromDB> {
         headers: TreeHeader<T>[];
         searchable?: SearchableType<T>;
         filterable?: SearchableType<T>;
-        filter?: string | undefined;
+        filter?: string;
         nodeClass?: ((itm: T) => string) | undefined;
         singleSelect?: boolean | undefined;
-        enableResize?: boolean | undefined;
+        enableResize?: boolean;
         /**
            * Takes the width of the tree, in pixels, and returns an array of TreeHeader IDs that should be
            * displayed at that screen width. Any headers whose ID is not returned will be added to a dropdown, which allows

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "1.1.20",
+  "version": "1.1.22",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -23,28 +23,27 @@
     "@codemirror/lang-javascript": "^6.1.7",
     "@codemirror/lang-css": "^6.2.1",
     "@codemirror/lang-html": "^6.4.3",
-    "@iconify/svelte": "^3.1.6",
+    "@iconify/svelte": "^4.0.0",
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
-    "@txstate-mws/svelte-components": "^1.5.5",
+    "@txstate-mws/svelte-components": "^1.6.2",
     "@txstate-mws/svelte-forms": "^1.4.2",
     "codemirror": "^6.0.1",
     "txstate-utils": "^1.8.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/kit": "^1.0.1",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.1",
     "@sveltejs/package": "^2.0.1",
-    "eslint-config-standard-with-typescript": "^39.0.0",
+    "eslint-config-standard-with-typescript": "^43.0.0",
     "eslint-plugin-svelte": "^2.0.0",
     "svelte-check": "^3.0.1",
-    "svelte-preprocess": "^5.0.0",
-    "svelte2tsx": "^0.6.0",
+    "svelte": "^4.0.0",
     "tslib": "^2.3.1",
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "svelte": "^3.53.1 || ^4.0.0"
+    "svelte": "^3.53.1 || ^4.0.0 || ^5.0.0"
   },
   "files": ["dist"],
   "type": "module"