fluency-v8-components 1.4.3 → 1.4.5

package/src/components/common/PowerToggle.vue

@@ -3,12 +3,12 @@
     v-bind="$attrs"
     :class="[
       forceActive || $attrs.modelValue === powerState
-        ? 'bg-green-600'
-        : 'bg-red-500',
-      readonly ? 'cursor-not-allowed' : 'cursor-pointer',
+        ? 'std-green'
+        : 'std-red',
+      { 'cursor-not-allowed': props.readonly },
       { 'h-6 w-9': props.size === 'sm' },
       { 'h-8 w-[52px]': props.size === 'md' },
-      'relative inline-flex flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-indigo-600 focus:ring-offset-1',
+      'relative inline-flex flex-shrink-0 rounded-full border-2 border-transparent cursor-pointer transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:std-blue-ring focus:ring-offset-1',
     ]"
     :disabled="props.readonly"
     @update:model-value="emits('toggle')"
@@ -23,9 +23,9 @@
               ? 'translate-x-3'
               : 'translate-x-5'
           : 'translate-x-0',
-        { 'h-5 w-5': props.size === 'sm' },
+        { 'icon-md': props.size === 'sm' },
         { 'h-7 w-7': props.size === 'md' },
-        'pointer-events-none relative inline-block transform rounded-full bg-gray-100 shadow-sm ring-0 transition duration-200 ease-in-out',
+        'pointer-events-none relative inline-block transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out',
       ]"
     >
       <span
@@ -37,21 +37,10 @@
         ]"
         aria-hidden="true"
       >
-        <svg
-          v-if="props.power"
-          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>
+        <PlugOffIcon v-if="props.power" />
         <XMarkIcon
           v-else
-          class="icon-md flex-shrink-0 text-red-600"
+          class="icon-md flex-shrink-0 icon-red"
           aria-hidden="true"
         />
       </span>
@@ -64,21 +53,10 @@
         ]"
         aria-hidden="true"
       >
-        <svg
-          v-if="props.power"
-          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>
+        <PlugOnIcon v-if="props.power" />
         <CheckIcon
           v-else
-          class="icon-md flex-shrink-0 text-green-600"
+          class="icon-md flex-shrink-0 icon-green"
           aria-hidden="true"
         />
       </span>
@@ -91,7 +69,7 @@
 import { ref } from "vue";
 import { Switch } from "@headlessui/vue";
 import { XMarkIcon, CheckIcon } from "@heroicons/vue/24/outline";
-import { Tooltip } from "@/components";
+import { PlugOnIcon, PlugOffIcon, Tooltip } from "@/components";
 
 const props = defineProps({
   power: {

package/src/components/common/ProgressBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-gray-200 dark:bg-gray-500 rounded-xl shadow-xs overflow-hidden p-1"
+    class="slider-inactive rounded-xl shadow-xs overflow-hidden p-1"
   >
     <div
       :class="[
@@ -10,7 +10,7 @@
       ]"
     >
       <div
-        class="absolute top-0 bottom-0 left-0 rounded-lg bg-green-500"
+        class="absolute top-0 bottom-0 left-0 rounded-lg std-green-hover"
         :style="{ width: `${props.progress}%` }"
       />
       <div

package/src/components/common/RadioButtons.vue

@@ -13,9 +13,9 @@
           { 'py-3 px-4': size === 'lg' },
           { 'rounded-l-lg': i === 0},
           { 'rounded-r-lg': i === options.length - 1},
-          { 'bg-gray-200': active },
-          checked ? 'white-bg-hover text-black dark:text-white dark:bg-slate-800' : 'white-bg dark:bg-slate-600 dark:text-white',
-          'cursor-pointer'
+          { 'white-bg-hover dark:dark-bg-hover': checked || active },
+          { 'white-bg dark:dark-bg opacity-75': !checked },
+          'cursor-pointer std-white-text'
         ]"
         class="relative flex shadow-md focus:outline-hidden"
       >

package/src/components/common/Slideout.vue

@@ -31,18 +31,17 @@
             >
               <DialogPanel class="pointer-events-auto w-screen max-w-2xl">
                 <div
-                  class="flex h-full flex-col bg-white shadow-xl dark:bg-black"
+                  class="flex h-full flex-col std-white shadow-xl"
                 >
-                  <div class="bg-sky-700 px-4 py-6 sm:px-6">
-                    <div class="flex items-center justify-between">
-                      <DialogTitle
-                        class="text-base font-semibold leading-6 text-white"
-                        >{{ adjustText(title, titleWidth) }}</DialogTitle
-                      >
+                  <div class="std-blue px-4 py-6 sm:px-6">
+                    <div class="flex items-center justify-between text-white">
+                      <DialogTitle class="text-base font-semibold leading-6">
+                        {{ adjustText(title, titleWidth) }}
+                      </DialogTitle>
                       <div class="ml-3 flex h-7 items-center">
                         <button
                           type="button"
-                          class="relative rounded-md bg-sky-700 text-sky-200 hover:text-white focus:outline-hidden focus:ring-2 focus:ring-white"
+                          class="relative rounded-md focus:outline-hidden focus:ring-2 focus:ring-white hover:opacity-50"
                           @click="emits('close')"
                         >
                           <span class="absolute -inset-2.5" />

package/src/components/common/Sort.vue

@@ -18,7 +18,7 @@
     >
       <MenuItems
         :class="[
-          'z-50 absolute z-50 mt-0.5 w-40 origin-top-right rounded-md py-2 shadow-lg max-h-96 overflow-y-auto break-all white-bg text-gray-700 dark:bg-black dark:text-gray-300',
+          'std-white input-dropdown w-40 origin-top-right shadow-lg max-h-96',
           direction === 'right' ? 'left-0 ' : 'right-0',
         ]"
       >
