@leaflink/stash 42.4.3 → 42.5.0

package/dist/DatePicker.vue.d.ts

@@ -5,6 +5,7 @@ import { DateRangeSource } from 'v-calendar/dist/types/src/utils/date/range';
 import { DateRangeSource as DateRangeSource_2 } from 'v-calendar/dist/types/src/utils/date/range.js';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
+import { PopoverOptions } from 'v-calendar/dist/types/src/utils/popovers';
 import { PropType } from 'vue';
 import { VNodeProps } from 'vue';
 
@@ -35,6 +36,10 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
+declare interface DatePickerPopoverOptions extends Partial<PopoverOptions> {
+    positionFixed?: boolean;
+}
+
 declare interface DatePickerProps {
     /**
      * Dates or date range objects that are available for selection or navigation.
@@ -52,6 +57,12 @@ declare interface DatePickerProps {
      * @see: https://vcalendar.io/api/v2.0/calendar.html#disabled-dates
      */
     disabledDates?: DateRangeSource[];
+    /**
+     * Adds default modifiers to make the calendar popover teleport; useful in preventing the calendar
+     * popover from getting hidden behind its containing element.
+     * Although we are not using vue teleport, this name is to future-proof the prop name for when the vCalendar is updated to use teleport internally.
+     */
+    enableTeleport?: boolean;
     /**
      * Error text to display. Replaces `hintText` (if provided) & adds error styling.
      */
@@ -124,6 +135,11 @@ declare interface DatePickerProps {
      * `placeholder' property for datepicker input
      */
     placeholder?: string;
+    /**
+     * Popover configuration; v-calendar uses Popover internally.
+     * @see https://v2--vcalendar.netlify.app/api/v2.0/datepicker.html#popover
+     */
+    popoverOptions?: DatePickerPopoverOptions;
     /**
      * `timezone` TZ DB time zone property
      * @see https://vcalendar.io/i18n/timezones.html
@@ -155,6 +171,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     modelValue: string;
     name: string;
     placeholder: undefined;
+    enableTeleport: boolean;
     timeZone: string;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "update:model-value": (date: string | number | Date) => void;
@@ -179,6 +196,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     modelValue: string;
     name: string;
     placeholder: undefined;
+    enableTeleport: boolean;
     timeZone: string;
 }>>> & {
     onBlur?: (() => any) | undefined;
@@ -193,6 +211,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     errorText: string;
     hintText: string;
     modelValue: string;
+    enableTeleport: boolean;
     mode: "time" | "date" | "dateTime";
     timeZone: string;
     format: string;

package/dist/Metric.js

@@ -1,60 +1,60 @@
-import { defineComponent as b, useSlots as v, useCssModule as w, computed as r, openBlock as d, createElementBlock as i, normalizeClass as c, unref as t, createElementVNode as u, toDisplayString as m, renderSlot as y, createCommentVNode as x } from "vue";
-import { u as S } from "./uniqueId-847efe53.js";
-import { _ as h } from "./_plugin-vue_export-helper-dad06003.js";
+import { defineComponent as p, useSlots as v, computed as n, openBlock as o, createElementBlock as i, normalizeClass as r, unref as a, createElementVNode as m, toDisplayString as u, renderSlot as _, createCommentVNode as b } from "vue";
+import { u as f } from "./uniqueId-847efe53.js";
 import "./toString-7d5bf363.js";
 import "./isObjectLike-54341556.js";
-var s = /* @__PURE__ */ ((e) => (e.Small = "small", e.Standard = "standard", e))(s || {}), _ = /* @__PURE__ */ ((e) => (e.Accent = "accent", e.Naked = "naked", e))(_ || {});
-const z = ["id"], k = ["aria-labelledby"], C = /* @__PURE__ */ b({
+var s = /* @__PURE__ */ ((t) => (t.Small = "small", t.Standard = "standard", t))(s || {}), l = /* @__PURE__ */ ((t) => (t.Accent = "accent", t.Naked = "naked", t))(l || {});
+const x = ["id"], S = ["aria-labelledby"], k = {
+  key: 0,
+  class: "stash-metric__secondary tw-text-ice-700 tw-text-xs tw-mt-1",
+  "data-test": "stash-metric|secondary"
+}, $ = /* @__PURE__ */ p({
   __name: "Metric",
   props: {
-    value: { default: "" },
+    value: {},
     label: {},
-    size: { default: "standard" },
     variant: { default: "naked" },
-    accentColor: { default: "teal" }
+    accentColor: { default: "teal" },
+    size: { default: "standard" }
   },
-  setup(e) {
-    const a = e, p = v(), l = w(), o = r(() => S("metric-")), f = r(() => String(a.value));
-    return (n, B) => (d(), i("div", {
-      class: c(["stash-metric", [
-        `size--${a.size}`,
+  setup(t) {
+    const e = t, w = v(), d = n(() => f("metric-")), h = n(() => String(e.value));
+    return (c, y) => (o(), i("div", {
+      class: r(["stash-metric", [
+        `stash-metric--${e.size}`,
         {
-          [`${t(l).accent} stash-metric--accent tw-p-3 tw-shadow tw-rounded tw-border-l-12 tw-border-${n.accentColor}`]: a.variant === t(_).Accent
+          "stash-metric--naked": e.variant === a(l).Naked,
+          [`stash-metric--accent tw-bg-white tw-p-3 tw-shadow tw-rounded tw-border-l-12 tw-border-${c.accentColor}`]: e.variant === a(l).Accent
         }
       ]]),
       "data-test": "stash-metric"
     }, [
-      u("div", {
-        id: o.value,
-        class: c(["tw-text-ice-700", [
-          t(l).label,
-          { "tw-text-xs": a.size === t(s).Small },
-          { "tw-text-sm": a.size === t(s).Standard }
-        ]])
-      }, m(a.label), 11, z),
-      u("div", {
-        "aria-labelledby": o.value,
-        class: c(["tw-text-ice-900 tw-font-medium", [{ "tw-text-base": a.size === t(s).Small }, { "tw-text-2xl": a.size === t(s).Standard }]])
-      }, m(f.value), 11, k),
-      t(p).secondary ? (d(), i("div", {
-        key: 0,
-        class: c(["text-ice-700 text-xs", t(l).secondary]),
-        "data-test": "secondary"
-      }, [
-        y(n.$slots, "secondary")
-      ], 2)) : x("", !0)
+      m("div", {
+        id: d.value,
+        class: r(["stash-metric__label tw-text-ice-700 tw-mb-1", [
+          {
+            "tw-text-xs": e.size === a(s).Small,
+            "tw-text-sm": e.size === a(s).Standard
+          }
+        ]]),
+        "data-test": "stash-metric|label"
+      }, u(e.label), 11, x),
+      m("div", {
+        "aria-labelledby": d.value,
+        class: r(["stash-metric__value tw-text-ice-900 tw-font-medium", {
+          "tw-text-base": e.size === a(s).Small,
+          "tw-text-2xl": e.size === a(s).Standard
+        }]),
+        "data-test": "stash-metric|value"
+      }, u(h.value), 11, S),
+      a(w).secondary ? (o(), i("div", k, [
+        _(c.$slots, "secondary")
+      ])) : b("", !0)
     ], 2));
   }
-}), M = "_label_8e515_2", $ = "_secondary_8e515_6", N = "_accent_8e515_11", g = {
-  label: M,
-  secondary: $,
-  accent: N
-}, A = {
-  $style: g
-}, j = /* @__PURE__ */ h(C, [["__cssModules", A]]);
+});
 export {
-  s as Sizes,
-  _ as Variants,
-  j as default
+  s as MetricSizes,
+  l as MetricVariants,
+  $ as default
 };
 //# sourceMappingURL=Metric.js.map

package/dist/Metric.js.map

@@ -1 +1 @@
-{"version":3,"file":"Metric.js","sources":["../src/components/Metric/Metric.types.ts","../src/components/Metric/Metric.vue"],"sourcesContent":["export enum Sizes {\n  Small = 'small',\n  Standard = 'standard',\n}\n\nexport type Size = `${Sizes}`;\n\nexport enum Variants {\n  Accent = 'accent',\n  Naked = 'naked',\n}\n\nexport type Variant = `${Variants}`;\n","<script lang=\"ts\">\n  export * from './Metric.types';\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, ComputedRef, useCssModule, useSlots } from 'vue';\n\n  import { StashColor } from '../../../types/colors';\n  import { Size, Sizes, Variant, Variants } from './Metric.types';\n\n  export interface MetricProps {\n    value: number | string;\n    label: string;\n    size?: Size;\n    variant?: Variant;\n    /**\n     * Currently only used when the variant is `accent`\n     */\n    accentColor?: StashColor;\n  }\n\n  const props = withDefaults(defineProps<MetricProps>(), {\n    size: 'standard',\n    value: '',\n    variant: 'naked',\n    accentColor: 'teal',\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const fieldId = computed(() => uniqueId('metric-'));\n\n  const computedValue: ComputedRef<string> = computed(() => String(props.value));\n</script>\n\n<template>\n  <div\n    class=\"stash-metric\"\n    data-test=\"stash-metric\"\n    :class=\"[\n      `size--${props.size}`,\n      {\n        [`${classes.accent} stash-metric--accent tw-p-3 tw-shadow tw-rounded tw-border-l-12 tw-border-${accentColor}`]:\n          props.variant === Variants.Accent,\n      },\n    ]\"\n  >\n    <div\n      :id=\"fieldId\"\n      class=\"tw-text-ice-700\"\n      :class=\"[\n        classes.label,\n        { 'tw-text-xs': props.size === Sizes.Small },\n        { 'tw-text-sm': props.size === Sizes.Standard },\n      ]\"\n    >\n      {{ props.label }}\n    </div>\n\n    <div\n      :aria-labelledby=\"fieldId\"\n      class=\"tw-text-ice-900 tw-font-medium\"\n      :class=\"[{ 'tw-text-base': props.size === Sizes.Small }, { 'tw-text-2xl': props.size === Sizes.Standard }]\"\n    >\n      {{ computedValue }}\n    </div>\n\n    <div v-if=\"slots.secondary\" class=\"text-ice-700 text-xs\" :class=\"classes.secondary\" data-test=\"secondary\">\n      <slot name=\"secondary\"></slot>\n    </div>\n  </div>\n</template>\n\n<style module>\n  .label {\n    margin-bottom: 0.25rem; /* 4px */\n  }\n\n  .secondary {\n    margin-top: 0.25rem; /* 4px */\n  }\n\n  /* bg-white also sets the border color, which causes conflicts in the payments app */\n  .accent {\n    background-color: white;\n  }\n</style>\n"],"names":["Sizes","Variants","slots","useSlots","classes","useCssModule","fieldId","computed","uniqueId","computedValue","props"],"mappings":";;;;;AAAY,IAAAA,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,WAAW,YAFDA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;iBCsBJC,IAAQC,KACRC,IAAUC,KAEVC,IAAUC,EAAS,MAAMC,EAAS,SAAS,CAAC,GAE5CC,IAAqCF,EAAS,MAAM,OAAOG,EAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Metric.js","sources":["../src/components/Metric/Metric.types.ts","../src/components/Metric/Metric.vue"],"sourcesContent":["export enum MetricSizes {\n  Small = 'small',\n  Standard = 'standard',\n}\n\nexport type MetricSize = `${MetricSizes}`;\n\nexport enum MetricVariants {\n  Accent = 'accent',\n  Naked = 'naked',\n}\n\nexport type MetricVariant = `${MetricVariants}`;\n","<script lang=\"ts\">\n  export * from './Metric.types';\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, ComputedRef, useSlots } from 'vue';\n\n  import { StashColor } from '../../../types/colors';\n  import { MetricSize, MetricSizes, MetricVariant, MetricVariants } from './Metric.types';\n\n  export interface MetricProps {\n    /**\n     * The primary text that will show in the metric.\n     */\n    value: number | string;\n\n    /**\n     * The label for the metric. Appears above the value.\n     */\n    label: string;\n\n    /**\n     * The variant of the metric. Defaults to `naked`.\n     */\n    variant?: MetricVariant;\n\n    /**\n     * The accent color for the metric. Defaults to `teal`. Currently only used when the variant = `accent`.\n     */\n    accentColor?: StashColor;\n\n    /**\n     * Controls the size of the metric via text size adjustments.\n     */\n    size?: MetricSize;\n  }\n\n  const props = withDefaults(defineProps<MetricProps>(), {\n    size: 'standard',\n    variant: 'naked',\n    accentColor: 'teal',\n  });\n\n  const slots = useSlots();\n\n  const fieldId = computed(() => uniqueId('metric-'));\n\n  const computedValue: ComputedRef<string> = computed(() => String(props.value));\n</script>\n\n<template>\n  <div\n    class=\"stash-metric\"\n    data-test=\"stash-metric\"\n    :class=\"[\n      `stash-metric--${props.size}`,\n      {\n        'stash-metric--naked': props.variant === MetricVariants.Naked,\n        [`stash-metric--accent tw-bg-white tw-p-3 tw-shadow tw-rounded tw-border-l-12 tw-border-${accentColor}`]:\n          props.variant === MetricVariants.Accent,\n      },\n    ]\"\n  >\n    <div\n      :id=\"fieldId\"\n      class=\"stash-metric__label tw-text-ice-700 tw-mb-1\"\n      data-test=\"stash-metric|label\"\n      :class=\"[\n        {\n          'tw-text-xs': props.size === MetricSizes.Small,\n          'tw-text-sm': props.size === MetricSizes.Standard,\n        },\n      ]\"\n    >\n      {{ props.label }}\n    </div>\n\n    <div\n      :aria-labelledby=\"fieldId\"\n      class=\"stash-metric__value tw-text-ice-900 tw-font-medium\"\n      data-test=\"stash-metric|value\"\n      :class=\"{\n        'tw-text-base': props.size === MetricSizes.Small,\n        'tw-text-2xl': props.size === MetricSizes.Standard,\n      }\"\n    >\n      {{ computedValue }}\n    </div>\n\n    <div\n      v-if=\"slots.secondary\"\n      class=\"stash-metric__secondary tw-text-ice-700 tw-text-xs tw-mt-1\"\n      data-test=\"stash-metric|secondary\"\n    >\n      <!-- @slot Supplementary information like a date, status, hint text, or secondary label. -->\n      <slot name=\"secondary\"></slot>\n    </div>\n  </div>\n</template>\n"],"names":["MetricSizes","MetricVariants","slots","useSlots","fieldId","computed","uniqueId","computedValue","props"],"mappings":";;;;AAAY,IAAAA,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,WAAW,YAFDA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;iBCqCJC,IAAQC,KAERC,IAAUC,EAAS,MAAMC,EAAS,SAAS,CAAC,GAE5CC,IAAqCF,EAAS,MAAM,OAAOG,EAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Metric.vue.d.ts

@@ -35,17 +35,14 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MetricProps>, {
     size: string;
-    value: string;
     variant: string;
     accentColor: string;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MetricProps>, {
     size: string;
-    value: string;
     variant: string;
     accentColor: string;
 }>>>, {
     size: "small" | "standard";
-    value: string | number;
     variant: "accent" | "naked";
     accentColor: "blue" | "red" | "ice-700" | "green" | "royal" | "purple" | "ice" | "orange" | "seafoam" | "teal" | "yellow" | "purple-900" | "purple-800" | "purple-700" | "purple-600" | "purple-500" | "purple-400" | "purple-300" | "purple-200" | "purple-100" | "royal-900" | "royal-800" | "royal-700" | "royal-600" | "royal-500" | "royal-400" | "royal-300" | "royal-200" | "royal-100" | "blue-900" | "blue-800" | "blue-700" | "blue-600" | "blue-500" | "blue-400" | "blue-300" | "blue-200" | "blue-100" | "teal-900" | "teal-800" | "teal-700" | "teal-600" | "teal-500" | "teal-400" | "teal-300" | "teal-200" | "teal-100" | "green-900" | "green-800" | "green-700" | "green-600" | "green-500" | "green-400" | "green-300" | "green-200" | "green-100" | "seafoam-900" | "seafoam-800" | "seafoam-700" | "seafoam-600" | "seafoam-500" | "seafoam-400" | "seafoam-300" | "seafoam-200" | "seafoam-100" | "yellow-900" | "yellow-800" | "yellow-700" | "yellow-600" | "yellow-500" | "yellow-400" | "yellow-300" | "yellow-200" | "yellow-100" | "orange-900" | "orange-800" | "orange-700" | "orange-600" | "orange-500" | "orange-400" | "orange-300" | "orange-200" | "orange-100" | "red-900" | "red-800" | "red-700" | "red-600" | "red-500" | "red-400" | "red-300" | "red-200" | "red-100" | "ice-900" | "ice-800" | "ice-600" | "ice-500" | "ice-400" | "ice-300" | "ice-200" | "ice-100" | "white" | "black";
 }, {}>, {
@@ -54,23 +51,42 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
 export default _default;
 
 export declare interface MetricProps {
+    /**
+     * The primary text that will show in the metric.
+     */
     value: number | string;
+    /**
+     * The label for the metric. Appears above the value.
+     */
     label: string;
-    size?: Size;
-    variant?: Variant;
     /**
-     * Currently only used when the variant is `accent`
+     * The variant of the metric. Defaults to `naked`.
+     */
+    variant?: MetricVariant;
+    /**
+     * The accent color for the metric. Defaults to `teal`. Currently only used when the variant = `accent`.
      */
     accentColor?: StashColor;
+    /**
+     * Controls the size of the metric via text size adjustments.
+     */
+    size?: MetricSize;
 }
 
-export declare type Size = `${Sizes}`;
+export declare type MetricSize = `${MetricSizes}`;
 
-export declare enum Sizes {
+export declare enum MetricSizes {
     Small = "small",
     Standard = "standard"
 }
 
+export declare type MetricVariant = `${MetricVariants}`;
+
+export declare enum MetricVariants {
+    Accent = "accent",
+    Naked = "naked"
+}
+
 declare type StashColor = `${StashColors}`;
 
 declare enum StashColors {
@@ -178,11 +194,4 @@ declare enum StashColors {
     Black = "black"
 }
 
-export declare type Variant = `${Variants}`;
-
-export declare enum Variants {
-    Accent = "accent",
-    Naked = "naked"
-}
-
 export { }