@hostlink/nuxt-light 1.0.5 → 1.0.6

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.0.5"
+  "version": "1.0.6"
 }

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { type QBannerProps, type QBannerSlots } from 'quasar'
+import { computed, useSlots } from 'vue'
+
+export interface LBannerProps extends QBannerProps {
+    icon?: string
+    type?: 'primary' | 'secondary' | 'accent' | 'dark' | 'positive' | 'negative' | 'info' | 'warning'
+}
+
+const props = withDefaults(defineProps<LBannerProps>(), {
+    rounded: true,
+    type: 'primary'
+});
+
+const classes = computed(() => {
+    return [
+        `bg-${props.type}`,
+        'text-white'
+    ]
+});
+
+const localIcon = computed(() => {
+    if (props.icon) return props.icon
+    if (props.type === 'info') return 'sym_o_info'
+    if (props.type === 'warning') return 'sym_o_warning'
+    if (props.type === 'positive') return 'sym_o_check_circle_outline'
+    if (props.type === 'negative') return 'sym_o_error'
+});
+
+const slots = computed(() => useSlots());
+</script>
+
+<template>
+    <q-banner v-bind="props" :class="classes">
+        <template v-slot:avatar v-if="localIcon">
+            <q-icon :name="localIcon" />
+        </template>
+
+        <template v-for="(s, name) in slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
+        </template>
+    </q-banner>
+</template>

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

@@ -1,14 +1,14 @@
-<script setup>
-import { ref, useAttrs } from "vue";
-import { q, f, useLight } from '../';
+<script setup lang="ts">
+import { type QBtnProps } from "quasar";
+import { ref, computed } from "vue";
+import { q, f, useLight } from '#imports';
 
