@1001-digital/components 2.0.3 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "type": "module",
   "main": "./src/index.ts",
   "sideEffects": [
@@ -18,7 +18,7 @@
   },
   "peerDependencies": {
     "vue": "^3.5.0",
-    "@1001-digital/styles": "^2.1.0"
+    "@1001-digital/styles": "^2.1.1"
   },
   "dependencies": {
     "@iconify/vue": "^5.0.0",

package/src/base/components/Combobox.vue

@@ -94,22 +94,32 @@ const props = withDefaults(
 )
 
 const resolveLabel = (v: any) => {
-  const option = props.options.find(o => o[props.valueKey] === v)
+  if (v == null) return ''
+  const option = props.options.find((o) => o[props.valueKey] === v)
   return option ? String(option[props.labelKey]) : String(v)
 }
 
 const resolveDisplayValue = (val: any) => {
+  if (val == null) return ''
+  if (Array.isArray(val) && val.length === 0) return ''
   if (Array.isArray(val)) return val.map(resolveLabel).join(', ')
   return resolveLabel(val)
 }
 </script>
 
 <style scoped>
+/* &:has(> .combobox-root) { */
+/* } */
+
 @layer components {
+  :global(.form-item:has(> .combobox-root)) {
+    inline-size: max-content !important;
+    max-inline-size: none;
+  }
+
   .combobox-root {
     inline-size: 100%;
   }
-
   .combobox-anchor {
     display: flex;
     align-items: center;
@@ -166,7 +176,7 @@ const resolveDisplayValue = (val: any) => {
     }
   }
 
-  .combobox-content {
+  :deep(.combobox-content) {
     background: var(--combobox-background);
     border: var(--combobox-border);
     border-radius: var(--combobox-border-radius);
@@ -198,11 +208,11 @@ const resolveDisplayValue = (val: any) => {
     }
   }
 
-  .combobox-viewport {
+  :deep(.combobox-viewport) {
     padding: var(--combobox-padding);
   }
 
-  .combobox-empty {
+  :deep(.combobox-empty) {
     padding: var(--size-2) var(--size-3);
     color: var(--muted);
     font-family: var(--font-family);
@@ -210,7 +220,7 @@ const resolveDisplayValue = (val: any) => {
     user-select: none;
   }
 
-  .combobox-item {
+  :deep(.combobox-item) {
     padding: var(--size-2) var(--size-3);
     border-radius: calc(var(--combobox-border-radius) / 2);
     display: flex;
@@ -237,7 +247,7 @@ const resolveDisplayValue = (val: any) => {
     }
   }
 
-  .combobox-indicator {
+  :deep(.combobox-indicator) {
     color: var(--accent);
   }
 }

package/src/base/components/Dialog.vue

@@ -161,6 +161,7 @@ onBeforeUnmount(() => {
         display: flex;
         align-items: center;
         block-size: calc(var(--spacer) * 2);
+        background: var(--dialog-header-background);
         box-shadow: var(--border-shadow);
         padding-inline-start: var(--spacer);
         font-family: var(--font-family);

package/src/base/components/Dropdown.vue

@@ -73,98 +73,100 @@ const open = defineModel<boolean>('open', { required: true })
 
 <style scoped>
 @layer components {
-  .dropdown {
-    background: var(--dropdown-background);
-    color: var(--color);
-    border: var(--dropdown-border);
-    border-radius: var(--dropdown-border-radius);
-    padding: 0;
-    font-family: var(--font-family);
-    font-size: var(--ui-font-size);
-    z-index: var(--z-index-ui);
-    min-inline-size: var(--reka-dropdown-menu-trigger-width);
-    max-block-size: var(--reka-dropdown-menu-content-available-height);
-    transform-origin: var(--reka-dropdown-menu-content-transform-origin);
-
-    /* Entry/exit animations */
-    opacity: 1;
-    scale: 1;
-    transition:
-      opacity var(--speed) ease,
-      scale var(--speed) ease;
-
-    @starting-style {
-      opacity: 0;
-      scale: 0.95;
+  :deep() {
+    .dropdown {
+      background: var(--dropdown-background);
+      color: var(--color);
+      border: var(--dropdown-border);
+      border-radius: var(--dropdown-border-radius);
+      padding: 0;
+      font-family: var(--font-family);
+      font-size: var(--ui-font-size);
+      z-index: var(--z-index-ui);
+      min-inline-size: var(--reka-dropdown-menu-trigger-width);
+      max-block-size: var(--reka-dropdown-menu-content-available-height);
+      transform-origin: var(--reka-dropdown-menu-content-transform-origin);
+
+      /* Entry/exit animations */
+      opacity: 1;
+      scale: 1;
+      transition:
+        opacity var(--speed) ease,
+        scale var(--speed) ease;
+
+      @starting-style {
+        opacity: 0;
+        scale: 0.95;
+      }
+
+      &[data-state='closed'] {
+        opacity: 0;
+        scale: 0.95;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      .dropdown-arrow {
+        fill: var(--dropdown-arrow-fill);
+        stroke: var(--border-color);
+      }
     }
 
-    &[data-state='closed'] {
-      opacity: 0;
-      scale: 0.95;
+    .dropdown-items {
+      padding: var(--dropdown-padding);
+      overflow-y: auto;
+      overscroll-behavior: contain;
     }
 
-    &:focus {
+    .dropdown-item {
+      padding: var(--size-2) var(--size-3);
+      border-radius: calc(var(--dropdown-border-radius) / 2);
+      display: flex;
+      align-items: center;
+      gap: var(--size-2);
+      cursor: pointer;
       outline: none;
-    }
-
-    .dropdown-arrow {
-      fill: var(--dropdown-arrow-fill);
-      stroke: var(--border-color);
-    }
-  }
+      user-select: none;
 
-  .dropdown-items {
-    padding: var(--dropdown-padding);
-    overflow-y: auto;
-    overscroll-behavior: contain;
-  }
+      &[data-highlighted] {
+        background: var(--button-background-highlight);
+      }
 
-  .dropdown-item {
-    padding: var(--size-2) var(--size-3);
-    border-radius: calc(var(--dropdown-border-radius) / 2);
-    display: flex;
-    align-items: center;
-    gap: var(--size-2);
-    cursor: pointer;
-    outline: none;
-    user-select: none;
-
-    &[data-highlighted] {
-      background: var(--button-background-highlight);
+      &[data-disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
     }
 
-    &[data-disabled] {
-      opacity: 0.5;
-      cursor: not-allowed;
+    .dropdown-label {
+      padding: var(--size-2) var(--size-3);
+      color: var(--muted);
+      font-weight: 500;
+      user-select: none;
     }
-  }
-
-  .dropdown-label {
-    padding: var(--size-2) var(--size-3);
-    color: var(--muted);
-    font-weight: 500;
-    user-select: none;
-  }
 
-  .dropdown-separator {
-    block-size: 1px;
-    background: var(--border-color);
-    margin-block: var(--size-1);
-  }
+    .dropdown-separator {
+      block-size: 1px;
+      background: var(--border-color);
+      margin-block: var(--size-1);
+    }
 
-  .dropdown-item-indicator {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
+    .dropdown-item-indicator {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
 
-  .dropdown-sub-trigger {
-    justify-content: space-between;
-  }
+    .dropdown-sub-trigger {
+      justify-content: space-between;
+    }
 
-  .dropdown-sub-icon {
-    color: var(--muted);
-    margin-inline-start: auto;
+    .dropdown-sub-icon {
+      color: var(--muted);
+      margin-inline-start: auto;
+    }
   }
 }
 </style>

package/src/base/components/Popover.vue

@@ -148,6 +148,7 @@ const onInteractOutside = (e: Event) => {
       display: flex;
       align-items: center;
       block-size: calc(var(--spacer) * 2);
+      background: var(--popover-header-background);
       border-start-start-radius: var(--popover-border-radius);
       border-start-end-radius: var(--popover-border-radius);
       box-shadow: var(--border-shadow);
@@ -171,6 +172,7 @@ const onInteractOutside = (e: Event) => {
       position: absolute !important;
       top: 0;
       right: 0;
+      background: var(--popover-header-background) !important;
       box-shadow: var(--border-shadow) !important;
       border-radius: 0 !important;
       border-start-end-radius: var(--popover-border-radius) !important;

package/src/base/components/Toasts.vue

@@ -171,6 +171,7 @@ const onClose = (id: string) => {
 
     /* Variants */
     &.info {
+      --toast-header-background: var(--toast-info-header-background);
       --border-color: var(--toast-info-border-color);
       color: var(--toast-info-color);
       background: var(--toast-info-background);
@@ -183,6 +184,7 @@ const onClose = (id: string) => {
     }
 
     &.success {
+      --toast-header-background: var(--toast-success-header-background);
       --border-color: var(--toast-success-border-color);
       color: var(--toast-success-color);
       background: var(--toast-success-background);
@@ -195,6 +197,7 @@ const onClose = (id: string) => {
     }
 
     &.error {
+      --toast-header-background: var(--toast-error-header-background);
       --border-color: var(--toast-error-border-color);
       color: var(--toast-error-color);
       background: var(--toast-error-background);
@@ -211,6 +214,7 @@ const onClose = (id: string) => {
       align-items: center;
       gap: var(--spacer-sm);
       block-size: calc(var(--spacer) * 2);
+      background: var(--toast-header-background);
       box-shadow: var(--border-shadow);
       padding-inline-start: var(--ui-padding-inline);
       padding-right: calc(var(--spacer) * 3);
@@ -246,6 +250,7 @@ const onClose = (id: string) => {
       position: absolute !important;
       top: 0;
       right: 0;
+      background: var(--toast-header-background) !important;
       box-shadow: var(--border-shadow) !important;
       border-radius: 0 !important;
       border-start-end-radius: var(--toast-border-radius) !important;

package/src/base/components/Tooltip.vue

@@ -66,37 +66,39 @@ const props = withDefaults(
 
 <style scoped>
 @layer components {
-  .tooltip {
-    background: var(--tooltip-background);
-    color: var(--color);
-    border: var(--tooltip-border);
-    border-radius: var(--tooltip-border-radius);
-    padding: var(--tooltip-padding);
-    font-family: var(--font-family);
-    font-size: var(--ui-font-size);
-    z-index: var(--z-index-ui);
-    transform-origin: var(--reka-tooltip-content-transform-origin);
+  :deep() {
+    .tooltip {
+      background: var(--tooltip-background);
+      color: var(--color);
+      border: var(--tooltip-border);
+      border-radius: var(--tooltip-border-radius);
+      padding: var(--tooltip-padding);
+      font-family: var(--font-family);
+      font-size: var(--ui-font-size);
+      z-index: var(--z-index-ui);
+      transform-origin: var(--reka-tooltip-content-transform-origin);
 
-    /* Entry/exit animations */
-    opacity: 1;
-    scale: 1;
-    transition:
-      opacity var(--speed) ease,
-      scale var(--speed) ease;
+      /* Entry/exit animations */
+      opacity: 1;
+      scale: 1;
+      transition:
+        opacity var(--speed) ease,
+        scale var(--speed) ease;
 
-    @starting-style {
-      opacity: 0;
-      scale: 0.95;
-    }
+      @starting-style {
+        opacity: 0;
+        scale: 0.95;
+      }
 
-    &[data-state='closed'] {
-      opacity: 0;
-      scale: 0.95;
-    }
+      &[data-state='closed'] {
+        opacity: 0;
+        scale: 0.95;
+      }
 
-    .tooltip-arrow {
-      fill: var(--tooltip-arrow-fill);
-      stroke: var(--border-color);
+      .tooltip-arrow {
+        fill: var(--tooltip-arrow-fill);
+        stroke: var(--border-color);
+      }
     }
   }
 }

package/src/base/utils/time.ts

@@ -1,5 +1,7 @@
 import { DateTime } from 'luxon'
 
+export type UTCDateTime = DateTime<true>
+
 export const delay = (ms: number): Promise<void> =>
   new Promise((resolve) => setTimeout(resolve, ms))
 
@@ -7,7 +9,7 @@ export const daysInSeconds = (days: number): number => days * 60 * 60 * 24
 
 export const nowInSeconds = (): number => Math.floor(Date.now() / 1000)
 
-export const asUTCDate = (date: Date | null) =>
+export const asUTCDate = (date: Date | null): UTCDateTime | null =>
   date
     ? DateTime.utc(
         date.getFullYear(),

package/src/index.ts

@@ -76,6 +76,7 @@ export {
   nowInSeconds,
   asUTCDate,
 } from './base/utils/time'
+export type { UTCDateTime } from './base/utils/time'
 
 // Date types
 export {