fluency-v8-components 1.4.2 → 1.4.4

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-67639ff2]{font-weight:400;padding-top:5px}.primary[data-v-67639ff2]: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-DDRS6SDV.mjs → index.es-CR-GHkf3.mjs}

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

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/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/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/index.js

@@ -33,6 +33,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";
@@ -93,6 +94,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">