@hostlink/nuxt-light 1.8.4 → 1.8.6

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.8.4"
+  "version": "1.8.6"
 }

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

@@ -11,7 +11,8 @@ const props = defineProps({
 
 
 const usagePercent = computed(() => {
-    return Math.round((props.storage.totalSpace - props.storage.freeSpace) / props.storage.totalSpace)
+    //return 0.0 to 1.0
+    return (props.storage.totalSpace - props.storage.freeSpace) / props.storage.totalSpace;
 })
 
 const progressColor = computed(() => {

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

@@ -5,6 +5,14 @@ const props = defineProps({
         type: [Number, String],
         default: 12
     },
+    sm: {
+        type: [Number, String],
+        default: 12
+    },
+    xs: {
+        type: [Number, String],
+        default: 12
+    },
     gutter: {
         type: String,
         default: "md"
@@ -13,13 +21,16 @@ const props = defineProps({
 
 const classes = computed(() => {
     return {
-        [`col-md-${props.md}`]: true
+        "col-12": true, // default class "col-12
+        [`col-md-${props.md}`]: true,
+        [`col-sm-${props.sm}`]: true,
+        [`col-xs-${props.xs}`]: true
     }
 })
 
 </script>
 <template>
-    <div class="col-12" :class="classes">
+    <div :class="classes">
         <div :class="`q-gutter-${props.gutter}`">
             <slot></slot>
         </div>

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

@@ -1,54 +1,44 @@
 <script setup lang="ts">
-import { useLight } from '#imports'
-import { useSlots, computed, ref } from 'vue';
+import { useSlots } from 'vue';
 import type { QTabsProps } from 'quasar';
 
+const model = defineModel<string | number | null | undefined>()
 interface LTabsProps extends QTabsProps {
 
 }
 
-const light = useLight();
-const props = defineProps<LTabsProps>()
-const emit = defineEmits(["update:modelValue"])
+defineProps<LTabsProps>()
+
 const slots = useSlots();
-const defaultSlots = slots.default();
+const defaultSlots = slots.default ? slots.default() : []
 
 //get the tabs from the default slot
 let name = 0;
 const tabContents = defaultSlots.map((slot) => {
-    const n = slot.props.name || name++;
+    const n = slot.props?.name || name++;
     return {
-        label: slot.props.label,
+        label: slot.props?.label,
         content: slot.children,
         name: n.toString()
     }
 })
 
-const v = ref(null)
-
-if (tabContents.length > 0) {
-    v.value = tabContents[0].name
-}
-const localValue = computed({
-    get: () => props.modelValue || v.value,
-    set: (val) => {
-        v.value = val
-        emit("update:modelValue", val)
+if (model.value === null || model.value === undefined) {
+    if (tabContents.length > 0) {
+        model.value = tabContents[0].name
     }
-})
-
-
+}
 
 </script>
 
 <template>
     <l-card>
         <q-tabs class="text-grey" :active-color="$light.color" :indicator-color="$light.color" align="justify"
-            v-model="localValue">
+            v-model="model">
             <q-tab v-for="tab in tabContents" :label="$t(tab.label)" :name="tab.name"></q-tab>
         </q-tabs>
-        <q-tab-panels v-model="localValue">
-            <slot></slot>
+        <q-tab-panels v-model="model">
+            <component v-for="tab in tabContents" :key="tab.name" :is="tab.content?.default" :name="tab.name" />
         </q-tab-panels>
     </l-card>
 </template>

package/dist/runtime/pages/User/profile.vue

@@ -62,8 +62,8 @@ eventLogCols.forEach(col => {
                     </q-card-section>
 
                     <q-card-section class="text-center text-center q-pt-none">
-                        <q-chip v-for="role in my.roles" :key="role" :label="role" :color="$light.color" text-color="white"
-                            class="q-ma-xs" />
+                        <q-chip v-for="role in my.roles" :key="role" :label="role" :color="$light.color"
+                            text-color="white" class="q-ma-xs" />
                     </q-card-section>
 
 
@@ -85,11 +85,13 @@ eventLogCols.forEach(col => {
 
                 <l-tabs>
                     <l-tab label="User Log">
-                        <l-table :rows="my.userLog.data" :columns="userlogColumns" searchable :rows-per-page-options="[0]">
+                        <l-table :rows="my.userLog.data" :columns="userlogColumns" searchable
+                            :rows-per-page-options="[0]">
                         </l-table>
                     </l-tab>
                     <l-tab label="Event Log">
-                        <l-table :rows="my.eventLog.data" :columns="eventLogCols" searchable :rows-per-page-options="[0]">
+                        <l-table :rows="my.eventLog.data" :columns="eventLogCols" searchable
+                            :rows-per-page-options="[0]">
                         </l-table>
                     </l-tab>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.8.4",
+  "version": "1.8.6",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",