@inriver/inri 1.26.0 → 1.28.0

package/.changeset/calm-comics-help.md

@@ -0,0 +1,5 @@
+---
+"@inriver/inri": patch
+---
+
+Fix CSelect placeholder color. Modularize Sass imports. Include inri typings when bundling

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,36 @@
 # @inriver/inri
 
+## 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
+
+- 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
+
 ## 1.26.0
 
 ### Minor Changes
@@ -7,7 +38,7 @@
 - Update documentation
 - Wallop font is now included in the package
 - Updating README and exporting tailwing config
-- Add support for hiding the sidebars in CLayoutWithSidebars. 
+- Add support for hiding the sidebars in CLayoutWithSidebars.
 - Add support for entering a custom title in CLayoutWithSidebars
 - Add support for showing placeholder in CSelect outside of use-input mode
 
@@ -22,7 +53,7 @@
 - Update documentation
 - Wallop font is now included in the package
 - Updating README and exporting tailwing config
-- Add support for hiding the sidebars in CLayoutWithSidebars. 
+- Add support for hiding the sidebars in CLayoutWithSidebars.
 - Add support for entering a custom title in CLayoutWithSidebars
 
 ### Patch Changes

package/configs/base-tailwind-config.js

@@ -9,6 +9,7 @@ export const baseTailwindConfig = {
     },
     colors: {
       current: 'currentColor',
+      transparent: 'transparent',
 
       grey: 'var(--color-grey)',
       'grey-light': 'var(--color-grey-light)',
@@ -30,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)',
@@ -89,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/main.d.ts

@@ -0,0 +1,10 @@
+import {
+  GlobalComponents as inriGlobalComponents,
+  ComponentCustomProperties as inriComponentCustomProperties,
+} from './src/typings'
+
+declare module 'vue' {
+  /* eslint-disable @typescript-eslint/no-empty-interface */
+  export interface GlobalComponents extends inriGlobalComponents {}
+  export interface ComponentCustomProperties extends inriComponentCustomProperties {}
+}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@inriver/inri",
-  "version": "1.26.0",
+  "version": "1.28.0",
   "main": "index.ts",
+  "types": "main.d.ts",
   "peerDependencies": {
     "quasar": "2.14.2",
     "vue": "^3.3.4",

package/src/components/CSelect.vue

@@ -18,12 +18,14 @@
     @update:model-value="onModelUpdate"
   >
     <template
-      v-if="!useInput && modelValue === null"
+      v-if="!useInput && (modelValue === undefined || modelValue === null)"
       #selected
     >
-      <div class="text-grey-6">
-        {{ selectedPlaceholder }}
-      </div>
+      <slot name="placeholder">
+        <div class="text-grey">
+          {{ selectedPlaceholder }}
+        </div>
+      </slot>
     </template>
 
     <template #no-option>
@@ -84,7 +86,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, toRef, useAttrs } from 'vue'
+import { PropType, computed, ref, toRef, useAttrs } from 'vue'
 import { QSelect } from 'quasar'
 import useSelectable from '../composables/useSelectable'
 
