@timus-networks/theme 1.0.80 → 1.0.82

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/ThemePopover.vue +47 -48
  2. package/components-ts/ThemePopover.vue +47 -48
  3. package/output/main.css +1 -1
  4. package/package.json +1 -1
package/components-js/ThemePopover.vue CHANGED
@@ -6,7 +6,7 @@
6
6
  <p class="p-md-c my-6">Hover on the dropdown menu to unfold it for more actions.</p>
7
7
  <div class="grid grid-flow-col auto-cols-max gap-4">
8
8
  <el-dropdown trigger="click">
9
- <span class="el-dropdown-link"> Dropdown List<i class="el-icon-arrow-down el-icon--right"></i> </span>
9
+ <span class="el-dropdown-link"> Dropdown List<i class="el-icon-arrow-down el-icon--right" /> </span>
10
10
  <el-dropdown-menu slot="dropdown">
11
11
  <el-dropdown-item>Action 1</el-dropdown-item>
12
12
  <el-dropdown-item>Action 2</el-dropdown-item>
@@ -16,7 +16,7 @@
16
16
  </el-dropdown-menu>
17
17
  </el-dropdown>
18
18
  <el-dropdown trigger="click">
19
- <el-button type="primary"> Dropdown List<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
19
+ <el-button type="primary"> Dropdown List<i class="el-icon-arrow-down el-icon--right" /> </el-button>
20
20
  <el-dropdown-menu slot="dropdown">
21
21
  <el-dropdown-item>Action 1</el-dropdown-item>
22
22
  <el-dropdown-item>Action 2</el-dropdown-item>
@@ -25,7 +25,7 @@
25
25
  <el-dropdown-item>Action 5</el-dropdown-item>
26
26
  </el-dropdown-menu>
27
27
  </el-dropdown>
28
- <el-dropdown split-button type="primary">
28
+ <el-dropdown split-button type="success" class="outline" size="small">
29
29
  Dropdown List
30
30
  <el-dropdown-menu slot="dropdown">
31
31
  <el-dropdown-item>Action 1</el-dropdown-item>
@@ -52,9 +52,9 @@
52
52
  <div class="grid grid-flow-col auto-cols-max gap-4">
53
53
  <el-popover placement="right" width="400" trigger="click">
54
54
  <el-table :data="gridData">
55
- <el-table-column width="150" property="date" label="date"></el-table-column>
56
- <el-table-column width="100" property="name" label="name"></el-table-column>
57
- <el-table-column width="300" property="address" label="address"></el-table-column>
55
+ <el-table-column width="150" property="date" label="date" />
56
+ <el-table-column width="100" property="name" label="name" />
57
+ <el-table-column width="300" property="address" label="address" />
58
58
  </el-table>
59
59
  <el-button slot="reference" type="primary" size="small">Click to activate</el-button>
60
60
  </el-popover>
@@ -105,7 +105,7 @@
105
105
  ve TimePicker'dan türetilmiştir ve kullanımı oldukça basittir.
106
106
  </p>
107
107
  <div class="grid grid-flow-col auto-cols-max gap-4">
108
- <el-time-select v-model="value" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="Zaman Seçin"> </el-time-select>
108
+ <el-time-select v-model="value" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="Zaman Seçin" />
109
109
  </div>
110
110
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
111
111
  <p class="text-xs">
@@ -125,9 +125,8 @@
125
125
  etkinleştirildiğinde kontrol oklarını kullanabilirsiniz.
126
126
  </p>
127
127
  <div class="grid grid-flow-col auto-cols-max gap-4">
128
- <el-time-picker v-model="value1" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="Zaman Seçin"> </el-time-picker>
129
- <el-time-picker arrow-control v-model="value2" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="Zaman Seçin">
130
- </el-time-picker>
128
+ <el-time-picker v-model="value1" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="Zaman Seçin" />
129
+ <el-time-picker v-model="value2" arrow-control :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="Zaman Seçin" />
131
130
  </div>
