fluency-v8-components 1.3.5 → 1.3.7

package/src/components/common/ProgressBar.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="bg-gray-200 dark:bg-gray-500 rounded-xl shadow-xs overflow-hidden p-1"
+  >
+    <div
+      :class="[
+        'relative flex items-center justify-center',
+        { 'h-2': hideProgress },
+        { 'h-6': !hideProgress },
+      ]"
+    >
+      <div
+        class="absolute top-0 bottom-0 left-0 rounded-lg bg-green-500"
+        :style="{ width: `${props.progress}%` }"
+      />
+      <div
+        v-if="!hideProgress"
+        class="relative text-green-900 font-medium text-sm"
+      >
+        {{ props.progress }}%
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  progress: Number,
+  hideProgress: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

package/src/components/common/RadioButtons.vue

@@ -0,0 +1,52 @@
+<template>
+  <RadioGroup v-bind="$attrs" class="row ">
+    <RadioGroupOption
+      as="template"
+      v-for="(option, i) in options"
+      :value="option.value"
+      v-slot="{ active, checked }"
+    >
+      <div
+        :class="[
+          { 'py-1 px-2': size === 'sm' },
+          { 'py-2 px-3': size === 'md' },
+          { 'py-3 px-4': size === 'lg' },
+          { 'rounded-l-lg': i === 0},
+          { 'rounded-r-lg': i === options.length - 1},
+          { 'bg-gray-200': active },
+          checked ? 'white-bg-hover text-black dark:text-white dark:bg-slate-800' : 'white-bg dark:bg-slate-600 dark:text-white',
+          'cursor-pointer'
+        ]"
+        class="relative flex shadow-md focus:outline-hidden"
+      >
+        <RadioGroupLabel as="template">
+          <span v-if="useValue" class="block text-sm font-medium">{{ option.value }}</span>
+          <div v-else><slot :name="`option-${i}`" /></div>
+        </RadioGroupLabel> 
+      </div>
+    </RadioGroupOption>
+  </RadioGroup>
+</template>
+
+<script setup>
+import {
+  RadioGroup,
+  RadioGroupLabel,
+  RadioGroupOption,
+} from '@headlessui/vue'
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'md',
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  useValue: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>

package/src/components/common/Schedule.vue

@@ -0,0 +1,79 @@
+<template>
+  <FormSection sectionName="Schedule Details">
+    <div class="px-2">
+      <FormCol fieldName="Interval">
+        <GreySelect v-model="local.interval" :options="intervalOptions" />
+      </FormCol>
+      <div class="flex gap-x-3">
+        <FormCol v-if="local.interval === 'monthly'" fieldName="Day" class="w-44">
+          <GreySelect v-model="local.day" :options="dayOptions" />
+        </FormCol>
+        <FormCol
+          v-if="local.interval === 'weekly'"
+          fieldName="Weekday"
+          class="w-44"
+        >
+          <GreySelect v-model="local.weekday" :options="weekdayOptions" />
+        </FormCol>
+        <FormCol
+          v-if="local.interval !== 'minute' && local.interval !== 'hourly'"
+          fieldName="Hour"
+          class="w-44"
+        >
+          <GreySelect v-model="local.hour" :options="hourOptions" />
+        </FormCol>
+        <FormCol
+          v-if="
+            local.interval === 'minute' ||
+            local.interval === 'hourly' ||
+            local.interval === 'daily'
+          "
+          fieldName="Minute"
+          class="w-44"
+        >
+          <GreySelect v-model="local.minute" :options="minuteOptions" />
+        </FormCol>
+      </div>
+      <FormCol
+        v-if="local.interval !== 'minute' && local.interval !== 'hourly'"
+        fieldName="Timezone"
+      >
+        <GreySelect v-model="local.timezone" :options="timezoneOptions" />
+      </FormCol>
+    </div>
+  </FormSection>
+</template>
+<script setup>
+import { FormSection, FormCol, GreySelect } from "@/components";
+import {
+  timezoneOptions,
+  weekdayOptions,
+  intervalOptions,
+  hourOptions,
+  dayOptions,
+} from "@/constants/schedule";
+import { ref, computed } from "vue";
+
+const props = defineProps({
+  schedule: Object,
+});
+const local = ref(props.schedule);
+
+const minuteOptions = computed(() => {
+  if (local.value.interval === "minute") {
+    return Array.from({ length: 60 }, (_, i) => {
+      const val = i + 1;
+      return { label: val.toString(), value: val };
+    });
+  } else if (
+    local.value.interval === "hourly" ||
+    local.value.interval === "daily"
+  ) {
+    return Array.from({ length: 12 }, (_, i) => {
+      const val = i * 5;
+      return { label: val.toString(), value: val };
+    });
+  }
+  return [];
+});
+</script>

