Dialog WIP

v2/internal/runtime/js/core/dialog.js

@@ -12,7 +12,6 @@ The lightweight framework for web-like apps
 
 import { SendMessage } from 'ipc';
 
-
 /**
  * Open a dialog with the given parameters
  *
@@ -20,5 +19,5 @@ import { SendMessage } from 'ipc';
  * @param {object} options
  */
 export function Open(options) {
-	SendMessage('DO', JSON.stringify(options));
+	SendMessage('DO'+JSON.stringify(options));
 }

v2/test/kitchensink/dialog.go

@@ -0,0 +1,27 @@
+package main
+
+import (
+	"fmt"
+
+	wails "github.com/wailsapp/wails/v2"
+	"github.com/wailsapp/wails/v2/pkg/options"
+)
+
+// Dialog struct
+type Dialog struct {
+	runtime *wails.Runtime
+}
+
+// WailsInit is called at application startup
+func (l *Dialog) WailsInit(runtime *wails.Runtime) error {
+	// Perform your setup here
+	l.runtime = runtime
+	return nil
+}
+
+// Open Dialog
+func (l *Dialog) Open(options *options.OpenDialog) []string {
+	fmt.Printf("%#v\n", options)
+	// Perform your setup here
+	return l.runtime.Dialog.Open(options)
+}

v2/test/kitchensink/frontend/package-lock.json

@@ -135,9 +135,9 @@
       }
     },
     "@wails/runtime": {
-      "version": "1.0.10",
+      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@wails/runtime/-/runtime-1.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/@wails/runtime/-/runtime-1.1.0.tgz",
-      "integrity": "sha512-YXIBJOT0G09YwVhRA2GJoHkwr8uEnk8kvviu5jUiq8XLFnAB2Ff+9rgVLoae+Zyi+bdTxTypYKUbpxUiF6ZkDA==",
+      "integrity": "sha512-9YmFyIYgu5R1eaodusTYVQV/p+jSygnofr2ezAqI7/oDBHHWraS7hEePM1hbego+2podkzSQ+f48bfXtSPyHFQ==",
       "dev": true
     },
     "alphanum-sort": {
@@ -1470,9 +1470,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.1.12",
+      "version": "3.1.15",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.12.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.15.tgz",
-      "integrity": "sha512-1qstj9z5+x491jfiC4Nelk+f8XBad7LN20PmyWINJEMRSf3wcAjAWysw1qaA8z6NSKe2sjq1hRSDpBH5paCb6A==",
+      "integrity": "sha512-n8rXUZ8UU3lV6+43atPrSizqzh25n1/f00Wx1sCiE7R1sSHytZLTTiQl8DjC4IDLOnEZDlgJhy0yO4VsIpMxow==",
       "dev": true
     },
     "neo-async": {
@@ -1651,14 +1651,14 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.1.2",
+      "version": "8.1.3",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.3.tgz",
-      "integrity": "sha512-mToqEVFq8jF9TFhlIK4HhE34zknFJuNTgqtsr60vUvrWn+9TIYugCwiV1JZRxCuOrej2jjstun1bn4Bc7/1HkA==",
+      "integrity": "sha512-AKsHGqd7HmXmL/EgyAjI4Gx719A5yQdt9HzyXrI8M/hzxfumecYS95kfvIt40UZqPVNoEt0Va1M3PG54XtNPbg==",
       "dev": true,
       "requires": {
         "colorette": "^1.2.1",
         "line-column": "^1.0.2",
-        "nanoid": "^3.1.12",
+        "nanoid": "^3.1.15",
         "source-map": "^0.6.1"
       }
     },
