fluency-v8-components 1.4.3 → 1.4.5

package/src/components/form/GreySelect.vue

@@ -5,34 +5,36 @@
         v-if="selected"
         :class="[
           'input-block sm:text-sm sm:leading-6',
-          error ? 'ring-red-600 ' : '',
-          readonly ? 'disabled' : '',
+          { 'std-red-ring': error },
+          { 'disabled': readonly },
         ]"
+        :disabled="readonly"
       >
         <span class="flex items-center pr-10">
           <span class="ml-3 block truncate">{{ selected.label }}</span>
         </span>
         <span
-          class="pointer-events-none absolute inset-y-0 right-2 flex items-center"
+          class="pointer-events-none input-icon"
         >
-          <ChevronUpDownIcon class="icon-md text-gray-400" aria-hidden="true" />
+          <ChevronUpDownIcon class="icon-md" aria-hidden="true" />
         </span>
       </ListboxButton>
       <ListboxButton
         v-else
         :class="[
           'input-block sm:text-sm sm:leading-6',
-          error ? 'ring-red-600 ' : '',
-          readonly ? 'disabled' : '',
+          { 'std-red-ring': error },
+          { 'disabled': readonly },
         ]"
+        :disabled="readonly"
       >
         <span class="flex items-center pr-10">
           <span class="ml-3 block truncate">{{ placeholder }}</span>
         </span>
         <span
-          class="pointer-events-none absolute inset-y-0 right-2 flex items-center"
+          class="pointer-events-none input-icon"
         >
-          <ChevronUpDownIcon class="icon-md text-gray-400" aria-hidden="true" />
+          <ChevronUpDownIcon class="icon-md" aria-hidden="true" />
         </span>
       </ListboxButton>
 
@@ -43,7 +45,7 @@
         leave-to-class="opacity-0"
       >
         <ListboxOptions
-          class="input-block absolute z-50 mt-1 max-h-56 w-full overflow-auto rounded-md p-1 text-sm sm:text-xs"
+          class="input-block input-dropdown text-sm sm:text-xs"
         >
           <ListboxOption
             as="template"
@@ -54,8 +56,8 @@
           >
             <li
               :class="[
-                active ? 'bg-indigo-600 text-white' : '',
-                'relative cursor-default select-none py-2',
+                { 'std-blue text-white': active },
+                'input-dropdown-item',
               ]"
             >
               <div
@@ -66,11 +68,12 @@
               >
                 <span
                   :class="[
-                    selected ? 'font-semibold' : 'font-normal',
-                    'ml-3 block truncate',
+                    { 'font-semibold': selected },
+                    'input-dropdown-label',
                   ]"
-                  >{{ option.label }}</span
                 >
+                  {{ option.label }}
+                </span>
               </div>
               <span
                 v-if="selected && selected.value === option.value"
@@ -87,7 +90,7 @@
       </transition>
     </div>
   </Listbox>
-  <div v-if="error" class="text-red-600 text-sm">
+  <div v-if="error" class="std-red-text text-sm">
     {{ error }}
   </div>
 </template>

package/src/components/form/GreySelectInput.vue

@@ -1,20 +1,18 @@
 <template>
   <Combobox as="div" v-bind="$attrs">
-    <div class="relative">
+    <div class="relative input-block">
       <input
         type="text"
         :class="[
-          'pl-3 input-block',
-          error ? 'ring-red-600 ' : '',
-          readonly ? 'disabled' : '',
+          'pl-3 pr-8 w-full bg-transparent border-0 outline-none ring-0 focus:outline-none focus:ring-0',
+          { 'std-red-ring': error },
+          { 'disabled': readonly },
         ]"
         v-model.trim="inputValue"
         @input="setModelValue($event.target)"
       />
-      <ComboboxButton
-        class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-hidden"
-      >
-        <ChevronUpDownIcon class="icon-md text-gray-400" aria-hidden="true" />
+      <ComboboxButton class="input-icon focus:outline-hidden">
+        <ChevronUpDownIcon class="icon-md" aria-hidden="true" />
       </ComboboxButton>
 
       <transition
