@timus-networks/theme 1.0.180 → 1.0.182

package/components-js/ThemeCascader.vue

@@ -22,7 +22,7 @@
       <div class="el-cascader-container">
         <el-cascader v-model="value" :options="options" clearable @change="handleChange" />
         <el-cascader v-model="value" :options="options" clearable @change="handleChange" />
-        <el-select v-model="value" placeholder="Select">
+        <el-select v-model="value" placeholder="Select" multiple>
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <el-input v-show="false" />
@@ -39,11 +39,11 @@
         Cascader container contains two different component in it inside. Left one is Cascader and right one is Select dropdown.
       </p>
       <div data-testid="pages-settings-configuration-productivity-index-luugpbuhne" class="el-cascader-container w-full">
-        <el-select v-model="value" placeholder="Select">
+        <el-select v-model="value" placeholder="Select" multiple>
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
 
-        <el-select v-model="value" placeholder="Select">
+        <el-select v-model="value" placeholder="Select" multiple>
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
 
@@ -58,7 +58,7 @@
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <el-input />
-        <el-select v-model="value" placeholder="Select">
+        <el-select v-model="value" placeholder="Select" multiple>
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
 

package/components-js/ThemeMessage.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Basic</h1>
+      <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 gap-4">
+        <el-button :plain="true" @click="open('error')">Error message</el-button>
+        <el-button :plain="true" @click="open('success')">Success message</el-button>
+        <el-button :plain="true" @click="open('warning')">Warning message</el-button>
+        <el-button :plain="true" @click="open('info')">Info message</el-button>
+        <el-button :plain="true" @click="openVn">VNode</el-button>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <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>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'TimusUpload',
+  data() {
+    return {};
+  },
+  methods: {
+    open(aType) {
+      this.$message({
+        message: 'Congrats, this is a success message.',
+        type: aType,
+        showClose: true,
+      });
+    },
+
+    openVn() {
+      const h = this.$createElement;
+
+      this.$message({
+        message: h('p', null, [h('span', null, 'Message can be '), h('i', { style: 'color: teal' }, 'VNode')]),
+      });
+    },
+  },
+});
+</script>

package/components-js/ThemeSelect.vue

@@ -68,6 +68,9 @@
       <p class="p-lg my-6">Etkileşime kapalı 'disabled' butonlarımız, kullanılamaz durumları göstermek için kullanılır.</p>
       <div class="grid grid-flow-col auto-cols-max gap-4 items-center">
         {{ JSON.stringify(value1) }}
+        <el-select v-model="value1" multiple placeholder="Select" :disabled="false">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
         <el-select v-model="value1" multiple placeholder="Select" :disabled="true">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>

package/components-js/ThemeTypo.vue

@@ -8,9 +8,9 @@
       <div class="h2 text-gray-600">FontSize</div>
       <div class="h2 text-gray-600 hidden md:block">LineHeight</div>
       <template v-for="(item, index) in headingClasses">
-        <component :is="item.name" class="flex items-center text-gray-800">{{ item.name }}</component>
-        <div class="flex items-center">{{ item.fontSize }}</div>
-        <div class="flex items-center hidden md:block">{{ item.lineHeight }}</div>
+        <component :is="item.name" :key="item.name + '-heading-' + index + 1" class="flex items-center text-gray-800">{{ item.name }}</component>
+        <div :key="item.name + '-heading-' + index + 2" class="flex items-center">{{ item.fontSize }}</div>
+        <div :key="item.name + '-heading-' + index + 3" class="flex items-center hidden md:block">{{ item.lineHeight }}</div>
       </template>
     </div>
 
@@ -22,9 +22,9 @@
       <div class="h2 text-gray-600">FontSize</div>
       <div class="h2 text-gray-600 hidden md:block">LineHeight</div>
       <template v-for="(item, index) in helperClasses">
-        <div :key="item.name" class="flex items-center text-gray-800" :class="item.name">{{ item.name }}</div>
-        <div :key="item.name" class="flex items-center">{{ item.fontSize }}</div>
-        <div :key="item.name" class="flex items-center hidden md:block">{{ item.lineHeight }}</div>
+        <div :key="item.name + '-helper-' + index + 1" class="flex items-center text-gray-800" :class="item.name">{{ item.name }}</div>
+        <div :key="item.name + '-helper-' + index + 2" class="flex items-center">{{ item.fontSize }}</div>
+        <div :key="item.name + '-helper-' + index + 3" class="flex items-center hidden md:block">{{ item.lineHeight }}</div>
       </template>
     </div>
   </div>

package/components-js/TimusSamples.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="container">
+  <div class="container py-16">
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="Button" name="first"><ThemeButtons /></el-tab-pane>
-      <el-tab-pane label="Breadcrumb" name="twenty-six"><ThemeBreadcrumb /></el-tab-pane>
       <el-tab-pane label="Typo" name="second"><ThemeTypo /></el-tab-pane>
       <el-tab-pane label="Input" name="third"><ThemeInputs /></el-tab-pane>
       <el-tab-pane label="Checkbox" name="fourth"><ThemeCheckbox /></el-tab-pane>
@@ -27,6 +26,8 @@
       <el-tab-pane label="MessageBox" name="twenty-three"><ThemeMessageBox /></el-tab-pane>
       <el-tab-pane label="Information" name="twenty-four"><ThemeInformation /></el-tab-pane>
       <el-tab-pane label="Collapse" name="twenty-five"><ThemeCollapse /></el-tab-pane>
+      <el-tab-pane label="Breadcrumb" name="twenty-six"><ThemeBreadcrumb /></el-tab-pane>
+      <el-tab-pane label="Message" name="twenty-seven"><ThemeMessage /></el-tab-pane>
     </el-tabs>
   </div>
 </template>

