fluency-v8-components 1.4.3 → 1.4.5

package/src/components/buttons/ActionButtons.vue

@@ -4,7 +4,7 @@
       v-if="props.add"
       type="button"
       :class="[
-        'action-btn std-blue rounded-l-md',
+        'action-btn std-btn-blue rounded-l-md',
         {
           'rounded-r-md':
             !props.config &&
@@ -29,7 +29,7 @@
       v-if="props.view"
       type="button"
       :class="[
-        'action-btn std-blue',
+        'action-btn std-btn-blue',
         {
           'rounded-l-md': !props.add,
         },
@@ -55,7 +55,7 @@
       v-if="props.edit"
       type="button"
       :class="[
-        'action-btn std-blue',
+        'action-btn std-btn-blue',
         {
           'rounded-l-md': !props.add && !props.view,
         },
@@ -80,7 +80,7 @@
       v-if="props.config"
       type="button"
       :class="[
-        'action-btn std-blue',
+        'action-btn std-btn-blue',
         {
           'rounded-l-md': !props.add && !props.view && !props.edit,
         },
@@ -104,7 +104,7 @@
       v-if="props.schedule"
       type="button"
       :class="[
-        'action-btn std-blue',
+        'action-btn std-btn-blue',
         {
           'rounded-l-md':
             !props.add && !props.view && !props.edit && !props.config,
@@ -128,7 +128,7 @@
       v-if="props.play"
       type="button"
       :class="[
-        'action-btn std-green',
+        'action-btn std-btn-green',
         {
           'rounded-l-md':
             !props.add &&
@@ -152,7 +152,7 @@
       v-if="props.stop"
       type="button"
       :class="[
-        'action-btn std-red',
+        'action-btn std-btn-red',
         {
           'rounded-l-md':
             !props.add &&
@@ -176,7 +176,7 @@
       v-if="props.refresh"
       type="button"
       :class="[
-        'action-btn std-blue',
+        'action-btn std-btn-blue',
         {
           'rounded-l-md':
             !props.add &&
@@ -201,7 +201,7 @@
       v-if="props.download"
       type="button"
       :class="[
-        'action-btn std-blue',
+        'action-btn std-btn-blue',
         {
           'rounded-l-md':
             !props.add &&
@@ -227,7 +227,7 @@
       v-if="props.delete"
       type="button"
       :class="[
-        'action-btn std-red rounded-r-md',
+        'action-btn std-btn-red rounded-r-md',
         {
           'rounded-l-md':
             !props.add &&

package/src/components/buttons/DropdownButton.vue

@@ -3,10 +3,10 @@
     <div class="std-btn py-0">
       <div
         :class="[
-          'std-blue rounded-l-lg px-5 py-3 cursor-pointer',
-          { 'std-red': color === 'red' },
-          { 'std-green': color === 'green' },
-          { 'std-blue': color === 'blue' },
+          'rounded-l-lg px-5 py-3 cursor-pointer',
+          { 'std-btn-red': color === 'red' },
+          { 'std-btn-green': color === 'green' },
+          { 'std-btn-blue': color === 'blue' },
         ]"
         @click="loading ? null : emits('mainClick')"
       >
@@ -18,10 +18,10 @@
       </div>
       <MenuButton
         :class="[
-          'std-blue rounded-r-lg px-1 py-3 border-l-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50',
-          { 'std-red': color === 'red' },
-          { 'std-green': color === 'green' },
-          { 'std-blue': color === 'blue' },
+          'rounded-r-lg px-1 py-3 border-l-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50',
+          { 'std-btn-red': color === 'red' },
+          { 'std-btn-green': color === 'green' },
+          { 'std-btn-blue': color === 'blue' },
         ]"
         :disabled="secondaryButtons.length === 0 || loading"
         @click="dropdown = !dropdown"
@@ -41,9 +41,9 @@
       <MenuItems
         :class="[
           'absolute right-0 z-50 mt-0.5 w-32 origin-top-right rounded-md py-2 shadow-lg text-white max-h-96 overflow-y-auto break-all',
-          { 'bg-red-600': color === 'red' },
-          { 'bg-green-700': color === 'green' },
-          { 'bg-sky-700': color === 'blue' },
+          { 'std-red': color === 'red' },
+          { 'std-green': color === 'green' },
+          { 'std-blue': color === 'blue' },
         ]"
       >
         <MenuItem v-for="button in sortedButtons" v-slot="{ active }">
@@ -51,9 +51,9 @@
             :class="[
               active ? 'cursor-pointer' : '',
               'block px-3 py-1 text-sm leading-6',
-              { 'std-red': color === 'red' },
-              { 'std-green': color === 'green' },
-              { 'std-blue': color === 'blue' },
+              { 'std-btn-red': color === 'red' },
+              { 'std-btn-green': color === 'green' },
+              { 'std-btn-blue': color === 'blue' },
             ]"
             @click="loading ? null : emits('secondaryClick', button)"
           >

package/src/components/buttons/IconButton.vue

@@ -1,10 +1,10 @@
 <template>
   <button
     :class="[
-      'circle-btn std-blue relative',
+      'circle-btn std-btn-blue relative',
       { 'p-1.5': dense },
-      { 'std-red': color === 'red' },
-      { 'std-green': color === 'green' },
+      { 'std-btn-red': color === 'red' },
+      { 'std-btn-green': color === 'green' },
     ]"
     :disabled="disabled || loading"
     @mouseover="showTooltip"

package/src/components/buttons/ImageButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="circle-btn std-white outline outline-2 outline-slate-200 p-3 m-2 dark:std-dark"
+    class="circle-btn std-btn-white outline outline-2 outline-slate-200 p-3 m-2"
   >
     <img class="icon-xl" :src="src" />
   </button>

package/src/components/buttons/MenuButton.vue

@@ -4,11 +4,11 @@
     :class="[
       'relative',
       { 'px-3 py-1': dense },
-      { 'std-red': color === 'red' },
-      { 'std-green': color === 'green' },
-      { 'std-blue': color === 'blue' },
+      { 'std-btn-red': color === 'red' },
+      { 'std-btn-green': color === 'green' },
+      { 'std-btn-blue': color === 'blue' },
       { 'std-btn': type === 'button' },
-      { 'text-black dark:text-white': color === 'none' },
+      { 'std-white-text': color === 'none' },
       { 'cursor-not-allowed': disabled },
     ]"
   >
@@ -28,13 +28,10 @@
       <MenuItems
         :class="[
           'absolute right-0 top-full z-50 mt-0.5 rounded-lg py-2 shadow-lg max-h-96 overflow-y-auto break-all',
-          { 'bg-red-600 text-white': color === 'red' },
-          { 'bg-green-700 text-white': color === 'green' },
-          { 'bg-sky-700 text-white': color === 'blue' },
-          {
-            'bg-white dark:bg-black text-black dark:text-white':
-              color === 'none',
-          },
+          { 'std-red': color === 'red' },
+          { 'std-green': color === 'green' },
+          { 'std-blue': color === 'blue' },
+          { 'std-white': color === 'none' },
           { 'right-0': anchor === 'right' },
           { 'left-0': anchor === 'left' },
         ]"
