@timus-networks/theme 1.0.100 → 1.0.101

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/components-js/ThemeForm.vue +10 -19
  2. package/components-ts/ThemeForm.vue +10 -19
  3. package/output/main.css +1 -1
  4. package/package.json +1 -1
package/components-js/ThemeForm.vue CHANGED
@@ -4,6 +4,11 @@
4
4
 
5
5
  <section class="flex gap-8 flex-col">
6
6
  <h2>Etiket Konumu: {{ labelPosition }}</h2>
7
+ <div class="p-4 border-l-4 border-info-600 bg-info-100">
8
+ Birkaç custom class ekledim. <b>`class='bordered'`</b> eklerseniz &lt;el-form class="bordered"> itemlar arasında border çıkar, `info` derseniz
9
+ info tipinde bir forma dönüşür (title ve content daha soft renkte oluşur, ayrıca content sağa yaslı olur), `info left` eklerseniz itemlar sola
10
+ yaslı çıkar.
11
+ </div>
7
12
  <el-radio-group v-model="labelPosition" size="small">
8
13
  <el-radio-button label="left">Sol</el-radio-button>
9
14
  <el-radio-button label="right">Sağ</el-radio-button>
@@ -19,7 +24,7 @@
19
24
  </p>
20
25
  </div>
21
26
  <div class="grid grid-flow-col">
22
- <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm" :label-position="labelPosition">
27
+ <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="bordered info" :label-position="labelPosition">
23
28
  <el-form-item label="Activity name" prop="name">
24
29
  <el-input v-model="ruleForm.name" />
25
30
  </el-form-item>
@@ -29,18 +34,9 @@
29
34
  <el-option label="Zone two" value="beijing" />
30
35
  </el-select>
31
36
  </el-form-item>
32
- <el-form-item label="Activity time" required>
33
- <el-col :span="11">
34
- <el-form-item prop="date1">
35
- <el-date-picker v-model="ruleForm.date1" type="date" placeholder="Pick a date" style="width: 100%" />
36
- </el-form-item>
37
- </el-col>
38
- <el-col class="line" :span="2">-</el-col>
39
- <el-col :span="11">
40
- <el-form-item prop="date2">
41
- <el-time-picker v-model="ruleForm.date2" placeholder="Pick a time" style="width: 100%" />
42
- </el-form-item>
43
- </el-col>
37
+ <el-form-item label="Activity time" required class="form-content-left">
38
+ <el-date-picker v-model="ruleForm.date1" type="date" placeholder="Pick a date" style="width: 100%" />
39
+ <el-time-picker v-model="ruleForm.date2" placeholder="Pick a time" style="width: 100%" />
44
40
  </el-form-item>
45
41
  <el-form-item label="Instant delivery" prop="delivery">
46
42
  <el-switch v-model="ruleForm.delivery" />
@@ -62,18 +58,13 @@
62
58
  <el-form-item label="Activity form" prop="desc">
63
59
  <el-input v-model="ruleForm.desc" type="textarea" />
64
60
  </el-form-item>
65
- <el-form-item>
61
+ <el-form-item class="form-content-left">
66
62
  <el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
67
63
  <el-button @click="resetForm('ruleForm')">Reset</el-button>
68
64
  </el-form-item>
69
65
  </el-form>
70
66
  </div>
71
67
  </section>
72
-
73
- <el-descriptions title="User Info" :column="4" colon="false">
74
- <el-description-item label="Username" label-class-name="w-28"> Ahmet Polat MacBook Pro, Ahmet Fatih Sez...</el-description-item>
75
- <el-description-item label="Username" label-class-name="w-28"> Ahmet Polat MacBook Pro, Ahmet Fatih Sez...</el-description-item>
76
- </el-descriptions>
77
68
  </div>
78
69
  </template>
79
70
  <script>import Vue from 'vue';
package/components-ts/ThemeForm.vue CHANGED
@@ -4,6 +4,11 @@
4
4
 
5
5
  <section class="flex gap-8 flex-col">
6
6
  <h2>Etiket Konumu: {{ labelPosition }}</h2>
7
+ <div class="p-4 border-l-4 border-info-600 bg-info-100">
8
+ Birkaç custom class ekledim. <b>`class='bordered'`</b> eklerseniz &lt;el-form class="bordered"> itemlar arasında border çıkar, `info` derseniz
9
+ info tipinde bir forma dönüşür (title ve content daha soft renkte oluşur, ayrıca content sağa yaslı olur), `info left` eklerseniz itemlar sola
10
+ yaslı çıkar.
11
+ </div>
7
12
  <el-radio-group v-model="labelPosition" size="small">
8
13
  <el-radio-button label="left">Sol</el-radio-button>
9
14
  <el-radio-button label="right">Sağ</el-radio-button>
@@ -19,7 +24,7 @@
19
24
  </p>
20
25
  </div>
21
26
  <div class="grid grid-flow-col">
22
- <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm" :label-position="labelPosition">
27
+ <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="bordered info" :label-position="labelPosition">
23
28
  <el-form-item label="Activity name" prop="name">
24
29
  <el-input v-model="ruleForm.name" />
25
30
  </el-form-item>
@@ -29,18 +34,9 @@
29
34
  <el-option label="Zone two" value="beijing" />
30
35
  </el-select>
31
36
  </el-form-item>
32
- <el-form-item label="Activity time" required>
33
- <el-col :span="11">
34
- <el-form-item prop="date1">
35
- <el-date-picker v-model="ruleForm.date1" type="date" placeholder="Pick a date" style="width: 100%" />
36
- </el-form-item>
37
- </el-col>
38
- <el-col class="line" :span="2">-</el-col>
39
- <el-col :span="11">
40
- <el-form-item prop="date2">
41
- <el-time-picker v-model="ruleForm.date2" placeholder="Pick a time" style="width: 100%" />
42
- </el-form-item>
43
- </el-col>
37
+ <el-form-item label="Activity time" required class="form-content-left">
38
+ <el-date-picker v-model="ruleForm.date1" type="date" placeholder="Pick a date" style="width: 100%" />
39
+ <el-time-picker v-model="ruleForm.date2" placeholder="Pick a time" style="width: 100%" />
44
40
  </el-form-item>
45
41
  <el-form-item label="Instant delivery" prop="delivery">
46
42
  <el-switch v-model="ruleForm.delivery" />
@@ -62,18 +58,13 @@
62
58
  <el-form-item label="Activity form" prop="desc">
63
59
  <el-input v-model="ruleForm.desc" type="textarea" />
64
60
  </el-form-item>
65
- <el-form-item>
61
+ <el-form-item class="form-content-left">
66
62
  <el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
67
63
  <el-button @click="resetForm('ruleForm')">Reset</el-button>
68
64
  </el-form-item>
69
65
  </el-form>
70
66
  </div>
71
67
  </section>
72
-
73
- <el-descriptions title="User Info" :column="4" colon="false">
74
- <el-description-item label="Username" label-class-name="w-28"> Ahmet Polat MacBook Pro, Ahmet Fatih Sez...</el-description-item>
75
- <el-description-item label="Username" label-class-name="w-28"> Ahmet Polat MacBook Pro, Ahmet Fatih Sez...</el-description-item>
76
- </el-descriptions>
77
68
  </div>
78
69
  </template>
79
70
  <script lang="ts">