fluency-v8-components 1.4.7 → 1.4.9

package/dist/{index.es-B6Z5McD1.mjs → index.es-le_XjTgU.mjs}

@@ -1,4 +1,4 @@
-import { c as Da, _ as Va, g as il } from "./index-bYQpvhTw.mjs";
+import { c as Da, _ as Va, g as il } from "./index-RvcduEmd.mjs";
 var fn = {}, cn = {}, cr, vn;
 function Q() {
   if (vn) return cr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluency-v8-components",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "main": "dist/fluency-v8-components.umd.js",
   "module": "dist/fluency-v8-components.es.js",
   "types": "dist/index.d.ts",

package/src/components/common/Select.vue

@@ -0,0 +1,90 @@
+<template>
+  <Menu as="div" class="relative inline-block text-left">
+    <MenuButton
+      :class="[
+        `group inline-flex justify-center text-${size} font-medium`,
+        { 'std-btn std-btn-red': color === 'red' },
+        { 'std-btn std-btn-green': color === 'green' },
+        { 'std-btn std-btn-blue': color === 'blue' },
+        { 'px-3! py-1!': dense },
+      ]"
+      :disabled="disabled"
+    >
+      <slot name="btn" />
+    </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="[
+          `std-white input-dropdown w-${optionsSize} origin-top-right shadow-lg max-h-96`,
+          direction === 'right' ? 'left-0 ' : 'right-0',
+          { 'std-red': color === 'red' },
+          { 'std-green': color === 'green' },
+          { 'std-blue': color === 'blue' },
+          { 'std-white': color !== 'red' && color !== 'blue' && color !== 'green' },
+        ]"
+      >
+        <div class="py-1">
+          <MenuItem v-for="option in options" :key="option" v-slot="{ active }">
+            <span
+              :class="[
+                { 'outline-hidden': active },
+                { 'white-bg-hover dark:dark-bg-hover': color !== 'red' && color !== 'blue' && color !== 'green' && (active || labelMatch(option)) },
+                { 'std-red-hover-light': color === 'red' && (active || labelMatch(option)) },
+                { 'std-blue-hover-light': color === 'blue' && (active || labelMatch(option)) },
+                { 'std-green-hover-light': color === 'green' && (active || labelMatch(option)) },
+                `group flex w-full items-center rounded-md px-2 py-2 text-${size} cursor-pointer`,
+              ]"
+              @click.stop="emits('select', option)"
+            >
+              {{ option?.label || option }}
+            </span>
+          </MenuItem>
+        </div>
+      </MenuItems>
+    </transition>
+  </Menu>
+</template>
+<script setup>
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+
+// props and emits
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  direction: {
+    type: String,
+    default: "left",
+  },
+  optionsSize: {
+    type: String,
+    default: "40",
+  },
+  size: {
+    type: String,
+    default: "xs",
+  },
+  color: String,
+  current: {
+    type: String,
+    default: "",
+  },
+  disabled: Boolean,
+  dense: Boolean,
+});
+const emits = defineEmits(["select"]);
+
+// function defs
+function labelMatch(option) {
+  return props.current === option || props.current === option?.label
+}
+</script>

package/src/components/common/Slideout.vue

@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot as="template" :show="open">
-    <Dialog as="div" class="relative z-40" @close="emits('hide')">
+    <Dialog as="div" class="relative z-40" @close="hideSlideout">
       <!--div class="fixed inset-0" /-->
       <TransitionChild
         as="template"
