fluency-v8-components 1.5.2 → 1.5.3

package/dist/{index.es-9fhwVAdV.mjs → index.es-PoP0Se8l.mjs}

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

package/src/assets/main.css

@@ -302,6 +302,10 @@
   @apply text-slate-500 dark:text-slate-400
 }
 
+@utility std-placeholder {
+  @apply placeholder-gray-400 dark:placeholder-gray-500;
+}
+
 @utility icon-xs {
   @apply w-3 h-3;
 }
@@ -346,6 +350,20 @@
   .status-neutral {
     @apply text-slate-600 bg-slate-600/20 dark:text-slate-400 dark:bg-slate-400/10
   }
+
+  .custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: #e5e7eb transparent;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    background-color: #e5e7eb;
+    border-radius: 10px;
+  }
 }
 
 @layer components {
@@ -429,7 +447,7 @@
   }
 
   .input-block {
-    @apply text-sm std-white-text bg-white dark:bg-neutral-700 block w-full rounded-md border-0 py-1.5 shadow-xs ring-1 ring-inset ring-gray-300 sm:leading-6 focus-within:ring-2 focus-within:ring-inset focus-within:std-blue-ring;
+    @apply text-sm std-white-text bg-white dark:bg-neutral-700 block w-full rounded-md border-0 py-1.5 shadow-xs ring-1 ring-inset ring-gray-300 sm:leading-6 focus-within:ring-2 focus-within:ring-inset focus-within:std-blue-ring std-placeholder;
   }
   .input-icon {
     @apply absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center;

package/src/components/common/CategoryCard.vue

@@ -7,6 +7,7 @@
           {{ category.name || category }}
           <slot name="title" />
         </h3>
+        <p class="text-xs font-light">{{ description }}</p>
       </div>
       <div class="flex mt-0 ml-4">
         <slot name="header" />
@@ -24,5 +25,6 @@ const props = defineProps({
     type: [Object, String],
     required: true,
   },
+  description: String,
 });
 </script>

package/src/components/common/ItemBox.vue

@@ -10,7 +10,7 @@
       {
         'blue-box': !props.inUse && !props.selected && !props.disabled,
       },
-      'box',
+      'box relative',
     ]"
     :style="`min-width: ${minWidth}`"
     @click="emits('view')"
@@ -22,10 +22,19 @@
       <div class="text-xs font-light">{{ props.description }}</div>
       <slot name="extra" />
     </div>
+    <button
+      v-if="deleteButton"
+      class="absolute top-0 right-0 rounded-full std-btn-red -translate-y-1/2 translate-x-1/2 p-1"
+      @click.stop="emits('delete')"
+    >
+      <TrashIcon class="icon icon-gray" />
+    </button>
   </div>
 </template>
 
 <script setup>
+import { TrashIcon } from '@heroicons/vue/20/solid';
+
 const props = defineProps({
   inUse: Boolean,
   selected: Boolean,
@@ -44,6 +53,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  deleteButton: {
+    type: Boolean,
+    default: false,
+  },
 });
-const emits = defineEmits(["view"]);
+const emits = defineEmits(["view", "delete"]);
 </script>

package/src/components/form/GreyInput.vue

@@ -8,7 +8,7 @@
     <input
       :type="type"
       :class="[
-        'flex-1 border-0 text-sm bg-transparent p-0.5 focus:ring-0 focus:outline-none',
+        'flex-1 border-0 text-sm bg-transparent p-0.5 focus:ring-0 focus:outline-none std-placeholder',
         readonly ? 'disabled' : '',
       ]"
       :value="$attrs.modelValue"

package/src/components/form/GreyInputAutocomplete.vue

@@ -7,7 +7,7 @@
   >
     <ComboboxInput
       :class="[
-        'px-2 w-full bg-transparent border-0 outline-none ring-0 focus:outline-none focus:ring-0',
+        'px-2 w-full bg-transparent border-0 outline-none ring-0 focus:outline-none focus:ring-0 std-placeholder',
         { 'std-red-ring': error },
         { 'disabled': readonly },
       ]"

package/src/components/form/GreyInputGrow.vue

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