Merge pull request #227 from LUI-UI/226-should-all-components-have-a-…

…classname-with-component-name

226 should all components have a classname with component name

src/components/Checkbox/LuiCheckbox.vue

@@ -121,7 +121,7 @@ const iconSize = computed(() =>
 </script>
 
 <template>
-  <div class="inline-block leading-3">
+  <div class="lui-checkbox inline-block leading-3">
     <div class="relative inline-flex">
       <input
         type="checkbox"

src/components/MenuDropdown/LuiMenuDropdown.vue

@@ -266,7 +266,7 @@ function ArrowDownIcon() {
 </script>
 
 <template>
-  <div ref="luiDropdownWrapper" :class="dropdownWrapperClasses">
+  <div ref="luiDropdownWrapper" class="lui-menu-dropdown" :class="dropdownWrapperClasses">
     <div ref="luiDropdownTrigger" class="trigger-wrapper cursor-pointer">
       <slot
         :id="buttonId"

src/components/Modal/LuiModal.vue

@@ -93,7 +93,7 @@ const computedModalClasses = computed(() => {
 <template>
   <Teleport :to="`#${teleportId}`">
     <UseFocusTrap v-if="show" :options="{ immediate: true }">
-      <div class="fixed inset-0 z-50 overflow-hidden">
+      <div class="lui-modal fixed inset-0 z-50 overflow-hidden">
         <div class="dialog-wrapper" :class="computedDialogWrapperClasses">
           <div
             :id="modalId"

src/components/MultiSelect/LuiMultiSelect.vue

@@ -447,7 +447,6 @@ function closeOptions() {
   optionsActive.value = false
 }
 function updateSelectedOptions(option: ModelValue) {
-  console.log('option', option)
   if (option === undefined)
     return
   const optionText = typeof option !== 'string' ? option.text : option
@@ -627,9 +626,8 @@ function ArrowIcon() {
 </script>
 
 <template>
-  isValueUsing: {{ isValueUsing }}
   <div
-    class="relative"
+    class="relative lui-multiselect"
     :class="wrapperClasses"
   >
     <div

src/components/Option/LuiOption.vue

@@ -166,6 +166,7 @@ defineExpose({
     role="option"
     tabindex="-1"
     :aria-selected="isSelected"
+    class="lui-option"
     :class="optionClasses"
     @click="handleOptionClick"
   >

src/components/Overlay/LuiOverlay.vue

@@ -107,6 +107,7 @@ const computedOverlayClasses = computed(() => {
   <div
     v-if="fixed ? show : true"
     :class="computedWrapperClasses"
+    class="lui-overlay"
     @click="triggerClose"
     @keydown.esc="triggerClose"
   >

src/components/Popover/LuiPopover.vue

@@ -94,7 +94,7 @@ function closeDialog() {
 </script>
 
 <template>
-  <div class="relative" :class="!block ? 'w-max' : ''">
+  <div class="lui-popover relative" :class="!block ? 'w-max' : ''">
     <div ref="triggerRef">
       <slot name="trigger" v-bind="{ ...triggerSlotProps }">
         <LuiButton

src/components/Radio/LuiRadio.vue

@@ -53,7 +53,7 @@ const isChecked = computed<boolean>(() => props.value === props.modelValue)
 </script>
 
 <template>
-  <div class="inline-block leading-3">
+  <div class="lui-radio inline-block leading-3">
     <div class="relative">
       <input
         type="radio"

src/components/Select/LuiSelect.vue

@@ -507,6 +507,7 @@ function resetSelectedOption() {
     ref="selectWrapperRef"
     role="combobox"
     aria-haspopup="listbox"
+    class="lui-select"
     :class="selectWrapperClasses"
     :aria-expanded="optionsActive"
     :aria-controls="optionsId"

src/components/Sidebar/LuiSidebar.vue

@@ -130,7 +130,7 @@ const animationClasses = computed(() =>
     >
       <div
         v-if="show"
-        class="fixed inset-0 z-40 overflow-hidden bg-secondary-900/40"
+        class="lui-sidebar fixed inset-0 z-40 overflow-hidden bg-secondary-900/40"
         @click="emit('close')"
         @keydown.esc="emit('close')"
       >

src/components/Switch/LuiSwitch.vue

@@ -88,7 +88,7 @@ function isInputChecked(): boolean {
 </script>
 
 <template>
-  <div class="inline-block leading-3">
+  <div class="lui-switch inline-block leading-3">
     <div class="relative">
       <input
         type="checkbox"

src/components/Tabs/LuiTabButtons.vue

@@ -53,6 +53,7 @@ function tabListAfterClasses() {
   <div
     role="tablist"
     aria-orientation="horizontal"
+    class="lui-tab-buttons"
     :class="[tabListClasses, !customStyle ? tabListAfterClasses() : '']"
   >
     <slot />

src/components/Tabs/LuiTabPanels.vue

@@ -7,7 +7,7 @@ export default {
 <script setup lang="ts"></script>
 
 <template>
-  <div class="panel-wrapper">
+  <div class="lui-tab-panels panel-wrapper">
     <slot />
   </div>
 </template>