From 86ce5eeab7a50e98949c37aa1155319df6fd52bc Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 10 Apr 2024 16:33:59 +0200
Subject: [PATCH 1/8] feat: add NeTabs component

---
 src/components/NeTabs.vue | 107 ++++++++++++++++++++++++++++++++++++++
 src/main.ts               |   2 +
 stories/NeTabs.stories.ts |  36 +++++++++++++
 3 files changed, 145 insertions(+)
 create mode 100644 src/components/NeTabs.vue
 create mode 100644 stories/NeTabs.stories.ts

diff --git a/src/components/NeTabs.vue b/src/components/NeTabs.vue
new file mode 100644
index 0000000..e8f0f1e
--- /dev/null
+++ b/src/components/NeTabs.vue
@@ -0,0 +1,107 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+
+export interface Tab {
+  name: string
+  label: string
+}
+
+export interface Props {
+  tabs: Tab[]
+  selected?: string
+  srSelectTabLabel?: string
+  srTabsLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tabs: () => [],
+  selected: '',
+  srSelectTabLabel: 'Select a tab',
+  srTabsLabel: 'Tabs'
+})
+
+let currentTab = ref('')
+
+onMounted(() => {
+  selectTabFromSelectedProp()
+})
+
+watch(currentTab, () => {
+  emit('selectTab', currentTab.value)
+})
+
+watch(
+  () => [props.selected],
+  () => {
+    selectTabFromSelectedProp()
+  }
+)
+
+function selectTabFromSelectedProp() {
+  let selectedTab = props.tabs[0]
+
+  if (props.selected) {
+    let selectedTabFound = props.tabs.find((tab: any) => tab.name === props.selected)
+
+    if (selectedTabFound) {
+      selectedTab = selectedTabFound
+    }
+  }
+  currentTab.value = selectedTab.name
+}
+
+function selectTab(tabName: any) {
+  currentTab.value = tabName
+}
+
+const emit = defineEmits(['selectTab'])
+</script>
+
+<template>
+  <div>
+    <!-- mobile tabs -->
+    <div class="sm:hidden">
+      <label for="tabs_select" class="sr-only">{{ srSelectTabLabel }}</label>
+      <select
+        id="tabs_select"
+        v-model="currentTab"
+        name="tabs_select"
+        class="block w-full rounded-md border-gray-300 bg-white py-2 pl-3 pr-10 text-base text-gray-700 focus:border-primary-500 focus:outline-none focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-50 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm"
+      >
+        <option
+          v-for="tab in props.tabs"
+          :key="tab.name"
+          :selected="currentTab === tab.name"
+          :value="tab.name"
+        >
+          {{ tab.label }}
+        </option>
+      </select>
+    </div>
+    <!-- desktop tabs -->
+    <div class="hidden sm:block">
+      <div class="border-b border-gray-200 dark:border-gray-700">
+        <nav class="-mb-px flex space-x-8" :aria-label="srTabsLabel">
+          <a
+            v-for="tab in props.tabs"
+            :key="tab.name"
+            :class="[
+              currentTab === tab.name
+                ? 'border-primary-600 text-primary-700 dark:border-primary-400 dark:text-primary-500'
+                : 'border-transparent text-gray-600 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-700 dark:hover:text-gray-100',
+              'cursor-pointer whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium'
+            ]"
+            :aria-current="currentTab === tab.name ? 'page' : undefined"
+            @click="selectTab(tab.name)"
+            >{{ tab.label }}</a
+          >
+        </nav>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/main.ts b/src/main.ts
index 3f9b3bb..a85db05 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -29,10 +29,12 @@ export { default as NeFormItemLabel } from '@/components/NeFormItemLabel.vue'
 export { default as NeRadioSelection } from '@/components/NeRadioSelection.vue'
 export { default as NePaginator } from '@/components/NePaginator.vue'
 export { default as NeEmptyState } from '@/components/NeEmptyState.vue'
+export { default as NeTabs } from '@/components/NeTabs.vue'
 
 // types export
 export type { NeComboboxOption } from '@/components/NeCombobox.vue'
 export type { NePaginatorProps } from '@/components/NePaginator.vue'