@@ -27,10 +27,7 @@
             <span
               :class="[
                 active ? 'outline-hidden white-bg-hover dark:dark-bg-hover' : '',
-                {
-                  'bg-gray-400 dark:bg-slate-800':
-                    current.label === option.label,
-                },
+                { 'white-bg-hover dark:dark-bg-hover': current.label === option.label },
                 `group flex w-full items-center rounded-md px-2 py-2 text-${size} cursor-pointer`,
               ]"
               @click.stop="emits('sort', option)"

package/src/components/common/Table.vue

@@ -5,18 +5,12 @@
         <div class="table-frame3">
           <div :class="['table-shadow', { 'overflow-hidden': overflow }]">
             <table class="std-table">
-              <thead
-                :class="
-                  hideHeader
-                    ? 'sr-only'
-                    : 'text-left bg-neutral-200 dark:dark-bg'
-                "
-              >
+              <thead :class="hideHeader ? 'sr-only' : 'text-left'">
                 <slot name="header" />
               </thead>
               <tbody v-if="!data || data.length === 0">
                 <tr>
-                  <td colspan="100%" class="h-24 text-center">
+                  <td colspan="100%" class="h-24 text-center std-table-body">
                     No data available
                   </td>
                 </tr>

package/src/components/common/Tabs.vue

@@ -1,15 +1,16 @@
 <template>
   <div>
     <div class="relative hidden md:block overflow-auto">
-      <nav class="flex space-x-2" aria-label="Tabs">
+      <nav class="flex" aria-label="Tabs">
         <a
-          v-for="tab in tabs"
+          v-for="(tab, i) in tabs"
           :key="tab.name"
           :class="[
-            tab.current
-              ? 'bg-sky-100 dark:bg-slate-700 text-sky-700 dark:text-sky-100'
-              : 'text-slate-500 dark:text-slate-200 opacity-50',
-            'cursor-pointer rounded-md px-4 py-2 hover:bg-sky-100 dark:hover:bg-slate-800',
+            { 'tab-selected': tab.current },
+            { 'tab-unselected': !tab.current },
+            { 'rounded-l-md': i === 0 },
+            { 'rounded-r-md': i === tabs.length - 1 },
+            'cursor-pointer px-4 py-2 border-r std-white-border last:border-0',
           ]"
           @click="switchTab(tab[props.tabField])"
         >
@@ -38,7 +39,7 @@
         <div>
           <MenuButton
             :class="[
-              'inline-flex w-full justify-center cursor-pointer rounded-md px-4 py-2 hover:bg-sky-100 dark:hover:bg-slate-800 px-4 py-2 font-medium bg-sky-100 dark:bg-slate-700 text-sky-700 dark:text-sky-100',
+              'tab-selected inline-flex w-full justify-center cursor-pointer rounded-md px-4 py-2 font-medium',
               { 'text-sm': props.size === 'small' },
               { 'text-lg': props.size === 'large' },
             ]"
