fluency-v8-components 1.4.1 → 1.4.3

package/dist/index.css

@@ -1 +1 @@
-.prism-editor-wrapper{width:100%;height:100%;display:flex;align-items:flex-start;overflow:auto;-o-tab-size:1.5em;tab-size:1.5em;-moz-tab-size:1.5em}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.prism-editor-wrapper .prism-editor__textarea{color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::-moz-selection{background-color:#accef7!important;color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::selection{background-color:#accef7!important;color:transparent!important}}.prism-editor-wrapper .prism-editor__container{position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;width:100%}.prism-editor-wrapper .prism-editor__line-numbers{height:100%;overflow:hidden;flex-shrink:0;padding-top:4px;margin-top:0;margin-right:10px}.prism-editor-wrapper .prism-editor__line-number{text-align:right;white-space:nowrap}.prism-editor-wrapper .prism-editor__textarea{position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent}.prism-editor-wrapper .prism-editor__editor,.prism-editor-wrapper .prism-editor__textarea{margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;-moz-tab-size:inherit;-o-tab-size:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-wrap:keep-all;overflow-wrap:break-word;padding:0}.prism-editor-wrapper .prism-editor__textarea--empty{-webkit-text-fill-color:inherit!important}.prism-editor-wrapper .prism-editor__editor{position:relative;pointer-events:none}pre[class*=language-],code[class*=language-]{color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo,Monaco,Consolas,Andale Mono,Ubuntu Mono,Courier New,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]::selection,code[class*=language-]::selection,pre[class*=language-] *::selection,code[class*=language-] *::selection{text-shadow:none;background:#264f78}@media print{pre[class*=language-],code[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e}:not(pre)>code[class*=language-]{padding:.1em .3em;border-radius:.3em;color:#db4c69;background:#1e1e1e}.namespace{opacity:.7}.token.doctype .token.doctype-tag{color:#569cd6}.token.doctype .token.name{color:#9cdcfe}.token.comment,.token.prolog,.token.timestamp{color:#6a9955}.token.errors{color:#c10015}.token.punctuation,.language-html .language-css,.language-html .language-javascript{color:#fdbe23}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.inserted,.token.unit{color:#b5cea8}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.deleted{color:#ce9178}.language-css .token.string.url{text-decoration:underline}.token.operator,.token.entity{color:#d4d4d4}.token.operator.arrow{color:#569cd6}.token.atrule{color:#ce9178}.token.atrule .token.rule{color:#c586c0}.token.atrule .token.url{color:#9cdcfe}.token.atrule .token.url .token.function{color:#dcdcaa}.token.atrule .token.url .token.punctuation{color:#d4d4d4}.token.keyword.module,.token.keyword.control-flow{color:#c586c0}.token.function,.token.function .token.maybe-class-name,.token.brackets{color:#e9d299}.token.builtinfunction{color:#ce92d8}.token.keyword,.token.curlybraces{color:#569cd6}.token.regex{color:#d16969}.token.important{color:#569cd6}.token.italic{font-style:italic}.token.constant{color:#9cdcfe}.token.class-name,.token.maybe-class-name{color:#4ec9b0}.token.console,.token.parameter,.token.interpolation{color:#9cdcfe}.token.punctuation.interpolation-punctuation,.token.boolean{color:#569cd6}.token.property,.token.variable,.token.imports .token.maybe-class-name,.token.exports .token.maybe-class-name{color:#9cdcfe}.token.selector,.token.escape{color:#d7ba7d}.token.tag{color:#569cd6}.token.tag .token.punctuation,.token.cdata{color:gray}.token.attr-name{color:#9cdcfe}.token.attr-value,.token.attr-value .token.punctuation{color:#ce9178}.token.attr-value .token.punctuation.attr-equals{color:#d4d4d4}.token.entity{color:#569cd6}.token.namespace{color:#4ec9b0}pre[class*=language-javascript],code[class*=language-javascript],pre[class*=language-jsx],code[class*=language-jsx],pre[class*=language-typescript],code[class*=language-typescript],pre[class*=language-tsx],code[class*=language-tsx]{color:#9cdcfe}pre[class*=language-css],code[class*=language-css]{color:#ce9178}pre[class*=language-html],code[class*=language-html]{color:#d4d4d4}.language-regex .token.anchor{color:#dcdcaa}.language-html .token.punctuation{color:gray}pre[class*=language-]>code[class*=language-]{position:relative;z-index:1}.line-highlight.line-highlight{background:#f7ebc6;box-shadow:inset 5px 0 #f7d87c;z-index:0}.list-style[data-v-1065ac64]{background:#303030;color:#fff;font-size:14px}.x-center[data-v-59ba8a5f]{transform:translate(-50%)}.left-tooltip[data-v-59ba8a5f]{transform:translate(-120%)}.right-tooltip[data-v-59ba8a5f]{transform:translate(20%)}.primary[data-v-0f89cff2]{font-weight:400;padding-top:5px}.primary[data-v-0f89cff2]:first-child{font-weight:400}
+.prism-editor-wrapper{width:100%;height:100%;display:flex;align-items:flex-start;overflow:auto;-o-tab-size:1.5em;tab-size:1.5em;-moz-tab-size:1.5em}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.prism-editor-wrapper .prism-editor__textarea{color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::-moz-selection{background-color:#accef7!important;color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::selection{background-color:#accef7!important;color:transparent!important}}.prism-editor-wrapper .prism-editor__container{position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;width:100%}.prism-editor-wrapper .prism-editor__line-numbers{height:100%;overflow:hidden;flex-shrink:0;padding-top:4px;margin-top:0;margin-right:10px}.prism-editor-wrapper .prism-editor__line-number{text-align:right;white-space:nowrap}.prism-editor-wrapper .prism-editor__textarea{position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent}.prism-editor-wrapper .prism-editor__editor,.prism-editor-wrapper .prism-editor__textarea{margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;-moz-tab-size:inherit;-o-tab-size:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-wrap:keep-all;overflow-wrap:break-word;padding:0}.prism-editor-wrapper .prism-editor__textarea--empty{-webkit-text-fill-color:inherit!important}.prism-editor-wrapper .prism-editor__editor{position:relative;pointer-events:none}pre[class*=language-],code[class*=language-]{color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo,Monaco,Consolas,Andale Mono,Ubuntu Mono,Courier New,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]::selection,code[class*=language-]::selection,pre[class*=language-] *::selection,code[class*=language-] *::selection{text-shadow:none;background:#264f78}@media print{pre[class*=language-],code[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e}:not(pre)>code[class*=language-]{padding:.1em .3em;border-radius:.3em;color:#db4c69;background:#1e1e1e}.namespace{opacity:.7}.token.doctype .token.doctype-tag{color:#569cd6}.token.doctype .token.name{color:#9cdcfe}.token.comment,.token.prolog,.token.timestamp{color:#6a9955}.token.errors{color:#c10015}.token.punctuation,.language-html .language-css,.language-html .language-javascript{color:#fdbe23}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.inserted,.token.unit{color:#b5cea8}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.deleted{color:#ce9178}.language-css .token.string.url{text-decoration:underline}.token.operator,.token.entity{color:#d4d4d4}.token.operator.arrow{color:#569cd6}.token.atrule{color:#ce9178}.token.atrule .token.rule{color:#c586c0}.token.atrule .token.url{color:#9cdcfe}.token.atrule .token.url .token.function{color:#dcdcaa}.token.atrule .token.url .token.punctuation{color:#d4d4d4}.token.keyword.module,.token.keyword.control-flow{color:#c586c0}.token.function,.token.function .token.maybe-class-name,.token.brackets{color:#e9d299}.token.builtinfunction{color:#ce92d8}.token.keyword,.token.curlybraces{color:#569cd6}.token.regex{color:#d16969}.token.important{color:#569cd6}.token.italic{font-style:italic}.token.constant{color:#9cdcfe}.token.class-name,.token.maybe-class-name{color:#4ec9b0}.token.console,.token.parameter,.token.interpolation{color:#9cdcfe}.token.punctuation.interpolation-punctuation,.token.boolean{color:#569cd6}.token.property,.token.variable,.token.imports .token.maybe-class-name,.token.exports .token.maybe-class-name{color:#9cdcfe}.token.selector,.token.escape{color:#d7ba7d}.token.tag{color:#569cd6}.token.tag .token.punctuation,.token.cdata{color:gray}.token.attr-name{color:#9cdcfe}.token.attr-value,.token.attr-value .token.punctuation{color:#ce9178}.token.attr-value .token.punctuation.attr-equals{color:#d4d4d4}.token.entity{color:#569cd6}.token.namespace{color:#4ec9b0}pre[class*=language-javascript],code[class*=language-javascript],pre[class*=language-jsx],code[class*=language-jsx],pre[class*=language-typescript],code[class*=language-typescript],pre[class*=language-tsx],code[class*=language-tsx]{color:#9cdcfe}pre[class*=language-css],code[class*=language-css]{color:#ce9178}pre[class*=language-html],code[class*=language-html]{color:#d4d4d4}.language-regex .token.anchor{color:#dcdcaa}.language-html .token.punctuation{color:gray}pre[class*=language-]>code[class*=language-]{position:relative;z-index:1}.line-highlight.line-highlight{background:#f7ebc6;box-shadow:inset 5px 0 #f7d87c;z-index:0}.x-center[data-v-59ba8a5f]{transform:translate(-50%)}.left-tooltip[data-v-59ba8a5f]{transform:translate(-120%)}.right-tooltip[data-v-59ba8a5f]{transform:translate(20%)}.primary[data-v-67639ff2]{font-weight:400;padding-top:5px}.primary[data-v-67639ff2]:first-child{font-weight:400}

package/dist/{index.es-YVbpQZsk.mjs → index.es-CGlekcuf.mjs}

@@ -1,4 +1,4 @@
-import { c as Da, _ as Va, g as il } from "./index-Mo0fYImu.mjs";
+import { c as Da, _ as Va, g as il } from "./index-4Y4E9JbN.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.4.1",
+  "version": "1.4.3",
   "main": "dist/fluency-v8-components.umd.js",
   "module": "dist/fluency-v8-components.es.js",
   "types": "dist/index.d.ts",

package/src/components/charts/TimelineChart.vue

@@ -50,6 +50,8 @@ function plotGraph() {
       Plot.text(["No data available!"], { frameAnchor: "middle" }),
     ],
   }
+  let marginLeft = 80;
+  let marginRight = 80;
   
   if (props.buckets.length > 0) {
     if (props.flow) {
@@ -143,6 +145,15 @@ function plotGraph() {
         ]
       };
     } else {
+      const maxCount = Math.max(
+        1,
+        d3.max(props.buckets, (d) => d?.doc_count ?? 0) ?? 0
+      );
+      const countTickFormat =
+        maxCount >= 1000000 ? d3.format(".2s") : d3.format(",");
+      const widestTickLabel = countTickFormat(maxCount).toString();
+      marginLeft = Math.max(marginLeft, 24 + widestTickLabel.length * 8);
+
       options = {
         x: {
           type: "time",
@@ -151,12 +162,8 @@ function plotGraph() {
         },
         y: {
           label: "Count",
-          domain: [
-            0,
-            Math.max(1,
-              d3.max(props.buckets, (d) => d.doc_count) ?? 0
-            ),
-          ],
+          domain: [0, maxCount],
+          tickFormat: countTickFormat,
         },
         grid: true,
         marks: [
@@ -189,8 +196,8 @@ function plotGraph() {
   }
   
   const plot = Plot.plot({
-    marginLeft: 80,
-    marginRight: 80,
+    marginLeft,
+    marginRight,
     width: 1200,
     height: 320,
     marginBottom: 50,

package/src/components/common/EventList.vue

@@ -1,7 +1,7 @@
 <template>
   <ul
     role="list"
-    class="divide-y divide-gray-300 h-full list-style overflow-auto p-2"
+    class="divide-y text-sm divide-gray-300 h-full editor-style-light dark:editor-style-dark overflow-auto p-2"
   >
     <li
       v-for="event in events"
@@ -31,11 +31,3 @@ const props = defineProps({
 });
 const emits = defineEmits(["copy"]);
 </script>
-
-<style scoped>
-.list-style {
-  background: #303030;
-  color: #ffffff;
-  font-size: 14px;
-}
-</style>

package/src/components/common/Facet.vue

@@ -85,7 +85,6 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import type { FacetTag } from "@/interfaces/facet";
 import { SearchBar, SaveIcon, Tooltip, Separator } from "@/components";
 import Leaf from "./facet/Leaf.vue";
 import {
@@ -95,6 +94,11 @@ import {
   XMarkIcon,
 } from "@heroicons/vue/20/solid";
 
+interface FacetTag {
+  parent: string;
+  child: string;
+}
+
 // props and emits
 const props = defineProps({
   tree: {

package/src/components/common/ThreeHomePanel.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="col md:flex-row md:justify-between gap-x-5 my-4">
+    <GreyForm :class="['md:w-1/3', { 'dark:bg-black': shadow }]">
+      <div class="col items-center mt-2">
+        <div class="row">
+          <slot name="firstPanelIcon" />
+          <div class="text-5xl font-semibold">{{ firstPanelValue }}</div>
+        </div>
+        <div class="font-light">{{ firstPanelName }}</div>
+      </div>
+    </GreyForm>
+    <GreyForm :class="['md:w-1/3', { 'dark:bg-black': shadow }]">
+      <div class="col items-center mt-2">
+        <div class="row">
+          <slot name="secondPanelIcon" />
+          <div class="text-5xl font-semibold">{{ secondPanelValue }}</div>
+        </div>
+        <div class="font-light">{{ secondPanelName }}</div>
+      </div>
+    </GreyForm>
+    <GreyForm :class="['md:w-1/3', { 'dark:bg-black': shadow }]">
+      <div class="col items-center mt-2">
+        <div class="row">
+          <slot name="thirdPanelIcon" />
+          <div class="text-5xl font-semibold">{{ thirdPanelValue }}</div>
+        </div>
+        <div class="font-light">{{ thirdPanelName }}</div>
+      </div>
+    </GreyForm>
+  </div>
+</template>
+
+<script setup>
+import GreyForm from "@/components/form/GreyForm.vue";
+
+const props = defineProps({
+  firstPanelValue: [Number, String],
+  firstPanelName: String,
+  secondPanelValue: [Number, String],
+  secondPanelName: String,
+  thirdPanelValue: [Number, String],
+  thirdPanelName: String,
+  shadow: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

package/src/components/form/GreyInputAutocomplete.vue

@@ -15,7 +15,7 @@
       :displayValue="(option) => option"
     />
     <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"
     >
       <ComboboxOption
         v-if="queryOption && !filteredOptions.some((option) => option.value === queryOption)"

package/src/components/index.js

@@ -93,6 +93,7 @@ export { default as EditorHeading } from "./common/EditorHeading.vue";
 export { default as CodeEditor } from "./common/CodeEditor.vue";
 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";

package/src/components/status/TicketStatus.vue

@@ -2,7 +2,7 @@
   <Menu as="div" class="inline-block text-left">
     <div>
       <MenuButton
-        class="inline-flex w-full justify-center rounded-md bg-white dark:bg-transparent px-3 py-1 text-sm font-semibold text-gray-900 dark:text-white shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:hoverdark-bg-hover"
+        class="inline-flex w-full justify-center rounded-md bg-white dark:bg-transparent px-3 py-1 text-sm font-semibold text-gray-900 dark:text-white shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:hover:dark-bg-hover"
         :disabled="disabled"
         @click="($event) => closeMenu($event)"
       >
@@ -46,7 +46,7 @@
       leave-to-class="transform opacity-0 scale-95"
     >
       <MenuItems
-        class="absolute z-10 w-30 origin-top-right rounded-xs bg-white dark:bg-zinc-800 shadow-lg ring-1 ring-black dark:ring-gray-300/5 focus:outline-hidden"
+        class="absolute z-10 w-30 origin-top-right rounded-xs shadow-lg ring-1 ring-gray-900/5 focus:outline-hidden bg-white dark:bg-black"
         style="transform: translateX(-60px)"
       >
         <div class="py-0.5" v-for="(item, index) in data" :key="index">