fluency-v8-components 1.4.6 → 1.4.8

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

@@ -1,4 +1,4 @@
-import { c as Da, _ as Va, g as il } from "./index-DwYYvTaG.mjs";
+import { c as Da, _ as Va, g as il } from "./index-CmFd3BaD.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.6",
+  "version": "1.4.8",
   "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,63 @@
+<template>
+  <Menu as="div" class="relative inline-block text-left">
+    <MenuButton
+      :class="[
+        `group inline-flex justify-center text-${size} font-medium`
+      ]"
+    >
+      <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-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 === option.label },
+                `group flex w-full items-center rounded-md px-2 py-2 text-${size} cursor-pointer`,
+              ]"
+              @click.stop="emits('select', option)"
+            >
+              {{ option.label }}
+            </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",
+  },
+  size: {
+    type: String,
+    default: "xs",
+  },
+  current: String,
+});
+const emits = defineEmits(["select"]);
+</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/dialogs/Wizard.vue

@@ -37,7 +37,7 @@
 <script setup>
 import { ref, watch } from "vue";
 import { Dialog, TextButton } from "@/components";
-import Stepper from "./wizard/Stepper.vue";
+import Stepper from "../common/Stepper.vue";
 
 const props = defineProps({
   open: Boolean,

package/src/components/index.js

@@ -102,9 +102,11 @@ 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";
+export { default as Stepper } from "./common/Stepper.vue";
 
 // charts
 export { default as AlertChart } from "./charts/AlertChart.vue";