@@ -3429,9 +3429,9 @@
       }
     },
     "svelte-preprocess": {
-      "version": "4.5.1",
+      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.5.2.tgz",
-      "integrity": "sha512-fZiLMg+mJzp5y4bsvBtl6wE1WCp+s5L87BoKMONGLXk8HSZD5HuRJzxhM0yhM9LHF0jP5kYG22P2Vc/vrv4I0A==",
+      "integrity": "sha512-ClUX5NecnGBwI+nJnnBvKKy0XutCq5uHTIKe6cPhpvuOj9AAnyvef9wOZAE93yr85OKPutGCNIJa/X1TrJ7O0Q==",
       "dev": true,
       "requires": {
         "@types/pug": "^2.0.4",

v2/test/kitchensink/frontend/package.json

@@ -11,10 +11,10 @@
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",
     "@rollup/plugin-url": "^5.0.1",
-    "@wails/runtime": "^1.0.10",
+    "@wails/runtime": "^1.1.0",
     "focus-visible": "^5.2.0",
     "halfmoon": "^1.1.1",
-    "postcss": "^8.1.2",
+    "postcss": "^8.1.3",
     "postcss-import": "^12.0.1",
     "rollup": "^2.32.1",
     "rollup-plugin-livereload": "^1.0.0",
@@ -25,7 +25,7 @@
     "sirv-cli": "^0.4.4",
     "svelte": "^3.29.4",
     "svelte-highlight": "^0.6.2",
-    "svelte-preprocess": "^4.5.1"
+    "svelte-preprocess": "^4.5.2"
   },
   "dependencies": {}
 }

v2/test/kitchensink/frontend/src/components/CodeSnippet.svelte

@@ -18,7 +18,7 @@
 
 </script>
 
-<div data-wails-no-drag class={$darkMode ? "codeblock" : "codeblock-light"}>
+<div data-wails-no-drag class="allow-select {$darkMode ? 'codeblock' : 'codeblock-light'}">
     <Highlight language="{lang}" {code} style="margin: -5px;"/>
 </div>
 

v2/test/kitchensink/frontend/src/pages/Dialog/Dialog.svelte

@@ -0,0 +1,11 @@
+<script>
+    import Open from './Open/Open.svelte';
+</script>
+<div>
+    The ability to open a dialog and prompt the user to select files or directories is provided as part of the <code>runtime.Dialog</code> component.
+    
+    <br/><br/>
+    
+    <Open></Open>
+</div>
+

v2/test/kitchensink/frontend/src/pages/Dialog/Open/Open.svelte

