@rotki/ui-library 2.12.1 → 2.12.2

package/dist/components/accordions/accordion/RuiAccordion.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, useId, ref, computed, createElementBlock, openBlock, mergeProps, createCommentVNode, unref, normalizeClass, createElementVNode, createVNode, renderSlot, normalizeStyle } from "vue";
+import { defineComponent, useId, ref, computed, openBlock, createElementBlock, mergeProps, unref, normalizeClass, createElementVNode, renderSlot, createVNode, createCommentVNode, normalizeStyle } from "vue";
 import RuiIcon from "../../icons/RuiIcon.vue.js";
 import { useElementSize } from "@vueuse/core";
 import { get } from "@vueuse/shared";

package/dist/components/accordions/accordions/RuiAccordions.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, ref, useSlots, computed, watch, createElementBlock, openBlock, normalizeProps, guardReactiveProps, Fragment, renderList, unref, createBlock, resolveDynamicComponent } from "vue";
+import { defineComponent, toRefs, ref, useSlots, computed, watch, openBlock, createElementBlock, normalizeProps, guardReactiveProps, Fragment, renderList, unref, createBlock, resolveDynamicComponent } from "vue";
 import { get, set } from "@vueuse/shared";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{

package/dist/components/alerts/RuiAlert.vue.d.ts

@@ -16,11 +16,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    close: () => any;
     action: () => any;
+    close: () => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onClose?: (() => any) | undefined;
     onAction?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
 }>, {
     title: string;
     variant: "default" | "filled" | "outlined";

package/dist/components/alerts/RuiAlert.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, computed, createElementBlock, openBlock, mergeProps, unref, createElementVNode, createCommentVNode, normalizeClass, createVNode, renderSlot, createTextVNode, toDisplayString, withCtx } from "vue";
+import { defineComponent, toRefs, computed, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, createVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, withCtx } from "vue";
 import RuiButton from "../buttons/button/RuiButton.vue.js";
 import RuiIcon from "../icons/RuiIcon.vue.js";
 import { get } from "@vueuse/shared";

package/dist/components/buttons/button/RuiButton.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, createBlock, openBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot, createCommentVNode, createElementBlock, normalizeClass } from "vue";
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot, createCommentVNode, createElementBlock, normalizeClass } from "vue";
 import RuiProgress from "../../progress/RuiProgress.vue.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{

package/dist/components/buttons/button-group/RuiButtonGroup.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, useSlots, toRefs, computed, useCssModule, createElementBlock, openBlock, mergeProps, unref, Fragment, renderList, createBlock, resolveDynamicComponent, normalizeClass, isVNode } from "vue";
+import { defineComponent, useSlots, toRefs, computed, useCssModule, openBlock, createElementBlock, mergeProps, unref, Fragment, renderList, createBlock, resolveDynamicComponent, normalizeClass, isVNode } from "vue";
 import { get } from "@vueuse/shared";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{

package/dist/components/calendar/RuiCalendar.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, mergeModels, useModel, ref, computed, provide, watch, createElementBlock, openBlock, normalizeClass, unref, createVNode } from "vue";
+import { defineComponent, useModel, ref, computed, provide, watch, openBlock, createElementBlock, normalizeClass, unref, createVNode, mergeModels } from "vue";
 import { isDefined, get, set } from "@vueuse/core";
 import { CalendarStateSymbol } from "./state.js";
 import { useRotkiTheme } from "../../composables/theme.js";

package/dist/components/calendar/RuiCalendarGrid.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, mergeModels, useModel, inject, ref, watch, createElementBlock, openBlock, createElementVNode, Fragment, renderList, unref, toDisplayString, withModifiers, normalizeClass } from "vue";
+import { defineComponent, useModel, inject, ref, watch, openBlock, createElementBlock, createElementVNode, Fragment, renderList, unref, toDisplayString, withModifiers, normalizeClass, mergeModels } from "vue";
 import { get, isDefined, set } from "@vueuse/core";
 import { CalendarStateSymbol, getDaysOfWeek } from "./state.js";
 const _hoisted_1 = { class: "calendar-grid" };

package/dist/components/calendar/RuiCalendarHeader.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, mergeModels, useModel, ref, inject, computed, createElementBlock, openBlock, createVNode, createElementVNode, withModifiers, withCtx, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, useModel, ref, inject, computed, openBlock, createElementBlock, createVNode, withModifiers, withCtx, createElementVNode, createTextVNode, toDisplayString, mergeModels } from "vue";
 import { isDefined, get, set } from "@vueuse/core";
 import RuiButton from "../buttons/button/RuiButton.vue.js";
 import { CalendarStateSymbol } from "./state.js";

package/dist/components/calendar/RuiCalendarMenu.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, mergeModels, useModel, ref, inject, watch, createBlock, openBlock, withCtx, createElementVNode, createElementBlock, createCommentVNode, createVNode, withModifiers, unref, toDisplayString, Fragment, renderList, normalizeClass } from "vue";
+import { defineComponent, useModel, ref, inject, watch, openBlock, createBlock, withCtx, createElementVNode, createVNode, withModifiers, unref, toDisplayString, createElementBlock, Fragment, renderList, normalizeClass, createCommentVNode, mergeModels } from "vue";
 import { get, set, isDefined } from "@vueuse/core";
 import { getShortMonthNames, CalendarStateSymbol } from "./state.js";
 import RuiIcon from "../icons/RuiIcon.vue.js";

package/dist/components/cards/RuiCard.vue.d.ts

@@ -24,10 +24,10 @@ type __VLS_Slots = {} & {
     footer?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    dense: boolean;
     variant: "flat" | "outlined";
     rounded: "sm" | "md" | "lg";
     elevation: number;
+    dense: boolean;
     contentClass: string;
     divide: boolean;
     noPadding: boolean;

package/dist/components/cards/RuiCard.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, useSlots, computed, createElementBlock, openBlock, mergeProps, createCommentVNode, renderSlot, unref, normalizeClass, createBlock, createSlots, withCtx } from "vue";
+import { defineComponent, useSlots, computed, openBlock, createElementBlock, mergeProps, unref, normalizeClass, renderSlot, createCommentVNode, createBlock, createSlots, withCtx } from "vue";
 import RuiCardHeader from "./RuiCardHeader.vue.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{

package/dist/components/cards/RuiCardHeader.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, createElementBlock, openBlock, mergeProps, createCommentVNode, createElementVNode, normalizeClass, renderSlot } from "vue";
+import { defineComponent, openBlock, createElementBlock, mergeProps, normalizeClass, renderSlot, createCommentVNode, createElementVNode } from "vue";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiCardHeader",

package/dist/components/chips/RuiChip.vue.d.ts

@@ -27,9 +27,9 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     "onClick:close"?: (() => any) | undefined;
 }>, {
     size: "sm" | "md";
+    variant: "filled" | "outlined";
     color: "grey" | ContextColorsType;
     disabled: boolean;
-    variant: "filled" | "outlined";
     contentClass: string;
     closeable: boolean;
     tile: boolean;

package/dist/components/chips/RuiChip.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, computed, createElementBlock, openBlock, mergeProps, unref, createCommentVNode, createElementVNode, normalizeClass, renderSlot, withModifiers, createVNode } from "vue";
+import { defineComponent, toRefs, computed, openBlock, createElementBlock, mergeProps, unref, normalizeClass, renderSlot, createCommentVNode, createElementVNode, withModifiers, createVNode } from "vue";
 import { logicOr, logicNot } from "@vueuse/math";
 import { get, objectOmit } from "@vueuse/shared";
 import RuiIcon from "../icons/RuiIcon.vue.js";

package/dist/components/color-picker/RuiColorBoard.vue2.js

@@ -1,7 +1,8 @@
-import { defineComponent, reactive, ref, computed, getCurrentInstance, onMounted, createElementBlock, openBlock, mergeProps, unref, createElementVNode, normalizeClass, normalizeStyle } from "vue";
+import { defineComponent, reactive, ref, computed, getCurrentInstance, onMounted, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, normalizeStyle } from "vue";
 import { get, set, clamp } from "@vueuse/shared";
 import { useElementDrag, Color } from "./utils.js";
 import { whenever } from "@vueuse/core";
+const _hoisted_1 = ["aria-valuetext"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiColorBoard",
@@ -76,6 +77,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", mergeProps({
         ref_key: "wrapper",
         ref: wrapper,
+        role: "slider",
+        "aria-label": "Color saturation and brightness",
+        "aria-valuetext": `Saturation ${Math.round(unref(state).saturation * 100)}%, Brightness ${Math.round(unref(state).brightness * 100)}%`,
         class: ["rui-color-board", _ctx.$style.saturation]
       }, _ctx.$attrs, {
         style: { backgroundColor: unref(state).hexString },
@@ -92,7 +96,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: normalizeClass(_ctx.$style.cursor),
           style: normalizeStyle(unref(cursorStyle))
         }, null, 6)
-      ], 16);
+      ], 16, _hoisted_1);
     };
   }
 });