@@ -24,7 +22,7 @@
         leave-to-class="opacity-0"
       >
         <ComboboxOptions
-          class="input-block absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-md p-1 text-base sm:text-sm"
+          class="input-block input-dropdown text-base sm:text-sm"
         >
           <ComboboxOption
             as="template"
@@ -36,12 +34,12 @@
           >
             <li
               :class="[
-                active ? 'px-1 bg-indigo-600 text-white' : '',
-                'relative cursor-default select-none py-2 pl-3 pr-9',
+                { 'std-blue text-white': active },
+                'input-dropdown-item pl-3',
               ]"
             >
-              <div class="flex items-center">
-                <span class="'ml-3 block truncate">{{ option.label }}</span>
+              <div class="flex items-center pr-10">
+                <span class="input-dropdown-label">{{ option.label }}</span>
               </div>
             </li>
           </ComboboxOption>
@@ -49,7 +47,7 @@
       </transition>
     </div>
   </Combobox>
-  <div v-if="error" class="text-red-600 text-sm">
+  <div v-if="error" class="std-red-text text-sm">
     {{ error }}
   </div>
 </template>

package/src/components/form/GreySelectInputMultiple.vue

@@ -5,19 +5,16 @@
     multiple
     :class="[
       'input-block py-0 relative',
-      error ? 'ring-red-600 ' : '',
-      readonly ? 'disabled' : '',
     ]"
     @update:model-value="updateSelected"
   >
     <div class="relative w-full rounded-lg text-left min-h-9">
       <div
-        class="flex flex-auto flex-wrap"
-        :class="{ 'pb-2': selected.length > 0 }"
+        class="flex flex-auto flex-wrap py-1"
       >
         <div
           v-for="val in selected"
-          class="flex items-center ml-2 select-chip mt-2"
+          class="flex items-center ml-2 select-chip my-1"
         >
           <div class="text-xs font-normal leading-none max-w-full flex-initial">
             {{ val.label }}
@@ -35,7 +32,7 @@
       </div>
       <ComboboxInput
         v-if="allowInput"
-        class="z-1 w-full border-none pr-10 text-sm bg-transparent focus:ring-0"
+        class="z-1 pl-3 py-2 pr-10 w-full text-sm bg-transparent border-0 outline-none ring-0 focus:outline-none focus:ring-0"
         :displayValue="() => query"
         :disabled="readonly"
         @change="query = $event.target.value"
@@ -51,10 +48,10 @@
         </span>
       </ComboboxButton>
       <ComboboxButton
-        class="absolute inset-y-0 right-0 flex items-center pr-2"
+        class="input-icon focus:outline-hidden"
         :disabled="readonly"
       >
-        <ChevronUpDownIcon class="icon-md text-gray-400" aria-hidden="true" />
+        <ChevronUpDownIcon class="icon-md icon-gray" aria-hidden="true" />
       </ComboboxButton>
     </div>
     <TransitionRoot
@@ -64,7 +61,7 @@
       @after-leave="query = ''"
     >
       <ComboboxOptions
-        class="input-block absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-md p-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
+        class="input-block input-dropdown text-base sm:text-sm"
       >
         <div
           v-if="filteredOptions.length === 0 && query !== ''"
@@ -82,19 +79,19 @@
         >
           <li
             :class="[
-              active ? 'bg-indigo-600 text-white' : '',
-              'relative cursor-default select-none py-2 pl-3 pr-9',
+              { 'std-blue text-white': active },
+              'input-dropdown-item pr-10',
             ]"
           >
             <span
-              class="block truncate"
+              class="input-dropdown-label"
               :class="{ 'font-semibold': selected, 'font-normal': !selected }"
             >
               {{ option.label }}
             </span>
             <span
               v-if="selected"
-              class="text-white absolute inset-y-0 right-1 flex items-center pr-4,"
+              class="input-icon"
             >
               <CheckIcon class="icon-md" aria-hidden="true" />
             </span>
@@ -103,7 +100,7 @@
       </ComboboxOptions>
     </TransitionRoot>
   </Combobox>