@@ -63,15 +64,15 @@
           leave-to-class="transform scale-95 opacity-0"
         >
           <MenuItems
-            class="z-50 min-w-full absolute left-0 mt-2 origin-top-left rounded-md bg-white dark:bg-black"
+            class="input-dropdown std-white min-w-full left-0 origin-top-left shadow-lg"
           >
             <MenuItem v-for="tab in tabs" @click="switchTab(tab.name)">
               <button
                 :class="[
-                  'group flex w-full items-center rounded-md px-2 py-2 text-sm hover:bg-sky-100 dark:hover:bg-slate-800',
+                  'group flex w-full items-center rounded-md px-2 py-2 text-sm',
                   tab.current
-                    ? 'bg-sky-100 dark:bg-slate-700 text-sky-700 dark:text-sky-100'
-                    : 'text-slate-500 dark:text-slate-200',
+                    ? 'tab-selected'
+                    : 'tab-unselected',
                 ]"
               >
                 {{ tab.name }}

package/src/components/common/VerticalTabs.vue

@@ -4,10 +4,13 @@
     :key="index"
     @click="updateValue(tab)"
     :class="[
-      current === tab
-        ? 'bg-sky-100 dark:bg-slate-700 text-sky-700 dark:text-sky-100'
-        : 'text-slate-500 dark:text-slate-200 opacity-50',
-      'cursor-pointer rounded-md px-4 py-2 hover:bg-sky-100 dark:hover:bg-slate-800',
+      {
+        'tab-selected': current === tab,
+      },
+      {
+        'tab-unselected': current !== tab,
+      },
+      'cursor-pointer rounded-md px-4 py-2 border-b std-white-border last:border-0',
     ]"
   >
     {{ tab }}

package/src/components/common/facet/Leaf.vue

@@ -67,16 +67,16 @@ const tooltip = ref(false);
 
 function noMore() {
   if (topLevel.value < props.children.length) {
-    return "text-sky-600 cursor-pointer";
+    return "std-blue-text cursor-pointer";
   }
-  return "text-gray-400 cursor-not-allowed";
+  return "std-disabled-text cursor-not-allowed";
 }
 
 function noLess() {
   if (topLevel.value === 0 || props.children.length === 0) {
-    return "text-gray-400 cursor-not-allowed";
+    return "std-disabled-text cursor-not-allowed";
   }
-  return "text-sky-600 cursor-pointer";
+  return "std-blue-text cursor-pointer";
 }
 
 function topUp() {

package/src/components/dialogs/CopyDialog.vue

@@ -2,10 +2,10 @@
   <Dialog :open="open" :title="title" @close="closeModal">
     <template #content>
       <div class="mt-2">
-        <p class="break-all text-sm text-gray-600 dark:text-gray-400 font-bold">
+        <p class="break-all text-sm std-white-text font-bold">
           {{ token }}
         </p>
-        <p class="text-sm text-gray-500">
+        <p class="text-sm font-light">
           {{ msg }}
         </p>
       </div>

package/src/components/dialogs/InfoDialog.vue

@@ -0,0 +1,39 @@
+<template>
+  <Dialog :open="open" :title="title" size="large">
+    <template #content>
+      <div class="mt-2">
+        <slot name="content" />
+      </div>
+    </template>
+    <template #footer>
+      <TextButton :text="closeMessage" @click="closeModal" />
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { TextButton, Dialog } from "@/components";
+
+const open = ref(false);
+const title = ref("");
+const closeMessage = ref("Close");
+
+// function defs
+function openModal(
+  t: string,
+  btn: string = "Close",
+) {
+  title.value = t;
+  closeMessage.value = btn;
+  open.value = true;
+}
+
+function closeModal() {
+  open.value = false;
+}
+
+defineExpose({
+  openModal,
+});
+</script>

package/src/components/dialogs/PopupEditor.vue

@@ -10,7 +10,7 @@
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <div class="fixed inset-0 bg-black/50" />
+        <div class="fixed inset-0 bg-gray-500/75" />
       </TransitionChild>
 
       <div class="fixed inset-0 overflow-y-auto">
@@ -30,17 +30,17 @@
               class="m-2 transform overflow-hidden rounded-xl text-left align-middle shadow-xl transition-all"
               style="width: 64rem"
             >
-              <div class="bg-sky-700 px-4 py-3 text-white sm:px-6">
+              <div class="std-blue px-4 py-3 text-white sm:px-6">
                 <div class="flex items-center justify-between">
                   <DialogTitle
-                    class="text-base font-semibold leading-6 text-white"
+                    class="text-base font-semibold leading-6"
                   >
                     {{ title }}
                   </DialogTitle>
                   <div class="ml-3 flex h-7 items-center">
                     <button
                       type="button"
-                      class="relative rounded-md bg-sky-700 text-sky-200 hover:text-white focus:outline-hidden focus:ring-2 focus:ring-white"
+                      class="relative rounded-md hover:opacity-50 focus:outline-hidden focus:ring-2 focus:ring-white"
                       @click="closeModal"
                     >
                       <span class="absolute -inset-2.5" />
@@ -54,6 +54,7 @@
                 v-model="code"
                 class="p-3"
                 :fontSize="`${fontSize ? fontSize : '12px'}`"
+                :theme="theme || 'light'"
                 :isFPL="isFPL"
                 :line-numbers="isFPL"
                 :readonly="!isEditable"
@@ -85,6 +86,10 @@ const props = defineProps({
     type: String,
     default: "12px",
   },
+  theme: {
+    type: String,
+    default: "light",
+  },
 });
 const emits = defineEmits(["update"]);
 // states

