@bitrix24/b24ui-nuxt 0.5.10 → 0.5.11

package/dist/runtime/components/Input.vue

@@ -1,141 +1,144 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/input";
-import { tv } from "../utils/tv";
-const appConfigInput = _appConfig;
-const input = tv({ extend: tv(theme), ...appConfigInput.b24ui?.input || {} });
+<script lang="ts">
+import type { InputHTMLAttributes } from 'vue'
+import type { VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/input'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import { tv } from '../utils/tv'
+import type { AvatarProps } from '../types'
+import type { PartialString } from '../types/utils'
+
+const appConfigInput = _appConfig as AppConfig & { b24ui: { input: Partial<typeof theme> } }
+
+const input = tv({ extend: tv(theme), ...(appConfigInput.b24ui?.input || {}) })
+
+type InputVariants = VariantProps<typeof input>
+
+export interface InputProps extends UseComponentIconsProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  id?: string
+  name?: string
+  /**
+   * @defaultValue 'text'
+   */
+  type?: InputHTMLAttributes['type']
+  /**
+   * The placeholder text when the input is empty.
+   */
+  placeholder?: string
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: InputVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
+  size?: InputVariants['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
+  /**
+   * @defaultValue false
+   */
+  required?: boolean
+  /**
+   * @defaultValue 'off'
+   */
+  autocomplete?: InputHTMLAttributes['autocomplete']
+  /**
+   * @defaultValue false
+   */
+  autofocus?: boolean
+  /**
+   * @defaultValue 0
+   */
+  autofocusDelay?: number
+  /**
+   * @defaultValue false
+   */
+  disabled?: boolean
+  tag?: string
+  /**
+   * @defaultValue 'primary'
+   */
+  tagColor?: InputVariants['tagColor']
+  /**
+   * Highlight the ring color like a focus state
+   * @defaultValue false
+   */
+  highlight?: boolean
+  class?: any
+  b24ui?: PartialString<typeof input.slots>
+}
+
+export interface InputEmits {
+  (e: 'update:modelValue', payload: string | number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', event: Event): void
+}
+
+export interface InputSlots {
+  leading(props?: {}): any
+  default(props?: {}): any
+  trailing(props?: {}): any
+}
 </script>
 
-<script setup>
-import { ref, computed, onMounted } from "vue";
-import { useButtonGroup } from "../composables/useButtonGroup";
-import { useComponentIcons } from "../composables/useComponentIcons";
-import { useFormField } from "../composables/useFormField";
-import { looseToNumber } from "../utils";
-defineOptions({ inheritAttrs: false });
-const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  id: {
-    type: String,
-    required: false
-  },
-  name: {
-    type: String,
-    required: false
-  },
-  type: {
-    type: null,
-    required: false,
-    default: "text"
-  },
-  placeholder: {
-    type: String,
-    required: false
-  },
-  color: {
-    type: null,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  noPadding: {
-    type: Boolean,
-    required: false
-  },
-  noBorder: {
-    type: Boolean,
-    required: false
-  },
-  underline: {
-    type: Boolean,
-    required: false
-  },
-  rounded: {
-    type: Boolean,
-    required: false
-  },
-  required: {
-    type: Boolean,
-    required: false
-  },
-  autocomplete: {
-    type: null,
-    required: false,
-    default: "off"
-  },
-  autofocus: {
-    type: Boolean,
-    required: false
-  },
-  autofocusDelay: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  tag: {
-    type: String,
-    required: false
-  },
-  tagColor: {
-    type: null,
-    required: false
-  },
-  highlight: {
-    type: Boolean,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: null,
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  },
-  loading: {
-    type: Boolean,
-    required: false
-  },
-  trailing: {
-    type: Boolean,
-    required: false
-  },
-  trailingIcon: {
-    type: [Function, Object],
-    required: false
-  }
-});
-const emits = defineEmits(["update:modelValue", "blur", "change"]);
-const slots = defineSlots();
-const [modelValue, modelModifiers] = defineModel({
-  "type": [String, Number, null]
-});
-const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(props, { deferInputValidation: true });
-const { orientation, size: buttonGroupSize } = useButtonGroup(props);
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
-const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value);
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { Primitive } from 'reka-ui'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import { looseToNumber } from '../utils'
+import B24Avatar from './Avatar.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<InputProps>(), {
+  type: 'text',
+  autocomplete: 'off',
+  autofocusDelay: 0
+})
+const emits = defineEmits<InputEmits>()
+const slots = defineSlots<InputSlots>()
+
+const [modelValue, modelModifiers] = defineModel<string | number | null>()
+
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps>(props, { deferInputValidation: true })
+const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
+const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
+
 const isTag = computed(() => {
-  return props.tag;
-});
+  return props.tag
+})
+
 const b24ui = computed(() => input({
-  type: props.type,
+  type: props.type as InputVariants['type'],
   color: color.value,
   size: inputSize?.value,
   loading: props.loading,
@@ -148,54 +151,70 @@ const b24ui = computed(() => input({
   leading: Boolean(isLeading.value || !!props.avatar || !!slots.leading),
   trailing: Boolean(isTrailing.value || !!slots.trailing),
   buttonGroup: orientation.value
-}));
-const inputRef = ref(null);
-function updateInput(value) {
+}))
+
+const inputRef = ref<HTMLInputElement | null>(null)
+
+// Custom function to handle the v-model properties
+function updateInput(value: string | null) {
   if (modelModifiers.trim) {
-    value = value?.trim() ?? null;
+    value = value?.trim() ?? null
   }
-  if (modelModifiers.number || props.type === "number") {
-    value = looseToNumber(value);
+
+  if (modelModifiers.number || props.type === 'number') {
+    value = looseToNumber(value)
   }
+
   if (modelModifiers.nullify) {
-    value ||= null;
+    value ||= null
   }
-  modelValue.value = value;
-  emitFormInput();
+
+  modelValue.value = value
+  emitFormInput()
 }
-function onInput(event) {
+
+function onInput(event: Event) {
   if (!modelModifiers.lazy) {
-    updateInput(event.target.value);
+    updateInput((event.target as HTMLInputElement).value)
   }
 }
-function onChange(event) {
-  const value = event.target.value;
+
+function onChange(event: Event) {
+  const value = (event.target as HTMLInputElement).value
+
   if (modelModifiers.lazy) {
-    updateInput(value);
+    updateInput(value)
   }
+
+  // Update trimmed input so that it has same behavior as native input https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
   if (modelModifiers.trim) {
-    event.target.value = value.trim();
+    (event.target as HTMLInputElement).value = value.trim()
   }
-  emitFormChange();
-  emits("change", event);
+
+  emitFormChange()
+  emits('change', event)
 }
-function onBlur(event) {
-  emitFormBlur();
-  emits("blur", event);
+
+function onBlur(event: FocusEvent) {
+  emitFormBlur()
+  emits('blur', event)
 }
+
 function autoFocus() {
   if (props.autofocus) {
-    inputRef.value?.focus();
+    inputRef.value?.focus()
   }
 }
+
 onMounted(() => {
   setTimeout(() => {
-    autoFocus();
-  }, props.autofocusDelay);
-});
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
 defineExpose({
   inputRef
-});
+})
 </script>
 
 <template>
@@ -233,7 +252,7 @@ defineExpose({
         />
         <B24Avatar
           v-else-if="!!avatar"
-          :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+          :size="((props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])"
           v-bind="avatar"
           :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
         />