fluency-v8-components 1.3.5 → 1.3.6

package/src/components/notifications/Notify.vue

@@ -0,0 +1,123 @@
+<!-- TODO: dark mode -->
+<template>
+  <TransitionRoot as="template" :show="open">
+    <Dialog
+      v-if="isDialog"
+      as="div"
+      :class="success ? 'bg-green-50' : 'bg-red-50'"
+      class="rounded-md p-4 fixed bottom-5 z-50"
+      style="min-width: 75%; left: 50%; transform: translateX(-50%)"
+      @close="closeModal"
+    >
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <CheckCircleIcon
+            v-if="success"
+            class="icon-md text-green-400"
+            aria-hidden="true"
+          />
+          <XCircleIcon v-else class="icon-md text-red-400" aria-hidden="true" />
+        </div>
+        <div class="ml-3">
+          <h3 v-if="success" class="text-sm font-medium text-green-800">
+            {{ title }}
+          </h3>
+          <h3 v-else class="text-sm font-medium text-red-800">{{ title }}</h3>
+          <div v-if="success" class="mt-2 text-sm text-green-700">
+            <p>{{ msg }}</p>
+          </div>
+          <div v-else class="mt-2 text-sm text-red-700">
+            <p>{{ msg }}</p>
+          </div>
+        </div>
+        <div class="ml-auto pl-3">
+          <div class="-mx-1.5 -my-1.5">
+            <IconButton :color="getColor()" @click="closeModal">
+              <XMarkIcon class="icon-md" aria-hidden="true" />
+            </IconButton>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+    <div
+      v-else
+      :class="success ? 'bg-green-50' : 'bg-red-50'"
+      class="rounded-md p-4 fixed bottom-5 z-50"
+      style="min-width: 75%; left: 50%; transform: translateX(-50%)"
+    >
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <CheckCircleIcon
+            v-if="success"
+            class="icon-md text-green-400"
+            aria-hidden="true"
+          />
+          <XCircleIcon v-else class="icon-md text-red-400" aria-hidden="true" />
+        </div>
+        <div class="ml-3">
+          <h3 v-if="success" class="text-sm font-medium text-green-800">
+            {{ title }}
+          </h3>
+          <h3 v-else class="text-sm font-medium text-red-800">{{ title }}</h3>
+          <div v-if="success" class="mt-2 text-sm text-green-700">
+            <p>{{ msg }}</p>
+          </div>
+          <div v-else class="mt-2 text-sm text-red-700">
+            <p>{{ msg }}</p>
+          </div>
+        </div>
+        <div class="ml-auto pl-3">
+          <div class="-mx-1.5 -my-1.5">
+            <IconButton :color="getColor()" @click="closeModal">
+              <XMarkIcon class="icon-md" aria-hidden="true" />
+            </IconButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </TransitionRoot>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { TransitionRoot, Dialog } from "@headlessui/vue";
+import { CheckCircleIcon, XCircleIcon } from "@heroicons/vue/24/outline";
+import { XMarkIcon } from "@heroicons/vue/20/solid";
+import { IconButton } from "..";
+
+const open = ref(false);
+const msg = ref("");
+const success = ref(false);
+const title = ref("");
+const refresh = ref();
+const isDialog = ref(false);
+
+// function defs
+function openModal(t: string, m: string, s: boolean) {
+  clearTimeout(refresh.value);
+  title.value = t;
+  msg.value = m;
+  success.value = s;
+  open.value = true;
+  // check if dialog is open
+  const dialogs = window.document.querySelectorAll("#headlessui-portal-root");
+  isDialog.value =
+    dialogs && dialogs.length > 0 && dialogs[0].childElementCount > 1;
+  // auto close the notification after 5 seconds
+  refresh.value = setTimeout(() => {
+    closeModal();
+  }, 3000);
+}
+
+function closeModal() {
+  open.value = false;
+}
+
+function getColor() {
+  return success.value ? "green" : "red";
+}
+
+defineExpose({
+  openModal,
+});
+</script>

package/src/components/notifications/NotifyList.vue

