@bitrix24/b24ui-nuxt 0.5.10 → 0.5.11

package/dist/runtime/components/Range.vue

@@ -1,112 +1,103 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/range";
-import { tv } from "../utils/tv";
-const appConfigRange = _appConfig;
-const range = tv({ extend: tv(theme), ...appConfigRange.b24ui?.range || {} });
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { SliderRootProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/range'
+import { tv } from '../utils/tv'
+
+const appConfigRange = _appConfig as AppConfig & { b24ui: { range: Partial<typeof theme> } }
+
+const range = tv({ extend: tv(theme), ...(appConfigRange.b24ui?.range || {}) })
+
+type RangeVariants = VariantProps<typeof range>
+
+export interface RangeProps extends Pick<SliderRootProps, 'name' | 'disabled' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * @defaultValue 'md'
+   */
+  size?: RangeVariants['size']
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: RangeVariants['color']
+  /**
+   * The orientation of the Range.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: SliderRootProps['orientation']
+  /**
+   * The value of the Range when initially rendered. Use when you do not need to control the state of the Range
+   */
+  defaultValue?: number | number[]
+  class?: any
+  b24ui?: Partial<typeof range.slots>
+}
+
+export interface RangeEmits {
+  (e: 'update:modelValue', payload: number | number[]): void
+  (e: 'change', payload: Event): void
+}
 </script>
 
-<script setup>
-import { computed } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
-import { useFormField } from "../composables/useFormField";
-const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  orientation: {
-    type: null,
-    required: false,
-    default: "horizontal"
-  },
-  defaultValue: {
-    type: [Number, Array],
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  name: {
-    type: String,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  inverted: {
-    type: Boolean,
-    required: false
-  },
-  min: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  max: {
-    type: Number,
-    required: false,
-    default: 100
-  },
-  step: {
-    type: Number,
-    required: false,
-    default: 1
-  },
-  minStepsBetweenThumbs: {
-    type: Number,
-    required: false
-  }
-});
-const emits = defineEmits(["update:modelValue", "change"]);
-const modelValue = defineModel({
-  "type": [Number, Array]
-});
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "orientation", "min", "max", "step", "minStepsBetweenThumbs", "inverted"), emits);
-const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '../composables/useFormField'
+
+const props = withDefaults(defineProps<RangeProps>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  orientation: 'horizontal'
+})
+const emits = defineEmits<RangeEmits>()
+
+const modelValue = defineModel<number | number[]>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emits)
+
+const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<RangeProps>(props)
+
 const defaultRangeValue = computed(() => {
-  if (typeof props.defaultValue === "number") {
-    return [props.defaultValue];
+  if (typeof props.defaultValue === 'number') {
+    return [props.defaultValue]
   }
-  return props.defaultValue;
-});
+  return props.defaultValue
+})
+
 const rangeValue = computed({
   get() {
-    if (typeof modelValue.value === "number") {
-      return [modelValue.value];
+    if (typeof modelValue.value === 'number') {
+      return [modelValue.value]
     }
-    return modelValue.value ?? defaultRangeValue.value;
+    return modelValue.value ?? defaultRangeValue.value
   },
   set(value) {
-    modelValue.value = value?.length !== 1 ? value : value[0];
+    modelValue.value = value?.length !== 1 ? value : value[0]
   }
-});
-const thumbsCount = computed(() => rangeValue.value?.length ?? 1);
+})
+
+const thumbsCount = computed(() => rangeValue.value?.length ?? 1)
+
 const b24ui = computed(() => range({
   disabled: disabled.value,
   size: size.value,
   color: color.value,
   orientation: props.orientation
-}));
-function onChange(value) {
-  const event = new Event("change", { target: { value } });
-  emits("change", event);
-  emitFormChange();
+}))
+
+function onChange(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
 }
 </script>