package/src/components/dialogs/wizard/Stepper.vue

@@ -17,8 +17,8 @@
         v-for="(step, i) in steps"
         :class="[
           `h-2 w-1/${steps.length} rounded-lg`,
-          { 'bg-gray-200 dark:bg-gray-500': step.status === 'upcoming' },
-          { 'bg-sky-500': step.status !== 'upcoming' },
+          { 'slider-inactive': step.status === 'upcoming' },
+          { 'std-blue': step.status !== 'upcoming' },
         ]"
       />
     </div>

package/src/components/form/CheckBox.vue

@@ -4,8 +4,8 @@
       <input
         type="checkbox"
         :class="[
-          'icon-md rounded-sm border-gray-400 text-indigo-600 focus:ring-indigo-600',
-          $attrs.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+          'icon-md rounded-sm cursor-pointer',
+          { 'cursor-not-allowed!': $attrs.disabled },
         ]"
         :checked="$attrs.modelValue"
         v-bind="$attrs"

package/src/components/form/Editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="toolbar" class="bg-blue-100 dark:bg-blue-200">
+  <div id="toolbar" class="std-light">
     <span class="ql-formats">
       <select class="ql-font"></select>
       <select class="ql-size"></select>

package/src/components/form/FormCol.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="col py-1">
     <!-- provide section name -->
-    <div class="row text-xs font-medium text-grey-7">
+    <div class="row text-xs font-medium">
       {{ fieldName }}
-      <span v-if="required" class="text-red-500">*</span>
+      <span v-if="required" class="std-red-text">*</span>
     </div>
     <div class="flex-row w-full">
       <slot />

package/src/components/form/FormRow.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="flex items-center py-3">
     <!-- provide section name -->
-    <div class="w-20 sm:w-40 text-xs font-medium text-grey-7 pr-4">
+    <div class="w-20 sm:w-40 text-xs font-medium pr-4">
       {{ fieldName }}
-      <span v-if="required" class="text-red-500">*</span>
+      <span v-if="required" class="std-red-text">*</span>
     </div>
     <div class="w-32 sm:w-full">
       <slot />

package/src/components/form/GreyForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg shadow-lg my-2 bg-white dark:dark-bg">
+  <div class="rounded-lg shadow-lg my-2 std-white dark:dark-bg">
     <div class="px-6 py-4">
       <slot />
     </div>

package/src/components/form/GreyInput.vue

@@ -1,7 +1,7 @@
 <template>
-  <div :class="['flex input-block', { 'ring-red-600 ': error }]">
+  <div :class="['flex input-block', { 'std-red-ring ': error }]">
     <span
-      class="flex select-none items-center pl-3 text-slate-400 italic sm:text-sm"
+      class="flex select-none items-center pl-3 std-disabled-text italic sm:text-sm"
     >
       {{ prefix }}
     </span>
@@ -17,7 +17,7 @@
       @input="onChange"
     />
   </div>
-  <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/GreyInputAutocomplete.vue

