exports override classes

themesberg · Jul 19, 2023 · 8c64726 · 8c64726
1 parent 1fb46b5
commit 8c64726
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 11 deletions.
diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
@@ -4,7 +4,7 @@ import CheckboxDisabled from './checkbox/examples/CheckboxDisabled.vue'
 import CheckboxChecked from './checkbox/examples/CheckboxChecked.vue'
 import CheckboxLink from './checkbox/examples/CheckboxLink.vue'
 </script>
-# Vue Footer - Flowbite
+# Vue Checkbox - Flowbite
 
 ## Default checkbox
 

diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
@@ -1,6 +1,6 @@
 <template>
   <label class="flex gap-3 items-center justify-start">
-    <input v-model="model" type="checkbox" :disabled="disabled" :class="checkboxClasses" />
+    <input v-model="model" type="checkbox" :disabled="disabled" :class="[checkboxClasses, props.classes]" />
     <span v-if="label" :class="labelClasses">{{ label }}</span>
     <slot />
   </label>
@@ -14,11 +14,13 @@ interface CheckboxProps {
   modelValue?: boolean,
   label?: string,
   disabled?: boolean,
+  classes?: string,
 }
 const props = withDefaults(defineProps<CheckboxProps>(), {
   modelValue: false,
   label: '',
   disabled: false,
+  classes: '',
 })
 
 const emit = defineEmits(['update:modelValue'])