@@ -45,11 +42,11 @@
             :class="[
               active ? 'cursor-pointer' : '',
               'block px-3 py-1 text-sm leading-6 min-w-44',
-              { 'std-red': color === 'red' },
-              { 'std-green': color === 'green' },
-              { 'std-blue': color === 'blue' },
+              { 'std-btn-red': color === 'red' },
+              { 'std-btn-green': color === 'green' },
+              { 'std-btn-blue': color === 'blue' },
               {
-                'std-white dark:std-dark': active && color === 'none',
+                'std-btn-white': active && color === 'none',
               },
             ]"
             @click="secondaryClick(button)"

package/src/components/buttons/TextButton.vue

@@ -1,10 +1,12 @@
 <template>
   <button
     :class="[
-      'std-btn std-blue',
+      'std-btn',
       { 'px-3 py-1': dense },
-      { 'std-red': color === 'red' },
-      { 'std-green': color === 'green' },
+      { 'std-btn-red': color === 'red' },
+      { 'std-btn-green': color === 'green' },
+      { 'std-btn-blue': color === 'blue' },
+      { 'cursor-not-allowed': disabled || loading },
     ]"
     :disabled="disabled || loading"
   >

package/src/components/charts/WorkflowChart.vue

@@ -39,7 +39,7 @@
             <div class="row">
               <GreyInput readonly :value="slideoutData.span_data.response_id" />
               <LinkIcon