package/dist/components/color-picker/RuiColorBoard.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorBoard.vue2.js","sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst props = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  (e: 'update:board', event: { saturation: number; brightness: number }): void;\n}>();\n\nfunction hueToHex(hue: number) {\n  return new Color({ h: hue, s: 1, v: 1 }).hexString;\n}\n\nconst state = reactive({\n  hexString: hueToHex(props.color.hue),\n  saturation: props.color.saturation,\n  brightness: props.color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst cursorStyle = computed(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nconst wrapper = ref<HTMLElement>();\n\nfunction updatePosition() {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, (1 - state.brightness));\n}\n\nconst instance = getCurrentInstance();\n\nconst {\n  handleClick,\n  onMouseDown,\n} = useElementDrag(emitColor);\n\nfunction emitColor(x: number, y: number) {\n  if (!instance)\n    return;\n\n  const el = instance.vnode.el;\n  const rect = el?.getBoundingClientRect();\n\n  if (!rect)\n    return;\n\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nonMounted(() => {\n  updatePosition();\n});\n\nwhenever(\n  () => props.color,\n  (value) => {\n    state.hexString = hueToHex(value.hue);\n    state.saturation = value.saturation;\n    state.brightness = value.brightness;\n    updatePosition();\n  },\n  { deep: true },\n);\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    class=\"rui-color-board\"\n    :class=\"$style.saturation\"\n    v-bind=\"$attrs\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n  >\n    <div :class=\"$style.saturation__white\" />\n    <div :class=\"$style.saturation__black\" />\n    <div\n      :class=\"$style.cursor\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.saturation {\n  @apply relative w-full h-40 overflow-hidden cursor-pointer;\n\n  &__white,\n  &__black {\n    @apply absolute top-0 left-0 right-0 bottom-0 to-transparent;\n  }\n\n  &__black {\n    @apply bg-gradient-to-t from-black;\n  }\n\n  &__white {\n    @apply bg-gradient-to-r from-white;\n  }\n}\n\n.cursor {\n  @apply absolute w-5 h-5 transform -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow rounded-full;\n\n  &:after {\n    content: '';\n    @apply absolute w-full h-full rounded-full border-2 border-black/15;\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","$style","$attrs","_unref","_createElementVNode","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;AASA,UAAM,QAAQ;AAId,UAAM,OAAO;AAIb,aAAS,SAAS,KAAa;AAC7B,aAAO,IAAI,MAAM,EAAE,GAAG,KAAK,GAAG,GAAG,GAAG,EAAA,CAAG,EAAE;AAAA,IAC3C;AAEA,UAAM,QAAQ,SAAS;AAAA,MACrB,WAAW,SAAS,MAAM,MAAM,GAAG;AAAA,MACnC,YAAY,MAAM,MAAM;AAAA,MACxB,YAAY,MAAM,MAAM;AAAA,IAAA,CACzB;AAED,UAAM,YAAY,IAAY,CAAC;AAC/B,UAAM,aAAa,IAAY,CAAC;AAEhC,UAAM,cAAc,SAAS,OAAO;AAAA,MAClC,KAAK,GAAG,IAAI,SAAS,IAAI,GAAG;AAAA,MAC5B,MAAM,GAAG,IAAI,UAAU,IAAI,GAAG;AAAA,IAAA,EAC9B;AAEF,UAAM,UAAU,IAAA;AAEhB,aAAS,iBAAiB;AACxB,UAAI,YAAY,MAAM,UAAU;AAChC,UAAI,WAAY,IAAI,MAAM,UAAW;AAAA,IACvC;AAEA,UAAM,WAAW,mBAAA;AAEjB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,IAAA,IACE,eAAe,SAAS;AAE5B,aAAS,UAAU,GAAW,GAAW;AACvC,UAAI,CAAC;AACH;AAEF,YAAM,KAAK,SAAS,MAAM;AAC1B,YAAM,OAAO,IAAI,sBAAA;AAEjB,UAAI,CAAC;AACH;AAEF,YAAM,EAAE,OAAO,QAAQ,MAAM,QAAQ;AACrC,UAAI,cAAc,IAAI;AACtB,UAAI,cAAc,IAAI;AAEtB,oBAAc,MAAM,aAAa,GAAG,KAAK;AACzC,oBAAc,MAAM,aAAa,GAAG,MAAM;AAE1C,YAAM,aAAa,cAAc;AACjC,YAAM,aAAa,MAAM,EAAE,cAAc,UAAU,GAAG,GAAG,CAAC;AAE1D,UAAI,YAAY,cAAc,KAAK;AACnC,UAAI,WAAW,cAAc,MAAM;AAEnC,YAAM,aAAa;AACnB,YAAM,aAAa;AAEnB,WAAK,gBAAgB,EAAE,YAAY,WAAA,CAAY;AAAA,IACjD;AAEA,cAAU,MAAM;AACd,qBAAA;AAAA,IACF,CAAC;AAED;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,CAAC,UAAU;AACT,cAAM,YAAY,SAAS,MAAM,GAAG;AACpC,cAAM,aAAa,MAAM;AACzB,cAAM,aAAa,MAAM;AACzB,uBAAA;AAAA,MACF;AAAA,MACA,EAAE,MAAM,KAAA;AAAA,IAAK;;AAKb,aAAAA,UAAA,GAAAC,mBAeM,OAfNC,WAeM;AAAA,iBAdA;AAAA,QAAJ,KAAI;AAAA,QACJ,OAAK,CAAC,mBACEC,KAAAA,OAAO,UAAU;AAAA,MAAA,GACjBC,KAAAA,QAAM;AAAA,QACb,OAAK,EAAA,iBAAqBC,MAAA,KAAA,EAAM,UAAA;AAAA,QAChC,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEA,MAAA,WAAA,EAAY,MAAM;AAAA,QACzB,aAAS,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEA,MAAA,WAAA,EAAY,MAAM;AAAA,MAAA;QAE9BC,mBAAyC,OAAA;AAAA,UAAnC,OAAKC,eAAEJ,KAAAA,OAAO,iBAAiB;AAAA,QAAA;QACrCG,mBAAyC,OAAA;AAAA,UAAnC,OAAKC,eAAEJ,KAAAA,OAAO,iBAAiB;AAAA,QAAA;QACrCG,mBAGE,OAAA;AAAA,UAFC,OAAKC,eAAEJ,KAAAA,OAAO,MAAM;AAAA,UACpB,sBAAOE,MAAA,WAAA,CAAW;AAAA,QAAA;;;;;"}
+{"version":3,"file":"RuiColorBoard.vue2.js","sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst props = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  (e: 'update:board', event: { saturation: number; brightness: number }): void;\n}>();\n\nfunction hueToHex(hue: number) {\n  return new Color({ h: hue, s: 1, v: 1 }).hexString;\n}\n\nconst state = reactive({\n  hexString: hueToHex(props.color.hue),\n  saturation: props.color.saturation,\n  brightness: props.color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst cursorStyle = computed(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nconst wrapper = ref<HTMLElement>();\n\nfunction updatePosition() {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, (1 - state.brightness));\n}\n\nconst instance = getCurrentInstance();\n\nconst {\n  handleClick,\n  onMouseDown,\n} = useElementDrag(emitColor);\n\nfunction emitColor(x: number, y: number) {\n  if (!instance)\n    return;\n\n  const el = instance.vnode.el;\n  const rect = el?.getBoundingClientRect();\n\n  if (!rect)\n    return;\n\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nonMounted(() => {\n  updatePosition();\n});\n\nwhenever(\n  () => props.color,\n  (value) => {\n    state.hexString = hueToHex(value.hue);\n    state.saturation = value.saturation;\n    state.brightness = value.brightness;\n    updatePosition();\n  },\n  { deep: true },\n);\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    class=\"rui-color-board\"\n    :class=\"$style.saturation\"\n    v-bind=\"$attrs\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n  >\n    <div :class=\"$style.saturation__white\" />\n    <div :class=\"$style.saturation__black\" />\n    <div\n      :class=\"$style.cursor\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.saturation {\n  @apply relative w-full h-40 overflow-hidden cursor-pointer;\n\n  &__white,\n  &__black {\n    @apply absolute top-0 left-0 right-0 bottom-0 to-transparent;\n  }\n\n  &__black {\n    @apply bg-gradient-to-t from-black;\n  }\n\n  &__white {\n    @apply bg-gradient-to-r from-white;\n  }\n}\n\n.cursor {\n  @apply absolute w-5 h-5 transform -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow rounded-full;\n\n  &:after {\n    content: '';\n    @apply absolute w-full h-full rounded-full border-2 border-black/15;\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_unref","$style","$attrs","_createElementVNode","_normalizeClass"],"mappings":"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"}

package/dist/components/color-picker/RuiColorDisplay.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, createBlock, openBlock, mergeProps, withCtx, createElementVNode, createElementBlock, createCommentVNode, normalizeClass, unref, normalizeStyle } from "vue";
+import { defineComponent, toRefs, openBlock, createBlock, mergeProps, withCtx, createElementVNode, normalizeClass, unref, createElementBlock, createCommentVNode, normalizeStyle } from "vue";
 import RuiTooltip from "../overlays/tooltip/RuiTooltip.vue.js";
 import { useClipboard } from "@vueuse/core";
 const _hoisted_1 = {

package/dist/components/color-picker/RuiColorHue.vue2.js

@@ -1,6 +1,7 @@
-import { defineComponent, useModel, ref, computed, getCurrentInstance, onMounted, watch, createElementBlock, openBlock, mergeProps, unref, createElementVNode, normalizeStyle, normalizeClass } from "vue";
+import { defineComponent, useModel, ref, computed, getCurrentInstance, onMounted, watch, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeStyle, normalizeClass } from "vue";
 import { get, set, clamp } from "@vueuse/shared";
 import { useElementDrag, roundTwoDecimal } from "./utils.js";
+const _hoisted_1 = ["aria-valuenow"];
 const cursorWidth = 16;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -70,6 +71,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", mergeProps({
         ref_key: "barElement",
         ref: barElement,
+        role: "slider",
+        "aria-label": "Hue",
+        "aria-valuenow": modelValue.value,
+        "aria-valuemin": "0",
+        "aria-valuemax": "360",
         class: [_ctx.$style.bar, "rui-color-hue"]
       }, _ctx.$attrs, {
         onClick: _cache[0] || (_cache[0] = ($event) => unref(handleClick)($event)),
@@ -79,7 +85,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: normalizeClass(_ctx.$style.cursor),
           style: normalizeStyle(unref(cursorStyle))
         }, null, 6)
-      ], 16);
+      ], 16, _hoisted_1);
     };
   }
 });

