@hostlink/nuxt-light 1.8.5 → 1.8.7

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.8.5"
+  "version": "1.8.7"
 }

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

@@ -135,7 +135,6 @@ const getDiffHtml = (diffs) => {
 <template>
     <div>
 
-        <div v-html="html"></div>
         <q-dialog v-model="showDialog" full-height full-width>
             <q-card>
                 <q-toolbar>

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-drag-drop-container.vue

@@ -0,0 +1,7 @@
+<script setup>
+</script>
+<template>
+    <div>
+        <slot></slot>
+    </div>
+</template>

package/dist/runtime/components/l-drag-drop-group.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { useSlots } from 'vue'
+const slots = useSlots().default();
+
+//fine component by name
+
+const DragDropContainer = resolveComponent("l-drag-drop-container")
+
+
+//find all l-drag-drop-container (include children)
+function getContainers(nodes) {
+    const containers = [];
+    for (const node of nodes) {
+        console.log(node)
+
+        //check node is l-drag-drop-container
+
+        if (node.type === DragDropContainer) {
+            containers.push(node);
+            continue;
+        }
+
+
+        if (node.children) {
+            if (node.children.default) {
+                containers.push(...getContainers(node.children.default()));
+            }
+
+        }
+    }
+
+    return containers;
+}
+
+const containers = getContainers(slots);
+
+
+//get all containers children and join them
+function getItems(containers) {
+    const items = [];
+    for (const container of containers) {
+        items.push(...container.children.default());
+    }
+    return items;
+}
+
+const items = getItems(containers);
+
+
+
+</script>
+<template>
+    <div>
+        <slot></slot>
+    </div>
+</template>

package/dist/runtime/components/l-drag-drop.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { animations } from "@formkit/drag-and-drop";
+import { useSlots, watch } from 'vue'
+import { useDragAndDrop } from '@formkit/drag-and-drop/vue'
+const slots = useSlots();
+
+const model = defineModel()
+
+const props = defineProps<{
+    group?: string
+    dragHandle?: string
+}>()
+
+const [parent, items] = useDragAndDrop(slots.default(), {
+    plugins: [animations()],
+    group: props.group,
+    dragHandle: props.dragHandle
+});
+
+if (model.value === null) { //default
+    model.value = items.value.map((item) => {
+        return item.props.name;
+    })
+} else {
+    items.value = model.value.map((name) => {
+        return items.value.find((item) => item.props.name === name);
+    })
+
+}
+
+watch(items, () => {
+    model.value = items.value.map((item) => {
+        return item.props.name ?? Symbol();
+    })
+
+})
+
+</script>
+<template>
+
+
+
+    <div ref="parent">
+        <template v-for="item in items" :key="item">
+            <component :is="item" />
+        </template>
+
+    </div>
+
+</template>

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

@@ -12,9 +12,13 @@ defineProps<LTabsProps>()
 const slots = useSlots();
 const defaultSlots = slots.default ? slots.default() : []
 
+
+const LTab = resolveComponent("l-tab")
 //get the tabs from the default slot
 let name = 0;
-const tabContents = defaultSlots.map((slot) => {
+const tabContents = defaultSlots.filter((slot) => {
+    return slot.type === LTab
+}).map((slot) => {
     const n = slot.props?.name || name++;
     return {
         label: slot.props?.label,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.8.5",
+  "version": "1.8.7",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "route-gen": "node route-generate.mjs"
   },
   "dependencies": {
-    "@formkit/drag-and-drop": "^0.0.24",
+    "@formkit/drag-and-drop": "^0.0.36",
     "@hostlink/light": "^1.2.1",
     "@nuxt/kit": "^3.7.4",
     "@nuxt/module-builder": "^0.5.2",