@@ -84,11 +84,23 @@ import {
 import { XMarkIcon } from "@heroicons/vue/24/outline";
 import { adjustText } from "@/constants/font-map";
 
+// constants
+const titleWidth = 2800;
+
+// props and emits
 const props = defineProps({
   open: Boolean,
   title: String,
 });
 const emits = defineEmits(["close", "hide"]);
 
-const titleWidth = 2800;
+// function defs
+function hideSlideout() {
+  const dialogs = window.document.querySelectorAll("#headlessui-portal-root");
+  if (dialogs && dialogs.length > 0 && dialogs[0].childElementCount > 2) {
+    // another dialog is open
+  } else {
+    emits('hide')
+  }
+}
 </script>

package/src/components/common/Sort.vue

@@ -1,48 +1,21 @@
 <template>
-  <Menu as="div" class="relative inline-block text-left">
-    <MenuButton
-      :class="`group inline-flex justify-center text-${size} font-medium`"
-    >
+  <Select
+    :options="options"
+    :current="current.label"
+    :direction="direction"
+    :size="size"
+    @select="emits('sort', $event)"
+  >
+    <template #btn>
       <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="[
-          'std-white input-dropdown w-40 origin-top-right shadow-lg max-h-96',
-          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' : '',
-                { 'white-bg-hover dark:dark-bg-hover': 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>
+  </Select>
 </template>
 <script setup>
 import { computed } from "vue";
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import Select from "./Select.vue"
 import {
   Bars3BottomLeftIcon,
   ChevronDownIcon,

package/src/components/index.js

@@ -49,8 +49,6 @@ 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
@@ -102,6 +100,7 @@ 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 Select } from "./common/Select.vue";
 export { default as Sort } from "./common/Sort.vue";
 export { default as Flag } from "./common/Flag.vue";
 export { default as ThreeHomePanel } from "./common/ThreeHomePanel.vue";

package/src/components/notifications/Notify.vue

@@ -1,4 +1,3 @@
-<!-- TODO: dark mode -->
 <template>
   <TransitionRoot as="template" :show="open">
     <Dialog
@@ -34,7 +33,7 @@
         </div>
         <div class="ml-auto pl-3">
           <div class="-mx-1.5 -my-1.5">
-            <IconButton :color="getColor()" @click="closeModal">
+            <IconButton :color="getColor()" @click.stop="closeModal">
               <XMarkIcon class="icon-md" aria-hidden="true" />
             </IconButton>
           </div>
@@ -72,7 +71,7 @@
         </div>
         <div class="ml-auto pl-3">
           <div class="-mx-1.5 -my-1.5">
-            <IconButton :color="getColor()" @click="closeModal">
+            <IconButton :color="getColor()" @click.stop="closeModal">
               <XMarkIcon class="icon-md" aria-hidden="true" />
             </IconButton>
           </div>

package/src/components/buttons/DropdownButton.vue

@@ -1,104 +0,0 @@
-<template>
-  <Menu as="div" class="relative">
-    <div class="std-btn py-0">
-      <div
-        :class="[
-          'rounded-l-lg px-5 py-3 cursor-pointer',
-          { 'std-btn-red': color === 'red' },
-          { 'std-btn-green': color === 'green' },
-          { 'std-btn-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="[
-          'rounded-r-lg px-1 py-3 border-l-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50',
-          { 'std-btn-red': color === 'red' },
-          { 'std-btn-green': color === 'green' },
-          { 'std-btn-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',
-          { 'std-red': color === 'red' },
-          { 'std-green': color === 'green' },
-          { 'std-blue': 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-btn-red': color === 'red' },
-              { 'std-btn-green': color === 'green' },
-              { 'std-btn-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/MenuButton.vue

@@ -1,135 +0,0 @@
-<template>
-  <Menu
-    as="div"
-    :class="[
-      'relative',
-      { 'px-3 py-1': dense },
-      { 'std-btn-red': color === 'red' },
-      { 'std-btn-green': color === 'green' },
-      { 'std-btn-blue': color === 'blue' },
-      { 'std-btn': type === 'button' },
-      { 'std-white-text': 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',
-          { 'std-red': color === 'red' },
-          { 'std-green': color === 'green' },
-          { 'std-blue': color === 'blue' },
-          { 'std-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-btn-red': color === 'red' },
-              { 'std-btn-green': color === 'green' },
-              { 'std-btn-blue': color === 'blue' },
-              {
-                'std-btn-white': 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>