@bitrix24/b24ui-nuxt 0.5.10 → 0.5.11

package/dist/runtime/components/Progress.vue

@@ -1,151 +1,178 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/progress";
-import { tv } from "../utils/tv";
-const appConfigProgress = _appConfig;
-const progress = tv({ extend: tv(theme), ...appConfigProgress.b24ui?.progress || {} });
+<!-- eslint-disable vue/block-tag-newline -->
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { ProgressRootProps, ProgressRootEmits } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/progress'
+import { tv } from '../utils/tv'
+
+const appConfigProgress = _appConfig as AppConfig & { b24ui: { progress: Partial<typeof theme> } }
+
+const progress = tv({ extend: tv(theme), ...(appConfigProgress.b24ui?.progress || {}) })
+
+type ProgressVariants = VariantProps<typeof progress>
+
+export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' | 'modelValue'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * The maximum progress value
+   */
+  max?: number | Array<any>
+  /**
+   * Display the current progress value
+   */
+  status?: boolean
+  /**
+   * Whether the progress is visually inverted
+   * @defaultValue false
+   */
+  inverted?: boolean
+  /**
+   * @defaultValue 'md'
+   */
+  size?: ProgressVariants['size']
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: ProgressVariants['color']
+  /**
+   * The orientation of the progress bar.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: ProgressVariants['orientation']
+  /**
+   * @defaultValue 'loading'
+   */
+  animation?: ProgressVariants['animation']
+  class?: any
+  b24ui?: Partial<typeof progress.slots>
+}
+
+export interface ProgressEmits extends ProgressRootEmits {}
+
+export type ProgressSlots = {
+  status(props: { percent?: number }): any
+} & {
+  [key: string]: (props: { step: number }) => any
+}
+
 </script>
 
-<script setup>
-import { computed } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
-import { useLocale } from "../composables/useLocale";
-const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  max: {
-    type: [Number, Array],
-    required: false
-  },
-  status: {
-    type: Boolean,
-    required: false
-  },
-  inverted: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  orientation: {
-    type: null,
-    required: false,
-    default: "horizontal"
-  },
-  animation: {
-    type: null,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  getValueLabel: {
-    type: Function,
-    required: false
-  },
-  modelValue: {
-    type: [Number, null],
-    required: false,
-    default: null
-  }
-});
-const emits = defineEmits(["update:modelValue", "update:max"]);
-const slots = defineSlots();
-const { dir } = useLocale();
-const rootProps = useForwardPropsEmits(reactivePick(props, "getValueLabel", "modelValue"), emits);
-const isIndeterminate = computed(() => rootProps.value.modelValue === null);
-const hasSteps = computed(() => Array.isArray(props.max));
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive, ProgressRoot, ProgressIndicator, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useLocale } from '../composables/useLocale'
+
+const props = withDefaults(defineProps<ProgressProps>(), {
+  inverted: false,
+  modelValue: null,
+  orientation: 'horizontal'
+})
+const emits = defineEmits<ProgressEmits>()
+const slots = defineSlots<ProgressSlots>()
+
+const { dir } = useLocale()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'getValueLabel', 'modelValue'), emits)
+
+const isIndeterminate = computed(() => rootProps.value.modelValue === null)
+const hasSteps = computed(() => Array.isArray(props.max))
+
 const realMax = computed(() => {
   if (isIndeterminate.value || !props.max) {
-    return void 0;
+    return undefined
   }
+
   if (Array.isArray(props.max)) {
-    return props.max.length - 1;
+    return props.max.length - 1
   }
-  return Number(props.max);
-});
+
+  return Number(props.max)
+})
+
 const percent = computed(() => {
   if (isIndeterminate.value) {
-    return void 0;
+    return undefined
   }
+
   switch (true) {
-    case rootProps.value.modelValue < 0:
-      return 0;
-    case rootProps.value.modelValue > (realMax.value ?? 100):
-      return 100;
-    default:
-      return Math.round(rootProps.value.modelValue / (realMax.value ?? 100) * 100);
+    case rootProps.value.modelValue! < 0: return 0
+    case rootProps.value.modelValue! > (realMax.value ?? 100): return 100
+    default: return Math.round((rootProps.value.modelValue! / (realMax.value ?? 100)) * 100)
   }
-});
+})
+
 const indicatorStyle = computed(() => {
-  if (percent.value === void 0) {
-    return;
+  if (percent.value === undefined) {
+    return
   }
-  if (props.orientation === "vertical") {
+
+  if (props.orientation === 'vertical') {
     return {
-      transform: `translateY(${props.inverted ? "" : "-"}${100 - percent.value}%)`
-    };
+      transform: `translateY(${props.inverted ? '' : '-'}${100 - percent.value}%)`
+    }
   } else {
-    if (dir.value === "rtl") {
+    if (dir.value === 'rtl') {
       return {
-        transform: `translateX(${props.inverted ? "-" : ""}${100 - percent.value}%)`
-      };
+        transform: `translateX(${props.inverted ? '-' : ''}${100 - percent.value}%)`
+      }
     } else {
       return {
-        transform: `translateX(${props.inverted ? "" : "-"}${100 - percent.value}%)`
-      };
+        transform: `translateX(${props.inverted ? '' : '-'}${100 - percent.value}%)`
+      }
     }
   }
-});
+})
+
 const statusStyle = computed(() => {
   return {
-    [props.orientation === "vertical" ? "height" : "width"]: percent.value ? `${percent.value}%` : "fit-content"
-  };
-});
-function isActive(index) {
-  return index === Number(props.modelValue);
+    [props.orientation === 'vertical' ? 'height' : 'width']: percent.value ? `${percent.value}%` : 'fit-content'
+  }
+})
+
+function isActive(index: number) {
+  return index === Number(props.modelValue)
 }
