fluency-v8-components 1.3.8 → 1.3.9

package/dist/{index-mewQ1Z9n.mjs → index-DrG6GyAN.mjs}

@@ -3117,7 +3117,7 @@ const yH = { class: "flex items-center" }, bH = {
             onChange: s[0] || (s[0] = (o) => n.value = o.target.value),
             displayValue: (o) => o
           }, null, 8, ["displayValue"]),
-          he(J(cg), { class: "input-block absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white p-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm" }, {
+          he(J(cg), { class: "input-block absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white p-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm" }, {
             default: Me(() => [
               r.value && !i.value.some((o) => o.value === r.value) ? (q(), Je(J(mh), {
                 key: 0,
@@ -4078,7 +4078,7 @@ function Cj(e, t, n, r, i, a) {
           Di(K("input", {
             type: "text",
             class: st([
-              "input-block",
+              "pl-3 input-block",
               n.error ? "ring-red-600 " : "",
               n.readonly ? "disabled" : ""
             ]),
@@ -4108,7 +4108,7 @@ function Cj(e, t, n, r, i, a) {
             "leave-to-class": "opacity-0"
           }, {
             default: Me(() => [
-              he(A, { class: "input-block absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md p-1 text-base sm:text-sm" }, {
+              he(A, { class: "input-block absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-md p-1 text-base sm:text-sm" }, {
                 default: Me(() => [
                   (q(!0), de(gt, null, tn(a.sortedOptions, (d) => (q(), Je(l, {
                     as: "template",
@@ -4145,7 +4145,7 @@ function Cj(e, t, n, r, i, a) {
 }
 const vSe = /* @__PURE__ */ xr(bj, [["render", Cj]]), Sj = { class: "relative w-full rounded-lg text-left min-h-9" }, kj = { class: "flex items-center ml-2 select-chip mt-2" }, Ej = { class: "text-xs font-normal leading-none max-w-full flex-initial" }, Fj = {
   key: 0,
-  class: "relative z-10 flex flex-auto flex-row-reverse"
+  class: "relative z-9 flex flex-auto flex-row-reverse"
 }, Lj = {
   key: 0,
   class: "block truncate"
@@ -4282,7 +4282,7 @@ const vSe = /* @__PURE__ */ xr(bj, [["render", Cj]]), Sj = { class: "relative w-
             onAfterLeave: c[3] || (c[3] = (p) => a.value = "")
           }, {
             default: Me(() => [
-              he(J(cg), { class: "input-block absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white p-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm" }, {
+              he(J(cg), { 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" }, {
                 default: Me(() => [
                   o.value.length === 0 && a.value !== "" ? (q(), de("div", {
                     key: 0,
@@ -17989,6 +17989,10 @@ var Fm = TX();
 const EU = {
   __name: "CodeEditor",
   props: {
+    theme: {
+      type: String,
+      default: "dark"
+    },
     fontSize: {
       type: String,
       default: "12px"
@@ -18019,13 +18023,15 @@ const EU = {
     function n(r) {
       return r.length > 1e5 ? Fm.highlight(r, {}) : t.noHighlight ? Fm.highlight(r, {}) : t.isFPL ? Fm.highlight(r, UX) : Fm.highlight(r, IX);
     }
-    return (r, i) => (q(), Je(J(EX), ps({ class: "editor-style" }, r.$attrs, {
+    return (r, i) => (q(), Je(J(EX), ps({
+      class: ["editor-style", t.theme === "dark" ? "editor-style-dark" : "editor-style-light"]
+    }, r.$attrs, {
       style: `fontSize: ${t.fontSize}`,
       readonly: t.readonly,
       "tab-size": t.tabSize,
       highlight: n,
       "line-numbers": t.lineNumbers
-    }), null, 16, ["style", "readonly", "tab-size", "line-numbers"]));
+    }), null, 16, ["class", "style", "readonly", "tab-size", "line-numbers"]));
   }
 }, NX = { class: "fixed inset-0 overflow-y-auto" }, OX = { class: "flex min-h-full items-center justify-center p-2 text-center" }, MX = { class: "bg-sky-700 px-4 py-3 text-white sm:px-6" }, QX = { class: "flex items-center justify-between" }, DX = { class: "ml-3 flex h-7 items-center" }, $Se = /* @__PURE__ */ xt({
   __name: "PopupEditor",
@@ -19303,7 +19309,7 @@ const EU = {
                 placeholder: "Search",
                 onInput: o,
                 onKeyup: u[1] || (u[1] = o4((d) => r("search", i.value), ["enter"])),
-                class: "w-full dark:dark-bg py-2 px-2"
+                class: "w-full bg-white outline-1 dark:dark-bg py-2 px-2"
               }, null, 8, ["modelValue"]),
               he(Rs, {
                 "enter-active-class": "transition duration-100 ease-out",
@@ -26874,7 +26880,7 @@ const qoe = {
       _: 3
     }));
   }
-}, nle = {}, rle = { class: "bg-neutral-600 text-white pl-3 py-1 sm:flex sm:items-center sm:justify-between content-center" }, ile = { class: "mt-3 flex sm:mt-0" };
+}, nle = {}, rle = { 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" }, ile = { class: "mt-3 flex sm:mt-0" };
 function ale(e, t) {
   return q(), de("div", rle, [
     gn(e.$slots, "title"),
@@ -62708,7 +62714,7 @@ function(e) {
   var A = l.getContext("2d");
   A.fillStyle = "#fff", A.fillRect(0, 0, l.width, l.height);
   var u = { ignoreMouse: !0, ignoreAnimation: !0, ignoreDimensions: !0 }, d = this;
-  return (Bn.canvg ? Promise.resolve(Bn.canvg) : import("./index.es-B_UwL3US.mjs")).catch(function(f) {
+  return (Bn.canvg ? Promise.resolve(Bn.canvg) : import("./index.es-BrS6IGfB.mjs")).catch(function(f) {
     return Promise.reject(new Error("Could not load canvg: " + f));
   }).then(function(f) {
     return f.default ? f.default : f;

package/dist/{index.es-B_UwL3US.mjs → index.es-BrS6IGfB.mjs}

@@ -1,4 +1,4 @@
-import { c as Da, _ as Va, g as il } from "./index-mewQ1Z9n.mjs";
+import { c as Da, _ as Va, g as il } from "./index-DrG6GyAN.mjs";
 var fn = {}, cn = {}, cr, vn;
 function Q() {
   if (vn) return cr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluency-v8-components",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "main": "dist/fluency-v8-components.umd.js",
   "module": "dist/fluency-v8-components.es.js",
   "types": "dist/index.d.ts",

package/src/assets/main.css

@@ -4,11 +4,23 @@
 }
 
 @utility editor-style {
+  font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
+  padding: 10px 5px 10px 5px;
+  :focus {
+    outline: none;
+  }
+}
+
+@utility editor-style-light {
+  scrollbar-color: #94a3b8 #64748b;
+  background: #475569;
+  color: #f8fafc;
+}
+
+@utility editor-style-dark {
   scrollbar-color: #e0e7ff #303030;
   background: #303030;
   color: #FFFFFF;
-  font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
-  padding: 10px 5px 10px 5px;
 }
 
 @utility report-container {

package/src/components/common/AutoCompleteSearchBar.vue

@@ -8,7 +8,7 @@
             placeholder="Search"
             @input="onChange"
             @keyup.enter="emits('search', newVal)"
-            class="w-full dark:dark-bg py-2 px-2"
+            class="w-full bg-white outline-1 dark:dark-bg py-2 px-2"
           />
           <transition
             enter-active-class="transition duration-100 ease-out"

package/src/components/common/CodeEditor.vue

@@ -1,6 +1,6 @@
 <template>
   <PrismEditor
-    class="editor-style"
+    :class="['editor-style', props.theme === 'dark' ? 'editor-style-dark' : 'editor-style-light']"
     v-bind="$attrs"
     :style="`fontSize: ${props.fontSize}`"
     :readonly="props.readonly"
@@ -18,6 +18,10 @@ import "@/assets/prism-theme.css"; // import syntax highlighting styles
 
 // props and emits
 const props = defineProps({
+  theme: {
+    type: String,
+    default: "dark",
+  },
   fontSize: {
     type: String,
     default: "12px",

package/src/components/common/EditorHeading.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-neutral-600 text-white pl-3 py-1 sm:flex sm:items-center sm:justify-between content-center"
+    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"
   >
     <slot name="title" />
     <div class="mt-3 flex sm:mt-0">

package/src/components/form/GreyInputAutocomplete.vue

@@ -15,7 +15,7 @@
       :displayValue="(option) => option"
     />
     <ComboboxOptions
-      class="input-block absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white p-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
+      class="input-block absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white p-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
     >
       <ComboboxOption
         v-if="queryOption && !filteredOptions.some((option) => option.value === queryOption)"

package/src/components/form/GreySelectInput.vue

@@ -4,7 +4,7 @@
       <input
         type="text"
         :class="[
-          'input-block',
+          'pl-3 input-block',
           error ? 'ring-red-600 ' : '',
           readonly ? 'disabled' : '',
         ]"
@@ -24,7 +24,7 @@
         leave-to-class="opacity-0"
       >
         <ComboboxOptions
-          class="input-block absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md p-1 text-base sm:text-sm"
+          class="input-block absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-md p-1 text-base sm:text-sm"
         >
           <ComboboxOption
             as="template"

package/src/components/form/GreySelectInputMultiple.vue

@@ -24,7 +24,7 @@
           </div>
           <div
             v-if="!readonly"
-            class="relative z-10 flex flex-auto flex-row-reverse"
+            class="relative z-9 flex flex-auto flex-row-reverse"
           >
             <XMarkIcon
               class="icon cursor-pointer hover:opacity-75"
@@ -64,7 +64,7 @@
       @after-leave="query = ''"
     >
       <ComboboxOptions
-        class="input-block absolute z-20 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white p-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
+        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"
       >
         <div
           v-if="filteredOptions.length === 0 && query !== ''"