@timus-networks/theme 1.0.42 → 1.0.44

package/components-js/ThemeMessageBox.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Confirm</h1>
+      <p class="p-lg-c my-6">
+        Confirm is used to ask users' confirmation. A set of modal boxes simulating system message box, mainly for alerting information, confirm
+        operations and prompting messages. By design MessageBox provides simulations of system's alert, confirm and prompt，so it's content should be
+        simple. For more complicated contents, please use Dialog.
+      </p>
+      <el-button type="primary" size="medium" class="outline" @click="open">Click to open Message Box</el-button>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-button type=&quot;text&quot; @click=&quot;open&quot;&gt;Click to open Message Box&lt;/el-button&gt;</code>
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'TimusMessageBox',
+  methods: {
+    open() {
+      this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning',
+      })
+        .then(() => {
+          this.$message({
+            type: 'success',
+            message: 'Delete completed',
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: 'Delete canceled',
+          });
+        });
+    },
+  },
+});
+</script>

package/components-js/ThemeUpload.vue

@@ -5,7 +5,7 @@
       <p class="p-lg my-6">
         Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.
       </p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
+      <div class="grid grid-flow-col gap-4">
         <el-upload
           class="el-upload-container"
           drag
@@ -25,7 +25,12 @@
       </div>
       <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
         <p class="text-xs">
-          <code>&lt;el-input placeholder="Please input" v-model="input"&gt;&lt;/el-input&gt;</code>
+          <code>
+            &lt;el-upload class=&quot;el-upload-container&quot; drag multiple&gt;&lt;i class=&quot;el-icon-upload&quot;&gt;&lt;/i&gt;&lt;div
+            class=&quot;el-upload__text&quot;&gt;&lt;span class=&quot;title&quot;&gt;Drop file here or&lt;/span&gt;&lt;span
+            class=&quot;description&quot;&gt;click to upload&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;el-upload__tip&quot;
+            slot=&quot;tip&quot;&gt;description&lt;/div&gt;&lt;/el-upload&gt;
+          </code>
         </p>
       </div>
     </section>

package/components-js/TimusSamples.vue

@@ -23,6 +23,7 @@
       <el-tab-pane label="Dialog" name="twenty"><ThemeDialog></ThemeDialog></el-tab-pane>
       <el-tab-pane label="Sidebar" name="twenty-one"><ThemeSidebar></ThemeSidebar></el-tab-pane>
       <el-tab-pane label="Upload" name="twenty-two"><ThemeUpload></ThemeUpload></el-tab-pane>
+      <el-tab-pane label="MessageBox" name="twenty-three"><ThemeMessageBox></ThemeMessageBox></el-tab-pane>
     </el-tabs>
   </div>
 </template>

package/components-ts/ThemeMessageBox.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Confirm</h1>
+      <p class="p-lg-c my-6">
+        Confirm is used to ask users' confirmation. A set of modal boxes simulating system message box, mainly for alerting information, confirm
+        operations and prompting messages. By design MessageBox provides simulations of system's alert, confirm and prompt，so it's content should be
+        simple. For more complicated contents, please use Dialog.
+      </p>
+      <el-button type="primary" size="medium" class="outline" @click="open">Click to open Message Box</el-button>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-button type=&quot;text&quot; @click=&quot;open&quot;&gt;Click to open Message Box&lt;/el-button&gt;</code>
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'TimusMessageBox',
+  methods: {
+    open() {
+      this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning',
+      })
+        .then(() => {
+          this.$message({
+            type: 'success',
+            message: 'Delete completed',
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: 'Delete canceled',
+          });
+        });
+    },
+  },
+});
+</script>

package/components-ts/ThemeUpload.vue

@@ -5,7 +5,7 @@
       <p class="p-lg my-6">
         Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.
       </p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
+      <div class="grid grid-flow-col gap-4">
         <el-upload
           class="el-upload-container"
           drag
@@ -25,7 +25,12 @@
       </div>
       <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
         <p class="text-xs">
-          <code>&lt;el-input placeholder="Please input" v-model="input"&gt;&lt;/el-input&gt;</code>
+          <code>
+            &lt;el-upload class=&quot;el-upload-container&quot; drag multiple&gt;&lt;i class=&quot;el-icon-upload&quot;&gt;&lt;/i&gt;&lt;div
+            class=&quot;el-upload__text&quot;&gt;&lt;span class=&quot;title&quot;&gt;Drop file here or&lt;/span&gt;&lt;span
+            class=&quot;description&quot;&gt;click to upload&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;el-upload__tip&quot;
+            slot=&quot;tip&quot;&gt;description&lt;/div&gt;&lt;/el-upload&gt;
+          </code>
         </p>
       </div>
     </section>

package/components-ts/TimusSamples.vue

@@ -23,6 +23,7 @@
       <el-tab-pane label="Dialog" name="twenty"><ThemeDialog></ThemeDialog></el-tab-pane>
       <el-tab-pane label="Sidebar" name="twenty-one"><ThemeSidebar></ThemeSidebar></el-tab-pane>
       <el-tab-pane label="Upload" name="twenty-two"><ThemeUpload></ThemeUpload></el-tab-pane>
+      <el-tab-pane label="MessageBox" name="twenty-three"><ThemeMessageBox></ThemeMessageBox></el-tab-pane>
     </el-tabs>
   </div>
 </template>