quasar-ui-danx 0.2.18 → 0.2.20

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 {

package/src/helpers/index.ts

@@ -1,3 +1,4 @@
+export * from "./actions";
 export * from "./array";
 export * from "./compatibility";
 export * from "./date";
@@ -9,7 +10,7 @@ export * from "./FlashMessages";
 export * from "./formats";
 export * from "./http";
 export * from "./multiFileUpload";
-export * from "./actions";
 export * from "./singleFileUpload";
 export * from "./storage";
+export * from "./styles";
 export * from "./utils";

package/src/helpers/styles.ts

@@ -0,0 +1,18 @@
+export function applyCssVars(styles: object, prefix: string = "") {
+    const cssVars = buildCssVars(styles, prefix);
+
+    // Create a new <style> tag and inject the CSS Vars
+    const style = document.createElement("style");
+    style.innerHTML = `:root {${cssVars}}`;
+    document.head.appendChild(style);
+}
+
+export function buildCssVars(styles: object, prefix: string = ""): string {
+    // Convert the object into a CSS Vars string
+    return Object.entries(styles).map(([key, value]) => {
+        if (typeof value === "object") {
+            return buildCssVars(value, `${prefix}${key}-`);
+        }
+        return `--${prefix}${key}: ${value}`;
+    }).join(";");
+}

package/tailwind.config.js

@@ -1,11 +1,24 @@
-/** @type {import('tailwindcss').Config} */
+/** @type {import("tailwindcss").Config} */
+import twColors from "tailwindcss/colors";
+
+// Convert all TW colors to CSS Variables
+const colorKeys = Object.keys(twColors).filter(c => twColors[c].hasOwnProperty("500"));
+const colors = {};
+
+for (const name of colorKeys) {
+    const twColor = twColors[name];
+    for (const offset of Object.keys(twColor)) {
+        colors[name] = colors[name] || {};
+        colors[name][offset] = `var(--tw-${name}-${offset}, ${twColor[offset]})`;
+    }
+}
+
 export default {
-    content: ['./*.html', './src/**/*.{vue,ts}'],
-    safelist: [
-        'bg-slate-200'
-    ],
+    content: ["./*.html", "./src/**/*.{vue,ts}"],
     theme: {
-        extend: {}
+        extend: {
+            colors
+        }
     },
     plugins: []
 };