@@ -0,0 +1,102 @@
+<script>
+    import { Dialog } from '@wails/runtime';
+    import CodeBlock from '../../../components/CodeBlock.svelte';
+    import CodeSnippet from '../../../components/CodeSnippet.svelte';
+    import jsCode from './code.jsx';
+    import goCode from './code.go';
+
+    var isJs = false;
+    $: lang = isJs ? 'Javascript' : 'Go';
+    var id = "Dialog";
+
+    let options = {
+        "DefaultDirectory":           "",
+        "DefaultFilename":            "",
+        "Title":                      "",
+        "Filters":                    "",
+        "AllowFiles":                 false,
+        "AllowDirectories":           false,
+        "AllowMultiple":              false,
+        "ShowHiddenFiles":            false,
+        "CanCreateDirectories":       false,
+        "ResolveAliases":             false,
+        "TreatPackagesAsDirectories": false
+    }
+
+    function processOpen() {
+        if( isJs ) {
+            console.log(options);
+            Dialog.Open(options);
+        } else {
+            backend.main.Dialog.Open(options).then( (result) => {
+                console.log(result);
+            });            
+        }
+    }
+
+    $: encodedJSOptions = JSON.stringify(options, null, "  ");
+    $: encodedGoOptions = encodedJSOptions
+        .replace(/\ {2}"(.*)":/mg, "  $1:")
+        .replace(/\n}/, ",\n}");
+    
+    $: testcodeJs = "import { runtime } from '@wails/runtime';\nruntime.Dialog.Open(" + encodedJSOptions + ");";
+    $: testcodeGo = '// runtime is given through WailsInit()\nimport "github.com/wailsapp/wails/v2/pkg/options"\n\nselectedFiles := runtime.Dialog.Open( &options.OpenDialog' + encodedGoOptions + ')'; 
+
+</script>
+
+<CodeBlock bind:isJs={isJs} {jsCode} {goCode} title="Open" {id} showRun=true>
+    <div class="browser-form">
+        <form data-wails-no-drag class="mw-full"> 
+            <div class="form-row row-eq-spacing-sm">
+                <div class="col-sm">
+                    <label for="{id}-Title">Title</label>
+                    <input type="text" class="form-control" id="{id}-Title" bind:value="{options.Title}">
+                    <div class="form-text"> The title for the dialog </div>
+                </div>        
+                <div class="col-sm">
+                    <label for="{id}-defaultDirectory">Default Directory</label>
+                    <input type="text" class="form-control" id="{id}-defaultDirectory" bind:value="{options.DefaultDirectory}">
+                    <div class="form-text"> The directory the dialog will default to </div>
+                </div>
+            </div>
+            <div class="form-row row-eq-spacing-sm">
+                <div class="col-sm">
+                    <label for="{id}-defaultFilename">Default Filename</label>
+                    <input type="text" class="form-control" id="{id}-defaultFilename" bind:value="{options.DefaultFilename}">
+                    <div class="form-text"> The filename the dialog will suggest to use </div>
+                </div>                
+                <div class="col-sm">
+                    <label for="{id}-Filters">Filters</label>
+                    <input type="text" class="form-control" id="{id}-Filters" bind:value="{options.Filters}">
+                    <div class="form-text"> A list of extensions eg <code>*.jpg,*.jpeg</code> </div>
+                </div>       
+            </div>     
+            <div class="form-row row-eq-spacing-sm">
+                <div class="col-sm">
+                    <input type="checkbox" id="{id}-AllowFiles" bind:checked="{options.AllowFiles}">
+                    <label for="{id}-AllowFiles">Allow files to be selected</label>
+                </div>            
+                <div class="col-sm">
+                    <input type="checkbox" id="{id}-AllowDirectories" bind:checked="{options.AllowDirectories}">
+                    <label for="{id}-AllowDirectories">Allow directories to be selected</label>
+                </div>    
+            </div>        
+            <div class="form-row row-eq-spacing-sm">
+                <div class="col-sm">
+                    <input type="checkbox" id="{id}-AllowMultiple" bind:checked="{options.AllowMultiple}">
+                    <label for="{id}-AllowMultiple">Allow multiple selection</label>
+                </div>            
+                <div class="col-sm">
+                    <input type="checkbox" id="{id}-CanCreateDirectories" bind:checked="{options.CanCreateDirectories}">
+                    <label for="{id}-CanCreateDirectories">Can create directories</label>
+                </div>
+            </div>
+            
+            <input class="btn btn-primary" type="button" on:click="{processOpen}" value="Open using {lang} runtime">
+
+            <CodeSnippet bind:isJs={isJs} jsCode={testcodeJs} goCode={testcodeGo}></CodeSnippet>
+
+        </form>
+    </div>
+</CodeBlock>
+

v2/test/kitchensink/frontend/src/pages/Dialog/Open/code.go

@@ -0,0 +1,11 @@
+package main
+
+import wails "github.com/wailsapp/wails/v2"
+
+type MyStruct struct {
+	runtime *wails.Runtime
+}
+
+func (l *MyStruct) ShowHelp() {
+	l.runtime.Browser.Open("https://www.youtube.com/watch?v=dQw4w9WgXcQ")
+}

v2/test/kitchensink/frontend/src/pages/Dialog/Open/code.jsx

@@ -0,0 +1,17 @@
+import { Log } from '@wails/runtime';
+
+function doSomeOperation() {
+  // Do things
+  let value = doSomething();
+  Log.Print("A raw message");
+  Log.Trace("I got: " + value);
+  Log.Debug("A debug message");
+  Log.Info("An Info message");
+  Log.Warning("A Warning message");
+  Log.Error("An Error message");
+}
+
+function abort() {
+  // Do some things
+  Log.Fatal("I accidentally the whole application!");
+}

v2/test/kitchensink/main.go

@@ -28,6 +28,7 @@ func main() {
 	app.Bind(&Logger{})
 	app.Bind(&Browser{})
 	app.Bind(&System{})
+	app.Bind(&Dialog{})
 
 	app.Run()
 }