fluency-v8-components 1.3.5 → 1.3.7

package/src/components/index.js

@@ -0,0 +1,134 @@
+// form
+export { default as GreyInput } from "./form/GreyInput.vue";
+export { default as GreyInputAutocomplete } from "./form/GreyInputAutocomplete.vue";
+export { default as GreyInputGrow } from "./form/GreyInputGrow.vue";
+export { default as GreyInputCopy } from "./form/GreyInputCopy.vue";
+export { default as GreyInputToken } from "./form/GreyInputToken.vue";
+export { default as GreyPassword } from "./form/GreyPassword.vue";
+export { default as GreyTel } from "./form/GreyTel.vue";
+export { default as GreySelect } from "./form/GreySelect.vue";
+export { default as GreySelectInput } from "./form/GreySelectInput.vue";
+export { default as GreySelectInputMultiple } from "./form/GreySelectInputMultiple.vue";
+export { default as CheckBox } from "./form/CheckBox.vue";
+export { default as FormCol } from "./form/FormCol.vue";
+export { default as FormRow } from "./form/FormRow.vue";
+export { default as FormSection } from "./form/FormSection.vue";
+export { default as GreyForm } from "./form/GreyForm.vue";
+export { default as HamburgerItem } from "./form/HamburgerItem.vue";
+export { default as RadioInput } from "./form/RadioInput.vue";
+export { default as UploadFile } from "./form/UploadFile.vue";
+export { default as KeyValueEntry } from "./form/KeyValueEntry.vue";
+export { default as Editor } from "./form/Editor.vue";
+
+// notify and dialogs
+export { default as ConfirmDialog } from "./dialogs/ConfirmDialog.vue";
+export { default as CopyDialog } from "./dialogs/CopyDialog.vue";
+export { default as ChooseValueDialog } from "./dialogs/ChooseValueDialog.vue";
+export { default as NameDialog } from "./dialogs/NameDialog.vue";
+export { default as NameDescDialog } from "./dialogs/NameDescDialog.vue";
+export { default as Notify } from "./notifications/Notify.vue";
+export { default as NotifyList } from "./notifications/NotifyList.vue";
+export { default as ProgressDialog } from "./dialogs/ProgressDialog.vue";
+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";
+
+// Buttons
+export { default as ActionButtons } from "./buttons/ActionButtons.vue";
+export { default as TextButton } from "./buttons/TextButton.vue";
+export { default as IconButton } from "./buttons/IconButton.vue";
+export { default as ImageButton } from "./buttons/ImageButton.vue";
+export { default as DropdownButton } from "./buttons/DropdownButton.vue";
+export { default as MenuButton } from "./buttons/MenuButton.vue";
+export { default as SubmitButtons } from "./buttons/SubmitButtons.vue";
+
+// statuses
+export { default as Active } from "./status/Active.vue";
+export { default as Trend } from "./status/Trend.vue";
+export { default as TaskStatus } from "./status/TaskStatus.vue";
+export { default as TaskDot } from "./status/TaskDot.vue";
+export { default as TicketStatus } from "./status/TicketStatus.vue";
+export { default as ScoreLevel } from "./status/ScoreLevel.vue";
+export { default as Status } from "./status/Status.vue";
+
+// commons
+export { default as AutoRefreshButton } from "./common/AutoRefreshButton.vue";
+export { default as AutoCompleteSearchBar } from "./common/AutoCompleteSearchBar.vue";
+export { default as Breadcrumb } from "./common/Breadcrumb.vue";
+export { default as SearchBar } from "./common/SearchBar.vue";
+export { default as ButtonToggle } from "./common/ButtonToggle.vue";
+export { default as EventList } from "./common/EventList.vue";
+export { default as PowerToggle } from "./common/PowerToggle.vue";
+export { default as ProgressBar } from "./common/ProgressBar.vue";
+export { default as PageHeading } from "./common/PageHeading.vue";
+export { default as Pagination } from "./common/Pagination.vue";
+export { default as Tag } from "./common/Tag.vue";
+export { default as Tooltip } from "./common/Tooltip.vue";
+export { default as HomeCard } from "./common/HomeCard.vue";
+export { default as ItemBox } from "./common/ItemBox.vue";
+export { default as RadioButtons } from "./common/RadioButtons.vue";
+export { default as Carousel } from "./common/Carousel.vue";
+export { default as Card } from "./common/Card.vue";
+export { default as CardItem } from "./common/card/CardItem.vue";
+export { default as CardItemGroup } from "./common/card/CardItemGroup.vue";
+export { default as Slideout } from "./common/Slideout.vue";
+export { default as Table } from "./common/Table.vue";
+export { default as TableData } from "./common/table/TableData.vue";
+export { default as TableHeader } from "./common/table/TableHeader.vue";
+export { default as Tabs } from "./common/Tabs.vue";
+export { default as VerticalTabs } from "./common/VerticalTabs.vue";
+export { default as Separator } from "./common/Separator.vue";
+export { default as Dialog } from "./common/Dialog.vue";
+export { default as Popover } from "./common/Popover.vue";
+export { default as Loading } from "./common/Loading.vue";
+export { default as LoadingDots } from "./common/LoadingDots.vue";
+export { default as DatePicker } from "./common/DatePicker.vue";
+export { default as DatePickerInput } from "./common/DatePickerInput.vue";
+export { default as Facet } from "./common/Facet.vue";
+export { default as Schedule } from "./common/Schedule.vue";
+export { default as Feed } from "./common/Feed.vue";
+export { default as CategoryCard } from "./common/CategoryCard.vue";
+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";
+
+// icons
+export { default as AiIcon } from "./icons/AiIcon.vue";
+export { default as GithubIcon } from "./icons/GithubIcon.vue";
+export { default as HighPriorityIcon } from "./icons/HighPriorityIcon.vue";
+export { default as PowerOffIcon } from "./icons/PowerOffIcon.vue";
+export { default as SaveIcon } from "./icons/SaveIcon.vue";
+
+// charts
+export { default as AlertChart } from "./charts/AlertChart.vue";
+export { default as CronChart } from "./charts/CronChart.vue";
+export { default as LineChart } from "./charts/LineChart.vue";
+export { default as BarChart } from "./charts/BarChart.vue";
+export { default as BarChartHorizontal } from "./charts/BarChartHorizontal.vue";
+export { default as GradientChart } from "./charts/GradientChart.vue";
+export { default as StackedChart } from "./charts/StackedChart.vue";
+export { default as StackedChartClustered } from "./charts/StackedChartClustered.vue";
+export { default as PieChart } from "./charts/PieChart.vue";
+export { default as ProgressChart } from "./charts/ProgressChart.vue";
+export { default as TimelineChart } from "./charts/TimelineChart.vue";
+export { default as EmptyChart } from "./charts/EmptyChart.vue";
+export { default as WorkflowChart } from "./charts/WorkflowChart.vue";
+
+// tables
+export { default as ArgumentTable } from "./tables/ArgumentTable.vue";
+export { default as ArgumentRunTable } from "./tables/ArgumentRunTable.vue";
+export { default as CloudFormationParameters } from "./tables/CloudFormationParameters.vue";
+
+// query builder
+export { default as LVDBQuery } from "./query/LVDBQuery.vue";
+
+// page layouts
+export { default as FacetPage } from "./page-structure/FacetPage.vue";
+
+// menu navigations
+export { default as DialogMenu } from "./menu/DialogMenu.vue";
+export { default as GridMenu } from "./menu/GridMenu.vue";
+export { default as MenuAvatar } from "./menu/MenuAvatar.vue";
+export { default as MenuDesktop } from "./menu/MenuDesktop.vue";

