@timus-networks/theme 1.0.184 → 2.0.16

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 (225) hide show
  1. package/components/TimusIcons.vue +54 -0
  2. package/generate-icon.js +22 -0
  3. package/module.ts +84 -0
  4. package/package.json +17 -18
  5. package/pages/icons.vue +37 -0
  6. package/plugins/sample-plugin.ts +5 -0
  7. package/public/isax/fonts/iconsax.svg +927 -0
  8. package/public/isax/fonts/iconsax.ttf +0 -0
  9. package/public/isax/fonts/iconsax.woff +0 -0
  10. package/public/isax/icons.json +899 -0
  11. package/public/isax/selection.json +1 -0
  12. package/public/isax/style.css +1 -0
  13. package/public/isax/style.scss +5435 -0
  14. package/public/isax/variables.scss +900 -0
  15. package/README.md +0 -119
  16. package/components-js/ThemeAlert.vue +0 -78
  17. package/components-js/ThemeAvatar.vue +0 -55
  18. package/components-js/ThemeBadge.vue +0 -106
  19. package/components-js/ThemeBreadcrumb.vue +0 -44
  20. package/components-js/ThemeButtons.vue +0 -148
  21. package/components-js/ThemeCascader.vue +0 -390
  22. package/components-js/ThemeCheckbox.d.ts +0 -2
  23. package/components-js/ThemeCheckbox.vue +0 -197
  24. package/components-js/ThemeCollapse.vue +0 -73
  25. package/components-js/ThemeDialog.vue +0 -49
  26. package/components-js/ThemeForm.d.ts +0 -2
  27. package/components-js/ThemeForm.vue +0 -134
  28. package/components-js/ThemeInformation.vue +0 -127
  29. package/components-js/ThemeInputNumbers.vue +0 -74
  30. package/components-js/ThemeInputs.vue +0 -316
  31. package/components-js/ThemeLink.vue +0 -110
  32. package/components-js/ThemeLogo.vue +0 -57
  33. package/components-js/ThemeMessage.vue +0 -55
  34. package/components-js/ThemeMessageBox.vue +0 -47
  35. package/components-js/ThemePopover.vue +0 -557
  36. package/components-js/ThemeRadio.d.ts +0 -2
  37. package/components-js/ThemeRadio.vue +0 -164
  38. package/components-js/ThemeSelect.vue +0 -237
  39. package/components-js/ThemeSidebar.d.ts +0 -2
  40. package/components-js/ThemeSidebar.vue +0 -275
  41. package/components-js/ThemeTable.vue +0 -305
  42. package/components-js/ThemeTag.vue +0 -145
  43. package/components-js/ThemeToggle.vue +0 -123
  44. package/components-js/ThemeTooltip.vue +0 -191
  45. package/components-js/ThemeTypo.vue +0 -65
  46. package/components-js/ThemeUpload.vue +0 -92
  47. package/components-js/TimusSamples.vue +0 -54
  48. package/components-js/exporter.js +0 -19
  49. package/components-js/interfaces.js +0 -1
  50. package/components-js/utils.d.ts +0 -6
  51. package/components-js/utils.js +0 -17
  52. package/components-ts/ThemeAlert.vue +0 -78
  53. package/components-ts/ThemeAvatar.vue +0 -55
  54. package/components-ts/ThemeBadge.vue +0 -106
  55. package/components-ts/ThemeBreadcrumb.vue +0 -44
  56. package/components-ts/ThemeButtons.vue +0 -148
  57. package/components-ts/ThemeCascader.vue +0 -390
  58. package/components-ts/ThemeCheckbox.vue +0 -202
  59. package/components-ts/ThemeCollapse.vue +0 -73
  60. package/components-ts/ThemeDialog.vue +0 -49
  61. package/components-ts/ThemeForm.vue +0 -137
  62. package/components-ts/ThemeInformation.vue +0 -127
  63. package/components-ts/ThemeInputNumbers.vue +0 -74
  64. package/components-ts/ThemeInputs.vue +0 -316
  65. package/components-ts/ThemeLink.vue +0 -110
  66. package/components-ts/ThemeLogo.vue +0 -57
  67. package/components-ts/ThemeMessage.vue +0 -55
  68. package/components-ts/ThemeMessageBox.vue +0 -47
  69. package/components-ts/ThemePopover.vue +0 -557
  70. package/components-ts/ThemeRadio.vue +0 -169
  71. package/components-ts/ThemeSelect.vue +0 -237
  72. package/components-ts/ThemeSidebar.vue +0 -277
  73. package/components-ts/ThemeTable.vue +0 -305
  74. package/components-ts/ThemeTag.vue +0 -145
  75. package/components-ts/ThemeToggle.vue +0 -123
  76. package/components-ts/ThemeTooltip.vue +0 -191
  77. package/components-ts/ThemeTypo.vue +0 -65
  78. package/components-ts/ThemeUpload.vue +0 -92
  79. package/components-ts/TimusSamples.vue +0 -54
  80. package/components-ts/exporter.js +0 -19
  81. package/components-ts/interfaces.ts +0 -11
  82. package/components-ts/utils.ts +0 -20
  83. package/convert-js.js +0 -112
  84. package/convert-sass.js +0 -26
  85. package/fonts/poppins-font-face/files/Poppins-Black.eot +0 -0
  86. package/fonts/poppins-font-face/files/Poppins-Black.svg +0 -3099
  87. package/fonts/poppins-font-face/files/Poppins-Black.ttf +0 -0
  88. package/fonts/poppins-font-face/files/Poppins-Black.woff +0 -0
  89. package/fonts/poppins-font-face/files/Poppins-Black.woff2 +0 -0
  90. package/fonts/poppins-font-face/files/Poppins-BlackItalic.ttf +0 -0
  91. package/fonts/poppins-font-face/files/Poppins-Bold.eot +0 -0
  92. package/fonts/poppins-font-face/files/Poppins-Bold.svg +0 -3131
  93. package/fonts/poppins-font-face/files/Poppins-Bold.ttf +0 -0
  94. package/fonts/poppins-font-face/files/Poppins-Bold.woff +0 -0
  95. package/fonts/poppins-font-face/files/Poppins-Bold.woff2 +0 -0
  96. package/fonts/poppins-font-face/files/Poppins-BoldItalic.ttf +0 -0
  97. package/fonts/poppins-font-face/files/Poppins-ExtraBold.eot +0 -0
  98. package/fonts/poppins-font-face/files/Poppins-ExtraBold.svg +0 -3120
  99. package/fonts/poppins-font-face/files/Poppins-ExtraBold.ttf +0 -0
  100. package/fonts/poppins-font-face/files/Poppins-ExtraBold.woff +0 -0
  101. package/fonts/poppins-font-face/files/Poppins-ExtraBold.woff2 +0 -0
  102. package/fonts/poppins-font-face/files/Poppins-ExtraBoldItalic.ttf +0 -0
  103. package/fonts/poppins-font-face/files/Poppins-ExtraLight.eot +0 -0
  104. package/fonts/poppins-font-face/files/Poppins-ExtraLight.svg +0 -3245
  105. package/fonts/poppins-font-face/files/Poppins-ExtraLight.ttf +0 -0
  106. package/fonts/poppins-font-face/files/Poppins-ExtraLight.woff +0 -0
  107. package/fonts/poppins-font-face/files/Poppins-ExtraLight.woff2 +0 -0
  108. package/fonts/poppins-font-face/files/Poppins-ExtraLightItalic.ttf +0 -0
  109. package/fonts/poppins-font-face/files/Poppins-Italic.eot +0 -0
  110. package/fonts/poppins-font-face/files/Poppins-Italic.svg +0 -3414
  111. package/fonts/poppins-font-face/files/Poppins-Italic.ttf +0 -0
  112. package/fonts/poppins-font-face/files/Poppins-Italic.woff +0 -0
  113. package/fonts/poppins-font-face/files/Poppins-Italic.woff2 +0 -0
  114. package/fonts/poppins-font-face/files/Poppins-Light.eot +0 -0
  115. package/fonts/poppins-font-face/files/Poppins-Light.svg +0 -3244
  116. package/fonts/poppins-font-face/files/Poppins-Light.ttf +0 -0
  117. package/fonts/poppins-font-face/files/Poppins-Light.woff +0 -0
  118. package/fonts/poppins-font-face/files/Poppins-Light.woff2 +0 -0
  119. package/fonts/poppins-font-face/files/Poppins-LightItalic.ttf +0 -0
  120. package/fonts/poppins-font-face/files/Poppins-Medium.eot +0 -0
  121. package/fonts/poppins-font-face/files/Poppins-Medium.svg +0 -3190
  122. package/fonts/poppins-font-face/files/Poppins-Medium.ttf +0 -0
  123. package/fonts/poppins-font-face/files/Poppins-Medium.woff +0 -0
  124. package/fonts/poppins-font-face/files/Poppins-Medium.woff2 +0 -0
  125. package/fonts/poppins-font-face/files/Poppins-MediumItalic.ttf +0 -0
  126. package/fonts/poppins-font-face/files/Poppins-Regular.eot +0 -0
  127. package/fonts/poppins-font-face/files/Poppins-Regular.svg +0 -3213
  128. package/fonts/poppins-font-face/files/Poppins-Regular.ttf +0 -0
  129. package/fonts/poppins-font-face/files/Poppins-Regular.woff +0 -0
  130. package/fonts/poppins-font-face/files/Poppins-Regular.woff2 +0 -0
  131. package/fonts/poppins-font-face/files/Poppins-SemiBold.eot +0 -0
  132. package/fonts/poppins-font-face/files/Poppins-SemiBold.svg +0 -3174
  133. package/fonts/poppins-font-face/files/Poppins-SemiBold.ttf +0 -0
  134. package/fonts/poppins-font-face/files/Poppins-SemiBold.woff +0 -0
  135. package/fonts/poppins-font-face/files/Poppins-SemiBold.woff2 +0 -0
  136. package/fonts/poppins-font-face/files/Poppins-SemiBoldItalic.ttf +0 -0
  137. package/fonts/poppins-font-face/files/Poppins-Thin.eot +0 -0
  138. package/fonts/poppins-font-face/files/Poppins-Thin.svg +0 -3266
  139. package/fonts/poppins-font-face/files/Poppins-Thin.ttf +0 -0
  140. package/fonts/poppins-font-face/files/Poppins-Thin.woff +0 -0
  141. package/fonts/poppins-font-face/files/Poppins-Thin.woff2 +0 -0
  142. package/fonts/poppins-font-face/files/Poppins-ThinItalic.ttf +0 -0
  143. package/fonts/poppins-font-face/stylesheet.css +0 -81
  144. package/images/applications/apple.png +0 -0
  145. package/images/applications/apple_icloud.png +0 -0
  146. package/images/applications/apple_itunes.png +0 -0
  147. package/images/applications/apple_store.png +0 -0
  148. package/images/applications/bloomberg.png +0 -0
  149. package/images/applications/chrome.png +0 -0
  150. package/images/applications/csgo.png +0 -0
  151. package/images/applications/dns.png +0 -0
  152. package/images/applications/dropbox.png +0 -0
  153. package/images/applications/evil.png +0 -0
  154. package/images/applications/facebook-messenger.png +0 -0
  155. package/images/applications/facebook.png +0 -0
  156. package/images/applications/ftp.png +0 -0
  157. package/images/applications/gmail.png +0 -0
  158. package/images/applications/google.png +0 -0
  159. package/images/applications/google_maps.png +0 -0
  160. package/images/applications/instagram.png +0 -0
  161. package/images/applications/linkedin.svg +0 -5
  162. package/images/applications/messenger.png +0 -0
  163. package/images/applications/mysql.png +0 -0
  164. package/images/applications/netflix.png +0 -0
  165. package/images/applications/nintendo.png +0 -0
  166. package/images/applications/sap.png +0 -0
  167. package/images/applications/skype.png +0 -0
  168. package/images/applications/slack.png +0 -0
  169. package/images/applications/smtp.png +0 -0
  170. package/images/applications/snapchat.png +0 -0
  171. package/images/applications/spotify.png +0 -0
  172. package/images/applications/ssh.png +0 -0
  173. package/images/applications/teamspeak.png +0 -0
  174. package/images/applications/tiktok.png +0 -0
  175. package/images/applications/twitch.png +0 -0
  176. package/images/applications/twitter.png +0 -0
  177. package/images/applications/ubuntuone.png +0 -0
  178. package/images/applications/utorrent.png +0 -0
  179. package/images/applications/website.png +0 -0
  180. package/images/applications/whatsapp.png +0 -0
  181. package/images/applications/windows-update.png +0 -0
  182. package/images/applications/youtube.png +0 -0
  183. package/images/backgrounds/login-icon.png +0 -0
  184. package/images/backgrounds/login.jpg +0 -0
  185. package/images/backgrounds/login.png +0 -0
  186. package/images/cards/amex.svg +0 -20
  187. package/images/cards/default.svg +0 -18
  188. package/images/cards/dina.svg +0 -12
  189. package/images/cards/diners.svg +0 -30
  190. package/images/cards/discover.svg +0 -28
  191. package/images/cards/eftpos.svg +0 -21
  192. package/images/cards/jcb.svg +0 -41
  193. package/images/cards/mastercard.svg +0 -5
  194. package/images/cards/unionpay.svg +0 -6
  195. package/images/cards/visa.svg +0 -3
  196. package/images/devices/os-android.png +0 -0
  197. package/images/devices/os-android.svg +0 -6
  198. package/images/devices/os-apple.svg +0 -4
  199. package/images/devices/os-default.svg +0 -5
  200. package/images/devices/os-ios.png +0 -0
  201. package/images/devices/os-ios.svg +0 -4
  202. package/images/devices/os-linux-debian.png +0 -0
  203. package/images/devices/os-linux-ubuntu.png +0 -0
  204. package/images/devices/os-linux.svg +0 -3
  205. package/images/devices/os-osx.png +0 -0
  206. package/images/devices/os-unknown.png +0 -0
  207. package/images/devices/os-windows.png +0 -0
  208. package/images/devices/os-windows.svg +0 -3
  209. package/images/devices/type-laptop-ubuntu.png +0 -0
  210. package/images/devices/type-laptop.png +0 -0
  211. package/images/devices/type-printer.png +0 -0
  212. package/images/devices/type-switch-cisco.png +0 -0
  213. package/images/logos/timus-favicon.png +0 -0
  214. package/images/logos/timus-icon.svg +0 -17
  215. package/images/logos/timus-logo-manager.svg +0 -29
  216. package/images/logos/timus-logo-partner.svg +0 -35
  217. package/images/logos/timus-logo.svg +0 -22
  218. package/index.d.ts +0 -5
  219. package/loader.js +0 -50
  220. package/module.js +0 -77
  221. package/output/main.css +0 -1
  222. package/plugins/html-to-string.js +0 -36
  223. package/plugins/js-components-installer.js +0 -22
  224. package/plugins/theme-provider.js +0 -72
  225. package/plugins/ts-components-installer.js +0 -22
