@timus-networks/theme 1.0.155 → 1.0.156

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/ThemeCheckbox.vue +30 -6
  2. package/components-ts/ThemeCheckbox.vue +30 -6
  3. package/output/main.css +1 -1
  4. package/package.json +1 -1
package/components-js/ThemeCheckbox.vue CHANGED
@@ -7,8 +7,6 @@
7
7
  <p class="p-lg-c my-6">Checkbox, iki durum arasında geçiş yapmak için kullanılır. Checkbox için devre dışı bırakılmış durum da mevcuttur.</p>
8
8
  <div class="grid grid-flow-col auto-cols-max gap-4">
9
9
  <el-checkbox v-model="checked">Option</el-checkbox>
10
- <el-checkbox v-model="checked" class="primary">Option</el-checkbox>
11
- <el-checkbox v-model="checked" class="danger">Option</el-checkbox>
12
10
  <el-checkbox :value="true" disabled>selected & disabled</el-checkbox>
13
11
  <el-checkbox :value="false" disabled>unselected & disabled</el-checkbox>
14
12
  </div>
@@ -44,6 +42,34 @@
44
42
  </div>
45
43
  </section>
46
44
 
45
+ <section>
46
+ <h2>Colors</h2>
47
+ <p class="p-lg-c my-6">
48
+ Renk seçenekleri ekledim. `class="primary"` şeklinde kullanılabilir. `'default', 'primary', 'secondary', 'gray', 'light', 'success', 'danger',
49
+ 'info', 'warning'` diğer renk seçenekleri olarak kullanılabilir.
50
+ </p>
51
+ <div class="grid grid-flow-col auto-cols-max gap-4">
52
+ <el-checkbox
53
+ v-for="(color, index) of colors"
54
+ :key="index"
55
+ v-model="checkAll"
56
+ :class="color"
57
+ :indeterminate="isIndeterminate"
58
+ @change="handleCheckAllChange"
59
+ >
60
+ Check all
61
+ </el-checkbox>
62
+ </div>
63
+ <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
64
+ <p class="text-xs">
65
+ <code>
66
+ &lt;el-checkbox v-model="checkAll" class="danger" :indeterminate="isIndeterminate" @change="handleCheckAllChange"&gt;Check
67
+ all&lt;/el-checkbox&gt;
68
+ </code>
69
+ </p>
70
+ </div>
71
+ </section>
72
+
47
73
  <section>
48
74
  <h2>Indeterminate</h2>
49
75
  <p class="p-lg-c my-6">
@@ -52,8 +78,6 @@
52
78
  </p>
53
79
  <div class="grid grid-flow-col auto-cols-max gap-4">
54
80
  <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">Check all</el-checkbox>
55
- <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="primary" @change="handleCheckAllChange">Check all</el-checkbox>
56
- <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="danger" @change="handleCheckAllChange">Check all</el-checkbox>
57
81
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
58
82
  <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
59
83
  </el-checkbox-group>
@@ -61,8 +85,7 @@
61
85
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
62
86
  <p class="text-xs">
63
87
  <code>
64
- &lt;el-date-picker v-model="input" type="daterange" align="left" start-placeholder="Start" end-placeholder="End"
65
- default-value=""&gt;&lt;/el-date-picker&gt;
88
+ &lt;el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"&gt;Check all&lt;/el-checkbox&gt;
66
89
  </code>
67
90
  </p>
68
91
  </div>
@@ -97,6 +120,7 @@ const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
97
120
  export default Vue.extend({
98
121
  data() {
99
122
  return {
123
+ colors: ['default', 'primary', 'secondary', 'gray', 'light', 'success', 'danger', 'info', 'warning'],
100
124
  checked: true,
101
125
  checkboxGroup1: ['Shanghai'],
102
126
  checkboxGroup2: ['Shanghai'],
package/components-ts/ThemeCheckbox.vue CHANGED
@@ -7,8 +7,6 @@
7
7
  <p class="p-lg-c my-6">Checkbox, iki durum arasında geçiş yapmak için kullanılır. Checkbox için devre dışı bırakılmış durum da mevcuttur.</p>
8
8
  <div class="grid grid-flow-col auto-cols-max gap-4">
9
9
  <el-checkbox v-model="checked">Option</el-checkbox>
10
- <el-checkbox v-model="checked" class="primary">Option</el-checkbox>
11
- <el-checkbox v-model="checked" class="danger">Option</el-checkbox>
12
10
  <el-checkbox :value="true" disabled>selected & disabled</el-checkbox>
13
11
  <el-checkbox :value="false" disabled>unselected & disabled</el-checkbox>
14
12
  </div>
@@ -44,6 +42,34 @@
44
42
  </div>
45
43
  </section>
46
44
 
45
+ <section>
46
+ <h2>Colors</h2>
47
+ <p class="p-lg-c my-6">
48
+ Renk seçenekleri ekledim. `class="primary"` şeklinde kullanılabilir. `'default', 'primary', 'secondary', 'gray', 'light', 'success', 'danger',
49
+ 'info', 'warning'` diğer renk seçenekleri olarak kullanılabilir.
50
+ </p>
51
+ <div class="grid grid-flow-col auto-cols-max gap-4">
52
+ <el-checkbox
53
+ v-for="(color, index) of colors"
54
+ :key="index"
55
+ v-model="checkAll"
56
+ :class="color"
57
+ :indeterminate="isIndeterminate"
58
+ @change="handleCheckAllChange"
59
+ >
60
+ Check all
61
+ </el-checkbox>
62
+ </div>
63
+ <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
64
+ <p class="text-xs">
65
+ <code>
66
+ &lt;el-checkbox v-model="checkAll" class="danger" :indeterminate="isIndeterminate" @change="handleCheckAllChange"&gt;Check
67
+ all&lt;/el-checkbox&gt;
68
+ </code>
69
+ </p>
70
+ </div>
71
+ </section>
72
+
47
73
  <section>
48
74
  <h2>Indeterminate</h2>
49
75
  <p class="p-lg-c my-6">
@@ -52,8 +78,6 @@
52
78
  </p>
53
79
  <div class="grid grid-flow-col auto-cols-max gap-4">
54
80
  <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">Check all</el-checkbox>
55
- <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="primary" @change="handleCheckAllChange">Check all</el-checkbox>
56
- <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="danger" @change="handleCheckAllChange">Check all</el-checkbox>
57
81
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
58
82
  <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
59
83
  </el-checkbox-group>
@@ -61,8 +85,7 @@
61
85
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
62
86
  <p class="text-xs">
63
87
  <code>
64
- &lt;el-date-picker v-model="input" type="daterange" align="left" start-placeholder="Start" end-placeholder="End"
65
- default-value=""&gt;&lt;/el-date-picker&gt;
88
+ &lt;el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"&gt;Check all&lt;/el-checkbox&gt;
66
89
  </code>
67
90
  </p>
68
91
  </div>
@@ -100,6 +123,7 @@ const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
100
123
  export default Vue.extend({
101
124
  data() {
102
125
  return {
126
+ colors: ['default', 'primary', 'secondary', 'gray', 'light', 'success', 'danger', 'info', 'warning'],
103
127
  checked: true,
104
128
  checkboxGroup1: ['Shanghai'],
105
129
  checkboxGroup2: ['Shanghai'],