package/src/components/menu/DialogMenu.vue

@@ -0,0 +1,142 @@
+<template>
+  <Dialog
+    as="div"
+    class="lg:hidden"
+    :open="mobileMenuOpen"
+    @click="emits('close')"
+    @close="emits('close')"
+  >
+    <div class="fixed inset-0 z-50" />
+    <DialogPanel
+      class="fixed top-8 left-0 z-50 w-80 px-2 py-6 sm:px-6 sm:top-2 sm:w-full sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
+    >
+      <div class="flex items-center justify-end">
+        <button
+          type="button"
+          class="-m-2.5 rounded-md p-2.5"
+          @click="emits('close')"
+        >
+          <span class="sr-only">Close menu</span>
+          <XMarkIcon class="icon-lg" aria-hidden="true" />
+        </button>
+      </div>
+      <div
+        class="mt-6 flow-root white-bg text-gray-700 dark:bg-black dark:text-gray-300 rounded-3xl p-3"
+      >
+        <div class="-my-6 divide-y divide-gray-500/10">
+          <div class="space-y-2 py-6">
+            <div v-for="item in navigation" :key="item.name">
+              <Disclosure v-if="item.children" as="div" v-slot="{ open }">
+                <DisclosureButton
+                  class="flex w-full items-center rounded-lg py-2 pl-3 pr-3.5 text-base font-medium leading-7 hover:font-bold"
+                >
+                  <component
+                    :is="item.icon"
+                    class="h-6 flex-shrink-0 hover:font-bold pr-2"
+                    aria-hidden="true"
+                  />
+                  {{ item.name }}
+                  <ChevronDownIcon
+                    :class="[
+                      open ? 'rotate-180' : '',
+                      'icon-md right-10 absolute',
+                    ]"
+                    aria-hidden="true"
+                  />
+                </DisclosureButton>
+                <DisclosurePanel class="mt-2 space-y-2">
+                  <div v-for="child in item.children">
+                    <router-link
+                      v-if="!child.children"
+                      :key="child.name"
+                      :to="{ name: child.route, params: child.params }"
+                      :class="[
+                        'text-sm font-medium',
+                        props.currentRoute === child.route
+                          ? 'font-semibold text-slate-900 dark:text-slate-100'
+                          : 'hover:font-bold',
+                      ]"
+                      @click="emits('close')"
+                    >
+                      <DisclosureButton
+                        class="block rounded-lg pl-6 pr-3 leading-7"
+                      >
+                        {{ child.name }}
+                      </DisclosureButton>
+                    </router-link>
+                    <div
+                      v-else
+                      class="relative text-sm font-medium hover:font-bold"
+                      @mouseenter="child.expanded = true"
+                      @mouseleave="child.expanded = false"
+                    >
+                      <span
+                        class="row rounded-lg pl-6 pr-3 leading-7 cursor-pointer"
+                      >
+                        {{ child.name }}
+                        <ChevronRightIcon
+                          class="icon-md absolute right-4 sm:right-0"
+                        />
+                      </span>
+                      <GrandChild
+                        v-if="child.expanded"
+                        :children="child.children"
+                        :currentRoute="currentRoute"
+                        @close="emits('close')"
+                      />
+                    </div>
+                  </div>
+                </DisclosurePanel>
+              </Disclosure>
+              <router-link
+                v-else
+                :to="{ name: item.route }"
+                @click="emits('close')"
+              >
+                <div
+                  class="flex w-full items-center rounded-lg py-2 pl-3 pr-3.5 text-base font-semibold leading-7 hover:font-bold"
+                >
+                  <component
+                    :is="item.icon"
+                    class="h-6 flex-shrink-0 hover:font-bold pr-2"
+                    aria-hidden="true"
+                  />
+                  {{ item.name }}
+                </div>
+              </router-link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DialogPanel>
+  </Dialog>
+</template>
+<script setup>
+import { ref } from "vue";
+import {
+  Dialog,
+  DialogPanel,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from "@headlessui/vue";
+import {
+  XMarkIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+} from "@heroicons/vue/24/outline";
+import GrandChild from "./GrandChild.vue";
+
+// props and emits
+const props = defineProps({
+  mobileMenuOpen: Boolean,
+  navigation: Array,
+  currentRoute: {
+    type: String,
+    default: "",
+  },
+});
+const emits = defineEmits(["close"]);
+// states
+const navigation = ref(props.navigation);
+</script>

package/src/components/menu/GrandChild.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="absolute top-0 z-50 w-44 rounded-3xl shadow-lg ring-1 ring-gray-900/5 left-full white-bg text-gray-700 dark:bg-black dark:text-gray-300"
+  >
+    <router-link
+      v-for="grandchild in children"
+      :to="{
+        name: grandchild.route,
+        params: grandchild.params,
+      }"
+      @click="emits('close')"
+    >
+      <div
+        :class="[
+          'rounded-lg m-2 p-3 text-sm leading-6',
+          props.currentRoute === grandchild.route
+            ? 'bg-slate-300 dark:bg-slate-700'
+            : 'hover:bg-gray-200 dark:hover:bg-neutral-700',
+        ]"
+      >
+        {{ grandchild.name }}
+      </div>
+    </router-link>
+  </div>
+</template>
+<script setup>
+// props and emits
+const props = defineProps({
+  children: {
+    type: Object,
+    required: true,
+  },
+  currentRoute: {
+    type: String,
+    default: "",
+  },
+});
+const emits = defineEmits(["close"]);
+</script>