diff --git a/src/components/FileInput/FileInput.vue b/src/components/FileInput/FileInput.vue
@@ -45,13 +45,15 @@ interface FileInputProps {
   size?: string
   dropzone?: boolean
   multiple?: boolean
+  classes?: string
 }
 const props = withDefaults(defineProps<FileInputProps>(), {
   modelValue: null,
   label: '',
   size: 'sm',
   dropzone: false,
   multiple: false,
+  classes: '',
 })
 const dropZoneText = computed(() => {
   if (isArray(props.modelValue)) {
@@ -111,5 +113,5 @@ const dragOverHandler = (event: Event) => {
   event.preventDefault()
 }
 
-const { fileInpClasses, labelClasses, dropzoneLabelClasses, dropzoneWrapClasses, dropzoneTextClasses } = useFileInputClasses(props.size)
+const { fileInpClasses, labelClasses, dropzoneLabelClasses, dropzoneWrapClasses, dropzoneTextClasses } = useFileInputClasses(props.size, props.classes)
 </script>
diff --git a/src/components/FileInput/composables/useFileInputClasses.ts b/src/components/FileInput/composables/useFileInputClasses.ts
@@ -9,9 +9,9 @@ const fileInpDropzoneClasses =
 const fileDropzoneWrapClasses = 'flex flex-col items-center justify-center pt-5 pb-6'
 const fileDropzoneDefaultTextClasses = '!-mb-2 text-sm text-gray-500 dark:text-gray-400'
 
-export function useFileInputClasses(size: string) {
+export function useFileInputClasses(size: string, classes: string) {
   const fileInpClasses = computed(() => {
-    return simplifyTailwindClasses(fileInpDefaultClasses, 'text-' + size)
+    return simplifyTailwindClasses(fileInpDefaultClasses, 'text-' + size, classes)
   })
 
   const labelClasses = computed(() => {

diff --git a/src/components/Input/Input.vue b/src/components/Input/Input.vue
@@ -36,6 +36,7 @@ interface InputProps {
   size?: InputSize;
   required?: boolean;
   modelValue: string;
+  classes?: string;
 }
 
 const props = withDefaults(defineProps<InputProps>(), {
@@ -45,6 +46,7 @@ const props = withDefaults(defineProps<InputProps>(), {
   size: 'md',
   required: false,
   modelValue: '',
+  classes: '',
 })
 
 const model = useVModel(props, 'modelValue')

diff --git a/src/components/Input/composables/useInputClasses.ts b/src/components/Input/composables/useInputClasses.ts
@@ -16,6 +16,7 @@ const inputSizeClasses: Record<InputSize, string> = {
 }
 
 export type UseInputClassesProps = {
+    classes: Ref<string>
     size: Ref<InputSize>
     disabled: Ref<boolean>
 }
@@ -25,7 +26,7 @@ export function useInputClasses(props: UseInputClassesProps): {
     labelClasses: Ref<string>
 } {
     const inputClasses = computed(() => {
-        return simplifyTailwindClasses(defaultInputClasses, inputSizeClasses[props.size.value], props.disabled.value ? disabledInputClasses : '')
+        return simplifyTailwindClasses(defaultInputClasses, inputSizeClasses[props.size.value], props.disabled.value ? disabledInputClasses : '', props.classes.value)
     })
 
     const labelClasses = computed(() => {

diff --git a/src/components/Radio/Radio.vue b/src/components/Radio/Radio.vue
@@ -1,7 +1,7 @@
 <template>
   <label class="flex w-[100%] items-center">
     <input type="radio" v-model="model" :disabled="disabled" :name="name" :value="value"
-      :class="radioClasses">
+      :class="[radioClasses, props.classes]">
     <span :class="labelClasses">{{ label }}</span>
     <slot />
   </label>
@@ -17,13 +17,15 @@ interface RadioProps {
   value?: string;
   label?: string;
   disabled?: boolean;
+  classes?: string;
 }
 
 const props = withDefaults(defineProps<RadioProps>(), {
   value: '',
   name: '',
   label: '',
   disabled: false,
+  classes: '',
 })
 
 const emit = defineEmits(['update:modelValue'])

diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <label for="default-range" :class="labelClasses">{{ label }}</label>
-    <input :step="steps" v-model="model" :min="min" :max="max" :disabled="disabled" type="range" :class="rangeClasses">
+    <input :step="steps" v-model="model" :min="min" :max="max" :disabled="disabled" type="range" :class="[rangeClasses, props.classes]">
   </div>
 </template>
 
@@ -18,6 +18,7 @@ interface RangeProps {
   max?: string;
   size?: InputSize;
   steps?: string;
+  classes?: string;
 }
 
 const props = withDefaults(defineProps<RangeProps>(), {
@@ -28,6 +29,7 @@ const props = withDefaults(defineProps<RangeProps>(), {
   max: '100',
   size: 'md',
   steps: '1',
+  classes: '',
 })
 
 const emit = defineEmits(['update:modelValue'])

diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <label v-if="label" :class="labelClasses">{{ label }}</label>
-    <select v-model="model" :disabled="disabled" :class="[selectClasses, underline? underlineClasses: '']">
+    <select v-model="model" :disabled="disabled" :class="[selectClasses, underline? underlineClasses: '', props.classes]">
       <option disabled selected value="">{{ placeholder }}</option>
       <option :value="option.value" v-for="(option, index) in options" :key="index">
         {{ option.name }}
@@ -24,6 +24,7 @@ interface InputProps {
   disabled?: boolean;
   underline?: boolean;
   size?: InputSize;
+  classes?: string;
 }
 const props = withDefaults(defineProps<InputProps>(), {
   modelValue: '',
@@ -33,6 +34,7 @@ const props = withDefaults(defineProps<InputProps>(), {
   disabled: false,
   underline: false,
   size: 'md',
+  classes: '',
 })
 const emit = defineEmits(['update:modelValue'])
 

diff --git a/src/components/Textarea/Textarea.vue b/src/components/Textarea/Textarea.vue
@@ -2,7 +2,7 @@
   <label>
     <div :class="labelClasses">{{ label }}</div>
     <div :class="wrapperClasses">
-      <textarea v-model="model" :rows="rows" :class="textareaClasses" :placeholder="placeholder"></textarea>
+      <textarea v-model="model" :rows="rows" :class="[textareaClasses, props.classes]" :placeholder="placeholder"></textarea>
       <div v-if="$slots.footer" :class="footerClasses">
         <slot name="footer"></slot>
       </div>
@@ -20,6 +20,7 @@ interface TextareaProps {
   rows?: number;
   custom?: boolean;
   placeholder?: string;
+  classes?: string;
 }
 
 const props = withDefaults(defineProps<TextareaProps>(), {
@@ -28,6 +29,7 @@ const props = withDefaults(defineProps<TextareaProps>(), {
   rows: 4,
   custom: false,
   placeholder: 'Write your message here...',
+  classes: '',
 })
 
 const emit = defineEmits(['update:modelValue'])

diff --git a/src/components/Toggle/Toggle.vue b/src/components/Toggle/Toggle.vue
@@ -1,7 +1,7 @@
 <template>
   <label :class="labelClasses">
     <input :disabled="disabled" v-model="model" type="checkbox" class="sr-only peer" />
-    <span :class="[toggleClasses, toggleSize, toggleColor]"></span>
+    <span :class="[toggleClasses, toggleSize, toggleColor, props.classes]"></span>
     <span :class="toggleBallClasses">{{ label }}</span>
   </label>
 </template>
@@ -17,6 +17,7 @@ interface ToggleProps {
   color?: '';
   size?: InputSize;
   disabled?: boolean;
+  classes?: string;
 }
 
 const props = withDefaults(defineProps<ToggleProps>(), {
@@ -25,6 +26,7 @@ const props = withDefaults(defineProps<ToggleProps>(), {
   color: '',
   size: 'md',
   disabled: false,
+  classes: '',
 })
 
 const emit = defineEmits(['update:modelValue'])