@quidgest/ui 0.14.1 → 0.14.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/manifest/components.json +1 -0
  2. package/dist/ui.css +105 -0
  3. package/dist/ui.esm.js +762 -681
  4. package/dist/ui.js +3 -3
  5. package/dist/ui.min.css +1 -1
  6. package/dist/ui.min.js +91 -90
  7. package/dist/ui.scss +101 -1
  8. package/esm/components/QButtonToggle/QButtonToggle.d.ts.map +1 -1
  9. package/esm/components/QButtonToggle/QButtonToggle.vue.js +26 -23
  10. package/esm/components/QCheckbox/QCheckbox.d.ts +20 -0
  11. package/esm/components/QCheckbox/QCheckbox.d.ts.map +1 -0
  12. package/esm/components/QCheckbox/QCheckbox.vue.js +105 -0
  13. package/esm/components/QCheckbox/QCheckbox.vue2.js +4 -0
  14. package/esm/components/QCheckbox/index.d.ts +4 -0
  15. package/esm/components/QCheckbox/index.d.ts.map +1 -0
  16. package/esm/components/QCheckbox/index.js +6 -0
  17. package/esm/components/QCheckbox/types.d.ts +47 -0
  18. package/esm/components/QCheckbox/types.d.ts.map +1 -0
  19. package/esm/components/QCheckbox/types.js +11 -0
  20. package/esm/components/QCombobox/QCombobox.d.ts +1 -1
  21. package/esm/components/QPropertyList/QPropertyList.d.ts +1 -1
  22. package/esm/components/QPropertyList/QPropertyList.vue.js +1 -1
  23. package/esm/components/QPropertyList/QPropertyListRow.d.ts.map +1 -1
  24. package/esm/components/QPropertyList/QPropertyListRow.vue.js +28 -25
  25. package/esm/components/QPropertyList/types.d.ts +5 -9
  26. package/esm/components/QPropertyList/types.d.ts.map +1 -1
  27. package/esm/components/QSelect/QSelect.d.ts +1 -1
  28. package/esm/components/QTooltip/QTooltip.d.ts +1 -0
  29. package/esm/components/QTooltip/QTooltip.d.ts.map +1 -1
  30. package/esm/components/QTooltip/QTooltip.vue.js +1 -1
  31. package/esm/components/QTooltip/types.d.ts +1 -1
  32. package/esm/components/QTooltip/types.d.ts.map +1 -1
  33. package/esm/components/index.d.ts +1 -0
  34. package/esm/components/index.d.ts.map +1 -1
  35. package/esm/components/index.js +42 -40
  36. package/esm/index.d.ts +1 -0
  37. package/package.json +24 -22
@@ -3,6 +3,7 @@
3
3
  "QButton",
4
4
  "QButtonGroup",
5
5
  "QButtonToggle",
6
+ "QCheckbox",
6
7
  "QCombobox",
7
8
  "QDialog",
8
9
  "QField",
package/dist/ui.css CHANGED
@@ -547,6 +547,111 @@ body *::-webkit-scrollbar-track {
547
547
  z-index: 3;
548
548
  }
549
549
 
550
+ .q-checkbox {
551
+ --box-size: 1.15rem;
552
+ --icon-color: var(--q-theme-on-primary);
553
+ --icon-opacity: 0;
554
+ display: flex;
555
+ align-items: center;
556
+ gap: 0.5rem;
557
+ width: -moz-fit-content;
558
+ width: fit-content;
559
+ color: var(--q-theme-neutral-dark);
560
+ cursor: pointer;
561
+ }
562
+ .q-checkbox__input {
563
+ position: relative;
564
+ width: var(--box-size);
565
+ height: var(--box-size);
566
+ border: 1px solid var(--q-theme-neutral-light);
567
+ border-radius: 0.25rem;
568
+ transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
569
+ background-color: transparent;
570
+ flex-shrink: 0;
571
+ cursor: inherit;
572
+ }
573
+ .q-checkbox__input:hover:not(:disabled) {
574
+ border-color: var(--active-color);
575
+ }
576
+ .q-checkbox__input:focus:not(:disabled) {
577
+ outline: 0;
578
+ }
579
+ .q-checkbox__input:focus-visible:not(:disabled) {
580
+ outline: 2px solid rgb(var(--q-theme-info-rgb)/0.5);
581
+ }
582
+ .q-checkbox__input-icon.q-icon {
583
+ position: absolute;
584
+ top: -1px;
585
+ left: -1px;
586
+ width: inherit;
587
+ height: inherit;
588
+ padding: 0.25rem;
589
+ pointer-events: none;
590
+ -webkit-user-select: none;
591
+ -moz-user-select: none;
592
+ user-select: none;
593
+ fill: var(--icon-color);
594
+ transition: transform 0.2s ease;
595
+ opacity: var(--icon-opacity);
596
+ }
597
+ .q-checkbox__native-input {
598
+ transform: translateX(-100%);
599
+ position: absolute;
600
+ pointer-events: none;
601
+ opacity: 0;
602
+ margin: 0;
603
+ }
604
+ .q-checkbox--small {
605
+ --box-size: 0.95rem;
606
+ }
607
+ .q-checkbox--large {
608
+ --box-size: 1.3rem;
609
+ }
610
+ .q-checkbox--primary {
611
+ --active-color: var(--q-theme-primary);
612
+ --icon-color: var(--q-theme-on-primary);
613
+ }
614
+ .q-checkbox--info {
615
+ --active-color: var(--q-theme-info);
616
+ --icon-color: var(--q-theme-on-info);
617
+ }
618
+ .q-checkbox--success {
619
+ --active-color: var(--q-theme-success);
620
+ --icon-color: var(--q-theme-on-success);
621
+ }
622
+ .q-checkbox--warning {
623
+ --active-color: var(--q-theme-warning);
624
+ --icon-color: var(--q-theme-on-warning);
625
+ }
626
+ .q-checkbox--danger {
627
+ --active-color: var(--q-theme-danger);
628
+ --icon-color: var(--q-theme-on-danger);
629
+ }
630
+ .q-checkbox--checked, .q-checkbox--indeterminate {
631
+ --icon-opacity: 1;
632
+ }
633
+ .q-checkbox--checked .q-checkbox__input, .q-checkbox--indeterminate .q-checkbox__input {
634
+ background-color: var(--active-color);
635
+ border-color: var(--active-color);
636
+ }
637
+ .q-checkbox--disabled {
638
+ opacity: 0.6;
639
+ cursor: not-allowed;
640
+ }
641
+ .q-checkbox--readonly {
642
+ --active-color: var(--q-theme-neutral-light);
643
+ cursor: default;
644
+ }
645
+ .q-checkbox--readonly:not(.q-checkbox--checked):not(.q-checkbox--indeterminate) .q-checkbox__input {
646
+ background-color: rgb(var(--q-theme-neutral-light-rgb)/0.25);
647
+ }
648
+
649
+ @media (prefers-reduced-motion: reduce) {
650
+ .q-checkbox__input,
651
+ .q-checkbox__input .q-icon {
652
+ transition: none;
653
+ }
654
+ }
550
655
  .q-combobox:not(.q-combobox--disabled) .q-combobox__clear:hover, .q-combobox:not(.q-combobox--disabled) .q-combobox__clear:focus,
551
656
  .q-combobox:not(.q-combobox--disabled) .q-combobox__chevron:hover,
552
657
  .q-combobox:not(.q-combobox--disabled) .q-combobox__chevron:focus {