-const props = defineProps(["label", "permission"]);
-
-const label = ref(props.label);
-if (!label.value) {
-    label.value = "";
+export interface LBtnProps extends QBtnProps {
+    permission?: string;
 }
 
+const props = defineProps<LBtnProps>();
+
 const light = useLight();
 
 const granted = ref(false);
@@ -22,22 +22,22 @@ if (props.permission) {
     granted.value = true;
 }
 
-
-const attrs = {
-    ...{
-        rounded: light.getStyle("buttonRounded", true),
-        outline: light.getStyle("buttonOutline", true),
-        unelevated: light.getStyle("buttonUnelevated", false),
-        dense: light.getStyle("buttonDense", false),
-    },
-    ...useAttrs(),
-}
+const attrs = computed(() => {
+    return {
+        ...{
+            rounded: light.getStyle("buttonRounded"),
+            outline: light.getStyle("buttonOutline"),
+            unelevated: light.getStyle("buttonUnelevated"),
+            dense: light.getStyle("buttonDense"),
+        },
+        ...props,
+    }
+});
 
 
 </script>
 <template>
-    <q-btn v-bind="attrs" color="primary" v-if="granted" :label="$t(label)">
-
+    <q-btn v-bind="attrs" color="primary" v-if="granted">
         <slot></slot>
     </q-btn>
 </template>

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

@@ -1,21 +1,27 @@
-<script setup>
-import { useLight } from '../'
-import { useAttrs, ref, computed } from 'vue'
+<script setup lang="ts">
+import { useLight } from '#imports'
+import { ref, computed } from 'vue'
+import { type QCardProps } from 'quasar';
 
-defineProps({
-    loading: Boolean,
-    title: String
-})
+export interface LCardProps extends QCardProps {
+    loading?: boolean;
+    title?: string;
+}
 
 const light = useLight();
+const props = withDefaults(defineProps<LCardProps>(), {
+    flat: undefined,
+    bordered: undefined,
+    square: undefined,
+});
 
-const attrs = {
-    ...{
-        flat: light.getStyle("cardFlat", true),
-        bordered: light.getStyle("cardBordered", true),
-        square: light.getStyle("cardSquare", false),
-    }, ...useAttrs()
-}
+const attrs = computed(() => {
+    const a = { ...props };
+    if (props.flat === undefined) a.flat = light.getStyle("cardFlat");
+    if (props.bordered === undefined) a.bordered = light.getStyle("cardBordered");
+    if (props.square === undefined) a.square = light.getStyle("cardSquare");
+    return a;
+});
 
 const cl = computed(() => {
     const c = ["text-white"];

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

@@ -1,8 +1,13 @@
-<script setup>
-import { computed } from "vue";
+<script setup lang="ts">
+import { computed } from "vue"
+import { type QCheckboxProps } from "quasar"
+
+export interface LCheckboxProps extends QCheckboxProps {
+}
 
 const emit = defineEmits(["update:modelValue"]);
-const props = defineProps(["modelValue", "label"])
+
+const props = defineProps<LCheckboxProps>()
 
 const localValue = computed({
     get: () => props.modelValue,
@@ -13,5 +18,7 @@ const localValue = computed({
 });
 </script>
 <template>
-    <q-checkbox v-model="localValue" :label="$t(label)" />
+    <q-checkbox v-bind="$props" v-model="localValue" :label="$t($props.label ?? '')">
+        <slot></slot>
+    </q-checkbox>
 </template>

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

@@ -1,29 +1,17 @@
-<script setup>
+<script setup lang="ts">
 import { ref, computed, useAttrs } from "vue";
-import { useLight } from '../';
+import { useLight } from '#imports';
 
+import { type QDateProps } from "quasar";
 
-const light = useLight();
+export interface LDatePickerProps extends QDateProps {
+    label?: string
+    required?: boolean
+}
 
-const props = defineProps({
-    modelValue: {
-        type: [String, Object],
-        required: false,
-        default: null
-    },
-    range: {
-        type: Boolean,
-        default: false
-    },
-    label: {
-        type: String,
-        default: ""
-    },
-    required: {
-        type: Boolean,
-        default: false
-    },
-});
+const props = defineProps<LDatePickerProps>()
+
+const light = useLight();
 
 const emit = defineEmits(["update:modelValue"]);
 const popup = ref(null);
@@ -37,16 +25,19 @@ const localValue = computed({
         return props.modelValue
     },
     set: (value) => {
-        popup.value.hide();
+        if (popup.value) {
+            popup.value.hide();
+        }
+
         emit('update:modelValue', value)
     }
 
 });
 
-const rules = [];
+const rules: any = [];
 
 if (props.required) {
-    rules.push((val) => {
+    rules.push((val: any) => {
         if (!val) {
             return "Required";
         }
@@ -54,7 +45,7 @@ if (props.required) {
 }
 
 if (!props.range) {
-    rules.push((val) => {
+    rules.push((val: any) => {
         //check val is YYYY-MM-DD
         if (val) {
             if (!val.match(/^\d{4}-\d{2}-\d{2}$/)) {
@@ -65,23 +56,21 @@ if (!props.range) {
 }
 
 const attrs = {
-    ...{
-        filled: light.getStyle("inputFilled"),
-        outlined: light.getStyle("inputOutlined"),
-        standout: light.getStyle("inputStandout"),
-        rounded: light.getStyle("inputRounded"),
-        dense: light.getStyle("inputDense"),
-        square: light.getStyle("inputSquare"),
-        stackLabel: light.getStyle("inputStackLabel")
-    },
-    ...useAttrs(),
+    filled: light.getStyle("inputFilled"),
+    outlined: light.getStyle("inputOutlined"),
+    standout: light.getStyle("inputStandout"),
+    rounded: light.getStyle("inputRounded"),
+    dense: light.getStyle("inputDense"),
+    square: light.getStyle("inputSquare"),
+    stackLabel: light.getStyle("inputStackLabel")
 }
 
 const mask = props.range ? "####-##-## - ####-##-##" : "####-##-##";
 
 </script>
 <template>
-    <q-input v-bind="attrs" v-model="localValue" :rules="rules" :label="$t(label)" hide-bottom-space :mask="mask">
+    <q-input v-bind="attrs" :label="$t(props.label ?? '')" v-model="localValue" :rules="rules" hide-bottom-space
+        :mask="mask">
         <template v-slot:prepend>
             <q-btn icon="sym_o_event" round dense flat>
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">

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

@@ -1,8 +1,8 @@
 <script setup>
-import { computed, ref, useAttrs, useSlots } from "vue";
+import { computed, ref, useAttrs } from "vue";
 import { useI18n } from 'vue-i18n';
 import tc2sc from "../lib/tc2sc";
-import { useLight } from '../';
+import { useLight } from '#imports';
 
 const i18n = useI18n();
 const light = useLight();
@@ -165,10 +165,6 @@ const attrs = {
     ...useAttrs(),
 }
 
-const ss = Object.entries(useSlots()).map(([key, value]) => {
-    return key;
-});
-
 </script>
 <template>
     <q-input v-bind="attrs" :label="localLabel" v-model="localValue" :rules="new_rules" hide-bottom-space :type="localType">
@@ -184,10 +180,11 @@ const ss = Object.entries(useSlots()).map(([key, value]) => {
             </q-btn>
         </template>
 
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
 
+
         <template v-if="localShowPassword" v-slot:append>
             <q-icon name="sym_o_visibility" class="cursor-pointer" :color="showPassword ? 'primary' : 'grey-5'"
                 @click="isShowPassword = false" v-if="isShowPassword" />

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

@@ -1,31 +1,35 @@
-<script setup>
-import { computed, ref, useAttrs } from "vue";
+<script setup lang="ts">
+import { computed, ref } from "vue";
 import { useLight } from '../';
+import { type QSelectProps } from "quasar";
+
+const emits = defineEmits(["update:modelValue"]);
 
 const light = useLight();
-const props = defineProps({
-    rules: {
-        type: Array,
-        default: () => []
-    },
-    required: {
-        type: Boolean,
-        default: false
+interface LSelectProps extends QSelectProps {
+    required?: boolean
+}
+
+
+const props = withDefaults(defineProps<LSelectProps>(), {
+    rules: () => {
+        return []
     },
-    options: {
-        type: Array,
-        default: () => []
+    options: () => {
+        return []
     },
-    optionLabel: {
-        type: String,
-        default: "label"
+    optionLabel: () => {
+        return "label"
     },
-    label: {
-        type: String,
-        default: ""
+    emitValue: () => {
+        return true
     },
+    mapOptions: () => {
+        return true
+    }
 })
 
+
 if (props.required) {
     props.rules.push((val) => {
         if (Number.isInteger(val)) {
@@ -49,31 +53,40 @@ const filterFn = (val, update, abort) => {
 
     update(() => {
         const needle = val.toLowerCase();
+
         select_options.value = props.options.filter(v => v[props.optionLabel].toLowerCase().indexOf(needle) > -1);
     })
 }
 
-
-
 const clearable = computed(() => {
     return !props.required;
 });
 
-const attrs = {
-    ...{
-        filled: light.getStyle("inputFilled"),
-        outlined: light.getStyle("inputOutlined"),
-        standout: light.getStyle("inputStandout"),
-        rounded: light.getStyle("inputRounded"),
-        dense: light.getStyle("inputDense"),
-        square: light.getStyle("inputSquare"),
-        stackLabel: light.getStyle("inputStackLabel")
-    },
-    ...useAttrs(),
-}
+const attrs = computed(() => {
+    return {
+        ...{
+            filled: light.getStyle("inputFilled"),
+            outlined: light.getStyle("inputOutlined"),
+            standout: light.getStyle("inputStandout"),
+            rounded: light.getStyle("inputRounded"),
+            dense: light.getStyle("inputDense"),
+            square: light.getStyle("inputSquare"),
+            stackLabel: light.getStyle("inputStackLabel")
+        },
+        ...{
+            emitValue: props.emitValue,
+            mapOptions: props.mapOptions
+        }
+    }
+});
+
+const localValue = computed({
+    get: () => props.modelValue,
+    set: (value) => emits('update:modelValue', value)
+});
 
 </script>
 <template>
-    <q-select v-bind="attrs" :label="$t(label)" emit-value map-options :options="select_options" @filter="filterFn"
-        :option-label="optionLabel" hide-bottom-space :rules="rules" :clearable="clearable" />
+    <q-select v-bind="attrs" v-model="localValue" :label="$t(props.label ?? '')" :options="select_options"
+        @filter="filterFn" :option-label="optionLabel" hide-bottom-space :rules="rules" :clearable="clearable" />
 </template>

package/dist/runtime/formkit/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { getErrorMessage } from 'formkit-quasar';
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 const props = defineProps({
     context: Object
 });
@@ -10,18 +10,13 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-const ss = Object.entries(useSlots()).map(([key, value]) => {
-    return key;
-});
-
 const { error, errorMessage } = getErrorMessage(props.context.node);
 
-
 </script>
 <template>
     <l-checkbox v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-checkbox>
 </template>

package/dist/runtime/formkit/DatePicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
 const props = defineProps({
@@ -13,13 +13,12 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-const ss = Object.entries(useSlots()).map(([key]) => key);
 </script>
 <template>
     <l-date-picker v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-date-picker>
 </template>

package/dist/runtime/formkit/File.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 import { useLight } from '#imports';
 
@@ -15,8 +15,6 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-const ss = Object.entries(useSlots()).map(([key]) => key);
-
 const onBlur = () => {
     if (errorMessage.value) {
         error.value = true
@@ -44,8 +42,8 @@ const attrs = {
 <template>
     <q-file v-model="value" :label="context.label" v-bind="attrs" :error="error" :error-message="errorMessage"
         @blur="onBlur">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </q-file>
 </template>

package/dist/runtime/formkit/FilePicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
 const props = defineProps({
@@ -13,8 +13,6 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-const ss = Object.entries(useSlots()).map(([key]) => key);
-
 const onBlur = () => {
     if (errorMessage.value) {
         error.value = true
@@ -26,8 +24,8 @@ const onBlur = () => {
 <template>
     <l-file v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage" @blur="onBlur">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-file>
 </template>

package/dist/runtime/formkit/Input.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
 const props = defineProps({
@@ -10,10 +10,30 @@ const { error, errorMessage } = getErrorMessage(props.context.node);
 
 const value = computed({
     get: () => props.context.value,
-    set: (val) => props.context.node.input(val)
-})
+    set: (val) => {
+        if (props.context.number !== undefined) {
+            if (val === "") {
+                props.context.node.input(0)
+                return
+            }
+
+            let tryprase = parseInt(val)
+            if (isNaN(tryprase)) {
+                props.context.node.input(val)
+                return
+            }
 
-const ss = Object.entries(useSlots()).map(([key]) => key);
+            if (props.context.number === "integer") {
+                props.context.node.input(parseInt(val))
+                return
+            }
+
+            props.context.node.input(parseFloat(val))
+        } else {
+            props.context.node.input(val)
+        }
+    }
+})
 
 const onBlur = () => {
     if (errorMessage.value) {
@@ -23,13 +43,13 @@ const onBlur = () => {
     }
 }
 
-
 </script>
 <template>
     <l-input v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage" @blur="onBlur">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-input>
 </template>

package/dist/runtime/formkit/Select.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { getErrorMessage } from 'formkit-quasar';
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 const props = defineProps({
     context: Object
 });
@@ -12,9 +12,6 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-const ss = Object.entries(useSlots()).map(([key, value]) => {
-    return key;
-});
 
 //check required in parsedRules
 let required = false;
@@ -37,8 +34,8 @@ if (required) { //no clearable
 <template>
     <l-select v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage"
         :clearable="clearable">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-select>
 </template>

package/dist/runtime/formkit/TimePicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
 const props = defineProps({
@@ -12,14 +12,12 @@ const value = computed({
     get: () => props.context.value,
     set: (val) => props.context.node.input(val)
 })
-
-const ss = Object.entries(useSlots()).map(([key]) => key);
 </script>
 <template>
     <l-time-picker v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-time-picker>
 </template>

package/dist/runtime/formkit/index.mjs

@@ -58,7 +58,7 @@ export const createLightPlugin = () => {
       case "l-input":
         return node.define({
           type: "input",
-          props: ["inputType"],
+          props: ["inputType", "number"],
           component: Input
         });
       case "l-select":

package/package.json

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