@bitrix24/b24ui-nuxt 0.5.9 → 0.5.10

package/dist/runtime/components/Input.vue

@@ -1,144 +1,141 @@
-<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>
+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>
 
-<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)
-
+<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);
 const isTag = computed(() => {
-  return props.tag
-})
-
+  return props.tag;
+});
 const b24ui = computed(() => input({
-  type: props.type as InputVariants['type'],
+  type: props.type,
   color: color.value,
   size: inputSize?.value,
   loading: props.loading,
@@ -151,70 +148,54 @@ const b24ui = computed(() => input({
   leading: Boolean(isLeading.value || !!props.avatar || !!slots.leading),
   trailing: Boolean(isTrailing.value || !!slots.trailing),
   buttonGroup: orientation.value
-}))
-
-const inputRef = ref<HTMLInputElement | null>(null)
-
-// Custom function to handle the v-model properties
-function updateInput(value: string | null) {
+}));
+const inputRef = ref(null);
+function updateInput(value) {
   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: Event) {
+function onInput(event) {
   if (!modelModifiers.lazy) {
-    updateInput((event.target as HTMLInputElement).value)
+    updateInput(event.target.value);
   }
 }
-
-function onChange(event: Event) {
-  const value = (event.target as HTMLInputElement).value
-
+function onChange(event) {
+  const value = event.target.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 as HTMLInputElement).value = value.trim()
+    event.target.value = value.trim();
   }
-
-  emitFormChange()
-  emits('change', event)
+  emitFormChange();
+  emits("change", event);
 }
-
-function onBlur(event: FocusEvent) {
-  emitFormBlur()
-  emits('blur', event)
+function onBlur(event) {
+  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>
@@ -252,7 +233,7 @@ defineExpose({
         />
         <B24Avatar
           v-else-if="!!avatar"
-          :size="((props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])"
+          :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
           v-bind="avatar"
           :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
         />