@@ -0,0 +1,130 @@
+<template>
+  <TransitionRoot as="template" :show="open">
+    <Dialog
+      v-if="isDialog"
+      as="div"
+      :class="success ? 'bg-green-50' : 'bg-red-50'"
+      class="rounded-md p-4 fixed bottom-5 z-50"
+      style="min-width: 75%; left: 50%; transform: translateX(-50%)"
+      @close="closeModal"
+    >
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <CheckCircleIcon
+            v-if="success"
+            class="icon-md text-green-400"
+            aria-hidden="true"
+          />
+          <XCircleIcon v-else class="icon-md text-red-400" aria-hidden="true" />
+        </div>
+        <div class="ml-3">
+          <h3 v-if="success" class="text-sm font-medium text-green-800">
+            {{ title }}
+          </h3>
+          <h3 v-else class="text-sm font-medium text-red-800">{{ title }}</h3>
+          <div v-if="success" class="mt-2 text-sm text-green-700">
+            <ul role="list" class="list-disc space-y-1 pl-5">
+              <li v-for="item in list" :key="item">{{ item }}</li>
+            </ul>
+          </div>
+          <div v-else class="mt-2 text-sm text-red-700">
+            <ul role="list" class="list-disc space-y-1 pl-5">
+              <li v-for="item in list" :key="item">{{ item }}</li>
+            </ul>
+          </div>
+        </div>
+        <div class="ml-auto pl-3">
+          <div class="-mx-1.5 -my-1.5">
+            <IconButton :color="getColor()" @click="closeModal">
+              <XMarkIcon class="icon-md" aria-hidden="true" />
+            </IconButton>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+    <div
+      v-else
+      :class="success ? 'bg-green-50' : 'bg-red-50'"
+      class="rounded-md p-4 fixed bottom-5 z-50"
+      style="min-width: 75%; left: 50%; transform: translateX(-50%)"
+    >
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <CheckCircleIcon
+            v-if="success"
+            class="icon-md text-green-400"
+            aria-hidden="true"
+          />
+          <XCircleIcon v-else class="icon-md text-red-400" aria-hidden="true" />
+        </div>
+        <div class="ml-3">
+          <h3 v-if="success" class="text-sm font-medium text-green-800">
+            {{ title }}
+          </h3>
+          <h3 v-else class="text-sm font-medium text-red-800">{{ title }}</h3>
+          <div v-if="success" class="mt-2 text-sm text-green-700">
+            <ul role="list" class="list-disc space-y-1 pl-5">
+              <li v-for="item in list" :key="item">{{ item }}</li>
+            </ul>
+          </div>
+          <div v-else class="mt-2 text-sm text-red-700">
+            <ul role="list" class="list-disc space-y-1 pl-5">
+              <li v-for="item in list" :key="item">{{ item }}</li>
+            </ul>
+          </div>
+        </div>
+        <div class="ml-auto pl-3">
+          <div class="-mx-1.5 -my-1.5">
+            <IconButton :color="getColor()" @click="closeModal">
+              <XMarkIcon class="icon-md" aria-hidden="true" />
+            </IconButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </TransitionRoot>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { TransitionRoot, Dialog } from "@headlessui/vue";
+import { CheckCircleIcon, XCircleIcon } from "@heroicons/vue/24/outline";
+import { XMarkIcon } from "@heroicons/vue/20/solid";
+import { IconButton } from "..";
+
+const open = ref(false);
+const list = ref();
+const success = ref(false);
+const title = ref("");
+const refresh = ref();
+const isDialog = ref(false);
+
+// function defs
+function openModal(t: string, l: string, s: boolean) {
+  clearTimeout(refresh.value);
+  title.value = t;
+  list.value = l;
+  success.value = s;
+  open.value = true;
+  // check if dialog is open
+  const dialogs = window.document.querySelectorAll("#headlessui-portal-root");
+  isDialog.value =
+    dialogs && dialogs.length > 0 && dialogs[0].childElementCount > 1;
+  // auto close the notification after 5 seconds
+  refresh.value = setTimeout(() => {
+    closeModal();
+  }, 5000);
+}
+
+function closeModal() {
+  open.value = false;
+}
+
+function getColor() {
+  return success.value ? "green" : "red";
+}
+
+defineExpose({
+  openModal,
+});
+</script>

