fluency-v8-components 1.3.5 → 1.3.7

package/src/components/common/Breadcrumb.vue

@@ -0,0 +1,45 @@
+<template>
+  <nav class="flex" aria-label="Breadcrumb">
+    <ol role="list" class="flex items-center space-x-4">
+      <li>
+        <div>
+          <span
+            class="hover:text-gray-400 cursor-pointer"
+            @click="emits('home')"
+          >
+            <HomeIcon class="icon-md flex-shrink-0" aria-hidden="true" />
+          </span>
+        </div>
+      </li>
+      <li v-for="(page, i) in pages" :key="page.name">
+        <div class="flex items-center">
+          <svg
+            class="icon-md flex-shrink-0 dark:text-gray-300"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            aria-hidden="true"
+          >
+            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+          </svg>
+          <span
+            :href="page.path"
+            class="ml-4 text-sm font-medium hover:text-gray-400 cursor-pointer"
+            @click="emits('navigate', page, i)"
+          >
+            {{ page.name }}
+          </span>
+        </div>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup>
+import { HomeIcon } from "@heroicons/vue/20/solid";
+
+const props = defineProps({
+  pages: Array,
+  homeURL: String,
+});
+const emits = defineEmits(["navigate", "home"]);
+</script>

package/src/components/common/ButtonToggle.vue

@@ -0,0 +1,24 @@
+<template>
+  <span class="isolate inline-flex rounded-md shadow-xs rounded-md">
+    <button
+      v-for="(option, i) in options"
+      type="button"
+      :class="[
+        'button-toggle bg-gray-200 text-black',
+        { 'text-gray-500 opacity-75': option.value !== inputValue },
+        { 'rounded-l-lg': i === 0 },
+        { 'rounded-r-lg': i === options.length - 1 },
+      ]"
+      @click="emits('toggle', option.value)"
+    >
+      {{ option.label }}
+    </button>
+  </span>
+</template>
+<script setup>
+const props = defineProps({
+  options: Array,
+  inputValue: String,
+});
+const emits = defineEmits(["toggle"]);
+</script>

package/src/components/common/Card.vue