132
131
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
133
132
  <p class="text-xs">
@@ -146,14 +145,12 @@
146
145
  zamanları gibi durumlar için uygundur. Başlangıç ve bitiş zamanlarını kolayca belirleyebilir ve özelleştirebilirsiniz.
147
146
  </p>
148
147
  <div class="grid grid-flow-col auto-cols-max gap-4">
149
- <el-time-select placeholder="Başlangıç zamanı" v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }">
150
- </el-time-select>
148
+ <el-time-select v-model="startTime" placeholder="Başlangıç zamanı" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" />
151
149
  <el-time-select
152
- placeholder="Bitiş zamanı"
153
150
  v-model="endTime"
151
+ placeholder="Bitiş zamanı"
154
152
  :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
155
- >
156
- </el-time-select>
153
+ />
157
154
  </div>
158
155
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
159
156
  <p class="text-xs">
@@ -172,17 +169,15 @@
172
169
  ve bitiş zamanı seçmeniz gerektiğinde kullanışlıdır. Başlangıç ve bitiş zamanlarını kolayca belirleyebilir ve özelleştirebilirsiniz.
173
170
  </p>
174
171
  <div class="grid grid-flow-col auto-cols-max gap-4">
175
- <el-time-picker is-range v-model="arb1" range-separator="den" start-placeholder="Başlangıç zamanı" end-placeholder="Bitiş zamanı">
176
- </el-time-picker>
172
+ <el-time-picker v-model="arb1" is-range range-separator="den" start-placeholder="Başlangıç zamanı" end-placeholder="Bitiş zamanı" />
177
173
  <el-time-picker
174
+ v-model="arb2"
178
175
  is-range
179
176
  arrow-control
180
- v-model="arb2"
181
177
  range-separator="den"
182
178
  start-placeholder="Başlangıç zamanı"
183
179
  end-placeholder="Bitiş zamanı"
184
- >
185
- </el-time-picker>
180
+ />
186
181
  </div>
187
182
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
188
183
  <p class="text-xs">
@@ -203,8 +198,8 @@
203
198
  işlemleri için kullanılabilir.
204
199
  </p>
205
200
  <div class="grid grid-flow-col auto-cols-max gap-4">
206
- <el-date-picker v-model="value1" type="date" placeholder="Bir gün seçin"> </el-date-picker>
207
- <el-date-picker v-model="value2" type="date" placeholder="Bir gün seçin" :picker-options="pickerOptions"> </el-date-picker>
201
+ <el-date-picker v-model="value1" type="date" placeholder="Bir gün seçin" />
202
+ <el-date-picker v-model="value2" type="date" placeholder="Bir gün seçin" :picker-options="pickerOptions" />
208
203
  </div>
209
204
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
210
205
  <p class="text-xs">
@@ -222,12 +217,12 @@
222
217
  seçenekleri ile istediğiniz türde tarihleri seçebilirsiniz.
223
218
  </p>
224
219
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 xxl:grid-flow-col auto-cols-max gap-4">
225
- <el-date-picker class="w-full" v-model="dtp1" type="week" format="Week WW" placeholder="Pick a week"> </el-date-picker>
226
- <el-date-picker class="w-full" v-model="dtp2" type="month" placeholder="Pick a month"> </el-date-picker>
227
- <el-date-picker class="w-full" v-model="dtp3" type="year" placeholder="Pick a year"> </el-date-picker>
228
- <el-date-picker class="w-full" type="dates" v-model="dtp4" placeholder="Pick one or more dates"> </el-date-picker>
229
- <el-date-picker class="w-full" type="months" v-model="dtp5" placeholder="Pick one or more months"> </el-date-picker>
230
- <el-date-picker class="w-full" type="years" v-model="dtp6" placeholder="Pick one or more years"> </el-date-picker>
220
+ <el-date-picker v-model="dtp1" class="w-full" type="week" format="Week WW" placeholder="Pick a week" />
221
+ <el-date-picker v-model="dtp2" class="w-full" type="month" placeholder="Pick a month" />
222
+ <el-date-picker v-model="dtp3" class="w-full" type="year" placeholder="Pick a year" />
223
+ <el-date-picker v-model="dtp4" class="w-full" type="dates" placeholder="Pick one or more dates" />
224
+ <el-date-picker v-model="dtp5" class="w-full" type="months" placeholder="Pick one or more months" />
225
+ <el-date-picker v-model="dtp6" class="w-full" type="years" placeholder="Pick one or more years" />
231
226
  </div>
