@umbra.ui/core 0.4.4 → 0.4.6

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 (5) hide show
  1. package/dist/components/pickers/DatePicker/DatePicker.vue +21 -2
  2. package/dist/components/pickers/DatePicker/README.md +13 -0
  3. package/package.json +1 -1
  4. package/src/components/pickers/DatePicker/DatePicker.vue +21 -2
  5. package/src/components/pickers/DatePicker/README.md +13 -0
package/dist/components/pickers/DatePicker/DatePicker.vue CHANGED
@@ -1,7 +1,15 @@
1
1
  <script setup lang="ts">
2
2
  import { ChevronRightIcon, CalendarDaysIcon } from "@umbra.ui/icons";
3
3
  // - Imports
4
- import { ref, watch, onMounted, nextTick, computed, onUnmounted } from "vue";
4
+ import {
5
+ ref,
6
+ watch,
7
+ onMounted,
8
+ nextTick,
9
+ computed,
10
+ onUnmounted,
11
+ useSlots,
12
+ } from "vue";
5
13
  import {
6
14
  offset,
7
15
  flip,
@@ -34,6 +42,8 @@ const props = withDefaults(defineProps<Props>(), {
34
42
  date: () => new Date(),
35
43
  label: true,
36
44
  });
45
+ const slots = useSlots();
46
+ const hasCustomLabelSlot = computed(() => Boolean(slots.label));
37
47
  // - Emits
38
48
  const emits = defineEmits(["update:date"]);
39
49
  // - State Management
@@ -381,10 +391,14 @@ const handleOverlayClick = () => {
381
391
  <div
382
392
  :class="[
383
393
  $style.button,
384
- showPopover ? $style.button_selected : $style.button_normal,
394
+ hasCustomLabelSlot ? $style.button_unstyled : null,
395
+ !hasCustomLabelSlot &&
396
+ (showPopover ? $style.button_selected : $style.button_normal),
385
397
  ]"
386
398
  @click="togglePopover"
387
399
  ref="button"
400
+ data-date-picker-button
401
+ :data-date-picker-open="showPopover ? 'true' : 'false'"
388
402
  >
389
403
  <slot v-if="label" name="label">
390
404
  <CalendarDaysIcon :size="16" />
@@ -494,6 +508,11 @@ const handleOverlayClick = () => {
494
508
  transition: padding-left 0.3s, padding-right 0.3s, background-color 0.3s,
495
509
  box-shadow 0.3s;
496
510
  }
511
+ .button_unstyled {
512
+ padding: 0;
513
+ gap: 0;
514
+ transition: none;
515
+ }
497
516
  .button_normal {
498
517
  background-color: var(--picker-button-bg);
499
518
  border: var(--picker-button-border);
package/dist/components/pickers/DatePicker/README.md CHANGED
@@ -68,6 +68,11 @@ const handleDateChange = (date: Date) => {
68
68
 
69
69
  ## Custom Label Slot
70
70
 
71
+ When you provide a custom `label` slot, the default button hover/selected
72
+ styles are disabled so you can fully control the label visuals. The
73
+ DatePicker button exposes a `data-date-picker-button` attribute you can use
74
+ to target hover/open states from your custom label styles.
75
+
71
76
  ```vue
72
77
  <script setup lang="ts">
73
78
  import { ref, computed } from "vue";
@@ -99,6 +104,14 @@ const formattedDate = computed(() =>
99
104
  display: inline-flex;
100
105
  align-items: center;
101
106
  gap: 0.353rem;
107
+ transition: transform 0.2s ease, opacity 0.2s ease;
108
+ transform: translateY(0);
109
+ opacity: 0.9;
110
+ }
111
+ :global([data-date-picker-button]:hover) .date-chip,
112
+ :global([data-date-picker-button][data-date-picker-open="true"]) .date-chip {
113
+ transform: translateY(-1px);
114
+ opacity: 1;
102
115
  }
103
116
  </style>
104
117
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umbra.ui/core",
3
- "version": "0.4.4",
3
+ "version": "0.4.6",
4
4
  "description": "Core components for Umbra UI",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/src/components/pickers/DatePicker/DatePicker.vue CHANGED
@@ -1,7 +1,15 @@
1
1
  <script setup lang="ts">
2
2
  import { ChevronRightIcon, CalendarDaysIcon } from "@umbra.ui/icons";
3
3
  // - Imports
4
- import { ref, watch, onMounted, nextTick, computed, onUnmounted } from "vue";
4
+ import {
5
+ ref,
6
+ watch,
7
+ onMounted,
8
+ nextTick,
9
+ computed,
10
+ onUnmounted,
11
+ useSlots,
12
+ } from "vue";
5
13
  import {
6
14
  offset,
7
15
  flip,
@@ -34,6 +42,8 @@ const props = withDefaults(defineProps<Props>(), {
34
42
  date: () => new Date(),
35
43
  label: true,
36
44
  });
45
+ const slots = useSlots();
46
+ const hasCustomLabelSlot = computed(() => Boolean(slots.label));
37
47
  // - Emits
38
48
  const emits = defineEmits(["update:date"]);
39
49
  // - State Management
@@ -381,10 +391,14 @@ const handleOverlayClick = () => {
381
391
  <div
382
392
  :class="[
383
393
  $style.button,
384
- showPopover ? $style.button_selected : $style.button_normal,
394
+ hasCustomLabelSlot ? $style.button_unstyled : null,
395
+ !hasCustomLabelSlot &&
396
+ (showPopover ? $style.button_selected : $style.button_normal),
385
397
  ]"
386
398
  @click="togglePopover"
387
399
  ref="button"
400
+ data-date-picker-button
401
+ :data-date-picker-open="showPopover ? 'true' : 'false'"
388
402
  >
389
403
  <slot v-if="label" name="label">
390
404
  <CalendarDaysIcon :size="16" />
@@ -494,6 +508,11 @@ const handleOverlayClick = () => {
494
508
  transition: padding-left 0.3s, padding-right 0.3s, background-color 0.3s,
495
509
  box-shadow 0.3s;
496
510
  }
511
+ .button_unstyled {
512
+ padding: 0;
513
+ gap: 0;
514
+ transition: none;
515
+ }
497
516
  .button_normal {
498
517
  background-color: var(--picker-button-bg);
499
518
  border: var(--picker-button-border);
package/src/components/pickers/DatePicker/README.md CHANGED
@@ -68,6 +68,11 @@ const handleDateChange = (date: Date) => {
68
68
 
69
69
  ## Custom Label Slot
70
70
 
71
+ When you provide a custom `label` slot, the default button hover/selected
72
+ styles are disabled so you can fully control the label visuals. The
73
+ DatePicker button exposes a `data-date-picker-button` attribute you can use
74
+ to target hover/open states from your custom label styles.
75
+
71
76
  ```vue
72
77
  <script setup lang="ts">
73
78
  import { ref, computed } from "vue";
@@ -99,6 +104,14 @@ const formattedDate = computed(() =>
99
104
  display: inline-flex;
100
105
  align-items: center;
101
106
  gap: 0.353rem;
107
+ transition: transform 0.2s ease, opacity 0.2s ease;
108
+ transform: translateY(0);
109
+ opacity: 0.9;
110
+ }
111
+ :global([data-date-picker-button]:hover) .date-chip,
112
+ :global([data-date-picker-button][data-date-picker-open="true"]) .date-chip {
113
+ transform: translateY(-1px);
114
+ opacity: 1;
102
115
  }
103
116
  </style>
104
117
  ```