fluency-v8-components 1.3.5 → 1.3.7

package/src/components/common/Facet.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="hidden md:col md:h-full overflow-hidden">
+    <div v-if="searchBar" class="flex">
+      <SearchBar
+        class="w-full"
+        :str="str"
+        @search="emits('search')"
+        @update="emits('updateStr', $event)"
+      />
+    </div>
+    <div class="h-0 flex-1 overflow-y-auto px-1">
+      <div v-if="tree.length == 0" class="q-ml-md text-bold">
+        No Facet data. Please select a search query.
+      </div>
+      <div v-for="primary in tree" :key="primary.id" class="primary">
+        <Leaf
+          :parent="primary"
+          :children="primary.children"
+          :clear="clearStates"
+          :facet-options="facetOptions"
+          :tooltip="tooltip"
+          @newState="updateParent"
+        />
+        <Separator />
+      </div>
+    </div>
+    <!--div v-if="buttons" class="absolute bottom-5"-->
+    <div v-if="buttons" class="flex flex-shrink-0 px-1 py-1">
+      <span class="relative isolate inline-flex rounded-md shadow-xs">
+        <button
+          type="button"
+          class="action-btn std-red rounded-l-md"
+          @click="emits('reset')"
+          @mouseover="mouseoverTooltip(true, 'Reset Facet')"
+          @mouseout="mouseoverTooltip(false)"
+        >
+          <XMarkIcon class="icon-md" aria-hidden="true" />
+        </button>
+        <button
+          type="button"
+          class="action-btn std-blue"
+          @click="emits('edit')"
+          @mouseover="mouseoverTooltip(true, 'Edit Facet')"
+          @mouseout="mouseoverTooltip(false)"
+        >
+          <PencilSquareIcon class="icon-md" aria-hidden="true" />
+        </button>
+        <button
+          type="button"
+          class="action-btn std-blue"
+          @click="emits('save')"
+          @mouseover="mouseoverTooltip(true, 'Save Facet')"
+          @mouseout="mouseoverTooltip(false)"
+        >
+          <SaveIcon class="icon-md" aria-hidden="true" />
+        </button>
+        <!--button
+          type="button"
+          class="action-btn std-green"
+          @click="emits('download')"
+          @mouseover="mouseoverTooltip(true, 'Download Facet')"
+          @mouseout="mouseoverTooltip(false)"
+        >
+          <ArrowDownTrayIcon class="icon-md" aria-hidden="true" />
+        </button-->
+        <button
+          type="button"
+          class="action-btn std-blue rounded-r-md"
+          @click="emits('search')"
+          @mouseover="mouseoverTooltip(true, 'Search')"
+          @mouseout="mouseoverTooltip(false)"
+        >
+          <MagnifyingGlassIcon class="icon-md" aria-hidden="true" />
+        </button>
+        <Tooltip
+          :tooltip="tooltipVal"
+          :showingTooltip="showingTooltip"
+          direction="top"
+          style="transform: translateY(-40%)"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+
+<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 {
+  ArrowDownTrayIcon,
+  MagnifyingGlassIcon,
+  PencilSquareIcon,
+  XMarkIcon,
+} from "@heroicons/vue/20/solid";
+
+// props and emits
+const props = defineProps({
+  tree: {
+    type: Array<any>,
+    default: [],
+  },
+  facetOptions: {
+    type: Object,
+    default: {},
+  },
+  state: {
+    type: Number,
+    default: 0,
+  },
+  searchBar: {
+    type: Boolean,
+    default: true,
+  },
+  tooltip: {
+    type: Boolean,
+    default: false,
+  },
+  buttons: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits([
+  "search",
+  "updateStr",
+  "reset",
+  "edit",
+  "save",
+  "download",
+  "search",
+]);
+// states
+const must = ref(props.facetOptions?.mustFilters);
+const mustnot = ref(props.facetOptions?.mustNotFilters);
+const str = ref(props.facetOptions?.searchStr);
+const clearStates = ref(props.state);
+const showingTooltip = ref(false);
+const tooltipVal = ref("");
+
+// methods
+function addList(tag: FacetTag, list: Array<any>) {
+  const parent = list.find((e) => e.field === tag.parent);
+  if (typeof parent !== "undefined") {
+    parent.terms.push(tag.child);
+  } else {
+    list.push({
+      field: tag.parent,
+      terms: [tag.child],
+    });
+  }
+}
+
+function removeList(tag: FacetTag, list: Array<any>) {
+  const parent = list.find((e) => e.field === tag.parent);
+  if (typeof parent !== "undefined") {
+    const index = parent.terms.indexOf(tag.child);
+    if (index > -1) {
+      parent.terms.splice(index, 1);
+      if (parent.terms.length === 0) {
+        const parentIndex = list.findIndex((e) => e.field === tag.parent);
+        list.splice(parentIndex, 1);
+      }
+    }
+  }
+}
+
+function updateParent(parent: string, child: string, newState: string) {
+  if (newState === "checked") {
+    statusChecked({ parent: parent, child: child });
+  } else if (newState === "ignored") {
+    statusIgnore({ parent: parent, child: child });
+  } else {
+    statusUnchecked({ parent: parent, child: child });
+  }
+}
+
+function statusChecked(tag: FacetTag) {
+  addList(tag, must.value);
+}
+
+function statusIgnore(tag: FacetTag) {
+  removeList(tag, must.value);
+  addList(tag, mustnot.value);
+}
+
+function statusUnchecked(tag: FacetTag) {
+  removeList(tag, mustnot.value);
+}
+
+function mouseoverTooltip(show: boolean, val = "") {
+  showingTooltip.value = show;
+  tooltipVal.value = val;
+}
+</script>
+<style scoped>
+.primary {
+  font-weight: 400;
+  padding-top: 5px;
+}
+
+.primary:first-child {
+  font-weight: 400;
+}
+</style>

package/src/components/common/Feed.vue

@@ -0,0 +1,58 @@
+<template>
+  <ul role="list" class="space-y-6">
+    <li v-for="(activity, i) in data" class="relative flex gap-x-4">
+      <div
+        :class="[
+          i === data.length - 1 ? 'h-6' : '-bottom-6',
+          'absolute left-0 top-0 flex w-6 justify-center',
+        ]"
+      >
+        <div class="w-px bg-gray-200" />
+      </div>
+      <div
+        class="relative flex icon-lg flex-none items-center justify-center bg-white dark:bg-black"
+      >
+        <CheckCircleIcon
+          v-if="activity.action === 'resolve'"
+          class="icon-lg icon-green"
+          aria-hidden="true"
+        />
+        <ExclamationCircleIcon
+          v-else-if="activity.action === 'trigger'"
+          class="icon-lg icon-red"
+          aria-hidden="true"
+        />
+        <div
+          v-else
+          class="h-1.5 w-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300"
+        />
+      </div>
+      <p
+        class="flex-auto py-0.5 text-xs leading-5 text-gray-500 dark:text-gray-400"
+      >
+        <span class="font-medium text-gray-900 dark:text-gray-200">{{
+          activity.source
+        }}</span>
+        {{ activity.action }} the alert.
+      </p>
+      <time
+        :datetime="activity.timestamp"
+        class="flex-none py-0.5 text-xs leading-5 text-gray-500 dark:text-gray-400"
+      >
+        {{ timeFromNow(activity.timestamp) }}
+      </time>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+} from "@heroicons/vue/24/solid";
+import { timeFromNow } from "@/utils/timeUtils";
+
+const props = defineProps({
+  data: Array,
+});
+</script>

