fluency-v8-components 1.3.4 → 1.3.6

package/src/components/buttons/DropdownButton.vue

@@ -0,0 +1,104 @@
+<template>
+  <Menu as="div" class="relative">
+    <div class="std-btn py-0">
+      <div
+        :class="[
+          'std-blue rounded-l-lg px-5 py-3 cursor-pointer',
+          { 'std-red': color === 'red' },
+          { 'std-green': color === 'green' },
+          { 'std-blue': color === 'blue' },
+        ]"
+        @click="loading ? null : emits('mainClick')"
+      >
+        <div v-if="loading" class="mx-2 inline-block spinner"></div>
+        <div v-else class="flex">
+          <slot />
+          {{ props.text }}
+        </div>
+      </div>
+      <MenuButton
+        :class="[
+          'std-blue rounded-r-lg px-1 py-3 border-l-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50',
+          { 'std-red': color === 'red' },
+          { 'std-green': color === 'green' },
+          { 'std-blue': color === 'blue' },
+        ]"
+        :disabled="secondaryButtons.length === 0 || loading"
+        @click="dropdown = !dropdown"
+      >
+        <ArrowDownIcon v-if="!dropdown" class="icon-md" />
+        <ArrowUpIcon v-else class="icon-md" />
+      </MenuButton>
+    </div>
+    <Transition
+      enter="transition ease-out duration-75"
+      enterFrom="opacity-0 scale-95"
+      enterTo="opacity-100 scale-100"
+      leave="transition ease-in duration-100"
+      leaveFrom="opacity-100 scale-100"
+      leaveTo="opacity-0 scale-95"
+    >
+      <MenuItems
+        :class="[
+          'absolute right-0 z-50 mt-0.5 w-32 origin-top-right rounded-md py-2 shadow-lg text-white max-h-96 overflow-y-auto break-all',
+          { 'bg-red-600': color === 'red' },
+          { 'bg-green-700': color === 'green' },
+          { 'bg-sky-700': color === 'blue' },
+        ]"
+      >
+        <MenuItem v-for="button in sortedButtons" v-slot="{ active }">
+          <div
+            :class="[
+              active ? 'cursor-pointer' : '',
+              'block px-3 py-1 text-sm leading-6',
+              { 'std-red': color === 'red' },
+              { 'std-green': color === 'green' },
+              { 'std-blue': color === 'blue' },
+            ]"
+            @click="loading ? null : emits('secondaryClick', button)"
+          >
+            {{ button }}
+          </div>
+        </MenuItem>
+      </MenuItems>
+    </Transition>
+  </Menu>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/vue/20/solid";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  color: {
+    type: String,
+    default: "blue",
+    validator: (value) => ["red", "green", "blue"].includes(value),
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  secondaryButtons: {
+    type: Array,
+    default: () => [],
+  },
+  sorted: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(["mainClick", "secondaryClick"]);
+const dropdown = ref(false);
+
+const sortedButtons = computed(() => {
+  return props.sorted
+    ? props.secondaryButtons.sort((a, b) => a.localeCompare(b))
+    : props.secondaryButtons;
+});
+</script>

package/src/components/buttons/IconButton.vue