package/src/components/common/SearchBar.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="relative">
+    <span
+      class="cursor-pointer absolute flex items-center right-2 inset-y-0"
+      @click="emits('search')"
+    >
+      <MagnifyingGlassIcon class="icon-md" />
+    </span>
+    <input
+      type="text"
+      class="pl-3 input-block pr-8"
+      v-model.trim="local"
+      placeholder="Search"
+      @keyup.enter="emits('search')"
+    />
+  </div>
+</template>
+<script setup>
+import { ref, watch } from "vue";
+import { MagnifyingGlassIcon } from "@heroicons/vue/20/solid";
+
+const props = defineProps({
+  str: String,
+});
+const emits = defineEmits(["search", "update"]);
+const local = ref(props.str);
+watch(local, (val) => {
+  emits("update", val);
+});
+</script>

package/src/components/common/Separator.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="w-full h-0.5 bg-gray-300 my-2"></div>
+</template>

package/src/components/common/Slideout.vue

@@ -0,0 +1,95 @@
+<template>
+  <TransitionRoot as="template" :show="open">
+    <Dialog as="div" class="relative z-40" @close="emits('hide')">
+      <!--div class="fixed inset-0" /-->
+      <TransitionChild
+        as="template"
+        enter="duration-500 sm:duration-700 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-500 sm:duration-700 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div
+          class="fixed inset-0 bg-gray-500/50 transition-opacity"
+        />
+      </TransitionChild>
+      <div class="fixed inset-0 overflow-hidden">
+        <div class="absolute inset-0 overflow-hidden">
+          <div
+            class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16"
+          >
+            <TransitionChild
+              as="template"
+              enter="transform transition ease-in-out duration-500 sm:duration-700"
+              enter-from="translate-x-full"
+              enter-to="translate-x-0"
+              leave="transform transition ease-in-out duration-500 sm:duration-700"
+              leave-from="translate-x-0"
+              leave-to="translate-x-full"
+            >
+              <DialogPanel class="pointer-events-auto w-screen max-w-2xl">
+                <div
+                  class="flex h-full flex-col bg-white shadow-xl dark:bg-black"
+                >
+                  <div class="bg-sky-700 px-4 py-6 sm:px-6">
+                    <div class="flex items-center justify-between">
+                      <DialogTitle
+                        class="text-base font-semibold leading-6 text-white"
+                        >{{ adjustText(title, titleWidth) }}</DialogTitle
+                      >
+                      <div class="ml-3 flex h-7 items-center">
+                        <button
+                          type="button"
+                          class="relative rounded-md bg-sky-700 text-sky-200 hover:text-white focus:outline-hidden focus:ring-2 focus:ring-white"
+                          @click="emits('close')"
+                        >
+                          <span class="absolute -inset-2.5" />
+                          <span class="sr-only">Close panel</span>
+                          <XMarkIcon class="icon-lg" aria-hidden="true" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="h-0 flex-1 overflow-y-auto">
+                    <div class="flex flex-1 flex-col justify-between">
+                      <div class="px-4 sm:px-6">
+                        <div class="space-y-6 pb-5 pt-6">
+                          <slot name="content" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex flex-shrink-0 justify-end px-4 py-4">
+                    <slot name="footer" />
+                  </div>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup>
+import {
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+import { adjustText } from "@/constants/font-map";
+
+const props = defineProps({
+  open: Boolean,
+  title: String,
+});
+const emits = defineEmits(["close", "hide"]);
+
+const titleWidth = 2800;
+</script>

package/src/components/common/Sort.vue

@@ -0,0 +1,83 @@
+<template>
+  <Menu as="div" class="relative inline-block text-left">
+    <MenuButton
+      :class="`group inline-flex justify-center text-${size} font-medium`"
+    >
+      <Bars3BottomLeftIcon :class="`${iconSize} mr-2`" />
+      Sort By
+      <ChevronDownIcon :class="`${iconSize} ml-2`" />
+    </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="[
+          'z-50 absolute z-50 mt-0.5 w-40 origin-top-right rounded-md py-2 shadow-lg max-h-96 overflow-y-auto break-all white-bg text-gray-700 dark:bg-black dark:text-gray-300',
+          direction === 'right' ? 'left-0 ' : 'right-0',
+        ]"
+      >
+        <div class="py-1">
+          <MenuItem v-for="option in options" :key="option" v-slot="{ active }">
+            <span
+              :class="[
+                active ? 'outline-hidden white-bg-hover dark:dark-bg-hover' : '',
+                {
+                  'bg-gray-400 dark:bg-slate-800':
+                    current.label === option.label,
+                },
+                `group flex w-full items-center rounded-md px-2 py-2 text-${size} cursor-pointer`,
+              ]"
+              @click.stop="emits('sort', option)"
+            >
+              {{ option.label }}
+            </span>
+          </MenuItem>
+        </div>
+      </MenuItems>
+    </transition>
+  </Menu>
+</template>
+<script setup>
+import { computed } from "vue";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import {
+  Bars3BottomLeftIcon,
+  ChevronDownIcon,
+} from "@heroicons/vue/24/outline";
+
+// props and emits
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  direction: {
+    type: String,
+    default: "left",
+  },
+  current: {
+    type: Object,
+    default: () => ({}),
+  },
+  size: {
+    type: String,
+    default: "xs",
+  },
+});
+const emits = defineEmits(["sort"]);
+
+// computed
+const iconSize = computed(() => {
+  if (props.size === "xs") return "icon";
+  if (props.size === "sm") return "icon-md";
+  if (props.size === "md") return "icon-lg";
+  if (props.size === "lg") return "icon-xl";
+  return "icon";
+});
+</script>