+export type { Tab } from '@/components/NeTabs.vue'
 
 // library functions export
 export {
diff --git a/stories/NeTabs.stories.ts b/stories/NeTabs.stories.ts
new file mode 100644
index 0000000..9b7da94
--- /dev/null
+++ b/stories/NeTabs.stories.ts
@@ -0,0 +1,36 @@
+//  Copyright (C) 2024 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { NeTabs } from '../src/main'
+
+const meta = {
+  title: 'Visual/NeTabs',
+  component: NeTabs,
+  argTypes: {},
+  args: {
+    tabs: [
+      { name: 'firstTab', label: 'First tab' },
+      { name: 'secondTab', label: 'Second tab' },
+      { name: 'thirdTab', label: 'Third tab' }
+    ],
+    selected: 'secondTab'
+  } // default values
+} satisfies Meta<typeof NeTabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const template = '<NeTabs v-bind="args" />'
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { NeTabs },
+    setup() {
+      return { args }
+    },
+    template: template
+  }),
+  args: {}
+}

From 531f7c7769b3bfa92d58be07d01f9319457b9fb2 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 10 Apr 2024 17:29:22 +0200
Subject: [PATCH 2/8] fix: style of NeInlineNotification buttons

---
 src/components/NeInlineNotification.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/NeInlineNotification.vue b/src/components/NeInlineNotification.vue
index 4063729..6472600 100644
--- a/src/components/NeInlineNotification.vue
+++ b/src/components/NeInlineNotification.vue
@@ -179,9 +179,12 @@ const closeIconKindStyle: { [index: string]: string } = {
             </button>
             <button
               v-if="secondaryButtonLabel"
-              :class="`ml-3 rounded-md px-2 py-1.5 text-sm font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 ${
-                buttonsKindStyle[props.kind as string]
-              }`"
+              :class="[
+                `rounded-md px-2 py-1.5 text-sm font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 ${
+                  buttonsKindStyle[props.kind as string]
+                }`,
+                { 'ml-3': primaryButtonLabel }
+              ]"
               type="button"
               @click="emit('secondaryClick')"
             >

From ef6410e1d3eaa28e4810e0aaea4bbb458aebcddb Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 10 Apr 2024 17:36:45 +0200
Subject: [PATCH 3/8] fix: style of NeLink

---
 src/components/NeLink.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NeLink.vue b/src/components/NeLink.vue
index 636399f..c8cc024 100644
--- a/src/components/NeLink.vue
+++ b/src/components/NeLink.vue
@@ -5,7 +5,7 @@
 <template>
   <a
     rel="noreferrer"
-    class="cursor-pointer text-primary-700 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200"
+    class="cursor-pointer font-medium text-primary-700 hover:text-primary-800 hover:underline dark:text-primary-300 dark:hover:text-primary-200"
   >
     <slot />
   </a>

From d2ce1b358da2ef10818c7b255b2d37c9d732cda6 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 10 Apr 2024 17:54:41 +0200
Subject: [PATCH 4/8] fix: style and storybook of NeRadioSelection

---
 src/components/NeRadioSelection.vue |  6 +++---
 stories/NeRadioSelection.stories.ts | 12 +++++-------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/NeRadioSelection.vue b/src/components/NeRadioSelection.vue
index fb823f2..9771547 100644
--- a/src/components/NeRadioSelection.vue
+++ b/src/components/NeRadioSelection.vue
@@ -80,9 +80,9 @@ const cardClasses: Record<RadioCardSize, string> = {
 }
 
 const iconClasses: Record<RadioCardSize, string> = {
-  md: 'h-7 w-7 pr-4',
-  lg: 'h-10 w-10 pr-5',
-  xl: 'h-12 w-12 pr-6'
+  md: 'h-7 w-7 pr-2',
+  lg: 'h-10 w-10 pr-3',
+  xl: 'h-12 w-12 pr-5'
 }
 
 const textClasses: Record<RadioCardSize, string> = {
diff --git a/stories/NeRadioSelection.stories.ts b/stories/NeRadioSelection.stories.ts
index 959883b..b80219c 100644
--- a/stories/NeRadioSelection.stories.ts
+++ b/stories/NeRadioSelection.stories.ts
@@ -61,7 +61,7 @@ export const Default: StoryObj<typeof NeRadioSelection> = {
       return { args }
     },
     template: `