@@ -1,164 +0,0 @@
1
- <template>
2
- <div class="pt-8 pb-16 flex gap-12 flex-col">
3
- <h1>Radio</h1>
4
-
5
- <section>
6
- <h2>Temel Kullanım</h2>
7
- <p class="p-lg-c my-6">El Radio, çok fazla seçeneğe sahip olmamalıdır. Aksi takdirde, Select bileşenini kullanmalısınız.</p>
8
- <div class="grid grid-flow-col auto-cols-max gap-4">
9
- <el-radio v-model="radio" :label="0">Seçenek A</el-radio>
10
- <el-radio v-model="radio" :label="1">Seçenek B</el-radio>
11
- <el-radio v-model="radio" :label="2" disabled>Seçenek C (Devre Dışı)</el-radio>
12
- <el-radio :value="false" disabled>Seçili Olmayan ve Devre Dışı</el-radio>
13
- </div>
14
- <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
15
- <p class="text-xs">
16
- Örnek Kullanım:
17
- <code> &lt;el-radio :value="true" disabled&gt;Seçili & Devre Dışı&lt;/el-radio&gt; </code>
18
- </p>
19
- </div>
20
- </section>
21
-
22
- <section>
23
- <h2>Radio group</h2>
24
- <p class="p-lg-c my-6">
25
- `el-radio-group` ile `el-radio` bileşenini bir araya getirerek bir radyo grubu görüntüleyebilirsiniz. el-radio-group elementinin v-model ile
26
- bağlı olduğu bir değişkeni belirleyin ve el-radio içindeki etiket değerini ayarlayın. Ayrıca, mevcut değeri parametre olarak alan bir
27
- değişiklik olayı sağlar.
28
- </p>
29
- <div class="grid grid-flow-col auto-cols-max gap-4">
30
- <el-radio-group v-model="radio">
31
- <el-radio :label="3">Seçenek A</el-radio>
32
- <el-radio :label="6">Seçenek B</el-radio>
33
- <el-radio :label="9">Seçenek C</el-radio>
34
- </el-radio-group>
35
- </div>
36
- <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
37
- <p class="text-xs">
38
- Örnek Kullanım:
39
- <code>
40
- &lt;el-radio-group v-model="radio"&gt; &lt;el-radio :label="3"&gt;Seçenek A&lt;/el-radio&gt; &lt;el-radio :label="6"&gt;Seçenek
41
- B&lt;/el-radio&gt; &lt;/el-radio-group&gt;
42
- </code>
43
- </p>
44
- </div>
45
- </section>
46
-
47
- <section>
48
- <div>
49
- <el-radio-group v-model="radio1">
50
- <el-radio-button label="New York" />
51
- <el-radio-button label="Washington" />
52
- <el-radio-button label="Los Angeles" />
53
- <el-radio-button label="Chicago" />
54
- </el-radio-group>
55
- </div>
56
- <div style="margin-top: 20px">
57
- <el-radio-group v-model="radio2" size="medium">
58
- <el-radio-button label="New York" />
59
- <el-radio-button label="Washington" />
60
- <el-radio-button label="Los Angeles" />
61
- <el-radio-button label="Chicago" />
62
- </el-radio-group>
63
- </div>
64
- <div style="margin-top: 20px">
65
- <el-radio-group v-model="radio3" size="small">
66
- <el-radio-button label="New York" />
67
- <el-radio-button label="Washington" disabled />
68
- <el-radio-button label="Los Angeles" />
69
- <el-radio-button label="Chicago" />
70
- </el-radio-group>
71
- </div>
72
- <div style="margin-top: 20px">
73
- <el-radio-group v-model="radio4" disabled size="mini">
74
- <el-radio-button label="New York" />
75
- <el-radio-button label="Washington" />
76
- <el-radio-button label="Los Angeles" />
77
- <el-radio-button label="Chicago" />
78
- </el-radio-group>
79
- </div>
80
- </section>
81
- </div>
82
- </template>
83
-
84
- <script>import { defineComponent } from 'vue';
85
- const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
86
- export default defineComponent({
87
- data() {
88
- return {
89
- checked: true,
90
- radio: 2,
91
- radio1: 'New York',
92
- radio2: 'New York',
93
- radio3: 'New York',
94
- radio4: 'New York',
95
- checkboxGroup1: ['Shanghai'],
96
- cities: cityOptions,
97
- checkList: ['selected and disabled', 'Option A'],
98
- checkAll: false,
99
- checkedCities: ['Shanghai', 'Beijing'],
100
- isIndeterminate: true,
101
- time: '',
102
- sizeForm: {
103
- name: '',
104
- region: '',
105
- date1: '',
106
- date2: '',
107
- delivery: false,
108
- type: [],
109
- resource: '',
110
- desc: '',
111
- },
112
- loading: false,
113
- form: {
114
- email: '',
115
- password: '',
116
- remember: false,
117
- token: null,
118
- correlation_id: null,
119
- action: null,
120
- platform: 'manager',
121
- version: '1.0.10',
122
- },
123
- rules: {
124
- email: [
125
- {
126
- validator: 'validateEmail',
127
- trigger: 'submit',
128
- message: this.$t('messages.please_provide_valid_email'),
129
- },
130
- ],
131
- password: [
132
- {
133
- required: true,
134
- trigger: 'submit',
135
- message: this.$t('messages.please_fill', {
136
- field: this.$t('login.password'),
137
- }),
138
- },
139
- ],
140
- },
141
- };
142
- },
143
- methods: {
144
- handleCheckAllChange(val) {
145
- this.checkedCities = val ? cityOptions : [];
146
- this.isIndeterminate = false;
147
- },
148
- handleCheckedCitiesChange(value) {
149
- const checkedCount = value.length;
150
- this.checkAll = checkedCount === this.cities.length;
151
- this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
152
- },
153
- showAgreementDialog(type) {
154
- console.log('agreement: ', type);
155
- },
156
- submit() {
157
- this.$emit('submit', this.form);
158
- },
159
- onSubmit() {
160
- console.log('submit!');
161
- },
162
- },
163
- });
164
- </script>
@@ -1,237 +0,0 @@
1
- <template>
2
- <div class="pt-8 pb-16 flex gap-12 flex-col">
3
- <section>
4
- <h1>Basic usage</h1>
5
- <p class="p-lg my-6">v-model is the value of el-option that is currently selected.</p>
6
- <div class="grid grid-flow-col auto-cols-max gap-4">
7
- <el-select v-model="value" placeholder="Select">
8
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
9
- </el-select>
10
- </div>
11
- <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
12
- <p class="text-xs">
13
- <code>&lt;el-button :type="'primary'"&gt;Primary&lt;/el-button&gt;</code>
14
- </p>
15
- </div>
16
- </section>
17
-
18
- <section>
19
- <h1>Disabled option</h1>
20
- <p class="p-lg my-6">Set the value of disabled in el-option to true to disable this option.</p>
21
- <div class="grid grid-flow-col auto-cols-max gap-4">
22
- <el-select v-model="value" placeholder="Select">
23
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" />
24
- </el-select>
25
- </div>
26
- <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
27
- <p class="text-xs">
28
- Outline görünümü için, buton elementinize <code>class="outline"</code> ekleyin. Örnek:
29
- <code>&lt;el-button class="outline"&gt;Button&lt;/el-button&gt;</code>
30
- </p>
31
- </div>
32
- </section>
33
-
34
- <section>
35
- <h1>Disabled select</h1>
36
- <p class="p-lg my-6">Set disabled of el-select to make it disabled.</p>
37
- <div class="grid grid-flow-col auto-cols-max gap-4">
38
- <el-select v-model="value" disabled placeholder="Select">
39
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
40
- </el-select>
41
- </div>
42
- <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
43
- <p class="text-xs">
44
- Ghost görünümü için, buton elementinize <code>class="ghost"</code> ekleyin. Örnek:
45
- <code>&lt;el-button class="ghost"&gt;Button&lt;/el-button&gt;</code>
46
- </p>
47
- </div>
48
- </section>
49
-
50
- <section>
51
- <h1>Clearable single select</h1>
52
- <p class="p-lg my-6">Farklı boyutlardaki butonlarımız, çeşitli arayüz ihtiyaçlarına yanıt vermek için tasarlanmıştır.</p>
53
- <div class="grid grid-flow-col auto-cols-max items-center gap-4">
54
- <el-select v-model="value" clearable placeholder="Select">
55
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
56
- </el-select>
57
- </div>
58
- <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
59
- <p class="text-xs">
60
- Örnekler:
61
- <code>&lt;el-button :size="'large'"&gt;Button&lt;/el-button&gt;</code>
62
- </p>
63
- </div>
64
- </section>
65
-
66
- <section>
67
- <h1>Basic multiple select</h1>
68
- <p class="p-lg my-6">Etkileşime kapalı 'disabled' butonlarımız, kullanılamaz durumları göstermek için kullanılır.</p>
69
- <div class="grid grid-flow-col auto-cols-max gap-4 items-center">
70
- {{ JSON.stringify(value1) }}
71
- <el-select v-model="value1" multiple placeholder="Select" :disabled="false">
72
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
73
- </el-select>
74
- <el-select v-model="value1" multiple placeholder="Select" :disabled="true">
75
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
76
- </el-select>
77
- <el-select v-model="value2" multiple collapse-tags placeholder="Select" type="primary" :disabled="true">
78
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
79
- </el-select>
80
- </div>
81
- <div class="my-4 p-4 border-l-4 border-red-600 bg-red-100">
82
- <p class="text-xs">
83
- Butonu devre dışı bırakmak için, <code>disabled</code> özelliğini ekleyin. Örnek:
84
- <code>&lt;el-button disabled&gt;Button&lt;/el-button&gt;</code>
85
- </p>
86
- </div>
87
- </section>
88
-
89
- <section>
90
- <h1>Custom template</h1>
91
- <p class="p-lg my-6">
92
- İkonlarla zenginleştirilmiş butonlarımız, görsel bir ipucu sunar ve kullanıcı deneyimini artırır. Tüm ikonlarımızın listesini görmek için
93
- <nuxt-link to="/icons" class="text-blue-600 hover:underline">buraya tıklayın</nuxt-link>.
94
- </p>
95
- <div class="grid grid-flow-col auto-cols-max gap-4">
96
- <el-select v-model="value" placeholder="Select">
97
- <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
98
- <span style="float: left">{{ item.label }}</span>
99
- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
100
- </el-option>
101
- </el-select>
102
- </div>
103
- <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
104
- <p class="text-xs">
105
- Örnekler:
106
- <code>&lt;el-button type="primary" class="isax-trash"&gt;&lt;/el-button&gt;</code>. Sağda ikon için <code>class="icon-right"</code> ekleyin.
107
- </p>
108
- </div>
109
- </section>
110
-
111
- <section>
112
- <h1>Grouping</h1>
113
- <p class="p-lg my-6">Display options in groups.</p>
114
- <div class="grid grid-flow-col auto-cols-max gap-4">
115
- <el-select v-model="value" placeholder="Select">
116
- <el-option-group v-for="group in groups" :key="group.label" :label="group.label">
117
- <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
118
- </el-option-group>
119
- </el-select>
120
- </div>
121
- <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
122
- <p class="text-xs">Buton grupları için <code>&lt;el-button-group&gt;</code> kullanın.</p>
123
- </div>
124
- </section>
125
- </div>
126
- </template>
127
- <script>
128
- import { defineComponent } from 'vue';
129
-
130
- export default defineComponent({
131
- name: 'TimusButtonSample',
132
- data() {
133
- return {
134
- cities: [
135
- {
136
- value: 'Beijing',
137
- label: 'Beijing',
138
- },
139
- {
140
- value: 'Shanghai',
141
- label: 'Shanghai',
142
- },
143
- {
144
- value: 'Nanjing',
145
- label: 'Nanjing',
146
- },
147
- {
148
- value: 'Chengdu',
149
- label: 'Chengdu',
150
- },
151
- {
152
- value: 'Shenzhen',
153
- label: 'Shenzhen',
154
- },
155
- {
156
- value: 'Guangzhou',
157
- label: 'Guangzhou',
158
- },
159
- ],
160
- groups: [
161
- {
162
- label: 'Popular cities',
163
- options: [
164
- {
165
- value: 'Shanghai',
166
- label: 'Shanghai',
167
- },
168
- {
169
- value: 'Beijing',
170
- label: 'Beijing',
171
- },
172
- ],
173
- },
174
- {
175
- label: 'City name',
176
- options: [
177
- {
178
- value: 'Chengdu',
179
- label: 'Chengdu',
180
- },
181
- {
182
- value: 'Shenzhen',
183
- label: 'Shenzhen',
184
- },
185
- {
186
- value: 'Guangzhou',
187
- label: 'Guangzhou',
188
- },
189
- {
190
- value: 'Dalian',
191
- label: 'Dalian',
192
- },
193
- ],
194
- },
195
- ],
196
- options: [
197
- {
198
- value: 'Option1',
199
- label: 'Option1',
200
- },
201
- {
202
- value: 'Option2',
203
- label: 'Option2',
204
- disabled: true,
205
- },
206
- {
207
- value: 'Option3',
208
- label: 'Option3',
209
- },
210
- {
211
- value: 'Option4',
212
- label: 'Option4',
213
- },
214
- {
215
- value: 'Option5',
216
- label: 'Option5',
217
- },
218
- ],
219
- value: '',
220
- value1: ['Option2', 'Option4', 'Option5'],
221
- value2: ['Option2', 'Option4', 'Option5'],
222
- };
223
- },
224
- computed: {
225
- gridSize() {
226
- const grids = {
227
- 5: 'grid-cols-5',
228
- 6: 'grid-cols-6',
229
- 7: 'grid-cols-7',
230
- 8: 'grid-cols-8',
231
- };
232
-
233
- return grids;
234
- },
235
- },
236
- });
237
- </script>
@@ -1,2 +0,0 @@
1
- declare const _default: any;
2
- export default _default;