devextreme-cli 1.8.0-beta.0 → 1.9.0

package/src/templates/vue-v3/application/src/layouts/single-card.vue

@@ -46,10 +46,11 @@ export default {
   height: 100%;
 
   .dx-card {
-    width: 330px;
+    width: 360px;
     margin: auto auto;
-    padding: 40px;
+    padding: 24px;
     flex-grow: 0;
+    border-radius: 8px;
 
     .screen-x-small & {
       width: 100%;
@@ -62,18 +63,22 @@ export default {
     }
 
     .header {
-      margin-bottom: 30px;
+      margin: 24px 0;
 
       .title {
         color: var(--base-text-color);
-        line-height: 28px;
+        text-align: center;
+        line-height: 24px;
         font-weight: 500;
         font-size: 24px;
       }
 
       .description {
         color: var(--base-text-color-alpha-7);
-        line-height: 18px;
+        line-height: 16px;
+        font-size: 12px;
+        margin-top: 32px;
+        text-align: center;
       }
     }
   }

package/src/templates/vue-v3/application/src/variables.scss

@@ -1,14 +1,28 @@
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:map';
+@use "./themes/generated/variables.base.scss" as variablesBase;
+@use "./themes/generated/variables.base.dark.scss" as variablesBaseDark;
+@use "./themes/generated/variables.additional.scss" as variablesAdditional;
+@use "./themes/generated/variables.additional.dark.scss" as variablesAdditionalDark;
+
+@mixin theme-variables($theme-name) {
+  $theme: meta.module-variables($theme-name);
+  $base-text-color: map.get($theme, 'base-text-color');
+  $base-bg: map.get($theme, 'base-bg');
+
+  --base-text-color:  #{$base-text-color};
+  --base-bg: #{$base-bg};
+  --base-bg-darken-5: #{color.adjust($base-bg, $lightness: -5%)};
+  --base-accent:  #{map.get($theme, 'base-accent')};
+  --base-text-color-alpha-7: #{rgba($base-text-color, color.alpha($base-text-color) * 0.7)};
+}
+
 :root {
   body {
-    @import "./themes/generated/variables.base.scss";
+    @include theme-variables('variablesBase');
 
-    --base-text-color:  #{$base-text-color};
-    --base-bg: #{$base-bg};
-    --base-bg-darken-5: #{darken($base-bg, 5)};
-    --base-accent:  #{$base-accent};
-    --base-text-color-alpha-7:  #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
     --footer-border-color: rgba(224, 224, 224, 1);
-
     --plus-icon-color: #242424;
     --devextreme-logo-color: #596C7D;
     --vue-logo-text-color: #35495E;
@@ -17,14 +31,12 @@
     --shadow-color-second: rgba(0, 0, 0, 0.12);
   }
 
-  .dx-swatch-dark, .dx-swatch-additional-dark {
-    @import "./themes/generated/variables.base.dark.scss";
+  .dx-swatch-additional {
+    @include theme-variables('variablesAdditional');
+  }
 
-    --base-text-color:  #{$base-text-color};
-    --base-bg: #{$base-bg};
-    --base-bg-darken-5: #{darken($base-bg, 5)};
-    --base-accent:  #{$base-accent};
-    --base-text-color-alpha-7:  #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
+  .dx-swatch-dark {
+    @include theme-variables('variablesBaseDark');;
 
     --plus-icon-color: #fff;
     --devextreme-logo-color: #fff;
@@ -34,4 +46,8 @@
     --shadow-color-second: rgba(0, 0, 0, 0.24);
     --footer-border-color: rgba(97, 97, 97, 1);
   }
+
+  .dx-swatch-additional-dark {
+    @include theme-variables('variablesAdditionalDark');
+  }
 }

package/src/templates/vue-v3/application/src/views/create-account-form.vue

@@ -46,13 +46,6 @@
         >
         </dx-button-options>
       </dx-button-item>
-      <dx-item>
-        <template #default>
-          <div class="login-link">
-            Have an account? <router-link to="/login-form">Sign In</router-link>
-          </div>
-        </template>
-      </dx-item>
       <template #createAccount>
         <div>
           <span class="dx-button-text">
@@ -62,6 +55,9 @@
         </div>
       </template>
     </dx-form>
+    <div class="login-link">
+      Have an account? <router-link to="/login-form">Sign In</router-link>
+    </div>
   </form>
 </template>
 
@@ -104,28 +100,28 @@ export default {
     });
 
     const onSubmit = async () => {
-    const { email, password } = formData;
-    loading.value = true;
+      const { email, password } = formData;
+      loading.value = true;
 
-    const result = await auth.createAccount(email, password);
-    loading.value = false;
+      const result = await auth.createAccount(email, password);
+      loading.value = false;
 
-    if (result.isOk) {
-      router.push("/login-form");
-    } else {
-      notify(result.message, 'error', 2000);
-    }
-  };
+      if (result.isOk) {
+        router.push("/login-form");
+      } else {
+        notify(result.message, 'error', 2000);
+      }
+    };
 
     function confirmPassword(e) {
       return e.value === formData.password;
     }
 
     return {
-        formData,
-        loading,
-        onSubmit,
-        confirmPassword
+      formData,
+      loading,
+      onSubmit,
+      confirmPassword
     }
   }
 }
