@rotki/ui-library 2.12.2 → 2.13.0

package/dist/components/forms/slider/RuiSlider.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent, useCssVars, unref, toRefs, computed, ref, openBlock, createElementBlock, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, withDirectives, mergeProps, isRef, vModelText, Fragment, renderList, createBlock } from "vue";
+import { defineComponent, useCssVars, unref, useModel, useTemplateRef, toRef, computed, openBlock, createElementBlock, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, withDirectives, mergeProps, vModelText, Fragment, renderList, createBlock, mergeModels } from "vue";
 import _sfc_main$1 from "../../helpers/RuiFormTextDetail.vue.js";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
 import { getRootAttrs, getNonRootAttrs } from "../../../utils/helpers.js";
-import { get } from "@vueuse/shared";
 import { useElementBounding } from "@vueuse/core";
+import { get } from "@vueuse/shared";
 const _hoisted_1 = ["data-error"];
 const _hoisted_2 = {
   key: 0,
@@ -16,8 +16,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     inheritAttrs: false
   },
   __name: "RuiSlider",
-  props: {
-    modelValue: { default: 0 },
+  props: /* @__PURE__ */ mergeModels({
     min: { default: 0 },
     max: { default: 100 },
     step: { default: 1 },
@@ -36,32 +35,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     sliderClass: { default: "" },
     tickClass: { default: "" },
     required: { type: Boolean, default: false }
-  },
-  emits: ["update:model-value"],
-  setup(__props, { emit: __emit }) {
+  }, {
+    "modelValue": { default: 0 },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
     useCssVars((_ctx) => ({
-      "c9bc1d76": unref(sliderHeight),
-      "db8d5c30": unref(sliderWidth),
-      "f958c350": unref(trackWidth),
-      "v63a27e48": unref(tickSizeInPx)
+      "v0602bc8e": unref(sliderHeight),
+      "v3a8ac2f4": unref(sliderWidth),
+      "ac6c4868": unref(trackWidth),
+      "v7501a288": unref(tickSizeInPx)
     }));
-    const props = __props;
-    const emit = __emit;
-    const { modelValue, max, min, step, errorMessages, successMessages, vertical, tickSize } = toRefs(props);
-    const vModel = computed({
-      get() {
-        return get(modelValue);
-      },
-      set(value) {
-        emit("update:model-value", value);
-      }
-    });
+    const modelValue = useModel(__props, "modelValue");
+    const outer = useTemplateRef("outer");
+    const { hasError, hasSuccess } = useFormTextDetail(
+      toRef(() => __props.errorMessages),
+      toRef(() => __props.successMessages)
+    );
+    const { width, height } = useElementBounding(outer);
     const ticksData = computed(() => {
-      const minVal = get(min);
-      const stepVal = get(step);
-      const range = get(max) - minVal;
-      const total = range / stepVal;
-      const current = Math.round((get(modelValue) - minVal) / stepVal);
+      const range = __props.max - __props.min;
+      const total = range / __props.step;
+      const current = Math.round((get(modelValue) - __props.min) / __props.step);
       return [current, total];
     });
     const trackWidth = computed(() => {
@@ -69,15 +65,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const percentage = Math.min(100, Math.max(0, Math.round(current / total * 100)));
       return `${percentage}%`;
     });
-    const { hasError, hasSuccess } = useFormTextDetail(
-      errorMessages,
-      successMessages
-    );
-    const outer = ref();
-    const { width, height } = useElementBounding(outer);
     const sliderWidth = computed(() => `${get(width)}px`);
     const sliderHeight = computed(() => `${get(height)}px`);
-    const tickSizeInPx = computed(() => `${get(tickSize)}px`);
+    const tickSizeInPx = computed(() => `${__props.tickSize}px`);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [
         createElementVNode("label", {
@@ -85,10 +75,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             _ctx.$style.wrapper,
             {
               [_ctx.$style.disabled ?? ""]: __props.disabled,
-              [_ctx.$style.vertical ?? ""]: unref(vertical),
+              [_ctx.$style.vertical ?? ""]: __props.vertical,
               [_ctx.$style[__props.color] ?? ""]: __props.color,
               [_ctx.$style["hide-track"] ?? ""]: __props.hideTrack,
-              [_ctx.$style["big-tick"] ?? ""]: unref(tickSize) > 4,
+              [_ctx.$style["big-tick"] ?? ""]: __props.tickSize > 4,
               [_ctx.$style["with-error"] ?? ""]: unref(hasError),
               [_ctx.$style["with-success"] ?? ""]: unref(hasSuccess) && !unref(hasError)
             }
@@ -111,18 +101,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               class: normalizeClass(_ctx.$style.inner)
             }, [
               withDirectives(createElementVNode("input", mergeProps({
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(vModel) ? vModel.value = $event : null),
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
                 class: _ctx.$style.input,
                 type: "range",
-                max: unref(max),
-                min: unref(min),
-                step: unref(step),
+                max: __props.max,
+                min: __props.min,
+                step: __props.step,
                 disabled: __props.disabled,
                 "aria-invalid": unref(hasError),
                 "aria-label": __props.label || void 0,
-                "aria-valuetext": String(unref(vModel))
+                "aria-valuetext": String(modelValue.value)
               }, unref(getNonRootAttrs)(_ctx.$attrs)), null, 16, _hoisted_3), [
-                [vModelText, unref(vModel)]
+                [vModelText, modelValue.value]
               ]),
               createElementVNode("div", {
                 class: normalizeClass(_ctx.$style.slider)
@@ -144,7 +134,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       (openBlock(true), createElementBlock(Fragment, null, renderList(unref(ticksData)[1] + 1, (i) => {
                         return openBlock(), createElementBlock("span", {
                           key: i,
-                          class: normalizeClass(__props.hideTrack ? [__props.tickClass] : { [_ctx.$style.highlighted]: i - 1 <= unref(ticksData)[0], [__props.tickClass]: i - 1 > unref(ticksData)[0] })
+                          class: normalizeClass(
+                            __props.hideTrack ? [__props.tickClass] : {
+                              [_ctx.$style.highlighted]: i - 1 <= unref(ticksData)[0],
+                              [__props.tickClass]: i - 1 > unref(ticksData)[0]
+                            }
+                          )
                         }, null, 2);
                       }), 128))
                     ], 2)) : createCommentVNode("", true)
@@ -155,7 +150,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   __props.showThumbLabel && !__props.disabled ? (openBlock(), createElementBlock("div", {
                     key: 0,
                     class: normalizeClass(_ctx.$style.slider__thumb_label)
-                  }, toDisplayString(unref(modelValue)), 3)) : createCommentVNode("", true)
+                  }, toDisplayString(modelValue.value), 3)) : createCommentVNode("", true)
                 ], 2)
               ], 2)
             ], 2)