-                class="icon-lg cursor-pointer icon-skyblue hover:opacity-75 m-1"
+                class="icon-lg cursor-pointer icon-blue hover:opacity-75 m-1"
                 @click="routeToResponse(slideoutData.span_data.response_id)"
               />
             </div>

package/src/components/common/AutoCompleteSearchBar.vue

@@ -8,7 +8,7 @@
             placeholder="Search"
             @input="onChange"
             @keyup.enter="emits('search', newVal)"
-            class="w-full bg-white outline-1 dark:dark-bg py-2 px-2"
+            class="input-block w-full outline-1 py-2 px-2"
           />
           <transition
             enter-active-class="transition duration-100 ease-out"
@@ -20,7 +20,7 @@
           >
             <ComboboxOptions
               v-if="dict.length"
-              class="absolute z-10 max-h-56 w-full overflow-auto bg-slate-100 dark:dark-bg p-1 text-base shadow-lg ring-1 ring-black/5 sm:text-md"
+              class="input-dropdown text-base shadow-lg sm:text-md"
             >
               <ComboboxOption
                 v-for="dict in localDict"
@@ -28,7 +28,7 @@
                 :value="`${curr} ${dict}`"
                 v-slot="{ active }"
               >
-                <li :class="{ 'bg-gray-300 dark:dark-bg-hover': active }">
+                <li :class="{ 'std-blue text-white': active }">
                   {{ dict }}
                 </li>
               </ComboboxOption>
@@ -37,8 +37,8 @@
         </Combobox>
       </div>
 
-      <TextButton class="ml-4" text="Search" @click="emits('search', newVal)">
-        <MagnifyingGlassIcon class="w-5 h-5 mr-1" />
+      <TextButton class="ml-2" text="Search" @click="emits('search', newVal)">
+        <MagnifyingGlassIcon class="icon-md mr-1" />
       </TextButton>
 
       <slot name="right" />

package/src/components/common/Breadcrumb.vue

@@ -4,7 +4,7 @@
       <li>
         <div>
           <span
-            class="hover:text-gray-400 cursor-pointer"
+            class="hover:opacity-50 cursor-pointer"
             @click="emits('home')"
           >
             <HomeIcon class="icon-md flex-shrink-0" aria-hidden="true" />
@@ -14,7 +14,7 @@
       <li v-for="(page, i) in pages" :key="page.name">
         <div class="flex items-center">
           <svg
-            class="icon-md flex-shrink-0 dark:text-gray-300"
+            class="icon-md flex-shrink-0"
             fill="currentColor"
             viewBox="0 0 20 20"
             aria-hidden="true"
@@ -23,7 +23,7 @@
           </svg>
           <span
             :href="page.path"
-            class="ml-4 text-sm font-medium hover:text-gray-400 cursor-pointer"
+            class="ml-4 text-sm font-medium hover:opacity-50 cursor-pointer"
             @click="emits('navigate', page, i)"
           >
             {{ page.name }}

package/src/components/common/ButtonToggle.vue

@@ -4,8 +4,8 @@
       v-for="(option, i) in options"
       type="button"
       :class="[