-  <div v-if="error" class="text-red-600 text-sm">
+  <div v-if="error" class="std-red-text text-sm">
     {{ error }}
   </div>
 </template>

package/src/components/form/GreyTel.vue

@@ -4,13 +4,13 @@
     type="tel"
     :class="[
       'input-block',
-      error ? 'ring-red-600 ' : '',
-      readonly ? 'disabled' : '',
+      { 'std-red-ring': error },
+      { 'disabled': readonly },
     ]"
     placeholder="(xxx)-xxx-xxxx"
     @input="onChange"
   />
-  <div v-if="error" class="text-red-600 text-sm">
+  <div v-if="error" class="std-red-text text-sm">
     {{ error }}
   </div>
 </template>

package/src/components/form/HamburgerItem.vue

@@ -3,7 +3,7 @@
     :class="[
       'cursor-pointer input-block my-2 px-5 py-1 rounded-lg relative',
       draggable ? `draggable${index} select-none` : '',
-      'hover:bg-neutral-200 dark:hover:bg-neutral-600',
+      'hover:white-bg-hover dark:hover:dark-bg-hover',
     ]"
   >
     <span class="flex items-center">

package/src/components/form/KeyValueEntry.vue

@@ -32,7 +32,7 @@
       </tr>
     </template>
   </Table>
-  <div v-if="error" class="text-red-600 text-sm">
+  <div v-if="error" class="std-red-text text-sm">
     {{ error }}
   </div>
 </template>

package/src/components/form/RadioInput.vue

@@ -2,8 +2,8 @@
   <input
     type="radio"
     :class="[
-      'icon text-indigo-600 focus:ring-indigo-600',
-      $attrs.readonly ? 'disabled' : '',
+      'icon std-blue-text focus:std-blue-ring',
+      { 'disabled': $attrs.readonly },
     ]"
     :value="radioValue"
     :checked="radioValue === $attrs.modelValue"

package/src/components/form/UploadFile.vue

@@ -10,7 +10,7 @@
   >
     <div class="mt-2 sm:col-span-2 sm:mt-0">
       <div
-        class="flex justify-center rounded-lg border border-dashed px-6 py-10 border-gray-400 dark:border-white"
+        class="flex justify-center rounded-lg border-2 border-dashed px-6 py-10 std-white-border"
       >
         <div class="text-center">
           <div class="mt-4 flex text-sm leading-6">

package/src/components/icons/PlugOffIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    height="20px"
+    viewBox="0 0 24 24"
+    width="20px"
+    fill="#ef4444"
+  >
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path
+      d="M18 14.49V9c0-1-1.01-2.01-2-2V3h-2v4h-4V3H8v2.48l9.51 9.5.49-.49zm-1.76 1.77L7.2 7.2l-.01.01L3.98 4 2.71 5.25l3.36 3.36C6.04 8.74 6 8.87 6 9v5.48L9.5 18v3h5v-3l.48-.48L19.45 22l1.26-1.28-4.47-4.46z"
+    />
+  </svg>
+</template>

package/src/components/icons/PlugOnIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    height="20px"
+    viewBox="0 0 24 24"
+    width="20px"
+    fill="#16a34a"
+  >
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+      d="M16.01 7L16 3h-2v4h-4V3H8v4h-.01C7 6.99 6 7.99 6 8.99v5.49L9.5 18v3h5v-3l3.5-3.51v-5.5c0-1-1-2-1.99-1.99z"
+    />
+  </svg>
+</template>

package/src/components/index.js

@@ -20,6 +20,15 @@ export { default as UploadFile } from "./form/UploadFile.vue";
 export { default as KeyValueEntry } from "./form/KeyValueEntry.vue";
 export { default as Editor } from "./form/Editor.vue";
 
