@shival99/z-ui 2.0.24 → 2.0.26

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 (8) hide show
  1. package/fesm2022/shival99-z-ui-components-z-calendar.mjs +217 -75
  2. package/fesm2022/shival99-z-ui-components-z-calendar.mjs.map +1 -1
  3. package/fesm2022/shival99-z-ui-components-z-gallery.mjs +33 -26
  4. package/fesm2022/shival99-z-ui-components-z-gallery.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/types/shival99-z-ui-components-z-calendar.d.ts +8 -5
  7. package/types/shival99-z-ui-components-z-gallery.d.ts +1 -0
  8. package/types/shival99-z-ui-components-z-table.d.ts +1 -1
package/fesm2022/shival99-z-ui-components-z-gallery.mjs CHANGED
@@ -234,6 +234,7 @@ class ZGalleryItemComponent {
234
234
  icon: style.icon,
235
235
  };
236
236
  }, ...(ngDevMode ? [{ debugName: "categoryStyle" }] : []));
237
+ fileTypeClasses = computed(() => zMergeClasses('inline-flex min-w-14 items-center justify-center rounded-sm border border-black/5 px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide dark:border-white/10', this.categoryStyle().bg, this.categoryStyle().text), ...(ngDevMode ? [{ debugName: "fileTypeClasses" }] : []));
237
238
  canPreview = computed(() => isPreviewable(this.file()), ...(ngDevMode ? [{ debugName: "canPreview" }] : []));