-      <NeRadioSelection v-model="args.modelValue" :label="args.label" :options="args.options" />
+      <NeRadioSelection v-bind="args" />
     `
   })
 }
@@ -73,8 +73,7 @@ export const WithDescription: StoryObj<typeof NeRadioSelection> = {
       return { args }
     },
     template: `
-      <NeRadioSelection v-model="args.modelValue" :description="args.description" :label="args.label"
-      :options="args.options" />
+      <NeRadioSelection v-bind="args" />
     `
   }),
   args: {
@@ -89,8 +88,7 @@ export const CardPicker: StoryObj<typeof NeRadioSelection> = {
       return { args }
     },
     template: `
-      <NeRadioSelection v-model="args.modelValue" :card="args.card" :grid-style="args.gridStyle"
-      :label="args.label" :options="args.options" />
+      <NeRadioSelection v-bind="args" />
     `
   }),
   args: {
@@ -143,7 +141,7 @@ export const Disabled: StoryObj<typeof NeRadioSelection> = {
       return { args }
     },
     template: `
-      <NeRadioSelection v-model="args.modelValue" :label="args.label" :options="args.options" />
+      <NeRadioSelection v-bind="args" />
     `
   }),
   args: {
@@ -158,7 +156,7 @@ export const WithTooltip: StoryObj<typeof NeRadioSelection> = {
       return { args }
     },
     template: `
-      <NeRadioSelection v-model="args.modelValue" :label="args.label" :options="args.options">\
+      <NeRadioSelection v-bind="args">\
         <template #tooltip>\
           <NeTooltip>\
             <template #content>Tooltip</template>\

From ae71401a36a91034ee71b94113027c4af32015d0 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 10 Apr 2024 18:03:39 +0200
Subject: [PATCH 5/8] fix: search in NeCombobox considering descriptions

---
 src/components/NeCombobox.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/NeCombobox.vue b/src/components/NeCombobox.vue