package/src/components/menu/GridMenu.vue

@@ -0,0 +1,88 @@
+<template>
+  <Combobox
+    as="div"
+    class="py-1 relative"
+    v-model="selected"
+    @update:model-value="emits('update', $event)"
+  >
+    <ComboboxInput
+      class="w-full border-2 text-sm bg-transparent p-1 px-2 pr-4 focus:ring-0"
+      @change="query = $event.target.value"
+      :displayValue="(option) => option.label"
+    />
+    <ComboboxButton class="input-icon">
+      <ChevronUpDownIcon class="icon-md" />
+    </ComboboxButton>
+    <TransitionRoot
+      leave="transition ease-in duration-100"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+      @after-leave="query = ''"
+    >
+      <ComboboxOptions
+        class="absolute z-50 mt-1 max-h-96 w-full overflow-auto p-1 text-base text-sm white-bg text-gray-700 dark:bg-black dark:text-gray-300"
+      >
+        <ComboboxOption
+          as="template"
+          v-for="option in filteredOptions"
+          :key="option.value"
+          :value="option"
+          v-slot="{ selected, active }"
+        >
+          <li
+            :class="[
+              active ? 'bg-indigo-600 text-white' : '',
+              'relative cursor-default select-none py-2 pl-8 pr-3',
+            ]"
+          >
+            <span
+              v-if="selected"
+              class="absolute inset-y-0 left-0 flex items-center pl-1"
+            >
+              <CheckIcon class="icon" aria-hidden="true" />
+            </span>
+            <span :class="['block truncate', { 'ml-4' : option.isSMB}]">
+              {{ option.label }}
+            </span>
+          </li>
+        </ComboboxOption>
+      </ComboboxOptions>
+    </TransitionRoot>
+  </Combobox>
+</template>
+<script setup>
+import { ref, watch, computed } from "vue";
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { ChevronUpDownIcon, CheckIcon } from "@heroicons/vue/24/outline";
+
+// props and emits
+const props = defineProps({
+  options: Array,
+  selected: Object,
+});
+const emits = defineEmits(["update"]);
+// states
+const selected = ref(props.selected);
+const query = ref("");
+// computed
+const filteredOptions = computed(() => {
+  return props.options.filter((option) => {
+    const opt = option.label.toLowerCase() + option.value.toLowerCase();
+    return opt.includes(query.value.toLowerCase());
+  });
+});
+// watch
+watch(
+  () => props.selected,
+  (newVal) => {
+    selected.value = newVal;
+  }
+);
+</script>