-        'button-toggle bg-gray-200 text-black',
-        { 'text-gray-500 opacity-75': option.value !== inputValue },
+        'button-toggle std-white dark:std-dark',
+        { 'std-disabled-text opacity-60': option.value !== inputValue },
         { 'rounded-l-lg': i === 0 },
         { 'rounded-r-lg': i === options.length - 1 },
       ]"

package/src/components/common/Card.vue

@@ -1,31 +1,31 @@
 <template>
   <li
     :class="[
-      'overflow-hidden rounded-xl border border-gray-300 dark:border-neutral-600',
+      'overflow-hidden rounded-xl border std-white-border',
       {
-        'bg-green-300 dark:bg-green-900 ': color === 'green',
+        'std-green-hover-light': color === 'green',
       },
       {
-        'bg-red-400 dark:bg-red-800 ': color === 'red',
+        'std-red-hover-light': color === 'red',
       },
       {
-        'bg-sky-200 dark:bg-sky-800': color === 'blue',
+        'std-blue-hover-light': color === 'blue',
       },
       {
-        'bg-white dark:dark-bg': color === 'default',
+        'white-bg dark:dark-bg': color === 'default',
       },
       {
         'cursor-pointer': clickable,
       },
       {
-        'hover:bg-green-500 dark:hover:bg-green-700':
+        'hover:std-green-hover-light':
           clickable && color === 'green',
       },
       {
-        'hover:bg-red-600 dark:hover:bg-red-700': clickable && color === 'red',
+        'hover:std-red-hover-light': clickable && color === 'red',
       },
       {
-        'hover:bg-sky-300 dark:hover:bg-sky-700': clickable && color === 'blue',
+        'hover:std-blue-hover-light': clickable && color === 'blue',
       },
       {
         'hover:white-bg-hover hover:dark:dark-bg-hover':
@@ -36,7 +36,7 @@
   >
     <div
       v-if="title || description"
-      class="flex items-center gap-x-4 border-b border-gray-200 dark:border-neutral-600 px-6 py-5"
+      class="flex items-center gap-x-4 border-b std-white-border px-6 py-5"
     >
       <div class="font-medium leading-6 max-w-full">
         <div class="row gap-x-3 items-center truncate">
@@ -53,7 +53,7 @@
         class="relative ml-auto"
       >
         <MenuButton
-          class="-m-2.5 block p-2.5 text-gray-400 hover:text-gray-500"
+          class="-m-2.5 block p-2.5 hover:opacity-50"
           @click="($event) => $event.stopPropagation()"
         >
           <span class="sr-only">Open options</span>
@@ -68,13 +68,13 @@
           leave-to-class="transform opacity-0 scale-95"
         >
           <MenuItems
-            class="absolute right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-hidden bg-white dark:bg-black"
+            class="input-dropdown std-white w-32! right-0 origin-top-right py-2 shadow-lg"
           >
             <MenuItem v-for="menuItem in menuItems" v-slot="{ active }">
               <div
                 :class="[
-                  active ? 'cursor-pointer bg-gray-50 dark:bg-gray-800' : '',
-                  'block px-3 py-1 text-sm leading-6',
+                  { 'std-white-hover': active },
+                  'block px-3 py-1 text-sm leading-6 cursor-pointer',
                 ]"
                 @click.stop="emits('menuClick', menuItem)"
               >
@@ -86,7 +86,7 @@
       </Menu>
     </div>
     <dl
-      class="-my-3 divide-y divide-gray-200 dark:divide-neutral-600 px-6 py-4 text-sm leading-6"
+      class="-my-3 divide-y divide-gray-300 dark:divide-neutral-600 px-6 py-4 text-sm leading-6"
     >
       <slot name="content" />
     </dl>

package/src/components/common/Carousel.vue

@@ -5,7 +5,7 @@
     <button
       v-if="size > 1"
       type="button"
-      class="absolute top-0 start-0 z-30 flex items-center justify-center h-full cursor-pointer group focus:outline-hidden"
+      class="slider-button top-0 start-0"
       @click="slideLeft"
     >
       <ChevronLeftIcon class="icon-lg" />