-function isFirst(index) {
-  return index === 0;
+
+function isFirst(index: number) {
+  return index === 0
 }
-function isLast(index) {
-  return index === realMax.value;
+
+function isLast(index: number) {
+  return index === realMax.value
 }
-function stepVariant(index) {
-  index = Number(index);
+
+function stepVariant(index: number | string) {
+  index = Number(index)
+
   if (isActive(index) && !isFirst(index)) {
-    return "active";
+    return 'active'
   }
+
   if (isFirst(index) && isActive(index)) {
-    return "first";
+    return 'first'
   }
+
   if (isLast(index) && isActive(index)) {
-    return "last";
+    return 'last'
   }
-  return "other";
+
+  return 'other'
 }
+
 const b24ui = computed(() => progress({
   animation: props.animation,
   size: props.size,
   color: props.color,
   orientation: props.orientation,
   inverted: props.inverted
-}));
+}))
 </script>
 
 <template>

package/dist/runtime/components/RadioGroup.vue

@@ -1,104 +1,110 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/radio-group";
-import { tv } from "../utils/tv";
-const appConfigRadioGroup = _appConfig;
-const radioGroup = tv({ extend: tv(theme), ...appConfigRadioGroup.b24ui?.radioGroup || {} });
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { RadioGroupRootProps, RadioGroupRootEmits } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/radio-group'
+import { tv } from '../utils/tv'
+import type { AcceptableValue } from '../types/utils'
+
+const appConfigRadioGroup = _appConfig as AppConfig & { b24ui: { radioGroup: Partial<typeof theme> } }
+
+const radioGroup = tv({ extend: tv(theme), ...(appConfigRadioGroup.b24ui?.radioGroup || {}) })
+
+type RadioGroupVariants = VariantProps<typeof radioGroup>
+
+export type RadioGroupValue = AcceptableValue
+export type RadioGroupItem = {
+  label?: string
+  description?: string
+  disabled?: boolean
+  value?: string
+  [key: string]: any
+} | RadioGroupValue
+
+export interface RadioGroupProps<T extends RadioGroupItem = RadioGroupItem> extends Pick<RadioGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  legend?: string
+  /**
+   * When `items` is an array of objects, select the field to use as the value.
+   * @defaultValue 'value'
+   */
+  valueKey?: string
+  /**
+   * When `items` is an array of objects, select the field to use as the label.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
+  /**
+   * When `items` is an array of objects, select the field to use as the description.
+   * @defaultValue 'description'
+   */
+  descriptionKey?: string
+  items?: T[]
+  /**
+   * @defaultValue 'md'
+   */
+  size?: RadioGroupVariants['size']
+  /**
+   * @defaultValue 'list'
+   */
+  variant?: RadioGroupVariants['variant']
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: RadioGroupVariants['color']
+  /**
+   * The orientation the radio buttons are laid out.
+   * @defaultValue 'vertical'
+   */
+  orientation?: RadioGroupRootProps['orientation']
+  /**
+   * Position of the indicator.
+   * @defaultValue 'start'
+   */
+  indicator?: RadioGroupVariants['indicator']
+  class?: any
+  b24ui?: Partial<typeof radioGroup.slots>
+}
+
+export type RadioGroupEmits = RadioGroupRootEmits & {
+  change: [payload: Event]
+}
+
+type SlotProps<T extends RadioGroupItem> = (props: { item: T & { id: string }, modelValue?: RadioGroupValue }) => any
+
+export interface RadioGroupSlots<T extends RadioGroupItem = RadioGroupItem> {
+  legend(props?: {}): any
+  label: SlotProps<T>
+  description: SlotProps<T>
+}
 </script>
 