+// icons
+export { default as AiIcon } from "./icons/AiIcon.vue";
+export { default as GithubIcon } from "./icons/GithubIcon.vue";
+export { default as HighPriorityIcon } from "./icons/HighPriorityIcon.vue";
+export { default as PlugOnIcon } from "./icons/PlugOnIcon.vue";
+export { default as PlugOffIcon } from "./icons/PlugOffIcon.vue";
+export { default as PowerOffIcon } from "./icons/PowerOffIcon.vue";
+export { default as SaveIcon } from "./icons/SaveIcon.vue";
+
 // notify and dialogs
 export { default as ConfirmDialog } from "./dialogs/ConfirmDialog.vue";
 export { default as CopyDialog } from "./dialogs/CopyDialog.vue";
@@ -33,6 +42,7 @@ export { default as Wizard } from "./dialogs/Wizard.vue";
 export { default as ResetPasswordDialog } from "./dialogs/ResetPasswordDialog.vue";
 export { default as DownloadDialog } from "./dialogs/DownloadDialog.vue";
 export { default as PopupEditor } from "./dialogs/PopupEditor.vue";
+export { default as InfoDialog } from "./dialogs/InfoDialog.vue";
 
 // Buttons
 export { default as ActionButtons } from "./buttons/ActionButtons.vue";
@@ -53,6 +63,7 @@ export { default as ScoreLevel } from "./status/ScoreLevel.vue";
 export { default as Status } from "./status/Status.vue";
 
 // commons
+export { default as Error } from "./common/Error.vue";
 export { default as AutoRefreshButton } from "./common/AutoRefreshButton.vue";
 export { default as AutoCompleteSearchBar } from "./common/AutoCompleteSearchBar.vue";
 export { default as Breadcrumb } from "./common/Breadcrumb.vue";
@@ -95,13 +106,6 @@ export { default as Sort } from "./common/Sort.vue";
 export { default as Flag } from "./common/Flag.vue";
 export { default as ThreeHomePanel } from "./common/ThreeHomePanel.vue";
 
-// icons
-export { default as AiIcon } from "./icons/AiIcon.vue";
-export { default as GithubIcon } from "./icons/GithubIcon.vue";
-export { default as HighPriorityIcon } from "./icons/HighPriorityIcon.vue";
-export { default as PowerOffIcon } from "./icons/PowerOffIcon.vue";
-export { default as SaveIcon } from "./icons/SaveIcon.vue";
-
 // charts
 export { default as AlertChart } from "./charts/AlertChart.vue";
 export { default as CronChart } from "./charts/CronChart.vue";

package/src/components/menu/DialogMenu.vue

@@ -10,10 +10,10 @@
     <DialogPanel
       class="fixed top-8 left-0 z-50 w-80 px-2 py-6 sm:px-6 sm:top-2 sm:w-full sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
     >
-      <div class="flex items-center justify-end">
+      <div class="flex items-center">
         <button
           type="button"
-          class="-m-2.5 rounded-md p-2.5"
+          class="rounded-md p-2.5"
           @click="emits('close')"
         >
           <span class="sr-only">Close menu</span>
@@ -21,7 +21,7 @@
         </button>
       </div>
       <div
-        class="mt-6 flow-root white-bg text-gray-700 dark:bg-black dark:text-gray-300 rounded-3xl p-3"
+        class="mt-6 flow-root std-white std-white-text rounded-3xl p-3"
       >
         <div class="-my-6 divide-y divide-gray-500/10">
           <div class="space-y-2 py-6">
@@ -53,7 +53,7 @@
                       :class="[
                         'text-sm font-medium',
                         props.currentRoute === child.route
-                          ? 'font-semibold text-slate-900 dark:text-slate-100'
+                          ? 'font-semibold'
                           : 'hover:font-bold',
                       ]"
                       @click="emits('close')"

package/src/components/menu/GrandChild.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="absolute top-0 z-50 w-44 rounded-3xl shadow-lg ring-1 ring-gray-900/5 left-full white-bg text-gray-700 dark:bg-black dark:text-gray-300"
+    class="absolute top-0 z-50 w-44 rounded-3xl shadow-lg left-full std-white std-white-text"
   >
     <router-link
       v-for="grandchild in children"
@@ -12,10 +12,8 @@
     >
       <div
         :class="[