package/src/components/common/Table.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="w-full">
+    <div :class="dense ? '' : 'table-frame1'">
+      <div :class="dense ? '' : overflow ? 'overflow-x-auto' : ''">
+        <div class="table-frame3">
+          <div :class="['table-shadow', { 'overflow-hidden': overflow }]">
+            <table class="std-table">
+              <thead
+                :class="
+                  hideHeader
+                    ? 'sr-only'
+                    : 'text-left bg-neutral-200 dark:dark-bg'
+                "
+              >
+                <slot name="header" />
+              </thead>
+              <tbody v-if="!data || data.length === 0">
+                <tr>
+                  <td colspan="100%" class="h-24 text-center">
+                    No data available
+                  </td>
+                </tr>
+              </tbody>
+              <tbody v-else class="std-table-body">
+                <slot name="rows" />
+              </tbody>
+            </table>
+            <slot name="pagination" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  data: Array,
+  hideHeader: Boolean,
+  dense: {
+    type: Boolean,
+    default: false,
+  },
+  overflow: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>

package/src/components/common/Tabs.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div class="relative hidden md:block overflow-auto">
+      <nav class="flex space-x-2" aria-label="Tabs">
+        <a
+          v-for="tab in tabs"
+          :key="tab.name"
+          :class="[
+            tab.current
+              ? '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',
+          ]"
+          @click="switchTab(tab[props.tabField])"
+        >
+          <span
+            :class="[
+              'row',
+              { 'text-sm': props.size === 'small' },
+              { 'text-lg': props.size === 'large' },
+            ]"
+          >
+            <img
+              v-if="tab.icon"
+              :src="tab.icon"
+              :alt="tab.name"
+              :width="iconWidth"
+              class="mr-2"
+            />
+            {{ tab.name }}
+          </span>
+        </a>
+      </nav>
+    </div>
+    <!-- Mobile mode dropdown -->
+    <div class="md:hidden">
+      <Menu as="div" class="relative inline-block text-left py-3 mx-2">
+        <div>
+          <MenuButton
+            :class="[
+              'inline-flex w-full justify-center cursor-pointer rounded-md px-4 py-2 hover:bg-sky-100 dark:hover:bg-slate-800 px-4 py-2 font-medium bg-sky-100 dark:bg-slate-700 text-sky-700 dark:text-sky-100',
+              { 'text-sm': props.size === 'small' },
+              { 'text-lg': props.size === 'large' },
+            ]"
+          >
+            {{ current }}
+            <ChevronDownIcon
+              :class="[
+                { 'icon-md': props.size === 'small' },
+                { 'icon-lg': props.size !== 'small' },
+              ]"
+              aria-hidden="true"
+            />
+          </MenuButton>
+        </div>
+
+        <transition
+          enter-active-class="transition duration-100 ease-out"
+          enter-from-class="transform scale-95 opacity-0"
+          enter-to-class="transform scale-100 opacity-100"
+          leave-active-class="transition duration-75 ease-in"
+          leave-from-class="transform scale-100 opacity-100"
+          leave-to-class="transform scale-95 opacity-0"
+        >
+          <MenuItems
+            class="z-50 min-w-full absolute left-0 mt-2 origin-top-left rounded-md bg-white dark:bg-black"
+          >
+            <MenuItem v-for="tab in tabs" @click="switchTab(tab.name)">
+              <button
+                :class="[
+                  'group flex w-full items-center rounded-md px-2 py-2 text-sm hover:bg-sky-100 dark:hover:bg-slate-800',
+                  tab.current
+                    ? 'bg-sky-100 dark:bg-slate-700 text-sky-700 dark:text-sky-100'
+                    : 'text-slate-500 dark:text-slate-200',
+                ]"
+              >
+                {{ tab.name }}
+              </button>
+            </MenuItem>
+          </MenuItems>
+        </transition>
+      </Menu>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import { ChevronDownIcon } from "@heroicons/vue/20/solid";
+
+// props and emits
+const props = defineProps({
+  tabs: Array,
+  current: [String, Number, Boolean],
+  size: {
+    type: String,
+    default: "medium",
+  },
+  tabField: {
+    type: String,
+    default: "name",
+  },
+});
+const emits = defineEmits(["switch"]);
+// states
+const tabs = props.tabs;
+// computed
+const iconWidth = computed(() => {
+  if (props.size === "small") {
+    return "16";
+  } else if (props.size === "large") {
+    return "32";
+  }
+  return "24";
+});
+// functions
+function switchTab(newTab) {
+  tabs.forEach((tab) => {
+    if (tab[props.tabField] === props.current) {
+      tab.current = false;
+    }
+    if (tab[props.tabField] === newTab) {
+      tab.current = true;
+    }
+  });
+  emits("switch", newTab);
+}
+</script>

