quasar-ui-danx 0.2.18 → 0.2.19

package/src/components/ActionTable/ActionTable.vue

@@ -38,12 +38,13 @@
             :key="rowProps.key"
             :props="rowProps"
             :data-drop-zone="`resize-column-` + rowProps.col.name"
+            :class="cls['handle-drop-zone']"
         >
           {{ rowProps.col.label }}
           <HandleDraggable
               v-if="rowProps.col.resizeable"
               :drop-zone="`resize-column-` + rowProps.col.name"
-              class="resize-handle"
+              :class="cls['resize-handle']"
               @resize="onResizeColumn(rowProps.col, $event)"
           >
             <RowResizeIcon class="w-4 text-neutral-base" />
@@ -72,7 +73,7 @@ import { HandleDraggable } from "../DragAndDrop";
 import { ActionVnode } from "../Utility";
 import ActionTableColumn from "./ActionTableColumn.vue";
 import EmptyTableState from "./EmptyTableState.vue";
-import { mapSortBy, registerStickyScrolling } from "./listHelpers";
+import { registerStickyScrolling } from "./listHelpers";
 import TableSummaryRow from "./TableSummaryRow.vue";
 
 defineEmits(["update:quasar-pagination", "update:selected-rows"]);
@@ -128,8 +129,8 @@ function onResizeColumn(column, val) {
 }
 </script>
 
