@timus-networks/theme 1.0.154 → 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 -4
  2. package/components-ts/ThemeCheckbox.vue +30 -4
  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="success">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">
@@ -59,8 +85,7 @@
59
85
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
60
86
  <p class="text-xs">
61
87
  <code>
62
- &lt;el-date-picker v-model="input" type="daterange" align="left" start-placeholder="Start" end-placeholder="End"
63
- 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;
64
89
  </code>
65
90
  </p>
66
91
  </div>
@@ -95,6 +120,7 @@ const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
95
120
  export default Vue.extend({
96
121
  data() {
97
122
  return {
123
+ colors: ['default', 'primary', 'secondary', 'gray', 'light', 'success', 'danger', 'info', 'warning'],
98
124
  checked: true,
99
125
  checkboxGroup1: ['Shanghai'],
100
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="success">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">
@@ -59,8 +85,7 @@
59
85
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
60
86
  <p class="text-xs">
61
87
  <code>
62
- &lt;el-date-picker v-model="input" type="daterange" align="left" start-placeholder="Start" end-placeholder="End"
63
- 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;
64
89
  </code>
65
90
  </p>
66
91
  </div>
@@ -98,6 +123,7 @@ const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
98
123
  export default Vue.extend({
99
124
  data() {
100
125
  return {
126
+ colors: ['default', 'primary', 'secondary', 'gray', 'light', 'success', 'danger', 'info', 'warning'],
101
127
  checked: true,
102
128
  checkboxGroup1: ['Shanghai'],
103
129
  checkboxGroup2: ['Shanghai'],