@@ -0,0 +1,116 @@
+<template>
+  <li
+    :class="[
+      'overflow-hidden rounded-xl border border-gray-300 dark:border-neutral-600',
+      {
+        'bg-green-300 dark:bg-green-900 ': color === 'green',
+      },
+      {
+        'bg-red-400 dark:bg-red-800 ': color === 'red',
+      },
+      {
+        'bg-sky-200 dark:bg-sky-800': color === 'blue',
+      },
+      {
+        'bg-white dark:dark-bg': color === 'default',
+      },
+      {
+        'cursor-pointer': clickable,
+      },
+      {
+        'hover:bg-green-500 dark:hover:bg-green-700':
+          clickable && color === 'green',
+      },
+      {
+        'hover:bg-red-600 dark:hover:bg-red-700': clickable && color === 'red',
+      },
+      {
+        'hover:bg-sky-300 dark:hover:bg-sky-700': clickable && color === 'blue',
+      },
+      {
+        'hover:white-bg-hover hover:dark:dark-bg-hover':
+          clickable && color === 'default',
+      },
+    ]"
+    @click="emits('boxClick')"
+  >
+    <div
+      v-if="title || description"
+      class="flex items-center gap-x-4 border-b border-gray-200 dark:border-neutral-600 px-6 py-5"
+    >
+      <div class="font-medium leading-6 max-w-full">
+        <div class="row gap-x-3 items-center truncate">
+          <slot name="title" />
+          {{ title }}
+        </div>
+        <div class="text-sm leading-6 font-extralight">
+          {{ description }}
+        </div>
+      </div>
+      <Menu
+        v-if="menuItems && menuItems.length > 0"
+        as="div"
+        class="relative ml-auto"
+      >
+        <MenuButton
+          class="-m-2.5 block p-2.5 text-gray-400 hover:text-gray-500"
+          @click="($event) => $event.stopPropagation()"
+        >
+          <span class="sr-only">Open options</span>
+          <EllipsisHorizontalIcon class="icon-md" aria-hidden="true" />
+        </MenuButton>
+        <transition
+          enter-active-class="transition ease-out duration-100"
+          enter-from-class="transform opacity-0 scale-95"
+          enter-to-class="transform opacity-100 scale-100"
+          leave-active-class="transition ease-in duration-75"
+          leave-from-class="transform opacity-100 scale-100"
+          leave-to-class="transform opacity-0 scale-95"
+        >
+          <MenuItems
+            class="absolute right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-hidden bg-white dark:bg-black"
+          >
+            <MenuItem v-for="menuItem in menuItems" v-slot="{ active }">
+              <div
+                :class="[
+                  active ? 'cursor-pointer bg-gray-50 dark:bg-gray-800' : '',
+                  'block px-3 py-1 text-sm leading-6',
+                ]"
+                @click.stop="emits('menuClick', menuItem)"
+              >
+                {{ menuItem }}
+              </div>
+            </MenuItem>
+          </MenuItems>
+        </transition>
+      </Menu>
+    </div>
+    <dl
+      class="-my-3 divide-y divide-gray-200 dark:divide-neutral-600 px-6 py-4 text-sm leading-6"
+    >
+      <slot name="content" />
+    </dl>
+  </li>
+</template>
+<script setup>
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import { EllipsisHorizontalIcon } from "@heroicons/vue/20/solid";
+
+const props = defineProps({
+  title: String,
+  description: {
+    type: String,
+    default: "",
+  },
+  menuItems: Array,
+  color: {
+    type: String,
+    default: "default",
+  },
+  clickable: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(["boxClick", "menuClick"]);
+</script>

package/src/components/common/Carousel.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="relative">
+    <slot name="content" />
+    <!-- slider buttons -->
+    <button
+      v-if="size > 1"
+      type="button"
+      class="absolute top-0 start-0 z-30 flex items-center justify-center h-full cursor-pointer group focus:outline-hidden"
+      @click="slideLeft"
+    >
+      <ChevronLeftIcon class="icon-lg" />
+    </button>
+    <button
+      v-if="size > 1"
+      type="button"
+      class="absolute top-0 end-0 z-30 flex items-center justify-center h-full cursor-pointer group focus:outline-hidden"
+      @click="slideRight"
+    >
+      <ChevronRightIcon class="icon-lg" />
+    </button>
+    <!-- sliders -->
+    <div
+      class="absolute z-30 flex -translate-x-1/2 space-x-3 bottom-2 left-1/2"
+    >
+      <button
+        v-for="(a, i) in sizeArray"
+        type="button"
+        :class="[
+          'w-3 h-3 rounded-full',
+          current === i
+            ? 'bg-gray-400 dark:bg-gray-300'
+            : 'bg-gray-200 dark:bg-gray-600',
+        ]"
+        @click="emits('update', i)"
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed } from "vue";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/20/solid";
+
+// props and emits
+const props = defineProps({
+  current: Number,
+  size: Number,
+});
+const emits = defineEmits(["update"]);
+// computed
+const sizeArray = computed(() => Array.from({ length: props.size }));
+// function defs
+function slideLeft() {
+  if (props.current === 0) {
+    emits("update", props.size - 1);
+  } else {
+    emits("update", props.current - 1);
+  }
+}
+function slideRight() {
+  if (props.current === props.size - 1) {
+    emits("update", 0);
+  } else {
+    emits("update", props.current + 1);
+  }
+}
+</script>

package/src/components/common/CategoryCard.vue

@@ -0,0 +1,28 @@
+<template>
+  <GreyForm>
+    <div class="mb-3 flex items-center justify-between relative">
+      <slot name="icon" />
+      <div class="min-w-0 flex-1">
+        <h3 class="row truncate font-medium">
+          {{ category.name || category }}
+          <slot name="title" />
+        </h3>
+      </div>
+      <div class="flex mt-0 ml-4">
+        <slot name="header" />
+      </div>
+    </div>
+    <slot />
+  </GreyForm>
+</template>
+
+<script setup>
+import { GreyForm } from "@/components";
+
+const props = defineProps({
+  category: {
+    type: [Object, String],
+    required: true,
+  },
+});
+</script>

