@hostlink/nuxt-light 1.51.1 → 1.52.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.51.1",
+  "version": "1.52.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/L/Revision.vue

@@ -106,9 +106,9 @@ const getDiffHtml = (diffs) => {
                     <l-btn label="Restore" icon="sym_o_restore" permission="revision.restore" @click="onRestore"
                         :disabled="!isAllowRestore" />
 
-                    <q-checkbox label="Show changed only" v-model="showOnlyDelta" :color="$light.color"></q-checkbox>
+                    <q-checkbox label="Show changed only" v-model="showOnlyDelta"></q-checkbox>
 
-                    <q-btn-toggle class="q-mx-md" v-model="outputFormat" :toggle-color="$light.color" :options="[
+                    <q-btn-toggle class="q-mx-md" v-model="outputFormat" toggle-color="primary" :options="[
                         { label: 'side-by-side', value: 'side-by-side' }, { label: 'line-by-line', value: 'line-by-line' }
                     ]" />
                     <q-space />
@@ -128,8 +128,7 @@ const getDiffHtml = (diffs) => {
                         <thead>
                             <tr>
                                 <th width="48px">
-                                    <q-checkbox @click="onToggleAll" v-model="isCheckedAll"
-                                        :color="$light.color"></q-checkbox>
+                                    <q-checkbox @click="onToggleAll" v-model="isCheckedAll" :></q-checkbox>
                                 </th>
                                 <th>Field</th>
                                 <th>Value</th>
@@ -141,8 +140,7 @@ const getDiffHtml = (diffs) => {
 
                                 <tr>
 
-                                    <td><q-checkbox v-model="restore_fields" :val="key"
-                                            :color="$light.color"></q-checkbox>
+                                    <td><q-checkbox v-model="restore_fields" :val="key"></q-checkbox>
                                     </td>
                                     <td :class="{ 'bg-yellow-3': selectedRevision.delta[key] != undefined }">{{ key }}
                                     </td>

package/dist/runtime/components/L/System/Setting/modules.vue

@@ -7,7 +7,7 @@ defineProps({
 
 <template>
     <form-kit type="l-form" :bordered="false" :value="$props" @submit="$emit('submit', $event)">
-        <l-field :label="$t('File Manager')" stack-label :color="$light.color" hide-bottom-space class="col-6">
+        <l-field :label="$t('File Manager')" stack-label hide-bottom-space class="col-6">
             <form-kit type="l-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
         </l-field>
         

package/dist/runtime/components/L/System/Setting/security.vue

@@ -18,7 +18,7 @@ defineProps({
 
 <template>
     <FormKit type="l-form" :bordered="false" :value="$props" @submit="$emit('submit', $event)">
-        <l-field label="Password policy" stack-label :color="$light.color">
+        <l-field label="Password policy" stack-label>
             <FormKit type="l-checkbox" label="Upper Case" name="password_contains_uppercase" true-value="1"
                 false-value="0" />
             <FormKit type="l-checkbox" label="Lower Case" name="password_contains_lowercase" true-value="1"

package/dist/runtime/components/L/User/overview.vue

@@ -30,7 +30,7 @@ const obj = await collect("User", {
             <l-item label="Phone">{{ obj.phone }}</l-item>
             <l-item label="Roles">
                 <div class="q-gutter-xs float-left">
-                    <q-badge v-for="role in obj.roles" :key="role" :color="$light.color">{{ role
+                    <q-badge v-for="role in obj.roles" :key="role">{{ role
                     }}</q-badge>
                 </div>
             </l-item>

package/dist/runtime/components/L/ValidationInput.vue

@@ -65,11 +65,11 @@ watch(form, () => {
 </script>
 
 <template>
-    <q-checkbox left-label v-model="form.required" label="Required" :color="$light.color" />
+    <q-checkbox left-label v-model="form.required" label="Required" />
 
-    <q-checkbox left-label v-model="form.email" label="Email" :color="$light.color" v-if="type == 'text'" />
+    <q-checkbox left-label v-model="form.email" label="Email" v-if="type == 'text'" />
 
-    <q-checkbox left-label v-model="form.number" label="Number" :color="$light.color" v-if="type == 'text'" />
+    <q-checkbox left-label v-model="form.number" label="Number" v-if="type == 'text'" />
 
     <l-row v-if="type = 'text'">
         <l-col :md="6">

package/dist/runtime/components/l-app-main.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { useRoute, useRouter } from "vue-router";
 import { useLight, q, m } from "#imports";
-import { useQuasar } from "quasar";
+import { useQuasar, setCssVar, getCssVar } from "quasar";
 import { useI18n } from "vue-i18n";
-import { ref, computed, reactive, provide, watch, toRaw } from "vue";
+import { ref, computed, reactive, provide, watch, toRaw, onMounted } from "vue";
 import { useRuntimeConfig } from "nuxt/app";
 import { api } from "#imports";
 const emits = defineEmits(["logout"]);
@@ -56,6 +56,8 @@ let my = reactive(tt.my);
 const light = useLight();
 light.devMode = tt.system.devMode;
 light.init(my.styles);
+const color = light.getColorValue();
+setCssVar("primary", color);
 light.setMyRoles(my.roles);
 light.setPermissions(my.permissions);
 light.setMyFavorites(toRaw(my.myFavorites));
@@ -67,13 +69,13 @@ const myFavoritesCount = computed(() => {
 });
 $q.dark.set(light.isDarkMode());
 const i18n = useI18n();
-i18n.locale = my.language || "en";
+i18n.locale.value = my.language || "en";
 let system = tt.system;
-let messages = i18n.messages.value[i18n.locale];
+let messages = i18n.messages.value[i18n.locale.value] || {};
 for (let t of app.i18nMessages) {
   messages[t.name] = t.value;
 }
-i18n.setLocaleMessage(i18n.locale, messages);
+i18n.setLocaleMessage(i18n.locale.value, messages);
 const menus = ref(app.menus);
 const my_menus = ref(my.menu);
 const leftDrawerOpen = ref(false);

package/dist/runtime/components/l-btn.d.vue.ts

@@ -9,6 +9,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LBtnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LBtnProps> & Readonly<{}>, {
+    color: import("quasar").NamedColor;
     permission: string;
     confirmMessage: string;
     confirmTitle: string;

package/dist/runtime/components/l-btn.vue

@@ -21,7 +21,7 @@ const props = defineProps({
   fab: { type: Boolean, required: false, skipCheck: true },
   fabMini: { type: Boolean, required: false, skipCheck: true },
   padding: { type: null, required: false },
-  color: { type: null, required: false },
+  color: { type: null, required: false, default: "primary" },
   textColor: { type: null, required: false },
   noCaps: { type: Boolean, required: false, skipCheck: true },
   noWrap: { type: Boolean, required: false, skipCheck: true },

package/dist/runtime/components/l-btn.vue.d.ts

@@ -9,6 +9,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LBtnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LBtnProps> & Readonly<{}>, {
+    color: import("quasar").NamedColor;
     permission: string;
     confirmMessage: string;
     confirmTitle: string;

package/dist/runtime/components/l-checkbox.vue

@@ -26,7 +26,7 @@ defineProps({
 </script>
 
 <template>
-    <q-checkbox v-bind="$props" :color="color || $light.color" :label="label ? $t(label) : void 0">
+    <q-checkbox v-bind="$props" :label="label ? $t(label) : void 0">
         <slot></slot>
     </q-checkbox>
 </template>

package/dist/runtime/components/l-customizer.vue

@@ -5,13 +5,6 @@ const menuWidth = defineModel("menuWidth", {
   default: 280
 });
 const COLORS = [
-  "primary",
-  "secondary",
-  "positive",
-  "negative",
-  "info",
-  "warning",
-  "dark",
   "red",
   "pink",
   "purple",
@@ -94,11 +87,11 @@ requestAnimationFrame(refreshServerTime);
                 <q-item-label>Skin</q-item-label>
                 <div class="q-gutter-sm">
                     <q-radio :model-value="theme" val="light" label="Light"
-                        @update:model-value="$emit('update:theme', $event)" :color="$light.color" />
+                        @update:model-value="$emit('update:theme', $event)" />
                     <q-radio :model-value="theme" val="dark" label="Dark"
-                        @update:model-value="$emit('update:theme', $event)" :color="$light.color" />
+                        @update:model-value="$emit('update:theme', $event)" />
                     <q-radio :model-value="theme" val="semi-dark" label="Semi dark"
-                        @update:model-value="$emit('update:theme', $event)" :color="$light.color" />
+                        @update:model-value="$emit('update:theme', $event)" />
                 </div>
             </q-item-section>
         </q-item>
@@ -107,6 +100,9 @@ requestAnimationFrame(refreshServerTime);
             <q-item-section>
                 <q-item-label>{{ $t('Color') }}</q-item-label>
                 <div class="row">
+                    <div style="background-color: #7367f0; width: 1.5rem; height: 1.5rem;"
+                        class="q-ma-xs cursor-pointer rounded-borders" @click="$emit('update:color', '')" />
+
                     <div v-for="c in COLORS" :key="c" :class="`bg-${c}`" style="width: 1.5rem; height: 1.5rem;"
                         class="q-ma-xs cursor-pointer rounded-borders" @click="$emit('update:color', c)" />
                 </div>
@@ -118,8 +114,7 @@ requestAnimationFrame(refreshServerTime);
                 <q-item-label>{{ $t('Mini mode') }}</q-item-label>
             </q-item-section>
             <q-item-section side>
-                <q-toggle :model-value="miniState" @update:model-value="$emit('update:miniState', $event)"
-                    :color="$light.color" />
+                <q-toggle :model-value="miniState" @update:model-value="$emit('update:miniState', $event)" />
             </q-item-section>
         </q-item>
         <q-separator />
@@ -129,8 +124,7 @@ requestAnimationFrame(refreshServerTime);
                 <q-item-label>Menu dense mode</q-item-label>
             </q-item-section>
             <q-item-section side>
-                <q-toggle :model-value="dense" @update:model-value="$emit('update:dense', $event)"
-                    :color="$light.color" />
+                <q-toggle :model-value="dense" @update:model-value="$emit('update:dense', $event)" />
             </q-item-section>
         </q-item>
 
@@ -142,7 +136,7 @@ requestAnimationFrame(refreshServerTime);
             </q-item-section>
             <q-item-section side>
                 <q-toggle :model-value="menuOverlayHeader"
-                    @update:model-value="$emit('update:menuOverlayHeader', $event)" :color="$light.color" />
+                    @update:model-value="$emit('update:menuOverlayHeader', $event)" />
             </q-item-section>
         </q-item>
 
@@ -153,16 +147,14 @@ requestAnimationFrame(refreshServerTime);
                 <q-item-label>{{ $t('Show footer') }}</q-item-label>
             </q-item-section>
             <q-item-section side>
-                <q-toggle :model-value="footer" @update:model-value="$emit('update:footer', $event)"
-                    :color="$light.color" />
+                <q-toggle :model-value="footer" @update:model-value="$emit('update:footer', $event)" />
             </q-item-section>
         </q-item>
         <q-separator />
         <q-item>
             <q-item-section>
                 <q-item-label>{{ $t('Menu width') }}</q-item-label>
-                <q-item-label><q-slider v-model="menuWidth" :min="200" :max="360" label
-                        :color="$light.color" /></q-item-label>
+                <q-item-label><q-slider v-model="menuWidth" :min="200" :max="360" label /></q-item-label>
             </q-item-section>
         </q-item>
         <q-separator />
@@ -175,7 +167,7 @@ requestAnimationFrame(refreshServerTime);
                 <q-item-label>{{ server_date }} {{ server_time }} </q-item-label>
             </q-item-section>
         </q-item>
-        
+
 
     </q-list>
 </template>

package/dist/runtime/components/l-date-picker.vue

@@ -190,9 +190,9 @@ const dateProps = computed(() => {
         <template v-slot:prepend>
             <q-icon name="sym_o_event" class="cursor-pointer">
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">
-                    <q-date :color="color ?? $light.color" mask="YYYY-MM-DD" v-model="modelValue" v-bind="dateProps">
+                    <q-date mask="YYYY-MM-DD" v-model="modelValue" v-bind="dateProps">
                         <div class="row items-center justify-end">
-                            <q-btn v-close-popup :label="$t('Close')" :color="color ?? $light.color" flat />
+                            <q-btn v-close-popup :label="$t('Close')" flat />
                         </div>
                     </q-date>
                 </q-popup-proxy>

package/dist/runtime/components/l-file-manager-labels.vue

@@ -46,7 +46,7 @@ const LABLES = [
   </q-item-label>
 
   <q-item v-for="label in LABLES" :key="label.type" clickable :active="modelValue == label.type"
-    :active-class="`text-${$light.color}`" @click="toggleLabel(label.type)">
+    :active-class="`text-primary`" @click="toggleLabel(label.type)">
     <q-item-section avatar>
       <q-icon :name="label.icon" />
     </q-item-section>

package/dist/runtime/components/l-file-manager-move.vue

@@ -111,9 +111,9 @@ const onClickMove = async () => {
           <q-tooltip> Create new folder</q-tooltip>
         </q-btn>
         <q-space></q-space>
-        <q-btn dense label="Move to here" :color="$light.color" v-if="mode == 'empty folder'">
+        <q-btn dense label="Move to here" color="primary" v-if="mode == 'empty folder'">
         </q-btn>
-        <q-btn dense label="Move" outline :color="$light.color" v-if="mode == 'move'" @click="onClickMove"></q-btn>
+        <q-btn dense label="Move" outline color="primary" v-if="mode == 'move'" @click="onClickMove"></q-btn>
       </q-card-actions>
     </q-card>
   </q-menu>

package/dist/runtime/components/l-file-manager.vue

@@ -256,7 +256,6 @@ const onDeleteSelected = () => {
 };
 const onNewFolder = () => {
   $q.dialog({
-    color: $light.color,
     title: "New Folder",
     prompt: {
       model: "",
@@ -505,7 +504,7 @@ selectedNodePath.value = drives[0].index.toString();
 
         <div>
           <q-input outlined :placeholder="$t('Search for file name')" dense @keyup.enter.native="submitSearch"
-            v-model="search" :color="$light.color">
+            v-model="search">
             <template v-slot:append>
               <q-btn flat dense round icon="sym_o_search"></q-btn>
             </template>
@@ -522,7 +521,7 @@ selectedNodePath.value = drives[0].index.toString();
         <q-list padding class="text-grey-8">
           <q-item>
             <q-item-section>
-              <l-btn icon="add" label="New" :disable="!selectedNodePath" :color="$light.color">
+              <l-btn icon="add" label="New" :disable="!selectedNodePath">
                 <q-menu>
                   <q-list>
                     <q-item clickable v-close-popup @click="onNewFolder" v-if="permission.includes('fs.folder.create')">
@@ -585,7 +584,7 @@ selectedNodePath.value = drives[0].index.toString();
       </q-dialog>
 
       <q-toolbar>
-        <q-breadcrumbs :active-color="$light.color">
+        <q-breadcrumbs>
           <q-breadcrumbs-el v-for="(b, index) in breadcrumbs" :label="b.label" :key="index"
             @click="selectedNodePath = b.path" href="javascript:void(0)"></q-breadcrumbs-el>
         </q-breadcrumbs>
@@ -613,7 +612,7 @@ selectedNodePath.value = drives[0].index.toString();
 
       <template v-if="grid">
         <q-table :title="$t('Folders')" flat grid :columns="columns" :rows="folders" hide-pagination
-          :pagination="{ rowsPerPage: 0 }" color="$light.color">
+          :pagination="{ rowsPerPage: 0 }">
           <template v-slot:item="props">
             <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4" @click="onDblclickRow(null, props.row, null)">
               <q-card flat bordered>
@@ -625,7 +624,7 @@ selectedNodePath.value = drives[0].index.toString();
                     {{ props.row.name }}
                   </q-item-section>
                   <q-item-section avatar>
-                    <q-checkbox v-model="selected" :val="props.row" :color="$light.color" />
+                    <q-checkbox v-model="selected" :val="props.row" />
                   </q-item-section>
                 </q-item>
               </q-card>
@@ -634,7 +633,7 @@ selectedNodePath.value = drives[0].index.toString();
         </q-table>
 
         <q-table :title="$t('Files')" flat grid :columns="columns" :rows="files" hide-pagination
-          :pagination="{ rowsPerPage: 0 }" :color="$light.color">
+          :pagination="{ rowsPerPage: 0 }">
 
           <template v-slot:item="props">
             <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4" @click="onClickRow(null, props.row, null)">
@@ -649,7 +648,7 @@ selectedNodePath.value = drives[0].index.toString();
                     </q-item-label>
                   </q-item-section>
                   <q-item-section side>
-                    <q-checkbox v-model="selected" :val="props.row" :color="$light.color" />
+                    <q-checkbox v-model="selected" :val="props.row" />
                   </q-item-section>
                 </q-item>
 
@@ -665,9 +664,7 @@ selectedNodePath.value = drives[0].index.toString();
         <q-table flat :columns="columns" :rows="items" @row-dblclick="onDblclickRow" @row-click="onClickRow"
           :pagination="pagination" row-key="path" selection="multiple" v-model:selected="selected" dense
           :loading="loading" :loading-label="$t('Loading...')" :no-data-label="$t('No data available')"
-          :color="$light.color"
-          separator="horizontal" :rows-per-page-options="[0]"
-          >
+          separator="horizontal" :rows-per-page-options="[0]">
           <template #body-cell-icon="props">
             <q-td auto-width>
               <q-icon name="sym_o_folder" v-if="props.value == 'folder'" size="sm" />

package/dist/runtime/components/l-form-dialog.vue

@@ -87,7 +87,7 @@ const onCancel = async () => {
                 </q-card-section>
                 <q-card-actions align="right">
                     <q-btn icon="sym_o_close" :label="$t('Cancel')" @click="onCancel" unelevated />
-                    <q-btn icon="sym_o_check" :label="$t('Save')" type="submit" :color="$light.color" unelevated
+                    <q-btn icon="sym_o_check" :label="$t('Save')" type="submit" color="primary" unelevated
                         :disabled="!context.state.valid" />
                 </q-card-actions>
             </form-kit>

package/dist/runtime/components/l-group-select.vue

@@ -56,11 +56,12 @@ const filterFn = (val, update, abort) => {
 </script>
 
 <template>
-    <q-select v-model="model"  v-bind="$light.getInputProps($props)" :options="items" @update:model-value="handleItemUniqueByGroup" 
-        input-debounce="0"  @filter="filterFn" :color="$light.color" :style="$light.styles.input"
+    <q-select v-model="model" v-bind="$light.getInputProps($props)" :options="items"
+        @update:model-value="handleItemUniqueByGroup" input-debounce="0" @filter="filterFn" :style="$light.styles.input"
         :emit-value="emitValue" :map-options="mapOptions">
         <template v-slot:option="scope">
-            <q-item v-if="scope.opt.is_group" v-bind="{ ...scope.itemProps }" class="text-xs bg-grey-4" :key="scope.opt.label">
+            <q-item v-if="scope.opt.is_group" v-bind="{ ...scope.itemProps }" class="text-xs bg-grey-4"
+                :key="scope.opt.label">
                 <q-item-section class="!cursor-default">
                     {{ scope.opt.label || "Ungroup" }}
                 </q-item-section>

package/dist/runtime/components/l-icon-picker.vue

@@ -3266,7 +3266,7 @@ const displayIcons = computed(() => {
         <q-menu :offset="[0, 8]">
 
             <q-item-label header>
-                <q-input v-model="search" label="Search" outlined dense :color="$light.color">
+                <q-input v-model="search" label="Search" outlined dense>
                     <template v-slot:prepend>
                         <q-icon name="sym_o_search" dense />
                     </template>
@@ -3289,7 +3289,7 @@ const displayIcons = computed(() => {
                     <template v-slot:loading>
                         <div class="text-center q-my-md">
 
-                            <q-spinner-dots :color="$light.color" size="40px" />
+                            <q-spinner-dots size="40px" />
                         </div>
                     </template>
                 </q-infinite-scroll>

package/dist/runtime/components/l-link.vue

@@ -13,13 +13,10 @@ const props = defineProps({
     default: "primary"
   }
 });
-const classData = computed(() => {
-  return "text-" + $light.color;
-});
 </script>
 
 <template>
-    <router-link :to="props.to" style="text-decoration: underline;" :class="classData">
+    <router-link :to="props.to" style="text-decoration: underline;" class="text-primary">
         <slot />
     </router-link>
 </template>

package/dist/runtime/components/l-page.d.vue.ts

@@ -7,12 +7,13 @@ export type LPageProps = QPageProps & {
     addBtn?: boolean;
     gutter?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
     padding?: boolean;
+    breadcrumbs?: boolean;
 };
-declare var __VLS_34: {}, __VLS_36: {};
+declare var __VLS_50: {}, __VLS_52: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_34) => any;
+    header?: (props: typeof __VLS_50) => any;
 } & {
-    default?: (props: typeof __VLS_36) => any;
+    default?: (props: typeof __VLS_52) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LPageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LPageProps> & Readonly<{}>, {
     padding: boolean;

package/dist/runtime/components/l-page.vue

@@ -15,7 +15,8 @@ const props = defineProps({
   editBtn: { type: Boolean, required: false },
   deleteBtn: { type: Boolean, required: false },
   addBtn: { type: Boolean, required: false },
-  gutter: { type: String, required: false, default: "sm" }
+  gutter: { type: String, required: false, default: "sm" },
+  breadcrumbs: { type: Boolean, required: false }
 });
 const showToolbar = computed(() => {
   if (props.backBtn || props.editBtn || props.deleteBtn || props.addBtn) {
@@ -43,16 +44,40 @@ useHead({
 const localClass = computed(() => {
   return "q-gutter-" + props.gutter;
 });
+const lastPart = computed(() => {
+  const parts = route.path.split("/").filter((part2) => isNaN(Number(part2)));
+  if (parts.length < 2) {
+    return false;
+  }
+  let part = parts[parts.length - 1];
+  if (!part) {
+    return false;
+  }
+  part = part.replace(/_/g, " ").replace(/([a-z])(?=[A-Z])/g, "$1 ").replace(/([A-Z]*)(?=[A-Z][a-z])/g, "$1 ");
+  part = part.replace(/\b\w/g, (char) => char.toUpperCase());
+  part = part.replace(/\s\s+/g, " ").trim();
+  return part;
+});
 </script>
 
 <template>
     <q-page :padding="padding" class="q-pt-sm">
+
+
+
         <q-toolbar v-if="showToolbar">
             <l-back-btn v-if="backBtn" dense />
             <l-add-btn v-if="addBtn" dense />
             <l-edit-btn v-if="editBtn" dense />
             <l-delete-btn v-if="deleteBtn" @submit="onDelete" dense />
             <q-toolbar-title>{{ $t(title) }}</q-toolbar-title>
+
+            <q-breadcrumbs v-if="breadcrumbs">
+                <q-breadcrumbs-el :label="$t('Home')" to="/" icon="home" />
+                <q-breadcrumbs-el :label="$t(title)" :to="'/' + route.path.split('/')[1]"
+                    v-if="route.path.split('/')[1]" />
+                <q-breadcrumbs-el v-if="lastPart" :label="lastPart" :to="route.fullPath" />
+            </q-breadcrumbs>
         </q-toolbar>
 
         <div :class="localClass">

package/dist/runtime/components/l-page.vue.d.ts

@@ -7,12 +7,13 @@ export type LPageProps = QPageProps & {
     addBtn?: boolean;
     gutter?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
     padding?: boolean;
+    breadcrumbs?: boolean;
 };
-declare var __VLS_34: {}, __VLS_36: {};
+declare var __VLS_50: {}, __VLS_52: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_34) => any;
+    header?: (props: typeof __VLS_50) => any;
 } & {
-    default?: (props: typeof __VLS_36) => any;
+    default?: (props: typeof __VLS_52) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LPageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LPageProps> & Readonly<{}>, {
     padding: boolean;

package/dist/runtime/components/l-save-btn.vue

@@ -1,3 +1,3 @@
 <template>
-    <l-btn :color="$light.color" icon="sym_o_save" label="Save" />
+    <l-btn icon="sym_o_save" label="Save" />
 </template>