-          'rounded-lg m-2 p-3 text-sm leading-6',
-          props.currentRoute === grandchild.route
-            ? 'bg-slate-300 dark:bg-slate-700'
-            : 'hover:bg-gray-200 dark:hover:bg-neutral-700',
+          'rounded-lg m-2 p-3 text-sm leading-6 hover:white-bg-hover hover:dark:dark-bg-hover',
+          { 'white-bg-hover dark:dark-bg-hover': props.currentRoute === grandchild.route },
         ]"
       >
         {{ grandchild.name }}

package/src/components/menu/GridMenu.vue

@@ -1,12 +1,12 @@
 <template>
   <Combobox
     as="div"
-    class="py-1 relative"
+    class="std-white-border relative rounded-sm border-2 my-1 focus-within:ring23 focus-within:std-blue-ring focus-within:std-blue-border"
     v-model="selected"
     @update:model-value="emits('update', $event)"
   >
     <ComboboxInput
-      class="w-full border-2 text-sm bg-transparent p-1 px-2 pr-4 focus:ring-0"
+      class="w-full text-sm bg-transparent px-2 border-0 outline-none focus:outline-none focus:ring-0"
       @change="query = $event.target.value"
       :displayValue="(option) => option.label"
     />
@@ -20,7 +20,7 @@
       @after-leave="query = ''"
     >
       <ComboboxOptions
-        class="absolute z-50 mt-1 max-h-96 w-full overflow-auto p-1 text-base text-sm white-bg text-gray-700 dark:bg-black dark:text-gray-300"
+        class="input-dropdown max-h-96! text-base text-sm std-white std-white-text"
       >
         <ComboboxOption
           as="template"
@@ -31,8 +31,8 @@
         >
           <li
             :class="[
-              active ? 'bg-indigo-600 text-white' : '',
-              'relative cursor-default select-none py-2 pl-8 pr-3',
+              { 'std-blue text-white': active },
+              'input-dropdown-item pl-8 pr-3',
             ]"
           >
             <span

package/src/components/menu/MenuAvatar.vue

@@ -1,7 +1,7 @@
 <template>
   <Menu as="div" class="relative ml-auto mt-1.5">
     <MenuButton
-      class="rounded-full ring-2 w-7 h-7 ring-black dark:ring-white text-sm"
+      class="rounded-full ring-2 icon-lg text-sm"
     >
       {{ initials }}
     </MenuButton>
@@ -14,7 +14,7 @@
       leave-to-class="transform opacity-0 scale-95"
     >
       <MenuItems
-        class="absolute right-0 top-full z-50 mt-3 w-44 overflow-hidden rounded-3xl shadow-lg ring-1 ring-gray-900/5"
+        class="input-dropdown right-0 top-full mt-3 w-44 rounded-3xl shadow-lg"
       >
         <MenuItem
           v-for="child in userChildren"
@@ -22,14 +22,14 @@
           v-slot="{ close }"
         >
           <div
-            class="py-1 px-2 white-bg text-gray-700 dark:bg-black dark:text-gray-300"
+            class="py-1 px-2 std-white std-white-text"
           >
             <router-link
               :to="{ name: child.route, params: child.params }"
               @click="close"
             >
               <div
-                class="rounded-lg p-4 text-sm leading-6 hover:bg-gray-200 dark:hover:bg-neutral-700"
+                class="rounded-lg p-4 text-sm leading-6 hover:white-bg-hover hover:dark:dark-bg-hover"
               >
                 {{ child.name }}
               </div>

package/src/components/menu/MenuDesktop.vue

@@ -23,7 +23,7 @@
             v-slot="{ close, active }"
           >
             <div
-              class="py-1 px-2 white-bg text-gray-700 dark:bg-black dark:text-gray-300"
+              class="py-1 px-2 std-white std-white-text"
             >
               <router-link
                 v-if="!child.children"
@@ -32,10 +32,8 @@
               >
                 <div
                   :class="[