@@ -97,7 +99,7 @@ defineExpose({
 
 const props = defineProps({
   modelValue: {
-    type: [Object, String, Number, Boolean, Array],
+    type: [Object, String, Number, Boolean, Array, null] as PropType<Object | String | Number | Boolean | Array<any> | null>,
     default: undefined,
   },
   options: {
@@ -142,7 +144,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/layouts/layout-fragments/CPageTitle.vue

@@ -7,7 +7,9 @@
       data-id="page-title"
       class="truncate flex-1"
     >
-      {{ title || routeTitle }}
+      <slot>
+        {{ title || routeTitle }}
+      </slot>
     </h1>
   </div>
 </template>
@@ -19,7 +21,7 @@ import { useRoute } from 'vue-router'
 
 const route = useRoute()
 
-defineProps({
+const props = defineProps({
   title: {
     type: String,
     default: undefined,
@@ -28,7 +30,11 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  noRouteTitle: {
+    type: Boolean,
+    default: false,
+  },
 })
 
-const routeTitle = computed(() => getRouteTitle(route))
+const routeTitle = computed(() => props.noRouteTitle ? '' : getRouteTitle(route))
 </script>

package/src/plugins/inriverQuasarComponentConfigurations.ts

@@ -6,26 +6,26 @@ export const input = {
   outlined: true,
   hint: '',
   dropdownIcon: 'mdi-chevron-down',
-}
+} as const
 
 export const inputDense = {
   class: 'c-inri-input c-inri-input--dense',
   outlined: true,
   dense: true,
   dropdownIcon: 'mdi-chevron-down',
-}
+} as const
 
 export const checkbox = {
   class: 'c-inri-checkbox',
   dense: true,
-}
+} as const
 
 export const radio = {
   class: 'c-inri-radio',
   dense: true,
   checkedIcon: 'mdi-checkbox-marked-circle',
   uncheckedIcon: 'mdi-checkbox-blank-circle-outline',
-}
+} as const
 
 export const button = {
   class: 'c-btn',
@@ -34,7 +34,7 @@ export const button = {
   noCaps: true,
   color: 'primary',
   textColor: 'grey-darkest',
-}
+} as const
 
 export const table = {
   class: 'c-inri-table',
@@ -48,13 +48,13 @@ export const table = {
   rowsPerPageLabel: ' ',
   hideNoData: true,
   hideBottom: true,
-}
+} as const
 
 export const tree = {
   class: 'c-inri-tree',
   noConnectors: true,
   icon: 'mdi-chevron-right',
-}
+} as const
 
 export const quasarComponentConfigurations = {
   input,

package/src/styles/_components.scss

@@ -0,0 +1,12 @@
+@import "components/breadcrumbs";
+@import "components/checkboxes";
+@import "components/chips";
+@import "components/forms";
+@import "components/menu";
+@import "components/notifications";
+@import "components/q-editor";
+@import "components/radio-buttons";
+@import "components/tables";
+@import "components/tooltips";
+@import "components/tree";
+@import "components/truncated-chips";

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.

package/src/styles/_fonts.scss

@@ -0,0 +1,26 @@
+@font-face {
+  font-family: 'Wallop';
+  src: url('../fonts/Wallop-Regular.woff2') format("woff2");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Wallop';
+  src: url('../fonts/Wallop-Medium.woff2') format("woff2");
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Wallop';
+  src: url('../fonts/Wallop-SemiBold.woff2') format("woff2");
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Wallop';
+  src: url('../fonts/Wallop-Bold.woff2') format("woff2");
+  font-weight: 700;
+  font-display: swap;
+}

package/src/styles/main.scss

@@ -3,43 +3,6 @@
 @import 'quasar/dist/quasar.sass';
 @import 'transitions';
 @import 'reset';
-@import 'components/forms';
-@import 'components/chips';
-@import 'components/checkboxes';
-@import 'components/radio-buttons';
-@import 'components/tables';
-@import 'components/q-editor';
-@import 'components/tree';
-@import 'components/tooltips';
-@import 'components/notifications';
-@import 'components/breadcrumbs';
-@import 'components/menu';
-@import 'components/truncated-chips';
+@import 'components';
 @import 'utils';
-
-@font-face {
-  font-family: 'Wallop';
-  src: url('../fonts/Wallop-Regular.woff2') format("woff2");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Wallop';
-  src: url('../fonts/Wallop-Medium.woff2') format("woff2");
-  font-weight: 500;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Wallop';
-  src: url('../fonts/Wallop-SemiBold.woff2') format("woff2");
-  font-weight: 600;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Wallop';
-  src: url('../fonts/Wallop-Bold.woff2') format("woff2");
-  font-weight: 700;
-  font-display: swap;
-}
+@import 'fonts';

package/src/utils/colorUtils.ts

@@ -4,11 +4,11 @@ interface RelatedColors {
   effectColor: string,
 }
 
-export const baseColors = ['primary', 'secondary', 'accent', 'surface']
-export const blackAndWhiteColors = ['black', 'white']
-export const spotColors = ['blue', 'purple', 'red', 'orange', 'yellow', 'green']
-export const lightColors = ['blue-light', 'purple-light', 'red-light', 'orange-light', 'yellow-light', 'green-light']
-export const greyColors = ['grey-darkest', 'grey-darker', 'grey-dark', 'grey', 'grey-light', 'grey-lighter']
+export const baseColors = ['primary', 'secondary', 'accent', 'surface'] as const
+export const blackAndWhiteColors = ['black', 'white'] as const
+export const spotColors = ['blue', 'purple', 'red', 'orange', 'yellow', 'green'] as const
+export const lightColors = ['blue-light', 'purple-light', 'red-light', 'orange-light', 'yellow-light', 'green-light'] as const
+export const greyColors = ['grey-darkest', 'grey-darker', 'grey-dark', 'grey', 'grey-light', 'grey-lighter'] as const
 
 export const colors = {
   baseColors,

package/tsconfig.json

@@ -26,7 +26,7 @@
     "src/**/*.vue",
     "tests/**/*.ts",
     "tests/**/*.tsx",
-    "componentProperties.d.ts"
+    "main.d.ts"
   ],
   "exclude": [
     "node_modules"

package/componentProperties.d.ts

@@ -1,8 +0,0 @@
-import { ComponentCustomProperties as inriComponentCustomProperties } from './src/typings'
-
-declare module '@vue/runtime-core' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface ComponentCustomProperties extends inriComponentCustomProperties {}
-}
-
-export {}