├── .gitignore ├── AndroidManifest.template.xml ├── LICENSE ├── README.md ├── Vue.dpk ├── Vue.dproj ├── Vue.groupproj ├── Vue.res ├── demo ├── Exemple.dpr ├── Exemple.dproj ├── Exemple.res ├── Vue.Demo.fmx └── Vue.Demo.pas ├── preview └── anim.gif └── src ├── Vue.Install.pas ├── Vue.Utils.pas ├── button ├── Vue.Button.Base.fmx ├── Vue.Button.Base.pas ├── Vue.Button.Style0.fmx ├── Vue.Button.Style0.pas ├── Vue.Button.Style1.fmx ├── Vue.Button.Style1.pas ├── Vue.Button.Style2.fmx ├── Vue.Button.Style2.pas └── Vue.Button.pas ├── checkbox ├── Vue.CheckBox.Style0.fmx ├── Vue.CheckBox.Style0.pas ├── Vue.Checkbox.Base.fmx ├── Vue.Checkbox.Base.pas └── Vue.Checkbox.pas ├── switch ├── Vue.Switch.Base.fmx ├── Vue.Switch.Base.pas ├── Vue.Switch.Style0.fmx ├── Vue.Switch.Style0.pas └── Vue.Switch.pas ├── text ├── Vue.Text.Base.fmx ├── Vue.Text.Base.pas ├── Vue.Text.Style0.fmx ├── Vue.Text.Style0.pas ├── Vue.Text.Style1.fmx ├── Vue.Text.Style1.pas ├── Vue.Text.Style2.fmx ├── Vue.Text.Style2.pas ├── Vue.Text.Style3.fmx ├── Vue.Text.Style3.pas └── Vue.Text.pas └── tooltip ├── Vue.Tooltip.Base.fmx ├── Vue.Tooltip.Base.pas ├── Vue.Tooltip.Style0.fmx ├── Vue.Tooltip.Style0.pas └── Vue.Tooltip.pas /.gitignore: -------------------------------------------------------------------------------- 1 | **/Win32/ 2 | **/Win64/ 3 | **/Linux64/ 4 | **/__history/ 5 | **/__recovery/ 6 | src/*.~* 7 | *.exe 8 | *.dll 9 | *.bpl 10 | *.bpi 11 | *.dcp 12 | *.so 13 | *.apk 14 | *.drc 15 | *.map 16 | *.dres 17 | *.rsm 18 | *.tds 19 | *.dcu 20 | *.lib 21 | *.a 22 | *.o 23 | *.ocx 24 | *.local 25 | *.identcache 26 | *.projdata 27 | *.tvsconfig 28 | *.dsk 29 | *.dcu 30 | *.exe 31 | *.so 32 | *.~* 33 | *.a 34 | *.stat 35 | -------------------------------------------------------------------------------- /AndroidManifest.template.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | <%uses-permission%> 11 | 12 | 21 | 22 | <%provider%> 23 | <%application-meta-data%> 24 | <%uses-libraries%> 25 | <%services%> 26 | 28 | 32 | 33 | 35 | 36 | 37 | 38 | 39 | 40 | <%activity%> 41 | <%receivers%> 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Eduardo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FMX-Vue-Components 2 | Componentes baseados no estilo Vuetify 3 | 4 | ![](https://github.com/e-delphi/FMX-Vue-Components/blob/main/preview/anim.gif) 5 | -------------------------------------------------------------------------------- /Vue.dpk: -------------------------------------------------------------------------------- 1 | package Vue; 2 | 3 | {$R *.res} 4 | {$IFDEF IMPLICITBUILDING This IFDEF should not be used by users} 5 | {$ALIGN 8} 6 | {$ASSERTIONS ON} 7 | {$BOOLEVAL OFF} 8 | {$DEBUGINFO OFF} 9 | {$EXTENDEDSYNTAX ON} 10 | {$IMPORTEDDATA ON} 11 | {$IOCHECKS ON} 12 | {$LOCALSYMBOLS ON} 13 | {$LONGSTRINGS ON} 14 | {$OPENSTRINGS ON} 15 | {$OPTIMIZATION OFF} 16 | {$OVERFLOWCHECKS OFF} 17 | {$RANGECHECKS OFF} 18 | {$REFERENCEINFO ON} 19 | {$SAFEDIVIDE OFF} 20 | {$STACKFRAMES ON} 21 | {$TYPEDADDRESS OFF} 22 | {$VARSTRINGCHECKS ON} 23 | {$WRITEABLECONST OFF} 24 | {$MINENUMSIZE 1} 25 | {$IMAGEBASE $400000} 26 | {$DEFINE DEBUG} 27 | {$ENDIF IMPLICITBUILDING} 28 | {$DESCRIPTION 'Vue Design Components for Firemonkey'} 29 | {$IMPLICITBUILD ON} 30 | 31 | requires 32 | rtl, 33 | fmx; 34 | 35 | contains 36 | Vue.Install in 'src\Vue.Install.pas', 37 | Vue.Utils in 'src\Vue.Utils.pas', 38 | Vue.Text in 'src\text\Vue.Text.pas', 39 | Vue.Text.Base in 'src\text\Vue.Text.Base.pas' {VueTextBase: TFrame}, 40 | Vue.Text.Style0 in 'src\text\Vue.Text.Style0.pas' {VueTextStyle0: TFrame}, 41 | Vue.Text.Style1 in 'src\text\Vue.Text.Style1.pas' {VueTextStyle1: TFrame}, 42 | Vue.Text.Style2 in 'src\text\Vue.Text.Style2.pas' {VueTextStyle2: TFrame}, 43 | Vue.Text.Style3 in 'src\text\Vue.Text.Style3.pas' {VueTextStyle3: TFrame}, 44 | Vue.Button.Base in 'src\button\Vue.Button.Base.pas' {VueButtonBase: TFrame}, 45 | Vue.Button in 'src\button\Vue.Button.pas', 46 | Vue.Button.Style0 in 'src\button\Vue.Button.Style0.pas' {VueButtonStyle0: TFrame}, 47 | Vue.Button.Style1 in 'src\button\Vue.Button.Style1.pas' {VueButtonStyle1: TFrame}, 48 | Vue.Button.Style2 in 'src\button\Vue.Button.Style2.pas' {VueButtonStyle2: TFrame}, 49 | Vue.Tooltip.Base in 'src\tooltip\Vue.Tooltip.Base.pas' {VueTooltipBase: TFrame}, 50 | Vue.Tooltip in 'src\tooltip\Vue.Tooltip.pas', 51 | Vue.Tooltip.Style0 in 'src\tooltip\Vue.Tooltip.Style0.pas' {VueTooltipStyle0: TFrame}, 52 | Vue.Checkbox.Base in 'src\checkbox\Vue.Checkbox.Base.pas' {VueCheckboxBase: TFrame}, 53 | Vue.Checkbox in 'src\checkbox\Vue.Checkbox.pas', 54 | Vue.CheckBox.Style0 in 'src\checkbox\Vue.CheckBox.Style0.pas' {VueCheckboxStyle0: TFrame}, 55 | Vue.Switch.Base in 'src\switch\Vue.Switch.Base.pas' {VueSwitchBase: TFrame}, 56 | Vue.Switch in 'src\switch\Vue.Switch.pas', 57 | Vue.Switch.Style0 in 'src\switch\Vue.Switch.Style0.pas' {VueSwitchStyle0: TFrame}; 58 | 59 | end. 60 | -------------------------------------------------------------------------------- /Vue.dproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | {E9E19735-F72D-4453-A17E-2EDD8DAC776C} 4 | Vue.dpk 5 | 19.2 6 | FMX 7 | True 8 | Debug 9 | Win32 10 | 32787 11 | Package 12 | 13 | 14 | true 15 | 16 | 17 | true 18 | Base 19 | true 20 | 21 | 22 | true 23 | Base 24 | true 25 | 26 | 27 | true 28 | Base 29 | true 30 | 31 | 32 | true 33 | Base 34 | true 35 | 36 | 37 | true 38 | Base 39 | true 40 | 41 | 42 | true 43 | Base 44 | true 45 | 46 | 47 | true 48 | Base 49 | true 50 | 51 | 52 | true 53 | Cfg_1 54 | true 55 | true 56 | 57 | 58 | true 59 | Base 60 | true 61 | 62 | 63 | true 64 | Cfg_2 65 | true 66 | true 67 | 68 | 69 | .\$(Platform)\$(Config) 70 | false 71 | false 72 | false 73 | false 74 | false 75 | true 76 | true 77 | System;Xml;Data;Datasnap;Web;Soap;$(DCC_Namespace) 78 | All 79 | Vue Design Components for Firemonkey 80 | 1046 81 | CompanyName=;FileDescription=$(MSBuildProjectName);FileVersion=1.0.0.0;InternalName=;LegalCopyright=;LegalTrademarks=;OriginalFilename=;ProgramID=com.embarcadero.$(MSBuildProjectName);ProductName=$(MSBuildProjectName);ProductVersion=1.0.0.0;Comments= 82 | Vue 83 | .\dcu 84 | 85 | 86 | None 87 | android-support-v4.dex.jar;cloud-messaging.dex.jar;com-google-android-gms.play-services-ads-base.17.2.0.dex.jar;com-google-android-gms.play-services-ads-identifier.16.0.0.dex.jar;com-google-android-gms.play-services-ads-lite.17.2.0.dex.jar;com-google-android-gms.play-services-ads.17.2.0.dex.jar;com-google-android-gms.play-services-analytics-impl.16.0.8.dex.jar;com-google-android-gms.play-services-analytics.16.0.8.dex.jar;com-google-android-gms.play-services-base.16.0.1.dex.jar;com-google-android-gms.play-services-basement.16.2.0.dex.jar;com-google-android-gms.play-services-gass.17.2.0.dex.jar;com-google-android-gms.play-services-identity.16.0.0.dex.jar;com-google-android-gms.play-services-maps.16.1.0.dex.jar;com-google-android-gms.play-services-measurement-base.16.4.0.dex.jar;com-google-android-gms.play-services-measurement-sdk-api.16.4.0.dex.jar;com-google-android-gms.play-services-stats.16.0.1.dex.jar;com-google-android-gms.play-services-tagmanager-v4-impl.16.0.8.dex.jar;com-google-android-gms.play-services-tasks.16.0.1.dex.jar;com-google-android-gms.play-services-wallet.16.0.1.dex.jar;com-google-firebase.firebase-analytics.16.4.0.dex.jar;com-google-firebase.firebase-common.16.1.0.dex.jar;com-google-firebase.firebase-iid-interop.16.0.1.dex.jar;com-google-firebase.firebase-iid.17.1.1.dex.jar;com-google-firebase.firebase-measurement-connector.17.0.1.dex.jar;com-google-firebase.firebase-messaging.17.5.0.dex.jar;fmx.dex.jar;google-play-billing.dex.jar;google-play-licensing.dex.jar 88 | rtl;fmx;$(DCC_UsePackage) 89 | package=com.embarcadero.$(MSBuildProjectName);label=$(MSBuildProjectName);versionCode=1;versionName=1.0.0;persistent=False;restoreAnyVersion=False;installLocation=auto;largeHeap=False;theme=TitleBar;hardwareAccelerated=true;apiKey= 90 | Debug 91 | $(BDS)\bin\Artwork\Android\FM_LauncherIcon_192x192.png 92 | 93 | 94 | None 95 | android-support-v4.dex.jar;cloud-messaging.dex.jar;com-google-android-gms.play-services-ads-base.17.2.0.dex.jar;com-google-android-gms.play-services-ads-identifier.16.0.0.dex.jar;com-google-android-gms.play-services-ads-lite.17.2.0.dex.jar;com-google-android-gms.play-services-ads.17.2.0.dex.jar;com-google-android-gms.play-services-analytics-impl.16.0.8.dex.jar;com-google-android-gms.play-services-analytics.16.0.8.dex.jar;com-google-android-gms.play-services-base.16.0.1.dex.jar;com-google-android-gms.play-services-basement.16.2.0.dex.jar;com-google-android-gms.play-services-gass.17.2.0.dex.jar;com-google-android-gms.play-services-identity.16.0.0.dex.jar;com-google-android-gms.play-services-maps.16.1.0.dex.jar;com-google-android-gms.play-services-measurement-base.16.4.0.dex.jar;com-google-android-gms.play-services-measurement-sdk-api.16.4.0.dex.jar;com-google-android-gms.play-services-stats.16.0.1.dex.jar;com-google-android-gms.play-services-tagmanager-v4-impl.16.0.8.dex.jar;com-google-android-gms.play-services-tasks.16.0.1.dex.jar;com-google-android-gms.play-services-wallet.16.0.1.dex.jar;com-google-firebase.firebase-analytics.16.4.0.dex.jar;com-google-firebase.firebase-common.16.1.0.dex.jar;com-google-firebase.firebase-iid-interop.16.0.1.dex.jar;com-google-firebase.firebase-iid.17.1.1.dex.jar;com-google-firebase.firebase-measurement-connector.17.0.1.dex.jar;com-google-firebase.firebase-messaging.17.5.0.dex.jar;fmx.dex.jar;google-play-billing.dex.jar;google-play-licensing.dex.jar 96 | rtl;fmx;$(DCC_UsePackage) 97 | package=com.embarcadero.$(MSBuildProjectName);label=$(MSBuildProjectName);versionCode=1;versionName=1.0.0;persistent=False;restoreAnyVersion=False;installLocation=auto;largeHeap=False;theme=TitleBar;hardwareAccelerated=true;apiKey= 98 | Debug 99 | $(BDS)\bin\Artwork\Android\FM_LauncherIcon_192x192.png 100 | 101 | 102 | $(BDS)\bin\Artwork\iOS\iPhone\FM_ApplicationIcon_1024x1024.png 103 | CFBundleName=$(MSBuildProjectName);CFBundleDevelopmentRegion=en;CFBundleDisplayName=$(MSBuildProjectName);CFBundleIdentifier=$(MSBuildProjectName);CFBundleInfoDictionaryVersion=7.1;CFBundleVersion=1.0.0;CFBundleShortVersionString=1.0.0;CFBundlePackageType=APPL;CFBundleSignature=????;LSRequiresIPhoneOS=true;CFBundleAllowMixedLocalizations=YES;CFBundleExecutable=$(MSBuildProjectName);UIDeviceFamily=iPhone & iPad;NSLocationAlwaysUsageDescription=The reason for accessing the location information of the user;NSLocationWhenInUseUsageDescription=The reason for accessing the location information of the user;NSLocationAlwaysAndWhenInUseUsageDescription=The reason for accessing the location information of the user;UIBackgroundModes=;NSContactsUsageDescription=The reason for accessing the contacts;NSPhotoLibraryUsageDescription=The reason for accessing the photo library;NSPhotoLibraryAddUsageDescription=The reason for adding to the photo library;NSCameraUsageDescription=The reason for accessing the camera;NSFaceIDUsageDescription=The reason for accessing the face id;NSMicrophoneUsageDescription=The reason for accessing the microphone;NSSiriUsageDescription=The reason for accessing Siri;ITSAppUsesNonExemptEncryption=false;NSBluetoothAlwaysUsageDescription=The reason for accessing bluetooth;NSBluetoothPeripheralUsageDescription=The reason for accessing bluetooth peripherals;NSCalendarsUsageDescription=The reason for accessing the calendar data;NSRemindersUsageDescription=The reason for accessing the reminders;NSMotionUsageDescription=The reason for accessing the accelerometer;NSSpeechRecognitionUsageDescription=The reason for requesting to send user data to Apple's speech recognition servers 104 | iPhoneAndiPad 105 | true 106 | Debug 107 | $(MSBuildProjectName) 108 | 109 | 110 | CFBundleName=$(MSBuildProjectName);CFBundleDevelopmentRegion=en;CFBundleDisplayName=$(MSBuildProjectName);CFBundleIdentifier=$(MSBuildProjectName);CFBundleInfoDictionaryVersion=7.1;CFBundleVersion=1.0.0;CFBundleShortVersionString=1.0.0;CFBundlePackageType=APPL;CFBundleSignature=????;LSRequiresIPhoneOS=true;CFBundleAllowMixedLocalizations=YES;CFBundleExecutable=$(MSBuildProjectName);UIDeviceFamily=iPhone & iPad;NSLocationAlwaysUsageDescription=The reason for accessing the location information of the user;NSLocationWhenInUseUsageDescription=The reason for accessing the location information of the user;NSLocationAlwaysAndWhenInUseUsageDescription=The reason for accessing the location information of the user;UIBackgroundModes=;NSContactsUsageDescription=The reason for accessing the contacts;NSPhotoLibraryUsageDescription=The reason for accessing the photo library;NSPhotoLibraryAddUsageDescription=The reason for adding to the photo library;NSCameraUsageDescription=The reason for accessing the camera;NSFaceIDUsageDescription=The reason for accessing the face id;NSMicrophoneUsageDescription=The reason for accessing the microphone;NSSiriUsageDescription=The reason for accessing Siri;ITSAppUsesNonExemptEncryption=false;NSBluetoothAlwaysUsageDescription=The reason for accessing bluetooth;NSBluetoothPeripheralUsageDescription=The reason for accessing bluetooth peripherals;NSCalendarsUsageDescription=The reason for accessing the calendar data;NSRemindersUsageDescription=The reason for accessing the reminders;NSMotionUsageDescription=The reason for accessing the accelerometer;NSSpeechRecognitionUsageDescription=The reason for requesting to send user data to Apple's speech recognition servers 111 | iPhoneAndiPad 112 | true 113 | 114 | 115 | Winapi;System.Win;Data.Win;Datasnap.Win;Web.Win;Soap.Win;Xml.Win;Bde;$(DCC_Namespace) 116 | Debug 117 | true 118 | 1033 119 | rtl;fmx;$(DCC_UsePackage) 120 | 121 | 122 | rtl;fmx;$(DCC_UsePackage) 123 | Winapi;System.Win;Data.Win;Datasnap.Win;Web.Win;Soap.Win;Xml.Win;$(DCC_Namespace) 124 | Debug 125 | true 126 | 1033 127 | 128 | 129 | DEBUG;$(DCC_Define) 130 | true 131 | false 132 | true 133 | true 134 | true 135 | 136 | 137 | false 138 | true 139 | 1033 140 | 141 | 142 | false 143 | RELEASE;$(DCC_Define) 144 | 0 145 | 0 146 | 147 | 148 | true 149 | 1033 150 | 151 | 152 | 153 | MainSource 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | fmx 163 | TFrame 164 | 165 | 166 | 167 | TFrame 168 | 169 | 170 | 171 | fmx 172 | TFrame 173 | 174 | 175 | 176 | fmx 177 | TFrame 178 | 179 | 180 | 181 | fmx 182 | TFrame 183 | 184 | 185 | 186 | fmx 187 | TFrame 188 | 189 | 190 | 191 | 192 | fmx 193 | TFrame 194 | 195 | 196 | 197 | fmx 198 | TFrame 199 | 200 | 201 | 202 | fmx 203 | TFrame 204 | 205 | 206 | 207 | fmx 208 | TFrame 209 | 210 | 211 | 212 | 213 | fmx 214 | TFrame 215 | 216 | 217 | 218 | fmx 219 | TFrame 220 | 221 | 222 | 223 | 224 | fmx 225 | TFrame 226 | 227 | 228 | 229 | fmx 230 | TFrame 231 | 232 | 233 | 234 | 235 | fmx 236 | TFrame 237 | 238 | 239 | Cfg_2 240 | Base 241 | 242 | 243 | Base 244 | 245 | 246 | Cfg_1 247 | Base 248 | 249 | 250 | 251 | Delphi.Personality.12 252 | Package 253 | 254 | 255 | 256 | Vue.dpk 257 | 258 | 259 | Microsoft Office 2000 Sample Automation Server Wrapper Components 260 | Microsoft Office XP Sample Automation Server Wrapper Components 261 | File C:\Users\Eduar\Desktop\TMSWEBCore.1.1.3.0.for.RAD.Studio.10.3.taiwebs.com\Win32\TMSWEBCorePkgDXE12.bpl not found 262 | File C:\Users\Eduar\Desktop\TMSWEBCore.1.1.3.0.for.RAD.Studio.10.3.taiwebs.com\Win32\TMSWEBCorePkgLibDXE12.bpl not found 263 | 264 | 265 | 266 | 267 | 268 | true 269 | 270 | 271 | 272 | 273 | true 274 | 275 | 276 | 277 | 278 | true 279 | 280 | 281 | 282 | 283 | Vue.bpl 284 | true 285 | 286 | 287 | 288 | 289 | 1 290 | 291 | 292 | 0 293 | 294 | 295 | 296 | 297 | classes 298 | 1 299 | 300 | 301 | classes 302 | 1 303 | 304 | 305 | 306 | 307 | res\xml 308 | 1 309 | 310 | 311 | res\xml 312 | 1 313 | 314 | 315 | 316 | 317 | library\lib\armeabi-v7a 318 | 1 319 | 320 | 321 | 322 | 323 | library\lib\armeabi 324 | 1 325 | 326 | 327 | library\lib\armeabi 328 | 1 329 | 330 | 331 | 332 | 333 | library\lib\armeabi-v7a 334 | 1 335 | 336 | 337 | 338 | 339 | library\lib\mips 340 | 1 341 | 342 | 343 | library\lib\mips 344 | 1 345 | 346 | 347 | 348 | 349 | library\lib\armeabi-v7a 350 | 1 351 | 352 | 353 | library\lib\arm64-v8a 354 | 1 355 | 356 | 357 | 358 | 359 | library\lib\armeabi-v7a 360 | 1 361 | 362 | 363 | 364 | 365 | res\drawable 366 | 1 367 | 368 | 369 | res\drawable 370 | 1 371 | 372 | 373 | 374 | 375 | res\values 376 | 1 377 | 378 | 379 | res\values 380 | 1 381 | 382 | 383 | 384 | 385 | res\values-v21 386 | 1 387 | 388 | 389 | res\values-v21 390 | 1 391 | 392 | 393 | 394 | 395 | res\values 396 | 1 397 | 398 | 399 | res\values 400 | 1 401 | 402 | 403 | 404 | 405 | res\drawable 406 | 1 407 | 408 | 409 | res\drawable 410 | 1 411 | 412 | 413 | 414 | 415 | res\drawable-xxhdpi 416 | 1 417 | 418 | 419 | res\drawable-xxhdpi 420 | 1 421 | 422 | 423 | 424 | 425 | res\drawable-xxxhdpi 426 | 1 427 | 428 | 429 | res\drawable-xxxhdpi 430 | 1 431 | 432 | 433 | 434 | 435 | res\drawable-ldpi 436 | 1 437 | 438 | 439 | res\drawable-ldpi 440 | 1 441 | 442 | 443 | 444 | 445 | res\drawable-mdpi 446 | 1 447 | 448 | 449 | res\drawable-mdpi 450 | 1 451 | 452 | 453 | 454 | 455 | res\drawable-hdpi 456 | 1 457 | 458 | 459 | res\drawable-hdpi 460 | 1 461 | 462 | 463 | 464 | 465 | res\drawable-xhdpi 466 | 1 467 | 468 | 469 | res\drawable-xhdpi 470 | 1 471 | 472 | 473 | 474 | 475 | res\drawable-mdpi 476 | 1 477 | 478 | 479 | res\drawable-mdpi 480 | 1 481 | 482 | 483 | 484 | 485 | res\drawable-hdpi 486 | 1 487 | 488 | 489 | res\drawable-hdpi 490 | 1 491 | 492 | 493 | 494 | 495 | res\drawable-xhdpi 496 | 1 497 | 498 | 499 | res\drawable-xhdpi 500 | 1 501 | 502 | 503 | 504 | 505 | res\drawable-xxhdpi 506 | 1 507 | 508 | 509 | res\drawable-xxhdpi 510 | 1 511 | 512 | 513 | 514 | 515 | res\drawable-xxxhdpi 516 | 1 517 | 518 | 519 | res\drawable-xxxhdpi 520 | 1 521 | 522 | 523 | 524 | 525 | res\drawable-small 526 | 1 527 | 528 | 529 | res\drawable-small 530 | 1 531 | 532 | 533 | 534 | 535 | res\drawable-normal 536 | 1 537 | 538 | 539 | res\drawable-normal 540 | 1 541 | 542 | 543 | 544 | 545 | res\drawable-large 546 | 1 547 | 548 | 549 | res\drawable-large 550 | 1 551 | 552 | 553 | 554 | 555 | res\drawable-xlarge 556 | 1 557 | 558 | 559 | res\drawable-xlarge 560 | 1 561 | 562 | 563 | 564 | 565 | res\values 566 | 1 567 | 568 | 569 | res\values 570 | 1 571 | 572 | 573 | 574 | 575 | 1 576 | 577 | 578 | 1 579 | 580 | 581 | 0 582 | 583 | 584 | 585 | 586 | 1 587 | .framework 588 | 589 | 590 | 1 591 | .framework 592 | 593 | 594 | 0 595 | 596 | 597 | 598 | 599 | 1 600 | .dylib 601 | 602 | 603 | 1 604 | .dylib 605 | 606 | 607 | 0 608 | .dll;.bpl 609 | 610 | 611 | 612 | 613 | 1 614 | .dylib 615 | 616 | 617 | 1 618 | .dylib 619 | 620 | 621 | 1 622 | .dylib 623 | 624 | 625 | 1 626 | .dylib 627 | 628 | 629 | 1 630 | .dylib 631 | 632 | 633 | 0 634 | .bpl 635 | 636 | 637 | 638 | 639 | 0 640 | 641 | 642 | 0 643 | 644 | 645 | 0 646 | 647 | 648 | 0 649 | 650 | 651 | 0 652 | 653 | 654 | 0 655 | 656 | 657 | 0 658 | 659 | 660 | 0 661 | 662 | 663 | 664 | 665 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 666 | 1 667 | 668 | 669 | 670 | 671 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 672 | 1 673 | 674 | 675 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 676 | 1 677 | 678 | 679 | 680 | 681 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 682 | 1 683 | 684 | 685 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 686 | 1 687 | 688 | 689 | 690 | 691 | 1 692 | 693 | 694 | 1 695 | 696 | 697 | 1 698 | 699 | 700 | 701 | 702 | 1 703 | 704 | 705 | 1 706 | 707 | 708 | 1 709 | 710 | 711 | 712 | 713 | 1 714 | 715 | 716 | 1 717 | 718 | 719 | 1 720 | 721 | 722 | 723 | 724 | 1 725 | 726 | 727 | 1 728 | 729 | 730 | 1 731 | 732 | 733 | 734 | 735 | 1 736 | 737 | 738 | 1 739 | 740 | 741 | 1 742 | 743 | 744 | 745 | 746 | 1 747 | 748 | 749 | 1 750 | 751 | 752 | 1 753 | 754 | 755 | 756 | 757 | 1 758 | 759 | 760 | 1 761 | 762 | 763 | 1 764 | 765 | 766 | 767 | 768 | 1 769 | 770 | 771 | 1 772 | 773 | 774 | 1 775 | 776 | 777 | 778 | 779 | 1 780 | 781 | 782 | 1 783 | 784 | 785 | 1 786 | 787 | 788 | 789 | 790 | ..\$(PROJECTNAME).launchscreen\Assets\LaunchScreenImage.imageset 791 | 1 792 | 793 | 794 | ..\$(PROJECTNAME).launchscreen\Assets\LaunchScreenImage.imageset 795 | 1 796 | 797 | 798 | 799 | 800 | 1 801 | 802 | 803 | 1 804 | 805 | 806 | 1 807 | 808 | 809 | 810 | 811 | ..\$(PROJECTNAME).launchscreen\Assets\LaunchScreenImage.imageset 812 | 1 813 | 814 | 815 | ..\$(PROJECTNAME).launchscreen\Assets\LaunchScreenImage.imageset 816 | 1 817 | 818 | 819 | 820 | 821 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 822 | 1 823 | 824 | 825 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 826 | 1 827 | 828 | 829 | 830 | 831 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 832 | 1 833 | 834 | 835 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 836 | 1 837 | 838 | 839 | 840 | 841 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 842 | 1 843 | 844 | 845 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 846 | 1 847 | 848 | 849 | 850 | 851 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 852 | 1 853 | 854 | 855 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 856 | 1 857 | 858 | 859 | 860 | 861 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 862 | 1 863 | 864 | 865 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 866 | 1 867 | 868 | 869 | 870 | 871 | 1 872 | 873 | 874 | 1 875 | 876 | 877 | 1 878 | 879 | 880 | 881 | 882 | 1 883 | 884 | 885 | 1 886 | 887 | 888 | 1 889 | 890 | 891 | 892 | 893 | 1 894 | 895 | 896 | 1 897 | 898 | 899 | 1 900 | 901 | 902 | 903 | 904 | 1 905 | 906 | 907 | 1 908 | 909 | 910 | 1 911 | 912 | 913 | 914 | 915 | 1 916 | 917 | 918 | 1 919 | 920 | 921 | 1 922 | 923 | 924 | 925 | 926 | 1 927 | 928 | 929 | 1 930 | 931 | 932 | 1 933 | 934 | 935 | 936 | 937 | 1 938 | 939 | 940 | 1 941 | 942 | 943 | 1 944 | 945 | 946 | 947 | 948 | 1 949 | 950 | 951 | 1 952 | 953 | 954 | 1 955 | 956 | 957 | 958 | 959 | 1 960 | 961 | 962 | 1 963 | 964 | 965 | 1 966 | 967 | 968 | 969 | 970 | ..\$(PROJECTNAME).launchscreen\Assets\LaunchScreenImage.imageset 971 | 1 972 | 973 | 974 | ..\$(PROJECTNAME).launchscreen\Assets\LaunchScreenImage.imageset 975 | 1 976 | 977 | 978 | 979 | 980 | 1 981 | 982 | 983 | 1 984 | 985 | 986 | 1 987 | 988 | 989 | 990 | 991 | ..\$(PROJECTNAME).launchscreen\Assets\LaunchScreenImage.imageset 992 | 1 993 | 994 | 995 | ..\$(PROJECTNAME).launchscreen\Assets\LaunchScreenImage.imageset 996 | 1 997 | 998 | 999 | 1000 | 1001 | 1 1002 | 1003 | 1004 | 1 1005 | 1006 | 1007 | 1 1008 | 1009 | 1010 | 1011 | 1012 | 1 1013 | 1014 | 1015 | 1 1016 | 1017 | 1018 | 1 1019 | 1020 | 1021 | 1022 | 1023 | 1 1024 | 1025 | 1026 | 1 1027 | 1028 | 1029 | 1 1030 | 1031 | 1032 | 1033 | 1034 | 1 1035 | 1036 | 1037 | 1 1038 | 1039 | 1040 | 1 1041 | 1042 | 1043 | 1044 | 1045 | ..\$(PROJECTNAME).launchscreen\Assets\LaunchScreenImage.imageset 1046 | 1 1047 | 1048 | 1049 | ..\$(PROJECTNAME).launchscreen\Assets\LaunchScreenImage.imageset 1050 | 1 1051 | 1052 | 1053 | 1054 | 1055 | ..\$(PROJECTNAME).launchscreen\Assets\LaunchScreenImage.imageset 1056 | 1 1057 | 1058 | 1059 | ..\$(PROJECTNAME).launchscreen\Assets\LaunchScreenImage.imageset 1060 | 1 1061 | 1062 | 1063 | 1064 | 1065 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 1066 | 1 1067 | 1068 | 1069 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 1070 | 1 1071 | 1072 | 1073 | 1074 | 1075 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 1076 | 1 1077 | 1078 | 1079 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 1080 | 1 1081 | 1082 | 1083 | 1084 | 1085 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 1086 | 1 1087 | 1088 | 1089 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 1090 | 1 1091 | 1092 | 1093 | 1094 | 1095 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 1096 | 1 1097 | 1098 | 1099 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 1100 | 1 1101 | 1102 | 1103 | 1104 | 1105 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 1106 | 1 1107 | 1108 | 1109 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 1110 | 1 1111 | 1112 | 1113 | 1114 | 1115 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 1116 | 1 1117 | 1118 | 1119 | ..\$(PROJECTNAME).launchscreen\Assets\AppIcon.appiconset 1120 | 1 1121 | 1122 | 1123 | 1124 | 1125 | 1 1126 | 1127 | 1128 | 1 1129 | 1130 | 1131 | 1132 | 1133 | ..\$(PROJECTNAME).app.dSYM\Contents\Resources\DWARF 1134 | 1 1135 | 1136 | 1137 | ..\$(PROJECTNAME).app.dSYM\Contents\Resources\DWARF 1138 | 1 1139 | 1140 | 1141 | 1142 | 1143 | 1144 | 1145 | 1146 | 1147 | 1 1148 | 1149 | 1150 | 1 1151 | 1152 | 1153 | 1 1154 | 1155 | 1156 | 1157 | 1158 | 1159 | 1160 | 1161 | Contents\Resources 1162 | 1 1163 | 1164 | 1165 | Contents\Resources 1166 | 1 1167 | 1168 | 1169 | 1170 | 1171 | library\lib\armeabi-v7a 1172 | 1 1173 | 1174 | 1175 | library\lib\arm64-v8a 1176 | 1 1177 | 1178 | 1179 | 1 1180 | 1181 | 1182 | 1 1183 | 1184 | 1185 | 1 1186 | 1187 | 1188 | 1 1189 | 1190 | 1191 | 1 1192 | 1193 | 1194 | 1 1195 | 1196 | 1197 | 0 1198 | 1199 | 1200 | 1201 | 1202 | library\lib\armeabi-v7a 1203 | 1 1204 | 1205 | 1206 | 1207 | 1208 | 1 1209 | 1210 | 1211 | 1 1212 | 1213 | 1214 | 1215 | 1216 | Assets 1217 | 1 1218 | 1219 | 1220 | Assets 1221 | 1 1222 | 1223 | 1224 | 1225 | 1226 | Assets 1227 | 1 1228 | 1229 | 1230 | Assets 1231 | 1 1232 | 1233 | 1234 | 1235 | 1236 | 1237 | 1238 | 1239 | 1240 | 1241 | 1242 | 1243 | 1244 | 1245 | 1246 | True 1247 | True 1248 | False 1249 | False 1250 | True 1251 | True 1252 | 1253 | 1254 | 12 1255 | 1256 | 1257 | 1258 | 1259 | 1260 | -------------------------------------------------------------------------------- /Vue.groupproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | {2151A67D-3690-4CC9-A035-E88F7F6CEA6B} 4 | 5 | 6 | 7 | 8 | 9 | 10 | Vue.dproj 11 | 12 | 13 | 14 | Default.Personality.12 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Vue.res: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/e-delphi/FMX-Vue-Components/de43dbb9f9baa5b28d735c935f5ab0186f81a17a/Vue.res -------------------------------------------------------------------------------- /demo/Exemple.dpr: -------------------------------------------------------------------------------- 1 | program Exemple; 2 | 3 | uses 4 | System.StartUpCopy, 5 | FMX.Forms, 6 | Vue.Demo in 'Vue.Demo.pas' {Demo}; 7 | 8 | {$R *.res} 9 | 10 | begin 11 | Application.Initialize; 12 | Application.CreateForm(TDemo, Demo); 13 | Application.Run; 14 | end. 15 | -------------------------------------------------------------------------------- /demo/Exemple.res: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/e-delphi/FMX-Vue-Components/de43dbb9f9baa5b28d735c935f5ab0186f81a17a/demo/Exemple.res -------------------------------------------------------------------------------- /demo/Vue.Demo.fmx: -------------------------------------------------------------------------------- 1 | object Demo: TDemo 2 | Left = 0 3 | Top = 0 4 | Caption = 'Form1' 5 | ClientHeight = 457 6 | ClientWidth = 640 7 | FormFactor.Width = 320 8 | FormFactor.Height = 480 9 | FormFactor.Devices = [Desktop] 10 | DesignerMasterStyle = 0 11 | object VueText1: TVueText 12 | Position.X = 32.000000000000000000 13 | Position.Y = 64.000000000000000000 14 | Size.Width = 350.000000000000000000 15 | Size.Height = 50.000000000000000000 16 | Size.PlatformDefault = False 17 | Caption = 'Texto' 18 | FocusColor = xFF226ABF 19 | Style = 0 20 | end 21 | object VueText4: TVueText 22 | Position.X = 32.000000000000000000 23 | Position.Y = 320.000000000000000000 24 | Size.Width = 350.000000000000000000 25 | Size.Height = 50.000000000000000000 26 | Size.PlatformDefault = False 27 | Caption = 'Texto' 28 | FocusColor = xFF226ABF 29 | Style = 3 30 | end 31 | object VueText3: TVueText 32 | Position.X = 32.000000000000000000 33 | Position.Y = 232.000000000000000000 34 | Size.Width = 350.000000000000000000 35 | Size.Height = 50.000000000000000000 36 | Size.PlatformDefault = False 37 | Caption = 'Texto' 38 | FocusColor = xFF226ABF 39 | Style = 2 40 | end 41 | object VueText2: TVueText 42 | Position.X = 32.000000000000000000 43 | Position.Y = 144.000000000000000000 44 | Size.Width = 350.000000000000000000 45 | Size.Height = 50.000000000000000000 46 | Size.PlatformDefault = False 47 | Caption = 'Texto' 48 | FocusColor = xFF226ABF 49 | Style = 1 50 | end 51 | object VueButton1: TVueButton 52 | Position.X = 408.000000000000000000 53 | Position.Y = 72.000000000000000000 54 | Size.Width = 89.000000000000000000 55 | Size.Height = 42.000000000000000000 56 | Size.PlatformDefault = False 57 | Caption = 'Bot'#227'o' 58 | Style = 2 59 | FocusColor = xFF226ABF 60 | OnClick = VueButton1Click 61 | end 62 | object VueButton2: TVueButton 63 | Position.X = 512.000000000000000000 64 | Position.Y = 71.000000000000000000 65 | Size.Width = 89.000000000000000000 66 | Size.Height = 42.000000000000000000 67 | Size.PlatformDefault = False 68 | Caption = 'Bot'#227'o' 69 | Style = 0 70 | FocusColor = xFF226ABF 71 | OnClick = VueButton2Click 72 | end 73 | object VueTooltip1: TVueTooltip 74 | Position.X = 412.000000000000000000 75 | Position.Y = 121.000000000000000000 76 | Size.Width = 80.000000000000000000 77 | Size.Height = 30.000000000000000000 78 | Size.PlatformDefault = False 79 | Caption = 'Ajuda' 80 | Style = 0 81 | end 82 | object VueCheckbox1: TVueCheckbox 83 | Position.X = 408.000000000000000000 84 | Position.Y = 240.000000000000000000 85 | Size.Width = 200.000000000000000000 86 | Size.Height = 40.000000000000000000 87 | Size.PlatformDefault = False 88 | Checked = False 89 | Caption = 'Caixa de Sele'#231#227'o' 90 | FocusColor = xFF226ABF 91 | Style = 0 92 | end 93 | object VueSwitch1: TVueSwitch 94 | Position.X = 416.000000000000000000 95 | Position.Y = 328.000000000000000000 96 | Size.Width = 200.000000000000000000 97 | Size.Height = 40.000000000000000000 98 | Size.PlatformDefault = False 99 | Value = False 100 | Caption = 'Interruptor' 101 | FocusColor = xFF226ABF 102 | Style = 0 103 | end 104 | end 105 | -------------------------------------------------------------------------------- /demo/Vue.Demo.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 25/02/2021 2 | unit Vue.Demo; 3 | 4 | interface 5 | 6 | uses 7 | System.SysUtils, 8 | System.Types, 9 | System.UITypes, 10 | System.Classes, 11 | System.Variants, 12 | FMX.Types, 13 | FMX.Controls, 14 | FMX.Forms, 15 | FMX.Graphics, 16 | Vue.Text, 17 | Vue.Button, 18 | Vue.Tooltip, 19 | Vue.Checkbox, 20 | Vue.Switch; 21 | 22 | type 23 | TDemo = class(TForm) 24 | VueText1: TVueText; 25 | VueText2: TVueText; 26 | VueText3: TVueText; 27 | VueText4: TVueText; 28 | VueButton1: TVueButton; 29 | VueButton2: TVueButton; 30 | VueTooltip1: TVueTooltip; 31 | VueCheckbox1: TVueCheckbox; 32 | VueSwitch1: TVueSwitch; 33 | procedure VueButton1Click(Sender: TObject); 34 | procedure VueButton2Click(Sender: TObject); 35 | private 36 | { Private declarations } 37 | public 38 | { Public declarations } 39 | end; 40 | 41 | var 42 | Demo: TDemo; 43 | 44 | implementation 45 | 46 | {$R *.fmx} 47 | 48 | procedure TDemo.VueButton1Click(Sender: TObject); 49 | begin 50 | VueTooltip1.Show; 51 | end; 52 | 53 | procedure TDemo.VueButton2Click(Sender: TObject); 54 | begin 55 | VueTooltip1.Hide; 56 | end; 57 | 58 | end. 59 | -------------------------------------------------------------------------------- /preview/anim.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/e-delphi/FMX-Vue-Components/de43dbb9f9baa5b28d735c935f5ab0186f81a17a/preview/anim.gif -------------------------------------------------------------------------------- /src/Vue.Install.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 25/02/2021 2 | unit Vue.Install; 3 | 4 | interface 5 | 6 | uses 7 | System.Classes; 8 | 9 | procedure Register; 10 | 11 | implementation 12 | 13 | uses 14 | Vue.Text, 15 | Vue.Button, 16 | Vue.Tooltip, 17 | Vue.Checkbox, 18 | Vue.Switch; 19 | 20 | procedure Register; 21 | begin 22 | RegisterComponents('Vue', [TVueText, TVueButton, TVueTooltip, TVueCheckbox, TVueSwitch]); 23 | end; 24 | 25 | end. 26 | -------------------------------------------------------------------------------- /src/Vue.Utils.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 25/02/2021 2 | unit Vue.Utils; 3 | 4 | interface 5 | 6 | uses 7 | System.UITypes; 8 | 9 | function RGB(R, G, B: Byte; A: Byte = 255): TAlphaColor; 10 | 11 | implementation 12 | 13 | function RGB(R, G, B: Byte; A: Byte = 255): TAlphaColor; 14 | begin 15 | TAlphaColorRec(Result).R := R; 16 | TAlphaColorRec(Result).G := G; 17 | TAlphaColorRec(Result).B := B; 18 | TAlphaColorRec(Result).A := A; 19 | end; 20 | 21 | end. 22 | -------------------------------------------------------------------------------- /src/button/Vue.Button.Base.fmx: -------------------------------------------------------------------------------- 1 | object VueButtonBase: TVueButtonBase 2 | Size.Width = 100.000000000000000000 3 | Size.Height = 50.000000000000000000 4 | Size.PlatformDefault = False 5 | end 6 | -------------------------------------------------------------------------------- /src/button/Vue.Button.Base.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 25/02/2021 2 | unit Vue.Button.Base; 3 | 4 | interface 5 | 6 | uses 7 | System.Classes, 8 | System.UITypes, 9 | FMX.Forms; 10 | 11 | type 12 | TVueButtonBase = class(TFrame) 13 | private 14 | class var VueButtonStyles: TArray; 15 | protected 16 | function GetCaption: String; virtual; 17 | procedure SetCaption(const Value: String); virtual; 18 | function GetFocusColor: TAlphaColor; virtual; 19 | procedure SetFocusColor(const Value: TAlphaColor); virtual; 20 | function GetOnClick: TNotifyEvent; virtual; 21 | procedure SetOnClick(const Value: TNotifyEvent); virtual; 22 | public 23 | class procedure RegisterVueButtonStyle(FrameClass: TPersistentClass); 24 | class function VueButtonStyle(Index: Integer): TPersistentClass; 25 | published 26 | property Caption: String read GetCaption write SetCaption; 27 | property FocusColor: TAlphaColor read GetFocusColor write SetFocusColor; 28 | property OnClick: TNotifyEvent read GetOnClick write SetOnClick; 29 | end; 30 | 31 | implementation 32 | 33 | {$R *.fmx} 34 | 35 | { TVueButtonBase } 36 | 37 | class procedure TVueButtonBase.RegisterVueButtonStyle(FrameClass: TPersistentClass); 38 | begin 39 | SetLength(TVueButtonBase.VueButtonStyles, Succ(Length(TVueButtonBase.VueButtonStyles))); 40 | TVueButtonBase.VueButtonStyles[Pred(Length(TVueButtonBase.VueButtonStyles))] := FrameClass; 41 | end; 42 | 43 | class function TVueButtonBase.VueButtonStyle(Index: Integer): TPersistentClass; 44 | begin 45 | if (Index > Pred(Length(TVueButtonBase.VueButtonStyles))) or (Index < 0) then 46 | Index := 0; 47 | Result := TVueButtonBase.VueButtonStyles[Index]; 48 | end; 49 | 50 | function TVueButtonBase.GetCaption: String; 51 | begin 52 | end; 53 | 54 | procedure TVueButtonBase.SetCaption(const Value: String); 55 | begin 56 | end; 57 | 58 | function TVueButtonBase.GetFocusColor: TAlphaColor; 59 | begin 60 | Result := 0; 61 | end; 62 | 63 | procedure TVueButtonBase.SetFocusColor(const Value: TAlphaColor); 64 | begin 65 | end; 66 | 67 | function TVueButtonBase.GetOnClick: TNotifyEvent; 68 | begin 69 | end; 70 | 71 | procedure TVueButtonBase.SetOnClick(const Value: TNotifyEvent); 72 | begin 73 | end; 74 | 75 | end. 76 | -------------------------------------------------------------------------------- /src/button/Vue.Button.Style0.fmx: -------------------------------------------------------------------------------- 1 | inherited VueButtonStyle0: TVueButtonStyle0 2 | Align = Client 3 | Size.Height = 42.000000000000000000 4 | object lytClient: TLayout 5 | Align = Client 6 | Size.Width = 100.000000000000000000 7 | Size.Height = 42.000000000000000000 8 | Size.PlatformDefault = False 9 | TabOrder = 2 10 | object rtgClient: TRectangle 11 | Align = Client 12 | ClipChildren = True 13 | Fill.Color = claNull 14 | Size.Width = 100.000000000000000000 15 | Size.Height = 42.000000000000000000 16 | Size.PlatformDefault = False 17 | Stroke.Color = xFFDFDFDF 18 | Stroke.Thickness = 0.500000000000000000 19 | XRadius = 3.000000000000000000 20 | YRadius = 3.000000000000000000 21 | OnMouseEnter = rtgClientClientMouseEnter 22 | OnMouseLeave = rtgClientClientMouseLeave 23 | object rtgClientClient: TRectangle 24 | Align = Client 25 | Fill.Color = claWhite 26 | Size.Width = 100.000000000000000000 27 | Size.Height = 42.000000000000000000 28 | Size.PlatformDefault = False 29 | Stroke.Color = claNull 30 | Stroke.Thickness = 0.500000000000000000 31 | XRadius = 3.000000000000000000 32 | YRadius = 3.000000000000000000 33 | OnMouseDown = rtgClientClientMouseDown 34 | OnMouseEnter = rtgClientClientMouseEnter 35 | OnMouseLeave = rtgClientClientMouseLeave 36 | end 37 | object rtgShadow: TShadowEffect 38 | Distance = 1.500000000000000000 39 | Direction = 90.000000000000000000 40 | Softness = 0.100000001490116100 41 | Opacity = 0.500000000000000000 42 | ShadowColor = claBlack 43 | end 44 | object crlEffect: TCircle 45 | Fill.Color = xFFC8C8C8 46 | Position.X = 50.000000000000000000 47 | Position.Y = 20.000000000000000000 48 | Size.Width = 1.000000000000000000 49 | Size.Height = 1.000000000000000000 50 | Size.PlatformDefault = False 51 | Stroke.Kind = None 52 | OnMouseDown = rtgClientClientMouseDown 53 | object crlOpacityAni: TFloatAnimation 54 | AnimationType = InOut 55 | Duration = 0.300000011920929000 56 | Interpolation = Cubic 57 | PropertyName = 'Opacity' 58 | StartValue = 0.000000000000000000 59 | StopValue = 1.000000000000000000 60 | end 61 | object crlEffectAni: TFloatAnimation 62 | Duration = 0.300000011920929000 63 | Interpolation = Cubic 64 | OnProcess = crlEffectAniProcess 65 | PropertyName = 'Size.Height' 66 | StartValue = 0.000000000000000000 67 | StopValue = 0.000000000000000000 68 | end 69 | object crlOpacityRAni: TFloatAnimation 70 | AnimationType = InOut 71 | Delay = 0.300000011920929000 72 | Duration = 0.200000002980232200 73 | Interpolation = Cubic 74 | OnFinish = crlOpacityRAniFinish 75 | PropertyName = 'Opacity' 76 | StartValue = 1.000000000000000000 77 | StopValue = 0.000000000000000000 78 | end 79 | end 80 | end 81 | object lbCaption: TLabel 82 | Align = Client 83 | StyledSettings = [Style] 84 | Scale.X = 1.299999952316284000 85 | Scale.Y = 1.299999952316284000 86 | Size.Width = 76.923080444335940000 87 | Size.Height = 32.307693481445310000 88 | Size.PlatformDefault = False 89 | TextSettings.Font.Family = 'Roboto' 90 | TextSettings.FontColor = xFF7F7F7F 91 | TextSettings.HorzAlign = Center 92 | TextSettings.WordWrap = False 93 | Text = 'Button' 94 | TabOrder = 0 95 | end 96 | end 97 | end 98 | -------------------------------------------------------------------------------- /src/button/Vue.Button.Style0.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 25/02/2021 2 | unit Vue.Button.Style0; 3 | 4 | interface 5 | 6 | uses 7 | System.SysUtils, 8 | System.UITypes, 9 | System.Classes, 10 | System.Math, 11 | FMX.Types, 12 | FMX.Controls, 13 | FMX.Forms, 14 | FMX.StdCtrls, 15 | FMX.Ani, 16 | FMX.Objects, 17 | FMX.Controls.Presentation, 18 | FMX.Edit, 19 | FMX.Layouts, 20 | Vue.Button.Base, 21 | FMX.Effects; 22 | 23 | type 24 | [ComponentPlatformsAttribute(pidAllPlatforms)] 25 | TVueButtonStyle0 = class(TVueButtonBase) 26 | lytClient: TLayout; 27 | rtgClient: TRectangle; 28 | rtgClientClient: TRectangle; 29 | rtgShadow: TShadowEffect; 30 | lbCaption: TLabel; 31 | crlEffect: TCircle; 32 | crlOpacityAni: TFloatAnimation; 33 | crlEffectAni: TFloatAnimation; 34 | crlOpacityRAni: TFloatAnimation; 35 | procedure rtgClientClientMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single); 36 | procedure crlEffectAniProcess(Sender: TObject); 37 | procedure crlOpacityRAniFinish(Sender: TObject); 38 | procedure rtgClientClientMouseEnter(Sender: TObject); 39 | procedure rtgClientClientMouseLeave(Sender: TObject); 40 | private 41 | FOnClick: TNotifyEvent; 42 | FX: Single; 43 | FY: Single; 44 | protected 45 | function GetCaption: String; override; 46 | procedure SetCaption(const Value: String); override; 47 | function GetOnClick: TNotifyEvent; override; 48 | procedure SetOnClick(const Value: TNotifyEvent); override; 49 | end; 50 | 51 | implementation 52 | 53 | uses 54 | Vue.Utils; 55 | 56 | {$R *.fmx} 57 | 58 | function TVueButtonStyle0.GetCaption: String; 59 | begin 60 | Result := lbCaption.Text; 61 | end; 62 | 63 | procedure TVueButtonStyle0.SetCaption(const Value: String); 64 | begin 65 | lbCaption.Text := Value; 66 | end; 67 | 68 | function TVueButtonStyle0.GetOnClick: TNotifyEvent; 69 | begin 70 | Result := FOnClick; 71 | end; 72 | 73 | procedure TVueButtonStyle0.SetOnClick(const Value: TNotifyEvent); 74 | begin 75 | FOnClick := Value; 76 | end; 77 | 78 | procedure TVueButtonStyle0.crlOpacityRAniFinish(Sender: TObject); 79 | begin 80 | crlEffect.Visible := False; 81 | end; 82 | 83 | procedure TVueButtonStyle0.crlEffectAniProcess(Sender: TObject); 84 | begin 85 | crlEffect.Width := crlEffect.Height; 86 | crlEffect.Position.X := FX - (crlEffect.Width / 2); 87 | crlEffect.Position.Y := FY - (crlEffect.Height / 2); 88 | end; 89 | 90 | procedure TVueButtonStyle0.rtgClientClientMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single); 91 | begin 92 | FX := X; 93 | FY := Y; 94 | 95 | crlEffect.Position.X := X - (crlEffect.Width / 2); 96 | crlEffect.Position.Y := Y - (crlEffect.Height / 2); 97 | 98 | crlEffect.Width := 0; 99 | crlEffect.Height := 0; 100 | crlEffect.Visible := True; 101 | crlEffectAni.StopValue := Max(rtgClientClient.Width, rtgClientClient.Height) * 2; 102 | 103 | crlEffectAni.Start; 104 | crlOpacityAni.Start; 105 | crlOpacityRAni.Start; 106 | 107 | if Assigned(FOnClick) then 108 | FOnClick(Sender); 109 | end; 110 | 111 | procedure TVueButtonStyle0.rtgClientClientMouseEnter(Sender: TObject); 112 | begin 113 | rtgClientClient.Fill.Color := RGB(245, 245, 245); 114 | end; 115 | 116 | procedure TVueButtonStyle0.rtgClientClientMouseLeave(Sender: TObject); 117 | begin 118 | rtgClientClient.Fill.Color := TAlphaColors.White; 119 | end; 120 | 121 | initialization 122 | TVueButtonBase.RegisterVueButtonStyle(TVueButtonStyle0); 123 | 124 | end. 125 | -------------------------------------------------------------------------------- /src/button/Vue.Button.Style1.fmx: -------------------------------------------------------------------------------- 1 | inherited VueButtonStyle1: TVueButtonStyle1 2 | Align = Client 3 | Size.Width = 53.000000000000000000 4 | Size.Height = 42.000000000000000000 5 | object lytClient: TLayout 6 | Align = Client 7 | Size.Width = 53.000000000000000000 8 | Size.Height = 42.000000000000000000 9 | Size.PlatformDefault = False 10 | TabOrder = 2 11 | object rtgClient: TCircle 12 | Align = Client 13 | ClipChildren = True 14 | Fill.Color = claNull 15 | Size.Width = 53.000000000000000000 16 | Size.Height = 42.000000000000000000 17 | Size.PlatformDefault = False 18 | Stroke.Color = xFFDFDFDF 19 | Stroke.Thickness = 0.500000000000000000 20 | object rtgClientClient: TCircle 21 | Align = Client 22 | Fill.Color = claWhite 23 | Size.Width = 53.000000000000000000 24 | Size.Height = 42.000000000000000000 25 | Size.PlatformDefault = False 26 | Stroke.Color = claNull 27 | Stroke.Thickness = 0.500000000000000000 28 | OnMouseDown = rtgClientClientMouseDown 29 | end 30 | object rtgShadow: TShadowEffect 31 | Distance = 1.500000000000000000 32 | Direction = 90.000000000000000000 33 | Softness = 0.100000001490116100 34 | Opacity = 0.500000000000000000 35 | ShadowColor = claBlack 36 | end 37 | end 38 | end 39 | end 40 | -------------------------------------------------------------------------------- /src/button/Vue.Button.Style1.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 26/02/2021 2 | unit Vue.Button.Style1; 3 | 4 | interface 5 | 6 | uses 7 | System.SysUtils, 8 | System.UITypes, 9 | System.Classes, 10 | System.Math, 11 | FMX.Types, 12 | FMX.Controls, 13 | FMX.Forms, 14 | FMX.StdCtrls, 15 | FMX.Ani, 16 | FMX.Objects, 17 | FMX.Controls.Presentation, 18 | FMX.Edit, 19 | FMX.Layouts, 20 | Vue.Button.Base, 21 | FMX.Effects, 22 | FMX.Graphics, 23 | System.Types; 24 | 25 | type 26 | [ComponentPlatformsAttribute(pidAllPlatforms)] 27 | TVueButtonStyle1 = class(TVueButtonBase) 28 | lytClient: TLayout; 29 | rtgClient: TCircle; 30 | rtgClientClient: TCircle; 31 | rtgShadow: TShadowEffect; 32 | procedure rtgClientClientMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single); 33 | private 34 | FOnClick: TNotifyEvent; 35 | protected 36 | function GetCaption: String; override; 37 | procedure SetCaption(const Value: String); override; 38 | function GetOnClick: TNotifyEvent; override; 39 | procedure SetOnClick(const Value: TNotifyEvent); override; 40 | end; 41 | 42 | implementation 43 | 44 | uses 45 | Vue.Utils; 46 | 47 | {$R *.fmx} 48 | 49 | function TVueButtonStyle1.GetCaption: String; 50 | begin 51 | // Result := lbCaption.Text; 52 | end; 53 | 54 | procedure TVueButtonStyle1.SetCaption(const Value: String); 55 | begin 56 | // lbCaption.Text := Value; 57 | end; 58 | 59 | function TVueButtonStyle1.GetOnClick: TNotifyEvent; 60 | begin 61 | Result := FOnClick; 62 | end; 63 | 64 | procedure TVueButtonStyle1.SetOnClick(const Value: TNotifyEvent); 65 | begin 66 | FOnClick := Value; 67 | end; 68 | 69 | procedure TVueButtonStyle1.rtgClientClientMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single); 70 | begin 71 | if Assigned(FOnClick) then 72 | FOnClick(Sender); 73 | end; 74 | 75 | initialization 76 | TVueButtonBase.RegisterVueButtonStyle(TVueButtonStyle1); 77 | 78 | end. 79 | -------------------------------------------------------------------------------- /src/button/Vue.Button.Style2.fmx: -------------------------------------------------------------------------------- 1 | inherited VueButtonStyle2: TVueButtonStyle2 2 | Align = Client 3 | Size.Height = 42.000000000000000000 4 | object lytClient: TLayout 5 | Align = Client 6 | Size.Width = 100.000000000000000000 7 | Size.Height = 42.000000000000000000 8 | Size.PlatformDefault = False 9 | TabOrder = 2 10 | object rtgClient: TRectangle 11 | Align = Client 12 | ClipChildren = True 13 | Fill.Color = claNull 14 | Opacity = 0.500000000000000000 15 | Size.Width = 100.000000000000000000 16 | Size.Height = 42.000000000000000000 17 | Size.PlatformDefault = False 18 | Stroke.Color = xFF7F7F7F 19 | XRadius = 3.000000000000000000 20 | YRadius = 3.000000000000000000 21 | OnMouseDown = rtgClientMouseDown 22 | OnMouseEnter = rtgClientMouseEnter 23 | OnMouseLeave = rtgClientMouseLeave 24 | object crlEffect: TCircle 25 | Fill.Color = xFFC8C8C8 26 | Position.X = 50.000000000000000000 27 | Position.Y = 20.000000000000000000 28 | Size.Width = 1.000000000000000000 29 | Size.Height = 1.000000000000000000 30 | Size.PlatformDefault = False 31 | Stroke.Kind = None 32 | OnMouseDown = rtgClientMouseDown 33 | object crlOpacityAni: TFloatAnimation 34 | AnimationType = InOut 35 | Duration = 0.300000011920929000 36 | Interpolation = Cubic 37 | PropertyName = 'Opacity' 38 | StartValue = 0.000000000000000000 39 | StopValue = 1.000000000000000000 40 | end 41 | object crlEffectAni: TFloatAnimation 42 | Duration = 0.300000011920929000 43 | Interpolation = Cubic 44 | OnProcess = crlEffectAniProcess 45 | PropertyName = 'Size.Height' 46 | StartValue = 0.000000000000000000 47 | StopValue = 0.000000000000000000 48 | end 49 | object crlOpacityRAni: TFloatAnimation 50 | AnimationType = InOut 51 | Delay = 0.300000011920929000 52 | Duration = 0.200000002980232200 53 | Interpolation = Cubic 54 | OnFinish = crlOpacityRAniFinish 55 | PropertyName = 'Opacity' 56 | StartValue = 1.000000000000000000 57 | StopValue = 0.000000000000000000 58 | end 59 | end 60 | end 61 | object lbCaption: TLabel 62 | Align = Client 63 | StyledSettings = [Style] 64 | Scale.X = 1.299999952316284000 65 | Scale.Y = 1.299999952316284000 66 | Size.Width = 76.923080444335940000 67 | Size.Height = 32.307693481445310000 68 | Size.PlatformDefault = False 69 | TextSettings.Font.Family = 'Roboto' 70 | TextSettings.FontColor = xFF7F7F7F 71 | TextSettings.HorzAlign = Center 72 | TextSettings.WordWrap = False 73 | Text = 'Button' 74 | TabOrder = 0 75 | end 76 | end 77 | end 78 | -------------------------------------------------------------------------------- /src/button/Vue.Button.Style2.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 27/02/2021 2 | unit Vue.Button.Style2; 3 | 4 | interface 5 | 6 | uses 7 | System.SysUtils, 8 | System.UITypes, 9 | System.Classes, 10 | System.Math, 11 | FMX.Types, 12 | FMX.Controls, 13 | FMX.Forms, 14 | FMX.StdCtrls, 15 | FMX.Ani, 16 | FMX.Objects, 17 | FMX.Controls.Presentation, 18 | FMX.Edit, 19 | FMX.Layouts, 20 | Vue.Button.Base, 21 | FMX.Effects; 22 | 23 | type 24 | [ComponentPlatformsAttribute(pidAllPlatforms)] 25 | TVueButtonStyle2 = class(TVueButtonBase) 26 | lytClient: TLayout; 27 | rtgClient: TRectangle; 28 | lbCaption: TLabel; 29 | crlEffect: TCircle; 30 | crlOpacityAni: TFloatAnimation; 31 | crlEffectAni: TFloatAnimation; 32 | crlOpacityRAni: TFloatAnimation; 33 | procedure rtgClientMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single); 34 | procedure crlEffectAniProcess(Sender: TObject); 35 | procedure crlOpacityRAniFinish(Sender: TObject); 36 | procedure rtgClientMouseEnter(Sender: TObject); 37 | procedure rtgClientMouseLeave(Sender: TObject); 38 | private 39 | FOnClick: TNotifyEvent; 40 | FX: Single; 41 | FY: Single; 42 | protected 43 | function GetCaption: String; override; 44 | procedure SetCaption(const Value: String); override; 45 | function GetOnClick: TNotifyEvent; override; 46 | procedure SetOnClick(const Value: TNotifyEvent); override; 47 | end; 48 | 49 | implementation 50 | 51 | uses 52 | Vue.Utils; 53 | 54 | {$R *.fmx} 55 | 56 | function TVueButtonStyle2.GetCaption: String; 57 | begin 58 | Result := lbCaption.Text; 59 | end; 60 | 61 | procedure TVueButtonStyle2.SetCaption(const Value: String); 62 | begin 63 | lbCaption.Text := Value; 64 | end; 65 | 66 | function TVueButtonStyle2.GetOnClick: TNotifyEvent; 67 | begin 68 | Result := FOnClick; 69 | end; 70 | 71 | procedure TVueButtonStyle2.SetOnClick(const Value: TNotifyEvent); 72 | begin 73 | FOnClick := Value; 74 | end; 75 | 76 | procedure TVueButtonStyle2.crlOpacityRAniFinish(Sender: TObject); 77 | begin 78 | crlEffect.Visible := False; 79 | end; 80 | 81 | procedure TVueButtonStyle2.crlEffectAniProcess(Sender: TObject); 82 | begin 83 | crlEffect.Width := crlEffect.Height; 84 | crlEffect.Position.X := FX - (crlEffect.Width / 2); 85 | crlEffect.Position.Y := FY - (crlEffect.Height / 2); 86 | end; 87 | 88 | procedure TVueButtonStyle2.rtgClientMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single); 89 | begin 90 | FX := X; 91 | FY := Y; 92 | 93 | crlEffect.Position.X := X - (crlEffect.Width / 2); 94 | crlEffect.Position.Y := Y - (crlEffect.Height / 2); 95 | 96 | crlEffect.Width := 0; 97 | crlEffect.Height := 0; 98 | crlEffect.Visible := True; 99 | crlEffectAni.StopValue := Max(rtgClient.Width, rtgClient.Height) * 2; 100 | 101 | crlEffectAni.Start; 102 | crlOpacityAni.Start; 103 | crlOpacityRAni.Start; 104 | 105 | if Assigned(FOnClick) then 106 | FOnClick(Sender); 107 | end; 108 | 109 | procedure TVueButtonStyle2.rtgClientMouseEnter(Sender: TObject); 110 | begin 111 | rtgClient.Stroke.Color := TAlphaColors.Black; 112 | end; 113 | 114 | procedure TVueButtonStyle2.rtgClientMouseLeave(Sender: TObject); 115 | begin 116 | rtgClient.Stroke.Color := RGB(127, 127, 127); 117 | end; 118 | 119 | initialization 120 | TVueButtonBase.RegisterVueButtonStyle(TVueButtonStyle2); 121 | 122 | end. 123 | -------------------------------------------------------------------------------- /src/button/Vue.Button.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 25/02/2021 2 | unit Vue.Button; 3 | 4 | interface 5 | 6 | uses 7 | FMX.Controls, 8 | System.Classes, 9 | System.UITypes, 10 | Vue.Utils, 11 | Vue.Button.Base, 12 | // Styles 13 | Vue.Button.Style0, 14 | Vue.Button.Style1, 15 | Vue.Button.Style2; 16 | 17 | type 18 | TVueButton = class(TControl) 19 | private 20 | FFrame: TVueButtonBase; 21 | FStyle: Integer; 22 | FCaption: String; 23 | FFocusColor: TAlphaColor; 24 | function GetCaption: String; 25 | procedure SetCaption(const Value: String); 26 | procedure SetStyle(const Value: Integer); 27 | procedure SetOnClick(const Value: TNotifyEvent); 28 | function GetOnClick: TNotifyEvent; 29 | procedure SetFocusColor(const Value: TAlphaColor); 30 | public 31 | constructor Create(AOwner: TComponent); override; 32 | destructor Destroy; override; 33 | published 34 | property Align; 35 | property Anchors; 36 | property Position; 37 | property Width; 38 | property Height; 39 | property Size; 40 | property Caption: String read GetCaption write SetCaption; 41 | property Style: Integer read FStyle write SetStyle; 42 | property FocusColor: TAlphaColor read FFocusColor write SetFocusColor; 43 | property OnClick: TNotifyEvent read GetOnClick write SetOnClick; 44 | end; 45 | 46 | implementation 47 | 48 | { TVueButton } 49 | 50 | constructor TVueButton.Create(AOwner: TComponent); 51 | begin 52 | inherited Create(AOwner); 53 | Style := 0; 54 | Width := 100; 55 | Height := 42; 56 | FocusColor := RGB(34, 106, 191); 57 | end; 58 | 59 | destructor TVueButton.Destroy; 60 | begin 61 | FFrame.Free; 62 | inherited; 63 | end; 64 | 65 | function TVueButton.GetCaption: String; 66 | begin 67 | Result := FCaption; 68 | end; 69 | 70 | procedure TVueButton.SetCaption(const Value: String); 71 | begin 72 | FCaption := Value; 73 | FFrame.Caption := Value; 74 | end; 75 | 76 | procedure TVueButton.SetFocusColor(const Value: TAlphaColor); 77 | begin 78 | FFocusColor := Value; 79 | FFrame.FocusColor := Value; 80 | end; 81 | 82 | function TVueButton.GetOnClick: TNotifyEvent; 83 | begin 84 | Result := FFrame.OnClick; 85 | end; 86 | 87 | procedure TVueButton.SetOnClick(const Value: TNotifyEvent); 88 | begin 89 | FFrame.OnClick := Value; 90 | end; 91 | 92 | procedure TVueButton.SetStyle(const Value: Integer); 93 | begin 94 | FStyle := Value; 95 | 96 | if Assigned(FFrame) then 97 | FFrame.Free; 98 | 99 | FFrame := TVueButtonBase(TVueButtonBase.VueButtonStyle(Value).Create).Create(Self); 100 | FFrame.Stored := False; 101 | Self.AddObject(FFrame); 102 | 103 | FFrame.Caption := FCaption; 104 | FFrame.FocusColor := FFocusColor; 105 | end; 106 | 107 | end. 108 | -------------------------------------------------------------------------------- /src/checkbox/Vue.CheckBox.Style0.fmx: -------------------------------------------------------------------------------- 1 | inherited VueCheckboxStyle0: TVueCheckboxStyle0 2 | Align = Client 3 | Size.Height = 42.000000000000000000 4 | object lytClient: TLayout 5 | Align = Client 6 | Size.Width = 200.000000000000000000 7 | Size.Height = 42.000000000000000000 8 | Size.PlatformDefault = False 9 | TabOrder = 2 10 | object lbCaption: TLabel 11 | Align = VertCenter 12 | StyledSettings = [Style] 13 | Position.X = 41.000000000000000000 14 | Position.Y = 7.000000000000000000 15 | Scale.X = 1.299999952316284000 16 | Scale.Y = 1.299999952316284000 17 | Size.Width = 122.307693481445300000 18 | Size.Height = 21.000000000000000000 19 | Size.PlatformDefault = False 20 | TextSettings.Font.Family = 'Roboto' 21 | TextSettings.FontColor = xFF7F7F7F 22 | TextSettings.WordWrap = False 23 | Text = 'Checkbox' 24 | TabOrder = 0 25 | OnMouseDown = CheckMouseDown 26 | end 27 | object lytCheck: TLayout 28 | Align = Left 29 | Size.Width = 41.000000000000000000 30 | Size.Height = 42.000000000000000000 31 | Size.PlatformDefault = False 32 | TabOrder = 1 33 | OnMouseDown = CheckMouseDown 34 | OnMouseEnter = CheckMouseEnter 35 | OnMouseLeave = CheckMouseLeave 36 | object crlCheck: TCircle 37 | Align = Center 38 | Fill.Color = claBlack 39 | Opacity = 0.200000002980232200 40 | Size.Width = 40.000000000000000000 41 | Size.Height = 40.000000000000000000 42 | Size.PlatformDefault = False 43 | Stroke.Kind = None 44 | OnMouseDown = CheckMouseDown 45 | OnMouseEnter = CheckMouseEnter 46 | OnMouseLeave = CheckMouseLeave 47 | end 48 | object rtgCheck: TRectangle 49 | Align = Center 50 | Fill.Color = claNull 51 | Size.Width = 18.000000000000000000 52 | Size.Height = 18.000000000000000000 53 | Size.PlatformDefault = False 54 | Stroke.Color = xFF757575 55 | Stroke.Thickness = 1.799999952316284000 56 | XRadius = 2.000000000000000000 57 | YRadius = 2.000000000000000000 58 | OnMouseDown = CheckMouseDown 59 | OnMouseEnter = CheckMouseEnter 60 | OnMouseLeave = CheckMouseLeave 61 | object pthCheck: TPath 62 | Align = Client 63 | Data.Path = { 64 | 1800000000000000C520F440560E694102000000C520F840560E6B4102000000 65 | A470FD4062106C4102000000295C014162106C4102000000E7FB034162106C41 66 | 02000000BE9F06416E126B4102000000F0A70841560E6941010000007B148641 67 | 3E0ACB400200000094188841DCF9C2400200000094188841B7F3B54002000000 68 | 7B14864154E3AD400200000062108441F2D2A54002000000D9CE8041F2D2A540 69 | 0200000081957D4154E3AD4001000000295C0141EA265341010000002FDD8440 70 | A245144102000000999979408941104102000000ED7C5F408941104102000000 71 | 8B6C4F40A245144102000000C64B3F40D34D184102000000C64B3F40FED41E41 72 | 020000008B6C4F4017D9224101000000C520F440560E694103000000C520F440 73 | 560E6941} 74 | Fill.Color = claNull 75 | Margins.Left = 3.000000000000000000 76 | Margins.Top = 4.000000000000000000 77 | Margins.Right = 3.000000000000000000 78 | Margins.Bottom = 4.000000000000000000 79 | Size.Width = 12.000000000000000000 80 | Size.Height = 10.000000000000000000 81 | Size.PlatformDefault = False 82 | Stroke.Color = claNull 83 | OnMouseDown = CheckMouseDown 84 | OnMouseEnter = CheckMouseEnter 85 | OnMouseLeave = CheckMouseLeave 86 | end 87 | end 88 | end 89 | end 90 | end 91 | -------------------------------------------------------------------------------- /src/checkbox/Vue.CheckBox.Style0.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 28/02/2021 2 | unit Vue.Checkbox.Style0; 3 | 4 | interface 5 | 6 | uses 7 | System.SysUtils, 8 | System.UITypes, 9 | System.Classes, 10 | System.Math, 11 | FMX.Types, 12 | FMX.Controls, 13 | FMX.Forms, 14 | FMX.StdCtrls, 15 | FMX.Ani, 16 | FMX.Objects, 17 | FMX.Controls.Presentation, 18 | FMX.Edit, 19 | FMX.Layouts, 20 | Vue.Checkbox.Base, 21 | FMX.Effects; 22 | 23 | type 24 | [ComponentPlatformsAttribute(pidAllPlatforms)] 25 | TVueCheckboxStyle0 = class(TVueCheckboxBase) 26 | lytClient: TLayout; 27 | lbCaption: TLabel; 28 | pthCheck: TPath; 29 | rtgCheck: TRectangle; 30 | lytCheck: TLayout; 31 | crlCheck: TCircle; 32 | procedure CheckMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single); 33 | procedure CheckMouseEnter(Sender: TObject); 34 | procedure CheckMouseLeave(Sender: TObject); 35 | private 36 | FChecked: Boolean; 37 | FFocusColor: TAlphaColor; 38 | FOnClick: TNotifyEvent; 39 | procedure UpdateState; 40 | protected 41 | function GetChecked: Boolean; override; 42 | procedure SetChecked(const Value: Boolean); override; 43 | function GetCaption: String; override; 44 | procedure SetCaption(const Value: String); override; 45 | function GetFocusColor: TAlphaColor; override; 46 | procedure SetFocusColor(const Value: TAlphaColor); override; 47 | function GetOnClick: TNotifyEvent; override; 48 | procedure SetOnClick(const Value: TNotifyEvent); override; 49 | public 50 | constructor Create(AOwner: TComponent); override; 51 | end; 52 | 53 | implementation 54 | 55 | uses 56 | Vue.Utils; 57 | 58 | {$R *.fmx} 59 | 60 | constructor TVueCheckboxStyle0.Create; 61 | begin 62 | inherited; 63 | crlCheck.Visible := False; 64 | FChecked := False; 65 | UpdateState; 66 | end; 67 | 68 | function TVueCheckboxStyle0.GetChecked: Boolean; 69 | begin 70 | Result := FChecked; 71 | end; 72 | 73 | procedure TVueCheckboxStyle0.SetChecked(const Value: Boolean); 74 | begin 75 | FChecked := Value; 76 | UpdateState; 77 | end; 78 | 79 | function TVueCheckboxStyle0.GetCaption: String; 80 | begin 81 | Result := lbCaption.Text; 82 | end; 83 | 84 | procedure TVueCheckboxStyle0.SetCaption(const Value: String); 85 | begin 86 | lbCaption.Text := Value; 87 | end; 88 | 89 | function TVueCheckboxStyle0.GetFocusColor: TAlphaColor; 90 | begin 91 | Result := FFocusColor; 92 | end; 93 | 94 | procedure TVueCheckboxStyle0.SetFocusColor(const Value: TAlphaColor); 95 | begin 96 | FFocusColor := Value; 97 | end; 98 | 99 | function TVueCheckboxStyle0.GetOnClick: TNotifyEvent; 100 | begin 101 | Result := FOnClick; 102 | end; 103 | 104 | procedure TVueCheckboxStyle0.SetOnClick(const Value: TNotifyEvent); 105 | begin 106 | FOnClick := Value; 107 | end; 108 | 109 | procedure TVueCheckboxStyle0.CheckMouseEnter(Sender: TObject); 110 | begin 111 | crlCheck.Visible := True; 112 | end; 113 | 114 | procedure TVueCheckboxStyle0.CheckMouseLeave(Sender: TObject); 115 | begin 116 | crlCheck.Visible := False; 117 | end; 118 | 119 | procedure TVueCheckboxStyle0.UpdateState; 120 | begin 121 | if FChecked then 122 | begin 123 | crlCheck.Fill.Color := FFocusColor; 124 | rtgCheck.Fill.Color := FFocusColor; 125 | rtgCheck.Stroke.Color := FFocusColor; 126 | pthCheck.Stroke.Color := RGB(255, 255, 255); 127 | end 128 | else 129 | begin 130 | crlCheck.Fill.Color := TAlphaColors.Black; 131 | rtgCheck.Fill.Color := TAlphaColors.Null; 132 | rtgCheck.Stroke.Color := RGB(117, 117, 117); 133 | pthCheck.Stroke.Color := TAlphaColors.Null; 134 | end; 135 | 136 | if Assigned(FOnClick) then 137 | FOnClick(Self); 138 | end; 139 | 140 | procedure TVueCheckboxStyle0.CheckMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single); 141 | begin 142 | FChecked := not FChecked; 143 | UpdateState; 144 | end; 145 | 146 | initialization 147 | TVueCheckboxBase.RegisterVueCheckboxStyle(TVueCheckboxStyle0); 148 | 149 | end. 150 | -------------------------------------------------------------------------------- /src/checkbox/Vue.Checkbox.Base.fmx: -------------------------------------------------------------------------------- 1 | object VueCheckboxBase: TVueCheckboxBase 2 | Size.Width = 200.000000000000000000 3 | Size.Height = 40.000000000000000000 4 | Size.PlatformDefault = False 5 | end 6 | -------------------------------------------------------------------------------- /src/checkbox/Vue.Checkbox.Base.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 28/02/2021 2 | unit Vue.Checkbox.Base; 3 | 4 | interface 5 | 6 | uses 7 | System.Classes, 8 | System.UITypes, 9 | FMX.Forms; 10 | 11 | type 12 | TVueCheckboxBase = class(TFrame) 13 | private 14 | class var VueCheckboxStyles: TArray; 15 | protected 16 | function GetChecked: Boolean; virtual; 17 | procedure SetChecked(const Value: Boolean); virtual; 18 | function GetCaption: String; virtual; 19 | procedure SetCaption(const Value: String); virtual; 20 | function GetFocusColor: TAlphaColor; virtual; 21 | procedure SetFocusColor(const Value: TAlphaColor); virtual; 22 | function GetOnClick: TNotifyEvent; virtual; 23 | procedure SetOnClick(const Value: TNotifyEvent); virtual; 24 | public 25 | class procedure RegisterVueCheckboxStyle(FrameClass: TPersistentClass); 26 | class function VueCheckboxStyle(Index: Integer): TPersistentClass; 27 | published 28 | property Checked: Boolean read GetChecked write SetChecked; 29 | property Caption: String read GetCaption write SetCaption; 30 | property FocusColor: TAlphaColor read GetFocusColor write SetFocusColor; 31 | property OnClick: TNotifyEvent read GetOnClick write SetOnClick; 32 | end; 33 | 34 | implementation 35 | 36 | {$R *.fmx} 37 | 38 | { TVueCheckboxBase } 39 | 40 | class procedure TVueCheckboxBase.RegisterVueCheckboxStyle(FrameClass: TPersistentClass); 41 | begin 42 | SetLength(TVueCheckboxBase.VueCheckboxStyles, Succ(Length(TVueCheckboxBase.VueCheckboxStyles))); 43 | TVueCheckboxBase.VueCheckboxStyles[Pred(Length(TVueCheckboxBase.VueCheckboxStyles))] := FrameClass; 44 | end; 45 | 46 | class function TVueCheckboxBase.VueCheckboxStyle(Index: Integer): TPersistentClass; 47 | begin 48 | if (Index > Pred(Length(TVueCheckboxBase.VueCheckboxStyles))) or (Index < 0) then 49 | Index := 0; 50 | Result := TVueCheckboxBase.VueCheckboxStyles[Index]; 51 | end; 52 | 53 | function TVueCheckboxBase.GetChecked: Boolean; 54 | begin 55 | Result := False; 56 | end; 57 | 58 | procedure TVueCheckboxBase.SetChecked(const Value: Boolean); 59 | begin 60 | end; 61 | 62 | function TVueCheckboxBase.GetCaption: String; 63 | begin 64 | end; 65 | 66 | procedure TVueCheckboxBase.SetCaption(const Value: String); 67 | begin 68 | end; 69 | 70 | function TVueCheckboxBase.GetFocusColor: TAlphaColor; 71 | begin 72 | Result := 0; 73 | end; 74 | 75 | procedure TVueCheckboxBase.SetFocusColor(const Value: TAlphaColor); 76 | begin 77 | end; 78 | 79 | function TVueCheckboxBase.GetOnClick: TNotifyEvent; 80 | begin 81 | end; 82 | 83 | procedure TVueCheckboxBase.SetOnClick(const Value: TNotifyEvent); 84 | begin 85 | end; 86 | 87 | end. 88 | -------------------------------------------------------------------------------- /src/checkbox/Vue.Checkbox.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 28/02/2021 2 | unit Vue.Checkbox; 3 | 4 | interface 5 | 6 | uses 7 | FMX.Controls, 8 | System.Classes, 9 | System.UITypes, 10 | Vue.Utils, 11 | Vue.Checkbox.Base, 12 | // Styles 13 | Vue.Checkbox.Style0; 14 | 15 | type 16 | TVueCheckbox = class(TControl) 17 | private 18 | FFrame: TVueCheckboxBase; 19 | FStyle: Integer; 20 | FCaption: String; 21 | FChecked: Boolean; 22 | FFocusColor: TAlphaColor; 23 | function GetChecked: Boolean; 24 | procedure SetChecked(const Value: Boolean); 25 | function GetCaption: String; 26 | procedure SetCaption(const Value: String); 27 | procedure SetStyle(const Value: Integer); 28 | procedure SetOnClick(const Value: TNotifyEvent); 29 | function GetOnClick: TNotifyEvent; 30 | procedure SetFocusColor(const Value: TAlphaColor); 31 | public 32 | constructor Create(AOwner: TComponent); override; 33 | destructor Destroy; override; 34 | published 35 | property Align; 36 | property Anchors; 37 | property Position; 38 | property Width; 39 | property Height; 40 | property Size; 41 | property Checked: Boolean read GetChecked write SetChecked; 42 | property Caption: String read GetCaption write SetCaption; 43 | property FocusColor: TAlphaColor read FFocusColor write SetFocusColor; 44 | property Style: Integer read FStyle write SetStyle; 45 | property OnClick: TNotifyEvent read GetOnClick write SetOnClick; 46 | end; 47 | 48 | implementation 49 | 50 | { TVueCheckbox } 51 | 52 | constructor TVueCheckbox.Create(AOwner: TComponent); 53 | begin 54 | inherited Create(AOwner); 55 | Style := 0; 56 | Width := 200; 57 | Height := 40; 58 | FocusColor := RGB(34, 106, 191); 59 | end; 60 | 61 | destructor TVueCheckbox.Destroy; 62 | begin 63 | FFrame.Free; 64 | inherited; 65 | end; 66 | 67 | function TVueCheckbox.GetChecked: Boolean; 68 | begin 69 | Result := FChecked; 70 | end; 71 | 72 | procedure TVueCheckbox.SetChecked(const Value: Boolean); 73 | begin 74 | FChecked := Value; 75 | FFrame.Checked := Value; 76 | end; 77 | 78 | function TVueCheckbox.GetCaption: String; 79 | begin 80 | Result := FCaption; 81 | end; 82 | 83 | procedure TVueCheckbox.SetCaption(const Value: String); 84 | begin 85 | FCaption := Value; 86 | FFrame.Caption := Value; 87 | end; 88 | 89 | procedure TVueCheckbox.SetFocusColor(const Value: TAlphaColor); 90 | begin 91 | FFocusColor := Value; 92 | FFrame.FocusColor := Value; 93 | end; 94 | 95 | function TVueCheckbox.GetOnClick: TNotifyEvent; 96 | begin 97 | Result := FFrame.OnClick; 98 | end; 99 | 100 | procedure TVueCheckbox.SetOnClick(const Value: TNotifyEvent); 101 | begin 102 | FFrame.OnClick := Value; 103 | end; 104 | 105 | procedure TVueCheckbox.SetStyle(const Value: Integer); 106 | begin 107 | FStyle := Value; 108 | 109 | if Assigned(FFrame) then 110 | FFrame.Free; 111 | 112 | FFrame := TVueCheckboxBase(TVueCheckboxBase.VueCheckboxStyle(Value).Create).Create(Self); 113 | FFrame.Stored := False; 114 | Self.AddObject(FFrame); 115 | 116 | FFrame.Checked := FChecked; 117 | FFrame.Caption := FCaption; 118 | FFrame.FocusColor := FFocusColor; 119 | end; 120 | 121 | end. 122 | -------------------------------------------------------------------------------- /src/switch/Vue.Switch.Base.fmx: -------------------------------------------------------------------------------- 1 | object VueSwitchBase: TVueSwitchBase 2 | Size.Width = 200.000000000000000000 3 | Size.Height = 40.000000000000000000 4 | Size.PlatformDefault = False 5 | end 6 | -------------------------------------------------------------------------------- /src/switch/Vue.Switch.Base.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 09/03/2021 2 | unit Vue.Switch.Base; 3 | 4 | interface 5 | 6 | uses 7 | System.Classes, 8 | System.UITypes, 9 | FMX.Forms; 10 | 11 | type 12 | TVueSwitchBase = class(TFrame) 13 | private 14 | class var VueSwitchStyles: TArray; 15 | protected 16 | function GetValue: Boolean; virtual; 17 | procedure SetValue(const Value: Boolean); virtual; 18 | function GetCaption: String; virtual; 19 | procedure SetCaption(const Value: String); virtual; 20 | function GetFocusColor: TAlphaColor; virtual; 21 | procedure SetFocusColor(const Value: TAlphaColor); virtual; 22 | function GetOnChange: TNotifyEvent; virtual; 23 | procedure SetOnChange(const Value: TNotifyEvent); virtual; 24 | public 25 | class procedure RegisterVueSwitchStyle(FrameClass: TPersistentClass); 26 | class function VueSwitchStyle(Index: Integer): TPersistentClass; 27 | published 28 | property Value: Boolean read GetValue write SetValue; 29 | property Caption: String read GetCaption write SetCaption; 30 | property FocusColor: TAlphaColor read GetFocusColor write SetFocusColor; 31 | property OnChange: TNotifyEvent read GetOnChange write SetOnChange; 32 | end; 33 | 34 | implementation 35 | 36 | {$R *.fmx} 37 | 38 | { TVueSwitchBase } 39 | 40 | class procedure TVueSwitchBase.RegisterVueSwitchStyle(FrameClass: TPersistentClass); 41 | begin 42 | SetLength(TVueSwitchBase.VueSwitchStyles, Succ(Length(TVueSwitchBase.VueSwitchStyles))); 43 | TVueSwitchBase.VueSwitchStyles[Pred(Length(TVueSwitchBase.VueSwitchStyles))] := FrameClass; 44 | end; 45 | 46 | class function TVueSwitchBase.VueSwitchStyle(Index: Integer): TPersistentClass; 47 | begin 48 | if (Index > Pred(Length(TVueSwitchBase.VueSwitchStyles))) or (Index < 0) then 49 | Index := 0; 50 | Result := TVueSwitchBase.VueSwitchStyles[Index]; 51 | end; 52 | 53 | function TVueSwitchBase.GetValue: Boolean; 54 | begin 55 | Result := False; 56 | end; 57 | 58 | procedure TVueSwitchBase.SetValue(const Value: Boolean); 59 | begin 60 | end; 61 | 62 | function TVueSwitchBase.GetCaption: String; 63 | begin 64 | end; 65 | 66 | procedure TVueSwitchBase.SetCaption(const Value: String); 67 | begin 68 | end; 69 | 70 | function TVueSwitchBase.GetFocusColor: TAlphaColor; 71 | begin 72 | Result := 0; 73 | end; 74 | 75 | procedure TVueSwitchBase.SetFocusColor(const Value: TAlphaColor); 76 | begin 77 | end; 78 | 79 | function TVueSwitchBase.GetOnChange: TNotifyEvent; 80 | begin 81 | end; 82 | 83 | procedure TVueSwitchBase.SetOnChange(const Value: TNotifyEvent); 84 | begin 85 | end; 86 | 87 | end. 88 | -------------------------------------------------------------------------------- /src/switch/Vue.Switch.Style0.fmx: -------------------------------------------------------------------------------- 1 | inherited VueSwitchStyle0: TVueSwitchStyle0 2 | Align = Client 3 | Size.Height = 42.000000000000000000 4 | object lytClient: TLayout 5 | Align = Client 6 | Size.Width = 200.000000000000000000 7 | Size.Height = 42.000000000000000000 8 | Size.PlatformDefault = False 9 | TabOrder = 2 10 | object lbCaption: TLabel 11 | Align = VertCenter 12 | StyledSettings = [Style] 13 | Position.X = 61.000000000000000000 14 | Position.Y = 7.000000000000000000 15 | Scale.X = 1.299999952316284000 16 | Scale.Y = 1.299999952316284000 17 | Size.Width = 106.923080444335900000 18 | Size.Height = 21.000000000000000000 19 | Size.PlatformDefault = False 20 | TextSettings.Font.Family = 'Roboto' 21 | TextSettings.FontColor = xFF7F7F7F 22 | TextSettings.WordWrap = False 23 | Text = 'Switch' 24 | TabOrder = 0 25 | OnMouseDown = CheckMouseDown 26 | end 27 | object lytCheck: TLayout 28 | Align = Left 29 | Size.Width = 61.000000000000000000 30 | Size.Height = 42.000000000000000000 31 | Size.PlatformDefault = False 32 | TabOrder = 1 33 | OnMouseDown = CheckMouseDown 34 | OnMouseEnter = CheckMouseEnter 35 | OnMouseLeave = CheckMouseLeave 36 | object rrtScroll: TRoundRect 37 | Fill.Color = claBlack 38 | Opacity = 0.300000011920929000 39 | Position.X = 11.000000000000000000 40 | Position.Y = 13.000000000000000000 41 | Size.Width = 37.000000000000000000 42 | Size.Height = 15.000000000000000000 43 | Size.PlatformDefault = False 44 | Stroke.Kind = None 45 | end 46 | object crlShadow: TCircle 47 | Fill.Color = claBlack 48 | Opacity = 0.200000002980232200 49 | Position.X = -3.000000000000000000 50 | Position.Y = -1.000000000000000000 51 | Size.Width = 46.000000000000000000 52 | Size.Height = 41.000000000000000000 53 | Size.PlatformDefault = False 54 | Stroke.Kind = None 55 | OnMouseDown = CheckMouseDown 56 | OnMouseEnter = CheckMouseEnter 57 | OnMouseLeave = CheckMouseLeave 58 | object crlShadowPositionXAni: TFloatAnimation 59 | AnimationType = InOut 60 | Duration = 0.200000002980232200 61 | Interpolation = Cubic 62 | PropertyName = 'Position.X' 63 | StartValue = -3.000000000000000000 64 | StopValue = 16.000000000000000000 65 | end 66 | end 67 | object crlValue: TCircle 68 | Fill.Color = claWhite 69 | Position.X = 10.000000000000000000 70 | Position.Y = 9.000000000000000000 71 | Size.Width = 21.000000000000000000 72 | Size.Height = 21.000000000000000000 73 | Size.PlatformDefault = False 74 | Stroke.Kind = None 75 | OnMouseDown = CheckMouseDown 76 | OnMouseEnter = CheckMouseEnter 77 | OnMouseLeave = CheckMouseLeave 78 | object ShadowEffect1: TShadowEffect 79 | Distance = 1.500000000000000000 80 | Direction = 90.000000000000000000 81 | Softness = 0.100000001490116100 82 | Opacity = 0.500000000000000000 83 | ShadowColor = claBlack 84 | end 85 | object crlValuePositionXAni: TFloatAnimation 86 | AnimationType = InOut 87 | Duration = 0.200000002980232200 88 | Interpolation = Cubic 89 | PropertyName = 'Position.X' 90 | StartValue = 10.000000000000000000 91 | StopValue = 28.000000000000000000 92 | end 93 | end 94 | end 95 | end 96 | end 97 | -------------------------------------------------------------------------------- /src/switch/Vue.Switch.Style0.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 09/03/2021 2 | unit Vue.Switch.Style0; 3 | 4 | interface 5 | 6 | uses 7 | System.SysUtils, 8 | System.UITypes, 9 | System.Classes, 10 | System.Math, 11 | FMX.Types, 12 | FMX.Controls, 13 | FMX.Forms, 14 | FMX.StdCtrls, 15 | FMX.Ani, 16 | FMX.Objects, 17 | FMX.Controls.Presentation, 18 | FMX.Edit, 19 | FMX.Layouts, 20 | Vue.Switch.Base, 21 | FMX.Effects; 22 | 23 | type 24 | [ComponentPlatformsAttribute(pidAllPlatforms)] 25 | TVueSwitchStyle0 = class(TVueSwitchBase) 26 | lytClient: TLayout; 27 | lbCaption: TLabel; 28 | lytCheck: TLayout; 29 | crlShadow: TCircle; 30 | rrtScroll: TRoundRect; 31 | crlValue: TCircle; 32 | ShadowEffect1: TShadowEffect; 33 | crlValuePositionXAni: TFloatAnimation; 34 | crlShadowPositionXAni: TFloatAnimation; 35 | procedure CheckMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single); 36 | procedure CheckMouseEnter(Sender: TObject); 37 | procedure CheckMouseLeave(Sender: TObject); 38 | private 39 | FValue: Boolean; 40 | FFocusColor: TAlphaColor; 41 | FOnChange: TNotifyEvent; 42 | procedure UpdateState; 43 | protected 44 | function GetValue: Boolean; override; 45 | procedure SetValue(const Value: Boolean); override; 46 | function GetCaption: String; override; 47 | procedure SetCaption(const Value: String); override; 48 | function GetFocusColor: TAlphaColor; override; 49 | procedure SetFocusColor(const Value: TAlphaColor); override; 50 | function GetOnChange: TNotifyEvent; override; 51 | procedure SetOnChange(const Value: TNotifyEvent); override; 52 | public 53 | constructor Create(AOwner: TComponent); override; 54 | end; 55 | 56 | implementation 57 | 58 | uses 59 | Vue.Utils; 60 | 61 | {$R *.fmx} 62 | 63 | constructor TVueSwitchStyle0.Create; 64 | begin 65 | inherited; 66 | crlShadow.Visible := False; 67 | FValue := False; 68 | UpdateState; 69 | end; 70 | 71 | function TVueSwitchStyle0.GetValue: Boolean; 72 | begin 73 | Result := FValue; 74 | end; 75 | 76 | procedure TVueSwitchStyle0.SetValue(const Value: Boolean); 77 | begin 78 | FValue := Value; 79 | UpdateState; 80 | end; 81 | 82 | function TVueSwitchStyle0.GetCaption: String; 83 | begin 84 | Result := lbCaption.Text; 85 | end; 86 | 87 | procedure TVueSwitchStyle0.SetCaption(const Value: String); 88 | begin 89 | lbCaption.Text := Value; 90 | end; 91 | 92 | function TVueSwitchStyle0.GetFocusColor: TAlphaColor; 93 | begin 94 | Result := FFocusColor; 95 | end; 96 | 97 | procedure TVueSwitchStyle0.SetFocusColor(const Value: TAlphaColor); 98 | begin 99 | FFocusColor := Value; 100 | end; 101 | 102 | function TVueSwitchStyle0.GetOnChange: TNotifyEvent; 103 | begin 104 | Result := FOnChange; 105 | end; 106 | 107 | procedure TVueSwitchStyle0.SetOnChange(const Value: TNotifyEvent); 108 | begin 109 | FOnChange := Value; 110 | end; 111 | 112 | procedure TVueSwitchStyle0.CheckMouseEnter(Sender: TObject); 113 | begin 114 | crlShadow.Visible := True; 115 | end; 116 | 117 | procedure TVueSwitchStyle0.CheckMouseLeave(Sender: TObject); 118 | begin 119 | crlShadow.Visible := False; 120 | end; 121 | 122 | procedure TVueSwitchStyle0.UpdateState; 123 | begin 124 | crlValuePositionXAni.Inverse := not FValue; 125 | crlShadowPositionXAni.Inverse := not FValue; 126 | 127 | if FValue then 128 | begin 129 | crlValue.Fill.Color := FFocusColor; 130 | crlShadow.Fill.Color := FFocusColor; 131 | rrtScroll.Fill.Color := FFocusColor; 132 | rrtScroll.Opacity := 0.6; 133 | end 134 | else 135 | begin 136 | crlValue.Fill.Color := TAlphaColors.White; 137 | crlShadow.Fill.Color := TAlphaColors.Black; 138 | rrtScroll.Fill.Color := TAlphaColors.Black; 139 | rrtScroll.Opacity := 0.3; 140 | end; 141 | 142 | crlValuePositionXAni.Start; 143 | crlShadowPositionXAni.Start; 144 | 145 | if Assigned(FOnChange) then 146 | FOnChange(Self); 147 | end; 148 | 149 | procedure TVueSwitchStyle0.CheckMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single); 150 | begin 151 | FValue := not FValue; 152 | UpdateState; 153 | end; 154 | 155 | initialization 156 | TVueSwitchBase.RegisterVueSwitchStyle(TVueSwitchStyle0); 157 | 158 | end. 159 | -------------------------------------------------------------------------------- /src/switch/Vue.Switch.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 09/03/2021 2 | unit Vue.Switch; 3 | 4 | interface 5 | 6 | uses 7 | FMX.Controls, 8 | System.Classes, 9 | System.UITypes, 10 | Vue.Utils, 11 | Vue.Switch.Base, 12 | // Styles 13 | Vue.Switch.Style0; 14 | 15 | type 16 | TVueSwitch = class(TControl) 17 | private 18 | FFrame: TVueSwitchBase; 19 | FStyle: Integer; 20 | FCaption: String; 21 | FValue: Boolean; 22 | FFocusColor: TAlphaColor; 23 | function GetValue: Boolean; 24 | procedure SetValue(const Value: Boolean); 25 | function GetCaption: String; 26 | procedure SetCaption(const Value: String); 27 | procedure SetStyle(const Value: Integer); 28 | procedure SetOnChange(const Value: TNotifyEvent); 29 | function GetOnChange: TNotifyEvent; 30 | procedure SetFocusColor(const Value: TAlphaColor); 31 | public 32 | constructor Create(AOwner: TComponent); override; 33 | destructor Destroy; override; 34 | published 35 | property Align; 36 | property Anchors; 37 | property Position; 38 | property Width; 39 | property Height; 40 | property Size; 41 | property Value: Boolean read GetValue write SetValue; 42 | property Caption: String read GetCaption write SetCaption; 43 | property FocusColor: TAlphaColor read FFocusColor write SetFocusColor; 44 | property Style: Integer read FStyle write SetStyle; 45 | property OnChange: TNotifyEvent read GetOnChange write SetOnChange; 46 | end; 47 | 48 | implementation 49 | 50 | { TVueSwitch } 51 | 52 | constructor TVueSwitch.Create(AOwner: TComponent); 53 | begin 54 | inherited Create(AOwner); 55 | Style := 0; 56 | Width := 200; 57 | Height := 40; 58 | FocusColor := RGB(34, 106, 191); 59 | end; 60 | 61 | destructor TVueSwitch.Destroy; 62 | begin 63 | FFrame.Free; 64 | inherited; 65 | end; 66 | 67 | function TVueSwitch.GetValue: Boolean; 68 | begin 69 | Result := FValue; 70 | end; 71 | 72 | procedure TVueSwitch.SetValue(const Value: Boolean); 73 | begin 74 | FValue := Value; 75 | FFrame.Value := Value; 76 | end; 77 | 78 | function TVueSwitch.GetCaption: String; 79 | begin 80 | Result := FCaption; 81 | end; 82 | 83 | procedure TVueSwitch.SetCaption(const Value: String); 84 | begin 85 | FCaption := Value; 86 | FFrame.Caption := Value; 87 | end; 88 | 89 | procedure TVueSwitch.SetFocusColor(const Value: TAlphaColor); 90 | begin 91 | FFocusColor := Value; 92 | FFrame.FocusColor := Value; 93 | end; 94 | 95 | function TVueSwitch.GetOnChange: TNotifyEvent; 96 | begin 97 | Result := FFrame.OnChange; 98 | end; 99 | 100 | procedure TVueSwitch.SetOnChange(const Value: TNotifyEvent); 101 | begin 102 | FFrame.OnChange := Value; 103 | end; 104 | 105 | procedure TVueSwitch.SetStyle(const Value: Integer); 106 | begin 107 | FStyle := Value; 108 | 109 | if Assigned(FFrame) then 110 | FFrame.Free; 111 | 112 | FFrame := TVueSwitchBase(TVueSwitchBase.VueSwitchStyle(Value).Create).Create(Self); 113 | FFrame.Stored := False; 114 | Self.AddObject(FFrame); 115 | 116 | FFrame.Value := FValue; 117 | FFrame.Caption := FCaption; 118 | FFrame.FocusColor := FFocusColor; 119 | end; 120 | 121 | end. 122 | -------------------------------------------------------------------------------- /src/text/Vue.Text.Base.fmx: -------------------------------------------------------------------------------- 1 | object VueTextBase: TVueTextBase 2 | Size.Width = 350.000000000000000000 3 | Size.Height = 50.000000000000000000 4 | Size.PlatformDefault = False 5 | end 6 | -------------------------------------------------------------------------------- /src/text/Vue.Text.Base.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 25/02/2021 2 | unit Vue.Text.Base; 3 | 4 | interface 5 | 6 | uses 7 | System.Classes, 8 | System.UITypes, 9 | FMX.Forms; 10 | 11 | type 12 | TVueTextBase = class(TFrame) 13 | private 14 | class var VueTextStyles: TArray; 15 | protected 16 | function GetCaption: String; virtual; 17 | procedure SetCaption(const Value: String); virtual; 18 | function GetText: String; virtual; 19 | procedure SetText(const Value: String); virtual; 20 | function GetFocusColor: TAlphaColor; virtual; 21 | procedure SetFocusColor(const Value: TAlphaColor); virtual; 22 | public 23 | class procedure RegisterVueTextStyle(FrameClass: TPersistentClass); 24 | class function VueTextStyle(Index: Integer): TPersistentClass; 25 | published 26 | property Caption: String read GetCaption write SetCaption; 27 | property Text: String read GetText write SetText; 28 | property FocusColor: TAlphaColor read GetFocusColor write SetFocusColor; 29 | end; 30 | 31 | implementation 32 | 33 | {$R *.fmx} 34 | 35 | { TVueTextBase } 36 | 37 | class procedure TVueTextBase.RegisterVueTextStyle(FrameClass: TPersistentClass); 38 | begin 39 | SetLength(TVueTextBase.VueTextStyles, Succ(Length(TVueTextBase.VueTextStyles))); 40 | TVueTextBase.VueTextStyles[Pred(Length(TVueTextBase.VueTextStyles))] := FrameClass; 41 | end; 42 | 43 | class function TVueTextBase.VueTextStyle(Index: Integer): TPersistentClass; 44 | begin 45 | if (Index > Pred(Length(TVueTextBase.VueTextStyles))) or (Index < 0) then 46 | Index := 0; 47 | Result := TVueTextBase.VueTextStyles[Index]; 48 | end; 49 | 50 | function TVueTextBase.GetCaption: String; 51 | begin 52 | end; 53 | 54 | procedure TVueTextBase.SetCaption(const Value: String); 55 | begin 56 | end; 57 | 58 | function TVueTextBase.GetFocusColor: TAlphaColor; 59 | begin 60 | Result := 0; 61 | end; 62 | 63 | procedure TVueTextBase.SetFocusColor(const Value: TAlphaColor); 64 | begin 65 | end; 66 | 67 | function TVueTextBase.GetText: String; 68 | begin 69 | end; 70 | 71 | procedure TVueTextBase.SetText(const Value: String); 72 | begin 73 | end; 74 | 75 | end. 76 | -------------------------------------------------------------------------------- /src/text/Vue.Text.Style0.fmx: -------------------------------------------------------------------------------- 1 | inherited VueTextStyle0: TVueTextStyle0 2 | Align = Client 3 | object lytClient: TLayout 4 | Align = Client 5 | Size.Width = 350.000000000000000000 6 | Size.Height = 50.000000000000000000 7 | Size.PlatformDefault = False 8 | TabOrder = 2 9 | object rtgClient: TRectangle 10 | Align = Client 11 | Fill.Color = xFFEBEBEB 12 | Margins.Top = 8.000000000000000000 13 | Size.Width = 350.000000000000000000 14 | Size.Height = 42.000000000000000000 15 | Size.PlatformDefault = False 16 | Stroke.Color = xFF7F7F7F 17 | Stroke.Thickness = 0.500000000000000000 18 | XRadius = 3.000000000000000000 19 | YRadius = 3.000000000000000000 20 | OnMouseEnter = rtgClientMouseEnter 21 | OnMouseLeave = rtgClientMouseLeave 22 | object rtgStrokeColorAni: TColorAnimation 23 | AnimationType = InOut 24 | Duration = 0.200000002980232200 25 | Interpolation = Cubic 26 | PropertyName = 'Stroke.Color' 27 | StartValue = xFF7F7F7F 28 | StopValue = xFF226ABF 29 | end 30 | object lneEffect: TLine 31 | ClipParent = True 32 | LineType = Top 33 | Position.X = 6.000000000000000000 34 | Size.Width = 1.000000000000000000 35 | Size.Height = 3.000000000000000000 36 | Size.PlatformDefault = False 37 | Stroke.Color = claNull 38 | Stroke.Thickness = 5.000000000000000000 39 | object lneWidthAni: TFloatAnimation 40 | AnimationType = InOut 41 | Duration = 0.200000002980232200 42 | Interpolation = Cubic 43 | PropertyName = 'Width' 44 | StartValue = 0.000000000000000000 45 | StopValue = 93.000000000000000000 46 | end 47 | end 48 | end 49 | object edtText: TEdit 50 | Touch.InteractiveGestures = [LongTap, DoubleTap] 51 | Align = Client 52 | StyleLookup = 'transparentedit' 53 | TabOrder = 0 54 | TextSettings.Font.Family = 'Roboto' 55 | TextSettings.Font.Size = 16.000000000000000000 56 | Margins.Left = 8.000000000000000000 57 | Margins.Top = 15.000000000000000000 58 | Margins.Right = 8.000000000000000000 59 | Margins.Bottom = 4.000000000000000000 60 | Size.Width = 334.000000000000000000 61 | Size.Height = 31.000000000000000000 62 | Size.PlatformDefault = False 63 | StyledSettings = [Style, FontColor] 64 | OnEnter = edtTextEnter 65 | OnExit = edtTextExit 66 | OnMouseEnter = rtgClientMouseEnter 67 | OnMouseLeave = rtgClientMouseLeave 68 | end 69 | object lbCaption: TLabel 70 | AutoSize = True 71 | StyledSettings = [Style] 72 | Position.X = 11.000000000000000000 73 | Position.Y = 21.000000000000000000 74 | Scale.X = 1.299999952316284000 75 | Scale.Y = 1.299999952316284000 76 | Size.Width = 23.000000000000000000 77 | Size.Height = 15.000000000000000000 78 | Size.PlatformDefault = False 79 | TextSettings.Font.Family = 'Roboto' 80 | TextSettings.FontColor = xFF7F7F7F 81 | TextSettings.WordWrap = False 82 | Text = 'Text' 83 | TabOrder = 1 84 | object lbPosYAni: TFloatAnimation 85 | AnimationType = InOut 86 | Duration = 0.200000002980232200 87 | Interpolation = Cubic 88 | PropertyName = 'Position.Y' 89 | StartValue = 21.000000000000000000 90 | StopValue = 0.000000000000000000 91 | end 92 | object lbScaleYAni: TFloatAnimation 93 | AnimationType = InOut 94 | Duration = 0.200000002980232200 95 | Interpolation = Cubic 96 | PropertyName = 'Scale.Y' 97 | StartValue = 1.299999952316284000 98 | StopValue = 1.000000000000000000 99 | end 100 | object lbScaleXAni: TFloatAnimation 101 | AnimationType = InOut 102 | Duration = 0.200000002980232200 103 | Interpolation = Cubic 104 | PropertyName = 'Scale.X' 105 | StartValue = 1.299999952316284000 106 | StopValue = 1.000000000000000000 107 | end 108 | object lbColorAni: TColorAnimation 109 | AnimationType = InOut 110 | Duration = 0.200000002980232200 111 | Interpolation = Cubic 112 | PropertyName = 'TextSettings.FontColor' 113 | StartValue = xFF7F7F7F 114 | StopValue = xFF226ABF 115 | end 116 | end 117 | end 118 | end 119 | -------------------------------------------------------------------------------- /src/text/Vue.Text.Style0.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 25/02/2021 2 | unit Vue.Text.Style0; 3 | 4 | interface 5 | 6 | uses 7 | System.SysUtils, 8 | System.UITypes, 9 | System.Classes, 10 | FMX.Types, 11 | FMX.Controls, 12 | FMX.Forms, 13 | FMX.StdCtrls, 14 | FMX.Ani, 15 | FMX.Objects, 16 | FMX.Controls.Presentation, 17 | FMX.Edit, 18 | FMX.Layouts, 19 | Vue.Text.Base; 20 | 21 | type 22 | TVueTextStyle0 = class(TVueTextBase) 23 | edtText: TEdit; 24 | lbCaption: TLabel; 25 | lbPosYAni: TFloatAnimation; 26 | lytClient: TLayout; 27 | rtgClient: TRectangle; 28 | lneEffect: TLine; 29 | lneWidthAni: TFloatAnimation; 30 | lbScaleYAni: TFloatAnimation; 31 | lbScaleXAni: TFloatAnimation; 32 | lbColorAni: TColorAnimation; 33 | rtgStrokeColorAni: TColorAnimation; 34 | procedure edtTextEnter(Sender: TObject); 35 | procedure edtTextExit(Sender: TObject); 36 | procedure rtgClientMouseEnter(Sender: TObject); 37 | procedure rtgClientMouseLeave(Sender: TObject); 38 | protected 39 | function GetCaption: String; override; 40 | procedure SetCaption(const Value: String); override; 41 | function GetText: String; override; 42 | procedure SetText(const Value: String); override; 43 | function GetFocusColor: TAlphaColor; override; 44 | procedure SetFocusColor(const Value: TAlphaColor); override; 45 | end; 46 | 47 | implementation 48 | 49 | uses 50 | Vue.Utils; 51 | 52 | {$R *.fmx} 53 | 54 | procedure TVueTextStyle0.edtTextEnter(Sender: TObject); 55 | begin 56 | lbColorAni.Inverse := False; 57 | lbColorAni.Start; 58 | 59 | rtgStrokeColorAni.Inverse := False; 60 | rtgStrokeColorAni.Start; 61 | 62 | rtgClient.Fill.Color := RGB(235, 235, 235); 63 | rtgClient.Stroke.Thickness := 2; 64 | 65 | if not edtText.Text.IsEmpty then 66 | Exit; 67 | 68 | lbPosYAni.Inverse := False; 69 | lbPosYAni.Start; 70 | 71 | lneWidthAni.StopValue := lbCaption.Width + 10; 72 | lneWidthAni.Inverse := False; 73 | lneWidthAni.Start; 74 | 75 | lbScaleYAni.Inverse := False; 76 | lbScaleYAni.Start; 77 | 78 | lbScaleXAni.Inverse := False; 79 | lbScaleXAni.Start; 80 | end; 81 | 82 | procedure TVueTextStyle0.edtTextExit(Sender: TObject); 83 | begin 84 | lbColorAni.Inverse := True; 85 | lbColorAni.Start; 86 | 87 | rtgStrokeColorAni.Inverse := True; 88 | rtgStrokeColorAni.Start; 89 | 90 | rtgClient.Stroke.Thickness := 0.5; 91 | 92 | if not edtText.Text.IsEmpty then 93 | Exit; 94 | 95 | lbPosYAni.Inverse := True; 96 | lbPosYAni.Start; 97 | 98 | lneWidthAni.Inverse := True; 99 | lneWidthAni.Start; 100 | 101 | lbScaleYAni.Inverse := True; 102 | lbScaleYAni.Start; 103 | 104 | lbScaleXAni.Inverse := True; 105 | lbScaleXAni.Start; 106 | end; 107 | 108 | procedure TVueTextStyle0.rtgClientMouseEnter(Sender: TObject); 109 | begin 110 | if lbCaption.Position.Y = 0 then 111 | rtgClient.Fill.Color := RGB(235, 235, 235) 112 | else 113 | begin 114 | rtgClient.Fill.Color := RGB(220, 220, 220); 115 | rtgClient.Stroke.Color := TAlphaColors.Black; 116 | end; 117 | end; 118 | 119 | procedure TVueTextStyle0.rtgClientMouseLeave(Sender: TObject); 120 | begin 121 | rtgClient.Fill.Color := RGB(235, 235, 235); 122 | if lbCaption.Position.Y <> 0 then 123 | rtgClient.Stroke.Color := RGB(127, 127, 127); 124 | end; 125 | 126 | function TVueTextStyle0.GetCaption: String; 127 | begin 128 | Result := lbCaption.Text; 129 | end; 130 | 131 | procedure TVueTextStyle0.SetCaption(const Value: String); 132 | begin 133 | lbCaption.Text := Value; 134 | end; 135 | 136 | function TVueTextStyle0.GetText: String; 137 | begin 138 | Result := edtText.Text; 139 | end; 140 | 141 | procedure TVueTextStyle0.SetText(const Value: String); 142 | begin 143 | edtText.Text := Value; 144 | end; 145 | 146 | function TVueTextStyle0.GetFocusColor: TAlphaColor; 147 | begin 148 | Result := lbColorAni.StopValue; 149 | end; 150 | 151 | procedure TVueTextStyle0.SetFocusColor(const Value: TAlphaColor); 152 | begin 153 | lbColorAni.StopValue := Value; 154 | rtgStrokeColorAni.StopValue := Value; 155 | end; 156 | 157 | initialization 158 | TVueTextBase.RegisterVueTextStyle(TVueTextStyle0); 159 | 160 | end. 161 | -------------------------------------------------------------------------------- /src/text/Vue.Text.Style1.fmx: -------------------------------------------------------------------------------- 1 | inherited VueTextStyle1: TVueTextStyle1 2 | Align = Client 3 | object lytClient: TLayout 4 | Align = Client 5 | Size.Width = 350.000000000000000000 6 | Size.Height = 50.000000000000000000 7 | Size.PlatformDefault = False 8 | TabOrder = 2 9 | object rtgClient: TRectangle 10 | Align = Client 11 | Fill.Color = claNull 12 | Margins.Top = 8.000000000000000000 13 | Size.Width = 350.000000000000000000 14 | Size.Height = 42.000000000000000000 15 | Size.PlatformDefault = False 16 | Stroke.Color = xFF7F7F7F 17 | Stroke.Thickness = 0.500000000000000000 18 | XRadius = 3.000000000000000000 19 | YRadius = 3.000000000000000000 20 | OnMouseEnter = rtgClientMouseEnter 21 | OnMouseLeave = rtgClientMouseLeave 22 | object rtgStrokeColorAni: TColorAnimation 23 | AnimationType = InOut 24 | Duration = 0.200000002980232200 25 | Interpolation = Cubic 26 | PropertyName = 'Stroke.Color' 27 | StartValue = xFF7F7F7F 28 | StopValue = xFF226ABF 29 | end 30 | object lneEffect: TLine 31 | ClipParent = True 32 | LineType = Top 33 | Position.X = 6.000000000000000000 34 | Size.Width = 1.000000000000000000 35 | Size.Height = 3.000000000000000000 36 | Size.PlatformDefault = False 37 | Stroke.Color = claNull 38 | Stroke.Thickness = 5.000000000000000000 39 | object lneWidthAni: TFloatAnimation 40 | AnimationType = InOut 41 | Duration = 0.200000002980232200 42 | Interpolation = Cubic 43 | PropertyName = 'Width' 44 | StartValue = 0.000000000000000000 45 | StopValue = 93.000000000000000000 46 | end 47 | end 48 | end 49 | object edtText: TEdit 50 | Touch.InteractiveGestures = [LongTap, DoubleTap] 51 | Align = Client 52 | StyleLookup = 'transparentedit' 53 | TabOrder = 0 54 | TextSettings.Font.Family = 'Roboto' 55 | TextSettings.Font.Size = 16.000000000000000000 56 | Margins.Left = 8.000000000000000000 57 | Margins.Top = 15.000000000000000000 58 | Margins.Right = 8.000000000000000000 59 | Margins.Bottom = 4.000000000000000000 60 | Size.Width = 334.000000000000000000 61 | Size.Height = 31.000000000000000000 62 | Size.PlatformDefault = False 63 | StyledSettings = [Style, FontColor] 64 | OnEnter = edtTextEnter 65 | OnExit = edtTextExit 66 | OnMouseEnter = rtgClientMouseEnter 67 | OnMouseLeave = rtgClientMouseLeave 68 | end 69 | object lbCaption: TLabel 70 | AutoSize = True 71 | StyledSettings = [Style] 72 | Position.X = 11.000000000000000000 73 | Position.Y = 21.000000000000000000 74 | Scale.X = 1.299999952316284000 75 | Scale.Y = 1.299999952316284000 76 | Size.Width = 23.000000000000000000 77 | Size.Height = 15.000000000000000000 78 | Size.PlatformDefault = False 79 | TextSettings.Font.Family = 'Roboto' 80 | TextSettings.FontColor = xFF7F7F7F 81 | TextSettings.WordWrap = False 82 | Text = 'Text' 83 | TabOrder = 1 84 | object lbPosYAni: TFloatAnimation 85 | AnimationType = InOut 86 | Duration = 0.200000002980232200 87 | Interpolation = Cubic 88 | PropertyName = 'Position.Y' 89 | StartValue = 21.000000000000000000 90 | StopValue = 0.000000000000000000 91 | end 92 | object lbScaleYAni: TFloatAnimation 93 | AnimationType = InOut 94 | Duration = 0.200000002980232200 95 | Interpolation = Cubic 96 | PropertyName = 'Scale.Y' 97 | StartValue = 1.299999952316284000 98 | StopValue = 1.000000000000000000 99 | end 100 | object lbScaleXAni: TFloatAnimation 101 | AnimationType = InOut 102 | Duration = 0.200000002980232200 103 | Interpolation = Cubic 104 | PropertyName = 'Scale.X' 105 | StartValue = 1.299999952316284000 106 | StopValue = 1.000000000000000000 107 | end 108 | object lbColorAni: TColorAnimation 109 | AnimationType = InOut 110 | Duration = 0.200000002980232200 111 | Interpolation = Cubic 112 | PropertyName = 'TextSettings.FontColor' 113 | StartValue = xFF7F7F7F 114 | StopValue = xFF226ABF 115 | end 116 | end 117 | end 118 | end 119 | -------------------------------------------------------------------------------- /src/text/Vue.Text.Style1.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 25/02/2021 2 | unit Vue.Text.Style1; 3 | 4 | interface 5 | 6 | uses 7 | System.SysUtils, 8 | System.UITypes, 9 | System.Classes, 10 | FMX.Types, 11 | FMX.Controls, 12 | FMX.Forms, 13 | FMX.StdCtrls, 14 | FMX.Ani, 15 | FMX.Objects, 16 | FMX.Controls.Presentation, 17 | FMX.Edit, 18 | FMX.Layouts, 19 | Vue.Text.Base; 20 | 21 | type 22 | TVueTextStyle1 = class(TVueTextBase) 23 | edtText: TEdit; 24 | lbCaption: TLabel; 25 | lbPosYAni: TFloatAnimation; 26 | lytClient: TLayout; 27 | rtgClient: TRectangle; 28 | lneEffect: TLine; 29 | lneWidthAni: TFloatAnimation; 30 | lbScaleYAni: TFloatAnimation; 31 | lbScaleXAni: TFloatAnimation; 32 | lbColorAni: TColorAnimation; 33 | rtgStrokeColorAni: TColorAnimation; 34 | procedure edtTextEnter(Sender: TObject); 35 | procedure edtTextExit(Sender: TObject); 36 | procedure rtgClientMouseEnter(Sender: TObject); 37 | procedure rtgClientMouseLeave(Sender: TObject); 38 | protected 39 | function GetCaption: String; override; 40 | procedure SetCaption(const Value: String); override; 41 | function GetText: String; override; 42 | procedure SetText(const Value: String); override; 43 | function GetFocusColor: TAlphaColor; override; 44 | procedure SetFocusColor(const Value: TAlphaColor); override; 45 | end; 46 | 47 | implementation 48 | 49 | uses 50 | Vue.Utils; 51 | 52 | {$R *.fmx} 53 | 54 | procedure TVueTextStyle1.edtTextEnter(Sender: TObject); 55 | begin 56 | lbColorAni.Inverse := False; 57 | lbColorAni.Start; 58 | 59 | rtgStrokeColorAni.Inverse := False; 60 | rtgStrokeColorAni.Start; 61 | 62 | rtgClient.Stroke.Thickness := 2; 63 | 64 | if not edtText.Text.IsEmpty then 65 | Exit; 66 | 67 | lbPosYAni.Inverse := False; 68 | lbPosYAni.Start; 69 | 70 | lneWidthAni.StopValue := lbCaption.Width + 10; 71 | lneWidthAni.Inverse := False; 72 | lneWidthAni.Start; 73 | 74 | lbScaleYAni.Inverse := False; 75 | lbScaleYAni.Start; 76 | 77 | lbScaleXAni.Inverse := False; 78 | lbScaleXAni.Start; 79 | end; 80 | 81 | procedure TVueTextStyle1.edtTextExit(Sender: TObject); 82 | begin 83 | lbColorAni.Inverse := True; 84 | lbColorAni.Start; 85 | 86 | rtgStrokeColorAni.Inverse := True; 87 | rtgStrokeColorAni.Start; 88 | 89 | rtgClient.Stroke.Thickness := 0.5; 90 | 91 | if not edtText.Text.IsEmpty then 92 | Exit; 93 | 94 | lbPosYAni.Inverse := True; 95 | lbPosYAni.Start; 96 | 97 | lneWidthAni.Inverse := True; 98 | lneWidthAni.Start; 99 | 100 | lbScaleYAni.Inverse := True; 101 | lbScaleYAni.Start; 102 | 103 | lbScaleXAni.Inverse := True; 104 | lbScaleXAni.Start; 105 | end; 106 | 107 | procedure TVueTextStyle1.rtgClientMouseEnter(Sender: TObject); 108 | begin 109 | if lbCaption.Position.Y <> 0 then 110 | rtgClient.Stroke.Color := TAlphaColors.Black; 111 | end; 112 | 113 | procedure TVueTextStyle1.rtgClientMouseLeave(Sender: TObject); 114 | begin 115 | if lbCaption.Position.Y <> 0 then 116 | rtgClient.Stroke.Color := RGB(127, 127, 127); 117 | end; 118 | 119 | function TVueTextStyle1.GetCaption: String; 120 | begin 121 | Result := lbCaption.Text; 122 | end; 123 | 124 | procedure TVueTextStyle1.SetCaption(const Value: String); 125 | begin 126 | lbCaption.Text := Value; 127 | end; 128 | 129 | function TVueTextStyle1.GetText: String; 130 | begin 131 | Result := edtText.Text; 132 | end; 133 | 134 | procedure TVueTextStyle1.SetText(const Value: String); 135 | begin 136 | edtText.Text := Value; 137 | end; 138 | 139 | function TVueTextStyle1.GetFocusColor: TAlphaColor; 140 | begin 141 | Result := lbColorAni.StopValue; 142 | end; 143 | 144 | procedure TVueTextStyle1.SetFocusColor(const Value: TAlphaColor); 145 | begin 146 | lbColorAni.StopValue := Value; 147 | rtgStrokeColorAni.StopValue := Value; 148 | end; 149 | 150 | initialization 151 | TVueTextBase.RegisterVueTextStyle(TVueTextStyle1); 152 | 153 | end. 154 | -------------------------------------------------------------------------------- /src/text/Vue.Text.Style2.fmx: -------------------------------------------------------------------------------- 1 | inherited VueTextStyle2: TVueTextStyle2 2 | Align = Client 3 | OnMouseEnter = rtgClientMouseEnter 4 | OnMouseLeave = rtgClientMouseLeave 5 | object lytClient: TLayout 6 | Align = Client 7 | Size.Width = 350.000000000000000000 8 | Size.Height = 50.000000000000000000 9 | Size.PlatformDefault = False 10 | TabOrder = 2 11 | object edtText: TEdit 12 | Touch.InteractiveGestures = [LongTap, DoubleTap] 13 | Align = Client 14 | StyleLookup = 'transparentedit' 15 | TabOrder = 0 16 | TextSettings.Font.Family = 'Roboto' 17 | TextSettings.Font.Size = 16.000000000000000000 18 | Margins.Left = 4.000000000000000000 19 | Margins.Top = 16.000000000000000000 20 | Margins.Right = 4.000000000000000000 21 | Margins.Bottom = 3.000000000000000000 22 | Size.Width = 342.000000000000000000 23 | Size.Height = 26.000000000000000000 24 | Size.PlatformDefault = False 25 | StyledSettings = [Style, FontColor] 26 | OnEnter = edtTextEnter 27 | OnExit = edtTextExit 28 | OnMouseEnter = rtgClientMouseEnter 29 | OnMouseLeave = rtgClientMouseLeave 30 | end 31 | object lbCaption: TLabel 32 | AutoSize = True 33 | StyledSettings = [Style] 34 | Position.X = 5.000000000000000000 35 | Position.Y = 21.000000000000000000 36 | Scale.X = 1.299999952316284000 37 | Scale.Y = 1.299999952316284000 38 | Size.Width = 23.000000000000000000 39 | Size.Height = 15.000000000000000000 40 | Size.PlatformDefault = False 41 | TextSettings.Font.Family = 'Roboto' 42 | TextSettings.FontColor = xFF7F7F7F 43 | TextSettings.WordWrap = False 44 | Text = 'Text' 45 | TabOrder = 1 46 | object lbPosYAni: TFloatAnimation 47 | AnimationType = InOut 48 | Duration = 0.200000002980232200 49 | Interpolation = Cubic 50 | PropertyName = 'Position.Y' 51 | StartValue = 21.000000000000000000 52 | StopValue = 0.000000000000000000 53 | end 54 | object lbScaleYAni: TFloatAnimation 55 | AnimationType = InOut 56 | Duration = 0.200000002980232200 57 | Interpolation = Cubic 58 | PropertyName = 'Scale.Y' 59 | StartValue = 1.299999952316284000 60 | StopValue = 1.000000000000000000 61 | end 62 | object lbScaleXAni: TFloatAnimation 63 | AnimationType = InOut 64 | Duration = 0.200000002980232200 65 | Interpolation = Cubic 66 | PropertyName = 'Scale.X' 67 | StartValue = 1.299999952316284000 68 | StopValue = 1.000000000000000000 69 | end 70 | object lbColorAni: TColorAnimation 71 | AnimationType = InOut 72 | Duration = 0.200000002980232200 73 | Interpolation = Cubic 74 | PropertyName = 'TextSettings.FontColor' 75 | StartValue = xFF7F7F7F 76 | StopValue = xFF226ABF 77 | end 78 | end 79 | object lytBottom: TLayout 80 | Align = Bottom 81 | Margins.Left = 5.000000000000000000 82 | Margins.Right = 5.000000000000000000 83 | Position.X = 5.000000000000000000 84 | Position.Y = 45.000000000000000000 85 | Size.Width = 340.000000000000000000 86 | Size.Height = 5.000000000000000000 87 | Size.PlatformDefault = False 88 | TabOrder = 2 89 | object lneBottom: TLine 90 | Align = Center 91 | LineType = Bottom 92 | Size.Width = 340.000000000000000000 93 | Size.Height = 5.000000000000000000 94 | Size.PlatformDefault = False 95 | Stroke.Thickness = 0.500000000000000000 96 | end 97 | object lneEffect: TLine 98 | Align = Center 99 | LineType = Bottom 100 | Size.Width = 1.000000000000000000 101 | Size.Height = 5.000000000000000000 102 | Size.PlatformDefault = False 103 | Stroke.Thickness = 2.000000000000000000 104 | object lneWidthAni: TFloatAnimation 105 | AnimationType = InOut 106 | Duration = 0.200000002980232200 107 | Interpolation = Cubic 108 | PropertyName = 'Width' 109 | StartValue = 0.000000000000000000 110 | StopValue = 340.000000000000000000 111 | end 112 | object lneStrokeColorAni: TColorAnimation 113 | AnimationType = InOut 114 | Duration = 0.200000002980232200 115 | Interpolation = Cubic 116 | PropertyName = 'Stroke.Color' 117 | StartValue = claBlack 118 | StopValue = xFF226ABF 119 | end 120 | end 121 | end 122 | end 123 | end 124 | -------------------------------------------------------------------------------- /src/text/Vue.Text.Style2.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 25/02/2021 2 | unit Vue.Text.Style2; 3 | 4 | interface 5 | 6 | uses 7 | System.SysUtils, 8 | System.UITypes, 9 | System.Classes, 10 | FMX.Types, 11 | FMX.Controls, 12 | FMX.Forms, 13 | FMX.StdCtrls, 14 | FMX.Ani, 15 | FMX.Objects, 16 | FMX.Controls.Presentation, 17 | FMX.Edit, 18 | FMX.Layouts, 19 | Vue.Text.Base; 20 | 21 | type 22 | TVueTextStyle2 = class(TVueTextBase) 23 | edtText: TEdit; 24 | lbCaption: TLabel; 25 | lbPosYAni: TFloatAnimation; 26 | lytClient: TLayout; 27 | lbScaleYAni: TFloatAnimation; 28 | lbScaleXAni: TFloatAnimation; 29 | lbColorAni: TColorAnimation; 30 | lneBottom: TLine; 31 | lneEffect: TLine; 32 | lytBottom: TLayout; 33 | lneWidthAni: TFloatAnimation; 34 | lneStrokeColorAni: TColorAnimation; 35 | procedure edtTextEnter(Sender: TObject); 36 | procedure edtTextExit(Sender: TObject); 37 | procedure rtgClientMouseEnter(Sender: TObject); 38 | procedure rtgClientMouseLeave(Sender: TObject); 39 | protected 40 | function GetCaption: String; override; 41 | procedure SetCaption(const Value: String); override; 42 | function GetText: String; override; 43 | procedure SetText(const Value: String); override; 44 | function GetFocusColor: TAlphaColor; override; 45 | procedure SetFocusColor(const Value: TAlphaColor); override; 46 | end; 47 | 48 | implementation 49 | 50 | uses 51 | Vue.Utils; 52 | 53 | {$R *.fmx} 54 | 55 | procedure TVueTextStyle2.edtTextEnter(Sender: TObject); 56 | begin 57 | lbColorAni.Inverse := False; 58 | lbColorAni.Start; 59 | 60 | lneWidthAni.Inverse := False; 61 | lneWidthAni.Start; 62 | 63 | lneStrokeColorAni.Inverse := False; 64 | lneStrokeColorAni.Start; 65 | 66 | if not edtText.Text.IsEmpty then 67 | Exit; 68 | 69 | lbPosYAni.Inverse := False; 70 | lbPosYAni.Start; 71 | 72 | lbScaleYAni.Inverse := False; 73 | lbScaleYAni.Start; 74 | 75 | lbScaleXAni.Inverse := False; 76 | lbScaleXAni.Start; 77 | end; 78 | 79 | procedure TVueTextStyle2.edtTextExit(Sender: TObject); 80 | begin 81 | lbColorAni.Inverse := True; 82 | lbColorAni.Start; 83 | 84 | lneWidthAni.Inverse := True; 85 | lneWidthAni.Start; 86 | 87 | lneStrokeColorAni.Inverse := True; 88 | lneStrokeColorAni.Start; 89 | 90 | if not edtText.Text.IsEmpty then 91 | Exit; 92 | 93 | lbPosYAni.Inverse := True; 94 | lbPosYAni.Start; 95 | 96 | lbScaleYAni.Inverse := True; 97 | lbScaleYAni.Start; 98 | 99 | lbScaleXAni.Inverse := True; 100 | lbScaleXAni.Start; 101 | end; 102 | 103 | procedure TVueTextStyle2.rtgClientMouseEnter(Sender: TObject); 104 | begin 105 | if lbCaption.Position.Y <> 0 then 106 | lneBottom.Stroke.Color := TAlphaColors.Black; 107 | end; 108 | 109 | procedure TVueTextStyle2.rtgClientMouseLeave(Sender: TObject); 110 | begin 111 | if lbCaption.Position.Y <> 0 then 112 | lneBottom.Stroke.Color := RGB(127, 127, 127); 113 | end; 114 | 115 | function TVueTextStyle2.GetCaption: String; 116 | begin 117 | Result := lbCaption.Text; 118 | end; 119 | 120 | procedure TVueTextStyle2.SetCaption(const Value: String); 121 | begin 122 | lbCaption.Text := Value; 123 | end; 124 | 125 | function TVueTextStyle2.GetText: String; 126 | begin 127 | Result := edtText.Text; 128 | end; 129 | 130 | procedure TVueTextStyle2.SetText(const Value: String); 131 | begin 132 | edtText.Text := Value; 133 | end; 134 | 135 | function TVueTextStyle2.GetFocusColor: TAlphaColor; 136 | begin 137 | Result := lbColorAni.StopValue; 138 | end; 139 | 140 | procedure TVueTextStyle2.SetFocusColor(const Value: TAlphaColor); 141 | begin 142 | lbColorAni.StopValue := Value; 143 | lneStrokeColorAni.StopValue := Value; 144 | end; 145 | 146 | initialization 147 | TVueTextBase.RegisterVueTextStyle(TVueTextStyle2); 148 | 149 | end. 150 | -------------------------------------------------------------------------------- /src/text/Vue.Text.Style3.fmx: -------------------------------------------------------------------------------- 1 | inherited VueTextStyle3: TVueTextStyle3 2 | Align = Client 3 | object lytClient: TLayout 4 | Align = Client 5 | Size.Width = 350.000000000000000000 6 | Size.Height = 50.000000000000000000 7 | Size.PlatformDefault = False 8 | TabOrder = 2 9 | object rtgClient: TRectangle 10 | Align = Client 11 | Fill.Color = claNull 12 | Margins.Top = 8.000000000000000000 13 | Size.Width = 350.000000000000000000 14 | Size.Height = 42.000000000000000000 15 | Size.PlatformDefault = False 16 | Stroke.Color = xFF7F7F7F 17 | Stroke.Thickness = 0.500000000000000000 18 | XRadius = 3.000000000000000000 19 | YRadius = 3.000000000000000000 20 | object rtgClientClient: TRectangle 21 | Align = Client 22 | Fill.Color = claWhite 23 | Size.Width = 350.000000000000000000 24 | Size.Height = 42.000000000000000000 25 | Size.PlatformDefault = False 26 | Stroke.Color = claNull 27 | Stroke.Thickness = 0.500000000000000000 28 | XRadius = 3.000000000000000000 29 | YRadius = 3.000000000000000000 30 | end 31 | object rtgShadow: TShadowEffect 32 | Distance = 1.500000000000000000 33 | Direction = 90.000000000000000000 34 | Softness = 0.100000001490116100 35 | Opacity = 0.500000000000000000 36 | ShadowColor = claBlack 37 | end 38 | end 39 | object lbCaption: TLabel 40 | AutoSize = True 41 | StyledSettings = [Style] 42 | Position.X = 11.000000000000000000 43 | Position.Y = 21.000000000000000000 44 | Scale.X = 1.299999952316284000 45 | Scale.Y = 1.299999952316284000 46 | Size.Width = 23.000000000000000000 47 | Size.Height = 15.000000000000000000 48 | Size.PlatformDefault = False 49 | TextSettings.Font.Family = 'Roboto' 50 | TextSettings.FontColor = xFF7F7F7F 51 | TextSettings.WordWrap = False 52 | Text = 'Text' 53 | TabOrder = 0 54 | end 55 | object edtText: TEdit 56 | Touch.InteractiveGestures = [LongTap, DoubleTap] 57 | Align = Client 58 | StyleLookup = 'transparentedit' 59 | TabOrder = 1 60 | TextSettings.Font.Family = 'Roboto' 61 | TextSettings.Font.Size = 16.000000000000000000 62 | Margins.Left = 8.000000000000000000 63 | Margins.Top = 15.000000000000000000 64 | Margins.Right = 8.000000000000000000 65 | Margins.Bottom = 4.000000000000000000 66 | Size.Width = 334.000000000000000000 67 | Size.Height = 31.000000000000000000 68 | Size.PlatformDefault = False 69 | StyledSettings = [Style, FontColor] 70 | OnEnter = edtTextEnter 71 | OnExit = edtTextExit 72 | end 73 | end 74 | end 75 | -------------------------------------------------------------------------------- /src/text/Vue.Text.Style3.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 25/02/2021 2 | unit Vue.Text.Style3; 3 | 4 | interface 5 | 6 | uses 7 | System.SysUtils, 8 | System.UITypes, 9 | System.Classes, 10 | FMX.Types, 11 | FMX.Controls, 12 | FMX.Forms, 13 | FMX.StdCtrls, 14 | FMX.Ani, 15 | FMX.Objects, 16 | FMX.Controls.Presentation, 17 | FMX.Edit, 18 | FMX.Layouts, 19 | Vue.Text.Base, 20 | FMX.Effects; 21 | 22 | type 23 | TVueTextStyle3 = class(TVueTextBase) 24 | edtText: TEdit; 25 | lbCaption: TLabel; 26 | lytClient: TLayout; 27 | rtgClient: TRectangle; 28 | rtgShadow: TShadowEffect; 29 | procedure edtTextEnter(Sender: TObject); 30 | procedure edtTextExit(Sender: TObject); 31 | protected 32 | function GetCaption: String; override; 33 | procedure SetCaption(const Value: String); override; 34 | function GetText: String; override; 35 | procedure SetText(const Value: String); override; 36 | end; 37 | 38 | implementation 39 | 40 | uses 41 | Vue.Utils; 42 | 43 | {$R *.fmx} 44 | 45 | procedure TVueTextStyle3.edtTextEnter(Sender: TObject); 46 | begin 47 | lbCaption.Visible := False; 48 | end; 49 | 50 | procedure TVueTextStyle3.edtTextExit(Sender: TObject); 51 | begin 52 | if edtText.Text.IsEmpty then 53 | lbCaption.Visible := True 54 | end; 55 | 56 | function TVueTextStyle3.GetCaption: String; 57 | begin 58 | Result := lbCaption.Text; 59 | end; 60 | 61 | procedure TVueTextStyle3.SetCaption(const Value: String); 62 | begin 63 | lbCaption.Text := Value; 64 | end; 65 | 66 | function TVueTextStyle3.GetText: String; 67 | begin 68 | Result := edtText.Text; 69 | end; 70 | 71 | procedure TVueTextStyle3.SetText(const Value: String); 72 | begin 73 | edtText.Text := Value; 74 | end; 75 | 76 | 77 | initialization 78 | TVueTextBase.RegisterVueTextStyle(TVueTextStyle3); 79 | 80 | end. 81 | -------------------------------------------------------------------------------- /src/text/Vue.Text.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 25/02/2021 2 | unit Vue.Text; 3 | 4 | interface 5 | 6 | uses 7 | FMX.Controls, 8 | System.Classes, 9 | System.UITypes, 10 | Vue.Utils, 11 | Vue.Text.Base, 12 | // Styles 13 | Vue.Text.Style0, 14 | Vue.Text.Style1, 15 | Vue.Text.Style2, 16 | Vue.Text.Style3; 17 | 18 | type 19 | [ComponentPlatformsAttribute(pidAllPlatforms)] 20 | TVueText = class(TControl) 21 | private 22 | FFrame: TVueTextBase; 23 | FStyle: Integer; 24 | FCaption: String; 25 | FText: String; 26 | FFocusColor: TAlphaColor; 27 | function GetCaption: String; 28 | procedure SetCaption(const Value: String); 29 | procedure SetStyle(const Value: Integer); 30 | function GetText: String; 31 | procedure SetText(const Value: String); 32 | procedure SetFocusColor(const Value: TAlphaColor); 33 | public 34 | constructor Create(AOwner: TComponent); override; 35 | destructor Destroy; override; 36 | published 37 | property Align; 38 | property Margins; 39 | property Anchors; 40 | property Position; 41 | property Width; 42 | property Height; 43 | property Size; 44 | property Caption: String read GetCaption write SetCaption; 45 | property Text: String read GetText write SetText; 46 | property FocusColor: TAlphaColor read FFocusColor write SetFocusColor; 47 | property Style: Integer read FStyle write SetStyle; 48 | end; 49 | 50 | implementation 51 | 52 | { TVueText } 53 | 54 | constructor TVueText.Create(AOwner: TComponent); 55 | begin 56 | inherited Create(AOwner); 57 | Style := 0; 58 | Width := 350; 59 | Height := 50; 60 | FocusColor := RGB(34, 106, 191); 61 | end; 62 | 63 | destructor TVueText.Destroy; 64 | begin 65 | FFrame.Free; 66 | inherited; 67 | end; 68 | 69 | function TVueText.GetCaption: String; 70 | begin 71 | Result := FCaption; 72 | end; 73 | 74 | procedure TVueText.SetCaption(const Value: String); 75 | begin 76 | FCaption := Value; 77 | FFrame.Caption := Value; 78 | end; 79 | 80 | function TVueText.GetText: String; 81 | begin 82 | Result := FText; 83 | end; 84 | 85 | procedure TVueText.SetText(const Value: String); 86 | begin 87 | FText := Value; 88 | FFrame.Text := Value; 89 | end; 90 | 91 | procedure TVueText.SetFocusColor(const Value: TAlphaColor); 92 | begin 93 | FFocusColor := Value; 94 | FFrame.FocusColor := Value; 95 | end; 96 | 97 | procedure TVueText.SetStyle(const Value: Integer); 98 | begin 99 | FStyle := Value; 100 | 101 | if Assigned(FFrame) then 102 | FFrame.Free; 103 | 104 | FFrame := TVueTextBase(TVueTextBase.VueTextStyle(Value).Create).Create(Self); 105 | FFrame.Stored := False; 106 | Self.AddObject(FFrame); 107 | 108 | FFrame.Caption := FCaption; 109 | FFrame.Text := FText; 110 | FFrame.FocusColor := FFocusColor; 111 | end; 112 | 113 | end. 114 | -------------------------------------------------------------------------------- /src/tooltip/Vue.Tooltip.Base.fmx: -------------------------------------------------------------------------------- 1 | object VueTooltipBase: TVueTooltipBase 2 | Size.Width = 80.000000000000000000 3 | Size.Height = 30.000000000000000000 4 | Size.PlatformDefault = False 5 | end 6 | -------------------------------------------------------------------------------- /src/tooltip/Vue.Tooltip.Base.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 28/02/2021 2 | unit Vue.Tooltip.Base; 3 | 4 | interface 5 | 6 | uses 7 | System.Classes, 8 | FMX.Forms; 9 | 10 | type 11 | TVueTooltipBase = class(TFrame) 12 | private 13 | class var VueTooltipStyles: TArray; 14 | protected 15 | function GetCaption: String; virtual; 16 | procedure SetCaption(const Value: String); virtual; 17 | public 18 | class procedure RegisterVueTooltipStyle(FrameClass: TPersistentClass); 19 | class function VueTooltipStyle(Index: Integer): TPersistentClass; 20 | published 21 | property Caption: String read GetCaption write SetCaption; 22 | procedure Show; reintroduce; virtual; 23 | procedure Hide; reintroduce; virtual; 24 | end; 25 | 26 | implementation 27 | 28 | {$R *.fmx} 29 | 30 | { TVueTooltipBase } 31 | 32 | class procedure TVueTooltipBase.RegisterVueTooltipStyle(FrameClass: TPersistentClass); 33 | begin 34 | SetLength(TVueTooltipBase.VueTooltipStyles, Succ(Length(TVueTooltipBase.VueTooltipStyles))); 35 | TVueTooltipBase.VueTooltipStyles[Pred(Length(TVueTooltipBase.VueTooltipStyles))] := FrameClass; 36 | end; 37 | 38 | class function TVueTooltipBase.VueTooltipStyle(Index: Integer): TPersistentClass; 39 | begin 40 | if (Index > Pred(Length(TVueTooltipBase.VueTooltipStyles))) or (Index < 0) then 41 | Index := 0; 42 | Result := TVueTooltipBase.VueTooltipStyles[Index]; 43 | end; 44 | 45 | function TVueTooltipBase.GetCaption: String; 46 | begin 47 | end; 48 | 49 | procedure TVueTooltipBase.SetCaption(const Value: String); 50 | begin 51 | end; 52 | 53 | procedure TVueTooltipBase.Show; 54 | begin 55 | end; 56 | 57 | procedure TVueTooltipBase.Hide; 58 | begin 59 | end; 60 | 61 | end. 62 | -------------------------------------------------------------------------------- /src/tooltip/Vue.Tooltip.Style0.fmx: -------------------------------------------------------------------------------- 1 | inherited VueTooltipStyle0: TVueTooltipStyle0 2 | Align = Client 3 | object lytClient: TLayout 4 | Align = Client 5 | Size.Width = 80.000000000000000000 6 | Size.Height = 30.000000000000000000 7 | Size.PlatformDefault = False 8 | TabOrder = 2 9 | object rtgClient: TRectangle 10 | Align = Client 11 | Fill.Color = claBlack 12 | Opacity = 0.600000023841857900 13 | Size.Width = 80.000000000000000000 14 | Size.Height = 30.000000000000000000 15 | Size.PlatformDefault = False 16 | Stroke.Kind = None 17 | Stroke.Thickness = 0.500000000000000000 18 | XRadius = 3.000000000000000000 19 | YRadius = 3.000000000000000000 20 | end 21 | object lbCaption: TLabel 22 | Align = Client 23 | StyledSettings = [Style] 24 | Scale.X = 1.299999952316284000 25 | Scale.Y = 1.299999952316284000 26 | Size.Width = 61.538463592529300000 27 | Size.Height = 23.076923370361330000 28 | Size.PlatformDefault = False 29 | TextSettings.Font.Family = 'Roboto' 30 | TextSettings.Font.Size = 10.000000000000000000 31 | TextSettings.FontColor = claWhite 32 | TextSettings.HorzAlign = Center 33 | TextSettings.WordWrap = False 34 | Text = 'Tooltip' 35 | TabOrder = 0 36 | end 37 | object lytScaleXAni: TFloatAnimation 38 | AnimationType = InOut 39 | Duration = 0.200000002980232200 40 | Interpolation = Cubic 41 | PropertyName = 'Scale.X' 42 | StartValue = 0.000000000000000000 43 | StopValue = 1.000000000000000000 44 | end 45 | object lytScaleYAni: TFloatAnimation 46 | AnimationType = InOut 47 | Duration = 0.200000002980232200 48 | Interpolation = Cubic 49 | PropertyName = 'Scale.Y' 50 | StartValue = 0.000000000000000000 51 | StopValue = 1.000000000000000000 52 | end 53 | object lytPositionXAni: TFloatAnimation 54 | AnimationType = InOut 55 | Duration = 0.200000002980232200 56 | Interpolation = Cubic 57 | PropertyName = 'Position.X' 58 | StartValue = 0.000000000000000000 59 | StopValue = 0.000000000000000000 60 | end 61 | object lytPositionYAni: TFloatAnimation 62 | AnimationType = InOut 63 | Duration = 0.200000002980232200 64 | Interpolation = Cubic 65 | PropertyName = 'Position.Y' 66 | StartValue = 0.000000000000000000 67 | StopValue = 0.000000000000000000 68 | end 69 | object lytOpacityAni: TFloatAnimation 70 | AnimationType = InOut 71 | Duration = 0.500000000000000000 72 | Interpolation = Cubic 73 | PropertyName = 'Opacity' 74 | StartValue = 1.000000000000000000 75 | StopValue = 0.000000000000000000 76 | end 77 | end 78 | end 79 | -------------------------------------------------------------------------------- /src/tooltip/Vue.Tooltip.Style0.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 28/02/2021 2 | unit Vue.Tooltip.Style0; 3 | 4 | interface 5 | 6 | uses 7 | System.SysUtils, 8 | System.UITypes, 9 | System.Classes, 10 | System.Math, 11 | FMX.Types, 12 | FMX.Controls, 13 | FMX.Forms, 14 | FMX.StdCtrls, 15 | FMX.Ani, 16 | FMX.Objects, 17 | FMX.Controls.Presentation, 18 | FMX.Edit, 19 | FMX.Layouts, 20 | Vue.Tooltip.Base, 21 | FMX.Effects; 22 | 23 | type 24 | [ComponentPlatformsAttribute(pidAllPlatforms)] 25 | TVueTooltipStyle0 = class(TVueTooltipBase) 26 | lytClient: TLayout; 27 | rtgClient: TRectangle; 28 | lbCaption: TLabel; 29 | lytScaleXAni: TFloatAnimation; 30 | lytScaleYAni: TFloatAnimation; 31 | lytPositionXAni: TFloatAnimation; 32 | lytPositionYAni: TFloatAnimation; 33 | lytOpacityAni: TFloatAnimation; 34 | private 35 | FShowing: Boolean; 36 | protected 37 | function GetCaption: String; override; 38 | procedure SetCaption(const Value: String); override; 39 | published 40 | procedure Show; override; 41 | procedure Hide; override; 42 | public 43 | constructor Create(AOwner: TComponent); override; 44 | end; 45 | 46 | implementation 47 | 48 | uses 49 | Vue.Utils; 50 | 51 | {$R *.fmx} 52 | 53 | constructor TVueTooltipStyle0.Create(AOwner: TComponent); 54 | begin 55 | inherited; 56 | Visible := (csDesigning in ComponentState); 57 | FShowing := False; 58 | end; 59 | 60 | function TVueTooltipStyle0.GetCaption: String; 61 | begin 62 | Result := lbCaption.Text; 63 | end; 64 | 65 | procedure TVueTooltipStyle0.SetCaption(const Value: String); 66 | begin 67 | lbCaption.Text := Value; 68 | end; 69 | 70 | procedure TVueTooltipStyle0.Show; 71 | begin 72 | if FShowing then 73 | Exit; 74 | 75 | FShowing := True; 76 | 77 | lytClient.Opacity := 1; 78 | 79 | Visible := True; 80 | 81 | lytScaleXAni.Start; 82 | lytScaleYAni.Start; 83 | 84 | lytPositionYAni.StartValue := Self.Height / 2; 85 | lytPositionYAni.StopValue := 0; 86 | lytPositionYAni.Start; 87 | 88 | 89 | lytPositionXAni.StartValue := Self.Width / 2; 90 | lytPositionXAni.StopValue := 0; 91 | lytPositionXAni.Start; 92 | end; 93 | 94 | procedure TVueTooltipStyle0.Hide; 95 | begin 96 | if not FShowing then 97 | Exit; 98 | 99 | FShowing := False; 100 | 101 | lytOpacityAni.Start; 102 | end; 103 | 104 | initialization 105 | TVueTooltipBase.RegisterVueTooltipStyle(TVueTooltipStyle0); 106 | 107 | end. 108 | -------------------------------------------------------------------------------- /src/tooltip/Vue.Tooltip.pas: -------------------------------------------------------------------------------- 1 | // Eduardo - 28/02/2021 2 | unit Vue.Tooltip; 3 | 4 | interface 5 | 6 | uses 7 | FMX.Controls, 8 | System.Classes, 9 | Vue.Tooltip.Base, 10 | // Styles 11 | Vue.Tooltip.Style0; 12 | 13 | type 14 | TVueTooltip = class(TControl) 15 | private 16 | FFrame: TVueTooltipBase; 17 | FStyle: Integer; 18 | FCaption: String; 19 | function GetCaption: String; 20 | procedure SetCaption(const Value: String); 21 | procedure SetStyle(const Value: Integer); 22 | public 23 | constructor Create(AOwner: TComponent); override; 24 | destructor Destroy; override; 25 | procedure Show; override; 26 | procedure Hide; override; 27 | published 28 | property Align; 29 | property Anchors; 30 | property Position; 31 | property Width; 32 | property Height; 33 | property Size; 34 | property Caption: String read GetCaption write SetCaption; 35 | property Style: Integer read FStyle write SetStyle; 36 | end; 37 | 38 | implementation 39 | 40 | { TVueTooltip } 41 | 42 | constructor TVueTooltip.Create(AOwner: TComponent); 43 | begin 44 | inherited Create(AOwner); 45 | Style := 0; 46 | Width := 80; 47 | Height := 30; 48 | end; 49 | 50 | destructor TVueTooltip.Destroy; 51 | begin 52 | FFrame.Free; 53 | inherited; 54 | end; 55 | 56 | function TVueTooltip.GetCaption: String; 57 | begin 58 | Result := FCaption; 59 | end; 60 | 61 | procedure TVueTooltip.SetCaption(const Value: String); 62 | begin 63 | FCaption := Value; 64 | FFrame.Caption := Value; 65 | end; 66 | 67 | procedure TVueTooltip.Show; 68 | begin 69 | FFrame.Show; 70 | end; 71 | 72 | procedure TVueTooltip.Hide; 73 | begin 74 | FFrame.Hide; 75 | end; 76 | 77 | procedure TVueTooltip.SetStyle(const Value: Integer); 78 | begin 79 | FStyle := Value; 80 | 81 | if Assigned(FFrame) then 82 | FFrame.Free; 83 | 84 | FFrame := TVueTooltipBase(TVueTooltipBase.VueTooltipStyle(Value).Create).Create(Self); 85 | FFrame.Stored := False; 86 | Self.AddObject(FFrame); 87 | 88 | FFrame.Caption := FCaption; 89 | end; 90 | 91 | end. 92 | --------------------------------------------------------------------------------