From 6ddfbaf2c16d195cdd507c5d9e3de313cf94ee13 Mon Sep 17 00:00:00 2001
From: rhmkstk <rahmi.kstk@gmail.com>
Date: Mon, 16 Oct 2023 11:50:35 +0300
Subject: [PATCH] fix(components): add classnames to all missing components

#226
---
 src/components/Checkbox/LuiCheckbox.vue       |   2 +-
 .../MenuDropdown/LuiMenuDropdown.vue          |   2 +-
 src/components/Modal/LuiModal.vue             |   2 +-
 src/components/MultiSelect/LuiMultiSelect.vue |   4 +-
 src/components/Option/LuiOption.vue           |   1 +
 src/components/Overlay/LuiOverlay.vue         |   1 +
 src/components/Popover/LuiPopover.vue         |   2 +-
 src/components/Radio/LuiRadio.vue             |   2 +-
 src/components/Select/LuiSelect.vue           |   1 +
 src/components/Sidebar/LuiSidebar.vue         |   2 +-
 src/components/Switch/LuiSwitch.vue           |   2 +-
 src/components/Tabs/LuiTab.vue                |  45 ----
 src/components/Tabs/LuiTabButtons.vue         |   1 +
 src/components/Tabs/LuiTabPanels.vue          |   2 +-
 src/components/Tabs/LuiTabs.vue               | 228 ------------------
 src/components/Textarea/LuiTextarea.vue       |   2 +-
 16 files changed, 14 insertions(+), 285 deletions(-)
 delete mode 100644 src/components/Tabs/LuiTab.vue
 delete mode 100644 src/components/Tabs/LuiTabs.vue

