@bitrix24/b24ui-nuxt 0.5.10 → 0.5.11

package/dist/runtime/components/InputNumber.vue

@@ -1,165 +1,153 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/input-number";
-import { tv } from "../utils/tv";
-const appConfigInputNumber = _appConfig;
-const inputNumber = tv({ extend: tv(theme), ...appConfigInputNumber.b24ui?.inputNumber || {} });
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { NumberFieldRootProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/input-number'
+import { tv } from '../utils/tv'
+import type { ButtonProps, IconComponent } from '../types'
+import type { PartialString } from '../types/utils'
+
+const appConfigInputNumber = _appConfig as AppConfig & { b24ui: { inputNumber: Partial<typeof theme> } }
+
+const inputNumber = tv({ extend: tv(theme), ...(appConfigInputNumber.b24ui?.inputNumber || {}) })
+
+type InputNumberVariants = VariantProps<typeof inputNumber>
+
+export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'stepSnapping' | 'step' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * The placeholder text when the input is empty
+   */
+  placeholder?: string
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: InputNumberVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
+  size?: InputNumberVariants['size']
+  /**
+   * Removes padding from input
+   * @defaultValue false
+   */
+  noPadding?: boolean
+  /**
+   * Removes all borders (rings)
+   * @defaultValue false
+   */
+  noBorder?: boolean
+  /**
+   * Removes all borders (rings) except the bottom one
+   * @defaultValue false
+   */
+  underline?: boolean
+  /**
+   * Rounds the corners of the button
+   * @defaultValue false
+   */
+  rounded?: boolean
+  tag?: string
+  /**
+   * @defaultValue 'primary'
+   */
+  tagColor?: InputNumberVariants['tagColor']
+  /**
+   * Highlight the ring color like a focus state
+   * @defaultValue false
+   */
+  highlight?: boolean
+  /**
+   * The orientation of the input menu.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: 'vertical' | 'horizontal'
+  /**
+   * Configure the increment button. The `size` is inherited.
+   * @defaultValue { color: 'link', depth: 'light' }
+   */
+  increment?: ButtonProps
+  /**
+   * The icon displayed to increment the value.
+   * @defaultValue icons.plus
+   * @IconComponent
+   */
+  incrementIcon?: IconComponent
+  /**
+   * Configure the decrement button. The `size` is inherited.
+   * @defaultValue { color: 'link', depth: 'light' }
+   */
+  decrement?: ButtonProps
+  /**
+   * The icon displayed to decrement the value.
+   * @defaultValue icons.minus
+   * @IconComponent
+   */
+  decrementIcon?: IconComponent
+  /**
+   * @defaultValue false
+   */
+  autofocus?: boolean
+  /**
+   * @defaultValue 0
+   */
+  autofocusDelay?: number
+  /**
+   * The locale to use for formatting and parsing numbers.
+   * @defaultValue B24App.locale.code
+   */
+  locale?: string
+  class?: any
+  b24ui?: PartialString<typeof inputNumber.slots>
+}
+
+export interface InputNumberEmits {
+  (e: 'update:modelValue', payload: number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', payload: Event): void
+}
+
+export interface InputNumberSlots {
+  increment(props?: {}): any
+  decrement(props?: {}): any
+}
 </script>
 
-<script setup>
-import { onMounted, ref, computed } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
-import { useFormField } from "../composables/useFormField";
-import { useLocale } from "../composables/useLocale";
-import icons from "../dictionary/icons";
-defineOptions({ inheritAttrs: false });
-const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  placeholder: {
-    type: String,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false,
-    default: "primary"
-  },
-  size: {
-    type: null,
-    required: false,
-    default: "md"
-  },
-  noPadding: {
-    type: Boolean,
-    required: false
-  },
-  noBorder: {
-    type: Boolean,
-    required: false
-  },
-  underline: {
-    type: Boolean,
-    required: false
-  },
-  rounded: {
-    type: Boolean,
-    required: false
-  },
-  tag: {
-    type: String,
-    required: false
-  },
-  tagColor: {
-    type: null,
-    required: false
-  },
-  highlight: {
-    type: Boolean,
-    required: false
-  },
-  orientation: {
-    type: String,
-    required: false,
-    default: "horizontal"
-  },
-  increment: {
-    type: Object,
-    required: false
-  },
-  incrementIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  decrement: {
-    type: Object,
-    required: false
-  },
-  decrementIcon: {
-    type: [Function, Object],
-    required: false
-  },
-  autofocus: {
-    type: Boolean,
-    required: false
-  },
-  autofocusDelay: {
-    type: Number,
-    required: false
-  },
-  locale: {
-    type: String,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: null,
-    required: false
-  },
-  modelValue: {
-    type: [Number, null],
-    required: false
-  },
-  defaultValue: {
-    type: Number,
-    required: false
-  },
-  min: {
-    type: Number,
-    required: false
-  },
-  max: {
-    type: Number,
-    required: false
-  },
-  stepSnapping: {
-    type: Boolean,
-    required: false
-  },
-  step: {
-    type: Number,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  required: {
-    type: Boolean,
-    required: false
-  },
-  id: {
-    type: String,
-    required: false
-  },
-  name: {
-    type: String,
-    required: false
-  },
-  formatOptions: {
-    type: null,
-    required: false
-  },
-  disableWheelChange: {
-    type: Boolean,
-    required: false
-  }
-});
-const emits = defineEmits(["update:modelValue", "blur", "change"]);
-defineSlots();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "min", "max", "step", "stepSnapping", "formatOptions", "disableWheelChange"), emits);
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size, name, highlight, disabled, ariaAttrs } = useFormField(props);
-const { t, code: codeLocale } = useLocale();
-const locale = computed(() => props.locale || codeLocale.value);
+<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue'
+import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '../composables/useFormField'
+import { useLocale } from '../composables/useLocale'
+import icons from '../dictionary/icons'
+import B24Button from './Button.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<InputNumberProps>(), {
+  orientation: 'horizontal',
+  color: 'primary',
+  size: 'md'
+})
+const emits = defineEmits<InputNumberEmits>()
+defineSlots<InputNumberSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'stepSnapping', 'formatOptions', 'disableWheelChange'), emits)
+
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps>(props)
+
+const { t, code: codeLocale } = useLocale()
+const locale = computed(() => props.locale || codeLocale.value)
+
 const isTag = computed(() => {
-  return props.tag;
-});
+  return props.tag
+})
+
 const b24ui = computed(() => inputNumber({
   color: color.value,
   size: size.value,
@@ -170,33 +158,42 @@ const b24ui = computed(() => inputNumber({
   noBorder: Boolean(props.noBorder),
   underline: Boolean(props.underline),
   orientation: props.orientation
-}));
-const incrementIcon = computed(() => props.incrementIcon || (props.orientation === "horizontal" ? icons.plus : icons.chevronUp));
-const decrementIcon = computed(() => props.decrementIcon || (props.orientation === "horizontal" ? icons.minus : icons.chevronDown));
-const inputRef = ref(null);
-function onUpdate(value) {
-  const event = new Event("change", { target: { value } });
-  emits("change", event);
-  emitFormChange();
-  emitFormInput();
+}))
+
+const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? icons.plus : icons.chevronUp))
+const decrementIcon = computed(() => props.decrementIcon || (props.orientation === 'horizontal' ? icons.minus : icons.chevronDown))
+
+const inputRef = ref<InstanceType<typeof NumberFieldInput> | null>(null)
+
+function onUpdate(value: number) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+
+  emitFormChange()
+  emitFormInput()
 }
