fluency-v8-components 1.3.5 → 1.3.7

package/src/components/common/VerticalTabs.vue

@@ -0,0 +1,34 @@
+<template>
+  <div
+    v-for="(tab, index) in props.options"
+    :key="index"
+    @click="updateValue(tab)"
+    :class="[
+      current === tab
+        ? 'bg-sky-100 dark:bg-slate-700 text-sky-700 dark:text-sky-100'
+        : 'text-slate-500 dark:text-slate-200 opacity-50',
+      'cursor-pointer rounded-md px-4 py-2 hover:bg-sky-100 dark:hover:bg-slate-800',
+    ]"
+  >
+    {{ tab }}
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  current: {
+    type: String,
+    required: true,
+  },
+  options: {
+    type: Array as any,
+    required: true,
+  },
+});
+
+const emits = defineEmits(["update:tab"]);
+
+function updateValue(value: string) {
+  emits("update:tab", value);
+}
+</script>

package/src/components/common/card/CardItem.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="flex justify-between gap-x-4 py-3">
+    <dt class="text-sm font-light">
+      {{ props.title }}
+    </dt>
+    <dd :class="[
+      'flex flex-wrap items-start gap-x-2 text-sm gap-y-1',
+      { 'break-all': props.break },
+    ]">
+      {{ props.value }}
+      <slot />
+    </dd>
+  </div>
+</template>
+<script lang="ts" setup>
+const props = defineProps({
+  title: {
+    type: [String, Number],
+    required: true,
+  },
+  value: [String, Number],
+  break: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>

package/src/components/common/card/CardItemGroup.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="py-2">
+    <span class="row"> {{ props.title }} </span>
+    <div class="px-2">
+      <div v-for="field in props.fields" class="flex justify-between gap-x-4">
+        <dt class="text-sm font-light">{{ field.name }}</dt>
+        <dd
+          :class="[
+            'flex flex-wrap items-start gap-x-2 text-sm gap-y-1',
+            { 'icon-yellow': field.color === 'yellow'},
+            { 'icon-red': field.color === 'red'},
+            { 'icon-green': field.color === 'green'},
+            { 'cursor-pointer hover:font-bold': props.clickable },
+          ]"
+          @click.stop="emits('clickField', field)"
+        >
+          {{ field.value }}
+        </dd>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+type Field = {
+  name: string | number;
+  value: string | number;
+  color: string;
+}
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  fields: {
+    type: Array as () => Field[],
+    required: true,
+  },
+  clickable: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(['clickField']);
+</script>

package/src/components/common/facet/Leaf.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="text-sm font-light">
+    <div class="flex justify-between pt-3 pb-1 relative">
+      <div
+        class="text-base font-normal max-w-3/4 truncate"
+        @mouseover="tooltip = true"
+        @mouseout="tooltip = false"
+      >
+        {{ parent.title }}
+        <span class="font-light">({{ children.length }})</span>
+      </div>
+      <div class="flex">
+        <PlusCircleIcon class="icon-lg" :class="noMore()" @click="topUp()" />
+        <MinusCircleIcon class="icon-lg" :class="noLess()" @click="topDown()" />
+      </div>
+      <Tooltip
+        v-if="props.tooltip"
+        :tooltip="parent.label"
+        :showingTooltip="tooltip"
+        direction="top"
+        class="left-20"
+      />
+    </div>
+    <div
+      v-for="child in children.slice(0, topLevel)"
+      class="flex justify-between py-1"
+    >
+      <div class="flex items-center min-w-0">
+        <tri-state
+          :state="child.state"
+          @newState="updateParent(parent.label, child.label, $event)"
+        />
+        <div class="px-2 truncate">
+          {{ !child.label ? "-" : child.label }}
+        </div>
+      </div>
+      <div>{{ child.count }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { PlusCircleIcon, MinusCircleIcon } from "@heroicons/vue/20/solid";
+import { Tooltip } from "@/components";
+import TriState from "./TriState.vue";
+
+const props = defineProps({
+  parent: {
+    type: Object,
+    default: {},
+  },
+  children: {
+    type: Array<any>,
+    default: [],
+  },
+  clear: Number,
+  facetOptions: Object,
+  tooltip: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(["newState"]);
+const topLevel = ref(props.parent.show);
+const tooltip = ref(false);
+
+function noMore() {
+  if (topLevel.value < props.children.length) {
+    return "text-sky-600 cursor-pointer";
+  }
+  return "text-gray-400 cursor-not-allowed";
+}
+
+function noLess() {
+  if (topLevel.value === 0 || props.children.length === 0) {
+    return "text-gray-400 cursor-not-allowed";
+  }
+  return "text-sky-600 cursor-pointer";
+}
+
+function topUp() {
+  if (topLevel.value < props.children.length) {
+    topLevel.value += 5;
+  }
+}
+
+function topDown() {
+  if (topLevel.value > 0) {
+    topLevel.value -= 5;
+  }
+}
+
+function updateParent(parent: string, child: string, newState: string) {
+  emits("newState", parent, child, newState);
+}
+</script>

package/src/components/common/facet/TriState.vue

@@ -0,0 +1,37 @@
+<template>
+  <div @click="changeState()">
+    <div v-if="showState === 'unchecked'">
+      <CheckBox />
+    </div>
+    <div v-if="showState === 'checked'">
+      <CheckBox :checked="true" />
+    </div>
+    <div v-if="showState === 'ignored'">
+      <CheckBox :indeterminate="true" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { CheckBox } from "@/components";
+
+const props = defineProps(["state"]);
+const emits = defineEmits(["newState"]);
+
+const showState = ref(props.state);
+
+function changeState() {
+  switch (showState.value) {
+    case "unchecked":
+      showState.value = "checked";
+      break;
+    case "checked":
+      showState.value = "ignored";
+      break;
+    default:
+      showState.value = "unchecked";
+  }
+  emits("newState", showState.value);
+}
+</script>

package/src/components/common/table/TableData.vue

@@ -0,0 +1,48 @@
+<template>
+  <td
+    :colspan="props.colspan"
+    :class="[
+      'table-font',
+      {
+        'cursor-pointer hover:white-bg-hover dark:hover:dark-bg-hover':
+          props.hover,
+      },
+      { 'break-all': props.break },
+    ]"
+  >
+    <span
+      :class="[
+        { 'flex text-right justify-end': props.right && !props.center },
+        { 'flex justify-center': props.center },
+      ]"
+    >
+      {{ props.title }}
+      <slot />
+    </span>
+  </td>
+</template>
+<script setup>
+const props = defineProps({
+  title: [String, Number, Array],
+  colspan: {
+    type: String,
+    default: "1",
+  },
+  center: {
+    type: Boolean,
+    default: false,
+  },
+  right: {
+    type: Boolean,
+    default: false,
+  },
+  hover: {
+    type: Boolean,
+    default: false,
+  },
+  break: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

package/src/components/common/table/TableHeader.vue

@@ -0,0 +1,21 @@
+<template>
+  <th scope="col" :colspan="props.colspan" class="std-table-header">
+    <span :class="['', { 'flex justify-center': props.center }]">
+      {{ props.title }}
+      <slot />
+    </span>
+  </th>
+</template>
+<script setup>
+const props = defineProps({
+  title: String,
+  colspan: {
+    type: String,
+    default: "1",
+  },
+  center: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

package/src/components/dialogs/ChooseValueDialog.vue

@@ -0,0 +1,97 @@
+<template>
+  <Dialog :open="open" :title="title">
+    <template #content>
+      <FormCol :fieldName="nameField">
+        <GreySelect
+          v-model="entry.key"
+          :options="values"
+          @update:model-value="setVal($event)"
+        />
+      </FormCol>
+      <FormCol
+        v-if="valueOptions.length > 1"
+        fieldName="Select Attribute Value"
+      >
+        <GreySelect v-model="entry.val" :options="valueOptions" />
+      </FormCol>
+      <FormCol fieldName="Selected Value">
+        <GreyInputGrow :value="entry.val" readonly />
+      </FormCol>
+    </template>
+    <template #footer>
+      <SubmitButtons
+        :saveText="saveButtonText"
+        @save="emits('save', entry)"
+        @close="close"
+      />
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import { ref, computed } from "vue";
+import {
+  Dialog,
+  GreyInputGrow,
+  GreySelect,
+  FormCol,
+  SubmitButtons,
+} from "@/components";
+
+// props and emits
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Add",
+  },
+  nameField: {
+    type: String,
+    default: "Name",
+  },
+  saveButtonText: {
+    type: String,
+    default: "Save",
+  },
+  values: {
+    type: Array,
+    default: () => [],
+  },
+});
+const emits = defineEmits(["save"]);
+// states
+const open = ref(false);
+const entry = ref({});
+// computed
+const valueOptions = computed(() => {
+  const selected = props.values.find((v) => v.value === entry.value.key);
+  if (selected) {
+    return selected.values.map((v) => ({
+      label: v,
+      value: v,
+    }));
+  } else {
+    return [];
+  }
+});
+// function defs
+function setVal(val) {
+  const selected = props.values.find((v) => v.value === val);
+  if (selected) {
+    entry.value.val = selected.values[0];
+  }
+}
+
+function close() {
+  open.value = false;
+}
+
+function openModal(e) {
+  open.value = true;
+  entry.value = {};
+}
+
+defineExpose({
+  open,
+  openModal,
+  close,
+});
+</script>

package/src/components/dialogs/ConfirmDialog.vue

@@ -0,0 +1,73 @@
+<template>
+  <Dialog :open="open" :title="title" @close="closeModal">
+    <template #content>
+      <div class="mt-2">
+        <p class="text-sm overflow-x-auto text-ellipsis">
+          {{ msg }}
+        </p>
+      </div>
+    </template>
+    <template #footer>
+      <TextButton
+        :text="confirmMsg"
+        :loading="loading"
+        @click="confirmAction"
+      />
+      <TextButton :text="cancelMsg" color="red" @click="cancel" />
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { TextButton, Dialog } from "@/components";
+
+const open = ref(false);
+const msg = ref("");
+const title = ref("");
+const action = ref(() => {});
+const cancelAction = ref(() => {});
+const confirmMsg = ref("Yes");
+const cancelMsg = ref("No");
+const loading = ref(false);
+
+// function defs
+function openModal(
+  t: string,
+  m: string,
+  a: () => void,
+  c: () => void,
+  confirm = "Yes",
+  cancel = "No"
+) {
+  title.value = t;
+  msg.value = m;
+  action.value = a;
+  cancelAction.value = c;
+  open.value = true;
+  confirmMsg.value = confirm;
+  cancelMsg.value = cancel;
+}
+
+async function confirmAction() {
+  loading.value = true;
+  await action.value();
+  loading.value = false;
+  closeModal();
+}
+
+function cancel() {
+  if (cancelAction.value) {
+    cancelAction.value();
+  }
+  closeModal();
+}
+
+function closeModal() {
+  open.value = false;
+}
+
+defineExpose({
+  openModal,
+});
+</script>

package/src/components/dialogs/CopyDialog.vue

@@ -0,0 +1,51 @@
+<template>
+  <Dialog :open="open" :title="title" @close="closeModal">
+    <template #content>
+      <div class="mt-2">
+        <p class="break-all text-sm text-gray-600 dark:text-gray-400 font-bold">
+          {{ token }}
+        </p>
+        <p class="text-sm text-gray-500">
+          {{ msg }}
+        </p>
+      </div>
+    </template>
+    <template #footer>
+      <TextButton text="Copy" color="green" @click="copyAction" />
+      <TextButton text="Close" color="red" @click="closeModal" />
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { TextButton, Dialog } from "@/components";
+
+const emits = defineEmits(["notify"]);
+
+const open = ref(false);
+const msg = ref("");
+const title = ref("");
+const token = ref("");
+
+// function defs
+function openModal(t: string, m: string, secret: string) {
+  title.value = t;
+  msg.value = m;
+  token.value = secret;
+  open.value = true;
+}
+
+function copyAction() {
+  navigator.clipboard.writeText(token.value);
+  emits("notify", "Token copied to clipboard", "", true);
+}
+
+function closeModal() {
+  open.value = false;
+}
+
+defineExpose({
+  openModal,
+});
+</script>

package/src/components/dialogs/DownloadDialog.vue

@@ -0,0 +1,48 @@
+<template>
+  <Dialog :open="open" :title="title" size="medium">
+    <template #footer>
+      <SubmitButtons
+        saveText="Download"
+        @save="downloadFile"
+        @close="closeModal"
+      />
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import { ref } from "vue";
+import { Dialog, SubmitButtons } from "@/components";
+
+// props and emits
+const props = defineProps({});
+const emits = defineEmits(["notify", "notifyList", "close"]);
+// states
+const open = ref(false);
+const title = ref("Title");
+const target = ref(null);
+
+// function defs
+function openModal(titleArg, file) {
+  open.value = true;
+  title.value = titleArg;
+  target.value = file;
+}
+
+function downloadFile() {
+  // download file then close dialog
+  window.open(target.value, "_blank");
+  closeModal();
+}
+
+function closeModal() {
+  open.value = false;
+  title.value = "Title";
+  target.value = null;
+  emits("close");
+}
+
+defineExpose({
+  openModal,
+  closeModal,
+});
+</script>

package/src/components/dialogs/NameDescDialog.vue

@@ -0,0 +1,74 @@
+<template>
+  <Dialog :open="open" :title="title">
+    <template #content>
+      <FormCol fieldName="Name">
+        <GreyInput v-model="entry.name" :error="error.name" />
+      </FormCol>
+      <FormCol fieldName="Description">
+        <GreyInput v-model="entry.description" />
+      </FormCol>
+    </template>
+    <template #footer>
+      <SubmitButtons
+        :saveText="saveButtonText"
+        :loading="loading"
+        @save="save"
+        @close="close"
+      />
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import { ref } from "vue";
+import { Dialog, GreyInput, FormCol, SubmitButtons } from "@/components";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Add",
+  },
+  saveButtonText: {
+    type: String,
+    default: "Save",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(["save", "notifyList"]);
+// states
+const open = ref(false);
+const entry = ref({});
+const error = ref({});
+
+// function defs
+function close() {
+  error.value = {};
+  open.value = false;
+}
+
+function save() {
+  error.value = {};
+  if (!entry.value.name) {
+    error.value.name = "Name is required";
+    emits("notifyList", "Error", ["Name is required"], false);
+    return;
+  }
+  emits("save", entry.value);
+}
+
+function openModal(e) {
+  open.value = true;
+  entry.value = {
+    name: e.name,
+    description: e.description || "",
+  };
+}
+
+defineExpose({
+  open,
+  openModal,
+  close,
+});
+</script>