package/src/components/menu/MenuAvatar.vue

@@ -0,0 +1,66 @@
+<template>
+  <Menu as="div" class="relative ml-auto mt-1.5">
+    <MenuButton
+      class="rounded-full ring-2 w-7 h-7 ring-black dark:ring-white text-sm"
+    >
+      {{ initials }}
+    </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 top-full z-50 mt-3 w-44 overflow-hidden rounded-3xl shadow-lg ring-1 ring-gray-900/5"
+      >
+        <MenuItem
+          v-for="child in userChildren"
+          :key="child.name"
+          v-slot="{ close }"
+        >
+          <div
+            class="py-1 px-2 white-bg text-gray-700 dark:bg-black dark:text-gray-300"
+          >
+            <router-link
+              :to="{ name: child.route, params: child.params }"
+              @click="close"
+            >
+              <div
+                class="rounded-lg p-4 text-sm leading-6 hover:bg-gray-200 dark:hover:bg-neutral-700"
+              >
+                {{ child.name }}
+              </div>
+            </router-link>
+          </div>
+        </MenuItem>
+      </MenuItems>
+    </transition>
+  </Menu>
+</template>
+<script setup>
+import { computed } from "vue";
+import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
+
+// constants
+const userChildren = [
+  { name: "Profile", route: "profile" },
+  { name: "Logout", route: "logout" },
+];
+// props and emits
+const props = defineProps({
+  fullName: {
+    type: String,
+    default: "Fluency User",
+  },
+})
+// computed
+const initials = computed(() => {
+  const names = props.fullName.split(" ");
+  const firstInitial = names[0][0]?.toUpperCase() || "A";
+  const lastInitial = names[names.length - 1][0]?.toUpperCase() || "U";
+  return `${firstInitial}${lastInitial}`;
+});
+</script>

