@rotki/ui-library 2.12.2 → 2.13.1

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

@@ -33,10 +33,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["select"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
     const modelValue = useModel(__props, "modelValue");
-    const props = __props;
     const emit = __emit;
     const viewMode = ref("months");
-    const startYear = ref(props.viewYear - 6);
+    const startYear = ref(__props.viewYear - 6);
     const months = getShortMonthNames();
     const calendarState = inject(CalendarStateSymbol);
     const yearRange = ref([]);
@@ -47,11 +46,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const canGoToPrev = ref(true);
     function calculateYearRange() {
       const start = get(startYear);
-      set(yearRange, Array.from({ length: 12 }, (_, i) => start + i));
+      set(
+        yearRange,
+        Array.from({ length: 12 }, (_, i) => start + i)
+      );
     }
     function calculateTitle() {
       if (get(viewMode) === "months") {
-        set(title, props.viewYear.toString());
+        set(title, __props.viewYear.toString());
       } else {
         const range = get(yearRange);
         set(title, `${range[0]} - ${range.at(-1)}`);
@@ -61,8 +63,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const { maxDate, minDate } = calendarState;
       const mode = get(viewMode);
       if (mode === "months") {
-        const nextYear = props.viewYear + 1;
-        const previousYear = props.viewYear - 1;
+        const nextYear = __props.viewYear + 1;
+        const previousYear = __props.viewYear - 1;
         set(canGoToNext, !isDefined(maxDate) || nextYear <= get(maxDate).getFullYear());
         set(canGoToPrev, !isDefined(minDate) || previousYear >= get(minDate).getFullYear());
       } else {
@@ -76,7 +78,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function calculateMonthsInRange() {
       const { minDate, maxDate } = calendarState;
-      const currentYear = props.viewYear;
+      const currentYear = __props.viewYear;
       const result = new Array(12).fill(true);
       if (isDefined(minDate) || isDefined(maxDate)) {
         for (let month = 0; month < 12; month++) {
@@ -94,7 +96,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function calculateYearsInRange() {
       const { minDate, maxDate } = calendarState;
       const range = get(yearRange);
-      const currentMonth = props.viewMonth;
+      const currentMonth = __props.viewMonth;
       if (!isDefined(minDate) && !isDefined(maxDate)) {
         set(yearsInRange, new Array(range.length).fill(true));
         return;
@@ -108,50 +110,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
       set(yearsInRange, result);
     }
-    calculateYearRange();
-    calculateTitle();
-    calculateNavigation();
-    calculateMonthsInRange();
-    calculateYearsInRange();
-    watch(startYear, () => {
-      calculateYearRange();
-      calculateTitle();
-      calculateNavigation();
-      calculateYearsInRange();
-    });
-    watch(viewMode, () => {
-      calculateTitle();
-      calculateNavigation();
-    });
-    watch(() => props.viewYear, () => {
-      calculateTitle();
-      calculateNavigation();
-      calculateMonthsInRange();
-      calculateYearsInRange();
-    });
-    watch(() => props.viewMonth, () => {
-      calculateYearsInRange();
-    });
     function toggleSelection() {
       set(viewMode, get(viewMode) === "months" ? "years" : "months");
     }
     function selectMonth(month) {
       if (!get(monthsInRange)[month])
         return;
-      emit("select", { month, year: props.viewYear });
+      emit("select", { month, year: __props.viewYear });
       set(modelValue, false);
     }
     function selectYear(year) {
       const yearIndex = get(yearRange).indexOf(year);
       if (yearIndex === -1 || !get(yearsInRange)[yearIndex])
         return;
-      emit("select", { month: props.viewMonth, year });
+      emit("select", { month: __props.viewMonth, year });
       set(viewMode, "months");
     }
     function handleNext() {
       if (get(viewMode) === "months") {
-        const nextYear = props.viewYear + 1;
-        emit("select", { month: props.viewMonth, year: nextYear });
+        const nextYear = __props.viewYear + 1;
+        emit("select", { month: __props.viewMonth, year: nextYear });
       } else {
         const lastYearInRange = get(startYear) + 11;
         set(startYear, lastYearInRange + 1);
@@ -159,13 +137,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function handlePrev() {
       if (get(viewMode) === "months") {
-        const previousYear = props.viewYear - 1;
-        emit("select", { month: props.viewMonth, year: previousYear });
+        const previousYear = __props.viewYear - 1;
+        emit("select", { month: __props.viewMonth, year: previousYear });
       } else {
         const firstYearInRange = get(startYear);
         set(startYear, firstYearInRange - 12);
       }
     }
+    calculateYearRange();
+    calculateTitle();
+    calculateNavigation();
+    calculateMonthsInRange();
+    calculateYearsInRange();
+    watch(startYear, () => {
+      calculateYearRange();
+      calculateTitle();
+      calculateNavigation();
+      calculateYearsInRange();
+    });
+    watch(viewMode, () => {
+      calculateTitle();
+      calculateNavigation();
+    });
+    watch(
+      () => __props.viewYear,
+      () => {
+        calculateTitle();
+        calculateNavigation();
+        calculateMonthsInRange();
+        calculateYearsInRange();
+      }
+    );
+    watch(
+      () => __props.viewMonth,
+      () => {
+        calculateYearsInRange();
+      }
+    );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(RuiMenu, {
         modelValue: modelValue.value,
@@ -216,7 +224,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             viewMode.value === "months" ? (openBlock(), createElementBlock("div", _hoisted_3, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(unref(months), (month, index) => {
                 return openBlock(), createElementBlock("button", {
-                  key: index,
+                  key: month,
                   type: "button",
                   class: normalizeClass(["h-9 w-full flex items-center justify-center text-sm font-medium rounded-md transition-colors duration-150 ease-in-out border-none outline-none cursor-pointer focus:ring-2 focus:ring-rui-primary focus:ring-opacity-50", [
                     {

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

@@ -1 +1 @@
-{"version":3,"file":"RuiCalendarMenu.vue2.js","sources":["../../../src/components/calendar/RuiCalendarMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  getShortMonthNames,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiButton from '../buttons/button/RuiButton.vue';\n\ndefineOptions({\n  name: 'RuiCalendarMenu',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>();\n\nconst props = defineProps<{\n  anchorEl: HTMLElement | undefined;\n  viewMonth: number;\n  viewYear: number;\n}>();\n\nconst emit = defineEmits<{\n  select: [MonthYearSelection];\n}>();\n\n// Core reactive state - minimal\nconst viewMode = ref<'months' | 'years'>('months');\nconst startYear = ref<number>(props.viewYear - 6);\n\n// Pre-calculated constants\nconst months = getShortMonthNames();\nconst calendarState = inject<RuiCalendarState>(CalendarStateSymbol) as RuiCalendarState;\n\n// Pre-calculated arrays for performance - using refs for better control\nconst yearRange = ref<number[]>([]);\nconst monthsInRange = ref<boolean[]>([]);\nconst yearsInRange = ref<boolean[]>([]);\nconst title = ref<string>('');\nconst canGoToNext = ref<boolean>(true);\nconst canGoToPrev = ref<boolean>(true);\n\n// Pre-calculation functions using VueUse get/set\nfunction calculateYearRange() {\n  const start = get(startYear);\n  set(yearRange, Array.from({ length: 12 }, (_, i) => start + i));\n}\n\nfunction calculateTitle() {\n  if (get(viewMode) === 'months') {\n    set(title, props.viewYear.toString());\n  }\n  else {\n    const range = get(yearRange);\n    set(title, `${range[0]} - ${range.at(-1)}`);\n  }\n}\n\nfunction calculateNavigation() {\n  const { maxDate, minDate } = calendarState;\n  const mode = get(viewMode);\n\n  if (mode === 'months') {\n    const nextYear = props.viewYear + 1;\n    const previousYear = props.viewYear - 1;\n\n    set(canGoToNext, !isDefined(maxDate) || nextYear <= get(maxDate).getFullYear());\n    set(canGoToPrev, !isDefined(minDate) || previousYear >= get(minDate).getFullYear());\n  }\n  else {\n    const lastYearInRange = get(startYear) + 11;\n    const firstYearInRange = get(startYear);\n\n    // Check if we can navigate to the next range of years\n    const nextRangeStart = lastYearInRange + 1;\n    set(canGoToNext, !isDefined(maxDate) || nextRangeStart <= get(maxDate).getFullYear());\n\n    // Check if we can navigate to the previous range of years\n    const prevRangeEnd = firstYearInRange - 1;\n    set(canGoToPrev, !isDefined(minDate) || prevRangeEnd >= get(minDate).getFullYear());\n  }\n}\n\nfunction calculateMonthsInRange() {\n  const { minDate, maxDate } = calendarState;\n  const currentYear = props.viewYear;\n  const result = new Array(12).fill(true);\n\n  if (isDefined(minDate) || isDefined(maxDate)) {\n    for (let month = 0; month < 12; month++) {\n      const date = new Date(currentYear, month);\n      if (isDefined(maxDate) && date > get(maxDate)) {\n        result[month] = false;\n      }\n      if (isDefined(minDate) && date < get(minDate)) {\n        result[month] = false;\n      }\n    }\n  }\n\n  set(monthsInRange, result);\n}\n\nfunction calculateYearsInRange() {\n  const { minDate, maxDate } = calendarState;\n  const range = get(yearRange);\n  const currentMonth = props.viewMonth;\n\n  if (!isDefined(minDate) && !isDefined(maxDate)) {\n    set(yearsInRange, new Array(range.length).fill(true));\n    return;\n  }\n\n  const result = range.map((year) => {\n    const date = new Date(year, currentMonth);\n    if (isDefined(maxDate) && date > get(maxDate)) {\n      return false;\n    }\n    return !isDefined(minDate) || date >= get(minDate);\n  });\n\n  set(yearsInRange, result);\n}\n\n// Initial calculations\ncalculateYearRange();\ncalculateTitle();\ncalculateNavigation();\ncalculateMonthsInRange();\ncalculateYearsInRange();\n\n// Watchers for recalculation only when needed\nwatch(startYear, () => {\n  calculateYearRange();\n  calculateTitle();\n  calculateNavigation();\n  calculateYearsInRange();\n});\n\nwatch(viewMode, () => {\n  calculateTitle();\n  calculateNavigation();\n});\n\nwatch(() => props.viewYear, () => {\n  calculateTitle();\n  calculateNavigation();\n  calculateMonthsInRange();\n  calculateYearsInRange();\n});\n\nwatch(() => props.viewMonth, () => {\n  calculateYearsInRange();\n});\n\nfunction toggleSelection() {\n  set(viewMode, get(viewMode) === 'months' ? 'years' : 'months');\n}\n\nfunction selectMonth(month: number) {\n  if (!get(monthsInRange)[month])\n    return;\n  emit('select', { month, year: props.viewYear });\n  set(modelValue, false);\n}\n\nfunction selectYear(year: number) {\n  const yearIndex = get(yearRange).indexOf(year);\n  if (yearIndex === -1 || !get(yearsInRange)[yearIndex])\n    return;\n\n  emit('select', { month: props.viewMonth, year });\n  set(viewMode, 'months');\n}\n\nfunction handleNext() {\n  if (get(viewMode) === 'months') {\n    const nextYear = props.viewYear + 1;\n    // Emit directly - navigation is already constrained by canGoToNext\n    emit('select', { month: props.viewMonth, year: nextYear });\n  }\n  else {\n    const lastYearInRange = get(startYear) + 11;\n    set(startYear, lastYearInRange + 1);\n  }\n}\n\nfunction handlePrev() {\n  if (get(viewMode) === 'months') {\n    const previousYear = props.viewYear - 1;\n    // Emit directly - navigation is already constrained by canGoToPrev\n    emit('select', { month: props.viewMonth, year: previousYear });\n  }\n  else {\n    const firstYearInRange = get(startYear);\n    set(startYear, firstYearInRange - 12);\n  }\n}\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"modelValue\"\n    :anchor-el=\"anchorEl\"\n    placement=\"bottom-start\"\n  >\n    <div class=\"menu-container\">\n      <div class=\"menu-header\">\n        <RuiButton\n          type=\"button\"\n          class=\"nav-button\"\n          icon\n          :disabled=\"!get(canGoToPrev)\"\n          variant=\"text\"\n          @click.stop=\"handlePrev()\"\n        >\n          <RuiIcon\n            name=\"lu-chevron-left\"\n            size=\"20\"\n          />\n        </RuiButton>\n\n        <div\n          class=\"flex-1 text-center cursor-pointer\"\n          @click.stop=\"toggleSelection()\"\n        >\n          {{ get(title) }}\n        </div>\n\n        <RuiButton\n          type=\"button\"\n          class=\"nav-button\"\n          icon\n          :disabled=\"!get(canGoToNext)\"\n          variant=\"text\"\n          @click.stop=\"handleNext()\"\n        >\n          <RuiIcon\n            name=\"lu-chevron-right\"\n            size=\"20\"\n          />\n        </RuiButton>\n      </div>\n\n      <div\n        v-if=\"viewMode === 'months'\"\n        class=\"month-grid\"\n      >\n        <button\n          v-for=\"(month, index) in months\"\n          :key=\"index\"\n          type=\"button\"\n          class=\"h-9 w-full flex items-center justify-center text-sm font-medium rounded-md transition-colors duration-150 ease-in-out border-none outline-none cursor-pointer focus:ring-2 focus:ring-rui-primary focus:ring-opacity-50\"\n          :class=\"[\n            {\n              'bg-rui-primary text-white hover:bg-rui-primary-darker active:bg-rui-primary-darker dark:bg-rui-primary dark:text-white dark:hover:bg-rui-primary-darker': index === viewMonth && get(monthsInRange)[index],\n              'bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400': index === viewMonth && !get(monthsInRange)[index],\n              'text-gray-700 bg-transparent hover:bg-gray-100 active:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:active:bg-gray-600': index !== viewMonth && get(monthsInRange)[index],\n              'opacity-50 cursor-not-allowed bg-transparent hover:bg-transparent active:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent pointer-events-none text-gray-400 dark:text-gray-600': !get(monthsInRange)[index],\n            },\n          ]\"\n          :disabled=\"!get(monthsInRange)[index]\"\n          @click.stop=\"selectMonth(index)\"\n        >\n          {{ month.substring(0, 3) }}\n        </button>\n      </div>\n\n      <div\n        v-else-if=\"viewMode === 'years'\"\n        class=\"year-grid\"\n      >\n        <button\n          v-for=\"(year, index) in yearRange\"\n          :key=\"year\"\n          type=\"button\"\n          class=\"h-9 w-full flex items-center justify-center text-sm font-medium rounded-md transition-colors duration-150 ease-in-out border-none outline-none cursor-pointer focus:ring-2 focus:ring-rui-primary focus:ring-opacity-50\"\n          :class=\"[\n            {\n              'bg-rui-primary text-white hover:bg-rui-primary-darker active:bg-rui-primary-darker dark:bg-rui-primary dark:text-white dark:hover:bg-rui-primary-darker': year === viewYear && get(yearsInRange)[index],\n              'bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400': year === viewYear && !get(yearsInRange)[index],\n              'text-gray-700 bg-transparent hover:bg-gray-100 active:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:active:bg-gray-600': year !== viewYear && get(yearsInRange)[index],\n              'opacity-50 cursor-not-allowed bg-transparent hover:bg-transparent active:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent pointer-events-none text-gray-400 dark:text-gray-600': !get(yearsInRange)[index],\n            },\n          ]\"\n          :disabled=\"!get(yearsInRange)[index]\"\n          @click.stop=\"selectYear(year)\"\n        >\n          {{ year }}\n        </button>\n      </div>\n    </div>\n  </RuiMenu>\n</template>\n\n<style scoped>\n.menu-container {\n  @apply w-64 shadow-lg overflow-hidden;\n}\n\n.menu-header {\n  @apply flex items-center justify-center p-1 font-medium text-gray-800 dark:text-gray-200;\n  @apply border-b border-rui-grey-200 dark:border-rui-grey-800 cursor-pointer hover:bg-rui-grey-100 dark:hover:bg-rui-grey-800;\n}\n\n.month-grid {\n  @apply grid grid-cols-3 gap-1 p-2;\n}\n\n.year-grid {\n  @apply grid grid-cols-3 gap-1 p-2;\n}\n</style>\n"],"names":["_useModel","_createBlock","_createElementVNode","_createVNode","_unref","_toDisplayString","_openBlock","_createElementBlock","_Fragment","_renderList","_withModifiers"],"mappings":"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"}
+{"version":3,"file":"RuiCalendarMenu.vue2.js","sources":["../../../src/components/calendar/RuiCalendarMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  getShortMonthNames,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiButton from '../buttons/button/RuiButton.vue';\n\ndefineOptions({\n  name: 'RuiCalendarMenu',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>();\n\nconst { viewMonth, viewYear } = defineProps<{\n  anchorEl: HTMLElement | undefined;\n  viewMonth: number;\n  viewYear: number;\n}>();\n\nconst emit = defineEmits<{\n  select: [MonthYearSelection];\n}>();\n\n// Core reactive state - minimal\nconst viewMode = ref<'months' | 'years'>('months');\nconst startYear = ref<number>(viewYear - 6);\n\n// Pre-calculated constants\nconst months = getShortMonthNames();\nconst calendarState = inject<RuiCalendarState>(CalendarStateSymbol) as RuiCalendarState;\n\n// Pre-calculated arrays for performance - using refs for better control\nconst yearRange = ref<number[]>([]);\nconst monthsInRange = ref<boolean[]>([]);\nconst yearsInRange = ref<boolean[]>([]);\nconst title = ref<string>('');\nconst canGoToNext = ref<boolean>(true);\nconst canGoToPrev = ref<boolean>(true);\n\n// Pre-calculation functions using VueUse get/set\nfunction calculateYearRange(): void {\n  const start = get(startYear);\n  set(\n    yearRange,\n    Array.from({ length: 12 }, (_, i) => start + i),\n  );\n}\n\nfunction calculateTitle(): void {\n  if (get(viewMode) === 'months') {\n    set(title, viewYear.toString());\n  }\n  else {\n    const range = get(yearRange);\n    set(title, `${range[0]} - ${range.at(-1)}`);\n  }\n}\n\nfunction calculateNavigation(): void {\n  const { maxDate, minDate } = calendarState;\n  const mode = get(viewMode);\n\n  if (mode === 'months') {\n    const nextYear = viewYear + 1;\n    const previousYear = viewYear - 1;\n\n    set(canGoToNext, !isDefined(maxDate) || nextYear <= get(maxDate).getFullYear());\n    set(canGoToPrev, !isDefined(minDate) || previousYear >= get(minDate).getFullYear());\n  }\n  else {\n    const lastYearInRange = get(startYear) + 11;\n    const firstYearInRange = get(startYear);\n\n    // Check if we can navigate to the next range of years\n    const nextRangeStart = lastYearInRange + 1;\n    set(canGoToNext, !isDefined(maxDate) || nextRangeStart <= get(maxDate).getFullYear());\n\n    // Check if we can navigate to the previous range of years\n    const prevRangeEnd = firstYearInRange - 1;\n    set(canGoToPrev, !isDefined(minDate) || prevRangeEnd >= get(minDate).getFullYear());\n  }\n}\n\nfunction calculateMonthsInRange(): void {\n  const { minDate, maxDate } = calendarState;\n  const currentYear = viewYear;\n  const result = new Array(12).fill(true);\n\n  if (isDefined(minDate) || isDefined(maxDate)) {\n    for (let month = 0; month < 12; month++) {\n      const date = new Date(currentYear, month);\n      if (isDefined(maxDate) && date > get(maxDate)) {\n        result[month] = false;\n      }\n      if (isDefined(minDate) && date < get(minDate)) {\n        result[month] = false;\n      }\n    }\n  }\n\n  set(monthsInRange, result);\n}\n\nfunction calculateYearsInRange(): void {\n  const { minDate, maxDate } = calendarState;\n  const range = get(yearRange);\n  const currentMonth = viewMonth;\n\n  if (!isDefined(minDate) && !isDefined(maxDate)) {\n    set(yearsInRange, new Array(range.length).fill(true));\n    return;\n  }\n\n  const result = range.map((year) => {\n    const date = new Date(year, currentMonth);\n    if (isDefined(maxDate) && date > get(maxDate)) {\n      return false;\n    }\n    return !isDefined(minDate) || date >= get(minDate);\n  });\n\n  set(yearsInRange, result);\n}\n\nfunction toggleSelection(): void {\n  set(viewMode, get(viewMode) === 'months' ? 'years' : 'months');\n}\n\nfunction selectMonth(month: number): void {\n  if (!get(monthsInRange)[month])\n    return;\n  emit('select', { month, year: viewYear });\n  set(modelValue, false);\n}\n\nfunction selectYear(year: number): void {\n  const yearIndex = get(yearRange).indexOf(year);\n  if (yearIndex === -1 || !get(yearsInRange)[yearIndex])\n    return;\n\n  emit('select', { month: viewMonth, year });\n  set(viewMode, 'months');\n}\n\nfunction handleNext(): void {\n  if (get(viewMode) === 'months') {\n    const nextYear = viewYear + 1;\n    // Emit directly - navigation is already constrained by canGoToNext\n    emit('select', { month: viewMonth, year: nextYear });\n  }\n  else {\n    const lastYearInRange = get(startYear) + 11;\n    set(startYear, lastYearInRange + 1);\n  }\n}\n\nfunction handlePrev(): void {\n  if (get(viewMode) === 'months') {\n    const previousYear = viewYear - 1;\n    // Emit directly - navigation is already constrained by canGoToPrev\n    emit('select', { month: viewMonth, year: previousYear });\n  }\n  else {\n    const firstYearInRange = get(startYear);\n    set(startYear, firstYearInRange - 12);\n  }\n}\n\n// Initial calculations\ncalculateYearRange();\ncalculateTitle();\ncalculateNavigation();\ncalculateMonthsInRange();\ncalculateYearsInRange();\n\n// Watchers for recalculation only when needed\nwatch(startYear, () => {\n  calculateYearRange();\n  calculateTitle();\n  calculateNavigation();\n  calculateYearsInRange();\n});\n\nwatch(viewMode, () => {\n  calculateTitle();\n  calculateNavigation();\n});\n\nwatch(\n  () => viewYear,\n  () => {\n    calculateTitle();\n    calculateNavigation();\n    calculateMonthsInRange();\n    calculateYearsInRange();\n  },\n);\n\nwatch(\n  () => viewMonth,\n  () => {\n    calculateYearsInRange();\n  },\n);\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"modelValue\"\n    :anchor-el=\"anchorEl\"\n    placement=\"bottom-start\"\n  >\n    <div class=\"menu-container\">\n      <div class=\"menu-header\">\n        <RuiButton\n          type=\"button\"\n          class=\"nav-button\"\n          icon\n          :disabled=\"!get(canGoToPrev)\"\n          variant=\"text\"\n          @click.stop=\"handlePrev()\"\n        >\n          <RuiIcon\n            name=\"lu-chevron-left\"\n            size=\"20\"\n          />\n        </RuiButton>\n\n        <div\n          class=\"flex-1 text-center cursor-pointer\"\n          @click.stop=\"toggleSelection()\"\n        >\n          {{ get(title) }}\n        </div>\n\n        <RuiButton\n          type=\"button\"\n          class=\"nav-button\"\n          icon\n          :disabled=\"!get(canGoToNext)\"\n          variant=\"text\"\n          @click.stop=\"handleNext()\"\n        >\n          <RuiIcon\n            name=\"lu-chevron-right\"\n            size=\"20\"\n          />\n        </RuiButton>\n      </div>\n\n      <div\n        v-if=\"viewMode === 'months'\"\n        class=\"month-grid\"\n      >\n        <button\n          v-for=\"(month, index) in months\"\n          :key=\"month\"\n          type=\"button\"\n          class=\"h-9 w-full flex items-center justify-center text-sm font-medium rounded-md transition-colors duration-150 ease-in-out border-none outline-none cursor-pointer focus:ring-2 focus:ring-rui-primary focus:ring-opacity-50\"\n          :class=\"[\n            {\n              'bg-rui-primary text-white hover:bg-rui-primary-darker active:bg-rui-primary-darker dark:bg-rui-primary dark:text-white dark:hover:bg-rui-primary-darker':\n                index === viewMonth && get(monthsInRange)[index],\n              'bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400':\n                index === viewMonth && !get(monthsInRange)[index],\n              'text-gray-700 bg-transparent hover:bg-gray-100 active:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:active:bg-gray-600':\n                index !== viewMonth && get(monthsInRange)[index],\n              'opacity-50 cursor-not-allowed bg-transparent hover:bg-transparent active:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent pointer-events-none text-gray-400 dark:text-gray-600':\n                !get(monthsInRange)[index],\n            },\n          ]\"\n          :disabled=\"!get(monthsInRange)[index]\"\n          @click.stop=\"selectMonth(index)\"\n        >\n          {{ month.substring(0, 3) }}\n        </button>\n      </div>\n\n      <div\n        v-else-if=\"viewMode === 'years'\"\n        class=\"year-grid\"\n      >\n        <button\n          v-for=\"(year, index) in yearRange\"\n          :key=\"year\"\n          type=\"button\"\n          class=\"h-9 w-full flex items-center justify-center text-sm font-medium rounded-md transition-colors duration-150 ease-in-out border-none outline-none cursor-pointer focus:ring-2 focus:ring-rui-primary focus:ring-opacity-50\"\n          :class=\"[\n            {\n              'bg-rui-primary text-white hover:bg-rui-primary-darker active:bg-rui-primary-darker dark:bg-rui-primary dark:text-white dark:hover:bg-rui-primary-darker':\n                year === viewYear && get(yearsInRange)[index],\n              'bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400':\n                year === viewYear && !get(yearsInRange)[index],\n              'text-gray-700 bg-transparent hover:bg-gray-100 active:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:active:bg-gray-600':\n                year !== viewYear && get(yearsInRange)[index],\n              'opacity-50 cursor-not-allowed bg-transparent hover:bg-transparent active:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent pointer-events-none text-gray-400 dark:text-gray-600':\n                !get(yearsInRange)[index],\n            },\n          ]\"\n          :disabled=\"!get(yearsInRange)[index]\"\n          @click.stop=\"selectYear(year)\"\n        >\n          {{ year }}\n        </button>\n      </div>\n    </div>\n  </RuiMenu>\n</template>\n\n<style scoped>\n.menu-container {\n  @apply w-64 shadow-lg overflow-hidden;\n}\n\n.menu-header {\n  @apply flex items-center justify-center p-1 font-medium text-gray-800 dark:text-gray-200;\n  @apply border-b border-rui-grey-200 dark:border-rui-grey-800 cursor-pointer hover:bg-rui-grey-100 dark:hover:bg-rui-grey-800;\n}\n\n.month-grid {\n  @apply grid grid-cols-3 gap-1 p-2;\n}\n\n.year-grid {\n  @apply grid grid-cols-3 gap-1 p-2;\n}\n</style>\n"],"names":["_useModel","_createBlock","_createElementVNode","_createVNode","_unref","_toDisplayString","_openBlock","_createElementBlock","_Fragment","_renderList","_withModifiers"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,UAAM,aAAaA,8BAAqB;AAQxC,UAAM,OAAO;AAKb,UAAM,WAAW,IAAwB,QAAQ;AACjD,UAAM,YAAY,IAAY,QAAA,WAAW,CAAC;AAG1C,UAAM,SAAS,mBAAA;AACf,UAAM,gBAAgB,OAAyB,mBAAmB;AAGlE,UAAM,YAAY,IAAc,EAAE;AAClC,UAAM,gBAAgB,IAAe,EAAE;AACvC,UAAM,eAAe,IAAe,EAAE;AACtC,UAAM,QAAQ,IAAY,EAAE;AAC5B,UAAM,cAAc,IAAa,IAAI;AACrC,UAAM,cAAc,IAAa,IAAI;AAGrC,aAAS,qBAA2B;AAClC,YAAM,QAAQ,IAAI,SAAS;AAC3B;AAAA,QACE;AAAA,QACA,MAAM,KAAK,EAAE,QAAQ,GAAA,GAAM,CAAC,GAAG,MAAM,QAAQ,CAAC;AAAA,MAAA;AAAA,IAElD;AAEA,aAAS,iBAAuB;AAC9B,UAAI,IAAI,QAAQ,MAAM,UAAU;AAC9B,YAAI,OAAO,QAAA,SAAS,SAAA,CAAU;AAAA,MAChC,OACK;AACH,cAAM,QAAQ,IAAI,SAAS;AAC3B,YAAI,OAAO,GAAG,MAAM,CAAC,CAAC,MAAM,MAAM,GAAG,EAAE,CAAC,EAAE;AAAA,MAC5C;AAAA,IACF;AAEA,aAAS,sBAA4B;AACnC,YAAM,EAAE,SAAS,QAAA,IAAY;AAC7B,YAAM,OAAO,IAAI,QAAQ;AAEzB,UAAI,SAAS,UAAU;AACrB,cAAM,WAAW,QAAA,WAAW;AAC5B,cAAM,eAAe,QAAA,WAAW;AAEhC,YAAI,aAAa,CAAC,UAAU,OAAO,KAAK,YAAY,IAAI,OAAO,EAAE,aAAa;AAC9E,YAAI,aAAa,CAAC,UAAU,OAAO,KAAK,gBAAgB,IAAI,OAAO,EAAE,aAAa;AAAA,MACpF,OACK;AACH,cAAM,kBAAkB,IAAI,SAAS,IAAI;AACzC,cAAM,mBAAmB,IAAI,SAAS;AAGtC,cAAM,iBAAiB,kBAAkB;AACzC,YAAI,aAAa,CAAC,UAAU,OAAO,KAAK,kBAAkB,IAAI,OAAO,EAAE,aAAa;AAGpF,cAAM,eAAe,mBAAmB;AACxC,YAAI,aAAa,CAAC,UAAU,OAAO,KAAK,gBAAgB,IAAI,OAAO,EAAE,aAAa;AAAA,MACpF;AAAA,IACF;AAEA,aAAS,yBAA+B;AACtC,YAAM,EAAE,SAAS,QAAA,IAAY;AAC7B,YAAM,cAAc,QAAA;AACpB,YAAM,SAAS,IAAI,MAAM,EAAE,EAAE,KAAK,IAAI;AAEtC,UAAI,UAAU,OAAO,KAAK,UAAU,OAAO,GAAG;AAC5C,iBAAS,QAAQ,GAAG,QAAQ,IAAI,SAAS;AACvC,gBAAM,OAAO,IAAI,KAAK,aAAa,KAAK;AACxC,cAAI,UAAU,OAAO,KAAK,OAAO,IAAI,OAAO,GAAG;AAC7C,mBAAO,KAAK,IAAI;AAAA,UAClB;AACA,cAAI,UAAU,OAAO,KAAK,OAAO,IAAI,OAAO,GAAG;AAC7C,mBAAO,KAAK,IAAI;AAAA,UAClB;AAAA,QACF;AAAA,MACF;AAEA,UAAI,eAAe,MAAM;AAAA,IAC3B;AAEA,aAAS,wBAA8B;AACrC,YAAM,EAAE,SAAS,QAAA,IAAY;AAC7B,YAAM,QAAQ,IAAI,SAAS;AAC3B,YAAM,eAAe,QAAA;AAErB,UAAI,CAAC,UAAU,OAAO,KAAK,CAAC,UAAU,OAAO,GAAG;AAC9C,YAAI,cAAc,IAAI,MAAM,MAAM,MAAM,EAAE,KAAK,IAAI,CAAC;AACpD;AAAA,MACF;AAEA,YAAM,SAAS,MAAM,IAAI,CAAC,SAAS;AACjC,cAAM,OAAO,IAAI,KAAK,MAAM,YAAY;AACxC,YAAI,UAAU,OAAO,KAAK,OAAO,IAAI,OAAO,GAAG;AAC7C,iBAAO;AAAA,QACT;AACA,eAAO,CAAC,UAAU,OAAO,KAAK,QAAQ,IAAI,OAAO;AAAA,MACnD,CAAC;AAED,UAAI,cAAc,MAAM;AAAA,IAC1B;AAEA,aAAS,kBAAwB;AAC/B,UAAI,UAAU,IAAI,QAAQ,MAAM,WAAW,UAAU,QAAQ;AAAA,IAC/D;AAEA,aAAS,YAAY,OAAqB;AACxC,UAAI,CAAC,IAAI,aAAa,EAAE,KAAK;AAC3B;AACF,WAAK,UAAU,EAAE,OAAO,MAAM,QAAA,UAAU;AACxC,UAAI,YAAY,KAAK;AAAA,IACvB;AAEA,aAAS,WAAW,MAAoB;AACtC,YAAM,YAAY,IAAI,SAAS,EAAE,QAAQ,IAAI;AAC7C,UAAI,cAAc,MAAM,CAAC,IAAI,YAAY,EAAE,SAAS;AAClD;AAEF,WAAK,UAAU,EAAE,OAAO,QAAA,WAAW,MAAM;AACzC,UAAI,UAAU,QAAQ;AAAA,IACxB;AAEA,aAAS,aAAmB;AAC1B,UAAI,IAAI,QAAQ,MAAM,UAAU;AAC9B,cAAM,WAAW,QAAA,WAAW;AAE5B,aAAK,UAAU,EAAE,OAAO,QAAA,WAAW,MAAM,UAAU;AAAA,MACrD,OACK;AACH,cAAM,kBAAkB,IAAI,SAAS,IAAI;AACzC,YAAI,WAAW,kBAAkB,CAAC;AAAA,MACpC;AAAA,IACF;AAEA,aAAS,aAAmB;AAC1B,UAAI,IAAI,QAAQ,MAAM,UAAU;AAC9B,cAAM,eAAe,QAAA,WAAW;AAEhC,aAAK,UAAU,EAAE,OAAO,QAAA,WAAW,MAAM,cAAc;AAAA,MACzD,OACK;AACH,cAAM,mBAAmB,IAAI,SAAS;AACtC,YAAI,WAAW,mBAAmB,EAAE;AAAA,MACtC;AAAA,IACF;AAGA,uBAAA;AACA,mBAAA;AACA,wBAAA;AACA,2BAAA;AACA,0BAAA;AAGA,UAAM,WAAW,MAAM;AACrB,yBAAA;AACA,qBAAA;AACA,0BAAA;AACA,4BAAA;AAAA,IACF,CAAC;AAED,UAAM,UAAU,MAAM;AACpB,qBAAA;AACA,0BAAA;AAAA,IACF,CAAC;AAED;AAAA,MACE,MAAM,QAAA;AAAA,MACN,MAAM;AACJ,uBAAA;AACA,4BAAA;AACA,+BAAA;AACA,8BAAA;AAAA,MACF;AAAA,IAAA;AAGF;AAAA,MACE,MAAM,QAAA;AAAA,MACN,MAAM;AACJ,8BAAA;AAAA,MACF;AAAA,IAAA;;0BAKAC,YAmGU,SAAA;AAAA,oBAlGC,WAAA;AAAA,qEAAA,WAAU,QAAA;AAAA,QAClB,aAAW,QAAA;AAAA,QACZ,WAAU;AAAA,MAAA;yBAEV,MA6FM;AAAA,UA7FNC,mBA6FM,OA7FN,YA6FM;AAAA,YA5FJA,mBAmCM,OAnCN,YAmCM;AAAA,cAlCJC,YAYY,WAAA;AAAA,gBAXV,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,MAAA;AAAA,gBACC,UAAQ,CAAGC,MAAA,GAAA,EAAI,YAAA,KAAW;AAAA,gBAC3B,SAAQ;AAAA,gBACP,6DAAY,cAAU,CAAA,MAAA,CAAA;AAAA,cAAA;iCAEvB,MAGE;AAAA,kBAHFD,YAGE,SAAA;AAAA,oBAFA,MAAK;AAAA,oBACL,MAAK;AAAA,kBAAA;;;;cAITD,mBAKM,OAAA;AAAA,gBAJJ,OAAM;AAAA,gBACL,6DAAY,mBAAe,CAAA,MAAA,CAAA;AAAA,cAAA,GAEzBG,gBAAAD,MAAA,GAAA,EAAI,MAAA,KAAK,CAAA,GAAA,CAAA;AAAA,cAGdD,YAYY,WAAA;AAAA,gBAXV,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,MAAA;AAAA,gBACC,UAAQ,CAAGC,MAAA,GAAA,EAAI,YAAA,KAAW;AAAA,gBAC3B,SAAQ;AAAA,gBACP,6DAAY,cAAU,CAAA,MAAA,CAAA;AAAA,cAAA;iCAEvB,MAGE;AAAA,kBAHFD,YAGE,SAAA;AAAA,oBAFA,MAAK;AAAA,oBACL,MAAK;AAAA,kBAAA;;;;;YAMH,SAAA,UAAQ,YADhBG,aAAAC,mBA0BM,OA1BN,YA0BM;AAAA,eAtBJD,UAAA,IAAA,GAAAC,mBAqBSC,UAAA,MAAAC,WApBkBL,MAAA,MAAA,GAAM,CAAvB,OAAO,UAAK;oCADtBG,mBAqBS,UAAA;AAAA,kBAnBN,KAAK;AAAA,kBACN,MAAK;AAAA,kBACL,uBAAM,2NAAyN;AAAA;iLACd,UAAU,QAAA,aAAaH,WAAI,cAAA,KAAa,EAAE,KAAK;AAAA,uFAAkG,UAAU,QAAA,aAAS,CAAKA,WAAI,cAAA,KAAa,EAAE,KAAK;AAAA,6JAAwK,UAAU,QAAA,aAAaA,WAAI,cAAA,KAAa,EAAE,KAAK;AAAA,4NAAuOA,MAAA,GAAA,EAAI,cAAA,KAAa,EAAE,KAAK;AAAA,oBAAA;AAAA;kBAYv2B,UAAQ,CAAGA,MAAA,GAAA,EAAI,cAAA,KAAa,EAAE,KAAK;AAAA,kBACnC,SAAKM,cAAA,CAAA,WAAO,YAAY,KAAK,GAAA,CAAA,MAAA,CAAA;AAAA,gBAAA,GAE3BL,gBAAA,MAAM,UAAS,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA;AAAA;kBAKT,SAAA,UAAQ,WADrBC,UAAA,GAAAC,mBA0BM,OA1BN,YA0BM;AAAA,eAtBJD,UAAA,IAAA,GAAAC,mBAqBSC,UAAA,MAAAC,WApBiB,UAAA,OAAS,CAAzB,MAAM,UAAK;oCADrBF,mBAqBS,UAAA;AAAA,kBAnBN,KAAK;AAAA,kBACN,MAAK;AAAA,kBACL,uBAAM,2NAAyN;AAAA;iLACd,SAAS,QAAA,YAAYH,WAAI,aAAA,KAAY,EAAE,KAAK;AAAA,uFAAkG,SAAS,QAAA,YAAQ,CAAKA,WAAI,aAAA,KAAY,EAAE,KAAK;AAAA,6JAAwK,SAAS,QAAA,YAAYA,WAAI,aAAA,KAAY,EAAE,KAAK;AAAA,4NAAuOA,MAAA,GAAA,EAAI,aAAA,KAAY,EAAE,KAAK;AAAA,oBAAA;AAAA;kBAY71B,UAAQ,CAAGA,MAAA,GAAA,EAAI,aAAA,KAAY,EAAE,KAAK;AAAA,kBAClC,SAAKM,cAAA,CAAA,WAAO,WAAW,IAAI,GAAA,CAAA,MAAA,CAAA;AAAA,gBAAA,mBAEzB,IAAI,GAAA,IAAA,UAAA;AAAA;;;;;;;;;"}

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

@@ -7,31 +7,16 @@ export interface Props {
     noPadding?: boolean;
     contentClass?: string;
 }
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_12: {}, __VLS_15: {}, __VLS_18: {}, __VLS_20: {}, __VLS_22: {};
-type __VLS_Slots = {} & {
-    image?: (props: typeof __VLS_1) => any;
-} & {
-    'custom-header'?: (props: typeof __VLS_3) => any;
-} & {
-    prepend?: (props: typeof __VLS_12) => any;
-} & {
-    header?: (props: typeof __VLS_15) => any;
-} & {
-    subheader?: (props: typeof __VLS_18) => any;
-} & {
-    default?: (props: typeof __VLS_20) => any;
-} & {
-    footer?: (props: typeof __VLS_22) => any;
+type __VLS_Slots = {
+    'image'?: () => any;
+    'custom-header'?: () => any;
+    'prepend'?: () => any;
+    'header'?: () => any;
+    'subheader'?: () => any;
+    'default'?: () => any;
+    'footer'?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    variant: "flat" | "outlined";
-    rounded: "sm" | "md" | "lg";
-    elevation: number;
-    dense: boolean;
-    contentClass: string;
-    divide: boolean;
-    noPadding: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,4 @@
-import { defineComponent, useSlots, computed, openBlock, createElementBlock, mergeProps, unref, normalizeClass, renderSlot, createCommentVNode, createBlock, createSlots, withCtx } from "vue";
+import { defineComponent, useSlots, computed, openBlock, createElementBlock, mergeProps, normalizeClass, renderSlot, createCommentVNode, createBlock, createSlots, withCtx } from "vue";
 import RuiCardHeader from "./RuiCardHeader.vue.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -32,7 +32,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         ]
       }, _ctx.$attrs), [
-        unref(slots).image ? (openBlock(), createElementBlock("div", {
+        slots.image ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(_ctx.$style.image)
         }, [
@@ -43,21 +43,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: 0,
             dense: __props.dense
           }, createSlots({ _: 2 }, [
-            unref(slots).prepend ? {
+            slots.prepend ? {
               name: "prepend",
               fn: withCtx(() => [
                 renderSlot(_ctx.$slots, "prepend")
               ]),
               key: "0"
             } : void 0,
-            unref(slots).header ? {
+            slots.header ? {
               name: "header",
               fn: withCtx(() => [
                 renderSlot(_ctx.$slots, "header")
               ]),
               key: "1"
             } : void 0,
-            unref(slots).subheader ? {
+            slots.subheader ? {
               name: "subheader",
               fn: withCtx(() => [
                 renderSlot(_ctx.$slots, "subheader")
@@ -66,13 +66,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             } : void 0
           ]), 1032, ["dense"])) : createCommentVNode("", true)
         ]),
-        unref(slots).default ? (openBlock(), createElementBlock("div", {
+        slots.default ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: normalizeClass([_ctx.$style.content, __props.contentClass])
         }, [
           renderSlot(_ctx.$slots, "default")
         ], 2)) : createCommentVNode("", true),
-        unref(slots).footer ? (openBlock(), createElementBlock("div", {
+        slots.footer ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: normalizeClass(_ctx.$style.footer)
         }, [

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

@@ -1 +1 @@
-{"version":3,"file":"RuiCard.vue2.js","sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  elevation?: number;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nwithDefaults(defineProps<Props>(), {\n  divide: false,\n  dense: false,\n  elevation: 0,\n  variant: 'outlined',\n  rounded: 'md',\n  noPadding: false,\n  contentClass: '',\n});\n\nconst slots = useSlots();\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n</script>\n\n<template>\n  <div\n    :class=\"[\n      $style.card,\n      `shadow-${elevation}`,\n      $style[`rounded__${rounded}`],\n      {\n        [$style.outlined]: variant === 'outlined',\n        [$style.dense]: dense,\n        [$style.divide]: divide,\n        [$style['no-padding']]: noPadding,\n      },\n    ]\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.image\"\n      :class=\"$style.image\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      :class=\"[$style.content, contentClass]\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      :class=\"$style.footer\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.card {\n  @apply flex flex-col h-full w-full bg-white;\n  &.rounded__sm {\n    @apply rounded-[.25rem];\n\n    .image {\n      @apply rounded-t-[.25rem];\n    }\n  }\n\n  &.rounded__md {\n    @apply rounded-[.5rem];\n\n    .image {\n      @apply rounded-t-[.5rem];\n    }\n  }\n\n  &.rounded__lg {\n    @apply rounded-[1rem];\n\n    .image {\n      @apply rounded-t-[1rem];\n    }\n  }\n\n  .image {\n    @apply overflow-hidden;\n  }\n\n  .content {\n    @apply p-4 text-body-1 text-rui-light-text overflow-y-auto;\n  }\n\n  .footer {\n    @apply p-4 pt-2 flex space-x-2 items-center justify-start mt-auto;\n  }\n\n  &.flat {\n    @apply border-none;\n  }\n\n  &.outlined {\n    @apply border border-black/[0.12];\n  }\n\n  &.divide {\n    @apply divide-y divide-black/[0.12];\n  }\n\n  &.dense {\n    > .content {\n      @apply p-3;\n    }\n\n    > .footer {\n      @apply py-1 flex space-x-2;\n    }\n  }\n\n  &.no-padding {\n    > .content {\n      @apply p-0;\n    }\n  }\n}\n\n:global(.dark) {\n  .card {\n    @apply bg-[#1E1E1E];\n\n    .content {\n      @apply text-rui-dark-text;\n    }\n\n    &.outlined {\n      @apply border-white/[0.12];\n    }\n\n    &.divide {\n      @apply divide-white/[0.12];\n    }\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","$style","$attrs","_unref","_normalizeClass","_renderSlot","_createBlock"],"mappings":";;;;;;;;;;;;;;;;;;AA6BA,UAAM,QAAQ,SAAA;AAEd,UAAM,iBAAiB,SAAkB,MAAM,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,MAAM,SAAS;;AAIhF,aAAAA,UAAA,GAAAC,mBAyDM,OAzDNC,WAyDM;AAAA,QAxDH,OAAK;AAAA,UAAUC,KAAAA,OAAO;AAAA,oBAAsB,QAAA,SAAS;AAAA,UAAUA,KAAAA,mBAAmB,QAAA,OAAO,EAAA;AAAA;aAAsBA,KAAAA,OAAO,QAAQ,GAAG,QAAA,YAAO;AAAA,aAA0BA,KAAAA,OAAO,KAAK,GAAG,QAAA;AAAA,aAAgBA,KAAAA,OAAO,MAAM,GAAG,QAAA;AAAA,YAAiBA,CAAAA,KAAAA,uBAAuB,QAAA;AAAA,UAAA;AAAA;SAWlPC,KAAAA,MAAM,GAAA;AAAA,QAGNC,MAAA,KAAA,EAAM,sBADdJ,mBAKM,OAAA;AAAA;UAHH,OAAKK,eAAEH,KAAAA,OAAO,KAAK;AAAA,QAAA;UAEpBI,WAAqB,KAAA,QAAA,OAAA;AAAA,QAAA;QAEvBA,WAwBO,kCAxBP,MAwBO;AAAA,UAtBG,eAAA,sBADRC,YAsBgB,eAAA;AAAA;YApBb,OAAO,QAAA;AAAA,UAAA;YAGAH,MAAA,KAAA,EAAM;oBACX;AAAA,0BAED,MAAuB;AAAA,gBAAvBE,WAAuB,KAAA,QAAA,SAAA;AAAA,cAAA;;;YAGjBF,MAAA,KAAA,EAAM;oBACX;AAAA,0BAED,MAAsB;AAAA,gBAAtBE,WAAsB,KAAA,QAAA,QAAA;AAAA,cAAA;;;YAGhBF,MAAA,KAAA,EAAM;oBACX;AAAA,0BAED,MAAyB;AAAA,gBAAzBE,WAAyB,KAAA,QAAA,WAAA;AAAA,cAAA;;;;;QAKvBF,MAAA,KAAA,EAAM,wBADdJ,mBAKM,OAAA;AAAA;UAHH,OAAKK,eAAA,CAAGH,KAAAA,OAAO,SAAS,QAAA,YAAY,CAAA;AAAA,QAAA;UAErCI,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;QAGFF,MAAA,KAAA,EAAM,uBADdJ,mBAKM,OAAA;AAAA;UAHH,OAAKK,eAAEH,KAAAA,OAAO,MAAM;AAAA,QAAA;UAErBI,WAAsB,KAAA,QAAA,QAAA;AAAA,QAAA;;;;;"}
+{"version":3,"file":"RuiCard.vue2.js","sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  elevation?: number;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  elevation = 0,\n  variant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  contentClass = '',\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n</script>\n\n<template>\n  <div\n    :class=\"[\n      $style.card,\n      `shadow-${elevation}`,\n      $style[`rounded__${rounded}`],\n      {\n        [$style.outlined]: variant === 'outlined',\n        [$style.dense]: dense,\n        [$style.divide]: divide,\n        [$style['no-padding']]: noPadding,\n      },\n    ]\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.image\"\n      :class=\"$style.image\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      :class=\"[$style.content, contentClass]\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      :class=\"$style.footer\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.card {\n  @apply flex flex-col h-full w-full bg-white;\n  &.rounded__sm {\n    @apply rounded-[.25rem];\n\n    .image {\n      @apply rounded-t-[.25rem];\n    }\n  }\n\n  &.rounded__md {\n    @apply rounded-[.5rem];\n\n    .image {\n      @apply rounded-t-[.5rem];\n    }\n  }\n\n  &.rounded__lg {\n    @apply rounded-[1rem];\n\n    .image {\n      @apply rounded-t-[1rem];\n    }\n  }\n\n  .image {\n    @apply overflow-hidden;\n  }\n\n  .content {\n    @apply p-4 text-body-1 text-rui-light-text overflow-y-auto;\n  }\n\n  .footer {\n    @apply p-4 pt-2 flex space-x-2 items-center justify-start mt-auto;\n  }\n\n  &.flat {\n    @apply border-none;\n  }\n\n  &.outlined {\n    @apply border border-black/[0.12];\n  }\n\n  &.divide {\n    @apply divide-y divide-black/[0.12];\n  }\n\n  &.dense {\n    > .content {\n      @apply p-3;\n    }\n\n    > .footer {\n      @apply py-1 flex space-x-2;\n    }\n  }\n\n  &.no-padding {\n    > .content {\n      @apply p-0;\n    }\n  }\n}\n\n:global(.dark) {\n  .card {\n    @apply bg-[#1E1E1E];\n\n    .content {\n      @apply text-rui-dark-text;\n    }\n\n    &.outlined {\n      @apply border-white/[0.12];\n    }\n\n    &.divide {\n      @apply divide-white/[0.12];\n    }\n  }\n}\n</style>\n"],"names":["_useSlots","_openBlock","_createElementBlock","_mergeProps","$style","$attrs","_normalizeClass","_renderSlot","_createBlock"],"mappings":";;;;;;;;;;;;;;;;;;AA6BA,UAAM,QAAQA,SAAA;AAUd,UAAM,iBAAiB,SAAkB,MAAM,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,MAAM,SAAS;;AAIhF,aAAAC,UAAA,GAAAC,mBAyDM,OAzDNC,WAyDM;AAAA,QAxDH,OAAK;AAAA,UAAUC,KAAAA,OAAO;AAAA,oBAAsB,QAAA,SAAS;AAAA,UAAUA,KAAAA,mBAAmB,QAAA,OAAO,EAAA;AAAA;aAAsBA,KAAAA,OAAO,QAAQ,GAAG,QAAA,YAAO;AAAA,aAA0BA,KAAAA,OAAO,KAAK,GAAG,QAAA;AAAA,aAAgBA,KAAAA,OAAO,MAAM,GAAG,QAAA;AAAA,YAAiBA,CAAAA,KAAAA,uBAAuB,QAAA;AAAA,UAAA;AAAA;SAWlPC,KAAAA,MAAM,GAAA;AAAA,QAGN,MAAM,sBADdH,mBAKM,OAAA;AAAA;UAHH,OAAKI,eAAEF,KAAAA,OAAO,KAAK;AAAA,QAAA;UAEpBG,WAAqB,KAAA,QAAA,OAAA;AAAA,QAAA;QAEvBA,WAwBO,kCAxBP,MAwBO;AAAA,UAtBG,eAAA,sBADRC,YAsBgB,eAAA;AAAA;YApBb,OAAO,QAAA;AAAA,UAAA;YAGA,MAAM;oBACX;AAAA,0BAED,MAAuB;AAAA,gBAAvBD,WAAuB,KAAA,QAAA,SAAA;AAAA,cAAA;;;YAGjB,MAAM;oBACX;AAAA,0BAED,MAAsB;AAAA,gBAAtBA,WAAsB,KAAA,QAAA,QAAA;AAAA,cAAA;;;YAGhB,MAAM;oBACX;AAAA,0BAED,MAAyB;AAAA,gBAAzBA,WAAyB,KAAA,QAAA,WAAA;AAAA,cAAA;;;;;QAKvB,MAAM,wBADdL,mBAKM,OAAA;AAAA;UAHH,OAAKI,eAAA,CAAGF,KAAAA,OAAO,SAAS,QAAA,YAAY,CAAA;AAAA,QAAA;UAErCG,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;QAGF,MAAM,uBADdL,mBAKM,OAAA;AAAA;UAHH,OAAKI,eAAEF,KAAAA,OAAO,MAAM;AAAA,QAAA;UAErBG,WAAsB,KAAA,QAAA,QAAA;AAAA,QAAA;;;;;"}

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

@@ -1,17 +1,12 @@
 export interface Props {
     dense?: boolean;
 }
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
-type __VLS_Slots = {} & {
-    prepend?: (props: typeof __VLS_1) => any;
-} & {
-    header?: (props: typeof __VLS_3) => any;
-} & {
-    subheader?: (props: typeof __VLS_5) => any;
+type __VLS_Slots = {
+    prepend?: () => any;
+    header?: () => any;
+    subheader?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    dense: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"RuiCardHeader.vue2.js","sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nexport interface Props {\n  dense?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCardHeader',\n  inheritAttrs: false,\n});\n\nwithDefaults(defineProps<Props>(), {\n  dense: false,\n});\n</script>\n\n<template>\n  <div\n    :class=\"[\n      $style.head,\n      {\n        [$style.dense]: dense,\n        [$style.has_prepend]: !!$slots.prepend,\n      },\n    ]\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"$slots.prepend\"\n      :class=\"$style.prepend\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <div :class=\"$style.headers\">\n      <h5\n        v-if=\"$slots.header\"\n        :class=\"$style.header\"\n      >\n        <slot name=\"header\" />\n      </h5>\n      <p\n        v-if=\"$slots.subheader\"\n        :class=\"$style.subheader\"\n      >\n        <slot name=\"subheader\" />\n      </p>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.head {\n  @apply p-4 flex space-x-4;\n\n  .prepend {\n    @apply rounded-full flex items-center justify-center w-10 h-10;\n    @apply text-[1.25rem] text-white bg-rui-grey-400 overflow-hidden;\n  }\n\n  .headers {\n    @apply flex flex-col justify-center;\n  }\n\n  .header {\n    @apply text-rui-text text-h6;\n  }\n\n  .subheader {\n    @apply text-rui-text-secondary text-body-2 mb-0;\n  }\n\n  &.has_prepend {\n    .header {\n      @apply text-body-1;\n    }\n  }\n\n  &.dense {\n    @apply p-3 space-x-2;\n\n    .prepend {\n      @apply text-base p-[0.08rem] w-9 h-9;\n    }\n  }\n}\n\n:global(.dark) {\n  .head {\n    .prepend {\n      @apply bg-rui-grey-700 text-black/90;\n    }\n\n    .header {\n      @apply text-rui-dark-text;\n    }\n\n    .subheader {\n      @apply text-rui-dark-text-secondary;\n    }\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","$style","$slots","$attrs","_normalizeClass","_renderSlot","_createElementVNode"],"mappings":";;;;;;;;;;;;AAgBE,aAAAA,UAAA,GAAAC,mBA8BM,OA9BNC,WA8BM;AAAA,QA7BH,OAAK;AAAA,UAAUC,KAAAA,OAAO;AAAA;aAAuBA,KAAAA,OAAO,KAAK,GAAG,QAAA;AAAA,YAAgBA,CAAAA,KAAAA,OAAO,WAAW,GAAA,CAAA,CAAKC,KAAAA,OAAO;AAAA,UAAA;AAAA;SAOnGC,KAAAA,MAAM,GAAA;AAAA,QAGND,KAAAA,OAAO,wBADfH,mBAKM,OAAA;AAAA;UAHH,OAAKK,eAAEH,KAAAA,OAAO,OAAO;AAAA,QAAA;UAEtBI,WAAuB,KAAA,QAAA,SAAA;AAAA,QAAA;QAEzBC,mBAaM,OAAA;AAAA,UAbA,OAAKF,eAAEH,KAAAA,OAAO,OAAO;AAAA,QAAA;UAEjBC,KAAAA,OAAO,uBADfH,mBAKK,MAAA;AAAA;YAHF,OAAKK,eAAEH,KAAAA,OAAO,MAAM;AAAA,UAAA;YAErBI,WAAsB,KAAA,QAAA,QAAA;AAAA,UAAA;UAGhBH,KAAAA,OAAO,0BADfH,mBAKI,KAAA;AAAA;YAHD,OAAKK,eAAEH,KAAAA,OAAO,SAAS;AAAA,UAAA;YAExBI,WAAyB,KAAA,QAAA,WAAA;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"RuiCardHeader.vue2.js","sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nexport interface Props {\n  dense?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCardHeader',\n  inheritAttrs: false,\n});\n\nconst { dense = false } = defineProps<Props>();\n\ndefineSlots<{\n  prepend?: () => any;\n  header?: () => any;\n  subheader?: () => any;\n}>();\n</script>\n\n<template>\n  <div\n    :class=\"[\n      $style.head,\n      {\n        [$style.dense]: dense,\n        [$style.has_prepend]: !!$slots.prepend,\n      },\n    ]\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"$slots.prepend\"\n      :class=\"$style.prepend\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <div :class=\"$style.headers\">\n      <h5\n        v-if=\"$slots.header\"\n        :class=\"$style.header\"\n      >\n        <slot name=\"header\" />\n      </h5>\n      <p\n        v-if=\"$slots.subheader\"\n        :class=\"$style.subheader\"\n      >\n        <slot name=\"subheader\" />\n      </p>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.head {\n  @apply p-4 flex space-x-4;\n\n  .prepend {\n    @apply rounded-full flex items-center justify-center w-10 h-10;\n    @apply text-[1.25rem] text-white bg-rui-grey-400 overflow-hidden;\n  }\n\n  .headers {\n    @apply flex flex-col justify-center;\n  }\n\n  .header {\n    @apply text-rui-text text-h6;\n  }\n\n  .subheader {\n    @apply text-rui-text-secondary text-body-2 mb-0;\n  }\n\n  &.has_prepend {\n    .header {\n      @apply text-body-1;\n    }\n  }\n\n  &.dense {\n    @apply p-3 space-x-2;\n\n    .prepend {\n      @apply text-base p-[0.08rem] w-9 h-9;\n    }\n  }\n}\n\n:global(.dark) {\n  .head {\n    .prepend {\n      @apply bg-rui-grey-700 text-black/90;\n    }\n\n    .header {\n      @apply text-rui-dark-text;\n    }\n\n    .subheader {\n      @apply text-rui-dark-text-secondary;\n    }\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","$style","$slots","$attrs","_normalizeClass","_renderSlot","_createElementVNode"],"mappings":";;;;;;;;;;;;AAoBE,aAAAA,UAAA,GAAAC,mBA8BM,OA9BNC,WA8BM;AAAA,QA7BH,OAAK;AAAA,UAAUC,KAAAA,OAAO;AAAA;aAAuBA,KAAAA,OAAO,KAAK,GAAG,QAAA;AAAA,YAAgBA,CAAAA,KAAAA,OAAO,WAAW,GAAA,CAAA,CAAKC,KAAAA,OAAO;AAAA,UAAA;AAAA;SAOnGC,KAAAA,MAAM,GAAA;AAAA,QAGND,KAAAA,OAAO,wBADfH,mBAKM,OAAA;AAAA;UAHH,OAAKK,eAAEH,KAAAA,OAAO,OAAO;AAAA,QAAA;UAEtBI,WAAuB,KAAA,QAAA,SAAA;AAAA,QAAA;QAEzBC,mBAaM,OAAA;AAAA,UAbA,OAAKF,eAAEH,KAAAA,OAAO,OAAO;AAAA,QAAA;UAEjBC,KAAAA,OAAO,uBADfH,mBAKK,MAAA;AAAA;YAHF,OAAKK,eAAEH,KAAAA,OAAO,MAAM;AAAA,UAAA;YAErBI,WAAsB,KAAA,QAAA,QAAA;AAAA,UAAA;UAGhBH,KAAAA,OAAO,0BADfH,mBAKI,KAAA;AAAA;YAHD,OAAKK,eAAEH,KAAAA,OAAO,SAAS;AAAA,UAAA;YAExBI,WAAyB,KAAA,QAAA,WAAA;AAAA,UAAA;;;;;;"}

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

@@ -13,31 +13,17 @@ export interface Props {
     textColor?: string;
     contentClass?: string;
 }
-declare var __VLS_1: {}, __VLS_3: {};
-type __VLS_Slots = {} & {
-    prepend?: (props: typeof __VLS_1) => any;
-} & {
-    default?: (props: typeof __VLS_3) => any;
+type __VLS_Slots = {
+    prepend?: () => any;
+    default?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (e: any) => any;
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (e: MouseEvent) => any;
     "click:close": () => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onClick?: ((e: any) => any) | undefined;
+    onClick?: ((e: MouseEvent) => any) | undefined;
     "onClick:close"?: (() => any) | undefined;
-}>, {
-    size: "sm" | "md";
-    variant: "filled" | "outlined";
-    color: "grey" | ContextColorsType;
-    disabled: boolean;
-    contentClass: string;
-    closeable: boolean;
-    tile: boolean;
-    clickable: boolean;
-    closeIcon: RuiIcons;
-    bgColor: string;
-    textColor: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,5 @@
-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 { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, normalizeClass, renderSlot, createCommentVNode, createElementVNode, withModifiers, createVNode } from "vue";
+import { objectOmit } from "@vueuse/shared";
 import RuiIcon from "../icons/RuiIcon.vue.js";
 const _hoisted_1 = ["disabled"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -18,30 +17,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     variant: { default: "filled" },
     color: { default: "grey" },
     closeIcon: { default: "lu-circle-x" },
-    bgColor: { default: void 0 },
-    textColor: { default: void 0 },
+    bgColor: { default: () => void 0 },
+    textColor: { default: () => void 0 },
     contentClass: { default: "" }
   },
   emits: ["click:close", "click"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
     const emit = __emit;
-    const { clickable, disabled, bgColor, textColor } = toRefs(props);
-    function click(e) {
-      if (get(logicOr(logicNot(clickable), disabled)))
-        return;
-      emit("click", e);
-    }
     const style = computed(() => {
       const style2 = {};
-      const bg = get(bgColor);
-      const text = get(textColor);
-      if (bg)
-        style2.backgroundColor = bg;
-      if (text)
-        style2.color = text;
+      if (__props.bgColor)
+        style2.backgroundColor = __props.bgColor;
+      if (__props.textColor)
+        style2.color = __props.textColor;
       return style2;
     });
+    function click(e) {
+      if (!__props.clickable || __props.disabled)
+        return;
+      emit("click", e);
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({
         class: [
@@ -50,9 +45,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           _ctx.$style[__props.size ?? ""],
           _ctx.$style[__props.variant ?? ""],
           {
-            [_ctx.$style.disabled]: unref(disabled),
+            [_ctx.$style.disabled]: __props.disabled,
             [_ctx.$style.tile]: __props.tile,
-            [_ctx.$style.readonly]: !unref(clickable)
+            [_ctx.$style.readonly]: !__props.clickable
           }
         ],
         style: unref(style),
@@ -75,7 +70,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         __props.closeable ? (openBlock(), createElementBlock("button", {
           key: 1,
           class: normalizeClass(_ctx.$style.chip__close),
-          disabled: unref(disabled),
+          disabled: __props.disabled,
           type: "button",
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("click:close"), ["stop"]))
         }, [

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

@@ -1 +1 @@
-{"version":3,"file":"RuiChip.vue2.js","sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { logicNot, logicOr } from '@vueuse/math';\nimport { objectOmit } from '@vueuse/shared';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\nexport interface Props {\n  tile?: boolean;\n  clickable?: boolean;\n  closeable?: boolean;\n  disabled?: boolean;\n  size?: 'sm' | 'md';\n  variant?: 'filled' | 'outlined';\n  color?: 'grey' | ContextColorsType;\n  closeIcon?: RuiIcons;\n  bgColor?: string;\n  textColor?: string;\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiChip',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  tile: false,\n  size: 'md',\n  color: 'grey',\n  clickable: false,\n  closeable: false,\n  disabled: false,\n  variant: 'filled',\n  closeIcon: 'lu-circle-x',\n  bgColor: undefined,\n  textColor: undefined,\n  contentClass: '',\n});\n\nconst emit = defineEmits<{\n  (event: 'click:close'): void;\n  (event: 'click', e: any): void;\n}>();\n\nconst { clickable, disabled, bgColor, textColor } = toRefs(props);\n\nfunction click(e: any) {\n  if (get(logicOr(logicNot(clickable), disabled)))\n    return;\n\n  emit('click', e);\n}\n\nconst style = computed<Partial<StyleValue>>(() => {\n  const style: Partial<StyleValue> = {};\n  const bg = get(bgColor);\n  const text = get(textColor);\n  if (bg)\n    style.backgroundColor = bg;\n\n  if (text)\n    style.color = text;\n\n  return style;\n});\n</script>\n\n<template>\n  <div\n    :class=\"[\n      $style.chip,\n      $style[color ?? ''],\n      $style[size ?? ''],\n      $style[variant ?? ''],\n      {\n        [$style.disabled]: disabled,\n        [$style.tile]: tile,\n        [$style.readonly]: !clickable,\n      },\n    ]\"\n    :style=\"style\"\n    role=\"button\"\n    tabindex=\"0\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($event)\"\n  >\n    <div\n      v-if=\"$slots.prepend\"\n      :class=\"$style.chip__prepend\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <span :class=\"[$style.chip__label, contentClass]\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"$style.chip__close\"\n      :disabled=\"disabled\"\n      type=\"button\"\n      @click.stop=\"emit('click:close')\"\n    >\n      <RuiIcon\n        :class=\"$style.chip__close_icon\"\n        :size=\"size === 'sm' ? 16 : 24\"\n        :name=\"closeIcon\"\n      />\n    </button>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n.chip {\n  @apply inline-flex items-center justify-between rounded-full px-1.5 py-[0.25rem] transition-all cursor-default outline-none;\n  @apply max-w-full truncate;\n\n  &.tile {\n    @apply rounded-sm;\n  }\n\n  &:not(.readonly):not(.disabled) {\n    @apply hover:brightness-90 focus:brightness-75;\n  }\n\n  &.grey {\n    @apply text-rui-text;\n\n    &.filled {\n      @apply bg-rui-grey-200;\n    }\n\n    &.outlined {\n      @apply border border-black/[0.26] bg-transparent;\n\n      &:not(.readonly):not(.disabled) {\n        @apply hover:bg-black/[0.04] focus:bg-black/[0.12];\n      }\n    }\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      &.filled {\n        @apply text-rui-dark-text bg-rui-#{$color};\n      }\n\n      &.outlined {\n        @apply border text-rui-#{$color} border-rui-#{$color}/50 bg-transparent;\n\n        &:not(.readonly):not(.disabled) {\n          @apply hover:bg-rui-#{$color}/[0.04] focus:bg-rui-#{$color}/[0.12];\n        }\n      }\n    }\n  }\n\n  &__prepend {\n    @apply rounded-full flex items-center justify-center pr-0 w-6 h-6;\n    @apply text-[0.6rem] text-white bg-rui-grey-400 -ml-0.5 overflow-hidden;\n  }\n\n  &__label {\n    @apply truncate px-[0.375rem] text-[0.8125rem];\n  }\n\n  &__close {\n    @apply rounded-full flex items-center p-[0.13rem] pl-0;\n    @apply inset-y-0 focus:outline-none -mr-1;\n\n    &_icon {\n      @apply opacity-50 hover:opacity-80 transition-opacity;\n    }\n  }\n\n  &.md {\n    @apply min-h-[2.26rem];\n  }\n\n  &.sm {\n    @apply py-[0.19rem];\n\n    &__prepend {\n      @apply text-[0.5rem] p-[0.08rem] w-4 h-4 -ml-1;\n    }\n\n    &__label {\n      @apply px-[0.3rem] text-[0.7rem];\n    }\n\n    &__close {\n      @apply p-[0.08rem];\n      @apply -mr-1.5;\n    }\n  }\n\n  &.disabled,\n  &.readonly {\n    @apply cursor-default;\n\n    &__close {\n      @apply cursor-default;\n\n      &_icon {\n        @apply opacity-50;\n      }\n    }\n  }\n\n  &.disabled {\n    @apply opacity-40;\n  }\n}\n\n:global(.dark) {\n  .chip {\n    &:not(.readonly):not(.disabled) {\n      @apply hover:brightness-110 focus:brightness-75;\n    }\n\n    &.grey {\n      &.filled {\n        @apply bg-rui-grey-800;\n      }\n\n      &.outlined {\n        @apply border-white/[0.26];\n\n        &:not(.readonly):not(.disabled) {\n          @apply hover:bg-white/[0.04] focus:bg-white/[0.12];\n        }\n      }\n    }\n\n    @each $color in (warning, success, info) {\n      &.#{$color} {\n        &.filled {\n          @apply text-rui-light-text;\n        }\n      }\n    }\n\n    &__prepend {\n      @apply bg-rui-grey-700;\n    }\n\n    &__close {\n      &_icon {\n        @apply hover:text-rui-grey-300;\n      }\n    }\n  }\n}\n</style>\n"],"names":["style","_openBlock","_createElementBlock","_mergeProps","$style","_unref","$attrs","$slots","_normalizeClass","_renderSlot","_createElementVNode","_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,UAAM,QAAQ;AAcd,UAAM,OAAO;AAKb,UAAM,EAAE,WAAW,UAAU,SAAS,UAAA,IAAc,OAAO,KAAK;AAEhE,aAAS,MAAM,GAAQ;AACrB,UAAI,IAAI,QAAQ,SAAS,SAAS,GAAG,QAAQ,CAAC;AAC5C;AAEF,WAAK,SAAS,CAAC;AAAA,IACjB;AAEA,UAAM,QAAQ,SAA8B,MAAM;AAChD,YAAMA,SAA6B,CAAA;AACnC,YAAM,KAAK,IAAI,OAAO;AACtB,YAAM,OAAO,IAAI,SAAS;AAC1B,UAAI;AACFA,eAAM,kBAAkB;AAE1B,UAAI;AACFA,eAAM,QAAQ;AAEhB,aAAOA;AAAAA,IACT,CAAC;;AAIC,aAAAC,UAAA,GAAAC,mBAwCM,OAxCNC,WAwCM;AAAA,QAvCH,OAAK;AAAA,UAAUC,KAAAA,OAAO;AAAA,UAAYA,KAAAA,OAAO,QAAA,SAAK,EAAA;AAAA,UAAeA,KAAAA,OAAO,QAAA,QAAI,EAAA;AAAA,UAAeA,KAAAA,OAAO,QAAA,WAAO,EAAA;AAAA;aAA0BA,KAAAA,OAAO,QAAQ,GAAGC,MAAA,QAAA;AAAA,aAAmBD,KAAAA,OAAO,IAAI,GAAG,QAAA;AAAA,aAAeA,KAAAA,OAAO,QAAQ,GAAA,CAAIC,MAAA,SAAA;AAAA,UAAA;AAAA;QAWpN,OAAOA,MAAA,KAAA;AAAA,QACR,MAAK;AAAA,QACL,UAAS;AAAA,MAAA,GACDA,MAAA,UAAA,EAAWC,KAAAA,QAAM,CAAA,SAAA,CAAA,GAAA;AAAA,QACxB,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,MAAM,MAAM;AAAA,MAAA;QAGZC,KAAAA,OAAO,wBADfL,mBAKM,OAAA;AAAA;UAHH,OAAKM,eAAEJ,KAAAA,OAAO,aAAa;AAAA,QAAA;UAE5BK,WAAuB,KAAA,QAAA,SAAA;AAAA,QAAA;QAEzBC,mBAEO,QAAA;AAAA,UAFA,OAAKF,eAAA,CAAGJ,KAAAA,OAAO,aAAa,QAAA,YAAY,CAAA;AAAA,QAAA;UAC7CK,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;QAGF,QAAA,0BADRP,mBAYS,UAAA;AAAA;UAVN,OAAKM,eAAEJ,KAAAA,OAAO,WAAW;AAAA,UACzB,UAAUC,MAAA,QAAA;AAAA,UACX,MAAK;AAAA,UACJ,6DAAY,KAAI,aAAA,GAAA,CAAA,MAAA,CAAA;AAAA,QAAA;UAEjBM,YAIE,SAAA;AAAA,YAHC,OAAKH,eAAEJ,KAAAA,OAAO,gBAAgB;AAAA,YAC9B,MAAM,QAAA,SAAI,OAAA,KAAA;AAAA,YACV,MAAM,QAAA;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"RuiChip.vue2.js","sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\nexport interface Props {\n  tile?: boolean;\n  clickable?: boolean;\n  closeable?: boolean;\n  disabled?: boolean;\n  size?: 'sm' | 'md';\n  variant?: 'filled' | 'outlined';\n  color?: 'grey' | ContextColorsType;\n  closeIcon?: RuiIcons;\n  bgColor?: string;\n  textColor?: string;\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiChip',\n  inheritAttrs: false,\n});\n\nconst {\n  tile = false,\n  size = 'md',\n  color = 'grey',\n  clickable = false,\n  closeable = false,\n  disabled = false,\n  variant = 'filled',\n  closeIcon = 'lu-circle-x',\n  bgColor = undefined,\n  textColor = undefined,\n  contentClass = '',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  'click:close': [];\n  'click': [e: MouseEvent];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  default?: () => any;\n}>();\n\nconst style = computed<Partial<StyleValue>>(() => {\n  const style: Partial<StyleValue> = {};\n  if (bgColor)\n    style.backgroundColor = bgColor;\n\n  if (textColor)\n    style.color = textColor;\n\n  return style;\n});\n\nfunction click(e: MouseEvent): void {\n  if (!clickable || disabled)\n    return;\n\n  emit('click', e);\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      $style.chip,\n      $style[color ?? ''],\n      $style[size ?? ''],\n      $style[variant ?? ''],\n      {\n        [$style.disabled]: disabled,\n        [$style.tile]: tile,\n        [$style.readonly]: !clickable,\n      },\n    ]\"\n    :style=\"style\"\n    role=\"button\"\n    tabindex=\"0\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($event)\"\n  >\n    <div\n      v-if=\"$slots.prepend\"\n      :class=\"$style.chip__prepend\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <span :class=\"[$style.chip__label, contentClass]\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"$style.chip__close\"\n      :disabled=\"disabled\"\n      type=\"button\"\n      @click.stop=\"emit('click:close')\"\n    >\n      <RuiIcon\n        :class=\"$style.chip__close_icon\"\n        :size=\"size === 'sm' ? 16 : 24\"\n        :name=\"closeIcon\"\n      />\n    </button>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n.chip {\n  @apply inline-flex items-center justify-between rounded-full px-1.5 py-[0.25rem] transition-all cursor-default outline-none;\n  @apply max-w-full truncate;\n\n  &.tile {\n    @apply rounded-sm;\n  }\n\n  &:not(.readonly):not(.disabled) {\n    @apply hover:brightness-90 focus:brightness-75;\n  }\n\n  &.grey {\n    @apply text-rui-text;\n\n    &.filled {\n      @apply bg-rui-grey-200;\n    }\n\n    &.outlined {\n      @apply border border-black/[0.26] bg-transparent;\n\n      &:not(.readonly):not(.disabled) {\n        @apply hover:bg-black/[0.04] focus:bg-black/[0.12];\n      }\n    }\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      &.filled {\n        @apply text-rui-dark-text bg-rui-#{$color};\n      }\n\n      &.outlined {\n        @apply border text-rui-#{$color} border-rui-#{$color}/50 bg-transparent;\n\n        &:not(.readonly):not(.disabled) {\n          @apply hover:bg-rui-#{$color}/[0.04] focus:bg-rui-#{$color}/[0.12];\n        }\n      }\n    }\n  }\n\n  &__prepend {\n    @apply rounded-full flex items-center justify-center pr-0 w-6 h-6;\n    @apply text-[0.6rem] text-white bg-rui-grey-400 -ml-0.5 overflow-hidden;\n  }\n\n  &__label {\n    @apply truncate px-[0.375rem] text-[0.8125rem];\n  }\n\n  &__close {\n    @apply rounded-full flex items-center p-[0.13rem] pl-0;\n    @apply inset-y-0 focus:outline-none -mr-1;\n\n    &_icon {\n      @apply opacity-50 hover:opacity-80 transition-opacity;\n    }\n  }\n\n  &.md {\n    @apply min-h-[2.26rem];\n  }\n\n  &.sm {\n    @apply py-[0.19rem];\n\n    &__prepend {\n      @apply text-[0.5rem] p-[0.08rem] w-4 h-4 -ml-1;\n    }\n\n    &__label {\n      @apply px-[0.3rem] text-[0.7rem];\n    }\n\n    &__close {\n      @apply p-[0.08rem];\n      @apply -mr-1.5;\n    }\n  }\n\n  &.disabled,\n  &.readonly {\n    @apply cursor-default;\n\n    &__close {\n      @apply cursor-default;\n\n      &_icon {\n        @apply opacity-50;\n      }\n    }\n  }\n\n  &.disabled {\n    @apply opacity-40;\n  }\n}\n\n:global(.dark) {\n  .chip {\n    &:not(.readonly):not(.disabled) {\n      @apply hover:brightness-110 focus:brightness-75;\n    }\n\n    &.grey {\n      &.filled {\n        @apply bg-rui-grey-800;\n      }\n\n      &.outlined {\n        @apply border-white/[0.26];\n\n        &:not(.readonly):not(.disabled) {\n          @apply hover:bg-white/[0.04] focus:bg-white/[0.12];\n        }\n      }\n    }\n\n    @each $color in (warning, success, info) {\n      &.#{$color} {\n        &.filled {\n          @apply text-rui-light-text;\n        }\n      }\n    }\n\n    &__prepend {\n      @apply bg-rui-grey-700;\n    }\n\n    &__close {\n      &_icon {\n        @apply hover:text-rui-grey-300;\n      }\n    }\n  }\n}\n</style>\n"],"names":["style","_openBlock","_createElementBlock","_mergeProps","$style","_unref","$attrs","$slots","_normalizeClass","_renderSlot","_createElementVNode","_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,UAAM,OAAO;AAUb,UAAM,QAAQ,SAA8B,MAAM;AAChD,YAAMA,SAA6B,CAAA;AACnC,UAAI,QAAA;AACFA,eAAM,kBAAkB,QAAA;AAE1B,UAAI,QAAA;AACFA,eAAM,QAAQ,QAAA;AAEhB,aAAOA;AAAAA,IACT,CAAC;AAED,aAAS,MAAM,GAAqB;AAClC,UAAI,CAAC,QAAA,aAAa,QAAA;AAChB;AAEF,WAAK,SAAS,CAAC;AAAA,IACjB;;AAIE,aAAAC,UAAA,GAAAC,mBAwCM,OAxCNC,WAwCM;AAAA,QAvCH,OAAK;AAAA,UAAUC,KAAAA,OAAO;AAAA,UAAYA,KAAAA,OAAO,QAAA,SAAK,EAAA;AAAA,UAAeA,KAAAA,OAAO,QAAA,QAAI,EAAA;AAAA,UAAeA,KAAAA,OAAO,QAAA,WAAO,EAAA;AAAA;aAA0BA,KAAAA,OAAO,QAAQ,GAAG,QAAA;AAAA,aAAmBA,KAAAA,OAAO,IAAI,GAAG,QAAA;AAAA,aAAeA,KAAAA,OAAO,QAAQ,GAAA,CAAI,QAAA;AAAA,UAAA;AAAA;QAWpN,OAAOC,MAAA,KAAA;AAAA,QACR,MAAK;AAAA,QACL,UAAS;AAAA,MAAA,GACDA,MAAA,UAAA,EAAWC,KAAAA,QAAM,CAAA,SAAA,CAAA,GAAA;AAAA,QACxB,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,MAAM,MAAM;AAAA,MAAA;QAGZC,KAAAA,OAAO,wBADfL,mBAKM,OAAA;AAAA;UAHH,OAAKM,eAAEJ,KAAAA,OAAO,aAAa;AAAA,QAAA;UAE5BK,WAAuB,KAAA,QAAA,SAAA;AAAA,QAAA;QAEzBC,mBAEO,QAAA;AAAA,UAFA,OAAKF,eAAA,CAAGJ,KAAAA,OAAO,aAAa,QAAA,YAAY,CAAA;AAAA,QAAA;UAC7CK,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;QAGF,QAAA,0BADRP,mBAYS,UAAA;AAAA;UAVN,OAAKM,eAAEJ,KAAAA,OAAO,WAAW;AAAA,UACzB,UAAU,QAAA;AAAA,UACX,MAAK;AAAA,UACJ,6DAAY,KAAI,aAAA,GAAA,CAAA,MAAA,CAAA;AAAA,QAAA;UAEjBO,YAIE,SAAA;AAAA,YAHC,OAAKH,eAAEJ,KAAAA,OAAO,gBAAgB;AAAA,YAC9B,MAAM,QAAA,SAAI,OAAA,KAAA;AAAA,YACV,MAAM,QAAA;AAAA,UAAA;;;;;;"}

package/dist/components/color-picker/RuiColorBoard.vue.d.ts

@@ -2,7 +2,7 @@ import { Color } from './utils.js';
 type __VLS_Props = {
     color: Color;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:board": (event: {
         saturation: number;
         brightness: number;