index 967439a..cc105e1 100644
--- a/src/components/NeCombobox.vue
+++ b/src/components/NeCombobox.vue
@@ -96,7 +96,13 @@ const filteredOptions = computed(() => {
   }
 
   let results = allOptions.value.filter((option: NeComboboxOption) => {
-    return option.label.trim().toLowerCase().includes(query.value.trim().toLowerCase())
+    return (
+      // search in option label
+      option.label.trim().toLowerCase().includes(query.value.trim().toLowerCase()) ||
+      // search in option description
+      (option.description &&
+        option.description.trim().toLowerCase().includes(query.value.trim().toLowerCase()))
+    )
   })
 
   // user input

From 9bb1da60be994f20777eff1bd0a76d8717b49d4d Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 11 Apr 2024 10:15:59 +0200
Subject: [PATCH 6/8] fix: multiple selection in NeCombobox

---
 src/components/NeCombobox.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/NeCombobox.vue b/src/components/NeCombobox.vue
index cc105e1..5f404a3 100644
--- a/src/components/NeCombobox.vue
+++ b/src/components/NeCombobox.vue
@@ -261,10 +261,13 @@ function selectMultipleOptionsFromModelValue() {
   const selectedList: NeComboboxOption[] = []
 
   for (const selectedOption of props.modelValue as NeComboboxOption[]) {
-    const optionFound = props.options.find((option) => option.id === selectedOption.id)
+    const optionFound = allOptions.value.find((option) => option.id === selectedOption.id)
 
     if (optionFound) {
       selectedList.push(optionFound)
+    } else if (props.acceptUserInput) {
+      userInputOptions.value.push(selectedOption)
+      selectedList.push(selectedOption)
     }
   }
 
@@ -288,7 +291,7 @@ function removeFromSelection(optionToRemove: NeComboboxOption) {
   )
 }
 
-// detect clic outside to close the options list
+// detect click outside to close the options list
 onClickOutside(comboboxRef, () => onClickOutsideCombobox())
 </script>
 

From 1d12d400c83e13ee298a28cdcc71c2cacb078e08 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 11 Apr 2024 10:16:22 +0200
Subject: [PATCH 7/8] fix: type of button element in NeBadge

---
 src/components/NeBadge.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/NeBadge.vue b/src/components/NeBadge.vue
index a3ef477..7af1289 100644
--- a/src/components/NeBadge.vue
+++ b/src/components/NeBadge.vue
@@ -187,6 +187,7 @@ function onIconClick() {
     <template v-if="icon">
       <button
         v-if="iconClickable"
+        type="button"
         :class="[iconPosition == 'right' ? 'order-1' : '', iconButtonClasses, 'flex', 'rounded']"
         @click="onIconClick"
       >

From 02568f2b6011caae24653803720f0174a41223b2 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 11 Apr 2024 17:30:38 +0200
Subject: [PATCH 8/8] feat: add invertedTheme prop to NeLink

---
 src/components/NeLink.vue | 20 +++++++++++++++++++-
 stories/NeLink.stories.ts | 27 +++++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/components/NeLink.vue b/src/components/NeLink.vue
index c8cc024..347334a 100644
--- a/src/components/NeLink.vue
+++ b/src/components/NeLink.vue
@@ -2,10 +2,28 @@
   Copyright (C) 2024 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
+<script lang="ts" setup>
+defineProps({
+  // useful on inverted backgrounds (e.g. inside a tooltip)
+  invertedTheme: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const standardThemeStyle =
+  'text-primary-700 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200'
+
+const invertedThemeStyle =
+  'text-primary-300 hover:text-primary-200 dark:text-primary-700 dark:hover:text-primary-800'
+</script>
 <template>
   <a
     rel="noreferrer"
-    class="cursor-pointer font-medium text-primary-700 hover:text-primary-800 hover:underline dark:text-primary-300 dark:hover:text-primary-200"
+    :class="[
+      'cursor-pointer font-medium hover:underline',
+      invertedTheme ? invertedThemeStyle : standardThemeStyle
+    ]"
   >
     <slot />
   </a>
diff --git a/stories/NeLink.stories.ts b/stories/NeLink.stories.ts
index 91a75d9..13a42a6 100644
--- a/stories/NeLink.stories.ts
+++ b/stories/NeLink.stories.ts
@@ -8,12 +8,15 @@ const meta: Meta<typeof NeLink> = {
   title: 'Visual/NeLink',
   component: NeLink,
   tags: ['autodocs'],
-  args: {}
+  args: {
+    invertedTheme: false
+  }
 }
 export default meta
 type Story = StoryObj<typeof meta>
 
-const template = '<NeLink v-bind="args" class="text-sm">Go to Wikipedia</NeLink>'
+const template =
+  '<NeLink v-bind="args" href="https://www.wikipedia.org/" target="_blank" class="text-sm">Go to Wikipedia</NeLink>'
 
 export const Default: Story = {
   render: (args) => ({
@@ -25,3 +28,23 @@ export const Default: Story = {
   }),
   args: {}
 }
+
+const invertedThemeTemplate = `<div class="text-sm p-4 bg-gray-800 dark:bg-gray-300">
+  <p class="mb-2 text-gray-300 dark:text-gray-800">
+    Inverted theme is useful on inverted backgrounds (e.g. inside a tooltip)
+  </p>
+  <NeLink v-bind="args" href="https://www.wikipedia.org/" target="_blank">
+    Go to Wikipedia
+  </NeLink>
+</div>`
+
+export const InvertedTheme: Story = {
+  render: (args) => ({
+    components: { NeLink },
+    setup() {
+      return { args }
+    },
+    template: invertedThemeTemplate
+  }),
+  args: { invertedTheme: true }
+}