-                    'rounded-lg p-4 text-sm leading-6',
-                    currentRoute === child.route
-                      ? 'bg-slate-300 dark:bg-slate-700'
-                      : 'hover:bg-gray-200 dark:hover:bg-neutral-700',
+                    'rounded-lg p-4 text-sm leading-6 hover:white-bg-hover hover:dark:dark-bg-hover',
+                    { 'white-bg-hover dark:dark-bg-hover': currentRoute === child.route },
                   ]"
                 >
                   {{ child.name }}
@@ -43,7 +41,7 @@
               </router-link>
               <div v-else>
                 <div
-                  class="relative rounded-lg p-4 text-sm leading-6 hover:bg-gray-200 dark:hover:bg-neutral-700"
+                  class="relative rounded-lg p-4 text-sm leading-6 hover:white-bg-hover hover:dark:dark-bg-hover"
                 >
                   <span class="relative row text-sm">
                     {{ child.name }}

package/src/components/notifications/Notify.vue

@@ -4,7 +4,7 @@
     <Dialog
       v-if="isDialog"
       as="div"
-      :class="success ? 'bg-green-50' : 'bg-red-50'"
+      :class="success ? 'std-green-light' : 'std-red-light'"
       class="rounded-md p-4 fixed bottom-5 z-50"
       style="min-width: 75%; left: 50%; transform: translateX(-50%)"
       @close="closeModal"
@@ -13,20 +13,22 @@
         <div class="flex-shrink-0">
           <CheckCircleIcon
             v-if="success"
-            class="icon-md text-green-400"
+            class="icon-md icon-green"
             aria-hidden="true"
           />
-          <XCircleIcon v-else class="icon-md text-red-400" aria-hidden="true" />
+          <XCircleIcon v-else class="icon-md icon-red" aria-hidden="true" />
         </div>
         <div class="ml-3">
-          <h3 v-if="success" class="text-sm font-medium text-green-800">
+          <h3 v-if="success" class="text-sm font-medium std-green-text">
             {{ title }}
           </h3>
-          <h3 v-else class="text-sm font-medium text-red-800">{{ title }}</h3>
-          <div v-if="success" class="mt-2 text-sm text-green-700">
+          <h3 v-else class="text-sm font-medium std-red-text">
+            {{ title }}
+          </h3>
+          <div v-if="success" class="mt-2 text-sm std-green-text">
             <p>{{ msg }}</p>
           </div>
-          <div v-else class="mt-2 text-sm text-red-700">
+          <div v-else class="mt-2 text-sm std-red-text">
             <p>{{ msg }}</p>
           </div>
         </div>
@@ -41,28 +43,30 @@
     </Dialog>
     <div
       v-else
-      :class="success ? 'bg-green-50' : 'bg-red-50'"
-      class="rounded-md p-4 fixed bottom-5 z-50"
+      :class="success ? 'std-green-light' : 'std-red-light'"
+      class="rounded-md p-4 fixed bottom-5 z-80"
       style="min-width: 75%; left: 50%; transform: translateX(-50%)"
     >
       <div class="flex">
         <div class="flex-shrink-0">
           <CheckCircleIcon
             v-if="success"
-            class="icon-md text-green-400"
+            class="icon-md icon-green"
             aria-hidden="true"
           />
-          <XCircleIcon v-else class="icon-md text-red-400" aria-hidden="true" />
+          <XCircleIcon v-else class="icon-md icon-red" aria-hidden="true" />
         </div>
         <div class="ml-3">
-          <h3 v-if="success" class="text-sm font-medium text-green-800">
+          <h3 v-if="success" class="text-sm font-medium std-green-text">
+            {{ title }}
+          </h3>
+          <h3 v-else class="text-sm font-medium std-red-text">
             {{ title }}
           </h3>
-          <h3 v-else class="text-sm font-medium text-red-800">{{ title }}</h3>
-          <div v-if="success" class="mt-2 text-sm text-green-700">
+          <div v-if="success" class="mt-2 text-sm std-green-text">
             <p>{{ msg }}</p>
           </div>
-          <div v-else class="mt-2 text-sm text-red-700">
+          <div v-else class="mt-2 text-sm std-red-text">
             <p>{{ msg }}</p>
           </div>
         </div>