package/dist/components/color-picker/RuiColorHue.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorHue.vue2.js","sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { roundTwoDecimal, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorHue',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ required: true });\n\nconst barElement = ref<HTMLElement>();\n\nconst cursorWidth = 16;\n\nfunction getLimit(width: number) {\n  const lowerLimit = cursorWidth / 2;\n  const upperLimit = width - lowerLimit;\n  const availableWidth = upperLimit - lowerLimit;\n\n  return { lowerLimit, upperLimit, availableWidth };\n}\n\nconst cursorLeft = ref<string>('');\n\nfunction updatePosition() {\n  set(cursorLeft, getCursorLeft().toString());\n}\n\nconst cursorStyle = computed(() => ({\n  left: get(cursorLeft),\n}));\n\nconst instance = getCurrentInstance();\n\nfunction getCursorLeft() {\n  if (!instance)\n    return 0;\n\n  const el = instance.vnode.el;\n  const rect = el?.getBoundingClientRect();\n\n  if (!rect)\n    return 0;\n\n  const actualWidth = rect.width;\n  const { lowerLimit, availableWidth } = getLimit(actualWidth);\n\n  const hueVal = get(modelValue);\n  const usedHue = hueVal === 360 ? 360 : hueVal % 360;\n\n  const percentage = roundTwoDecimal((usedHue / 360) * (availableWidth / actualWidth) * 100);\n  return `calc(${percentage}% + ${lowerLimit}px)`;\n}\n\nfunction emitHue(x: number) {\n  if (!instance)\n    return;\n\n  const el = instance.vnode.el;\n  const rect = el?.getBoundingClientRect();\n\n  if (!rect)\n    return;\n\n  let calculatedX = x - rect.left;\n\n  const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);\n  calculatedX = clamp(calculatedX, lowerLimit, upperLimit);\n\n  set(modelValue, Math.round(((calculatedX - lowerLimit) / availableWidth) * 360));\n}\n\nconst {\n  handleClick,\n  onMouseDown,\n} = useElementDrag(emitHue);\n\nonMounted(() => {\n  updatePosition();\n});\n\nwatch(modelValue, () => {\n  updatePosition();\n});\n</script>\n\n<template>\n  <div\n    ref=\"barElement\"\n    :class=\"$style.bar\"\n    class=\"rui-color-hue\"\n    v-bind=\"$attrs\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n  >\n    <div\n      :class=\"$style.cursor\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.bar {\n  @apply relative w-full h-3.5 rounded-full cursor-pointer;\n\n  background: linear-gradient(\n    to right,\n    rgb(255, 0, 0) 0%,\n    rgb(255, 255, 0) 16.66%,\n    rgb(0, 255, 0) 33.33%,\n    rgb(0, 255, 255) 50%,\n    rgb(0, 0, 255) 66.66%,\n    rgb(255, 0, 255) 83.33%,\n    rgb(255, 0, 0) 100%\n  );\n}\n\n.cursor {\n  @apply absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-2 bg-white rounded-full;\n}\n</style>\n"],"names":["_useModel","_openBlock","_createElementBlock","_mergeProps","$style","$attrs","_unref","_createElementVNode","_normalizeClass"],"mappings":";;;AAaA,MAAM,cAAc;;;;;;;;;;;;;AAJpB,UAAM,aAAaA,SAAmB,SAAA,YAAmB;AAEzD,UAAM,aAAa,IAAA;AAInB,aAAS,SAAS,OAAe;AAC/B,YAAM,aAAa,cAAc;AACjC,YAAM,aAAa,QAAQ;AAC3B,YAAM,iBAAiB,aAAa;AAEpC,aAAO,EAAE,YAAY,YAAY,eAAA;AAAA,IACnC;AAEA,UAAM,aAAa,IAAY,EAAE;AAEjC,aAAS,iBAAiB;AACxB,UAAI,YAAY,cAAA,EAAgB,SAAA,CAAU;AAAA,IAC5C;AAEA,UAAM,cAAc,SAAS,OAAO;AAAA,MAClC,MAAM,IAAI,UAAU;AAAA,IAAA,EACpB;AAEF,UAAM,WAAW,mBAAA;AAEjB,aAAS,gBAAgB;AACvB,UAAI,CAAC;AACH,eAAO;AAET,YAAM,KAAK,SAAS,MAAM;AAC1B,YAAM,OAAO,IAAI,sBAAA;AAEjB,UAAI,CAAC;AACH,eAAO;AAET,YAAM,cAAc,KAAK;AACzB,YAAM,EAAE,YAAY,mBAAmB,SAAS,WAAW;AAE3D,YAAM,SAAS,IAAI,UAAU;AAC7B,YAAM,UAAU,WAAW,MAAM,MAAM,SAAS;AAEhD,YAAM,aAAa,gBAAiB,UAAU,OAAQ,iBAAiB,eAAe,GAAG;AACzF,aAAO,QAAQ,UAAU,OAAO,UAAU;AAAA,IAC5C;AAEA,aAAS,QAAQ,GAAW;AAC1B,UAAI,CAAC;AACH;AAEF,YAAM,KAAK,SAAS,MAAM;AAC1B,YAAM,OAAO,IAAI,sBAAA;AAEjB,UAAI,CAAC;AACH;AAEF,UAAI,cAAc,IAAI,KAAK;AAE3B,YAAM,EAAE,YAAY,YAAY,mBAAmB,SAAS,KAAK,KAAK;AACtE,oBAAc,MAAM,aAAa,YAAY,UAAU;AAEvD,UAAI,YAAY,KAAK,OAAQ,cAAc,cAAc,iBAAkB,GAAG,CAAC;AAAA,IACjF;AAEA,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,IAAA,IACE,eAAe,OAAO;AAE1B,cAAU,MAAM;AACd,qBAAA;AAAA,IACF,CAAC;AAED,UAAM,YAAY,MAAM;AACtB,qBAAA;AAAA,IACF,CAAC;;AAIC,aAAAC,UAAA,GAAAC,mBAYM,OAZNC,WAYM;AAAA,iBAXA;AAAA,QAAJ,KAAI;AAAA,QACH,OAAK,CAAEC,KAAAA,OAAO,KACT,eAAe;AAAA,MAAA,GACbC,KAAAA,QAAM;AAAA,QACb,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEC,MAAA,WAAA,EAAY,MAAM;AAAA,QACzB,aAAS,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEA,MAAA,WAAA,EAAY,MAAM;AAAA,MAAA;QAE9BC,mBAGE,OAAA;AAAA,UAFC,OAAKC,eAAEJ,KAAAA,OAAO,MAAM;AAAA,UACpB,sBAAOE,MAAA,WAAA,CAAW;AAAA,QAAA;;;;;"}
+{"version":3,"file":"RuiColorHue.vue2.js","sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { roundTwoDecimal, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorHue',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ required: true });\n\nconst barElement = ref<HTMLElement>();\n\nconst cursorWidth = 16;\n\nfunction getLimit(width: number) {\n  const lowerLimit = cursorWidth / 2;\n  const upperLimit = width - lowerLimit;\n  const availableWidth = upperLimit - lowerLimit;\n\n  return { lowerLimit, upperLimit, availableWidth };\n}\n\nconst cursorLeft = ref<string>('');\n\nfunction updatePosition() {\n  set(cursorLeft, getCursorLeft().toString());\n}\n\nconst cursorStyle = computed(() => ({\n  left: get(cursorLeft),\n}));\n\nconst instance = getCurrentInstance();\n\nfunction getCursorLeft() {\n  if (!instance)\n    return 0;\n\n  const el = instance.vnode.el;\n  const rect = el?.getBoundingClientRect();\n\n  if (!rect)\n    return 0;\n\n  const actualWidth = rect.width;\n  const { lowerLimit, availableWidth } = getLimit(actualWidth);\n\n  const hueVal = get(modelValue);\n  const usedHue = hueVal === 360 ? 360 : hueVal % 360;\n\n  const percentage = roundTwoDecimal((usedHue / 360) * (availableWidth / actualWidth) * 100);\n  return `calc(${percentage}% + ${lowerLimit}px)`;\n}\n\nfunction emitHue(x: number) {\n  if (!instance)\n    return;\n\n  const el = instance.vnode.el;\n  const rect = el?.getBoundingClientRect();\n\n  if (!rect)\n    return;\n\n  let calculatedX = x - rect.left;\n\n  const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);\n  calculatedX = clamp(calculatedX, lowerLimit, upperLimit);\n\n  set(modelValue, Math.round(((calculatedX - lowerLimit) / availableWidth) * 360));\n}\n\nconst {\n  handleClick,\n  onMouseDown,\n} = useElementDrag(emitHue);\n\nonMounted(() => {\n  updatePosition();\n});\n\nwatch(modelValue, () => {\n  updatePosition();\n});\n</script>\n\n<template>\n  <div\n    ref=\"barElement\"\n    role=\"slider\"\n    aria-label=\"Hue\"\n    :aria-valuenow=\"modelValue\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"360\"\n    :class=\"$style.bar\"\n    class=\"rui-color-hue\"\n    v-bind=\"$attrs\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n  >\n    <div\n      :class=\"$style.cursor\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.bar {\n  @apply relative w-full h-3.5 rounded-full cursor-pointer;\n\n  background: linear-gradient(\n    to right,\n    rgb(255, 0, 0) 0%,\n    rgb(255, 255, 0) 16.66%,\n    rgb(0, 255, 0) 33.33%,\n    rgb(0, 255, 255) 50%,\n    rgb(0, 0, 255) 66.66%,\n    rgb(255, 0, 255) 83.33%,\n    rgb(255, 0, 0) 100%\n  );\n}\n\n.cursor {\n  @apply absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-2 bg-white rounded-full;\n}\n</style>\n"],"names":["_useModel","_openBlock","_createElementBlock","_mergeProps","$style","$attrs","_unref","_createElementVNode","_normalizeClass"],"mappings":";;;;AAaA,MAAM,cAAc;;;;;;;;;;;;;AAJpB,UAAM,aAAaA,SAAmB,SAAA,YAAmB;AAEzD,UAAM,aAAa,IAAA;AAInB,aAAS,SAAS,OAAe;AAC/B,YAAM,aAAa,cAAc;AACjC,YAAM,aAAa,QAAQ;AAC3B,YAAM,iBAAiB,aAAa;AAEpC,aAAO,EAAE,YAAY,YAAY,eAAA;AAAA,IACnC;AAEA,UAAM,aAAa,IAAY,EAAE;AAEjC,aAAS,iBAAiB;AACxB,UAAI,YAAY,cAAA,EAAgB,SAAA,CAAU;AAAA,IAC5C;AAEA,UAAM,cAAc,SAAS,OAAO;AAAA,MAClC,MAAM,IAAI,UAAU;AAAA,IAAA,EACpB;AAEF,UAAM,WAAW,mBAAA;AAEjB,aAAS,gBAAgB;AACvB,UAAI,CAAC;AACH,eAAO;AAET,YAAM,KAAK,SAAS,MAAM;AAC1B,YAAM,OAAO,IAAI,sBAAA;AAEjB,UAAI,CAAC;AACH,eAAO;AAET,YAAM,cAAc,KAAK;AACzB,YAAM,EAAE,YAAY,mBAAmB,SAAS,WAAW;AAE3D,YAAM,SAAS,IAAI,UAAU;AAC7B,YAAM,UAAU,WAAW,MAAM,MAAM,SAAS;AAEhD,YAAM,aAAa,gBAAiB,UAAU,OAAQ,iBAAiB,eAAe,GAAG;AACzF,aAAO,QAAQ,UAAU,OAAO,UAAU;AAAA,IAC5C;AAEA,aAAS,QAAQ,GAAW;AAC1B,UAAI,CAAC;AACH;AAEF,YAAM,KAAK,SAAS,MAAM;AAC1B,YAAM,OAAO,IAAI,sBAAA;AAEjB,UAAI,CAAC;AACH;AAEF,UAAI,cAAc,IAAI,KAAK;AAE3B,YAAM,EAAE,YAAY,YAAY,mBAAmB,SAAS,KAAK,KAAK;AACtE,oBAAc,MAAM,aAAa,YAAY,UAAU;AAEvD,UAAI,YAAY,KAAK,OAAQ,cAAc,cAAc,iBAAkB,GAAG,CAAC;AAAA,IACjF;AAEA,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,IAAA,IACE,eAAe,OAAO;AAE1B,cAAU,MAAM;AACd,qBAAA;AAAA,IACF,CAAC;AAED,UAAM,YAAY,MAAM;AACtB,qBAAA;AAAA,IACF,CAAC;;AAIC,aAAAC,UAAA,GAAAC,mBAiBM,OAjBNC,WAiBM;AAAA,iBAhBA;AAAA,QAAJ,KAAI;AAAA,QACJ,MAAK;AAAA,QACL,cAAW;AAAA,QACV,iBAAe,WAAA;AAAA,QAChB,iBAAc;AAAA,QACd,iBAAc;AAAA,QACb,OAAK,CAAEC,KAAAA,OAAO,KACT,eAAe;AAAA,MAAA,GACbC,KAAAA,QAAM;AAAA,QACb,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEC,MAAA,WAAA,EAAY,MAAM;AAAA,QACzB,aAAS,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEA,MAAA,WAAA,EAAY,MAAM;AAAA,MAAA;QAE9BC,mBAGE,OAAA;AAAA,UAFC,OAAKC,eAAEJ,KAAAA,OAAO,MAAM;AAAA,UACpB,sBAAOE,MAAA,WAAA,CAAW;AAAA,QAAA;;;;;"}