package/src/components/common/Flag.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <span
+      v-if="country"
+      :class="[
+        'fi mr-1',
+        { 'fis': props.squared },
+        `fi-${props.country.toLowerCase()}`,
+      ]"
+      :title="country"
+    />
+    <span v-if="city" class="text-xs">{{ city }}, {{ org }}</span>
+  </div>
+</template>
+<script setup>
+// props and emits
+const props = defineProps({
+  country: String,
+  city: String,
+  org: String,
+  squared: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits([]);
+</script>

package/src/components/common/HomeCard.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="relative rounded-3xl p-2 px-4 white-bg dark:dark-bg">
+    <div class="row">
+      <slot name="top-left" />
+      <PageHeading :title="title" :description="description" size="text-lg" />
+    </div>
+    <div class="absolute top-2 right-3">
+      <slot name="top-right" />
+    </div>
+    <slot name="content" />
+  </div>
+</template>
+<script setup>
+import { PageHeading } from "@/components";
+
+const props = defineProps({
+  title: String,
+  description: String,
+});
+</script>

package/src/components/common/ItemBox.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    :class="[
+      {'disabled-box': props.disabled },
+      { 'selected-green-box': props.inUse && props.selected && !props.disabled },
+      {
+        'green-box': props.inUse && !props.selected && !props.disabled,
+      },
+      { 'selected-blue-box': !props.inUse && props.selected && !props.disabled },
+      {
+        'blue-box': !props.inUse && !props.selected && !props.disabled,
+      },
+      'box',
+    ]"
+    :style="`min-width: ${minWidth}`"
+    @click="emits('view')"
+  >
+    <slot name="icon" />
+    <img v-if="props.icon" :src="props.icon" :alt="props.icon" :style="`height: ${props.iconHeight}`" />
+    <div class="ml-2 flex-col">
+      <div class="text-md">{{ props.title }}</div>
+      <div class="text-xs font-light">{{ props.description }}</div>
+      <slot name="extra" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  inUse: Boolean,
+  selected: Boolean,
+  icon: String,
+  iconHeight: {
+    type: String,
+    default: "40px",
+  },
+  minWidth: {
+    type: String,
+    default: "250px",
+  },
+  title: String,
+  description: String,
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(["view"]);
+</script>

package/src/components/common/Loading.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="flex">
+    <div
+      class="animate-ping rounded-full w-8 h-8 relative -left-3 -top-3 bg-indigo-600"
+    ></div>
+    <div
+      class="rounded-full w-8 h-8 relative -left-11 -top-3 bg-teal-500"
+    ></div>
+    <div class="loading">{{ text }}</div>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  text: {
+    type: String,
+    default: "Loading...",
+  },
+});
+</script>