232
227
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
233
228
  <p class="text-xs">
@@ -242,8 +237,7 @@
242
237
  <h2>Date Range</h2>
243
238
  <p class="p-md-c my-6">Tarih aralığı seçici, bir başlangıç ve bitiş tarihi seçmenize olanak tanır.</p>
244
239
  <div class="grid grid-flow-col auto-cols-max gap-4">
245
- <el-date-picker v-model="datr1" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date">
246
- </el-date-picker>
240
+ <el-date-picker v-model="datr1" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
247
241
  <el-date-picker
248
242
  v-model="datr2"
249
243
  type="daterange"
@@ -254,8 +248,7 @@
254
248
  end-placeholder="End date"
255
249
  :picker-options="pickerOptions"
256
250
  size="small"
257
- >
258
- </el-date-picker>
251
+ />
259
252
  </div>
260
253
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
261
254
  <p class="text-xs">
@@ -271,8 +264,7 @@
271
264
  <h2>Month Range</h2>
272
265
  <p class="p-md-c my-6">Ay aralığı seçici, bir başlangıç ve bitiş ayı seçmenize olanak tanır.</p>
273
266
  <div class="grid grid-flow-col auto-cols-max gap-4">
274
- <el-date-picker v-model="value1" type="monthrange" range-separator=" - " start-placeholder="Başlangıç ayı" end-placeholder="Bitiş ayı">
275
- </el-date-picker>
267
+ <el-date-picker v-model="value1" type="monthrange" range-separator=" - " start-placeholder="Başlangıç ayı" end-placeholder="Bitiş ayı" />
276
268
  <el-date-picker
277
269
  v-model="value2"
278
270
  type="monthrange"
@@ -282,8 +274,7 @@
282
274
  start-placeholder="Başlangıç ayı"
283
275
  end-placeholder="Bitiş ayı"
284
276
  :picker-options="monthOptions"
285
- >
286
- </el-date-picker>
277
+ />
287
278
  </div>
288
279
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
289
280
  <p class="text-xs">
@@ -304,9 +295,9 @@
304
295
  özellikler hakkında bilgi almak için DatePicker ve TimePicker dokümantasyonlarına başvurabilirsiniz.
305
296
  </p>
306
297
  <div class="grid grid-flow-col auto-cols-max gap-4">
307
- <el-date-picker v-model="dat1" type="datetime" placeholder="Select date and time"> </el-date-picker>
308
- <el-date-picker v-model="dat2" type="datetime" placeholder="Select date and time" :picker-options="dataAndTimeOptions"> </el-date-picker>
309
- <el-date-picker v-model="dat3" type="datetime" placeholder="Select date and time" default-time="12:00:00"> </el-date-picker>
298
+ <el-date-picker v-model="dat1" type="datetime" placeholder="Select date and time" />
299
+ <el-date-picker v-model="dat2" type="datetime" placeholder="Select date and time" :picker-options="dataAndTimeOptions" />
300
+ <el-date-picker v-model="dat3" type="datetime" placeholder="Select date and time" default-time="12:00:00" />
310
301
  </div>
311
302
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
312
303
  <p class="text-xs">
@@ -322,8 +313,7 @@
322
313
  veya etkinlik planlaması gibi durumlar için kullanışlıdır. Kullanıcılar başlangıç ve bitiş tarihini veya saati belirleyebilirler.