package/dist/components/color-picker/RuiColorInput.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, useModel, ref, reactive, createElementBlock, openBlock, mergeProps, createElementVNode, createVNode, createBlock, unref, withCtx, Fragment, renderList, toDisplayString } from "vue";
+import { defineComponent, useModel, ref, reactive, openBlock, createElementBlock, mergeProps, createElementVNode, unref, createBlock, withCtx, Fragment, renderList, toDisplayString, createVNode } from "vue";
 import { get, clamp, set } from "@vueuse/shared";
 import tinycolor from "tinycolor2";
 import RuiButton from "../buttons/button/RuiButton.vue.js";

package/dist/components/color-picker/RuiColorPicker.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, reactive, watch, createElementBlock, openBlock, mergeProps, createVNode, createElementVNode, unref } from "vue";
+import { defineComponent, toRefs, reactive, watch, openBlock, createElementBlock, mergeProps, createVNode, unref, createElementVNode } from "vue";
 import RuiColorBoard from "./RuiColorBoard.vue.js";
 import _sfc_main$1 from "./RuiColorDisplay.vue.js";
 import RuiColorHue from "./RuiColorHue.vue.js";
@@ -41,7 +41,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("update:model-value", state2.color.hex);
     }, { immediate: true, deep: true });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", mergeProps({ class: "rui-color-picker relative select-none bg-initial" }, _ctx.$attrs), [
+      return openBlock(), createElementBlock("div", mergeProps({
+        role: "application",
+        "aria-label": "Color picker",
+        class: "rui-color-picker relative select-none bg-initial"
+      }, _ctx.$attrs), [
         createVNode(RuiColorBoard, {
           color: unref(state).color,
           "onUpdate:board": _cache[0] || (_cache[0] = ($event) => onBoardChange($event))

package/dist/components/color-picker/RuiColorPicker.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorPicker.vue.js","sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { Color } from './utils';\n\nexport interface Props {\n  modelValue?: string;\n}\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props>(), { modelValue: '' });\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: string): void;\n}>();\n\nconst { modelValue } = toRefs(props);\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({ saturation, brightness }: { saturation: number; brightness: number }) {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n  { deep: true },\n);\n\nwatch(state, (state) => {\n  emit('update:model-value', state.color.hex);\n}, { immediate: true, deep: true });\n</script>\n\n<template>\n  <div\n    class=\"rui-color-picker relative select-none bg-initial\"\n    v-bind=\"$attrs\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"names":["state","_openBlock","_createElementBlock","_mergeProps","$attrs","_createVNode","_unref","_createElementVNode","RuiColorDisplay","RuiColorInput"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiBA,UAAM,QAAQ;AAEd,UAAM,OAAO;AAIb,UAAM,EAAE,WAAA,IAAe,OAAO,KAAK;AAEnC,UAAM,QAAQ,SAAS;AAAA,MACrB,OAAO,IAAI,MAAM,IAAI,UAAU,CAAC;AAAA,IAAA,CACjC;AAED,aAAS,cAAc,EAAE,YAAY,cAA0D;AAC7F,YAAM,MAAM,aAAa;AACzB,YAAM,MAAM,aAAa;AAAA,IAC3B;AAEA;AAAA,MACE;AAAA,MACA,CAAC,UAAkB;AACjB,YAAI,MAAM,MAAM,QAAQ;AACtB,gBAAM,QAAQ,IAAI,MAAM,KAAK;AAAA,MACjC;AAAA,MACA,EAAE,MAAM,KAAA;AAAA,IAAK;AAGf,UAAM,OAAO,CAACA,WAAU;AACtB,WAAK,sBAAsBA,OAAM,MAAM,GAAG;AAAA,IAC5C,GAAG,EAAE,WAAW,MAAM,MAAM,MAAM;;AAIhC,aAAAC,UAAA,GAAAC,mBAmBM,OAnBNC,WAmBM,EAlBJ,OAAM,mDAAA,GACEC,KAAAA,MAAM,GAAA;AAAA,QAEdC,YAGE,eAAA;AAAA,UAFC,OAAOC,MAAA,KAAA,EAAM;AAAA,UACb,kBAAY,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,cAAc,MAAM;AAAA,QAAA;QAErCC,mBAUM,OAVN,YAUM;AAAA,UATJA,mBAMM,OANN,YAMM;AAAA,YALJF,YAAkDG,aAAA;AAAA,cAAhC,OAAOF,MAAA,KAAA,EAAM,MAAM;AAAA,YAAA;YACrCD,YAGE,aAAA;AAAA,0BAFSC,MAAA,KAAA,EAAM,MAAM;AAAA,2EAAZA,MAAA,KAAA,EAAM,MAAM,MAAG;AAAA,cACxB,OAAM;AAAA,YAAA;;UAIVD,YAAuCI,aAAA;AAAA,YAAf,YAAAH,MAAA,KAAA,EAAM;AAAA,YAAN,uBAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAAA,MAAA,KAAA,EAAM,QAAK;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"RuiColorPicker.vue.js","sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { Color } from './utils';\n\nexport interface Props {\n  modelValue?: string;\n}\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props>(), { modelValue: '' });\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: string): void;\n}>();\n\nconst { modelValue } = toRefs(props);\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({ saturation, brightness }: { saturation: number; brightness: number }) {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n  { deep: true },\n);\n\nwatch(state, (state) => {\n  emit('update:model-value', state.color.hex);\n}, { immediate: true, deep: true });\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    class=\"rui-color-picker relative select-none bg-initial\"\n    v-bind=\"$attrs\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"names":["state","_openBlock","_createElementBlock","_mergeProps","$attrs","_createVNode","_unref","_createElementVNode","RuiColorDisplay","RuiColorInput"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiBA,UAAM,QAAQ;AAEd,UAAM,OAAO;AAIb,UAAM,EAAE,WAAA,IAAe,OAAO,KAAK;AAEnC,UAAM,QAAQ,SAAS;AAAA,MACrB,OAAO,IAAI,MAAM,IAAI,UAAU,CAAC;AAAA,IAAA,CACjC;AAED,aAAS,cAAc,EAAE,YAAY,cAA0D;AAC7F,YAAM,MAAM,aAAa;AACzB,YAAM,MAAM,aAAa;AAAA,IAC3B;AAEA;AAAA,MACE;AAAA,MACA,CAAC,UAAkB;AACjB,YAAI,MAAM,MAAM,QAAQ;AACtB,gBAAM,QAAQ,IAAI,MAAM,KAAK;AAAA,MACjC;AAAA,MACA,EAAE,MAAM,KAAA;AAAA,IAAK;AAGf,UAAM,OAAO,CAACA,WAAU;AACtB,WAAK,sBAAsBA,OAAM,MAAM,GAAG;AAAA,IAC5C,GAAG,EAAE,WAAW,MAAM,MAAM,MAAM;;AAIhC,aAAAC,UAAA,GAAAC,mBAqBM,OArBNC,WAqBM;AAAA,QApBJ,MAAK;AAAA,QACL,cAAW;AAAA,QACX,OAAM;AAAA,MAAA,GACEC,KAAAA,MAAM,GAAA;AAAA,QAEdC,YAGE,eAAA;AAAA,UAFC,OAAOC,MAAA,KAAA,EAAM;AAAA,UACb,kBAAY,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,cAAc,MAAM;AAAA,QAAA;QAErCC,mBAUM,OAVN,YAUM;AAAA,UATJA,mBAMM,OANN,YAMM;AAAA,YALJF,YAAkDG,aAAA;AAAA,cAAhC,OAAOF,MAAA,KAAA,EAAM,MAAM;AAAA,YAAA;YACrCD,YAGE,aAAA;AAAA,0BAFSC,MAAA,KAAA,EAAM,MAAM;AAAA,2EAAZA,MAAA,KAAA,EAAM,MAAM,MAAG;AAAA,cACxB,OAAM;AAAA,YAAA;;UAIVD,YAAuCI,aAAA;AAAA,YAAf,YAAAH,MAAA,KAAA,EAAM;AAAA,YAAN,uBAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAAA,MAAA,KAAA,EAAM,QAAK;AAAA,UAAA;;;;;;"}

package/dist/components/date-time-picker/RuiDateTimePicker.vue.d.ts

