selemondev · selemondev · Aug 16, 2023 · Aug 16, 2023
@@ -98,6 +98,7 @@ function handleClose() {
 <script lang="ts">
 export default defineComponent({
   name: Components.UAlert,
+  inheritAttrs: false,
 })
 </script>
 

@@ -137,6 +137,7 @@ const avatarChipColorStyles = computed(() => ({
 <script lang="ts">
 export default defineComponent({
   name: Components.UAvatar,
+  inheritAttrs: false,
 })
 </script>
 

@@ -29,6 +29,7 @@ const variant = computed(() => {
 <script lang="ts">
 export default defineComponent({
   name: Components.UButtonGroup,
+  inheritAttrs: false,
 })
 </script>
 

@@ -38,6 +38,7 @@ const variant = computed(() => {
 <script lang="ts">
 export default defineComponent({
   name: Components.UKbd,
+  inheritAttrs: false,
 })
 </script>
 

@@ -54,6 +54,7 @@ function resolveLinkClass(route: { query: any; hash: any }, $route: { query: any
 <script lang="ts">
 export default defineComponent({
   name: Components.ULink,
+  inheritAttrs: false,
 })
 </script>
 

@@ -88,6 +88,7 @@ const inputClass = computed(() => {
 <script lang="ts">
 export default defineComponent({
   name: Components.URadio,
+  inheritAttrs: false,
 })
 </script>
 

@@ -1,6 +1,7 @@
 <script setup lang='ts'>
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, useAttrs } from 'vue'
 import classNames from 'classnames'
+import { omit } from 'lodash-es'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { URange } from '@/Types/componentsTypes/components'
@@ -131,6 +132,10 @@ const progressStyle = computed(() => {
     width: `${relativeValue * 100}%`,
   }
 })
+
+const attrs = useAttrs()
+
+const attrsOmitted = omit(attrs, ['class'])
 </script>
 
 <script lang="ts">
@@ -152,7 +157,7 @@ export default defineComponent({
       :step="step"
       type="range"
       :class="[inputClass, thumbClass, trackClass]"
-      v-bind="$attrs"
+      v-bind="attrsOmitted"
       @change="onChange"
     >
 

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import { computed, defineComponent, useSlots } from 'vue'
+import { computed, defineComponent, useAttrs, useSlots } from 'vue'
 import type { ComputedRef } from 'vue'
 import classNames from 'classnames'
-import { get } from 'lodash-es'
+import { get, omit } from 'lodash-es'
 import type { USelect } from '@/Types/componentsTypes/components'
 import { Components } from '@/Types/enums/Components'
 import { useFormEvents } from '@/composables/useFormEvents'
@@ -244,6 +244,10 @@ const trailingIconClass = computed(() => {
     props.loading && !isLeading.value && 'animate-spin',
   )
 })
+
+const attrs = useAttrs()
+
+const attrsOmitted = omit(attrs, ['class'])
 </script>
 
 <script lang="ts">
@@ -264,7 +268,7 @@ export default defineComponent({
       :disabled="disabled || loading"
       class="form-select"
       :class="selectClass"
-      v-bind="$attrs"
+      v-bind="attrsOmitted"
       @input="onInput"
       @change="onChange"
     >

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from 'vue'
 import type { ComponentPublicInstance, PropType } from 'vue'
+import { omit } from 'lodash-es'
 import {
   Combobox as HCombobox,
   ComboboxButton as HComboboxButton,
@@ -161,7 +162,7 @@ export default defineComponent({
     },
   },
   emits: ['update:modelValue', 'open', 'close', 'change'],
-  setup(props, { emit, slots }) {
+  setup(props, { emit, slots, attrs }) {
     const variant = computed(() => {
       const customProps = {
         ...props,
@@ -207,14 +208,14 @@ export default defineComponent({
       return classNames(
         nuxtLabsTheme.USelect.base.selectBase,
         nuxtLabsTheme.USelect.base.rounded,
-        'text-left cursor-default',
+        variant.value.selectMenuCursor,
         nuxtLabsTheme.USelect.base.size[props.size],
         nuxtLabsTheme.USelect.base.gap[props.size],
         props.padded ? nuxtLabsTheme.USelect.base.padding[props.size] : 'p-0',
         variants?.replaceAll('{color}', props.color),
         (isLeading.value || slots.leading) && nuxtLabsTheme.USelect.base.leading.padding[props.size],
         (isTrailing.value || slots.trailing) && nuxtLabsTheme.USelect.base.trailing.padding[props.size],
-        'inline-flex items-center',
+        variant.value.selectMenuFlex,
       )
     })
 
@@ -294,6 +295,7 @@ export default defineComponent({
     }
 
     return {
+      attrs: omit(attrs, ['class']),
       variant: variant.value,
       trigger,
       container,
@@ -348,7 +350,7 @@ export default defineComponent({
       :class="variant.component"
     >
       <slot :open="open" :disabled="disabled" :loading="loading">
-        <button :class="selectClass" :disabled="disabled || loading" type="button" v-bind="$attrs">
+        <button :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
           <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
             <slot name="leading" :disabled="disabled" :loading="loading">
               <UIcon :name="leadingIconName" :class="leadingIconClass" />

@@ -1,6 +1,7 @@
 <script setup lang='ts'>
-import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, defineComponent, nextTick, onMounted, ref, useAttrs, watch } from 'vue'
 import classNames from 'classnames'
+import { omit } from 'lodash-es'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import { Components } from '@/Types/enums/Components'
@@ -156,6 +157,10 @@ const textareaClass = computed(() => {
     !props.resize && 'resize-none',
   )
 })
+
+const attrs = useAttrs()
+
+const attrsOmitted = omit(attrs, ['class'])
 </script>
 
 <script lang="ts">
@@ -179,7 +184,7 @@ export default defineComponent({
       :placeholder="placeholder"
       class="form-textarea"
       :class="textareaClass"
-      v-bind="$attrs"
+      v-bind="attrsOmitted"
       @input="onInput"
       @blur="onBlur"
     />

@@ -1,5 +1,6 @@
 <script setup lang='ts'>
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, useAttrs } from 'vue'
+import { omit } from 'lodash-es'
 import classNames from 'classnames'
 import { Switch as HSwitch } from '@headlessui/vue'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
@@ -80,6 +81,10 @@ const onIconClass = computed(() => {
     nuxtLabsTheme.UToggle.base.iconOn.replaceAll('{color}', props.color),
   )
 })
+
+const attrs = useAttrs()
+
+const attrsOmitted = omit(attrs, ['class'])
 </script>
 
 <script lang="ts">
@@ -95,6 +100,7 @@ export default defineComponent({
     :name="name"
     :disabled="disabled"
     :class="switchClass"
+    v-bind="attrsOmitted"
   >
     <span :class="[active ? variant.containerActive : variant.containerInactive, variant.containerBase]">
       <span v-if="onIcon" :class="[active ? variant.iconActive : variant.iconInactive, variant.iconBase]" aria-hidden="true">

@@ -41,7 +41,6 @@ export default defineComponent({
 </script>
 
 <template>
-  {{ variant }}
   <nav :class="wrapperClass" v-bind="omit(attrs, ['class'])">
     <ULink
       v-for="(link, index) of links"

@@ -0,0 +1,5 @@
+import VerticalNavigation from './UVerticalNavigation.vue'
+
+export default {
+  VerticalNavigation,
+}
@@ -1414,6 +1414,8 @@ export default {
       width: 'w-full',
       selectInput: 'absolute inset-0 w-px opacity-0 cursor-default',
       component: 'inline-flex w-full',
+      selectMenuCursor: 'text-left cursor-default',
+      selectMenuFlex: 'inline-flex items-center',
       truncate: 'truncate',
       blockTruncate: 'block truncate',
       height: 'max-h-60',