-<style lang="scss" scoped>
-[data-drop-zone] {
+<style lang="scss" module="cls">
+.handle-drop-zone {
   .resize-handle {
     position: absolute;
     top: 0;

package/src/components/ActionTable/Columns/VisibleColumnsToggleButtons.vue

@@ -3,8 +3,7 @@
     <div
         v-for="category in categories"
         :key="category"
-        class="category-toggle border-gray-200"
-        :class="{'has-visible-columns text-white bg-blue-600': categoryHasVisibleColumns(category)}"
+        :class="getCategoryClass(category)"
     >
       <QCheckbox
           toggle-indeterminate
@@ -46,7 +45,7 @@
   </div>
 </template>
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, useCssModule } from "vue";
 import { remove } from "../../../helpers";
 import { CaretDownIcon } from "../../../svg";
 
@@ -141,12 +140,18 @@ function toggleColumn(columnName, showColumn) {
 
   emit("update:hidden-column-names", hiddenColumnNames);
 }
+
+const cls = useCssModule();
+function getCategoryClass(category) {
+  return cls["category-toggle"] + (categoryHasVisibleColumns(category) ? (" " + cls["has-visible-columns"]) : "");
+}
 </script>
-<style
-    lang="scss"
-    scoped
->
+<style lang="scss" module>
 .category-toggle {
-  @apply text-xs font-bold rounded-lg border border-solid px-2 py-1 mx-1 cursor-pointer flex items-center;
+  @apply text-xs font-bold rounded-lg border border-solid px-2 py-1 mx-1 cursor-pointer flex items-center border-gray-200;
+
+  &.has-visible-columns {
+    @apply text-white bg-blue-600;
+  }
 }
 </style>

package/src/components/PanelsDrawer/PanelsDrawerTabs.vue

@@ -3,7 +3,7 @@
       :model-value="modelValue"
       vertical
       align="left"
-      class="panel-tabs p-4 h-auto"
+      :class="cls['panel-tabs']"
       no-caps
       @update:model-value="$emit('update:model-value', $event)"
   >
@@ -39,26 +39,25 @@ defineProps({
 });
 </script>
 
-<style
-    lang="scss"
-    scoped
->
+<style lang="scss" module="cls">
 .panel-tabs {
-  :deep(.q-tab) {
+  @apply p-4 h-auto;
+
+  :global(.q-tab) {
     justify-content: start !important;
     padding: 0;
     @apply text-left py-2.5 px-2 rounded-lg hover:bg-slate-200;
 
-    .q-focus-helper, .q-tab__indicator {
+    :global(.q-focus-helper), :global(.q-tab__indicator) {
       display: none;
     }
 
-    .q-tab__content {
+    :global(.q-tab__content) {
       @apply p-0;
     }
   }
 
-  :deep(.q-tab.q-tab--active) {
+  :global(.q-tab.q-tab--active) {
     @apply text-white bg-blue-600;
   }
 }

package/src/components/Utility/Dialogs/FullscreenCarouselDialog.vue

@@ -15,7 +15,7 @@
           animated
           :thumbnails="files.length > 1"
           infinite
-          class="carousel"
+          :class="cls['carousel']"
       >
         <QCarouselSlide
             v-for="file in files"
@@ -23,7 +23,7 @@
             :name="file.id"
             :img-src="getThumbUrl(file)"
         >
-          <div class="slide-image">
+          <div :class="cls['slide-image']">
             <template v-if="isVideo(file)">
               <video
                   class="max-h-full w-full"
@@ -80,7 +80,7 @@ function getThumbUrl(file) {
   }
 }
 </script>
-<style scoped lang="scss">
+<style module="cls" lang="scss">
 .slide-image {
   width: 100%;
   height: 100%;

package/src/components/Utility/Files/FilePreview.vue

@@ -19,7 +19,7 @@
                 :type="mimeType"
             />
           </video>
-          <button class="play-button text-blue-lighter">
+          <button :class="cls['play-button']">
             <PlayIcon class="w-16" />
           </button>
         </div>
@@ -41,7 +41,7 @@
       </div>
       <div
           v-if="$slots['action-button']"
-          class="action-button"
+          :class="cls['action-button']"
       >
         <slot name="action-button" />
       </div>
@@ -173,7 +173,7 @@ function onRemove() {
 }
 </script>
 
-<style scoped lang="scss">
+<style module="cls" lang="scss">
 .action-button {
   position: absolute;
   bottom: 1.5em;
@@ -191,5 +191,6 @@ function onRemove() {
   width: 100%;
   height: 100%;
   pointer-events: none;
+  @apply text-blue-200;
 }
 </style>

package/src/components/Utility/Layouts/CollapsableSidebar.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-      class="collapsable-sidebar overflow-x-hidden overflow-y-scroll relative"
       :class="{
+      [cls['collapsable-sidebar']]: true,
       'is-collapsed': isCollapsed,
       'is-right-side': rightSide,
       [displayClass]: true,
@@ -109,11 +109,8 @@ watch(() => props.collapse, () => {
 });
 </script>
 
-<style
-    scoped
-    lang="scss"
->
+<style module="cls" lang="scss">
 .collapsable-sidebar {
-  @apply overflow-y-auto scroll-smooth flex-shrink-0 border-r border-gray-200 transition-all;
+  @apply overflow-y-auto overflow-x-hidden scroll-smooth flex-shrink-0 border-r border-gray-200 transition-all relative;
 }
 </style>

package/src/components/Utility/Layouts/ContentDrawer.vue

@@ -9,15 +9,12 @@
     <div>
       <div
           v-if="title"
-          class="dialog-title bg-slate-100 text-gray-500 border-gray-200"
+          :class="cls['dialog-title']"
           @click.stop.prevent
       >
         {{ title }}
       </div>
-      <div
-          class="dialog-content bg-white"
-          :class="{ [contentClass]: true }"
-      >
+      <div :class="{[cls['dialog-content']]: true, [contentClass]: true}">
         <slot />
       </div>
     </div>
@@ -53,18 +50,16 @@ const isShowing = computed({
 });
 </script>
 
-<style
-    lang="scss"
-    scoped
->
+<style lang="scss" module="cls">
 .dialog-title {
-  @apply font-medium uppercase text-xs px-6 py-3 border-b rounded-t-md;
+  @apply font-medium uppercase text-xs px-6 py-3 border-b rounded-t-md bg-slate-100 text-gray-500 border-gray-200;
   font-family: "Roboto", sans-serif;
   letter-spacing: 0.05em;
   box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.25);
 }
 
 .dialog-content {
+  @apply bg-white;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
 }
 </style>

package/src/components/Utility/Transitions/StaggeredListTransition.vue

@@ -76,7 +76,7 @@ function onLeave(el, onComplete) {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .list-move,
 .list-enter-active,
 .list-leave-active {