@hostlink/nuxt-light 1.27.7 → 1.28.0

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

@@ -1,149 +1,103 @@
-<script setup lang="ts">
-import { ref, computed } from "vue";
-import { useLight } from '#imports';
-
-import { date, type QDateProps, type QInputProps } from "quasar";
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-const modelValue = defineModel<string | DateRange | null | undefined>();
-
-interface DateRange {
-    from: string,
-    to: string
-}
-
-
-export interface LDatePickerProps {
-    label?: string
-    required?: boolean
-    hideBottomSpace?: boolean
-    filled?: boolean
-    outlined?: boolean
-    standout?: boolean
-    rounded?: boolean
-    dense?: boolean
-    square?: boolean
-    stackLabel?: boolean
-    rules?: any[],
-    range?: boolean,
-    mask?: string,
-    disable?: boolean
-    color?: string
-}
-
-const props = withDefaults(defineProps<LDatePickerProps>(), {
-    hideBottomSpace: true,
-    filled: undefined,
-    outlined: undefined,
-    standout: undefined,
-    rounded: undefined,
-    dense: undefined,
-    square: undefined,
-    stackLabel: undefined,
-    mask: "YYYY-MM-DD",
-    range: false,
-    disable: false
-})
-
-
-const light = useLight();
-
-const popup = ref<any>(null);
-const localValue = computed({
-    get: () => {
-        if (modelValue.value) {
-            if (typeof modelValue.value == "object") {
-                return modelValue.value.from + " - " + modelValue.value.to
-            }
-        }
-
-        return modelValue.value
-    },
-    set: (value: string | Object) => {
-
-
-        if (props.range) {
-
-            if (typeof value == "object") {
-                modelValue.value = value;
-                return;
-            }
-
-            //try to split
-            const parts = value.split(" - ");
-            if (parts.length == 2) {
-                const from = parts[0];
-                const to = parts[1];
-                if (from.match(/^\d{4}-\d{2}-\d{2}$/) && to.match(/^\d{4}-\d{2}-\d{2}$/)) {
-                    modelValue.value = { from, to }
-                    return;
-                }
-            }
-        }
-
-        if (value.match(/^\d{4}-\d{2}-\d{2}$/)) {
-            modelValue.value = value;
-            return;
-        }
-
-
-        modelValue.value = null;
-    }
-});
-
-const dateValue = computed({
-    get: () => {
-        return modelValue
-    },
-    set: (value: string) => {
-        if (popup.value) {
-            popup.value.hide();
-        }
-        localValue.value = value;
-        modelValue.value = value;
-    }
-});
-
-const rules: any = [];
-
-if (props.required) {
-    rules.push((val: any) => {
-        if (!val) {
-            return "Required";
-        }
-    })
-}
-
-if (!props.range) {
-    rules.push((val: any) => {
-        //check val is YYYY-MM-DD
-        if (val) {
-            if (!val.match(/^\d{4}-\d{2}-\d{2}$/)) {
-                return "Invalid date format";
-            }
-        }
-    });
-}
-
-const input_attrs = computed(() => {
-
-    const a = light.getInputProps(props);
-    a.rules = rules;
-    a.mask = props.range ? "####-##-## - ####-##-##" : "####-##-##"
-
-    return a;
-})
-
-const date_attrs = computed(() => {
-    const { label, rules, hideBottomSpace, filled, outlined, standout, rounded, dense, square, stackLabel, ...rest } = props;
-    return rest;
-});
-
-
-</script>
-<template>
+<script setup>
+import { ref, computed } from "vue";
+import { useLight } from "#imports";
+import { date } from "quasar";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+const modelValue = defineModel({ type: [String, Object, null, Unknown] });
+const props = defineProps({
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  hideBottomSpace: { type: Boolean, required: false, default: true },
+  filled: { type: Boolean, required: false, default: void 0 },
+  outlined: { type: Boolean, required: false, default: void 0 },
+  standout: { type: Boolean, required: false, default: void 0 },
+  rounded: { type: Boolean, required: false, default: void 0 },
+  dense: { type: Boolean, required: false, default: void 0 },
+  square: { type: Boolean, required: false, default: void 0 },
+  stackLabel: { type: Boolean, required: false, default: void 0 },
+  rules: { type: Array, required: false },
+  range: { type: Boolean, required: false, default: false },
+  mask: { type: String, required: false, default: "YYYY-MM-DD" },
+  disable: { type: Boolean, required: false, default: false },
+  color: { type: String, required: false }
+});
+const light = useLight();
+const popup = ref(null);
+const localValue = computed({
+  get: () => {
+    if (modelValue.value) {
+      if (typeof modelValue.value == "object") {
+        return modelValue.value.from + " - " + modelValue.value.to;
+      }
+    }
+    return modelValue.value;
+  },
+  set: (value) => {
+    if (props.range) {
+      if (typeof value == "object") {
+        modelValue.value = value;
+        return;
+      }
+      const parts = value.split(" - ");
+      if (parts.length == 2) {
+        const from = parts[0];
+        const to = parts[1];
+        if (from.match(/^\d{4}-\d{2}-\d{2}$/) && to.match(/^\d{4}-\d{2}-\d{2}$/)) {
+          modelValue.value = { from, to };
+          return;
+        }
+      }
+    }
+    if (value.match(/^\d{4}-\d{2}-\d{2}$/)) {
+      modelValue.value = value;
+      return;
+    }
+    modelValue.value = null;
+  }
+});
+const dateValue = computed({
+  get: () => {
+    return modelValue;
+  },
+  set: (value) => {
+    if (popup.value) {
+      popup.value.hide();
+    }
+    localValue.value = value;
+    modelValue.value = value;
+  }
+});
+const rules = [];
+if (props.required) {
+  rules.push((val) => {
+    if (!val) {
+      return "Required";
+    }
+  });
+}
+if (!props.range) {
+  rules.push((val) => {
+    if (val) {
+      if (!val.match(/^\d{4}-\d{2}-\d{2}$/)) {
+        return "Invalid date format";
+      }
+    }
+  });
+}
+const input_attrs = computed(() => {
+  const a = light.getInputProps(props);
+  a.rules = rules;
+  a.mask = props.range ? "####-##-## - ####-##-##" : "####-##-##";
+  return a;
+});
+const date_attrs = computed(() => {
+  const { label, rules: rules2, hideBottomSpace, filled, outlined, standout, rounded, dense, square, stackLabel, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
     <q-input v-bind="input_attrs" v-model="localValue">
         <template v-slot:prepend>
             <q-btn icon="sym_o_event" round dense flat>
@@ -161,4 +115,4 @@ const date_attrs = computed(() => {
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </q-input>
-</template>
+</template>

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

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

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

@@ -1,28 +1,23 @@
-<script setup>
-
-import { useQuasar } from 'quasar';
-import { useI18n } from 'vue-i18n';
-
-
-const { t } = useI18n();
-
-const props = defineProps(["to"]);
-
-const emit = defineEmits(["submit"]);
-
-const qua = useQuasar();
-const onDelete = () => {
-    qua.dialog({
-        title: t("Delete"),
-        message: t("Are you sure you want to delete this record?"),
-        cancel: true,
-        persistent: true,
-        color: "negative",
-    }).onOk(async () => {
-        emit("submit");
-    })
-}
-</script>
-<template>
+<script setup>
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+const props = defineProps(["to"]);
+const emit = defineEmits(["submit"]);
+const qua = useQuasar();
+const onDelete = () => {
+  qua.dialog({
+    title: t("Delete"),
+    message: t("Are you sure you want to delete this record?"),
+    cancel: true,
+    persistent: true,
+    color: "negative"
+  }).onOk(async () => {
+    emit("submit");
+  });
+};
+</script>
+
+<template>
     <q-btn flat round icon="sym_o_delete" @click="onDelete" />
-</template>
+</template>

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

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/runtime/components/l-dialog-database-field-add.vue

@@ -1,38 +1,21 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar'
-
-const props = defineProps({
-    // ...your custom props
-})
-
-defineEmits([
-    // REQUIRED; need to specify some events that your
-    // component will emit through useDialogPluginComponent()
-    ...useDialogPluginComponent.emits
-])
-
-const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
-// dialogRef      - Vue ref to be applied to QDialog
-// onDialogHide   - Function to be used as handler for @hide on QDialog
-// onDialogOK     - Function to call to settle dialog with "ok" outcome
-//                    example: onDialogOK() - no payload
-//                    example: onDialogOK({ /*...*/ }) - with payload
-// onDialogCancel - Function to call to settle dialog with "cancel" outcome
-
-// this is part of our example (so not required)
-function onOKClick(value) {
-    // on OK, it is REQUIRED to
-    // call onDialogOK (with optional payload)
-    onDialogOK(value)
-    // or with payload: onDialogOK({ ... })
-    // ...and it will also hide the dialog automatically
-}
-
-const types = ["varchar", "int", "date", "time", "datetime", "timestamp", "text", "blob", "json", "jsonb", "uuid", "boolean", "decimal", "float", "double", "real", "numeric", "smallint", "bigint", "tinyint", "mediumint", "char", "binary", "varbinary", "enum"]
-</script>
-
-
-<template>
+<script setup>
+import { useDialogPluginComponent } from "quasar";
+const props = defineProps({
+  // ...your custom props
+});
+defineEmits([
+  // REQUIRED; need to specify some events that your
+  // component will emit through useDialogPluginComponent()
+  ...useDialogPluginComponent.emits
+]);
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+function onOKClick(value) {
+  onDialogOK(value);
+}
+const types = ["varchar", "int", "date", "time", "datetime", "timestamp", "text", "blob", "json", "jsonb", "uuid", "boolean", "decimal", "float", "double", "real", "numeric", "smallint", "bigint", "tinyint", "mediumint", "char", "binary", "varbinary", "enum"];
+</script>
+
+<template>
     <q-dialog ref="dialogRef">
         <q-card class="q-dialog-plugin">
             <q-toolbar>
@@ -59,4 +42,4 @@ const types = ["varchar", "int", "date", "time", "datetime", "timestamp", "text"
 
         </q-card>
     </q-dialog>
-</template>
+</template>

package/dist/runtime/components/l-dialog-database-field-add.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

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

@@ -1,67 +1,49 @@
-<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({
-    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>
+<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({
+  name: String
+});
+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 == void 0) {
+  model.value = group_model;
+  console.log(model.value);
+}
+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 ref="parent" style="min-height: 150px;">
         <template v-for="item in items" :key="item">
             <component :is="item" />
         </template>
     </div>
-</template>
+</template>

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

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

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

@@ -1,71 +1,50 @@
-<script setup>
-import { useSlots } 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)
-
-        //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;
-}
-
-
-//get all containers children and join them
-function getItems(containers) {
-    const items = [];
-    for (const container of containers) {
-        items.push(...container.children.default());
-    }
-    return items;
-}
-
-
-
-</script>
-<template>
+<script setup>
+import { useSlots } from "vue";
+const model = defineModel();
+console.log(model);
+const slots = useSlots().default();
+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;
+  }
+});
+function getContainers(nodes) {
+  const containers = [];
+  for (const node of nodes) {
+    if (node.type === DragDropContainer) {
+      containers.push(node);
+      continue;
+    }
+    if (node.children) {
+      if (node.children.default) {
+        containers.push(...getContainers(node.children.default()));
+      }
+    }
+  }
+  return containers;
+}
+function getItems(containers) {
+  const items = [];
+  for (const container of containers) {
+    items.push(...container.children.default());
+  }
+  return items;
+}
+</script>
+
+<template>
     <slot></slot>
-</template>
+</template>

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

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;