@inriver/inri 1.19.0 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inriver/inri",
-  "version": "1.19.0",
+  "version": "1.21.0",
   "peerDependencies": {
     "quasar": "2.12.1",
     "vue": "^3.3.4",

package/src/components/CBtn.vue

@@ -52,7 +52,7 @@ defineProps({
 </script>
 
 <style lang="scss">
-.c-btn {
+.c-inri-btn {
   height: 40px;
   font-weight: 600;
   padding: 4px 56px !important;

package/src/components/CContextMenu.vue

@@ -6,7 +6,7 @@
     @click.prevent
   >
     <q-menu>
-      <q-list class="menu-list pb-0">
+      <q-list class="c-inri-menu-list pb-0">
         <slot />
       </q-list>
     </q-menu>
@@ -23,7 +23,7 @@ defineProps({
 </script>
 
 <style scoped lang="scss">
-.menu-list {
+.c-inri-menu-list {
   min-width: 146px;
 }
 </style>

package/src/components/CDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <q-dialog
     data-id="dialog"
-    class="c-dialog"
+    class="c-inri-dialog"
     :model-value="modelValue"
     :position="position"
     transition-show="fade"
@@ -192,7 +192,7 @@ defineExpose({
 
 <style lang="scss">
 // This css is also shared by the programmatic dialogs
-.c-dialog {
+.c-inri-dialog {
   .q-dialog__backdrop {
     background: var(--dialog-backdrop-color);
   }
@@ -210,11 +210,11 @@ defineExpose({
   }
 
   .dialog-card-action-buttons {
-    .c-btn {
+    .c-inri-btn {
       width: 100%;
     }
 
-    .c-btn + .c-btn {
+    .c-inri-btn + .c-inri-btn {
       margin-top: 16px;
     }
   }
@@ -222,13 +222,13 @@ defineExpose({
 
 // 'sm' displays
 @media (min-width: 640px) {
-  .c-dialog {
+  .c-inri-dialog {
     .dialog-card-action-buttons {
-      .c-btn {
+      .c-inri-btn {
         width: auto;
       }
 
-      .c-btn + .c-btn {
+      .c-inri-btn + .c-inri-btn {
         margin-top: 0;
         margin-left: 10px;
       }
@@ -238,7 +238,7 @@ defineExpose({
 
 // 'md' displays
 @media (min-width: 1024px) {
-  .c-dialog {
+  .c-inri-dialog {
     // position="top" (default) should be offset with 60px from the top
     .q-dialog__inner.fixed-top {
       padding: 0 60px;

package/src/components/CDrawerButton.vue

@@ -2,7 +2,7 @@
   <q-btn
     ref="drawerButton"
     data-id="drawer-btn"
-    class="drawer-button group"
+    class="c-inri-drawer-button group"
     :class="{
       'is-left': left,
       'w-60px sm:w-340px': isOpen,
@@ -63,7 +63,7 @@ function toggle () {
 </script>
 
 <style lang="scss">
-.drawer-button {
+.c-inri-drawer-button {
   height: 60px;
   border-radius: 0;
   transition: width 0.1s;
@@ -83,7 +83,7 @@ function toggle () {
 }
 
 // Left side drawer button
-.drawer-button.is-left {
+.c-inri-drawer-button.is-left {
   .q-btn__content {
     justify-content: end;
   }

package/src/components/CExpansionItem.vue

@@ -2,7 +2,7 @@
   <q-expansion-item
     :label="label"
     :header-class="headerClass"
-    class="c-expansion-item"
+    class="c-inri-expansion-item"
   >
     <slot />
   </q-expansion-item>
@@ -22,7 +22,7 @@ defineProps({
 </script>
 
 <style lang="scss">
-.c-expansion-item {
+.c-inri-expansion-item {
   border-bottom: 1px solid var(--color-border);
 
   .q-item__section {

package/src/components/CExpansionItemWithCheckbox.vue

@@ -1,7 +1,7 @@
 <template>
   <q-expansion-item
     :header-class="headerClass"
-    class="c-expansion-item"
+    class="c-inri-expansion-item"
   >
     <template #header>
       <q-checkbox

package/src/components/CHeaderLinks.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="showExtendedMenu"
-    class="header-links gt-sm"
+    class="c-inri-header-links gt-sm"
   >
     <c-header-menu-link
       v-for="link in links"
@@ -52,7 +52,7 @@ const showExtendedMenu = computed(() => props.maxVisible >= props.links.length)
 </script>
 
 <style scoped>
-.header-links {
+.c-inri-header-links {
   margin-right: 32px;
   height: 100%;
   display: flex;

package/src/components/CHeaderMenuLink.vue

@@ -1,6 +1,6 @@
 <template>
   <a
-    class="link"
+    class="c-inri-link"
     :class="{ 'is-active': isActive }"
     :href="href"
   >
@@ -21,7 +21,7 @@ defineProps<Props>()
 </script>
 
 <style scoped>
-.link {
+.c-inri-link {
   display: flex;
   align-items: center;
   font-size: 16px;
@@ -31,7 +31,7 @@ defineProps<Props>()
   min-width: 0;
 }
 
-.link:hover {
+.c-inri-link:hover {
   text-decoration: underline;
 }
 

package/src/components/CIconBtn.vue

@@ -1,6 +1,6 @@
 <template>
   <q-btn
-    class="c-icon-btn"
+    class="c-inri-icon-btn"
     flat
     round
     :color="color"
@@ -61,7 +61,7 @@ defineProps({
 <style scoped lang="scss">
 $size: 32px;
 
-.c-icon-btn {
+.c-inri-icon-btn {
   height: $size;
   width: $size;
   min-height: $size;

package/src/components/CSection.vue

@@ -1,6 +1,6 @@
 <template>
   <section
-    class="c-section"
+    class="c-inri-section"
     :class="{
       'overflow-y-overlay': scroll || main,
       'flex-1': flex || main,
@@ -23,7 +23,7 @@ defineProps({
 </script>
 
 <style>
-.c-section {
+.c-inri-section {
   @apply py-7 px-6;
 }
 </style>

package/src/components/CSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <q-select
     ref="selectRef"
-    class="c-select"
+    class="c-inri-select"
     :model-value="modelValue"
     v-bind="dense ? $inri.inputDense : $inri.input"
     :options="internalOptions"
@@ -191,7 +191,7 @@ function onToggleAll (evt, emitString) {
 </script>
 
 <style lang="scss">
-.c-select {
+.c-inri-select {
   ::placeholder {
     color: var(--color-text);
   }

package/src/components/CSlideEffect.vue

@@ -3,13 +3,13 @@
 
   <div class="absolute overflow-hidden inset-0">
     <div
-      class="bg-white slide-box"
+      class="bg-white c-inri-slide-box"
       :class="slideOffsetClasses"
     />
 
     <!-- Slider -->
     <div
-      class="slide-box"
+      class="c-inri-slide-box"
       :class="[transitionBg, slideOffsetClasses]"
     />
   </div>
@@ -56,7 +56,7 @@ const transitionBg = computed(() => {
 </script>
 
 <style scoped>
-.slide-box {
+.c-inri-slide-box {
   @apply absolute transition-all duration-500 w-full h-full top-0;
 }
 </style>

package/src/components/CSpinner.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="c-spinner"
+    class="c-inri-spinner"
     :style="{
       width: size + 'px',
       height: size + 'px',
@@ -63,7 +63,7 @@ const transitionColor = computed(() => {
 // Based on:
 // https://codepen.io/joshuaward/pen/XejbZv
 
-.c-spinner {
+.c-inri-spinner {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
 

package/src/components/CTileBtn.vue

@@ -1,7 +1,7 @@
 <template>
   <q-btn
     ref="button"
-    class="c-tile-btn group"
+    class="c-inri-tile-btn group"
     :class="{
       'c-tile-btn--small': small,
       'pointer-events-none': loading
@@ -154,7 +154,7 @@ const tooltipRightDataId = computed(() => {
 </script>
 
 <style lang="scss">
-.c-tile-btn {
+.c-inri-tile-btn {
   padding: 0;
   width: 60px;
   height: 60px;

package/src/components/cards/CSmallCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="card"
-    class="c-small-card"
+    class="c-inri-small-card"
     @mouseover="isHoveredOver = true"
     @mouseleave="isHoveredOver = false"
     @click="$emit('click', $event)"
@@ -106,7 +106,7 @@ defineProps({
 </script>
 
 <style scoped lang="scss">
-.c-small-card {
+.c-inri-small-card {
   width: var(--small-card-image-size);
   min-height: 100px;
 

package/src/components/internal-components/ConfirmDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <q-dialog
     ref="dialogRef"
-    class="c-dialog"
+    class="c-inri-dialog"
     @hide="onDialogHide"
   >
     <q-card

package/src/layouts/layout-fragments/CPageBlank.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="c-page">
+  <div class="c-inri-page">
     <slot />
   </div>
 </template>
@@ -11,7 +11,7 @@ export default {
 </script>
 
 <style scoped>
-.c-page {
+.c-inri-page {
   position: absolute;
   width: 100%;
   height: 100%;

package/src/plugins/inriverQuasarComponentConfigurations.ts

@@ -2,26 +2,26 @@
 // <q-input v-bind="input" />
 
 export const input = {
-  class: 'c-input c-input--default',
+  class: 'c-inri-input c-inri-input--default',
   outlined: true,
   hint: '',
   dropdownIcon: 'mdi-chevron-down',
 }
 
 export const inputDense = {
-  class: 'c-input c-input--dense',
+  class: 'c-inri-input c-inri-input--dense',
   outlined: true,
   dense: true,
   dropdownIcon: 'mdi-chevron-down',
 }
 
 export const checkbox = {
-  class: 'c-checkbox',
+  class: 'c-inri-checkbox',
   dense: true,
 }
 
 export const radio = {
-  class: 'c-radio',
+  class: 'c-inri-radio',
   dense: true,
   checkedIcon: 'mdi-checkbox-marked-circle',
   uncheckedIcon: 'mdi-checkbox-blank-circle-outline',
@@ -37,7 +37,7 @@ export const button = {
 }
 
 export const table = {
-  class: 'c-table',
+  class: 'c-inri-table',
   flat: true,
   bordered: false,
   separator: 'horizontal' as const,
@@ -51,7 +51,7 @@ export const table = {
 }
 
 export const tree = {
-  class: 'c-tree',
+  class: 'c-inri-tree',
   noConnectors: true,
   icon: 'mdi-chevron-right',
 }

package/src/styles/components/_checkboxes.scss

@@ -1,4 +1,4 @@
-.c-checkbox {
+.c-inri-checkbox {
   &.q-checkbox[aria-label] {
     max-width: max-content;
   }

package/src/styles/components/_forms.scss

@@ -1,4 +1,4 @@
-.c-input {
+.c-inri-input {
   // Input, select etc overrides
   &.q-field--outlined .q-field__control {
     padding: 0 16px 0 12px;
@@ -138,7 +138,7 @@
 }
 
 // Default modifier
-.c-input.c-input--default:not(.q-textarea) {
+.c-inri-input.c-inri-input--default:not(.q-textarea) {
   .q-field__control {
     height: auto;
     min-height: 50px;
@@ -154,12 +154,12 @@
 }
 
 // Rounded
-.c-input.q-field--rounded .q-field__control {
+.c-inri-input.q-field--rounded .q-field__control {
   border-radius: 25px;
 }
 
 // Dense modifier
-.c-input--dense {
+.c-inri-input--dense {
   // Outline color
   &.q-field--outlined .q-field__control::before {
     border-color: var(--color-grey);

package/src/styles/components/_notifications.scss

@@ -1,5 +1,5 @@
 .c-notify {
-  .c-spinner {
+  .c-inri-spinner {
     width: 18px !important;
     height: 18px !important;
     color: #fff !important;

package/src/styles/components/_radio-buttons.scss

@@ -1,4 +1,4 @@
-.c-radio {
+.c-inri-radio {
   &.q-radio[aria-label] {
     max-width: max-content;
   }

package/src/styles/components/_tables.scss

@@ -1,4 +1,4 @@
-.c-table {
+.c-inri-table {
   th {
     padding: 7px 12px;
     font-size: 14px;
@@ -61,7 +61,7 @@
 }
 
 // This will align the content to the top instead of being centered
-.c-table.align-top {
+.c-inri-table.align-top {
   td {
     padding: 14px 12px 13px;
   }
@@ -72,7 +72,7 @@
 }
 
 // If the items are selectable then we want to hide the default checkboxes
-.c-table.hide-checkboxes {
+.c-inri-table.hide-checkboxes {
   th:first-child,
   td:first-child {
     display: none;
@@ -84,7 +84,7 @@
   }
 }
 
-.c-table.with-action-buttons {
+.c-inri-table.with-action-buttons {
   th:last-child,
   td:last-child {
     border-left: 0;

package/src/styles/components/_tree.scss

@@ -1,4 +1,4 @@
-.c-tree.q-tree {
+.c-inri-tree.q-tree {
   .q-icon {
     font-size: 20px;
     width: 12px;