-<script setup>
-import { computed, useId } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
-import { useFormField } from "../composables/useFormField";
-import { get } from "../utils";
-const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  legend: {
-    type: String,
-    required: false
-  },
-  valueKey: {
-    type: String,
-    required: false,
-    default: "value"
-  },
-  labelKey: {
-    type: String,
-    required: false,
-    default: "label"
-  },
-  descriptionKey: {
-    type: String,
-    required: false,
-    default: "description"
-  },
-  items: {
-    type: Array,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  variant: {
-    type: null,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  orientation: {
-    type: null,
-    required: false,
-    default: "vertical"
-  },
-  indicator: {
-    type: null,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  defaultValue: {
-    type: [String, Number, Object, null],
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  loop: {
-    type: Boolean,
-    required: false
-  },
-  modelValue: {
-    type: [String, Number, Object, null],
-    required: false
-  },
-  name: {
-    type: String,
-    required: false
-  },
-  required: {
-    type: Boolean,
-    required: false
-  }
-});
-const emits = defineEmits(["update:modelValue", "change"]);
-const slots = defineSlots();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "loop", "required"), emits);
-const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField(props, { bind: false });
-const id = _id.value ?? useId();
+<script setup lang="ts" generic="T extends RadioGroupItem">
+import { computed, useId } from 'vue'
+import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '../composables/useFormField'
+import { get } from '../utils'
+
+const props = withDefaults(defineProps<RadioGroupProps<T>>(), {
+  valueKey: 'value',
+  labelKey: 'label',
+  descriptionKey: 'description',
+  orientation: 'vertical'
+})
+const emits = defineEmits<RadioGroupEmits>()
+const slots = defineSlots<RadioGroupSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
+
+const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField<RadioGroupProps<T>>(props, { bind: false })
+const id = _id.value ?? useId()
+
 const b24ui = computed(() => radioGroup({
   size: size.value,
   color: color.value,
@@ -107,44 +113,52 @@ const b24ui = computed(() => radioGroup({
   orientation: props.orientation,
   variant: props.variant,
   indicator: props.indicator
-}));
-function normalizeItem(item) {
+}))
+
+function normalizeItem(item: any) {
   if (item === null) {
     return {
       id: `${id}:null`,
-      value: void 0,
-      label: void 0
-    };
+      value: undefined,
+      label: undefined
+    }
   }
-  if (typeof item === "string" || typeof item === "number") {
+
+  if (typeof item === 'string' || typeof item === 'number') {
     return {
       id: `${id}:${item}`,
       value: String(item),
       label: String(item)
-    };
+    }
   }
-  const value = get(item, props.valueKey);
-  const label = get(item, props.labelKey);
-  const description = get(item, props.descriptionKey);
+
+  const value = get(item, props.valueKey as string)
+  const label = get(item, props.labelKey as string)
+  const description = get(item, props.descriptionKey as string)
+
   return {
     ...item,
     value,
     label,
     description,
     id: `${id}:${value}`
-  };
+  }
 }
+
 const normalizedItems = computed(() => {
   if (!props.items) {
-    return [];
+    return []
   }
-  return props.items.map(normalizeItem);
-});
-function onUpdate(value) {
-  const event = new Event("change", { target: { value } });
-  emits("change", event);
-  emitFormChange();
-  emitFormInput();
+
+  return props.items.map(normalizeItem)
+})
+
+function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
 }
 </script>
 
@@ -178,12 +192,12 @@ function onUpdate(value) {
 
         <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
           <component :is="variant === 'list' ? Label : 'p'" :class="b24ui.label({ class: props.b24ui?.label })" :for="item.id">
-            <slot name="label" :item="item" :model-value="modelValue">
+            <slot name="label" :item="item" :model-value="(modelValue as RadioGroupValue)">
               {{ item.label }}
             </slot>
           </component>
           <p v-if="item.description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
-            <slot name="description" :item="item" :model-value="modelValue">
+            <slot name="description" :item="item" :model-value="(modelValue as RadioGroupValue)">
               {{ item.description }}
             </slot>
           </p>