fluency-v8-components 1.4.8 → 1.4.9

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

@@ -1,4 +1,4 @@
-import { c as Da, _ as Va, g as il } from "./index-CmFd3BaD.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.8",
+  "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

@@ -2,8 +2,13 @@
   <Menu as="div" class="relative inline-block text-left">
     <MenuButton
       :class="[
-        `group inline-flex justify-center text-${size} font-medium`
+        `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>
@@ -18,21 +23,28 @@
     >
       <MenuItems
         :class="[
-          'std-white input-dropdown w-40 origin-top-right shadow-lg max-h-96',
+          `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="[
-                active ? 'outline-hidden white-bg-hover dark:dark-bg-hover' : '',
-                { 'white-bg-hover dark:dark-bg-hover': current === option.label },
+                { '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?.label || option }}
             </span>
           </MenuItem>
         </div>
@@ -53,11 +65,26 @@ const props = defineProps({
     type: String,
     default: "left",
   },
+  optionsSize: {
+    type: String,
+    default: "40",
+  },
   size: {
     type: String,
     default: "xs",
   },
-  current: String,
+  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/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

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>