package/src/components/page-structure/FacetPage.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <AutoCompleteSearchBar
+      v-if="searchBar && !hideSearch"
+      :str="facetOptions.searchStr"
+      :dict="dict"
+      class="my-2 pb-2"
+      @search="emits('search', $event)"
+    >
+      <template #right>
+        <Sort
+          v-if="sortable"
+          class="ml-2"
+          :options="sortBy"
+          :current="currentSort"
+          @sort="emits('sort', $event)"
+        />
+      </template>
+    </AutoCompleteSearchBar>
+    <div class="grid grid-cols-3 md:grid-cols-4">
+      <div
+        :class="[
+          'w-full col-span-3 md:col md:col-span-1 md:overflow-auto',
+          { 'md:page-height-search': searchBar },
+          { 'md:page-height': !searchBar },
+        ]"
+      >
+        <slot name="facet" />
+      </div>
+      <div
+        :class="[
+          'col-span-3 md:ml-5 md:overflow-auto',
+          { 'md:page-height-search': searchBar },
+          { 'md:page-height': !searchBar },
+        ]"
+      >
+        <slot name="content" />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import Sort from "@/components/common/Sort.vue";
+import AutoCompleteSearchBar from "@/components/common/AutoCompleteSearchBar.vue";
+
+const props = defineProps({
+  searchBar: {
+    type: Boolean,
+    default: false,
+  },
+  hideSearch: {
+    type: Boolean,
+    default: false,
+  },
+  facetOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+  dict: {
+    type: Array,
+    default: () => [],
+  },
+  sortable: {
+    type: Boolean,
+    default: false,
+  },
+  sortBy: {
+    type: Array,
+    default: () => [],
+  },
+  currentSort: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emits = defineEmits(["search", "sort"]);
+</script>

package/src/components/query/Child.vue

@@ -0,0 +1,63 @@
+<template>
+  <ul v-for="child in sortedChildren">
+    <li
+      class="w-full hover:white-bg-hover dark:hover:dark-bg-hover p-2 flex items-center justify-between"
+    >
+      <div :style="`padding-left: ${level * 12}px`">
+        {{ child.exclude ? "NOT " : "" }}
+        {{ child.type !== "bool" ? `${child.type} ` : child.boolType }}{{ child.label }}
+      </div>
+      <div class="flex ml-4">
+        <ActionButtons
+          v-if="!props.readonly"
+          :add="child.type === 'bool'"
+          edit
+          delete
+          @add="clickAdd(false, child)"
+          @edit="clickAdd(true, parent, child)"
+          @delete="parent.children.splice(parent.children.indexOf(child), 1)"
+        />
+      </div>
+    </li>
+    <li>
+      <Child
+        v-if="child.children && child.children.length"
+        :parent="child"
+        :level="level + 2"
+        :readonly="props.readonly"
+        @add="clickAdd"
+      />
+    </li>
+  </ul>
+</template>
+<script setup>
+import { ActionButtons } from "@/components";
+import { computed } from "vue";
+const props = defineProps({
+  parent: Object,
+  level: Number,
+  readonly: {
+    type: [Boolean, Number],
+    default: false,
+  },
+});
+const emits = defineEmits(["add"]);
+const sortedChildren = computed(() => {
+  if (!props.parent.children) {
+    return [];
+  }
+  return props.parent.children.sort((a, b) => {
+    if (a.type === "bool" && b.type !== "bool") {
+      return 1;
+    }
+    if (a.type !== "bool" && b.type === "bool") {
+      return -1;
+    }
+    return 0;
+  });
+});
+
+function clickAdd(isEdit, parent, item = {}) {
+  emits("add", isEdit, parent, item);
+}
+</script>

package/src/components/query/LVDBQuery.vue

@@ -0,0 +1,38 @@
+<template>
+  <ul class="w-full px-2">
+    <li
+      class="w-full hover:white-bg-hover dark:hover:dark-bg-hover p-2 flex items-center justify-between"
+    >
+      <div>{{ local.type }}</div>
+      <div class="flex">
+        <ActionButtons
+          v-if="!local.children?.length && !props.readonly"
+          add
+          @add="clickAdd(false, local)"
+        />
+      </div>
+    </li>
+    <Child :parent="local" :readonly="readonly" :level="2" @add="clickAdd" />
+  </ul>
+</template>
+<script setup>
+import { ref } from "vue";
+import { ActionButtons } from "@/components";
+import Child from "./Child.vue";
+
+// props and emits
+const props = defineProps({
+  query: Object,
+  readonly: {
+    type: [Boolean, Number],
+    default: false,
+  },
+});
+const emits = defineEmits(["add", "delete"]);
+// states
+const local = ref(props.query);
+
+function clickAdd(isEdit, parent, item = {}) {
+  emits("add", isEdit, parent, item);
+}
+</script>

package/src/components/status/Active.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="relative flex items-center justify-center gap-x-2">
+    <div
+      :class="[
+        'flex-none rounded-full p-1',
+        { 'status-positive': active === true },
+        { 'status-negative': !active },
+        { 'status-neutral': active === 'neutral' },
+        { 'status-warning': active === 'warning' },
+      ]"
+      @mouseover="showingTooltip = true"
+      @mouseout="showingTooltip = false"
+    >
+      <div class="icon-xs rounded-full bg-current" />
+    </div>
+    <Tooltip
+      v-if="tooltip"
+      :tooltip="tooltip"
+      :showingTooltip="showingTooltip"
+      :direction="tooltipPosition"
+    />
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import { Tooltip } from "@/components";
+
+const props = defineProps({
+  active: {
+    type: [Boolean, String],
+    default: true,
+  },
+  tooltip: {
+    type: String,
+    default: "",
+  },
+  tooltipPosition: {
+    type: String,
+    default: "top",
+  },
+});
+const active = props.active;
+const showingTooltip = ref(false);
+</script>

package/src/components/status/ScoreLevel.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    :class="[
+      'text-left justify-start inline-flex items-center rounded-sm mx-2 px-2 py-0.5 text-xs font-medium bg-slate-200 dark:bg-slate-700',
+      { 'score-none': scoreLevel === 'none' },
+      { 'score-low': scoreLevel === 'low' },
+      { 'score-medium': scoreLevel === 'medium' },
+      { 'score-serious': scoreLevel === 'serious' },
+      { 'score-high': scoreLevel === 'high' },
+      { 'score-critical': scoreLevel === 'critical' },
+      { 'score-warn': scoreLevel === 'warn' },
+    ]"
+  >
+    <ExclamationTriangleIcon class="icon mr-1" />
+    {{ scoreLevel }}
+  </div>
+</template>
+<script setup>
+import { computed } from "vue";
+import { ExclamationTriangleIcon } from "@heroicons/vue/20/solid";
+const props = defineProps({
+  score: String | Number,
+});
+
+const scoreLevel = computed(() => {
+  if (typeof props.score === "string") {
+    return props.score;
+  }
+  if (props.score === 0) {
+    return "none";
+  } else if (props.score < 1000) {
+    return "low";
+  } else if (props.score < 2000) {
+    return "medium";
+  } else if (props.score < 4000) {
+    return "serious";
+  } else if (props.score < 8000) {
+    return "high";
+  } else {
+    return "critical";
+  }
+});
+</script>

