@umbra.ui/core 0.4.4 → 0.4.5

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 +15 -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 +15 -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,13 @@ const handleOverlayClick = () => {
381
391
  <div
382
392
  :class="[
383
393
  $style.button,
384
- showPopover ? $style.button_selected : $style.button_normal,
394
+ !hasCustomLabelSlot &&
395
+ (showPopover ? $style.button_selected : $style.button_normal),
385
396
  ]"
386
397
  @click="togglePopover"
387
398
  ref="button"
399
+ data-date-picker-button
400
+ :data-date-picker-open="showPopover ? 'true' : 'false'"
388
401
  >
389
402
  <slot v-if="label" name="label">
390
403
  <CalendarDaysIcon :size="16" />
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.5",
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,13 @@ const handleOverlayClick = () => {
381
391
  <div
382
392
  :class="[
383
393
  $style.button,
384
- showPopover ? $style.button_selected : $style.button_normal,
394
+ !hasCustomLabelSlot &&
395
+ (showPopover ? $style.button_selected : $style.button_normal),
385
396
  ]"
386
397
  @click="togglePopover"
387
398
  ref="button"
399
+ data-date-picker-button
400
+ :data-date-picker-open="showPopover ? 'true' : 'false'"
388
401
  >
389
402
  <slot v-if="label" name="label">
390
403
  <CalendarDaysIcon :size="16" />
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
  ```