package/src/components/common/LoadingDots.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="row gap-x-1">
+    <span class="sr-only">Loading...</span>
+    <div
+      class="icon-md bg-indigo-600 rounded-full animate-bounce [animation-delay:-0.3s]"
+    ></div>
+    <div
+      class="icon-md bg-indigo-600 rounded-full animate-bounce [animation-delay:-0.15s]"
+    ></div>
+    <div class="icon-md bg-indigo-600 rounded-full animate-bounce"></div>
+  </div>
+</template>

package/src/components/common/PageHeading.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="md:flex md:items-center md:justify-between">
+    <div class="min-w-0 flex-1 font-normal" @click="emits('title')">
+      <h2 :class="`${size} leading-7 sm:truncate sm:tracking-tight`">
+        {{ title }}
+      </h2>
+      <div class="sm:flex sm:items-center">
+        <div class="sm:flex-auto">
+          <!--h1 class="title2">Invoices</h1 -->
+          <p class="text-sm">{{ description }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="mt-4 flex md:mt-0 md:ml-4">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: String,
+  description: String,
+  size: {
+    type: String,
+    default: "text-2xl",
+  },
+});
+const emits = defineEmits(["title"]);
+</script>

package/src/components/common/Pagination.vue

@@ -0,0 +1,105 @@
+<template>
+  <nav
+    class="flex items-center bg-neutral-200 dark:dark-bg justify-between px-4 py-3 sm:px-6 rounded-lg"
+    aria-label="Pagination"
+  >
+    <div class="hidden sm:block">
+      <p class="text-sm">
+        Showing
+        {{ " " }}
+        <span class="font-medium">{{ total === 0 ? 0 : startPos + 1 }} </span>
+        {{ " " }}
+        to
+        {{ " " }}
+        <span class="font-medium">{{
+          startPos + pageSize > total ? total : startPos + pageSize
+        }}</span>
+        {{ " " }}
+        of
+        {{ " " }}
+        <span class="font-medium">{{ total }}</span>
+        {{ " " }}
+        {{ resultsText }}
+      </p>
+    </div>
+    <div class="flex flex-1 space-x-3 sm:justify-end">
+      <nav
+        class="isolate inline-flex -space-x-px rounded-md shadow-xs"
+        aria-label="Pagination"
+      >
+        <a
+          class="relative inline-flex items-center rounded-l-md px-2 py-2 ring-1 ring-inset ring-gray-300 std-white dark:std-dark"
+          @click="emit('previous')"
+        >
+          <span class="sr-only">Previous</span>
+          <ChevronLeftIcon class="icon-md" aria-hidden="true" />
+        </a>
+        <!-- Current: "z-10 bg-indigo-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600", Default: "text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0" -->
+        <a
+          v-for="(page, index) in pages"
+          :class="[
+            'relative inline-flex items-center px-4 py-1 ring-1 ring-inset ring-gray-300',
+            startPos / pageSize + 1 === page
+              ? 'std-blue text-white'
+              : 'std-white dark:std-dark',
+          ]"
+          @click="page !== '...' ? emit('navtopage', page) : null"
+        >
+          {{ page }}
+        </a>
+        <a
+          class="relative inline-flex items-center rounded-r-md px-2 py-2 ring-1 ring-inset ring-gray-300 std-white dark:std-dark"
+          @click="emit('next')"
+        >
+          <span class="sr-only">Previous</span>
+          <ChevronRightIcon class="icon-md" aria-hidden="true" />
+        </a>
+      </nav>
+    </div>
+  </nav>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/20/solid";
+
+const emit = defineEmits(["previous", "next", "navtopage"]);
+const props = defineProps({
+  startPos: {
+    type: Number,
+    required: true,
+  },
+  pageSize: {
+    type: Number,
+    default: 10,
+  },
+  total: {
+    type: Number,
+    required: true,
+  },
+  resultsText: {
+    type: String,
+    default: "results",
+  },
+});
+
+const pages = computed(() => {
+  const pagesCount = (props.total + props.pageSize - 1) / props.pageSize;
+  const arr = Array.from({ length: pagesCount }, (_, i) => i + 1);
+  const current = props.startPos / props.pageSize + 1;
+
+  if (arr.length > 5) {
+    if (current < 4) return [...arr.slice(0, 4), "...", arr.length];
+    else if (current > arr.length - 3) return [1, "...", ...arr.slice(-4)];
+    return [
+      1,
+      "...",
+      ...Array.from({ length: 5 }, (_, i) => current - 2 + i),
+      "...",
+      arr.length,
+    ];
+  }
+
+  return arr;
+});
+</script>

