fix(components): move remaining classes to config (#1039)

2026-01-19 06:21:46 +01:00 · 2023-11-30 16:31:48 +01:00
parent 5718dfd69a
commit e408eabd8b
44 changed files with 196 additions and 117 deletions
--- a/src/runtime/components/forms/Checkbox.vue
+++ b/src/runtime/components/forms/Checkbox.vue
@@ -1,6 +1,6 @@
 <template>
  <div :class="ui.wrapper">
-    <div class="flex items-center h-5">
+    <div :class="ui.container">
      <input
        :id="inputId"
        v-model="toggle"
@@ -11,13 +11,12 @@
        :checked="checked"
        :indeterminate="indeterminate"
        type="checkbox"
-        class="form-checkbox"
        :class="inputClass"
        v-bind="attrs"
        @change="onChange"
      >
    </div>
-    <div v-if="label || $slots.label" class="ms-3 flex flex-col">
+    <div v-if="label || $slots.label" :class="ui.inner">
      <label :for="inputId" :class="ui.label">
        <slot name="label">{{ label }}</slot>
        <span v-if="required" :class="ui.required">*</span>
@@ -130,6 +129,7 @@ export default defineComponent({
    const inputClass = computed(() => {
      return twMerge(twJoin(
        ui.value.base,
+        ui.value.form,
        ui.value.rounded,
        ui.value.background,
        ui.value.border,
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -9,7 +9,6 @@
      :required="required"
      :placeholder="placeholder"
      :disabled="disabled || loading"
-      class="form-input"
      :class="inputClass"
      v-bind="attrs"
      @input="onInput"
@@ -234,6 +233,7 @@ export default defineComponent({

      return twMerge(twJoin(
        ui.value.base,
+        ui.value.form,
        rounded.value,
        ui.value.placeholder,
        ui.value.size[size.value],
@@ -281,7 +281,7 @@ export default defineComponent({
        ui.value.icon.base,
        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
        ui.value.icon.size[size.value],
-        props.loading && 'animate-spin'
+        props.loading && ui.value.icon.loading
      )
    })

@@ -298,7 +298,7 @@ export default defineComponent({
        ui.value.icon.base,
        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
        ui.value.icon.size[size.value],
-        props.loading && !isLeading.value && 'animate-spin'
+        props.loading && !isLeading.value && ui.value.icon.loading
      )
    })

--- a/src/runtime/components/forms/Radio.vue
+++ b/src/runtime/components/forms/Radio.vue
@@ -1,6 +1,6 @@
 <template>
  <div :class="ui.wrapper">
-    <div class="flex items-center h-5">
+    <div :class="ui.container">
      <input
        :id="inputId"
        v-model="pick"
@@ -9,12 +9,11 @@
        :value="value"
        :disabled="disabled"
        type="radio"
-        class="form-radio"
        :class="inputClass"
        v-bind="attrs"
      >
    </div>
-    <div v-if="label || $slots.label" class="ms-3 flex flex-col">
+    <div v-if="label || $slots.label" :class="ui.inner">
      <label :for="inputId" :class="ui.label">
        <slot name="label">{{ label }}</slot>
        <span v-if="required" :class="ui.required">*</span>
@@ -128,6 +127,7 @@ export default defineComponent({
    const inputClass = computed(() => {
      return twMerge(twJoin(
        ui.value.base,
+        ui.value.form,
        ui.value.background,
        ui.value.border,
        color.value && ui.value.ring.replaceAll('{color}', color.value),
--- a/src/runtime/components/forms/RadioGroup.vue
+++ b/src/runtime/components/forms/RadioGroup.vue
@@ -90,7 +90,7 @@ export default defineComponent({
      default: () => ({})
    },
    uiRadio: {
-      type: Object as PropType<Partial<typeof configRadio & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof configRadio> & { strategy?: Strategy }>,
      default: () => ({})
    }
  },
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -6,7 +6,6 @@
      :value="modelValue"
      :required="required"
      :disabled="disabled || loading"
-      class="form-select"
      :class="selectClass"
      v-bind="attrs"
      @input="onInput"
@@ -256,6 +255,7 @@ export default defineComponent({

      return twMerge(twJoin(
        ui.value.base,
+        ui.value.form,
        rounded.value,
        ui.value.size[size.value],
        props.padded ? ui.value.padding[size.value] : 'p-0',
@@ -302,7 +302,7 @@ export default defineComponent({
        ui.value.icon.base,
        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
        ui.value.icon.size[size.value],
-        props.loading && 'animate-spin'
+        props.loading && ui.value.icon.loading
      )
    })

@@ -319,7 +319,7 @@ export default defineComponent({
        ui.value.icon.base,
        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
        ui.value.icon.size[size.value],
-        props.loading && !isLeading.value && 'animate-spin'
+        props.loading && !isLeading.value && ui.value.icon.loading
      )
    })

--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -15,7 +15,7 @@
      v-if="required"
      :value="modelValue"
      :required="required"
-      class="absolute inset-0 w-px opacity-0 cursor-default"
+      :class="uiMenu.required"
      tabindex="-1"
      aria-hidden="true"
    >
@@ -25,7 +25,7 @@
      ref="trigger"
      as="div"
      role="button"
-      class="inline-flex w-full"
+      :class="uiMenu.trigger"
    >
      <slot :open="open" :disabled="disabled" :loading="loading">
        <button :id="inputId" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
@@ -36,9 +36,9 @@
          </span>

          <slot name="label">
-            <span v-if="multiple && Array.isArray(modelValue) && modelValue.length" class="block truncate">{{ modelValue.length }} selected</span>
-            <span v-else-if="!multiple && modelValue" class="block truncate">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
-            <span v-else class="block truncate">{{ placeholder || '&nbsp;' }}</span>
+            <span v-if="multiple && Array.isArray(modelValue) && modelValue.length" :class="uiMenu.label">{{ modelValue.length }} selected</span>
+            <span v-else-if="!multiple && modelValue" :class="uiMenu.label">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
+            <span v-else :class="uiMenu.label">{{ placeholder || '&nbsp;' }}</span>
          </slot>

          <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
@@ -53,7 +53,8 @@
    <div v-if="open" ref="container" :class="[uiMenu.container, uiMenu.width]">
      <Transition appear v-bind="uiMenu.transition">
        <div>
-          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(uiMenu.arrow)]" />
+          <div v-if="popper.arrow" data-popper-arrow :class="Object.values(uiMenu.arrow)" />
+
          <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
            <HComboboxInput
              v-if="searchable"
@@ -101,7 +102,7 @@
              <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive]">
                <div :class="uiMenu.option.container">
                  <slot name="option-create" :option="queryOption" :active="active" :selected="selected">
-                    <span class="block truncate">Create "{{ queryOption[optionAttribute] }}"</span>
+                    <span :class="uiMenu.option.create">Create "{{ queryOption[optionAttribute] }}"</span>
                  </slot>
                </div>
              </li>
@@ -312,7 +313,7 @@ export default defineComponent({
      default: () => ({})
    },
    uiMenu: {
-      type: Object as PropType<Partial<typeof configMenu & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof configMenu> & { strategy?: Strategy }>,
      default: () => ({})
    }
  },
@@ -339,15 +340,14 @@ export default defineComponent({

      return twMerge(twJoin(
        ui.value.base,
+        uiMenu.value.select,
        rounded.value,
-        'text-left cursor-default',
        ui.value.size[size.value],
        ui.value.gap[size.value],
        props.padded ? ui.value.padding[size.value] : 'p-0',
        variant?.replaceAll('{color}', color.value),
        (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
-        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value],
-        'inline-flex items-center'
+        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
      ), props.selectClass)
    })

@@ -388,7 +388,7 @@ export default defineComponent({
        ui.value.icon.base,
        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
        ui.value.icon.size[size.value],
-        props.loading && 'animate-spin'
+        props.loading && ui.value.icon.loading
      )
    })

@@ -405,7 +405,7 @@ export default defineComponent({
        ui.value.icon.base,
        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
        ui.value.icon.size[size.value],
-        props.loading && !isLeading.value && 'animate-spin'
+        props.loading && !isLeading.value && ui.value.icon.loading
      )
    })

--- a/src/runtime/components/forms/Textarea.vue
+++ b/src/runtime/components/forms/Textarea.vue
@@ -9,7 +9,6 @@
      :required="required"
      :disabled="disabled"
      :placeholder="placeholder"
-      class="form-textarea"
      :class="textareaClass"
      v-bind="attrs"
      @input="onInput"
@@ -227,6 +226,7 @@ export default defineComponent({

      return twMerge(twJoin(
        ui.value.base,
+        ui.value.form,
        ui.value.rounded,
        ui.value.placeholder,
        ui.value.size[size.value],