package/src/components/common/CodeEditor.vue

@@ -0,0 +1,59 @@
+<template>
+  <PrismEditor
+    class="editor-style"
+    v-bind="$attrs"
+    :style="`fontSize: ${props.fontSize}`"
+    :readonly="props.readonly"
+    :tab-size="props.tabSize"
+    :highlight="highlighter"
+    :line-numbers="props.lineNumbers"
+  />
+</template>
+<script setup>
+import { PrismEditor } from "vue-prism-editor";
+import { fpl2, fpl2Traces } from "@/constants/fpl2";
+import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
+import { highlight } from "prismjs/components/prism-core";
+import "@/assets/prism-theme.css"; // import syntax highlighting styles
+
+// props and emits
+const props = defineProps({
+  fontSize: {
+    type: String,
+    default: "12px",
+  },
+  isFPL: {
+    type: Boolean,
+    default: true,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  lineNumbers: {
+    type: Boolean,
+    default: false,
+  },
+  tabSize: {
+    type: Number,
+    default: 4,
+  },
+  noHighlight: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// function defs
+function highlighter(code) {
+  if (code.length > 100000) {
+    return highlight(code, {});
+  }
+  if (props.noHighlight) {
+    return highlight(code, {});
+  } else if (props.isFPL) {
+    return highlight(code, fpl2);
+  }
+  return highlight(code, fpl2Traces); // languages.<insert language> to return html with markup
+}
+</script>

package/src/components/common/DatePicker.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="flex justify-center">
+    <vue-tailwind-datepicker
+      v-model="dateValue"
+      no-input
+      :disable-date="(date) => date > new Date()"
+      as-single
+      use-range
+      :shortcuts="false"
+      @update:model-value="emits('setTime', dateValue)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import VueTailwindDatepicker from "vue-tailwind-datepicker";
+
+const emits = defineEmits(["setTime"]);
+const dateValue = ref([]);
+</script>

package/src/components/common/DatePickerInput.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="col">
+    <vue-tailwind-datepicker :shortcuts="customShortcuts" v-model="dateValue" />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from "vue";
+import VueTailwindDatepicker from "vue-tailwind-datepicker";
+import moment from "moment";
+
+const props = defineProps({
+  from: Number,
+  to: Number,
+});
+const emits = defineEmits(["selectTime"]);
+const dateValue = ref([]);
+
+watch(dateValue, (val) => {
+  emits("selectTime", [moment(val[0]).valueOf(), moment(val[1]).valueOf()]);
+});
+watch(
+  () => props.from,
+  (val) => {
+    if (val) {
+      dateValue.value[0] = formatTime(val);
+    } else {
+      resetDate();
+    }
+  }
+);
+watch(
+  () => props.to,
+  (val) => {
+    if (val) {
+      dateValue.value[1] = formatTime(val);
+    }
+  }
+);
+
+onMounted(() => {
+  if (props.from && props.to) {
+    const fromFormatted = formatTime(props.from);
+    const toFormatted = formatTime(props.to);
+    dateValue.value = [fromFormatted, toFormatted];
+  } else {
+    resetDate();
+  }
+});
+
+function customShortcuts() {
+  const date = moment().valueOf();
+  return [
+    {
+      label: "Last Hour",
+      atClick: () => {
+        return [moment().subtract(1, "hours").valueOf(), date];
+      },
+    },
+    {
+      label: "Last Three Hours",
+      atClick: () => {
+        return [moment().subtract(3, "hours").valueOf(), date];
+      },
+    },
+    {
+      label: "Last Six Hours",
+      atClick: () => {
+        return [moment().subtract(6, "hours").valueOf(), date];
+      },
+    },
+    {
+      label: "Last Twelve Hours",
+      atClick: () => {
+        return [moment().subtract(12, "hours").valueOf(), date];
+      },
+    },
+    {
+      label: "Last Day",
+      atClick: () => {
+        return [moment().subtract(1, "days").valueOf(), date];
+      },
+    },
+    {
+      label: "Last Three Days",
+      atClick: () => {
+        return [moment().subtract(3, "days").valueOf(), date];
+      },
+    },
+    {
+      label: "Last Week",
+      atClick: () => {
+        return [moment().subtract(7, "days").valueOf(), date];
+      },
+    },
+  ];
+}
+
+function resetDate() {
+  dateValue.value = [
+    formatTime(moment().subtract(1, "hours")),
+    formatTime(moment()),
+  ];
+}
+
+function formatTime(time) {
+  return moment(time).format("YYYY-MM-DD HH:mm:ss");
+}
+</script>

package/src/components/common/Dialog.vue

@@ -0,0 +1,103 @@
+<template>
+  <TransitionRoot appear :show="open" as="template">
+    <Dialog as="div" @close="emits('close')" class="relative z-40">
+      <TransitionChild
+        as="template"
+        enter="duration-300 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-200 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div
+          class="fixed inset-0 bg-gray-500/75 transition-opacity"
+        />
+      </TransitionChild>
+
+      <div class="fixed inset-0 overflow-y-auto">
+        <div
+          class="flex min-h-full items-center justify-center p-4 text-center"
+        >
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
+          >
+            <DialogPanel
+              :class="[
+                'white-bg dark:dark-bg transform rounded-2xl p-6 text-left align-middle shadow-xl transition-all',
+                { 'w-full max-w-md': size === 'small' },
+                {
+                  'min-w-150 px-4 pb-4 pt-5 sm:my-8 w-full sm:max-w-lg sm:p-6':
+                    size === 'medium',
+                },
+                {
+                  'px-4 pb-4 pt-5 sm:my-8 w-full sm:max-w-4xl sm:p-6':
+                    size === 'large',
+                },
+                {
+                  'px-4 pb-4 pt-5 sm:my-8 w-full sm:max-w-7xl sm:p-6':
+                    size === 'xlarge',
+                },
+              ]"
+            >
+              <DialogTitle
+                as="h3"
+                class="relative text-lg font-medium leading-6"
+              >
+                {{ title }}
+                <div v-if="loading" class="mx-2 inline-block spinner"></div>
+                <div class="absolute right-2 top-0">
+                  <slot name="header" />
+                </div>
+              </DialogTitle>
+              <p class="text-xs">{{ description }}</p>
+              <div class="pt-4">
+                <slot name="content" />
+              </div>
+              <div class="mt-4 space-x-3">
+                <slot name="footer" />
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import {
+  TransitionRoot,
+  TransitionChild,
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+} from "@headlessui/vue";
+
+const props = defineProps({
+  open: Boolean,
+  title: String,
+  description: {
+    type: String,
+    default: "",
+  },
+  size: {
+    type: String,
+    default: "small",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(["close"]);
+const open = computed(() => props.open);
+const title = computed(() => props.title);
+</script>

package/src/components/common/EditorHeading.vue

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

package/src/components/common/EventList.vue

@@ -0,0 +1,41 @@
+<template>
+  <ul
+    role="list"
+    class="divide-y divide-gray-300 h-full list-style overflow-auto p-2"
+  >
+    <li
+      v-for="event in events"
+      class="relative flex justify-between hover:bg-gray-500 cursor-pointer"
+      @click="emits('copy', event)"
+    >
+      <p class="font-light leading-5 truncate">
+        {{ event.substring(0, 100) }}
+      </p>
+      <div class="flex items-center">
+        <ClipboardIcon
+          class="icon-md flex-none text-gray-400"
+          aria-hidden="true"
+        />
+      </div>
+    </li>
+    <li v-if="events.length === 0" class="px-2">
+      <p class="font-light leading-5">No events found</p>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { ClipboardIcon } from "@heroicons/vue/20/solid";
+const props = defineProps({
+  events: Array,
+});
+const emits = defineEmits(["copy"]);
+</script>
+
+<style scoped>
+.list-style {
+  background: #303030;
+  color: #ffffff;
+  font-size: 14px;
+}
+</style>