@@ -38,11 +38,11 @@ declare const props: Readonly<{}> & {
     readonly successMessages: string | string[];
     readonly required: boolean;
 } & {
-    readonly disabled: boolean;
-    readonly dense: boolean;
     readonly readonly: boolean;
+    readonly disabled: boolean;
     readonly required: boolean;
     readonly hideDetails: boolean;
+    readonly dense: boolean;
     readonly allowEmpty: boolean;
 };
 type __VLS_Slots = {
@@ -58,16 +58,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: number | Date | undefined) => any) | undefined;
 }>, {
     label: string;
-    disabled: boolean;
-    dense: boolean;
     readonly: boolean;
     variant: "default" | "filled" | "outlined";
     type: DateTimeModelType;
+    disabled: boolean;
     errorMessages: string | string[];
     successMessages: string | string[];
     hint: string;
     required: boolean;
     hideDetails: boolean;
+    dense: boolean;
     maxDate: Date | number | "now";
     minDate: Date | number;
     allowEmpty: boolean;

package/dist/components/date-time-picker/RuiDateTimePicker.vue2.js

@@ -1,5 +1,4 @@
-import { getRootAttrs, getNonRootAttrs } from "../../utils/helpers.js";
-import { defineComponent, mergeModels, useCssVars, unref, computed, useModel, ref, createBlock, openBlock, mergeProps, isRef, withCtx, createVNode, renderSlot, createElementVNode, createElementBlock, createCommentVNode, normalizeClass, createTextVNode, toDisplayString, withModifiers, nextTick } from "vue";
+import { defineComponent, useCssVars, unref, useModel, ref, computed, openBlock, createBlock, mergeProps, isRef, withCtx, createVNode, renderSlot, createElementVNode, createElementBlock, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, withModifiers, mergeModels, nextTick } from "vue";
 import { logicOr, logicAnd } from "@vueuse/math";
 import RuiButton from "../buttons/button/RuiButton.vue.js";
 import _sfc_main$1 from "./RuiDateTimePickerMenu.vue.js";
@@ -8,6 +7,7 @@ import { useInputHandler } from "./use-input-handler.js";
 import { useKeyboardHandler } from "./use-keyboard-handler.js";
 import RuiIcon from "../icons/RuiIcon.vue.js";
 import RuiMenu from "../overlays/menu/RuiMenu.vue.js";
+import { getRootAttrs, getNonRootAttrs } from "../../utils/helpers.js";
 import { useFocusWithin, useFocus, isDefined } from "@vueuse/core";
 import { get, set } from "@vueuse/shared";
 const _hoisted_1 = ["data-error", "tabindex"];
@@ -47,7 +47,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     useCssVars((_ctx) => ({
-      "a01b5b3e": unref(labelWithQuote)
+      "v5fc8ba2e": unref(labelWithQuote)
     }));
     const modelValue = useModel(__props, "modelValue");
     const props = __props;
@@ -233,7 +233,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "full-width": "",
         "disable-auto-focus": ""
       }, {
-        ...("getRootAttrs" in _ctx ? _ctx.getRootAttrs : unref(getRootAttrs))(_ctx.$attrs)
+        ...unref(getRootAttrs)(_ctx.$attrs)
       }), {
         activator: withCtx(({ attrs, open, hasError, hasSuccess }) => [
           createElementVNode("div", mergeProps(
@@ -256,7 +256,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]]
             },
             {
-              ...("getNonRootAttrs" in _ctx ? _ctx.getNonRootAttrs : unref(getNonRootAttrs))(_ctx.$attrs, ["onClick", "class"]),
+              ...unref(getNonRootAttrs)(_ctx.$attrs, ["onClick", "class"]),
               ...props.readonly ? {} : attrs
             },
             {

package/dist/components/date-time-picker/RuiDateTimePicker.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDateTimePicker.vue2.js","sources":["../../../src/components/date-time-picker/RuiDateTimePicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { DateTimeSegmentType } from '@/components/date-time-picker/types';\nimport type { TimePickerSelection } from '@/components/time-picker/RuiTimePicker.vue';\nimport { logicAnd, logicOr } from '@vueuse/math';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiDateTimePickerMenu from '@/components/date-time-picker/RuiDateTimePickerMenu.vue';\nimport { useDateTimeSelection } from '@/components/date-time-picker/use-date-time-selection';\nimport { useInputHandler } from '@/components/date-time-picker/use-input-handler';\nimport { useKeyboardHandler } from '@/components/date-time-picker/use-keyboard-handler';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\n\ntype DateFormat = 'year-first' | 'month-first' | 'day-first';\n\ntype DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';\n\ntype ModelValueType<T extends DateTimeModelType> =\n  T extends 'date' ? Date | undefined :\n    T extends 'epoch-ms' ? number | undefined :\n      T extends 'epoch' ? number | undefined :\n        Date | number | undefined;\n\nexport interface RuiDateTimePickerProps {\n  minDate?: Date | number;\n  maxDate?: Date | number | 'now';\n  format?: DateFormat;\n  type?: DateTimeModelType;\n  accuracy?: 'minute' | 'second' | 'millisecond';\n  disabled?: boolean;\n  allowEmpty?: boolean;\n  readonly?: boolean;\n  dense?: boolean;\n  label?: string;\n  variant?: 'default' | 'filled' | 'outlined';\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiDateTimePicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<ModelValueType<typeof props.type>>({ required: true });\n\nconst props = withDefaults(defineProps<RuiDateTimePickerProps>(), {\n  disabled: false,\n  readonly: false,\n  allowEmpty: false,\n  dense: false,\n  type: 'epoch-ms',\n  hideDetails: false,\n  label: 'Pick a date',\n  variant: 'default',\n  hint: undefined,\n  maxDate: undefined,\n  minDate: undefined,\n  format: 'day-first',\n  accuracy: 'minute',\n  errorMessages: () => [],\n  successMessages: () => [],\n  required: false,\n});\n\ndefineSlots<{\n  'menu-content': () => any;\n}>();\n\nconst baseFormats: Record<DateFormat, string> = {\n  'day-first': 'DD/MM/YYYY HH:mm',\n  'month-first': 'MM/DD/YYYY HH:mm',\n  'year-first': 'YYYY/MM/DD HH:mm',\n};\n\nconst isOpen = ref<boolean>(false);\nconst cursorPosition = ref<number>(0);\nconst currentValue = ref<number>();\n\nconst textInput = ref<HTMLInputElement>();\nconst activator = ref();\nconst menuWrapperRef = ref();\nconst calendarMenuOpen = ref<boolean>(false);\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\n\nconst {\n  clear: clearSelection,\n  getDateTime,\n  internalErrorMessages,\n  maxAllowedDate,\n  minAllowedDate,\n  segmentData,\n  selectedDate,\n  selectedDay,\n  selectedHour,\n  selectedMillisecond,\n  selectedMinute,\n  selectedMonth,\n  selectedSecond,\n  selectedTime,\n  selectedTimezone,\n  selectedYear,\n  setNow,\n  valueSet,\n} = useDateTimeSelection({\n  accuracy: props.accuracy,\n  allowEmpty: props.allowEmpty,\n  maxDate: props.maxDate,\n  minDate: props.minDate,\n  modelValue,\n  type: props.type,\n});\n\nconst { setValue, getCurrent } = useInputHandler(segmentData, currentValue);\n\nconst dateFormat = computed<string>(() => {\n  const dateFormat = props.format;\n  const format = baseFormats[dateFormat];\n  if (props.accuracy === 'second') {\n    return format.replace('HH:mm', 'HH:mm:ss');\n  }\n  else if (props.accuracy === 'millisecond') {\n    return format.replace('HH:mm', 'HH:mm:ss.SSS');\n  }\n  return format;\n});\n\nconst {\n  clear: clearSegment,\n  getCurrentSegment,\n  handleBlur,\n  handleClick,\n  handleFocus,\n  handleInput,\n  handleInputSelection,\n  handleKeyDown,\n  handleMouseDown,\n  handlePaste,\n  setSegment,\n} = useKeyboardHandler({\n  accuracy: props.accuracy,\n  currentValue,\n  cursorPosition,\n  dateFormat,\n  disabled: props.disabled,\n  getCurrent,\n  getDateTime,\n  readonly: props.readonly,\n  setValue,\n  textInput,\n});\n\nfunction handleInputClick(event: MouseEvent): void {\n  // Handle segment selection first, before any DOM changes from menu opening\n  handleClick(event);\n  // Open menu if not already open\n  if (!get(isOpen)) {\n    set(isOpen, true);\n  }\n}\n\nconst anyFocused = logicOr(activatorFocusedWithin, menuWrapperFocusedWithin);\n\nconst labelWithQuote = computed<string>(() => {\n  if (!props.label)\n    return '\"\\\\200B\"';\n\n  const asterisk = props.required ? '﹡' : '';\n  return `'  ${props.label}${asterisk}  '`;\n});\n\nconst isOutlined = computed<boolean>(() => props.variant === 'outlined');\n\nconst formattedDisplay = computed<string>(() => {\n  let result = get(dateFormat);\n\n  const replacements = [\n    { pattern: 'YYYY', value: getDisplayValue(selectedYear, 4) },\n    { pattern: 'MM', value: getDisplayValue(selectedMonth, 2) },\n    { pattern: 'DD', value: getDisplayValue(selectedDay, 2) },\n    { pattern: 'HH', value: getDisplayValue(selectedHour, 2) },\n    { pattern: 'mm', value: getDisplayValue(selectedMinute, 2) },\n    { pattern: 'ss', value: getDisplayValue(selectedSecond, 2) },\n    { pattern: 'SSS', value: getDisplayValue(selectedMillisecond, 3) },\n  ];\n\n  for (const { pattern, value } of replacements) {\n    if (value !== undefined) {\n      result = result.replace(pattern, value);\n    }\n  }\n\n  return result;\n});\n\nconst timeSelection = computed<TimePickerSelection>({\n  get() {\n    const type = getCurrentSegment()?.type;\n\n    if (type === 'mm') {\n      return 'minute';\n    }\n    else if (type === 'ss') {\n      return 'second';\n    }\n    else if (type === 'SSS') {\n      return 'millisecond';\n    }\n    return 'hour';\n  },\n  set(value: TimePickerSelection) {\n    let segmentType: DateTimeSegmentType = 'HH';\n    if (value === 'minute') {\n      segmentType = 'mm';\n    }\n    else if (value === 'second') {\n      segmentType = 'ss';\n    }\n    else if (value === 'millisecond') {\n      segmentType = 'SSS';\n    }\n\n    setSegment(segmentType);\n  },\n});\n\nconst float = logicAnd(logicOr(isOpen, valueSet, searchInputFocused), isOutlined);\n\nconst combinedErrorMessages = computed<string[]>(() => {\n  let propErrors: string[];\n  if (props.errorMessages) {\n    propErrors = Array.isArray(props.errorMessages)\n      ? props.errorMessages\n      : [props.errorMessages];\n  }\n  else {\n    propErrors = Array.isArray(props.errorMessages)\n      ? props.errorMessages\n      : [];\n  }\n  return [...propErrors, ...get(internalErrorMessages)];\n});\n\nfunction getDisplayValue(digit: Ref<number | undefined>, padding: number): string | undefined {\n  return isDefined(digit)\n    ? get(digit).toString().padStart(padding, '0')\n    : undefined;\n}\n\nasync function setInputFocus(): Promise<void> {\n  await nextTick(() => {\n    set(searchInputFocused, true);\n  });\n}\n\nfunction clear(segmentType?: string): void {\n  if (!segmentType) {\n    clearSelection();\n    set(currentValue, undefined);\n    return;\n  }\n\n  clearSegment(segmentType);\n}\n\nfunction arrowClicked(event: any): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    :class=\"$style.wrapper\"\n    :dense=\"dense\"\n    :hint=\"hint\"\n    :disabled=\"disabled\"\n    :success-messages=\"successMessages\"\n    :error-messages=\"combinedErrorMessages\"\n    :close-on-content-click=\"false\"\n    :show-details=\"!hideDetails\"\n    :persistent=\"calendarMenuOpen\"\n    :popper=\"{\n      placement: 'bottom-start',\n    }\"\n    full-width\n    disable-auto-focus\n    v-bind=\"{\n      ...getRootAttrs($attrs),\n    }\"\n  >\n    <template #activator=\"{ attrs, open, hasError, hasSuccess }\">\n      <div\n        ref=\"activator\"\n        class=\"group\"\n        :class=\"[\n          $style.activator,\n          {\n            [$style.disabled]: disabled,\n            [$style.readonly]: readonly,\n            [$style.outlined]: isOutlined,\n            [$style.dense]: dense,\n            [$style.float]: float,\n            [$style.opened]: open,\n            [$style['with-value']]: valueSet,\n            [$style['with-error']]: hasError,\n            [$style['with-success']]: hasSuccess && !hasError,\n          },\n        ]\"\n        v-bind=\"{\n          ...getNonRootAttrs($attrs, ['onClick', 'class']),\n          ...(props.readonly ? {} : attrs) }\n        \"\n        data-id=\"activator\"\n        :data-error=\"hasError ? '' : undefined\"\n        :tabindex=\"disabled || props.readonly ? -1 : 0\"\n        @click=\"setInputFocus()\"\n      >\n        <span\n          v-if=\"isOutlined && (searchInputFocused || open || valueSet)\"\n          data-id=\"label\"\n          :class=\"[\n            $style.label,\n            {\n              'absolute': isOutlined,\n              'pr-2': !valueSet && !open && isOutlined,\n            },\n          ]\"\n        >\n          {{ label }}\n          <span\n            v-if=\"props.required\"\n            data-id=\"required-indicator\"\n            class=\"text-rui-error\"\n          >\n            ﹡\n          </span>\n        </span>\n\n        <span :class=\"[$style.icon__wrapper, $style.icon__prepend]\">\n          <RuiIcon\n            :class=\"[$style.icon]\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-calendar-days\"\n          />\n        </span>\n\n        <div :class=\"$style.value\">\n          <input\n            ref=\"textInput\"\n            :disabled=\"disabled\"\n            :value=\"formattedDisplay\"\n            class=\"bg-transparent outline-none flex-1 min-w-0\"\n            type=\"text\"\n            :placeholder=\"dateFormat\"\n            :readonly=\"readonly\"\n            :aria-invalid=\"hasError\"\n            @mousedown=\"handleMouseDown($event)\"\n            @focus=\"handleFocus()\"\n            @blur=\"handleBlur()\"\n            @select=\"handleInputSelection($event)\"\n            @click.stop=\"handleInputClick($event)\"\n            @keydown=\"handleKeyDown($event)\"\n            @paste=\"handlePaste($event)\"\n            @input=\"handleInput($event)\"\n          />\n        </div>\n\n        <RuiButton\n          v-if=\"allowEmpty && valueSet && !disabled\"\n          variant=\"text\"\n          icon\n          data-id=\"clear-button\"\n          size=\"sm\"\n          tabindex=\"-1\"\n          color=\"error\"\n          class=\"group-hover:!visible\"\n          :class=\"[$style.clear, anyFocused && '!visible', {\n            'mr-2': !dense,\n          }]\"\n          @click.stop.prevent=\"clear()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"18\"\n          />\n        </RuiButton>\n\n        <span\n          :class=\"[$style.icon__wrapper, $style.icon__append]\"\n          data-id=\"append\"\n          @click=\"arrowClicked($event)\"\n        >\n          <RuiIcon\n            :class=\"[$style.icon, { 'rotate-180': open }]\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-chevron-down\"\n          />\n        </span>\n      </div>\n      <fieldset\n        v-if=\"isOutlined\"\n        :class=\"$style.fieldset\"\n      >\n        <legend :class=\"{ 'px-2': float }\" />\n      </fieldset>\n    </template>\n    <template #default>\n      <RuiDateTimePickerMenu\n        ref=\"menuWrapperRef\"\n        v-model:selected-date=\"selectedDate\"\n        v-model:selected-time=\"selectedTime\"\n        v-model:selected-hour=\"selectedHour\"\n        v-model:selected-minute=\"selectedMinute\"\n        v-model:selected-second=\"selectedSecond\"\n        v-model:selected-millisecond=\"selectedMillisecond\"\n        v-model:time-selection=\"timeSelection\"\n        v-model:selected-timezone=\"selectedTimezone\"\n        v-model:calendar-menu-open=\"calendarMenuOpen\"\n        :accuracy=\"accuracy\"\n        :max-date=\"maxAllowedDate\"\n        :min-date=\"minAllowedDate\"\n        @set-now=\"setNow()\"\n      >\n        <slot name=\"menu-content\" />\n      </RuiDateTimePickerMenu>\n    </template>\n  </RuiMenu>\n</template>\n\n<style lang=\"scss\" module>\n.wrapper {\n  @apply w-full inline-flex flex-col;\n\n  .activator {\n    @apply relative inline-flex items-center w-full;\n    @apply outline-none focus-within:outline-none cursor-pointer min-h-14 pl-3 py-2 pr-8 rounded;\n    @apply m-0 bg-white transition-all text-body-1 text-left hover:border-black;\n\n    &:not(.outlined) {\n      @apply hover:bg-gray-100 focus-within:bg-gray-100;\n    }\n\n    &.dense {\n      @apply py-1.5 min-h-10;\n\n      ~ .fieldset {\n        @apply px-2;\n      }\n    }\n\n    &.disabled {\n      @apply opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none;\n    }\n\n    &.readonly {\n      @apply opacity-80 pointer-events-none cursor-default bg-gray-50;\n    }\n\n    &.outlined {\n      @apply border-none hover:border-none;\n\n      &.opened,\n      &:focus,\n      &:focus-within {\n        @apply border-rui-primary;\n\n        ~ .fieldset {\n          @apply border-rui-primary #{!important};\n          @apply border-2 #{!important};\n        }\n      }\n\n      ~ .fieldset {\n        @apply border border-black/[0.23];\n      }\n\n      &:hover {\n        ~ .fieldset {\n          @apply border-black;\n        }\n      }\n\n      &.disabled {\n        ~ .fieldset {\n          @apply border-dotted;\n          @apply border border-black/[0.23] #{!important};\n        }\n      }\n\n      &.with-success {\n        .label {\n          @apply text-rui-success #{!important};\n        }\n\n        ~ .fieldset {\n          @apply border-rui-success #{!important};\n        }\n      }\n\n      &.with-error {\n        .label {\n          @apply text-rui-error #{!important};\n        }\n\n        ~ .fieldset {\n          @apply border-rui-error #{!important};\n        }\n      }\n    }\n\n    .label {\n      @apply text-rui-text-secondary;\n      max-width: calc(100% - 2.5rem);\n    }\n\n    .label,\n    .value {\n      @apply block truncate transition-all duration-75;\n    }\n\n    .value {\n      @apply flex gap-1 flex-wrap flex-1 ps-8;\n    }\n\n    .clear {\n      @apply ml-auto shrink-0 invisible;\n    }\n\n    .icon {\n      @apply text-rui-text-secondary transition;\n\n      &__wrapper {\n        @apply flex items-center justify-end;\n        @apply absolute top-px bottom-0;\n      }\n\n      &__append {\n        @apply right-3;\n      }\n\n      &__prepend {\n        @apply left-3;\n      }\n    }\n\n    &.float {\n      .label {\n        @apply -translate-y-2 top-0 text-xs px-1;\n      }\n\n      ~ .fieldset {\n        legend {\n          &:after {\n            content: v-bind(labelWithQuote);\n          }\n        }\n      }\n\n      &.opened,\n      &.opened.with-value,\n      &:focus,\n      &:focus.with-value,\n      &:focus-within,\n      &:focus-within.with-value {\n        .label {\n          @apply text-rui-primary;\n        }\n\n        ~ .fieldset {\n          @apply border-rui-primary;\n          @apply border-2 #{!important};\n        }\n      }\n    }\n  }\n\n  .fieldset {\n    @apply absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0 rounded pointer-events-none px-2 transition-all -mt-2;\n\n    legend {\n      @apply opacity-0 text-xs truncate;\n      max-width: calc(100% - 1rem);\n\n      &:before {\n        content: ' ';\n      }\n\n      &:after {\n        @apply truncate max-w-full leading-[0];\n        content: '\\200B';\n      }\n    }\n  }\n}\n\n.menu {\n  @apply overflow-y-auto max-h-60 min-w-[2.5rem];\n}\n\n.highlighted {\n  @apply bg-rui-grey-200 #{!important};\n\n  &.active {\n    @apply bg-rui-grey-300 #{!important};\n  }\n}\n\n:global(.dark) {\n  .wrapper {\n    .activator {\n      @apply bg-transparent text-rui-text;\n\n      &:not(.outlined) {\n        @apply hover:bg-white/10 focus-within:bg-white/10;\n\n        &.disabled {\n          @apply bg-white/10;\n        }\n      }\n\n      &.readonly {\n        @apply bg-white/10;\n      }\n\n      &.outlined {\n        ~ .fieldset {\n          @apply border-white/[0.23];\n        }\n\n        &.disabled {\n          ~ .fieldset {\n            @apply border-white/[0.23] #{!important};\n          }\n        }\n\n        &:hover {\n          ~ .fieldset {\n            @apply border-white;\n          }\n        }\n      }\n    }\n  }\n\n  .highlighted {\n    @apply bg-rui-grey-800 #{!important};\n\n    &.active {\n      @apply bg-rui-grey-700 #{!important};\n    }\n  }\n}\n</style>\n"],"names":["_useModel","dateFormat","_openBlock","_createBlock","_mergeProps","_unref","$style","getRootAttrs","$attrs","_withCtx","_createElementVNode","getNonRootAttrs","_createElementBlock","_normalizeClass","_createTextVNode","_toDisplayString","_createVNode","_withModifiers","RuiDateTimePickerMenu","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"RuiDateTimePicker.vue2.js","sources":["../../../src/components/date-time-picker/RuiDateTimePicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { DateTimeSegmentType } from '@/components/date-time-picker/types';\nimport type { TimePickerSelection } from '@/components/time-picker/RuiTimePicker.vue';\nimport { logicAnd, logicOr } from '@vueuse/math';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiDateTimePickerMenu from '@/components/date-time-picker/RuiDateTimePickerMenu.vue';\nimport { useDateTimeSelection } from '@/components/date-time-picker/use-date-time-selection';\nimport { useInputHandler } from '@/components/date-time-picker/use-input-handler';\nimport { useKeyboardHandler } from '@/components/date-time-picker/use-keyboard-handler';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\ntype DateFormat = 'year-first' | 'month-first' | 'day-first';\n\ntype DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';\n\ntype ModelValueType<T extends DateTimeModelType> =\n  T extends 'date' ? Date | undefined :\n    T extends 'epoch-ms' ? number | undefined :\n      T extends 'epoch' ? number | undefined :\n        Date | number | undefined;\n\nexport interface RuiDateTimePickerProps {\n  minDate?: Date | number;\n  maxDate?: Date | number | 'now';\n  format?: DateFormat;\n  type?: DateTimeModelType;\n  accuracy?: 'minute' | 'second' | 'millisecond';\n  disabled?: boolean;\n  allowEmpty?: boolean;\n  readonly?: boolean;\n  dense?: boolean;\n  label?: string;\n  variant?: 'default' | 'filled' | 'outlined';\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiDateTimePicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<ModelValueType<typeof props.type>>({ required: true });\n\nconst props = withDefaults(defineProps<RuiDateTimePickerProps>(), {\n  disabled: false,\n  readonly: false,\n  allowEmpty: false,\n  dense: false,\n  type: 'epoch-ms',\n  hideDetails: false,\n  label: 'Pick a date',\n  variant: 'default',\n  hint: undefined,\n  maxDate: undefined,\n  minDate: undefined,\n  format: 'day-first',\n  accuracy: 'minute',\n  errorMessages: () => [],\n  successMessages: () => [],\n  required: false,\n});\n\ndefineSlots<{\n  'menu-content': () => any;\n}>();\n\nconst baseFormats: Record<DateFormat, string> = {\n  'day-first': 'DD/MM/YYYY HH:mm',\n  'month-first': 'MM/DD/YYYY HH:mm',\n  'year-first': 'YYYY/MM/DD HH:mm',\n};\n\nconst isOpen = ref<boolean>(false);\nconst cursorPosition = ref<number>(0);\nconst currentValue = ref<number>();\n\nconst textInput = ref<HTMLInputElement>();\nconst activator = ref();\nconst menuWrapperRef = ref();\nconst calendarMenuOpen = ref<boolean>(false);\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\n\nconst {\n  clear: clearSelection,\n  getDateTime,\n  internalErrorMessages,\n  maxAllowedDate,\n  minAllowedDate,\n  segmentData,\n  selectedDate,\n  selectedDay,\n  selectedHour,\n  selectedMillisecond,\n  selectedMinute,\n  selectedMonth,\n  selectedSecond,\n  selectedTime,\n  selectedTimezone,\n  selectedYear,\n  setNow,\n  valueSet,\n} = useDateTimeSelection({\n  accuracy: props.accuracy,\n  allowEmpty: props.allowEmpty,\n  maxDate: props.maxDate,\n  minDate: props.minDate,\n  modelValue,\n  type: props.type,\n});\n\nconst { setValue, getCurrent } = useInputHandler(segmentData, currentValue);\n\nconst dateFormat = computed<string>(() => {\n  const dateFormat = props.format;\n  const format = baseFormats[dateFormat];\n  if (props.accuracy === 'second') {\n    return format.replace('HH:mm', 'HH:mm:ss');\n  }\n  else if (props.accuracy === 'millisecond') {\n    return format.replace('HH:mm', 'HH:mm:ss.SSS');\n  }\n  return format;\n});\n\nconst {\n  clear: clearSegment,\n  getCurrentSegment,\n  handleBlur,\n  handleClick,\n  handleFocus,\n  handleInput,\n  handleInputSelection,\n  handleKeyDown,\n  handleMouseDown,\n  handlePaste,\n  setSegment,\n} = useKeyboardHandler({\n  accuracy: props.accuracy,\n  currentValue,\n  cursorPosition,\n  dateFormat,\n  disabled: props.disabled,\n  getCurrent,\n  getDateTime,\n  readonly: props.readonly,\n  setValue,\n  textInput,\n});\n\nfunction handleInputClick(event: MouseEvent): void {\n  // Handle segment selection first, before any DOM changes from menu opening\n  handleClick(event);\n  // Open menu if not already open\n  if (!get(isOpen)) {\n    set(isOpen, true);\n  }\n}\n\nconst anyFocused = logicOr(activatorFocusedWithin, menuWrapperFocusedWithin);\n\nconst labelWithQuote = computed<string>(() => {\n  if (!props.label)\n    return '\"\\\\200B\"';\n\n  const asterisk = props.required ? '﹡' : '';\n  return `'  ${props.label}${asterisk}  '`;\n});\n\nconst isOutlined = computed<boolean>(() => props.variant === 'outlined');\n\nconst formattedDisplay = computed<string>(() => {\n  let result = get(dateFormat);\n\n  const replacements = [\n    { pattern: 'YYYY', value: getDisplayValue(selectedYear, 4) },\n    { pattern: 'MM', value: getDisplayValue(selectedMonth, 2) },\n    { pattern: 'DD', value: getDisplayValue(selectedDay, 2) },\n    { pattern: 'HH', value: getDisplayValue(selectedHour, 2) },\n    { pattern: 'mm', value: getDisplayValue(selectedMinute, 2) },\n    { pattern: 'ss', value: getDisplayValue(selectedSecond, 2) },\n    { pattern: 'SSS', value: getDisplayValue(selectedMillisecond, 3) },\n  ];\n\n  for (const { pattern, value } of replacements) {\n    if (value !== undefined) {\n      result = result.replace(pattern, value);\n    }\n  }\n\n  return result;\n});\n\nconst timeSelection = computed<TimePickerSelection>({\n  get() {\n    const type = getCurrentSegment()?.type;\n\n    if (type === 'mm') {\n      return 'minute';\n    }\n    else if (type === 'ss') {\n      return 'second';\n    }\n    else if (type === 'SSS') {\n      return 'millisecond';\n    }\n    return 'hour';\n  },\n  set(value: TimePickerSelection) {\n    let segmentType: DateTimeSegmentType = 'HH';\n    if (value === 'minute') {\n      segmentType = 'mm';\n    }\n    else if (value === 'second') {\n      segmentType = 'ss';\n    }\n    else if (value === 'millisecond') {\n      segmentType = 'SSS';\n    }\n\n    setSegment(segmentType);\n  },\n});\n\nconst float = logicAnd(logicOr(isOpen, valueSet, searchInputFocused), isOutlined);\n\nconst combinedErrorMessages = computed<string[]>(() => {\n  let propErrors: string[];\n  if (props.errorMessages) {\n    propErrors = Array.isArray(props.errorMessages)\n      ? props.errorMessages\n      : [props.errorMessages];\n  }\n  else {\n    propErrors = Array.isArray(props.errorMessages)\n      ? props.errorMessages\n      : [];\n  }\n  return [...propErrors, ...get(internalErrorMessages)];\n});\n\nfunction getDisplayValue(digit: Ref<number | undefined>, padding: number): string | undefined {\n  return isDefined(digit)\n    ? get(digit).toString().padStart(padding, '0')\n    : undefined;\n}\n\nasync function setInputFocus(): Promise<void> {\n  await nextTick(() => {\n    set(searchInputFocused, true);\n  });\n}\n\nfunction clear(segmentType?: string): void {\n  if (!segmentType) {\n    clearSelection();\n    set(currentValue, undefined);\n    return;\n  }\n\n  clearSegment(segmentType);\n}\n\nfunction arrowClicked(event: any): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    :class=\"$style.wrapper\"\n    :dense=\"dense\"\n    :hint=\"hint\"\n    :disabled=\"disabled\"\n    :success-messages=\"successMessages\"\n    :error-messages=\"combinedErrorMessages\"\n    :close-on-content-click=\"false\"\n    :show-details=\"!hideDetails\"\n    :persistent=\"calendarMenuOpen\"\n    :popper=\"{\n      placement: 'bottom-start',\n    }\"\n    full-width\n    disable-auto-focus\n    v-bind=\"{\n      ...getRootAttrs($attrs),\n    }\"\n  >\n    <template #activator=\"{ attrs, open, hasError, hasSuccess }\">\n      <div\n        ref=\"activator\"\n        class=\"group\"\n        :class=\"[\n          $style.activator,\n          {\n            [$style.disabled]: disabled,\n            [$style.readonly]: readonly,\n            [$style.outlined]: isOutlined,\n            [$style.dense]: dense,\n            [$style.float]: float,\n            [$style.opened]: open,\n            [$style['with-value']]: valueSet,\n            [$style['with-error']]: hasError,\n            [$style['with-success']]: hasSuccess && !hasError,\n          },\n        ]\"\n        v-bind=\"{\n          ...getNonRootAttrs($attrs, ['onClick', 'class']),\n          ...(props.readonly ? {} : attrs) }\n        \"\n        data-id=\"activator\"\n        :data-error=\"hasError ? '' : undefined\"\n        :tabindex=\"disabled || props.readonly ? -1 : 0\"\n        @click=\"setInputFocus()\"\n      >\n        <span\n          v-if=\"isOutlined && (searchInputFocused || open || valueSet)\"\n          data-id=\"label\"\n          :class=\"[\n            $style.label,\n            {\n              'absolute': isOutlined,\n              'pr-2': !valueSet && !open && isOutlined,\n            },\n          ]\"\n        >\n          {{ label }}\n          <span\n            v-if=\"props.required\"\n            data-id=\"required-indicator\"\n            class=\"text-rui-error\"\n          >\n            ﹡\n          </span>\n        </span>\n\n        <span :class=\"[$style.icon__wrapper, $style.icon__prepend]\">\n          <RuiIcon\n            :class=\"[$style.icon]\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-calendar-days\"\n          />\n        </span>\n\n        <div :class=\"$style.value\">\n          <input\n            ref=\"textInput\"\n            :disabled=\"disabled\"\n            :value=\"formattedDisplay\"\n            class=\"bg-transparent outline-none flex-1 min-w-0\"\n            type=\"text\"\n            :placeholder=\"dateFormat\"\n            :readonly=\"readonly\"\n            :aria-invalid=\"hasError\"\n            @mousedown=\"handleMouseDown($event)\"\n            @focus=\"handleFocus()\"\n            @blur=\"handleBlur()\"\n            @select=\"handleInputSelection($event)\"\n            @click.stop=\"handleInputClick($event)\"\n            @keydown=\"handleKeyDown($event)\"\n            @paste=\"handlePaste($event)\"\n            @input=\"handleInput($event)\"\n          />\n        </div>\n\n        <RuiButton\n          v-if=\"allowEmpty && valueSet && !disabled\"\n          variant=\"text\"\n          icon\n          data-id=\"clear-button\"\n          size=\"sm\"\n          tabindex=\"-1\"\n          color=\"error\"\n          class=\"group-hover:!visible\"\n          :class=\"[$style.clear, anyFocused && '!visible', {\n            'mr-2': !dense,\n          }]\"\n          @click.stop.prevent=\"clear()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"18\"\n          />\n        </RuiButton>\n\n        <span\n          :class=\"[$style.icon__wrapper, $style.icon__append]\"\n          data-id=\"append\"\n          @click=\"arrowClicked($event)\"\n        >\n          <RuiIcon\n            :class=\"[$style.icon, { 'rotate-180': open }]\"\n            :size=\"dense ? 16 : 24\"\n            name=\"lu-chevron-down\"\n          />\n        </span>\n      </div>\n      <fieldset\n        v-if=\"isOutlined\"\n        :class=\"$style.fieldset\"\n      >\n        <legend :class=\"{ 'px-2': float }\" />\n      </fieldset>\n    </template>\n    <template #default>\n      <RuiDateTimePickerMenu\n        ref=\"menuWrapperRef\"\n        v-model:selected-date=\"selectedDate\"\n        v-model:selected-time=\"selectedTime\"\n        v-model:selected-hour=\"selectedHour\"\n        v-model:selected-minute=\"selectedMinute\"\n        v-model:selected-second=\"selectedSecond\"\n        v-model:selected-millisecond=\"selectedMillisecond\"\n        v-model:time-selection=\"timeSelection\"\n        v-model:selected-timezone=\"selectedTimezone\"\n        v-model:calendar-menu-open=\"calendarMenuOpen\"\n        :accuracy=\"accuracy\"\n        :max-date=\"maxAllowedDate\"\n        :min-date=\"minAllowedDate\"\n        @set-now=\"setNow()\"\n      >\n        <slot name=\"menu-content\" />\n      </RuiDateTimePickerMenu>\n    </template>\n  </RuiMenu>\n</template>\n\n<style lang=\"scss\" module>\n.wrapper {\n  @apply w-full inline-flex flex-col;\n\n  .activator {\n    @apply relative inline-flex items-center w-full;\n    @apply outline-none focus-within:outline-none cursor-pointer min-h-14 pl-3 py-2 pr-8 rounded;\n    @apply m-0 bg-white transition-all text-body-1 text-left hover:border-black;\n\n    &:not(.outlined) {\n      @apply hover:bg-gray-100 focus-within:bg-gray-100;\n    }\n\n    &.dense {\n      @apply py-1.5 min-h-10;\n\n      ~ .fieldset {\n        @apply px-2;\n      }\n    }\n\n    &.disabled {\n      @apply opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none;\n    }\n\n    &.readonly {\n      @apply opacity-80 pointer-events-none cursor-default bg-gray-50;\n    }\n\n    &.outlined {\n      @apply border-none hover:border-none;\n\n      &.opened,\n      &:focus,\n      &:focus-within {\n        @apply border-rui-primary;\n\n        ~ .fieldset {\n          @apply border-rui-primary #{!important};\n          @apply border-2 #{!important};\n        }\n      }\n\n      ~ .fieldset {\n        @apply border border-black/[0.23];\n      }\n\n      &:hover {\n        ~ .fieldset {\n          @apply border-black;\n        }\n      }\n\n      &.disabled {\n        ~ .fieldset {\n          @apply border-dotted;\n          @apply border border-black/[0.23] #{!important};\n        }\n      }\n\n      &.with-success {\n        .label {\n          @apply text-rui-success #{!important};\n        }\n\n        ~ .fieldset {\n          @apply border-rui-success #{!important};\n        }\n      }\n\n      &.with-error {\n        .label {\n          @apply text-rui-error #{!important};\n        }\n\n        ~ .fieldset {\n          @apply border-rui-error #{!important};\n        }\n      }\n    }\n\n    .label {\n      @apply text-rui-text-secondary;\n      max-width: calc(100% - 2.5rem);\n    }\n\n    .label,\n    .value {\n      @apply block truncate transition-all duration-75;\n    }\n\n    .value {\n      @apply flex gap-1 flex-wrap flex-1 ps-8;\n    }\n\n    .clear {\n      @apply ml-auto shrink-0 invisible;\n    }\n\n    .icon {\n      @apply text-rui-text-secondary transition;\n\n      &__wrapper {\n        @apply flex items-center justify-end;\n        @apply absolute top-px bottom-0;\n      }\n\n      &__append {\n        @apply right-3;\n      }\n\n      &__prepend {\n        @apply left-3;\n      }\n    }\n\n    &.float {\n      .label {\n        @apply -translate-y-2 top-0 text-xs px-1;\n      }\n\n      ~ .fieldset {\n        legend {\n          &:after {\n            content: v-bind(labelWithQuote);\n          }\n        }\n      }\n\n      &.opened,\n      &.opened.with-value,\n      &:focus,\n      &:focus.with-value,\n      &:focus-within,\n      &:focus-within.with-value {\n        .label {\n          @apply text-rui-primary;\n        }\n\n        ~ .fieldset {\n          @apply border-rui-primary;\n          @apply border-2 #{!important};\n        }\n      }\n    }\n  }\n\n  .fieldset {\n    @apply absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0 rounded pointer-events-none px-2 transition-all -mt-2;\n\n    legend {\n      @apply opacity-0 text-xs truncate;\n      max-width: calc(100% - 1rem);\n\n      &:before {\n        content: ' ';\n      }\n\n      &:after {\n        @apply truncate max-w-full leading-[0];\n        content: '\\200B';\n      }\n    }\n  }\n}\n\n.menu {\n  @apply overflow-y-auto max-h-60 min-w-[2.5rem];\n}\n\n.highlighted {\n  @apply bg-rui-grey-200 #{!important};\n\n  &.active {\n    @apply bg-rui-grey-300 #{!important};\n  }\n}\n\n:global(.dark) {\n  .wrapper {\n    .activator {\n      @apply bg-transparent text-rui-text;\n\n      &:not(.outlined) {\n        @apply hover:bg-white/10 focus-within:bg-white/10;\n\n        &.disabled {\n          @apply bg-white/10;\n        }\n      }\n\n      &.readonly {\n        @apply bg-white/10;\n      }\n\n      &.outlined {\n        ~ .fieldset {\n          @apply border-white/[0.23];\n        }\n\n        &.disabled {\n          ~ .fieldset {\n            @apply border-white/[0.23] #{!important};\n          }\n        }\n\n        &:hover {\n          ~ .fieldset {\n            @apply border-white;\n          }\n        }\n      }\n    }\n  }\n\n  .highlighted {\n    @apply bg-rui-grey-800 #{!important};\n\n    &.active {\n      @apply bg-rui-grey-700 #{!important};\n    }\n  }\n}\n</style>\n"],"names":["_useModel","dateFormat","_openBlock","_createBlock","_mergeProps","_unref","$style","$attrs","_withCtx","_createElementVNode","_createElementBlock","_normalizeClass","_createTextVNode","_toDisplayString","_createVNode","_withModifiers","RuiDateTimePickerMenu","_renderSlot"],"mappings":"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"}

package/dist/components/date-time-picker/RuiDateTimePickerMenu.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, mergeModels, useModel, createElementBlock, openBlock, createVNode, createElementVNode, renderSlot, withCtx, unref } from "vue";
+import { defineComponent, useModel, openBlock, createElementBlock, createVNode, createElementVNode, withCtx, unref, renderSlot, mergeModels } from "vue";
 import RuiButton from "../buttons/button/RuiButton.vue.js";
 import _sfc_main$1 from "../calendar/RuiCalendar.vue.js";
 /* empty css                           */

