@inriver/inri 1.27.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/.changeset/witty-trains-attend.md

@@ -0,0 +1,5 @@
+---
+"@inriver/inri": patch
+---
+
+Fix error when CSelect is passed object options with falsy values

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @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
+
+- 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 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.27.0
 
 ### Minor Changes

package/configs/base-tailwind-config.js

@@ -31,6 +31,7 @@ export const baseTailwindConfig = {
       green: 'var(--color-green)',
       'green-light': 'var(--color-green-light)',
       'green-light-30': 'var(--color-green-light-30)',
+      'green-light-60': 'var(--color-green-light-60)',
 
       primary: 'var(--q-primary)',
       'on-primary': 'var(--on-primary-color)',
@@ -90,6 +91,7 @@ export const baseTailwindConfig = {
     'bg-yellow-light',
     'bg-green-light',
     'bg-green-light-30',
+    'bg-green-light-60',
 
     'text-blue-light',
     'text-purple-light',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inriver/inri",
-  "version": "1.27.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,11 +19,23 @@
     @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
     >
-      <div class="text-grey">
+      <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>
 
@@ -58,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
@@ -68,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>
@@ -104,6 +127,7 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  disable: Boolean,
   multiple: Boolean,
   dense: Boolean,
   useInput: Boolean,
@@ -120,6 +144,11 @@ const props = defineProps({
     type: String,
     default: undefined,
   },
+  placeholderFullWidth: Boolean,
+  placeholderTooltip: {
+    type: String,
+    default: undefined,
+  },
 })
 
 // State etc.
@@ -142,7 +171,9 @@ const selectedPlaceholder = computed(() => {
 })
 
 function getOptionLabel (opt) {
-  return opt[props.optionLabel] || opt
+  return typeof opt === 'object' && opt !== null && props.optionLabel in opt
+    ? opt[props.optionLabel]
+    : opt
 }
 
 function filter (val, update) {

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')
   }
 }
 

package/src/styles/_css-variables.scss

@@ -23,6 +23,7 @@
   --color-green: #00b06e;
   --color-green-light: #66d0a8;
   --color-green-light-30: rgba(102,208,168,0.3);
+  --color-green-light-60: rgba(102,208,168,0.6);
   --color-green-10: #e5f7f0;
 
   // Surface is a special color defined in Material Design but not part of Quasar. We still want to use it though.