323
314
  </p>
324
315
  <div class="grid grid-flow-col auto-cols-max gap-4">
325
- <el-date-picker v-model="datr1" type="datetimerange" range-separator="To" start-placeholder="Start date" end-placeholder="End date">
326
- </el-date-picker>
316
+ <el-date-picker v-model="datr1" type="datetimerange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
327
317
  <el-date-picker
328
318
  v-model="datr2"
329
319
  type="datetimerange"
@@ -332,8 +322,7 @@
332
322
  start-placeholder="Start date"
333
323
  end-placeholder="End date"
334
324
  align="right"
335
- >
336
- </el-date-picker>
325
+ />
337
326
  </div>
338
327
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
339
328
  <p class="text-xs">
@@ -394,6 +383,7 @@ export default Vue.extend({
394
383
  text: 'Yesterday',
395
384
  onClick(picker) {
396
385
  const date = new Date();
386
+
397
387
  date.setTime(date.getTime() - 3600 * 1000 * 24);
398
388
  picker.$emit('pick', date);
399
389
  },
@@ -402,6 +392,7 @@ export default Vue.extend({
402
392
  text: 'A week ago',
403
393
  onClick(picker) {
404
394
  const date = new Date();
395
+
405
396
  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
406
397
  picker.$emit('pick', date);
407
398
  },
@@ -418,6 +409,7 @@ export default Vue.extend({
418
409
  onClick(picker) {
419
410
  const end = new Date();
420
411
  const start = new Date();
412
+
421
413
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
422
414
  picker.$emit('pick', [start, end]);
423
415
  },
@@ -427,6 +419,7 @@ export default Vue.extend({
427
419
  onClick(picker) {
428
420
  const end = new Date();
429
421
  const start = new Date();
422
+
430
423
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
431
424
  picker.$emit('pick', [start, end]);
432
425
  },
@@ -436,6 +429,7 @@ export default Vue.extend({
436
429
  onClick(picker) {
437
430
  const end = new Date();
438
431
  const start = new Date();
432
+
439
433
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
440
434
  picker.$emit('pick', [start, end]);
441
435
  },
@@ -457,6 +451,7 @@ export default Vue.extend({
457
451
  onClick(picker) {
458
452
  const end = new Date();
459
453
  const start = new Date(new Date().getFullYear(), 0);
454
+
460
455
  picker.$emit('pick', [start, end]);
461
456
  },
462
457
  },
@@ -465,6 +460,7 @@ export default Vue.extend({
465
460
  onClick(picker) {
466
461
  const end = new Date();
467
462
  const start = new Date();
463
+
468
464
  start.setMonth(start.getMonth() - 6);
469
465
  picker.$emit('pick', [start, end]);
470
466
  },
@@ -483,6 +479,7 @@ export default Vue.extend({
483
479
  text: 'Yesterday',
484
480
  onClick(picker) {
485
481
  const date = new Date();
482
+
486
483
  date.setTime(date.getTime() - 3600 * 1000 * 24);
487
484
  picker.$emit('pick', date);
488
485
  },
@@ -491,6 +488,7 @@ export default Vue.extend({
491
488
  text: 'A week ago',
492
489
  onClick(picker) {
493
490
  const date = new Date();
491
+
494
492
  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
495
493
  picker.$emit('pick', date);
496
494
  },
@@ -508,11 +506,6 @@ export default Vue.extend({
508
506
  dtp6: '',
509
507
  };
510
508
  },
511
- methods: {
512
- handleChange(value) {
513
- console.log(value);
514
- },
515
- },
516
509
  computed: {
517
510
  gridSize() {
518
511
  const grids = {
@@ -521,8 +514,14 @@ export default Vue.extend({
521
514
  7: 'grid-cols-7',
522
515
  8: 'grid-cols-8',
523
516
  };
517
+
524
518
  return grids;
525
519
  },
526
520
  },
521
+ methods: {
522
+ handleChange(value) {
523
+ console.log(value);
524
+ },
525
+ },
527
526
  });
528
527
  </script>
package/components-ts/ThemePopover.vue CHANGED
@@ -6,7 +6,7 @@
6
6
  <p class="p-md-c my-6">Hover on the dropdown menu to unfold it for more actions.</p>
7
7
  <div class="grid grid-flow-col auto-cols-max gap-4">
8
8
  <el-dropdown trigger="click">
9
- <span class="el-dropdown-link"> Dropdown List<i class="el-icon-arrow-down el-icon--right"></i> </span>
9
+ <span class="el-dropdown-link"> Dropdown List<i class="el-icon-arrow-down el-icon--right" /> </span>
10
10
  <el-dropdown-menu slot="dropdown">
11
11
  <el-dropdown-item>Action 1</el-dropdown-item>
12
12
  <el-dropdown-item>Action 2</el-dropdown-item>
@@ -16,7 +16,7 @@
16
16
  </el-dropdown-menu>
17
17
  </el-dropdown>
18
18
  <el-dropdown trigger="click">
19
- <el-button type="primary"> Dropdown List<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
19
+ <el-button type="primary"> Dropdown List<i class="el-icon-arrow-down el-icon--right" /> </el-button>
20
20
  <el-dropdown-menu slot="dropdown">
21
21
  <el-dropdown-item>Action 1</el-dropdown-item>
22
22
  <el-dropdown-item>Action 2</el-dropdown-item>
@@ -25,7 +25,7 @@
25
25
  <el-dropdown-item>Action 5</el-dropdown-item>
26
26
  </el-dropdown-menu>
27
27
  </el-dropdown>
28
- <el-dropdown split-button type="primary">
28
+ <el-dropdown split-button type="success" class="outline" size="small">
29
29
  Dropdown List
30
30
  <el-dropdown-menu slot="dropdown">
31
31
  <el-dropdown-item>Action 1</el-dropdown-item>
@@ -52,9 +52,9 @@
52
52
  <div class="grid grid-flow-col auto-cols-max gap-4">
53
53
  <el-popover placement="right" width="400" trigger="click">
54
54
  <el-table :data="gridData">
55
- <el-table-column width="150" property="date" label="date"></el-table-column>
56
- <el-table-column width="100" property="name" label="name"></el-table-column>
57
- <el-table-column width="300" property="address" label="address"></el-table-column>
55
+ <el-table-column width="150" property="date" label="date" />
56
+ <el-table-column width="100" property="name" label="name" />
57
+ <el-table-column width="300" property="address" label="address" />
58
58
  </el-table>
59
59
  <el-button slot="reference" type="primary" size="small">Click to activate</el-button>
60
60
  </el-popover>
@@ -105,7 +105,7 @@
105
105
  ve TimePicker'dan türetilmiştir ve kullanımı oldukça basittir.
106
106
  </p>
107
107
  <div class="grid grid-flow-col auto-cols-max gap-4">
108
- <el-time-select v-model="value" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="Zaman Seçin"> </el-time-select>
108
+ <el-time-select v-model="value" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="Zaman Seçin" />
109
109
  </div>
110
110
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
111
111
  <p class="text-xs">
@@ -125,9 +125,8 @@
125
125
  etkinleştirildiğinde kontrol oklarını kullanabilirsiniz.
126
126
  </p>
127
127
  <div class="grid grid-flow-col auto-cols-max gap-4">
128
- <el-time-picker v-model="value1" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="Zaman Seçin"> </el-time-picker>
129
- <el-time-picker arrow-control v-model="value2" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="Zaman Seçin">
130
- </el-time-picker>
128
+ <el-time-picker v-model="value1" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="Zaman Seçin" />
129
+ <el-time-picker v-model="value2" arrow-control :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="Zaman Seçin" />
131
130
  </div>
132
131
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
133
132
  <p class="text-xs">
@@ -146,14 +145,12 @@
146
145
  zamanları gibi durumlar için uygundur. Başlangıç ve bitiş zamanlarını kolayca belirleyebilir ve özelleştirebilirsiniz.
147
146
  </p>
148
147
  <div class="grid grid-flow-col auto-cols-max gap-4">
149
- <el-time-select placeholder="Başlangıç zamanı" v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }">
150
- </el-time-select>
148
+ <el-time-select v-model="startTime" placeholder="Başlangıç zamanı" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" />
151
149
  <el-time-select
152
- placeholder="Bitiş zamanı"
153
150
  v-model="endTime"
151
+ placeholder="Bitiş zamanı"
154
152
  :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
155
- >
156
- </el-time-select>
153
+ />
157
154
  </div>
158
155
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
159
156
  <p class="text-xs">
@@ -172,17 +169,15 @@
172
169
  ve bitiş zamanı seçmeniz gerektiğinde kullanışlıdır. Başlangıç ve bitiş zamanlarını kolayca belirleyebilir ve özelleştirebilirsiniz.
173
170
  </p>
174
171
  <div class="grid grid-flow-col auto-cols-max gap-4">
175
- <el-time-picker is-range v-model="arb1" range-separator="den" start-placeholder="Başlangıç zamanı" end-placeholder="Bitiş zamanı">
176
- </el-time-picker>
172
+ <el-time-picker v-model="arb1" is-range range-separator="den" start-placeholder="Başlangıç zamanı" end-placeholder="Bitiş zamanı" />
177
173
  <el-time-picker
174
+ v-model="arb2"
178
175
  is-range
179
176
  arrow-control
180
- v-model="arb2"
181
177
  range-separator="den"
182
178
  start-placeholder="Başlangıç zamanı"
183
179
  end-placeholder="Bitiş zamanı"
184
- >
185
- </el-time-picker>
180
+ />
186
181
  </div>
187
182
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
188
183
  <p class="text-xs">
@@ -203,8 +198,8 @@
203
198
  işlemleri için kullanılabilir.
204
199
  </p>
205
200
  <div class="grid grid-flow-col auto-cols-max gap-4">
206
- <el-date-picker v-model="value1" type="date" placeholder="Bir gün seçin"> </el-date-picker>
207
- <el-date-picker v-model="value2" type="date" placeholder="Bir gün seçin" :picker-options="pickerOptions"> </el-date-picker>
201
+ <el-date-picker v-model="value1" type="date" placeholder="Bir gün seçin" />
202
+ <el-date-picker v-model="value2" type="date" placeholder="Bir gün seçin" :picker-options="pickerOptions" />
208
203
  </div>
209
204
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
210
205
  <p class="text-xs">
@@ -222,12 +217,12 @@
222
217
  seçenekleri ile istediğiniz türde tarihleri seçebilirsiniz.
223
218
  </p>
224
219
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 xxl:grid-flow-col auto-cols-max gap-4">
225
- <el-date-picker class="w-full" v-model="dtp1" type="week" format="Week WW" placeholder="Pick a week"> </el-date-picker>
226
- <el-date-picker class="w-full" v-model="dtp2" type="month" placeholder="Pick a month"> </el-date-picker>
227
- <el-date-picker class="w-full" v-model="dtp3" type="year" placeholder="Pick a year"> </el-date-picker>
228
- <el-date-picker class="w-full" type="dates" v-model="dtp4" placeholder="Pick one or more dates"> </el-date-picker>
229
- <el-date-picker class="w-full" type="months" v-model="dtp5" placeholder="Pick one or more months"> </el-date-picker>
230
- <el-date-picker class="w-full" type="years" v-model="dtp6" placeholder="Pick one or more years"> </el-date-picker>
220
+ <el-date-picker v-model="dtp1" class="w-full" type="week" format="Week WW" placeholder="Pick a week" />
221
+ <el-date-picker v-model="dtp2" class="w-full" type="month" placeholder="Pick a month" />
222
+ <el-date-picker v-model="dtp3" class="w-full" type="year" placeholder="Pick a year" />
223
+ <el-date-picker v-model="dtp4" class="w-full" type="dates" placeholder="Pick one or more dates" />
224
+ <el-date-picker v-model="dtp5" class="w-full" type="months" placeholder="Pick one or more months" />
225
+ <el-date-picker v-model="dtp6" class="w-full" type="years" placeholder="Pick one or more years" />
231
226
  </div>
232
227
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
233
228
  <p class="text-xs">
@@ -242,8 +237,7 @@
242
237
  <h2>Date Range</h2>
243
238
  <p class="p-md-c my-6">Tarih aralığı seçici, bir başlangıç ve bitiş tarihi seçmenize olanak tanır.</p>
244
239
  <div class="grid grid-flow-col auto-cols-max gap-4">
245
- <el-date-picker v-model="datr1" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date">
246
- </el-date-picker>
240
+ <el-date-picker v-model="datr1" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
247
241
  <el-date-picker
248
242
  v-model="datr2"
249
243
  type="daterange"
@@ -254,8 +248,7 @@
254
248
  end-placeholder="End date"
255
249
  :picker-options="pickerOptions"
256
250
  size="small"
257
- >
258
- </el-date-picker>
251
+ />
259
252
  </div>
260
253
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
261
254
  <p class="text-xs">
@@ -271,8 +264,7 @@
271
264
  <h2>Month Range</h2>
272
265
  <p class="p-md-c my-6">Ay aralığı seçici, bir başlangıç ve bitiş ayı seçmenize olanak tanır.</p>
273
266
  <div class="grid grid-flow-col auto-cols-max gap-4">
274
- <el-date-picker v-model="value1" type="monthrange" range-separator=" - " start-placeholder="Başlangıç ayı" end-placeholder="Bitiş ayı">
275
- </el-date-picker>
267
+ <el-date-picker v-model="value1" type="monthrange" range-separator=" - " start-placeholder="Başlangıç ayı" end-placeholder="Bitiş ayı" />
276
268
  <el-date-picker
277
269
  v-model="value2"
278
270
  type="monthrange"
@@ -282,8 +274,7 @@
282
274
  start-placeholder="Başlangıç ayı"
283
275
  end-placeholder="Bitiş ayı"
284
276
  :picker-options="monthOptions"
285
- >
286
- </el-date-picker>
277
+ />
287
278
  </div>
288
279
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
289
280
  <p class="text-xs">
@@ -304,9 +295,9 @@
304
295
  özellikler hakkında bilgi almak için DatePicker ve TimePicker dokümantasyonlarına başvurabilirsiniz.
305
296
  </p>
306
297
  <div class="grid grid-flow-col auto-cols-max gap-4">
307
- <el-date-picker v-model="dat1" type="datetime" placeholder="Select date and time"> </el-date-picker>
308
- <el-date-picker v-model="dat2" type="datetime" placeholder="Select date and time" :picker-options="dataAndTimeOptions"> </el-date-picker>
309
- <el-date-picker v-model="dat3" type="datetime" placeholder="Select date and time" default-time="12:00:00"> </el-date-picker>
298
+ <el-date-picker v-model="dat1" type="datetime" placeholder="Select date and time" />
299
+ <el-date-picker v-model="dat2" type="datetime" placeholder="Select date and time" :picker-options="dataAndTimeOptions" />
300
+ <el-date-picker v-model="dat3" type="datetime" placeholder="Select date and time" default-time="12:00:00" />
310
301
  </div>
311
302
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
312
303
  <p class="text-xs">
@@ -322,8 +313,7 @@
322
313
  veya etkinlik planlaması gibi durumlar için kullanışlıdır. Kullanıcılar başlangıç ve bitiş tarihini veya saati belirleyebilirler.
323
314
  </p>
324
315
  <div class="grid grid-flow-col auto-cols-max gap-4">
325
- <el-date-picker v-model="datr1" type="datetimerange" range-separator="To" start-placeholder="Start date" end-placeholder="End date">
326
- </el-date-picker>
316
+ <el-date-picker v-model="datr1" type="datetimerange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
327
317
  <el-date-picker
328
318
  v-model="datr2"
329
319
  type="datetimerange"
@@ -332,8 +322,7 @@
332
322
  start-placeholder="Start date"
333
323
  end-placeholder="End date"
334
324
  align="right"
335
- >
336
- </el-date-picker>
325
+ />
337
326
  </div>
338
327
  <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
339
328
  <p class="text-xs">
@@ -394,6 +383,7 @@ export default Vue.extend({
394
383
  text: 'Yesterday',
395
384
  onClick(picker) {
396
385
  const date = new Date();
386
+
397
387
  date.setTime(date.getTime() - 3600 * 1000 * 24);
398
388
  picker.$emit('pick', date);
399
389
  },
@@ -402,6 +392,7 @@ export default Vue.extend({
402
392
  text: 'A week ago',
403
393
  onClick(picker) {
404
394
  const date = new Date();
395
+
405
396
  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
406
397
  picker.$emit('pick', date);
407
398
  },
@@ -418,6 +409,7 @@ export default Vue.extend({
418
409
  onClick(picker) {
419
410
  const end = new Date();
420
411
  const start = new Date();
412
+
421
413
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
422
414
  picker.$emit('pick', [start, end]);
423
415
  },
@@ -427,6 +419,7 @@ export default Vue.extend({
427
419
  onClick(picker) {
428
420
  const end = new Date();
429
421
  const start = new Date();
422
+
430
423
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
431
424
  picker.$emit('pick', [start, end]);
432
425
  },
@@ -436,6 +429,7 @@ export default Vue.extend({
436
429
  onClick(picker) {
437
430
  const end = new Date();
438
431
  const start = new Date();
432
+
439
433
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
440
434
  picker.$emit('pick', [start, end]);
441
435
  },
@@ -457,6 +451,7 @@ export default Vue.extend({
457
451
  onClick(picker) {
458
452
  const end = new Date();
459
453
  const start = new Date(new Date().getFullYear(), 0);
454
+
460
455
  picker.$emit('pick', [start, end]);
461
456
  },
462
457
  },
@@ -465,6 +460,7 @@ export default Vue.extend({
465
460
  onClick(picker) {
466
461
  const end = new Date();
467
462
  const start = new Date();
463
+
468
464
  start.setMonth(start.getMonth() - 6);
469
465
  picker.$emit('pick', [start, end]);
470
466
  },
@@ -483,6 +479,7 @@ export default Vue.extend({
483
479
  text: 'Yesterday',
484
480
  onClick(picker) {
485
481
  const date = new Date();
482
+
486
483
  date.setTime(date.getTime() - 3600 * 1000 * 24);
487
484
  picker.$emit('pick', date);
488
485
  },
@@ -491,6 +488,7 @@ export default Vue.extend({
491
488
  text: 'A week ago',
492
489
  onClick(picker) {
493
490
  const date = new Date();
491
+
494
492
  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
495
493
  picker.$emit('pick', date);
496
494
  },
@@ -508,11 +506,6 @@ export default Vue.extend({
508
506
  dtp6: '',
509
507
  };
510
508
  },
511
- methods: {
512
- handleChange(value) {
513
- console.log(value);
514
- },
515
- },
516
509
  computed: {
517
510
  gridSize() {
518
511
  const grids = {
@@ -521,8 +514,14 @@ export default Vue.extend({
521
514
  7: 'grid-cols-7',
522
515
  8: 'grid-cols-8',
523
516
  };
517
+
524
518
  return grids;
525
519
  },
526
520
  },
521
+ methods: {
522
+ handleChange(value) {
523
+ console.log(value);
524
+ },
525
+ },
527
526
  });
528
527
  </script>