Add dialog to kitchensink

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

@@ -135,9 +135,9 @@
       }
     },
     "@wails/runtime": {
-      "version": "1.2.11",
-      "resolved": "https://registry.npmjs.org/@wails/runtime/-/runtime-1.2.11.tgz",
-      "integrity": "sha512-IhCsu8bvCb8Vjv3T0Ob+yLFYlpzFwox073LD55khsVJc7/1jB3aMcqt4y7Jnnomn6SUcitImLHpw8bytKsHjLA==",
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@wails/runtime/-/runtime-1.2.12.tgz",
+      "integrity": "sha512-QnmDZhLz58HXatXERglpR5yLelTKHnPYM7XlRTNFrzABXJ2EVTy3wMirbe5aucKKzpYmUNzVFhz3FLkFgWNn2A==",
       "dev": true
     },
     "alphanum-sort": {
@@ -2976,9 +2976,9 @@
       "dev": true
     },
     "rollup": {
-      "version": "2.33.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.33.2.tgz",
-      "integrity": "sha512-QPQ6/fWCrzHtSXkI269rhKaC7qXGghYBwXU04b1JsDZ6ibZa3DJ9D1SFAYRMgx1inDg0DaTbb3N4Z1NK/r3fhw==",
+      "version": "2.33.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.33.3.tgz",
+      "integrity": "sha512-RpayhPTe4Gu/uFGCmk7Gp5Z9Qic2VsqZ040G+KZZvsZYdcuWaJg678JeDJJvJeEQXminu24a2au+y92CUWVd+w==",
       "dev": true,
       "requires": {
         "fsevents": "~2.1.2"
@@ -3429,9 +3429,9 @@
       }
     },
     "svelte-preprocess": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.5.2.tgz",
-      "integrity": "sha512-ClUX5NecnGBwI+nJnnBvKKy0XutCq5uHTIKe6cPhpvuOj9AAnyvef9wOZAE93yr85OKPutGCNIJa/X1TrJ7O0Q==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.6.0.tgz",
+      "integrity": "sha512-kJwcU71+yw3KKMgGu9eHZMJVBSkW4VfGJ5LSMgFQP/XcwvY2QUV6JcyBoQTjJm+h1KRlo/WGDo6A7+7e+B8B4A==",
       "dev": true,
       "requires": {
         "@types/pug": "^2.0.4",

v2/test/kitchensink/frontend/package.json

@@ -11,12 +11,12 @@
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",
     "@rollup/plugin-url": "^5.0.1",
-    "@wails/runtime": "^1.2.11",
+    "@wails/runtime": "^1.2.12",
     "focus-visible": "^5.2.0",
     "halfmoon": "^1.1.1",
     "postcss": "^8.1.7",
     "postcss-import": "^12.0.1",
-    "rollup": "^2.33.2",
+    "rollup": "^2.33.3",
     "rollup-plugin-livereload": "^1.0.0",
     "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-string": "^3.0.0",
@@ -25,7 +25,7 @@
     "sirv-cli": "^0.4.4",
     "svelte": "^3.29.7",
     "svelte-highlight": "^0.6.2",
-    "svelte-preprocess": "^4.5.2"
+    "svelte-preprocess": "^4.6.0"
   },
   "dependencies": {}
 }

v2/test/kitchensink/frontend/src/App.css

@@ -24,6 +24,9 @@
     --lm-switch-bg-color-checked: rgb(186,167,49);
     --lm-switch-slider-bg-color: #FFF;
     --dm-switch-slider-bg-color: #FFF;
+
+    --dm-base-text-color: white;
+    --lm-base-text-color: black;
   }
 
   ::-webkit-scrollbar {
@@ -119,6 +122,7 @@
     top: 50px;
   }
 
-  /* * {
-      font-family: 'Roboto';
-  } */
+  html {
+    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+
+  }

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

@@ -1,11 +1,14 @@
 <script>
     import Open from './Open/Open.svelte';
+    import Save from './Save/Save.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.
+    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. There are 2 types of dialogs available: Save and Open.
     
     <br/><br/>
     
     <Open></Open>
+    <br/>
+    <Save></Save>
 </div>
 

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

@@ -7,7 +7,7 @@
 
     var isJs = false;
     $: lang = isJs ? 'Javascript' : 'Go';
-    var id = "Dialog";
+    var id = "OpenDialog";
 
     let options = {
         "DefaultDirectory":           "",
@@ -19,7 +19,7 @@
         "AllowMultiple":              false,
         "ShowHiddenFiles":            false,
         "CanCreateDirectories":       false,
-        "ResolveAliases":             false,
+        "ResolvesAliases":             false,
         "TreatPackagesAsDirectories": false
     }
 

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

@@ -0,0 +1,84 @@
+<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 = "SaveDialog";
+
+    let options = {
+        "DefaultDirectory":           "",
+        "DefaultFilename":            "",
+        "Title":                      "",
+        "Filters":                    "",
+        "ShowHiddenFiles":            false,
+        "CanCreateDirectories":       false,
+        "TreatPackagesAsDirectories": false
+    }
+
+    function processSave() {
+        if( isJs ) {
+            console.log(options);
+            Dialog.Save(options);
+        } else {
+            backend.main.Dialog.Save(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.Save(" + encodedJSOptions + ");";
+    $: testcodeGo = '// runtime is given through WailsInit()\nimport "github.com/wailsapp/wails/v2/pkg/options"\n\nselectedFiles := runtime.Dialog.Save( &options.SaveDialog' + encodedGoOptions + ')'; 
+
+</script>
+
+<CodeBlock bind:isJs={isJs} {jsCode} {goCode} title="Save" {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}-CanCreateDirectories" bind:checked="{options.CanCreateDirectories}">
+                    <label for="{id}-CanCreateDirectories">Can create directories</label>
+                </div>
+            </div>
+            
+            <input class="btn btn-primary" type="button" on:click="{processSave}" value="Save using {lang} runtime">
+
+            <CodeSnippet bind:isJs={isJs} jsCode={testcodeJs} goCode={testcodeGo}></CodeSnippet>
+
+        </form>
+    </div>
+</CodeBlock>
+

v2/test/kitchensink/frontend/src/pages/Dialog/Save/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/Save/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!");
+}