@@ -134,9 +130,8 @@ export default {
 <style lang="scss">
 .create-account-form {
   .policy-info {
-    margin: 10px 0;
     color: var(--base-text-color-alpha-7);
-    font-size: 14px;
+    font-size: 12px;
     font-style: normal;
 
     a {
@@ -146,8 +141,10 @@ export default {
 
   .login-link {
     color: var(--base-accent);
-    font-size: 16px;
+    font-size: 12px;
     text-align: center;
+    padding: 6px 0 32px 0;
+    border-bottom: 1px solid var(--border-color);
   }
 }
 </style>

package/src/templates/vue-v3/application/src/views/login-form.vue

@@ -34,20 +34,6 @@
         >
         </dx-button-options>
       </dx-button-item>
-      <dx-item>
-        <template #default>
-          <div class="link">
-            <router-link to="/reset-password">Forgot password?</router-link>
-          </div>
-        </template>
-      </dx-item>
-      <dx-button-item>
-        <dx-button-options
-          text="Create an account"
-          width="100%"
-          :on-click="onCreateAccountClick"
-        />
-      </dx-button-item>
       <template #signInTemplate>
         <div>
           <span class="dx-button-text">
@@ -57,6 +43,15 @@
         </div>
       </template>
     </dx-form>
+    <div class="link">
+      <router-link to="/reset-password">Forgot password?</router-link>
+    </div>
+    <dx-button
+      text="Create an account"
+      stylingMode="outlined"
+      width="100%"
+      @click="onCreateAccountClick"
+    />
   </form>
 </template>
 
@@ -70,6 +65,7 @@ import DxForm, {
   DxButtonItem,
   DxButtonOptions
 } from "devextreme-vue/form";
+import { DxButton } from 'devextreme-vue';
 import notify from 'devextreme/ui/notify';
 
 import auth from "../auth";
@@ -119,26 +115,23 @@ export default {
     DxItem,
     DxLabel,
     DxButtonItem,
-    DxButtonOptions
+    DxButtonOptions,
+    DxButton
   }
 };
 </script>
 
 <style lang="scss">
 .login-form {
+  .form-text {
+    color: var(--base-text-color-alpha-7);
+  }
+
   .link {
     text-align: center;
-    font-size: 16px;
+    font-size: 12px;
     font-style: normal;
-
-    a {
-      text-decoration: none;
-    }
-  }
-
-  .form-text {
-    margin: 10px 0;
-    color: var(--base-text-color-alpha-7);
+    margin: 6px 0 50px;
   }
 }
 </style>

package/src/templates/vue-v3/application/src/views/reset-password-form.vue

@@ -20,13 +20,6 @@
         >
         </dx-button-options>
       </dx-button-item>
-      <dx-item>
-        <template #default>
-          <div class="login-link">
-            Return to <router-link to="/login-form">Sign In</router-link>
-          </div>
-        </template>
-      </dx-item>
       <template #resetTemplate>
         <div>
           <span class="dx-button-text">
@@ -36,6 +29,9 @@
         </div>
       </template>
     </dx-form>
+    <div class="login-link">
+      Return to <router-link to="/login-form">Sign In</router-link>
+    </div>
   </form>
 </template>
 
@@ -103,13 +99,14 @@ export default {
 <style lang="scss">
 .reset-password-form {
   .submit-button {
-    margin-top: 10px;
+    margin-top: 18px;
   }
 
   .login-link {
     color: var(--base-accent);
-    font-size: 16px;
+    font-size: 12px;
     text-align: center;
+    margin-top: 6px;
   }
 }
 </style>

package/src/utility/latest-versions.js

@@ -1,8 +1,8 @@
 const packageJson = require('../../package.json');
 module.exports = {
-    'devextreme': '24.2.2-beta',
-    'devextreme-react': '24.2.2-beta',
-    'devextreme-vue': '24.2.2-beta',
+    'devextreme': '24.2.5',
+    'devextreme-react': '24.2.5',
+    'devextreme-vue': '24.2.5',
     'devextreme-cli': packageJson.version,
     'devextreme-schematics': 'latest'
 };