package/dist/components/divider/RuiDivider.vue.js

@@ -1,4 +1,5 @@
-import { defineComponent, createElementBlock, openBlock, mergeProps } from "vue";
+import { defineComponent, openBlock, createElementBlock, mergeProps } from "vue";
+const _hoisted_1 = ["aria-orientation"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiDivider",
@@ -11,8 +12,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({
-        class: [__props.vertical ? "border-l" : "border-t", "border-default"]
-      }, _ctx.$attrs), null, 16);
+        class: [__props.vertical ? "border-l" : "border-t", "border-default"],
+        role: "separator",
+        "aria-orientation": __props.vertical ? "vertical" : "horizontal"
+      }, _ctx.$attrs), null, 16, _hoisted_1);
     };
   }
 });

package/dist/components/divider/RuiDivider.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDivider.vue.js","sources":["../../../src/components/divider/RuiDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nexport interface Props {\n  vertical?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiDivider',\n  inheritAttrs: false,\n});\n\nwithDefaults(defineProps<Props>(), {\n  vertical: false,\n});\n</script>\n\n<template>\n  <div\n    :class=\"vertical ? 'border-l' : 'border-t'\"\n    class=\"border-default\"\n    v-bind=\"$attrs\"\n  />\n</template>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","$attrs"],"mappings":";;;;;;;;;;;;AAgBE,aAAAA,UAAA,GAAAC,mBAIE,OAJFC,WAIE;AAAA,QAHC,OAAK,CAAE,QAAA,WAAQ,aAAA,YACV,gBAAgB;AAAA,MAAA,GACdC,KAAAA,MAAM,GAAA,MAAA,EAAA;AAAA;;;"}
+{"version":3,"file":"RuiDivider.vue.js","sources":["../../../src/components/divider/RuiDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nexport interface Props {\n  vertical?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiDivider',\n  inheritAttrs: false,\n});\n\nwithDefaults(defineProps<Props>(), {\n  vertical: false,\n});\n</script>\n\n<template>\n  <div\n    :class=\"vertical ? 'border-l' : 'border-t'\"\n    class=\"border-default\"\n    role=\"separator\"\n    :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n    v-bind=\"$attrs\"\n  />\n</template>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","$attrs"],"mappings":";;;;;;;;;;;;;AAgBE,aAAAA,UAAA,GAAAC,mBAME,OANFC,WAME;AAAA,QALC,OAAK,CAAE,QAAA,WAAQ,aAAA,YACV,gBAAgB;AAAA,QACtB,MAAK;AAAA,QACJ,oBAAkB,QAAA,WAAQ,aAAA;AAAA,MAAA,GACnBC,KAAAA,MAAM,GAAA,MAAA,IAAA,UAAA;AAAA;;;"}