@inriver/inri 1.28.0 → 1.29.0

package/.changeset/lucky-baboons-watch.md

@@ -0,0 +1,5 @@
+---
+"@inriver/inri": patch
+---
+
+Add support for showing tooltips when hovering over CSelect and options. Add disable support and styling. Fix required validation to work with empty arrays.

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @inriver/inri
 
+## 1.29.0
+
+### Minor Changes
+
+- Update documentation
+- Wallop font is now included in the package
+- Updating README and exporting tailwing config
+
+### Patch Changes
+
+- Fix CSelect placeholder color. Modularize Sass imports. Include inri typings when bundling
+- Fix Sass warnings and errors by removing usage of @apply and updating Quasar + sass dependencies
+- Add support for showing tooltips when hovering over CSelect and options. Add disable support and styling. Fix required validation to work with empty arrays.
+- Add support for hiding the sidebars in CLayoutWithSidebars. Add support for entering a custom title in CLayoutWithSidebars
+- Add support for showing placeholder ()in CSelect eoutside of use-input mode
+- Fix error when CSelect is passed object options with falsy values
+
 ## 1.28.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inriver/inri",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "main": "index.ts",
   "types": "main.d.ts",
   "peerDependencies": {

package/src/components/CSelect.vue

@@ -5,6 +5,7 @@
     :model-value="modelValue"
     v-bind="dense ? $inri.inputDense : $inri.input"
     :options="internalOptions"
+    :disable="disable"
     :multiple="multiple"
     :use-input="dense || useInput"
     :placeholder="selectedPlaceholder"
@@ -18,14 +19,24 @@
     @update:model-value="onModelUpdate"
   >
     <template
-      v-if="!useInput && (modelValue === undefined || modelValue === null)"
+      v-if="!useInput && (modelValue === undefined || modelValue === null || (Array.isArray(modelValue) && !modelValue.length))"
       #selected
     >
-      <slot name="placeholder">
-        <div class="text-grey">
-          {{ selectedPlaceholder }}
-        </div>
-      </slot>
+      <div
+        class="text-grey"
+        :class="{
+          'w-full': placeholderFullWidth,
+          'pointer-events-auto cursor-not-allowed': disable
+        }"
+      >
+        {{ selectedPlaceholder }}
+        <c-tooltip
+          v-if="placeholderTooltip"
+          :offset="[24, 24]"
+        >
+          {{ placeholderTooltip }}
+        </c-tooltip>
+      </div>
     </template>
 
     <template #no-option>
@@ -60,6 +71,7 @@
       <q-item
         v-if="multiple"
         v-bind="itemProps"
+        :class="!itemProps.disable || 'pointer-events-auto cursor-not-allowed'"
       >
         <q-item-section>
           <q-checkbox
@@ -70,16 +82,25 @@
             @click="toggleOption(opt)"
           />
         </q-item-section>
+
+        <c-tooltip v-if="opt?.tooltip">
+          {{ opt.tooltip }}
+        </c-tooltip>
       </q-item>
 
       <!-- single -->
       <q-item
         v-else
         v-bind="itemProps"
+        :class="!itemProps.disable || 'pointer-events-auto cursor-not-allowed'"
       >
         <q-item-section>
           {{ getOptionLabel(opt) }}
         </q-item-section>
+
+        <c-tooltip v-if="opt?.tooltip">
+          {{ opt.tooltip }}
+        </c-tooltip>
       </q-item>
     </template>
   </q-select>
@@ -106,6 +127,7 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  disable: Boolean,
   multiple: Boolean,
   dense: Boolean,
   useInput: Boolean,
@@ -122,6 +144,11 @@ const props = defineProps({
     type: String,
     default: undefined,
   },
+  placeholderFullWidth: Boolean,
+  placeholderTooltip: {
+    type: String,
+    default: undefined,
+  },
 })
 
 // State etc.

package/src/plugins/validationRules.ts

@@ -8,7 +8,7 @@ const $t = i18n.global.t
  */
 export function required (msg?: string) {
   return (value): true | string => {
-    return !!value || msg || $t('inri.validation.required')
+    return (Array.isArray(value) ? value.length > 0 : !!value) || msg || $t('inri.validation.required')
   }
 }