@@ -0,0 +1,63 @@
+<template>
+  <button
+    :class="[
+      'circle-btn std-blue relative',
+      { 'p-1.5': dense },
+      { 'std-red': color === 'red' },
+      { 'std-green': color === 'green' },
+    ]"
+    :disabled="disabled || loading"
+    @mouseover="showTooltip"
+    @mouseout="hideTooltip"
+  >
+    <div v-if="loading" class="spinner"></div>
+    <slot v-else />
+    <Tooltip
+      :tooltip="tooltip"
+      :showingTooltip="showingTooltip"
+      :direction="tooltipDirection"
+    />
+  </button>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { Tooltip } from "@/components";
+
+const showingTooltip = ref(false);
+const props = defineProps({
+  color: {
+    type: String,
+    default: "blue",
+    validator: (value) => ["red", "green", "blue"].includes(value),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  dense: {
+    type: Boolean,
+    default: false,
+  },
+  tooltip: {
+    type: String,
+    default: "",
+  },
+  tooltipDirection: {
+    type: String,
+    default: "bottom",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+function showTooltip() {
+  if (props.tooltip) showingTooltip.value = true;
+}
+
+function hideTooltip() {
+  showingTooltip.value = false;
+}
+</script>

package/src/components/buttons/ImageButton.vue

@@ -0,0 +1,16 @@
+<template>
+  <button
+    class="circle-btn std-white outline outline-2 outline-slate-200 p-3 m-2 dark:std-dark"
+  >
+    <img class="icon-xl" :src="src" />
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  src: {
+    type: String,
+    default: "",
+  },
+});
+</script>

package/src/components/buttons/MenuButton.vue

@@ -0,0 +1,138 @@
+<template>
+  <Menu
+    as="div"
+    :class="[
+      'relative',
+      { 'px-3 py-1': dense },
+      { 'std-red': color === 'red' },
+      { 'std-green': color === 'green' },
+      { 'std-blue': color === 'blue' },
+      { 'std-btn': type === 'button' },
+      { 'text-black dark:text-white': color === 'none' },
+      { 'cursor-not-allowed': disabled },
+    ]"
+  >
+    <MenuButton class="row" :disabled="disabled || loading">
+      {{ props.text }}
+      <ArrowDownIcon v-if="type === 'button'" class="icon-md" />
+      <slot />
+    </MenuButton>
+    <Transition
+      enter="transition ease-out duration-75"
+      enterFrom="opacity-0 scale-95"
+      enterTo="opacity-100 scale-100"
+      leave="transition ease-in duration-100"
+      leaveFrom="opacity-100 scale-100"
+      leaveTo="opacity-0 scale-95"
+    >
+      <MenuItems
+        :class="[
+          'absolute right-0 top-full z-50 mt-0.5 rounded-lg py-2 shadow-lg max-h-96 overflow-y-auto break-all',
+          { 'bg-red-600 text-white': color === 'red' },
+          { 'bg-green-700 text-white': color === 'green' },
+          { 'bg-sky-700 text-white': color === 'blue' },
+          {
+            'bg-white dark:bg-black text-black dark:text-white':
+              color === 'none',
+          },
+          { 'right-0': anchor === 'right' },
+          { 'left-0': anchor === 'left' },
+        ]"
+        anchor="bottom-start"
+      >
+        <MenuItem v-for="button in sortedButtons" v-slot="{ active }">
+          <div
+            :class="[
+              active ? 'cursor-pointer' : '',
+              'block px-3 py-1 text-sm leading-6 min-w-44',
+              { 'std-red': color === 'red' },
+              { 'std-green': color === 'green' },
+              { 'std-blue': color === 'blue' },
+              {
+                'std-white dark:std-dark': active && color === 'none',
+              },
+            ]"
+            @click="secondaryClick(button)"
+          >
+            {{ button.name || button }}
+          </div>
+        </MenuItem>
+        <slot name="items" />
+      </MenuItems>
+    </Transition>
+  </Menu>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { ArrowDownIcon } from "@heroicons/vue/20/solid";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: "",
+  },
+  color: {
+    type: String,
+    default: "blue",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  dense: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  secondaryButtons: {
+    type: Array,
+    default: () => [],
+  },
+  anchor: {
+    type: String,
+    default: "right",
+  },
+  type: {
+    type: String,
+    default: "button",
+  },
+  emitValue: {
+    type: Boolean,
+    default: true,
+  },
+  sorted: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(["secondaryClick"]);
+
+const sortedButtons = computed(() => {
+  if (props.sorted) {
+    return props.secondaryButtons.sort((a, b) => {
+      if (a.name && b.name) {
+        return a.name.localeCompare(b.name);
+      }
+      return a.localeCompare(b);
+    });
+  }
+  return props.secondaryButtons;
+});
+
+function secondaryClick(button) {
+  if (props.disabled || props.loading) {
+    return;
+  }
+
+  if (props.emitValue) {
+    emits("secondaryClick", button.name || button);
+  } else {
+    emits("secondaryClick", button);
+  }
+}
+</script>

package/src/components/buttons/SubmitButtons.vue

@@ -0,0 +1,51 @@
+<template>
+  <TextButton
+    :text="saveText"
+    :color="isRun ? 'green' : 'blue'"
+    :disabled="disableSave || loading"
+    :loading="loading"
+    @click="handleSave"
+  />
+  <TextButton
+    color="red"
+    text="Cancel"
+    :loading="loading"
+    :disabled="loading"
+    @click="handleClose"
+  />
+</template>
+<script setup>
+import { TextButton } from "@/components";
+
+const props = defineProps({
+  saveText: {
+    type: String,
+    default: "Save",
+  },
+  disableSave: {
+    type: [Boolean, Number],
+    default: false,
+  },
+  isRun: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(["save", "close"]);
+
+function handleSave() {
+  if (!props.loading && !props.disableSave) {
+    emits("save");
+  }
+}
+
+function handleClose() {
+  if (!props.loading) {
+    emits("close");
+  }
+}
+</script>

package/src/components/buttons/TextButton.vue

@@ -0,0 +1,40 @@
+<template>
+  <button
+    :class="[
+      'std-btn std-blue',
+      { 'px-3 py-1': dense },
+      { 'std-red': color === 'red' },
+      { 'std-green': color === 'green' },
+    ]"
+    :disabled="disabled || loading"
+  >
+    <div v-if="loading" class="mx-2 inline-block spinner"></div>
+    <div v-else class="flex">
+      <slot />
+      {{ props.text }}
+    </div>
+  </button>
+</template>
+
+<script setup>
+const props = defineProps({
+  text: String,
+  color: {
+    type: String,
+    default: "blue",
+    validator: (value) => ["red", "green", "blue"].includes(value),
+  },
+  disabled: {
+    type: [Boolean, Number],
+    default: false,
+  },
+  dense: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>