diff --git a/src/components/Checkbox/LuiCheckbox.vue b/src/components/Checkbox/LuiCheckbox.vue
index 638e21d7..bd37074c 100644
--- a/src/components/Checkbox/LuiCheckbox.vue
+++ b/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"
diff --git a/src/components/MenuDropdown/LuiMenuDropdown.vue b/src/components/MenuDropdown/LuiMenuDropdown.vue
index 30b8f793..4d972eab 100644
--- a/src/components/MenuDropdown/LuiMenuDropdown.vue
+++ b/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"
diff --git a/src/components/Modal/LuiModal.vue b/src/components/Modal/LuiModal.vue
index e5f11658..0d468fbf 100644
--- a/src/components/Modal/LuiModal.vue
+++ b/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"
diff --git a/src/components/MultiSelect/LuiMultiSelect.vue b/src/components/MultiSelect/LuiMultiSelect.vue
index 4690956c..f30b78b2 100644
--- a/src/components/MultiSelect/LuiMultiSelect.vue
+++ b/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
diff --git a/src/components/Option/LuiOption.vue b/src/components/Option/LuiOption.vue
index fc31c722..bc65b6d2 100644
--- a/src/components/Option/LuiOption.vue
+++ b/src/components/Option/LuiOption.vue
@@ -166,6 +166,7 @@ defineExpose({
     role="option"
     tabindex="-1"
     :aria-selected="isSelected"
+    class="lui-option"
     :class="optionClasses"
     @click="handleOptionClick"
   >
diff --git a/src/components/Overlay/LuiOverlay.vue b/src/components/Overlay/LuiOverlay.vue
index 0b7fb177..250ffd02 100644
--- a/src/components/Overlay/LuiOverlay.vue
+++ b/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"
   >
diff --git a/src/components/Popover/LuiPopover.vue b/src/components/Popover/LuiPopover.vue
index 2a7389eb..42a8ed5d 100644
--- a/src/components/Popover/LuiPopover.vue
+++ b/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
diff --git a/src/components/Radio/LuiRadio.vue b/src/components/Radio/LuiRadio.vue
index 8623feac..187ef652 100644
--- a/src/components/Radio/LuiRadio.vue
+++ b/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"
diff --git a/src/components/Select/LuiSelect.vue b/src/components/Select/LuiSelect.vue
index 00807075..4c1e3393 100644
--- a/src/components/Select/LuiSelect.vue
+++ b/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"
diff --git a/src/components/Sidebar/LuiSidebar.vue b/src/components/Sidebar/LuiSidebar.vue
index 7582d108..f2f4e165 100644
--- a/src/components/Sidebar/LuiSidebar.vue
+++ b/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')"
       >
diff --git a/src/components/Switch/LuiSwitch.vue b/src/components/Switch/LuiSwitch.vue
index 5d567b00..9fe73ce4 100644
--- a/src/components/Switch/LuiSwitch.vue
+++ b/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"
diff --git a/src/components/Tabs/LuiTab.vue b/src/components/Tabs/LuiTab.vue
deleted file mode 100644
index a7232cba..00000000
--- a/src/components/Tabs/LuiTab.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<!-- <script lang="ts">
-export default {
-  name: "LuiTab",
-  inheritAttrs: false,
-};
-</script>
-<script lang="ts" setup>
-import type { PropType } from "vue";
-import { inject, watch } from "vue";
-import { ContextKey } from "./symbols";
-import type { TabTypes } from "./types";
-const props = defineProps({
-  title: {
-    type: String as PropType<string>,
-    default: "",
-  },
-  active: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  disabled: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-});
-const injection = inject(ContextKey);
-watch(
-  () => [props.title, props.active, props.disabled],
-  (_, oldValues) => {
-    injection?.changeTabProps(props as TabTypes, oldValues[0] as string);
-  }
-);
-</script>
-<template>
-  <div
-    v-if="title == injection?.selectedTab?.value?.title"
-    :id="injection?.selectedTab?.value?.panelId"
-    role="tabpanel"
-    tabindex="0"
-    :aria-labelledby="injection?.selectedTab?.value?.tabId"
-    class="computedClasses.panel"
-  >
-    <slot />
-  </div>
-</template> -->
diff --git a/src/components/Tabs/LuiTabButtons.vue b/src/components/Tabs/LuiTabButtons.vue
index 19e1cdb1..c081ab16 100644
--- a/src/components/Tabs/LuiTabButtons.vue
+++ b/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 />
diff --git a/src/components/Tabs/LuiTabPanels.vue b/src/components/Tabs/LuiTabPanels.vue
index 1f10840e..6884d745 100644
--- a/src/components/Tabs/LuiTabPanels.vue
+++ b/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>
diff --git a/src/components/Tabs/LuiTabs.vue b/src/components/Tabs/LuiTabs.vue
deleted file mode 100644
index 9b2abd32..00000000
--- a/src/components/Tabs/LuiTabs.vue
+++ /dev/null
@@ -1,228 +0,0 @@
-<!-- <script lang="ts">
-export default {
-  name: "LuiTabs",
-  inheritAttrs: false,
-};
-</script>
-<script lang="ts" setup>
-import {
-  onMounted,
-  provide,
-  ref,
-  useSlots,
-  nextTick,
-  computed,
-  watch,
-  h,
-} from "vue";
-import { ContextKey } from "./symbols";
-import { useId } from "../../utils/useId";
-import type { Ref, PropType } from "vue";
-import type { AlignmentTypes, TabTypes } from "./types";
-import type { TwClassInterface } from "@/globals/interfaces";
-import LuiMenuItem from "../Menu/LuiMenuItem.vue";
-
-const props = defineProps({
-  alignTabs: {
-    type: String as PropType<AlignmentTypes>,
-    default: "left", // left,center,right
-  },
-  alignContent: {
-    type: String as PropType<AlignmentTypes>,
-    default: "left", // left,center,right
-  },
-  stretch: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  modelValue: {
-    type: [String, null] as PropType<string | null>,
-    default: null,
-  },
-});
-
-const slots = useSlots();
-// console.log("SLOTS:", slots);
-const tabs: Ref<TabTypes[]> = ref([]);
-const selectedTab: Ref<TabTypes | null> = ref(null);
-const tabRefs = ref<Array<InstanceType<typeof LuiMenuItem>>>([]);
-const emit = defineEmits(["onTabChange"]);
-
-onMounted(() => {
-  // check if slot exist and valid
-  const defaultSlot = slots.default && slots.default();
-  if (!slots.default) throw new Error("need slot");
-  const doesSlotsHasTitle = defaultSlot?.every(
-    (slot: any) => slot?.props !== undefined && slot.props?.title !== undefined
-  );
-  if (!doesSlotsHasTitle) throw new Error("every slot needs title prop");
-  // set tabs from slot(lui-tab) props
-  // console.log("default-Slots:", slots.default()[0]?.children.prepend());
-  slots.default?.().map((slot: any) => {
-    tabs.value.push({
-      ...slot.props,
-      tabId: `lui-tab-${useId()}`,
-      panelId: `lui-tabpanel-${useId()}`,
-      prepend: slot?.children?.prepend && slot?.children?.prepend,
-      append: slot?.children?.append && slot?.children?.append,
-    });
-  });
-  console.log("TABS:", tabs.value);
-  // set initial selectedTab
-  let initialActiveIndex;
-  if (props.modelValue !== null) {
-    initialActiveIndex = tabs.value.findIndex(
-      (tab) => tab.title === props.modelValue
-    );
-  } else {
-    initialActiveIndex = tabs.value.findIndex(
-      (tab) => tab?.active !== undefined && tab.active !== false
-    );
-  }
-  initialActiveIndex = initialActiveIndex === -1 ? 0 : initialActiveIndex;
-  selectedTab.value = tabs.value[initialActiveIndex];
-});
-
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    const newActiveTab = tabs.value.find((tab) => tab.title === newValue);
-    if (newActiveTab?.disabled !== undefined && newActiveTab.disabled !== false)
-      return;
-
-    setSelectedTab(newActiveTab as TabTypes);
-  }
-);
-
-function setSelectedTab(tab: TabTypes) {
-  selectedTab.value = { ...tab };
-  emit("onTabChange", tab);
-}
-function handleClick(tab: TabTypes) {
-  // selectedTab.value = { ...tab };
-  // emit("onTabChange", tab);
-  setSelectedTab(tab);
-}
-function changeTabProps(tab: TabTypes, oldTitle: string) {
-  // we got tabs from slots with useSlots, so they are not reactive, be able to react tab props changes this function triggers from luitab
-  const index = tabs.value.findIndex((item) => item?.title == oldTitle);
-  tabs.value[index] = { ...tab };
-}
-provide(ContextKey, { selectedTab, changeTabProps });
-
-function focusAvailableElement(
-  currentIndex: number = 0,
-  oparation: (i: number) => number
-) {
-  const focusableElementsLength = tabs.value.filter(
-    (tab) => tab?.disabled === undefined || tab.disabled === false
-  ).length;
-  if (focusableElementsLength <= 1) return;
-  //helpers
-  const isTargetExist = (target: number) =>
-    target >= 0 && target <= tabs.value.length - 1;
-  const nextExistIndex = (target: number) =>
-    target < 0 ? tabs.value.length - 1 : 0;
-
-  const isTargetFocusable = (target: number) =>
-    tabs.value[target]?.disabled === undefined ||
-    tabs.value[target]?.disabled === false;
-  //helpers
-  let focusableTarget: null | number = null;
-  let targetIndex = oparation(currentIndex);
-  while (focusableTarget === null) {
-    if (!isTargetExist(targetIndex)) targetIndex = nextExistIndex(targetIndex);
-    if (isTargetFocusable(targetIndex)) focusableTarget = targetIndex;
-    else targetIndex = oparation(targetIndex);
-    // after set new value could be undefined that targetIndex
-  }
-  setSelectedTab(tabs.value[focusableTarget]);
-  nextTick(() => tabRefs.value[focusableTarget as number]?.focus());
-}
-function handleKeyEvents(event: KeyboardEvent, index: number) {
-  switch (event?.code) {
-    case "ArrowRight": {
-      focusAvailableElement(index, (i) => i + 1);
-      break;
-    }
-    case "ArrowLeft": {
-      focusAvailableElement(index, (i) => i - 1);
-      break;
-    }
-    case "Home": {
-      focusAvailableElement(-1, (i) => i + 1);
-      break;
-    }
-    case "End": {
-      focusAvailableElement(tabs.value.length, (i) => i - 1);
-      break;
-    }
-    default:
-  }
-}
-const renderTest = ({ index }) => {
-  console.log("index:", index);
-  return h("div", {}, [slots?.default()[index]?.children?.prepend()]);
-};
-const renderTestAppend = ({ index }) => {
-  console.log("append:", slots?.default()[index]);
-  return h("div", {}, [slots?.default()[index]?.children?.append()]);
-};
-
-const menuContainerClasses = computed(() => {
-  const classes: TwClassInterface = {
-    display: "flex",
-    justifyItems: {
-      "justify-start": props.alignTabs === "left",
-      "justify-center": props.alignTabs === "center",
-      "justify-end": props.alignTabs === "right",
-    },
-    overflow: "overflow-y-auto",
-  };
-  return Object.values(classes);
-});
-</script>
-<template>
-  <div>
-    <div
-      role="tablist"
-      :class="menuContainerClasses"
-      class="relative after:bg-secondary-300 after:w-full after:h-0.5 after:absolute after:z-10 after:left-0 after:bottom-0 after:inline-block after:rounded-full"
-      aria-orientation="horizontal"
-    >
-      <LuiMenuItem
-        v-for="(tab, index) in tabs"
-        :key="tab.title"
-        :id="tab.tabId"
-        :ref="(el) => (tabRefs[index] = el)"
-        type="button"
-        role="tab"
-        :tabindex="selectedTab.title === tab.title ? '0' : '-1'"
-        :aria-selected="selectedTab.title === tab.title ? true : false"
-        :aria-controls="tab.panelId"
-        :disabled="tab.disabled !== undefined && tab.disabled !== false"
-        :block="stretch"
-        @click="handleClick(tab)"
-        @keydown="handleKeyEvents($event, index)"
-        :color="selectedTab.title === tab.title ? 'primary' : 'secondary'"
-        class="relative after:w-full after:h-0.5 after:absolute after:z-20 after:left-0 after:bottom-0 after:inline-block after:rounded-full"
-        :class="
-          selectedTab.title === tab.title
-            ? 'after:bg-primary-500'
-            : 'after:bg-transparent'
-        "
-      >
-        <template #prepend>
-          <renderTest v-if="tab.prepend !== undefined" :index="index" />
-        </template>
-        {{ tab.title }}
-        <template #append>
-          <renderTestAppend v-if="tab.append !== undefined" :index="index" />
-        </template>
-      </LuiMenuItem>
-    </div>
-    <div class="flex justify-start pt-4 text-secondary-600">
-      <slot />
-    </div>
-  </div>
-</template> -->
diff --git a/src/components/Textarea/LuiTextarea.vue b/src/components/Textarea/LuiTextarea.vue
index 8f0b19a6..4a630a1f 100644
--- a/src/components/Textarea/LuiTextarea.vue
+++ b/src/components/Textarea/LuiTextarea.vue
@@ -70,7 +70,7 @@ const isDisabled = computed(() => attrs.disabled !== undefined && attrs.disabled
 </script>
 
 <template>
-  <div class="inline-block leading-3" :class="block ? 'w-full' : 'w-48'">
+  <div class="lui-textarea inline-block leading-3" :class="block ? 'w-full' : 'w-48'">
     <div class="relative">
       <textarea
         :class="textareaClasses"