238
239
  onImageLoad() {
239
240
  this.isLoading.set(false);
@@ -397,7 +398,7 @@ class ZGalleryItemComponent {
397
398
  </div>
398
399
  } @else {
399
400
  <div
400
- class="group border-border bg-card hover:border-primary/35 flex cursor-pointer items-center gap-3 rounded-xl border px-3 py-2.5 shadow-sm transition-all duration-200 hover:shadow-md"
401
+ class="group border-border bg-card hover:border-primary/35 flex cursor-pointer items-center gap-3 rounded-sm border px-3 py-2.5 shadow-sm transition-all duration-200 hover:shadow-md"
401
402
  [class.border-primary]="zSelected()"
402
403
  [class.ring-1]="zSelected()"
403
404
  [class.ring-primary/30]="zSelected()"
@@ -416,18 +417,24 @@ class ZGalleryItemComponent {
416
417
  }
417
418
 
418
419
  <div
419
- class="flex size-11 shrink-0 items-center justify-center rounded-xl border border-white/40 shadow-sm"
420
- [class]="categoryStyle().bg"
420
+ class="relative flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-black/5 bg-white/40 shadow-sm backdrop-blur-sm dark:border-white/10 dark:bg-white/5"
421
421
  >
422
422
  @if (isImage() && (file().thumbnailUrl || file().url)) {
423
423
  <img
424
424
  [src]="file().thumbnailUrl || file().url"
425
425
  [alt]="file().name"
426
- class="size-full rounded-xl object-cover"
426
+ class="size-full rounded-sm object-cover"
427
427
  loading="lazy"
428
428
  />
429
429
  } @else {
430
- <i z-icon [zType]="categoryStyle().icon" zSize="18" [class]="categoryStyle().text"></i>
430
+ <span class="absolute inset-0 opacity-30 dark:opacity-20" [class]="categoryStyle().bg"></span>
431
+ <i
432
+ z-icon
433
+ [zType]="categoryStyle().icon"
434
+ zSize="18"
435
+ class="relative z-10"
436
+ [class]="categoryStyle().text"
437
+ ></i>
431
438
  }
432
439
  </div>
433
440
 
@@ -439,9 +446,7 @@ class ZGalleryItemComponent {
439
446
  </div>
440
447
 
441
448
  <div class="ml-auto flex shrink-0 items-center gap-1.5">
442
- <span
443
- class="text-muted-foreground bg-muted/60 inline-flex min-w-14 items-center justify-center rounded-full border px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide"
444
- >
449
+ <span [class]="fileTypeClasses()">
445
450
  {{ fileExtension() }}
446
451
  </span>
447
452
  @if (zShowPreview() && canPreview()) {
@@ -624,7 +629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
624
629
  </div>
625
630
  } @else {
626
631
  <div
627
- class="group border-border bg-card hover:border-primary/35 flex cursor-pointer items-center gap-3 rounded-xl border px-3 py-2.5 shadow-sm transition-all duration-200 hover:shadow-md"
632
+ class="group border-border bg-card hover:border-primary/35 flex cursor-pointer items-center gap-3 rounded-sm border px-3 py-2.5 shadow-sm transition-all duration-200 hover:shadow-md"
628
633
  [class.border-primary]="zSelected()"
629
634
  [class.ring-1]="zSelected()"
630
635
  [class.ring-primary/30]="zSelected()"
@@ -643,18 +648,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
643
648
  }
644
649
 
645
650
  <div
646
- class="flex size-11 shrink-0 items-center justify-center rounded-xl border border-white/40 shadow-sm"
647
- [class]="categoryStyle().bg"
651
+ class="relative flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-black/5 bg-white/40 shadow-sm backdrop-blur-sm dark:border-white/10 dark:bg-white/5"
648
652
  >
649
653
  @if (isImage() && (file().thumbnailUrl || file().url)) {
650
654
  <img
651
655
  [src]="file().thumbnailUrl || file().url"
652
656
  [alt]="file().name"
653
- class="size-full rounded-xl object-cover"
657
+ class="size-full rounded-sm object-cover"
654
658
  loading="lazy"
655
659
  />
656
660
  } @else {
657
- <i z-icon [zType]="categoryStyle().icon" zSize="18" [class]="categoryStyle().text"></i>
661
+ <span class="absolute inset-0 opacity-30 dark:opacity-20" [class]="categoryStyle().bg"></span>
662
+ <i
663
+ z-icon
664
+ [zType]="categoryStyle().icon"
665
+ zSize="18"
666
+ class="relative z-10"
667
+ [class]="categoryStyle().text"
668
+ ></i>
658
669
  }
659
670
  </div>
660
671
 
@@ -666,9 +677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
666
677
  </div>
667
678
 
668
679
  <div class="ml-auto flex shrink-0 items-center gap-1.5">
669
- <span
670
- class="text-muted-foreground bg-muted/60 inline-flex min-w-14 items-center justify-center rounded-full border px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide"
671
- >
680
+ <span [class]="fileTypeClasses()">
672
681
  {{ fileExtension() }}
673
682
  </span>
674
683
  @if (zShowPreview() && canPreview()) {
@@ -1875,9 +1884,8 @@ class ZGalleryComponent {
1875
1884
  @for (item of skeletonItems(); track item) {
1876
1885
  <div class="border-border bg-card overflow-hidden rounded-md border shadow-sm">
1877
1886
  <z-skeleton [zHeight]="skeletonMediaHeight()" zRadius="0" />
1878
- <div class="space-y-2 p-3">
1887
+ <div class="p-3">
1879
1888
  <z-skeleton zWidth="75%" zHeight="0.875rem" />
1880
- <z-skeleton zWidth="40%" zHeight="0.75rem" />
1881
1889
  </div>
1882
1890
  </div>
1883
1891
  }
@@ -1885,13 +1893,13 @@ class ZGalleryComponent {
1885
1893
  } @else {
1886
1894
  <div class="flex flex-col gap-2">
1887
1895
  @for (item of skeletonItems(); track item) {
1888
- <div class="border-border bg-card flex items-center gap-3 rounded-xl border px-3 py-2.5 shadow-sm">
1889
- <z-skeleton class="shrink-0" zWidth="2.75rem" zHeight="2.75rem" zRadius="0.75rem" />
1896
+ <div class="border-border bg-card flex items-center gap-3 rounded-sm border px-3 py-2.5 shadow-sm">
1897
+ <z-skeleton class="shrink-0" zWidth="2.75rem" zHeight="2.75rem" zRadius="0.125rem" />
1890
1898
  <div class="min-w-0 flex-1 space-y-2">
1891
1899
  <z-skeleton zWidth="40%" zHeight="0.875rem" />
1892
1900
  <z-skeleton zWidth="25%" zHeight="0.75rem" />
1893
1901
  </div>
1894
- <z-skeleton class="shrink-0" zWidth="3.5rem" zHeight="1.5rem" zRadius="9999px" />
1902
+ <z-skeleton class="shrink-0" zWidth="3.5rem" zHeight="1.5rem" zRadius="0.125rem" />
1895
1903
  </div>
1896
1904
  }
1897
1905
  </div>
@@ -2088,9 +2096,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
2088
2096
  @for (item of skeletonItems(); track item) {
2089
2097
  <div class="border-border bg-card overflow-hidden rounded-md border shadow-sm">
2090
2098
  <z-skeleton [zHeight]="skeletonMediaHeight()" zRadius="0" />
2091
- <div class="space-y-2 p-3">
2099
+ <div class="p-3">
2092
2100
  <z-skeleton zWidth="75%" zHeight="0.875rem" />
2093
- <z-skeleton zWidth="40%" zHeight="0.75rem" />
2094
2101
  </div>
2095
2102
  </div>
2096
2103
  }
@@ -2098,13 +2105,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
2098
2105
  } @else {
2099
2106
  <div class="flex flex-col gap-2">
2100
2107
  @for (item of skeletonItems(); track item) {
2101
- <div class="border-border bg-card flex items-center gap-3 rounded-xl border px-3 py-2.5 shadow-sm">
2102
- <z-skeleton class="shrink-0" zWidth="2.75rem" zHeight="2.75rem" zRadius="0.75rem" />
2108
+ <div class="border-border bg-card flex items-center gap-3 rounded-sm border px-3 py-2.5 shadow-sm">
2109
+ <z-skeleton class="shrink-0" zWidth="2.75rem" zHeight="2.75rem" zRadius="0.125rem" />
2103
2110
  <div class="min-w-0 flex-1 space-y-2">
2104
2111
  <z-skeleton zWidth="40%" zHeight="0.875rem" />
2105
2112
  <z-skeleton zWidth="25%" zHeight="0.75rem" />
2106
2113
  </div>
2107
- <z-skeleton class="shrink-0" zWidth="3.5rem" zHeight="1.5rem" zRadius="9999px" />
2114
+ <z-skeleton class="shrink-0" zWidth="3.5rem" zHeight="1.5rem" zRadius="0.125rem" />
2108
2115
  </div>
2109
2116
  }
2110
2117
  </div>