-function onBlur(event) {
-  emitFormBlur();
-  emits("blur", event);
+
+function onBlur(event: FocusEvent) {
+  emitFormBlur()
+  emits('blur', event)
 }
+
 function autoFocus() {
   if (props.autofocus) {
-    inputRef.value?.$el?.focus();
+    inputRef.value?.$el?.focus()
   }
 }
+
 onMounted(() => {
   setTimeout(() => {
-    autoFocus();
-  }, props.autofocusDelay);
-});
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
 defineExpose({
   inputRef
-});
+})
 </script>
 
 <template>
@@ -232,7 +229,7 @@ defineExpose({
             color="link"
             depth="light"
             :aria-label="t('inputNumber.increment')"
-            v-bind="typeof increment === 'object' ? increment : void 0"
+            v-bind="typeof increment === 'object' ? increment : undefined"
           />
         </slot>
       </NumberFieldIncrement>
@@ -247,7 +244,7 @@ defineExpose({
             color="link"
             depth="light"
             :aria-label="t('inputNumber.decrement')"
-            v-bind="typeof decrement === 'object' ? decrement : void 0"
+            v-bind="typeof decrement === 'object' ? decrement : undefined"
           />
         </slot>
       </NumberFieldDecrement>

package/dist/runtime/components/Kbd.vue

@@ -1,38 +1,50 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/kbd";
-import { tv } from "../utils/tv";
-const appConfigKbd = _appConfig;
-const kbd = tv({ extend: tv(theme), ...appConfigKbd.b24ui?.kbd || {} });
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/kbd'
+import type { KbdKey } from '../composables/useKbd'
+import { tv } from '../utils/tv'
+
+const appConfigKbd = _appConfig as AppConfig & { b24ui: { kbd: Partial<typeof theme> } }
+
+const kbd = tv({ extend: tv(theme), ...(appConfigKbd.b24ui?.kbd || {}) })
+
+type KbdVariants = VariantProps<typeof kbd>
+
+export interface KbdProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'kbd'
+   */
+  as?: any
+  value?: KbdKey | string
+  /**
+   * @defaultValue 'light'
+   */
+  depth?: KbdVariants['depth']
+  /**
+   * @defaultValue 'md'
+   */
+  size?: KbdVariants['size']
+  class?: any
+}
+
+export interface KbdSlots {
+  default(props?: {}): any
+}
 </script>
 
-<script setup>
-import { useKbd } from "../composables/useKbd";
-const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "kbd"
-  },
-  value: {
-    type: null,
-    required: false
-  },
-  depth: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  }
-});
-defineSlots();
-const { getKbdKey } = useKbd();
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { useKbd } from '../composables/useKbd'
+
+const props = withDefaults(defineProps<KbdProps>(), {
+  as: 'kbd'
+})
+defineSlots<KbdSlots>()
+
+const { getKbdKey } = useKbd()
 </script>
 
 <template>