@@ -13,7 +13,7 @@
     <button
       v-if="size > 1"
       type="button"
-      class="absolute top-0 end-0 z-30 flex items-center justify-center h-full cursor-pointer group focus:outline-hidden"
+      class="slider-button top-0 end-0"
       @click="slideRight"
     >
       <ChevronRightIcon class="icon-lg" />
@@ -26,10 +26,10 @@
         v-for="(a, i) in sizeArray"
         type="button"
         :class="[
-          'w-3 h-3 rounded-full',
+          'icon-xs rounded-full',
           current === i
-            ? 'bg-gray-400 dark:bg-gray-300'
-            : 'bg-gray-200 dark:bg-gray-600',
+            ? 'slider-active'
+            : 'slider-inactive',
         ]"
         @click="emits('update', i)"
       />

package/src/components/common/EditorHeading.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-gray-400 pl-3 py-1 sm:flex sm:items-center sm:justify-between content-center dark:bg-neutral-600 dark:text-white"
+    class="min-h-11 pl-3 py-1 sm:flex sm:items-center sm:justify-between content-center std-light dark:std-dark"
   >
     <slot name="title" />
     <div class="mt-3 flex sm:mt-0">

package/src/components/common/Error.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    :class="['std-red-text', { 'row justify-center': center }]"
+  >
+    <span>{{ error }}</span>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  error: {
+    type: String,
+    required: true
+  },
+  center: {
+    type: Boolean,
+    default: false
+  },
+});
+</script>

package/src/components/common/EventList.vue

@@ -5,7 +5,7 @@
   >
     <li
       v-for="event in events"
-      class="relative flex justify-between hover:bg-gray-500 cursor-pointer"
+      class="relative flex justify-between hover:white-bg-hover hover:dark:dark-bg-hover py-1"
       @click="emits('copy', event)"
     >
       <p class="font-light leading-5 truncate">
@@ -13,7 +13,7 @@
       </p>
       <div class="flex items-center">
         <ClipboardIcon
-          class="icon-md flex-none text-gray-400"
+          class="icon-md flex-none"
           aria-hidden="true"
         />
       </div>

package/src/components/common/Facet.vue

@@ -29,7 +29,7 @@
       <span class="relative isolate inline-flex rounded-md shadow-xs">
         <button
           type="button"
-          class="action-btn std-red rounded-l-md"
+          class="action-btn std-btn-red rounded-l-md"
           @click="emits('reset')"
           @mouseover="mouseoverTooltip(true, 'Reset Facet')"
           @mouseout="mouseoverTooltip(false)"
@@ -38,7 +38,7 @@
         </button>
         <button
           type="button"
-          class="action-btn std-blue"
+          class="action-btn std-btn-blue"
           @click="emits('edit')"
           @mouseover="mouseoverTooltip(true, 'Edit Facet')"
           @mouseout="mouseoverTooltip(false)"
@@ -47,7 +47,7 @@
         </button>
         <button
           type="button"
-          class="action-btn std-blue"
+          class="action-btn std-btn-blue"
           @click="emits('save')"
           @mouseover="mouseoverTooltip(true, 'Save Facet')"
           @mouseout="mouseoverTooltip(false)"
@@ -65,7 +65,7 @@
         </button-->
         <button
           type="button"
-          class="action-btn std-blue rounded-r-md"
+          class="action-btn std-btn-blue rounded-r-md"
           @click="emits('search')"
           @mouseover="mouseoverTooltip(true, 'Search')"
           @mouseout="mouseoverTooltip(false)"

package/src/components/common/Feed.vue

@@ -7,10 +7,10 @@
           'absolute left-0 top-0 flex w-6 justify-center',
         ]"
       >
-        <div class="w-px bg-gray-200" />
+        <div class="w-px slider-active" />
       </div>
       <div
