fluency-v8-components 1.5.6 → 1.5.7

package/dist/{index.es-C2WG_eVQ.mjs → index.es-Ch4i5FrM.mjs}

@@ -1,4 +1,4 @@
-import { c as Da, _ as Va, g as il } from "./index-DE5ti6O6.mjs";
+import { c as Da, _ as Va, g as il } from "./index-Bubjp5rY.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.5.6",
+  "version": "1.5.7",
   "main": "dist/fluency-v8-components.umd.js",
   "module": "dist/fluency-v8-components.es.js",
   "types": "dist/index.d.ts",

package/src/components/common/CheckDropdown.vue

@@ -0,0 +1,112 @@
+<template>
+  <Popover as="div" class="relative inline-block text-left">
+    <PopoverButton
+      :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" />
+      {{ text }}
+      <ChevronDownIcon :class="[iconSize]" />
+    </PopoverButton>
+
+    <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"
+    >
+      <PopoverPanel 
+        :class="[
+          `std-white input-dropdown origin-top-right shadow-lg max-h-96`,
+          `w-${optionsSize}`,
+          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>
+          <span
+            class="row py-0.5 border-b items-center"
+          >
+            <CheckBox v-model="selectAll" @update:modelValue="toggleSelectAll" :size="size" />
+            <span :class="`ml-1 text-${size}`">Select All</span>
+          </span>
+          <span
+            v-for="(option, i) in options"
+            :class="['row py-0.5 items-center', { 'border-b': i < options.length - 1}]"
+          >
+            <CheckBox v-model="option.checked" :disabled="selectAll" :size="size" />
+            <span :class="[`ml-1 text-${size}`, { 'font-thin': selectAll}]">{{ option.label }}</span>
+          </span>
+        </div>
+      </PopoverPanel>
+    </transition>
+  </Popover>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { ChevronDownIcon } from '@heroicons/vue/20/solid'
+import CheckBox from '../form/CheckBox.vue'
+
+// props and emits
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  text: {
+    type: String,
+    default: "Filter"
+  },
+  size: {
+    type: String,
+    default: "sm",
+  },
+  color: String,
+  direction: {
+    type: String,
+    default: "left",
+  },
+  optionsSize: {
+    type: String,
+    default: "40",
+  },
+  disabled: Boolean,
+  dense: Boolean,
+  selectAll: {
+    type: Boolean,
+    default: true,
+  },
+});
+const emits = defineEmits([]);
+
+// states
+const selectAll = ref(props.selectAll ? true : false);
+// 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";
+});
+// function defs
+function toggleSelectAll() {
+  const newVal = selectAll.value
+  props.options.forEach((option) => {
+    option.checked = newVal;
+  });
+}
+</script>

package/src/components/form/CheckBox.vue

@@ -4,7 +4,8 @@
       <input
         type="checkbox"
         :class="[
-          'icon-md rounded-sm cursor-pointer',
+          'rounded-sm cursor-pointer',
+          iconSize,
           { 'cursor-not-allowed!': $attrs.disabled },
         ]"
         :checked="$attrs.modelValue"
@@ -17,6 +18,21 @@
 </template>
 <script>
 export default {
+  props: {
+    size: {
+      type: String,
+      default: "md",
+    },
+  },
+  computed: {
+    iconSize() {
+      if (this.size === "xs") return "icon";
+      if (this.size === "sm") return "icon-md";
+      if (this.size === "md") return "icon-lg";
+      if (this.size === "lg") return "icon-xl";
+      return "icon";
+    },
+  },
   methods: {
     onChange() {
       this.$emit("update:modelValue", !this.$attrs.modelValue);

package/src/components/form/GreyInputGrow.vue

@@ -6,7 +6,8 @@
     <textarea
       ref="textarea"
       :class="[
-        'py-2 px-3 w-full resize-none focus:outline-none border-0 std-placeholder custom-scrollbar',
+        'py-2 px-3 w-full resize-none border-0 std-placeholder custom-scrollbar',
+        'focus:ring-0 focus:ring-offset-0 focus:border-0 focus:outline-none shadow-none',
         readonly ? 'disabled' : '',
       ]"
       :value="$attrs.modelValue || props.value"

package/src/components/form/GreyPassword.vue

@@ -2,7 +2,7 @@
   <input
     type="password"
     :class="[
-      'pl-3 input-block',
+      'pl-3 input-block outline-none',
       { 'std-red-ring': error },
       { 'disabled': readonly },
     ]"

package/src/components/index.js

@@ -102,6 +102,7 @@ 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 CheckDropdown } from "./common/CheckDropdown.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";