package/components-ts/ThemeCascader.vue

@@ -22,7 +22,7 @@
       <div class="el-cascader-container">
         <el-cascader v-model="value" :options="options" clearable @change="handleChange" />
         <el-cascader v-model="value" :options="options" clearable @change="handleChange" />
-        <el-select v-model="value" placeholder="Select">
+        <el-select v-model="value" placeholder="Select" multiple>
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <el-input v-show="false" />
@@ -39,11 +39,11 @@
         Cascader container contains two different component in it inside. Left one is Cascader and right one is Select dropdown.
       </p>
       <div data-testid="pages-settings-configuration-productivity-index-luugpbuhne" class="el-cascader-container w-full">
-        <el-select v-model="value" placeholder="Select">
+        <el-select v-model="value" placeholder="Select" multiple>
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
 
-        <el-select v-model="value" placeholder="Select">
+        <el-select v-model="value" placeholder="Select" multiple>
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
 
@@ -58,7 +58,7 @@
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <el-input />
-        <el-select v-model="value" placeholder="Select">
+        <el-select v-model="value" placeholder="Select" multiple>
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
 

package/components-ts/ThemeMessage.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Basic</h1>
+      <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 gap-4">
+        <el-button :plain="true" @click="open('error')">Error message</el-button>
+        <el-button :plain="true" @click="open('success')">Success message</el-button>
+        <el-button :plain="true" @click="open('warning')">Warning message</el-button>
+        <el-button :plain="true" @click="open('info')">Info message</el-button>
+        <el-button :plain="true" @click="openVn">VNode</el-button>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <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>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'TimusUpload',
+  data() {
+    return {};
+  },
+  methods: {
+    open(aType) {
+      this.$message({
+        message: 'Congrats, this is a success message.',
+        type: aType,
+        showClose: true,
+      });
+    },
+
+    openVn() {
+      const h = this.$createElement;
+
+      this.$message({
+        message: h('p', null, [h('span', null, 'Message can be '), h('i', { style: 'color: teal' }, 'VNode')]),
+      });
+    },
+  },
+});
+</script>

package/components-ts/ThemeSelect.vue

@@ -68,6 +68,9 @@
       <p class="p-lg my-6">Etkileşime kapalı 'disabled' butonlarımız, kullanılamaz durumları göstermek için kullanılır.</p>
       <div class="grid grid-flow-col auto-cols-max gap-4 items-center">
         {{ JSON.stringify(value1) }}
+        <el-select v-model="value1" multiple placeholder="Select" :disabled="false">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
         <el-select v-model="value1" multiple placeholder="Select" :disabled="true">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>

package/components-ts/ThemeTypo.vue

@@ -8,9 +8,9 @@
       <div class="h2 text-gray-600">FontSize</div>
       <div class="h2 text-gray-600 hidden md:block">LineHeight</div>
       <template v-for="(item, index) in headingClasses">
-        <component :is="item.name" class="flex items-center text-gray-800">{{ item.name }}</component>
-        <div class="flex items-center">{{ item.fontSize }}</div>
-        <div class="flex items-center hidden md:block">{{ item.lineHeight }}</div>
+        <component :is="item.name" :key="item.name + '-heading-' + index + 1" class="flex items-center text-gray-800">{{ item.name }}</component>
+        <div :key="item.name + '-heading-' + index + 2" class="flex items-center">{{ item.fontSize }}</div>
+        <div :key="item.name + '-heading-' + index + 3" class="flex items-center hidden md:block">{{ item.lineHeight }}</div>
       </template>
     </div>
 
@@ -22,9 +22,9 @@
       <div class="h2 text-gray-600">FontSize</div>
       <div class="h2 text-gray-600 hidden md:block">LineHeight</div>
       <template v-for="(item, index) in helperClasses">
-        <div :key="item.name" class="flex items-center text-gray-800" :class="item.name">{{ item.name }}</div>
-        <div :key="item.name" class="flex items-center">{{ item.fontSize }}</div>
-        <div :key="item.name" class="flex items-center hidden md:block">{{ item.lineHeight }}</div>
+        <div :key="item.name + '-helper-' + index + 1" class="flex items-center text-gray-800" :class="item.name">{{ item.name }}</div>
+        <div :key="item.name + '-helper-' + index + 2" class="flex items-center">{{ item.fontSize }}</div>
+        <div :key="item.name + '-helper-' + index + 3" class="flex items-center hidden md:block">{{ item.lineHeight }}</div>
       </template>
     </div>
   </div>

package/components-ts/TimusSamples.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="container">
+  <div class="container py-16">
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="Button" name="first"><ThemeButtons /></el-tab-pane>
-      <el-tab-pane label="Breadcrumb" name="twenty-six"><ThemeBreadcrumb /></el-tab-pane>
       <el-tab-pane label="Typo" name="second"><ThemeTypo /></el-tab-pane>
       <el-tab-pane label="Input" name="third"><ThemeInputs /></el-tab-pane>
       <el-tab-pane label="Checkbox" name="fourth"><ThemeCheckbox /></el-tab-pane>
@@ -27,6 +26,8 @@
       <el-tab-pane label="MessageBox" name="twenty-three"><ThemeMessageBox /></el-tab-pane>
       <el-tab-pane label="Information" name="twenty-four"><ThemeInformation /></el-tab-pane>
       <el-tab-pane label="Collapse" name="twenty-five"><ThemeCollapse /></el-tab-pane>
+      <el-tab-pane label="Breadcrumb" name="twenty-six"><ThemeBreadcrumb /></el-tab-pane>
+      <el-tab-pane label="Message" name="twenty-seven"><ThemeMessage /></el-tab-pane>
     </el-tabs>
   </div>
 </template>