@inriver/inri 1.25.0 → 1.27.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/ten-dryers-joke.md

@@ -0,0 +1,5 @@
+---
+"@inriver/inri": patch
+---
+
+Add support for showing placeholder ()in CSelect eoutside of use-input mode

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @inriver/inri
 
-## 1.25.0
+## 1.27.0
 
 ### Minor Changes
 
@@ -10,8 +10,39 @@
 
 ### 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
+
+- 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 entering a custom title in CLayoutWithSidebars
+- Add support for showing placeholder in CSelect outside of use-input mode
+
+### Patch Changes
+
+- Fix Sass warnings and errors by removing usage of @apply and updating Quasar + sass dependencies
+
+## 1.25.0
+
+### Minor Changes
+
+- 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 entering a custom title in CLayoutWithSidebars
+
+### Patch Changes
+
+- Fix Sass warnings and errors by removing usage of @apply and updating Quasar + sass dependencies
 
 ## 1.24.0
 

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

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.25.0",
+  "version": "1.27.0",
   "main": "index.ts",
+  "types": "main.d.ts",
   "peerDependencies": {
     "quasar": "2.14.2",
     "vue": "^3.3.4",

package/src/components/CSelect.vue

@@ -17,6 +17,15 @@
     @filter="filter"
     @update:model-value="onModelUpdate"
   >
+    <template
+      v-if="!useInput && (modelValue === undefined || modelValue === null)"
+      #selected
+    >
+      <div class="text-grey">
+        {{ selectedPlaceholder }}
+      </div>
+    </template>
+
     <template #no-option>
       <q-item>
         <q-item-section>
@@ -75,7 +84,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'
 
@@ -88,7 +97,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: {

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/_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 {}