-        class="relative flex icon-lg flex-none items-center justify-center bg-white dark:bg-black"
+        class="relative flex icon-lg flex-none items-center justify-center std-white"
       >
         <CheckCircleIcon
           v-if="activity.action === 'resolve'"
@@ -24,20 +24,20 @@
         />
         <div
           v-else
-          class="h-1.5 w-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300"
+          class="h-2 w-2 rounded-full std-white-reverse ring-1 ring-gray-300"
         />
       </div>
       <p
-        class="flex-auto py-0.5 text-xs leading-5 text-gray-500 dark:text-gray-400"
+        class="flex-auto py-0.5 text-xs leading-5"
       >
-        <span class="font-medium text-gray-900 dark:text-gray-200">{{
-          activity.source
-        }}</span>
+        <span class="font-bold">
+          {{ activity.source }}
+        </span>
         {{ activity.action }} the alert.
       </p>
       <time
         :datetime="activity.timestamp"
-        class="flex-none py-0.5 text-xs leading-5 text-gray-500 dark:text-gray-400"
+        class="flex-none py-0.5 text-xs leading-5 font-light"
       >
         {{ timeFromNow(activity.timestamp) }}
       </time>

package/src/components/common/Loading.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="flex">
     <div
-      class="animate-ping rounded-full w-8 h-8 relative -left-3 -top-3 bg-indigo-600"
+      class="loading-animate"
     ></div>
     <div
-      class="rounded-full w-8 h-8 relative -left-11 -top-3 bg-teal-500"
+      class="loading-circle"
     ></div>
     <div class="loading">{{ text }}</div>
   </div>

package/src/components/common/LoadingDots.vue

@@ -2,11 +2,11 @@
   <div class="row gap-x-1">
     <span class="sr-only">Loading...</span>
     <div
-      class="icon-md bg-indigo-600 rounded-full animate-bounce [animation-delay:-0.3s]"
+      class="loading-bounce [animation-delay:-0.3s]"
     ></div>
     <div
-      class="icon-md bg-indigo-600 rounded-full animate-bounce [animation-delay:-0.15s]"
+      class="loading-bounce [animation-delay:-0.15s]"
     ></div>
-    <div class="icon-md bg-indigo-600 rounded-full animate-bounce"></div>
+    <div class="loading-bounce"></div>
   </div>
 </template>

package/src/components/common/Pagination.vue

@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="flex items-center bg-neutral-200 dark:dark-bg justify-between px-4 py-3 sm:px-6 rounded-lg"
+    class="std-table-footer"
     aria-label="Pagination"
   >
     <div class="hidden sm:block">
@@ -28,27 +28,26 @@
         aria-label="Pagination"
       >
         <a
-          class="relative inline-flex items-center rounded-l-md px-2 py-2 ring-1 ring-inset ring-gray-300 std-white dark:std-dark"
+          class="std-table-footer-btn rounded-l-md std-btn-white cursor-pointer"
           @click="emit('previous')"
         >
           <span class="sr-only">Previous</span>
           <ChevronLeftIcon class="icon-md" aria-hidden="true" />
         </a>
-        <!-- Current: "z-10 bg-indigo-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600", Default: "text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0" -->
         <a
           v-for="(page, index) in pages"
           :class="[
-            'relative inline-flex items-center px-4 py-1 ring-1 ring-inset ring-gray-300',
+            'std-table-footer-btn px-4 py-1 cursor-pointer',
             startPos / pageSize + 1 === page
-              ? 'std-blue text-white'
-              : 'std-white dark:std-dark',
+              ? 'std-btn-blue text-white'
+              : 'std-btn-white',
           ]"
           @click="page !== '...' ? emit('navtopage', page) : null"
         >
           {{ page }}
         </a>
         <a
-          class="relative inline-flex items-center rounded-r-md px-2 py-2 ring-1 ring-inset ring-gray-300 std-white dark:std-dark"
+          class="std-table-footer-btn rounded-r-md std-btn-white cursor-pointer"
           @click="emit('next')"
         >
           <span class="sr-only">Previous</span>