package/src/components/status/Status.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="relative flex items-center justify-center gap-x-2">
+    <div
+      :class="[
+        'flex-none rounded-full p-1',
+        { 'status-positive': props.active },
+        { 'status-negative': props.inactive },
+        { 'status-warning': props.warning },
+      ]"
+      @mouseover="showingTooltip = true"
+      @mouseout="showingTooltip = false"
+    >
+      <div class="icon-xs rounded-full bg-current" />
+    </div>
+    <Tooltip
+      v-if="tooltip"
+      :tooltip="tooltip"
+      :showingTooltip="showingTooltip"
+      :direction="tooltipPosition"
+    />
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import { Tooltip } from "@/components";
+
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  inactive: {
+    type: Boolean,
+    default: false,
+  },
+  warning: {
+    type: Boolean,
+    default: false,
+  },
+  tooltip: {
+    type: String,
+    default: "",
+  },
+  tooltipPosition: {
+    type: String,
+    default: "top",
+  },
+});
+const active = props.active;
+const showingTooltip = ref(false);
+</script>

package/src/components/status/TaskDot.vue

@@ -0,0 +1,25 @@
+<template>
+  <div
+    :class="[
+      'status-dot',
+      status === completeStatus
+        ? 'status-positive'
+        : status === 'error' || status === 'aborted' || status === 'Aborted'
+        ? 'status-negative'
+        : status === 'warning'
+        ? 'status-warning'
+        : 'status-neutral',
+    ]"
+  >
+    <div class="icon-xs rounded-full bg-current" />
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  status: String,
+  completeStatus: {
+    type: String,
+    default: "completed",
+  },
+});
+</script>

package/src/components/status/TaskStatus.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    :class="[
+      'status-dot text-xs',
+      status === completeStatus
+        ? 'status-positive'
+        : status === 'error' ||
+          status === 'Error' ||
+          status === 'aborted' ||
+          status === 'Aborted'
+        ? 'status-negative'
+        : 'status-neutral',
+    ]"
+  >
+    {{ status }}
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  status: String,
+  completeStatus: {
+    type: String,
+    default: "completed",
+  },
+});
+</script>