package/src/components/menu/MenuDesktop.vue

@@ -0,0 +1,90 @@
+<template>
+  <div v-for="item in navigation" :key="item.name">
+    <Menu v-if="item.children" as="div" class="menu">
+      <MenuButton class="menu-button">
+        <component :is="item.icon" class="menu-icon" aria-hidden="true" />
+        {{ item.name }}
+        <ChevronDownIcon class="icon-md flex-none" 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 -left-8 top-full z-50 mt-3 w-44 rounded-3xl shadow-lg ring-1 ring-gray-900/5"
+        >
+          <MenuItem
+            v-for="child in item.children"
+            :key="child.name"
+            v-slot="{ close, active }"
+          >
+            <div
+              class="py-1 px-2 white-bg text-gray-700 dark:bg-black dark:text-gray-300"
+            >
+              <router-link
+                v-if="!child.children"
+                :to="{ name: child.route, params: child.params }"
+                @click="close"
+              >
+                <div
+                  :class="[
+                    'rounded-lg p-4 text-sm leading-6',
+                    currentRoute === child.route
+                      ? 'bg-slate-300 dark:bg-slate-700'
+                      : 'hover:bg-gray-200 dark:hover:bg-neutral-700',
+                  ]"
+                >
+                  {{ child.name }}
+                </div>
+              </router-link>
+              <div v-else>
+                <div
+                  class="relative rounded-lg p-4 text-sm leading-6 hover:bg-gray-200 dark:hover:bg-neutral-700"
+                >
+                  <span class="relative row text-sm">
+                    {{ child.name }}
+                    <ChevronRightIcon class="icon-md absolute right-0" />
+                  </span>
+                  <GrandChild
+                    v-if="active"
+                    :children="child.children"
+                    :currentRoute="currentRoute"
+                    @close="close"
+                  />
+                </div>
+              </div>
+            </div>
+          </MenuItem>
+        </MenuItems>
+      </transition>
+    </Menu>
+    <router-link v-else :to="{ name: item.route }">
+      <div class="menu">
+        <div class="menu-button">
+          <component :is="item.icon" class="menu-icon" aria-hidden="true" />
+          {{ item.name }}
+        </div>
+      </div>
+    </router-link>
+  </div>
+</template>
+
+<script setup>
+import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
+import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/vue/24/outline";
+import GrandChild from "./GrandChild.vue";
+
+// props and emits
+const props = defineProps({
+  navigation: Array,
+  currentRoute: {
+    type: String,
+    default: "",
+  },
+});
+const emit = defineEmits([]);
+</script>