@@ -2,20 +2,20 @@
   <Combobox
     as="div"
     v-bind="$attrs"
-    :class="[
-      'input-block py-1 relative',
-      error ? 'ring-red-600 ' : '',
-      readonly ? 'disabled' : '',
-    ]"
+    class="relative input-block"
     :disabled="readonly ? true : false"
   >
     <ComboboxInput
-      class="w-full border-0 text-sm bg-transparent p-1 px-2 focus:ring-0"
+      :class="[
+        'px-2 w-full bg-transparent border-0 outline-none ring-0 focus:outline-none focus:ring-0',
+        { 'std-red-ring': error },
+        { 'disabled': readonly },
+      ]"
       @change="query = $event.target.value"
       :displayValue="(option) => option"
     />
     <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"
     >
       <ComboboxOption
         v-if="queryOption && !filteredOptions.some((option) => option.value === queryOption)"
@@ -25,12 +25,12 @@
       >
         <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',
           ]"
         >
-          <div class="flex items-center">
-            <span :class="['block truncate']">{{ query }}</span>
+          <div class="flex items-center pr-10">
+            <span class="input-dropdown-label">{{ query }}</span>
           </div>
         </li>
       </ComboboxOption>
@@ -43,18 +43,18 @@
       >
         <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',
           ]"
         >
-          <div class="flex items-center">
-            <span :class="['block truncate']">{{ option.label }}</span>
+          <div class="flex items-center pr-10">
+            <span class="input-dropdown-label">{{ option.label }}</span>
           </div>
         </li>
       </ComboboxOption>
     </ComboboxOptions>
   </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/GreyInputCopy.vue

@@ -4,8 +4,8 @@
       type="text"
       :class="[
         'pl-3 input-block pr-8',
-        error ? 'ring-red-600 ' : '',
-        readonly ? 'disabled' : '',
+        { 'std-red-ring': error },
+        { 'disabled': readonly },
       ]"
       :value="$attrs.modelValue"
       v-bind="$attrs"
@@ -14,14 +14,14 @@
     />
     <span
       :class="[
-        'cursor-pointer absolute flex items-center right-2 inset-y-0',
-        error ? 'pb-5' : '',
+        'input-icon cursor-pointer',
+        { 'pb-5': error },
       ]"
       @click="copyInput"
     >
-      <DocumentDuplicateIcon class="icon-md text-gray-400" />
+      <DocumentDuplicateIcon class="icon-md" />
     </span>
-    <div v-if="error" class="text-red-600 text-sm">
+    <div v-if="error" class="std-red-text text-sm">
       {{ error }}
     </div>
   </div>

package/src/components/form/GreyInputGrow.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="['flex input-block relative', { 'ring-red-600 ': error }]"
+    :class="['flex input-block relative', { 'std-red-ring ': error }]"
     v-bind="$attrs"
   >
     <div
@@ -20,7 +20,7 @@
       @input="$emit('update:modelValue', $event.target.value)"
     />
   </div>
-  <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/GreyInputToken.vue

@@ -4,8 +4,8 @@
       type="text"
       :class="[
         'pl-3 input-block pr-8',
-        error ? 'ring-red-600 ' : '',
-        readonly ? 'disabled' : '',
+        { 'std-red-ring': error },
+        { 'disabled': readonly },
       ]"
       v-model.trim="inputValue"
       v-bind="$attrs"
@@ -13,17 +13,17 @@
     />
     <span
       :class="[
-        'cursor-pointer absolute flex items-center right-2 inset-y-0',
+        'input-icon cursor-pointer',
         { 'pb-5': error },
         { hidden: readonly },
       ]"
     >
       <CurrencyDollarIcon
-        class="icon-md text-gray-400"
+        class="icon-md"
         @click="generateToken"
       />
     </span>
-    <div v-if="error" class="text-red-600 text-sm">
+    <div v-if="error" class="std-red-text text-sm">
       {{ error }}
     </div>
   </div>

package/src/components/form/GreyPassword.vue

@@ -3,14 +3,14 @@
     type="password"
     :class="[
       'pl-3 input-block',
-      error ? 'ring-red-600 ' : '',
-      readonly ? 'disabled' : '',
+      { 'std-red-ring': error },
+      { 'disabled': readonly },
     ]"
     :value="$attrs.modelValue"
     v-bind="$attrs"
     @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>