package/src/components/common/Popover.vue

@@ -0,0 +1,24 @@
+<template>
+  <Popover class="relative">
+    <PopoverButton>
+      <slot name="button" />
+    </PopoverButton>
+    <PopoverPanel
+      :class="['absolute z-10', direction === 'right' ? 'left-0' : 'right-0']"
+    >
+      <slot name="content" />
+    </PopoverPanel>
+  </Popover>
+</template>
+
+<script setup>
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
+
+// props and emits
+const props = defineProps({
+  direction: {
+    type: String,
+    default: "right",
+  },
+});
+</script>

package/src/components/common/PowerToggle.vue

@@ -0,0 +1,130 @@
+<template>
+  <Switch
+    v-bind="$attrs"
+    :class="[
+      forceActive || $attrs.modelValue === powerState
+        ? 'bg-green-600'
+        : 'bg-red-500',
+      readonly ? 'cursor-not-allowed' : 'cursor-pointer',
+      { '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',
+    ]"
+    :disabled="props.readonly"
+    @update:model-value="emits('toggle')"
+    @mouseover="toggleTooltip(true)"
+    @mouseout="toggleTooltip(false)"
+  >
+    <span class="sr-only">Use setting</span>
+    <span
+      :class="[
+        forceActive || $attrs.modelValue === powerState
+          ? props.size === 'sm'
+              ? 'translate-x-3'
+              : 'translate-x-5'
+          : 'translate-x-0',
+        { 'h-5 w-5': 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',
+      ]"
+    >
+      <span
+        :class="[
+          forceActive || $attrs.modelValue === powerState
+            ? 'opacity-0 duration-100 ease-out'
+            : 'opacity-100 duration-200 ease-in',
+          'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
+        ]"
+        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>
+        <XMarkIcon
+          v-else
+          class="icon-md flex-shrink-0 text-red-600"
+          aria-hidden="true"
+        />
+      </span>
+      <span
+        :class="[
+          forceActive || $attrs.modelValue === powerState
+            ? 'opacity-100 duration-200 ease-in'
+            : 'opacity-0 duration-100 ease-out',
+          'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
+        ]"
+        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>
+        <CheckIcon
+          v-else
+          class="icon-md flex-shrink-0 text-green-600"
+          aria-hidden="true"
+        />
+      </span>
+    </span>
+    <Tooltip :tooltip="tooltip" :showingTooltip="showTooltip" />
+  </Switch>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { Switch } from "@headlessui/vue";
+import { XMarkIcon, CheckIcon } from "@heroicons/vue/24/outline";
+import { Tooltip } from "@/components";
+
+const props = defineProps({
+  power: {
+    type: Boolean,
+    default: true,
+  },
+  powerState: {
+    type: Boolean || null,
+    default: true,
+  },
+  forceActive: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  tooltip: {
+    type: String,
+    default: "",
+  },
+  size: {
+    type: String,
+    default: "md",
+  },
+});
+const emits = defineEmits(["toggle"]);
+const showTooltip = ref(false);
+
+function toggleTooltip(val) {
+  if (props.tooltip) {
+    showTooltip.value = val;
+  }
+}
+</script>