package/src/components/common/Tag.vue

@@ -0,0 +1,53 @@
+<template>
+  <span
+    :class="[
+      'relative chip',
+      { 'yellow-chip': color === 'yellow' },
+      { 'blue-chip': color === 'blue' },
+      { 'red-chip': color === 'red' },
+      { 'green-chip': color === 'green' },
+      { 'text-xs': size === 'xsmall' },
+      { 'text-sm': size === 'small' },
+      { 'text-lg': size === 'large' },
+    ]"
+    @mouseover="showTooltip"
+    @mouseout="hideTooltip"
+  >
+    <slot name="icon" />
+    {{ text }}
+    <Tooltip
+      :tooltip="tooltip"
+      :showingTooltip="showingTooltip"
+      direction="top"
+      style="transform: translateY(-20%)"
+    />
+  </span>
+</template>
+<script setup>
+import { ref } from "vue";
+import { Tooltip } from "@/components";
+
+const props = defineProps({
+  text: String,
+  size: {
+    type: String,
+    default: "medium",
+  },
+  color: {
+    type: String,
+    default: "blue",
+  },
+  tooltip: {
+    type: String,
+    default: "",
+  },
+});
+const showingTooltip = ref(false);
+
+function showTooltip() {
+  if (props.tooltip) showingTooltip.value = true;
+}
+function hideTooltip() {
+  showingTooltip.value = false;
+}
+</script>

package/src/components/common/Tooltip.vue

@@ -0,0 +1,49 @@
+<template>
+  <span
+    :id="props.id"
+    role="tooltip"
+    :class="[
+      'mt-2 tooltip opacity-100 whitespace-nowrap',
+      { hidden: !props.showingTooltip },
+      { 'bottom-5 x-center': props.direction === 'top' },
+      { 'top-5 x-center': props.direction === 'bottom' },
+      { 'bottom-0 left-tooltip': props.direction === 'left' },
+      { 'bottom-0 right-tooltip': props.direction === 'right' },
+    ]"
+  >
+    {{ props.tooltip }}
+  </span>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  tooltip: {
+    type: String,
+    default: "",
+  },
+  showingTooltip: {
+    type: Boolean,
+    default: false,
+  },
+  id: {
+    type: String,
+    default: "tooltip",
+  },
+  direction: {
+    type: String,
+    default: "bottom",
+  },
+});
+</script>
+<style scoped>
+.x-center {
+  transform: translateX(-50%);
+}
+
+.left-tooltip {
+  transform: translateX(-120%);
+}
+
+.right-tooltip {
+  transform: translateX(20%);
+}
+</style>