@@ -164,8 +159,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         !__props.hideDetails ? (openBlock(), createBlock(_sfc_main$1, {
           key: 0,
           class: "pt-1",
-          "error-messages": unref(errorMessages),
-          "success-messages": unref(successMessages),
+          "error-messages": __props.errorMessages,
+          "success-messages": __props.successMessages,
           hint: __props.hint
         }, null, 8, ["error-messages", "success-messages", "hint"])) : createCommentVNode("", true)
       ], 16);

package/dist/components/forms/slider/RuiSlider.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSlider.vue2.js","sources":["../../../../src/components/forms/slider/RuiSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props {\n  modelValue?: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  showThumbLabel?: boolean;\n  showTicks?: boolean;\n  hideTrack?: boolean;\n  tickSize?: number;\n  vertical?: boolean;\n  color?: ContextColorsType;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  sliderClass?: string;\n  tickClass?: string;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSlider',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: 0,\n  min: 0,\n  max: 100,\n  step: 1,\n  disabled: false,\n  showThumbLabel: false,\n  showTicks: false,\n  hideTrack: false,\n  vertical: false,\n  tickSize: 2,\n  color: 'primary',\n  label: '',\n  hint: '',\n  errorMessages: () => [],\n  successMessages: () => [],\n  hideDetails: false,\n  sliderClass: '',\n  tickClass: '',\n  required: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: number): void;\n}>();\n\nconst { modelValue, max, min, step, errorMessages, successMessages, vertical, tickSize } = toRefs(props);\n\nconst vModel = computed({\n  get() {\n    return get(modelValue);\n  },\n  set(value: number) {\n    emit('update:model-value', value);\n  },\n});\n\nconst ticksData = computed<[number, number]>(() => {\n  const minVal = get(min);\n  const stepVal = get(step);\n  const range = get(max) - minVal;\n  const total = range / stepVal;\n  const current = Math.round((get(modelValue) - minVal) / stepVal);\n\n  return [current, total];\n});\n\nconst trackWidth = computed(() => {\n  const [current, total] = get(ticksData);\n  const percentage = Math.min(100, Math.max(0, Math.round(current / total * 100)));\n  return `${percentage}%`;\n});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  errorMessages,\n  successMessages,\n);\n\nconst outer = ref<HTMLDivElement>();\nconst { width, height } = useElementBounding(outer);\n\nconst sliderWidth = computed(() => `${get(width)}px`);\nconst sliderHeight = computed(() => `${get(height)}px`);\nconst tickSizeInPx = computed(() => `${get(tickSize)}px`);\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"[\n        $style.wrapper,\n        {\n          [$style.disabled ?? '']: disabled,\n          [$style.vertical ?? '']: vertical,\n          [$style[color] ?? '']: color,\n          [$style['hide-track'] ?? '']: hideTrack,\n          [$style['big-tick'] ?? '']: tickSize > 4,\n          [$style['with-error'] ?? '']: hasError,\n          [$style['with-success'] ?? '']: hasSuccess && !hasError,\n        },\n      ]\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div\n        v-if=\"label\"\n        :class=\"$style.label\"\n        class=\"text-body-1\"\n      >\n        {{ label }}\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </div>\n      <div\n        ref=\"outer\"\n        :class=\"$style.outer\"\n      >\n        <div :class=\"$style.inner\">\n          <input\n            v-model=\"vModel\"\n            :class=\"$style.input\"\n            type=\"range\"\n            :max=\"max\"\n            :min=\"min\"\n            :step=\"step\"\n            :disabled=\"disabled\"\n            :aria-invalid=\"hasError\"\n            :aria-label=\"label || undefined\"\n            :aria-valuetext=\"String(vModel)\"\n            v-bind=\"getNonRootAttrs($attrs)\"\n          />\n          <div :class=\"$style.slider\">\n            <div :class=\"$style.slider__inner\">\n              <div :class=\"[$style.slider__container, sliderClass]\">\n                <div\n                  v-if=\"!hideTrack\"\n                  :class=\"$style.slider__container__track\"\n                />\n                <div\n                  v-if=\"showTicks && !disabled\"\n                  :class=\"$style.slider__ticks\"\n                >\n                  <span\n                    v-for=\"i in (ticksData[1] + 1)\"\n                    :key=\"i\"\n                    :class=\"hideTrack ? [tickClass] : { [$style.highlighted]: i - 1 <= ticksData[0], [tickClass]: i - 1 > ticksData[0] }\"\n                  />\n                </div>\n              </div>\n              <div :class=\"$style.slider__thumb\" />\n              <div\n                v-if=\"showThumbLabel && !disabled\"\n                :class=\"$style.slider__thumb_label\"\n              >\n                {{ modelValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n:global(.dark) {\n  .wrapper {\n    &.disabled {\n      .inner {\n        .slider {\n          &__container {\n            @apply bg-rui-grey-800 #{!important};\n\n            &__track {\n              @apply bg-rui-grey-700 #{!important};\n            }\n          }\n\n          &__thumb {\n            @apply bg-rui-grey-700 #{!important};\n          }\n        }\n      }\n    }\n\n    .inner {\n      .slider {\n        &__ticks {\n          span {\n            &.highlighted {\n              @apply bg-[#121212];\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n.wrapper {\n  @apply flex items-start gap-3;\n\n  &.disabled {\n    .label {\n      @apply text-rui-text-disabled;\n    }\n    .inner {\n      .slider {\n        &__container {\n          @apply bg-rui-grey-300 #{!important};\n\n          &__track {\n            @apply bg-rui-grey-400 #{!important};\n          }\n        }\n\n        &__thumb {\n          @apply bg-rui-grey-400 #{!important};\n        }\n      }\n    }\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color},\n    &.with-#{$color} {\n      .inner {\n        .slider {\n          &__container {\n            @apply bg-rui-#{$color} bg-opacity-40;\n\n            &__track {\n              @apply bg-rui-#{$color};\n            }\n          }\n\n          &__thumb {\n            @apply bg-rui-#{$color};\n\n            &:before {\n              @apply bg-rui-#{$color};\n            }\n          }\n\n          &__ticks {\n            span {\n              @apply bg-rui-#{$color};\n            }\n          }\n        }\n      }\n\n      &.big-tick {\n        .inner {\n          .slider {\n            &__ticks {\n              span {\n                @apply bg-rui-#{$color}-lighter;\n\n                &.highlighted {\n                  @apply bg-rui-#{$color};\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @each $color in ('error', 'success') {\n    &.with-#{$color} {\n      .label {\n        @apply text-rui-#{$color};\n      }\n    }\n  }\n\n  &.vertical {\n    @apply flex-col-reverse items-center h-full;\n\n    .label {\n      @apply mb-2 text-center;\n    }\n\n    .outer {\n      @apply min-w-0 min-h-[120px] w-8;\n    }\n\n    .inner {\n      width: v-bind(sliderHeight);\n      height: v-bind(sliderWidth);\n      @apply -rotate-90;\n      transform-origin: 0 0;\n      --tw-translate-y: v-bind(sliderHeight);\n\n      .slider {\n        &__thumb {\n          &_label {\n            @apply mt-6;\n            @apply rotate-90 translate-x-0;\n            transform-origin: 0 50%;\n          }\n        }\n      }\n    }\n  }\n\n  .label {\n    @apply mt-1 text-rui-text;\n  }\n\n  .outer {\n    @apply relative h-8 flex-1 min-w-[120px];\n  }\n\n  .inner {\n    width: v-bind(sliderWidth);\n    height: v-bind(sliderHeight);\n    @apply relative;\n\n    .input {\n      @apply h-full w-full opacity-0 cursor-pointer;\n\n      &:not(:disabled) {\n        &:hover {\n          ~ .slider {\n            .slider {\n              &__thumb {\n                &:before {\n                  @apply scale-100;\n                }\n              }\n            }\n          }\n        }\n\n        &:focus {\n          ~ .slider {\n            .slider {\n              &__thumb {\n                &:before {\n                  @apply scale-100 opacity-15;\n                }\n              }\n            }\n          }\n        }\n\n        &:active {\n          ~ .slider {\n            .slider {\n              &__thumb {\n                &:before {\n                  @apply scale-100 opacity-30;\n                }\n\n                &_label {\n                  @apply opacity-100 visible;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n\n    .slider {\n      @apply absolute h-full w-full top-0 px-2 pointer-events-none;\n\n      &__inner {\n        @apply relative h-full w-full cursor-pointer;\n      }\n\n      &__container {\n        @apply absolute top-1/2 transform -translate-y-1/2;\n        @apply w-full h-1 rounded-full;\n\n        &__track {\n          width: v-bind(trackWidth);\n          @apply transition-all ease-linear duration-75 delay-0;\n          @apply h-full rounded-full;\n        }\n      }\n\n      &__ticks {\n        @apply h-full absolute top-0;\n        @apply flex justify-between items-center;\n        margin: 0 calc(v-bind(tickSizeInPx) / -2);\n        width: calc(100% + v-bind(tickSizeInPx));\n\n        span {\n          @apply rounded-full;\n          width: calc(v-bind(tickSizeInPx));\n          height: calc(v-bind(tickSizeInPx));\n\n          &.highlighted {\n            @apply bg-rui-grey-100;\n          }\n        }\n      }\n\n      &__thumb {\n        @apply absolute top-1/2 transition-all ease-linear duration-75 delay-0 transform -translate-y-1/2 -translate-x-1/2;\n        @apply w-3 h-3 rounded-full shadow-2;\n        left: v-bind(trackWidth);\n\n        &:before {\n          @apply w-8 h-8 rounded-full absolute top-1/2 left-1/2;\n          @apply opacity-10;\n          @apply transition transform -translate-x-1/2 -translate-y-1/2 scale-0;\n          content: '';\n        }\n\n        &_label {\n          left: v-bind(trackWidth);\n          @apply invisible opacity-0;\n          @apply absolute -mt-7 transition-all ease-linear duration-75 delay-0 transform -translate-x-1/2;\n          @apply px-2 py-1 text-xs font-normal;\n          @apply bg-rui-grey-700/90 text-white rounded shadow;\n        }\n      }\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$style","_createTextVNode","_toDisplayString","_withDirectives","_mergeProps","_Fragment","_renderList","_createBlock","RuiFormTextDetail"],"mappings":"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"}
+{"version":3,"file":"RuiSlider.vue2.js","sources":["../../../../src/components/forms/slider/RuiSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  showThumbLabel?: boolean;\n  showTicks?: boolean;\n  hideTrack?: boolean;\n  tickSize?: number;\n  vertical?: boolean;\n  color?: ContextColorsType;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  sliderClass?: string;\n  tickClass?: string;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSlider',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ default: 0 });\n\nconst {\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  showThumbLabel = false,\n  showTicks = false,\n  hideTrack = false,\n  vertical = false,\n  tickSize = 2,\n  color = 'primary',\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  sliderClass = '',\n  tickClass = '',\n  required = false,\n} = defineProps<Props>();\n\nconst outer = useTemplateRef<HTMLDivElement>('outer');\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  toRef(() => errorMessages),\n  toRef(() => successMessages),\n);\nconst { width, height } = useElementBounding(outer);\n\nconst ticksData = computed<[number, number]>(() => {\n  const range = max - min;\n  const total = range / step;\n  const current = Math.round((get(modelValue) - min) / step);\n\n  return [current, total];\n});\n\nconst trackWidth = computed<string>(() => {\n  const [current, total] = get(ticksData);\n  const percentage = Math.min(100, Math.max(0, Math.round((current / total) * 100)));\n  return `${percentage}%`;\n});\n\nconst sliderWidth = computed<string>(() => `${get(width)}px`);\nconst sliderHeight = computed<string>(() => `${get(height)}px`);\nconst tickSizeInPx = computed<string>(() => `${tickSize}px`);\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"[\n        $style.wrapper,\n        {\n          [$style.disabled ?? '']: disabled,\n          [$style.vertical ?? '']: vertical,\n          [$style[color] ?? '']: color,\n          [$style['hide-track'] ?? '']: hideTrack,\n          [$style['big-tick'] ?? '']: tickSize > 4,\n          [$style['with-error'] ?? '']: hasError,\n          [$style['with-success'] ?? '']: hasSuccess && !hasError,\n        },\n      ]\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div\n        v-if=\"label\"\n        :class=\"$style.label\"\n        class=\"text-body-1\"\n      >\n        {{ label }}\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </div>\n      <div\n        ref=\"outer\"\n        :class=\"$style.outer\"\n      >\n        <div :class=\"$style.inner\">\n          <input\n            v-model=\"modelValue\"\n            :class=\"$style.input\"\n            type=\"range\"\n            :max=\"max\"\n            :min=\"min\"\n            :step=\"step\"\n            :disabled=\"disabled\"\n            :aria-invalid=\"hasError\"\n            :aria-label=\"label || undefined\"\n            :aria-valuetext=\"String(modelValue)\"\n            v-bind=\"getNonRootAttrs($attrs)\"\n          />\n          <div :class=\"$style.slider\">\n            <div :class=\"$style.slider__inner\">\n              <div :class=\"[$style.slider__container, sliderClass]\">\n                <div\n                  v-if=\"!hideTrack\"\n                  :class=\"$style.slider__container__track\"\n                />\n                <div\n                  v-if=\"showTicks && !disabled\"\n                  :class=\"$style.slider__ticks\"\n                >\n                  <span\n                    v-for=\"i in ticksData[1] + 1\"\n                    :key=\"i\"\n                    :class=\"\n                      hideTrack\n                        ? [tickClass]\n                        : {\n                          [$style.highlighted]: i - 1 <= ticksData[0],\n                          [tickClass]: i - 1 > ticksData[0],\n                        }\n                    \"\n                  />\n                </div>\n              </div>\n              <div :class=\"$style.slider__thumb\" />\n              <div\n                v-if=\"showThumbLabel && !disabled\"\n                :class=\"$style.slider__thumb_label\"\n              >\n                {{ modelValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n:global(.dark) {\n  .wrapper {\n    &.disabled {\n      .inner {\n        .slider {\n          &__container {\n            @apply bg-rui-grey-800 #{!important};\n\n            &__track {\n              @apply bg-rui-grey-700 #{!important};\n            }\n          }\n\n          &__thumb {\n            @apply bg-rui-grey-700 #{!important};\n          }\n        }\n      }\n    }\n\n    .inner {\n      .slider {\n        &__ticks {\n          span {\n            &.highlighted {\n              @apply bg-[#121212];\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n.wrapper {\n  @apply flex items-start gap-3;\n\n  &.disabled {\n    .label {\n      @apply text-rui-text-disabled;\n    }\n    .inner {\n      .slider {\n        &__container {\n          @apply bg-rui-grey-300 #{!important};\n\n          &__track {\n            @apply bg-rui-grey-400 #{!important};\n          }\n        }\n\n        &__thumb {\n          @apply bg-rui-grey-400 #{!important};\n        }\n      }\n    }\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color},\n    &.with-#{$color} {\n      .inner {\n        .slider {\n          &__container {\n            @apply bg-rui-#{$color} bg-opacity-40;\n\n            &__track {\n              @apply bg-rui-#{$color};\n            }\n          }\n\n          &__thumb {\n            @apply bg-rui-#{$color};\n\n            &:before {\n              @apply bg-rui-#{$color};\n            }\n          }\n\n          &__ticks {\n            span {\n              @apply bg-rui-#{$color};\n            }\n          }\n        }\n      }\n\n      &.big-tick {\n        .inner {\n          .slider {\n            &__ticks {\n              span {\n                @apply bg-rui-#{$color}-lighter;\n\n                &.highlighted {\n                  @apply bg-rui-#{$color};\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @each $color in ('error', 'success') {\n    &.with-#{$color} {\n      .label {\n        @apply text-rui-#{$color};\n      }\n    }\n  }\n\n  &.vertical {\n    @apply flex-col-reverse items-center h-full;\n\n    .label {\n      @apply mb-2 text-center;\n    }\n\n    .outer {\n      @apply min-w-0 min-h-[120px] w-8;\n    }\n\n    .inner {\n      width: v-bind(sliderHeight);\n      height: v-bind(sliderWidth);\n      @apply -rotate-90;\n      transform-origin: 0 0;\n      --tw-translate-y: v-bind(sliderHeight);\n\n      .slider {\n        &__thumb {\n          &_label {\n            @apply mt-6;\n            @apply rotate-90 translate-x-0;\n            transform-origin: 0 50%;\n          }\n        }\n      }\n    }\n  }\n\n  .label {\n    @apply mt-1 text-rui-text;\n  }\n\n  .outer {\n    @apply relative h-8 flex-1 min-w-[120px];\n  }\n\n  .inner {\n    width: v-bind(sliderWidth);\n    height: v-bind(sliderHeight);\n    @apply relative;\n\n    .input {\n      @apply h-full w-full opacity-0 cursor-pointer;\n\n      &:not(:disabled) {\n        &:hover {\n          ~ .slider {\n            .slider {\n              &__thumb {\n                &:before {\n                  @apply scale-100;\n                }\n              }\n            }\n          }\n        }\n\n        &:focus {\n          ~ .slider {\n            .slider {\n              &__thumb {\n                &:before {\n                  @apply scale-100 opacity-15;\n                }\n              }\n            }\n          }\n        }\n\n        &:active {\n          ~ .slider {\n            .slider {\n              &__thumb {\n                &:before {\n                  @apply scale-100 opacity-30;\n                }\n\n                &_label {\n                  @apply opacity-100 visible;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n\n    .slider {\n      @apply absolute h-full w-full top-0 px-2 pointer-events-none;\n\n      &__inner {\n        @apply relative h-full w-full cursor-pointer;\n      }\n\n      &__container {\n        @apply absolute top-1/2 transform -translate-y-1/2;\n        @apply w-full h-1 rounded-full;\n\n        &__track {\n          width: v-bind(trackWidth);\n          @apply transition-all ease-linear duration-75 delay-0;\n          @apply h-full rounded-full;\n        }\n      }\n\n      &__ticks {\n        @apply h-full absolute top-0;\n        @apply flex justify-between items-center;\n        margin: 0 calc(v-bind(tickSizeInPx) / -2);\n        width: calc(100% + v-bind(tickSizeInPx));\n\n        span {\n          @apply rounded-full;\n          width: calc(v-bind(tickSizeInPx));\n          height: calc(v-bind(tickSizeInPx));\n\n          &.highlighted {\n            @apply bg-rui-grey-100;\n          }\n        }\n      }\n\n      &__thumb {\n        @apply absolute top-1/2 transition-all ease-linear duration-75 delay-0 transform -translate-y-1/2 -translate-x-1/2;\n        @apply w-3 h-3 rounded-full shadow-2;\n        left: v-bind(trackWidth);\n\n        &:before {\n          @apply w-8 h-8 rounded-full absolute top-1/2 left-1/2;\n          @apply opacity-10;\n          @apply transition transform -translate-x-1/2 -translate-y-1/2 scale-0;\n          content: '';\n        }\n\n        &_label {\n          left: v-bind(trackWidth);\n          @apply invisible opacity-0;\n          @apply absolute -mt-7 transition-all ease-linear duration-75 delay-0 transform -translate-x-1/2;\n          @apply px-2 py-1 text-xs font-normal;\n          @apply bg-rui-grey-700/90 text-white rounded shadow;\n        }\n      }\n    }\n  }\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$style","_createTextVNode","_toDisplayString","_withDirectives","_mergeProps","_Fragment","_renderList","_createBlock","RuiFormTextDetail"],"mappings":"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"}

package/dist/components/forms/switch/RuiSwitch.vue.d.ts

@@ -1,6 +1,5 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
 export interface Props {
-    modelValue?: boolean;
     disabled?: boolean;
     color?: ContextColorsType;
     size?: 'sm';
@@ -11,26 +10,19 @@ export interface Props {
     hideDetails?: boolean;
     required?: boolean;
 }
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    default?: () => any;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:modelValue": (modelValue: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: ((modelValue: boolean) => any) | undefined;
-}>, {
-    size: "sm";
-    label: string;
-    color: ContextColorsType;
-    disabled: boolean;
-    modelValue: boolean;
-    errorMessages: string | string[];
-    successMessages: string | string[];
-    hint: string;
-    required: boolean;
-    hideDetails: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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/forms/switch/RuiSwitch.vue2.js

@@ -1,7 +1,8 @@
-import { defineComponent, toRefs, openBlock, createElementBlock, normalizeProps, guardReactiveProps, unref, createElementVNode, normalizeClass, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createBlock } from "vue";
+import { defineComponent, useModel, toRef, openBlock, createElementBlock, normalizeProps, guardReactiveProps, unref, createElementVNode, normalizeClass, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createBlock, mergeModels } from "vue";
 import _sfc_main$1 from "../../helpers/RuiFormTextDetail.vue.js";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
 import { getRootAttrs, getNonRootAttrs } from "../../../utils/helpers.js";
+import { set } from "@vueuse/shared";
 const _hoisted_1 = ["data-error"];
 const _hoisted_2 = ["checked", "disabled", "aria-invalid"];
 const _hoisted_3 = {
@@ -14,40 +15,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     inheritAttrs: false
   },
   __name: "RuiSwitch",
-  props: {
-    modelValue: { type: Boolean, default: false },
+  props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
-    color: { default: void 0 },
-    size: { default: void 0 },
+    color: { default: () => void 0 },
+    size: { default: () => void 0 },
     label: { default: "" },
     hint: { default: "" },
     errorMessages: { default: () => [] },
     successMessages: { default: () => [] },
     hideDetails: { type: Boolean, default: false },
     required: { type: Boolean, default: false }
-  },
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
   emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { size, modelValue, errorMessages, successMessages } = toRefs(props);
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
+    const { hasError, hasSuccess } = useFormTextDetail(
+      toRef(() => __props.errorMessages),
+      toRef(() => __props.successMessages)
+    );
     function input(event) {
       const checked = event.target.checked;
-      emit("update:modelValue", checked);
+      set(modelValue, checked);
     }
-    const { hasError, hasSuccess } = useFormTextDetail(
-      errorMessages,
-      successMessages
-    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [
         createElementVNode("label", {
           class: normalizeClass([
             _ctx.$style.wrapper,
-            _ctx.$style[unref(size) ?? ""],
+            _ctx.$style[__props.size ?? ""],
             _ctx.$style[__props.color ?? ""],
             {
-              [_ctx.$style.checked]: unref(modelValue),
+              [_ctx.$style.checked]: modelValue.value,
               [_ctx.$style.disabled]: __props.disabled,
               [_ctx.$style["with-error"]]: unref(hasError),
               [_ctx.$style["with-success"]]: unref(hasSuccess) && !unref(hasError)
@@ -59,7 +60,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: normalizeClass(_ctx.$style.inner)
           }, [
             createElementVNode("input", mergeProps({
-              checked: unref(modelValue),
+              checked: modelValue.value,
               type: "checkbox",
               class: _ctx.$style.input,
               disabled: __props.disabled,
@@ -84,8 +85,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         !__props.hideDetails ? (openBlock(), createBlock(_sfc_main$1, {
           key: 0,
           class: "pt-1",
-          "error-messages": unref(errorMessages),
-          "success-messages": unref(successMessages),
+          "error-messages": __props.errorMessages,
+          "success-messages": __props.successMessages,
           hint: __props.hint
         }, null, 8, ["error-messages", "success-messages", "hint"])) : createCommentVNode("", true)
       ], 16);

package/dist/components/forms/switch/RuiSwitch.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSwitch.vue2.js","sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props {\n  modelValue?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSwitch',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: false,\n  disabled: false,\n  color: undefined,\n  size: undefined,\n  label: '',\n  hint: '',\n  errorMessages: () => [],\n  successMessages: () => [],\n  hideDetails: false,\n  required: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', modelValue: boolean): void;\n}>();\n\nconst { size, modelValue, errorMessages, successMessages } = toRefs(props);\n\nfunction input(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n  emit('update:modelValue', checked);\n}\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  errorMessages,\n  successMessages,\n);\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"[\n        $style.wrapper,\n        $style[size ?? ''],\n        $style[color ?? ''],\n        {\n          [$style.checked]: modelValue,\n          [$style.disabled]: disabled,\n          [$style['with-error']]: hasError,\n          [$style['with-success']]: hasSuccess && !hasError,\n        },\n      ]\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div :class=\"$style.inner\">\n        <input\n          :checked=\"modelValue\"\n          type=\"checkbox\"\n          :class=\"$style.input\"\n          :disabled=\"disabled\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n        />\n        <div\n          :class=\"$style.toggle\"\n        />\n      </div>\n      <span\n        v-if=\"label || $slots.default\"\n        :class=\"$style.label\"\n        class=\"text-body-1\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </span>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n.wrapper {\n  @apply relative flex gap-2 items-start cursor-pointer;\n\n  &.disabled {\n    @apply cursor-not-allowed;\n\n    .input {\n      @apply bg-rui-grey-300 cursor-not-allowed;\n    }\n\n    .label {\n      @apply text-rui-text-disabled;\n    }\n\n    .toggle {\n      @apply bg-rui-grey-500;\n    }\n  }\n\n  &:hover {\n    &:not(.disabled) {\n      .toggle {\n        @apply shadow-1;\n      }\n    }\n  }\n\n  &.checked {\n    &:not(.disabled) {\n      .input {\n        @apply bg-black;\n      }\n    }\n\n    .toggle {\n      @apply left-[21px];\n    }\n  }\n\n  &.sm {\n    .inner {\n      @apply w-10 h-5 mt-0.5;\n    }\n    .toggle {\n      @apply w-4 h-4;\n\n      &:before {\n        @apply w-6 h-6;\n      }\n    }\n\n    &.checked {\n      .toggle {\n        @apply left-[22px];\n      }\n    }\n  }\n\n  &.checked {\n    &:not(.disabled) {\n      @each $color in c.$context-colors {\n        &.#{$color} {\n          .input {\n            @apply bg-rui-#{$color};\n          }\n        }\n      }\n    }\n  }\n\n  &.with-error {\n    .input {\n      @apply bg-rui-error #{!important};\n    }\n\n    .label {\n      @apply text-rui-error;\n    }\n  }\n\n  &.with-success {\n    .input {\n      @apply bg-rui-success #{!important};\n    }\n\n    .label {\n      @apply text-rui-success;\n    }\n  }\n\n  .inner {\n    @apply relative w-[43px] h-[24px] shrink-0;\n  }\n\n  .input {\n    @apply appearance-none relative w-full h-full rounded-full bg-rui-grey-400 transition-all duration-75 ease-in-out cursor-pointer;\n\n    &:active:not(:disabled) {\n      + .toggle {\n        &:before {\n          @apply opacity-20;\n        }\n      }\n    }\n  }\n\n  .toggle {\n    @apply absolute w-5 h-5 transition-all duration-75 ease-in-out transform -translate-y-1/2 top-1/2 rounded-full pointer-events-none;\n    @apply bg-white left-[2px];\n\n    &:before {\n      content: '';\n      @apply absolute w-10 h-10 bg-black rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition-all ease-in-out opacity-0;\n    }\n  }\n}\n\n:global(.dark) {\n  .wrapper {\n    &.disabled {\n      .input {\n        @apply bg-rui-grey-800;\n      }\n\n      .toggle {\n        @apply bg-rui-grey-600;\n      }\n    }\n\n    &.checked {\n      &:not(.disabled) {\n        .input {\n          @apply bg-white;\n        }\n        .toggle {\n          @apply bg-black;\n        }\n      }\n    }\n\n    &.checked {\n      &:not(.disabled) {\n        @each $color in c.$context-colors {\n          &.#{$color} {\n            .input {\n              @apply bg-rui-#{$color}/[0.5];\n            }\n            .toggle {\n              @apply bg-rui-#{$color};\n            }\n          }\n        }\n      }\n    }\n\n    &.with-error {\n      .input {\n        @apply bg-rui-error/[0.5] #{!important};\n      }\n      .toggle {\n        @apply bg-rui-error #{!important};\n      }\n    }\n\n    &.with-success {\n      .input {\n        @apply bg-rui-success/[0.5] #{!important};\n      }\n      .toggle {\n        @apply bg-rui-success #{!important};\n      }\n    }\n  }\n\n  .input {\n    @apply bg-rui-grey-700;\n  }\n\n  .toggle {\n    &:before {\n      @apply bg-white;\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$style","_mergeProps","$slots","_renderSlot","_createBlock","RuiFormTextDetail"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,UAAM,QAAQ;AAad,UAAM,OAAO;AAIb,UAAM,EAAE,MAAM,YAAY,eAAe,gBAAA,IAAoB,OAAO,KAAK;AAEzE,aAAS,MAAM,OAAc;AAC3B,YAAM,UAAW,MAAM,OAA4B;AACnD,WAAK,qBAAqB,OAAO;AAAA,IACnC;AAEA,UAAM,EAAE,UAAU,WAAA,IAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IAAA;;0BAKAA,mBAkDM,OAAAC,eAAAC,mBAlDOC,MAAA,YAAA,EAAaC,KAAAA,MAAM,CAAA,CAAA,GAAA;AAAA,QAC9BC,mBAyCQ,SAAA;AAAA,UAxCL,OAAKC,eAAA;AAAA,YAAYC,KAAAA,OAAO;AAAA,YAAiBA,KAAAA,OAAOJ,MAAA,IAAA,KAAI,EAAA;AAAA,YAAiBI,KAAAA,OAAO,QAAA,SAAK,EAAA;AAAA;eAA8BA,KAAAA,OAAO,OAAO,GAAGJ,MAAA,UAAA;AAAA,eAAuBI,KAAAA,OAAO,QAAQ,GAAG,QAAA;AAAA,cAAqBA,CAAAA,KAAAA,uBAAuBJ,MAAA,QAAA;AAAA,eAAqBI,KAAAA,OAAM,cAAA,CAAA,GAAmBJ,MAAA,UAAA,KAAU,CAAKA,MAAA,QAAA;AAAA,YAAA;AAAA;UAWlR,cAAYA,MAAA,QAAA,IAAQ,KAAQ;AAAA,QAAA;UAE7BE,mBAaM,OAAA;AAAA,YAbA,OAAKC,eAAEC,KAAAA,OAAO,KAAK;AAAA,UAAA;YACvBF,mBAQE,SARFG,WAQE;AAAA,cAPC,SAASL,MAAA,UAAA;AAAA,cACV,MAAK;AAAA,cACJ,OAAOI,KAAAA,OAAO;AAAA,cACd,UAAU,QAAA;AAAA,cACV,gBAAcJ,MAAA,QAAA;AAAA,YAAA,GACPA,MAAA,eAAA,EAAgBC,KAAAA,MAAM,GAAA;AAAA,cAC7B,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,MAAM,MAAM;AAAA,YAAA;YAEtBC,mBAEE,OAAA;AAAA,cADC,OAAKC,eAAEC,KAAAA,OAAO,MAAM;AAAA,YAAA;;UAIjB,QAAA,SAASE,KAAAA,OAAO,wBADxBT,mBAYO,QAAA;AAAA;YAVJ,OAAKM,eAAA,CAAEC,KAAAA,OAAO,OACT,aAAa,CAAA;AAAA,UAAA;YAEnBG,WAAwB,4BAAxB,MAAwB;AAAA,8CAAf,QAAA,KAAK,GAAA,CAAA;AAAA,YAAA;YAEN,QAAA,yBADRV,mBAKO,QALP,YAGC,KAED;;;SAIK,QAAA,4BADTW,YAMEC,aAAA;AAAA;UAJA,OAAM;AAAA,UACL,kBAAgBT,MAAA,aAAA;AAAA,UAChB,oBAAkBA,MAAA,eAAA;AAAA,UAClB,MAAM,QAAA;AAAA,QAAA;;;;;"}
+{"version":3,"file":"RuiSwitch.vue2.js","sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props {\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSwitch',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  disabled = false,\n  color = undefined,\n  size = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  toRef(() => errorMessages),\n  toRef(() => successMessages),\n);\n\nfunction input(event: Event): void {\n  const checked = (event.target as HTMLInputElement).checked;\n  set(modelValue, checked);\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"[\n        $style.wrapper,\n        $style[size ?? ''],\n        $style[color ?? ''],\n        {\n          [$style.checked]: modelValue,\n          [$style.disabled]: disabled,\n          [$style['with-error']]: hasError,\n          [$style['with-success']]: hasSuccess && !hasError,\n        },\n      ]\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div :class=\"$style.inner\">\n        <input\n          :checked=\"modelValue\"\n          type=\"checkbox\"\n          :class=\"$style.input\"\n          :disabled=\"disabled\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n        />\n        <div :class=\"$style.toggle\" />\n      </div>\n      <span\n        v-if=\"label || $slots.default\"\n        :class=\"$style.label\"\n        class=\"text-body-1\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </span>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n.wrapper {\n  @apply relative flex gap-2 items-start cursor-pointer;\n\n  &.disabled {\n    @apply cursor-not-allowed;\n\n    .input {\n      @apply bg-rui-grey-300 cursor-not-allowed;\n    }\n\n    .label {\n      @apply text-rui-text-disabled;\n    }\n\n    .toggle {\n      @apply bg-rui-grey-500;\n    }\n  }\n\n  &:hover {\n    &:not(.disabled) {\n      .toggle {\n        @apply shadow-1;\n      }\n    }\n  }\n\n  &.checked {\n    &:not(.disabled) {\n      .input {\n        @apply bg-black;\n      }\n    }\n\n    .toggle {\n      @apply left-[21px];\n    }\n  }\n\n  &.sm {\n    .inner {\n      @apply w-10 h-5 mt-0.5;\n    }\n    .toggle {\n      @apply w-4 h-4;\n\n      &:before {\n        @apply w-6 h-6;\n      }\n    }\n\n    &.checked {\n      .toggle {\n        @apply left-[22px];\n      }\n    }\n  }\n\n  &.checked {\n    &:not(.disabled) {\n      @each $color in c.$context-colors {\n        &.#{$color} {\n          .input {\n            @apply bg-rui-#{$color};\n          }\n        }\n      }\n    }\n  }\n\n  &.with-error {\n    .input {\n      @apply bg-rui-error #{!important};\n    }\n\n    .label {\n      @apply text-rui-error;\n    }\n  }\n\n  &.with-success {\n    .input {\n      @apply bg-rui-success #{!important};\n    }\n\n    .label {\n      @apply text-rui-success;\n    }\n  }\n\n  .inner {\n    @apply relative w-[43px] h-[24px] shrink-0;\n  }\n\n  .input {\n    @apply appearance-none relative w-full h-full rounded-full bg-rui-grey-400 transition-all duration-75 ease-in-out cursor-pointer;\n\n    &:active:not(:disabled) {\n      + .toggle {\n        &:before {\n          @apply opacity-20;\n        }\n      }\n    }\n  }\n\n  .toggle {\n    @apply absolute w-5 h-5 transition-all duration-75 ease-in-out transform -translate-y-1/2 top-1/2 rounded-full pointer-events-none;\n    @apply bg-white left-[2px];\n\n    &:before {\n      content: '';\n      @apply absolute w-10 h-10 bg-black rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition-all ease-in-out opacity-0;\n    }\n  }\n}\n\n:global(.dark) {\n  .wrapper {\n    &.disabled {\n      .input {\n        @apply bg-rui-grey-800;\n      }\n\n      .toggle {\n        @apply bg-rui-grey-600;\n      }\n    }\n\n    &.checked {\n      &:not(.disabled) {\n        .input {\n          @apply bg-white;\n        }\n        .toggle {\n          @apply bg-black;\n        }\n      }\n    }\n\n    &.checked {\n      &:not(.disabled) {\n        @each $color in c.$context-colors {\n          &.#{$color} {\n            .input {\n              @apply bg-rui-#{$color}/[0.5];\n            }\n            .toggle {\n              @apply bg-rui-#{$color};\n            }\n          }\n        }\n      }\n    }\n\n    &.with-error {\n      .input {\n        @apply bg-rui-error/[0.5] #{!important};\n      }\n      .toggle {\n        @apply bg-rui-error #{!important};\n      }\n    }\n\n    &.with-success {\n      .input {\n        @apply bg-rui-success/[0.5] #{!important};\n      }\n      .toggle {\n        @apply bg-rui-success #{!important};\n      }\n    }\n  }\n\n  .input {\n    @apply bg-rui-grey-700;\n  }\n\n  .toggle {\n    &:before {\n      @apply bg-white;\n    }\n  }\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$style","_mergeProps","$slots","_renderSlot","_createBlock","RuiFormTextDetail"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,UAAM,aAAaA,8BAAuC;AAkB1D,UAAM,EAAE,UAAU,WAAA,IAAe;AAAA,MAC/B,MAAM,MAAM,qBAAa;AAAA,MACzB,MAAM,MAAM,uBAAe;AAAA,IAAA;AAG7B,aAAS,MAAM,OAAoB;AACjC,YAAM,UAAW,MAAM,OAA4B;AACnD,UAAI,YAAY,OAAO;AAAA,IACzB;;0BAIEC,mBAgDM,OAAAC,eAAAC,mBAhDOC,MAAA,YAAA,EAAaC,KAAAA,MAAM,CAAA,CAAA,GAAA;AAAA,QAC9BC,mBAuCQ,SAAA;AAAA,UAtCL,OAAKC,eAAA;AAAA,YAAYC,KAAAA,OAAO;AAAA,YAAiBA,KAAAA,OAAO,QAAA,QAAI,EAAA;AAAA,YAAiBA,KAAAA,OAAO,QAAA,SAAK,EAAA;AAAA;eAA8BA,KAAAA,OAAO,OAAO,GAAG,WAAA;AAAA,eAAuBA,KAAAA,OAAO,QAAQ,GAAG,QAAA;AAAA,cAAqBA,CAAAA,KAAAA,uBAAuBJ,MAAA,QAAA;AAAA,eAAqBI,KAAAA,OAAM,cAAA,CAAA,GAAmBJ,MAAA,UAAA,KAAU,CAAKA,MAAA,QAAA;AAAA,YAAA;AAAA;UAWlR,cAAYA,MAAA,QAAA,IAAQ,KAAQ;AAAA,QAAA;UAE7BE,mBAWM,OAAA;AAAA,YAXA,OAAKC,eAAEC,KAAAA,OAAO,KAAK;AAAA,UAAA;YACvBF,mBAQE,SARFG,WAQE;AAAA,cAPC,SAAS,WAAA;AAAA,cACV,MAAK;AAAA,cACJ,OAAOD,KAAAA,OAAO;AAAA,cACd,UAAU,QAAA;AAAA,cACV,gBAAcJ,MAAA,QAAA;AAAA,YAAA,GACPA,MAAA,eAAA,EAAgBC,KAAAA,MAAM,GAAA;AAAA,cAC7B,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,MAAM,MAAM;AAAA,YAAA;YAEtBC,mBAA8B,OAAA;AAAA,cAAxB,OAAKC,eAAEC,KAAAA,OAAO,MAAM;AAAA,YAAA;;UAGpB,QAAA,SAASE,KAAAA,OAAO,wBADxBT,mBAYO,QAAA;AAAA;YAVJ,OAAKM,eAAA,CAAEC,KAAAA,OAAO,OACT,aAAa,CAAA;AAAA,UAAA;YAEnBG,WAAwB,4BAAxB,MAAwB;AAAA,8CAAf,QAAA,KAAK,GAAA,CAAA;AAAA,YAAA;YAEN,QAAA,yBADRV,mBAKO,QALP,YAGC,KAED;;;SAIK,QAAA,4BADTW,YAMEC,aAAA;AAAA;UAJA,OAAM;AAAA,UACL,kBAAgB,QAAA;AAAA,UAChB,oBAAkB,QAAA;AAAA,UAClB,MAAM,QAAA;AAAA,QAAA;;;;;"}

package/dist/components/forms/text-area/RuiTextArea.vue.d.ts

@@ -24,46 +24,21 @@ export interface Props {
     required?: boolean;
 }
 type __VLS_Props = Props;
+type __VLS_Slots = {
+    prepend?: () => any;
+    append?: () => any;
+};
 type __VLS_ModelProps = {
     modelValue: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_1: {}, __VLS_21: {};
-type __VLS_Slots = {} & {
-    prepend?: (props: typeof __VLS_1) => any;
-} & {
-    append?: (props: typeof __VLS_21) => any;
-};
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
-} & {
     "click:clear": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     "onClick:clear"?: (() => any) | undefined;
-}>, {
-    label: string;
-    readonly: boolean;
-    variant: "default" | "filled" | "outlined";
-    color: ContextColorsType;
-    disabled: boolean;
-    errorMessages: string | string[];
-    successMessages: string | string[];
-    hint: string;
-    required: boolean;
-    hideDetails: boolean;
-    placeholder: string;
-    dense: boolean;
-    textColor: ContextColorsType;
-    prependIcon: RuiIcons;
-    appendIcon: RuiIcons;
-    clearable: boolean;
-    noResize: boolean;
-    minRows: number | string;
-    maxRows: number | string;
-    rowHeight: number | string;
-    autoGrow: boolean;
-}, {}, {}, {}, 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;