@hostlink/nuxt-light 1.8.11 → 1.8.12

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.8.11"
+  "version": "1.8.12"
 }

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

@@ -1,15 +1,67 @@
 <script setup>
+import { animations } from "@formkit/drag-and-drop";
+import { getCurrentInstance, watch } from 'vue'
+import { useDragAndDrop } from '@formkit/drag-and-drop/vue'
 const model = defineModel();
-    
-const props=defineProps({
-    slots: Array
+
+const props = defineProps({
+    name: String
+})
+
+
+//find the parent component l-drop-drop-group
+
+const doFind = (instance) => {
+    if (instance.type.__name === "l-drag-drop-group") {
+        return instance;
+    }
+    if (instance.parent) {
+        return doFind(instance.parent);
+    }
+    return null;
+}
+
+const group = doFind(getCurrentInstance());
+
+const allItems = group.exposed.findAllItems();
+const group_name = group.exposed.getGroupName();
+const group_model = group.exposed.getModelByName(props.name);
+
+
+console.log(props.name)
+if (model.value == undefined) {
+    model.value = group_model;
+    console.log(model.value)
+}
+
+
+//filter items by model
+const filteredItem = allItems.filter((item) => {
+    return model.value.includes(item.props.name);
 })
 
 
+const [parent, items] = useDragAndDrop(filteredItem, {
+    plugins: [animations()],
+    group: group_name,
+    dragHandle: group.props.dragHandle
+});
+
+watch(items, () => {
+    model.value = items.value.map((item) => {
+        return item.props.name ?? Symbol();
+    })
+
+    group.exposed.updateModel(props.name, model.value);
+
+})
+
 
 </script>
 <template>
-    <div>
-        <component :is="slot" v-for="slot in slots" />
+    <div ref="parent" style="min-height: 150px;">
+        <template v-for="item in items" :key="item">
+            <component :is="item" />
+        </template>
     </div>
 </template>

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

@@ -1,17 +1,37 @@
 <script setup>
-import { useSlots } from 'vue'
+import { useSlots, defineExpose } from 'vue'
+
+const model = defineModel();
+console.log(model);
+
 const slots = useSlots().default();
 
 //fine component by name
-
 const DragDropContainer = resolveComponent("l-drag-drop-container")
-
+const group_name = Symbol();
+defineExpose({
+    updateModel: (name, value) => {
+        model.value[name] = value;
+    },
+    getModelByName: (name) => {
+        return model.value[name]
+    },
+    getGroupName: () => {
+        return group_name;
+    },
+
+    findAllItems: () => {
+        const containers = getContainers(slots);
+        const items = getItems(containers);
+        return items;
+    }
+});
 
 //find all l-drag-drop-container (include children)
 function getContainers(nodes) {
     const containers = [];
     for (const node of nodes) {
-        console.log(node)
+        //console.log(node)
 
         //check node is l-drag-drop-container
 
@@ -24,6 +44,7 @@ function getContainers(nodes) {
         if (node.children) {
             if (node.children.default) {
                 containers.push(...getContainers(node.children.default()));
+
             }
 
         }
@@ -32,8 +53,6 @@ function getContainers(nodes) {
     return containers;
 }
 
-const containers = getContainers(slots);
-
 
 //get all containers children and join them
 function getItems(containers) {
@@ -44,12 +63,9 @@ function getItems(containers) {
     return items;
 }
 
-const items = getItems(containers);
 
 
 </script>
 <template>
-    <div>
-        <slot></slot>
-    </div>
+    <slot></slot>
 </template>

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

@@ -7,7 +7,7 @@ const slots = useSlots();
 const model = defineModel()
 
 const props = defineProps<{
-    group?: string
+    group?: string|symbol,
     dragHandle?: string
 }>()
 
@@ -37,7 +37,7 @@ watch(items, () => {
 
 </script>
 <template>
-
+    
 
 
     <div ref="parent">

package/dist/runtime/formkit/Repeater.vue

@@ -9,12 +9,10 @@ const props = defineProps({
 });
 
 const node = props.context.node;
-console.log(node);
 const min = props.context.node.props.min ?? 1;
 const max = props.context.node.props.max ?? Infinity;
 const sortable = (props.context.node.props.sortable !== undefined) ? props.context.node.props.sortable : true;
 
-console.log(sortable);
 const [parent, localValue] = useDragAndDrop(props.context.value, {
     dragHandle: ".l-repeater-handle",
     plugins: [animations()]

package/dist/runtime/pages/User/_user_id/view.vue

@@ -1,23 +1,23 @@
 <script setup>
-import { useLight, getID, model } from "#imports";
+import { useLight, getObject } from "#imports";
 import { useRoute } from "vue-router"
 import { ref } from 'vue';
 
 
+const obj = await getObject(["canUpdate"]);
+
 const route = useRoute();
 const light = useLight();
 
 const tab = ref('overview');
 const id = route.params.user_id;
-/* const a = await model("User").get({ user_id: getID() }, {
-    name: true
-}); */
+
 
 </script>
 
 <template>
-    <l-page edit-btn>
-        
+    <l-page :edit-btn="obj.canUpdate">
+
         <template #header>
             <l-btn to="change-password" icon="sym_o_key" permission="user.changePassword"
                 label="Change password"></l-btn>
@@ -27,8 +27,10 @@ const id = route.params.user_id;
         <q-card flat bordered>
             <q-tabs v-model="tab" :active-color="$light.color" inline-label align="justify">
                 <q-tab name="overview" icon="sym_o_person" label="Overview" />
-                <q-tab name="userlog" icon="sym_o_description" label="User log" />
-                <q-tab name="eventlog" icon="sym_o_description" label="Event log" />
+                <q-tab name="userlog" icon="sym_o_description" label="User log"
+                    v-if="$light.isGranted('userlog.list')" />
+                <q-tab name="eventlog" icon="sym_o_description" label="Event log"
+                    v-if="$light.isGranted('eventlog.list')" />
             </q-tabs>
 
             <l-user-overview v-if="tab === 'overview'" :id="id" />

package/dist/runtime/pages/User/setting/style.vue

@@ -67,6 +67,12 @@ const setDefault = async () => {
 
 
 }
+
+const columns = [
+    { name: 'action' },
+    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true },
+    { name: 'phone', label: 'Phone', align: 'left', field: 'phone', sortable: true },
+]
 </script>
 <template>
     <div class="q-pa-md">
@@ -140,15 +146,31 @@ const setDefault = async () => {
                                 <q-input label="Input" :filled="styles.inputFilled" :outlined="styles.inputOutlined"
                                     :standout="styles.inputStandout" :rounded="styles.inputRounded"
                                     :dense="styles.inputDense" :square="styles.inputSquare"
-                                    :stack-label="styles.inputStackLabel">
-                                    ></q-input>
+                                    :stack-label="styles.inputStackLabel" />
 
-                                <q-table :rows="[
+                                <q-select label="Select" :filled="styles.inputFilled" :outlined="styles.inputOutlined"
+                                    :standout="styles.inputStandout" :rounded="styles.inputRounded"
+                                    :dense="styles.inputDense" :square="styles.inputSquare"
+                                    :stack-label="styles.inputStackLabel" :options="[
+                                        { label: 'A', value: 'a' },
+                                        { label: 'B', value: 'b' },
+                                        { label: 'C', value: 'c' }
+                                    ]" 
+                                    />
+
+                                <q-table :columns="columns" :rows="[
                                     { name: 'A', phone: '123' },
                                     { name: 'B', phone: '456' },
                                     { name: 'C', phone: '789' },
                                 ]" :flat="styles.tableFlat" :bordered="styles.tableBorder" :dense="styles.tableDense"
-                                    :separator="styles.tableSeparator"></q-table>
+                                    :separator="styles.tableSeparator">
+
+                                    <template #body-cell-action="props">
+                                        <q-td auto-width>
+                                            <q-btn flat dense round icon="sym_o_search"></q-btn>
+                                        </q-td>
+                                    </template>
+                                </q-table>
 
                             </div>
 

package/package.json

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